Skip to main content

Add an image in Phoenix Pro

38 seconds · On-screen instructions

This walkthrough starts with the first-website practice project open in Design Mode. Your computer’s file picker opens outside the recording.

Read the full tutorial and get the practice website

Read the video’s on-screen instructions
  1. Phoenix Pro: open first-website in Design Mode for a larger preview.
  2. Click the grey pen to turn on Edit Mode. An orange pen means editing is on.
  3. Click the hills. The Image Gallery opens at the bottom.
  4. Click Select from device, then choose photo.jpg in your file picker.
  5. If asked where to save the picture, enter images and click OK.
  6. Click the photo, close the Image Gallery, then click img to open its properties.
  7. Scroll inside Element Properties to show all the Attributes.
  8. Replace the alt text with a short description. Press Enter to apply it.
  9. Click Save File in the narrow toolbar on the left. Stay in Design Mode.
  10. Click the orange pen to turn editing off and check the finished page.
  11. Your photo and description are saved. The image is inside your project.