Banner blindness is something we commonly associate with website elements like pop-ups or cookie consent notices. However, website visitors can also experience blindness when encountering other overused designs and elements.
To ensure that prospective clients can find your body of work and are eager to look through everything you’ve created, there are a couple things you can do. The first is to make your portfolio be the first thing they see when they enter your site. The second is to showcase your best work using a beautiful portfolio presentation style.
In this tutorial, we’ll demonstrate how to do this using the Architecture Header Slider template.
Table of Contents:
- Step 1: Install the header slider template
- Step 2: Add slides as needed
- Step 3: Replace the portfolio images
- Step 4: Edit the captions
- Step 5: Update the button text and design
A beautiful way to showcase your best work on the home page of your portfolio site
Go to the template we’re using and scroll down. You’ll see that it’s a single-page website template. So if you’re looking for a beautiful way to show off a small body of work, consider putting the entire Architecture Website Template package to use.
That said, if what you want to do is to showcase your best work front and center on the home page, then use the header slider:
This beautifully framed portfolio slider will make any type of creative work look incredible. It will also give you the chance to provide some details about the work as well as a link where prospective clients can learn more about it (like a case study page).
Below, we’ll show you how to convert this architecture portfolio slider into one for a wedding photographer:
Make sure you’re familiar with the Slider Revolution editor before you begin. These resources will help get you started:
Step 1: Install the header slider template
When you go into Slider Revolution to create a New Module from Template, do a search for “architecture” and this is what you’ll find:
That’s because each section of the Architecture Website Template has its own module.
For those of you who plan on using all of them, locate the one marked in yellow as a “Package” and install it. For those of you who only want to utilize the portfolio slider, install the one called Architecture Header Slider. It’s marked in purple as a “Module”.
Learn more:
Step 2: Add slides as needed
This slider comes with three slides. This is a good number to stick with if you have similar types of work to show off. For instance, if you’re a web designer who creates websites for a specific industry, then all you really need are three of your most impressive projects here.
That said, if you do a wide range of work and want this portfolio slider to demonstrate your versatility, you can add more slides.
Generally, you want there to be an odd number of slides and no more than five or seven. This will keep the slider loading fast while also giving prospective clients enough of a taste of what you can do.
To add more slides, go to “Slides” in the top toolbar. Hover any of the slides that are there and click the duplicate button to create a copy:
Do this to create as many slides as you need.
Learn more:
Step 3: Replace the portfolio images
There are just a few layers to edit in this slider template. Let’s start with the portfolio image.
Scroll down the list of layers in the timeline editor to locate Image-Shape. You can also click on the image in the canvas.
Then go to “Layer Options” and “Style”. Click on the Media button next to the BG Image thumbnail to upload your image:
When you’re done, save your changes. Then move onto the other slides to do the same thing.
Learn more:
Step 4: Edit the captions
Both the headline and description are contained within the Caption layer in this template. In order to maintain this text structure and styling, you’ll need to be careful when you make changes in the content editor.
First, select the Caption layer in the timeline or canvas. Then go to “Layer Options” and “Content”.
Here’s what the text from the first slide looks like:
<span style=”font-weight:500;font-size:1.3em;”>The “Great One”</span>
<span style=”opacity:1;”>A marriage of cozy living and spaceship level, futuristic architecture</span>
Leave everything between the angle brackets (<>) alone. Make your edits to the text areas that are bolded above.
Once the text is updated, focus on styling it. There might not be much you want to do aside from changing the font. Regardless, you can make these modifications from the “Style” tab:
Whatever changes you make in terms of style to the first slide should be applied the same way to all the other slides.
Learn more:
Step 5: Update the button text and design
The last thing we’re going to do is edit the Button layer. Locate it in the canvas or timeline.
We’re going to use various settings under “Layer Options” to customize its appearance:
- “Content” to edit what the button says
- “Style” to change the font and color
- “Hover” to customize how it looks when someone hovers over it
The other thing that needs to be done is to add a hyperlink to the button. Each button should take visitors to the specific project’s portfolio or case study page.
To add a link, go to “Actions”. Remove the existing action by clicking on the trash can icon next to it. Then select “Simple Link” from the options to the right, enter the URL, and exit out of the pop-up to save your changes.
Repeat this process for each slide.
Learn more:
Showcase your best work with this gorgeous slider design
The Architecture Header Slider template makes it fast and easy to create a beautiful slider presentation of your work. While we went light on customizations here, there are other ways to modify this template and make it your own. Play around with the background module color, use videos instead of photos, try out a different style of navigation, etc.
Regardless of how little or much you modify the template, you now have a beautiful way to showcase your best work for prospective clients who want to see what you can do.