How to Build Customized Pages in Content Hub?

Much like building a regular page on Sitecore, to build a custom page on Content Hub, you would need to adopt the same functionality such as ‘template creation’ followed by ‘presentation’ to add the components. The various steps involved in this process have been outlined below:

Step 1

Begin by managing the section, followed by selecting pages.

Step 2

Next, click on + after which a new tab will open resembling the below image.

Here, you can define the page name, parent, page type, and master layout. After selecting the types, click on ‘Add’ which will create the page. After the creation of the page, you will be able to see several options that would help customize your page. These include the following:

• Layouts
• Background
• CSS
• Info
• Conditions

Layout Section

At this stage, you may use the Layout tab to view a schematic representation of your page layout. By default, the page layout encompasses three zones: the Header zone (left), the Header zone (right), and the Main zone. A zone may be simply defined as an area within the layout that contains components. It is the components that store the content shown on a page. A zone can contain many components.

In each zone:

• Click on the Add component button to add a new component to the zone.
• Click the icon to drag a component to a new location.
• Click on the Row settings to change row settings, column layout, and content alignment. To change the column layout, note the following steps:
• In the Row settings dialog box, on the Columns tab, select a layout from the set of available templates. When you change the layout, all components move to the first zone of the new layout.
• Click Duplicate row to create a new section within the same zone that is an exact copy of the layout settings. All values in the original layout are copied over.
• Click Delete row to remove a row.
• Click More options to edit, duplicate, or remove a component. You may also use this button to open the component settings dialog box.

 

Background Section

 

This tab is very useful for occasions when you need to have a ‘background image’. Each page can have its own background image which may be selected from either all assets or from the portal assets.

 

After selecting the image of your choice, you can also select your preferred image size from the various size choices available. Once you’ve completed your image customization, you simply have to click on ‘Insert’ to finish creating your new background image.

CSS Section

This tab Is used to add CSS to your page. Here, you can define all the CSS customizations depending on how you wish to design your page.

Info Section

You can use the Info tab to view as well as change all kinds of general information regarding your selected page.

Click Edit to modify the information.

Condition Section

Use the conditional details page to view the various hierarchical conditions for detail pages. This means that when users wish to navigate to the parent section of your selected page, they will be redirected to the first child page that fulfills the conditions. In case no conditions are met, or there are no existing conditions, then the user is redirected to the parent page.

The conditional details page allows users to be automatically redirected to specialized detail pages, custom-designed to represent the specific details of the entity type, rather than a generic page for all entity types.

To build the conditions for a child detail page, follow the steps described below:

• On the menu bar, click on the Manage button
• Once you’re on the Manage page, click on Pages.
• In the left pane search box, enter the name of the details page, for example, Asset details, and then select the page.
• Click the Conditions tab, click + Condition and, from the entity definition drop-down list, select the entity definition, for example AssetMediaToAsset.
• From the available list, select a clause: Contains: equates to the IS or EQUALS operator. Does not contain: equates to the IS NOT or DOES NOT EQUAL operator. Is empty: equates to the IS NULL operator. Is not empty: equates to the IS NOT NULL operator.
• From the available list, select an operator: All: equates to the logical AND operator. Any: equates to the logical OR operator.
• Click + Add and select the entities to include in the condition.

 

The available entities are related to the selected entity definition.

1. To include entity types in the condition, next to the entity, click the right arrow (→), select the entity types, and click Select.

In this example, the entities are defined by the Asset Media entity definition and the entity types are the video file formats.

Conclusion

The dynamic nature of multi-platform content communication leads to a wide variety of page customization requirements to enable personalized consumer interactions. Following the aforementioned steps will not only equip users with a strong foundational understanding of the various ways in which page customization on Sitecore Content Hub is possible, but also provide an understanding of the relevance and functionalities of the various sections available in this particular Sitecore CMS.

If you are curious to learn more or keen to implement Sitecore for your business then reach out to us and be certain to receive expert guidance and implementation assistance from our team of certified Sitecore experts.