Katalyst Labs
A corporate WordPress website built from designer-supplied Figma files, with a pixel-perfect brief, WPBakery layouts, ACF Pro customization, and Cloudways deployment.
Role
WordPress Developer
Design handoff
Designer-supplied Figma
Page builder
WPBakery
Custom fields
ACF Pro
Hosting
Cloudways
Website
Visit Website
About The Project
Katalyst Labs is a startup, technology, and innovation hub. Its corporate website introduces the organisation, showcases events, and brings articles, podcasts, and research together in a resource centre. The visual design was supplied by a designer in Figma. My role was to translate that design into a working WordPress website, customize its page layouts and content fields, and deploy the finished build on a Cloudways server.
The Client’s Requirements
Pixel-perfect implementation of the supplied Figma design
The client wanted the website to closely match the approved design: typography, spacing, colours, image placement, section proportions, and visual hierarchy. The Figma files were the reference for development, with the layout adapted for smaller screens.
An editable WordPress website
Use WPBakery for page construction and ACF Pro for custom content fields, combining the supplied design with a CMS the team could use to maintain the website.
A complete corporate website and deployment
Bring the organisation’s introduction, events, and resource content into one website, then deploy the WordPress build on Cloudways.
The Development Challenge
The main challenge was balancing design fidelity with an editable WordPress build. The client’s pixel-perfect requirement meant that standard page-builder defaults were not enough: spacing, typography, section composition, and image treatments needed customization to reflect the Figma reference. The site also needed to accommodate different kinds of content, from the bold homepage introduction to event showcases and resource cards, while retaining a coherent layout across screen sizes.
The Solution
I implemented the supplied Figma design in WordPress using WPBakery Page Builder, customizing the layouts and presentation to follow the approved visual direction. ACF Pro provided the custom fields needed for the content structure alongside the page builder. The implementation brought together the homepage, event showcases, and resource centre within the same WordPress website. I handled the development and customization, then deployed the completed site on a Cloudways server; the original visual design remained the designer’s contribution.
Technologies Used
Results & Impact
The delivered result is a live corporate WordPress website based on the supplied Figma designs, with WPBakery page layouts, ACF Pro customization, and Cloudways hosting. Visitors can explore Katalyst Labs, discover its events, and browse its resource content through a consistent website. The project demonstrates the translation of a detailed design handoff into an editable, deployed WordPress build.
Key Features
The implementation covered the design handoff, page construction, content customization, and production deployment.
Figma-to-WordPress implementation
Translated the designer’s visual direction into the website’s typography, spacing, colours, image treatments, and section layouts, with pixel-perfect fidelity as the client’s requirement.
Customized WPBakery layouts
Used WPBakery to construct the pages and customized their presentation to support the supplied design, including the homepage introduction, event showcases, and resource sections.
ACF Pro content customization
Used ACF Pro for custom fields alongside WPBakery, supporting the website’s content requirements within the WordPress editing workflow.
Events and resource discovery
Implemented the corporate website’s content sections, including the event showcase and resource centre for articles, podcasts, and research, within the supplied black-and-orange visual identity.
Cloudways deployment
Deployed the completed WordPress build on a Cloudways server and connected the development work to the live Katalyst Labs website.
Website Screenshots
LET'S TALK
Book a free 30-minute strategy call or send a project brief for custom website design, full-stack development, or n8n AI automation.