Beginner5 min readShare
Was this chapter helpful?
Share
Try these free tools
A visual catalog of every common website section. Know what exists so you can ask AI for exactly what you need.
Centered heading, subtitle, two CTA buttons, decorative gradient blobs.
Tell AI:
"Create a centered hero with gradient heading, subtitle, primary + secondary buttons, and soft purple/pink background blobs."
Text on left, image/illustration on right. 50/50 layout.
Tell AI:
"Create a split hero with heading and CTA on the left, product screenshot on the right."
Full-width background video with text overlay and dark gradient.
Tell AI:
"Create a full-width hero with background video, dark gradient overlay, white centered text and CTA."
Text typing animation or floating elements. Eye-catching.
Tell AI:
"Create a hero with a typing text animation effect on the heading, cycling through 3 different words."
3 or 6 cards with icon, title, description. The most common.
Tell AI:
"Create a features section with 6 cards in a 3-col grid, each with colored icon, title, description."
Image left + text right, then swap. Zigzag pattern.
Tell AI:
"Create a features section with 3 alternating rows: image on left with text on right, then reversed."
Asymmetric grid with mixed-size cards. Trendy, modern look.
Tell AI:
"Create a bento grid features section with 5 cards in different sizes — one large spanning 2 rows, others smaller."
Tab bar that switches between different feature screenshots.
Tell AI:
"Create a features section with tabs at top — clicking each tab shows a different screenshot and description."
3 cards with quote, avatar, name, role. Simple and effective.
Tell AI:
"Create a testimonials section with 3 cards: large quote text, user avatar, name, and company."
Row of company logos. 'Trusted by' section.
Tell AI:
"Create a logo cloud section with 'Trusted by' heading and 6 grayscale company logos in a row."
One testimonial at a time with arrows and dots.
Tell AI:
"Create a testimonial carousel that auto-advances, showing one large quote with avatar and 5-star rating."
Big stats numbers above, followed by a testimonial quote.
Tell AI:
"Create a section with 4 large stat numbers (10K+ users, 99% uptime, etc.) above a featured testimonial."
Basic, Pro, Enterprise. Middle one highlighted.
Tell AI:
"Create a 3-tier pricing with monthly/yearly toggle, feature checklists, Pro tier highlighted as Most Popular."
Full feature comparison table across all plans.
Tell AI:
"Create a pricing comparison table with features as rows and plans as columns, with checkmarks and X marks."
Single plan or 'pay what you want' style.
Tell AI:
"Create a simple single pricing card with price, feature list, and a prominent CTA button."
Full-width gradient background with centered text and button.
Tell AI:
"Create a CTA banner with purple-to-pink gradient background, white heading, subtitle, and white CTA button."
Text on left, email signup form on right.
Tell AI:
"Create a CTA section with heading and description on left, email input with subscribe button on right."
CTA that appears after scrolling a certain distance.
Tell AI:
"Create a sticky CTA bar that appears at the bottom of the screen after scrolling past the hero section."
Cards with thumbnail, category badge, title, excerpt, author, date.
Tell AI:
"Create a blog post grid with 6 cards, each with thumbnail image, category badge, title, excerpt, and author avatar with date."
Grid of team member cards with photo, name, role, social links.
Tell AI:
"Create a team section with 4 member cards: circular photo, name, role, short bio, and social media icon links."
Vertical timeline for company history or process steps.
Tell AI:
"Create a vertical timeline section with 5 milestones, alternating left and right, with date badges and descriptions."
3 numbered steps showing a process.
Tell AI:
"Create a how it works section with 3 numbered steps connected by a dotted line, each with icon, title, description."
Logo left, links center, CTA right. Hamburger on mobile.
Tell AI:
"Create a fixed navbar with logo, centered links, gradient CTA button, backdrop blur, hamburger menu on mobile."
Dropdown that spans full width with columns of links.
Tell AI:
"Create a navbar with mega menu dropdown — hovering 'Products' shows a full-width panel with 3 columns of links."
Vertical navigation on the left side. For dashboards/apps.
Tell AI:
"Create a collapsible sidebar with logo at top, nav links with icons, user avatar at bottom, collapses to icons only."
Mobile bottom navigation with 5 icon tabs.
Tell AI:
"Create a mobile bottom tab bar with 5 tabs (Home, Search, Create, Notifications, Profile), active tab highlighted."
Logo + 4 link columns + social icons + copyright.
Tell AI:
"Create a footer with logo, 4 columns of links (Product, Company, Resources, Legal), social icons, and copyright."
Just logo, a few links, and copyright on one line.
Tell AI:
"Create a minimal footer with logo on left, 4 inline links in center, copyright on right, all on one line."
Email signup form integrated into the footer.
Tell AI:
"Create a footer with newsletter signup (email input + subscribe button) above the link columns."
