Theme Builder de Divi y las opciones de diseño incorporadas han abierto un montón de nuevas puertas. Ahora más que nunca, ahora puede personalizar cada página en 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 utilizaremos las opciones integradas de Divi y también podrá descargar el archivo JSON de plantilla de forma gratuita. Esperamos que este tutorial inspire a ser creativo con su próximo diseño de 404 páginas.

¡Hagámoslo!

Avance

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

Escritorio

Plantilla de página 404

Móvil

Plantilla de página 404

 

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 la configuración de Divi.

Plantilla de página 404

Crear nueva plantilla

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

  • Uso en: página 404

Plantilla de página 404

Plantilla de página 404

Ocultar á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.

Plantilla de página 404

Construir cuerpo global

Una vez que haya realizado todos los pasos anteriores, puede comenzar a construir el cuerpo de la página 404 seleccionando ‘Construir cuerpo personalizado’.

Plantilla de página 404

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

Plantilla de página 404

Divisor inferior

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

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

Plantilla de página 404

Espaciado

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

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

Plantilla de página 404

Agregar fila # 1

Estructura de columna

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

Plantilla de página 404

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 personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

Plantilla de página 404

Espaciado

Modifique los valores de relleno superior e inferior de la fila a continuación.

  • Relleno superior: 2vw
  • Relleno inferior: 2vw

Plantilla de página 404

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.

Plantilla de página 404

Configuraciones de texto

Pase a la pestaña de diseño del módulo y cambie la configuración de 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

Plantilla de página 404

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

Agregar contenido

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

Plantilla de página 404

Configuraciones 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

Plantilla de página 404

Espaciado

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

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

Plantilla de página 404

Agregar fila # 2

Estructura de columna

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

Plantilla de página 404

Dimensionamiento

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

  • Ancho: 32vw (escritorio), 50vw (tableta y teléfono)
  • Ancho Máx .: 100%

Plantilla de página 404

Espaciado

Modifique la configuración de espaciado también.

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

Plantilla de página 404

Configuración de columna 1 y 2

Color de fondo predeterminado

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

  • Color de fondo: #FFFFFF

Plantilla de página 404

Pase el color de fondo

Modifique el color de fondo al pasar el mouse.

  • Color de fondo: # fffa00

Plantilla de página 404

Frontera

Agregue algunas esquinas redondeadas también.

  • Esquinas redondeadas: 20px (todas las esquinas)

Plantilla de página 404

Sombra de caja predeterminada

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

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

Plantilla de página 404

Hover Box Shadow

Modifique el color de la sombra al pasar el mouse.

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

Plantilla de página 404

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 ‘100%’.

  • Derecha: 100%
  • Inferior: 100%

Plantilla de página 404

Escala de transformación de desplazamiento

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

  • Derecha: 110%
  • Inferior: 110%

Plantilla de página 404

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 el contenido de algunos párrafos de su elección.

Plantilla de página 404

Agregar enlace

Agregue un enlace al módulo siguiente.

  • URL del enlace del módulo: #
  • Módulo de enlace de destino: en la misma ventana

Plantilla de página 404

Configuraciones de texto

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

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

Plantilla de página 404

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)

Plantilla de página 404

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.

Plantilla de página 404

Cambiar contenido

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

Plantilla de página 404

Cambiar enlace

Cambia el enlace también.

Plantilla de página 404

3. Guardar los cambios del generador de temas

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

Plantilla de página 404

Plantilla de página 404

Avance

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

Escritorio

Plantilla de página 404

Móvil

Plantilla de página 404

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!