How to Create an Employee Spotlight Presentation Using a Website Slider [Tutorial]

Let’s face it: About and Team pages and content aren’t always the most interesting to look at. But if your people are what make your business venture special, then your website design needs to reflect this.

In this tutorial, we’re going to show you how to use the Horoscope Slider template to create a unique and eye-catching employee spotlight presentation.

Table of Contents:

• Step 1: Delete any slides you don’t need
• Step 2: Customize background images
• Step 3: Edit the main text
• Step 4: Edit the label and symbol
• Step 5: Edit the gradient glow effect
• Step 6: Update the global layers
• Step 7: Add a bullets navigation

How to create a jaw-droppingly beautiful employee spotlight slider

If you’ve ever gone to a company’s Team page to learn more about their employees, it probably presented them in a gallery of images. This type of buttoned-up approach is fine for corporations, but you might want something flashier for other types of teams.

If that’s the case, the Horoscope Slider template is a great starting point.

In the tutorial below, we’re going to show you how to turn these horoscope slides into a cast/employee spotlight for our traveling circus.

If you’re using Slider Revolution for the first time, read through these quick-start guides before moving on:

• Modules Overview
• Module Editor Overview
• Templates Quick Summary

Step 1: Delete any slides you don’t need

With this being a horoscope slider, there are 12 slides built into the module. If you don’t have that many employees or stars to spotlight, it’s easy to delete the slides you don’t need.

In the top toolbar, hover over “Slides”. Then click the trash can icon that appears next to each of the slides you want to delete.

It doesn’t matter which slides you get rid of as they’re identically designed.

Pro tip: If you plan to do a lot of customization to this template, delete all the slides except one. Finalize your design. Then duplicate the slide to build out your slider. This way, you’ll only have to swap out images and text instead of repeating the custom stylization over and over.

Learn more:

• Adding, Deleting and Duplicating Slides

Step 2: Customize background images

To replace the dreamy AI-generated background image, go to “Slide Options” and “Background”. Then upload your replacement image to the Media Library.

Note: The background images are each 1920px by 1080px. So if you size your images close to these dimensions, you won’t have to worry about any parts of them getting cut off.

If you’d like to adjust the transition animation between slides, you can do so in this step as well.

Go to “Animation”. You can preview any of the presets by hovering over them. The transition effect will play out in the canvas on the left.

When you’ve found the one you like, select it to set it. You can also use the settings down below to customize it.

Learn more:

• Changing Template Background Colors and Images
• Setting Slide Transition Animations

Step 3: Edit the main text

There are three text layers on the left side of the screen:

• The is the stylized “The” in the headline.
• Headline is the remainder of the headline text.
• Description is the paragraph beneath it.

If you don’t want to keep any of these layers, select them in the canvas or timeline editor. Then hit the Backspace or delete key.

To change what each layer says, select it. Then go to “Layer Options” and “Content”. Write over the existing text in the box.

To change the font, color, spacing, and other characteristics of the text, go to the “Style” panel.

Save your changes when you’re done.

Learn more:

• Editing Text from Template Modules

Step 4: Edit the label and symbol

To the right of the headline and description is a group of layers called Zodiac-Group. Contained within it are Symbol, Date, and Zodiac Name.

You don’t have to use any of these layers if they’re of no use to you. That said, you can easily repurpose them if there’s other related data or labels you want to add.

For example, we don’t need the Date, so we’ve deleted it. However, we’re going to keep the Symbol and Zodiac Name to describe our performers’ acts.

To edit the text layers, use the same “Content” and “Style” editing tools you used in Step 3.

To edit the Symbol layer, select it in the canvas or timeline editor. This is a shape layer with a 60px by 80px PNG image embedded in it.

You can replace the icon with one of your own from the “Content” or “Style” panel. Click the Media button to upload your replacement.

If you need to make changes to the icon size, use the W and H settings under “Size & Pos” to do so.

Learn more:

• Adding and Configuring Shape Layers
• Size & Position

Step 5: Edit the gradient glow effect

When someone moves their cursor over the slider, a spotlight appears over the image. This effect is created using two layers:

• Radial Gradient Glow 1 is the spotlight.
• Overlay provides a dark radial gradient around the corners of the image.

You shouldn’t need to modify much in these two layers aside from their colors.

To do this, select the layer from the timeline editor at the bottom. Then go to “Content” or “Style” to customize the gradients in each.

Note: If you deleted all of the slides in the first step, now is the time to duplicate the slide design you’ve formalized. Do this by clicking the copy/duplicate icon next to the slide name.

Then swap out the custom images and text for each.

Learn more:

• The Tools of the Color Selection Dialogue

Step 6: Update the global layers

With the individual slides squared away, now we can turn our attention to the global layers. To access them, select Global Layers from under the “Slides” dropdown in the toolbar.

There are several components to modify.

Row-16 contains all the header and navigation elements.

If you’re embedding this employee spotlight presentation into your Home or About page and don’t need a custom-built header, select Row-16 in the timeline editor. Then hit Backspace or delete and it’ll remove all the layers within it.

The pop-out menu will also need to be deleted in this case. Locate Menu in the timeline and hit the crossed-out eye icon to unlock it. Now you can hit the Backspace or delete key.

Copy Row-16 contains the slide counter along with the Prev and Next buttons in the bottom part of the slider. If your slider contains more than six or seven slides, it would be beneficial to leave these elements in place so visitors can see how many there are to scroll through.

For smaller sliders, you might want to delete this section and add a custom navigation. That’s what we’re going to do. Delete Copy Row-16 in this step and then we’ll add new navigation controls in the next one.

This just leaves the Constellations-Group to modify. There are two pieces to it:

• Cluster is the slow-moving particle effect behind the zodiac name.
• Constellations is the rotating horoscope ring.

Let’s start by replacing Constellations with a rotating element of our own. Because this layer is an Icon/SVG, you’ll have to double-click on it in the canvas to edit it.

From the pop-up screen, select My SVG Library. Then click the blue Import SVG Files button at the bottom. Select the SVG file from your computer that you want to use. Once it’s added to your library, click the plus-sign to insert it into the page.

If the Constellations layer shrinks, go to “Size & Pos”. change the W and H values to 450px.

The last element to edit on this page is the Cluster.

You can modify this cluster of particle effects by clicking on “Layer Options” and “The Cluster”. To try out a different type of effect, click open the Cluster FX Library.

To modify the cluster effect, use the settings below. You can edit the color, shape, and size of the particles. You can also change the speed, direction, and even interactivity of the particles from this panel.

We’re going to leave the effect more or less intact. We are, however, going to give our particles a more colorful look under Particles > Design.

One more thing to do is to ensure that the particles fit well within your new ring shape. If they don’t, go to “Size & Pos” and adjust the W and H until they fit more snugly within it.

Save your changes when you’re finished.

Learn more:

• Special Layers: Rows, Groups, Backgrounds & Global
• Adding and Configuring Icon and SVG Layers
• The Cluster Quick Start
• Customizing Cluster FX

Step 7: Add a bullets navigation

If you removed the navigation controls in the previous step, new ones need to be added in this one.

To open up “Navigation Options”, exit out of Global Layers by selecting any other slide under the “Slides” dropdown.

Currently, there’s a Progress Bar indicator at the bottom of the screen. To add Bullets or another type of user-controlled navigation element, go to that panel and switch the toggle on to activate it.

You can select a preset style for the navigator and then customize it using the settings below.

Test out your new navigation under Preview. When you’re satisfied with how everything turned out, embed this section into the page it belongs on. You can either copy the shortcode from under “Module Options” or you can directly embed it using the Slider Revolution page builder block.

Learn more:

• Activate and Configure Bullet Navigation
• Module Title/Shortcode

Shine a spotlight on your employees in an original way

Long gone are the days where employee spotlights are relegated to boring static photo galleries. The Horoscope Slider template makes it super fast and easy to put an exciting and lively twist on this website component.