In this video, we’ll rebuild a one-pager with header and footer templates with Bricks Builder, and make it mobile responsive. This will be a complete walkthrough and tutorial of how to build a decent-looking home page with Bricks.
Bricks is a new WordPress page builder in the market that is quickly gaining traction and for good reason. They’re currently running a lifetime deal — US$149 for lifetime license to use Bricks on 1,000 websites. So if you’re looking for a WordPress page builder, you can consider getting Bricks.
Their recent version 1.2x update brings a ton of new features, and in this video, we’ll make good use of their container element, custom CSS properties compatibility, and some amazing improvements to their editor.
Timestamps
0:00 Intro
2:20 Initial page set-up
2:45 Theme settings configuration
5:18 Using clamp and REM units for font sizes
9:52 Building header template – Secondary menu bar
21:28 Building header template – Nav menu bar
30:42 Building footer template
40:53 Building home page – Hero section
51:22 Ratings with quotes section (3 unequal columns)
1:03:01 Services section
1:19:02 Testing responsiveness of services section
1:23:32 Secondary CTA section
1:27:21 Contact us section
1:30:00 Building a contact form
1:35:35 Testimonial section
1:46:31 Final CTA section
1:55:00 Wrap up and final result
Reference site: http://themes.semicolonweb.com/html/canvas/demo-finance.html
Bricks Builder (non-affiliate): https://bricksbuilder.io/
Bricks Builder Facebook group: https://www.facebook.com/groups/brickscommunity/
Bricks Builder Roadmap: https://bricksbuilder.io/roadmap/
Development site hosted on Cloudways (affiliate): https://www.cloudways.com/en/?id=642007
Recorded using Berry Cast (non-affiliate): https://www.berrycast.com/
Edited using Flixier (affiliate): https://flixier.com/?fpr=vance96
Vance’s blog: https://vancewong.com
Royalty-Free Music from Filmstro as BGM (affiliate)
DeWitt by Terry Michellis
20% discount code: FSV20OFF
