The Top 50 Layout Webflow cloneables

Easily add a grainy effect to your entire site. This uses a grain png that was on a Webflow site. You can create your own grains as well to change it up.

Box shadows aren't the easiest thing to create in Webflow. Here are 6 different box shadows ready to go and to be added to your projects.

A FAQ section with a sticky sidebar and accordions for various FAQ questions.

A portfolio example site built with grid and then made responsive via Flexbox on tablet and mobile. Watch the tutorial here: https://www.youtube.com/watch?v=zp50_iWll8Y

Here's a Webflow budget app created in Webflow and coded with Svelte running on Webflow. This is a great demonstration of the power of Webflow and using JS, the power of front-end design + JS for more dynamic and functional web apps.

Here's a way to achieve a unique hero section using grid and the Wizardry method in Webflow.

Add numbered paginations to your CMS collection lists via this small custom code snippet.

10+ premade contact form designs for Webflow. These premade components will allow you to easily add customized contact forms to your Webflow site. There are many different variations of labels and input form designs, and buttons that'll fit just about any type of design or requirements.

Ten different footer designs for Webflow. Beautifully designs that can accomplish just about any type of footer variation that you could possibly want on you Webflow site.

Here's a Webflow cloneable component to easily add a vertical step/process section to your Webflow site. Perfect for timelines, process steps or anything that you can think of.

Here's a well designed cloneable blog template design perfect for your Webflow site. It features a sticky sidebar and well designed content divs with just about everything you'd need for your blog page. Including other posts, individual blog page, call to action and email opt-in/subscribing, categories, sidebar and much more.

A simple way to create complex CMS grid layouts. You can define a layout for any item in the grid. You can make it multiple spans of columns and rows. You can also set columns and rows to the nth items as well as even or odd items.

Here's a unique clickable process/steps section in Webflow. Whenever someone clicks on each step an interaction triggers that displays the number as well as further information about that specific step. Simply edit the content, update the interactions based on your requirements and enjoy a unique steps/process section on your site.

A well designed frequently asked questions (FAQ) cloneable design for Webflow. This provides all the interactions required for opening and closing the accordions that will fit perfectly on your Webflow site.

Ever wanted to achieve slanted/diagonal sections on your Webflow site? With this no code technique you'll be able to create a Webflow section that isn't flat but has a slant or diagonal edge between sections.

Six different wonderfully designed material style navigation menus and footers for Webflow. These are perfect cloneables to quickly build either navigation menus, footers, or both for your Webflow site.

Three different testimonial sections for your Webflow site. These free testimonial sections include two slider designs and one non slider to feature testimonials on your Webflow site.

Using Airtable and No Code API to power the job listings of a Webflow site rather than using the CMS.

Product cards become sliders when on mobile resolution technique in Webflow. Here's a fun way to add a dynamic element to your site for mobile users.

Here are six unique, well designed hero sections for Webflow. Easily add a unique hero section to your Webflow site with this copy and paste cloneable.

A beautifully designed modern newsletter opt-in call to action section for Webflow. This free cloneable can be copy and pasted to your Webflow project in no time.

Here are a collection of 16 different footer designs, all responsive and fully customizable and ready to be added to your Webflow sites. A great way to add a footer to your site quickly.

Here's a fully designed registration/sign up template for Webflow. Built with custom inputs, labels, and includes social media sign up buttons.

Here is a wonderful collection of 10+ Webflow FAQ layouts and components ready to use on your Webflow site. Included in these are accordions of varying style and design. There are versions with pop-up modals, dropdowns, expanding cards, fully expanded FAQs and just about everything you'd need to add an FAQ to your site.

A steps section design for your Webflow site with unique scroll animations/interactions. Here's a unique cloneable that's ready to be added to your Webflow site perfect for a steps section portion of your site.

Three different unique footer designs for Webflow. Easily add a footer to your Webflow site with one of these three free cloneable footer designs. All footers feature unique designs and layouts with a clean, responsive design.

Three different call to action CTA sections designed for Webflow. These are designed to help increase your conversation rate and drawing attention to important call to actions on your Webflow site.

A unique 404 page design for Webflow. When a user visits the 404 page the mouse cursor creates a spotlight effect that displays an apology with 100 different languages.

Here's a full page iPhone mockup design for Webflow. A great way to add an iPhone mockup design to your site with all of the elements already designed for you.

A done for you Webflow pricing table component cloneable created by the Flowbase team.

A responsive table template design for Webflow built with divs. Perfect for listing information such as client list, user list and other situations in which you need a table design in Webflow.

Three modern author/bio box designs for Webflow. Easily add a customized, modern author bio box to your Webflow site with one of these three premade layouts that are responsive and well designed.

Here's a way to add a beautiful, count up counter via JS in Webflow. This wonderfully designed metric section is perfect for a SaaS or similar industry that is looking to add a metrics section in their Webflow site. Be sure to add the custom code found in the page settings to ensure that this works properly.

Here's a way to create a layered, blurred div effect in Webflow. The blurred div sits on top of another div and creates a transparent layer that blurs the bottom div. A great way to add depth to your Webflow site and opens Webflow up to all types of possibilities.

A fully designed, minimal black and white footer with navigation effects.

A full SaaS pricing table design for Webflow. This pricing page includes a monthly/annual pricing table, features sections, accordion FAQ and much more. This includes a fun hover interaction, updated page copy and font styles.

Seven different feature layout designs for Webflow. These unique designs allow you to easily add feature sections to your Webflow site. Great looking, responsive designs.

Add drag and drop list functionality to your Webflow site with this javascript library. This uses Sortable.js to create sortable lists within Webflow. Perfect for to-dos, sorting, and other functionality that may be needed for your Webflow site.

Four separate stats sections for your Webflow site. Each of the stats sections are well designed, and unique to help show stats of your product or service on your Webflow site.

Here's a user zone/client login page design for Webflow. Featuring Google login button and username password input in a beautifully designed page.

A free cloneable hero section with blue and white fonts. Includes buttons, social media links and a pre-made menu.

Three different logo/client bar sections for your Webflow site. Increase your sites conversion rate by featuring a client logo bar to present social proof and build trust with your visitors.

A beautifully designed estimate, investment portfolio, quote page in Webflow. Perfect for an investment portfolio/funds, or anything requiring detailed investment/financial quote structures. With a little bit of work this could be made both responsive and CMS driven, allowing for clients, employees or others to make this for internal sites.

Six different call to action designs for your Webflow site. An easy way to add important call to actions to your Webflow site via a cloneable.

A simple login overlay panel for Webflow. A clean login UI overlay built with a minimal native Webflow interactions. Perfect for prompting a user to login upon taking an action, such as saving or bookmarking an item.

Eight different content layout designs for your Webflow site. Easily add beautifully designed content layouts to your Webflow site.

A fun concept of a fan site for the Matrix. Utilizes a moving background code screen much like in the movies.

A demonstration of how to change the layout of a page design via a click in Webflow. This method allows you to dynamically alter the page design/layout design on a Webflow site using native Webflow interactions.

Here's a way to style code embeds on your Webflow site that are added to Webflow's native CMS system. This allows you to embed styled code snippets into the Webflow CMS. Everything is styled and configured to be super easy to add to your Webflow site. All styles are applied via class names so you won't lose anything during the copy/paste process. The code styling is achieved via highlight.js

Here's a minimalistic 404 page design with a doorknob hanger sign animated via Lottie files and interactions.