How to Create a Dark Website Design with a Surprising Color Reveal [Tutorial]

Are you looking for a way to shine a spotlight on the team behind your creative or tech company? In this tutorial, we’ll show you how to add a colorful carousel component to a dark website.

Dark mode is a popular feature on smartphone devices as well as in productivity apps. Some studies suggest that darker interfaces are easier on our eyes than white ones when we sit for long stretches staring at screens.

That said, dark web design doesn’t just have to be a utilitarian feature on mobile devices or inside of apps. Websites can use dark designs, too. In all fairness, though, a dark website design won’t work for just anyone. It works best for brands that are cutting-edge (think tech companies) and creative (like freelancers, agencies, artists, and so on).

In this tutorial, we’re going to show you how to take a dark mode website template like Tattoo Event Website and edit it to create dark-themed sections for your website.

Table of Contents:

How to add a surprising color reveal to a dark website design

The template we’re using in this tutorial can be used to create an entire home page or single-page website. That said, once you learn how to repurpose one section of this template, it’ll be easy to do the rest.

So, this tutorial is going to focus on the “Artists” carousel in the template:

There are many advantages to creating a dark website design. One of our favorite reasons is because, when brighter colors do eventually appear, they really pop and are impossible to ignore. With this carousel’s hover-triggered color reveal, you’ll be able to add the element of surprise to your design as well.

We’ll be creating a team carousel for a company called Femmes de WordPress in the following tutorial:

Before you start, make sure you’ve reviewed the Slider Revolution editor basics:

Step 1: Install the Tattoo Event Artists module

There are two ways to install this template. Start by going to “New Module from Template”. Then, do a search for “tattoo”:

If you’re planning on creating a full home page or one-page website with it, you should install the Tattoo Event Website Template Package (the yellow one in the screenshot).

If all you want to do is start with a dark-themed section for your artists or team, install the Tattoo Event Artists Module (it’s in purple).

Hover over the one you’re going to use, click the plus-sign icon, and then either “Install Template Package” for the package or “Install Template” for the carousel template:

When it’s done installing, open it up in Slider Revolution.

Learn more:

Step 2: Update the global layers

Global layers in Slider Revolution are the ones that stay where they are even as dynamic elements change around them. In this template, everything above the carousel is a global layer.

To edit this area of the template, go to “Slides” in the toolbar and open up your “Global Layers”:

To edit each of the components in the slider, locate them in the timeline editor at the bottom. We’ll start with the Headline row:

The headline should be a short descriptor for your team or the artists you’re showcasing in the carousel. Click on the Headline layer. Then, change the wording under “Layer Options” and “Content”. You can also change the font, weight, and size here, too.

We’d recommend leaving the colors alone since the desired effect is one that mimics dark mode.

Note: What you see on this screen is not a direct reflection of what the end result will be. So, don’t stress if it looks like the text is cut off or the arrows are not aligned. After you implement changes, however, it’s a good idea to preview them on the front end to make sure they look exactly as you want them to (since you can’t confirm it in the canvas for this template).

The other layer to edit in your “Global Layers” is the Caption. You’ll find this one under the Navigation row:

The caption is the line beneath the headline that provides a short summary of who these people are and what the visitor gains by learning more about them. Keep it short, though it doesn’t have to be as short as the caption in the template. A sentence-length line would be fine here as well.

Pro tip: If you want to add emphasis to a word in your description in Slider Revolution, frame the word with <b> and </b> to make it stand out slightly from the rest.

Before you move on, make sure to open the preview of your site (using the blue “Preview” button in the bottom-right corner):

You’ll want to check how your new wording looks on all devices. You may need to resize your fonts or scale back the amount of text if it overlaps with the carousel images on tablet or mobile.

Learn more:

Step 3: Delete all of the slides but one

There are five slides in this carousel. You’ll save a lot of time by hashing out your design choices on one slide and then duplicating it to create the others. So, that’s what we’re going to do in this step.

Go to “Slides” in the toolbar and delete four of the five slides by clicking on the trash can icon beside them:

Remove the slides for artists 2 through 5.

Learn more:

Step 4: Upload a new headshot

Go to the remaining slide. The Image1 layer is the headshot of your team member or contributor.

To edit it, click on the layer in the timeline, open “Layer Options”, and go to “Style”. Replace the “BG Image” by clicking on the “Media” button and upload your new photo to WordPress:

As you can see, Slider Revolution will take care of applying a black-and-white filter to the uploaded image. When a user hovers over it, the image is programmed to remove the filter and reveal the full-color photo. So you don’t have to worry about creating this effect yourself.

Pro tip: Check to make sure the image fits the way you want it to. If you size your headshots as 800px x 1200px, no adjustments should be needed. However, if you didn’t get them at that size or orientation, you can use the “Source Type” and “Position” tools beneath the media upload area to fix it.

Learn more:

Step 5: Edit the text layers in the slide

There are two text layers in the slide:

  • Full Name (of the person)
  • Studio Name

Now, Studio Name makes sense when advertising an event as this template does. However, we’re using this section to introduce visitors and clients to our team. So, Studio Name will be changed to Role:

Feel free to customize these text layers’ names and purposes based on what you decide to create with this dark-themed template.

Next, edit the text layers just as you did the global layers. You can use some of the same fonts, too, so there’s consistency between the header text and the carousel labels:

Note: One other thing we did here was to lighten the grey color of the Role layer and to increase the size to 16px. The template uses a dark color and smaller font, which is fine for extraneous information. However, we really want all of our team’s info to stand out sharply against the dark overlay.

These text layers may be a little tricky to edit since you can’t see them in the canvas. The only way to see how your font pairing and styles turn out is to preview them and to hover over the image:

If you’re happy with how your new image and text layers have turned out, then it’s time to move onto the final step.

Learn more:

With your first slide configured, all you have to worry about now is adding in the missing slides and customizing the images and text in each.

To preserve the settings from the first slide, use the duplicate feature to create your other slides. Go to “Slides” in the toolbar and click on the duplicate icon:

Repeat this until you’ve created as many slides as you need for your carousel. Then, go through them one-by-one to replace the headshots and matching text layers:

One last thing to do before you save and publish the carousel to your site is to rename your slides and update their thumbnails.

Go to “Slide Options”. Click on the name of the slide in the toolbar (next to the blue cloud icon) and type in the name of the person represented on the slide. Then, go to “Thumbnail” and replace the existing image with the headshot:

When you’re creating something like a team or artist carousel, it’s especially important to keep everything organized. While every company hopes their team members or contributors will stay for as long as possible, that doesn’t always happen. So, when it comes time to update the team on the website, your well-labeled carousel will make it easy.

Learn more:

Give cutting-edge brands the boundary-pushing dark mode designs they deserve

In this tutorial, we’ve seen an exciting new way to shine a spotlight on the talent behind a brand. By using a combination of a dark website design and an interactive color reveal, visitors won’t be able to ignore the creatives and thinkers who provide their services or create their products.

With the help of Tattoo Event Website Template, you can create a cutting-edge dark mode-like design — not just to show off a team, but for the entire website. What’s more, you’ll be able to create your design in a fraction of the time with a fraction of the effort, too.

How to Create a Dark Website Design with a Surprising Color Reveal [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 kezz@stage.rvsldr.com.

Liked this Post?
Please Share it!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.