24/7/365 Support(866) 96-GATOR
  1. Knowledge Base
  2. >
  3. Adding And Editing Images (VIDEO)

Adding And Editing Images (VIDEO)

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.

With your Gator website builder, you can easily add images anywhere on your page using the responsive drag-and-drop functionality features. You can also quickly resize or edit the image and add effects or behaviors that cause the image to react to your viewers.

There’s a whole book that could be written about all the many ways to edit images; in this article, we will cover the basics of finding the Elements, how to Upload your content and how to adjust image Settings. Below is a video walkthrough on how to search stock photography images as well.


Adding an Image to your website builder from Elements:

  1. To begin, start by clicking the + Elements tab in your builders Left-Hand Menu.

    User-added image

  2. A pop-up menu will appear with all the available elements you can use — select Images.

    User-added image

  3. From the next Images menu, select either: a single Image, a Gallery, or an Icon.

    Pro Tip: Selecting a single Image is precisely what it sounds like, ONE single image that you can drag around the page and place where you would like. 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.


Selecting/Uploading an Image:

Once you choose what type of image element you want to add, 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.
 

User-added image

  • Stock Images means you would like to browse the available images within the builder.
  • My Images means you would like to select an image you have already uploaded.
  • Linked Images means you'd like to select an uploaded image with linked properties.
  • Add Image means you would like to Upload Images to the My Images selection.

For the rest of this example, we will be working from the Add Image option and uploading a new purple gradient image.

Uploading:

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

  2. 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.

  3. You should now be back in your builder where you will see the image(s) you have selected to upload.

  4. Select an image to add to your design by clicking on the photo. A checkmark will appear over your selections.

    User-added image

  5. Select the Place button to add it to the page within the website builder.

    User-added image

  6. Once placed, you can drag and drop the photo to is desired location or resize it by clicking and dragging on the corners of the image.

  7. Multiple images will be stacked together, which you can drag to separate.


Settings:

When you click on an image from within the builder, a toolbar will appear over the selected image with some essential tools (icons) to adjust your image.

  • Change Image
  • Crop & Edit the image
  • Link Image to a page or URL
  • Add Overlay (or layer over the image, usually a color)
  • Add a Border
  • Change Border Width
  • Change Opacity
  • Add Animation
  • Bring Element to the front (above other elements)
  • Send Element to the back (put it behind another Element)
  • Duplicate Element
  • Delete Image
  • More Options
  1. Click on More from the image to reveal an expanded toolbar.

    User-added image

  2. A Larger menu will appear over the selected image with some more tools to adjust your image.

From this Larger Toolbar, you can:

  • Change the Layout of the image
  • Fit image to a Frame
  • Align the image perspective
  • Change Visibility
  • Change where the image Docks on the page
  • Change image Background Color
  • Adjust Border Radius around an image
  • Add Drop Shadow
  • Add Glow
  • Advanced Settings

User-added image


Advanced Settings:

Although there are a lot of the same options in the Settings as there are in the Image Toolbar, you can adjust quite a bit more settings from this section.  Some of the more essential options are SEO elements, behaviors or style, size & position. Below we will cover how to add image ALT TAGS.

  1. To add image alt tags, click Advanced within the expanded image toolbar and a pop-up will appear to the right.

  2. Click the Settings button and scroll down to Element SEO option.

    User-added image

  3. Here you can add alt tags, or even behaviors like different navigation, such as expanding the image when clicked.

  4. After you’ve made your necessary changes, click the Finish button. You're Done!

Pro Tip: Over time, you'll find that there is a lot of settings available to choose. As you will see, the more you use the builder, the better you get at it.

So the best recommendation we can make is to start by getting in there and testing all the options to see what they do. Add a test image, run through the settings, change things. Delete the image when you're done. As you become familiar with what you can,/can't do and new ways to go about customizing your Elements, remember, this builder is always changing and growing.

Sometimes we may add, change, move or remove a portion of your builder but rest assured, our goal remains to provide you an easy-to-use, simple-to-learn, real drag-and-drop builder experience.