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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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 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
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
I've found that sending clients a proposal in the format of a responsive web design is a good start-off point to show off your design. This is especially useful on the Webflow platform where you can design and iterate at lightning speed. Here is a proposal template that I have made really barebones, but I customize it specifically for every client. Can be customized to be used with CMS items, but I've found that editing text on the page was actually much easier, given the customizable nature of proposals I've sent. Really hope it can be a useful jumping-off point for some of ya'll! Clone away! - Michael
proposal, template, webdesign, design, wireframes
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
Webflow is at SXSW! March 15th we are demoing the power of Webflow by building this site in under an hour and a half (including breaks). We wanted to create an elegant/simple site that we could easily demo with just a basic understanding of Webflow, and utilizing built-in features such as Sliders, Navbar, Lightbox, Interactions and more. If you're at SXSW, we look forward to meeting you face to face!
webflow, web design, sxsw
This website is made with Webflow and is a demo on how to set a cookie using Jquery, and use it to show a popup message or not. It's supposed to show you a popup message on your first visit every 24 hours. You can clone this project and see how it's made.
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
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
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 is a sales website template I created for an upcoming project. Now that I have sent it of to my team for final development, I decided I would leave it up for others! I like the layout and figured it may be useful to other WebFlow users. Comes with some slick elements like a pricing table, according tab & portfolio. Anyways, hope you enjoy and feed back is always appreciated!
webflow, template, vertical nav, fixed website, web design, website, pricing table, accordion tab
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
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!
Over at Sketchappresources I found bootstrap ui-kit that I reworked in Webflow. I could have done somethings better with the naming and planning with divs. But this was training and it could maybe be used as a start for something else.
ui kit, ui design, styleguide, freebie, cloneable
I've seen a lot of folks asking how to make custom social sharing buttons on the Webflow Help Pages lately, so I put together this fun little how-to with code snippets for you all to pull from. :) Oh, and this is clone-able in case you'd like to use the fun dropdown widget I created using a dropdown widget and some interactions. :) Have fun!
interactions, css, custom code, social networking, social media marketing, freebie, cloneable, twitter, facebook, pinterest
section transitions as smooth as butter :) As seen on the Webflow Workshop on 2/7/2017: https://youtu.be/tcA1oMy9S7w In this workshop, we'll be going over how to create a more seem less background transition between each section by using the Webflow scroll interaction. Here are two examples of this interaction: https://superduper.wtf https://helloheco.com
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
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
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