There are lots of people creating content for websites these days — bloggers, journalists, marketers, business owners, etc. When you build a website with a heavy editorial component like a news site or blog, how do you ensure that visitors take notice of the latest and greatest content?
While the content creator’s headlines and summaries may help capture the attention of some visitors, the way it’s designed will help as well.
One of the best ways to put a spotlight on your best, latest, or most popular content is to display it in a featured post slider. The only problem is that when you use a basic WordPress content slider, it’s probably going to end up looking like what everyone else uses.
Slider Revolution offers a creative solution to making your written content pop. In return, your featured posts will:
- More easily capture visitors’ attention.
- Entice them to read your posts instead of just scan the headlines.
- Engage with the content in terms of likes, comments, shares, affiliate link clicks, and more.
In the following tutorial, we’ll show you how to adapt Slider Revolution’s Nature Slider template and turn your website visitors into avid readers.
Table of Contents
- Step 1: Create a personalized theme
- Step 2: Edit the Shape layer in each slide
- Step 3: Edit the background images in each slide
- Step 4: Edit the text layers in each slide
- Step 5: Customize the navigation (optional)
This tutorial will show you how to start with this Nature Slider template:
And turn it into this:
If this is your first time modifying a Slider Revolution template, take a few minutes to read through these guides to get yourself set up:
When you’re ready, move onto the first step:
When you look at this Slider Revolution template, what do you see?
It reminds you of the National Geographic logo and magazine, doesn’t it?
The template isn’t an identical recreation of National Geographic and yet visitors’ minds will likely draw that parallel between the two brands.
As for how you make this design your own, there are some things to think about:
1 – Your branding.
Are there geometric elements from it — like the logo or components in your site design — that you could swap out in the template to make it your own? To save you time, choose elements that can easily take the place of existing ones in the template.
2 – Motion effects.
In the first slide in the template, an animation is used to make the fish look like it’s floating. In the second slide, there’s a particle effect laid over it. And in the third, there’s a sped up background video. What kind of animation or special effects would you like to use, if any?
3 – Posts to highlight.
The Rule of Threes is a good one to stick with here, so now all you need to do is come up with the three pieces of content to showcase in your slider. Will they be the most recent, most popular, or something else? And what kinds of images do you want to pair with your headlines?
For the purposes of this template, we’re going to pretend like we’re helping Home Depot launch a blog for its website.
We’ll be using its brand orange (#ff6720), squared design components, and home renovation theme to customize this template.
Let’s start with the one element that stays the same from slide to slide: The colorful square layer in the center.
Make sure the first slide is selected from the Slides master control in the top toolbar. Then, click on the yellow “Shape” layer (it’s called “Box” in the timeline at the bottom). “Layer Options” will open on the right.
Go to “Style” to edit the border color, size, and shape:
To create our Home Depot box, we did the following:
- Set border color to #ff6720.
- Shrunk the border size all around to 15px.
- Experimented with a rounded border edge, but then reverted back to sharp corners.
Pro tip: Since you’ll be using the same border color on every slide, save it as a preset in your color modal. That way, you won’t have to retrieve the HEX code every time.
You can also use these settings to change the background/fill color of the shape as well as its spacing. To change the size or position of the block, go to “Size & Pos” under “Layer Options”. You can also add a box shadow under “Adv Style”, if you’d like.
Next up is the layer animation.
As it stands now, the color first appears in the top-left corner before filling out the rest of the shape. This is a custom animation. To keep it as is, don’t do anything.
If you want to experiment with another animation, open “Animation” settings. Look under “Keyframes” and click on the IN > Anim To. Then, open the dropdown next to “IN”. Hover over the animation types to see them in action on the left:
When you’ve found one that you like and that makes sense for your brand, click on it and save your changes. We want ours to look like a window pane being moved into place, so we’ll be using Rotate In From Bottom v2.
Before you move onto the next step, apply these changes to all of your slides.
When selecting background images or videos for your featured post slider, be mindful of how busy they are. Also, avoid using ones with any text. Images with a lot of stuff going on can make it hard for visitors to read the text.
Pro tip: If you find during this exercise that the graphics you planned to use don’t contrast well with the white font or the color of the box, consider placing a filter on top of your image or overlay on top of your video. You may also need to experiment with a different font color.
To change out the background imagery in your slides, right-click on the existing background and select Edit > Media Library. You can also open “Slide Options” on the right, go to “Background”, and set your “Source”:
Once you’ve uploaded your graphic, scroll down to “Image Settings”. You can change the way the image fits to the screen or how it’s positioned from here.
Next, go to “Thumbnail” and update the thumbnail image to reflect the new one:
This will make managing your slides from the toolbar easier. While you’re at it, edit the slide’s name, too. In the screenshot above, it’s where the word “Nature” is next to the blue icon.
One other thing to do while you’re here is to customize the background motion effects if you want it to differ from the template.
Pro tip: There are three types of motion effects used in this template. While they make sense for the different types of imagery, you may want to pick just one and use it consistently throughout to establish a cohesive brand style for your featured post slider.
To change the animation, there are different “Slide Options” settings to customize depending on which slide it is:
- 1st Slide: Animation and Distortion
- 2nd Slide: Animation and Particle Eff.
- 3rd Slide: Animation
Play around with the different transition and motion effects to figure out which one best fits your theme.
Just keep in mind that your shape layer is also animated. You don’t want everything moving so much that your visitors feel uneasy, so find a good balance between your shape layer and background imagery animations.
Pro tip: Don’t be afraid to preview the slider as you work. Click the blue “Preview” button in the bottom-right corner to help you make better judgment calls about things like animation, placement, and so on.
Once you’ve settled on your motion effects (if any), save your changes and update the remaining slides.
This module template has four text layers in each slide. To edit them one at a time, click on the layer in the visual editor or use the timeline.
Go to “Layer Options” and “Content” to edit the content. Type over the existing text to add your own:
Next, you’ll need to customize the way your text looks in terms of fonts, styles, sizes, colors, and any other settings you may want to adjust.
Just as you drew from your branding to pick a color for your shape, do the same with your fonts. If you’ve yet to do that, here are some good rules to follow:
- Use no more than two or three fonts.
- Make the most important areas of the text bigger.
- The smallest size should be at least 16 pixels.
Don’t forget about color contrast. Now is the time to update your font or text background colors if the contrast with the background image or video is poor.
You’ll find all the settings under “Layer Options”:
- Use “Style” to update the font, color, and spacing.
- Use “Size & Pos” to adjust the position and sizing.
- Use “Adv Style” to add text shadows or strokes.
For our design, we’ve updated the font to reflect those of Home Depot’s brand: Helvetica Neue for the primary font and Bitter for the secondary. We also added a 50% transparent black background to help the smaller text stick out.
When you’re done customizing your content layers, save your changes. Then move onto your other slides, edit the text, and customize the styles with the same settings as the first one.
The last thing to do to your featured post slider is to customize the navigation. If you like how it works in Slider Revolution’s template, then there’s nothing to do here.
If you want to explore your options, go to “Navigation Options” on the right:
The template uses two types of navigation — Arrows and Bullets. They’re both subtle enough and out of the way of the main design that they don’t draw too much attention away. We’ve more or less kept ours the same.
However, if you’ve completely changed the style of the content slider, you may want to do so with the navigation elements, too.
The goal of a featured post slider isn’t just to get visitors to scan the headlines of the day. You want the design and content teaser to be so enticing that they have to see what’s inside.
With the help of Slider Revolution and the Nature Slider template, you can painlessly create a slider of your own that does this!