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:
Opcions per a ampliar la zona de treball
1-Reduir el menú de l’esquerra
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.
2-Mode pantalla completa
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.
Imatge exemple d’ús d’icones en botons
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.
2-Configurem la icona SVG
Després, en la configuració del bloc, podem identificar una secció on es definirà la icona SVG. S’aprecien tres subseccions:
Icona SVG HTML: Ací pegarem el codi SVG quan l’hàgem obtingut externament.
General: Disposem d’alguns SVG genèrics
Social: Disposem d’alguns SVG relacionats amb xarxes socials
3-Ús de repositoris externs de SVG
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:
4-Últims ajustos: color de farciment de la icona i tamany
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:
Este és un bloc titular, amb text i amb icona SVG
També podeu canviar el tamany de la icona, independentment del tamany del text, des de la configuració del bloc:
5-Altra opció: descarregar el svg com a fitxer
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:
ZIP i JPG: Tant quatre_escales_matemàtiques.zip com paisaje04.jpg (1) són mostrats pel seu nom seguits d’un botó de descàrrega.
PDF: Mentres que per al cas del fitxer loren-ipsun.pdf el navegador mostra el seu contingut en el visor, a més de l’opció de descàrrega. (2)
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!
Quadern
Rellotge
Autobús
Telèfon
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:
Nombre de columnes
Disposició (Uniforme, Masonry – Mosaic, s’adapta a les diferents grandàries i proporcions)
Relació d’aspecte (diferents relacions d’aspecte per a la configuració uniforme)
Espaiat entre imatges
Mostrar llegendes
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
Si bé WordPress incorpora de sèrie el bloc anomenat Últimes Entrades, que permet mostrar de diferents formes i segons diferents criteris els continguts del teu lloc web, en Portaledu et recomanem estos altres blocs per a realitzar esta mateixa funció:
Si desitges afegir paginació al teu bucle de consulta, per a mostrar de forma paginada un major nombre de continguts, t’ensenyem com fer-ho.
1-En la barra de ferramentes del bucle de consulta, apareix l’opció d’afegir paginació. Només cal polsar el botó:
2-Se’ns mostrarà llavors el bloc de paginació, just davall de les entrades del bucle de consulta. El propi bloc de paginació incorpora una barra de ferramentes que ens permetrà algunes operacions com centrar-lo.
3-Seleccionant després els diferents subblocs, és a dir els indicadors de pàgina anterior i pàgina següent, o els números de pàgina, podrem modificar nombrosos paràmetres des de la columna de configuració, a la dreta de la pantalla. Per exemple, podem modificar els colors del fons i dels números del paginador.
Com sempre, et recomanem explorar totes les opcions de configuració disponibles si desitges modificar els valors per defecte.
Recorda la informació general sobre el bloc de bucle de consulta:
S’ha establit com a data de finalització del plugin Beaver Builder en Portaledu el 31/08/2026.
Es recorda a aquells usuaris de Portaledu en els llocs dels quals està encara actiu l’editor Beaver Builder (també conegut com a editor visual), que heu d’anar abandonant este editor.
Per a identificar els continguts fets amb l’editor visual, només heu de fixar-vos si en la barra d’administració (zona superior) us apareix l’opció d’edició amb Editor Visual:
Des del tauler, des dels llistats de pàgines i d’entrades, podem fàcilment identificar tots els continguts fets amb l’editor visual:
Cal que convertiu a l’editor estàndard les entrades i pàgines que vulgueu conservar. Es tracta d’una tasca que no pot ser automatitzada; per això s’avisa amb temps suficient perquè ho pugueu planificar i escometre. A partir de la desinstal·lació del plugin, els continguts romanents fets amb l’editor visual deixaran de visualitzar-se.
Pot ser un bon moment per a fer neteja d’informació obsoleta, que continua en el web per inèrcia.
En l’enllaç següent trobareu més informació al respecte:
Com sabeu, el nostre portal es visualitza des de tota mena de dispositius electrònics i pantalles. La major part del contingut generat amb l’editor estàndard té un comportament responsiu i s’adapta automàticament a la grandària i orientació de la pantalla en què es visualitza.
A vegades, podem requerir un major control de la disposició dels elements del nostre contingut, en funció de la grandària de la pantalla. Això és possible gràcies a les opcions que ens oferix l’editor estàndard de WordPress (Gutenberg), combinat amb el nostre tema (GeneratePress), i amb la funcionalitat d’alguns blocs, com els bloc de quadrícula i contenidor.
Mostrarem un exemple senzill sobre com alterar l’orde de visualització de dos elements quan passem a vista amb telèfon mòbil.
La següent imatge representa la vista d’una pàgina des d’un PC, la qual cosa es coneix com a vista en mode escriptori:
Observem dos imatges, una al costat de l’altra
Este contingut està format per un bloc de quadrícula que conté dos blocs contenidors. Cada un, al seu torn, conté una imatge. Explorant la vista de l’editor en mode llista:
El comportament per defecte, quan es visualitza este contingut en un dispositiu mòbil, seria mostrar a dalt el que està a l’esquerra i a baix el que està a la dreta, així:
Doncs bé, si desitgem que en vista mòbil es mostren les imatges de manera inversa, això és, la de la dreta a dalt i la de l’esquerra a baix, podem fer-ho, gràcies a l’ajust de “ordre” que ens permet el bloc contenidor. Per a això, seleccionarem el bloc contenidor de la primera imatge:
Anirem als ajustos del bloc i seleccionarem els ajustos per a dispositiu mòbil:
Després en la secció d’ajust “flex child”, posarem un nombre natural que especifique l’ordre del bloc (per defecte és zero o buit).
Només amb posar un 1, veurem que ja canvia la disposició de les imatges, ja que el contenidor de l’altra imatge, té per defecte l’ordre 0, que és inferior a 1 i per això es mostrarà abans (a dalt, en este cas).
En cas de tindre més de dos elements, podem igualment assignar un ordre a cada un d’ells, alterant el comportament de la vista responsiva al nostre gust.
Recordeu que és un ajust del bloc contenidor de generateblocks.
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.
