Bricks Builder Tutorial – Page and Posts and WooCommerce – WordPress Theme – Speed Optimisation

by | Aug 14, 2022 | 0 comments

Bricks Builder Tutorial – Page and Posts and WooCommerce – WordPress Theme – Speed Optimisation

by | Aug 14, 2022 | Free Wordpress Plugins | 0 comments



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

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:
👕 Get our Merchandise:
😃 Join our Facebook Group:
😃 Get Code Snippets:
😃 Get Elementor Pro:
🥹 Support us:

Hire us to work on your Website!

💌 [email protected]
👩‍💻 Visit

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>