Updated Automation Editor page based on 2023.4 (#27078)

source/_docs/automation/editor.markdown

@@ -5,29 +5,25 @@ description: "Instructions on how to use the automation editor."
 
 The automation editor is an easy way of creating and editing automations from the UI. This page uses the [Random sensor](/integrations/random#sensor) as an example, though any other sensor with a numeric value can be used as well.
 
-From the UI, choose **{% my config %}** which is located in the sidebar, then click on **{% my automations %}** to go to the automation editor. Press the **Create Automation** button in the lower right corner to get started. You can create an automation based on a [blueprint](/docs/automation/using_blueprints/) or start from scratch.
+From the UI, choose **{% my config %}** which is located in the sidebar, then click on **{% my automations %}** to go to the automation editor. Press the **Create Automation** button in the lower right corner to get started. You can create an automation based on a [blueprint](/docs/automation/using_blueprints/) or start from scratch. Select **Create new automation**.
 
-<p class='img'>
+![Create automation dialogue box](/images/docs/automation-editor/create-automation.png)
-  <img src='/images/docs/automation-editor/create-automation.png' />
-</p>
 
-Select **Start with an empty automation** and choose a meaningful name for your new automation.
+Click on the **Add Trigger** button and select **Nurmeric state**.
 
-<p class='img'>
+![Add trigger](/images/docs/automation-editor/add-trigger-to-automation.png)
-  <img src='/images/docs/automation-editor/new-automation.png' />
-</p>
 
 If the value of the sensor is greater than 10, then the automation should trigger.
 
-<p class='img'>
+![Automation trigger](/images/docs/automation-editor/new-trigger.png)
-  <img src='/images/docs/automation-editor/new-trigger.png' />
+
-</p>
+Click on the **Add Action** button and select **Call service**.
+
+![Add trigger](/images/docs/automation-editor/new-action.png)
 
 The action for this automation creates a [persistent notification](/integrations/persistent_notification/).
 
-<p class='img'>
+![Automation action](/images/docs/automation-editor/send-notification.png)
-  <img src='/images/docs/automation-editor/new-action.png' />
-</p>
 
 As the message we want a simple text that is shown as part of the notification.
 
@@ -35,6 +31,10 @@ As the message we want a simple text that is shown as part of the notification.
 message: Sensor value greater than 10
 ```
 
+ Press the **Save** button, and the save dialogue will appear. Give your automation a meaningful name and press the **Save** button again.
+
+![New automation editor](/images/docs/automation-editor/new-automation.png)
+
 Automations created or edited via the user interface are activated immediately after saving the automation. Read the documentation for [Automating Home Assistant](/getting-started/automation/) to learn more about automations.
 
 ## Troubleshooting missing automations