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
