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.

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;

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