A large aspect of modern web design includes the use of strong visuals. For those of you with big, beautiful background images, you’re appealing to exactly that. But, the problem site-owners are faced with when using photography for their backgrounds is finding a color scheme to keep the text legible.
Take a look at the two examples below. The first website’s text is difficult to read, whereas the second is much easier on the eyes.
vs.
In this week’s 5-minute fix, we have a great tip to ensure your background image is working for you, rather than against you. We’ll give you the details behind creating opaque content backgrounds on Yola. Let’s get started!
To kick us off, for the sake of this example, we will be building a website with the Serendipity Template from the Template Gallery. These opaque content background customizations, however, can be made with both Super Flat or Skyline as well.
Now that we’ve selected our template, we will hop into Style Designer and upload our own background image to really make the site our own.
Great, now that we have our new background image, let’s go ahead and add in some color to our content background. While in Style Designer, click “Content background” located under “Colors.” Choose the color that best suits your background image, and use the scroll bar on the right to adjust it’s opacity. In our example, you can see we’ve chosen a black background at 30% opacity.
After adding in our Content Background and its opacity, our website now looks like this:
Now that we have our opaque Content Background, we can see there is very little space above our logo and below our button. To adjust this we’ll go to “Content Padding” located under “Layout,” and add a little bit of space on each side.
Our website is really coming along!
Finally, to keep consistency throughout our website, let’s make our Sidebar on the left the same color and opacity as our Content Background. To do this, within Style Designer, select “Sidebar Background,” and add in your own color and opacity. It’s important to note that this functionality is only available within the Serendipity Template at this time.
Now, customize your beautiful new website’s content and make your own!
Have you taken advantage of Content Background opacity? We’d like to see – add your link to the comments below!