Documentation
HomeForumHelp
  • About Cwicly
  • Beginner's Guide
    • Install Cwicly
    • Getting Started
      • Overview
      • Settings
    • Edit and Manage your Site
    • The WordPress Dashboard
    • The Dashboard Menu
    • Site Editor
    • Create your Front Page
      • Front Page
      • Header
        • Header Template Part
        • Structure
      • Footer
        • Footer Template Part
        • Structure
  • ⚡Cwicly
    • Block ID
    • Breakpoints
    • Class
      • Global/Block Classes
    • Cloud Design Library
      • Create an Account
      • Overview of the Cloud Dashboard
      • Editor: Cloud Library
        • Access from the Editor
        • Add a Library
        • Switch between Libraries
        • Default Library
        • Download Library
        • Remove Library
        • Categories
          • All
          • Popular
          • Button
          • Composition
          • Decorative
          • Interactive
          • Layout
          • Media
          • Menu
          • Social
      • Design Blocks: Cloud Library
        • Search for a Design Block
        • Refresh
        • Add Design Block
        • Save Design to Library
        • Remove Design Block
      • Library Globals
        • Library: Global Styles
          • Library: Add Styles
          • Installation: Add Styles
          • Library: Style Settings
        • Library: Global Classes
          • Library: Add Classes
          • Installation: Add Classes
          • Library: Class Settings
        • Library: Global Stylesheets
          • Library: Add Stylesheet
          • Installation: Add Stylesheet
          • Library: Stylesheet Settings
        • Library: External Classes
          • Library: Add External Classes
          • Installation: Add External Classes
          • Library: External Classes Settings
      • Community Library
        • Save to Community Library
        • Download from Community Library
        • Remove from Community Library
        • Set Community as default
    • Colour Picker
      • Gradient Builder
    • Components
      • Components Library
      • Components Folders
      • Settings
      • Component Properties Modal
      • Properties (Add)
        • Text Property
        • Rich Text Property
        • List Property
        • Link Property
        • Image Property
        • Gallery Property
        • Video Property
        • Icon Property
        • Colour Property
        • Toggle Property
        • Number Property
        • Class Property
        • ID Property
        • Options Property
        • Conditions Property
        • Visibility Property
        • CSS Text Property
    • Copy/Paste
      • Block Styles
      • Classes & IDs
      • Dynamic Preview
      • Global Styles
      • Global Classes & Stylesheets
      • Blocks
    • CSS Grid
    • Dynamic Inserter
    • Font Manager
    • Navigator
    • Quick Inserter
    • Scaling
    • Smart Inserter
    • Span
    • Tag
  • ⛵Tailwind
    • Getting Started
      • About
      • Activate
      • Copy/Paste
      • Enable editing mode
      • Apply a Class
      • Pseudo state Management
      • Automatically Sync
        • Breakpoints
        • Colours
      • Shells
      • Custom Tailwind Configuration
      • Import Tailwind Plugins
  • 🖌️Themer
    • Themer
      • Templates
      • Parts
      • Fragments
    • Role Editor
      • User Role
      • Gutenberg Editor
      • Global Block Behaviour
      • Block Toolbar
      • Miscellaneous
      • Components
      • Code Block
      • Blocks
      • Post Types
      • Force iFrame
      • Client Canvas View
      • Help
      • User
  • 🌐Global Styles
    • Global Styles
      • Global Colours
        • Folders
        • Colour tab
        • Palette tab
        • Modifiers tab
          • Opacity
          • Lighten
          • Darken
          • Saturate
          • Desaturate
          • Spin
      • Dark Mode
      • Global Gradients
      • Global Typography
      • Global Block Typography
      • Theme Elements
      • Global Settings
        • Defaults
        • Backend
      • Remove Gutenberg Global Styles
    • Global Classes & Stylesheets
      • Global Classes
      • Global Stylesheets
      • External Classes
  • 🎨Design
    • Background
      • Background Colors
      • Background Source
      • Sizing & Positioning
      • Styling
    • Typography
      • Typography
      • Rem conversion
      • Global Typography
      • Text Align
      • Font Family
      • Font Size
      • Font Weight
      • Spacing
      • Line Height
      • Style
      • Decoration
      • Transform
      • White Space
      • Overflow Wrap
      • Word Break
      • Word Spacing
      • Axes
      • Text Colour
      • Link Colour
    • Fluid Values
    • Layout
      • Display
      • Visual
      • Position
    • Sizing
      • Height
      • Width
    • Margin & Padding
    • Borders
      • Border
      • Shadows
      • Outline
    • Effects
      • General
      • Transitions
      • Animations
      • Filters
      • Text Shadow
      • Tilter
      • Separators
    • Transforms
    • Pseudo Classes/Elements
    • Relative Styling
  • 🎓Advanced
    • Custom CSS
    • Quick Code
    • Scrolling
      • Animate On Scroll
      • Scroll Direction
    • Attributes
    • Tooltip
      • Source
      • Theme
        • Custom Theme
  • 👆Interactions
    • Visibility Conditions
      • Blocks
      • Themer
    • Link
      • Link Source
      • Link Action
    • Interactions
      • Trigger
      • Actions
    • Hover Animation
    • Dynamic Slider
      • Settings Tab
  • 🖥️Editor
    • Inserter Panel
    • Quick Insert
    • Block Inspector
    • Primary Tab
    • Design Tab
    • Advanced Tab
    • Responsive Selector
  • 🔧Blocks
    • Accordions
    • Accordion
      • Basics
      • Settings
      • Colours
      • Layout
      • Typography
      • Margin and Padding
    • Button
      • Add
      • Icon
    • Code
      • Enable/Disable
      • Add
      • Languages
      • Settings
    • Columns
      • Basics
      • Add
      • Settings
      • Grid Editor
        • Auto Grid
        • Auto Template
    • Column
    • Container
    • Div
    • Filter
      • Basics
      • Filter Editor
      • Create a Filter
      • Style a Filter (example)
    • Fragment
    • Gallery
      • Filter
      • Source
      • Settings
      • Text
      • Image Style
    • Heading
    • Hook
    • Icon
    • Image
      • Source
      • Size
      • Settings
      • Hover Animation
    • Input
      • Input Settings
    • List
      • List Types
      • Settings
      • Icon
    • Maps
      • Settings
      • Size
      • Style
      • Overlay Layout
      • Colours
    • Menu
      • Settings
      • Main Menu
      • Sub Menu
      • Items
    • Modal
      • Modal Style
      • Settings
      • Trigger
      • Animation
    • Nav
      • Nav Block Settings and Styles
      • Nav Items Block
      • Nav Dropdown Block
      • Nav Link
      • Custom Dropdown Block
      • Nav Menu
    • Post Content
    • Paragraph
    • Popover
    • Query
      • Query Settings
      • Query Editor
        • Posts
        • Terms
        • Users
        • Comments
    • Query Template
      • Layout
      • Grid editor
    • Repeater
      • Nested Repeater
    • Section
    • Slider
      • Settings
      • Navigation
      • Dots
    • Slide
    • Styler
    • SVG Block
    • Tab List
      • Tab
    • Tab Contents
      • Tab Content
    • Taxonomy Terms
    • Video
      • Source
      • Settings
      • Div Overlay
  • ⚙️Settings
    • Settings
    • License
    • Icon Collections
    • Font Sets
    • Google Maps API
    • Advanced Settings
    • Regeneration
    • WooCommerce
  • 🛒WooCommerce
    • Archive Page
    • Attributes
      • Colour Type
      • Image Type
    • Cart
    • Product Variations
    • Create a Product Type
      • Simple
      • Variable
        • Create Attributes
      • Grouped
      • External
    • Build a Single Product Page
    • Dynamic Content
    • Link
  • 🗃️Miscellaneous
    • Blocks Specifics
    • Icon Selector
    • Trailing Slash
    • Units
      • Default Units
    • Code Snippets
    • Shortcuts
    • Actions
    • Filters
    • Browser Console
  • 🔗Resources
    • Changelog
    • Roadmap
    • Forum
Powered by GitBook
On this page
  • Components Library
  • Components Folders
  • Customise
  • Modify
  • Settings
  • Create a Component Property
  • Text Property
  • Rich Text Property
  • List Property
  • Link Property
  • Image Property
  • Gallery Property
  • Icon Property
  • Colour Property
  • Toggle Property
  • Number Property
  • Class Property
  • Options Property
  • Conditions Property
  • Visibility Property
  • CSS Text Property

Was this helpful?

  1. Cwicly

Components

Last updated 1 year ago

Was this helpful?

Components are an important Cwicly feature that allow you create independent, reusable pieces from a single place, while allowing you to consider each piece in isolation.

While templates allow you to produce many different pages from a single source, Components allow you to make many different versions of an element or group of elements without losing control over their structure or the way they behave.

Components allow you to create elements or groups of elements that you can use throughout your site, either as they are or customised to suit your needs. Since you can modify them from a single place you don’t have to revisit each one individually.

This helps maintain a consistent and efficient workflow.

You can reuse components in layouts that have the same content such as headers and footers and forms. Since you can edit them from a single place you can monitor how changes affect each part of that particular component.

Alternately, starting from a component, you can design unique content by modifying repeated layouts with customised text, image or video to give each a unique feel while keeping consistent design quality.

A Component does not need to have a containing wrapper such as a Div.

The Components Tool Bar contains Customise and Modify options which are specific to Components. It is important to understand the difference between these two options.

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.

Components Folders

Components Folders is more of a Components library where you can add, store, access, reorganise and delete your collection of Components Folders.

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.

The user role will determine access to and control over the contents of a particular Component.

  • Select the component you wish to modify.

  • In the Component Toolbar, select the "Modify" option.

  • Or in the Block Inspector click "Modify Component".

Settings

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

Create a Component Property

The Component Properties Modal allows you to modify your existing properties and to create new ones.

Text Property

The Text Property allows you to configure a text property.

Rich Text Property

The Rich Text Property allows you to add rich text to a component, such as bold, italic, underline or strikethrough.

List Property

The List Property allows you to add a list to a component. Input required information such as Name, Default, Placeholder, Canvas Placeholder.

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.

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.

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.

Icon Property

The Icon Property allows you to configure your icon property. You can input a Name and choose a suitable icon.

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.

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.

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.

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.

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 .

Conditions Property

The Conditions Property allows you to add Conditions to a component.

Visibility Property

The Visibility Property allows you to Show/Hide a block and set a default state.

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.

For further detail see .

⚡
Components Library
Components Folders
Settings
Component Properties Modal
Text Property
Rich Text Property
List Property
Link Property
Image Property
Gallery Property
Icon Property
Colour Property
Toggle Property
Number Property
Class Property
Options Property
Conditions Property
Visibility Property
CSS Text Property
Modify a Component