# About Cwicly
The ultimate toolkit that takes Gutenberg by WordPress to the next level and makes it become a professional drag & drop website builder.
Design & create professional responsive websites in minutes.
Introducing the ultimate WordPress & Gutenberg toolkit. A toolkit that allows you to create and edit high-end professional responsive websites with ease.
Check out the [**Cwicly Gutenberg Toolkit**](https://cwicly.com/?utm_source=wp-admin-about\&utm_medium=link\&utm_campaign=readme).
### The native way
This is the next step to effortless and powerful website design. Whether you're a web designer, developer or just like the rest of us, looking to create your dream website with tools that integrate **natively** within WordPress, look no further.
### Performance. Speed of light load times.
Gutenberg was created by the WordPress team and provides great, snappy speeds for easy design in the back-end. On the front-end, Cwicly takes no-code websites to a new level by creating human-readable code that performs incredibly well.
Say goodbye to hours of tweaking to get your website up to speed, you won't need it with Cwicly.
### Ultimate control. Ease of design.
Never again will you hope you'd chosen a different template, or that you wish you could create a different layout for your blog posts. With Cwicly, you can control every aspect of your website's design, from the front page to the error page passing by the archive and post templates.
The design options follow simple & intuitive concepts that will help you all along your creative journey.
### Hundreds of ready-made templates awaiting
Whether you use our blocks and templates to create your own custom web pages or prefer using our ready-made templates, Cwicly offers more than 150+ templates and sections professionally created for instant use.
With a simple click from inside the Gutenberg editor, you can easily import the designs that suit your creativity.
### Revolutionary dynamic features
Cwicly natively integrates with WordPress and [**ACF**](https://www.advancedcustomfields.com/) to provide you with the best experience when designing your websites and blogs. You can create complex dynamic templates without ever leaving the Gutenberg editor nor entering any code.
Build your dynamic content designs effortlessly with the help of Cwicly.
### Responsive & Agile
Cwicly provides you a powerful way of managing different device sizes with custom viewport settings. Manage multiple settings for a single property and visually modify pseudo-classes with ease.
Cwicly takes the guess work out of designing, while making your website extremely fast & agile.
# Beginner's Guide
# Install Cwicly
Before you can get down to creating with Cwicly, you need to upload the Cwicly plugin and Cwicly theme. The licence keys are now automatically installed.
## Download Cwicly
* Navigate to your [Cwicly dashboard](https://cwicly.com/dashboard).
* Select your Order.
* Download the plugin.
{% hint style="info" %}
You do not have to download the theme as it is included with the Cwicly plugin.
{% endhint %}
## Install the plugin
* Find Plugins in the dashboard menu.
* Click "Add New".
* Click "Upload Plugin" button.
* Choose Cwicly Plugin file.
* Click "Install Now".
* Click "Activate Plugin".
# Getting Started
# Overview
If you are new to Cwicly, the Getting Started guide will help you navigate the basics and set up your installation.
Once you have installed the plugin, you will be taken directly to the Getting Started page.
This open a useful guide to help you install your theme, choose your settings, explain the basics (Site Editor, WordPress, Cwicly Settings, Themer), and show you where to find Documentation, Support, Discourse and the Cwicly Cloud Design LIbrary.
Just below the Cwicly Logo at. the top of the page, you will find 5 tabs so that at any stage you can refer to a section that interests you. These are: Getting Started, Install Theme,
* Make sure that the "New to Cwicly" section is selected.
* Click the "Get Started" button.
If you wish to return at any time simply find Cwicly in the Dashboard and open the Getting Started tab.
* Navigate to the Dashboard and open the Cwicly tab.
* Open the "Getting Started" tab.
## Install Theme
It's time to choose a theme. By default the WordPress theme is installed.
We recommend you choose the Cwicly Theme. At any time you can come back and change your theme.
* Select the Cwicly Theme.
Now you are all set up!
* Click the Next button to take you to The Settings Page.
# Settings
This section allows you to personalise Basic settings.
You can change these at any time from their respective panels.
## Basics
The Basics settings allow you to add a Site Icon, a Title and add a Tagline.
### Site Icon
This allows you to personalise your site by adding a Site Icon or Favicon.
* Click Site Icon to upload your Icon.
* Click Select File or Drop file to upload.
* Select required site icon.
* Click "Open".
* Make sure the icon is selected and click "Use this image".
### Site Title
This allows you to add the name of your website or brand to your site.
* Input website or brand name into Site Title field.
### Site Tagline
The Site Tagline allows you to add a short description or slogan.
* Input short description or slogan into Site Tagline field.
## Cwicly
The Cwicly settings allow you to add a Google Maps API and to toggle Gutenberg Styles (toggled on by default).
### Google Maps API
This allows you to add a Google Maps API to include Google Maps features and functionality.
* Input your Google Maps API into the Google Maps API field.
### Remove Gutenberg Styles
You can choose to remove or not remove Gutenberg Styles. By default, Remove Gutenberg Styles is toggled on.
* Toggle Remove Gutenberg Styles as required.
## Editor
The Editor settings allow you to enable the Cwicly Quick Inserter and to choose the mode of the Editor( Inherit, light, Dark).
### Quick Inserter
The Cwicly Quick Inserter toggle allows you to enable or disable the Cwicly Quick Inserter which allows you to add blocks to your page swiftly without having to delve into the Block Inserter.
By default, the Cwicly Quick Inserter is hidden.
* Toggle Quick Inserter as required.
### Editor Mode
Editor Mode allows you to determine the mode of the Editor, such as System Inherit, Light or Dark.
By default, Editor Mode is set to System Inherit.
* Choose required mode in the Editor Mode dropdown.
* Click "[Next](broken://pages/kQvcEuoqNluFsShlsCmd)" to continue to the "Beginner's Guide".
# Edit and Manage your Site
## **Design using the Site Editor**
* Find "Appearance".
* Click Editor.
## Edit your Posts and Pages
### Edit Posts
* Find Posts in the WP Dashboard Menu.
* Click "Add New" button.
### Edit Pages
* Find Pages in WP Dashboard Menu.
* Click "Add New" button.
## **Add Conditions and Manage Custom Templates**
The Cwicly Themer is a control panel where you can visually manage your main pages, templates, global parts and settings.
By default, you will find an initial Index template but you can add more templates by clicking add new custom or default template.
* Find Cwicly in WP Dashboard.
* Open Themer.
* Click Edit button.
# The WordPress Dashboard
For more information :[ WordPress Dashboard](https://wordpress.com/support/dashboard/)
When you login to WordPress, you land here, in the WordPress Dashboard.
This is the control panel for your entire website where you can access, create and manage all your content and functionalities.
# The Dashboard Menu
On the left hand side of the Dashboard, you will find the Dashboard Menu where you can navigate through the different available options, for example: Home, Updates, Posts, Media, Pages, Comments, Appearances, Plugins, Users, Tools, Settings, Custom Fields, Cwicly.
# Site Editor
This is where all the controls for building your website can be found, including WordPress Navigation, Cwicly Cloud Design, Library, Block Inserter, Tools, Scaling, Dynamic preview, Cwicly Global Styles, Settings, Options, Cwicly Navigator, Cwicly Quick Inserter.
They are regrouped into a WordPress Navigation icon, a Top Bar and a Quick Inserter.
## **Site Editor Navigation**
You can find the Site EditorNavigation icon at the top left corner of the editor.
The Site Editor Navigation allows you to toggle between:
* The Dashboard
* Your Site
* Templates
* Template Parts
## Quick Inserter
The Cwicly Quick Inserter allows you to swiftly add blocks to your page without having to delve into the Block Inserter.
{% hint style="info" %}
The Cwicly Quick Inserter needs to be activated to be visible in the editor.
{% endhint %}
* To do this, open the Cwicly Role Editor tab in the Dashboard.
* Find Cwicly Quick Inserter.
* Toggle the Quick Inserter on to add it to the editor.
{% content-ref url="/pages/DtSBCkYGQ2xTcBDNVdQz" %}
[Broken mention](broken://pages/DtSBCkYGQ2xTcBDNVdQz)
{% endcontent-ref %}
The Quick Inserter should now be visible as a Left Sidebar.
### Cwicly Cloud Design Library
The Design Library is a cloud based resource with infinite possibilities where you can design, share and exchange your creations.
* Navigate to the Sidebar.
* Click Design LIbrary icon to open.
{% content-ref url="/pages/bRUlrGAldiUwfcYOMXvo" %}
[Cloud Design Library](/cwicly/cloud-design-library)
{% endcontent-ref %}
### **Components**
The Components feature allows you to create independent, reusable pieces from a single place, while allowing you to consider each piece in isolation.
{% content-ref url="/pages/8kccaOGGrlFPkKF5Zoqu" %}
[Components](/cwicly/components)
{% endcontent-ref %}
### **Navigator**
The Navigator Cwicly makes it a pleasure to navigate through even the most complex structures.
Unlock the navigator for greater flexibility.
Show/hide elements for design purposes (eye icon).
* In the Quick Inserter find the Navigator icon.
* Click to open.
{% hint style="info" %}
This is the navigator we strongly recommend when using Cwicly.
{% endhint %}
{% content-ref url="/pages/wWkMiolucBgXEv2y1t3n" %}
[Navigator](/cwicly/navigator)
{% endcontent-ref %}
### **Cwicly Blocks**
The Block Inserter groups commonly used blocks.
By default, these are: section, div, columns, heading, paragraph, button, image, icon.
You can personalise the Quick Inserter by adding other blocks you use often by clicking the ‘+’ icon at the bottom of the page.
* Click the block you require in the Block Inserter to add it to your page.
* To add new blocks to the Block Inserter, click the "+" icon at the bottom of the page.
* Input the block name and click to add.
{% content-ref url="/pages/UJa4K1smP2lgv8xq0F7C" %}
[Quick Inserter](/cwicly/quick-inserter)
{% endcontent-ref %}
## Top Bar
The Top Bar regroups the Block Inserter toggle,
### **Block inserter**
The Block Inserter allows you to add new blocks to your page.
Exclusive Cwicly blocks are listed first as Cwicly Blocks and show the Cwicly logo.
The usual Gutenberg blocks are available under Text, Media, Design, Widgets, Theme Embeds.
* In the Top Bar, find the Block Inserter Toggle.
* Toggle to open the blocks modal.
* Search for and select the required block.
### **Tools**
Tools is a Gutenberg feature for selecting, navigating and editing blocks.
### **Undo**
Undo is a useful property that allows you to undo the previous action in a single click.
* In the Tool Bar, click the Undo arrow to undo the previous action.
### **Redo**
Allows you to redo the last action you undid.
* In the Tool Bar, click the Redo arrow to redo your last action.
### **Document Overview**
This is a Gutenberg List view that allows you navigate through the different blocks on your page.
{% hint style="info" %}
The Cwicly navigator is more complete and allows greater flexibility and control.
{% endhint %}
### **Name Field (Post or Page)**
If you are in the Page or Post Editor, the Name Field shows the name of your Page or Post and allows you to input or modify a name.
* From the Page or Post Editor, locate the Name Field in the Top Bar.
* Input or modify name as required.
### Editor template Field (Template)
If you are in the Template Editor, the Editor Template Field displays your current Template such as Index, Front Page, Cart etc.
* From the Template Editor, locate the Editor Template Field.
* The Field displays the current Template.
* To navigate between templates, select the desired template in the list.
### **Responsive Selector**
The Responsive Selector allows you to select the screen size you want to work with when editing your designs in the Editor.
3 screen sizes are available: Desktop, Tablet & Mobile.
{% hint style="info" %}
When a specific screen size is selected, all modifications made to responsive properties will affect the selected screen size.
{% endhint %}
{% content-ref url="/pages/-MVb9YyYupw4ti0Pz\_4y" %}
[Responsive Selector](/gutenberg/responsive-selector)
{% endcontent-ref %}
### **Pseudo classes and elements (hover)**
This allows you to navigate easily between different states of the selected element such as: Hover, Focus, Active, Before, After.
{% content-ref url="/pages/5d2gGJlp4Gvcrsm47mVJ" %}
[Pseudo Classes/Elements](/design/pseudo-classes-elements)
{% endcontent-ref %}
### **Canvas Scaling**
The scaling property can be used to change the scale of the editor preview to accommodate more or less screen space.
{% hint style="info" %}
Exclusively available for desktop view.
{% endhint %}
* Find the Canvas Scaling icon in the Top Bar.
* Set Width and Scale as required. These can be linked or unlinked.
{% content-ref url="/pages/HpYBulGER01Ber1W82Rv" %}
[Scaling](/cwicly/scaling)
{% endcontent-ref %}
### **Dynamic Preview**
Allows you to display content from a dynamic source and not use the current source currently provided by WordPress.
{% hint style="info" %}
Useful in cases like editing Templates and Template Parts, that don't provide any context.
{% endhint %}
{% content-ref url="/pages/VS91lSyceVgOSBBUL3yx" %}
[Dynamic Preview](/cwicly/copy-paste/dynamic-preview)
{% endcontent-ref %}
### **Switch to Dark Mode**
A toggle is provided so that you can easily switch between light and dark modes.
* In the Editor, navigate to the Tool Bar.
* Click the Light/Dark Mode toggle to switch between Light and Dark modes.
{% content-ref url="/pages/tYe3u6uxRsQJgzXuego1" %}
[Dark Mode](/global-styles/global-styles/dark-mode)
{% endcontent-ref %}
## **Gutenberg Preview**
* A Wordpress functionality that allows you to choose between desktop, tablet and mobile view.
{% hint style="info" %}
Cwicly Responsive Settings are generally more useful for improved workflow.
{% endhint %}
### View Post/Page
View PostPage/ allows you to view your Post or Page on the Front End.
* In the Top Bar, click the View Post/Page icon to view your Post or Page on the Front End.
### Update
Allows you to save your changes.
* In the Top Bar, click the Update button to update your page and save your changes.
### **Settings**
Settings allows you to display/hide the Block Inspector right sidebar where you can customise and edit your template and block settings.
* In the Top Bar, toggle Settings to display/hide the Block Inspector.
### **Cwicly Global Styles**
Cwicly Global Styles displays/hides a right sidebar where you can customise your global styles, global classes and stylesheets
This gives you quick access to global styles.
* In the Top Bar, toggle the Cwicly Global Styles toggle to display/hide the Cwicly Global Styles panel.
### **Gutenberg Global Styles**
Gutenberg Styles allows a limited global customisation of blocks.
{% hint style="info" %}
Cwicly Global Styles provides you with a better user experience.
{% endhint %}
* Navigate to the Site Editor.
* Click the Gutenberg Global Styles icon to open the Gutenberg Styles panel.
### **Options**
Options opens a selection of additional tools and settings including Cwicly Global Settings and Show/Hide Cwicly Modal.
* Click the Options icon in the Top Bar to open the Options side bar.
# Create your Front Page
# Front Page
To set up a template from scratch, we need to add a Front Page template.
The Home Page displays your site's homepage, whether it is set to display latest posts or a static page.
The Front Page template takes precedence over all templates.
* In the Dashboard, open the Cwicly Themer.
* Open "+ Default" to open a list of choices.
* Click "Add New Template".
* Click "Front Page".
* Choose the Cwicly Post Content block.
* The Front Page now displays the Post Content block you have added.
In order to view the posts that have been added to the Front Page, you need to view it from the Front End.
* Click the "View" icon in the Top Bar and select "View Site" in the dropdown.
Depending on the content of your Post(s), the site should now look something like this.
We will now create a Global Header and Footer that will automatically be added to each page.
{% content-ref url="/pages/jWYIfaIdkHIa7LYYBk1k" %}
[Header](/beginners-guide/create-your-front-page/header)
{% endcontent-ref %}
{% content-ref url="/pages/6o7ksrbndvzonj79vPCM" %}
[Footer](/beginners-guide/create-your-front-page/footer)
{% endcontent-ref %}
# Header
# Header Template Part
The header is designed in the Themer so the first thing we need to do is to locate the Cwicly Themer in the Dashboard.
## Open Themer
* Navigate to the Dashboard.
* Find Cwicly and open the Themer.
## Add Header Template Part
Next, we need to add a Header Template Part.
* Open Parts.
* Find "header" and click the Edit icon to to edit the header template part.
## Site Editor
This opens the Site Editor where you can design or import a Header (Navigation) from the library.
The footer should now look something like this.
## Save
Remember to Save your header.
* Click the "Save" button in the Top Bar.
## View
To view your site, navigate to the Dashboard and click the "View Site" icon.
The Front End should now look something like this, with a header and content.
# Structure
## Placement
The Header is generally situated at the top of the page.
## Contents
The Header should include a logo or brand, a menu, a CTA (Call to Action) (Desktop view).
It is also useful to include a hamburger menu for tablet and mobile navigation.
# Footer
* Find the Cwicly Themer in the WP Dashboard.
* Open Global Parts.
* Find Global Footer.
* Select footer in the dropdown menu.
* Click Edit to open the Global Footer in the Editor.
* [Design](broken://pages/TK2Ry2kZtREjZcLnOySG) or import a Footer from the library.
* We will go into more detail about this later.
* Below is the footer we will [design together](broken://pages/TK2Ry2kZtREjZcLnOySG) to add to our Front Page.
##
# Footer Template Part
The footer is designed in the Themer so navigate to the Cwicly Themer in the Dashboard.
## Open Themer
* Navigate to the Dashboard.
* Find Cwicly and open the Themer.
## Add Footer Template Part
Next, we need to add a Footer Template Part.
* Open Parts.
Find "footer" and click the Edit icon to to edit the footer template part.
## Site Editor
This opens the Site Editor where you can design or import a Footer from the library.
The footer should now look something like this.
## Save
Remember to Save your footer.
* Click the "Save" button in the Top Bar.
## View
To view your site, navigate to the Dashboard and click the "View Site" icon.
The Front End should now look something like this, with a header, content and a footer.
# Structure
## Placement
The footer is usually situated at the bottom of the page.
## Contents
A footer may contain : information about your business, landing page links, basic menu (navigation), legal information, social icons, a call to action, a search bar, contact information.
# Block ID
The Block ID property gives a unique identifier to your block.
It can act as a named anchor. You can therefore create an anchor link that takes you to the desired element
It can also act as an identifier for Cwicly to allow targeting the block for specific actions
{% hint style="info" %}
The Block ID attribute must be unique to the page. A block can only have one Block ID.
{% endhint %}
## Find Block ID
* Select a block
* Open the Block Inspector
* Find ID field.
* Click ID tab.
* The field will now show the Block ID.
## Create block ID
{% hint style="warning" %}
The Block ID for the selected block should always be unique. Multiple identical Block IDs in a page will invalidate your website.
{% endhint %}
Whenever you insert or create a block, a unique Block ID is automatically created and applied to the element.
That's it! Cwicly doesn't rely on user ID creation, preferring to have a unique ID created for every block.
## Modify block ID
{% hint style="info" %}
IDs must start with a letter
IDs should be descriptive
IDs must not contain space characters
{% endhint %}
Since IDs are specific to each block, modifying their name will have to be done via the block they are related to.
### Rename
* Select a block.
* Double click the Block ID name in the field.
* Input new name as required.
{% hint style="info" %}
Make sure that the new name is unique.
{% endhint %}
## Remove a block ID
Since Block IDs are bound to a specific block, removing that block will automatically remove the Block ID from your website.
{% hint style="info" %}
Make sure to remove any link that contains the block ID before removing it from your website.
{% endhint %}
## Remove Classes and IDs
The Remove Classes and IDs toggle ensures clean markup for optimised performance. There is no point in having both ID and class applied on markup if they are not being used or targeted (ID javascript and anchoring).
By default, Cwicly shows all classes and IDs but this the Remove Classes and IDs toggle can be toggled on from the Cwicly Advanced Settings. A class will automatically show when styles are applied to the block.
Global classes added are automatically updated without needing to refresh
* Open Cwicly Settings in the WordPress Dashboard.
* Find Cwicly Optimisations in the Advanced Settings tab.
* Toggle on Remove Classes and IDs.
## Show/Hide ID
A Show/Hide toggle is provided to allow you to have the class/ID appear on the frontend even if there are no styles applied to the block.
This is because block classes and IDs don’t appear by default on the frontend.
Only when styles have been added at the block level will the class will appear.
If you already have styles applied, toggling the class won’t do anything.
* In the Block Inspector, navigate to the Block ID.
* To the right of the Block ID field, toggle on the "Dot".
When it is toggled on, the dot becomes green.
An indicator next to ID indicates that the ID has been applied.
# Breakpoints
Breakpoints are the building blocks of responsive design.
Custom breakpoints allow you to define specific points in your design where the layout adjusts to ensure optimal viewing on different devices. Cwicly makes this process incredibly intuitive and flexible.
By default, Cwicly ships with 3 breakpoints. Desktop which is the base breakpoint, Tablet and Mobile.
## Switch Views
To switch from one breakpoint to another, you can either hover and click or click and drag from the edge of the canvas.
### Responsive Selector
The Responsive Selector allows you to change breakpoints from the top bar of the editor.
* In the editor, find the Responsive Selector icon in the top bar .
* Hover and click the required breakpoint in the dropdown.
### Drag Visualisation
The drag visualisation offers a real-time preview of your website to explore and control full responsiveness.
* In the editor, hover over either edge of the canvas.
* A drag icon and bar will appear.
* Drag canvas to required breakpoint.
## Width Presets Bar
To know where you are at all times, the width presets bar shows the current breakpoint and the canvas width.
* With the Drag Visualisation in use, find the Width Presets Bar at the top of the canvas.
* The current breakpoint and canvas width are displayed.
### Resize Canvas
Additionally, hover and click to resize your canvas to commonly used screen sizes.
* Find the Width Presets Bar at the top of the canvas.
* Hover and click the required breakpoint/canvas size.
## Snap to Breakpoint
The snap to breakpoint property allows you to resize your canvas to commonly used screen sizes.
* Click the transition point to snap the canvas to the breakpoint’s largest width.
## Breakpoint Information
Information about the breakpoint and its transition point is available at the edge of the current breakpoint.
## Breakpoints Manager
The Breakpoints Manager allows you to customise your breakpoints. It also lists all the currently available breakpoints on your installation and displays its icon, name, transition point and status.
### Open
* To open, hover over the breakpoints selector in the Responsive Selector.
* Click to open the Breakpoints Manager.
{% hint style="danger" %}
When modifying breakpoints, remember to regenerate your block and global class CSS.
{% endhint %}
{% content-ref url="/pages/9qqF0PCajidPtGoH3sUJ" %}
[Regeneration](/settings/regeneration)
{% endcontent-ref %}
### Icon
The Icon for each breakpoint is displayed to the left of the name.
### Name
The breakpoint name is displayed after the Icon.
### Transition Point
The Transition Point is the maximum width at which the breakpoint applies.
### Status
The Status icon indicates whether a breakpoint is active or not.
* Find the Breakpoint you wish to enable or disable.
* Toggle the Status icon as required.
{% hint style="info" %}
The Status indicator does not apply to the default Breakpoints shown below.
{% endhint %}
### Base Tag
The base tag indicates that properties applied to this breakpoint will automatically apply to all screen sizes.
Cwicly automatically sets the correct min-width and max-width media queries for each breakpoint depending on the position of the base tag.
## Modify
A Breakpoint can be modified from the Breakpoints Manager. You can modify the Icon, the Name, whether the Base is enabled or not, the Width, the Editing Width.
* Open the Manager.
* the Breakpoint you wish to modify.
* Click the Modify icon in the Breakpoints Manager to open the Modify Breakpoint modal.
### Base
When you set a new base breakpoint, Cwicly will automatically convert the above breakpoints to min-width media queries.
* Open the Manager
* Click the Modify icon next to the breakpoint you wish to define as Base.
* Toggle Base as required.
### Icon
You can modify the Icon associated with a breakpoint.
* Open the Manager
* Click the Modify icon next to the required breakpoint.
* Select required Icon.
### Name
You can modify the Name associated with a breakpoint.
* Open the Manager
* Click the Modify icon next to the required breakpoint.
* Input new Name.
### Width
You can modify the transition point Width associated with a breakpoint.
* Open the Manager
* Click the Modify icon next to the required breakpoint.
* Input new Width.
### Editing Width
You can modify the Editing Width associated with a breakpoint.
This allows you to specify the canvas width you wish to snap to while editing the breakpoint.
* Open the Manager
* Click the Modify icon next to the required breakpoint.
* Input new Editing Width.
### Modify Button
The Modify Button allows you to apply the changes you have made to a breakpoint.
* Open the Manager
* Click the Modify icon next to the required breakpoint.
* Modify as required.
* Click the Modify Button to apply the changes.
## Add New Button
The Add new buuton allows you to create a new breakpoint. In the Add Breakpoint modal, you can specify the Icon, Name, transition point Width, the Editing Width.
* Click the "+ Add New" button in the Breakpoints manager to open the Add Breakpoint modal.
* Specify an Icon, Name, Width and Editing Width as required.
* Click the Create Button to apply.
The newly created breakpoint will now be listed in the Breakpoints Manager.
## Remove
A breakpoint can be removed using the Breakpoints Manager.
{% hint style="info" %}
Note that the Default Breakpoints cannot be removed.
{% endhint %}
* Open the Breakpoints Manager.
* Click the Modify icon next to the breakpoint you wish to remove.
* Click the Bin icon to remove.
## Import/Export
If you wish to import or export all breakpoints, use the copy/paste icons.
{% hint style="info" %}
Please note that importing breakpoints will override your existing breakpoints.
{% endhint %}
## Custom CSS Breakpoints
If you wish to add your own custom CSS to specific breakpoints, you can use the media breakpoint shortcuts.
These shortcuts are smart and will automatically update the breakpoint width value according to your current settings.
* To add a property to a specific breakpoint:
* Select a block.
* In the Block Inspector, open the Advanced tab.
* In the CSS window, start typing "media".
* A selection of breakpoints will appear, select as required.
* Add required styles.
Whenever your breakpoint width changes, your custom css reflects the changes.
## Role Editor and Breakpoints
If you wish to, you can hide the Gutenberg Responsive Icon and Width Presets.
### Gutenberg Responsive Icon
The preview/responsive toggle provided by the Gutenberg team can be toggled off to avoid confusion.
* Navigate to the Role Editor.
* Toggle Gutenberg Responsive Icon as required.
### Width Presets
Width presets allow you to rapidly change the width of the canvas to match common device sizes.
* Navigate to the Role Editor.
* Toggle Width Presets as required.
{% content-ref url="/pages/T4himCdLTyG6iFTdCHkD" %}
[Gutenberg Editor](/themer/role-editor/gutenberg-editor)
{% endcontent-ref %}
## Keyboard Shortcuts
To switch between breakpoints quickly and efficiently.
* Hold CTRL + the breakpoint order integer (1, 2, 3 etc.)
## Force iFrame
Gutenberg does not trigger iFrame mode when certain conditions are not met. For a more fluid design experience, force iFrame mode for the selected post types (Posts, Pages, Patterns).
{% content-ref url="/pages/3KQErZ7OcerOv4lUT7q8" %}
[Force iFrame](/themer/role-editor/force-iframe)
{% endcontent-ref %}
## Client Canvas View
The base breakpoint will be used as the default view inside the Editor but for writing content you might want to choose a specific breakpoint.
For instance if the base breakpoint is mobile, you can set the breakpoint of posts to desktop.
{% content-ref url="/pages/273fzTRKJzlJtZ5rEOKf" %}
[Client Canvas View](/themer/role-editor/client-canvas-view)
{% endcontent-ref %}
# Class
{% hint style="info" %}
You can apply the same class to as many elements as you want across your website. They will all share the same style properties.
{% endhint %}
## Toggle ID/Class
* Select a block
* Open the Block Inspector
* Find ID/Class field.
* Click ID/Class to Toggle ID.
* The field will now show the Class ID.
## Block Class
{% hint style="warning" %}
The class name for the selected block should always be unique.
{% endhint %}
Whenever you insert or create a block, a unique class is automatically created and applied to the element.
That's it! Cwicly doesn't rely on user class creation, preferring to have a unique class created for every block.
## Edit Class
### Rename
You can rename a block class to something more meaningful that relates to the block.
{% hint style="info" %}
* Class names must start with a letter
* Class names should be descriptive
* Class names are case-insensitive: "cwicly" = "CWICLY"
* Class names should use hyphens for phrase/compound words
{% endhint %}
* Select a block.
* Find class field.
* Double click class name.
* Input new name.
{% hint style="info" %}
Make sure to choose a name that is unique and relates to the block.
{% endhint %}
### Remove a class
Since classes are bound to a specific block, deleting that block will automatically remove the class from your website.
{% hint style="warning" %}
Make sure no blocks are using the class in the Virtual Class field before removing the block containing the class you want to remove.
{% endhint %}
## Remove Classes and IDs
The Remove Classes and IDs toggle ensures clean markup for optimised performance. There is no point in having both ID and class applied on markup if they are not being used or targeted (ID javascript and anchoring).
By default, Cwicly shows all classes and IDs but this the Remove Classes and IDs toggle can be toggled on from the Cwicly Advanced Settings. A class will automatically show when styles are applied to the block.
Global classes added are automatically updated without needing to refresh
* Open Cwicly Settings in the WordPress Dashboard.
* Find Cwicly Optimisations in the Advanced Settings tab.
* Toggle on Remove Classes and IDs.
## Styles Indicator
By default, class does not appear on the front end.
However if styles are applied to the block specifically, the class will appear on the front end.
* This is indicated by a small dot after the class
## Show/Hide Class
A Show/Hide toggle is provided to allow you to have the class/ID appear on the frontend even if there are no styles applied to the block.
This is because block classes and IDs don’t appear by default on the frontend.
Only when styles have been added at the block level will the class will appear.
If you already have styles applied, toggling the class won’t do anything.
* In the Block Inspector, navigate to the Block Class.
* To the right of the Block Class field, toggle on the "Dot".
When toggled on, the dot becomes green.
An indicator next to ID indicates that the ID has been applied.
{% content-ref url="/pages/upN2xryqdW2pahdOruNW" %}
[Global/Block Classes](/cwicly/classes-and-ids/global-block-classes)
{% endcontent-ref %}
# Global/Block Classes
This feature allows you to have an overview of all the classes available on your installation (global classes) or those available on a specific page (block classes).
The information is accessible in an instant from the Classes Modal.
## Classes Modal
* Click the "+" Icon under the Classes field in the Block Inspector to open the Classes Modal.
### Searchbar
You can find the class you require by inputting part or all of the required class name into the search-bar.
This will show the class as either Global or Block-specific.
* Open the Classes Modal by clicking the "+" sign under the Classes field.
* Input part or all of the class you are searching for.
### Styles Preview
If you hover over a particular class, you will be able to visualise the styles that will be applied to your block. This will be Global or Block specific depending on whether the class is Global or Block specific.
* Open the Classes modal.
* Hover over a Global or Block class to visualise the styles that could be applied.
### Select a Class
When you click on a class, the styles will be automatically added to your block and the the class name will be added next to Modal opening icon ("+").
* Select a block.
* Click "+" icon to open the Classes modal.
* Find required class and click to add it to your block.
* Visualise class name next to "+" icon.
{% hint style="info" %}
Global classes will be shown in green.
Block classes will be shown in purple.
{% endhint %}
### Visualise Classes in Modal
To make it easier to know which classes have been applied to a block, both Global and Block-specific, applied classes are highlighted in the Classes modal in green (global) or purple (block).
* Open Classes Modal by clicking "+" icon.
* Scroll through Global and Block classes to see which ones are applied to the selected block.
* Added classes will appear in alphabetical order under the current block class for easy reference.
* The current block class is identified by a "dot" icon to the right of the class name.
### Create a Global Class
The Create property allows you to add a new Global class to your block that can be styled as required.
{% hint style="info" %}
Created classes are always global.
{% endhint %}
* To create a new class, input a unique name into the search field of the Classes modal and click "Create".
{% hint style="info" %}
So that you know when a class is selected, the border becomes darker.
{% endhint %}
### Create a Block Class
It is possible to create a block specific class and not one that will be applied globally.
* Input required block name into the Class field in the Classes modal.
* Press Shift/Enter to create a block class.
### Remove a Class
Classes can be removed in two ways, directly from the block inspector or from the classes modal.
#### Remove from the Block Inspector
* Hover over the class to be removed.
* A "X" icon will appear.
* Click "X" to remove.
#### Remove from the Classes Modal
When you hover over a class in the Classes modal, a "X" icon appears. When clicked, it removes the class from the current block.
{% hint style="info" %}
With a Global class, this will remove the class from the current block alone but will not delete the class permanently.
{% endhint %}
* Hover over class to be removed in the Classes modal.
* Click "X" icon to remove class.
#### Delete a class permanently
If you wish to delete a Global class from your installation and not just from the current block, you can do so from the Classes modal.
* Hover over the class to be deleted and click the "trash" icon.
* This will remove the class permanently from your installation.
### Copy a Class
This allows you to copy a class directly from the Classes modal to save time and improve your workflow.
* Hover over class to be copied in the Classes modal.
* Click "copy" icon to copy class.
### Paste Styles
This allows you to paste copied styles wherever you require.
* Hover over the class to which you wish to add copied style.
* Click "Paste Styles" icon.
* PasteStyles using keyboard shortcuts.
### Stay Open
The "Stay Open" toggle allows you to keep the classes modal open for as long as you require. Otherwise, by default, the classes modal will close as soon as you perform another action.
* Find the "Stay open" trigger.
* Toggle on to allow the classes modal to remain open.
* Toggle off to close the classes modal.
### Re-position Classes modal
The Classes modal can be moved to the location that is most convenient for your workflow.
* Grab and drag Classes modal and move to desired location.
### Resize Classes modal
Th width of the Classes modal can be increased or decreased as required.
* Find "Width" icon at the bottom right corner of the Classes modal.
* Drag to required size.
### Quick Editor (Global Classes)
The code of a selected Global Class can be edited directly from the Class.
* Hover over the Global Class you want to edit using the Quick Editor.
* Click Quick Editor icon to open the Quick Editor modal.
# Cloud Design Library
Introducing a whole new concept in visual Site Building .
A cloud based resource with infinite possibilities. Design, exchange, share, and sell all your creations in a community-based atmosphere. Creating has never been so easy.
{% content-ref url="/pages/gZHUIArUaQxdcmHtJZ45" %}
[Create an Account](/cwicly/cloud-design-library/create-an-account)
{% endcontent-ref %}
In order to be able to save your styles and designs to the Cwicly Cloud , make sure to create an account.
{% content-ref url="/pages/4ZagmqGLcmZ1RhullcTl" %}
[Overview of the Cloud Dashboard](/cwicly/cloud-design-library/overview-of-the-cloud-dashboard)
{% endcontent-ref %}
The Cloud Dashboard is where you update your profile and control access to your libraries and creations.
{% content-ref url="/pages/qHPMaz5ou8fDpZ5rWNig" %}
[Editor: Cloud Library](/cwicly/cloud-design-library/editor-cloud-library)
{% endcontent-ref %}
You can access the Cwicly Design Libraries by default without a Cwicly cloud account from the Gutenberg Editor. However to be able to edit or upload you will need to make an account.
{% content-ref url="/pages/q2urCelPCaOrBvKwjiSo" %}
[Design Blocks: Cloud Library](/cwicly/cloud-design-library/design-blocks-cloud-library)
{% endcontent-ref %}
Design Blocks include template parts, buttons, compositions, decorative elements, wireframes etc.
{% content-ref url="/pages/FMpVSpAXyj0dEodV0gOM" %}
[Library Globals](/cwicly/cloud-design-library/library-globals)
{% endcontent-ref %}
Library Globals are the Globals that you have saved and include Styles, Classes, Stylesheets and External Classes.
{% content-ref url="/pages/WrwThBpU2m32mzRTxVlR" %}
[Library: Global Styles](/cwicly/cloud-design-library/library-globals/library-global-styles)
{% endcontent-ref %}
This is where Global Styles such as Colours, Typography, Elements and Settings are saved.
{% content-ref url="/pages/MfIXFIpWpbyUEotfw9We" %}
[Library: Global Classes](/cwicly/cloud-design-library/library-globals/library-global-classes)
{% endcontent-ref %}
This is where Global Classes, sets of styles that are grouped together and given a name, are saved.
{% content-ref url="/pages/J7D9B8m01lHQvkjkiTkn" %}
[Library: Global Stylesheets](/cwicly/cloud-design-library/library-globals/library-global-stylesheets)
{% endcontent-ref %}
This is where Global Stylesheets are saved.
{% content-ref url="/pages/SEkjmvTnwRyJfGyfs9e4" %}
[Library: External Classes](/cwicly/cloud-design-library/library-globals/library-external-classes)
{% endcontent-ref %}
This is where External Classes are saved.
# Create an Account
In order to be able to save your styles and designs to the Cwicly Cloud , make sure to create an account.
Then you will be able to build your personal libraries.
Go to [design.cwicly.com](https://design.cwicly.com/libraries/)
If it is your first visit, you will need to register.
So click Register.
Add a Username.
The Username you create will appear in any element you add to a library as “Design block name by Username”.
Enter your email.
Click “Register”.
Check your Email and click the first link.
This will take you to a password or you can generate one.
Remember to click Save Pasword to save the password you want.
It will say “Your password has been reset.”
Now log in by clicking the “Log in” link.
Add the Username you created.
Input the generated password.
Click log in.
This will take you to the Cwicly Cloud Design Library dashboard.
# Overview of the Cloud Dashboard
The Cloud Dashboard is where you update your profile and control access to your libraries and creations.
There are 3 tabs:
Profile, to add personal information.
Libraries, to create, share and control access to your libraries and creations.
Logout, where you logout of the cloud.
## Personal Details
Click the Profile tab and input your personal information (optional).
This is where you can personalise the name that appears for your Designs.
Click submit to save your details.
## Libraries
Click Create Library in the Dashboard to start.
You can create as many libraries as you wish.
A modal will appear.
Input the name of your library and click Create Library.
This displays 3 columns on the right:
### Name
Name: the name of your library.
### Public Keys
This is where you copy or regenerate your Public keys.
Public Keys are only useful for sharing.
Public keys allow users to visualise and import your designs.
But they cannot edit or delete your designs from the library.
To do this Private keys are required.
### Private Keys
This is where you copy or regenerate Private Keys.
They will always look blurred for privacy reasons.
Private Keys give full access and editing powers over your designs to you or the user you share the keys with.
You will use Private keys most of the time when you are designing and editing.
### Design Library Settings
Further to the right, you will see some settings icons.
#### Edit
Edit, allows you to edit the name of your library.
Simply delete your current name, input a new name and click "Modify Library".
#### Access Keys
You can generate public access keys to give users access to your library and you can withdraw these at any time to control user access.
Click "New Access Key" to generate as many keys as you require.
You can copy the Keys or delete them using the icons.
#### Download .zip
Allows you to download your entire library as a compressed file.
#### Delete Library
Allows you to delete your entire library.
{% hint style="info" %}
Be absolutely sure before you click the delete icon as it will not ask you again.
{% endhint %}
# Editor: Cloud Library
You can access the Cwicly Design Libraries by default without a Cwicly cloud account from the Gutenberg Editor. However to be able to edit or upload you will need to make an account.
{% content-ref url="/pages/RaIS0lvc7AI7cJ3T6kQ0" %}
[Access from the Editor](/cwicly/cloud-design-library/editor-cloud-library/access-from-the-editor)
{% endcontent-ref %}
{% content-ref url="/pages/dEfOd4UJHCFExGdRdieT" %}
[Add a Library](/cwicly/cloud-design-library/editor-cloud-library/add-a-library)
{% endcontent-ref %}
{% content-ref url="/pages/iioBKlhJB0PC7Rx2RnDZ" %}
[Switch between Libraries](/cwicly/cloud-design-library/editor-cloud-library/switch-between-libraries)
{% endcontent-ref %}
{% content-ref url="/pages/s4zmfieXXr4oLdpvVVOr" %}
[Default Library](/cwicly/cloud-design-library/editor-cloud-library/default-library)
{% endcontent-ref %}
{% content-ref url="/pages/8d961nq93uvZGfS3G3rB" %}
[Download Library](/cwicly/cloud-design-library/editor-cloud-library/download-library)
{% endcontent-ref %}
{% content-ref url="/pages/iLUrwRWv35N2ULq6XXKH" %}
[Remove Library](/cwicly/cloud-design-library/editor-cloud-library/remove-library)
{% endcontent-ref %}
{% content-ref url="/pages/rMdWLObTuT99aD0gkDC0" %}
[Categories](/cwicly/cloud-design-library/editor-cloud-library/categories)
{% endcontent-ref %}
# Access from the Editor
To access the Cwicly Design Library, click the Cwicly logo in the upper left header bar.
You will see two Buttons, “Add Library” and “Cwicly” at the top left.
To close the Design Library, click the "X" icon, upper right.
##
# Add a Library
The "Add Library" button allows you to add a new library using a key generated at [design.cwicly.com](https://design.cwicly.com/libraries/)
Paste the copied key using CTRL V on your keyboard.
Toggle on “is a private key” if your key is private.
Cwicly needs to know if the key is public or private.
Click “Connect” to add your new library.
You should now see your library name at the end of the dropdown when you click the Cwicly button.
# Switch between Libraries
You should now see your library name at the end of the dropdown when you click the Cwicly button.
You will notice that the Cwicly logo has disappeared and your library name is there instead.
The current library is displayed here.
### Current Library
The Current Library button displays which library you are in.
By default you have access to the Cwicly library and the Community library. As you add other libraries, they will appear in the dropdown.
# Default Library
To make a library your default library, simply click the Default icon to the right. The icon of the current default library will become blue.
# Download Library
To download your library, simply click the Download .zip. icon. This will download your Library as a compressed file.
# Remove Library
The remove icon deletes the Library from the library collection but does not remove it from the dashboard.
If you want to remove it forever, go to [design.cwicly.com](https://design.cwicly.com/libraries/)
# Categories
To the left is a list of all the categories of Design Blocks available in the Design Library. This is always accessible and partly visible on the left hand side even when a category is open.
Make sure that the Library you want to consult is displayed in the Library Selector on the right. If not, click the button and choose the library you want from the dropdown.
IMAGE
{% hint style="info" %}
Remember to set your favourite library as the default.
{% endhint %}
## Categories
When you open a category, you will see a thumbnail of each Design Block available in that category.
{% content-ref url="/pages/qlQFU6HdQ2s6yVr2WoLQ" %}
[All](/cwicly/cloud-design-library/editor-cloud-library/categories/all)
{% endcontent-ref %}
{% content-ref url="/pages/xN3PwqzoPjFxIL8Hr1L1" %}
[Popular](/cwicly/cloud-design-library/editor-cloud-library/categories/popular)
{% endcontent-ref %}
{% content-ref url="/pages/p0ZXwnogEy8cq4gvrIaK" %}
[Button](/cwicly/cloud-design-library/editor-cloud-library/categories/button)
{% endcontent-ref %}
{% content-ref url="/pages/FikluuMpIRg2cvuDr2SP" %}
[Composition](/cwicly/cloud-design-library/editor-cloud-library/categories/composition)
{% endcontent-ref %}
{% content-ref url="/pages/DxGQC2prEaecTOT7MzMY" %}
[Decorative](/cwicly/cloud-design-library/editor-cloud-library/categories/decorative)
{% endcontent-ref %}
{% content-ref url="/pages/pyWb4TDw3NXVEUE0yLPr" %}
[Interactive](/cwicly/cloud-design-library/editor-cloud-library/categories/interactive)
{% endcontent-ref %}
{% content-ref url="/pages/vWyIDaK9VoGGjnQBk6Xw" %}
[Layout](/cwicly/cloud-design-library/editor-cloud-library/categories/layout)
{% endcontent-ref %}
{% content-ref url="/pages/XTAQp1J8CH4FcF4KdRrL" %}
[Media](/cwicly/cloud-design-library/editor-cloud-library/categories/media)
{% endcontent-ref %}
{% content-ref url="/pages/o3eAUMTQTtNasI96YxXj" %}
[Menu](/cwicly/cloud-design-library/editor-cloud-library/categories/menu)
{% endcontent-ref %}
{% content-ref url="/pages/kAzqK1GzxFE7qpN6HkTZ" %}
[Social](/cwicly/cloud-design-library/editor-cloud-library/categories/social)
{% endcontent-ref %}
# All
All The ‘All’ category contains all the Design Blocks available in the Cwicly Design Library. If you are in a different Library, obviously there will be different Design blocks.
# Popular
This contains the Design Blocks that are the most used in general.
If you are looking for trending blocks, this is the place to come.
 
# Button
The Button category provides you with a comprehensive selection of button design blocks for every occasion, including rounded, square, gradient, hover effects etc.
And if you cannot find exactly what you want, as with all Cwicly blocks you can redesign them with absolute freedom.
The button blocks are designed with no set width so as not to set any restrictions for the user.
 
# Composition
The Composition category includes useful design blocks to add to your site including: Hero, About, Services, Team, Testimonials, FAQs, Features, Pricing, CTAs, Footers etc.
These ready made components can save you time, but remain completely flexible if you want to alter the slightest detail, a Cwicly feature!
 
# Decorative
The Decorative category includes useful notions to add to your design, such as :lines, shapes, etc.
 
# Interactive
The Interactive category includes design blocks that allow the user to interact with them, such as: accordions and tabs.
These are already set up to save time and design energy and simply require the finishing touches, some imaginative customisation.
 
# Layout
The Layout category includes useful design blocks set up for dynamic content, such as Query blocks.
{% hint style="info" %}
The Layout blocks will take the dynamic content of your posts, so make sure you have set up your posts first.
{% endhint %}
 
# Media
The Media category includes photos, styled photos, videos, galleries and placeholders.
 
# Menu
The Menu category contains a comprehensive selection of vertical, horizontal and hamburger menus for diverse occasions.
As usual, these can be freely styled.
{% hint style="info" %}
Remember to set up your menu beforehand.
{% endhint %}
{% content-ref url="/pages/EjUmfgryqmEqTuWG4NFg" %}
[Broken mention](broken://pages/EjUmfgryqmEqTuWG4NFg)
{% endcontent-ref %}
 
# Social
The Social category contains some styled media buttons with pre-defined effects such as: hover, share reveal etc.
 
# Design Blocks: Cloud Library
Design Blocks include template parts, buttons, compositions, decorative elements, wireframes etc.
{% content-ref url="/pages/McXJpr3zhqMFpMBBJlkR" %}
[Search for a Design Block](/cwicly/cloud-design-library/design-blocks-cloud-library/search-for-a-design-block)
{% endcontent-ref %}
{% content-ref url="/pages/pxnQWHfWhUlrHwgEzVfl" %}
[Refresh](/cwicly/cloud-design-library/design-blocks-cloud-library/refresh)
{% endcontent-ref %}
{% content-ref url="/pages/i29SAQurf8ISUxH0RtQy" %}
[Add Design Block](/cwicly/cloud-design-library/design-blocks-cloud-library/add-design-block)
{% endcontent-ref %}
{% content-ref url="/pages/budWrad7IK8BBCV8opCo" %}
[Save Design to Library](/cwicly/cloud-design-library/design-blocks-cloud-library/save-design-to-library)
{% endcontent-ref %}
{% content-ref url="/pages/8NL8EWlMWcXImyMvHAhl" %}
[Remove Design Block](/cwicly/cloud-design-library/design-blocks-cloud-library/remove-design-block)
{% endcontent-ref %}
# Search for a Design Block
Design Blocks include template parts, buttons, compositions, decorative elements, wireframes etc.
You can search through the designs:
Visually.
By name.
By tag.
By style.
By category (for buttons, composition, media, menu, templates)
## Visually
By scrolling through the thumbnails.
## By name
By the name or part of the name of the Design Block you want to open.
## By tag
The group that the Design Block belongs to, such as bank, hospital, cafe.
### By Style
Such as minimal, dark, elegant.
### By Category
When searching for buttons, composition, media, menu, templates.
# Refresh
The refresh button will update your Design Blocks so if you do not see a block that you have uploaded, don't hesitate to refresh using the button to the right of the "Current Library" button.
# Add Design Block
To add a design block to your page, simply select the category you want on the left, and then [search](/cwicly/cloud-design-library/design-blocks-cloud-library/search-for-a-design-block) through the design blocks in the panel either visually, by search, by tag, by style or by category.
When you find something suitable, simply click on the block to add it to your page.
You can immediately customise your design block with absolutely no restrictions, as if you had built it from scratch yourself.
After a few clicks:
##
# Save Design to Library
Whether you have built your block from scratch, have downloaded it from the Cwicly design library or the Community, you can save your block to the Cloud Library as long as you have created an account at [design.cwicly.com](https://design.cwicly.com/libraries/).
Click the "cloud" icon in the toolbar.
This will open a panel entitled “Add to Design Library” at the top.
Add a name (and a short description - optional).
Choose the category to which you want to add your block design.
Add some tags and styles from the drop downs to make it easier to search for your design later.
You can personalise the featured image if you want to.
Gallery allows you to add some screenshots to your gallery.
Viewpoint width: modifies the scroll thumbnail view.
Attach global styles: you can choose whether or not to attach the global styles you have used in the design block if you want to.
Insertable: means the block can be inserted inside a block on the page. By default it is toggled on.
Community: toggle on if you want to share the design block with the community.
Then click the blue button “Save to Library” at the top.
This will open a window where you can choose which library you want to save to.
If you want to add a new library for your design, click the "+" icon.
To add it to a different library (another account), simply add a Private Key and click “Connect”.
The new library will now appear.
You will now find your modified block design in the library and categories you have saved it to.
You will notice that with personal designs, if you hover on the top right corner you have the possibility of editing your design, downloading as a TXT file or deleting it.
The name of your design will appear at the bottom as well as the username you have chosen as creator.
##
# Remove Design Block
Design blocks can be removed by simply selecting the block and clicking the bin icon in the toolbar.
# Library Globals
Underneath the Categories, you will find the Globals:
Styles
Classes
Stylesheets
External Classes
# Library: Global Styles
You can save your Global Styles such as Colours, Typography, Elements and Settings to the Cloud LIbrary where you can store, share and reuse them from any installation.
{% content-ref url="/pages/kmxgqmnSpxigM858ErWJ" %}
[Library: Add Styles ](/cwicly/cloud-design-library/library-globals/library-global-styles/library-add-styles)
{% endcontent-ref %}
{% content-ref url="/pages/nZWNoCqfVAp3FOejsyQV" %}
[Installation: Add Styles](/cwicly/cloud-design-library/library-globals/library-global-styles/installation-add-styles)
{% endcontent-ref %}
{% content-ref url="/pages/0I6qScfFtW9IodzN4QYM" %}
[Library: Style Settings](/cwicly/cloud-design-library/library-globals/library-global-styles/library-style-settings)
{% endcontent-ref %}
# Library: Add Styles
To add your Global Styles to the Library, open the Global Styles tab.
Right click the Icon of either the Colours tab, Typography tab or Elements tab. They all open the same modal and import all Global styles to your library.
Click "Save Global Styles to Library". All the Global Styles(colours, typography, elements) on your installation will be added to the Library.
Add a name for your collection.
You can add a short description (optional)
Select a style.
You can add a featured image (optional) from your computer by clicking the "+" icon.
Toggle on "Community" if you want to share your collection with the community. Otherwise leave it off.
Next, click "Save to library".
This opens up a new panel on the left.
Select the library to which you want to add your Styles.
You will see a message appear at the bottom left of the page "Success! My Colours was saved to GloSty." This confirms that your Colours have been saved correctly.
If you want to create a new library for your Global Styles, click "+".
Then enter a new Private Key generated at [design.cwicly.com](https://design.cwicly.com/libraries/).
Your Global Styles should appear in your Library under Styles.
If not, click the “Refresh” icon to refresh.
# Installation: Add Styles
You can add Global Styles from the Cloud Library to your installation.
Open the Library in which the Global Styles you want to add are saved.
Select one or more Global Styles that you want to add.
Click anywhere in the container to add the styles you have selected to your installation.
If you now open your Global Styles you will see that the ones you selected have been added.
Colours:
Typography:
Elements:
# Library: Style Settings
You can edit, download or delete a collection of Global Styles by clicking the settings to the above right of the container.
# Library: Global Classes
Global Classes are sets of styles that are grouped together and given a name. They can then be applied to elements that will immediately take on the styles of the Global Class.
Global Classes are useful if you want to apply the same set of styles to multiple elements.
{% content-ref url="/pages/jpQG428m70DB6vf7z1At" %}
[Library: Add Classes](/cwicly/cloud-design-library/library-globals/library-global-classes/library-add-classes)
{% endcontent-ref %}
{% content-ref url="/pages/YE91AtQQibxblm1BYhmY" %}
[Installation: Add Classes](/cwicly/cloud-design-library/library-globals/library-global-classes/installation-add-classes)
{% endcontent-ref %}
{% content-ref url="/pages/cTom6QQdAFfluypJQJeE" %}
[Library: Class Settings](/cwicly/cloud-design-library/library-globals/library-global-classes/library-class-settings)
{% endcontent-ref %}
# Library: Add Classes
To add your Global Classes to the Design Library:
Go to the Classes and Stylesheets tab.
Right click the Global Classes tab to bring up a modal.
Click the cloud icon (Save all Classes to Library).
This takes you to the Global Classes Design Library where you can add details about the collection of classes you have saved.
Input name, style, featured image (optional), and whether you wish to share your Global Classes with the community.
ç
Then Click "Save to Library" to save your collection.
Click the name of the library to which you want the collection added.
If you wish to create a new library, click on the "+" icon.
You should see a notification appear at the bottom left to confirm that the save was successful.
To view your new collection of Global Classes, open the library, click on Classes and you should see the thumbnail.
If it is not there, click the refresh button to the right.
##
# Installation: Add Classes
You can add Global Classes from the Cloud Library to your installation.
Open the Library in which the Global Classes you want to add are saved.
Click within the container to add the Global Classes to your installation.
Choose whether to add the saved Classes to the Classes already on your installation or replace them.
You should now see your added Global Classes in the Global Classes tab (Global Classes and Stylesheet tab).
# Library: Class Settings
You can edit, download or delete a collection of Global Styles by clicking the settings to the above right of the container.
# Library: Global Stylesheets
The Cwicly Cloud Design Library lets you save and share your global stylesheets.
{% content-ref url="/pages/wKPZV0MP1JdaRJPycgmh" %}
[Library: Add Stylesheet](/cwicly/cloud-design-library/library-globals/library-global-stylesheets/library-add-stylesheet)
{% endcontent-ref %}
{% content-ref url="/pages/cV4fuiocmOZLAE2Mw7q2" %}
[Installation: Add Stylesheet](/cwicly/cloud-design-library/library-globals/library-global-stylesheets/installation-add-stylesheet)
{% endcontent-ref %}
{% content-ref url="/pages/9KXknuEyqjmWdyHerb2D" %}
[Library: Stylesheet Settings](/cwicly/cloud-design-library/library-globals/library-global-stylesheets/library-stylesheet-settings)
{% endcontent-ref %}
# Library: Add Stylesheet
Open the Global Classes and Stylesheets tab.
Right click on the Global Stylesheets icon to bring up a modal.
Click the cloud icon, "Save all to Library" which will bring you to the Design Library menu.
Fill out the name you want to give to your collection, choose a style, and a Featured image( optional).
Toggle on or off the community button depending on whether or not you want to share your Global Stylesheets with the community.
Then, click "Save to Library".
Choose which library you want to add your collection to.
If you want to create a new library, click on the "+" icon.
A notification at the bottom will confirm that your stylesheet have been successfully saved.
To view your saved Global Stylesheets, open the Design Library.
Navigate to Stylesheets.
You should see the thumbnail of your new collection.
If not, click the button to refresh.
##
# Installation: Add Stylesheet
You can add Global Stylesheets from the Cloud Library to your installation.
Open the Library in which the Global Stylesheet you want to add is saved.
Click within the container to add the Global Stylesheet to your installation.
Choose whether to add the saved Classes to the Classes already on your installation or replace them.
You can see them added in the Global Stylesheets tab (Global Classes and Stylesheets tab).
# Library: Stylesheet Settings
You can edit, download or delete your Global Stylesheets by clicking the settings to the above right of the container.
# Library: External Classes
{% content-ref url="/pages/w9qnWB9bNvGH6ff2cujc" %}
[Library: Add External Classes](/cwicly/cloud-design-library/library-globals/library-external-classes/library-add-external-classes)
{% endcontent-ref %}
{% content-ref url="/pages/yY1iuNcJJZ1CwheIK0f2" %}
[Installation: Add External Classes](/cwicly/cloud-design-library/library-globals/library-external-classes/installation-add-external-classes)
{% endcontent-ref %}
{% content-ref url="/pages/oOPT3IlinQcX9JlsccSy" %}
[Library: External Classes Settings](/cwicly/cloud-design-library/library-globals/library-external-classes/library-external-classes-settings)
{% endcontent-ref %}
# Library: Add External Classes
Open the Global Classes and Stylesheets tab.
Right click the alien icon (External Classes) to open the save modal.
Click the cloud icon to "Save all to library".
This opens the Design Library.
Input the External Classes name you wish to give to the collection.
Add a style, featured image (optional)
And whether you wish your collection to be shared with the community or not.
Then click "Save to library" to save your collection to the Cloud Library.
You should see a notification appear on the bottom left to confirm that it was correctly saved.
To view your new collection in the Cwicly Cloud Design Library, open the library and External Classes.
If you cannot see your new collection, refresh.
# Installation: Add External Classes
You can add Global External Classes from the Cloud Library to your installation.
Open the Library in which the Global External Classes you want to add is saved.
Click within the container to add the Global External Classes to your installation.
Choose whether to add the saved External Classes to the External Classes already on your installation or replace them.
To visualise the External Classes you have added, open the External Classes tab.
# Library: External Classes Settings
You can edit, download or delete your Global External Classes by clicking the settings to the above right of the container.
# Community Library
The Community Library is where you can upload and share your designs to the Cwicly Community.
Without you and your contributions, there would not be a community. When you share, you encourage others to share and everybody benefits.
So we thank you in advance for all your design contributions and look forward to seeing what you come up with.
Make sure that you have created an account at [design.cwicly.com](https://design.cwicly.com/libraries/).
{% hint style="info" %}
Cwicly allows you to add a URL to your profile so that if users click on your name they will be redirected to the link provided by you
{% endhint %}
All Cwicly clients are eligible to submit their designs - pending approval - to the Cloud Library (link).
{% hint style="info" %}
Please check out our Design Submissions Guide before submitting. You will find helpful information on what and how to submit.
{% endhint %}
## Save to Community Library
{% content-ref url="/pages/zedDV8PaLrBCUZgywuHf" %}
[Save to Community Library](/cwicly/cloud-design-library/community-library/save-to-community-library)
{% endcontent-ref %}
## Download from the Community Library
{% content-ref url="/pages/Q9fqqVCaQctp24IqBeuA" %}
[Download from Community Library](/cwicly/cloud-design-library/community-library/download-from-community-library)
{% endcontent-ref %}
## Remove a Design from the Community Library
{% content-ref url="/pages/nT5ksTIPzjhBQRyJKE79" %}
[Remove from Community Library](/cwicly/cloud-design-library/community-library/remove-from-community-library)
{% endcontent-ref %}
## Set Community Library as default
{% content-ref url="/pages/74sUyRR319ow8dIA2QO2" %}
[Set Community as default](/cwicly/cloud-design-library/community-library/set-community-as-default)
{% endcontent-ref %}
# Save to Community Library
Once you are happy with your design and have followed the Design Submissions Guide, it is time to add your design to the Community Library
* In the Editor, click the Cwicly Logo to open the Cloud Design Library.
* Click to open the Active Library button.
* Choose Community in the dropdown.
* This will open the Cloud Community Library.
* The name "Community" will now be displayed as the active library.
* Click the "cloud" icon in the toolbar.
* This will open the "Add to Design Library" window.
* Add a name (and a short description - optional).
* Choose the category to which you want to add your block design.
* Add a tag, one that best describes your design.
* Add a style, one that best describes the style of your design.
* You can personalise the featured image if you want to.
* Gallery allows you to add some screenshots to your gallery.
* Viewpoint width: modifies the scroll thumbnail view.
* Attach global styles: you can choose whether or not to attach the global styles you have used in the design block if you want to.
* Insertable: means the block can be inserted inside a block on the page. By default it is toggled on.
* Ensure that the community button is toggled on.
* Then click the blue button “Save to Library” at the top.
## Design Approval
The design you uploaded to the Community library go through an informal approval process to ensure that they follow the Cwicly Community Guidelines.
Once your design has been approved, your design will appear in the Community Cloud Library in the category to which you assigned it.
# Download from Community Library
* To add a design block to your page from the Community Library, open the Community Library as your active library.
* Select the category you require on the left, and then [search](/cwicly/cloud-design-library/design-blocks-cloud-library/search-for-a-design-block) through the design blocks in the panel either visually, by search, by tag, by style or by category.
* When you find something suitable, simply click on the block to add it to your page.
### Modify your Downloaded Community Design
* You can immediately customise the community design block, as if you had built it from scratch yourself.
* After a few clicks:
* When you are happy with the modifications, click the "Cloud" icon on the toolbar.
* This opens the Add to Design Library window.
* Click "Save to Library" and save your modified design to the library of your choice.
# Remove from Community Library
If you no longer wish to share one of your designs with the Community, either:
* Modify and delete your design, or
* Untoggle "Community" in the "Save to Library" window.
* This will remove your design from the Community Library.
# Set Community as default
To set the Cloud Community Library as your default library, click on the "default" icon in the "Active Library" dropdown.
# Colour Picker
The Cwicly Colour picker is an advanced precision tool designed to make colour management easier.
It associates a standard donut type colour picker with other features designed to save time and open up a scope of possibilities.
## Open
* Select a suitable block.
* In the Primary or Design tab of the Block Inspector, open the Colours tab.
* Click the colour chip next to the property to which you wish to add or adjust a colour or gradient (Link, Background, Text, Overlay).
* The Colour modal is now visible.
## Close
* Click the "X" icon or click away to close the Colour modal.
## Selection Area
The Selection Area allows you to adjust and select desired colour values.
It can be manipulated by dragging the circle with the mouse.
* Open the Colour modal.
* Click and drag the donut to find a suitable colour.
* The selected colour is automatically applied to the canvas.
## Eyedropper
An eyedropper Tool is available to make it easy to sample colours from your canvas and then re-use as required**,** in the background, text etc.
* Open the Colour modal.
* Click the eyedropper icon to activate the eyedropper.
* Locate and click the required colour on the canvas.
## Toggle Sliders
HSL and RGB sliders are available to meticulously select the exact shade.
A "Toggle Sliders" toggle is available to display the SL(Saturation and Lightness) or GB(Green Blue) if required.
By default, only the Hue slider of the HSL process is displayed.
In addition, the a(alpha) channel is displayed by default under the H(or R) slider.
### Toggle on SL or GB.
Most of the time the Hue(H) slider is all that is required if you are working with HSL.
Depending on your needs, additional sliders are easily toggled on.
When the "dot" has no colour, you are in default HSL mode
* Open the Colour modal.
* Click the "dot" between the Eyedropper and the Sliders.
* Additional sliders are now be visible.
## Hue Slider
By default, the Hue(H) slider is displayed above the Alpha slider as it is a time-saver method and convenient to use if you want to avoid colour theory.
* Open the Colour modal.
* By default, the Hue Slider is displayed under the Selection Area.
* Slide to find the required Hue.
## Alpha(a) Slider
By default, the Alpha slider is displayed under the H(SL) or R(GB) slider to allow you to adjust opacity.
## Switch Colour Systems
Cwicly Colour Management allows you to work with one of two Colour Systems, HSLa or RBGa.
{% hint style="info" %}
By default, the HSLa system is displayed.
{% endhint %}
It is easy to switch between the two systems.
* Open the Colour modal.
* Locate the 3 Value Input Fields next to the Hex field.
* Hover over any Value Input Field.
* Click the label.
This will switch from one system to the other.
## Hex
The Hex field displays the six-digit hexadecimal code.
* Open the Colour modal.
* Find the Hex field next to the Value Input Fields.
### Reset Colour
The Colour can be reset from the Hex field.
* Open the Colour modal.
* Click the "X" icon next to the Hex code to reset.
## Value Input Fields
The Value Input Fields display the colour values for HSL or RGB depending on the current Colour system.
The fourth Value Input Field displays the alpha value (between 0 and 1).
* Open the Colour modal.
* Find the Value Input Fields next to the Hex field.
* These display the current colour values.
* The colour and alpha values can be adjusted directly from the fields.
## Contrast Checker
To ensure accessible colour pairing, the contrast checker displays, when available:
A preview of your current pairing, an accessibility rating with visual guidance, the contrast ratio.
### Current Pairing
The Current Pairing field displays your current background colour and text colour.
This allows you to visualise what your colour choices will look like without having to waste time switching back and forth.
* Open the Colour modal.
* Locate the Current Pairing field which displays your current background colour and text colour.
### Accessibility Rating
The Accessibility Rating is there as a guide to ensure that viewers who cannot see the full colour spectrum are able to read the text. WCAG (Web Content Accessibility Guidelines)
* Open the Colour modal.
* Locate the Accessibility Rating.
* The field displays the current Accessibility Rating.
### Contrast Ratio
The Contrast Ratio displays the current colour/contrast ratio which should be over 4.5.
* Open the Colour modal.
* Locate the Contrast Ratio
* The current colour/contrast ratio is displayed.
## Global Colours
The four default Global Colours and any other colours you have added are available at the bottom of the palette.
Once you have added Folders, your global colours will be divided into Folders. Uncategorised Global Colours will be visible by default.
{% hint style="info" %}
Global Colours cannot be removed directly from the Colour Picker. To remove a Global Colour, navigate to the Colours tab in the Global Styles tab of the Block Inspector.
{% endhint %}
### Add
* Select a block.
* Open the Colour Picker.
* Navigate to "Global" at the bottom of the modal.
* Select the required colour you wish to add.
* Click the "+" icon to add the new global colour.
{% content-ref url="/pages/SzUW0otG0RkFll297OGR" %}
[Global Colours](/global-styles/global-styles/global-colours)
{% endcontent-ref %}
# Gradient Builder
The Gradient Builder allows you to create simply and visually complex Gradients for your unique designs.
{% hint style="info" %}
The Gradient Builder is available for Background and Overlay.
{% endhint %}
{% embed url="" %}
## Open Gradient Builder
Wherever you see the Gradient Builder icon, you can click the Colour Picker to access the Gradient Builder.
The Gradient Builder is accessible from the Background and Overlay properties in the Colour tab.
* Find Background or Overlay.
* Click the Gradient Builder Icon next to the Colour Picker to open Gradient Builder.
* Make sure that the Gradient Builder tab is selected.
* The Solid tab will take you back to the normal Colour Picker.
There are three types of Gradient available from the Gradient Builder, Linear, Radial and Conic gradients.
## Linear Gradient
The Linear Gradient function creates a progressive transition between two or more colours along a straight line.
* To open the Linear Gradient, click the Linear tab.
* You will notice a linear gradient (in a straight line) between the selected colours.
### Modify
You can change the axis of your Linear Gradient as required.
There are two ways of changing the axis:
* Either drag the Gradient wheel to select the required degree.
* Or click the degree number and input required degree.
## Radial Gradient
The Radial Gradient function creates an image consisting of a progressive transition between two or more colours that radiate from an origin.
### Modify
* To modify the origin of a Radial Gradient, drag the white dot to the required position.
* The origin of the Radial Gradient can be modified freely along the X and Y axis as required.
## Conical Gradient
The Conical Gradient function creates an image consisting of a gradient with colour transitions rotated around a centre point.
### Modify
The Conical Gradient can be modified in two ways:
* Either by rotating the outside dot to the required degree.
* Or by dragging the inner dot to the required position along the X and Y axis.
## Copy Gradient
The Gradient you have created (Linear, Radial or Conical) can be copied by double clicking the input field.
## Gradient Information
The Gradient Information window provides accurate information on the type of gradient, the degree of rotation, the position along the X and Y axis and the colours used for the gradient.
## Reset
The "Reset" dot allows you to return to the default gradient position.
* To reset gradient:
* Either click the blue dot as shown below.
* Or click the "X" icon next to the input field.
## Vivid Maker
The Vivid Maker is a way of avoiding the dead grey zones that are so unpleasant in the mid sections of your gradients.
The Vivid Marker allows you to use colour theory to create rich, vivid, thoroughly-alive gradients with no grey areas.
As a result, we're effectively walking through the colour wheel.
### Add
* Click the Vivid Maker icon to open the Vivid Colour modal as below.
### Colour System
* Choose the colour system you wish to apply.
### Precision
You can choose the number of intermediary colours you wish to apply for greater precision.
The default number is 7.
* Open the Vivid Maker modal.
* Find Precision.
* Modify the number of colours as required.
* Reset to default by clicking the blue dot.
### Beziier Interpolation
The Bezier Interpolation adds a flexible method of curve generation and smooths out the hard edges of the gradient.
* Open the Vivid Maker modal.
* Toggle on Bezier Interpolation.
### Apply Vivids
* To Apply Vivids, click the button as below.
### Reset Vivids
* To reset, click the "Reset to Previous" icon to the right of "Apply Vivids".
## Colour Stop
The Colour Stop function allows you to choose the colours amongst which you wish to render smooth transitions.
This value consists of a colour value, followed by an optional stop position (a percentage between 0% and 100%).
* Open the Gradient Builder.
* Find the Colour Stop gradient bar and set required colours.
* The stop position is shown in percentages, for example 16% in the example.
### Add Colour Stop
* To add a Colour Stop, click within the gradient bar where you want the new Colour Stop to be placed.
### Adjust Colour Stop
* To adjust the position (percentage) of a Colour Stop on the gradient bar, drag the Colour Stop to the required position.
### Flip Colours
The Flip Colours function allows you to flip the colours used to make up the gradient. This gives a mirror image of the original gradient.
* Open the Gradient Builder modal.
* Find the Flip Colours Icon.
* Click to Flip.
## Global Gradient
The Cwicly Gradient Builder allows you to save your custom gradients and make them global.
{% content-ref url="/pages/hLrhzA3XcKBS72xvdCRq" %}
[Global Gradients](/global-styles/global-styles/global-gradients)
{% endcontent-ref %}
### Add
* To add a custom gradient global, click the "+" icon.
The new Global Gradient will be visible as a chip next to the "+" sign.
## Global Gradients
Gradients that you have saved as Global Gradients can be customised from the Gradients tab of the Colours tab of the Cwicly Global Styles tab.
{% content-ref url="/pages/hLrhzA3XcKBS72xvdCRq" %}
[Global Gradients](/global-styles/global-styles/global-gradients)
{% endcontent-ref %}
# Components
{% embed url="" %}
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.
{% hint style="info" %}
A Component does not need to have a containing wrapper such as a Div.
{% endhint %}
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.
## Components Library
The Components LIbrary regroups all your Components. You can access the Components Library from the Cwicly side
It is sorted by New, Old and Folders.
You can set a List or a Grid view depending on user preference.
{% content-ref url="/pages/MZsp9kLXWZen6GCxFxKI" %}
[Components Library](/cwicly/components/components-library)
{% endcontent-ref %}
## Components Folders
Components Folders is more of a Components library where you can add, store, access, reorganise and delete your collection of Components Folders.
{% content-ref url="/pages/TdEcCuIapS2uj2nqR49i" %}
[Components Folders](/cwicly/components/components-folders)
{% endcontent-ref %}
## Customise
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
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.
{% hint style="info" %}
The user role will determine access to and control over the contents of a particular Component.
{% endhint %}
* Select the component you wish to modify.
* In the Component Toolbar, select the "Modify" option.
* Or in the Block Inspector click "Modify Component".
For further detail see [Modify a Component](#modify-a-component).
## Settings
The Settings for each component are grouped under the Component name in the Block Inspector.
{% content-ref url="/pages/YyhHD8vJBVHoLrJGX7eu" %}
[Settings](/cwicly/components/settings)
{% endcontent-ref %}
## Create a Component Property
The Component Properties Modal allows you to modify your existing properties and to create new ones.
{% content-ref url="/pages/jWpchE6kD9o0GD0rXRva" %}
[Component Properties Modal](/cwicly/components/component-properties-modal)
{% endcontent-ref %}
## Text Property
The Text Property allows you to configure a text property.
{% content-ref url="/pages/tS0O7TF7OC75FPLSQmfw" %}
[Text Property](/cwicly/components/properties-add/text-property)
{% endcontent-ref %}
## Rich Text Property
The Rich Text Property allows you to add rich text to a component, such as bold, italic, underline or strikethrough.
{% content-ref url="/pages/fzpZwPotyih6irPU3Jg7" %}
[Rich Text Property](/cwicly/components/properties-add/rich-text-property)
{% endcontent-ref %}
## List Property
The List Property allows you to add a list to a component. Input required information such as Name, Default, Placeholder, Canvas Placeholder.
{% content-ref url="/pages/7YzFW9qTQGKRLEO1Jzvd" %}
[List Property](/cwicly/components/properties-add/list-property)
{% endcontent-ref %}
## Link Property
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.
{% content-ref url="/pages/AWmeobUfk4mHVAAM5IuK" %}
[Link Property](/cwicly/components/properties-add/link-property)
{% endcontent-ref %}
## Image Property
The Image Property allows you to configure your image property. You can input a Name and choose a simple or advanced image type.
{% content-ref url="/pages/3MWTbzW7idw45tIC6zot" %}
[Image Property](/cwicly/components/properties-add/image-property)
{% endcontent-ref %}
## Gallery Property
The Gallery Property allows you to add a Gallery to a component, to name it, choose the data type and adjust layout and usage.
{% content-ref url="/pages/o4IH3UnMAva1E7jhReSu" %}
[Gallery Property](/cwicly/components/properties-add/gallery-property)
{% endcontent-ref %}
## Icon Property
The Icon Property allows you to configure your icon property. You can input a Name and choose a suitable icon.
{% content-ref url="/pages/i6gKbbhg1J3RIYJNDYAZ" %}
[Icon Property](/cwicly/components/properties-add/icon-property)
{% endcontent-ref %}
## Colour Property
The Colour Property 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.
{% content-ref url="/pages/VWvhtRqwbfUYckdXK801" %}
[Colour Property](/cwicly/components/properties-add/colour-property)
{% endcontent-ref %}
## Toggle Property
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.
{% content-ref url="/pages/a4UyS0k0I1oE9M5lQOEk" %}
[Toggle Property](/cwicly/components/properties-add/toggle-property)
{% endcontent-ref %}
## Number Property
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.
{% content-ref url="/pages/qYfQHQ0iveGwsJCqQl4F" %}
[Number Property](/cwicly/components/properties-add/number-property)
{% endcontent-ref %}
## Class Property
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.
{% content-ref url="/pages/M6XIpndBFywMWzKTmLhk" %}
[Class Property](/cwicly/components/properties-add/class-property)
{% endcontent-ref %}
## Options Property
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 .
{% content-ref url="/pages/ybPGuKQ9aikIpTHFEZ12" %}
[Options Property](/cwicly/components/properties-add/options-property)
{% endcontent-ref %}
## Conditions Property
The Conditions Property allows you to add Conditions to a component.
{% content-ref url="/pages/HbR06YgOPweXxSM93Cqe" %}
[Conditions Property](/cwicly/components/properties-add/conditions-property)
{% endcontent-ref %}
## Visibility Property
The Visibility Property allows you to Show/Hide a block and set a default state.
{% content-ref url="/pages/tYHVAG6aJd7NALP4SuZb" %}
[Visibility Property](/cwicly/components/properties-add/visibility-property)
{% endcontent-ref %}
## CSS Text Property
CSS Text accepts any valid CSS string values.
You can add a Name, Default, and make it responsive or not as required.
{% content-ref url="/pages/VOQ2BCwOvcPOq52R49TJ" %}
[CSS Text Property](/cwicly/components/properties-add/css-text-property)
{% endcontent-ref %}
# Components Library
The Components LIbrary regroups all your Components.
The Components Library is sorted by New, Old and Folders.
You can set a List or a Grid view depending on user preference.
## Open
You can access the Components Library from the Cwicly sidebar.
* Click the Components icon to open the Components Library.
You will find import and export icons, a remove icon, a Search bar, a "Sort by" selector and a list or grid view of your components.
## Import
You can Import a component into your Components library by uploading a suitable file.
* Click the Import icon.
The Import Components modal is where you can import Components and Folders.
* Open the Components Library.
* Click the "Import Components" icon to import Components or Folders.
* Toggle the required option(s).
* Click "Upload file" and choose the file you require.
## Export Components Library
You can export the entire Components library if required.
* Open the Components Library.
* Click the "Export Components" icon to export the collection.
## Export Individual Components
You can also export individual components.
* Open the Components LIbrary.
* Right click on the component you wish to export.
* Select "Export (file)" in the dropdown.
## Close
* Click the "X" icon to close the Components Library.
## Search Bar
You can search the Components LIbrary for a specific Component or Folder.
* Input the name of your Component or Folder in the Search Bar.
## Sort by
The "Sort by" property allows you to sort your Components and Folders by different categories: New, Old, Folders. You can also change between Grid and List view.
* Open the Components LIbrary.
* To sort by "New", click the New button. The Components will be displayed with the Components recently added at the top.
* To sort by "Old", click the Old button.
* The components will be displayed with the oldest components first.
* To sort by "Folders", click the Folders button.
* The components will be displayed as Folders.
## List View/Grid View Toggle
The List View/Grid View toggle allows you to toggle between displaying your Folders or Components in List form or Grid form as required.
### List View
* Toggle to display as a list.
### Grid View
* Toggle to display as a Grid.
## Add to Canvas
The Components in theC omponents library can be added to the Canvass.
{% hint style="info" %}
Once the Component is added to the Canvass, it will need to be connected.
{% endhint %}
* Open the Components Library in the Cwicly Quick Inserter.
* Select Component you wish to add.
It will automatically be added to the canvas.
## Remove from Canvas
A component that has been added to the canvas can be removed.
* Select the component to be removed from the canvas.
* Click the "bin" icon in the toolbar to remove from canvas.
## Delete
Use this property to delete the component permanently.
* To permanently delete a component, hover over the component and click the "X" icon.
{% content-ref url="/pages/TdEcCuIapS2uj2nqR49i" %}
[Components Folders](/cwicly/components/components-folders)
{% endcontent-ref %}
# Components Folders
Components Folders is more of a Components library where you can add, store, access, reorganise and delete your collection of Components Folders.
A Component can be in multiple Component Folders and you can nest as many Components in a Component Folder as necessary.
You can add as many Component Folders as you need.
## Components Folders
Components Folders can be accessed from the Components panel in the Inserter Sidebar.
* Open Components in Inserter Sidebar.
* Open Folders tab.
### Add Folder
This allows you to add a new Components Folder.
* Open Folders tab.
* Click "Add New Folder".
* This will open an "Add New Folder" modal.
* Input a suitable name for the Components Folder.
* Click "Create".
### View
Once you have added Component Folders, they will be visible in the Components Folders panel.
* Click the required Component Folder to open.
You can choose between component view or paginated.
Drag and Drop to reorder Component Folders as required.
### Rename
This property allows you to rename a Components Folder.
* Open Folders tab.
* Click to open the required Components Folder.
* Click Components Folder name and input a suitable new name.
### Change Colour
A colour is automatically assigned to each Components Folder when it is created but the colour can be personalised as required.
* Open Folders tab.
* Click to open the required Components Folder.
* Open the colour picker and select a suitable colour.
### Add Icon
This property allows you to add an Icon to your Components Folder.
* Open Folders tab.
* Click to open the required Components Folder.
* Open the icon modal and select a library.
* Search for required icon or locate manually.
The chosen icon will be visible next to the Components Folder.
### Delete Folder
Components Folders can be deleted if no longer required.
{% hint style="info" %}
This will delete the Components Folder itself but not permanently delete the Components nested inside.
{% endhint %}
* Open Folders tab.
* Click to open the required Components Folder.
* Click "Delete" icon to delete Components Folder.
### Sort Folders
You can change the order of your Components Folders as required.
* Open Folders tab.
* Drag and Drop Components Folders to change the order as necessary.
### Return
Return allows you to leave the selected Components Folder and return to the Components Folders library.
* Click Return icon to go back to the Components Folders library.
## Components
Components nested in a Components Folder are visible when you open a Components Folder.
* Open Folders tab.
* Click to open the required Components Folder.
* View Components nested in Folder.
Drag and Drop Components to change the order as necessary.
### Add
You can add Components to a Components Folder.
* Open Folders tab.
* Click to open the required Components Folder.
* Click the "+" icon to open the "Add components to folder".
The "Add components to folder" modal contains a Search Bar to help you locate the component you wish to add to the open Components Folder.
* In the "Add components to folder" modal, input component name and choose component in the dropdown.
The component is now displayed in the folder.
### Add to Page
Select or Drag components nested in a Components Folder to add to the canvas.
### Sort
Components nested in a Components Folder can be sorted to change their order within the folder.
{% hint style="info" %}
You need to activate "Sort Components" before you attempting to sort your Components otherwise the component will be added to your page by default.
{% endhint %}
* Open Folders tab.
* Click to open the required Components Folder.
* Click "Sort Components" icon to enable sorting.
Drag and Drop Components to change the order as necessary.
### Delete
This allows you to remove a Component from a Components Folder.
{% hint style="info" %}
This will delete the Components from the Folder but not remove the Components permanently.
{% endhint %}
* Open Folders tab.
* Click to open the required Components Folder.
* Find the Component to be deleted.
* Click "X" icon.
* Click "Remove" to delete from Folder.
# 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.
{% hint style="info" %}
Style 1 is applied by default.
{% endhint %}
{% hint style="info" %}
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.
{% endhint %}
### 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.
### Add
* 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.
### Move Property
* Drag the "Move" icon to reorder your Properties.
### Move to Group
* 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.
## Create a new Group.
### Name
* Click the "New Group" icon to create a new Group.
### Move
* You can change the position of the Groups as required by Grabbing the "Move" icon.
# Component Properties Modal
## Component Properties Modal
The Component Properties Modal allows you to modify your existing properties and to create new ones.
### Open
* The Component Properties Modal opens when you click the "+" icon to add a new property.
* Select the required property in the dropdown in the Block Inspector.
* Find the required property in the Component Properties modal.
### Access
You can also access the modal by clicking the icon in the Block Inspector.
* Also, the Component Properties modal will open when you click a property.
### Configuration
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.
### Settings
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).
### Layout
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.
#### Default
The default layout is Label next to text Field.
 
### Hide Label
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.
#### Top Label
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.
. 
### Usage
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.
### Property Display
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.
# Properties (Add)
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.
## Text Property
The Text Property allows you to add a Name, Default, Placeholder, Canvas Placeholder and Type (Static or Advanced) to your Component.
{% content-ref url="/pages/tS0O7TF7OC75FPLSQmfw" %}
[Text Property](/cwicly/components/properties-add/text-property)
{% endcontent-ref %}
## Rich Text Property
The Rich Text Property allows you to add rich text to a component, such as bold, italic, underline or strikethrough.
{% content-ref url="/pages/fzpZwPotyih6irPU3Jg7" %}
[Rich Text Property](/cwicly/components/properties-add/rich-text-property)
{% endcontent-ref %}
## List Property
The List Property allows you to add a list to a component. Input required information such as Name, Default, Placeholder, Canvas Placeholder.
{% content-ref url="/pages/7YzFW9qTQGKRLEO1Jzvd" %}
[List Property](/cwicly/components/properties-add/list-property)
{% endcontent-ref %}
## Link Property
{% content-ref url="/pages/AWmeobUfk4mHVAAM5IuK" %}
[Link Property](/cwicly/components/properties-add/link-property)
{% endcontent-ref %}
## Image Property
The Image Property allows you to add an Image to a component, to name it, to set a Default image, to choose an URL and choose a simple (static) or advanced (static and dynamic) type.
{% content-ref url="/pages/3MWTbzW7idw45tIC6zot" %}
[Image Property](/cwicly/components/properties-add/image-property)
{% endcontent-ref %}
## Gallery Property
The Gallery Property allows you to add a Gallery to a component, to name it, choose the data type and adjust layout and usage.
{% content-ref url="/pages/o4IH3UnMAva1E7jhReSu" %}
[Gallery Property](/cwicly/components/properties-add/gallery-property)
{% endcontent-ref %}
## Video Property
The Video Property allows you to add a Video to a component, to name it, to set a Default video, to choose an URL and choose a simple (static) or advanced (static and dynamic) type.
{% content-ref url="/pages/bLhcAyilalaNOY7UmWJW" %}
[Video Property](/cwicly/components/properties-add/video-property)
{% endcontent-ref %}
## Icon Property
The Icon Property allows you to configure your icon property. You can input a Name and choose a suitable icon and choose whether or not to include it in the CSS so that you can use it in a List block.
{% content-ref url="/pages/i6gKbbhg1J3RIYJNDYAZ" %}
[Icon Property](/cwicly/components/properties-add/icon-property)
{% endcontent-ref %}
## Colour Property
The Colour Property 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.
{% content-ref url="/pages/VWvhtRqwbfUYckdXK801" %}
[Colour Property](/cwicly/components/properties-add/colour-property)
{% endcontent-ref %}
## Toggle Property
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 by Default.
{% content-ref url="/pages/a4UyS0k0I1oE9M5lQOEk" %}
[Toggle Property](/cwicly/components/properties-add/toggle-property)
{% endcontent-ref %}
## Number Property
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, set a Default value, and a Minimum, a Maximum or Step.
You can also toggle "With Unit" on or off if you want to specify a unit.
{% content-ref url="/pages/qYfQHQ0iveGwsJCqQl4F" %}
[Number Property](/cwicly/components/properties-add/number-property)
{% endcontent-ref %}
## Class Property
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.
{% content-ref url="/pages/M6XIpndBFywMWzKTmLhk" %}
[Class Property](/cwicly/components/properties-add/class-property)
{% endcontent-ref %}
## ID Property
The ID Property gives an ID to the block if you wish to give it a specific name in order to target it more easily (for example to connect it to a modal).
By default the Block ID is indexed relative to the number of blocks on the page.
{% content-ref url="/pages/EyJfXB5Dh5HoECxS1rPE" %}
[ID Property](/cwicly/components/properties-add/id-property)
{% endcontent-ref %}
## Options Property
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.
{% content-ref url="/pages/ybPGuKQ9aikIpTHFEZ12" %}
[Options Property](/cwicly/components/properties-add/options-property)
{% endcontent-ref %}
## Conditions Property
The Conditions Property allows you to add specific additional styles to a component other than numbers and colours.
You can input a Name and set specific conditions for a component block.
{% content-ref url="/pages/HbR06YgOPweXxSM93Cqe" %}
[Conditions Property](/cwicly/components/properties-add/conditions-property)
{% endcontent-ref %}
## Visibility Property
The Visibility Property allows you to Show/Hide a block and set a default state.
{% content-ref url="/pages/tYHVAG6aJd7NALP4SuZb" %}
[Visibility Property](/cwicly/components/properties-add/visibility-property)
{% endcontent-ref %}
## CSS Property
CSS Text accepts any valid CSS string values.
You can add a Name, Default, and make it responsive or not as required.
{% content-ref url="/pages/VOQ2BCwOvcPOq52R49TJ" %}
[CSS Text Property](/cwicly/components/properties-add/css-text-property)
{% endcontent-ref %}
# Text Property
The Text Property allows you to add a Name, Default, Placeholder, Canvas Placeholder and Type (Static or Advanced) to your Component.
* Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
* Select the Text Property you wish to configure.
This is an example of how it will look once configured.
## Connect
The Text Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the Text Property.
* Select "Modify" in the toolbar or the Block Inspector.
* The blocks contained in the component are now visible in the navigator.
* Find and select the Text property you wish to connect in the navigator.
* In the Components tab of the Primary tab, click the Content field to open the Component Properties modal.
* Select the required Text Property and click the Connect button.
* The Text Property will now be visible in the Content field in green which indicates that it is connected.
The text of an individual component can be customised either clicking Customise in the toolbar or directly inputting the required text.
* Select the Component to be customised.
* Either click Customise in the toolbar and input the required text in the Name field of the Block inspector.
* Or Select the Text Property to be customised and input required text directly into the component.
See [Connect a Component Property](#connect-a-component-property).
## Name
Allows you to label the selected text property.
* Open the Component Properties modal.
* Select required text property.
* Input suitable label name to Name field.
The required label will now be visible in the Block Inspector next to the text field.
## Default
Allows you to set suitable default text to your component.
* Open the Components Properties.
* Select required Text property.
* Open Settings tab.
* Input suitable default text in Default field.
This is how it should now look on the canvas.
## Placeholder
Ensures that suitable alternative text appears in the text field of the block inspector if the text field has been cleared.
* Open the Components Properties.
* Select required Text property.
* Open Settings tab.
* Input suitable text to Placeholder field such as "Enter Name Here".
If the text field has been cleared, the inputed text will appear in the Name field of the Block Inspector, such as "Enter Name Here" as long as the property has been connected.
## Canvas Placeholder
Alternative text that appears in the text field of your post or page if the required text has not been added.
* Open the Components Properties.
* Select required Text property.
* Open Settings tab.
* Input suitable text to Canvas Placeholder field, such as "Enter Name".
Canvas Placeholder text will now be visible in the Text field of the Page or Post, such as Enter Name.
## Simple Type
The Simple Type property means that your text property is static.
* Open the Components Properties.
* Select required Text property.
* Open Settings tab.
* Select Simple as Type.
Static text will now appear in the Text field of the Block Inspector.
## Advanced Type
The Advanced Type property allows you to add dynamic or static content to your text field as required.
* Open the Components Properties.
* Select required Text property.
* Open Settings tab.
* Select Advanced as Type.
Now a Dynamic icon appears in the Block Inspector that will allow you to toggle on or off Dynamic content.
* In the Block Inspector, toggle dynamic on for dynamic content.
* This will open the Content modal.
* Input settings as required.
# Rich Text Property
The Rich Text Property allows you to add rich text to a component, such as bold, italic, underline or strikethrough.
* Open the Components Properties modal.
* Select the Rich Text Property you wish to configure.
* Input required information such as Name, Default, Placeholder, Canvas Placeholder.
* Choose Type as required, simple or advanced.
## Connect
The Rich Text Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the Rich Text Property.
* Select "Modify" in the toolbar or the Block Inspector.
* The blocks contained in the component are now visible in the navigator.
* In the navigator, find and select the Rich Text property you wish to connect.
* In the Components tab of the Primary tab, click the Content field to open the Component Properties modal.
* In the Component Properties modal, select the Rich Text property you wish to connect.
* Click the Connect button.
* The Rich Text Property name is now visible in the Content field in the Block Inspector.
Once correctly connected, you should have something like this:
See [Connect a Component Property](#connect-a-component-property).
## Name
Allows you to label the selected rich text property.
* Open the Component Properties modal.
* Select required rich text property.
* Input suitable label name to Name field.
The required label will now be visible in the Block Inspector next to the rich text field.
## Default
Allows you to set suitable default text to your component.
* Open the Components Properties.
* Select required Rich Text property.
* Open Settings tab.
* Input suitable default rich text in Default field, such as Bold, Italic, Underlined, Barred.
* This is how it should now look on the canvas.
## Placeholder
Ensures that suitable alternative rich text appears in the rich text field of the block inspector if the rich text field has been cleared.
* Open the Components Properties.
* Select required Rich Text property.
* Open Settings tab.
* Input suitable text in Placeholder field such as "Enter Title".
* The alternative rich text will now be visible in the Title field.
## Canvas Placeholder
Alternative text that appears in the rich text field of your post or page if the required rich text has not been added.
* Open the Components Properties.
* Select required Rich Text property.
* Open Settings tab.
* Input suitable text to Canvas Placeholder field, such as "Enter Title Here".
After connection, the Canvas Placeholder text you inputed will be visible in the Rich Text field.
## Simple Type
If the Simple Type property is selected, your text property is static.
* Open the Components Properties.
* Select required Text property.
* Open Settings tab.
* Select Simple as Type.
Once connected, the selected rich text property will show as static in the Block Inspector.
## Advanced Type
The Advanced Type property allows you to add either dynamic or static content to your text field as required.
Dynamic content can be set for: Source, Wordpress, Static Text, Before, After, Fallback in the Content modal.
* Open the Components Properties.
* Select required Text property.
* Open Settings tab.
* Select Advanced as Type.
Now a Dynamic icon appears in the Block Inspector that will allow you to toggle on or off Dynamic content.
This allows you to have either static or dynamic content.
When Dynamic is active, the icon will become blue.
* In the Block Inspector, toggle dynamic on for dynamic content.
* This will open the Content modal.
* Input settings as required (Source, Wordpress, Static Text, Before, After, Fallback).
# List Property
The List Property allows you to add a list to a component. Input required information such as Name, Default, Placeholder, Canvas Placeholder.
Choose Type as required, simple or advanced.
Below is an example of what the Components Properties modal will look like once filled out.
* Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
* Select the List Property you wish to configure.
## Connect
The List Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the List Property.
* Select "Modify" in the toolbar or the Block Inspector.
* The blocks contained in the component are now visible in the navigator.
* In the navigator, find and select the List property you wish to connect.
* In the Components tab of the Primary tab, click the Content field to open the Component Properties modal.
* In the Component Properties modal, select the List property you wish to connect.
* Click the Connect button.
* The List Property name is now visible in the Content field in the Block Inspector.
Once correctly connected, you should have something like this:
## Name
Allows you to label the selected List property.
* Open the Component Properties modal.
* Select required List property.
* Input suitable label name to Name field.
The required label will now be visible in the Block Inspector next to the list field.
## Default
Allows you to set suitable default text to your component.
* Open the Components Properties.
* Select required List property.
* Open Settings tab.
* Input suitable default text in Default field.
This is how it should now look on the canvas.
## Placeholder
Ensures that suitable alternative to the list appears in the list field of the block inspector if the list field has been cleared.
* Open the Components Properties.
* Select required List property.
* Open Settings tab.
* Input suitable text in Placeholder field such as "Write Here".
The placeholder text will now be visible in the required field of the Block Inspector.
## Canvas Placeholder
Alternative text that appears in the List field of your post or page if the required List has not been added.
* Open the Components Properties.
* Select required List property.
* Open Settings tab.
* Input suitable text to Canvas Placeholder field, such as "Write List Here".
The canvas should look something like this now.
# Link Property
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 dynamc) data.
* In the Block Inspector, click "+" to open the Components Properties modal.
* Select the Link Property you wish to configure.
* Open the Settings tab (default).
## Connect
The Link Property you have created needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the Link Property.
* Select "Modify" in the toolbar or the Block Inspector.
This will open the component in the navigator so you can access the required block.
* Select required block.
* In the Block Inspector, find the Link Property and click the Component icon.
* Choose required block in the Link dropdown.
The Link Property will now become green.
If the Link property is correctly connected, you should see something like this when in "Customise".
See [Connect a Component Property](#connect-a-component-property).
## Name
* Input a suitable Name for the Link property
Once connected, the Link name will appear in the Block Inspector.
## Simple Type
The Simple Type property allows you to set static data for your Link property.
* Open the Components Properties.
* Select required Link property.
* Open Settings tab.
* Select Simple as data Type.
This will open the Link modal where you can input a link URL.
For more information about setting up a Link:
{% content-ref url="/pages/-MUMl2y3nJqALhTy\_yTA" %}
[Link](/interactions/link-wrapper)
{% endcontent-ref %}
## Advanced Type
The Advanced Type property allows you to add dynamic or static content to your link as required.
* Open the Components Properties.
* Select required Link property.
* Open Settings tab.
* Select Advanced as Type.
Now a Dynamic icon appears in the Block Inspector that will allow you to toggle on or off Dynamic content.
* In the Block Inspector, toggle dynamic on for dynamic content.
* This will open the Link modal.
* Input settings as required.
See:
{% content-ref url="/pages/-MUMl2y3nJqALhTy\_yTA" %}
[Link](/interactions/link-wrapper)
{% endcontent-ref %}
# Image Property
The Image Property allows you to add an Image to a component, to name it, to set a Default image, to choose an URL and choose a simple (static) or advanced (static and dynamic) type.
* Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
* Select the Image Property you wish to configure.
* Input required information such as Name and Default.
* Choose Type as required, simple or advanced.
## Connect
The Image Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the Image Property.
* Select "Modify" in the toolbar or the Block Inspector.
This will open the component in the navigator so you can access the required block.
* Select required block.
* In the Block Inspector, find the Image Property and click the Component logo.
* Choose required block in the Source dropdown.
The Image Property will now become green.
If the Image property is correctly connected, you should see something like this when in "Customise".
* Click Image panel to open the Media modal.
* Select required image and click "Select".
The selected image will now be visible in the Image field of the Block Inspector.
## Name
The Name property allows you to input a suitable name for your Image property.
* Input a suitable name.
Once connected, the chosen name will now be visible in the Block Inspector.
## Default
Allows you to set a suitable default image to your component.
* Open the Components Properties.
* Select required Image property.
* Open Settings tab.
* Click "Set Default Image" field or input URL.
* Select a suitable image.
* Click Select.
Once selected, you should be able to visualise the selected default image in the component Properties modal.
The image will appear by default on the canvas.
## Simple Type
The Simple Type property means that your image property is static.
* Open the Components Properties.
* Select required Image property.
* Open Settings tab.
* Select Simple as Type.
You will now be able to add a link to a static image.
## Advanced Type
The Advanced Type property allows you to add dynamic or static content to your image field as required.
* Open the Components Properties.
* Select required Text property.
* Open Settings tab.
* Select Advanced as Type.
A Dynamic icon is now visible in the Block Inspector that will allow you to toggle on/off Dynamic content.
* In the Block Inspector, toggle dynamic on for dynamic content.
* This will open the Dynamic Image modal.
* Input settings as required.
# Gallery Property
The Gallery Property allows you to add a Gallery to a component, to name it, choose the data type and adjust layout and usage.
* Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
* Select the Gallery Property you wish to configure.
## Connect
The Gallery Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the Gallery Property.
* Select "Modify" in the toolbar or the Block Inspector.
* The blocks contained in the component are now visible in the navigator.
* In the navigator, find and select the Gallery property you wish to connect.
* In the Components tab of the Primary tab, click the Component icon to open the Component Properties modal.
* Choose required block in the dropdown to open the Components Properties modal.
The Gallery Property name is now visible in the Content field in the Block Inspector.
Click Gallery Property to open the Component Properties modal if you wish to make any adjustments.
If the Gallery property is correctly connected, you should see something like this when in "Customise".
* Click Gallery "+" icon to add a new Gallery.
* Click Modify icon next to Gallery name to add an image.
* Select required images and click "Create a new gallery".
The images should now be visible in the appropriate Gallery panel in the Block Inspector.
## Name
The Name property allows yo to input a suitable name for your Gallery property.
* Input a suitable name.
## Simple Type
The Simple Type property allows you to set static data for your Gallery property.
{% hint style="info" %}
Type is set to Simple by Default.
{% endhint %}
* Open the Components Properties.
* Select required Gallery property.
* Open Settings tab.
* Select Simple as data Type.
This will display the default static data.
## Advanced Type
The Advanced Type property allows you to add either dynamic or static content to your Gallery as required.
* Open the Components Properties.
* Select required Gallery property.
* Open Settings tab.
* Select Advanced as Type.
Click Dynamic icon to open the Dynamic modal for a particular gallery.
* Select Dynamic or Static source and choose static or dynamic data.
# Video Property
The Video Property allows you to add a Video to a component, to name it, to set a Default video, to choose an URL and choose a simple (static) or advanced (static and dynamic) type.
* Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
* Select the Video Property you wish to configure.
## Connect
The Video Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the Video Property.
* Select "Modify" in the toolbar or the Block Inspector.
This will open the component in the navigator so you can access the required block.
* Select required block.
* In the Block Inspector, find the Video Property and click the Component logo.
* Choose required block in the Source dropdown.
The Video Property will now become green.
If the Link property is correctly connected, you should see something like this when in "Customise".
* Click Video panel to open the Media modal or input a suitable URL.
* Select required Video and click "Select".
* The selected Video is now visible in the Video field of the Block Inspector.
## Name
The Name property allows yo to input a suitable name for your Video property.
* Input a suitable name such as "Video".
Once connected, the chosen name will now be visible in the Block Inspector.
## Default
Allows you to set a suitable default video to your component.
* Open the Components Properties.
* Select required Video property.
* Open Settings tab.
* Click "Set Default Video" field or input URL.
* Select a suitable video.
* Click Select.
Once selected, you should be able to visualise the selected default video in the component Properties modal.
The video will appear by default on the canvas.
## Simple Type
The Simple Type property means that your Video property is static.
* Open the Components Properties.
* Select required Video property.
* Open Settings tab.
* Select Simple as Type.
You will now be able to upload a static video.
## Advanced Type
The Advanced Type property allows you to add dynamic or static content to your video field as required.
* Open the Components Properties modal.
* Select required Text property.
* Open Settings tab.
* Select Advanced as Type.
A Dynamic icon is now visible in the Block Inspector that will allow you to toggle on/off Dynamic content.
* In the Block Inspector, toggle dynamic on for dynamic content.
* This will open the Dynamic Video modal.
* Input settings as required.
# Icon Property
The Icon Property allows you to configure your icon property. You can input a Name and choose a suitable icon and choose whether or not to include it in the CSS so that you can use it in a List block.
* Open the Components Properties modal by clicking "+" icon in the Block inspector.
* Select the Icon Property you wish to configure.
## Connect
The Icon Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the Icon Property.
* Select "Modify" in the toolbar or the Block Inspector.
* The blocks contained in the component are now visible in the navigator.
* Find and select the Icon property you wish to connect in the navigator.
* In the Components tab of the Primary tab, click the Component icon above the Icon to open the Component Properties modal.
* Select the required Icon Property in the dropdown.
* The Icon Property will now be visible in the Content field in green which indicates that it is connected.
* Click Icon Property to open the Component Properties modal if you wish to make any adjustments.
* To customise, select icon block on the canvas or in the navigator.
* In the Block Inspector open Panel by clicking the Icon.
* Select required icon.
The required icon will now be visible on the canvas.
## Name
Allows you to label the selected Icon property.
* Open the Component Properties modal.
* Select required Icon property.
* Input suitable label name to Name field.
The required label will now be visible in the Block Inspector next to the Icon field.
## Default
Allows you to set suitable default text to your Icon component.
* Open the Components Properties.
* Select required Icon property.
* Find required icon in the Icon Libraries or using the Search bar.
The Selected Icon will now appear in blue in the Default field.
And this is how the required Default icon will look on the canvas.
## Include in CSS
This allows you to use a specific Icon in a list block. This means that you do not have to include all your icons in the CSS but only those that you enable.
* Toggle on "Include in CSS" to include the selected Icon Property in a list block.
# Colour Property
The Colour Property 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.
* Open the Components Properties modal.
* Select the Colour Property you wish to configure.
This is an example of how it will look once configured.
## Connect
The Colour Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the Colour Property.
* Select "Modify" in the toolbar or the Block Inspector.
* The blocks contained in the component are now visible in the navigator.
* Find and select the Colour property you wish to connect in the navigator.
* In the Components tab of the Primary tab, click the Component icon above the Colour property you wish to modify.
* Choose the appropriate Colour property in the dropdown and click to open the Component Properties modal.
* The Colour Property will now be visible in the Content field in green which indicates that it is connected.
* Click the Colour Property to open the Component Properties modal to make any further adjustments.
## Customise
To customise the colour property, make sure Customise is selected in the tool bar.
* Adjust to required colour in the Block Inspector and it will be visible on the Canvas.
## Name
Allows you to label the selected Colour property.
* Open the Component Properties modal.
* Select required text property.
* Input suitable label name to Name field.
The required label will now be visible in the Block Inspector next to the Colour field.
## Default
Allows you to set a suitable default Colour to your component.
* Open the Components Properties.
* Select required Colour property.
* Open Settings tab.
* Input required default Colour in Default field.
This is how it should now look on the canvass.
### Responsive
This property can be toggled to allow you to set different Colour properties on selected screen sizes.
* Toggle Responsive on and off as required.
* Select required screen size (desktop, tablet, mobile, normal).
# Toggle Property
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 by Default.
* Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
* Select Toggle Property in the dropdown.
## Connect
The Toggle Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
We need to open the Component to see the blocks that it contains.
* Select the Component to which you want to connect the Colour Property.
* Select "Modify" in the toolbar or the Block Inspector.
We need to open the Component to see the blocks that it contains.
The individual blocks will now be visible.
* Select the block to which you wish to add a Toggle Property.
* In the Block Inspector, click Component icon above the Property you wish to modify to open the Component Properties modal.
The Toggle property should now be visible in the Block Inspector.
## Name
Allows you to label the selected Toggle property.
* Open the Component Properties modal.
* Select required toggle property.
* Input suitable label name to Name field.
The Name label is now visible in the Block Inspector.
The Toggle can be set to True or False or left unset depending on your requirements.
* In the Component Properties modal, select Default you wish to be applied, such as False, True or unselected.
For example, if you set visibility default to "true"
# Number Property
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, set a Default value, and a Minimum, a Maximum or Step.
You can also toggle "With Unit" on or off if you want to specify a unit.
* Open the Components Properties modal by clicking the "+" icon.
* Select the Number Property you wish to configure.
## Connect
We need to open the Component in the Navigator in order to see the individual blocks.
* Select the Component to which you want to connect the Number Property.
* In the Tool Bar or Block Inspector, select "Modify" to view individual component blocks.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
The Number Property needs to be connected for it to be applied to the canvas.
* In the navigator, select the required component block.
{% hint style="info" %}
The block selected must accept a Number property.
{% endhint %}
For example, we want to add a text size property.
* With the appropriate block selected, click the Component icon under Size in the Block Inspector.
{% hint style="info" %}
The customisable variables that can be used for the Number Property will have a Component icon attached.
{% endhint %}
* In the Block Inspector, click the Number property (in this example Text Size) to open the Component Properties modal.
* Select the Numbers property to be customised, in this example "Text Size".
When you are in "Customise", the Number property will be visible in the Block Inspector.
You can now adjust the Number property from the Block Inspector as shown in the example below.
This will adjust the Number property on the Canvas.
## Name
In the right hand panel of the Component Properties modal, input label Name.
The required Name Label will now be visible in the Block Inspector.
## Default
Allows you to set a suitable default number to your component.
* Open the Components Properties.
* Select required Number property.
* Open Settings tab.
* Input suitable default number in Default field.
## With Unit Toggle
Some Number properties require a unit (such as Text Size) and others do not require a unit (such as Slides).
* Toggle On/Off With Unit as required.
For example, "With Unit" is toggled on for Text Size .
* Input a suitable default Number as required.
The Default Number property (in this case Text Size) is now applied to the Canvas.
## Minimum
The Minimum property allows you to set a minimum value to your Number property.
* In the Components Properties modal, select the required Number property.
* Set Minimum value as required.
The Number component value cannot go below the set Minimum value.
## Maximum
The Maximum property allows you to set a Maximum value to your Number property.
* In the Components Properties modal, select the required Number property.
* Set Maximum value as required.
The Number property value cannot go above the set maximum value.
## Step
You can set a Step parameter to determine the size of the intervals.
* With the required Number property selected, set Step size value as required.
## Responsive
Toggle on or off Responsive as required depending on whether or not you want the number to be responsive or not.
* Select required number property.
* Toggle on Responsive as required.
* Select required screen size.
# Class Property
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.
* Open the Components Properties modal by clicking the "+" icon in the block inspector.
* Select the Class Property you wish to configure.
## Connect
The Class Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the Class Property.
* Select "Modify" in the toolbar or the Block Inspector.
* In the Navigator, select the required block to which you wish to add a Class property.
* Under Class in the Block Inspector, click the "Connect Component Property" icon.
* Select "Class" in the dropdown.
The Class property now appears in green in the Block Inspector to indicate that it is connected.
* If you wish to modify the Class Property, click the Class button to open the Components Properties modal.
## Customise
To customise the Class property, make sure Customise is selected in the tool bar.
* With the Component selected, in the Block Inspector, click the "+" icon to add a class.
This will open the Classes modal where you can Create a class or select an existing one.
{% content-ref url="/pages/upN2xryqdW2pahdOruNW" %}
[Global/Block Classes](/cwicly/classes-and-ids/global-block-classes)
{% endcontent-ref %}
The added Class will appear in green in the Block Inspector.
## Remove Added Class
Use this property to remove a class that has been added to a component.
* In the Block Inspector, hover over the class to be removed.
* Click the red "X" icon to delet the added class.
## Name
Allows you to label the selected Class property.
* Open the Component Properties modal.
* Select required Class property.
* Input suitable label name to Name field.
The label will now be visible in the Block Inpsector.
## Default
Allows you to set a default class to your component.
* Open the Components Properties by clicking the "+" icon.
* Select required Class property.
* Open Settings tab.
* Click "+" sign next to Default to open the Classes modal.
* Create a class or select an existing one as a default class.
The required Default class will now be visible in the Component Properties modal under Default.
The Default class will now appear on the Canvas.
# ID Property
The ID Property gives an ID to the block if you wish to give it a specific name in order to target it more easily (for example to connect it to a modal).
By default the Block ID is indexed relative to the number of blocks on the page.
* Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
* Select the ID Property you wish to configure.
## Connect
The ID Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the ID Property.
* Select "Modify" in the toolbar or the Block Inspector.
* The blocks contained in the component are now visible in the navigator.
* Find and select the block to which you wish to connect an ID Component Property.
* In the Components tab of the Primary tab, find ID.
* Click the ID Content field to open the Component Properties modal.
* Select the ID property you wish to connect.
* Click the Connect button.
The ID Property will be visible in green in the Block Inspector.
## Customise
To customise the ID Property, make sure that Customise is selected in the Tool Bar.
* Select required Component in the navigator.
* In the Block Inspector, input a suitable name in the ID field
## Name
Allows you to label the selected ID property.
* Open the Component Properties modal.
* Select required ID property.
* Input suitable label to Name field.
## Placeholder
Ensures that suitable alternative text appears in the ID field of the block inspector if the ID field has been cleared or is empty.
* Open the Components Properties.
* Select required ID property.
* Open Settings tab.
* Input suitable text to Placeholder field such as "Enter ID".
The Placeholder text will now appear in the ID field of the Block Inspector.
## Auto Generate
The Auto Generate property, when enabled, will automatically choose a name for your ID.
* In the Components Properties modal, Toggle on/off Auto Generate as required.
The Auto Generated ID will now be visible in the Block Inspector ID field.
If the Auto Generated ID is not acceptable, click the Reset button to the left of the ID label. This will Auto Generate a new ID.
* With the required component selected, n the Block Inspector, find the ID and click the Reset button to generate a new ID.
## Simple Type
The Simple Type property allows you to input static data.
* Open the Components Properties.
* Select required ID property.
* Open Settings tab.
* Select Simple as Type.
The simple (static) data will now look something like this.
## Advanced Type
The Advanced Type property allows you to input dynamic or static data as required.
* Open the Components Properties modal.
* Select required ID property.
* Open Settings tab.
* Select Advanced as Type.
* Make sure you are in Customise.
* In the Block Inspector, click the Dynamic icon next to ID label.
* This opens the Dynamic modal.
* Fill in the dynamic data fields.
# Options Property
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 by clicking the "+" sign.
* Select Options in the Properties dropdown.
* Select the Options Property you wish to configure.
## Connect
The Options Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the Options Property.
* Select "Modify" in the toolbar or the Block Inspector.
* The blocks contained in the component are now visible in the navigator.
* Find and select the Options property you wish to connect in the navigator.
* In the Components tab of the Primary tab, click the Component icon of the property you wish to add.
* Select the required Options Property in the dropdown.
* The Options Property will now be visible in the Content field in green which indicates that it is connected.
### Options
The Options property has to be set up in order for the required options to be displayed.
* Click the Options property in the Block Inspector to open the Components Property modal.
* The Options that can be customised for the required property will now be visible.
{% hint style="info" %}
The Options available will depend upon the chosen property.
{% endhint %}
Now, when you return to Customise, you can adjust the required Options property from the Block Inspector.
## Name
Allows you to label the selected Options property.
* Open the Component Properties modal.
* Select required Options property.
* Input suitable label name to Name field.
The required Name label will now be visible in the Block Inspector.
The Options property allows you to add the required Options and Values to your Options Property.
In this example, we want to offer two Direction Options, Column and Row so we need to add additional Option.
* Click the "+" sign next to Options to add additional Options.
Input a suitable label for the first value, in this example "Row".
* Input required value, in this example "Row".
* Input required label and value for the additional option if there are any.
* In this example, we have given a "Column" label and value.
### Move
* Drag and drop to reorder the Options as required.
### Remove
* Click Remove icon to delete an option.
The options you have set up will now be available in the Block Inspector, in this example Row or Column.
## Default
You can now set up a default for you Options Property.
{% hint style="info" %}
You have to set up some options before you can add a default.
{% endhint %}
* In the Components Properties modal, set Default to required option, in the example below Row or Column..
The option you selected will now be visible on the canvas.
## Dynamic
If your Option is Dynamic you can toggle on Dynamic.
* Open the Components Properties modal and toggle on Dynamic
* Set Source as required.
A dynamic data property will now be visible in the Block Inspector.
Depending on the option to which Dynamic is applied, you will have various possibilites.
In this case, dynamic direction will open the Direction Options modal.
# Conditions Property
The Conditions Property allows you to add specific additional styles to a component other than numbers and colours.
You can input a Name and set specific conditions for a component block.
* Open the Components Properties modal by clicking the "+" sign.
* Select Conditions in the Properties dropdown.
* Select the Conditions Property you wish to configure.
## Connect
The Conditions Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the Conditions Property.
* Select "Modify" in the toolbar or the Block Inspector.
* The blocks contained in the component are now visible in the navigator.
* Find and select the Conditions property you wish to connect in the navigator.
* In the Components tab of the Primary tab, click the Component icon of the property you wish to add.
* Select the required Conditions Property in the dropdown.
The Conditions Property will now be visible in the Content field in green which indicates that it is connected.
## Conditions
The Conditions property has to be set up in order for the required conditions to be displayed.
* Click the Conditions property in the Block Inspector to open the Conditions Property modal.
* The Conditions that can be customised for the required property will now be visible.
{% hint style="info" %}
The Conditions available will depend upon the chosen property.
{% endhint %}
Now, when you return to Customise, you can adjust the required Options property from the Block Inspector.
## Name
Allows you to label the selected Conditions property.
* Open the Component Properties modal.
* Select required Conditions property.
* Input suitable label name to Name field.
The required Name label will now be visible in the Block Inspector.
## Use
* To set a Condition, select the required component.
* Click the Conditions icon in the Block Inspector to open the Conditions modal.
* Set the required conditions.
{% content-ref url="/pages/WwSxeb6VoE03NO8vHky1" %}
[Visibility Conditions](/interactions/visibility-conditions)
{% endcontent-ref %}
# Visibility Property
The Visibility Property allows you to Show/Hide a block and set a default state.
* Open the Components Properties modal by clicking the "+" sign.
* Select Visibility in the Properties dropdown.
* Select the Visibility Property you wish to configure.
## Connect
The Visibility Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the Visibility Property.
* Select "Modify" in the toolbar or the Block Inspector.
* The blocks contained in the component are now visible in the navigator.
* Find and select the Visibility property you wish to connect in the navigator.
* In the Components Settings tab of the Primary tab, click the Visibility field.
* This opens the Component Properties modal.
* Select the Visibility property you wish to connect.
* Click "Connect".
* The Visibility Property will now be visible in the Visibility field in green which indicates that it is connected.
* In the navigator, select required Component.
* In the Block Inspector, choose required state (Hidden/Visible).
When Visible is selected, the item is visible.
When Hidden is selected, the item is hidden.
## Name
Allows you to label the selected Visibility property.
* Open the Component Properties modal.
* Select required visibility property.
* Input suitable label name to Name field.
The required Name label will now be visible in the Block Inspector.
## Default
Allows you to set a default Visibility state to your component.
* Open the Components Properties by clicking the "+" icon.
* Select required Default state.
The Default Visibility state will now be reflected in the canvas.
# CSS Text Property
CSS Text accepts any valid CSS string values.
You can add a Name, Default, and make it responsive or not as required.
* Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
* Choose CSS Text in the dropdown.
* Select the Text Property you wish to configure.
## Connect
The Class Property needs to be connected for it to be applied to the canvas.
{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}
* Select the Component to which you want to connect the CSS Text Property.
* Select "Modify" in the toolbar or the Block Inspector.
* The blocks contained in the component are now visible in the navigator.
* Find and select the Conditions property you wish to connect in the navigator.
* In the Components tab of the Primary tab, click the Component icon of the property you wish to add, in this example Text Colour.
* Select the required CSS Property in the dropdown, in this example CSS Colour Text.
The connected CSS Text property will now have a coloured background in the Block Inspector to indicate that it is connected.
* A CSS Text field is now available in the Block Inspector where you can input your string.
As an example, the colour string "saddlebrown" has been added to the Name field of the component.
## Name
Allows you to label the selected CSS Text property.
* Open the Component Properties modal.
* Select required CSS Text property.
* Input suitable label name to Name field.
The required label will now be visible in the Block Inspector next to the text field.
## Default
Allows you to set suitable default CSS Text string to your component.
* Open the Components Properties.
* Select required CSS Text property.
* Open Settings tab.
* Input suitable default text in Default field, in this example the colour "purple".
The Responsive toggle offers you the possibility of setting a CSS Text property for a specified screen size.
* In the Components Properties modal, toggle Responsive as required.
* Select required screen size.
# Copy/Paste
Copying and pasting is the most efficient way to quicken your workflow.
Not only can you copy paste elements, and rules or stylings in different ways. These copied rules/elements can be pasted on to any other website installation.
{% embed url="" %}
Getting Started - Copy/Paste
{% endembed %}
## Copy Duplicate VS. Copy Linked
In Cwicly you can choose to copy a block in two distinct ways: copy duplicate or copy linked.
### Copy Duplicate
Duplicating is the traditional way of copying a block since you’re literally duplicating a block’s style, that’s it.
### Copy Linked
With copying and linking, not only are you copying the original element’s styles, but this new element is also linked to the first.
{% hint style="info" %}
Allows you to have one main block that controls the style of other linked blocks.
{% endhint %}
## Blocks & IDs
You can copy/paste blocks using the block menu toolbar or using keyboard shortcuts. It depends on your preference.
{% content-ref url="/pages/uqHqGd0pKg5FtLpQBAuf" %}
[Blocks](/cwicly/copy-paste/blocks)
{% endcontent-ref %}
## Block Styles
You can copy/paste styles.
{% content-ref url="/pages/jdz8SpQH62CnYgLHkR2F" %}
[Block Styles](/cwicly/copy-paste/block-styles)
{% endcontent-ref %}
## Classes & IDs
You can copy class names directly from the class & ID fields or with the Cwicly Navigator, using the right-click context menu.
{% content-ref url="/pages/COP7VZnFc5VmGr8BNxZJ" %}
[Classes & IDs](/cwicly/copy-paste/classes-and-ids)
{% endcontent-ref %}
## Global Styles
You can copy global style properties to improve your workflow.
{% content-ref url="/pages/1ToOL5aRGfS0nVXkM888" %}
[Global Styles](/cwicly/copy-paste/global-styles)
{% endcontent-ref %}
## Global Classes & Stylesheets
You can copy/paste the whole Global Classes & Stylesheets tab, as well as the global classes and stylesheet tabs, as well as individual global classes and stylesheets.
{% content-ref url="/pages/CFi5II7kqcoNclqXLC6f" %}
[Global Classes & Stylesheets](/cwicly/copy-paste/global-classes-and-stylesheets)
{% endcontent-ref %}
# Block Styles
You can copy/paste styles from either the menu block toolbar or the Cwicly Navigator, using the right-click context menu.
## From the Toolbar
Copy/Paste
1. Select a desired block
2. Navigate to the block menu toolbar
3. Select the copy/paste icon
4. Select the copy/paste styles icon
## From the Navigator
Copy/Paste
1. Select a desired block
2. Open the Cwicly Navigator
3. Select right-click on the desired block
4. Select the styles option
5. Select the desired action
# Classes & IDs
You can copy class names directly from the class & ID fields or with the Cwicly Navigator, using the right-click context menu.
## From the Class & ID Field
Copy/Paste
1. Select a desired block
2. Navigate to the Primary Tab
3. Select right-click on the desired block
4. Find the ID & Class Fields
5. Select the desired type and copy
## From the Navigator
Copy/Paste
1. Select a desired block
2. Open the Cwicly Navigator
3. Select right-click on the desired block
4. Find the ID & Class names
5. Select the desired type by clicking on it
# Dynamic Preview
Allows you to display content from a dynamic source and not use the current source currently provided by WordPress.
{% hint style="info" %}
Useful in cases like editing Templates and Template Parts, that don't provide any context.
{% endhint %}
## Set Up
Set
1. Navigate to the Cwicly Header toolbar
2. Select the Dynamic Preview icon
3. Select the text area
4. Start typing desired post/page
Remove
1. Navigate to the Cwicly Header toolbar
2. Select the Dynamic Preview icon
3. Select the blue indicator to remove the dynamic preview
---
[Next Page](/llms-full.txt/1)
