$128,000,000+ earned
Used by 50,000+ Teams & Agencies
Gratuit jusqu'au lancement. Aucune carte de crédit n'est nécessaire.
Blog de Memberstack

Cinq meilleures bannières clonables de Webflow

Les bannières sont un moyen efficace de communiquer à vos visiteurs des appels à l'action, des offres ponctuelles, des accords d'utilisation et des informations générales. Avec les bons principes de conception, elles peuvent favoriser la conversion sans empiéter sur d'autres informations importantes de votre site. 

Essayez Memberstack gratuitement !
November 30, 2022
TABLE DES MATIÈRES
Robert Jett

Free Webflow Banner Cloneables

Effectively developing your Webflow site requires the combination of a variety of formats and tools to effectively communicate whatever it is you want your visitors to understand. The banner element is a great item to have in your tools box because it can combine non-intrusiveness with clear messaging. Whether you want to highlight a seasonal deal, build in data protection compliance, or just give an alert to new visitors, banners are a great potential answer. 

‍

The formatting and structure of banners can vary quite a lot depending on what you are trying to do. Some will include close buttons. Others will send visitors to other pages. Repeated loading on banners can also be prevented by embedding cookie tracking in the banner element. Load animations and countdowns can also communicate novelty or urgency to visitors.  The cloneables below highlight some of these use cases. 

Interactive Announcement Banner by Webflow University

https://showcased.webflow.io/projects/announcement-banner-lesson

Webflow University is always a great resource for getting high-level overviews of how Webflow itself imagines these elements being incorporated into its sites. This interactive announcement banner template is combined with a fairly standard tutorial page to provide an extremely general call-to-action banner example for your site. Using an animation on load, the banner drops from the navbar to alert visitors to whatever information you want to include. 

The template itself is fairly barebones. It does not include any way to close out of the alert, although adding one would require a very small amount of customization from within the Webflow platform. In its current form, it also has an animation that inverts its colors on hover, although there is no reverse of this animation included (the colors stay inverted). Again, this could be changed by modifying the template only slightly. 

What is in this website template? 

What is this website template best for? 

  • Developers who are looking for a refresher on how banners can be added to their site, but who plan to customize the features to fit their site’s functions and aesthetics.
  • Sites that need especially non-intrusive, low-involvement banner elements (maybe for A/B testing or site framing). 
Pros Cons
✅Webflow University tutorial is included ❌Very limited feature set
✅Built entirely within the Webflow platform ❌Does not include close button
❌Does not invert colors back to original on hover out

The Bottom Line

This is the best option for beginners who are trying to familiarize themselves with how Webflow imagines banners to work on their sites. If you are comfortable customizing the element as well, it is a great canvas for further exploration. 

GDPR Compliant Cookie Consent Banner by Bas van Straten

https://webflow.com/made-in-webflow/website/free-clone-gdpr-cookie-consent-banner

Since the implementation of GDPR in Europe back in 2018, it has become a fairly standard practice across the internet to include some kind of data protection protocol on websites. This cookie content banner from Bas van Straten is essentially the top-of-the-line example of how you can implement this on your own site. Not only does it offer a sleek and functional popup data consent element, but it also includes a cookie preferences menu to further specify what the appropriate uses of those cookies are. This ability to opt in or opt out of specific uses places this firmly within the requirements of GDPR. 

What is perhaps most impressive about this template, though, is the fact that visitors will only ever need to fill this in one time if they haven’t deleted their cookies from the site (provided they consent to have them collected). This is achieved with some JS inside the <head> tag. It is important to note, however, that implementing this feature on your site requires that you use the relevant attributes with something like Google Tag Manager (and implement that in the included <head> code). Its developers offer a complete suite of GDPR-related assistance for around $75. You can find more information here: https://cookies-for.webflow.io/. 

What is in this website template? 

  • A template site that includes all of the relevant elements and information
  • A cookie consent banner “moda”l with the banner attribute (that’ll need to be linked with Google Tags Manager (or something like that)
  • The cookies preferences/settings modal with a button (bottom left) for visitors to access it 

What is this website template best for? 

  • Websites that are likely to get any European visitors or that are trying to get ahead of any future data privacy regulations.
Pros Cons
✅Can prevent the substantial potential costs of GDPR non-compliance ❌Requires knowledge of tag management (or a budget of $75 towards compliance)
✅Extremely sleek and professional design


The Bottom Line

This is the best possible framework for implementing data privacy on your website. If you are planning on collecting cookies about your users for marketing purposes, the costs of figuring out how to link your site (or of paying the developers to do it for you) are almost certainly worth it. 

Dynamic Sale Countdown Banner by Veza Digital

https://showcased.webflow.io/projects/Dynamic-Sale-Countdown-Banner-Cloneable 

Sometimes you want to really push your site visitors towards a sale or deal. This sale countdown banner from Veza Digital is a high-engagement way to encourage visitors to make purchases within a restricted time frame. It’s perfect for time-sensitive sales periods or sites that want to give the impression of time sensitivity. 

The countdown runs from a script before the </body> tag. There are selectors for days, hours, minutes, and seconds in the template. These are dynamically modified using document.getElementByID(“XXX”) functions on each selector. In that script, you can set the countdown date for whatever you want the time to be. Again, if you are trying to be a bit sneaky (and you know your JS) you could set that countdown date to any arbitrary time in the future, meaning that the countdown will always be there. Just be conscious that visitors might see through that quickly.  

‍

What is in this website template? 

  • The countdown banner at the top of the template website 
  • Selectors (in text blocks) for days, hours, minutes, and seconds 
  • Customizable code to implement these changes on your site 

What is this website template best for? 

  • Websites that employ time-sensitive sales frequently or that are operating on some other restrictive deadline 
Pros Cons
✅Well-designed dynamic countdown element ❌Requires a little understanding of JS
✅The developer offers support (contact information linked on the template) ❌There is no way for visitors to exit out of the countdown banner

The Bottom Line

If you want a countdown banner on your site, this is basically as good as it gets. The code is not overly complex and it is very visually compelling. The product that is offered is exactly what you receive. 

The Greatest Infinite Marquee by Web Bae

https://showcased.webflow.io/projects/wb-infinite-marquee 

The scrolling marquee is another way to imagine how banners can be used to enhance the information on your site. This infinitely scrolling marquee from Web Bae is a compelling and well-designed way to implement this. The template includes banners of two sizes into which many different kinds of information can be inserted. Interestingly, the version of the site that you see in the live preview is exactly what you see in the editor (meaning that the text is also scrolling there). This can make customizing it easier or harder – head there and you’ll see what I mean. 

Perhaps the most impressive thing about this template is that the marquee is completely adaptive, meaning that it will scale to whatever size screen your site is being visited from. In addition to the customizability of the text, the color of the marquee can also be modified. It uses an HTML embed to create the scrolling effect. Web Bae has also provided a YouTube tutorial going over exactly how he created this template (which itself links to a website where you can find a JS version of the code if that's more your thing). 

What is in this website template? 

  • Two different infinite scrolling templates – one for images and one for text.
  • The HTML embed that creates the scrolling effect.
  • A YouTube tutorial going over how the site was created. 

What is this website template best for? 

Pros Cons
✅Adaptive sizing for all screen types ❌Customizing constantly scrolling text and images can get confusing
✅Built using just HTML and CSS ❌Placement of the banner will have to be tailored to your site

The Bottom Line

The infinitely scrolling marquee banner is a very specific design choice that will certainly enhance specific kinds of websites. If this is what you are looking for, Web Bae has done an incredible job building an advanced but easily customizable template. 

Site-wide Interactive Banner by Marcus @ Flygh Media

https://showcased.webflow.io/projects/Flygh-Media-Solution-2-or-Close-a-element-and-hide-it-across-the-whole-site 

Outside of GDPR compliance, cookies can be a useful way to engage analytically with your audience. This interactive banner from Flygh Media uses cookies to display a banner that, once closed one time, is hidden permanently unless cookies for the site are deleted. This is a great way of ensuring that one-time announcements that need to be communicated to site visitors aren’t cluttering up their user experience after they are read. 

The template site itself offers step-by-step instructions on how to implement this. It includes some code before the <head> and </body> tags that points to the “solution-banner” element on your site. If you plan to have a multi-page site, you’ll need to add this code to the project settings (and not the page settings) so that the settings apply site-wide. Because this template is formatted more as a guide and not really a template, you’ll need to extract just the banner element for inclusion into your site. 

What is in this website template?

  • An internal sample site (in Swedish) with the banner at the top.
  • Instructions on how to implement this code site-wide.

What is this website template best for? 

  • Websites that want to communicate quick updates to customers.
Pros Cons
✅ Prevents unnecessary cluttering of a webpage with the banner. ❌ Template is formatted as a guide, so formatting/design will need to be done separately
✅ Includes instructions on how to set this up on your site.


The Bottom Line

Flygh Media did an incredible job building and presenting this banner template. The design is very sleek and it solves what could be a major annoyance for potential visitors to your site. The code from this template could also be applied to many other kinds of banners and elements. 

Have a Feature Section cloneable that could be showcased on this list?

Haven't found what you are looking for? Be sure to check Webflow Feature Section cloneables showcase or drop us a message if you think we missed something here!

Other Webflow Cloneables

Be sure to check out our other best cloneable lists if you found this article about cloneable Webflow Feature Section helpful. Here’s a list of other free Webflow cloneable collections that we handpicked for you!

Ajoutez des adhésions à votre projet Webflow en quelques minutes.

En savoir plus

Plus de 200 composants Webflow clonables gratuits. Aucune inscription n'est nécessaire.

Voir la bibliothèque

Ajoutez des adhésions à votre projet React en quelques minutes.

Commencer

Composants Webflow associés

Clonez plus de 250 composants Webflow gratuits - sans enregistrement !
Aucun élément n'a été trouvé.
Qu'est-ce que Memberstack ?

Auth & paiements pour les sites Webflow

Ajoutez des logins, des abonnements, du contenu à accès limité, et plus encore à votre site Webflow - facile et entièrement personnalisable.

En savoir plus
Commencer à construire

Essayez Memberstack et découvrez ce que vous pouvez construire !

Memberstack est 100% gratuit jusqu'à ce que vous soyez prêt à vous lancer - alors, qu'attendez-vous ? Créez votre première application et commencez à construire dès aujourd'hui.

Start free trial