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
  • Open
  • Global Fragment (Header or Footer).
  • Add
  • Select
  • Edit
  • Set Visibility Conditions
  • Remove
  • Create Template Part
  • Custom Fragment
  • Add
  • Add Template Part
  • Rename
  • Remove

Was this helpful?

  1. Themer
  2. Themer

Fragments

Last updated 1 year ago

Was this helpful?

Fragments are collections of template parts that can be used globally across multiple templates.

By default, there are fragments for both a global header and a global footer but you can create your own fragments and add template parts to them.

By default, headers are automatically set at the top, and footers at the bottom of your page.

The Fragments Tab allows you to add global headers and footers as well as any other template parts throughout your website to speed up your workflow.

You can set conditions for where and when a global part appears with no need to add them manually to a template.

You can also use quick access buttons to create template parts and add fragments.

Open

  • Navigate to the Wordpress Dashboard

  • Find Cwicly.

  • Click to open the Fragments tab.

Global Fragment (Header or Footer).

The Global Header Fragment allows you to regroup the template parts you want to appear globally in the Header position at the top of the page.

The Global Footer Fragment allows you to regroup the template parts you want to appear globally in the Footer position at the bottom of the page.

From here, you can set the conditions for how and when they appear to speed up your workflow and improve organisation.

Add

  • Navigate to the Wordpress Dashboard

  • Find Cwicly.

  • Click to open the Fragments tab.

  • Find Global Header or Footer.

  • Click "+" button to add a new template part.

Select

  • Click "Select Template Part" in the dropdown and choose which template part you wish to edit, apply conditions to or delete.

Edit

The Edit template icon allows you quick access to the Editor where you can edit the selected template within the fragment.

Either click anywhere in the template part or click the edit icon to take you to the Editor.

  • Click "Edit" icon to take you to the template editor.

  • Click the "Edit" icon or anywhere in the template to open in the Editor.

Set Visibility Conditions

Visibility Conditions can be set for your Global Header or Footer to allow you to choose how and when you want each template part in the fragment to be displayed.

  • Find the global template part to which you want to set Visibility Conditions.

  • Click the Visibility Conditions icon to open the Conditions modal.

  • Set required conditions.

  • Click "X" icon to close modal.

Remove

Global template parts Headers and Footers can be removed from a fragment.

This will not permanently delete the template part but simply remove it from the fragment.

  • Select template part you wish to remove from a fragment.

  • Click the "Delete" icon to remove.

Create Template Part

The Create Template Part is a quick access button which allows you to add a template part without being redirected to the editor's template parts section.

You can name your template part and then edit its content once it has been added to a fragment.

  • Navigate to the Wordpress Dashboard.

  • Click to open the Global Parts tab.

  • Navigate to Fragments.

  • Click quick access button "+ Template Part" to open the New Template Part modal.

  • Input required template part name.

  • Click "Create" to create template part.

  • Click "X" icon to close Create Template Parts modal

Custom Fragment

You can create a custom fragment to which you can add one or multiple template part(s) to your new custom fragment.

You can name your fragment and then edit its content once it has been added to the Cwicly Themer as a custom fragment.

Your Custom fragments are visible in the Fragment tab under "Custom".

Add

  • Navigate to the Wordpress Dashboard.

  • Click to open the Global Parts tab.

  • Navigate to Fragments.

  • Click " + Fragment" button to open the "New Fragment" modal.

  • Input required Fragment name.

  • Click "Create" to create Fragment.

  • Click "X" icon to close Fragment modal.

  • The new fragment is visible in the Custom section.

Add Template Part

Add Template Part allows you to add template parts to your Custom fragment.

  • Navigate to the Wordpress Dashboard.

  • Click to open the Global Parts tab.

  • Navigate to Fragments.

  • Navigate to Fragment to which you wish to add a template part.

  • Click "+" icon to add a new template part.

Rename

This allows you to rename a Custom fragment.

  • Navigate to the Wordpress Dashboard.

  • Click to open the Global Parts tab.

  • Navigate to Fragments.

  • Navigate to the Fragment t you wish to rename.

  • Click "Rename" icon to open the "Rename Fragment" modal.

  • Input required name and click "Rename".

Remove

The Remove Fragment icon allows you to remove a Custom fragment.

  • Navigate to the Wordpress Dashboard.

  • Click to open the Global Parts tab.

  • Navigate to Fragments.

  • Navigate to Fragment to be removed.

  • Click remove icon to delete Fragment permanently.

This will not delete the template parts in the fragment.

Open the Themer.

Open the Themer.

For detailed information about visibility conditions and operators, please see .

Open the Themer.

Open the Themer.

Open the Themer.

Open the Themer.

Open the Themer.

🖌️
Visibility Condition
How To - Global Parts & Fragments