Seleccionar página
4
Volver al contenido del HUB: Hub | Snippets Menú

Crear un Botón Destacado (CTA) en el Menú de Divi

En este HUB Content te enseñaremos a crear un Botón Destacado (CTA) en el Menú de Divi y además con animación. Este es otro de nuestros Divi Snippets para que puedas personalizar tu sitio web aún más.

Con este HUB Content de nuestra plataforma aprenderás a crear un botón al que tuvo Elegant Themes en su momento, que funciona principalmente como botón CTA (Call to Action o Llamado a la acción) desplegado en la barra de navegación principal del sitio.

Importante saber: Este mini-tutorial funciona si manejamos el menú de navegación que viene por defecto con Divi, si deseas hacer algo similar pero con un menú en el Theme Builder revisa nuestros últimos tutoriales premium sobre menús en el Theme Builder.

Paso 1: Activa el CSS en tu menú

Lo primero que tenemos que hacer es activar la opción que nos permita aplicar clases CSS a los elementos de nuestro menú. Así que navegamos hasta Apariencia > menús estando allí abrimos las Opciones de pantalla ubicado en la parte superior derecha y nos aseguramos de que esté activada la opción clases CSS.

Una vez activada, agregamos la clases CSS a los ítems o elementos del menú, lo cual permitirá cambiar el estilo y personalizar el comportamiento de uno o varios elementos (enlaces) de nuestro menú.

Paso 2: Snippet de CSS para crear Botón Destacado (CTA) en Divi

Copia el código CSS de acá abajo y luego de eso, ve a las opciones del tema Divi > Generales > insertar código CSS personalizado y pega el código CSS.

.cta-menu a {
	border: 2px solid #009FE3; /*grosor y color del border del boton*/
    padding-top: 10px !important;
	padding-bottom: 10px !important;
	padding-right: 20px !important;
	padding-left: 20px !important;
	border-radius: 25px;
    background: #0001d4;  /*fondo del boton*/
    color: #fff !important; /*letras del boton*/
	animation-name: pulse;
 	animation-duration: 3000ms;
  	transform-origin:70% 70%;
  	animation-iteration-count: infinite;
  	animation-timing-function: linear;
}

.et-fixed-header #top-menu .cta-menu a { 
	color: #fff !important; 
}

@keyframes pulse {
  	0% { transform: scale(1); }
  	30% { transform: scale(1); }
  	40% { transform: scale(1.08); }
  	50% { transform: scale(1); }
  	60% { transform: scale(1); }
  	70% { transform: scale(1.05); }
  	80% { transform: scale(1); }
  	100% { transform: scale(1); }
}
    
.cta-menu a:hover {
	border: 2px solid #0001d4; /*grosor y color del border del boton*/
    background: #009FE3; /*fondo del boton*/
    color: #fff !important;  /*letras del boton*/
    opacity: 1 !important;
	animation: none;
}

El resultado que tendremos será el siguiente:

¡Y listo! Super fácil, ¿verdad? ¡Ahora con este snippet podrás crear un Botón Destacado (CTA) en el Menú de Divi!

Con este otro snippet podrás personalizar la barra de desplazamiento de tu sitio web.

¿Te ha gustado? No olvides compartirlo y comentar nuestro contenido. Nos vemos en un próximo Snippet.

Contenido Relacionado

0 comentarios

Enviar un comentario

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

¡Valóranos!

¿Te han gustado nuestros tutoriales y cursos? por favor, déjanos una valoración de 5 estrellas en truspilot, nos ayudará mucho su calificación ¡Gracias!

🖐 ¡RECIBE LAYOUTS Y CHILDTHEME GRATIS! 😎

Suscribiendote a esta lista de correo, recibirás algunos de nuestros layouts premium y un childtheme para eCommerce totalmente gratis. Además te enviaremos nuestro resumen de contenidos para que siempre estés enterado/a de nuestras últimas novedades.

¡Perfecto! ¡Gracias! Pronto comenzarás a recibir nuestros recursos gratuitos