Learn Elementor: Complete Beginner’s Guide (2023)

Want to Learn Elementor?

Over the past five years, Elementor has increased to become the number one WordPress pagebuilder and website pagebuilding technology.

Elementor Powers over 11 million sites, according to statistics from BuiltWith, and it has completely solidified its place in the web development industry.

The main reason lies in its simplistic approach to building what used to be “complex websites” for WordPress.

As an expert Elementor Visual Developer, I decided to create the most concise and in-depth article on learning Elementor without all the fluff.

This article isn’t anything like what’s out there on Elementor (a compilation of information written by regular writers).

Everything in this article is based on years of experience using Elementor as the core WordPress development tool for client work.

If you’d like to know my thoughts on if Elementor is a good pagebuilder to use in 2023, check out my Elementor Review article first.

In this article, you’ll learn;

• What Elementor is, how it works and how to set it up as a beginners
• All the core features of Elementor and concise descriptions of how they work
• How to approach building websites with Elementor (A Basic Tutorial and some Best practices)

At the end of the article, you should have enough insight to start using Elementor and know precisely how powerful the pagebuilder is and its limits.

In case you prefer learning visually, here’s a crash course youtube video on Elementor I made covering basically everything in this article:

[ COMING SOON]

With the introduction out the way, let’s get started with the actual article.

What Is Elementor?

Elementor is an open-source WordPress pagebuilder that utilizes premade widgets, elements, and templates to simplify building websites visually.

It’s a no-code web design tool which means you do not need to know any form of coding to utilize its features to build websites.

By providing a drag-n-drop Editor with powerful widgets/elements, Elementor enables non-coders like Ui/UX designers to quickly build, edit and publish webpages that require knowledge of web technologies like HTML, CSS, and Javascript.

It allows the development of designs and enables Access to dynamic content like posts and media managed by WordPress.

It also features a Template Libray which houses thousands of well-designed layouts. Whether you’re a seasoned developer or a new WordPress user, Elementor has something to accommodate your website-building needs, and it’s my favorite development technology ever.

How Does Elementor Work (Under The Hood)

Elementor is designed as a plugin for WordPress, which extends WordPress’s core infrastructure by adding a unique way of creating web pages.

After installing WordPress on a server, Elementor is then installed as a plugin through the plugin repository or Zip file via an FTP client like Filezilla.

Once the plugin is activated, it allows editing and creating any page, post, custom post type, and visual aspect of WordPress (Yes, including the header and the footer).

From simple about us pages to full-grown eCommerce stores, Elementor has features that enable any WordPress user to build amazing websites.

Is Elementor Easy to Learn?

Elementor is one of the easiest WordPress pagebuilders to learn; its simplistic approach to developing websites is the main reason it’s so popular.

Whether you’re a total newbie or have some design experience, you’ll find Elementor relatively easy to get started with.

Unlike other pagebuilders like Wix and Webflow, you don’t need to know too much about design to get things done.

How Much Time Does It Take To Learn Elementor?

Three weeks for total beginners is enough time to grasp building WordPress sites with Elementor.

If you already have experience working with Pagebuilders, then 3 to 7 days is enough to master using the core features of Elementor.

I was able to learn the basics of Elementor in a single day. Before elementor, I was used to building sites with other pagebuilders like Beaver Builder and Divi, so I didn’t find it difficult to transition.

I felt Elemntor had a better approach to building sites compared to most pagebuilders in the market at the time; its well-defined user interface allows for advanced customizations without much knowledge of web development.

It certainly set the standard for other WordPress pagebuilder when it comes to user experience.

How To Install Elementor in WordPress

To install Elementor on any WordPress site, follow these steps:

• Log in to your WordPress Dashboard 
• Navigate to the “Plugins” tab on the sidebar and select “Add New“. 
• Type “Elementor” in the search bar. 
• Click on the “Install” button. 

Once you have Elementor installed and activated, there’s a lot you can do with the free ver, but in other to unlock the full power of the pagebuilder, purchasing the PRO version is necessary.

Aside from the Pro version, there are other ways of extending the free version of Elementor like using third-party add-ons.

This is one of the main reasons Elementor is so popular, a lot of cool addon plugins like Crocoblock’s JetEngine, Dynamic, and Essential Addons for Elementor extend the plugin with more features e.g Megamenu builders, Dyanamic Sliders, etc.

Since this article is centered around all Elementor core features, I’ll also give a brief tutorial on how to purchase, download, and install the Pro version of the plugin as well.

How To Install Elementor Pro in WordPress

Before installing Elementor Pro, make sure you already have the free version installed it’s required.

Follow these steps to purchase, download and install Elementor Pro:

• Visit Elementor.com And Click “Get Started“. 
• Complete the Setup wizard Questionnaire
• Select a Subscription Plan. 
• Fill in all required information and select a payment method.  
• After Paying, you’ll be redirected to the Elementor Dashboard, click on subscription on the sidebar, and proceed to download the Zip File, then log in to the WordPress site and navigate to the Plugins > “Add New” submenu. 
• 
• Upload the zip file you got from the Elementor dashboard and click on activate. 

That’s basically how to set up Elementor Pro, once activated all you have to do is follow the connection wizard and link your site with your elmentor.com account and everything is set.

Elementor Statistics

Before we get into the core features that make Elementor such a powerful plugin, here are some statistics about its usage on the web as of when this article was written.

According to BuithWith.com, Elementor power 4.31% of the top 1 million sites in the world which is 43,090 sites.

Here are some other statistics about Elementor:

• Elementor Powers over 11 million sites according to statistics from BuiltWith,
• Elementor also powers 4.41% of the top 100,000 websites and 4.54% of the top 10,000 websites in the world.
• Elementor is most popular in the United States with over 600,000+ websites actively using the pagebuilder.
• Brazil is the second country that uses Elementor the most with over 350,000+ active websites using the pagebuilder.
• The Top 10 countries using Elementor include The United States, Brazil, Germany, United Kingdom, France, India, Italy, Netherlands, Russia, and Austria.

With statistics like these, it’s no wonder the Elementor ecosystem keeps growing. Both visual developers and clients find working with the builder easy without an array of issues and high costs.

The Core Features Of Elementor

Elementor (the pro version) houses a complete suite of features that transforms the traditional complicated WordPress site-building process into an easy spoonfed one.

Elementor Provides 8 major features:

• Drag and Drop Page Editor / Builder
• Elements and Widgets
• Template Library
• Template Kits
• Theme Builder
• Site(wide) Theme Settings
• Role Manager
• Popup Builder

Apart from these, there are other powerful features e.g Icon Library, and device-specific styling but all the features listed are the core of Elementor and what you need to master to be an awesome visual elementor developer.

Also, I know you’re probably thinking “Why not go straight into a tutorial on building sites with Elementor?“.

The reason is simple, if you don’t know about the main moving parts of a car or its features, it becomes a lot more difficult to learn to drive it.

The best way to learn elementor is to get a general overview of all the core features and how they work before developing any web pages.

If you want to skip to the tutorial section of this article though, feel free.

Core Feature #1: The Elementor Page Editor

The Elementor Page editor works the same way any other pagebuilder works, the main difference is how simple it is to create layouts.

The Editor is divided into two, the left-side toolbar and the Canvas.

The Left-side Tool Bar

The left side toolbar contains everything from Elements to native WordPress Widgets.

It’s responsible for everything related to building sections and customizing elements on the canvas.

Here’s a list of features and sections available through the Elementor side toolbar:

• Elements & Widgets – This ranges from simple Headings to complex navigation bars.
• Global – This contains Elements on the canvas which you would like to use on other pages without recreating them. 
• SEO Settings – This allows you to set page-related SEO settings (Depending on your SEO Plugin). 
• Page Settings – This allows you to set page-related settings like page title, status, featured image, and page layout. 
• The bottom Settings bar – features like the navigator, History version control, Responsive Mode, and Publish/Save can be accessed from here. 
• Hamburger Menu – This allows you access to features like Site Settings, Theme Builder, User Preference,  Notes, and Finder. 
• Section/Column/Widget Top Bar – This houses all customizable settings for everything clickable on the Elementor Canvas. It is divided into 3 tabs; Layout, Style, and Advanced. 

The Elementor Left sidebar serves the primary function of connecting all the features Elementor has to offer for each page.

Learning to navigate and find options through the sidebar is crucial to building sites with Elementor, the left-side toolbar is practically the key to all that.

Section/Column/WidBefore we explain to explaining the Elementor Canvas, let’s quickly look at three sections of the side toolbar which play a significant role in working with every aspect of the canvas.

• Layout Tab – This tab houses layout-related settings for every aspect of the canvas, this is also where you add In content like text, images, and links to elements that support them.
• The Style Tab – The style provides an interface that allows the styling of all elements, widgets, columns, and Ans selected, and an array of customizable options depending on what is selected and available. Everything from Text-based stylings like font size, font color, and line height to Background-related options like gradients and overlays. 
• The Advanced Tab – This houses all the advanced customizations available to a widget, section, or column. The main options available on the advanced tab include; Margin, Padding, Custom CSS, Responsive, Motion Effect, and Z-index. 

The Elementor Canvas

The elementor canvas houses the entirety of your page content. there are two basic parts of the canvas you need to be familiar with to structure and build out layouts.

Quick Note: All Parts of the canvas can be customized (background, font-size, etc) via the Style and Advanced tab that appears on the left toolbar when they are selected.

Sections

Sections help create a form of separation from different aspects of an Elementor page e.g hero section and the about us section.

They primarily function as a top-level way of structuring parts of a page, everything from height to Width.

The Elementor canvas section allows for the creation of up to 10 different columns, each section comes with its own set of customizations.

Here are the most common section settings:

• Layout Width – This allows you to set a maximum width for all elements and columns inside a section. Has two options; Boxed and Full-Width.
• Column Gap – This enables the ability to add margins between columns. it has several options including; Default, No Gap, Narrow, Extended, Wide, Wider, and Custom.
• Height – This option allows you to set the height of a section. It has three states; Default, Fit-To-Screen, and Min-width.
• Vertical Align – This option allows you to set the vertical alignments of columns/elements inside a section. It has the following selections; Top, Middle, Bottom, Space-Between, Space-Around, and Space-Evenly.
• Overflow – this option allows you to set what happens to elements that exceed the Width or height of the section. It has just two selections; Default and Hidden.
• HTML Tag – This allows you to set the HTML tag of the section; it can be anything from a div, header, or footer tag.

A section is the first layout you add to the Elementor canvas before you start building. When you add a new section, it comes with a predefined column depending on the structure you selected.

It is very important to understand sections and how they are configured as they affect everything else inside of them.

Note: when you right-click on any section, column or elements, you have the ability to duplicate, copy or delete them. There are also other settings like Paste Style and Reset Style which helps with transferring and restoring styling.

Columns

Columns function as a second-level layout system for Elementor pages after sections. They are laid out inside every section and work to give even greater control over the elements in them.

You can think of Elementor Sections as a parent, it controls all Columns and Elements while the Column control all child elements directly.

Columns just as the name implies, enable a way to separate sections further.

Columns share similar settings with sections but have a few exceptions, these include:

• Horizontal Align – This option allows you to set the horizontal alignments of columns/elements inside a section. It has the following selections; Start, Center, End, Space-Between, Space-Around, and Space-Even.
• Widget Space – This allows you to set the vertical spacing between each Element/Widget present in a column.

When using columns, you’ll often find yourself in the advanced tab the most where you can set things like padding and margins for all Elements.

It goes hand in hand with sections and once you understand how to utilize them to create all basic layouts like Heros and Footers, building with Elementor becomes easier.

Inner Section & Container Widget

Since we’re on the topic of layouts and sections, there are two other ways of further structuring an Elementor Page.

The Inner section widget is essentially just a section but can be placed inside columns.

If for some reason you find yourself having to split a single column into multiple columns, the intersection widget does just that.

Once added, you can add additional Columns in a column and further lay elements out accordingly.

This can only work one level deep, which means you can’t stack innersections inside another.

(Except you’re a Pro like me that has a super secret workaround)

You’ll barely ever need to use the inner section now though as features like Element Width presents a better way of laying elements side by side in a column.

Another powerful way of structuring parts of the Elementor page canvas is the Container which as of when writing this article has not been officially realized but is available in a Beta version.

It works in an entirely different way and requires mastery over the normal way of doing things to use, it’s kinda advanced, too advanced for beginners sadly (In Elementor’s standard).

I will update this article when it is released and write an entire article dedicated to just containers as well.

Core Feature #2: Elements and Widgets

Unlike other pagebuilders in the market, Elementor doesn’t house a million Widgets.

(Notice how I keep using Elements and Widgets Interchangeably? It’s because they are essentially the same thing).

By default, Elementor’s free version comes with usable 31 elements. The Pro version of Elementor unlocks 31 extra widgets that completely enhance the building experience.

It’s good to note that even the free version of elementor is powerful enough for most simple landing pages but when you have a helicopter of a design and can’t seem to find a widget for specific parts, that’s where Elementor Pro shines (with an Airport of powerful features, lol).

Also note that there are other Widgets like the default WordPress ones available for use but you should already be familiar with how they work if you’ve used the native WordPress customizer (You know, those clunky sidebar things nobody uses anymore).

Lastly, before we go through all the major Widgets and what they do, by adding third-party plugins like Essential Addons For Elementor, you can unlock even more free and premium widgets. You’re not limited to just what the Pro version has to offer, there’s a huge ecosystem of third-party addons out there (Though I don’t recommend using them – more on this in the Best Practices section of the article).

With all that said, here is a list of the Major Widgets available on Elementor Pro and the free version;

• Heading – The heading widget provides the ability to add and customize headings to the elementor canvas. These headings can have HTML tags from H1 to H6 and can be configured to be even span, div, or p tags depending on how you plan to use them. 
• Image – The Image widget does exactly what it should be like, and enables you to add images to the elementor canvas. By default, the image widget supports all WordPress default image formats but can be extended to support even more with an add-on. You can set things like image size, caption, alignment, and a link which results in superb control over how the image is displayed. heck, you can even add Snapchat, I mean CSS filters (Okay, I’ll shut up now). 
• Text Editor – If you’re used to the old WordPress post editor, this is essentially the same thing but just for adding paragraphs or anything that can’t fit into the heading widget. JSYK: It’s a common theme to see Elementor users use Heading widgets in place of the text Editor for adding paragraphs but this doesn’t work well when there are multiple paragraphs. (In case you were born before the 2000’s when commercial internet became a thing, JSYK means Just So You Know) 
• Video – The Video widget allows you to add videos to the Elementor canvas, it has options like source which allows you to select a source for the video file; currently Elementor supports 3 platforms namely YouTube, Vimeo, and DailyMotion. You also have the option of using a self-hosted video (any video on our media gallery). 
• Button –  The Button widget adds the ability to insert buttons into the elementor canvas, you can customize the button’s size, color, and much more. 
• Divider – This adds a horizontal line to separate different elements or sections of the elementor canvas.
• Spacer – This widget adds vertical spacing between other widgets on the page, it’s a good alternative to using margin/padding to separate widgets vertically on the canvas.
• Icon – The Icon widget is quite powerful, not only can you add custom icons in SVG format, but it also provides an Icon library with font-awesome installed by default and the ability to add other third-party icon packs. 
• Posts & Portfolio (Pro Version) – Both the Post and Portfolio widgets are used to display post-type content from the backend. By default WordPress has just two post types, Posts, and Pages but whenever you create additional ones, with this widget you can display them on the front end. A post widget is mostly used when creating a blog section on most web projects and a Portfolio widget when you have to showcase previous work.  
• Basic Gallery (Free) & Gallery (Pro Version) – Elementor Gallery widgets offer several display modes ranging from Masonry to Grid which is used to display a compilation of images. The free version of Elementor supports only Basic Gallery which is a watered-down version of the main Pro Gallery widget. 
• Form (Pro Version) – With Elementor Pro, you do not need a third-party form plugin as it comes bundled with a quite powerful form builder widget. Not only can you create a normal contact form, but you can also integrate your forms with third-party services like Mailchimp, and Mailpoet. This means you can create newsletters and an array of other use cases. 
• Slide (Pro Version) – The Slide widget adds the ability to create basic slides featuring images, headings, and text. You can just use it for just images but the Image Carousel widget does a better job at that. 

Again remember, there are a lot of other Widgets available in Elementor but these are the most common in my experience, things like social icons and shortcodes naturally have dedicated widgets but they are not the main focus as anyone can understand what they do from their names.

If you would like to see a list of every widget available in Elementor, visit my elementor category page.

Quick Note: I’ll definitely make a dedicated post about each and every widget Elementor has to offer in the future, for now you can just glance through to get an overview understanding as planned, i’ll update this article when they are published.

You can join my email list to get informed, I rarely send emails to my readers but when I do they are always important.First nameEmail Address *

Core Feature #3: Template Library

The Elementor template library is a collection of predefined block and page templates, the library currently features 156-page templates and over 100’s premade blocks.

The page templates can be sorted from most popular, trending, to newest. The premade blocks on the other hand have a category system with selections like Footer, FAQ, Call To Action, and Contact.

Aside from the premade templates, one other feature the Elementor Template library provides is the “My Templates” tab which in my opinion is the most useful.

More potent than widgets are Elementor templates; when working with Elementor over a long period, you begin to notice a pattern of layouts you always end up creating over and over again from scratch.

Elementor created the Template feature to tackle this problem by providing a way to save, export, and import any section created with Elementor.

The best part is, that you can import templates you’ve used in other projects into newer ones to save a ton of time.

Truly an invaluable feature.

Core Feature #4: Template Kits

What’s even better than being able to export and import Elementor Templates? Template Kits.

Yes, Elementor templates are cool but imagine being able to import an entirely pre-designed website in just one click.

That’s what Elementor Template Kits are, a compilation of well-designed page and section templates bundled together for easy use.

Even as an Elementor expert, I sometimes purchase these template kits from Themeforest to save time, especially when it’s a low-budget project.

I do customize and recreate certain aspects of the templates to my liking though.

Elementor Template kits are especially helpful when you a client don’t provide a design and just want a cool site (Let’s face it, UI/UX isn’t easy).

ThemeForest is flooded with tons of Template Kits spanning almost any major industry you can think of.

Elementor Pro also comes with a library of kits by default but in my opinion, they are either mostly too basic or overused.

Still, you can use any Template Kit as a starting point and get something unique after spending hours customizing.

How Elementor Template Kits work and How To Install Them

After purchasing a template kit from a marketplace like ThemeForest, you’d be provided a zip file containing the template. JSON files.

All you have to do to install the Template Kit is:

1. Install & Activate the “Template Kit Import” Plugin 
2. Navigate to “Tools” on the WordPress Menu & Select “Template Kit” 
3. Click the “Plus” icon to select the Template Kit Zip File 
4. Install All Required Plugins and Settings 
5. Import the “Global Kit Styles” and any other page template needed  

That’s it, after following the import process, the template kit should become accessible from any page you edit with Elementor.

The best part about Template Kits is, that you can easily create yours from any existing Elementor site by using the Template Kit Export plugin.

I’ll make a tutorial about it sometime in the future and add a link here in case that’s something you also want to learn.

You can make a lot of money selling Elementor template Kits once you’re good with Elementor.

Core Feature #5: Theme Builder

Do you know what separates an Elementor Expert from a beginner?

It’s the ability to fully utilize the Elementor Pro Theme Builder.

It might not be apparent but the main reason why expert visual developer purchase Elementor is the Theme Builder.

Yes, the additional widgets are cool but without the Theme Builder, Elementor becomes as limited as other WordPress builders.

As the name implies, Theme builder is a feature that allows you to create every aspect of your WordPress site the same way a theme would but using Elementor.

From page templates to headers/footers, to completely custom dynamic layouts, the Theme Builder has solved an issue 99% of all WordPress non-coders face.

Here’s a full list of all the parts of a WordPress website you can create using the Elementor Theme Builder:

• Headers
• Footers
• Single Page Templates
• Single Post Templates
• Archive Templates
• Search Result Page Templates
• Product Page Templates
• Product Archive Templates
• 404 Page Template

Currently, Elementor doesn’t support a Loop Builder (A way of building templates that work with dynamic content like products and posts) but by using a third-party addon like Ele Custom Skins you can unlock the feature.

Another awesome third-party plugin that not only extends Elementor Pro but also has its Theme Builder (More powerful than the Elementor Pro default) is CrocoBlock’s JetEngine.

How The Elementor Theme Builder Works

The Elementor Theme Builder provides a unique way of creating dynamically adaptive pages by providing template-specific widgets.

For example, when you create a new Single Page template, you get access to some unique widgets like Post Title, Post Excerpt, Post Content, Featured Image, Author Box, and many more.

Once you add any of these to the Elementor canvas and set a display condition, any time a page is opened on that site that meets the display condition, the template will be used to render the content.

The Display condition features further increases the power of the Theme Builder by allowing you to set both includes and EXCLUDE conditions for each template.

Overall, to be able to create more advanced projects like Ecommerce stores and directories, mastering the Theme Builder is necessary.

Core Feature #6: Role Manager

I haven’t had much use for this specific feature because I mostly create Elementor websites for business owners who understand Elementor and won’t mess things up but it’s very important if your client is not experienced.

The Elementor Role manager feature allows you to set restrictions on who can edit existing Elementor pages.

There are two privileges you can grant or restrict from your users; Access to the Editor & Access to edit content only.

When you just want clients to be able to change things like texts and images on all Elementor Pages, enabling Access to edit content only on their user level will make sure they can’t do more than that.

It’s a really neat feature but then again, you might hardly need it as most Elementor clients understand how the builder works. It’s not Rocket Science (WIX, lol).

Core Feature #7: Popup Builder

The Popup builder feature simply allows you to utilize the Elementor Page builder to build Popups that would normally require a third-party plugin.

This is a lifesaver for elementor visual developers since you can utilize the same skills you use for building pages on crafting popups.

It’s a trend with Elementor; I currently build almost every aspect of WordPress websites with just Elementor, Addons can unlock even more features e.g MegaMenu Builder.

How To Create A PopUp With Elementor

1. Navigate to “Templates” on the WordPress Menu and Select “Popups” 
2. Click on the green “ADD NEW POPUP” button
3. Enter a Name for the Popup 
4. Import A Popup Template or design from scratch 
5. Add a Display Condition & Trigger 

Anything that has to do with the Theme Builder will always have the Display Conditions feature, it’s truly powerful what you can achieve with just that one feature.

The Trigger feature is exclusive to Popups and allows you set different possible triggers for your popups.

Currently, there are six triggers but with the Advanced Rules tab, you can create even more complex display conditions.

Truly a beast of a feature (Even though you’ll rarely use it).

Core Feature #8: Site(wide) Settings

Last on the list is the most underrated and unappreciated Elementor feature of them all, Site Settings.

I use to look down on the site settings section and just directly add all my widget settings on a per-page basis until I found myself in a stressful situation.

I developed a 14-page website without Site Settings and the client requested a color change.

The problem was, I already designed all 14 pages so I had to go back and manually change every instance of that color which took hours.

Ever since I’ve made it a rule to always start with setting Site Settings before anything else.

The Elementor Site Settings Feature allows you to set defaults for basically every aspect of your WordPress site frontend.

Currently, the feature supports the following settings:

• Global Colors – This allows you to set the default colors to be used for your entire site, you can also add custom colors aside from the defaults. 
• Global Fonts – This allows you to set default fonts for your entire site’s typography, and just like with Global Colors you also add custom fonts. 
• Typography – Aside from Global Fonts, Elementor Site Settings also has a Typography tab that allows you set element-level default typography styling. From headings to links, to paragraphs. You can set things like default line height, letter spacing, font family, and also font-size. 
• Buttons – This option allows you to set default styling for all buttons across your Elementor Site. 
• Images – This option allows you to set default image styling across your site, you can things like a border radius, a solid border, CSS shadow, and hover-related styling. 
• Form Fields – In almost every Elementor site, you’ll find yourself using the form widget. If you’re not using a third-party form like Gravity Forms then you’ll likely stick to Elementor Form Widget, this site setting allows you to style all form widgets across your website in one swoop. 
• Site Identity – This is a common option that can be found on the WordPress Customizer as well, it allows you to add a favicon to your site as well as a logo and title. 
• Background – This option allows you to set a default background image or color for your entire WordPress Elementor website. 
• Layout – This site setting allows you to set the default content and widget width on your site, you can also add padding/margin at a global scale. You can also add additional breakpoints (Aside from Mobile, Tablet, and Desktop). 
• Lightbox – This site setting controls how lightbox works on your Elementor website, you can choose to disable image lightboxes by default, change the colors and also customize things like the size of the icons and text. 
• Page Transitions – This site setting allows you to set page transitions and a Preloader, not really used all that much but it is still available if needed. 
• Custom CSS – This site setting enables you to add global CSS that is active on every page on your WordPress website. 

One thing to note about Elementor Site Settings is that they can all be overwritten when styling a widget on the page, it does save you a ton of tie though as you’ll most likely only adjust widgets slightly to make them fit into a section.

Without site settings, you’d have to apply the same setting to almost every widget each time you’re adding it to the canvas which is not only time-consuming but will become a problem later on when you plan to make massive changes.

Overall, one of my main favorite features that Elementor offers.

Building Your First Elementor Project

So, let your hands dirty by building a simple demo project with Elementor.

For this tutorial, I designed a simple Hero section using Figma (a UI/UX Design Tool).

You can view the design on Figma and download the illustrative image on the right-hand side.

In most cases, this is the workflow you’ll follow while developing websites with Elemento;

• Receive or Create a Design
• Evaluate and plan out how to duplicate it on Elementor
• Develop the Design

Receive or Create a Design

I purchased Ui/Ux design course years ago which gave me an upper hand as I could create my designs from scratch.

This will be the case sometimes when a client has no existing design for their website but want it built with WordPress.

You can either choose to outsource the design process or learn Ui/UX for yourself.

I decided to focus on just development about a year ago so I mostly outsource the Ui/UX design.

If you’d like to learn Ui/UX, I recommend a design course.

Once you have a design for the site that a client approves, you can move to the next step.

Evaluate And Plan Out How To Duplicate it on Elementor

You see, building websites whether with WordPress pagebuilders or traditionally always comes down to one thing.

Conceptualization & Visualization.

When you look at any website or design, you should be able to mentally break down every section and element present into Widgets or Blocks.

If you look closely at our demo project and begin to dissect the elements present in the design, you’ll notice how easier it becomes to develop.

On the left-hand side, we have a Heading, paragraph, and two buttons stacked side by side.

On the right-hand side, we have a single Image.

Using visualization skills, we can easily duplicate this inside Elementor because every part of the design has a widget, all you need to do is customize them to look exactly like the design.

Also, note the colors and fonts used on the demo project; every design tool out there always provides some way to know and copy the colors used in a project as well as the fonts.

In this demo project design, I used Archivo as the main font for headings and Poppins for paragraphs.

For colors;

The dark blue hex code is #27303D

The Egg Shell brown hex code is #FFE9DC

So before starting development, setting these in Site Settings as defaults should be a priority.

Develop The Design

Now, WE BUILD!

The Theme i use for all my Elementor-based WordPress projects is Hello Elementor

After creating a new page on your WordPress website, simply click on Edit With Elementor to enable the Elementor Page Editor for that page.

Once you do that, you should be redirected to the page builder interface as seen below:

I always start by setting the page layout to Elementor Canvas, this makes the entire page show only Elementor widgets, header, and footer.

To change the page layout, click on the settings icon on the left toolbar and select Elementor Canvas from the dropdown.

Next, we add a section to the canvas with two columns  (Just like our design).

We’ll proceed by applying some section-related settings, for one we need to get the height and Width of the section to fit the entire viewport.

To do that, we’ll set the Height to Fit the Screen and the Width  to Fullscreen:

Notice how the section now spans both the full Width and height of the first viewable area?

This is a pretty common section setup, especially when comes to creating Hero sections.

If you notice in our design, there’s a bit of space between the columns and the edge of the page.

To recreate that, we’ll add some Padding to both sides of the section.

%4 to be exact.

To do this, select the section and navigate to the Advanced tab, there you have to unset the padding from linked mode by clicking on the link icon and then select percentage mode by clicking the % sign.

With that, we can start adding widgets.

For the first column, we’ll add a Heading widget, a Text Editor widget, and two Button widgets.

For the second column, we’ll add a single image widget.

As you can see, it’s already looking a bit like the design.

All that’s left is to add the actual content and style each widget to look identical to the design.

I already exported the illustration from FIGMA in PNG format and converted it to WebP for good performance.

All that’s left is to add it, click on the image widget, and upload the image.

Already looks good, a little bit of styling and we’ll be done.

As you noticed in our design, there was more spacing between each column.

We can add more spacing between each column by either adding margin-right and margin-left properties to both or just using the section’s Column Gap setting.

I prefer using column gap because of responsiveness, margins need to be reset for smaller screen sizes when the columns stack on each other and get messy.

So, select the section and change the value of Column Gap to Wider.

Now the page looks like this:

Not bad, right?

The spacing looks too much though so I changed the column gap to just extended and it looked closer to our actual design.

To finish up, here are screenshots of the settings I applied to style all the widgets on the left column.

For the Heading, I changed the HTML tag to H1 for SEO purposes and changed the font size to 7.125REM (Which is 114px) with a Font-weight of 800.

To get the text to break to a new line, we’re going to add the <br> Html tag exactly where we want the heading to break.

The paragraph already looks great but we’ll add some line height (40px) and change the font size of 20px to its REM equivalent.

PS: I use NekoCalc to convert Pixels to REM.

I also changed the Width of the widget to only take up 78% of the column, I did this by navigating to the advanced tab and changing the Width to custom.

Lastly, for the buttons, I did the following;

• Changed the colors to reflect the design (#27303D and #FFE9DC).
• Changed the Width of both buttons to custom so they sit side by side.
• Adding margin between the buttons (25px).
• Changed the button size to Medium.
• Added padding to each button (Margin left & right were set to 60px, Margin top & bottom were set to 15px).
• Changed the font size of the button text to 1.2REM and weight to 800.

Here are screenshots showing how to set all of these:

The final results?

Let’s compare it with an image of our design from FIGMA.

Not 100% yet but by simply increasing the font size we used for the text, we could get it to look identical.

Overall, it’s still a good attempt, especially as a first project.

There’s still a lot left o do though, like optimize for mobile and tablet breakpoints but I’ll cover those in another pure tutorial article.

In case you get stuck or have a specific question, just leave a comment at the end of the article and I’ll try to help out.

Also, you can download the template if you want by filling out this form:First nameEmail Address *

Elementor Responsive Design Principles

Elementor designs scale by default from larger screens to smaller, this means all the styling and elements added on the desktop breakpoint will remain the same on tablets and mobile.

If you switch to the tablet breakpoint and make changes, you’re essentially overriding the settings and customizations for that view and mobile (remember, larger screens to smaller ones).

If you’re planning to design for mobile first, Elementor will also scale from mobile to desktop but you would still need to make a lot of screen-size-specific changes.

Another neat feature is the ability to add custom Elementor breakpoints, so if you’re planning to design for larger screens, you can easily add the breakpoint to the responsive mode tab and all rules will apply to it.

You can add as many custom breakpoints as you want but I recommend working with only common breakpoints except if the project specifically requires it.

Best Practices When Building Elementor Websites

In my five years of building client websites with Elementor, there are a lot of expert practices I would advise newbies to get familiar with.

These Elementor best practices will help improve the overall performance, page speed, and overall quality of every website you build.

I had to learn them from years of trial and error so treat them as a guideline when creating Elementor websites

• Try to use as less sections, columns, and inner sections as possible.
• Set all default colors, font properties, margins, and sitewide styling before creating pages
• Pay attention to overflows.
• Optimize for Mobile and Tablet.
• Avoid Third-Party unpopular/low-rating Elementor Addons Like the plague.
• Pay Attention to HTML Hierarchy (H1, H2,p, spans, etc).
• Use REM, not pixels.
• Use WebP and SVG instead of PNG and JPEG.
• Use correct image sizes
• Utilize The Global Feature.
• Keep Everything consistent.

Fewer Sections, Columns, and Inner sections

Elementor makes it easy to structure widgets on the page to form different layouts but just because there are a lot of ways to do it, doesn’t mean they are all best practices.

The more sections and columns you add to the Elementor Canvas, the more the DOM elements and page size.

DOM stands for document model and it’s essentially a representation of the HTML, CSS, and Javascript a browser processes from a server.

Depending on the page size (which is influenced by Elementor Elements, Sections, and Columns), the speed at which a page is loaded is affected.

It’s best practice to always take the approach to create layouts that require the least number of widgets/sections/columns.

Here’s a bad example of a layout that utilized too many structural elements:

Now compare it to this:

As you can see, with just a little ticketing and the use of Element-level Width, you can get the same results that would have required 2 columns and 2 inner sections.

This is not a super strict rule but just try to keep in mind how creating heavily structured layouts can potentially slow down your webpage.

Set Site Settings Before Building

Another common mistake I see a lot of beginners make is creating pages immediately after they install and activate Elementor.

I won’t lie, I use to be guilty of this until I learned the hard way (having to change the color scheme for a 14-page project).

Elementor Site Settings makes it possible to add a style guide to your entire WordPress site, from setting default fonts to accent colors and margins.

It is best practice to always set these first based on the design you’re trying to build before you begin developing anything on the canvas.

Even if you’re creating a single page, it’s still recommended because it also affects pages you might not think people will visit (e.g 404 pages).

And yes, any experienced Elementor Developer viewing your pages with Chrome can easily tell with developers’ tools (HaHa, no shortcuts for you now).

Then again, I made this mistake with a lot of my older projects but just like with everything in life, we learn every day.

Pay Attention to Overflows

When developing layouts with Elementor, it can be easy to get carried away and use positioning options like absolute and fixed.

These are cool positions as they give more freedom over where and how you want elements to be placed on the page.

The problem with them becomes evident when you forget about other devices.

Have you ever seen a horizontal scroll bar on a mobile device’s webpage? Yeah, let’s just say it’s not pretty.

This is mostly caused when widgets with the Absolute positioning option turned on get pushed outside the viewport.

There are two ways to solve this, the first involves pushing the widget into the viewport for smaller screens using the Elementor Responsive Feature.

the second involves selecting Hidden under the Overflow option on the section in which the widget is contained.

Optimize for Mobile and Tablet

This is a no-brainer but I still decided to add it because so many Elementor sites (even from so-called experts) I’ve seen look terrible on mobile.

According to _, over 70% of web traffic occurs through mobile, that’s more than half of the entire web users.

It doesn’t matter how the desktop version of your site is, if it’s not equally as accessible or appealing on mobile, most visitors will leave.

Luckily, Elementor by default tries to tackle this by having a default sitewide setting but the more complex your desktop design, the more likely it’ll appear like a folded paper on mobile.

Just spend an hour or two tweaking for mobile and mobile users will be grateful you did.

Avoid Third-Party Unpopular/Low Rating Elementor Addons Like the Plague

Want to know the number one reason why Elementor websites break down? Nope, it’s not WordPress but those pesky badly coded Addon plugins.

I’d argue to say that more than half of the entire plugins in the WordPress repository are outdated since basically, anyone with some coding skills can create a plugin, it also means there’s no strict pressure to update these plugins when new updates or security breaches are discovered.

I try to stay away from add-ons altogether and when I do use them for Elementor, it’s from well-known companies like Crocoblock.

With their suite of plugins, there’s nothing you can’t do with Elementor.

Pay Attention to HTML Hierarchy (H1, H2, P, span, etc)

The thing with directly diving into pagebuilders like Elementor is, that you skip understanding the underlying technology powering everything you build.

I started years ago as a front-end developer and learned HTML, CSS, and Javascript from Brad Traversy with little to no WordPress knowledge.

When I first discovered Elementor, it immediately clicked because I was already used to the hard way of doing things (building with code sucks, but I do enjoy it though).

One thing I took along with me from traditional web development is creating proper HTML hierarchies.

Whenever a get a land a new client with an existing site, the most common mistake I come across is always multiple H1 scattered around a single page.

In some cases, I’ve seen Elementor sites built with just span tags.

This is terrible for not just Search Engine Optimization but also screen readers.

Every page is supposed to have just a single H1 with multiple H2 – H6.

Also, using  H1-H6 for paragraphs is like building a house with only roofs. Headings exist to give a general description of the content below them.

Also, don’t add an H3 under an H4 or H2 under an H3 if the information or widgets being added are related to the upper heading.

Overall, just respect the hierarchy and your code will come out well.

In case you need a crash course for HTML, here’s one by Brad Traversy (My favorite creator)

Use REM not Pixels

Try playing around with this codepen I found on StackOverflow and see just for yourself how using REM over pixels is better.

[codepen_embed height=”300″ default_tab=”html,result” slug_hash=”dyWZVgV” user=”amirtaqiabadi”]See the Pen <a href=”https://codepen.io/amirtaqiabadi/pen/dyWZVgV”> px vs rem</a> by amir taqiabadi (<a href=”https://codepen.io/amirtaqiabadi”>@amirtaqiabadi</a>) on <a href=”https://codepen.io”>CodePen</a>.[/codepen_embed]

This is my biggest mistake yet, I wonder why it never hit me until two years ago.

Using PIXELS is a recipe for future disaster

Do you know how those old 90’s websites don’t look good anymore?

Well, it’s not just about the design. At the time, they did everything right except nobody thought websites will one day be displayed on huge 4K/8K screens.

Pixels do not scale on larger screens and the elements you use them on will retain the exacWidthth and height no matter the screen size.

This might not be an issue right now but as the world evolves, new technology also does.

EM, REM and Percentage exist in CSS to solve the problem pixel presents.

I generally use REM for everything related to typography and percentage for widget/column/section widths.

I’ve never had a client come back with an issue concerning using pixels but it’s better to be safe than sorry.

Just use REM for text! Always.

Use Modern Image Formats (WebP and SVG)

As of the release of WordPress 5.8, WebP became supported by default. WordPress 6.1 (the next version of WordPress), according to WPTavern might support a feature that automatically converts all image files uploaded into the WebP format.

As you can tell from these two major moves, everybody is moving away from older image formats in favor of WebP.

Why?

Well, WebP outperforms PNG and JPEG on the web.

Not only does it make image files smaller like JPEG, but it also has transparency support like PNG (The best of both worlds).

If possible, always convert all your images to WebP format before using them.

You can either do this with a plugin like a Converter for Media or locally with another third-party solution.

In cases where it is simply impossible to use WebP, make sure to optimize your image.

Smush does a good job and I recommend it when you’ve already built a site filled with unoptimized images.

In cases where it’s a brand-new project, I use Caesium which is an open-source bulk image optimizer for PCs.

For icons, I strictly use the SVG format which can shrink an icon from 100kb in PNG to about 2kb.

It’s not always possible to convert icons to SVG though so I just optimize in whatever default format they are in and use the.

Use Correct Image Sizes

Depending on your theme, WordPress generates different image sizes on upload.

Why?

Well, using the full-sized version of uploaded images everywhere on your WordPress site results in slower page speed, loading time, and overall performance.

When Images are split into different optimized sizes, you can easily select an appropriate version to use based on the layout you want them in.

A quick example is when you want to add an author headshot in your blog post template, since author headshots are generally small, it would make no sense to use the full-size version of the image.

The Thumbnail size would be a perfect fit in this scenario.

Overall, always experiment with image sizes and see if a smaller version would work out in your elementor design.

Only use the full size of an image when the quality matters more than the performance benefits you stand to gain.

Utilize The Global Feature

I started out building 3 – 4 page elementor websites which made me ignore the usefulness of the Global feature.

What I did in many cases was directly copy and paste widgets from other pages into newer ones (This became a habit).

When I started working on bigger projects, it quickly became apparent that simply copying layouts was a huge mistake as I had to manually edit every instance of that same widget when a change was requested (Even if it’s just a comma – Thank God for the Search & replace Plugin though).

Since then, even for 2-page projects, I make sure to always save created widgets that were featured on different pages as global elements.

Please, learn from my mistake.

Keep Everything Consistent

This is more of a Ui/Ux thing than an Elementor Developer one but consistency matters.

Before I discovered Elementor Site Settings was a thing, I use to just apply different font sizes and manually add colors to every widget I added to the page.

The result?

An inconsistently designed page with some headings bigger than others and messy margin/padding.

As an Elementor Dev, being able to replicate designs down to the last pixel should be your target for every project you take on.

There are a lot of ways to mess up with Elementor and still have a beautiful page but don’t accept the mediocre way of doing things (Except you’re freelancing on Fiverr,  those $5 clients deserve it).

Conclusion

For newbies, learning elementor can be quite daunting and sometimes overwhelming but it’s not as difficult after building your first couple of pages.

You’re bound to hit the limits of Elementor if you work with it long enough.

As a web development tool though, it is powerful and will keep growing as time goes by.

The best part is that you can transfer your Elementor skills to any other pagebuilder in the market.

Once you know how one pagebuilder works, it’s only a matter of learning how to replicate your building process in others.

I do hope you’ve found this article helpful, there’s a lot more I’d like to share on this article but for a newbie, this should suffice.

If you have any questions whatsoever, don’t hesitate to leave a comment below.

I’ll answer them before you can count to 10.

Happy Elementoring.