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

Last Updated on December 12, 2022 by 3 Comments

How to Add a Button to Your Divi Map Location’s Info Box
Blog / Divi Resources / 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 href="#google-map-link-here" class="et_pb_button">Get Directions</a>

The key here is to add the class of et_pb_button to the link’s HTML so that it becomes 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="#paste-link-here">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!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Augmented Reality Layout Pack that’ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post

3 Comments

  1. Yes, in Europe, we can’t use this way anymore, another way to do this? With another map system or plugin?

  2. Unfortunately the Google map does not conform to European data protection legislation. What can we use instead? And: are there any plans to have alternatives for google fonts?
    Thanks,
    Petra

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today