My Favorite Website Design Feature (Often Overlooked)

Hey guys!

This is Zion from GetKnownStrategy.com and today I'm talking about a design feature for your website, that at first doesn't seem like that big of a deal, but can really make your website look a lot more professional. Plus, it's really easy to do. And if you're using Kajabi, this is going to be super easy for you to do.

Guys, if you're interested in this kind of stuff, please hit the like or subscribe button, follow us on YouTube, follow us are on our blog or our website and let us give you tons of information. It's free!

All right. Without further ado, let me show you one of my favorite cool little features.

*** Full Transcription Below ***

This is box shadow. 

Now notice that this text looks as if it's in a box that's sort of floating on top of the page. Believe it or not, it's actually the exact same color as the background. It's both white in the box and outside of the box. It's this shadow feature, which is actually some type of gradient that's created around the text, that makes it look like it's almost a different color of white.

Now you might be thinking what a simple little thing, but I'm telling you, this is one of the most powerful things you can create on your webpage to make things look professional. And Kajabi just made it really, really easy to implement this.

And I want to show you some of the new features. If you go to getknownstrategy.com, and I'll refresh the page here, you're going to notice some of the new features that we've implemented. And these are new features in pages that included animation. So did you notice that the words kind of appeared on the page? These pictures float in. This text right here, floats in. But the background as I scroll doesn't move. You used to not be able to do this. This is all new features. It really makes your website look very alive and organic. And it makes, it almost seemed like it's being created as you're on it browsing. It's really, really slick.

But this block down here is what I'm most proud of. And I know that sounds a little funny, but it's because this used to be really hard. I used to have to create blocks like this in Photoshop, or in a photo editing software, and then implement it and put it into the site. And now you don't have to do that.

So let me show you how to do it in Kajabi. If you don't use Kajabi, I'm sorry you're not, because you're probably having to work twice as hard, but you can probably do it in your software as well. Let me show you.

So I'm now I'm logged into Kajabi to modify and edit my website. I'm going to select the block. This is just a text block. It's nothing more than that. And at the very bottom, there are some options. In fact, I'll close this right here. You can see there is typography background, desktop layout, mobile layout, animations, time reveal. So I'm not going to go into all of this, but we're going to focus on this one here called background.

This is where you put a different color background in if you wanted to. So if we wanted green or something like that, we could do that, but we're going to keep it transparent so it's going to match whatever's behind it. And the page background currently is white. Now this is what we're going to do and we're going to actually change this box shadow. This feature used to not be there, but we're going to change that to medium. But I'll show you what it looks like as none. So this is just the, the text on the page. Pretty boring isn't it? But now when we create small, they're small, medium and large. Now what that is, is how strong that shadow is. So if you want that shadow to really come off the page very strongly, put it to large and it'll make the shadow, that gradient shadow effect, even darker if you want it. Very just, you know, minimalistic. You can do it as light. My preference is medium. I think that looks really good right there. It doesn't stick out too much. And then there's another feature here that says border radius. This is the curvature of the corners in this box, so I can turn that up and it really rounds out those corners. In fact, if we do it all the way to 50 it looks quite curvy. I like it somewhere around 10, something like that. So it gives a little bit of curve, but not too much. And you don't have a whole lot of options with that. But there's enough options there that I think it's very adequate.

And literally guys, that is it. That's it.

The only other thing I want to mention is that when you first do this, your text may run into the borders really quickly. You're going to probably have to go into desktop layout and change the internal spacing. So the internal spacing is the space between the words and the border of this text block. The outside spacing is from the outside of the text block to any other elements you may have on that same row. So I'm not going to touch the outside, but I'm going to just move the inside spacing. If we went ahead and zeroed out all the spacing, I want to show you what that looks like. It makes this text shadow look a little bit crowded and it doesn't look nearly as good. So I like to have quite a bit of space on the sides, and I just kind of eyeball it. I thought 50 looked pretty good, and then 20 on the top and bottom. That seemed to kind of make it seem pretty even. Maybe a little more on the bottom, maybe 30 at the bottom, something like that. I think that looks pretty good. But that's the only other element to this that I think you need to know about. And that's again, on the inside spacing.

That's it for this week. Please share this video with your web designer, with whoever you think could benefit from this to enhance their website.

I'll talk to you next week.

xxx - Zion