How to use Elementor

Elementor is one of the most popular drag-and-drop page builders for WordPress, allowing users to design stunning web pages without any coding skills. Whether you’re new to WordPress or you just want to create more visually appealing pages with ease, Elementor might just be the tool for you.

In this guide, we will walk you through the basics of using Elementor and provide tips to make the most of its features.

1. Installing Elementor

Before diving into design, you need to install Elementor:

  1. Login to your WordPress dashboard.
  2. Go to Plugins -> Add New.
  3. Search for “Elementor”.
  4. Click “Install Now” and then “Activate”.

2. Starting with Elementor

Once installed, you can start editing any page or post with Elementor:

  1. Go to Pages -> Add New (or edit an existing page).
  2. Click on the “Edit with Elementor” button.
  3. This will take you to the Elementor interface where you can begin designing your page.

3. Basic Layout

Elementor operates with a straightforward system: Sections, Columns, and Widgets.

  • Sections: These are the broadest layout blocks. Think of them as horizontal rows that you can place on your page.
  • Columns: Inside each section, you can have one or multiple columns. These determine the layout of your widgets.
  • Widgets: These are the content elements, like text boxes, images, videos, and more.

To add a section, click the “+” button. Once added, you can specify the number and structure of columns within that section.

4. Adding Widgets

Drag and drop any widget from the left sidebar into a column. Elementor offers a myriad of widgets, from basic text and images to more advanced widgets like carousels, testimonials, and social media integrations.

5. Styling Your Page

Elementor provides extensive styling options:

  1. Style Tab: Every widget has a Style tab, allowing you to adjust typography, color, spacing, and more.
  2. Advanced Tab: Here, you can add custom margins and padding, set background images or colors, and adjust responsiveness settings.

6. Mobile Responsiveness

Elementor pages are responsive by default, but you can optimize them further:

  1. Click on the “Responsive Mode” at the bottom of the panel.
  2. Switch between desktop, tablet, and mobile views to adjust settings specifically for each device.

7. Saving and Reusing Templates

If you create a design that you’re proud of and might use again:

  1. Click on the green “Save” button.
  2. Choose “Save as Template”.
  3. Later, you can load this template on any new page.

8. Extensions and Add-ons

While the free version of Elementor offers a lot, the Pro version unlocks more advanced widgets and functionalities. There are also many third-party add-ons available to expand Elementor’s capabilities.

9. Preview and Publish

Always preview your design to ensure it looks perfect. Once satisfied, click the green “Publish” button.


Elementor has revolutionized the way many users approach web design in WordPress. By understanding its basic functions and diving deeper into its capabilities, you can unlock a world of design possibilities without the need for a developer.

Whether you’re building a blog, a business site, or a portfolio, Elementor offers the tools and flexibility to create a professional-looking website with ease. Happy designing!

Tags: No tags

Add a Comment

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