Views: update descriptions, add screenshots (#31661)

* Views: update descriptions, add screenshots

* Add related topics

source/_dashboards/masonry.markdown

@@ -6,7 +6,13 @@ description: "The default panel layout uses a masonry algorithme."
 ---
 
 The masonry view is the default view type.
-It sorts cards in columns based on their `card size`. If you want to group some cards you have to use `stack` or `grid` cards.
+
+<p class='img'>
+<img src='/images/getting-started/lovelace.png' alt='Screenshot of the masonry view'>
+Screenshot of the masonry view.
+</p>
+
+It sorts cards in columns based on their `card size`. If you want to group some cards you have to use [horizontal stack](/dashboards/horizontal-stack/), [vertical stack](/dashboards/vertical-stack/), or [grid](/dashboards/grid/) cards.
 
 {% configuration %}
 type:
@@ -14,3 +20,8 @@ type:
   description: "`masonry`"
   type: string
 {% endconfiguration %}
+
+## Related topics
+
+- [Panel view](/dashboards/panel/)
+- [Sidebar view](/dashboards/sidebar/)

source/_dashboards/panel.markdown

@@ -5,11 +5,16 @@ sidebar_label: Panel
 description: "The panel view shows a single card in the full width of the screen."
 ---
 
-The view must have exactly one card. This card is rendered full-width.
+The panel view must have exactly one card. This card is rendered full-width.
+
+<p class='img'>
+<img src='/images/dashboards/panel_view.png' alt='Screenshot of the panel view'>
+Screenshot of the panel view.
+</p>
 
 This view doesn't have support for badges.
 
-This view is good when using cards like `map`, `stack` or `picture-elements`.
+This view is good when using cards like [map](/dashboards/map/), [horizontal stack](/dashboards/horizontal-stack/), [vertical stack](/dashboards/vertical-stack/), [picture elements](/dashboards/picture-elements/), or [picture glance](/dashboards/picture-glance/).
 
 {% configuration %}
 type:
@@ -17,3 +22,8 @@ type:
   description: "`panel`"
   type: string
 {% endconfiguration %}
+
+## Related topics
+
+- [Masonry view](/dashboards/masonry/)
+- [Sidebar view](/dashboards/sidebar/)

source/_dashboards/sidebar.markdown

@@ -7,14 +7,21 @@ description: "The sidebar view has 2 columns, a wide one and a smaller one on th
 
 The sidebar view has 2 columns, a wide one and a smaller one on the right.
 
+<p class='img'>
+<img src='/images/dashboards/sidebar_view.png' alt='Screenshot of the sidebar view'>
+Screenshot of the sidebar view used for the energy dashboard.
+</p>
+
 This view doesn't have support for badges.
 
-To change a view to edit mode, or to change the location of a card, enable edit mode:
+You can set if a card should be placed in the main (left) column of the sidebar column (right), by selecting the arrow right or left arrow in the bar underneath the card.
-Click the menu (three dots at the top right of the screen) and then **Edit Dashboard**.
 
-You can set if a card should be placed in the main (left) column of the sidebar column (right), by pressing the arrow right or left arrow in the bar underneath the card.
+<p class='img'>
+<img src='/images/dashboards/sidebar_view_move_card.png' alt='Screenshot showing how to move a card between sidebar and main view'>
+Screenshot showing how to move a card between sidebar and main view.
+</p>
 
-On mobile all cards are rendered in 1 column and kept in the order of the cards in the config.
+On mobile, all cards are rendered in 1 column and kept in the order of the cards in the config.
 
 ## View config:
 
@@ -47,3 +54,8 @@ cards:
     view_layout:
       position: sidebar
 ```
+
+## Related topics
+
+- [Panel view](/dashboards/panel/)
+- [Masonry view](/dashboards/masonry/)