taking business online

Call us at: 1.866.764.0701

Site Building Advice 0

5-minute website fixes: Building a business website with strong visuals

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.

Hard to read site content


Screen Shot 2014-07-18 at 3.55.47 PM

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.

Serendipity template on Yola

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.

Changing your website background on Yola

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.

Selecting a content background color with Yola

After adding in our Content Background and its opacity, our website now looks like this:

Adding content background on Yola

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.

Adding Content Padding on Yola

Our website is really coming along!

Building a website with Yola

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.

Building a website with Yola

Now, customize your beautiful new website’s content and make your own!

Screen Shot 2014-07-18 at 3.55.47 PM

Have you taken advantage of Content Background opacity? We’d like to see – add your link to the comments below!

Site Building Advice 0

Why every business website should have a domain

After building a business website, publishing it to a custom domain is you next best step – in this article, we detail all of the reasons why. Read more

Guest Bloggers 0

Amplification 101: 4 Reasons Why Your Content Isn’t Getting the Traction It Deserves

In this list-style post, learn the details behind amplifying your site’s content to gain traffic and engage your audience. Read more

Site Building Advice 0

Video Tutorial: Adding Custom Panel Widgets to your business website with the new Template Gallery

Adding content to websites made with the new Template Gallery is simple when using the Custom Panel Widget. In this video tutorial, we will show your how. Read more

Promoting Your Website 0

Get your business website found online with SiteWit

Getting found organically through search results is no easy feat, but getting found through Paid Search with SiteWit is a cinch. Read more to find out how. Read more

Load more