How To Change Image of Card Components in Webflow

Описание: This is a short Webflow tutorial that explains how to change an image inside the instance of the Card Component. I explain how to set the property of the image in the original Card component, and later change the image in the card itself.

Glossary:

0:19 Instructions on how to change the image in the component


Instructions:

Go to the original component. Within the editing mode, double-click on the image. Go to a sidebar on the right and hover over a small plus button. Clicking it reveals the 'Create and Connect New Property' option. This function in Webflow allows us to assign a new property to the image element.

We start with the original image in its default state. By assigning this new property, we're able to replace images without altering the core component itself. I give this new property a name, such as 'Image,' and click on 'Create.' The violet color indicates that we've successfully created this new property.

Exiting the editing mode, I double-click on the image in the card where I want to change the image and click 'Replace,' select my desired image, and voilà! The image within the component instance is changed without affecting the core component.