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.

 

  1. The following tutorial shows how to modify a Banner graphic using the following example:
    banner-switch-pix

    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.

  2. 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:

    banner-ff-screenshot-step6

    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. 

  3. 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:

    banner-left-replaced

    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.

  4. 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:
    builder-banner-gray-pieces2

    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.

  5. 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:

banner-full-changed

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?

Login to comment.

Your Opinion Matters

... but we need to know what you're thinking!

I'm Arnel Custodio, your friendly Community Support technician, and I wrote the article you're looking at now. I like to think it's perfect, but I'm sure you have some suggestions. Please, let me know what they are!

Feedback
Your Email Address
Because we'd like to talk with you!

Have a Question?

If you need some help, submit your question to our Community! We guarantee a response within 60 minutes (8am - 9pm EST, Monday - Friday)

Recent Questions

  1. Google Adwords Credit Link Doesn't Work in AMP
  2. my email is being rejected
  3. Can I run the FiverrScript on my hosting

Support Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

Get help with your questions from our community of like-minded hosting users and Web Hosting Hub Staff.

Not a Customer?

Get web hosting from a company that is here to help.