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 new elements to your website is easy and intuitive. To add a new element to your website from the website editor:
- Click the Add tab on the left side bar in the editor.
- A list of elements will appear, locate and click on the element you wish to add.
- 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:
- Click on the element you wish to remove.
- 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:
|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|
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.