Añadir la etiqueta de NUEVO en el menú principal de Divi … y sorpresa adicional @ Ayuda WordPress

Si actualizas tu menú principal de Divi para añadir un nuevo elemento desde el que acceder a una reciente inclusión de contenidos o servicios en tu web, ¿a que te gustaría que los visitantes sepan que ese nuevo elemento del menú está ahí? ¿y a que estaría bien poner a su lado una etiqueta de NUEVO bien visible?

Pues eso es lo que vamos a hacer hoy, y verás qué cosa más rápida y sencilla. Son solo 2 pasos.

Añade una nueva clase CSS

Ve a Divi → Opciones del tema → CSS personalizado, o si lo prefieres, a Apariencia → Personalizar → CSS adicional, el resultado es el mismo, y añade el siguiente código:

/* Etiqueta NUEVO en menu principal */
#top-menu-nav>ul>li.nuevo a:before {
content: "Nuevo"; /* Texto de la etiqueta */
font-size: .7rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase; /* Texto en mayusculas */
color: #fff; /* Color del texto */
background: #000; /* Color de fondo */
padding: .2em .4em;
position: relative;
border-radius: 4px;
left: 0;
bottom: 3px;
margin-right: .5em;
}

Este código añadirá el texto «Nuevo», todo en mayúsculas, con el texto en blanco y fondo negro, antes del elemento seleccionado al que queramos añadirlo.

¿A que te has dado cuenta de que no pasa nada, de que no sale ninguna etiqueta de NUEVO en ninguna parte de tu menú principal?

Es que falta el segundo paso…

Añade la nueva clase CSS al elemento del menú que quieras destacar

Pero nada más sencillo. Sin salir del personalizador, ve a la sección de menús y abre el menú principal,  despliega el elemento del menú a destacar, y en la caja denominada «Clases CSS» añade simplemente el nombre de la nueva clase que creamos antes: nuevo.

¡Sorpresaaaaaa!

Automágicamente aparecerá el texto NUEVO delante del elemento del menú que has querido destacar sobre el resto.

¡Eh, que a mi no me sale eso de Clases CSS al personalizar los menús!

Eeehhh, que tienes razón, que por defecto es un ajuste que no está activo. Para ver esa opción, y otras, vuelve un paso atrás en la navegación del personalizador de WordPress y haz clic en el icono de la ruedita de arriba para activar esa u otras posibles útiles cajitas.

¡CHORPRECHAAAAA!

Resulta que tenía una pequeña sorpresa para ti, y es que aunque inicialmente he explicado este truco para aplicarlo al tema Divi, en realidad puede servir para cualquier otro tema que tengas activo en tu web WordPress 🙂

Lo único que tienes que hacer es sustituir la clase CSS del menú principal de navegación de Divi del código por la que use tu tema activo, algo que puedes inspeccionar con la herramienta de desarrollo del navegador.

En el ejemplo anterior, he curioseado con las herramientas del navegador en el menú principal de una web de pruebas con el tema Astra, y he visto que la clase CSS que usa el menú principal es main-navigation. Pues bien, solo he tenido que adaptar el código a esto otro:

/* Etiqueta NUEVO en menu principal */
.main-navigation>ul>li.nuevo a:before {
content: "Nuevo"; /* Texto de la etiqueta */
font-size: .7rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase; /* Texto en mayusculas */
color: #fff; /* Color del texto */
background: #000; /* Color de fondo */
padding: .2em .4em;
position: relative;
border-radius: 4px;
left: 0;
bottom: 3px;
margin-right: .5em;
}

Luego, como antes, he añadido la clase CSS nuevo al elemento a destacar, eso no cambia, se hace exactamente igual.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!