De BeTheme a Divi: caso práctico de un rediseño de WordPress con Divi

En este artículo presentaré uno de mis últimos proyectos: una palabra Rediseño de prensa con Divi. ¿Qué es un rediseño? Este es el cambio radical de un sitio web para mejorar su diseño, pero también sus características.

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

Por no mencionar que la mayor parte del tiempo, nos encontramos con "huesos" que no habíamos planeado, es como un iceberg de hecho!

Sugiero que vuelvas a un caso práctico para la retransmisión de un restaurante web.

Aquí está el programa:

• ¿Por qué un rediseño?
• ¿Cómo elegir tu nuevo tema?
• ¿Tenemos que preparar el terreno en el local?
• ¡Acción!
• Mejorar la experiencia y corregir errores
• Un rediseño de WordPress con Divi: la evidencia para apoyar
• En conclusión

¿Por qué un rediseño?

Un recast está lejos de ser un capricho porque el trabajo a hacer no es a menudo pastel, te dije un poco antes...

¿Entonces por qué considerar un rediseño?

La mayor parte del tiempo es porque el propietario del sitio tiene deseo de renovación o mejora de las existentes para satisfacer mejor las necesidades de sus clientes/usuarios.

Como primer paso, tendrá que ver con el cliente o el usuario principal del sitio lo que no es adecuado para él con su sitio actual.

Necesitamos hacer una evaluación y enumerar los diversos puntos a mejorarEsto suele ser fácil...

Lo que va a ser más complicado es lo que el usuario va a querer mantener como es, eso es algunas veces más Rock

¿Por qué? Porque... Si cambiamos el tema, el diseño cambiará, tendrá que ser adaptado e incluso tener que hacer desarrollo a medida.

De todos modos, una vez que tengamos todas las cartas en mano, vamos a ser capaces de elegir su nuevo tema o incluso decidir crear uno a medida.

En mi caso práctico, el tema utilizado fue BeTheme. Siento lo de aquellos que pasaron horas diseñando, pero Este tema es una verdadera plaga.

Sin embargo, es una de las 3 mejores ventas de ThemeForest (en el momento en que escribo este artículo), lo que significa nada...

En realidad, lo que realmente está mal con este tema es su página de construcción llamada "Muffin Builder"... Deben haber olvidado la levadura o los quemaron. magdalenas, porque dejan un sabor amargo a todos sus usuarios !

¡Ahora descubre el Constructor Divi!

¿Cómo elegir tu nuevo tema?

Para elegir su nuevo tema, se deben tener en cuenta los siguientes criterios:

• Mi cliente necesita un sitio multilingüe = verificar compatibilidad con WPML o Polylang.
• Mi cliente tendrá necesita una tienda = Confeccionar compatibilidad con WooCommerce
• Mi cliente mantener su propio sitio = No elegir una "planta de gas" / pensar también en actualizaciones de temas (En ThemeForest, es un poco más complicado para un novicio)
• Es el tema compatible con la última versión de WordPress ?
• ¿El tema es popular o viene de detrás de los maricas?
• ¿El tema está bien codificado, SEO-Friendly, fácil de modificar?
• ¿El tema está bien señalado?

Una vez que haya hecho su inventario, puede elegir su tema con calma.

Para mi caso práctico, ¿adivina qué tema elegí? DIVI ¡Por supuesto!

Era obvio que podría modificarlo fácilmente para que se ajuste al viejo diseño, que podría añadir una tienda y sobre todo que podría mejorar la experiencia de usuario (frontera y trasera)...

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

¡Descubre Divi ahora!

Preparar el suelo localmente es obvio...

Para mi caso práctico, empecé creando el diversos diseños en uno WordPress sitio instalado en local.

Por supuesto, el sitio del restaurante no podía permanecer en mantenimiento durante el tiempo de diseño de cada página.

Así que he creado todo local y en paralelo. Esto me permitió comparar visuales y acercarme al diseño original.

Si usted hace su rediseño en vivo, sin pasar por el modo local, puede que no recuerde lo que su sitio parecía antes y no será capaz de hacer comparaciones...

Por lo tanto, este paso es esencial, no comience el rediseño de su sitio WordPress sin pruebas locales.

Para mi caso práctico dejé una WordPress en blanco pero también podría (debería) hacer una duplicación local, del sitio para ser recast porque permite descubrir algunos conflictos con los plugins existentes, por ejemplo.

El ambiente es específico del sitio y nunca estamos a salvo de sorpresas.

¡Acción!

El día que tuve que hacer el rediseño, el sitio estaba bajo mantenimiento hasta una o dos horas.

Esto fue un paso muy sencillo porque no tenía que migrar. Como Divi Builder permite para importar y exportar diseños completos¡Fue una obra!

La buena sorpresa en mi caso es que la eliminación de BeTheme y su Muffin Builder capacitación total eliminación de todos mis contenidos.

Funcionó para mí, pero puede ser de doble filo: imagínate si tienes cientos de artículos que creaste a través de la página de Builder y que elimina tus textos e imágenes cuando lo desactivas, sería terrible!

Por eso Nunca uso una página de constructor para construir mis artículos, sólo lo uso para el diseñar mis páginas.

En otros casos, si utiliza páginas de construcción como Divi Builder o Composer visual, cuando usted decide hacer sin ella, estos plugins dejar estigmas en su contenidoentonces verás aparecen códigos cortos por todas partes, mira la siguiente captura de pantalla:

Voilà un cas où la refonte peut devenir complexe...

Lee también: ¿Qué hacer con los códigos cortos después de desactivar el Divi Builder?

Améliorer l'expérience et corriger les éventuels bugs.

Una vez sitio había pasado de BeTheme a Divi, j'en ai profité pour faire un peu de ménage :

• J'ai supprimé le plugin Shareaholic et je l'ai remplacé par Monarca qui est bien plus "propre".
• J'ai supprimé Formulario de contacto 7 porque Divi tiene un módulo de contacto nativo.
• Comme optin, j'ai ajouté Bloom, que creo que es un gran pluginEs limpio, fácil de establecer y bonito.
• J'ai enfin pu activer WP Rocket (caching) porque con BeTheme, c'était trop bancal...
• J'en ai profité pour supprimer les widgets inutiles en pied de page.
• J'ai pu créer une boutique en ligne à l'aide de WooCormerce. Ce plugin s'intègre parfaitement bien dans Divi : pas de bugs, pas de soucis de visuels et j'aime beaucoup cette présentation en onglets "description du produit / avis clients". Par contre, il m'a fallu faire quelques retoques en el color de los botones de la tienda.
• J'ai également ajouté SecuPress Pro y suprimidas iThemes Security.

Moralidad: el sitio ha adquirido en rendimiento, gestión de Módulos Divi Builder est bien plus simple qu'avec le Dinosaur BuilderLo siento. Muffin Builder. Sin mencionar que la representación del lado del visitante es mucho más armónica.

Une refonte WordPress avec Divi : quelques preuves à l'appui...

Bon, le bla-bla c'est bien, mais en fait vous êtes curieux et vous avez envie de voir le résultat, n'est-ce pas ? C'est normal, c'est pour cette raison que j'ai fait des tests et des vidéos avant-après... Regardez plutôt :

=> Question Design...

Pour commencer, parlons simplement du rendu visuel. Voici deux vidéos, l'une est une vidéo concernant la page d'accueil du site d'origine, donc avec le thème BeTheme. L'autre a été prise après refonte avec el tema Divi...

Avant... avec BeTheme :

Après... avec Divi :

=> Question performance...

Por supuesto, uno. recast needs to make improvements, sinon ce serait une refonte ratée. L'image suivante prouve bien que le site a gagné en performance.

Para ser leído absolutamente: ¿Cómo mejorar el rendimiento de sus sitios Divi?

Avant refonte, avec le BeTheme, j'ai fait un test de rapidité sur le site de Google Page Speed. Le résultat n'était pas joli-joli : 27/100 versión móvil y 34/100 versión de escritorio !

Après le simple changement de thème, un nouveau test sur PageSpeed permet de voir qu'on a légèrement gagné en performance : 35/100 móvil y 46/100 escritorio. C'est déjà mieux mais pas encore top...

Entonces el plugin WP Rocket fue simplemente activado, dos o tres opciones fueron verificadas y luego nueva prueba de rendimiento: 55/100 móvil y 64/100 escritorio. C'est beaucoup mieux...

On est encore loin du 100/100 mais l'expérience utilisateur a déjà été améliorée et le site a presque doublé en performance/vitesse, l'opération parait plutôt concluante.

Entonces usted tendrá que ajustar todo esto y eventualmente añadir un plugin como Imágenes para aclarar las imágenes del sitio y ganar algunos micro segundos más de carga de página.

En conclusión

On sait quand on commence une refonte mais on ne peut pas vraiment prévoir quand celle-ci sera achevée, en effet, un site doit constamment évoluer...

Siempre hay cosas que hacer. mejoras, cela est indispensable pour que votre site grandisse en même temps que l'évolution de votre business.

Dans mon cas pratique, je ne suis pas encore satisfaite du résultat, il y a encore du boulot, surtout en version mobile/tablette... Mais c'est ça qui est excitant : toujours s'améliorer, toujours évoluer !

¿Necesita más recursos en Divi? Visita Elegante Themes blog lleno de ideas y tutos!