{"id":10125,"date":"2026-04-06T11:16:20","date_gmt":"2026-04-06T10:16:20","guid":{"rendered":"https:\/\/josepgonzalez.com\/?p=10125"},"modified":"2026-10-06T16:43:09","modified_gmt":"2026-10-06T15:43:09","slug":"que-es-un-maquetador-visual","status":"publish","type":"post","link":"https:\/\/josepgonzalez.com\/ca\/que-es-un-maquetador-visual\/","title":{"rendered":"Qu\u00e8 \u00e9s un maquetador visual i quins s\u00f3n els millors?"},"content":{"rendered":"<p>Ja us vaig avisar i, com sabeu, qui avisa no \u00e9s tra\u00efdor: tenia pendent parlar-vos dels <strong>maquetadors visuals o Page Builders<\/strong>. I com que \u00e9s un dels temes que m\u00e9s em pregunteu, he actualitzat aquest article per explicar-vos <strong>qu\u00e8 \u00e9s un maquetador visual a WordPress<\/strong>, com ha canviat el panorama des que el vaig escriure i quins s\u00f3n els millors segons cada tipus d&#8217;usuari. Si veniu de <a href=\"https:\/\/josepgonzalez.com\/ca\/afegir-instagram-wordpress\/\">com afegir Instagram a WordPress<\/a>, aquest \u00e9s el seg\u00fcent pas l\u00f2gic per dissenyar el vostre web.<\/p>\n<h2>Qu\u00e8 \u00e9s un maquetador visual o Page Builder?<\/h2>\n<p>All\u00f2 que en angl\u00e8s es coneix com a Page Builder, en catal\u00e0 ho anomenem maquetador visual: una eina que ens permet dissenyar les p\u00e0gines de WordPress de manera visual, arrossegant i deixant anar elements (textos, imatges, botons, columnes, v\u00eddeos\u2026) en lloc de programar o dependre del que ens permet la plantilla.<\/p>\n<p>Com ja sabeu i he comentat en diverses ocasions, <a href=\"https:\/\/josepgonzalez.com\/ca\/que-es-wordpress-claus-exit-cms\/\">WordPress \u00e9s un dels CMS m\u00e9s utilitzats<\/a>, si no el que m\u00e9s. L&#8217;usen des de bloguers fins a grans empreses, i per aix\u00f2 tamb\u00e9 el toquen perfils de tota mena, des d&#8217;experts a usuaris sense coneixements t\u00e8cnics. I han estat aquests \u00faltims els qui van impulsar l&#8217;aparici\u00f3 dels maquetadors visuals.<\/p>\n<p>He de ser dissenyador web per tenir una p\u00e0gina diferent? No. Els maquetadors ens permeten anar molt m\u00e9s enll\u00e0 del que ofereix el theme instal\u00b7lat. Aix\u00ed i tot, si volem fer-ho b\u00e9, necessitarem l&#8217;ajuda de dissenyadors i programadors perqu\u00e8 el web funcioni a tots els nivells: disseny, velocitat, SEO i accessibilitat.<\/p>\n<h2>Per qu\u00e8 utilitzar un maquetador visual?<\/h2>\n<p>Durant anys, l&#8217;editor de WordPress es va quedar curt per dissenyar amb llibertat. Aix\u00f2 ha canviat bastant: l&#8217;editor de blocs (Gutenberg) i l&#8217;Editor de llocs (Full Site Editing) han avan\u00e7at molt i avui permeten crear p\u00e0gines, plantilles, cap\u00e7aleres i peus de p\u00e0gina sense plugins. Per\u00f2 per a dissenys complexos, animacions, finestres emergents o plantilles din\u00e0miques, els maquetadors continuen anant un pas per davant.<\/p>\n<p>Els avantatges principals:<\/p>\n<ul>\n<li><strong>Edici\u00f3 en directe:<\/strong> veus el resultat mentre treballes.<\/li>\n<li><strong>Sense codi:<\/strong> columnes, seccions de color, icones, animacions o combinacions de text, imatge i v\u00eddeo amb uns quants clics.<\/li>\n<li><strong>Plantilles completes:<\/strong> pots dissenyar la cap\u00e7alera, el peu, les entrades del blog o les p\u00e0gines de producte, no nom\u00e9s p\u00e0gines soltes.<\/li>\n<li><strong>Disseny responsive:<\/strong> controles com es veu el web en m\u00f2bil, tauleta i ordinador.<\/li>\n<\/ul>\n<p>I els inconvenients, que cal con\u00e8ixer:<\/p>\n<ul>\n<li><strong>Depend\u00e8ncia:<\/strong> si un dia desactives el maquetador, part del disseny pot trencar-se.<\/li>\n<li><strong>Pes i velocitat:<\/strong> mal utilitzats, afegeixen codi innecessari. Amb bona configuraci\u00f3 i un bon hosting i mem\u00f2ria cau l&#8217;impacte es pot controlar.<\/li>\n<li><strong>Corba d&#8217;aprenentatge:<\/strong> l&#8217;\u00fas pot semblar complicat a primera vista.<\/li>\n<\/ul>\n<h2>Els millors maquetadors visuals per a WordPress<\/h2>\n<p>Aquesta \u00e9s la meva selecci\u00f3 actual, segons la meva opini\u00f3 i experi\u00e8ncia. Recordeu que \u00abel millor\u00bb dep\u00e8n de qu\u00e8 necessiteu, aix\u00ed que al final us deixo una guia per triar.<\/p>\n<h3><a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Elementor<\/a><\/h3>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-large wp-image-6710\" src=\"https:\/\/josepgonzalez.com\/wp-content\/uploads\/2020\/04\/Elementor-pro-page-builder-1024x535-1.jpg\" alt=\"Elementor, maquetador visual per a WordPress\" width=\"1024\" height=\"535\" \/><\/p>\n<p>Avui dia \u00e9s un dels maquetadors m\u00e9s estesos, i el que faig servir en aquest mateix web. T\u00e9 versi\u00f3 gratu\u00efta i versi\u00f3 Pro. La gratu\u00efta serveix per comen\u00e7ar, per\u00f2 per treure-li partit de deb\u00f2 (constructor de plantilles, formularis, finestres emergents, camps din\u00e0mics) conv\u00e9 passar a Pro.<\/p>\n<p>Qu\u00e8 m&#8217;agrada:<\/p>\n<ul>\n<li>Edici\u00f3 en directe molt intu\u00eftiva i f\u00e0cil d&#8217;aprendre.<\/li>\n<li>Disseny amb contenidors flexibles (Flexbox i Grid), molt m\u00e9s lleuger i modern que les antigues seccions i columnes.<\/li>\n<li>Constructor de temes: cap\u00e7alera, peu, blog, arxius i plantilles d&#8217;entrades.<\/li>\n<li>Enorme ecosistema de complements i alta compatibilitat amb plantilles, amb actualitzacions regulars.<\/li>\n<\/ul>\n<h3><a href=\"https:\/\/www.elegantthemes.com\/gallery\/divi\/\" target=\"_blank\" rel=\"noopener noreferrer\">Divi<\/a><\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-large wp-image-6704\" src=\"https:\/\/josepgonzalez.com\/wp-content\/uploads\/2020\/04\/Divi-builder-1024x502-1.jpg\" alt=\"Divi Builder, maquetador visual d'Elegant Themes\" width=\"1024\" height=\"502\" \/><\/p>\n<p>No l&#8217;he fet servir tant, per\u00f2 molta gent en parla molt b\u00e9. S&#8217;obt\u00e9 amb una subscripci\u00f3 a Elegant Themes, que inclou el tema i el maquetador. El m\u00e9s positiu, sobretot per als <a href=\"https:\/\/josepgonzalez.com\/ca\/dissenyador-web-wordpress\/\">dissenyadors i desenvolupadors web<\/a>, \u00e9s que la seva llic\u00e8ncia permet usar-lo a tots els webs que gestioneu, i que es pot copiar un disseny d&#8217;una p\u00e0gina a una altra sense problemes. Ha evolucionat amb una nova generaci\u00f3 (Divi 5), aix\u00ed que si us interessa, comproveu al seu web com est\u00e0 el panorama de versions i migraci\u00f3.<\/p>\n<h3>Bricks Builder i Breakdance<\/h3>\n<p>Dos maquetadors m\u00e9s recents que han agafat molta for\u00e7a entre dissenyadors i ag\u00e8ncies. Es caracteritzen per generar un codi m\u00e9s net i lleuger, i per donar m\u00e9s control a qui sap de CSS. S\u00f3n una bona opci\u00f3 si la velocitat de c\u00e0rrega \u00e9s la vostra prioritat i no us espanta una corba d&#8217;aprenentatge una mica m\u00e9s gran.<\/p>\n<h3>Gutenberg i l&#8217;Editor de llocs de WordPress<\/h3>\n<p>Ja no es pot parlar de maquetadors sense esmentar l&#8217;editor natiu. Per a webs senzills, blogs o webs corporatius amb disseny contingut, \u00e9s una opci\u00f3 excel\u00b7lent: sense plugins addicionals, molt lleugera i totalment integrada a WordPress. Es pot ampliar amb col\u00b7leccions de blocs com Kadence Blocks o Spectra, i \u00e9s l&#8217;aposta m\u00e9s \u00aba prova de futur\u00bb.<\/p>\n<h3>WPBakery Page Builder (abans Visual Composer)<\/h3>\n<p>Va ser un dels pioners i en el seu dia era el que m\u00e9s feia servir. Continua present en moltes plantilles de ThemeForest, i si hereteu un web que l&#8217;usa, funcionar\u00e0. Per\u00f2 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\u00e9s costa temps i diners.<\/p>\n<h3>SiteOrigin Page Builder<\/h3>\n<p>Els creadors de SiteOrigin van ser dels primers a popularitzar el terme \u00abPage Builder\u00bb. Continua sent una opci\u00f3 gratu\u00efta i funcional per a qui vulgui alguna cosa senzilla, tot i que ha perdut protagonisme davant les alternatives anteriors.<\/p>\n<h2>Quin triar? La meva guia r\u00e0pida<\/h2>\n<ul>\n<li><strong>Vols un web professional amb llibertat de disseny i plantilles:<\/strong> Elementor Pro.<\/li>\n<li><strong>Gestiones molts webs i vols una sola llic\u00e8ncia:<\/strong> Divi.<\/li>\n<li><strong>Prioritzes la velocitat i saps una mica de CSS:<\/strong> Bricks o Breakdance.<\/li>\n<li><strong>Web senzill, blog o pressupost m\u00ednim:<\/strong> Gutenberg i l&#8217;Editor de llocs.<\/li>\n<li><strong>Hereteu un web antic:<\/strong> mant\u00e9n el que t\u00e9 i planifica la migraci\u00f3 a mitj\u00e0 termini.<\/li>\n<\/ul>\n<h2>Preguntes freq\u00fcents<\/h2>\n<h3>Un maquetador visual alenteix el meu web?<\/h3>\n<p>Pot fer-ho si s&#8217;usa malament, per\u00f2 no t\u00e9 per qu\u00e8. Un bon hosting, mem\u00f2ria cau, imatges optimitzades i no abusar de widgets i animacions marquen la difer\u00e8ncia. Podeu consultar la meva guia sobre <a href=\"https:\/\/josepgonzalez.com\/ca\/mesurar-velocitat-carrega-web\/\">com mesurar la velocitat de c\u00e0rrega d&#8217;un web<\/a>.<\/p>\n<h3>Un maquetador visual \u00e9s bo per al SEO?<\/h3>\n<p>El maquetador en si no posiciona, per\u00f2 influeix en factors que s\u00ed compten: velocitat, estructura d&#8217;encap\u00e7alaments, disseny m\u00f2bil i experi\u00e8ncia d&#8217;usuari. Amb una bona configuraci\u00f3, no suposa cap problema.<\/p>\n<h3>Puc canviar de maquetador m\u00e9s endavant?<\/h3>\n<p>\u00c9s possible, per\u00f2 normalment implica refer el disseny de les p\u00e0gines. Per aix\u00f2 conv\u00e9 triar b\u00e9 des del principi.<\/p>\n<h3>Necessito saber programar?<\/h3>\n<p>No per a lo b\u00e0sic. Per a dissenys molt personalitzats o per optimitzar el rendiment, una mica de CSS ajuda molt, o comptar amb un professional.<\/p>\n<h2>Conclusi\u00f3<\/h2>\n<p>Els maquetadors visuals han madurat, i ara conviuen amb un editor natiu de WordPress molt m\u00e9s capa\u00e7. El meu consell \u00e9s no obsessionar-se amb \u00abel millor\u00bb, sin\u00f3 triar el que encaixi amb el vostre projecte, el vostre pressupost i el vostre nivell, i aprendre a usar-lo b\u00e9. Si utilitzem b\u00e9 un Page Builder, millorem l&#8217;experi\u00e8ncia d&#8217;usuari, augmentem el temps de perman\u00e8ncia, la interacci\u00f3 amb el contingut i redu\u00efm el percentatge de rebot.<\/p>\n<p>Podria parlar d&#8217;altres com Thrive Architect o Beaver Builder i de molts m\u00e9s 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!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ja us vaig avisar i, com sabeu, qui avisa no \u00e9s tra\u00efdor: tenia pendent parlar-vos dels maquetadors visuals o Page Builders. I com que \u00e9s un dels temes que m\u00e9s em pregunteu, he actualitzat aquest article per explicar-vos qu\u00e8 \u00e9s un maquetador visual a WordPress, com ha canviat el panorama des que el vaig escriure [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10145,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-10125","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-ca"],"_links":{"self":[{"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/posts\/10125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/comments?post=10125"}],"version-history":[{"count":3,"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/posts\/10125\/revisions"}],"predecessor-version":[{"id":10270,"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/posts\/10125\/revisions\/10270"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/media\/10145"}],"wp:attachment":[{"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/media?parent=10125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/categories?post=10125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/tags?post=10125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}