You are viewing an old version of this page. View the current version.
Compare with Current
View Page History
« Previous
Version 15
Next »
Overview:
Header
Hero Image (Gray cells)
Row 1
Body Copy (Yellow cells)
Rows 9, 10
Panel (Salmon colored cells)
Rows 2–8
Body Copy (Yellow cells)
Rows 9, 10
Callout (Blue cells)
Rows 11–13
Table (Green cells)
Row 14
Footer
Terms:
| Term | Definition | Sitecore Icon |
|---|
| Component | Components are what you build content with.
It has the puzzle piece icon in the Sitecore Page Editor.
You can add new, delete, or move components on a page. |  |
| Users | Anyone using the website or interacting with it. | N/A |
Components Breakdown:
1 | Hero Image and TitleFor the Home Page only. - On the tablet and desktop version, the title position is adjustable to allow for more flexible image choices.
To edit the title position: - In the page editor, click on the Image.
- Click on the blue arrow to select the parent element (in this case, we want to select the Homepage Hero Image and Title component)
 - Once the component has been selected, click on the 'More' drop-down, and select 'Edit the Component Properties'
 - This dialog box will appear, where you can choose the vertical and horizontal positions from the drop-down menus, under 'Text Position'.
 - Click 'OK' and be sure to save the page to see your changes.
|
 |
2 | News / EventsThis panel highlights news, upcoming deadlines, or announcements that are date-specific or time-sensitive.
The purpose is to quickly communicate upcoming deadlines and important information for prospective students. There is no need to list out multiple dates, since that information is listed on the linked page.
Keep in mind this is one of the first things a mobile visitor sees. Currently used on the Home Page only. If a "Next Date" does not apply, leave the two text fields at the bottom blank. A single gray box should appear at the bottom (as in the example image to the right) to maintain design consistency. |  |
3 | Infographic Panel*
For number-related content, highlighting statistics significant to SPU. Infographics provide a visual means of communicating data.
A minimum of three infographics are necessary. *UC maintains these as statistics are updated with each issue of etc. |  |
4 | Lightbox Panel*
Also known as an image gallery. *UC maintains these. |  |
5 | From This Place Panel*
Different story features should tie in to page content (with the exception of the home page). - Left / Right option available. Take into account other components on the page before choosing either left or right options in order to achieve balance.
- Color option available. Take into account the colors of other components on the page so that one color isn't heavily repeated.
For example, use the thumbnail to the right if a component above (or below) features text on the left side. *UC maintains these. |  |
6 | etc Features*
Updated with each new issue of etc.
Eight of these components are sprinkled throughout the UGA site, to correspond with the eight departments of the magazine. *UC maintains these. |  |
7 | Page Feature
Featured on Home and Secondary Landing Pages. Used to feature a sub-page or video content. Left / Right option available. Take into account other components on the page before choosing either left or right options in order to achieve balance. |  |
8 | Quote Panel |   |
9 | Intro Paragraph
Introduce the content on a page with an introductory paragraph that highlights what the page is about and useful information that stems from this page. The text is slightly larger than the body copy text because it functions as a visual lead-in to the main content. There are two parts to an Intro Paragraph component: Subtitle field - Catchy phrase on the main landing pages, and the Page Title on lower-level pages (such as Discover Seattle) Intro field - The bulk of the intro paragraph. |  |
10 | Body ContentTitle field - Used for content headings, marks different sections of content, and allows content to be easily scannable by the reader. Body Copy field - where paragraphs of text live. Open the text editor to style text in a Microsoft Word-like interface. - Bolded text is usually used at the beginning of a bulleted list to summarize main points, which aids in scannability
- Hyperlinks can be added to text, they will appear as bolded and red automatically.
|  |
11 | Callout with Image
Highlight related, secondary content within sections of body copy by using a Callout. These are a great way to feature content without disrupting the flow of the page (as with Page Feature panels). Basic structure:
Title field - Use for a heading Body Copy field - Ideal for one paragraph of text. Action link - Placed at the bottom to call users to action. (ex.  )
Left / Right options available for image placement. Take into account other components on the page before choosing either left or right options in order to achieve balance. |   |
12 | Standard CalloutHighlights related, secondary content within sections of body copy. These are a great way to feature content without disrupting the flow of the page (as with Page Feature panels). Title field - Use for a heading Body Copy field - Informational sentence or two. |   |
13 | A direct call to action. Intended for users to apply to SPU, apply for a scholarship, or register for an event. |  |
14 | TableDisplay detailed schedule and scholarship information in a table for an optimized, easy-to-read experience that breaks up information appropriately. Handy for long lists with more detailed information where a simple bulleted list doesn't suffice. Basic structure: Left column - Money amount, day, time, etc. Title - Name of Scholarship / Event Body paragraph - description, useful information, links Think of this as a two-column table. If more than two columns are needed, consider adding it as another paragraph beneath the body paragraph section. Remember that it all scales down to one column on mobile devices. |  |