The concept of ‘Build a Website Without Knowing Programming or Code’ becomes popular with WordPress last few years.
Elementor Page Builder makes this notion widen with easy drag and drop option that gives you a live preview. Now, you can develop your personal or company website with Elementor and give it an elegant look without spending money on professionals.
In this article, we are going to show you how to get started with the Elementor step-by-step and ensure its best practices.
Elementor: Best WordPress Page Builder To Design Your Dream Website
Elementor page builder works as a boon for non-tech savvy persons.
It incorporates with 400+ pre-designed templates and blocks that let you do endless design combination to get a high-end and advanced functional website. It makes the entire process of building a website super easy.
Elementor let you build anything that you can imagine.
You will get 100% visual interface to witness all the changes instantly that you make regarding design the site. Besides, Elementor offers 30+ amazing widgets to take your site at a remarkable height completely free.
Furthermore, you can extend the capability of this page builder to infinity by subscribing Elementor Pro at an affordable price. With unlimited widgets of Elementor, you can design all type of website.
Let’s dive in and explore how to start working with Elementor effectively.
How To Install Elementor
Now, let’s see how to install Elementor. And there are 2 ways. Let see the first one.
Step 1: Install and Activate
At first, login to your WordPress Dashboard. Go to the plugin section and click Add New.
Step 2: Then, search for “Elementor” and select “Install Now“.
Step 3: Now, go ahead and click on “Activate” to active Elementor on your site.
Great! You have installed the page builder successfully.
Now, let see the 2nd way.
Alternatively, you can manually download Elementor and upload the file using the Upload Plugin option.
- Click on Choose File and you will redirect to your desktop folders. Select the file.
- After uploading the file, click on Install Now.
Once the plugin is installed, click on ‘Activate Plugin’ option to activate Elementor.
Hence, you can install Elementor Pro in the same way after getting the subscription from elementor.com.
Note: You have to activate Elementor free version first in order to make the plugin works.
Now, you can create a beautiful site by getting a built-in WordPress theme instantly. You can choose the suitable one for your business from a wide variety of Elementor compatible theme gallery. Can you use Elementor with any theme?
Yes, almost. Here is a list for you. Give a check and-
Pick wisely the Theme Works Best With Elementor according to your brand voice.
Getting Started with Elementor
Well, to design your site from scratch with Elementor simply go to WordPress Dashboard>Pages>Add New.
Then, enter a page title and select Elementor Canvas option from the right side template dropdown.
Finally, click on the button “Edit with Elementor” and start working with the most powerful page builder.
However, if you want to edit an exciting page with Elementor Go to All Pages> Hovering Over a Page.
Then a button will appear “Edit with Elementor”. Now, click on the button and start editing your page.
A Quick Overview of the Elementor Editor
As this page builder is loaded you will get an interface where you can assemble the content of your page.
Before going further let you introduce with the basic setting and elements of this page builder to make your site development path smooth.
This is the interface where you can design your page with drag and drop elements and see the live preview of your site.
- Top of the left you will find a hamburger icon for some default and global settings.
- At the right top, you will find a dial button in order to get back to the main panel
- After that, a search box appears to find out listed and required widgets quickly
- You will find all the helpful modules in the left panel
- At the bottom, you will find some useful icons for page settings, quick navigation, history, responsive mode, and preview.
- Also here you will get a Publish button to live your page or save draft/template for using later.
Furthermore, you can make the module panel disappeared by clicking on the arrow sign appears on the right side of the panel.
In this way, you will get a full preview of your page.
Default and Global Page Setting
By default, this page builder adapts your theme’s color and font in the default setting and allows you to design accordingly.
However, you can set the default style and global settings by clicking on the hamburger logo on the top left corner.
It allows you to set the default color from the different color palate that Elementor Modules will use when you start to drag and drop them on your page.
Also, you can set the font family and size for header, body text, and accent here. In addition, you can choose from Color Picker a default color palette including six or eight colors slot that you can use later.
When you will select a color, then a color picker will appear bottom with color slots. You can select the color of those slots from here.
At the Global Setting, you can set some generic font for the pages, the width of the content area of your page and various spacing items. Also, you can switch to dashboard setting right over here.
When you are done in a page you can click on Exit To Dashboard to get back to WordPress Dashboard
Pre-Designed Elementor Templates Library
Well, you can add pre-designed templates or blocks from the template library with few clicks only. Simply click on Add Template button and it will take you to the rich Elementor Template Library.
Here you will find pre-designed blocks, pages, and template that you can insert into your site easily.
In the block section, you will find vast options to choose by categories for different purposes. You can select the heart button to add it to to your Favorite section.
To add a block into your site just hover over it and click the Insert button. It will be downloaded and inserted right into your design instantly.
Similarly, you can insert the entire page design within a few seconds from readymade Designed Pages. You will get a wide variety of page template from here.
Moreover, this WordPress Page Builder removes the hassle of designing the same element repeatedly. You can design a block or full template and save it for further usage.
Your saved block or template will appear in My Template section and you can insert it into your design while required.
With Elementor building website becomes easier than ever.
Global Widgets Elementor
If you want to use a section of your design repeatedly on different pages of your site, you can save it as Global Widget and simply use it from Global Section.
It can be Opt-in forms, Author bios, Social follow icons, Social share icons or anything that you have to insert several times on your site.
Therefore, you need not do the same design again and again. It’s very tiresome. Just design it for one time and use whenever you require.
In this page builder, you can add a widget directly by using shortcodes.
In order to insert the shortcode on your page via default editor navigate WP-admin > Templates > Saved Templates.
Here, you can see all of your saved templates with the shortcodes. Now, from the shortcode column, you can copy the shortcode and paste it into your classic editor. You can see the changes from the preview.
Otherwise, you can go to the Elementor Panel and use shortcode widget and paste the code of the saved template.
You will see the preview instantly right there.
Well, now you have all the basic knowledge over all the tabs, elements and functionality of this giant page builder.
Powerful Elementor Addons
Elementor has already a lot of great content layouts to give your site a professional and stunning look with advanced functionality. Still, you can extend the customization power of it and add some outstanding features to your site using high-end Elementor Addons.
Since you can get helpful addons based on your requirements from wide plugin gallery of WordPress.
Check out the list of 12 Best Elementor Addons To Customize Your WordPress Site With Ease.
Where do I CLICK to Edit Settings & Style of Elementor Widgets
Well, now you have a handful of knowledge to start your first Elementor site.
When you first jumped into Elementor you will get a blank page with two options: “Add New Section” and “Add Template”
As you know every webpage is nothing but a generic structure including a series of sections and a section holds columns in it and those columns will have elements like text, images or videos.
In Elementor you can customize your section according to your imagination. You can add an individual background color, gradient, image or videos to each block of your site.
At first, click on Add New Section and you can choose the block with required columns. Moreover, you can modify the layout by changing the size and width of the column.
Now add elements to the columns and edit it from the left side panel or as shown in the above image. In addition, you can drag widgets from the left module panel and modify it according to your site layout.
Also, you can add a pre-designed template or block as discussed above.
After selecting a widget you will get three option at the left edit panel to modify the widget’s content, style and many more.
From the advanced tab, you can edit the widgets with some extraordinary and premium features. You can modify the contents with other installed addons for your site from here. Moreover, you can add custom CSS Code Snippets in your Elementor site from this panel.
Wrap-up the Thoughts on How to Use Elementor
Congratulation! Now you have all the basic knowledge over Elementor to start your first site. No matter whether you are a newbie or developer this amazing page builder has rich functionality to design your site as per your requirements.
With this page builder, you will get all the freedom to personalize your site according to your brand voice.
Sounds Amazing! Right?
It will enhance your Page Building experience better with 27+ fully customizable widgets completely free.
So, what are you waiting for? Grab the opportunity today!