Organization is key when updating and modifying content. Content type and configuration plays a big role in keeping your website functioning and easy to navigate. When publishing content, you can add text, images, forms, etc. into both posts and pages.

Generally, 80-90% of new content will be posts, which includes timely content (events, news, blogs). Updates to content (stats, mission statements, initiatives, ) are often in pages.

Key differences between posts vs pages

• Posts are timely. Pages are timeless.
• Posts are organized using categories. Pages are hierarchical and organized in parent/child relationships.
• Posts include a date and organized into an archive. Pages don’t.

---

Learn about pages

Learn about posts

For consistency, this website utilizes different templates when adding content to new pages.

01

Getting Started (Using Templates):

When you create a new page the option to use templates isn’t apparent. Follow the instructions below to access and apply saved templates.

1. Click thePage Builder tab located on the right side of your visual editing area.
2. Select the button Pre-built Layouts, or the layout button.
3. Select Clone Pages. From here you can sift through all the pages on the website. Clicking any of them will make a copy of that page content and all. Template Pages can be found in there. If you type in Template in the search bar it quickly showcases only the Template files.
4. Apply the template

 

02

Set up Page Attribute:

Page Attributes default to Default Template, however some pages require you to adjust the page attribute template in order to view properly.
This includes: General Pages or pages with with Full-width rows.

• Find the Page Attributes Menu (located on right on full screen)
• Check to see if your template requires you to update your page attribute template (see above)
• If Yes, select Blank in the Template section on the menu (This will allow full-width rows to function correctly).
• Select Parent of page (Pages are hierarchical in nature and each new page will often fall as a child of an already created parent)
• Update/Publish! (changes will not appear until saved, this includes Previewing Page beforehand)

Page Templates

General Page Template

Template Add-ons *

 

Post Templates

Database Inventory Post Template

 

---

*Template Add-ons can be duplicated to posts, but is found on the page tab when cloning layouts

Do not edit template directly for new pages. Instead, follow the process above, in Creating New Pages / Using Templates.

Accessibility

As you begin your updates, please remember All University websites are required to be compliant with the Americans with Disabilities Act and are encouraged to adhere to Section 508 of the Rehabilitation Act of 1973 (specifically Subpart B, 1194.22 Web-based intranet and internet information and applications). While Aurora’s central themes are tested and kept accessible by ITS web developers, individual webmasters are responsible for keeping the content of their pages and sites accessible as well.

Keep in mind:

Images should have alt text

(good alt tags are generally: name of person for profile shots, findings for a graph, or description of scene for photos and illustrations)
Good alternative text provides the information conveyed in the image, including all text seen in the image and relevant details

Avoid uninformative hyperlinks, like “click here for…”

(Instead hyperlink text that describes the destination and can easily be scanned visually, or understood by screen readers.)
In addition to being more accessible, it will help with your Google search rankings. For example, “For more information about our admissions process click here” could be better as “More information about our admissions process”.

No Table Layouts

Layouts of rows and columns should be done with using the builder, not HTML Tables. Besides being inaccessible, HTML tables will also break your pages in mobile views! Tables should only be used when the content is tabular data.

---

Additionally, UITS provides Accessibility Tips which contains resources for creating accessible pages.
Visit UConn’s IT Accessibility website for more information.

Design, Typography, and Style

Below are examples of site typography, buttons, and adv CSS styles

Header 1

---

Header 2

---

Header 3

---

Header 4

---

Header 5

---

Header 6

Paragraph Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

---

Hyperlink

---

Caption text for photo credits
This caption uses the class caption to activate

---

Text Button
class="btn"

---

Primary Button
class="btn btn-primary"

---

Secondary Button
class="btn btn-default"

---

Tertiary Button
class="btn btn-success"

---

Large Primary Button
class="btn btn-primary btn-lg"

Large Text Button
class="btn btn-lg"

---

Full-Width Block-level Button

class="btn btn-primary btn-block"

---

Do not use <button>. Creates an unstyled button

CSS styles used to modify content

Mods largely added by updating in Widget Styles or Row Styles menu, expanding the Attributes panel, then adding the appropriate class in the Widget Class section.

Or inline with the content via class=”” in the HTML. Adding classes inline requires some HTML/CSS knowledge.

---

Row/Widget CSS Classes

hide – hides widget or row
well – Adds a light grey background and padding around widget or row
border-teal, border-red, and border-green – Adds a border along all sides in the corresponding color

---

Utility Classes

Font Type:
sans – San-serif font – This is an example with sans-serif letters
serif – Serif font – This is an example with serifs

Size
lead – Lead Text (lettering enlarged for emphasis and normal on mobile screens. Often text that leads into body copy) – This is an example of Lead Text
caption – small caption / credit text – This is an example of Caption Text

Font Color:
text-teal – Example
text-green – Example
text-red – Example