How can I recreate a hero section like Showing in Screen Shoot

This topic is: Not Resolved

[Not Resolved]

This topic has 1 reply, 2 voices, and was last updated 7 months, 1 week ago by Anonymous 314091.

October 21, 2025 at 7:57 am

Hi everyone,

I’m currently designing the hero section of my website (*Login to see link
) using the Kadence Theme, and I’m trying to recreate a design like the one shown in the screenshot I attached (from another site I found as inspiration).

The design I want to achieve includes:

A dark gradient background

A phone mockup on the right

Animated floating badges such as “Lightning Fast” and “Secure Install” that gently move up and down

Headline, description, and a download button on the left, similar to what I’m setting up on my homepage

I tried replicating this using Kadence Blocks, but I’m struggling with:

Proper positioning of the phone mockup and floating labels

Creating the smooth up-and-down animation effect

Getting the section to look responsive like my site’s layout at *Login to see link

My goal isn’t to copy the exact site, but to understand the right way to build this type of animated hero section within Kadence.

Could someone please guide me on:

Which Kadence blocks or layout structure to use

Whether Kadence has built-in animation controls for floating effects

Or if I should be adding custom CSS/JS for this

Any step-by-step guidance or an example block setup would be really helpful. Thank you!Hi everyone,

I’m trying to build a hero section similar

The forum ‘Kadence Blocks’ is closed to new topics and replies.