Aprende cómo crear un botón CTA en un menu DIVI, pero antes…
¿Cómo debe estar estructurada una página web para que logre sus objetivos?
Pues primero teniendo claro qué queremos lograr con ella y luego armarla de tal forma que la navegación sea un proceso en que llevemos al cliente de la manito hacia donde queremos.
El secreto es no hacerle pensar demasiado. Con mil opciones a elegir:
Sino resaltarle qué es lo que queremos que haga.
Una de las herramientas que se usan para tal fin son los botones de llamado a la acción.
Hoy aprenderemos como crear un botón de llamado a la acción en la cabecera del tema Divi.
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 necesitas una licencia para 1 sitio web, puedes adquirirla desde Rapihosting, la web de nuestro servicio de Hosting para WordPress, que también ofrece el servicio de activaciones del tema Divi para 1 sitio web con una licencia original de por vida, a un precio accesible para todos. Así que si deseas el tema Divi con actualizaciones automáticas de por vida, acceso a las plantillas Premium y todas las funciones desbloqueadas, sigue éste enlace.
Procedimiento para el boton CTA en menu DIVI
Inicialmente nuestra cabecera se ve con todos los items iguales:
Lo que queremos es resaltar uno de ellos para enfocar la atención del usuario hacia allí. En mi caso el objetivo es que den click a “contacto” para que el usuario se comunique conmigo.
Para que éste item tenga la apariencia de botón bastará con seguir estos dos pasos. Hay un tercer paso, PERO sólo lo harás si tu CABECERA (header) está hecho con el generador de temas.
PASO 1 Poner clase “cta” al elemento del menu DIVI
Desde el panel de wordpress nos vamos a apariencia>menús.
Ahora debemos activar la opción para que se puedan agregar clases css a los elementos. Esta opción se encuentra en la parte superior de la página. Donde dice Opciones de pantalla, marcamos clase css.
Ahora, al elegir el elemento del menu DIVI nos aparecerá la casilla: “Clases CSS (opcional)”, allí escribir: cta
No olvidar guardar cambios.
¿Quieres más Tutoriales cómo éste?
Queridos lectores, cada semana subo un artículo con nuevos trucos geniales para Divi y Woocommerce que debo decir que no encuentras en ningún otro lugar. Para que no te pierdas nada, suscríbete a mi lista de contactos para que recibas automáticamente en tu bandeja de entrada cada nuevo artículo que suba de forma gratuita!! ¿No es fantástico?
Así que inscríbete ya mismo desde aquí:
PASO 2 Pegar el código de estilos en la sección de CSS de Divi
Les he dejado dos códigos, utilicen uno u otro dependiendo de: Si tu cabecera es la que viene por defecto en Divi (Código 1), o si tu cabecera está armada usando el generador de temas (Código 2)
CÓDIGO 1:
En caso que estés utilizando la cabecera nativa de Divi (SIN usar el constructor de temas) copia y pega éste código y ya aparecerá tu botón:
Gracias por suscribirte!
IMPORTANTE – Se te ha enviado un correo de confirmación. Revisa tu bandeja de entrada. Por favor confirma tu correo para poder enviarte nuevos tutoriales, artículos, códigos, recursos y comunicarnos directamente 🙂
.cta a {
/*Color de Fondo Botón*/
background-color:#ed5555 !important;
/*Color de Letra Botón*/
color:#ffffff !important;
/*Curvatura de las Esquinas*/
border-radius:8px;
padding:13px 13px 15px 13px !important;
}
/*Estilos del Botón al pasar el ratón*/
.cta a:hover {
/*Color de Fondo Botón al pasar el ratón*/
background-color:#ed5555 !important;
/*Color de Letra Botón al pasar el ratón*/
color:#ffffff !important;
opacity:1 !important;
padding-right:25px !important;
transition: all 300ms ease 0ms;
}
.cta a:after {
font-size: inherit;
font-family:ETmodules;
content: "35";
opacity: 0;
position: absolute;
margin-left: -1em;
transition: all 300ms ease 0ms;
}
.cta:hover a:after{
opacity: 1;
margin-left: 0em !important;
}
#top-menu-nav {
transform: translatey(-8px);
}
@media (max-width:980px) {
.cta a {
padding-left:5% !important;
padding-right:5% !important;
display:inline-block !important;
}
}
CÓDIGO 2:
Sólo en caso que tu cabecera haya sido construida con el generador de temas, copia y pega éste otro código (ya no uses el anterior):
Gracias por suscribirte!
IMPORTANTE – Se te ha enviado un correo de confirmación. Revisa tu bandeja de entrada. Por favor confirma tu correo para poder enviarte nuevos tutoriales, artículos, códigos, recursos y comunicarnos directamente 🙂
/*Estilos para el Botón:*/
.et-boc .menuclass .cta a {
/*Color de Fondo Botón*/
background-color:#ed5555 !important;
/*Color de Letra Botón*/
color:#ffffff !important;
/*Curvatura de las Esquinas*/
border-radius:8px;
padding:13px 13px 15px 13px !important;
margin-top:auto;
margin-bottom:auto;
}
/*Estilos del Botón al pasar el ratón (hover)*/
.et-boc .menuclass .cta:hover a {
/*Color de Fondo Botón al pasar el ratón*/
background-color:#ed5555 !important;
/*Color de Letra Botón al pasar el ratón*/
color:#ffffff !important;
opacity:1 !important;
transition: all 300ms ease 0ms;
}
.et-boc .menuclass .cta a:after {
font-size: inherit;
font-family:ETmodules;
content: "35";
opacity:0;
transform:translatey(0px) !important;
margin:auto;
margin-left: -1em !important;
transition: all 300ms ease 0ms;
}
.et-boc .menuclass .cta a:hover:after{
opacity: 1;
margin-left: 0em !important;
}
#top-menu-nav {
transform: translatey(-8px);
}
@media (max-width:980px) {
.et-boc .menuclass .cta a {
padding-left:5% !important;
padding-right:5% !important;
display:inline-block !important;
}
}
¿Dónde pegamos el código?
Desde nuestro panel de administración WordPress nos dirijimos a la sección de divi y elegimos: “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. Obviamente al final, hacer click en guardar cambios.
PASO 3 Agregar clase: menuclass al módulo menú dentro del generador de temas
(Haz éste paso SÓLO si tu cabecera está hecha con el generador)
Ingresa al generador de temas y al editor de cabecera, y busca el módulo menú y desde la pestaña avanzado y la sección clase css (como se ve en la imagen de abajo), añadir la clase menuclass.
Personalizando nuestro Botón
Podrán observar en el código algunas instrucciones, que las he agregado para que puedan personalizarlo a su gusto de manera más fácil.
En el primer párrafo hay indicaciones para que puedas cambiar el color de fondo del botón CTA Divi, más abajo también puede cambiarse el color de la letra si deseas.
En el siguiente párrafo del código hay opciones para cambiar estilos del botón, pero ésta vez serán los que se verán cuando tenga el cursor encima, es decir estilos hover.
En cuanto a las demás secciones del código, éstas cambian distintas configuraciones del boton CTA. Si no tienes mucho conocimiento de CSS, te recomiendo que lo dejes tal cual y solo edites las partes que tienen comentarios o instrucciones como ésta: /* Color de Fondo */
Y listo, podemos ver cómo nos quedó diferenciado el item “CONTACTO”, con el mismos efecto del módulo botón de Divi:
Déjenme en los comentarios enlaces a páginas que tengan diseños de cabeceras que les gustaría construir. Y en próximos videos veremos el paso a paso cómo las armamos. Para no perderte nada no olvides SUSCRIBETE AHORA MISMO. Nos vemos en siguiente video. Y NO OLVIDEN, EN EL MUNDO DIGITAL TODO ES POSIBLE.
0 comentarios