1. Knowledge Base
  2. >
  3. Results
  4. >
  5. Website Builder - Elements

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:

ImageImage LibraryChoose either to add an image from the Site Builder library, upload your own or link to an image elsewhere online
GalleryGallery LayoutSet up a gallery of images and set transitions between items in the gallery as well as image descriptions
TextText type (heading or paragraph text)Place text on your site, define initially if this is a heading or paragraph text
FormForm LayoutAdd a contact form to your website and define the custom fields you want visitors to fill out
Site MenuMenu LayoutAdd navigation to your site to make it easy for visitors to navigate between your various pages
SocialSocial Media PlatformsGet social by adding in Twitter feeds, Facebook Like buttons and much, much more
E-CommerceStore OptionsAdd a store to your site or perhaps just a PayPal buy now button
WidgetsEmbed HTML TypesEmbed HTML on your website, the possibilities are endless here (TripAdvisor, SoundCloud, Live Chat, Forums etc)
MapGoogle MapShow visitors your location with a fully operational Google Map
IconIcon LibraryChoose from hundreds of different icons to use on your website
ShapesShape LibraryA simple library of basic re-sizable shapes
ButtonsButton TypesSimple buttons styled to your website design with pre-defined rollover states
ContainersContainer TypesContainer boxes which re-size intelligently 
Video-Embed a video from YouTube
Video GalleryGallery LayoutSet up a gallery of videos and set transitions between items in the gallery as well as video descriptions
FlashFlash LibraryEmbed a flash file that has been uploaded from your computer
DocumentsDocuments LibraryUpload a document (or any file type) you want your visitors to be able to download
Blog WidgetsBlog Widget TypesIf 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.