INSTALLATION

To install Elegant Mod in your site go to your WordPress Dashboard -> Plugin -> Add New. Then click on “Upload Plugin” button at Top and there, in the “Choose File” area choose the downloaded zip file from elegantthemes to finally press install now.

Finally, after the plugin was installed , you should activate it.

HOW TO USE

Elegant Mod is a collection of modules for Divi. After clicking the button in the visual builder to add a new module, you will find the added ones, which start with the prefix “EMOD” followed by the type of module. Select your preferred module.

Once you have inserted the prefered module, you will see the main settings.

They can be adjusted as any regular module.

ANIMATED TITLE

Heading: Here you should select the importance of the title. These are HTML tags and are mainly used to highlight titles for search engines. H1 is the most important.

Launch: Here you can determine whether the title is always present or if it remains hidden until the user reaches the position of the title on the scroll

*** Titles are styled in the design tab under the toggle called “Header,” like any regular Divi module.

Chart

Once you have inserted the module, you will see the main settings.

The X Axis Labels setting defines the labels displayed statically in the graph. That means, it won’t change independently of the values inserted in each graph. The Y axil is generated dinamically and it depends of the values inserted on each graph.

To insert a graph, press on the Add New Item button, as the image below.

Here you can specifies the data of each item and the label displayed when users pass mouse over the info.

You can choose different graphs, like pie charts, bar charts, etc, change the graph colors, display or hide axis or labels or even change the font styles. Mostly of settings to customize the charts are under the content tab, excepting for fonts that under design tab.

MAP

Once you have inserted the module, you will see the main settings.

Map Center address defines what will be the main area displayed when the maps loads for first time on users page. 

To define the area, you can move around the map and then click on any part of it to center and define it.

Also,  you can scroll down and look for an spacific address and use it to define the map center.

To add a marker, click the Add New Item button.

To define the marker position just repeat the same process used for define the map center, just click in any part of the map or look for an specific address.The area marker is a bit different, we will see it how to use it soon. If you scroll down, there’s two toggles to adjust some parameters, marker settings and popup settings

There’s 4 kinds of markers and 3 of them works pretty similar (basic, circular, and custom). This 3 ones are showed just below the spot you clicked on the map. The polygon area works different, first, you should select the option polygon area and THEN you must go to the map and press on different spots over the map, drawing the shape of the area.

Each marker kind has individual settings, so each one must be adjusted uniquely.
The plugin has some restriction in desing, this because was made with external libraries like openstreetmaps and leafly and both are customize limited

GALLERY

Once you insert the module, you will see an option that is quite similar to the original Divi gallery, which when clicked, will allow you to select the images that will make up this gallery.

In the image selection window, you will see certain additional fields that will allow you to enter values and additional information for each photo.

EMOD Gallery filter values: Here you should enter the categories that you want to assign to the image so that, in case the filter is active, the image appears according to the selected criteria.

EMOD Gallery Link: Any link in case you want the image opens an url after the user clicked it.

Then, if the categories were added and you want to activate the filter, in the main settings window, you must go to the filter tab and start adding the filters with the same names that were assigned to the photos. In the previous example, we used the filters “woman,” “forest,” and “art,” so we will add them here. Once this is done, the filter will be active and working.

HOTSPOT

When inserting the module, before adding a marker by pressing “Add new item,” you must choose the main image. Add it in the field that says “Main Image.” Once the image is added, you can press “Add new item,” which will display a new window where you can see the same uploaded image, but this one is interactive, and you can click on it to insert the marker. The place where you click will determine the position on the actual image, although you may see visual differences between the position selector and the actual image due to the difference in dimensions.

FLIPBOX

To insert content, you must click on the Add new item icon. Once there, you will find the typical text editor that we usually see within the settings. You can enter images or text and style it with design options, backgrounds, etc. Once you are done, repeat the process by pressing Add new item again. The first item added will be the front side and the second, the back side. YOU MUST ONLY ADD 2 ITEMS, otherwise, the module will not display correctly.