De BeTheme a Divi: estudio de caso de un rediseño de WordPress con Divi

Actualizado el 21/05/2019 | Publicado el 09/12/2017 | 2 comentarios

En este artículo te voy a hablar de uno de mis últimos proyectos: un rediseño de WordPress con Divi. ¿Qué es un rediseño? Es el cambio radical de un sitio web para mejorar su diseño pero también su funcionalidad.

Un rediseño es un pasaje muy delicado, es en mi opinión mucho más complejo que la creación de un sitio web porque debemos "hacer" con las limitaciones que se nos imponen teniendo en cuenta el contenido existente ...

Por no hablar de que la mayoría de las veces te encuentras con "huesos" que no habías previsto, ¡es un poco como un iceberg en realidad!

Le propongo que vuelva sobre un caso práctico para el rediseño de un sitio web del restaurante.

Aquí está el programa:

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

¿Por qué hacer un rediseño?

Un rediseño no es ni mucho menos un capricho porque el trabajo que hay que hacer no suele ser coser y cantar, ya te lo he contado antes...

Entonces, ¿por qué considerar un rediseño?

La mayoría de las veces se debe a que el propietario del sitio quiere renovar o mejorar el existente para satisfacer mejor las necesidades de sus clientes/usuarios de Internet.

En primer lugar, tendremos que ver con el cliente o el usuario principal del sitio lo que no le conviene con su sitio actual.

Es necesario hacer un inventario y enumerar los distintos puntos a mejorar, que generalmente es fácil...

Lo que será más complicado es lo que el usuario querrá mantener absolutamente como está, eso es a veces más rock'n'roll...

¿Por qué? Porque si cambias el tema, el diseño cambiará inevitablemente, tendrás que adaptarlo y quizás incluso tengas que hacer algún desarrollo a medida.

En resumen, una vez que tenemos todas las cartas en la mano, podemos elija su nuevo tema o incluso decidir crear uno personalizado.

En mi caso, el tema utilizado fue BeTheme. Lo siento por los que se han pasado horas diseñándolo, pero este tema es un auténtico coñazo.

Sin embargo, está en el top 3 de ventas de ThemeForest (en el momento de escribir este artículo), así que no significa nada...

De hecho, lo que realmente falla en este tema es su constructor de páginas llamado "Muffin Builder"... ¡Deben haber olvidado la levadura o han quemado esas magdalenas, porque dejan un sabor amargo a todos sus usuarios!

Descubra el Constructor Divi ahora!

¿Cómo elegir su nuevo tema?

Para elegir su nuevo tema, estos son los criterios que debe tener en cuenta:

Una vez hecho el inventario, puede elegir su tema con tranquilidad.

Para mi caso práctico, ¿adivina qué tema he elegido? DIVI Por supuesto.

Era obvio que podía modificarlo fácilmente para adaptarlo al diseño antiguo, que podía añadir una tienda y, sobre todo, que podía mejorar la experiencia del usuario (parte delantera y trasera)...

El cliente también podrá editar fácilmente las páginas de su sitio gracias a su intuitivo constructor de páginas.

Descubra Divi ahora!

Preparar el terreno localmente es obvio...

Para mi estudio de caso, empecé por crear el varios diseños en un sitio WordPress instalado localmente.

Obviamente, el sitio web del restaurante no podía permanecer en mantenimiento mientras se desarrollaba el diseño de cada página.

Así que creé todo localmente y en paralelo. Esto me permitió comparar las imágenes y acercarme al diseño original.

Si hace su rediseño directamente, sin pasar por el modo local, es posible que no recuerde cómo era su sitio antes y no podrá hacer comparaciones...

Por lo tanto, este paso es esencial, no se lance al rediseño de su sitio de WordPress sin hacer pruebas locales primero.

Para mi caso práctico empecé con un WordPress en blanco pero también podría (debería) haber hecho una duplicación local del sitio a rediseñar porque permite descubrir algunos conflictos con plugins existentes por ejemplo.

El entorno es único en cada sitio y nunca hay sorpresas.

Actúa.

El día que tuve que hacer el rediseño, el sitio estuvo en mantenimiento durante una o dos horas como máximo.

Este paso fue muy fácil porque no tuve que hacer ninguna migración. Dado que el Divi Builder permite importar y exportar diseños completos¡Fue pan comido!

La buena sorpresa en mi caso es que la eliminación de BeTheme y su Muffin Builder ha provocado la eliminación total de todo mi contenido.

A mí me ha funcionado bien, pero puede ser un arma de doble filo: imagínate si tienes cientos de artículos que has creado a través del page builder y te borra los textos y las imágenes cuando lo desactivas, ¡eso sería terrible!

Por eso NUNCA uso un page builder para construir mis artículos, sólo lo uso para diseñar mis páginas.

En otros casos, si utilizas constructores de páginas como Divi Builder o Visual Composer, cuando decidas prescindir de ellos, estos plugins dejarán estigmas en tu contenido, entonces verás aparecer shortcodes por todas partes, mira en cambio la siguiente captura de pantalla:

Les Shortcodes laissés par le Divi Builder
Este es el aspecto de una página web con el Constructor Divi desactivado. En esta imagen, he desactivado el tema Divi para habilitar el tema TwentySeventeen.

Este es un caso en el que el rediseño puede resultar complejo...

Lea también: ¿qué hacer con los shortcodes después de desactivar el Divi Builder?

Mejorar la experiencia y corregir los errores.

Una vez que el sitio fue cambiado de BeTheme a Divi, aproveché la oportunidad para limpiar un poco:

  • He eliminado el plugin Shareaholic y lo he sustituido por Monarca que es mucho más limpio.
  • He eliminado el Contact Form 7 porque Divi tiene un módulo de contacto de forma nativa.
  • Como optin, he añadido Bloomque en mi opinión es un gran pluginEs limpio, fácil de montar y bonito.
  • Finalmente pude activar WP Rocket (plugin de caché), porque con BeTheme, era demasiado inestable...
  • He aprovechado para eliminar los widgets inútiles del pie de página.
  • Pude crear una tienda online usando WooCormerce. Este plugin se integra perfectamente bien con Divi: sin errores, sin problemas visuales y me gusta mucho esta presentación en las pestañas "descripción del producto / comentarios de los clientes". Por otro lado, tuve que hacer algunas retocar el color de los botones de la tienda.
  • También añadí SecuPress Pro y eliminé iThemes Security.

Moraleja: el sitio ha ganado en rendimiento, la gestión de Módulos de Divi Builder es mucho más sencillo que con el Constructor de Dinosaurios, o más bien con el Constructor de Magdalenas. Por no hablar de que el renderizado del lado del visitante es mucho más armonioso.

Un rediseño de WordPress con Divi: algunas pruebas para apoyarlo...

Bueno, bla, bla, está bien, pero tienes curiosidad y quieres ver el resultado, ¿no? Es normal, por eso he hecho algunas pruebas y vídeos del antes y el después... Échale un vistazo en su lugar:

=> Diseño de preguntas...

Para empezar, hablemos de la representación visual. Aquí hay dos videos, uno es un video sobre la página de inicio del sitio original, así con el tema BeTheme. La otra fue tomada después del rediseño con el tema Divi

Antes... con BeTheme :

Después... con Divi :

=> Cuestión de rendimiento...

Por supuesto, un rediseño debe aportar mejoras, de lo contrario sería un rediseño fallido. La siguiente imagen demuestra que el sitio ha ganado en rendimiento.

Una lectura obligada: ¿Cómo puede mejorar el rendimiento de sus sitios Divi?

Test de performance avant et après refonte avec Divi
Todavía estamos lejos del 100/100 pero el sitio ha duplicado su velocidad después del rediseño con Divi

Antes de rediseñar, con el BeTheme, hice una prueba de velocidad en el sitio de Velocidad de la página de Google. El resultado no fue bonito: ¡27/100 en la versión móvil y 34/100 en la versión de escritorio!

Tras el simple cambio de tema, un nuevo test en PageSpeed nos permite ver que hemos ganado ligeramente en rendimiento: 35/100 en móvil y 46/100 en escritorio. Ya es mejor, pero todavía no es top...

A continuación, simplemente se activó el plugin WP Rocket, se comprobaron un par de opciones y se realizó una nueva prueba de rendimiento: 55/100 en móvil y 64/100 en escritorio. Es mucho mejor...

Todavía estamos lejos del 100/100, pero la experiencia del usuario ya ha mejorado y el sitio casi ha duplicado su rendimiento/velocidad, la operación parece bastante concluyente.

Luego tendrás que perfeccionar todo esto y eventualmente añadir un plugin como Imagify para aligerar las imágenes del sitio y ganar unos microsegundos más de carga de la página.

En conclusión

Sabemos cuándo empezamos un rediseño, pero no podemos predecir realmente cuándo estará terminado, porque un sitio debe evolucionar constantemente...

Siempre hay cosas que hacer, cosas que hacer áreas de mejoraEsto es esencial para que su sitio web crezca junto con su negocio.

En mi caso práctico, todavía no estoy satisfecho con el resultado, aún queda trabajo por hacer, sobre todo en la versión móvil/tablet... Pero eso es lo emocionante: ¡siempre mejorar, siempre evolucionar!

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales.

Refonte WordPress de BeTheme à Divi
La historia de un rediseño de WordPress: de BeTheme a Divi
Divi tutorial : from betheme to Divi

1.701 palabras

7

A ti también te debería gustar:

2 Commentaires

  1. édith

    Bonjour,
    Suite à la lecture de votre newletter, j’ai fais une visite complète de votre nouveau blog et je confirme que c’est une bonne nouvelle d’avoir un blog en français qui traite du thème Divi.
    J’hésite depuis longtemps à acheter ce thème pour plusieurs raisons :
    – ses performances (rapidité, les titres souvent en h2 au lieu d’avoir un h1, la compatibilité mobil etc…)
    – la construction de la page d’accueil
    Après avoir lu vos articles, je suis de nouveau tenté par ce thème mais, je ne suis pas certaine de ne pas faire une erreur.
    Actuellement, j’utilise un thème gratuit/premium (Sydney) que j’ai bidouillé à ma façon.
    Ce thème donne de très bons résultats en l’état mais, ne me convient pas vraiment.
    Je présente des recettes de cuisine avec une mise en page particulière (colonne bootstrap) et je ne voudrais pas perdre la mise en page de mes articles en changeant de thème.
    J’aimerais présenter mes dernières recette en page d’accueil mais, est-ce possible avec Divi ?
    Vous voyez que je me pose énormément de questions avant de franchir le pas. J’ai passé trop d’heures à peaufiner mon blog que je ne voudrais pas tout casser.
    Cordialement

  2. Lycia

    Bonjour Edith et bonne année ! Lorsque on change de thème, il y a de grandes chances d’avoir des surprises… souvent mauvaises… le mieux serait de tester la refonte en local. Il faudrait dupliquer votre blog actuel avec le plugin Duplicator et de le migrer en local sur MAMP par exemple. Cela pourrait faire l’objet d’un prochain article bien que vous pourriez trouver cela facilement sur le web. Ma question est : vos articles de recettes sont-ils fait avec un constructeur de page comme Elementor ou Visual Composer ? Si c’est le cas, vous devrez soit conserver ce constructeur sous Divi, soit tout refondre. Cela prendra du temps. Il faut évaluer le temps-risques-bénéfices. Pour les H2, cela fait longtemps que Elegant Thème a corrigé cela. Pour la performance, ça dépend de beaucoup de facteurs. Comme je l’ai expliqué dans cet article, je ne regrette pas d’avoir changé BeTheme pour Divi mais il y a encore des optimisations à faire… Pour conclure, je dirais que vous pouvez tester mais en local d’abord, histoire de ne pas être déçue… Bonne continuation !

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto