Tech | Web Team

Creating a Rotating Header

The Rotating Header will create a series of scrolling images that rotate across the top of your page. Preview a live example.

Helpful Tips!

  • Only one header per Add-ons folder.
  • Size your images to 980 x 300 px exactly.
  • Only one Add-ons folder per page, load it up!
  • Use your parent page to preview changes in header.
  • Keep your title and text brief.
  • Each image title must be unique.

Walk Through and Jump to Points in Video

Used correctly, a rotating header can look very pretty and entice people to navigate further into your content.

Let's Make a Header!

  • Right click your Add-ons folder and select Insert.
  • Select Rotating Header.

Select Rotating Header Option

  • You will see that the content loading dock has refreshed but there is nowhere to enter in content.
  • Right click the Rotating Header file you just created in content tree.
  • Click Insert and then left-click Rotating Image.
  • The content loading dock will now show several fields where you can enter in content.
  • First you want to upload an image for the header.
  • Rotating header images have to be a very particular size to fit within the page.
  • Make sure they are exactly 980 pixels wide by 300 pixels tall. You can use our handy guide to online photo-editing software Pixlr to help you properly size your image.
  • To upload your properly-sized image, make sure your page is locked and then click on the browse tab above the image field.
  • The Media Browser will now be opened.
  • On the left hand side, you will see the media content tree.

Browse Images for Rotating Header

  • Locate your image file, click it and then click OK.
  • You will be redirected back to the Content Loading Dock.
  • Now enter in your image’s title in the Title field.
  • It is good to choose a title that relates to the greater content of your site and your image, like a theme. 
  • Next click the show editor tab above the text area field.
  • This will pull up the text editor dialog box.
  • Keep it simple and remember to utilize the formatting tools available to you. 
  • Once you have entered your content, click Accept.

Insert Title and Text for Rotating Header

  • You can now orient your title and text over the image by selecting a display location from the pull down menu in the display text area field.

Change position of displayed text for Rotating Header

  • Remember to save! 
  • You can have as many images as you see fit in the rotating header.

For your Rotating Header to work, you need to create multiple headers.

Make more!

  • To add more images just right-click the rotating header add-on folder you initially created here and repeat the steps we just went through.
  • To reorder your images within the rotating header, right-click the individual rotating header images, scroll down to the sorting option in the pop up menu and choose the order you would like them to go in.
  • This may take a little fiddling around to get exactly how you like it but once you do, make sure you save your work.
  • Now you can click on the parent folder that you created the add-ons folder in and select Preview.
  • Click each of the boxes that appear in the upper right hand corner of your header to make sure all your images are working.

Hamster and wheel

FAQ

Hey can I speed up the rotation on this thing?

Please note, the rotation is timed for you, there is no way to speed it up or slow it down.Confused Kitten

My images aren't loading right. Why does it keep rotating to the same image?

Make sure each of the images you chose were named uniquely. The computer won't know the difference between the images unless they are named differently. You can easily rename your images by right clicking them in the content tree and selecting rename.

My images have a weird bar on the side. What is going on?

This is the easiest way to see that you have the wrong size. Rotating Headers need to be exactly 980 x 300 pixels in size. No bigger and no smaller. Reload the images properly sized and see what happens. I promise it will be fixed!

Best Practices

  • Winning Guinea PigYou will need to use an external photo editing software program to make sure they are properly sized before you load them into the media library.
  • Though you have the options to enter links and media in this field, we strongly suggest you keep your content concise and text based.
  • A link may look fine, many links will look sloppy but whatever you do, don’t load images or documents here.
  • Any content entered here will overlay your image and excess will distract from the important content within your page.
  • We suggest having at least 2 or else there really is no point in using the rotating header.
  • Use thematic images that relate to the content of your page and pages.
  • Use high quality images and try to find flattering pictures of people.
  • Keep your titles short and specific to your overall content.
  • Make sure you preview your header in your parent page and check that all of the images and text are working to your liking.

Page last updated: 7/9/2014