Configurar el Menú Principal o de Cabecera de la plantilla Divi es bastante sencillo. Aún así,  siempre puedes necesitar opciones de diseño que la plantilla no trae por defecto.

Una de ellas, es la de convertir los enlaces del menú en botones y eso es lo que vamos a ver detenidamente en este post. Concretamente, vamos a explicar paso por paso cómo añadir un botón CTA al Menú de una web con Divi.

Además de que cada vez se usa más esta práctica para llamar la atención de tus visitas hacia tus productos online, la misma web de Elegant Themes lo incluye en su Menú Principal con el título «Join to Download».

¿Qué es un botón CTA?

Antes de nada, repasemos qué es un CTA y para qué sirve.

Un CTA (Call To Action) es un botón o enlace situado en una página web con el fin de llamar la atención de las visitas a esta y atraer clientes potenciales. También se le puede llamar botón de «Llamada a la acción».

Normalmente, este botón enlaza a una página de destino o landing page en la que se vende algo o se oferta algún producto online.

Por lo que si cuentas con una web eCommerce, añadir algún que otro CTA a tu web es imprescindible, pues tus ventas se pueden ver notablemente incrementadas añadiendo este simple elemento.

Este es un ejemplo de botón CTA con la plantilla Divi en la propia web de Elegant Themes:

Añadir un botón al Menú de tu web con Divi paso por paso

Activando el constructor Divi resulta fácil añadir al contenido de cualquiera de tus páginas o posts un módulo de «Llamada a la acción», pero esto no es posible en el caso de que necesites añadirlo a un menú tal como Menú Principal, Barra Lateral o Pie de Página.

Al no existir ninguna opción directa para añadir un botón CTA al Menú de una web con Divi, los pasos que tendrás que seguir serán los siguientes:

1 CREAR UN MENÚ.

El primer paso es crear el Menú en WordPress. Si necesitas orientación base sobre este paso, te aconsejo echarle un vistazo a este tutorial.

En nuestro ejemplo, vamos a crear un Menú Principal con las páginas de Inicio, Blog, Productos, Contacto y un botón CTA de Únete a nosotros.

Coloca las pestañas en el orden que deseas que se muestren en el menú, activa la casilla de «Menú Principal» y guarda cambios.

A continuación, comprueba que el Menú se muestra correctamente.

2 AÑADIR UNA CLASE CSS.

Añadir una clase CSS al Botón CTA de nuestro menú es muy sencillo.

Primero activa la casilla Clases CSS en las opciones de pantalla para que de forma automática se añada esta casilla a cada elemento del menú.

A la clase que vamos a crear la vamos a llamar .cta-unete.

Por lo tanto, escribe cta-unete dentro de la clase CSS del elemento BOTÓN.

Rellena también la url de destino (#) dentro de la pestaña que será el botón CTA.

3 AÑADIR ESTE CÓDIGO CSS A LA PLANTILLA DIVI.

Para que la clase CSS .cta-unete que hemos creado en el paso anterior funcione, es necesario que le indiquemos a la plantilla Divi cómo tiene que funcionar dicha clase.

Para ello, ve a Divi -> Opciones del tema -> General -> CSS Personalizado y añade el siguiente código.

/* CTA Únete a nosotros */

.cta-unete {border-radius: 0px;}
           .cta-unete a {color: #fff!important;}
            li.cta-unete {
                background-color:#ed7818; 
                font-weight: 700; 
                text-transform: uppercase; 
                text-align: center; 
                padding: 12px 13px 10px 10px!important;
            border-radius: 50px;
                -moz-transition: all 0.5s; 
                -webkit-transition: all 0.5s;
                transition: all 0.5s;}
            li.cta-unete:hover {background-color:#c96310;}
 

                 .et-fixed-header #top-menu .cta-unete a {
                        color: #fff!important;}
        .cta-unete li.current-menu-ancestor > a, .cta-unete li.current-menu-item > a {
                    color: #fff !important;}
 
 
 
    @media only screen and (min-width : 981px) {
            li.cta-unete {height: 33px;}}

A continuación, modifica aquellos valores que veas necesarios, como el color de texto, color de fondo, tamaño de texto, estilo en hover, el radio del borde…

En nuestro ejemplo de botón CTA el resultado sería el siguiente:

Además, este código también te sirve para añadir un botón CTA al diseño de los menús de Divi en dispositivos móviles. En nuestro ejemplo se quedaría así:

Si ya sabes agregar un botón de Call To Action al Menú Principal de Divi, el procedimiento para agregarlo a cualquier otro menú que tengas incluido en la web, como por ejemplo el Menú Lateral, sería el mismo. Aunque probablemente tengas que modificar parte del código para que se muestre correctamente.

Este código pertenece a Geno Quiroz.

3 Consejos para optimizar un CTA

Una vez ya sepas cómo añadir un botón de Llamada a la Acción al menú de Divi, el siguiente paso será saber sacarle el mayor rendimiento posible.

Para ello, aplica estas recomendaciones ya probadas con éxito en otras webs:

1. CONOCE A TU PÚBLICO.
   Suena repetitivo, pero conocer bien cuál es tu cliente ideal, cuál es el perfil predominante que te visita y cuáles son sus intereses principales te ayudará enormemente a focalizar tus estrategias de venta.
   El simple hecho de modificar el título de tu botón CTA de forma que de respuesta a lo que tus usuarios andan buscando (qué descuento, qué precio, qué producto…), o de modificar su ubicación, podría suponer un gran cambio en el número de visitas que terminan clicando en él.
2. CREA UN BUEN DISEÑO.
   Trata de llamar la atención del usuario con un CTA llamativo pero de forma que no rompa con el diseño de tu web y de tu marca.
   Las «reglas» básicas para diseñar un CTA que llame la atención son utilizar colores contrastados entre fondo y texto, que estos colores sean agradables a la vista, que el botón sea completamente visible entre los demás elementos de la web y utilizar un texto corto y preciso.
   Los colores que más se suelen usar para un botón de Llamada a la Acción y que está demostrado que funcionan son el naranja y el verde. Pero esto ya será decisión tuya. Igualmente, para el hover del botón (efecto al pasar el ratón) se suelen usar los mismos colores pero en un tono más suave.
3. REALIZA PRUEBAS.
   No dejes de hacer pruebas dentro de los modelos de CTA que sabes que te funcionan. Realiza test A/B con el constructor Divi y pide feedback a tus usuarios hasta que alcances el resultado óptimo.

Con estas simples estrategias para añadir un botón CTA al Menú de una web con Divi, tendrás más que asegurado la conversión de tu negocio online. ¿Y tú? ¿Cómo haces uso de estas Llamadas a al Acción?