Our Page Builder implementation comes packed with more than 20+ polished elements that will help you create any type of layout and design.

Page Builder Elements

The Elements↑ Back to Top

Row↑ Back to Top

The Row element (along with the columns inside) can be easily considered the backbone of every design you will create. To fully understand how the grid system works, we recommend you to take a look at the article we have created explaining the grid system.

We have created an entire article about how the row element works.

Button↑ Back to Top

Buttons give life to almost any website, they are the perfect way to link contents and at the same time invite your visitors to continue to other page or complete some action.

With the Button Element, you will be able to create a huge amount of different buttons.

Settings:

General

• Text: The text in the button. What the visitor will see.
• URL: The URL the button will link to.
• Rel Attribute: You can add a value for the rel attribute. It is a good choice when working on your site SEO.
• onClick: Advanced Javascript code for onClick action.

Style

• Button Color: Specify the button color from any of the colors from the color palette.
• Size: Choose the button size. (Small, Medium, Large, Extra-Large, Default link).
• Shape: You can shape the button with rounded corners, squared or circle.
• Fluid: By enabling this option your button will adjust to the width of the visitor screen.
• Fixed width: Add a fixed width in pixels.
• Outlined: By enabling this option you will add an outlined style (This means, having a bordered button with transparent background).
• Shadow: Add button shadow.
• Italic Text: Add italic text style.
• Text Transform: Add text transformation via CSS. (Uppercase, lowercase or Capitalize).
• Layout display: Specify the display mode.

Icon

• Icon Library: Pick an Icon library, to begin with.
• Icon: Select the icon you would like to use.
• Icon Position: Choose the position of the icon.

Animation

• CSS Animation: Add some type of CSS animation.
• Animation Speed: Specify the entrance animation speed in milliseconds.
• Animation Delay: Specify the entrance animation delay in milliseconds.

Icon Box↑ Back to Top

With an “Icon Box” you can add text with some sense. You can pick from more than 4 different icon libraries and more than 1000+ icons.

We have created an article explaining how to use the Icon Box element.

Posts↑ Back to Top

Posts is one of the most customizable elements we have developed. It is so dynamic you can create an entire website based on it.

We have created an article explaining how to use the Posts element.

Heading↑ Back to Top

Using Headings is the best way to highlight the different sections of your page or website. You can create unique “Headings” with this element, selecting your custom font from an array of more than 700+ fonts, styles, etc.

We have created an article explaining how to use the Heading element.

Text Block↑ Back to Top

A simple text block editor. You can add text with a WYSIWYG editor.

General

• Text: Rich text editor.
• Element ID: Define an HTML ID for this block.

Animation

• CSS Animation: Select the type of CSS animation if you want one.

Extra

• Extra Class Name: Add a CSS class if you want one.

Separator↑ Back to Top

A separator will work, like you can deduct from its name, as a separator between other elements. Unlike the usual HTML separator, you can add some custom styles:

General

• Color: Pick the separator color from the color palette.
• Style: Pick the separator style (Border, Dotted, Dashed, Double)
• Custom width: Insert the custom width in % or pixels.
• Custom thickness: Insert the custom value in em or px. This option can’t be used with the separator with the icon.
• Icon Library: In case you want to include an icon in your Separator, you must pick an icon library first.
  • Icon: Select the icon.
  • Icon Position: Pick the icon position.
  • Activate Scroll to Top: If you enable this option, once the icon is clicked it will go back to the top of the page.

Animation

• CSS Animation: Add some type of CSS animation.
• Animation Speed: Specify the entrance animation speed in milliseconds.
• Animation Delay: Specify the entrance animation delay in milliseconds.

Message Box↑ Back to Top

With this element you can create a Message Box in order to communicate some text styled in a box.

General

• Background: Pick the background color from the color palette.
• Shape: Pick the shape (Rounded, Square).
• Message Text: A rich text editor to insert the text you want to share.
• Extra Class name: Insert a CSS class name if you want.

Animation

• CSS Animation: Add some type of CSS animation.
• Animation Speed: Specify the entrance animation speed in milliseconds.
• Animation Delay: Specify the entrance animation delay in milliseconds.

Image↑ Back to Top

Insert a simple image with some CSS animation.

General

• Widget Title: Add a title if you want to have some text above the Image.
• Image Source: Select the image source (Media Library, external image or the featured image.)
• Image: If the image source is set to Media Library you will be able to select the image from the media library by clicking the [+] button.
• Image Size: Enter image size (Example: “thumbnail”, “medium”, “large”, “full” or other sizes defined by theme). Alternatively enter size in pixels (Example: 200×100 (Width x Height).
• Add Caption: By enabling this item you will add the image caption.
• Image Alignment: Select the image alignment.
• Image Style: Select the image display style.
• On Click Action: Select action for click action.
• Padding Bottom: Set the bottom padding.
• Extra class name: Add some extra CSS class name.

Animation

• CSS Animation: Add some type of CSS animation.
• Animation Speed: Specify the entrance animation speed in milliseconds.
• Animation Delay: Specify the entrance animation delay in milliseconds.

Image Gallery↑ Back to Top

Having an Image Gallery is a must for many websites. With this element, you will be able to add different types of Image Galleries.

General

• Widget title: Enter text used as widget title (Note: located above content element).
• Gallery Type: You have different options:
  • Flexslider fade: Looks like an image slider with a fading effect between images. If selected you can choose to auto rotate after X seconds.
  • Flexslider slide: Looks like an image slider with a slide effect between images. If selected you can choose to auto rotate after X seconds.
  • Image Grid: A grid of images. You can select the number of columns and if you want them to have a gap in between. These images will use a lightbox when clicked and they will be zoomed.
• Image Source: Select if you want to use images from your own site Media library or external images.
• Images: If you are using images from your media library you can upload/add them by clicking the [+] button. After that, you can order them by dragging and dropping each one.
• Image Size: Enter image size. Example: thumbnail, medium, large, full or other sizes defined by current theme. Alternatively enter image size in pixels: 200×100 (Width x Height). Leave empty to use “thumbnail”
• On Click action: Select action for click action.
• Extra Class Name: Add an extra CSS class if needed.

Image Hover↑ Back to Top

This is the perfect element to add some dynamism to your website. It is an excellent solution to add a “before” and “after” effect. It’s really simple to use it, all you need to do is add two images, one that will be displayed and the other one that will be displayed on top of the first one when the user put the mouse pointer over the element.

General

• Image: Select the first image.
• Image Hover: Select the second image.
• Image Hover Effect: Select the transition effect between the two images (Fade, Plain or Crossfade)
• Image Size: Enter image size (Example: “thumbnail”, “medium”, “large”, “full” or other sizes defined by theme). Alternatively enter size in pixels (Example: 200×100 (Width x Height)).
• Image Alignment: Select the image alignment.
• Image Link: Enter a URL if you want this element to have a link.
• Extra Class Name: Add an extra CSS class if needed.

Animation

• CSS Animation: Add some type of CSS animation.
• Animation Speed: Specify the entrance animation speed in milliseconds.
• Animation Delay: Specify the entrance animation delay in milliseconds.

Google Maps↑ Back to Top

Including a Google Map is almost a must thing to do when thinking about creating contact pages. Before getting familiar with the different options this element includes, you must know that there are some steps you must do before using it.

IMPORTANT: In order to have this element working, you will first need to insert a Google Maps API key into the Theme Options Panel, which you can get here. The Google Maps API Key must be inserted in the option that can be found in the “Design & Styles” section. This option will only appear if the Page Builder is enabled and active.

General

• Widget title: Enter text used as widget title (Note: located above content element).
• Latitude, Longitude: To get the Latitude and Longitude of any address, follow the instructions here.
  1) Use the directions under the section “Get the coordinates of a place”.
  2) Copy the coordinates.
  3) Paste the coordinates into the field with the “comma” sign.
• Map height: Enter map height (in pixels or leave empty for responsive map).
• Address: Insert the address in case you want to display it at the bottom of the map.
• Map Color: Specify the map base color.
• UI Color: Specify the UI Color.
• Zoom: Set the map zoom level.
• Saturation: Set the map saturation.
• Brightness: Set the map color brightness

Mobile

• Mobile no draggable: Deactivate the drag function on mobile devices.

Extra

• Extra Class Name: Add an extra CSS class if needed.

Animation

• CSS Animation: Add some type of CSS animation.
• Animation Speed: Specify the entrance animation speed in milliseconds.
• Animation Delay: Specify the entrance animation delay in milliseconds.

Progress Bar↑ Back to Top

The progress bar element is a great way to display progress for a certain type of value such as skills or any other information. This element will show an animated bar with a bar that will grow to the amount you define within the element options.

General

• Widget title: Enter text used as widget title (Note: located above content element).
• Values:
  • Label: Enter text used as a title of the bar
  • Value: Enter the value of the bar.
  • Color: Pick a color from the color palette.
• Units: Enter measurement units. For example %, px, ponts, etc.
• Color: Pick a color that will be used as the background color of the bar.

Animation

• CSS Animation: Add some type of CSS animation.
• Animation Speed: Specify the entrance animation speed in milliseconds.
• Animation Delay: Specify the entrance animation delay in milliseconds.

Pie Chart↑ Back to Top

Animated pie charts are a fantastic way to display metrics of websites, products, skills and many other datasets.

The Pie Chart element is pretty straightforward and its configuration is really similar to the progress bars.

General

• Widget title: Enter text used as widget title (Note: located above content element).
• Value: Enter the value for the graph. Choose a number between 0 to 100.
• Label value: Enter a label for the pie chart
• Units: Enter measurement units (Example: %, px, points, etc. Note: graph value and units will be appended to graph title).
• Color: Select the pie chart color from the color palette.

Animation

• CSS Animation: Add some type of CSS animation.
• Animation Speed: Specify the entrance animation speed in milliseconds.
• Animation Delay: Specify the entrance animation delay in milliseconds.

Empty Space↑ Back to Top

There are times in which you only need to add some empty space to your layout in order to adjust the vertical gap between elements.

Using this element is pretty simple. It will help you set an empty space with a custom height.

General

• Height: The height number, in pixels. Some other CSS measurement units are allowed.
• Extra Class Name: Add an extra CSS class if needed.

Responsive

• Display in Desktop: Choose the visibility of the element in desktop layout mode (when the viewport is greater than 960px wide).
• Display in Tablet: Choose the visibility of the element in desktop layout mode (when the viewport is greater than 570px and smaller than 960px wide).
• Display in Mobile: Choose the visibility of the element in desktop layout mode (when the viewport is smaller than 570px wide).

Banner↑ Back to Top

A simple way to add a banner. There are many configuration options to make your banner unique.

General

• Height: Set the banner height in pixels.
• Link: Enter URL if you want the banner to link to any page.
• Extra Class Name: Add an extra CSS class if needed.

Content

The content tab refers to the content within the banner itself.

• Content Skin: Specify the content skin (inherit, dark or light)
• Content Width:  Set the banner content width. You can have a banner that takes the whole width of the column and the content width of the banner taking 50% of that.
• Content padding: Set the banner content box padding.
• Content: A rich text editor for you to insert any content.
• Text alignment: Specify the text alignment inside the content box.
• Content Background Color: Pick a color from the color palette.
• Horizontal position: Specify the horizontal position of the content.
• Vertical position: Specify the vertical position of the content.

Style

• Background color: Pick a background color from the color palette.
• Background image: Select/upload an image from the media library.
• Padding: Set the banner padding.
• Background repeat: Select the background repeat property in case an image is selected as background. Check this for reference
• Background position: Define the background position. Check this for reference
• Background attachment: Define the background attachment. Check this for reference
• Hover Effect: Select the background image hovering effect.
• Overlay Color: Pick a color if you want to have an overlay color on top of the image.
• Overlay opacity: If you choose to have an overlay color you can set the opacity on this option.

Animation

• CSS Animation: Add some type of CSS animation.
• Animation Speed: Specify the entrance animation speed in milliseconds.
• Animation Delay: Specify the entrance animation delay in milliseconds.

Responsive

• Display in Desktop: Choose the visibility of the element in desktop layout mode (when the viewport is greater than 960px wide).
• Display in Tablet: Choose the visibility of the element in desktop layout mode (when the viewport is greater than 570px and smaller than 960px wide).
• Display in Mobile: Choose the visibility of the element in desktop layout mode (when the viewport is smaller than 570px wide).

Cards Gallery↑ Back to Top

The cards gallery is a type of gallery in which you can see the rest of the images piled up. It looks like the pile of cards you hold when playing a poker hand, you have the first card and then all the rest aligned to one side, and you can switch between them.

Setting up this element is really simple

General

• Images: Upload/Select images from the media library.
• Expanding side: Choose on which side the images will be expanded.
• Cards background color: Pick the cards background color from the color palette.

Animation

• CSS Animation: Add some type of CSS animation.
• Animation Speed: Specify the entrance animation speed in milliseconds.
• Animation Delay: Specify the entrance animation delay in milliseconds.

Countdown↑ Back to Top

Using countdowns is a great way to promote a special event or communicate a special date to your visitors. It may be the time before you have your site back on, or the time until you launch a new product. Whether the case, it is really simple to configure:

General

• Final date: Input the countdown date with the format: YYYY/MM/DD
• Countdown font size: Specify the countdown font size.
• Countdown font-weight: Specify the countdown font weight.
• Countdown line-height: Specify the countdown line height in pixels.
• Countdown text-transform: Specify the countdown text transformation.
• Countdown letter spacing: Specify the letter spacing.
• Countdown text color: Select a color from the color palette.
• Use theme default font family: If you don’t want to use the theme default font family and pick your own, just untick this option.
  • Font Family: The font family
  • Font Style: The font Style.

Text Under

• Text Under: Input the text under the countdown.
• Separator: Enable this option if you want to have a separator between the date and the text under.
• Font size: Specify the font size.
• Font weight: Specify the font weight.
• Line height: Specify the line height.
• Text transform: Specify the text transformation.
• Letter spacing: Specify letter spacing.
• Text color: Select the color from the color palette list.
• Use theme default font family: If you don’t want to use the theme default font family and pick your own, just untick this option.
  • Font Family: The font family
  • Font Style: The font Style.

Animation

• CSS Animation: Add some type of CSS animation.
• Animation Speed: Specify the entrance animation speed in milliseconds.
• Animation Delay: Specify the entrance animation delay in milliseconds.

Counter↑ Back to Top

The counter element is perfect for any infographic or site trying to show some type of counter value. The number will be increasing when the site reaches its position.

Setting the counter is really simple.

General

• Counter value: Input the counter value.
• Prefix: Input a prefix to the value (optional)
• Suffix: Input a prefix to the value (optional)
• Counter Font size: Specify the font size.
• Counter Font weight: Specify the font weight.
• Counter Letter spacing: Specify letter spacing.
• Counter Text color: Select the color from the color palette list.
• Use theme default font family: If you don’t want to use the theme default font family and pick your own, just untick this option.
  • Font Family: The font family
  • Font Style: The font Style.

Text Under

• Text Under: Input the text under the countdown.
• Separator: Enable this option if you want to have a separator between the date and the text under.
• Font size: Specify the font size.
• Font weight: Specify the font weight.
• Line height: Specify the line height.
• Text transform: Specify the text transformation.
• Letter spacing: Specify letter spacing.
• Text color: Select the color from the color palette list.
• Use theme default font family: If you don’t want to use the theme default font family and pick your own, just untick this option.
  • Font Family: The font family
  • Font Style: The font Style.

Pricing Table↑ Back to Top

Pricing tables are a great solution when creating a product or service website. With the Pricing Table element, you can have an excellent and organized way of displaying your prices.

Content

• Title: Insert the price table title.
• Subtitle: Insert the price table subtitle
• Currency: Insert the currency symbol. You can use $, £, € or the symbol you need.
• Currency position: Select between before price and after.
• Price: The actual price.
• Price subtitle: Insert the price subtitle (i.e.: “Per month” in case it’s a plan)
• Body: Insert body text line. Every new line is a block. If you separate with a pipe | the first part will be with bold style.
• Button: Insert a link if you want a button.

Style

• Block color: Specify a color for the block.
• Colored elements: Specify how do you want to color the blog.
• Most Popular: Enable this option if you want this price table to stand out from the rest.
• Alignment: Specify the text alignment.

Animation

• CSS Animation: Add some type of CSS animation.
• Animation Speed: Specify the entrance animation speed in milliseconds.
• Animation Delay: Specify the entrance animation delay in milliseconds.

Video Lightbox↑ Back to Top

Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page.

Video Lightbox is a great way to include videos in your websites in order to attract your visitor attention. Creating a new video lightbox is super simple.

General

• Link Style: Select if you want to have the play button on an image or without one.
• Play Button Color: Select the play button color from the color palette.
• Play Button Size: Select the play button size.
• Play Button Outlined: Activate this option to have the play button with outlined style.
• Video URL: The URL to your video on YouTube or Vimeo.
• Alignment: Select the play button alignment within the block.
• Extra Class Name: Add an extra CSS class if needed.

Animation

• CSS Animation: Add some type of CSS animation.
• Animation Speed: Specify the entrance animation speed in milliseconds.
• Animation Delay: Specify the entrance animation delay in milliseconds.

Accordion↑ Back to Top

The accordion is a graphical control element comprising a vertically stacked list of items. Each item can be “expanded” or “stretched” to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration.

Creating a new accordion is fast and easy:

• Once you add an accordion, you will have different sections and you will be able to add more by clicking the “+ Add Section Button”. You can also re-arrange the order of the sections by dragging and dropping them.
• On each section, you can add any type of content based on the other elements builder.
• That’s it.

Tabs↑ Back to Top

In interface design, a Tab is a graphical control element that allows multiple panels to be contained within a single window, using tabs as a navigational widget for switching between sets of documents.

Creating tabs with the Page Builder is super intuitive. Once you add the Tabs Element, you will see that two tabs are created.

You can add as many tabs as you want/need. For each tab, you can change the title (by clicking the “pencil” icon) and you can add any type of content by clicking the “plus” button.

That’s it, you can start creating tabs for your website.

Raw HTML↑ Back to Top

Output raw HTML code on your page. You can also insert an ID and CSS classes.

Raw JS↑ Back to Top

Output raw JavaScript code on your page. You can also insert an ID for the element.