#
Query
The Query block is an Archive post layout that sets the options to show and categorise single posts. The Query block is a vital part of every block-based theme and furthur customizations always start with the Query block.
The Query requires a collection of same category posts so it is important to have these before you build your Query.
It is recommended to add a Query block inside a Section.
If you want to add a Query block inside a parent block:
- Open the Quick Insert panel in the parent block
- Search for the Cwicly Query block
- Click on the Cwicly Query block to insert it into your parent block
If you want to add a Query block outside any other block on the page:
- Click on the ➕ icon to open the Inserter Panel
- Search for the Cwicly Query block
- Click on the Cwicly Query block to insert it into your page
#
Query block colors
The Colors
property allows you to change the Colors of the content in your Query block, including Text
color, Link
color, Background
color.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Colors panel
- Modify the Colors of your text, link, background
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Colors panel
- Click appropriate button to remove modifications to the Colors of your text, link, background
#
Inherit Query from URL
By default the Query block inherits the data from the URL. If you want to specify a particular taxonomy or term then you will need to deactivate the Inherit Query from URL.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Query Settings panel
- Toggle the Inherit Query from URL property to activate or deactivate it
#
Items per page
The Items per page
property allows you to choose how many Items you wish to display on your page. By default this is set to 3, but you can add or remove Items by changing the numerical value.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Query Settings panel
- Add or reduce the number of Items per page
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Query Settings panel
- Click Items per page button to reset to default
#
Offset
The Offset
property offsets the number of Items you set. For example an Offset of 1 will make the second item become the first.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Query Settings panel
- Add an Offset using the upp arrow
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Query Settings panel
- Click Offset button to reset
#
Post Type
The Post Type
property allows you to choose between Post or Page.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Query Settings panel
- Toggle Post Type to choose between Post or Page.
#
Order By
The Order by
property allows you to choose the order in which you want your Items displayed, such as Newest to Oldest, Oldest to Newest, A to Z, Z to A
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Query Settings panel
- Toggle 'Order By' to choose order (Newest to Oldest, Oldest to Newest, A to Z, Z to A)
#
Sticky
The Sticky
property allows you to select certain Items, using Include, Exclude, Only.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Query Settings panel
- Select Include, Exclude, Only in dropdown menu
#
Query Filters
The Query Filters
property allows you to set filters for locating your Items such as Categories
, Author
or Keyword
.
#
Categories
The Categories
property allows you to type in the name of a Post or Pages category or categories as a Query filter. Each Category chosen must be separated by a comma or the Enter key.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Query Filters panel
- Type in Category name or names.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Query Filters panel
- Click X next to Category name or names to be removed.
#
Author
The Author
property allows you to type in or select in a dropdown the author of Items as a Query filter.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Query Filters panel
- Type in Author name or select author in dropdown.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Query Filters panel
- Select All.
#
Keyword
The Keyword
property allows you to select a Keyword as a Query filter for Items.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Query Filters panel
- Type in a Keyword as a Query filter.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Query Filters panel
- ?
#
Infinite Load More
Infinite Load More allows you to load additional elements when you reach the end of the page. You can choose between Scroll or Button as a means of Navigation
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Infinite Load More panel
- Click - to Infinitely Load More
- Choose Scroll or Button in the dropdown
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Infinite Load More panel
- Click - to deactivate
#
Threshold
The Threshold
property allows you to set the distance between the viewport to scroll area for the scroll-Threshold event to be triggered. The default setting is 400 px.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Infinite Load More panel
- Modify the Threshold by scrolling up or down
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Infinite Load More panel
- Click Threshold button to reset
#
Direction
The Direction
property allows you to choose the scrolling direction. At present only vertical scrolling is possible.
#
Loading Icon
The Loading Icon
property allows you to display a dynamic icon while the next page is loading.You can modify the color of the Loading Icon.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Infinite Load More panel
- Choose a Loading Icon in the dropdown menu
- Modify color as required
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Infinite Load More panel
- Click Loading Icon button to reset OR NOT
#
History
The History
property allows you to choose whether to disable history completely, change the current history entry or create new history entries.
The Disable
property allows you to disable browser history.
The Replace
property allows you to change current history entry so that going back in the browser will return the user to the previous state.
The Push
property allows you to create new history entries so that going back in the browser will load the previous page.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Infinite Load More panel
- Choose History in the dropdown menu (-disable, Replace, Push)
#
End
The End
property allows you to choose the last page you want to load.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Infinite Load More panel
- Add an End element by typing in End ID
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Infinite Load More panel
- Click on End button to reset
#
Error
The Error
property allows you to display an error in loading.
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Infinite Load More panel
- Add Error by typing in Error ID
- Select a Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Infinite Load More panel
- Click on Error button to reset
#
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.
- Open the Quick Insert panel in the Query block
- Search for the Cwicly Query Template block
- 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.
- Select a Template Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Colors panel
- Modify the Colors of your text, link, background
- Select a Query Template block
- Open the block inspector
- Navigate to the primary tab
- Open the Colors panel
- 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
.
By default, the Query Template block will have a 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 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).
- Select a Template Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Layout panel
- 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.
- Select a Template Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Layout panel
- Click - to activate Masonry layout
- Modify row gap and column gap
- Select a Template Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Layout panel
- 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.
If you want to add or remove Items, you need to go to the Query settings of the Query Block and modify the Items per page.
- Select a Template Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Layout panel
- 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.
You cannot add more modules than the number of fractions you have set.
- Select a Template Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Layout panel
- Click the Edit Grid Layout button to open Grid Layout
- Click to add a Module
- Select a Template Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Layout panel
- Click the Edit Grid Layout button to open Grid Layout
- 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.
- Select a Template Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Layout panel
- Click the Edit Grid Layout button to open Grid Layout
- 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.
- Select a Template Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Layout panel
- Click the Edit Grid Layout button to open Grid Layout
- Modify Minimum Height, Row Gap or Column Gap
- Select a Template Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Layout panel
- Click the Edit Grid Layout button to open Grid Layout
- Click appropriate button to reset Minimum Height, Row Gap or Column Gap
- Select a Template Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Layout panel
- Navigate to Minimum Height, Row Gap, Column Gap
- Modify Minimum Height, Row Gap, Column Gap
- Select a Template Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Layout panel
- Navigate to Minimum Height, Row Gap, Column Gap
- 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.
- Select a Template Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Layout panel
- Navigate to Auto Template
- Click - button to activate/deactivate Auto Template
- Select a Template Query block
- Open the block inspector
- Navigate to the primary tab
- Open the Layout panel
- Click to activate Auto Template
- Choose between Auto Fit and Auto Fill