Tutorial Divi: Añadir subtítulos al menú

Si eres usuario de temas de Elegant Themes recordarás que no hace tanto tiempo en todos sus temas podías meter subtítulos en los menús, añadiendo campos personalizados en las páginas que querías que los llevasen. Pero esto no funciona en Divi, una pena.

Pero no te vengas abajo, porque si te gusta lo de poner subtítulos a los menús de tu web con Divi es bastante fácil añadirlos, solo conlleva 2 pasos.

Edita tus menús para añadir los subtítulos

Lo primero es ir a tu escritorio de WordPress y en «Apariencia > Menús» editar los elementos de menú a los que quieras añadir subtítulos y añadirles, pegado al título que ya tengan, tu texto entre las etiquetas <span>.

Vamos, añade un texto tal que así:

<span>Tu subtítulo aquí</span>

Y un ejemplo sería este, el de la captura:

INICIO<span>Volver al inicio</span>

Guarda los cambios, pero aún no hemos terminado, pues si vas a tu web verás que los menús se mostrarán aún bastante feos, tal que así:

No te asustes, viene ¡CSS al rescate!

Añade un poquito de CSS para que se vean bien

Pasado el pequeño susto inicial, ve a «Apariencia > Personalizar» y, una vez abra el Personalizador de WordPress ve a la sección de «CSS adicional» y añade lo siguiente:

/* Subtítulos en menú principal de Divi */
#top-menu > li > a span {
  font-size: 14px;
  font-weight: 400;
        float: left;
  width: 100%;
  padding: 5px 0;
}
#top-menu a {
        text-align: center;
}
#top-menu li {
   padding-right: 0;
}

Y conseguirás algo mucho más chulo, parecido a esto:

Por supuesto, puedes personalizar a tu gusto los estilos del menú, teniendo en cuenta que la parte que hace que el <span> esté debajo del título del menú es float: left;, el resto a tu gusto.

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