​​5 Tips for Creating Complex Pages in Headless CMS

Webpages were written in HTML code, then we moved on to rigid CMSs, and now we have the promise of blocks and components based content management: the Headless CMS. 

In this golden age of content management, non-technical publishers are moving from working with rigid, repetitive structures to having page builders, where blocks of content can be dragged and dropped with a high degree of flexibility.

This unprecedented flexibility means that content can be designed in very sophisticated ways. However, this comes at the expense of potential consistency problems (each page looks very different) and additional overhead (editors have to create each page by dragging and dropping many components).

Some content creators feel that the editorial experience with Headless CMSs is artificial and complex, and this in turn can be a difficult transition for a publisher used to work on other CMS such as Wordpress. 

Common difficulties for publishers when using Headless CMS: 

• Headless CMSs do not come with a WYSIWYG (what you see is what you get), which allows users to view and edit the content by viewing it exactly as it would look on the web page or application. These CMSs require using the preview configured on the site itself.

• Text editorial functions require support. Functionalities such as aligning, centring, italics, changing font colour, etc. require code-level support to extend them. 

• Headless CMSs are not focused on the editorial experience, they are content repositories. Being content presentation agnostic, they do not offer the basic editorial tools that editors are used to working with, which can result in frustration in the editorial area.

Although the editorial team does not make the decision as to which platform to use, it is necessary to take their needs into account so that the final result of the sites created is satisfactory.

These difficulties can be addressed and solved from the outset through effective planning and implementation. For example, Contentful has tools that address these editorial constraints, such as "Compose", "Launch" and "Studio".

If you are suffering with your headless CMS, it may be because it was not implemented well and you are not using all the tools that can be used. It is possible to solve these challenges without sacrificing the principles and benefits of the headless model.

5 tips for creating complex pages in Headless CMS

1. Carefully plan the content architecture. 

In a Headless CMS your design possibilities are conditioned by the structure you give it at the time of design and implementation. According to your content architecture, your editorial capabilities can encompass more functionalities and be more flexible, but this requires careful planning. 

2. Include helpers in your architecture.

Helper content contains channel-specific visual appearance statements. That is, the way content is displayed on a smartwatch, mobile device or website can be determined through a helper object. These presentation themes can also be declared in the block as such, through the creation of themes (see below). It is advisable to plan your design system well so that it can handle these presentation variations. 

3. Plan in detail the information and content architecture from wireframes.

How will the content be managed or where will it come from? Should it be managed by the editor or automated? Where it is not necessary for editors to make decisions or modify aspects of the final presentation, it is advisable to automate processes. 

Additionally, it is useful to create a good enough "default" version, so that if the editor creates a page without making any modifications, it will look good: colour, background, padding, image type, etc.

4. Create "themes" or "layouts" for your complex pages and complement them with examples. 

Creating themes (theme 1, theme 2, theme 3, etc.) with their design and functionalities already determined, and with well-established parameters, ensures that they are always well displayed and with no room for errors or damage to the presentation. 

When there is more flexibility for the editor, more planning is required: more training on how to use each functionality and more documentation. In addition, the implementation effort (as there are more variations or special cases) and the effort to fine-tune what editors can change increases exponentially. 

Sometimes it is preferable to restrict the options by planning from the outset the complex pages that are required. You can have flexibility in the block structures (which blocks can be used), but within the blocks themselves it is already defined what can and cannot be done. 

 The same is true for layouts: they are defined page templates that can be worked with and that have already proven to work well on different devices. 

Finally, it is advisable to create enough examples of complex pages in the development stage.  These serve both to test how these blocks look, and as a template or example for the editors. 

5. If you are using Contentful, take advantage of advanced features such as "Launch" and "Compose".

Although Contentful has some editorial limitations, like all Headless CMSs, it has an ecosystem of tools that manage to solve those limitations. This allows it to be on par with other CMSs that are more editor-friendly. Contentful offers multiple integrations to solve your editorial needs: compose, launch, studio.  

Contact us at

Implementing an effective editorial experience requires in-depth planning based on extensive experience. We invite you to contact us to discuss your project needs.