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.