How to Use Elementor: The Complete Guide

by PassGuy | Elementor

Do you have problems getting started with the Elementor plugin ? Here is the complete guide on how to use Elementor

Today we are going to show you how to use Elementor to create the pages and blocks for your website.

Page builders have become an integral part of web development for those with little or no experience in web design.

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

In this article, we'll explain why we think Elementor is the perfect page builder to start with:

Getting to know Elementor

The user's initial encounter with your website leaves a lasting impression. Whether you've gone for a retro or minimalist style or pooled your resources to create a vision for what web pages will look like in the future, in either case, a WordPress page builder like Elementor is what. which allows you to personalize your website without any coding.

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

Read also: Can you use Elementor without a theme? (No - Here's why)

In the old days, you would design your website using the available design options offered by your theme. But some themes lacked certain customization features, others were clunky and extremely difficult to customize for each page.

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

You can install Elementor either by visiting your own website and later by uploading the zip file to your WordPress or browsing the repository of WordPress plugins and searching for “Elementor” and clicking on Installer.

Make sure to activate the plugin and you'll be ready to explore all of the options Elementor has to offer.

Read also: How to install Elementor

The features that Elementor has to offer

Fortunately, Elementor is a frontend editor, which means you can see the 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 website to get you started. This article is an illustrative case of these websites.

Personalization on Elementor is all about widgets and once you get used to dragging and dropping your widgets onto the page, you'll find why it's much better than dealing with your WordPress theme's default page builder.

Insert a Paypal button widget

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

There is a hamburger menu on the left side of your screen which allows you to make changes to the entire website while the changes are reflected on the right side.

The drag and drop feature allows for a faster web page building experience that is reminiscent of a design tool.

The only reason you'll need a theme is because your website can't function without a theme, and Elementor wouldn't have anything to change without one.

Read Can you use Elementor without a theme? (No - Here's why)

Also, you still need the theme to change your header and footer if you plan to stick with the free version of Elementor.

Elementor Free vs. Elementor Pro

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

So be sure to check if you need it in your design.

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

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

  • Internal section
  • Image
  • Text editor
  • Video
  • Button
  • Separator
  • Icon
  • Divider
  • Google Maps

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

  • Portfolio
  • BUILD YOUR VIRTUAL TOUR
  • Flip Box
  • Price list
  • Quote Block
  • Call to action

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

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

Elementor Free Elementor Pro
Price free $ 49 to $ 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
E-Commerce integration not available available

Ultimately, the reassurance of having the Elementor support team providing support in the Pro version is what makes us firmly believe in the Pro version.

It also comes with some niche features that you will find in other plugins, but why not do it all in one stop.

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

Being able to assign and restrict roles to users on WordPress allows them to get on with their work without compromising your design. The customer only has access to the modification of the content of the page and cannot add or remove elements by dragging and dropping; this way your design will always be protected.

The editing environment

When designing your first page using Elementor, you might be overwhelmed at first with the number of widgets and not have sketched out a design to put on a blank canvas; this is where Elementor page templates come in for those who feel less inspired at the moment.

Just select a predefined template from the huge list and insert it on your page and customize it according to your needs. The right side is your design playground where you can add elements that form the layout of your page.

The left side is a creative panel filled with drag-and-drop widgets on the page.

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

Read also: How to add hover effect in Elementor via custom CSS

In the lower panel you will find the circular arrow icon which takes you back to your history and is divided into actions and reviews; in actions you can find your steps and revert to an earlier edition and under review you can find all your saved versions.

how to use Elementor

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

If you fancy designing a homepage, Elementor's Blocks will help you build your own page from scratch.

Read also: How to add hover effect in Elementor via custom CSS

Tab options Style (color, font type, size) allow you to customize the content of the blocks according to your needs.

There is also the extremely useful option of copying the style of an existing section and pasting from there to edit all the blocks in the same way.

how to use Elementor

Simple websites with static pages, like for the portfolio, are mostly static, but most websites have multiple pages (blog, online store, search results).

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

See also: How to activate Coming Soon mode in Elementor

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

On the backend, you can also access the Tools menu which provides options like Replace URL, maintenance mode, and version control to revert to a previous version if your website encountered an issue with the latest Elementor.

In short, both versions allow you to create a page, use editing tools, and insert predefined templates.

Elementor Pro Price

Judging from the table above, if you are convinced that Elementor Pro is the right choice for you, the Elementor team have 5 different plans for you to get started depending on how many licenses you need.

Ultimately

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

Other additional premium WordPress plugins 

Also discover other WordPress plugins premium that optimize the performance of your WordPress blog or website.

1. Foodify

Foodify is the fastest and easiest way for customers to order food from a store. It is entirely responsive and includes additional features like image, search option, product information. Foodlify restaurant food menu for woocommerce

It also adds buttons to the basket to improve the user experience. This WooCommerce extension is a fast, comprehensive ordering solution that can be added to any WooCommerce website.

here for you 5 WordPress plugins to optimize category descriptions and labels

It has the advantage of being very flexible and compatible with many existing plugins in the WordPress directory.

Download | Demo | Web hosting

2. Pan Zoom Image

This plugin allows you to easily add a panoramic zoom feature for images on your WordPress blog via a shortcode. You can for example integrate it in your article or your page.

Image zoom pan wordpress plugin for zoom

As functionalities, you will have among others: the panoramic zoom on a single image or a gallery with unlimited images, the position of the control bar can be top, right, bottom and left, the bottom of the container can be dark, light and none of that; the live preview in the dashboard, the example of multiple pan zooming on the same page, etc.

Discover also our 5 shortcodes premium WordPress plugins

Download | Demo | Web hosting

3. Slider Pro

The Slider Pro solution offers you an all-in-one platform to help you create and edit slides or sliders that will appeal not only to bloggers, but to those who do not just publish articles.

Slider pro responsive wordpress slider plugin

Ce WordPress Plugin premium avoids unnecessary frills, which are often an obstacle for users who are looking for the information they need. Additionally, it focuses on the simplicity and performance, while offering a wide range of customization possibilities.

See also How to create a slideshow with Slider Revolution on WordPress

His management of Urls on the search bar of the browser is one of the features that stood out for us on the latter. As the name suggests, this is the professional solution you need.

Read also our 5 WordPress plugins to create FAQs on a blog

Its features are: optimized image loading, easy customization, smooth animations, multiple layouts and more.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here ! That's it for our article that shows you how to use Elementor in WordPress. If you have comments or suggestions, do not hesitate to let us know in the reserved section.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks. 

... 

Submit comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.