Website Builder Basic Style Tools

The Website Builder's basic style tools include the following options:

Adding and Editing Images

To add individual images to your site one at a time or in groups:

  1. Click the + Add tab on the left and select the IMAGE icon under Images:

  2. From here you will be able to select images to add via the following methods:

    1. Upload an Image or Images from your local computer.
    2. Select an image from the HostGator image library.
    3. Select an image from your image upload history.
    4. Add an image using an external URL.
  3. Click the Apply button to add the selected image(s) to your site.

If you selected multiple images, they will be added stacked on top of each other. All images will need to be moved and arranged to your desired size, location, and rotation after being added.

Adding and Editing Text

When adding text to your site you can choose to do so as a heading (sizes 1, 2, or 3) or as paragraphs. To insert text for your site:

  1. Click the + Add tab on the left, select Text then click the icon for the type of text you wish to add:

    Location for icons in SiteBuilder.
  2. You will then be able to click to place the text in the desired location.
  3. After the text is placed, you will then be able to edit its contents by clicking the Edit Text button on the element menu when the element is selected.

If you selected to add a paragraph, you may resize the text to fit the space you wish and type multiple paragraphs.

Editing Existing Elements

Each element has its own unique context sensitive element menu that you can edit by clicking on the desired element. The default position for this menu is on the right hand side of your screen:

Location for icons in SiteBuilder.

This menu will let you fully modify any element you have added to your page.

Preconfigured Element Designs

Page elements have a large number of options that can frequently be very confusing. To help with this, SiteBuilder includes preconfigured designs for some elements. This will let you select a configuration that matches your preferred page design without manual configuration.

To select a preconfigured design:

  1. Click on the element you wish to re-design.
  2. In the element menu select Change Design:

    Location for icons in SiteBuilder.
  3. From the left hand menu, select from the design options available to you for a live preview of the changes.
  4. In the upper right hand corner of the screen, click the Apply button to save your changes or Cancel to discard the design changes.

Changing Page Size

To change your page size, each section is denoted by a horizontal gridline with a plus icon in the middle of it, this line can be clicked and dragged upwards or downwards to extend or decrease the section height.

However, if you are looking to input a whole new section of content on your site we recommend clicking the plus icon. This will then very neatly insert a new section where the gridline resides, not only is the section created, there are a ton of layout options available for different types on content.

As seen above there are a number of content sections that when clicked provide a few different layout defaults for you to work with. All of these layouts translate brilliantly into mobile view so they are well worth using. In the image above, notice there are two section options; Content Sections and Common Sections, the later is great if you are requiring inspiration. There are section defaults for 'About Me' sections, 'Contact Us' sections, 'Features' sections and much more.

Rotating Elements

When elements are dragged and dropped onto the page they are all aligned perfectly and parallel to all page elements, you may want to break away from the norm though and rotate elements slightly for a more funky layout, to do this:
  1. Select the element that you want to rotate
  2. Click and hold the Rotate button located next to the top right corner of the element
  3. Rotate the element to the desired position and release the rotate button
  4. Rotation can be cancelled by clicking the small 'X' which appears on the rotate button after altering the image

 

Rounding the Corners of an Element

To round the corners of an element you have imported into SiteBuilder:

  1. Select the element you want to edit the corner roundness on.
  2. Select the element you want to edit the corner roundness on.
  3. Edit the roundness of the corners using the roundness scale.
  4. On the right side of the roundness scale there is a gear icon, here you will be able to select a specific corner to adjust.

How to Scale/Re-Size an Element

There are two ways to change the size of an element in the SiteBuilder editor; scaling and resizing. Scaling lets you change the size of an element while maintaining it's proportions (aspect ratio) and also affects all of the components of complex elements such as galleries and tabs panels. Resizing changes the size of the elements frame and will only maintain the element's proportions if the shift key is held down while re-sizing. Additionally resizing does not always affect the components of complex elements, depending on the settings chosen, such as having disabled Scale To Frame.

To re-size simply select the element you wish to adjust and drag the handles on the element frames until you have reached the desired size. Holding down the shift key while doing so will keep the element's proportions.