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: Page editing slow / lists break when too many components are included.
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.
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.
- 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.
- 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.
- Navigate to another section of the page or to another page on the website.
- 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. (Read more about this Known Issue: Dragging a Photo by the Image Fails.)
Copying a Component to Another Page
It is possible to copy components from a source page to a second 'target' page, provided the target page already exists, that you stay within the same browser window (or tab), and 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
One way to do this is by linking directly from the source to the target page (/content/www/...). You can even add a temporary link on the source page and remove it when you are done with the transfer. Now select the content you wish to transfer on your source page, right-click to copy it into the special buffer, then click the helper link, and when your source page loads, paste it where desired. The target page must load in the same window (or tab) for this to work, otherwise your paste will not do anything.
If the pages are not linked, an alternative solution is to preload the target page in a new browser window. (This step is a convenience -- if you already know the URL, you just need to be able to copy and paste it.) Now on your source page, select the content on your source page and right-click to copy it into the special buffer. Back on your target page, select the complete URL in the browser location bar (including the cf#/), and then paste the URL into the location bar of your source page and click enter, so the target page loads in the source window. Now paste your transfered content into the desired spot on the target page.
Copying the component between the two pages is now as simple as copying to another part of the same page. 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.
You can move backwards in your browser to return to the source page to transfer additional content, then click another link or move forwards in the browser to return to the target page.
This process relies on the content finder being present, because that contains a special buffer to aid in copying content. If the cf#/ is not present in the URL of either the source or target page, when you paste the content, nothing will happen.
Deleting Components
Icon Components
- Right-click (CTRL-click for Apple users) on the component and choose Delete from the pop-up menu.
- Confirm the deletion by clicking Yes in the warning dialog box.
Menu Bar Components
- Click Delete in the top blue bar.
- 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.
