Many small businesses update their heroes* this time of year to promote sales and celebrate the season. You can hire a professional designer to update your hero in Wix (contact us for a quote!), or you might try doing it yourself.
If you've ever updated a hero image, you may have noticed that many pictures do not look good when stretched across a screen. They may look pixelated, have poor contrast with words, or zoom in on exactly the wrong part of the image. Frustrating!
Here are three easy strategies for an eye-catching hero that emphasizes your point without overwhelming your message. No specialized graphic design software needed!
Strategy 1: Try a split screen layout against an eye-catching color
Wix strips enable you to have two or more columns. Many designed sections and strips use this feature. The content is easier to read and looks more professional after putting the text in one column and the image (in this case, a photo) in the other.
Strips also translate well into mobile view. On narrower phone screens the image will show either above or below the text rather than next to it.
Strategy 2: Use the crop and extend feature in the Wix Editor.
You've probably found that it's better to use images that are wider than they are tall (landscape rather than portrait orientation) for stretching across a screen. If you have the rights to alter a photo (which is common in licenses for stock photo libraries), you can use the extend tool built right into Wix Photo Studio to make your image wider. You can also crop the top or bottom to better focus on the part of the image you want to highlight.
Bonus! Wix Photo Studio also allows you to upscale an image, which may help if it looks grainy, blurry, or pixelated.
Strategy 3: Increase the contrast between the text and the background image.
Sometimes your may find a suitable background image, but there's just not enough contrast with text on top of it. There are a few ways to remedy this:
Go to the image Settings. Choose a dark color (for example, #00000) as the color behind the image, and reduce the opacity of the image (in the two screenshots below, the second has the opacity set at 66%).
Change the text to a color with more contrast, try a bolder weight, and/or use effects like text shadowing to make the words pop.
There are many other ways to incorporate an image and text into your hero section! Instead of changing the opacity of the whole background image, you can add a box or highlighting around the text. You can also layer a holiday graphic and text over a more subtle background texture or pattern (I like a bokeh light background for holiday cheer).
If you'd like to save yourself some time and energy this season, we can make you a stunning, custom seasonal hero to delight your customers and drive holiday sales. Reach out today for a quote.
* A hero section is the part of a webpage just below the header (logo and menu). It's a banner that often includes a bold image, a slogan, and a button promoting a key message or product.
Comments