Añadir un CTA al menú de WordPress es fácil si sabes como
Añadir un CTA al menú de WordPress es algo muy sencillo pero puede resultar un poco confuso de hacer si no sabes los procedimientos a seguir. En este tutorial te vamos a enseñar como poder hacerlo de una manera sencilla y además vamos a animar un poco ese CTA para que resulte más llamativo para atraer la atención de tus usuarios.
¡Bien empecemos a crear nuestro CTA para el menú!
¿Por dónde empezamos?
Bien lo primero que tenemos que hacer para crear nuestro CTA es ir al dashboard y buscar la opción de apariencia y hacer click en la la pestañita de menú.
Una vez dentro de menú tenemos que crear nuestro menú personalizado.
Una vez aquí dentro solamente tenemos que buscar las opciones de menú y seleccionar la opción de clase CSS a la página que queremos añadir, en nuestro caso vamos a añadir este CTA en el top menu de WordPress.
Bien podemos añadir un enlace personalizado o bien escoger una página que tengamos previamente creada.
Una vez tenemos seleccionada la página que queremos añadir como CTA en nuestro menú solamente tenemos que hacer click dentro de el enlace y añadirle una clase CSS, en este caso la nuestra se llama “cta-unete”.
Hasta aquí todo perfecto ¿Y ahora que sigue?
Ahora crearemos nuestra clase CSS dentro del personalizador de temas. Solamente tenemos que ir a personalizador, buscar la pestaña de “CSS adicional” y añadir la siguientes lineas de código:
.cta-unete {border-radius: 0px;}
.cta-unete {border-radius: 0px;}
.cta-unete a {color: #000!important;font-weight: 400!important; }
li.cta-unete {background-color:rgba(255,255,255,0)!important; text-align: center; padding: 13px 13px 0px 10px!important; border-radius: 50px; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s;}
li.cta-unete:hover {background-color:#007bc2!important;color:#fff!important;}
.cta-unete a:hover{ color:#fff!important; opacity:1!important;}
.et-fixed-header #top-menu .cta-unete a {color: #fff!important;}
.cta-unete li.current-menu-ancestor > a, .cta-unete li.current-menu-item > a {color: #fff!important;}
.et_pb_fullwidth_menu–without-logo .et_pb_menu__menu>nav>ul>li>a{ padding-bottom:12px!important;}
.home .cta-unete:first-child{ margin-top:-5px!important;}/*En esta parte del código añadiremos una animación que le dará un efecto a nuestro CTA como si fuera un latido de corazón*/
.cta-unete:first-child{ animation-name: pulse;animation-duration: 3000ms;transform-origin:70% 70%;animation-iteration-count: infinite;animation-timing-function: linear;}@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-unete:first-child:hover{animation:none}//En este código concreto le decimos al navegador que cuándo ponemos el ratón o hacemos click en nuestro móvil se pare la animación.
@media screen and (max-width:760px){.cta-unete{ margin-bottom:1px; } #et-info-phone{display:block!important; text-decoration:underline; padding-bottom:10px; }}
Con estos ajustes hemos configurado que el botón sea redondo y que tenga un fondo blanco y que esté animado, cuándo hacemos hover (ponemos el ratón encima del CTA o le hacemos click desde un dispositivo móvil) la animación desaparecerá, el fondo cambiara a color azul y las letras pasarán de negro a color blanco.
Y ¡Voila! el CSS hizo su magia alineando verticalmente nuestro contenido, una vez creada la clase CSS simplemente tenemos que añadir esa clase a cualquier elemento que queramos alinear en DIVI.
Aquí tenemos el resultado final:
Esperamos que este pequeño tutorial os haya sido de utilidad ¡No dudéis en dejar vuestro comentario si tenéis cualquier duda!