Examples

Use this widget to support app design requirements such as the following:

• You want to display several large images with similar headings, but you want to avoid too much scrolling in your app. Use multiple views in a section, and include the built-in tools or add a Views Navigation widget so users can access each image without scrolling the page.
• You have different features that focus on the same location and want to showcase their information with a list and a map without needing to go to a separate page or block. You can switch the views to see the different perspectives. For example, create a section with two views that contain a map and a list. One view presents a map of San Diego restaurants and another view presents a map of the same area, but with recreational spots.

Usage notes

You can create multiple views to organize dynamic content in one section. Sections can exist anywhere on a page and include multiple views, and you can have separate content in each view. For end users to browse the different views of a section, you can enable navigation tools or add a Views Navigation widget to choose from more styles and flexible layouts.

Users can see the view names in the corresponding Views Navigation widget, so provide meaningful names. The sequence of views in the configuration panel is the order they’ll appear in the Views Navigation widget.

Settings

The Section widget includes the following settings:

• Views—Add multiple views one at a time or duplicate existing views if you want them to have the same background or layout.
  • Manage the views with the following options: Rename, Duplicate, and Delete. The view name is also used in the experience's URL. If you change the name of a view after publishing, previously used URLs will still work.
  • Drag views to change the navigation order in the section.
  • Background—Edit each view’s background by choosing a color or image. When you use a background image, set its position in the view by choosing Fit, Fill, Center, Tile, or Stretch.
  • Lazy loading—Choose to delay loading content for the view until it needs to appear in the widget, improving performance when the section contains a lot of views.
• Tools—Include tools for users to navigate the views.
  • Arrows
    • Direction—Display arrows horizontally or vertically.
    • Size—Define the size of arrows.
    • Offset—Define the location of arrows. 0 means arrows are on the edge of the section widget. Arrows with a positive offset are closer than those with negative values.
  • Dots
    • Position—Choose a position from left, top, right, or bottom.
    • Size—Define the size of dots.
    • Offset—Define the location between dots. 0 means dots are on the edge of the section widget. Dots with a positive offset are closer to the section widget center than those with negative values.
    • Spacing—Determine the spacing between each dot.
• Auto play—Automatically display views of the section with a predefined interval time.
  • Interval—Determine the interval time between views when auto play is turned on.
  • Loop—Enable views to display in a loop.
  • At run time, hovering on a Section widget pauses the auto play process. If a user switches to another view by clicking section tools or a linked Views Navigation widget, the auto play continues from the switched view.
• The Animation style setting for Sections includes options to animate both the section panels and the views. For more information, see Animation.