Home » Website » Elementor » Elementor Basics in 7 Minutes (For Beginners)

Elementor Basics in 7 Minutes (For Beginners)

course 1, elementor

For those who are not familiar yet with Elementor, I will briefly explain the Elementor basics in 7 minutes.

The designing for all parts of your website such as the pages, blog posts, archive pages, the header and footer actually works in exactly the same way.

It’s super easy to learn! If you’re new to Elementor and it’s good to understand the basics first.
After this tutorial we will go over to designing the header and footer for the website.

Watch tutorial on YouTube

Tools I use in my tutorials:

Elementor Pro benefits

The Elementor Pro add-on has many extra options. With this add-on you can create everything from professional blog websites to webshops.

To summarize some important Elementor Pro benefits:

Design header and footer
Design blog pages
Create blog overview
Design archive pages
Design pop ups
Access to tons of professional templates
Access to lots of extra useful widgets

If you only have the free version of Elementor, you are limited in terms of options but it is certainly possible to create a professional website with it.

But with Elementor Pro you have the total package to create any website you want very easily.

On the image below you can see the features for the free version as well as for the pro version.

Install Elementor Plugins

In a previous tutorial I explained step by step how to install Elementor and also the Pro add-on.

As you can see these have been added here in the overview with the Plugins.

In the tutorial I made about the basic plugins I explained step by step how to install Elementor.

Install Hello Theme

After Elementor is installed you need to install the Hello theme. This theme is created by the same developers as Elementor so it works perfectly together.

After you have installed and activated the plugin and theme, you can use the Elementor editor.

In this tutorial I have explained how to upload a favicon with the Hello theme. I have also made a tutorial were I explain how to upload a logo with the Hello theme.

How to open Elementor editor

To learn the Elementor basics we start off with the Elementor editor. As I mentioned you can desgin every part of your website with the Elementor editor.

Before I’ll show you how to create designs I first want to show you how you can open the editor for the different parts of your website.

Now I’ll show you how to open the Elementor editor for posts, pages and different site-parts.

Design blogposts with Elementor

So I start off with the blogposts.

From the WordPress dashboard you can go to the overview with Posts. Here you need to click on Edit with Elementor for the post you want to design.

If you click on that this will open the canvas with the Elementor editor for this blogpost.

Design Pages with Elementor

Now I close this window again and I want to show you how to open the editor to design Pages with Elementor.

This works the same way. First you need to go to the overview with Pages and click on Edit with Elementor for a page.

As you can see, the editor is now displayed again.

Design Templates with Elementor

With Elementor Pro you can also design all Site parts of your website.

To do this I go back to the dashboard and then click on Templates in the left menu and click on Add New

Now you see Choose Template Type and here you can choose what kind of template you want to create.

For example you can choose from a Pop Up, Page or Blog and you can use templates for all parts of your website.

Once you have designed a template, for example for an individual blogpost template then all blog posts will have this same design by default when a new post is added.

You can also add specific rules to your template. For example you can create a template for posts from a specific category. You can also create a different design for posts from another category. That’s something I usually don’t do but it’s possible.

For now we choose the option Header and after that you can enter a name for the template such as Template Header. Then click on Create Template.

At Blocks you see all kind of templates and the Pro icon indicates that these are only available with the Elementor Pro version.

To view a template, you can click on it and by clicking on Back to Library you can return to the overview. You can import a template by clicking on Insert.

In this case I choose this template and click on Insert to add it to the canvas.

Now you see that the template has been added.

Add Template from the Elementor Editor

You can remove it again by clicking on the cross in the blue tab that becomes visible when you hover over the header.

Now the canvas is completely empty again and we can import a template from within the Elementor editor. You can do this by clicking on the map icon.

Now you can select what kind of template you want, in this case header is automatically indicated because we are now creating a template for the header.

But you can view all different categories by clicking on the drop-down arrow.

In the tab above you also see that Blocks is now selected, which means that you can only add sections of a certain category.

But you can also add complete pages in the Pages tab.

There are also different pages in the same style so that you can quickly create a complete site.

All the templates with the Pro icon are only available with the Elementor Pro version and the ones that don’t have the icon are also available if you only have the free version.

But for now we’ll continue with the header. So click on Blocks again and import a header template.

Sections, Columns and Widgets in Elementor

You can easily create your own designs from scratch or you can import nice looking templates to make things easier.

So after you have opened the Elementor editor you will see the canvas with all parts and you will see that lines appear on the screen when you hover over them.

For this example I have a header template on the canvas but you can design every part of your website with Elementor Pro in exactly the same way.

If you only have the Free version of Elementor then you use it to design the regular pages.

So the Pro version has same big advantages over the Free version.

To open the Theme Builder from within the Elementor editor you need to click on the icon in the top menu on the left.

Now click on the Theme Builder option.

Over here you can select which site part you want to design a template for.

You can also do this from within the WordPress dashboard by going to the Templates option below the Elementor option.

As you can see you have several options to choose from and as I already mentioned I now have the header template opened on the canvas.

So now you know how to select different parts of your website from within the Elementor editor. Now I close this window again to go back to the editor.

And for all the templates the designing with the Elementor plugin works exactly the same way.

The most important thing to understand is how to use sections, columns and widgets.

Those are the three Elementor basics you need to design a website.

You can select all parts by clicking on them and you can recognize the sections by the blue lines and the tab with the 3 options.

When you hover your mouse over a section you can select it by clicking on the icon with the 6 dots at the top in the middle of a section.

If you have done that, you will also see that Edit Section is now indicated at the top left of the screen in the purple bar.

Elementor basics – Sections

And there you will also see 3 different tabs which you can use customize the section.

So let me show them briefly now. First you have the Layout options, here you can set different things I will show exactly how it works in a moment.

In addition, you have the Style tab and the name says it all, here you can do various styling settings such as adding a color to the section or a background image.

And the last tab is the Advanced tab and here you can also set various options.

You can also add a new empty section by clicking the purple + icon at the bottom of the page.

If you click on it you will see that you can also indicate how many columns should be placed in the section. You can easily adjust this later on if you want to.

Elementor basics – Columns

For example, if you click on 3 columns, you will see that the section has now been added with 3 empty columns

You can recognize these by the dotted line and the gray square in the top left corner of each column. If you click on that, you will now see Edit Column at the top left of the purple bar.

Here again you have the three tabs (Layout, Style and Advanced) which you can use to adjust settings for the specific column that is selected.

You can also place multiple columns next to each other in a section.

By clicking with your right mouse button on the gray square you have different options and you can Duplicate or Delete a column for example.

Elementor basics – Widgets

The last Elementor basics I want to expplain are widgets. There are also knows as elements, which are two different words that mean the same thing.

You can add one or more elements to a column and you can view an overview of all available elements by clicking on the icon with the 9 dots in the top left corner in the purple bar.

You will see that there is a whole list of widgets available and these are classified by category such as Site, Basic and if you scroll down you will see the Pro widgets that are only available with the Elementor Pro version. All widgets without the Pro icon are available if you only have the Free version.

For example, you will see Social icons at the bottom and if you want to place them in a column you can just drag it into the column. This way you can add elements to columns.

Now that the widget is added you can select it.

You can recognize a widget by the blue lines with a pencil icon in the top right corner that you see when you hover over a widget with your mouse.

By using the three tabs Content, Style and Advanced you can make adjustments at the widget level, for example you can remove icons or add new ones and you can add links so the icons will link to your social media channels.

If you want you can also drag the widget to another column in another section.

You just have to click with your left mouse button on the icon and hold and drag and drop the widget in another column.

Elementor Navigator

By using the Elementor navigator you can also easily select sections, columns and widgets or adjust the order.

The navigator also provides a clear view of all parts on the canvas.

You can also select, copy or delete the different parts using the navigator.

If you have closed the navigator by clicking on the cross, you can add it again by right-clicking anywhere on the canvas and then select the Navigator option.

Or you can click on the second icon at the very bottom of the page in the gray bar.

Create your own templates

You can duplicate complete sections, columns or widgets with the right mouse button. As you can see, it all works very naturally.

You can also create your own templates.

For example, if you want to save an entire page you can click on the small arrow pointing upwards besides the button at the bottom and then you will see the option Save as Template.

You can also make a template for a specific section that you have created. To do this you just have to right click on it and select the Save as template option.

Then you have to enter a name and click Save to create the template and add it to the library.

Now you see that the template has been added in the My Templates tab, if you want to add it to another part of your website you can easily import this template from the library.

Another helpful feature is that if, for example, you have accidentally deleted or modified something in the settings, you can press Ctrl+Z to undo your last changes.

So this is very similar to commonly used programs like Word or Excel.

I will make separate tutorials on each widget and how to customize them and this will also be covered in the other tutorials you can find on my channel in which I explain how to set up your own website.

A lot of widgets also will pass by in this course on how to design your own affiliate website, so this will also show you how everything works.

You can also make your website responsive very easily by using the Responsive mode option in the bar below.

When you click on the icon you can select the view for desktop, tablet and mobile.

After you have selected one of those options then you can make specific changes and customize the design for that specific device.

You can do this the same way by using the three tabs that will appear in the left menu after you have selected a section, column or widget.

This also will be covered in more detail in my other tutorials.

So these were the Elementor basics you need to know as a beginner.

You can watch the video tutorial on YouTube over here.

Don’t forget to like and subscribe to the YouTube channel. I would appreciate that very much!

Also check out my other tutorials and you will see step by step how I customize every part of the website.

I will also go way more in depth on all things I mentioned in this quick tutorial.

Check out the recommended Elementor tutorials below:

Recommended software: