You can change the default style settings for each widget in Experience Builder to customize properties such as size, position, background, border, and box shadow. Options vary depending on the constraints imposed by the page type you add it to or its parent container, such as a row or column, that automatically control size and position.
Style settings
The Style tab in the widget configuration panel includes options to change the icon and label to distinguish between widgets as you configure your web experience. The icon and name appear in the Outline view for the active page and in choice lists when you connect widgets.
Rather than drag widgets around the canvas to move and resize them, you can set explicit values for their size and position. The size and position settings define how the widget is situated on the page by width, height, and location. You can specify these values in pixels (px) or percent (%) to determine how to display your content. See the sections below for the size and position settings applicable to widgets added to a full-screen page or a scrolling page.
Style settings common to all the widgets include the following:
- Keep within the parent container—Prevent a nested widget from being dragged outside the boundaries of its parent widget.
- Background—Set the widget’s background by choosing a fill color or image. If you choose an image, you can position it within the widget's border using Fit, Fill, Center, Tile, or Stretch. If you choose Fit, the widget displays the background fill color around the image.
- Border—Set the widget's border by choosing its color, style (such as dashed or dotted), and width in pixels. Change the radius size (by pixels or percent) to shape the widget corners. Lock the settings to synchronize the radius of all four corners.
- Box shadow—Add a shadow effect around the widget using the following settings:
- Offset X—Set the horizontal distance of the shadow. A negative value places the shadow to the left of the widget and a positive value places it to the right.
- Offset Y—Set the vertical distance of the shadow. A negative value places the shadow above the widget and a positive value places it below.
- Blur radius—Apply a blur effect to the shadow.
- Spread radius—Adjust the size of the shadow.
- Color—Select a shadow color.
Layout on a full-screen page
When you add a full-screen page to your app, you organize widgets within a freeform layout. If you drag the widget around the canvas to move or resize it, the Position and Size settings in the Style panel update accordingly.
You can set the following Position settings:
- Left—Specify how far a widget's left edge is offset to the right of the left edge of its parent container.
- Top—Specify how far a widget's top edge is offset below the top edge of its parent container.
- Right—Specify how far a widget's right edge is offset to the left of the right edge of its parent container.
- Bottom—Specify how far a widget's bottom edge is offset above the bottom of its parent container.
The position property values don't all take effect simultaneously. They are a combination of two settings:
- Left and Top or Bottom
- Right and Top or Bottom
Switch from Auto to Custom to choose which value to define manually. When a position value is set to Auto, that property is set automatically.
Note:
If you set custom values for Top and Bottom, the Top value is used. If you set custom values for Left and Right, the Left value is used when the browser’s language is left-to-right (such as English or Chinese) and the Right value is used when the browser’s language is right-to-left (such as Hebrew or Arabic).
You can also change the unit for each position property:
- px—The absolute value in pixels
- %—The percentage of the container's width (left, right) and height (top, bottom)
The Size settings are a combination of the container's width and height. You can set specific values for Width and Height, or you can choose Auto to have them set automatically.
For additional control, change the Height mode option:
- Fixed—Set the width and height separately. This is the default.
- Aspect ratio—Set only the width value and the aspect ratio between width and height.
Examples
The following list describes some recommended combinations of size and position settings:
- For a custom width, set a custom Left or Right value and choose Auto for the other value.
- For a custom height, set a custom Top or Bottom value and choose Auto for the other value.
- If you choose Auto for the width, set a custom Left and Right value; or only set a custom value for Left or Right, and let the width adapt to the widget content.
- If you choose Auto for the height, set a custom Top and Bottom value; or only set a custom value for Top or Bottom, and let the height adapt to the widget content.
Blocks on a scrolling page
When you add a scrolling page to your app, its layout is organized in blocks. Blocks use a multicolumn grid layout like that used in the Row widget.
Blocks have the following Size and Position settings:
- Width—Set a fixed width by percent of the page.
- Height—Set a height value in pixels or choose Auto to set the block height automatically.
- Offset X—Set the horizontal offset in pixels.
- Offset Y—Set the vertical offset in pixels.
Widgets nested in a block
The width of widgets that you add to a block can range from 1 to 12 columns in the block's grid layout. You can only specify height values for widgets nested in a block; their width is controlled by the grid. If you change the height setting to Auto, it's set automatically.
There are three types of Height settings:
- Fit to container—Use the full height of its parent container. This is the default.
- Fixed—Set a custom height in pixels.
- Aspect ratio—Automatically calculate the height based on the width and aspect ratio between width and height.
When you choose Fixed or Aspect ratio, you can choose one of the following Align options:
- Top—Align the widget vertically to the top of the block.
- Bottom—Align the widget vertically to the bottom of the block.
- Center—Align the widget vertically with the center of the block.