Skip to content

Commit

Permalink
Merge pull request #58 from YCloudYUSA/sept-updates
Browse files Browse the repository at this point in the history
feat: Sept updates keep on coming...
  • Loading branch information
podarok authored Oct 3, 2023
2 parents cb80c44 + ecfd514 commit c5dc389
Show file tree
Hide file tree
Showing 16 changed files with 323 additions and 29 deletions.
21 changes: 21 additions & 0 deletions content/en/docs/content-structure/content-types/lb-landing-page.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
title: Landing Page (Layout Builder)
---

Landing Page content type is used to add Landing Pages to your website using Layout Builder widgets.

This page is managed with Layout Builder. You may want to uncheck "Publish Content" before creating a page, use the "Layout" tab to build the content, then Publish when the page is complete. See our [User Guide](../../user-documentation/layout-builder) for help.

## Fields

| Label | Machine Name | Required | Description | Field Settings | Notes |
|------------------|------------------------|----------|-----------------------------------------------------|--------------------------------|-------|
| Title | title | yes | Title of Landing Page | | | |
| **Metadata** | Field group |
| Meta description | field_meta_description | no | Short text used for metatags and cards | Text (plain, long) | |
| Meta image | field_meta_image | no | Media image reference for use in metatags and cards | Entity reference (Media image) | |
| Meta tags | field_meta_tags | no | Provided by Metatag module | | |

## URL pattern

Content type is using following pattern: `[node:title]`
137 changes: 129 additions & 8 deletions content/en/docs/howto/migrate-to-lb/_index.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,137 @@
---
title: How to migrate content into Layout Builder
linkTitle: "migrate to Layout Builder"
description: Making the leap to Layout Builder can seem daunting, but we have resources to help.
description: Leaping to Layout Builder can seem daunting, but we have resources to help.
---

Before you start your migration, we recommend getting a better understanding of your current site with a [Content Audit](../content-audit).
Before you start your migration, we recommend you:

- understand your current site with a [Content Audit](../content-audit),
- familiarize yourself with the [new Layout Builder Components](../../user-documentation/layout-builder/),
- watch our [comparison of Paragraphs and Layout Builder](https://youtu.be/YdYaYE0bd6w?t=794&si=xPvRoLM0O-VxABDZ), and
- see a side-by-side demo of the [old vs. new page building experiences](https://youtu.be/jrRY3q2lP4s).

## Plan your migration

- Familiarize yourself with [new Layout Builder Components](../../user-documentation/layout-builder/)
- Get organized - Write new content, complete audit spreadsheet, identify components you will need
- Identify key pages - start with your home page and important top-level pages
- Programs, Locations (Branches, Camps, etc.), Memberships, Articles/Blogs, Events, Schedules, etc.
- Create a plan - decide which pages you want to build first
- Most → Least complex
The migration from Paragraphs to Layout Builder is not a small one, but it can be done in bite-sized pieces and spread out over some time if necessary. We recommend working with a [partner agency](https://ds.ymca.org/partners) to assist you through the process.

> **TIP**: As you work through the migration, the new pieces of your site _will_ look different than others. Help members through the process with some messaging in an [Alert](../../user-documentation/content-types/alert) or [news post](../../user-documentation/content-types/lb-article) letting them know that things will be changing.
## Decide where to start

If you're doing your migration throughout your regular business, without starting from scratch (sometimes called a "lazy migration"), it helps to identify a strategy for planning the migration. These are a few possible strategies:

### A campaign or goal

If you have an upcoming marketing campaign you could build one or a few brand new Landing Pages with Layout Builder to try out the process. This way you're easing both your editors and members into the new designs without getting too deep.

If you have a natural pause in events (maybe over a holiday) or a big series coming up you could use that as the break point for new events. Old events don't necessarily have to be converted to the new design as they're not often viewed after their date has passed.

### A section of the site

Maybe you want to ease into the process with some lesser-used pages, maybe you want to change the home page and top-level menu items to show off the new designs right from the outset. Either way, you can decide on a section and carve off a few pages at a time.

### A content type

Events or News articles are a good option to try out the new designs, although you'll need to ensure any Landing Pages that display lists of that content are also updated. Branch pages can be converted one by one without changing their listing on the Locations page.

## Prepare your content

Once you know what you're going to move, you'll want to get the content ready to migrate. Most text will need to be copied and pasted to the new pages (this is a great opportunity for review), but images and documents will be able to be re-used from the [Media Library](../../user-documentation/media).

It could be helpful to print or screenshot pages (Firefox can capture a [full-page screenshot](https://support.mozilla.org/en-US/kb/take-screenshots-firefox)) and then annotate them to decide how each section of the page will map to its Layout Builder component. You could even use the [Wayback Machine](https://web.archive.org/) to save a snapshot of the page.

### Component mapping

While the exact mappings are up to each site's content editors, here are some possible mappings from Paragraphs to Layout Builder

> Paragraph
> : the Layout Builder component it maps to.
1 Column
2 Columns
3 Columns
4 Columns
Secondary Description and Sidebar
: These paragraphs can be replicated using 1-4 column [Layouts](../../user-documentation/layout-builder/#layouts)

Activity Finder
: [Activity Finder](../../user-documentation/layout-builder/activity-finder)

All Amenities
: [Branch Amenities](../../user-documentation/content-types/branch/#layout-builder-blocks)

Banner
Small Banner
: [Banner](../../user-documentation/layout-builder/banner)

Blog Posts Listing
Featured Blog Posts
Featured News Posts
Latest Blog Posts
Latest News Posts
News Posts Listing
: [Articles Filter, Articles Listing, Featured Articles](../../user-documentation/layout-builder/article-views)

Camp Menu
: [Camp Menu](../../user-documentation/content-types/camp/#camp-menus)

Categories Listing
: TBD

Code
: [Code](../../user-documentation/layout-builder/code)

Date Block
: None

Embedded GroupEx Pro Schedule
: Due to changes in the GroupEx Pro embed functionality, we recommend moving to a [Code](../../user-documentation/layout-builder/code) block.

FAQ
: [Accordion](../../user-documentation/layout-builder/accordion)

Featured Content
Story Card
: [Cards](../../user-documentation/layout-builder/cards) or [Grid CTA](../../user-documentation/layout-builder/grid-cta)

Gallery
: [Carousel](../../user-documentation/layout-builder/carousel)

Grid Content
: [Grid CTA](../../user-documentation/layout-builder/grid-cta) or [Icon Grid](../../user-documentation/layout-builder/icon-grid)

Limited Time Offer
: Banner (small variant) or Alert

Membership Calculator Paragraph
: [Membership Calculator](../../user-documentation/membership)

Promo Card
: [Promo Card](../../user-documentation/layout-builder/promo-card)

Simple Content
: [Table](../../user-documentation/layout-builder/table)

Social Share Icons
: [Deprecated](../../user-documentation/paragraphs/social-share-icons)

Teaser
: [Ping-pong](../../user-documentation/layout-builder/ping-pong)

Webform
: [Webform](../../user-documentation/layout-builder/webform)

## Build it

Once you have a plan, go build it! Use the [Layout Builder](../../user-documentation/layout-builder) documentation to help you through the process. Building each page might look something like this:

- Create a new, unpublished, Landing Page (with Layout Builder)
- Add blocks and content to the new page
- Ensure the URL Alias of the new page matches that of the old page
- Un-publish the old page and publish the new page.
- Test out the new page in a new browser, an incognito window, or your phone or tablet

## Get help

If at any point in this process you need help, be sure to reach out to [our community](../../../community). The functionality is always being improved, and we have a wide variety of developers and builders from other Ys who are happy to help.
52 changes: 52 additions & 0 deletions content/en/docs/howto/use-structured-data/_index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
title: How to leverage structured data
linkTitle: use structured data
description: Structured data helps the machines reading your site - search engines, AI models, and more - understand your content.
---

> Adding structured data can enable search results that are more engaging to users and might encourage them to interact more with your website
>
> -- [Why add structured data to a page (Google)](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data#why)
The distribution (as of [version 10.3.0]({{% relref "release-ds-10.3.0.md" %}})) leverages the community contributed [Schema.org metatag module](https://www.drupal.org/project/schema_metatag) and custom code to integrate structured data into many content types. You can test if your page is outputting structured data by using the [Schema.org Validator](https://validator.schema.org/) or [Google's Rich Results Test](https://search.google.com/test/rich-results)

Once your site is updated, structured data will be _automatically generated_ 🎉 with no additional work from content editors.

## Articles

The [Article (Layout Builder)](../../user-documentation/content-types/lb-article) content type implements the [Article Schema](https://schema.org/Article) as per [Google's Article structured data docs](https://developers.google.com/search/docs/appearance/structured-data/article).

Articles have three options for the **Type**, which map to their appropriate Schema:

- Blog → [BlogPosting](https://schema.org/BlogPosting)
- News → [NewsArticle](https://schema.org/NewsArticle)
- Press Release → [Article](https://schema.org/Article) (there is currently no other appropriate Schema)

### Customizing Articles

This mapping is set in code (`y_lb_article_metatags_alter` in [y_lb_article.module](https://git.drupalcode.org/project/y_lb_article/-/blob/1.1.x/y_lb_article.module)), but all other settings are configurable via the Metatag configuration (`/admin/config/search/metatag/node__article_lb`).

## Branches

The [Branch](../../user-documentation/content-types/branch) content type implements the [LocalBusiness Schema](https://schema.org/LocalBusiness) as per [Google's Local business structured data docs](https://developers.google.com/search/docs/appearance/structured-data/local-business).

Any time the Branch Hours are updated, that content will also be reflected in the Structured Data that's read by search engines.

### Customizing Branches

The mapping is configurable in the Metatag configuration (`/admin/config/search/metatag/node__branch`). Hours configuration uses the [Open Y Hours_metatag tokens](https://github.com/open-y-subprojects/openy_hours_formatter#open-y-hours-metatag-tokens).

## FAQs

The [Accordion Layout Builder Block](../../user-documentation/layout-builder/accordion) has an option to implement the [FAQPage Schema](https://schema.org/FAQPage) as per [Google's FAQ structured data docs](https://developers.google.com/search/docs/appearance/structured-data/faqpage).

If an Accordion section contains Frequently Asked Questions, check the **FAQ?** checkbox to output them as structured data.

Tips for writing good FAQ content:

- Ensure the content contains individual sets of questions ("How old does my child need to be to swim at the YMCA?") and answers ("The YMCA offers swim classes starting at age 3 and the pool is open to children of all ages with parental supervision").
- Only one FAQ should be added to a page. If more than one is added, only the first will be output to the structured data.

### Customizing FAQs

Due to the complexity of the FAQ data, the structured data is [managed entirely in code](https://git.drupalcode.org/project/lb_accordion/-/blob/1.0.x/lb_accordion.module?ref_type=heads#L40) and is not customizable via the Drupal admin. If you need specific customizations, please post your ideas in Slack or suggest them on [the Roadmap](/roadmap) for the core team to discuss and implement.
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
title: Landing Page (Layout Builder)
description: A flexible content type that uses Sections and Blocks, managed with Layout Builder, to build content.
---

This page is the base for building pages with [Layout Builder](../../layout-builder).

## Creating a Landing Page

Go to **Admin** > **Content** > **Add Content** > **Landing Page (Layout Builder)**

Fill in the content fields:

- **Title** (required): The title of the page. It will not be added to the page and should be added manually with a block in the [Banner section](#customizing-a-landing-page).
- **Metadata**: This content is used to provide context to search engines and page previews. For the best user experience create [clickable titles](https://backlinko.com/on-page-seo#optimize-title-and-description-tags), [write a compelling description](https://moz.com/learn/seo/meta-description), and [add a descriptive image](https://yoast.com/image-seo/#always).
- **Meta description**: A brief and concise summary of the page's content that is a maximum of 160 characters in length.
- **Meta image**: Choose or upload an image to be used as a thumbnail for social sharing and preview cards.
- **Meta tags**: Advanced meta tag configuration. This section should not be edited unless you know what you're doing.

## Customizing a Landing Page

Once you create a Landing Page you can customize it with [Layout Builder](../../layout-builder).

Landing Pages come with these pre-configured sections:

- [**Header**](../../layout-builder/header-footer/#header-section)
- **Banner**: An edge-to-edge, no gutters section that works best with a single [Banner](../../layout-builder/banner) or [Carousel](../../layout-builder/carousel).
- **Body**: A section with left and right margins. This can contain the bulk of your page content.
- [**Footer**](../../layout-builder/header-footer/#footer-section)

Sections can be [edited, reordered, or removed](../../layout-builder/#sections) to configure your page as you like. You can even remove the header and footer altogether if you need to create content for a digital display or other embedded system.
24 changes: 10 additions & 14 deletions content/en/docs/user-documentation/layout-builder/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ weight: 3

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
Expand All @@ -19,15 +19,10 @@ YMCA Website Services 9.2.12 introduces a new Content Type: **Landing Page (Layo

To use Layout Builder, you'll first have to create a new page:

- Go to **Content** > **Add Content** > **Landing Page (Layout Builder)**.
- Choose any Layout Builder-enabled content type, or start with a basic [Landing Page](../content-types/lb-landing-page)
- Go to **Content** > **Add Content** > **The Content Type**.

This creation page will look different from others—there are no fields!

- Set a page **Title** and configure any **Menu settings** or **URL alias** that you'd like.
- Ensure that **Published** is unchecked.
- Then **Save** the page.

Once you've saved, you will see an empty page. Click the **Layout** tab to enter Layout Builder.
Once you've saved, you will see an empty page. Click the **Layout** tab to enter Layout Builder or go directly there with **Save and edit layout**.

![Drupal admin tabs with an arrow pointing to "Layout"](lb_layout_tab.png)

Expand All @@ -43,9 +38,10 @@ Changes to the page are not displayed to site viewers until you **Save Layout**

When in the **Layout** editor, you will have these options at the top of the page:

- **Save Layout**
- **Save Layout** will save your changes and return you to the main page view.
- **Save and edit layout** will save your changes and keep you in Layout Builder.
- **Discard Changes**
- **Revert to Defaults** will reset your page to an empty Header and Body section.
- **Revert to Defaults** will reset your page to the default empty layout.

After saving your changes, be sure your page is published:

Expand All @@ -55,7 +51,7 @@ After saving your changes, be sure your page is published:

## Fundamentals

In Layout Builder, you will see the page divided up into Sections and Blocks. Your page may already be populated with a **Header** and **Body** section to get you started building, and you can change or edit those to fit your page.
In Layout Builder, you will see the page divided up into Sections and Blocks. Your page may already be populated with some sections to get you started building, and you can change or edit those to fit your page.

### Sections

Expand Down Expand Up @@ -103,4 +99,4 @@ When rearranging large blocks on the page it can often be challenging to drag th

If you run into a problem, [get in touch](../../../community).

<small>Content on this page is adapted from [Drupal.org](https://www.drupal.org/docs/8/core/modules/layout-builder) and [Western Washington University](https://brand.wwu.edu/layout-builder)</small>
<small>Content on this page is adapted from [Drupal.org](https://www.drupal.org/docs/8/core/modules/layout-builder) and [Western Washington University](https://brand.wwu.edu/layout-builder)</small>
Loading

0 comments on commit c5dc389

Please sign in to comment.