Grid Gallery Title Labels

grid.png

Step One

Insert a Gallery Block on your page, upload your images, and give each image their own title.

Screen+Shot+2019-04-05+at+10.37.18+AM.png

Step Two

From the Design style setting, adjust to your liking. Be sure to add your titles to each image and to enable the Show Title setting.

When done, save the gallery and page.

Step Three

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Four

Copy and paste the code below into the Custom CSS Editor box.

// Grid Gallery Label Titles //

.sqs-gallery-block-grid .image-slide-title {
  background: #000000;
  color: #ffffff;
  font-weight: bold;
  font-size: 13px !important;
  padding: 10px 20px;
  position: absolute;
  bottom: 0;
  display: inline-block;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
  box-sizing: border-box;
}

Step Five

Feel free to adjust the background, color, font weight, font size, and padding to your liking.

Save and refresh the page. 👍

Moov Labs