Intro

An element is anything you add to the screen. They can be thought of as HTML elements or contextual building blocks for your site. They can vary from being sections, headers, text, or images. 

This article will cover:

• Creating and Nesting Elements
• Editing Element Content
• Element Corner Menu
• Element Labels
• Reordering Elements
• Intro to Styling Elements

Creating and Nesting Elements

Add elements to your Page by clicking the "+ Element" on the Elements Column. To nest an Element within another, click the blue "+" that sits in between rows. You can also nest Elements by dragging and dropping them over other Elements.

Nesting allows you to structure your page and position elements on the screen. You can position elements nested inside Sections by setting the "Display" property to Flex or Grid, depending on your desired layout.

Editing Element Content

When you add an Element, it usually won't render on the screen because it is empty.

To edit an element's text, click on the input next to the element's icon. Some elements, like links, will have another attribute to the right of the text input.

Element Corner Menu

Click the icon in the top-right corner of an Element's cell to open its corner menu.

This will give you access to delete the Element, duplicate the Element, convert the element (and its children) to a Block, or edit its attributes.

Deleting Elements

To delete an Element, click the trash icon and then confirm that you want to delete it. You can also click "Cancel" if you do not want to delete it.

Duplicating Elements

From an Element's corner menu, click Duplicate to create a copy of that Element. All children and styles will be copied.

Use the shortcut ⌘ + D / CTRL + D on a selected Element to duplicate it.

Make Block

From an element's corner menu, click Make Block to convert the selected Element and its children to a Block. It will take the name of the Element's label and send you to the Block Editor.

We'll cover Blocks later, but basically, they are reusable and customizable sets of Elements that you can add to pages and edit from one source. 

Attributes

The.com Elements are basically HTML, so their attributes are akin to HTML attributes. Attributes are contextual to different Elements; some have a few and others may only have one or two.

To edit the attributes, click Attributes from the corner menu.

You will then have access to that Element's HTML attributes like id, class, href, src, autoplay, etc, depending on what type of Element it is.

Click the "X" to exit this editing mode.

Element Labels

All elements have labels that you can edit. By default container elements (like Divs, Sections, etc) have the labels expanded and cannot be collapsed while contentful elements (like paragraphs, titles, images, etc) have collapsed labels.

Click on the element's icon to expand or collapse the label. When a label is expanded, double-click on the text and then type to rename it.

If you trying to add a new element and what you search for does not appear, pressing enter will create a div with your search term as the label. For example, if you typed in "Wrapper" then a div with the label "Wrapper" would be created.

Reordering Elements

You can reorder elements by clicking anywhere on an element and dragging it. You'll see blue lines telling you where the element will be placed: either nested or adjacent to another element.

You can also collapse nested elements by clicking the arrow to the left of an element's icon.

Intro to Styling Elements

Adding Elements is one core action, and styling is the other. Columns to the right of the Elements Column represents the Style Grid which includes almost every CSS property.

Jump to any style by pressing CMD/CTRL + J and searching for it. Then, give that cell a valid CSS value.

We'll take a deeper look into styling in another article.

Read The.com's Element Library for more.