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, column, or grid), which automatically control 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.
Caution:
Moving a widget from one container to another resets its size and position to the default values based on the target container. The same is true when you add a configured widget from the pending list.
Tip:
To help you align and precisely position widgets, snap lines and distance values appear as you drag a widget on the canvas or manually move and resize them in a fixed layout (such as full-screen pages, windows, sidebars, and lists). The values indicate distance from the widget to the side of its container and to nearby widgets, if distance is calculable. (A widget that uses percentage for position and pixels for size settings is not calculable.) When snap lines appear, the corresponding widgets will snap together across all screen resolutions in the published experience.
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. You can use the Quick style button to select from preset designs that coordinate with your app's theme. 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. You can use the Quick style button to select from preset designs that coordinate with your app's theme.
- Box shadow—Add a shadow effect around the widget. You can use the Quick style button to select from preset designs, or use 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.
Note:
Your selected theme affects the color choices in the configuration options. Click More to choose a custom color if you want to use a color that’s not part of the app’s theme.
Layout on a full-screen page
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.)
Note:
If the width is set to Stretch or Custom, you can choose to keep the aspect ratio when you drag the edges to resize the widget.
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.
Tip:
You can also change the position by clicking buttons on the toolbar at the top of the Style panel. For example, you can position the widget in the horizontal center of its parent container, which automatically sets the left and right position values (hiding the distance input boxes in the diagram).
Both settings include the following unit options:
- px—The absolute value in pixels
- %—The percentage of the container's width and height
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 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.
Tip:
Click the Pin button on a widget's toolbar to keep the widget visible on scrolling pages.
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.
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.
Grid items
Widgets nested in a Grid widget or grid page become grid items. Size and position settings are unavailable for grid items. To change the size of a widget in a grid, you can resize the Grid widget itself and drag the borders between grid items.
In a Grid widget or grid page's settings, you can check Allow expansion to include expand buttons that users can click to temporarily make individual grid items take up the entire area of the grid. By default, checking Allow expansion makes expand buttons appear for every item. However, you can override this setting for individual widgets. The Allow expansion check box also appears on the Style tab of every grid item's settings. This is useful if you want users to be able to expand some grid items but not others.
Animation
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, grow, and shrink. 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).
Note:
The lower-level animations override the higher-level animations. For example, if a widget is added to a Row widget, the animation plays for the row if the added widget’s animation setting is set to None. Otherwise, the added widget's animation plays instead.
- 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).
Note:
Widgets nested in layout widgets are not first-level widgets. Rely on the outline to identify nested widgets.
- Container level—Supported by the framework and available on the Style tab for Block, Fixed Panel, Sidebar, Row, Column, Grid, 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.
Animation settings
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, configure 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, Column, and Grid) also include a Contained widget setting to specify animation for the widgets that are added directly to the container. In addition to Effect and Direction, you can configure the following settings for contained widgets:
- Start—Define when the contained widget's animation starts relative to the container widget's animation. Select With previous to play the contained widget's animation at the same time as the container widget's. Select After previous to play the contained widget's animation once any container widget animation is done.
- Play the animation—Define how to play animations when there are multiple contained widgets.
- All at once—Play all the contained widgets' animations at the same time.
- One by one—Play all the contained widgets' animations one after another.
You can preview animations by clicking the Preview button.