Paragraphs

Embed simple text, images, blocks and interactive components with blocks, YMCA Website Services’s layout-building component.

YMCA Website Services 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.

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 YMCA Website Services layouts.

Inline Editor

If you’ve upgraded to YMCA Website Services 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

YMCA Website Services 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 YMCA Website Services and how to use them.


1 Column

Embeds a single column of content into an container, with an option to embed reusable content.

2 Columns

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

3 Columns

Add three equal-width, reusable blocks of content, side-by-side. Columns stack left to right on mobile.

4 Columns

Add four equal-width, reusable blocks of content, side-by-side. Columns stack left to right on mobile.

Activity Finder

Embed the Activity Finder program search experience on your website, which helps users pre-filter the activities they want to search for.

All Amenities

(deprecated)

Banner

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

Blog Posts Listing

Add a section with teaser cards that link to blog posts and dropdown search fields.

Camp Menu

Add a horizontal menu beneath the Header Area on a camp page.

Categories Listing

Embed horizontal cards for program subcategories on a programs page.

Code

Unformatted, unrestricted text that supports any HTML tag and can be embedded anywhere. Great for embedding iframes and third-party scripts.

Date Block

Schedule different sections to show or hide on your pages.

Embedded GroupEx Pro Schedule

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

FAQ

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

Featured Blog Posts

Create a standalone page with a curated listing of Blog Posts.

Featured Content

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

Featured News Posts

Create a standalone page listing curated News Posts.

Gallery

Embed a carousel or slider of images onto a page.

Grid Content

Embed one or more rows of up to four columns of content - each with a title, icon, description, and link.

Latest Blog Posts

Embed a listing of blog posts with optional filtering by Camp/Branch.

Latest News Posts

Embed a listing of News Posts with optional filtering by Camp/Branch.

Limited Time Offer

Add an anchoring element to the bottom of a page, similar to a small banner. Best for promotional offers.

Membership Calculator Paragraph

Membership Calculator adds an interactive “membership wizard” to an YMCA Website Services site.

News Posts Listing

Add a filterable section of news posts to a page.

Promo Card

Add a small individual card to the sidebar of a page with evergreen promotional content, such as links to join pages.

Secondary Description and Sidebar

Add a bottom area element with two columns of reusable content for anchoring a page.

Simple Content

Add a section of basic text onto a page.

Small Banner

A wide, short image with fields for a title, background color, description and image.

Social Share Icons

Make it easy for your user to share content on social media.

Story Card

Add a simple card to the sidebar with a title, headline and call to action.

Teaser

Add a wide feature with an image, text, and a call to action.

Webform

Add an existing Webform to a page.

Last modified August 31, 2023: DS-28 docs: Lint paragraphs (d93895a0d)