How to Add a Searchable Map Store Locator to Divi’s Handyman Layout Pack

If you have multiple stores, the addition of a store locator to your website can greatly enhance the user experience. I am sure you have already used them by visiting the website of a store to help you find the store closest to you. And I personally appreciate sites that have an interactive map to show places and information nearby. A simple google search for a store will give you an idea of ​​the usefulness of this feature.

For this tutorial on use cases, I will show you how to add a searchable map store locator to your site with the Divi's Handyman Layout Pack. The plugin I will use is called WP Store Locator. This free plugin has powerful customizable features, including automatically generated driving directions and custom map styles. After I show you how to add stores and use the shortcode to deploy your store locator on the page, I'll show you how to customize the store locator style with Divi to match the Handyman layout. I will even put in a custom Google map style to match the layout even more.

Let's go!

Sneak Peek

Here is a preview of what we are going to build today.

What You Need for this Use Case Tutorial

Divi Theme (Installed and Active)
The Handyman layout pack (not the entire pack, just the layout of the home page). This will be accessible from the Divi builder.
The WP Store Locator Plugin (installed and active)

Configuring the WP Store Locator Plugin

To set up the WP Store Locator plugin, go to Store Locator> Settings. You should take the time to look through these settings to make adjustments for your own site, but for the moment you can get things started with the following:

Google Maps API Keys: Create and paste a server and browser key to allow google maps to work with the plugin.

Under the Map section

Attempt of self-location of the user: check
Starting point: Houston, TX, USA (this will be the starting point if self-location fails, you can enter your own location if you know what it's all about)
Card Style: Here you can add a custom card style by sticking in the code (see below for more info)

Under the User Experience section

Search Width and Radius of the # 39, label: 115px
Store Locator Template: default (you can also choose the option to display the trays under the card)

Markers

Start Location Marker: dark orange
Store Location Marker: Dark Blue

Save Changes

Style Your Google Card

If you decide to create a custom style for your Google Map, there are a useful links to the settings page that will get you started under the Map Style section of the settings page.

I used Mapstylr to generate the following code that you can paste into the parameters page input box (use it if you want):

[{“featureType”:”all”,”elementType”:”geometry.fill”,”stylers”:[{“color”:”#dddddd”}]}, {"featureType ":" all "," elementType ":" labels.text "," stylers ": [{“color”:”#1476fb”}]}, {" featureType ":" all "," elementType ":" labels.text.stroke "," stylers ": [{“visibility”:”off”}]}, {"featureType": "route", "elementType": "geometry.stroke", "stylers": [{“color”:”#fc551f”}]}, {"featureType": "water", "elementType": "all", "stylers": [{“color”:”#1476fb”}]}, {"featureType": "road", "elementType": "geometry.fill", "stylers": [{“visibility”:”on”},{“color”:”#ffffff”}]}]

Add new stores

After updating the settings, you will need to start adding your stores. To add a new store, go to Store Locator> New Store and update the following:

Enter the title of your store
Add Description / Content – This content will only be displayed if you choose to display a "More Info" link in the store lists on the settings page. And it really works better if you also choose the Store Locator model that displays the list of stores under the map.

Store Details – Here you can add location information (necessary showing the store on the map), opening hours, and additional information (such as phone number and email).

Featured Image – Add a selected image to display a thumbnail on the store page

Store Category – If you wish, you can add a category to better organize your stores.

Publish your store

Once you've entered your new stores, you're ready to add the store search page to your page.

Store Creation Page

You do not need to create an entirely new page for this store locator. The plugin uses a shortcode to display the store locator anywhere on your site. But for this example, I'm going to show you how to create a new page for the store locator using the Handyman Home layout.

Using the Handyman Home Page on a New Page

Create a new page and deploy the Visual Builder. Then add the layout of the Handyman home page to the page by opening the settings menu, clicking on the library loading icon and selecting the layout under the layout tab. predefined in the popup box.

<img src = "https://www.elegantthemes.com/blog/wp-content/uploads/2018/05/add-new-layout.jpg" alt = "

Copy the style of the section testimonial

Then paste the style into the top section with the contents of the main header.

[19659011] Remove everything you do not need from the layout

In the upper section, delete the module in the first line containing the contents of the paragraph

<img src = "https: //www.elegantthemes.com/blog/wp-content/uploads/2018/05/delete-mock-module-1.jpg "alt ="]

Then delete the second line in this section containing the CTA [19659002]

Now, delete each section under the top section so that only this header section remains. 19659002]

Update Settings fo r Section

Now open the section settings and update the following:

Remove Background Color
Background Gradient Left Color: # 0072ff
Background Gradient Right Color: rgba (255,255,255,0.89)
Starting Position: 50%
Final position: 0%
Place the gradient over the background image: YES

Add a new background image (around 1920px by 1100px)
Size of the background image: adjustment
Background Image Position: Lower Center

On the Design tab, update the following:

Give your section a divisive background.
Divider Style: see screenshot
Horizontal repetition of the divider: 0.5x
Flip divider: horizontal

Custom Margin: 60px Low

Save Settings

Update Title

For text module that contains title of the page, use the Inline Editor to change the text to say "Find a handyman near you"

Create a new line and text module for the store store shortcode

Create a new column row in the section. 19659002] Custom padding (office): 0px high, 0px low, 0px left, 3% right
Custom padding (tablet): 0% right

The padding on the right creates a spacing for the right border design

Then add a right border corresponding to the left border pattern in the title above.

Select the correct border tab.
Width of the right border: 10px
Right border color: # fc551f

Save settings

Then create a text module and enter the following code in the content box:

[wpsl map_type=”roadmap” auto_locate=”true” start_marker=”dark-orange” store_marker=”dark-blue”]

<img src = "https://www.elegantthemes.com/blog/wp-content/uploads/2018/05/shortcode.jpg" alt = "19659002] You can also use the plugin shortcode generator from the backend if you wish.

Then give a background to the text module

Background Gradient Left Color: # fc551f
Background Gradient Right Color: #ffffff
Starting Position: 20%
End position: 0%

This gradient will be used as a custom design to give the search bar (generated by the plugin) an orange background.

Now we are updating the design parameters for the text module.

Text Text Size: 18px
Custom padding: 2% up, 2% down, 3% left, 3% right

Box Shadow: see screenshot
Box Shadow Vertical Position: 14px
Box Shadow Blur Strength: 40px
Box Shadow Spread Power: -13px

Save Settings.

Add custom CSS for search button

If you want to change the default style of the search button to design your layout, you can add custom CSS to page settings under the </ a> Advanced tab.

# wpsl-search-btn {background: # 393e4a; color: #fff; font size: 16px; font-weight: fat; padding: 0.6em 1.6em; }

If you want the CSS to apply to all pages of your site, you can add the code to the additional CSS section in the theme customizer

final

Let's take a look at the final result

Here's what the store locator will look like if you change the stencil to show the store locations under the map in the plugin settings.

This is what the page looks like on mobile phones.

If you click the link next to An announcement you will see see the instructions appear

And if you click on the icon of a store on the map, more than 39 info will appear.

Final Reflections

I was pleasantly surprised at the speed and ease with which I was able to get the store locator feature using Div i and the WP Store Locator plugin. The settings are quite simple, which makes customization easy and logical. I also appreciate additional features such as custom card styles, store directions and smart card markers that display and display more information about the store.

Divi seems to work well with this plugin and the Handyman Layout pack to give your store locator the design adjustments it needs.

In addition, this plugin will work for just about every website, not just those in the Handyman niche.

If you want to add premium modules to the plugin (like the search widget ), feel free to check out their website .

I look forward to hearing from you in the comments below.

Cheers

How to add a searchable map store locator to Divi's do-it-yourself Layout pack first appeared on Elegant Themes Blog .