How to Get Started With Elementor 2023 (Free & Updated)

Creating a user-friendly website and customizing it to match your brand does not have to be a headache. And it should not break your budget with expensive website developer fees.

The Elementor page builder makes it easy to build your pages and improve the efficiency of your WordPress website.

It comes with drag-and-drop functionality, numerous content elements, and impressive design capabilities. This enables you to build unique and impactful pages.

If you need a little help to boost your creativity, there are pre-made templates to help you.

It works from the front-end. You see the outcome of your changes instantly, without having to preview first. You don’t have to worry about giving up your favorite WordPress theme, Elementor works well with all of them.

This awesome tool is also affordable. The basic Elementor plan is free. It comes with the drag and drop page builder and 30 basic widgets.

Here’s a quick index to help you navigate this article:

Elementor Dashboard Overview
Elementor Section, Columns and Widgets Explained
Extra Options for Elementor Sections, Columns, and Widgets
What Are the Content, Layout, Style, and Advanced Options?
Wrap Up

Let’s help you get started.

Elementor Tutorial: Elementor Dashboard Overview

After installing the Elementor page builder, we will become familiar with the Elementor dashboard.

To get started with Elementor,

At first login to your WordPress dashboard.
Go to Pages >> All Pages >> Home (You can select any page) >> Edit
Click the Edit with Elementor button.

You will see a dashboard like the one below. It is the Elementor dashboard. We will do everything from here.

Let’s learn how this works.

Here we will explain all the elements one by one according to the numbers you see above. Follow along as we explain the sections:

1. Elementor Settings: You can change the settings from here.

2. Action Menu: When you work with Elementor options, it will show “Elementor” text here. When you edit a section, column, or widget, the text will change to “Edit Section”, “Edit Column” or “Edit Widget (Widget Name)”. With that, you can easily see which one you are editing.

3. Widgets Library: If you click on the icon, the widgets library will appear on the left side. You can quickly go to the widget library by clicking here.

4. Page Settings: It is also called Single Settings. Here you will find the option to change the “page title”. You can change the page status by making it publish, pending review, draft, or private.

The most important thing is that before you start designing a page, you have to set up the “Page layout”.

Here you will find 2 options –

Elementor Full Width
Elementor Canvas

When you first start editing with Elementor, by default you will find the page layout looks like the image below. It is called “Elementor Full Width”.

If you want to use the menu and footer, you can keep editing with this.

However, if you want to create a new menu and footer, you have to select “Elementor Canvas” from the Page Layout option. Then it will look like a blank page:

5. Quick Navigator: When a web page contains lots of elements, you may face difficulty when trying to select, navigate, or drag them easily to different places. If you use the quick navigator, a popup will appear on the right side for quick navigating.

Here every element’s name that you’re using will be visible in the popup. It will become a handy tool at that time for solving this kind of problem.

6. History: In this section, all the version histories are recorded. You can see every stage of editing that you did. It is very easy to go back to any action that you made while editing.

7. Responsive Checker: One of the most important things when creating a page is website responsiveness. Using this section, you can see and edit your web page for responsiveness on desktop, tablet, and mobile devices in a few simple steps.

8. Preview: Preview the site at the time of editing so that you know what the final product will look like.

9. Publish or Update: This is to publish and update the changes that you made.

10. Save Options: This will let you save a web page as a draft or as a template. If you save any page of your design as a template, you can use it later on other web pages or websites.

Elementor Section, Columns and Widgets Explained

Elementor works with 3 basic components:

Sections
Columns
Widgets

You need to understand how each one works.

If you want to divide a section into columns, simply click on the “+” sign. Then you will see a popup like the image below. Select any of them to divide a section into columns.

Here we are dividing the section into 3 columns. After this, you will see the picture that is presented below:

1. Section

Here the Blue Outline is called a section that contains three columns.

To edit a section click on the icon with six dots that we have pointed out above.

Next, section edit options will appear in the left sidebar.

2. Column

The Dot-dashed outline with the “+” icon is a column.

To edit a column, click on the icon that we have pointed to here:

The column edit options will appear in the left sidebar when you click on the icon, just like with sections.

3. Widgets

Finally, we need to learn about using widgets. Pick up the Video widget and drag the widget from the left side to the right side. Then drop it in the middle column.

By default, Elementor has included a youtube video link on the widget. You can remove the link when you want and insert a new link.

To edit a widget, click on the icon (like a pen or pencil) that we have pointed to below:

Click the icon, and you will find options on the left side to edit the widget.

Extra Options for Elementor Sections, Columns, and Widgets

To find extra options for sections, columns, and widgets, hover over the area you want to edit (section/column/widget). Next, click the right button on your mouse. You will see a popup like this:

The extra options will help you to edit, duplicate, copy, or delete the section, column, or widget. You can also save them as “Global” or “template”.

You will be able to use this global widget on multiple areas of your site and edit it from one single place.

When you set a section as a template, next time the design will be available in your Elementor template library for export and reuse on any page or website.

Use the Quick Navigator option from here. It will look like this:

You can change the element position by simply scrolling up and down using the Navigation bar. It will become a very useful tool when you have a lot of elements and widgets on a single page.

What Are the Content, Layout, Style, and Advanced Options?

At the time of editing, you will see that there are different types of tabs to edit a “section, column, or widgets”. These tabs are- “Content, Layout, Style, and Advanced”.

Under each tab, there are lots of options available which are called properties in CSS.

Style and Advanced tabs are available for all sections, columns, and widgets. Layout, however, will be found only for editing columns and sections.

Instead of Layout, you will find a Content tab for all widgets.

Content: Here you have to provide your necessary content like text, image, video, etc., which you will upload into a widget. You can set their size, actions, and various values relating to their properties. The “Content” tab will be available only at the time of editing widgets.

Layout: It controls the size and action of sections or columns. It also determines the position of columns and widgets under a section or column.

Style: This button changes the face of a widget. What will be the color, width, border, opacity, and many other properties of a widget?

The Style section is where you can set different values under the same properties, such as normal and hover.

Advanced: From the advanced options you can change the position of widgets, columns, or sections. You can set the margin value, padding value, motion effects, background action, etc.

Wrap Up: How to Get Started With Elementor

The Elementor page builder is an excellent tool for beginners for five main reasons.

There are no coding skills required
It has excellent design capabilities enabling you to customize your site to your taste
As you design your pages, you get to see the website as your visitors will see it
It provides detailed settings, giving you control over the overall design of your pages.
You can save your pages as a template for future use, and this saves time.

Our detailed tutorial has everything you need to get started with building professional web pages that represent your brand well. In case you need any help, simply leave a comment below.

If WPCITY‘s this post helped you, kindly share it on Facebook, Twitter, and LinkedIn.

Others Elementor Tutorials:

Elementor Tutorial for Beginners: How to Get Started With Elementor 2023 (Free & Updated)

Elementor Tutorial: Elementor Dashboard Overview