jasonsyourhuckleberry
3/18/2020 - 2:15 PM

Announcement banner for Divi websites

Add this to the Divi integration tab to create a quick and easy banner with download button. Preconfigured to appear only on the homepage, but that can be changed...

<link rel="stylesheet" href="https://use.typekit.net/vrz0jkk.css">
<meta name="format-detection" content="telephone=no,email=no,url=no">
<script>
  jQuery( document ).on( 'ready', function() {
		if (jQuery(".home").length) {
			jQuery(document.body).prepend('<style>.at-banner { z-index: 999999; position: fixed; top: 0; right: 0; left: 0; background: #0055a5; width: 100%; padding: 10px; box-sizing: border-box; -webkit-transform: translateY(-150%); transform: translateY(-150%); color: #FFFFFF; font-family: "Open Sans", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-animation: at-banner-slide-in 0.8s ease forwards; animation: at-banner-slide-in 0.8s ease forwards; } .at-banner__content { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-pack: center; justify-content: center; width: 90%; margin: 0 auto; padding: 10px 40px; box-sizing: border-box; } .at-banner__title { font-size: 18px; } .at-banner__text { margin: 0 20px 0 0; } .at-banner__button { display: inline-block; background: #FFFFFF; height: 40px; border: 0; border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 0 20px; color: #0055a5; font-size: 12px; font-weight: 700; line-height: 40px; text-decoration: none; white-space: nowrap; } .at-banner__close { position: absolute; top: 50%; right: 20px; width: 20px; height: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; } .at-banner__close:before, .at-banner__close:after { content: ""; position: absolute; top: 50%; left: 50%; display: block; background: #FFFFFF; width: 100%; height: 3px; border-radius: 2px; -webkit-transform-origin: center; transform-origin: center; } .at-banner__close:before { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } .at-banner__close:after { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } @-webkit-keyframes at-banner-slide-in { 0% { -webkit-transform: translateY(-150%); transform: translateY(-150%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes at-banner-slide-in { 0% { -webkit-transform: translateY(-150%); transform: translateY(-150%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } }</style> <div class="at-banner"> <div class="at-banner__content"> <div class="at-banner__text">Click to download and read IR-G\'s response to the COVID-19 pandemic. </div> <a class="at-banner__button" href="/wp-content/uploads/2020/03/Problem-Solving...Today-and-in-the-Future-Letter.pdf" target="_blank">READ MORE</a> </div> <div class="at-banner__close"></div> </div><script>jQuery(".at-banner__close").on("click", function () { jQuery(this).parent().remove(); });<\/script>')
		}
	});
</script>