After our first look at Bricks a few weeks ago, I’ve spent more time on it, and want to share more insights and methods with creating a simple Bricks Builder Page – as well as Single Post and Single Product Templates.
PS – this is not a Paid for or a Sponsored Video. Just my honest opinion/review/methods/time.
00:00 Intro
00:18 Bricks Builder https://bricksbuilder.io/
00:41 Bricks Pricing
00:59 Bricks Intro Continued
01:47 Bricks Settings
02:59 Custom Fonts
03:38 WebP Images using BulkResizePhotos.com
05:06 What’s the Plan for the Tutorial?
05:49 Add the Home Page
06:31 Bricks Interface Reminder
07:40 Global Styles
09:19 Create your Colour Palette
10:19 Typography
14:20 Add the Menu
15:26 Why Header Templates are good
16:06 Create the Header Template
20:43 Aligning Items in the Header
22:10 Continuing the Header Styling
23:50 Navigation Menu Styling
24:54 Mobile Menu Styling
26:24 Preview and Publish
27:22 Header Display Conditions
30:09 Create a Hero Banner
35:14 Class Styling
38:42 Divider Line
40:48 Add Image to the Hero Banner
42:24 Tweaks to the Hero Banner
45:13 Entrance Animation of the Image
45:59 Mobile Responsiveness for the Hero Banner
50:06 Page Speed Score
50:48 Build the Section 2
52:09 Another Speed Check
52:28 WordPress Posts
55:39 Add the Post Widget to the Page
58:43 Post Spacing Issue
58:54 Post Spacing Solution (add this CSS)
.bricks-layout-wrapper {width: auto;}
59:20 Sort out the Post’s Image Sizes
59:56 Post Fields
01:02:52 Create the Single Post Template
01:05:29 Refine Social Sharing Icons
01:06:32 Single Post Template continued
01:07:13 Set the Single Post Template Conditions
01:09:26 Add WooCommerce
01:11:03 Add Dummy Products
01:13:49 Add Products Widget to the Page
01:16:01 Create the Single Product Template
01:17:40 Set the Single Product Template Conditions
01:19:16 Final Page Speed Score Check
01:20:53 Conclusion
Get Bricks here: https://bricksbuilder.io/
Bricks Builder Tutorial – Page and Posts and WooCommerce – WordPress Theme – Speed Optimisation
—————————————————————————-
We love to create – share – respond – and deliver.
🧐 Learn with our Mastery Modules: https://websquadron.co.uk/web-design-mastery/
👕 Get our Merchandise: https://websquadron.co.uk/merchandise
😃 Join our Facebook Group: https://www.facebook.com/groups/3309523509284305
😃 Get Code Snippets: https://r.freemius.com/10565/3304295/
😃 Get Elementor Pro: https://trk.elementor.com/25741
🥹 Support us: https://paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit https://websquadron.co.uk
source
Don stress out man. 😂
For someone who never worked with website-builders before and just builds his first own website with bricks, this is like the greatest thing EVER happend on YT. Thanks so much for your comprehensive explanation style and awesome tips!
Thank you for your great series of Bricks tuts. 🙏 Small thing, at about 41:10 the max img width got setup to 500% rather than 500 pixels. It also stayed like that in the mobile settings, and later on whenever max width was altered. Did not affected the look, so not too relevant.
Hi Imran. Your videos are great but I'm still thinking whether to go for elementor pro or bricks. I used divi before (like 3 years ago) and now im going back to creating websites. The speeds are perfect with bricks but I can't code so not sure if bricks is exactly for me. Or if I rather stay with elementor pro. What would you recommend?
Are you also using Bricks for your clients? Isnt it too difficult to use for them, because its not so easy and visual like Elementor?
Do you have any tutorial videos for slider creating with bricks ?
Finally, a comprehensive tutorial on Bricks!
I've been playing with Bricks Builder for a couple of weeks now and, although Bricks has an OUTSTANDING HELP SYSTEM within itself, it is invaluable to watch a professional pointing out how the things should be done properly — saves tons of time and effort learning the new product.
Thanks a mil!
Great overall tutorial of Bricks. Just lovely!
Very, very good video tutorial. Appreciate the presenter covers both good Bricks features and how they can be confusing for new users, which many reviewers and tutorials gloss over. This comprehensive coverage of Bricks, how to approach designing, design thinking with Bricks as your tool, helps those of us who are just getting started and very much appreciated.
Have subscribed and will look to purchase Bricks tutorials from Web Squadron. Even simple things for experienced WP designers: overlaying text over an image is still not obvious for new users like myself. Hopefully overlaying text will be covered in other Web Squadron videos.
I watched the video from start to finish. Thank you very much for taking the time to guide. But one thing is at the end of the video I can't stop laughing. Because the pagespeed score says it's not light. Elementor + Woocommece can still score above 90 without using the optimization plugin. So we still have to wait and see Bricks for a while. And it must be admitted that Bricks' "unlimited" package is still too attractive.
Thank you for more understanding Bricks now. It's sometimes a bit hard to switch over from Elementor, so a video like this helps me a lot!
Thank you Imran. Your videos are very helpful
I´m loving it (Your style)
Finally, watched the video until the end. Good job on the Bricks overall impression and showcasing Bricks to those who haven't used it, or are sceptical to a new Builder. Brick doesn't bite, it has a lot of potential. You must have noticed it yourself, Imran. I think optimization always should be made, even Bricks is fast out of the box and offers way less bloat compared to other builders. Also hast to be mentioned that image optimization (Product images) if they're not WebP or at least optimized hit the score dramatically.
Next step would be using custom post types, play with the query loop. Use custom data for certain types of content. Like portfolios, team members, testimonials, you name it.
Appreciate the vid 🙏
That was super helpful ❤️
Imran, I was looking forward to this overview and the resulting web page scores (with and without WC). I enjoyed the entire video and thank you for making this.
Thanks so much Imran. I've just got to grips with Elementor with all your help though… never mind, I'll move over to Bricks eventually I guess if it's better 😬😉
Thanks for taking the time to give that awesome tutorial Imran. The Bricks pricing structure alone is going to seriously hurt Elementor. I'll continue to monitor Bricks and learn more about it. But I am hoping that some major competition like Bricks will make El buck their ideas up as there is sooo much room for improvement.
Great work Imran!!! excellent overview of Bricks for beginners with lots of things covered.
Bricks is certainly becoming the ultimate in page builders.
I'm super stoked and waiting patiently for their modal builder, which is on the radar map!
I wonder if the page speed would load faster if woo wasn't on the homepage and utilize a plugin to limit woo loading to only where it was required?
Great video tut! I was fortunate enough to get the LTD when it first launched and so glad I jumped on it!
Thomas certainly listens to his users and releases the most requested features and tests them to ensure maximum usability!
As a current E user, I am actively looking at solutions based on gutenberg….like cwickly, green shift and spectra.
Thanks for taking the time to make the video. I am very interested to see how Bricks develops. I was amazed to see how much you could do with it with no plugins. It could easily overtake Elementor.
Great stuff my friend
what font version is good to upload WOFF2 OR TTF?
Let's see what Elementor is going to do, Breakdance and Bricks are going to try to take over and if Elementor won't improve in the next months it won't take long until they are going to end like Visual Co…
great stuff
Please make comparison between Breakdance builder and Bricks
You videos are always in top❤️, I am wondering the life time for unlimited access how good will it be for future ?
Thank you for making the video on Bricks. Make more on Bricks.
Hi and thanks for this tutorial. I'm using both Elementor and Bricks, in terms of performance and clean output code and html structure Bricks if far ahead, in terms of functionality it's getting more and more interesting stuff soon. Even now Bricks has some features that El does not have or u need to use a third party plugin. Once you get used to it, the workflow will fly… In the near future, very interesting stuff like css grid, mobile menu builder and….etc will be added and then it's going to be almost a perfect page builder. In terms of speed development, it's far more a head of El, and more importantly BRICKS listen to the community.
Thanks but no thanks, I'm not learning another pagebuilder 😐
Thankyou for all your effort, You have way more patience than me.
As been mentioned by another comentor, I will also be staying with Elementor.
However, I do believe this has a lot of promise so I have Purchased the Unlimited version as a safegaurd for the future.
Looks promising, but staying with Elementor at this stage 😵💫
Hey Imran the way you do tutorial is hands down the best.