XFacebookInstagramYouTube

CMS Documentation

This is a guide to read that will provide an overview of Contentful, the Content Management System this app uses.

Introduction

Contentful Information

Contentful has a very intuitive UI. You can find more information about it in the Contentful documentation.

Here are some of the main features:

  • Content models: you can create, update, and delete content models.
  • Content: you can create, update, and delete content.
  • Media: you can upload, update, and delete media.
  • Content preview: you can preview content before publishing.
  • Content publishing: you can publish content to production.
  • Content history: you can see the history of content changes.
  • Content localization: you can localize content in different languages.
  • Content management: you can manage content with roles and permissions.

The main content models for the site system are:

Content Model Use Case
Page

The most used content model to build out pages with the design system's components.

  • Title: the title of the page
  • Slug: the URL of the page
  • Sections: the design system components (Hero, Feature, Quote, etc).
  • Metadata: the SEO and social sharing information for the page
Page - Simple

A very simple page for ancillary pages, legal, privacy policies, etc.

Post A post is a blog type of page. It can have types like "Blog", "Video", or "Case Study" as well as categories.
Site - Settings

Used to define specific areas used everywhere on the site, like:

  • the navigation (items, order of the items...)
  • the footer
  • social links
  • global metadata
  • analytics
  • Integration ids (ex: Hubspot, Marketo, Greenhouse, etc.)

FYIs

The "Content" tab is the main tab that should be worked in for updating content. Refrain from changing content models as that could inadvertantly break the app as the fields in the Content models correspond to the codebase.

Contentful user interface with a rectangle that is around the Page content model.

Most fields are optional, so not every field needs to be filled out within the components. If something is required, it'll say "Required" in the CMS.


Content Statuses

Status Description
Draft Content is not ready to be published and can be viewed on local and QA enviornments.
Published Content is ready to be published and can be viewed on local, QA, staging, and production enviornments.
Archived Will not be seen anywhere but can always be republished.
Changed It's a published entry, but the changes can only be seen on local and QA. Once it's published, it'll be seen on local, QA, staging, and production.

Using the Compose Contentful App

If you find that you don't like using the normal Contentful interface, Contentful has an app called Compose that makes it a little easier to produce content and navigate the app. It's all based on preference. https://compose.contentful.com/


Previewing Content

To preview your content before publishing, you can click on the "Open Preview" button on a Page, Page-Category, and Post content models.

Compose App

Contentful user interface with an arrow that points to the preview button

Regular Contentful Web App

Contentful user interface with an arrow that points to the preview button

If you're testing the entire site, make sure you're out of the preview instance as that's mainly for the current state of the page you're working on when you click "Open Preview".


How to make a new page

When signing into Contentful, you'll need to click on the "Content" tab which will bring you to a screen that shows all of the content by default. In order to create a new page, click on the "Content Type" button in the search field and click Page, or click on the Page saved view in the sidebar.

Contentful user interface with a rectangle that is around the Page content model.

Next, click on the "Add Entry" button and click Page.

Next, it'll bring you to the Page content model where you'll build out a new one.

The fields are:

  • Title: the title of the page
  • Slug: the URL of the page
  • Sections: the design system components (Hero, Feature, Quote, etc).
  • Metadata: the SEO and social sharing information for the page

The "Sections" field is where you can create new instances of a component within the design system (Hero, Feature, Multicard etc) or use existing components that have already been created.

When you're ready to view your page and its progress you can click on the "Open Preview" button in the right sidebar.

When you are happy with the page, click Publish on every component and publish the page to see it on production.