Konigle Community

community
Signup for Konigle Login

How to create website components with the Component Builder?

Created on

From your dashboard, go to Website > Component Builder.

Konigle dashboard
Konigle dashboard
Website builder interface
Website builder interface

1. Built-in Tab

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

Search for components
Search for components
Copy component to your 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
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
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
Open a new window to get a preview

5. How 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
Renaming a component

6. How to duplicate and/or a component

Click on the dropdown button > Duplicate and Delete can be found here.

Duplicating or Deleting a component
Duplicating or Deleting a component

7. How 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
Hide or Show a field on a component

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

Component Builder Tutorial

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.