Large page composition

Hi there,

I have a large single page Stacks based page. It has a number of different sections on it and uses quite a lot of third party stacks. It is quite slow to render in the RW view mode. Also, whenever I need to find something, it’s a pain as a have to sometimes scroll down a loooong way.

I was wondering if there is a known pattern for making maintenance of this kind of page easier? It becomes quite unwieldy and difficult to maintain. Ideally, I could have each ‘section’ in an individual page, allowing me to quickly preview just that bit. Then I could ‘insert’ that page into the larger main (published) page?

I’ve experimented with partials, but they don’t quite cut it as it kicks off a separate partials editor and doesn’t make the development flow very nice. (unless I have misunderstood how to use them)

Any advice muchly appreciated.


Without seeing the site/page in question, it’s hard to say for sure, but you might reconsider the ”single page” approach.

The single-page website was kind of a craze that was popular for low content sites a few years back. Most usability studies have shown that the end-users have difficulty with them.

If you are having trouble with scrolling through, imagine the user who doesn’t have a clue as to what is on the page. Will they find what they’re looking for, or move on to a different site?

A lot of stacks on a single page can make preview slower. Also lots of warehoused images can slow down edit to A crawl. Isaiah did a video showing the advantage of using the new stacks 4 *site Image stack” and editing.

1 Like

There are probably a variety of things you could do … but one of them would be to use a “grouping” stack. Put all stacks for a section into a group and then hide the contents of that group. Easy to unhide when you want to edit it. Stacks even has a very nice hide/unhide keyboard shortcut: Shift-H if I remember correctly.

I believe there are a few folks that make grouping stacks. It comes with Foundry (which I use) so I just use the Foundry one. Give the stack a title so it’s easy to know what “part” is being hidden. If interested tell us what you are using. I think @joeworkman has a grouping stack (don’t remember the name) that does not need Foundation. But I may be wrong.

Screenshot below shows how easy it is to title and hide all my “video stuff” in a long page. Very very handy.

Mathew is referring to my free Pen stack. Many people have told me that it’s their favorite and most used stack actually.

Another trick to speeding up a very large page is to split sections up into Partials. even if you don’t import the partial into any other page. The reason is that the partial will cache the content and not have to render again unless it’s modified. This should make edit and preview faster.

Aha, the Pen stack! So my memory isn’t completely off base. Thanks @joeworkman

I love the idea of using partials to help. I did not realize how useful they might be in a context like this. Great idea!

Might be a good candidate for portal, break sections up into separate pages and pull them into the main “single” page with portal. What say you joe?

Portal could definitely be,p. Real the page up as well. Then you would design each part of the page in their own pages. Portal would be used to consolidate them into one page.

There is me thinking I wish I could just design and build each part of the page in its own page and then…

Oh! Portals! Yes that’s exactly how I was thinking it should happen!

Thank you everyone for the advice.


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.