<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mapper - Interactive map plugin for Elementor</title>
<meta name="description" content="">
<meta name="author" content="merkulove">
<meta name="copyright" content="merkulove">
<meta name="generator" content="Documenter v2.0 https://evp.to/documenter">
<meta name="date" content="2022-05-03T00:00:00+02:00">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/documenter_style.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<style>
html, body{background-color:#FFFFFF;color:#383838;}
h1,h2,h3,h4,h5,h6{color:#383838;}
section table{background-color:#FFFFFF;}
::-moz-selection{background:#444444;color:#DDDDDD;}
::selection{background:#444444;color:#DDDDDD;}
a.brand{background-image:url(assets/images/image_23.png);}
a, a:hover, a:active{color:#0000FF;}
hr{border-top:1px solid #EBEBEB;border-bottom:1px solid #FFFFFF;}
div.navbar-inner, .navbar .nav li ul{background:#DDDDDD;color:#222222;}
a.btn-navbar{background:#DDDDDD;color:#222222;}
.navbar .nav li a{color:#222222;text-shadow:1px 1px 0px #EEEEEE;}
.navbar .nav li a:hover, .navbar .nav li.active a{text-shadow:none;}
div.navbar-inner ul{}
.navbar .nav > li a{color:#444444;}
.navbar .nav > li a:hover, a.btn-navbar:hover{background:#444444;color:#DDDDDD;}
.navbar .nav .active > a, .navbar .nav .active > a:hover, a.btn-navbar:active{background-color:#444444;color:#DDDDDD;}
.navbar .nav li ul li a:hover{background:#444444;color:#DDDDDD;}
.navbar .nav li ul li a:active{background:#444444;color:#DDDDDD;}
.btn-primary {
background-image: -moz-linear-gradient(top, #0088CC, #0044CC);
background-image: -ms-linear-gradient(top, #0088CC, #0044CC);
background-image: -webkit-gradient(linear, 0 0, 0 0088CC%, from(#DDDDDD), to(#0044CC));
background-image: -webkit-linear-gradient(top, #0088CC, #0044CC);
background-image: -o-linear-gradient(top, #0088CC, #0044CC);
background-image: linear-gradient(top, #0088CC, #0044CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088CC', endColorstr='#0044CC', GradientType=0);
border-color: #0044CC #0044CC #bfbfbf;
color:#FFFFFF;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
background-color: #0044CC;
}
#documenter_copyright{display:block !important;visibility:visible !important;}
</style>
</head>
<body class="documenter-project-mapper" data-spy="scroll" id="top">
<!-- Documentation Navbar -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
<a class="brand" href="#">Mapper - Interactive map plugin for Elementor</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="#overview" title="Overview">Overview</a></li>
<li><a href="#installing" title="Installing">Installing</a></li>
<li><a href="#settings" title="Settings">Settings</a></li>
</ul>
</div>
</div>
</div>
</div> <!-- End of Navbar -->
<!-- Main Container Beginning -->
<div class="container" id="documenter_content">
<div id="documenter-cover">
<div class="masthead">
<h1>Mapper - Interactive map plugin for Elementor</h1>
<p></p>
<ul class="marketing-byline">
<li>created: 05/03/2022</li>
<li>latest update: 05/03/2022</li>
<li>by: merkulove</li>
<li><a href="https://myselection.io/interactive">myselection.io/interactive</a></li>
</ul>
<p class="download-info">
<a href="https://1.envato.market/cc-merkulove" class="btn btn-primary btn-large">WordPress plugins</a> <a href="https://docs.merkulov.design/category/mapper-elementor/" class="btn btn-large">Documentation</a>
</p>
</div> <!-- masthead -->
</div>
<section id="overview">
<div class="page-header"><h3>Overview</h3><hr class="notop"></div>
<!-- wp:more --><!--more--><!-- /wp:more --><!-- wp:paragraph -->
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The<a href="https://myselection.io/interactive-map/" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;"> Mapper</a> is a WordPress plugin for Elementor to add an informative colorful interactive map anywhere on your site page. Create unlimited maps for countries, continents or regions. Choose the map display mode that best suits your goals and wishes. With a minimum of effort and time, you can add the necessary data, configure tooltips to demonstrate the necessary information to your visitors in a creative and clear way.</p>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
This multi-purpose tool can be used to display various kinds of statistics, different regional information or show the placement of offices, companies, attractions, organizations, etc. The Mapper plugin is perfect for travel websites, personal travel blogs, chain stores, multinational companies, real estate, various infographics and so on.</p>
<figure class="wp-block-image size-large" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="Focus on different regions" src="assets/images/image_18.png" style="box-sizing: inherit; border-style: none; height: auto; max-width: 100%; vertical-align: bottom; border-radius: inherit;"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Focus on different regions</figcaption></figure>
<figure class="wp-block-image size-large" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="Different ways to highlight areas" src="assets/images/image_19.png" style="box-sizing: inherit; border-style: none; height: auto; max-width: 100%; vertical-align: bottom; border-radius: inherit;"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Different ways to highlight areas</figcaption></figure>
<figure class="wp-block-image size-large" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="Map style customization" src="assets/images/image_21.png" style="box-sizing: inherit; border-style: none; height: auto; max-width: 100%; vertical-align: bottom; border-radius: inherit;"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Map style customization</figcaption></figure>
<figure class="wp-block-image size-large" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="Crafted for Elementor Builder" src="assets/images/image_20.png" style="box-sizing: inherit; border-style: none; height: auto; max-width: 100%; vertical-align: bottom; border-radius: inherit;"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Crafted for Elementor Builder</figcaption></figure>
<figure class="wp-block-image size-large" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" src="assets/images/image_22.png" style="box-sizing: inherit; border-style: none; height: auto; max-width: 100%; vertical-align: bottom; border-radius: inherit;"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Suitable for all kinds of Layouts</figcaption></figure>
<figure class="wp-block-image size-large" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="Perfect for Popular Elementor Themes" src="assets/images/image_24.png" style="box-sizing: inherit; border-style: none; height: auto; max-width: 100%; vertical-align: bottom; border-radius: inherit;"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Perfect for Popular Elementor Themes</figcaption></figure>
<figure class="wp-block-image size-large" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="Completely Cross-Browser Support" src="assets/images/image_17.png" style="box-sizing: inherit; border-style: none; height: auto; max-width: 100%; vertical-align: bottom; border-radius: inherit;"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Completely Cross-Browser Support</figcaption></figure>
<h3 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Focus on different regions</h3>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
You can display different types of maps:</p>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
The whole world</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Specific continent(Africa, Europe, Americas, Asia, Oceania) or sub-continent(Northern Africa, Western Europe, Central Asia, etc).</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
A specific country</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
A certain country with its provinces/states(USA, Australia, Germany, Canada and many others)</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
The United States is divided by metropolitan areas.</li>
</ul>
<h3 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Map display modes</h3>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The Mapper offers different ways to highlight areas:</p>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Regions – </span>applies selected color for a certain region such as continent, country, state, etc.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Markers –</span> adds a marker in the form of a point, icon or image for specified regions. The marker can be set in different colors and sizes.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Text – </span>adds text to point to a specific region.</li>
</ul>
<h3 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Interactive feature</h3>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
To make the map interactive and more informative, you can enable the display of tooltips with additional information. A trigger for the tooltip display can be a <span style="box-sizing: inherit; font-weight: 600;">hover</span> or a <span style="box-sizing: inherit; font-weight: 600;">click</span> on a specific region.</p>
<h3 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Color the regions depending on the values</h3>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The function is useful for displaying some kind of statistics, comparing different regions for certain values. You can select a color axis and the regions will be colored according to the specified values. Displaying the legend will help you better understand the data range being used.</p>
<h3 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Style customization</h3>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The styles of the near almost map element be customized according to your wishes and needs. You can configure the height and width of the map; the background color of the map, tooltips and other items; the color of Inactive regions or individual active regions, markers, fonts; the size and border configuration of different elements.</p>
<h3 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Five prepared templates included</h3>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
We made sure that it was easy for you to get started with the Mapper plugin. With the plugin, you get 5 unique stylized and go-to-use templates. These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks.</p>
<h3 id="item-description__features-of-the-masker-widget-for-elementor" style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Features of the Mapper plugin for Elementor</h3>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Unlimited interactive maps on the page and site</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Supports different kinds of maps: continents, subcontinents, countries, states, regions</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Supports three display modes: regions, markers, text</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Two triggers of a tooltip: hover and action</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Includes the mode with a legend when region color depends on the value</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Overlay feature included</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Supports three marker types: default point, icon and image.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Сolor management of active and inactive regions</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Supports different languages</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Icon management</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Flexible style settings</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Responsiveness settings</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Perfect for Elementor 2.5 and higher</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Works well with all WordPress themes built on Elementor</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Totally SEO Friendly</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Included pot file for quick translation on any language</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Perfect for RTL direction</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Fast and smooth installing</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Tested and compatible up to WordPress 5+</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Lightweight and Fast</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
All major browsers supported Chrome, Firefox, Safari, Opera, and Edge</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Easy to use and customize with modern User Interface</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Installation Guide and detailed Users Manual</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Six months Included Support for CodeCanyon buyers</li>
</ul>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the <a href="https://docs.merkulov.design/category/mapper-elementor/" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;">Online Documentation</a>.</p>
<!-- /wp:paragraph --></section>
<section id="installing">
<div class="page-header"><h3>Installing</h3><hr class="notop"></div>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin <span style="box-sizing: inherit; font-weight: 600;">pluginname.zip</span> There are two ways to install it:</p>
<h2 style="box-sizing: inherit; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.625rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )</h2>
<h6 style="box-sizing: inherit; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
STEP 1</h6>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit <span style="box-sizing: inherit; font-weight: 600;">http://yoursitename/wp-admin</span></p>
<h6 style="box-sizing: inherit; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
STEP 2</h6>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Go to <span style="box-sizing: inherit; font-weight: 600;">Plugins</span> > <span style="box-sizing: inherit; font-weight: 600;">Add New</span></p>
<figure class="wp-block-image is-resized" style="box-sizing: inherit; display: table; margin: 1em 0px 1.5em; max-width: 100%; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="Add New Plugin to WordPress" class="wp-image-383 lazyloaded" data-="" height="228" src="assets/images/image_1.png" style="box-sizing: inherit; border-style: none; height: auto; max-width: 100%;" width="345"><figcaption style="box-sizing: inherit; display: table-caption; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 93, 102); font-size: 13px; caption-side: bottom; font-style: italic;">Add New Plugin to WordPress</figcaption></figure>
<h6 style="box-sizing: inherit; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
STEP 3</h6>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Click <span style="box-sizing: inherit; font-weight: 600;">Upload Plugin</span> Button</p>
<figure class="wp-block-image is-resized" style="box-sizing: inherit; display: table; margin: 1em 0px 1.5em; max-width: 100%; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="Upload New Plugin to WordPress" class="wp-image-384 lazyloaded" data-="" height="194" src="assets/images/image_2.png" style="box-sizing: inherit; border-style: none; height: auto; max-width: 100%;" width="381"><figcaption style="box-sizing: inherit; display: table-caption; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 93, 102); font-size: 13px; caption-side: bottom; font-style: italic;">Upload New Plugin to WordPress</figcaption></figure>
<h6 style="box-sizing: inherit; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
STEP 5</h6>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Choose archive with Plugin and press <span style="box-sizing: inherit; font-weight: 600;">Install Now</span> Button</p>
<h6 style="box-sizing: inherit; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
STEP 6</h6>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
After Installing go back to the Plugins page and click Activate below plugin title</p>
<figure class="wp-block-image" style="box-sizing: inherit; margin: 1em 0px 1.5em; max-width: 100%; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-385 lazyloaded" data-="" src="assets/images/image_3.png" style="box-sizing: inherit; border-style: none; height: auto; max-width: 100%;"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 93, 102); font-size: 13px; font-style: italic;">Activate Installed Plugin</figcaption></figure>
<h2 style="box-sizing: inherit; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.625rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Installation the plugin through FTP or build-in File manager</h2>
<h6 style="box-sizing: inherit; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
STEP 1</h6>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Use Login and Password to connect to your web-server via FTP or use your hosting file manager.</p>
<h6 style="box-sizing: inherit; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
STEP 2</h6>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Upload archive with plugin to<span style="box-sizing: inherit; font-weight: 600;"> /wp-content/plugins</span></p>
<h6 style="box-sizing: inherit; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
STEP 3</h6>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
On next step Unzip the archive with the plugin</p>
<h6 style="box-sizing: inherit; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
STEP 4</h6>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Installing <a aria-label="WordPress Plugin (opens in a new tab)" href="https://1.envato.market/cc-merkulove" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;" target="_blank">WordPress Plugin</a> is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.</p>
<figure class="wp-block-image" style="box-sizing: inherit; margin: 1em 0px 1.5em; max-width: 100%; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-385 ls-is-cached lazyloaded" data-="" src="assets/images/image_3.png" style="box-sizing: inherit; border-style: none; height: auto; max-width: 100%;"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 93, 102); font-size: 13px; font-style: italic;">Activate Installed Plugin</figcaption></figure>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and <a href="https://docs.merkulov.design/category/wordpress-plugins/" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;">WordPress Plugins</a>.</p>
</section>
<section id="settings">
<div class="page-header"><h3>Settings</h3><hr class="notop"></div>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The Interactive Map widget adds an informative colorful interactive map anywhere on your site page. Create unlimited maps for countries, continents or regions. Choose the map display mode that best suits your goals and wishes. With a minimum of effort and time, you can add the necessary data, configure tooltips to demonstrate the necessary information to your visitors in a creative and clear way.</p>
<p class="note" style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 20px 30px; color: rgba(0, 0, 0, 0.66); border-radius: 0.25rem; background: rgb(235, 248, 255); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
For further work, you need the <a href="https://elementor.com/?ref=3174" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;" target="_blank">Elementor</a> to be installed on your site. You can download it from wordpress.org</p>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Once you install and activate the plugin, go to <span style="box-sizing: inherit; font-weight: 600;">Elementor>Mapper for Elementor>Google Maps API Key</span> and enter your own API key. How to get the key read in the <a href="https://docs.merkulov.design/how-to-get-google-map-api-key/" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;" target="_blank">documentation</a>.</p>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:</p>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<a href="https://docs.merkulov.design/interactive-map/#content-tab" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;">Content</a></li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<a href="https://docs.merkulov.design/interactive-map/#Style-tab" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;">Style</a></li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<a href="https://docs.merkulov.design/interactive-map/#advanced-tab" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;">Advanced</a></li>
</ul>
<h2 id="content-tab" style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.625rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Content Tab</h2>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
In the Content section, you can manage basic settings of the Interactive Map widget such as display mode and type, tooltips content, region, resolution and a lot of other things.</p>
<h3 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Map settings</h3>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
REGION TO DISPLAY</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Leave this field blank to display a map of the whole world. To display a map of a continent, sub-continent or country, use the<a href="https://developers.google.com/chart/interactive/docs/gallery/geochart#continent-hierarchy-and-codes" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;" target="_blank"> appropriate code</a>.</p>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12034" height="356" loading="lazy" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" src="assets/images/image_8.png" srcset="assets/images/image_8.png 820w, https://docs.merkulov.design/wp-content/uploads/2022/04/Region_150-768x333.png 768w" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="820"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Europe map display example</figcaption></figure>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
RESOLUTION</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Select the map resolution from the list.</p>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<span style="box-sizing: inherit; font-weight: 600;">Countries</span> – displays a map divided by countries.</p>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12039" height="391" loading="lazy" src="assets/images/image_5.png" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="629"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">World map with borders of countries</figcaption></figure>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<span style="box-sizing: inherit; font-weight: 600;">Provinces –</span> displays provinces and regions of specific countries. Supported only for country regions and US state regions. Not supported for all countries, please test a country to see whether this option is supported.</p>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12053" height="388" loading="lazy" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" src="assets/images/image_7.png" srcset="assets/images/image_7.png 834w, https://docs.merkulov.design/wp-content/uploads/2022/04/Provinces_ua1-768x357.png 768w" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="834"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">An example of Ukraine regions</figcaption></figure>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<span style="box-sizing: inherit; font-weight: 600;">Metros –</span> supports for the US country region and US state regions only.</p>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12050" height="351" loading="lazy" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" src="assets/images/image_6.png" srcset="assets/images/image_6.png 780w, https://docs.merkulov.design/wp-content/uploads/2022/04/Metros_US-768x346.png 768w" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="780"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">An example of the United States metros map</figcaption></figure>
<h6 id="Display-mode" style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
DISPLAY MODE</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Three map display modes are available:</p>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Regions – </span>allows you to highlight specific continents, sub-continents, countries or regions with separate colors and add tooltips with custom content. When this option is enabled, the <span style="box-sizing: inherit; font-weight: 600;"><a href="https://docs.merkulov.design/interactive-map/#Regions" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;">Regions</a></span> additional section appears with advanced settings.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Markers – </span>allows you to set the required marker types for specific continents, sub-continents, countries or regions and add tooltips with custom content. When this option is enabled, the <span style="box-sizing: inherit; font-weight: 600;"><a href="https://docs.merkulov.design/interactive-map/#Markers" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;">Markers</a></span> additional section appears with advanced settings.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Text –</span> allows you to add the text for specific continents, sub-continents, countries or regions. When this option is enabled, the <a href="https://docs.merkulov.design/interactive-map/#Text" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;"><span style="box-sizing: inherit; font-weight: 600;">Text</span> </a>additional section appears with advanced settings.</li>
</ul>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
DISPLAY TYPE</h6>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Custom – </span>allows you to set custom settings with tooltips for each region separately. Advanced settings appear in the section below depending on the <a href="https://docs.merkulov.design/interactive-map/#Display-mode" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;">display mode</a>.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Change colors depending on values –</span> allows you to select a color axis and the regions will be colored according to the specified values. Displaying the legend will help you better understand the data range being used. Advanced settings appear in the section below depending on the <a href="https://docs.merkulov.design/interactive-map/#Display-mode" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;">display mode</a>.</li>
</ul>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
TOOLTIP TRIGGER</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The following types of triggers are available for displaying tooltips:</p>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Focus – </span>an option for displaying a tooltip when a region hover.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Selection – </span>an option for displaying a tooltip when a region is selected.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">None –</span> an option to disable the tooltip display.</li>
</ul>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
INACTIVE REGIONS COLOR</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Select a color for all inactive map regions using the color picker.</p>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
BACKGROUND COLOR</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Select a background color for the map using the color picker.</p>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
BORDERS COLOR</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Select the color of the regions borders on the map using the color picker.</p>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
OVERLAY</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The toggle to enable/disable the map overlay. When the option is enabled, an additional section appears with style settings.</p>
<h3 id="Regions" style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Regions</h3>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The section is available when <a href="https://docs.merkulov.design/interactive-map/#Display-mode" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;">Display mode</a> = <span style="box-sizing: inherit; font-weight: 600;">Regions</span>. It allows you to highlight specific continents, sub-continents, countries or regions with separate colors and add tooltips with custom content.</p>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
DISPLAY TYPE: <span style="box-sizing: inherit;">CUSTOM</span></h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
To add a new element, click “<span style="box-sizing: inherit; font-weight: 600;">Add Item</span>” and fill all the necessary fields for the region and tooltip.</p>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12748" height="447" loading="lazy" src="assets/images/image_12.png" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="253"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Add a new region in the Interactive Map widget</figcaption></figure>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Enable link – </span>the toggle to enable/disable the link for the region</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Active region color –</span> specify the color and opacity of the region using the color picker.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Name –</span> specify the name of the region.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Region code –</span> specify the region code using the <a href="https://developers.google.com/chart/interactive/docs/gallery/geochart#continent-hierarchy-and-codes" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;" target="_blank">Continent Hierarchy and Codes table</a>.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Tooltip content –</span> enter content to display in the tooltip.</li>
</ul>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
DISPLAY TYPE: CHANGE COLORS DEPENDING ON VALUES</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The settings allow you to select a color axis to color the regions according to the specified values. Displaying the legend will help you better understand the data range being used.</p>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<span style="box-sizing: inherit; font-weight: 600;">Enable legend –</span> the toggle to enable/disable the legend display on the map. Additional legend settings available: color, size, text bold, text italic.</p>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12769" height="224" loading="lazy" src="assets/images/image_16.png" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="570"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Legend settings</figcaption></figure>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Value title –</span> enter the title of the main value.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Additional value title –</span> enter the title of the additional value.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Regions color axis –</span> add the new colors for the axis by clicking “<span style="box-sizing: inherit; font-weight: 600;">Add Item</span>”</li>
</ul>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12777" height="294" loading="lazy" src="assets/images/image_15.png" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="257"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Add a new color axis</figcaption></figure>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<span style="box-sizing: inherit; font-weight: 600;">Regions values </span>– add the new regions with numeric values by clicking “<span style="box-sizing: inherit; font-weight: 600;">Add Item</span>”. The following settings are available when adding the region: <span style="box-sizing: inherit; font-weight: 600;">Enable link, Region name, Value, Additional value</span>.</p>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12782" height="245" loading="lazy" src="assets/images/image_11.png" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="252"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Add region value in the Interactive Map widget</figcaption></figure>
<h3 id="Markers" style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Markers</h3>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The section is available when <a href="https://docs.merkulov.design/interactive-map/#Display-mode" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;">Display mode</a> = <span style="box-sizing: inherit; font-weight: 600;">Markers</span>. It allows you to set the required marker types for specific continents, sub-continents, countries or regions and add tooltips with custom content.</p>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
DISPLAY TYPE: <span style="box-sizing: inherit;">CUSTOM</span></h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
To add a new element, click “<span style="box-sizing: inherit; font-weight: 600;">Add Item</span>” and fill all the necessary fields for the marker and tooltip.</p>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12787" height="465" loading="lazy" src="assets/images/image_9.png" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="231"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Add a new marker in the Interactive Map widget</figcaption></figure>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Enable link – </span>the toggle to enable/disable the link for the marker.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Icon type –</span> select the icon you want to display as a marker: <span style="box-sizing: inherit; font-weight: 600;">Default</span>, <span style="box-sizing: inherit; font-weight: 600;">Icon</span>(from the icons library),<span style="box-sizing: inherit; font-weight: 600;"> Image</span>.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Marker size –</span> specify the size of the marker using the slider.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Latitude –</span> specify the latitude of marker location coordinates.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
Longtitude – specify the longtitude of marker location coordinates.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Title –</span> specify the title of the marker.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Tooltip content –</span> enter content to display in the tooltip.</li>
</ul>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
DISPLAY TYPE: CHANGE COLORS DEPENDING ON VALUES</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The settings allow you to select a color axis to color the markers according to the specified values. Displaying the legend will help you better understand the data range being used.</p>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<span style="box-sizing: inherit; font-weight: 600;">Enable legend –</span> the toggle to enable/disable the legend display on the map. Additional legend settings available: color, size, text bold, text italic.</p>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12769" height="224" loading="lazy" src="assets/images/image_16.png" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="570"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Legend settings</figcaption></figure>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Value title –</span> enter the title of the main value.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Additional value title –</span> enter the title of the additional value.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Marker color axis –</span> add the new colors for the axis by clicking “<span style="box-sizing: inherit; font-weight: 600;">Add Item</span>”</li>
</ul>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12777" height="294" loading="lazy" src="assets/images/image_15.png" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="257"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Add a new color axis</figcaption></figure>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<span style="box-sizing: inherit; font-weight: 600;">Marker values </span>– add the new marker with numeric value by clicking “<span style="box-sizing: inherit; font-weight: 600;">Add Item</span>”. The following settings are available when adding the region: <span style="box-sizing: inherit; font-weight: 600;">Enable link, Region full name, Value, Additional value</span>.</p>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12798" height="177" loading="lazy" src="assets/images/image_10.png" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="240"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Add a marker value</figcaption></figure>
<h3 id="Text" style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Text</h3>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The section is available when <a href="https://docs.merkulov.design/interactive-map/#Display-mode" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;">Display mode</a> = <span style="box-sizing: inherit; font-weight: 600;">Text</span>. It allows you to add the text for specific continents, sub-continents, countries or regions.</p>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
DISPLAY TYPE: <span style="box-sizing: inherit;">CUSTOM</span></h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
To add a new element, click “<span style="box-sizing: inherit; font-weight: 600;">Add Item</span>” and fill all the necessary fields for the text.</p>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12804" height="121" loading="lazy" src="assets/images/image_13.png" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="235"></figure>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;"><span style="box-sizing: inherit;">Active region text color –</span> </span>specify the color and opacity of the text for active region using the color picker.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Region full name<span style="box-sizing: inherit;"> –</span> </span>specify the name of the region.</li>
</ul>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
DISPLAY TYPE: CHANGE COLORS DEPENDING ON VALUES</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The settings allow you to select a color axis to color the text according to the specified values. Displaying the legend will help you better understand the data range being used.</p>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<span style="box-sizing: inherit; font-weight: 600;">Enable legend –</span> the toggle to enable/disable the legend display on the map. Additional legend settings available: color, size, text bold, text italic.</p>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12769" height="224" loading="lazy" src="assets/images/image_16.png" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="570"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Legend settings</figcaption></figure>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Region text color axis –</span> add the new colors for the axis by clicking “<span style="box-sizing: inherit; font-weight: 600;">Add Item</span>”</li>
</ul>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12777" height="294" loading="lazy" src="assets/images/image_15.png" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="257"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Add a new color axis</figcaption></figure>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<span style="box-sizing: inherit; font-weight: 600;">Region text values </span>– add the new region name with numeric value by clicking “<span style="box-sizing: inherit; font-weight: 600;">Add Item</span>”. The following settings are available when adding the region:<span style="box-sizing: inherit; font-weight: 600;"> Region name, Value.</span></p>
<figure class="wp-block-image size-full" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="" class="wp-image-12811" height="120" loading="lazy" src="assets/images/image_14.png" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="251"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">Add a new region name</figcaption></figure>
<h2 id="Style-tab" style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.625rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Style tab</h2>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
On the Interactive Map widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.</p>
<h3 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Map</h3>
<ul id="block-46dbd779-d688-4cbb-a00f-4b4fce5e2324" style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Height –</span> specify the height of the map box using the slider.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Width –</span> specify the width of the map box using the slider.</li>
</ul>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
NORMAL/HOVER</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The map style settings for different states.</p>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">CSS Filters –</span> the option allows you to add various CSS filters for the map box as Blur, Brightness, Contrast, Saturation, Hue.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Border Type</span> – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Border Radius –</span> specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Box Shadow</span> – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.</li>
</ul>
<h3 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Tooltip</h3>
<ul id="block-a9df5fda-ca08-4175-b488-b7c30df0ec78" style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Margin</span> – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Padding</span> – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Height –</span> specify the height of the tooltip box for different devices using the slider.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Width –</span> specify the width of the tooltip box for different devices using the slider.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Tooltip font –</span> select the text font for the tooltip from the list.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Tooltip font size –</span> specify the font size in the tooltip using the slider.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Tooltip text bold – </span>the toggle to enable/disable the text bold for the tooltip.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Tooltip text italic – </span>the toggle to enable/disable the text italic for the tooltip.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
</li>
</ul>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
NORMAL/HOVER</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The style settings for different states.</p>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Background Type</span> – the setting changes the background of the current block. You can choose a color, gradient, or background image.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Border Type</span> – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Border Radius –</span> specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;"><span style="box-sizing: inherit;">Box Shadow</span> – </span>the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.</li>
</ul>
<h3 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Tooltip title</h3>
<ul id="block-a9df5fda-ca08-4175-b488-b7c30df0ec78" style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Margin</span> – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Padding</span> – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;"><span style="box-sizing: inherit;">Title align</span> – </span>specify the alignment of the text: Left, Center, Right.</li>
</ul>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
NORMAL/HOVER</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The style settings for different states.</p>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Color –</span> specify the text color and opacity using the color picker.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Background Type</span> – the setting changes the background of the current block. You can choose a color, gradient, or background image.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Border Type</span> – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Border Radius –</span> specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Box Shadow</span> – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.</li>
</ul>
<h3 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.375rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Value/Additional value</h3>
<ul id="block-a9df5fda-ca08-4175-b488-b7c30df0ec78" style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Margin</span> – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Padding</span> – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;"><span style="box-sizing: inherit;">Description align</span> – </span>specify the alignment of the text: Left, Center, Right.</li>
</ul>
<h6 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; margin: 0px 0px 0.75em; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased; display: inline-block; background: rgba(0, 0, 0, 0.72); border-radius: 4px; height: 2em; text-transform: uppercase; line-height: 2em !important; padding: 1px 10px 0px 9px !important; color: rgb(255, 255, 255) !important; font-size: 0.69em !important;">
NORMAL/HOVER</h6>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The style settings for different states.</p>
<ul style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5rem; padding-right: 0px; padding-left: 2em; list-style-position: initial; list-style-image: initial; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Color –</span> specify the text color and opacity using the color picker.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Background Type</span> – the setting changes the background of the current block. You can choose a color, gradient, or background image.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Border Type</span> – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Border Radius –</span> specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.</li>
<li style="box-sizing: inherit; margin: 0.5em 0px;">
<span style="box-sizing: inherit; font-weight: 600;">Box Shadow</span> – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.</li>
</ul>
<h2 id="advanced-tab" style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.625rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Advanced Tab</h2>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about <a href="https://docs.elementor.com/article/571-advanced-tab" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: rgb(51, 119, 255); transition: color 80ms ease-in 0s, box-shadow 130ms ease-in-out 0s; box-shadow: none; outline: 0px;" target="_blank">Advanced Tab</a> settings from Elmentor’s official documentation.</p>
<h2 style="box-sizing: inherit; overflow-wrap: break-word; clear: both; line-height: 1.4; margin: 0px 0px 0.75em; padding: 0px; color: rgba(0, 0, 0, 0.72); font-size: 1.625rem; font-weight: 300; font-family: "Varela Round", sans-serif; letter-spacing: 0.04em; -webkit-font-smoothing: subpixel-antialiased;">
Save changes</h2>
<p style="box-sizing: inherit; overflow-wrap: break-word; margin: 0px 0px 1.5em; padding: 0px; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
Do not forget to save changes after completing the widget setup. To do this, click on the <span style="box-sizing: inherit; font-weight: 600;">Update</span> button at the bottom of the page.</p>
<figure class="wp-block-image" style="box-sizing: inherit; margin: 0px 0px 1.5em; color: rgba(0, 0, 0, 0.66); font-family: "Open Sans", Arial, sans-serif; font-size: 16px;">
<img alt="Update page in the Elementor" class="wp-image-2060" height="170" loading="lazy" src="http://docs.merkulov.design/wp-content/uploads/2019/12/Screenshot-2019-12-05-at-10.18.55.png" style="box-sizing: inherit; height: auto; max-width: 100%; border-style: none; vertical-align: bottom; border-radius: inherit;" width="395"><figcaption style="box-sizing: inherit; margin-top: 0.5em; margin-bottom: 1.5em; color: rgb(85, 85, 85); font-size: 13px; font-style: italic;">
<p>
<em style="box-sizing: inherit;">Update page in the Elementor</em></p>
</figcaption></figure>
<!-- /wp:heading --><!-- wp:block {"ref":1773} /--><!-- /wp:heading --><!-- wp:block {"ref":1773} /--></section>
<hr />
<footer>
<p>Copyright Mapper 2022 made by <a href="https://1.envato.market/cc-merkulove">merkulove</a></p></p>
</footer>
</div><!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>document.createElement('section');var duration='500',easing='swing';</script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.scrollTo.js"></script>
<script src="assets/js/jquery.easing.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-min.js"></script>
</body>
</html>