Summary: project on Bricks Builder (build 1)

Author: Sridhar Katakam
Published Date: 3 Aug 2022

Author’s summary

Finished Page

https://bricks.wpbuildersfightclub.org/round1/sridhar

Intro

Bricks is a fantastic site builder theme that I’ve recently switched to.

I did not expect such a positive reaction to this project when I pitched the idea in the Dynamic WordPress Facebook group. It is great to see the community come together and “compete” with the tools of their choice in a friendly manner.

Thanks to Vitaliy Kiyko of Builderius for providing domain + hosting and coordinating with everyone.

Version

I built the site with Bricks 1.5 beta and later replaced it with 1.5 RC which was released about 3 days ago.

The Div elements in the previous version had display of flex but they changed that to block. Therefore had to convert the Div elements to Block elements which was thankfully just a right click away for each element.

Speed Test Scores

I am not the one to chase perfect scores but I think the page did well.

GT m etrix:

Google PageSpeed Insights:

Mobile

Desktop

Time

I spent about 2.5 days on the project.

Day 1: Build
Day 2: Tweaking and adjusting the responsiveness
Day 3: Researching on how to migrate a site into a multisite and migrating.

Notes

The built-in mobile offcanvas of Bricks is pretty basic. It just shows the nav menu items and we can’t really add anything to it from what I see. Therefore, used the Burger Trigger and Offcanvas modules of our BricksExtras plugin to match the design’s mobile menu.
The Structure score of Gtmetrix was initially only 91% and it jumped to 97% after turning off lazy loading for the above-the-fold image by setting its loading attribute to eager.
In the footer there’s a shape divider div and a section below each other. Had to do two things to ensure that there’s no gap between them – set the svg element’s line-height to 1 and its display to block.
Used ACF Pro’s Repeater field for the testimonials having these sub fields: Text, Image, Name and Position.
Used Duplicator Pro to migrate the site from localhost to a subdomain subsite in the multisite. The URLs of some background images were still pointing to the source localhost site. Since they aren’t many, just changed them manually. Otherwise, a search replace plugin would have come handy.
Got the CSS for the pricing table switcher from here.
Used my Bricks Navigator plugin to reduce the number of clicks in the backend and implemented some of these tweaks to make the editor UX better.
Used the built-in Custom Fonts feature for Poppins font.
Bricks Performance settings: screenshot.