Tutorials

loading...

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, add a logo, and more. In addition, our Style Designer allows you tweak particular elements on your site, such as the navigation, header text and paragraph text, just the way you want. 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! Using a style called "Super Flat", we will show you how you can utilize these features to create your website.

Contents

Editing the banner image

Changing the page background

Adding a logo

Changing the look of your navigation



Customizing your banner


If the style you select supports a custom banner image, click directly on the default banner image. The Style Designer will open up on the left-hand side. Under "Colors", locate "Banner Image".

User-added image


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 top of your banner area that appears when you mouseover within the banner area. On this particular style, you can see that the recommended banner size is 960 x 178px.

User-added image
 

Upload Banner Image

To upload your banner image:
  • Click on your banner area to open up the Style Designer.
  • Under "Colors", locate "Banner Image" and click on the square to the right.
  • The Banner Editor dialog box will open up. Click on Edit > Select Image.
  • You can now upload an image from your computer or select one that is already in your File Manager.
User-added image


Once you've selected an image, you can add a background color or foreground color and control the opacity. You can also determine the position of your banner in the banner area, whether you wish to have your banner image repeat, as well as selecting the size of your banner. Please note the size in the Banner Editor dialog box refers to the following:
  • Auto (retains the original image size)
  • Cover (stretches your image to cover the entire banner area)
  • Contain (stretches your image to proportionally to fit in banner area)
User-added image
 

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. After uploading your banner image through the Style Designer, click "Save". A dialog box will open up acknowledging the changes that have been made and will ask if you wish to apply these changes to all your pages.

User-added image
 

Changing to default

Don't like the result? No problem! You can easily revert to the default banner image. Click inside your banner and, in the Style Designer, under "Colors", locate "Banner Image". Click on the square to the right. The Banner Editor dialog box will open up. Click "Default". 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.

User-added image
 

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!

User-added image
 

Edit the page background color
  • Click Style > Style Settings > Background.
  • The Style Designer will open up.
  • Under "Colors", locate "Background Image" and click on the square to the right.
  • The Background Editor dialog box will display.
  • Click on Edit > No Image.
  • Click on the square next to "Background Color". Use the Color Picker to 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).
User-added image
 

Upload your own background image
  • Click on Style > Style Settings > Background.
  • The Style Designer will open up.
  • Under "Colors", locate "Background Image" and click on the square to the right.
  • The Background Editor dialog box will display.
  • Click on Edit > Select Image.
  • You can now either upload a file from your computer or browse for an image file from the File Manager.
  • Once uploaded, customize your settings:
    • Position
    • Size
    • Repeat (if you wish to have the background image tile)
    • Attachment (if you want the background image to scroll with your content or not)
To go back and edit the background you've added,  click on Style > Style Settings > Background, and make your changes.



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. After adding your background image through the Style Designer, click "Save". A dialog box will open up acknowledging changes have been made and if you wish to apply these changes to all your pages.



Changing to default

If you would prefer to change the background on your site back to the default background of the style, go to Style > Style Settings > Style Designer. Under "Colors", locate "Background Image" and click on the square to the right. In the Background Editor dialog box that opens up, click "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




Adding a logo


Having a logo added to your site helps to brand your business. The Style Designer allows you to easily add a logo to your site. Here's how to add one:
  • Go to Style > Settings > Style Designer.
  • Under "Colors", locate "Logo" and click on the square to the right.
  • In the Logo Editor dialog box that opens up, click Edit > Select image.
  • You can now either upload a file from your computer or browse for an image file from the File Manager.
  • Once added, you can determine the alignment and width of your logo.
User-added image
 

Please note: If the style you are using does not display the "Logo" option in the Style Designer, this means your style does not support this.




Editing your navigation


One of the first things your visitor will see and utilize the most is your navigation. Through the Style Designer, you can change the font color, font-family, size, alignment and more!


Changing the navigation font color

You can easily customize the font color of your navigation by following these steps:
  • Go to Style > Settings > Style Designer.
  • Under "Colors", you will see the following items specific to the navigation:
    • Navigation Background (available only on select styles)
    • Navigation - the default color that displays for your navigation links
    • Navigation (Selected) - the navigation link color that displays when the visitor is on the page
    • Navigation (Hover) - the color that displays when you mouseover the navigation link
  • If you click on the square to the right of the element you want to edit, you can use the Color Picker to 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).
User-added image
 

Changing the navigation typeset (e.g. font family, font size, alignment, etc..)
  • Go to Style > Settings > Style Designer. 
  • Under "Fonts", locate "Navigation" and click on the square to the right.
  • The Navigation Editor dialog box will open up and you'll see the following options:
    • Font Family (the typeface used for your text)
    • Font Weight (how thick or thin you want your typeface to be)
    • Font Size (the size of your text)
    • Text Decoration (adding a line to your text)
    • Letter Spacing (the spacing between each letter)
    • Line Height (the amount of spacing added above and below your text)
    • Text Transform (controls the capitalization of your text)
    • Text Alignment (the placement of your navigation)
User-added image
 

For more information on how to use the Style Designer, please visit this tutorial. This will touch upon all the elements used in the Style Designer and how it affects editing your style.