Uso del módulo de menú de ancho completo de Divi frente al módulo de menú normal
Publicado: 2022-06-06Una parte esencial de cualquier sitio web que a menudo se pasa por alto es el menú de navegación. La navegación es un elemento clave en términos de crear una experiencia de usuario agradable. Si se hace correctamente, un menú puede mejorar en gran medida la experiencia del usuario y facilitar que los visitantes naveguen por el sitio web.
Divi viene con 2 tipos diferentes de módulos de navegación; Menú de ancho completo y menú normal. En este artículo, discutiremos y demostraremos algunas de las diferencias entre el módulo de menú de ancho completo de Divi y el módulo de menú normal. Si alguna vez se ha preguntado qué módulo usar para su sitio web, esperamos que este artículo lo ayude a comprender las diferencias clave y los casos de uso de estos módulos. También le daremos instrucciones paso a paso para personalizar el diseño de un menú de ancho completo y un módulo de menú regular.
¡Empecemos!
Vistazo
Escritorio: Módulo de menú de ancho completo
Escritorio: módulo de menú regular
Móvil: módulo de menú de ancho completo
Móvil: módulo de menú regular
Diferencias clave entre el módulo de menú de ancho completo de Divi y el módulo de menú normal
Aquí hay una descripción general de las diferencias clave entre un módulo de menú de ancho completo y un módulo de menú normal.
Contenedor de sección normal frente a ancho completo
El módulo de menú de ancho completo requiere una sección de ancho completo en Divi. Debido a que la sección es de ancho completo, cualquier módulo que agregue ocupará todo el ancho de la página. A diferencia de la sección del menú normal, no puede tener varios módulos uno al lado del otro. El módulo de menú de ancho completo es excelente si desea que el menú abarque el ancho de la página y no necesita ningún módulo adicional junto a él.
El módulo de menú regular requiere una sección regular en Divi. Las secciones regulares tienen muchos diseños de fila diferentes y puede usar cualquier diseño con el módulo de menú regular. Esto le permite incluir contenido adicional junto con el menú usando las otras filas para crear una barra de menú más compleja. Gracias a las muchas opciones de fila de Divi, puedes crear fácilmente diseños únicos para tu barra de menú utilizando el módulo de menú normal.
Configuraciones de ancho incorporadas frente a editar el contenedor de filas
La otra diferencia clave entre los menús normal y de ancho completo es que tienen diferentes formas de editar el ancho y el espaciado del módulo.
El módulo de menú de ancho completo viene con algunas configuraciones integradas para editar el ancho. Puede hacer que el texto del menú sea de ancho completo con la opción "hacer enlaces de menú de ancho completo". Esto extiende el módulo de menú de ancho completo más allá del ancho de contenido predeterminado.
Para lograr un aspecto similar con un módulo de menú normal, deberá editar la configuración de la fila que lo contiene. Por ejemplo, edite el ancho, el ancho máximo y la alineación de la fila que contiene el menú normal para ampliar el módulo de menú normal más allá del ancho de contenido predeterminado.
Uso del módulo de menú de ancho completo de Divi frente al módulo de menú normal
Lo que necesitas para empezar
Si desea seguir este tutorial, instale y active el tema Divi y asegúrese de tener la última versión de Divi en su sitio web.
Ahora, ¡estás listo para comenzar!
Diseño de un módulo de menú de ancho completo
Agregue una nueva página a su sitio web y asígnele un título, luego seleccione la opción para usar Divi Builder.
Para este tutorial, construiremos el diseño desde cero, así que seleccione la opción Comenzar a construir.
Cuando crea una página en blanco por primera vez, viene precargada con una sección normal. Primero agregue una sección de ancho completo debajo de la sección normal.
Luego, elimine la sección normal de la página.
Agregue un módulo de menú de ancho completo a la fila de ancho completo.
Agregue un color de fondo al menú de ancho completo.
- Fondo: #4e7560
Agregue un logotipo al menú de ancho completo.
A continuación, navegue hasta las opciones de Texto del menú en la pestaña Diseño.
- Fuente del menú: Poppins
- Color del texto del menú: #FFFFFF
- Tamaño del texto del menú: 20px
A continuación, navegue a la configuración del menú desplegable.
- Color de fondo del menú desplegable: #FFFFFF
- Color de la línea del menú desplegable: #7EAD70
- Color del texto del menú desplegable: #000000
Establece el fondo del menú móvil y el color del texto.
- Color de fondo del menú móvil: #FFFFFF
- Color del texto del menú móvil: #000000
A continuación, cambie la configuración del Menú Hamburguesa.
- Color del icono del menú de hamburguesas: #FFFFFF
- Icono de menú de hamburguesa Tamaño de fuente: 40px
Finalmente, agregue un poco de relleno superior e inferior.
- Acolchado superior: 10px
- Acolchado inferior: 10px
¡Ahora su módulo de menú de ancho completo está completo!
Diseño de un módulo de menú regular
Agregue una nueva página a su sitio web y asígnele un título, luego seleccione la opción para usar Divi Builder.
Seleccione Comenzar a construir para construir desde cero.
La página viene precargada con una sección normal vacía. A esta sección, agregue un color de fondo.
- Fondo: #4e7560
A continuación, retire el acolchado superior e inferior.
- Acolchado superior: 0px
- Acolchado inferior: 0px
Agregue una nueva fila con el diseño que se muestra a continuación.
En la configuración de las filas, iguale las alturas de las columnas.
- Igualar alturas de columna: Sí
En la configuración de CSS del elemento principal en la pestaña Avanzado, agregue el siguiente CSS personalizado.
align-items:center;
Agregue un módulo de texto a la columna más a la izquierda. Usaremos esto para mostrar el nombre del sitio web en lugar de cargar un logotipo. Esta es una ventaja única del módulo de menú regular porque puede usarlo junto con otros módulos para agregar elementos adicionales a la barra de menú.
- Texto H1: "Divi Blog"
Establezca la Alineación de texto a la izquierda en el escritorio.
- Alineación de texto-Escritorio: Izquierda
Configure la Alineación del texto para que se centre en la tableta y el móvil.
- Alineación de texto-Tableta: Centro
- Alineación de texto-Móvil: Centro
A continuación, navegue hasta la configuración del texto del encabezado.
- Fuente del título: Poppins
- Peso de la fuente del encabezado: Negrita
- Color del texto del título: #FFFFFF
- Tamaño del texto del encabezado: 40 px
Ahora que el título "Divi Blog" está listo, agreguemos el módulo de menú normal a la columna central.
Elimina el color de fondo.
- Antecedentes: Ninguno
A continuación, navegue a la pestaña de diseño. En Diseño, cambie el estilo a Centrado.
- Estilo: Centrado
Ahora podemos modificar los estilos de texto del menú.
- Fuente del menú: Poppins
- Color del texto del menú: #FFFFFF
- Tamaño del texto del menú: 20px
Modifique también los estilos del menú desplegable.
- Color de la línea del menú desplegable: #7EAD70
- Color del texto del menú desplegable: #000000
A continuación, cambie la configuración del menú móvil.
- Color de fondo del menú móvil: #FFFFFF
- Color del texto del menú móvil: #000000
Por último, modifica la configuración del menú de hamburguesas.
- Color del icono del menú de hamburguesas: #FFFFFF
- Icono de menú de hamburguesa Tamaño de fuente: 40px
Esto completa el estilo del módulo de menú regular. Para finalizar el diseño del menú, agreguemos un botón de llamada a la acción en la columna de la derecha. Primero, agregue el módulo de botones.
Cambia el texto del botón.
- Botón: “Prueba gratuita de 30 días”
Establezca la alineación del botón en el centro.
- Alineación de botones: Centro
Establezca "Usar estilos personalizados para el botón" en Sí y modifique el color del texto.
- Usar estilos personalizados para el botón: Sí
- Color del texto del botón: #FFFFFF
Establecer el fondo del botón.
- Fondo del botón: #7EAD70
Establezca el fondo del botón al pasar el mouse en naranja.
- Fondo del botón al pasar el mouse: #D19929
A continuación, establezca el ancho, el radio y la fuente del borde del botón.
- Ancho del borde del botón: 0px
- Radio del borde del botón: 40px
- Fuente del botón: Poppins
Finalmente, configure el relleno izquierdo y derecho.
- Relleno izquierdo: 30px
- Relleno-Derecho: 30px
Resultado final
Ahora echemos un vistazo al resultado final de nuestros módulos de menú.
Escritorio: Módulo de menú de ancho completo
Escritorio: módulo de menú regular
Móvil: módulo de menú de ancho completo
Móvil: módulo de menú regular
Pensamientos finales
Esperamos que este artículo te haya ayudado a comprender algunas de las diferencias clave entre el módulo de menú de ancho completo de Divi y el módulo de menú normal. Ambos son increíblemente fáciles de personalizar para crear menús atractivos para su sitio web. El módulo de menú de ancho completo ocupa el ancho de la página y viene con opciones integradas para modificar y ajustar el ancho. Por otro lado, el módulo de menú normal se puede usar junto con otros módulos y está contenido dentro de una fila, donde se pueden ajustar el ancho y otras opciones de tamaño. ¿Utiliza un módulo de menú de ancho completo o un módulo de menú normal en su sitio web? ¡Nos encantaría saber de ti en los comentarios!