Divi - Documentación en español

Actualizada v3.28

El módulo Menú de ancho completo

El módulo Menú de ancho completo le permite colocar un menú de navegación en cualquier parte de la página. Esto puede ser útil para añadir un menú secundario, o puede usarse en conjunto con la Página en blanco (Blank Page) para mover el menú principal a un lugar más abajo. En esencia, este módulo le permite mover el menú de navegación adonde desee.

Divi - Módulo "Menú de ancho completo"

Cómo añadir un módulo Menú de ancho completo en una página

Antes de poder añadir un módulo Menú de ancho completo, deberá abrir el constructor de Divi. Una vez instalado el tema en su sitio, notará en la parte superior del editor que se ha añadido un botón morado Usar el constructor de Divi. Este botón estará presente en cada página o entrada nueva. Haga clic en este botón para activar el constructor de Divi, con el cual tendrá acceso a los módulos. A continuación haga clic en el botón azul Usar constructor visual para iniciar el el constructor en su modalidad visual. También puede hacer clic en el botón Activar constructor visual al navegar en la interfaz de usuario de su sitio si ha iniciado sesión en WordPress.

Una vez que haya entrado en el constructor visual, puede hacer clic en el botón + para añadir un nuevo módulo en la página. Los módulos nuevos solo pueden agregarse dentro de las filas. Si está construyendo una página de cero, no olvide añadir una fila primero. Tenemos algunos muy buenos tutoriales sobre cómo usar los elementos de las filas y secciones de Divi.

Divi - Insertar módulo Menú de ancho completo

Localice el módulo Menú de ancho completo dentro de la lista de módulos y haga clic sobre el botón gris para añadirlo a la página. La lista de módulos tiene un motor de búsqueda, lo cual significa que también puede escribir “menú” y pulsar enter para encontrar el módulo más rápidamente. Cuando haya agregado el módulo aparecerá la ventana de ajustes correspondientes. Estos ajustes son opciones que están separadas en tres grupos principales: Contenido, Diseño y Avanzado.

Sistema de ayuda de Divi

Dentro de cada pestaña de los ajustes de módulos, filas y secciones, a continuación de las opciones, se incluye un enlace al sistema de ayuda de Divi, que incluye más de 70 vídeos completos con instrucciones de configuración y uso del constructor. Este sistema único les da a usted y a sus clientes la ayuda que necesiten, permitiéndoles aprender al mismo tiempo que crean sus sitios.

Sistema de ayuda de Divi

Los vídeos individuales de cada lista de reproducción se pueden abrir en una ventana emergente, fuera del cuadro de ayuda, lo cual le permite redimensionar o mover la interfaz del vídeo por toda la pantalla para que encuentre la mejor ubicación. El vídeo permanece abierto y anclado a su posición mientras usted explora el constructor, siguiendo el tutorial y construyendo la página. Puede visitar uno por uno los vídeos de la lista, cerrar el vídeo y volver a la lista de reproducción en cualquier momento. Los vídeos solo están disponibles en inglés.

Filtros de búsqueda de opciones

Dentro de todas las ventanas de ajustes de los modulos está disponible un botón de Filtros. Los filtros limitan la visibilidad de muchas opciones disponibles que aparecen dentro de cada ventana. Estos filtros incluyen: Estilos modificados, Contenido / Estilos adaptables, Contenido / Estilos al pasar el cursor y Contenido activo.

Divi - Filtro de búsqueda en módulos

Ver más información aquí.

Opciones de contenido

Dentro de la pestaña Contenido encontrará todos los elementos de contenido del módulo, tales como el menú y el fondo. Todo aquello que controla lo que aparece en el módulo siempre se encontrará en esta pestaña.

Contenido
  • Menú – Seleccione un menú que haya creado desde Apariencia > Menús para usar en este módulo.
  • Logo – Aquí puede subir una imagen para usar como logo, junto al menú.
Elementos
  • Mostrar icono del carrito – Si desea mostrar el icono del carrito (el plugin WooCommerce debe estar instalado y activado) junto al menú, active esta opción.
  • Mostrar icono de búsqueda – Si desea mostrar el icono de búsqueda junto al menú, active esta opción.
Enlace
  • URL del enlace del logo – Si desea que el logo sea un enlace, introduzca la URL de destino aquí.
  • Destino del enlace del logo – Elija si el enlace se abre en la misma ventana o no.
  • URL del enlace del módulo – Escriba una URL válida en este campo para convertir el módulo entero en un enlace. No se creará un enlace si se deja el campo en blanco.
  • Destino del enlace del módulo – Elija si el enlace se abre en la misma ventana o no.
Fondo
  • Fondo – Aquí puede definir un fondo para el módulo. Las opciones son las mismas que para los demás fondos: color, degradado, imagen y vídeo.
Etiqueta de administración
  • Etiqueta de administración – De manera predeterminada, este módulo aparecerá con el nombre Menú de ancho completo en el constructor. La etiqueta de administración le permite cambiar el nombre para identificar el módulo más fácilmente. Cuando use la vista de estructura, estas etiquetas aparecerán dentro del bloque del módulo en la interfaz del constructor.

Opciones de diseño

Dentro de la pestaña Diseño encontrará todas las opciones de estilo del módulo, tales como el comportamiento del menú, y los colores y tamaños. Esta es la pestaña que usará para cambiar la apariencia del módulo. Cada módulo de Divi tiene una larga lista de ajustes de diseño con los cuales podrá modificar casi todo.

Diseño
  • Estilo – Aquí puede ajustar el formato general del menú, intercambiando entre los modos de diseño principal: Alineado a la izquierda, Centrado y Logo centrado en línea.
  • Dirección del menú desplegable – De manera predeterminada, todos los submenús se abren debajo de la barra principal. Si coloca el menú cerca del pie de página, puede que quiera que esos submenús se abran hacia arriba para que no se extiendan fuera del área de la pantalla. Elija aquí la dirección en la cual se abrirán los submenús (hacia arriba o hacia abajo).
  • Hacer enlaces del menú de ancho completo – De manera predeterminada, los enlaces de nivel superior se colocan dentro de los límites del contenedor. Si desea eliminar esa restricción y que el menú se extienda al ancho de la pantalla, active esta opción.
Texto del menú
  • Color de enlace activo – Los colores de enlace activo son los que se resaltan en el menú para mostrar la ubicación en la página actual. Puede cambiar ese color de resaltado con esta opción.
  • Fuente de Menú – Puede cambiar la fuente del texto del menú, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Menú Peso de fuente – Esto controla el peso de la fuente del texto del menú. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Menú Estilo de fuente – Esto controla el estilo de la fuente del texto del menú. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Color de texto de Menú – Si desea cambiar el color de texto del menú, elija el color del selector en esta opción.
  • Tamaño de texto de Menú – Aquí puede ajustar el tamaño del texto del menú. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Espacio entre letras de Menú – El espacio entre letras es la separación entre cada uno de los caracteres del texto del menú. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Menú – La altura de línea afecta el espacio entre cada una de las líneas de texto del menú. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Menú – Elija un estilo de sombra de texto para activar en este elemento. Una vez activado, podrá personalizar aún más el estilo de la sombra del texto. Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
  • Posición horizontal de sombra de texto de Menú – La distancia horizontal de la sombra respecto del texto del menú. Un valor negativo colocará la sombra a la izquierda del texto.
  • Posición vertical de sombra de texto de Menú – La distancia vertical de la sombra respecto del texto. Un valor negativo colocará la sombra arriba del texto.
  • Fuerza de desenfoque de sombra de texto de Menú – Cuanto mayor sea el valor, mayor será el desenfoque; la sombra se hace más amplia y clara.
  • Color de sombra de texto de Menú – Elija el color de la sombra del selector.
  • Alineación del texto de Menú – Esto controla la alineación del título: izquierda, derecha, centrada o justificada.
  • Color de texto – Si el menú se muestra sobre un fondo claro, el color del texto debería ser oscuro. Si el menú se muestra sobre un fondo oscuro, el color del texto debería ser claro.
Menú desplegable
  • Color de fondo del menú desplegable – De manera predeterminada, los menús desplegables heredan el color de fondo definido en la opción anterior. Si desea que los menús desplegables tengan un color diferente, puede seleccionarlo con esta opción.
  • Color de línea del menú desplegable – Dentro de los menús desplegables, los elementos están separados por una línea de 1 píxel. Si desea personalizar el color de esa línea, selecciónelo con esta opción.
  • Color de texto del menú desplegable – De manera predeterminada, el texto dentro del menú desplegable hereda el color del menú principal. Si desea usar un color de texto distinto para el submenú, selecciónelo con esta opción.
  • Color de enlace activo del menú desplegable – Los colores de enlace activo son los que se resaltan en el menú para mostrar la ubicación en la página actual. Puede cambiar ese color de resaltado del menú desplegable con esta opción.
  • Color de fondo del menú para móviles – En dispositivos móviles, el módulo del menú se transforma en un diseño más amigable con ese tipo de pantalla. Puede controlar el color de fondo del menú desplegable en móviles, independientemente del que corresponda a equipos de escritorio.
  • Color de texto del menú para móviles – De manera predeterminada, el texto del menú en dispositivos móviles hereda el color del menú principal. Si desea usar un color de texto distinto en móviles, selecciónelo con esta opción.
Iconos
  • Color del icono del carrito – Aquí puede definir un color personalizado para el icono del carrito.
  • Color del icono de búsqueda – Aquí puede definir un color personalizado para el icono de búsqueda.
  • Color de icono del menú hamburguesa – Aquí puede definir un color personalizado para el icono del menú hamburguesa (se muestra en dispositivos móviles).
  • Tamaño de fuente del icono del carrito – Controle el tamaño de este icono aumentando o disminuyendo el tamaño de la fuente.
  • Tamaño de fuente del icono de búsqueda – Controle el tamaño de este icono aumentando o disminuyendo el tamaño de la fuente.
  • Tamaño de fuente de icono del menú hamburguesa – Controle el tamaño de este icono aumentando o disminuyendo el tamaño de la fuente.

Logo

 

  • Logo Esquinas redondeadas – Aquí puede controlar el radio de la esquina de la imagen del módulo. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
  • Logo Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes de la imagen del módulo: izquierdo, derecho, superior e inferior.
  • Logo Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
  • Logo Color del borde – Esta opción afecta al color del borde de la imagen del módulo. Elija un color personalizado del selector para aplicarlo.
  • Logo Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
  • Sombra de logo – Use estos ajustes para añadir una sombra en la imagen del módulo. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).
  • Filtros – Seleccione aquí el tipo de filtro para aplicar al módulo: podrá controlar valores de Tonalidad, Saturación, Brillo, Contraste, Invertir, Sepia, Opacidad y Desenfoque. También podrá definir el modo de mezcla con la imagen o color de fondo que haya elegido para este módulo, con las siguientes opciones: Normal, Multiplicar, Pantalla, Superposición, Oscurecer, Aclarar, Sobreexposición de color, Subexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Color y Luminosidad.

 

Tamaño
  • Ancho máximo del logo – Si se establece un ancho máximo, se evitará que el logo sobrepase el valor de ancho definido. El ancho máximo se puede usar en combinación con el ajuste estándar de ancho. El ancho máximo reemplaza el valor de ancho normal.
  • Altura máxima del logo – Si se establece una altura máxima, se evitará que el logo sobrepase el valor de altura definido. A medida que el contenido del módulo aumenta y supera la altura máxima, desbordará el contenedor del elemento.
  • Ancho – De manera predeterminada, los elementos se ampliarán al ancho completo de su elemento contenedor. Si desea establecer un ancho estático personalizado, puede hacerlo con esta opción.
  • Alineación del módulo – Aquí puede elegir la posición del módulo en caso de que haya modificado el ancho en el ajuste anterior: alineado a la izquierda, al centro o a la derecha.
  • Ancho máximo – Si se establece un ancho máximo, se evitará que el elemento sobrepase el valor de ancho definido. El ancho máximo se puede usar en combinación con el ajuste estándar de ancho. El ancho máximo reemplaza el valor de ancho normal.
  • Altura mínima – Cuando se establece una altura mínima, el elemento siempre tendrá una altura de al menos la cantidad definida. Esto reemplaza los valores de altura estática más pequeños. A diferencia de la altura, la altura mínima no da como resultado un desbordamiento de contenido y permitirá que la altura del elemento permanezca dinámica.
  • Altura – Esto establece un valor de altura estática para el elemento. Una vez establecida, la altura del elemento ya no será determinada por su contenido interno. El contenido que supere la altura estática del elemento desbordará el contenedor del elemento.
  • Altura máxima – Si se establece una altura máxima, se evitará que el elemento sobrepase el valor de altura definido. A medida que el contenido del módulo aumenta y supera la altura máxima, desbordará el contenedor del elemento.
Espaciado
  • Margen – El margen es el espacio que se agrega fuera del módulo, entre sus extremos y los elementos contiguos (arriba, abajo, a la izquierda o a la derecha). Puede añadir valores personalizados de margen a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
  • Relleno – El relleno es el espacio que se agrega dentro del módulo, entre sus extremos y los elementos internos. Puede añadir valores personalizados de relleno a cualquiera de los cuatro lados del módulo. Para eliminar el relleno personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
Borde
  • Esquinas redondeadas – Aquí puede controlar el radio de la esquina de este módulo. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
  • Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
  • Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
  • Color del borde – Esta opción afecta al color del borde. Elija un color personalizado del selector para aplicarlo.
  • Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
Sombra
  • Sombra – Use estos ajustes para añadir una sombra en el módulo. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).
Filtros
  • Filtros – Seleccione aquí el tipo de filtro para aplicar al módulo: podrá controlar valores de Tonalidad, Saturación, Brillo, Contraste, Invertir, Sepia, Opacidad y Desenfoque. También podrá definir el modo de mezcla con la imagen o color de fondo que haya elegido para este módulo, con las siguientes opciones: Normal, Multiplicar, Pantalla, Superposición, Oscurecer, Aclarar, Sobreexposición de color, Subexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Color y Luminosidad.
Transformación
  • Transformación – Con estos controles puede realizar ajustes visuales mediante una combinación de configuraciones de escala, traslación, rotación, sesgo y origen. Esto le permite crear efectos de diseño avanzados sin necesidad de un programa de diseño gráfico independiente.
Animación
  • Estilo de la animación – Elija un estilo de animación para activar las animaciones en este elemento. Las opciones son: Desvanecer, Diapositiva, Rebotar, Zoom, Voltear, Plegar o Rodar. Una vez activado, podrá personalizar aún más el estilo de animación. Para desactivar las animaciones, elija la opción Ninguna.
  • Repetición de la animación – De manera predeterminada, las animaciones solo se ejecutarán una vez. Si desea que la animación se repita continuamente puede elegir aquí la opción Repetir.
  • Dirección de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer. Elija una de las cinco direcciones de animación diferentes, cada una de las cuales ajustará la posición inicial y final del elemento animado: Centrada, Derecha, Izquierda, Arriba, Abajo.
  • Duración de la animación – Aumente o disminuya la velocidad mediante el ajuste de duración de la animación. Las unidades son en milisegundos y la duración predeterminada de la animación es de un segundo.
  • Retardo de la animación – Si desea añadir un retardo antes de ejecutar la animación puede designar aquí ese retraso en milisegundos. Esto puede ser útil si usa varios módulos animados juntos.
  • Intensidad de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer y Rebotar. La intensidad afecta la suavidad o fuerza de la animación. Si baja la intensidad, la animación será más suave y sutil. Si la aumenta, la animación será más agresiva y ágil.
  • Opacidad inicial de la animación – Si aumenta la opacidad inicial, puede reducir o eliminar el efecto de desvanecido que es aplicado a todos los estilos de animación.
  • Curva de velocidad de la animación – Aquí puede ajustar el método de atenuación de la animación. Las opciones son: Atenuación de entrada y salida, Atenuación, Atenuación de entrada y Atenuación de salida. Atenuar la entrada o salida de la animación creará un efecto más suave en comparación con una curva de velocidad lineal.
  • Animación del menú desplegable – Defina el tipo de animación de los submenús al desplegarse. Puede elegir entre Desvanecer, Expandir, Diapositiva y Voltear.

Opciones avanzadas

Dentro de la pestaña Avanzado encontrará opciones que podrían ser útiles para diseñadores web más experimentados, tales como los atributos CSS y HTML. Aquí puede aplicar código CSS personalizado al módulo, y también puede aplicar clases CSS e ID personalizadas, las cuales pueden ser usadas para personalizar el módulo dentro de la hoja de estilos del tema hijo.

Clases & ID CSS
  • ID CSS – Escriba una ID CSS opcional para usar en este módulo. Puede usar una ID para aplicarle estilos o usarla como anclaje de enlace.
  • Clase CSS – Escriba una o varias clases CSS opcionales para usar en este módulo. Una clase CSS puede ser usada para aplicar estilos.
CSS personalizado

Introduzca en los campos disponibles los códigos CSS personalizados para aplicar en el módulo.

Atributos
  • Texto alternativo del logo – Si eligió no usar un icono, aparecerá esta opción. El texto alternativo proporciona información necesaria en caso de que la imagen no cargue, no aparezca correctamente, o en cualquier otra situación en la cual no se pueda visualizar. También permite que la imagen sea leída y reconocida por los motores de búsqueda.
Visibilidad
  • Desactivar en – Esta opción le permite controlar en qué dispositivos aparecerá la sección. Puede elegir desactivarla de manera individual en tablets, teléfonos móviles o en equipos de escritorio. Esto es especialmente útil si desea usar filas distintas para cada dispositivo, o si desea simplificar el diseño para móviles al eliminar ciertas filas de la página.
  • Desbordamiento horizontal – Aquí puede controlar el desbordamiento de elementos en el eje X. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido
  • Desbordamiento vertical – Aquí puede controlar el desbordamiento de elementos en el eje Y. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido.
  • z-index – Aquí puede controlar la posición del elemento en el eje Z. Los elementos con valores de índice z más altos se colocarán encima de los elementos con valores de índice z inferiores.
Transiciones
  • Duración de la transición – Esto controla la duración de la transición de la animación al pasar el cursor.
  • Retardo de transición – Esto controla el retardo de la transición de la animación al pasar el cursor.
  • Curva de velocidad de transición – Esto controla la curva de velocidad de transición de la animación al pasar el cursor.

Ver demostración en vivo del módulo

Compartir en facebook
Facebook
Compartir en whatsapp
WhatsApp
Compartir en twitter
Twitter
Compartir en linkedin
LinkedIn
Compartir en reddit
Reddit
Compartir en skype
Skype
Compartir en email
Enviar por correo
Compartir en print
Imprimir

12 comentarios en “El módulo Menú de ancho completo”

  1. Buenas,
    Me ha parecido súper útil y las opciones de personalización son infinitas. Se puede modificar así el menú principal? Quiero alinearlo en otra posición y meterle un degradado al color de fondo.
    Este menu de anchura completa se me crea en el justo encima del footer, puedo sustituirlo por el menú principal y colocarlo arriba del todo? Puedo hacer lo mismo con el menú secundario?

    1. Hola, Emma.

      Actualmente, las opciones para la navegación general del sitio son las que se encuentran en el panel Cabecera y navegación > Formato de cabecera del personalizador, aunque en una de las próximas versiones planean ampliarlas (no hay fecha definida aún, pero está anunciado).

      Podés usar un módulo Menú de ancho completo en la parte superior de cualquier página, y ocultar por completo la navegación general del sitio usando la plantilla de página Blank.

      Saludos.

    2. Buenas tardes,
      Soy nuevo en DIVI y estoy trabajando con el desde hace poco tiempo.
      No consigo localizar el módulo de menú de ancho completo dentro de los módulos que trae por defecto.
      Tampoco encuento otros que he visto en varios tutoriales como el de imagen de ancho completo.
      ¿Hay algún lugar donde deba activarlos?
      Muchas gracias.

    1. Hola, Flor.

      Gracias por tu comentario.

      Actualmente no es posible fijar el menú creado con este módulo, pero podés usar el plugin Sticky Menu (or Anything!) on Scroll con la siguiente configuración en Ajustes > Sticky Menu (or Anything!) Settings:

      Basic settings > Sticky Element: .et_pb_fullwidth_menu
      Space between top of page and sticky element (optional): X (valor numérico que dependerá de la altura en píxeles de la cabecera, si es que la hay).
      Do not stick element when screen smaller than (optional): 981
      Advanced settings > Z-index (optional): 99

      Espero que te sirva.

      Saludos.

Dejar un comentario

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

 

Ir arriba

Oferta Cyber Monday

25% de descuento
Developer $67 / Lifetime $187

¡Últimas horas!

Horas
Minutos
Segundos
¡Finalizada!