This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Paragraphs

Embed simple text, images, blocks and interactive components with blocks, Open Y’s layout-building component.

Open Y content editors use paragraphs to create unique layouts for their pages. Each paragraph is a section of content that comes with its own styling, functionality, and fields.

You can add a paragraph onto a page when you see the paragraphs dropdown field. These paragraphs will typically be inside one of the four main “Areas” inside a content type:

  • Header Area - Used for adding images and page titles
  • Content Area - Where your main content goes
  • Sidebar Area - Where you put related information, such as promotions and links to other content.
  • Bottom Area - The “anchoring” elements of your page, such as a call to action.

Choose a paragraph by selecting an area and picking an option from the dropdown., 75%

Not all content types use all four regions. For example, a content type use its fields to put content inside the Sidebar Area, while another may have a sidebar area but use its Image field instead of a Header Area

Two Ways to Add Paragraphs

Content editors have two ways to add paragraphs onto a page - inline editor and admin portal.

Admin Portal

To add a paragraph into an Area, open that area and select a paragraph from the dropdown. The button will usually be labeled with “Add [First Paragraph in List]” (the first paragraph in the list depends on the content type/area), and there will be some helper text above.

The video below provides an example of the functionality of paragraphs; however, the specific layouts demoed are not Open Y layouts.

Inline Editor

If you’ve upgraded to Open Y 2.4 or later, you can add a paragraph from the front-end by clicking on the Plus icon in a given region and selecting a paragraph from the pop-up window.

Note: Not all paragraphs are available for inline editing yet. More paragraphs will be added to the inline content editor in later releases

Rearranging Paragraphs

Sometimes you have one layout in your head and it doesn’t look as good when you add it to your page. You can easily move around your sections by clicking on the cross icon to the left of your paragraphs. Drag around your paragraphs to rearrange.

Just drag your paragraphs to rearrange them

Editing Paragraphs

Need to fix a typo? Click the edit button next to each paragraph to open it back up and make edits.

Deleting Paragraphs

Maybe you didn’t need that section. Don’t worry: you can easily delete a paragraph by clicking on the remove option from the dropdown next to where it says “Edit.”

Choosing the Right Paragraph Type

Open Y comes with more than 50 paragraph types, and depending on your partner’s customizations, you may have even more. This documentation will focus the types that come out of the box with Open Y and how to use them.

1 - 1 Column

1 Column embeds a single column of content into an area/container on a page, with an option to embed reusable content. Similar to the code paragraph, this paragraph comes out of the box with styles and a text editor.

Examples

Rose - Without Block

rose–landing-page_1-column-no-block

Rose - With Block

rose–landing-page__1-column-with-block

Carnation - With Custom Block

carnation–landing-page_1-column-with-block|690x186


Areas 1 Column Should Be Used

  • Content Area
  • Sidebar Area
  • Bottom Area

How to Use 1 Column

After selecting “1 Column” from the paragraphs dropdown, you will notice paragraph title field, a checkbox, and a required description.

  • Paragraph title adds an all-caps heading at the top of your paragraph. This is optional.
  • The checkbox adds dual horizontal rules. Check this only if you’re planning on using the paragraph title
  • Description (required) - Adds simple text through a text editor. Font color defaults to purple in Lily and Rose.

Custom Block Feature

While the paragraph be used only with the fields above, 1 column also supports custom blocks of content. For this paragraph type, it’s recommended that users stick with “Simple block” types.

When adding your custom block, use the font-awesome icon class instead of the custom icon image field. In Carnation, the image option tends to get too large.

Learn more about custom blocks ⇒

Read about the Font Awesome icon library ⇒

Advanced

The purple font color for paragraph descriptions can be overridden in Lily and Rose by targeting .paragraph-1c-wrapper .field-prgf-1c-description.

Example:

.paragraph-1c-wrapper .field-prgf-1c-description {
color: inherit;
}

Content editors who want to edit this CSS can ask their developers to install the CSS Editor module and edit their styles directly from the User Interface.

https://www.drupal.org/project/css_editor

Content Types that Support This Paragraph

2 - 2 Columns

2 Columns adds two equal-width, reusable blocks of content, side-by-side. The left side stacks on top of the right side for mobile.

Examples

Carnation

carnation–landing-page__2-columns

Lily

lily–landing-page__2-columns

Rose

rose–landing-page__2-columns


Areas it Can Be Used:

  • Content Area
  • Bottom Area

How it Works

  • Select “Two Columns” from the paragraphs dropdown.
  • Insert a custom block into the Left and Right Column

Learn more about custom blocks ⇒

Unlike similar paragraphs (such as 1 column paragraph and Grid Content), there is no title field. To add a Title, insert a Simple Content paragraph above your 2 columns paragraph.


There is an optional checkbox to display a horizontal rule above the two columns.

landing-page__2-columns-line-above


If you want to add multiple rows of content with 2 columns, add a new 2 columns paragraph for each set of two you want (e.g., if you have five blocks of content, add three 2 columns paragraphs).

landing-page__2-columns-multi-row


Content Types That Support this Paragraph

3 - 3 Columns

3 Columns adds three equal-width, reusable blocks of content, side-by-side. The leftmost columns stack on top of columns to their right.

Examples

Carnation

carnation–landing-page__3-columns|690x402, 75%

Lily

lily–landing-page__3-columns|690x402, 75%

Rose

rose–landing-page__3-columns|690x402, 75%

Areas it Can Be Used:

  • Content Area
  • Bottom Area

How it Works

landing-page__3-columns-dropdown|644x500, 50%

  • Select 3 Columns from the Paragraphs dropdown.
  • Title: Optional large, all caps title at the top.
  • Add custom blocks to the Left Column, Center Column, and Right Column fields.

Learn more about custom blocks ⇒

landing-page__3-columns-options|544x500, 75%

If you want to add multiple rows of content with 3 columns, add a new 3 columns paragraph for each set of two you want (e.g., if you have seven blocks of content, add three 3 columns paragraphs).


Content Types That Support this Paragraph

4 - 4 Columns

Adds four equal-width, reusable blocks of content, side-by-side. The leftmost columns stacks on top of columns to their right.

Examples

This paragraph does not work out of the box in Carnation (see Advanced).

Content editors can use Grid Content or Featured Content paragraphs to achieve a similar layout.

Lily

lily–landing-page__4-columns|690x346, 75%

Rose

rose–landing-page__4-columns|690x216, 75%


Areas it Can Be Used:

  • Content Area
  • Bottom Area

How it Works

  • Select 4 Columns from the Paragraphs dropdown
  • Title: Optional large, all-caps title at the top
  • Line Above: Adds a horizontal rule above each column.

landing-page__line-above|615x120, 50%

  • Description: A subheader/section description embedded below the title and above your titles. Uses the text editor for styling.
  • Add custom blocks to the First Column, Second Column, Third Column, Fourth Column.

Screen Shot 2020-03-26 at 2.43.58 PM|580x500, 75%

Learn more about custom blocks ⇒

Adding Headers to Individual Blocks Out of the box, the Title field in each custom block renders as plain text. To work around this, add your headers in the text editor.

See Advanced below for details about how to fix this with CSS.

If you want to add multiple rows of content with 4 columns, add a new 4 columns paragraph for each set of two you want (e.g., if you have seven blocks of content, add two 4 columns paragraphs).

Learn more about the link field ⇒

Advanced

Title Field Styling

In all three themes currently in Open Y, the Title field displays in a font-size and color nearly identical to the body copy. To override, target .field-sb-title.

Carnation -> Columns stack in desktop

In order for this to work in Carnation, the .wrapper containing the column elements needs to be changed to .row; otherwise, each of the four columns expands to the full width of the Area it’s embedded in.

carnation–landing-page__4-columns|690x346, 75%

Content Types That Support this Paragraph

5 - Activity Finder

Documentation in Progress

Activity Finder

What It Does: Embeds the Activity Finder program search experience on your website, which helps users pre-filter the activities they want to search for.

Areas It Should Be Used

  • Content Area
  • Bottom Area

How it Works

This paragraph type requires an integration into a CRM. Out-of-the-box, Open Y’s Activity Finder integrates with Daxko, ActiveNet, and Personify. Any other CRM will require custom developer work.

Read more about the Activity Finder feature >

How you use these paragraphs will depend on how your Association has structured its program data on the CRM and on how you decide to get people to program results.

There are three primary approaches to setting this up: a standard approach, a results-only approach, and a targeted approach.

Standard Approach

Create two Landing Pages. Title one “Find a Program” and the other “Program Search.”

On the “Find a Program” page, add the “Activity Finder” paragraph. Type in “Program Search” and select your Program Search in the “Activity Finder Search Results Page Reference” field.

At the bottom, you will see a field called “Title.” Change the title to “Find a Program.” Save the page.

Next, on the “Program Search” page, add the “Activity Finder Search Results” paragraph into the Content Area. Type in “Find a Program” on the “Activity Finder Page Reference” page.

Results-Only Approach

If you plan on using deep-linking or want to forgo the guided search experience, you can use the “Activity Finder Search Results.” Create a Landing Page called “Program Search” using the One Column (Full Width) layout.

Add the “Activity Finder Search Results” paragraph into your content area and leave the “Activity Finder Page Reference” field blank. Save your page.

Read: Deep-linking to an Activity Finder Program Search results page >

Targeted Approach

Activity Finder can also be used on multiple pages on your site, specifically on your Program Subcategory pages. On a Subcategory page, add the “Activity Finder” paragraph

6 - All Amenities

(deprecated)

Documentation in Progress

All Amenities (deprecated)

What It Does: Shows a list of branches with icons indicating, at a glance, which amenities are available at each branch. Includes a checkbox field to filter branches by amenities.

Areas Where it Should Be Used:

  • Content Area
  • Bottom Area

How to Use It

NOTE: This paragraph provides similar functionality to the Location filter by amenities, and is no longer recommended for use by the Open Y Core Team.

After selecting “All Amenities” from the paragraphs list, you can change the title that displays above the search checkboxes by entering text in the Title field.

Styling will differ greatly based on the theme. Use of this paragraph in Rose is not recommended.

Supported Content Types

Related Paragraphs

  • Location filter by amenities
  • Locations

7 - Banner

Banners add large, full width images to the top of your page, along with a title, optional description and optional link.

Landing page in Carnation on desktop

How to Use a Banner:

In the Header Area of your content, select “Add Banner” from the dropdown. Then, fill out the following fields:

landing-page__banner-fields|690x431

  • Title (required): This field adds a headline to your banner. The placement of the title will depend on your theme and customization, but it will typically appear as large, all-caps text.

  • Color (required): The background color for your banner. You typically will not see this color in Lily or Carnation, but in Rose, it will display behind your text. Choose from the list of available options.

  • Description (optional): Displays beneath your Title. You have the option to style your text using the text editor, but it’s not as consistent as other places where you typically see the editor.

    [b]Recommendation ->[/b] Just enter basic text and don’t do anything beyond basic styling, such as bold or underline.

  • Image:

    landing-page__banner-image-select|480x94

    Use the image library to embed an image. You can upload a new image from your computer or reuse an existing image from your library. The image field is optional, but recommended.

    For recommended image sizes for your Open Y site, talk to your agency partner.

    How to add/edit images >

  • Link/Button: Add a URL and a link to the button on the page. The button on your banner cannot be styled without custom CSS/code. Using link/button fields ⇒

    Note: If you know a little CSS, you can have your agency partner install the CSS Editor module, and you can target .btn.banner-btn to change the default button.

Content Types that Support Banner

8 - Blog Posts Listing

This paragraph adds a section teaser cards that link to blog posts and dropdown search fields for users to search for blogs they want to read.

Examples

Carnation

carnation–landing-page__blog-listing|690x403, 75%

Lily

lily-landing-page__blog-listing|690x456, 75%

Rose

rose–landing-page__blog-listing|690x403, 75%

Areas it Should Be Used

  • Content Area
  • Bottom Area

How to Use Blog Posts

From the paragraphs dropdown, add Blog Posts Listing. Enter a header title for the section in the text field and hit Save.

landing-page__blog-posts-listing-admin|690x193, 75%

Advanced

Advanced users can make changes to the exposed fields using the Views module and the paragraphs settings.

https://www.youtube.com/watch?v=h39RyuMzfBU

The view for the Blog Listings paragraph is not available for editing in the Open Y sandbox, but you can edit the View using your own dedicated instance. Doing so through the UI, however, could have implications for future upgrades.

Content Types that Support Blog Posts

Related/Alternative Paragraphs

9 - Camp Menu

Camp menu adds a horizontal menu beneath the Header Area on a camp page.

Examples

Carnation

carnation–camp__camp–menu|690x180, 75%

Lily

lily–camp__camp-menu|690x242, 75%

Rose

rose–camp__camp-menu|690x242, 75%


Areas It Can Be Used:

  • Header Area

How It Should Be Used

Before adding the paragraph, add the links you want on your menu by adding them on your Camp Page at General Info > Menu Links.

camp__camp-menu–menu-links|450x500, 75%

Learn More About Link Fields ⇒

To add additional links to your menu, click on the Add Another Item button.

camp__camp-menu–add-links|690x194

Once you’re done adding your menu links, scroll down to the Header Area and add “Camp Menu.” Click save.

Note - While it is technically possible to position the camp menu above your banner image, it is not recommended. The camp menu busts in desktop on Carnation, and in all themes it can be hard to distinguish the camp menu from your main navigation.


Mobile Considerations for Camp Menu

When a user views your camp menu in mobile, the menu doesn’t collapse; it merely shrinks. Menu items either disappear or wrap onto a new line if they do not fit the space.

It’s recommended you limit your menu items to no more than 3 or 4 unless you opt to customize.

carnation–camp__camp-menu–mobile|322x500, 75%


Content Types That Support this Paragraph

10 - Categories Listing

Embeds horizontal cards for program subcategories on a programs page.

Examples

Carnation

Desktop

carnation–program__categories-listing|690x482, 75%

Mobile

carnation–program__categories-listing–mobile|430x500, 75%

Lily

lily–program__categories-listing|690x482, 75%

Rose

rose–program__categories-listing|690x475, 75%


Areas It Should Be Used

  • Content Area

How To Use It:

  • On a Programs page, go to the content area and click to open it.
  • Select Categories listing.

admin-program__programs-listing|690x170, 75%

This paragraph can only used on programs pages that have subcategories tied to them. If a program has no subcategories tied to it or if it’s used on another content type, it will not work.

Learn more about programs content type ⇒

Learn more about programs subcategories content type ⇒


Content Types that Support Categories Listing

11 - Code

Examples

YMCA of Central Kentucky / Daxko Schedules iframe

y-example–code__daxko-iframe|690x362, 75%

YMCA of Middle Tennessee / GroupEx Pro Script

y-example–code__gxp-iframe|690x327, 75%

Areas it Should Be Used

  • Content Area
  • Sidebar Area
  • Bottom Area

How To Use Code

  • Select “Add Code” from the paragraphs dropdown.

    admin–code__paragraph-dropdown|690x309, 50%

  • You will see two buttons - one to add a custom block, the other to search for a custom block.

  • To search for an existing custom block, type the name of the block in the autocomplete field and click on an option that appears to embed that block.

  • To add a new block, click the “Add New Custom Block” button.

Learn more about blocks ⇒

  • When you add your block, you will see a blank, unformatted text field. Type your HTML text into this field.

admin–code__block|690x422, 75%

To use code, you must add HTML tags.

Hard returns will be ignored, and text will be printed out in one long string.

Code will not highlight or color-code your HTML.


There is an option to change to a “Full HTML” text editor, which will allow you to make use of the default text editor; however, using this will strip “faulty” HTML out of your block and may prevent you from using certain tags.

Once you’re done, click the button that either says Add custom block or Update custom block, depending on the option you had selected at first.


Content Types that Support Code

12 - Date Block

A date block allow you to schedule different sections to show or hide on your pages.

Areas It Should Be Used

  • Header Area
  • Content Area
  • Sidebar Area
  • Bottom Area

How To Use Date Block

Pick Add Date Block from the list of paragraphs in the dropdown. You will see two options: add a new custom block or add an existing custom block.

Add New Custom Block

If you’re using Date Block for the first time or creating a new date block, choose the Add New Custom Block option.

admin__date-block–new-block|690x440, 75%

Enter a label for your date block in the block description field. If and when you’d like to reuse this section on multiple pages, this is what you’ll use to search for it.

Below the block description field, you will enter a start date and an end date for your block. This schedules content in your date block to publish and unpublish, just like with a content type.

admin__date-block–start-end-dates|690x354, 50%

Below this you can add in paragraphs to display Before, During and After your scheduled dates. Add paragraphs into these fields as you normally would.

admin__date-block–paragraph-fields|690x354, 50%

If you don’t want content to display before, during or after your time period, leave it blank.

Hit “Create custom block” to add your block.


Add Existing Custom Block

To reuse a date block you’ve previously created, click the “Add Existing Custom Block” button.” Enter the description of your block into the autocomplete field. Select your block from the options to drop it in.

admin__date-block–exsiting-block|690x143, 75%


Editing a Date Block

To edit your block, click “edit” next to the paragraph. You will need to click another “edit” button when the name of your date block appears. Make your changes inside the block and, when you’re done, click “Update Custom Block.”

Making any changes to a date block will change it on every page where it has been added.

Learn more about custom blocks ⇒


Content Types That Support Date Block

13 - Embedded GroupEx Pro Schedule

What Is Embedded GroupEx Pro Schedule?:

Embeds the out-of-box GroupEx Pro schedule script on a page with a single click.

Example

y-example__gxp-schedule–houston|690x460, 75%


Areas it Should Be Used

  • Content Area

How it Works

Prerequisite: Requires integration with third-party tool GroupEx Pro.

  • To integrate you GroupEx Pro account, go to the admin toolbar. > > admin__menu–gxp-account-settings|611x500, 75%
  • Go to Open Y > Integrations > GroupEx Pro > Group Ex Pro Account Settings. Add your account number to the field. That’s it! > admin__gxp-account-settings|690x259, 75%

For information on where to find your GroupEx Pro account number, visit groupexpro.com.


Adding the Paragraph to Your Page

Select Embedded GroupEx Pro Schedule from the paragraphs dropdown. Hit save.

admin__gxp-schedule|690x66


Content Types That Support Embedded GroupEx Pro Schedule


  • Repeat Schedules
  • Repeat Schedules (Branch)

14 - FAQ

Create an easy-to-read FAQ or policy section with the FAQ paragraph. FAQ adds an accordion tab that expands when users click on it.

Example

carnation–landing-page__faq|669x500, 50%


Where it Can Be Used

  • Content Area
  • Sidebar Area

How it Works:

  • Select FAQ from the paragraph dropdown

    admin__faq–dropdown|690x259

  • Add a title or a Question into the Question field. This will show as the title of your section.

  • Use the text editor to provide an answer/expanded section of content once the user clicks on your section.

    admin__faq–fields|669x500, 75%

    Learn how to use the text editor ⇒


Add Another Section

To add another Question and Answer, click the Add another item button at the bottom of your paragraph.

admin__faq–fields–another-item-button|519x103, 50%


Content Types that Support this Paragraph

15 - Featured Blog Posts

Create a standalone page with a listing of blog posts curated one-by-one. Great for linking in emails and social media posts.

Examples

Carnation

Desktop

carnation–landing-page__featured-blog-posts–desktop|690x351, 50%

Mobile

carnation–landing-page__featured-blog-posts–mobile|432x500, 50%

Lily

Desktop

lily–landing-page__featured-blog-posts–desktop|690x351, 50%

Mobile

lily–landing-page__featured-blog-posts–mobile|432x500, 50%

Rose

Desktop

rose–landing-page__featured-blog-posts–desktop|690x351, 50%

Mobile

rose–landing-page__featured-blog-posts–mobile|432x500, 50%


Areas It Can Be Used

  • Content Area
  • Bottom Area

How to Use It

Add a headline for this section of content in the Headline field.

Next, type in the name of the blog you would like to feature in the autocomplete field. Click on the post when it shows up below.

admin__featured-blog-posts|690x362, 75%

To add another blog post, click the Add another item button. Click the blue save button at the bottom when you’re finished.

admin__faq–fields–another-item-button|519x103, 50%


16 - Featured Content

Featured content adds a section of simple simple columns onto a page with an optional call-to-action button on the bottom, an optional title, and optional description.

Examples

Carnation

carnation–landing-page__featured-content–desktop|690x409, 50%

Lily

lily–landing-page__featured-content–desktop|690x409, 50%

Rose

rose–landing-page__featured-content–desktop|690x409, 50%


Areas It Can Be Used

  • Content Area
  • Bottom Area

Note: The styling for Featured Content differs greatly by theme. This documentation notes the differences in styling between each theme.

Select Add featured content from the paragraphs dropdown. Add an optional headline in the headline field above.

  • Lily/Rose: The headline left-aligns by default.
  • Carnation: The headline center-aligns in Carnation.

Next, add an optional Description using the text editor. Avoid changing your text alignment for your description.

Add an optional link in the link field.

Learn how to use a Link field ⇒


Select the number of columns you would like to have in each row using the style dropdown.

  • Carnation: Due to the card styling in Carnation, this field does not limit the number of cards that will display in a single row. A recommended workaround is to add multiple rows of featured content or use the Grid Content paragraph type.

Advanced users: You can clear the confusion for content editors in Carnation by making the style field an optional field and hiding it in the form display in the UI.

Additionally, you can limit the number of columns to four in the Featured Content’s paragraph settings.

Finally, add content for each column of content using the text editor. To add additional columns click the “Add Another Item” button.

admin__featured-content|690x449, 75%

  • Lily/Rose: Adding more columns than what you selected in the “Style” dropdown will create additional rows. Aligning each column’s content is not recommended unless you are not using any other field.

17 - Featured News Posts

Featured News Posts creates a standalone page with a listing of news posts curated one-by-one. Great for linking in emails and social media posts.

Examples

Carnation

Desktop

carnation–landing-page__featured-news-posts–dekstop|690x288, 50%

Mobile

carnation–landing-page__featured-news-posts–mobile|413x500, 50%

Rose

rose–landing-page__featured-news-posts–dekstop|690x376, 50%


Areas It Can Be Used

  • Content Area
  • Bottom Area

Add a Headline for this section of content in the Title field.

Next, type in the name of the news post you would like to feature in the autocomplete field. Click on the post when it shows up below.

admin__featured-news-posts|690x409, 50%

To add another news post, click the Add another item button. Click the blue save button at the bottom when you’re finished.

admin__faq–fields–another-item-button|519x103, 50%

18 - Gallery

The Open Y gallery embeds a carousel or slider of images onto a page. The gallery can play on a loop, and users can click back and forth using the arrows.

You can have a gallery with a simple title, and you can also add a description below the headline and/or a call to action button.

Examples

Carnation

Desktop

carnation–branch__gallery-desktop|690x271, 50%

Mobile

carnation–branch__gallery-mobile|636x500, 50%

Lily

Desktop

lily–branch__gallery-desktop|690x307, 50%

Mobile

lily–branch__gallery-mobile|558x500, 50%

Rose

rose–branch__gallery-desktop|690x307, 50%


Areas It Can Be Used

  • Header Area
  • Content Area
  • Bottom Area

Once you’ve selected a gallery from the paragraphs dropdown, enter a Headline for the gallery.

Next, if you would like to add a subhead or description below your title, add it below the headline in the Description field.

Only use basic text formatting on your description, such headlines. Avoid using bullets or numbered lists in this field.

Learn more about the text editor ⇒

Optionally, you can add a Link in the link field.

admin__gallery–link|690x217, 50%

How link fields work in Open Y ⇒

Below the link field, you will add your images. Click on the Add images button to select the pictures for your gallery. You can upload an image to the media library, or select multiple images from your library.

Learn how to upload images in the media library ⇒

Once you’ve uploaded/selected your images, click that blue Add images button at the bottom.

To order your images, hover your mouse over the thumbnail in the “Images” section, and then drag them to reorder. You will see a cross-arrow icon when you’re dragging them around, similar to what you see when you reorder paragraphs.

admin__gallery–rearrange|690x415, 75%

To delete a photo from the gallery, click the delete button below the image.

Hit Save at the bottom of the image to save it.


Content Types that Support Galley

19 - Grid Content

Grid content allows you to embed one or more rows of up to four sections of content side-by-side. Allows you to have a title with an icon, a description and a link.

Examples

Carnation

carnation–branch__grid-content|690x326, 50%

Lily

lily–branch__grid-content|690x326, 50%

Rose

rose–branch__grid-content|690x217, 50%


Areas It Should Be Used:

  • Content Area
  • Bottom Area

How to Use Grid Content:

Note on Grid Content: This paragraph’s style will vary greatly depending on your theme. The docs outline how to use the fields.

admin__grid-content–add|669x500, 50%

First, choose Grid Content from the Paragraphs dropdown. You will then see a dropdown with four options under Style:

  • 2 items per row
  • 3 items per row
  • 4 items per row

Select a style to choose how wide you want each section to be; the more items per row, the narrower they will be.

// Examples

// 2 items per row w/ 2 Grid Columns

admin__grid-content–2-items|669x500, 50%

carnation–landing-page__grid-content–2-item-style|690x245, 50%


/// 3 items per row w/ 2 grid columns

admin__grid-content–3-items|451x500, 50% carnation–landing-page__grid-content-3-item-style|690x299, 50%

Next, you will see a button that says Add Grid Columns. This is where you will start adding your individual sections/cards.

For each item you add, you will have the following fields:

Note: If you add more items than your selected style, you will create a new row. For example:

  • 2 items per row style, 3 items added -> two rows of content
  • 3 items per row style, 5 items added -> two rows of content
  • 4 items per row style, 9 items added -> three rows of content

Content Types that Support Grid Content

20 - Latest Blog Posts

(including Camp/Branch)

These three paragraphs embed a listing of blog posts, sorted by the most recent, in a card design.

  • Latest Blog Posts shows all the most recent blog posts across your entire site.

  • Latest Blog Posts (Branch) filters your most recent blog posts by the branch the paragraph is embedded on (for example, if on a Downtown YMCA page, only Downtown YMCA blog posts will show up). Placed on a non-branch page, only the headline will show up.

  • Latest Blog Posts (Camp) filters blog posts by the branch the paragraph is embedded on (for example, if on a Camp Widjiwagan page, only Camp Widjiwagan YMCA blog posts will show up). Placed on a non-camp page, only the headline will show up.

Areas it Should Be Used

  • Content Area
  • Bottom Area

How to Use Latest Blog Posts

From the paragraphs dropdown, add Latest Blog Posts, Latest Blog Posts (Branch) or Latest Blog Posts (Camp). Enter a header title for the section in the text field and hit save.

Unlike the related Blog Posts Listing, this paragraph does not include filters for searching blog posts.

Content Types that Support Latest Blog Posts

Content Types that Support Latest Blog Posts (Branch)

Content Types that Support Latest Blog Posts (Camp)

Related/Alternative Paragraphs

21 - Latest News Posts

(including Camp/Branch)

These three paragraphs embed a listing of News posts, sorted by the most recent, in a row/listing design

  • Latest News Posts shows all the most recent news posts across your entire site.

  • Latest News Posts (Branch) filters news posts by the branch the paragraph is embedded on (for example, if on a Downtown YMCA page, only Downtown YMCA news posts will show up). Placed on a non-branch page, only the headline will show up.

  • Latest News Posts (Camp) filters News posts by the branch the paragraph is embedded on (for example, if on a Camp Widjiwagan page, only Camp Widjiwagan YMCA News posts will show up). Placed on a non-camp page, only the headline will show up.

Examples

Carnation

carnation–camp__latest-news-posts–desktop|690x264, 75%

Rose

rose–camp__latest-news-posts–desktop|690x368, 75%

Areas it Should Be Used

  • Content Area
  • Bottom Area

How to Use Latest News Posts

From the paragraphs dropdown, add the “Latest News Posts.” Enter a header title for the section in the text field and hit save.

admin__latest-news-posts|690x99


Content Types that Support Latest News Posts

Content Types that Support Latest News Posts (Branch)

Content Types that Support Latest News Posts (Camp)

Related/Alternative Paragraphs

22 - Limited Time Offer

Documentation in Progress

Limited Time Offer

What it Does: Adds an anchoring element to the bottom of a page, similar to a small banner. Best for promotional offers.

Areas Where It Can Be Used

  • Bottom Area

How to Use Limited Time Offer

Go to the Bottom Area and select Limited Time Offer. Fill in the Title field for your main headline, and if you would like to add an additional subheader below the title field, use the field below.

To add a button, use the link field. Learn how to use the Link field >

Content Types that Support Limited Time Offer

  • Landing Page
  • Camp
  • Branch
  • Facility
  • Program
  • Program Subcategory
  • Class

Related Paragraphs Types

  • Small Banner
  • Promo Card

Additional Screen Shots

23 - Membership Calculator

Membership Calculator adds an interactive “membership wizard” to an Open Y site.


Areas it Should Be Used

  • Content Area
  • Bottom Area

How to Use Membership Calculator

From the paragraphs drop-down, add the Membership Calculator. No additional configuration is necessary on the page.

The Membership Calculator uses Membership content items. Those will need to be created in order for the Membership Calculator to function.

First, create a Membership node for each membership type your Branch or Association offers. Then, inside each Membership node, add a Membership Info Paragraph with the details of that membership at each of your Locations.

The Membership Calculator is a three-step process:

  1. Membership Type
  2. Primary Location
  3. Summary

Membership Type

This step lists the Title, Image, and Description of each published Member node.

Join___Drush_Site-Install|690x373

Primary Location

This step provides a map with radio buttons for the member to select their primary location. Every location listed in the Open Y Location Filter Settings (see Troubleshooting section below) is listed.

Join___Drush_Site-Install|690x442

Summary

This page provides a link for the member to continue their registration, or a message indicating the selected membership is not provided at the selected location.

Join___Drush_Site-Install|690x227 Join___Drush_Site-Install|690x220

Troubleshooting

On some sites, the second step of the Membership Calculator may not show any locations. In order to resolve this, visit Administration > Open Y > Settings > Open Y Location Filter Settings and ensure that any Branches you want to use in the location search are checked.

Locations_filter_settings___Drush_Site-Install|689x287

Content Types that Support Membership Calculator

24 - News Posts Listing

News Posts Listing adds a section of listings that link to news posts and dropdown search fields for users to search for news they want to read.


Areas it Should Be Used

  • Content Area
  • Bottom Area

How to Use News Posts

admin__news-posts-listing|690x99, 75%

From the paragraphs dropdown, add the News Posts Listing. Enter a header title for the section in the text field and hit Save.

Note: Advanced users can make changes to the exposed fields using the Views module and the paragraphs settings.

Content Types that Support News Posts

Related/Alternative Paragraphs

25 - Promo Card

Adds a small individual card to the sidebar of a page. Great for posting evergreen promotional content, such as links to join pages.

Examples

Carnation

carnation__promo-card|652x500, 50%

Lily

lily__promo-card|690x434, 50%

Rose

rose__promo-card|541x500, 50%

Areas It Should be Used

  • Sidebar Area

How to Use the Promo Card

In your sidebar area, select Add Promo Card from the paragraphs list.

You can add an optional large Title in the top text field, while the required Headline field puts a smaller headline below the title.

The description field is a text editor that allows you to enter any content you want with the standard text editor options.

Learn how to use the Text Editor ⇒

You can add link and call to action text in the Link field.

Learn how to use link fields ⇒


Content Types that Support Promo Card

26 - Secondary Description and Sidebar

Documentation in Progress

Secondary Description and Sidebar

What It Does: Adds a bottom area element for anchoring a page, with a gray background and two columns of reusable content. The right column flushes to the right.

Areas it Should Be Used:

  • Bottom Area

How to Use Secondary Description and Sidebar

Note: This element does not work properly in Carnation.

Insert the paragraph from the dropdown into the Bottom Area.

You will have two fields to insert blocks - a Left Column and a Right Column. Select from one of four different custom block types, and either add a new custom block or reuse an existing block type.

Learn how to use custom blocks >

Note: When reusing blocks, the icon field does not work in this paragraph. Font awesome icons will render as text.

27 - Simple Content

What is Simple Content?

Simple content adds a section of non-reusable text onto a page. Good for places where basic text is needed and nothing else.

Areas It Should Be Used

  • Content Area
  • Sidebar Area

How to Use Simple Content

From the paragraphs dropdown, select Add Simple Content. standard text editor will appear, and you can style your text however you want.

Learn How to Use the Text Editor ⇒

Note: In Carnation, stacking multiple sections of simple content on top of one another will not create enough space for users to distinguish between sections.

To create this space, add a pair of hard returns or a horizontal rule at the bottom of your text.

All Content Types Support Simple Content ⇒

28 - Small Banner

The small banner is a wide, short image that serves as a page header or as a page element, such as an anchor in the bottom area. Comes with fields for a title, background color, description and image.

Examples

Carnation

Desktop

carnation–landing-page__small-banner|690x182, 75%

Mobile

carnation–landing-page__small-banner–mobile|652x500, 50%

Lily

Desktop

lily–landing-banner__small-banner–desktop|690x307, 50%

Mobile

lily–landing-page__small-banner–mobile|514x500, 50%

Rose

Desktop

rose–ladning-page__small–banner–desktop|690x319, 75%

Mobile

rose–landing-page__small-banner–mobile|486x500, 50%

Areas it Can be Used

  • Header Area
  • Content Area (1 column only)
  • Bottom Area

How to Use a Small Banner

Select Add Small Banner from the paragraphs dropdown. Then, fill out the following fields:

  • Title (required): This field adds a headline to your banner. The placement of the title will depend on your theme and customization, but it will typically appear as large, all-caps text.

  • Color (required): The background color for your banner. In Lily and Rose, this background color displays behind your title and description.

    In Carnation, you will not see the background color unless you choose not to add an image.

  • Description (optional): Displays beneath your Title. You have the option to style your text using the text editor, but it’s not as consistent as other places where you typically see the editor..

  • Image: Use the image library to embed an image. You can upload a new image from your computer or reuse an existing image from your library. The image field is optional, but recommended.

    • Note -> This does not work in Rose.

    For recommended image sizes for your Open Y site, talk to your agency partner.

    How to add/edit images ⇒

    *Note: Unlike the Banner, Small Banners don’t come with a specific Link field for buttons without customization.

    To add a button to a small banner, you can use the Text Editor button tool to create a button in your description field.

    How to add buttons in a text editor field ⇒


Content Types that Support Small Banner

29 - Social Share Icons

Documentation in Progress

Social Share Icons

Want your site visitors to easily share your content on social media? Make it easy for your users with the social share icons paragraphs.

To add the paragraph, simply select it from the paragraphs list, and you’re done!

Advanced

Customizing Your Icons

By default, the social share icons paragraph shows Twitter, Facebook, Pinterest, and a generic “More” icon. To configure these buttons, sign up for an AddThis account.

Once you sign up, choose “Select a Tool.” Then, on the following screen, select “Inline.” Hit Continue.

On the next page, select “Selected by you” and choose the social buttons you would like to appear. Then, click configure tool.

On the next screen, scroll down to the “Just Copy” section and grab your public id (the part after the /s7.addthis.com/js/300/addthis_widget.js#pubid=

Your id should look something like this: ra-5e0fb44ead5eb04f

** If you are having trouble with this, contact your Open Y agency partner, and they can help get this set up for you. You will still need to set up your account.

Go back to your Open Y site and then go to your admin toolbar: Open Y > Setting > AddThis Settings

Paste your public id into the field on the next page. Then click save.

Next, go to Configuration > Development > Performance. Click “Clear All Caches.”

Your new buttons should appear!

Where it Can Be Used

  • Content Area
  • Sidebar Area

30 - Story Card

Documentation in Progress

Story Card

What It Does: Adds a simple card to the sidebar with a title, headline and call to action.

Areas it Can Be Used:

  • Sidebar Area

How to Use It:

In the sidebar area on a piece of content, select “Story Card.” Add a Title and Headline. The Title will be larger than the Headline and display above the Headline.

Add your link in the link field below. Unlike most paragraph types, the link field does not create a button or standalone link; the entire card becomes the link. The link text is required; however, it will not stand out a like typical call to action.

To work around this, add a > or another special character to indicate to users they are clicking on a link.

Carnation Only

While this component is available to use in Carnation, it is not themed with a border as in Lily or Rose. The best practice is to use this paragraph sparingly and only in the following content types:

  • Facility
  • Event

How to use a Link Field >

This Paragraph works best in Lily and Rose. In Carnation, the Story Card works best inside the News Post, Event, and Blog Post paragraphs.

Advanced

*Note: In the headline area on Lily and Rose, a large quotation mark will display to the left of your headline. This can be easily disabled using the following CSS:

.story-card .quote svg { display: none; }

Content Types That Support Story Card

  • Landing Page
  • News Post
  • Blog Post
  • Facility
  • Program
  • Program Subcategory

Additional Screenshots

31 - Teaser

Documentation in Progress

Secondary Description and Sidebar

What It Does: Adds a bottom area element for anchoring a page, with a gray background and two columns of reusable content. The right column flushes to the right.

Areas it Should Be Used:

  • Bottom Area

How to Use Secondary Description and Sidebar

Note: This element does not work properly in Carnation.

Insert the paragraph from the dropdown into the Bottom Area.

You will have two fields to insert blocks - a Left Column and a Right Column. Select from one of four different custom block types, and either add a new custom block or reuse an existing block type.

Learn how to use custom blocks >

Note: When reusing blocks, the icon field does not work in this paragraph. Font awesome icons will render as text.

32 - Webform

This paragraph embeds a Webform onto a page.

Areas it Should be used:

  • Content Area
  • Sidebar Area
  • Bottom Region

How to Use Webform

Prerequisite: You must have your web form created before embedding onto a page. While you can continue to revise and edit your form, using this paragraph will NOT create a webform for you.

Drupal Webform Tutorials (by Jacob Rockowitz) ⇒

Once you’ve selected Webform from the paragraphs dropdown, select the name of the webform you want to embed onto your page.

admin__webform–select-form|514x499, 75%

Next, you will have the option to open, close or schedule your open/close dates for your webform.

Ignore the “Default submission pairs” field, unless you’re a YAML wizard and want to have some default values for certain fields in case your users forget to fill them out.


Content types that Support Webform