Saas Pricing Page Design
.svg)
Cloneable tags
Description
The SaaS Pricing Page Design is a comprehensive and professional element that can be added to your Webflow site. This cloneable provides a full SaaS pricing table design that includes a monthly/annual pricing table, features sections, accordion FAQ, and much more. This pricing page is perfect for any website looking to clearly and persuasively present their pricing and features to their visitors. The SaaS Pricing Page Design includes a fun hover interaction, updated page copy, and font styles, making it easy to use and customize. This cloneable is also categorized under Pricing and Layout, making it easy to find and use on your Webflow site. The SaaS Pricing Page Design was created by Duncan Hamra, a talented developer with a passion for creating high-quality and user-friendly web elements.
A unique slider pricing calculator that updates the pricing table based on the slider options in Webflow. This is a great way to customize your pricing page tailored to the users unique features that dictate your pricing for your Webflow site and service.
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 wonderfully designed pricing comparison table with everything you'd need to showcase and feature a pricing page on your site.
A CMS driven range slider that updates the price based on the selected range in Webflow. This pricing range slider is connected to Webflow's native CMS system. Note that this requires custom code within the Body close tag section to work properly.
A FAQ section with a sticky sidebar and accordions for various FAQ questions.
Here's a dynamic pricing table that updates the pricing and currency symbols based on the selected currency in Webflow. A great way to show different pricing based on the currency selection of your users.
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
Another fun text effect, this one shows you how to scramble text between transitions.
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 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 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.
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 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 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.