Full Landing Page + All Details - http://janlosert.com/store/webflow-cards.html My first fully web based UI Template, 100% developed in Webflow Designer. All elements ready to copy & paste or fully clone in to your projects! I prepared all styles for all the main typography elements (H1-H6, links, paragraphs etc.), button, tags, alerts or social icons. And then using these “atoms” create as many cards as possible for you to have a nice starting field for new designs. I ended up with 28 cards in total My main aim was to create something visually beautiful for new users or developers who are, to put it nicely non-designers.. All of them are obviously responsive in all Webflow stages. There are 2 hero sections, nice product cards, article thumbnails for the blog or even sign up dialog with all form elements covered.
ui kit, ui design, responsive, webdesign, web, blog, sign up, landing page, hero, clonable, resources
A site created for a competition at my workplace. It's still somewhat of a work in progress, I want to continue to make updates on it.
animation, history, cartoons, disney, simpsons, bugs bunny, website, responsive, scrolling website, graphic design, designer, interactive, interaction design, fund
The issue with common templates is that they offer a predefined UX and UI, while designers usually only need white-labeled building blocks when they start a project. I couldn't find anything like this in the templates marketplace, so decided to build my own responsive wireframe kit. The aim of this kit is to allow Webflow designers create wireframe prototypes directly in Webflow, ideally skipping Sketch and Invision. The great thing about using Webflow is that the wireframes can be turned into the final product. How cool is that? Efficiency over 8000! I worked on this beauty for over 120 hours, so if you use it, please consider a donation ^^ https://www.paypal.me/dariostefanutto Thanks for your support! -Dario
wireframes, ui kit, components, blueprints, wire, uxui, userexperience
Hey guys, Here's the first pack of UI elements that I thought I'd share with the community. If this sort of thing interests you sign up to the mail list down the bottom, I have some pretty cool projects in the works ;) Included in this kit is some hover CSS effects that will require custom code. It's pretty straightforward and there are plenty of guides on it! If you want to get involved with Webflow please use our referral link! https://webflow.com/?rfsn=1238427.48b8d You can follow my work here: www.tombekkers.com www.dribbble.com/bekkers And you can follow the agency here: www.oakland.agency www.dribbble.com/oakland
ui kit, uidesign, ui design, web, webdesign, landing, dribbble
Cards 2.0 are Symbol based Framework/UI Kit for quick design or wireframe of your next landing page project. 100+ symbols/elements ready for design or hi-fidelity wireframe for any UI/UX designers or developers out there. The main goal of this project is to help you - Webflow users - with creating beautiful landing pages or wireframes within minutes directly in Webflow with ready to be published code. All again with a coded styleguide for all the main typography elements (H1-H6, links, paragraphs etc.) buttons, tags you name it. What you get/Package overview: 50 New Cards as Webflow Symbols (in 2 versions Dark and Light = 100+ Symbols) 3 Complete landing pages in 2 versions Symbols for Hero sections, Features, Testimonials, Pricing, Team, Blog and more. Ready for all 4 responsive breakpoint Cards from v1.0 recreated into a new structure All cards in Sketch file Happy Cloning! 🎉
ui kit, landing, landing page, wireframes, wireframing, uxui, uxdesign, design
More an experiment than an example to follow... a vertical parallax using only webflow and custom CSS code. It's a bit hard to fine tune and maintaink lot's of tweaking, but it mainly works.
css, parallax, vertical nav, space, sandbox, experiment, don't read my tags
This is demo of some "sticky on scroll" elements I created completely within Webflow. I tried my best to explain how I did it, but I'm happy to answer any questions you have about the setup. NOTE: This setup may not work in older browsers.
sticky, scroll, interactions, fixed, webflow, tutorial, ix2
A collection of useful animations made on wedflow. telegram: https://t.me/webflow_io youtube: https://www.youtube.com/channel/UCYqajjjpMZJ5h4P3M-PVvUA
interaction, interactions2, animation, animations, 3d animation, tutorial, tutorials, cms, webflow, webflowcms, expert, webflowexpert
A CSS solar system. Apart from one small SVG and an animated GIF for title texture, it's all CSS within Webflow designer. Custom code only for title effect. Custom font from FontSquirrel. This is not the responsiveness we're looking for.
star wars, solar, solar system, cloneable, template
Hey, Just finished another template, it uses a nice bold design, is very simple and easy to edit and focuses on content. This was an interesting site for me because I set myself the challenge of designing it in only an hour which means that I really had to cut the features to just what was needed. PLEASE LIKE, COMMENT AND CLONE! I want to see what you guys come up with! Arthur
freebie, template, clone, throughflow, slick, agency, portfolio, arthur, throughflow labs, brain
This is a quick example showing it is possible to add/integrate React Components into your existing Webflow sites. How I did this: - I first created a static component with all the elements and styles - Published the site and copied the component's HTML from the live site - Converted the HTML into JSX with http://magic.reactjs.net/htmltojsx.htm - Coded a quick todo app functionality and retrofitted the generated JSX - Placed a div on the page where the React Component needs to render (It's a good idea to keep the static components alive on a separate page somewhere for when you want to update the styles etc) That's it; you now have a React Component using Webflow generated styles!
Hey all, I was playing around with overflows to create a one page multi windowed site for personal or creative use. Feel free to clone and edit. Check out this link for help: http://forum.webflow.com/t/help-with-focus-template/8554 Arthur
one page, webflow template, templates, portfolio, personal, interactions, unique, user interface, experimental
A free kit to help get you started Wireframing in Webflow. The base colour is light blue but it can be easily changed. I use this as a template for my new UX wireframing projects. It's fully responsive and consists of about 40+ unique elements. Remember... Close, Play, Enjoy! Many more projects to come so if you clone, get inspired or like this... Follow me :)
wireframes, wireframing, free, freebie, blue, ui kit, ui design, ux design, ui/ux
We built this freely cloneable style guide template to help you kickstart your design process and make your sites more consistent. Just clone it to your dashboard, then use it as a jumping off point for every site to get your type, colors, logo treatments, and component styles locked in from day one — and super-easy to update as needed. For example, if you want to change the style for every H1 on your site, just edit the instance on your style guide, and it’ll automatically update across your site.
styleguide, cloneable, template
There are so many fantastic projects in the Webflow showcase, and (if they're cloneable) you can copy & paste elements into your own projects. That's insanely awesome!! The only thing that's been missing from the showcase is the ability to discover projects with a quick search. This is the first step in that direction. More to come! Please like, follow, and subscribe for updates. P.S. I'm open to feedback and feature requests.
search, searching, search engine, webflow, webflowsites, webflow template, webflow experiment, bestwebflowsite, madeinwebflow, portfolio, projects, inspiration, showcase, ranking, organization, find your project, templates, ui kit, clone, cloneme, cloneable
Another unused personal project I'm giving away free to the Webflow community. Clone, Play, Enjoy! Many more templates to come so if you clone, get inspired or like this... Follow me :)
playfair font, free, freebie, template, blue, white, slider, parallax, icons, news, stock, interactions, portfolio
Introducing, Ridge, the newest webflow clonable from Oakland Agency. We hope you find this useful for building out your own websites. Be sure to check out our other kit if you find this useful! These elements provide a base for you to edit / style towards your own projects, and also a great learning platform for new users to break down components and understand how they are built. Please consider joining our mailing list for updates about this product and future projects! If this provides useful to you, and webflow is something you'd like to try, please use our referral link here. If you would like to follow more of our work you can check at www.dribbble.com/oakland www.dribbble.com/bekkers
ridge, interface, kit, copy, copypaste, clonable, clone, website, template, free, freebies, uiux
The Webflow Editor is pretty intuitive, but that doesn't mean clients couldn't use a handy reference work on it. Which is why I built this site, and am now making it free to clone. So go ahead: clone it, customize it, share it with your clients. And if you or your clients have feedback on how I could make it even more useful, please let me know!
webflowcms, editor, guide
Taking advantage of Webflow's visual designer and powerful visual CMS, this responsive ecommerce template gives you a jumpstart on launching your online store. Simply add your products into the visual CMS, connect to your Foxy account, and deploy your website. Foxy is a powerful ecommerce platform that allows merchants to sell any type of product in their Webflow website. Take advantage of live shipping rates, auto tax calculations, coupons, discounts, and more while allowing your customers to securely pay online with nearly 100 payment gateways and alternate payment methods. Creating your Foxy account is quick, easy, and affordable at www.foxy.io. If you have any questions, feel free to comment here or email email@example.com
ecommerce, e-commerce, shopping cart, webstore, minimal, flat, foxy, foxycart, responsive, store, online shopping
Just a quick template for a photography site or personal portfolio, feel free to clone and use however! Some of the images are pretty big so it might take a while to load.
free, templates, clone, web design, throughflow, photography, photography website, amazing, cool
This was inspired by the following CodePen: https://codepen.io/farmok/full/aYbKOO Learn about how I used the BEM naming convention to create the page in the following YouTube video: https://www.youtube.com/watch?v=gcKprnFVCUQ Also, feel free to ask any questions
bem, codepen, text
The Commonwell reimagines the heart of Tahoe City as a must-visit destination that brings together community spaces, food purveyors, local retail and recreation.
architecture, graphic design, branding, agency, development, real estate, sustainability, landscape design, california, tahoe, hospitality, interior design, tourism
A site where I will put all examples for people I help on the forum, as well as just a collection of cool examples of the awesome things you can do in webflow :) . If you have any Webflow questions PM me here: http://forum.webflow.com/users/arthur/ Arthur
throughflow, throughflow labs, arthur, forum, help, webflow, playground, sandbox
Edd is a (fake) code editor and this is a landing page created for it. It's a part of my yearly challenge of creating at least 1 free resource per week. You can clone it, export it, do whatever you want. If you want to publish it on your website as it is, you must give some credentials to my Webflow account.
landing, webflow, website, page, homepage, colors, product, code, editor, dribbble, animation, html, css, free, freebie
Hey everyone, I just made this little template - it has quite a unique "grid" design and if based of the Focus Template which I previously made. It's not yet responsive but I am happy to make that work if people would like. Hope you like it, Arthur
classy, throughflow, freebie, free, clone, freelance, free site, arthur, throughflow labs, focus, grid, grid design, portfolio, creative, creative designs, personal
I've been looking at ways to create this exact sticky sidebar as shown on Webflows course pages because I love it so much. Finally I was able to duplicate what's going on here and thought I would share it and make it clone-able for you guys! Anyway, hope this helps you like it has for me! Cheers!
sticky, sidebar, flexbox, stick
This logo is remade entirely within Webflow. No custom-code, no images, nothing. The Apple Logo is a unicode character, the Lato font is by default in Webflow, discs and superellipses are styled divs. All the effects, shadows, gradients, highlights etc are added and tweaked from the Webflow UI.
apple, logo, html, css, wwdc, experiment, pixel-perfect
Simple, cloneable implementation of the Isotope Masonry layout plugin with easy filter controls. All styling + filtering is controlled WITHIN the Webflow interface. You have a ".grid" container, inside that you have individual grid ".items"... In a div above that you have your filter/sorting functions in a ".filter" container that holds your buttons. Just add a custom "data-filter" attribute to the buttons to control the filtering. Enjoy.
isotope, filter, grid, gallery filter, masonry
A minimal, unique portfolio design with organic animations. Perfect for a designer portfolio or related showcase. [ Heads up: Each portfolio thumbnail hooks into it's own interaction. It was once-upon-a-time a version of my portfolio so it's default content contains my past work ;) ]
template, web design, agency, portfolio, white space, minimal
Now that you can copy and paste between projects, you can create (and share!) your own UI kits to jumpstart builds on new sites. To kick things off, here’s a small scale UI kit that you can clone and repurpose however you’d like. Got a UI kit you want to share with the Webflow world? Showcase and let others clone it, then share it with the hashtag #WebflowUIKit.
(Note: this project is the first step of my Webflow Starter Project, a starter template aiming at facilitating some of the recurring design tasks) You have done Webflow projects for others, or projects that are hosted outside of Webflow, and for various legal and CEO reasons, you can't showcase it as-is in your Webflow profile page? Then use this starter template to showcase your work. It currently has two sections, one showing your homepage on devices, and one showcasing your homepage in full height for the desktop and mobile breakpoints. Features: - all graphics in SVG - browser windows made in Webflow with blocks and icons, customizables - standard + material design color palette, very handy, check it out! - responsive, of course - devices graphics made of a SVGbackground and container for screenshots, absolute positionning so you can rework the layout for every breakpoints - smartwatch ready because why not? - orange Webflow project favicon and springboard icon
template, free, clone, showcase
interactions, animation, timeline, construction, parse, webflow, pretty, flat design, mobile
A dynamic before and after slider that is interactive on desktop and mobile. I did not write the code, but found out how to make it dynamic so clients can update themselves. Ideal for before and after images for cleaners, dentists, etc. Anything with a before and after! Use the header and footer code on the main settings page under Custom code page if you intend to have the element on other pages. To use on a static website, just replace the dynamic image fields with the image source address.
swipe, slider, beforeandafter, dentist, cleaners, medical
Howdy guys, Having a little play with some interaction on a recent dribble post. If you want to get involved with Webflow please use my referral link! https://webflow.com/?rfsn=1238427.48b8d You can follow my work here: www.tombekkers.com www.dribbble.com/bekkers And you can follow the agency here: www.oakland.agency www.dribbble.com/oakland
microinteractions, web, dribbble, bekkers, blog
Hey all, I was just playing around with a few effects and created this app display template, based on this Cody House gem: http://codyhouse.co/gem/app-introduction-template/ CLICK START Hope you like it! Arthur
template, app, throughflow, throughflow labs, app introduction template, full page
Turn Webflow's tab component into a dropdown menu on mobile devices. Content inside each tab doesn't need to be pushed under an (often) long list of tab links. Feel free to clone.
webflow, tabs, web, responsive, mobile, hacking, components, interactions, interactions2
I do a lot of reading on my laptop and tablet. The ability to change the background-color and font-color on demand keeps my eyes and/or head from aching. If you have late night readers on your sites, they might thank you for implementing something like this. It's exceptionally easy to do with Webflow. I made the CSS sun and moon for fun. In real life, I would use a much smaller toggle that follows the reader the down the page.
blog, nightmode, blacklight, moon, webflowix2, interactions2, toggle, typography, montserrat, fanwood, reading, readable
Hi, I made this site a while back to submit the marketplace, thinks didn't work out so instead I'm gonna give it out for free! It is a small personal portfolio site with a neat way of transitioning through pages using tabs, feel free to use it as much as you want! It's based on a free HTML template I saw somewhere a while back. Arthur
free site, throughflow labs, clone, personal, portfolio, tabs, four, four template
In this episode of What In Webflow 014, we walk-through how to create a reactive text effect in Webflow: https://youtu.be/8-9rX4PjnXM To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/Reactive-Type-Effect Also, you can find a more comprehensive tutorial at https://www.superhi.com/video/how-to-make-reactive-type-as-seen-on-the-airbnb-cereal-site Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions. I'm happy to help further!