Want to captivate your WordPress audience with mesmerizing cinemagraphs? These are still images where select elements subtly move, adding a cinematic flair and storytelling depth to your content. As experienced WordPress developers, we've used cinemagraphs to boost engagement on numerous sites. In this detailed tutorial, we'll guide you through creating and embedding them seamlessly.
Cinemagraphs are GIFs where a portion of the image animates while the rest stays frozen, creating a hypnotic, film-like effect—hence the name.
They infuse static visuals with narrative power, making them ideal for long-form articles, podcasts, or audio stories. Unlike standard GIFs, cinemagraphs demand precision, but with the right tools and practice, you can craft professional results from your videos.
Let's dive into creating cinemagraphs from videos and adding them to WordPress.
To start, gather these essentials:
First, prepare your video—use iMovie or similar to trim it to the key loopable moment.
Launch Photoshop and import via File » Import » Video Frames to Layers.
Select your video and click OK. Import time varies by file size.
Frames now appear as layers in the Layers panel.
Select all layers except the bottom one (Layer 1). Group them via Layer » New » Group or Cmd/Ctrl + G.
Select the group, then add a mask: Layer » Layer Mask » Reveal All.
Invert the mask with Cmd/Ctrl + I.
Set foreground to white, grab the Brush Tool, and paint the moving area on the mask.
Open the Timeline panel to view frames as animation. Most frames appear transparent except the first.
Select Layer 1, click the eye icon to hide visibility, then the chain icon to link layers.
In Timeline, click the hamburger menu, select all frames, and copy them.
Paste after selection via the menu.
Reverse the pasted frames from the menu for a seamless loop.
Your cinemagraph is ready. Export via File » Export » Save for Web (Legacy), choose GIF, and save.
To add to WordPress: Edit your post/page, click Add Media, upload the GIF, and insert.
Preview to see it live. Here's ours:
This technique has transformed our clients' visuals. For more, check royalty-free image sites for WordPress.
Subscribe to our YouTube channel for video tutorials, and follow on Twitter and Facebook.
