Personalizar error 404 en WordPress con Divi

La aparición del error 404 en una web es fruto de no encontrar el contenido que el usuario está intentando localizar a través de una url concreta. Al personalizar el error 404 en WordPress con una página atractiva, evitarás que los usuarios abandonen a la primera de vista nuestra web y los buscadores nos penalicen con un alto porcentaje de rebote.

Personalizar en Divi el error 404

La última versión de Divi ha traído toda una revolución a lo que construir páginas se refiere, ya que permite utilizar los módulos del constructor para crear cualquier parte de la web, menús, cabeceras, contenidos, footers o barras laterales.

Pero lo más increíble de todo es que se pueden realizar diseños completamente diferentes de páginas o artículos concretos dentro de la misma web.

Hasta ahora había que conformarse con el aspecto general del tema que escogíamos en todo el sitio, pero eso cambia con Divi 4, y no sólo con el propio tema Divi, también utilizando el constructor en cualquier otro tema que no sea Divi en forma de plugin.

Una de esas posibilidades de personalización es la página de error 404 generada habitualmente por el servidor.

¿Por qué aparece el error 404?

El error 404 lo genera el servidor donde tenemos alojada la web para indicar que no se ha localizado el contenido y que por tanto no puede mostrarlo en pantalla.

Es más habitual de lo que parece y se da en situaciones tan habituales como:

• Una URL que ya no existe.
• Una URL que nunca existió.
• Una URL que ha cambiado.
• No se está escribiendo bien la URL.

Cualquiera de estas situaciones hará que aparezca la página de error 404 en WordPress o cualquier tipo de página web.

WordPress recibe la señal del servidor de no haber encontrado la página y muestra la página de error de plantilla del tema que esté instalado, generalmente en inglés y con información muy básica del error.

Cómo hacer una buena página 404

Cuando nos encontramos con un error en una web, solemos abandonar y buscar en otro sitio la información que buscamos, debemos intentar que esto no pase intentando conseguir la confianza del usuario.

• Elimina todo lo referente a fallos, borra la palabra error y los enormes números 404 (tan sólo es un código de indentificación del servidor).
• Explica brevemente por qué no ha podido encontrar la url, ha cambiado de lugar, contenido actualizado, se ha eliminado por quedar obsoleto... Pocos palabras y sin asustar.
• Genera la página en el idioma de la web para no crear confusión y no indicar que algo está a medias.
• Intenta reconducir al usuario a tu web, añadiendo enlaces a las secciones más importantes, a categorías generales donde pueda investigar lo que necesita o añadiendo un buscador para que pueda realizar una consulta.
• No recargues la página con contenido no relevante que pueda entenderse como un engañando, que ofrecemos una cosa que no tenemos. Recuerda que es una página genérica para todos los fallos de url y no de contenido.
• Se creativo y haz algo diferente que resulte simpático o agradable para convencer al usuario que siga navegando en la web.

Actualizar Divi a la última versión

Para realizar esta personalización necesitamos la versión 4 de Divi o superior, por lo que si no lo has hecho todavía, este es el momento, y si no estás suscrito, puedes hacerlo desde el siguiente enlace de afiliado con un pequeño descuento.

Comprar DIVI con un 10% de descuento

Si no estás muy convencido todavía puedes leer este artículo y descubrir si te interesa adquirir Divi, seguro que no te arrepentirás.

Generador de temas de Divi

Dentro de las opciones de Divi encontramos una pestaña llamada "Generador de temas", si sólo queremos usar Divi con las opciones de página por defecto no será necesario utilizar esta opción, pero estaremos desperdiciando una de las mejores actualizaciones de Divi.

Desde aquí podemos diseñar cualquier tipo de página con todos los módulos de Divi, pudiendo elegir en qué tipo de página, artículo o producto queremos replicarlo.

La primera casilla está destinada a configurar el aspecto general de la web, donde se pueden añadir los diseños globales que afectarán a todo do el sitio, si lo dejamos en blanco, Divi adoptará el aspecto predeterminado de siempre.

Aunque podemos añadir todos los diseños adicionales que queramos, vamos a centrarnos sólo en generar una página de error 404.

Diseño de una página de error 404 en WordPress con Divi

Dentro del "Generador de temas" picamos en "Agregar nueva plantilla" para empezar a crear el nuevo diseño.

En el menú desplegable que aparece, navegamos hasta la última opción y marcamos la casilla "404 página", a continuación picamos en "Crear plantilla".

Como se trata de una página sencilla en la que tenemos que conseguir redirigir al usuario dentro de la web, vamos a eliminar toda la información que distrae, como es el encabezado y el pie de página, marcamos las casillas de vista para ocultarlos.

Vamos a diseñar únicamente el "cuerpo personalzado".

Picamos en "Añadir cuerpo personalizado" para empezar a trabajar con los módulos. A partir de aquí no tenéis porque seguir mi diseño, podéis generar el contenido que más se adapte a vuestra web.

Estructura de la página 404

Aunque podemos añadir un diseño preconfigurado a la hora de empezar, o importar alguno de otra web, yo voy a partir de cero y empezar con un diseño en blanco.

La configuración de la página tendrá una sección de altura completa con una fila de dos columnas, de las cuales sólo utilizaré la columna de la izquierda para añadir la información necesaria.

CONFIGURACIÓN DE LA SECCIÓN:

En la sección añadiremos una imagen de fondo en la pestaña "Contenido" que cubra toda la página, independientemente del dispositivo en el que se muestre, menos en el teléfono, para que cargue más rápido y evitar un encuadre de la foto incorrecta.

• Fondo: Imagen de fondo tamaño aproximado de 1920px x 1080px en "Escritorio" y "Tableta", foto eliminada en "Teléfono".
• Usar efecto de paralaje: No.
• Imagen de fondo de tamaño: Cubierta.
• Imagen de fondo de la posición: Arriba a la derecha.
• Repetición de la imagen de fondo: No repetir.

Para conseguir que la sección cubra toda la altura hay que abrir la pestaña "Diseño" y en el apartado "Tamaño" colocar el valor "100vh" a la altura.

CONFIGURACIÓN DE LOS MÓDULOS:

Aquí puede haber muchas variaciones, pero lo que no puede faltar es el logotipo o marca de la web y un texto original explicando el motivo de la página.

Los módulos y las opciones que añadiré a continuación son:

• Módulo de imagen para el logo.
  • CONTENIDO:
    • Imagen: Selección de la biblioteca.
    • Enlace: A la página de inicio.
  • DISEÑO:
    • Tamaño - Altura: 130px
• Módulo de texto para avisar del error 404 con un texto original que invite al usuario a leer y seguir en la web.
  • CONTENIDO:
    • Texto: Un título H2, un subtítulo H3 y un párrafo.
  • DISEÑO:
    • Texto - Tamaño del texto: 16px.
    • Texto - Altura de línea: 2em.
    • Texto - Alineación del texto: Centrado.
    • Texto de subtítulo - H2: Fuente Amarante, centrado, negro, 40px.
    • Texto de subtítulo - H3: Fuente por defecto, centrado, verde, 20px.
• Módulo de búsqueda (sin cambios).
• Módulo separador (sin cambios).
• Módulo de texto con enlaces a páginas más habituales de la web.
  • CONTENIDO:
    • Texto: Enlaces en párrafo tipo "anchortext".
  • DISEÑO:
    • Texto - Tamaño de texto 14px.
    • Texto - Enlaces: Color verde.
    • Separación: Margen superior a -30px.

Aunque no es necesario avisar que se trata de un error 404, ya que explicamos el motivo en la página, en algunas ocasiones puede que nos lo exijan o nos interese mencionarlo en algún momento.

Página adaptable a dispositivos

El último paso es ir cambiando el formato en el constructor y colocar, mover o ajustar los diferentes elementos para que se visualice correctamente en cualquier medio.