Skip to main content

Class of 2026: Banfield covers your final year tuition! Click to Learn More!

Search jobs

CMS Guide

General WYSIWYG (What You See Is What You Get) advice

wysiwyg

The WYSIWYG editor

  • The WYSIWYG is the text editor you see in custom html modules
  • The WYSIWYG can be finicky. It is easiest to replace placeholder text by adding the new text THEN delete placeholder text. Alternatively, you can delete placeholder text except for one letter, add the new text, and then delete the remaining placeholder letter.
  • The "Insert/edit link" button is used to create and modify links. To modify an existing link (for example, the arrow buttons), click into the middle of the text of a link in the WYSIWYG and then click on "Insert/edit link".
  • The "asset picker" button allows you to add images into the wysiwyg. To modify an existing asset, click the asset and then select the "asset picker" button. Not all custom HTML modules were made with the intent to have an image placed in them.
  • The "code snippets" button adds pre made snippets of code into the wysiwyg. Most code snippets in the editor are to reset each module to default.
  • The Style Management Dropdown can be used to edit the presentation of content.

Style Dropdown Examples (any combination of these styles can be obtained using the style dropdown):

default paragraph example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

paragraph example with link:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Heading 1 (default)

Heading 2 (default)

Heading 3 (default)

Begin style dropdown examples:

font - poppins

font - slab

font weight - bold

font weight - medium-bold

font weight - medium

text color - black

text color - grey

text color - orange

text color - red

italic

underline

button 1

button 2

unordered list:

  • unordered list 1
  • unordered list 2
  • unordered list 3

ordered list:

  1. ordered list 1
  2. ordered list 2
  3. ordered list 3
"(this is a blockquote) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."

Section Title: Basic Text Section - White background

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Basic Text Section - White Background

Sed orci eros, cursus eget porttitor id, mollis vitae mauris. Maecenas a volutpat augue, vel imperdiet felis.

Section Title: Introduction Header

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Introduction Header - Copy

Morbi vitae venenatis turpis, ut varius nunc. Proin sed efficitur libero. Curabitur eget velit sem. Donec mollis convallis mauris. Non egestas. Phasellus ut odio id ipsum pretium imperdiet quis nec nulla. Duis finibus nisi vel orci facilisis, auctor cursus turpis blandit. Nam dictum elementum purus.

Section Title: Introduction Header with welcome family here

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Introduction Header - Copy

  • Introduction Header with welcome family here - b marks

Morbi vitae venenatis turpis, ut varius nunc. Proin sed efficitur libero. Curabitur eget velit sem. Donec mollis convallis mauris. Non egestas. Phasellus ut odio id ipsum pretium imperdiet quis nec nulla. Duis finibus nisi vel orci facilisis, auctor cursus turpis blandit. Nam dictum elementum purus.

bwelcome bfamily bhere

Section Title: Centered Wide Text - Clear Background

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Centered Wide Text - Clear Background - heading

This is a p, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non sapien mollis, sagittis nunc in, pulvinar massa. E pharetra. Nulla vestibulum arcu quis lacus laoreet posuere. Cras accumsan enim quam, non cursus lectus commodo ut. Nullam quis turpis non ex finibus gravida. Maece

Section Title: Centered wide text - grey background

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Centered wide text - grey background - Copy

Lorem ipsum dolor sit amet

Consectetur adipiscing elit. Vivamus interdum mauris ac rhoncus interdum. Sed nisl mi, mattis et tempor vitae, dignissim eu massa. Morbi eleifend pharetra auctor. Nunc sed efficitur erat, pulvinar ullamcorper odio.

Section Title: Narrow text on grey bg

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Narrow text on grey bg - Copy

Sed orci eros, cursus eget porttitor id, mollis vitae mauris. Maecenas a volutpat augue, vel imperdiet felis.

Section Title: Featured text one column

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Featured text one column-Featured centered text - Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum mauris ac rhoncus interdum.

Sed nisl mi, mattis et tempor vitae, dignissim eu massa. Morbi eleifend pharetra auctor. Nunc sed efficitur erat, pulvinar ullamcorper odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

  • Suspendisse in ex vulputate, tincidunt nulla id, feugiat tortor. Donec accumsan porttitor est et pulvinar. Donec aliquam ullamcorper hendrerit.
  • Donec ac iaculis dolor. Duis et risus ut dolor fermentum lobortis sit amet ac odio. Donec a odio nec est sollicitudin faucibus a sit amet massa.

Section Title: 2 columns of text lists

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • 2 columns of text lists - Copy

Lorem ipsum dolor sit amet

Consectetur adipiscing elit. Vivamus interdum mauris ac rhoncus interdum. Sed nisl mi, mattis et tempor vitae, dignissim eu massa. Morbi eleifend pharetra auctor.

Nunc sed efficitur erat, pulvinar ullamcorper odio

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse in ex vulputate, tincidunt nulla id, feugiat tortor. Donec accumsan porttitor est et pulvinar. Donec aliquam ullamcorper hendrerit.

Donec ac iaculis dolor. Duis et risus ut dolor fermentum lobortis sit amet ac odio.

Donec a odio nec est sollicitudin faucibus a sit amet massa. Cras tristique nunc id magna mattis condimentum. Integer mattis congue nisl a pretium. Mauris in metus eleifend, porttitor leo vitae, suscipit lectus. Vivamus ullamcorper interdum venenatis.

Cras ultrices orci eget suscipit lacinia.

Duis eu rutrum augue, a elementum est. Curabitur diam neque, elementum ut felis sit amet, viverra blandit lectus. Donec et nisl ac justo luctus porta. Quisque non tincidunt felis.

Fusce tristique, lacus in mattis viverra, dolor mi ultrices arcu

Finibus dictum felis ante id metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut semper auctor libero et vulputate.

Integer et libero consectetur

Sollicitudin turpis vel, varius urna. Suspendisse ultrices lacinia nisl non egestas. Phasellus ut odio id ipsum pretium imperdiet quis nec nulla.

Section Title: 3 Columns of Text

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • 3 Columns of Text - Copy

  • Morbi vitae venenatis turpis

    Ut varius nunc. Proin sed efficitur libero. Curabitur eget velit sem. Donec mollis convallis mauris. In eu ex nec augue scelerisque tempus at ac arcu. Vivamus nunc augue, aliquet sed velit ac, accumsan egestas ipsum. 

  • Maecenas eu auctor nisi

    Nullam semper dignissim turpis, aliquet posuere dolor congue ut. Cras maximus nibh nulla, ac lobortis elit cursus eget. Vivamus bibendum mauris id ipsum semper, sed semper lacus accumsan.

  • Curabitur hendrerit sit amet

    Urna eu bibendum. Quisque ut libero sollicitudin, bibendum nibh vel, volutpat justo. Aliquam faucibus elit nibh, eu viverra velit venenatis non. Curabitur condimentum molestie nunc, quis venenatis arcu semper vel.

Section Title: 5 Columns of Text

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • 5 Columns of Text - Copy

Section Title: Trio of Icons Under Intro Text

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Trio of Icons Under Intro Text - Copy

Use the 'Excerpt', 'Link Text', and 'Thumbnail Image' fields to modify Callout Action Link modules.

Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Aenean non sapien mollis, sagittis nunc in, pulvinar massa. In tincidunt in dolor vitae pharetra. Nulla vestibulum arcu quis lacus laoreet posuere. Cras accumsan enim quam, non cursus lectus commodo ut. Nullam quis turpis non ex finibus gravida. Maecenas efficitur porttitor malesuada. Praesent imperdiet vel ligula et gravida.

Section Title: Pull Quote

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Pull Quote - Copy New

Place Quote content here

Place quotation source here

Section Title: Centered media on grey bg

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • N/A

Intended for videos, but will work with images

Section Title: Featured text and media - media on right

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Featured Text and Media - Copy 1

Section Title: Featured text and media - media on left

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Featured Text and Media - Copy 1

Intended for videos, but will work with images

Section Title: Featured Text and media - Image-link on right

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Featured Text and Media - Copy 1

Section Title: Featured text and image link on right, grey bg

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Featured Text and Media - Copy 1

Section Title: Featured Text and media - Image-link on left

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Featured Text and Media - Copy 1

Section Title: Featured text and image link on left, grey bg

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Featured Text and Media - Copy 1

Section Title: Featured text and media - grey bg, ICON on right

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Featured Text and Media - Copy 2

Section Title: Featured text and media - white bg, ICON on left

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Featured Text and Media - Copy 2

Section Title: Social Panels

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Social Panels - Copy

Square image dimensions are suggested

bsocial

Section Title: Featured Job List

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • N/A

Section Title: Job List Tabs

CMS enabled: False

Add New / Use Existing: Use Existing

Associated Code Snippet:

  • N/A

No recently viewed jobs

No saved jobs

Section Title: Recently Viewed Jobs - Alone

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Recently Viewed Jobs - Alone - Copy

Recently Viewed Jobs

No recently viewed jobs

Section Title: Main Content Feed AKA Dynamic Related Content - Full Width Section

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • N/A

Presents content based on user behavior.

Section Title: Content Page Display - Formerly Related Content

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • N/A

Section Title: Related Content -- Dynamic

CMS enabled: False

Add New / Use Existing: Use Existing

Associated Code Snippet:

  • N/A

Displays related content (a maximum of 3 items) from the 'RC - Main' channel. If the page this section is placed on has any job data mappings, only content which matches those mappings will be displayed. Thumbnail image size = 700x394.

Section Title: Related Content -- Static

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • N/A

Displays related content. Use this section when you want to manually choose which related content items to display. Thumbnail image size = 700x394.

Section Title: Icons List - Benefits

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • N/A

Section Title: Events List

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Event Item - Heading

  • Event Item - CMS

Lorem ipsum dolor sit amet

Month XX

Event Title, i.e. Lorem Ipsum Dolor

Subheading, Lorem Ipsum

PDF Link

Month XX

Event Title, i.e. Lorem Ipsum Dolor

Subheading, Lorem Ipsum

PDF Link

Month XX

Event Title, i.e. Lorem Ipsum Dolor

Subheading, Lorem Ipsum

PDF Link

Section Title: Featured text and media - media on right - v2

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Featured text and media - media on right - v2 - Copy

Section Title: Featured text and icon - white bg v2

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Featured Text and Icon v2 - Copy

Section Title: Featured left icon then right text - white bg v2

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Featured Text and Icon v2 - Copy

Section Title: Featured text and icon - white bg v2 - xl icon

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Featured Text and Icon v2 - Copy

Section Title: Basic Centered Text - White background v2

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Basic Centered Text v2 - Copy 1

Lorem ipsum dolor sit amet

Consectetur adipiscing elit. Vivamus interdum mauris ac rhoncus interdum. Sed nisl mi, mattis et tempor vitae, dignissim eu massa. Morbi eleifend pharetra auctor. Nunc sed efficitur erat, pulvinar ullamcorper odio.

Section Title: Basic Centered Text - White background v2 - Second on page

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Basic Centered Text v2 - Copy 2

Lorem ipsum dolor sit amet

Consectetur adipiscing elit. Vivamus interdum mauris ac rhoncus interdum. Sed nisl mi, mattis et tempor vitae, dignissim eu massa. Morbi eleifend pharetra auctor. Nunc sed efficitur erat, pulvinar ullamcorper odio.

Section Title: Grey bg basic text

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Grey bg basic text - Copy

Lorem ipsum dolor sit amet

Consectetur adipiscing elit. Vivamus interdum mauris ac rhoncus interdum. Sed nisl mi, mattis et tempor vitae, dignissim eu massa. Morbi eleifend pharetra auctor. Nunc sed efficitur erat, pulvinar ullamcorper odio.

Section Title: Generic Section

CMS enabled: True

Add New / Use Existing: Add New

Associated Code Snippet:

  • Generic Demo Snippet

This section is meant to display content exactly how it is shown in the wysiwyg.

Style Dropdown Examples (any combination of these styles can be obtained using the style dropdown):

default paragraph example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

paragraph example with link:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Heading 1 (default)

Heading 2 (default)

Heading 3 (default)

Begin style dropdown examples:

font - poppins

font - slab

font weight - bold

font weight - medium-bold

font weight - medium

text color - black

text color - grey

text color - orange

text color - red

italic

underline

button 1

button 2

unordered list:

  • unordered list 1
  • unordered list 2
  • unordered list 3

ordered list:

  1. ordered list 1
  2. ordered list 2
  3. ordered list 3
"(this is a blockquote) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."