Before creating Visual filter, you should add a post relation. It can be one-to-one, or one-to-many, or many-to-many – it doesn’t matter which type of relation you create but choose the only one to add the filter for. How to create a post relation, read here in the section called Posts Relations.

I have created one-to-one post relation where I assigned the Color Post Type as a parent object and Events Post Type as a child one.

In WordPress Dashboard go to the Smart Filters submenu and Add new filter. Fill in appropriate fields in the Filter Labels block. You should define the name of your filter and how it will be shown when it is selected.

In the filter’s Type choose the Visual one to enable filtering by the color or image.
Then, you need to choose the Posts data source.
In the Post Type dropdown menu you should choose that post type which you’ve assigned as a parent one in the post relation.
Next, select the type of the Visual filter type: an image or a color one.
Define the behavior of the filter – make it Radio or Checkbox.

In the Options List, add the options accordingly to the ones you have in the parent post type.
The Label field is optional to be filled in, you can leave it empty (it’s pretty familiar for the visual type to leave this field, as the color or image are much brighter than the text).
Choose the needed value from the dropdown menu (these values must comply with the posts from the parent post type).
Then, specify the color, if you’ve chosen a Color type and in case you’ve selected an Image type – select the certain image.

After that, you should set the queried field key in the Query Variable field. To find the necessary value, proceed to the JetEngine > Posts Relations option and copy the meta key of the chosen relation and paste it in the Query Variable field.
Update the changes and go to Elementor editor.

Open the page where you want to place your filter with Elementor editor. Drag and drop the Visual Filter widget to the canvas.

In the This filter for menu specify the way the content has been created.
We add the filter to the listing based on the posts so that we select here the JetEngine option.

After that, choose the Apply type: whether the AJAX or Page reload type.

Enable the Show apply button option and then the Show filter label one if you need it.

In the Query ID field enter the ID of the section you want to apply the filter to, in case you several sections on the same page.

In the Filter Options tab, you are able to enable the label appearing by toggling on the Show items label option.
In the Image Size dropdown menu, you can choose the size that will suit the general appearance.

Customize the appearance of the filter in the Style tab.

Here in the Items tab, you can change the position of the filters options: display them in line or in the column.
You can add more space above and under the options by moving the slider of the Horizontal and Vertical offset options.
Align the options with the choice on the three possible alternatives.

In the Item tab, you can change the size of the images, (if you’ve chosen them before in the Visual filter settings). As you remember, we’ve customized the physical size in the Content > Filter Options tab. There we specified the appropriate resolution of the images. And in the Style tab, we are working first of all with the width of the images.
In this tab, we also customize the images with all the details for the Normal and Checked appearance: the border type and radius, etc.

In the Item Label tab, we defined the view of the labels both for Normal and Checked appearance.

In the Label tab, we specified the appearance of the displayed filter’s title. We can do it in case we’ve toggled on the Show filter label in the Content tab.

The same is for the Button tab where we can set the behavior parameters for Normal and Checked appearance as well. We are able to change the settings here only if we’ve toggled on the Show apply button switch.

In the Grouped filters tab we can set the space between several filters.