Content Elements

Content Elements are the building blocks of CatapultCMS website content. They are represented as cards with icons and can be found on the left side of the editor in the “Content Elements” panel under the “Edit” tab. This panel will open automatically when you edit a page.

To place content, simply click and drag the content element you’d like into one of the content regions on the page. When hovering an element card over a region, the inside of the region will turn yellow and text will appear that says “Drop Here”. Content regions appear as boxes with red dotted lines, and can sometimes be side-by-side or in different sections of the page altogether. Content elements can be stacked on top of each other in one content region, but they can not be placed side-by-side in the same same region. Templates allow content to be placed to the left or right of another element by having a left and a right region on most page templates. Once you have placed your element, you can open it and begin adding and editing content by clicking on it.

Text Editor

The Text Editor is the most frequently used content element. This element will look very familiar to those who’ve used programs like Microsoft Word and Google Docs in that many of the tools in the Text Editor are what one would come to expect out of a word processor. Paragraphs, single images and links can be constructed with this element. Read More >>

Open

Tabbed Content

The Tabbed Content element is almost identical to the Text Editor in its functionality; only this time, there are tabs. Tabs can be added, deleted, moved, or renamed and different templates will style tabs in different ways.

Open

Title

The Title Element is used to add a title as a heading to an element. Read More >>

Doc List

The Doc List element is used for listing multiple documents quickly. If you would like to have multiple documents displayed on the page, this element makes it easy by linking to a folder in the File Manager instead of having individual items linked manually in a text box. Clicking the Document Directory button will open the Document File Manager and show a list of folders that can be highlighted and selected. The Google Drive button will allow a user to select a folder from their Google Drive; they will need to be logged into their Google account in the same browser for this function to work. On the left side, there are a number of buttons that allow more details to be displayed about the documents once the element is saved.

Gallery

The Gallery element is meant to show many image thumbnails on one page that can be clicked on to show the images in a larger size. Images can be uploaded either through the Image File Manager by clicking the Add From Images button and then adding them to the element, or by directly uploading them to the element itself with the Upload button. Images are arranged in columns which can be added or taken away by clicking the Columns dropdown menu and selecting how many columns are needed. Captions and links can also be added by using the speech bubble and chainlink icons above each image.

Banner

The Banner element is an element that is used on the home page of the vast majority of Catapult templates, but it can be used in any content region. Images can be uploaded either through the Image File Manager by clicking the Add From Images button and then adding them to the element, or by directly uploading them to the element itself with the Upload button. Titles and captions can be added to each image, and special styling will appear in the main banner region on the home page for this content. Images can also have links attributed to them with the chainlink icon above the image thumbnail while the element is opened.

Slideshow

The Slideshow element is very similar to the Gallery element in that images can be uploaded directly to the element or File Manager. The main difference between this element and the Gallery element is that the Slideshow element is meant to have images on a cycle showing one at a time, instead of having all the images displayed at once. Clicking the Options button in this element will open a popup with more options for transition timing, transition effects and dimensions. Captions and links can also be added by using the speech bubble and chainlink icons above each image.

Moving/Scrolling Text

The Moving Text or “Scrolling” Text element shows text scrolling across the screen on the page like at the bottom of a jumbotron. The message is typed in the text box and then the properties such as the font color, font size, background color, and marquee speed can be adjusted. The page may need to be previewed or published to see what the final result will look like.

Video Element

The Video element allows videos to be displayed on a page. Videos from TeacherTube, Calaxy and YouTube can be embedded on the page, as well as files hosted through the Document File Manager. Other embed codes are also able to be utilized by selecting the Advanced video type.

Contact Form

The contact form provides a platform for sending emails to designated addresses. Simply put in the contact’s name and email and once published, the contact form will allow for emails to be typed and sent right from the page.

Calendar

The Calendar allows Google Calendar feeds to be displayed on a site with styling consistent with that of the site template. A Google account gets attached to the element, a public feed is picked, and then a layout is chosen; feed, full or weekly view. Although the Calendar element pulls feeds from a Google Calendar Account, only public calendars that were selected will be available for toggling on or off for users without access to the Google Account.

Picture

The Picture element is for displaying a single picture in its own space in a content region. With this element, the image is uploaded or chosen from the Image File Manager, an aligment is selected, and other settings like size, links, and even a title with a description can be given to provide the most effective presentation.

Button

The Button element allows users to create buttons to link to internal and external web pages, documents, and other items. Buttons have styling to match the site template, and they can be changed to a different size as well as dark, light, and outline styling. They can also be centered or aligned to the left or right.

Announcements

The Announcements element is a Developer-only element. This element will display the announcement feed(s) configured for the site the user is logged into. Different styling options are available to choose from to customize the look of the feed.

Staff Directory

The Staff Directory element is a Developer-only element that displays the site’s Staff Directory staff list. Staff members can be sorted by sites, departments, and groups.

Component

The Component card is a card that can create custom widgets and build pieces of templates with styling pre-determinded by the site’s template. Although the majority of components used in sites are for designated content regions, creative users can build their own components and widgets with this element.

HTML/Unrestricted Code

The HTML card, also known as the Unrestricted HTML card is used for placing raw HTML on the page. This element can be good for embedding content and forms.

Related articles