“More Content” CSS Arrow Is There a Real Name for This?
A design feature that is becoming more common is a full-screen background image, typically found on a site’s homepage. The image usually responds to the device’s screen size so that no matter what, the image covers the entire screen.
This can lead to some very engaging design and do a great job of setting the tone for a site. However, there are a couple of concerns that should be addressed when using this approach.
The obvious one is that a very large image will need to be used to cover instances of visitors who are viewing the site on large displays. There are a number of ways to approach this and here are just a couple of links that cover it:
But this article is about the second concern, user experience.
Let’s imagine that you have have a site for a product you’ve invented. You created a great homepage layout. There’s the aforementioned full-screen hero section with a background image that covers the entire viewport. Below that there are some brief explanations of what the site has to offer, each with icons you spent hours creating. Then there are some testimonials from some very happy customers. And of course a killer call-to-action that you know will convert!
“So what’s the problem?”
Most of the visitors never get past the hero section. They see it of course. But then they head straight to the navigation, trying to find the right menu item that will explain what is being offered. They might figure it out or they might get frustrated or confused and head back to their Google results for the next option.
“But I put all of the important info right there on the front page! Why wouldn’t they just scroll down and see what’s there?”
I know, I know. You’ve crafted a great page that summarizes everything. The only problem? Your visitors don’t think like you. They don’t spend their time keeping up with design trends which means they don’t know that there’s almost always content below that full-screen hero section.
“How do I let them know to scroll?”
You need to visually grab their attention. This is where the CSS arrow comes in. Sure, arrows are not a ground-breaking idea. They’ve been around forever. But that’s because they work and everyone knows what they mean; go this way.
In the example below you can see how the CSS arrow (or in this case more of a chevron) indicates that there is more to be seen. And before you get any ideas, please don’t have the arrow endlessly bounce up and down. That’s the equivalent of having somebody poke you repeatedly while you’re trying to read. It’s distracting.
The easiest way to include Font Awesome if you have a WordPress site is with the free Better Font Awesome plugin.
Once you’ve got the font loading properly you’ll need to position the icon. In the example above you can click on the HTML and CSS tabs to see what’s involved.
To keep the icon centered you’ll need to be sure to set margin-left to negative half of the icon’s width.
In the above example the icon has width: 40px; and margin-left: -20px;.
To center an icon of a different size, let’s say 60px, you’d need margin-left: -30px;.
One Last Thing
“That’s great and all, but how did you get the background image to cover the entire screen in the first place?”
Use the height: 100vh; property on the the Hero div. The vh stands for viewport height and by setting it to 100 it will cover the entire viewport, regardless of screen size.