JS Animated. How to edit images

Our Support team is ready to present you a new tutorial that shows how to edit images in Website templates.

There are several ways to add an image to your website in JS Animated templates. Please, refer to the steps listed below:

Replacing an image

1. Open your site in browser and inspect current image file name. Copy it to clipboard:

   

2. Create a new image, keeping the same file name and extension, e.g., icon_1.png or client-logo-2.jpg.

3. Connect to your FTP or open the hosting cPanel File manager tool.

4. Upload the newly created image to your ‘images’ folder on the server and confirm the replacement.

Changing an image in html

1. Open your site in browser and inspect current image file name. Copy it to clipboard.

2. Connect to your FTP or open the hosting cPanel File manager tool.

3. Upload the new image to your ‘images’ folder on the server.

4. Then open the *.html file for editing, e.g., index.html.

5. Search for current image file name, you can do it by pressing CTRL+F on your keyboard.

6. Replace the path to an image file with a new one and save changes:

   

7. Check your website, it should load the new image now.

Adding a new image to the page

1. First, you need to prepare an image. Open the template package and navigate to sources_###.zip to locate theme PSD files. You can refer to the following guides on unzipping sources.zip on MAC or Windows OS and edit PSD files then.

2. Export your images to .png by selecting Save for web option.

3. Connect to your FTP or open the hosting cPanel File manager tool.

4. Upload the new image to your ‘images’ folder on the server.

5. Then open the *.html file for editing, e.g., index.html.

6. Search for current image file name or add a new code for your newly created image, as follows:

7. Specify the path to your new image, for example, “img/image.png” and save changes.

8. Check your website, it should display the new image now.

Feel free to check the detailed video tutorial below: