How to Build Website with Elementor (2021)

By |

Creating a website a few decades ago required a lot of back and forth between developers, copywriters, and project managers. It took months to redesign the website with a few minor changes.

Knowing how to code is no longer needed to create engaging websites. Non-coders can easily develop any WordPress website they like with page builders like Elementor.

You’ll learn about Elementor and how it can help you build a stunning website in this guide.

What is an Elementor?

Elementor is a drag-and-drop WordPress page builder. Using a visual editor, this plugin allows you to create beautiful pages. It’s made to help you easily build dynamic websites.

This WordPress plugin is an all-in-one solution that allows you to manage every aspect of your website’s design from a single place. With motion effects, multiple fonts, and enhanced background images, you can customize your website to suit your brand.

Why should you use an Elementor?

Elementor can be used by a range of experts on your team. If you’re not tech-savvy, the visual editor allows you to drag and drop any of the 90+ widgets, such as buttons, star ratings, and progress bars, to build content. With script optimization, custom attributes, and rollback versions, WordPress remains a top-choice platform for developers.

Elementor Price

Elementor has many paid subscription plans as well as a free option. The free version includes a drag-and-drop editor, 40+ basic widgets, and 30+ templates, as well as all the features you’ll need to build a great user experience on your site.

You can upgrade to the pro edition if you want more advanced features including the ability to add forms and custom CSS. 

The following is the price structure:

  • For one site, the cost is $49 per year.
  • For three sites, the cost is $99 per year.
  • For 1,000 sites, it costs $199 a year.

How to install Elementor?

Elementor is easy to use, much like other WordPress plugins. You can do it in one of two ways.

  • Installing via Elementor.com 
  • To get started, go to Elementor.com and select Get Started.
  • You’ll be asked if you have an active WordPress site because Elementor wants you to have one. If you do, choose Yes to continue. If not, don’t worry! Elementor will guide you through the creation. Note: For the purposes of this demo, we’ll choose Yes.
  • After that, select the Elementor plan you want to start. We’ll use the Free plan for this example.
  • To ensure that your website is running on the WordPress site, enter your domain into their checker.
  • Install Elementor after your site’s compatibility has been verified.
  • Sign in to your website’s admin login page if you’re redirected there. You’ll be taken directly to the Elementor plugin page if you’re already logged in. In the bottom right-hand corner, click Install Now.
  • You’ll then be taken to a page with a confirmation message. Activate the plugin by clicking the Activate Plugin button.
  • It’s done! You’re all set to use the Elementor page editor now.

Using the WordPress Dashboard to install

  • Tap Plugins > Add New from your dashboard.
  • Enter Elementor in the search field and look for Elementor Page Builder.
  • Install Now should be selected. After you’ve completed the installation, click Activate.
  • You’ll be directed to a welcome page, and the page builder will be added to your sidebar automatically. This sidebar menu item, however, is only for accessing Elementor’s back-end settings, not for editing your pages.

Elementor in WordPress: How to Use It

You can take your design vision and make it a reality with Elementor. By allowing you to see each element as you design it, live editing makes the process much easier. Let’s take a closer look at the Elementor editor.

A Tour of the Elementor Editor in a Nutshell

Elementor has quite a user-friendly design. As a result, you can pick up the basics of the editor in just a few minutes.

Create a new page or post and then click Edit with Elementor to get started.

You’ll be taken to the Elementor page editor.

The Elementor sidebar is on the left, and it features all of the drag-and-drop features you can use to build your web page. To add a new module, simply click, hold, and drag a widget to the chosen place.

Sections, Columns, and Widgets are the three key building blocks of the Elementor editor. The largest building blocks are sections. You may add groups of Columns to Sections, and Widgets are housed inside Columns.

The editor will highlight Sections and Columns in a blue box to indicate where you can drag a widget. It’s worth noting that widgets can’t be dragged into the navigation bar or the heading.

The blue handle is used to control the Sections, Columns, and Widgets. To edit the blocks, simply right-click the handle.

You’ll be able to drag a widget into a new, empty area if you scroll to the bottom of the page.

To customize your pages, you should look for specific widgets. Explore more advanced elements, such as animated headlines and testimonial carousels, or go back to basics with a heading or an image gallery.

You can set the default colors and fonts for your pages in the Site Settings menu. Elementor also allows you to customize global settings for your entire website.

Elementor has a Revision History section built in. You can track your changes under the Actions tab, switching back and forth between each action. You can move between your revisions and return to any previous version under the Revisions tab.

How to Build The First Elementor Page

The ease of use of Elementor sets it apart from its rivals. Build your first page on the platform and see for yourself — no coding skills required.

  • To get started, go to your WordPress dashboard.
  • To add a new page, go to Pages, then Add New.
  • To use the page builder, Click Edit with Elementor.

After that, add a Heading, Text Editor, and Image widget.

You’ll be able to edit each widget to your heart’s content once you’ve dragged it into position. Simply press the green Publish button, and you’re done! You’ve completed your first Elementor page.

You can preview and then publish your page once you’ve done designing it. Here’s how you can do it:

  • Go to the panel on the left side of the Elementor editor.
  • To preview your page, click the eye icon.

Elementor Templates

Templates are pre-made Pages and Blocks that help in the design of your WordPress website. Blocks are parts of pre-built widgets, such as footers, headers, and FAQs, while Pages are full content layouts.

Elementor gives you the full license to use any of the templates in your business. You can search for unique templates by page type, template name, or tag in a field. Furthermore, all templates are mobile-friendly. With a single click, you can add them to any page.

  • Navigate to the bottom of the page in the Elementor editor, where there is a section called Add widget here. Select the white folder by clicking on it.
  • A library will be loaded. Click the magnifying glass icon or the image to see a preview of a template.
  • Select the green Insert button from the drop-down menu.
  • It will prompt you to connect to Elementor’s template library if you haven’t already. You will be automatically redirected to Elementor’s website, where you can register or sign in.
  • Your connection will be verified after you register or sign in.
  • Return to the page you were working on and insert the template you like.

It’s done! Your design has been fully loaded and is ready to be customized.

How to Use Elementor to Customize WooCommerce Product Pages

WooCommerce is a well-known e-commerce site that can assist you in creating an online store for your business. You can build custom product pages with Elementor to increase your sales.

You’ll need to install and enable WooCommerce and Elementor in your WordPress dashboard before you can customize your product page. You can also have a few products on your website. You will find out more about WooCommerce here.

You can now build your product page after you’ve completed the setup. Follow the steps below.

  • Go to Elementor > My Templates in your WordPress dashboard.
  • Select Add New from the drop-down menu.
  • Click Create Template after selecting Single Product as your template form.
  • It will take some time for the Elementor Library to load.
  • Then, either use a pre-made product page template or build one from scratch.
  • Add different product widgets to the template to customize your page.
  • When you’re finished, click the eye icon in the bottom left panel to preview your page.
  • Then, under Settings, choose the product you want to display.
  • To publish your page, go to the bottom left panel and press the green Publish button.

Final Verdict – Website Building with Elementor

Elementor is a WordPress plugin designed to assist you in creating a custom website for your business. It is an excellent forum for non-coders thanks to its user-friendly interface.

Install Elementor and the HubSpot WordPress plugin to improve your conversions and attract and nurture more leads.

Hi, I am Dev a Blogger and Affiliate Marketer. Blogging has completely changed my life and affiliate marketing is giving me the freedom to make more money in less time.

Leave a Comment