Home / Designing UI Elements

Adding a UI Element

Customer Success Team

Last updated on Sep 09, 2024

Adding a UI Element in the Design System

You can add a new UI element in Design System. To do so:

  1. Go to Design System > UI Elements.
  2. Click the corresponding UI element you want to add on the left side.
  3. Click + New.
  4. Indicate the element name and select the size from the drop-down list.
  5. Click Save.

Tip: To rename and duplicate the UI element, click the Dotted Menu on the corresponding element, and select the appropriate option. 

Adding a UI Element in Visual Editor

You can add UI elements or select from the existing options in the Visual Editor, to seamlessly design and style your website according to your preferences.

To do so:

  1. Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
  2. Navigate to the Widgets list on the Visual Editor Left Panel.
  3. Type the widget name in the search bar, or expand the corresponding grouping and select the widget you prefer.
  4. Drag and drop the selected widget that serves as a UI element from the list onto the desired crafting area of the Layout Canvas.
  5. Click the widget to activate the Property Panel.
  6. Click the bookmark icon in the top right corner of the Property Panel.

7. Click the plus icon in the top right corner of the UI element panel.

8. Indicate the element name and select the size from the drop-down list.

9. Click Save.

10. Click the newly created UI element on the right-side panel to apply to your website. Once you create the UI element, it is automatically generated in Design System > UI Elements.

Tip: To select the corresponding UI element from the existing options, click the option on the right-side panel.

 

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.