How to use Elementor in WordPress

How to Use Elementor (Step by Step Guide for Beginners)

If we look back into the last decade, creating a website, no offense to anyone, was a nightmare. For building a website, people had to learn at least a programming language, framework, database management system, and other technical stuff. Also, the website building task was available only for developers with high coding skills.

Those days are gone! After the availability of WordPress and its popular page builders like Elementor, creating a website has, undoubtedly, become everyone’s task. Now even you can create a website using WordPress and Elementor, no matter, you are a lawyer, teacher, student, or entrepreneur with zero coding knowledge.

All you need to have is sheer determination, perseverance, and the mentality of creating something amazing. Now the million-dollar question is – do you know how to use Elementor in WordPress?

Don’t give me that look! If you don’t know, let’s start it together from now onwards seeking guidelines from this article. As it’s an article on Elementor that touches every single section and setting of Elementors. So, let’s get started!

Table of Contents

Get Familiar with Elementor

Get Familiar with Elementor

Elementor has a vast number of features and functionalities. As a beginner, at first, you need to know these things, otherwise working with Elementor may seem hard to you.

Get to Know about Elementor Basic Features

Elementor lets you create anything and everything from 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 to design it.

To let you doing this, Elementor comes with;

  • Theme Builder: Theme builder helps you to design each of your site parts like header, footer, product page, and more right from the Editor.
  • Popup Builder: Helps you to create popups that stand out and completely consistent with the rest of your site design.
  • 80+ Widgets: Each widget in Elementor offers advanced design customization so that you don’t need to install extra plugins to get your design done.
  • 100+ Pre-designed Templates & 300+ Blocks: You can choose from over 100 full-page WordPress templates and 300 blocks to enrich your design within moments.

Elementor Free vs Elementor Pro

It’s obvious that Elemento Pro offers more widgets, premade blocks, templates, and premium features. However, only using Elementor free version, it is possible to create a website from scratch.

Elementor FreeElementor Pro
The #1 Drag & Drop Website BuilderYesYes
40+ Basic WidgetsYesYes
50+ Pro WidgetsNoYes
Theme BuilderNoYes
Popup Builder​NoYes
Motion Effects, Including Parallax & Mouse EffectsNoYes
VIP Support, Including Live ChatNoYes
Visual Form Builder + Popular Marketing IntegrationsNoYes
WooCommerce Builder + Over 15 Shop WidgetsNoYes

As a beginner, our recommendation is to try Elementor free first, then go for Elementor pro if it is really necessary for you.

How to use Elementor in WordPress

Elementor is a drag-and-drop page builder for WordPress. This plugin helps you create beautiful pages using a visual editor. This WordPress plugin is an all-in-one solution that lets you control every part of your website design in a single platform.

Basically, Elementor is immensely popular because it empowers people without any technical background to design websites that look as beautiful as those made by professionals.

Using Elementor to build a websites will:

  • Save your time and help you more rapidly design and iterate on your websites.
  • Allow you to integrate third-party widgets so that you can create a more well-rounded and complete website to provide your visitors a positive online experience.
  • Reduce the complexity of your websites, eliminate bugs, and create an easier maintenance process when it comes to updates and testing.
  • Save you money and simplify costs so that you can better scope out the price for a project.

For WordPress developers, it’s still a top-choice platform with script optimization, custom attributes, and rollback versions.

To get a better understanding, we have made a comparison between top WordPress page builders. Let’s check it out!

Elementor vs Divi vs Beaver Builder – Comparison Table

Apart from Elementor, there are a few popular WordPress page builders available. Among those page builders, Divi and Beaver are the toughest competitors for Elementor. That is why we have created a comparison table to find out if Elementor is better than those page builders.

ElementorDiviBeaver
Free Version?YesNoYes
Starting Price for Pro$49$89$99
Visual Builder?YesYesYes
Official Elements534631
In-line Editing?YesYesNo
Pre-made Templates300+110+50+
Unique FeaturesEmbed Anywhere A/B TestingBeaver Themer
Active Installations of Free Version5M+N/A300K+
User Ratings 4.8/5 (5.7k+ Ratings)N/A4.8/5 (350+ Ratings)

After analyzing the comparison table, which page builder do you think is better for a beginner? It’s Elementor, right! This is why we chose Elementor over other popular page builders. So, it’s time to get familiar with the Elementor page builder.

Introducing Elementor Dashboard

Elementor dashboard

Getting access to the Elemnetor dashboard, at first, we need to install the Elementor on our WordPress site. Installing Elementor is as easy as pie. Follow the below steps to install and active Elementor in moments.

How to Install and Activated Elementor in WordPress?

  • Step 01: Go to your WordPress dashboard > Plugins > Add New
Install Elementor
  • Step 02: Type “Elementor” in the search box and find Elementor from the search result. Then click the Install button.
Search and install Elementor
  • Step 03: Finally, click the Activate button to activate and use Elementor.
Activate Elementor

Elementor Settings

After activating the Elementor page builder, you’ll be heading to the below-shown interface. Or, go to your WP dashboard > Elementor, to get this interface.

Settings:

Elementor settings
  • General: In the General tab of the Elementor settings, you’ll be able to select the post types you plan to use, as well as disable default colors and fonts.
  • Style: You’ll find options that include setting default generic fonts, tablet and mobile breakpoints, as well as a checkbox to enable image Lightbox.
  • Advanced:  You’ll find the option to set the CSS print method, switch the loader method when troubleshooting server issues, and enable SVG support.

Role Manager:

Elementor role manager
  • Different types of users can have different levels of access to your website, depending on their role. If you have the Pro version, you can also limit the users’ access only to content.

Tools:

Elementor tools
  • General: The general tools will let you regenerate the CSS on your website and sync your Elementor library manually If you need to.
  • Replace URL: The Replace URL tab is a place where you can, as the name says, replace the URLs if you changed the site address.
  • Maintenance Mode: In the Maintenance Mode tab, you get all the controls over the website’s maintenance mode you’ll ever need.
  • Font Awesome: It lets you access 1,500+ amazing Font Awesome 5 icons and enjoy faster performance and design flexibility.

Elementor Dashboard

  • To get access to the Elementor dashboard, go to WordPress Dashboard > Pages > Add New.
  • Then, enter a page title and select the Elementor Canvas option from the right side template dropdown.
  • Finally, click on the button “Edit with Elementor” and start working with the most powerful page builder.
how-to-use-elementor-canvas
  • However, if you want to edit an exciting page with Elementor go to All Pages> Hovering Over a Page.
  • Then a button will appear “Edit with Elementor”. Now, click on the button and start editing your page.
edit-with-elementor

Here it is. Our much-awaited Elementor Dashboard. Let’s take a ride into it.

how-to-use-elementor-interface

This is the interface where you can design your page with drag and drop elements and see the live preview of your site.

  • Top of the left you will find a hamburger icon for some default and global settings.
  • At the right top, you will find a dial button in order to get back to the main panel
  • After that, a search box appears to find out listed and required widgets quickly
  • You will find all the helpful modules in the left panel
  • At the bottom, you will find some useful icons for page settings, quick navigation, history, responsive mode, and preview.
  • Also here you will get a Publish button to live your page or save draft/template for using later.

Furthermore, you can make the module panel disappeared by clicking on the arrow sign that appears on the right side of the panel.

In this way, you will get a full preview of your page.

Bonus Point: You Can Enhance Your Elementor Experience Using 3rd Party Tools like HappyAddons

happy-addons-active-installation

Elementor is a powerful page builder for WordPress, no doubt. However, to make it more powerful and give you extra flexibility while designing your website, third-party addons come to play its role.

HappyAddons is such a third-party addons that can help you to create futuristic and next-level designs. Over 100,000 active installations, HappyAddons is one of the most popular addons that seamlessly works with Elementor. It comes with,

  • 100+ Widgets
  • 200+ Premade Blocks
  • Cross-Domain Copy Paste
  • Unlimited Section Nesting
  • Image Masking
  • Happy Particle Effect
  • 500+ Line Icon
  • Equal Height, and many more

Using HappyAddons with Elementor, you can give your site a premium look in no time.

How to Use Elementor with WordPress

Ways to use Elementor in WordPress

As we said earlier, Elementor comes with a drag and drop page builder and a theme builder. So, now we’ll learn how to use these two builders and eventually create a template using Elementor.

  1. How to Use Elementor Page Builder
  2. How to Use Elementor Theme Builder
  3. How to Create a Popup in Elementor

So, basically, our tutorial is going to start from this section. Earlier we got to know about Elementor, now, we are going to work with it in a real way.

How to Use Elementor Page Builder

For showing you how to use Elementor page builder, now we are going to create a Homepage for a Travel website. Follow the below steps and try to design your own homepage on your editor to learn it quickly.

Step 01: Create a New Page

  • Go to your WordPress dashboard > Pages > Add New
Create new page
  • Give this page a name. Here I named it Homepage.
  • Set the default template to “Elementor Canvas” as we want to build the whole page with Elementor. You can choose Elementor Full Width, which will let you customize the whole page without the menu.
  • After that, publish the page from the right sidebar. You can also keep it as a draft.
  • Click on “Edit with Elementor” and you’ll be redirected to the Elementor page builder.
Edit with elementor

Step 02: Choose a Suitable Template for Your Travel Website Homepage

Elementor comes with a lot of free and pro premade templates, you don’t even need to build the pages from scratch. You can just choose an existing template to kickstart your journey.

  • Click the Add Template button.
Add template
  • You’ll get a bunch of premade templates from where you can choose any of the templates and customize them as per your need.
  • After deciding the one that you want to use, click the Insert option.
Insert template

Step 03: Add a Header to Your Homepage

After inserting the templates the page will be ready, and you can customize it to use for your travel website.

  • We will start by adding a header to the page, which will display the name and tagline of our website. Here’s how you can do that by just drag & drop and a little bit of styling.
Add header

Header helps to display your brand identity instantly once your visitors enter your website. After customizing the header we will now customize the body of the homepage.

Step 04: Highlight Your Hotel Facilities

Once you are done with the Header, it’s time to design the main part of the homepage. That is Hotel facilities like what you’re offering in your hotel if anyone wants to stay at your hotel.

  • You can upload any images from your local storage, or you can replace the existing image with already uploaded images from the media section. Follow the below gif file to do that.
  • You can adjust the height, width, opacity, margin, padding, and everything from the editing options.
  • Adding button, text, description everything is possible from the editing option.
Add hotel description

Step 05: Add a Video and Testimonial

  • You can add a video to show what’s your surroundings look like and how people enjoy your resort when they are here.
  • Adding a testimonial is a wise decision to let people know what’s the opinion of your clients about you.
Add a video

Step 06: Add a Contact Form

  • Add a contact form so that your visitor can contact you. Set your contact numbers like telephone number, email, or Whatsapp number on the contact page that will help your visitor to call you if they have any questions to ask.
  • You can also add a Google map so that people can find you where you from.
Add a contact form

Step 07: Make It Responsive Across Platforms

  • Make sure that your page is fully responsive and will look properly on all devices. In order to do it click the Responsive Mode option.
  • After the customization is done, click the Update button.
responsive

Overview of Our Homepage

Here is the final view of our Homepage that we have just created. And this is how you can use Elementor page builder to build any pages including homepage, contact page, feature page, or any other page instantly.

Homepage

How to Use Elementor Theme Builder

Top Elementor features you should have a look now

Elementor theme builder is a game-changer for anyone familiar with page builders because it allows you to create custom headers, footers, and other dynamic content for your website. It even allows you to override aspects of your WordPress theme, so you can keep what’s working and just make the changes you want!

In this section, we’re going to show you how you can build beautiful headers with Elementor Theme builder.

Note: Elementor theme builder is available to its pro version. Free version comes with a very limited feature.

Step 01: Choose a Template Type

  • Go to your WordPress dashboard > Templates > Theme Builder.
  • Then click on the Add New button, or If you saw a header already that you liked the look of, you can import it to use as a starting point.
Add a template
  • After clicking the Add New button, a pop-up screen will appear in front of you. There you will see a drop-down menu to choose from a template type.
  • Choose a temple type, here we are choosing Header.
  • Then put it a name.
  • And finally, click the Create Template option.
Choose a templte type

Note: Elementor Free only includes section and page templates. The Pro version includes several additional template categories, including global widget, header, footer, single, and archive.

Step 02: Customize Your Header in Elementor

You can choose to design your own header or you can pick any of the premade ones from Elementor Template Library.

  • Click on the Add Template option to load a premade header to your editor.
Elementor theme builder editor

If this step looks familiar, that’s because it’s the same exact editor we used to make a full page earlier. Now, use that experience here to create a header for your website.

After customizing your Header and clicking the ‘Publish‘ button, if you want you can set conditions for where you want your header to be displayed.

Note: You can follow these same steps to create footers for you website too. Just make sure to choose ‘Footer’ as your Template Type when you are designing your footer using the Elementor Theme Builder.

How to Create a Popup in Elementor

Creating a popup with Elementor is super easy. You can design your popup with the visual interface of Elementor where everything is drag and drop. Your job is getting easier since Elementor also offers premade popup templates. You can simply select a template, publish it, and set the trigger. That’s it!

Note: Elementor theme builder is only available to its pro version.

Step 01: Add a New File

  • Go to your WordPress dashboard > Templates > Popups. Then click the Add New button on the top side.
Add new popup
  • Give your popup a name and click the CREATE TEMPLATE button.
Give popup a name
  • Select a popup template you want to use. Hover your mouse over it and click the Insert button to take it to the Elementor editor.
Choose a popup

Note: If you prefer to create the popup from scratch, you can simply close the template library to open the Elementor editor.

Step 02: Customize the Popup

After inserting a pre-designed popup to your editor, it’s time to customize that popup. On the Elementor editor, you can customize the popup. You can replace the default content with your own content.

We have already shown you how to customize a pre-designed Elementor template.

Once you are done, click the PUBLISH button.

Step 03: Set Display Conditions and Triggers

On the next step, you will be asked to set display conditions and triggers. There is also an option to set advanced rules.

  • Display conditions: Determine on which pages the popup appears throughout your website. You can set the popup to appear on the entire website, specific pages, specific posts, specific categories, and so on.
  • Triggers: A trigger is an action to show the popup. Elementor supports 6 trigger types: On Page Load, On Scroll, On Scroll To Element, On Click, After Inactivity, On-Page Exit Intent.
  • Advanced Rules: The requirements need to be met for the popup to appear. For instance, you can set the popup to appear if a visitor comes to your website via a search engine or certain UR. Elementor Popup Builder itself has 7 advanced rule options you can set choose from.

If you want to display the popup when a user clicks a button, open the Triggers tab and activate the On Click option. Then click Save & CLOSE.

Popup condition

Create a new page/post and edit it with Elementor (you can also edit an existing).

  • Add a Button widget by dragging it from the left panel to the canvas area. Or, if you are editing an existing page that already contains a button, click the Button widget to turn it into an editing mode.
  • On the Button option under the Content tab, set the link to Popup. To do so, you can click Dynamic on the Link section.
Button popup
  • Click the wrench icon on the Popup field and select the popup you have just created. Type the popup name to find your popup.
link popup

Click the Publish/Update once done editing the page.

Before clicking the Publish/Update button, you can preview your page first to see if the popup already works.

How to Use Elementor Advanced Features

How to Use Advanced Features in Elementor

In this section, we will focus on mainly two different topics. They are,

  • How to Customize WooCommerce Product Page in Elementor
  • How to Import an Elementor Template from a JSON File

So let’s get the ball rolling.

How to Customize WooCommerce Product Page in Elementor

Before you can customize your WooCommerce product page, you’ll need to install and activate WooCommerce to your WordPress dashboard. You’ll also need to add a few products to your website. For doing that, you can seek help from this WooCommerce setup (step-by-step) guide.

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

Step 1: Create the Single Product Template

  • 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.
Create a single product template

Step 2: Choose a Pre-Designed Product Page Template, or Build One from Scratch

  • The Elementor Library will load.
  • Next, choose a pre-designed product page template, or build one from scratch.
  • If you choose a premade product page template, customize it as per your designing skills (Now you have the experience to customize a design as we have shown how to customize a page right before this section).
Choose a Pre-Designed Product Page Template

Step 03: Add Different Product Widgets to Customize Your Page

  • Now, it’s time to build the elements that will make up your product page. Follow the below screenshot to design your product page. You can add or remove any widget that you need.
Add widgets

Step 04: Publish the Page

  • 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.
  • To publish your page, click the green Publish button on the bottom left panel.

It might look like the below image.

WooCommerce page

How to Import an Elementor Template from a JSON File

Elementor allows you to import a template from a JSON file. To let you do this, there are two ways available out there. Let’s learn how they work!

1. Via Template Library

  • Click on the Add Template button.
Add template
  • Click on the arrow icon – Import Template.
  • Now, click the SELECT FILE button to select the JSON file you want to import.
Upload JSON file
  • You can find the template you have just imported on the My Templates tab on the template library.
Uploaded JSON file

Reload the template by clicking the reload icon if the template you have just imported doesn’t appear. Hover your mouse over a template and click the Insert button to load it to the Elementor canvas.

2. Via Template Manager

  • From your WordPress dashboard, go to Templates > Saved Templates.
  • Click the Import Templates button.
  • Then clink on the Choose File button to select the JSON file.
  • Finally, click the Import Now button to import it.
Import template

These are the two ways to import an Elementor template from a JSON file. You can choose either of the ways to get your job done.

Pros and Cons of Using Elementor Page Builder in Your WordPress Site

Pros and cons of Elementor

It’s obvious that everything has its dark side as well. But in terms of Elementor, it’s not actually the dark side. Instead, we can say it has some limitations that could be improved over-times. What are those?

Well, before that, let’s check its pros at a glance.

Pros of Using Elementor in WordPress

  • It’s a free plugin! Most users can fully build out their sites without having to upgrade to the pro version.
  • For a free plugin, it has a very wide range of features. The feature set on the free version rivals a lot of paid plugins.
  • The real-time editor allows you to make changes to your site and see what’s happening in real-time, so you don’t have to keep going back and forth between multiple screens.
  • You can edit and view multiple versions of your site, desktop, mobile, and tablet, and make unique changes to each of these versions.

Cons of Using Elementor in WordPress

  • Elementor is a powerful editor, but with all the flexibility and customization options, it can be hard to get everything right.
  • Sometimes your pages might have layers of different content overlays and it can be difficult and time-consuming to find the area you want to edit.
  • If you build your site using Elementor, you’ll need to keep the plugin installed, otherwise you’ll lose all your designs and customizations you’ve made.

Top 3rd Party Elementor Addons to Enhance Your Design

Top Elementor Addons 1024x640 1

Third-party addons are the powerhouse of Elementor. Despite Elementor offering 80+ Fantastic Elements, it is very possible that you may want something even more advanced & unique. This is exactly why third-party developers have decided to expand the Elementor functionalities & develop their own Elementor Addons.

Apart from that, you will be getting many special-purpose elements with the add-ons, for example, advanced pricing, team, social elements, creative elements, form styling elements, countdown, etc. 

As a result, Elementor now officially recognizes them as its contributor by presenting them on Elementor’s official page. Among them, here is a list of the top 3rd-party Elementor addons that you can use while designing your WordPress website.

  1. Happy Addons: Comes with 100+ widgets, and 200+ blocks so that you can get the full freedom to design your website in less time and with less budget.
  2. Premium Addons for Elementor: It offers 55+ highly customizable Elementor essential addons and widgets, 300+ premade Elementor templates that help you to design a website in less time with ease.
  3. Exclusive Addons for Elementor: A collection of 700+ premade blocks and 10+ useable templates will help you build your websites in less time with no coding.
  4. PowerPack for Elementor: It offers 60+ creative Elementor widgets and extensions to enhance your Elementor experience.

These addons give you the opportunity to strengthen your website design with its amazing features & layouts. Besides, you can create a special vibe by using the Elementor extensions.

Free Tutorial: Build Your eCommerce Website Using Elementor and Happy Addons

Happy Addons for Elementor

Creating an eCommerce website using Elementor is super easy. And blending HappyAddons with Elementor, it makes more fun to design a website. It’s something like the limitless flexibility to design as per our requirements. Let’s check how we can design our eCommerce website using Elementor and HappyAddons with ease.

Here are the pre-requisites to create your eCommerce site:

  1. Choose your domain name and web hosting plan
  2. Install WordPress and WooCommerce
  3. Install Elementor
  4. Finally Install HappyAddons (Free + Pro)

05: Choose an eCommerce Template

  • Go to your WordPress dashboard > Pages > Add New
  • Give this page a name.
  • Set the default template to “Elementor Canvas” as we want to build the whole page with Elementor. You can choose Elementor Full Width, which will let you customize the whole page without the menu.
  • After that, publish the page from the right sidebar. You can also keep it as a draft.
  • Click on “Edit with Elementor” and you’ll be redirected to the Elementor page builder.
Create a page for eCommerce site
  • Click on the HappyAddons sign to add a pre-designed template for your eCommerce site.
HappyAddons premade design
  • Choose a pre-designed template and click the Insert option.
Choose a pre-designed template

06: Customize the Template

Customize the premade design

The whole customization process is as same as you have shown in the earlier section – How to Use Elementor Page Builder. Follow the same steps to get your design done.

You can change the logo, color scheme, navigation links, website copy, and any other feature that you wish. You can also use the Elementor and Happy Addons widgets to add specific functionalities to your website.

Step 07: Publish the Page

Once you’re completely satisfied with your website’s design, interface, and functionality, then it’s time to publish it live. 

  • To preview the site, click the icon. 
  • If you are satisfied with the result, go ahead and click the Publish/Update button. 
  • Click ‘Have a Look‘ to view the published page.
Publish the page

Elementor FAQ

1. Is Elementor for WordPress free?

Yes, Elementor for WordPress is free to download and use. And at the same time, Elementor has its pro version as well. If you want to get more features, widgets, premade blocks, and templates, you will be needing to buy their pro version.

2. Does Elementor Slow Down Your Site?

Elementor does slow down your website if you choose bad hosting, use large media files, external scripts, and additional plugins. Otherwise, Elementor won’t slow down your WordPress website.

3. Does Elementor Work with All the Themes?

Yes, Elementor does work with all the themes which respect the coding standards of WordPress set by its Codex.

4. Does Elementor Work with Other WordPress Plugins?

Yes, Elementor does work with all the other plugins including free and pro seamlessly.

5. How Much Is Elementor Pro?

Elementor Pro comes in 3-different subscription plans. Such as Personal, Plus, and Expert. It costs you only $99 if you want a three website license and $199 for an unlimited website license. 

6. Is Elementor SEO friendly?

Elementor is the most SEO-friendly page builder for WordPress. It was built with the strictest code standards and delivers the best performance when creating page designs.

7. Who Owns Elementor?

Yoni Luksenberg. He is the CEO and co-founder of Elementor.

8. What Happens When Elementor Pro Expires?

You won’t be able to build any new pages with pro features if your pro license is expired. But all your existing projects will remain intact, and the Pro features you used in your previous designs will continue to function as before.

9. Can I Edit My Blog Page with Elementor WordPress?

Yes, you can edit your blog page with Elementor. You will need the Theme Builder to edit it.

10. Can I Create My Own Theme with Elementor?

You can design every part of your theme individually using Elementor Pro templates but you cannot import and export a complete theme that combines all the theme parts. However, you can import and export every theme part separately.

Over to You

Using Elementor in WordPress isn’t that complicated, actually. It could be more fun if you have a fully comprehensive guide like this step-by-step tutorial.

Just follow this guide, keep practicing for improvements, and prepare a mind setup that you’re going to be the maestro of Elementor. That’s all you need to have to use Elementor and build a WordPress website in moments.

If you face any complications while using Elementor, or you have any suggestions regarding this guide on how to use Elementor in WordPress, do let us know through the comment box below. Good luck!

HappyAddons Pro Banner 970X90

Share this post

Share on facebook
Share on twitter
Share on linkedin

Related Post

2 Responses

  1. I think this article will be useful to beginners as well as those who are older. Because I read this article of yours today and I learned the correct rules of many things. Thank you very much.

Leave a Reply

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

0 Shares
Share via
Copy link
Powered by Social Snap