Templates
Documentation & Support
Squarespace Documentation
Sequence - Dynamic Squarespace Landing Page Template
Sequence is a split-screen landing page template built for a screen-recorded video tutorial library covering every corner of the Squarespace editor. It pairs a dark, code-editor visual identity with a structured feature matrix, dual lead-generation paths, and high-motion interactivity, designed to convert curious visitors into enrolled students from the first scroll.
by Rocket studio
Sequence is a single-page lead generation template built for a Squarespace video tutorial series. It uses a 50/50 split-screen layout, a dark Dynamic Motion visual identity, and a feature matrix that guides visitors from curiosity to enrollment. Two conversion paths, a free first module and a curriculum PDF download, work together to capture every type of visitor.
This template is built for creators and educators selling structured video tutorial content. It works especially well when the course has multiple skill levels and needs to earn trust before asking for a commitment.
Most course landing pages either overwhelm visitors with walls of text or undersell the depth of the content inside. Sequence solves both problems at once. It organizes course material visually so visitors understand the scope before they sign up, and it lowers the barrier to entry with a free first module.
You get a fully structured, single-page layout built around a video tutorial library with multiple course modules. Every section has a clear job, and the visual hierarchy moves visitors naturally from headline to enrollment form.




Theme
Dynamic Motion
Creative direction
Feature Matrix
Color system
Teal Catalyst
Style
Split Screen (50/50)
Direction
Lead Generation
Page Sections
Split-screen Hero with Glow Effect
Feature Matrix Module Grid
Three-track Skill Path Bento
Stacked Social Proof Section
Dual Lead-generation Forms
Sticky Call-to-action Bar
What layout style does this template use?
How does the lead generation work in this template?
Who is the target audience for this template?
Can I adapt the module grid to a different course topic?
What animation effects are included in this template?
This template includes a set of purpose-built components that work together to showcase course depth and drive enrollment.
The header fills the full screen with a dark background and a teal radial glow emanating from the center. The left half carries the headline "Every Panel. Every Setting. Finally Clear." in weighted sans-serif type. The right half displays a looping video fragment of the Squarespace style editor in motion. The glow pulses subtly on each cursor click, syncing the animation to the action on screen.
The course library is organized into a structured grid where each row represents one module. Left columns list module titles (Layout Engine, Design Panel, Mobile Optimization, Custom CSS, SEO Settings, E-Commerce Build), and right columns display a preview thumbnail that swaps on hover with a lesson count and difficulty badge. Rows escalate from beginner to advanced as visitors scroll, so the page feels like a progression rather than a catalog.
A bento-style section organizes course content into three tracks: Beginner, Intermediate, and Advanced. The asymmetric tile sizing gives each track a distinct visual weight. Visitors can immediately identify which track matches their current experience level.
Testimonial cards are stacked with specific module references and freelancer outcome details. One card features a freelancer who landed a client after completing Module 3, paired with the exact tutorial clip they referenced. The testimonials are not generic praise, they point to specific course moments.
The primary call-to-action form collects an email address and a single dropdown response ("What's your Squarespace experience?"). A secondary path offers a curriculum PDF download requiring only an email. A sticky bottom bar appears after the first scroll and carries the primary call to action, keeping the enrollment option visible at all times.
The template includes slideInBlur stagger animations, scroll-fade effects using IntersectionObserver, orbital and pulse effects on teal accent elements, and a teal glow pulse on the hero. Animations are applied through a Client-side component system for interactive elements, while static sections use Server Components for performance.
| Section | Purpose |
|---|---|
| Hero Split Screen | Introduces the course with headline, live video mockup, and teal glow |
| Feature Matrix Grid | Displays all course modules with thumbnails, difficulty badges, and hover swaps |
| Skill Path Bento | Organizes content by experience level across three asymmetric tracks |
| Social Proof Cards | Builds trust with specific freelancer testimonials and module outcome references |
| Lead Generation Forms | Captures emails via free module signup and PDF curriculum download gate |
| Sticky Bottom Bar | Keeps primary call to action visible after the first scroll |
| Footer Linear Row | Closes the page with a single-row linear footer pattern |
The visual identity follows a Dynamic Motion theme built around the Teal Catalyst color system. The palette references a code editor running late at night, dark backgrounds, a glowing teal primary, and a yellow-green spark accent reserved for active calls to action and hover states.
The template is built desktop-first to match the working environment of its primary audience, creators sitting at full-screen editors. It is fully responsive so the layout adapts cleanly on smaller screens without losing the visual hierarchy.
The entire page is structured around reducing friction between a visitor's first impression and their decision to enroll. Every design and layout choice serves the conversion goal.
This template is categorized under Documentation and Support, specifically within the Squarespace Documentation and Squarespace video tutorial series niche. It is designed for the EdTech and creator education space, serving both direct-to-consumer and business-to-business audiences.