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 others may not. 

Main sections:

  • The first sections of the menu are the Columns and Grid Gap controls, which are common across all container widgets. For the Carousel widget, the initial column count and gap value will be equal to the section it is placed into (Fig 1).

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 

  • The default layer count is 2. Each layer is 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) (Fig 2). 

Fig 2

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

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 that each Frame is shown in the browser before moving to the next is controlled by the “Duration (Sec)” tool. The duration for each individual Frame can range from 0 to 900 second. 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 one by one and then stop at the last image. The viewer can use the Left / Right arrows to cycle through the Frames manually as they choose. Turning on the “Infinite Nav” option causes the Carousel to scroll through all Frames (assuming "Duration" is greater than "0"), and then quickly reverses the cycle and starts back at Frame 1.

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

Layers Navigation 

The Layers Navigation options work in concert with each other to allow you to create a control design for your Carousel section. By default, the Layers and Grow Buttons options will be off, and Controls will be on. As a starting point, we will only have Layers enabled (Fig 4). 

Fig 4

  • With the Layers box checked, the viewer will see one or more partially transparent Frame buttons appear vertically-centered (the default position) in each Frame. The Frame button for the active Frame will be more opaque that than the rest of the buttons (Fig 5). 


Fig 5



  • As you add or remove Frames, the number of Frame buttons will be added or subtracted accordingly from the Carousel widget. The Viewer may click on any Frame button to view a specific Frame. Unchecking Layers will remove the Frame button(s).
  • If the Infinite Nav option under Navigation Controls is NOT checked (default setting), the carousel will scroll through the individual Frames once and stop at the last Frame. The viewer may then click any 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 checked, 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 they wish using the Frame / Navigation Control buttons
  • Adding a new Frame to the Carousel widget will create a new Frame button inserted to the right of the currently selected Frame’s button.
  • Checking the Controls box will add a left and right arrow button to the Carousel (Fig 6). 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.

    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 7) .

Fig 7

  • Check “Grow Buttons”, and set the Frame 1 Btn Grow vto "1" and Frame 2 to "2". This makes the Frame 2 button take up twice as much available horizontal space as the Frame 1 button (Fig 8).

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 with the default as "Center" (Fig 9). 

Fig 9

  • Click inside this field to select several different button placement options (Fig 10). 

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 (Fig 11). 

Fig 11

Fig 12

  • Click inside this field and select one of several button spacing options (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). 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).

Fig 13

  • The "Image Only" value 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 (Fig 14). To add an image to the Frame button, click the "Set" button to the far right and select the image you wish to use. This will be rename the button to "Change". 

Fig 14

  • 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 (Fig 15). 

Fig 15

  • 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 (Fig 16). 

Fig 16

  • 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 (Fig 17). 

Fig 17

Navigation Controls 

The Navigation Controls appear whenever the Controls checkbox is checked in Layers Navigation (Fig 18). 

Fig 18

  • 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 behavior assumes ALL Frames have Duration (Sec) values greater than "0".
  • 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 

The Transition menu allows you to set the type, function and duration of the transitions between Frames (Fig 19). 

Fig 19

  • The Type feature allows you to select from various types of transition methods. The default is "Scroll horizontal", but there are seven methods to choose from (Fig 20). 

Fig 20

  • The Ease feature allows you to select from various types of transition timing methods (Fig 21). The default is "Ease", but there are four methods to choose from. 

Fig 21

  • The Duration (Ms) feature allows you to set the length of time each Frame transition takes, form "0" to "5000" milliseconds.