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. :)

---------------------------------------------------------

★★★ 𝗗𝗼𝘄𝗻𝗹𝗼𝗮𝗱 𝗖𝗦𝗦 𝗖𝗼𝗱𝗲 & 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗝𝗦𝗢𝗡 𝗙𝗶𝗹𝗲 ★★★
You can download the CSS Code for the grid layout and the template JSON file to further study how I make it.
···

---------------------------------------------------------

★★★ 𝗣𝗹𝗮𝘆𝗹𝗶𝘀𝘁 𝗳𝗼𝗿 𝗕𝗿𝗶𝗰𝗸𝘀 𝗕𝘂𝗶𝗹𝗱𝗲𝗿 ★★★

★★★ Not a 𝗕𝗿𝗶𝗰𝗸𝘀 𝗕𝘂𝗶𝗹𝗱𝗲𝗿 user yet? 𝗕𝘂𝘆 𝗶𝘁 𝗡𝗼𝘄 ★★★
*Create your website with #Bricks #Builder today

★★★ 𝗔𝗱𝗱𝗼𝗻𝘀 𝗳𝗼𝗿 𝗕𝗿𝗶𝗰𝗸𝘀 𝗕𝘂𝗶𝗹𝗱𝗲𝗿 ★★★

---------------------------------------------------------

☕☕ 𝗦𝘂𝗽𝗽𝗼𝗿𝘁 𝗠𝘆 𝗖𝗵𝗮𝗻𝗻𝗲𝗹 ☕☕

---------------------------------------------------------

★★★ 𝙍𝙚𝙘𝙤𝙢𝙢𝙚𝙣𝙙𝙚𝙙 𝙒𝙋 𝙏𝙤𝙤𝙡𝙨 𝙬𝙞𝙩𝙝 𝙀𝙭𝙘𝙡𝙪𝙨𝙞𝙫𝙚 𝘿𝙞𝙨𝙘𝙤𝙪𝙣𝙩𝙨 ★★★
- 𝗦𝗮𝘃𝗲 𝗠𝗼𝗿𝗲 with 𝗘𝘅𝗰𝗹𝘂𝘀𝗶𝘃𝗲 𝗗𝗶𝘀𝗰𝗼𝘂𝗻𝘁 -
-
The 𝗖𝗼𝘂𝗽𝗼𝗻 𝗖𝗼𝗱𝗲 to enjoy 𝗘𝘅𝗰𝗹𝘂𝘀𝗶𝘃𝗲 𝗗𝗶𝘀𝗰𝗼𝘂𝗻𝘁 for all the products(those have ★) above.
𝗖𝗼𝘂𝗽𝗼𝗻 𝗖𝗼𝗱𝗲: ►► Jornes ◄◄
*Use the links above and the coupon code above to enjoy an exclusive discount on 𝗔𝗡𝗬 𝗣𝗹𝗮𝗻𝘀.
---

---------------------------------------------------------

★★★ 𝗥𝗲𝗰𝗼𝗺𝗺𝗲𝗻𝗱𝗲𝗱 𝗛𝗼𝘀𝘁𝗶𝗻𝗴 ★★★
*𝘌𝘹𝘢𝘣𝘺𝘵𝘦𝘴 𝘪𝘴 𝘢 𝘵𝘰𝘱 𝘸𝘦𝘣 𝘩𝘰𝘴𝘵𝘪𝘯𝘨 𝘤𝘰𝘮𝘱𝘢𝘯𝘺 𝘣𝘢𝘴𝘦𝘥 𝘪𝘯 𝘔𝘢𝘭𝘢𝘺𝘴𝘪𝘢.
--
*𝘞𝘪𝘵𝘩 𝘮𝘺 𝘭𝘪𝘯𝘬 𝘧𝘰𝘳 𝘛𝘪𝘥𝘪𝘰, 𝘵𝘩𝘦 𝘧𝘪𝘳𝘴𝘵 50 𝘤𝘶𝘴𝘵𝘰𝘮𝘦𝘳𝘴 𝘤𝘢𝘯 𝘢𝘥𝘥𝘪𝘵𝘪𝘰𝘯𝘢𝘭𝘭𝘺 𝘨𝘦𝘵 20% 𝘰𝘧𝘧 𝘈𝘕𝘠 𝘴𝘶𝘣𝘴𝘤𝘳𝘪𝘱𝘵𝘪𝘰𝘯 𝘱𝘭𝘢𝘯! 𝘛𝘩𝘦 𝘥𝘪𝘴𝘤𝘰𝘶𝘯𝘵 𝘸𝘪𝘭𝘭 𝘰𝘯𝘭𝘺 𝘣𝘦 𝘢𝘱𝘱𝘭𝘪𝘦𝘥 𝘸𝘩𝘦𝘯 𝘱𝘶𝘳𝘤𝘩𝘢𝘴𝘪𝘯𝘨 𝘵𝘩𝘦 𝘱𝘭𝘢𝘯 𝘵𝘩𝘳𝘰𝘶𝘨𝘩 𝘮𝘺 𝘭𝘪𝘯𝘬.

Рекомендации по теме

Комментарии

Hey 👋
Have my videos helped to solve your needs? You may support my YouTube Channel by buying me a coffee.
It would mean a lot to me. I'll keep adding more videos to my channel. 😊😊😊

Jornes

Thanks, @Jornas!!!
You solved my problem.
i was used to building with Elementor before, but now i am shifting over to Bricks, as it gives more control with a clean backend code.

ahmadusman

Nice tutorial, thanks for sharing!
As many people told you, you absolutely need a voice over. It's hard to follow a 24 mn tutorial without comments, and therefore I am sure it hurts your YouTube metrics like "watch time/retention" .

Ppackard

Consider to Piotnet Bricks Addons <3

trandung

Is it possible to use Query loop with CSS Grid but with woocommerce products?

mateakovacevic

Realy niceky done
Question why did you use blocks and not divs?
Do you have the json files for download so others can study them

erling

Bricks Builder - Custom Loop Query with CSS Grid | Tutorials

Bricks Builder Tutorial - Custom Post Loops

Bricks Builder Custom Loop Query with Parameters

Bricks Builder - Custom Loop Query with CSS Grid | Tutorials

Bricks Page Builder - Query Loop Builder (RAW CUT)

Mastering Bricks Builder - How To Use The Query Loop

Create your own custom query in Bricks Builder Query Loop - no query limitations

Bricks Builder Query Loop - Complete Guide with 7 Practical Examples

Custom Related Products Using Query Loop (Bricks Builder Tutorial)

Bricks - Query Loop Builder (for Posts, Terms, Users)

Bricks Builder - Display Blog Posts with Custom Loop Builder | Query Loop | Tutorials

How to Properly Add & Query Service Pages With Bricks (CPT + Query Loop)

How to Display Custom Post Type Template with Bricks Query Loop Builder

Custom Post Loop Filters | Bricks Builder & GridBuilder WP Tutorial

Advanced Custom Fields Repeater Fields & Bricks Builder

Does the LEGO Loop Coaster still work after 6 months?

Finally LEGO 10303 Loop Coaster is with me!

Mastering Bricks Builder - Custom Sorting & Filtering

Bricks Builder: Reusable Template for Query Loop

Bricks Builder Post Archive - Query Loop & Filtering

How to Build Dynamic Navigation with Bricks Nav Nestable & Query Loop

Bricks Query Loop Builder - Is This Goodbye Elementor?

Bricks Builder Query Loop any array :)

Bricks Builder Query Loop Grid Step By Step!

Lego 10261 Roller Coaster #shorts #lego #viral #satisfying #like #funny #trending #youtube #share