Launch a paid blog template using Webflow & Memberstack.
Happy Wednesday! This is a multi-page membership template with a landing page, signup, login, and content area. Each page has a short video that explains how it is set up with Webflow and Memberstack. The project is Memberstack ready, but free to use for anything you like! The landing page includes a hero section, navbar, how it works/articles, features sections, testimonials sections, and support/CTA section just above the footer. I hope it serves you well!
Happy 2022! This is a free concept UI for an e-commerce dashboard. Nothing is functional, but the design is 100% free for you to use.
A membership pricing table design for Webflow featuring three pricing structures in a clean and modern design. This pricing table cloneable features a unique header section and three different pricing packages with an emphasis on one package. It includes price, description, button and individual pricing options.
A beautiful sign up page created for Webflow as a rebuild of the Linear sign up page. This sign up page features a large Continue with Google button, while the continue with email button shows the email option after being clicked. This page features a well designed layout with custom buttons, hover effects, input fields and more.
A free create account/subscription sign up page design for Webflow. This simple login and sign up page design includes gradient input outlines, show/hide password functionality in a dark theme with a beautiful background.
A recreation of the Firefox browser window as a mockup in Webflow. This Firefox browser mockup features open and closeable tabs, forms to act as the URL bar and hover states for all of the browser buttons. A unique way to create and demonstrate product images, product demonstrations and more in Webflow.
A three tier pricing table design with a floating primary central div for Webflow. Perfect to get your Webflow pricing page launched quickly with three different packages, shadows, and button hover animations and a fully responsive design.
A free login/sign in page for Webflow. This free Webflow cloneable features a unique feature in which the password field is hidden until a user begins to type their email address. A unique way of turning a simple page into a dynamic one while potentially reducing bot activity.
A fun and unique green pricing table design for Webflow. This pricing table design features a large headline and a four section pricing table with a unique hover over interaction. When a user hovers over a card the card is attracted to the mouse and moves around a bit. The pricing cards feature product information as well as a primary discounted card label for a package. A great design to get your Webflow sites pricing section built out quickly.
A black and white styled subscription form login for Webflow. This free Webflow cloneable is a sign up/login UI with a textured background, rounded buttons, show/hide password and styled inputs.
A fun login and sign up page for Webflow featuring a unique cartoon character that follows your mouse cursor. This is accomplished via 100% native Webflow interactions. The SVG was broken up into several parts, and added a hover over element interaction to the background and hover/in out interactions to the email, password and login fields. The rotating head effect is created by moving close-up elements slightly more than the background elements. For example, the nose moves 11px to the left or right, while the mouth only moves 9px and the face moves 6px while the body doesn't move at all.
Here's a beautifully designed custom onboarding form to collect/update member information at any time. This could be used for onboarding, profile updating, account setup and much more.
A unique input label animation for Webflow. When a user selects an input the label moves letter by letter above the input field. A unique way of adding animation to what would typically be a static input label. This uses some custom code to animate the labels and CSS to style the valid inputs.
A simple, yet modern material design pricing table for Webflow. This pricing table features a large headline, three pricing options with features and a unique offset design aesthetic. The cards also feature a hover over button interaction which changes the call to action button. A great designed pricing table that can be easily added to your Webflow site.
This is a revised version of Flowbase's pricing table with fun hover interactions, removing/cleaning up class names and updating the page copy. Other changes include changing of font sizes and adding the Memberstack functionality to all of the buttons. This is a two plan pricing table with the focus getting a user to join for free while still showing the unlimited paid plan. The page also includes a feature table below the pricing table.
A fully interactive dark mode Firefox browser mockup for Webflow. This Firefox mockup features openable tabs, closeable tabs, form inputs and button hover interactions that make this mockup feel like a real Firefox browser window. This is perfect for demonstrating products, product images and much more.
A well designed sign up/sign in page for your Webflow site. This sign up or sign in page features a unique confirm password interaction in which appears once the password field is starting to be typed into. The sign up page features a unique rotating logo image, email field, password, confirm password, create account and custom input field states (hover, selected, default).
A light interactive Chrome mockup browser window created in Webflow. This mockup window features a number of unique native Webflow features to build a fully interactive Chrome mockup window for your Webflow site. A perfect way to demonstrate product images, product demonstrations and more.
A free membership splitscreen signup page for Webflow. This cloneable features a sign up page with all of the necessary elements you'd need to create a perfect sign up page in Webflow. This includes sign in with Google buttons, Facebook, first name field, last name, email and password. Each input field has unique states (hover/active/selected) and the entire page is well designed and laid out.
Here's a simple pricing table with monthly or yearly pricing toggle for Webflow. The design is mobile friendly, user-friendly and designer--friendly. This pricing page includes a menu/navbar, pricing table, toggle with interactions and FAQ section.
Here's a fun technique, using a slider with a hover slider to dynamically change the color of a sites background in Webflow. This was all made with Webflow interactions.
Here's a tall pricing page design with annual pricing toggle in Webflow. A full pricing page design for your Webflow site that includes an annual/monthly pricing toggle interaction, service features, and a FAQ section.
Here's a login or sign up page with slider in Webflow. A wonderfully designed sign up or log in page designed in Webflow with an automated slider. This can help jump start your Webflow projects and provide key pages for sign up and login. With custom input form fields with needed states, and error checking.
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.
A beautifully designed pricing page for recurring services in Webflow. The pricing page template has monthly and annual toggle interactions, additional perks/plans/discounts information, an accordion FAQ, footer and navbar.
Get more insight into why your clients are cancelling with this cancellation insight form for Webflow. This cancellation modal form data is submitted directly to Webflow, meaning it's easy to export and analyze the results at any point.
A sign up page inspired by Dribble for Webflow. This cloneable sign up page includes Google login button, Twitter login, name, username, email and password. The username, Google and Twitter functionality are a beta of the Memberstack 2.0. The form includes unique designs with hover states, active states and more.
A responsive safari mockup built for Webflow. A perfect way to showcase a product demonstration or image in a responsive Safari style window. This Apple Safari mockup window is a light version rather than a dark version.
A free Webflow login in/sign up page design with unique loading interactions, custom inputs and much more. A perfect cloneable to easily create a login or sign up form for your Webflow site with fun style 3D illustrations and loading animations.
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
A perfect way of adding login and pop up modals to your Webflow site. These sign up and log in modal windows are well designed with custom form inputs, buttons and open/close interactions.
Another beautiful sign up page with a background video sidebar for Webflow. This features a Google sign in button, Facebook sign in, email and all the necessary form input design elements.
A beautiful product & feature grid section for Webflow. This product grid uses flexbox and grid and the icons are SVGs which inherit their color from the parent section.
A 100% native Webflow tooltips solution. Most tooltips utilize third party JS libraries to add tool tips to Webflow. These tooltips are created 100% with Webflow dropdowns to create a unique solution to creating tooltips within Webflow.
A simple service membership sign up and login page design in Webflow. The form features a show/hide feature, preinstalled with Memberstack, styled select field, checkbox, email, name and password.
A Matrix style text scramble effect in Webflow. This entire effect relies on custom code which is included as an HTML embed and was found on a CodePen. In order to modify the text you'll need to update the custom code in the HTML embed.
Here's a way to create a simple drawn underline for text in Webflow. This method demonstrates how to create a span text class and use a hand drawn underline image in text for Webflow. It's recommended to create several different underline length spans as some words look better than others with different sizes.
A simple yet effective Webflow sign in/login page featuring Google and Facebook social sign in. This form features native Webflow input fields with states, checkbox and buttons.
A beautiful membership pricing table featuring annual, quarterly and monthly toggles for Webflow. This pricing table features everything that you'd need for a 4 tier pricing table that offers discounts based on annual, quarterly and monthly pricing options. This template features all the necessary interactions to get this tabbed pricing table to work properly.
A beautifully designed login or sign up page with a toggle between signing up and logging in forms. This full page design includes backgrounds, input designs, button, background video and much more.
A stunning membership pricing table perfect for your Webflow site. This pricing table is based on a revised Flowbase design with unique hover interactions, removed/cleaned up class names, updated page copy, new font sizes and memberstack integration. This utilizes an orange and dark blue color scheme, 3 column pricing table with a header.
An interactive dark Chrome mockup design for Webflow. This Chrome browser window mockup is perfect to showcase screenshots of product pages and page designs. This is built entirely in Webflow and utilizes a number of native Webflow elements such as forms, interactions and more to create a beautiful interactive Chrome browser window.
A simple method to create video explainer tour widget in Webflow. You'll need to view the live site in order to test the experience. This method allows for a way to embed a video into projects to help create an explainer video.
A login page featuring a sign in form with a password showing button in Webflow. This enables you to add a show password option for the password field of a sign in page on Webflow. This cloneable features a simple login page with email, unique form labels, password label and field, stay logged in checkbox and sign in button. This technique uses some custom javascript which can be found at the bottom of the cloneable of the page as an embed.
Another fun text effect, this one shows you how to scramble text between transitions.
Here's a way of creating a product tour in Webflow utilizing native interactions and custom tool tips. Rather than using complicated external JavaScript libraries you. can build your own guided product tour using a simple tooltip design and Webflow's native interactions.
A unique pricing table with tabs to rotate between different packages in Webflow. This pricing table offers a unique design pricing packages that utilizes a tab style pricing table to change between different pricing packages. The pricing table defaults to the cheapest tier, and the more expensive plans are hidden behind a table style button. Featuring 3 different pricing packages and unique transitions between each package. This pricing table features a large header, three packages, and unique rounded design.
A free Webflow SaaS login/sign up page with unique labels, show/hide password functionality as well as Memberstack installed.
Here are 18 hand drawn SVG elements for your Webflow site. This cloneable includes 18 different arrows inside individual custom embeds. The great thing about SVGs, when setup properly is that they can inherit their color from the font-color of the parent elements.
A free Webflow membership login page design cloneable. This login and signup template comes with gradient border outlines, border interactions to create a shine effect, show/hide password, drop shadows and a simple nav bar and footer.
Cofounder at Memberstack. Webflow got me out of college... thanks Webflow!