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. 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 controls 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.
Note:
You can upload the following image formats: PNG, GIF, JPG, JPEG, and BMP.
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.
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 percent for position and pixels for size settings is not calculable.) When snap lines appear, the corresponding widgets will snap together across all screen resolutions.
Style settings common to most widgets include the following:
- 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 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 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 in the following three modes:
- Custom—You can set specific values for Width and Height with the default Custom mode. If width is set to Stretch or Custom, you can click the lock icon to keep the aspect ratio, which allows you to drag to resize without losing it.
- Auto—If a size value is set to Auto, the property is set automatically based on the widget’s content. This can be used for widgets displaying dynamic content.
- Stretch—Set a widget size based on the size of its container.
Note:
One exception for the Size setting includes placing a widget inside a column or row widget. For example, if you place an image widget in a column widget, there are only two modes of image Width (Stretch and Custom), both of which can set the size to keep the aspect ratio if Height is set to Custom.
The Position of a widget is defined by the distance from each side to its container, which is Left, Right, Top and Bottom. For example, Left means how far a widget’s left edge is offset to the left edge of its parent container. When you add a widget, you can specify the Left and Top distance by entering a value in the direction’s input box, and you can change the customized direction by clicking Change to custom of the opposite direction, or by clicking Change to auto of the customized one.
Different Size modes correspond to different Position settings. For example, if Width is set to Custom or Auto, you can change Left or Right and the other is set automatically. If Width is set to Stretch, you can set its position by customizing the distance to both the left and right side, while width is automatically set by the remaining length of the container's width. Height is similar, but corresponds to Top and Bottom.
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, and in this case, both Left and Right position directions are in Auto mode.
You can also change the length unit for both position and size:
- px—The absolute value in pixels.
- %—The percentage of the container's width and height.
You can rotate the widget clockwise by giving the Rotation setting a positive number, or counterclockwise by giving it a negative number.
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.
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—Use the full height of its parent container. This is the default.
- Auto—The height value is set automatically by the widget’s content.
- Custom—You can specify height value in px or %. If you check Keep aspect ratio, you can drag to resize the widget without losing the aspect ratio.
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.
The Rotation setting allows you to rotate the widget clockwise or counterclockwise by giving it a positive or negative number.
Animation
Animation is supported in Experience Builder to customize how your widgets appear. With provided effects and options, you can build the following experiences:
- A window spins in as you load the app.
- Widgets fly in as you scroll down the page.
- The later view pushes the former one as you navigate a Section.
- The descriptions fade in as you hover over a Card widget.
Four levels of animation are supported:
- Page / Window level—Supported by the framework and available in page/window settings. It controls all first level widgets appearing animation.
Note:
The first level widgets mean widgets that are added into the page/window directly, the ones nested in layout widgets are not included. The nested relation can be found in the Outline view.
- Container level—Supported by the framework and available on the Style tab of Block, Fixed Panel, Sidebar, Row, Column and Section widgets. It controls how the container appears, as well as the appearing animation of the widgets directly contained in it (the nested widgets are not included). For Section widgets, it also controls how views switch.
- Single widget level—Supported by the framework and available in Style tab of widget’s settings. It controls how the widget itself appears.
Note:
The lower-level animations will override the higher-level animations. For example, if a widget is added in a row, the row-defined animation will be played if in the widget’s setting, the animation is set as None. Otherwise, the animation in the widget settings will be played.
- Inner-widget level—Supported by the widget itself and available on the Content tab of a widget’s settings. It controls the animation of user interactions within the widget. For example, Bookmark widget plays transition effects when users switch a bookmark, and Card widget provides hover animation to display more details.
Animation of layout containers (Block, Fixed Panel, Sidebar, Row, Column) is composed of two parts. With the container animation, you can customize how the container panel appears. With the Contained widget animation, you can customize how the widgets directly added in the container appears. The two animation effects are played at the same time and the final animation is the overlay effect. You can preview the combined result by clicking the Preview button.
Besides the In animation, which controls a Section panel's appear effect, Section widgets have another animation setting called Transition animation, which controls the animations of its views. The View tab controls how the view panels transition and the Widget tab controls how the widgets in the view appear. When the Section comes into view (with page loaded or scrolling to), the widget animation for the current view is played along with the In animation. When switching between views, the widget animation is played after the view animation.
Animation settings
- Click the animation thumbnail or the Change button to open the effects panel.
- Click the effect thumbnail to select and preview the single effect.
- Click the Preview button to preview the overall or combined effects.
- Some effects may have additional setting options:
- Effect—Provides continuous, natural micro effect options.
- Direction—Defines the moving direction for effects such as fly in and float in.