Creating a simple company homepage

Hi there everyone,

i want to migrate our company website (implemented with php and kirby cms) to contentful and build / deploy it with Gatsby and learn about React on the way, but i am already struggling coming up with decent content models.

This is my first attempt at creating a website using the JAM stack and therefore i would appreciate some guidance.

TL/DR

I am looking for good and flexible way to create a model for our websites’ Pages (Homepage, Company Page and Sub Pages like Contact / Imprint etc.) and allow editors to choose from different Modules depending on the Page or Layout associated with the Page

Long Text:

Currently the structure of our website is as follows:

  • Homepage
    • Has a Carousel
    • Has a Links to pages (Products / Solutions …)
    • News (latest X articles)
    • Some other blocks…
  • Products
    • Displayed in Categories
  • Solutions
    • Displayed in Categories
  • Services
    • Subpage is a Service
  • News / Blog
    • Blog Posts ( Similar to Contentful Example )
  • Company
    • Different Sub Pages, E.g. jobs, contact, imprint, data

I have already created a content type for: Products, Solutions and Blog Posts, since these seemed the most straight forward entities. But i still have some problems:

Menu:
Looking through the forums, i will probably have to either create the menu as a content type or define within my application. Since its a multi language website, it should probably be defined preferably by a content type ‘menu’?

Landing Page & Other pages:
Essentially, the landing page is a set of ‘Modules’, which could be used on any page, each consisting of multiple different fields e.g. a carousel or a specific list…

Which brings me to my main Problem i am facing: How do i define content types for my pages, to allow them to be used as flexible as possible and how would i define my pages in general? Or should i just create a new content type for each page?

Looking at the Look Book example, creating a page entity would make sense. This page entity should have a title, slug, flag: homepage: (true, false) following the content which consists of a list of references to ‘Modules’ which can be ordered. Is it possible to create something like a Parent -> Child relationship within pages to structure them as well?

Now, since the layout for each Page is a little bit different: How can i restrict the usage of different modules for each page to prevent my ‘layouts’ from breaking? Can i somehow limit the choice of ‘Modules’ based on the selection of a layout (or Entity, which can be selected from a predefined list since layouts are usually associated with a page entity ?)

Thanks for your time and help,
much appreciate it :slight_smile:

Edit:
My current content models look like this:

At the Moment i am not sure if ‘slots’, as described in the blog post and as used by my current model will introduce to much flexibility. I want content creators to ‘reuse’ existing Models (which consist of multiple slots).

In addition, i might have to create a new content type for more specific slots. For example: slot-text, slot-text-image, slot-cta, etc.
For a maximum of flexiblity it would be possible to define every available Field as a contentent type and wrap them together as a list of references which would define different kinds of ‘slots’.

The goal should be to present editors with some flexiblity but necessarily to overwhelm them with so many levels of content.

Hi Phil, looks like you are off to a good start. I think you should dig in on how Gatsby queries for data for each page. Gatsby uses GraphQL which allows you to pick the exact content you want from different content models. You can build you queries to filter on any criteria you set. It seems to me that you are overcomplicating your content model but your concept of modules and slots isn’t clear to me.

These videos were very helpful for me to understand not only how to structure my content but how to build your pages:

There is also the starter repo which is a good example (be aware it will add content to your space):

1 Like

@kyle.r

Thanks for taking your time to respond!

I have already read quite a bit about GraphQL and Gatsby. in fact i have also already tried the contentful starter repository and was really exited how fast it was to set up and how flexible the combination of contentful + gatsby is.

Because of this flexiblity and my novice status i am quite a bit overwhelmed with the possiblities that come with it. I have read this article, which inspired me to build a complicated but flexbile content model:

I have also read this article about A / B testing, where an exampel of a landing page, consisting of multiple modules is shown:

https://blog.optimizely.com/2018/02/13/experimentation-content-creation-process/

I am not sure if these models are all of the same type of content model though but it certainly looks like a ‘homepage’ definition that i would agree on.

So basically, i love contentful so far, but for me it is really hard to imagine how a best practice content model for a simple company website (nothing to fancy) should look like and which content types i need.

E.g. Should i use a content Model for each page? or is it enough to have e.g. a homepage-type and a general page-type and eventually a blog-post type? Then, how can i build a Navigation - should i define it in the app (gatsby) or as child, parent links in contentful and resolve them as menu in gatsby? Or as suggested in the forums create a menu content type to define different kinds of menus?
Finally, can i handle my locales and switch from page X to Page X-Translated? What should be the smallest defined content type?

There are plenty of questions that i have not answered yet myself. But before i start defining components for modules etc in react i would love some more concrete feedback regarding the data model and how i can eventually simplify and improve it. (Its not so easy to adjust the content model, once there is content inside).

Hi Phil,
You’re not alone struggling with this. We’re having exactly the same discussions and scratching our head. The extra factor is Contentful’s limitation of 24 content types which seems to be too easy to hit with going the flexible route and to get more content types you have to go directly to $485 plan which is very steep (we’re a loooong way from hitting any other limits).

I definitely think Contentful should do way more explaining content modeling for different sites/apps.

1 Like

Hey Phil! I know this was from a few years back, but I wanted to let you know that at one point I was in the same spot. The process of understanding content modeling while also learning JAM stack is overwhelming.

What I do is start with the most basic features that any website has to inform what content models I create. Then, I build up from there with elements specific to the site that I’m working on.

For example, all websites have pages, and each page will have a hero and some text. That would be my first component, called Page. Then, I look for similarities in the ways content shows up from one page to the next, and I build content types around those similarities.

I know this sounds obvious, but the mental framing was helpful to prevent the process from becoming overwhelming.

Happy to answer if you have any questions. :slightly_smiling_face:

-Connor