Markup Styles and Sidebar Options

Our new site offers us some opportunities to present content in ways we haven't before. It's cleaner, and styled in a way that all web parts, headers, and other elements look great together, regardless of combination. However, we'd like to show you how some of these elements look in action. So read one for some tips on formatting your content.

We'll start with an easy one: Here's how a block quote looks on our new site:

"This is a block quote. It is indented slightly, and will span the remaining length of the container. We don't imagine a need for very long pull quotes like this, but we're eager to see how you might use this on your pages."
-First Last, Title, Organization

You can also use the "Content Left" and "Content Right" sections, below, to create columns that are fully responsive, and simply stack on top of each other on mobile. This breaks content up nicely on full screens, but remains easily readable on mobile. Check it out here:

This is the Content Left container. On mobile, this container will stack above the Content Right container. You can use any of our markup styles here, buttons, or images. It behaves just as a typical content section does. You can even use some web parts here.

This is your Content Right container. On mobile, it will stack below Content Left. Just like the Content Left section, you can use this as you would any typical content section.

On the Subject of Fonts

Let's talk about font style and heading hierarchy. Above, under your browser's URL bar, you have your Styles ribbon. This includes styles for Paragraph, Headings 1 through 4, Alternate Headings 1 through 4, Arrow and Button Link styles, Block Quotes, and Bullets. You'll see examples of those throughout this page. When you highlight text, and hover over a style in the ribbon, the text will preview in that style for you. Click the style button, and the style is set.

If you want to see them all in action, check out the Font Styles section near the bottom of this page.

Heading hierarchy

Portrait images should have a max width of 250px.

When we're talking about heading hierarchy, we simply mean using heading styles in a specific order. Using them in the correct order is important for SEO and for consistency. The short explanation is, you start at Heading 1 and go up from there. The full explanation is a bit more complicated. Let's dive in.

On this page, the page title is formatted automatically in Heading 1 style. You should never use Heading 1 for anything else -- each page has only ONE Heading 1: the page title.

Next, your Section Titles are automatically formatted as Heading 2. Generally, you won't need to use Heading 2 anywhere else in the main body. You will use Heading 2 in the sidebar for all of your sidebar headings. Using H2 there will help readers differentiate between different sidebar sections.

If you notice that you need to break down content within your sections, you'll go to the next header style: Heading 3. The header for this subsection ("Heading Heirarchy") is styled with Heading 3. Should your Heading 3 section need to be broken down even more, you can use Heading 4.

Heading Alternates

Generally speaking, you won't need to use heading alternates. However, if you find you have a specific need the other headings won't satisfy, give the alternates a try! We also can't encourage you enough to please reach out to us. We are always happy to help you think through the correct formatting. In the meantime, here's one example of how heading alternates might be used:

Heading Alternate Example

Above, you'll see Heading 1 Alternate. I like to use heading alternates in these content left and right columns, but that isn't the only way you can use them.

Alternate Heading Hierarchy

I wanted to show you how you'd use hierarchy with the alternates. Since our alternates aren't used by default anywhere on the page, you'll start with Heading 1 Alternate and work your way down to Heading 4, as you need them for sections.

Heading 2 Alternate

Above is your heading 2 alternate. You can see it's slightly smaller than Heading 1, and the font color is dark blue, rather than black.

On the Subject of Sidebars

When it comes to sidebars, you have many options. However, there are a few rules we'd like you to follow when prioritzing your sidebar content. Please read the below and the approved examples in this page's sidebar.

Registration and other calls to action

If you're creating an event page, or a page about a specific program, prioritize a call to register at the top. You can see this as our first example in this page's sidebar. You might have other calls to action that should be prioritized. For example, a call to action to join or visit Engage, or sign up for a newsletter, should go at the top. If your page has a call to action, that should be your number one content in the sidebar.

Your call to action will always go in the Button Content section. When you put a link in this section and style it with Button Link style, the button will be green, our default color for a call to action. In any other section, the button will be blue.

Reports

Landscape images should have a max width of 400px.

For any pages or articles about reports, a link to download the report is your first priority. You can see this example in the second slot on the right sidebar. Notice the button to download is blue. We'd like that to be the color of these buttons, so be sure to skip the Button Content section, and use the Rail Content 1 section for this.

Don't worry, the Button Content section will fold up, and won't leave any annoying extra space on your page when left blank. Include the PDF notation.

House ads

Up next are house ads. If you don't have a call to action or report to place at the top, consider a house ad. You can see an example of our HENA house ad on the right, above "More on XX Topic." These are kept in the house ads folder in our image library. Every house ad must be linked appropriately—it cannot simply be a stand-alone picture. Other than HENA, we recommend house ads for Engage, Annual Meeting, or REHE. I'm sure we'll have more along the way.

On the Subject of Engage

When you can, tie Engage into your pages. This could be a linked mention in the page content, a promo in the sidebar, or a tile somewhere on the page.

As a sidebar promo

When you add a sidebar promo-ing Engage, please use the approved format and text seen in the sidebar of this page. Your header will always be an H2 saying "Find More on ACE Engage", followed by copy that includes the boilerplate copy shown at right. Depending on the situation, you might also choose to use an approved description Marketing has used in its emails.

If using a button linking to a specific piece of content, always use appropriate verbs (ie. "Watch the Webinar" or "Listen to the Audio"). The button link should open in a new tab. Please ensure the link you use came directly from WSO or someone on the Engage team (Engage URLs are tricky and if you just copy the URL you see in your browser, it may not work for other users).

As noted above, if the Engage content is at the top of your sidebar and you have a specific piece of content to point users to, calls to action such as these should go in your Button Content section, to generate a green button.

There is also standard boilerplate that should be included below each button or link, prompting new users to create an account. This text is styled with Paragraph, with the font size reduced to 9px using the text formatting options in the top ribbon. Please reach out to WSO if you need help styling the small text.

As a mention in main content

Please add links to Engage content within body text whenever relevant. As with sidebar Engage links, please confirm your links with someone before adding to the page.

Finally, when talking about Engage in News Room stories, add one of the following boilerplate messages to the end of your page:

Interactive discussion makes ACE Engage a dynamic learning platform. Engage users collaborate to shape conversations around higher education and address challenges collectively. Log in or create a complimentary account today.
ACE Engage, our peer-to-peer online learning platform, is home to a community of higher education leaders with a shared mission: to enhance student success and achieve institutional goals. ACE Engage is complimentary for a limited time. Log in or create a complimentary account today.
ACE built ACE Engage specifically for higher education leaders. The peer-to-peer online learning platform offers on-demand access to a curated content library, microcourses, peer groups, and more. ACE Engage is complimentary for a limited time. Log in or create a complimentary account today.
ACE Engage provides a confidential space for higher education leaders to connect, collectively address day-to-day challenges, share curated resources and practices, and shape conversations about the future of higher education. ACE Engage is complimentary for a limited time. Log in or create a complimentary account today.

Font Styles

These are your traditional Heading 1 through Heading 4 heading styles.

Heading 1 sample text

This is the Heading 1 ribbon style. It is equivalent to an H1. The page title field is automatically styled as a H1.

Heading 2 sample text

This is the Heading 2 ribbon style. It is equivalent to an H2. Section headers are automatically styled as H2s.

Heading 3 sample text

This is the Heading 3 ribbon style. It is equivalent to an H3. If you have any subsections within your major page sections, those sections headers would likely be styled with H3.

Heading 4 sample text

This is the Heading 4 ribbon style. It is equivalent to an H4. You would use an H4 header if you had any subsections within your H3 sections.

If you get confused about style hierarchy, reach out to WSO for help.

These are additional alternate styles. You'll rarely need to use these, but they are available for you to work with.

Heading 1 alternate sample text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mauris quis metus dapibus, ut aliquam dolor tristique.

Heading 2 alternate sample text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mauris quis metus dapibus, ut aliquam dolor tristique.

Heading 3 alternate sample text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mauris quis metus dapibus.

Heading 4 alternate sample text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mauris quis metus dapibus, ut aliquam dolor tristique.

NOTE: Please do not use any of the styles under the "Text Styles" header in the Styles dropdown. Those are out-of-the-box styles, and not styles approved by design and web.

Registration

March 14-16, 2020

Marriot Marquis San Diego Marina
San Diego, CA

Find More on ACE Engage

A recording of “Whither HEA Reauthorization” is now available on ACE Engage^®, ACE’s peer-to-peer learning platform. ACE Engage includes access to a curated content library, microcourses, exclusive events, and more.

Watch the Webinar
(If you are not currently an ACE Engage user, learn more about joining or create your account.)

In the News

This would be a link to a related story
New York Times

Another link would be helpful
Inside Higher Ed

Let's add one more for good measure
Chronicle of Higher Education

Download (XX MB PDF)

Maroon Notepad WP Title

This is how the maroon notepad looks on a page. Headings will default to white.

For example, this is an H3

Notepads are a nice way to break up your content if you need to, or draw attention to something unique.

White Notepad WP Title

This is how your white notepad will look on a page. You can see the background color within the border is just a shade lighter than the color of your page. Again, it's helpful as an option to break up content or bring in some extra attention to whatever is put here.