Custom Map Module Extended

A whole new experience on Divi. Start building and impress your visitors with preload map designs and pin icons.!

• created: 04/07/2016
• latest update: 20/01/2017
• by: DiviWebDesign.com
• Version: 1.2.9
• email: hello@diviwebdesign.com

Thank you for purchasing our custom module. If you have any questions that are beyond the scope of this help file, please feel free to email or contact us via Facebook

Hi, and welcome to the Divi Custom Custom Map Module Extended Module User Guide. The User Guide covers all the information needed to use extended version of Map Module to build an amazing website, as well as some helpful tips and tricks that will make your experience working with the Custom Map Module Extended easier and more enjoyable. If you need any additional assistance while using our modules, you can always post your questions on our facebook page. Divi Web Design Facebook Page or drop us an email to hello@diviwebdesign.com. Our support team will be glad to help you out.

You can navigate through different sections of the User Guide by clicking on the links in the menu to the left of your screen.

Installing Divi Custom Modules

After downloading the Divi Custom Module Extended installation file from DiviWebDesign.com, extract it and in the extracted folder locate the dwd-custom-map-module-extended.zip file. You can then install the Divi Custom Module Extended Module using one of the two following installation methods:

1. WordPress upload - For most users, this is probably the simplest installation method. To install the Module using this method, please follow these steps:

   1. Login to your WordPress admin panel
   2. Navigate to Appearance > Plugins > Add New > Upload Plugin
   3. Click on Choose File and select custom-map-module-extended.zip
   4. Click on Install Now

2. FTP upload - If you would like to install the Custom Map Module Extended via FTP, please follow these steps:

   1. Extract the dwd-custom-map-module-extended.zip file you previously located. You should now see a folder named dwd-custom-map-module-extended
   2. Using an FTP client, login to the server where your WordPress website is hosted
   3. Using an FTP client, navigate to the /wp-content/plugins/ directory under your WordPress website's root directory
   4. Using an FTP client, upload the previously extracted dwd-custom-map-module-extended folder to the plugin directory on your remote server

3. Updating Files - If you would like to update the Custom Map Module Extended via FTP:

   1. Extract the new updated dwd-custom-map-module-extended.zip file you downloaded. You should now see a folder named dwd-custom-map-module-extended
   2. Using an FTP client, login to the server where your WordPress website is hosted
   3. Using an FTP client, navigate to the /wp-content/plugins/ directory under your WordPress website's root directory
   4. Using an FTP client, upload the previously extracted dwd-custom-map-module-extended folder to the plugin directory on your remote server

Activating Divi Custom Modules

To activate the Custom Map Module Extended Module, you have to navigate to Appearance > Plugins > Installed Plugins and click on activate as shown below.

After you have done this, your Divi Custom Module Extended modules will be ready for use.

Preload Map Styles

This module uses Snazzy Maps data. Snazzy Maps is a repository of different styles for Google Maps aimed towards web designers and developers.

• Map Options : - Choose a map design from the available dropdown list.

• Show InfoWindow on load: This toggle enables or disables pin information windows on page load.
• Bounce Animation on Marker Pin: This toggle enables or disables the bouncing animation on the marker pin.

• Use Custom Icon : - Toggle this input to "on" to use the custom pin icon for map.
• Pin Icon URL : Here you can upload your desired Pin Icon, or type in the URL to the Pin Icon you would like to display.
• Pin Icon Width and Height: These fields adjust the size of the pin icon in pixel units.
• Title and Content Settings: The following settings adjusts the title of the pin information window.
  • Font: This setting changes the font family and font emphasis of the text.
  • Font Size: This slider changes the font size of the text in pixel units.
  • Text Color: This option bring up a colorpicker menu to change the text color.
  • Letter Spacing: This slider adjusts the letter spacing of the text in pixel units.
  • Line Height: This slider adjusts the spacing above and below the text line.

• IMPORTANT: Setting a fullwidth map is NOT done by adding a "Fullwidth Section".


• Row Module Settings: With the "Map Extended" module loaded, proceed to "Row Module Settings".

• Make This Row Fullwidth: This option extends the selected row to the edges of the browser window.




• Use Custom Gutter Width: This option toggles the "Gutter Width" setting. To Enable a fullwidth map, set this to "Yes".
  • Gutter Width: "Gutter Width" affects the size of the margins of the map. The slider ranges from 1 to 4, with 1 meaning no margins and 4 meaning larger margins. Set this slider to "1" for a fullwidth map.
• Custom Padding: This sets the amount of padding surrounding the map inside of the row module. Set all fields to "0" for a fullwidth map.