WebMatros

Spread Your Wings Online

  • Reviews
  • Resources
  • About

Thrive Architect vs Elementor: Full-Width Backgrounds & Color Overlays

Not all WordPress themes include a full width “blank canvas” page template. That's a problem when using a WordPress page builder. When designing your pages, you want section backgrounds to span the full width of the browser viewport.

But what if your theme doesn't include an adequate page template for that purpose?

And what if you're overall happy with your theme and not in the mood for a time-consuming switch to a more “page builder friendly” WordPress theme?

Are you out of luck?

Nope. Fortunately, both Elementor and Thrive Architect have good solutions, literally “at the flick of a switch”.

However! When it comes to the ways you can use and style those full width backgrounds – a proper Elementor vs Thrive Architect vs Beaver Builder battle begins to rumble.

Hint: one can do more than the other two. And one can do significantly less.

I get into all that, and even a very 80s Taekwondo rock concert (yes, you read that right – and it gets even more bizarre than that) in the video below. Enjoy!

Those color gradients in Thrive Architect are really nice, right? More flexible than Elementor's implementation, with its layers and separate control of opacity/transparency for each color.

Such fine-grained control is great to have!

Why color gradient overlays are cool

Whether gradient or solid, color overlays will help text and icons stand out and be legible on pretty much any image background. They do this by lowering the overall contrast of the image.

Stylistically, color overlays look great as well. Modern and bold. Your brand colors become a downright statement – conveying a the overall vibe of your brand, immersing your website visitor in it – by almost drenching them in color.

Solid color overlays are cool – but color gradient overlays add an extra dimension – a depth that has to be seen (and felt viscerally) to be fully appreciated.

#webdesign tip: white works well on top of any color. Timelessly crisp! White text (and icons or illustrations) over a colorful background is as modern today as it was in 2005. Really! I remember being a fan of it back then:) #ux #website #design

— WebMatros (@webmatros) January 30, 2018

Another reason color overlays are great, is that you can use the same background image multiple times on a page, but visually make it interesting by alternating the color overlays. Why do that? To load only a single image vs multiple images, drastically speeding up your page. Cool tip? Indeed:)

Below, I've created a few examples of the color overlays you can achieve in Elementor vs Thrive Architect vs Beaver Builder. As you'll see, there's a vast difference in their capabilities, when it comes to color overlays.

Without color gradient (photo by Kimson Doan on Unsplash)
Original image – without color gradient (photo by Kimson Doan on Unsplash)
Thrive Architect color gradient
Here, in Thrive Architect, I've chosen an almost 100% opaque pink color at the bottom, and a more translucent (13%) yellow color at the top, letting more of the image show.
Elementor color gradient
In Elementor, a compromise between the top and bottom transparency had to be made, since there's only one opacity slider for both colors.
Beaver Builder color gradient 1
Beaver Builder doesn't have a color gradient overlay feature – only solid color overlays can be created. Here I've used the pink color.
Beaver Builder color gradient 2
… And here I've used the yellow color.

As you can see above, Thrive Architect wins our little color gradient overlay contest with its flexible options for color transparency/opacity. It's trailed by Elementor which does well, although lacking the extensive flexibility of Thrive Architect. That said, Elementor strikes a good balance between power and ease-of-use!

Last is Beaver Builder – not offering any color gradient overlays  – only solid color overlays. As you can see in the examples, solid color overlays are fine, but far from as useful and foxy as color gradient overlays.

Does that make Beaver a loo-hoo-ew-ser / lewser? Nah, not really. Where Beaver Builder wins, is in overall ease-of-use. On that scale, Thrive Architect comes last. Elementor in the middle.

Perhaps Elementor is the best compromise then? That's really up to you to decide. If you want a WordPress page builder giving you maximum design freedom and flexibility: Thrive Architect is a powerful choice. But so is a Smith & Wesson Magnum (trust Dirty Harry on that one). Yet that's not always what you want to carry around in a small Gucci-bag – right?

Do you need Thrive Architect's flexibility? It often comes at the cost of complexity. Still, you may want that – I personally do, but I'm a professional web designer, and enjoy Thrive Architect for its integration with their other marketing plugins, too.

If, on the other hand, you want the easiest page builder for your WordPress site: Beaver Builder has your back.

Which page builder do you prefer? Let me know in the comments below! I'm as curious (and cute – I'm told) as Curious George:)

Related

Reviewed by Johnny Livingston★Updated in

Questions or comments? Feel free: you're welcome! Cancel reply

Divi 4 by Elegant Themes

ActiveCampaign banner – Start Growing Your Business Today

  • Terms & Conditions
  • Affiliate Disclosure
  • Contact

WebMatros © 2009–2023 – WordPress & Genesis on Media Temple