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 DIVIEn 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
Ejemplo práctico de botón de llamada a la acción en menú
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE BOTÓN MENÚ WORDPRESS
- 1.- ¿Por qué surge la necesidad de cambiar el diseño de algún elemento concreto o ítem de menú?
- 2.- Cómo cambiar el diseño de un ítem del menú de Wordpress desde la pantalla de gestión del menú
- 3.- Personalizaciones de diseño más complejos en los elementos del menú, como botones y otros.
- 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ú)
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.
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>
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
Efecto de personalizar el diseño de un elemento del menú
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.
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:
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.
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
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
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”.
Ventana CSS de la plantilla Divi
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.
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ñ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.
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
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;
}
}
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Buenas, amigo quisiera hacer que mi boton CTA que tengo en inicio me redirigiera a una pagina en mi menu contacto, como programo ese boton con la url o css para que el musuario al tocarlo lo diriga a esa parte de la
pagina, gracias
Hola Sergio.
Tendrás que abrir la página de contacto, ver que url tiene y después utilizar esa url en el botón. Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, sobre Woocommerce, SEO Tiendas online, Analytics ecommerce, Cursos sobre Divi, Elementor, Flatsome, blog wordpress etc. etc.***
Grande Joaquín!!! Con esto como base y unos retoques he conseguido hacer lo que me pedían unas clientas.
Hola Ricardo.
Me alegro que te haya servido este post para crear un call to action en WordPress.
***Me gustaría también Informarte que desde mi plataforma de formación cursotiendaonline.com puedes Acceder a TODOS mis cursos online por solo 10 €/mes + ¡¡SOPORTE!!. En la plataforma tienes cursos sobre WordPress, Cursos sobre la Divi, Astra pro, Cursos sobre Woocommerce, Cursos sobre SEO, SEO para tiendas online, Analytics, Analytics para tiendas online, sobre Mailchimp, blog WordPress, etc. etc.
Para ver el temario de un curso en concreto, ve a cursotiendaonline.com busca el curso cuyo temario quieras ver y haz clic en «INFO CURSO» . Además, como te decía, los cursos inclye SOPORTE!!! ****
Muchas gracias.
Me ha sido súper útil. Es lo que estaba buscando.