Site Building with WordPress and Elementor

One of the biggest challenges for folks new to building a website with WordPress is that it feels very much like writing/blogging software out of the box. Yes, you can create pages, but as soon as you want to structure information in columns or do anything more complex than images and text you will quickly find you need to find a theme or a handful of plugins to get the job done (and if you don’t know what you don’t know, that’s a huge hurdle). “Site Builder” plugins are becoming more and more popular and you even see more themes integrating them into their frameworks these days. Some are pretty good, while others are not so much.

To quickly get up and running with a WordPress site, we'll explore Elementor which is both free (although there is a Pro, paid version available) and incredibly user-friendly with a lot of great options.

To start we’ll fire up a WordPress install on Reclaim Hosting.

A freshly installed WordPress site showing the default theme layout with a sample blog post

We're not looking to create a blog, so go to Settings > Reading and change the homepage to be the About page that WordPress creates by default.

WordPress Reading Settings panel with 'Your homepage displays' set to 'A static page' and the Homepage dropdown set to the About page

Then let’s install the Elementor plugin to get started.

WordPress Add Plugins screen search results showing the Elementor Website Builder card with the Install Now button highlighted

If we were to look at our site at this point nothing much has changed. We have the About page showing by default on the homepage. Let’s click that Edit Page button to start making some changes.

The front end of the website showing the default About page with the WordPress admin top bar and the Edit Page option highlighted

In addition to your standard Post/Page editor functions we see a big Edit with Elementor button at the top. But before we hit that, take a quick look Page Templates in the righthand sidebar. Elementor offers templates to go full-width instead of being limited to the layout of the theme we’re working with (if you look above at the previous screenshot all the content is pushed to the right which we don’t want). They also have a "Canvas" option which is awesome because it clears the whole theme content and gives us an empty workspace to build from. I’ll be using that so I select it and click Update.

WordPress page editor highlighting the blue Edit with Elementor button at the top


Page Attributes section in the WordPress sidebar highlighting the Template dropdown menu set to Elementor Canvas

Now let’s hit that Edit with Elementor button and start building out the site. You’ll see we’re taken to an interface that looks a lot more like the WordPress Customizer than the traditional page editor. We can add and edit items via the lefthand sidebar and interact directly with them on the site on the righthand preview seeing the site exactly as it will look to visitors.

The Elementor editor interface showing the drag-and-drop widget panel on the left and a blank canvas area on the right

WordPress added some demo content to the About page that I don’t need so I highlight over that and click the X to remove that text block.

Highlighting a pre-existing WordPress text section inside the Elementor editor with the close button highlighted to delete the section

Now below that we can add a new section for content. Let’s start by looking at the template options Elementor comes with which is a great way to kickstart building a site rather than starting from scratch. Click Add Template and you’re taken to a library of different full page layouts complete with demo content to choose from. Fair warning here, you will find templates that are “Pro Only” meaning this is where you’d need a paid version of the plugin to use those (and hey, if you like the plugin maybe it’s worth throwing some money at the developers!), but there are a lot of great free options.

Elementor design block options showing two round icon buttons: a plus icon to add a new section and a folder icon to add a pre-built template

Let's choose a simple “About Page” template to modify.

The Elementor Library modal showcasing various full-page templates and layouts available for import

You’ll find you can simply click in the various boxes and edit text directly as well as modify things in more detail using the lefthand sidebar which dynamically changes when an element of the site is selected.

Elementor screen showing a selected text block on the right and the text editing tools open in the left-hand panel
Highlighting direct inline text editing on the visual preview side of the Elementor builder window

Elementor also has options in the lower left to see how the site will display on tablets and mobile devices.

Responsive Mode control bar at the bottom of the Elementor panel displaying options to toggle between Desktop, Tablet, and Mobile previews

Going back quickly to the same area where we added Templates you’ll notice there’s a tab for Blocks as well. Templates are full page designs whereas Blocks are just small snippets of content (an FAQ section, a Call to Action, etc).

The Elementor Library modal with the Blocks tab active showing short modular design sections like contact forms and banners

You can also build from scratch and add specific elements to your page to build out your own layout. You would create a new section which it lets you choose how many columns you’d like.

The Select Your Structure prompt in Elementor displaying several column layout options such as single, double, or triple columns

Then you can drag elements from the left sidebar over and Elementor has a large library of widgets to choose from with everything from Text, Images, Videos, Maps, Buttons as well as dynamic content like Blog Posts or Tags and Categories from your site.

Left sidebar in Elementor listing various drag-and-drop elements like Inner Section, Heading, Image, Text Editor, Video, and Button

When you drag an item out to a block you can then edit the content of that element in the sidebar.

A freshly placed Google Maps widget inside an Elementor column with the location options open in the left editing sidebar

There is quite a bit more to Elementor but that covers the basics of the plugin and how you can use it with WordPress to quickly build out dynamic responsive websites that feel less like a blog and more like a full-fledged website. If you start on WordPress and immediately feel out of your element at getting what is in your head on the screen I’d encourage you to give this method a shot.

Was this article helpful?
0 out of 0 found this helpful

Articles in this section

See more
Reclaim Hosting Support Hours
8:00 am - 5:00 pm ET, Monday through Friday
Submit a Ticket
Get a quick and helpful response from the pros.
Need Extra Support?
No problem, we're here to help! Talk to us about Professional Services or custom Service Level Agreements.