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 G to 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.