Northern Lights Health Foundation

Management of the Home Page Rotator


The home page rotator for Northern Lights Health Foundation is designed to display a two column slide on desktop breakpoints; each column contains an editable image, and editable text respectively. On Mobile devices, the two columns of the rotator slide realign themselves to form a single column. This instructional guide assumes that you've had some experience working with your home page Content Rotator, and discusses more the use of the Content Rotator Snippet, used per design to create your content rotator slides on your home page.


As shown below, the purpose of the Content Rotator snippet is to maintain a consistent height of the rotator itself, while offering a responsive solution as well. Northern Lights is a mobile responsive website, which means it must accommodate to more than one device viewing the website itself. From desktop monitors, to mobile phones, the Content Rotator snippet offers the solution for all viewports.

Due to the wrapping of the two columns of the Rotator Snippet, the height of the Rotator does not change, keeping the contents of the home page below the Content Rotator consistent in where it begins, below the Rotator itself.

Naturally there are considerations to be made when choosing best images for your Content Rotator.

This is the expected display of a Content Rotator Slide, on desktop monitors and large monitor breakpoints:

desktop rotator slide

This is the expected display of a Content Rotator Slide on tablet screensizes and smaller monitor breakpoints, reduced to 1200px widths:

tablet rotator slide

Finally, this is the expected display of a Content Rotator Slide on phone screensizes, or breakpoints below 450px:

tablet rotator slide

As shown, more of the selected image for your rotator becomes available as the viewport (screensize) viewing the home page of the website is reduced. The height of the Rotator, however, never changes.

Required Snippet:

The snippet required for use to achieve all three visual effects for Content Rotator slides is called: Content Rotator. Snippets are inserted into a page or content block of our SiteCM websites using the Insert Code Snippet Tool, found within the Editor of a Content Block or Page.


Breakdown of the Content Rotator Snippet:


Column 1:

The left hand column of the Content Rotator snippet is used to contain an image that is 1200px in width, by 541px in height. For desktop displays, one half of the inserted image will be then hidden by the right hand column, equally up to 600px. This leads to best choice then of images, where the left half of the image is what is intended to display on desktop monitors.

Another consideration when choosing best images for your rotator slides is to choose images where their main axis (see below) offers the most visual content, since the images top and bottom edges will also be hidden at times, depending on the viewport being used to view the rotator itself.


Column 2

This section of the Content Rotator snippet is used to deliver the call to action text, representing the rotator slide itself. When editing this text, it is best to simply select the pre-existing text of the Content Rotator snippet, and type over it. Replacing the placeholder text of the snippet with the actual call to action messaging you intend to display, instead of deleting it and starting from scratch saves time in having to re-apply any headings or custom styled paragraphs used within the snippet itself.

See image below for the breakdown of these text elements in use:


Other Considerations:

Should you have any questions regarding the management of the Home Page Content Rotator, please feel free to contact us at 1.888.374.0906 ext 208, or