The hero section is the first thing visitors see. A well‑crafted hero can capture attention, communicate value, and guide users toward conversion. In this article we break down the components of WPCLONE’s gradient hero and show you how to recreate it in Elementor for maximum impact.
Key Elements of the Gradient Hero
- Gradient Background: A subtle dark‑to‑blue gradient that aligns with the brand palette.
- Badge: Small caps text with an accent background, highlighting a key message.
- Headline: Large Sora heading (64 px) that clearly states the offer.
- Paragraph: Supporting copy in Inter, limited to three lines for readability.
- Three CTAs: Primary button, secondary outline button, and a link‑styled text.
Building the Gradient Background
In Elementor, add a Section and set the Background Type to Gradient. Use the following stops:
- Start: #070D1A (Primary dark)
- Middle: #000314 (Secondary dark)
- End: #0071A3 (Accent blue)
Apply a border-radius of 8 px to match the overall design language.
Creating the Badge
Use the “Heading” widget for the badge text and style it with:
- Background color:
var(--color-accent) - Text color: #FFFFFF
- Padding:
calc(var(--spacing-unit) / 2) var(--spacing-unit) - Border radius: 4 px
Designing the Primary CTA Button
Set the button style to:
- Background:
var(--color-accent) - Text: White, font‑weight 600
- Border: 1 px solid
var(--color-accent) - Hover effect: Slightly darker shade of the accent color.
Secondary Outline CTA
Duplicate the button and switch the background to transparent while keeping the border and text in the accent color. Add a subtle box‑shadow to make it stand out on the gradient.
Why Three CTAs Work
Offering multiple pathways respects different user intents:
- Primary button: Directs to a lead‑capture form (high‑intent).
- Secondary outline: Leads to a product overview page (mid‑intent).
- Link‑style text: Takes users to a case‑study or proof point (low‑intent but builds trust).
Optimization Tips
To keep load times low:
- Compress background images (if any) with WebP.
- Enable lazy loading for the hero image on mobile.
- Use Elementor’s built‑in CSS minification.
Measuring Success
After publishing, track the following metrics in Google Analytics:
- Click‑through rate (CTR) on each CTA.
- Time on page for visitors who land on the hero.
- Conversion rate from the primary button to the lead form.
Run A/B tests by swapping the badge text or adjusting the gradient angle to see which variant improves the CTR.
Conclusion
A gradient hero that respects the brand’s design system and offers three strategic CTAs can dramatically increase engagement. With Elementor’s visual editor and WPCLONE’s precise CSS variables, you can implement this pattern quickly and keep the look perfectly aligned with the original design.