¡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 abril con un tema muy interesante para todos aquellos que utilicéis Divi en vuestra página web, y para los que no sepan que es Divi, aquí les dejo el artículo en el que analizo la plantilla Divi al completo

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;}
    }

    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!

    5/5 (2 Reviews)
    newsletter diseño web

    ¿Quieres triunfar con tu página web?

    Suscribete y recibe las mejores guías de Diseño Web con WordPress

    ¡Enhorabuena! Te has suscrito correctamente a nuestro boletín de articulos de diseño web.

    WhatsApp Presupuesto WhatsApp