How to Use Shadow Effects in Conversion Focused Web Design

One of the things that makes Thrive Architect such a powerful visual editor is customizability. You can fine-tune almost every design detail of everything in your content. For example, you can add and customize drop shadows, inside shadows and text shadows to Thrive Architect elements.

In this video, we'll take a tour through the shadow effect features and we'll look at how to use shadows for conversion focused design.

More...

Here's a summary of what is covered in the video, along with time stamps:

The Basic Shadow Controls

Starts at 00:45

When you add an outside or inside shadow to an element in Thrive Architect, you see the following inputs:

All of the inputs are designed to be easy to control via click and drag and you'll see the results update live, as you make the changes.

The "Always Bet on Black" Rule

Starts at 01:18

A basic rule for designing shadow effects is to always use the color black (hex value: #000000) and adjust the opacity/transparency. This results in shadows that look good on any background.

Here's why this is important: on a white background, there's no visible difference between a light grey shadow with 100% opacity and a black shadow with, say, 20% opacity. However​​​​, the black shadow will still look as expected on any other background color, whereas the light grey one will look terrible on anything except white.

There are exceptions, as you'll see later in the video. But as a rule of thumb: whenever you want something to look like an actual (natural) shadow, use black and adjust the opacity.

The good thing is that Thrive Architect is built with this rule in mind: whenever you add a shadow, it is set to black, 40% opacity by default.

The "Subtlety Rules" Rule

Starts at 02:47

Another general rule for shadows: less is more. Big, dark shadows with a lot of contrast against their surroundings often look ugly and distracting.

It's similar to the principle we looked at in this tutorial about how to use gradients. Subtle shadows look good because they look more natural (in the real world, you rarely see something and think: "damn, look at that shadow!").

A subtle shadow looks natural and still serves to highlight an element, whereas a strong shadow looks unnatural and out of place.

Text Shadow vs. Box Shadow

Starts at 04:12

CSS (cascading style sheets) is the language web browsers use to display the visual styles you see when you browse the web.

In CSS there's a difference between a "box shadow" and "text shadow". When you apply a box shadow to text, it actually applies a shadow around the block containing the text.

To apply a shadow to the individual letters, use the "text shadow" options in the "advanced" tab in the text options in Thrive Architect.

At 4:50, you'll see a useful application of text shadow: increasing contrast and readability for text that is placed on a background image.

Using Shadows for Conversion Focused Design

Starts at 06:17

Since the focus in our products is always on conversions, what role do shadow effects play in this? There are a few ways in which you can use shadows for creating conversion optimized pages:

  • Shadows add an affordance to buttons. An affordance is basically an implied "you can click on this/interact with this" message.
  • Shadows change the visual hierarchy of elements. A drop shadow "lifts" an element above other elements, giving it a higher visual priority.
  • Shadows can draw the visitors eye to important parts of the page. You can see an example of this here: how to create an animated, custom call to action ribbon.

Non-Shadow Shadow Effects

Starts at 08:00

Shadows can also be used to create designs that don't look like actual shadows. For example, on a button like this:

The "3D" effect is created by adding a drop shadow that points straight down, with no blur and a dark green color. A similar effect can be accomplished by adding a bottom border, but in this case, the button already has a border. And while you can't have more than one border on an element, you can combine a border with a drop shadow.

It's good to keep in mind that a shadow with 0 blur and a solid color doesn't look like a shadow. Instead, it can be used to accomplish other design effects that may be difficult to do with borders or background boxes.

Over to You

Now you're armed with all the features and know-how to use shadow effects (without over-doing it or creating a multi-shadow monstrosity like I did in the video). Let me know if you have any further thoughts or questions about this!

Shane

Author: Shane Melaugh

Shane Melaugh is one of the co-founders of Thrive Themes and in charge of marketing, content and product strategy. When he isn't plotting new ways to create awesome WordPress themes & plugins, he likes to geek out about camera equipment and medieval swords. He also writes about startups and marketing here.

21Comments

Alexander L Reply

Thrive Architect and your tutorials are just amazing! Thank you so much!!

Randy M Reply

Just last night I used the drop shadow and borders and corners to create a page from an ebook. I was wowed how nice it turned out. If you want to take a look: https://chinamarriage101.com/china-certified/

    Shane Melaugh Reply

    That’s good to hear! Glad you got the effect you were hoping for. :)

Diego G Reply

Great tips. Really useful! Thanks again, Shane.

Quentin P Reply

Love these videos. And now I have another rule of thumb for shadows – it’s so simple when you know how! Thanks again.

Steven G Reply

This is Kool man, It adds huge to value to my membership … so Thanks

I would like to automate my work on the web site. Instead of styling every single button on my site many times again and again, I would like to create the button style once, save it and use it repeatedly. I want to assign the style to every button of this kind, let us say a CTA button, and later, when I change the style on ONE PLACE, I want ALL buttons to change instantly.

In other words, I want to create a CSS class, save it to a repository, assign the class to my buttons and have the option to alter the style of the class any later. There is a similar functionality in DIVI.

    Shane Melaugh Reply

    Hi Martin,

    You’ve just described one of the major reasons we created Thrive Architect. ;)

    We have features for all this in the works, but it will take a while before it’s all done and ready for release.

Bruce B Reply

Your tutorials with ‘pro’ advice are gold dust to the rest of us. More please.

Hello! Since the Thrive Architect begins I have so difficult to criate anything. The page download is so slowly. Is something that I can do to fix it? With de last version I didn’t have this big problem. I need help fast, please!

Thank you!

    Shane Melaugh Reply

    Hello Karine,

    We can’t help you through a conversation here in the comments, sorry. Please submit your issue in the support forum, where we have the people and the systems to help you out.

Thanks for the helpful tutorial. I liked the idea how to use multiple shadows.

tony4 Reply

Hey Shane,
Another great video – thank you! Your tips & instructions are fantastic.
Sorry to bring this up here, but I’ve been having a little problem – Pages created with one of the beautiful templates aren’t protected by my membership plugin, InstaMember. There’s probably a conflict. Is this a common issue with membership plugins? Thanks!

    Shane Melaugh Reply

    I don’t think that’s a common issue, no. I imagine it’s something specific to the membership plugin you are using. Have you submitted a support ticket about this already?

Awesome effects, simple straitforward and so well explained. Thx