What are components?

A component in Site Designer is a pre-built block of HTML structure and associated styles that you insert onto a page. Instead of building a navigation bar, pricing card, or hero section from scratch every time, you insert a component and customize it in place.

What a component contains

Every component bundles together:

• HTML structure — the markup for the section (containers, headings, images, links, buttons).
• CSS styles — the visual styling already applied via classes.
• Optional JavaScript — some interactive components (carousels, accordions) include the necessary script.

When you insert a component, all of that is added to your page as fully editable HTML and CSS. There is no locked-down “component API” — you edit it just like anything else on the canvas.

One-time components vs. Symbols

This is the most important distinction in Site Designer’s component system.

Regular (one-time) component — When you insert a regular component or save a section as a component, each instance is independent. Editing one copy does not affect other copies on other pages. These are best for sections you want to customize differently per page.

Symbol — A Symbol is a component where all instances are linked. Edit the Symbol once and every instance on every page of your project updates automatically. Symbols are best for elements that appear identically on every page — navigation, footer, cookie banners.

Types of components in Site Designer

Framework components — Components built for Foundation 6, Bootstrap 4, or Materialize. They use the framework’s grid classes and utility classes, so they integrate directly with your chosen framework. Found in the Components panel filtered by framework.

Prebuilt CoffeeCup components — A curated library of sections (heroes, features, testimonials, pricing tables, footers) that work with any or no framework.

Custom saved components — Sections you design yourself and save for reuse across your project. Stored under the My Components tab in the Components panel.

Why components matter

Components accelerate the design-to-publish workflow:

• Consistency — Every instance of a saved component starts from the same baseline structure.
• Speed — Insert a complete nav or pricing section in seconds, then customize it.
• Maintainability — Symbols let you make one change that propagates everywhere, eliminating the tedious task of manually updating the same element on every page.