Canviar de Divi a GeneratePress i Elementor

Una guia pràctica amb totes les passes necessàries per canviar de Divi a GeneratePress amb Elementor i no deixar-te res pel camí.


En el moment de llegir aquest article te n’adonaràs que el format del blog és diferent de com te l’havies trobat fins ara. I és que finalment m’he decidit a fer-ho. He canviat el tema del meu WordPress.

He deixat enrere el tema Divi d’Elegant Themes i m’he passat definitivament a GeneratePress.

Ja ho vaig indicar a l’article Les meves dues nòvies: Divi i GeneratePress. En aquella entrada explicava com vaig començar amb aquests dos temes. I de fet, que el primer tema amb què vaig començar aquest projecte va ser GeneratePress. Encara que al final vaig acabar publicant el web amb Divi, no descartava fer de nou el canvi.

I també quan vam parlar sobre Els millors maquetadors gratis de WordPress. Allà ja esmentava la bona combinació que fan GeneratePress i el maquetador Elementor. I també que amb la facilitat i possibilitats que oferia aquest tàndem m’agafaven ganes de passar-m’hi.

I ja està fet.

Així que en aquest article podràs trobar:

  • Els motius que m’han empès a fer aquest canvi.
  • Un repàs de les modificacions més destacables que he fet.
  • Una guia amb el procediment detallat perquè tu també puguis fer la transició. Et podrà servir si vols passar de Divi a GeneratePress amb Elementor. Però també si vols passar a GP+Elementor des de qualsevol tema.

Els motius d’un canvi anunciat


Llicència:

La llicència de la versió prèmium completa de GeneratePress per tants webs com vulgui és de només 39,95$. Actualment inclou actualitzacions per un any, però en el meu cas la vaig adquirir ara fa ja dos anys i si no hi ha cap sorpresa, la tenc de per vida.

En canvi a Elegant Themes la llicència per tenir actualitzacions per un any és de 89$ o de 249$ si la vull de per vida. És clar que la llicència d’Elegant Themes t’inclou tots els seus temes i extensions, però en el meu cas no els necessit ni en trauria prou el profit.

Optimització:

GeneratePress és molt més lleuger que Divi. La carpeta d’arxius de Divi em suposa 26,5 Mb d’espai, mentre que el directori de GeneratePress només m’ocupa 2 Mb.

La comparativa en aquests estrictes termes no seria prou certa si a més no tingués en compte l’extensió de GP-Premium i el constructor Elementor. Però és que d’aquesta manera la suma de tot el paquet és de 11,8 Mb. Menys de la meitat del que m’ocupava Divi!

Millores:

GeneratePress ha introduït diferents canvis des de que vaig comprar l’extensió premium. I entre aquestes novetats, alguna modificació d’estil personalitzat i l’afegit del maquetador Elementor, el canvi no només no em suposa cap perjudici, sinó que en alguns casos el resultat fins i tot m’agrada més.

Res a veure a dia d’avui amb les limitacions pràctiques que trobava en GeneratePress fa només un any enrere i per les que em vaig decantar finalment per Divi pel meu web.

Idioma:

GeneratePress, a diferència de Divi, incorpora traducció de sèrie a la llengua catalana.

Especialització:

Com a conseqüència de tot l’anterior, tots els projectes els estic fent amb GeneratePress. I els que no ho eren els estic passant també a GeneratePress.

Per tant es pot dir que de forma natural m’estic especialitzant en aquest tema. I per coherència el meu propi lloc també l’havia d’acabar retornant de nou al tema amb el que el vaig iniciar. Com ja sabeu, es tracta d’un tema idoni tant per a principiants com per a desenvolupadors, pel que el seu potencial és immens.

Més que un canvi de tema


Canviar de tema ha estat també l’oportunitat perfecta per fer alguns canvis. Segurament hauria pogut passar de Divi a GeneratePress i deixar el web pràcticament calcat. Però feia temps que tenia ganes de fer algunes modificacions i millores necessàries. I com deia abans, amb uns retocs l’aspecte final em convenç molt més.

Entre els canvis que he introduït trobareu:

Encapçalaments:

GeneratePress permet a dia d’avui una gestió molt bona de diferents encapçalaments. Pots editar de forma diferenciada l’encapçalament del lloc, de les pàgines, dels arxius de cada tipus d’entrada o de cada entrada individualitzada. De fet, pots crear tants encapçalaments globals o singulars com vulguis. Aquesta és precisament una de les novetats introduïdes recentment en aquest tema.

Fixa’t com en el meu cas he tractat l’encapçalament dels articles del blog, dels tutorials i dels projectes:

  • Articles: en aquest mateix article pots comprovar que la imatge destacada és a pàgina sencera amb el títol i la categoria integrats.
  • Tutorials: En les entrades que formen part dels meus cursos, tens un encapçalament que t’indica que ets a “Els Tutorials de JoanLlompart.com”. Si tens la sessió iniciada et surt una salutació i les notificacions de missatges interns. I si no tens la sessió iniciada una invitació a registrar-te. Es mostra directament el títol del tutorial i sense cap imatge.
  • Projectes: En el cas dels webs en WordPress que tenc publicats a la secció de projectes, apareix en primer lloc una imatge representativa del lloc i a continuació el títol del projecte.

Així també es diferencia i es dóna més personalitat a cada un dels tres tipus d’entrades. Abans tenia el mateix encapçalament en els tres casos, amb una imatge de presentació i el títol. L’única diferència era que en els tutorials no hi posava imatge destacada, però l’estructura era la mateixa en tots els casos.

En canvi els encapçalaments de les pàgines abans no tenien gaire coherència interna. No n’hi havia a la pàgina de Contacte ni a la de Qui Som. I l’encapçalament de la pàgina del Blog era diferent de la pàgina de Cursos o de la pàgina d’Allotjaments WordPress recomanats. Ara sí que tenen tots un mateix estil, amb una franja a amplada completa, imatge i/o color de fons, i text de presentació o títol.

Eliminació de la barra lateral:

Aquest era un altre dels canvis que tenia en ment. Les barres laterals estan de cada vegada més superades. Qui se les mira? En fa gaire cas ningú?

Com ja sabem, la majoria de visites arriben a dia d’avui per dispositius mòbils. Llavors, per aquests lectors els continguts dels ginys de la “barra lateral” queden de totes maneres al final de l’entrada. I només els veuen si arriben al final de l’article i segueixen baixant fins al final de la pàgina.

Fins i tot en el cas que ho vegin de passada, o que estiguis llegint amb un ordinador d’escriptori o portàtil, la interacció que generen és mínima.

Per tant, fora la barra lateral!

Cada un dels ginys que hi havia pot ser reubicat en pàgines específiques, com els formularis de contacte o de subscripció. O es pot incloure dins un article sobre el tema, en el punt més adequat. Si hi havia un anunci, ara també és una oportunitat per crear un contingut sencer sobre el mateix. Així qui estigui realment interessat en allò que s’anunciava trobarà més informació i més útil.

Contingut de les entrades centrat:

Eliminar la barra lateral també em permet que el text de les entrades es presenti al centre de la pantalla. Certament quan veig un article en un bloc amb el text centrat, em resulta molt més còmode i més comfortable la lectura en aquestes condicions. Amb la pantalla neta i sense distraccions.

I com que m’agrada tractar els lectors com m’agrada que em tractin a mi, així ho teniu!

Tipografia:

Un altre canvi important ha estat renovar la tipografia. Amb Divi emprava el tipus de lletra que venia per defecte amb el tema. Però amb GeneratePress no volia emprar la predeterminada per imprimir una mica més de caràcter al blog i donar més consistència al canvi. Algunes tipografies que havia provat m’agradaven ben prou, i decidir-me per una o altra no resultava fàcil.

Però la que he escollit al final la tenia davant dels meus nassos des de feia temps i no la veia:

Ubuntu!

Ubuntu és una font utilitzada en el mateix tauler d’administració interna del WordPress. I a més també és la tipografia pròpia del meu sistema operatiu, Ubuntu, de la qual pren el nom.

Si tenc un blog en WordPress per aprendre sobre aquest gestor de continguts de codi obert com a tema principal. Si tenc igualment una categoria sobre Ubuntu al blog, sistema operatiu també de codi obert. Com no hauria d’utilitzar també la font tipogràfica d’Ubuntu?

Codi obert al poder com a filosofia i sentit didàctic com a valor. I tot expressat amb un tipus de lletra.

La integració crec que no pot ser millor.

Colors:

Per no estendre’m en excés sobre els canvis al blog, un breu darrer apunt sobre els colors utilitzats. La idea era en aquest cas introduir novetats però mantenir la identitat inicial.

Es conserva el verd en el logo, els títols de capçalera principals de les pàgines, i els botons. I s’amplia als elements del menú principal i en els enllaços.

El groc s’incorpora als enllaços i els botons dels arxius d’entrades quan hi passes per damunt amb el ratolí.

He canviat el vermell de la majoria de botons, que és substituït pel blau.

Les capçaleres secundàries <h2>, <h3> i <h4> passen a tons blaus de més fosc a més clar.

Guia per canviar de Divi a GeneratePress amb Elementor


Per suposat de maneres de fer canvis a un web n’hi ha moltes. Aquí exposaré com ho he fet jo en aquest cas concret perquè et pugui ser d’utilitat. Si et trobes en la situació de canviar el teu tema per utilitzar GeneratePress i el maquetador Elementor pots seguir aquestes passes.

Primera fase: Preparatius

1- Crea el teu web de proves:

La primera cosa que jo recoman és fer els canvis primer en un web de desenvolupament. Si ets subscriptor d’aquest blog ja saps que tens diferents opcions per tenir un web de proves amb WordPress sense que et costi un cèntim. Si encara no tens la guia que ja s’han descarregat prop de 300 persones aconsegueix-la gratis fent-te subscriptor:

Guia gratis Formes de tenir un Web de Proves amb WordPress a JoanLlompart.com

Amb el teu web de desenvolupament o proves tens dos avantatges principals:

  • Podràs fer les modificacions que vulguis sense tocar el teu web obert a tothom. Fes-ho al teu ritme, amb el temps que necessitis.
  • Quan traslladis els canvis al teu web en producció (la pàgina real oberta al públic) redueixes el temps de molèsties als usuaris i visitants. Fins i tot podries fer el traspàs sense haver de posar el teu web en mode de manteniment. O almenys reduir aquest temps a la mínima expressió.

2- Construeix les pàgines estàtiques amb Elementor. Desa-les com a plantilles i exporta-les.

Quan ja tens el teu web de proves amb GeneratePress i Elementor instal·lats, crees les pàgines estàtiques del teu web. Pots reproduir-les tal com les tens amb el teu anterior tema, o fer els canvis que consideris oportuns en cada cas.

Una volta les tens acabades, amb Elementor tens l’opció de desar-les com a plantilles i exportar-les al teu ordinador. Aquests arxius exportats et seran útils per fer el trasllat al teu web real més endavant.

Desar una pàgina feta amb Elementor com a plantilla

3- Canvis addicionals

Si necessites fer canvis d’arxius, estils, funcions o el que sigui, recorda que tens una unitat del Curs WordPress Nivell Mitjà on tens explicat al detall quina és la forma correcta de fer modificacions a WordPress en cada cas!

També és possible que alguna de les funcionalitats que inclou Divi o el teu tema anterior que aprofitaves ara no la tenguis.

Per exemple has de tenir present que en Divi hi ha una opció de personalització per incloure al teu web els codis de Google Analytics, el pixel de Facebook… A GeneratePress, com la majoria de temes, s’ha d’incloure directament aquests codis a l’arxiu de capçalera del tema. Per tant si els tens al teu web no te n’oblidis de posar-los al seu lloc!

O pot ser que vulguis instal·lar alguna extensió nova. En el teu web de desenvolupament fes totes les proves que necessitis, que aquesta és la seva funció.

4- Instal·la GeneratePress al teu web

Quan ja tens el teu web de proves acabat, és hora de començar els preparatius per passar els canvis al teu web real.

Instal·lació de GeneratePress

Instal·la el tema gratuït i preferiblement també l’extensió premium de GeneratetPress.

Però no ho activis encara!

Si has de fer algun canvi als arxius de GeneratePress (però fes-ho bé!), amb el tema instal·lat però sense activar podràs reproduir les modificacions que ja has provat al teu web de proves sense cap molèstia als teus visitants.

5.- Instal·la Elementor i les noves extensions que necessitis

Instal·lació d'Elementor

Instal·la Elementor i activa’l. Importa a la Llibreria les plantilles que has desat al teu ordinador de les pàgines que ja tens creades. Aquestes plantilles seran les que insertaràs per substituir les pàgines que tens ara amb el maquetador de Divi.

Però abans de fer el canvi potser t’interessa crear un esborrany de pàgina i comprovar com queda cada plantilla. Així t’assegures que no tenguis problemes amb imatges, enllaços o qualsevol incidència que pugui sorgir al teu web real. I pots corregir-ho a la plantilla abans de fer el canvi en les pàgines publicades.

També pots instal·lar qualsevol altra extensió que hagis de menester. Activa tot el que et permeti treballar i fer preparatius sense que afecti el frontal visible al públic del teu web.

Segona Fase: Implementació

6- Activa el mode de manteniment del teu web

Quan ja tens tots els preparatius a punt, arriba el moment de fer els canvis que seran visibles al teu web. Aquí ja és convenient utilitzar i activar alguna extensió de manteniment, com Maintenance. O pots utilitzar el mètode manual que t’explic a la Unitat 1 del Curs WordPress Nivell Mitjà.

Així deixes el web temporalment sense accés i els visitants no es trobaran amb les teves pàgines desconfigurades i en obres!

7- Activa GeneratePress i l’extensió GP-Premium. Personalització.

Amb el mode de manteniment funcionant, ja pots activar el teu nou tema i l’extensió GP-Premium. Activa totes les característiques premium de GeneratePress.

Ja pots anar al personalitzador i configures els paràmetres tal com els havies posat al teu web de proves (formats, espais, colors, tipografies, CSS addicionals, etc…). Com que ja ho tenies tot provat, només ho has de copiar.

8- Edita menús, ginys i encapçalaments.

Qualsevol canvi que haguessis previst al teu web de proves, implanta’l al teu web real en menús o ginys.

Amb GeneraPress actiu, també pots crear els encapçalaments que utilitzaràs al web. Si ja els havies preparat al web de proves, només has de repetir-ho.

9- Substitució de pàgines

Configura les pàgines amb els paràmetres de format de GeneratePress que necessitis en cada cas (barres laterals, nombre de ginys de peu de pàgina, elements desactivats, tipus de contenidor del contingut del constructor de pàgines i encapçalament).

Formats de pàgina de GeneratePress

Actualitza la pàgina per desar els formats i tot seguit passa a l’editor amb Elementor.

Ja pots esborrar l’antic contingut que hi hagi (ja saps que una volta tens Divi desactivat et quedaran un munt de codis) i insertar la plantilla que tens preparada a la llibreria d’Elementor.

Repeteix-ho per a totes les pàgines que necessitis i ja tens el teu lloc amb GeneratePress i Elementor.

Tercera Fase: Últims detalls

10- Desactiva el mode de manteniment i acaba la feina.

En aquest punt el teu web ja el pots tornar a obrir al públic. Qualsevol canvi o detall que descobreixis que et quedi pendent el podràs acabar de polir a continuació o més endavant.

Per exemple ja pots eliminar Divi (o el teu antic tema), i qualsevol extensió obsoleta que ja no necessites.

Conclusió


Què t’ha semblat el canvi d’aspecte? Creus que el blog hi surt guanyant? Quin sistema utilitzes tu per fer modificacions importants al teu web?

Si et resulta útil la guia amb les passes per fer el canvi de tema de Divi a GeneratePress amb Elementor, o si hi canviaries o hi afegiries alguna cosa, deixa’m algun comentari i explica la teva experiència.

Altres articles que et poden interessar

7 comentaris a “Canviar de Divi a GeneratePress i Elementor

  1. Ep Joan!

    Bon canvi! Jo sóc molt de Genesis, però comparat amb Divi, Generatepress és una bona opció.

    Bé per la unificació del disseny i per eliminar la sidebar. Cada vegada està més en desús. Usabilitat al poder.

    I molt bona idea col•locar laimarge destacada sota el títol de cada post. També vaig optar per aquest disseny en un dels darrers projectes (que no posaré aquí per no fer spam) 😉

    Abraçada!
    Jordi

    • Gràcies Jordi!

      Qui sap, potser un dia em faig de Genesis. Però de moment seguiré fent passes amb GeneratePress.

      I si us plau, tu aquí no et reprimeixis de posar cap enllaç. Ni que fossis rus hahaha!

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.

2 Mostres
Comparteix2
Piula
+1
Comparteix