How to Add Image Gallery in Weebly Site?

Gallery is the collection images to showcase your portfolio and other works on your Weebly site. Weebly offers a default “Gallery” element to easily upload a set of images and automatically create a beautiful gallery. In this article, let us explore more on how to add image gallery in Weebly site.

Gallery Options for Weebly

You can use one of the following ways to add gallery in Weebly site.

• Using default gallery element.
• Using default gallery element inside section element.
• Creating custom image gallery with sliding effect.

1. Using Default Weebly Gallery Element

Login to your Weebly account and go to the editor. Weebly gallery element is available under “Build” tab and classified under “Basic” group of elements.

Drag and drop the element and upload the images to create a gallery. We recommend to have similar size for all images so that it will look professional.

There are two customization options available for gallery element – first is at individual image level and the second is at gallery element level. Click on the individual image to add caption and link.

Then click on the gallery (just outside the images) to see the popup box like below showing various options.

• Adjust the number of columns for your gallery.
• Adjust top and bottom margin spacing.
• Caption option allows you to set how the image should look when clicked on. You can simply choose the lightbox option or choose to display thumbnails also. You can also switch on “Display Caption on Hover” option to show the caption when moving the mouse over the images.
• The advanced options allow you to set image spacing, border and image ratio.

Check the preview of the gallery and publish your site. Below is an example of how the gallery will look like on a published site with four columns:

Individual images can be removed or added to the gallery at any point of time after publishing the site.

2. Using Section Element

The above method will create a gallery with plain white background. You can use “Section” element to create a full width element and add gallery inside. In this way you can add an image, color or even a video background (if you are a pro user) to your gallery images.

Instead of using gallery element, you can also use image element to create a gallery effect as shown in the below picture.

The gallery with a parallax scrolling effect on a background image will give wonderful look to your site.

3. Custom Weebly Gallery Widget

The last option is to create a custom gallery widget. We recommend this only if you do not want to use the default options and want to have additional features. Below is the sample custom gallery widget for Weebly site with sliding title and description.

• 
• 
• 

• 
• 
• 

First, go to “Pages” tab in Weebly editor and select the page in which you want to add the gallery. Go to “SEO Settings” and paste the following CSS code in the “Header Code” box.

.wrapper {
width: 100%;
text-align: center;
}
.galery {
display: inline-block;;
position: relative;
width: 200px;
height: 200px;
padding: 0;
margin: 10px;
border: solid 10px #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}
.galery img {
width: 200px;
height: 200px;
}
.caption {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
z-index: 10;
}
.caption::before {
content: attr(data-title);
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 0;
font-size: 24px;
background: #ffffff;
overflow: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.caption::after {
content: attr(data-description);
position: absolute;
bottom: -0;
left: 0;
width: 200px;
height: 0;
font-size: 1.1em;
font-weight: 400;
line-height: 1.4em;
color: #fff;
background: #222;
overflow: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.caption:hover::before {
height: 100px;
padding-top:10px;
}
.caption:hover::after {
bottom: 0;
height: 100px;
padding-top:10px;
}

Now, go to “Build” tab and insert the below HTML code using “Embed Code” element.

<ul class="wrapper">
<li class="galery">
<a class="caption" href="#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
<li class="galery">
<a class="caption" href="#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
<li class="galery">
<a class="caption" href="#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
</ul>
<ul class="wrapper">
<li class="galery">
<a class="caption" href="#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
<li class="galery">
<a class="caption" href="#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
<li class="galery">
<a class="caption" href="#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
</ul>

Customizing the Gallery Widget

This widget uses 3 columns and resize the images to 200px by 200px. You can change the wrapper and image sizes to adjust the columns and fit the images inside. Ensure to have 50% of the image height for the hover effect – we used 100px as the image height is 200px. Individual image can be linked to any webpage, we have used # for all “href” attributes, change # to required target URL.

Publish your site and see the custom gallery in action.

Learn more on creating portfolio page using gallery element. Also, if you are looking for image filtering widget, then check out the article on 3 columns image filtering widget for Weebly.