Understand elements

Elements are the fundamental building blocks of your Composer website.

An element is a modular container for content. Some elements are highly specialized: there are Calendar elements to display calendar events, News elements to show news posts, several layout elements that can change the look of a particular page, and many more. There's also a generic "Content" element that will accept just about anything you want to put into it.

Elements are modular because each one is self-contained, and they can be assembled and rearranged in just about any way you wish.

Adding elements

To add an element, click the blue button labeled "Add Element" (or occasionally, "Add Element to Column"). If there are already elements on the page or banner, hover your mouse along the bottom or top edge of an existing element to see the "Add Element" button.

Clicking any of the blue "Add Element" buttons will bring up the Add Element window.

Inside the Add Element window, the various available elements are categorized by type, including "Standard," "Module," "Layout," "Social," and "Shared" elements. Click on an element's icon to add it to your page/banner.

Once you've added an element, it's time to customize it so that it displays your desired content.

Content elements

The Content element is open-ended: it will accept just about any type of content, whether it's text, images, media, or whatever else you want to showcase. After you add a Content element to your page, it will prompt you to click on it to customize its content.

Clicking the striped blue box will bring up the Finalsite editor, allowing you to type or paste in text, add images, and more.

Specialized elements

Other elements are more specialized than the general Content element. When you add one of these elements to a page or banner, you won't necessarily edit its contents directly. Instead, you'll adjust the element's settings to control what sorts of information will appear in it and how it will be formatted.

For any element, hovering over it will reveal a set of icons at the upper-right corner. Click on the "gear" icon to edit that element's settings. Or, click on the striped area to automatically pull up the settings for an unconfigured element.

For this example, we've added a "Media" element, which is used to display content uploaded to Multimedia Manager. By default the element is blank, because we haven't yet selected which media to display in it. Clicking the gear icon will bring up the settings for this element.

Here you can see the controls for selecting which media to include on this element, controls for adjusting the size and appearance of the media displayed, how the slideshow should function, and more.

That's the essence of Composer: add an element to your page or banner, then customize it to display the content you want to highlight.

Deleting elements

To delete an element, hover over it and click the "trashcan" icon that appears at the upper right.

The element will be removed and any customized content will be lost.

Moving elements

Similarly, to move an element, hover over it and click-and-hold the "move" icon (or tap, on a touchscreen device).

While holding the "move" icon, you can drag and drop the element onto any blue "Add Element" button to relocate the element to that location. In this way, you can drag your customized elements anywhere you want to on the page.

Copying elements

Click the “Copy” icon at the upper-right corner of the element to copy that element to the clipboard. You can then paste a copy of that element into another location on a Composer page. Just click any "Add Element" button, and click the "Paste this Element" button that appears after you've copied an element.