Adding Built-in Components in Sitecore XM Cloud Pages

Learn how to drag-and-drop built-in components in XM Cloud using the Sitecore Pages visual editor.

July 28, 2023

By Theresa Gutierrez

Built-in Components in Sitecore XM Cloud Pages

In Sitecore XM Cloud Pages, "components" refer to pre-made, modular elements that offer certain functionality on a web page. These components are designed with flexibility and reusability in mind, with the intention of being reused across different parts of a website. This approach helps maintain consistency in design and functionality, makes the development process more efficient, and facilitates easier updates and maintenance. These elements could be anything from a text box or image gallery to a contact form or a search bar. Because they are modular, they can be added into different parts of a page as needed to build or customize its layout and features.

Components can be easily added, configured, and managed from within the Sitecore XM Cloud Pages interface. This allows organizations to save time and streamline the development process, and focus on delivering engaging and personalized digital experiences to their customers. The pre-built components and templates in Sitecore XM Cloud Pages provide a foundation for non-technical users to build high-quality digital experiences, while also enabling developers to add custom functionality as needed.

If you would like to explore the Sitecore Pages interface in XM Cloud, read our blog here.

Out-of-the-box Components in Sitecore XM Cloud Pages

There are several different categories of components that can be used in multiple contexts or configurations across XM Cloud Pages. The out-of-the-box (OOTB) components included in XM Cloud Pages include are grouped in — Media, Navigation, Page Content, and Page Structure categories.

Components can include elements such as:

  • Text
  • Images
  • Forms
  • Navigation menus
  • Videos and more

Let’s explore the different built-in components in XM Cloud with the following screenshot and table:

Sitecore XM Cloud Pages component list

XM Cloud ComponentDescription
Media
1. Image ComponentAdd images from the media library to a page.
Navigation
2. List Link ComponentAdd a list of items that display a title, link, and text.
3. Navigation ComponentCreates a navigation menu for your site.
Page Content
4. Page Content ComponentDisplays specific fields from a selected data source item on the page.
5. Promo ComponentConsists of an image, text, and link field, all of which need to be manually populated. All three will belong to the same content item, that gets assigned to the component.
6. Rich Text ComponentAdd formatted text to the page using HTML tags.
7. Title ComponentDisplays the title or subtitle of the current page.
Page Structure
8. Column Splitter ComponentDivides the page into a number of specified columns,
9. Container ComponentAdds extra CSS styling to other components using a wrapper.
10. Row Splitter ComponentDivides the page into a number of specified rows.

Adding Built-in Components in Sitecore XM Cloud Pages

To add a components in XM Cloud, we will need to use the Sitecore Pages visual editor and its simple drag-and-drop functionality. Components are the building blocks for page layouts, and can also hold various content that we will be able to edit visually. The exact placement of a component will depend on the layout configuration of a page in Sitecore Pages, but it can be inserted:

  • Inside a blank placeholder
  • Before or after existing components on the page

Here you will learn how to create a new page and add components to the page.

Adding a New Page

  1. Navigate to the Pages tab in the left-side menu in Sitecore XM Cloud Pages, and click + Create a page.

    Sitecore XM Cloud Pages site tree

  2. Choose the Blank Page template from the dialog box, and click Select.

    Sitecore XM Cloud page templates

  3. Name your new page in Sitecore XM Cloud Pages. Here you can see the same content tree structure in previous legacy versions of Sitecore.

    Sitecore XM Cloud Pages site tree

Adding Components to a Page

  1. Your new page will have the basic layout that consists of the site title, main placeholder, footer placeholder.

    Sitecore XM Cloud placeholders

  2. Navigate to the Components tab in the left-side menu and choose which component you want to add to the page. In this example we will use an Image component under the Media section.

    Sitecore XM Cloud Pages component list

  3. Click and drag the Image component to the placeholder where you want it to exist on the page. In this case, we added it to the main placeholder.

    Drag and drop components in Sitecore XM Cloud Pages

  4. With the component selected, a small menu will appear above the component in the Pages editor. Here we have the option to move the component, select the parent element, select a content item, or delete it.

    Sitecore XM Cloud Pages image component

  5. Select the component you want to edit, and a menu will appear on the right side of the Pages editor. Here you will find the different component options such as layout, styling, and advanced styling details.

    Drag and drop components in Sitecore XM Cloud Pages

Making the Move to Sitecore XM Cloud

By using the built-in components in Sitecore XM Cloud Pages, organizations can streamline their development process, and empower marketers to focus on delivering engaging experiences to their customers. The OOTB components in Sitecore XM Cloud Pages provide a foundation for building high-quality digital experiences. This low code / no code integrated authoring experience also enabling organizations to add custom functionality as needed.

If your organization is using Sitecore and is ready to make the move to XM Cloud, reach out to our friendly Fishtank team to get started. If you're already on XM Cloud and are wondering how to access your Sitecore XM Cloud instance, read our blog here.

Until then, happy marketing!



Theresa

Theresa Gutierrez

Sitecore Strategist | Sitecore Strategy MVP

Theresa, aka 'T', is a high-energy marketing creative with 8+ years of experience across various industries. She's passionate about delivering strategy and design, with a focus on Sitecore SaaS technologies. T is an avid golfer and loving dog momma, appeased only by delicious food and a bevy of something bubbly. Cheers!

Second CTA Ogilvy's Legacy

Today, David Ogilvy's influence can still be felt in the world of advertising.

Ogilvy's Influence Example
Emphasis on research Market research is a crucial part of any successful advertising campaign
Focus on headlines A strong headline can make the difference between an ad that is noticed and one that is ignored
Use of visuals Compelling images and graphics are essential for capturing audience attention