Page Builder: Components

List of Page Components

Brief descriptions of each Page Component

More detailed descriptions below, including field names, pictures of the form, and pictures of how the component gets rendered out on the final, user-browseable Page.

• Accordion: renders a single accordion that has a title and content. This starts off closed when the page is first rendered.
• Body text: Provides a WYSIWYG (What You See Is What You Get) editor to make rich paragraph text.
• Call to Action: Renders a larger than normal paragraph text element accompanied by a Call to Action Button that can go to any link specified.
• Downloadable File: Creates a link to a downloadable file. Supported document types are .pdf, .doc, .docx.
• Heading 2: Renders a heading and a descriptive paragraph. The heading is rendered in H2 format, and the description is rendered in paragraph format.
• Heading 3: Renders a heading and a descriptive paragraph. The heading is rendered in H3 format, and the description is rendered in paragraph format. The alignment for the H3 element can be configured to left, right, or centered.
• Image: Renders an image.
• Practices: A multi-select widget that lists all Practices in the system to create a custom list of Practices to display in "marketplace card" format.
• Subpage Hyperlink: Renders a heading that is a link to an internal page in the Diffusion Marketplace, along with descriptive text. The heading is rendered in H2 format, and the description is rendered in paragraph format. When a user clicks on the heading, they will be taken to the page specified.
• YouTube Player: renders a YouTube Video Player on the page. Caption can go underneath explaining the video.
• Horizontal Separator: renders a gray line to "separate" content.

Accordion

Renders a single accordion that has a title and content. This starts off closed when the page is first rendered.

1. Title: the text that is rendered in the accordion button
2. Text: A WYSIWYG editor

Accordion Component Form

Accordion Rendered Version

Body text

Provides a WYSIWYG (What You See Is What You Get) editor to make rich paragraph text.

1. Text: as a WYSIWYG editor - choose from different options such as bolding, italicizing, or underlining text (tested), creating a link within the paragraph (tested), quotes (not tested), code blocks (not tested), subscript (not tested), superscript(not tested), text alignment (not tested), numbered lists (not tested), bulleted lists (not tested), text color (tested), highlighted text (tested)

Body text Component Form

Body text Rendered Version

Call to Action (CTA)

Renders a larger than normal paragraph text element accompanied by a Call to Action Button that can go to any link specified.

1. CTA Text: the larger than normal paragraph text above the CTA button
2. Button Text: Text that goes into the CTA button. The button is rendered as a primary button and always appears underneath the CTA Text
3. Action Link: Where the button should take the user, i.e. to fill out a Surveymonkey form.

CTA Component Form

CTA Rendered Version

Downloadable File

Creates a link to a downloadable file. Supported document types are **.pdf, .doc, .docx.

1. File: The file to be uploaded to store, and then downloaded by users. If the component is saved, the current file is shown.
2. Display Name: Text to show in place of the file name.
3. Description: A brief description about the file.

Downloadable File Component Form

Downloadable File Rendered Version

Heading 2

Renders a heading and a descriptive paragraph. The heading is rendered in H2 format, and the description is rendered in paragraph format.

1. Subtopic Title: The heading text. This renders out in H2 format.
2. Subtopic Description: a description of the section.

Heading 2 Component Form

Heading 2 Rendered Version

Heading 3

Renders a heading and a descriptive paragraph. The heading is rendered in H3 format, and the description is rendered in paragraph format. The alignment for the H3 element can be configured to left, right, or centered.

1. Title: The heading text. This renders out in H3 format.
2. Description: a description of the section.
3. Alignment: text alignment for the header: Left, Right, or Center.

Heading 3 Component Form

Heading 3 Rendered Version

Image

Renders an image.

1. Alignment: how the image should be aligned in its row: Left, Right, Center.
2. Image: The image file to be uploaded and displayed. Once it is uploaded and the Page is saved, and you return to edit the Page, a small thumbnail of the image will be shown.
3. Alternative Text: if the image cannot be found or the user is not allowing images on their browser, this text will be displayed instead.

Image Component Form

Image Rendered Version

Practices

A multi-select widget that lists all Practices in the system to create a custom list of Practices to display in "marketplace card" format.

1. Practice List: a multi-select field that lists all Practices in alphabetical order. Hold down the "CTRL" key to choose multiple Practices from the list.

Practices Component Form

Practices Rendered Version

Subpage Hyperlink

Renders a heading that is a link to an internal page in the Diffusion Marketplace, along with descriptive text. The heading is rendered in H2 format, and the description is rendered in paragraph format. When a user clicks on the heading, they will be taken to the page specified.

1. Subpage URL Suffix: the internal URL path of the Diffusion Marketplace page. The URL must exist within Diffusion Marketplace, else an error will be thrown.
2. Subpage Title: The heading text, also what the link will say.
3. Subpage Description: A description of the page the user will be taken to.

Subpage Hyperlink Component Form

Subpage Hyperlink Rendered Version

YouTube Player

Renders a YouTube Video Player on the page. Caption can go underneath explaining the video.

1. YouTube URL: a string of text that represents the full url of the YouTube video
2. Caption (Optional): a optional caption that describes the video. this is rendered underneath the video player.

YouTube Component Form

YouTube Rendered Version

Horizontal Separator

Renders a gray line to "separate" content.

There is nothing to configure for this component.

Horizontal Separator Component Form

Horizontal Separator Rendered Version