How to Create a Portfolio Thumbnail Gallery Page

Artist portfolios often have a selection of thumbnail images on one gallery page, or multiple pages. For this tutorial, I will show you how to create one of these pages using Webydo, then setting the images to open up in lightbox view when clicked.

Before attempting this tutorial, it is important to decide how you would like your final portfolio to appear. This will obviously depend on the number of images you plan on displaying, and whether they can be categorized. Take a look at other artist websites, and see how they have their pages setup.

Most portfolios are setup in either of these ways:

• A main portfolio menu is used, often having a dropdown menu linking to various categorized pages.
• Create a page of thumbnails, which are linked to various pages of your portfolio.
• If you only want to display your best pieces, you can show them all on one page – and having them appear in a lighbox when clicked. This is the method we will be using for this tutorial.

 

How to Create a Portfolio Website Series

These are the previous posts in this website building series:

Part 1 - Build a Classic Artist Portfolio Website
Part 2 - Creating a Slideshow

How to Create a Portfolio Website Page with a Gallery of Thumbnail Images

1. Open the Webydo website builder, and open up the Portfolio (or Gallery) page. Select this page in the Pages menu at the top of the CMS.
   
   
2. First, insert something in the “Insert your Slogan” box. Double click the box containing this slogan until the border is a dotted line. Select the text that’s there, and delete it. Then enter a phrase of your own.
   
   Change the font and size of this text at the top, as displayed in the screen capture. Here, you can choose from hundreds of fonts. I selected Oswald for the font.
   
   Also change the size of the font to the right of this, if you think it’s too big.
   
   

3. Organizing your portfolio

   
   Double click the first box with the image icon. A popup should appear to upload an artwork.
   
   
   
   When the image uploads, it appears very large. To fix this, enter the dimensions of the original box in the menu at the top.
   
   
   Click the lock icon to unlock the image dimensions. Insert 300px for the width and 150px for the height, then click the lock icon again to lock it.
   
   You will probably notice that the image now only displays a part of the artwork. This can be fixed by adjusting the settings in the properties panel to the right. Change the position and fitting options until you get a desired look.
   
   I like the display of only a small detail of my painting, as people will have to click to see a larger image. With the image selected, adjust the settings at the top. Near Link to, select “Pop up”.  Now, the full image will display in lightbox view when the image is clicked.
   
   To have the image lead to a separate portfolio page or link, simply choose those options in the same Link to menu.
   
   

4. Title and Paragraph

   
   Edit the title or remove it by deselecting Text caption at the top. Then, either fill in a few details about the artwork below, or delete the paragraph box if you just want images on this page. Here is my completed portfolio page:
   
   
   
   

5. How to add more images to the page

   
   It is very easy to add more images to this page. First, adjust the height of your page by dragging the bottom part of your page downward. Hover your cursor over the blue line separating the main part of the page, and the footer. A cursor turns into a double arrow. Simply hold down the button on your computer, and drag to increase the page size.
   
   Next, select all the images and text boxes (or just a set of 3) by dragging a selection box around them. When they are all selected, right click and choose Group from the menu.
   
   Select the group, right-click and choose Copy from the menu. Then, right click on the blank area below and choose Paste. Drag the group and position it till it is in line with your other images.
   
   The same Group function can be used to efficiently move all your images and text upward, so that there is less of a gap between your title and the portfolio.
   
   

 

That’s all for this part of our tutorial on creating a portfolio website using Webydo. If you need more help with learning how Webydo works, please watch all their very informative training videos. Find these by going to the Help menu at the top right, and select the first option – Video Tutorials

We have also written other articles covering the basics of Webydo:

Design a Website with Webydo
How to Create an Online Store

If you have any questions at all, please don’t hesitate to ask them below.