Ahorra hasta 20% OFF en nuestro Planes y Cursos

Día(s)

:

Hora(s)

:

Minuto(s)

:

Segundo(s)

Solo durante:

Ahorra hasta 20% OFF en nuestro Planes y Cursos

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 *

¡40% + 10% OFF en nuestro lanzamiento!

Apúntate y te avisaremos cuando esté publicada nuestra nueva plataforma uxdivitemplates.com. Te regalaremos un cupón ÚNICO de descuento del 10% adicional a los descuentos de lanzamiento.

¡Gracias! Te avisaremos cuando publiquemos nuestra plataforma y te enviaremos el cupón de descuento único por estar en esta lista.