Changing the Banner from the Plesk Premium Web Builder

When the Plesk Premium Builder website is published, then it is possible to modify the graphic pieces that make up the banner. This change must be made AFTER the site is published because you cannot access the graphic files since they are saved on a server specific to the Builder application. Changes to the banner require knowledge as well as access to a graphics program - preferably a program that can work in layers (e.g. Adobe Photoshop or Gimp). The banner is not the same for every template in the Builder. It may vary in graphic size on the web page and may consist of multiple pieces. The following tutorial will walk you through making changes to the Plesk Premium Builder banner.

Modifying the Banner from the Plesk Premium Web Builder

NOTE: The goal of this tutorial is to show you how to simply change/modify the graphic of an existing banner graphic to another picture or graphic. You will need the use of a graphics program like Adobe Photoshop or GIMP. It would be preferable to have a graphic program that can work in layers (which is a feature of these graphics programs). This allows you to easily add your graphic elements into the original graphic and instructions do reflect this ability.

If you have not already created a backup of your banner graphics, please make sure to do so before we begin.

The following tutorial shows how to modify a Banner graphic using the following example:

Using your graphics program, create a blank new image that will be about the double the size of the actual image. This allow you some room to work. Make sure to note the existing size of the default graphic. When you have completed making the changes then you would change the size back to that size. This is required in order for the graphic to show up correctly.

Copy both the original image and the original graphic file into the blank image. Make sure that these two elements are on separate layers. Here's an example:

As per the image above, there are 4 layers (plus a background layer which will not be used in this tutorial). Re-size the new image and fit it into the location where you wish to use it. Use the layers to make changes to the graphic until you are sure of the changes. If you make a mistake and you are unable to return to the previous state, then use the backup layers in order to restore the original graphic state.

The new picture used for the banner is a little short on the right. You will need to make sure that it fills the entire space for the graphic. You will need decide how that space will be filled. Here's an example of how it could be done:

Note that the right side of the graphic has been adjusted so that it now fills the rest of the banne area. The are that we are changing is only the graphic in the middle, the rest of the file is untouched. If you need to make changes to the banner you can also make changes where you please using the graphic program. In the next step, you will need to focus on making the other pieces fit the one you have just created.

Load in the other banner graphic pieces. If you put in the other pieces side-by-side (in your graphic program), you can get a sense of how the graphic will look in its final state. Here's an example of the graphic may look at this point:

The graphic above shows all three pieces. You need to make sure that all the pieces will fit when put together. Remember that the middle piece is actually duplicated to stretch the image. It's easiest if you use solid colors. Or, if you use a consistent pattern that will look correct when duplicated. Additionally, keep in mind the text color used in the banner graphic by the Builder. If it's white, then make sure to use darker colors so that the page title can be read. If the background is dark, then make sure it is contrasted by a lighter colored font.

Once you have verified that your graphic is changed to your liking, SAVE the files. Make sure that you save the files using the same names as original files. The names of the files should be the same because the Builder template looks for these file names. After you save your files upload them back into the same location as where you originally downloaded them (in the IMAGES folder)

This completes the change of the of the banner. When you show the banner again, it may look like the following:

This is only a sample and not perfect examples of graphics, but these graphics are set this way to show how it is important to make sure that the graphics are blended together in order to display a seamless appearance.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)

The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.

How did you find this article?

Please tell us how we can improve this article:

Email Address

Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Comments

Your program is a joke. You have an image, crop it, fit it to the banner size, done. WTF? Three parts, layers, this is nuts. Facebook takes a picture and pastes it without a problem. I have spent 7 hours trying to get one picture into a damn banner.. you should build my website for free!

Not all templates will accommodate a custom banner. The article above mentions what must be done to match a banner that is in multiple pieces. We did not create the builder or any other site building software, so we do understand there are limitations in them. There are many available programs you can use if you find the Premium Website Builder lacking. Many look to WordPress as a next step.