Loading...

Tutorials > Site structure and design:

Tutorial: Personalize your Style

Yola offers you the ability to personalize the look of your website by giving you the tools to change the banner image, page background and remove the Yola Link. Customizing your site using these features can help you create a more polished and unique site which will help you stand out from the crowd!

Contents

Editing the banner image
Changing the page background
Removing the Yola Link
Edit the Site CSS
 

Banner image

If the style you select supports a custom banner image, simply mouse over the banner area until the blue box appears. Clicking directly on the banner image brings up a dialog box with all the banner editing options.
 

 

 

Banner size:

Each banner has recommended dimensions which can be used to achieve the best result. Although you can edit the banner image once it has been uploaded, it's best to upload an image that matches the recommended banner dimensions.

To find the banner dimensions, look to the bottom of the dialog box that appears when you click within the banner area. On this particular style, you can see that the recommended banner size is 978px by 263px.

Upload and edit the banner image:

  1. Click anywhere on the banner image to open the dialog box.
  2. Click on "Change Banner Image" and a dialog box will open.
  3. You can select to "Upload New Banner", "Browse Uploaded Banners" or "Find Stock Banners".
  4. Select the banner image and the Banner Editor will open where you can scale your image to fit into the banner area perfectly.
  5. Make the changes and click on the "OK" button. The banner image will display in the banner area of your page. 

Apply to all pages:

Yola gives you the option to upload a different banner image on each page of your site, or apply the same banner image to all pages. To apply the banner image to all the pages on your site:

  1. Click inside the banner, then click on "Apply to All Pages".
  2. A dialog box will open asking you to confirm whether you would like to apply the change to all the pages on your site. Click on "Apply and Save" if you would like to go ahead.

Changing to default:

Don't like the result? No problem! You can easily revert to the default banner image. Click inside your banner and then click on "Use Default" on the dialog box that opens up. This will bring back the original banner image that came with the style. You can use this image, or start over by uploading a new one. To change the banner image on all your pages back to the default banner, follow the above steps and then follow the "Apply to All Pages" outlined above.

 

Page Background

If the style you select supports a custom background, Yola gives you the option to either change the background color of your style or upload your own background image, or both! 

Edit the page background color:

  1. On the main menu, click on Style > Edit Background > Change Background.
  2. A dialog box will open, click on the down-arrow next to "Background Fill" and the color picker will open.
  3. Select the color you would like to use and click "OK". If you know the Hex value of the color you would like to use, enter it into the space provided (here's a link to a Hex color generator).

Upload your own background image:

  1. On the main menu, click on Style > Edit Background > Change Background.
  2. A dialog box will open, check the box next to "Use a background image".
  3. You can now either upload a file from your computer or browse for an image file from the File Manager.
  4. Once uploaded, customize your settings - whether you would like the image to tile (repeat), where you would like the background to be located on the page and if you would like the background to scroll with the page or not.

To go back and edit the background you've added, on the main menu, click on Style > Edit Background > Change Background.

Apply to all pages:

You can choose to apply the same background to all of the pages on your site instead of changing the background on each page individually:

  1. On the main menu, click on Style > Edit Background > Apply to All Pages.
  2. A dialog box will open asking you to confirm whether you would like to apply the change to all the pages on your site, click on "Apply and Save" if you would like to go ahead.

Changing to default:

If you would prefer to change the banner image on your site back to the default background of the style, on the main menu, click on Style > Edit Background > Use Default. To change the background on all your pages back to the default background, follow the above steps and then follow the "Apply to All Pages" outlined above.

Links to useful background resources (with thanks to our community!):

The Tartan background pattern generator: tartanmaker.com
Stripe generator: stripegenerator.com
Ribbon generator: quickribbon.com
Palette generator (generates a palette based on a pic) if you want to match your background to a color on a pic: bighugelabs.com
Gradient Image maker: tools.dynamicdrive.com/gradient
BG Patterns: bgpatterns.com
Eos Development: eosdev.com
Hex color generator: cloford.com

 

Remove the Yola Link

Removal of the Yola Link is part of the Silver package. When you upgrade to Yola Silver, the Yola Link will be removed from all of your sites in your Yola account. For more information on this feature see: Yola Silver FAQ.

 

 

Edit the Site CSS

The Site CSS is another feature of the Yola Silver package and is fantastic way to really customize your site. You have access to your site's CSS codes and can tweak your site's overall look. For some general tips on how to use thie feature, please see this tutorial: How to edit the Site CSS.
 

 

ask a question