The Elementor Cheat Sheet: A step by step guide

Welcome to a blogging tutorial for Elementor, one of the best WordPress site builders on the internet. This article is intended for people interested in this builder and are looking to implement it on their WordPress website.

Without further ado, let’s start learning this excellent plugin.

In This Article

How to Get Elementor

There are two ways to acquire Elementor. One is through WordPress like other plugins, and the other is through its official website You should note that the Pro version of Elementor is only through its official website, so you should already have your domain to add it when Elementor requests it.

Registering and purchasing a plan is a simple process:

  1. Go to the page and click Start
  2. Register on the site, ensuring you have an email and a secure password.
  3. Answer any questions alongside the registration.
  4. Pick how you would like to build your website.

Once you add your domain, everything should be working correctly. Remember that your domain must be a WordPress site, or it won’t work.

Is Elementor Free or Paid?

Elementor has both free and paid options. If you install it from the WordPress store, you’ll have access to the free version. If you’re interested in using their Pro option, you can follow the steps in How To Get Elementor.

Getting Started With Elementor

Let’s start by creating a new page (or post) and then click on the “Edit with Elementor” button so we can start designing. Once inside the Elementor editor, you’ll see a bar on the left side of your screen that you can use to develop and create your WordPress site.

These tools work by dragging and dropping them onto your blank webpage we just created. It’s important to note that Elementor has three fundamental parts: sections, columns, and the individual tools in the menu bar.

When adding a section, it’s marked in a light blue with a small menu at the top. Each one of these buttons serves a different purpose:

  • Add a new section
  • Click and drag this section to move it
  • Delete this section

Aside from those three options, if we right-click on the blue box, we’ll see even more options:

  • Edit section
  • Duplicate section
  • Copy
  • Paste
  • Paste Style
  • Save as a template
  • Browser
  • Delete

You can search for specific tools to customize your pages to your liking. Choosing from essential elements such as a header or an image gallery, or explore more advanced options including animated headlines and testimonial carousels.

Click on the hamburger button in the left corner and then click Site Settings will allow us to customize the default colors and fonts of our site. You can also configure any other global settings from this menu.

We also have the History icon at the bottom of the panel, which allows us to view our edits with Elementor. You can find your changes tracked in the Actions tab by moving back and forth. Meanwhile, in the Revisions tab, you can switch between the current version of your site and any previous versions you have saved.

Designing Your Website

Let’s design your first website! We first need to go into the WordPress dashboard and create a new page under the “Pages” option.

Once we’re on that new page, click on the blue “Edit with Elementor” button at the top to start designing.

It should look something like this:

Once we’re on this screen, we can build your website in two ways:

The first is a fully customizable way, which means you’ll have to take the individual elements from the Elementor bar and create sections with their respective columns, images, titles, and other components to complete the design for your website.

The other way is a more straightforward method, including using a template that has already been created. We’ll use this method for your first site, so let’s pick one!

First, we click on the folder icon. Once we do, it will show us the predesigned templates we can choose from. There are two options here, free templates and Pro templates (which require you to have a Pro plan). Select the template of your choice, and Elementor will apply it to your site.

Now we’ll edit the template to have everything you want for your WordPress site.

Advanced Elementor Settings

To modify the template you chose, all you need to do is click on the individual elements that you want to change.

Each element has a collection of features divided into three parts within the Elementor menu: Content, Style, and Advanced.

Each of these tabs offers a different set of features you can play around with to your liking so that the element you’ve selected looks and functions exactly how you want it to.

Integrating WooCommerce Into Your Site

WooCommerce is a popular e-commerce platform that helps create an online store for your business. Paired with Elementor, you can create custom product pages that can help increase your sales.

In your WordPress dashboard, select the “My Templates” option, then the “Add New” button, choose a single product ass a template type, then click “Create Template.”

Just like searching for a standard template, this will load the Elementor template library and provide you with some templates to choose from.

Once you’ve picked a template, you can customize it with products, prices, images, and anything else you want to show in your online store. After you’ve finished customizing the page, click “Publish,” and everything should be ready.

Header and Footer

The headers and footers for your page operate a little differently from the rest of your website. You might be wondering why, but it’s pretty simple: they’re repeated all across your site, so they come from a template instead of the theme itself!

Step 1. In the WordPress Dashboard we look for Templates and then Theme Builder

Step 2. Create a new Template by clicking on Add New, and in the box that appears, select header, and in the template name, you can write what you want the template to be named and then click on create Template.

Step 3. When clicked, it automatically creates the template where we can now edit and customize our header.

Step 4. The creation of our header design will not be anything complicated. This works the same way we design the regular pages, except that several elements are unique to the Header. These are:

  • Site logo
  • Page title
  • Search form
  • Site title
  • Navigation menu
  • Site map

All that remains is for you to create your customized header.

Step 5. Once the header is created, we only have to publish it and select its display condition. This is very important because you can choose if you will display this template on the whole website or if you only want it to be displayed on specific pages.

Now how can we create the footer? The footer follows the same steps, except that when we select the type of template we want to make, instead of choosing a Header, we would select a Footer and then follow the same steps!


Getting started with Elementor is a simple process. You only need a little time and effort, and you can create a beautiful website with everything you want. Updating and adjusting your WordPress site is easy, and Elementor provides nearly limitless options without writing a single line of code!

Table Of Contents