Content Elements are the building blocks of CatapultCMS website content. They can be found on the left side of the editor under the Edit tab under an area labeled “Content Elements” and are represented as cards with icons. This panel will open automatically when you edit a page.
To get content on a page, 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. To open an element to begin adding and editing content, click on the card in the content region.
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. The Text Editor Element
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, or renamed, and different templates will style tabs in different ways.
Title
The Title Element is used to add a title as a heading to an element, and using this element is simple; click and drag the card into the content region, click to open, add the title in the text box and click the green Save button.
Doc List
The Doc List element is used for listing documents easily and quickly. With large amounts of documents that need to be displayed on a page, the element is linked 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 regarding the documents to show when 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 being directly uploaded to the element itself with the Upload button and kept only within that instance of an element. Images are arranged in columns which can be added or taken away by clicking the Columns dropdown and selecting how many columns are needed. Clicking the Options button in this element will open a popup with more options for transition timing, transition effects and dimensions.
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 being directly uploaded to the element itself with the Upload button and kept only within that instance of an element. 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 Banner element in that images can be uploaded directly to the element or File Manager, and images are cycled through on the live website. The main difference between this element and the Banner element is that the Slideshow element is meant for gallery purposes and banners are meant more for page-docorative pages. Captions and links can be added to images, but not titles, and there will be no unique styling for certain content regions. The same menu for transition, rotation speed and dimensions can be found by clicking Options (just like the Image Gallery Element).
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 color, size of the font, background 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 through the Advanced setting.
Contact Form
The contact form provides a platform for sending emails to designated addresses. The user submits their name and email with a subject, and writes a message to send to the designated address.
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 a Calendar element pulls feeds from someone else’s Google Calendar account, only public calendars that were selected by the person when logged in 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 element. Originally, the most practical way of displaying a single picture on a page was to place it in a Text Editor element and give it a percentage width to prevent issues with mobile widths. With the Picture element, the image is uploaded or chosen in 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 large, medium and small sizes as well as dark, light and outline styling. They can also be centered, or aligned 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, and different layouts such as a Feed View, a Blog View, and more can be used to display the feeds in different ways.
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 of a site. This element can be good for embedding content and forms.
Instructions
Add Comment