Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Onboarding dashboard: add small note about sections view #35596

Merged
merged 2 commits into from
Nov 6, 2024
Merged

Onboarding dashboard: add small note about sections view #35596

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cebdbe7
Onboarding dashboard: add small note about sections view
c0ffeeca7 Nov 6, 2024
01c501b
add screenshot of sections view
c0ffeeca7 Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 15 additions & 5 deletions source/getting-started/onboarding_dashboard.markdown
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,18 @@ The screenshot shows an **Overview** dashboard with many [cards](/dashboards/car

### Views

The icons in the blue menu bar on top each represent a different tab. Each tab contains a [view](/dashboards/views/).
The following screenshot shows a fully populated dashboard in [masonry view](/dashboards/masonry/) layout. The icons in the blue menu bar on top each represent a different tab. Each tab contains a [view](/dashboards/views/).

<p class='img'>
<img src='/images/getting-started/lovelace.png' alt='Screenshot of a populated Overview dashboard'>
Screenshot of a populated Overview dashboard with many devices.
<img src='/images/getting-started/lovelace.png' alt='Screenshot of a populated Overview dashboard in masonry view'>
Screenshot of a populated Overview dashboard in masonry view layout.
</p>

The following screenshot shows a fully populated dashboard in [sections view](/dashboards/sections/) layout.

<p class='img'>
<img src="/images/dashboards/section_view.png" alt="A fully populated dashboard in Sections view layout"/>
A fully populated dashboard in Sections view layout
</p>

### Multiple dashboards
Expand All @@ -33,7 +40,7 @@ In the sidebar on the left, you see the names of different dashboards. Home Assi

The **Overview** [dashboard](/dashboards/) is the first page you see after the [onboarding process](/getting-started/onboarding).

If you just onboarded, your dashboard will be nearly empty. It shows cards for devices that were detected automatically. Your dashboard may look quite different, depending on the devices that you have at home.
If you just onboarded, your dashboard will be nearly empty. It is using the [masonry view](/dashboards/masonry/) layout and shows cards for devices that were detected automatically. Your dashboard may look quite different, depending on the devices that you have at home.

<p class='img'>
<img src='/images/getting-started/onboarding_dashboard_raspi_bluetooth.png' alt='Screenshot of the Overview dashboard with Bluetooth devices'>
Expand Down Expand Up @@ -123,13 +130,16 @@ In the following steps, we will create a new dashboard and edit some card settin
- When you are done, in the top right corner, select **Done**.
14. If you want to change any of the other cards, select the **Edit** button on the card.
15. Congratulations! You have completed your first dashboard customization.
16. While your dashboard is still small, this is a good moment to [migrate it into sections view](/dashboards/views/#migrating-a-view-into-a-sections-view).
- The sections view offers features such as drag and drop, customizing number and width of columns, and more heading options.
- To learn more, head over to the documentation on [section view](/dashboards/sections/).

## Learning more about dashboards

If you want to learn more about dashboards, views, and cards, take a look at these topics:

1. Take a look at the [introduction to dashboards](/dashboards/) and learn about [multiple dashboards](/dashboards/dashboards).
2. Learn about the different [view types](/dashboards/views/).
2. Learn more about [view types](/dashboards/views/)
3. Learn how to [add cards](/dashboards/cards/#adding-cards-to-your-dashboard) to a view.

## Next step: integrations
Expand Down