En aquest post explicarem quins són els màxims beneficis que et pot aportar l’ús d’un sistema d’editor visual per a la teva web, i valorar si cal que tinguem un instal·lat.

A més analitzarem el nou sistema gutenberg de wordpress, el “visual composer” que ve de sèrie en wordpress 5 per a gestionar el nostre contingut a partir d’ara.

Editors visuals, què són i per a què serveixen?

Un editor visual, tal com el seu nom indica, és un editor que ens permet modificar el contingut html de les nostres pàgines o entrades, visualment. Normalment amb elements drag & drop per fer encara més visuals els nostres canvis i noves seccions.

És ideal per a aquella gent que no tenen res de coneixement d’html, sempre que sigui necessari crear en el nostre contingut diferents estructures d’elements.

Són molts els editors visuals disponibles per al nostre wordpress, visual composer, Elementor, wp bakery, … també moltes plantilles, porten per defecte el seu propi sistema d’edició visual.

Com funcionen els editors visuals tècnicament?

No hem d’oblidar que un web és un document pla escrit amb un seguit de caràcters HTML, que els navegadors interpreten i apliquen els estils definits en un full d’estils (css), llavors com funcionen realment els composer?

Tenint en compte l’anterior, quan instal·lem un composer al nostre web, estem aplicant una capa per sobre, on inserir els estils i comportaments definits pel nostre connector d’editor visual.

És a dir, a l’editar el nostre contingut amb un d’aquests editors, posem tota una capa d’elements html i estils externs a wordpress, que vénen definits dins del nostre plugin.

Si disposeu d’un d’aquests Composers en el vostre wordpress, podeu fer l’exercici de passar el contingut d’alguna de les vostres pàgines a editor de codi per poder comprovar realment tot el codi que l’editor està introduint en el nostre contingut sense nosaltres saber-ho.

Em cal un editor visual per la meva web?

No és obligatori que tinguem un editor visual al nostre web, siguem conscients que un d’això editors no deixa de ser sobrecàrrega d’informació al nostre projecte, carregant un munt d’arxius css i php, que acaben afectant el rendiment de la nostra web, amb la qual que si no volem fer una gestió molt específica nostre contingut, no cal que instal·lem cap d’aquests editors.

D’altra banda, si volem muntar cada pàgina del nostre web amb un estil d’estructura molt diferenciat, i no disposem de coneixements html i css, és una bona eina per poder treballar visualment, el contingut de la nostra web.

Però el nou Gutenberg ja és un composer no?

Amb wordpress 5, tenim l’opció de poder treballar amb Gutenberg, un editor visual que vénen incorporat al nostre wordpress.

L’editor Gutenberg, és una gran millora per als usuaris de wordpress, ja que els que no treballessin amb un editor visual, han notat una gran millora per poder editar el contingut de les seves pàgines d’una manera més clara.

Però per a aquells usuaris que treballin amb un composer, veuran que se’ls queda una mica curt .. ja que les opcions que té, no són tantes com les que solen incloure els editors visuals.

A grans trets, el gran avantatge que es a guanyat amb Gutenberg, és que es poden editar els continguts per blocs i poder afegir columnes als blocs. Amb el que a nivell de layout, podem treballar molt més còmodament. Però a nivell de components, no comptem amb massa opcions, text, títol, element multimèdia, …

És molt recomanable l’ús de gutenberg amb bootstrap, ja que si comptem amb un tema que funcioni amb bootstrap, podem aplicar tot el joc de classes de bootstrap als nostres continguts introduïts amb Gutenberg.

Llavors .. amb Gutenberg ja en tinc prou?

Tal com hem comentat, depenent del tipus de gestió que facis del teu contingut, amb el nou sistema gutenberg pot ser que tinguis més que suficient, ja que permet declarar seccions, assignar classes i crear columnes dins de les seccions.

Però si necessitem de molts components o declarar pàgines amb estructures o comportaments molt diferents, si que és recomanable fer servir algun tipus d’editor visual.

Pros i contras de cada opció

Gutenberg

Pros

• Ve inclòs amb el nostre wordpress, això assegura que se li donarà una continuïtat.
• És gratis
• No és un codi “intrusiu” dins de la nostra plataforma.
• Molt senzill d’utilitzar.
• No posa massa capes de codi, és bastant net.

Contras

• A nivell de components es queda curt.
• No permet controlar el comportament dels elements responsive.

Editors visuals

Pros

• Donen molta agilitat de gestió i permeten tenir una idea visual del resultat.
• Permeten resultats força correctes i funcionals a nivell visual.
• Dóna moltes opcions a usuaris experimentats

Contras

• Uso complicado para usuarios no experimentados.
• Es un sistema intrusivo, impone muchas clases y comportamientos que ralentizan nuestro rendimiento.
• La seva desinstalació i compatibilitat entre pluguins és complicada.
• Massa opcions per a usuaris no experimentats

Conclusions

En definitiva, el tipus d’ús que en feu contingut de la teva web, serà el que t’indicarà si necessites o no d’un editor visual.

Si vas a fer un contingut bastant pla, sense massa estructura diferent, amb el nou Gutenberg tindràs més que suficient, però si d’altra banda, necessites definir una estructura molt diferenciada, si que et vindrà bé l’ús d’un d’aquests editors.

Per usar un d’aquests editors visuals és recomanable tenir una mica de coneixement de wordpress o html, ja que si no són molts conceptes que no entendrem, un composer en mans d’un usuari poc experimentat, és com donar dues pistoles a un mico, pot funcionar i ser divertit … però normalment sol acabar malament …

Ara que tenim l’opció de poder treballar de sèrie amb gutenberg, és recomanable començar amb aquesta eina, i si veiem que se’ns queda curta, podem tirar d’algun editor visual, sempre que ens sigui necessari.