Whether you are new or old to website building, you will find it convenient to use a page builder tool at some point. And no other option is as good as Elementor. It is the most popular page builder tool right now. People find it very easy to customize web pages with Elementor with an interactive drag and drop page building option that lets you see the changes in real-time. But the question is –
How Quick to Learn Elementor?
Well, learning Elementor depends on your level of expertise since it provides plenty of features. The topic is vast and the more you use it the more you can master it. However, we will teach you the fundamentals that you should learn about Elementor to get used to it. We will teach you to learn Elementor fast considering you are a beginner.
Table of Contents
How Quick to Learn Elementor: The Fundamentals About Elementor
We will break down this tutorial into several parts. To make it a complete Elementor tutorial, we will be covering the following –
- Install and activate the Hello Theme
- Create a web page and navigation menu
- Create a header and footer for the web page
- Homepage is next
- Responsive editing and optimization
- Learning the design system
- Increase customization options using Ultra Addons
| Please be noted – Before you begin, you must have a fully functional WordPress website hosted online and at least the free version of Elementor. |
PART-1: Install and activate the Hello Theme
As you already know, you can’t build a WordPress website without a theme. The Hello theme by Elementor is a lightweight theme. It is developed to work with the Elementor page builder. The theme is free and loads incredibly fast. On top of that, it updates from time to time, making it ideal for any website.
Now, let’s install the Hello theme by Elementor
You should head towards –
WordPress Dashboard >> Appearance >> Themes
After that, click on “Add New”
In the search bar, type in – “Hello”. You will notice the theme as “Hello Elementor”. Click on “Install” and then, activate the theme.
Now, the Hello theme will make changes to your website. It will give you more convenience while you are tweaking a web page with Elementor.
PART-2: Create a web page and navigation menu
Basically, you will need to create some fundamental pages for your website. For this tutorial, we will be creating a homepage, a contact us page, and a menu page. To create a page, go to –
Pages >> Add New
If it is your first time creating a WordPress page, then you may see a welcome popup like the below –
Click anywhere outside the popup to close it. You need to give a title to the page that you are creating. Suppose, we want to create the homepage first. Then we should give the title “Home” to it.
At the top right corner, you will notice the “Publish” button. Click on the button and then again when it appears the second time. This is how the page will be created.
Don’t Miss: Use Custom Icons for Elementor
Go back to all pages and then create individual pages for Contact Us and Menu pages in the same way. Don’t forget to provide respective titles for those pages. Although you have created 3 pages, you will notice a total of 5 pages.
You will see a page named “Privacy Policy” and “Sample Page” aside from those 3 pages. For each new installation, WordPress generates these 2 pre-installed pages.
Great now that you know how to create a web page in WordPress, we will show you how to create a navigation menu. To create a nav menu bar, go to –
Dashboard >> Appearance >> Menus
Under the “Menu Structure” give your menu a name in the “Menu Name” input field. You can customize the menu, but we’ll leave it as it is for now. Then hit the “Create Menu” button.
PART-3: Build a header and footer for the web page
Surprisingly, the theme comes with a free header and footer. To ensure this option is enabled, navigate to –
Elementor >> Settings >> Experiments
From there, scroll down a bit and verify if “Active” is selected for the “Hello Theme Header & Footer” option.
Once you make sure it is active, don’t forget to click the “Save Changes” button.
PART-4: Homepage is next
With Elementor, you are always ready to build the homepage since it is so easy. In PART 2, we have created 3 pages –
- the Homepage
- the Contact Us page, and
- the Menu page
As we will be decorating the homepage, you need to open and edit it with Elementor.
The page is completely blank. So, you need to click the Plus (+) icon to add a section. First, we will be creating the Hero banner. Therefore, select one column for its structure. Then, you need to pick a container and insert widgets into the container. You should insert a heading, a button, an image, and social icons (if necessary) using the Elementor widgets.
Next, you need to create the structure of the homepage. Depending on your website niche, tweak the widgets to decorate this section. This section can defer based on the type of your website. For example, you should create a blog grid in this section if you are creating a blog website. Otherwise, you can create a work portfolio and a testimonial if your website provides any type of service.
Also Read: How to Add Custom Fonts to Elementor
After that, you either need to create a footer or our story section. The process of creating a web page, especially the homepage using Elementor is vast and dynamic. Rather than reading the whole process, you should watch this video to learn everything.
If you use Ultra Addons, this process will become much easier. There are tons of premade layouts for the homepage. All you need to do is select one and insert it. That’s it!
Create a new page and edit it Elementor. If Ultra Addons is installed and activated, then you will find more widgets (under the “ULTRAADDONS” section) than usual. With Ultra Addons is activated and when you are editing a page with Elementor, you will a “Library” icon beside the “Add Template” icon.
Click on the “Library” icon and then select the “Pages” tab to find a huge collection of premade pages. Select the one that you find convenient and then hit “Insert” to apply it.
Viola! This way, you can create a homepage easily with Ultra Addons.
PART-5:Responsive editing and optimization
Great! Maybe you are already becoming a professional in using Elementor. If you successfully created a homepage with the Elementor page builder, you need to optimize it for better performance.
So many people will be visiting your website from different devices. That is why it is more important than ever to optimize your website so that it appears perfectly on any device.
With Elementor, you can perfectly show your website on desktops, tablets, and mobiles. It only takes a few tweaks. To use the responsive features of Elementor, you need to click the following icon on the bottom panel to enter responsive mode.
The process to make pages responsive to various devices is dynamic and it is better to show the process with a visual representation rather than writing.
Watch this video with full attention to make a web page responsive and optimized for any device.
PART-6: Learning the design system
In order to maintain consistency throughout the entire website, you must understand the design system. It can guide you with a more effective building process to save both time and effort.
Basically, a design system is a collection of ready-made styles that will help you build the website easily and give it a polished look. You should list the design requirements such as colors, icons, font formats, etc. The design system can vary depending on the requirements and the brand.
You need to match with the global settings when applying icons, typography, colors, and so on. Elementor can help you whether or not you are following the global settings. For instance, if the global icon remains blue (under the “Style” tab), you should understand you are following the global settings. If the icon turns gray, it means the global setting is no longer applied.
We suggest watching the following video to learn more about the Elementor design system –
PART-7: Increase customization options using Ultra Addons
There are many add-on plugins for Elementor. None is better than the Ultra Addons. If you ask –
Why are Ultra Addons better than other plugins?
The answer is simple. The lite version of this plugin is better than the paid version of similar plugins. Once you have installed and activated Ultra Addons, you will find lots of useful widgets on the Elementor panel. The lite version offers more than 200 blocks and 100 ready-made page layouts, which is more than enough.
While adding custom fonts is only possible with Elementor [Pro], you can add custom fonts using Ultra Addons for free.
Although Ultra add-ons come for free, there are no free options for other plugins. The free version exceeds the limit of overall customization options. Still, you can use the Paid version if you want to enjoy some extra benefits. On top of that, Ultra Addons offer cheaper plans than most other plugins.
To Conclude
We hope reading this article you have understood how quick to learn Elementor is. You can create an entire website within a couple of hours if you master Elementor. It is the most popular page builder tool in the world since it is very user-friendly. And getting extra support from Ultra Addons will make it easier to customize web pages.
Read Also Recent Post:
How to create a Blog page
Custom Icons for Elementor
Remove Elementor Pro
Add a Product Slider in WooCommerce