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:
|Page||Template||Craft section type|
|Capabilities detail||Unique||(Generated by Capabilities channel)|
|Process detail||Unique||(Generated by Process channel)|
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.
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
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:
|Page||Template||Craft section type|
|All pages||Master Template||Structure|
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.
We’re hiring a sales representative
Expanding our services: Introducing ‘Friends of Good Work’
How to master GDPR and CCPA compliance: a step-by-step guide to handling website cookies
Block Usage plugin for Craft CMS 3 and 4
Nag plugin for Craft CMS 3 and 4
Three reasons most digital projects get derailed (and why yours doesn’t have to)
Good Work leads to a good life
Update Craft CMS 3 to 4
Three things your project manager should be doing for you (but probably isn’t)
Eight lessons learned from eight years of Good Work
Putting the puzzle pieces together
Using Formie to create forms on Craft CMS websites