On Blocks
Some pages allow for more dynamic content using the Body Content field, which is broken into several different types of blocks. These blocks allow you to define different types of content and add them in any order you like.
Each block allows you to choose an optional Block Style and add an optional
Block Title. The Block Style controls what background color or gradient is
applied to the entire block. If left blank or Clear, it will default to a
white background. The Block Title will place text in an h3 heading
at the top of the block.
Single Column
The Single Column block places all of your content in a single wide column. Because the line-length can end up fairly long (which can be hard to read), I don’t recommend placing large amounts of text in the single column format. It can be useful for large single images or a short introductory paragraph.
Two Column
The two column block is great for longer bodies text or for placing text on one column and supporting content (images or additional context) on another. The leftmost column will appear first on mobile devices and the rightmost column will appear second. Both columns are required, though in some circumstances you could place an empty paragraph in one.
All of the “Column” (and the Quote) blocks offer a full range of colors for
the Block Style option. Styles that end in -fade will typically have a
light version of the color preceding the -fade (such as blue, purple, teal,
tan, or grey) fading down into white. They offer a nice subtle way of guiding the eye
downward into their content. The Slideshow block only offers
neutral background colors to give photos a better chance of standing out on their own.
And the Call to Action block offers only solid colors because it is
meant to draw the user’s attention to the action. The
Ocean Gradient style is visually intense and should be used sparingly -
when you really want to draw attention to something.
Three Column
There are some who might argue that three columns are better than two. I will not be that person.
Three columns makes sense when you are breaking a bunch of things up into smaller bite-sized chunks.
For instance, a listing of related programs, a set of small images or instructions, etc.
Four Column
There are even less reasons to use the Four Column block than the
Three Column one. But it’s there if you happen to need it.
Here’s a quick description of the last three block types so I can let
their content shine by itself.
Slideshow
The Slideshow is pretty self-explanatory. You can add a bunch of images, and they’ll play in sequence automatically. (There are also controls for going forward and backward.)
The example slideshow is showing all of the placeholder images for each section of the site, which would be displayed if no social image is assigned to an entry.
Quote
Use this to highlight a quote about content on the page. Maybe it’s a meaningful quote about education in general, or a reaction from a student about a specific program. You have a quote, and you can optionally provide an “author”.
If you include a Block Title, the quote will have borders on the top and bottom. Otherwise, it will simply be centered in the block.
Call to Action
The Call to Action block gives you a concrete block to call user’s attention to what you would like them to do. At a bare minimum, you need to give a short description along with a button (link + action text). You can optionally have an image, a second action, and maybe some icons.
Slideshow
Quote
Unless someone like you cares a whole awful lot, nothing is going to get better. It’s not.
Dr. Seuss
Call to Action with an image
The Call to Action block is primarily designed for content where you want your users to perform an action of some kind, whether that’s to register as a member, donate, or contact someone. You can have up to two actions, with corresponding buttons, and those buttons can have icons included. (You can find the names of the icons on the Style Guide page.) You will also need to write at least a short bit of copy. You can optionally include an image as well. (See the next section for what it would look like without an image.)
Call to Action without an image
When you don’t add an image, the Call to Action block is centered, which helps draw attention to it.
Style Guide
A brief guide to the basic visual styles for the site, including typography, colors, iconography, elements, and the grid.
Using the CMS
A quick introduction to editing the site using the Craft CMS, including how to post news and events and create new pages.
On Blocks
A step-by-step intro to block components and their various permutations, with annotated examples of each.