Wpdaily

Daily WordPress News

Using the Divi Fullwidth Map vs Map Module

Adding a map to your website can make it easy for your website visitors to see where your business is located or to see where an event might be taking place. Divi comes with two built-in options to embed Google Maps to your page design: the fullwidth map module and the regular map module. With the fullwidth map module, you can add a big, eye-catching map that spans the width of your page. You can customize the look of the fullwidth map module using the fullwidth module settings, and it can be a great design element to add to your layout. You can add Divi’s regular map module to any regular section. The design options are endless as you can combine module, row, and section options to create unique layouts for your website.

In this tutorial, we will show you how to create two different layouts using the fullwidth map module and the regular map module.

Let’s get started!

Sneak Peek

Here is a preview of what we will design.

Layout 1 – Fullwidth Map Module

Divi Fullwidth Map VS Map Module Fullwidth Final Design

 

Divi Fullwidth Map VS Map Module Fullwidth Final Design Mobile

Layout 2 – Regular Map Module

Divi Fullwidth Map VS Map Module Regular Final Design

Divi Fullwidth Map VS Map Module Regular Final Design Mobile

 

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!

Using the Divi Fullwidth Map vs Map Module

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 Conference About Page from the Conference layout pack.

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

Divi Fullwidth Map VS Map Module Use Builder

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

Divi Fullwidth Map VS Map Module Browse Layouts

Search for and select the Conference About Page layout.

Divi Fullwidth Map VS Map Module Search

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

Divi Fullwidth Map VS Map Module Use Layout

Now we are ready to build our design.

Layout 1 – Fullwidth Map Module

For our first layout, we will add the fullwidth map module to the footer, right above the black footer section with all of the links. Instead of adding this element to the page, we will use the theme builder in Divi’s settings to create a footer section for this page, then add the map. Let’s get started.

First, right-click on the footer section or click the three dots in the section toolbar, then copy the section.

Divi Fullwidth Map VS Map Module Copy Footer Section

Then, delete the section from this page.

Design the Footer Layout with the Theme Builder

From the WordPress dashboard, navigate to the theme builder section within Divi’s settings. Click Add a New Template.

Divi Fullwidth Map VS Map Module Add New Template

For this design, I am only enabling the template for the page with our Conference About Page template.

Divi Fullwidth Map VS Map Module Template Settings

Next, click Add Custom Footer and select Build Custom Footer.

Divi Fullwidth Map VS Map Module Build Custom Footer

Now that your custom footer settings are open in the theme builder, paste the footer section you copied from the original layout.

Divi Fullwidth Map VS Map Module Paste Section

Add a new fullwidth section above the footer layout you pasted.

Divi Fullwidth Map VS Map Module Insert Fullwidth

Then, add the fullwidth map module.

Divi Fullwidth Map VS Map Module Fullwidth Menu Module

Fullwidth Map Module Settings

Open the map module settings. If you haven’t already, add your Google API Key so that the map can be displayed. (Learn more about the Google Maps API Key requirement here.)

Divi Fullwidth Map VS Map Module Google API Key

We need to add a Map Center Address under the Map settings on the Content tab so that our map is positioned to display a specific location. We will center our map on San Fransisco, California for this layout.

Divi Fullwidth Map VS Map Module Map Center Address

We also want to add a pin to the map. Under the Content tab, click Add New Pin.

Divi Fullwidth Map VS Map Module Add New Pin

Enter the pin address.

Divi Fullwidth Map VS Map Module Map Pin Address

Finally, delete the empty section from the footer layout.

Divi Fullwidth Map VS Map Module Delete Section

Fullwidth Map Module Final Design

Here is the final design with the fullwidth map module.

Divi Fullwidth Map VS Map Module Fullwidth Final Design

Divi Fullwidth Map VS Map Module Fullwidth Final Design Mobile

 

Layout 2 – Regular Map Module

For our second layout, we will be using the regular map module. Similar to the last design, we will incorporate it into the footer design using the theme builder settings. For this design, we will add a map to the “Where to Stay” section.

Design the Footer Layout with the Theme Builder

We’ll follow the same steps as the fullwidth map module layout to create a custom footer design in the theme builder. In a new tab, open the WordPress Dashboard and navigate to the theme builder section within Divi’s settings. You should have the original layout design open in another tab.

Click Add a New Template.

Divi Fullwidth Map VS Map Module Add New Template

Once again, I am only enabling the template for the page with our Conference About Page template.

Divi Fullwidth Map VS Map Module Template Settings

Next, click Add Custom Footer and select Build Custom Footer.

Divi Fullwidth Map VS Map Module Build Custom Footer

Now that your custom footer settings are open in the theme builder, go back to the tab with the original layout and copy the “Where to Stay” section.

Divi Fullwidth Map VS Map Module Copy Section

Paste the “Where to Stay” section in the custom footer layout.

Divi Fullwidth Map VS Map Module Paste Section

Go back to the original layout and copy the footer section.

Divi Fullwidth Map VS Map Module Copy Footer

Then, paste the footer section below the “Where to Stay” section in the custom footer layout.

Divi Fullwidth Map VS Map Module Regular Paste Footer

Delete the “Where to Stay” section and the footer section from the original layout.

Finally, delete the empty section from the custom footer layout.

Divi Fullwidth Map VS Map Module Regular Delete Section

Fullwidth Map Module Settings

Add a map module below the “Where to Stay” body text.

Divi Fullwidth Map VS Map Module Regular Map Module

Then, open the map module settings. Once again, ensure you have added your Google API Key to the Map settings so the map can be displayed.

Add a Map Center Address so that the map is positioned to a location. For this example, we will set it to San Fransisco, California.

Divi Fullwidth Map VS Map Module Regular API Map Address

Next, add a pin to the map.

Divi Fullwidth Map VS Map Module Regular Add Pin

Enter the pin address.

Divi Fullwidth Map VS Map Module Regular Map Pin Address

Regular Map Module Final Design

Here is the final design with the regular map module.

Divi Fullwidth Map VS Map Module Regular Final Design

Divi Fullwidth Map VS Map Module Regular Final Design Mobile

Final Result

Now let’s take another look at our final designs together.

Layout 1 – Fullwidth Map Module

Divi Fullwidth Map VS Map Module Fullwidth Final Design

 

Divi Fullwidth Map VS Map Module Fullwidth Final Design Mobile

Layout 2 – Regular Map Module

Divi Fullwidth Map VS Map Module Regular Final Design

 

Divi Fullwidth Map VS Map Module Regular Final Design Mobile

Final Thoughts

The fullwidth map module and the regular map module are an easy way to add an eye-catching design element to your page, not to mention it provides valuable information to your website visitors. You can easily customize these sections using the various module, row, and section settings, and they can be combined with other design elements on the page to create dynamic layouts for your website. If you want to learn more about what the map modules can do, check out this tutorial to add a fixed map toggle to a page template.

Do you use a fullwidth menu module or a regular menu module on your website? Or both? We’d love to hear from you in the comments!

The post Using the Divi Fullwidth Map vs Map Module appeared first on Elegant Themes Blog.

Source