Working with Banner Images - Knowledgebase / ESP Websites - ASI

Working with Banner Images

Authors list

Banners are images on your site that help keep it fresh and exciting. To update a banner properly, you will need to know which template you have applied to your site to ensure that the banner size is correct before updating it.

Before Making Changes: Identify the Template and Check the Banner Size

Check the template name

Go to the ESP Websites Admin and click on the Websites Admin tab.

Locate the site you would like to update and click on the Edit Site button.

Click on the plus button to expand Edit Website Design menu and click on the option for Templates & Colors. The template you have selected will be marked with a large checkmark. Note the name of the template.

Banner Image Sizes by Template

Please refer to the table below to locate the banner image size for each template.

Template # of Images Width (pixels) Height (pixels)
Evergreen
Generate
Branded
Spotlight
Summit
Education
Triumph*
Real Estate
Kaleidoscope*
Balance*
3 1500 725
Fundraising & Awareness
Healthcare
4 1500 725
Tapestry 3 1660 585
Sublime 1 1400 582
Snap 1 860 585
Identity 1 1500 489
Paper Plane 1 1900 500
Labeled 1 1899 640
Finance
Employee Appreciation
1 1500 725
Garden
Thematic
Apparel
Please contact the ASI Technical Product Support Team
Branded (Tiles) 5 500 561
Summit (Tiles) 4 264 296
* - Indicates a template for Supplier Websites Only

What is the difference between Banners and Category Tiles?

If you're not sure whether your site is using a banner image or category tiles, here are some key characteristics of each.

Banners:
  • Larger image size
  • More generic imagery or include a slogan
  • Single photo that spans the width of the site
Category Tiles
  • Smaller image size
  • Specific to a type of product or idea
  • Usually multiple images that display across the width of the site

Ways to Update the Banner(s)

Use an ASI Provided Banner

You are able to replace a banner image with one provided by ASI.

Go to the Banner Downloads page. After locating the image you would like to use, click on the "Get Image URL" button and copy the link. The ASI provided banners are 1500 pixels wide by 725 pixels tall, so they will work well with most templates. If you are using Windows, you can right click and select Copy or hold the Control key and tap C on your keyboard. If you are using a Mac, use Command + C. This will save the URL to your computer's clipboard.

After copying the URL, go to the ESP Websites Admin and click on the Websites Admin tab.

Locate the site you would like to update and click on the Edit Site button.

From the options on the left, open the Pages & Menus section and click on the Advanced Page Manager option.

A notification will appear informing you that changes made in this section can impact the features and functionality of your site. Click on Ok. Next, in the Manage Pages section, click on the Edit Page tab.

Use the Select Page dropdown to choose Home.

Every feature on your ESP Website is represented as a module and where it is located on the main is determined by its zone. The banners are located within a text module in the main zone of the homepage. Depending on the template you are using, there may be multiple text modules on the homepage. To locate the one you need to update, click on Edit for each text module until you find the image you would like to update.

Make sure you are seeing the image from your site that you wish to replace. Right-click and select Properties. Delete the numbers in the Width and Height fields. Then, replace the Image Src link with the URL you had copied to your clipboard. The image will be updated. Go to the Properties box on the right and click the Save button.

Lastly, click on the Make Changes Live option. The updated banner should appear on the website within 10 minutes.

Use an Image from My Computer

If you would like to upload your own banner image, please be sure that your image is the correct size for your selected website template to ensure the best result.

To use an image that is saved onto your computer, go to the ESP Websites Admin and then click on the Media Library option from the main toolbar.

The Media Library houses all images uploaded and utilized for all aspects of the ESP Websites. In the Media Library, click on the Upload Media button. Then, browse your computer for the image you would like to use for the banner. Select the file and then click on the Open button. Configure the image properties using the options on the right and then click on the Save Properties button.

After uploading and saving the image you would like to use, click on the My Sites option from the main toolbar and locate the site you would like to update. Click on the Edit Site button.

From the options on the left, open the Pages & Menus section and click on the Advanced Page Manager option.

A notification will appear informing you that changes made in this section can impact the features and functionality of your site. Click on Ok. Next, in the Manage Pages section, click on the Edit Page tab.

Use the Select Page dropdown to choose Home.

Every feature on your ESP Website is represented as a module and where it is located on the main is determined by its zone. The banners are located within a text module in the main zone of the homepage. Depending on the template you are using, there may be multiple text modules on the homepage. To locate the one you need to update, click on Edit for each text module until you find the image you would like to update.

Once you've located the image you'd like to replace, click on it to select it (it will display as highlighted) and then click on the Image Manager icon from the toolbar.

The Media Manager window will open, displaying all available images from the Media Library. Locate the image you would like to use, hover on Options and then click on Select File.

The updated image will now be shown in the main content area. On the right, click on the Save button in the Properties box.

Lastly, click on the Make Changes Live option. The updated banner should appear on the website within 10 minutes.

Use a Link to an Image

If the banner image you would like to use is hosted outside of ASI but you have a link to it, you can use that URL to change the image. After copying the URL, go to the ESP Websites Admin and click on the Websites Admin tab.

Locate the site you would like to update and click on the Edit Site button.

From the options on the left, open the Pages & Menus section and click on the Advanced Page Manager option.

A notification will appear informing you that changes made in this section can impact the features and functionality of your site. Click on Ok. Next, in the Manage Pages section, click on the Edit Page tab.

Use the Select Page dropdown to choose Home.

Every feature on your ESP Website is represented as a module and where it is located on the main is determined by its zone. The banners are located within a text module in the main zone of the homepage. Depending on the template you are using, there may be multiple text modules on the homepage. To locate the one you need to update, click on Edit for each text module until you find the image you would like to update.

Make sure you are seeing the image from your site that you wish to replace. Right-click and select Properties. Delete the numbers in the Width and Height fields. Then, replace the Image Src link with the URL you had copied to your clipboard. The image will be updated. Go to the Properties box on the right and click the Save button.

Once you have updated the banner image, click on the Make Changes Live option. The updated banner should appear on the website within 10 minutes.

Helpful Unhelpful