Fairkredit Blog Redesign

Overview

This project was part of my internship at Web Bureau. Fairkredit wanted a new single blog layout based on a provided Figma design. Their old two column layout felt outdated and difficult to read. My role was to rebuild the page structure in Laravel and create new WordPress blocks with ACF.

WordPress served as the CMS while Laravel handled the frontend. This meant I had to connect new ACF fields to Blade components and fit everything into an already large codebase.

The Problem

The original layout used a left sidebar for subtitles and meta information. The main title stretched almost across the entire width. It worked, but it did not match modern reading patterns. The goal was to build a one column centered design that placed more focus on readability and a clear hierarchy.

The Solution

I rebuilt the entire template using Blade. The new layout centered the content and limited the readable width to roughly half of the screen. This made the title, author info, featured image, and body content easier to scan. I also created three custom WordPress blocks with ACF: a call to action block, a quote block, and a calculator block.

Block Development

The calculator block was the most complex part. The calculator already existed as a Laravel component. It combined the input fields and the output display in one stacked layout. For the new block these sections had to be displayed side by side without changing how the calculator looked in other parts of the site.

I solved this by creating a wrapper structure only inside the ACF block. This kept the original component intact and allowed for the horizontal layout needed for the new design. The other blocks were simpler and were built using standard ACF field groups mapped into Blade.

Styling and Responsiveness

I used a mix of Tailwind and regular CSS. Some Tailwind utilities did not work correctly in this project so I switched to CSS when needed. The final layout works on both desktop and mobile with the calculator stacking vertically on smaller screens.

Challenges and Learnings

This was my first real Laravel project. The codebase was large and it took time to find the right files. I also had to learn how WordPress fields mapped into Laravel templates. Working on this project improved my understanding of Blade components, ACF integration, and mixing two frameworks in one system.

Outcome

The final result matched the new Figma design and improved the readability of the blog. Fairkredit received a more modern single post layout along with flexible custom blocks they can reuse in future content.