[ skip to content ]

1.4 Websites User Interface

interface-directory-viewDirectory View

Directory View

In the directory view, you will see the hierarchy of the website in the left pane (the hierarchy pane). After you select a particular page within the hierarchy, you will see a listing of its child pages (if any) in the right pane (the pages pane). In the pages pane, you can right-click a file to access its properties or to activate it (if you have manager permissions).

You will notice that everything in the websites section of CQ is a page. There are no directories. This is important in planning new sections of the webiste. If a page exists, users will be able to view it, so there will need to be a plan for what content should appear on that page.

Page Edit View

Upon opening a page, you will enter the page edit view. The page edit view is comprised of three primary parts: the finder, the sidekick and the dropzones.

edit-windowPage Edit View

Finder

The finder is your tool for helping you locate assets to place on your page. There are six tabs, but you will only be using the first three tabs and the last tab.

Tabs 1-3: Images, Pages & Videos

You can search for images, pages or videos inside the Digital Asset Manager (DAM) by keyword. Simply enter your keyword or keywords into the search bar and the finder will provide results that match. If you have an appropriate component already on the page, such as an image component, you can drag assets directly from the finder and drop them on the component to populate the component or change its contents. This also works for image tabs in component control dialogs.

Tab 6: Browse

If the search is not providing the asset that you are envisioning, you can use the browse tab to drill down into the DAM and see all of the assets under a given directory. Once you find the asset you desire, you can drag it onto the page to populate a component or into the image tab of a components control dialog.

Demo of the parts of the sidekickThe Sidekick

Sidekick

The sidekick is the control panel for the edit view in CQ. You will primarily use the tools in the first two tabs at the top (Components and Page) and the first two buttons at the bottom. The first button at the bottom places you in edit mode, where you can edit a page's components and content, provided you have permission to edit that page. The second button enters preview mode where you can see a quick approximation of how the published page will look. Once you enter preview mode, the sidekick will collapse, simply click the down arrow in the sidekick title bar to return to edit mode.

The first tab contains the components you will use to build your page. You can drag components directly from the sidekick to your dropzones. The components are divided into four categories. Component functions and usage are explained in a later section.

General

The majority of the components that you will use are located in the General section.

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 recommnded 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.

Other

Administrators only: These are components that administrators use to create special lists and populate certain datasets throughout the site.

Dropzone

A dropzone is an available area for adding components to a page. Dropzones can appear in the main content area and in the sidebar (see the sidebar section for sidebar editing and functionality). Not all dropzones accept all components. If you drag a component from the sidekick to a dropzone and the dropzone moves and a blue dashed line appears, you can release the mouse and add the component to that spot on the page. Otherwise, the component name remains attached to your cursor with a "no" symbol next to it.

< Previous Topic Next Topic >