Elementor is the world’s leading WordPress page builder. How can you learn Elementor and is it easy to use? Find out in this Elementor Tutorial for Beginners! This tutorial tells you everything you need to know about the Elementor plugin – from A to Z. Step-by-step and in full detail. Get ready to build your artist website!
How do I learn Elementor?
Hey, here you are… reading this Elementor Tutorial for Beginners… That means you probably already have a WordPress site or you’re planning to create one shortly. Either way – you’re in the right place!
This Elementor Tutorial for Beginners will tell you everything you need to know about the WordPress page builder – step-by-step and broken down into all the details.
If you’ve read my review on whether Elementor is the right thing for photographers and artists, then you already know that Elementor is a super-easy-to-use page builder – easy to use for everybody.
I’ve built this website from scratch – including every page, every post, all portfolio galleries, the online store, contact, about, and front pages, etc. – using Elementor. No coding skills needed.
And if I can do it, you can do it, too! It’s really not hard. Once you got the hang of it, things are just running like a charm. And that’s exactly why I’ve written this Elementor Tutorial for Beginners – to make sure that you’re getting the hang of it EASILY and QUICKLY. It’s not rocket science…
So let’s get started!
Do professionals use Elementor?
Elementor is the WORLD’S LEADING page builder for WordPress. It was launched in 2016 as an alternative to the default WordPress editor in order to make creating websites more intuitive and straightforward.
Now, Elementor has more than 5 million active users, while still maintaining an impressive 5-star rating on WordPress.org. This just goes to show how popular it is.
Among those 5 million users, there are many professional web designers who use Elementor to create websites for their clients. They appreciate Elementor because it allows them to develop websites rapidly, even if the layout is complex. Plus, WordPress sites built with Elementor are easily manageable by customers – without requiring any particular technical skills.
Does Elementor slow down your site?
Elementor is a slim page builder that produces clean and stringent code. That’s why Elementor alone won’t slow down your site.
Some sites that use a lot of plugins or whose theme is less flexible and more stout in terms of file size may experience performance issues.
That’s why a good Elementor theme should be lightweight in terms of file size, and modular – meaning you can pick only those features you need. I’m using OceanWP for this site and it works just perfect with Elementor.
There are a couple of themes that are known to be highly performing and to work particularly well with Elementor. These include:
These four themes are also highly recommended by Elementor themselves.
Is Elementor easy to use for beginners?
Elementor is a visual drag-and-drop page builder with live preview front-end editing. What exactly does that mean?
Drag-and-drop means that Elementor provides you with a selection of elements, also called widgets, that you can simply drag and drop onto your website.
Once you’ve dropped an element on the canvas, you will immediately see what your website looks like in real time. You’ll be able to view everything the way visitors will see it when they visit your site. That’s what front-end editing means.
And that’s so much better than using WordPress’s native editor. If you’ve ever used the standard WordPress editor, you know that you first have to create everything in the back end. Each time you want to see what your page actually looks like, you need to save your changes and then open a separate preview window in your browser. Quite cumbersome.
You’ll see soon in this tutorial that working with Elementor is way more convenient. But besides providing you with a more natural editing experience, Elementor is also so much more powerful than the WordPress editor (and many other page builder plugins that you can download…).
Do I need elementor?
With Elementor, you can practically create every layout you can imagine. You can design advanced layouts with multiple columns and rows. Then you can add content elements to those columns and rows and customize everything in your very unique way.
You are not limited to the numbered options that WordPress offers you. You’ll get access to heaps of sophisticated design elements – including galleries with grid, tile, and masonry layouts, image sliders, media carousels, flip boxes, and portfolios. Everything you need to create a professional-looking artist website!
There’s also a number of third-party plugins that extend the functionality of Elementor – and provide more goodies for artists! The image accordion, for example, comes with the free version of Essential Addons for Elementor.
So, do you need Elementor? If you want to step out of the limits of WordPress’s standard editor, enjoy more creative freedom, and design custom layouts for your website with an intuitive editor… Then yes, you need Elementor!
But now, let’s start our Elementor Tutorial for Beginners by looking at what exactly you can do with Elementor and how to get started!
How do I use the Elementor plugin?
Installing Elementor...
In the WordPress dashboard, hover the mouse over Plugins and click on ‘Add New’.
Most likely, you’ll see Elementor pop up among the recommended plugins for WordPress.
If not, simply type ‘Elementor’ into the search bar. Just another two clicks on ‘Install’ and ‘Activate’ – and you’re good to go!
If you decided to get the Pro version of Elementor, all you need to do is download the ZIP file from Elementor’s website and then upload it to your WordPress install manually by going to the ‘Upload Plugin’ screen.
Elementor Pro is an extension to the free version of Elementor. That means you need the basic version installed before adding the Pro version.
Getting started with Elementor...
Getting started to build your pages and posts with Elementor is easy-peasy. Once you’ve created a new page or post, you’ll see the ‘Edit with Elementor’ button in the top menu bar of WordPress’s user interface.
A click on that button will take you to Elementor’s editing panel. You’ll see the Elementor sidebar with all available elements on the left and your website canvas with live preview on the right.
Another – and perhaps faster – way to open the Elementor editing panel is directly from within the WordPress dashboard. In the dashboard, you’ll see the ‘Elementor Overview’ dropdown box.
From there, you can simply click on ‘+ Create New Page’ and you’ll be directly taken to a new page with the Elementor editing interface open and ready for you to get started.
Btw, this is also a way to quickly continue editing your recent posts. A click on the post name or Pencil icon will open the specific post directly in the Elementor user interface.
As you couldn’t enter a title for the new post by creating it that way, I’ll be showing you shortly how you can fix that – directly within Elementor as well.
But first of all, let’s go on with our Elementor Tutorial for Beginners by having a look at the Elementor sidebar.
The Elementor Sidebar
The Elementor sidebar is on the left-hand side of your screen. It includes a list of all the elements that you can add to your website.
By default, the sidebar doesn’t take up too much space on the screen. If you still find it too large (or too small), you can resize it by dragging the little arrow either left or right.
To get a full-size live preview of your website within the Elementor interface, a click on the little arrow will collapse the sidebar completely.
The Elementor sidebar is resizable and collapsible.
Of course, you can’t edit your page in full-size preview.
A collapsible side panel is just a simple thing, but it’s priceless when it comes to editing speed and comfort.
I promised to let you know how to edit the page title within Elementor. So let’s see how you can do this.
At the bottom of the sidebar, you’ll find several buttons:
- Settings
- Navigator
- History (undo/redo actions & document versions log)
- Responsive Mode (desktop, tablet and mobile mode)
- Preview Changes (full-size preview in a new browser tab)
- Publish / Update button
Button #1: Settings
A click on the Settings button will bring you to Post Settings, where you can also change the title of the current document.
So, simply enter your preferred title into the Title bar under General Settings.
There are a few more options to configure your document. In the Status dropdown menu, you can choose Draft, Pending Review, Private, or Published as status for your document.
Creating a new post via the Elementor Overview panel directly in your WordPress dashboard will set the initial document status to ‘Draft’.
Selecting ‘Pulished’ from the Status dropdown menu has the same effect as clicking the ‘Publish’ button at the bottom of the Elementor sidebar.
You can also upload a featured image for your post by clicking on the ‘Featured Image’ option under General Settings.
A toggle lets you hide or show the title of your current blog post, and the Page Layout settings let you define the layout of the current site.
You can now choose between ‘Default‘, ‘Elementor Full-width’, ‘Elementor Canvas’, and other page layouts included with your theme.
The ‘Default‘ page layout comes the sidebar, whereas ‘Elementor Full Width‘ will give you a page without sidebar. The ‘Elementor Canvas’ option produces a fully blank template.
Depending on what other Elementor plugins you have installed, there may be other options showing up in the Settings tab.
I’m using Essential Addons for Elementor (also highly recommended and free…). That’s why you see the ‘EA Reading Progress Bar’ and ‘EA Table of Contents’ options in the screenshot.
Moving on to the Style tab, you can change the Background Type of the current page. You can select a solid background color, a gradient, or an image. The Padding options lets you set the spacing between the entire page content and outer margins.
The Yoast SEO tab is new with Elementor 3.0. It’s particularly convenient if you’re using the Yoast plugin for Search Engine Optimization. You’ll get a detailed analysis of how well your page is currently performing. If anything is off, you can change it without having to leave Elementor’s user interface.
The Advanced tab is more for developers. It allows you to add custom CSS code to modify the appearance of certain things on your website. Not really needed for the typical WordPress user…
Let’s move on to the next button.
Button #2: Navigator
A click on the second button will bring up the Section Navigator window. I’ll be talking more about that later on in this Elementor Tutorial for Beginners.
Button #3: History
This is a REALLY useful one. You’ll find two tabs under History: Actions and Revisions.
The Actions History is something like the undo/redo function of Elementor. It logs all the changes you make during your current editing session.
You can also use CMD + Z on a Mac or CTRL + Z to manually undo your most recent changes.
To undo changes that are further back, just scroll down to whatever earlier point you like and revert your site to that state.
It’s pretty similar to Photoshop’s history. Only that Elementor logs ALL your actions from first to last in a session, Photoshop saves only a certain number of past actions… grrr
A click on the Revisions tab will show you a list of all changes ever made to your document. Dating back up to 30 days. Once you’ve found the revision you’re looking for, just click the ‘Apply’ button in the top right corner.
Button #4: Responsive Mode
All pages you create with Elementor are responsive by default. That means your design will automatically adapt to different screen sizes, like desktop, tablet, and mobile.
This is extremely important nowadays, because more than half of all web traffic comes from mobile devices. Having a mobile-friendly website is also key to rank in Google’s search results. When a search query comes from a smartphone, Google will favor mobile-optimized pages and automatically rank them higher in the search results.
So, using Elementor is not only good for a user-friendly web design, but also for search engine optimization (SEO).
Elementor makes it very simple to design responsive pages. By clicking on the Desktop icon in the bottom menu, you can live preview your site on different devices.
And what’s even better is that you can make independent changes for each device.
As soon as you switch to tablet preview, for example, you’ll notice little tablet icons next to all responsive settings. The changes you make here will only be applied to tablet mode – not to desktop and mobile mode.
But Elementor’s responsive functions still go further. You cannot only control the styling for different devices, you can also hide elements or sections.
Simply highlight the element or section you want to hide and click on its Advanced tab in the Elementor sidebar.
From there, scroll down to the Responsive tab and toggle on the devices for which you want to hide something.
So, let me give you an example of an element that you might want to hide. I’ve created an image accordion for my front page that only looks good on desktop. That’s why I decided to hide it on tablet and mobile. I’ve replaced it with a regular photo grid for these two smaller devices.
That’s why you’re only able to see the image accordion when you visit my site on your desktop computer or laptop. ☺
Button #5: Preview Changes
A click on the Eye icon in the bottom menu bar opens a full-size preview of your current page in a new browser tab.
You only need to switch tabs to preview your web page the way visitors will get to see it. Once you update your layout, the page will automatically update in the preview tab. You don’t need to refresh it manually.
Believe me, you’ll soon get to appreciate this function. It’s super-convenient and a huge time saver!
Button #6: Publish / Update
Last but not least, there’s the green Publish and Update button… which is pretty self-explanatory.
Just make sure to hit it from time to time during an editing session to save your work! ☺
However, there’s still a nice little feature about the Update button. If you click on the arrow right to the button, you’ll get the option to save your current page as a Draft (without publishing it) and as a Template (more about templates later on in this tutorial).
OK, enough of the bottom menu bar for now. A click on the grid icon in the top right corner will take us back to the elements library.
Single- and Multi-Column Layouts
Creating a single-column layout
Single-column layouts are probably what you’ll be using the most on your website.
Single-column layouts are always used when you have text blocks, headings, images, etc. stacked on top of each other. This is what you see on most websites.
I guess Elementor must know this… 😉 That’s why they made creating single-column layouts super-fast and easy.
To create a single-column layout, all you need to do is grab the element of your choice from the sidebar and drop it onto the Widget area… where you can read ‘Drag widget here’.
Dropping any element onto the Widget Area will default to a single-column layout.
Dropping any element on the Widget Area automatically creates a single-column layout.
Creating a multi-column layout
Being able to create all sorts of multi-column layouts rapidly and easily is the actual beauty of Elementor.
To create a multi-column layout, you’ll first want to click on the pink ‘Add New Section’ icon in the Widget Area.
This brings up a layout options menu from where you can select your preferred layout. You can choose from altogether 12 pre-designed layouts, including different two- and three-column layouts, as well as layouts with 4, 5, and 6 columns.
Having all these preset layout options tends to speed up your workflow immensely!
Adding more columns to a section is absolutely simple, too. Whether you’ve started with a single-column layout or chosen one of the multi-column presets – adding another column just requires a mouse click.
Right-click on the ‘Edit Column’ button at the top left corner of any of the columns and select ‘+ Add New Column’ from the dropdown menu. A new column will be added right to the column you’ve just clicked.
And by the way: This is also how you can delete or duplicate a column.
What about changing the width of the columns? Well, there are two ways to do that. First, you can simply hover the mouse over a column border and drag it, to make it larger or smaller.
Elementor has lots of pre-built multi-column layouts to speed up your workflow, and resizing the column width can be done by dragging the mouse.
Second, you can also enter a percentage value for Column Width under the Layout settings in the Elementor sidebar. The Column Layout settings will automatically open in the sidebar as soon as you click on the ‘Edit Column’ icon.
Finally, there’s is Elementor’s Inner Section Widget that you can use to add more columns to a Section or into Another Column.
Adding an inner section to a multi-column layout.
As you see, it’s really simple to create different multi-column layouts with Elementor. You can have different sections on your page, and each section can have its own column layout.
But now let’s come to the fun part of actually using the Elementor Widgets and creating a custom design for your website.
This is what we’ll be doing right now in this Elementor Tutorial for Beginners!
Elementor Widgets and how to use them
Elementor Widgets to design your website
The actual building blocks to create your website are the elements or widgets that you see in the Elementor sidebar.
The basic version of Elementor offers you an ample selection of 30+ widgets… and counting.
The good thing is that Elementor is, just like WordPress, an open source project.
That means third-party developers can create plugins that extend the basic functionalities of both Elementor and WordPress.
First of all, Elementor also gives you access to the standard WordPress widgets – you can use them just like any other element you see in the Elementor sidebar.
Then, you also have the option to install third-party plugins for Elementor, such as Essential Addons for Elementor and Ultimate Addons for Elementor.
The basic version of Essential Addons is like a must-have for Elementor and should be added along with every Elementor install… plus, it’s absolutely free!
One thing I noticed that’s missing in Elementor is a good table widget. I was looking around a lot for an option to create highly versatile tables as I’ve used them in my reviews of the Best Wacom Tablet with Screen (Top 10 Picks) and Best Wacom Screen Tablet Picks below $1000, for example.
It took me quite a while until I had found the table plugin by Ultimate Addons for Elementor. It’s so fantastic because it allows me to edit the table directly within Elementor’s user interface.
As for other table addons, you have to edit them in the WordPress dashboard and then paste the shortcode into Elementor. Quite cumbersome, plus they never offered as much editing flexibility as Ultimate Addons.
Ultimate Addons isn’t a free plugin, but it comes with heaps of useful features. Great value for money.
Using the drag-and-drop editor
Using Elementor’s visual drag-and-drop editor is a delicious piece of cake.
All you need to do is grab the widget of your choice, and drag-and-drop it onto the preferred section of your canvas.
You either drop it directly on the widget area (for a single-column layout) or you can populate a multi-column layout that you’ve created with widgets of your liking.
Populating columns with Elementor widgets using the drag-and-drop editor.
You see, it only took me a couple of seconds to add all these elements to my website.
If you want to change the position of one of the elements, you can simply click and drag it to another area. The live preview will show you immediately how you page will look with the new changes.
Customizing the look of the Elementor widgets
All Elementor Widgets come with a pre-made design. The design is pretty basic, but functional.
The good thing is, though, that you don’t need to start styling the element from scratch. Tweaking some things here and there is often enough to achieve the custom design you want.
So, let’s see how you can customize the Elementor widgets.
Dropping an element on the canvas or clicking on the element will display the settings in the sidebar.
Each widget has three tabs: Content, Style, and Advanced.
In the Content tab, you can fill your widget with content – text, images, icons, videos, …
Style allows you to change the look of the widget. You can change things like font type, font size, line-height, letter spacing, color, image size, border, etc.
In the three screenshots below, you see how many editing options you have for the Text Widget alone. Elementor is the only free page builder that gives you this much control over your typography. Pretty amazing.
With the latest 3.0 version of Elementor, you now can create text columns within the widget itself. In older versions, you had to create a two-column layout first and then paste the text into each column. This is now so much more convenient. Loving it…
And one other thing that is new with recent versions of Elementor: You can edit and style text either from within the sidebar or inline.
Inline means you can type text directly into the widget area on the live preview screen. Double-clicking on a word lets you assign different text styles (bold, underline, and italic), sub-headings, add links, and bulleted or numbered lists.
This is just one more tiny added benefit that makes your life so much easier. In earlier versions of Elementor, you always had to go back to the sidebar and enter text from there.
Other elements – like images, image galleries, icons, etc. – can still only be edited from within the sidebar. Which makes perfect sense, considering the amount of editing options available for such widgets.
Positioning elements with pixel-perfect accuracy
The Advanced tab that is available for each widget, column and section on your page gives you all the creative design options you can possibly think of.
Oftentimes, the advanced styling options are what you need to give the final touch to your page layout.
There are heaps of styling elements that you can find here: entrance animations, motion effects, background types such as color, gradient, and image, borders, box shadows, custom CSS, and many more.
But one thing I want to talk about in this Elementor Tutorial for Beginners is the Advanced Margin and Padding function. This option is often enough to create cool effects for your website. Making elements overlap, such as pulling parts of a text block or heading up over an image, is what you can do here.
I’ve created a quick example for this tutorial that you can see below. After adding an image to my site, I’ve quickly thrown in an Icon Box with a Call to Action. Creating the overlap effect is not a big deal. A look at the Margin settings will tell you that all I had to do was decrease the top margin to a minus value.
This moves the bottom section up over the image so that both elements can overlap.
Adding a semi-transparent background, rounded border and box shadow makes things still a bit nicer…
This is just a quick demo of what you can do with the free version of Elementor alone.
The ‘Smudged‘ image is from my Lip Service Collection.
Copying & Pasting Elements and Styles
Being able to copy & paste elements and styles is a comparably tiny Elementor feature, but a huge time-saver. Instead of spending hours on recreating the same stuff for different parts of your website, this just takes you a few seconds.
With the Copy & Paste function, you can replicate elements and entire sections to a different area of your site.
Simply go to the element or section you want to copy, right-click on it and select ‘Copy’. Then scroll to the area of your page where you want to place it, right-click again, and select ‘Paste’. As easy as that.
Copying & pasting a heading with two clicks of the mouse.
That way, you can also copy and paste elements and sections to another page than the current one.
Open the target page in a new browser tab, then copy the element or section, and paste it onto the new page just like in the example above.
When designing your website, you might also happen to need to change the look of elements or sections. Let’s say you have a couple of subheadings on your page. You’ve made a change to one of the subheadings. Now you want all the other subheadings to look the same.
No big deal… Right-click on the source element or section and select again ‘Copy’.
Now go to your target element or section. Right-click on it – but instead of using ‘Paste’, you’re going to select ‘Paste Style’. And voilà, the two elements now look same!
Using ‘Reset Style’ will revert the element back to its default styling.
You can easily copy & paste the style of elements. ‘Reset Style’ reverts the element back to its default styling.
Section Navigator
The Section Navigator is something that comes in very handy when creating complex layouts or making sections overlap.
Sometimes, it can be hard to find a particular element on your page, especially if you’re working on a very long and complex page with elements within elements within elements… When sections overlap, it can also be difficult to select a section with the mouse.
The Section Navigator is a collapsible, floating window that lists all sections, columns and elements of your site.
To bring up the Navigator, right-click on the ‘Edit Section’ button (the 6 little dots) at the top center of any section and select ‘Navigator’.
You can also toggle the Navigator on and off by clicking on the Stack icon at the bottom of the Elementor sidebar (button #2 above).
You can grab a bar in the navigator and move it up or down to change the position of the element. A click on the Eye icon at the right of each bar allows you to switch that element on and off. This is a quick way to preview what your page looks like without certain elements.
By double-clicking on the name of any element or section you can give it a custom name to remember it better.
You can also right-click on any element from within the Section Navigator to edit, duplicate, copy, delete or save it as global… which brings us to the next section in our Elementor Tutorial for Beginners – Global Design Options and Widgets.
Global Design Options
With the most recent 3.0 update, Elementor got a Global Design System that gives you even more styling options.
A click on the little ‘Hamburger’ icon at the top left of the Elementor sidebar will take you to the ‘Settings’ menu.
Choosing ‘Site Settings’ opens Elementor’s new ample design system. You’ll have features like Global Colors, Global Fonts, Typography, Buttons, Images, and Form Fields. Plus, you’ll have access to functions that you could previously only use via the Theme Customizer, including Site Identity, Background and Custom CSS.
Basically, this is a straightforward way to assure that all of your pages have a consistent design.
You have ample options under ‘Site Settings’ to change the look and feel of your website.
You can also access these global styling options within every widget. They are under the Style tab.
For example, if you’re editing a heading, you can choose one of your pre-defined Global Colors by clicking on the Globe icon next to the color box. You can also edit your Global Colors from here. A click on the ‘Gear’ icon will take you the same global settings menu that I’ve showed you above.
The same goes for the Typography settings.
The next thing we want to talk about in this Elementor Tutorial for Beginners are the Global Widgets.
Global Widgets
To speed up your workflow even more, Elementor allows you to create Global Widgets that you can use over and over again across your website.
Global Widgets can be best described as customized content elements.
Let’s say I want to use the Icon Box that I’ve created above on many pages across my blog. I can save it to my global library by right-clicking on the element and selecting ‘Save as a Global’.
And this is also what you can do via the Section Navigator: with the Navigator window open, right-click on the element that you want to save as global and select the corresponding menu item from the pop-up menu.
You’ll then see a pop-up window where you can enter a name for your Global Widget and save it.
Once you’ve saved a Global Widget, you can come back to it any time by clicking on the Global tab in the Elementor sidebar.
This is how you can save a Global Widget.
When you want to use the element again, just grab it from there and drag & drop it onto the canvas. You’ll see that it has a yellow border (instead of the regular blue one), indicating that it’s a Global Widget.
You’ll also notice that the sidebar looks different. First of all, the Global Widget is locked. That means you can’t edit or style it right away.
However, there are two options you can use. The green ‘Edit’ button will apply the changes to all Global Widgets of the same type across your website.
To just edit an individual Global Widget on a specific page, you have to use the red ‘Unlink’ button. Once you’ve clicked it, you’ll see the regular widget editor appear in the sidebar, and the yellow widget border will turn back to blue.
You can save as many Global Widgets as you like and use them on as many pages as you want (or even several times on the same page).
If you no longer need a certain widget, simply head over to your WordPress dashboard, and delete it from the Saved Templates section.
Elementor Templates
Elementor Templates are very similar to Global Widgets. You save them once and reuse them as many times as you wish, without having to piece them together each time again.
The difference between templates and Global Widgets is that a template can contain many different elements. A Global Widget consists of one element only – one widget.
As you can see in the example, if I drag the Icon Box that I saved as a Global Widget onto the canvas, it looks different than the original Icon Box above. (Note the yellow border that indicates the Global Widget.)
That’s because the initial Icon Box is within a 3-column layout. The middle column has a background color, border, and border shadow. Plus, it also includes the Call-to-Action at the bottom.
To save the entire section as an Elementor Template, right-click on the ‘Edit Section’ button with the 6 little dots and select ‘Save as Template’.
Give your section a name and hit ‘Save’.
So let’s see how you can add a saved template to your site.
In the Widget Area of your canvas, click on the gray ‘Add Template’ button.
This will bring up the Elementor Template Library. Click on ‘My Templates’, then select your saved template from the list, and click on the green ‘Insert’ button.
Elementor will ask you whether you want to import the document settings. As you’ve created the template within your current website, it automatically has your default document settings.
So, you can either hit Yes or No in this case, it doesn’t matter. Either way, Elementor will import the saved section into your current page, and you can start editing it, if you wish.
If you ever want to delete a saved template, simply click on the three dots at the very right in the Elementor Template Library, and select ‘Delete’.
You can also manage your saved templates over the WordPress dashboard. Just click on Templates > Saved Templates to view, edit, or delete your templates.
Elementor Shortcodes
Every saved template (Global Widget, section, etc.) has its specific ID – a so-called shortcode.
The great thing is that you can embed Elementor shortcodes on all pages, regardless of whether or not they’ve been built with Elementor.
That way, you can easily design Call-to-Actions or similar things, and then have them display wherever you want on your site.
For example, I’ve saved my image along with the Call-to-Action as a section, which now has the unique shortcode ‘[ elementor-template id=”415″ ]’.
To have this section display on my sidebar, I go to Appearance > Widgets in my WordPress dashboard and add the Elementor Library Widget to the Default Sidebar.
From there, I’m simply choosing the desired template from the dropdown menu. If I wish, I can add a title for the widget.
Instead of using the Elementor Library Widget, you can also use the Custom HTML Widget. Works as well. ☺
All that remains to do now is hit save …and voilà, my pre-saved section is showing in the sidebar!
Elementor itself comes with a Shortcode Widget that you can find in the sidebar.
So it’s absolutely no problem to add a saved template to wherever you wish on you website.
Elementor Page and Block Templates
Now, the best thing about Elementor Templates is that there are tons of pre-designed full-page templates and building blocks available that you can use on your website.
Building blocks are basically ‘saved sections’ as discussed above. This can be contact forms, call-to-actions, meet-the-team presentations, portfolio grids, etc.
Page templates, on the other hand, are complete full-length page layouts.
Elementor offers 200+ ready-made blocks and 300+ full-length page templates. Some of the blocks and page templates are available for free. The others come with Elementor Pro, including excellent pre-made templates for photography and art.
All blocks and templates are clean, professional-looking and easy to work with.
To check out the available blocks and templates, click on the gray ‘Add Template’ button in the Widget Area. From there, you can scroll through all ‘Blocks’ and ‘Pages’.
You can preview individual templates by clicking on the Preview Eye icon. If you like the template, click on ‘Insert’.
But now heads up! Elementor will ask you again whether you want to import the document settings.
To not overwrite your theme settings, make sure to hit ‘No’ this time. The template you import will then be adapted to the appearance of your theme.
If you accidentally hit ‘Yes’ and your website now looks totally awkward with the new imported document settings – don’t worry. Just go to Elementor’s Actions History and undo the template import. This will also revert your theme settings.
Then you can simply insert the same template again without importing the document settings this time. ☺
One thing I noticed when inserting a template was that it might take a while to load. But that’s totally normal. Just wait a couple of seconds.
Another thing that can happen is that the inserted template doesn’t look like the preview, once it’s on your web page. That’s because Elementor needs to make it fit into your theme.
However, you can still edit the template like any other regular element to adapt it to your taste. If you really don’t like, just try another of the many Elementor templates!
Elementor Theme Builder
There are two ways to launch the Elementor Theme Builder. In your WordPress dashboard, you can hover the mouse over Templates and select ‘Theme Builder’.
Or, in the Elementor sidebar, you can click on the little Hamburger icon in the top left corner and then on the Theme Builder tab.
If you’re using the basic version of Elementor, you now have the option to create Page and Section templates. With Elementor Pro, however, you get a whole range of additional options, including Header, Footer, Popup, Single Post and Page templates. Cool stuff.
I particularly like the Header and Footer options because they allow you to design custom layouts that match your specific needs – like the custom footer I created for this website.
You can choose to either create your own template from scratch, or use any of the ready-made templates that Elementor offers.
Of course, you can also use any of Elementor’s premade blocks to put together your custom design.
Once you’re done, all you need to do is hit ‘Publish’ and ‘Add a Condition’ to tell Elementor where you want the new template to show: Entire Site, Archives, or Singular page.
With the recent Elementor 3.0 release, the Theme Builder now gives you access to your entire site in the Theme Builder dashboard.
With a few clicks, you can start customizing your entire site, including
- Header
- Footer
- Single Post
- Single Page
- Archive
- Search Results
- Error 404 Pages, and
- Product Pages (if you have an online store).
Elementor Documentation and Help Center
I really hope that you enjoyed this Elementor Tutorial for Beginners and were able to learn a lot from it!
If you still have any questions or encounter any problems with Elementor – no need to worry!
Elementor offers detailed documentation in form of written online helps and tutorial videos – both on their website and YouTube channel.
There’s a huge Help Center where you can obtain helpful information on just about any Elementor widget. You’ll also find a comprehensive Knowledge Base on the Elementor website with detailed information, tutorials, and frequently asked questions (FAQs).
What’s particularly practical is that you’ll find a little help icon at the bottom of each widget in the Elementor sidebar.
That means if you have a question or get stuck on any problem while working with a certain widget, all you need to do is click the help icon and you’ll be taken directly to the specific tutorial.
All this documentation is available for free to all Elementor users – both basic and pro.
On top of that, there are lots of Elementor Tutorials on YouTube for you to go over everything again. Two of the best Elementor tutorials that I myself have watched and learned from are the following:
- ELEMENTOR – THE Quick and Easy Page Builder FOR YOUR ARTIST WEBSITE
Overall Rating
I truly appreciate this post. I have been looking all over for this! Thank goodness I found it on Bing. You’ve made my day! Thanks again
You’re more than welcome, Fornell. Great that you found the post helpful!