How to Use Elementor: Complete Guide

Today, we're going to show you how to use Elementor for building your website's pages and blocks.

Page Builders have become an integral part of web development for those with very little to no experience with designing websites.

One of the most popular page builders is Elementor which is available for free and with more features in premium mode.

How to Use Elementor Complete Guide

In this post we will make a case for why we believe Elementor to be the perfect page builder to get started with on your WordPress website:

Familiarizing Yourself with Elementor

That initial encounter the user has with your website leaves a lasting impression.

Whether you have opted to go for a retro or minimalist style or pooled your resources to create a vision of what webpages will look like in the future, in either case a WordPress page builder like Elementor is what enables to customize your website without any coding.

It is essential that you first install a theme that is compatible with Elementor.

We suggest taking a look at our recommended themes that have the highest compatibility with Elementor and offer options that would allow you to customize them even if you are using the Free version of Elementor.

It used to be that you designed your website using the available builder options offered by your theme.

Some themes lacked certain customization features, others were clunky and extremely difficult to customize for each page.

The Elementor page builder allows you to make changes to your website in real time without having to switch between the frontend and backend to check how your new changes were implemented.

You can install Elementor either by visiting their own website and later on uploading the downloaded zip file on your WordPress or navigating to the WordPress plugin repository and searching for “Elementor” and clicking on Install.

Make sure to activate the plugin and you are ready to explore all the options Elementor has to offer.

The Features Elementor Has to Offer

Fortunately, Elementor is a frontend editor meaning that you can see changes take effect in the moment and make adjustments.

Another indirect benefit is that due to its popularity, there is no shortage of resources available on YouTube or WordPress related website to help you get started such as this very guide.

Customization on Elementor is centered around widgets and once you get used to dragging and dropping your widgets on the page, you will find why this is much better than dealing with your theme’s default builder.

Every page on WordPress is made of sections and that is the basis of page building with Elementor.

There is a hamburger menu on the left side of your screen that enables you to make changes to the whole website while changes are reflected on the right side.

The drag and drop feature allows for a faster webpage building experience reminiscent of a design tool.

The only reason you will need a theme is because your website cannot operate without a theme and Elementor would not have anything to edit without a one.

Also, you still need the theme to edit your header and footer if you are planning on sticking with the free version of Elementor.

Elementor Free vs. Elementor Pro

The primary difference between them is in the number of widgets offered in the Pro version.

So make sure to check if you need them in your design.

And also the ability to edit your footer and header in Elementor comes in handy although if your theme already comes with a dedicated header and footer builder this may not be as useful.

In terms of widgets, these are the basic widgets available in the free version:

• Heading
• Image
• Text Editor
• Video
• Button
• Divider
• Icon
• Spacer
• Google Maps

These are some of the widgets available in the Pro version:

• Portfolio
• Form
• Flip box
• Price table
• Blockquote
• Call to action

All the useful information to make a final informed decision on whether or not to upgrade to Elementor Pro has been provided below.

But in general, we recommend you play around with the Free version until you are confident that Elementor is the best WordPress page builder for you.

	Elementor Free	Elementor Pro
Price	Free	$49,$99,$199/year
Number of Widgets	25+	50+
Page Builder	Available	Available
Theme Builder	Not Available	Available
Support	Not Available	Available
Dynamic Content	Not Available	Available
Pro Templates and Blocks	Not Available	Available
Integration with eCommerce	Not Available	Available

Ultimately, the reassurance of having the Elementor support team provide you with assistance in the Pro version is what makes us firm believer in the Pro version.

It does come with some niche features that you will be able to do with other plugins but why not do everything in a one-stop shop.

For example, the popup builder, dynamic options, conditions for where header or popups are visible, custom CSS, template shortcodes and widgets, custom fonts, and role manager.

Being able to assign and restrict roles to users on your WordPress allows them to go on with their work without compromising your design.

The client only gets access to editing the content of the page and cannot drag-and-drop add or delete any elements; this way your design is always protected.

The Editing Environment

When designing your first page using Elementor, you might be overwhelmed initially by the number of widgets and not have sketched out a design to put in place on the blank canvas; that’s where the Elementor page templates come in to play for those who feel less inspired in that moment.

Simply select a pre-made template from the vast list and insert it on to you page and customize it to suit your need.

The right side is your design playground where you can add elements that form the layout of your page.

Left side is a creative panel filled with widgets to drag and drop on the page.

You can either add sections and drag widgets to fit your design or opt for pre-designed templates.

In the bottom panel with the circular arrow icon takes you back to your history and the history is divided into actions and revisions; in actions you can retrace your steps and return to an earlier edit and under revision you can find all your saved versions.

Another benefit of using Elementor is quick access to different display modes so you can instantly check how your current design looks on different displays like tablet and mobile.

If you feel like designing a homepage, the blocks in Elementor will help you build your own page from scratch.

The Styling tab’s options (color, font type, size) allow you to customize the content in blocks to suit your needs.

There is also the extremely useful option of copying the style of an existing section and Paste it to change all blocks the same way.

Simple websites with static pages such as for portfolio are mostly static, however most websites have multiple pages (blog, webshop, search results).

These dynamic pages can be edited with either Elementor Pro or the theme’s options for example, designing your own header and footer.

The Pro version also comes with more blocks, templates and widgets.

On the backend you can also access their Tools menu which provides options like Replace URL, Maintenance Mode, and Version Control to return to a previous version if your website has run into an issue with the latest Elementor.

In Short, both versions allow you to build a page,  use editing tools, insert premade templates.

Elementor Pro Pricing

Judging by the above table, if you are convinced that Elementor Pro is the right choice for you, then the Elementor team has 3 different plans for you to get started with based on the number of licenses you need.

Conclusion

In general combining Elementor (free or Pro) with a powerful theme that covers its blind spots, is the right way to go in most instances.

So make sure to check out our list of suggested themes to use alongside your new page builder.