How to create website components with the Component Builder?

Konigle Customer Success

Ensuring customers' journeys are successful on Konigle

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

Konigle Customer Success

Ensuring customers' journeys are successful on Konigle

As subject matter experts of the Konigle website builder, every single customer's journey on Konigle is supported by the CS team so as to ensure success.

Be first to comment

Leave a reply