University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

Using Components

Learn about how to add components to your Web pages, how they appear and how to copy and delete them. 

On this page:

Adding Components

Add components to a page by one of two methods:

  • Double-click inside the box labeled Drag components or assets here 
  • Drag and drop (see the illustration below) the component from the Sidekick onto the page. When the component is over an editable area (indicated by a green circle with a checkmark) release the mouse button. The component is added to the page. You may place components above, below or between existing components as indicated by the green circle and checkmark.

Divide long or very complicated pages into several pages.

We recommend no more than 400 components per page. Less if you need to plan for growth through any dynamic elements. Indeed, it is best practice not to have really long and complicated pages. More details are in this Known Issue.

a component being dragged onto a web site page from the Sidekick

When the component is dragged over an editable area (indicated by a green circle with a checkmark) release the mouse button to drop the component in place.

When components are first added to a page, they are represented in two different ways depending on their type:

  • Icon Components: Most of the basic components are represented with an icon (see diagram below).
  • Menu Bar Components: A small blue menu bar, or "handle," appears in feature components such as Column Control, Form Container and Related Content Container.
Examples of Icon components and Features
Example of an Icon Component (left) and a Menu Bar Component (right).

Related Videos:

Copying and Moving Components

Components may be copied or cut from one position on your page and pasted to another. They may also be moved from one page to another.

  1. Select the desired component by moving the cursor over the component and clicking inside it; the component will now be highlighted by an orange box.
  2. Right-click (CTRL-click for Apple users) on the component and choose Copy from the pop-up menu to copy it. If you use Cut to move a component, the component will not disappear from its original location until it has been pasted in its new location.
  3. Navigate to another section of the page or to another page on the website.
  4. Right-click (CTRL-click for Apple users) on the component just below where the pasted component should appear and choose Paste from the pop-up menu.

Related Videos:

Best Practice

Always drag a component, or click to copy a component by clicking on its border or control bar, and never on the interior of the component.

Clicking on some components will activate a link or video. Dragging a Photo component may even fail (Known Issue).

Do Not Drag a Photo Component by the Image

Dragging a Photo component to another position on the page may fail or duplicate the component (Known Issue).

Copying a Component to Another Page

It is possible to copy components from your source page to another ('target') page, provided (1) that you stay within the same browser window, and (2), that the content finder is loaded -- look for "cf#/" in your browser's location bar;
https://ubcms-author.buffalo.edu/cf#/content/www/provost/admin-units.html

(1) One way to do this is if the the target page is directly linked from the source page. Clicking the link to the target page loads that page in the same window (or tab, if your broswer has several windows open). If the pages are not linked, you can paste the URL of the target page into the location bar, so it loads in the same window. Or you could even temporarily add a link on your source page to the target page and then remove the link after you have copied over the content. I fthe target page does not yet exist, you will need to build it before you start this procedure.

(2) The content finder must be loaded ("cf#/" must be in the URL in your browser's location bar); e.g.
https://ubcms-author.buffalo.edu/cf#/content/www/provost/admin-units.html
You can type it in and reload the page if it is not displayed.

Copying the component between the two pages is now as simple as copying to another part of the same page:

  1. Select the component you want on your source page, right click the mouse and then select ‘copy.’
  2. Click on a link to your target page.
  3. On your target page, you should be able to right click and select ‘paste.’

The copied component will appear ABOVE where you position your mouse. If you accidentally paste the content in the wrong spot, you can drag it to the desired location, or use right click to cut and then paste.

It is also possible to move a component in this manner (cut and paste), but this is not recommended. If the transfer does not proceed as desired, you may accidentally lose your content.

Deleting Components

Icon Components

  1. Right-click (CTRL-click for Apple users) on the component and choose Delete from the pop-up menu.
  2. Confirm the deletion by clicking Yes in the warning dialog box.

Menu Bar Components

  1. Click Delete in the top blue bar.
  2. Confirm the deletion by clicking Yes in the warning dialog box.

Related Videos:

Undo / Redo

Should you realize you deleted or changed a component by mistake, the built-in Undo/Redo feature may be helpful.

Was this page helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)