40+ Best “How To” Elementor Tutorials For 2020
Here we’ve gathered all WordPress Elementor video and text tutorials we have to date. Use them to create and polish your next WordPress website. We've also divided the videos into sections, so you navigate the collection and choose an elementor tutorial easily. Below, you will find clear howtos for both professional web developers and newbies. We will talk a lot about Elementor page builder and the opportunities it offers to designers of various backgrounds. If you haven’t decided yet whether you want this tool at all, check out our archive of testimonials and a short online course. From the WordPress tutorials below, you will learn about the amazing things you can do with Elementor Page builder and JetElements plugins. You will also see many of our flagship templates being used to create spectacular and full-featured websites. Where can you get these templates? One way to get them is to browse the Elementor marketplace. But there’s one more way.
You can access ALL Elementor templates and use them how you like for only $19 a month. Moreover, the themes you get for this little money will already include all the plugins you see in these videos. Well and as if that wasn’t enough, here’s a 5% promo code for our blog readers: BecomeThe1! Apply it when subscribing to ONE and join the Templatemonster design community!
If you want to be the first to see our new web design and web development “howtos” and fresh WordPress tutorial for beginners, subscribe to TemplateMonster YouTube channel.
- Start
- Basis
- How to Create a Mega Menu
- How to Create Advanced Mega Menus
- How to Create a Sticky Menu
- Make Any Element Sticky with Elementor
- How to Add Accordions and Tabs
- How to Add and Manage Brands Module
- How to Create Tables
- How to Create Testimonials
- How to Create Pricing Tables
- How to Style and Customize Contact Form
- How to Create a Horizontal and Vertical Timeline
- Animation
- Visual Effects
- How to Create a Responsive Parallax Scrolling Effect
- How to Create a Full Page Scroll Effect
- How to Create Double Exposure Effect On Website Background
- How to Add Background Video to Sections
- How to Create a Gradient Overlay
- How to Add Gradient to Circle Progress
- How to Add Gradient to Progress Bar
- Blog Headers and Footers With Elementor
- Display Posts in Lists, Tiles, Grid, Slider, Carousel, and More
- How to Create a Posts Carousel
- Galleries and Imagery
- Perfection
- Bonus
Before we start, I want to ask you a few questions. If you could be making beautiful and functional websites (one or two, or dozens of them) without having to hire someone? What if you didn’t need to wander around the web in search of information and help, wouldn’t it be great? What if you didn’t have to pay for expensive web design courses or get endless tickets from thee providers? What if your next website could finally look and work as you want it to? How much easier would your life be? How much money would you save? Well, there’s only one way to find that out. You can sign up for our FREE 5-day Elementor crash course and spend an hour a day developing your web design skills. Suppose you’ve got an hour a day and a mailbox, that’s a great start! And we surely have expertise and the desire to help people make most of Elementor Page builder and web design in general! Let’s see how far this can take us. Almost every our WordPress tutorial on Youtube is coupled with a blog post that covers the same topic. I hope you enjoy them all!
Start
How to Install Elementor WordPress Template - elementor tutorial
More to know: How to Install Elementor WordPress Template
Here’s a nice video about WordPress for beginners. It will explain how to install Elementor and add your first WordPress template. Elementor Page Builder is an easy frontend design tool that delivers beautiful results with minimum effort from the user. Anyone can master Elementor and get their website polished and packed with functionality.
How to Create Websites with Elementor Page Builder - elementor tutorial
Now we are inviting you to join our free Elementor web design course developed for every WordPress beginner. We are offering easy-to-follow videos and big informative posts to help you explore web design with Elementor. Whatever knowledge and skills you already have, our practical course will help you work more effectively and use the full potential of Elementor Page Builder. Remember that Elementor Page Builder is made for you whether you are a professional or a WordPress beginner!
How to Create a Stunning Blog Painlessly - elementor tutorial
More to know: How to Create a Stunning Blog Painlessly
From this tutorial, you will learn how to use JetBlog plugin to increase the converting potential of your website. You will learn how to add posts, create post lists, and adjust post settings. We will use the Huffington post blog as an example and learn how you can make similar layouts. You will also try out different post presentations, play with colors and designs, add media, and do other important things with Elementor.
Basics
How to Create a Mega Menu - elementor tutorial
More to know: How to Create a Mega Menu with Elementor Builder Quickly and Easily?
Our next video deals with creating a MegaMenu. You will learn how to create highly customized and advanced menus that drop down to show categories, media, and HTML. You will also get to customize menu reveal options and form factors. Mega Menus are huge and all their contents elements are visible to the users at the same time. This simplifies the navigation process and helps visitor see more content.
How to Create Advanced Mega Menus - elementor tutorial
From this video, you will learn how to create a top-notch Mega Menu that will display your products, blog posts, contact form, map, or pretty whatever you choose to put there. You will need your Elementor Page builder and the JetMenu plugin to add an advanced Megamenu to your website. All the steps in the tutorial are clear and easy to follow, so have fun!
How to Create a Sticky Menu - elementor tutorial
Sticky menus are a must for any website in 2019. Some of us may not even remember the times when we had to scroll back up the pages to access navigation. In this video, we show you how you can use MyStickyMenu plugin to create sticky menu bars. Follow these simple steps and get your sticky menu fully customized to your liking
Make Any Element Sticky with Elementor - elementor tutorial
Any element on your WordPress page can be made sticky with Elementor and JetTricks. The element of your choice, like a subscription form or a media player, will be made visible from any spot on the page. Basically, you will be creating a sticky column at the side of your page and putting there the selected element or widget. Cool, isn’t it?
How to Add Accordions and Tabs - elementor tutorial
More to know:
- How to Create a Mega Menu with Elementor Builder Quickly and Easily
- Tabs and Accordions on WordPress with Elementor
Your new WordPress website will need smart navigation. Among other choices, you will have to decide between accordions and tabs. Will you divide the content into sections with tabs or make the pages short and viewable with accordions? Whatever you prefer, this video will teach you how to make use of JetTabs plugin to build effective navigation.
How to Add and Manage Brands Module - elementor tutorial
More to know: How to Add and Manage Brands Module in WordPress Elementor Themes
Next, we’ll continue getting to know the functionality of Elementor Page Builder. To let the everyone see which brands do business with you, you can add a Brands Module to your website. You will need a JetElement plugin and Elementor Page Builder. Expect to learn how to add content, set the number of pages, style the sections, and add links.
How to Create Tables - elementor tutorial
If an image is worth a thousand words, a good table can beat a dozen images. Using Elementor, you can create very pretty tables with filters and advanced settings. This video will walk you through the steps of customizing table headers and body and before adding various types of content. Make sure you check out all table styles and choose the prettiest colors.
How to Create Testimonials - elementor tutorial
More to know: How to Create Testimonials Using Elementor Page Builder
There’s one thing people can’t get enough of - it’s social proof. When the testimonials section on your website looks trustworthy and inspiring, it encourages conversions. You will need the JetElements plugin and your Elementor Page builder to achieve that. You will be adding photos, icons, titles, setting the section behavior, adding advanced typography, and backgrounds.
How to Create Pricing Tables
More to know:
- How to Create Pricing Tables with Elementor Page Builder
- How to Add a Price List to the Page with Elementor
In this video, we will be creating pricing tables with WordPress plugins and JetElements add-on. You will learn how to set columns, add titles and other content, add images and icons, etc. Pricing tables allow displaying prices, product characteristics and included/excluded features in a compelling way. You will need to choose the most appropriate design from the color and other design options offered by the addon.
How to Style and Customize Contact Form
More to know:
- How to Add a Contact Form 7 with Elementor Page Builder
- How to Style and Customize Contact Forms with Elementor Page Builder
You will use the ContactForm7 plugin and JetElements add-on to create contact forms that match the design of your website. The design of the forms should also fit the personality of your brand. You can use premade forms or create the design yourself. Your contact form should be easy to find and make it clear why someone should use it.
How to Create a Horizontal and Vertical Timeline
Since Facebook has made us all crave stories, likes, and shares, having a timeline on your website is very appropriate. You can use it to visually communicate important information about a company or a project in the About Us section of your website or any other page. This video will explain to you how you can add a personalized timeline to your Elementor-built website.
Animation
How to Create Animated Text
More to know: How To Create Animated Text With Elementor Builder
The animated text adds life and dynamism to website designs and helps to guide people’s attention to where you want it to be. You will add to the aesthetic and emphasize the brand name or CTA. In this video, you will use JeElements to work with different text designs and animations effects.
How to Create Animated Box
Animated flip boxes are super cute and practical. They allow displaying content from both sides while grabbing the viewer's attention by the movement itself. When hovered upon, the flip box behaves in some way and communicates the message in an amusing way. You will learn how to choose the layout, style, and effects of the animated box you create and add different types of content
Visual Effects
How to Create a Responsive Parallax Scrolling Effect
More to know:
- How to Create a Responsive Parallax Scrolling Effect with Elementor
- How to Create a Full Page Scroll With Elementor
Parallax means that the background elements of a website layout move slower than those closer to the fore. This creates the illusion of depth in a design.On mobile screens, it is important to make sure that parallax doesn’t slow the website down but adds to the dynamism and attractiveness of your layouts. From this video, you will learn how to create Responsive Parallax with JetTricks. You will learn how to create Parallax and adapt it to different screens with ease.
How to Create a Full Page Scroll Effect
More to know:
- How to Create Animated Snowfall Effect with Elementor
- How to Create Scroll Navigation with Elementor
One page websites are still trending and animation adds dynamism to them. If you want site visitors to stay longer on your website and look through all the content with a single scroll, this video is for you. Traditionally, you will need Elementor builder and JetElements addon. You will create a few sections in the WordPress template with the Elementor Magic Button and then enable the Scroll Navigation Widget.
How to Create Double Exposure Effect On Website Background
More to know: How Do You Create Double Exposure Effect On Your Website Background
Inspired by the latest trends in web design, we will be creating a double exposure effect in this tutorial. You will not have to use any software like Photoshop, just your Elementor Page builder. You will add your images, make them overlap, and then turn them into one double effect element. With this tutorial, the whole process will be as easy as can be.
How to Add Background Video to Sections
More to know: How To Add A Background Video To Your Pages With Elementor
Web designers use background videos to help companies communicate their mission, core value, or the brand concept. Overall, videos glue the eyes of visitors to the website and make them stay longer and consume more content. To create a video background, you will need to create a new section with your Elementor builder, customize it a bit, open the Style tab and drop your video to the background.
How to Create Gradient Overlay
More to know: A Step-by-Step Guide For Creating Gradient Overlay Using Elementor Blending Modes
Gradients have made a comeback a few years ago. They are not going anywhere from the top positions among web design trends. It is possible to create gradients in Photoshop or similar software but it’s even more easy to create them right in the Elementor page builder. You will select an image and then blend it with a gradient tile. In this video, we will explore the design possibilities of the section style customizations in Elementor templates.
How to Add Gradient to Circle Progress
More to know:
- How to Display Progress Bar and Circle Progress with Elementor - Tutorial
- Add Gradient to Progress Bar
Progress bars including circular ones are among the most popular tools to increase website conversions. They allow showing users that a certain task is still on its way to completion. This helps users to concentrate on a task and not drop the task uncompleted. And how about mixing this wonderful tool with gradients? Watch the video to see how you can do it.
How to Add Gradient to Progress Bar
More to know: Add Gradient to Progress Bar
The same principles apply to linear progress bars. Again, you need a JetElements addon and your Elementor page builder. The Progress Bar widget is one of the alternative tools offered in the set, you can drop it into your newly created section and style your progress bars as you like with one color, another one, changing angles, border radius, etc.
Blog Headers and Footers With Elementor
Most often, blog footers contain copyright notices, social buttons, contacts, and navigation. Headers usually include a menu, an important widget, page tabs, etc. What you will choose to add to your blog headers and footers will become clear after you watch this video and follow our detailed tutorial. Grab your JetElements pack and have fun!
Display Posts in Lists, Tiles, Grid, Slider, Carousel, and More
More to know:
- Best Practices for Displaying Posts on WordPress Using Elementor
- How to Set Up Blog Post Lists with Elementor Page Builder
When scrolling through your website blog, people will want to be able to see post titles and choose which ones they want to read. Displaying an image with the post title will also help site visitors choose the most interesting content. Have you already found your perfect way to show blog posts on your website? Smart Tiles or Text Ticker, or Video Playlist? There are many more options! In this video, we will be exploring post display options with Elementor Page Builder and the JetBlog.
How to Create a Posts Carousel
More to know: How to Create a Posts Carousel Using JetElements Posts Widget
Galleries and Imagery
How to Create a Justified Gallery Layout
More to know:
- How to Display SVG files on Elementor-built pages
- Create Justified Gallery Layout with Elementor – Elementor Tutorial
Arranging your images of different sizes neatly is something any web designer will have to do. In this tutorial, we will be discussing different gallery layouts and how you can style them with Elementor page builder and JetElements plugin. You will play with the settings like border type and radius, change icons and titles, create overlays, and change alignment.
How to Create Masonry Gallery Layout
More to know: How to Create a Masonry Blog Layout with Elementor
Masonry layout is another option for displaying gallery images. It is based on columns but unlike in the justified layout, images in it do not have the same height. The use of space is optimal in this layout and you don’t have to adjust images to make them look aligned. In this video, we will be creating a masonry gallery to your WordPress template with Elementor Page builder.
How to Create Image Slider
You will need an image slider when creating a portfolio website or needing to display your projects, images, products, important messages. Most WP templates have images sliders installed but if you want to choose its location yourself, you may need additional plugins like JetElements. The video will show you all the tricks you can do with the Elementor slider widget.
How to Create Image inside Text
More to know: Image inside Text
Bold headlines and creative typography help make a lasting impression on website viewers. If you want to combine images with letters in your design, grab you JetElements pack and watch this tutorial. Choose the headline widget, drop it into the section, adjust the title and decorative elements, play with the type size, add an image inside. And this is it!
How to Add Image Accordion
More to know: Image Accordion on WordPress with Elementor
Image accordions are basically sets of images that expand allowing to display a lot of content in a tiny website section. We will take a close look at the process of creating the image accordion using the JetTabs plugin. Drop this widget into the section, choose images and have fun with style presents.
How to Create an Attractive Image Grid, Masonry or Justify Layout
More to know: How to Create an Attractive Image Grid, Masonry or Justify Layout with JetElements Images Layout Widget for Elementor?
Perfection
Change the Default Theme Color and Typography in Any WordPress Theme
We’re all used to having to buy premium themes to be able to change theme colors. Cheap or free themes didn’t seem to give such an opportunity. With Elementor, any theme you want to use will be customizable in terms of colors and typography. You will not have to touch a line of code to do that. Convenient? Indeed.
How to Manage the Countdown Timer Module
More to know:
- How to Create a Countdown Timer with Elementor Page Builder
- How to Manage the Countdown Timer Module in Elementor WordPress Themes
One more proven way to boost website conversions is to set up a countdown timer. This tools will show your site visitors how much time they have until a certain offer expires. In this video, we are using the Elementor Countdown widget. It offers a bunch of customizable designs, so you can create any type of countdown timers with little effort.
How to Display Current Weather and Weather Forecast
More to know: Display Current Weather and Weather Forecast with Elementor
Some websites, especially those dealing with travel and air transportation, would benefit from a widget that displays the current weather forecast. In this video, we will explain how you can get one for your website using Jet Elements and Elementor Page builder. As usual, you will have plenty of design and customization options to create your perfect weather tile.
How to Create Pie Chart Circle Progress
More to know: Pie Chart Circle Progress on WordPress with Elementor Page Builder
Progress pie charts are the most popular among business websites. Their main aim is to show how far one is on their way to completing some operation. Watch this video how easy it is to add one of these widgets to your website. With jet Elements add-ons, you’ve got a huge range of tools to try out.
How to Add Instagram Feed - elementor tutorial
More to know: Add Instagram Feed to WordPress Page with Elementor Page Builder
Photos! We need more Instagram images everywhere! Why not add an Instagram feed to your website and offer your site guests a comprehensive social media experience? You can choose which photos to display: those from a specific Instagram account of a certain hashtag. You also choose how your Instagram feed will look like by setting up its design parameters. Here are some more amazing widgets and tools you can add to your website with Elementor page builder.
Bonus
How to Create a Portfolio on WordPress with Elementor
More to know:
- How to Create a Categorized Portfolio
- How To Create And Shape Up Your Portfolio With Elementor Builder
If you are making a website that is supposed to showcase the best works of a designer/creative artist and display their best projects, this tutorial is for you. We will be making a portfolio website using Elementor. The process of customization and adding your content will be made clear to you, and you will be able to follow our steps easily.
How to Create iPhone Xr Landing Page in under 30 minutes - elementor tutorial
Most websites are made to promote and advertise something. The quality of landing pages that lead to these websites from social media and Google ads can make or kill any digital marketing campaign. In this video, you will be making an awesome landing page for a high-tech product in half an hour or less. If you think this is impossible, then start watching this tutorial right now.
Play MP3 Tracks From Media Library in Elementor Audio Player - elementor tutorial
This video will explore how you can add an mp3 player of your own creation to your website. With Elementor, anyone can style an audio player, choose all the design elements like backgrounds, gradients, border, and place it anywhere on the website. Adding media to your website with JetElements is as easy as cake.
Play Videos in Brand New Elementor Video Player - elementor tutorial
With Elementor and JetElements you can create a highly customized video player and add it to your WordPress site. Your new player will pull videos from YouTube, Vimeo, or your media library. You will need to go through video options, thumbnail overlay options, and play button parameters. These steps are easy if you follow the instructions offered in this video. Here are some more WordPress tutorials for beginners and experts:
Do you want to see more of our WordPress tutorials youtube? Then subscribe to our channel! These are the themes you’ve seen used in our tutorials:
And don’t forget about the 5% promo code: BecomeThe1
Read Also
A Step-by-Step Guide For Creating Gradient Overlay Using Elementor Blending Modes
How To Create And Shape Up Your Portfolio With Elementor Builder
How to Create Testimonials Using Elementor Page Builder
How to Create Pricing Tables with Elementor Page Builder
How to Create a Responsive Parallax Scrolling Effect with Elementor
Top 50 WordPress Elementor Business Themes
Don’t miss out these all-time favourites
- The best hosting for a WordPress website. Tap our link to get the best price on the market with 82% off. If HostPapa didn’t impress you check out other alternatives.
- Monthly SEO service and On-Page SEO - to increase your website organic traffic.
- Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
- ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
Professional copywriter with more than 10 years of experience in the niche. An expert journalist and SMM manager specializing in press releases, SEO, online marketing, and more. Follow Ann on Twitter
Get more to your email
Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.
Leave a Reply
You must be logged in to post a comment.