We’re here to help! Email us here.

Tutorials

loading...

Tutorial: Exploring Images

This tutorial tackles all you need to know about images and the Sitebuilder - uploading images, using custom images for your page header, placing images on your pages, compressing and saving files for web use, photo and video widgets, and also managing your files with the File Manager.

Changing the Header Picture

Many of our styles allow you to customize the banner image. Take note of the pixel dimensions for the banner (e.g., the "Tastelessly" style's banner image is 978 x 263 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, hover over the banner area and click inside the blue box when you see "Edit Banner Image". A dialog box will open up that will allow you to "Upload New Banner" (from your computer), "Browse Uploaded Banners" (in your File Manager) or "Find Stock Banners" (purchase a professional-quality banner image).

Once you've selected your image, the Banner Editor will open and you will be able to crop and resize your banner picture to fit the specified banner dimensions. Once done, click on "OK" and your banner image will be added to your page. Click on "Save" for the banner picture to be saved to your page.

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

Banner editor

 

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.

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".

When uploading pictures from your computer to your File Manager, you can select multiple files by holding down your Shift key or Ctrl key. Once your pictures are loaded to your File Manager, choose the picture you want to use and click "Select". This is only possible if you click on the File Manager button and not when you add a Picture Widget to the page.

The File Manager window will close and your image will be placed within the blue borders of the Picture Widget on your page. Note that the blue or red widget frames are only visible in edit mode, they will not appear in preview mode or on your published site. Drag the red square on the bottom right corner of the picture to resize it.

Now you can adjust the orientation or 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.

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.

 

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". 

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.

Picture in Text Widget


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 three new buttons on your Text Editing Toolbar: A picture with text below (No Wrap), 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.
Please note: This feature is only available in Firefox. 

Text and picture wrap



Photo and video widgets

It couldn't be simpler to add photos and videos to your website! From the Picture Gallery Widget to YouTube Widget - there's a widget for everyone.

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

Picture Gallery Widget

With the Yola 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.

Follow these steps to create your Picture Gallery:
  1. Drag and drop the Picture Gallery Widget onto your page.
  2. Upload a new image, or browse through the uploaded files in your File Manager.
    • To upload a picture from your computer: Click on "Upload New Images". You will be able to browse your computer's folders to select a file to upload. Select the file, click "Open" and it will automatically be uploaded to your gallery.
    • To add pictures that have already been uploaded: Click on "Browse Uploaded Images" and select the image from the File Manager. Click on the uploaded picture file you want to add, click "OK" and the picture will be added to your gallery.
    • To upload multiple pictures at the same time: Hold down "ctrl" (for PC users) or the "cmd" key (for Mac users), while clicking on the pictures you would like to upload. Click on "Select" in the bottom right corner to upload the images.
  3. 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: 
  1. Click "Edit" in the top left corner of the Picture Gallery Widget to customize your gallery.
  2. On the right side of the dialog box, you can add and edit the photo hover text.
  3. On the left hand side, you can change the style of your Picture Gallery Widget.
  4. To preview your style before you save the changes, click "Preview".
    • You can also edit the margins of your Picture Gallery Widget, by clicking on "Edit", under the word "Margin" on the left hand side of the dialogue box.
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. 
 
Lastly, if you wish to rearrange the order of your pictures in your Picture Gallery Widget, here's how to do this:
  • Click on the "Edit" link on the top left-hand corner of your Picture Gallery Widget. Select the picture you wish to move and click on the arrows to move it up or down the list.
OR
  • To the right of the arrows, hover your mouse over the dotted rectangle until a cross appears. Then, click and drag the picture to its new location.

Flickr Picture Gallery

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 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.

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.

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 Photo Galleries, Portfolios and Presentations.

SmugMug Gallery

Streaming a slide show 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.

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.

SmugMug Gallery 

 

Videos

In the Media tab, you will also find YouTube and Metacafe. If you have a video that you'd like to include on your website from any of these sources, just insert the URL into the dialog box that opens up.

That about does it. Have fun playing with these great tools. We look forward to seeing your new published sites!

Related tutorials: