---
title: "How to upload a custom banner in the Builder"
description: "When working with the builder, you may want to have you own banner uploaded to your site. You can create a custom banner that can match the existing site. Below will walk you through the steps to..."
url: https://www.inmotionhosting.com/support/website/upload-custom-banner-builder/
date: 2013-02-20
modified: 2021-08-16
author: "InMotion Hosting Contributor"
categories: ["Website"]
type: post
lang: en
---

# How to upload a custom banner in the Builder

When working with the builder, you may want to have you own banner uploaded to your site. You can create a custom banner that can match the existing site. Below will walk you through the steps to download, edit, and upload a custom banner to your Premium Web Builder site.

**Important!** This article is using the “*xbs-01*” business template. the steps are the same for the other templates.

## Steps to create your custom banner

1. [![Original banner Plesk Builder](https://www.inmotionhosting.com/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-1-original.gif)](/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-1-original.gif) Visit your site with the default banner.
2. [![Background Plesk Builder](https://www.inmotionhosting.com/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-2-view-background.gif)](/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-2-view-background.gif) Right click the banner and select **View Background Image** (This is done in FireFox, This step may vary depending on the browser).
3. [![Save image Plesk Builder](https://www.inmotionhosting.com/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-3-save-image-as.gif)](/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-3-save-image-as.gif) Right click the image and click **Save Image As**.
4. [![Downloaded image Plesk Builder](https://www.inmotionhosting.com/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-5-downloaded.gif)](/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-5-downloaded.gif) Save the Image to your desktop. The default banner should look like the image to the right..
5. [![Edit the image Plesk Builder](https://www.inmotionhosting.com/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-4-edit-image.gif)](/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-4-edit-image.gif) Edit the image in PhotoShop or another image editing program. In this case we are using PhotoShop. [![New Image created Plesk Builder](https://www.inmotionhosting.com/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-4-z.gif)](/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-4-z.gif) You should have a finished banner that covers the old image like the image to the right.
6. [](/support/security/password-strength/)[Log into the web builder.](/support/)
7. [![Upload the new banner Plesk Builder](https://www.inmotionhosting.com/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-6-upload-new-banner.gif)](/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-6-upload-new-banner.gif) Go to the design tab. In the banners section to the right, Browse your computer for the new image you made. Click **Upload**.
8. [![Final look of custom banner Plesk Builder](https://www.inmotionhosting.com/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-7-final.gif)](/support/wp-content/uploads/2013/02/edu_builder_102_custom-banner_uploading-custom-banner-7-final.gif) **Publish** the site and you will see the new banner match with your site.