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
  • Exit Modify Component area
  • Modify Name
  • Styles
  • Add
  • Reset
  • Remove
  • Move
  • Create Style Collection Group
  • Add
  • Remove Style Collection Group
  • Name
  • Add Styles
  • Remove Style
  • Move Collections
  • Properties
  • Add
  • Move Property
  • Move to Group
  • Create a new Group.
  • Name
  • Move

Was this helpful?

  1. Cwicly
  2. Components

Settings

Last updated 1 year ago

Was this helpful?

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

  • Select required component.

  • Click Modify in the Toolbar or Block inspector.

  • The component name can be found at the top left.

Exit Modify Component area

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

Modify Name

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

Styles

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

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

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

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

Style 1 is applied by default.

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

Add

The add property allows you to add a new Style.

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

Reset

  • Click the "Reset" icon to reset applied styles.

Remove

  • Click Remove icon to delete a Style.

Move

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

The top Styles preset is applied by default.

Create Style Collection Group

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

This allows you to group styles together.

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

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

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

  • Select a Component.

  • Select Modify in the Toolbar or Block Inspector.

  • Click the activate icon next to the style you wish to be available.

  • The activate icon will turn green.

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

Add

  • Click Add New Style Collection.

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

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

Remove Style Collection Group

  • Click the Remove icon to remove a Style Collection Group.

Name

Input suitable Style Group name.

Add Styles

You can add new Styles to your Style Collections.

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

  • Select required Style in the dropdown.

Remove Style

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

Move Collections

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

  • Grab the drag icon next to the Style Collection you wish to move.

  • Drop where required.

Properties

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

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

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.

.

⚡