Adding Style to Custom Component in Sitecore XM Cloud Component Builder

When you working on components in XM Cloud, there is always a need to provide the styling to it. In NextJs component it is pretty clear as you can add the classes to the elements, but when you are creating the components using XM Cloud component builder then things becomes much more easy.

In my previous blog, I have shown how you can create a no-code component using the xm cloud component builder and in this blog i will show you how you can provide style to the controls in component builder.

Please note, Since Sitecore has released its AI version and now being called SitecoreA , so i have updated this blog as per new options available in XM Cloud.

Reaching out to Components Section

Step 1: Click on your site and select Design Studio option


Step 2: Click on Component option



Create Component


Step 3: Now lets create a new component




Creating Elements

Step 4: Create few elements


Currently i have added 2 types of elements, one is heading and other is text. See on right section, they provide you the options to style it.

For both of the elements, the styling properties will get changed.

Lets do it for heading.

Step 5: Styling heading and Text fields

Lets change the color to light grey, for that go to 



Now you should be able to see the heading text in that color, now lets change the font size, for that goto:







Now, when you click on the text inside the Heading Box, you will see the new style options:




Similar kind of options you will get in text field as well.





Step 6: Adding Image Element and styling it

First add the image element and provide some source to it:


Below is the section where you can style the image section.


Lets try setting sizing property:



You can add custom spacing as well:


Now lets publish the component


Once the component is published, it should get available in component section in page builder:
Now this component is ready to be applied on any page item.

Similarly according the elements you use while creating the component, the styling properties gets changed.

References:

https://doc.sitecore.com/sai/en/users/sitecoreai/styling-components.html






Comments

Post a Comment

Popular posts from this blog

Working with Device Detection Module in Sitecore

Image
  What is Device Detection in Sitecore? Sitecore has an in-built feature called Device Detection which helps to detect at which device the content is shown into. When I say in-built that means its included as a standard feature in Sitecore XP 9.0 and later. This feature is also present in Sitecore XM Cloud , hence you do not need to buy a separate add-on or module to utilize device detection features.   The information gather from Device Detection Module can help content makers, allowing them to tailor the website experience based on the device type they are accessing it with, such as by displaying different layouts or content depending on screen size and capabilities. For Example, An iPhone and Android users might be looking at different content on same page.   Moreover, developers uses the same mechanism to personalize the components based on the device specific audience. They can setup Device Layout based on specific device parameters or can use the in-built rules...
Read more

Setup A/B Testing in Sitecore - Part 1

Image
  Setup A/B Testing in Sitecore - Part 1 In this article we will understand What is A/B Testing, Types of Testing in Sitecore, Actual Use Case and later we will see how we can setup A/B Testing in Sitecore XP solution with Rendering having different data source items.   Before we go further, lets understand WHAT IS A/B Testing ? A/B testing, also known as split testing, is a method used in marketing and product development to compare two versions of something to determine which one performs better. In an A/B test, two versions, A and B, are created, with one varying element between them. This element could be anything from the wording of an email subject line, the design of a web page, the placement of a button, or even the pricing of a product.   The versions, A and B, are then randomly  shown to similar audiences or users, and their responses are measured and compared. The version that performs better in terms of predefined metrics (such as click-through rate, conv...
Read more

Resolving: Failed to start service Sitecore Marketing Automation Engine Error

Image
  Description: In this blog, I will try to show you that how you can solve the common issue you might face while installing Sitecore 10.4 version XP Single On Premises. Sitecore Download Link: https://developers.sitecore.com/downloads/Sitecore_Experience_Platform/104/Sitecore_Experience_Platform_104 During installation of Sitecore 10.4 on my new device I got below error:   Misconceptions : Since the installation gets interrupted and we get only one option to close the Sitecore Install Assistance tool, The common mis conception arises while re-installing the Sitecore is that should I provide new Solr service name again? And/or should I provide new Sitecore instance name? The answer is NO . You can simply skip Install Solr Service Step: Then on next window provide the same Sitecore prefix or instance name which you provided earlier: Sitecore will override new files on previously created folders or services. Point to remember: Before you re-start you...
Read more