Elementor: Getting Started

  • 8 min read
  • by

Introduction

Elementor is one of the most popular page builder plugin for WordPress. Instead of a pre-fixed layout provided by a WordPress theme, Elementor allows you to create posts and pages with customized layouts and designs. We’ve written about Elementor and Elementor Pro’s features in a previous post, where we cover the plugin’s features. So in this article, we will help you get started with Elementor.

To get started, you can just use the free version of Elementor. If you want to try the plugin and want to see if works for you then you can follow this article to see how the page building plugin works.

With that, let’s begin!

Installing Elementor

To get started with Elementor, we first have to install it. Thankfully this is easy enough to do. We can install it through the admin dashboard.

Search for Elementor Website Builder

Once you’ve installed Elementor, you can start using it without any further configuration.

Creating Your First Elementor Page

We’re first going to create a page with Elementor. To do this, go to the WordPress admin dashboard and create a new page.

add a new page

When redirected to the block editor, click on Edit with Elementor.

Click: Edit with Elementor

This will redirect you to the Elementor’s page builder interface. On the left you can see the widget panel, where we can see the different widgets that are available. On the right, you can see the page editor. Here you can see a Drag Widget Here area. This is the area where we place Elementor widgets in.

the Elementor page builder interface

You may notice that our page is initially crowded, and you may want to change that. To do that, click on the gear icon, highlighted in red on the image below.

click on the gear icon

We’re going to be using the Elementor Full Width Page Layout. This layout has removed the sidebar and gives a wider area, where we can drag widgets.

Settings: click Elementor Full Width

Adding Elements to a Page

Now that we know how to create an Elementor Page, we can now add Elements (this is how Elementor refers to its widgets). It’s really easy to add a widget. Just drag the widget in the Drag Widget Here also known as the add section area:

add an element

Dragging a widget places inside a section. A section is outlined in blue as can be seen in the image below.

a blue outlined section

We are not limited to adding one element per section, we can add more if we need to:

add text editor

By default, a section is composed of one column. However, Elementor also allows us to use multi column layouts. You just have to click on the Add New Section button, then choose the structure you would like to use. In our example below we will be choosing a two column layout:

choose a structure

After doing that, you can drag elements onto the columns like how it was shown before. In addition, you can also adjust the columns sizes too:

drag elements

We can also edit the contents of the elements by clicking on it. This would open the element’s Content tab appear in the side panel. In our example below, we will be editing the content of a text element:

editing a text element

Styling Elements and Sections

In addition to adding Elements, we can also style the elements. To do that, we have to click an element. then click on the Style tab. Once there, we can choose the property we want to style, the configure it. For instance, in the below, we will be editing an image so that its box shadow is more visible:

add a shadow

Aside from elements, we can also edit sections too. Here in our example. we will be giving the section containing an image a shape divider:

editing sections

Advanced Element and Styling Configurations

Aside from styling, we can configure the elements to have more advanced features which can be accessed in the Advanced tab. For instance, we can configure an element so that it has animation effects as seen below:

advanced features

Sections have advanced configurations as well and they can be accessed by clicking on the section and going to the Advanced tab. In our example below, we added an animation in the section we needed to:

add an animation

Preview Changes

With Elementor, our page looks exactly the way we edit it. But we can preview the changes to see what they look like when the page is visited. To do this, click the Preview Changes link as can be seen below:

click the preview changes link

Here’s what our page looks like when we preview it:

preview

Save as Draft

Are you creating or editing an Elementor page and would like to save it as a draft? You can also do this as seen in the image below:

save as draft

Elementor Templates

The last feature you need to know to get started with Elementor is the use of pre made templates. You can use these templates to create your pages instead of creating them from scratch. To use templates, we have to click on the Add Templates button in the add section area:

add templates

There are templates for blocks:

blocks templates

And there are templates for whole pages as well:

whole pages templates

Here’s one page template for instance:

an example - the template coffee & more

A note though. If you’re not using Elementor Pro, you won’t be able to use all templates.

In addition, you can also create your own templates. You can choose a section and save it as a template:

create your own template

Or even the page itself if you need to:

sava as template

The saved templates can be found in the My Templates tab of the Templates Tab:

my templates

Publishing Your Page

Finally, once you think the page is ready, you can publish it:

publish your page

Conclusion

We’ve now come to the end of our tutorial. Now you know how to create a basic page with Elementor. You know how to add, style, and configure elements and sections. You can now, finally create your own pages an utilize Elementor’s capabilities.

One final word. We’ve seen what Elementor is capable of, and how powerful it is. However, many of its features are only available on Elementor Pro, which includes more widgets, templates, and more designing capabilities. If you like Elementor and want to use it, we suggest you go Pro!

In our next Elementor Tutorials, we will be using Elementor Pro since we will be using features that are only available on Pro. Be sure to upgrade to pro if you want to learn more about what it can do!

Thank You for reading!

nv-author-image

Kristin Eitel

Leave a Reply

Your email address will not be published. Required fields are marked *