Carousel Widget - The "General" Menu

The General menu is the primary menu for all widgets in the Landing Page Builder. Some features are common across all widgets, while many are unique to the respective widget. Presented below are the various menu features. For simplicity's sake, each Carousel Frame will contain one image widget.

Main sub-menu sections:

  • The first section of the menu are the Columns and Grid Gap controls, common across all container widgets. See Fig 1 below.

Fig 1

  • “Columns” allows you to change / set the number of columns for the Carousel grid.
  • “Grid Gap“allows you to reset set the gap between grid cells within the Carousel container.

Layers sub-menu

  • The default layer count is two, each layer being a separate group of content called a “Frame” the viewer will see in the browser. Clicking on a Frame will make that the active Frame, which is denoted with “(Active)“. See Fig 2 below.

Fig 2

  • You can add additional Frames by clicking the “Add new“ button. See Fig 3 below.

Fig 3

  • You can add an empty Frame, or one that has an image container with label, or one just with an image container.
  • A newly added Frame will have the name “New” by default.
  • Frames can be deleted by clicking on the red trashcan icon to the right of the respective Frame.
  • Frames can be re-ordered in terms of how they are displayed in the browser by left clicking on the stacked-three-line icon to the left of the Frame name and then dragging the Frame up or down.
  • If you wish to rename the Frame, click the name (it will now be designated as “Active”) and type in a new name in the “Name” field.
  • The duration of each Frame shown in the browser before moving to the next is controlled by the “Duration (Sec)” tool. Duration can be set for each individual Frame from 0 seconds to 900. Placing your cursor on the numeric value will bring up an up / down arrow which allows fine tuning of the duration. The slider to the right can be used for larger changes to duration.

    NOTE: The default behavior of the Frame carousel action is to go through each Frame once and then stop at the last image. The viewer, of course, can use the Left / Right arrows to cycle through the Frames as they choose. Turning on “Infinite Nav” option causes Frames to scroll through frames and then quickly reverses the cycle and goes back to Frame 1, then starts normal cycle through each Frame again. More on this feature below.

    HINT: Setting the duration to “0” for any Frame will cause the carousel rotation to stop on that Frame during viewing.

Layers Navigation sub-menu

The Layers Navigation sub-menu options work in concert with each other to allow you to create a control design for your browser-rendered Carousel section. By default, the Layers and Grow Buttons options will be off, and Controls will be checked on. Each function and how they work interactively with each other will be discussed below. As a starting point, we will only have the Layers enabled. See Fig 4 below.

Fig 4

  • With the Layers box checked (and Controls unchecked), the viewer will see one or more partially transparent Frame buttons appear vertically-centered (default) in each Frame. The Frame button for the active Frame will be more opague that than the rest of the buttons. See Fig 5 below. As you add or remove frames, the number of Frame buttons will be added or subtracted from the Carousel widget. The Viewer may click on any Frame button to view a specific Frame. Unchecking the Layers will remove the Frame button(s).
  • If Infinite Nav option under is off (Default setting - more on this Controls feature below), the carousel will scroll through the individual Frames once and stop at the last Frame. The Viewer may then click ant given Frame button to go back to that Frame. The carousel will then cycle through from that point again and stop at the last Frame.
  • If Infinite Nav is turned on, the carousel will continue to cycle through the Frame sequence repeatedly. The Viewer can again click any Frame button at any time to go to that Frame, upon which the carousel will continue the sequence cycling.
  • To create a static sequence of Frames (Where the carousel does NOT automatically cycle through the Frame sequence), you can set Duration (Sec) to ‘0’ for all Frames, and then allow the Viewer to select each Frame as the wish using the Frame / Control button
  • Adding a new Frame to the Carousel widget would create a new Frame button inserted to the right of the currently selected Frame’s button.

Fig 5

  • Checking the Controls box will add a default left and right arrow button to the Carousel. By default, these arrow buttons will appear centered vertically in the carousel box, and be located to the far left and right on the carousel container, respectively. These arrow buttons allow the viewer to scroll through the sequence of Frames one at a time. See Fig 6 below.

    NOTE: You may check both the Layers and Controls boxes to enable both button control features, select just one to be turned on, or select neither.

Fig 6

  • Checking the Grow Buttons checkbox adds a Btn Grow feature under the Layers sub-menu (see Fig 7 below) and will allow you to grow each indivdual Frame button by a certain ratio of the available horizontal space. Fig 8 below shows the carousel container in Fig 6 above, but with the “Grow Buttons” checkbox checked and the Frame 1 Btn Grow value set to "1" and Frame 2 value set to "2". This means the Frame 2 button will take up twice as much available horizontal space as the Frame 1 button.

Fig 7

Fig 8

When either the Layers or Controls checkboxes are checked, you will have access to three additional features: Position, Justify Items and Btn Content.

  • The Position feature will allow you to vertically position and orient the Layers Frame buttons and/or the Controls buttons as a group. By default, the value is set to "Center", but you can click inside this field and select one of several button placement options. See Figs 9 and 10 below.

Fig 9

Fig 10

  • The Justify Items feature will allow you to alter the horizontal space between the Layers Frame buttons and/or the Controls buttons as a group. By default, the value is set to "Space Between", but you can click inside this field and select one of several button spacing options. See Figs 11 and 12 below.

Fig 11

Fig 12

  • The Btn Content feature will allow you to show just text as the label for your Layers Frame and Controls buttons as a group (the default value), to show just an image rather than a text label, or to show both text and images as the label.
  • The "Text Only" value (the default) allows you to set the button label as a text string (including numbers and certain characters, such as the greater and less-than characters. See Fig 13 below (To better illustrate the differences between the feature's three values, the buttons have been positioned outside and at the bottom of the Carousel widget, and have been spaced closer together).

Fig 13

  • The "Image Only" value (the default) allows you to set the button label as an image. Selecting this value will also add the Btn Image feature to the Layers sub-menu. To add an image to Frame button, click the "Set" button to the far right and select the image you wish to use. "Set" will now change to "Change". Adding an image to a Control button will be discussed in the next section. See Figs 14 and 15 below.

Fig 14

Fig 15

  • The "Image and Text" value allows you to set the button label as both an image and text. Selecting this value will also add two new features to the Layers sub-menu: Btn Layout and Btn Expand. See Figs 16 and 17 below.

Fig 16

Fig 17

  • The Btn Layout feature will allow you to select various orientations of the text and the image as the label for your Layers Frame and Controls buttons as a group. See fig 18 below.

Fig 18

  • The Btn Expand feature allows you to select whether the buttons are always in "expanded" mode (the default value) or whether they will initially be shown smaller until a viewer hovers over any button or hovers over any part of the menu area. See fig 19 below.

Fig 19

Navigation Controls sub-menu

The Navigation Controls sub-menu appears whenever the Controls checkbox is checked in the Layers Navigation sub-menu. See Fig 20 below.

Fig 20

  • Checking the Infinite Nav checkbox will cause the carousel to continously cycle through the sequence of Frames. Once the a sequence is complete, the carousel will rapidly revert back to the first Frame and start cycling through the Frames sequence again. This assumes ALL Frames have some value greater than "0" for Duration (Sec).
  • The Prev Label and Next Label input fields allow you to enter a different set of characters other than the default single left and right arrows as a text label for the navigation controls.
  • If the Btn Content feature is set to "Image" or "Image and Text", you will also see the Prev Btn Image and Next Btn Image features, with a "Set" box that will allow you to choose an image for the respective left and right navigation controls.

Transition sub-menu

The Transition sub-menu allows you to set the type, function and duration of the stransitions between Frames. See Fig 21 below.

Fig 21