The Divi Map module integrates with Google Maps seamlessly and is a straightforward approach with the intention to upload an interactive map on your Divi website. This is great for showing your business’s location or rising an area knowledge of your favorite boutiques and corporations.

In this submit, we’re going to show you learn how to add a button to the website knowledge box for one amongst your pinned addresses.

Design Preview

First, let’s take a look at what we’re taking a look to perform. With some simple HTML, we’ll be able to accomplish together with a button throughout the location knowledge box for a pinned care for.

Let’s dive in!

What You Wish to Get Started

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

1. Set up Divi on your WordPress website.
2. Add a Internet web page, give it a reputation, and publish it.
3. Permit the Visual Builder.
4. Create your Google API Key.

Make a selection Assemble From Scratch

For those who click on at the “Use Divi Builder” button the internet web page will reload using Divi’s drag and drop builder interface. 3 alternatives will pop up – Assemble From Scratch, Choose A Premade Construction, and Clone Provide Internet web page. For at the present time’s purposes, make a selection “Assemble From Scratch”. This may occasionally increasingly more give us a blank slate where we will be able to assemble our designs.

Add Your Google API Key

Forward of we’ll be able to completely use the map module and its functionalities, you’ll want to add your Google API Key on your Theme Possible choices.

1. From your WordPress dashboard, move to Divi > Theme Possible choices and paste your Google API Key.
2. Click on on “Save Changes”.

Means 1: Find out how to Add a Button to Your Divi Map Location’s Data Box

Let’s get into the training! Proper right here’s learn how to add a button to the website knowledge box.

Add a Segment and Row and the Map Module

Navigate once more to the internet web page you merely created and add a work and a one-column row on your internet web page. Then load the module library and click on on Map. Once added, the module window will pop up with the entire settings and functionalities available all over the map module.

Add  a Pin

Click on on “Add New Pin” with the intention to upload a pin on your map. This may occasionally increasingly more ship up that pin’s settings where you’ll be capable to kind in a reputation and add an overview text. So that you can upload a button throughout the text house, add the following HTML:

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

The essential factor right here’s with the intention to upload the class of et_pb_button that turns a typical text link proper right into a button. Don’t omit to switch the # sign with the URL you wish to have this button to link to.

Then add your pin’s location throughout the Map tab throughout the Map Pin Deal with field and click on on to seek out.

And there you will have it! A button turns out throughout the pin’s location knowledge box.

Means 2: Styling the Button with a Unique CSS Class

There’s moreover another way to achieve this and it’s with the intention to upload a unique CSS class to the HTML to style the button. Right here’s the HTML you’ll need:

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

The unique CSS class we added used to be as soon as get-directions-btn. We can use this CSS class to make use of unique varieties to the button. You’ll do this by means of pasting on-page CSS or by means of using your child theme’s style sheet. In at the present time’s example, we’re going the paste the CSS in our Internet web page Settings.

To reach the button style underneath, replica and paste this CSS in on your Internet web page Settings:

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

Final Concepts

Together with a button on your pin’s location box supplies a clean path button link that makes it easy to your visitors to get directions fast. You’ll moreover style the button using CSS added on your internet web page! With that, the styling alternatives are endless. Have a laugh customizing!

The submit The way to Upload a Button to Your Divi Map Location’s Information Field seemed first on Sublime Issues Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more