The most common problem I've heard from new Contentful users is how overwhelming the process of defining a flexible Content Model is.
It's a difficult task to take a global look at your website and understand how to make it all fit into a few components (especially if you're working with the Community plan rate-limits).
This makes a lot of sense; those of us who are editing websites (and building Content Models) aren't always web designers trained in creating reusable component systems.
Rather than trying to master web design to get your Contentful site up and running, we suggest beginning with a few essential content types. The goal here is to provide a foundational content model that is flexible, simple, and easy for your content editors to understand.
“The goal should be to present editors with some flexibility, but not overwhelm them.”
Here are 4 Content Types that I suggest for creating modular pages in Contentful.
Hero 🦸♀️
The hero is the first thing someone sees on a webpage after your site navigation, so it's an essential for every page.
You can add component fields like:
Component Name - Short text
This makes it easy for you to find your content items, and should go on every component.
Check off "This field represents the Entry title" under Field options within the field settings.
Hero Text - Short text
Background Image - Media
Button Text - Short text
Button Link URL - Long text
to the Hero 🦸♀️ content model. Doing so will help you make something like this:
Flexible Content 💪
Think of this as the place to add the bulk of your website content that lives after the Hero 🦸♀️ component.
I suggest adding these fields to the Hero 🦸♀️ component:
Component Name - Short text
Flexible Content Body - Rich text
In the field settings, enable all Formatting options except for H1*, all Hyperlinks, and all Embedded entries & assets.
By adding the rich text field, you'll provide content authors the flexibility to add whatever content they need to this section, whether it be an image, video, heading, etc..
*To align with SEO and Accessibility best practices, there should only be one H1 on a page. We don't enable the H1 Formatting option here because the H1 will live in the Hero 🦸♀️ component.
Call To Action 🤝
The Call To Action 🤝 component will be the way for your users to take your website's desired action — like a link to a contact form, email signup, or download, for example.
I recommend adding the following fields to the Call To Action 🤝 content model:
Component Name - Short text
Title - Short Text
Button Text - Short Text
Button Link URL - Long Text
Page 📝
You can use a Page component to define each page of your website.
In the content model for this Page 📝 content type, I suggest adding:
Component Name - Short text
Slug - Short text
Page Body - Multi-reference field
This field should accept any number of other content types.
When you're building pages, you'll drag other components listed above into this multi-reference field section.
What if there was a process you could follow to make Contentful successful for your team specifically?
It's called the Waterfall method.
Teams I've worked with that follow this process were far more likely to set up a successful Contentful project than those who didn't.
Why? Because the process uses your current challenges to inform a vision their entire team can work towards, and make Contentful the tool to pull it all together.