How to use Elementor on WordPress?

Doesn’t know how to use Elementor on WordPress?

Elementor is a popular WordPress page builder plugin. It allows you to create custom pages and layouts, writing no code. Beginners and experienced users can use it to create professional and stunning websites.

In this blog post, we will walk you through the basics of using Elementor on WordPress. We cover everything from installing and activating the plugin to creating and editing your first page.

Let’s understand what Elementor is. Why it’s a game-changer in the world of WordPress web development.

What is Elementor?

What is Elementor?

Elementor is a versatile and user-friendly page builder plugin for WordPress. It empowers users to design and customize their websites with ease. You don’t need coding or technical expertise. 

Whether you’re a seasoned web developer or a beginner. Elementor provides an intuitive interface to create captivating web pages.

Why Choose Elementor?

Why Choose Elementor?

Elementor is well-known for its drag-and-drop functionality. This makes it accessible to users of all skill levels. Pick elements, drop them onto your canvas, and customize them to your heart’s content.

Speed and Performance: Websites built with Elementor are optimized for speed and performance. So that your site loads faster. Google ranking algorithm loves faster loading sites.

Design Freedom: With Elementor, you have complete creative control. You can design every aspect of your website from headers and footers to individual sections and widgets.

Get Started with the Elementor

Get Started with Elementor

Now that we’ve introduced you to Elementor. Let’s roll up our sleeves and start using it to create a stunning WordPress website.

Step 1: Install and Activate Elementor

Before you start using Elementor, you need to install and activate the plugin. 

Go to your WordPress dashboard.

  • Navigate to Plugins and click on Add New.
  • In the search bar, type Elementor.
  • Find the Elementor Page Builder plugin and click Install Now.
  • Once the installation is complete, click Activate.
  • Once activated, you’ll find a new Elementor tab in your WordPress dashboard.
  • Navigate to Elementor > Settings to configure your preferences.

Read: How to Install WordPress Plugins for Beginners?

Step 2: Basic Overview

After activating Elementor, you’ll notice a significant change in your page editing experience. 

Elementor provides a live, intuitive and user-friendly drag-and-drop editor. It’s divided into three main sections:

  • Widgets Panel (Left): Here you’ll find the elements you can add to your page, such as text, images, buttons, and more.
  • Live Editor (Middle): Here you’ll build and design your page. You can drag and drop widgets onto your canvas and view the changes in real-time.
  • Settings Panel (Left): This panel allows you to customize the settings of the selected widget or section. You can adjust fonts, colours, and spacing.

Creating your First Page with Elementor

creating your first page with Elementor

Step 3: Adding a New Page

Once Elementor is installed and activated, you can start creating your first page. Here’s how:

  • From your WordPress dashboard, click on “Pages” and select “Add New.”
  • Give your page a title.
  • Click the “Edit with Elementor” button.

Step 4: The Elementor Editor

The Elementor editor is a drag-and-drop interface that makes it easy to create and edit your pages. It has three main sections – the sidebar, the canvas, and the panel at the bottom. 

The sidebar contains all the elements that you can add to your pages. It provides access to widgets, templates, and settings. 

The canvas is where you will build your page. To add an element to your page, drag it from the sidebar to the canvas.

You can add widgets to these sections to build your page’s structure and content.

To edit an element, click on it to open the element settings panel.

Designing with Elementor

designing with Elementor

The heart of Elementor’s appeal lies in its drag-and-drop functionality. You can add widgets to your page by dragging them from the widgets panel and dropping them onto your canvas. Rearrange and resize elements with ease.

Step 5: Adding elements to your page

To add an element to your page, drag it from the sidebar to the canvas. You can then resize and reposition the element as needed.

To add text to your page, drag the Text Editor element from the sidebar to the canvas. You can then type your text into the text editor.

To add images to your page, drag the Image element from the sidebar to the canvas. You can then select an image from your media library or upload a new image.

Step 6: Editing elements

To edit an element, click on it to open the element settings panel. The element settings panel contains a variety of options. You can use these settings to customize the element.

For example, if you are editing a text element. You can change the font, font size, font colour, and other text settings. If you are editing an image element, you can change the image size, alignment, and other image settings.

Step 7: Previewing and publishing your page

Once you have finished editing your page, you can preview it to see how it will look when it is published. To do this, click the Preview button in the bottom left corner of the Elementor editor.

If you are happy with the appearance of your page. You can publish it by clicking the Publish button in the bottom left corner of the Elementor editor.

Step 8: Creating custom layouts with Elementor

Elementor offers a library of pre-designed templates and blocks. You can use these templates and blocks to kick-start your design process. 

Whether you need a hero section, a testimonial block, or a contact form, Elementor has you covered. Insert a template or block and customize it to match your brand.

To create a custom layout, go to Elementor > My Templates in your WordPress dashboard. Then, click the Add New button.

  • On the new template screen, select the type of template you want to create. For example, if you want to create a custom header layout, select the Header template type.
  • Once you have selected the template type, click the Create Template button.
  • This will open the Elementor editor. You can build a custom layout using the same drag-and-drop interface.
  • Once you have finished building your custom layout, click the Publish button to save it.

You can then assign your custom layout to a specific page or template by going to Elementor > My Templates. Then, click the Edit button next to the template you want to edit.

  • On the template editor screen, click the Page Settings tab. Then, scroll down to the Layout section and select your custom layout from the dropdown menu.
  • Click the Update button to save your changes.

Advanced Features of Elementor

Advanced Features of Elementor

Step 9: Responsive Design

In today’s mobile-centric world, having a responsive website is crucial. Elementor makes it simple to create pages that look fantastic on any device. You can adjust the layout and styling for desktops, tablets, and mobiles, ensuring a seamless user-experience.

Step 10: Custom CSS

For those with coding knowledge, Elementor provides a custom CSS feature. It allows you to fine-tune your website’s appearance. This advanced option gives you complete control over the design.

Enhancing SEO with Elementor

Enhancing SEO with Elementor

SEO-Friendly Features

Elementor offers a range of built-in SEO tools to boost your website’s visibility on search engines. Here’s how you can make the most of them:

  • Customizable Meta Tags: Set custom titles and descriptions for your pages, optimizing them for search engine results.
  • Clean Code: Elementor generates clean and lightweight code, which search engines index faster.
  • Integration with Yoast SEO: For advanced SEO capabilities, integrate Elementor with Yoast SEO, a popular WordPress SEO plugin.


How much does Elementor cost?

Elementor offers a free version with basic features. The Pro version, which provides advanced capabilities, starts at $49/year.

Can I use Elementor with any WordPress theme?

Yes, Elementor is compatible with most WordPress themes. However, it works best with themes built with compatibility in mind.

Is Elementor SEO-friendly?

Elementor generates clean code, making it SEO-friendly. However, your overall SEO performance also depends on your content and other SEO practices.

Can I create custom headers and footers with Elementor?

Yes, Elementor allows you to design custom headers and footers, giving you full control over your website’s layout.

Are there any alternatives to Elementor?

Yes, there are other page builders like Divi and Beaver Builder, but Elementor is one of the most popular and feature-rich options.

Can I use Elementor to build e-commerce websites?

Absolutely. Elementor is compatible with popular e-commerce plugins like WooCommerce, making it suitable for creating online stores.


Elementor has revolutionized the way we design websites on WordPress. With its user-friendly interface, mobile responsiveness, and SEO-friendly features, it empowers both beginners and professionals to create stunning web pages. Whether you’re building a personal blog or an e-commerce site, Elementor is your go-to tool for achieving web design excellence.

So, why wait? Dive into the world of Elementor and watch your WordPress website transform into a masterpiece. With dedication and practice, you’ll unlock the full potential of this remarkable plugin.

I hope you how to use Elementor on WordPress?Remember, the key to success is continuous learning and improvement. 

Happy Elementor-ing!

Spread the love

As a founder of Startblogpro, Bhagwant Singh helps the reader to launch a blog. A blog can be started as a side hustle and converted into a full-time business. Blogging as a business can help you to leave the 9-5 grind and be your own boss.

Leave a comment