Bricks Builder Tutorial - Custom Post Loops

Рет қаралды 15,139

Күн бұрын

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
Learn Bricks Builder: learnbricksbuilder.com/
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 ◄
✅ WPVivid Backup Pro: jo.my/vividpro (use WPTUTS20 for 20% off)
✅ Project Huddle: jo.my/etafyp (WPTUTS for 20% off - Exclusive)
► MY PREFERRED HOSTING PROVIDERS ◄
✅ CloudWays: jo.my/1feeng8
✅ SiteGround: jo.my/sgwptuts
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ Brizy Pro: bit.ly/2Ji97r8
✅ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
✅ GeneratePress Premium: bit.ly/2Ydn1SE
✅ OCEANWP: bit.ly/2fRHBr0
✅ DIVI Theme: bit.ly/2G8JMiA
✅ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
✅ SMART SLIDER 3: bit.ly/2G0G1vB
✅ CSSHERO: bit.ly/2qbrRl6
► WORDPRESS PLUGINS ◄
✅ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
👉 Twitter: / wptutz
👉 Facebook Group: wptuts.co.uk/facebook
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk

Пікірлер: 50

@twanpeeters8446 Ай бұрын

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

@hassanfarhood8489 Жыл бұрын

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!

@PicSta Жыл бұрын

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

@ClintJohnson85 3 ай бұрын

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

@derekshort Жыл бұрын

Great video! Thanks!

@davidwalls2304 Жыл бұрын

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

@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)

@ysintos Жыл бұрын

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

@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.

@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!

@wpglob-wordpresstutorials Жыл бұрын

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

@davefoy7276 Жыл бұрын

Beast of a tutorial! Well done that man.

@antonichristian5845 Жыл бұрын

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

@VyLeTien Жыл бұрын

Great video, thank you Paul!

@elevateyourcreativeness Жыл бұрын

Super tut on this Paul!

@Zp00kie Жыл бұрын

Fantastic tutorial! Thanks m8.

Жыл бұрын

Great tutorial, good job!

@danishranjan9208 Жыл бұрын

That was great. Thank you.

@hassanfarhood8489 Жыл бұрын

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

@MrOliver1444 5 ай бұрын

Great 👍🏼

@petermuller1156 Жыл бұрын

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

@radmcsweet Жыл бұрын

You want to use "dynamic" and "post link", right under "post ID". Or just {post_url}

@KariposTheOne Жыл бұрын

Nice stuff

@axiomteck9352 Жыл бұрын

it will be nice, after designing the custom design for the look, to be able to add the filterable by category, like the way it gets done with the posts element.

@nicolayhoft3954 Жыл бұрын

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".

@y9gq37 Жыл бұрын

"We're going to be using Bricks Builder *OBVIOUSLY* " 😂😂😂

@WPTuts Жыл бұрын

You can't be too careful in these videos you know! ;)

@y9gq37 Жыл бұрын

@@WPTuts I understand, if you don't do it it's like being on Ilkley Moor Bar t'At in the rain.

@assabrorg5528 Жыл бұрын

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

@chantscreen Жыл бұрын

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

@BawlBag Жыл бұрын

Thanks for the great video Paul! I'm having problem with one thing though.. My post archives page looks great, however it can only be viewed while logged in and otherwise shows a blank page. Any ideas what went wrong?

@PLUS-sj4sf Жыл бұрын

Thanx a million Paul, amazing tut. I have a question, is there a way to create filters for Archives? I know it has Search feature but that is all! is there a way to apply any type of filter to archives like JetFilters ? thank you :)

@ocratest Жыл бұрын

Yes this is something I haven't found a solution for either. There is a rumour that JetSmartFilters (Crocoblock) for Bricks is in the making. That would solve quite a few shortcomings of bricks. Here's hoping the rumours are true.

@filmgenius2 Жыл бұрын

Can you do a Bricks + jet Engine Profile Builder Tutorial?

@ArtbylonfeldtDk Жыл бұрын

what Gutenberg combination would you recommend for wordpress webshops with woocommerce?

@markuschvojka4715 Жыл бұрын

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

@WPTuts Жыл бұрын

It’s more a demo in how to use these techniques over it being the only way to achieve the desired result. 😉

@KOBE42__ Жыл бұрын

I was actually thinking the same thing. I’m not sure if Bricks supports CSS Grid though? Although I guess you could just do it manually in the custom CSS.

@WPTuts Жыл бұрын

@@KOBE42__ CSS Grid is due in the next update. :)

@KOBE42__ Жыл бұрын

@@WPTuts wow that’s a game changer! It’s will make layouts so much better and reduce DOM output considerably too :) Seems like they have a decent development team. Quality stuffffff

@OneBrokeBloke 6 ай бұрын

Can i not get featured image to link to the post? I expect that kind of behaviour when clicking the image, but does not seem possible?

@WPTuts 6 ай бұрын

Yes, you can do that. Select the image and check the settings panel (left) and there’s an option there to handle where the image links to.

@TimTop321 4 ай бұрын

do u know how to insert static content(like google ads) on the dynamic loops? thanks first

@georgivasilev3867 Жыл бұрын

Still the combination of Elementor and Crocoblocks is supiriour. Bricks looks promising,but it is not there yet. Elementor,with all it's problems is still Number 1.

@maximebeguin4346 Жыл бұрын

Curious to know how is it superior. Would you like to elaborate more?

@WPTuts Жыл бұрын

I think it really depends on what you're looking for. While Elementor and Crocoblock certainly are a formidable combination, Crocoblock is arguably brining a lot of the heavy lifting to the table. Elementor, while a great platform is still missing so many key features that a lot of designers want and need and that means a heavy reliance on the likes of Crocoblock. On the other hand, Bricks doesn't fill the builder with a lot of 'fluff'. Instead, it's adding in the tools and features needed to work on modern designs while not relying on a load of external plugins and tools to fill the gaps. As always, you have an opinion, I have an opinion and so does the next person. Who's right? lol

@georgivasilev3867 Жыл бұрын

We are just discussing,not arguing 😉 Maybe for proffesional designers,Bricks is better. But for the majority of people,like me,we just need some decent and easy to build website for our services. Elementor is better for this purpose and the full Crocoblocks integration gives many oppertunities. So,i've made my website,i have done good marketing and i'm achieving my goals. I don't need the best,or the fastest website in the world to achieve that. And Elementor gives this simplesity,functuanality and ease of use.

@digwillhachi Жыл бұрын

lol in no way at all is that true if you are a professional web designer. If you just want an easy wix style builder to knock up your own business site by yourself then yes Elementor may be better.

@KOBE42__ Жыл бұрын

@@WPTuts I could not agree more. I’m currently building a Crocoblock/Jet Engine site along with Elementor Pro (with much help from your tutorials actually), and I have to say, Crocoblock is by far the most powerful piece of software from the two. Their support is absolutely fantastic as well. I really do love the look of Bricks, it looks very promising and seems like it’s heading in the right direction to become the leader in its field. Will have to stick with Elementor pro for now though. Excellent video again by the way Paul. You have nailed the art of tutorials. Thank you