Snappy Page Sections (Preview Guide)

Random

Apr 5

Written By Ghost

Live Demo

Super Plugin Info

Works with Squarespace 7.1
Requires Business Plan or Higher
Uses Code Injection

Step 1 (a). Add this code to Header Code Injection - Apply Site Wide

To apply to the entire site, add this code to Header Code Injection.

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 1 (b). Add this code to the Page’s Header Code Injection - Apply To Single Page

To apply to a single page, add this code to Page Settings > Advanced > Header Code Injection.

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 2. Turn Snappy Off On Mobile (Optional)

To turn Snappy off on mobile, add this code to Footer Code Injection.

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 3. Exclude Snappy From The Footer (Optional)

To exclude the Footer from being full height, add this code to a Code Block in the Footer.

<style> .example-code {
  display: something !important;
  min-height: something !important;
} </style>

Plugin Notes

Only compatible with page sections.
The snap behavior cannot be changed.
Page sections will be set to 100% height so each section snaps properly based on screen size.
We recommend removing the header code if making big changes to your site such as adding new blocks, redesigning layouts, etc. Then simply add it back it when done.

Squarespace 7.1

Ghost http://www.ghostplugins.com