UI Builder: Updated format of Areas section

15/umbraco-ui-builder/areas/overview.md

@@ -1,19 +1,17 @@
 ---
-description: Choosing an area to connect Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Learn how to choose and configure the appropriate area for connecting Umbraco UI builder for Umbraco.
 ---
 
 # Areas
 
-There are different areas of the Umbraco UI that Umbraco UI Builder can be injected into. Before you get to managing your actual content you need to choose which area makes the most sense to present that data in. Then you can review how to go about configuring that particular type of area.
+Umbraco UI Builder can be integrated into different areas of the Umbraco Backoffice. Before you start managing content, it is essential to decide which area best suits the presentation of your data. Each area offers unique features for displaying and interacting with content.
 
-Choose an area type from the list below to find out more.
+Once you have identified the most appropriate area, you can proceed with configuring it to suit your needs.
 
-{% content-ref url="sections.md" %}
-[sections.md](sections.md)
-{% endcontent-ref %}
-{% content-ref url="dashboards.md" %}
-[dashboards.md](dashboards.md)
-{% endcontent-ref %}
-{% content-ref url="context-apps.md" %}
-[context-apps.md](context-apps.md)
-{% endcontent-ref %}
+## Key Areas for Integration
+
+- [Sections](sections.md): The Sections area allows you to organize your content in a structured layout, enabling users to navigate different parts of the backoffice.
+- [Dashboards](dashboards.md): The Dashboards area is ideal for creating custom views that provide quick access to key information and statistics.
+- [Context Apps](context-apps.md): Context Apps provide contextual tools and information based on the specific content a user is working with.
+
+Selecting the correct area is essential to ensure your UI is both functional and user-friendly. Consider the nature of your content and the tasks users need to perform when deciding which area to use.

15/umbraco-ui-builder/areas/sections.md

@@ -1,203 +1,227 @@
 ---
-description: Configuring sections in Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Configuring and customizing sections in Umbraco UI Builder to organize and manage the backoffice interface effectively.
 ---
 
 # Sections
 
-A section is a distinct area of the Umbraco backoffice, such as content, media, etc. The section is accessed via a link in the main menu at the top of the Umbraco interface. Umbraco UI Builder allows you to define multiple sections in order to organise the management of your models into logical sections.
+A section in Umbraco represents a distinct area within the backoffice, such as content, media, and so on. Sections are accessible via links in the main menu at the top of the Umbraco interface. Using Umbraco UI Builder, multiple sections can be defined to organize the management of models logically.
 
 ![Sections](../images/sections.png)
 
-## Defining a section
+## Defining a Section
 
-You can define a section by calling one of the `AddSection` methods on the root level `UIBuilderConfigBuilder` instance.
+Sections are defined using the `AddSection` method on the root-level `UIBuilderConfigBuilder` instance.
 
-### **AddSection(string name, Lambda sectionConfig = null) : SectionConfigBuilder**
+### Using the `AddSection()` Method
 
-Adds a section to the Umbraco menu with the given name.
+This method adds a new section to the Umbraco menu with the specified name, allowing custom areas for organizing content in the backoffice.
+
+#### Method Syntax
+
+```cs
+AddSection(string name, Lambda sectionConfig = null) : SectionConfigBuilder
+```
+
+#### Example
 
 ```csharp
-// Example
 config.AddSection("Repositories", sectionConfig => {
     ...
 });
 ```
 
-### **AddSectionBefore(string beforeAlias, string name, Lambda sectionConfig = null) : SectionConfigBuilder**
+### Using the `AddSectionBefore()` Method
 
-Adds a section to the Umbraco menu with the given name **before** the section with the given alias.
+This method adds a section before another section with the specified alias, allowing for customized ordering of sections in the backoffice.
 
 ```csharp
-// Example
 config.AddSectionBefore("settings", "Repositories", sectionConfig => {
     ...
 });
 ```
 
-### **AddSectionAfter(string afterAlias, string name, Lambda sectionConfig = null) : SectionConfigBuilder**
+**Code Reference:** `AddSectionBefore(string beforeAlias, string name, Lambda sectionConfig = null) : SectionConfigBuilder`
+
+### Using the `AddSectionAfter()` Method
 
-Adds a section to the Umbraco menu with the given name **after** the section with the given alias.
+This method adds a section after another section with the specified alias, allowing for a custom order of sections in the backoffice.
 
 ```csharp
-// Example
 config.AddSectionAfter("media", "Repositories", sectionConfig => {
     ...
 });
 ```
 
-## Changing a section alias
+**Code Reference:** `AddSectionAfter(string afterAlias, string name, Lambda sectionConfig = null) : SectionConfigBuilder`
 
-### **SetAlias(string alias) : SectionConfigBuilder**
+## Customizing the Section Alias
 
-Sets the alias of the section.
+### Setting a Custom Alias with `SetAlias()` Method
 
-**Optional:** When adding a new section, an alias is automatically generated from the supplied name for you. However, if you need a specific alias you can use the `SetAlias` method to override this.
+This method sets a custom alias for the section.
+
+*Optional:* By default, an alias is automatically generated from the section's name. To customize the alias, the `SetAlias()` method can be used.
 
 ```csharp
-// Example
 sectionConfig.SetAlias("repositories");
 ```
 
-## Configuring the section tree
+**Code Reference:** `SetAlias(string alias) : SectionConfigBuilder`
+
+## Configuring the Section Tree
 
-### **Tree(Lambda treeConfig = null) : TreeConfigBuilder**
+### Using the `Tree()` Method for Configuration
 
-Accesses the tree config of the current section. For more information check the [Trees documentation](trees.md).
+This method configures the tree structure for the section, which is used to organize content types. For more information, see the [Trees](trees.md) article.
 
 ````csharp
-// Example
 sectionConfig.Tree(treeConfig => {
     ...
 });
 ````
 
-## Adding a dashboard to the section
+**Code Reference:** `Tree(Lambda treeConfig = null) : TreeConfigBuilder`
+
+## Adding Dashboards to the Section
 
-### **AddDashboard(string name, Lambda dashboardConfig = null) : DashboardConfigBuilder**
+### Adding a Dashboard with the `AddDashboard()` Method
 
-Adds a dashboard with the given name. For more information check the [Dashboards documentation](dashboards.md).
+This method adds a dashboard to the section with the specified alias, providing tools and features for content management. For more information, see the [Dashboards](dashboards.md) article.
 
 ```csharp
-// Example
 sectionConfig.AddDashboard("Team", dashboardConfig => {
     ...
 });
 ```
 
-#### **AddDashboardBefore(string beforeAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder**
+**Code Reference:** AddDashboard(string name, Lambda dashboardConfig = null) : DashboardConfigBuilder
 
-Adds a dashboard with the given name **before** the dashboard with the given alias. For more information check the [Dashboards documentation](dashboards.md).
+### Using `AddDashboardBefore()` to Place a Dashboard
+
+This method adds a dashboard before another dashboard with the specified alias, allowing custom placement in the section. For more information, see the [Dashboards](dashboards.md) article.
 
 ```csharp
-// Example
 sectionConfig.AddDashboardBefore("contentIntro", "Team", dashboardConfig => {
     ...
 });
 ```
 
-#### **AddDashboardAfter(string afterAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder**
+**Code Reference:** `AddDashboardBefore(string beforeAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder`
+
+### Using `AddDashboardAfter()` to Place a Dashboard
 
-Adds a dashboard with the given name **after** the dashboard with the given alias. For more information check the [Dashboards documentation](dashboards.md).
+This method adds a dashboard after another dashboard with the specified alias, giving control over dashboard order. For more information, see the [Dashboards](dashboards.md) article.
 
 ```csharp
-// Example
 sectionConfig.AddDashboardAfter("contentIntro", "Team", dashboardConfig => {
     ...
 });
 ```
 
-## Extending an existing section
+**Code Reference:** `AddDashboardAfter(string afterAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder`
 
-You can extend existing sections by adding Umbraco UI Builder trees and dashboards, context apps, and virtual subtrees. This can be done by calling the `WithSection` method on the root level `UIBuilderConfigBuilder` instance.
+## Extending Existing Sections
 
-### **WithSection(string alias, Lambda sectionConfig = null) : WithSectionConfigBuilder**
+You can extend existing sections by adding Umbraco UI Builder trees and dashboards, context apps, and virtual subtrees. This can be done by calling the `WithSection` method on the root-level `UIBuilderConfigBuilder` instance.
 
-Starts a sub-configuration for the existing Umbraco section with the given alias.
+### Extending an Existing Section with `WithSection()`
+
+This method extends an existing section with additional configuration, enabling more customization for existing areas.
 
 ```csharp
-// Example
 config.WithSection("member", withSectionConfig => {
     ...
 });
 ```
 
-## Adding a tree to an existing section
+**Code Reference:** `WithSection(string alias, Lambda sectionConfig = null) : WithSectionConfigBuilder`
+
+## Adding Trees to an Existing Section
 
-### **AddTree(string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder**
+### Using the `AddTree()` Method
 
-Adds a tree to the current section. For more information check the [Trees documentation](trees.md).
+This method adds a tree to the section, helping to visualize and organize content types. For more information, see the [Trees](trees.md) article.
 
 ````csharp
-// Example
 withSectionConfig.AddTree("My Tree", "icon-folder", treeConfig => {
     ...
 });
 ````
 
-#### **AddTree(string groupName, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder**
+**Code Reference:** `AddTree(string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder`
+
+### Grouping Trees with `AddTree()` Method
 
-Adds a tree to the current section in a group with the given name. For more information check the [Trees documentation](trees.md).
+This method adds a tree within a specified group, improving content organization by grouping related trees together. For more information, see the [Trees](trees.md) article.
 
 ````csharp
-// Example
 withSectionConfig.AddTree("My Group", "My Tree", "icon-folder", treeConfig => {
     ...
 });
 ````
 
-#### **AddTreeBefore(string treeAlias, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder**
+**Code Reference:** `AddTree(string groupName, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder`
+
+## Adding a Tree Before or After an Existing Tree
+
+### Using `AddTreeBefore()` to Position a Tree
 
-Adds a tree to the current section **before** the tree with the given alias. For more information check the [Trees documentation](trees.md).
+This method adds a tree before another tree within the section, allowing you to customize the tree order. For more information, see the [Trees](trees.md) article.
 
 ````csharp
-// Example
 withSectionConfig.AddTreeBefore("member", "My Tree", "icon-folder", treeConfig => {
     ...
 });
 ````
 
-#### **AddTreeAfter(string treeAlias, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder**
+**Code Reference:** `AddTreeBefore(string treeAlias, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder`
 
-Adds a tree to the current section **after** the tree with the given alias. For more information check the [Trees documentation](trees.md).
+### Using `AddTreeAfter()` to Position a Tree
+
+This method adds a tree after another tree within the section, enabling specific ordering of trees. For more information, see the [Trees](trees.md) article.
 
 ````csharp
-// Example
 withSectionConfig.AddTreeAfter("member", "My Tree", "icon-folder", treeConfig => {
     ...
 });
 ````
 
-## Adding a dashboard to an existing section
+**Code Reference:** `AddTreeAfter(string treeAlias, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder`
+
+## Adding a Dashboard to an Existing Section
 
-### **AddDashboard (string name, Lambda dashboardConfig = null) : DashboardConfigBuilder**
+### Using the `AddDashboard()` Method
 
-Adds a dashboard with the given name. For more information check the [Dashboards documentation](dashboards.md).
+This method adds a new dashboard to the section with the specified name. For more information, see the [Dashboards](dashboards.md) article.
 
 ```csharp
-// Example
 withSectionConfig.AddDashboard("Team", dashboardConfig => {
     ...
 });
 ```
 
-### **AddDashboardBefore (string beforeAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder**
+**Code Reference:** `AddDashboard (string name, Lambda dashboardConfig = null) : DashboardConfigBuilder`
+
+### Using the `AddDashboardBefore()` Method
 
-Adds a dashboard with the given name **before** the dashboard with the given alias. For more information check the [Dashboards documentation](dashboards.md).
+This method adds a dashboard before the dashboard with the specified alias. For more information, see the [Dashboards](dashboards.md) article.
 
 ```csharp
-// Example
 withSectionConfig.AddDashboardBefore("contentIntro", "Team", dashboardConfig => {
     ...
 });
 ```
 
-### **AddDashboardAfter (string afterAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder**
+**Code Reference:** `AddDashboardBefore (string beforeAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder`
 
-Adds a dashboard with the given name **after** the dashboard with the given alias. For more information check the [Dashboards documentation](dashboards.md).
+### Using the `AddDashboardAfter()` Method
+
+This method adds a dashboard after the dashboard with the specified alias. For more information, see the [Dashboards](dashboards.md) article.
 
 ```csharp
-// Example
 withSectionConfig.AddDashboardAfter("contentIntro", "Team", dashboardConfig => {
     ...
 });
 ```
+
+**Code Reference:** `AddDashboardAfter (string afterAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder`

15/umbraco-ui-builder/areas/summary-dashboards.md

@@ -1,26 +1,27 @@
 ---
-description: Configuring a summary dashboard in Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Configuring a summary dashboard to provide an overview of collections within a section.
 ---
 
 # Summary Dashboards
 
-A summary dashboard is automatically displayed at the root of a defined Umbraco UI Builder section. It displays summaries of collections found within it that are told to display on the dashboard. It also provides quick links to jump to that collections list view. It can also add quickly a new entry to that collection (if the collection isn't read-only).
+A summary dashboard appears automatically at the root of an Umbraco UI Builder section. It provides an overview of key collections within that section, enabling quick access to list views. Additionally, it allows for adding new entries to the collection, provided the collection is not set to read-only.
 
-![Summary Dashboard](../images/dashboard.png)
+By summarizing important data and simplifying navigation, the summary dashboard improves content management efficiency.
 
-## Showing a collection on a summary dashboard
+![Summary Dashboard](../images/dashboard.png)
 
-Showing a collection in the summary dashboard is controlled via the collection configuration.
+## Displaying a Collection on the Summary Dashboard
 
-### **ShowOnSummaryDashboard() : CollectionConfigBuilder<TEntityType>**
+To display a collection on the summary dashboard, use the `ShowOnSummaryDashboard()` method in the collection configuration.
 
-Sets the collection to display on the summary dashboard.
+### Configuration Example
 
 ````csharp
-// Example
 collectionConfig.ShowOnSummaryDashboard();
 ````
 
+**Code Reference:** `ShowOnSummaryDashboard() : CollectionConfigBuilder<TEntityType>`
+
 {% hint style="warning" %}
-Only section root level collections can be shown on the summary dashboard.
+Only root-level collections within a section can be displayed on the summary dashboard.
 {% endhint %}