Is Elementor Easy To Use? – Elementor Tutorial For Beginners

  • Post category:WordPress
  • Post last modified:April 1, 2024

GinAngieLa.com independently selects and reviews products & services. When you purchase through links on our site, we may earn a commission, at no extra cost to you. Learn more.

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! 

Is Elementor Easy To Use? – Elementor Tutorial For Beginners
(Image Credit: Elementor)
Table of Contents
    Add a header to begin generating the table of contents

    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. 

    GET STARTED WITH ELEMENTOR TODAY for free

    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...

    Installing Elementor is as easy as installing any other WordPress plugin.

    In the WordPress dashboard, hover the mouse over Plugins and click on ‘Add New’.

    How do I use the Elementor plugin?
    Installing the Elementor plugin.

    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 Tutorial
    Manually uploading the Elementor Pro plugin.

    Elementor Pro is an extension to the free version of Elementor. That means you need the basic version installed before adding the Pro version.

    HAPPY OR money back WITHIN THE FIRST MONTH

    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.

    Getting started with Elementor
    Getting started with Elementor on a new post.

    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.

    Elementor user interface
    The Elementor user interface with the sidebar on the left-hand screen.

    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.

    + Create new post
    Creating a new Elementor page from within the WordPress dashboard.

    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.

    Quick Tip

    To quickly slide the side panel in and out, you can press ‘CMD + P’ on a Mac and ‘CTRL + P’ on a PC.

    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:

    Options bottom sidebar
    Bottom menu bar of the Elementor sidebar.
    1. Settings
    2. Navigator
    3. History (undo/redo actions & document versions log)
    4. Responsive Mode (desktop, tablet and mobile mode)
    5. Preview Changes 
(full-size preview in a new browser tab)
    6. 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.

    Elementor General Settings
    General Post Settings.

    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. 

    Page layout settings
    There are a couple of page layout settings, also depending on your theme.

    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…

    Elementor Page Settings
    Other options under Post Settings.

    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.

    Actions & Revisions History
    Actions and Revisions History. Very useful...

    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).

    Responsive design
    Responsive editing at the click of a button.

    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.

    Tablet preview mode
    Page preview in tablet 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. 

    Hiding elements and sections for different modes
    Hiding elements and sections in responsive mode.

    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).

    Publish / Update button
    Grid icon
    Elements Library icon.

    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.

    Is Elementor easy to use to create a custom website design?
    Basic Elementor Widgets. (Image: Elementor)

    If you’re the lucky owner of Elementor Pro, you’ll get another 50+ more advanced elements to build your website… with lots of goodies for artists, including widgets to create grid, tile and masonry photo galleries, image sliders, media carousels, flip boxes, and portfolios.

    Elementor Pro widgets
    Elementor Pro Widgets. (Image: Elementor)
    GET ALL THOSE ELEMENTOR Premium Goodies
    WordPress Widgets
    WordPress Widgets in the Elementor sidebar.

    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.

    Elementor styling options
    Each Elementor Widget has Content, Style, and Advanced editing options.

    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.

    inline text editing
    Inline text editing options.

    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.

    Setting Margins and Paddings in the Advanced tab
    Creating nice overlays with the Margin function.
    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’.

    Section Navigator
    Opening the Navigator with a right-click on the 'Edit Section' button.

    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.

    Hamburger icon
    The 'Hamburger' icon opens 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. 

    Global Colors menu
    Global styling options are available in each widget with Elementor 3.0.

    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’.

    Global Widgets
    Saving a pre-designed element as a Global Widget makes your work so much easier.

    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.

    Saving a Global Widget from within the Section Navigator
    You can also save an element as a Global Widget by using the Navigator.

    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.

    Editing a Global Widget
    Editing options for Global Widgets.

    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.

    Deleting a Global Widget from the Saved Templates section in the WordPress dashboard
    You can delete a Global Widget in the 'Saved Templates' section in your WordPress dashboard.

    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.)

    Elementor templates
    Global Widgets are highlighted with a yellow border.

    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’.

    Save the entire section as an Elementor Template
    Saving an entire section as a 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.

    'Add Template' button
    This is where you can access the Template Library.

    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 Template Library
    Saved sections can be found under 'My Templates'.

    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.

    Import Document Settings
    Importing Document Settings will overwrite the current settings of your theme.

    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.

    Elementor shortcodes
    Every saved template has a unique 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″ ]’.

    Adding an Elementor template to the sidebar
    Adding an Elementor template to the sidebar using the Elementor Library Widget.

    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!

    Call-to-Action in sidebar
    This is how you can easily add Call-to-Actions to your 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 Shortcode Widget
    The Shortcode Widget comes with the basic Elementor version.

    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.

    Elementor Template Kits
    There are lots of Elementor Template Kits available, including some for photography and art.
    BUILD YOUR ARTIST WEBSITE WITH ELEMENTOR

    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

    Elementor Theme Builder
    Launching the Theme Builder from the WordPress dashboard.

    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.

    Elementor Theme Builder
    Launching the Theme Builder from the Elementor sidebar.

    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.

    Elementor Section Templates
    With Elementor Pro, you have a lot more options to create custom templates.

    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.

    Display conditions
    Decide where you want Elementor to show your custom template.

    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 Theme Builder template options
    The Theme Builder makes it easy to customize every part of your website.
    GET All The Benefits OF ELEMENTOR PRO TODAY

    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).

    The help icon will take you to the specific tutorial.
    The help icon at the bottom of each widget will take you to the specific tutorial.

    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: 

    Overall Rating
    4.75
    4.75/5
    Is Elementor Easy To Use? – Elementor Tutorial For Beginners
    Is Elementor Easy To Use? – Elementor Tutorial For Beginners
    Is Elementor Easy To Use? – Elementor Tutorial For Beginners
    Is Elementor Easy To Use? – Elementor Tutorial For Beginners
    AngieG. – The Person behind the Pictures
    HI Y'ALL!  
    My name is Angie and I’m a self-taught digital artist. On this blog, I am sharing my knowledge and educational resources to help you build a website for your art. My desire is to show you that you don’t need to be a coder to create a website. All you need is the desire to learn and the get-up-and-go to get started!
    LET'S CONNECT:
    SHARE THIS POST:

    This Post Has 2 Comments

    1. Fornell

      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

      1. User Avatar
        GinAngieLa

        You’re more than welcome, Fornell. Great that you found the post helpful!

    We ♥ comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.