Adding Content

To start working with Elementor you need to create your first page (see the previous page for more info and screenshots), so from the WordPress dashboard go to Pages, click Add New, and give it a name, then click Edit with Elementor.

To start with a clean page go to the bottom panel and click the Settings icon.

And for page layout choose Elementor Canvas. This is the easiest way to create a full blank page.

Editor and Widget Areas

The Elementor interface on the right side is the Editing Area of the page. This is where you can add and edit elements that form the layout of your page. On the left side is the Elementor panel with creative tools called Widgets. You use Widgets to add elements to your page like headings or a text editor, images and videos and much more.

You can always access this area by clicking on the widgets icon on the top right.

And on the top-left, you have a hamburger menu where you have more options like setting default colors and fonts, which saves a lot of time when designing your page.

From the hamburger menu, you can set the default colours and fonts to be used throughout the site. Setting a default doesn't mean you can't change individual fonts as needed, it just ensures that all your text and headers and colours are placed on your page with default settings. So you can set your default font to Roboto, and later you can change an individual element to something else. This is a great way to make sure your site has a consistent look and feel throughout.


Don't forget to apply your changes!

Back in the hamburger menu, you can also click View Page to see your live website, or Exit to Dashboard to go back to your WordPress dashboard.

At the bottom is another panel with more key features such as Settings where you can give the page a name and choose a page layout.

Note the Navigator, which helps you get a clear and organized view of your page.

You can also see the Page History to view recent changes, and next to it is the responsive menu for switching between screen modes. You can preview your changes and when ready to go live simply hit the publish button.

Building Content

There are two ways you can start. You can use the library to preview Elementor's pre-made blocks and pages, as well as your own templates, and insert them into your page. We'll cover that in the next section.

Elementor uses three main building blocks: sections, columns, and widgets.

Sections are the largest and can be identified by their blue border.

Inside them are columns. You can identify them by the black dashed border. These columns house widgets such as text and buttons.

You control the section column and widgets with the handle. To edit them simply right-click the handle where you can edit, duplicate, delete, and much more.

The blue line indicates where it will be positioned when you let go you can move them around by simply dragging and dropping them.



Sections, columns, and widgets have three tabs in the panel on the left. Sections and Columns have Layout, Style and Advanced tabs, whereas Widgets have Content, Style and Advanced tabs.

Next we'll see how these settings are used to create a landing page.