The use of the Divi Fullwidth Map vs Map Module

by | May 9, 2023 | Etcetera | 0 comments

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

Divi Fullwidth Map VS Map Module Fullwidth Final Design

 

Divi Fullwidth Map VS Map Module Fullwidth Final Design Mobile

Layout 2 – Commonplace Map Module

Divi Fullwidth Map VS Map Module Regular Final Design

Divi Fullwidth Map VS Map Module Regular Final Design Mobile

 

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.

Divi Fullwidth Map VS Map Module Use Builder

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

See also  The way to Solution “Are We in a Recession?” to Your Advertising and marketing Group [2022 Expert Insights]

Divi Fullwidth Map VS Map Module Browse Layouts

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

Divi Fullwidth Map VS Map Module Search

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

Divi Fullwidth Map VS Map Module Use Layout

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.

Divi Fullwidth Map VS Map Module Copy Footer Section

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.

Divi Fullwidth Map VS Map Module Add 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.

Divi Fullwidth Map VS Map Module Template Settings

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

Divi Fullwidth Map VS Map Module Build Custom Footer

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

Divi Fullwidth Map VS Map Module Paste Section

Add a brand spanking new fullwidth segment above the footer construction 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. 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.)

Divi Fullwidth Map VS Map Module Google API Key

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.

See also  Get a Loose Hand-crafted Cleaning soap Structure Pack for Divi

Divi Fullwidth Map VS Map Module Map Center Address

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

Divi Fullwidth Map VS Map Module Add New Pin

Enter the pin take care of.

Divi Fullwidth Map VS Map Module Map Pin Address

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

Divi Fullwidth Map VS Map Module Delete Section

Fullwidth Map Module Final Design

That is the full 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 – 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.

Divi Fullwidth Map VS Map Module Add 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.

Divi Fullwidth Map VS Map Module Template Settings

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

Divi Fullwidth Map VS Map Module Build Custom 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.

Divi Fullwidth Map VS Map Module Copy Section

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

Divi Fullwidth Map VS Map Module Paste Section

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

Divi Fullwidth Map VS Map Module Copy Footer

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

Divi Fullwidth Map VS Map Module Regular Paste Footer

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.

See also  11 Issues You Must Do When Inheriting a WordPress Website online

Divi Fullwidth Map VS Map Module Regular Delete Section

Fullwidth Map Module Settings

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

Divi Fullwidth Map VS Map Module Regular Map Module

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.

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 take care of.

Divi Fullwidth Map VS Map Module Regular Map Pin Address

Commonplace Map Module Final Design

That is the full design with the average map module.

Divi Fullwidth Map VS Map Module Regular Final Design

Divi Fullwidth Map VS Map Module Regular Final Design Mobile

Final End result

Now let’s take some other take a 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 – Commonplace Map Module

Divi Fullwidth Map VS Map Module Regular Final Design

 

Divi Fullwidth Map VS Map Module Regular Final Design Mobile

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

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *