Including a map for your site is an effective way to turn your guests the place you or your small business is positioned. With Divi‘s integrated settings, you could have complete inventive keep watch over over the design of your map module and any surrounding design components. Take your designs to every other degree by way of making use of scroll results for your module. With a number of various kinds of results to make a choice from and settings to fine-tune the impact till you succeed in precisely what you wish to have, the usage of scroll results allow you to upload attention-grabbing motion for your site modules. On this put up, we will be able to display you the way to amplify your map module on scroll with Divi’s scroll results.
Let’s get began!
Sneak Peek
Here’s a preview of what we will be able to design.
Format 1
Format 2
What You Want to Get Began
Earlier than we commence, install and activate the Divi Theme and you should definitely have the most recent model of Divi for your site.
Now, you are prepared to start out!
The best way to Amplify Your Map Module on Scroll with Divi’s Scroll Results
Format 1
Create a New Web page with a Premade Format
Let’s get started by way of the usage of a premade format from the Divi library. For this design, we will be able to use the Acai Bowl Touchdown Web page from the Acai Bowl Layout Pack.
Upload a brand new web page for your site and provides it a identify, then make a selection the solution to Use Divi Builder.
We will be able to use a premade format from the Divi library for this case, so make a selection Browse Layouts.
Seek for and make a selection the Acai Bowl Touchdown Web page.
Choose Use This Format so as to add the format for your web page.
Now we’re able to construct our design.
Upload the Map Module
We’re going to upload the map module to the “Come Seek advice from Us” phase at the touchdown web page. Get started by way of including a brand new row with a unmarried column.
Upload the map module to the brand new row.
Upload your Google API Key to permit the map when you haven’t already. Then, upload a middle cope with to the map. For this instructional, the cope with will probably be San Fransisco, California.
Subsequent, upload a brand new pin.
Set the map pin cope with. As soon as once more, we will be able to set this to San Fransisco, California for this instructional.
Design Settings
Transfer to the Design tab and open the sizing settings. Set the Peak.
- Peak: 300px
Subsequent, open the border settings and upload rounded corners to the map.
- Rounded Corners: 22px
Upload the Scroll Results
Now the design of our map module is whole in order that we will be able to upload the scroll results. Transfer to the Complex tab, then navigate to the Scroll Results. Below Scroll Turn out to be Results, make a selection the scaling up and down tab.
Permit Scaling Up and Down. This may increasingly permit our map module to extend in measurement as you scroll down the web page.
Let’s fine-tune the scaling settings. Regulate the beginning, mid, and finishing scale. You’ll succeed in a extra delicate scale impact by way of retaining the numbers reasonably shut in combination. If there’s a large distinction between the numbers, you are going to succeed in a extra drastic scale impact.
- Beginning Scale: 80%
- Mid Scale: 90%
- Finishing Scale: 100%
After all, set the movement impact to cause in the course of the component.
- Movement Impact Cause: Heart of Component
Ultimate Design
Here’s the general design for our first format.
Format 2
Create a New Web page with a Premade Format
For the second one format, we will be able to use the touch web page format from the similar Acai Bowl Layout Pack. Let’s get began.
Upload a brand new web page for your site and provides it a identify, then make a selection the solution to Use Divi Builder.
We will be able to use a premade format from the Divi library for this case, so make a selection Browse Layouts.
Seek for and make a selection the Acai Bowl Touch Web page.
Choose Use This Format so as to add the format for your web page.
Now we’re able to construct our design.
Adjust Row Settings
First, transfer the row containing the map module to the phase above, beneath the addresses.
Then, alter the row format to 2 columns.
Open the row settings, then open the column 1 settings.
Upload a background colour.
- Background: #442854
After all, navigate to the design tab and open the border settings. Upload rounded corners to the ground left and proper corners.
- Rounded Corners – backside left: 300px
- Rounded Corners – backside proper: 300px
Adjust Phase Settings
Open the phase settings for the phase containing the map module. Navigate to the background settings, then upload a background masks.
- Background Masks: Nook Blob
- Masks Colour: #FFFFFF
- Masks Turn out to be: Vertical and Invert
Upload Symbol
First, upload a picture module to the column subsequent to the map module.
Then, upload the clear symbol of the acai bowl to the module. You will have this on your media library categorised as acai-bowl-34.png when you used the Acai Bowl touchdown web page format for Format 1.
We would like the picture of the acai bowl to rotate as you scroll down the web page. Transfer over to the Complex tab, then open the Scroll Results phase. Choose the Rotating tab and permit rotating.
Subsequent, set the rotation.
- Beginning Rotation: 180
- Mid Rotation: 90
- Finishing Rotation: 0
Map Design
Now transfer over to the map module settings. Below the design tab, open the map settings. Permit the grayscale clear out.
- Use Greyscale Filter out: Sure
- Greyscale Filter out Quantity (%): 100
Subsequent, alter the peak beneath the Sizing tab.
- Peak: 600px
Below the Spacing settings, upload some margins.
- Margin-Best: 5px
- Margin-Backside: 5px
- Margin–Left: 5px
- Margin-Proper: 5px
Then upload rounded corners to the ground left and proper corners.
- Rounded Corners – Backside Left: 300px
- Rounded Corners – Backside Proper: 300px
Upload Scroll Results
Now we will be able to in spite of everything upload the scroll results to the map in order that it enlarges on scroll. Open the Scroll Results phase beneath the Complex tab. Then, make a selection the scaling up and down tab and permit scaling up and down.
After all, customise the scales.
- Beginning Scale: 90%
- Mid Scale: 95%
- Finishing Scale: 100%
Ultimate Design
Here’s the general design for format 2.
Ultimate Consequence
Now let’s check out either one of our layouts in motion.
Format 1
Format 2
Ultimate Ideas
By means of making use of Divi’s scroll results to the map module, you’ll succeed in a novel impact as you scroll down the web page and assist your map stand out to site guests. Those results can also be carried out to another module for your site as smartly, so there is not any prohibit to what you’ll succeed in with some creativity! If you have an interest in additional tutorials associated with the map module, take a look at this text for how to add a fixed map toggle to your Divi page template. And if you wish to have some extra design concepts the usage of scroll results, take a look at this instructional for how to add scroll-animated icons to your section backgrounds. How have you ever carried out Divi’s scroll results for your site? Tell us within the feedback!
The put up How to Expand Your Map Module on Scroll with Divi’s Scroll Effects seemed first on Elegant Themes Blog.
0 Comments