Adding Elements

What are Elements

The "Element" is the building block of all Builders across the Cornerstone Builder. Elements can have a general purpose such as the Text Element, or more specific and multi-dimensional such as the Accordion or Navigation Elements.

Adding Your First Element

To add your first Element, locate the Add Element button in the toolbar:

Clicking on that button will reveal a popup that contains the Element library:

You can scroll through the list and manually look for the Element you want, collapse entire groups (e.g. "Standard," "Dynamic," et cetera) to help filter your results, or type in the search input at the top of the popup to reveal the Element you are looking for. This fuzzy search will help bring the most relevant results to the top based on the Element type as well as the name you've given it. For example, if you searched for "row," you might see something like the following:

In this example, the primary Row Element has been shown to us at the top, but we're also seeing additional results such as a few of our Posts Elements and a couple presets we've saved throughout our build—all of which are built using the Row Element as a base, which is why they are showing up in our results.

Once you have located the Element you wish to add to your site, click and drag it into the live preview anywhere you see the following dropzone style:

This Element icon surrounded by a dashed line indicates an empty dropzone, which has not yet received its first Element. Once an Element is added, this state will go away, but the dashed lines will return any time you drag in a new Element, guiding you to the appropriate areas you can work with.

Alternate Ways to Add Elements

Another way Elements can be added in a more contextual manner is to use the + icon found on the sortable items representing each Element on the Outline pane:

Clicking this icon will behave differently depending on what Element you click on:

• Sections: clicking will add a new Row to the end of your Section.
• Rows / Grids: clicking will add a new Column / Cell to the end of your Element.
• Columns / Cells / Divs: clicking will open the Element Library for you to select from. Your Element can simply be selected here and it will be added to the end of your Element.

Alternately, if you click the + button on the Section while holding your CMD / Ctrl key, a popup will appear allowing you to select from any available primary layout Elements such as a Row, Grid, or Div. This is a very helpful and quick way to access additional layout Elements other than your primary layout Element specified in Preferences.