EDITS.WS

Tag: Divi Fullwidth Map Module

  • 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.

  • How to Add Multiple Pins to Your Divi Map

    The Divi Map Module makes it easy to embed a Google Map to your Divi website. This is a great way to share your business location on a contact page, in a footer, or on an about page.

    In this post, we’re going to demonstrate how to add multiple location pins to your Divi map. This is a great feature if your business has multiple locations or you’re putting together a local guide to show off your favorite coffee shops, etc.

    Let’s dive in!

    What You Need to Get Started

    To get started, you will need to do the following:

    1. Install Divi on your WordPress website.
    2. Add a Page, give it a title, and publish it.
    3. Enable the Visual Builder.
    4. Create your Google API Key.

    Select Build From Scratch

    Once you click the “Use Divi Builder” button the page will reload using Divi’s drag and drop builder interface. Three options will pop up – Build From Scratch, Choose A Premade Layout, and Clone Existing Page. For today’s purposes, select “Build From Scratch”. This will give us a blank slate where we can build our designs.

    How to Add Multiple Pins to Your Divi Map

    Let’s get into the tutorial! Here’s how to add multiple location pins to your Divi Map.

    Add Your Google API Key

    Before we’ll be able to fully use the map module and its functionalities, you’ll need to add your Google API Key to your Theme Options.

    1. From your WordPress dashboard, go to Divi > Theme Options and paste your Google API Key.
    2. Click “Save Changes”.

    Add a Section and Row and the Map Module

    Navigate back to the page you just created and add a section and a one-column row to your page. Then load the module library and click Map. Once added, the module window will pop up with all the settings and functionalities available within the map module.

    Add a New Pin

    To add a new location pin, click “Add A New Pin”. This will bring up the settings for that new pin. In the Text tab, type in the title and a description text you want to be displayed here. In the Map tab, paste the address for the pin in the Map Pin Address input field and then click find.

    Choosing a Map Center Address

    Choosing a map center address determines how your map is oriented. This is helpful when you want to show multiple pins at once. Below, we have the map center address as San Diego, CA 92104, USA so that it shows all of our pins within that area.

    Divi multiple Google map pins

    Final Thoughts

    And there you have it! You can add as many pins to your map as you’d like. Adding pins to the map module is simple and easy and results in an interactive Google Map that is easy to use for your website visitors.

    The post How to Add Multiple Pins to Your Divi Map appeared first on Elegant Themes Blog.

  • How to Add a Button to Your Divi Map Location’s Info Box

    The Divi Map module integrates with Google Maps seamlessly and is an easy way to add an interactive map to your Divi website. This is great for showing your business’s location or creating a local guide of your favorite boutiques and businesses.

    In this post, we’re going to show you how to add a button to the location info box for one of your pinned addresses.

    Design Preview

    First, let’s take a look at what we’re trying to accomplish. With some simple HTML, we’ll be able to accomplish adding a button inside the location info box for a pinned address.

    Let’s dive in!

    What You Need to Get Started

    To get started, you will need to do the following:

    1. Install Divi on your WordPress website.
    2. Add a Page, give it a title, and publish it.
    3. Enable the Visual Builder.
    4. Create your Google API Key.

    Select Build From Scratch

    Once you click the “Use Divi Builder” button the page will reload using Divi’s drag and drop builder interface. Three options will pop up – Build From Scratch, Choose A Premade Layout, and Clone Existing Page. For today’s purposes, select “Build From Scratch”. This will give us a blank slate where we can build our designs.

    Add Your Google API Key

    Before we’ll be able to fully use the map module and its functionalities, you’ll need to add your Google API Key to your Theme Options.

    1. From your WordPress dashboard, go to Divi > Theme Options and paste your Google API Key.
    2. Click “Save Changes”.

    Method 1: How to Add a Button to Your Divi Map Location’s Info Box

    Let’s get into the tutorial! Here’s how to add a button to the location info box.

    Add a Section and Row and the Map Module

    Navigate back to the page you just created and add a section and a one-column row to your page. Then load the module library and click Map. Once added, the module window will pop up with all the settings and functionalities available within the map module.

    Add  a Pin

    Click “Add New Pin” to add a pin to your map. This will bring up that pin’s settings where you can type in a title and add a description text. To add a button in the text area, add the following HTML:

    <a class="et_pb_button" href="#">Get Directions</a>

    The key here is to add the class of et_pb_button that turns a regular text link into a button. Don’t forget to replace the # sign with the URL you want this button to link to.

    Then add your pin’s location in the Map tab in the Map Pin Address field and click find.

    And there you have it! A button appears in the pin’s location info box.

    Method 2: Styling the Button with a Unique CSS Class

    There’s also another way to achieve this and it’s to add a unique CSS class to the HTML to style the button. Here is the HTML you’ll need:

    <a class="get-directions-btn" href="#">Get Directions</a>

    The unique CSS class we added was get-directions-btn. We can use this CSS class to apply unique styles to the button. You can do this by pasting on-page CSS or by using your child theme’s style sheet. In today’s example, we’re going the paste the CSS in our Page Settings.

    To achieve the button style below, copy and paste this CSS in to your Page Settings:

    .get-directions-btn {
  background-color: #1d1d1d!important;
  color: #f9f9f9;
  border-radius: 100px!important; 
  padding: 5px;}

    Final Thoughts

    Adding a button to your pin’s location box offers a clean direction button link that makes it easy for your visitors to get directions fast. You can also style the button using CSS added to your page! With that, the styling options are endless. Have fun customizing!

    The post How to Add a Button to Your Divi Map Location’s Info Box appeared first on Elegant Themes Blog.