Together with a map to your web site is a great way to show your visitors where you or your enterprise is positioned. With Divi‘s built-in settings, you’ll have whole ingenious keep an eye on over the design of your map module and any surrounding design portions. Take your designs to each and every different level by means of applying scroll leads to your module. With a variety of different types of effects to make a choice from and settings to fine-tune the have an effect on until you succeed in exactly what you need, the usage of scroll effects will mean you can add crowd pleasing movement to your web site modules. In this submit, we can show you enlarge your map module on scroll with Divi’s scroll effects.

Let’s get started!

Sneak Peek

Right here’s a preview of what we can design.

Construction 1

Construction 2

What You Want to Get Started

Quicker than we start, set up and turn on the Divi Theme and be sure to have the latest style of Divi for your web site.

Now, you’re ready to start!

Simple how one can Enlarge Your Map Module on Scroll with Divi’s Scroll Effects

Construction 1

Create a New Internet web page with a Premade Construction

Let’s get began by means of the usage of a premade structure from the Divi library. For this design, we can use the Acai Bowl Landing Internet web page from the Acai Bowl Structure Pack.

Add a brand spanking new internet web page to your web site and offers it a reputation, then select the solution to Use Divi Builder.

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

Search for and select the Acai Bowl Landing Internet web page.

Select Use This Construction so that you could upload the structure to your internet web page.

Now we’re able to build our design.

Add the Map Module

We’re going to add the map module to the “Come Visit Us” phase on the landing internet web page. Get began by means of together with a brand spanking new row with a single column.

Add the map module to the new row.

Add your Google API Key to allow the map when you occur to haven’t already. Then, add a center deal with to the map. For this tutorial, the deal with might be San Fransisco, California.

Next, add a brand spanking new pin.

Set the map pin deal with. Once all over again, we can set this to San Fransisco, California for this tutorial.

Design Settings

Switch to the Design tab and open the sizing settings. Set the Top.

• Top: 300px

Next, open the border settings and add rounded corners to the map.

• Rounded Corners: 22px

Add the Scroll Effects

Now the design of our map module is complete so that we can add the scroll effects. Switch to the Advanced tab, then navigate to the Scroll Effects. Underneath Scroll Change into Effects, select the scaling up and down tab.

Permit Scaling Up and Down. This will likely from time to time allow our map module to increase in measurement as you scroll down the internet web page.

Let’s fine-tune the scaling settings. Adjust the start, mid, and completing scale. You’ll be capable to succeed in a additional subtle scale have an effect on by means of keeping the numbers rather close together. If there’s a big difference between the numbers, you’ll succeed in a additional drastic scale have an effect on.

• Starting Scale: 80%
• Mid Scale: 90%
• Completing Scale: 100%

In any case, set the motion have an effect on to motive in the course of the part.

• Motion Have an effect on Purpose: Middle of Part

Final Design

Right here’s the total design for our first structure.

Construction 2

Create a New Internet web page with a Premade Construction

For the second structure, we can use the contact internet web page structure from the an identical Acai Bowl Structure Pack. Let’s get started.

Add a brand spanking new internet web page to your web site and offers it a reputation, then select the solution to Use Divi Builder.

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

Search for and select the Acai Bowl Contact Internet web page.

Select Use This Construction so that you could upload the structure to your internet web page.

Now we’re able to build our design.

Keep an eye on Row Settings

First, switch the row containing the map module to the phase above, beneath the addresses.

Then, adjust the row structure to two columns.

Open the row settings, then open the column 1 settings.

Add a background color.

• Background: #442854

In any case, navigate to the design tab and open the border settings. Add rounded corners to the bottom left and correct corners.

• Rounded Corners – bottom left: 300px
• Rounded Corners – bottom correct: 300px

Keep an eye on Section Settings

Open the phase settings for the phase containing the map module. Navigate to the background settings, then add a background mask.

• Background Mask: Corner Blob
• Mask Color: #FFFFFF
• Mask Change into: Vertical and Invert

Add Image

First, add an image module to the column next to the map module.

Then, add the transparent image of the acai bowl to the module. You’ll have this for your media library classified as acai-bowl-34.png when you occur to used the Acai Bowl landing internet web page structure for Construction 1.

We want the image of the acai bowl to rotate as you scroll down the internet web page. Switch over to the Advanced tab, then open the Scroll Effects phase. Select the Rotating tab and allow rotating.

Next, set the rotation.

• Starting Rotation: 180
• Mid Rotation: 90
• Completing Rotation: 0

Map Design

Now switch over to the map module settings. Underneath the design tab, open the map settings. Permit the grayscale clear out.

• Use Greyscale Clear out: Certain
• Greyscale Clear out Amount (%): 100

Next, adjust the height underneath the Sizing tab.

• Top: 600px

Underneath the Spacing settings, add some margins.

• Margin-Top: 5px
• Margin-Bottom: 5px
• Margin–Left: 5px
• Margin-Correct: 5px

Then add rounded corners to the bottom left and correct corners.

• Rounded Corners – Bottom Left: 300px
• Rounded Corners – Bottom Correct: 300px

Add Scroll Effects

Now we can in spite of everything add the scroll effects to the map so that it enlarges on scroll. Open the Scroll Effects phase underneath the Advanced tab. Then, select the scaling up and down tab and allow scaling up and down.

In any case, customize the scales.

• Starting Scale: 90%
• Mid Scale: 95%
• Completing Scale: 100%

Final Design

Right here’s the total design for structure 2.

Final Finish end result

Now let’s take a look at both of our layouts in movement.

Construction 1

Construction 2

Final Concepts

By means of applying Divi’s scroll effects to the map module, you’ll succeed in a unique have an effect on as you scroll down the internet web page and help your map stand out to web site visitors. The ones effects can also be carried out to each and every different module for your web site as well, so there’s no limit to what you’ll succeed in with some creativity! If you are interested in more tutorials related to the map module, check out this newsletter for the way to upload a set map toggle in your Divi web page template. And if you want to have some additional design ideas the usage of scroll effects, check out this tutorial for the way to upload scroll-animated icons in your segment backgrounds. How have you ever ever carried out Divi’s scroll leads to your web site? Let us know throughout the comments!

The submit Easy methods to Extend Your Map Module on Scroll with Divi’s Scroll Results gave the impression first on Chic Subject matters Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more