Divi , su Theme Builder y las opciones de diseño incorporadas 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 hacer que se aplique a su sitio web de inmediato. Solo usaremos las opciones integradas de Divi y también podrá descargar el archivo JSON de la 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!
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 poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Suscríbete a nuestro canal de Youtube
1. Vaya a Divi Theme Builder y cree una nueva plantilla
Ir al Creador de temas Divi
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
Continúe ocultando el encabezado y el pie de página personalizados de su página 404 haciendo clic en el ícono del ojo.
Construir cuerpo global
Una vez que haya realizado todos los pasos anteriores, puede comenzar a crear el cuerpo de la página 404 seleccionando ‘Crear cuerpo personalizado’.
2. Comience a construir el cuerpo de la página 404
Agregar nueva sección
Color de fondo
Una vez que esté dentro del editor de plantillas, notará una sección en su página. Abra esta sección y agregue un color de fondo blanco.
- Color de fondo: #FFFFFF
Divisor inferior
Pase 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)
- Voltear el divisor: Vertical
- Disposición de los divisores: Debajo del contenido de la sección
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)
Añadir Fila #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 columna:
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 del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Modifique los valores de relleno superior e inferior de la fila a continuación.
- Acolchado superior: 2vw
- Acolchado inferior: 2vw
Agregar 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
Pase a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:
- Fuente de texto: Monótono
- Color del texto: #000000
- Tamaño del texto: 24vw (escritorio), 35vw (tableta y teléfono)
- Altura de línea de texto: 1em
- Alineación de texto: Centro
Agregue el Módulo de Texto #2 a la Columna
Agregar contenido
Pasamos 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 del 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,8 em
- 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
Añadir Fila #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 filas, puede abrir cada columna individualmente y realizar algunos cambios, comenzando con el color de fondo.
- Color de fondo: #FFFFFF
Color de fondo flotante
Modifique el color de fondo al pasar el mouse.
- Color de fondo: #fffa00
Borde
Agregue algunas esquinas redondeadas también.
- 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 cuadro: 50px
- Color de sombra: rgba(0,0,0,0)
Sombra de caja flotante
Modifique 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 permanezcan en ‘100%’.
- Derecha: 100%
- Abajo: 100%
Escala de transformación de desplazamiento
Cambie los valores de la escala de transformación al pasar el mouse:
- Derecha: 110%
- Fondo: 110%
Agregar módulo de texto a la columna 1
Agregar contenido
Una vez que haya completado la configuración de fila y 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
Pase a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:
- Fuente del texto: Montserrat
- Peso de fuente de texto: Negrita
- Estilo de fuente de texto: Mayúsculas
- Color del texto: #000000
- Tamaño de texto: 0.8vw (Escritorio), 2vw (Tableta), 3vw (Teléfono)
- Espaciado entre letras de texto: 1px
- Altura de la línea de texto: 1,8 em
- 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.
- Relleno superior: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)
- Acolchado inferior: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)
Clonar módulo de texto y colocar 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
Cambia el enlace también.
3. Guardar cambios en el generador 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 generador 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és 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 regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.