Designing content in Xperience

This page is dedicated to approaches you can use to display content managed in Xperience on your website. Xperience offers almost unlimited options for how you can display the stored content on the website.

You can design and present content using the following Xperience features (or their combination):

• Page types
  • Page types define the behavior and structure of pages. Each page is of a specific page type. From the content design point of view, a page type defines a “fixed” template for each page without options for editors to adjust it.
  • Page types are mostly used for the semantic and structural categorization of pages. Each page type can have configured multiple page templates that allow editors to adjust the design of the pages.
• Page templates
  • Page templates allow content editors to choose from predefined page layouts when creating new pages. Using templates provides content editors with greater control over the layout of pages, without the need to ask developers to modify the code of their website. Content editors can also save the widget content and configuration of specific pages into reusable custom templates.
  • Editors use the default templates prepared by developers to present content stored in a structured format or create their custom templates (created from default templates) to speed up building the website’s content. Page templates can be used to present both structured content and page builder content (or their combination).
• Page builder
  • The Page builder is a user-friendly interface for page editing where non-technical users can manage content using configurable widgets prepared by the developers. Editable areas, where editors manage the content with the Page builder, are often parts of default page templates prepared by developers.
  • Page builder allows for creating the layout of whole pages or just sections of pages.

Depending on a site’s implementation, content editors can be provided with multiple options to create pages and manage their content. The most common workflows are:

• Editors use the default templates prepared by developers to present content stored in a structured format.
• Editors create and use their custom templates (from default templates) to speed up building the website’s content.
• Editors use templates that allow for designing with the page builder. With the page builder, editors can use content stored in a structured format (which is the preferred way) or unstructured format, meaning they directly input data into page builder components.

Designing content using page templates

The design of every page in Xperience is based on a template. The page template provides content editors with greater control over a page’s layout. Developers prepare page templates and their properties in code and editors use them to create new pages or change the layout of existing pages. Based on the project requirements, page templates can combine means to display structured content with predefined editable areas for page builder.

Find out more about developing and using page templates.

Designing content with the Page builder

The Page builder allows content editors to design parts of or whole pages wherever developers enable it (by defining editable areas). Editors can use two types of components to layout content in the Page builder: sections and widgets. 

Sections serve as containers for widgets and allow you to define the layout of a page (or some of its parts). 

Editors use widgets to populate sections with content. Widgets can also provide the “design for your content”. Developers can prepare widgets that handle the content in three ways:

Widgets that only present structured content

Editors add these “structured-content widgets” into appropriate sections and select the content the widget will display. The content itself can be stored:

• As child pages. The parent element contains the editable area(s) and enables a preview of the added content.
• As content items within a specific section in the content tree (called, e.g., “Reusable content”).
  
• Elsewhere in Xperience. The widgets serve only as design containers for the content stored (and presented) somewhere else. For example, a widget that displays only several properties of the “Product” content type:
  

What will using the reusable content look like?

For example, imagine the editors are building a campaign landing page. The page will contain a section with videos built with reusable content. From the design perspective, editors should select only the Video page type from the content tree to populate a Video widget. From editor’s perspective, adding reusable content to the page might look like the following:

However, developers have only limited means when configuring the selectors to accept only a specified type of content (i.e., allowing only a specific page type to be selected). In case the editor selects a wrong page type, this could lead to visual inconsistency or a broken user website experience. When modeling the content storage, always consider how editors will build their pages using widgets. Help them understand what type of content they’re supposed to work with. For example, you can use instructions next to the selectors in the widget properties and your project documentation to ensure editors receive enough guidance.

Widgets that store and design the content at the same time

With these “single-purpose content widgets”, editors can either manage the content in a WYSIWYG manner using inline editors, use widget’s properties and add content through widget’s configuration dialog, or use a combination of both. The out-of-the-box Rich text widget is an example of a widget with advanced text styling capabilities. The Banner widget on our Dancing Goat sample site shows both inline editors and widget configuration properties where all the input data are stored within one database field.

Widgets that combine both inline-editing and structured content

“Mixed-content widgets” allow editors to reuse structured content, e.g., by providing a selector to pick content from the content tree. At the same time, editors can use widget’s editable properties to either create widget’s content or provide additional information to structured data pulled from the content tree. 

We recommend limiting the use of such widgets only to specific pages (sections) as content stored in these widgets can be more difficult to reuse in other channels.

Recommendations - Page builder

You’ve learned about the different options of designing Xperience pages. On the General content modeling recommendations page, you’ll learn about overall content considerations and universal tips on website functionality that you might consider when planning your next project.