Components
Components are an important Cwicly feature that allow you create independent, reusable pieces from a single place, while allowing you to consider each piece in isolation.
While templates allow you to produce many different pages from a single source, Components allow you to make many different versions of an element or group of elements without losing control over their structure or the way they behave.
Components allow you to create elements or groups of elements that you can use throughout your site, either as they are or customised to suit your needs. Since you can modify them from a single place you don’t have to revisit each one individually.
This helps maintain a consistent and efficient workflow.
You can reuse components in layouts that have the same content such as headers and footers and forms. Since you can edit them from a single place you can monitor how changes affect each part of that particular component.
Alternately, starting from a component, you can design unique content by modifying repeated layouts with customised text, image or video to give each a unique feel while keeping consistent design quality.
A Component does not need to have a containing wrapper such as a Div.
The Components Tool Bar contains Customise and Modify options which are specific to Components. It is important to understand the difference between these two options.
Customise allows you to customise the specific entity of the component that you want to customise. This means that other components with the same design will not be modified if you are in the Customise option.
- Select a component.
- In the Component Toolbar, select the "Customise" option.
Modify allows you to modify the component source itself so that any changes you make to a component in "Modify" mode, will change all the components, that is, the source.
The user role will determine access to and control over the contents of a particular Component.
- Select the component you wish to modify.
- In the Component Toolbar, select the "Modify" option.
- Or in the Block Inspector click "Modify Component".
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.
- Click "Exit" if you want to leave the Modify Component area.
- The Name field allows you to give a suitable name to your component.
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.
The add property allows you to add a new Style.
- To add a Style, click the "+"icon.
- Click the "Reset" icon to reset applied styles.
- Click Remove icon to delete a Style.
The "Move" icon allows you to grab a Style and change its position in the list.
The top Styles preset is applied by default.
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.
- 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.
. 
- Click the Remove icon to remove a Style Collection Group.
Input suitable Style Group name.
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.
- Click the Remove icon next to the Style you wish to remove from a Style Group.
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.
St
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.
- In the Component settings, find Properties and click the "+" icon.
- Find Property you wish to add in the dropdown and click to open Component Properties modal.
- Drag the "Move" icon to reorder your Properties.
- Alternately, you can move them to a new Group you have created.
- To add a new name, select Group name and input a name of your choice.
- Click the "New Group" icon to create a new Group.
- You can change the position of the Groups as required by Grabbing the "Move" icon.
The Component Properties Modal allows you to modify your existing properties and to create new ones.
- The Component Properties Modal opens when you click the "+" icon to add a new property.
You can also activate the modal by clicking the Component Properties Modal.
- Select a suitable block.
-
- Also, the Component Properties modal will open when you click a property.
The right hand panel of the Component Properties modal allows you to configure the selected property. The options available will depend on the type of property selected.
- Open the Component Properties modal.
- Select a property.
- Configure as required depending on property type.
Each Property have three tabs: Settings, Layout and Usage.
The Settings tab allows you to configure the general settings of the Property selected. This includes Name, Default text, Placeholder text, Canvas Placeholder text and selecting whether the Type is simple (static) or advanced (dynamic).
Allows you to personalise the Layout of a property display such as Hide Label and Top Label.
Hide Label: allows you to show or hide a label.
Top Label: allows you to place the label above.
The default layout is Label next to text Field.
This property allows you to show/hide the label as required.
- Select Layout in the Property modal.
- Toggle on Hide Label.
- The label is now hidden.
This property allows you display the label above the text field.
- Open Layout tab in Property modal.
- Toggle on Top Label.
- The Label now appears above the text field.
. 
This property lets you know how many entities you are connected to and which ones.
- Open the Usage tab in the Components Properties modal.
- The modal will display how many entities are connected and where they can be found.
- If you hover over the entity in modal, you can locate it on the page.
The Component Properties Icon panel allows you to select and display a certain type of property such as text, rich text, link, icon etc.
- Open the Component Properties modal.
- Find the Component Properties Icon panel at the top left.
- Select the Property type you wish to display, such as text.
- The Text Properties you have created will be displayed in the Properties list to the bottom left.
If no properties have been created under a particular type, no properties will be displayed.
If you unselect everything in the Component Properties Icon panel then all your properties will be displayed.
To speed up your workflow, you can also add a new property directly from the Component Property modal.
- Open the Component Properties modal.
- Click the "+ New" button at the bottom of the left hand column.
The Text Property allows you to configure a text property.
The Rich Text Property allows you to add rich text to a component, such as bold, italic, underline or strikethrough.
The List Property allows you to add a list to a component. Input required information such as Name, Default, Placeholder, Canvas Placeholder.
The Link Property allows you to configure your button property. You can input a Name and choose a simple or advanced button type. Choose a Layout as required. Choose between Static and Advanced (static and dynamic) data.
The Image Property allows you to configure your image property. You can input a Name and choose a simple or advanced image type.
The Gallery Property allows you to add a Gallery to a component, to name it, choose the data type and adjust layout and usage.
The Icon Property allows you to configure your icon property. You can input a Name and choose a suitable icon.
The ColourProperty allows you to configure a colour property. You can input a Name, decide whether it should be responsive or not and choose a suitable default colour.
The Toggle Property allows you to configure a toggle state for boolean values. This means that the icon property can be shown or hidden for any property that only has two possible states (true/false).
You can input a suitable Name, and decide whether it should be shown or hidden or left unselected.
The Number Property allows you to configure a number property such as font size, padding, width etc.
You can input a Name, decide whether it should be responsive or not, Default value, minimum, maximum or step.
You can also toggle "With Unit" on or off if you want to specify a unit.
The Class Property allows you to configure a single (or multiple) class property(ies).
You can input a Name and decide whether a Class should be added to the selected component by default or not.
The Options Property allows you to add specific additional styles to a component other than numbers and colours.
You can input a Name, set a default style and set options for the default as required .
- Open the Components Properties modal.
- Select the Options Property you wish to configure.
- In the right hand panel, input Name.
In order to create a default style, you need to set the required options.
- Click the "+" icon to choose an option for your default style.
- This will add two fields, an Option field and a Value field as well as a bin icon if you wish to delete it.
- Input required style option property, in the example below direction.
- You can change the order of the options as required by dragging the icon.
+
- Click the bin icon to delete an option.
- Now you can choose a Default for your Options Property in the dropdown, for example, Row or Column direction.
- For example, the Option Property we have created allows us to customise a particular component and choose to display our elements in a Row or Column direction as required.
The Conditions Property allows you to add Conditions to a component.
- Open the Components Properties modal.
- Select the Component Property you wish to configure.
- In the right hand panel, input a suitable Name.
- The Conditions property can be customised by opening the Conditions modal and adding the required conditions.
After adding a new Property, it is necessary to connect it to your Component for it to be attached.
- Select a Component.
- Either select "Modify" in the toolbar or "Modify Component" in the Block Inspector.
This option may not be available if access to modification has been restricted by the Administrator (User Role).
The Component is now open in the Navigator with all the blocks it contains.
- Select the block to which you want to attach a Component Property.
- Click the "Connector" icon in the Block Inspector to connect the Component Property to the selected element.
- Select the required Component Property you previously created in the Connector dropdown.
- If you want to change some of the Property settings, click the Component property to open the Componenet Properties modal.
- You can now select a component block and customise individually as required.
- Select a suitable block.
- Right click and open the Create Component modal.
- Input a suitable Name and click "Create".
- Open the Component panel to view where the component has been created.
- You can find all your created Components here and search for them using the searchbar.
- Select the block where you want to insert the Component.
- Find the Component you want to insert in the Component panel.
- Click to insert.
Modify allows you to modify the component source itself so that any changes you make to a component in "Modify" mode, will change all the components, that is, the source.
- Select the component you wish to modify.
- In the Component Toolbar, select the "Modify" option.
- Or in the Block Inspector click "Modify Component".
- You can modify the name of your component. This will modify all the components.
- You can modify certain properties of your component by selecting a property in the dropdown.
- For example you could select "Image".
- Enter a suitable name for your image.
- Choose Type : simple (static) or advanced (dynamic).
- Let's choose simple.
- Select the Image in the navigator and then click the component icon in the Primary tab and the Source tab of the Block Inspector.
- Select "Manager Image" in the dropdown.
- It should look like this.
- Click Team Card to go back to customise your image.
- Choose an image.
- In this case we have selected the second image.
- Click "Select".
- The new image will appear in the appropriate component without affecting the other images.
- Select the final component image to be customised.
- You will notice that you are already in the right place to change the image.
- Select required image.
Now let's modify the Title of the other two components.
- Select Team Card and click "Modify Component" in the block inspector.
- Alternatively, select the "Modify" option in the Toolbar.
- Click "+" icon to open the properties dropdown.
- Select "Text" to open the Component Properties modal.
- Modify Name, Default and Placeholder as required.
- It is not necessary to input in these fields.
Select the Text you wish to modify in the Navigator.
In the Primary tab and the Component settings tab, click the "Content" field to open the Component Properties modal.
- Ensure that you are on the text name and click "Connect" to be able to customise the Component title.
- Click "Team Card" to be able to input your text.
- In the Block Inspector, input required name in the Text field.
- As you can see, this affects only the current component not all of them.
- With the second component selected, input suitable text.
- And ditto for the first component.
Now let's modify the function.
- Select the component to by modified and either click "Modify" in the toolbar or click "Modify Component" in the Block inspector.
- Click the "+" sign to open the Properties dropdown.
- Select Rich Text to open the Component Properties modal.
We could have chosen just Text but Rich Text gives us the possibility of adding rich text (bold, italic, underline, strikethrough) to all or selected parts of our text
Input property name (Title) into the Component Properties modal Name field.
- Select "Title" in the navigator.
- In the Primary tab and the Component settings tab, click the Content field to open the Component Properties modal.
- Input a suitable Name.
- Make sure that the right property is selected and click "Connect".
- You will now see that it is connected.
- Click on Team Card to return to the modification area.
- Input suitable title for the component. You can add rich text as required.
- Select next component.
- Input required title.
- Select last component and input required title.
Last modified 5d ago