Rotating Scroll Down Circle - 7.1 Version (Preview Guide)


Super Plugin Info

  • Works with Squarespace 7.1

  • Compatible with Fluid Engine and Classic Editor

  • Uses Custom CSS


Step 1. Add this code to Custom CSS + Rotating Speed

/* ----- 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) : [];
}
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  const sed = elit[0];
  return eiusmod.tempor(sed) ? sed : [sed];
}
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 2. Change Rotating Speed

An option to adjust the rotating speed can be found in the CSS. A higher seconds value will decrease the speed, while a lower value will increase the speed. Here are some speed recommendations:

  • 20s = Very Slow Speed

  • 10s = Gentle Speed

  • 05s = Fast Speed


Step 3. Scroll Down Circle Icons

We’ve included 4 basic scroll down circle icons in case you need them or want to customize the colors and text in Photoshop. If you already have your own scroll down circle, you can use that too.


Step 4. Add an Image Block

Add an image block to any page and place it where you’d like your scroll down circle to be. Next, upload your scroll down icon to the image block with the following settings:

  • Layout: Inline (Applies If Using Classic Editor)

  • Design: Fit (Required)

Important Step: Add the text rotate to the image block’s image alt text box.


Plugin Notes

  • Fluid Engine is recommended as it will allow you to place the block more freely in the page section.

  • If using Classic Editor, you will need to use and adjust spacer blocks for your block placement.


Troubleshooting (Plugin Not Working)

  • The rotate text has been added to the image’s alt text box.

  • If the image is replaced, you must add the rotate text again to the image block.

  • Only compatible with image blocks and will not work with other images types and galleries.

  • It’s recommended to keep the original crop of the image and not to apply a shape option.

Previous
Previous

Floating Header Navigation (Preview Guide)

Next
Next

Click and Stack Images (Preview Guide)