One Page Themes

Understanding the One Page Theme

The one page/horizontal homepage theme is a theme that provides a homepage with content regions that lay horizontally in a browser. The following image is what to expect to see when managing the content of your frontpage from your Layout area. The background color of the homepage content regions alternate in color. Pages beyond the frontpage follow the standard layout rules, with content displaying vertically in the center/content and sidebar layout regions.

Below is a list of widgets that will work well with the one page theme and display information:

  1. The wide screen Slideshow Widget format will fill the width of the screen, with a max-width of 1520px. The pager and caption box will both be centered. 

    a) Similarly, an Embed Media Widget with an image will fill the width of the screen with NO max-width.
    b) the standard Slideshow Widget format has a standard width of 980px and will sit centered on the screen as in the other themes.

  2. Custom Text/HTML Widgets placed directly in the layout will flex to a width of 95% of the browser. 

  3. List of Post (LOPs) Widgets placed directly into the layout (outside of a columns widget) with display posts horizontally when set to 2, 3, 4 or 6 posts. 

  4. Columns Widgets placed in the layout will have a standard width of 980px and will sit centered on the screen. HTML and other widgets placed inside a  columns widget will be constrained to the width of the columns chosen. 

  5. A Tabs Widget is a good way to present content in this theme, and will display at a standard width of 980px in the center of the screen.

Special Features

Another visual feature included in this theme is a “swipe button”—mousing over the button generates a slow, left to right color swipe effect.

To create a small or large button:

  1. Create a text link (learn about adding links)
  2. In the wysiwyg/text editor, view the HTML view by selecting the "disable rich-text link"                                                         disable rich text link
  3. As illustrated below, copy/paste one of the following:
  • class="os-swipe-large” 
  • class="os-swipe-small”              Add swipe button code

Displays:

small button

large button