We have moved! This is an old website which is no longer officially supported.
Visit us at the new ImpressPages website.
Join us on Facebook Follow us on Twitter Subscribe to our RSS feed

Creating a vertical scrolling website

Single page scrolling is a trendy way of adding the “wow factor” to your website. From the user experience perspective, vertical scrolling allows you to guide your users so they consume information in your preferred sequence. Most first time visitors will scroll the entire page from top to bottom whilst seeing all the information in the exact order you have specified.

But how should you use this feature while retaining comfortable content editing? Websites with a single page scrolling navigation often contain impressive design elements. However, in most cases, a person who edits content either needs to know HTML or must ask a web-developer for assistance even in trivial cases such as editing contact information or changing a few images. Luckily though, we have some tips on creating websites that solve this issue.

In this tutorial, we will both code a vertical scrolling theme layout and use the ImpressPages CMS administration interface. We will be using jQuery One Page Navigation Plugin by Trevor Davis for a single page scrolling.

Prepare the CMS

You can use any of ImpressPages CMS themes to follow this tutorial, but just in case, I suggest downloading the sample theme provided with this tutorial. Please unzip Scrolling folder from provided archive to ip_themes folder of ImpressPages installation.

Then, on the CMS administration page, go to Design module and click on your theme’s Install button. Click the Content Management button. The sample theme should appear in your web browser.  

A theme before changes.

Go to Menu management module, expand the EN/Menu1 branch and add some pages by clicking New Page button.  

Creating a new menu page.

Return to the Content management view. Your new pages will appear on the top navigation menu, as in the screenshot below:

A website with top navigation menu.

 

Now let's add some sample content. Simply drag widgets from the toolbar to the content area, where you can instantly enter your text, add images and other content.  

Dragging a widget to content management area.

When you are done, click the green Publish button. Use the same way to add a sample content for all the pages.

Display all the contents on a single page

The first thing we need to do is to output all website's content on a single page. For navigation purposes, we will also surround each page in div tag with a unique id, generating the HTML as in the example below.  

<div id="section-1">
   .... Sample content ...
</div>

To achieve this we need to change our sample theme's code. Open the main.php file, located in our theme's root folder, with your favorite code editor.

We will replace a standard block output snippet, used to show the page content, echo $site->generateBlock('main'); with a loop which iterates pages retrieved from CMS and outputs their block content:

<?php
 /* SHOW ALL PAGES IN ONE */
 if ($site->managementState() || $site->getCurrentZone()->getName() != 'menu1') {
      echo $site->generateBlock('main');
  } else {
      $pages = $site->getZone('menu1')->getElements();
      foreach($pages as $pageKey => $page) {
          echo '<div class="scrollblock">';
          echo '<div id="page_'.$page->getId().'">';
          $publishedRevision = \Ip\Revision::getPublishedRevision('menu1', $page->getId()); 
          echo \Modules\standard\content_management\Model::generateBlock('main', $publishedRevision['revisionId'], $site->managementState());
        echo '</div>'; 
	echo '</div>';
   }
  }
  /* EOF SHOW ALL PAGES IN ONE */

Reopen the web-site in a web browser as a regular site visitor (you can simply click a Preview button), and see the results all the content from sample pages you prepared should be displayed on a single page.

Add single page navigation features

Secondly, lets modify the page navigation.

Standard menu is generated by the line
echo $this->generateMenu('Menu', 'menu1');. To adapt a menu for a single page layout, replace it with the following code:

<?php
/* GENERATE MENU */
echo '<ul id="nav">';

$pages = $site->getZone('menu1')->getElements();

foreach($pages as $pageKey => $page) {
      echo '<li><a href="#page_'.$page->getId().'">'.$page->getButtonTitle().'</a></li>';
}

echo '</ul>';
/* EOF GENERATE MENU */

Then turn off showing the header in management state, by putting header section inside of <?php if (!$site->managementState()) { } ?> statement. 

We will also adjust the CSS file, as we need to fix a position of the navigation bar at the top of the browser window. Let's add the following lines to css/style.css:

header.scrollingTheme{
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;    
}

Re-open the page in your browser – we have created a basic single page website.

Add a smooth scrolling

Now, when we have prepared our theme's appearance, and we can add the JavaScript, which enables automatic scrolling, when a user clicks the navigation menu items.

Download one page navigation library, included with our tutorial. Also you can visit Trevor Davis GitHub at https://github.com/davist11/jQuery-One-Page-Nav to check for the latest version of this library.

Extract the files jquery.nav.js and jquery.scrollTo.js to js folder.

Create js/theme.js file and add the following code binding the onePageNav JavaScript to our navigation menu:

$(document).ready(function() {
	$('#nav').onePageNav();
});

Next, open the main.php and add these lines, needed to load the library's JavaScript files and the theme.js before echo $site->generateJavascript(); line, near the end of the document.

<?php
$site->addJavascript(BASE_URL . THEME_DIR . THEME . '/js/jquery.nav.js');
$site->addJavascript(BASE_URL . THEME_DIR . THEME . '/js/jquery.scrollTo.js');
$site->addJavascript(BASE_URL . THEME_DIR . THEME . '/js/theme.js');

Open the page in the browser again to enjoy the smooth scrolling feature!

A final touch

At the end of our tutorial, we will add our custom homepage section. Place this code before outputting pages with CMS content 

<?php
 if (!$site->managementState()) {
            ?>
            <section class="homepage" id="home">

                <div>
                    <h2>ImpressPages onepage theme</h2>

                    <h1>Project name</h1>
                </div>
                <div class="startButton"><a href="#click">Start</a></div>
            </section>
        <?php
        }

, and then add a link to the homepage in to the menu code:

<?php
echo '<li><a href="#home">Home</a></li>';

Final result

If you completed all the steps properly, you should get your first single page scrolling website working.

Final result

Conclusions

In this tutorial, we have shown how to create a single page scrolling website and manage its content using the CMS and JavaScript libraries. You can have your own custom navigation, and use flexible features of content management systems to edit the text, image galleries, forms and other content.

Download sample template and theme

Click here to download the sample theme for ImpressPages CMS, used for this tutorial. See the comments in main.php and css/style.css files.

Click here to download Trevor Davis library.

Write a comment

You must be logged in to comment.

Comments (7)

Valexr

Valexr

Yyyaaaahhhoooo!!!!!

Saburov Anton

Saburov Anton

Great!
Thank you!!!

Gregory Santana

Gregory Santana

Should add this Theme to the market (FREE) !!!!

Mangirdas

Mangirdas

You are right :) Will do.

Mantas

Mantas

Lyg ir padariau ka reikia, bet nesigauna:D gal kas galetumete per skype padeti??? ar dar kaip nors?

Mangirdas

Mangirdas

Straipsnio apačioje yra download linkas pabaigtos temos. Gali ją tiesiog parsisiųsti. Ji taip pat ir čia įdėta: http://market.impresspages.org/

Mantas

Mantas

Imetu tema ir dar js folderyje, kur yra theme.js istrynu // bet vistiek man neorod nei flamingo paveiksliuko nei puslaio taip kaip turi buti:) Kame reples? gal kas galetumete padeti per skype:)