Los Menús de las páginas webs son uno de los elementos más importantes de ésta, ya que funcionan como guía para que los visitantes a la web encuentren el contenido que buscan.

Aunque el tema Divi sea uno de los mejores temas que existen en la actualidad para WordPress, las opciones de personalización de sus Menús no son muy amplias.

Donde más se nota es el Menú Pincipal, el cual es la primera impresión que tenemos al entrar en una página web, ya sea blog, web corporativa, tienda online, marca personal…

En este artículo voy a explicarte dónde y cómo personalizar el Menú Principal de una web con Divi con tres estilos diferentes que la plantilla no incluye por defecto y que siguen la misma línea de diseño de ésta.

Menú Principal de Divi ¿Dónde se personaliza?

Para configurar el Menú Principal de tu web con Divi, es decir, el menú que se muestra en la parte superior, donde normalmente se ubican las páginas de acceso directo más importantes como Contacto, Blog, Servicios, Productos, Acerca de…Debes dirigirte a:

WordPress -> Divi -> Personalizador de temas -> Cabecera y navegación

Desde este apartado podrás configurar:

  • FORMATO DE CABECERA: elige si prefieres un formato de menú con el logo centrado, logo en la parte izquierda, anchura completa o menú deslizar.
  • BARRA DE MENÚ PRINCIPAL: elige la altura del menú, el color de fondo, el tamaño, color y fuente del texto. También puedes configurar aquí las opciones del Menú Desplegable.
  • BARRA DE MENÚ SECUNDARIO: elige el color de fondo y el tamaño, color y fuente del texto del menú ubicado encima del principal. Aquí se suele indicar datos de la web como el número de teléfono de contacto, el email, las redes sociales…
  • AJUSTES DE NAVEGACIÓN FIJA: elige el color de fondo y el tamaño, color y fuente del texto del menú fijo durante la navegación. Si no te interesa este menú para tu página web, se puede desactivar en las opciones del tema.
  • ELEMENTOS CABECERA: indica si quieres mostrar los iconos sociales, el icono de búsqueda (lupa), el teléfono o el email en el Menú de Cabecera.

 

Personalizar menú principal Divi

Puedes ver más detalles para congifurar el Menú de Cabecera de Divi paso por paso en nuestro tutorial.

3 Códigos para personalizar el Menú Principal de Divi

Ahora que ya tienes diseñado el Menú con las opciones generales de la plantilla, es hora de darle personalidad propia y crear un Menú que llame la atención a tus visitantes de tu web y que de aspecto de calidad a tu marca.

Para ello he recopilado de la web de Elegant Themes 3 códigos CSS que aplican efectos a los Menús de Divi.

Si deseas añadir alguno de ellos a tu web, tan solo tienes que copiar el código y pegarlo en:

 WordPress -> Divi -> Opciones del tema -> General -> Css Personalizado

¡Recuerda guardar cambios! y a continuación comprueba que el estilo se ha aplicado al menú de tu web correctamente.

Si lo necesitas, puedes cambiar cualquier detalle como el color, el grosor de la línea, la velocidad del efecto…y ajustarlo al diseño de tu marca.

dónde personalizar css plantilla divi

Código para añadir una línea en movimiento bajo el título

Personalmente, este estilo es el que más me gusta porque sigue complétamente la línea de diseño limpio y elegante de la plantilla web Divi.

Consiste en añadir una línea bajo cada título de la cabecera de tu web. Esta línea queda fija en el título con enlace activo (al que estés accediendo en ese momento) y se muestra en hover cuando pasas el ratón por los demás títulos, apareciendo de izquierda a derecha.

Puedes ver este efecto en la siguiente imagen.

 

añadir efecto hover menú divi

 

El código CSS para este efecto es:

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #15bf86; /*** COLOR DE LA LINEA INFERIOR ***/
 height: 3px; /*** GROSOR DE LA LINEA INFERIOR ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

*** CAMBIA AQUÍ TUS PREFERENCIAS Y ELIMINA ESTAS FRASES ***

Código para añadir un borde a los títulos

Este efecto consiste en bordear el título del enlace activo (al que estés accediendo en ese momento) y en mostrar una línea bajo el titulo al pasar el ratón por encima (Hover).

Las líneas por defecto, son bastantes gruesas, pero se pueden modificar según el diseño de tu web.

Este efecto de diseño quedaría como en la siguiente imagen:

 

truco personalizar menú tema divi

 

El código CSS es:

#top-menu li > a:hover {
 box-shadow: 0 10px 0 0 #F15A29 !important; /*** COLOR Y GROSOR DE LINEA HOVER ***/
 padding-bottom: 34px;
 opacity: 1 !important;
}
#top-menu li li a {
 padding-bottom: 6px !important;
}
#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
 border: 10px solid #F15A29; /*** COLOR Y GROSOR DE LA CAJA ***/
 padding: 10px;
 margin-bottom: -10px;
}

*** CAMBIA AQUÍ TUS PREFERENCIAS Y ELIMINA ESTAS FRASES ***

Código para añadir botones a los títulos

El último código para personalizar el Menú de Divi consiste en añadir un efecto de botón a los títulos del Menú Principal.

Con este código podrás personlizar tanto el menú en estático como el enlace activo y el enlace en hover (enlace por el que pasas el ratón).

Incluso puedes personalizar el radio de los botones, haciéndolos más cuadrados o más redondos, según las preferencias del estilo que quieras darle a tu web.

Este diseño quedaría de la siguiente forma:

 

código css cambiar menú Divi

 

Para conseguir este efecto, el código CSS es:

.et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
 padding-bottom: 15px;
}
#top-menu li {
 padding-right: 5px;
}
#et-top-navigation {
 padding: 20px 0 !important;
}
#top-menu li a {
 background: #C1B2AB; /*** CAMBIA EL COLOR DE FONDO ***/
 padding: 15px 20px;
 border-radius: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
 color: #fff !important;
}
#top-menu li a:hover {
 background: #559CAD !important; /*** CAMBIA EL COLOR DE FONDO EN HOVER ***/
}
#top-menu li.current-menu-item > a {
 background: #edc77b; /*** CAMBIA EL COLOR DE FONDO DEL ENLACE ACTIVO ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
 content: none;
}

*** CAMBIA AQUÍ TUS PREFERENCIAS Y ELIMINA ESTAS FRASES ***

La plantilla Divi para WordPress es muy completa y trae por defecto muchísimas opciones de configuración, pero si quieres darle un aspecto más diferenciado y que se asemeje lo máximo posible a tu marca, estos 3 Códigos para personalizar el menú de Divi son una opción fácil y rápida de conseguirlo.

También te puede interesar...

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
¡GRATIS! 

Esta guía con 7 Trucos de diseño para Divi

¡GRATIS!

Esta guía con 7 Trucos de diseño para Divi

Obtén, de forma totalmente gratuita, estos trucos de diseño que la plantilla Divi no incluye y crea webs únicas.

Consentimiento

¡Perfecto! Ahora VE A TU BANDEJA DE ENTRADA y abre el email que te he enviado desde DIVESP. ¡Gracias!