# Query template

# Query Template

A Cwicly Query template block sets out a graphical interface that helps run a Query with different parameters. This means you can change values that a query uses without special knowledge of coding quickly and efficiently.

You can customize colors in the same way as a Query block. You can also customize the Query Template Layout by modifying grid type, height and row gap and column gap.

The Cwicly Query Template block is added inside a Cwicly Query Block.

  1. Open the Quick Insert panel in the Query block
  2. Search for the Cwicly Query Template block
  3. Click on the Cwicly Query Template block to insert it into your Cwicly Query block

# Query block colors

The Colors property allows you to change the Colors of the content in your Query Template block, including Text color, Link color, Background color.

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Colors panel
  5. Modify the Colors of your text, link, background
  1. Select a Query Template block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Colors panel
  5. Click appropriate button to remove modifications to the Colors of your text, link, background

# Query Template block Layout

The Layout property 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.

# Display

The Display property allows you to show how you want your Posts or Pages displayed. By default this is as a Grid layout but you have other choices including flex, inline-flex, block, inline-block, inline, table or none (if you want nothing displayed).

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Select required type in the Display dropdown panel

# 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 customize row gap and column gap.

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click - to activate Masonry layout
  6. Modify row gap and column gap
  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click - to deactivate Masonry layout

# Auto Grid

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

In other words, 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.

Without Auto grid, 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.

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click - to activate/deactivate Auto Grid

# Edit Grid Layout

The Edit Grid layout property allows you to visually edit & design your Query template Grid layout.

You can add or remove Modules or Fractions, and adjust Height, Row Gap and Column Gap.

# Module

The Module button, allows you to add the number of Modules you set for the row. A Module can be thought of as a placeholder for your Query template Item blocks.

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. Click to add a Module
  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. Click on the cross on a visual module to remove

# Fractions

Adding fractions leaves ‘potential’ space in case you want to add more modules or ‘stretch’ modules to make uneven columns that will be duplicated in subsequent rows. Adding fractions will allow you to add more Modules to your row.

This is only ‘potential’ space because the auto grid system will base the grid layout on the module skeleton.

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. Add/remove Fractions

# Set Minimum Height, Row Gap or Column Gap

Minimum Height, Row Gap or Column Gap can be modified in the Grid Layout or directly from the primary tab in the block inspector.

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. Modify Minimum Height, Row Gap or Column Gap
  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. Click appropriate button to reset Minimum Height, Row Gap or Column Gap
  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Navigate to Minimum Height, Row Gap, Column Gap
  6. Modify Minimum Height, Row Gap, Column Gap
  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Navigate to Minimum Height, Row Gap, Column Gap
  6. Click appropriate button to reset Minimum Height, Row Gap or Column Gap

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

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Navigate to Auto Template
  6. Click - button to activate/deactivate Auto Template
  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click to activate Auto Template
  6. Choose between Auto Fit and Auto Fill