HOW DO I UPDATE SONATA'S IMAGES WITHOUT DELETING THEIR STYLES?

Ensuring that Sonata's images maintain their styles doesn't have to be tricky! Just follow these easy steps listed in this doc and the process will be simple.

While using Sonata, you may have noticed that its default images have some styles applied to them. To go about replacing these images without losing the styles, it's best to follow to follow these steps:

1. Open up any of the "Sonata Section" modules

2. Click the "Source Code" button, it looks like this "</>", in the module dashboard

3. Locate the "style" code within <img> tag at the top of the code

4. Copy this code, and keep it for later

Sonata_Image_Styles

5. Replace the image with your new one

6. Find this image's <img> tag at the top of the code

7. Paste the "style" in the area shown below (near the end of the img tag)

Sonata_Image_Styles2

This is useful so that all images maintain that grey separator throughout each Sonata section module.