Embedded Files
Composer
Composer
The composer toolset is what we use to edit pages and page content on our websites. The icon for composer is a feather quill. Composer has several submenus, but the only one you need to work with is "Pages." The remaining options should only be handled by System Admins.
List of Admin-Only Elements
List of Admin-Only Elements
If you require edits or assistance with one of these elements, please submit a work request.
While editing pages, you may encounter additional elements that you cannot and/or should not edit:
Site Header
Site Footer
Menus
Side Navigations
Front Page Elements
Front Page Elements
Only school webmasters should be editng the front pages of their websites.
System Editors should not interact with the front page, portal pages, or calendar of the system website.
Pages
Pages
Pages is the only part of the composer you will ever need to access.
You will see all 30 of our websites when you first go to the Composer > Pages menu.
System Editors will only be able to access the St. Mary's County Public Schools website.
Webmasters will have access to all schools. Hopefully, as we learn the new platform, webmasters can work together and assist each other with content across school sites.
Getting started
Getting started
Navigate to your website. It can look intimidating; you will see all of the website laid out in a collapsable side navigation.
Because FinalSite uses many page redirects to create a robust menu system without page duplication, it may be difficult at first to locate the content you are looking to update. You may want to record notes to make returning to the content easier next time.
The subpages and nested content can be accessed by using the carrots next to page names. These "carrots" look like gray triangles pointing toward the page names.
Redirect "Pages"
Redirect "Pages"
Your site's navigation will include many redirect pages. These pages have no content and should not be edited. You will know a page is a redirect page because it will only have the following content:
This page will redirect to NameOfPageItRedirectsTo.
If you would like redirect pages added, removed, or changed, you will need to submit a work ticket.
Turn "On" Compose Mode
Turn "On" Compose Mode
Once you have located the page you want to edit, toggle on composing using the button/switch located at the bottom left of your screen. If the button is slid to the left and gray, compose mode is off. If the button is slid to the right and colored in, compose mode is on. You can also see the last time the page was published to the right of this button.
The compose button in the "Off" position
The compose button in the "On" position
Content & Elements
Content & Elements
Content is stored in blocks, in a manner similar to New Google Sites.
Blocks can be copied, pasted, deleted, and moved around the page layout.
When you see small blue text that reads "Click here to add content" on a blue striped box, this indicates a block you can add standard page content to using text editing tools.
If you see text in all caps that reads "ADD ELEMENT" you can click on that to add new blocks to the page. Elements introduce various options for page content beyond the simple use of a text editor. Examples include:
Content - The standard block, text editing similar to Joomla
Images - a single hosted image
Resources - a single hosted asset, usually a document
Galleries - used to display multiple hosted assets
YouTube - an easy way to embed a YouTube video
Advanced Layout Options - options to divide up content on your page, create nested content, and better organize busy or content-heavy pages.
Content Expanded
Content Expanded
Composer Tools Cheatsheet
Some listings have drop down content that provides additional informationComposer Tools Cheatsheet
Source - This shows you the HTML & CSS scripting for the block. Unless you know what you are doing, avoid using this.
Accessibility Checker - will look at all the content in the block and tell you what steps you should take to fix it.
Undo and Redo - Steps forward and back through your editing actions.
BOLD & Italics - For formatting text. Notice, there is no underline tool. Do not underline your text.
Paragraph Settings - This is how you change normal text to headings and back again.
In FinalSite all headings should begin at Heading 3.
Headings are recommended to break up pages into concise chunks so that the content is easy to follow. Heading titles should be short and descriptive to help visitors find what they are looking for on the page.
Add or edit a Content element.
Type in the title of the subheading.
Highlight the title with your cursor.
Click on the ‘Paragraph Format’ button in the content editor toolbar.
Select the desired heading from the dropdown (e.g. Heading Two).
Click on the ‘Styles’ drop-down in the content editor toolbar.
Select ‘light-green-color’ from the dropdown list for light green heading
Note: Start with Heading 3
When choosing a heading tag it is important to follow a logical HTML heading structure. This is beneficial for Search Engine Optimization (SEO) and ensures that your heading is accessibility compliant.
Styles - This dropdown allows you to create buttons and stylized text. Learn all about Styles here.
Justify - standard issue paragraph alignment controls
Remove Formatting - Strips away most formatting from content. Very useful for content copy and pasted in from another site or document.
Tables - FinalSIte can create fully accessible tables, but the process requires several steps. Do not use tables to format the layout of content! Tables should be used to present organized data.
Watch this video to see a table built in FinalSite.
Open this content tab to see detailed instructions on how to format your tables:
The styled table formatting option is recommended for all tables added to interior pages on the website to establish a visually-engaging and consistent presentation:
Add or edit a Content element.
Click on the ‘Table’ button in the content element toolbar.
Set the desired number of rows and columns
Select ‘First Row’ from the ‘Headers’ dropdown
Set ‘Border Size’, ‘Cell Padding’ and ‘Cell Spacing’ to ‘0’.
Set ‘Width’ to ‘100%’
Click on the ‘Class’ drop-down in the ‘Table Properties' window and select ‘table-styled ’ from the dropdown.
Click on the ‘OK’ button and populate the table data
Save the element updates.
Important: Always apply the ‘table-styled’ style using the ‘Class’ dropdown in the ‘Table Properties’ window. Avoid using the ‘Styles’ dropdown in the content editor toolbar to achieve this because it may apply the style to the wrong part of the table and could result in an incorrect presentation.
Note: Tables must only be used for tabular data and are not recommended for laying out content. Please use the Layout element for this instead to ensure the content displays effectively on all devices.
Highlighting the table and right clicking will bring up additional table properties that can be used to adjust the table.
If done correctly the table will look something like this:
Insert Horizontal Line - a simple way to divide up page content
Hyperlink - A versitile and essential tool. It can link to internal pages and resources, external resources, and create email links and anchor links. This will be explained in greater detail.
A link is recommended instead of a button when it forms part of a sentence or paragraph in your content. Links display in the website’s primary color with an underline.
Add or edit a Content element.
Type in the text label for the link.
Highlight the text label with your cursor.
Click on the ‘Link’ button in the content element toolbar and choose ‘Add Link’.
Add a link in the ‘Link Properties’ window
Save the element settings and publish the page.
Important: When inserting a link, choose a meaningful title that clearly identifies its purpose without the need for any additional context. This ensures it is clear and accessible to visitors. Avoid non-descriptive titles such as ‘click here’ or ‘read more’.
Image - This is how you add a hosted image to the page. An understanding of Resource Manager will be needed.
Media - We will not be using this tool, instead we will be using the YouTube Element.
Bulleted & Numbered List - Standard issue bullets. You will need the indent tool (listed below) to move any sub-bullets around.
Underline - Do not use this tool. Do not underline your text. Only hyperlinks can be underlined.
Indent Tool - allows you to indent or outdent. In FinalSite your TAB key will not work to do this.
Text Direction - We will not be using this tool
Blockquote - (advanced) Used in combination with the style tool. See Style Guide Block Text for more info.
Insert Special Character - If you need a weird or specialized character look here
Paste as Code - We will not be using this tool.
Math - takes written math equations and displays them beautifully on the page
Superscript, Subscript, Strikethrough - Standard issue text editing
Abbreviation - Allows you to create add abbreviations that display the full text of the abbreviation when moused over or interacted with.
Cancel - quit and undo your recent changes to this content element block
Save - IMPORTANT! FinalSIte does not automatically save your work! You must save the content you add or edit to the content element block! This is separate from publishing the page changes!
Other Useful Elements
Other Useful Elements
Content Elements are described at length above. In this section, we will cover some of the other page elements that might be useful.
Images - a single hosted image
Resources - a single hosted asset, usually a document
Galleries - used to display multiple hosted assets
YouTube - an easy way to embed a YouTube video
Advanced Layout Options - options to divide up content on your page, create nested content, and better organize busy or content-heavy pages.
Image Elements
Image Elements
ADD ELEMENT > Standard > Image
When you select an Image Element, a new block appears on the page.
When you see small blue text that reads "Select an image" on a blue striped box, this indicates a block you can add an image to.
The Edit Resource Element Settings can be very intimidating.
Stay on the SINGLE tab
Write in and toggle on or off the image's title
Find your hosted image using the Browse> button. It is important this image already be hosted in your Resource Manager and has been set up properly for accessibility
Under the -All option, set what will be displayed, if the title is showing, where it will be placed, and whether or not you want the description shown
Resource Elements
Resource Elements
ADD ELEMENT > Standard > Resource
A resource element is best used to display a collection of assets from a gallery. You will need to have a gallery built to utilize this tool.
When you select a Resource Element, a new block appears on the page.
When you see small blue text that reads "Select a gallery" on a blue striped box, this indicates a block you can add a resource to.
The Edit Resource Element Settings can be very intimidating.
It will default to the LIST format.
For listing hosted documents, this is the best choice
GRID or SLIDESHOW might be better for hosted image collections
Write in and toggle on or off the resource's title
Find your hosted resource gallery using the Browse> button. It is important this gallery already be built in your Resource Manager
Under the Gallery Option, toggle on or off Name and Description
Under the -All option, set what will be displayed, if the title or file name is showing, where it will be placed, and whether or not you want the description shown
LAYOUT Elements
LAYOUT Elements
ADD ELEMENT > Layout > *Many Options*
A layout element gives you various ways to arrange and display assets and information on your pages.
When you select a Layout Element, a new block appears on the page. Depending upon your choice, this block contains frames, boxes, bins, and folders where you can store OTHER ELEMENTS, including Content Elements, inside.
Some useful layouts are:
Some useful layouts are:
2 column - creates two evenly sized containers for other elements to go inside
2 column wide left - creates two unevenly sized containers for other elements to go inside. The left is about 2/3 of the page width
2 column wide right - creates two unevenly sized containers for other elements to go inside. The right is about 2/3 of the page width
3 column - creates three evenly sized containers for other elements to go inside
4 column - creates four evenly sized containers for other elements to go inside (you would need some VERY skinny content)
Accordion - Content nested under carrot-activated headers
Tabs - Stacked content users can shuffle through
SOCIAL Elements
SOCIAL Elements
ADD ELEMENT > Standard > Social
The only resource element you need from this tab is the YouTube Element.
When you select a YouTube Element, a new block appears on the page.
When you see small blue text that reads "A YouTube widget will appear here. Please click the settings to add widget." on a blue striped box, this indicates a block you can add a YouTube video to.
Adding a video is very simple.
Write in and toggle on or off the resource's title
Paste in the URL of the YouTube video.
All done!
Report abuse