In this tutorial, we will add a gallery to our Wix website, which we have created from a blank template. Starting from scratch is a great way to learn the basics.

Unlike the Wix templates that are not interchangeable, you can switch gallery types for a new look at any time. There are many types of galleries, from Masonry grid to Honeycomb. Each gallery has its own features. Let' s take a look at the basic Grid (portrait) gallery.

1. Click the Plus icon in the left menu and choose Gallery from the list.
   
   
2. Hover over each gallery thumbnail to see a preview and description.
   
   
3. Now, drag the Grid gallery to the page.
   
   
4. Use the Resize Handles to resize the grid as you wish. I resized the grid to the 980 page width.
   
   At this point the gallery has some placeholder images. Let's keep them for now and work on customizing the gallery settings for our needs.
   
   Grid Gallery Settings
   
   Image Scaling - You have the option for your image to be cropped or scaled to fit within the frame. The Autocrop setting will automatically crop the images to fit the frame and the Fit option will resize the image to fit within the frame.
   
   When Clicked - You have three options for what happens when a gallery image is clicked. One option to for nothing to happen. The second is to have the image open as a pop up. The third is to open a link. Most of the time, the pop up is a good choice because the image is displayed at a larger size. But if you want to send the visitor to another page, use the A Link Opens option.
   
   
5. Select the Gallery and click the Setting icon in the pop up menu.
   
   
6. In the Grid Settings window, find the How Do Images Behave section. Choose Autocrop or Fit.
   
   
7. In the When Clicked section, set one of the three options.
   
   Gallery Design
   
   As mentioned above, you can switch gallery designs at any time. But let's continue by customizing our grid design. For the grid design, we can customize the border, corners, shadow and text.
   
   
8. With the gallery still selected, click the Design icon (paint brush).
   
   
9. For the Border settings, we can change the color, opacity and width of the border. Let's keep the default setting of the width set to 0 and therefore no border.
   
   
10. Corner Radius - Click the icon for the Corner Radius and set the top left corner radius as you like. As the link icon indicates the other three corners will update to match.
    
    
11. Shadow - Select the Shadow icon. To add a drop shadow, click the Enable Shadow toggle and set the Angle, Distance, Size, Blur and Color/Opacity for the shadow.
    
    
12. Text - Click the T icon to set the options for the Title, Description and Other text settings. Let's change the text from the default to our Paragraph 1 text theme. Repeat for the Description text.
    
    Layout Settings
    
    For the Grid gallery design, we can control the number of columns and rows for the thumbnails. We can also control the spacing between thumbnails and how the text is displayed over the image.
    
    
13. With the gallery still selected, click the Layout icon from the pop up menu.
    
    
14. Use the slider to set the number of columns and rows. Adding more columns and rows will result in smaller thumbnail images in the grid.
    
    
15. You can use the Spacing slider to increase the amount of pixels between thumbnails. Adding more space will reduce the size of the thumbnails.
    
    
16. Under the sliders is the text alignment section. You have the option for the text to display left, right or center.
    
    

Screenshots used by permission of Wix.com, Inc.