801-244-4103 support@wpfixall.com

The way to Upload a Button to Your Divi Map Location’s Information Field

Everything Else

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

On this publish, we’re going to turn you find out how to upload a button to the site information field for one among your pinned addresses.

Design Preview

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

Let’s dive in!

What You Want to Get Began

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

  1. Set up Divi in your WordPress site.
  2. Upload a Web page, give it a name, and submit it.
  3. Allow the Visible Builder.
  4. Create your Google API Key.

Make a choice Construct From Scratch

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

Upload Your Google API Key

Ahead of we’ll be capable to totally use the map module and its functionalities, you’ll wish to upload your Google API Key for your Theme Choices.

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

Manner 1: The way to Upload a Button to Your Divi Map Location’s Information Field

Let’s get into the educational! Right here’s find out how to upload a button to the site information field.

Upload a Phase and Row and the Map Module

Navigate again to the web page you simply created and upload a piece and a one-column row for 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 throughout the map module.

Upload  a Pin

Click on “Upload New Pin” so as to add a pin for your map. This may increasingly deliver up that pin’s settings the place you’ll be able to sort in a name 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 here’s so as to add the category of et_pb_button that turns a normal 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 Cope with box and click on to find.

And there you may have it! A button seems within the pin’s location information field.

Manner 2: Styling the Button with a Distinctive CSS Elegance

There’s additionally differently to reach this and it’s so as to add a singular CSS magnificence 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 magnificence we added was once get-directions-btn. We will use this CSS magnificence to use distinctive types to the button. You’ll do that by way of pasting on-page CSS or by way of the use of your kid theme’s taste sheet. In nowadays’s instance, we’re going the paste the CSS in our Web page Settings.

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

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

Ultimate Ideas

Including a button for your pin’s location field provides a blank route button hyperlink that makes it simple on your guests to get instructions rapid. You’ll additionally taste the button the use of CSS added for your web page! With that, the styling choices are never-ending. Have amusing customizing!

The publish The way to Upload a Button to Your Divi Map Location’s Information Field gave the impression first on Sublime Issues Weblog.

WordPress Web Design

[ continue ]

Submit a Comment