Skip to content
Close

Device Mockups

Mockup Image on the left or right side, or on the bottom to stack the layout. Flexible image and content size.
More control for mobile layouts.

MOCKUP RIGHT

The full width setting allows the image to touch the edge of the screen while keeping the padding for the rest of the module. The image will stack below the text on smaller screens.
mockup-01-3

MOCKUP LEFT

With the mockup on the left, the image would be above the text on mobile, with this module the option to hide on mobile is selected. There's also an option to flip the order on mobile so it would be above.
mockup-laptop-2-compressed

MOCKUP RIGHT

Whaaat? Can't believe what you are seeing? Rub your eyes as long as you want. Easily create device mockups with all the flexibility to control the layout that you're looking for.
mockup-computer-2

MOCKUP LEFT

Choose how to align your content vertically, whether you want to align at the top, center on the image, or align to the bottom. Separately control the horizontal alignment for desktop and mobile for both the text and image to create the perfect layout.

mockup-02

NEW MOCKUP BOTTOM

Now you can create a stacked layout for desktop to include the mockup below the text. Combined with the alignment settings, it's easy to center your content.
001

DEVICE MOCKUPS END HERE

And now it is time to click the button below