Image
Stacks add-on

Orbit

Banners, client testimonials, photography, video embeds and so much more! No matter your use, Orbit provides you with a huge array of settings and controls to help with perfecting your site's slideshows.

This page outlines the settings included in the Orbit stack and talks about what they do, and how they affect the stack's functionality. In addition we have a tutorial and walk-thru video below that helps get you started using the stack, as well as gives you an idea what the stack can do. For examples of the stack in action, please visit the product page.


What does this do?

Below we look at what each of the settings within the stack does. This is good reference in case you get stuck when building pages, as well as to get an idea of what controls exist in the stack before you purchase it.

Image

General

SLIDER TYPE
Here we can choose which type of slider is best for our goals. Orbit 2 offers thee different types: Slide, Fade and Loop. Each have their own uses, and some settings within the stack are geared toward specific slider types. Fade, being the most basic of the three types, does not interact with some of the slide style settings. We've attempted to note these within the stacks settings to help you out.

AUTO PLAY SLIDESHOW
When enabled the slider will auto advance through your slides. This setting also ties in with the Timing and Pause on Hover settings.

PAUSE ON HOVER
When Auto Play is enabled this feature temporarily pauses the slider while the visitor's mouse cursor is hovered over the slideshow.

TIMING
These settings allow us to dial in two different options. We can adjust the pause duration for our Auto Play feature as well as the transition speed of the slides as the advance from one slide to the next. The Pause duration is only used when Auto Play is enabled, while the Transition duration is used at all times. These values are measured in milliseconds. The larger the value the longer the pause and the slower the transition.

EASING
This setting allows us to customize the way our transition animation takes place. We can adjust the way the slides ease in, ease out or both. This may seem like a minor tweak, and most user may leave the setting on Standard, but adjusting the easing type can give you a different look and feel for your sliders. One of our favorites aside from the Standard default setting is the Ease Out Back.

SLIDES PER PAGE
We're able to create a lot of different slider styles using the various settings within Orbit. One way we can change both the look and functionality of our slider is through adjusting the Slider Per Page. This setting allows us to choose how many slides will be shown within the slider at once. To make Orbit even more versatile and useful we've made it so that you can adjust this value for all three responsive breakpoints, letting you show a different number of slides at each of the breakpoints.

SLIDES TO MOVE
In addition to showing multiple slides at a time, we can also adjust how the slider reacts when the next arrow, or auto play feature, advances our slideshow. This setting allows us to choose the number of slides that will advance when these things occur. Much like the Slide Per Page setting, we can adjust the number of slides that will move, and do so separately at each responsive breakpoint.

FOCUS CENTER
When enabled the active slide will be focused as close to the center of the slider as possible. This will depend of course on your number of slides per page, among other settings. This feature does not work with the Fade Slider Type as only one image is shown at a time for the Fade slider.

TRIM SPACE
Allows you to eliminate extra empty slides when using something like the Slider Type Slide. This is a setting that most will not need, but is there in the event that you might have a use for it.

STARTING SLIDE
Choose which slide you wish to have the slideshow begin on. Most times you'll simply start your slider on slide number one. There are times when starting on the second slide, or any other slide in your slideshow may be useful though. Using this setting you can select which slide to begin on.

SLIDE GUTTER
Here we can adjust the spacing between our slides. We've not only made this possible, but also built-in support for adjusting the gutters separately for each of the three responsive breakpoints to make styling you slider even better.

Image

Slide Styling

EXTRA STYLING AT
These toggles enable additional features for styling our slides. These will allow us to apply these extra stylings on a per-breakpoint basis, giving us a large amount of control over the look of our slider. When not in use we have control over the uniform border radius for our slides at each breakpoint. When we enable the Extra Stylings though we get a vast amount of granular control over the styling of the slides. We'll take a look at all of these controls below. We'll only cover the settings once, but know that each setting can be applied separately at each responsive breakpoint.

BORDER (Mobile, Tablet & Desktop)
Set the width of the border for your slides.

BORDER & BACKGROUND COLORS (Mobile, Tablet & Desktop)
Orbit allows you to select the color for your slides' background and borders. You're able to choose a separate color for both the normal and active slides.

RADIUS (Mobile, Tablet & Desktop)
Adjust the corner roundness here. This setting is available for each breakpoint whether the Extra Styling button(s) have been toggled on or not.

PADDING (Mobile, Tablet & Desktop)
Apply padding to your slides. This padding will be applied to the slides themselves and not the Slider as a whole. We have a separate control for that later on in the settings palette. These slide padding settings can be adjusted on each side of the slide individually and the padding appears between the border and the contents of the slide itself.

FADE OUT NON-ACTIVE SLIDES
Allows you to set an opacity level for all slides, aside from the active slide. This allows you to fade our the appearance of the non active slide(s). This pairs well with the Sneak Peek settings in Orbit.

NON-ACTIVE FILTERS
In addition to applying a translucent look to non-active slides with the "Fade out non-active slides feature" you can also apply various CSS filters to those same non-active slides. You can apply the following effects: blur, grayscale, sepia and saturation.

Image

Padding

MOBILE, TABLET & DESKTOP
This setting allows you to adjust the padding to the slider itself. This allows for styling the slider to make the arrows appear outside of the slider, or the pagination dots below it. This gives you great versatility in styling your slideshows. This different from the padding setting in the Slide Styling section in that this padding is applied to the Slider itself, while the Slide Styling padding setting is applied to the individual slides themselves.

Please note that the padding feature for the slider works with the Slide and Loop Slider Types but is not used with the Fade Slider Type because of the way the slideshow is constructed.

Image

Sneak Peek

MOBILE, TABLET & DESKTOP
Allows you to adjust the left- and right-hand side of the slider so that a portion of the previous and next slides can be seen peeking out from the edges of the slideshow. This feature is applied to the Slide and Loop Slider Types.

Image

Height / Height Ratio

HEIGHT TYPE
Orbit has three height modes you can apply to your slider:

"None"
This type means simply that the slider's height is equal to the tallest slide in your slideshow. This is the most standard way a slider works. In this case you the developer create your content to be the height you wish it to be. This may mean scaling and cropping your images, video thumbnails, etc before adding them to RapidWeaver. This will be the most used and useful of the Height Types, thus why it is the default setting.

"Fixed Heights"
Here you assign a fixed height for your slider at each of the three responsive breakpoints. Any content you have in your slider will b e cropped off if it exceeds this height. Orbits offers various units for the measurement of these fixed heights.

"Height Ratios"
This setting allows you to apply a width to height ratio for your slider. You're able to apply different ratios for each of the three breakpoints. Again, content larger than this height will be cropped.

COVER MODE
When Cover Mode is enabled the image for your slide or video thumbnail will be scaled up and / or cropped to cover the entirety of the background of the slide. This helps fill in empty space that may be created by mis-matched ratios or heights. This is a more advanced feature and is not likely to often be needed. Videos themselves and Content slides are not affected by Cover Mode.

Image

Arrows

INCLUDE NAVIGATIONAL ARROWS
This setting allows you to decide if you wish to display the Next and Previous arrows with your slider. This is on by default as it is visitor friendly.

ARROW TYPE
Allows you to custom the look of the arrows by selecting an arrow style that best matches your page and site.

ARROW COLORS
Used to adjust the background and icon colors for the arrows, when enabled.

SIZE (Mobile, Tablet & Deskto)
Choose which size arrows you'd like to have displayed at the three responsive breakpoints. You can choose from small, medium, larger and extra large.

BACKGROUND STYLE
Orbit gives you the option to adjust what the arrow background looks like. You can give them a circular, square or rounded square appearance.

SHADOW
When enabled you are able to include a drop shadow on the arrow controls to help them stand out from the slide images or content.

Image

Pagination Dots

SHOW DOTS AT...
Here we can choose which breakpoints we wish to show the Orbit slider's navigation dots. You can opt for enabling them at all breakpoint, none, or some mix that you like.

PAGINATION DOTS COLOR
These color pickers allow us to alter the color of the Pagination Dots to match the look and feel of our site design. We can adjust the normal, active and hover colors for these navigational dots.

DOT SIZES
Orbit allows you granular control over a lot of features, and the Paginations Dots continue that trend. We can adjust the uniform size of the dots, which are circular in shape. If we click the + button above each breakpoint's settings we can then adjust the width and height separately, even setting a different width for our active item.

Image

Video Play Button

BUTTON NORMAL & HOVER
Here we can adjust the colors for the normal and hover states on our video embed play back buttons.

SHADOW
Enabling this feature adds a nice drop down shadow to the play button to set it apart from the videos embed slide's thumbnail image.

Image

Progress Bar

INCLUDE PROGRESS BAR
When using the Auto Play features of Orbit you can include a progress bar that is linked to your slider. This shows the amount of time left for the pause duration for each slide. The Progress Bar feature is off by default.

LOCATION
You can choose to display the Progress Bar either at the top of bottom of your slider. It defaults to the bottom of the slider.

COLOR
Allows you to use a color picker to adjust the Progress Bars color to match your page, and site design.

HEIGHT
Adjusts the size of your progress bar.

Image

Edit Mode

COLLAPSE SLIDES IN EDIT MODE
Use this feature to hide the individual slides for your Orbit stack in Edit Mode. This is helpful when working on your site to help reduce clutter within your work environment.


Image

Child Stacks

Orbit has three types of slides, also known as child stacks. Below we'll look at the settings contained in each of these child stacks.

Image

IMAGE
This is the drop zone, also known as the image well, where you'll place your slide image. You're encouraged to size and crop your images in your image editing software as well as use compression software such as Squash or TinyJPG to compress your images.

Remote Image

IMAGE
This link control allows you to link to a remote image on your server via a URL. When using remote images you'll be responsible for managing the images on your server via your FTP software.

Alloy Droplet

DROPLET TAG
This field allows you to insert a Droplet tag from Alloy's online Editor. Doing so will allow you to edit your image directly from your Editor on your site.

Note: This feature requires you to be using Alloy as your blog and content system on your site.

Video

THUMBNAIL
This is the drop zone, where you'll place your image for your video's thumbnail. This will be shown in the slider and when clicked upon will load and play the video embed. You're encouraged to size and crop your images in your image editing software as well as use compression software such as Squash or TinyJPG to compress your images.

EMBED TYPE
You can opt to use either a YouTube or Vimeo embed for your video slides. After choosing which you'd like to use you'll be presented with an ID field for that particular service.

Content

There are not additional settings for this slide type.

On this page