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
  • Top Separator
  • Separator Type
  • Separator Color
  • Separator Height
  • Separator Width
  • Flip Y
  • Flip X
  • Separator Shadow
  • Bottom Separator
  • Separator Type
  • Separator Color
  • Separator Height
  • Separator Width
  • Flip Y
  • Flip X
  • Separator Shadow

Was this helpful?

  1. Design
  2. Effects

Separators

When you have multiple sections in one page, it is nice to separate them with some kind of line or background. This is where separators come in to play.

Top Separator

Separator Type

The Separator Type property defines the style of the background divider that will be used.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separators tab

  6. Find the Type property

  7. Select the desired separator type value

Separator Color

The Separator Colour property defines the colour of the background separator.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Colour property

  7. Open the Colour Picker by clicking on the Colour circle in the text Colour property

  8. Select your Colour in the Colour Picker or click on a Global Colour

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects panel

  5. Select the Separator tab

  6. Find the Colour property

  7. Click dot(s) to reset

Separator Height

The Separator Height property defines the height of the background separator.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Height property

  7. Enter the desired separator height value

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Height property

  7. Click dot(s) to reset

Separator Width

The Separator Width property defines the width of the background separator.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Width property

  7. Enter the desired separator width value

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Width property

  7. Click dot(s) to reset

Flip Y

The Flip Y property allows you to flip the separator vertically.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Flip Y property

  7. Toggle the property to activate/deactivate

Flip X

The Flip X property allows you to flip the separator horizontally.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Flip X property

  7. Toggle the property to activate/deactivate

Separator Shadow

The Separator Shadow property adds a shadow to the background divider, giving it more depth.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Shadow property

  7. Toggle the property to activate/deactivate

Bottom Separator

Separator Type

The Separator Type property defines the style of the background divider that will be used.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separators tab

  6. Find the Type property

  7. Select the desired separator type value

Separator Color

The Separator Colour property defines the colour of the background separator.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Colour property

  7. Open the Colour picker by clicking on the Colour circle in the text Colour property

  8. Select your colour in the Colour Picker or click on a Global Colour

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects panel

  5. Select the Separator tab

  6. Find the Colour property

  7. Click dot to reset

Separator Height

The Separator Height property defines the height of the background separator.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Height property

  7. Enter the desired separator height value

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Height property

  7. Click dot(s) to reset

Separator Width

The Separator Width property defines the width of the background separator.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Width property

  7. Enter the desired separator width value

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Width property

  7. Click dot(s) to reset

Flip Y

The Flip Y property allows you to flip the separator vertically.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Flip Y property

  7. Toggle the property to activate/deactivate

Flip X

The Flip X property allows you to flip the separator horizontally.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Flip X property

  7. Toggle the property to activate/deactivate

Separator Shadow

The Separator Shadow property adds a shadow to the background divider, giving it more depth.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Shadow property

  7. Toggle the property to activate/deactivate

Toggle
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Open the Separator tab

  6. Choose Top or Bottom and toggle on

  7. Find the Shadow property

  8. Toggle on/off

Last updated 2 years ago

Was this helpful?

🎨