Merge pull request #16 from froboy/DS-108-video-links

docs: DS-108 video links
YCloudYUSA · Dec 16, 2022 · 9726dea · 9726dea
2 parents 1ec965e + 3fd2895
commit 9726dea
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 15 deletions.
diff --git a/content/en/docs/user-documentation/layout-builder/_index.md b/content/en/docs/user-documentation/layout-builder/_index.md
@@ -4,11 +4,15 @@ title: Layout Builder
 
 Layout Builder is a powerful new page-building addition to your YMCA website.
 
-> Drupal's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, across types of content, or even create custom landing pages with an easy-to-use drag-and-drop interface.
+> Drupal's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, across types of content, or even create custom landing pages with an easy-to-use drag-and-drop interface. 
+> 
+> \- [Layout Builder on Drupal.org](https://www.drupal.org/docs/8/core/modules/layout-builder)
 
 ## Getting Started with Layout Builder
 
-YMCA Website Services 9.2.12 introduces a new Content Type: **Landing Page (Layout Builder)**. This new page will allow you to utilize "Custom Blocks" in "Sections" with different "Layouts" to build pages. Please contact your development partner if you need assistance updating the latest version.
+YMCA Website Services 9.2.12 introduces a new Content Type: **Landing Page (Layout Builder)**. This new page will allow you to build pages using **[Sections](#sections)** with different **[Layouts](#layouts)** that contain **[Custom Blocks](#blocks)**. Please contact your development partner if you need assistance updating the latest version.
+
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/videoseries?list=PL6Wo-UX6nhySupPRWKqy0BFlzYLzYR8rB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ### Creating a new page
 

diff --git a/content/en/docs/user-documentation/layout-builder/accordion/_index.md b/content/en/docs/user-documentation/layout-builder/accordion/_index.md
@@ -3,11 +3,15 @@ title: Accordion
 description: Expandable pairs of question/answer or header/section fields.
 ---
 
+{{< youtube QczjkFL23W0 >}}
+
+-----
+
 **Designs:** [Mobile](<../../../../../../assets/img/designs/lb/Accordion Mobile.png>) | [Desktop](<../../../../../../assets/img/designs/lb/Accordion Desktop.png>)
 
 To use the Accordion block:
 
-- Click **Add block** > **Create custom block** > **Accordion**
+- Click the **Layout** tab at the top of your page **Accordion**
 
 Fill in the content fields:
 

diff --git a/content/en/docs/user-documentation/layout-builder/cards/_index.md b/content/en/docs/user-documentation/layout-builder/cards/_index.md
@@ -3,13 +3,17 @@ title: Cards
 description: Flexible card-style components that allow up to 4 cards to display across the page depending on the chosen layout.
 ---
 
+{{< youtube vrtcxXl31f4 >}}
+
+-----
+
 The Cards block is similar to the [Grid CTA](../grid-cta) block, but has more fields and places the image behind the item content.
 
 **Designs:** [Mobile](<../../../../../../assets/img/designs/lb/Cards Mobile.png>) | [Desktop](<../../../../../../assets/img/designs/lb/Cards Desktop.png>)
 
 To use the Cards block:
 
-- Click **Add block** > **Create custom block** > **Cards**
+- Click the **Layout** tab at the top of your page **Cards**
 
 Fill in the content fields:
 

diff --git a/content/en/docs/user-documentation/layout-builder/carousel/_index.md b/content/en/docs/user-documentation/layout-builder/carousel/_index.md
@@ -3,11 +3,15 @@ title: Carousel
 description: A full-width display with multiple sets of a header, description, and call to action overlaid on top of an image.
 ---
 
+{{< youtube zVT1St0UXsk >}}
+
+-----
+
 **Designs:** [Mobile](<../../../../../../assets/img/designs/lb/Carousels Mobile.png>) | [Desktop](<../../../../../../assets/img/designs/lb/Carousels Desktop.png>)
 
 To use the Carousel block:
 
-- Click **Add block** > **Create custom block** > **Carousel**
+- Click the **Layout** tab at the top of your page **Carousel**
 
 Fill in the content fields:
 

diff --git a/content/en/docs/user-documentation/layout-builder/grid-cta/_index.md b/content/en/docs/user-documentation/layout-builder/grid-cta/_index.md
@@ -3,13 +3,17 @@ title: Grid CTA
 description: Sets of content with a headline, description, and link displayed in 2 to 4-item wide rows, with the option to include icons or images.
 ---
 
+{{< youtube TtABGaClzPw >}}
+
+-----
+
 The Grid CTA block is similar to the [Cards](../cards) block, but allows for more flexible items with a slightly more freeform design. 
 
 **Designs:** [Mobile](<../../../../../../assets/img/designs/lb/Grid Content Mobile.png>) | [Desktop](<../../../../../../assets/img/designs/lb/Grid Content Desktop.png>)
 
 To use the Grid CTA block:
 
-- Click **Add block** > **Create custom block** > **Grid CTA**
+- Click the **Layout** tab at the top of your page **Grid CTA**
 
 Fill in the content fields:
 

diff --git a/content/en/docs/user-documentation/layout-builder/hero-banner/_index.md b/content/en/docs/user-documentation/layout-builder/hero-banner/_index.md
@@ -3,11 +3,15 @@ title: Hero Banner
 description: A full-width, almost full-height display with a header, description, and call to action overlaid on an image.
 ---
 
+{{< youtube kerfY3EBESA >}}
+
+-----
+
 **Designs:** [Mobile](<../../../../../../assets/img/designs/lb/Hero Banner Mobile.png>) | [Desktop](<../../../../../../assets/img/designs/lb/Hero Banner Desktop.png>)
 
 To use the Hero Banner block:
 
-- Click **Add block** > **Create custom block** > **Hero Banner**
+- Click the **Layout** tab at the top of your page **Hero Banner**
 
 Fill in the content fields:
 

diff --git a/content/en/docs/user-documentation/layout-builder/ping-pong/_index.md b/content/en/docs/user-documentation/layout-builder/ping-pong/_index.md
@@ -3,11 +3,19 @@ title: Ping-Pong
 description: Usually paired sets of full-width page components that include media, header, description, and call to action arranged horizontally.
 ---
 
+{{< youtube BgEL_YU-DiA >}}
+
+-----
+
 **Designs:** [Mobile](<../../../../../../assets/img/designs/lb/Ping Pong Mobile.png>) | [Desktop](<../../../../../../assets/img/designs/lb/Ping Pong Desktop.png>)
 
 To use the Ping-Pong block:
 
-- Click **Add block** > **Create custom block** > **Ping-Pong**
+- Click the **Layout** tab at the top of your page
+- Scroll to the location on the page where you want to add a block
+- Click **Add block**
+- In the sidebar, click **Create custom block**
+- Choose  **Ping-Pong**
 
 Fill in the content fields:
 

diff --git a/content/en/docs/user-documentation/layout-builder/promo-card/_index.md b/content/en/docs/user-documentation/layout-builder/promo-card/_index.md
@@ -3,11 +3,19 @@ title: Promo Card
 description: A title, headline, description, and link that usually display in the right or left sidebar.
 ---
 
+{{< youtube dybusSNmTPc >}}
+
+-----
+
 **Designs:** [Mobile](<../../../../../../assets/img/designs/lb/Promo Cards Mobile.png>) | [Desktop](<../../../../../../assets/img/designs/lb/Promo Cards Desktop.png>)
 
 To use the Promo Card block:
 
-- Click **Add block** > **Create custom block** > **Promo Card**
+- Click the **Layout** tab at the top of your page
+- Scroll to the location on the page where you want to add a block
+- Click **Add block**
+- In the sidebar, click **Create custom block**
+- Choose  **Promo Card**
 
 Fill in the content fields:
 

diff --git a/content/en/docs/user-documentation/layout-builder/simple-menu/_index.md b/content/en/docs/user-documentation/layout-builder/simple-menu/_index.md
@@ -3,11 +3,15 @@ title: Simple Menu
 description: A simple 1-level sidebar menu that can display in either the right or left sidebar area.
 ---
 
+{{< youtube UZVurubBti8 >}}
+
+-----
+
 **Designs:** [Mobile](<../../../../../../assets/img/designs/lb/Simple Menu Mobile.png>) | [Desktop](<../../../../../../assets/img/designs/lb/Simple Menu Desktop.png>)
 
 To use the Simple Menu block:
 
-- Click **Add block** > **Create custom block** > **Simple Menu**
+- Click the **Layout** tab at the top of your page **Simple Menu**
 
 Fill in the content fields:
 

diff --git a/content/en/docs/user-documentation/layout-builder/statistics/_index.md b/content/en/docs/user-documentation/layout-builder/statistics/_index.md
@@ -3,11 +3,19 @@ title: Statistics
 description: Infographic-like display that highlights relevant statistics to users.
 ---
 
+{{< youtube _RQcnMw4X5U >}}
+
+-----
+
 **Designs:** [Mobile](<../../../../../../assets/img/designs/lb/Statistics Mobile.png>) | [Desktop](<../../../../../../assets/img/designs/lb/Statistics Desktop.png>)
 
 To use the Statistics block:
 
-- Click **Add block** > **Create custom block** > **Statistics**
+- Click the **Layout** tab at the top of your page
+- Scroll to the location on the page where you want to add a block
+- Click **Add block**
+- In the sidebar, click **Create custom block**
+- Choose  **Statistics**
 
 Fill in the content fields:
 

diff --git a/content/en/docs/user-documentation/layout-builder/table/_index.md b/content/en/docs/user-documentation/layout-builder/table/_index.md
@@ -3,15 +3,25 @@ title: Table
 description: Allows users to be able to view responsive tables within a page.
 ---
 
+{{< youtube buxLFLUhiMo >}}
+
+-----
+
+The Table block also allows users to add simple content to the Landing Page (Layout Builder) content type.
+
 **Designs:** [Mobile](<../../../../../../assets/img/designs/lb/Tables Mobile.png>) | [Desktop](<../../../../../../assets/img/designs/lb/Tables Desktop.png>)
 
 To use the Table block:
 
-- Click **Add block** > **Create custom block** > **Table**
+- Click the **Layout** tab at the top of your page
+- Scroll to the location on the page where you want to add a block
+- Click **Add block**
+- In the sidebar, click **Create custom block**
+- Choose  **Table**
 
 Fill in the content fields:
 
-- **Title** (required): Never displayed, even if "Display Title" is checked. For administrative use only.
+- **Title** (required): Never displayed, even if _Display Title_ is checked. For administrative use only.
 - **Section title**: Displayed as a heading above the item.
 - **Section subtitle**: Displayed below the heading.
 - **Body**: A full text editor to add tables or other content to the page. 

diff --git a/content/en/docs/user-documentation/layout-builder/tabs/_index.md b/content/en/docs/user-documentation/layout-builder/tabs/_index.md
@@ -3,11 +3,19 @@ title: Tabs
 description: Gives users the ability to switch page views by selecting in-page tabs.
 ---
 
+{{< youtube I3GPm718hn8 >}}
+
+-----
+
 **Designs:** [Mobile](<../../../../../../assets/img/designs/lb/Tabs Mobile.png>) | [Desktop](<../../../../../../assets/img/designs/lb/Tabs Desktop.png>)
 
 To use the Tabs block:
 
-- Click **Add block** > **Create custom block** > **Tabs**
+- Click the **Layout** tab at the top of your page
+- Scroll to the location on the page where you want to add a block
+- Click **Add block**
+- In the sidebar, click **Create custom block**
+- Choose  **Tabs**
 
 Fill in the content fields:
 

diff --git a/content/en/docs/user-documentation/layout-builder/webform/_index.md b/content/en/docs/user-documentation/layout-builder/webform/_index.md
@@ -3,11 +3,19 @@ title: Webform
 description: Embed an existing webform on a page.
 ---
 
+{{< youtube dsHpcLDjLEo >}}
+
+-----
+
 **Designs:** [Mobile](<../../../../../../assets/img/designs/lb/Webforms Mobile.png>) | [Desktop](<../../../../../../assets/img/designs/lb/Webforms Desktop.png>)
 
 To use the Webform block:
 
-- Click **Add block** > **Create custom block** > **Webform**
+- Click the **Layout** tab at the top of your page
+- Scroll to the location on the page where you want to add a block
+- Click **Add block**
+- In the sidebar, click **Create custom block**
+- Choose  **Webform**
 
 Fill in the content fields: