Together with a map to your website may just make it easy to your website visitors to see where your business is situated or to see where an event may well be taking place. Divi comes with two built-in alternatives to embed Google Maps to your internet web page design: the fullwidth map module and the average map module. With the fullwidth map module, you’ll have the ability to add a big, attention-grabbing map that spans the width of your internet web page. You’ll customize the look of the fullwidth map module the usage of the fullwidth module settings, and it can be a great design element as a way to upload to your construction. You’ll add Divi’s not unusual map module to any not unusual segment. The design alternatives are never-ending as you’ll have the ability to combine module, row, and segment alternatives to create unique layouts to your website.

In this tutorial, we will show you learn how to create two different layouts the usage of the fullwidth map module and the average map module.

Let’s get started!

Sneak Peek

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

Layout 1 – Fullwidth Map Module

 

Layout 2 – Commonplace Map Module

 

What You Wish to Get Started

Forward of we begin, set up and turn on the Divi Theme and take into accout to have the newest style of Divi on your website.

Now, you’re in a position to begin out!

Using the Divi Fullwidth Map vs Map Module

Create a New Internet web page with a Premade Layout

Let’s get began by the use of the usage of a premade construction from the Divi library. For this design, we will use the Conference About Internet web page from the Convention structure pack.

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

We will be able to use a premade construction from the Divi library for this example, so select Browse Layouts.

Search for and select the Conference About Internet web page construction.

Make a choice Use This Layout as a way to upload the construction to your internet web page.

Now we’re in a position to build our design.

Layout 1 – Fullwidth Map Module

For our first construction, we will add the fullwidth map module to the footer, suitable above the black footer segment with the entire links. Instead of together with this element to the internet web page, we will use the theme builder in Divi’s settings to create a footer segment for this internet web page, then add the map. Let’s get started.

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

Then, delete the segment from this internet web page.

Design the Footer Layout with the Theme Builder

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

For this design, I’m most efficient enabling the template for the internet web page with our Conference About Internet web page template.

Next, click on on Add Custom designed Footer and select Assemble Custom designed Footer.

Now that your custom designed footer settings are open inside the theme builder, paste the footer segment you copied from the original construction.

Add a brand spanking new fullwidth segment above the footer construction you pasted.

Then, add the fullwidth map module.

Fullwidth Map Module Settings

Open the map module settings. For those who occur to haven’t already, add your Google API Key so that the map can also be displayed. (Be informed extra in regards to the Google Maps API Key requirement right here.)

We need to add a Map Center Take care of underneath the Map settings on the Content material subject matter tab so that our map is situated to turn a decided on location. We will be able to heart our map on San Fransisco, California for this construction.

We moreover need to add a pin to the map. Underneath the Content material subject matter tab, click on on Add New Pin.

Enter the pin take care of.

In the end, delete the empty segment from the footer construction.

Fullwidth Map Module Final Design

That is the full design with the fullwidth map module.

 

Layout 2 – Commonplace Map Module

For our second construction, we will be the usage of the average map module. Similar to the remainder design, we will incorporate it into the footer design the usage of the theme builder settings. For this design, we will add a map to the “Where to Stay” segment.

Design the Footer Layout with the Theme Builder

We’ll follow the identical steps since the fullwidth map module construction to create a custom designed footer design inside the theme builder. In a brand spanking new tab, open the WordPress Dashboard and navigate to the theme builder segment within Divi’s settings. You’ll have the original construction design open in some other tab.

Click on on Add a New Template.

Once another time, I’m most efficient enabling the template for the internet web page with our Conference About Internet web page template.

Next, click on on Add Custom designed Footer and select Assemble Custom designed Footer.

Now that your custom designed footer settings are open inside the theme builder, go back to the tab with the original construction and replica the “Where to Stay” segment.

Paste the “Where to Stay” segment inside the custom designed footer construction.

Go back to the original construction and replica the footer segment.

Then, paste the footer segment beneath the “Where to Stay” segment inside the custom designed footer construction.

Delete the “Where to Stay” segment and the footer segment from the original construction.

In the end, delete the empty segment from the custom designed footer construction.

Fullwidth Map Module Settings

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

Then, open the map module settings. Once another time, be sure you have added your Google API Key to the Map settings so the map can also be displayed.

Add a Map Center Take care of so that the map is situated to a location. For this example, we will set it to San Fransisco, California.

Next, add a pin to the map.

Enter the pin take care of.

Commonplace Map Module Final Design

That is the full design with the average map module.

Final End result

Now let’s take some other take a look at our final designs together.

Layout 1 – Fullwidth Map Module

 

Layout 2 – Commonplace Map Module

 

Final Concepts

The fullwidth map module and the average map module are a very simple method as a way to upload an attention-grabbing design element to your internet web page, not to indicate it provides precious knowledge to your website visitors. You’ll merely customize the ones sections the usage of the relatively a large number of module, row, and segment settings, and they can be combined with other design parts on the internet web page to create dynamic layouts to your website. If you want to be informed further about what the map modules can do, check out this tutorial to upload a set map toggle to a web page template.

Do you employ a fullwidth menu module or an atypical menu module on your website? Or every? We’d love to hear from you inside the comments!

The publish The use of the Divi Fullwidth Map vs Map Module appeared first on Sublime Subject matters Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more