elementor

Elementor Page Builder: A Free 101 Guide for Every Beginner

Table of Contents

Introduction 

Does Designing and customizing your website seem daunting? Well, not anymore. In the age of WordPress and Page builders, basic website customization is just a piece of cake. 

One of the best things about WordPress and Page Builders is that you don’t have to be a professional website developer or a hardcore coder to build a website. Undoubtedly, Page builders work as a cherry on the cake for WordPress websites. It helps you to set structure and design pages with minimal effort and time. 

In this article, we’ll talk about one of the most popular page builders: Elementor. You will find everything about the Elementor Free Version, from the installation process to helpful tricks and tips. 

We also conduct an Elementor Workshop for all beginners who are struggling to design WordPress pages. If in case you want a one on one guidance in the elementor page builder plugin and elementor pro plugin Check the 06 Day Elementor Workshop Tutorial here.

If you are starting with Elementor, it will help give a full read to this article for brushing up your Elementor skills and learn what is elementor in WordPress and how to use elementor in WordPress. 

Let’s Dig In! 

What is Elementor Page Builder? 

elementor

Elementor is one of the most amazingly popular visual drag and drop WordPress page builders. It offers advanced multiset tools to build beautiful websites in the easiest way possible. It comes with multiple styling options and provides a website building framework to easily design creative & stunning websites. 

Right now, Elementor impressively powers more than 5 million sites! 

What is so special about Elementor?

Elementor allows you to create a beautiful website just by arranging blocks of content. No additional coding skills are required! One of the most beneficial & powerful features is frontend editing, allowing you to make live edits without tangling between the editor and the preview mode. 

Why you should use Elementor 

To use and work with Elementor, you don’t have to be a coding expert or a professional web developer. Elementor provides you with dozens of advanced widgets that you can drag, drop, and customize without relying on developers for help. 

Elementor comes in both Free and Pro versions, and if you’re a beginner or just started with web designing, I would suggest you play with the Elementor Free version first. The free version of Elementor also includes plenty of features that helps you to create flawlessly working websites. 

What are the Elementor Themes in WordPress?

Is Elementor a Theme or Plugin? or Is a WordPress Theme needed when we have installed Elementor page builder in WordPress – these are some of the central questions for themes, elementor themes and plugins. 

Elementor Themes are the everyday WordPress Themes that has more compatibility with Elementor page builder. That’s it!

Let’s make some points clear initially here before moving on with the basics:

  • Please note Elementor is a plugin that helps you to design and build webpages on a WordPress platform
  • You should have a WordPress Theme that is active irrespective of installing the elementor free or pro plugin page builder plugins.
  • Elementor is compatible with most themes, but specifically, some WP Themes are developed for WordPress Elementor Page Builder and keeps updating with the changes of Elementor’s updates.

We have covered the same in the article – 7 Best Free Elementor Themes for WordPress for 2021.

Elementor Page Builder Free Version 

Elementor free version provides 40+ free widgets with great designing options and innovative features. Developers can use these widgets to create content, like Buttons, Heading, Testimonials, Progress Bars, and many more.

Check the full widgets list here.

Apart from content widgets, Elementor free version also includes a Template Library that provides impressive Pre-Designed Full Page and Section Templates. You can use templates to create beautiful web pages. 

Undoubtedly, Elementor is entirely user-friendly and pretty easy to use, but to start with Elementor, you’ll surely need some guidance. 

Let’s get started with Installing & Activating Elementor free version! 

How to Install and Activate the Elementor Plugin

Like other WordPress plugins, installing the Elementor WordPress plugin is relatively easy and straightforward. You can install the Elementor plugin via its official site Elementor.com or install it directly from the WordPress Dashboard. I am assuming you already have a WordPress site, so let’s see how you can install the Elementor WordPress plugin straight from WordPress Dashboard. 

Installing Elementor via WordPress Dashboard 

  • Go to Dashboard, click Plugins > Add New. 
install elementor plugin
  • Now Search for Elementor and click Install.  
elementor page builder installation
  • Once the installation is complete., click Activate.
activate elementor plugin
  • The below screenshot is how your WordPress Dashboard looks like after installing and activating the free version. 
elementor free page builder

Now that you could successfully install and activate Elementor on your WordPress websites let’s start understanding some basic settings and features of the Elementor free version. 

Elementor Basics 

Elementor provides you with options to turn your design visions into reality. With the front end editing and drag and drop feature, you can create any website easily. But before we proceed to the significant part, let’s discuss some basics of Elementor’s frontend and backend settings. 

Let’s start with understanding the Backend Settings first. 

Elementor Backend Settings

To view Elementor backend settings. Click the Elementor icon on the left panel of the WordPress Dashboard, and by default, it will open the Settings Page. 

elementor backend settings

Elementor settings page consists of three tabs General, Style, and Advanced.  

General Tab

elementor backend settings - general tab

The general tab is the first tab of Elementor settings, and here you get options to: 

  • Set which post types, i.e., Posts or Pages, will be editable in Elementor. 
  • Disable Elementor’s Default Colors, and allow Elementor to inherit the colours from your theme. 
  • Disable Elementor’s Default Fonts, and allow Elementor to inherit the fonts from your theme. 

Settings Tab

elementor backend settings - settings tab

After Elementor’s 3.0 Update, the Style tab settings moved from backend to frontend. Users can find these style settings within Elementor Editor’s Settings Panel > Hamburger Menu > Site Settings. 

Advanced Tab

elementor backend settings - advanced tab

It’s is the third tab of the Elementor settings page. As you are beginning with Elementor, I would suggest you not to alter these settings and leave it as it is.  

Role Manager 

elementor role manager

Role Manager is an advanced feature of Elementor that allows you to assign different access privileges for each user role. 

With the Elementor free version, you can choose to restrict specific user roles from accessing the Elementor editor. 

You can assign permissions to these default roles: 

  • Editor – Can publish and manage their own and other’s posts. 
  • Author – Can publish and manage their posts 
  • Contributor – Can manage their posts but cannot publish them.
  • Subscriber – Can only manage their profile 

How you can Manage Roles in Elementor 

  • Go to your WordPress backend and click Elementor > Role Manager. 
  • Here you will see the list of user roles. Click on the drop-down menu, and you’ll see two permission options for each position or role. 
  1. No access to the editor: This restricts the user altogether from entering the Elementor editor. 
  2. Access to edit content only: This option lets the user change the content and not the style or layout. You can only access this option if you have Elementor Pro.

Because we are talking about the Elementor free version, this information on Elementor’s backend settings might work right for you. Let’s now explore Elementor’s frontend settings.

Elementor Interface

To understand Elementor’s interface, we need to create a new page on WordPress and edit it with Elementor.

To begin,  

  • Go to your WordPress dashboard, and on the left, click Pages > Add New.
add new wordpress page for elementor
  • Click Edit with Elementor to enter Elementor Website Builder. 
edit with elementor
  • The screenshot below is how the Elementor panel looks like for users. 
elementor frontend editor view

Sections, Columns, and Widgets 

Elementor editor mainly consists of three main building blocks: Sections, Columns, and Widgets. 

  • Sections are the enormous building blocks, where you can add groups of Columns and Widgets. 
  • Columns are individual segments that contain Widgets. 
  • Widgets are separate & individual elements. 

To design a page with Elementor, you need to combine these three blocks. You get complete control over the appearance of each of them. 

Elementor Panel Overview 

elementor page builder panel overview

Let’s jump in and learn how to use elementor and the options in the elementor panel.

  1. The Content Area: Here, you can add sections, select your structure, drag and drop widget and start designing your page layout. If you don’t want to hustle with the page designing process from scratch, you can add a pre-designed section & full-page templates. I’ll explain more about Templates in the Working with Elementor Templates section. 
  2. Elements/Widgets: These are the building blocks, or we can say small features that we can combine and customize to design our pages. 
  3. Settings: From here, you can Update, Undo changes, Preview your page design on different devices. 

Let us understand Sections, Columns, and Widgets settings in detail. 

Creating your First Section 

  • To create a Section, click the + icon in the Elementor content area. 
add section in elementor
  • Select your structure in elementor editor. 
select structure in elementor

Section Overview 

After creating your first-page section, you’ll be able to see three tabs: Layout, Style and Advanced Tab on the left side of your Elementor panel. These tabs give you complete control over the editing property of your section. You can adjust section height, width, set background colour, and many more. 

Let’s learn more about Section Tabs: 

Layout Tab 

The layout tab is the first tab of your section. From here, you can set the layout of your page section by altering multiple given options.

layout tab of section in elementor editor

Layout Options

Content Width : From here, you can set Content Width to Boxed or Full Width. If you choose the content width type as Boxed, then you can use the slider to set your width.   

Columns Gap : As the name says, from here, you can set a gap between your columns. 

Height : Define column height from this option. You can choose from the three height options available: Default, Fit to Screen, and Min Height. If you set a Min Height, then use a slider to select your section height as per the designing need. 

Vertical Align : Set your Section content’s vertical alignment as per design. 

Overflow : Select how should the elementor handle content that overflows its container. The default option allows the overflow. Select Hidden to hide the overflowing content.

Stretch Section : If you want to display the section on the page’s entire full width, enable this option. 

HTML Tag : From here, you can set an HTML Tag for your section. Elementor provides various types of HTML tags that you can choose from as per your need.  

Style Tab 

style tab of section in elementor editor

Style Options

Background: Select between Classic, Gradient, Video, or Slideshow background. 

Background Overlay: Choose between Classic or Gradient. 

Border: From here, you can set your Border Type, define Border Radius, and add Box Shadow. 

Shape Divider: Choose shape divider style, colour, width, height, etc. 

Typography: Set Typography Colors for the section. 

Advanced Tab 

This Advanced tab is the third tab of your section. From here, you can define advanced settings such as margin., padding, motion effects, etc. 

advanced tab of section in elementor editor

Advanced Options 

Margin: From here, you can set the margin for your section. 

Padding: Set the padding for the section. 

Z-Index: Z-Index helps you to specify the stack order of elements on your page. 

CSS ID: Define CSS ID for your section.

CSS Classes: Add CSS Classes for your section. 

Motion Effects: Add motion effects to your page elements. 

Responsive Options 

Reverse Columns: Enable this option to reverse the order of your columns on both Tablet and Mobile. 

Visibility: Show or Hide section on Desktop, Tablet, or Mobile. 

Attributes: This option lets you add custom attributes to any element. But this feature is not available with the Elementor free version. 

Custom CSS: From here, you can add any custom CSS to any widget, but this is also not available with the free version. 

Column Overview 

Just like sections, columns also consist of three tabs: Layout, Style, and Advanced. 

Layout Tab 

layout tab of column in elementor editor

Layout Options 

Column Width: Use this option to define your column width. 

Vertical Align: From here, you can set your column content’s vertical alignment. 

Horizontal Align: This option gives you the flexibility to horizontally align the inline widgets placed in the same row. 

Widgets Space: Adjust the space between inline widgets. 

HTML Tag: Set an HTML Tag for your column. 

Style Tab

style tab of column in elementor editor

Style Options 

Background: Choose between Classic, Gradient, or Slideshow background. 

Border: Set your Border Type, define Border Radius, and also add Box Shadow. 

Typography: Set Typography Colors for the column. 

Advanced Tab 

advanced tab of column in elementor editor

Advanced Options 

Margin: From here, you can set the margin for your column. 

Padding: Set the padding for the column. 

Z-Index: Z-Index helps you to specify the stack order of elements on your page. 

Motion Effects: Choose an animation from the drop-down menu. 

Responsive Options: Show or Hide column on Desktop, Tablet, or Mobile. 

Attributes: Add custom attributes to any element. But this feature is not available with the Elementor Free version. 

Custom CSS: Add any custom CSS to any widget, but this is not available with the free version. 

Elementor Widget Overview

To learn and get an idea about Elementor widget settings, we’ll add a widget to our page.

  • Drag a specific widget from the left panel and drop it into a column.
add widget in elementor editor
  • Now to edit the widget, click the blue pencil icon. 
edit the widget in elementor editor
  • Here we’ll see Elementor Image Widget settings; you can add your preferred image to the widget and customize it the way you want. Just remember, every widget element has a different set of settings based on its working process.

Like sections and columns, every Elementor widget has three primary tabs: Content, Style, and Advanced Tab; I’ll explain each tab’s properties in detail. 

Let’s start with the first tab:

Content Tab 

content tab of widget in elementor editor

The content tab allows you to set the content of your widget. The content could be in any form; it can either be a text, image, or video. 

So, for Image Widget, Image works as content. You can add any custom image of your choice, set its size, define its alignment, and add a caption from the content tab. 

Style Tab 

style tab of widget in elementor editor

Style tab is the tab where you design, customize, and add styles to your widget. Again styling properties are different for every widget. 

For Image Widget, you can set Image width and height. Add border and border-radius. To make it more engaging and attractive, you can also box-shadow to it. 

Advanced Tab 

advanced tab of widget in elementor editor

From the advanced tab, you can add Margin and Padding to your widget. You can add motion effects, background, define positioning, and make your widget responsive for all device types. 

I hope you have completely understood the Sections, Columns, and Widgets settings and properties. Now we are moving to our next step that is Building a Page with Elementor.  

Build Your First Page with Elementor 

As we already know, Elementor has three main building blocks: Sections, Columns, and Widgets. 

Sections are the giant building blocks that hold a group of Columns. Columns sit inside sections. The placement of widgets is inside columns as per the need and feature required by the developer. 

You can easily control Sections, Columns, and Widgets using the handles. Now to build a page, first, we need a new section for our page. 

section column and widget handle

Create a New Section 

  • To add a new section, click the + icon. 
  • Now choose your column structure. 
  • Right-click to Edit, Duplicate, Delete, and for more options.

Column Settings 

  • Click the column handle to set the Columns Width. 
  • To add more Columns, Right Click > Add New Column. 
  • Drag and Drop Widgets to your Columns 

Insert a Widget 

  • Insert widgets inside columns. 
  • Click on the blue pencil icon on the right to see widgets’ settings.
  • You can set Widget width by the Column width. 

Editing with Elementor Page Builder

To edit the Section, Column, or Widget, Just right-click their handle. 

elementor page builder right click handle menu

You can see the editing options available in Section, Column, and Widget. All these options are pretty easy to use. You can easily copy/paste elements style, reset style, duplicate and delete content using these options. 

Setting up Page Layout

Page Layout is an option that helps you to control how the pages may look in the frontend. Elementor provides multiple page layouts options to set the layout of your page. There are three different page layouts available with Elementor: 

  1. Default Layout: Default layout fetches details from a WordPress theme. It contains the page layout of your WordPress theme that you have activated. 
  2. Elementor Canvas: Elementor Canvas layout allows you to design your page from a blank canvas. It excludes all your theme elements, such as Header, Footer, or Sidebars. 
  3. Elementor Full Width: Elementor Full-Width layout makes your content full width. It includes the header and footer. 

Using Elementor Full-Width Template 

Elementor full-width page layout allows you to override the default page width and use a full-width design on any theme. 

Let’s check how you can use the Elementor Full-Width Template: 

  • Create a New Page, and click on Edit with Elementor. 
  • Click on the settings, i.e. gear icon on the bottom left side. 
settings icon on elementor panel
  • Now under the Page Layout option, choose Elementor Full-Width. 
Elementor Full-Width page layout
  • You can see a full-width page design with a default Header, Footer, sidebars and full-width container. 

Using Elementor Canvas Template 

If you want a blank page without any header, footer, or any other page elements, you can set Elementor Canvas Layout for your page layout. 

Canvas templates are great for creating specific pages such as landing pages, maintenance mode pages, coming soon pages, etc. 

  • Create a New WordPress Page, and click on Edit with Elementor. 
  • Click on the settings, i.e. gear icon on the bottom left side. 
  • Under the Page Layout option, choose Elementor Canvas. 
Elementor Canvas Blank Page Layout

Save a Page as Draft

 If you don’t want to publish your page immediately, you can also save your page as a draft in the Elementor. To protect your page as a draft:

  • First, open the page with the Elementor Editor. Next to Publish/Update button, click on the up arrow icon and select the Save as a Draft option in the bottom left of the page.  
save page as draft in elementor

Preview & Publish the Page

To preview your custom made page, click on the eye icon on the bottom left side.  

preview button in elementor

If your page design is good to go, then click the ‘Publish ‘button. 

publish page in elementor website builder

Click ‘Have a Look ‘to view the published page. 

Responsive Design/Editing with Elementor

 If you are designing a website, you can’t ignore your web pages responsive properties. They must look good and perfect on each device type, be it a small screen device like a mobile or a big screen like a laptop.

If you are using an Elementor page builder, you don’t have to worry too much about your page responsive property. Elementor includes advanced responsive controls for each widget, section, and column. You just need to alter settings according to the device type, and your beautiful looking web page is ready. 

Let’s see how we can create our web pages to look perfect on any device type: 

Responsive Controls in Widget Settings 

Go to your widget’s Style tab and look for the Viewport Icon (Desktop icon). 

Viewport - Responsive Controls in Widget Settings
  • Now click the specific device icon and adjust settings according to the device type. 
Viewport - Responsive Controls in Elementor Widgets

Responsive Controls for Sections 

  • Go to the Layout Tab of your Section. 
  • Now click the option for which you want to alter responsive settings. 
responsive controls for sections

Show/Hide Sections/Columns Based on Devices (Desktop, Tablet, Mobile) 

Let’s say you want to hide a specific section, column, or widget on any particular device. You can easily do it with Elementor. 

  • Go to the Advanced Tab of your section, column, or widget. 
  • Now look for the option Responsive. 
  • Here you can see three possibilities, Hide On Desktop, Hide On Mobile and Hide On Tablet. Enable these options as per your choice. 
Hide on Desktop, Hide on Mobile and Hide on Tablet

Working with Elementor Templates in WordPress

One of the great and most useful features of Elementor is Elementor Template Library. Includes many pre-designed full-page and section templates that help you to get started with your first project. 

Elementor not only gives us the versatility of importing and exporting templates, but they also make it easy to reuse and save the same template for many projects. 

This section will explain everything about how to use Elementor templates, from using Free Elementor Templates to the Import/Export feature. 

Apart from the above free templates, you can find stable, free and premium elementor templates at various reliable and reputed websites. 

Users can get these ready-made templates according to their need from these reliable websites and get their landing pages or webpages ready within a couple of hours. 

We have an article dedicated solely to this: Elementor Templates Free & Pro: Where to Find 7 of the Best.

Using Elementor Free Templates 

  • To access Elementor templates, Click the Folder icon on the Elementor editor. 
library icon for free elementor templates
  • After clicking the icon, a new window appears with Blocks, Pages, and My Templates tabs. 
elementor templates
  • Blocks are the Section Templates, Pages are the Full-Page Templates, and My Templates are the user’s saved templates. 
  • Click the magnifying glass icon to see the preview of the selected template. 
preview of elementor templates
  • Click Insert to add the chosen template.
insert a template from elementor templates library

How to Save a Section as a Template 

Apart from the whole page, Elementor gives us the flexibility to save a single section as a template. Let’s say you have built a contact section on your page and want precisely the same contact section on every page of your website. 

Instead of designing that contact section on every page, you can save the particular section as a template and use it on every page of the website. Let’s see how you can save a specific section as a template: 

  • To save a section as a template, choose the section you want to save and right-click on the Edit Section handle. 
save a section as a template with right click on section handle in elementor
  • After clicking the section handle, a menu appears with a few options; choose the Save as Template option. A popup will open with a chance to give your template a proper name and save it. 
choose a name for your section which is to be saved as a template

How to Save a Page as a Template 

  • First, open the page with the Elementor Editor. In the bottom left of the elementor editor page, click on the Up Arrow icon and select the “Save as Template” option.
save a page as a elementor template
  • After clicking the save as template option, a new popup window appears; give your template a name and save it.
give a custom name to the saved page template

How to Export Elementor Page/Templates 

  • Now you can export templates from the WordPress dashboard. For exporting template, open WordPress dashboard > Templates >Saved Templates. 
export elementor template
  • Choose the required template and click the “Export Template” Option. 
elementor saved templates page
  • You can also export a template from the Elementor library. Open the Elementor library & click on the My template tab. Under My Templates, click the 3-dots at the right and click Export.
my templates tab in elementor library
  • In both methods, the exported file will be saved in a JSON format by Elementor.  

Import Elementor Templates 

  • To import an elementor template, first, open your WordPress Dashboard > Templates > Saved Templates. 
import export elementor template
  • At the top of the page, select the option Import Templates. 
import templates button in saved templates page
  • Upload the JSON format file & click on the Import Now button. 
choose elementor json file and click import
  • Once you import the file, you can see it in your template list. Later the developer can use this imported template in any layout throughout the website. 

Elementor Tips & Tricks 

In the below section, We’ll share some tips and tricks that help you to improve your workflow with Elementor. 

Elementor Maintenance Mode 

If your website is under construction, with Elementor, you can display a custom maintenance mode page to visitors and send the correct HTTP response to search engines. 

To enable maintenance mode: 

  • Go to WordPress Dashboard, click Elementor > Tools. 
  • Choose between Coming Soon and Maintenance. 
  • Select the Template. 
  • Save Changes. 
elementor maintenance and coming soon mode

How to Hide/Remove Page Title in Elementor

Right-click on the settings icon on the bottom left corner of your page and enable the “Hide Title” option to hide your page title. 

hide page title in elementor website builder

Duplicate a Column or Section 

Right-click on the column or section and click “Duplicate.” 

Create a Full-Width Section with Multiple Columns 

Click on Section Settings and enable the “Stretch Section” option in the layout tab.

Add a Featured Image using Elementor 

  • Click on the settings icon on the bottom left corner of your page. 
  • Now find the Featured Image option and set your image. 

How to Enable The Dark Mode in Elementor 

Elementor allows you to set UI Theme’s Light or Dark mode, or you can use the Auto Detect option to sync it with your OS setting. 

To change mode: 

  • Go to Elementor Widget Panel > Hamburger Menu > Preferences > UI Theme. 
  • Choose Auto Detect, Light, or Dark as per your preference. 
dark mode in elementor

Add custom CSS using Elementor Free 

Because we are using the Elementor free version, Elementor’s custom CSS feature isn’t supported. Worry not, I have a trick for you. Using this trick, you can easily add any custom CSS to your page. 

  • Search for HTML elements in the Widget area. 
HTML widget in elementor widget panel
  • Drag and drop the HTML element and click edit. 
drag and drop html widget to column
  • Now enter your CSS code. 
Add custom CSS to html widget in elementor
  • Update your page. 

Elementor Hello Theme 

Developing WordPress websites consists of three main components: Plugins, Templates, and Themes. Now that you already know the complete working process of the Elementor free version and Template functionality. Let’s see how you can install and customize the Elementor’s Hello theme. 

Installing Elementor Hello Theme 

Go to your WordPress Dashboard > Appearance > Themes. 

add new theme in wordpress

Click Add New, and search ‘Hello Elementor.’ 

elementor themes

Install and activate the theme. 

hello elementor theme

What are Elementor Addons or Extensions?

elementor addons

In basic & simple words, Addons or additional elementor plugins broaden the Elementor page builders usefulness and features. 

The way that Elementor is free and open source has empowered developers to build Elementor functionalities much further. Elementor has likewise delivered the Elementor API, which remembers or has comprehensive, detailed data for expanding and making elementor addons and extensions. 

The above is why competent third-party designers and developers have chosen to significantly extend the Elementor functionalities and build up their Elementor Addons which can be readily available for end-users at the WordPress plugin directory or their websites at a premium price. 

These elementor extensions help users to get more elements or widgets. Most of them are Freemium plugins, i.e. they have a free version and a premium version of the WordPress plugin.

These elementor addon plugins are not mandatory but can be used depending on the use case and the design and feature the particular user has finalized on his website.

We have covered a full-length article on the basics of Elementor Addons and the 5 Best Elementor Addons for WordPress 2021(Free & Premium)

Conclusion 

Thank you for taking your time and reading to the end! I am hoping this guide will help you to understand better. 

We will be releasing such detailed guides on Elementor Pro soon for you to learn Elementor & WordPress in detail. Stay Tuned!

If you are looking for an elementor page builder guide who teaches elementor tutorials in-depth, check the 6 Day Elementor Workshop for beginners. In this live workshop, you can get hands-on practice and guidance and get your doubts resolved.

Do Subscribe to our LWPT Newsletter so that you receive an email notification when we post such extensive guides and articles on our Learn WP Tutorials blog. Also we have a separate page where you can check all the WordPress tools we use and we recommend for every web designer and developer to save the time

Share this Elementor 101 guide with your friends who want to learn basics of page builder and post your WordPress Elementor related questions in the comments section. 

5 thoughts on “Elementor Page Builder: A Free 101 Guide for Every Beginner”

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top