How to Use It for Best Results

Elementor is one of the most popular WordPress page builders on the market. It can enable complete beginners to design an entire website from scratch. However, if you’re new to the tool, you still might find an Elementor tutorial useful. 🏗️

In order to make the most out of Elementor, you’ll need to have a good understanding of a few key characteristics. First of all, you’ll want to take advantage of its template library. You’ll also want to know a bit about its drag and drop interface, responsive design features, and AI potential. 🤖🤖

In this post, we’ll start by introducing you to Elementor. Then, we’ll provide you with an in-depth Elementor tutorial, walking you through some key features as we create a web page. Let’s begin!

An introduction to Elementor

Before we dive into our Elementor tutorial, let’s go over some basics. Elementor is a WordPress page builder plugin.

In the past, page builders were the best way to design an entire WordPress site without having to deal with any coding. Today, this is possible using built-in WordPress features like the Site Editor and the Block Editor.

👉 However, page builders like Elementor still give you more flexibility and customization options:

The Elementor page builder website.

Elementor enables you to create your website using drag and drop “elements” called widgets.

Additionally, it offers useful features for mobile web design. And, it gives you some cutting-edge functionality with Elementor AI. In a nutshell, Elementor enables total beginners to build stunning, professional-looking websites without ever having to touch a line of code.

Elementor tutorial for WordPress: a beginner’s guide

Now that you know a little more about Elementor, we’re going to highlight some key features and characteristics as we walk you through the process of building a web page.

The template library 🎨

One of the great things about Elementor is that it comes with a robust template library. These pre-made designs can help fast-track your website creation process.

After you’ve installed and activated Elementor, you should see a Templates tab in your menu:

Elementor templates menu in the WordPress dashboard.

When you’re brand new to the plugin, your Saved Templates will be empty.

However, if you’re using a premium version of Elementor, you’ll have access to pre-made templates in the Theme Builder section:

Exploring theme builder templates for the Elementor tutorial.

When you upgrade to a paid plan, you’ll get complete page templates for things like product pages, blog posts, and more. You’ll also get template parts for sections like headers and footers.

If you’re a premium user and you want to create a landing page, you can go to TemplatesLanding PagesAdd New:

Exploring landing page templates for the Elementor tutorial.

There’s also a Blocks tab which contains more template parts. You can open the dropdown menu to see a new Category:

Elementor tutorial on template categories.

Keep in mind though, if you’re using the free version of the plugin, you won’t be able to use these templates. In that case, simply continue on to the next section.

The drag and drop interface and widgets 🖱️

Now, the true Elementor tutorial begins! Let’s see how you can make a web page using the plugin’s drag and drop interface.

Go to your WordPress dashboard and navigate to PagesAdd New:

Launching Elementor in WordPress.

Hit the Edit with Elementor button to launch Elementor:

The Elementor page buider editor screen.

As you can see, you have your Elementor menu on the left and your content area on the right. Within your Elementor menu/panel, you’ll see all the “elements” or widgets you can drag and drop onto the page.

These widgets have straightforward names like Heading, Image, and Text Editor. They’re also divided into categories like Layout, Basic, Pro, General, etc.

To use a widget, simply click on it to hold it, and then drag it on to the right:

Elementor tutorial on how to drag and drop widgets.

We’re going to add a heading widget to our page:

A Heading widget in Elementor.

Once we add the module to the content area, our widget settings open on the left. To change our heading text, we can simply write in the text box under Title:

Elementor tutorial on modifying heading widgets.

We’ve written “Elementor Tutorial Example Page” in ours.

Widget customization and management ⚙️

Now, let’s experiment more with widget customization in this Elementor tutorial. Starting off, we’ll use the Image widget:

Adding an image widget in Elementor.

Click on the box below Choose Image to upload one:

Elementor tutorial on choosing an image for your image widget.

Use the Alignment features to center both widgets.

At this point, you might want to further explore your customization settings in each widget. They have tabs for Content, Style, and Advanced.

If we return to our Heading module, we can use the Style tab to change the color:

Changing Style settings in Elementor widget settings.

You can choose from your global theme colors, or use a color picker. In your Advanced widget settings tab, you can modify layout, background, borders, and more:

Opening advanced widget settings in Elementor.

Collapse and expand these sections by clicking on the arrows. It’s also important to understand how the larger structure of your Elementor page works. When you hover over any widget, you’ll see some options:

Elementor tutorial on containers.

Hitting the x will delete that widget. Meanwhile, when you click on the dots between the x and the +, you’ll open your container settings for that widget:

Edit a container in Elementor.

The container is the box that holds each page element. When you click on the + symbol, you can add a new container:

Adding a container on an Elementor page.

Now that you have a basic grasp of widgets and the drag and drop interface, we’re going to dive into some more advanced features. But first, now would be a good time to save your work.

To do this, expand your menu options using the arrow next to Publish. Save your work as a draft or template:

Elementor container settings.

Then, when you’re ready for the page to be made public, hit Publish.

Also, note that every page you make with the page builder will have a heading at the top that says “Elementor” followed by a number. This is generated upon creation. You can simply open the page in your Block Editor to delete it.

Mobile and responsive design controls 📱

95 percent of users worldwide access the internet using a mobile phone [1]. Therefore, it’s crucial that every website look good and function properly on every device.

To tap into your responsive design controls in Elementor, you can start by launching Responsive Mode in the bottom left-hand corner of your screen:

Opening Responsive Mode in Elementor.

This will launch some new settings at the top of your editor:

Elementor tutorial on responsive settings.

Perhaps the most useful feature here is the ability to view your current page as if it were on another device. By default, you’ll see how your page appears on desktop, but you can also check out a tablet or a mobile device view:

Elementor mobile device view.

Using a responsive WordPress theme is the best way to ensure your site is mobile-friendly, but these features are extremely valuable.

Additionally, you can access more responsive features in your Advanced widget settings:

Elementor widget's responsive settings.

Here, you can toggle buttons to remove certain page elements on certain devices. For instance, you might do this for a larger video on a homepage.

Elementor AI 🤖

Finally, one of the newest and most cutting-edge features covered in this Elementor tutorial is Elementor AI. With the free version of Elementor, you can use it to generate text, images, and even code, using built-in artificial intelligence (AI).

These features are super easy to use, you just need to know where to find them. To generate text, simply locate the Edit with AI button:

Edit text in Elementor using AI.

When you click on it, you’ll see a page that prompts you to connect to the tool:

Connect to Elementor AI.

After you complete the process, you’ll see the AI text generator box:

Elementor tutorial on using AI text generator.

Use it just as you would any other AI text generator. It even includes sophisticated options that let you change tone and translate text. You can use it to generate taglines, product descriptions, or any type of content you need.

If you want to use AI to generate images in Elementor, simply find the Create with AI button next to any image field:

Create with AI button in Elementor.

Click on it to launch the AI image generator:

Elementor's AI image generator.

On the left you can enter your promote and customize some image settings.

Lastly, you can add an HTML widget and generate custom code with AI. Just hit Edit with AI:

The Edit with AI button in Elementor's HTML widget.

This will launch your prompt screen:

Generating code using Elementor AI.

Just enter a description and hit Generate code. These are just a few ways you can use Elementor’s AI features for web design.

Conclusion 🧐

If you want to build custom web pages without the hassle of coding, Elementor may be just the solution for you. Still, there’s a bit of a learning curve, so an Elementor tutorial can be super useful.

To start off, you’ll want to get familiar with the drag and drop interface and basic widgets. Then, you’ll be able to customize widgets and manage containers. When you’re ready, tap into more advanced options for mobile-optimization. You can even use built-in AI features to fast-track the process. 🏗️

Do you have any questions about this Elementor tutorial? Ask us in the comments section below!

Free guide

4 Essential Steps to Speed Up
Your WordPress Website

Follow the simple steps in our 4-part mini series
and reduce your loading times by 50-80%. 🚀