Elementor is an all-in-one WordPress page builder plugin that makes creating stunning websites easier. With its intuitive drag-and-drop interface, users can create beautiful and responsive pages in no time. Elementor also has a variety of templates and widgets to further customize your website’s look and feel.
The beauty of Elementor is that it takes away the hassle of coding while still allowing users access to powerful design features like custom fonts, full page layouts, animations, parallax backgrounds and more. It also offers extensive documentation so anyone can learn to use Elementor quickly and easily.
It comes in two versions; the free version, just Elementor and the premium version, Elementor Pro. So if you want to test it out and see if it’s the right fit for you then try out the free version which can be downloaded from the plugins section.
Elementor Pro comes with a form builder, pop-up builder, extra widgets and themes. If you plan on using it as your main page builder, then I recommend purchasing the pro version.
In this tutorial, we’ll focus on using Elementor Pro.
Getting Started with Elementor
Purchase Elementor Pro Plan
Go to the Elementor plugin pricing page and click on Buy Now on the plan you want to purchase.
Fill out the purchase form and click on Pay now on the right hand side.
Once you complete the purchase, you’ll receive an email with your login information.
Download Elementor Pro Plugin
1. Go to the Elementor website and click on LOGIN in the upper right.
2. Enter your email address and password and click on Sign in.
3. Click on Subscriptions on the left hand side.
4. Click on the Download Zip button, which will download a zip file onto your computer.
Install Elementor Plugins
To set up Elementor Pro successfully on your WordPress site you’ll need two plugins: Elementor (free) and Elementor Pro (which we downloaded in the above section)
1. Log into your WordPress site and click on Plugins -> Add New from the Admin sidebar.
2. Add Elementor into the search bar and hit Enter.
3. Click Install Now, on “Elementor Website Builder”.
4. Still on the “Add plugins” page, click on Upload Plugin.
5. Click Choose file and select the Elementor Pro plugin zip file you downloaded from the site.
Then click Install Now.
6. Click on Installed Plugins from the Admin sidebar.
And at this point, you should see two Elementor plugins: Elementor and Elementor Pro.
Go ahead and activate both plugins.
Connect and Activate Elementor Pro
1. Once you’ve activated both plugins, click on Connect & Activate on Elementor Pro.
2. Log in with your Elementor account or click on Activate if you’re already logged in.
This will activate your license, so you won’t have to copy over keys manually.
If you need to disconnect or switch accounts, go to Elementor -> License to manage license settings.
Use Elementor on Pages
Now you’re ready to use Elementor to build pages. Let’s go ahead and build a Contact Us page.
1. Click on Pages -> Add New.
2. Add Contact us as the title and click on Save draft.
3. Then click on Edit with Elementor, this will open the Elementor editor and we can get started building.
Using the Elementor Editor
Once the Elementor editor has loaded you should see the following below:
Your site might look a little different depending on your WordPress theme.
The editor is similar to the block editor. Instead of dealing with blocks, you drag-and-drop widgets from the left into the region where it says Drag widget here.
From the left column, you can see all the available widgets.
You can even search for widgets by name using the “Search Widget…” text field.
1. When you’re ready drag-and-drop the Heading widget by clicking on it in the left column and dragging it to the right.
2. You can change the text using the Title field from the left column. Change the title to “Need Help? Contact us NOW!”.
Widget Tabs
Every widget will have a Content, Style and Advanced tab.
Content
The fields in the Content will vary depending on the widget. But this is where you change the content details of the widget.
Style
The Style tab allows you to change the look-and-feel of the widget. Again, the options will vary depending on the widget.
Advanced
From the Advanced tab, you can modify the widget’s advanced options. The option on this tab generally stays the same across all widgets.
Some useful advanced options are:
- Modifying the margin and padding.
- Changing the background color or image.
- Adjusting responsive settings.
However, the most valuable options on Advanced are Margin and Padding.
Sections, Columns and Widgets
Content in Elementor is broken down into sections, columns and widgets. We’ve already covered what a widget is, so let’s discuss sections and columns.
When you click on the + icon on the right. It’ll add a new section.
Then you select which columns you want in the section.
Once you have chosen the columns, then you can drag widgets in the columns.
If you drag-and-drop a widget directly into Drag widget here, like we did with Heading, it’ll automatically create the section and a single column for you.
Both sections and columns have their own tabs; Layout, Style and Advanced.
The most common option you’ll modify is the margin and padding which is under Advanced.
Elementor Editor Navigator
Navigating between the sections, columns and widgets can be tricky if you simply click on a widget.
Elementor has a handy navigator pop-up, which you can turn on by clicking Navigator at the bottom.
Using the navigator you can jump directly to all the elements.
If you right click on one of the elements you get even more options. You can edit, duplicate, copy, paste and delete.
When building large landing pages the navigator is a handy and must-have feature.
Page Settings
You can modify some page options by clicking on Settings at the bottom.
From Settings, you can change the title, status, featured image, page layout and more.
You can add custom CSS by clicking on the Advanced tab which can be useful when you need to tweak things slightly.
History
You can view all the changes to the page by clicking on the History icon.
You can view all the actions within Elementor and revert them.
And if you click on Revisions, you can see the WordPress post revisions.
Responsive Mode
You can test the page using different breakpoints by clicking on Responsive Mode.
This option will add a toolbar at the top, where you can switch between desktop, tablet and mobile.
Build Contact Us page Using Elementor
Now that you understand the Elementor editor well let’s create a contact us page.
You want to start off with a blank page, so delete any widgets you may have added to the page.
Full-width Heading
1. Add Heading into the page.
2. Add “Need help? Contact us NOW!” into Title.
3. Click on the Edit Section icon by hovering over the heading.
4. Change Stretch Section to YES.
5. Click on the heading and center align it.
6. Click on the Edit Section icon, then Style.
7. Expand Background, click on Classic as the background type, click on the color picker.
8. Change the section color background to black or #000000.
You should see the heading background change color.
9. Click on Style on the heading widget and change the text color to white or #FFFFFF.
10. Still editing the heading, click on Advanced. Click on PX next to Padding in the Layout section and choose EM.
11. Add 5 into the TOP padding, which should automatically appear in the other three.
The height of the title should increase.
Full-width Heading Responsive Options
Some options in Elementor can be changed for a specific device. If an option has a desktop icon, you can adjust the settings for desktop, tablet and mobile.
1. Click on Tablet and the editor will show you a tablet version of the page.
2. Change the padding from 5 to 3.
This will make the heading height a little smaller, which you want on a tablet device.
3. Click the Mobile, and change the padding from 3 to 1.
Two-column Grid
Let’s continue building out the page by adding a two-column grid.
1. Click on Add New Section.
2. Select the two-column grid option.
3. Search for the Icon Box widget and move that into the left column.
4. Select an icon by clicking on “Icon Library” and add Hosting into Title and “We offer custom hosting.” into the Description.
5. Add another Icon Box and update accordingly.
6. Select the first Icon box and click on Style and change the Primary Color to black (#000000).
The color of the icon should be different.
Go ahead and change the color of the other icon.
7. Select the parent section of the columns.
Click on Advanced and add 30 into TOP. It’ll automatically add the same value to BOTTOM.
This will add a bit of margin above and below the section.
Form Widget
The final widget we’ll add is the Form widget
The final element we’ll add to the page is a form. Elementor Pro comes with a form builder that can be used to capture leads and newsletters. It can be configured with popular email providers.
We’ll use it for a basic contact us form.
Find the Form widget and move it onto the page.
You should see a basic form with three fields and a submit button appear.
Add Fields to Form
Edit the form and under the Content tab you’ll see Form Fields where you can add and manage the fields.
1. Change the Form Name to Contact us.
2. Click on Name and change the Label and Placeholder from Name to First name.
3. Click on ADD ITEM, and select Text from Type.
4. Add Last name into Label and Placeholder.
5. Reorder and move the field so it’s below First name.
NOTE: To get on top of spam you can add reCAPTCHA or a Honeypot item to the form.
Change Form Button
The default button color isn’t on brand let’s change the color of the button.
1. Click on the button, which’ll select the form widget, click on Style then expand Buttons.
2. Change the “Background Color” on “Next & Submit Button” and “Previous Button” to black.
Handling Form Submissions
Once you have your form built you need to handle the submissions. Elementor allows you to specify actions after the form is submitted. By default it’ll collect the submissions and send an email.
But you can configure Elementor to send the submissions to a 3rd party mail provider such as Mailchimp, a Webhook or even do a simple redirect.
You can see all the available actions by clicking “Actions After Submit”.
We’ll stick with the default which is “Collect Submissions” and Email.
Submission Email
If you expand Email you can modify the To, Subject, Message and more.
You want to ensure you have configured your WordPress site to send emails. The server handles this.
Form Submissions
If you click on Collect Submissions, you’ll see a link to the Submissions pages.
Click on View to view the details of the submissions and all the fields.
Review and Test Contact Us Page
1. Once you’ve finished building your page scroll to the bottom and click on PUBLISH or UPDATE.
2. Go to the page and you should see a working Contact Us page with a heading, icons and form.
Templates
Elemental Pro comes with pre-built templates for widgets and pages which can help you quickly build landing pages.
Click on the Add Template button in the Drag widget here section to access all the templates.
Click on the Category drop-down to see all the templates.
Click on Pricing and you’ll see block templates (configured widgets) for pricing pages.
To use a template hover over one and click INSERT.
Then you can go and modify it like any other widget.
You should spend a little time looking through all the templates because there are some useful ones.
Summary
If you’re looking for a powerful page builder in WordPress then Elementor is for you. Elementor Pro has a form builder and pop up builder to capture emails. This means you can save money by not needing to purchase extra plugins.
Frequently Asked Questions
What is Elementor used for?
Elementor is a drag-and-drop page builder for WordPress. You can use it to create custom pages and posts.
Is Elementor for WordPress free?
Yes, a free version of Elementor can be downloaded from the plugin directory. You can use it to create unlimited pages.
What is the difference between WordPress and Elementor?
WordPress is the content management system that Elementor runs on. Elementor itself is a plugin for WordPress.
Which is better Wix or Elementor?
Elementor is built on top of WordPress. A WordPress site can be moved from host to host and it’s open source. Wix is a Saas (software-as-a-service) website builder.
