Website Builder - Elements

When editing a HostGator Website Builder Site, there are two core aspects to editing:

  • Adding/Removing Elements: The basic building blocks of your website. This includes images, text, headings and all the pieces that change how a web page looks.
  • Modifying Elements: The ways that you can edit and change your elements. Clicking on elements will display a list of options for how to modify them.

Check below to view more information about each of the following:


Adding/Removing Elements

Adding new elements to your website is easy and intuitive. To add a new element to your website from the website editor:

  1. Click the Add tab on the left side bar in the editor.
  2. A list of elements will appear, locate and click on the element you wish to add.
  3. Move your mouse to the place you wish to place the element on your page, and click to have it placed there.

To remove an element:

  1. Click on the element you wish to remove.
  2. Click the trash icon in the top right of the dialog that appears next to the element.

Some elements in the Add tab have a few options before you can drop them on your page, for instance, images require first that you select an image from the image library.

For a more in depth look at how to add and modify some of the most common Website Builder elements, please see the following article:

The following is a more complete list of elements that are available to use:

Element Sub-menu Notes
Image Image Library Choose either to add an image from the Site Builder library, upload your own or link to an image elsewhere online
Gallery Gallery Layout Set up a gallery of images and set transitions between items in the gallery as well as image descriptions 
Text Text type (heading or paragraph text) Place text on your site, define initially if this is a heading or paragraph text
Form Form Layout Add a contact form to your website and define the custom fields you want visitors to fill out
Site Menu Menu Layout Add navigation to your site to make it easy for visitors to navigate between your various pages
Social Social Media Platforms Get social by adding in Twitter feeds, Facebook Like buttons and much, much more
E-Commerce Store Options Add a store to your site or perhaps just a PayPal buy now button
Widgets Embed HTML Types Embed HTML on your website, the possibilities are endless here (TripAdvisor, SoundCloud, Live Chat, Forums etc)
Map Google Map Show visitors your location with a fully operational Google Map
Icon Icon Library Choose from hundreds of different icons to use on your website
Shapes Shape Library A simple library of basic re-sizable shapes
Buttons Button Types Simple buttons styled to your website design with pre-defined rollover states
Containers Container Types Container boxes which re-size intelligently 
Video - Embed a video from YouTube
Video Gallery Gallery Layout

Set up a gallery of videos and set transitions between items in the gallery as well as video descriptions 

Flash Flash Library Embed a flash file that has been uploaded from your computer
Documents Documents Library Upload a document (or any file type) you want your visitors to be able to download
Blog Widgets Blog Widget Types If you have a Site Builder blog these widgets can be placed on pages to link directly to featured posts or your tag cloud

Modifying Elements

When an element is clicked on it becomes selected, any element showing a containing box around it is currently selected. A selected element will show a selection bar above it and the tools palette, most likely on the right hand side of the page.

The selection bar will display the type of element selected, in the above example 'Icon', the bar always has the same options regardless of the element type though. So from left to right it has a duplicate button, arrows to move the element either forwards or backwards from a layering perspective, a link button for controlling where the elements links to when clicked, then finally a delete button.

The tools palette is the large white box seen at the right of the screen. This will always look similar regardless of the element type selected, again though it displays the type of icon selected at the top. Within the Settings, Style and Size & Position menus you can define properties for the element such as color, border width, opacity, padding and much more.