Components List

COLUMN

“Columns“ are part of the row and they hold your content elements inside them. Columns can be reordered. Click and drag column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse.

Param name Description
Animation Add animation to your element or leave without animation
Design Options Control borders,background and other styling options
Width & Responsiveness Control width, offset and visibility of element on different devices

ROW

“Row“ is the main content element of Smart Builder. Rows are used to divide your page into the logic blocks with columns, columns later will hold your content blocks. Rows can be divided into the layouts (eg. 1/2 + 1/2, 1/3 + 1/3 + 1/3, and so on). Your page can have unlimited number of rows. To change row's position, click and drag row's drag handler (top left row's corner) and drag row around (vertical axis).

Param name Description
Row stretch Select stretching options for row and content (Note: stretched may not work properly if parent container has "overflow: hidden" CSS property).
Style Fluid & Boxed
Design Options Control borders,background and other styling options
Background image Select image from media library for row
Background type Choose background type between Parallax, Fixes, Fill, Stretch
Animation Add animation to your element or leave without animation

ACCORDION

Accordion is a complex element which consists of inner section collections and its structure is similar to row and column hierarchy. You can create as many inner sections within element as you wish and then place any type of content within.

Param name Description
Title Enter section title
Content Here you can type any informations
Style Select accordion display style
Design Options Control indents & inverse
Accordion You can add as many tabs you want, use drag & drop to change their order and also you can remove them
Animation Add animation to your element or leave without animation

ALERT

This shortcode allow you to add some nice alerts.

Param name Description
Title Enter section title
Content Here you can type any informations
Color Choose between danger, info, success, warning
Size Choose between big, small
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

BLOCKQUOTE

Small quote or excerpt.

Param name Description
Text Text your own content for blockquote
Cite Author of this blockquote
Type You can choose own style for this item - standart or italic
Cite align Choose between left, right
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

BLOG

This Item allow you to add Blog on any page you like. Great solutions for all those who want to get blog content with other stuff.

Param name Description
Employe Choose the post you want to show
Settings You can add settings: sidebar, date post, author post, comment post, author categories, tag post
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

BLOGLIST

This element allow you to add some blogs inside list.

Param name Description
Employees Choose how many posts you want to show
Settings You can add settings: position image, sidebar, date post, author post, comment post, author categories, tag post
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

BUTTON

This shortcode create buttons in many different styles. Button can have link to other page. Also can have icon on left or right hand side.

Param name Description
Label Text which will appear on the button
Type Select button display style
Size Select button display size
Align Select button alignment
Link Type link for button or leave it empty if you don`t want
Open in new window Choose if you would like to open link in new window or not
Add icon Add icon to button from icon library. Control alignment of icon
Icon Position You can choose position for icon: left or right
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

BUTTONLINE

You can add as many buttons as you need, just type title and set settings. You can also use Drag&Drop option to set the order for buttons.

Param name Description
ButtonLine You can add as many buttons you want, use drag & drop to change their order and also you can remove them
Label Text which will appear on the button
Type Select button display style
Size Select button display size
Align Select button alignment
Link Button link
Add icon Add icon to button from icon library. Control alignment of icon
Icon Position You can choose position for icon: left or right
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse
Add fixed size animated image carousel.

Param name Description
Carousel You can add as many images you want, use drag & drop to change their order and also you can remove them
Images Select images from media library. You can also upload images using media library
Title Title of element which will be displayed on widget
Description Short text on image
Bullet controls Choose between yes, no
Button controls Choose between yes, no
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

CLIENTS

With this shortcode you can put clients on page.

Param name Description
Clients You can add as many clients you want, use drag & drop to change their order
Ankor link Enter the name for link
Border Turn on/off
Animation Add animation to your element or leave without animation
Design Options Control background options, indents, inverse

CLIENTSLIST

This element allow you to add some clients inside list.

Param name Description
Clients You can add as many clients you want, use drag & drop to change their order
Ankor link Enter the name for link
Border Turn on/off
Animation Add animation to your element or leave without animation
Design Options Control indents, inverse, background and other styling options

COUNTDOWN

Stylish shortcode to create an elegant countdown for your events or projects.

Param name Description
Title Text visible over the date
Date Type launch date in the following format: 12/30/2014 | month/day/year
Time Type launch time in the following format: 12:00 | hour:minute
Animation Add animation to your element or leave without animation
Design Options Control indents, inverse, background and other styling options

COUNTER

This Item is creating nice counter with icon.

Param name Description
Content Text placed under number
Range Number for counter item
Formatter Choose between %n - Integer; %f2 - Float with 2 decimal places
Color Type color for counter and content
Icon You can choose any icons from our predefined icons list
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

DIVIDER

This item is creating space between elements. Horizontal bar for dividing separate sections of the page. You can choose few different styles of this item.

Param name Description
Divider style Choose between solid, dashed, dotted
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse
Add responsive Image gallery. Choose your gallery type from Classic gallery, Classic masonry or Masonry from big to small.

Param name Description
Style Select gallery template from With gutter, No gutter or No gutter full width
Template gallery Select gallery template from Classic gallery, Classic masonry or Masonry from big to small
Grid Choose between 2 grid, 3 grid, 4 grid
Gallery images Select images from media library. You can also upload images using media library
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse
Header is probably the most important section for theme because this is what users see first. You can also setup different header styles for different pages.

Param name Description
Header text Here you can type any informations
Size Select size from h1 - h6
Type Choose between decorate, default
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

ICON

It adds more of 3500+ icons in your content. With well done hover effect.

Param name Description
Icon Select icon from library(More then 3500)
Icon color Type color for icon
Icon size Select icon size
Box size Select box width, height, radius
Design settings for icon Select Border, Background color, Icon opacity, Hover icon color, Hover box size, Hover border, Hover background color, Hover icon opacity
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

ICONBOX

With this element you can create awesome looking Iconbox with well done hover effect. You can create your own styles.

Param name Description
Type You can choose between Top, Left, Right, Down position for icon
Title Title for iconbox
Title size This font size will be used for title iconbox
Title color This color will be used for title iconbox
Text Here you can type any informations
Icon Select icon from library
Border Choose if you want to show border or not. Set the setting for the border
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

IMAGE

Add simple image to your layout and style it. Images can have links or can be zoomed after click. Add animation or apply Design Options.

Param name Description
Image Select image from media library. You can also upload images using media library
Type Choose "bordered", if you want border around image
Action Select onclick action: None, Link, Zoom
Text action Short text under image
Link Enter direct link to image. If you don`t want to open image after click, you can type your own link for this image
Open in new window Choose if you would like to open item in new window or not
Overlay color Choose between system or gray
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

LIST

List give you many possibilities and using it you can create lot`s of nice things on website. You can define style, icons and much more.

Param name Description
Content Text for list item
Icon Select icon from library
Icon Animation Choose entrance animation for icon
List You can create as many inner sections within element as you wish. Use drag & drop to change their order and also you can remove them
Template You can choose between 2 template: basic, reverted
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

MAP

Insert Google Maps within your page. Map is based on Google Maps API. You can edit the map later if you need to add or remove locations.

Param name Description
Height height of the map
Latitude Type right Latitude value for your position
Longitude Type right Longitude value for your position
Address You can add address in address line
Scale on scroll Turn on/off
Zoom control Turn on/off
Scale Zoom of the map
Animation Add animation to your element or leave without animation
The modal component consists of an overlay, a dialog and a close button.

Param name Description
Opener element text Name for opening modal window
Opener element style Choose between 7 styles
Modal title Text visible over the content
Modal content Here you can type any informations
Close button text Text for button close
Close button style Select between 6 style
Close button align Select "button close" alignment between: left, right, center
Design Options Control indents & inverse

OURTEAM

This element will create the single Our team profile. Show your team using this element.

Param name Description
Size image Choose between original size or crop
Action after click Choose between simple or hover effect
Team list Choose one of your our team's profile
Add You can add new our team
Refresh You can refresh list with our team
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

OURTEAMGRID

This element will create the single Our team profile. Show your team using this element. You can create as many profiles for your members as you need.

Param name Description
Column Choose the way for order your our team(2 column, 3 column, 4 column)
Size image Choose between original size or crop
Action after click Choose between simple or hover effect
Team list Decide how many our tean you want to show on one page
Add You can add new our team
Refresh You can refresh list with our team
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

OURTEAMSLIDER

This element will create the single Our team profile. Show your team using this element. You can create as many profiles for your members as you need.

Param name Description
Column Choose the way for order your our team(2 column, 3 column, 4 column)
Size image Choose between original size or crop
Action after click Choose between simple or hover effect
Margin item You can add padding for section if you want
Team list Decide how many our team you want to show on one page
Add You can add new our team
Refresh You can refresh list with our team
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

PANEL

Create layout boxes with different styles.

Param name Description
Title Title for panel
Text Here you can type any informations
Type Select panel display style (primary, success, info, warning, danger)
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

PORTFOLIOBOX

Use your portfolio element with any other shortcodes on page.

Param name Description
Hover animation Choose the hover animation between 4 style
Action after click Choose between 2 style: zoom image or go to page
Border Choose if you want to show border or not. Set the setting for the border
Portfolio list Choose one of your Portfolio
Add You can add new Portfolio
Refresh You can refresh list with Portfolio
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

PORTFOLIOGRID

Use your portfolio element with any other shortcodes on page.

Param name Description
Filter show or hide Append filter to Portfolio grid
Column Choose the way for order Portfolio(2 column, 3 column, 4 column)
Hover animation Choose the hover animation between 4 style
Pagination type Choose if you want to show pagination or not
Count per page Number of items to show per page
Action after click Choose between 2 style: zoom image or go to page
Border Choose if you want to show border or not. Set the setting for the border
Portfolio list Decide how many portfolio you want to show on one page
Add You can add new Portfolio
Refresh You can refresh list with Portfolio
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

PORTFOLIOHIGHLIGHT

Use your portfolio element with any other shortcodes on page.

Param name Description
Filter show or hide Append filter to Portfolio grid
Hover animation Choose the hover animation between 4 style
Pagination type Choose if you want to show pagination or not
Count per page Number of items to show per page
Action after click Choose between 2 style: zoom image or go to page
Border Choose if you want to show border or not. Set the setting for the border
Portfolio list Decide how many portfolio you want to show on one page
Add You can add new Portfolio
Refresh You can refresh list with Portfolio
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

PORTFOLIOLIST

Use your portfolio element with any other shortcodes on page.

Param name Description
Filter show or hide Append filter to Portfolio grid
Hover animation Choose the hover animation between 4 style
Pagination type Choose if you want to show pagination or not
Count per page Number of items to show per page
Ancor link Enter link title
Portfolio list Decide how many portfolio you want to show on one page
Add You can add new Portfolio
Refresh You can refresh list with Portfolio
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

PORTFOLIOMASONRY

Use your portfolio element with any other shortcodes on page.

Param name Description
Filter show or hide Append filter to Portfolio grid
Column Choose the way for order Portfolio(2 column, 3 column, 4 column)
Hover animation Choose the hover animation between 4 style
Pagination type Choose if you want to show pagination or not
Count per page Number of items to show per page
Action after click Choose between 2 style: zoom image or go to page
Border Choose if you want to show border or not. Set the setting for the border
Portfolio list Decide how many portfolio you want to show on one page
Add You can add new Portfolio
Refresh You can refresh list with Portfolio
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

PRICINGTABLE

This component will create amazing Pricing item. You can use them as table with label or without it.

Param name Description
Grid Choose between 2 column, 3 column, 4 column
Title Pricing table title
Icon Additional field for icon at the top of pricing table
Description Enter pricing table description
Button text Button title
Button style Select button display style
Button link Enter link for onclick event
Best value Turn on/off
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

PROGRESSBAR

Display progress bar with custom values. Style your whole progress bar or separate values according to your needs. You can add as many you want.

Param name Description
Progress Enter value of progress bar
Type Select color for progress bar
Stripe Add stripes to your progress bars
Type Stripe Choose between striped or striped-minified
Active Turn on/off
Speed animation Turn on/off. Add animation to stripes
Type animation Choose between ease-in, ease, ease-out
Label Choose if you need to show label
Label out progress Choose if you need to show label out progress bar
Position Label Choose position between: left, center, right
Text Choose if you need to show text
Text out progress Choose if you need to show text out progress bar
Text progressbar Enter text used as title of bar
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

PROGRESSBARVERTICAL

Display progress bar with custom values. Style your whole progress bar or separate values according to your needs. You can add as many you want.

Param name Description
Progress Enter value of progress bar
Type Select color for progress bar
Stripe Add stripes to your progress bars
Type Stripe Choose between striped or striped-minified
Active Turn on/off
Speed animation Turn on/off. Add animation to stripes
Type animation Choose between ease-in, ease, ease-out
Label Chose if you need to show label
Label out progress Choose if you need to show label out progress bar
Text Choose if you need to show text
Text progressbar Enter text used as title of bar
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

TAB

Tabs is a complex element which consists of inner section collections(tabs). You can create as many inner sections within element as you wish and then place any type of content within. Tabs are considered as complex elements which do not allow to insert other complex elements within.

Param name Description
Style We did 3 different styles for this item: horizontal dark,horizontal light, vertical
Title Title of tab which will be displayed in Tab header
Content Place any type of content
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

TESTIMONIAL

This component will create Testimonial. Testimonial for this section, you can add in Testimonials > Add new section.

Param name Description
Color text cite Choose color for text cite
Color person name Choose color for person name
Color image border Choose color for border image
Testimonial list Choose one of your Testimonial
Add You can add new Testimonial
Refresh You can refresh list with Testimonials
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

TESTIMONIALSLIDER

This component will create Testomonials slider. Testimonials for this section, you can add in Testimonials > Add new section.

Param name Description
Color text cite Choose color for text cite
Color person name Choose color for person name
Color image border Choose color for border image
Testimonial list Decide how many Testimonials you want to show on one page
Add You can add new Testimonial
Refresh You can refresh list with Testimonials
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

TEXT

Component “Text" allows you to insert paragraph type text and format it using TinyMCE editor. Moreover text block allows adding media.

Param name Description
Text Add/Edit content using editor TinyMCE
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

THUMBNAIL

Add simple image with description to your layout. Images can have links or can be zoomed after click. Add animation or apply Design Options.

Param name Description
Image Select image from media library. You can also upload images using media library
Type Choose "bordered", if you want border around image
Action Select onclick action: None, Link, Zoom
Text action Short text under image
Link Enter direct link to image. If you don`t want to open image after click, you can type your own link for this image
Open in new window Choose if you would like to open item in new window or not
Overlay color Choose between system or gray
Action Link Choose between link, button, none
Header Header of thumbnail
Text Here you can type any informations
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse

VIDEO

This component is very useful option for embedding Vimeo, Youtube videos into page.

Param name Description
Share link Link to the video.
For vimeo video ID is: http://vimeo.com/19819283
For youtube video ID is: http://www.youtube.com/watch?v=YE7VzlLtp-4
Autoplay this video Turn yes/no
Animation Add animation to your element or leave without animation
Design Options Control indents & inverse