Bricks Builder - Custom Loop Query with CSS Grid | Tutorials
#bricksbuilder #tutorials #customloop #cssgrid #queryloop
I often see such a question in the Bricks Builder group.
"How to display 3 columns on a row, then the 4th loop item is on the next row, and so on?
In this video, I will share how you can efficiently achieve such a layout by implementing some custom code for the Grid Layout.
Let me know if there is anything I can do better in the following videos. TQ!
-- TIMESTAMPS --
00:00:00 - Bricks Builder - Intro
00:00:10 - Preview of CSS Grid
00:02:58 - Start to create
00:03:35 - Adding containers for the loop items
00:05:12 - Adding Dynamic Tag
00:06:23 - Enable Query Loop
00:07:25 - Applying CSS Grid
00:08:30 - Adding classes to those elements
00:10:54 - Start Styling the loop item
00:13:27 - Styling Post Title
00:16:14 - WPVivid Pro Discount Code
00:16:32 - Adding Hover Effect for Post Thumbnail
00:23:53 - The End of Video
#basicguidesharing #howto
*If you have any requests and want me to make a video for that, please, let me know by commenting below. :)
---------------------------------------------------------
★★★ 𝗣𝗹𝗮𝘆𝗹𝗶𝘀𝘁 𝗳𝗼𝗿 𝗕𝗿𝗶𝗰𝗸𝘀 𝗕𝘂𝗶𝗹𝗱𝗲𝗿 ★★★
► https://jt.my/yt-bricks
★★★ Not a 𝗕𝗿𝗶𝗰𝗸𝘀 𝗕𝘂𝗶𝗹𝗱𝗲𝗿 user yet? 𝗕𝘂𝘆 𝗶𝘁 𝗡𝗼𝘄 ★★★
► https://jt.my/bricks
*Create your website with #Bricks #Builder today
★★★ Which recorder do I use? It's 𝗕𝗮𝗻𝗱𝗶𝗰𝗮𝗺★★★
𝗕𝘂𝘆 𝗶𝘁 𝗡𝗼𝘄 ► https://jt.my/bandicam
*Create quality screen recording now with #bandicam
★★★ 𝗔𝗱𝗱𝗼𝗻𝘀 𝗳𝗼𝗿 𝗕𝗿𝗶𝗰𝗸𝘀 𝗕𝘂𝗶𝗹𝗱𝗲𝗿 ★★★
► BricksUltimate: https://jt.my/bricksultimate
► MaxAddons: https://jt.my/maxaddons
► BricksExtras: https://jt.my/bricksextras
► Yabe Webfont: https://jt.my/yabe
► WP Grid Builder: https://jt.my/wpgridbuilder
---------------------------------------------------------
☕☕ 𝗦𝘂𝗽𝗽𝗼𝗿𝘁 𝗠𝘆 𝗖𝗵𝗮𝗻𝗻𝗲𝗹 ☕☕
Buy me a coffee ► https://jt.my/buymecoffee
Buy a product ► https://jt.my/buy-with-support
---------------------------------------------------------
★★★ 𝙍𝙚𝙘𝙤𝙢𝙢𝙚𝙣𝙙𝙚𝙙 𝙒𝙋 𝙏𝙤𝙤𝙡𝙨 𝙬𝙞𝙩𝙝 𝙀𝙭𝙘𝙡𝙪𝙨𝙞𝙫𝙚 𝘿𝙞𝙨𝙘𝙤𝙪𝙣𝙩𝙨 ★★★
𝗦𝗮𝘃𝗲 𝗠𝗼𝗿𝗲 with 𝗘𝘅𝗰𝗹𝘂𝘀𝗶𝘃𝗲 𝗗𝗶𝘀𝗰𝗼𝘂𝗻𝘁 -
► WPVivid: https://jt.my/wpvivid ★20%
► MaxAddons: https://jt.my/maxaddons ★10%
► Yabe Webfont: https://jt.my/yabe ★30%
-
The 𝗖𝗼𝘂𝗽𝗼𝗻 𝗖𝗼𝗱𝗲 to enjoy 𝗘𝘅𝗰𝗹𝘂𝘀𝗶𝘃𝗲 𝗗𝗶𝘀𝗰𝗼𝘂𝗻𝘁 for all the above products (those have ★).
𝗖𝗼𝘂𝗽𝗼𝗻 𝗖𝗼𝗱𝗲: ►► Jornes ◄◄
*Use the links and coupon codes above to enjoy an exclusive discount on 𝗔𝗡𝗬 𝗣𝗹𝗮𝗻𝘀.
---
► BetterLinks: https://jt.my/betterlink
---------------------------------------------------------
★★★ 𝗥𝗲𝗰𝗼𝗺𝗺𝗲𝗻𝗱𝗲𝗱 𝗛𝗼𝘀𝘁𝗶𝗻𝗴 ★★★
► Hostarmada: https://jt.my/hosting
► Interserver: https://jt.my/hosting-demo
► Exabytes: https://jt.my/exa-wp
*𝘌𝘹𝘢𝘣𝘺𝘵𝘦𝘴 𝘪𝘴 𝘢 𝘵𝘰𝘱 𝘸𝘦𝘣 𝘩𝘰𝘴𝘵𝘪𝘯𝘨 𝘤𝘰𝘮𝘱𝘢𝘯𝘺 𝘣𝘢𝘴𝘦𝘥 𝘪𝘯 𝘔𝘢𝘭𝘢𝘺𝘴𝘪𝘢.
On this page of the site you can watch the video online Bricks Builder - Custom Loop Query with CSS Grid | Tutorials with a duration of hours minute second in good quality, which was uploaded by the user Jornes 22 August 2022, share the link with friends and acquaintances, this video has already been watched 2,980 times on youtube and it was liked by 47 viewers. Enjoy your viewing!
