La página de error 404 es una de las más temidas para toda persona que tiene una web. Aparece siempre que el usuario intenta acceder a una página que no existe, ya sea porque se ha equivocado escribiendo la URL o porque intenta acceder a una página que se ha eliminado de la web y no se han tomado las medidas necesarias para que no aparezca.

Si tu web está hecha con WordPress, seguramente, el tema que utilizas tiene una plantilla para mostrar el error 404. Estas plantillas suelen ser más básicas que el mecanismo de un chupete.

La mayoría solo se limitan a mostrar el típico mensaje de “Error 404 – Page not found” o similar y se quedan tan panchos. Total, ya cumple su función para indicar que has aterrizado en una página que no existe, ¿no?

Pero, ¿qué te parece si te dijera que puedes aprovechar el error 404 para crear una página personalizada con los elementos que tú quieras en lugar de mostrar el típico mensaje?

Suena interesante, ¿verdad?

Pues en esta entrada te voy a explicar cómo personalizar la página de error 404 en WordPress para utilizarla a tu favor, y no en tu contra.

​¿Quieres lo mejor para tu web?

Pues será mejor que eches un ojo a las mejores herramientas de creación y diseño web. Luego no digas que no te lo advertí...

¿Por qué personalizar el error 404?

Como decía, la gran mayoría de temas para WordPress incluyen una plantilla simple para el error 404 notificando que la página no existe.

Esto suele ser así desde en los temas gratuitos más nefastos, hasta en los temas premium más populares del mundo.

Cuando un usuario llega a una página de tu web que no existe, se encuentra ese mensaje estándar y aburrido, y, aparte de sentirse frustrado por no haber dado con lo que buscaba, esa página no consigue llamar su atención para nada, por lo que es probable que termine abandonando tu web. Vamos, que lo único que consigue es deprimir aún más al usuario.

En cambio, crear una página 404 personalizada te ofrece la posibilidad de llamar la atención del usuario y aprovechar para llevarlo hacia donde tú quieras.

Puedes conseguirlo haciendo un diseño atractivo y añadiendo enlaces hacia los lugares clave de tu web, aumentando las posibilidades de que un usuario que estaba perdido en tu web, acabe navegando por ella hasta encontrar algo de su interés que le atraiga.

Bien, pues si te ha convencido la explicación, nos dejamos de rollos y nos ponemos al lío 😉

Te voy a explicar varias maneras de hacerlo, para que puedas escoger la que mejor te venga.

Personalizar la página 404 con Elementor Pro

Elementor Pro se ha convertido en el maquetador preferido de muchos usuarios de WordPress (incluido yo) para construir una web de arriba a abajo. Aquí puedes leer todas sus ventajas, por si no lo conoces todavía.

Si decides hacer tu web con Elementor Pro o ya la tienes hecha con él, será pan comido para ti configurar la página 404 de WordPress. Eso sí, necesitas la versión Pro, ya que la gratuita no lo permite hacer.

Si tu web no está hecha con Elementor y no tienes intención de utilizarlo, más abajo te doy otras opciones para ti 😉

Vamos allá.

Lo primero que tienes que hacer, es ir a la pestaña “Plantillas”, que está justo debajo de “Elementor”, y luego, hacer clic en “Añadir nueva”.

404 elementor

Selecciona el tipo de plantilla “Individual” y en post type, selecciona “Página 404”. Luego, ponle el nombre que quieras a la plantilla.

personalizar pagina 404 con elementor

Al hacer clic en “Crear plantilla”, pasará a la siguiente pantalla, donde podrás elegir algunos diseños predefinidos. Puedes elegir uno de ellos (ya sea para utilizarlo tal cual o para trabajar a partir de él) o cerrar la ventana y crear un diseño desde cero, del mismo modo que crearías cualquier otra página con Elementor, añadiendo cualquier elemento que quieras.

plantillas 404 elementor

Una vez hecho el diseño, haz clic en el botón verde “Publicar” y aparecerá un ventana para dónde te gustaría que se viera este diseño.

Si has creado la plantilla siguiendo estos pasos y has indicado al principio que se trataría de la plantilla para el error 404, ya vendrá seleccionado por defecto, tal y como ves en la captura de abajo.

guardar 404 elementor

Así que solo queda hacer clic en “Save & Close”, y a partir de entonces, la página 404 se mostrará con el diseño que acabas de crear.

Ejemplo de página 404 personalizada con Elementor

Como ejemplo de página 404 personalizada con Elementor, te dejo una captura de mi proyecto Webconómica (puedes ver más información aquí):

pagina 404 wordpress

Como ves, intento hacer que cualquier usuario que aterrice en una página que no existe, se interese por alguna de las webs que se ofrecen.

Para ver la página 404 en funcionamiento real, puedes entrar en la web de Webconómica y escribir cualquier cosa inventada después del “.com/”.

Personalizar el error 404 con Divi

Divi es uno de los temas de WordPress más populares y utilizados en todo el mundo (esta web está hecha con Divi). Aquí puedes ver información de interés sobre Divi, por si quieres echarle un ojo.

Desde su versión 4, Divi permite crear y personalizar de arriba a abajo una web, por lo que se merece un apartado explicando cómo crear una página 404 personalizada.

Para ello, tienes que ir a la pestaña “Divi – Generador de temas”, hacer clic en “Agregar nueva plantilla” y seleccionar “404 página”.

404 divi

Seguidamente, haz clic en “Añadir cuerpo personalizado”, y luego, en “Construir cuerpo personalizado”.

pagina 404 personalizada

A partir de aquí, el procedimiento es el mismo que cuando vas a crear cualquier página con Divi. Puedes elegir entre utilizar un diseño predefinido, clonar una página existente, o crear un diseño desde cero.

Si decides crear un diseño desde cero, puedes insertar los elementos que quieras a tu página 404, como si de una página normal se tratara.

Una vez terminado el diseño, haz clic en guardar los cambios, clic en el botón de cerrar el diseño (arriba a la derecha), y, una vez en la página de Divi Theme Builder de nuevo, clic en el botón de guardar cambios.

error 404 personalizado

Será al clicar en “Guardar cambios” cuando el diseño de la página 404 reemplace al que viene por defecto.

Ejemplo de página 404 personalizada con Divi

Para que veas un ejemplo de página de error 404 con Divi, te dejo una captura de esta misma web (lawebdetuvida.com):

pagina 404 personalizada con divi

Y para que veas la diferencia y lo increíblemente asquerosa que era esta página, te dejo una captura de cómo era el error 404 que venía por defecto en Divi, antes de personalizarlo:

404 divi por defecto

Es un buen cambio, ¿o no?

Configurar página 404 con 404page

En el caso de que no utilices y no tengas intención de utilizar ni Elementor ni Divi, te traigo otra opción para personalizar el error 404 con un plugin que puedes utilizar con cualquier tema de WordPress.

Se trata del plugin 404page, el cual puedes instalar en tu web como cualquier otro plugin.

Puedes encontrar las opciones del mismo en “Apariencia – 404 Error Page”. Verás que tiene tres pestañas: General, Advanced y Explainer Videos, que básicamente son tutoriales en inglés explicando el funcionamiento del plugin.

crear pagina 404 wordpress

Nos quedamos en la pestaña General por ahora, que tiene una única opción. Pero una única opción cojonuda, por qué no decirlo.

Y es que desde aquí puedes elegir qué página de tu web vas a utilizar para cuando aparezca el error 404.

Es decir, puedes crear una página en tu web del modo que sea (con el editor clásico de WordPress, con Gutenberg, con Visual Composer, o con el maquetador que utilices normalmente en tu web), y asignarla como página por defecto para el error 404.

Modificar archivo 404.php con código

Por último, traigo una opción para los más duros, para los que no queréis saber nada de plugins o maquetadores porque se os da bien programar y os lleváis bien con el código.

Esta opción consiste en editar directamente el archivo 404.php que viene en el tema que estés utilizando en la web, no importa cuál sea. Este archivo se encuentra en /wp-content/themes/tutemaactivo.

editar pagina 404 wordpress

Si eliges esta opción, te recomiendo copiar este archivo en un child theme, porque si no, los cambios que hagas se perderán cuando actualices el tema.

El archivo 404.php puede ser diferente en cada tema, y puede que no tenga nada que ver entre un tema y otro, por lo que lo mejor es que mires cómo está hecho el archivo 404.php de tu tema y lo modifiques según tus necesidades.

Creo que es obvio decirlo, pero escoge esta opción para personalizar el error 404 solo si sabes lo que estás haciendo, vaya a ser que la líes parda tocando lo que no debes.

Conclusión

Pues ya ves, cuatro maneras diferentes de personalizar la página de error 404. Si en tu web utilizas Elementor o Divi, céntrate en las opciones dedicadas a ello en cada una de las herramientas.

En caso contrario, elige una de las otras dos opciones, según tus conocimientos o ganas de pelearte con el código.

Sea cual sea tu elección, aprovecha la posibilidad para dejar una página de error 404 apañada que no deprima a los usuarios por no no haber encontrado lo que buscan, y si puedes aprovechar para enviarlos donde a ti te interese, mejor que mejor 🙂

Y tú, ¿ya has personalizado tu página 404?