Builder Modules

Accordion

The Accordion module is used to display content in content boxes which can be toggled open and closed with an accordion effect.

To use the Accordion module:

Enter a title for the accordion tab under the “Accordion Title”
Enter the text to show within the accordion tab under the “Accordion Text”
To delete or duplicate a row: hover over the row menu icon (top left icon of the row)
To add a row: just click the “Add new row” button

Module Title This option is used to add the title of your module.
Accordion Title The title shown in the accordion heading for each accordion tab.
Accordion Text The text shown in the accordion content area for each accordion tab.
Default Open/Closed This option determines whether a tab defaults to open or closed.
Add New Row This option adds a new row to add more accordion tabs.
Accordion Layout This option is used to determine the layout and style of the accordion module and will affect how the tabs are shown.
- Option 1 This layout will show the tab headings and content as one block.
- Option 2 This layout will show the tab headings separate from the content in two blocks.
Expand / Collapse This option is used to change what will happen when a user clicks on an accordion heading.
- Toggle When clicking on a tab heading, the selected tab will open and other tabs will still remain open.
- Accordion When clicking on a tab heading, the selected tab will open and other tabs will be closed.
Accordion Color This option is used to change the color of the accordion module.
Accordion Appearance These options provide the ability to toggle various effects for the accordion boxes.
- Rounded Toggles whether the corners of the module’s content will be rounded.
- Gradient Toggles whether the module will have a gradient effect applied to it.
- Glossy Toggles whether the content area will have a gloss overlay effect applied to it.
- Embossed Toggles whether the module will have an emboss effect applied to the edges.
- Shadow Toggles whether the module will have a shadow effect applied to it.
Icon Add an icon that’ll appear when your accordion is opened or closed.
Additional CSS Class This option allows you to add any custom CSS classes you wish to be output with the module.

Box

The Box module is used to display a box of content using the standard WordPress WYSIWYG editor. You can also insert shortcodes with the Box module.

Module Title This option is used to add the title of your module.
Editor Here you can add the content you wish to be displayed in the box module using the WordPress WYSIWYG editor.
Box Color This option is used to change the color of the box module.
Appearance These options provide the ability to toggle various effects effects to be applied to the box.
- Rounded Toggles whether the corners of the module’s content will be rounded.
- Gradient Toggles whether the module will have a gradient effect applied to it.
- Glossy Toggles whether the content area will have a gloss overlay effect applied to it.
- Embossed Toggles whether the module will have an emboss effect applied to the edges.
- Shadow Toggles whether the module will have a shadow effect applied to it.
Additional CSS Class This option allows you to add any custom CSS classes you wish to be output with the module.

Callout

The Callout module is used to display a content box with an associated action button.

Module Title This option is used to add the title of your module.
Callout Style This option is used to determine the style of the callout box and will determine how the callout text and action button are shown.
- Option 1 The callout text will be shown on the left and the action button will be shown on the right.
- Option 2 The callout text will be shown on the right and the action button will be shown on the left.
- Option 3 The callout text will be shown above the action button and the content will be left aligned.
- Option 4 The callout text will be shown above the action button and the content will be center aligned.
Callout Heading This option is used to set the heading text of the callout box.
Callout Text This option is used to set the body text of the callout box.
Callout Color This option is used to change the color of the callout box.
Callout Appearance These options provide the ability to toggle various effects for the callout box.
- Rounded Toggles whether the corners of the module’s content will be rounded.
- Gradient Toggles whether the module will have a gradient effect applied to it.
- Glossy Toggles whether the content area will have a gloss overlay effect applied to it.
- Embossed Toggles whether the module will have an emboss effect applied to the edges.
- Shadow Toggles whether the module will have a shadow effect applied to it.
Action Button Link This option is used to set the link URL of the action button.
Action Button Text This option is used to set the text that will show inside the action button.
Action Button Color This option is used to change the color of the action button.
Action Button Appearance These options provide the ability to toggle various effects for the action button.
- Rounded Toggles whether the corners of the module’s content will be rounded.
- Gradient Toggles whether the module will have a gradient effect applied to it.
- Glossy Toggles whether the content area will have a gloss overlay effect applied to it.
- Embossed Toggles whether the module will have an emboss effect applied to the edges.
- Shadow Toggles whether the module will have a shadow effect applied to it.
Additional CSS Class This option allows you to add any custom CSS classes you wish to be output with the module.

Divider

The Divider module is used to add a border divider between the other modules.

Options are as follows:

Module Title This option is used to add the title of your module.
Divider Style This option is used to determine the line style of the divider.
- Option 1 The divider will be shown as a solid line.
- Option 2 The divider will be shown as small dashes.
- Option 3 The divider will be shown as large dashes.
- Option 4 The divider will be shown as two lines parallel to one another.
Stroke Thickness This option is used to set the line thickness of the divider.
Divider Color This option is used to change the color the divider will show in.
Top Margin This option is used to set the margin space above the divider.
Bottom Margin This option is used to set the margin space below the divider.
Divider Width There are 2 options: (1) Fullwidth or (2) Custom. Fullwdith
Additional CSS Class This option allows you to add any custom CSS classes you wish to be output with the module.

Feature

The feature module is used to showcase features or services of your organization with an animated circular progress bar around the icon or any custom image.

Module Title This option is used to add the title of your module.
Feature Title Here you can add the content you wish to be displayed in the box module using the WordPress WYSIWYG editor.
Editor Here you can add the content you wish to be displayed in the feature module using the WordPress WYSIWYG editor.
Layout This option is used to set the icon position, it has three options.
- Icon Left Displays the selected icon to the left of the content.
- Icon Right Displays the selected icon to the right of the content.
- Icon Top Displays the selected icon the top of the content.
Circle Percentage This will set the percentage of the circular progress bar to be filled when animated.
Circle Stroke This will set width of the circular progress bar.
Circle Color This will set the color of the circular bar around the feature icon.
Circle Size This will set the size of the circle, choose the desired size from the dropdown, “Small,” “Medium” and “Large.”
Icon Type This will set the icon or images to be used for the feature module using the Font Awesome icon library or else you can also define custom image using WordPress media library.
Icon This will set the icon to be used for the feature module using the Font Awesome icon library.
Icon Color This will set the color of the icon to be used for the feature module.
Icon Background This will set the color of background for the icon to be used for the feature module.
Link This option is used to link the icon or your custom image and title to a custom URL.
- Same window open link on the same window.
- Lightbox This option is used to link the icon or custom image and title to open a URL in lightbox.
- New tab If checked this will open the URL into a new tab.
Overlap Image Add an overlap image on top half of the icon (Tip: This is usually used to showcase the profile image of a person).
- Width/Height: Add custom image width and height for the overlap image. This only appears when you add an overlap image.

Gallery

The Gallery module is used to add a standard WordPress gallery on your site.

Module Title This option is used to add the title of your module.
Gallery Layout Select to choose whether to showcase your gallery in Grid, Showcase, or Lightboxed.
Insert Gallery Shortcode This option is used to add the gallery shortcode, either by entering it manually or using the “Insert Gallery” button. If selecting “Insert Gallery” you will be taken to the WordPress “Create Gallery” window where you can set up a gallery as documented here.
Pagination Select to add a pagination when showcasing your images.
Images per pageinput the number of images that you would like to appear per page.
Thumbnail Width This option is used to set the width the gallery thumbnails will be shown at.
Thumbnail Height This option is used to set the height the gallery thumbnails will be shown at.
Columns Select the number of columns for each gallery (1-9 column layout).
Link to Select the image to link as a media file, attachment page, or none.
Link Image Size Select the image size that you would like the image to appear as: Original Image, Thumbnail, Medium, or Large.
Image Appearance This option provides the ability to toggle various effects to be used on the gallery thumbnails.
- Rounded Toggles whether the corners of the element should be rounded.
- Drop Shadow Toggles a drop shadow effect on the element.
- Bordered Toggles a border around the element.
- Circle Toggles whether the element will be rendered as a circle. (Requires images used be square ratio)
Additional CSS Class This option allows you to add any custom CSS classes you wish to be output with the module.

To make the images in gallery grid open in lightbox, make sure to set the Link To option to “Media File” when inserting the gallery:

Image

The Image module is used to add an image with title and caption on your site.

Module Title This option is used to add the title of your module.
Image Style This option is used to determine the layout of the image and any title and caption.
- Option 1 Title/caption will be shown below the image.
- Option 2 Image will be shown on the left and Title/caption will be shown on the right.
- Option 3 Image will be shown on the right and Title/caption will be shown on the left.
- Option 4 Title/caption will be shown in an overlay on top of the image.
Image URL This option is used to set/upload an image URL to use for the module, or alternatively you can select an image from your website’s media library by selecting “Browse Library”.
Image Appearance These options provide the ability to toggle various effects to be applied to the image.
- Rounded Toggles whether the corners of the element should be rounded.
- Drop Shadow Toggles a drop shadow effect on the element.
- Bordered Toggles a border around the element.
- Circle Toggles whether the element will be rendered as a circle. (Requires images used be square ratio)
Width This option sets the width of the image output.
Height This option sets the height of the featured image output.
Image Title This option is used to set the title of the image being added.
Image Link This option is used to set the URL that is linked to by the image being added.
- Same window open link on the same window.
- Lightbox This option is used to link the icon or custom image and title to open a URL in lightbox.
- New tab If checked this will open the URL into a new tab.
Image Caption This option is used to set a caption for the image being added.
Additional CSS Class This option allows you to add any custom CSS classes you wish to be output with the module.

Map

The Map module is used to add an interactive Google map to the page. To display a Google Map, enter the full address and configure the available options.

Module Title This option is used to add the title of your module.
Type Select to showcase the map as Dynamic or Static Image.
Address This option sets the address the map should show when loaded.
Lat/Long Use Lat/Long coordinates instead of address.
Zoom This option sets the default zoom level of the map.
Width This option sets what width the map should be displayed at.
Height This option sets what height the map should be displayed at.
Border This options sets the styling of a border around the map element.
Type This option set the type of map you want to be display, you can choose from the dropdown, “Road Map,” “Satellite,” “Hybrid” and “Terrain”.
Scrollwheel This options enable or disable the scrollwheel in the the map.
Draggable This options enable or disable the Draggable feature in the map.
Disable draggable on mobile Select to enable or disable the draggable feature on the map on moible.
Info Window Input text that’ll appear on text tooltip when user clicks it on the map.
Additional CSS Class This option allows you to add any custom CSS classes you wish to be output with the module.

Module Title This option is used to add the title of your module.
Menu Layout This option is used to determine the layout of the menu.
- Option 1 The menu will be shown as a horizontal menu stretching only as far as the menu entries.
- Option 2 The menu will be shown as a horizontal menu stretching the width of the column.
- Option 3 The menu will be shown as a vertical menu.
Custom Menu This option is used to select the menu to be shown from those created under the WordPress Admin > Appearance > Menus, as documented here.
Menu Color This option is used to select the color of the menu, this will set an overall color.
According Styles These options provide the ability to toggle various effects to be applied to the menu.
- Rounded Toggles whether the corners of the module’s content will be rounded.
- Gradient Toggles whether the module will have a gradient effect applied to it.
- Glossy Toggles whether the content area will have a gloss overlay effect applied to it.
- Embossed Toggles whether the module will have an emboss effect applied to the edges.
- Shadow Toggles whether the module will have a shadow effect applied to it.
Additional CSS Class This option allows you to add any custom CSS classes you wish to be include with the module.

Post

The Post module is used to show the blog posts.

Module Title This option is used to add the title of your module.
Post Layout This option is used to determine the layout of the posts and how they will be arranged.
- Grid 4 Posts will be arranged in a four column layout.
- Grid 3 Posts will be arranged in a three column layout.
- Grid 2 Posts will be arranged in a two column layout.
- List Posts will be arranged in a standard one column list.
Category This option is used to select which categories of posts will be displayed.
Limit This option sets the number of posts shown.
Offset This option sets how many posts should be skipped before the first one is displayed.
Order This option sets whether the posts will be ordered in ascending or descending order.
Order By This option sets what data the posts order will be based on.
Display This option sets what content will be output (full content, excerpt or none).
Hide Featured Image This option sets whether or not the featured image for the posts will be shown.
Image Width This option sets the width of the featured image output.
Image Height This option sets the height of the featured image output.
Unlink Featured Image This option sets whether the featured image will be a link.
Hide Post Title This option sets whether or not the post title will be shown.
Unlink Post Title This option sets whether the post title will be a link.
Hide Post Date This option sets whether or not the post date will be shown.
Hide Post Meta This option sets whether or not the post meta will be shown.
Hide Post Navigation This option sets whether or not navigation links to view more posts will be shown.
Additional CSS Class This option allows you to add any custom CSS classes you wish to be output with the module.

Slider

The Slider module is used to add a custom slider of various content types.

To use the Slider module:

Select a radio button with the content you want to display: Blog Posts, Slider Posts, Portfolio, Images, Videos, or Text
This will toggle different options according to your selection (e.g. Blog Posts radio button will give you options to display WordPress posts along with its layout options)
You can then configure the slider options below such as slider layout, slider navigation, and effects

Module Title This option is used to add the title of your module.
Display This option allows you to set the type of content the slider will display.
Slider Layout This option is used to determine the layout of the slider.
Image Width This option sets the width of the slider image output.
Image Height This option sets the height of the slider image output.
Slider Options A list of various options available to customize the behavior of the slider.
- Visible Sets number of slides visible at once.
- Auto Scroll Sets how long before slider will automatically scroll.
- Scroll Sets number of slides to scroll at a time.
- Speed Sets speed of transition effect.
- Effect Sets the transition effect used.
- Wrap Sets whether the slides will repeat from the beginning when scrolled through.
- Show Slider Pagination Sets whether to display the slider page navigation buttons.
- Show Slider Arrow Buttons Sets whether to display the slider arrow navigation buttons.
- Left Margin Space Sets how much of a margin to add to the left side of individual slides.
- Right Margin Space Sets how much of a margin to add to the right side of individual slides.
Additional CSS Class This option allows you to add any custom CSS classes you wish to be output with the module.

Blog Posts, Slider Posts, and Portfolio Slider Options:

Category This option is used to select which categories of posts will be displayed.
Limit This option sets the number of posts shown.
Offset This option sets how many posts should be skipped before the first one is displayed.
Order This option sets whether the posts will be ordered in ascending or descending order.
Order By This option sets what data the posts order will be based on.
Display This option sets what content will be output (full content, excerpt or none).
Hide Featured Image This option sets whether or not the featured image for the posts will be shown.
Unlink Featured Image This option sets whether the featured image will be a link.
Hide Post Title This option sets whether or not the post title will be shown.
Unlink Post Title This option sets whether the post title will be a link.

Image Slider Options:

Image URL This option is used to set/upload an image URL to use for the module, or alternatively you can select an image from the site’s media library.
Image Title This option is used to set the title of the image being added.
Image Link This option is used to set the URL that is linked to by the image being added.
Image Caption This option is used to set a caption for the image being added.
Add New Row Used to add a new slide to the slider.

Video Slider Options:

Video URL This option is used to set the video URL to use for the module.
Video Title This option is used to set the title of the video being added.
Video Title Link This option is used to set the URL that is linked to by the title.
Video Caption This option is used to set a caption for the video being added.
Video Width This option is used to set the width of the video player.
Add New Row Used to add a new slide to the slider.

Text Slider Options:

Editor You can use the WYSIWYG editor to add any content required in each slide.
Add New Row Used to add a new slide to the slider.

Tap

The Tab module is used to add a content box where the content can be switched with the tab buttons.

To use the Tab module:

Enter Tab Title
Enter Tab Content
To delete/duplicate a Tab: hover over the row menu icon (top left icon of the row)
To add a Tab: just click on the “Add new row” button

Module Title This option is used to add the title of your module.
Tab Title The title shown in the tab button.
Icon Add an icon that appear on a tab.
Tab Content The content shown when the tab is selected.
Add New Row Used to add a new tab to the module.
Tab Layout This option is used to determine the layout of the tabs and content.
- Option 1 Tabs will be shown horizontally with tab titles and content shown as one block with borders around the content.
- Option 2 Tabs will be shown horizontally with tab titles and content shown as two separate blocks with borders around the content.
- Option 3 Tabs will be shown vertically with content in a box.
- Option 4 Tabs will be shown horizontally without borders around the content.
Tab Icon Select where the icon will be placed on the tab. You can choose from the following: Icon beside the title, Just above the title, Just icons.
Tab Color This option is used to select the color of the module.
Tab Appearance These options provide the ability to toggle various effects for the tab buttons and content area.
- Rounded Toggles whether the corners of the module’s content will be rounded.
- Gradient Toggles whether the module will have a gradient effect applied to it.
- Glossy Toggles whether the content area will have a gloss overlay effect applied to it.
- Embossed Toggles whether the module will have an emboss effect applied to the edges.
- Shadow Toggles whether the module will have a shadow effect applied to it.
Additional CSS Class This option allows you to add any custom CSS classes you wish to be output with the module.

Testimonial Slider

The Testimonial Slider module is used to showcase testimonials in a slider layout type.

To use the Testimonial Slider module:

Enter Module Title
Testimonial Slider Layout – Select to have the image at the top or at the bottom

Testimonial Title This option is used to add the title of your module.
Text Editor You can use the WYSIWYG editor to add any content required to be shown in the module.
Person Picture Input the image of the person saying the testimonial.
Person Name Input the name that will appear with the testimonial.
Person Position Input the position/title of the person’s testimonial.
Company Input the company where the person works.
Company Website Input the company site where the person works.
Add New Row Used to add a new slide to the slider.
Slider Options A list of various options available to customize the behavior of the slider.
- Image Width This option sets the width of the slider image output.
- Image Height This option sets the height of the slider image output.
- Visible Sets number of slides visible at once.
- Auto Scroll Sets how long before slider will automatically scroll.
- Scroll Sets number of slides to scroll at a time.
- Speed Sets speed of transition effect.
- Effect Sets the transition effect used.
- Pause On Hover Select if you’d like to pause the slider on hover.
- Wrap Sets whether the slides will repeat from the beginning when scrolled through.
- Show Slider Pagination Sets whether to display the slider page navigation buttons.
- Show Slider Arrow Buttons Sets whether to display the slider arrow navigation buttons.
- Left Margin Space Sets how much of a margin to add to the left side of individual slides.
- Right Margin Space Sets how much of a margin to add to the right side of individual slides.
- Height Set to “Auto” measures the highest slide and all other slides will be set to the size. Or “Variable” makes every slide have its own height.
Additional CSS Class This option allows you to add any custom CSS classes you wish to be output with the module.

Text

The Text module is used to add a text area to the page. You can use the visual editor to enter any rich format text including images, videos, links, heading, etc. Shortcodes are supported with the Text module, therefore, you can insert any shortcode as you do in post/page content.

Module Title This option is used to add the title of your module.
Editor You can use the WYSIWYG editor to add any content required to be shown in the module.
Additional CSS Class This option allows you to add any custom CSS classes you wish to be output with the module.

Video

The Video module is used to show a video embed (YouTube, Vimeo, etc.).

Module Title This option is used to add the title of your module.
Video Style This option is used to set the layout of the video and any title and caption.
- Option 1 The title/caption will be shown below the video.
- Option 2 The title/caption will be shown to the right of the video.
- Option 3 The title/caption will be shown to the left of the video.
- Option 4 The title/caption will be shown as an overlay on top of the video.
Video URL This option is used to set the video URL to use for the module.
Video Width This option is used to set the width of the video player.
Video Title This option is used to set the title of the video being added.
Video Title Link This option is used to set the URL that is linked to by the title.
Video Caption This option is used to set a caption for the video being added.
Additional CSS Class This option allows you to add any custom CSS classes you wish to be output with the module.

Widgetized

The Widgetized module is used to add a widgetized area (widgetized area also often referred to as sidebar, widget area/region).

Module Title This option is used to add the title of your module.
Widgetized Area This option is used to select the desired widget area from the list of all the available widget area of your site.

Button

The Button module allows you to add a button with some custom styling on your site.

Size Select the size of the button that you would like to use.
Button Background Style Choose the background style of the button.
Text Input the text that will appear on the button.
Link Input the link that the user will be redirected to.
Color Select from pre-selected colors on how you want your button to appear. Font color will change depending on the color preset you select.
- Icon You can select the icon that you would like to insert with your button text. This will appear on the left side.
- Open link in new tab Select this option to open link in a new tab.
Add new button Select this to add more than one button.

Icon

The Icon module allows you to add an icon with some custom styling on your site.

Size Select the size of the icon that you would like to use.
Icon Background Style Choose the background style of the icon.
Arrangement Select to showcase the icons horizontally or vertically.
Icon You can select the icon that you would like to insert.
- Select from pre-selected colors on how you want your icon to appear.
Label Input the text that will appear with your icon.
Link Input the link that the user will be redirected to.
- Same window open link on the same window.
- Lightbox This option is used to link the icon or custom image and title to open a URL in lightbox.
- New tab If checked this will open the URL into a new tab.
Add new icon Select this to add more than one icon.