Understanding elements

In this Article

• The Element Library
• Add a Content element
• Add a Module element
• Delete an element
• Move an element
• Clone or copy an element

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, Post elements to display posts, 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.

Each element is self-contained and can be assembled and rearranged in just about any way you wish.

The Element Library

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 open up the Element Library where you can then navigate through the 5 tabs to choose from a variety of elements you would like to place on your Composer page. 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.

Add a Content element

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.

Add a Module element

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 this example, we've added a Calendar element, which is used to display calendars created in Calendar Manager. By default the element is empty, because we haven't yet selected which calendars to display. Clicking the gear icon will bring up the settings for this element and allow you to customize the appearance.

This is the essence of Composer: add an element to your page or banner, then customize it to display the content you want to highlight exactly the way you want it to look.

Delete an element

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.

Move an element

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.

Clone or copy an element

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 any Composer page. Just click any Add Element button, and click the Paste this Element button that appears after you've copied an element. Choose where you'd like to place the copied element by selecting Place Below or Place Above.