1. The Image Grids
The image grids are found in the 'Layouts' section of the left sidebar. You can choose to display a 2,3 or 4 image grid.
This elements are specially useful if you want to neatly display several images side by side.
It is recommended that you resize all images to the same sizes, as the grid containers cannot be resized.
2. How to Add Images to the Grids
Click on the first image on the grid and open the "Background' section in the left sidebar. Then hover the mouse over the Designrr logo until you see the 'Change Image' option. Click on it.
3. Selecting the Pictures for the Grid
In the 'Images' section click on the picture or image you want to add to that cell and it will be automatically added.
Click on the other sample image to activate it and repeat steps 1.2 and 3.
4. Image Sizes
As it was mentioned at the beginning of this tutorial is a good idea to have all the grid images resized before you add them to each placeholder.
In the 2 image grid we have used two images of 325*325 pixels each
In the 3 image grid we have used two images of 150*150 pixels each
In the 4 image grid we have used two images of 100*100 pixels each