Floating banners effectively grab user attention and present key or important messages without disrupting the overall user experience. When combined with a scrolling trigger, these banners appear dynamically as visitors navigate through the page, enhancing user engagement by offering timely information at the right moment.
This article will guide you through crafting a visually appealing and effective floating banner in Divi without the help of any additional third-party plugins. From customizing its appearance to triggering its display based on scrolling behavior, you can strategically time the appearance of floating banners during scrolling. At the same time, you can also effectively promote offers, announcements, or calls to action in a smooth way.
How to Create the Floating Banner in Divi based on Scrolling Behavior (without Plugin)
Step 1: Create or Edit a Custom Body Template
On your WordPress dashboard, navigate to Divi -> Theme Builder. On the Theme Builder page, create a new body template or edit an existing one by clicking the Add Global or Custom Body button or selecting the template you want to modify.
For this example, we will display the floating banner in a single post template, so we select our All Posts template to edit it.
Add a New Section
Once you enter the Custom Body template editor, create a new section for your page. To make the floating banner element look proportional and not too big on your page, we set the size of the section at 25% width.
Step 2: Add the Floating Banner Content
Add a Module
Next, we’re going to add the floating banner content. Click the “+” button inside the section to add a new module. Afterward, select any module you want to appear as floating banner content, such as Text, Button, Call to Action module, etc. For this example, we select the Call to Action module.
Customize the module
Once you add the module you want to use as a means to display your floating banner content, the next thing we’ll do is tweak and style up the module. You can customize the module to your preference, for this example (Call to Action module), we apply some changes, such as replacing the text title, and body, adding a button and link URL, changing the background module’s color, adding margin, adding border-radius, etc.
- Add the CSS class
Next, add a custom CSS class called “floating-banner-content” in the module’s advanced tab.
Once you finish designing the floating banner content, don’t forget to save all the changes.
Step 3: Add the Custom CSS and JavaScript Snippet
Next, we will add the custom CSS and JavaScript snippet into the Divi Theme Options.
Add the Custom CSS
Go to your Divi Theme Options and select Custom CSS (WordPress dashboard -> Divi -> Divi Theme Options -> General -> Custom CSS). Afterward, copy the CSS snippet below and paste it into the available field.
@media only screen and ( min-width: 768px ) { .floating-banner-content {
position: fixed;
top: 130px;
left: 80%;
transform: translateX(-50%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
}
@media only screen and ( min-width: 768px ) { .floating-banner-content.active {
opacity: 1;
visibility: visible;
}
}
Add the JavaScript Code
On the Divi Them Options page, navigate to the Integration tab. Next, paste the JavaScript snippet below into the Add code to the < head > of your blog field.
<script>
jQuery(document).ready(function($) {
var banner = $('.floating-banner-content');
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop >= 400) {
banner.addClass('active');
} else {
banner.removeClass('active');
}
});
});
</script>
Once the custom CSS and JavaScript snippets are added, apply the changes by clicking the Save Changes button.
To see the result, you can preview one of your posts or pages (depending on where you place the floating banner element).
What did the CSS and JavaScript code do?
CSS Code Breakdown
@media only screen and ( min-width: 768px ):- This media query specifically targets devices with a minimum screen width of 768 pixels (i.e., tablets and larger). It ensures the floating banner is tailored to devices that can comfortably display it.
.floating-banner-content:- This selector targets elements with the class “floating-banner-content,” which is applied to the module containing the banner’s content.
- Styles for the
.floating-banner-content:position: fixed;: It will remain in place even when the user scrolls the page.top: 130px;: Sets the banner’s top position to 130 pixels from the top of the viewport.left: 80%;: Positions the banner 80% of the viewport width from the left edge.transform: translateX(-50%);: Centers the banner horizontally by translating it 50% to the left.box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);: Adds a subtle shadow to the banner for depth.z-index: 9999;: Ensures the banner appears on top of other elements on the page.opacity: 0;: Initially hides the banner by setting its opacity to 0.visibility: hidden;: Hides the banner’s content until it’s made visible.transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;: Applies a smooth transition effect when the banner’s opacity and visibility change.
.floating-banner-content.active:- This selector targets elements with the class “
floating-banner-content” that also has the class “active.” This class is added to the banner when it should be visible.
- This selector targets elements with the class “
- Styles for the
.floating-banner-content.activeelement:opacity: 1;: Makes the banner visible by setting its opacity to 1.visibility: visible;: Displays the banner’s content.
JavaScript Code Summary
This JavaScript code effectively controls the visibility of the floating banner based on the user’s scrolling position.
The banner becomes visible when the user scrolls down past a certain threshold (400 pixels in this case).
When the user scrolls back up above the threshold, the banner disappears. This behavior provides a dynamic and engaging user experience.
The Bottom Line
In this article, we’ve discovered how to craft a dynamic and engaging floating banner in Divi without additional plugins. By following the step-by-step guide, you’ve learned how to create a visually appealing banner, customize its appearance, and control its visibility based on scrolling behavior.
The floating banner empowers you to deliver important messages, highlight key offers, or enhance your website’s overall user experience. With a little bit of creativity and customization, you can create a floating banner that seamlessly integrates into your website design and captivates your visitors.
