Theme Additional Classes

Elementor allows you to apply classes on your sections or widgets which greatly extends the ability for custom styling.

There are some handy classes supported by Rubenz which you can use to have consistent paddings and margins throughout your website as well as consistent background colors.

/* padding & margin classes */
.section_pt
.section_pt-small
.section_pt-large
.section_pb
.section_pb-small
.section_pb-large
.section_mt
.section_mt-small
.section_mt-large
.section_mb
.section_mb-small
.section_mb-large

/* background colors */
.bg-white
.bg-light
.bg-light-grey
.bg-blue-grey
.bg-blue-grey-dark
.bg-dark
.bg-dark-2
.bg-black
.bg-black-0
.bg-black-1

/* white text */
.color-white

In padding & margin classes the first letter of the suffix stands for the type indentation. The second letter means the direction. For example, .section_pt will make your section have Padding Top, while .section_mb will make your section have Margin Bottom.

You can preview the result of applied CSS classes immediately. Classes are to be inserted without dot “.” and separated by space

Those classes fully handles the responsive experience. It means that you don’t need to care about adjusting every sections margins and paddings for mobile devices. Simply combine those classes the way you want and get a perfect look of your sections on smartphones and tablets.

Consistent equal spacing for the sections.