How to create this design in 7 steps

Step 1

From the Add panel, under Wireframes, drag an option from the Mondrian list into a blank section.

Step 2

If you’d like to replace the placeholders with your own content, select the largest image, then click Change Image. Repeat this for the smaller image. Update the text elements too. Note that wireframes come with built-in responsive presets, meaning they will behave fluidly across breakpoints.

Step 3

Place 2 text elements on top of the largest image and customize what they say. In the Inspector panel, use the position box to control their placement.

Step 4

Add rounded corners and padding to the smaller image. To do this, open the Inspector panel and, under Corners, add a radius of 50px all around. Using the position box, add 4% padding to each side of the image.

Step 5

Add another blank section. Drag a different wireframe from the Mondrian options into this section. Customize the images and text.

Step 6

Add a final blank section. From Wireframes, drag one of the Footer options into this section. Customize the content here too.

Step 7

Click Preview and resize the canvas to review the design across breakpoints.