There are so many ways to use video content on websites. You can put it center stage in order to directly communicate a message or explain a complex concept to visitors. But video doesn’t always need to be in the foreground to be effective. It can also sit in the background, helping to create positive vibes around your brand.
In this tutorial, we’re going to do the latter. We will use a combination of slightly blurred background videos and a colorful frame to capture our visitors’ attention. Then we’ll wow them with high-impact messaging.
To follow along and create your own captivating background video slider, jump into Slider Revolution and load up the WordPress Video Slider template.
Table of Contents:
- Step 1: Delete all slides but one
- Step 2: Upload and customize the background
- Step 3: Remove the pop-up video
- Step 4: Edit the text
- Step 5: Update the button
- Step 6: Customize the frame color
- Step 7: Duplicate the slide and build out the slider
- Step 8: Delete the global layers
- Step 9: Create custom navigation settings
The world could use some more light and laughter in it. If your brand is one that’s on a mission to bring positivity to the lives of their users, then this background video slider could be a great addition to your home page:
Each slide demonstrates different types of niches you might want to showcase:
In this tutorial, we’re going to show you how to repurpose this video slider for a community dance studio:
If you’re a first-time user of Slider Revolution, read through these before you begin the tutorial:
Customizing a full slider template like this one doesn’t need to take a ton of time. To shorten the amount of editing you’ll need to do, delete all of the slides in this template except one.
This way, you’ll only have to create the look of your slides once. Filling in the content later in this process will go much more smoothly and quickly as a result.
To start deleting slides, go to the top toolbar and hover over “Slides”. When you scroll over each slide name, a list of icons appears to the right. Click the trash can icon to delete:
It doesn’t really matter which slides you delete. However, if there’s a frame color you like and want to use, then make that be the slide you keep.
To replace the background video, go to “Slide Options” and “Background”. Click on the Media Library button to upload the new MP4 file:
Next, go to “Animation”.
Right now, the slide is set up with a Fluid Effect called Color Flow. Spend some time looking through the other transition effects. Hover over the names and you’ll see the effect play out in the canvas:
When you find one you like, click on it and save your changes.
Because there’s going to be a lot of erratic motion in our dancing videos, we’ve changed ours to the Dreamy Melt Effect. The smoothness of the transition contrasts the dancing movements well.
The background video template is more than just a slider. It also enables users to click a “Play” button that triggers a pop-up to appear. They can then watch the video without a blurry overlay.
This is a useful slider feature if your video content tells a story or provides more context around what your brand does. However, if you’re using video to create a general vibe, the pop-up isn’t necessary.
We want to use our slider to quickly get people excited about dance and then provide them with a call-to-action where they can learn more about classes and sign up. Because of this, we’ll be stripping out the pop-up video elements.
To delete slide layers, locate them in the timeline editor at the bottom. There are three layers we need to remove:
- Play Detector Area
Before we can do this, we have to make the Video-Popup-Group visible. Hover over it in the canvas and click the eyeball icon:
This will make the layers under this group visible and editable.
Next, hold down the Ctrl or command key and then select the three layers to delete. Then hit Backspace or delete to remove them.
Note: By deleting the Video-Popup-Group, it will automatically delete all of the layers attached to it.
There are four text layers that need editing in this slide:
- Top Text is the text that appears in the top part of the frame. This would be a good place to put your company’s name if you don’t include a logo in the slider (see Step 8).
- Big Headline is the one-word headline in the center of the slide. Use this for the name of whatever you’re promoting in the slide.
- Tagline provides extra context for the slide in a quick, memorable way.
- Description is the longer snippet of text at the bottom. This is useful if you have more details to offer. If you’re using the button to direct people to another page, this text layer will be useful in convincing them why they should do so.
You don’t need to use all of these layers if you don’t have a lot of information to add to your slides. Just delete the layers you won’t need.
To update text layers in Slider Revolution, select them in the canvas or timeline editor. Then go to “Layer Options” to make your edits:
Update what the text says under “Content”. Change the font, color, and styles under “Style”. Make advanced customizations under “Adv Style”.
With regards to the color of the Tagline, it should match the slide’s frame and button design. When you update the text color in this step, make note of which color you used so you can quickly apply it in later steps.
Better yet, save it as a preset for easier retrieval:
When you’re finished, save your changes.
If you look at the canvas, you’ll see a faded button next to the Description layer. In the slider template, this button only appears on smaller devices. Desktop and notebook users, on the other hand, have the hover-triggered “Play” button to execute the same action.
We don’t want a pop-up video player to appear though. What we want is to use this button to send visitors to pages for the different dance programs available. So there are a number of changes we need to make.
First, select the Play Button layer from the timeline editor. Go to “Layer Options” and “Visibility”:
Click the toggle switches next to the desktop and notebook icons and you’ll see the button brighten in the canvas. Now you can customize what it says, how it looks, and what it does.
Note: Because the button wasn’t originally meant to appear in the desktop or notebook views, you might need to make modifications to the button size/design on these larger screens. Use the responsive switcher at the top of the editor to make modifications to each device variant.
Use “Content” to update the button text.
Use “Style” to change the font, colors, size, and more.
In addition, you’ll need to use “Hover” to customize what the button looks like when someone hovers over it.
Note: You’ll notice in our finished slider design that the button appears beneath the description. You can achieve this same effect by dragging and dropping the Play Button outside of the Column-3 group of layers. Then manually move it to where you want it to appear within the canvas, using the “Size & Pos” controls to finesse its final position on the page.
The last thing to do is to customize what your button does. Go to “Actions” and click on “Simple Link” on the right:
Add your custom URL so that the button will direct users to a new landing page.
The last component to customize in the slide is the colorful frame. This has been created with four shape layers:
- Left Frame
- Right Frame
- Top Frame
- Bottom Frame
To change the color of these layers, select them one at a time. Then go to “Layer Options” and “Style”. Select the same preset color you used for the Tagline and Play Button background for your frames:
You can also change the size of the frame. For instance, we want to make them slightly thinner so there’s more room for our video content to show through.
To modify the frame, go to “Size & Pos”. Then edit the H value for the top and bottom frames and the W value for the left and right frames:
Note: Be mindful of what this does to the alignment of the text and logo layers that sit in the top layer. You may need to adjust their positioning so that they sit in the center of the frame. Use “Size & Pos” to adjust these layers.
Preview your work and make sure you’re happy with the end result. If everything is all good, you can proceed with duplicating the slide you’ve created.
Go to “Slides” in the toolbar and click the copy/duplicate button next to your slide:
Do this for as many slides as you want to create. You can now go in and update the video background, slide color, and also customize what the text says. You won’t need to do anything with styles, sizing, or positioning as that’s already been taken care of in your first slide.
Next, we’re going to turn our attention to the global layers. These are the ones that sit on top of the slider. So even as the slide content changes, the global layers stay put at all times.
To edit the global layers, go to the “Slides” dropdown in the toolbar and select “Global Layers”. This will reveal various layers:
There are the Logo and Social Icons that sit along the top frame. These would be useful to keep if you’re creating a microsite. Otherwise, you can delete them if your website header already contains these elements.
The remaining global layers make up the slider’s custom navigation — the circle that shows users where their cursor is and that reveals arrows when they scroll over the left and right navigational areas. In the next step, we’re going to create navigational cues using Slider Revolution’s built-in tools. So we don’t need any of these layers.
To delete the global layers, hold down your Ctrl or command key, select the layers you want to delete, and then hit Backspace or delete.
The last thing we need to do to finalize this background video slider is to set up our navigation. Bullets are already activated under “Navigation Options”:
Because of the colors we used in our frames, we need to darken the colors of our bullets so they show up more clearly.
This can be done under the “Navigation Style” section. You can also adjust the size of the bullets here:
We’ve given the bullet style a more prominent look in terms of size and color so that visitors will instantly be able to spot where the navigational controls are in this slider. While we could add arrows to the left and right edges, it would take away too much from the beautiful frame design. The bullets do a nice job of balancing out the name of our dance center at the top, so they’ll suffice.
When you’re finished customizing and activating any other navigation types from this panel, save your changes. You’re now ready to publish this slider to your website.
Videos make for great instructional tools on websites. They can also be useful for setting the mood — especially if your photos and illustrations aren’t effectively conveying the energy and movement you want people to associate with your brand.
This background video slider template makes it both fast and easy to create this fun and lively content block for any website.