5-minute website fixes: Make your site pop with a custom gradient background

With our weekly 5-minute website fix series, we’re well on our way to making Yola Blog readers site-building experts. Recently, we’ve given you the deets on how to revamp your site to a more modern design, get creative with custom banner images, give your site its own favicon among many other hot topics.

We’ve enjoyed giving users quick fixes to kick their websites up a notch with ease, and we’re definitely not finished yet!

The Yola Pros have plenty more tricks of the trade to keep business owners in the loop. Up this week – we’ll teach you how to create a custom gradient background that will really make your site pop.

To get started, you’ll need to choose two colors from your color scheme. Don’t have particular colors in mind? No problem – we’ll get to that in the steps to follow. Go ahead and hop on over to the The Gradient Image Maker, and we’ll get started.

Once you’ve reached The Gradient Image Maker, you’ll want to take the following steps:

1. Select horizontal gradient
2. Give your gradient a width of 50
3. A length of 6000 (sounds large, but it will make your background image suitable for all screen sizes)
4. Add in your top and bottom colors – if you didn’t have specific colors in mind, feel free to choose from the color selector on the left
5. Select PNG for a smaller file size
6. If you like the preview,  click “Get full size image”

 

Upon clicking “Get full size image,” your gradient will appear in a new window. Now, right-click your new design to save the file.

 

Now that you’ve created your own custom gradient, let’s add it to your website. While in Sitebuilder, hop into Style Designer, select “Background Image” and go ahead and upload your new gradient.

Once uploaded, it’s time to make the following adjustments:

• Size: “Contain” – this will make your gradient adjust to any sized website
• Repeat: “Repeat-X” – this will turn your gradient from one thin line to a full screen
• Attachment: “Scroll” – this will make your background scroll with your visitor as they move down the page

Voila – you’re finished! Go ahead and hit “Save” to exit out of Style Designer, and preview your new background to make sure it suits your fancy.

Have any tricks you’d like to see us detail here on our weekly 5-minute website fix series? Drop us a line, we’d love to hear from you!