Cerrar video

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

por | Oct 27, 2020 | Tutorial gratuito | 5 Comentarios

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.

Cómo crear una barra de promociones en divi con el theme builder (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.

¿Te ha gustado este tutorial? 🚀

¡Los Tutoriales Premium te van a encantar! Desde solo $10 USD al mes accede a más de 200 (¡y contando!) tutoriales únicos y exclusivos sobre Divi y WordPress. ¡Únete ahora y aumenta al 200% tus habilidades de diseño web con Divi!

Tutoriales Relacionados

5 Comentarios

    • Oscar Viedma

      Hola Carlos, he perdido mis demos y no tengo los json amigo 🙁 lo siento.

      Pero es fácil realizar este tutorial ¡Venga! 💪

      Responder
  1. Carlos Alberto

    Al insertar el menú desde el constructor de temas no me sirve el menu móvil, es decir no abre el menú hamburguesa

    Responder
  2. Maximiliano

    Hola Oscar,
    primeramente agradecerte por el contenido de alto valor que compartes!
    Luego, agregar que te consulte por lo comentarios en YT del video pero no me ha dejado responder a tu mensaje por lo que lo hago por aquí.
    Te comparto la url del proyecto en cuestión
    https://luchonerbutti.com/
    Muchas gracias
    Maxi Rindle

    Responder
    • Oscar Viedma

      Hola Maximiliano, disculpa por responder hasta ahora. ¿Cual fue tu consulta inicial en el comentario de youtube?

      Responder

Enviar un comentario

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

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$10 USD / mes

Pin It on Pinterest