How-to Guides
Module Guides
Video Guides
WYSIWYG
Lorem ipsum dolor sit amet.
Nam aliquam sem et tortor consequat id. Mauris sit amet massa vitae tortor condimentum. Convallis aenean et tortor at risus viverra. Turpis egestas maecenas pharetra convallis posuere morbi leo urna. Mi eget mauris pharetra et ultrices neque.
Guidelines
Usage
- WYSIWYG stands for “What You See Is What You Get.” This means that however you style the copy in the editor box is exactly how it will appear on the page.
- Use the buttons at the top of the editor to style your copy, insert links, etc.
- Find much more info on the WYSIWYG editor in this guide.
Character Limits
- Eyebrow: 45
- Heading: 65
- Body Copy: Variable
Best Practices
- Don’t change the default text styles unless you have a good reason.
- Images don’t look great in this module. If you need images, consider using a module that’s made to use them, like the 50/50, CTA Banner, or Gallery. If you need to use images here, don’t paste them inline. Add them using the Insert from Media Library button.
- Copying and pasting text from Microsoft Word or elsewhere can cause formatting errors. If you have to copy and paste, highlight it and use the Remove Formatting button to clean it up.
- In the Settings tab, you can choose Narrow Style for a more compact look if you don’t have a lot of copy. You can also select Show Paw Prints for some background color and visual interest if you feel that your page is too blank and white.
Accordions
kicker text goes here
Rhoncus dolor purus non enim.
Tellus cras adipiscing enim eu. Dui vivamus arcu felis bibendum ut. Facilisis leo vel fringilla est ullamcorper eget nulla. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Nunc sed blandit libero volutpat sed cras ornare arcu dui.
Tellus cras adipiscing enim eu. Dui vivamus arcu felis bibendum ut. Facilisis leo vel fringilla est ullamcorper eget nulla. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Nunc sed blandit libero volutpat sed cras ornare arcu dui.
Tellus cras adipiscing enim eu. Dui vivamus arcu felis bibendum ut. Facilisis leo vel fringilla est ullamcorper eget nulla. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Nunc sed blandit libero volutpat sed cras ornare arcu dui.
Tellus cras adipiscing enim eu. Dui vivamus arcu felis bibendum ut. Facilisis leo vel fringilla est ullamcorper eget nulla. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Nunc sed blandit libero volutpat sed cras ornare arcu dui.
Guidelines
Usage
- Fill out the Intro Copy WYSIWYG block with copy that introduces this set of accordions.
- Click Add Accordion to add another accordion. Fill out the Title and Copy fields. The copy is a WYSIWYG block, so it has lots of flexibility.
- You can also remove or duplicate an accordion by clicking the three dots next to Edit.
Character Limits
- Accordion Title: 45
- Accordion Body: Variable
Best Practices
- Accordions should be used to hide blocks of information that are long and unwieldy until the user clicks on them. This unclutters the page, and allows the user to find relevant information faster.
- In the Settings tab, you can change the default one-column layout to two columns if you have many accordions with relatively short titles.
- Through the Style drop-down menu, you can change the background to gray if your section is adjacent to other white sections and you want to separate it visually.
50/50
Suspendisse euismod maximus
Vivamus ut elit feugiat
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod maximus felis.
Guidelines
Usage
- When a 50/50 is added to your page, the first thing you must do is choose a block for each side. Your options are 50/50 - Copy, 50/50 - Image, 50/50 - Images, or 50/50 - Student Quote. Whichever you add first will be on the left side. Second will be the right side.
- 50/50 Copy is a WYSIWYG block with slots for CTA buttons beneath it.
- 50/50 Image is a single image.
- 50/50 Images is two images, the second smaller and layered over the corner of the first.
- 50/50 Student Quote prompts you to search for a student in the system. It adds their headshot and the quote associated with them.
Character Limits
- Eyebrow: 30
- Heading: 65
- Body: 500
Best Practices
- The most common pairing of blocks is 50/50 - Copy on the left and 50/50 - Image on the right. The reverse order is fine as well. And replacing the image block with the images block is a great idea if you have enough images to use.
- If using the images block, the images must always go on the right side.
- When labeling CTA buttons, be as concise as possible.
- After selecting an image, you can adjust its crop through Image Crop. The default, Landscape, is the widest and works well in most cases. Square and Portrait Wide are also very versatile. Portrait is not right in most cases, but can be great if you choose an image with vertically-aligned content.
- If your copy is very long, you can check the Make Copy Wider box, or you can set the adjacent image to the Portrait crop to balance out the module.
- With the images block, be careful that the second image doesn’t cut off important parts of the first image, like someone’s face. Adjust the crops. Making the first image Portrait and the second Landscape makes the second cover the least amount of the first. See what looks best in each individual case.
- In the Settings tab of the overall 50/50 module, you can change the background color to black or gray. This allows for contrast with adjacent white bands.
- There are options in the Settings tab for Left Alignment and Right Alignment. The most common reason to change these is to set both to Top. But in most cases, the default Middle alignment is best.
50/50 Collage
SUSPENDISSE EUISMOD MAXIMUS
Vivamus ut elit feugiat.
Duis aute irure dolor in lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod maximus felis.
50
Students
5
Teachers
incididunt ut labore et
Rhoncus dolor purus non enim.
Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
50
Students
5
Teachers
Guidelines
Usage
- You’ll be given two WYSIWYG blocks, the first to display in the top left of the module, the second in the bottom right.
- You must add three images. They will display, overlapping each other, in a line from top right to bottom left.
- You can optionally add up to two stats, each with a title, to appear below the bottom image.
Character Limits
- Eyebrow: 30
- Heading: 45
- Body Copy: 280
- Stat: 6
- Stat Title: 30
Best Practices
- The two opposite blocks of copy don’t necessarily have to be closely related. If they both make sense on the same page, chances are they both make sense in the same collage.
- The center image is very narrow, and must be chosen accordingly. As with all modules with overlapping images, choose images carefully, and adjust if necessary. Always check to make sure the overlap doesn’t cut off peoples faces.
- The bottom copy can get very long and create a lot of white space beneath the module. If the spacing is too much, it’s always an option to add two Stats to the module, which will fill up that space nicely.
Callout
Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper neque vitae nulla gravida rhoncus ut vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper neque vitae nulla gravida rhoncus ut vel nisi.
Guidelines
Usage
- Fill in the Title field, then add either Callout Copy, which gives you a WYSIWYG block, or CTA List, which gives you a list of links to fill out, but no body copy.
Character Limits
- Callout Title: 35
- Callout Body: 300 (without extra CTA)
- CTA List Link: 35
Best Practices
- The callout should be used for a small amount of content. If you’re going over the character limits, you should pick another module.
- Even if you choose the Callout Copy block, you can still add a CTA button inside the WYSIWYG. You shouldn’t add more than one, but some short copy and a single CTA is often the best way to use this module.