1.8 Basic Components
The components are the building blocks of pages within CQ. This section reviews the categories of components and the most commonly used components in each.
Categories Overview
The components are separated into categories that you access via the sidekick. The sidekick presents them in an accordion interface, typically starting with "General." Click on the name of another category or the plus next to its name to view components in other categories.
General
The majority of the components you will use in creating content are located in the General section. This includes Text, Heading, Image, Float and Section (see below).
Academics
Administrators only: These components populate and control certain academic functionality, including the degree programs. You have the ability to add these components to any page, but it is strongly recommended that you do not use these as there could be unexpected consequences.
Lists
This section contains the components that function off of CQ's list capabilities. These components are more advanced than the General components and function in a similar fashion to each other. These include List Pages, List Events, List Entries and Contact Info.
Other
Administrators only: These are components that administrators use to create special lists and populate certain datasets throughout the site.
Quick-Use Reference
Text
Creating Links
When linking to other pages on the ODU website (within CQ), it is important that you use CQ's finder tool. Never copy and paste a full URL into a link field. CQ automatically tracks where a page is located in the system. If the page moves, CQ will automatically update all links to it within the system. If the page is deleted, CQ will automatically deactivate all links to it.
This only works when you use the finder tool. If you paste in a full URL, CQ will not be able to automatically update your link.
| Correct Link | /about/visitors/campus-map |
|---|---|
| Incorrect Link | http://www.odu.edu/about/visitors/campus-map.html |
Linking to External Resources
When linking to an external resource, you must:
- Notify University Web Communications that you are placing a link to an external resource on the page
- Use the full URL in the link dialog (example: http://www.google.com)
If you are linking to an external resource to which other web managers may wish to link, it should be established as a shortcut within CQ and then you link to that shortcut. Should the external resource's link change, it only needs to be changed on the shortcut and all other links will automatically update.
The text component allows you to place text on the page.
After placing the component on the page, right-click it and choose edit. You will get the Text dialog. Enter your text and click OK.
You can paste in text from another website or from a word processor like Microsoft Word. If pasting in from Word, use the third icon in the toolbar. This will remove much of the unused formatting that comes with content copied from Word.
Creating bold or italicized text
To create bold or italicized text in CQ, you must first create your text. After you have created your text, select the word or words you wish to emphasize and then click the Bold or Italics button in the toolbar. You can also use Ctrl-B for bold or Ctrl-I for italics. You cannot underline text as underlined text is reserved for links.
Creating links within text
Help make your content relevant and engaging by including contextual links. You can accomplish this by turning a word or words into a link to related material.
Example:
After you receive your freshman packet, log in to Leo Online. (The words "freshman packet" would link to information about what is included in the packet - the link here leads nowhere)
Much like bold and italics, links must be created after you've typed your text. Type your text, then select the word or words you wish to hyperlink. Then click the link button in the toolbar (sixth button from the left - a globe with a chain in front of it).
You can use the main finder (left side of your screen) to find the page you wish to link or you can click the magnifying glass which will open a drilldown version of the finder. If you use the main finder, simply drag your page from the finder to the link field. If you use the drilldown finder, drill down to the desired page, click on the page and click OK. Click OK to create the link.
You should never use the "Open in new window" checkbox. The ODU web standard advises against hijacking the user experience. It is disruptive to the user and can create undesired consequences for users on mobile devices.
Please read the information at the right about creating links. Failure to properly create links will inhibit one of the primary benefits of using a content management system.
Heading
The Heading component allows you to insert a heading onto the page. Well-constructed pages make liberal use of headings so that users can easily scan the page and find the content they seek.
After placing the component on the page, right-click it and choose Edit. Place your heading text in the Heading field. Select the type of heading from the Type dropdown. Be certain to follow the web style guidelines for your heading text and type. If you would like your heading text to link to somewhere, enter that link in the Link URL field. Remember to use the finder to link pages within CQ. Click OK to create your heading.
Float
The Float component allows you to draw out or highlight content with minimal white/wasted space. Many of the standard layouts in the ODU website utilize the float component. All components, with certain exceptions, placed below the Float component will move up and wrap around the floated dropzone. The Float component defaults to the most frequently used setting of a grid-5 float.
After placing the component on the page, you will need to add content to the newly created floated dropzone. Simply drag your components into the dropzone. Typically, floated content is contained in a Section component unless it is an Image or Gallery.
To quick preview how your page will look with the implemented float, click the Preview button on the bottom of the sidekick.
Section
The section component is a part of web layout "grammar," defining a specific piece of content. In CQ, sections help the system understand how the content is organized. Within sections, you can create headers and footers where you can identify the content within the section and then provide a call to action to conclude the content.
Sections can also carry three different styles: padded teaser, gradient and solid background. There are also options to automatically place bulleted lists within the section into two or three columns.
Sections can also identify content that can be reused, as a package, elsewhere in the site through the use of the reference component.
Columns
The columns component allows you to separate your page into two to four columns. You can also place the columns component inside other components such as sections, tabs and ordered lists to divide those spaces into columns.
There are two pre-defined columns components: Columns 2 and Columns 3. Dragging those to a dropzone will automatically set up that number of columns. You can also drag the general "Columns" component to the dropzone. This will create a two column layout. Within the properties, you can set it to 2, 3 or 4 columns. You can also custom control your column widths within the grid system (see Complete Reference: Columns).
Image
The section component is a part of web layout "grammar," defining a specific piece of content. In CQ, sections help the system understand how the content is organized. Within sections, you can create headers and footers where you can identify the content within the section and then provide a call to action to conclude the content.
Sections can also carry three different styles: padded teaser, gradient and solid background. There are also options to automatically place bulleted lists within the section into two or three columns.
Sections can also identify content that can be reused, as a package, elsewhere in the site through the use of the reference component.
