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 WordPress. Elementor, 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.
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.
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.
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.
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.
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.
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.
Three Key Aspects
Sections, Columns, and Widgets are the three key aspects to working with Elementor.
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.
Also known as Inner Sections, define the layout in vertical columns.
These are content blocks (buttons, images, videos) anything you can find in the menu bar on the left-hand side.
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!