Understanding elements

In this Article

• The Element Library
  • Standard elements
  • Module elements
  • Layout elements
  • Social elements
  • Shared elements
• Delete an element
• Move an element
• Clone or copy an element
• Quick Tutorial: Work with Elements

---

Elements are the fundamental building blocks of your Composer website. This article provides an overview of how elements work.

• An element is a modular container for content.
• Some elements are highly specialized, for example:
  • the Calendar element displays calendar events
  • a Post element displays posts
  • a Layout element can change the look of a particular page
  • a generic Content element opens up a text editor
• Each element is self-contained and can be assembled and rearranged 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.

Standard elements

The first tab of the Element Library is the Standard tab, open by default. 

Module 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 this example, we've added a Calendar element, which is used to display calendars created in New Calendars module or 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.

Learn more and view a list of all Module Elements in the article, "Module elements overview." 

Layout elements

Layout elements are useful for providing layout and structure to your Composer pages. When working in collaboration with the Page layout and appearance menu, the possibilities are endless! The third tab of the Element Library is the Layout tab.

Learn more and view a list of all Layout elements in the article, "Layout elements overview." 

Social elements

The fourth tab of the Element Library is the Social tab. This is where you may connect different social channels to display on Composer pages.

Learn more and view a list of all Social elements in the article, "Social elements overview." 

Shared elements

A Shared element is any element that has been customized and then saved for later re-use on a different page or banner. Shared elements work differently than other elements, so it's important to understand before you start placing them on your pages.

Navigate to a Composer page and locate the Shared tab in the Element Library.

Learn more about how Shared elements work in the article, "Shared elements overview." 

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.