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.
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.
When redirected to the block editor, click on 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.
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.
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.
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:
Dragging a widget places inside a section. A section is outlined in blue as can be seen in the image below.
We are not limited to adding one element per section, we can add more if we need to:
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:
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:
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:
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:
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:
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:
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:
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:
Here’s what our page looks like when we preview it:
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:
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:
There are templates for blocks:
And there are templates for whole pages as well:
Here’s one page template for instance:
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:
Or even the page itself if you need to:
The saved templates can be found in the My Templates tab of the Templates Tab:
Publishing Your Page
Finally, once you think the page is ready, you can publish it:
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!
