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 Folders
  • Add Folder
  • View
  • Rename
  • Change Colour
  • Add Icon
  • Delete Folder
  • Sort Folders
  • Return
  • Components
  • Add
  • Add to Page
  • Sort
  • Delete

Was this helpful?

  1. Cwicly
  2. Components

Components Folders

Last updated 1 year ago

Was this helpful?

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.

This will delete the Components Folder itself but not permanently delete the Components nested inside.

  • 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.

You need to activate "Sort Components" before you attempting to sort your Components otherwise the component will be added to your page by default.

  • 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.

This will delete the Components from the Folder but not remove the Components permanently.

  • 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.

⚡