Control Panel > Help and Support > Creating a stack page (Responsive Layout Options)
User anonymous - click to sign in

Creating a stack page (Responsive Layout Options)

How do you use the new functions on the Responsive Layout pages

In this example we have included lots of options... probably more than you would want on one page in reality but you can mix and add whatever you want, as many times as you want and without any coding at all when you are making your own pages. This page was just to show you a variety of options all in one go. Your own vision, creative input and some experimenting are all that's required. Our example page is made up of 7 pages. You can add the pages you want and place them in the order you want them. Don't think you need to keep the order, colours, content or anything else the same as in this example.

You can click the link below to install our example page on your website, then make changes to it or use it to test things out then delete it once you have things sussed out the way you want them. If it helps you can also click here to see the stack page working in a new tab.

Click here to install the Stack Page Set Part to your site.

How our stack page is made up

Please note that the page names are only for this help article clarity purposes. Your page names can be anything you want. However, naming all page parts with the same prefix (e.g aa for home, bb for about etc) will group them together in the Edit pages listings.

What these settings mean:

  1. The page you want to display selected from the drop down list of all your pages
  2. The scroll effect you want to apply. If no scroll effect is wanted, use the default option of "Scroll".
  3. A quicklink to edit the selected page out of the stack.
  4. A quicklink to view the selected page out of the stack.
  5. The optional background colour selected on the page.

A tip from each of the page examples

  1. The first page added to our stack page is The Banner Links Page which was built specifically for the responsive layout. On this page you can show full page width banner images with animated text and a call to action button. The button can link to a page on your site or any URL. The link drop-down will show all pages on your website, or use "custom" to link to any URL. See also: Image sizes for responsive full screen pages.

  2. At the bottom of each page created you can click to (optionally) add a page background image. You can also add a background colour or a tint of a page colour. This is a great way to divide up sections on your page to make the page easier to scan for different subject areas.

  3. Our third page in the stack is the Scrolling Folio Page. Again a full-width image display of animated images scrolling across the page from a collection. Simply select the collection from the drop-down list. The images will be clickable if the collection has a price plan set in the sales tab. You can also select the image size you want to show. The thumbnails will be watermarked if the watermark option is enabled in the collection "Display" settings tab.

  4. The fourth page used in the stack is the The Advanced Page - literally some text and images. But by adding a background image (see point 2) and a background colour (also point 2) and setting the scroll option to "Overtake" in the stack page options, your visitor views a great effect with the image seemingly sitting static in the background and your coloured page background content scrolling over the top of it.

  5. The Stack Spacer Page can be used with a small text area or without so it will just show an image (1) or video (see point 6 above). If using the text area you can change the text area background box, opacity and position. You can also optionally add an Access code input for viewing private collections. In our example stack page, we gave this page section a parallax scrolling effect where the page background moves at a different rate to the foreground.

  6. Adding full-screen video to your page background has really never been easier than this. Select and process your video file with care so it is not too long and not too heavy (in MB size) so it loads quickly. Just upload an MP4 file into a collection and leave it to process. Once it is ready it will become an option in the drop-down list. If you don't have any video to use yet there are some example videos you can use to test things out. Just select the video you want to use and save your changes. Remember that if you add page background video to a content page you really want to make sure the content is still easy to read. If you are having trouble reading try adding a black or white (or any colour) shade background with an opacity setting, to reduce the video contrast as a distraction.

  7. We finished our stack page with an Advanced Contact Page. Remember that all pages you add to a stack page can, if you wish, also be shown in the navigation menu as a standalone page. However, it is usual to remove them from the navigation menu leaving just the stack page in the navigation menu. To remove any page from the nav menu simply uncheck the very first option on the editing page (1).

    The SEO for the stack page comes from the titles, meta tags and most importantly the content in the stack pages, not the individual pages separately inside the stack. Also, to make sure you get no duplicate content search engine optimisation issues, click the Meta tags (2) and set the Robots to NOINDEX (3). This will mean that the content of the page is indexed in the Stack Page, but not also as a separate page (so no duplicate content).

Remember you can add as much or as little to a stack page to make the page work in the way you want it. Enjoy the features!

  Sign Out | Home | Terms | Help | About | Contact | © Ltd