23rd May '22
/
0 comments

“Pro” Category Ribbon for Posts in Bricks

“Pro” Category Ribbon for Posts in Bricks

This Pro tutorial provides the steps to show a "Pro" ribbon for posts that are categorized under the "Pro" category when using Bricks builder.

Step 1

Add a Section having a Container.

Add a Container element inside.

Toggle "Use Query Loop" on.

Click on the Query icon and configure your WP query.

Add a Container inside the above Container and rename it to say, "Ribbon". Give it a class of ribbon.

Add a Heading inside the Container. Rename it to say, "Ribbon Title". Give it a class of ribbon__title.

Step 2

Add the following in your child theme's functions.php:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
How to Insert Element(s) Between Query Loop Posts in Bricks

How to Insert Element(s) Between Query Loop Posts in Bricks

Update on 16 Aug 2023: Follow this tutorial instead. This Pro tutorial shows how we can insert a Div (or any custom HTML) after nth…
Pro
Bricks Dynamic Data Tag for Text-type Custom Field Value with Word Limit

Bricks Dynamic Data Tag for Text-type Custom Field Value with Word Limit

How to register a new dynamic tag for setting excerpt word limits and outputting an ellipsis (...) at the end.
Categories:
Pro
Mmenu Light in Bricks

Mmenu Light in Bricks

Here's the steps to implement Mmenu Light for a sliding OffCanvas mobile menu in Bricks.
Categories:
Width and Height of Mobile Hamburger Toggle in Bricks

Width and Height of Mobile Hamburger Toggle in Bricks

Looking to change the size of Bricks hamburger toggle in the mobile menu? The default width value of 20px can be changed by selecting the…
Categories:
Dynamic Data :value filter in Bricks

Dynamic Data :value filter in Bricks

Bricks 1.5.7 introduced a new :value dynamic data filter. This tutorial provides a practical example of how this filter can be used. Meta Box Checkbox…
Categories:
Pro
Inserting Random Ad Between Posts in Bricks

Inserting Random Ad Between Posts in Bricks

How to insert random ads (post type) in between regular posts on the blog page.
Categories:
Pro
Codrops Dynamic Shape Overlay in Bricks

Codrops Dynamic Shape Overlay in Bricks

This Pro tutorial provides the steps to implement Codrops' SVG shape overlay in Bricks. We shall display a WordPress menu in the overlay after an…
Categories: