• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

virusword.com-Wordpress

Learn Wordpress

  • Home
  • WordPress Shop
    • Fotopress
    • SEO Tool Kit
    • Social Contact
    • Tag Machine 2
    • Video Profits
  • Latest News
  • WordPress
    • Plugins
    • Themes
    • Tutorials
    • Videos
    • Woocommerce
  • About Us
  • Contact Us
    • Terms of Service
    • Privacy Policy
  • Show Search
Hide Search
Home/Videos/Bricks Builder Tutorial – Page and Posts and WooCommerce – Wordpress Theme – Speed Optimisation

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: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

Written by:
Abdul Wahid
Published on:
January 28, 2023

Categories: VideosTags: Bricks Builder, Bricks Builder Tutorial, Bricks Builder Tutorial - Page and Posts and WooCommerce - Wordpress Theme - Speed Optimisation, Bricks Posts, Bricks Tutorial, Bricks WooCommerce, Bricks Wordpress, elementor, Elementor 101, Elementor Course, elementor pro, elementor tutorial, Elementor Wordpress Tutorials, Hints, how to build a website, Imran, Imran Siddiq, Siddiq, Squadron, Tips, Web, web design, Web Squadron, website, WebSquadron, woocommerce tutorial, wordpress, wordpress tutorials

Reader Interactions

Comments

  1. HelloyeloNo1

    January 28, 2023 at 11:50 pm

    Don stress out man. 😂

  2. JCooper

    January 28, 2023 at 11:50 pm

    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!

  3. satanishangover

    January 28, 2023 at 11:50 pm

    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.

  4. Aktiff

    January 28, 2023 at 11:50 pm

    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?

  5. Peter Müller

    January 28, 2023 at 11:50 pm

    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?

  6. Mahbub Jubayer

    January 28, 2023 at 11:50 pm

    Do you have any tutorial videos for slider creating with bricks ?

  7. Wass Pogoreloff

    January 28, 2023 at 11:50 pm

    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!

  8. N Peters

    January 28, 2023 at 11:50 pm

    Great overall tutorial of Bricks. Just lovely!

  9. Mark Early

    January 28, 2023 at 11:50 pm

    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.

  10. Web Neva Sai

    January 28, 2023 at 11:50 pm

    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.

  11. Jaap van 't Hof

    January 28, 2023 at 11:50 pm

    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!

  12. PixelGAP

    January 28, 2023 at 11:50 pm

    Thank you Imran. Your videos are very helpful

  13. Øyvind Skjelstad

    January 28, 2023 at 11:50 pm

    I´m loving it (Your style)

  14. PicSta

    January 28, 2023 at 11:50 pm

    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.

  15. Site by Ray

    January 28, 2023 at 11:50 pm

    Appreciate the vid 🙏

  16. Farhan Mubin

    January 28, 2023 at 11:50 pm

    That was super helpful ❤️

  17. David Walls

    January 28, 2023 at 11:50 pm

    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.

  18. Maddi Cryer

    January 28, 2023 at 11:50 pm

    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 😬😉

  19. Jason

    January 28, 2023 at 11:50 pm

    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.

  20. Antoni Christian

    January 28, 2023 at 11:50 pm

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

  21. Greg Hyatt

    January 28, 2023 at 11:50 pm

    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!

  22. Mel Taylor

    January 28, 2023 at 11:50 pm

    As a current E user, I am actively looking at solutions based on gutenberg….like cwickly, green shift and spectra.

  23. Charles Emes

    January 28, 2023 at 11:50 pm

    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.

  24. George Nicolaou

    January 28, 2023 at 11:50 pm

    Great stuff my friend

  25. Nayeem Ahmed

    January 28, 2023 at 11:50 pm

    what font version is good to upload WOFF2 OR TTF?

  26. Karipos

    January 28, 2023 at 11:50 pm

    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…

  27. docetes

    January 28, 2023 at 11:50 pm

    great stuff

  28. Samir Poladov

    January 28, 2023 at 11:50 pm

    Please make comparison between Breakdance builder and Bricks

  29. Mahbub Jubayer

    January 28, 2023 at 11:50 pm

    You videos are always in top❤️, I am wondering the life time for unlimited access how good will it be for future ?

  30. Groot Solutions

    January 28, 2023 at 11:50 pm

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

  31. Nima Norouzi

    January 28, 2023 at 11:50 pm

    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.

  32. Ian Mitchem

    January 28, 2023 at 11:50 pm

    Thanks but no thanks, I'm not learning another pagebuilder 😐

  33. Barry Scott

    January 28, 2023 at 11:50 pm

    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.

  34. Kevin Thomas

    January 28, 2023 at 11:50 pm

    Looks promising, but staying with Elementor at this stage 😵‍💫

  35. Philip Malangmei

    January 28, 2023 at 11:50 pm

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

Primary Sidebar

Wordpress

  • Latest News (285)
  • Plugins (323)
  • Themes (332)
  • Tutorials (416)
  • Videos (847)
  • Woocommerce (423)

Recent Articles

Here’s how to downgrade WooCommerce plugin and keep your data

Receiving a "Store Version Not Supported" …

Continue Reading about Here’s how to downgrade WooCommerce plugin and keep your data

Lakeshore PBS presents new season of ‘Whitney Reynolds Show’

MERRILLVILLE — Lakeshore PBS is the presenting …

Continue Reading about Lakeshore PBS presents new season of ‘Whitney Reynolds Show’

Search our site

Explore more

Get our Wordpress Guide Get Plugins Get Connected

Footer

VirusWord by Promaps, Inc.

Barnes Place
Colombo 7, Western 00700

Copyright © 2023 · Promaps, Inc.

Keep In Touch

  • Email
  • Facebook
  • Instagram
  • Pinterest
  • Twitter