En este tutorial, te enseñaré a colocar un botón web fijo flotante inferior de llamada a la acción que al dar click aparecerá información interactiva, únicamente usando divi y sin plugins externos 😍, este diseño me he inspirado al diseño que tiene divi pixel 😀
Descarga este layout por solo $2
Ahorrate el tiempo de construir desde cero, y ten listo tu diseño en 5 minutos !
Comprar en¿Por qué un botón fijo en la parte inferior derecha como llamada a la acción?
Porque puedes capturar la atención de tus visitantes al entrar a tu sitio web y cuando den click pueden encontrar información muy variada como promociones especiales, contacto por whatsapp, o cualquier otra acción que desees destacar, este botón será tu aliado para aumentar la interacción y conversión en tu sitio.
Estos son los matereales que vamos a usar para recrear este diseño.
Estilos css para añadir un icono extra al módulo anuncio
content: '\f061'; font-family: FontAwesome !important; font-weight: 900 !important; font-size: 18px; color: #fff; position: absolute; top: 11px; right: 30px; transition: all 200ms ease-in-out; transform: translateX(16px) scale(.7);
Estilos para hacer agregar el icono que falta al elemento del módulo Divi Accordion abierto
.et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title:before {
display: block!important;
content: "\e04f";
}Jquery para la funcionalidad
<script>
jQuery(document).ready(function($) {
$(".ui-abrir").click(function(){
$(".ui-contenido").addClass("ui-entrada");
$(this).addClass("ui-salida");
});
$(".ui-cerrar").click(function(){
$(".ui-contenido").removeClass("ui-entrada");
$(".ui-abrir").removeClass("ui-salida");
});
});
</script>Css finales para la funcionalidad
.ui-contenido {
opacity: 0;
transition: transform 0.4s ease, opacity 0.4s ease;
}
.ui-contenido.ui-entrada {
opacity: 1;
visibility: visible;
transform: scaleX(1) scaleY(1) translateX(0) translateY(0);
transition: transform 0.4s ease, opacity 0.4s ease;
}
.ui-abrir.ui-salida {
transform: scaleX(1) scaleY(1) translateX(600px) translateY(600px);
transition: transform 0.7s ease, opacity 0.7s ease;
}
.ui-abrir{
transform: scaleX(1) scaleY(1) translateX(0) translateY(0);
transition: transform 0.4s ease, opacity 0.4s ease;
}
0 comentarios