Ja us vaig avisar i, com sabeu, qui avisa no és traïdor: tenia pendent parlar-vos dels maquetadors visuals o Page Builders. I com que és un dels temes que més em pregunteu, he actualitzat aquest article per explicar-vos què és un maquetador visual a WordPress, com ha canviat el panorama des que el vaig escriure i quins són els millors segons cada tipus d’usuari. Si veniu de com afegir Instagram a WordPress, aquest és el següent pas lògic per dissenyar el vostre web.
Què és un maquetador visual o Page Builder?
Allò que en anglès es coneix com a Page Builder, en català ho anomenem maquetador visual: una eina que ens permet dissenyar les pàgines de WordPress de manera visual, arrossegant i deixant anar elements (textos, imatges, botons, columnes, vídeos…) en lloc de programar o dependre del que ens permet la plantilla.
Com ja sabeu i he comentat en diverses ocasions, WordPress és un dels CMS més utilitzats, si no el que més. L’usen des de bloguers fins a grans empreses, i per això també el toquen perfils de tota mena, des d’experts a usuaris sense coneixements tècnics. I han estat aquests últims els qui van impulsar l’aparició dels maquetadors visuals.
He de ser dissenyador web per tenir una pàgina diferent? No. Els maquetadors ens permeten anar molt més enllà del que ofereix el theme instal·lat. Així i tot, si volem fer-ho bé, necessitarem l’ajuda de dissenyadors i programadors perquè el web funcioni a tots els nivells: disseny, velocitat, SEO i accessibilitat.
Per què utilitzar un maquetador visual?
Durant anys, l’editor de WordPress es va quedar curt per dissenyar amb llibertat. Això ha canviat bastant: l’editor de blocs (Gutenberg) i l’Editor de llocs (Full Site Editing) han avançat molt i avui permeten crear pàgines, plantilles, capçaleres i peus de pàgina sense plugins. Però per a dissenys complexos, animacions, finestres emergents o plantilles dinàmiques, els maquetadors continuen anant un pas per davant.
Els avantatges principals:
- Edició en directe: veus el resultat mentre treballes.
- Sense codi: columnes, seccions de color, icones, animacions o combinacions de text, imatge i vídeo amb uns quants clics.
- Plantilles completes: pots dissenyar la capçalera, el peu, les entrades del blog o les pàgines de producte, no només pàgines soltes.
- Disseny responsive: controles com es veu el web en mòbil, tauleta i ordinador.
I els inconvenients, que cal conèixer:
- Dependència: si un dia desactives el maquetador, part del disseny pot trencar-se.
- Pes i velocitat: mal utilitzats, afegeixen codi innecessari. Amb bona configuració i un bon hosting i memòria cau l’impacte es pot controlar.
- Corba d’aprenentatge: l’ús pot semblar complicat a primera vista.
Els millors maquetadors visuals per a WordPress
Aquesta és la meva selecció actual, segons la meva opinió i experiència. Recordeu que «el millor» depèn de què necessiteu, així que al final us deixo una guia per triar.
Elementor
Avui dia és un dels maquetadors més estesos, i el que faig servir en aquest mateix web. Té versió gratuïta i versió Pro. La gratuïta serveix per començar, però per treure-li partit de debò (constructor de plantilles, formularis, finestres emergents, camps dinàmics) convé passar a Pro.
Què m’agrada:
- Edició en directe molt intuïtiva i fàcil d’aprendre.
- Disseny amb contenidors flexibles (Flexbox i Grid), molt més lleuger i modern que les antigues seccions i columnes.
- Constructor de temes: capçalera, peu, blog, arxius i plantilles d’entrades.
- Enorme ecosistema de complements i alta compatibilitat amb plantilles, amb actualitzacions regulars.
Divi
No l’he fet servir tant, però molta gent en parla molt bé. S’obté amb una subscripció a Elegant Themes, que inclou el tema i el maquetador. El més positiu, sobretot per als dissenyadors i desenvolupadors web, és que la seva llicència permet usar-lo a tots els webs que gestioneu, i que es pot copiar un disseny d’una pàgina a una altra sense problemes. Ha evolucionat amb una nova generació (Divi 5), així que si us interessa, comproveu al seu web com està el panorama de versions i migració.
Bricks Builder i Breakdance
Dos maquetadors més recents que han agafat molta força entre dissenyadors i agències. Es caracteritzen per generar un codi més net i lleuger, i per donar més control a qui sap de CSS. Són una bona opció si la velocitat de càrrega és la vostra prioritat i no us espanta una corba d’aprenentatge una mica més gran.
Gutenberg i l’Editor de llocs de WordPress
Ja no es pot parlar de maquetadors sense esmentar l’editor natiu. Per a webs senzills, blogs o webs corporatius amb disseny contingut, és una opció excel·lent: sense plugins addicionals, molt lleugera i totalment integrada a WordPress. Es pot ampliar amb col·leccions de blocs com Kadence Blocks o Spectra, i és l’aposta més «a prova de futur».
WPBakery Page Builder (abans Visual Composer)
Va ser un dels pioners i en el seu dia era el que més feia servir. Continua present en moltes plantilles de ThemeForest, i si hereteu un web que l’usa, funcionarà. Però avui no el recomano per a projectes nous: el seu desenvolupament i el seu ecosistema han perdut terreny davant les opcions modernes, i migrar un web gran després costa temps i diners.
SiteOrigin Page Builder
Els creadors de SiteOrigin van ser dels primers a popularitzar el terme «Page Builder». Continua sent una opció gratuïta i funcional per a qui vulgui alguna cosa senzilla, tot i que ha perdut protagonisme davant les alternatives anteriors.
Quin triar? La meva guia ràpida
- Vols un web professional amb llibertat de disseny i plantilles: Elementor Pro.
- Gestiones molts webs i vols una sola llicència: Divi.
- Prioritzes la velocitat i saps una mica de CSS: Bricks o Breakdance.
- Web senzill, blog o pressupost mínim: Gutenberg i l’Editor de llocs.
- Hereteu un web antic: mantén el que té i planifica la migració a mitjà termini.
Preguntes freqüents
Un maquetador visual alenteix el meu web?
Pot fer-ho si s’usa malament, però no té per què. Un bon hosting, memòria cau, imatges optimitzades i no abusar de widgets i animacions marquen la diferència. Podeu consultar la meva guia sobre com mesurar la velocitat de càrrega d’un web.
Un maquetador visual és bo per al SEO?
El maquetador en si no posiciona, però influeix en factors que sí compten: velocitat, estructura d’encapçalaments, disseny mòbil i experiència d’usuari. Amb una bona configuració, no suposa cap problema.
Puc canviar de maquetador més endavant?
És possible, però normalment implica refer el disseny de les pàgines. Per això convé triar bé des del principi.
Necessito saber programar?
No per a lo bàsic. Per a dissenys molt personalitzats o per optimitzar el rendiment, una mica de CSS ajuda molt, o comptar amb un professional.
Conclusió
Els maquetadors visuals han madurat, i ara conviuen amb un editor natiu de WordPress molt més capaç. El meu consell és no obsessionar-se amb «el millor», sinó triar el que encaixi amb el vostre projecte, el vostre pressupost i el vostre nivell, i aprendre a usar-lo bé. Si utilitzem bé un Page Builder, millorem l’experiència d’usuari, augmentem el temps de permanència, la interacció amb el contingut i reduïm el percentatge de rebot.
Podria parlar d’altres com Thrive Architect o Beaver Builder i de molts més que cada dia surten. En coneixeu algun que no hagi esmentat i voleu que analitzi? Deixeu-me un comentari o cerqueu-me a xarxes socials. I, com sempre, si us ha agradat aquest post, compartiu-lo!
