1. Knowledge Base
  2. >
  3. Design With Elements (VIDEO)

Design With Elements (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.

The +Elements in your website builder are the "bread and butter" of your design tool. Primarily, the core amount of your time will be spent finding, changing, adding, and replacing different elements to make up the general look of your website.

In this article, we will cover the basics of Designing with Elements as well as What Elements are available in your Gator website builder. You can also watch a video walkthrough of this article below.

Designing With Elements:

With your website builders +Elements, you can add different aspects of your website to make each page contain the features you need.

  1. You can access the + Elements menu by searching for it in the left-hand menu when you first land in your design dashboard.

    User-added image

  2. From the Elements menu, you can add photos, maps, videos, shapes, buttons, contact forms, and so much more.

    Keep reading to find out more about the Elements menu.

Elements Menu:

User-added image

You can browse through the +Elements several ways:

  • Search for what you need at the top right search bar,
  • Click on the item you’re looking for on the left to jump to that item on the right menu.
  • Scroll through the items in the right menu to see more options in each element.

User-added image

  • When you have selected an element to add, you may see more Element options.
  • Click or drag and drop the element option to where you want it on your page.

User-added image

  • Click the Element to Set it on the page. 

User-added image

  • Once you set an element, it's Toolbar will appear either above or below.

Each Element has some additional settings that you can access from the element toolbar. Other configurations are available by clicking the More and the Advanced options which will vary depending on what Element you are editing. 

Pro Tip: Over time, you'll find that there is plenty of settings available to choose. As you will see, the more you use the builder, the better you get at figuring out what you can and cannot do. We will elaborate on settings of each element in different articles, but for now, be sure to test different settings to see what they do.

The Elements:

Here is a breakdown of each element, with an example of how you could use it on your website:

Element NameWhat is it?Why Use It?
ButtonsButton elements give visitors clickable content. This simple element is customizable in appearance and usually takes your audience elsewhere on your site; like to a store or an external link.You may have seen a "shop" button when visiting an eCommerce website or clicked on a button to download a document or video. Use buttons when you want people to click things.
ContactThese elements can vary from an email address or mailing address to a phone number, street address combination. You can also choose to only include social media, contact forms, or all of the above!These elements specifically provide the audience with ways to reach you or your business. These elements give people a dedicated way to contact you.
ContainersThis element is essentially a ‘section within a section.’ A container is a colored shape used to add elements together and contain the contents while also separating them from the rest of the page.Containers can be used to separate columns of text, graphics, etc.  When editing a container, you're able to make changes to the elements within the container without rewriting the entire web page.
See also:  How To Use Containers
FilesA separate way to add downloadable content or forms for your audience to download.Have an ebook or a brochure? Having your readers fill out a form before downloading your giveaway will help you manage consumer data. Ask anything from name and email, to how they heard about your website.
HTML/Page Embed*Here you can add any number of external elements and applications.  Embed videos, add calendars or music players that appear on your page.You can run a simple code, add metadata, and widgets to your site.
*We are unable to provide support for third-party applications.
See Also: Add HTML code To Website
ImagesHere you can add and manage a single image, add an icon, or create an image gallery.Post photos or slideshows of yourself, your products, or maybe an image of your storefront or event. Highlight text with icons. 
See Also: Adding And Editing Images (VIDEO)
Live FeedsLink your business page’s social media feeds and have them updated live on your site. (This feature is not intended for personal account use.)Whenever your business tweets, you can enjoy those messages being visible on your website, too, automatically.
See Also: Add Social Buttons/Link Social Accounts
MapsA physical Google Map integration on the page.Help your customers find your business.
See Also: How To Add A Map
MusicSoundCloud music streaming integration.Make a playlist for your site visitors to enjoy.
PayPalPaPal integration for users with an eCommerce plan.Allow for flexible and trusted options for shoppers.
See Also: PayPal Account Update Explained
ShapesSimple designs to aid in the design and overall aesthetic of your pages. SImilar to icons but can be used as such or as background or in the background as an additional element.Get creative with your templates by adding polka dots, stripes, and more. The possibilities are endless!
Site NavigationStandard buttons or links to help with navigation of the site, between and around pages.Your site visitors might leave if they get confused about where to go, or even feel like they have reached the end of your content. Keep them engaged by paving their path forward.
SocialAll things Social MediaAdd buttons and feeds to your Instagram or Facebook here.
See Also: Add Social Buttons/Link Social Accounts
StoreFor users with the eCommerce package upgrade, this element provides a window to your online store where you can sell products from your pages.To make money online or post products on a page with an article about similar content that might drive traffic to your online store.
See Also: How To Add An eCommerce Store (VIDEO)
TextSimple text boxes and paragraph boxes.Post a blurb, short bio, quote, and heading properties, anything you like with the text element.
See Also: Adding And Editing Text (VIDEO)