Example Page
This page is an example of all the recommended components to use the Heelium theme in conjunction with the School of Ed branding.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Standard Styles
For your basic text style, use the top row of the toolbar.
Images
To insert images, click the “Add Media” button immediately above the toolbar. To change the size, orientation, and/or caption for an image, click on the image and select the pencil edit icon and update the display settings.
To add a full-width image (like the one at the top of this page), after adding the media to the post, click on the image and select the pencil/edit icon. In display settings, select “center” under alignment and “full size” for media size. (When uploading your image, be sure to select one that is sufficiently wide enough in dimensions, approx. 1200-2,000 pixels, to display well.)
Lists
Unordered lists look something like this:
- Neque porro quisquam est,
- qui dolorem ipsum quia dolor sit amet,
- consectetur, adipisci velit.
And unordered lists like so:
- Quia non numquam
- eius modi tempora incidunt ut
- Labore et dolore magnam aliquam quaerat voluptatem.
Headers
To add a header to your text, click on the first drop-down in the toolbar and select a heading style. (To change your text back into normal text, highlight it and select Paragraph.)
H1
Don’t use this one. It’s a special heading reserved for the title of the page.
H2
Your primary heading style on the page
H3
For subheadings under an H2
H4
For subheadings under and H3
H5
For subheadings under an H4
H6
For subheading under an H5
Enabling the Full Toolbar
To follow all of the instructions in the rest of these instructions, be sure to enable the full toolbar in the editor:
Well Shortcode
Example
Heading for this box
Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue.
Instructions
To add, click the drop down arrow next to “EBS” > open “Content” > select “Well”:
Full Width Box
Use this to call out key information or at the top of a page as an introduction to the rest of the page.
Example
Header within the box
Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna.
Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.
Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Instructions
To add,
- Select the full-width component > background color in the shortcodes drop-down on the 1st row of the toolbar:
- Insert the following color in between the quotes for the “background color: #E4F0F9.
Accordions
Use these when you have long procedure content or several options for special cases that only apply to a subset of people using the page—e.g., special contact information for a particular audience.
Example
Instructions
To add, click the drop down arrow next to “EBS” > open “Interactive” > select “Accordion”:
Columns
Use for link collections or to lay out long lists of links.
Example
Instructions
To add, click the drop down arrow next to “EBS” > open “Columns” > select “Columns”:
Video
Use for videos. (Upload to YouTube first.)
Example
Instructions
- Before you begin, make sure your video is available on YouTube.
- Select the responsive youtube video option from the shortcodes dropdown found in the first row of the toolbar.
- Navigate to the video on Youtube. Click the Share button just below the video. Copy the last part of the URL. That is the ID number.
- Paste your video’s ID number in between the quotes in the shortcode. Your ID should look something like TbTpbh5irvA. Do not include the URL.
Recent Blog Posts
Example
Instructions
To add, select Recent Blog Posts > Recent Posts List from the shortcodes drop-down in the first row of the toolbar:
Recent Blog Posts Thumbnails
Example
Instructions
To add, select Recent Blog Posts > Recent Posts Thumbnails from the shortcodes drop-down in the first row of the toolbar:
Panels
Use these to call out key information, like a deadline or registration link.
Example
Panel: Simple (Gray)
Panel: Primary (Blue)
Panel: Success (Green)
Panel: Info (Blue)
Panel: Danger (Red)
Instructions
To add, click the drop down arrow next to “EBS” > open “Interactive” > select “Panel”:
(Please note: do not use the “warning” panel style; it has low color contrast.)
Table
Use only for comparative and/or tabular data— not layout. Tables can be difficult for those using screenreaders. Refer to the W3 tutorial for help in using tables.
Example
Student Type | Funding Type | Award | Eligibility | How to Apply & Deadlines |
---|---|---|---|---|
Undergraduate | Scholarship | Sam and Carole Roebuck Scholarship | Committed Education major wanting to teach or conduct educational research | Apply here. Deadline: March 2021 |
Master's | Research Assistantship | Carolina Covenant Program Research Assistant | Graduate student with experience in qualitative methodologies... | Send CV to Candice Powell at candice_powell@unc.edu by October 9, 2020 |
Doctoral | Research Assistantship | Part-time Research Analyst Position with the UNC School of Medicine | See Eligibility Requirements here. | Application due October 18, 2020 |