We’re here to help! Email us here.

Tutorials

loading...

Tutorial: Exploring Images

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 "Super Flat" style's banner image is 960 x 270 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.

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

User-added 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 > Popular. A dialog box will open up, allowing you to either purchase a picture from Fotolia stock photograph, select an existing picture or to upload a new one from your computer.

User-added image

If you are a Yola Silver or Yola Gold subscriber, you have access to 3000 free professional-quality stock images from Fotolia, which you can access in the "Yola Images" tab. Browse for the picture you'd like to upload and click "OK".

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 > Popular) onto your page. Insert your cursor into the Text Widget box and click on the "Picture" button on the Text Editing Toolbar (it's the one in the middle with the green tree in a picture frame). Select a picture in the same manner as you would for the Picture Widget - select an existing picture or upload a new one from within the dialog box that opens up and click on "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.

In the Widgets > Media folder, you'll find the Picture Gallery Widget. You'll notice that the Widgets are bundled together by category and there are also widgets for Flickr and Smugmug in this folder.
 

Picture Gallery Widget

With the Picture 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 Picture Gallery Widget by going to Widgets > Media OR Widgets > Popular. 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 Picture Gallery Widget also allows you to edit the hover text, style and margins of your picture 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 in Widgets > Media) 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 Lightbox which enables you to add a gallery of your Flickr photos - for more information, please see our tutorial on Flickr Galleries.
 

SmugMug Gallery

Streaming a slideshow of images from your SmugMug Gallery is as easy as displaying your Flickr photos. Drag and drop the SmugMug Gallery Widget onto your page (located in Widgets > Media) and add your Gallery URL to the Gallery URL field.

User-added image

If you don't have an account, but would like to show a friend's photographs, you can browse through the SmugMug Galleries by clicking on Settings > Browse SmugMug Galleries.

Once you've added the widget to your page, you can alter its position, width and height.

User-added image 

You can check out our SmugMug Gallery tutorial for more information.

Related tutorials: