Cómo crear una plantilla de página 404 con el generador de temas de Divi

Theme Builder de Divi y las opciones de diseño integradas han abierto un montón de nuevas puertas. Más que nunca, ahora puede personalizar cada página a la que llegan sus clientes. Esto incluye configurar una página 404. En este tutorial, le mostraremos cómo crear una hermosa plantilla de página 404 y aplicarla a su sitio web de inmediato. Solo usaremos las opciones integradas de Divi y también podrá descargar el archivo JSON de plantilla de forma gratuita. Esperamos que este tutorial lo inspire a ser creativo con su próximo diseño de página 404.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue la plantilla de la página 404 GRATIS

Para tener en sus manos la plantilla de página 404 gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Suscríbete a nuestro canal de Youtube

1. Vaya a Divi Theme Builder y cree una nueva plantilla

Ir a Divi Theme Builder

Para comenzar a crear la plantilla de página 404, vaya a Divi Theme Builder en su configuración de Divi.

Crear nueva plantilla

Haga clic en 'Agregar nueva plantilla' y configure una nueva plantilla para su página 404.

• Usar en: página 404

Ocultar el área de encabezado y pie de página

Continúe ocultando el encabezado y pie de página personalizados de su página 404 haciendo clic en el icono del ojo.

Construir cuerpo global

Una vez que haya pasado por todos los pasos anteriores, puede comenzar a construir el cuerpo de la página 404 seleccionando 'Crear cuerpo personalizado'.

2. Comience a compilar el cuerpo de la página 404

Agregar nueva sección

Color de fondo

Una vez que esté dentro del editor de plantillas, verá una sección en su página. Abra esta sección y agregue un color de fondo blanco.

• Color de fondo: #FFFFFF

Divisor inferior

Vaya a la pestaña de diseño de la sección y agregue un divisor inferior:

• Estilo de divisor: Buscar en la lista
• Color del divisor: # ffee00
• Altura del divisor: 25vw (escritorio), 77vw (tableta), 90vw (teléfono)
• Flip divisor: Vertical
• Disposición del divisor: contenido de la sección inferior

Espaciado

A continuación, agregue algunos valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior: 4.6vw (escritorio), 23vw (tableta), 25vw (teléfono)
• Acolchado inferior: 4.6vw (escritorio), 13vw (tableta), 11vw (teléfono)

Agregar fila n. ° 1

Estructura de la columna

Una vez que haya completado la configuración de la sección, puede agregar la primera fila. Elija la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

A continuación, modifique los valores de relleno superior e inferior de la fila.

• Acolchado superior: 2vw
• Acolchado inferior: 2vw

Agregar el módulo de texto 1 a la columna

Agregar contenido

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitaremos es un módulo de texto. Inserte algún contenido de párrafo de su elección.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Monoton
• Color del texto: # 000000
• Tamaño del texto: 24vw (escritorio), 35vw (tableta y teléfono)
• Altura de la línea de texto: 1em
• Alineación de texto: centro

Agregar el módulo de texto n. ° 2 a la columna

Agregar contenido

Pasemos al siguiente módulo, que es otro módulo de texto. Agregue algún contenido de su elección.

Configuración de texto

Cambie la configuración de texto del módulo en consecuencia:

• Fuente de texto: Montserrat
• Color del texto: # 000000
• Tamaño del texto: 1.2vw (escritorio), 2.6vw (tableta), 3vw (teléfono)
• Altura de la línea de texto: 1.8em
• Alineación de texto: centro

Espaciado

Complete la configuración del módulo agregando algunos márgenes superior e inferior personalizados.

• Margen superior: 2vw
• Margen inferior: 6vw

Agregar fila n. ° 2

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de la fila y ajuste la configuración de tamaño de la siguiente manera:

• Ancho: 32vw (escritorio), 50vw (tableta y teléfono)
• Ancho máximo: 100%

Espaciado

Modifique también la configuración de espaciado.

• Margen superior: 7vw (escritorio), 22vw (tableta), 59vw (teléfono)
• Acolchado superior: 0vw
• Acolchado inferior: 0vw

Configuración de las columnas 1 y 2

Color de fondo predeterminado

Una vez que haya completado la configuración general de la fila, puede abrir cada columna individualmente y realizar algunos cambios, comenzando con el color de fondo.

• Color de fondo: #FFFFFF

Colocar el cursor sobre el color de fondo

Modifica el color de fondo al pasar el mouse.

• Color de fondo: # fffa00

Frontera

Agrega también algunas esquinas redondeadas.

• Esquinas redondeadas: 20px (todas las esquinas)

Sombra de cuadro predeterminada

Pase a la configuración de la sombra del cuadro y aplique los siguientes cambios:

• Fuerza de desenfoque de sombra de caja: 50px
• Color de sombra: rgba (0,0,0,0)

Sombra de caja flotante

Modifica el color de la sombra al pasar el mouse.

• Color de sombra: rgba (0,0,0,0.12)

Escala de transformación predeterminada

Luego, vaya a la configuración de escala de transformación y asegúrese de que los valores predeterminados sigan siendo '100%'.

• Derecha: 100%
• Inferior: 100%

Escala de transformación de desplazamiento

Cambie los valores de escala de transformación al pasar el mouse:

• Derecha: 110%
• Inferior: 110%

Agregar módulo de texto a la columna 1

Agregar contenido

Una vez que haya completado la configuración de la fila y la columna, agregue un módulo de texto a la columna 1 con algún contenido de párrafo de su elección.

Añadir enlace

Agregue un enlace al módulo a continuación.

• URL del enlace del módulo: #
• Destino del enlace del módulo: en la misma ventana

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Montserrat
• Peso de la fuente del texto: negrita
• Estilo de fuente de texto: mayúsculas
• Color del texto: # 000000
• Tamaño del texto: 0.8vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Espaciado de letras de texto: 1px
• Altura de la línea de texto: 1.8em
• Alineación de texto: centro

Espaciado

Luego, vaya a la configuración de espaciado y aplique algunos valores de relleno superior e inferior personalizados en diferentes tamaños de pantalla.

• Acolchado superior: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)
• Acolchado inferior: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)

Clonar el módulo de texto y colocar el duplicado en la columna 2

Una vez que haya completado el Módulo de texto y todas sus configuraciones, puede clonar todo el módulo y colocar el duplicado en la columna 2.

Cambiar contenido

Asegúrese de cambiar el contenido del módulo duplicado.

Cambiar enlace

Cambie el enlace también.

3. Guarde los cambios en el Creador de temas

Una vez que haya terminado su diseño, puede guardar todas las configuraciones de la plantilla. ¡Eso es todo!

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo configurar y crear una plantilla de página 404. El creador de temas de Divi y las opciones de diseño integradas le permiten tocar cada página de su sitio web utilizando plantillas personalizadas. ¡Esperamos que esté disfrutando de todos los tutoriales de Divi Theme Builder! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.