The Beginner's Guide to Using Elementor in WordPress

Shayla Price
Shayla Price

Published:

If you’re thinking about creating your website, you have probably read the terms WordPress, Elementor, and website builder in your first Google search. WordPress is one of the most popular website platforms, and it’s not hard to see why: It’s highly customizable, easy to learn, and free. 

Marketer using Elementor page builder in WordPress to build an SEO-friendly and beautiful website

However, approaching website design for the first time can be overwhelming, especially because there are a lot of different concepts to learn and options to compare before making a decision. Thankfully, knowing how to code isn’t necessary to build engaging websites. 

Download Now: How to Launch a WordPress Website  [Free Guide + Checklist]

In this article, we’ll talk about the free builder that makes WordPress the go-to for many designers and business owners who decide to create a site: Elementor. We’ll share how it works, how you can install it, and, of course, some tips so you can make the most of it.

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 WordPress developers, it’s still a top-choice platform with script optimization, custom attributes, and rollback versions.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

How to Launch a WordPress Website

Learn how to launch a website on WordPress with this step-by-step guide and checklist. Learn how to...

  • Set up your domain name.
  • Install an SSL certificate.
  • Analyze your content.
  • Back up your site.
Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now
Learn more

What Can You Build With Elementor?

With Elementor, you can build anything. That includes customizing entire websites 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 turn your idea into reality.

Check out this restaurant website built with Elementor.elementor wordpress: A website built using Elementor with two splash images, two columns, and cursive text

Image Source

Is Elementor free?

Elementor offers a free plan as well as multiple paid subscription plans. The free version comes with all the features you need to create a strong user experience on your site, including a drag-and-drop editor, 40+ basic widgets, and 30+ templates.

If you want to access more advanced functionality, such as the ability to add forms and custom CSS, you can upgrade to the pro version. Elementor pricing is tiered as follows: 

  • $59 per year for 1 site.

  • $99 per year for 3 sites.

  • $199 per year for 25 sites.

  • $399 per year for 1,000 sites.

Undecided? Elementor has compiled a detailed, easy-to-scan list of pro versus free features.

How to Install Elementor

Like other WordPress plugins, installing Elementor is quick and simple. There are two ways you can do it. We’ll share both below. 

Installing Elementor via Elementor.com

1. Go to Elementor.com and click Get Started.

elementor wordpress: How to use Elementor with WordPress — how to install elementor via elementor.com: click Get started button on elementor homepageImage Source 

2. Fill in your email address and password to create an account.

elementor wordpress: How to use Elementor with WordPress — how to install elementor via elementor.com: enter email address and password to create an account

Image Source 

3. Answer a few questions about who the website is for and how much experience you have building websites.elementor wordpress:  How to use Elementor with WordPress — how to install elementor via elementor.com: answer questions about website goals and experience

Image Source 

4. Select how you would like to build your site. 

You can purchase the Elementor Pro plugin or a bundle that includes the plugin as well as a WordPress installation and hosting. You can also check out other pro plans or start with the basic free version. 

For this demo, we’ll pick the Free plan.

elementor wordpress: How to use Elementor with WordPress — how to install elementor via elementor.com: select a Elementor planImage Source 

5. Since Elementor requires you to have an active WordPress site, enter your website’s domain into their checker. Elementor will then confirm that your site is on the WordPress platform.

elementor wordpress: How to use Elementor with WordPress — how to install elementor via elementor.com: Elementor installation wizard prompting users to enter their website domain to check whether it's hosted on WordPressImage Source 

6. After your site’s compatibility is confirmed, click Install Elementor.

elementor wordpress: How to use Elementor with WordPress — how to install elementor via elementor.com: Elementor installation wizard prompting user to install plugin

Image Source 

7. If you’re directed to your website’s admin login page, go ahead and log in. If you’re already logged in, you’ll be taken directly to the Elementor plugin page. Click Install Now in the bottom right-hand corner.

elementor wordpress: How to use Elementor with WordPress — Elementor's plugin page on WordPress' plugin library with the heading "Elementor Website Builder"

Image Source 

8. Afterwards, you’ll arrive at a page with a confirmation message. Click Activate Plugin.

elementor wordpress: How to use Elementor with WordPress — Installation confirmation for the Elementor page builder plugin, with a button that says "Activate Plugin"

Image Source 

Finished! You’re all good to go and ready to start using the Elementor page editor.

Installing Elementor via WordPress Dashboard

Step 1: From your dashboard, click Plugins > Add New.

Step 2: In the search field, enter Elementor and locate Elementor Website Builder.

elementor wordpress: How to use Elementor with WordPress — searching elementor in wordpress dashboard to install now

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

elementor wordpress:  How to use Elementor with WordPress — Elementor plugin card inside WordPress plugin library with a button saying Activate

The page builder will automatically be added to your sidebar. However, this sidebar menu item is only for accessing Elementor’s settings on the back end, not for editing your pages.

elementor wordpress:  How to use Elementor with WordPress — Elementor added to sidebar in WordPress dashboard to configure back end

How to Use Elementor in WordPress

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

Elementor Tutorial

Elementor offers an intuitive design for users, so you can learn the basics of the editor in a couple of minutes. However, here’s a quick guide to help you build the right foundation.

1. To get started, create a new page or post and click Edit with Elementor.

elementor wordpress: How to use Elementor with WordPress — WordPress page with Edit with Elementor button in top toolbar

Step 2: You’ll enter the Elementor page editor. This is what your page will look like.

elementor wordpress:  How to use Elementor with WordPress — Elementor page editor in editing view with a widget library to the left and the pages content to the right

3. On the left side, you’ll see the Elementor sidebar with all the drag-and-drop features you can use to build your web page.

Before you start dragging and dropping widgets, you first have to understand that 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.

    The editor will tell you where you can drag a widget by highlighting sections and columns in a blue box. Note that you can’t drag a widget into the navigation bar or the heading.

elementor wordpress: How to use Elementor with WordPress — Elementor editor with a section highlighted in blue, ready for editing

You control the sections, columns, and widgets using the blue handle. Just right-click the handle to edit the blocks.

elementor wordpress: How to use Elementor with WordPress — Elementor section editor menu with several options, including Duplicate, Save as Template, and Delete

4. When you’re ready, simply click, hold, and drag a widget to the place where you’d like to add the new module.

For example, when you scroll to the bottom of the page, you’ll have the option to drag a widget into a new, empty area.

elementor wordpress:  How to use Elementor for WordPress — The bottom of the Elementor page editor includes an empty section with the text _Drag widgets here_

5. 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.

elementor wordpress: How to use Elementor with WordPress — search bar for widgets in Elementor dashboard

6. Click the hamburger button in the left corner, then Site Settings. In this menu, you can set the default colors and fonts for your pages. You can also configure global settings for your entire website on Elementor.

elementor wordpress: How to use Elementor with WordPress — site settings menu in elementor dashboard includes options for design system, theme style, and settings

7. Finally, you can click on the History icon at the bottom of the panel to access Elementor's 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.

elementor wordpress: How to use Elementor with WordPress — Revision History section in Elementor dashboard

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 on the platform — no coding skills required.

1. Go to your WordPress dashboard.

2. Click Pages, then Add New.

3. Click Edit with Elementor to enter the page builder.

4. Elementor will load to look like this.

elementor wordpress:  How to use Elementor with WordPress — Elementor page editor with a widget library to the right and the new page's content to the left

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

elementor wordpress: How to use Elementor with WordPress — User drag-and-dropping a heading widget into an editable column inside the Elementor page editor

Once you drag it in place, you’ll be able to edit each widget to your heart’s content. Click the green Publish button, and done! You’ve built your first page in Elementor.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

How to Launch a WordPress Website

Learn how to launch a website on WordPress with this step-by-step guide and checklist. Learn how to...

  • Set up your domain name.
  • Install an SSL certificate.
  • Analyze your content.
  • Back up your site.
Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now
Learn more

7. When you’re finished designing your page, you can preview and then publish it. To start, go to the panel on the left side of the Elementor editor.

8. To preview your page, click the eye icon.

9. To publish, click the green Publish button.

Elementor Templates

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 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.

1. Inside the Elementor editor, navigate to the bottom of the page where there’s a section that says Add widget here. Click on the white folder.

elementor wordpress: How to use Elementor with WordPress — 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)

2. A library will load. To preview a template, click the magnifying glass icon or on the image. Or simply hover over one.

elementor wordpress: How to use Elementor with WordPress — Elementors template library with various page templates to choose from

3. Click the green Insert button.

4. If you’re not yet connected to Elementor’s template library, it will prompt you to do so. Elementor will automatically redirect you to its website, where you can either register or sign in.

elementor wordpress: How to use Elementor with WordPress — Page prompting user to connect to Elementor template library

5. After you register or sign in, your connection will be confirmed.

6. Return to the page you were editing and Insert your desired template.

Finished! Your template is all loaded and ready for customization.

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, a pop-up builder, and custom field capabilities.

In this section, we’ll share guides for building these extra elements that level up your page. 

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.

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

Step 2: Name your template and click Create Template.

Step 3: Choose a template from the Library or create your own design.

Step 4: Click Publish, then Save and Close.

Step 5: Open a new page in Elementor (CTRL + E for PC users; Command + E for Mac users).

Step 6: Drag in a button widget.

Step 7: Under Layout, choose Link > Dynamic > Actions > Popup.

Step 8: Go to Popup > Open Popup and select the popup you created.

Step 9: Go to the live page.

Step 10: Then, click on the button and see the popup appear.

Here’s how it might look:

elementor wordpress: How to use Elementor with WordPress — User creating a popup inside the Elementor page builder and testing it out in the live pageImage Source

How to Customize WooCommerce Product Page in Elementor

WooCommerce is a popular ecommerce 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 on 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.

1. In your WordPress dashboard, go to Elementor > My Templates.

2. Click on the Add New button.

3. Choose Single Product as your template type and click Create Template.

elementor wordpress: How to use Elementor with WordPress — Form to create single product template in elementor dashboard

Image Source

4. The Elementor Library will load.

5. Next, choose a pre-designed product page template, or build one from scratch.

elementor wordpress: How to use Elementor with WordPress — Elementor product page templates with various options to choose from

6. In the template, add different product widgets to customize your page. You can find the complete list here.

elementor wordpress: Elementor for WordPress — An overview of Elementor's product page widgets, including a menu cart button, add to cart button, product images, and related products carousel

7. When you’re ready to preview your page, click on the eye icon on the bottom left panel.

8. Click Settings, then choose the product you want to display.

It might look like this.

 elementor wordpress: How to use Elementor with WordPress — Product page example built with Elementor and containing the image of a ring and the heading "Love Knot Ring"

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

5 Must-Have Elementor-Compatible Plugins 

If you’ve come this far, you’ve probably noticed that Elementor is a great tool for any WordPress user. But, what if I told you that there’s a way to make Elementor even more functional?

One of the best things about Elementor is that it has a huge community of developers who are constantly creating new plugins and add-ons. These plugins make your life easier by allowing you to do everything, from adding Google Maps to your site to creating custom forms and layouts. 

If you want to make the most of Elementor, try these Elementor-compatible plugins.

MasterAddons 

Beautiful landing pages can help you increase engagement and drive leads. However, you may not have the coding knowledge to create animated headlines, hover effects, or sliders on your page. 

MasterAddons can help you create an interactive, organized landing page without a single line of code. You’ll have access to image editing, different menu formats, and pre-designed pricing tables.

Best for: Building beautiful landing pages

Price: Plans start at $39

Dynamic Content

elementor wordpress: elementor plugins, dynamic content

Image Source

Dynamic Content is another plugin that can help bring your WordPress site to life. You’ll have access to animated text, SVG effects, and cursor trackers to bring movement to your site. 

This plugin can be especially helpful if you're running an ecommerce operation. Dynamic Content integrates seamlessly with WooCommerce to help you upsell, discount, or cross-promote products. 

Best for: Ecommerce sites

Price: Plans start at €59

Starter Templates

 elementor wordpress: elementor plugins, starter templateImage Source

If you’re new to building a website, working off a template will be much easier than starting from scratch. That’s where Starter Templates comes in. This plugin offers 600+ templates that you can use as a starting point for building your site. 

You can search available templates by industry. For example, Starter Templates has an Elementor-compatible demo for daycare services and another for food bloggers. All you need to do is find a site you like and start building. 

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

How to Launch a WordPress Website

Learn how to launch a website on WordPress with this step-by-step guide and checklist. Learn how to...

  • Set up your domain name.
  • Install an SSL certificate.
  • Analyze your content.
  • Back up your site.
Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now
Learn more

Best for: Users who are new to building websites 

Price: Prices vary by template

ElementsKit

elementor wordpress: elementor plugins, elementorkit

Image Source

If you’re in the market for both templates and additional features, ElementsKit is your one-stop shop. The plugin comes with 85 widgets and extensions that are ready for you to use on your site.

You can start by picking a template. Then, it’s time to focus on features. With ElementsKit you can build a mega menu, add testimonials, and feature countdown timers. Soon, you’ll have a beautiful, fully-functional site.

Best for: Users in search of templates and extensions

Price: Plans start at $39 per year

Livemesh Addons

elementor wordpress: elementor plugin livemesh addons

Image Source

Livemesh Addons has a variety of well-designed features and widgets that will help you design a customized website. You can create animated text, sliders, and different grids to showcase your services.

Livemesh also has grids to feature your presence on social media. You can showcase your tweets, recent YouTube videos, and content on Vimeo. 

Best for: Well-designed add-ons and a variety of widgets 

Price: Plans start at $37 per year

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.

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, but Elementor has provided a guide on how to fix the website speed issue.

Is Elementor good or bad for SEO?

Elementor could be bad for SEO if it slows down your site, but by following best practices, such as compressing images and limiting excessive script, you can have a fast website even with Elementor installed.

The verdict is that Elementor, like any great WordPress page builder, is good for SEO. By helping you create a beautiful, responsive website, this page builder allows you to keep users on your page. When it comes to the relationship between Elementor and SEO, it's clear that this tool can significantly enhance your site's search engine optimization. By offering a user-friendly design interface and responsive features, Elementor aligns well with SEO best practices.

As visitors engage with your content, search engine algorithms will understand that your website is valuable, boosting your rankings and improving your SEO.

Build your WordPress website with Elementor. 

Elementor is a WordPress builder 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 the HubSpot WordPress plugin to increase your conversions.

Editor's note: This post was originally published in August 2019 and has been updated for comprehensiveness.

wp

 

 

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Launch your WordPress website with the help of this free guide and checklist.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO