Advanced Web Design Techniques for Webflow Power Users. Learn more about this course at: formburg.com/en/webflow-expert-course
Course plan
Welcome & Introduction
Welcome and an important note (plus a gift)
Go through style guide, CSS variables and basic settings
Mastering Advanced Layouts & Animations
Layout preview
Main navigation build
Optimize main navigation responsively and important additional settings
Main navigation animation
Design and CSS animation of link button with component variants
Create a button toggle with an icon as a component
Integrate components into the main navigation and customize them with custom CSS
Gradient graphic stage
Badge animation on scroll
Building a 3D Box in Webflow
Content stage with video teaser popup
Create a modal/popup component with CSS animations
Stage background positioning trick and table development
Stage responsive design process
Box animation
Stage page load animation
Fullscreen tabs sektion build
Simple section overscroll effect
Tab transition animation with CSS
Setting up the autoplay tabs functionality
Autoplay tabs button animation
Autoplay Tabs Layout 2 like on the Webflow homepage with video content
Responsive Design Tabs
Numbers count animation on scroll
CMS grid with dialog / modal / popup functionality
Hero section overscroll effect
Light / Dark mode toggle with Webflow variable colors management
CMS Configurator with Payment Functionality
CMS collection structure
Developing the configurator design
Integrating filter functionality
Implementing design for radio buttons
CMS lightbox gallery with slug-based group names (bypass Webflow limitation)
Product light spot color change via CMS
Custom CSS animation for CMS attributes filter system
Position an info point on the product via the CMS
Product popover functionality with infotext
Configurator responsive design
Optimizations and bug fixes
Stripe deep dive and setup
Pros and cons of Stripe vs. Shopify or Webflow e-commerce
Create products and checkout links in Stripe
Stripe App in Webflow
Interactive 2D & 3D Product Showcases
Building the 3D product showcase section
Prepare 3D spline object and export as image
Create 3D object video animation
Click-based image zoom effect via attribute coordinates with popover
3D video animation on button click (better for performance)
Lazy loading of a Spline 3D object on click with fullscreen popup animation
Simple Shop with Cart Functionality and Stripe Checkout (not Webflow E-Commerce!)
Is this solution a good fit for your clients business?
Set up Webflow CMS with AI-generated content and CSV import
Building the product overview page & teaser component
Integrate Finsweet Attributes CMS filter and sort functionality
Product detail page design and structure
Link to other product variants
Cart design development
Cart toggle and modal functionality
Building the custom JavaScript cart functionality
Building a Quantity Selector with Plus/Minus Buttons
Implement total cart sum functionality
Quick add to cart enable on product overview
Create a sales tag with percentage calculation from two prices
Generate Stripe Checkout page with a MAKE automation
📥 Bonus Download & Cloneable
Download Figma File
Webflow Cloneable
Your Gift: Get a 25% coupon!
Your Gift: Get a 25% coupon!