What Is Elementor

Elementor helps you create beautiful pages using a visual editor. It is a drag-and-drop page builder for WordPress.

With this WordPress plugin, you have access to a one-stop shop for managing every aspect of the look and feel of your website. Motion effects, numerous fonts, and improved background images can all be added to your website to make it more branded.

Why You Should Use Elementor

All the professionals on your team can use Elementor in wordpress. The visual editor allows you to drag any of the over 90 widgets, such as buttons, star ratings, and progress bars, to create content even if you are not tech-savvy. With its rollback versions, custom attributes, and script optimization, WordPress is still the platform of choice for developers.

What Can You Build With Elementor?

Elementor is a powerful tool for creating anything, including complete websites and specialized landing pages. You can create custom forms as well as sales and promotion pages. This platform can help you create anything if you can imagine it.

Is Elementor free?

Along with several paid subscription plans, it provides a free one. The free version includes a drag-and-drop editor, 40+ fundamental widgets, and 30+ templates, as well as all the features you need to build a robust user experience on your website.

You can upgrade to the pro version if you want access to more sophisticated features like the capacity to add forms and unique CSS. The tiers of Elementor pricing are as follows:

  • 1 site - $49/year
  • 3 sites - $99/year
  • 25 sites - $199/year
  • 100 sites - $499/year
  • 1,000 sites - $999/year

Don't you know what plan to pick? Elementor has an easy-to-scan detailed list of pro versus free features.

How to Install Elementor

Installing Elementor is quick and straightforward, like other WordPress plugins. It can be installed in two ways.

  • Via
  • Via WordPress Dashboard

We will focus on "via WordPress Dashboard" because it is effortless and straightforward.

Installing Elementor via WordPress Dashboard

Installing via the WordPress dashboard is done in 3 simple steps.

Step 1: Click Plugins > Add New from your dashboard.

Step 2: Enter Elementor and locate Elementor Website Builder in the search field.

searching elementor in wordpress dashboard to install now

Step 3: Click Install Now. After installation, click Activate.

Elementor plugin card inside WordPresss plugin library with a button saying Activate

Your sidebar will be automatically updated with the page builder. However, you cannot edit your pages using this sidebar menu item; it is only used to access Elementor's backend settings.

Elementor added to sidebar in WordPress dashboard to configure back end

How to Use in WordPress

With Elementor, you can turn your design vision into reality. It allows you to view each element as you design it. This makes the process of live editing painless. Let’s explore the use of the Elementor editor.

Elementor Tutorial

Users can access an intuitive design with Elementor. Therefore, you can quickly learn the editor's fundamentals.

Step 1: Create a new page or post and click Edit with Elementor.

WordPress page with Edit with Elementor button in top toolbar

Step 2: The Elementor page editor will open, and this is how your page will look:

Elementor page editor in editing view with a widget library to the left and the pages content to the right

Step 3: You can build your website using the drag-and-drop features in the Elementor sidebar located on the left.

You must be aware that the Elementor editor consists of 3 primary building blocks: Sections, Columns, and Widgets. The most noticeable building block is a section. You can add groups of Columns to Sections, and Widgets are stored inside Columns.

The editor will highlight Sections and Columns in a blue box to indicate where you can drag a widget. Remember that you cannot drag a widget into the heading or the navigation bar.

Elementor editor with a section highlighted in blue, ready for editingThe blue handle controls the Sections, Columns, and Widgets. Right-click the handle to edit the blocks.

Elementor section editor menu with several options, including Duplicate, Save as Template, and Delete

Step 4: When ready, click, hold, and drag a widget to where you want to add the new module. For instance, you can drag a widget into a free space when you scroll to the end of the page.

The bottom of the Elementor page editor includes an empty section with the text _Drag widgets here_

Step 5: To make your pages more unique, you can search for particular widgets. Explore more sophisticated features, such as animated headlines and testimonial carousels, or pick from essential components, such as a heading or image gallery.

search bar for widgets in Elementor dashboard

Step 6: By clicking the hamburger menu in the left corner, site Settings can be accessed. You can modify your pages' default fonts and colors in this menu. Additionally, Elementor allows you to set global preferences for your entire website.

site settings menu in elementor dashboard includes options for design system, theme style, and settings

Step 7: Finally, by clicking on the History icon at the bottom of the panel, you can access Elementor's built-in Revision History section. You can track your changes by switching back and forth between each action under the Actions tab. You can navigate your revisions and return to any earlier version under the Revisions tab.

Revision History section in Elementor dashboard

Building Your First Page in Elementor

Due to its simplicity of use, Elementor stands out among its rivals. You can try it out by creating your first page on the platform; no coding knowledge is necessary.

Step 1: Navigate to your WordPress dashboard.

Step 2: Click Add New after clicking Pages.

Step 3: To enter the page builder, click Edit with Elementor.

Step 4: Elementor will look like this when it loads:

Elementor page editor with a widget library to the right and the new page's content to the left

Step 5: Next, add a Text Editor, Image widget, and Heading.

User drag-and-dropping a heading widget into an editable column inside the Elementor page editor

Step 6: You can edit each widget as much as you like after dragging it into position. To finish, click the green "Publish" button. Your first page in Elementor has been constructed.

Step 7: You can preview and publish your page when you’re done designing. Start by going to the panel on the Elementor editor's left side.

Step 8: Click the eye icon to preview your page.

Step 9: Click the green Publish button to publish.

Elementor Templates

Pre-made Pages and Blocks are templates and can be used to design your WordPress website. Blocks are sections with pre-built widgets, such as footers, headers, and FAQs, whereas Pages are complete content layouts.

You have full permission from Elementor to use any of the templates for your company. A field is available for searching for particular templates by tag, name, or page type. Additionally, each template is mobile-responsive. With a single click, you can insert them into any page.

Step 1: From within the Elementor editor, go to the section at the bottom of the page that says Add widget here. Click on the white folder.

New page inside the Elementor page editor with a box that says "Drag widget here" and a button with a white folder (which should be clicked to reach the template library)

Step 2: A library will load. Click the magnifying glass icon on the image to view a template in preview mode. Or hover over one.

Elementors template library with various page templates to choose from

Step 3: Click the green “Insert” button.

Step 4: You will be prompted to connect to the template library of Elementor if you haven't already. You will be automatically redirected to Elementor's website so that you can sign up or log in.

Page prompting user to connect to Elementor template library

Step 5: Your connection will be verified after logging in or registering.

Step 6: Go back to the revised page and insert the template of your choice.

Finished! Your template is set and ready to be customized.

How to Use Advanced Features in Elementor

The pro version of Elementor provides cutting-edge features to advance your WordPress website. More widgets, a theme builder, a pop-up builder, and custom field functionality will become available.

How to Create a Popup in Elementor

Pop-up forms make it easier to collect email addresses from leads. Complete your popup by following these steps.

Step 1: In your WordPress dashboard, select Templates > Popups > Add New.

Step 2: Click Create Template after giving your template a name.

Step 3: Create your design or select a template from the Library.

Step 4: Click "Publish", save, and then exit.

Step 5: Launch Elementor and create a new page (CTRL + E on a PC; Command + E on a Mac).

Step 6: Drag a button widget into the window.

Step 7: Click Link > Dynamic > Actions > Popup, under Layout.

Step 8: Select your created popup by going to Popup > Open Popup.

Step 9: Go to the live page.

Step 10: Then click the button to see the popup window.

It might look something like this:

User creating a popup inside the Elementor page builder and testing it out in the live pageImage Source

Customizing WooCommerce Product Page in Elementor

WooCommerce is a well-known e-commerce platform that can assist you in creating an online store for your company. To increase your sales, you make personalized product pages using Elementor.

Installing and activating Elementor and WooCommerce on your WordPress dashboard are prerequisites before you can customize your product page. You should also include a few products on your website.

After setting everything up, you can design your product page. Follow these steps.

Step 1: Go to Elementor > My Templates in your WordPress dashboard.

Step 2: Click Add New.

Step 3: Select the Single Product template type, then click Create Template.

Form to create single product template in elementor dashboard

Image Source

Step 4: The Elementor Library will load.

Step 5: Create a product page from scratch or select a predesigned template.

Elementor product page templates with various options to choose from

Step 6: Add various product widgets to the template to customize your page. You can find the complete list here.

An overview of Elementor's product page widgets, including a menu cart button, add to cart button, product images, and related products carousel

Step 7: Click the eye icon in the bottom left panel to preview your page When you are ready.

Step 8: Select the product you want to display by clicking Settings.

It might resemble this:

Product page example built with Elementor and containing the image of a ring and the heading "Love Knot Ring"

Step 9: In the bottom left panel, click the green "Publish" button to finish publishing your page.

Frequently Asked Questions About Elementor

Are there any questions you still have about Elementor? No problem; we will answer some frequently asked questions about the plugin.

Does Elementor work with all themes?

Yes, it functions with every theme that adheres to the coding standards of WordPress.

Does Elementor slow down your website?

One of the quickest page builders is Elementor. Though some websites can result in slow loading times, Elementor has a great guide on how to fix the website speed issue.

How does Elementor do with SEO?

If Elementor makes your site load slowly, it might be detrimental to SEO. Even with Elementor installed, you can still have a quick website by adhering to best practices like image compression and limiting excessive script.

The conclusion is that Elementor is suitable for SEO, just like any other excellent WordPress page builder. This page builder enables you to keep visitors on your page by assisting you in building a stunning, responsive website. As users interact with your content, search engine algorithms will recognize the value of your website, enhancing your rankings and SEO.

Read about the vs