Sections overview
Citera ships with 30+ sections. This page is the full reference — what each section does, when to use it, and a link to the detailed how-to.
Adding a section
Then on any page, scroll to the bottom of the left panel → Add section → pick from the list.
Section reference
Hero & headers
| Section | What it does | When to use |
|---|---|---|
| Hero | Full-width banner with image, headline, subheadline, and buttons | Almost every homepage — your top-of-page attention grab |
| Slideshow | Multiple rotating hero slides | When you have 2–3 equally important messages (new arrivals + promo) |
| Video | Autoplay video header or embedded video block | When your product is best shown in motion — food, fashion runway, tech demos |
| Story | Editorial-style article with drop caps, pull quotes, footnotes | About pages, brand narratives, blog-style content |
Product & collection displays
| Section | What it does | When to use |
|---|---|---|
| Featured product | Highlight one product with gallery + description + buy button | New drop, limited edition, single hero product |
| Featured collection | Grid of products from one collection | Best sellers, new arrivals, seasonal edits |
| Collection list | Grid of collection cards (with image) | Category-based stores — link to top categories from the homepage |
Content & social proof
| Section | What it does | When to use |
|---|---|---|
| Image with text | Two-column: image + heading + paragraph + CTA | Brand story, feature explanation, guide entries |
| Multicolumn | Row of 2–4 columns with icons and short text | Value propositions, features, why-us grid |
| Testimonials | Quote cards from customers | Social proof anywhere on the homepage |
| Trust badges | Small icon + label grid (Free shipping, 100% guarantee, etc.) | Above the fold on category and product pages, reassurance |
| FAQ | Accordion of question/answer pairs | Above the fold on service pages, midway on homepage |
Visual sections
| Section | What it does | When to use |
|---|---|---|
| Image gallery | Grid or masonry of images | Portfolio, lifestyle, Instagram-style content |
| Collage | Asymmetric arrangement of images + text blocks | Editorial hero layouts, art store fronts |
Marketing sections
| Section | What it does | When to use |
|---|---|---|
| Marquee | Scrolling strip of short messages | Announcements, brand mantra, oversized display headlines |
| Countdown | Real end-date timer | Sales, drops, launches with an honest end time |
| Newsletter (section) | Full-width email signup | Above the footer, or as a dedicated capture band |
Blog & content
| Section | What it does | When to use |
|---|---|---|
| Blog posts | Grid of recent articles | Content-driven stores — surface the blog on the homepage |
Sections in editor blocks vs full sections
Some content types (like a testimonial, an image, or a text card) are available BOTH as a full section AND as a block inside another section. Rule of thumb:
- Use the full section when the content is the focal point of a page band
- Use the block when it’s part of a larger composition (e.g. a testimonial inside a Featured product section)
Section order matters. Sections render top-to-bottom in the order shown in the left panel. Drag to reorder — no code, no restrictions.