Sections
Sections are the building blocks of every ClearCMS page. Drag them into the editor to assemble your site. They look the same in the editor and on the published page -- what you see is what your visitors see.
How sections work
- Add a section. Open the section picker in the editor and choose from the library.
- Edit content. Click any text, image, or field directly on the canvas, or use the right-hand property panel to change values.
- Reorder. Drag sections up or down to rearrange the page layout.
- Remove. Delete any section you no longer need.
Every section has editable fields (text, images, lists, toggles, etc.). The property panel shows all fields for the selected section, including repeater lists where you can add, remove, and reorder items.
Browse sections
Filter by category and click any section to see a live preview.
Section categories
ClearCMS ships with 16 built-in sections organized into the following categories:
| Category | Sections | Purpose |
|---|---|---|
| Headers | Hero Split, Hero Centered, Hero Minimal | Page hero areas with headlines, CTAs, and imagery |
| Features | Features Grid, Feature Showcase | Highlight product capabilities and key selling points |
| Social Proof | Testimonials, Logo Cloud, Stats | Build trust with quotes, partner logos, and metrics |
| Pricing | Pricing | Display pricing tiers with feature comparison |
| Team | Team | Showcase team members with photos and bios |
| Contact & FAQ | Contact, FAQ | Collect inquiries and answer common questions |
| Blog | Blog Grid | Display blog posts in a card grid |
| CTA | CTA Banner | Full-width call-to-action banners |
| Navigation | Navbar, Footer | Site-wide navigation and footer |
Field types
Sections use a standard set of field types:
| Type | Description | Example |
|---|---|---|
text | Single-line text | Headlines, button labels, names |
textarea | Multi-line text | Descriptions, bios, quotes |
image | Image upload or URL | Hero images, avatars, logos |
url | Link URL | Button destinations, social links |
number | Numeric value | Prices, ratings |
boolean | On/off toggle | Reverse layout, highlight flag |
array | Repeatable list of items | Features, testimonials, pricing tiers |
Array fields contain item fields that define each entry. In the editor, these appear as collapsible lists with add, remove, and reorder controls.
Tips
- Start with a Hero. Most landing pages follow: hero, features, social proof, CTA.
- Backgrounds alternate automatically between white and light gray for visual rhythm.
- Keep copy concise. Aim for 5-8 word headlines and 1-2 sentence descriptions.
The layers panel (left sidebar) shows every section on your page in order. Click any section name to jump straight to it and open its property panel.
Common layouts
Suggested section combinations for different types of sites.
Marketing site
- Hero Centered or Hero Split
- Features Grid
- Feature Showcase
- Testimonials or Logo Cloud
- Pricing
- CTA Banner
Blog or magazine
- Hero Minimal
- Blog Grid
- CTA Banner
Portfolio or agency
- Hero Split
- Feature Showcase (for case studies)
- Team
- Stats
- Contact
SaaS product page
- Hero Centered
- Features Grid
- Stats
- Pricing
- Testimonials
- FAQ
- CTA Banner
Section-collection compatibility
Some sections can automatically display data from your collections (content types). See the Section-Collection Matrix for a full compatibility table showing which sections work with which collections.