Página de error 404 personalizada: con y sin el Divi Theme Builder

Publicado el 22/06/2021 | 4 comentarios

¿Ha pensado en personalizar la página de error 404 de su sitio web? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener al visitante en su sitio si pasa por allí.

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.

1 - ¿Qué es un error 404?

Un error 404 es un código de respuesta que envía el navegador cuando no puede encontrar ningún contenido para mostrar.

Esto puede ocurrir en varios casos:

  • Ha cambiado la URL de su sitio, tras una migración, y ha olvidado redirigir el nombre de dominio.
  • Has cambiado la URL de tu publicación -o más bien has cambiado el slug- y te has olvidado de redireccionar.
  • Has borrado una publicación y has olvidado redirigirla.
  • Has compartido una URL incorrecta, por ejemplo una que has escrito mal (por eso recomiendo siempre copiar y pegar la URL en lugar de escribirla a mano).
  • El internauta ha escrito mal una URL de su sitio web mientras navegaba y se encuentra con una página que no existe.

Eso es más o menos a lo que estamos acostumbrados.

¿Quieres personalizar Divi como un profesional? Consulta todos los tutoriales.

2 - Caso especial: la página de inicio está disponible pero todas las demás páginas muestran un error 404

Puede ocurrir que la página de inicio de su sitio esté disponible pero que todas las demás páginas de su sitio muestren un error 404. Esto es bastante raro, pero me ha pasado 4 o 5 veces en pocos años.

En este caso, tiene un problema con el archivo .htaccess. Sólo hay que regenerarlo para corregir el problema.

Para ello, vaya a la sección Configuración > Enlaces permanentes y haga clic dos veces en el botón "guardar cambios". En la mayoría de los casos, esto generará un nuevo archivo .htaccess y solucionará esos problemas de error 404.

No se demore. Descubra el tema Divi aquí !

3 - ¿Por qué y cómo evitar los errores 404?

Los repetidos errores 404 ofrecen una mala experiencia al usuario. Pero más allá de eso, es malo para el SEO de su sitio web. A Google no le gusta encontrarse con contenidos que ya no existen.

Para corregir los errores 404, basta con instalar el Plugin de redirección. Es una extensión gratuita y fácil de usar que permite introducir la antigua dirección web e indicar a qué nueva dirección debe ser redirigida.

Este es un plugin que instalo en cada uno de mis sitios y te recomiendo que hagas lo mismo.

¿Necesitas dominar Divi? ¡Descubre mi formación que te guiará paso a paso en la comprensión y uso de Divi! Más información sobre la formación en Divi.

4 - ¿Por qué personalizar la página de error 404 de su sitio?

Se preguntará si es realmente necesario personalizar la página de error 404 de un sitio si se están corrigiendo todos los errores existentes.

La respuesta es sí, debe personalizar esta página, por dos razones:

  • Aunque corrija todos los errores 404 de su sitio, es posible que un visitante introduzca una dirección incorrecta. En este caso, acabarían en esta página.
  • La página básica de error 404 no es bonita y podrías hacerla encajar con el resto de tu sitio.

Además, al personalizar su página de error 404, podría crear un diseño inusual para que el usuario se sienta finalmente satisfecho de haber tropezado con esta página con un toque de humor, por ejemplo.

Pero más allá del diseño, el objetivo es mejorar la experiencia del usuario y evitar perderlo. Es esencial animar al usuario a ir más allá de este error y descubrir otras páginas de su sitio. De esta manera, mejora su tasa de rebote.

5 - Página de error 404 con el Theme Builder de Divi

La buena noticia es que el Constructor de temas Divi le permite personalizar esta página en un abrir y cerrar de ojos.

Page erreur 404 avec le Theme Builder
  1. Ve a la pestaña Divi > Theme Builder.
  2. Haga clic en "+Añadir una nueva plantilla".
  3. Elija la plantilla "Página 404".
  4. Haga clic en "Añadir un cuerpo personalizado".
  5. A continuación, construya su diseño como mejor le parezca. Añade un título, algo de texto, algo de códigoimágenes, etc. Pero no olvides insertar un Módulo del blog si tienes un blog y/o un módulo de tienda si tienes una tienda online De este modo, el internauta tendrá muchas opciones para seguir navegando por su sitio. ¿Por qué no añadir un formulario de contacto y/o un formulario de inscripción al boletín? En resumen, utilice su imaginación.
Contenu de la page erreur 404

Por último, no olvides guardar los cambios para que esta página de error 404 personalizada ocupe el lugar de la página clásica que ofrece el tema Divi.

¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA

6 - Página de error 404 sin el Theme Builder de Divi

Si ahora, por alguna razón que desconozco, no quieres utilizar el constructor de temas para personalizar tu página de error 404, puedes optar por el "método de la vieja escuela".

A continuación, tendrá que realizar este cambio en su tema hijo.

Page erreur 404 Divi avec un thème enfant
  1. Cree su tema hijo como se muestra aquí. A continuación, abra la carpeta del tema Divi (tema principal), localice el archivo llamado "404.php " y cópielo.
  2. A continuación, pegue este archivo en la carpeta de su tema hijo.
  3. Localice el código anotado entre las líneas 6 y 10 del archivo.
  4. Sustituya este código por su propio código HTML.
page erreur 404 divi ok

Aquí está el resultado:

Page erreur 404 personnalisée

Es un diseño sencillo que requiere algunos conocimientos de HTML y CSS. También podría decirte que es mucho más fácil usar el Theme Builder...

Pero bueno, al menos sabes lo que puede hacer esta herramienta y entiendes lo que nos obligaban a hacer antes de que existiera el constructor de temas...

7 - Inspiraciones para personalizar su página de error 404

Ahora que ha descubierto por qué y cómo personalizar su página de error 404, puede que necesite algo de inspiración para crear la suya propia.

¡Buenas noticias! El Hola 404 sitio web publica cada semana nueva inspiración para personalizar su página de error 404.

Inspirations page erreur 404

6 - Personalizar la página de error 404: el videotutorial

La creación de esta página es muy sencilla, como has visto en este tutorial... Sin embargo, he preparado una versión en vídeo para ti:

Para ir más allá, aquí hay una lista de enlaces útiles para personalizar su página de error 404:

personnaliser page erreur 404
personnaliser page erreur 404 avec Divi
pin modifier page erreur 404 en 117

1.055 palabras

4

Puede que a ti también te guste:

Comment changer une image au survol de la souris ?

¿Cómo cambiar una imagen al pasar el ratón por encima?

Si no estás usando las opciones de hover disponibles en Divi, ¡te estás perdiendo algo! Aquí tienes un ejemplo de cómo utilizarlos que te puede resultar útil. En este tutorial y vídeo, te muestro cómo cambiar una imagen al pasar el ratón por encima.

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

4 Commentaires

  1. cj-envadrouille

    Super ! J’ai déjà crée une page d’erreur 404 pour mon 2eme site https://aixelles.fr …..en m’inspirant de la page d’erreur d’astuces Divi ( trop jolie) 😊
    Dans quelques temps, je le ferai pour les « roulettes ».
    Merci de tes bons conseils, une vraie mine d’or pour nous les apprentis 🥳🥳

  2. Lycia Diaz

    Super ! Merci Christine 😉

  3. Léa-Sandra

    Bonjour,

    Je viens de regarder votre vidéo.
    Et si vous n’avez toujours pas trouvé la solution pour le player (tuto datant de juin 2021)
    je peux vous le dire :

    il suffit simplement de décocher la case « controls » et le player n’y sera plus.

    Et si oui, vous avez réglé votre mini soucis, ne tenez pas compte de ce message ^-^

    Je vous souhaite une bonne continuation.

  4. Lycia Diaz

    Merci oui il faut que je modifie le tutoriel…

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

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