Settings

The Settings for each component are grouped under the Component name in the Block Inspector.

Select required component.
Click Modify in the Toolbar or Block inspector.

The component name can be found at the top left.

Exit Modify Component area

Click "Exit" if you want to leave the Modify Component area.

Modify Name

The Name field allows you to give a suitable name to your component.

Styles

The Styles property allows you to add different style presets to a component.

This means that you can customise the properties that your component contains.

You can rename and reorder your Styles depending on your needs.

"Base" contains the initial component styles and allows to share properties that you wish to be common to all the styles.

Style 1 is applied by default.

At least one Style needs to be added before any styles including Base are displayed in the Design tab when you wish to apply a style on a specific block.

Add

The add property allows you to add a new Style.

To add a Style, click the "+"icon.

Reset

Click the "Reset" icon to reset applied styles.

Remove

Click Remove icon to delete a Style.

Move

The "Move" icon allows you to grab a Style and change its position in the list.

The top Styles preset is applied by default.

Create Style Collection Group

You can create a new collection of styles from Styles in the Block Inspector. You can store, visualise and reorganise your Styles within suitable collections.

This allows you to group styles together.

Once you have created one or more Style Collections, the Style Collection names will appear in the Editor under Styles when you are in Customise.

The Groups contain Styles that are no longer individually accessible from Customise.

If you wish to access individual Styles, you will need to activate the styles individually.

Select a Component.
Select Modify in the Toolbar or Block Inspector.
Click the activate icon next to the style you wish to be available.
The activate icon will turn green.

Now, when you are in Customise, individual Styles that you have activated will be visible and available individually.

Add

Click Add New Style Collection.

This will open a new category, "Style Collections", in the Block Inspector.

You can organise your Style Collections in Groups for easy reference and retrieval.

Remove Style Collection Group

Click the Remove icon to remove a Style Collection Group.

Name

Input suitable Style Group name.

Add Styles

You can add new Styles to your Style Collections.

Click the "+" icon next to the Style Collection to which you want to add new Styles.

Select required Style in the dropdown.

Remove Style

Click the Remove icon next to the Style you wish to remove from a Style Group.

Move Collections

You can drag and drop Style Collections to change their order.

Grab the drag icon next to the Style Collection you wish to move.
Drop where required.

Properties

Properties allows you to add a new Property or a new Group.

Properties you can add to a component include Text, Rich Text, List, Link, Image, Gallery, Video, Icon, Colour, Toggle, Number, Class, ID, Options, Conditions, Visibility, CSS Text.