Working with images in Premium Web Builder

When building a site with the Premium Website Builder, you will want to insert images in to your site to give it more personality. These images can be of products, or simply for visual assistance to the content you have written. This tutorial guides you on the proper way to add images to your Premium Website Builder (PWB) site.

Inserting images into Premium Website Builder pages

  1. To begin, log into your Premium Website Builder account.
  2. From the main screen, select the Edit step. If you are on another page, you will likely have a menu in the upper right corner of the screen. Click the Edit step there to continue.
    select the edit step
  3. Once on the edit page, look the the left hand menu and select the page you want to work with. In our example, we will work with the Home page. Click on the page name and the right hand panel will change to represent that page so you can work with it.
  4. From the page editor, position your cursor on the screen where you want to insert the image. Then, look for the Image icon image-icon in the upper toolbar. The location of the button can change depending on the width of your screen, but it appears as a small mountain with a sun rising over it. Click on this icon to begin inserting the image.
    select page to work with
  5. This will bring up the Image Editor box. Click on the Browse Server button.
    image editor popup
  6. You are now on the image uploader screen. Click on the Browse button at the bottom. This allows you to select an image from your local machine. Once you select the image, you will see the image path in the field next to the button. Click on the Upload button to send the image up to your server. The image name will appear in the serer browser in the right hand panel. Our example is the dog1.jpg file and is the only file currently in the list. Click the file name to continue.
    image server browser
  7. You are now taken to the image settings screen. From here you have several options for positioning and editing the image. A preview section to the right displays how the image will look as you alter the settings.
    image settings popup

    URLThis is the path to the image.
    Alternate TextShort description of the image for use when the image does not appear.
    WidthWidth of the image, in pixels. Editing this can change the shape of the image.
    HeightHeight of the image, in pixels. Editing this can change the shape of the image.
    Border widthWidth, in pixels, of a border. Leave blank for no border.
    Horizontal SpacingPadding (in pixels) to the left and right side of the image.
    Vertical SpacingPadding (in pixels) to the top and bottom of the image.
    AlignmentDropdown that allows you to position the image in different places.
  8. Once you have entered the desired settings, click on the OK button to complete the image insertion. Below is an example of how our example image looks when completed.
    example after image inserted

 

Was this article helpful? Let us know!