Modules

Modules are what you use to add elements to your layout. If you want a menu at the top of your site you add a menu module in one of your topmost blocks. If you need a chunk of text at the bottom of your site you add a text module to one of your lower blocks. The graphic below shows a module being added from the main Elements area.

When adding a module that has saved versions or styles, first enter its library and then drag it in place. The video below demonstrates entering the tiles library and dragging a tile in place.

After dropping into the layout, most modules will automatically show the editing popup, as shown in the video above. To edit a module at any time, hover over it and click the gear edit icon.

At a minimum there will be a place to edit common settings like space above and below. Most have a module specific settings area as well.

Editing modules in shared blocks

A cool feature of blocks is that they can be reused. When you want to edit a block that is shared between multiple layouts you first unlock it by clicking the lock icon.

Then choose whether you want edits in that block to apply to all instances of that block or if you would like for that block to be unique and no longer shared.

Changes at specific widths

If you don't want a particular module to be visible when the site is viewed at a certain width then check one of the icons in the common settings area that corresponds to a specific width.

To spice up your site display, entry animations can be applied to any module. The animation is applied as soon as a viewer has viewed enough of the page so as to fit the entire module. To apply an animation, click to edit any of the modules in your layout, and then select the "Animate" tab in the module's settings.

There are four options to choose from when setting up an animation

1. Animation type: Mix and match between a fade or slide in effect.
2. Animation direction: Choose the direction from which the animation starts.
3. Animation distance: The greater this pixel value, the greater the movement. This number is the distance the widget will travel to get to it's resting place.
4. Animation duration: Set the number of milliseconds for the animation.

As noted in the settings, be aware that module animations can only display on the front end of the site; they can't display in the Visual Builder itself. Play the video below to preview a few different animation possibilities.

A copy can quickly be made of any module. Edits to this copied module are independent of the original. Click the copy icon on the widget. That will trigger a paste icon to be in the left column. Drag the copy icon into place.

Modules are placed inside columns, which rest inside of rows, which are inside of blocks. As such the location of your module primarily determined by it's position in the layout. The alignment and spacing of modules inside columns is controlled via the "common" options available in the module editing popup.