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 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 in one of the following ways:
- Using default gallery element
- Using default gallery element inside section element
- Creating custom image gallery with sliding effect
Add Image Gallery in Weebly Using Default Gallery Element
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.
- Adjust the number of columns for your gallery.
- Adjust top and bottom margin spacing.
- The caption option allows you to set how the image should look on 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.
View 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 image can be removed or added to the gallery at any point of time after publishing the site.
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.
Custom Weebly Gallery Widget
The last option is to create a custom gallery widget. We recommend this only if you want to use one or two gallery on your site. Below is the sample custom gallery widget for Weebly site with sliding title and description.
The complete CSS and HTML code is given below which you can embed using “Embed Code” element. As a good practice, paste the CSS (between style tags) under “Header Code” section of the page and embed HTML code using “Embed Code” element.
<style> .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; } </style> <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.
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.
2 Comments
Leave your reply.