How to create website components with the Component Builder?

How to create website components with the Component Builder?

Access the Component Builder

1. Select the website you wish to edit and go to the Component Builder.

Website builder interface

Features of the Component Builder

1. Built-in Tab

Search and copy website components under the 'Built-in' tab to your components.

Search for components
Copy component to your components

2. Yours Tab

Find all your copied components under the 'Yours' tab and make edits to them here.

Components you have copied

3. Component Styling

  1. Background Colour
  2. Background Image
  3. Font Colour
  4. Italics
  5. Reset Styling
Styling available on the component builder

4. Component Preview

Get a preview of the designed component by clicking on the pop-out icon.

Open a new window to get a preview

5. To rename a component

Select the component you'd like renamed and click on the top left title field. Save after renaming.

Renaming a component

6. To duplicate and/or a component

Click on the dropdown button to duplicate and/or delete can be found here.

Duplicating or Deleting a component

7. To show/hide a field on a component

To show/hide a field on a component, click the eye icon. Fields that have a cancelled out eye are hidden and will not show up on your website.

Hide or Show a field on a component

Here's a video guide on how to create a website component with the Component Builder:

Frequently Asked Questions (FAQs)

What is a component on a website?

In website development, a component acts like a building block, allowing developers to create complex user interfaces by assembling and arranging these components. Some examples include CTAs, Carousel Sliders, Page Hero, etc.

Author

Wen Lin Poh

Digital Gardener

A part-time digital nomad who cultivates a vibrant digital garden on Konigle at thebrainatomy.com. When I'm not exploring new places or tending to my digital blooms, you can find me sharing insights and fostering connections online.