3 formas creativas de diseñar el enlace activo de su navegación vertical Divi

Publicado: 2017-09-11

En este tutorial de Divi, le mostraremos un par de formas interesantes de diseñar el enlace activo en su navegación vertical. Este tutorial sigue a un tutorial anterior en el que le mostramos cómo crear enlaces activos en el desplazamiento para sitios web Divi de una página. Entonces, antes de probar las diferentes formas de estilo, primero debe configurar los enlaces activos al desplazarse por el artículo anterior, ya que el código que usaremos se basará en eso.

Algo que debes tener en cuenta durante este tutorial es el hecho de que solo podrás ver los resultados una vez que hayas guardado la página. Con solo obtener una vista previa de su página, los cambios no se mostrarán.

3 formas creativas de diseñar el enlace activo de su navegación vertical Divi

Suscríbete a nuestro canal de Youtube

Cómo funciona

Para crear una navegación que ajusta automáticamente el enlace activo a medida que se desplaza hacia abajo en la página, hemos utilizado el complemento Page Scroll to ID que lo ayuda fácilmente a lograr los resultados que desea. Además, el complemento también le ofrece diferentes opciones que puede elegir manualmente dentro de la configuración.

El complemento ayuda a identificar la posición que tiene un visitante en su sitio web y cambiará el elemento del menú de acuerdo con la sección de su sitio web que esté viendo actualmente. Esta es una pequeña interacción que definitivamente ayudará a sus visitantes a navegar a través de un paginador. Sabrán automáticamente qué parte de su página están explorando y qué tan lejos están de otras secciones en las que podrían estar interesados.

Nota: sepa que este método solo se aplica a sitios web que están hechos de una sola página.

Activar navegación vertical

Los ejemplos que le mostraremos cómo hacer serán especialmente valiosos si está utilizando la navegación vertical. Entonces, continúe y habilite la navegación vertical en el Personalizador de temas (si aún no lo ha hecho en la publicación anterior).

Si está en su panel de WordPress, vaya a Apariencia> Personalizar> Encabezado y navegación> Formato de encabezado> Habilitar navegación vertical.

enlace activo

Estilo de enlace activo n. ° 1

El primer ejemplo que nos gustaría mostrarle es brillante. Cada vez que un visitante pasa por una de las secciones, otro elemento del menú comenzará a brillar. Es una manera sutil pero hermosa y elegante de ayudar a sus visitantes a navegar a través de un paginador.

enlace activo

Configuración de la barra de menú principal

Comience haciendo algunos cambios en su barra de menú principal. Si está en su panel de WordPress, vaya a Apariencia> Personalizar> Encabezado y navegación> Barra de menú principal y realice las siguientes modificaciones:

  • Ocultar imagen de logotipo: Activar
  • Tamaño del texto: 24
  • Espaciado entre letras: -1
  • Fuente: Happy Monkey
  • Color del texto: #FFFFFF
  • Color de enlace activo: #FFFFFF
  • Color de fondo: rgba (255,255,255,0)
  • Color de fondo del menú desplegable: rgba (255,255,255,0)

enlace activo

Agregar código CSS a las opciones del tema

Lo siguiente que deberá hacer es agregar código CSS. Hay un par de formas en las que puede agregar código CSS a su sitio web. Vamos a manejar tres métodos en estos ejemplos, comenzando con las Opciones de tema. Si está en su panel de WordPress, vaya a Divi> Opciones de tema> Desplácese hacia abajo en la pestaña General y coloque las siguientes líneas de Código CSS en el cuadro CSS personalizado: 

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight{ 
text-shadow:  0 0 10px #fff,  0 0 30px #fff,  0 0 50px #e3e98e,  0 0 70px #e3e98e, 0 0 90px #e3e98e;
border-top: 1px dotted #FFFFFF;
border-bottom: 1px dotted #FFFFFF;
padding-top: 15px;
}
nav#top-menu-nav {
width:80% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
text-align: center;
margin-bottom: 15px;
padding-left: 25%;
}
#et-top-navigation {
padding-top: 100% !important;
}
#top-menu {
text-align: center;
padding-left: 10%;
}}

Estilo de enlace activo n. ° 2

El segundo estilo de enlace activo es uno que tiene un aspecto muy limpio y elegante. Como de costumbre, los enlaces activos cambiarán de acuerdo con la forma en que se desplaza hacia abajo en el sitio web de una página. Al hacer clic en uno de los elementos del menú, se aplicará el mismo estilo.

enlace activo

Configuración de la barra de menú principal

Comenzaremos haciendo lo mismo que hicimos en el primer ejemplo de esta publicación; realizar modificaciones en la barra de menú principal. Para hacerlo, vaya a Apariencia dentro de su Tablero de WordPress> Personalizar> Encabezado y navegación> Barra de menú principal y asegúrese de tener la siguiente configuración:

  • Ocultar imagen de logotipo: Activar
  • Tamaño del texto: 24
  • Espaciado entre letras: 2
  • Fuente: Lobster
  • Color del texto: #FFFFFF
  • Color de enlace activo: #FFFFFF
  • Color de fondo: rgba (255,255,255,0)
  • Color de fondo del menú desplegable: rgba (255,255,255,0)

enlace activo

Agregar código CSS al personalizador de temas

Como se dijo en el ejemplo anterior, puede agregar el código CSS a su sitio web de varias maneras. Además de agregar el código personalizado a las Opciones de tema, también puede agregarlo al Personalizador de temas. Si está en su panel de WordPress, vaya a Apariencia> Personalizar> CSS adicional y coloque las siguientes líneas de código dentro del campo CSS personalizado: 

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
padding: 0.5em 1.9em;
}
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
height: 20px;
width: 20px;
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
#top-menu .current-menu-item a.mPS2id-highlight:before {
left: 0;
top: 0;
border-left: 4px solid #000000;
border-top: 4px solid #FFFFFF;
-webkit-transform: translate(100%, 50%);
transform: translate(100%, 50%);
}
#top-menu .current-menu-item a.mPS2id-highlight:after {
border-right: 4px solid #000000;
border-bottom: 4px solid #FFFFFF;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
} 
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
nav#top-menu-nav {
width:87% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

Estilo de enlace activo n. ° 3

El tercer estilo de enlace activo que hemos elegido compartir con usted es uno que se centra principalmente en la palabra clave que se utiliza como elemento de menú. Al usar la configuración correcta para la sombra del texto, el mismo texto rodeará el elemento del menú que enfatiza la posición que tiene un visitante en su sitio web.

enlace activo

Configuración de la barra de menú principal

Para este último ejemplo, comience haciendo algunos cambios en la barra de menú principal. Si está en su panel de WordPress, vaya a Apariencia> Personalizar> Encabezado y navegación> Barra de menú principal y haga que los siguientes cambios se apliquen a la navegación vertical:

  • Ocultar imagen de logotipo: Activar
  • Tamaño del texto: 16
  • Espaciado entre letras: 2
  • Fuente: Josefin Slab
  • Estilo de fuente: Capitals
  • Color del texto: #FFFFFF
  • Color de enlace activo: #FFFFFF
  • Color de fondo: rgba (255,255,255,0)
  • Color de fondo del menú desplegable: rgba (255,255,255,0)

enlace activo

Agregar código CSS a una página en particular

Otra opción que tiene para agregar código CSS es agregarlo a una página en particular. Abra su página de inicio (y por lo tanto, la página donde ha colocado todo el contenido) con el Divi Builder y haga clic en el siguiente icono:

enlace activo

Una vez que haya hecho clic en el icono, coloque las siguientes líneas de código CSS dentro del campo CSS personalizado: 

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
margin-left: 80px;
text-shadow:0 0 0 #000, -70px 0 0 rgba(255, 255, 255, .4), 70px 0 0 rgba(255, 255, 255, .4), 0 25px 0 rgba(255, 255, 255, .4) , 0 -25px 0 rgba(255, 255, 255, .4) ; }
}
nav#top-menu-nav {
width:95% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

Pensamientos finales

En esta publicación, le mostramos algunas formas agradables y fáciles de diseñar el enlace activo en su menú. Esta publicación fue un seguimiento de una publicación anterior en la que le mostramos cómo crear enlaces activos en el desplazamiento para sitios web Divi de una página. Recuerde que primero tendrá que guardar los cambios antes de que pueda ver los resultados, el simple hecho de obtener una vista previa de su página no funcionará. Si tiene alguna pregunta o sugerencia; ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de Botond1977 / shutterstock.com