Layout Builder is a powerful page-building tool for your YMCA website. It allows content editors and site builders to quickly and easily create visual layouts for displaying content. You 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.
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 with different Layouts that contain Custom Blocks. Please contact your development partner if you need assistance updating to the latest version.
Creating a new page
To use Layout Builder, you’ll first have to create a new page:
Choose any Layout Builder-enabled content type, or start with a basic
Landing Page.
Go to Content > Add Content > The Content Type.
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.
Updating an existing page
Navigate to the page you’d like to update, then click the Layout tab, like above.
Once you are in the Layout editor, you can create, edit, rearrange, and delete sections and blocks while viewing the page in a what-you-see-is-what-you-get preview mode.
Saving and publishing
Changes to the page are not displayed to site viewers until you Save Layout on the page and Publish it.
When in the Layout editor, you will have these options at the top of the page:
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 the default empty layout.
After saving your changes, be sure your page is published:
Click the Edit tab.
Check Published.
Save the page.
Fundamentals
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
Sections create the structure of the page and contain blocks. You can drag and drop blocks between sections, but you cannot move sections themselves—you can only create sections above or below existing sections.
You can remove sections by clicking the small “X” link at the top left of the section. Click on “Configure ” to edit the section layout and other options.
Layouts
Layouts define the structure of a section. YMCA Website Services comes with 1-, 2-, 3-, and 4-column layouts, and each layout has additional configuration options once it’s created. See
advanced options for more details.
Then configure the advanced Layout, Styles, and Settings.
Some options in this configuration may not yet be fully supported.
Blocks
While Sections contain the page’s structure, Blocks contain its content. Blocks are boxes of content rendered into a region of a web page.
To create a block, click Add Block in any section of the page, then Create Custom Block.
Your YMCA website has a wide array of blocks to choose from. In this section, you will find detailed descriptions of those blocks.
Tips and Tricks
Get more space for writing
The Content Editing Pane—the sidebar where you edit blocks —can sometimes be too small to get all of your content in there nicely. Simply drag anywhere on its left border to expand the pane.
Rearrange blocks easily
When rearranging large blocks on the page it can often be challenging to drag them around. To make this easier, uncheck Show content preview at the top of the page. This will substitute the “WYSIWYG” preview for block titles, making the content much more compact.
An overview of all custom Layout Builder blocks and their designs.
The distribution has shipped with two generations of Layout Builder component designs. The first-generation “Pre-release” designs were included with versions
9.2.12 (December 2022) and
9.2.13 (March 2023). The refined and feature-complete “Design System” designs were released in June 2023.
Following the YMCA Brand Guide, the distribution offers four “colorways.” Content editors can use these to apply accessible, brand-compliant styles to all components within a Layout Builder-based page.
You can access each of these components on
Layout Builder pages via the Create custom block selector.
Component
Design
Accordion
Amenities
Article List
(Hero) Banner
Branch Hours
Branch Menu
Branch Preferred Branch
Branch Social Links
Breadcrumbs
Camp Menu
Camp Video Banner
Card
Card - Column Variations
Carousel
Donate
Event List
Forms
Global Footer
Global Header
Grid Content
Icon Grid
Icons and Logos
Locations
Menu and Search
Modal
Ping Pong
Promo Cards
Side Menu
Sponsors
Staff
Statistics
Table (Simple Content)
Tabs
Testimonials
Utility Menu
Pre-release
View the designs
Component
Mobile
Desktop
Accordion
Article (/News /Blog /Press Release)
Branch
Branch Amenities
Branch Hours
Branch Menu
Branch Social Links
Breadcrumbs
Cards
Carousels
Event
Grid Content
Hero Banner
Modals
Partners (/Sponsors)
Ping Pong
Promo Cards
Simple Menu
Staff
Statistics
Tables
Tabs
Testimonials
Webforms
2 - Advanced Options
Configuration for Layout Builder Sections and Blocks.
A wide range of configuration options are available for Layout Builder components using the contributed
Layout Builder Blocks module, which is included with the distribution. In addition to those configuration options, we provide an extra layer of “Y Styles” that help site builders customize their sites in an accessible and brand-compliant manner.
Y Styles
These options provide customizations for Layout Builder-enabled pages at the Content Type, Page, and Block level.
Styles inherit from content types, to pages, to blocks. Some styles can also be overridden at each level - block styles can override page styles, which can override content type styles.
flowchart
classDef ct fill:#5C2E9133;
classDef page fill:#92278F33;
classDef block fill:#C6168D33;
subgraph ct[Content Type]
direction LR
subgraph page[Page]
direction LR
subgraph block[Block]
blockStyles[Block Styles]
end
pageStyles[Page Styles]
end
ctStyles[Content Type Styles]
end
blockStyles -- override --> pageStyles
pageStyles -- override --> ctStyles
class ct ct
class page page
class block block
Content Type Styles
Note: This configuration may not be accessible to all content editors. Ask an administrator for assistance if necessary.
The default values for page-level Y Styles options are set in the Content Type display options.
To access them:
Go to Admin > Structure > Content types > Landing Page (Layout Builder) (or another LB-enabled content type) > Manage display
Ensure you’re acting on the Default display, then click Manage layout.
Expand the Y Styles section
Choose your default configuration options. These will set the defaults for every new node of this Content Type. Existing content will not be affected.
Click Save layout
Page Styles
Every Layout Builder-enabled page that you create will allow you to override the default settings. All of these settings will affect all items on a page, unless they are overridden at the block level.
Edit the Layout on a page
Expand the Y Styles section
Choose your configuration options.
Color scheme:The color scheme of all components on the page. Choose from four brand-compliant and accessible options:
Blue/Purple
Green/Blue
Purple/Red
Red/Orange
Border radius:The curvature of container corners.
0px (square)
10px (small curve)
20px (larger curve)
Border style:The style of container borders.
No border
1px border
Drop shadow
Text/Button alignment:The vertical placement of elements in containers.
Left
Center
Button position:Where buttons sit in containers.
Inside container
Overlapping container
Button fill:How buttons are colored.
Filled by default, outlined on hover
Outlined by default, filled on hover
Click Save layout
Y Block Styles
Some blocks have additional styles that can be configured per-block. For these blocks (e.g. Banner, Cards), look for the Y Styles section in the
block styles section and set the options accordingly.
Banner
Variant:Choose from five designs.
Standard
Overlay
Chevron
Frame
Small - This variant hides all but the title and description and does not use an image background.
Button fill: Override the page-level styles.
Card
Variant:Choose from four designs.
Standard
Overlay
Chevron
Color
Border style: Override the page-level styles.
Text/Button alignment: Override the page-level styles.
Button position: Override the page-level styles.
Button fill: Override the page-level styles.
Section Styles
When creating or editing a Section you have the option of configuring Layout, Style, and Settings.
Support for these options is a work in progress and may require involvement of your development partner. Feel free to experiment with the options. Be sure to follow proper brand guidelines and accessibility practices.
Layout Styles
In this section, you can control the container of the Section.
Container type
Boxed: Section is narrower than the header of the page. Good for text-heavy layouts.
Full: Section extends to the edges of the main content container.
Edge to Edge: Section extends to the edges of the page. Good for full-width components like Banners and Ping-Pong blocks.
Gutters
With Gutters: Section has left and right padding. Good for most non-full-width containers.
Without Gutters: Section has no left and right padding. Best for Edge to Edge containers.
Block Styles
When creating or configuring a block, you have the option of opening the Style tab to access additional style options including:
Background
Typography
Spacing
Borders
Animation
Support for these options is a work in progress and may require involvement of your development partner. Feel free to experiment with the options. Be sure to follow proper brand guidelines and accessibility practices.
After you have completed setting the Style options, click back to Content and Save or Update to commit your changes.
3 - Accordion
Expandable pairs of question/answer or header/section fields.
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 the block to add.
Fill in the content fields:
Title (required): Displayed if Display title is checked; otherwise, this is for administrative use.
Section Subheading: The subheading of the accordion section.
Accordion Item: Add as many items as you like using the Add Accordion Item or Add new custom block button. When you are finished adding or editing each item, be sure to click Create/Update tab or Create/Update custom block to finalize the item. Each item contains:
Heading (required): The heading that will be used to expand/contract the accordion.
Body (required): The content of the accordion.
FAQ?: If this section contains Frequently Asked Questions, check this box to output them as structured data. Ensure the content contains individual sets of questions (e.g., “How old does my child need to be to swim at the YMCA?”) and answers (e.g., “The YMCA offers swim classes starting at age 3 and the pool is open to children of all ages with parental supervision”). Review
Google’s Content guidelines for FAQs for more information. 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.
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 the block to add.
Configuration
Configure the Activity Finder block after adding it to a Layout Builder page:
Edit the block within the Layout Builder.
Configure the available options. See
Activity Finder Block Configuration for field details. These configurations will affect what users see and can do on the front end.
Location & Category Filters: Restrict the block to show sessions from only certain Locations or Categories. Choose either “Limit” to show only the specified options or “Exclude” to remove the specified options. It’s generally recommended to choose either Exclude or Limit, but not both.
Limit by location: Only show sessions at specific locations in the results.
Exclude by location: Remove sessions at specific locations from the results.
Limit by category: Only show sessions related to specific Program Subcategories in the results.
Exclude by category: Remove sessions related to specific Program Subcategories from the results.
Legacy mode: Shows some data as it was in the previous version of Activity Finder (v3):
Disables bookmark functionality on the results screen.
Doesn’t display the age indicator in the result card of activities.
Changes the days + times wizard step. Displays only days of the week, but not times of each day (doesn’t support DaysTimes filter).
Weeks filter: Changes the Day/Time filter to use custom defined Week filters.
This requires setting the Weeks configuration in the Activity Finder settings (/admin/openy/settings/activity-finder).
Only sessions that have “Camp” in the title or room fields will return for this filter.
Additional filters: These filters are off by default, but can be enabled in the Block Configuration.
Start Month: Filters based on the month in the Session Time field.
In Membership: Shows Sessions that have In membership checked.
Duration: The length of the Session. This is configurable in the Activity Finder settings (/admin/openy/settings/activity-finder) and defaults to:
Single day
Multi-day (up to 5 days)
Weekly (up to 3 weeks)
Monthly (up to 5 weeks)
Season (up to 12 weeks)
School year (~9 months)
Full year
Hide Home Branch info block: Disables functionality related to the users selected home branch.
Background image: An image that’s displayed in the background of the banner above Activity Finder.
The distribution provides a few blocks to highlight articles:
Featured Articles
Articles Filter
Articles Listing
To use the blocks:
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 each block to add.
Featured Articles
Displays one or more articles in a large feature on the page.
Title (required): Displayed if Display title is checked; otherwise, this is for administrative use only.
Manual selection items: Select one or more articles to be featured on the page. Generally, it’s best to feature a single article.
Articles filter
Allows users to filter the Articles Listing by location, category, or text search.
Title (required): Displayed if Display title is checked; otherwise, this is for administrative use only.
This block has no other options.
Articles listing
Displays articles in a teaser view, filtered by the Articles filter block, with a “Show more” button.
Title (required): Displayed if Display title is checked; otherwise, this is for administrative use only.
Number of articles: The number of articles to show in the listing on first load. Defaults to 3.
Added in the December 2024 release.
Article type: Limit the articles to a specific type. Defaults to “All”.
Added in the December 2024 release.
When you are finished adding blocks,
Save and publish your changes.
6 - Banner
A full-width display with a header, description, and call to action overlaid on an image. Also known as a “Hero Banner”. The Banner block is used to draw attention to key content and promotions.
The banner block comes in several variations, including:
Standard: A basic banner with text and an optional image.
Overlay: Text is overlaid on the image.
Frame: The text appears within a frame.
Chevron: A banner with a chevron shape.
Small: A smaller banner variation.
Tall: A taller banner variation.
Promo: A banner designed for promotional content.
Sub Chevron: A variation with a sub-chevron design.
Sub Frame: A variation with a sub-frame design.
Some variations also have “Canada” specific styles in red, white, and black.
These variations can be selected during the block configuration process, allowing you to choose the most appropriate style for your content and design preferences.
Best Practices
Image Size: Use high-quality images that are appropriately sized for the banner area. Consult with your agency partner for recommended image sizes.
Text Length: Keep the banner title and description concise and engaging. Avoid lengthy text that could overwhelm the user.
Call to Action: Use a clear and compelling call to action to encourage user interaction.
Accessibility: Ensure that your banner content is accessible to all users, including those with disabilities. Provide alt text for images and use appropriate heading levels.
7 - Breadcrumbs
Secondary navigation that helps users understand their location within a website.
Scroll to the location on the page where you want to add the breadcrumbs (typically the bottom of the Header section or the top of the Content section).
Click Add block.
In the sidebar, expand All system blocks.
Search for “Breadcrumbs” or scroll to System > Breadcrumbs.
Click on Breadcrumbs.
Configuring the Breadcrumbs Block
After adding the block, you will need to configure it:
Title (required): This field is for administrative use only and will not be displayed on the front end. It is recommended to uncheck Display title.
The Breadcrumbs block might not display the correct path while editing the page layout. However, it will display correctly for site viewers.
Additional Information
What are Breadcrumbs? Breadcrumbs are a navigational aid used in user interfaces. They allow users to keep track of their location within a website or web application. The term comes from the Hansel and Gretel fairy tale.
Easy Breadcrumb Module: For more advanced breadcrumb functionality, consider using the
Easy Breadcrumb module. This module allows for customization of the breadcrumb trail, including:
Including/excluding the front page as a segment.
Including/excluding the current page as the last segment.
Using the real page title instead of deducing it from the URL.
Printing the page title segment as a link.
Using menu titles as a fallback.
Removing identical segments.
And more.
8 - Cards
Flexible card-style components that allow up to 4 cards to display across the page depending on the chosen layout.
The Cards block is similar to the
Grid CTA block, but has more fields and places the image behind the item content.
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 the block to add.
Fill in the content fields:
Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
Section heading: Displayed as a heading above the cards.
Section subheading: Displayed below the heading.
Section link: A link button displayed below the list of cards.
# of columns: Allows 1 to 4 columns of cards.
Card items: Add up to 4. When you are finished adding or editing each item, be sure to click Create/Update tab or Create/Update custom block to finalize the item. Each card has:
Heading (required)
Image: Choose from the library or add a new image to be displayed behind the card text.
Description: A full text editor to add card content.
Link: A link at the bottom of the card.
As of the December 2024 release, Card links can use
link attributes such as id, target, and class.
Topic Tag: This is displayed at the top of the card and can be used to group cards visually.
The Cards block offers several variations that change the look and feel:
Standard: The default card style.
Overlay: Places the card content over the image.
Chevron: Adds a chevron graphic to the image area.
Color: Applies a background color to the card.
This block comes with
multiple styles. To choose an alternative style:
Click on the Style tab at the top of the Block Add/Update form.
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 the block to add.
Fill in the content fields:
Title (required): This title is for administrative purposes only and is never displayed, even if “Display Title” is checked.
Carousel heading: This heading is displayed above the carousel.
Carousel subheading: This subheading is displayed below the heading.
Carousel Item: You can add multiple items to the carousel by using the Add Carousel Item or Add new custom block button. Make sure to click Create/Update tab or Create/Update custom block to save each item after adding or editing. Each item includes the following fields:
Heading
Image: You can choose an existing image from the media library or upload a new image.
Description
Link: This creates a link that appears at the bottom of the carousel item.
Designs: This block provides no additional presentation outside of the embedded content. It renders the code you provide directly into the page. Ensure the code is properly formatted and safe for display.
To use the block:
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 the block to add.
Configuration
Fill in the following content fields:
Title (required): This field is for administrative purposes only. The title is never displayed, even if “Display Title” is checked. Use a descriptive title to easily identify the block in the Layout Builder.
Code: Paste the HTML, JavaScript, CSS, or other code to be embedded on the page.
!!! warning
Be extremely cautious when embedding code from untrusted sources. Unfiltered code can introduce security vulnerabilities and potentially compromise your site. Always validate and sanitize code before embedding it.
The Y Layout Builder - Donate (lb_donate) and YMCA Website Services Donation Embed Form (y_donate) modules work together to allow content editors to add an embedded donation form to the site and create a separate call to action to direct users there.
Embedded Form
The YMCA Website Services Donation Embed Form (y_donate) module provides a block that allows you to embed a donation form directly onto a page.
To get started:
Enable the YMCA Website Services Donation Embed Form (y_donate) module at Administration > Extend.
Navigate to the Layout tab of a Layout Builder-enabled page.
Select Add block on the page, then search or scroll to find Donation Form Embed Block.
Select the form type and enter the form ID from your donation provider.
Troubleshooting
If your embedded form does not work in your non-production environment, you may need to add a domain to the allow-list either on the provider-side or in your site’s Content Security Policy.
If your provider is not listed, you can add the form by selecting the Code Custom Block and pasting in your code. Alternatively, you can work with your development partner to
add a new donation provider. Refer to the
Information for Developers section of the y_donate project for details on how to implement a new provider.
Donate Block
The Donate Block (lb_donate) provides a call to action with donation amount buttons and a link to the embedded donation form page. This block can be placed in an
edge-to-edge container.
To use the block:
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 the block to add.
Fill in the content fields:
Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
Section heading: Displayed as a heading above the items.
Section subheading: Displayed below the heading.
Giving amounts: Configure any number of buttons with preset donation amounts. An “Other” button will always be displayed after these buttons, allowing users to enter a custom amount.
Amount label: The amount to be displayed on the button, including the currency symbol (e.g., “$50”).
Form Element ID: This is usually a 4-digit number found in your donation platform’s backend. You may need to inspect the form using your browser’s developer tools to find this ID.
Donation page link: A link displayed below the buttons that directs users to the page containing the embedded donation form.
URL: This must link to the page where the embedded donation form is located for the donation buttons to function correctly.
Link text: The text to be displayed for the link (e.g., “Donate Now”).
Background image: Choose an image from the media library or upload a new image to be displayed behind the text and buttons.
The distribution provides a few blocks to highlight events:
Featured Events
Events Filter
Events Listing
To use the blocks:
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 each block to add.
Featured Events
Displays one or more events in a large feature on the page.
Title (required): Displayed if Display title is checked; otherwise, this is for administrative use.
Manual selection items: Select one or more events to be featured on the page. Generally, it’s best to feature a single event.
Events filter
Allows users to filter the Events Listing by location, category, or text search.
Title (required): Displayed if Display title is checked; otherwise, this is for administrative use.
This block has no other options.
Events listing
Displays events in a teaser view, filtered by the Events filter block, with a “Show more” button.
Title (required): Displayed if Display title is checked; otherwise, this is for administrative use.
Number of events: The number of events to show in the listing on first load. Defaults to 3.
Added in the December 2024 release.
When you are finished adding blocks,
Save and publish your changes.
13 - Grid CTA
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.
The Grid CTA block is similar to the
Cards block, but allows for more flexible items with a slightly more freeform design. It is also similar to the
Icon Grid block.
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 the block to add.
Fill in the content fields:
Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
Section heading: Displayed as a heading above the cards.
Section subheading: Displayed below the heading.
Grid CTA section link: A link button displayed below the list of items.
# of columns: Allows 2- to 4-columns of items.
Grid Item: Add up to 4. When you are finished adding or editing each item, be sure to click Create/Update tab or Create/Update custom block to finalize the item. Each item has:
Heading (required)
Description: A full text editor to add item content.
Media: Choose from the library or add a new image or icon to be displayed above the item text.
The header and footer on Layout Builder pages is composed of many complimentary blocks. The Header and Footer are special Sections that are pre-populated on each Layout Builder-enabled content type. If the Header or Footer do not already exist in your content, you can add them on your own.
Header Section
If a Header section does not already exist, add a new Section and choose the WS Header Layout. Then, add the following blocks by selecting Add block and then using the search box under All system blocks:
Utility Menu area
Left
Website Name Block
Right
Open Y Google Translate Block
Utility Menu
Main Menu area
Left
Site Logo Block
Center
Main navigation
Search Bar Block
Right
User account menu
Each block has some specific configuration recommendations:
Website Name Block
Configuration
Uncheck Display title.
Content
The Site Name is found under Configuration > System > Basic site settings.
Open Y Google Translate Block
Configuration
Uncheck Display title.
Content
The contents of this block are not configurable, but it may be omitted or removed if your site does not provide translation or uses another translation method.
Utility Menu
The option to add a Utility Menu was added in the December 2024 release. This menu is intended to give content editors an additional space for adding links in the top right of the header.
Configuration
Uncheck Display title.
Menu levels controls which and how many levels of menu are displayed. The Utility menu styles are designed for a single level of links.
Content
Menu items can be managed under Structure > Menus > Utility Menu.
Site Logo Block
Configuration
Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
WS Site Logo: Choose which logo is displayed in the block.
Theme logo uses the logo defined by the active theme, in the Appearance > Settings > (The active theme).
Colorway logo uses a dynamic SVG that responds to the configured YMCA colorway. This option is recommended for the Header.
White logo uses a flat white logo. This option is recommended for the Footer.
Hide tagline in WS logo: (Added in the December 2024 release.) Check to hide the tagline (areas of impact) in the logo.
The areas of impact must appear on a website, but it is at the YMCA’s discretion whether to include them as the trademarked graphic paired with the logo or as a way of telling the story of our positive impact.
If you choose to hide the Areas of Impact in the logo, we recommend you include them elsewhere on the page.
Main navigation
The main navigation supports displaying up to three levels of menu items. When adding items, be sure to check Show as expanded for any parent item that should be expandable.
Menu levels controls which and how many levels of menu are displayed. We recommend using the default configuration.
Content
Menu items can be managed under Structure > Menus > Main navigation.
Tips
Refer to the Drupal User Guide for more information about
managing menus.
We recommend you limit the main menu to 6 items or fewer when using Layout Builder, as additional items can cause the menu to be wider than the supported area. Additional menu items can be added to the footer, if needed.
Search Bar Block
Configuration
Uncheck Display title.
Content
The contents of this block are not configurable.
User account menu
Configuration
Uncheck Display title.
Menu levels controls which and how many levels of menu are displayed. We recommend using the default configuration.
Content
Menu items can be managed under Structure > Menus > User account.
To show items with a button style, add the highlighted class to the menu item under Attributes > Class.
On mobile devices, only highlighted items from this menu will display.
Footer Section
If a Footer section does not already exist, add a new Section and choose the WS Footer Layout. Then, add the following blocks by selecting Add block and then using the search box under All system blocks:
Primary Footer
Site Logo
Footer Menu Left
Footer Menu Center
Footer Menu Right
Footer Social
Sub-footer
Copyright
Footer Menu
Site Logo
See above. The white logo is recommended for the footer.
Footer Menu Left, Center, Right
Each of these three blocks references a menu. The three menus can be used to split footer links across multiple columns.
Configuration
Display title: Uncheck to hide the title, or turn the menu title on to give each column a title.
Menu levels controls which and how many levels of menu are displayed. We recommend using the default configuration.
Content
Menu items can be managed under Structure > Menus > Footer Menu Left, Footer Menu Center, or Footer Menu Right.
Go to Structure > Block layout > Custom block library
Find the Footer Copyright Block
Edit the block, then Save when finished.
Footer Menu
This menu is typically for a limited number of links such as “Privacy Policy” or “Terms of Use”.
Configuration
Uncheck Display title.
Menu levels controls which and how many levels of menu are displayed. We recommend using the default configuration.
Content
Menu items can be managed under Structure > Menus > Footer.
Main Menu CTA Block
The
Main navigation has an additional feature that allows for adding a nested call-to-action that takes the place of the third level of the menu.
To use it:
Go to Extend (admin/modules) and enable the Web Services Main Menu CTA Block module (y_lb_main_menu_cta_block).
Edit a top-level menu item (like “Programs” or “Schedules”) via one of these methods.
CTA blocks will only be displayed on first-level menu items. Blocks on all other levels will be ignored.
Click the in the Main Menu section, then choose Edit menu.
Go to Admin > Structure > Menus > Main navigation then Edit a link.
In the CTA block section, click Add new custom block.
Fill in the fields:
Expand the Media section and choose or upload an image
Add a short Heading
Add a short 1-2 sentence Description
Add a link and display text for the Menu CTA Link
Add a Block description for administrative purposes only
Click Create custom block to save the block.
Save the menu item.
Go back to a Layout Builder page with the menu and refresh. The menu CTA should now appear when the corresponding menu dropdown is open.
Menu CTA items will not appear on pages that use Paragraphs-based layout. CTAs also ony show on desktop and not mobile displays.
15 - Icon Grid
A simpler version of the Grid CTA component. Displays sets of content, each with a title and description, arranged in rows of 2 to 4 items. Icons or images can be included with each item.
The Icon Grid block shares similarities with the
Cards and
Grid CTA blocks but offers a way to display more basic items with a slightly more constrained design. It is based on the lb_icon_grid block content type and uses icon_grid_item paragraphs.
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 the block to add.
Fill in the content fields:
Title (required): This field is for administrative purposes only and is never displayed, even if “Display Title” is checked.
Section heading: Displayed as a heading above the grid items.
Section subheading: Displayed below the heading.
Icon Grid section link: A link button displayed below the grid items. This uses the field_cta field.
# of columns: Determines the number of columns in the grid, allowing for 2 to 4 columns of items. This uses the field_icon_columns field.
Grid Icon Items: Add up to 4 items to the grid. This is managed by the field_grid_items field, which references icon_grid_item paragraphs. Each item has the following fields:
Title (required): The title of the grid item. This uses the field_title field.
Description: A full text editor to add content to the grid item. This uses the field_description field.
Icon: Choose an existing image from the media library or upload a new image or icon to be displayed above the item text. Circular icons are recommended, and all icons/images will be displayed with a circular crop. This uses the field_media field.
The Location Finder block provides search, filters, a map, and a listing of your YMCA locations.
Amenities Filters
Location Finder also now supports hierarchical amenities. That means you can arrange your list of amenities into categories instead of a simple alphabetical list.
The Amenities taxonomy is managed at Administration > Structure > Taxonomy > Amenities. See
Taxonomy, Vocabularies, and Terms for more info on managing Vocabularies.
Single-Level Amenities
If you leave the Amenities terms in a flat list on their configuration page, the Location Finder filters will display according to their configured weights. Drag terms up or down in the list to rearrange them in the filters.
Hierarchical (Parent/Child) Amenities
Y’s with many amenities may choose to group them in categories. Once any Amenities term is nested, the Location Finder filters switch to a hierarchical display.
To nest terms:
Go to the Amenities administration page at Administration > Structure > Taxonomy > Amenities.
Add term to create new parent terms if necessary.
Use the drag handle [✥] to arrange terms into nested groups.
NOTE:
Any terms more than two levels deep will be ignored. (That is, parents and children will be displayed, grandchildren will not.)
When nesting is enabled, any amenities that are not grouped will be hidden from the filter list.
Using Location Finder
The Location Finder block is best placed in an edge-to-edge Section with no gutters.
To use the block:
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 the block to add.
Fill in the content fields:
Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
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 the block to add.
Note
The position on the page does not matter for the Modal block. It will always display as a popup in the center of the page and be completely hidden when dismissed.
Fill in the content fields:
Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
Modal title: The displayed title of the popup.
Modal description: The text displayed in the body of the popup.
Modal CTA/Link (required): A link at the bottom of the popup.
Modal Dismissible:
If “Yes,” the modal will be shown to the user once on first load.
If “No,” the modal will be shown on every page load.
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 the block to add.
Fill in the content fields:
Title (required): This title is for administrative purposes only and is never displayed, even if “Display Title” is checked.
Section heading: Displayed as a heading above the partner items.
Section subheading: Displayed below the heading.
Partner tier: Click Create content block to add a new Partner tier. Add unlimited tiers. (Added in the December 2024 release. Prior to that, all partners were displayed in a single group.)
Block description: For administrative use only.
Partner’s Tier: The title of the tier (like “Platinum,” “Gold,” etc.). Leave this empty if you don’t want to display a tier title.
Partner items: Click Add new custom block to add a new Partner item or Add existing custom block to reuse an existing item. Items can be reused across pages. Add unlimited items. Each item has:
Heading: The name of the partner.
Image: The logo or image.
Link: An internal or external link.
After filling in the fields for an item, click Create custom block to save the item.
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 the block to add.
Fill in the content fields:
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. This is the sub-heading of the Ping-pong section.
Item title: Displayed at the top of the ping-pong block.
Item description: Displayed below the title.
Item image: Choose from the library or add a new image to be displayed opposite the text.
Item image position: Places the image on the left/right side of the page in full-width (desktop) displays. Image will stack above text at narrow widths.
Item CTA/Link: Add up to two links. The first will be displayed with “primary” (solid) styling, the second will be “secondary” (outline) styling.
As of the December 2024 release, Ping-Pong links can use
link attributes.
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 the block to add.
Fill in the content fields:
Title (required): This field is for administrative purposes only and is never displayed, regardless of the “Display Title” setting. Use this to easily identify the block in the layout builder.
Card title: The main title displayed on the promo card.
Body: A rich text editor for adding the main content of the card.
Icon/Image: Choose an image from the media library or upload a new one to be displayed above the card text. The format of the image you upload affects how it will be displayed:
JPG/PNG: Images are cropped to a 3:2 aspect ratio.
SVG: Images are not cropped, and will retain their original dimensions. Using SVGs is the recommended approach for icons.
CTA: Configure the link and the text for the call to action button at the bottom of the card.
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 the block to add.
Fill in the content fields:
Title (required): This title is for administrative purposes only and is never displayed, even if “Display Title” is checked.
Section title (required): The heading for the related events section.
Link: An optional link to be displayed near the section title. This can be a link to a page with more events, for example. As of the December 2024 release, Related Events links can use
link attributes.
Type: Select how you would like to choose the related events in the block. Each type has different options:
Tags: Show upcoming events filtered by related tags.
Upcoming: Show upcoming events sorted by date.
Locations: Use the Locations field to filter related events.
Choose one or more Branch Locations to filter the list of events.
Manual: Directly specify the events to be listed.
Use the autocomplete field to add one or more events to be displayed.
Items count to display: The maximum number of items to display in the list: 3, 6, 9, or 12.
Note:
Related events will always be sorted by the event date unless Manual filtering is selected. When using manual filtering, events are displayed in the order in which they appear in the configuration.
The current page will not display in the list of related events once published, although it may appear in the preview.
For Tags, Upcoming, and Locations, “Sticky” events that match the filter criteria will show up first.
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 the block to add.
Fill in the content fields:
Title (required): Displayed if Display title is checked, otherwise, this is for administrative use. This title will serve as the block description in the Block Layout interface.
Icon: Optional icon (or small image) to be displayed to the left of the menu title.
Links: An unlimited number of internal or external links.
The Simple Menu block is a useful way to display a list of links in a sidebar. Menus are a collection of menu links that are used for site navigation. You can create new menus and menu links, reorder links, and disable links provided by modules. For more information about managing menus, refer to the
Drupal User Guide.
To further customize the appearance of the menu, you can adjust the theme settings or use CSS to style the block. The administrative toolbar also provides a way to manage menus and their associated links. You can access it under Structure > Menus.
25 - Simple Schedule
A calendar-based schedule.
The Simple Schedule block pulls content that is added via the
Simple Schedules module, along with other Sessions on the site, displaying them in a calendar format. It’s crucial to configure your schedules using the Simple Schedules module before adding this block to your site to ensure content is displayed correctly. This block leverages existing session data and presents it in a user-friendly, calendar-based view.
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 the block to add.
Fill in the content fields:
Location (required): Select the location for which you would like to display scheduled events. This setting determines which sessions are included in the schedule.
Allows users to add simple content and responsive tables within a page.
The Table block allows users to add simple content and responsive tables to Landing Pages (Layout Builder content type). It utilizes the
Tablesaw library for responsive table functionality.
To configure the Table block, fill in the following content fields:
Title (required): This title is for administrative purposes only and is never displayed, even if Display Title is checked.
Section title: This title is displayed as a heading above the table and other content.
Section subtitle: This subtitle is displayed below the heading.
Body: This field provides a full text editor for adding tables, text, images, and other content to the page.
Adding a table: Click the Table icon in the editor toolbar. Configure the table options (number of rows/columns, headers, etc.) in the popup window.
Editing table properties: Right-click inside the table and select an option from the context menu to modify table properties such as row/column insertion/deletion, cell formatting, and other table-specific settings.
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 the block to add.
Fill in the content fields:
Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
Section heading: Displayed as a heading above the items.
Section subheading: Displayed below the heading.
Staff items: Click Add new custom block to add a new Staff item, Add existing custom block to reuse an existing item from another block, or click Duplicate to reuse an entry from the same block. Items can be reused across pages. Add unlimited items. Each item has:
Image: Image of the staff member.
First name (required)
Last name (required)
Job title (required)
Email: Email address of the staff member.
After filling in the fields for an item, click Create custom block to save the item.
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 the block to add.
Fill in the content fields:
Title (required): This title is for administrative purposes only and is never displayed to users, even if “Display Title” is checked.
Section heading: Displayed as a heading above the statistics items.
Section subheading: Displayed below the heading.
Media: Choose an existing image from the media library or upload a new image. The image will be displayed to the left of the statistics.
Section link: Add a link to be displayed below the statistics items.
Statistics items: Add as many statistics items as needed by using the Add Statistics Item or Add new custom block button. After adding or editing each item, remember to click Create/Update tab or Create/Update custom block to save your changes. Each item includes the following fields:
Number value: The numerical value of the statistic. This field accepts a prefix (e.g., “$100”) and/or a suffix (e.g., “100M”).
Gives users the ability to switch page views by selecting in-page tabs. This component is built using the Paragraphs module and Entity Reference Revisions module.
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 the block to add.
Fill in the content fields:
Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
Section heading: Displayed as a heading above the item.
Section subheading: Displayed below the heading.
Tab Item: Add as many Tabs as you like using the Add Tab or Add new custom block button (depending on your version). When you are finished adding or editing each item, be sure to click Create/Update tab or Create/Update custom block to finalize the item. Each item contains:
Heading: The heading that will be used to select the tab. This corresponds to the field_title field of the tab_item block content type.
Body: The content of the tab. This corresponds to the field_description field of the tab_item block content type.
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 the block to add.
Fill in the content fields:
Title (required): Never displayed, even if “Display Title” is checked. For administrative use only.
Section title: Displayed as a heading above the cards.
Section subtitle: Displayed below the heading.
Item: Click Add new custom block to add a new Testimonial item, or Add existing custom block to reuse an existing item. Testimonial items can be reused across pages. Add up to 4 items. Each item has:
Block Description: A label for the Testimonial for administrative use only.
Name: The attribution of the testimonial. May get trimmed on mobile after about 20 characters.
Testimonial text: The body of the testimonial. May get trimmed on mobile after about 70 characters.
Image: An image related to the testimonial. Will use a placeholder image if not used.
After filling in the fields for an item, click Create custom block to save the item.
