Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 901.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62.

¿Le gustaría mostrar el módulo de encabezado de ancho completo de divi pantalla completa ?

Los encabezados de pantalla completa ocupan toda la pantalla, independientemente del tamaño de la pantalla del visitante. Esto es genial 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 diga al usuario que se desplace hacia abajo. Sin embargo, necesitamos 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.

Cree fácilmente su sitio web con Elementor

Elementor te permite crear Fácil y Gratis cualquier sitio web o diseño de blog con un aspecto profesional. Deja de pagar mucho por un sitio web que puedes hacer tú mismo.

  • 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, el subtítulo, el contenido y el texto del botón.

  • Título: Crea 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

¿Quieres vender tus productos en internet?

Descarga WooCommerce gratis, los mejores plugins de comercio electrónico para vender tus productos físicos y digitales en WordPress y crea fácilmente tu tienda online. Perfecto para principiantes.

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)

Resultados finales

Así es como se ve nuestro encabezado de ancho completo en computadoras de escritorio, tabletas y teléfonos.

También puedes consultar: Divi: cómo usar los efectos de sombra y desplazamiento para crear contenido interactivo

oficina

Pantalla completa del módulo Divi Fullwidth Header

tableta

Pantalla completa del módulo Divi Fullwidth Header

Teléfono

Pantalla completa del módulo Divi Fullwidth Header

Descarga DIVI ahora!!!

Conclusión

Aquí está nuestro vistazo a cómo crear un encabezado de ancho completo con su módulo Divi Fullwidth Header.

El proceso es simple y se ve muy bien en cualquier dispositivo. Agregando el botón Desplazarse hacia abajo es una excelente imagen que les dice a los usuarios que pueden desplazarse.

Diseñar un encabezado de pantalla completa es similar a diseñar una sección principal. Seguir algunas pautas simples puede ayudarlo a crear increíbles encabezados de pantalla completa con el módulo de encabezado de ancho completo de Divi.

Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo

También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.

...

%d bloggers les gusta esta página: