Using Standard Components in Site Builder
Utilize ready-made elements to jumpstart site creation.
What Is a Component?
A component is a self-contained building block of a site. They are the pieces that make up your website visually, without needing to write code.
Key Characteristics of a Component
- Reusable: you can use the same component in multiple places or pages
- Editable: you can changes text, images, colors, or layout directly in the editor
- Self-contained: Each component handles its own content and styling
List of Standard Site Builder Components
Component Name | Component Description | Example |
Slot | Layout component where other components can be inserted | A page may have slots for a header section and a body section |
Container | Structural component used to group other components together | A header container may contain an image, title, and a button |
Title | Text component for headings | Page titles, section headers, or blog post headings |
Paragraph | Text component for body content | Blog content, descriptions, or informational text |
Button | Clickable component that performs an action or navigates to another page | “Sign up” or “Learn More” buttons |
Image | Component that displays an image from the asset repository | Product photos, icons, or banners |
Video | Component that displays a video from the asset repository | Promotional clips or tutorial videos |
Navbar | A navigation bar based on the site’s structure | |
Breadcrumb | Navigation aid showing the user’s current location within the site hierarchy | Home > Blog > Article Title |
Link | Wrapper component that creates a clickable hyperlink | Social media links or “Read More” text linking to a full article |
Code | Component for displaying or embedding code snippets | <div>Hello World</div> displayed on a blog post or documentation page |
Content List | Dynamic component that displays a list of content items | New items or product listings |
Content Placeholder | Temporary component used to mark where dynamic or future content will appear | Content that displays after clicking on a “Learn More” button from a content list |
Configuring Standard Components
To use a standard component, drag in from the component menu and drop in into the canvas.
When a component is selected, a settings panel appears showing options specific to that component. The available settings vary by component, but commonly include controls for layout and positioning, colors, size, and spacing such as margin and padding.
Did this answer your question?
😞
😐
🤩