Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the woo-checkout-field-editor-pro domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the woocommerce domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the wp-pagenavi domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the hurrytimer domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the woocommerce-paypal-payments domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the woocommerce-subscriptions domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the wordpress-seo domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Deprecated: ¡La función get_page_by_title ha quedado obsoleta desde la versión 6.2.0! Usa WP_Query en su lugar. in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Deprecated: ¡La función get_page_by_title ha quedado obsoleta desde la versión 6.2.0! Usa WP_Query en su lugar. in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Deprecated: ¡La función get_page_by_title ha quedado obsoleta desde la versión 6.2.0! Usa WP_Query en su lugar. in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114
Cómo añadir Botón CTA en Menu DIVI - Victor Aquino
Consigue Divi desde la web oficial a un precio especial
Ver Más

patrocinado

La mejor membresía para DiviFans

Aprovecha el plan más completo para DiviFans. Con una membresía de 1 AÑO de Guaupress obtienes: Descarga de +1000 plugins y temas WordPress, incluído +20 plugins Divi premium, por 1 año; API KEY del tema Divi para sitios Ilimitados, Pack de +500 plantillas Premium para Divi, listas para importar. La mejor membresía para DiviFans. Mira a detalle lo que ofrecemos haciendo click al botón de abajo:

Cómo añadir Botón CTA en Menu DIVI

por | Ene 11, 2021 | Divi Trucos | 0 Comentarios

PATROCINADO

El Mejor Hosting WordPress Divi. Estable, Seguro y Rápido.

Prueba el servicio de hosting más confiable y conocido del mercado: BANAHOSTING, sin riesgos con un Súper Descuento del 95% en cualquier plan. Cupón de descuento: BH1D

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

Cómo añadir Botón CTA en Menu 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…

Divi tantos estilos Victoraqui.com

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.

Botones cta en menu Divi tutorial facil

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 😉

Si te gustó el contenido

Apóyanos compartiendo en tus redes, nos ayudarías muchísimo. Y haz click en la quinta estrella de abajo, para saber que éste tema te interesa y hacer artículos similares.

5/5 - (5 votos)

No olvides que subo trucos nuevos cada semana suscríbete a mi canal y dale a la campanita para que te enteres cuando suba uno nuevo.

Hasta la próxima!!

Artículos Relacionados

Victor Aquino

Experto en WordPress y Divi, entusiasta del SEO, Copywriting, Marketing Digital y Negocios Online en general. Amante de la vida y tu webmaster de confianza.

Contactar

¿Quieres invitarme un cafécito?

Así podré estar más despierto para crear más contenido gratuito como éste 😛

Click Aquí

¿Tienes dudas?

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Hosting WordPress

El mejor Hosting Premium optimizado para WordPress y Divi, al mejor precio.

Licencias 1 Sitio

Divi Theme/ Builder

Ver Más

Divi Machine

Ver Más

Divi Bodycommerce

Ver Más

Divi Flash

Ver Más

Últimos Artículos

Q

¿Quieres Desbloquear TODO el contenido?

Registrándote en nuestra web tendrás acceso a TODO el contenido gratuito oculto. Deja tu correo aquí abajo para que te enviemos un mail con el formulario de registro gratuito.


Notice: ob_end_flush(): failed to send buffer of zlib output compression (0) in /home/victoraquic1/public_html/wp-includes/functions.php on line 5464