Contentful logo

Contentful Community

Change layout or design via content editor

Hi folks, I am looking for solutions/examples on being able to modify the layout structure via the editor web app. As a novice I would think there is a possibility to create a component in react that takes in different kind of fields and depending on if these fields are included in the data coming from Contentful different things will be displayed: such as a hero banner with possibility to add header left or header right. Is there any suggested techniques for this.

The other thing is related to this is about sections. Can different sections of a page be dragged by an editor up or down on a page. Say we have a news section, story section and a solutions section as page content. then the author would drag these sections in the editor and then they would change place on the page when doing it. Is this possible?

Best regards from the nordics where we enjoy winter with a regular friday sauna.

@patrik One way of doing this is creating a sections field that references to many section models.

Then that section model would have a “key” field that corresponds with the react component.
So the Section model would look like

  • key
  • title
  • subtitle
  • body
  • layoutType

And the whatever fields you need. An example key would be “NewsSection”

The downside with this approach is what if you have sections that are very distinct from each other? You would end up adding a ton of fields that the other sections might not need. So you have to make sure your content editors know which of them is needed for a specific section.

Another approach is to use different section models instead of just having one type. So you can have a content model GallerySection with specific fields for it and a NewsSection with specific fields for it.

It’s very organized and it’s easier to query on your front end.

The downside is it you’ll end up building a lot of content models and youll hit that Content limit easily.

Last approach is using Rich Text Field. I‘ve only touched the surface on this one but you can implement the same approach by inserting embedded blocks. It’s a little bit more tricky to pull off but it’s really powerful.

Forgot to mention, with that field of references, your authors can drag the order of the sections to change the order on your front end since it’s an array.