Saltar al contenido principal

Tutorial de Divi: Cómo utilizar el módulo de menú de pantalla completa

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

El módulo de menú de pantalla completa en divi Agregue fácilmente hermosos encabezados coloridos en la parte superior de sus páginas (o en cualquier lugar de su sitio web, si lo desea). Estos módulos solo pueden colocarse en secciones de ancho completo.

módulo de cabecera de ancho completo divi.png

Cómo agregar el módulo de menú Divi Full Screen

Antes de que pueda agregar un módulo de menú de pantalla completa a su página, primero debe saltar a Divi Builder. Una vez que el tema Divi está instalado en su sitio web, verá un botón Utilice Divi Builder sobre el editor cada vez que creas 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 haz 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 explora su sitio web en primer plano si está conectado a su tablero de WordPress.

usar el constructor divi

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 de menú de pantalla completa solo se pueden agregar dentro de las secciones de ancho completo. Si está comenzando una nueva página, no olvide agregar primero una sección de ancho completo a su página.

menú completo divi.png

Ubique 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 automáticamente y agregar 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 están separadas en tres grupos principales: Contenido , diseño et avanzado .

Ejemplo de caso de uso: agregue un encabezado de pantalla completa a una página de Acerca de

Para este ejemplo, le mostraré cómo usar el módulo de encabezado Fullwidth 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. A continuación, 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: Acerca de Nosotros texto de los subtítulos: Hacemos las cosas de manera diferente ... el URL de la imagen de fondo [insertar una imagen de 1920 800 x] superposición de color de fondo: RGBA (0,0,0,0.2)

Opciones de diseño

Orientación del texto y logo: Botón Centro Desplazamiento hacia abajo Botón: SÍ icono: [Selección] icono Icono de desplazarse hacia abajo Color: #fcbf00 icono de desplazamiento: 50px texto Color: Color de texto: #fcbf00 Fuente del título: Open Sans, negrita, mayúsculas Título tamaño de la fuente: 60px (oficina), 40px (comprimido) 30px (teléfono) tamaño de la fuente de los subtítulos: 25px

Opciones avanzadas (CSS personalizado)

Elemento principal:
tapicería: 100px 0;

contenido de la sección divi module full screen.png

Es todo !

cabecera de ejemplo divi.jpg

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 íconos. Todo eso controla lo que aparece en su módulo siempre se encontrará en esta pestaña.

sección de contenido divi.png

título

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

Texto de subtítulos

Si quieres usar un subtítulo, agrégalo aquí. Sus subtítulos aparecerán debajo de su título en una letra 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.

Botón URL 1

Ingrese la URL del botón.

Botón URL 2

Ingrese la URL del botón.

URL de la imagen del logotipo

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

URL de la imagen del encabezado

Suba 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 usará 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 sobre los colores de fondo, lo que significa que el color de fondo no estará visible cuando se aplique una imagen de fondo.

Color de fondo

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

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

más 554.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. [Recomendado]

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 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 utiliza la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulos de la interfaz de 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 parámetros de diseño que puede usar para cambiar cualquier cosa.

módulo de diseño de sección de ancho completo divi.png

Orientación de texto y logotipo

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

Haz 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 Parallax

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

Mostrar 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.

Desplazarse hacia abajo Icono de color

De manera predeterminada, el ícono 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

Use 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 del módulo divi ancho completo en head.png

Alineación vertical de la imagen

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

Color del texto

Aquí puedes elegir el valor de tu texto. Si trabaja en un fondo oscuro, su texto debe estar encendido. Si trabajas con un fondo claro, tu texto debe estar oscuro.

Alineación vertical del texto

Esta configuración determina la alineación vertical de su contenido. Su contenido se puede centrar 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 fuentes grandes con la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

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 del texto o ingresar el valor del tamaño de texto deseado directamente 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" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del título

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto del título, elija el color deseado en el selector de color con esta opción.

Espaciado de letras de título

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto de título, use el control deslizante de rango para ajustar el espacio o introduzca 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" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

módulo de diseño de la sección de título en la pantalla completa de la cabeza divi.png

Altura de la línea de título

La altura de la línea afecta el espacio entre cada línea de texto en su título, si se desea aumentar el espacio entre cada línea, utilice el control deslizante para ajustar el rango de espacio o introduzca el tamaño de separación deseada 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" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Fuente de contenido

Puede cambiar la fuente de su texto de contenido seleccionando la fuente de su elección en el menú desplegable. Divi viene con docenas de fuentes grandes con la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de fuente del contenido

Aquí puede ajustar el tamaño de su texto de contenido. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño del texto o ingresar el valor del tamaño de texto deseado directamente 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" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del contenido

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

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

Espaciado de cartas de contenido

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

Altura de la línea de contenido

La altura de la línea afecta el espacio entre cada línea de su texto de contenido. 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 ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Subtitle Font

Puede cambiar la fuente de su texto de subtítulos seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de la fuente del subtítulo

Aquí puede ajustar el tamaño del texto de sus subtítulos. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño del texto o ingresar el valor del tamaño de texto deseado directamente 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" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color de texto de subtítulos

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de sus subtítulos, elija el color deseado en el selector de color usando esta opción.

Espaciado de letras de subtítulos

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto de subtítulos, use el control deslizante de rango para ajustar el espacio o introduzca 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" dependiendo del 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 subtítulos. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o introduzca 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" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Ancho máximo de texto

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

módulo de diseño de sección divi head full width.png

Use estilos personalizados para el botón

Al habilitar esta opción, se muestran diferentes configuraciones de personalización para los botones que puede usar para cambiar la apariencia del botón en su módulo.

Tamaño del texto del botón

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

Color del texto del botón

Por defecto, los botones adoptan el color de acento de su tema como se define en el personalizador del tema. Esta opción le permite asignar un color de texto personalizado al botón en 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 predeterminado 2px. Este límite se puede aumentar o disminuir usando este parámetro. Los bordes se pueden eliminar al ingresar un valor de 0.

Color del borde del botón

De forma predeterminada, los bordes de los botones cambian al color de acento de su tema como se define en el personalizador del tema. Esta opción le permite asignar un color de borde personalizado al botón en este módulo. Seleccione su color personalizado utilizando 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 tus botones. Por defecto, los botones en Divi tienen un pequeño radio de borde que redondea las esquinas de los píxeles de 3. 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 las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del botón, use el control deslizante de rango para ajustar el espacio o introduzca 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" dependiendo del 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 grandes con la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

Agregar un ícono de botón

Deshabilitado, esta configuración eliminará los iconos de su botón. Por defecto, todos los botones Divi muestran un ícono de flecha en el vuelo estacionario.

Icono de botón

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

Botón de icono de color

Establecer esta configuración cambiará el color del ícono que aparece en su botón. Por defecto, el color del icono es el mismo que el color del texto de sus botones, pero esta configuración le permite ajustar el color de forma independiente.

Botón de ubicación del icono

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

Mostrar solo el ícono cuando el botón se da vuelta

Por defecto, los iconos de los botones solo se muestran durante la renovación. Si desea que el ícono aparezca siempre, desactive esta configuración.

Color de texto de desplazamiento del botón

Cuando un ratón de visitante sobrevuela el botón, se usará ese 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 un ratón de visitante sobrevuela el botón, se usará ese 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 un ratón de visitante sobrevuela el botón, se usará ese color. El color cambiará del color base definido en la configuración anterior.

Crea fácilmente tu blog con SiteGround

SiteGround le permite crear su blog de WordPress en unos pocos clics. Nombre de dominio gratis, alojamiento seguro, SSL, transferencia y mucho más ... [Recomendado]

Botón de radio del borde deslizante

Cuando un mouse de visitante sobrepasa el botón, se usará este valor. El valor cambiará del valor base definido en los parámetros anteriores.

Botón de espaciado de nota apuntando

Cuando un mouse de visitante sobrepasa el botón, se usará este valor. El valor cambiará del valor base definido en los parámetros anteriores.

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 CSS y HTML personalizados. Aquí puede aplicar CSS personalizado a uno de los muchos elementos del módulo. También puede aplicar clases personalizadas e ID de CSS al módulo, que se puede usar para personalizar el módulo en el archivo style.css del tema secundario.

encabezado del módulo divi section advance.png

ID de CSS

Ingrese un identificador CSS opcional para usar en este módulo. Una ID puede usarse para crear un estilo CSS personalizado o para crear enlaces a secciones particulares de su página.

Clase de CSS

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

CSS personalizado

CSS personalizado también se puede aplicar al módulo y a uno de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto en el que puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas de CSS en estos parámetros ya están incluidas en las etiquetas de estilo. Así que solo 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 elegir deshabilitar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes módulos en diferentes dispositivos, o si desea simplificar el diseño de dispositivos móviles eliminando ciertos elementos de la página.

Otros tutoriales de Divi

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
10 acciones
cuota6
Tweet1
Guardar3
WhatsApp