start-with-elementor

How To Use Elementor: An Easy Way To Get Started

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

how-to-use-Elementor-page-builder

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

Let assume you already have a WordPress site. If not you can build your site with WordPress within 10 minutes. You can choose an Elementor compatible hosting to run your site smoothly.

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.

wordpress-plugin
Add new plugin

Step 2: Then, search for “Elementor” and select “Install Now“.

how-to-use-Elementor-installation
Search and install Elementor Page Builder

Step 3: Now, go ahead and click on “Activate” to active Elementor on your site.

how-to-use-Elementor-activation
Activate your Elementor

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.

how-to-use-Elementor-upload-plugin
Upload Plugin
  • Click on Choose File and you will redirect to your desktop folders. Select the file.
choose-file-from-plugin
  • After uploading the file, click on Install Now.
how-to-use-Elementor-installation

Once the plugin is installed, click on ‘Activate Plugin’ option to activate Elementor.

how-to-use-Elementor-activation

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.

how-to-use-elementor-canvas

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.

edit-with-elementor

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.

how-to-use-elementor-interface

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.

how-to-use-elementor-setting

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.

how-to-use-elementor-add-template

Here you will find pre-designed blocks, pages, and template that you can insert into your site easily.

how-to-use-elementor-template-library
Elementor Template Library

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.

block-section-template-library

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.

how-to-use-elementor-save-template

Your saved block or template will appear in My Template section and you can insert it into your design while required.

how-to-use-elementor-my-template

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.

how-to-use-elementor-global-widgets
Global Widgets

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.

Elementor Shortcodes

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.

insert shortcode

Well, now you have all the basic knowledge over all the tabs, elements and functionality of this giant page builder.

Powerful Elementor Addons

how-to-use-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”

add-new-section

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.

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

how-to-use-Elementor-edit-widgets

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?

Furthermore, you can supercharge your Elementor site with powerful Happy Addons. Most amazingly, you can add custom animation in your site without any coding with Happy Effects.

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!

Share this post

Share on facebook
Share on twitter
Share on linkedin

Related Post

8 Responses

  1. After reading so many articles on Elementor, I found most of them are partial. This one is a complete package for beginner from installation and use.

    The most valuable thing, I was not bored during the reading. The presentation is good and language is simple to understand for the beginners.

    1. Hello Rudra,
      Thanks for your appreciation. I tried to keep it simple for beginners. You can also read our other articles on Elementor and share your views. Stay with us. Have a great time!

  2. Wow, just wonderful. I was looking for such information where I can apply to my website. Thanks a lot for sharing the ideas.

    1. Hello Raven,
      Thanks for your appreciation. You can also check out our other blogs on Elementor and share your opinions. Stay with us. Have a great time.

Leave a Reply

Your email address will not be published. Required fields are marked *