How to set up a Layout Builder site

Install and prepare

1. Install YMCA Website Services 10.3.0 or higher.

• If you are starting a new site, follow the distribution install instructions.
• If you are starting with an internal toolchain, composer require ycloudyusa/yusaopeny at the root of the project.

2. Go to Admin > Configuration > Basic site settings and configure the website name and slogan.

Enable Layout Builder modules

The core functionality of the Layout Builder features is packaged inside the Y Layout Builder module (y_lb). This module is required by the profile and comes with it out of the box.

Layout Builder modules could be disabled by default. The complete list of available components is available in y_lb/composer.json. There are two different methods to enable them:

1. To install only selected modules: Go to Admin > Extend (/admin/modules) and enable only the components that you choose to use.
2. To install all the modules: Go to Admin > YMCA Website Services > Extend > Install (/admin/openy/extend/list). Check the box for Layout Builder, then Install.

Configure layouts & listings

Layout Builder relies on a system of Layout Defaults and Layout Overrides. An important concept to understand from these pages is:

Once a Layout is overridden on an entity, that entity will not be impacted by changes to Layout Defaults.

In building Landing Pages, we will override the Default Layout for every page (by placing content blocks). For this reason, it is important that we configure the desired defaults before building pages.

Landing Pages

You will use the Landing Page (with Layout Builder) content type to build landing pages.

• Configure its content type styles at /admin/structure/types/manage/landing_page_lb/display first. Configure:

  • Colorway
  • Border style
  • Border radius
  • Text/button alignment
  • Button position
  • Button fill

Locations

You will use the Branch, Camp, and Facility content types to build pages that contain the contact and amenity details for each location.

• For new sites, you may set the Use Layout Builder checkbox to be true by default at /admin/structure/types/manage/branch/fields/node.branch.field_use_layout_builder.
• Configure the default layout and settings for each type on their corresponding layout settings pages:
  • Branch: /admin/structure/types/manage/branch/display
  • Camp: /admin/structure/types/manage/camp/display
  • Facility: /admin/structure/types/manage/facility/display
• Create a locations page with the URL alias /locations using Location Finder.

Events

Enable Events with Layout Builder (ws_event) to use Events with Layout Builder.

• Configure its default layout and settings at admin/structure/types/manage/lb_event/display.
• Create an events listing page with the URL alias /events using Events Views & Filters

Articles

Enable Articles with Layout Builder (y_lb_article) to use Articles with Layout Builder.

• Configure its default layout and settings at /admin/structure/types/manage/article_lb/display.
• Add an article listing page with the URL alias /news using Article Views & Filters.

Activity Finder

Enable openy_node_session, openy_node_program, openy_node_category, openy_node_activity, and openy_node_class to set up the Program Event Framework (PEF) if you plan to use Schedules or Activity Finder on the project.

Then require and enable yusaopeny_activity_finder to use Activity Finder.

Canadian YMCAs

For Canadian YMCA sites, enable ws_colorway_canada and its submodule lb_hero_canada. These modules contain colorways, logos, and banner styles approved by their local Y authorities.

• After enabling the new colorway, be sure to set the default layout styles to use the Canadian colorway of your choice.
• Enabling ws_colorway_canada will immediately change the site logo from the Y-USA logo to the Y Canada logo, so this should be done on a development environment first.