Building websites with Builders Platform

The web editor's main tool is our CMS, XP Content Studio. This is where we build websites by combining the different parts that are available through the platform.

Principles for Content Studio

Content is either tailored for the page you're creating with parts or recycled using content types and fragments.
All pages must be built with one header part at the top of the page to be accessible.
All parts are full-width and may be placed anywhere on the page. This allows for editorial flexibility without breaking our visual guidelines.
Some parts are only available on a given page type.
There are few rules, but with great freedom comes great responsibility: Follow the guidelines and collaborate with your colleagues.

Overview and guidelines for parts

Web editors may design and combine parts in a multitude of ways to meet different business and user needs. Some are simple and versatile, others are more complex and specific in their use. Always consider which part best meets your needs by reading the guidelines.

Recycle content with content types

A lot of information may be used in many different contexts, and makes sense to govern in only one place. This is why our platform uses content types. Write teaser texts, product information and FAQs just once and use them as many places you need.

1. Create your page and choose a page type

When you add a new page to your site, you'll see two page types in the list of available content types. Choose Article for long-form text content and General for everything else.

2. Write a teaser text

Give your page a teaser text. This is is a new feature that lets us introduce our page content across our site with Teaser Cards.

Keep the teaser texts short and to the point: A teaser card is a link, and should always be understood as such by the user.

When your page is published, you can link to it from other pages without having to create any new content.

3. Add parts to your page

To add parts to your page, simply drag and drop a part selector to the middle section in CS. You'll find the parts selector under components in the context panel on the right side of your screen:

Are there already parts on your page?

You may find that your new page is already populated with parts. This is because a template is in use, which you may or may not use as a starting point.

A: Drag and drop the part selector to the middle section in CS.

B: Search or scroll to find the part you need. The list will show all available parts for your chosen page type.

3. Prioritise your content with drag-and-drop

Other than placing Header-parts at the top of the page, there are no strict rules on how to combine and prioritize parts:

Plan your content
Place the parts in the order that best suits your needs
Use the drag-and-drop functionality to rearrange the parts as needed
Think "mobile first": Although you may place tasks and cards next to each other on desktop, they will stack beneath each other on mobile, causing lots of scrolling