Panel on the right is called inspector, using the inspector you can modify various css styles for selected element without any css knowledge while having real-time preview in the builder.
At the top of the inspector you can find a path of all parent elements of element currently selected in the editor. Clicking on any of the parents will select that parent in the editor.
Settings panel will contain any element specific settings, for example, changing the h1 to h2 for a heading element.
You can can also manage custom classes and ID for the element here.
Visibility panel allows controlling selected element's visibility on phone, tablet, laptop and desktop. You can toggle the checkboxes here to hide element on specific breakpoints.
Margin controls the spacing between selected elements box and the content outside, while padding controls the spacing between selected elements border and the content inside it.
To use the slider, first select the sides you want to apply margin or padding to and then drag the handle until you have your desired effect. For a more precise control you can enter your margin and padding values in the input boxes, big one will apply the value to all sides while the smaller ones represent a particular side of element's box.
These panels allow changing selected element's border appearance and it's corners roundness.
To change border width and color first select the border sides you want to change at the top and then either use the slider or input boxes at the bottom to get the desired effect. To change border color click on the square under the slider to bring up a color picker.
To change border roundness, first apply the border you want via the border panel, then select the corners you want to change at the top and use the slider or enter the value you want in the input boxes.
You can use shadows panel to apply css shadows to selected element or to text inside it. You can add multiple shadows to the same element. Click "+ add shadow" button to open the shadow editor panel. From here you can change the type of shadow as well as color, angle, distance, blur and spread.
Background section will allow you to set a background image, color or gradient for a selected element.
Click on the color button to bring up a color picker. Here you can choose from a number of different predefined colors or select a completely custom color by dragging your mouse in the color palette and selecting a transparency with the slider underneath, you can also enter a color code in the input below.
Here you can select from different built-in textures and gradients, or upload your own image. You can change background image options, like repeat, position and size.
This panel controls the appearance of selected element's text content.
Click on the font family select, to change selected elements font to one of the native browser fonts or any of google fonts.
Click on of the buttons under the fonts to change text boldness or make it italic, underlines, overlined or crossed-out.
You can change text size by entering desired number in the input box, you can click one of the alignment options to align text left, center or right or you can change text color by clicking on the square at the bottom of the panel to bring up a color picker.
