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

Publicado el 22/06/2021 | 2 comentarios

¿Ha pensado en personalizar la página de error 404 de su sitio? ¿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 cuando pasa por él.

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.

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, a raíz de una migración, y ha olvidado hacer una redirección del nombre de dominio.
  • Has cambiado la URL de tu publicación -o más bien has cambiado el slug- y has olvidado hacer una redirección.
  • Has eliminado una publicación y has olvidado redirigirla.
  • Has compartido una URL errónea, por ejemplo una URL 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 durante su navegación y cae en 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. Es bastante raro, pero me ha pasado 4 o 5 veces en unos años.

En este caso, tiene un problema con su 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 esperes más. 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 programa 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 usuario introduzca una dirección incorrecta. En este caso, llegarían a esta página.
  • La página básica de error 404 no es bonita y podrías hacerla coincidir 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 esté 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 de Internet y evitar que se pierda. Es absolutamente necesario animar al usuario a ir más allá de este error y descubrir otras páginas de su sitio. De este modo, mejora su tasa de rebote.

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

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 Divi Theme Builder

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".

Entonces tendrá que hacer 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 un poco de inspiración para crear la suya propia.

¡Buenas noticias! El Hola sitio 404 publica cada semana nuevas inspiraciones para personalizar su página de error 404.

Inspirations page erreur 404

6 - Personalizar su página de error 404 : el video tutorial

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

A ti también te debería gustar:

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.

2 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 😉

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