1. Knowledge Base
  2. >
  3. How To Use Containers

How To Use Containers

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.

Some essential design elements of most any website found online are containers and boxes. Put, containers, and boxes can be broken down into HTML code that encloses different forms of data. Which helps explain to computers how to display that data such as individual files, images, and other computer code that is written in a specific way.

In this article, we will discuss a little about when to use a container or box as well as how to do so. Luckily for you, adding Containers is as simple as “drag and drop.”

When To use a Container or Box:

The idea here is to create a section that has a separate place for content. If you have a new product you developed for your website that has its youtube video, facebook page, images or downloadable user guide, you may want to put all that content into one location on your page. If you put all of this into a Container box, it will be held by that container allowing you to drag that box to different parts of your pages and all the content you added to it will move with it, as it was, instead of individually.

You can add a container to include "Tabs" which are similar to a scrolling image gallery in that you can add multiple boxes to a Container. When working with a Container, it will first appear as a square shape as you will see below.

Adding a Container:

  1. To get started with Containers, navigate to the “+ Elements” tab in your left-hand menu.

    User-added image

  2. Click the type of Container you’d like to add to your website and place it on the page.

    User-added image

    Pro Tip: The significant differences between “Boxes” and “Tabs” in the Containers Section is that “Tabs” implies you will have multiple “Boxes” of content.
  3. Once added to the page, the box will appear as a square shape.

    User-added image

  4. Add Elements like social media, emails, photos, and text to the box to fill up the container.

    User-added image

  5. Clicking a corner will give you the ability to resize the Container using the small squares that appear.

  6. If you click and hold the Container, your cursor will turn into a crosshair allowing you to drag the container and its contents anywhere on the page, in one motion.

    User-added image

  7. Once you place the Container on your page where you would like it, you can change the design of the box, the opacity, the color, add an image, or do anything else you need to make it right for your website.

    User-added image

    Pro Tip: There are endless possibilities for why you would use a container that usually reveals themselves out of necessity. Ultimately, the more you play with your builder, the better you will get at what you can/can not do. Always test out different elements before finalizing and publishing.