With the Styling tab options, you can customize the background color, opacity, borders, and paddings of the selected component, block or placeholder on the content item layout.

e-Detailers, their briefs, and banners

You can configure the component positioning.

The Styling tab expands once you select a component, block, or placeholder on the layout.

You can manage the required styling in the following way:

FILL: Set the background color with a color picker. You can specify the background opacity in the respective input field. To remove the background color, click the droplet button.
OPACITY: Set the opacity of the selected component or block on the layout.

e-Detailers, websites, messenger ads, banners, and landing page briefs

By default, the opacity is set to 100%. You can change it with the slider, manual input, or arrow keyboard keys.

To set the background color for all item layout, go to the Settings tab.

PADDING: Set the block or component padding in pixels.
BORDER:
[1]: Configure the border color, opacity, width in pixels, and style. By default, the None value is set for style.
[2]: Select what border to display: all borders, left, right, top, or bottom. Border configuration is applied to the displayed side. By default, all borders are selected.
CORNER RADIUS: Set the corner radius in pixels for the component and block borders. To configure all corners at once, click the crossed link button and change the radius value with the manual input or arrow keyboard keys.

Emails, email fragments, and email briefs

Select the Lock for email display checkbox to capture the block, placeholder, or component as an image, protecting your design from rendering issues in email clients. If the element you're locking has a transparent background, add a background color for consistent visibility across all view modes and themes of email clients. The image is generated based on the desktop version of the selected block, placeholder, or component.

Component positioning

Available for e-Detailers, their briefs, and banners

On the Styling tab, you can set the component size and position on the slide, arrange the component placement on layers, and align it vertically or horizontally.

Select the required component on the slide and manage its positioning in the following way:

Set the width and height of the selected component.
Place the selected component in the exact position on the slide. For this, specify the distance from the left edge of the slide to the upper-left corner of the component as its X axis value. The distance from the top edge of the slide to the upper-left corner of the component is the Y axis value.

You can specify the values in the input fields manually or with arrow keyboard keys.

The upper-left corner of the slide is a starting position. The X-/Y-axis values define the position of the component's upper-left corner in relation to the starting position.

Additionally, you can view the X-/Y-axis values of the selected component on the Editor bottom bar.

Arrange the overlapped components on the slide with the following controls:

Control	Name	Action
	`Bring forward`	Place the selected component one layer up
	`Send backward`	Place the selected component one layer back
	`Bring to front`	Place the selected component on top of all components
	`Send to back`	Place the selected component behind all components

Advanced layer options are available in the LAYER field. You can set the required value manually or with the arrow keyboard keys. The maximum value is 10000.

Component	Notes
Pop-up	The `LAYER` value of the pop-up component and the references pop-up is 99999. As a result, they appear on top of all other components.
Container	The `LAYER` value of all inner components placed into a container or pop-up is one point greater than their parent component.
Tab group	The tab group inner components inherit the `LAYER` value of the tab group. The `LAYER` value of its inner components is read-only.

Align the selected component with the vertical (Left, Center, or Right) and horizontal (Top, Middle, or Bottom) controls.