Understanding elements

In this Article

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.

Element library.gif

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.

Markup on 2023-08-17 at 07:30:32.png

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.

Markup on 2023-08-16 at 15:38:25.png

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.

Markup on 2023-08-16 at 15:39:32.png

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.

Markup on 2023-08-17 at 07:25:47.png

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).

Markup on 2023-08-17 at 07:28:03.png

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

Markup on 2023-08-16 at 15:45:43.png

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.

Markup on 2023-08-16 at 15:48:49.png

Was this article helpful?
5 out of 10 found this helpful



Please Sign in to leave a comment if you don't see the comment box below.