• Home
  • About
  • Advertise
  • How to Start a Blog

Smart Marketerz

Marketing And Smart Business Tips

  • Business
  • Make Money Online
  • Finance
  • Marketing
  • Blogging
  • Social Media
  • SEO
  • Web Traffic
  • Tech

How to Properly Utilize Text Overlays on Your Website

September 12, 2020 By Erik Emanuelli Leave a Comment

Text overlays allow you to superimpose words over videos and photos on your website. Using a layering technique enables you to change the text easily and create a more three-dimensional look for your design.  

According to Internet Live Stats, there are 1.79 billion websites, but the number changes constantly. If you want to stay current, you must be ready to customize your site to meet visitors’ needs. Text overlays give you the freedom to swap out language, inform customers of current sales and highlight new products.  

You can overdo it with text overlays, though. You must consider where to use them and what type of background works best, plus other best practices. Here are some rules of thumb to help you properly utilize them on your website: 

 

1. Color Overlay

If your brand has a particular color palette, you can give an overcast to any image you place on your page. Utilizing transparency, you can add a tinge of color and then overlay it with text in the matching color for a streamlined effect. The design method of color overlays can create different moods on your website. 

Lobagola lays a yellow overlay across the hero shot on their homepage. It gives the image a slight yellow cast while still allowing the photo’s different shades to peek through. They then use a text overlay in a vivid yellow with large typography, drawing the user’s eye and using a single word to drive home their message.  

 

2. Call to Action (CTA) Overlays

You can utilize the method of text overlays for your calls to action. Make sure you keep the wording clear and to the point. The goal is to drive the user to move forward in the buyer’s journey. What language accomplishes that? An advantage of text CTA overlays is that you can easily swap out the words without changing your entire CSS coding.  

 

3. Background Video

Videos offer a lot of information without many words. However, you might want to add a tagline, call to action or other wording to drive home a point. If you add the text to the video and later want to change the footage, you’ll waste a lot of time editing. However, using an overlay method allows you to superimpose text on top of any video you’d like to add to. You can also change the phrasing easily.  

HO Penn Machinery streams a video in the background of their header. Customers see their machinery, their workers on the job site and shots of their equipment. As the video streams, different text slides in along with CTA buttons so people can learn more.  

 

4. Text Positioning

In almost every photograph, there are areas of contrast. You might have a skyline in the center of the image. You never want to center your text there as it can look as though it is sitting on the horizon and get lost in the mix. Instead, look for an area with a solid color or blur your image slightly to give the visual effect of dark or light. Move your text to where it pops, even if it’s somewhat off-center.

  

5. Gradient Overlays

The recent design trends of flat elements are starting to be less popular. Gradients, however, seem to be taking hold in new and exciting ways. Websites utilize gradients in text overlays by giving colors unique splashes of hues as the shading ranges from dark to light. Some websites add the gradient to the background image and then lay text on top in a simple white. 

Impossible Bureau uses a gradient color overlay on their images as they pop up on hover. The interactivity of the page grabs user attention. They then layer the text on top of the gradient background. As you scroll over the section with the text, the color of the background overlay changes to dark mode, allowing the words to pop even more.  

 

6. Big Text

The smaller the text you use, the more it will appear farther away from the user. Large text makes your words pop in a three-dimensional way. Think about the use of z-space and whether your overlays look as though they are blending into the background or coming to life. 

 

7. Contrast and Brightness

When creating your text overlay, pay careful attention to where you place your text. Check if there is enough contrast with the background. You’ve likely seen websites where the overlay fades into the photograph and is almost unreadable. Most site visitors won’t work very hard to read the text. They’ll just skip forward or bounce to another website.  

Tomie Raines Realtors uses a light and bright kitchen for their background image. The photo appeals to today’s homebuyers, but it could result in the text disappearing into the texture of the picture. They add a box with slight transparency behind the text to set it apart and add additional contrast. 

  

Take a Step Back 

Once you’ve created your text overlays, step back from the computer screen. Is it easy to read the words? Can you change the position, so the letters show up better? How are your contrast and focus? Moving away from the design and looking at it from a new angle helps give you ideas for elements to tweak. With a little extra effort, your text overlays will stand out from those of other websites.  

 

About the Author

Lexie is a web designer and IoT enthusiast. She enjoys hiking with her goldendoodle and checking out local flea markets. Visit her design blog, Design Roast, and connect with her on Twitter @lexieludesigner.  

 

  • Facebook
  • Twitter
  • Google+

Related posts:

Default ThumbnailMake Your Employees’ Wellbeing A Priority: How To Support Staff With Musculoskeletal Disorders  Earn Easy Money Online With This In 2019 Adopting New Technologies: Three Ways To Help Protect Of Your Business Data Is Marketing Worth the Heavy Investment? University Cost Comparison – North vs South Business People On The Road: Our App Recommendations For Drivers The Data Points You Didn’t Know They Had Four Tech Trends Shaping Business Presentations of The Future A Guide Into Staff Productivity And How To Improve It The Importance Of Building A Better Customer Relationship Our Top Five Digital Marketing Trendsetters to Follow Did You Know That Focusing On Workplace Safety Could Save Your Company Thousands? The Diverse Marketing Laws Existing Around The Globe wordpress logo20 CMS You Can Use as Alternatives to WordPress The History of Typography

Filed Under: Blogging Tagged With: blogging, website

Leave a Reply Cancel 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.

SPONSORS

Don’t Miss to Read This

Successful Tips To Become a Leader Slot Developer

Save Money on Your Homeowners Insurance

5 Types of Custom Printed Drink Bottles You Can Use for Promotion

How Has Brexit Affected The Motoring Industry?

What to Do About Negative Information Posted Online

SPONSORS

Don't Miss to Read This

  • 8 Ways to Increase the Alexa Rank of YOUR Blog 29.5k views
  • Making Money Through Blogging: Is This Really A Possibility? 28.2k views
  • 6 Easy Ways to Get More Traffic on Your Site 16.9k views
  • How to Get More Traffic to Your Blog 12.5k views
  • 20 CMS You Can Use as Alternatives to WordPress 8.4k views

Recent Posts

  • How to Choose Product Lifecycle Management Tools for the Food and Beverages Industry
  • Private LTE Network Solutions For Businesses
  • Making Your Medical Practice Website Rank High On Google
  • 5 Types of Custom Printed Drink Bottles You Can Use for Promotion
  • How to Conquer POS Marketing and Outsmart Your Competitors

Search

Archives

Copyright © 2021 SmartMarketerz - Privacy & Disclosure Policy

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish.Accept Reject Read More
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.