Cómo crear una barra de promociones en divi con el theme builder (sin plugins)

Seguramente haz visto algunos sitios por internet que para mostrar sus promociones usan una barra en la parte superior de su sitio, esta barra es para otorgar un descuento, mostrar un anuncio o cualquier tipo de oferta o promoción.

Para crear esta barra existen algunos plugins para wordpress y también algunos exclusivos para divi (de pago), pero en esta ocasión yo te quiero enseñar a sacarle el máximo provecho al generador de temas divi y mostrarte cómo puedes crear una barra de promociones para tu web completamente funcional sin plugins.

Esta promo bar la haremos con el theme builder de divi más unos fragmentos de código que he escrito para ti.

1. Lo primero que necesitamos hacer es el diseño de la sección de la barra de promoción desde el generador de temas (no entraré en detalle, para eso puedes darle play al video y saber cómo le hacemos).

En el transcurso de la construcción de esta sección vamos a requerir de este código CSS:

display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 0;

2. Posteriormente debemos agregar el icono (X) para cerrar la barra, esto lo haremos a través de este html:

<span class="cerrar-bar"></span>

3. Después necesitamos colocar los estilos para el icono de cerrar (X):

/*** OV Bar Promo ***/
.cerrar-bar:before {
  font-family: etmodules;
  content: '\4d';
  color: #ffffff;
  font-size: 28px;
  cursor: pointer;
}

#ov-bar {
  display: none;
}

4. Y por último debemos colocar la funcionalidad a través de este código jquery:

<script> 
jQuery(document).ready(function( $ ) {
  
  // Mostrar OV Bar a los 100ms  
  setTimeout(function() {
    $("#ov-bar").slideDown();
  }, 100);
  
  // Cerrar OV Bar 
  $('.cerrar-bar').click(function(){
    $('#ov-bar').slideUp(); 
	});
  
});
</script>

¡Esto es todo! Para que aprendas dónde colocar cada uno de los fragmentos de código no esperes más y dale play al video.