Bricks Builder Tutorial - Custom Post Loops

Bricks Builder offers some incredibly powerful features, but they are not always the most straightforward to understand.

In this Bricks Builder tutorial, I'll take you step-by-step through the process of building a completely custom post loop, with a custom design, custom ACF fields and a fully responsive design using the powerful CALC function in CSS.

Learn how to go beyond the basics with Bricks Builder and harness the power of custom data, Advanced Custom Fields, Flex Box and the CSS Calc functions.

--- Calc Calculations (thanks to Maxime) ---
Desktop - calc(33.333% - calc(calc(3rem * 2)/3))
Tablet - calc(50% - calc(calc(3rem * 1)/2))
Mobile - 100%

--- Timestamps ---
00:00 - The Tools
00:43 - The Basic Setup
02:17 - Hero Section
05:38 - ACF Setup
06:40 - Adding our content
07:45 - Card design
21:03 - Using Calc for the layout design
24:05 - Alternative method
29:32 - Final design clean up

Take your WordPress website and skills to the next level!

► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.

► EXCLUSIVE WPTUTS DISCOUNTS ◄

► MY PREFERRED HOSTING PROVIDERS ◄

► WORDPRESS VISUAL PAGE BUILDERS ◄

► WORDPRESS THEMES ◄

► WORDPRESS TOOLS ◄

► WORDPRESS PLUGINS ◄

► SUBSCRIBE ◄

► LETS CONNECT: ◄

[hassanfarhood]

Paul, you are an Exceptional Teacher in the WP & Bricks space, very Clear, zero waste, perfect Pace, quality recording, excellent zoom usage, and so on. A perfect 10 Teacher! Bravo!

[twan.peeters]

You're an extremely talented teacher. Much gratitude to you!

[PicSta]

What shall I say? 100% the right page builder and an awesome tutorial. Keep creating, Paul!

[markbratton]

Tut-sweet! Thank you for your hard work and training. So good!

[ClintJohnson]

Great tutorial. Moving from Elementor to Bricks this was very helpful.

[LeoMerkel]

Very well done, Paul, as always. Very valuable. Tnx for your time. For everybody who wasn't sure until now: Here are quickly the differences between Section (Outermost building block = 100% Width); Container (default width 1100px, automatically centered in section); Block (same controls as container except the width which is here = 100%); Div (most generic element, completely unstyled)

[davidwalls]

Paul, I really enjoyed this video. The calc function was an eye opener for me. I think this will be my preferred approach moving forward.

[RichardWadeUK]

Awesome demo mate... Great to see the Bricks tuts starting to flow out, keep em' coming

[hassanfarhood]

Paul, I am really impressed with your channel, I just subscribed, thank you for being an Awesome Teacher! ❤

[davefoy]

Beast of a tutorial! Well done that man.

[wpglob-wordpresstutorials]

Another interesting and educational tutorial. Thanks, Paul. Always follow your new tutorials.

[LeoMerkel]

Just finished the video. Very smart project. I like very much those 2 very different approaches for the cards. This project really shows how powerful Bricks is already now in it's early stage. I'm excited to see what the future Bricks will bring us.

[ysintos]

Top quality tutorial as always. It is so nice to learn things like custom loops in a very organized and correct way...

[antonichristian]

great video Paul, thanks for taking the time to put this together it's very useful!

[elevateyourcreativeness]

I have to say, I think the later version provides a bit more ease-of-use to implement without having to deal with the calc functionality! Great video tut as always Paul!

[petermuller]

Thanks for the video.
What about the link in the button? I chosed "dynamic" and "post ID" but thats not working. Any idea?

[nicolayhoft]

Awesome tutorial. been using it for a couple of archives now, but either I'am doing something wrong, or it simply does not work... In your tutorial you use 6 posts – my problem appears when there is 4 or 5 posts, and I want to use a three column layout... Am I doing something wrong if the one/two post(s) on line 2 are filling the whole container in width? I have managed to get it to work with defined width in pixels/em, but it would be awesome if there is a way to make it work with the "calc function".

[assabrorg]

Paul, thanks a lot for you tutorials. Do you have an idea haw to link Bricks Loops with JetSmartfilters? Thanks

[markuschvojka]

Wouldn't using a grid (with grid-gap) be the easier option compared to flexbox for this usecase?

[chantscreen]

Brilliant! How would you ensure thst all of the buttons align to bottom? Thanks!