El Módulo de Encabezado de Ancho Completo de Divi

El Módulo de Encabezado de Ancho Completo de Divi

Cómo agregar, configurar y personalizar el módulo de encabezado de ancho completo de Divi.



El Módulo de Encabezado de Ancho Completo de Divi es versátil y puede usarse en todo el diseño de tu sitio web de muchas maneras.

Ejemplo 1: Puedes usar este módulo en una plantilla de página para entradas, proyectos y páginas para mostrar un título dinámico de la publicación.

Ejemplo 2: Puedes usarlo como un elemento de diseño promocional para resaltar una página importante en tu sitio web, un obsequio descargable, promocionar un podcast y más.

Este módulo puede mostrar un título, un subtítulo, texto principal, dos imágenes, un ícono y dos botones en línea (uno al lado del otro).

Nota: Para usar el Módulo de Encabezado de Ancho Completo, primero debes agregar una Sección de Ancho Completo.

En este documento, demostraremos cómo usar el Módulo de Encabezado de Ancho Completo en un diseño de página de inicio para promocionar un servicio de suscripción de té para una Tienda de Té.

Ejemplo del Módulo de Encabezado de Ancho Completo de Divi

Ver una demostración en vivo de este módulo

Example of the Divi Fullwidth Header Module

Cómo agregar el Módulo de Encabezado de Ancho Completo de Divi a tu página

  • Agrega una página nueva o edita una página existente.

  • Por defecto, el Editor Estándar Gutenberg se carga cada vez que se agrega una nueva entrada o página en WordPress.

  • Haz clic en el botón morado debajo del título de la página. Usa el Constructor Divi.

Cómo agregar el Módulo de Encabezado de Ancho Completo de Divi a tu página

  • Al hacer clic, la página se recargará con el Constructor Visual Divi.

How To Add The Divi Fullwidth Header Module To Your Page

Al recargar la página, verás tres opciones:
  • Construir desde cero
    Esta opción carga el Constructor Divi con un diseño de página en blanco. Elige esta opción si quieres empezar tu diseño desde cero.

  • Elegir un diseño prediseñado
    Esta opción te permite elegir entre nuestra gran biblioteca de diseños Divi prediseñados. Puedes elegir diseños prediseñados por Divi, que hayas creado y guardado en tu Biblioteca Divi, y páginas existentes en tu sitio que puedas clonar.

  • Construir con IA
    Esta opción te permite crear un diseño completo de página usando Divi IA. Usando tu texto de entrada e información sobre tu sitio, puedes crear el esquema perfecto de página, luego construirlo y llenarlo con contenido e imágenes, dándole vida en poco tiempo.

Divi Page Flow options

Agregar el Módulo de Encabezado de Ancho Completo de Divi

  • Cuando cargas el Constructor Visual, Divi añade automáticamente una Sección.

  • Haz clic en el ícono verde + para insertar una Fila.

  • Haz clic en el ícono gris + dentro de la Fila para abrir la Biblioteca de Módulos Divi, que contiene todos los módulos incluidos con el tema Divi.

  • Encuentra el módulo Encabezado de Ancho Completo y haz clic en él para cargar el módulo.
    La biblioteca de módulos también es buscable. Escribe el nombre del módulo que quieres en la barra de búsqueda en la parte superior.

Add the Divi Fullwidth Header Module

Todas las opciones del Módulo de Encabezado de Ancho Completo explicadas

  • Los ajustes aparecen automáticamente una vez que has añadido el módulo de Encabezado de Ancho Completo. Aquí es donde se configuran el contenido y los estilos de diseño de este módulo. Estos ajustes están organizados en tres grupos a través de las pestañas en la parte superior del módulo: Contenido, Diseño y Avanzado.

All Divi Fullwidth Header Module Options Explained

Pestaña Contenido

Dentro de esta pestaña, encontrarás las opciones de contenido disponibles para el módulo de Encabezado de Ancho Completo.

Ajustes de la pestaña Contenido del Módulo de Encabezado de Ancho Completo de Divi

Divi Fullwidth Header Module Content Tab settings

Texto

Aquí puedes editar el contenido de texto para el módulo de Encabezado de Ancho Completo.
  • Título - Escribe el título del encabezado aquí. Si no quieres que se muestre un encabezado, deja este campo vacío.

  • Subtítulo - Escribe el subtítulo aquí. Déjalo vacío si no quieres que se muestre subtítulo.

  • Botón #1 - Escribe el texto del botón #1 aquí. Déjalo vacío si no quieres que se muestre el botón. Puedes añadir la URL para el botón en la sección de Enlace de los ajustes del módulo.

  • Botón #2 - Escribe el texto del botón #2 aquí. Déjalo vacío si no quieres que se muestre el botón. Puedes añadir la URL para el botón en la sección de Enlace de los ajustes del módulo.

  • Cuerpo - Escribe el texto principal aquí.

Ajustes de texto del Módulo de Encabezado de Ancho Completo de Divi

Divi Fullwidth Header Module Text settings

Imágenes

Este módulo puede mostrar dos imágenes. Si no quieres añadir imágenes al módulo, deja estos campos vacíos.
  • Imagen de Logo - Para agregar una imagen de logo, haz clic en el ícono gris + para abrir la Biblioteca de Medios de WordPress. Elige una foto de tu biblioteca o sube una nueva. Haz clic en el botón azul “Subir una imagen” en la esquina inferior derecha para añadir la imagen al módulo.

  • Imagen de Encabezado - Para agregar una imagen de encabezado, haz clic en el ícono gris + para abrir la Biblioteca de Medios de WordPress. Elige una foto de tu biblioteca o sube una nueva. Haz clic en el botón azul “Subir una imagen” en la esquina inferior derecha para añadir la imagen al módulo.

Divi Fullwidth Header Module Images settings

Enlace

Aquí puedes añadir enlaces para los botones del módulo y aplicar un enlace a todo el módulo.
  • URL del enlace del Botón #1 - Pega la URL para el botón #1 aquí. Si se deja vacío, el botón no aparecerá.

  • URL del enlace del Botón #2 - Pega la URL para el botón #2 aquí. Si se deja vacío, el botón no aparecerá.

  • URL del enlace del Módulo - Pega la URL que quieres aplicar a todo el módulo aquí. Esto hace que todo el módulo sea clickeable y al hacer clic llevará a los visitantes a la URL pegada aquí.

  • Objetivo del enlace del Módulo - Definir el objetivo del enlace determina si el enlace, al hacer clic, se abre en una nueva pestaña o en la misma ventana.

    • En la misma ventana - si quieres que el enlace abra en la misma ventana

    • En una pestaña nueva - si quieres que el enlace abra en una pestaña nueva.

Divi Fullwidth Header Module Link settings

Fondo

En el grupo de opciones de Fondo, se pueden configurar las siguientes opciones:
  • Color de fondo

  • Degradado de fondo

  • Imagen de fondo

  • Video de fondo

  • Patrón de fondo

  • Máscara de fondo

Cómo agregar un color de fondo

  • Haz clic en la primera pestaña, el ícono del Balde de pintura.

  • Haz clic en Añadir color de fondo y elige de la paleta de colores de tu sitio, o usa el ícono cuentagotas para seleccionar un nuevo color.

Divi Fullwidth Header Module Background Color settings

Cómo agregar un degradado de fondo

  • Haz clic en la segunda pestaña, el ícono de Degradado.

  • Haz clic en Añadir degradado de fondo.

  • Para cambiar los colores del degradado, haz clic en los puntos de parada del degradado y selecciona un color de la paleta de colores de tu sitio o usa el ícono cuentagotas para elegir un color nuevo. Los puntos de parada permiten agregar más colores al degradado. Haz clic en cualquier parte de la barra deslizante para agregar un nuevo punto.

Opciones de degradado de fondo

  • Tipo de degradado - Puedes cambiar el tipo de degradado haciendo clic en el menú desplegable y seleccionando el que desees.

  • Dirección del degradado - Puedes cambiar la dirección del degradado arrastrando la barra deslizante o escribiendo un valor numérico.

  • Repetir degradado - Activa esta opción si quieres que el degradado se repita.

  • Unidad de degradado - La unidad de degradado cambia cómo se calculan los puntos de parada. Selecciona el menú para cambiar la unidad.

  • Colocar degradado sobre imagen de fondo - Si se aplica una imagen de fondo, puedes colocar el degradado sobre la imagen activando esta opción.

Divi Fullwidth Header Module Background Gradient settings

Cómo agregar una imagen de fondo

  • Haz clic en la tercera pestaña, el ícono de Imagen.

  • Haz clic en el ícono gris + para abrir la Biblioteca de Medios, donde puedes seleccionar una foto ya subida o subir una nueva.

Opciones de imagen de fondo

  • Usar efecto Parallax - Para aplicar un efecto parallax a la imagen (donde la imagen se desplaza más rápido que el contenido en primer plano, creando la ilusión de un efecto 3D), activa esta opción. Por defecto, está desactivada.

  • Tamaño de imagen de fondo - Elige el tamaño de tu imagen de fondo seleccionando una opción del menú desplegable.

  • Posición de imagen de fondo - Elige la posición de la imagen de fondo seleccionando una opción del menú desplegable.

  • Repetición de imagen de fondo - Elige si y cómo se repite la imagen de fondo seleccionando una opción del menú desplegable.

  • Mezcla de imagen de fondo - Elige cómo se mezcla la imagen de fondo con otras capas del módulo seleccionando una opción del menú desplegable.

Divi Fullwidth Header Module Background Image settings

Cómo agregar un video de fondo

  • Haz clic en la cuarta pestaña, el ícono de Video.

  • Haz clic en el ícono gris + para abrir la Biblioteca de Medios, donde puedes seleccionar un video ya subido o subir uno nuevo.

Mp4 vs WebM - Recomendamos subir ambas versiones, mp4 y webm, porque no todos los navegadores soportan el formato WebM. Subir ambos formatos asegura que el video se reproduzca en todos los dispositivos y navegadores.

  • Ancho del video de fondo - Define el ancho del video escribiendo un valor numérico.

  • Alto del video de fondo - Define el alto del video escribiendo un valor numérico.

  • Pausar video cuando otro video se reproduzca - Si quieres que el video de fondo se pause cuando otro video esté en reproducción, activa esta opción. Por defecto, el video se pausa cuando no está visible. Si quieres que continúe reproduciéndose, desactiva esta opción.

Divi Fullwidth Header Module Background Video settings

  • Cómo agregar un patrón de fondo

  1. Haz clic en la quinta pestaña, el ícono de patrón
  2. Haz clic en Agregar patrón de fondo
  3. Elige el tipo de patrón que deseas en el menú desplegable

Opciones de patrón de fondo

  • Color del patrón - Selecciona el color del patrón desde la paleta de colores de tu sitio o usa el ícono cuentagotas para elegir un color nuevo.

  • Transformación del patrón - Aquí puedes transformar el patrón horizontalmente, verticalmente, rotarlo o invertirlo.

  • Tamaño del patrón - Aquí puedes seleccionar el tamaño del patrón: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán las opciones de ancho y alto del patrón. Arrastra el control deslizante o escribe un valor numérico para definir esas opciones.

  • Origen de repetición del patrón - Aquí puedes seleccionar el origen desde donde se repite el patrón.

  • Desplazamiento horizontal y vertical del patrón - También puedes ajustar los desplazamientos horizontal y vertical del patrón.

  • Repetición del patrón - Aquí puedes elegir cómo se repite el patrón: horizontal, vertical, y más.

  • Modo de fusión del patrón - Define cómo la capa del patrón interactúa con las capas debajo de ella. Selecciona uno de los 16 modos de fusión disponibles en el menú desplegable.

Divi Fullwidth Header Module Background Pattern settings

Cómo agregar una máscara de fondo

  1. Haz clic en la sexta pestaña, el ícono de máscara
  2. Haz clic en Agregar máscara de fondo
  3. Selecciona el tipo de máscara que deseas en el menú desplegable

Opciones de máscara de fondo

  • Color de la máscara - Elige el color de la máscara desde la paleta de colores de tu sitio o usa el cuentagotas para un nuevo color.

  • Transformación de la máscara - Aquí puedes transformar la máscara horizontal o verticalmente, rotarla o invertirla.

  • Relación de aspecto de la máscara - Aquí puedes definir la proporción entre el ancho y alto de la máscara.

  • Tamaño de la máscara - Puedes seleccionar el tamaño de la máscara: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán las opciones de ancho y alto. Arrastra el control o escribe un valor numérico para definirlas.

  • Modo de fusión de la máscara - Define cómo la capa de la máscara interactúa con las capas debajo. Selecciona uno de los 16 modos de fusión disponibles.

Divi Fullwidth Header Module Background Mask settings

Etiqueta administrativa

La etiqueta administrativa es donde puedes darle un nombre al módulo, visible solo para ti, para ayudarte a mantener todo organizado y fácil de entender en el backend. Por defecto, la etiqueta administrativa será el nombre del módulo, pero puedes cambiarla por el texto que desees.

Divi Fullwidth Header Module Admin Label settings

Pestaña Diseño

Todos los estilos y opciones de diseño para el módulo de encabezado de ancho completo Divi están en esta pestaña.

Configuraciones del módulo de encabezado de ancho completo Divi - Pestaña Diseño

Divi Fullwidth Header Module Design tab settings

Diseño

Define la distribución general del texto e imágenes en el módulo.
  • Alineación de texto y logo - Permite elegir cómo se alinean el texto y las imágenes: izquierda, centro o derecha.

  • Pantalla completa - Activa esta opción para que el módulo de encabezado de ancho completo ocupe toda la pantalla. Por defecto está desactivado.

Divi Fullwidth Header Module Layout settings

Ícono para desplazarse hacia abajo

Este módulo tiene la opción de mostrar un ícono para desplazarse hacia abajo en la parte inferior del módulo. Aquí activas y personalizas ese ícono.
  • Botón para desplazarse hacia abajo - Si deseas mostrar el ícono, selecciona sí y aparecerán las siguientes opciones:

    • Ícono - Selecciona el ícono que quieres usar.

    • Color del ícono para desplazarse hacia abajo - Elige un color para el ícono desde la paleta de tu sitio o con el cuentagotas.

    • Tamaño del ícono para desplazarse hacia abajo - Define el tamaño del ícono con el control deslizante o escribiendo un valor numérico.

Divi Fullwidth Header Module Scroll Down Icon settings

Imagen

Aquí puedes personalizar las imágenes añadidas al módulo.
  • Alineación de la imagen - Elige cómo se alinean las imágenes: centradas verticalmente o abajo.

  • Esquinas redondeadas de la imagen - Para redondear las esquinas, escribe un valor numérico. Cuanto mayor el número, más redondeadas las esquinas. Los valores de las esquinas están enlazados por defecto (verás un ícono de cadena azul), pero si quieres valores diferentes para cada esquina, haz clic para desenlazar.

  • Estilos de borde de la imagen - Aquí puedes añadir un borde a la imagen, ya sea en todos los lados o en lados específicos (arriba, derecha, abajo, izquierda).

  • Ancho del borde de la imagen - Define el grosor del borde. Debe ser al menos 1 px para que sea visible.

  • Color del borde de la imagen - Selecciona un color para el borde desde la paleta o con el cuentagotas.

  • Estilo del borde de la imagen - Elige entre sólido, punteado, rayado, doble, surco, relieve, embutido, saliente o ninguno.

  • Sombra de caja de la imagen - Elige el estilo de sombra para la imagen. Por defecto no hay sombra.

  • Posición horizontal de la sombra - Controla la posición horizontal de la sombra.

  • Posición vertical de la sombra - Controla la posición vertical de la sombra.

  • Fuerza de desenfoque de la sombra - Controla qué tanto se difumina la sombra. Mayor número, más difusa.

  • Fuerza de expansión de la sombra - Controla qué tanto se expande la sombra.

  • Color de la sombra - Elige el color de la sombra.

  • Posición de la sombra - Elige si la sombra es interna o externa.

  • Tono de la imagen - Ajusta el tono de la imagen.

  • Saturación de la imagen - Ajusta la saturación.

  • Brillo de la imagen - Ajusta el brillo.

  • Contraste de la imagen - Ajusta el contraste.

  • Invertir la imagen - Invierte los colores de la imagen.

  • Sepia de la imagen - Controla el nivel de tono sepia aplicado.

  • Opacidad de la imagen - Controla la transparencia de la imagen.

  • Desenfoque de la imagen - Controla qué tan borrosa está la imagen.

  • Modo de fusión de la imagen - Define cómo la imagen se mezcla con las capas debajo. Por defecto está en normal.

Divi Fullwidth Header Module Image settings

Superposición

Por defecto no hay superposición de fondo. Para añadir una superposición (un color que cubre el fondo del módulo), elige un color de la paleta de tu sitio o usa el cuentagotas para un nuevo color.

Divi Fullwidth Header Module Overlay settings

Texto

Define los estilos generales del texto para este módulo; sin embargo, puedes definir estilos específicos para textos particulares en otras opciones como Texto del título, Texto del cuerpo y Texto del subtítulo.
  • Color del texto - Selecciona la paleta de colores predeterminada para el texto: claro u oscuro. Estas paletas se configuran en las opciones del tema Divi.

  • Sombra del texto - Puedes aplicar una sombra al texto en todo el módulo. Cuando eliges un tipo de sombra, se aplica a todo el contenido, incluyendo números y títulos de formulario.

Divi Fullwidth Header Module Text settings

Texto del título

Configuraciones específicas para el estilo y configuración del texto del título.
  • Nivel de encabezado del texto - Elige el nivel de encabezado asignado al texto del título: h1, h2, h3, h4, h5 o h6.

  • Fuente del título - Elige la fuente para el texto del título. Por defecto está seleccionada automáticamente, pero puedes elegir otra o subir una personalizada.

  • Peso de la fuente del título - Selecciona el grosor de la fuente del título.

  • Estilo de fuente del título - Elige el estilo:

    • Cursiva

    • Mayúscula inicial

    • Versalitas

    • Subrayado

    • Tachado

  • Alineación del texto del título - Elige la alineación solo para el texto del título: izquierda, centro, derecha o justificado.

  • Color del texto del título - Elige un color específico para el texto del título desde la paleta o con el cuentagotas.

  • Tamaño del texto del título - Ajusta el tamaño de la fuente arrastrando el control o escribiendo un valor.

  • Espaciado entre letras del título - Ajusta el espacio entre letras arrastrando o con valor numérico.

  • Altura de línea del título - Ajusta el espacio entre líneas arrastrando o con valor numérico.

  • Sombra del texto del título - Puedes añadir sombra al texto del título y configurar la dirección (horizontal y vertical), fuerza del desenfoque y color de la sombra.

Divi Fullwidth Header Module Title Text settings

Texto del cuerpo

Configuraciones específicas para estilo y configuración del texto del cuerpo.

  • Fuente del cuerpo - Elige la fuente para el texto del cuerpo. Por defecto está seleccionada, pero puedes elegir otra o subir una personalizada.

  • Peso de la fuente del cuerpo - Selecciona el grosor de la fuente del cuerpo.

  • Estilo de fuente del cuerpo - Elige el estilo:

    • Cursiva

    • Mayúscula inicial

    • Versalitas

    • Subrayado

    • Tachado

  • Alineación del texto del cuerpo - Elige la alineación solo para el texto del cuerpo: izquierda, centro, derecha o justificado.

  • Color del texto del cuerpo - Elige un color específico para el texto del cuerpo desde la paleta o con el cuentagotas.

  • Tamaño del texto del cuerpo - Ajusta el tamaño arrastrando o con valor numérico.

  • Espaciado entre letras del cuerpo - Ajusta el espacio entre letras arrastrando o con valor numérico.

  • Altura de línea del cuerpo - Ajusta el espacio entre líneas arrastrando o con valor numérico.

  • Sombra del texto del cuerpo - Puedes añadir sombra al texto del cuerpo y configurar dirección, fuerza y color.

Divi Fullwidth Header Module Body Text settings

Texto del Subtítulo


Estas son las configuraciones para el estilo y la configuración específica solo del texto del subtítulo.

Fuente del Subtítulo – Elige la fuente que deseas para el texto del subtítulo. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en el menú desplegable.

Grosor de la Fuente del Subtítulo – Haz clic en el menú desplegable para seleccionar el grosor de la fuente del texto del subtítulo.

Estilo de la Fuente del Subtítulo – Elige el estilo de la fuente del texto del subtítulo:

  • Cursiva

  • Mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

Alineación del Texto del Subtítulo – Elige la alineación del texto específicamente para el texto del subtítulo:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

Color del Texto del Subtítulo – Elige un color específico para el texto del subtítulo. Selecciona un color de la paleta de colores de tu sitio o haz clic en el ícono cuentagotas para encontrar un nuevo color.

Tamaño del Texto del Subtítulo – Elige el tamaño de la fuente del texto del subtítulo arrastrando el control deslizante o escribiendo un valor numérico.

Espaciado entre Letras del Subtítulo – Elige el espaciado entre letras del texto del subtítulo arrastrando el control deslizante o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. A mayor número, más espacio.

Altura de Línea del Subtítulo – Elige la altura de línea del texto del subtítulo arrastrando el control deslizante o escribiendo un valor numérico. La altura de línea es el espacio entre cada línea de texto. A mayor número, más espacio.

Sombra del Texto del Subtítulo – Puedes agregar una sombra al texto del subtítulo aquí. Una vez que seleccionas un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque de la sombra y el color de la sombra.


Divi Fullwidth Header Module Subtitle Text settings


Botón Uno

Por defecto, los botones heredan los estilos de diseño globales establecidos en el Personalizador de WordPress. Sin embargo, aquí puedes aplicar estilos de diseño personalizados para el botón uno.

Usar Estilos Personalizados para el Botón Uno – Para diseñar un estilo personalizado para este botón, activa esta opción en sí. Entonces aparecerán las siguientes opciones.

Tamaño del Texto del Botón Uno – Elige el tamaño de la fuente del botón aquí. Arrastra el control deslizante para ajustar el tamaño o escribe un valor numérico en el campo de texto.

Color del Texto del Botón Uno – Elige el color de la fuente del botón aquí. Selecciona un color de la paleta de colores de tu sitio o usa el icono cuentagotas para encontrar un nuevo color.

Fondo del Botón Uno – Elige el color de fondo del botón aquí. Selecciona un color de la paleta de colores de tu sitio o usa el cuentagotas para encontrar un nuevo color.

Ancho del Borde del Botón Uno – Ajusta el ancho del borde del botón aquí. Arrastra el control deslizante para ajustar el ancho o escribe un valor numérico en el campo de texto.

Color del Borde del Botón Uno – Elige el color del borde aquí. Selecciona un color de la paleta de colores de tu sitio o usa el cuentagotas para encontrar un nuevo color.

Radio del Borde del Botón Uno – Ajusta el radio del borde del botón aquí. El radio se refiere a qué tan redondeadas están las esquinas. A mayor número, más redondeadas las esquinas. Arrastra el control deslizante o escribe un valor numérico en el campo de texto.

Espaciado entre Letras del Botón Uno – Elige el espaciado entre letras del texto del botón arrastrando el control deslizante o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. A mayor número, más espacio.

Fuente del Botón Uno – Elige la fuente que deseas para el texto del botón. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una personalizada haciendo clic en el menú desplegable.

Grosor de la Fuente del Botón Uno – Haz clic en el menú desplegable para seleccionar el grosor de la fuente del botón.

Estilo de la Fuente del Botón Uno – Elige el estilo de la fuente del botón: cursiva, mayúsculas, versalitas, subrayado o tachado.

Mostrar Icono del Botón Uno – Activa esta opción en sí o no para mostrar u ocultar un ícono en el botón.

Ícono del Botón Uno – Puedes seleccionar el ícono del botón aquí si la opción anterior está activada en sí.

Color del Ícono del Botón Uno – Elige el color del ícono aquí. Selecciona un color de la paleta de colores de tu sitio o usa el cuentagotas para encontrar un nuevo color.

Posición del Ícono del Botón Uno – Elige dónde quieres que esté el ícono: a la derecha o izquierda del texto del botón.

Mostrar Ícono Solo al Pasar el Mouse para el Botón Uno – Esta opción está activada en sí por defecto, lo que significa que el ícono solo aparecerá al pasar el mouse. Si quieres que el ícono sea siempre visible, desactiva esta opción.

Sombra del Texto del Botón Uno – Puedes aplicar una sombra al texto del botón. Elige el estilo de sombra que deseas usar y personalízalo con las siguientes opciones.

Longitud Horizontal de la Sombra del Texto del Botón Uno – Ajusta la posición horizontal de la sombra del texto del botón.

Longitud Vertical de la Sombra del Texto del Botón Uno – Ajusta la posición vertical de la sombra del texto del botón.

Fuerza de Desenfoque de la Sombra del Texto del Botón Uno – Ajusta la intensidad del desenfoque de la sombra aplicada al texto del botón. A mayor número, más desenfoque.

Color de la Sombra del Texto del Botón Uno – Elige el color de la sombra del texto del botón. Selecciona un color de la paleta de colores de tu sitio o usa el cuentagotas para encontrar un nuevo color.

Margen del Botón Uno – El margen agrega espacio fuera del elemento. Para agregar margen al botón, escribe un valor numérico. Para mantener proporciones iguales en los valores, haz clic en el ícono de cadena entre los valores que quieres que sean idénticos (por ejemplo, arriba y abajo).

Relleno del Botón Uno – El relleno agrega espacio dentro del elemento. Para agregar relleno al botón, escribe un valor numérico. Para mantener proporciones iguales en los valores, haz clic en el ícono de cadena entre los valores que quieres que sean idénticos (por ejemplo, arriba y abajo).

Sombra de Caja del Botón Uno – Puedes aplicar una sombra al elemento botón. Elige el estilo de sombra y personalízalo con las siguientes opciones.

Longitud Horizontal de la Sombra de Caja del Botón Uno – Ajusta la posición horizontal de la sombra de caja del botón.

Longitud Vertical de la Sombra de Caja del Botón Uno – Ajusta la posición vertical de la sombra de caja del botón.

Fuerza de Desenfoque de la Sombra de Caja del Botón Uno – Ajusta la intensidad del desenfoque de la sombra aplicada al botón. A mayor número, más desenfoque.

Color de la Sombra de Caja del Botón Uno – Elige el color de la sombra de caja del botón. Selecciona un color de la paleta de colores de tu sitio o usa el cuentagotas para encontrar un nuevo color.


Divi Fullwidth Header Module Button One settings


Botón Dos


Por defecto, los botones heredan los estilos de diseño globales establecidos en el Personalizador de WordPress. Sin embargo, puedes aplicar estilos de diseño personalizados al botón dos aquí.

Usar Estilos Personalizados Para Botón Dos - Para diseñar un estilo personalizado para este botón, activa esta opción a sí. Entonces, aparecerán las siguientes opciones.

Tamaño del Texto del Botón Dos - Elige el tamaño de la fuente del botón aquí. Desliza el control de rango para ajustar el tamaño o escribe un valor numérico en el cuadro de texto.

Color del Texto del Botón Dos - Elige el color de la fuente del botón aquí. Selecciona un color del paleta de colores de tu sitio, o usa el ícono de cuentagotas para encontrar un color nuevo.

Fondo del Botón Dos - Elige el color de fondo del botón aquí. Selecciona un color del paleta de colores de tu sitio, o usa el ícono de cuentagotas para encontrar un color nuevo.

Ancho del Borde del Botón Dos - Ajusta el ancho del borde del botón aquí. Desliza el control de rango para ajustar el ancho o escribe un valor numérico en el cuadro de texto.

Color del Borde del Botón Dos - Elige el color del borde aquí. Selecciona un color del paleta de colores de tu sitio, o usa el ícono de cuentagotas para encontrar un color nuevo.

Radio del Borde del Botón Dos - Ajusta el radio del borde del botón aquí. El radio se refiere a qué tan redondeadas están las esquinas. Mientras más alto sea el número, más redondeadas serán las esquinas. Desliza el control de rango para ajustar el radio o escribe un valor numérico en el cuadro de texto.

Espaciado Entre Letras del Botón Dos - Elige el espaciado entre letras del texto del título deslizando el control de rango o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. Mientras más alto sea el número, más espacio habrá.

Fuente del Botón Dos - Elige la fuente que quieres usar para el texto del botón. La fuente por defecto está seleccionada automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en el menú desplegable.

Grosor de Fuente del Botón Dos - Haz clic en el menú desplegable para seleccionar el grosor (negrita) de la fuente del botón.

Estilo de Fuente del Botón Dos - Elige el estilo de la fuente del botón: cursiva, mayúsculas, versalitas, subrayado o tachado.

Mostrar Ícono del Botón Dos - Activa esta opción en sí o no para mostrar u ocultar un ícono en el botón.

Ícono del Botón Dos - Puedes seleccionar el ícono del botón aquí si la opción anterior está en "sí".

Color del Ícono del Botón Dos - Elige el color del ícono aquí. Selecciona un color del paleta de colores de tu sitio, o usa el ícono de cuentagotas para encontrar un color nuevo.

Ubicación del Ícono del Botón Dos - Elige dónde quieres que esté el ícono del botón: a la derecha o a la izquierda del texto del botón.

Mostrar Ícono Solo Al Pasar El Mouse Sobre El Botón Dos - Esta opción está activada en sí por defecto, lo que significa que el ícono solo aparecerá al pasar el mouse (hover). Si quieres que el ícono siempre sea visible, desactiva esta opción.

Sombra del Texto del Botón Dos - Puedes aplicar una sombra al texto del botón. Elige el estilo de sombra que deseas usar y podrás personalizarlo con las siguientes opciones.

Longitud Horizontal de la Sombra del Texto del Botón Dos - Ajusta la posición horizontal de la sombra del texto del botón.

Longitud Vertical de la Sombra del Texto del Botón Dos - Ajusta la posición vertical de la sombra del texto del botón.

Fuerza de Desenfoque de la Sombra del Texto del Botón Dos - Ajusta la intensidad del desenfoque de la sombra aplicada al texto del botón. Mientras más alto sea el número, mayor será el desenfoque.

Color de la Sombra del Texto del Botón Dos - Elige el color de la sombra del texto del botón. Selecciona un color del paleta de colores de tu sitio, o usa el ícono de cuentagotas para encontrar un color nuevo.

Margen del Botón Dos - El margen añade espacio fuera del elemento. Para añadir margen al botón, escribe un valor numérico. Para bloquear proporciones y mantener los valores iguales, haz clic en el ícono de cadena entre los valores que quieres que siempre sean idénticos (por ejemplo, arriba y abajo).

Relleno del Botón Dos - El relleno añade espacio dentro del elemento. Para añadir relleno al botón, escribe un valor numérico. Para bloquear proporciones y mantener los valores iguales, haz clic en el ícono de cadena entre los valores que quieres que siempre sean idénticos (por ejemplo, arriba y abajo).

Sombra de Caja del Botón Dos - Puedes aplicar una sombra al botón completo. Elige el estilo de sombra que quieres usar y personalízalo con las siguientes opciones.

Longitud Horizontal de la Sombra de Caja del Botón Dos - Ajusta la posición horizontal de la sombra de caja del botón.

Longitud Vertical de la Sombra de Caja del Botón Dos - Ajusta la posición vertical de la sombra de caja del botón.

Fuerza de Desenfoque de la Sombra de Caja del Botón Dos - Ajusta la intensidad del desenfoque de la sombra aplicada al botón. Mientras más alto sea el número, mayor será el desenfoque.

Color de la Sombra de Caja del Botón Dos - Elige el color de la sombra de caja del botón. Selecciona un color del paleta de colores de tu sitio, o usa el ícono de cuentagotas para encontrar un color nuevo.


Divi Fullwidth Header Module Button Two settings

Tamaño

Ancho del Contenido - Define el ancho del área de contenido del Encabezado de Ancho Completo.

Ancho - Define el ancho del módulo. Para más información, por favor consulta la documentación oficial.

Ancho Máximo - Define el ancho máximo del módulo. Para más información, por favor consulta la documentación oficial.

Alineación del Módulo - Si un valor de Ancho o Ancho Máximo está establecido, la alineación del módulo se puede configurar con tres opciones:

  • Alineado a la izquierda

  • Centrado

  • Alineado a la derecha

Altura Mínima - Define el valor mínimo para la altura del módulo. Para más información, por favor consulta la documentación oficial.

Altura - Define la altura del módulo. Para más información, por favor consulta la documentación oficial.

Altura Máxima - Define el valor máximo de altura que el módulo puede tener. Para más información, por favor consulta la documentación oficial.


Divi Fullwidth Header Module Sizing settings


Espaciado

Puedes añadir márgenes o relleno a este módulo escribiendo valores numéricos.

El margen añade espacio fuera del módulo, y el relleno añade espacio dentro del módulo. Para bloquear proporciones y mantener los valores iguales, haz clic en el ícono de cadena entre los valores que quieres que siempre sean idénticos (por ejemplo, arriba y abajo).

Los valores de margen predeterminados para el módulo son 0.

Los valores de relleno predeterminados para el módulo son 0.


Divi Fullwidth Header Module Spacing settings


Borde

Añade un borde al módulo. Puedes añadir un borde completo o un borde solo a un lado del módulo. Ajusta el ancho mediante el control de rango y selecciona un color. Elige un estilo de borde haciendo clic en el menú desplegable.

Esquinas Redondeadas – Escribe un valor numérico para redondear las esquinas del borde. Mientras más alto sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están enlazados automáticamente (como se muestra por el ícono de cadena azul resaltado en el centro); sin embargo, si quieres tener valores diferentes para cada esquina, haz clic en el ícono de cadena azul para desvincular los valores. Si los valores están enlazados, siempre tendrán el mismo valor y se actualizarán automáticamente si cambias uno.

Estilos de Borde – Aquí puedes añadir un borde en todos los lados del módulo o solo en lados individuales (arriba, derecha, abajo e izquierda).

Ancho del Borde - Aquí defines el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos 1px para que se muestre.

Color del Borde – Aquí puedes elegir el color del borde. Puedes seleccionar un color del paleta de colores predeterminada de tu sitio que ya se muestra o hacer clic en el ícono de cuentagotas para encontrar un color nuevo.

Estilo del Borde – Aquí puedes seleccionar el estilo de borde que quieres: sólido, discontinuo, punteado, doble, ranurado, en relieve, incrustado, saliente o ninguno.


Divi Fullwidth Header Module Border settings


Sombra de Caja

Aquí puedes añadir una sombra a todo el módulo.

Una vez que hagas clic en un estilo de sombra, podrás personalizar las siguientes opciones:

Posición Horizontal de la Sombra de Caja - Define la posición horizontal de la sombra.

Posición Vertical de la Sombra de Caja - Define la posición vertical de la sombra.

Fuerza de Desenfoque de la Sombra de Caja - Define la intensidad del desenfoque de la sombra. Mientras más alto sea el valor, mayor será el desenfoque y la sombra será más amplia y clara.

Fuerza de Expansión de la Sombra de Caja - Define la fuerza de expansión del desenfoque. Aumentar esta fuerza incrementa la densidad de la sombra. Mayor densidad resulta en una sombra más intensa.

Color de la Sombra - Define el color de la sombra.

Posición de la Sombra de Caja - Define la posición de la sombra. Puede estar dentro o fuera del módulo.


Divi Fullwidth Header Module Box Shadow settings


Filtros

Ajusta los filtros del módulo:
  • Matiz - Define el ángulo del matiz de un color.

  • Saturación - Define qué tan intensa debe ser la saturación del color.

  • Brillo - Define qué tan brillante deben ser los colores.

  • Contraste - Define qué tan distintivas deben ser las áreas claras y oscuras.

  • Invertir - Invierte el matiz, saturación y brillo según el valor especificado.

  • Sepia - Define una apariencia más cálida, amarilla/marrón.

  • Opacidad - Define qué tan transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).

  • Desenfoque - Define la cantidad de desenfoque gaussiano aplicado al módulo.

El Modo de Fusión se refiere a cómo el módulo se mezcla con las capas debajo. Por defecto, estará seleccionado normal.


Divi Fullwidth Header Module Filters settings


Transformar

  • Escalar

  • Trasladar

  • Rotar

  • Sesgar

  • Puntos de origen

Navega por cada opción con la tecla tab. Configura cada opción ingresando valores numéricos o arrastrando y expandiendo el cuadro o círculo.

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el ícono de cadena en la esquina inferior derecha.

Divi Fullwidth Header Module Transform settings

Animación

Aquí, puedes aplicar animación al módulo. Una vez que elijas un estilo, puedes ajustar las siguientes opciones:
  • Duración de la animación - Define el tiempo que tarda una animación en completar un ciclo.

  • Retraso de la animación - Define el tiempo de espera desde que se aplica la animación a un elemento hasta que comienza a ejecutarse. La animación puede iniciar después, inmediatamente desde el principio, o inmediatamente y a mitad de la animación.

  • Opacidad inicial de la animación - Define el valor inicial de opacidad.

  • Curva de velocidad de la animación - Define el método de suavizado de la animación. Hacer que la animación acelere y desacelere crea un efecto más suave que una curva de velocidad lineal.

  • Repetición de la animación - Por defecto, las animaciones solo se reproducen una vez. Si quieres que la animación se repita continuamente, elige la opción “Bucle”.


Divi Fullwidth Header Module Animation settings

Pestaña Avanzada

Dentro de la pestaña Avanzada encontrarás opciones que los diseñadores web más experimentados podrían encontrar útiles, como CSS personalizado.

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes agregar clases e IDs CSS personalizadas al módulo, que pueden usarse para personalizar los estilos del módulo con propiedades CSS más avanzadas o para aplicar código CSS personalizado usando la clase CSS del módulo.


Divi Fullwidth Header Module Advanced Tab settings

ID y Clases CSS

Asigna un ID o Clase CSS específicos a este módulo. Esto es útil para aplicar CSS personalizado a un módulo utilizando la hoja de estilos de tu tema hijo.

Divi Fullwidth Header Module CSS ID and Classes settings

CSS Personalizado
  • CSS Libre - Escribe CSS libre usando el selector keyword para dirigir este módulo. Ejemplo: selector h1 {color: red;}

  • Elementos del Módulo - También puedes aplicar CSS personalizado pegándolo en esta pestaña. Al hacer clic en Elementos del Módulo, verás secciones individuales donde puedes añadir propiedades CSS personalizadas.


Divi Fullwidth Header Module Custom CSS settings

Atributos

Esto define la relación del enlace entre la fuente a la que enlazas y la página desde la que enlazas. Puedes configurar atributos de enlace para los botones uno y dos, así como para las imágenes del encabezado y el logo.

Divi Fullwidth Header Module Attributes settings

Condiciones

Esta pestaña te permite elegir cuándo mostrar este módulo según un conjunto de condiciones, como cuándo un usuario visita la página, si ya ha comprado antes en tu empresa, qué navegador usa, qué sistema operativo tiene, y más.

Puedes añadir una o múltiples condiciones.


Divi Fullwidth Header Module Display Conditions settings

Visibilidad

  • Desactivar en - Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) cuando la ventana de visualización sea teléfono, tableta o escritorio, marcando la casilla correspondiente.

  • Desbordamiento horizontal - Define qué se muestra cuando el contenido desborda los bordes izquierdo y derecho de un elemento de nivel bloque. Puede ser:

    • Visible: el contenido se muestra si desborda la altura del módulo.

    • Desplazar: si el contenido desborda la altura, se usa una barra de desplazamiento vertical.

    • Oculto: si el contenido desborda la altura, la parte que sobresale se oculta.

    • Automático: el navegador decide si se muestra la barra de desplazamiento.

  • Desbordamiento vertical - Define qué se muestra cuando el contenido desborda los bordes superior e inferior del elemento. Las opciones son las mismas que para el desbordamiento horizontal.


Divi Fullwidth Header Module Visibility settings

Transiciones

Esto controla la duración, el retraso y la curva de velocidad de la animación al pasar el cursor (hover).
  • Duración de la transición - Define la duración (en milisegundos) de la transición de la animación hover.

  • Retraso de la transición - Define el retraso de la transición (en milisegundos) de la animación hover.

  • Curva de velocidad de la transición - Define la curva de velocidad de la animación hover.


Divi Fullwidth Header Module Transition settings

Posición

Define la posición del módulo:
  • Relativa (valor por defecto): El módulo se posiciona según el flujo normal del documento y luego se desplaza relativo a sí mismo con los valores de desplazamiento vertical y horizontal. El espacio asignado al módulo en el diseño es el mismo que si la posición fuera estática.

  • Absoluta: El módulo se elimina del flujo normal y no crea espacio en el diseño. Se posiciona relativo a su ancestro más cercano posicionado o al bloque contenedor inicial. Las opciones de ubicación determinan su posición final.

  • Fija: El módulo se elimina del flujo normal y no crea espacio. Se posiciona relativo a la ventana del navegador, útil para módulos adhesivos.

  • Desplazamiento vertical: Define la posición vertical del módulo.

  • Desplazamiento horizontal: Define la posición horizontal del módulo.

  • Índice Z: Define el orden del módulo en el diseño. Los módulos con un índice Z más alto se superponen a los de índice más bajo.


Divi Fullwidth Header Module Position settings

Efectos de desplazamiento

Define cómo se comporta el módulo al desplazarse la página. Puedes hacer que el módulo sea adhesivo (en la parte superior, inferior o ambas) y elegir si el módulo se transforma al hacer scroll.

También puedes habilitar el movimiento vertical, que permite ajustar la velocidad a la que el módulo se desplaza (más rápido o más lento) sin afectar los elementos alrededor.

El efecto disparador de movimiento permite elegir cuándo se activa el efecto de scroll: cuando la parte superior, media o inferior del elemento está visible.


Divi Fullwidth Header Module Scroll Effects settings

Guardar tu diseño

Cuando termines de configurar y diseñar el módulo, haz clic en la flecha verde en la parte inferior derecha del módulo para guardar tu diseño. Si cierras el módulo sin guardar, perderás los cambios.

Guardar el diseño de la página

Para guardar el diseño de la página, presiona CMD + S en Mac o CTRL + S en PC. También puedes usar la barra de herramientas inferior de Divi, haciendo clic en el ícono circular morado con tres puntos para expandir la barra y luego en el botón verde Guardar en la parte inferior derecha.

Salir del constructor visual

Con todos los cambios guardados, haz clic en “Salir del Constructor Visual” en la barra de administración superior para salir del constructor.

Save and Exit the Visual Builder


Continuar aprendiendo

  • 3 degradados llamativos que puedes aplicar a tu módulo de encabezado ancho completo con el generador de degradados de Divi

  • Cómo equilibrar los botones primario y secundario en tu módulo de encabezado ancho completo de Divi

  • Cómo incluir un botón de desplazamiento hacia abajo en tu módulo de encabezado ancho completo de Divi

  • Cómo estilizar el fondo de tu módulo de encabezado ancho completo

  • Usar el módulo de encabezado ancho completo vs. construir tu propia sección hero con Divi

  • Cómo hacer que tu módulo de encabezado ancho completo de Divi sea de pantalla completa

  • Cómo construir una sección hero con el módulo de encabezado ancho completo de Divi

  • Cómo estilizar una imagen en tu módulo de encabezado ancho completo de Divi

    • Popular Articles

    • Guía de Negocio para Resellers y Partners

      En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...
    • Ver una Demo de Scoreapps para Resellers

      En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:
    • Proporciona acceso a tus Aplicaciones

      Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...
    • Cómo Crear una App de Tienda

      El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...
    • Cómo diseñar la pantalla de inicio o portada de una App

      En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
    • Related Articles

    • El módulo de suscripción por correo electrónico de Divi

      Cómo agregar, configurar y personalizar el módulo de suscripción por correo electrónico de Divi <br> El módulo de suscripción por correo electrónico de Divi simplifica el proceso de aumentar tus suscriptores de correo electrónico al ...
    • El Módulo de Portafolio de Ancho Completo de Divi

      Cómo agregar, configurar y personalizar el módulo de portafolio de ancho completo de Divi. Cómo agregar el módulo Portfolio de ancho completo de Divi a tu página Antes de comenzar, necesitarás agregar algunos Proyectos a tu sitio web de WordPress. ...
    • El Módulo de Deslizador de Ancho Completo de Divi

      Cómo agregar, configurar y personalizar el módulo de deslizador de ancho completo de Divi. El Módulo Deslizador de Ancho Completo de Divi puede mostrar llamadas a la acción de impacto, destacar contenido importante de tu sitio web como una página o ...
    • El Módulo de Portafolio de Ancho Completo de Divi

      Cómo agregar, configurar y personalizar el módulo de portafolio de ancho completo de Divi. xsd
    • Cómo usar el Editor de Imágenes de Divi IA

      Aprende a usar el Editor de Imágenes de Divi IA para crear y editar fácilmente imágenes impresionantes directamente dentro del Constructor de Divi. <br> Cómo usar el Editor de Imágenes de Divi IA Este artículo te guiará paso a ...