Change style settings
You can change the default style settings for each widget in Experience Builder to customize properties such as size, position, animation, background, border, and box shadow. The Style tab options in the widget configuration panel vary depending on the constraints imposed by the page type you add the widget to or its parent container (such as a row or column) that automatically controls size and position.
Rather than drag widgets around the canvas to move and resize them, you can set explicit values for their size and position. The Size & 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 (%). See the sections below for the size and position settings applicable to widgets added to a full-screen page or a scrolling page.
Other style settings common to most widgets include the following:
Rotation—Rotate the widget by a specified angle in degrees. A positive value rotates the widget clockwise; a negative value rotates the widget counterclockwise.
Keep within the parent container—Prevent a nested widget from being dragged outside the boundaries of its parent widget.
Animation—Set eye-catching animation styles using effects such as fly in, spin in, and fade in. You can also set transition modes for moving between section views.
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. You can use the same radius for all corners, or you can specify a radius size for each corner separately.
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; 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; 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.
When you add a full-screen page to your app, you organize widgets within a free-form layout. If you drag the widget around the canvas to move or resize it, the Size & Position settings in the Style panel update accordingly.
The size settings are a combination of the container's width and height. You can set a widget's Width and Height values using the following three modes:
- Custom—Set specific values.
- Stretch—Automatically set the size based on the size of the widget's container.
- Auto—Automatically set the size based on the widget’s content. Use this mode for widgets that display dynamic content. (This mode may not be available for widgets nested in a layout container, such as a column that automatically controls the width by default. For example, an Image widget nested in a Column widget only has Stretch and Custom modes for the Width setting.)
The position of a widget is defined by the distance from its edges (left, right, top, and bottom) to its container. For example, you can specify how far a widget’s left and top edges are offset to the left and top edges of its parent container. When you add a widget, you can enter a value in the corresponding position’s input box. To specify a distance for the opposite edge, click Change to auto (or click Change to custom on the opposite side in the diagram).
Different size modes correspond to different position configurations. For example, if Width is set to Custom or Auto, you can set the position by changing the distance value for the left or right edge, and the other value is set automatically. If Width is set to Stretch, you can set the position by changing the distance value for the left and right edges, and the width is automatically set by the remaining length of the container's width. The Height setting works similarly, respective to the top and bottom edges.
Both settings include the following unit options:
- px—The absolute value in pixels
- %—The percentage of the container's width and height
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 percentage 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.
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.
There are three types of Height modes:
- Stretch—Automatically set the height based on that of its parent container. This is the default.
- Auto—Automatically set the height based on the widget’s content.
- Custom—Set a specific height value in pixels or percentage of the container's height.
When you choose Auto or Custom, 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.
Use animation to customize how the widgets and windows appear as users load and navigate the app. Set eye-catching animation styles using effects such as fly in, spin in, and fade in. You can also set transition modes for moving between section views. With the provided animation settings, you can build the following example experiences:
- A window spins in as the app loads.
- Widgets fly in as users scroll down the page.
- A subsequent view pushes the previous view as users navigate the content in a Section widget.
- The descriptions fade in as users hover over a Card widget.
The following levels of animation are supported (listed from higher-level to lower-level animation).
Page and window level—Supported by the framework and available in page and window settings, this level controls animation for the page or window and all the widgets that are added directly to a page or window (first-level widgets).
Container level—Supported by the framework and available on the Style tab for Block, Fixed Panel, Sidebar, Row, Column, and Section widgets, this level controls animation for how the container appears, as well as the widgets that are added directly to it (but not widgets nested in those added widgets). This level also controls animation for switching views in Section widgets.
Single widget level—Supported by the framework and available on the Style tab for a widget, this level controls how each widget appears.
Inner widget level—Supported by the widget and available on the Content tab for a widget, this level controls animation for user interactions within the widget. For example, a Bookmark widget plays transition effects when users switch to another bookmark, and a Card widget provides hover animation to display more details.
Section widgets have two animation settings. The In animation setting controls a Section panel's appear effect and Transition controls animation for its views. Settings on the View tab control how the view panels transition. Settings on the Widget tab control how the widgets in the view appear. When the content of a Section widget appears on the page (either when the page loads or when scrolled to), the widget animation for the current view plays along with the In animation. When switching between views, the widget animation plays after the view animation plays.
To open the Animation Settings panel, click the thumbnail or the Change button. Click an animation thumbnail, such as Float in or Zoom in, to select it and preview the animation on the canvas. Optionally, choose options for the following additional settings:
- Effect—Provides continuous, natural micro effect options, such as gentle, wobbly, and slow.
- Direction—Defines the moving direction (from top, bottom, left, or right) for applicable effects, such as fly in and wipe in.
Animation settings for layout containers (Block, Fixed Panel, Sidebar, Row, and Column) also include a Contained widget setting to specify animation for the widgets that are added directly to the container. The two animation effects are played at the same time. You can preview the combined result by clicking the Preview button in the settings.