Adding & Editing Elements

To add an element to the canvas simply drag it from the panel and drop it anywhere on the canvas.

Click on your newly added element to start editing it. The panel content will show you all available controls for the selected element.

Tip: To edit the content of elements that contain text just click on the element, and start typing. Select text portions with your mouse to pop up the text editing toolbar with various styling options such as bold, italic, links, etc.

Sections, rows, and columns do not have any control tabs, as all controls are styling related. Element controls, on the other hand, are organized under two tabs: CONTENT and STYLE.

The Content Tab

Content controls affect the actual element markup (HTML). The screenshot below shows you all available content controls for the image element:

Element Image: Content Tab

The Style Tab

Controls under the STYLE tab alter the design (CSS) of an element and are grouped into:

  • Layout
  • Background
  • Gradient / Overlay
  • Border / Box Shadow
  • Typography
  • CSS
Element Image: Style Tab

Resetting Controls

If you want to undo all the styling changes you have applied to an element, click the Reset Styles icon next to the element name in the panel header. This will only remove any element settings that concern the design of your element. All content settings are preserved.

You can also reset individual controls and entire control groups. Every control and control group that contains a setting has a little grey indicator next to its label.

In the screenshot above we’ve set the text-transform control to Uppercase. If you hover over the indicator a red cross should appear. Clicking it will remove this setting from the element.

To reset an entire control group like the Typography group in the screenshot above, simply click the indicator next to its label. This will remove all settings under Typography.

A great little time saver to quickly remove settings individually or in bulk with a single click.

Copy & Paste Styles

You can copy & paste the styles of any element, column, row, or section by hovering of the blocks’ action icons, then right to reveal the custom context menu. Click on Copy Styles. Hover over the action icons of the block you want to apply those styles to, right click and Paste Styles.

How to copy & paste styles with a few clicks: An Intro To The Builder (@14:38)