Welcome to this lesson! In this class, we’ll walk through how to change or insert images across different sections of your website. By now, you should already be familiar with editing and resizing images (refer back to that earlier module if not).

🔸 Key Concepts:

• Images can either be part of a container background or added as elements.

• Background images are edited through the Style tab of a container.

• Image elements are edited by clicking the pencil icon on the image itself.

🖼️ Editing the Hero Section Image (Slideshow)

1. Click on the Hero Container

   • This is the first section with a sliding background image.

2. Go to the Left Sidebar > Style Tab

   • Under Background, you’ll see the current slideshow images.

3. Edit or Add Images

   • Rearrange images to change their order.

   • To add a new image:

     • Drag and drop a properly resized image from your computer.

     • Click Insert Gallery.

⚠️ Remember: If your image looks distorted, revisit the earlier module on how to prepare and size images correctly.

🧱 Background Images in Other Sections

Sometimes, images are applied to the container, not as standalone elements. Here’s how to edit those:

1. Click on the section until the container is selected.

2. On the left sidebar, click Style > Background.

3. Click the image to open the media library.

4. Drag & drop a new image or select one you’ve already uploaded.

5. Click Insert to update.

🧩 Editing Image Elements (e.g., Logos, Team Profiles)

If the image is an element (like a logo or profile picture):

1. Hover over the image until a pencil icon appears in the top right.

2. Click the pencil to open image settings.

3. Click the image to open the media library.

4. Upload or reuse an existing image.

5. Select and insert the new image.

🔁 Images you upload are saved in your media library for future reuse.

💡 Understanding the Structure

Use the Structure panel to help you know:

• Whether an image is part of a container background or

• A standalone image element.

This will guide how you edit it.

🧪 Practice: Editing Team Page Photos

Try changing a profile picture:

1. Identify if it’s an image element (look for the pencil icon).

2. Click and swap it.

3. If it’s a background image, select the correct container and use the Style tab.

Undo actions using:

• Ctrl + Z (Undo)

• Ctrl + Y (Redo)

• Or hide the panel briefly to make undo responsive.

✅ Final Step: Publish and Preview

After editing:

• Click Publish to save changes.

• Use the Preview tab to see your edits live.

📝 Summary

• Images live either inside a container’s background or as elements.

• Use the Style tab for backgrounds and the pencil icon for image elements.

• Always use correctly resized images.

• Don’t forget to publish and preview your updates.