[intro]When you have completed this Guide, you will have customised the HTML Banner section on the Aerial Theme of your EKM online shop. [/intro]

[summary]

[/summary]

Before you begin this Guide, it’s a good idea to create the images you would like to use in this section. You will need to create two images:

  • Banner Product Image - 500px x 400px .png image with a transparent background works best (but this depends on the effect that you're trying to achieve);
  • Main Banner Background - 1920px x 600px either .jpeg/.png for background.

These images should be uploaded to Tiny Png or Tiny Jpeg (according to which file types you’ve chosen) to ensure that they have been optimised and will load quickly for visitors to your EKM online shop. 

1. Click the Edit symbol to open the HTML Banner section:

2. Now you need to click the down arrows to access each part of this section:

Settings

3. You can use the Design Selector drop-down menu here to select which of the versions of the HMTL Banner you’d like to use:

Design One

This Design makes use of both a Background Image and a Product Image which can be uploaded later on:

Design Two

This version does not use the Product Image by default, but instead displays a solid colour banner across the bottom part of the Background Image:

Design Three

This Design also doesn't use a Product Image, but instead uses a solid banner vertically across the Background Image@

Design Three: Reverse Layout

This Design can also be reverse, so that the solid colour banner is on the right-hand side:

4. Below the drop-down Design Selector menu, there’s a Section Contained switch. Here you can select whether the HTML Banner is contained within the body of the page content, or whether it stretches the entire width of the page, according to the browser being used to view it:

Content

5. Amend the fields in this element to customise the text to suit the images you’re going to upload, and select the Alignment using the drop-down menu:

Primary & Secondary Buttons

6. The first part of the settings in this area can be edited to customise the Button Text to reflect the specific Category, Product or Webpage you wish for the Button to link to. If you chose not to display the Button, simply click the switches to deactivate it:

7. When you have amended the Button Text, scroll further down within the element and click the Edit symbol to set where you want the Button to link to within your EKM online shop:

8. In the menu that appears, each folder symbol represents a different area of your EKM online shop. Click the green cross symbol to expand the Categories folder and select the Category you want to link to the Button:

[remember]The Category, Product or Webpage that you want to link to the Button must not be hidden on your EKM online shop, otherwise, it won’t be visible in the link menu when you are creating the link. [/remember]

Background Image

9. Now you need to upload your largest image, which should measure 1920px x 600px. Click the Select Image button:

10. In the window that appears, click the Upload Image button in the top right-hand corner:

11. In the second window, click the Select File button:

12. When you have located the image on your computer, you’ll see a preview of it in the window. Click the green Upload File button:

13. In the remaining window, click the file name and the image will be applied:

Product Image

14. To display a separate image on top of the existing Background Image, ensure the switch is turned on. Now you need to upload your largest image, which should measure 500px x 400px and be a .png file type so that it has a transparent background. Click the Select Image button:

15. In the window that appears, click the Upload Image button in the top right-hand corner:

14. In the second window, click the Select File button:

16. When you have located the image on your computer, you’ll see a preview of it in the window. Click the green Upload File button:

17. In the remaining window, click the file name and the image will be applied:

Colours

18. This element is used for setting the colour of the overlay background and overlay text. If you do not wish to have a Banner Overlay Colour, click the switch so it is turned off. Otherwise, simply click each square to open the Colour Picker window and amend the colours to match your logo and your brand: 

The opacity is the ‘thickness’ of the colour that displays on top of your Promo Block images. If set at zero, no background colour will be visible and if set at 100%, the Promo Block Images will not be visible.

19. When you have finished editing this section, be sure to click the green Save button in the bottom left-hand corner:

[more]

[/more]

[contact] If you need our help with your EKM online shop, contact your Ecommerce Expert or the Customer Support Team, who will be able to point you in the right direction. We're open from 8am-6pm weekdays and 9am-5.30pm weekends. If you'd like to suggest a feature or an upgrade on any of the EKM platforms, please let us know on the EKM Suggestions Board. If you have a non-account specific question to ask the EKM Team, join us in EKM Community. If you need some inspiration for your EKM online shop, listen to our podcast on iTunes and Spotify.[/contact]