How to add a box to contain your text or pictures

Use nested layouts in ProSite's Site Builder to create uniform, styled boxes - ideal for displaying images side by side at equal height and width.

Create the outer layout

1. Launch the Site Builder tool from your cPanel.
2. Go to the page where you want to insert your image box.
3. Drag a single-column layout onto the page. Set it to Horizontal so that items sit next to one another along the horizontal axis.

Add and size the inner layout

4. Drag a second single-column layout onto the page and drop it inside the outer layout you just created.
5. Give this inner layout a fixed size - for example, 300px for both height and width.

You should now have an outer layout containing an inner layout at your specified dimensions. You will use this inner layout to hold a background image.

Set the background image

6. Select the inner layout and add a background image. Centre the alignment, turn off auto-sizing, and set the image to fill the entire layout.

Style the box

7. Optionally, add a border to the layout. Set the border style, width, and colour.

8. Optionally, set a corner radius. If the layout is perfectly square, using the maximum radius will make it appear as a circle.

9. Optionally, add a shadow to the layout. Adjust the Distance, Size, Blur, and Colour settings to your preference.

Your image is now contained within the styled layout box.

Add more images

To add a second image in the same style, duplicate the inner layout and replace the background image.