The Position, Appearance, Spinner and Navigation option drawers for Rev Slider.
We are going to continue detailing the various options for Rev Slider.
Today, we will specifically discuss the “Position,” “Appearance,” “Spinner,” and “Navigation,” slider options.
Previously, we talked about the Main Slider Settings Section and the General Settings and Google Font Settings, so check those posts if you are curious about those sections of the Rev Slider options.
The position settings in Revolution Slider essentially allow you to edit the portion of its CSS (Cascading Style Sheet) that controls how it is positioned on the page. You can choose to align the slider to the left, middle, or right on a page, and are given the option to provide margins for the top, bottom, left and right sides of the slider as well. For more information on CSS and margins, check out this tutorial.
The “Appearance,” section in Rev Slider Options
Appearance covers several features of Revolution Slider that you may find you wish to get rid of or at least alter at first glance.
Shadow Type – As a default, Rev Slider provides a drop shadow beneath its slider. You can change its type here (there are three different options), or you can remove it entirely (“No Shadow”).
Show Timer Line – As a default, Rev Slider will run a line across the length of a slide to illustrate how much time is left before it transitions to a new slide. You can control if this appears on the top or bottom of the slider, or remove it completely.
Padding – Allows you to add padding to the slider itself. Be careful not to set it too high or you may end up with a very strange slider – for example, in the image below, I have set the padding to 50 pixels:
A strange slider. Credit belongs to Mozilla.org for the adorable Firefox image.
Background Image Options are, as mentioned in on the options screen, best used with transparent slides. If you use slides that are not transparent, you may not see any background colors or image changes, depending on what settings you select.
Background Color – Allows you to input a hexadecimal value for a background color. If you click on the field, it will offer you a color picker so that you do not have to research the hexadecimal value for which color you want.
Dotted Overlay Size – Allows you to provide a texture to your slide. You may wish to experiment with these – see the example below. You can these on imaged slides.
A slide overlaid with a texture.
Background Image URL – Allows you to provide a URL that links to the image you would like to provide as a background image.
Show Background Image – Allows you to select whether or not you want to show a background image. This must be selected in order to work with the subsequent options in this section.
Background Fit – Allows you to choose from the options of “cover,” “contain,” and “normal,” for your background.
Background Repeat – Allows you to determine whether or not your background repeats.
Background Position – Allows you to select the position of the background.
Choose Spinner – You have the option of selecting from six (numbers 0 – 5) different spinners.
Spinner Color – Options 1 – 4 provide a “Spinner Color” option. Like the “background color” option in the previous section, you are provided with a field for a hexadecimal value, and a color picker when you click on the field.
Navigation offers a long list of options. The good news is, three of its subsections are essentially the same topic, each for different elements (Positions), so we will condense them down to one listing here in a subsequent paragraph. First though, let’s discuss the initial subsection of Navigation, which is a bit different from the next three.
Stop on Hover – allows the user to stop a slide when they hovers over it.
Keyboard Navigation – allows a user to use the left and right arrow keys on their keyboard to control the slider for an experience where they have more control.
Navigation Type – allows the selection of a specific style of navigation within the slider. Your options are Bullet, Thumb (short for Thumbnail), or None.
Navigation Arrows – Allows you to provide navigation arrows in the slider. Your options are Solo, With Bullets, or None.
Navigation Style – Allows you to determine the style of the navigation. Your options are Round, Navbar, Old Round, Old Square and Old Navbar.
Always Show Navigation – Choose whether or not you always display navigation in the slider.
Hide Navigation After – Allows you to hide the navigation after a certain number of milliseconds. If you selected “Yes,” in the “Always Show Navigation” menu, you won’t be able to edit this field.
Position Sections – These sections list the same options for each element of the slider they focus on; they cover the positions of the following elements: Bullets/Thumbnail, Left Arrow, Right Arrow. Here is a listing of the specific options they have:
Horizontal Align – Allows you determine where you horizontally align the element. Your choices are Left, Center and Right.
Vertical Align – Allows you to determine where you vertically align the element. Your choices are Top, Center and Bottom.
Horizontal Offset – Allows you to offset the element horizontally, in pixels.
Vertical Offset – Allows you to offset the element vertically, in pixels.