Find us online
WebWave drag and drop website builder lets you create unique websites. You can build your website from scratch by starting with a blank page, or choose various website templates from our free collection and modify them according to your needs. With WebWave website builder, you have a complete website design and hosting system at your fingertips.
In website builder WebWave Image grid is similar with functionality to a photo gallery. The difference between them is that photos are presented in slightly another way. In this tutorial you will find out how to make a website with an effective image grid.
Add Image grid to your website
Change photos order in image grid
In order to add image grid to your website, select Image icon from the toolbar on the left side of the builder and choose the last icon.
Next click right mouse button on image grid then choose option "Change images". From "My images and files" select pictures that you want to show up on image grid by clicking on them and clicking Add to images grid. If they are not in "My images and files" yet, add them from your hard drive by clicking "Select files" on right top corner of images menager.
Change image grid size the way you want to and photos will proportionally and symmetrically follow.
Image grid minimum size is only limited by its thumbnails. By setting the smallest image grid size all the thumbnails become visible but there is no space between them. If you want your image grid to be even smaller, change thumbnails size.
After clicking on your image grid you will able to set in pixels image grid's thumbnails width and height through the "Image grid size" section in the "Settings panel → Element ".
You can also choose the way thumbnails will be displayed in the image grid. Choose crop type. "Crop" means that an image will fully fit the image grid and will get cropped. "Fit" means that the whole thumbnail will be displayed but it might not fill out the whole space.
After clicking on Image grid you will see "Image grid settings" in the Settings panel.
You can set there:
You can also change the layout of your Image grid in the item settings. You can choose between:
In order to add photos to image grid, click on it and select "Edit content" from image grid settings in Settings panel.
On the top of a new window select "Media library", choose photos and press "Add image grid" at the bottom of the window.
More about media library read here.
In order to remove photos from image grid, click on it and select "Edit content".
Select a picture which needs to be removed and in "File details" choose "Remove from image grid".
Click on image grid and select "Edit content".
In this window select a photo, drag and drop it in a place where you want it to be.
Select the image grid, and then in the "Edit" section, select "image".
Click on the specific image which you want to set the click action, then in the settings panel go to the "Click action (link)" section and select the action you are interested in.