Inserting images, pictures and banner image

This tutorial will give you general overview of what you need to know about images and the Sitebuilder. You'll learn about uploading images, using custom images for your banner area, placing images on your pages, compressing and saving files for web use, different photo widgets available, and also managing your files with the File Manager.

Changing the Banner

Many of our styles allow you to customize the banner image. Mousover your banner area and take note of the pixel dimensions for the banner (e.g., the "Heirloom" style's banner image is 870 x 348 pixels) and upload a scaled photograph or create and upload your own graphic. Your custom graphic may include your company logo and/or additional visuals.

User-added image

To change the banner image, click directly on the default banner image. The Style Designer will open up on the left-hand side. Under the "Colors" section, click on Banner Image. This will open the Banner Editor dialog box, allowing you to select your image.

You will be able to manipulate your banner picture to fit the specified banner dimensions. Once done, click Save in the Style Designer and your banner image will be added to your page.

Please note that you can use the default banner picture of the style if you wish.

For more information on adding banners and backgrounds, take a look at this tutorial: Personalize your Style.

Inserting Pictures

You can insert individual pictures in one of two ways:

1. Picture widget

Drag and drop a Picture widget onto your page. The Picture widget is located in Widgets and selecting Popular from the drop-down menu. The File Manager will open up, allowing you to either select an existing picture or to upload a new one from your computer.

User-added image

Now you can move the position of the picture, add a link and alt text, using the Edit link on the top left-hand corner of the Picture widget. You can also adjust the top, bottom, left and right margins, which is useful if you don't want the graphic to sit against another page element, such as a block of text. You can access this feature by clicking on the Margin link on the Picture widget.

User-added image

To link your picture to another page, external URL, email address or file, click on the Edit link and then select the Choose A Link button.

You can also add Alt Text to your image. The Alt Text attribute specifies alternate text that is shown when the image cannot be displayed. Alt Text should describe the content of the image, so type something appropriate into this field. For example, if it's a company logo type in the company name, if it's a photograph of one of your products type in the product name and a short description of the product.

User-added image

2. Text widget

Another way to insert pictures into your pages is by using the Picture button on the Text Editing Toolbar when using a Text widget. 

Drag the Text widget (located in Widgets and selecting Popular from the drop-down menu) onto your page. Insert your cursor into the Text widget box and click on the "Picture" button on the Text Editing Toolbar. You can either Upload New Image or Browse Uploaded Images. Click on the image you wish to use and click Select

User-added image

This is an ideal way of inserting graphics into pages, as it shows the picture dimensions (in width and height) as you drag it to scale. This makes it really easy to insert several pictures of the same height into a row which is useful for thumbnail pictures that look uniform and neat. It's simple to alter the picture alignment (choose left, center or right alignment) in the Text Editing Toolbar.

To add a link to your picture, select it and click on the Link button (next to the Picture button) on the Text Editing Toolbar.

User-added image

To resize the picture proportionately just drag any of the corner nodes (a black corner frame and arrow will appear as you hover).

Resizing in the Text Widget

 You can also place a picture and text side by side (text wrapping):

  1. Once you have added your picture, select it by clicking on it.
  2. You will then see two new buttons on your Text Editing Toolbar: A picture with text on the right (Wrap Left) and text on the left (Wrap Right).
  3. Select the option that suits you and start typing.
  4. Your text will then wrap around the picture.

User-added image

Photo widgets

It couldn't be simpler to add photos to your website! We offer a number of photo gallery type of widgets for you to use on your site.

Going to Widgets and selecting Media from the drop-down menu, you'll find the Gallery widget.

Gallery widget

With the Gallery widget, you no longer have to drag and drop individual photos and resize them on your site, or use a third party application to create a photo gallery.

You can locate the Gallery widget by going to Widgets and selecting Popular orMedia from the drop-down menu. Drag and drop this widget onto your page. Then, you can choose to upload a new image or browse through your File Manager. If you wish to upload several images at once, hold down "ctrl" (for PC users) or the "cmd" key (for Mac users), while clicking on the pictures you would like to upload. Once you have selected your images, the gallery will display immediately.

The Gallery widget also allows you to edit the hover text, style and margins of your gallery.
Please note: If you choose a style with rounded corners, the rounded corners will only display on the thumbnails - the larger images will display with standard, square corners. 

User-added image

For a further in-depth tutorial on how to use this widget, please visit this link: Tutorial: Using the Picture Gallery Widget.

Flickr Search

Flickr is one of the most popular online photo management and sharing applications in the world, so we've made it easy to add photos from Flickr to your website.

Drag and drop the Flickr Search widget (located by going to Widgets and selecting Media from the drop-down menu) onto your page and click on Edit on the widget to access the Properties. By default, the widget displays random images from the Flickr pool. You need to insert your email address (as configured with your Flickr account) into the User's email field. In addition you can further refine your search by typing in a Search Phrase to enable the widget to look for specific images within your pool.

User-added image

Alternately, you can display images that are not from your account by typing in a search phrase (e.g., dogs). The Max Results is set to 30 so that there is a long block of images. Now you can fine-tune the placement of the widget on your page by altering the margin and alignment.

User-added image

A more advanced feature is the Flickr widget which enables you to add a gallery of your Flickr photos - for more information, please see our tutorial on Flickr Galleries.

Related tutorials:

Was this article helpful?
0 out of 0 found this helpful