A couple of decades ago, creating a website involved a lot of back and forth between developers, copywriters, and project managers. It took months just to get a few simple changes updated on your website.

Nowadays, knowing how to code isn’t necessary to build engaging websites. Page builders like Elementor make it super easy for non-coders to create any WordPress website they want.

Sign up for HubSpot Academy's WordPress Course [Free Online Course]

In this guide, you’ll learn about Elementor and how it can help you build a stunning website.

This WordPress plugin is an all-in-one solution—letting you control every part of your website design in a single platform. You can customize your website to fit your brand with motion effects, multiple fonts, and enhanced background images.

Why You Should Use Elementor

Elementor works for all types of professionals on your team. If you’re not tech savvy, the visual editor gives you the flexibility to drag any of the 90+ widgets to create content, like buttons, star ratings, and progress bars. For developers, it’s still a top-choice platform with script optimization, custom attributes, and rollback versions.

What Can You Build With Elementor?

Elementor is an effective tool for building everything from your entire website to specific landing pages. You can design sales pages, promotional pages, and even custom forms. If you can imagine it, this platform can help you design any page for your WordPress website.

Check out this restaurant website built with Elementor.

how to use Elementor restaurant exampleSource: Steak Cattle and Roll

Then, there’s this landing page for a Canadian law firm.

how to use Elementor law firm exampleSource: Vogel LLP

How to Install Elementor

Like other WordPress plugins, installing Elementor is quick and simple. There are two ways you can do it.

Installing via Elementor.com

  • Go to Elementor.com and click Free Download.
  • Enter your email address in the text box on the pop-up window.

how to install Elementor on website

  • Then, click Subscribe & Download.
  • In your WordPress dashboard, go to Plugins > Add New.
  • Click Upload Plugin, and choose the .zip file you’ve downloaded for Elementor.
  • Click Install Now, and then Activate Plugin.

Installing via WordPress Dashboard

  • From your dashboard, click Plugins > Add New.
  • In the search field, enter Elementor and locate Elementor Page Builder.

how to install Elementor on WordPress dashboard

  • Click Install Now. After installation, click Activate.

How to Use Elementor in WordPress

With Elementor, you can take your design vision and turn into reality. Live editing makes the process painless by allowing you to view each element as you design it. Let’s explore the Elementor editor.

Quick Tour of the Elementor Editor

Elementor offers an intuitive design for users. So, you can learn the basics of the editor in a couple of minutes.

For starters, you can access the Elementor editor from the left side of your WordPress dashboard.

how to locate Elementor in WordPress dashboard

Or you can click Edit with Elementor when you create a new page or post.

how to edit new post with Elementor

Drag-and-drop features are located on the left side of the editor. You can search for specific widgets to customize your pages. Choose from basic elements, like a heading or image gallery, or explore more advanced elements, like animated headlines and testimonial carousels.


In the Style & Settings Configuration menu, you can set default colors and fonts for your pages. You also can configure global settings for your entire website on Elementor.

how to use Elementor style menu

Source: Elementor

Elementor comes with a built-in Revision History section. Under the Actions tab, you can trace your changes, moving back and forth between each action. Under the Revisions tab, you can switch between your revisions and revert back to any previous version.

how to use Elementor Revision History section


How to Build Your First Page in Elementor

Elementor stands out from its competitors because of its ease of use. Try it for yourself by building your first page in the platform—no coding skills required.

  • Go to your WordPress dashboard.
  • Click Pages, then Add New.
  • Click Edit with Elementor to enter the page builder.

how to edit new page with Elementor

  • Elementor will load to look like this:

how to use Elementor editor


The Elementor editor consists of three main building blocks: Sections, Columns, and Widgets. Sections are the largest building blocks. Within Sections, you can add groups of Columns, and Widgets are housed within Columns.

You control the Sections, Columns, and Widgets using the blue handle. Just right click the handle to edit the blocks.

how to use Elementor blocks

Templates are pre-designed Pages and Blocks to help you design your WordPress website. Pages are full content layouts, while Blocks are sections with pre-built widgets, like footers, headers, and FAQs.

Elementor gives you a full license to use any of the templates for your business. There’s a field to search for specific templates by page type, template name, or tag. Plus, all templates are mobile responsive. You can insert them into any page with just one click.

  • From the main editing screen, click the white folder icon.
  • To preview a template, click the magnifying glass icon.

how to use Elementor templates

  • Click the green Insert button in the top right-hand corner to select your desired template.

When you’re finished designing your page, you can preview and then publish it.

  • Go to the bottom panel on the right side of the Elementor editor.
  • To preview your page, click the eye icon.
  • To publish, click the green Publish button.
how to use Elementor template example

How to Use Advanced Features in Elementor

Elementor’s pro version offers advanced features to take your WordPress website to the next level. You get access to more widgets, a theme builder, pop-up builder, and custom field capabilities.

How to Create a Popup in Elementor

Pop-up forms help you capture email addresses from leads. Elementor makes creating these forms easier with its pop-up builder. Follow these instructions to create your own popup.

  • In your WordPress dashboard, go to Templates > Popups > Add New.
  • Name your template and click Create Template.
  • Choose a template from the Library or create your own design.
  • Click Publish, then Save and Close.
  • Open a new page in Elementor (CTRL + E for PC users; Command + E for Mac users).
  • Drag in a button widget.
  • Under Layout, choose Link > Dynamic > Actions > Popup.
  • Go to Popup > Open Popup and select the popup you created.
  • Go to the live page.
  • Then, click on the button and see the popup appear.
  • Here’s how it might look:

how to use Elementor popup builder

Source: Elementor


How to Customize WooCommerce Product Page in Elementor

WooCommerce is a popular e-commerce platform to help you build an online store for your business. Together with Elementor, you create custom product pages to boost your sales.

Before you can customize your product page, you’ll need to install and activate WooCommerce and Elementor to your WordPress dashboard. You’ll also want to add a few products to your website. You can learn about WooCommerce setup here.

After setup, you now can design your product page. Follow these steps.

  • In your WordPress dashboard, go to Elementor > My Templates.
  • Click on the Add New button.
  • Choose Single Product as your template type and click Create Template.
  • The Elementor Library will load.
  • Next, choose a pre-designed product page template, or build one from scratch.

how to use Elementor product page template

Source: Elementor

  • In the template, add different product widgets to customize your page. You can find the complete list here.
    how to use Elementor product page widgets
Source: Elementor
  • When you’re ready to preview your page, click on the eye icon on the bottom left panel.
  • Click Settings, then choose the product you want to display.
  • It might look like this:
how to use Elementor product page example

Source: Elementor

  • To publish your page, click the green Publish button on the bottom left panel.

Frequently Asked Questions About Elementor

Do you still have questions about Elementor? No problem. Here are a few frequently asked questions about the plugin along with the answers.

  • How much does Elementor cost?

Elementor is a free plugin for WordPress users. If you want to unlock additional features, you can get the pro version. You can find the prices here.

  • Does Elementor work with all themes?

Yes, it works with all themes that follow WordPress’ coding standards.

  • Does Elementor slow down your website?

Elementor is one of the fastest page builders. However, some websites can cause slow loading times. Here are common ways to fix the website speed issue.

Elementor is a WordPress plugin specifically built to help you design a custom website for your business. Its user-friendly interface makes it an effective platform for non-coders. If you want to attract and nurture more leads, install Elementor and HubSpot’s CRM plugin to increase your conversions.

Apply for a job, keep track of important information, and prepare for an  interview with the help of this free job seekers kit.

Originally published Aug 28, 2019 10:56:50 AM, updated March 03 2020


WordPress Website