Configuring an element
The Component builder lets you customize elements within components. Various options are available for specific elements.
Adjusting layout and alignment
The layout customization is in the right-hand pane for elements such as sections, cards, and containers. It applies to the component version you are editing but can spread to several elements within that component. For example, a container element can take on spacing and layout settings to be applied to all child elements within that container.
You can access layout customization using the following settings:
-
Layouts and alignment - provides all of the tools offered by CSS Flexible Box Layout to align content. For example, the Number of columns Auto setting lets the builder automatically determine the number of columns required to put child elements side by side, and uses wrapping to ensure that the child elements do not overflow the container when there are more child elements than space allows. The layout setting is applied to the parent element holding the child elements.
-
Dimensions - can be set in pixels, percentages, ems, and rems. For example, setting the height of an element can be used to create a scrollable area in a component.
-
Spacing - applies padding values predefined in the Styles library. The values can be overwritten at any time and similar to the typography example, the changes do not propagate back to the Styles library. Sides is a shortcut to quickly apply the same numeric value for vertical and horizontal padding. Sync is a shortcut to quickly apply the same numeric value for left, top, bottom, and right padding.
-
Grid sizing - changes the configuration of a grid in a section by adjusting the number of columns and rows, or by changing the row height.
Adjusting sizing and placement of an image
The sizing and placement customization is available for images.
With this setting, you can choose among the following properties for your image:
-
Define an image Width and Height, or indicate how to calculate the height relative to the defined width.
-
The following sizing methods are available:
-
Cover resizes the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
-
Contain resizes the background image to make sure the image is fully visible and at the original aspect ratio.
-
Stretch resizes the background image to cover the entire container without cutting any edge by changing the aspect ratio of the image.
-
Crop resizes the background image to cover the entire container while maintaining the original aspect ratio of the image element.
-
-
Specify the Alignment to reposition the image in the available space if not all of it is visible.
Make an image accessible
Setting alt text on an image helps make the site more accessible to visitors who are visually impaired through screen readers. Alt text can also improve SEO for the site.
To set an alt text:
-
Select the image element.
-
In the right-hand pane, in the section Content , click Image alternative text.
-
If the alt text is a static text, click Static and type or paste in the text in the Text field.
To map the alt text from a data source, click Mapped, select the data source in the drop-down list, and in the data path tree, click on the relevant property.