Tailwind Logo

Create simple components with Sitecore Components

XM Cloud

Published: 2024-03-13

We have previously introduced the newly released Sitecore Components, but this time we would like to create a simple component.

Create a new component

This time we want to create a simple component. First, we will prepare a new component.

createsimplecomponent01.png

Place the blocks and elements you wish to place in the component. This can be done by clicking on the Add element button in the upper left corner.

createsimplecomponent02.png

Prepare two image and two text elements.

createsimplecomponent03.png

Now you can decide where to place the image and text.

Specify image content

Next, we want to specify the source of the image. The "Content" and "Caption" fields on the right side of the screen are set to "Empty. This time, we want to specify an image that has already been published and a fixed text.

First, click on "Image source" and either "Change" or "Paste URL" will appear.

createsimplecomponent04.png

As for "Caption", it is directly set and completed. For "Text Element", change the text and complete as follows.

createsimplecomponent05.png

Staged with respect to components and available from Pages.

createsimplecomponent06.png

Once the component has been set to Staged status, it will appear in the Components list in Pages.

createsimplecomponent07.png

The created component can now be placed on the page.

createsimplecomponent08.png

Responsive support

Then add a version that changes the placement for a slightly smaller screen size. Click on Duplicate version to create a new version using the components already created.

createsimplecomponent09.png

Set the version name as Mobile and the size as Small, and adjust the position as follows.

createsimplecomponent10.png

When multiple versions are created, an alert appears in the Responsive Bundles section of the component. This allows you to specify which design is to be used on which devices.

createsimplecomponent11.png

This time, adjust the size so that it appears only small as Brackpoint.

createsimplecomponent12.png

Once this is created, it can be selected by Component version in Pages.

createsimplecomponent13.png

If you switch the size of the device in Pages, you will see the shape of the display change.

createsimplecomponent14.png

Publish Components

The component you have just created is now ready to be published for use on your site. This can be done from the Publishing screen, using the Staged and Published menus on the left.

createsimplecomponent15.png

It is now safely embedded and displayed on the page.

createsimplecomponent15.gif

Summary

With Sitecore Components, we were able to create a component of the Web with no code. However, this is not very attractive because the component will only be fixed and displayed. In the next issue, I would like to make some improvements so that the CMS can change the images and text used in the component by linking with the data source managed by the CMS.

Tags