# How to Edit Text, Images, and Buttons on Your Website

> **Source video:** https://www.youtube.com/watch?v=Z4fUt4WpRhE

Every page on your site is built from containers (the big sections that stack down the page) and elements inside them (text, images, buttons). Once you understand that structure, you can edit almost anything. This guide covers using the structure panel, changing text, images, and buttons, adding new elements, previewing tablet/mobile views, and publishing.

## Understanding Containers and Elements

Every page is made of **containers** — the big sections stacked down the page. Inside the containers are the **elements**, which are the actual things you see: text, images, and buttons.

1. On the right side of the editor, open the **structure panel**. This acts like a map of your website.
2. Click the container at the top of the list — it highlights the corresponding section in pink on the page.
3. Click the **arrow** next to a container to expand it and see its elements (e.g., a text heading and a button).
4. Click the **eyeball** icon to hide an element, then click it again to reveal it.
5. **Drag and reorder** elements up and down, and do the same with containers to rearrange the whole page.

This works on every page of your website.

> **Tip:** If the structure panel gets in the way, drag it to move it, or press **Ctrl/Command + I** to hide it. Press the same shortcut again to bring it back.

## Changing Text

1. Hover over the text you want to change and click into it.
2. Highlight the text and type whatever you want.
3. You can also edit the text from the **left-hand side panel** — highlight and retype it there.

### Styling Your Text

Use the **Style** tab on the left-hand side to change how your text looks:

- Change the **fonts**
- Adjust the **text stroke** and **shadow**
- Change the **color** of the text (for example, from white to red)

> **Tip:** To undo a change you don't like, press **Ctrl/Command + Z**.

## Replacing Images

1. Click on the image you want to replace.
2. Hover over **choose image** and click into it.
3. **Drag and drop** the new image into the upload area.
4. Once the image finishes uploading, go to the bottom right and click **Select**.
5. With the image selected, you can change its **resolution**, **caption**, and **link**.
6. Go to the top and click **Style** for additional options to resize your image if it doesn't look right on your site.

## Customizing Buttons

1. Click on the button you want to customize.
2. In the left-hand settings, change the **button type** and the button **text** (for example, from "Get Started" to "Contact Me").
3. Change what page the button links to — delete the existing link, type a new slug (e.g., `contact`), and link it to that page.
4. At the top, click **Style** to change how the button looks on the page.

## Adding New Elements

You aren't stuck with what the template gives you — you can add new elements:

1. Click the **plus (+)** button at the top left.
2. Scroll down to find **containers**, **grids**, and elements such as **text**, **images**, **videos**, and **buttons**.
3. Hover over an element, drag it into your container, and drop it.

### Deleting Elements and Containers

- **Delete an element:** right-click on it, go down, and click **Delete**.
- **Delete a container:** hover over it, go to the top, and click the **X**.

## Previewing Tablet and Mobile Views

At the top of the editor you'll find icons for checking how your site looks on:

- **Desktop** (current view)
- **Tablet**
- **Mobile phone**

Your template already adjusts itself well for tablet and mobile, but it's worth a quick check. Any tweaks you make in the phone view only change the mobile version — they won't touch your desktop layout.

## Publishing Your Changes

Once you're happy with everything, go to the top right and click **Publish**. This saves your work and pushes it live for the world to see.