This panel allows you to edit a number of properties of the chosen element, via simple widgets that interact with the element’s HTML classes or attributes.
A good thing is that the properties applied via this panel use the native Bootstrap classes exclusively; this allows you to interact with the element without generating bloat.
Let’s dive into the interface from top to down.
First of all, the COLORS section of this panel allows us to assign the text and the background color, using a simple color palette widget.
This palette pulls the color values directly from your own Bootstrap CSS – helping you achieve a coherent color choice, always “in sync” with your project.
If you’re using CustomStrap, these colors can be instantly redefined via the Customizer, so even after finishing the site, you can instantly change each color from a single point.
Upon clicking the desired colors, if you scroll down to the “HTML ATTRIBUTES” section of the panel, you will see the applied classes.
Here you can also add or remove classes, or give a custom ID to the element, or apply some inline CSS for quick styling.
Going back to the panel top, after the COLORS section you have some tools to control the element’s ALIGNMENT, PADDING and MARGIN.
All these are just means to apply the corresponding Bootstrap spacing utility classes, so, also in this case, everything is achieved without any kind of added CSS.
Just a bit below we have the DECORATION tools.
The first one, “Background”, allows us to add a background pattern of your choice, or a background image.
You can even use UnSplash as a source, to quickly get some nice free pics.
Background images are applied via inline CSS:
after assigning a background, if you scroll down to the HTML attributes area, you will see the code in the inline style textarea.
Going back to the DECORATION tools, after “Background“ we have the “Shape Divider” tool. This can add a nice touch to sections to achieve a somehow less linear and more modern layout.
This feature technically works adding some SVG shape dividers directly in the HTML code so it won’t slow down your page with an additional resource request.
Then the last DECORATION tool is Shadow. This is using the standard Bootstrap shadow classes to add an outer shadow to the element. It can be useful to add some small accent to a box or whatever.
Now, after the DECORATION tools, we have the ANIMATION section.
Let’s make a step back. Now, while we want LiveCanvas to deliver high performance sites, this doesn’t mean they have to look or feel dull.
You need to enable AOS in the WordPress backend at LiveCanvas > Optional Extras > Add Animations. See here for details
In this area of the panel, you will be able to apply and control these animations; this is purely done via HTML attributes – if you see the parent element’s HTML code editor it will be easy to spot (data-aos attribute).