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. Explico los distintos pasos dados para pasar de Hambriento a Divi.
De Hungry a Divi Theme: el antes y el después en vídeo
Aviso: 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 contratiempos con otras soluciones como para no arriesgarme en mucho tiempo...
Decidí 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 creé un nuevo sitio de WordPress, yo 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, es mejor hacerlo "a fondo".
¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA
Paso 2: Seguimiento del contenido
Poco a poco, reconstruí el sitio existente en mi versión local. De este modo, el sitio de 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 un sitio de escaparate "común": un sitio de restaurante es necesario para el 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 coincidan con los del antiguo sitio. De esta forma, me ahorraría redireccionamientos posteriores.
Paso 3: Diseño
Además de transcribir parte del contenido existente en el sitio local, ¡teníamos que ocuparnos del 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 usarEsta habría sido la salida fácil.
Utilicé los colores de la carta gráfica del cliente y adorné mis secciones con el Separadores de Divi.
Paso 4: Las características
En términos de funcionalidad, nada complicado: ni tienda online, ni sistema de reservas, ni boletín de noticias, ni blog. Así que el trabajo fue ligero.
Como soy partidario del menor esfuerzo, aún así he utilizado herramientas que han facilitado este rediseño.
Por ejemplo, para el formulario de solicitud de reserva (no es un sistema en sí, 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 antiguo sitio no era muy bueno...
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í. Tiene que 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: Optimizar el 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 he utilizado las imágenes del antiguo sitio.
Así, he ganado un peso considerable y tiempo de carga optimizado. Como puede ver a continuación:
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 s.
- Número de solicitudes: 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 solicitudes: 34
Durante este rediseño con Divi, el sitio realmente ha mejorado en rendimiento. Google lo verá rápidamente y el usuario agradecerá la mejora.
Paso 7: Migración
Entonces llegó el fatídico momento de la migración. Mi sitio local estaba casi terminado, así que era hora de hacer el cambio...
La idea es importar el nuevo sitio en paralelo con el 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 he hecho este paso 5 veces, sin que haya tenido éxito. La exportación siempre iba 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 utilizar 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 hice mi migración con Migración de WP todo en uno. No hay nada de lo que quejarse, esta solución me permitió migrar fácilmente, sin problemas y al primer intento.
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 encargué de recuperar 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. Algunos redireccionamientos eran sencillos, para otros utilicé la opción Regex. Esto permite hacer redireccionamientos por lotes y me ahorró mucho tiempo.
Descubra más consejos y recursos necesarios para su Divi.
Paso 9: Establecer los detalles
En efecto, atar los cabos sueltos y afinar el trabajo para que el sitio sea casi "perfecto" es ciertamente un paso de doble filo. O lo estropeas o le dedicas un tiempo desmesurado.
Reconozco que aún no he terminado este paso. Y sí, soy un poco estúpido al presentarles este rediseño antes de que el sitio sea "perfectamente perfecto"... Pero así es el juego.
Un sitio web nunca está realmente terminado. Es un proceso continuo. Luego, cuando ya no nos convenga, ¡volvemos a empezar!
Por mi parte, rediseño 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, se puede alargar hasta 4 años, pero más allá de eso, se corre el riesgo de tener un sitio un poco obsoleto, ya sea en términos de diseño o en términos de funcionalidad.
En este último paso, no debes 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 (esto es más fácil cuando el sitio está en línea) para ver si hay algún fallo de diseño o de adaptación a la pantalla. Y compruebe que todos los formularios y demás características son correctos.
Por último, tendrás que seguir los datos de Google Search Console para ver si hay algú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.
Resumen de este rediseño de Divi:
- <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.
- <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.
- <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.
- <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.
- <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 minucioso. La idea es empezar con buen pie.
- <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 eficaces. Instala y configura un plugin de caché como WP Rocket.
- <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.
- <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.
- <strong class="schema-how-to-step-name"><a href="#step9">Peaufiner les détails et veiller au bon fonctionnement du site</a><br></strong>
Un paso que no se debe 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.
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 🙂 !
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 😉
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
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é.
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 🙂
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.
Salut Mimi tu dois avoir des problèmes de marges. Édite toutes les sections et mets les à zéro pour voir.