Ever stumbled across a website that uses color or design to create a bold hero area? Maybe the colors are super vibrant, there's a cool layout at play, or everything just seems to pop. I recently visited Stripe.com and couldn’t help but be inspired by their bold hero area. The color, the diagonal breaks, and those bold text elements all caught my attention.
In this guide, I’ll show you how to recreate a similar hero design for your own site. Add a touch of Stripe’s creativity by following these simple steps.
Affiliate Disclosure: This post may contain affiliate links, which means I receive a small commission at no cost to you when you make a purchase. Please note that I only get affiliate links for products that I use.
Setting Up a Gradient Background
The first thing that strikes you about Stripe’s hero area is the creative use of color. To get started, we’ll mimic that using a gradient background. Why a gradient? Gradients give a smooth blend of multiple colors, creating a dynamic look with minimal effort.
On a new page, add a row layout block. In this case, it’s best to go full-width to maximize space (like Stripe’s wide, immersive hero).
The background of Stripe's hero is a gradient with a transform effect; we're going to add just a gradient instead:
- Go to Style settings and locate the Background Type option.
- Choose Gradient.
- Pick two strong, contrasting colors. Stripe uses a bright blue and a hot pink to create a vibrant and modern feel.
Don’t be scared to play with the colors until you find what speaks to you. You want bold, but also cohesive so it captures attention without being overwhelming.
Adding a Diagonal Line for Visual Interest
One of the best parts of Stripe’s hero is the diagonal line that breaks up the design. This design looks intentional and it also adds some white space for relief from the vibrant colors.
You can add this diagonal line with a divider. Here’s how to do it:
- In the row layout edit area, find the Bottom Divider section. It's at the very bottom of the screen.
- From there, you can choose the style of the divider.
- Adjust the divider height to make that diagonal break look the way you want it to.
It’s a small detail, but it gives the design personality and a modern touch, keeping things from looking too flat or static.
Dropping in an Image Element
Next up, let’s add an image. On Stripe, there's an image of a cellphone and a chart. I used an image that I like that was in my media library
To do this:
- In the right-hand section of your row layout, select the Advanced Image block.
- Choose an image that complements the gradient colors. My image of a field and mountain works perfectly.
Formatting Text for Impact
Stripe’s header has bold typography. The text is big, simple, and impactful, helping to immediately grab your attention. Let’s try to recreate that effect.
- Add an H2 text block (just like they have on their header).
- Adjust the font size and make it BIG. Try setting it around 90px. This might sound extreme, but don’t worry — it works for big hero sections.
- Fine-tune the line height to tighten or loosen the spacing. Aim for something like 1.2 to keep it balanced.
- Feel free to adjust the padding around the text area to make sure everything feels spaced out and not squished.
The goal is to get a large, impactful message on screen — one that your users won’t miss.
Small Touches That Bring Everything Together
Now that you have your gradient, diagonal line, and text set up, you can experiment with some final tweaks to make the entire design feel cohesive. Try adjusting the colors or padding until everything fits just right.
Want to take a peek at how it's all coming together? Use the preview option in your site builder to see what it looks like with real-world spacing and positioning. This gives you a better understanding of how everything will look once it’s live and if any colors need some adjusting.
Bold but not overbearing
Stripe’s hero is a great source of inspiration. It’s clean, using a mix of gradients, diagonal lines, and large typography to create a visually striking design. With just a few simple tweaks, you can bring this same type of energy to your website header.
Don’t be afraid to play around with different colors, images, and spacing. The perfect layout is all about experimenting and finding what feels right for your brand.
You can use the same effect for a quiet soothing hero – just use calm pastel colors and tone down the text. Experiment with the different dividers and colors and add your brand.
Happy designing!
Hey there!
I'm Diane Houghton and I've been working with WordPress for 20 years. I can code a website using HTML, CSS and PHP, but I'd rather drag and drop designs from my own custom Kadence Library.
I have built websites for dozens of small businesses, and now my focus is teaching WordPress to beginner bloggers.
