Source: https://divilife.com/creating-slide-in-promo-bar-in-divi
Alternative: slide in banner
Example: https://www.hotel171rotterdam.nl/
If there is a lot of text on the button it overlaps other text (on mobile)
Note: it doesn’t work with the left sidebar menu
Add this to Divi Theme Options » Integrations » Body and change the indicated info:
- Replace * PROMOTEXT *
- Replace *BUTTONTEXT*
- Replace *BUTTONURL*
- Replace #AAAAAA with the banner background color
- Replace #BBBBBB with the button background color
- Replace #CCCCCC with the button background hover color
- Replace #FFFFFF with the banner close X color (default white)
- Replace #000000 with the banner text color
- Replace #111111 with the button text color
- Replace #222222 with the button text hover color
- Change red ‘closed’ value to ‘open’ if the banner must always popup, even after button click.
- The red CSS part hides the close button, so the promo bar is always there (otherwise the close button sets a cookie that keeps the bar closed for 7 days).
<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-close-promo {
display: none;
}
.promo-slide-in {
position: fixed;
z-index: 9;
height: 60px;
color: #000000;
-webkit-transition: all 0.5 ease;
transition: all 0.5 ease;
top: 0;
left: 0;
right: 0;
background: #aaaaaa;
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: #aaaaaa;
height: 0;
}
50% {
height: 60px;
}
100% {
background: #aaaaaa;
height: 60px;
}
}
@keyframes promo-slide-in {
0% {
background: #aaaaaa;
height: 0;
}
50% {
height: 60px;
}
100% {
background: #aaaaaa;
height: 60px;
}
}
@-webkit-keyframes promo-slide-out {
0% {
background: #aaaaaa;
height: 60px;
}
100% {
background: #aaaaaa;
height: 0;
}
}
@keyframes promo-slide-out {
0% {
background: #aaaaaa;
height: 60px;
}
100% {
background: #aaaaaa;
height: 0;
}
}
@-webkit-keyframes promo-fade-in {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes promo-fade-in {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.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: #ffffff;
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: #bbbbbb;
border-radius: 0;
color: #111111;
text-decoration: none !important;
padding: 7px 20px;
display: inline-block;
font-size: 16px;
float: left;
margin: 12px 0 0 20px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.promo-slide-in-button:hover {
color: #222222;
background: #cccccc;
}
.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: 16px;
color: #000000;
}
.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: 16px;
}
.promo-slide-in-button {
padding: 5px 17px;
font-size: 16px;
}
}
@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: 15px;
margin: 14px 0 0 0px;
position: absolute;
right: 60px;
}
}
@media (min-width: 665px) and (max-width: 775px) {
.promo-slide-in-content p {
font-size: 14px;
}
.promo-slide-in-button {
font-size: 14px;
}
}
</style>
',
promohtml:
'<div class="promo-slide-in">
<div class="promo-slide-in-content">
<div class="promo-slide-in-content-inner">
<p>*PROMOTEXT*</p>
<a class="promo-slide-in-button fancybox-iframe" href="*BUTTONURL*">*BUTTONTEXT*</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>
Code language: HTML, XML (xml)