Els millors maquetadors gratis de WordPress

Per fer un web que quedi agradable i atractiu visualment, la majoria de mortals que utilitzam el WordPress necessitam un maquetador. Els maquetadors serveixen per estructurar les pàgines i afegir elements específics sense haver-nos de trencar el cap amb l’editor per defecte. Si no coneixes llenguatges de programació ni tens temps per aprendre’n o cercar la solució òptima pel teu cas, tens dues opcions. O contractes algú perquè t’ho faci picant codi, o utilitzes algun dels magnífics constructors de pàgines que existeixen. En aquest article veurem els tres millors maquetadors gratis de WordPress. Són els tres més coneguts i utilitzats ara mateix.

Triar un bon maquetador pot esser una decisió crucial a l’hora de fer el web. Et pot evitar perdre hores i hores en la construcció del teu lloc sense que la seva instal·lació i funcionament afecti el rendiment de la pàgina. Superar les limitacions de l’editor del WordPress es pot aconseguir a base d’afegir extensions per crear seccions, columnes, taules, botons, icones, caixes d’informació, efectes visuals, etc… O pots optar per una extensió que incorpori les funcionalitats que necessites i evitar haver de cercar una per una aquestes extensions, aprendre com configurar-les, i com funcionen.

Lògicament de maquetadors n’hi ha de gratis i també de pagament, sempre més complerts. La majoria dels que són gratis tenen també la seva versió premium, que afegeixen encara més funcionalitats i opcions de configuració. I altres únicament estan disponibles amb versió de pagament. Aquests darrers els deixarem per una altra ocasió.

Els maquetadors gratis que més s’empren per part dels usuaris de WordPress i dels que farem una comparativa són els següents:

Page Builder de SiteOrigin

Els millors maquetadors gratis de WordPress: SiteOrigin Page Builder

El maquetador de SiteOrigin és el campió en usuaris amb més d’un milió d’instal·lacions actives registrades. La utilització d’aquest maquetador requereix la instal·lació d’almenys dues extensions, el propi maquetador SiteOrigin Page Builder, i l’extensió SiteOrigin Widgets Bundle. Aquest darrer afegeix una col·lecció de ginys al constructor que pots utilitzar per construir les teves pàgines amb el maquetador. Els ginys per defecte del WordPress també s’integren perfectament en el maquetador de SiteOrigin perquè els puguis ubicar allà on més et convingui i no només a les àrees de ginys que permet el teu tema. El constructor de pàgines de SiteOrigin també integra perfectament els ginys de WooCommerce i de moltes altres extensions que afegeixin ginys al teu WordPress.

Hi ha altres extensions de diferents desenvolupadors que permeten afegir més ginys al constructor de SiteOrigin, però per fer la comparació amb la resta d’opcions gratis d’aquest article només he tingut en compte els ginys propis de SiteOrigin també gratis. SiteOrigin disposa d’extensió premium que afegeix més ginys al constructor.

També incorpora plantilles ja construïdes per facilitar la creació de pàgines.

Per fer-vos una idea del seu funcionament, el vídeo promocional (en anglès) mostra algunes pinzellades que poden ser d’utilitat.

Aquest maquetador és l’únic dels examinats que el pots emprar tant des del frontal del web de forma visual com des de l’editor d’entrades i pàgines. Tots els altres s’utilitzen només des del frontal del web. L’edició des del frontal es realitza des d’una barra lateral esquerra, igual que la personalització del propi WordPress.

Beaver Builder

Els millors maquetadors gratis de WordPress: Beaver Builder

El maquetador Beaver Buildermés de 300.000 instal·lacions actives. Es tracta d’un maquetador més limitat pel que fa a la quantitat de ginys i funcionalitats disponibles en la seva versió gratuïta, però com en el cas de SiteOrigin també existeixen extensions de tercers que afegeixen ginys a aquest constructor. També integra perfectament els ginys per defecte de WordPress, de WooCommerce i a més a més els de la majoria d’extensions i temes que es troben disponibles a l’àrea de ginys del teu WordPress.

En aquest cas la versió gratis no té plantilles disponibles, només hi ha accés des de la versió premium. Però sí que hi ha extensions al repositori oficial de WordPress que afegeixen plantilles gratis per aquest maquetador.

Com es pot observar el BeaverBuilder es presenta amb una barra lateral a la dreta de la pantalla des d’on s’accedeix a les diferents opcions.

Elementor

Els millors maquetadors gratis de WordPress: Elementor

Elementor és un maquetador molt recent, creat el 2016 i que ja s’ha fet un lloc en el podi dels constructors visuals de pàgines en WordPress. Fa poques setmanes anava per les 80.000 instal·lacions actives i en el moment de començar a escriure aquest article ja superava les 90.000. En el moment de publicar-lo ja ha superat les 100.000 instal·lacions actives. El seu ús per tant s’està generalitzant a gran velocitat.

Com els altres dos té també la seva versió premium i tot i que és un constructor amb poc temps de vida ja hi ha igualment extensions de tercers que afegeixen ginys i funcionalitats a la versió gratis.

Integra els ginys per defecte de WordPress, però en aquest cas no els ginys de Woocommerce. Per l’ús de funcionalitats de botiga online amb Woocommerce és necessària  la versió premium d’Elementor. De totes formes sí que existeix una extensió gratis que afegeix els ginys de WooCommerce a la versió lliure d’aquest maquetador. Igual que SiteOrigin, també inclou plantilles gratis ja preparades.

En el seu vídeo de promoció (en anglès) es presenta com el maquetador visual lliure més ràpid per a WordPress.

 

Elementor funciona des de la pròpia pantalla del frontal del web per crear noves seccions o inserir plantilles predeterminades i mitjançant una barra lateral a l’esquerra des d’on s’arrosseguen els ginys cap a la ubicació corresponent.

Elementor i GeneratePress a més, que com sabeu és un dels meus temes de WordPress preferits i que recoman, fan molt bona parella! Des de l’equip d’Elementor es recomana l’ús de GeneratePress i també el desenvolupador d’aquest tema, Tom Usborne, recomana el maquetador Elementor.

Comparativa de ginys


A la classe sobre maquetadors del Curs WordPress Nivell Mitjà hem vist el funcionament de cada un d’aquests maquetadors construint una mateixa pàgina amb cada un d’ells. També hem vist el que passa amb les pàgines realitzades si desactives les extensions respectives que fan funcionar el maquetador, amb conseqüències diferents en cada cas.

Finalment també vaig aprofitar la classe i el fet de tenir una mateixa pàgina creada amb els diferents maquetadors per realitzar un test de velocitat de càrrega de cada una amb Pingdom. Veurem els resultats a la part final d’aquest article.

Però abans, si estàs cercant quin dels maquetadors et pot resultar més útil necessitaràs saber què pots fer amb cada un d’ells. Per aquest motiu tens les següents taules que he preparat:

  • Una taula amb els ginys que tenen disponibles les versions gratuïtes de cada constructor.
  • Una taula amb les prestacions que té cada un dels maquetadors per realitzar files o seccions
  • Una altra taula amb les prestacions de configuració de columnes.
  • I finalment la taula amb els resultats del test de velocitat de càrrega de cada pàgina amb el maquetador corresponent.

Quadre comparatiu d’elements disponibles

En la taula que tenim a continuació hi ha llistats els ginys propis que incorpora cada maquetador.

GINYS PROPIS SO BB E
Seccions/Files/Columnes
Imatge
Editor de Text
Video
Botons
Galeria Imatges
HTML
Testimonis
Icones
Icones Socials
Barra Lateral
Capçaleres
Google Maps
Caixa Icona
Llista (Icones)
Barra Progrés
Pestanyes
Acordió
SoundCloud
Shortcode
Slider
Post Loop / Blog
Post Carrusel
Features
Call to Action
Layout Builder
Post Content
Caixa/Taula Preus
Hero
Layout Slider
Simple Masonry
Taxonomia
Video Player
Divisor
Separador
Espaiat
Carrusel Imatges
Comptador
Caixa Imatge
Toggle
Alerta
Àncora menú
GINYS WP
GINYS WOO
PLANTILLES

Comentaris generals:

En primer lloc hi ha els ginys que són presents en els tres constructors. Com podreu veure només hi ha quatre ginys que són comuns a tots ells: crear seccions, files i columnes, el giny d’imatges, el giny d’editor de text i el de vídeo.

A continuació hi ha llistats els ginys que són compartits per almenys dos dels tres maquetadors. Cal destacar que Elementor és l’únic que no falla i els té tots.

Finalment apareixen llistats els ginys propis que només estan disponibles en un dels maquetadors. En aquesta ocasió destaca que la versió gratis de BeaverBuilder no en té cap ni un. SiteOrigin en té 13 i Elementor 9.

Però realment la quantitat de ginys propis que s’incorporen no és un factor decisiu, ja que com hem dit se’n poden afegir també amb extensions de tercers. Que un giny no hi sigui tampoc vol dir que no es pugui incorporar la seva funcionalitat. Sempre es pot recórrer a alguna extensió específica per a una funcionalitat concreta que falti en un maquetador o recórrer a la versió de pagament. A més, cada u pot valorar també la utilitat d’un giny més que un altre per les seves necessitats.

Prestacions dels ginys en cada maquetador


Així que ara que hem vist quins ginys inclouen aquests maquetadors gratuïts, anem a veure un aspecte encara més interessant i important. Es tracta de comparar el que es pot fer amb ells en cada un d’aquests constructors.

Per poder-ho comparar ens centrarem en alguns dels punts que hem vist que tenen en comú els tres maquetadors. Es tracta de la funció per excel·lència d’un maquetador com és la creació de files o seccions i de columnes. Com que la majoria de ginys repeteixen les mateixes opcions de configuració i els paràmetres que es permeten definir, si bé no coincideixen en tots els casos, podrem tenir una idea clara de les possibilitats que tenim en un constructor o un altre.

Anem a veure-ho:

SECCIONS / FILES / COLUMNES

SO – SITEORIGIN

Com hem dit, el maquetador de SiteOrigin es pot gestionar tant des de l’editor d’entrades i pàgines (és l’únic dels tres que ho fa) com des del mateix frontal del web.

Quan accedeixes a l’editor visual tens la maqueta de l’estructura de la pàgina a la barra lateral esquerra. Si navegues per la pàgina la fila i el giny corresponent a la barra lateral es destaquen per indicar quin és l’element que s’ha d’editar per fer modificacions. Pots accedir a l’edició de cada giny clicant l’element de la pàgina o des de la barra lateral indistintament.

Per afegir una fila o secció nova s’ha de clicar la icona de la part superior de la barra lateral que indica Afegir Fila (Add Row). Llavors s’obre una finestra per definir les columnes que vols dins aquesta fila (amb un màxim de 8 columnes), i fins a 12 estructures diferents d’amplades diverses predeterminades de les columnes. Pots canviar l’orientació de dreta a esquerra o d’esquerra a dreta de l’estructura escollida o reiniciar-la a les amplades predeterminades. En tot cas també pots variar individualment l’amplada de cada columna clicant i arrossegant qualsevol d’elles. Cliques a insertar la fila i ja t’apareix en pantalla i a la maqueta de la barra lateral amb l’estructura de columnes escollida.

Des de la maqueta de la barra lateral pots moure la fila amunt i avall si cliques i arrossegues la icona de desplaçament. Amb la icona d’eina pots accedir a l’edició dels paràmetres de la fila, duplicar o esborrar una fila.

Aquests són els paràmetres disponibles d’edició d’una fila:

Des de la finestra d’edició de la fila t’apareixes tres pestanyes desplegables a la dreta amb les següents opcions:

1. Atributs:

Tens quatre camps d’edició avançada de CSS. L’identificador de CSS, la classe CSS de la fila, una classe per a totes les cel·les de la fila, i un camp pels estils CSS.

2. Plantilla:

En aquesta pestanya es defineixen els espaiats de la fila o secció. Tens els següents paràmetres per definir, sempre en 10 unitats diferents (px, %, in, cm, mm, em, ex, pt, pc, rem):

  • Marge extern inferior: Defineix l’espai de marge que queda per sota de la fila o secció. .
  • Espai entre columnes: També es pot definir en qualsevol de les unitats anteriors.
  • Espaiat intern: Defineix individualment els marges interns superior, inferior, dreta i esquerra de la fila o secció.
  • Espaiat intern per a mòbil: Els mateixos paràmetres anteriors però aplicables quan es mostri la fila a la pantalla d’un mòbil.
  • Plantilla de la Fila: Estàndard, amplada completa, o amplada completa estirada.
  • Ordre de columnes: Ordre en que es mostren les columnes en pantalles reduïdes (mòbils). Tens l’opció determinada per defecte, prioritzar l’esquerra a dalt o la dreta a dalt (inversió de l’ordre).
3. Disseny:

Les opcions de la pestanya de disseny són les següents:

  • Color de fons: Pots escollir un color pel fons de la fila/secció.
  • Imatge de fons: Imatge pel fons de la fila/secció.
  • Visualització de la imatge de fons: Forma en què es mostra la imatge de fons. Tens 5 opcions:
    • Mosaic: La imatge es repeteix fins a omplir la fila.
    • Cobertura: La imatge cobreix tot el fons de la fila.
    • Centrada, amb la mida original de la imatge
    • Fixa: la imatge queda fixa en la mateixa posició de fons encara que et desplacis amunt i avall.
    • Parallax
    • Parallax amb mida original.
  • Color de Vora: pots escollir el color de la vora de la fila.

BB- BEAVER BUILDER

Quan accedeixes a l’edició visual amb aquest constructor pots afegir files (seccions) arrossegant l’estructura corresponent a la pantalla. Pots escollir una de les següents estructures:

  • De 1 a 6 columnes
  • Barra lateral esquerra
  • Barra lateral dreta
  • Barres laterals a dreta i esquerra

Pots variar l’amplada de les columnes clicant i arrossegant qualsevol d’elles.

Quan ets damunt una fila apareix sempre la pestanya d’edició amb les opcions de desplaçament de la fila, configuració, duplicar o eliminar. Pots moure la fila amunt i avall si cliques damunt la icona de desplaçament i l’arrossegues a la posició desitjada. Si cliques la icona de configuració s’obre una nova finestra amb les següents pestanyes:

1. Estil:
Amplada: 

Amplada sencera o encaixada. Si tens amplada sencera també pots escollir si el contingut de la fila també aprofita tota l’amplària o el restringeixes a un bloc. No obstant, aquesta característica pot quedar limitada si el teu tema no permet aprofitar l’amplada completa de la pantalla.

Alçada: 

Pantalla sencera o alçada per defecte.

Alineació de contingut: 

Centrat o a dalt.

Colors:
 

Pots escollir el color de:

  • Text
  • Enllaç
  • Enllaç hover
  • Encapçalament
Fons:
  • Cap fons
  • Color: Tria el color i el nivell d’opacitat. Aquesta opció està igualment visible en cas que seleccionis una imatge o vídeo de fons.
  • Imatge: Posa una foto de fons. Llavors tens els següents paràmetres:
    • Repetició: Per escollir si no vols repetir la imatge, repetir-la fins a ocupar tota la secció, o repetir-la només verticalment o horitzontalment.
    • Posició: Tens 9 posicions predeterminades per centrar la imatge
    • Adjunt: Pots definir si la imatge es fixa (de manera que queda immòbil al fons quan et desplaces amunt i avall), o mòbil (scroll) de forma que la imatge es desplaci acompanyant la secció.
    • Escala: Tens les opcions per defecte, emplenar tota la secció amb la imatge o només el que cobreixi la imatge.
  • Superposició de Fons: Si tens un fons amb imatge, addicionalment tens l’opció de definir un color de superposició i el nivell d’opacitat o transparència del color.
  • Vídeo: Si vols un vídeo de fons per a la secció, pots definir els següents paràmetres:
    • Font: Tria si serà un vídeo de la teva mediateca, mitjançant una URL externa o específicament de Youtube o Vimeo.
    • En cas que seleccionis un vídeo de la mediateca, pots seleccionar un arxiu MP4 i WebM, i una imatge com a fons de reserva que apareixerà enlloc del vídeo si falla la càrrega.
    • Si selecciones l’opció d’una URL externa tindràs els mateixos camps per apuntar a l’URL d’un vídeo en MP4 i WebM i la imatge de fons de reserva.
    • Si selecciones l’opció de Youtube o Vimeo t’apareixerà un camp per introduir l’URL del vídeo de Youtube o Vimeo, i una segona opció que et permet tenir activat o desactivat el so del vídeo, a més de la imatge de fons de reserva.
Vores:

Tens cinc opcions per triar per a la fila/secció: Sense vores, sòlida, doble, de punts o de línies. Si tries qualsevol de les quatre opcions de vora pots escollir el color, l’opacitat i l’amplada de cada un dels quatre costats de la vora de la fila o secció de forma independent.

2. Avançat:
  • Disposes dels següents paràmetres:
    • Marge: controles individualment els quatre marges d’espai externs de la fila o secció, en píxels.
    • Espaiat: Igual que l’anterior, però per definir el marge d’espai intern de la fila o secció amb el seu contingut.
    • Plantilla responsiva: Controles si la fila es visualitza o no en diferents tamanys de pantalla. Tens fins a 6 opcions.
    • Visibilitat: Opció que et permet mostrar o ocultar la fila segons si el visitant té sessió iniciada amb el seu usuari o no.
    • Selectors CSS: Camps per incloure identificador i classes personalitzades d’estils CSS.

Les COLUMNES es poden gestionar amb Beaver Builder de forma semblant a les files o seccions. Pots moure de posició una columna clicant i arrossegant a la icona de desplaçament. També tens l’opció de reiniciar l’amplada de les columnes si l’has variat manualment. Quan cliques a la icona d’edició de les columnes tens les següents opcions:

1. Estil:
  • Defineixes l’amplada de columna en percentatge.
  • Iguala l’altura de les columnes. Si tries que siguin iguals pots definir que el contingut estigui alineat a dalt, el centre, o baix.
  • Text: Pots escollir el color i l’opde:
    • color de text
    • color d’enllaç
    • color d’enllaç hover
    • color d’encapçalament
  • Fons: Tipus de fons igual que a les files o seccions, amb els mateixos paràmetres de color i imatge. No es pot escollir un vídeo de fons per a una columna.
  • Vores: Exactament igual que per a les fies.
2. Avançat:
  • Disposes dels següents paràmetres:
    • Marge: controles individualment els quatre marges d’espai externs de la columna, en píxels.
    • Espaiat: Igual que l’anterior, però per definir el marge d’espai intern de la columna amb el seu contingut.
    • Plantilla responsiva: Controles si la columna es visualitza o no en diferents tamanys de pantalla. Tens fins a 6 opcions. També pots personalitzar en percentatge l’amplada de les columnes en tauletes o mòbils.
    • Visibilitat: Opció que et permet mostrar o ocultar la columna segons si el visitant té sessió iniciada amb el seu usuari o no.
    • Selectors CSS: Camps per incloure identificador i classes personalitzades d’estils CSS.

 

E- ELEMENTOR:

El que a SiteOrigin o Beaver Builder són files amb Elementor s’anomenen seccions. Pots afegir una secció nova clicant el botó que apareix en pantalla. Tot i que tens un giny de columnes a la barra lateral, quan afegeixes una nova secció t’apareixen directament diverses opcions d’estructura segons nombre i tamany de columnes. Pots variar l’amplada de les columnes només clicant i arrossegant qualsevol d’elles. També pots modificar el nombre de columnes duplicant o eliminant columnes. Pots tenir fins a 10 columnes en una fila o secció.

Quan cliques la pestanya de la secció que apareix quan passes amb el punter per damunt de la mateixa a la pantalla, t’apareixen les icones per duplicar la secció, desar-la com a plantilla o eliminar-la. També pots desplaçar una secció sencera si l’arrossegues amunt o avall. I tens les opcions de configuració de la secció a la barra lateral d’Elementor amb les tres pestanyes següents:

1. Plantilla:
  • Un selector per estirar la secció a l’amplada completa. Si el teu tema no té una opció que et permeti aprofitar l’amplada completa de la pantalla, amb aquest selector ho podràs fer.
  • Amplada del Contingut: Tens dues opcions. Tota l’amplària o encaixat dins un bloc central. L’opció de tota l’amplària combinada amb el selector anterior et permet aprofitar tota la pantalla. En el cas de tenir-ho encaixat tens una barra per escollir l’amplada exacta que vols utilitzar en aquesta secció.
  • Distància de columnes: Tot i que pots tractar cada columna individualment, des de la configuració de la secció tens diferents distàncies predeterminades entre totes les columnes. Tens les següents opcions:
    • Per defecte
    • Sense distància
    • Estret
    • Estès
    • Ampla
    • Més ampla
  • Alçada: Pots configurar l’alçada de la secció amb les següents opcions:
    • Per defecte
    • Ajusta a la pantalla
    • Mínima alçada
  • Posició del Contingut: El contingut de la secció es pot ubicar en les següents posicions predeterminades:
    • Per defecte
    • Dalt
    • Enmig
    • Baix
  • Estructura: T’indica el nombre de columnes amb que treballes a la secció i et permet reiniciar les columnes a la seva amplada per defecte quan l’has modificat, sense canviar el nombre de columnes.
  • s estructures: Et presenta diferents models predeterminats d’amplades diferents de columnes per al nombre de columnes que tens determinat, sense canviar el nombre de columnes.
2. Estil: 
Fons:

Pots escollir entre diferents tipus de fons per a la secció:

  • Sense Fons
  • Clàssic: En aquesta opció pots escollir un color de fons per a la secció i/o una imatge. Amb l’opció de color pots definir el color i el nivell d’opacitat. Si poses una imatge de fons t’apareixen els paràmetres següents per definir:
    • Posició: Tens 10 posicions predeterminades per centrar la imatge.
    • Adjunt: Pots posar la imatge per defecte, fixada (de manera que faci un efecte parallax de fons quan et desplaces amunt i avall), o mòbil (scroll) de forma que la imatge es desplaci acompanyant la secció.
    • Repetició: Pots triar la imatge per defecte, que no es repeteixi, que es repeteix horitzontalment i verticalment per omplir tota la secció, o que només ho faci verticalment o horitzontalment.
    • Mida: tens les opcions per defecte, automàtica, cobertura de tota la secció, o imatge continguda.
  • Degradat: Pots escollir dos colors de manera que crees un degradat, difuminat o transició entre un color i l’altre. A més dels dos colors, pots triar les següents opcions:
    • L’altura de cada color, per determinar quan comença la transició en cada color.
    • Tipus de degradat: Pots triar entre un degradat lineal o radial. Si tries lineal tens una barra per definir l’angle d’inclinació de la transició. I si tries radial pots escollir entre 9 posicions diferents per definir l’origen o centre de la transició radial.
  • Vídeo: Pots posar un vídeo com a fons de la secció des d’un enllaç extern (Youtube, Vimeo…) o d’un arxiu de la teva mediateca. També pots col·locar una imatge com a fons de reserva que apareixerà enlloc del vídeo en mòbils i tauletes.
Superposició de fons:

Aquesta opció només és útil si tens un tipus de fons triat. Si tens la secció sense fons aquest apartat directament no apareix. Pots triar entre un fons superposat clàssic o un degradat, amb les mateixes opcions que en l’apartat de fons però amb un paràmetre més en cada cas, l’opacitat. Així pots definir per exemple un color o un degradat amb una determinada transparència que es superposi a una imatge de fons, entre diferents possibilitats.

Vores:

Tens cinc tipus de vores per triar per a la secció: Sense vores, sòlida, doble, de punts o de línies. Si no tens vores seleccionades pots triar igualment el radi de la vora de la secció, per fer que els límits de la secció, si tens un color o una imatge de fons definit, siguin més rodons o més cantelluts. Pots definir aquests radis de forma conjunta o separada per a cada un dels quatre cantells de la secció, en píxels o en percentatge. També pots activar una ombra per a la secció, que et permet definir els següents paràmetres:

  • Color
  • Taca: per definir la intensitat de l’ombra.
  • Propagació: defineix l’abast de l’ombra.
  • Vertical: desplaça l’ombra verticalment.
  • Horitzontal: desplaça l’ombra horitzontalment.

En cas que tenguis un tipus de vora visible definit, també pots triar l’amplada de la vora i el color. Igual que en el radi, pots controlar l’amplada de la vora en conjunt o de forma individual per a cada costat de la secció.

Transicions:

Enlloc que un secció comenci o finalitzi en línia recta crea divisors de formes amb 19 tipus diferents (zigzag, núvols, muntanyes, triangles, asimetries…). Pots definir una transició tant a la part superior com a la part inferior de la secció. Cada tipus de transició pot tenir uns paràmetres concrets de personalització. En general, es pot definir:

  • Color de la transició.
  • Amplada
  • Altura
  • Girar
  • Invertir
  • Pujar al front: Per determinar si els efectes de la transició queden al fons de la secció (per defecte) o es superposen als ginys que hi hagi.
Tipografia:

Aquest apartat et permet definir característiques de tipografia per a tota la secció en conjunt, encara que pots definir-ho de forma més particular en cada columna o amb els ginys de capçaleres i de text que col·loquis dins aquesta secció. Pots triar els següents paràmetres:

  • Color de Capçalera
  • Color de Text
  • Color d’Enllaç
  • Color d’Enllaç Hover
  • Alineació de text: esquerra, centrat o dreta.
3. Avançat:
  • A la pestanya d’opcions generals avançades disposes dels següents paràmetres, que pots gestionar per a pantalles d’escriptori, tauleta o mòbil:
    • Marge: controles conjuntament o individual els marges d’espai externs de la secció, en píxels o percentatge de pantalla. Si tens definida la secció en ample complet, els paràmetres d’esquerra i dreta de la secció apareixeran definits en mode automàtic i lògicament no els podràs editar.
    • Espaiat: Igual que l’anterior, però per definir el marge d’espai intern de la secció amb el seu contingut. Pots definir l’espaiat en PX, EM o %.
    • Animació d’Entrada: Tens fins a 36 efectes d’animació per fer aparèixer la secció quan es carrega la pàgina.
    • CSS ID: Camp per incloure indentificadors personalitzats d’estils CSS.
    • CSS Classes: Camp per incloure classes personalitzades d’estils CSS.
  • Responsiu: Et permet gestionar els següents elements multidispositiu:
    • Invertir columnes: En dispositiu mòbil, l’última columna apareix a dalt.
    • Visibilitat: Mostrar o amagar la secció sencera en escriptori, tauleta o mòbil.

Pel que fa a les COLUMNES, des de la pestanya en pantalla pots duplicar una columna, afegir-ne o esborrar-les. També les pots desplaçar arrossegant-les. Les columnes no es poden desar com a plantilles. Les opcions de configuració de cada columna a la barra lateral són les següents:

1. Estil
  • Fons & Vores: Pots escollir sense fons, clàssic o degradat amb els mateixos paràmetres que a les seccions. No es pot escollir vídeo de fons per a les columnes. Per les vores també tens les mateixes opcions de tipus, radi i caixa d’ombra que a les seccions.
  • Plantilla: Pots determinar la posició del contingut amb les opcions per defecte, dalt, enmig o baix.
  • Tipografia: Amb les mateixes opcions de color i d’alineament de text que a les seccions.
2. Avançat
  • L’apartat d’avançat de les columnes té idèntiques opcions de configuració de marges externs i espaiats interns, animacions d’entrada i CSS que les seccions.
  • Responsiu: Pots establir l’amplada de la columna per a mòbil per defecte o personalitzada. En l’opció de personalitzada pots escollir fins a 19 percentatges diferents d’amplada respecte la pantalla del dispositiu.

Quadre resum de paràmetres de les files / seccions

SECCIONS / FILES SO BB E
Afegir Files / Seccions
Moure Files / Seccions
Editar Files / Seccions
Duplicar Files / Seccions
Eliminar Files / Seccions
Desar Files / Seccions Com A Plantilla
Id Css
Classe Css Fila
Classe Css Fila – Cel·les
Estils Css
Marge Extern Inferior
Marge Extern Superior
Marge Extern Dreta
Marge Extern Esquerra
Definició Conjunta 4 Marges
Marges Tauleta
Marges Mòbil
Espaiats Interns Separats
Espaiats Interns Conjunts
Espaiats Interns Tauleta
Espaiats Interns Mòbil
Nombre Unitats Mesura 10 1 3
Visibilitat Tamanys Pantalla
Visibilitat Login/Logout
Plantilla Secció / Fila
– Estàndard/Encaixada
– Selecció Mida Amplada
– Amplada Completa
– Amplada Completa Estirada *
– Alçada Pantalla Sencera
– Alçada Per Defecte
– Alçada Mínima
– Contingut Centrat
– Contingut A Dalt
– Contingut Baix
– Contingut Per Defecte
Color De Fons
– Opacitat Color De Fons
– Color De Text
– Color D’enllaç
– Color D’enllaç Hover
– Color Encapçalament
Imatge De Fons
– Mosaic / Repetició
– Repetició Vertical
– Repetició Horitzontal
– Cobertura
– Diverses Posicions Centrat 1 9 10
– Fixa
– Scroll
– Parallax
– Parallax Mida Original
– Tamany Per Defecte
– Tamany Automàtic
– Tamany Contingut
Degradat 2 Colors
– Altura Color 1
– Altura Color 2
– Degradat Lineal
– Degradat Radial
– Angle D’inclinació Lineal
– Posicions Origen Radial 9
Superposició De Fons
– Color
– Degradat
– Definició Opacitat
Aliniació De Text
Efectes Animació Entrada 36
Video De Fons
– Mediateca
– Url Extern
– Arxius Mp4 I Webm
– No Audio Youtube/Vimeo
– Imatge Fons Reserva
Vores
– Tipus De Vora 1 4 4
– Color De Vora
– Opacitat
– Gruixa Costats Conjunta
– Gruixa Costats Separat
– Control Radis De Vora Separat
– Control Radis De Vora Conjunt
– Unitats Mesura Radi 2
Ombres
– Color
– Taca
– Propagació
– Vertical
– Horitzontal
Transicions
– Superior
– Inferior
– Color De Transició
– Amplada
– Altura
– Girar
– Invertir
– Pujar Al Front

Quadre resum de paràmetres de columnes

COLUMNES SO BB E
– Nombre Màxim 8 6 10
– Duplicar Columnes
– Variació Amplada Predet.
– Variació Amplada Manual
– Reinici Amplada
– Igualació Altura Columnes
– Moure Columnes
– Espai Entre Columnes
– Inversió Columnes Mòbil
Fons
– Color
– Opacitat
– Imatge De Fons
– Degradat De Fons
Superposició De Fons
– Color
– Degradat
– Definició Opacitat
Imatge De Fons
– Mosaic / Repetició
– Repetició Vertical
– Repetició Horitzontal
– Cobertura
– Diverses Posicions Centrat 9 10
– Fixa
– Scroll
– Tamany Per Defecte
– Tamany Automàtic
– Tamany Contingut
Degradat 2 Colors
– Altura Color 1
– Altura Color 2
– Degradat Lineal
– Degradat Radial
– Angle D’inclinació Lineal
– Posicions Origen Radial 9
Vores
– Tipus De Vora 4 4
– Color De Vora
– Opacitat
– Gruixa Costats Conjunta
– Gruixa Costats Separat
– Control Radis De Vora Separat
– Control Radis De Vora Conjunt
– Unitats Mesura 2
Ombres
– Color
– Taca
– Propagació
– Vertical
– Horitzontal
Posició Contingut
– Contingut Centrat
– Contingut A Dalt
– Contingut Baix
– Contingut Per Defecte
Tipografia
– Color De Text
– Color D’enllaç
– Color D’enllaç Hover
– Color Encapçalament
– Aliniació De Text
Id Css
Classe Css Fila
Efectes Animació Entrada 36
Marge Extern Inferior
Marge Extern Superior
Marge Extern Dreta
Marge Extern Esquerra
Definició Conjunta Marges
Marges Tauleta
Marges Mòbil
Espaiats Interns Separats
Espaiats Interns Conjunts
Espaiats Interns Tauleta
Espaiats Interns Mòbil
Nombre Unitats Mesura 1 3
Amplades Predet. Mòbil 19
Amplada Multidispositiu

 Test de Velocitat


Per fer el test de velocitat amb Pingdom hem de tenir en compte una sèrie de circumstàncies. Primer de tot que el servidor que utilitzen en aquesta eina per fer el test es troba a Estocolm. I la distància des d’on es carrega el web amb l’allotjament on es troba és un dels factors que afecten la velocitat. Una altra qüestió a prendre en consideració és que en la pàgina feta amb Beaver Builder, a diferència dels altres dos maquetadors, no vaig utilitzar els ginys d’icones ni de botons. El motiu és que en la versió gratuïta no estan disponibles. En canvi perquè tingués els mateixos elements que amb SiteOrigin i Elementor vaig utilizar codi per generar tant les icones com el botó. Podeu veure com ho he fet a la unitat 6 del Curs de WordPress de Nivell Mitjà.

I finalment també s’ha de tenir present que no hi havia cap feina d’optimització d’imatges, ni cap extensió de caixé per millorar la velocitat de càrrega… Res de res. Tal com acabava la pàgina i acabada la classe, la convertia en pàgina d’inici del blog de pràctiques i feia el test.

Per poder fer la comparació en igualtat de condicions les pàgines eren totes amb el mateix tema, el GeneratePress.

Els resultats del test han estat els següents:

Quadre resum test de velocitat de càrrega

FACTOR SO BB E
Temps De Càrrega 1.20 1.20 1.21
Puntuació A 91 A 94 A 93
Més Ràpid Que 86% 86% 85%
Mida 1,1MB 1,1MB 1,1MB
Peticions 48 38 47

Per una banda s’observa com tant amb SiteOrigin com amb el Beaver Builder he obtingut el mateix resultat de càrrega en 1,20 segons, mentre que amb Elementor el web ha necessitat només 0,01 segon més per carregar-se. Tenint en compte que amb la marmota no havia pogut utilitzar dos ginys que havia emprat en els altres, la quantitat d’opcions que té Elementor, la distància amb Estocolm i la inexistència de cap feina d’optimització prèvia de la pàgina, o que segons quan fas el test els resultats poden variar una mica, jo diria que en aquest aspecte hi ha un empat tècnic en els tres maquetadors. Tots tres són prou ràpids.

Conclusions


Amb aquesta revisió general dels tres maquetadors que estan en el podi ara mateix d’usuaris de WordPress, em queden clares algunes coses que ja sospitava.

El meu favorit ara mateix és…

L’Elementor és una passada. Diria que ha recollit les prestacions de SiteOrigin, de Beaver Builder i d’altres maquetadors, les ha incrementades i millorades, i estan disponibles en una mateixa eina. I en la versió gratis. És sense cap dubte el primer maquetador en nombre de ginys, cosa que ja avançava que no és el més important. Però és que és el primer a molta distància amb les prestacions i opcions de configuració de cada un d’ells. El control que amb aquest constructor tens de cada element de la pàgina no té comparació amb el que pots fer amb els altres.

I tot això sense que la velocitat de càrrega es vegi afectada. Almenys amb el test de Pingdom amb una pàgina senzilla feta només amb imatges, textos, 3 icones i un botó. Hauria de fer més proves i veure com respon amb altres ginys, amb pàgines més elaborades. I també amb altres llocs a part de Pingdom.

El millor de tot és que no és gens difícil d’emprar. Una volta veus el funcionament general i l’utilitzes una mica li agafes el truc ràpidament. És cert que amb Elementor guanyes molt de temps a l’hora de crear una pàgina. Com tot té els seus secrets i les seves limitacions que vaig descobrint a poc a poc. Però la veritat és que ja l’he fet servir en un parell de projectes i en vindran més. Fins i tot m’agafen ganes de tornar a passar el meu propi lloc de Divi a GeneratePress (que també he comprovat que ha fet millores molt útils) i utilitzar-lo en combinació amb Elementor.

No m’estanya que estigui pujant en usuaris tan ràpidament. Si l’equip d’Elementor segueix fent la bona feina que han fet fins ara, segurament superaran a Beaver Builder en usuaris a mig termini. El lloc de l’Elementor Page Builder està en disputar-se la primera posició amb el SiteOrigin, que porta més temps de rodatge.

Un gegant molt ben aconseguit

Jo que no som cap expert en codi ni llenguatge de programació, m’ha impressionat SiteOrigin especialment per una cosa. I és que una volta tens la pàgina feta i desactives l’extensió, és el maquetador que més conserva la feina feta. En les proves que feia en la classe sobre maquetadors, una volta acabada la pàgina comprovava com quedava si desactives l’extensió. La bona configuració de SiteOrigin et permet copiar o traslladar les files i columnes amb el seu contingut a l’editor per defecte del WordPress. Sí que van desaparèixer les icones o el botó que vaig col·locar amb els ginys, però l’estructura més fonamental es manté. En els altres dos es mantenien textos i imatges, però no l’estructura de columnes.

Per tant si el que vols és una pàgina senzilla amb poques complicacions ni floritures, i si saps llenguatges de programació o pots aprofitar una mica de codi, segurament aquest constructor seria la teva elecció. Pots maquetar la pàgina, crear el contingut i després fins i tot permetre’t el luxe de treure el SiteOrigin. Si alguna cosa no es manté la pots recuperar amb una mica de codi, o fer-ho directament així. Et quedaràs amb una pàgina molt ben feta i lleugera.

Per algun motiu SiteOrigin té més d’un milió d’instal·lacions actives. Si la seva versió gratis és una joia amb la versió premium de SiteOrigin Page Builder tens l’èxit assegurat. Sens dubte és i serà el primer dels constructors de pàgines per a WordPress en usuaris encara per bastant de temps.

La Marmota, millor si la compres

El Beaver Builder (Constructor de la Marmota) és un altre monstre. Dels tres maquetadors és el que menys a fons he pogut conèixer per la limitació que té la seva versió gratuïta pel que fa a ginys, però m’ha quedat clar que té molt bones prestacions. Algunes superen clarament el SiteOrigin, com es pot veure en les taules. Si estaves pensant en adquirir-lo, segur que la versió premium del BeaverBuilder és una molt bona elecció per fer pàgines amb el WordPress.

Comenta’m la teva opinió

I a tu que et sembla? Tens alguna preferència sobre maquetadors? T’ha servit d’alguna cosa aquest article? Al final m’ha sortit una entrada de gairebé 6000 paraules i una classe de la formació online de WordPress amb tres videotutorials perquè tenia ganes de comprovar per mi mateix com funcionaven aquestes eines i de compartir-ho amb qui pugui estar interessat. A mi sí que s’ha servit.

Amb aquest article i amb la classe sobre el mateix tema n’he après una mica més del que sabia sobre WordPress i sobre els maquetadors. Tots n’aprenem, i ja sabeu com m’agrada a mi aprendre coses noves. Si m’acab decidint a comprar la versió premium de l’Elementor m’agradarà fer-ne una comparació amb els maquetadors que només tenen versió de pagament.

Altres articles que et poden interessar

2 comentaris a “Els millors maquetadors gratis de WordPress

  1. Hola,

    Jo utilitzo Cornerstone. I bé, és cert que no entraria dins d’aquest article perquè no té versió gratuïta. De fet, és de pagament, però també s’inclou en el paquet de The X Theme i segurament és l’avantatge més destacable d’aquesta plantilla.

    En qualsevol cas com a maquetador trobo que té moltes prestacions. Parteix d’un editor visual molt potent que et permet estructurar molt bé les pàgines, afegir ginys de tot tipus a cada pàgina (es complementa amb altres plugins com Contact Form 7 o Layer Slider) o incloure modificacions CSS en cada element.

    N’estic molt satisfet, tot i que també he de dir que n’hauria de provar d’altres per poder comparar.

    Gràcies pel post. Me’l guardo: és molt ampli i molt útil.

    Respon
    • Gràcies a tu Jordi pel teu comentari!

      No coneixia Cornerstone, merci per l’aportació. El ventall d’opcions amb WordPress és tan gran que arriba a ser impossible conèixer tot el que tenim disponible. Si n’estàs satisfet segur que és una bona eina!

      Salutacions.

      Respon

No marxis sense dir res!

Informació sobre Protecció de Dades Personals - JoanLlompart.com t’informa que les dades de caràcter personal que proporciones emplenant aquest formulari seran tractades per Joan Llompart Muñoz com a responsable d’aquest lloc web; Finalitat: gestionar els comentaris en aquest blog; Legitimació: Consentiment de l’interessat; Destinataris: les teves dades es desen als servidors de Webempresa (UE) – Veure política de privacitat de Webempresa; Drets: pots accedir, rectificar, limitar o suprimir totes les teves dades a info@joanllompart.com; Per a més informació consulti la informació legal en aquest lloc web.