1. Knowledge Base
  2. >
  3. How To Add A Gallery

How To Add A Gallery

Looking for help for the GATOR Builder by HostGator Website Builder product? Please see GATOR's Knowledge Base.
This content only applies to those using GATOR Builder by HostGator.
Adding photo Galleries, also known as "Slideshows" or "Scrolling Images" to your website can help show off your products, explain your business, or even entertain customers that visit your site. With your Gator website builder, you can easily add image galleries anywhere on your page using the responsive drag-and-drop functionality features. You can also quickly resize or edit the gallery and add effects or behaviors that cause the images to react to your viewers.
 
We could write a whole book about all the ways to edit images; in this article, we will cover the basics of Adding An In Image Gallery, Adding New Images, and Advanced Gallery Settings.

Adding An Image Gallery:

  1. To add a gallery to your website, click the "+ Elements" tab in the left-hand menu and then click Images.

    User-added image

  2. A menu will appear that will let you choose which type of image you’d like to place on your site — select Image Gallery.

    User-added image
    Pro Tip: Selecting a single Image is what it sounds like, ONE single image that you can drag around the page and place where you would like. See: Adding And Editing Images (VIDEO) A Gallery, is also known as a "slideshow" or a "scrolling image gallery." Icons are great for when you want to add emphasis to text like adding an envelope icon next to your contact email, for example.

  3. Once you select Image Gallery, a grid of 4 stock images will appear in the main design dashboard.
  4. Drag the Image Gallery to its desired location and click the gallery to "set."

    User-added image

  5. Once you set your gallery on the page, a menu will appear that will let you choose your image source.
    • Selecting "Facebook" will try to pull from your linked profile albums.
    • Selecting "Instagram" will try to pull from your linked profile albums.
    • Selecting "Add Images" will try to pull from your already uploaded images.
  6. For this example, we will select add Images which will allow us to upload photos from your computer or select images already on file.

    User-added image

    Pro Tip: Before we add new images, let's take a look at the stock images that appear by default in every gallery.
    • The left-hand column is where you will see all the images in this gallery.
    • The three stacked dots to the left of each image allow you to reorganize your photos by dragging up or down.
    • The checkboxes allow you to hide an image in the gallery by unselecting a box.
    • Clicking directly on an image in the left-hand menu will show the Image Details to the right-hand side.
    • Clicking the Trashcan icon to the right of each image will delete that image from the gallery.
    • Clicking on an image in the right-hand menu will allow you to change the Image itself.
    • The right-hand display is where you add SEO details like Titles, Descriptions, and ALT tags.

    User-added image


Adding new images to your Gallery:

  1. To add new images, select the Add Images Selection to the top right of the pop-up.

    All images added to the gallery will be in the left-hand column of the Manage Gallery pop-up. More than five images will create a scrollbar effect. If you upload your pictures in the wrong order, it's easy to rearrange the photos to create a nice flow.

  2.  

    Clicking Clear Images will remove all the images in the gallery but not remove the gallery itself.

    User-added image

  3. Once you select Add Image to the top right, a window will appear showing you the four places you can pull an image onto your website; either uploading your own, selecting a link image, picking from your saved images, or choosing from thousands of stock images courtesy of Unsplash.

    • Stock Images means you would like to browse through available images within the builder.
    • My Images means you would like to choose an image you have already uploaded.
    • Linked Images means you'd like to pick an image with related properties.
    • Add Image means you would like to Upload New Images to the "My Images" section.

User-added image

For the rest of this example, we will be working from the "Add Image" selection and using four identical purple gradient images.


Uploading:

Once you choose the Upload Images button, you'll see a familiar system pop-up asking you to select which images you'd like to upload from your computers hard drive.

  1. Select the image(s) you would like to upload and click the "Open" button from your system menu.

    Pro Tip: This step is relatively universal; however, the look of this step varies depending on the age and type of computer you have.

  2. You should now be back in your My Images section where you will see all the image(s) you have uploaded.

  3. Select an image to add to your Gallery by clicking on the photo. (A checkmark will appear over your selections.)

  4. Click the Place button to add it to the Gallery within the website builder.

    User-added image

  5. Once you have made your gallery edits, click Save to retain the information and land back in the main design dashboard.

    User-added image

  6. You'll now see all the images you selected from the My Images list.

    ​​User-added image


Advanced Gallery Settings:

Although there are a lot of the same options in the Advanced Settings as there are in the Image Toolbar, above the Gallery, you can adjust a few more settings from this section.

User-added image

Some of the more essential options are:

  • Change Gallery style between Grid, Columns, or Rows.
  • Change Gallery Design or Look.
  • Change overall Settings like Gallery Transition Speed and Alignment.
  • Change Style, including Color's, borders, and background.
  • Change Size and Position manually, including Width and height.
  • Add Animations like "flip" effects or "fade in" effects.
Pro Tip: Over time, you'll find that there are many settings available to choose. As you will see, the more you use the builder, the better you get at it. Be sure to test out a few things until you become familiar with what you can/can't do.