23rd May '22/0 comments“Pro” Category Ribbon for Posts in BricksSridhar Katakam 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 Username Password Remember Me Forgot Password Tagged: BricksDynamic DataProSridhar KatakamSridhar Katakam is a Bricks enthusiast. He likes helping others by researching and solving WordPress-related problems and building websites.Get access to all 633 Bricks code tutorials with BricksLabs Pro
Pro Primary Term Name and Link in Bricks when using Rank MathOne of the features of the Rank Math SEO plugin is the ability to mark a term like category or product category as primary. See…Read more →Categories: Bricks, Plugins, ProTags: Dynamic Data, Rank Math
Pro Stripe’s Animated Gradient in BricksThis Pro tutorial provides the steps to set up an animated gradient as a background of a section in Bricks using the code generated by…Read more →Categories: Bricks, ProTags: Animations
Width and Height of Mobile Hamburger Toggle in BricksLooking to change the size of Bricks hamburger toggle in the mobile menu? The default width value of 20px can be changed by selecting the…Read more →Categories: Bricks, FreeTags: CSS, Mobile Menu
Pro Click-type Infinite Scroll in Bricks BuilderThis Pro tutorial provides the steps to set up "click to load more" posts using Infinite Scroll JS in Bricks builder. Step 1 Edit your…Read more →Categories: Bricks, ProTags: Infinite Scroll
Pro Reading Progress Bar in BricksThis Pro tutorial provides the steps to implement a reading progress bar in Bricks builder. Step 1 Add the progress element as the first child…Read more →Categories: Bricks, ProTags: Reading Progress
Pro Bricks Query Loop Cards with Hover ImageHow images uploaded to posts can appear when the featured images in a Bricks posts query loop are hovered.Read more →Categories: Bricks, Plugins, ProTags: Hover Image
Pro Filtering Masonry-layout Posts by Categories in Bricks using IsotopeStep by step on how to use Isotope in Bricks for filtering posts by categories.Read more →Categories: Bricks, ProTags: Isotope, Masonry
Floating Element in BricksHow to create a floating element in Bricks that appears across the entire website.Read more →Categories: Bricks, FreeTags: Hooks
Pro CSS Grid for Posts Element in BricksThe "Posts" element in Bricks has "Grid" as the default layout but the actual CSS it applies on the page feels hacky with negative margins…Read more →Categories: Bricks, ProTags: CSS, CSS Grid, Posts