How To Use Elementor: Step by Step Tutorial

How long do you think it takes to build a website? Based on the content, theme, and features you need, developing websites from scratch can be done anywhere from just a couple of days to a few months. So, if you have your content ready and a clear picture of how you want your website […]

How long do you think it takes to build a website? Based on the content, theme, and features you need, developing websites from scratch can be done anywhere from just a couple of days to a few months. So, if you have your content ready and a clear picture of how you want your website to be, it shouldn’t take very long to get your website up and running. 

Using page builders like Elementor can greatly reduce web development time and provide you with stylish and optimized websites running within a day or two. Elementor has made it possible to develop a complete website with no need for coding or high-level programming experience. Need to check out an Elementor website? Check out this casino blog.

Does this sound good, and are you convinced? Let us show you how to use Elementor and introduce you to all of its awesome features.

Basic Features Of Elementor

First, let’s get cracking on the essential features of Elementor.

Drag And Drop Editor

Elementor has an intuitive interface where you can simply drag and drop page blocks and elements into the work area canvas and get them included in your webpage. You can visualize the webpage just as you build it. 

300+ Designer Made Templates

Beginners might find it overwhelming and nervous to start with a blank space. Elementor has got you covered with more than 300+ beautiful website templates that you can readily import and work on. 

All of the templates provided follow the best coding practices and the latest design standards and trends.

90+ Widgets

Widgets are a group of pre-built page elements that you can easily drop in a page to enable a particular feature. For instance, to include a form, you have to use a form widget. Similarly, Elementor has around 90 and more widgets for various controls like buttons, headlines, and more. 

Full Site Editor

Elementor let’s you work on the entire site from one place. It allows you to edit the header, footer, and content from a single workspace. 

Design Features

Some of the useful design related features from Elementor include:

  • Global fonts
  • Global colors
  • Global custom CSS
  • Background overlay 
  • Background videos
  • Background gradients
  • Enhanced background images
  • Shape divider
  • Blend modes
  • And so on.

How to Use Elementor

Here is a simple step by step walkthrough on how you can build amazing WordPress websites using Elementor.

Get The Technical Setup Ready

Make sure all the site core requisites like the domain name and web hosting service are set up and ready 

Install WordPress

Install WordPress from the official site Once you have installed and set up an admin account for your WordPress site, you can start building it, add new features, edit and publish the site to go live. 

Install Elementor

WordPress allows the installation of various plugins to help in website development and design. Elementor can be installed similarly as a plugin. 

To install Elementor:

  • Access your WordPress site dashboard
  • Go to Plugins-> Add New
  • Search for Elementor and click Install 
  • Once the installation is complete, click Activate. 

To enable and use the Pro version, purchase the Pro license based on Elementor pricing. You will have to paste the license code under the Elementor then -> License to make full use of all the Elementor capabilities. 

Create Sites Using Elementor

To create a site using Elementor, you can choose to follow either of two approaches. Import a theme and customize it using Elementor or start with a blank workspace. 

Let’s get acquainted with the Elementor workspace and show how to add, edit, and edit page elements first. 

Editing with Elementor

To start editing with Elementor, you will have to create a new page first. Here is how to create a blog page with Elementor:

  • Once created, access this page via Pages -> All Pages from the WordPress dashboard. 
  • Hover over the page you want to edit, and you will get a menu link. Click on Edit with Elementor.
  • The page will reload and take you to the Elementor work area, consisting of two main sections. 
  • The first section on the left consists of the editing controls, and the right section shows the canvas and how your website will look.
  • Elementor uses web page elements called sections, columns, and widgets to add new functionality and design to the webpage. 


Sections are the biggest building blocks consisting of several more sections. 


Columns are part of sections and contain the widgets


Widgets are the actual content blocks that contain text, image, button, form, or similar page elements. 

These elements can be edited to change their width, height, responsive attributes, color, and other formatting options. 

Clicking the + button allows you to add a new element, and right-clicking on a selected element allows you to choose from different customization options. 

Some Sample Options You Can Customize Include


The left panel of the working area can show you the different color schemes and palette to choose colors for your text, background, and so on. 


The typography of textual content can be easily changed by choosing preferred font families. You can also apply global typography changes across the site from one single edit. 


To include images into the page, you can click on the + sign and upload any image. You can choose images from the Media Library, click on Upload files and select the file you want to include.  

After including the background images, you can edit their size, position, add background overlay, and set colors for the image text. 

For regular images, you can set the regular CSS filters and similar customization options. 

Changing Page Layouts

Once you have included all the page elements you want, you can customize them to any desired layout. You can choose to add new columns, rearrange the column layouts, set the structure, adjust the widths, set responsive breakpoints, and more. 

Add Header And Footer Blocks

Elementor allows you to use a common premade header and footer block for all the pages or use a different header and footer for every page as you want. To add a header or footer block, 

  • Click on the + icon on the topmost/bottommost  section
  • Click on folder action and choose Blocks once the template library loads. Choose the Header category from the drop-down menu. 
  • Choose a header style you like and click on the  Insert button from the list of header blocks shown. 

Customize Content

You can add further widgets like contact forms, about us page, buttons, and so on to your liking. To edit the content, you have to click on the element and start editing the copy and textual element from the Elementor workspace. Save the changes and publish the site to reflect the changes. 

Your Turn

As you can see, designing your WordPress website with Eleme

Don’t forget to share your experience with us in the comments below.ntor is as simple as it can get. However, if you want to explore the best themes, here are best SEO-friendly WordPress themes you should get your hands on.

James profile pic
James Williams
Wordpress Developer
At 32, James has a 9-year industry experience as a freelancer within the WordPress development and maintenance domain. James has worked with hundreds of businesses over the span of his career and through those experiences...
Be the first to know

Subscribe to our Newsletter

If you want to receive monthly updates from us just pop your email in the box. We think that spam is for jerks. And jerks we are not.