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. Por lo tanto, antes de probar las diferentes formas de diseñar, primero debe configurar los enlaces activos al desplazarse por el artículo anterior, ya que el código que usaremos se basará más en eso.
Algo que debe tener en cuenta durante este tutorial es el hecho de que solo puede ver los resultados una vez que haya guardado la página. Con solo obtener una vista previa de su página, los cambios no se mostrarán.
Suscríbete a nuestro canal de Youtube
Cómo funciona
Para crear una navegación que ajuste 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ú según 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 lo largo de la página. Sabrán automáticamente qué parte de su página están explorando y qué tan lejos están de otras secciones que podrían interesarles.
Nota: sepa que este método solo se aplica a los sitios web que están hechos de una sola página.
Los ejemplos que le mostraremos cómo hacer serán especialmente valiosos si está utilizando la navegación vertical. Por lo tanto, 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.
Estilo de enlace activo #1
El primer ejemplo que nos gustaría mostrarle es uno brillante. Cada vez que un visitante pasa por una de las secciones, otro elemento del menú comenzará a brillar. Es una forma sutil pero hermosa y elegante de ayudar a sus visitantes a navegar a través de la página.
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 del logotipo: Habilitar
- Tamaño del texto: 24
- Espaciado entre letras: -1
- Fuente: Happy Monkey
- Color del texto: #FFFFFF
- Color del enlace activo: #FFFFFF
- Color de fondo: rgba(255,255,255,0)
- Color de fondo desplegable: rgba(255,255,255,0)
Agregar código CSS a las opciones del tema
Lo siguiente que deberá hacer es agregar un código CSS. Hay un par de formas en 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 tablero 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:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
@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 #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 según la forma en que se desplace 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.
Comenzaremos haciendo lo mismo que hicimos en el primer ejemplo de esta publicación; hacer modificaciones a la barra de menú principal. Para hacer eso, vaya a Apariencia dentro de su Tablero de WordPress> Personalizar> Encabezado y navegación> Barra de menú principal y asegúrese de tener las siguientes configuraciones:
- Ocultar imagen del logotipo: Habilitar
- Tamaño del texto: 24
- Espaciado entre letras: 2
- Fuente: Langosta
- Color del texto: #FFFFFF
- Color del enlace activo: #FFFFFF
- Color de fondo: rgba(255,255,255,0)
- Color de fondo del menú desplegable: rgba(255,255,255,0)
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 tema. 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:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
@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 #3
El tercer estilo de enlace activo que elegimos compartir con usted es uno que se enfoca principalmente en la palabra clave que se usa como elemento del 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.
Para este último ejemplo, comience haciendo algunos cambios en la barra de menú principal. Si está en su panel de control de WordPress, vaya a Apariencia > Personalizar > Encabezado y navegación > Barra de menú principal y aplique los siguientes cambios a la navegación vertical:
- Ocultar imagen del logotipo: Habilitar
- Tamaño del texto: 16
- Espaciado entre letras: 2
- Fuente: Josefin Slab
- Estilo de fuente: mayúsculas
- Color del texto: #FFFFFF
- Color del enlace activo: #FFFFFF
- Color de fondo: rgba(255,255,255,0)
- Color de fondo del menú desplegable: rgba(255,255,255,0)
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 principal (y por lo tanto, la página donde ha colocado todo el contenido) con Divi Builder y haga clic en el siguiente icono:
Una vez que haya hecho clic en el ícono, coloque las siguientes líneas de código CSS dentro del 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
23
|
@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 una continuación 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 poder ver los resultados, simplemente obtener una vista previa de su página no hará el trabajo. Si tiene alguna pregunta o sugerencia; ¡Asegúrate 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 por Botond1977 / shutterstock.com