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 tema hijo o en una ventana CSS que nos proporcione la plantilla.

No te recomiendo que añadas el código modificando los archivos CSS de la plantilla, ya que, al actualizarla, perderás todos los cambios añadidos.

La forma de nombrar la clase css que hemos puesto en el ítem de menú estaría precedida de un punto y haciendo referencia al enlace con “a”. Es decir, en el ejemplo anterior sería:

 

.mi-item-personalizado a {

/* Aquí irían las reglas CSS */

}

 

Si por ejemplo queremos añadir la forma de un botón entorno al enlace, podríamos poner la siguiente regla CSS.

 

.mi-item-personalizado a {

border: 2px solid #919BBC!important;

padding: 12px!important;

border-radius: 25px;

text-align: center;

}

 

 

3.2.1.- Añadir el código CSS en un tema hijo o chid Theme

 

Si tenemos un tema hijo o child theme de nuestra plantilla, cosa muy recomendable, tendremos que añadir el código en el archivo style.css del tema hijo

 

Aquí tienes más info sobre los temas hijo o child themes en WordPress. Además te podrás descargar el Divi hijo (tema hijo de la plantilla Divi): Temas hijo / Divi hijo

 

 

3.2.2.- Añadir el código en una ventana CSS de la plantilla WordPress

 

Algunas plantillas para WordPress disponen de ventanas CSS en las cuales podemos añadir código CSS. En el caso de actualizar la plantilla, estos códigos CSS no se pierden. Es decir, actúan de manera similar a los temas hijo o child themes.

En el caso de la plantilla Divi, tienes esta ventana en: “Divi > Opciones del tema > General”. Al final de la página tienes un área de texto denominado: “CSS Personalizado”.

 

area de texto de la plantilla Divi para añadir CSS Personalizado

Ventana CSS de la plantilla Divi

SUPER DESCUENTO DIVI

 

 

4.- Cómo añadir un botón en el menú de WordPress con la plantilla Divi (añadir call to action en el menú)

 

Vamos a ver ahora que código añadir para añadir el formato de botón a uno de los elementos del menú de WordPress utilizando la plantilla Divi.

 

 

El código CSS es un código modificado, basado en el publicado por Josh Hall en su página web.

Puedes modificar el código CSS para personalizar los colores a tu gusto y en función de tus colores corporativos.

En el código te indicaré con comentarios las partes más importantes a personalizar.

 

 

4.1.- Añadir la Clase CSS al ítem de menú de WordPress

 

Lo primero que debemos hacer, como hemos visto anteriormente, es asignar la clase CSS al elemento o ítem de menú que queremos convertir en un botón de llamada a la acción o call to action.

Para ello, iremos a “Apariencia > Menús”, y en el campo: “Clases CSS (opcional)” pondremos: “menu-cta”. Míralo en la siguiente imagen:

 

añadimos el botón como item de menú divi

Añadir la clase CSS del botón menú Divi

 

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.

 

¿Aún no conoces Divi Booster? este plugin te permitirá personalizar mucho más la plantilla Divi: Divi Booster
SUPER DESCUENTO DIVI + REGALO

 

 

4.2.- Añadir las reglas CSS en la plantilla Divi

 

Ahora es el momento de añadir el código CSS. Como hemos comentado en los apartados 3.2, 3.2.1 y 3.2.2, para añadir las reglas CSS tenemos dos opciones con la plantilla Divi

 

i.- Tema hijo | Divi Hijo: si tenemos instalado un tema hijo o child theme de Divi, podremos añadir el siguiente código CSS en el archivo style.css

ii.- Ventana CSS Divi: no te preocupes, si no tienes un tema hijo, podrás añadir el siguiente código en la ventana CSS de la plantilla Divi situada en: “Divi > Opciones del tema > General”. Al final de la página, en el área de texto: “CSS Personalizado”.

Recuerda guardar los cambios

 

CSS Personalizado divi botón menú

Añadir código CSS al area de texto de Divi CSS Personalizado

 

El código css a añadir es el siguiente:

 

/*---------------Menu CTA Button---------------*/

.menu-cta a {

border: 2px solid #919BBC!important; /*  #919BBC – color borde botón  */

padding: 12px!important;

border-radius: 25px; /* radio curvatura del botón */

text-align: center;

}

.menu-cta a:hover {

background-color: #919BBC; /* color de fondo al poner el ratón sobre el botón */

color: white!important; /* color texto botón al poner el ratón sobre el botón */

}

.et_header_style_left #et-top-navigation {

padding-top: 16px!important;

}

.et_header_style_left .et-fixed-header #et-top-navigation {

padding-top: 6px!important;

}

/*---------------Menu CTA Button Mobile Settings---------------*/

@media only screen and (max-width: 980px) {

.menu-cta a {

background-color: #FFFFFF;

}

}

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO DIVI (33 Clases)
3.- CURSO ELEMENTOR (14 Clases)
4.- CURSO BLOOM + MAILCHIMP (7 Clases)
5.- CURSO SEO (19 Clases)
6.- CURSO BLOG WORDPRESS (32 Clases)
7.- CURSO WOOCOMMERCE (39 Clases)
8.- CURSO FLATSOME WORDPRESS (36 Clases)
9.- CURSO COLORES WEB (9 Clases)
10.- CURSO ANALYTICS (10 Clases)
11.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
12.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.