We’re going to look at the Gallery section type in this lesson. This is a great tool for introducing your team members. It’s not just limited to your About page. You can use this same technique for creating your online portfolio, showcasing products, or any other place where you want to use images to draw people in.
Meet The Team (With A Gallery)
Using a Gallery section creates a visually attractive and engaging way to introduce the world to your team. When the visitor hovers their mouse over the image, the content appears showing the persons name and a quick bio. You can also link that image to another page. So, for example, the picture of the instructor could link to a page of all the instructors classes. Or, if you were using a gallery like this to showcase some of your products, you could have the image link to a page to get more details on the product that was clicked.
There are a few features to look into for making great use of the Gallery section. Here’s how it works.
First, click Gallery in the Page Builder to create a gallery section on your page.
That will create an empty gallery section to work with.
By default, you will get 1 row of 3 columns. Just like with Content sections, you can change the number of columns. You can also click the + Add new item button to add more pictures to your gallery. If you have 3 columns, it’s nice to add pictures in groups of three to fill up all the space.
If you only had 4 pictures to display, it would be better to change the Gallery section to have 2 columns and then have 2 rows of 2 columns each. On the Fit Band site, we have 2 rows of 3 columns.
There are a couple things to note about how we set up the Fit Band gallery.
The section title provides a place to put a heading for the section you are creating. The section title is optional and I don’t usually use it on the topmost section of a page. It tends to be best used to divide one section from the next.
To make sure your pictures are displayed in the gallery as cleanly as possible, it’s important to make sure you have the images that are in the correct aspect ratio for your gallery. For the Fit Band website, we used a square aspect ratio. So each of the images of the instructors was cropped to square before included in the gallery.
For the Fit Band website we chose the light caption color which means the background is light and the text is dark when you hover your mouse over one of the images. The other option is to have a dark caption background with light text which looks like this.
The Image Caption
To add the text that shows up when you hover the mouse over the image you click the 3 dots and then the Edit Content button.
That will reveal the editor where you write the content. Note, for the Fit Band website we used Heading 2 for the instructor’s name and Paragraph for the instructor’s bio.
Item Title and Link
There are two other features of the gallery item that we are not using on the Fit Band website but that you should know about incase you would like to use them. Each gallery item can have it’s own title and each item can link to another page (or even another website). You get to these settings by clicking the Configure Item button.
Gallery Item Title
The Fit Band website uses the Heading 2 for the instructor’s name, but we could have used the Item Title text field of the gallery item. To show you the difference, here’s an example showing both the Item Title (on top) and the Heading 2 (below).
Item Link URL
The gallery image can be linked to a page on your website or to an entirely different website. Just enter the URL for where you want people to go when they click the image in the Item Link URL text field. If you want the link to open up in a new tab select the checkbox to Open link in new tab.
Get Tips Like This In Your Inbox
If you liked this post, get more like this one emailed to you.
We respect your privacy. Cancel anytime.