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.
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.
Prepare two image and two text elements.
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.
As for "Caption", it is directly set and completed. For "Text Element", change the text and complete as follows.
Staged with respect to components and available from Pages.
Once the component has been set to Staged status, it will appear in the Components list in Pages.
The created component can now be placed on the page.
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.
Set the version name as Mobile and the size as Small, and adjust the position as follows.
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.
This time, adjust the size so that it appears only small as Brackpoint.
Once this is created, it can be selected by Component version in Pages.
If you switch the size of the device in Pages, you will see the shape of the display change.
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.
It is now safely embedded and displayed on the page.
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.