An extension for simple one-page sites

Installs: 429

Dependents: 0

Suggesters: 0

Security: 0

Stars: 4

Watchers: 3

Forks: 3

Open Issues: 3


0.9.0 2018-04-06 08:02 UTC

This package is auto-updated.

Last update: 2022-11-17 13:48:28 UTC


Scrutinizer Code Quality

This module provides a basic skeleton to build one-page sites easily.


Best installed via composer. You may clone the repo or download the zip, however you should find a directory called "onepage" with all files in your silverstripe root folder.

using Composer

composer require wernerkrauss/silverstripe-onepage dev-master


For a SS3 compatible version see v0.3.1


  • Pick colors for each slide: background, header and text
  • Define a background image for each slide
  • Define an extra css class for each slide to be extra flexible
  • Slides redirect to the parent holder when called directly


You can define the colors for picking in your config.yml as key value pairs globally or for each page type, e.g.

    - '#fff'
    - '#aacccc'
    - '#ccaaaa'
    - '#000'

You can limit the additional fields (colors and background images) in the layout tab to onepage slides only:

  use_only_on_onepage_slides: true

You can set empty defaults and switch off the need to choose colors by setting:

  colors_can_be_empty: true


Basic setup

Define a page as page type "One Page Holder" and add some child pages. In the tab "Layout" you can add all extra stuff like background image, colors or css-class. That's all!

OnePage Module CMS screenshot

Different page types

You can of course use any page type as a slide. Simply create an own template for inclusion as a slide and add the suffix "_onepage" to it's name. See the included file Page_onepage.ss

If your page type supports multiple layouts (e.g. by a dropdown) you can add a function called generateOnePageTemplateSuffix() in your page like this:

	public function generateOnePageTemplateSuffix() {
		return '_' . $this->Layout . '_onepage';

This way you can render the slide with a template called like "Page_layout1_onepage.ss"


Navigation and scrolling to slides

Navigaton / scrolling to slides can be done e.g. using the OnepageNav jQuery plugin which is not bundled with this module.

A possible javascript for setting it up could be:

    //remove pathname from slide links if they are on the current page
            if ($(this).prop('pathname') == window.location.pathname) {
                $(this).prop('href', $(this).prop('hash'));
            } else {
        //initialize onepage nav
            currentClass: 'current',
            changeHash: false,
            scrollSpeed: 750,
            scrollThreshold: 0.5,
            filter: ':not(.external)',
            easing: 'swing'


You can see the module in action on this sites:

Feel free to add your project to this list.


There are some block builder modules for SilverStripe out there. The default module for SilverStripe 4 is Elemental.


Feel free to file issues or submit pull requests.


This module makes translates all strings via Transifex.


  • --scroll to slide (important!)-- see tip above
  • --redirect slide page to OnePageHolder#Slide--
  • --use separate templates for page types to include as slide--
  • --i18n--
  • create unit tests
  • use focuspoint module for background images
  • refactor and improve


MIT Licence