May 11, 2024 | Uncategorized

Cómo crear un botón web flotante con información interactiva

Cerrar video

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

Enviar un comentario

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

Hola, soy Fer!

Por el momento no estoy aceptando nuevos trabajos, gracias por tu comprensión.