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.
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
loadingattribute toeager. - 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.
Themes/plugins used on the project
- Bricks theme 1.5 RC
- BricksExtras 1.0.5
- ACF PRO 5.12.2
Performance scores last time updated
August 2022
The site is a bit broken after the migration, so we cannot re-test it at the moment.
GTmetrix example results
PageSpeed Insights example results
Screenshot of the built page
