WPBakery Page Builder vs. Elementor – Creating Hero Sections (Step by Step)

Drag-and-drop page builders are powerful tools.

They gave regular WordPress users the opportunity to create pages and layouts similar to what only experienced web designers could do a decade ago.

The process of web design keeps getting more user-friendly every year, and WordPress is still the best platform for non-tech-savvy users.

What you’ll find in this article:

• Why having a page builder plugin is necessary
• The difference between the two plugins’ interfaces
• The actual process of designing a section with a page builder
• The available elements for both plugins
• Whether you still need either of them today

The web changes quickly, and webmasters want a flexible environment so they can change their websites at a similar pace.

Having a website is no longer a “set it and forget it” thing, another contact channel just to fill in the info on your business card.

Today most themes on the market come with some kind of visual page builder. This gives owners the opportunity to easily manage the look of their websites and update things quickly when needed, without hiring a professional.

Why do you Need a Page Builder?

Let’s take the example I used when I first wrote this – the Genesis Framework themes.

Genesis was valued for its clean code, speed, security and SEO friendliness.

The themes were stylish, clean, and completely inflexible.

Look at any Genesis child theme and you’ll see the same issue with all of them – they are predefined!

You can fall in love with a theme demo, decide that this is your theme, and buy it. What you’ll probably find out later – besides the complicated setup needed to make it look like the demo – is that you have almost no control over your layouts. You get a few widget areas and that’s it.

Even simple tasks like adding a search box to your header or changing your site’s colours were made complicated and frustrating, even for experienced users.

If you wanted to feature a new section on your homepage, list new services, or anything else, you were stuck.

Genesis itself has faded from the conversation since then, but the point generalises to any predefined “section-ready” theme, and there are plenty of those still being sold today.

WPBakery Page Builder

One-time purchase on CodeCanyon.
Bundled free with many ThemeForest themes.

More info

Elementor Pro

Annual subscription, priced per number of sites.
Free version available on WordPress.org.

More info

I’ve deliberately left the prices off these boxes. Both have changed more than once since this post went up, and a stale price is worse than no price – click through and check what they cost today. The pricing models are the part worth knowing: WPBakery is a one-time CodeCanyon purchase, Elementor Pro is a yearly subscription.

Elementor has a FREE version. You can create the hero section and plenty of other basic designs with it, but you won’t have access to the premium widgets, the theme builder or the popup builder.

Now let’s get into it. I’ll build the most-used section that almost every website and landing page has – the hero section – with both Elementor and WPBakery Page Builder.

Hero Section with WPBakery Page Builder

This is what your visitors see first, so you’d better grab their attention with a clear message and design.

How to create a hero section with WPBakery Page Builder?

• Make sure you have disabled any sidebars, and preferably choose a full-width layout if your page or theme settings offer one.
• Switch to “Backend editor” (this enables the page builder instead of the classic text editor), then click the “Add Element” button and choose “Row”.

Note: you can also use the frontend editor of WPBakery Page Builder, but I find it easier to work in the backend.

Add an empty row first.

1. The row columns’ layout
2. Row settings – from here you set the background, width, margins, padding and more
3. This is the style of the column
4. From here you add your elements (content)

The hero section needs a background image. Head to the row settings (2). On the ‘General’ tab set the row stretch to ‘Stretch row’ – this makes your row full width.

Then go to the ‘Design options’ tab.

Here you choose your hero image and set the row padding, which you need in order to get enough space around your elements.

In the drop-down menu below the thumbnail, set the option to ‘Cover’.

Note: you can play with the padding to get the height you want. I chose percentages, but you can use px, em, or rem values.

Click Save changes.

Note: later, when I added the headings, I changed the top padding to 10%.

What you should get is a full-width section ready for some extra elements.

Adding text and a Call-to-Action button

WPBakery Page Builder comes with its own Custom Heading element.

For this example we’ll use two custom heading elements – the second plays the role of a subheading.

Choose your font, size and colour, and align them in the element’s settings screen.

Clone the element for the subheading and just change the text and the size to a smaller one.

Click the small plus sign below your element to add a CTA.

Select the ‘Button’ element and pick your settings (size, colour, URL etc.). Remember to give your CTA space to breathe – go to the ‘Design options’ tab of your button and add 15px top padding!

…and voila!

Our hero section is ready to get some clicks.

Hero Section with Elementor Pro

Let’s try the same example, this time using Elementor Pro.

The main difference is that Elementor is a frontend page builder only – the moment you click the ‘Edit with Elementor’ button you’re taken out of your backend.

Both page builders have very different interfaces and approaches to design.

First things first, you want to get rid of any sidebar you might have and hide the page title. The Elementor Full Width or Canvas page template does both.

Then click the plus icon to add a new section. Before we add the image and the heading, there’s some work to be done in the row settings.

When you hover over the section, three small icons appear at the top left corner. Click the middle one (the six dots) and the settings panel appears on the left side.

To get a nice full-width section, turn on the Stretch section option and choose Full Width from the Content width drop-down.

In the Style tab you can set your font colour, alignment and more.

Hover again and another small icon appears at the top left corner – that’s where we’ll place our image and set the padding.

Note that your background won’t appear until you add an element.

Click the plus icon and drag the Heading widget into your section. Then drag another heading for the subheading, and finally a button below the two.

Click Update and your hero section is ready.

Here is the final result.

Do you still need a page builder at all?

This section didn’t exist when I wrote the post, because in 2018 the answer was obviously yes. It isn’t obvious anymore.

The block editor can build the hero section above on its own. A Cover block gives you a full-width background image with an overlay, headings and a button dropped straight inside it – no plugin, no extra CSS or JavaScript on the page, and none of the markup lock-in.

That lock-in is the part people underestimate. Content built with a page builder is wrapped in that builder’s own markup. Switch themes and your content usually survives; switch builders, or drop the builder, and you’re rebuilding every page by hand. I’ve watched people stay on a plugin they’d outgrown purely because leaving meant rebuilding 40 pages.

So, roughly:

• A blog with a handful of static pages – the block editor is genuinely enough now, and it’s the fastest-loading option by default.
• A marketing site, landing pages, or a client site where someone non-technical edits the layout – a builder still earns its place. Elementor’s widget library and theme builder do things blocks still make you fight for.
• You bought a ThemeForest theme that’s built on WPBakery – then you’re using WPBakery, and that’s fine. Just know that’s the reason, rather than assuming you chose it.

Elementor or WPBakery Page Builder?

If you want a frontend drag-and-drop page builder, Elementor is the better choice. It has a free version that’s more than enough for many users, it’s more intuitive, and it’s easier to get used to. It’s also the one that won the market – which matters practically, because it means more tutorials, more add-ons and more people who can help when you’re stuck.

WPBakery is still capable, and combined with some of the premium add-ons on the market it becomes a powerful tool to create almost anything. But these days most people using it are using it because it came bundled with their theme, not because they picked it. If you’re choosing freely and starting fresh, Elementor – or increasingly, just the block editor – is where I’d point you.

Whichever you choose, one piece of advice applies to both: keep the number of page-builder pages small. Build your homepage and landing pages with it, and write your posts in the plain editor. Your load times will thank you, and so will the version of you that eventually wants to change something.