¡Hola querido lector/a!
Se acabaron las vacaciones de verano, lo cual significa que toca volver a nuestro blog semanal de diseño web, seo y marketing online. Y sinceramente tenía ya muchas ganas de añadir nuevo contenido y fresquito que seguro os gustará.
Y vamos a abrir el mes de septiembre con un tema muy interesante para todos aquellos que utilicéis Divi en vuestra página web, y para los que aun no utilicen Divi, aquí les dejo el artículo con un descuento muy suculento para comprar divi al mejor precio.
Ahora sí que sí, sin más dilación, vamos a ver cómo crear un menú profesional utilizando WordPress y Divi.
Cómo crear un menú en WordPress
Lo primero es lo primero, y es que antes de nada debemos crear nuestro menú desde el panel de administración de WordPress, esto es muy fácil y rápido.
Desde el backend de WordPress accedemos a Apariencia > Menús
Una vez estemos en esta pestaña tenemos que elegir un nombre para nuestro menú y asignarle los distintos elementos que nos interesen, los principales son:
- Páginas
- Entradas del blog
- Enlaces personalizados
- Categorías
- Productos
- Categorías de productos
- Shortcodes
- Proyectos
- Etiquetas
Una vez hayamos asignado los elementos al menú debemos indicar en que menú de navegación queremos que se vea, en este caso seleccionamos menú principal.
*Para que nos aparezcan todos los elementos disponibles para agregar a nuestro menú primero deberemos ir a opciones de pantalla y marcar todas las cajas y propiedades avanzadas de menú.
Aplicando estilos al menú principal con Divi
Ahora que ya tenemos creado el menú, es el momento de añadirle modificaciones y estilos para que tenga una apariencia de menú profesional.
Para ello tenemos que seleccionar el personalizador de temas >cabeceras y navegación > barra de menú principal.
Modificando la barra de menú principal
En este apartado podemos realizar varias configuraciones para personalizar nuestro menú:
- Hacer que tenga anchura completa
- Ocultar logo
- Menú altura: Con esto le indicamos el grosor del menú, el valor mínimo son 30px y el máximo 300.
- Logo Max altura: Dentro del grosor del menú podemos indicarle el porcentaje del tamaño del logo.
- Tamaño de texto
- Espacio entre las letras
- Tipo de fuente
- Color de texto
- Color de enlace activo: Sirve para indicar con un color en concreto cuando estamos dentro de una sección
- Color de fondo: Puede ser un color o transparente.
- Menú desplegable:
- – Color de fondo
- – Color de línea: Es la línea divisoria entre el menú fijo y el desplegable
- – Color de texto
- Animación del menú desplegable: Podemos elegir entre 4 estilos de animación diferentes
Cuando hayamos terminado de aplicar cada una de estas opciones tendremos un menú con un diseño mucho más profesional y personalizado al que viene por defecto.
Formato de cabecera
Aquí podemos elegir que formato queremos para nuestro menú dinámico:
Menú diseño con el logotipo centrado
Menú con el logotipo a la altura de línea
Menú deslizar: Esto hace que los elementos de nuestro menú WordPress se muestren al hacer clic en las 3 barritas y se puede mostrar en un lateral de la pantalla o bien en pantalla completa.
Elementos de cabecera
En esta sección del editor podemos elegir si mostrar iconos sociales, el de búsqueda, un nº de teléfono y/o una dirección de correo electrónico.
Ajustes de Navegación fija
Cuando hacemos scroll en la página en la versión de escritorio, se nos oculta el menú principal y aparece el menú de navegación fija. Desde este apartado podemos personalizar este menú de manera independiente.
Menú secundario
En caso de que queramos añadir un menú secundario a nuestra web o simplemente añadir iconos sociales, un nº de teléfono o un correo electrónico tal y como veíamos en elementos de cabecera, se nos va a añadir un menú superior, al cual también le podemos añadir estilos personalizados.
Y con esto ya tendríamos vistas todas las opciones que vienen por defecto con el menú Divi theme, pero aún se puede personalizar mucho más.
Personalizar un menú en Divi con plugins y CSS
Personalizar el menú Divi con Divi booster
Existen varios plugins para añadirle más funcionalidades al menú en Divi, pero pocos que incluyan tantas opciones a un precio tan reducido como es Divi booster
Muy pronto escribiré un post en el que muestre todas las configuraciones que se pueden hacer con este gran plugin, así que aquí citaré solo alguno de las personalizaciones más destacadas para el menú principal y secundario:
- Mostrar los botones de redes sociales del menú secundario en móviles
- Añadir un «clic para llamar» en el número de teléfono
- Añadir un espacio personalizado entre los botones del menú
- Ocultar menú completamente
- Cambiar el enlace del logo del menú principal
- Añadir unas barras verticales entre los botones del menú
Como ves se pueden hacer muchísimas cosas con este gran plugin.
Además, si tenemos conocimientos de CSS podemos añadir un código de CSS personalizado para personalizar aún más nuestro menú, para añadir este código debemos ir a Divi > Opciones del tema > CSS personalizado
Código CSS para añadir una línea dinámica a cada elemento del menú
Con este código CSS podemos personalizar el color, grosor y animación de dicha línea.
Este es el código que debes añadir
#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%;
}
Código CSS para crear botones personalizados en el menú
Cuando añadimos un elemento a nuestro menú se muestra solo el título, con este código le podemos aplicar un color de fondo y una forma concreta para que le dé apariencia de un botón.
.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;
}
Código CSS para alinear el menú a la izquierda
Al crear un menú por defecto en Divi, los elementos del mismo se alinean a la derecha. Si queremos que este a la izquierda junto al logotipo debemos añadir esta línea de código
/* Alinear el menú a la izquierda */
@media only screen and (min-width: 981px) {
#et-top-navigation {float: left; margin-left: 60px;}
}
También te puede interesar:
Conclusión
Como has visto las opciones de la barra de menú se pueden personalizar de muchas maneras y crear un menú web original y dinámico con Divi está al alcance de cualquiera.
Ahora es tu turno de utilizar todas estas opciones y adaptarlo al estilo de tu web o blog.
Y si te ha gustado esta guía sobre cómo crear un menú en WordPress con Divi me ayudarías mucho dejando tus 5 estrellitas y un comentario, para que así llegue a más personas interesadas en el diseño web con WordPress.
¡Espero verte en el siguiente post! ¡Un saludo!
¡Hola! Soy Matías Romero, diseñador web y consultor de SEO local. Me verás por aquí hablando de diseño web, wordpress, consejos de SEO, Google Maps y lo que se me vaya ocurriendo.
Nos vemos en las SERPS 😉
Me encantan estos tips. Son super necesarios para nuestros proyectos en Divi. ¡Gracias!
Hola, generé una nueva cabecera en el generador de temas de Divi, y en él agregué un módulo de menú, y al querer aplicar estos códigos css para personalizarlo no me funciona, probablemente porque el menú ya no está por defecto. ¿Qué podría hacer en ese caso?
Buenas Alejandro!
Exacto, cuando generas un menú desde el generador de temas el identificador CSS no es el mismo que el menu que trae por defecto. Tendrias que asignarle a la sección o a la fila un identificador css desde la pestaña «Configuración/Avanzado» y luego cuando añadas el codigo te tienes que asegurar que el ID CSS sea el mismo.
Hola,
¿Cómo se pueden alinear los elementos del menu, en vez de a la izquierda al centro? ¿Y si hay un woo commerce?
Gracias!
Hola Mariano!
Pues mira por ejemplo podrías alinearlo a tu gusto utilizando el constructor de temas, que te permite utilizar el constructor visual para las cabeceras y crear menus más personalizados
Aquí explico como hacerlo: https://romerowebs.es/modificar-cabecera-divi/
Buenas, como puedo dejar el menú principal siempre desplegable? Lo tengo en el sidebar de la izquierda y quiero que se vean todas las categorías dentro a simple vista, pero siempre me sale plegado. Se puede hacer? gracias.
Buenas Antuan!
¿Has probado a crear ese menu con el theme builder? Podrias adaptar una sección para que aparezca en la parte izquierda de tu web. También puedes utilizar una de las plantillas que tienen en el blog de elegant themes y las importas en el constructor de temas.
hola genial tu explicación, me gustaría saber porqué y cómo solucionar que no me aparece el menú dentro de las Entradas, en la página de Blog (donde se muestran todas las entradas) si aparece, pero al ingresar en cada una se elimina.
Tal vez me pueden ayudar alguien por favor?
Hola, actualmente el menú principal que se programó mejoró mucho y más aún con tus recomendaciones, gracias infinitas. Nuestro menú principal es transparente y funciona con el diseño de cada página pero tenemos una sección, productos, que nos gustaría modificar esa transparencia del menú principal a fondo negro, solo para las páginas de esa opción. Cómo se puede lograr?
Gracias a ti por tu comentario Ana, según lo que me comentas, la opción más efectiva sería la de crear una cabecera/menú personalizado desde el constructor de temas (Divi > Constructor de temas) y asignarle ese diseño solo a las páginas de productos. Con eso ya tendrías un menú personalizado para el apartado de productos y otro para el resto de la web. Espero que te sea de utilidad, un saludo.
Matías puedes ayudarme con mi pregunta del 20 de julio por favor?