⚡⚡ ¡FLASH SALE! 20% DE DESCUENTO SOLO POR UNOS DÍAS! ⚡⚡

La oferta termina en:

Día(s)

:

Hora(s)

:

Minuto(s)

:

Segundo(s)

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

Inicio / Blog / Snippets / Crear un Botón Destacado (CTA) en el Menú de Divi

UXDIVI

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.

2 Comentarios

  1. Enrique Martínez Guadalajara

    ¡Hola!

    ¿Cómo se podría modificar las diferentes opciones en la versión móvil?

    ¡Gracias!

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

Mi carrito
El carrito está vacío.

Parece que aún no te has decidido.