Vamos a ver paso a paso cómo hacer una plantilla de página 404 (página no encontrada) con Divi y cómo asignarla para que WordPress la muestre cada vez que alguien ingresa a una entrada que ya no está disponible, o con una URL incorrecta.

Creamos la plantilla

Lo primero que tenemos que hacer es crear la plantilla de página 404 en el Generador de temas de Divi.

Para eso vamos a agregar una nueva plantilla.

A la nueva plantilla le asignamos la última opción del listado: 404 página.

Con ésto le estamos indicando a Divi que debe usar esta plantilla cuando el servidor devuelve un error de página no encontrada.

Después lo que yo voy a hacer en este caso es borrar de esta nueva plantilla la cabecera y el pie de página globales para que muestre una página sin encabezado, menús, ni pie de página.

Aclaro que ésto es totalmente opcional.

Además de borrarlos oculto estas áreas en la plantilla.

Y hacemos clic en Añadir cuerpo personalizado para comenzar a diseñar la página 404 de error de página no encontrada con Divi.

En las opciones que se despliegan hacemos clic de nuevo en Construir cuerpo personalizado.

Esto activa el constructor Divi para que podamos comenzar a diseñar nuestra plantilla de error 404 de página no encontrada.

Construimos el cuerpo de la plantilla

En este caso vamos a hacer clic en la opción Construir desde cero para poder crear una plantilla partiendo de la página en blanco. Pero también es una buena opción elegir un diseño de las plantillas de Divi y adaptarlo.

Ahora voy a mostrar cómo crear un modelo de página de error 404 que encontré en el blog de Divi.

Configuramos la sección

Lo primero que vamos a ver es la página en blanco con una sola sección, sin nada de contenido. Así que vamos antes que nada a los ajustes de la sección.

Dentro de los ajustes de la sección vamos a la pestaña Diseño para asignarle un separador a la base de la sección. Buscamos la sección Separador, luego la pestaña Base y elegimos el separador de la imagen.

Estilos del separador

• Estilo: ver en la imagen.
• Color: #ffee00
• Anchura del separador: 25vw (Escritorio), 77vw (Tableta), 90vw (Teléfono).
• Volteo (separador): Vertical.

Separación

• Relleno Superior: 4.6vw (Escritorio), 23vw (Tableta), 25vw (Teléfono).
• Relleno Base: 4.6vw (Escritorio), 13vw (Tableta), 11vw (Teléfono).

Insertamos una fila

A continuación vamos a insertar una fila de 1 columna dentro de la sección y le asignamos los siguientes estilos.

Tamaño

• Uso Personalizado del Canalón de Ancho: Sí.
• Espacio entre columnas: 1.
• Anchura (la primera opción): 100%.
• Anchura máxima: 100%.

Separación

• Relleno Superior: 2vw.
• Relleno Base: 2vw.

Eso es todo con los ajustes de esta fila. Ahora vamos a añadir contenido a nuestra página 404 de error de página no encontrada.

Módulo Texto 404

Dentro de la fila vamos a insertar un módulo Texto de Divi.

Dentro del módulo de texto yo coloqué el número 404 siguiendo el modelo, pero lógicamente podrías poner lo que quisieras.

Estilos del Texto

• Fuente: Monoton.
• Color del texto: #000000.
• Tamaño del texto: 24vw (Escritorio), 35vw (Tableta & Teléfono).
• Altura de línea: 1em.
• Alineación del texto: Centrado.

Módulo Texto para información

Debajo voy a insertar un segundo módulo de texto para explicar al usuario lo que está pasando. Por ejemplo: Lo sentimos, la página que estás buscando ya no existe.

Le asignamos los siguientes ajustes al segundo módulo de texto.

Estilos del Texto

• Fuente: Montserrat.
• Color del texto: #000000
• Tamaño del texto: 1.2vw (Escritorio), 2.6vw (Tableta), 3vw (Teléfono).
• Altura de línea: 1.8em.
• Alineación del texto: Centrado.

Separación

• Margen Superior: 2vw.
• Margen Inferior: 6vw.

Insertamos fila para enlaces

Debajo de la actual fila que ya tiene dos módulos de texto vamos a insertar una segunda fila para insertar unos enlaces que guíen al usuario hacia páginas que nosotros queramos. Por ejemplo la Home o Contacto.

Le asignamos los siguientes estilos a la segunda fila.

Tamaño

• Ancho: 32vw (Escritorio), 50vw (Tableta & Teléfono).
• Ancho máximo: 100%.

Separación

• Margen Superior: 7vw (Escritorio), 22vw (Tableta), 59vw (Teléfono).
• Relleno Superior: 0vw.
• Relleno Base: 0vw.

Una vez asignados los estilos a la fila vamos a añadir contenido.

Módulo Texto

Luego de configurar la fila salimos de los ajustes y le agregamos un módulo Texto de Divi.

Dentro del módulo de texto escribimos la palabra HOME (o lo que quieras poner) y un enlace hacia la página.

La idea es llevar al usuario a páginas del sitio donde pueda encontrar la información que necesita.

Configuramos la columna

Ahora vamos a ingresar nuevamente a los ajustes de la fila y vamos directo a los ajustes de la columna, con el ícono del engranaje que se puede ver en la siguiente imagen.

Fondo de la columna

• Color de Fondo: #FFFFFF.
• Color de Fondo Flotar: #fffa00.

Bordes de la columna

• Redondeo de esquinas: 20px (Todas las esquinas).

Sombra de la caja

• Estilo: la primera opción.
• Box Shadow Blur Strength: 50px.
• Color: rgba(0,0,0,0).
• Color Flotar: rgba(0,0,0,0.12).

Transformar

Definimos un porcentaje de transformación a la columna.

• Derecha: 100%.
• Base: 100%.
• Derecha Flotar: 110%.
• Base Flotar: 110%.

Con ésto logramos que la columna se agrande un 10% al pasar el mouse por encima.

Duplicamos la columna

Una vez que tenemos configurada la columna y con su módulo Texto insertado vamos a duplicarla para crear un segundo botón con los mismos estilos.

Así nos quedan ahora las dos columnas (botones) de nuestra página 404 de error de página no encontrada, para guiar al usuario hacia donde podamos ayudarlo.

Y por último modificamos tanto el texto como el enlace del módulo Texto de la segunda columna recién creada para enlazar a la página que queramos.

Guardar el diseño y probar

Hecho ésto ya tenemos concluida nuestra página 404 de error de página no encontrada hecha con Divi. Solo nos queda guardar los cambios y salir del constructor.

También es importante guardar los cambios en el Generador de plantillas siempre que crees una plantilla nueva o bien modifiques la asignación de una plantilla.

Y así es como nos queda nuestra plantillas de página 404 terminada.

Si probamos de ingresar a una página del sitio que sabemos que no existe ésto es lo que veremos.

Espero que te hayan gustado. Dejame debajo un comentario contándome que te parecieron estas características y posibilidades de Divi.

Ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.