How to Make an iPhone Duo Folding Mockup With Two Screens

The Duo folding mockup has two image slots: one wide image across the open display and one portrait image on the outer cover. Replace the second image from Media → 2 screens → Replace outer cover. You do not need to add a second device to the canvas. Open the White Folding Tour template. This guide uses Screenhance’s standard yellow tablet and pink phone demo artwork, so you can tell which screen you are editing before adding your own images. Watch the Duo video with step-by-step chapters. You can jump straight to screen replacement, movement or export.

Watch: replace both Duo screens and export

This is a recording of the actual Visual Editor in a local demo workspace with Pro enabled. It uses Fieldnotes, our original fictional sample app. Captions explain each step; loading time and most of the export-processing wait are removed.

The walkthrough opens White Folding Tour, replaces Open display with a wide screenshot, checks its crop, then replaces and crops Outer cover independently. It keeps Folding tour on at 8 seconds and uses Export → Video → 1× → Export Video. The final download is an actual MP4. Animated exports require Pro.

Open the same folding template. For one wide screen in a realistic setting, try the new scene below.

New: a sunlit Duo desk with camera motion

The Sunlit Desk Film gives an open Duo a slow camera push, warm oak and natural window light. Upload one wide screenshot, check its crop and adjust the scene layer’s motion. The photograph and screen move together; the phone does not fold in this template.

See the actual exported sunlit Duo film alongside two other motion styles. The comparison uses the same fictional app across Duo, MacBook and iPhone 18.

Choose a Duo mockup to start with

Use the folding template when you want to reveal the outer cover and open display in one animation. For a portfolio, launch image or website still, the photo scenes below give you one open Duo in a complete setting.

The Duo photo library has nine settings, including oak daylight, linen, gallery stone, handheld daylight, a midnight workspace, a blue studio, poolside stone, a design desk and a soft lounge. Browse the Duo templates to compare them with your own screen in mind.

Photo scenes have one visible screen. Their room, light and device position are part of the photograph; you replace and crop the screen artwork. The folding template below has two independently editable screens and animated device movement. Choose that version when the fold itself is part of the story.

Find both screen controls

The Media panel groups the images under 2 screens. Each has its own thumbnail, Replace button and Crop button. You can also use Edit 2 screens on the canvas to return to these controls.

The included template already contains both demo images. Replace both if you want the full animation to show your product. When a design has only one source image, the cover can reuse it, but a purpose-made portrait capture gives you control over what appears there.

Replace the open display

Choose Replace open display and upload the wide screenshot. Keep the two halves in one source image: the renderer divides that image across the hinged display. Two unrelated portrait screenshots are not a substitute for one expanded interface.

Use a clear product state with fictional data. If the image’s shape differs from the display, the crop dialog opens so you can choose what remains visible. Otherwise, use Crop beneath Open display whenever you want to adjust it.

Replace the second screenshot

Choose Replace outer cover in the same panel. Upload the portrait version of the product, then inspect the separate cover thumbnail. Changing the cover keeps the open display’s source and crop intact.

A useful pair shows the same task at two sizes: a compact overview outside and the expanded workspace inside. The mockup supplies the folding hardware motion; it does not invent responsive versions of your interface. Capture those states from your product first.

Crop each screen independently

Click Crop outer cover to adjust the portrait screen, or Crop open display for the wide screen. Drag the crop area or its handles to keep the important part of the image, then choose Apply Crop. The crop shape is locked to the selected screen, which keeps the result from stretching.

Check a headline, navigation label and important button after cropping. If they cannot all fit, simplify the source screen rather than squeezing the whole interface into the frame. Preparing a better screenshot usually helps more than adding decoration.

The inner and outer crops remain separate throughout the folding tour. Applying a crop is not the same as changing the dimensions of the entire exported composition.

Preview the complete fold

Keep Folding tour switched on. The device animation offers 4, 6, 8 or 12 seconds; the template starts at 8 seconds. Watch the full cycle, including the cover, hinge, open display and back. A crop can look good in a still and become too small when the camera turns.

The lightweight gallery preview above is five seconds long. The editor’s authored duration controls your final export. See the motion help guide for device motion and composition motion settings.

Export the animation and a useful still

Choose Export → Video for a website or a destination that accepts video. Use GIF when the destination specifically needs an animated image. Animated exports require Pro. Compare the actual files in our GIF versus MP4 test before choosing a format for a large page or campaign.

Keep a separate still that already shows the product clearly. The open-display still template is a useful starting point; replace its demo image with the same source and review the crop. A still version makes the message available before playback and when someone prefers reduced motion.

For an App Store submission, use Apple’s accepted screenshot dimensions for the selected display. A 1200 × 900 marketing animation is not an App Store screenshot set. The current App Store dimensions guide lists the Duo’s separate inner and outer sizes.

Before you publish

Watch the exported file once from beginning to end. Confirm that both demo images have been replaced, the cover is upright, the inner interface spans the open display as intended, and the smallest important text still reads at the intended display size.

Browse the animated mockup generator for related iPhone, laptop and tablet moves, or return to the Duo folding template.

More realistic Duo scene templates

Linen Editorial gives the wide screen a quiet, tactile background. Use it for a design case study or a launch image where the interface should lead. Keep important text away from the display edges and check it at the size the image will appear on your page.

Stone Gallery uses a slight front angle and a travertine plinth. It works well as a product hero or presentation slide. The perspective is already built in: upload your flat screenshot and adjust its crop inside the display.

For a matching conventional phone, browse the iPhone 18 Pro photo scenes and iPhone mockup library. The scenes use the same demo artwork family, so you can compare their framing before replacing it with your own product.