How to replace images and text on a downloaded webpage?
Staring at a pile of files after downloading a website template and not sure where to start? Don’t panic — changing text and swapping images really only takes a few steps. Here’s a straightforward guide that gets straight to the point.
Part 1: Preparation
1. Get two tools ready
- Editor: the free VS Code is recommended (https://code.visualstudio.com/)
- Browser: Chrome, Edge, or any browser — used to preview your changes
2. Unzip the template and you’ll see these files:
├── index.html ← The main page; open it with your browser and editor
├── css/ ← Style files (controls colors, fonts, backgrounds, etc.)
├── images/ ← Folder for all images
└── js/ ← Script files
> Before making any changes, make a copy of the entire folder as a backup. If something goes wrong, you can easily swap it back.
Part 2: Changing Text
1. Open `index.html` in your editor
In VS Code, you can simply drag the file into the window, or right-click → Open with → VS Code.
2. Search and replace the text
- Press `Ctrl + F` (`Cmd + F` on Mac) to open the search box.
- Type the sentence you want to change — for example, “Welcome to our company”.
- Once found, replace it directly with your own content, like “Welcome to my little site”.
- Use the same method to find and replace all the text: titles, buttons, descriptions, etc.
3. Save and check in your browser
Press `Ctrl + S` to save the file. Then double-click `index.html` to open it in your browser. Refresh the page and you’ll see the new text.
Part 3: Swapping Images
1. Open the template’s image folder (`images/`).
2. Take a look at the images inside, e.g. `logo.png`, `banner.jpg`.
3. Rename your own image so that it has exactly the same filename (e.g. change it to `logo.png`). Ideally, the image dimensions should be similar to the original.
4. Delete or move the original image out, then drag your image into the folder.
5. Refresh the webpage — the image will be updated!
> Note: Keep the image format the same (if the original is `.png`, yours should be `.png` too). Use similar dimensions, otherwise the layout may break.
Part 4: What if nothing changes after refreshing?
- Force refresh: press `Ctrl + F5` (`Cmd + Shift + R` on Mac) to clear the cache.
- Check filename case: `logo.PNG` and `logo.png` may be treated as different files by the code. It’s best to consistently use lowercase and the correct extension.
Part 1: Preparation
1. Get two tools ready
- Editor: the free VS Code is recommended (https://code.visualstudio.com/)
- Browser: Chrome, Edge, or any browser — used to preview your changes
2. Unzip the template and you’ll see these files:
├── index.html ← The main page; open it with your browser and editor
├── css/ ← Style files (controls colors, fonts, backgrounds, etc.)
├── images/ ← Folder for all images
└── js/ ← Script files
> Before making any changes, make a copy of the entire folder as a backup. If something goes wrong, you can easily swap it back.
Part 2: Changing Text
1. Open `index.html` in your editor
In VS Code, you can simply drag the file into the window, or right-click → Open with → VS Code.
2. Search and replace the text
- Press `Ctrl + F` (`Cmd + F` on Mac) to open the search box.
- Type the sentence you want to change — for example, “Welcome to our company”.
- Once found, replace it directly with your own content, like “Welcome to my little site”.
- Use the same method to find and replace all the text: titles, buttons, descriptions, etc.
3. Save and check in your browser
Press `Ctrl + S` to save the file. Then double-click `index.html` to open it in your browser. Refresh the page and you’ll see the new text.
Part 3: Swapping Images
1. Open the template’s image folder (`images/`).
2. Take a look at the images inside, e.g. `logo.png`, `banner.jpg`.
3. Rename your own image so that it has exactly the same filename (e.g. change it to `logo.png`). Ideally, the image dimensions should be similar to the original.
4. Delete or move the original image out, then drag your image into the folder.
5. Refresh the webpage — the image will be updated!
> Note: Keep the image format the same (if the original is `.png`, yours should be `.png` too). Use similar dimensions, otherwise the layout may break.
Part 4: What if nothing changes after refreshing?
- Force refresh: press `Ctrl + F5` (`Cmd + Shift + R` on Mac) to clear the cache.
- Check filename case: `logo.PNG` and `logo.png` may be treated as different files by the code. It’s best to consistently use lowercase and the correct extension.
