Editing of banners

  • 1
  • Question
  • Updated 8 years ago
  • Answered

Can someone please tell me how to modify my banner? I am using a premium style and the banner is lovely apart from the text being too small and I'd like it in a different colour. It seems I can neither change the edit the text or even add my own.

Also, how do I add a logo purchased off the site?

I'm struggling a bit with the whole thing seeing as I'm not too technical. :(

Thank you

Photo of oceanauk


  • 1 Post
  • 0 Reply Likes
  • confused

Posted 8 years ago

  • 1
Photo of Francois

Francois, Employee

  • 282 Posts
  • 19 Reply Likes
Hi Jackie,

If you would like to change the font color, type  and size of your page heading, please follow these steps carefully:

  1. On the main menu, go to Page > Page Properties.

  2. In the box beside "Page Heading", you will need to add some HTML code. Here is the code you need to add to the box:

    <!-- <font color="#5dc4d3" face="Times New Roman" size="5">your page heading goes here</font> -->

Replace the "5dc4d3" with the hex value number of the color you want. Please refer to our HTML Color Code Chart for web friendly colors.

You can change the font type by replacing "Times New Roman". It is advisable to use web-friendly fonts. You can find a list of these by clicking on the "A" icon on the Text Editing Toolbar.

You can change size of the your font by replacing the number "5". You can enter a numeric value from 1- 10. Please keep in mind, that by changing the size, your page heading may shift down closer to the bottom of your banner area.

As for adding the logo, you will have to use a workaround to add the logo to your banner area.  We have 2 options below for you to try:

Option 1: Insert your logo through the Page Heading area.

  1. Upload your logo to your File Manager.

  2. Go to Page > Page Properties.

  3. In the box beside "Page Heading", copy the following image code and paste into your Page Heading box.
    <img src="resources/yourimage.jpg">Page heading text goes here.

  4. Click "OK".

Replace "yourimage.jpg" with the name of your logo image file. The file name needs to look exactly the same as what you have in the File Manager, including capitalization, spaces and dashes.

Please keep in mind that you will need to keep your logo picture fairly small, so that it does not push outside the banner area.

Option 2: Replace as a new banner

Yola offers a selection of styles that allow you to change the entire banner image. If you did this, you would need to create your own banner image to include your logo.

There are quite a few banner making programs on the Internet if you would like to create your own. I have used a few programs which worked quite nicely if you would like to give them a try: Banner Fans and Banner Maker Pro, (this is not a free program, but they do have a free trial available). Here is a link to our public forum where a group of users were discussing this topic and gave lots of good ideas: What is the best banner making program.

Make sure to look at the dimensions of the banner area of your style (click on the banner area and you will see the dimensions displayed at the bottom of the dialog box) so that you can create your banner to be the proper size.

If the banner image can be changed, this will be indicated when you mouseover the banner image.

To change the banner image:

  1. Click on directly on the banner image on your page.

  2. A dialog box will open up that will allow you to browse your computer for an image or choose an image from the "File Manager".

  3. Once you select your image, you will be taken to the Banner Editor.

  4. You can crop and resize your banner image.

  5. Once done, click on "OK" and your banner image will be added to your page.

  6. Click on "Save" for the banner image to be saved to your page.

  7. You have the option to apply this image to all pages of your site by selecting the "Apply to All" option from the dialog box.

Here is a link to more information on the attributes of the different styles: Yola Style Guide.

I hope this helps.