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
En este post aprendrem a confeccionar el menú superior del nostre lloc web:
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
Si tenim més d’un menú definit, en primer lloc seleccionarem el menú que volem editar i polsarem el botó “Seleccionar”
El menú està compost per enllaços que ens porten directament a:
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ú”.
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:
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à.
No oblidem guardar el menú amb el botó corresponent, que trobarem a baix d’este: “Guardar el 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.
| Hora | Dilluns | Dimarts | Dimecres | Dijous | Divendres |
|---|---|---|---|---|---|
| 09:00 – 09:45 | Valencià | Matemàtiques | Coneixement del medi | Castellà | Matemàtiques |
| 09:45 – 10:30 | Matemàtiques | Valencià | Castellà | Matemàtiques | Valencià |
| 10:30 – 11:15 | Castellà | Anglés | Valencià | Anglés | Educació artística |
| 11:15 – 11:45 | Pati | Pati | Pati | Pati | Pati |
| 11:45 – 12:30 | Educació física | Coneixement del medi | Matemàtiques | Educació artística | Coneixement del medi |
| 12:30 – 13:15 | Anglés | Educació artística | Educació física | Castellà | Anglés |
| 13:15 – 15:00 | Menjador / Temps lliure | Menjador / Temps lliure | Menjador / Temps lliure | Menjador / Temps lliure | Menjador / Temps lliure |
| 15:00 – 15:45 | Tutoria | Valors socials i cívics | Projectes interdisciplinaris | Informàtica | Taller de lectura |
| 15:45 – 16:30 | Música | Música | Biblioteca | Educació física | Joc cooperatiu |
| 16:30 – 16:45 | Recollida / Eixida | Recollida / Eixida | Recollida / Eixida | Recollida / Eixida | Recollida / Eixida |
Hem configurat un bloc modal amb alguns colors:
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:
Podem configurar com a elements “disparadors” de les finestres modals:
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:
Després d’afegir el bloc, ens apareixerà en el contingut un bloc amb aquest aspecte:
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ó:
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.
En la barra lateral dreta tenim les opcions de configuració del bloc modal, com ara:
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:
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:
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.
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:
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 :
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:
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:
Si vols saber com s’ha fet este bloc contenidor, tret de les animacions, Bloc contenidor: exemple 1 – Portaledu
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ó
En este post aprendrem a utilitzar el bloc contenidor per a confeccionar un conjunt com el següent:
En el qual tenim:
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.
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).
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.
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ó:
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.
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:
Quan estem treballant en continguts complexos, amb molts blocs, podem fer-ho més còmodament ampliant la zona d’edició. En este exemple mostrem un contingut complex, amb moltes columnes, en el qual no resulta còmode treballar en una àrea estreta:
En el menú de seccions de l’esquerra, en la part de baix, podem clicar per a reduir-lo. Es mostraran únicament les icones i quedarà el menú més estret.
Des de la part superior, fent clic sobre els tres punts, es mostren les opcions de vista d’edició disponible. Seleccionarem Mode de pantalla completa.
Podem comprovar que, en ampliar la zona d’edició d’esta manera, els elements responsius es mostren de forma més similar a com es veuen en el front, això és, com els veuen els visitants.
En qualsevol moment, podem tornar a la configuració original desfent estos passos.
Els blocs botó i titular de generateblocks permeten la utilització d’icones SVG. En este post aprendrem a utilitzar-les.
En primer lloc, afegirem des de l’editor un dels dos blocs esmentats, que són els que permeten inserció de textos i icones svg
Utilitzarem, per exemple, un bloc Titular:
Podem escriure el text que desitgem.
Després, en la configuració del bloc, podem identificar una secció on es definirà la icona SVG. S’aprecien tres subseccions:
Si no trobem cap icona de les disponibles que ens encaixe, podem obtindre més icones de diferents temàtiques en algun repositori extern com SVG Repo – Free SVG Vectors and Icons
En el repositori indicat, podem buscar entre un gran nombre d’icones.
Quan seleccionem una, és important fixar-se en el tipus de llicència, que ens indicarà si hi ha algun tipus de restricció en el seu ús, per exemple, triarem esta icona amb llicència de domini públic.
A continuació, editem el vector i utilitzem l’opció de Copiar SVG
Tal com es veu en la captura, podeu editar certs paràmetres si us interessa, abans de copiar.
Ara peguem en la nostra secció d’Icona, en la configuració del bloc titular. Una vegada pegat el codi, es previsualiza la icona justa davall.
A més, també es visualitza la icona en el nostre bloc titular:
Depenent del codi de la icona que hàgem obtingut, pot ser necessari configurar el color. En este cas, observem que en el bloc es visualitza completament negre, incloent-hi el farciment. Això no és el que volíem. Perquè es visualitze tal com volem, amb el farciment blanc, simplement ajustarem, també en els ajustos del bloc, el color de la icona:
Immediatament, comprovarem que la icona es visualitza amb el farciment blanc, tal com volíem:
També podeu canviar el tamany de la icona, independentment del tamany del text, des de la configuració del bloc:
Des del repositori de svg, podem també exportar la icona a un fitxer svg. Este fitxer podrem després pujar-lo a la mediateca i utilitzar-lo amb un bloc d’imatge. Esta opció és la recomanada quan el codi svg en HTML no funciona bé en WordPress. De vegades, WordPress pot filtrar per seguretat alguna de les etiquetes del codi, produint que no es visualitze bé la icona.
Advertiment: Este procediment funciona bé, en general. Tanmateix, podria ser que copiar i pegar no funcione en casos determinats com per exemple quan el tipus de bloc copiat no existisca en el wordpress de destí o bé algun bloc tinga algun tipus de restricció en origen o destí.
Amb l’editor de blocs de WordPress és senzill copiar un o diversos blocs des d’una pàgina o post a una altra pàgina o post diferent.
Per a això, només has de seguir estos passos:
1-En una pestanya del navegador, obri en edició el post d’on vols copiar.
2-Obri en una altra pestanya del navegador, també en edició, el post que ha de rebre els blocs copiats
3-En el post original, selecciona el bloc o blocs a copiar. Recomanem fer-ho des de la vista resum del document, ja que es controla millor la selecció. Utilitza el botó dret del ratolí i selecciona Copiar, o bé utilitza CTRL+C. Pots utilitzar la tecla MAJÚSCULES + CLIC esquerre del ratolí per a seleccionar diversos blocs.
4-En el post de destí, fes clic en el lloc on vols vegar el contingut, utilitza el botó dret del ratolí per a pegar, o bé utilitza CTRL+V
5-Com a resultat, es pegaran en el nou post els blocs copiats:
Observació: Anteriorment s’ha estat utilitzant el bloc PDF Embedder però es recomana la utilització del bloc Fitxer, estàndard de WordPress, que ha evolucionat i té ara una millor funcionalitat.
La millor forma per a compartir, visualitzar i oferir la descàrrega d’un fitxer PDF en Portaledu és la utilització del bloc Fitxer. T’expliquem com utilitzar-lo en este post.
El bloc “Fitxer” de WordPress permet incrustar un enllaç de descàrrega per a diferents tipus d’arxiu, directament en el teu contingut. A més, en el cas de fitxers pdf, el bloc carrega un visor que mostra el fitxer amb un iframe.
En la següent imatge es mostra l’ús d’este bloc per a diferents tipus de fitxer:
Per a utilitzar-lo, buscarem “Fitxer” en el llistat de blocs.
Una vegada afegit el bloc a la pàgina, només cal triar l’arxiu pdf que volem mostrar, bé pujant-ho directament, bé seleccionant-lo des de la mediateca.
Hem incorporat a Portaledu un nou bloc de galeria d’imatges, amb funcionalitat millorada per a la disposició i visualització de les imatges. Observa este exemple!
Fins ara, l’editor estàndard en Portaledu disposàvem de dos blocs de galeria que venen de sèrie amb WordPress i amb el nostre plugin de carpetes (Real Media Library)
-Galeria
-Real Media Gallery
Ara hem incorporat un bloc anomenat Galeria d’Imatges que permet una major configuració, adaptació responsiva i presentació d’imatges.
1-Selecciona el bloc Galeria d’Imatges:
2-Una vegada inserit el bloc, polsem sobre el botó de Seleccionar imatges. Podem utilitzar dreceres com CTRL+clic o MAY+clic per a seleccionar simultàniament diverses imatges de la mediateca.
3-Una vegada triades les imatges, podem editar les llegendes d’estes, en cas que vulguem mostrar-les en la galeria. Si no desitgem mostrar les llegendes, podem fer clic directament sobre el botó d’Inserir una galeria.
4-Després d’afegir la galeria, podrem modificar diferents configuracions de visualització, des de les opcions de la dreta:
Configuracions disponibles:
5-Est seria l’aspecte en visualitzar:
6-En fer clic sobre qualsevol imatge, s’accedix al mode presentació, en què es pot anar passant d’una imatge a una altra amb les fletxes
