El módulo Menú de pantalla completa en Divi facilita la adición de hermosos encabezados de colores en la parte superior de sus páginas (o en cualquier lugar de su sitio web, si lo desea). Estos módulos solo se pueden colocar en secciones de ancho completo.

Cómo agregar el módulo de menú de pantalla completa Divi

Antes de que pueda agregar un módulo de menú de pantalla completa a su página, primero debe acceder a Divi Builder. Una vez el Tema divi instalado en su Sitio web, notarás un botón Utilice Divi Builder encima del editor de publicaciones cada vez que crea una página nueva. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puede hacer clic en el botón Habilitar Visual Builder cuando navegas por tu Sitio web en primer plano si ha iniciado sesión en su panel de WordPress.

Una vez que haya ingresado a Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos del menú de pantalla completa solo se pueden agregar dentro de las secciones de ancho completo. Si está iniciando una nueva página, no olvide agregar primero una sección de ancho completo a su página.

Busque el módulo de encabezado de pantalla completa en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "encabezado de pantalla completa" y luego hacer clic en "Entrar" para buscar y agregar automáticamente el módulo de encabezado de pantalla completa. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .

Caso de uso de ejemplo: Agregar un encabezado de pantalla completa a una página Acerca de

Para este ejemplo, le mostraré cómo usar el módulo de encabezado de ancho completo para agregar un encabezado con texto personalizado y una imagen de fondo.

Todos los módulos de pantalla completa solo están disponibles cuando se utilizan secciones de pantalla completa. Usando Visual Builder, inserte una nueva sección de pantalla completa. Luego agregue un módulo Persona a la sección.

Actualice la configuración del encabezado de pantalla completa de la siguiente manera:

Opciones de contenido

Título: Sobre nosotros Subtítulo: Hacemos cosas diferentes ... URL de la imagen de fondo: [insertar imagen de 1920 x 800] Color de fondo superpuesto: rgba (0,0,0,0.2 , XNUMX)

Opciones de diseño

Orientación del texto y el logotipo: Botón central Botón de desplazamiento hacia abajo: SÍ Icono: [seleccionar icono] Icono de desplazamiento hacia abajo Color: # fcbf00 Icono de desplazamiento: 50px Color del texto: Claro Color del texto: # fcbf00 Fuente Título: Abierto Sin, negrita, letras mayúsculas Título Tamaño de fuente: 60px (escritorio), 40px (tableta), 30px (teléfono) Tamaño de fuente de subtítulo: 25px

Opciones avanzadas (CSS personalizado)

Elemento principal:
tapicería: 100px 0;

Es todo !

Opciones de contenido de encabezado de pantalla completa

En la pestaña de contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e iconos. Todo lo que controla lo que aparece en su módulo siempre se encontrará en esta pestaña.

Título

Ingrese el título de su página aquí.

Texto de subtítulos

Si desea utilizar un subtítulo, agréguelo aquí. Su título aparecerá debajo de su título en una fuente pequeña.

Botón # Texto 1

Ingrese el texto para el botón.

Botón # Texto 2

Ingrese el texto para el botón.

Contenido

Aquí puede definir el contenido que se colocará debajo del encabezado y el texto del título.

URL del botón 1

Ingrese la URL del botón.

URL del botón 2

Ingrese la URL del botón.

URL de la imagen del logotipo

Cargue la imagen que desee o escriba la URL de la imagen que desea ver.

URL de la imagen del encabezado

Cargue la imagen que desee o escriba la URL de la imagen que desea ver.

URL de la imagen de fondo

Si se establece, esta imagen se utilizará como fondo para este módulo. Para eliminar una imagen de fondo, simplemente elimine la URL del campo de configuración. Las imágenes de fondo aparecerán encima de los colores de fondo, lo que significa que el color de fondo no será visible cuando se aplique una imagen de fondo.

Color de fondo

Defina un color de fondo personalizado para su módulo o déjelo en blanco para usar el color predeterminado.

Color de superposición de fondo

Elija un color de superposición de fondo, que se colocará sobre la imagen de fondo. Las imágenes superpuestas semitransparentes pueden crear algunos efectos geniales cuando se colocan sobre imágenes de fondo.

Etiqueta de administración

Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando usa la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulo de la interfaz Divi Builder.

Opciones de diseño de encabezado de ancho completo

En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta es la pestaña que usará para cambiar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de configuraciones de diseño que puede usar para cambiar cualquier cosa.

Orientación del texto y el logotipo

Esto controla cómo se alinea su texto en el módulo.

Hacer una pantalla completa

Aquí puede elegir si el encabezado se expande a tamaño de pantalla completa.

Usa el efecto Parallax

Si está habilitado, sus imágenes de fondo tendrán una posición fija como su desplazamiento, creando un divertido efecto de paralaje.

Método de paralaje

Defina el método utilizado para el efecto de paralaje.

Mostrar el botón de desplazamiento hacia abajo

Aquí puede elegir si se muestra el botón de desplazamiento hacia abajo.

icono

Elija un icono para mostrar para el botón de desplazamiento hacia abajo.

Desplácese hacia abajo Icono de color

De forma predeterminada, el icono desplegable hereda el color del texto del encabezado (blanco o gris). Puede cambiar este color ajustando el color en esta opción usando el selector de color.

Desplazarse hacia abajo Tamaño del icono

Utilice esta configuración para aumentar o disminuir el tamaño del icono de desplazamiento hacia abajo que aparece en la parte inferior de su encabezado.

Alineación de imagen vertical

Esto controla la orientación de la imagen en el módulo.

Color del texto

Aquí puede elegir el valor de su texto. Si está trabajando en un fondo oscuro, su texto debe estar encendido. Si está trabajando con un fondo claro, su texto debe ser oscuro.

Alineación vertical del texto

Esta configuración determina la alineación vertical de su contenido. Su contenido puede centrarse verticalmente o alinearse en la parte inferior.

Título de letra

Puede cambiar la fuente del texto del título seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de excelentes fuentes con tecnología de Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto usando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de letra del título

Aquí puede ajustar el tamaño del texto de su título. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según el valor de su tamaño para cambiar el tipo de unidad.

Color del texto del título

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su título, elija el color deseado en el selector de color usando esta opción.

Espaciado de letras de título

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del título, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea de título

La altura de la línea afecta el espacio entre cada línea del texto del título. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según el valor de su tamaño para cambiar el tipo de unidad.

Fuente de contenido

Puede cambiar la fuente del texto de su contenido seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de fuente del contenido

Aquí puede ajustar el tamaño del texto de su contenido. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Color del texto del contenido

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su contenido, elija el color deseado en el selector de color usando esta opción.

Espaciado de cartas de contenido

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto de su contenido, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea de contenido

La altura de la fila afecta el espacio entre cada fila del texto de su contenido.Si desea aumentar el espacio entre cada fila, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Subtitle Font

Puede cambiar la fuente del texto de la leyenda seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de la fuente del subtítulo

Aquí puede ajustar el tamaño del texto de la leyenda. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar directamente el valor del tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Color de texto de subtítulos

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su título, elija el color deseado en el selector de color usando esta opción.

Espaciado de letras de subtítulos

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto de la leyenda, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea de subtítulos

La altura de la línea afecta el espacio entre cada línea del texto de la leyenda. Si desea aumentar el espacio entre cada fila, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Ancho máximo de texto

Utilice esta configuración para reducir el ancho máximo del texto en el módulo de encabezado. Por ejemplo, un valor del 50% asegurará que el texto nunca exceda el 50% del ancho del módulo de encabezado general.

Use estilos personalizados para el botón

Habilitar esta opción revela varias configuraciones de personalización de botones que puede usar para cambiar la apariencia del botón de su módulo.

Tamaño del texto del botón

Esta configuración se puede utilizar para aumentar o disminuir el tamaño del texto en el botón. El botón se adapta a medida que aumenta y disminuye el tamaño del texto.

Color del texto del botón

De forma predeterminada, los botones adoptan el color de acento de su tema como se define en el Personalizador de temas. Esta opción le permite asignar un color de texto personalizado al botón de este módulo. Seleccione su color personalizado con el selector de color para cambiar el color del botón.

Color de fondo del botón

Por defecto, los botones tienen un color de fondo transparente. Esto se puede cambiar seleccionando el color de fondo deseado en el selector de color.

Botón de ancho del borde

Todos los botones Divi tienen un borde de 2px por defecto. Este borde se puede aumentar o disminuir con esta configuración. Los bordes se pueden eliminar ingresando un valor de 0.

Color del borde del botón

De forma predeterminada, los bordes de los botones adoptan el color de acento de su tema como se define en el Personalizador de temas. Esta opción le permite asignar un color de borde personalizado al botón de este módulo. Seleccione su color personalizado con el selector de color para cambiar el color del borde del botón.

Radio del borde del botón

El radio del borde afecta la redondez de las esquinas de sus botones. De forma predeterminada, los botones en Divi tienen un pequeño radio de borde que redondea las esquinas en 3 píxeles. Puede reducir este valor a 0 para crear un botón cuadrado o aumentarlo significativamente para crear botones con bordes circulares.

Espaciado de letras de los botones

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto de su botón, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Fuente de botón

Puede cambiar la fuente del texto de su botón seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Agregar un ícono de botón

Desactivado, esta configuración eliminará los iconos de su botón. De forma predeterminada, todos los botones Divi muestran un icono de flecha en el desplazamiento.

Icono de botón

Si los íconos están habilitados, puede usar esta configuración para elegir qué ícono usar en su botón. Divi tiene diferentes iconos para elegir.

Botón de icono de color

El ajuste de esta configuración cambiará el color del icono que aparece en su botón. De forma predeterminada, el color del icono es el mismo que el color del texto del botón, pero esta configuración le permite ajustar el color de forma independiente.

Botón de ubicación del icono

Puede elegir mostrar el icono de su botón a la izquierda o derecha de su botón.

Mostrar icono solo al pasar el cursor sobre el botón

De forma predeterminada, los iconos de los botones se muestran solo cuando se desplaza. Si desea que el icono aparezca siempre, desactive esta configuración.

Color de texto de desplazamiento del botón

Cuando el botón de un visitante pasa por encima del botón, se utilizará este color. El color cambiará del color base definido en la configuración anterior.

Color de fondo del botón de desplazamiento (color del botón de desplazamiento)

Cuando el botón de un visitante pasa por encima del botón, se utilizará este color. El color cambiará del color base definido en la configuración anterior.

Botón de desplazamiento del color del borde (color del borde del cursor)

Cuando el botón de un visitante pasa por encima del botón, se utilizará este color. El color cambiará del color base definido en la configuración anterior.

Botón de radio del borde deslizante

Cuando el mouse de un visitante pasa el mouse sobre el botón, se utilizará este valor. El valor cambiará del valor base definido en la configuración anterior.

Botón de espaciado de nota apuntando

Cuando el mouse de un visitante pasa el mouse sobre el botón, se utilizará este valor. El valor cambiará del valor base definido en la configuración anterior.

Opciones avanzadas de encabezado de ancho completo

En la pestaña avanzada, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados de CSS y HTML. Aquí puede aplicar CSS personalizado a cualquiera de los muchos elementos del módulo. También puede aplicar clases e ID de CSS personalizados al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.

ID de CSS

Ingrese un ID de CSS opcional para usar en este módulo. Se puede usar una identificación para crear un estilo CSS personalizado o para vincular a secciones particulares de su página.

Clase de CSS

Ingrese las clases CSS opcionales que se usarán en este módulo. Se puede utilizar una clase CSS para crear estilos CSS personalizados. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden usar en su tema secundario Divi o en la hoja de estilo CSS personalizada que agregue a su página o sitio web. Sitio web usando las opciones del tema Divi o la configuración de la página Divi Builder.

CSS personalizado

También se puede aplicar CSS personalizado al módulo y a cualquiera de los componentes internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en esta configuración ya están envueltas en etiquetas de estilo. Así que simplemente ingrese las reglas CSS separadas por punto y coma.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes mods en diferentes dispositivos o si desea simplificar el diseño del móvil eliminando ciertos elementos de la página.

[vc_row center_row=”sí”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/filiales/idevfiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR EL TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Otros tutoriales de Divi

• 5 sitios web para su uso restaurante temático Divi
• Cómo agregar texto en un producto Divi WooCommerce
• Cómo cambiar el color del menú entre páginas Divi
• Cómo personalizar las cuadrículas de un blog con Divi
• Cómo utilizar la función de editor Divi en WordPress
• Cómo crear un control deslizante Divi a pantalla completa
• Cómo cambiar el color de los menús entre páginas Divi
• Características que probablemente no conozcas sobre Divi
• Cómo usar Divi Builder en WordPress
• Cómo usar el módulo de desplazamiento de video Divi
• Cómo usar el módulo Divi Builder Flip
• Cómo agregar un módulo testimonial en Divi Builder
• Cómo usar el módulo de texto Divi
• Cómo crear un control deslizante en Divi
• Cómo editar un rol de usuario Divi
• Cómo usar el módulo de Divi Social Media
• Cómo usar el módulo de tienda en el tema WordPress Divi
• Cómo usar el módulo de la barra lateral Divi
• Cómo usar el Módulo Divi Price Table
• Cómo usar el módulo de título de las publicaciones de Divi
• Cómo agregar un módulo de video de Divi
• Cómo usar el módulo de navegación del artículo
• Cómo usar el módulo de búsqueda Divi
• Cómo usar el módulo Divi wallet
• Cómo usar el módulo de persona en Divi Builder
• Cómo usar el módulo de billetera con filtro Divi
• Cómo usar el módulo deslizante de ancho completo
• Cómo usar el Módulo de imagen Divi Builder
• Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
• Cómo usar el módulo de la galería de imágenes
• Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
• Cómo utilizar el módulo de cartera de ancho completo de Divi
• Cómo usar el módulo de encabezado de ancho completo Divi
• Cómo usar el módulo Divi Counter
• Cómo usar el control deslizante de artículos en Divi Builder
• Cómo usar el módulo Divi Email Optin