How to Add a Sticky Map Module to Your Divi Page

Divi’s built-in sticky settings allow you to keep an element “sticky” or fixed on the screen while you scroll down the page. When combined with other non-sticky elements, you can achieve an eye-catching and engaging layout to bring your website design to the next level. In this tutorial, we will show you how to add a sticky map module to your Divi page. We’ll keep the map module sticky and add relevant information to scroll alongside the map.

Without further ado, let’s get started!

Here is a preview of what we will design

What You Need to Get Started

Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.

Now, you are ready to start!

How to Add a Sticky Map Module to Your Divi Page

Create a New Page with a Premade Layout

Let’s start by using a premade layout from the Divi library. For this design, we will use the Craft School Landing Page from the Craft School Layout Pack.

Add a new page to your website and give it a title, then select the option to Use Divi Builder.

We will use a premade layout from the Divi library for this example, so select Browse Layouts.

Search for and select the Craft School Landing Page.

Select Use This Layout to add the layout to your page.

Now we are ready to build our design.

Modifying the Layout for the Sticky Map Module

Sign Up CTA

Scroll to the “Studio Memberships” section of the page. Then, add a new section below.

Open the section settings and add a background color.

Next, move the “Call or Join Online” row to this new section.

Open the row settings and navigate to the Advanced tab. Under the Position settings, change the position from Absolute to Default.

“Come Visit the Studio” Section

Add a new row with two columns below the Studio Memberships section.

Then, move that row above the Studio Memberships section.

Heading Settings

Add a text module to the right column.

Add the text.

Next, navigate to the Design tab and open the heading text settings. Customize the font as follows:

Then, customize the font size and line height. Use the built-in responsive options to add different text sizes for tablet and mobile devices.

Text Settings

Add another text module below the “Come Visit The Studio” text.

Insert the following text.

Under the Design tab, modify the text styles.

Then, modify the heading styles.

Next, modify the text size and letter spacing. Once again, use the responsive settings to set different text sizes for different screen sizes.

Add another text module below the address module.

Then, add the following content to the body:

Move over to the design tab and customize the font.

Then, customize the text size and line height.

Button Settings

Add a button module to the section, below the text we added.

Set the button text to “learn more”.

Next, move to the design tab and open the button settings. Enable custom styles.

Customize the button background and border width.

Modify the button border radius, letter spacing, and font.

Finally, add padding to the button.

Studio Memberships Section

Now we are going to modify the Studio Memberships section. First, change the row layout to two equal columns.

Then, move the large image to the right column, above the “Studio Memberships” text module.

Scrolling Image Settings

Move the small scrolling image of the pottery to the right column, above the large image we moved.

Open the module settings for the small image. Under the Sizing settings, use the responsive settings to set a different width for mobile devices.

Under the Advanced tab, open the Position settings and add some horizontal offset. This allows the small image to hang over the side of the larger image, adding dimension and creating a more unique layout.

Finally, open the scroll effects and adjust the ending offset for the vertical motion.

Studio Memberships Text

Open the Studio Memberships text module settings. Remove the background from the module.

Then, open the row settings and open the column 2 settings.

Under the Spacing settings in the Design tab, remove the existing bottom padding.

Section Background

Open the section settings. Under the background settings, add a background image. Select craft-school-24.png from your media library.

Add the Sticky Map Module

Now that our layout has been modified, we can add the sticky map module. The map module will be in the left column and stay in place as you scroll through the content on the right. Let’s get started.

First, add a map module to the left column of the “Come Visit The Studio” row.

Open the map settings and add a map center address. For this tutorial, we will center the map on San Fransisco, CA.

Then, add a pin to the map. We will also set this to San Fransisco, CA.

Map Design

Under the design tab, open the map settings. You can use these settings to completely customize the way your map appears. For this tutorial, we want the map to match the muted colors of this page, so we will modify the map saturation.

Next, open the border settings and customize the border as follows:

Open the Box Shadow settings and add a shadow to the map module.

Sticky Settings

Now let’s add the sticky settings so the map sticks in place while you scroll. Move over to the Advanced tab and open the Scroll Effects Settings. Use responsive options to modify the sticky position settings, as the map will not be sticky on mobile devices.

Now go back to the Design tab and open the sizing settings. We want the map height to increase when it is in the sticky state. Use the sticky settings to set a different height.

Finally, use the responsive settings to change the map size on tablet and mobile.

Final Result

Now let’s take a look at our sticky map module in action.

Final Thoughts

Divi’s sticky settings allow you to create dynamic website layouts that draw your eye with the movement. With all of the customization options available, you can make any element on your website sticky and modify the design exactly to your liking. By making the map module sticky in this design, we highlight the location information for the website and add a unique design element to the page. For more tutorials on Divi’s sticky settings, check out this article on adding a sticky contact form to your page. Do you use sticky elements on your website? We would love to hear from you in the comments!