Customize Image Gallery in WebsiteBuilder

  • 1
  • 1
  • Question
  • Updated 3 months ago
  • Acknowledged
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Inactive Conversation

I am trying to customize an image gallery in WebsiteBuilder.  For example, when I go to Elements and select Images - Image Gallery - Grid, it brings up a two column gallery.  What I would like is a 3 column gallery with perfectly square spaces.  I know it will revert to square, or whatever format I have my images in but I don't like cropped preview or thumbnail images.

How might I go about this?  Please remember that tho I am a longtime SiteBuilder user, I am still a newbie in WebsiteBuilder and I need beginner level instructions!
Thanks!
Photo of Susan

Susan

  • 2,350 Points 2k badge 2x thumb

Posted 3 months ago

  • 1
  • 1
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 17,722 Points 10k badge 2x thumb
Hi there Susan!

You definitely have a lot of control in the Image Gallery options in Website Builder. If you have added your images, click on the Gallery, Click More > Advanced > and you will see a menu pop up on the right. If you then click on Settings, you will see that you can change the Gallery Layout. You can choose how many images show on one page, how many columns you have, along with the spacing between your columns and rows. At the top you will also see that you can set transitions if you want, to have images fade or slide in and out.
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 17,722 Points 10k badge 2x thumb
After you do that, just use the white squares on the sides and in the corners of the gallery to size it the way you want it.
Photo of Susan

Susan

  • 2,350 Points 2k badge 2x thumb
Great! That worked!  Now how do I check the dimensions to make sure the squares are "perfect squares"?
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 17,722 Points 10k badge 2x thumb
That would be a bit more difficult but technically can be done. If you go under "Size and Position" you can change the width and height of the element. For Example, if you have the same number of images per row and per column, the height and width should be the same, but if you have 3 columns and 2 rows, then the width and height should be in a 3:2 ratio. (example: 600 width and 400 height).
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 17,722 Points 10k badge 2x thumb
I would recommend changing the row and column spacing to "0" before doing that. Once you have the dimensions exactly how you want them, then you can go add space in between the pictures. It will make it easier math-wise, so you don't have to try to figure in the row spacing.
Photo of Susan

Susan

  • 2,350 Points 2k badge 2x thumb
ok... sounds like MATH to me!  but I can sure give it a try!
Thanks!
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 17,722 Points 10k badge 2x thumb
Haha! Definitely math but if you keep it simple with increments of 100 or something like that, it shouldn't be too rough!!


Let me know if there is anything else I can help you with! I'm really excited that you are making great strides in using the new builder. I really think it creates a better product!


This conversation is no longer open for comments or replies.