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.

Contents

Editing the Banner Image
Changing the Page Background
Removing the Yola Link

To see all the options for personalizing your style, click on the "Edit Page Design" button on the Yola toolbar in the site builder.

When you mouse over the Banner Image or Yola Link in your page, you will also see a green box appear which indicates that these aspects of the style are editable. Clicking directly on the Banner Image brings up the menu with all the banner editing options.

So you can choose between using the "Edit Style" menu, or using the editing controls directly in your page.

Banner Image

If the style you select supports a custom banner image, this option will be active on the "Edit Page Design" menu or if you hover your mouse over the banner area.

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, click on "Edit Page Design", "Banner Image" and you will see the Banner Size dimensions on the menu that opens. On this particular style, you can see that the recommended banner size is 900px by 125px.

Upload and edit the banner image:

1. Click on "Edit Page Design" and then "Banner Image" or hover your mouse over the banner area and click on the green "Edit Banner Image" bar. You can also click anywhere on the banner image and this will cause the menu to open up.
2. Click on "Change Banner Image" and the File Manager will open.
3. Choose to upload an image from Your Computer or go to the File Manager if you have already uploaded an image.
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 load on the page in the Site Builder.

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 on "Edit Page Design", then click on "Banner Image" and "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 on "Edit Page Design", "Banner Image" and then click on "Use Default". This will bring back the banner image that was there before you uploaded your own, and 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

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. Click on "Edit Page Design" and then "Format 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 on "OK". If you know the Hex value of the color you would like to use, enter it into the space provide (here's a link to a Hex color generator).

Upload your own background image:

1. Click on "Edit Page Design" and then "Format Background".
2. A dialog box will open, check the box next to "Use a background image" and click on the "Select" button.
3. The File Manager will open where you can either upload the file from your computer or if it's already uploaded, select it 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, click on "Edit Page Design" and then "Format 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. Click on "Edit Page Design", then click on "Format Background" and "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, click on "Edit Page Design", "Format Background" and then click on "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 Yola Link

This is a premium feature and carries a fee: Yola now gives you the option to remove the Yola Link on your site. By default this appears at the bottom of all pages of sites created on Yola with the text: "Make a Free Website with Yola."

The cost is $9.95 a year for your entire account. So if you have 3 sites in your account you can remove the footer on all of them for only $9.95 a year.

To remove the footer you click on "Make a Free Website with Yola" and then click on "Next". You will then have to option to pay via Paypal or Credit Card.

Now any site you create in your account will not have the link to Yola. For more information on this feature see: Yola Link Removal FAQ.