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.
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.
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 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.
You can also purchase Fotolia credits which allow you to buy an image from their stock collection. You can do this by going to Site > Content > File Manager. Click on Stock Images and then click on Buy Credits.
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.
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.
To resize the picture proportionately just drag any of the corner nodes (a black corner frame and arrow will appear as you hover).
- Once you have added your picture, select it by clicking on it.
- 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).
- Select the option that suits you and start typing.
- Your text will then wrap around the picture.
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 WidgetWith 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.
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.
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 Flickr Galleries.
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.
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.
You can check out our SmugMug Gallery tutorial for more information.