Cómo incluir la barra de menú principal en el diseño de su página Divi

La navegación es una parte vital de la experiencia del usuario en su sitio web. Es importante asegurarse de que sus visitantes puedan navegar sin problemas a través de su sitio web sin tener que comprometer la estética. De forma predeterminada, la barra de menú principal de WordPress se coloca en la parte superior de cada página y se considera separada del diseño de página que elija seguir. Sin embargo, en muchos casos, incluir su menú en el diseño general de la página puede traer resultados sorprendentes. Le dará a su sitio web una apariencia más coherente.

En esta publicación, le mostraremos cómo incluir la barra de menú principal en el diseño de su página Divi. Este es un cambio simple pero dinámico en la forma en que se muestra normalmente el menú principal, lo que brinda un aspecto único a cualquier proyecto Divi.

¡Hagámoslo!

Suscríbete a nuestro canal de Youtube

Avance

Comencemos echando un vistazo al resultado final en diferentes tamaños de pantalla:

Configuración del personalizador de temas

Ir al personalizador de temas

Antes de comenzar a construir nuestro diseño, comencemos con algunos cambios en el Personalizador de temas. Vaya a su Panel de WordPress> Apariencia> Personalizar .

Guardar imagen de fondo

Como vamos a separar la barra de menú principal de la parte superior, necesitaremos algo para cubrir el espacio que ocupa normalmente. Usaremos la siguiente imagen de fondo, así que guárdala en tu computadora:

Cargar imagen de fondo en la configuración general

Luego, vaya a Configuración general> Fondo y cargue la imagen en el fondo de su sitio web.

• Imagen de fondo de Strech: habilitado
• Posición de fondo: fijo

Configuración de la barra de menú principal

También vamos a fusionar la barra de menú principal lista con nuestro diseño Divi. Para hacer eso, primero necesitaremos modificar la configuración de la barra de menú principal. Vaya a Encabezado y navegación> Barra de menú principal y use la siguiente configuración:

• Altura máxima del logotipo: 100
• Tamaño del texto: 18
• Espaciado entre letras: -1
• Fuente: Poppins
• Color del texto: # 333333
• Color de enlace activo: # f55c83
• Color de fondo: rgba (255,255,255,0)
• Color de fondo del menú desplegable: #FFFFFF

Agregar una nueva página

CSS personalizado de la página

Para que la barra de menú principal se superponga al diseño de nuestra página, necesitaremos un poco de código CSS. Puede elegir si desea que la superposición se aplique a todo su sitio web o solo a una página en particular. Si elige agregarlo a una sola página, agregue el siguiente código CSS a la configuración de su página:

#main-header {
margin-top: 140px;
}

Agregar nueva sección

Color de fondo

¡Empecemos con el diseño! Agregue una nueva página, cambie a Visual Builder y agregue su primera sección. Abra la configuración de la sección a continuación y agregue 'rgba (255,255,255,0.81)' como color de fondo. Esto permitirá que se muestre la imagen de fondo de nuestro sitio web.

Espaciado

Continúe yendo a la configuración de Espaciado y agregue el siguiente margen y relleno personalizados:

• Margen superior e inferior: 100 px
• Margen izquierdo y derecho: 60px
• Acolchado superior: 135px
• Acolchado inferior: 0px

Esquinas redondeadas

Agrega '30px' a cada una de las esquinas de tu sección también.

Frontera

Luego, agregue un borde superior a su sección:

• Ancho del borde superior: 35px
• Color del borde superior: # 333333

Sombra de la caja

Para terminar, agregue una sombra de caja muy sutil.

• Fuerza de desenfoque de sombra de caja: 61px
• Fuerza de propagación de la sombra de caja: -13px

Agregar fila n. ° 1

Estructura de la columna

¡Es hora de comenzar a agregar filas y módulos! Agregue su primera fila usando dos columnas del mismo tamaño.

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de Tamaño:

• Hacer esta fila de ancho completo: Sí
• Ecualizar alturas de columna: Sí

Espaciado

Agregue un poco de relleno personalizado a continuación:

• Relleno superior: 250 px (escritorio), 50 px (tableta y teléfono)
• Acolchado inferior: 200 px (escritorio), 100 px (tableta), 50 px (teléfono)
• Columna 1 Relleno izquierdo: 50 px (escritorio), 0 px (tableta y teléfono)

Agregar módulo de texto de título a la columna 1

Configuración de texto H1

Ahora podemos comenzar a agregar los módulos. Comenzaremos con la primera columna agregando un nuevo título Módulo de texto.

• Fuente de encabezado: Poppins
• Peso de la fuente del encabezado: Medio
• Tamaño del texto del encabezado: 120 px (escritorio), 80 px (tableta), 58 px (teléfono)

Agregar un color diferente a una parte de la copia

Puede cambiar fácilmente el color de una palabra en su título cambiando a la pestaña Texto y agregando un color a la palabra que elija mediante el uso de etiquetas de extensión.

Agregar módulo de texto descriptivo a la columna 1

Configuración de texto

Justo debajo del módulo de texto anterior, continúe y agregue una descripción del módulo de texto utilizando la siguiente configuración de texto:

• Fuente de texto: Poppins
• Peso de la fuente del texto: Regular
• Tamaño del texto: 20px (escritorio), 15px (tableta y teléfono)
• Altura de la línea de texto: 2em

Espaciado

Necesitaremos un margen adicional para este módulo de texto:

• Margen superior e inferior: 50px

Agregar módulo de botones a la columna 1

Configuración de botones

El último módulo de esta columna es un módulo de botones. Después de haber agregado la copia de CTA, cambie los estilos de los botones:

• Usar estilos personalizados para el botón: Sí
• Color del texto del botón: #FFFFFF
• Color de degradado 1: # f45085
• Color de degradado 2: # f88c7e
• Dirección del gradiente: 137 grados
• Ancho del borde del botón: 0px
• Radio del borde del botón: 40 px
• Fuente del botón: Poppins
• Peso de la fuente del botón: Regular
• Estilo de fuente: mayúsculas

Espaciado

Abra la configuración de Espaciado a continuación y agregue algo de margen y relleno a su botón:

• Margen inferior: 100 px (escritorio), 20 px (tableta y teléfono)
• Acolchado superior e inferior: 15px
• Relleno izquierdo y derecho: 50px

Sombra de la caja

Por último, pero no menos importante, usaremos una sombra de cuadro muy sutil para crear más profundidad en nuestra página:

• Fuerza de desenfoque de sombra de caja: 55px
• Fuerza de propagación de la sombra de caja: -4px
• Color de sombra: rgba (84,84,84,0.25)

Agregar módulo de imagen a la columna 2

Guardar y subir imagen

La segunda columna solo contiene un módulo de imagen. Estamos usando una maqueta que es parte del paquete de diseño de marketing digital de Divi. Continúe y guarde la imagen a continuación en su computadora. Después de hacerlo, agréguelo al Módulo de imagen en su segunda columna.

Agregar fila n. ° 2

Estructura de la columna

¡Es hora de agregar la segunda fila! Elija la siguiente estructura de columnas para ello:

Color de fondo de la columna 1

Luego, abra la configuración de la fila y agregue '#FFFFFF' como Color de fondo de la columna 1.

Fondo degradado del botón Copiar

Nos ahorraremos algo de tiempo y copiaremos el degradado que ya usamos para el Módulo de botones. Para hacer eso, abra el Módulo de botones, vaya a la configuración del botón, haga clic con el botón derecho en el fondo degradado y cópielo.

Pegar fondo degradado en la columna 2

Luego, regrese a la configuración de su fila y pegue el fondo degradado en la segunda columna.

Color de fondo de la columna 3

Para la tercera columna, usamos el color de fondo '#FFFFFF'.

Dimensionamiento

Vaya a la configuración de tamaño a continuación y cambie la configuración:

• Usar ancho personalizado: Sí
• Ancho personalizado: 2600px
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

También necesitaremos algo de relleno adicional:

• Acolchado superior e inferior: 0px
• Relleno superior e inferior de la columna: 30 px

Sombra de la caja

Por último, pero no menos importante, usaremos una sombra de cuadro sutil:

• Fuerza de desenfoque de sombra de caja: 61px
• Fuerza de propagación de la sombra de caja: -20px

Agregar módulo de propaganda n. ° 1

Elegir icono

Necesitaremos tres módulos Blurb en total. Comenzaremos con uno y luego lo clonaremos para ahorrar tiempo. Continúe y agregue un nuevo módulo Blurb a la primera columna. Después de agregar su contenido, seleccione un icono de su elección.

Configuración de iconos

Cambie la configuración de su icono en consecuencia:

• Color del icono: # f55c83
• Colocación del icono: izquierda
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 88px (escritorio y tableta), 50px (teléfono)

Configuración del texto del título

Abra la configuración del texto del título a continuación y realice algunos cambios:

• Fuente del título: Poppins
• Peso de la fuente del título: Medio
• Tamaño del texto del título: 34 px (escritorio y tableta), 23 px (teléfono)

Configuración del texto del cuerpo

El cuerpo del texto también debe modificarse:

• Fuente del cuerpo: Poppins
• Peso de la fuente del cuerpo: Regular
• Tamaño del texto del cuerpo: 16 px (escritorio), 14 px (tableta y teléfono)
• Altura de la línea del cuerpo: 2em

Espaciado

Y para crear un diseño más atractivo estéticamente, agregue algo de relleno:

• Acolchado superior y acolchado inferior: 100px
• Relleno izquierdo y derecho: 50 px (escritorio y tableta), 10 px (teléfono)

Clonar el módulo de Blurb dos veces y colocarlo en las columnas restantes

Continúe y clone sus módulos Blurb dos veces. Después de hacerlo, colóquelos en las columnas restantes.

Cambiar el módulo de Blurb en la columna 2

Cambiar el color del icono

El tercer módulo de Blurb no necesita ningún cambio, el segundo sin embargo sí. Comience cambiando el color del icono a blanco.

Cambiar el color del texto

Abra la Configuración de texto a continuación y cambie el Color del texto a 'Claro'.

Deshabilitar la navegación fija

Para asegurarnos de que la barra de menú principal mantenga su lugar dentro del diseño, también necesitaremos deshabilitar la barra de navegación fija. Para hacerlo, vaya a su Tablero de WordPress> Divi> Opciones de tema> Deshabilite la opción 'Barra de navegación fija' y guarde la configuración .

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla:

Pensamientos finales

En esta publicación, le mostramos cómo incluir creativamente la barra de menú principal en el diseño general de su página Divi. Este enfoque le ayudará a crear una apariencia más coherente en su sitio web. También hemos creado un ejemplo desde cero. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!