How to Create a Customized Transition Effect for Your Hero Section [Tutorial]

Wish you had more control over the way your hero images slide into place? In this tutorial, we’ll show you how to create a customized transition effect with Slider Revolution.

Whether it’s a single hero image loading into place or a slider moving from slide to slide, the transitions you choose should fit with the rest of your website’s style.

For instance, you might want to use a liquid transition effect for your water sports equipment store instead of the usual slide, bounce, or fade effects used on other sites. Slider Revolution provides the tools to create specialized transition effects just like these — and easily, too.

In this tutorial, we’ll demonstrate how to use the Photographer & Videographer Slider template to create a customized transition effect that matches the content and style of your website. (Note: It’s called “Photo Slider” in Slider Revolution.)

Table of Contents:

How to create a hero section with a customized transition effect

For some brands and content types, a subtle transition effect is all you really need when designing the hero section of the home page. For others, however, it could be beneficial to use a customized transition effect to make a strong statement and first impression.

For creative brands and professionals like photographers and videographers, for instance, these dramatic transition effects work really well:

In the following tutorial, we’re going to show you how to make a bold transition effect work for ecommerce:

New to Slider Revolution? Give these a read before you move on:

Step 1: Delete the social media global layers

If you take a look at the template (or preview it from Slider Revolution), you’ll see that there’s a row of social media icons in the top-right corner of the slider. If you’d like to leave them where they are — for the purposes of sharing your social media accounts or providing direct share links — all you need to do in this step is edit them so they’re reflective of your accounts.

If you want to remove the social media component and let the main focus of the slider be on your imagery and messaging, you can remove them. To do so, open up the Global Layers from under “Slides” in the toolbar:

In the timeline, you’ll find social media layers along with a layer called Shape-10. To delete the social media component, hold down the Ctrl or command key and select the following layers:

  • Facebook
  • Copy Facebook x 3

Then hit Backspace or delete to remove them from your design.

Note: Shape-10 is a semi-transparent dark gradient that sits at the bottom of the slider. This ensures that the call-to-action button and navigation elements are easy to see against even the brightest of background images or videos.

Learn more:

Step 2: Choose one slide style to use

What we’re going to do in this step is delete all of the slides but one. This will enable us to make our stylistic edits to one slide. Building out the slider will then require less work as we won’t need to do things like change the font, edit the colors, and so on.

Before you go deleting anything, review each of the slides and decide which one you want to use as your base.

The slides in this template more or less have the same composition. There’s a background image or video. Then there’s a headline, author line, and call-to-action button.

However, there are a couple of slides with extra features:

  • Slide #1 has a Circle layer that gives the illusion of a spotlight shining through the greyscale.
  • Slide #4 has a Bubble layer that places an animated BubbleMorph around the wording.

If you want to use either of these special features in your hero section, then make sure the slide you keep has the feature built into it.

For our ecommerce slider, we’re using Slide #5 to make our edits. To delete the slides you’re not going to use, go up to “Slides” in the toolbar. Hover over each slide and click the trash can icon next to it:

You’ll be left with one slide when you’re done.

Learn more:

Step 3: Edit the background image or video

When choosing the background content for your hero section, you can use images, videos, or a combination of the two. So long as you tell a visually cohesive story, that’s all that matters.

To replace the existing background image or video in your slide, go to “Slide Options” and “Background”. Make sure to select the right source type before you upload your new file to the Media Library:

Before you move onto the next step, go to “Thumbnail”. Because our navigation bar at the bottom shows a thumbnail of each slide, this needs to be updated.

The quickest way to do this is to click the Reset button next to Admin Thumb and Navig. Thumb:

If you’re using background videos, you may need to generate a custom thumbnail if you don’t like the one that’s automatically generated from your file. Then upload it by clicking Select.

Learn more:

Step 4: Apply a custom transition effect

To create a customized transition effect that appears between each slide, keep “Slide Options” open and go to “Animation”.

Slider Revolution has tons of transition presets to choose from. They’re categorized by:

  • Base
  • Columns
  • Rows
  • Boxes
  • Random
  • Custom

Within each category, you’ll find various transitions available (except for Custom where you’ll create and save your own).

When you hover each preset, you’ll see a preview of the effect in the canvas on the left. Spend some time getting acquainted with the various effects to find one that aligns well with the theme of your website and brand.

Pro tip: Slider Revolution has an Advanced Transitions AddOn available. This will give you the power to add transitions like burn effects, watery flows, disc rotations, and more. To enable these effects, go to “Module Options” and “AddOns”:

Do a search for “transitions” and activate the addon. You’ll see a new Advanced category of transition presets you can use:

We’ll be using the Motion Blurred Horizontal to create a fast-paced transition in between our ebike product images.

If you want to customize your transition effect, select it from the list, then scroll down to the “Advanced” bar. You’ll be able to program the time, filters, settings, and more from there.

Learn more:

Step 5: Update the text and CTA

There are four layers to edit in this step:

  • Title: The main headline text that’s styled using a solid font
  • Title-2: The main headline text that’s styled using an outline font
  • Author: The photographer/videographer byline below the headline
  • Button: The “View More” call-to-action button

To edit what these text layers say, select them one at a time in the timeline editor. Then go to “Layer Options” and “Content” to add your own text:

Pro tip: For the best results, try to add about as much text as is currently in the template slide. That way, you’ll minimize how much editing you have to do.

To edit the font used or the style of the font (like the weight, color, spacing, etc.), you can do so using “Style” settings.

For Title-2, you’ll have to make adjustments to the Text Stroke settings under “Adv Style”  in order to edit the color.

The Button is a little different from the text layers as there are different ways to edit the colors under “Style” settings:

  • Text color is edited under Text Color.
  • Button background color is edited under BG Color.
  • Button border color is edited under Border Color.

If you want the button to change how it looks when someone hovers over it, you can go to “Hover” settings to configure different colors, sizing, and more.

Save your changes when you’re done.

Learn more:

Step 6: Build out the rest of the slider

Preview your work and make sure no other tweaks are necessary. If your slide design is finalized, you can now duplicate it and build out the rest of your hero section.

To do this, hover over “Slides” in the toolbar. Click the duplicate icon next to your slide for as many new slides as you want to create:

Note: You don’t need to create five slides for your slider. That’s just what the template has in it. Add as many as you need to get your point across.

Since your styles are already set, all you need to do is update the following in each slide:

  • Background image or video
  • Thumbnail image
  • Slide text
  • Slide button text (and link)

When you finish editing each slide, save your changes before moving onto the next.

Step 7: Customize the navigation

Under “Navigation Options” you’ll find that there are three navigation types activated:

Progress is the transparent circle that fills up as the time elapses on the current slide:

Arrows is the left and right arrow that sits in the bottom-right corner of the slider:

Tabs is the thumbnail slider that sits in the bottom-left corner:

This navigational setup is good for a portfolio slider. However, the one we’ve created is for an ecommerce company, so our primary purpose is to sell our products — and so we want the slider controls to be more prominent for our shoppers.

If you decide to deactivate any of these settings, just click the ON toggle to OFF. You can then edit the remaining ones as needed:

We ended up deactivating the Progress and Thumbs navigation, moved the arrows to the left and right side of the screen, and then added a hybrid Bullets/Thumbs to the bottom.

Note: Certain styles of Thumbs and Bullets won’t just show the thumbnail of the slide. They’ll also show the name of the slide. If you want to use that style, make sure to update the name of each of your slides.

To do this, go back to your slides. Make sure “Slide Options” is selected. You can then edit the name of the slide in the toolbar:

For a portfolio slider, you might give the slide the name of the client or project. For an ecommerce slider, on the other hand, it could be an abbreviated name of the product.

Learn more:

Create a more immersive multimedia slider with custom transition effects

The more you can do to create a cohesive brand image and style on your website, the more memorable it will be for your visitors. And it all starts with the hero section.

Feel free to use the Photographer and Videographer Slider template as inspiration — there are five unique transition effect styles on display here. Or use it to quickly build out a multimedia slider with customized transition effects for your business.

How to Create a Customized Transition Effect for Your Hero Section [Tutorial]

FREE: Your Go-To Guide For Creating
Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

The Author

Kezz Bracey

Learn everything you can. Teach everything you know.

For further information or clarification on any topic discussed in this blog's posts, feel free to leave a comment on the post or contact me at [email protected].

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *