Northern Lights Health Foundation
Management of the Home Page Rotator
Introduction:
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.
Visuals:
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:
This is the expected display of a Content Rotator Slide on tablet screensizes and smaller monitor breakpoints, reduced to 1200px widths:
Finally, this is the expected display of a Content Rotator Slide on phone screensizes, or breakpoints below 450px:
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.
- The button portion of this Snippet is a custom styled link. The CSS Class option used in the hyperlink manager when managing this link is called: Events-BTN. Feel free to also use the following custom styles as well when styling this button: About-btn, Newsroom-btn.
- The small text found in this snippet is styled with a custom style called: Small-Paragraph. You should not have to manually style this text. Instead, select this placeholder text and type over it with new messaging you would like to display.
- The headings used in this snippet are Heading 2, Heading 1, and Heading 3 (from Top to Bottom).
See image below for the breakdown of these text elements in use:
Other Considerations:
- Try not to use images which contain text as part of the image itself. On mobile devices this text may prove difficult to read.
- Images which indicate a scene or a moment, a feeling, work great. You can then deliver the messaging portion of the theme using the right-hand column of the snippet. This text portion is also designed to respond (resize) effectively on mobile devices.
- The rotator was designed to be consistent. Having the text portion appear in one place on each slide does not force your site visitors to have to scan each rotator slide to find its text portion. Consistency establishes trust with your site visitors. They can then trust that the website will be consistent in display, throughout the site itself.
- The content rotator of any home page should offer links which take your visitors deeper into your website, and not offer stop - advertising. For example, if you are advertising an Event, suggest a very short description, title, and then use the button link to direct your site visitor to the Event's page. An events page is really the best place for all events, since you can offer times, dates, directions, contact information, summaries of the event, and more.
- The content rotator slide, used consistently, will also brings your visitors deeper into your website, increasing your visitor conversion rates. This is effective in Search Engine Optimization.
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 support@idealever.com.