FullThrottle Learning Studio

Revolution Slider (Setup, Appearance, Tips & Tricks)

Setting Up the Slider

Click on "Slider Revolution" in the admin. It will show a screen of all created sliders. Most likely there will be a slider called "Homepage Slider".
If you hover over it, you will see icons to edit. The "gear" icon will edit the general slider settings, while the pencil icon will allow you to edit slides.

Slider Settings

A lot of this should already be set up already, but here's a walk-through just in case.

  1. Content Source - should always be set to "Default Slider"
  2. Slider Title & Shortcode - This can be set to anything, but it's what the shortcode is dependent on to pull in the correct slider, so if it's already set up, then leave it.
  3. Select Slider Type - should be set to "Standard Slider"
  4. Slide Layout - should be set to "Full Width"
    1. The sizes underneath - the widths and heights should already be set since it's set to dimensions that work well with that particular theme
    2. The height can be played with if the client requests things brought up higher above the fold, or if they want more room for the slider
  5. & 6 can just be ignored

Slider Appearance (settings in the right column)

A lot of these are self-explanatory, but here are a few highlights of things that might need to be changed:

Navigation > Arrows - These are the left/right arrows that advance the slides. There are different looks if you wanted to change them (Arrows Style dropdown). You can choose if they show all the time or hide after a bit.
Navigation > Bullets - These are the bullets that show how many slides there are. There are different looks if you wanted to change them (Bullet Style dropdown). You can choose if they are centered, left aligned, or right aligned.
Navigation > Thumbnails - Here is where you can have thumbnails enabled (turn bullets off if this is the case). You can set the thumb size, how many are visible, etc.

The green Save icon in the top right is how to save these options.

Setting Up a Slide

Hit the pencil icon from either the Revolution Slider home screen, or the settings screen. It will take you into the Slide Editor where it will load the first slide.

Slide Specific Options

The first group of tabs are the slide's options itself. There are quite a lot of options, so I am only covering ones I use:

  1. Main Background - this is where you can set the background image/video for the slide.
    1. Under "Source" you can set an image by uploading it, or you can select a Youtube/Vimeo video (just need video ID). If you upload a video, I also recommend updating a still image to show while the video loads.
    2. Under "Source Settings" you can set the background size, position, and repetition if it's an image, or if it's a video, whether to loop, mute, or start it at a particular spot
  2. Thumbnail - this is where you can set the slide thumbnail if you have that enabled
  3. Slide Animation - should already be set to fade, but you can change this if desired. I would recommend keeping all transitions the same.
  4. Link & SEO - set "Enable Link" to Enable if you want the entire slide to click somewhere. It will then show parameters for you to enter the link.

Slide Layers

Scroll past the slide options and you will see another group of tabs that will allow you to add layers to your slide. There's an arrow next to the "Style" tab which I always click down because there are more options to show.
You can add images, text, or shapes as layers onto the background image. Please refer to the numbered screenshot and corresponding explanations below.

  1. Font controls - set the font, size, weight, color, spacing, etc here.
  2. Layer Alignment
    1. This anchors your layer vertically left, center, or right
    2. This anchors your layer horizontally left, center, or right
    3. Offsets your layer based on the anchor. So if you anchor something to the top right, the X number would control how far from the absolute right it will be, and the Y number how far from the absolute top.
    4. Set specific width/height if desired
  3. More Font Controls - set italics, underline, uppercase etc
  4. Background - should your layer have a background color
  5. Border - set border, border radius of your layer
  6. Transform - skew your layer

Other tabs I use (next to Style) explained

  1. Animation - you can animate your layer, but this is really involved. Use at your own risk.
  2. Visibility - you can toggle on/off your layer depending on breakpoint (4 to choose from)

-------------------------------------------

As you can see, the slide editor is laid out a lot like photoshop. The screenshot below explains some of the features.

  1. Add Layer Button - you can add a new layer to the slide (text, image, button, shape, etc).
  2. This icon lists out all your current layers so you can easily select or lock one (useful if there are some on top of each other)
  3. These are the 4 breakpoints. It adjusts your view so you can see what the slide will look like in that particular breakpoint. On smaller breakpoints, dotted lines appear so you know what will be inside of the safe area. You can move things and resize things per each breakpoint.
  4. This is the list of layers. The higher up on the list, the further behind the layer is (so layer "image 2" (which is the green texture image) is in the second spot on the list, and it sits behind all of the text that comes after it).

The green Save icon in the top right is how to save these options.

Tips & Tricks

Are some layers disappearing before others? Make sure all layers have the same timeline. Look at the above screenshot - all of the layer animations line up. If some layers disappear before others, most likely it's because the timelines don't match.

I would definitely recommend using the horizontal/vertical anchors for layers. This will help make your slide look good in between breakpoints (as it sizes down). Example, don't have everything anchored top left and then drag it to wherever you want it, like all the way to the right (guarantee you it will look really wonky as it sizes down). Anchor it to the closest quadrant (top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right) and then bump X/Y out accordingly.

Remember to check the 4 breakpoints to see how your slide looks. You can turn off less important layers per breakpoint if you need the space.

Stream Companies Get Advertising Services

LATEST IN THE BLOG

The Power of HTTPS and How to Harness It to Grow Your Business

In the aftermath of the many security breaches over the past few years, secure websites are more important than ever before. Now, with a new Google policy on secure sites, it’s essential for business owners to harness the power of HTTPS. It’s safe to say that businesses that use non-secure sites are no longer in […]

Read More VIEW ALL