The Term Tiles element in Screenflicker Bricks creates a flexible grid showcasing different taxonomies. There are several different grid layouts and many options available in this element. It can be used for posts, products, categories, and terms.
Activate the element
This element is active by default. If it does not show in the elements list of Bricks Builder you can turn in on from the WordPress admin menu. Go to the Dashboard -> Screenflicker -> Elements -> General Elements page. You should be able to see a list of all of the general elements included with Screenflicker Bricks and their current status (enabled or disabled).
Find “Term Tiles” and make sure the toggle button is enabled.
Then click “Save Settings”.
With the element enabled, load up your template, page, or post in Bricks Builder.
How to use Term Tiles
Adding Term Tiles to your page is as simple as dragging the element onto your layout in Bricks Builder. Like all the elements in Bricks Builder, you can drag and drop it anywhere in the structure of your page.
Look through the list of options below to learn how to change the element for your website.
Controls
Layout
Layout – This control determines the layout of the item in the grid. There are currently seven layouts to choose from showing between four and five items per layout.
Height – Sets the height of the grid. Default is 400px.
Show count – When enabled this will add the number of posts to the title in the chosen taxonomy for each tile.
Border – Sets the borders around each item in the grid.
Query
This control is like all other query loop controls in Bricks Builder. Below are the most important controls to pay attention to when using the Term Tiles element.
Type – Sets what type of query to perform. Options include posts, terms, users, cart content (requires Woocommerce), product galleries (requires Woocommerce), and any other custom queries.
Taxonomies – Sets what taxonomy the query is run against. Options are dependent on what other plugins you have installed. Base options are categories and posts.
Order by – Sets what column in the database to order the results on.
Order – Sets what direction to sort the results. Options are ascending and descending. Default is ascending.
Number – Sets the number of results to return in the query. No number is set by default so it will return all results it can find. For smaller websites this may be okay, but it is suggested to set a number with this control to reduce load on the database and response times.
Terms (Exclude) – Sets which taxonomies to exclude from the query. Suggestion is to exclude the “Uncategorized” category.
Show empty – Sets if the query should include taxonomies with no posts. Default is disabled.
Text
This set of controls manages how the text is displayed for each tile.
Vertical align – Sets the vertical alignment of text in each tile. Options include top (start), center (middle), end (bottom). Default is end (bottom).
Align text – Sets the horizontal alignment of the text in each tile. Options include left, center, right, and justified.
Show background – Enabling this control will show a background color behind the text.
Color – Sets what color is shown behind the text in each tile. Requires Show background to be enabled.
Title
Show title – Sets whether the title will be shown on each tile.
Margin/Padding – Sets the margin and padding for the title in each tile. Requires Show title to be enabled.
Title tag – Sets what html tag to use for the titles in each tile. Options include h1, h2, h3, h4, h5, and h6. Requires Show title to be enabled.
Typography – Sets the font properties for the title only in each tile. Requires Show title to be enabled.
Border – Sets the border for the title only in each tile. Requires Show title to be enabled.
Description
Show description – Sets whether the taxonomy description is shown on each tile. Default is disabled.
Margin/Padding – Sets the margin and padding for the description in each tile. Requires Show description to be enabled.
Description tag – Sets what html tag to use for the description text. Options include div, p, span, em, and strong. Requires Show description to be enabled.
Typography – Sets the font properties on the description text. Requires Show description to be enabled.
Border – Sets the border properties for the description text. Requires Show description to be enabled.
Overlay
Show overlay – Toggles whether a color overlay is shown over the entire tile. Overlay covers the height and width of the tile, but is behind the text if any is shown.
Overlay color – Sets the color of the overlay being shown. Recommendation: set the color to a lower transparency if your taxonomy has images.