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
  • Display
  • Masonry layout
  • Auto Grid
  • Auto grid activated
  • Auto grid deactivated
  • Auto Template
  • Auto Fill
  • Auto Fit
  • Set Minimum Height, Row Gap or Column Gap

Was this helpful?

  1. Blocks
  2. Query Template

Layout

Last updated 2 years ago

Was this helpful?

The Layout tab allows you to modify how your Items are displayed in your Query Template block. This includes Display, Grid Type, Auto Grid, Auto Template as well as Height, Column and Row Gap.

By default, the Query Template block will have an Auto Grid layout. If you want a Masonry layout you will need to activate it.

Display

The Display property allows you to show how you want your Posts or Pages displayed.

By default this is set to Grid layout but you have other choices including flex, inline-flex, block, inline-block, inline, table or none (if you want nothing displayed).

Choose
  1. Select a Template Query block

  2. Open the block inspector

  3. Navigate to the primary tab

  4. Open the Layout tab

  5. Select required type in dropdown

Masonry layout

The Masonry property allows you to choose a Masonry grid layout based on columns with no fixed height so that images in additional rows will rise up to fill the gaps.

With Masonry layout selected, you can customise: number of columns, row gap and column gap.

Activate
  1. Select a Template Query block

  2. Open the block inspector

  3. Navigate to the primary tab

  4. Open the Layout tab

  5. Click dot to activate Masonry layout

  6. Modify (number of columns, row gap and column gap)

Deactivate
  1. Select a Template Query block

  2. Open the block inspector

  3. Navigate to the primary tab

  4. Open the Layout tab

  5. Click dot to deactivate Masonry layout

Auto Grid

Auto grid activated

The Auto Grid setting means that Cwicly will automatically repeat the row layout you have set out in the Edit Grid Layout.

The Query Template layout that you set out is not dependent on your Items.

The Items you add are automatically placed following the layout skeleton you have defined in the Auto grid layout.

Auto grid deactivated

With Auto grid deactivated, you have complete freedom as to how you design your Items, how they look and feel. With auto grid turned off, each module is now unique as it is not reproduced in subsequent rows.

If you want to add or remove Items, you need to go to Pagination in the Query settings of the Query Block and modify the number of Items per Page.

Activate/Deactivate
  1. Select a Template Query block

  2. Open the block inspector

  3. Navigate to the primary tab

  4. Open the Layout panel

  5. Click dot to activate/deactivate Auto Grid

Auto Template

The Auto Template property automatically adjusts the responsiveness of the Query template layout for the different screen sizes available.

When the auto template setting is selected, you can choose whether to use Auto Fill or auto Fit.

Auto Fit is automatically selected and will fit your blocks into the available space.

If Auto Fill is selected, the width that has been chosen will be respected rather than the space available.

Toggle on/off
  1. Select a Template Query block

  2. Open the block inspector

  3. Navigate to the primary tab

  4. Open the Layout tab

  5. Find Auto Grid

  6. Click dot to toggle Auto Grid

Auto Fill

With Auto Fill selected, the width that has been chosen will be respected rather than the space available.

Toggle
  1. Select a Template Query block

  2. Open the block inspector

  3. Navigate to the primary tab

  4. Open the Layout tab

  5. Click to activate Auto Template

  6. Find Auto Fill

  7. Toggle on/off

Auto Fit

With Auto Fit selected, your blocks will be fitted into the available space.

Toggle
  1. Select a Template Query block

  2. Open the block inspector

  3. Navigate to the primary tab

  4. Open the Layout tab

  5. Click to activate Auto Template

  6. Find Auto Fit

  7. Toggle on/off

Set Minimum Height, Row Gap or Column Gap

Minimum Height, Row Gap or Column Gap can be modified in the Layout Tab but also from the grid editor.

Modify
  1. Select a Template Query block

  2. Open the block inspector

  3. Navigate to the primary tab

  4. Find Grid Editor tab

  5. Open Grid Editor

  6. Find Minimum Height, Row Gap, Column Gap

  7. Modify Minimum Height, Row Gap or Column Gap as required

🔧