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

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

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.

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.

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.

Aquí está el resultado:

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.

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:

• 4 plugins para personalizar la página de error 404
• Obtención de un diseño de error 404 (gratis)
• Cómo solucionar los errores 404 en los sitios de WordPress