{"id":7320,"date":"2014-05-08T15:34:27","date_gmt":"2014-05-08T22:34:27","guid":{"rendered":"http:\/\/www.yola.com\/blog\/?p=7320"},"modified":"2014-05-09T10:40:38","modified_gmt":"2014-05-09T17:40:38","slug":"5-minute-website-fixes-make-your-site-pop-with-a-custom-gradient-background","status":"publish","type":"post","link":"https:\/\/www.yola.com\/blog\/5-minute-website-fixes-make-your-site-pop-with-a-custom-gradient-background\/","title":{"rendered":"5-minute website fixes: Make your site pop with a custom gradient background"},"content":{"rendered":"

With our weekly 5-minute website fix series, we\u2019re 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<\/a>, get creative with custom banner images<\/a>, give your site\u00a0its own favicon<\/a> among many other hot topics.<\/p>\n

We’ve enjoyed giving users quick fixes to kick their websites up a notch with ease, and we’re definitely<\/em> not finished yet!<\/p>\n

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

\"Yola

Yola site built with a custom gradient<\/p><\/div>\n

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

Once you’ve reached The Gradient Image Maker, you’ll want to take the following steps:<\/p>\n

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

    \"Create<\/p>\n

     <\/p>\n

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

     <\/p>\n

    \"Saving<\/p>\n

    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.<\/p>\n

    \"Uploadinbg<\/p>\n

    Once uploaded, it’s time to make the following adjustments:<\/p>\n