Divi: cómo mostrar el módulo de encabezado de ancho completo en pantalla completa

¿Desea mostrar el módulo Divi Fullwidth Header a pantalla completa?

Los encabezados de pantalla completa ocupan toda la pantalla, independientemente del tamaño de pantalla del visitante. Esto es excelente para captar la atención de los usuarios. Afortunadamente, es fácil crear un encabezado de pantalla completa con el módulo Encabezado de ancho completo de divi.

En este artículo, le mostraremos cómo crear un encabezado de ancho completo, personalizarlo y mostrarlo en pantalla completa. Puede usar este enfoque para crear cualquier sección principal de pantalla completa para sus páginas.

Vamos a empezar.

vista

Veamos una vista previa de lo que diseñaremos en este tutorial.

oficina

tableta

Pantalla completa del módulo Divi Fullwidth Header

Teléfono

Cómo hacer que su encabezado Divi Fullwidth sea un encabezado de pantalla completa

Comience agregando una sección de ancho completo a la página en la que está trabajando.

Luego agrega un Módulo de encabezado de ancho completo a la sección de ancho completo.

Se abre la configuración del módulo. Seleccionar pestaña Diseño. Active la opción llamada Hacer pantalla completa

Ahora tenemos un encabezado de pantalla completa. Es tan simple como eso.

Habilitar icono de desplazamiento

También podemos agregar un botón que le indique al usuario que se desplace hacia abajo. Sin embargo, debemos habilitarlo. Este botón siempre está visible en la opción de pantalla completa. La opción de encabezado de pantalla completa siempre coincide con la altura de la pantalla del visitante.

Mostrar botón de desplazamiento hacia abajo: SÍ

Ejemplo de encabezado de pantalla completa de ancho completo Divi

Parámetros del módulo de encabezado de ancho completo

Estos son los pasos para cada sección de la configuración del módulo Encabezado de ancho completo.

Lea también: Divi: Cómo combinar máscaras de fondo y separadores

textos

Todo primero, agrega el texto que será visible en el encabezado de ancho completo. Esto incluye el título, subtítulo, contenido y el texto del botón.

Título: Crear tu blog con Divi
Subtítulo: Blogpascher
Burrón #1: Resumen
Botón #2: Horario
Cuerpo: (predeterminado)

Imágenes

Después, añade una foto. Esto se muestra en el lado derecho del encabezado de ancho completo, desplazando el texto hacia la izquierda.

Imagen de encabezado: tu elección

Fondo

Desplazarse hasta Antecedentes y establezca el color en #f6f5ee.

Color de fondo: #f6f5ee

Provisión

A continuación, navegue a la pestaña Diseño.

Hacer pantalla completa: SÍ

Icono de desplazamiento hacia abajo

Mostrar botón de desplazamiento hacia abajo: SÍ
Color del icono de desplazamiento hacia abajo: #000000 (Escritorio y tableta), #ffffff (Teléfono)
Tamaño del icono de desplazamiento hacia abajo: 70 px (escritorio), 60 px (tableta), 50 px (teléfono)

Texto del título

A continuación ajustaremos el texto del título.

Nivel de título: H1
Fuente: Inter
Peso de fuente: negrita
Alineación de texto: Centro
Color del texto: #000000

Tamaño del texto del título: 75 px (escritorio), 40 px (tableta), 24 px (teléfono)
Altura de la línea del título: 1.2 em

Texto de descripción

Luego, desplácese hacia abajo hasta Cuerpo de texto.

Fuente: Open Sans
Alineación: Izquierda
Color: #000000

Tamaño del texto: 16 px (escritorio), 15 px (tableta), 14 px (teléfono)
Altura de la línea: 1.8 em

Subtítulos

Luego, desplácese hacia abajo hasta Texto del subtítulo.

Fuente: Inter
Peso de fuente: Negrita
Estilo: TT
Alineación: Centro
Color: #ff5a17

Tamaño: 14px
Espaciado entre letras: 1px
Altura de la línea: 1.8 em

Botón 1

Luego, desplácese hacia abajo hasta Botón uno.

Usar estilos personalizados para el botón: SÍ
Tamaño del texto: 20 px (escritorio), 18 px (tableta), 16 px (teléfono)
Color del texto: #000000

Color de fondo: #ffffff
Ancho del borde: 0px
Radio del borde: 0px

Fuente: Inter
Peso de fuente: Negrita

Icono: tu elección
Color del icono: #000000
Colocación: Derecha
Mostrar solo el ícono al pasar el mouse sobre el botón uno: NO

Finalmente, desplácese hacia abajo hasta las opciones Relleno del botón uno.

Relleno :
- Escritorio: 20 px (superior e inferior), 40 px (izquierda y derecha)
- Tableta: 16 px (arriba y abajo), 40 px (izquierda y derecha)
- Teléfono: 12 px (arriba y abajo), 40 px (izquierda y derecha)

Botón 2

Finalmente, desplácese hacia abajo hasta Botón dos.

Usar estilos personalizados para el botón dos: Sí
Tamaño del texto: 20 px (escritorio), 18 px (tableta), 16 px (teléfono)
Color del texto: #ffffff

Color de fondo: #ff5a17
Ancho del borde: 0 px
Radio del borde: 0px

Fuente: Inter
Peso de fuente: Negrita

Elige tu icono favorito.

Icono: tu elección
Color del icono: #000000
Colocación: izquierda
Mostrar solo el ícono al pasar el mouse sobre el botón dos: NO

Finalmente, desplácese hacia abajo hasta las opciones. Relleno del botón dos.

Relleno :
- Escritorio: 20 px (superior e inferior), 40 px (izquierda y derecha)
- Tableta: 16 px (arriba y abajo), 40 px (izquierda y derecha)
- Teléfono: 12 px (arriba y abajo), 40 px (izquierda y derecha)