GENERAL

Crear i gestionar formularis amb Gravity Forms

Gravity Forms és un plugin integrat en PortalEdu que permet crear formularis fàcilment per a arreplegar informació dels usuaris, com a formularis de contacte, inscripcions, sol·licituds o enquestes.

Amb este plugin podem:

  1. Crear formularis personalitzats.
  2. Rebre notificacions per correu quan algú envia un formulari.
  3. Consultar i gestionar les respostes enviades.
  4. Inserir formularis en pàgines o entrades del lloc web.

1. Crear un formulari

Només els rols més avançats com són el rol Direcció i el rol Manteniment tenen permisos per a crear formularis.

Per a crear un formulari nou:

  1. Accedix al panell d’administració de WordPress.
  2. En el menú lateral, entra en Forms / Formularis.
  3. Polsa en Add New (Afegir nou).
  4. Selecciona un formulari en blanc o una de les plantilles preestablides
  5. Introduïx:
    • Títol del formulari
    • Descripció (opcional)

Una vegada creat, podràs afegir els camps que necessites.

Tipus de camps disponibles

Gravity Forms permet afegir diferents tipus de camps que presenta organitzats en dos grups. Camps estàndard i camps avançats. Alguns exemples d’això són:

Camps estàndard

  • Caixa de text
  • Paràgraf
  • Llista desplegable
  • Caselles de verificació
  • …

Camps avançats

  • Data
  • Enllaç
  • Correu electrònic
  • Pujada d’arxius
  • CAPTCHA
  • …

Els camps s’afigen arrossegant-los al formulari i es poden reorganitzar fàcilment.

Cada camp permet configurar opcions com:

  • marcar-lo com a obligatori
  • afegir text d’ajuda
  • personalitzar l’etiqueta del camp

⚠ Ús obligatori de CAPTCHA

Per motius de seguretat, tots els formularis han d’incloure un element CAPTCHA.

Això ajuda a evitar:

  • enviaments automàtics de spam
  • atacs de bots
  • sobrecàrrega innecessària del sistema

El camp CAPTCHA es pot afegir des dels camps avançats del formulari. Més informació ací

2. Configurar les notificacions

Les notificacions permeten enviar correus electrònics automàticament quan algú completa el formulari.

Per a configurar-les:

  1. Accedix al formulari.
  2. Fes clic en Configuració → Notificacions.
  3. Polsa Afegir.

Ací podràs definir:

  • Destinatari del correu
  • Assumpte
  • Contingut del missatge
  • Adreça del remitent

És possible crear més d’una notificació, per exemple:

  • una notificació per a l’administrador del lloc
  • una confirmació automàtica per a la persona que ha enviat el formulari

Notificació per defecte

Quan es crea un formulari nou, Gravity Forms genera automàticament una notificació per defecte.

Esta notificació envia un correu electrònic a l’administrador del lloc amb la informació enviada en el formulari.

Si es desitja, esta notificació pot:

  • modificar-se
  • eliminar-se
  • o complementar-se amb altres notificacions.

3. Consultar les entrades rebudes

Cada enviament d’un formulari es guarda automàticament com una entrada.

Per a veure-les:

  1. Accedix a Forms / Formularis.
  2. Selecciona el formulari.
  3. Fes clic en Registres / Entrades.

Des d’esta secció pots:

  • veure les dades enviades
  • buscar entrades concretes
  • exportar la informació
  • eliminar registres

Això permet gestionar fàcilment tota la informació arreplegada a través del formulari.

⚠ Pujada d’arxius i quota de disc

Si el formulari inclou algun camp per a pujar arxius, cal tindre en compte que estos s’emmagatzemaran en el lloc web.

Això implica que:

  • els arxius computen dins de la quota d’emmagatzematge del lloc, que és limitada.
  • si es reben molts arxius o arxius grans, l’espai disponible pot reduir-se ràpidament.

Per este motiu es recomana:

  • limitar la grandària màxima dels arxius
  • evitar sol·licitar arxius sino és necessari.

Recomanació de manteniment

Si el formulari rep moltes respostes, és recomanable:

  • exportar periòdicament les entrades
  • eliminar els registres antics que ja no siguen necessaris

D’esta manera s’evita acumular massa informació i es facilita la gestió del lloc. Més informació ací

4. Inserir un formulari en una pàgina o entrada

Una vegada creat el formulari, habitualment l’inserirem en una pàgina o entrada perquè els usuaris puguen emplenar-lo.

Per a fer-ho:

  1. Crea o edita una pàgina o entrada en WordPress.
  2. En l’editor de blocs (Gutenberg), fes clic a Afegir bloc (+).
  3. Busca el bloc Gravity Forms.
  4. Selecciona el formulari que vols inserir.

El formulari apareixerà automàticament en la pàgina.

Després de publicar la pàgina, els usuaris podran accedir al formulari i enviar les seues respostes.

Recomanacions per a crear formularis

Per a millorar l’experiència dels usuaris:

  • Utilitza només els camps necessaris.
  • Marca com a obligatoris únicament els camps imprescindibles.
  • Configura correctament les notificacions.
  • Revisa periòdicament les entrades rebudes.

A tindre en compte: Els formularis de gravity-forms no admeten multilingüisme, de manera que si volem un formulari en diferents idiomes haurem de crear un formulari diferent per a cada idioma. L’altra opció seria incloure en cada item del formulari, les preguntes o textos traduïts als diferents idiomes.

Canvis massius en entrades (modificar entrades en lot)

WordPress ens permet realitzar unes certes modificacions sobre un grup o lot d’entrades. Estes modificacions s’aplicaran simultàniament a totes les entrades seleccionades. Entre les accions que podem aplicar sobre diverses entrades alhora, tenim:

  • Assignar una categoria
  • Canviar l’estat (passar a esborrany o a publicada)
  • Canviar l’idioma

Mostrarem un exemple de com assignar una categoria a totes les entrades d’un mateix autor

Pas 1: Llistem les entrades

Des de l’Escriptori –> Entrades

Fent clic sobre el nom de l’autor en qualsevol fila del llistat, obtindrem la vista filtrada d’entrades d’eixe autor.

Pas 2: Seleccionem les entrades que desitgem modificar

Podem seleccionar diverses entrades d’una en una o bé totes les d’eixa pàgina alhora, clicant en la casella superior, al costat de la paraula “Títol”

Important: Si el que farem és assignar una categoria a diverses entrades, és important assegurar-nos que les entrades que modificarem en lot tinguen el mateix idioma i que la categoria que assignarem tinga eixe mateix idioma també.

Per a assegurar-nos d’això, seleccionarem l’idioma que corresponga en la part superior, en el filtre d’idioma:

Pas 3: Seleccionem l’opció “Editar” en el menú d’accions en lot o accions massives

Seleccionem l’opció “Editar” i polsem el botó “Aplicar”

Pas 4: Seleccionem el canvi que volem realitzar (en este cas, afegir una categoria concreta a les entrades seleccionades)

Després de polsar el botó de “Aplicar” se’ns obrirà un panell amb les opcions disponibles per a modificar. En este exemple, volem assignar (afegir) una categoria al lot d’entrades. Observem que, en el nostre cas, apareix marcada la categoria “General”, apareix marcada amb un guió la categoria “Biblioteca”, i apareix desmarcada la categoria “Secretaria”. Això significa:

1- Totes les entrades seleccionades corresponen a la categoria “General”

2-Algunes de les entrades seleccionades tenen assignada la categoria “Biblioteca”

3-Cap de les entrades seleccionades té assignada la categoria “Secretaria”

Marquem la categoria “Secretaria” i cliquem “Actualitzar”

Comprovem que s’ha afegit la categoria “Secretaria” a totes les entrades seleccionades, respectant qualsevol altra categorització preexistent en les entrades.

Cal tindre en compte que quan seleccionem totes les entrades simultàniament, se seleccionen les entrades d’eixa pàgina. Si existixen altres entrades que també vulguem modificar, en altres pàgines, caldrà repetir el procés en cada una de les pàgines.

Contingut relacionat:

Ús de categories

Què són les àncores i com usar-les en Gutenberg?

Les àncores (o enllaços àncora) permeten crear enllaços que porten directament a una part concreta d’una pàgina o entrada. Són molt útils per a índexs de contingut, preguntes freqüents o pàgines llargues on volem facilitar la navegació al lector.

Podem veure un exemple d’esta mena d’enllaços en el següent índex de continguts per a esta entrada

Què és una àncora?

Un ancora és un identificador únic que s’assigna a un bloc dins de la pàgina. Després, pots crear enllaços que apunten directament a eixe punt usant el símbol #.

Per exemple:
https://portal.edu.gva.es/centro/entrada#ancla1 portarà a l’usuari al bloc que tinga l’àncora ancla1.

Com crear una àncora en Gutenberg

  1. Selecciona el bloc al qual vulgues enllaçar (per exemple, un encapçalat).
  2. En el panell dret, obri la pestanya Avançat.
  3. Busca el camp Àncora HTML.
  4. Escriu un nom curt, sense espais ni accents (exemple: servicis, faq, contacte).

Com crear un enllaç cap a l’àncora

  1. Selecciona el text o botó des d’on vulgues enllaçar.
  2. Afig un enllaç usant #nom-del-ancora.

Exemple:

  • Si l’àncora és crear_ancora, com en el cas de la segona entrada del nostre índex. L’enllaç serà 👉 #crear_ancora.

També pots enllaçar des d’una altra pàgina usant la URL completa:
https://portal.edu.gva.es/centro/entrada#crear_ancora

Consells ràpids

  • Usa noms clars i simples.
  • Evita espais i caràcters especials.
  • Les àncores funcionen especialment bé amb blocs d’Encapçalat (H2, H3…) per a crear índexs automàtics.

Les àncores milloren l’experiència de l’usuari i fan que navegar per continguts llargs siga molt més ràpid i còmode.

Ús de categories

1-Com ens ajuden les categories en wordpress?

Les categories de WordPress ens permeten agrupar les entrades en grans grups per a poder gestionar o visualitzar aquelles entrades relacionades amb eixa categoria. Un lloc web pot tindre categoritzats diferents temes. Per exemple, novetats, secretaria, general, preguntes freqüents, o nivells educatius com a primària, secundària, etc…

La categorització del contingut és útil en molts aspectes:

  • Donar-li a l’usuari una experiència còmoda on li siga ràpid trobar informació sobre un tema.
  • Quan un usuari entra en un article i li agrada el seu contingut, pot continuar llegint sobre altres assumptes relacionats accedint als altres articles de la categoria.
  • El contingut estructurat de la nostra web pot ajudar al posicionament, ja que els robots d’indexat poden llegir i categoritzar el contingut de manera àgil.

En Portaledu disposem de diferents blocs capaços de mostrar, de diferents formes, les entrades d’una mateixa categoria. Això ens permet que qualsevol nova entrada categoritzada i publicada puga mostrar-se automàticament en les pàgines configurades amb eixos blocs dinàmics.

Al final d’aquest post, trobaràs tota la informació sobre estos blocs.

2-Afegir una categoria

Des del menú de Categories (Entrades –> Categories), podem crear una categoria per a després associar qualsevol entrada a esta. Crear una categoria és simple; el formulari de creació ens explica què és cada cosa perquè no ens perdem.

Formulari afegir nova categoria
Exemple formulari nova categoria
Formulari afegir nova categoria (novetats)
Exemple formulari farcit nova categoria (Novetats)

Com es pot veure, en el formulari, apareixen explicacions de tots els apartats: Nom, Slug, Categoria mare, Descripció i Idioma. Fem èmfasi en el camp slug, que serà l’identificador de la categoria. Es recomana que siga el més clar i senzill possible perquè els visitants entenguen quin contingut estarà adscrit a eixa categoria.

3-Categoria en diversos idiomes. Traduccions.

Els llocs web en Portaledu són habitualment bilingües o multilingües. Necessitarem crear les traduccions per a cada categoria i enllaçar-les entre si. Posem un exemple:

Si hem creat la categoria Novetats, en valencià:

  • Nom: Novetats
  • Slug: novetats-va
  • Categoria mare: cap
  • Descripció: Categoria per a classificar els novetats del portal
  • Idioma: Valencià

Crearem el seu equivalent en castellà:

  • Nom: Novedades
  • Slug: novetats-es
  • Categoria mare: ninguna
  • Descripció: Categoría para clasificar las novedades del portal
  • Idioma: Castellano

Una vegada creades les dos categories, editarem una d’elles i li assignarem la seua traducció, des del camp Traduccions. Simplement teclejant el nom de la categoria en l’idioma corresponent, WordPress ens oferirà l’opció.

Editar categoria. Associar traducció.
Assignar traducció a una categoria

Una altra opció, que podeu explorar, és generar la traducció des del llistat de categories. En este cas, crearíem la categoria en el primer idioma i després, des del llistat de categories, utilitzarem l’opció de “+” o “crear traducció” com mostrem en la imatge següent:

Categoria. Crear traducció des de el llistat.

Una vegada creades i aparellades les traduccions, podem comprovar en el llistat que ja no apareix el “+” de crear traducció, sinó una icona d’un llapis, per a editar les traduccions:

Categories. Parella de traduccions.

4-Administrar categories

Des del menú de categories, podem editar, esborrar i actualitzar les categories. El llistat és idèntic a com es mostren les entrades o les pàgines de WordPress. Es mostra el seu nom amb les opcions d’Edició, Edició Ràpida, Esborrar o Veure.

5-Categoria per defecte

WordPress afig la categoria anomenada ‘Sense categoria’ per defecte, ja que tots les entrades s’afigen a esta categoria per a tindre un orde a pesar que l’usuari no utilitze les categories o s’afigen a esta categoria especial per a saber si existix una entrada sense categoritzar.

Esta categoria es pot modificar, però no esborrar. Si no volem mostrar esta categoria als nostres visitants, simplement hem d’assegurar-nos que cap entrada pertany a la categoria “Sense categoria”.

És una pràctica habitual, canviar de nom eixa categoria (i el slug) a “General”:

Categoria General (Sense categoria)

Per a saber quantes entrades pertanyen a una categoria, basta mirar, en el llistat de categories, el número que es mostra a la dreta. Si fem clic sobre este número, es mostraran les entrades adscrites a eixa categoria.

Nombre d'entrades associades a cada categoria.
Llistat de categories amb nombre d’entrades associades a cada una

6-Com categoritzar una entrada?

Es pot fer de dos formes: des de l’edició ràpida de cada post o bé editant l’article, des de la barra lateral d’utilitats. Recomanem la segona opció, ja que en l’edició ràpida no apareixen totes les possibilitats d’edició de les entrades.

Quan estem editant l’entrada o durant la creació d’esta, podem observar que hi ha un xicotet requadre on posa ‘Categories’. En ell, podrem observar totes les categories que tenim ja agregades, les més utilitzades o fins i tot crear categories noves si es necessita alguna en un moment específic. Òbviament, no podrem afegir tota la informació des d’este panell, però podem crear ràpidament una categoria perquè el nostre article no quede sense categoritzar.

Edició del post. Assignar categoria.

En la imatge de dalt, podem veure la categoria seleccionada per a l’entrada que estem editant.

7-Com mostrar les entrades d’una categoria

Tenim moltes maneres de fer-ho!

BLOCS QUE MOSTREN ENTRADES

Gutenberg: Bloc pestanyes

Gutenberg: Bloc visor lliscant

Gutenberg: Bloc acordió

Gutenberg: Bloc carrusel

Gutenberg: Bucle de consulta

8-Com assignar una categoria a múltiples entrades simultàniament

Canvis massius en entrades (modificar entrades en lot)

Diferència entre Pàgina i Entrada en WordPress

En WordPress, els continguts s’organitzen principalment en dos tipus: pàgines i entrades. Encara que els dos són elements que publiquem en la web, complixen funcions diferents i és important saber quan usar cada un.

Exemple de pàgina de portada (estructura fixa) que mostra contingut dinàmic (entrades de la categoria “Notícies”) mitjançant un bucle de consulta.

1.-Què és una Pàgina?

Una pàgina és un contingut estàtic o amb estructura estàtica, pensat per a informació o aparença que no canvia amb freqüència. Exemples típics en la web d’un centre educatiu són:

  • Portada
  • Secretaria
  • Departaments
  • Qui som
  • Oferta educativa
  • Contacte
  • Normativa del centre

Les pàgines no s’ordenen per data i no formen part del blog o de les notícies. Són ideals per a informació permanent o bé per a mantindre una estructura fixa, mostrant informació dinàmica i actualitzada. És un cas habitual utilitzar les pàgines per a mostrar entrades recents, novetats, etc.; la pàgina manté una estructura però el contingut que mostrano és estàtic.

Les pàgines solen estar referenciades en el menú horitzontal del lloc web.

Ací tens un exemple d’una pàgina:

Portaledu Inici

2.-Què és una Entrada?

Una entrada és un contingut dinàmic, pensat per a publicar notícies, novetats o articles que s’organitzen cronològicament o es poden agrupar per categories. Exemples:

  • Publicació d’activitats recents
  • Avisos importants
  • Esdeveniments del centre
  • Projectes de l’alumnat

Les entrades es poden categoritzar i etiquetar, la qual cosa permet agrupar-les per temes (per exemple: “Notícies”, “Novetats”, “Primària”, “Secundària”, “Activitats extraescolars”). Trobaràs informació al respecte en Ús de categories – Portaledu.

Ací tens un exemple d’una entrada:

Naix el ‘Centre en Proves’!

3.-Com es relacionen en Portaledu?

En Portaledu, les pàgines no sols mostren contingut estàtic, sinó que també poden incloure entrades categoritzades mitjançant diferents formats:

  • Carrusel d’entrades: mostra les últimes notícies en forma d’imatges lliscants. (+info).
  • Visor lliscant: permet navegar entre diverses entrades destacades. (+info).
  • Bucle de consulta: llesta entrades segons criteris (categoria, data, autor). (+info).
  • Acordió d’entrades: organitza les notícies en panells desplegables. (+info).
  • Pestanyes amb entrades: agrupa continguts per categories en diferents pestanyes (+info).

Això significa que una pàgina pot convertir-se en un contenidor dinàmic, mostrant informació actualitzada sense perdre el seu caràcter estructural.

4.-Quan usar Pàgina i quan Entrada?

  • Usa una Pàgina per a informació fixa i estructural (per exemple, “Portada”, “Calendari escolar” o “Projecte educatiu”).
  • Usa una Entrada per a notícies, avisos i continguts que tenen caràcter temporal (per exemple, “Excursió al museu” o “Resultats del concurs literari”) o ben continguts que es poden classificar en una categoria o temàtica com a “Preguntes Freqüents”, “Novetats”, “Formació”, “Secretaria”. Les entrades que pertanyen a una mateixa categoria poden mostrar-se fàcilment en una o diverses pàgines, a través dels blocs esmentats anteriorment.

Consell pràctic:
Si vols que les famílies troben fàcilment les novetats, publica-les com a entrades i utilitza les pàgines per a organitzar eixes entrades per categories, usant els mòduls dinàmics que oferix Portaledu.

Més informació pràctica ací:

🗃️ Tips per a organitzar el teu web de centre

Naix el ‘Centre en Proves’!

Desde Portaledu presentem una nova pàgina web formativa d’un centre fictici creada per a aprendre, inspirar i mostrar totes les possibilitats que oferix una web de centre en Portaledu amb l’editor estàndard que és el ‘Centre en Proves!’

Ací podràs:

💡 Descobrir exemples reals de disseny i estructura web
🧭 Accedir a píndoles formatives integrades en cada bloc
🛠️ Conéixer trucs i recursos per a millorar la presència digital del teu centre

Menú del lloc web

En este post aprendrem a confeccionar el menú superior del nostre lloc web:

1-Des d’on es configura el menú?

El primer que hem de saber és que podem confeccionar un menú per a cada idioma del nostre lloc web. Els menús es configuren des del panell esquerre de l’escriptori: Aparença –> Menús

Aparença, Menús

Si tenim més d’un menú definit, en primer lloc seleccionarem el menú que volem editar i polsarem el botó “Seleccionar”

2-Quina classe d’elements poden conformar el menú?

El menú està compost per enllaços que ens porten directament a:

  • Pàgines
  • Entrades
  • Enllaços personalitzats
  • Categories

3-Com afegir els elements al menú?

A la part esquerra, seleccionarem en el panell el tipus d’element (pàgines, entrades…) i marcarem aquell element que desitgem incorporar al menú. Per defecte, se’ns mostren els elements més recents. Si no trobem l’element que busquem, seleccionarem la pestanya “Veure tot”, on se’ns mostraran tots els elements.

Una vegada seleccionats els elements desitjats (poden ser varis o fins i tot tots), polsarem el botó de “Afegir al menú”.

4-Com ordenar els elements del menú?

Una vegada afegits els elements, estos es mostren com a blocs en la part dreta. Podem ordenar-los punxant sobre ells i arrossegant-los. Si desitgem que un ítem aparega com a submenú d’un altre, l’arrossegarem davall de l’altre, deixant-lo sagnat lleument a la dreta. En este exemple, les pàgines FAQs i SAI apareixeran com a submenú de SUPORT:

5-Establir idioma per al menú

En la part de baix de la configuració del menú, hem de seleccionar l’idioma en què es mostrarà eixe menú. En este exemple, està marcat que el menú actual siga el menú utilitzat per a la web en valencià.

6-Guardar el menú

No oblidem guardar el menú amb el botó corresponent, que trobarem a baix d’este: “Guardar el menú”

7-Editar el nom o eliminar un element del menú

En cada element del menú, a la dreta, trobarem una fletxa. Si fem clic sobre ella, es desplega l’element per a editar-lo. Podem modificar el nom de l’element, això permet mostrar en el menú un nom diferent del que tinga la pàgina o element originalment.

També tenim l’opció de Suprimir l’element del menú. Això no elimina la pàgina o post referenciat, només elimina la seua aparició en el menú.

Advertiment: Tingueu molta cura de no polsar sobre l’enllaç de “Suprimir el menú” si només voleu eliminar un element. Esta acció eliminarà el menú i no pot desfer-se! I recordeu sempre polsar el botó “Guardar el menú” després de qualsevol canvi desitjat.

Bloc modal (contingut emergent)

En esta entrada veurem com utilitzar el bloc modal. Este bloc ens permet mostrar contingut en una finestra modal, que se superposa al contingut que estem veient. La finestra emergix quan fem clic sobre un element configurat per a aquesta acció. Podeu veure un exemple en el botó següent:

Horari Escolar

Podem configurar com a elements “disparadors” de les finestres modals:

  • Qualsevol text (titular o paràgraf complets)
  • Botó
  • Imatge

Vol dir això que en fer clic sobre algun d’eixos tipus de blocs, podem fer que es mostre contingut en una finestra modal. Anem a veure-ho pas a pas:

1-Afegim un bloc modal

Després d’afegir el bloc, ens apareixerà en el contingut un bloc amb aquest aspecte:

2-Afegim contingut al bloc modal

En aquest pas, afegirem el contingut que desitgem mostrar en la finestra modal.

En fer clic sobre qualsevol part del bloc modal, aquest s’obrirà en edició:

Vista del bloc modal en edició (contingut)
Vista de la barra lateral dreta (configuració del bloc)

Dins del contingut modal podem afegir blocs de gutenberg (imatges, text, taules…), igual que ho fem en qualsevol pàgina o post.

En este exemple, inclourem un titular i una taula amb un horari escolar:

Per a guardar el contingut del bloc modal, simplement premem el botó d’actualitzar o guardar la pàgina o post.

Per a tornar a editar la resta de blocs de la nostra entrada, simplement tanquem el bloc modal amb la “X” de la part superior dreta del bloc.

3-Posem títol i altres configuracions

En la barra lateral dreta tenim les opcions de configuració del bloc modal, com ara:

  • Etiqueta del modal: És el nom que posarem al nostre modal. Serà útil si tenim diferents modals dins d’una mateixa entrada, per a poder distingir-los.
  • Ample: Es pot indicar una amplada per a la finestra modal (en píxels)
  • Mostrar botó de tancament: Opció de mostrar la X per a tancar o no (igualment la finestra modal es tanca en fer clic fora d’ella)
  • Mostrar modal en carregar la pàgina: Opció per a mostrar la finestra modal sense necessitat que l’usuari clique en cap element.

Configuració d’estils

En la configuració d’estils, també en la barra lateral dreta, podem configurar diferents opcions de colors i tamany de lletra, a destacar:

  • Text: Color del text de la finestra modal.
  • Fons: Color de fons de la finestra modal.
  • Fons de superposició: Podem configurar una capa de color sobre la qual es mostrarà la finestra modal.
  • Icona de tancament: Color de la “X” de tancament.
  • Fons icona de tancament: Color de fons de la “X” de tancament.

4-Configuració de l’element disparador de la finestra modal

Ara seleccionarem el bloc que ha de disparar que es mostre la finestra modal. Com hem dit, pot ser un paràgraf, un botó, etc.

Una vegada seleccionat, mirarem en la barra lateral dreta, baix del tot, la secció Avançat

Activarem l’interruptor de Mostrar modal en fer clic i seleccionarem el bloc modal que desitgem.

Guardem el nostre post i ja podem comprovar el funcionament del contingut modal en el front.

Ací teniu diversos exemples de finestres modals i diferents elements disparadors:

Horari Escolar

Fes clic ací

Imatge autobús escolar groc

Animació de blocs

Hem incorporat a Portaledu el plugin Blocks Animation, que ens permet dotar d’efectes animats a pràcticament qualsevol bloc de Gutenberg. En este post us ensenyarem com utilitzar esta funcionalitat.

1-Animació de textos. Efecte d’escriptura o tecleig.

Logo Portaledu

En els elements de text, com a paràgraf, titular, encapçalat, etc., veurem una nova opció en el menú contextual d’opcions del bloc. En primer lloc, seleccionem la part del text que volem animar; pot ser tota la frase o paràgraf o bé només una o diverses paraules.

En segon lloc, despleguem el menú de la barra de ferramentes del bloc, la fletxeta, on seleccionarem l’opció d’Animació d’escriptura. En fer-ho, podrem seleccionar un temps de retard d’inici i una velocitat per a l’animació.

Guardem l’entrada i la previsualitzem per a veure com ha quedat. Veurem un efecte de tecleig, anirà apareixent el text al qual hem aplicat l’animació.

En el mateix desplegable podem configurar una Animació de comptador, disponible només per a números:

67

2.-Animació d’imatges o altres blocs

En la majoria de blocs de gutenberg, com per exemple, en qualsevol bloc d’imatge, en la columna d’ajustos de la dreta, apareix una secció d’Animacions :

Secció animacions en bloc imatge

En el menú desplegable d’opcions d’animació, en trobarem una gran varietat. Una vegada hàgem seleccionat alguna, ens apareixeran nous ajustos, a saber, el retard d’inici i la velocitat de l’animació.

Reproduir en passar el cursor: S’oferix un ajust perquè l’animació s’execute (una vegada) en passar el ratolí sobre l’element. Hem de tindre en compte que si activem esta opció, l’animació s’executarà només quan li passem el punter del ratolí per damunt.

A més, el botó de Reproduir l’animació ens permet comprovar l’animació configurada per a eixe bloc. Podem comprovar l’efecte en esta imatge:

Docent científica
Toca o passa el cursor per a animar (només una vegada)

3.-Animació d’un bloc contenidor (animacions encastades)

Com sabeu, el bloc contenidor s’utilitza per a agrupar blocs i ajustar de manera conjunta uns certs aspectes de la seua aparença (color de fons o imatge de fons, màrgens, espaiat, contorn…). En este cas, podem introduir en un bloc contenidor diferents blocs com a botons, text, imatges i configurar animacions tant per al contenidor, com per als subblocs. Vegem-ho amb un exemple:

Llistat de material escolar

Consulta

Si vols saber com s’ha fet este bloc contenidor, tret de les animacions, Bloc contenidor: exemple 1 – Portaledu

4.-Configuració del sistema operatiu per a habilitar/deshabilitar animacions

Per motius d’accessibilitat, les animacions web es poden deshabilitar per tal de facilitar la lectura de les pàgines web. Esta configuració es troba habitualment en el sistema operatiu. Els navegadors respecten habitualment les configuracions d’accessibilitat del sistema operatiu, com ara la de “Reduir moviment“.

En el cas de Windows, trobarem esta opció en Configuració –> Accessibilitat –> Efectes visuals –> Efectes d’animació

Bloc contenidor: exemple 1

Bloc contenidor amb titular i botó

En este post aprendrem a utilitzar el bloc contenidor per a confeccionar un conjunt com el següent:

Aquest és un bloc contenidor:

Aquest és un bloc titular

Aquest és un botó

En el qual tenim:

  • Un bloc contenidor pare, que engloba tot el conjunt i que conté: Una imatge de fons, així com una capa fosca sobre la imatge, per tal d’assegurar-ne la llegibilitat dels blocs que estan dins del contenidor (text, botó), una vora arredonida i amb color.
  • Un bloc Titular que conté el text que volem mostrar.
  • Un bloc Botó que conté un enllaç a la informació relacionada.

1.-Inserim un bloc contenidor

2.-Configurem la imatge de fons

Des de la secció Fons, de la zona de configuració de la dreta, podem seleccionar qualsevol imatge de la mediateca, o inserir una imatge amb URL.

Una vegada configurada, veurem que el contenidor mostra la imatge com a fons, però únicament es veu una franja horitzontal. Ens falta encara definir l’alçada del contenidor, si volem veure més part de la imatge o la imatge sencera.

Des de la secció Redimensionar, configurem, per exemple, una alçada mínima de 500 píxels.

3.-Inserim un bloc Titular

Dins del contenidor, afegim un bloc Titular.

I configurem el color del text, tipografia, mida, negreta, alineació…

Podem també aplicar marges al bloc Titular o bé farciment al bloc contenidor, per tal de moure el text cap avall, o bé podem configurar, per a tot el bloc contenidor, una posició/ubicació per als subblocs (vegeu apartat 6).

4.-Enfosquim la imatge de fons. Opacitat.

Per tal que el text sobre la imatge siga més llegible, serà necessari aplicar una capa fosca. Ho farem mitjançant les opcions de Colors de fons i Opacitat de la imatge. Estes opcions corresponen al bloc contenidor.

5.-Inserim un botó

Inserim un bloc Botó i configurem inicialment algunes opcions de l’aspecte: Disseny de pantalla: Flex, alineació centrada, negreta per al text.

Configurem també els colors del botó i fiquem una amplada, per exemple 300 píxels.:

Configurem un enllaç, on ens dirigirà quan premem el botó:

6.-Posició dels continguts dins del contenidor

Des de la barra de ferramentes contextuals del bloc contenidor, podem configurar una posició general del contingut dins del bloc.

Si escollim la posició central, tant el titular com el botó es distribuiran dins del contenidor, alineats cap al centre.

7.-Previsualització i ajust de la profunditat dels elements (z-index)

Tot i que, en edició, el text i el botó es mostren correctament sobre la imatge de fons, si previsualitzem el contingut en el front, resulta que ambdós elements han heretat la transparència o falta d’opacitat del contenidor, de forma que es visualitzen una miqueta esvaïts, així:

Per a solucionar-ho, cal només definir, per a estos elements, un nombre superior en la configuració de profunditat (z-index). Hem d’imaginar que els continguts es mostren en diferents capes i nosaltres volem dur els elements a una capa superior, perquè es mostren per damunt de la resta.

Anem a la configuració del bloc titular i també a la del bloc botó i configurem índex-z, per exemple a 1

Si previsualitzem ara tot el contingut, ja es veurà correctament:

Avís de privacitat

Este lloc web utilitza només cookies tècniques necessàries per al seu funcionament. No s’emmagatzemen dades amb finalitats publicitàries ni es comparteixen amb tercers. S’utilitza analítica interna sense cookies, i només es recull la IP amb finalitats de seguretat.

Veure política de cookies