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
*𝘌𝘹𝘢𝘣𝘺𝘵𝘦𝘴 𝘪𝘴 𝘢 𝘵𝘰𝘱 𝘸𝘦𝘣 𝘩𝘰𝘴𝘵𝘪𝘯𝘨 𝘤𝘰𝘮𝘱𝘢𝘯𝘺 𝘣𝘢𝘴𝘦𝘥 𝘪𝘯 𝘔𝘢𝘭𝘢𝘺𝘴𝘪𝘢.
Nesta página do site você pode assistir ao vídeo on-line Bricks Builder - Custom Loop Query with CSS Grid | Tutorials duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Jornes 22 Agosto 2022, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 2,980 vezes e gostou 47 espectadores. Boa visualização!
