Cómo crear un menú de navegación vertical (o encabezado) para su div.

Los menús de navegación vertical pueden ser útiles para ciertos sitios web que necesitan más elementos de menú en primer plano. Los menús horizontales pueden ser difíciles de igualar 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 personalizado utilizando el constructor de temas. Esto le permitirá más espacio para presentar los artículos en el menú de WordPress. Y tendrá toda la potencia para agregar módulos de división adicionales al encabezado vertical y diseñarlos junto con el Builder Divi.
¡Vamos a empezar! Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial.



Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para cargar la plantilla, navegue por el creador de temas Divin en la mochila de su sitio de WordPress.
Cargue la plantilla global de sitio predeterminada y luego, en la esquina superior derecha, verá un icono de dos flores. Haga clic en el icono.

Navegue por la pestaña Importar, cargue el archivo JSON que podría descargar en esta publicación y haga clic en “Importar el Div Div Theme Builder”.

Guarde los cambios en la división de Divic Builder Después de haber cargado el archivo, notará un nuevo encabezado global y sótano en su plantilla de sitio web predeterminada. Guarde los cambios en la división de la división tan pronto como desee que se active la plantilla.

Pasemos al tutorial, ¿no? Parte 1: Construyendo un nuevo encabezado global para este tutorial, construiremos el menú de navegación vertical en un encabezado global utilizando el constructor de temas. Sin embargo, le mostraremos cómo agregar el mismo menú al cuerpo de una plantilla de página al final de la publicación, solo si desea usarlo además del menú principal de su sitio.

Para comenzar, vaya al tablero de WordPress y navegue en Divin> Temor Builder. Luego, haga clic en el área “Agregar show global” en la plantilla de sitio predeterminada y seleccione “Crear show global” en el menú Drop -down. Luego seleccione la opción “Construir desde Scratch”.
Parte 2: Diseño de la apariencia de la sección vertical en el editor de apariencia de encabezado global, abra la configuración de la sección regular ya existente y actualice lo siguiente.

Ancho (escritorio): 300 PX

Ancho (tableta y teléfono): 100%
Altura (escritorio): 100 VH
Altura (tableta y teléfono): automáticamente
Relleno (escritorio): 4VH arriba, 0 px abajo
Revestimiento (tableta y teléfono): 0 px arriba, 0 px abajo
Continúe el diseño agregando una caja de caja de la siguiente manera:
Box Shadow: Ver captura de pantalla

Box Shadow Posición vertical: 0px
Poder de poco claro de la sombra de la caja: 20 px
Poder de extender la sombra de la caja: -10px
Color de la 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 ejecuta, actualice la posición fija y actualice el índice Z de la siguiente manera:
Posición: fijo

IND ÍNDICE: 9999
Para asegurarnos de que podamos ver el submenú de navegación que se extenderá fuera de la sección, agregue los siguientes CSS personalizados al elemento principal:
Desbordamiento: ¡Visible! Importante;

Ahora su sección está en una apariencia vertical en el lado izquierdo de la plantilla.
Parte 3: Diseño del menú vertical Con la sección Sección, estamos listos para diseñar el menú vertical. Para hacer esto, utilizaremos un módulo de menú con algunos CSS personalizados para enfatizar la navegación que se mostrará verticalmente. También usaremos la unidad de longitud VH, de modo que el menú se escala maravillosamente con diferentes alturas del navegador. Agregar la fila para iniciar, agregue una fila con una columna a la sección. Luego actualice la configuración de la fila de la siguiente manera:

Tamaño y forro

El ancho de la canaleta: 1

Ancho: 100%
Ancho máximo: 80%
Revestimiento (escritorio): 3VH arriba, 3VH abajo
Revestimiento (tableta y teléfono): 0 px arriba, 0 px abajo
Frontera
Ancho fronterizo: 1 PX
Color del borde: #EEEEEE

Agregue el módulo de menú dentro de la fila con una columna, agregue un nuevo módulo de menú.
Seleccione un menú que se mostrará bajo el contenido del contenido.
Luego agregue el logotipo de su sitio como contenido dinámico en el interruptor del logotipo.

En la pestaña Diseño, actualice lo siguiente:

Estilo: centrado

Menú de fuentes: Nunito Sans

Color de texto del menú: # 535b7c
Menú Tamaño del texto: 18 PX (escritorio), 14 PX (tableta y teléfono)
La altura de la línea de menú: 2em
Menú de la línea de color que niega: # 535b7c
Enlace de color del menú de salida del menú enlace activo: # 535b7c
Icono de canasta de compras en color: # 535b7c
Icono de búsqueda de color: # 535b7c
Icono de menú de hamburguesas de color: # 535b7c

Junta (escritorio): 2 VH arriba, 2 VH abajo
Relleno (escritorio): 10 px arriba, 10 px abajo
Parte 4: Agregar CSS personalizado para el menú necesita algunos CSS personalizados para obtener la navegación vertical que queremos lograr. Para iniciar, acceda a la pestaña avanzada y agregue el siguiente CSS personalizado al enlace del menú y el logotipo del menú.

Relleno: 1VH 15px;
Antecedentes: #F8F8F8;

Border-radio: 3px;

Border: 1px Solid #EEEEEE;
Menú CSS de enlace (tableta):
Ancho: auto;
Borde: ninguno;
Logotipo del menú CSS: Margen-Bottom: 20px;
Luego agregue una clase CSS personalizada al módulo de menú de la siguiente manera: Clase CSS: ET-Verter Men
Se utilizará para dirigirse a este menú especial en nuestro CSS personalizado externo que agregaremos utilizando un módulo de código. Agregar CSS personalizado con el módulo de código en el módulo de menú, agregue un nuevo módulo de código.
Luego pegue el siguiente código en el cuadro de código (asegúrese de colocarlo entre etiquetas de estilo): /* Menú de navegación vertical de estilo* /
.et-ver-menu .et_pb_men__menu> nav> ul {

Dirección flexible: columna;

Margen-izquierda: 0px! IMPORTANTE;

Margen-derecha: 0px! IMPORTANTE;
Ancho: 100%;
}
.et-ver-menu .et_pb_men__menu> nav> ul> li {
Margen: 10px 0! IMPORTANTE;
}
.et-ver-menu .et_pb_men__menu> nav> ul> li> li {
Display: Bloque! Importante;
Relleno: 0px! IMPORTANTE;
}
.et-ver-menu .et_pb_men__menu> nav> ul {
Relleno: 0px! IMPORTANTE;
Arriba: 0px! Importante;
}
.et-ver-menu .et_pb_men__menu> nav> ul> li> ul {
Izquierda: Calc (100% – 1px)! Importante;
Arriba: 0px! Importante;
}
.et-ver-Menu .et-Menu .Menu-Print-ha-Children> A: First-Child: After {
Contenido: “5”! Importante; /*Cambiar icono de flecha para submenu*/
Derecha: 20px! Importante;
}
.et-ver-Menu .nav li ul {izquierda: calc (100%-1px)! /*Alinear Sume a la derecha del enlace del menú*/
}
@Media all y (min-width: 981px) {
.et-verte-menu .et_pb_men__menu, .et-ver-menu .et_pb_men__enu> Nav {
Ancho: 100%; /*Ancho del menú de navegación vertical*/
}
/*Ajuste el ancho del contenido principal y el área de pie de página para dejar espacio para el encabezado vertical fijo*/
#Et-main-rea {
Ancho: Calc (100% – 300px);
Margen-izquierda: 300px;
}
}
Parte 5: Diseño del botón y los íconos de seguimiento de las redes sociales Ahora que el menú está completo, podemos agregar un botón y algunas redes sociales siguen los enlaces para completar el encabezado vertical. Agregar la fila Agregue una nueva fila con una columna debajo de la fila actual.
Agregando el botón y luego agregue un nuevo módulo de botón en una fila.
Actualice la configuración del botón de la siguiente manera:
Alineación de botones: centro
Tamaño de texto de texto: 18 PX (escritorio), 14 PX (tableta y teléfono)

El color del texto del botón: #ffffff

El color de fondo del botón: # 535B7C

El ancho del nudo del botón: 0 PX
Luego acceda a la pestaña avanzada y pegue los siguientes CSS personalizados en el elemento principal: elemento principal CSS (escritorio) Display: Block;
Ancho: 100%; Elemento principal CSS (tableta) Pantalla: heredar;
Agregando íconos de seguimiento en las redes sociales bajo el botón, agregue un módulo de seguimiento de las redes sociales.
Agregue las redes sociales deseadas a la pestaña de contenido.
En la pestaña Diseño, actualice lo siguiente:

Alineación del módulo: centro
Icono de color: # 535b7c

Luego abra la configuración de cada red y elimine el color de fondo.

Luego agregue un margen superior pequeño de la siguiente manera:

Marja: Top de 3VH
Actualice la configuración de la fila después de completar los íconos de seguimiento en las redes sociales, abra la configuración de la fila y ajuste lo siguiente: Ancho de canaleta: 1
Relleno (escritorio): 3VH arriba, 0 px abajo

Revestimiento (tableta y teléfono): top 10 px

Guarde la apariencia y la plantilla después de haber terminado, guarde el aspecto y la plantilla.
El resultado final aquí es el resultado final en una página en vivo.

Cómo agregar el menú de navegación vertical al área del cuerpo de una plantilla de página Si desea agregar el menú de navegación vertical a una apariencia de página (en lugar de su encabezado global), primero debe guardar la apariencia de la sección en la biblioteca de la Divica. Para hacer esto, abra el editor de diseño de encabezado global y guarde la sección vertical (que contiene el menú) en la biblioteca de Divic.
Luego salga del editor de apariencia y cree una nueva plantilla y asigna a cualquier página que desee. Haga clic para crear un cuerpo personalizado para la plantilla de página.
Seleccione para construirlo desde cero.
Agregue una nueva sección de ancho completo para mirar.

Luego agregue un módulo de contenido de publicación completamente a la sección.

Elimine la sección habitual implícita en la parte superior de la página, luego abra la configuración para el ancho completo y agregue el siguiente CSS personalizado al elemento principal: CSS principal (escritorio) ancho: Calc (100% – 300px);



Margen-izquierda: 300px! IMPORTANTE; Artículo principal CSS (tableta) Ancho: 100%;

En la sección habitual, haga clic para agregar una nueva sección y, bajo la adición de la biblioteca, seleccione la sección Menú vertical que ha guardado previamente en la biblioteca.

Debido a que no queremos que la sección aparezca en el móvil, abra la configuración de la sección y desactive la visibilidad de la sección en la tableta y el teléfono. Luego abra el módulo de código desde la apariencia de la sección y reemplace este fragmento de código … # Et-main {

Ancho: Calc (100% – 300px);

Margen-izquierda: 300px;

}
Con este … #-cabeza principal, #-footer principal {

Ancho: Calc (100% – 300px);

Margen-izquierda: 300px;

}
Esto moverá el encabezado principal y el sótano para que coincida con el menú vertical fijo a la izquierda de la plantilla de página. Así es como se ve en una página en vivo usando el encabezado predeterminado y el sótano.
Pensamientos finales El menú de navegación vertical presentado aquí recibió una posición fija. Sin embargo, si necesita más espacio para elementos de menú o contenido adicional, puede cambiar la posición de la sección a absoluto. También puede cambiar la superación vertical para ejecutar para darle al usuario la oportunidad de ejecutar a través de los elementos del menú (solo tenga en cuenta que no podrá ver / usar el submenus con esta configuración superior). La configuración de la sección vertical abre la puerta y para crear barras laterales personalizadas. Espero que esto sea útil para futuros proyectos. Espero tener noticias suyas en los comentarios. ¡Suerte!