Los botones de llamado a la acción son sumamente importantes dentro de tu estrategia web porque dirigen la atención de los usuarios hacia tu objetivo.
Hoy te traigo una herramienta para generar botones CTA o de llamada a la acción, personalizados y agregarlos al menú Divi

¿Qué es un botón de llamada a la acción o CTA?
Los botones de llamada a la acción o CTA (por sus siglas en inglés, Call to Action) son elementos de diseño que se utilizan para motivar a los usuarios a realizar una acción específica, como comprar un producto, suscribirse a un boletín informativo, descargar un recurso, llenar un formulario, entre otros. Son una parte fundamental de cualquier diseño web.
Beneficios de usar botones de Llamada a la acción o CTA
Entre sus múltiples beneficios podemos encontrar:
1. Mejora la experiencia del usuario
Los botones CTA guían al usuario hacia la acción deseada de manera clara y concisa. Esto hace que la experiencia del usuario sea más fluida y menos frustrante, lo que a su vez aumenta la probabilidad de conversión.
2. Aumenta las tasas de conversión
Los botones CTA son una herramienta clave para convertir a los visitantes en clientes potenciales. Cuando el botón está diseñado de manera efectiva y se coloca en una posición destacada, las tasas de conversión pueden aumentar significativamente.
3. Mejora la claridad y la comprensión
El diseño claro y conciso de los botones CTA puede mejorar la claridad y la comprensión de la acción deseada. Los usuarios no tienen que adivinar lo que se espera de ellos, lo que reduce la confusión y mejora la eficacia del mensaje.
Tip para el Mensaje del botón CTA
El mensaje del botón CTA también es clave. Debe ser corto y persuasivo, y debe indicar de forma clara y concisa qué acción se espera del usuario. Ejemplos de mensajes persuasivos incluyen «Regístrate ahora» o «Compra hoy y obtén un 10% de descuento».
Botones de llamada a la acción en Menú Divi
Por todo lo mencionado anteriormente, ya debes tener bien claro lo siguiente: El diseño de tu web debe contar con al menos un botón de llamada a la acción, el cuál vaya acorde al objetivo de tu web.
Y quizá una de las ubicaciones más utilizadas para ubicar un botón CTA sea el menú principal. Sólo piénsalo, la cabecera es una de las partes de la web que recibe mayor protagonismo. ¿No crees que es buen lugar para colocar un llamado a la acción claro?

Hay muchos temas que tienen la opción de seleccionar un item específico del menú para que se muestre como botón CTA. En el caso de nuestro querido tema Divi, no viene una opción por defecto, pero vaya que si es posible agregar uno, y personalizarlo como nos guste. Nuestro tema Divi siempre tan versátil…
Para ello necesitaremos agregar un poco de CSS, pero tranquil(a), yo estoy aquí para dártelo todo ya masticado…

Antes de empezar, ¿Ya tienes el tema Divi con licencia?
Divi es sin lugar a dudas el mejor tema para WordPress y la mejor inversión que puedes hacer para tu web. Si deseas adquirir licencias de Divi para sitios ilimitados y con el soporte de Elegant Themes, puedes obtenerlo desde la web oficial con un 20% de descuento desde aquí.
Por otro lado, si sólo deseas activar la licencia en un sitio web, puedes utilizar nuestro servicio de activación de licencias para que tu sitio cuente con una licencia lifetime, a un excelente precio.
Si eres miembro premium tienes, además, un descuento adicional.
¡Vuélvete un miembro VIP!
Accede a la descarga de Plugins Premium, 20% de descuento en activación de licencias y acceso a los tutoriales premium, volviéndote un miembro VIP
Procedimiento para el boton CTA en menu DIVI
Originalmente nuestra cabecera se ve con todos los items iguales:

Lo que queremos es resaltar uno de ellos como botón CTA para enfocar la atención del usuario hacia allí. En éste caso lo haremos con el item: «Contacto»
Para lograr que éste item tenga la apariencia de botón bastará con seguir estos pasos.
PASO 1 Generar los códigos necesarios
Vamos a necesitar, por un lado el código CSS con los estilos que queremos para nuestro botón, y por otro lado, la clase CSS que agregaremos al item del menú que deseamos resaltar.
Y ambos, se generan automáticamente con la herramienta de abajo, y los tendrás listos para copiar y pegar.
Para visualizar la herramienta que nos generará el código necesario, solo dejen su correo en el formulario de abajo y hagan click al botón: «Ver Herramienta».
Y automáticamente aparecerá.
Adicionalmente, se te enviará a tu correo un mail de confirmación para ser añadido a mi lista. Es opcional, pero déjame decirte que con la comunidad de mi lista comparto nuevos trucos, códigos, tutoriales, promociones, sorteos y obviamente más herramientas. Además que tenemos una comunicación más directa para compartir y resolver dudas. Así que confirma tu correo.
Si eres usuario premium, no será necesario que ingreses tu correo
Herramienta generadora de botones CTA para Divi
Gracias por solicitar suscribirte, pero aún falta un paso...
IMPORTANTE - ¡Aún no estás suscrito a mi lista!
Revisa tu bandeja de entrada, se te ha enviado un correo de confirmación. Confirma tu correo para ser parte de la comunidad de mi lista y compartirte nuevos tutoriales, artículos, códigos, recursos, promociones y comunicarnos directamente 🙂
Pdta: Ya puedes ver los códigos del tutorial debajo de éste mensaje

Ahora vamos a ver qué haremos con los elementos generados por la herramienta.
PASO 2 Poner la clase correspondiente al elemento (item) del menu DIVI
Con ésto elegiremos específicamente qué item o items queremos transformar
Primero, debes copiar la clase generada por la herramienta. Es la que aparece de ésta forma: (la imagen de abajo es un ejemplo, la herramienta genera clases diferentes cada vez que se usa, debes utilizar la que se te generó a ti)

Luego, desde el panel de wordpress, nos vamos a apariencia>menús. Una vez estemos en el administrador de menús de WordPress...
Por defecto, al configurar los items del menú, no nos aparece la opción para agregarles clases CSS. Debemos activar la opción. Ésta opción se encuentra en la parte superior de la página.
Donde dice Opciones de pantalla, haremos click para que se muestren todas las funciones disponibles.

Puede que te interese también éstos otros artículos sobre cabeceras y menús:
De entre todas las opciones, marcaremos la que dice "Clases CSS". Y con ésto ya podremos agregar clases a los item del menú,

Ahora, volveremos más abajo, a los items del menú. Al desplegar el item que elijamos, En la casilla "Clases CSS (Opcional)" vamos a pegar la clase generada por la herramienta, que anteriormente copiamos. Como en la imagen de abajo:

No olvides darle a Guardar Cambios.

Si te está gustando el artículo, éstos otros te van a encantar:
PASO 3 Pegar el código de estilos en la sección de CSS personalizado de Divi
La herramienta también nos generó todo el CSS para los estilos del botón, según nuestra personalización. Ahora deberás copiar todos esos estilos.

¿Dónde pegamos el código?
Desde nuestro panel de administración WordPress nos dirijiremos a la pestaña divi y elegiremos: «Opciones del tema». Una vez allí, debemos ir a la parte final hasta encontrar una sección llamada: «CSS Personalizado». En esa casilla, debemos pegar el código generado por la herramienta.
Al final, no olvidar hacer click en guardar cambios.
Y listo, habremos terminado.

Mira como quedó, se ve genial:

¡De ésta forma podemos generar rápidamente todos los botones CTA que querramos y con los estilos que más nos gusten!
Pssst Tengo un artículo premium dónde encontrarás cuatro herramientas para cuatro geniales estilos de botón CTA, para que puedas crearlos todas las veces que necesites y tengas los códigos necesarios listos para copiar y pegar:
Preview de los botones CTA que podrás crear:




Muchas gracias de antemano si decides apoyar volviéndote un miembro premium, para poder seguir con éste proyecto dónde aprendemos todos 😉
0 comentarios