Divi’s built-in sticky settings imply you’ll keep an element “sticky” or fixed on the show when you scroll down the internet web page. When blended with other non-sticky portions, you’ll have the ability to succeed in an attention-grabbing and tasty construction to ship your internet website online design to the next degree. In this instructional, we can show you learn how to add a sticky map module in your Divi internet web page. We’ll keep the map module sticky and add comparable information to scroll alongside the map.

Without further ado, let’s get started!

Sneak Peek

Right here’s a preview of what we can design

What You Need to Get Started

Previous to we begin, set up and turn on the Divi Theme and take note to have the newest type of Divi in your internet website online.

Now, you’re ready to begin out!

How you’ll Add a Sticky Map Module to Your Divi Internet web page

Create a New Internet web page with a Premade Structure

Let’s get began by the use of the usage of a premade construction from the Divi library. For this design, we can use the Craft School Landing Internet web page from the Craft College Format Pack.

Add a brand spanking new internet web page in your internet website online and offers it a establish, then make a choice the method to Use Divi Builder.

We will be able to use a premade construction from the Divi library for this example, so make a choice Browse Layouts.

Search for and make a choice the Craft School Landing Internet web page.

Make a choice Use This Structure so that you can upload the construction in your internet web page.

Now we’re in a position to build our design.

Enhancing the Structure for the Sticky Map Module

Sign Up CTA

Scroll to the “Studio Memberships” phase of the internet web page. Then, add a brand spanking new phase beneath.

Open the phase settings and add a background color.

• Background: #fcf8f3

Next, switch the “Title or Join Online” row to this new phase.

Open the row settings and navigate to the Complicated tab. Underneath the Position settings, industry the positioning from Absolute to Default.

• Position: Default

“Come Talk over with the Studio” Segment

Add a brand spanking new row with two columns beneath the Studio Memberships phase.

Then, switch that row above the Studio Memberships phase.

Heading Settings

Add a text module to the right column.

Add the text.

• H2: Come Talk over with The Studio!

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

• Heading 2 Font: Yusei Magic

Then, customize the font dimension and line most sensible. Use the built-in responsive alternatives so that you can upload different text sizes for tablet and mobile devices.

• Heading 2 Text Measurement Desktop: 50px
• Heading 2 Text Measurement Tablet: 30px
• Heading 2 Text Measurement Cell: 24px
• Heading 2 Line Top: 1.2 em

Text Settings

Add any other text module beneath the “Come Talk over with The Studio” text.

Insert the following text.

• H3: Take care of
• Paragraph: 1234 Divi St. #1000 San Francisco, CA 33945

Underneath the Design tab, control the text sorts.

• Text Font: Open Sans
• Text Measurement Desktop: 16px
• Text Measurement Tablet: 15px
• Text Measurement Cell: 13px

Then, control the heading sorts.

• Heading 3 Font: Open Sans
• Heading 3 Font Weight: Bold
• Heading 3 Font Style: Capitalized (TT)

Next, control the text dimension and letter spacing. Once another time, use the responsive settings to set different text sizes for more than a few show sizes.

• Heading 3 Text Measurement Desktop: 14px
• Heading 3 Text Measurement Tablet: 13px
• Heading 3 Text Measurement Cell: 12px
• Heading 3 Letter Spacing: 3px

Add any other text module beneath the handle module.

Then, add the following content material subject material to the body:

• Body: Lorem ipsum dolor sit down down amet, consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur arcu erat, accumsan identification imperdiet et, porttitor at sem. Vestibulum ac diam sit down down amet quam vehicula elementum sed sit down down amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit down down amet nisl tempus convallis quis ac lectus. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Donec sollicitudin molestie malesuada. Curabitur aliquet quam identification dui posuere blandit.

Switch over to the design tab and customize the font.

• Text Font: Open Sans

Then, customize the text dimension and line most sensible.

• Text Measurement Desktop: 15px
• Text Measurement Cell: 13px
• Text Line Top: 1.9em

Button Settings

Add a button module to the phase, beneath the text we added.

Set the button text to “be informed additional”.

• Button: Learn Further

Next, switch to the design tab and open the button settings. Allow custom designed sorts.

• Use Custom designed Varieties For Button: Positive
• Button Text Measurement: 12px
• Button Text Color: #FFFFFF

Customize the button background and border width.

• Button Background: #d5b38e
• Button Border Width: 0px

Keep an eye on the button border radius, letter spacing, and font.

• Button Border Radius: 0px
• Button Letter Spacing: 3px
• Button Font: Open Sans
• Button Font Weight: Bold
• Button Font Style: Capitalized (TT)

In the end, add padding to the button.

• Padding-Very best: 15px
• Padding-Bottom: 15px
• Padding-Left: 30px
• Padding-Right kind: 30px

Studio Memberships Segment

Now we’re going to control the Studio Memberships phase. First, industry the row construction to two an identical columns.

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

Scrolling Image Settings

Switch 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. Underneath the Sizing settings, use the responsive settings to set a unique width for mobile devices.

• Width-Cell: 35%

Underneath the Complicated tab, open the Position settings and add some horizontal offset. This allows the small image to carry over the side of the larger image, together with dimension and creating a additional unique construction.

• Horizontal Offset: -30px

In the end, open the scroll effects and alter the completing offset for the vertical motion.

• Completing Offset: -1

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.

Underneath the Spacing settings throughout the Design tab, remove the existing bottom padding.

Segment Background

Open the phase settings. Underneath the background settings, add a background image. Make a choice craft-school-24.png from your media library.

Add the Sticky Map Module

Now that our construction has been modified, we will be able to add the sticky map module. The map module may also be throughout the left column and stay in place as you scroll right through the content material subject material at the correct. Let’s get started.

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

Open the map settings and add a map center handle. For this instructional, we can center the map on San Fransisco, CA.

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

Map Design

Underneath the design tab, open the map settings. You’ll use the ones settings to totally customize one of the simplest ways your map turns out. For this instructional, we want the map to test the muted colors of this internet web page, so we can control the map saturation.

• Map Saturation: 56%

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

• Border Width: 20px
• Border Color: #fcf8f3

 

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

• Box Shadow: Underneath

Sticky Settings

Now let’s add the sticky settings so the map sticks in place when you scroll. Switch over to the Complicated tab and open the Scroll Effects Settings. Use responsive alternatives to modify the sticky position settings, for the reason that map may not be sticky on mobile devices.

• Sticky Position Desktop: Stick with Very best
• Sticky Position Tablet and Cell: Do Not Stick
• Sticky Very best Offset: 20px
• Bottom Sticky Restrict: Segment

Now go back to the Design tab and open the sizing settings. We would really like the map most sensible to increase when it’s throughout the sticky state. Use the sticky settings to set a unique most sensible.

• Top when Sticky: 600px

In the end, use the responsive settings to change the map dimension on tablet and mobile.

• Top Tablet and Cell: 350px

Final Consequence

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

Final Concepts

Divi’s sticky settings imply you’ll create dynamic internet website online layouts that draw your eye with the movement. With the entire customization alternatives available, you’ll have the ability to make any phase in your internet website online sticky and control the design exactly in your liking. By means of making the map module sticky in this design, we highlight the site information for the internet website online and add a singular design phase to the internet web page. For additonal tutorials on Divi’s sticky settings, check out this article on including a sticky touch shape for your web page. Do you employ sticky portions in your internet website online? We’d in point of fact like to hear from you throughout the comments!

The post How you can Upload a Sticky Map Module to Your Divi Web page gave the impression first on Chic Topics Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more