Super Plugin Info

• Works with Squarespace 7.1 (Fluid Engine)

• Requires Business Plan or Higher

• Uses Custom CSS, Code Injection and Code Block

• Only Compatible On Desktop

Note: Only compatible on desktop. Images on mobile will have a more random stacked style.

Step 1. Add this code to Header Code Injection

Step 2. Add this code to Footer Code Injection

Step 3. Add this code to Custom CSS

Step 4 (a). Customizable Options - Footer Code Injection

These options are available in Footer Code Injection.

• Minimum Image Height

• Maximum Image Height

• Image Spread Distance

Note: Image placement and min/max height applies randomly on each page load. To make all images the same size, set minimum and maximum height to the same value.

Step 4 (b). Customizable Options - Custom CSS

These options are available in Custom CSS.

• Cursor Style (Grab or Move)

• Image Border Radius

• Image Border Style

• Expand On Hover

• Tilt On Hover

• Hover Speed

• Hide On Mobile

Step 5. Set Up and Manage Your Images

Create a new blog page with a new post and upload an image thumbnail.
Repeat this set for each image you’d like to show in the plugin.

Why a blog? The blog page is simply used as a workaround to house and manage your images.

Step 6. Add Code Block To Any Page Section

Add this code to a Code Block to the page section you’d like Mood Board on.

Next, replace BLOG-URL-HERE with the url slug of the blog page you created. Show me this

Step 7. Create Mood Board’s Image Canvas

The code block will create Mood Board’s image canvas and where the images will be placed.

• Resize the code block to your preferred size to create the canvas

• Bring the code block to the very “front” via Squarespace’s forward block option

• For clickable items (like buttons) bring these in front of canvas

Watch this video on how to resize the code block and send it to the front.

Plugin Notes

• Only compatible on desktop

• Page section must be using Fluid Engine

• The red line and “Canvas Area” message only appears in edit mode

• Image placement is random on each page load and can be resized with the cursor

• Image placement on mobile will appear more stacked - use the mobile editor for block placement

Troubleshooting (Plugin Not Working)

• If images are cut off, this is due to edit mode. Check as a normal, logged out visitor.

• If images are not moveable, check to ensure the code block is in the very “front” of other blocks

• If images are not updating, try clearing your cache or changing your blog url slug