Tailwind Logo

Creating Components with Sitecore Components (Part 1)

XM Cloud

Published: 2024-09-25

I have previously introduced Sitecore Components, and in this article, we would like to introduce the new components and their integration with the CMS in three parts.

The following are some of the articles we have previously introduced

Create Components

In this case we would like to create an area for the Hero banner to be placed at the top of the page. When we first create a new component, we see an empty component.

xmccomponenntsdemo01.png

First, check the component theme. You can select a theme from the icons above the component. In the screen below, you can see that the Light theme has been selected.

xmccomponenntsdemo02.png

For example, if you switch to a dark theme, the Card display will also change.

xmccomponenntsdemo03.png

This time we will proceed with the theme of Light. First, place the card and then place the text in it with Heading 4.

xmccomponenntsdemo04.png

Next, specify a background image for this component. When specifying the entire component, specify an image from the Background Image section. In this case, we will specify a fixed image.

xmccomponenntsdemo05.png

Now that it is complete, the workflow proceeds from the Stage state to Publish to complete the creation of the component.

Placing Components on the Page

When you select the component list in Pages, you will see the components you have created as shown below.

xmccomponenntsdemo06.png

Then, by placing this component with Drag & Drop, you can use the created component on your website.

xmccomponenntsdemo07.png

Summary

In this article, we have introduced the process of creating a simple component and embedding it in a page. In this article, we have described fixed text and images, but this data can be linked to the CMS. In the next article, we would like to introduce that.

Tags