Classroom Loop — Build Your Landing Page

Drag wireframes from the gallery into "Your Page" on the right. Reorder by dragging up or down. Click X to remove.

Open the live concepts → A · B · C

Wireframe Gallery

Section variants from concepts A (playful) · B (app showcase) · C (trust-first). Drag a card into Your Page.

1. Hero

Hero · BannerA
Try FREE
Hero · AppB
Try FREE
Sign In
Hero · TrustC
Try FREE

2. Stat strip

Stat · YellowA
5
100+
All
Stat · DarkB
5
100+
All-in-one

3. Smart Tools (5 AI tools)

Smart · GridA
Smart · 2-colB
Smart · MarqueeC

4. Resource Hub (100+ materials)

Resource · 5-cardA
Resource · Banner+GridB
Resource · 3-colC

5. Classroom Tools (behavior + timer + messaging)

Classroom · GridA
Classroom · 2-colB

6. Teacher Rewards (optional)

Rewards · StepsB

7. Testimonials

Testimonials · 4-colA
Testimonials · 2x2B

8. Final CTA

CTA · BlueA
Try FREE
CTA · RedB
Try FREE
CTA · CreamC
Try FREE

9. Footer

Footer · SlimSTD
Footer · LightSTD

+ Custom

Your Page

Drop sections here in the order they should appear. Drag to reorder. Click X to remove.

Drop sections here to build your page A typical landing page has 6-9 sections, starting with a Hero and ending with a Final CTA + Footer.

Comments & Notes

No comments yet. Leave a note below.

Draw your own wireframe

Sketch a custom section layout. Use boxes, lines, and labels to show what you want. Click "Add to Your Page" when done.

Color Size
Copied!