Now that you've mastered the basics of image editing and placement, we'll explore a few additional options.

You will learn how to change your image's alignment from left to right, a faster way to resize your image, a quick way to move your image to another location on the page, how to apply a border, and a simple method to replace one image with another.

1. Changing an image's alignment on the page:
2.  
3. 1. In Part 1, the image was aligned to the left of the paragraph. This is the default setting.
4. 
5.  
6. 2. To shift the image to the right, select the image, click the "Insert/edit image" icon and reopen the Appearance tab. Choose "Right" from the dropdown menu.
7. 
8.  
9. 3. Now the image has shifted to the right. Because we didn't change the Horizontal and Vertical space, white space still exists between the image and the surrounding text.
10. 
12.   
13. An easier way to resize an image:
14.  
15. 1. Click on the image to select it. This will activate a "bounding box", illustrated by eight tiny squares surrounding the image boundaries. Drag on one of the corners while holding the "Shift" key to resize the image. Stop dragging and release the "shift" key when your image is the desired size.
16. 
17.  
18. 2. Drag a corner square inward to decrease the size of the image.
19. 
20.  
21. 3. Drag a corner outward to enlarge the image.
22. 
23.  
24. 4. Distort the proportions by dragging a square without holding down the "Shift" key. Interesting effects can be applied this way.
25. 
26.  
27. 5. Click "Submit" or "Apply" to save your changes.
28. 
29.  
30.  
31. A quick way to move your image elsewhere on the page:
32.  
33. 1. Click on the image to select it. Hold down your mouse key and drag the image to a new position on the page.
34. 
35.  
36. 2. If the image is aligned-left (like in this example), it will maintain that alignment. (You can change the alignment in the "Appearance" panel.) If you are satisfied with the changes, click "Submit" or "Apply". Click "Cancel" to abort the changes.
37. 
38.  
39.  
40. How to apply a border to an image:
41.  
42. 1. Click on the image to select it. Click on the "insert/edit image" icon and select the "Appearance" tab. The border box is empty by default (no border).
43. 
44.  
45. 2. Set the value (in pixels) for the border. The larger the number, the thicker the border. To remove the border, enter 0 or leave the field blank. Click update to apply the border to your image.
46. 
47.  
48. 3. The final result is shown in the HTML editor. Repeat the steps again to make changes, or click "Submit" or "Apply" to save.
49. 
50.  
51.  
52. Replacing an existing image with another:
53.  
54. 1. It's easy to replace an existing image with another. First, select the image you want to replace, then click the "Insert/edit image" icon. Now you are in the "General" settings tab. Click on the "Browse" icon to select a new image.
55. 
56.  
57. 2. The Image Manager dialog box will open. Click on the image or link that you want to replace the original image with.
58. 
59.  
60. 3. The new image appears in the "General" panel. It will need to be resized in the "Appearance" Panel.
61. 
62.  
63. 4. We'll reduce the width to 200 pixels. Because "Constrain proportions" is checked, the height will be adjusted automatically. We'll also keep the image aligned-left and maintain the same Vertical and Horizontal spacing.
64. 
65.  
66. 5. You have successfully replaced the image. Click "Apply" or "Submit" to save your changes, or click "Cancel" to exit the screen without changes.
67. 
68.  
69. 6. The final result of the image replacement is shown on the live site.
70. 

The next tutorial in the series will show you how to create a text link.

Back to Tutorial Index