The Divi Map module integrates with Google Maps seamlessly and is a simple manner so as to add an interactive map on your Divi site. That is nice for appearing your enterprise’s location or growing an area information of your favourite boutiques and companies.

On this put up, we’re going to turn you upload a button to the site data field for one in all your pinned addresses.

Design Preview

First, let’s check out what we’re seeking to accomplish. With some easy HTML, we’ll be capable to accomplish including a button within the location data field for a pinned deal with.

Let’s dive in!

What You Want to Get Began

To get began, it is very important do the next:

1. Install Divi to your WordPress site.
2. Upload a Web page, give it a identify, and submit it.
3. Allow the Visible Builder.
4. Create your Google API Key.

Choose Construct From Scratch

When you click on the “Use Divi Builder” button the web page will reload the usage of Divi’s drag and drop builder interface. 3 choices will pop up – Construct From Scratch, Make a selection A Premade Format, and Clone Present Web page. For these days’s functions, choose “Construct From Scratch”. This may give us a clean slate the place we will construct our designs.

Upload Your Google API Key

Earlier than we’ll be capable to absolutely use the map module and its functionalities, you’ll want to upload your Google API Key on your Theme Choices.

1. Out of your WordPress dashboard, pass to Divi > Theme Choices and paste your Google API Key.
2. Click on “Save Adjustments”.

Means 1: How you can Upload a Button to Your Divi Map Location’s Data Field

Let’s get into the educational! Right here’s upload a button to the site data field.

Upload a Phase and Row and the Map Module

Navigate again to the web page you simply created and upload a bit and a one-column row on your web page. Then load the module library and click on Map. As soon as added, the module window will pop up with all of the settings and functionalities to be had inside the map module.

Upload  a Pin

Click on “Upload New Pin” so as to add a pin on your map. This may carry up that pin’s settings the place you’ll be able to kind in a identify and upload an outline textual content. So as to add a button within the textual content space, upload the next HTML:

<a category="et_pb_button" href="#">Get Instructions</a>

The important thing this is so as to add the category of et_pb_button that turns a standard textual content hyperlink right into a button. Don’t put out of your mind to interchange the # signal with the URL you need this button to hyperlink to.

Then upload your pin’s location within the Map tab within the Map Pin Deal with box and click on in finding.

And there you’ve got it! A button seems within the pin’s location data field.

Means 2: Styling the Button with a Distinctive CSS Magnificence

There’s additionally differently to succeed in this and it’s so as to add a singular CSS elegance to the HTML to taste the button. Here’s the HTML you’ll want:

<a category="get-directions-btn" href="#">Get Instructions</a>

The original CSS elegance we added used to be get-directions-btn. We will be able to use this CSS elegance to use distinctive types to the button. You’ll do that by way of pasting on-page CSS or by way of the usage of your kid theme’s taste sheet. In these days’s instance, we’re going the paste the CSS in our Web page Settings.

To succeed in the button taste beneath, replica and paste this CSS in on your Web page Settings:

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

Ultimate Ideas

Including a button on your pin’s location field gives a blank route button hyperlink that makes it simple to your guests to get instructions speedy. You’ll additionally taste the button the usage of CSS added on your web page! With that, the styling choices are unending. Have amusing customizing!

The put up How to Add a Button to Your Divi Map Location’s Info Box gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more