Interactive Maps in Elementor Page Builder

Elementor Page builder is one of the most popular WordPress plugins of it’s type. It has tons of widgets available, but you might need something different for your project. If you need to create an interactive map of the world or of any country, but need something different than Google Maps, you might want to try theĀ Interactive World Maps plugin. These are some examples of maps created with this plugin.

All Countries Placeholder
All Countries
Map Markers Placeholder
Map Markers
US Map Placeholder
US Map

The plugin is fully compatible with the Elementor Page Builder. After you create your map you can easily add it to your page using the Shortcode widget. Below we’ll explain how you can do this with some very simple steps.

1) Install the Plugin

The plugin is for sale exclusively on Envato Market for only $29 with 6 months support included and all future updates. Once you have the plugin zip file, you can install through the Plugins > Add New > Upload interface in your administration. Once you have the plugin installed you’ll see the new ‘Interactive Maps’ menu entry in your administration menu.

2) Build your Map

The plugin comes with more than 300 maps, where you can colour regions or add markers. Both regions and markers can be interactive, displaying tooltips on hover and perform actions on click, like opening a new page or display information on a lightbox or next to the map. Follow the onscreen instructions and create the map to fit your needs. There’s a video tutorial available for beginners also.

Once you have your map saved, you’ll have a unique shortcode. That shortcode will be used to add the map to your page.

3) Add the Map to your Elementor page

The current version of the plugin will not add a new map widget to Elementor builder. However you can use the map shortcode on the existing Shortcode Widget. Just add the shortcode widget to the place on the page where you want the map to display and add the map shortcode there. The preview will not display the map immediately, but once you save your page and preview it, you should see your map.

And that’s it. You can create as many maps as you want and add them into different shortcode widgets. You can also add the map shortcode together with normal text in a text editor, but the Elementor preview will not display the map placeholder, just the shortcode itself, but once published, the map will also display.

If you have any question about Elementor or the Interactive World Maps plugin leave a comment and I’ll try my best to help.

Get Interactive World Maps plugin for only $29

One time fee. All future updates included and 6 months support.

How to change WooCommerce Products per Page with Divi

For a recent project I needed to change the default number of products displaying in the WooCommerce shop page. Usually this is set in the ‘Settings > Reading > Blog pages show at most’ option. So I was confused when I changed the value there and there was no change in the shop page. I searched within the WooCommerce settings, the customizer, searched for plugins and I found nothing, except this code snippet from the WooCommerce official documentation, but I found it strange that such small feature wouldn’t exist and we would need to add custom code.

Turns out I forgot to search in the most obvious place: the settings page for Divi itself. Here’s where you can find the option to change the number of products per page on the shop:

Divi Theme Options > General > Number of Products displayed on WooCommerce archive pages

Hopefully this will be useful to someone who will need to do the same and doesn’t find the option straight away.

World Map on Divi

There are several reasons why you might want to have a world map on your Divi powered website. The builder already includes a great module that allows you to add a map generated by Google Maps to your page. However you might be looking to add something more simple, more stylized, that fits your design.

I have developed a plugin called Interactive World Maps that is 100% compatible with Divi and allows you to add a map to your page using a different technology, also from Google, that generates interactive vector maps. You can colour countries, link them to specific pages, add information that will display on tooltips or on lightboxes and even add markers to specific locations. Here’s an example of how a map can look like:

 

All Countries Placeholder
All Countries

 

Although the plugin doesn’t add a new module to the Divi Builder, it works with shortcodes, so you can add it in any module that accepts text. Here’s how to add the map to your Divi page:

1) Install the Plugin

You canĀ get the plugin for only $21 with 6 months support included and all future updates. Once you have the plugin zip file, you can install it like through the Plugins > Add New > Upload interface in your administration. Once you have the plugin installed you’ll see the new ‘Interactive Maps’ menu entry in your administration menu.

2) Build Your Map

On the plugin’s website, you’ll find some instructions and even a video on how to build your first map. Depending on what you want to achieve, you’ll need to do different things. But basically you should read the instructions on screen so you know what you need to do.

3) Add Shortcode to your Page

Once you save your map, you’ll have access to a shortcode with this format:

show-map id=’X’

You can place this bit of text in any module from the Divi Builder that accepts text. Most likely you’ll end up adding it on the Text Module. Simply copy the shortcode and add it inside the text module, in the text editor. Once you save your page and preview it, you should see your map.

When the responsive mode is enabled for the maps, they will be as big as the container where they are placed. If you place them inside a full width row, then the map should take the full width also, creating a full screen map.

Feel free to ask any questions below on the comments.

If you have already purchased the plugin and you need support, please contact me through the support page on Envato Market.

Get this plugin for only $21 one time fee.

6 months support included and all future updates

WordPress Customization Services I can vouch for

I’ve been working with WordPress for 10 years now and although it’s a powerful tool that allows you to do almost anything, there’s always some small detail you can’t customize or a feature that you can’t find in a plugin. That’s why WordPress customization services are needed.  I did a lot of customization services and still do once in a while, but I had the chance to work with some developers that are good and reliable that I can recommend. Here’s a list of the top WordPress Customization services I recommend:

1) WPKraken Team

I worked a couple of times with WPKraken, a reliable and trustworthy team of in-house WordPress experts with years of experience that can do everything, from the smallest task to bigger projects. They charge a fair $50 flat hourly fee and have a platform that makes it easy to describe your needs and get a quote. I can vouch for this team and I strongly recommend them. Some of the things they can do for you:

  • WordPress Theme and Plugin Installation
  • CSS/Visual Fixes
  • Security Improvements
  • Website Audit
  • Website Migration
  • Plugin Customizations
  • Theme Customizations
  • Logo Design

2) Envato Studio

Envato Studio is site in the same network of Envato Market, where I exclusively sell my plugins. So it isn’t a surprise that I would also recommend this service. This platform allows hand-picked freelancers to provide their services, that range from design, to development. The platform displays the ratings of the different service providers so you know what other users think of them. Prices start at $50 and these are some of the services you can find:

  • Plugin and Theme Instalations
  • Plugin and Theme Customizations
  • Server Migration
  • WordPress Multisite/Network instalation
  • SEO Services
  • Full WordPress Website Setup