Rotating Banners Follow

In MyOrderDesk you are able to create an unlimited number of Banners to show at the top of various pages throughout your website.
MOD_DEV_-_Brochures___Handouts_2020-10-20_21-29-58.png

The Banners can be added to the following pages: 

Home Catalog Pages Sign Out
Privacy Policy Terms of Service Products & Services
Product Catalog Resources & Support Support File Formats
Supported Software Company Info Departments
Location & Hours Our Equipment Our Values

 

Creating Your Banner Images

You can add as many images to your banners that you would like. Keep in mind that banner images do get saved in the File Library, and they do go against your total storage. When creating banners, you should make your banner images 1600 pixels wide to have them go the full width of the webpage. 

The Banner List

The Banner List page displays all the banners you have created and the pages you are displaying them on. This section explains the various functionalities on this page.

Action Buttons:

New - Select the New button to add a new banner. This will bring you to the Banner Settings page.
Edit - Click in a banner row and then select the Edit button, or click directly on the name of the banner in the grid to edit the banner settings. 
Copy - Click in a banner row and then select the Copy button to easily create a new banner by copying a previously created one. This will copy and open the new banner on the settings page, adding "Copy" to the name. 
View - Click in a banner row and then select View to view the banner on the Preview Page. This page will open in a new tab.

 

Grid Layout:

Name - Name of banner
Enabled - Shows if banner is allowed for use. 
Location - List of all pages where banner is currently linked. Click on the page name to go to that pages settings page. Click on the "eye" icon beside the name to view the banner on the page listed.
Last Modified By - Last user to modify the banner. Select their name to get their contact details. Click on the "pencil" icon to edit that users profile information if you have that ability. 
Last Modified On - The Date/Time when the banner was last modified.

Banner Settings

Name - Banner name - shown when linking a banner to pages.

Eye Icon - click here to see a preview of the banner. Use it to test your banner before linking it to a page.

Double page icon - Copy this banner, creating and going to a new banner settings page. 

Garbage icon - Delete this banner. 

Options:

  • Enabled - Turn banner on/off for use on a page.
  • Autoplay - Banner will automatically rotate from one image to the next rather than stopping after the series of banners display. 
  • Rewind - Restart banner rotation from beginning when it reaches the end. Note: must have autoplay enabled. Ignored in the "loop" mode. 
  • Pagination - Show (dot) icons to select slides within the banner to go directly to the next image. 
  • Type - Determine a slider type.
    • Slide - Regular slider behavior. Moves from one banner image to the next by sliding across the webpage. Once all images have been viewed, the rotation will end. 
    • Loop - Regular slider behavior, but when all the images have been viewed, the slider will start over again. 
    • Fade - Slider with fade transition from one image to the other. 
  • Interval - How long a slide is displayed in ms. The default is 5,000 ms. 
  • Speed - How fast the slide moves when transitioning to the next slide. The default is 400 ms.
  • Advanced Edit (json) - For those that are familiar and comfortable with JSON, you can take advantage of further customization of the banner behavior. To get to this area, select the box for the Advanced Edit. This area is for use by a web developer comfortable with JSON. Print Reach is not staffed to do this work. See Advanced section below for a helpful tip.  
    • Advanced Edit (json) - edit the default script for customization. You can refer to Splidejs for the various options.
    • Reset to Default - Select here if you want to return to the default settings.

Slides

  • Add Item - Create a new image slide while saving existing settings. You can add as many image slides as you would like for any banner. 
  • Save - Save the image slide after adding. Saving here will also save any settings you made in the banner settings. 
  • Double Bar Icon - This is a handle that will allow you to move the various images into the order in which you want them to display. 
  • Trash Icon - Delete the image slide. 
  • Image - Add the URL to the image you would like to use. When hovering over this field, you will see an option (image icon) appear to the right of the filed that you can use to select from or upload an image to the image library to be used. Keep in mind that images used in the banners go against your allowed storage amount. 
  • Eye Icon - Select this icon to see a preview of the slide image.
  • Link URL - If you would like the banner image to link to a particular page/website, enter the URL here. It will open the page in a new window.
  • Arrow/Document icon - Select this icon to test the Link URL. 
  • Caption - Optional text to display below the slide. This field will accept HTML if you would like to customize the caption with a particular font/size, background image, etc. Note: The pagination dots if used, will appear below the caption. Print Reach is not staffed to do this work.

ID - Banner ID

Last Modified - When the banner was last modified and by whom.

Click Save to save your changes.

 

Advanced Customization with Scripting

Moving the Pagination Dots: What happens when you add a caption to the banner image, the pagination (dots that show which image you are on), will display below the caption. If you don't have a caption, the dots appear on top of the lower part of the banner image, which might be what you want. Currently the only way to have the dots appear above the caption is to use custom CSS. 

You can move the pagination dots with something like the following (65% down from top)

<style>
.splide__pagination {
top: 65%;
}
</style>

The .splide__pagination container is relative to the splide container which holds both the image and caption. *Important! Unless all your images are guaranteed to be the same predefined height you can’t set this value. By default it’s set to the following (half a line height up from the bottom of the image/caption combo).

.splide__pagination {
bottom: .5em;
}

To add the custom CSS, go to: Admin > Site Settings > SEO / Code > Code and enter the code given above into the "Head" area. 


Using the Rotating Banner as a Static Banner Image

If you would like to use the rotating banners for just one image (a static banner), you can just add one image, but unfortunately, the arrows will still display on the right and left side of the image. To remove them, you must alter the script that is used by make a change to the Advanced JSON area. See the screenshot below. Note that to remove the arrows, you will add "arrows":false, within the script. Reminder: this area is for use by a web developer comfortable with JSON. Print Reach is not staffed to do this work or troubleshoot problems created by editing the script.

Banners_2020-11-20_10-58-06.png

 

Related articles

Powered by Zendesk