Bricks Builder Tutorial - Page and Posts and WooCommerce - Wordpress Theme - Speed Optimisation

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:41 Bricks Pricing
00:59 Bricks Intro Continued
01:47 Bricks Settings
02:59 Custom Fonts
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

Bricks Builder Tutorial - Page and Posts and WooCommerce - Wordpress Theme - Speed Optimisation

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

We love to create - share - respond - and deliver.

Hire us to work on your Website!

[anmelden]

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!

[aikg]

Hey Imran the way you do tutorial is hands down the best.

[WassPogoreloff]

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!

[PicSta]

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.

[barryscottormoc]

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.

[jaapvanthof]

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!

[legeekduweb_mtl]

Yout explainations are always my favorite, mooving from elementor which becomes to heavy for me I was looking at Bricks builder and this tutorial save me so much time! Thank you for taking this time for us !

[antonichristian]

Great work Imran!!! excellent overview of Bricks for beginners with lots of things covered.

[charlesemes]

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.

[VijayKumarIM]

Thank you for making the video on Bricks. Make more on Bricks.

[Nima-Norouzi]

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.

[HamidAli]

Basic but very useful and handy tutorial for bricks theme ..i like it
Thank you so much for teaching about this really useful to me

[davidwalls]

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.

[esperandounmejorcielo]

the best tutorial for bricks of youtube, thanks for videos

[npeters]

Great overall tutorial of Bricks. Just lovely!

[satanishangover]

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.

[elevateyourcreativeness]

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!

[SeattleCoorain]

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.

[Jason_]

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.

[ericuk]

Even better tutorial than the one Bricks provide. Weldone.