Elementor Tutorial for Beginners – Step by Step Guide to Build Your Website Content Correctly | Complete Tutorial 2020

This is the complete Elementor tutorial for beginners for building website content.

If you’re like most of us,

1. You want to create a visually stunning and highly functional website without learning web programming.
2. You want an easy way to build and customize your own WordPress site.

Then the Elementor drag and drop page builder is the solution for you. Elementor allows you to create, edit, and customize the layout of your WordPress site without having to write any code.

Let’s dive into it right now.

(Note: Elementor is a plugin that works only on WordPress. If you haven’t had a WordPress installed in your web hosting, please start from here to create your WordPress website.)

1. What Are the Elements of Website Content?

Basically, the content throughout a WordPress website is built up using pages and posts. In order to make your site as user-friendly as possible, it is essential that a balanced combination of posts and pages is utilized to curate your content fully.

Pages are a great way to add timeless, static content that doesn’t need a publishing date, such as the “Home,” “About,” and “Contact Us” pieces of a site.

On the other hand, posts provide the opportunity to create dynamic content that carries a publishing date and can be updated on the fly.

Overall, the key to excellent website content is the careful curation of posts and pages, which together can provide highly engaging experiences for visitors to your site. 

2. The Easiest Way to Build Website Content for Beginners – Drag and Drop.

There are many premium WordPress themes that come with a variety of different layouts. However, many WordPress beginners find it difficult to change or customize page layouts to fit their preferences.

Thankfully, there are now several fantastic drag and drop friendly page builder plugins available in WordPress. They allow WordPress developers to customize every component of their websites without having to write a single line of HTML, CSS, or JavaScript.

3. The Elementor Drag and Drop Page Builder is the Best Tool for Content Curation

Elementor is a powerful drag and drop page builder that empowers even the newest of WordPress developers to create professional-grade websites with ease. At its core, Elementor is a live page builder plugin, which means that its users get to see changes to their pages live as they are being edited in real-time.

Users can create sections and easily select the number of columns they would like for each section. Additionally, they can drag, then drop widgets from the selection panel to their desired location. Elementor comes with tons of exciting widgets, including some of the most commonly used website elements seen throughout today’s websites. From basic images and text widgets to advanced accordions, sliders, testimonials, social media feed, and so much more.

Don’t want to dedicate the time to build your own layout? Elementor can also handle this task with ease, thanks to its many ready-to-use templates that can be easily inserted into your existing web pages. Overall, Elementor is one of the best WordPress development tools available and can help even the newest of site developers create professional work in no time whatsoever.

4. Elementor Versus Elementor Pro: The Main Differences

At the end of the day, Elementor Pro is technically an add-on that users can purchase to get more functionality out of the free Elementor plugin. As such, when users buy this add-on, they’ll have access to all of the great tools provided by both active plugins on their site. With over 30 additional widgets provided by Elementor Pro, features such as Header & Footer builder, dynamic single post design, popup, Form and WooCommerce widgets can be easily integrated across your site.

Furthermore, Elementor Pro allows users to access the full PRO Elementor template library. This means that you’ll have the ability to choose between dozens of great options that could form the basis of your next great website.

Elementor Pro isn’t for everyone. For example, if you just want to design some basic, yet highly attractive content, free Elementor might be the best option for you. This also goes for those who are already using a flexible theme like WP Astra Pro, which means that they might not need the extended features of Elementor Pro.

On the other hand, if you intend on building more complex content and landing pages or want to incorporate WooCommerce into your site, Elementor Pro is likely the best option. This is especially true for WordPress developers looking to build their entire theme using the Elementor interface, as having access to the full Elementor template library can pay impressive dividends for detail-oriented designers.

Just like some of the people, I was using free Elementor to create my website when I started. I installed a lot of other plugins to compensate with what Elementor lack of, for example, header & footer builder. However, I ended up with a lot of plugins installed, and some even are not 100% user-friendly and compatible. This also caused a lot of time spent on troubleshooting.

I would say everything goes nice and fast after I used Elementor Pro. The number of plugins and development time has been greatly reduced for building a perfect website. Hence, I strongly recommend to try out Elementor Pro with $49/year only if you want to make your life easier. You will definitely love it after using it. In my Elementor tutorial, I’m going to use Elementor Pro as I think this way is really “healthier” for your website. So, this is also the Elementor Pro Tutorial.

5. Before We Get Started…

Before we use Elementor to build up the pages & posts. Let’s prepare some materials and do some configurations for the website.

Decide the branding color(s) and font(s). For example primary, secondary, text and accent colors. If you have no idea what colors to choose, you may refer to ColorHunt to choose for your branding colors. And Elementor also supports all fonts from Google Fonts.

Prepare a website logo. If you don’t have, you may visit Fiverr to get a logo as low as USD $5.

Decide website pages structure. For instance.

• Home
• About
• Services
• Contact
• Blog
  • Post 1
  • Post 2

Prepare a design of your website. Perhaps sometime you just need a concept in your mind that should be enough. If you want to get a professional web design service, can go to freelancer website such as Fiverr to look for a designer.

6. WordPress Configuration and Cleanup

6.1. Change permalinks Structure

Settings -> Permalinks -> “Post name” structure. Choose “Post name” and save changes. This changes the style of your URL and it will help in SEO.

6.2. Delete All Posts

Posts -> All Posts -> Select all posts -> Move to Trash (Bulk Actions).

6.3. Delete All Pages

Pages -> All Pages -> Select all pages -> Move to Trash (Bulk Actions).

6.4. Create New Pages

Pages -> Add New -> Name title -> Publish. Create new pages according to your website routes structure. For instance, Home, About, Services, Contact & Blog pages. Write your page title name and click publish.

6.5. Change Home Page and Blog Page Display Settings

Settings -> Reading -> A static page -> Change Homepage & Posts page. Select your homepage displays from a static page. And select the home page that you have created just now and also do it for the post page if you have a blog.

6.6. Create A Menu

Appearance-> Menus -> Create a new menu -> Name Menu -> Create menu -> Add pages to menu -> Tick primary menu -> Save menu. Create a menu according to your website routes structure. Create a new menu. Fill in a name for the menu for example: “Primary Menu” and click create menu. Select the pages from the left column and click add to menu. The pages will appear on the right column, you can drag and drop to change the position of the page. Remember to tick make it as the primary meu. And finally click save menu. A menu is then created.

Until this step, you have done the basic configurations of WordPress settings. Next you will set the settings for Elementor Pro.

7. Elementor Tutorial – Settings

Elementor -> Settings. You can leave the default settings unchanged or you can play with the settings. I usually use the default settings provided.

7.1. Elementor Editor Settings

Pages -> [Any Pages e.g. Home] Edit -> Edit with Elementor. You will be redirected to Elementor page builder editor.

Menu -> Change settings.
Default Color. Choose 4 branding colors for your primary, secondary, text and accent colors.
Default Font. Choose the font family and its weight for each type of text.
Color Picker. Choose some of the most used colors, These 8 color options will be your preference colors which will always show up.
Global Settings. Don’t change.
Dashboard Settings. Don’t change

8. Elementor Tutorial – How to Use?

8.1. Editor Explained

Before starting, let’s understand what are the components inside the editor. There are two main columns exist. According to the image below, the top and bottom action bars, as well as the widget library, are located inside the control panel (left column). The right column is the live preview of a page.

The control panel provides drag and drop widgets to let you design a page at the live preview and whatever design shows up in the live preview represents your actual page design. The hide button is used to hide the control panel to let you see the complete website design with full width. There are several actions in the bottom action bar.

1. Settings. Settings of a page / post / template.
2. Navigator. Display a navigation panel to help you select your elements in the page easily.
3. History. To let you undo the changes you made.
4. Responsive mode. To change the page view among desktop, tablet and mobile view. You need to check and ensure your page is working on all three views by switching the views.
5. Preview changes. This will prompt out a new tab to show the real page design.
6. Publish / Update. This is to save the changes
7. Save options. This gives extra options for saving. You can save it as draft without publishing or can save it as template to be used in other page.

8.2. Section, Column and Widget Explained

Section, Column, and Widget. Basically a page built by Elementor contains three main elements which are section, column and widget. Section is the outermost wrapper and a page consists of several sections / rows. There are inner wrappers inside a section called columns. A section can contain at least a column or several columns. All of the visual widgets are inserted row by row in a column. For examples of visual widgets are heading, image, button, etc.

There are more than 80+ widgets available for you to build up your page in the Elementor Pro version. The images below indicate how each section, column, and widgets look like.

8.3. Properties of Section, Column and Widget

All the section, column and widgets have their own properties. Both section and column have layout, style and advanced properties whereas most of the widgets have content, style and advanced properties.

Layout property. Controls the size of a section / column and also controls the children position.
Style property.  Controls the appearance of an element for example the color, background image, border, shadow, typography etc.
Advanced property. Provides extra advanced properties for example controls the margin and padding of an element.
Content property. Fill in your content of a widget for example image and sentences etc.

8.4. Extra Tips

Right click on any element. There are extra functions that can be showed up when you have a right click on certain element. The image below shows the situation. For instance of useful function is duplicate and past style.

The image below shows the box model of an element. This must be understood when you are designing your page.

Content – The content of the box, where text and images appear
Padding – Clears an area around the content. The padding is transparent
Border – A border that goes around the padding and content
Margin – Clears an area outside the border. The margin is transparent
Please take note that each padding, border and margin have their sides at the top, right, bottom, and left.

9. Elementor Tutorial – Create a Header (Only available in Elementor Pro)

Templates -> Theme Builder -> Header tab -> Add New Header- > Choose “Header” type -> write a name for the template e.g. “Header General” -> Create Template -> Select one template -> Insert.  In this step, you are going to produce a header for your website. Follow the steps according to the image shown. You will end up entering the Elementor editor with the header template chosen.

You can do your customized header based on the template you have selected. It has slightly different compared with when designing a page. Especially you are provided with site-related widgets such as Site Logo and Nav Menu because these are common components for a Header.

Start customizing by building the structure of your header for example, how many sections needed, need how many columns, inside each column what widgets to put, what content for each of the widgets and so on. After building the structure and putting all the content, then only start designing the appearance or the styles of each element. The very last step is to click the arrow button beside the publish / update button and choose Display Condition.

Add Condition -> Include -> Entire Site -> Save & Close. Let’s apply this header to entire site initially. You can create several header templates for different kind of pages or posts.

10. Elementor Tutorial – Create a Footer (Only available in Elementor Pro)

Templates -> Theme Builder -> Footer tab -> Add New Footer- > Choose “Footer” type -> write a name for the template e.g. “Footer General” -> Create Template -> Select one template -> Insert -> Start designing -> Save display condition. This step is very similar to the previous step when creating the header template. Just repeat the previous steps to create your footer template.

11. Elementor Tutorial – Build Pages

Pages -> Hover to Home page -> Edit with Elementor. We already have the design of header and footer templates. Now is the time to create your main content of the website which is pages. In this step, you have to design for every single page you created for example Home, About, and Contact pages. The designing steps are similar when you designed your header template, the only difference is it has more sections to be designed. Design the sections row by row. For each section:

1. Insert section with the number of desired columns.
2. Drag & drop widgets to the column you want it to be.
3. Insert content of the widgets.
4. Change the properties / styles for section, column and widget.
5. When you are satisfied with the design, click publish / update.
6. Your page is now live.
7. Repeat these steps to design for other pages.

12. Elementor Tutorial – Build Post Template (Only available in Elementor Pro)

Create several post e.g. post 1, post 2
Posts -> Add New -> Name the title -> Put some content inside -> Publish. Repeat this step to create the number of posts you want.
Note*: Remember to come back here again to continue adding /updating your content.

Templates -> Theme Builder -> Single tab -> Add new single -> Select “Post” type and Name the template as “Post General” -> Create Template -> Select a template post -> Insert. This is similar to header template, you are preparing a post template first.

Single Settings -> Choose “Post” -> Choose a post topic -> Apply & Preview. Before designing your post template, just make sure you choose a post created previously to use as a reference for the post template.

It is time to design your post template. It is provided with post related widgets this time. The design procedure is the same as the previous design process.

Add Condition -> Include -> Posts -> All -> Save & Close. To apply this post template for all of the posts created. You can create several post templates perhaps for different categories of posts.

13. Elementor Tutorial – Check Mobile Responsive for Your Design

Mobile responsive design means the design of a website when it is loaded on mobile devices such as tablet and mobile phone.

Switch to different devices’ view for checking the design. You have to check the design for tablet and mobile phone views from Header (Section 7) to Post Template (Section 9)

Adjust properties for each mobile device. Some properties (See below) consists of a desktop icon beside the property name. Once you click it, it will expand. You can set the property value for tablet and mobile phone. Or else, if left empty, they will follow the desktop’s property value. Some properties which can set their responsive values are size, alignment, margin, padding, border, image

It’s Your Time

That’s all the Elementor tutorial. It is time to get your hands dirty to think and build all the content.

What you need to do after that, is to go back to Pages and Posts tabs to keep adding/updating your content. Keep practicing and make the development process faster and smoother.

After complete inserting all your content, you may go to GTMetrix to check for your website loading speed.

If you find it is slow (more than 3s), there are several factors that can affect your website speed, for instance, web hosting, WordPress theme, cache plugin, content delivery network (CDN) and etc. You can check out my complete WordPress speed optimization guide to optimize your website speed.