How to Build a WordPress Website with Elementor step by step

Creating a website has become easier these days with a platform like WordPress and a page builder like Elementor that lets you structure and design pages with minimal effort and time. If you don’t know about WordPress yet and why you should consider building your website in WordPress, you can read my blog Why consider building your website with WordPressElementor, on the other hand, is a powerful page builder or tool that lets you create beautiful WordPress websites the most easily and quickly possible. With an extremely user-friendly user interface, dozens of useful widgets, a unique mobile editing toolset, and a visual revision history feature.

In this tutorial, I’m going to show you how to build a WordPress Website with Elementor, walking you through the entire process step by step.

Before we start with the tutorial, I will assume that you already have a working installation of WordPress. If not, you can read this article on how to set up a WordPress Installation.

Theme Installation

Before we setup Elementor to build our website, let’s install first our WordPress Theme. In WordPress, a theme is a collection of templates and stylesheets used to define the appearance and display of a WordPress powered website. Many WordPress Themes are compatible with Elementor, but for the sake of this tutorial, let’s use Hello Theme, a WordPress Theme made by folks at Elementor.

To install Hello Theme, go to Appearance > Themes > Add New. Search for Hello Theme, click install, and then activate.

WordPress Theme Library
WordPress Theme Library

Setting up Elementor

Now that we already have our Theme installed, let’s install the Elementor plugin next. There are two versions, a free version, and a Pro version. Elementor’s Free version offers limitless design possibilities. Elementor Pro, however, empowers you with more professional tools that speed up your workflow, and allow you to get more conversions and sales. To get the plugin visit elementor.com; the free version is immediately available on the homepage, but for the Pro version navigate to the pricing page to make your choice.

Elementor Home Page
Elementor Home Page

Once you’ve downloaded the files, return to your WordPress installation, then go to Plugins > Add New > Upload Plugin and follow the onscreen instructions. 

One important thing to note is that to install the Pro version, you’ll also need to have installed the free version. Think of the Pro version as being an extension of the free version.

Once activated, you will be presented with a welcome screen and you will notice a new menu item in the WordPress admin navigation.

Elementor Menu Item
Elementor Menu Item

If you’re installing the Pro version, you’ll need to hit the Activate License button once you’ve uploaded the plugin. This license number will be available through the account you’ll have made when purchasing the plugin.

Elementor License Settings
Elementor License Settings

Creating Web Page

To create our Web Page, go to Pages > Add New. We would then enter a title for the new page, set the template to Elementor Canvas, and then click the “Edit with Elementor” button to begin editing the web page with Elementor.

creating new page min
Creating New Page

Editing Page with Elementor

The Elementor editor shows the page you’re editing, with a large menu on the left-hand side. All the widgets which you can see (like Inner Section, Heading, Image, Text Editor) can be dragged and dropped onto the page.

There are also options to edit Global styles, fonts, colors, and sizes. Whenever you change any of the options, those changes are reflected in realtime on the page to the right.

Elementor Editor
Elementor Editor

Three Key Aspects

Sections, Columns, and Widgets are the three key aspects to working with Elementor.

Sections

These are the largest building blocks available to you. Hovering over them in the editor will reveal a blue dotted border around them, as well as a tab on the top with some options.

Columns

Also known as Inner Sections, define the layout in vertical columns.

Widgets

These are content blocks (buttons, images, videos) anything you can find in the menu bar on the left-hand side.

Publishing

When you’re happy with the changes, hit the Publish button at the bottom of the menu to save your work. To preview your page click the  icon. 

In Elementor you can also edit a Published page and save your work as Draft. That means that you will not ruin your published page while saving your work as Draft.

Elementor is the most full-featured page builder. There is also a Pro add-on to add additional developer features. Visit Elementor website today!

Joel Labaddan Jr

Joel Labaddan Jr

I’m a freelance Web Designer and Developer based in the Philippines who work remotely on projects for clients around the globe.

Related article

Share this article!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email

Download my pricing guide

Enter your email below to get a download of my 2020 Price Guide