El menú por defecto de Divi es bastante rígido, admite cierta personalización con el Theme Builder, pero tiene sus límites en su interfaz. Sin embargo, estos límites se pueden superar gracias al CSS. En cada uno de los proyectos en los que trabajo, se pueden hacer cosas muy interesantes.
Por ello, me he esforzado en conseguir un código CSS sencillo que se pueda aplicar sin distorsionar el resto de elementos del menú. Gracias a este tutorial vas a superar frustraciones que puedas tener a la hora de diseñar tu menú de DIVI.
Primero: Preparativos que le tenemos que hacer al menú
El primer paso que debemos tomar, tanto si empleas DIVI como si no -ya que esto funciona en cualquier sitio WordPress, es aplicar una clase css a cada enlace del menú que estemos usando en Divi. Esto se puede hacer desde el panel de administración de WordPress en Apariencia — Menús, complentando estos pasos:
Como hemos visto, primero hemos de ir a opciones de pantalla, para luego activar clases CSS.
A continuación le vamos a tener que poner la clase CSS enlace-menú a todos los enlaces del menú. Está relacionada con el código que te pondré más adelante en este mismo artículo.
Acto seguido, los que tenemos el tema Divi en nuestra web WordPress, nos vamos a Divi — Opciones de Tema — CSS Personalizado para poner este código:
Si no tienes Divi, deberás incluir en la parte de CSS personalizado que tiene tu tema el código que te doy a continuación. En caso de no tener esta opción, siempre puedes instalar un plugin que permita añadir tu propio CSS a tu web WordPress.
Código CSS que tenemos que pegar (explicado más adelante)
Solo tienes que pegar donde te acabo de decir dicho código CSS. En el siguiente punto te explico para qué sirve cada cosa que, por supuesto, puedes modificar para adaptar el estilo a tu gusto.
.enlace-menu {padding: 0 50px !important;}
Explicación del CSS que separa los enlaces del menú de WordPress (y de Divi también)
Es muy sencillo: simplemente le añade a cada enlace al que se le ha añadido dicha clase css un ‘padding’, es decir, un relleno a los lados. El primer cero significa el relleno que le pones arriba y abajo, en este caso ninguno, y el segundo número significa en píxeles cuánto relleno le pones a cada enlace a los lados. En este caso serían 50 píxeles a cada lado.
En este caso el !important es para que cualquier plugin que puedas tener no interfiera en la aplicación de este código.
¡Listo! Ya tienes tu menú con separación de los enlaces personalizada
Ya está. Si has hecho todo correctamente deberías tener un menú con tus enlaces separados de forma personalizada, recuerda que la puedes personalizar a tu gusto modificando los números del sencillo código CSS que te he pasado.
