Custom Banners are simple to add into Reactive on a page by page basis.

As you can see by the display of the custom banner image above, you can easily add in a custom banner image to any site page in a Reactive Sandvox site. Also note that the height of the banner image in Reactive can vary. The height you use is completely up to you and will not impact the display of any other page element.

For example, the custom banner image above is 400px tall, whereas the height on the default Reactive banner images is 300px. If you want a custom banner image that is 50px tall or 500px tall, the height to use is completely up to you and will not have any negative impact on how your site is displayed on desktop AND mobile devices.

How to add a custom banner image to your site page

With the Reactive responsive design, we are introducing two new methods to use to add in custom banners to your Reacitve Sandvox site. Both are extremely easy to do but VERY different than what has been done in the past on Sandvox sites. By default there is no banner image displayed initially on any Reactive responsive site page, and there are no banner images included in any Reactive design's Contents folder to display as the default banner image. Or you can upload your own folder of custom banner images to your server directory and link to them as well.

We host banner images for you to place onto your Reactive site pages.

We have uploaded a variety of custom banner images to our secure AWS (Amazon Web Services) account for you to call and display in your Reactive Sandvox design layout on a site wide or page by page basis. This requires you to add a bit of custom css code listed below for your banner image using either Page Code Injection or Site Code Injection, depending on how you plan to use your banner image. This will also allow us to upload new banner images on a regular basis for you to add to your site layout too.

To display a single identical custom banner image on all your site pages.

Use this option to display the same identical banner image on all your site pages. Note that by using this method you cannot add in a different banner image on any site page using Page Code Injection so user beware. This is the simplest and fastest way to set your banner image site wide.

banner sitecodeinjection

To display different custom banner images on each of your site pages.

Use this option to display different banner images on each page in your site. Note that you must add the code shown below using Page Code Injection for each page of your site. This allows you to easily use multiple banner images throughout your site pages.

banner pagecodeinjection

For more detailed information on these features and how to use them, please download the Customizing Reactive Responsive readme guide using the link in the bottom of the sidebar.

© Blueball Design LLC 2015, All Rights Reserved.  |  Email us
Site created using the Blueball Reactive Responsive design and Sandvox™ by Karelia Software  |  E-commerce store powered by e-junkie
Sandvox™ is a registered trademark of Karelia Software, and is used with permission.