Setting Up a New Film Page
Step 1
Setting Up a New Film Page
Duplicate an existing page
Open the editor on the current film page (Kemba).
Click the gear icon → Duplicate Page.
Rename to “New Film.”
Double-check you’re editing the new page (not the original).
Updating the Header / Hero Section
Replace background video
Go to Vimeo → copy video link.
In the header section → Replace Background → Add from Link → paste link.
Confirm new trailer is showing on “New Film.”
Use grid for alignment
Press
Gto toggle the grid.Adjust spacing so text doesn’t wrap.
Always check mobile view (adjust width if wrapping).
Blur and positioning
Select element → adjust blur amount for readability.
Recenter content within the blurred area.
Crop video for better fit
Adjust crop to reduce scrolling and frame video properly.
Wrapping Up
Hero section is now customized with new trailer, layout, and styling.
Next step: edit the remaining sections of the page.
Step 1b
Adding & Linking the Hero Video (Correction from Last Video)
Use a test video
Upload a fake video to Vimeo.
Copy the Share link.
In Squarespace → edit section → remove old video → Add from Vimeo → paste link.
Transparent image overlay with play button
Notice a transparent image is layered over the video.
In Vimeo → click dots → Video File Links → choose largest version (1080p).
Copy that link.
Back in Squarespace → update the transparent image’s link with the new Vimeo file link → save.
Result: background video plays, and clicking the play button opens the full trailer.
Optional: you can loop a short background video while linking to the main trailer.
Improving Load Experience (Fallback Image)
Dark screen issue on reload
Without a fallback, the page looks dark until the video loads.
Set up a fallback image
In section editor → Background → Mobile Fallback Image.
Upload a static frame from the video.
Optimize the image file size (use a tool like ImageOptum).
Example: reduced from 560k → 164k.
Use the first frame of the video for smoother visual transition.
Result
On reload, users see a static image before the video plays.
Creates a seamless and more polished user experience.
Step 2
Editing the “Host a Screening” Section
Edit or remove the button
Click Edit on the “Host a Screening” button.
Options:
Update the link.
Remove the link.
Delete the entire button if not needed.
Adjust section layout
Can leave as is or delete the short section entirely.
Updating the Trailer Poster
Prepare the image properly
Avoid oversized or unoptimized files (e.g., 3.2MB PNG).
Convert/export to JPEG.
Optimize file size (example: reduced to 263KB, then compressed further by 18%).
Rename for organization
Use clear naming: e.g.,
new-film-trailer-thumb.jpg.
Replace in Squarespace
Double-click the image → Replace → upload optimized trailer poster.
Confirm no link is needed (or add one if desired).
Adding the Trailer Description
Insert text
Add a short description or explainer text (links optional).
Ensure it matches the new film content.
Check layout
Switch to Mobile View.
Adjust text size, spacing, or image size for better balance.
Section Complete
Host a Screening section is updated.
Trailer poster is optimized and replaced.
New description text is added.
Mobile view is confirmed and adjusted.