Now that you’ve learned how to create a square or rectangle box as a text and image container, as well as align the boxes, let’s try creating different design layouts using squares and rectangles.
Example 1 – Grid layout
This design is similar to the grid photo gallery layout, but instead of displaying all images, we’ve have also added a few text blocks in the mix.
You would often see this design used for both visual effect as well as navigation – you can use the boxes as a button that links to different pages on your website.
For this design, you will create a mix of text and image containers. The easiest way to create boxes that are uniform in dimensions is to create the first box and then use the Copy function to copy the shape as many times as you need.
1. Click on the shape and right-click on your mouse to open the secondary menu and select Copy. (You can also use the ctrl + C command to copy the element)
2. Right-click anywhere on your web page to open the secondary menu and select Paste. (You can also use the ctrl + V command to paste the element)
3. Drag and drop the copy in the desired location on your web page.
4. Continue if needed for additional copies of the same shape.
Once you have created all the boxes you need, you can use the Position Adjustment tool to align the boxes row- and column-wise. Simply highlight the boxes and the Position Adjustment panel will open and you can then select the desired alignment options.
Example 2 – Fancy shapes
This design is essentially the grid layout but with a little twist. We have added a shadow as well as corners to the boxes.
Adding rounded corners to a box shape:
It’s recommended that you add corners to the box shape before adding the text or image content.
1. Once you have created the box shape, click on the box to open the Box panel.
2. Select Style.
3. Click on the Border tab.
4. If you want to create a rounded effect on all 4 corners of the box, use the Corners slider. This will create an equal rounded corner effect on all 4 corners of the box.
5. If you want a rounded corner on only a selected corner, then you can use the up/down arrow or enter a numeric value on the respective corner(s).
Adding a shadow to a box shape:
It’s recommended that you add the shadow to the box shape before adding the text of image content.
1. Once you have created the box shape, click on the box to open the Box panel.
2. Select Style.
3. Click on the Shadow tab.
4. Use the color picker to select a shadow color.
5. Use the Horizontal offset slider to set the horizontal offset of the shadow. You can also enter the numeric value, in pixels, in the text field provided. A positive value means the shadow is drawn to the right side of the shape; a negative value means the shadow is drawn to the left side.
6. Use the Vertical offset slider to set the vertical offset of the shadow. You can also enter the numeric value, in pixels, in the text field provided. A positive value means the shadow is drawn below the shape; a negative value means the shadow is drawn above.
7. Use the Blur slider to customize the blur radius. You can also enter the numeric value in the text field provided. The blur radius defines how big and how much blurred the shadow is. A larger value makes the shadow lighter, and a value of 0 makes the shadow’s edges sharp.
8. Use the Spread slider to customize the spread distance. You can also enter the numeric value in the text field provided. The spread distance makes the shadow bigger (ie. expand) in all directions.
Example 3: Polaroid Frames
This design is essentially creating a box shape large enough to contain both image and text.
1. From the left menu, click Add.
2. Select Shapes.
3. Select the filled box shape under Box.
4. Drag and drop the shape to the desired location on your website. You can drag the corner handles to resize the shape.
5. Changing the background color of the box: Click on the shape to open the Box panel. Select Style.
6. Click on the Background tab to change the background color of the box.
7. Click on the color box to open the color picker. Select white as the box’s background color.
8. Adding a shadow to the box: Click on the shape to open the Box panel. Select Style.
9. Using the option sliders, set the desired shadow for the box. For example, in our example, we have used the following settings:
10. Adding image: From the left menu, select Add > Image.
11. Select the image style you want to use. Drag and drop the placeholder image into the box you’ve just created. Drag the corner handles to resize the image. Ideally, you will want to leave some space between the image and the box, with a large white space underneath the image for your text.
12. Click on the image to open the Image panel. Click Change Image. This will open the Image folder in your File Manager where you can select the image you want to use.
13. Aligning the box and image: Highlight the image and the box by holding the ctrl key while clicking on the box and image. This will open the Position Adjustment panel. Select Center to align the center of the box and image.
14. Adding text: From the left menu, select Add > Text
15. Select the text style you want to use. Drag and drop the text container into one of the boxes. You can drag the corner handles to resize the text container.
16. Click on the text container to open the Text panel. Click Edit Text to replace the placeholder text with your own text and use the text toolbar to make formatting changes to the font or text.
Repeat the above steps to create additional polaroid frames on your website (or you can simply use the copy and paste method to make identical copies of the polaroid frame you’ve already created). Make sure to use the Position Adjustment tool to align the polaroid frames:
- Aligning polaroid frames in a row: Select Top to align the tops of the polaroid frames.
- Aligning polaroid frames in a column: Select Left to align the left of the polaroid frames.
 Stock Forecast & Price Prediction 2025, 2030 | CoinCodex)