Prebuilt components
Site Designer ships with a large library of ready-made page sections for Foundation 6, Bootstrap 4, and Materialize. Each component is a polished starting point — insert it, swap in your content, and adjust the styles.
Finding prebuilt components
- Click the Components icon in the toolbar to open the Components panel.
- At the top of the panel, use the framework filter to show components for Foundation, Bootstrap, Materialize, or all frameworks.
- Browse the category list on the left side of the panel (Navigation, Heroes, Cards, Features, Testimonials, Pricing, CTA, Forms, Footers, and more).
- Hover over any component to see a thumbnail preview.
Available categories
| Category | What you get |
|---|---|
| Navigation | Sticky navbars, off-canvas menus, centered logos, hamburger menus |
| Heroes | Full-width banners, split layouts, video backgrounds, minimal text heroes |
| Cards | Feature cards, team cards, blog post cards, pricing cards |
| Features | Icon + text grids, alternating image/text rows, icon lists |
| Testimonials | Quote carousels, multi-column testimonial grids, star-rating layouts |
| Pricing | Two-column, three-column, and toggle (monthly/annual) pricing tables |
| CTA | Full-width banners, inline CTAs, newsletter sign-up strips |
| Forms | Contact forms, multi-step forms, login/sign-up forms |
| Footers | Minimal, multi-column, dark, and light footer variants |
How framework components differ
Foundation components use Zurb’s grid (row, columns, small-12 medium-6) and Foundation’s utility classes. They integrate seamlessly when your project uses Foundation 6.
Bootstrap components use Bootstrap’s grid (container, row, col-md-6) and Bootstrap’s component classes. They are best for Bootstrap 4 projects.
Materialize components follow Google’s Material Design principles and use Materialize’s class system and JavaScript components.
Inserting a prebuilt component
- Find the component you want in the panel.
- Drag it from the panel onto the canvas.
- Drop it at the position where you want it — between existing sections or at the top/bottom of the page.
The component inserts as fully editable HTML and CSS. The canvas immediately reflects the component with its default styles.
Editing after insertion
After insertion, treat the component like any other page content:
- Click any text to edit it.
- Click images to replace them.
- Select any element and use the Style pane to change colors, spacing, fonts, or layout.
- Delete elements you don’t need.
- Duplicate elements to add more items (for example, more pricing columns or more cards).
