En esta publicación, le mostraremos cómo combinar la navegación estándar y vertical. Más específicamente; cómo hacer que el menú secundario y el pie de página se superpongan a la navegación vertical de su sitio web. Eso significa que no tendrás que elegir entre tener una navegación superior o una navegación vertical; ¡puedes hacer ambas cosas! Puede diseñar el menú principal y el menú secundario como desee dentro de su Personalizador de temas , eso no es lo que le ayudaremos a lograr en esta publicación explícitamente. Más bien, le mostraremos las siguientes cosas que ayudan en el proceso de hacer las siguientes cosas:
- cómo hacer que su menú secundario se superponga a su navegación vertical
- cómo hacer que su menú secundario sea fijo al desplazarse
- cómo hacer que su pie de página se superponga a su navegación vertical
Estas son todas las cosas que lo ayudarán a crear un buen equilibrio entre la navegación estándar y vertical en su sitio web. Al hacer que la navegación estándar y la vertical se superpongan, su sitio web no se sentirá dominado por la navegación vertical. El contenido principal de su sitio web se ajustará a la navegación vertical, pero el menú secundario y el pie de página se comportarán de la misma manera que cuando la navegación vertical no está habilitada.
Resultado
Al final de este tutorial, podrá lograr el siguiente resultado en un sitio web que usa navegación vertical:
En una publicación anterior , compartimos algunos ejemplos de sitios web que utilizan la navegación vertical. Todos los ejemplos nos mostraron cuán creativo puede ser con una opción Divi que no se usa con tanta frecuencia. Una navegación vertical bien pensada en su sitio web puede brindar esa interacción adicional que estaba tratando de lograr con sus visitantes.
Mientras mostraba los ejemplos, hubo algunos comentarios que nos inspiraron a mostrarle cómo lograr ciertos resultados. Esta publicación es uno de esos tutoriales inspiradores que le mostrarán cómo hacer algunos ajustes a su sitio web sin tener que buscar soluciones usted mismo.
Nos hemos inspirado en el sitio web de Alex Brands que usa el menú secundario en la parte superior y la navegación vertical en el lado izquierdo de la página.
Mientras se desplaza, el menú secundario se desplaza a lo largo. Le da ese pequeño toque extra al sitio web y ayuda a mantener el enfoque en el contenido dentro del menú secundario. Alex Brands es un sitio web de comercio electrónico y el menú secundario fijo ayuda a recordar a las personas qué hay en su cesta de la compra y la oferta que ofrecen.
Este tipo de navegación vertical es especialmente interesante para sitios web de comercio electrónico. La navegación vertical facilita a los visitantes la navegación a través de las diferentes categorías de artículos que se ofrecen en el sitio web. Es más fácil seguir los elementos del menú cuando están ubicados en una navegación vertical, ya que es más fácil interpretarlo como una lista por la que la gente tiene que pasar.
Suscríbete a nuestro canal de Youtube
Pasos generales
Antes de sumergirnos en la parte en la que le mostramos cómo hacer que su navegación estándar se superponga con su navegación vertical, primero veremos los pasos generales. Estos pasos generales son la base que deberá seguir antes de aplicar la superposición.
Sin más debido; empecemos.
Lo primero que deberá hacer (si aún no lo ha hecho) es agregar un menú y los elementos del menú a su sitio web. Estos son los elementos del menú que aparecerán dentro de su navegación vertical. Para agregar un nuevo menú a su sitio web, vaya a su Panel de WordPress> Apariencia> Menús. Una vez que esté en esa página, asigne un título a su nuevo menú y cree el menú.
Continúe agregando elementos de menú y haciendo de este su menú principal.
Lo siguiente que deberá hacer es activar su menú secundario. Para asegurarse de que el menú secundario aparezca en su sitio web, su menú secundario debe tener un elemento que esté activado. En esta publicación, solo agregaremos los íconos de redes sociales, pero, por supuesto, puede agregar lo que quiera.
Para activar el menú secundario y hacer que aparezcan los íconos sociales, comience yendo a su Panel de WordPress> Personalizar> Encabezado y navegación> Elementos del encabezado> Habilite la opción ‘Mostrar íconos sociales’.
El siguiente paso que deberá tomar es habilitar la navegación vertical dentro de su constructor Divi. Para hacer eso, vaya a su Tablero de WordPress> Apariencia> Personalizar> Encabezado y navegación> Formato de encabezado> Habilitar la navegación vertical.
Además de eso, también puedes elegir dónde quieres que aparezca tu navegación vertical; en el lado izquierdo o derecho de su sitio web.
Antes de pasar a las modificaciones avanzadas, queda una última cosa por hacer: deshabilitar la navegación fija para su menú principal. Si ya ha desactivado el menú principal, omita este paso. Sin embargo, si su menú principal está actualmente fijo, vaya a su Tablero de WordPress> Divi> Opciones de tema> Y deshabilite la navegación fija.
En la siguiente parte de esta publicación, le mostraremos cómo convertir su navegación estándar y vertical en algo diferente de lo habitual. Cuando se trata de navegación vertical, estamos acostumbrados a ver una parte de la pantalla cubierta por ella. El menú secundario y el pie de página, por defecto, no pasarán la navegación vertical.
Pero en algunos casos, queremos asegurarnos de que la navegación secundaria y el pie de página estén encima de la navegación vertical. De esa forma, lo único que dependerá de la navegación vertical es el contenido principal. Su sitio web no se sentirá como si estuviera completamente dividido en dos lugares; la navegación vertical y el resto del sitio web.
Agregar código CSS a las opciones del tema
Puede agregar el código CSS de dos maneras: a través de las Opciones de tema de Divi o a través del Personalizador de temas. Para agregar el código a las Opciones de tema, vaya a su Tablero de WordPress> Divi> Opciones de tema> General> Desplácese hacia abajo en la pestaña y pegue las siguientes líneas de código CSS en el cuadro CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
|
@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {margin-left: 0 !important; z-index: 10000;position: fixed;width: 100%;}.et_vertical_nav #main-header {position: absolute;z-index: 1!important;overflow: hidden;}#et-main-area {width: auto !important;}#main-footer {margin-left: -225px !important;left: 0 !important;z-index: 1000 !important;position: absolute;width: 117.4%;height: auto;}} |
Agregar código CSS al personalizador de temas
La otra posibilidad que tienes es agregar las líneas de código CSS al personalizador de temas. Para hacerlo, ve a tu Tablero de WordPress > Apariencia > Personalizar > CSS adicional > Y pega las líneas CSS en el campo CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
|
@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {margin-left: 0 !important; z-index: 10000;position: fixed;width: 100%;}.et_vertical_nav #main-header {position: absolute;z-index: 1!important;overflow: hidden;}#et-main-area {width: auto !important;}#main-footer {margin-left: -225px !important;left: 0 !important;z-index: 1000 !important;position: absolute;width: 117.4%;height: auto;}} |
Pensamientos finales
En esta publicación, le mostramos cómo combinar la navegación estándar y vertical en su sitio web. Más precisamente; le mostramos cómo hacer que el menú secundario y el pie de página se superpongan con su navegación vertical y cómo hacer que su menú secundario sea fijo. Si tiene alguna pregunta o sugerencia; ¡siéntase libre de dejar un comentario en la sección de comentarios a continuación!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!
Imagen destacada de Line design / shutterstock.com