Bricks Builder Tutorial - Custom Post Loops
HTML-код
- Опубликовано: 16 май 2024
- 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 
Хобби
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!
Great tutorial. Moving from Elementor to Bricks this was very helpful.
Great video! Thanks!
What shall I say? 100% the right page builder and an awesome tutorial. Keep creating, Paul!
Great video, thank you Paul!
Super tut on this Paul!
Fantastic tutorial! Thanks m8.
Great tutorial, good job!
Another interesting and educational tutorial. Thanks, Paul. Always follow your new tutorials.
Top quality tutorial as always. It is so nice to learn things like custom loops in a very organized and correct way...
Beast of a tutorial! Well done that man.
Awesome demo mate... Great to see the Bricks tuts starting to flow out, keep em' coming
That was great. Thank you.
great video Paul, thanks for taking the time to put this together it's very useful!
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.
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)
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.
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!
Nice stuff
Paul, I am really impressed with your channel, I just subscribed, thank you for being an Awesome Teacher! ❤
Thanks for the video.
What about the link in the button? I chosed "dynamic" and "post ID" but thats not working. Any idea?
You want to use "dynamic" and "post link", right under "post ID". Or just {post_url}
Great 👍🏼
"We're going to be using Bricks Builder *OBVIOUSLY* " 😂😂😂
You can't be too careful in these videos you know! ;)
@@WPTuts I understand, if you don't do it it's like being on Ilkley Moor Bar t'At in the rain.
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".
Brilliant! How would you ensure thst all of the buttons align to bottom? Thanks!
Paul, thanks a lot for you tutorials. Do you have an idea haw to link Bricks Loops with JetSmartfilters? Thanks
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.
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?
do u know how to insert static content(like google ads) on the dynamic loops? thanks first
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 :)
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.
Can you do a Bricks + jet Engine Profile Builder Tutorial?
what Gutenberg combination would you recommend for wordpress webshops with woocommerce?
Wouldn't using a grid (with grid-gap) be the easier option compared to flexbox for this usecase?
It’s more a demo in how to use these techniques over it being the only way to achieve the desired result. 😉
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.
@@KOBE42__ CSS Grid is due in the next update. :)
@@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
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?
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.
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.
Curious to know how is it superior. Would you like to elaborate more?
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
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.
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.
@@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