Including a map in your site could make it simple to your site guests to look the place your corporation is positioned or to look the place an tournament may well be happening. Divi comes with two integrated choices to embed Google Maps in your web page design: the fullwidth map module and the common map module. With the fullwidth map module, you’ll be able to upload a large, crowd pleasing map that spans the width of your web page. You’ll customise the glance of the fullwidth map module the use of the fullwidth module settings, and it may be a really perfect design part so as to add in your structure. You’ll upload Divi’s common map module to any common segment. The design choices are never-ending as you’ll be able to mix module, row, and segment choices to create distinctive layouts to your site.

On this instructional, we can display you how one can create two other layouts the use of the fullwidth map module and the common map module.

Let’s get began!

Sneak Peek

Here’s a preview of what we can design.

Format 1 – Fullwidth Map Module

 

Format 2 – Common Map Module

 

What You Wish to Get Began

Ahead of we start, install and activate the Divi Theme and be sure to have the newest model of Divi to your site.

Now, you are prepared to begin!

The usage of the Divi Fullwidth Map vs Map Module

Create a New Web page with a Premade Format

Let’s get started by means of the use of a premade structure from the Divi library. For this design, we can use the Convention About Web page from the Conference layout pack.

Upload a brand new web page in your site and provides it a identify, then make a choice the method to Use Divi Builder.

We can use a premade structure from the Divi library for this case, so make a choice Browse Layouts.

Seek for and make a choice the Convention About Web page structure.

Make a selection Use This Format so as to add the structure in your web page.

Now we’re able to construct our design.

Format 1 – Fullwidth Map Module

For our first structure, we can upload the fullwidth map module to the footer, correct above the black footer segment with all the hyperlinks. As an alternative of including this part to the web page, we can use the theme builder in Divi’s settings to create a footer segment for this web page, then upload the map. Let’s get began.

First, right-click at the footer segment or click on the 3 dots within the segment toolbar, then replica the segment.

Then, delete the segment from this web page.

Design the Footer Format with the Theme Builder

From the WordPress dashboard, navigate to the theme builder segment inside Divi’s settings. Click on Upload a New Template.

For this design, I’m simplest enabling the template for the web page with our Convention About Web page template.

Subsequent, click on Upload Customized Footer and make a choice Construct Customized Footer.

Now that your customized footer settings are open within the theme builder, paste the footer segment you copied from the unique structure.

Upload a brand new fullwidth segment above the footer structure you pasted.

Then, upload the fullwidth map module.

Fullwidth Map Module Settings

Open the map module settings. In the event you haven’t already, upload your Google API Key in order that the map will also be displayed. (Learn more about the Google Maps API Key requirement here.)

We want to upload a Map Middle Cope with underneath the Map settings at the Content material tab in order that our map is located to show a selected location. We can middle our map on San Fransisco, California for this structure.

We additionally wish to upload a pin to the map. Beneath the Content material tab, click on Upload New Pin.

Input the pin cope with.

After all, delete the empty segment from the footer structure.

Fullwidth Map Module Ultimate Design

Here’s the general design with the fullwidth map module.

 

Format 2 – Common Map Module

For our 2nd structure, we can be the use of the common map module. Very similar to the final design, we can incorporate it into the footer design the use of the theme builder settings. For this design, we can upload a map to the “The place to Keep” segment.

Design the Footer Format with the Theme Builder

We’ll practice the similar steps because the fullwidth map module structure to create a customized footer design within the theme builder. In a brand new tab, open the WordPress Dashboard and navigate to the theme builder segment inside Divi’s settings. You’ll have the unique structure design open in any other tab.

Click on Upload a New Template.

As soon as once more, I’m simplest enabling the template for the web page with our Convention About Web page template.

Subsequent, click on Upload Customized Footer and make a choice Construct Customized Footer.

Now that your customized footer settings are open within the theme builder, return to the tab with the unique structure and duplicate the “The place to Keep” segment.

Paste the “The place to Keep” segment within the customized footer structure.

Return to the unique structure and duplicate the footer segment.

Then, paste the footer segment beneath the “The place to Keep” segment within the customized footer structure.

Delete the “The place to Keep” segment and the footer segment from the unique structure.

After all, delete the empty segment from the customized footer structure.

Fullwidth Map Module Settings

Upload a map module beneath the “The place to Keep” frame textual content.

Then, open the map module settings. As soon as once more, be sure you have added your Google API Key to the Map settings so the map will also be displayed.

Upload a Map Middle Cope with in order that the map is located to a location. For this case, we can set it to San Fransisco, California.

Subsequent, upload a pin to the map.

Input the pin cope with.

Common Map Module Ultimate Design

Here’s the general design with the common map module.

Ultimate Consequence

Now let’s take any other take a look at our ultimate designs in combination.

Format 1 – Fullwidth Map Module

 

Format 2 – Common Map Module

 

Ultimate Ideas

The fullwidth map module and the common map module are a very easy means so as to add an crowd pleasing design part in your web page, to not point out it supplies treasured knowledge in your site guests. You’ll simply customise those sections the use of the more than a few module, row, and segment settings, and they are able to be mixed with different design components at the web page to create dynamic layouts to your site. If you wish to be told extra about what the map modules can do, take a look at this instructional to add a fixed map toggle to a page template.

Do you employ a fullwidth menu module or an ordinary menu module to your site? Or each? We’d love to listen to from you within the feedback!

The publish Using the Divi Fullwidth Map vs Map Module seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more