You can add custom CSS values and more to sections, columns and components by click on top right icon .
On top right you can see the ID of the object, you will need it for one page and full page menus, for lightbox containers and also for advanced customizations, the ID is unique and never change. You can edit change it with any string you want, but use only letters and numbers.
The default classes are built-in classes useful for many scopes.
White Convert all colors of inner components to white, use this for sections with background image or video
Col center center a column, use it in combination with text-center class
Section bg color Set the default background color
Bg color Set the main color as background color
No paddings Remove all paddings, use it in combination with No margins for fullscreen content like sliders
No padding bottom Remove only the bottom paddings.
No paddings y Remove top and bottom paddings only
No paddings x Remove left and right paddings only
No margins Remove all margins, use it use it in combination with No paddings for fullscreen content like sliders
Pull right Move the object to right
Bg cover Default background image classes, use in combination with custom CSS style background-image:url()
Bg transparent Remove all backgrounds
Boxed Set a boxed design with the main color as background, use it in combination with class white
Boxed inverse Set a boxed design with white background
Circle Set the object to as a circle shape
Clear Use it for fix floating problems
Text color Main color
Text center Align text to center
Text right Align text to right
Text left Align text to left
Text justify Justify the text
Text bold Set bold font weight, font-weight: 600
Text black Set ultra bold ont weight, font-weight: 900
Text light Set light font weight, font-weight: 300
Text xxl Set extra extra large font-size, default font-size: 110px
Text xl Set extra large font-size, default font-size: 50px
Text l Set large font-size, default font-size: 27px
Text m Set medium font-size, default font-size: 18px
Text s Set small font-size, default font-size: 13px
Text xs Set extra small font-size, default font-size: 11px
Font 2 Set the secondary font, you can set the secondary font from Theme options panel
Hidden xs Hide the object only on smartphone devices
Hidden sm Hide the object only on tablets and smartphone devices
Hidden md Hide the object only on tablets, smartphone and small desktop devices
Hidden lg Hide the object everywhere
Visible xs Show the object only on smartphone devices
Visible sm Show the object only on tablets and smartphone devices
Visible md Show the object only on tablets and small desktop devices
Visible lg Show the object on tablets, smartphone and small desktops devices
Col sm 12 Force a column 12 on tablets and smartphones
Text center smAlign center only on tablets and smartphones
Text center xs Align center only on smartphones
Text right xs Align right only on smartphones
Text right sm Align right only on tablets and smartphones
Text left xs Align left only on smartphones
Text left sm Align left only on tablets and smartphones
Pull none xs Remove the floating (pull-right) on smartphones
No bg xs Remove the background image on smartphones
Height full xs Set a 100% heigh only on mobile devices
Scroll hide Hide the object on page scroll
Scroll show Show the object on page scroll and add class showed, this class is removed on scroll top
Scroll change Add class scroll-change to the object and add class scroll-css on page scroll, this class is removed on scroll top
Full screen size Set the height to full screen size
Vertical row Center horizontally the elements into the object, supported only by columns and sections
Proporzional row All the children columns and components will have the same Height. Use class "clear-proporzional" for remove the proporzional height.
Middle content The content inside the component with this class is centered on middle. Use it with the columns
For more informations check the HTML documentation.
Custom css classes
Here you can insert multiple custom classes separated by space. Ex.
my-class-1 my-class-2 my-class-3.
Custom css style
Here you can insert multiple custom css styles. Ex.