Las plantillas de calidad para wordpress, como la plantilla Divi y otras, permiten la personalización del header y de los diferentes elementos o ítems de menú.

Es decir, las plantillas nos permitirán establecer un tamaño de fuente para los elementos del menú, un grosor, un tipo de fuente, un color, etc.

Pero si queremos cambiar el diseño o la apariencia estética de un solo ítem del menú, ninguna plantilla te lo permitirá.

SUPER DESCUENTO DIVI

 

En muchas ocasiones queremos destacar un determinado ítem o elemento del menú frente al resto.

En este post te voy a indicar una manera muy sencilla de cambiar algunos aspectos estéticos de un elemento concreto del menú.

También vamos a hacer a modo de taller un botón CTA (Call to action) sobre uno de los elementos del menú, utilizando la plantilla DIvi

 

botón cta wordpress y divi

Ejemplo práctico de botón de llamada a la acción en menú

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

 

1.- ¿Por qué surge la necesidad de cambiar el diseño de algún elemento concreto o ítem de menú?

 

Querer destacar un determinado elemento del menú frente al resto, es algo muy habitual en un sitio web.

Es posible, que queramos destacar un elemento del menú frente a los otros para llamar la atención y convertir.

Sí, lo que se conoce como un “Call to Action” CTA o “llamada a la acción”. Que pretende buscar clientes potenciales y convertirlos en clientes finales.

Este “Call to action” o «CTA» en el menú lo podemos establecer de varias maneras. Podemos hacerlo personalizando un poco el diseño de dicho ítem de menú o creando un verdadero Botón CTA.

 

 

2.- Cómo cambiar el diseño de un ítem del menú de WordPress desde la pantalla de gestión del menú

 

Una forma de hacer pequeñas modificaciones de diseño de un ítem concreto del menú, la podremos realizar a través de añadir algunas reglas CSS a la etiqueta de navegación del elemento de menú correspondiente.

Para ello, primero debemos acceder a la gestión del menú en WordPress desde: “Apariencia > Menus”

Una vez allí despliega el ítem de menú que quieres personalizar y añade las reglas CSS que quieras establecer. El código lo añadiremos en la «etiqueta de navegación» del item de menú que queremos personalizar. Puedes añadir diferentes reglas a través de la etiqueta HTML “Span” y el atributo “Style” con la estructura siguiente:

 

<span style=””>ITEM DE MENÚ</span>

 

Entre las comillas del atributo Style, colocaremos las reglas CSS.

Por ejemplo, suponiendo que en la “etiqueta de navegación” tuviera el ítem de menú “Contacto” podría sustituirlo por:

 

<span style="font-size: 25px; color:#EA9738; font-weight:bolder;">Contacto</span>

 

css para cambiar item de menú diseño

Introduciremos el código CSS en la etiqueta de navegación del elemento del menú

 

Donde tenemos las siguientes reglas:

  • font-size: 25 px; (que establece un tamaño de fuente de 25 px)
  • color:#EA9738; (establece el color de la fuente)
  • font-weight:bolder; (establece que la fuente de texto sea gruesa)

 

Fíjat que cada regla finaliza siempre en punto y coma

Después de añadir el código guarda el menú, para que se guarden los cambios

 

Elemento menú wordpress texto color y grosor

Efecto de personalizar el diseño de un elemento del menú

 

 

3.- Personalizaciones de diseño más complejos en los elementos del menú, como botones y otros.

 

Si queremos hacer personalizaciones de diseño más complejas en los ítems del menú de wordpress, tendremos que añadir reglas CSS en un tema hijo o en una ventana general CSS de la plantilla.

 

En este post puedes ver como podemos implementar un menú transparente con WordPress: Menú transparente web

 

Para poder añadir opciones de diseño como efectos hover (efectos al poner el ratón sobre un elemento) y otros, ya no podremos hacerlo desde la pantalla de gestión del menú de WordPress, como veíamos en el apartado anterior.

Procederemos de la siguiente forma:

 

 

3.1.- Añadir Clase CSS al ítem de menú en cuestión.

 

En primer lugar, iremos a “Apariencia > Menús” para acceder a la pantalla de gestión de menús en WordPress.

En el ítem de menú cuyo diseño queramos modificar añadiremos un nombre de clase CSS. Para asociar el elemento del menú con una clase CSS.

 

¿Aún no conoces la plantilla Divi?. Aquí tienes una mega guía de la mejor plantilla para WordPress: Mega Guía Divi
SUPER DESCUENTO DIVI

 

Esto lo haremos en el campo: “Clases CSS (Opcional)”. Simplemente, pondremos un nombre que luego deberemos nombrar en la regla CSS que creemos.

En el ejemplo de la imagen hemos llamado a la clase: mi-item-personalizado

 

clase css item menu de wordpress

Añadir clase CSS a un elemento del menú de wordpress

 

NOTA: Si no te aparece el campo “Clases CSS (Opcional)”, ve a “Opciones de Pantalla” (en la parte superior de la interface y activa la visualización del campo.

 

 

3.2.- Añadir el código CSS

 

Para añadir el código tenemos dos opciones principales. Tenemos la opción de añadir el código en un