Cómo crear una barra de promociones o notificaciones en Divi

Mostrar una barra de promociones en Divi

En este artículo vamos a ver cómo podemos crear una barra de promociones o notificaciones en Divi, esta barra te puede servir para mostrar una información de relevancia a tus visitantes o también para mostrar algún tipo de oferta o promoción.

¿Qués es una barra de promociones o notificaciones?

Es posible que no hayas escuchado antes el término barra de promoción, lo cierto es que hay muchos nombres para referirse a ella, se le suele llamar barra de notificaciones, hello bar  o barra flotante de encabezado.

Los creadores de Divi, ElegantThemes, tienen una barra de notificaciones en su propia página web, si no te apetece visitar su web, aquí te dejo una captura de pantalla.

Crear una barra de promociones o notificaciones en Divi

Código para crear una barra de promociones o notificaciones en Divi

A continuación te muestro el código que debes usar para crear tu propia barra de notificaciones:

<div></div><script>function elegantPromo(a){function l(a,b){return”undefined”==typeof a?b:a}function m(a){var b=24*a*60*60*1e3,c=new Date;return c.setTime(c.getTime()+b),”; expires=”+c.toGMTString()+”; path=/”}function n(a,d,e){document.cookie=a+”=; expires=-1; path=/”,”false”===e?document.cookie=a+”=”+d+”; path=/”:”long”===e?document.cookie=a+”=”+d+c:document.cookie=a+”=”+d+b}function o(){jQuery(“head”).append(e),jQuery(“body”).prepend(d),jQuery(“.promo-slide-in-button”).on(“click”,function(){p()}),jQuery(“.promo-slide-in-close-promo”).on(“click”,function(){p(),jQuery(“.promo-slide-in”).addClass(“promo-slide-in-closed”).delay(1e3).queue(function(a){jQuery(this).hide(),a()})})}function p(){new_value=”closed”,n(i,new_value,”true”)}function r(){var a=document.cookie.split(“; “).reduce(function(a,b){var c=b.split(“=”);return a[c[0]]=c[1],a},{});return a}function s(a){var b=”; “+document.cookie,c=b.split(“; “+a+”=”);if(2==c.length)return c.pop().split(“;”).shift()}var a=a||{},b=m(a.cookieExpire)||””,c=m(a.longExpire)||””,d=l(a.promohtml,””),e=l(a.promocss,””),h=(l(a.promopage,””),document.getElementsByTagName(“html”)[0],r()),i=”Elegant_Themes_Promo_State”,k=(h[i],s(“Elegant_Themes_Promo_State”));if(!k){base_value=”open”,document.cookie=i+”=”+base_value+b;var k=s(“Elegant_Themes_Promo_State”)}”open”===k&&o()}var _elegantPromo=elegantPromo({cookieExpire:7,longExpire:365,promopage:”gallery”,promocss:'<style id=”et-promo-slide-in”>.promo-slide-in{position: fixed; z-index: 9;height:60px;color:#ffffff;-webkit-transition:all .5 ease;transition:all .5 ease;top:0;left:0;right:0;background:#7e3bd0;overflow:hidden;width:100%;-webkit-animation:promo-slide-in 2s ease;animation:promo-slide-in 2s ease}.promo-slide-in-closed{-webkit-animation:promo-slide-out 1s ease;animation:promo-slide-out 1s ease}@-webkit-keyframes promo-slide-in{0%{background:#d03bc4;height:0}50%{height:60px}100%{background:#7e3bd0;height:60px}}@keyframes promo-slide-in{0%{background:#d03bc4;height:0}50%{height:60px}100%{background:#7e3bd0;height:60px}}@-webkit-keyframes promo-slide-out{0%{background:#7e3bd0;height:60px}100%{background:#d03bc4;height:0}}@keyframes promo-slide-out{0%{background:#7e3bd0;height:60px}100%{background:#d03bc4;height:0}}@-webkit-keyframes promo-fade-in{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes promo-fade-in{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.promo-slide-in-close-promo{position:absolute;right:20px;top:16px;width:32px;height:32px;clear:both;cursor:pointer;-webkit-animation:promo-fade-in 1s ease;animation:promo-fade-in 1s ease}.promo-slide-in-close-promo:after,.promo-slide-in-close-promo:before{position:absolute;content:””;height:24px;width:3px;border-radius:4px;background-color:#fff;right:14px;}.promo-slide-in-close-promo:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.promo-slide-in-close-promo:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.promo-slide-in-button{background:#ffffff;border-radius:30px;text-transform:uppercase;color:#7e3bd0;text-decoration:none!important;padding:7px 20px;display:inline-block;font-size:14px;font-weight:700;float:left;margin:12px 0 0 20px;-webkit-transition:all .5s ease;transition:all .5s ease}.promo-slide-in-button:hover{color:#ffffff;background:#d03bc4;}.promo-slide-in-content{width:960px;margin:0 auto;text-align:center;-webkit-animation:promo-fade-in 1s ease;animation:promo-fade-in 1s ease;position:relative}.promo-slide-in-content-inner{margin:0 auto}.promo-slide-in-content p{margin:17px 0 0 127px;padding:0;display:inline-block;float:left;font-size:24px;color:#ffffff;}.fixed-nav-page-container{padding-top:130px !important;}.fixed-nav-main-header{top:91px !important;} .fixed-nav-top-header { top: 60px !important;}.nonfixed-nav-main-header{padding-top:60px;}@media (max-width: 980px) { .promo-slide-in-content p { font-size: 20px; }.promo-slide-in-button { padding: 5px 17px; font-size: 12px; } }@media (max-width: 775px) {.promo-slide-in-content { width: 100%;} .promo-slide-in-content p { margin: 0; font-size: 15px; width: 60%; line-height: 1.3em; position: absolute; left: 5%; padding-top: 3%; } .promo-slide-in-button { padding: 4px 12px; font-size: 10px; margin: 14px 0 0 0px; position: absolute; right: 60px; } }@media (min-width: 665px) and (max-width: 775px) { .promo-slide-in-content p { font-size: 18px; } .promo-slide-in-button { font-size: 12px; } }</style>’,promohtml:'<div class=”promo-slide-in”><div class=”promo-slide-in-content”><div class=”promo-slide-in-content-inner”><p>Jose González Bueno – Tutoriales de WordPress</p> <a class=”promo-slide-in-button”href=”https://www.josegonzalezbueno.com”>Leer Más</a></div></div><div class=”promo-slide-in-close-promo”></div></div>’});</script><script type=”text/javascript”>if (jQuery( “body” ).find( “div.promo-slide-in” ).length > 0){if(jQuery(“body”).hasClass(“et_non_fixed_nav”)){jQuery(“.et_non_fixed_nav #main-header”).addClass(“nonfixed-nav-main-header”);}if(jQuery(“body”).hasClass(“et_fixed_nav”)){jQuery(“.et_fixed_nav.et_show_nav #page-container”).addClass(“fixed-nav-page-container”);jQuery(“.et_fixed_nav #main-header”).addClass(“fixed-nav-main-header”);jQuery(“.et_fixed_nav #top-header”).addClass(“fixed-nav-top-header”);}}jQuery(“.promo-slide-in .promo-slide-in-close-promo”).click(function(){jQuery(this).parent().hide();if(jQuery(“body”).hasClass(“et_fixed_nav”)){jQuery(“.et_fixed_nav.et_show_nav #page-container”).removeClass(“fixed-nav-page-container”);jQuery(“.et_fixed_nav #main-header”).removeClass(“fixed-nav-main-header”);jQuery(“.et_fixed_nav #top-header”).removeClass(“fixed-nav-top-header”);}if(jQuery(“body”).hasClass(“et_non_fixed_nav”)){jQuery(“.et_non_fixed_nav #main-header”).removeClass(“nonfixed-nav-main-header”);}});</script>

Dónde colocar el código después de crear una barra de promociones o notificaciones en Divi

A continuación te mostraré dónde debes pegar el código anterior, sólo debes tener en cuenta si quieres aplicarlo a una sóla página individual, o a todo el sitio web creado con Divi. Ambas opciones son extremadamente simples.

Te recomiendo mostrarlo en todas las páginas de tu sitio web, ya que al tratarse de una notificación o una promoción, lo ideal es que sea visible en todas las secciones de tu web.

Agregar el código de la barra de notificaciones a todas las páginas de tu sitio web

En primer lugar, copia completamente el código. Asegúrate de copiarlo en su totalidad para que no hay ningún error.

Ahora, desde el Escritorio de tu WordPress vete a Divi, Opciones del tema, ahora vete a la ficha Integration, y vete al recuadro para: Agregar código al <body> (bueno para los códigos de seguimiento, tales como Google Analytics)

Dónde pegar el código de la barra de notificaiones

Pega el código en el cuadro y presiona el botón de Guardar. Asegúrese de que la opción Activar código del cuerpo esté encendido (está en la parte superior de esta ventana y debe estar en color azul), aunque está activado por defecto.

Nota:
Si quieres añadir esta barra de promociones o notificaciones en una sola página, debes crear una columna nueva dentro del Constructor Divi, crear dentro un módulo Código y pegar dentro este código. No importa si esta columna la creas al principio de tu estructura o al final, el código CSS del ejemplo hará que se coloque siempre en la parte superior.

 

 

¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

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

He leído y acepto la política de privacidad de este sitio. *

Centro de preferencias de privacidad

Necesarias

Las cookies necesarias ayudan a hacer una página web utilizable activando funciones básicas como la navegación en la página y el acceso a áreas seguras de la página web. La página web no puede funcionar adecuadamente sin estas cookies.

CookieConsent, PHPSESSID

Preferencias

Las cookies de preferencias permiten a la página web recordar información que cambia la forma en que la página se comporta o el aspecto que tiene, como su idioma preferido o la región en la que usted se encuentra.

Estadísticas

Las cookies estadísticas ayudan a los propietarios de páginas web a comprender cómo interactúan los visitantes con las páginas web reuniendo y proporcionando información de forma anónima.

_ga, gat, _gid, @@History/@@scroll|#

Márketing

Las cookies de marketing se utilizan para rastrear a los visitantes en las páginas web. La intención es mostrar anuncios relevantes y atractivos para el usuario individual, y por lo tanto, más valiosos para los editores y terceros anunciantes.

GPS, PREF, VISITOR_INFO1_LIVE, YSC, collect

No clasificadas

Las cookies no clasificadas son cookies para las que todavía estamos en proceso de clasificar, junto con los proveedores de cookies individuales.

gdpr[allowed_cookies], gdpr[consent_types]