Pages and Posts
Cobalt is designed to provide an on-brand user experience, while allowing site owners to focus on creating engaging content. You can add content to your site through pages and/or posts. Take the following tips and examples into consideration while working on your site.
Page Title and Permalink
Use logical naming conventions for your page title. Users should be able to predict the kind of information they will find on a page before they click on a link.
By default, page permalinks are set to: https://example. syr.edu/?page_id=2. To make the page links more user (and search engine) friendly, navigate to Settings > Permalinks. Choose the permalink structure which works best with your content. Typically, the Post Name structure is preferred.
If you change the title of your page after publishing, the permalink will not update automatically. You must manually change the permalink to match your new page title by clicking Edit. Permalinks need to be lowercase and hyphens should be used instead of spaces, as necessary. If you have a long page title, the permalink will be created to match this title. Remove unnecessary words from a permalink to tighten up the URL.
You can add various forms of media to your page, including images, videos, PDFs, and more. Media should provide additional information on your page. Avoid adding media that automatically downloads when clicked on, unless specifically noted in the link text.
In accordance with Syracuse University’s accessibility standards , all images must have alternative text. Avoid using images with text overlays unless there is sufficient alternative text and high contrast between the image and the text.
There are preset images sizes in Cobalt. Your images do not need to meet the exact size requirements when you upload them. In the Media Library, you have the option to manually crop your images or WordPress will automatically resize and crop your images to match Cobalt’s requirements. This list outlines the image sizes that you will find on your site.
- Featured Navigation Card Thumbnail: 440 x 400px
- News & Headlines Thumbnail: 700 x 576px
- Header and Featured Images Banners: 3000 x 1120px
- Thumbnail: 220 x 220px
- Medium (Maximum width and height): 420 x 420px
- Large (Maximum width and height): 1140 x 855px
We recommend uploading videos to a service such as YouTube, Vimeo, or Ensemble and then embedding the videos on your page or linking to them.
According to the Nielsen Norman Group , “Forcing users to browse PDF files makes usability approximately 300% worse compared to HTML pages.” A PDF should only be added to your page if a user is likely to print it. Otherwise, convert the PDF’s content to text on a page so it can viewed without leaving your site. This ensures that screen readers will be able to access the content.
If you do include a PDF on your site, it should open in a new tab. Within the PDF link, you should include the following: [PDF, “file size”]. By doing so, users know exactly what type and how large of a file they are about to open. Do your best to only include accessible PDFs by ensuring they are properly tagged.
Using all caps, bold and/or italics is not an effective way to communicate key points throughout your page. You should utilize “headers” (available while using the visual editor) to organize content into distinct blocks with subheadings to further delineate the supplied information.
When writing headers and subheads, make sure they are unique and descriptive to the content they hold. Screen readers read out each header for navigation, so these headings should be in a logical order. Headers should be in the order of <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, and so on, to create a hierarchy of headline importance and help determine information structure.
Ensure that link text makes sense when read out of context. Be descriptive and avoid the use of “click here.” Call out special links, such as PDF links, in order to set user expectations. In addition, links to outside sources should open in the current tab, as opposed to a new tab. When possible, indicate that the user will be leaving the current site if they click on the link. We recommend using this icon: . To do so, place the following line of HTML at the end of the link text in the Text editor:
<span style="font: normal normal 12px/1 FontAwesome;"></span>
This panel allows you to Preview changes you make to your page before publishing. You can also see your page’s status, visibility, number of revisions, and publish date. After you create your page and publish it, the Publish button switches to Update.
Always remember to update your page in this panel after you’ve finished making changes, so the updates are reflected on your site. If you forget to update and you leave the page, your changes will be lost.
In this panel, you can select a Parent for the page you are currently editing. This means your current page will become a subpage of the parent, which creates a hierarchy of pages. Child pages (or subpages) appear as links in the sidebar menu of the parent page.
You can use Order to set the order of your pages in the sidebar menu, top navigation (if you’re not using a custom menu), and featured navigation. This feature overrides alphabetical order.
The Featured Nav panel allows you to set which pages will appear in the Header and/or Footer featured navigations. The Header nav is ideal for highlighting important pages that you don’t want users to miss. The Footer nav should display pages that may also be of interest to the user, but aren’t as important as those in the Header nav.
If you choose to add your current page to either navigation, check the respective box. You should then Set a Thumbnail Image, and a Subheading, which will appear on the featured navigation card. You can read more about Featured Navigations and how to use them in Additional Features.
This panel allows you to choose whether or not your page displays the sidebar menu. This feature is only relevant if your page is a parent or child. If the sidebar is enabled, a secondary menu will appear on the left side of your parent and child pages.
You can set a featured image for your page in this panel. The recommended size for featured images is 3000 x 1120 pixels. This image appears as a banner across the top of your page, like the main header image for your site. This is an optional feature. Not every page needs or should have a featured image, but we recommend being consistent with your usage.