How to Create Device Mockups for your Website

With Flipsite’s Device Mockup component, you can showcase your screenshots inside laptops, phones, or tablets — no Photoshop required. Here’s how to get started.

Step 1: Add a Device Mockup Section

From the Add Section panel, choose a layout that includes a device mockup. This will insert a ready-made component into your page.

Step 2: Upload Your Screenshot

Open the mockup in the tree view. Inside, you’ll find a container for your screenshot. Upload your app or website screenshot directly here.

Step 3: Change the Device Frame

Want a different device? Select the device mockup and replace it with another frame (e.g., phone, tablet, or laptop). You can even upload your own custom device image and define the screen area.

Step 4: Add Animations (Optional)

To make your presentation dynamic, apply animations or transitions. For example, set the screenshot to slide in when the section scrolls into view.

Step 5: Preview and Publish

Preview your project to see the device mockup in action. Once you’re happy, publish — your website now looks polished and professional.