How to Create a Scroll-Triggered About Me Section for the Home Page [Tutorial]

Give prospective clients a teaser of your about me page with this scrolling reveal section. It’ll take you less than an hour to create using Slider Revolution’s template.

There are certain things that prospective clients want to know before they hire a service provider. They want to know what’s included in their services, how much it’s going to cost, and who’s doing the work.

A professional website will always have a dedicated About page to tackle this last question. However, you can start teasing out details about yourself (or your client if you’re building the site for them) starting on the home page.

Your about me section on the home page doesn’t need to contain a lot of information. What it does need to do, though, is immediately stop visitors in their tracks and take notice.

In this tutorial, we’re going to show you how to use the Brutal Website Template to create an about me section that teases out more and more about you with every scroll.

Table of Contents:

How to create a fun about me section teaser for your home page

You’ll notice that when you open the link to the Brutal Website Template that it takes you to a one-page website template. In order to find the section we’re editing today, you either have to click the “Highlight” link in the hamburger menu or scroll down to it:

Today, we’re going to focus on customizing just this one module and turning it into an about me section for web designers, hair stylists, interior designers, and other service-based providers. Like this one:

If this is your first time using Slider Revolution, check these out before you begin the tutorial:

Step 1: Install the Brutal Highlight module

In order to access the specific module we’re editing in this tutorial, go to “New Module from Template” in Slider Revolution. Do a search for “brutal website template”:

Click on the folder icon to reveal the thumbnails for the individual modules that make up the complete website design. Hover over the one called Brutal Highlight and click on the plus-sign:

You’ll be given the option to install only the template or the template package and addons. If you’re planning on using the full template to create a one-page website for your website, install the package. Otherwise, just install the single template.

Learn more:

Step 2: Edit the overlay color

With the module template installed, you can start customizing it. Start with the Overlay layer. This is the solid grey color that covers the majority of the module. You won’t be able to see it when you first enter the editor, however, because it’s hidden from view.

Hover over the Overlay layer in the timeline editor and click the crossed-out eyeball icon to make it appear:

To update the color of the overlay, go to “Layer Options” and “Style”. Click on the color swatch next to BG Color. You can select a preset color on the right or add a custom color in the field:

When you’re done, click on the eyeball icon in the timeline editor to hide it again. We’ll need it out of the way so we can easily edit the remainder of the layers.

Learn more:

Step 3: Upload your headshot

Image-1 is the photo that slides down from the top of the screen as the user scrolls down the page. Since this is going to become our about me teaser section, we’re going to replace the existing graphic with the headshot of our web developer.

To do this, click on Image-1 from the timeline. Go to “Layer Options” and “Content” to upload a new photo to the Media Library:

Pro tip: The existing image is 667px x 1000px. If you size yours to those dimensions before uploading, you won’t have to worry about resizing or repositioning it after it’s uploaded to WordPress. It also won’t intrude on the surrounding elements.

Learn more:

Step 4: Swap out the video background

The smoke video graphic can only be seen when the scrolling text and colorful circle pass over it.

To replace it with your own video file, select Video from the timeline editor. Then, go to “Layer Options” and “Content” to upload your MP4 file. You can also import it from YouTube or Vimeo if you prefer:

After it’s uploaded, go to Preview to make sure the video looks good and is bright enough to poke through the lettering and shape that pass over it. If not, you may need to find a different video to use.

If the video file is covering everything else in the Slider Revolution canvas, scroll down to the “Media Poster” section and click Remove Poster:

This will keep the canvas clear so you can see what you’re doing.

By the way, this effect of the video appearing behind your other layers was created using a setting under “Adv Style” called Blend Mode and screen.

Learn more:

Step 5: Update the scrolling text

The first layer of text to edit is called Large-Text. Since this section is all about “me”, we’re going to put the developer’s name there.

To edit the text, click on the Large-Text layer in the timeline. Go to “Layer Options” and “Content” to enter your replacement text in the field. And go to “Style” to change the font, weight, and color:

When you’re done, preview the changes on the frontend. Make sure the text doesn’t get cut off at the end of the scrolling action. If it does, you may need to use a shorter headline — between 10 and 20 characters. Choosing a more condensed font will also help.

Learn more:

Step 6: Add a short bio

The process for updating the description in the center of the page with a short bio is the same as editing the large headline.

Locate Text-2 in the timeline editor. Then, use “Content” and “Style” settings to update what the text layer says and how it looks.

One thing to note is that this section of text has a Text Stroke effect applied, which you can find under “Adv Style”:

This adds an outline around the characters of the font. Some fonts don’t look good with a stroke as you can see the lines within the characters. So you may have to play around with fonts to find one you like the look of.

Step 7: Add a CTA button

We’re going to add a new element to this module since we want our about me teaser to link to the full About page. To add a button, go to the toolbar at the top, hover over “Add Layer”, and click on “Button”.

Slider Revolution will add a plain button to the canvas. On the right you’ll find some pre-designed button styles you can use as well. You’ll be able to customize your button regardless. Using one of the preset styles just creates less work for you.

To edit your button, use “Layer Options”:

  • Edit the button text under “Content”.
  • Edit the button’s font, text color, background color, and border under “Style”.
  • Edit the button’s shadow color and styling under “Adv Style”.
  • Edit the hover state (i.e. the color and transition effect) under “Hover”.

Pro tip: If you decide to use a color gradient for your button, save it as a preset so it’s easier to apply the same gradient (or even the exact reverse of the gradient) for its hover state.

To reposition the button, you can drag-and-drop the button in the canvas. Then use “Size & Pos” to refine its positioning:

Finally, to create a scrolling animation so that the button flows in the same way that the bio text does, go to “Animation”.

Note: You’re going to apply the same exact animation settings from Text-2 to your new button layer. While the screenshots below will show you that the text layer is selected, it’s the button layer you want to be editing when you make these changes.

Here’s what you’ll do:

Click on IN/Anim From. Go to Advanced, select the Layer tab, then change the Opacity setting to “1” and the starting Y position setting to “bottom”:

Click on IN/Anim To. Go to Basics and change the following:

  • Duration: 3000
  • Start: 2000
  • Easing: power3.inOut

Hover over IN/Anim To and click the plus-sign to create a new Keyframe. Configure the following under Basics:

  • Duration: 2000
  • Start: 6000
  • Easing: power3.inOut

Click on OUT/Anim To. Go to Basics and update the following:

  • Duration: 300
  • Start: 9000
  • Easing: power3.inOut

When you’re done, preview your work on the frontend to make sure the button seamlessly slides into the frame beneath the bio. Switch between the different device views, too, to ensure that the button looks good on all devices.

You can make changes from the responsive editor in Slider Revolution if you need to make edits. Just select the device from the dropdown list and then apply the edits to the settings below. They’ll only impact the selected device:

When you’re finished, save your changes.

Learn more:

Step 8: Edit the circle color

The last element to edit in this module is the Circle shape layer that moves behind the scrolling text. All we’re going to do is edit the color.

To do this, click on Circle in the timeline editor. Go to “Layer Options” and “Style”. Under “Background” you can modify the BG Color:

When it’s done, save your changes. Your new about me section is ready to add to the home page.

Make your bio section stand out with surprising effects

What’s nice about using the Brutal Website Template is that you can use it to quickly build a one-page website or you can just use pieces from it. Either way, you have a ton of neat effects already built out for you. All you need to do is put a custom spin on the content, colors, and copy.

How to Create a Scroll-Triggered About Me Section for the Home Page [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 *