De Hungry to Divi: estudio de caso de un rediseño de sitio web

Actualizado el 10/09/2019 | Publicado el 06/03/2019 | 7 comentarios

El tema Hungry es un tema de WordPress vendido en ThemeForest. Está especializada en tema " sitio del restaurante ".. En este artículo, te ofrezco mi experiencia de un rediseño de Divi. Te expongo los distintos pasos realizados para pasar de Hambriento a Divi.

Del tema Hungry al tema Divi: el antes y el después en vídeo

Site Web avant refonte : thème Hungry
Site Web après refonte : thème Divi

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.

Paso 1: instalar un WordPress local

Para este proyecto, he utilizado MAMP. He tenido demasiados problemas con otras soluciones que ya no me arriesgo desde hace mucho tiempo...

Tomé la decisión de empezar desde cero. El contenido del antiguo sitio era pobre, no había casi nada que conservar. Además, el Tema del hambre había creado muchos Custom Post Types útiles para su funcionamiento (como platos, menús, etc.). En cualquier caso, no quería conservarlos.

Así que he creado un nuevo sitio de WordPress, tengo instalar el tema Divi y la mayoría de los plugins utilizados en el antiguo sitio.

Encontré equivalentes para plugins que ya no eran mantenidos por su desarrollador. Por ejemplo, cambié Descarga deliciosa (un plugin que llevaba más de dos años sin actualizarse) por Descargar Monitor. Aunque no hubiera problemas (conflictos) con el anterior, cuando se hace un rediseño, mejor hacerlo "a lo bestia".

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz clic en "PRUEBA GRATUITA

Paso 2: Seguimiento del contenido

Poco a poco, reconstruí el sitio existente en mi versión local. Así, el sitio en producción (el antiguo) seguía siendo accesible en Internet.

Para un sitio web de un restaurante, es inimaginable dejarlo en mantenimiento durante varios días, el tiempo para hacer el rediseño.

No se trata de un blog o de un sitio de escaparate "común": un sitio de restaurante es necesario para el buen funcionamiento del negocio diario. La gente quiere ver el menú y necesita poder reservar en línea.

De todos modos, reenvié la mayoría de las páginas y reconstruí el menú principal (la estructura del sitio).

He tenido cuidado de mantener el SLUG de cada página (el final de la URL) para que se correspondan con los del antiguo sitio. De esta manera, me ahorraré los redireccionamientos más adelante.

Paso 3: Diseño

Además de transcribir algunos de los contenidos existentes en el sitio local, ¡teníamos que abordar el diseño!

La ventaja es que tenía "carta blanca". ¡Esto es genial!

Así que construí mis páginas "bloque a bloque". No he utilizado diseños listos para usarAunque hubiera sido una solución fácil.

Utilicé los colores de la carta gráfica del cliente y adorné mis secciones con el Divisores de Divi.

Paso 4: Características

En términos de funcionalidad, nada complicado: ni tienda online, ni sistema de reservas, ni boletín de noticias, ni blog. Por lo tanto, ¡el trabajo fue ligero!

Como soy un fanático del menor esfuerzo, aún así utilicé herramientas que facilitaron este rediseño.

Por ejemplo, para el formulario de solicitud de reserva (no es un sistema, sólo un formulario) construido con Formularios CalderaUtilicé la herramienta de exportación-importación del plugin.

Así que no tuve que reconstruir los campos del formulario. Fue muy fácil exportar la configuración del sitio antiguo e importarla al nuevo.

Paso 5: Optimización SEO

Como empecé desde cero, tuve que trabajar mucho en el SEO. De todos modos, el del sitio antiguo no era genial...

Así que instalé Yoast SEO y optimicé cada página para una palabra clave, sin olvidar la optimización de los metadatos (título y descripción).

También optimicé los enlaces internos, así como el contenido de cada página, el texto alternativo de las imágenes, etc.

Pero el trabajo de SEO no termina ahí. Debe ser constante, es un trabajo en profundidad.

Sin olvidar que el tema Divi requiere una atención especial en términos de SEO: lea aquí cómo Haz que Divi sea amigable con el SEO.

Paso 6: Optimización del rendimiento

Aunque WP Rocket ya estaba presente en el antiguo sitio, he mejorado su configuración. Pero la mayor parte del trabajo de optimización se hizo en las imágenes...

Durante este rediseño, aproveché para importar imágenes ultraligeras. No tomé las imágenes utilizadas en el antiguo sitio.

Así, he ganado una cantidad considerable de peso y tiempo de carga optimizado. Como puede ver a continuación:

Informe de rendimiento de Pingdom Tools: antes y después

Informe de rendimiento del antiguo emplazamiento :

  • Calificación: D (69/100)
  • Tamaño de la página: 12,4 MB
  • Tiempo de carga: 2,46 segundos.
  • Número de consultas: 155

Nuevo informe de rendimiento del sitio :

  • Calificación: B (85/100)
  • Tamaño de la página: 2,1 MB
  • Tiempo de carga: 0,97 s.
  • Número de consultas: 34

Durante este rediseño con Divi, el sitio ha ganado realmente en rendimiento. Google lo verá rápidamente y el usuario agradecerá la mejora.

Paso 7: Migración

Llegó el fatídico momento de la migración. Mi sitio local estaba casi terminado, entonces era necesario proceder al intercambio...

La idea es importar el nuevo sitio en paralelo al antiguo, dentro del alojamiento, utilizando FileZilla.

Para realizar este delicado paso, he utilizado Duplicador. Un plugin que nos asiste en la migración. El problema es que hice este paso 5 veces, sin conseguirlo. La exportación siempre fue bien, la importación también pero el host siempre me enviaba un mensaje de error.

Me gusta tratar de entender, pero de momento no entendía de dónde podía venir el error... Así que me quedaban otras dos soluciones para hacer la migración: hacerlo manualmente (que no es necesariamente complicado pero sí bastante aburrido) o usar otro plugin.

He probado la segunda solución, utilizar otro plugin. En el peor de los casos, si no funcionara, habría cambiado a la otra opción...

Así que migré con Migración de WP todo en uno. Nada que decir, esta solución me permitió migrar fácilmente, sin obstáculos y a la primera.

Paso 8: Redirecciones

Una vez que mi nuevo sitio ocupó el lugar del antiguo, tuve que reenviar las antiguas URL que ya no existían al nuevo sitio.

Para ello, he utilizado dos herramientas: Integrity y Redirection

En primer lugar, antes de sobrescribir el sitio antiguo, me ocupé de obtener todas las URL existentes. No lo hice manualmente, por supuesto, porque WordPress crea un montón de URLs sin que lo sepas. Así que usé un pequeño software para Mac llamado Integridad (hay muchos equivalentes). Este último me dio toda la lista de URLs de mi antiguo sitio.

En un segundo paso, después de la migración, instalé el Redirección. Gracias a él, pude empezar a reenviar las URL antiguas para evitar los enlaces rotos: esto es malo para el SEO. Algunas redirecciones eran sencillas, para otras utilicé la opción Regex. Esto permite hacer redireccionamientos por lotes y me ahorró mucho tiempo.

Descubra más consejos y recursos necesarios para sus proyectos Divi.

Paso 9: Elaborar los detalles

En efecto, arreglar los últimos pequeños detalles y afinar el trabajo para que el sitio sea casi "perfecto" es sin duda un paso de doble filo. O lo estropeas, o le dedicas mucho tiempo.

Reconozco que aún no he terminado este paso. Y sí, soy un poco tonto al presentarles este rediseño antes de que el sitio sea "perfectamente perfecto"... Pero así es el juego.

Un sitio nunca está realmente terminado. Es un trabajo continuo y minucioso. Luego, cuando ya no nos convenga, ¡volvemos a empezar!

Por mi parte, rehago mis sitios o los de mis clientes cada 2 o 3 años. Ese es el máximo retraso en la web !

En el peor de los casos, podemos alargarlo hasta 4 años, pero más allá de eso, nos arriesgamos a tener un sitio un poco obsoleto, ya sea en términos de diseño o de funcionalidad.

En este último paso, no debemos olvidar para integrar el Google Analytics en el nuevo sitio. No olvides revalidar la propiedad con Google Search Console (dependiendo del método utilizado, puede que no sea necesario).

También debe comprobar las versiones para móviles y tabletas (es más fácil cuando el sitio está en línea) para ver si hay algún defecto de diseño o de adaptación a la pantalla. Y comprueba si todos los formularios y demás características son correctos.

Finalmente, habrá que seguir los datos de Google Search Console para ver si no hay ningún problema (errores 404 u otros)...

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

Duración del rediseño :  5 días.

Recapitulación de este rediseño de Divi :

  1. <strong class="schema-how-to-step-name"><a href="#step1">Installer un WordPress en local avec Divi</a></strong>

    Utilizando programas informáticos como MAMP por ejemplo. WordPress está disponible aquíen cuanto a Divi, tendrá que obtener una licencia.

  2. <strong class="schema-how-to-step-name"><a href="#step2">Faire suivre le contenu</a></strong>

    Intenta mantener los mismos SLUGS (terminaciones de URL) para tener menos trabajo después.

  3. <strong class="schema-how-to-step-name"><a href="#step3">Reconstruire le design</a></strong>

    Construya sus páginas desde cero o importar un diseño Divi ya hecho.

  4. <strong class="schema-how-to-step-name"><a href="#step4">Ajouter les fonctionnalités</a></strong>

    Instale todas las extensiones necesarias y sustituya los plugins obsoletos por otros equivalentes.

  5. <strong class="schema-how-to-step-name"><a href="#step5">Optimiser le SEO</a></strong>

    Este paso no se hace en unos minutos, es un trabajo en profundidad. La idea es empezar con buen pie.

  6. <strong class="schema-how-to-step-name"><a href="#step6">Optimiser la performance</a></strong>

    A Google y a los usuarios de Internet les gustan los sitios rápidos y eficientes. Instala y configura un plugin de caché como WP Rocket.

  7. <strong class="schema-how-to-step-name"><a href="#step7">Migration : échanger l’ancien site avec le nouveau</a></strong>

    Para una migración fácil, utilice un plugin como Duplicator o All In One WP Migration.

  8. <strong class="schema-how-to-step-name"><a href="#step8">Penser aux redirections</a></strong>

    Compruebe los enlaces que no se han seguido. Realice redireccionamientos utilizando el plugin Redirection.

  9. <strong class="schema-how-to-step-name"><a href="#step9">Peaufiner les détails et veiller au bon fonctionnement du site</a><br></strong>

    Paso que no hay que descuidar. Así es como se reconoce un sitio web bien hecho ;-)... ¡Este paso puede llevar tiempo!

¿Le interesan los estudios de casos? Lea otro estudio de caso sobre el rediseño: de BeTheme en Divi.

Refont ede site avec Divi
Du thème Hungry au thème Divi
Website redesign tips with Divi

1.713 palabras

7

A ti también te debería gustar:

Comment personnaliser le curseur de la souris sur votre site ?

¿Cómo personalizar el cursor del ratón en su sitio?

¿Desea un sitio personalizado hasta el último detalle? Tengo un tutorial rápido y fácil para ayudarle a personalizar el cursor del ratón en su sitio. De este modo, cuando sus visitantes pasen por encima de un enlace, el cursor estará totalmente personalizado.

7 Commentaires

  1. Rdgs

    Bonjour,
    Je suis débutant dans le domaine. Je n’ai pas trop compris comment tout le processus se déroule je crois.

    Lorsqu’on veut faire une refonte on doit aussi acheter un nouveau nom de domaine etc ?
    Ou alors il s’agit de bien garder le squelette du site ( nom de dom, hebergement, url) , mais seulement changer sa peau ( le design, fonctionnalité etc).

    Au fait, merci pour ce blog il est juste génial lorsqu’on débute avec divi et tout le système de création de site web 🙂 !

  2. Lycia Diaz

    Hello Rdgs ! Merci à toi. Pour une refonte tu as diverses solutions. Dans le cas de cet article, j’ai refait un site de À à Z et je l’ai placé à la place de l’ancien. Dans d’autres cas tu peux simplement changer le thème WordPress et conserver l’existant, tu ne refais donc que le design. Et dans certains cas tu peux changer le nom de domaine mais peut-on appeler une refonte alors ? Je pense que serait plutôt une nouvelle création ou bien une migration… après ce ne sont que des termes 😉

  3. Audrey

    bonjour,
    tout d’abord je tiens à vous adresser un très chaleureux merci pour ce blog, je suis débutante et je dois dire que je trouve ici de précieuses ressources sans lesquelles je me sentirai un peu perdue !, et surtout qui me font de plus en plus apprécier Divi, (…alors que j’y étais plutôt allergique au début ;))
    Je dois faire une refonte d’un site qui utilise le thème Oshine avec le builder Tastu.
    La solution la simple me semble être effectivement de le faire en local (même si j’appréhende moi aussi la phase de migration… je ne l’ai faite qu’une fois, comme je disais je suis novice ^^, mais sur un WP vierge qui venait tout juste d’être crée.) J’aurai donc deux petites questions 🙂
    la première, existe il une solution pour que mon client puisse voir l’évolution de la refonte si elle se fait en local ? sinon comment faire la refonte en ligne mais sans venir interférer avec le site actuel (vu que je compte partir d’un autre thème et builder…)
    la deuxième : comment se passe la migration de local à en ligne par rapport aux données de l’ancien site (y a t il des précautions à prendre pour éviter des embûches ou cafouillages…)
    Merci d’avance pour vos réponses,
    et encore merci pour ce blog 🙂 !!!
    Audrey

  4. Lycia Diaz

    Bonjour Audrey et merci pour tes encouragements !
    Alors, je vais essayer de répondre précisément à tes questions :
    1/ Si tu choisis de développer le site en local et que tu veux que ton client puisse suivre l’évolution, il faudra choisir Local by Flywheel comme serveur local. Celui-ci te permet de partager une URL temporaire avec ton client.
    2/ Tu peux aussi le faire en ligne dans un sous-dossier de ton hébergement ou bien sur un sous-domaine (par exemple : http://www.mondomaine.com/mondossier ou http://www.monsousdomaine.mondomaine.com). Mais dans ces cas, tu devrais avoir la possibilité de créer une 2ème base de données (selon l’offre de l’hébergeur, tu pourras pas) et en plus, tu devras aussi faire une migration ensuite vers le vrai nom de domaine (ainsi que nettoyer tout le reste). Donc ce n’est pas trop une bonne solution.
    3/ Si tu développe de zéro en local, il faut que tu oublies les contenus de l’ancien site car ils seront écrasés après importation du nouveau site.
    4/ Si l’ancien site n’a pas beaucoup de contenu, reprendre tout de zéro est une bonne solution.

    Bref, on pourrait en discuter longtemps 😉 il n’y a pas de bonne ou mauvaise solution. C’est comme quand tu dois choisir un itinéraire pour aller d’un point A vers un point B en voiture 😉

    J’espère t’avoir aidé.

  5. audrey

    re
    merci pour ta réponse et tes pistes, cela me permet d’y voir plus clair en effet, et me conforte dans mon idée de le faire en local (le site a effectivement peu de contenu actuellement). Merci aussi pour le tuyau pour local by flywheel, je l’ai regardé de plus prêt et cet outil me paraît tres très interessant 😉
    encore merci et très bon we à toi 🙂

  6. Mimi

    Bonsoir Lycia

    En voulant faire la refonte d’un site avec le thème DIVI, j’ai télécharger un layaout toute ma page est en décalé, le texte, les images, les boutons ne s’affichent pas au bonne endroit. Comment remédier a ce problème.

  7. Lycia Diaz

    Salut Mimi tu dois avoir des problèmes de marges. Édite toutes les sections et mets les à zéro pour voir.

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