Discover the best hero-video websites created by professional designers. Get inspired and start planning your perfect hero-video web design today!

Noah Raskin

Please read: All I ask is that you Like & Share if you clone it :)

Here is a custom animated slider with really cool animations for 3 slides.
Every part of it is connected to the CMS:

- Video Light Box
- Business Info
- Animated Rotating Text
- Leading Text & Caption
- CTA Button

You can also change the rotating text color for each one in the interactions. Just look for the one that says text-color and you can select any color you want it to transition to. 

I hope you guys have fun with it! 
Enjoy!

Custom Animated Hero Slider - CMS

Mor Tene & Ilya Lisi

Welcome to our Video UI Cards Page!

We made different UI layouts for video display. You can find in this project hero sections, grids for video blogs, play buttons animation, and pop ups for your youtube channel. 


Follow us on instagram
https://www.instagram.com/tene.lisi/

Video UI Cards

THS - The Hero Section

Start your website design with our cloneable hero section design perfect for an Architecture Firm or a Construction Company🏛️

Components & Features:

⦿ Modern page load and slider change animations
⦿ Custom line style slider navigation
⦿ 2 lightboxes in each slide - one for video and one for gallery images
⦿ Search functionality with search box that comes from top
⦿ Space saving hamburger menu

---------------

Like this cloneable? 👍

We're coming with a huge library of more such high-quality and free cloneable hero section designs for every kind of website built in Webflow.

For more FREE CLONEABLES
→ https://theherosection.webflow.io/

---------------

Support:

If you have any difficulty in understanding the design or any part of it, please feel free to comment below.

---------------

License:

⦿ Images used in the design are from Pexels and are licensed under CC0 license.

⦿ Iconography from Fontawesome and OrionIconLibrary

Architecture Cloneable Hero Section

Ivan Nikolic

I have created this project to test my Webflow skills and it turned out really cool. Also, I used a PS to retouch, add text and optimize photos.
It's responsive and without any code, pure Webflow.
As inspiration, I used the work of this amazing designer https://www.saarteaga.com/web
Original photos can be found here https://unsplash.com/photos/dopchJw6LYw
https://unsplash.com/photos/VhKot3A5ZE4 https://en.wikipedia.org/wiki/El_Capitolio

Hope you like it.

Travel Hero Slider

Start your website with our cloneable hero section design perfect for Conference or Event landing page/website 🎫

Components & Features:

⦿ Illustrative cards layout for the event schedule right on the hero section
⦿ "Get Notified" form
⦿ Video Lightbox

--------------

Like this cloneable?  👍 

We're coming soon with a huge library of more such high-quality and free cloneable hero section designs for every kind of website built in Webflow.

For more FREE CLONEABLES
→ https://theherosection.webflow.io/

--------------

Support:

If you have any difficulty in understanding the design or any part of it, please feel free to comment below. Alternatively, you can send us an email here: support[at]theherosection.com

Note:  We're working on making the designs responsive. Visit our website and stay updated on new upcoming designs and changes.

--------------

License:

⦿ Iconography from FontAwesome

⦿ Illustrations from - Freepik.com

⦿ Background gradient from - ls.graphics

Conference/Event Cloneable Hero Section

Josh Jacobs

Hello everyone! Today's fun experiment; using and implementing images straight from Youtube in tandem with Webflow CMS to better contextualize posts!

How'd I do it, you ask? Simple! Custom code, mixed with Webflow CSS, in which is injected a background-image referencing the link for the HD youtube image from the post-specific youtube video.

Very much a WIP. One thing I want to improve is the video experience on the posts page. I had to put the video in a lightbox because, on larger viewports where the video took over the whole hero, you couldn't scroll past the video because it's an iframe. I'm currently searching for a better solution for this issue, so if you have one I'd love to hear about it in the comments!

Let me know what you think! All video links and images used in the project are credited to https://www.theverge.com

Supplement CMS Imagery From Youtube!

Step Labs

Clone this project or get in touch via our email!

Cool Hovering Image/Video Stack Component

Memberstack

Perfect lead generation hero section if you have a video to show!

Check out the original template here 👉 https://www.memberstack.com/freebies/16-online-course-template

Hero Section w/ Video & Email Form

RiseVerse • Webflow Agency

RiseVerse • Webflow Expert

EN : Example of Hero Header interaction (video hover text effect).

This project was made by Maxime Mroue (RiseVerse.com) for educational purposes and is not affiliated with David Laroche in any way. All rights of images, logos, and texts belong to David Laroche.fr.

PS: Follow us to stay up to date on new clonables (many memorable clonables are coming soon)

Relume Library : https://library.relume.io/
Brand : DavidLaroche.fr

Cloneable Hero Header interaction (video hover text effect)

RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

ZC8pa382rux3/Ya5JYmbaiFDJJqVQfa/ZkKRoDwNIOg=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

+j+2BnaQSkzkNe0dpNHl103pbsRtVlBy3Ivqpwb7bho=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

0ACb5hSoxo1svvHlhJqD4sUSDGJ97B1kBGWGGxycXu4=

6s1k2w6SLnWj64d28WQrv9HQMxjAQ6/qFXIbthFaqKc=

9DmxyyZ8FEsc5DSKm/8DpcDu2e/GCLlCF0UJQCEBuSw=

BEaEBzmJ+dCz7bi9Xenx+kQRiui5/usgymUiFzHdUSk=

EA6pIl34ynZu2fCXtDsf5N+8HjgmFW1iWFEJidJmjwE=

JCIMc2jHTforX4kLxzXeocMmrYb+LnAgwZU0w3bCzQY=

JseFDRfctUKg1rAF0E6mL1YOHzQe1gVou75Mw8zcVOY=

LtNTzuGC6a/O4opneIzFRwuxaT7A0jTPzl4xxFVOaJU=

OKA/wpW5U0/bGFF7Bsd9Jpz9vIcGmsLeCg4ac42B+uM=

P7vOA+qkoiRS/9UWXIUHxm+CI0lSj7WY2ZBiK9KyND4=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

Qdld2j63j/MIDqhyo7Y3RiOeFhBqJglREH2O+FwXR9I=

Rf1eI8pDEJSkptFB/XWlj0IN7pQXjrNngR5tBDx8ihI=

Sf9qPmyeAJlqj4x6Kz5SNESMv5Qs7ARqsnNruitgYpA=

USOHvTUI3mh2ib/mMwbKTyTADvigSfSmb3MXH/HsN6A=

XGglpWsF+VpgOjXfIqzwrxv0n1E+aPydxJbt23zu0UA=

Zf6XyBzSm/LtmgDvoXinw+Hi6BMMwoaUJHcowJ8ikX0=

eDXaquyPVYoFNZ+HLRFOqPbAk7N1nlRiJhbhe4g83Es=

gok0DFmTbYmfgm71+6/UBa9YMdK9fta9tVCYCvw0mUk=

l+2HpTI8qsEqSoxz6Y8y+po4C4+PakSbBdZ2Wp0L/Zk=

n9lKHF86NGBCOKJ/o3Xl/F++i0ke7eTshw4YJ60x+20=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

qriyvYyof2e0nw26zR6JThjy67bKClLhvHTizM7yDcg=

tOlureLazS6/pYwbqdKmud6Bvaf9nA4m71Uoyrhnjxo=

wV9d2LzLij/UwbGC8MXX+RHNBZ5d/rww134rq+krlJQ=

whJ3jNLC0SO8XSaY/XPhiyr+uvZwcHDCMcIF6SZYwb8=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

Best Hero Video Websites | Free Examples & Designs

Discover hero video websites built by the Webflow community

Discover hero video websites built by the Webflow community