¿Le gustaría crear un menú de navegación vertical para que presente más elementos en primer plano en DIVI?
Los menús de navegación verticales pueden ser útiles para algunos sitios web que necesitan más elementos de menú en primer plano. Los menús horizontales pueden ser complicados para adaptarse a todos los enlaces de menú necesarios, especialmente en anchos de navegador más pequeños.
En este tutorial, le mostraremos cómo crear un menú de navegación vertical utilizando Divi Theme Builder.
Esto le dará más espacio para exhibir los elementos del menú de WordPress.
¡Empecemos!
vista
Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.
Vamos al tutorial.
Creación de un nuevo encabezado global
Para este tutorial, crearemos el menú de navegación vertical en un encabezado global utilizando el generador de temas de Divi.
Para comenzar, vaya al panel de control de WordPress y navegue hasta Divi > Generador de temas.
Luego haga clic en el área "Agregar encabezado global" del plantilla de sitio web predeterminado y seleccione "Crear encabezado global" en la lista desplegable.
Lea también: Cómo crear un encabezado global con Theme Builder en DIVI
Diseño de diseño de sección vertical
En el editor de diseño de encabezado global, abra la configuración de la sección normal que ya existe y actualice lo siguiente.
- Ancho máximo: 300px
- Altura: 100vh
- Margen interno: 4vh superior, 0px inferior
Continúe con la personalización agregando un cuadro de sombra de la siguiente manera:
- Cuadro de sombra: ver captura de pantalla
- Posición vertical de la sombra del cuadro: 0px
- Fuerza de desenfoque de sombra de caja: 20px
- Fuerza de propagación de la sombra del cuadro: -10px
- Color de sombra: rgba(0,0,0,0.3)
Para asegurarse de que el menú de navegación vertical permanezca visible a la izquierda mientras el usuario se desplaza, actualice la pestaña Avanzado a una posición fija y actualice el índice z de la siguiente manera:
- Estación fija
- Índice Z: 9999
Para asegurarnos de que podamos ver la navegación del submenú que se extenderá fuera de la sección, agregue el siguiente CSS personalizado al elemento principal:
overflow: visible !important;
Su sección ahora estará en un diseño vertical en el lado izquierdo de la plantilla.
Diseña el menú vertical
Con la sección en su lugar, estamos listos para diseñar el menú vertical. Para hacer esto, usaremos un módulo de menú con CSS personalizado para personalizar la navegación para que se muestre verticalmente.
También utilizaremos la unidad de longitud vh para que el menú se adapte bien a las diferentes alturas del navegador.
Agregar la línea
Para comenzar, agregue una fila a una columna en la sección.
A continuación, actualice los parámetros de la línea de la siguiente manera:
Tamaño y espaciado
- Usar ancho de canalón personalizado: SÍ
- Espacio entre columnas: 1
- Ancho máximo: 100%
- Ancho máximo: 80%
- Margen interno: 3vh superior, 3vh inferior
frontera
- Ancho del borde: 1px
- Color del borde: #eeeeee
Módulo de menú agregado
Dentro de la fila de una columna, agregue un nuevo módulo de Menú.
Seleccione un menú para mostrar en la pestaña Contenido.
A continuación, agregue el logotipo de su sitio web como contenido dinámico debajo del botón Logo.
En la pestaña Estilo, actualice lo siguiente:
- Estilo: Centrado
- Menú de fuentes: Nunito Sans
- Color del texto del menú: #535b7c
- Menú Tamaño de texto: 18 px (escritorio), 14 px (tableta y teléfono)
- Altura de la fila del menú: 2 em
- Color de la fila desplegable: #535b7c
- Menú desplegable Color de enlace activo: #535b7c
- Color del icono del carrito: #535b7c
- Color del icono de búsqueda: #535b7c
- Color del icono del menú de hamburguesas: #535b7c
- Margen interno: 2vh superior, 2vh inferior
Se agregó CSS personalizado para el menú.
El menú necesita CSS personalizado para lograr la navegación vertical que buscamos lograr. Para comenzar, vaya a la pestaña avanzada y agregue el siguiente CSS personalizado al enlace del menú y al logotipo del menú.
Enlace de menú CSS (escritorio):
width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;
Enlace del menú CSS (tableta):
width: auto;
border:none;
Logotipo del menú CSS:
margin-bottom: 20px;
A continuación, agregue una clase CSS personalizada al módulo Menú de la siguiente manera:
Clase CSS: et-vert-menú
Esta clase se usará para apuntar a este menú en particular en nuestro CSS personalizado externo que agregaremos usando un módulo de código.
Agregar CSS personalizado con el módulo Código
En el módulo Menú, agregue un módulo Código.
Luego pegue el siguiente código en el área de código (asegúrese de colocarlo entre las etiquetas de estilo):
/* MenudeNavigation Style Vertical*/
.et-vert-menu .et_pb_menu__menu>nav>ul {
flex-direction: column;
margin-left: 0px!important;
margin-right: 0px!important;
width: 100%;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
margin: 10px0!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
display:block!important;
padding: 0px!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul ul {
padding: 0px!important;
top: 0px!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
left:calc(100%- 1px) !important;
top:0px!important;
}
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
content: "5"!important; /*change arrow icon for submenu*/
right: 20px!important;
}
.et-vert-menu .nav li ul {
left: calc(100%- 1px) !important; /*align submenu to the right of menu link*/
}
@media alland (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
width: 100%; /*width of the vertical navigation menu*/
}
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/
#et-main-area {
width: calc(100%- 300px);
margin-left: 300px;
}
}
Diseña iconos y botones de seguimiento de redes sociales
Ahora que el menú está completo, podemos agregar un botón y algunos enlaces de seguimiento de redes sociales para completar el encabezado vertical.
Agregar la línea
Agregue una nueva fila una columna debajo de la fila actual.
Añadir un botón
Luego agregue un módulo Button a la línea.
Actualice la configuración del botón de la siguiente manera:
- Alineación de botones: centro
- Usar estilos personalizados para el botón: SÍ
- Tamaño del texto del botón: 18 px (escritorio), 14 px (tableta y teléfono)
- Color del texto del botón: #ffffff
- Color de fondo del botón: #535b7c
- Ancho del borde del botón: 0 píxeles
A continuación, vaya a la pestaña avanzada y pegue el siguiente CSS personalizado en el elemento principal:
Elemento principal CSS (escritorio)
display:block;
width: 100%;
Elemento principal CSS (tableta)
display:inherit;
Se agregaron iconos de seguimiento de redes sociales
Debajo del botón, agregue un módulo Síganos en las redes sociales.
Añade las redes sociales que quieras debajo de la pestaña contenido.
En la pestaña Estilo, actualice lo siguiente:
- Alineación del módulo: Centro
- Color del icono: #535b7c
Luego abra la configuración de cada una de las redes sociales y elimine el color de fondo.
Luego agregue un pequeño margen superior de la siguiente manera:
- Margen: pico 3vh
Actualizar parámetros de línea
Una vez que los íconos de seguimiento de redes sociales estén listos, abra Configuración de línea y ajuste lo siguiente:
- Usar ancho de canalón personalizado: SÍ
- Espacio entre columnas: 1
- Margen interno: 3vh superior, 0px inferior
Guardar diseño y plantilla
Una vez hecho esto, guarde el diseño y la plantilla.
Resultado final
Aquí está el resultado final en una página en vivo.
¡¡¡Descarga DIVI ahora!!!
Conclusión
El menú de navegación vertical que se muestra aquí tiene una posición fija. Sin embargo, si necesita más espacio para elementos de menú o contenido adicionales, puede cambiar la posición de la sección a absoluta
La configuración de la sección vertical también abre la puerta a la creación de barras laterales personalizadas.
Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
