Building modular websites with Craft CMS

We were recently scoping out a website redesign project in Craft CMS with one of our design agency partners. By no means was it a large website, but after going down the traditional route of defining the different templates that would need to be designed and developed we realized we needed to go back to the drawing board to stay within the client's timeline and budget.

Here are the templates we initially defined:

As you can see above, taking a traditional approach to scope out a project like this one would require 7 to 9 unique templates to build out the website. This particular client did not have the time or budget for this approach though, so we needed to try something else.

After a quick brainstorming session with our design agency partner, we landed on a modular approach that would be incredibly straight forward to develop in Craft CMS and would allow the content editor a lot of flexibility.

The idea was that we audit the content for the website to come up with a set number of modules to help build out a Master Template in Craft CMS, rather than a bunch of different unique templates for each page like in the table above. We'd make use of Craft's Matrix Field to allow the client full control of which modules they use on each page and in what order. This would all be done in one single Structure section type that we would call Pages.

With this approach, the client could easily build out pages in a unique way based on the content and the modules available to them as well as drag and drop their own taxonomy using the out of the box functionality that comes with Craft's Structure section type.

Lastly, they could build out and manage their own primary navigation with the Navigation Plugin.

How snazzy!

After the content audit, we came up with 14 different modules to build out the Master Template. We whittled this down even further by building out module configuration fields in Craft, but here's the full list for documentation's sake:

• Hero Module
• 3-Column Listing
• Centered Text
• 2-Column Text
• Client Testimonials
• 1/3 Image + Text
• 1/2 Image + Text
• Client Logo Grid
• Full-Width Image
• Full-Width Video
• 5-Column Listing
• Subdivision Toggle
• 1/2-Width Graphic + Text
• Contact

Using the Master Template approach, a content editor is able to create pages using any or all of the above modules in any order they'd like.

The end result was a single Structure section type powered by one Master Template with 14 optional modules for all types of content. Here's our updated table:

Of course the flexibility you provide the content editor can vary. In this case we gave full flexibility to build out any page with any module, but you could still save time and money with a version of this approach while still having multiple section types and perhaps only allowing certain modules per sections, etc, to help put constraints on the content entry.