New to Elementor? In this post, we will show you how to use it. Just like the title suggests, this article is dedicated to beginners, those who completely new to Elementor. If you have been using Elementor for a quite while you can visit this page to find some intermediate to advanced Elementor tutorials.
We will assume that you have installed and activated Elementor on your WordPress site. If you haven’t done so, you can download Elementor from the official plugin directory of WordPress (the free version). Or, if you want to use the pro version, you can download it from the Elementor website.
How to use Elementor: Getting Started
Elementor is a page builder plugin that allows you to create a beautiful page on your WordPress site without having to deal with CSS or HTML. Elementor comes with a drag-and-drop visual editor. To create a page, you just need to add the design elements (called widgets) from the widget panel to the canvas area. Elementor works on both post and page.
Three elements you need to know before you start creating your first page with Elementor:
- Widget: The actual design element you will use to create your page.
- Column: A smaller container to place the widgets.
- Section: The largest container to host columns and widgets.
To start using Elementor, simply create a page (Pages -> Add New) or a new post (Posts -> Add New). Give your page/post a title just like usual and click the Edit with Elementor button. This will open the Elementor editor.
Before you start to create the page, you can set the page layout first. To do so, click the gear icon on the bottom-left corner on the widget panel (panel on the left side). Set the page layout on the Page Layout option under the General Settings block.
You can select a layout according to the design concept you want to create. For instance, if you want to create a full-width page, you can select the Elementor Full Width option. Once done setting the page layout, add a new section by clicking the plus button on the canvas area. When adding a new section, you can select a column structure. There are twelve column structures offered by Elementor.
Once the section and columns are ready, you can start adding the widgets. There are over ninety widgets offered by Elementor which you can find on the widget panel. To add one, drag it from the widget panel to a column on the canvas area.
Editing a Section, Column, and Widget
After adding a section, column, or widget, you can edit it via the widget panel.
Editing a Section
To edit section, you need to turn the section you want to edit into an editing mode by clicking the section handle.
Once the section is turned into an editing mode, you can go to the widget panel to edit the section. There are three tabs you can work with (Layout, Style, and Advanced). Each tab consists of several blocks and each block contains several setting options.
Let’s take an example. Say you want to add a shape divider. To do so, go to the Style tab and open the Shape Divider block. Set the shape divider location (top or button) and select a shape divider you like. After selecting a shape divider, you can set the color, width, and height.
If you want to set the paddings and margins, you can open the Advanced block under the Advanced tab.
Editing a Column
Same as section, you need also to turn a column into an editing mode before being able to edit it. Click the column handle to turn a column into an editing mode.
There are also three tabs you can work with — Layout, Style, and Advanced. To set the column width, you can set the value on the Column Width option under the Layout block on the Layout tab. Or you can drag the separator on the canvas area.
To change the background color, you can Background block on the Style tab.
Editing a Widget
Turn a widget into an editing mode first before you start editing it. Click the widget handle to turn a widget into an editing mode.
The setting options available on a widget panel can be vary depending on the widget you edit. For instance, the Form widget has the following blocks on the Content tab.
While the Button widget has only a single block on the Content tab.
To style up a widget, you can go to the Style tab. Again, the blocks and styling options available on the Style tab are varied depending on the widget you are editing. The more components a widget has, the more blocks and styling options it offers.
Let’s take an example. Say you want to change the text color and the typography of the Button widget. Click the widget handle of the Button widget and go the Style tab on the widget panel. To change the typography (font size, font style, and family) click the pencil icon on the Typography option. While to set the text color, click the color selector on the Text Color option.
TIPS
To make it easier to jump between sections, columns, and widgets, you can use the Navigator feature. From the Navigator, you can also turn a section, column or widget into an editing mode by simply clicking it. The Navigator feature is pretty handy if you are creating a complex page that consists of several sections and tens of widgets. You can enable Navigator by clicking the sandwich icon on the bottom side on the widget panel.
Once you are done editing the page, you can publish it by clicking the PUBLISH button on the bottom side on the widget panel. You can also preview your page first by clicking the eye icon.
Elementor allows you to preview your page in three different device types (desktop, tablet, and smartphone). You can select a device type you want to preview your page on by clicking the device icon next to the eye icon.
To save your page as a draft, click the arrow icon next to the PUBLISH button and select Save Draft.
To return to the WordPress dashboard, you can click the three-line icon on the top-left corner on the widget panel and click the EXIT TO DASHBOARD button.
Working with Templates
In addition to creating a page from scratch, you can also create a page from a template. Elementor offers a bunch of premade templates you can use. There are nine template types offered by Elementor:
- Page template
- Section template
- Popup template
- Header template
- Footer template
- Single template
- Archive template
- Single product template
- Product archive template
How to Use an Elementor Template
On the canvas area of Elementor, you will see two buttons: The plus button and a button with a folder icon in it. Click the button with the folder icon to open the template library of Elementor. Search a template you want to use. Once found it, hover your mouse the template and click the INSERT button. The template will be loaded to the Elementor canvas.
In addition to using templates offered by Elementor, you can also use a template from a third-party source. Elementor allows its users to export a template into an external file in a JSON format.
How to Import an Elementor Template from a JSON File
There are two ways to import an Elementor from a JSON file.
1. Via Template Library
Open the template library by clicking the folder icon on the canvas area. Once opens, click the arrow icon followed by the SELECT FILE button to select the JSON file you want to import.
You can find the template you have just imported on My Templates tab on the template library. Reload the template by clicking the reload icon if the template you have just imported doesn’t appear. Hover your mouse over a template and click the Insert button to load it the Elementor canvas
2. Via Template Manager
From the WordPress dashboard, go to Templates -> Saved Templates. Click the Import Templates button followed by Choose File button to select the JSON file and click the Import Now button to import it.
How to create an Elementor template
There are also two ways to create an Elementor template.
1. Via Template Editor
Once you are done creating a page, click the arrow icon next to the PUBLISH button on the bottom side on the widget panel and select Save as Template.
Give your template a name and click the SAVE button.
After clicking the SAVE button above, you will be directed to the My Templates tab on the template library. Click the three-dot icon on a template and select Export to export it into a JSON file.
2. Via Template Manager
On the WordPress dashboard, go to Templates -> Saved Templates. Click the Add New button on the top side to create a new template. On the appearing dialog window, select the template type you want to create, give your template a name and click the CREATE TEMPLATE button. You will be directed to the Elementor editor to create the template.
Once you are done creating the template, click the PUBLISH button on the bottom side on the widget panel. To access the template you have just created, you can go to Templates -> Saved Templates. Hover your mouse over a template and click the Export Template link to export it into a JSON file.
The Bottom Line
The tutorial above is the very basic use of Elementor. You can use Elementor other than merely creating a web page. You can also use Elementor to create a custom header, custom footer, custom single post template, custom single product page (if you use WooCommerce), and so on. You can even use Elementor to create popups. We have some separate articles you can refer to.
