[et_pb_section fb_built=»1″ admin_label=»section» _builder_version=»4.16″ global_colors_info=»{}»][et_pb_row _builder_version=»4.22.1″ _module_preset=»default» width=»100%» max_width=»2560px» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]
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.
[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/09/anchura-menu-divi.jpg» alt=»anchura menu divi» title_text=»anchura menu divi» align=»center» _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.22.1″ _module_preset=»default» width=»100%» max_width=»2560px» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]
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:
[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/09/clases-css-menu-principal.png» alt=»clases css menu principal» title_text=»clases css menu principal» align=»center» _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]
Como hemos visto, primero hemos de ir a opciones de pantalla, para luego activar clases CSS.
[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/09/clase-css-elementos-menu-divi.png» alt=»clase css elementos menu divi» title_text=»clase css elementos menu divi» align=»center» _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]
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:
[/et_pb_text][et_pb_image src=»https://nueva.robertoseo.com/wp-content/uploads/2023/09/codigo-css-en-divi.png» alt=»codigo css en divi» title_text=»codigo css en divi» align=»center» _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]
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.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.22.1″ _module_preset=»default» width=»100%» max_width=»2560px» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» background_color=»rgba(190,193,25,0.15)» custom_padding=»18px|18px|18px|18px|true|true» global_colors_info=»{}»]
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;}
[/et_pb_text][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» background_color=»rgba(224,43,32,0.15)» custom_padding=»18px|18px|18px|18px|true|true» global_colors_info=»{}»]
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.
[/et_pb_text][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]
¡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.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.22.1″ _module_preset=»default» width=»100%» max_width=»2560px» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.22.1″ _module_preset=»default» global_colors_info=»{}»]
GRACIAS POR LEERME 🙂
Si crees que te puedo ayudar en tu proyecto, no dudes en contactarme.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
