This is the first tutorial on a new series of map module customization tweaks. In this tutorial I am going to show you how you can float some Divi Modules over a Fullwidth Map.

View The Live Demo

Let’s Get Started

 

Creating the Modules

 

1. The first thing we are going to do is create a Fullwidth Section.

fullwidth map module 01

 

2. Next you will add a Fullwidth Map Module.

fullwidth map module 02

 

3. Open up the module and add a New Pin Address.

fullwidth map 3

 

4. Also add a Map Center Address and be sure to zoom out a bit. I also recommend dragging the map so the pin is towards the left of the screen because we are going to float some text modules on the right side of the screen. I always turn off the “Mouse Wheel Zoom” and “Draggable on Mobile” as they tend to annoy those who are just trying to scroll down the page.

fullwidth map 04

 

5. Now we are going to create a new Standard Section with 3 columns.

fullwidth map 05

fullwidth map 06

 

6. Open up the section settings and change the Custom Padding. Make sure both the Top and Bottom are set at Zero.

fullwidth map 11

 

7. Open up your Row Settings.

fullwidth map 07

 

8. Change the Custom Padding just like you did for the section. Make sure both the Top and Bottom are set at Zero.

fullwidth map 12

 

9. Go to the Custom CSS Tab and scroll down to Column 3 CSS Class and give it the following class: mp_column_3

fullwidth map 08

 

10. In the 3rd column you can add a few text modules. In my demo I made 3 Text Modules and 1 Social Follow Module.

fullwidth map 09

 

11. My text modules are for contact information. Here is an example of the contents in my first Text Module.

fullwidth map module

 

Once you have added content to the modules, update the page and move on to the next part.

 

 

Adding The Custom CSS

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)

Add this CSS

/*--------------------------------------------------*/
/*-----[GQ ADD TEXT MODULES OVER FULLWIDTH MAP]-----*/
/*--------------------------------------------------*/

@media only screen and (min-width : 981px) {
	.mp_column_3 {
    		margin-top: -390px;
    		background: #fff;
    		padding: 40px 20px;
    		box-shadow: 0px 0px 150px 20px rgba(109, 109, 109, 0.2);}}

@media only screen and (max-width : 980px) {
	.mp_column_3 {
    		background: #fff;
    		padding: 40px 20px;}}

 

And that’s it.

Use Almost Any Module

You can use any number of modules here. Another popular module for this spot is a Contact Form Module or a Call To Action Module.

Keep in mind that this CSS is bringing the entire column up over the map module using a negative “margin-top”. You will most likely have to adjust the “margin-top” to get the perfect position depending on the number (or type) of modules you are using.

I used Media Queries so that the text modules only float over the Map module on desktop screens. It flows back to a stack on tablets and cell phones.

If you used this on one of your projects, please share a link below so we can see how you used it.

Have fun!


Well, that’s all for now. I hope you find this article useful.


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest