1.6 Editing a Page

Once your page is set up, you will need to place components on the page to create the layout and add content. This section first reviews how pages are set-up and then how to begin adding components.

Constructing the Main Content Area

The Grid

All pages are comprised of an invisible vertical grid. The main content area has 12 vertical grid columns. The sidebar has 4 vertical grid columns. Understanding this is particularly useful in dealing with floats and columns and the framework of page layout. No component can "break" the grid, meaning that no component can occupy only part of a grid column.

Adding Components

Components can be added wherever a dropzone is located. Please note that not all components can be used in every dropzone. You can add a component to a page by dragging it from the sidekick, placing it in the dropzone and releasing the mouse. You can also add a component by right-clicking a dropzone and choosing New...

Many components require a browser refresh after adding them. CQ will automatically do this as required. Please be patient after adding a component and do not add another component or edit one until the page has fully reloaded. The page is successfully reloaded when the content of the sidekick reappears.

Most pages in the website should follow one of the selected formats (see the Style Guide). To allow maximum flexibility in page layout, all new pages simply have a main dropzone.

Add a Float

To create the standard design, you will first need to drag a Float component onto the main dropzone. Once the Float is in place, you will see a right-hand float with a grid size of 5, meaning it spans 5 grid columns. The float contains a new dropzone, into which you could place an Image, a Section or many other components.

Add an Image

Find the image component and drag it into the smaller dropzone inside the Float. Then make sure the Image tab is selected in your finder, type in "student" (without the quotes) and press enter. Choose one of the resulting images and drag it over to the Image component you just placed until the image component gains a thick green border and then release the mouse. Right-click the image and choose Edit. You can crop the image however you would like or rotate it in the Image tab. CQ will automatically resize the image to fit the Image component within the grid.

Add Text

Next, drag a Text component from the sidekick into the main dropzone. You will see a space appear and a light paragraph symbol (¶) on the left indicating a placeholder for text. Right-click the Text component and choose Edit. Enter some test text and then click OK.

Add a Heading

Finally, drag the Heading (note the difference between Header and Heading in the sidekick) component over to your main dropzone and position your mouse so that the Heading goes in above the Text component. You should see a new ¶ symbol to indicate a placeholder for a heading. Right-click the Heading and choose Edit. Type in a sample heading in the Heading field. Then click the dropdown next to Type and choose Extra Large (h1). Click OK. Your page should now look similar to the example on the right.

Editing Component Settings

As demonstrated above, you can edit most components' settings by right-clicking the component and choosing Edit. Certain components can only be edited by clicking Edit on the component's control bar. Not all components have control bars.

You may also double-click many components to edit their properties. Be advised, however, that double-clicking a component containing only a link can be difficul (such as a Link Button or a Heading with a destination URL). You will be sent to the destination page before you can execute the second click. The best practice is to utilize the right-click/Edit.

Moving & Deleting Components

You can change a component's position by clicking and holding on the component's container and then dragging it to the new location. You will see the component's container when you hover over it. It appears as a thick blue border around the component. Many components allow you to select the component by single-clicking on it (the note from above about components containing only links applies here). When a component is selected, a thick orange border appears around it (see inset image). Often, you can select multiple components by holding down your Shift key and clicking on each component. You can then move them as a unit.

To delete a component, simply right-click it and choose Delete. Certain components can only be deleted by choosing Delete from its control bar. Best practices recommend the use of one of these two methods. You can also select the component and press Delete on your keybaord. Please note that deleting most components requires a browser refresh (CQ will automatically do this).

The current version of CQ does not have an undo feature. Once a component is deleted, you must re-create it if it was deleted on accident.

Cutting, Copying & Pasting

From Outside the System

You can copy and paste text from outside of the system just like you would in any other program. In the text editor dialog, the right-click menu is typically unavailable, so you must use the standard shortcuts for your operating system.

To paste into a component, you must be in the component's edit dialog.

CQ automatically strips most non-standard formatting from text pasted into the system. It will also attempt to re-create any bulleted lists. Often the edit dialog will show the source formatting for the text upon first pasting the text. You will need to press OK to see how the text translated.

Pasting into a Table

Many times you can copy content from a table on another webpage or from a program such as Word or Excel and paste it into a Table component in CQ. You just open your blank Table component, place you cursor in the top-left cell and perform the keyboard paste shortcut. Results vary and sometimes tablese simply have to be re-created.

Inside the System

You can cut, copy and paste certain components within CQ. This is accmplished through either the right-click menu or the control bar. Once you have successfully cut or copied a component, it will appear in your CQ clipboard in the lower-right corner of your screen. You can then right-click and choose Paste or click Paste in a control bar to re-add the component to the page. When using the control bar, clicking Paste will paste the clipboard contents above the control bar.

You can also cut, copy and paste between pages in the site. After you cut or copy your component(s), you must navigate to your destination page and then paste in the appropriate place. The clipboard is only valid for a browser tab/window. So you cannot copy a component in one browser tab and then switch to another browser tab with your destination page and paste the component there.

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

Modes: Preview & Edit

At the bottom of your sidekick are a series of buttons. The first button is the edit mode button. For most users, this button will always be selected when you can see these buttons. Edit mode allows you to make changes to the page you are viewing, provided you have the proper permissions.

The second button activates preview mode. Clicking this button will collapse your sidekick and give you an approximation of how your page will appear once it is published. If your page uses tabs or other complex container components, you may need to manually refresh your browser while in preview mode for the containers to render properly. To exit Preview mode, click the down arrow in the sidekick title bar.

Activating/Publishing

Once your page is ready for the world to see, it must be activated or published. Content managers can self-activate while content contributors can only submit a request for activation. To activate a page (or request activation), simply choose the Page tab in the sidekick and click Activate Page. You will see a small dropdown in the upper-right corner of the window letting you know that either the page has been activated or the request for activation has been sent.

< Previous Topic

Next Topic >