Cinema Stories
A cinematic split story slider with monumental titles, immersive photography and a numbered reader-controlled index for an independent film journal.
Preview patternAbout this pattern
Where Before and After fits
A portfolio or service page where the proof is visual change, placed where a visitor decides whether the work makes a real difference.
Use it for
- Photo retouching portfolio
- Colour grading showcase
- Renovation project page
- Landscape design case study
What you can edit
Every word, image and link is a WordPress block
Select any of them in the block editor and change it in place. Colours, type and spacing use the blocks’ own controls.
The layout stays protected while you edit. Unlock layout, in the section’s settings, lets you insert, move and remove any block.
- 2imagesboth required
- 2headingsboth required
- 8text lines6 optional
- 1buttonrequired
Section settings
- Appearance: Designed or Use my theme
- Animate changes
- Unlock layout
How it behaves
It still works when things are switched off
Drag the divider to compare the two images; it bends, carries a flick and settles. A click jumps it there, and arrow keys move it in steps with Home and End at either edge.
- Motion off or reduced motion
- It shows its final state at once; anything a visitor can press or drag still works.
- JavaScript off
- All content stays visible and readable; controls the script adds are hidden.
- Plugin missing or older
- It pastes as plain WordPress blocks, in reading order, without the designed layout.
Questions
Before and After: common questions
What is Before and After for?
A portfolio or service page where the proof is visual change, placed where a visitor decides whether the work makes a real difference. Typical uses: photo retouching portfolio, colour grading showcase, renovation project page and landscape design case study.
Does Before and After need a plugin?
Yes. Designed Patterns come with a subscription, which includes the Pattern Paste plugin that runs them; Before and After arrived in plugin 0.25.0. Without the plugin, or on an older version, it pastes as plain WordPress blocks: the content reads in order, without the designed layout.
What can I edit in Before and After?
As pasted it has 2 images, 2 headings, 8 text lines and 1 button, 6 of them optional and removable. The layout stays protected while you edit. Unlock layout, in the section’s settings, lets you insert, move and remove any block.
Will Before and After match my theme?
Choose Designed to keep its own palette and type, or Use my theme to let it follow your theme’s colours and fonts. Either works in any block theme on WordPress 7.0 or later. Choose Use my theme in the preview above to see it follow a theme before you copy.
Can the motion be switched off?
Yes. Turn off Animate changes in the section settings, and visitors who ask their device for reduced motion get the same: the section shows its final state at once and anything they can press or drag still works. With JavaScript off, all content stays visible.
