YMCA Website Services content editors use Paragraphs to create flexible and unique layouts for their pages. Each Paragraph is a self-contained section of content with its own styling, functionality, and fields. Paragraphs are based on the
Paragraphs Drupal module.
You can add a Paragraph to a page when you see the Paragraphs field. These Paragraphs are typically placed within one of the four main “Areas” of a content type:
Header Area - Used for adding images, page titles, and other introductory content.
Content Area - The primary area for your main content.
Sidebar Area - Used for related information, such as promotions or links to other content.
Bottom Area - Often used for calls to action or other “anchoring” elements at the end of the page.
Not all content types use all four areas. Some content types might use fields directly to populate the Sidebar Area, while others might use an Image field instead of a dedicated Header Area.
Two Ways to Add Paragraphs
Content editors can add Paragraphs to a page using either the inline editor or the admin portal.
Admin Portal
To add a Paragraph to an Area:
Open the desired Area.
Select a Paragraph type from the dropdown. The button is typically labeled “Add [First Paragraph in List]”.
Helper text is usually provided above the dropdown.
The video below provides an example of the functionality of Paragraphs; however, the specific layouts demonstrated 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:
Click the Plus icon in the desired region.
Select a Paragraph type from the pop-up window.
Note: Not all Paragraph types are available for inline editing yet. More Paragraphs will be added to the inline content editor in future releases.
Rearranging Paragraphs
If the initial layout doesn’t meet your needs, you can easily rearrange sections:
Click the cross icon to the left of the Paragraph.
Drag the Paragraph to its new position.
Editing Paragraphs
To correct a typo or update content, click the edit button next to the Paragraph. This will open the Paragraph for editing.
Deleting Paragraphs
To remove an unwanted section, click the remove option from the dropdown menu next to “Edit.”
Choosing the Right Paragraph Type
YMCA Website Services offers over 50 Paragraph types out of the box, and customizations by your partner might add even more. This documentation focuses on the standard Paragraph types available with YMCA Website Services and how to use them.
1 - 1 Column
Embeds a single column of content into a container, with an option to embed reusable content.
Examples
Rose - Without Block
Rose - With Block
Carnation - With Custom Block
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 the following fields:
Paragraph title (optional)
Checkbox (optional, for horizontal rules)
Description (required)
Details on each field are below.
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 can 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.
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.
Add two equal-width, reusable blocks of content, side-by-side. The left side stacks on top of the right side for mobile. In the Lily theme, the left column is 8 units wide and the right column is 4 units wide.
Examples
Carnation
Lily
Rose
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.
There is an optional checkbox to display a horizontal rule above the two columns.
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).
Add three equal-width, reusable blocks of content side-by-side. Columns stack top to bottom on mobile devices for optimal viewing.
Examples
The 3 Columns paragraph provides a way to display content in a visually appealing and organized manner. Here are a few examples of how it looks in different themes:
Carnation
Lily
Rose
Areas It Can Be Used
The 3 Columns paragraph can be used in the following areas:
Content Area
Bottom Area
How It Works
The 3 Columns paragraph allows you to create a row with three custom blocks of content. Here’s how to use it:
Select 3 Columns from the Paragraphs dropdown.
Title: Add an optional title. The title will appear in all caps at the top of the 3 columns section.
Add custom blocks to the Left Column, Center Column, and Right Column fields.
Out of the box, the Title field in each custom block renders as plain text. To work around this, add your headers directly within the text editor of the custom block.
See the Advanced section for details about how to address this with CSS.
If you want to add multiple rows of content with 4 columns, add a new 4 Columns paragraph for each row. For example, if you have seven blocks of content, add two 4 Columns paragraphs (the second one will only have 3 columns populated).
In all three themes currently in YMCA Website Services (Lily, Rose and Carnation), the Title field’s default styling may appear similar to the body copy. To override this and apply a more prominent style, target the .field-sb-title CSS class in your theme’s stylesheet.
Carnation: Columns Stacking on Desktop
By default, the 4 Columns paragraph may not render correctly in the Carnation theme, with columns stacking vertically instead of horizontally on desktop. To fix this, the .wrapper containing the column elements needs to be changed to .row using CSS.
This paragraph type embeds a block. The specific block used determines the functionality and appearance of the Activity Finder. Multiple Activity Finder block types exist, including:
Activity Finder Block: (deprecated) Original Activity Finder
Activity Finder Search Block: (deprecated)
Activity Finder v4: Latest Activity Finder, uses Vue.js.
This paragraph type requires an integration into a CRM. See
Program Activity Framework for a list of existing integrations. Any other CRM will require custom developer work.
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.
To start, add the Activity Finder Paragraph or Block to a page.
Warning: This paragraph is deprecated and provides similar functionality to the “Location filter by amenities” paragraph. It is no longer recommended for use by the YMCA Website Services Core Team. Consider using the “Location filter by amenities” paragraph instead.
What It Does:
Shows a list of branches with icons indicating the amenities available at each branch. Includes a checkbox field to filter branches by amenities. This is implemented via the lb_branch_amenities_blocks module.
Areas Where It Can Be Used:
Content Area
Bottom Area
How to Use It
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 can differ greatly based on the theme. Use of this paragraph in Rose is not recommended.
Add large, full width images to the top of your page, along with a title, optional description and optional link.
How to Use a Banner
To add a banner, select Add Banner from the paragraphs dropdown in the Header Area of your content. 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. 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. This references the Color vocabulary.
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.
Recommendation: Just enter basic text and don’t do anything beyond basic styling, such as bold or underline.
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.
For recommended image sizes for your YMCA Website Services 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 ⇒](../../text-editor/building-buttons)
Note: If you know a little CSS, you can have your agency partner [install the CSS Editor](
https://www.drupal.org/project/css_editor) module, and you can target .btn.banner-btn to change the default button.
Add a section with teaser cards that link to blog posts. Includes optional dropdown search fields.
Examples
Carnation
Lily
Rose
Areas it Should Be Used
Content Area
Bottom Area
How to Use Blog Posts Listing
From the paragraphs dropdown, add Blog Posts Listing.
Enter a header title for the section in the text field.
Hit Save.
This paragraph allows you to display a listing of blog posts with optional search and filtering capabilities. The appearance and available options might vary based on the theme (Carnation, Lily, Rose).
Add a horizontal menu beneath the Header Area on a camp page.
Examples
Carnation
Lily
Rose
Areas It Can Be Used
Header Area
How It Should Be Used
Before adding the paragraph, create the menu you want to use. You can create a new menu at Admin > Structure > Menu > Add menu (/admin/structure/menu/add).
After creating the menu, add links to it by navigating to Admin > Structure > Menu > [Your Menu] > Add link (/admin/structure/menu/manage/[your-menu-name]/add).
To add additional links to your menu, click on the Add Another Item button.
Once you’re done adding your menu links, scroll down to the Header Area and add the Camp Menu block via Layout Builder. Click Save.
Note - While it is technically possible to position the Camp Menu above your banner image, it is not recommended. The Camp Menu has layout issues on desktop in the Carnation theme, 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 on 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 the styling.
Embed horizontal cards for program subcategories on a programs page.
Examples
Carnation
Desktop
Mobile
Lily
Rose
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.
This paragraph can only be 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.
Unformatted, unrestricted text that supports any HTML tag and can be embedded anywhere. Great for embedding iframes, third-party scripts, and other custom HTML.
Examples
YMCA of Central Kentucky / Daxko Schedules iframe
YMCA of Middle Tennessee / GroupEx Pro Script
Areas It Should Be Used
Content Area
Sidebar Area
Bottom Area
How to Use Code
Select “Add Code” from the paragraphs dropdown.
You will see two options: “Add Custom Block” to create a new code block, or an autocomplete field to search for and embed an existing 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.
When you add your block, you will see a blank, unformatted text field. Type your HTML text into this field.
Important Considerations When Using Code Blocks:
To use code, you must add HTML tags.
Hard returns will be ignored, and text will be printed out in one long string. Use HTML line breaks (<br>) or paragraph tags (<p>) to format your text.
Code will not highlight or color-code your HTML. To display code snippets with syntax highlighting, consider using a different paragraph type or a dedicated code highlighting library.
There is an option to change to a “Full HTML” text editor within the block configuration, which will allow you to make use of the default text editor. However, using this may strip “faulty” or disallowed HTML out of your block and may prevent you from using certain tags. Exercise caution when using the “Full HTML” editor for code blocks.
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.
Schedule different sections to show or hide on your pages based on date and time.
Areas Where Date Blocks Can Be Used
Header Area
Content Area
Sidebar Area
Bottom Area
How to Use Date Blocks
In the desired content area, choose Add Date Block from the list of paragraphs in the dropdown menu.
You will then see two options: Add New Custom Block or Add Existing Custom Block.
Add New Custom Block
If you are using Date Block for the first time or want to create a new, unique date block:
Choose the Add New Custom Block option.
Enter a descriptive Label for your date block in the Block description field.
This label is for administrative purposes and will help you identify the block when reusing it on multiple pages. It is not displayed on the front end of the site.
Enter a Start Date and End Date for your block.
The content within the date block will only be visible between these dates, similar to how content types can be scheduled for publishing and unpublishing.
Add paragraphs to the designated areas to display content Before, During, and After your scheduled dates.
Use the corresponding fields and add paragraphs as you normally would.
If you do not want content to display before, during, or after your specified time period, leave the corresponding field blank.
Click Create custom block to save your date block.
Add Existing Custom Block
To reuse a date block that you have previously created:
Click the Add Existing Custom Block button.
Enter the Label of your block into the autocomplete field.
Select your block from the options to add it to the content area.
Editing a Date Block
To edit a Date Block:
Click Edit next to the paragraph where the Date Block is located.
Click the second Edit button that appears next to the name of your date block.
Make the desired changes within the block.
Click Update Custom Block to save your changes.
Any changes made to a date block will be applied to every page where that block has been added.
To add another Question and Answer, click the Add another item button at the bottom of your paragraph.
Structured Data for SEO
If your FAQ contains Frequently Asked Questions, consider enabling the “FAQ?” option within the paragraph to output them as structured data. This can improve your site’s visibility in search engine results. Ensure the content contains individual sets of questions and answers.
Display a curated list of blog posts on a page. This paragraph allows you to hand-pick the blog posts you want to highlight.
Examples
This paragraph is rendered differently depending on the theme. Here are some examples:
Carnation
Desktop
Mobile
Lily
Desktop
Mobile
Rose
Desktop
Mobile
Usage
When to Use
The Featured Blog Posts paragraph is ideal for:
Highlighting specific blog posts that are particularly relevant.
Creating a curated resource page of top blog content.
Drawing attention to older blog posts that are still valuable.
Areas It Can Be Used
This paragraph can be used in the following areas:
Content Area
Bottom Area
Configuration
Adding Featured Blog Posts
Add a Featured Blog Posts paragraph to the desired content type.
In the Headline field, add a title for the featured blog posts section. This is optional; if left blank, a default title of “Latest news & Updates” will be used.
In the autocomplete field, begin typing the name of the blog post you want to feature.
Select the desired blog post from the suggestions that appear.
Repeat steps 3 and 4 to add additional blog posts.
To add more blog posts, click the Add another item button.
Click the blue Save button at the bottom of the page to save your changes.
Available Fields
Field
Machine Name
Required
Description
Headline
field_prgf_headline
No
Title of the featured blog posts section.
Blog Posts
field_fblog_posts
Yes
References to the blog posts you want to feature. Supports multiple blog posts.
Supported Content Types
The “Featured Blog Posts” paragraph can be added to the following content types:
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.
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.
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.
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.
To delete a photo from the gallery, click the delete button below the image.
Embed one or more rows of up to four columns of content - each with a title, icon, description, and link.
Examples
Carnation
Lily
Rose
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.
First, choose Grid Content from the Paragraphs dropdown. You will then see a dropdown with options under Style, determining the number of items per row:
2 items per row
3 items per row
4 items per row
Select a style to choose how many sections/cards you want to display in a row; the more items per row, the narrower they will be.
Examples
2 Items Per Row
3 Items Per Row
Next, you will see a button that says Add Grid Columns. Click this button to add individual sections/cards.
For each item you add, you will have the following fields:
Headline (optional) - A title for your section. The size will vary depending on your selected style and theme.
Icon (optional) - An image to display inline with your headline. Upload a new image or use one in your image library.
Icon Class - A
Font Awesome icon CSS class. Type the name of the class, and the system will generate the icon.
Description - A standard text editor field. Because of how each grid content item is styled, it’s recommended that the text in this field be shorter than 200 characters.
Embed a listing of blog posts with optional filtering by Branch or Camp.
These paragraphs embed a listing of blog posts, sorted by the most recent, in a card design. They utilize a dynamic paragraph that renders blog posts.
Latest Blog Posts: Shows the most recent blog posts across your entire site.
Latest Blog Posts (Branch): Filters the most recent blog posts by the branch the paragraph is embedded on. For example, if placed on a “Downtown YMCA” page, only “Downtown YMCA” blog posts will be displayed. If placed on a non-branch page, only the headline will be shown.
Latest Blog Posts (Camp): Filters blog posts by the camp the paragraph is embedded on. For example, if placed on a “Camp Widjiwagan” page, only “Camp Widjiwagan YMCA” blog posts will be displayed. If placed on a non-camp page, only the headline will be shown.
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.
Save the paragraph.
Unlike the related
Blog Posts Listing, this paragraph does not include filters for searching blog posts.
Embed a listing of news posts with optional filtering by Camp/Branch.
These paragraphs embed listings of news posts, sorted by the most recent, in a row/listing design. There are three variations:
Latest News Posts: Displays all the most recent news posts across your entire site.
Latest News Posts (Branch): Filters news posts by the branch on which the paragraph is embedded. For example, if placed on a “Downtown YMCA” page, only “Downtown YMCA” news posts will be shown. If placed on a non-branch page, only the headline will be displayed.
Latest News Posts (Camp): Filters news posts by the camp on which the paragraph is embedded. For example, if placed on a “Camp Widjiwagan” page, only “Camp Widjiwagan YMCA” news posts will be shown. If placed on a non-camp page, only the headline will be displayed.
Examples
Carnation
Rose
Areas to Use
Content Area
Bottom Area
How to Use Latest News Posts
From the paragraphs dropdown, add the desired “Latest News Posts” paragraph type. Enter a header title for the section in the text field, and save.
Add an anchoring element to the bottom of a page, similar to a small banner. Best for promotional offers.
Example
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 a subheader below the title field, use the Subtitle field.
The Membership Calculator paragraph adds an interactive “membership wizard” to a YMCA Website Services site, allowing users to explore membership options and pricing.
The Membership Calculator paragraph can be added to these areas of a content page:
Content Area
Bottom Area
How to Use the Membership Calculator Paragraph
When editing a page, locate the paragraphs dropdown within the desired area (Content or Bottom).
Select Membership Calculator from the dropdown.
No additional configuration is typically needed on the page itself. The calculator pulls its data from configured
Membership Content Type items.
24 - News Posts Listing
Add a filterable section of news posts to a page.
Areas it Should Be Used
Content Area
Bottom Area
How to Use News Posts
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. This requires advanced knowledge of Drupal’s Views and Paragraphs modules.
It is generally not recommended to use the News Post Listing on Branch, Camp or Facility pages due to the availability of the Latest News Posts/(Camp)/(Branch) paragraph.
Add a small individual card to the sidebar of a page with evergreen promotional content, such as links to join pages.
Examples
The Promo Card comes in three default color variations: Carnation, Lily and Rose.
Carnation
Lily
Rose
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.
The Promo Card has the following fields:
Title: (Optional) A large title that appears at the top of the card. (Machine name: field_prgf_title)
Headline: (Required) A smaller headline that appears below the title. (Machine name: field_prgf_headline)
Description: (Optional) A WYSIWYG text editor field for entering content. Standard text editor options are available. (Machine name: field_prgf_description)
Display programs in a schedule view with an optional PDF export.
Sometimes called “Group Exercise” or “Group Schedules”, the Repeat Schedules block provides a similar view to Activity Finder, but focused more on recurring, often drop-in classes.
Add a bottom area element with two columns of reusable content for anchoring a page.
Warning: This element does not work properly in the Carnation theme and is considered deprecated. It may be removed in a future update.
Overview
The Secondary Description and Sidebar paragraph type provides a two-column layout in the bottom area of a page. It allows you to insert reusable content blocks into a left and right column.
Fields
Name
Machine Name
Required
Description
Left Column
field_prgf_left_column_block
No
Block reference to: Basic Block, Code Block, Date block or Simple Block. Create a new one or pick up an existed block. Content placed here typically serves as a secondary description for the page.
Right Column
field_prgf_right_column_block
No
Block reference to: Basic Block, Code Block, Date block or Simple Block. Create a new one or pick up an existed block. Content placed here typically serves as a sidebar with related information or calls to action.
Example
Carnation
Lily
Rose
Areas it Should Be Used
Bottom Area
How to Use Secondary Description and Sidebar
Insert the paragraph from the dropdown menu into the Bottom Area of your page.
You will see two fields: Left Column and Right Column.
Within each column, you can select from one of four different custom block types:
Basic Block
Code Block
Date Block
Simple Block
You can either add a new custom block or reuse an existing block.
Note: When reusing blocks in this paragraph type, the icon field may not render correctly. Font Awesome icons might display as plain text. If you need icons, consider using inline images.
28 - Simple Content
Add a section of basic text onto a page.
Areas It Should Be Used
Content Area
Sidebar Area
Bottom Area
How to Use Simple Content
The Simple Content paragraph allows you to add and format text using the WYSIWYG editor. This provides a flexible way to add basic content to your pages.
From the paragraphs dropdown within the desired area (Content, Sidebar, or Bottom), select Add Simple Content.
A text editor will appear. You can style your text using the editor’s toolbar. This toolbar typically includes options for:
A wide, short image with fields for a title, background color, description, and image.
Examples
Carnation
Desktop
Mobile
Lily
Desktop
Mobile
Rose
Desktop
Mobile
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.
Fill out the following fields:
Title (required): This field adds a headline to your banner. The placement of the title depends on your theme and customization, but it typically appears as large, all-caps text. The character limit for this field is 255.
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 add an image.
Description (optional): Displays beneath your Title. You can style your text using the text editor; however, it’s not as consistent as other places where you typically see the editor.
Image (optional, but recommended): 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. For best results, consult with your agency partner regarding recommended image sizes for your YMCA Website Services site.
Note: Image Upload does not work in Rose.
Note: Unlike
the Banner, Small Banners don’t have a specific Link field for buttons without customization.
To add a button to a small banner, use the
Text Editor button tool to create a button in your description field.
Add a simple card to the sidebar with a title, headline, and call to action.
The Story Card Paragraph works best with the Lily and Rose themes. It is available, but not themed with a border in Carnation.
Areas it Can Be Used
Sidebar Area
How to Use It
In the sidebar area of a content page, select Story Card.
Add a Title and Headline. The Title will be larger than the Headline and display above it.
Add your link in the Link field. 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. The link will not stand out like a typical call to action.
To work around this, add a > or another special character to indicate to users that they are clicking on a link.
Recommendations for use with Carnation
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
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:
Add a wide feature with an image, text, and a call to action.
Overview
The Teaser paragraph is a versatile component designed to highlight key content. It typically includes an image, a title, a brief description, and a call-to-action link. It can be used to promote specific programs, services, or events.
Examples
The appearance of the Teaser paragraph can vary depending on the theme:
Carnation
Lily
Rose
Areas It Should Be Used
Content area
How to Use the Teaser Paragraph
Insert the paragraph: From the content area, select “Add Teaser” from the paragraph dropdown menu.
Fill in the content fields:
Title: Enter the title of the teaser. This should be concise and engaging.
Image: Select an image from the
image library or upload a new one. Use high-quality images that are relevant to the content.
Description: Add a brief description using the
Text Editor. Keep the description concise and focused on the key benefits or information.
Link: Add an internal or external link. This is the call to action. Use a clear and direct call to action in the link text (e.g., “Learn More,” “Register Now,” “View Details”). The Link field supports adding attributes:
URL: The destination URL
Title: The link text for the button.
Target: Open in a new window.
Rel: “Nofollow” or “Sponsored”.
Class: Add custom classes if needed.
Save: Save the page to view your Teaser.
Best Practices
Use compelling imagery that is relevant to the content.
Write concise and engaging titles and descriptions.
Use a clear and direct call to action in the link text.
Ensure that the linked page provides more detailed information related to the teaser content.
33 - Webform
Add an existing Webform to 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 it onto a page. You can continue to revise and edit your form after embedding, but this process will NOT create a webform for you.
Once you’ve selected Webform from the paragraphs dropdown, select the name of the webform you want to embed onto your page.
Next, you will have the option to open, close, or schedule open/close dates for your webform.
The “Default submission pairs” field allows you to pre-populate certain fields in your webform with default values if users leave them blank. Unless you have advanced knowledge of YAML, it is not recommended to configure this field.
