Oct 22, 2022 | Gratuito

Cómo crear una barra de promociones con divi que aparece y desaparece al hacer scroll

Cerrar video

Hola soy Fer, de seguro alguna vez has visto que algunos sitios usan una barra promocional para promocionar algún descuento, anuncio, etc. Algunas veces este barra está arriba y otras abajo, como el de Crehana.

Hay varios plugins que pudieran ayudarnos a realizar este diseño, pero en este post te enseñaré a realizar una barra de promociones con Divi, que aparece y desaparece cuando nos deslizamos de arriba hacia abajo de la página.

Barra de promociones con divi y sin plugins

El efecto es muy parecido al estilo de crehana. El diseño será sin plugins y usando solo el constructor visual de Divi con algunos fragmentos de código que he escrito para ti.

1. Crea el diseño de la barra de promociones en la parte baja de tu diseño

Puedes ver el vídeo que te servirá de guía para crear esta barra. Después de crearla vamos a usar estos fragmentos de código, te recomiendo ver el video para que sepas donde colocarlos.

transition: all 0.5s cubic-bezier(.30,.10,0.30, 1.10);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

2. Hacemos que funcione gracias a este código jQuery

<script>
jQuery(document).ready(function( $ ){
  
  var uiPromo = $('#ui-promo');
  $(window).on('scroll', function () {         
  var uiSeccion = $('#ui-seccion').offset().top;
      if ($(window).scrollTop() >= uiSeccion ) {
        uiPromo.css({
        'opacity': '1',
        'transform': 'translateY(0%)' 
           }); 
      } 
    
      else if ($(window).scrollTop() < uiSeccion ) {
        uiPromo.css({
        'opacity': '0',
        'transform': 'translateY(200%)'
          });  
               }
       });
});
</script>

3. Cómo ocultar la barra al cargar la página – VIDEO

Quizás al cargar la pagina la barra nos aparece, y a muchos no nos guste, para arreglarlo debemos añadir la siguiente propiedad en la sección que contiene nuestra barra promocional.

Nos vamos a configuración de la Sección > Avanzado > Css personalizado > y en Elemento principal pegamos este código

opacity: 0;

Nota importante

Cuando añadas esta propiedad, en tu editor visual esa sección se ocultará. Porque le hemos dado una opacidad de 0.
Asi que si quieres volver a editar, tienes dos opciones, usar la vista wirefrime o volver a quitar la propiedad opacity, hasta que hayas terminado de editar tu diseño. 🙂

4. Dale a laik jeje

Y eso sería todo ! A mi me pareció práctico y espero que a ustedes también. ¿A qué esperas? Anímate a probar este hermoso diseño y funcionalidad. No olvides que tus likes y compartidas me ayudan muchísimo.

Descargar landing page + barra de promociones

Descargar en

0 comentarios

Trackbacks/Pingbacks

  1. ► Como crear un carrusel de testimonios con divi y sin plugins 2022 • Ui Divi - […] ! casi lo olvido, seguro esto puede interesarte, «Cómo añadir una barra de promociones en divi y sin plugins».…

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.