Cómo crear un BOTÓN en MENÚ de WordPress, “Call to Action” CTA cambiando el diseño de un ítem o elemento de menú de WordPress

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 IR A MI ACADEMIA

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

 

 

 

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.

IR A MI ACADEMIA

 

 

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>

 

IR A MI ACADEMIA

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>

 

 

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

 

 

 

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.

 

 

IR A MI ACADEMIA

 

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.

 

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

 

 

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.

IR A MI ACADEMIA

 

 

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

 

IR A MI ACADEMIA

 

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”.

 

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.

IR A MI ACADEMIA

 

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:

 

 

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.

 

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

 

 

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;

}

}