Este es un tutorial sencillo que sé que te puede ser de mucha ayuda.

Estuve buscando la forma de resaltar el link activo en mi menú principal, pero no encontré la forma sencilla “En el personalizador del tema”.
Bueno, era hora de usar un poco de CSS.

¿Qué necesitamos?
– Divi
– Child Theme –> Si no tienes uno Mira nuestro tutorial de ¿Cómo crear un child theme?

Color de fondo

Primero es encontrar nuestro Link activo en el inspector de Google Chrome:

Y empezamos con nuestro código CSS:

/* Fondo de link activo en el menú */
#main-header #top-menu li.current-menu-item > a {
background-color: White !important;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
-webkit-border-radius: 5px 10px;  /* Borde redondeado – Safari  */
-moz-border-radius: 5px 10px;     /* Borde redondeado – Firefox */
}

Listo, nuestro link activo está resaltado por un fondo blanco con padding en sus diferentes lados y con bordes redondeados.
Cabe aclarar que este código es sólo para Desktop, no funciona en móvi. En un próximo tutorial haremos uno para móvil.

¡Ah, por cierto! En un próximo tutorial también haremos una galería con filtros con el módulo de pestañas y CSS.
Échale un vistazo:

Diseño web

UX/UI

Espero te haya gustado este pequeño tutorial, mira más como estos en https://divicon.net

Ha sido un gusto para mi compartir un nuevo tutorial después de tanto tiempo. ¡Un fuerte abrazo!

¿Te parece interesante este artículo?
Puntaje
[Total: 0 Average: 0]

Mi nombre es Carlos Tum, originario de Guatemala. Soy un emprendedor que inició una pequeña empresa llamada Grupo Digit con base al diseño web, publicidad digital y branding. He trabajado con WordPress y Divi desde el inicio de mi empresa. Un placer.

Suscríbete a nuestro boletín.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Shares