Custom CSS (Pro)
Users can add custom CSS directly from the Element options -> Advanced -> Custom CSS. This is super-easy and you would be able to see your changes with a live preview instantly. Note: With custom CSS you can fine tune the styling of your elements, and this feature is available only in Pro version.
Custom JavaScript (Pro)
Sure there are other ways to do this, but if you want to add per page through the page builder, add your custom JS into the Page Options -> Custom JavaScript. Be careful when using Javascript though as it may completely break the page builder too and unless you know what you’re doing, it’s not really recommended […]
Gradient Background
To apply a gradient background to your element:– Double-click on it or right-click and choose edit to edit its options. – In the element options panel go click the Styling tab.– Choose Wrapper or Inner content horizontal accordion tab.– Click Background tab.– By clicking the “Select background gradient” placeholder a default gradient color is created […]
Using panel element options
Panel Element Options contains style options for a particular element.Access Panel Element Options by right-clicking on an element and choose Edit or by double-clicking on an element.Close Panel Element Options by clicking the “x” icon at the top right of the panel. Panel Element Options titleIt describes the name of the element you are currently […]
Typography
You can find Typography options in:Right click on element -> choose edit to open Panel Element Options -> go to Styling tab -> choose one of the available options from the horizontal accordion menu -> click Typography tab. Font optionsAlignThe text-align property sets the horizontal alignment of a text element. Font FamilyChoose a font family […]
Borders and shadows
You can find Borders and shadows options in:Panel Element Options -> Styling tab -> choose one of the available options from the horizontal accordion menu -> click Borders and Shadows tab. Borders options:You can create borders to an element by setting border options.Border sideChoose a border side(all, top, right, bottom, left) by clicking the corresponding […]
Sizes and spacing
You can find Sizes and spacing options in:Panel Element Options -> Styling tab -> choose one of the available options from the horizontal accordion menu -> click Size & Spacing tab. Spacing – PaddingSet the top, right, bottom, left padding values, and units for the element. – MarginSet the top, right, bottom, left padding values, […]
Display options
The z–index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Use the Z-index options to position the overlapping elements. Z-index value: auto | number | initial | inherit; When creating a complex layout, the new advanced flexbox system will […]
Transition options (Pro)
Transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS […]
Transform Options (Pro)
The Transform allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space. Using this property, elements can be translated, rotated, scaled, and skewed. The value list may consist of 2D and/or 3D transform values. Perspective property doesn’t affect the element itself, but affects the transforms of descendent elements’ 3D transforms, allowing them […]
Filters Options (Pro)
With filters, you can apply unique visual effects to any element, from blurring to sepia tones. They’re also useful for creating interesting changes on hover states. The Mix Blend Mode CSS property sets how an element’s content should blend with the content of the element’s parent and the element’s background. Grayscale converts the input image to grayscale. […]
CSS Pseudo-Class Selectors (Pro)
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button’s color when the user’s pointer hovers over it. Pseudo-classes allows you applying a style to an element not only in relation to the content of the document tree, but also to the […]
Shape dividers
Shape dividers allow the user to add a top or a bottom mask to an element. For example, this means that any section with height and background( that has background color, gradient, image or video ) may support a vectored shape upon it. The shape divider option is found on the General Tab from Element […]
Columns Gaps
If you have 3 columns in one line and change your section gap you might think that nothing happens. But this is because you don’t have any content in them. The gap is used as left right padding for the child columns of your section. The problem usually happens when a user wants to add […]
