Picture Elements different language structure

Configuration Frontend
1

Hi All,

Im kinda new at this but i really need help on this.
Already search all over the place but cant find help on this issue.

Basically i just wanted to add a Picture Elements Card, and then all the entities, however i found that i have to create in the lovelace file, BUT, all the examples and help that i find are in a diferente format from my lovelace file.
Here’s an example

My File:

{
	"type": "entities",
	"entities": [
		"light.configuration_tool_1"
	],
	"title": "Light"
},

Examples all over web

type: picture-elements
elements:
  - type: state-badge
    entity: sensor.hacs
    style:
      top: 32%
      left: 40%
image: 'https://demo.home-assistant.io/stub_config/floorplan.png'

The language structure is different.
My HA is at 2020.12.1 and type Home Assistant Supervised.
My lovelace file is at /home/pi/docker/hassio/homeassistant/.storage/

If I may ask one more question, when i make a change directly to lovelace file, isn’t it supposed to accept and change on HA GUI?
Asking this because, never shows my changes when inserting new cards, or something, even a single name changing.

Thanks in advanced!

Best regards.

2

@volumes
As a beginner in Lovelace would suggest to use the built in editor instead of coding.
This can be reached from the three vertical dots on the top right of any lovelace page, select EDIT dashboard.

Then at the bottom you can add a new card from the orange button, select the Picture Elements.

As this one is not yet using the Visual Editor you can insert your code there, an example code is already given with one of your sensors showing the style. The style matches the examples on the web!

GUI changes made here will be visible directly.