Flex Gallery

Description of content types in the menus
Tool Bar Icon Description

Group of HTML elements

Editable: No, but some child components are editable.

Droppable: No, you can't drop other blocks or components inside.

Component Tool Bar:

Parent Selectable: Yes, you can select parent element from component.

Draggable: Yes, you can drag this component to other locations in the canvas.

Copyable: Yes, you can copy component in the canvas.

Removable: Yes, you can delete this component from the canvas.

Overlay Tool Bar:

Add Slide: Add a slide to the gallery.

Sort Slides: Sort or re-order the gallery slides.

Trait Manager Settings: Yes

  • Transition Speed: Sets the time of a gallery transition from one slide to another. Unit is seconds. Default is 1.5.
  • Transition Delay: Sets the amount of time a gallery slide displays before transitioning to the next. Unit is seconds. Default is 5.
  • Auto Rotate: Sets the gallery to automatically transition without interaction from the end-user. Default is checked.

Default Styles (doesn't include default browser styles): No

Child Components: Yes

  • Flex Gallery Slide
    • Component: Custom unordered list element.
    • Editable: No - See Trait Manager Settings below for options.
    • Droppable: No - Can not drop other blocks/components inside.
    • Tool Bar:
      • Parent Selectable: Yes, you can select parent element from component.
      • Draggable: No, you can't drag this component to other locations in the canvas.
      • Copyable: No, you can't copy component in the canvas.
      • Removable: Yes, you can delete this component from the canvas.
    • Stylable: No
    • Default Styles (doesn't include default browser styles): No
    • Trait Manager Settings: Yes:
      • Media Type: Selects the media to be placed in the slide. Options are:
        • Image
        • Video
        • Map
  • Flex Gallery Slide Image
    • Component: Image
    • Tool Bar:
      • Parent Selectable: Yes, you can select parent element from component.
      • Draggable: No, you can't drag this component to other locations in the canvas.
      • Copyable: No, you can't copy component in the canvas.
      • Removable: No, you can't delete this component from the canvas.
    • Stylable: No
    • Default Styles (doesn't include default browser styles): No
  • Flex Gallery Slide Video
    • Component: Video
    • Tool Bar:
      • Parent Selectable: Yes, you can select parent element from component.
      • Draggable: No, you can't drag this component to other locations in the canvas.
      • Copyable: No, you can't copy component in the canvas.
      • Removable: No, you can't delete this component from the canvas.
    • Stylable: No
    • Default Styles (doesn't include default browser styles): No
  • Flex Gallery Slide Map
    • Component: Map
    • Tool Bar:
      • Parent Selectable: Yes, you can select parent element from component.
      • Draggable: No, you can't drag this component to other locations in the canvas.
      • Copyable: No, you can't copy component in the canvas.
      • Removable: No, you can't delete this component from the canvas.
    • Stylable: No
    • Default Styles (doesn't include default browser styles): No
    • Trait Manager Settings: Yes:
  • Flex Gallery Description
    • Component: Custom div element.
    • Editable: No - you must use the Trait Manager Settings.
    • Droppable: No - you can't drop other blocks or components inside.
    • Tool Bar:
      • Parent Selectable: Yes, you can select parent element from component.
      • Draggable: No, you can't drag this component to other locations in the canvas.
      • Copyable: No, you can't copy component in the canvas.
      • Removable: No, you can't delete this component from the canvas.
      • Stylable: Yes - Style Manager settings limited to:
        • font-family
        • font-weight
        • font-size
        • font-style
        • line-height
        • letter-spacing
        • text-align
        • color
        • text-shadow
        • text-decoration
        • padding-top
        • padding-bottom
        • padding-left
        • padding-right
        • border-top-width
        • border-bottom-width
        • border-left-width
        • border-right-width
        • border-style
        • border-color
        • background-color
    • Default Styles (doesn't include default browser styles): No
    • Trait Manager Settings: Yes:
      • Show Title: Sets the slide title to show. Default is checked
      • Show Caption: Sets the slide caption to show. Default is checked.
      • Show Share Buttons: Sets the slide share buttons to show. Default is unchecked.
  • Flex Gallery Description Title
    • Component: Heading 2
    • Tool Bar:
      • Parent Selectable: Yes, you can select parent element from component.
      • Draggable: No, you can't drag this component to other locations in the canvas.
      • Copyable: No, you can't copy component in the canvas.
      • Removable: No, you can't delete this component from the canvas.
    • Default Styles (doesn't include default browser styles): Yes
      • Margin set to 0 pixels
  • Flex Gallery Description Caption
    • Component: Paragraph
    • Tool Bar:
      • Parent Selectable: Yes, you can select parent element from component.
      • Draggable: No, you can't drag this component to other locations in the canvas.
      • Copyable: No, you can't copy component in the canvas.
      • Removable: No, you can't delete this component from the canvas.
    • Default Styles (doesn't include default browser styles): Yes
      • Margin set to 0 pixels
    Flex Gallery Description Share
    • Component: Share
    • Tool Bar:
      • Parent Selectable: Yes, you can select parent element from component.
      • Draggable: No, you can't drag this component to other locations in the canvas.
      • Copyable: No, you can't copy component in the canvas.
      • Removable: No, you can't delete this component from the canvas.
    • Default Styles (doesn't include default browser styles): 

Unique Documentation: Yes

  • The flex gallery component will always assume the full width of its parent element. It is fully responsive and will scale with the parent container.
  • There are not restrictions on media dimensions. Any size media can be applied to a flex gallery slide and it will scale proportionally.
  • The flex gallery slides automatically change height while transitioning so that the gallery always properly displays each slides unique dimensions without distortion.
  • To prevent the flex gallery from changing height from one slide to the next, set the slide media all to the same dimensions. If the desired dimensions are 1500 x 700 for example, crop all images to 1500 x 700 before uploading and set any videos or maps to 1500 x 700 in Trait Manager.

Stylable: Yes, when double-clicked, some options are available via inline rich-text editor. These Style Manager options are available:

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right
  • padding-top
  • padding-bottom
  • padding-left
  • padding-right
  • border-top-width
  • border-bottom-width
  • border-left-width
  • border-right-width
  • border-style
  • border-color
  • background-color
  • box-shadow

Back to Story Builder

Back to Page Builder