Draftly Section Library: Every Block and When to Use It
Knowing which section to use and when is the difference between a site that looks built and one that looks generated.
Hero Sections
Standard Hero — Headline, subheadline, CTA button, background image. Use on every homepage.
Video Hero — Background video loop. Use for high-impact brands: hospitality, fashion, events.
Split Hero — Left text, right image. Better for B2B and professional services — feels more structured.
3D Hero — Depth and parallax. Use when you want to make a strong first impression.
Trust Sections
Logo Bar — Client or partner logos. Place just below hero.
Testimonials Carousel — 3-5 rotating reviews. Mid-page or just above CTA.
Stats Bar — 3-4 key numbers ('2,000+ clients', '98% satisfaction'). Powerful trust anchor.
Content Sections
Features Grid — Icon + heading + description. Use for product features or service breakdown.
How It Works — 3-step process. Reduces anxiety about working with you.
FAQ — Accordion-style Q&A. Handles objections at scale.
Conversion Sections
Contact Form — Name, email, message. Always end with one.
Pricing Table — 2-3 tier comparison. Essential for SaaS and service packages.
CTA Banner — Full-width colour block with headline + button. Use before footer.
Media Sections
Gallery — Grid of photos. For portfolios, products, interiors.
Before/After Slider — Drag to compare. High-converting for transformations.
Video Embed — YouTube or Vimeo. Great for explainers and case studies.
