Composer Overview

Overview

The Composer Editor is a robust tool that allows teachers and other school constituents to create highly customizable and visually appealing content quickly and easily. Emails sent via Composer can take advantage of Veracross Email Merge. Composer also allows schools to directly manage email communication as part of the content creation process. If Composer is launched for creating emails, the final steps are to define the constituents that should receive this email, making it easy to reach the intended audience quickly and efficiently. If Composer is launched for creating full posts in class websites, teachers are able to select which group of people (additional teachers, parents, and/or students) they would like to immediately notify that new content has been created. Schools can move from idea, to creation, to communication all from one platform.

Composer Editor Components

The Composer Editor has two main components:

1. Content Builder
   The content area is displayed on the left side of the editor. As content sections such as headers, text, images, etc. are added to this pane, the content renders as it will be viewed by the public either as an email or a post or page in a class website. This allows users to easily add content and instantly view how it will appear all from one editing screen. Note: File size is limited to 2MB or less.
2. Content Editor
   The content editor is the right portion of Composer. Each type of content or section that can be added to the content builder (i.e. email or class website post or page) is available as a section. Sections can be dragged directly into the Content Builder or clicked once to add. When a section is added, all editing options for that content type will display below the section options. All editing takes place in this right hand pane, and content will immediately render in the builder pane.

Additionally, when sections are added to the content builder a toolbar will become available to help manage the content within the builder. The toolbar includes such options as dragging and dropping sections to reorder, coping options, delete options, etc.

Content Builder

There are eight different types of sections that can be added to help build content. Each section has its own specific set of editing options available once it has been added.

Header

Headers are titles of sections within the email, class website post, or page. They can be used to organize the content into concise sections of information. To help create structure within the content, headers can be a range of different sizes depending on where it needs to appear within the page.

The following can be modified on a header:

• Background Color: change the color behind the text to create a solid band of color that spans the width of the page.
• Alignment: specify how the header should be justified: left, center, or right.
• Text: add custom text for the header in place of the “Enter Your Header Text here!” The header can be made into a link and the text color changed directly from this edit box.
• Text Size: select what size the header should appear: small, medium, large, or x-large.
• Weight: select the font weight: normal or bold.

Text

Text is a rich text box that allows users to add the main written portion of their content. Users can select how they would like their text to be laid out on the page, in either one, two, or three columns and change the background color for the text section if desired. Each column has the same modification options:

• Alignment: specify how the text should be justified within the column: left, center, or right. If only one column has been selected then alignment will determine how it is justified in proportion to the entire page.
• Column Title: (optional) add a title to each column of text. Column titles can also be set up to link to external content and the text color can be changed directly from the title box.
• Text: add the content for each column in the text box. All standard text editing options such as bold, italics, underline, lists, text color, etc. are available from the rich text editor. The text box can be expanded to full screen to facilitate adding a lot of content by selecting the opposing arrows icon.

Button

A button is a large link to an external content. Teachers can choose to have up to three buttons in one section and align them either:

• Left: left justifies all buttons in a single row.
• Center: centers and stacks all buttons.
• Right: right justifies all buttons in a single row.
• Full: stretches the single button across the entire page.

Each button option can have its own custom test, link, text color, and button color. When linking to a URL outside of Composer, please be sure to begin your link with “https://”.

Divider

A divider is a horizontal line that helps to break up different sections of the page. There are a number of options that can be modified on a divider:

• Background Color: set the color of the entire divider section.
• Divider Color: change the color of the divider line.
• Type: choose one of four types of lines the divider can be: solid line, dotted line, dashed line, or blank which will simply leave a large space between sections.
• Width: determines how far the divider extends across the page. Half will center a small line in the middle of page, normal will leave a short margin on either end, and full will span the entire width of the page.
• Thickness: determines how thick the divider line should be. The range is 1px-10px.
• Padding: determines how much blank space should be left on the top and bottom of the divider to allow for cushioning between sections.

Text + Image

The text + image section inserts pre-formatted text wrapped around a single image. Users simply insert the image they would like and adjust the alignment to position it where they want within the text. The same rich text editor that is present in the standalone text section is available to help add content.

Additional modification options include:

• Background Color: change the color of the entire text + image background.
• Layout: justify the image either left or right in the text. The image can only appear in either the upper left or the upper right.
• Image: upload an image from the computer. When the image has finished uploading a green check mark will flash over the image to indicate it was successfully added to the content builder.
• Remove. Click the remove the image (but not the block).
• Link . Optionally, add a clickable link to the image. When linking to a URL outside of Composer, please be sure to begin your link with “https://”.
• Image Size: determine what size the image should display: small, medium, or large.
• Text: text box for adding the written portion of the content.

A Note About Images: Images are automatically resized to a width of 640px and are optimized for file size. This may cause some degradation of image quality, especially when text is concerned. Our current recommendation for images are: 640px wide, a .png format, and setting the image to "Full Width" in Composer.

Images

Images may be inserted directly into the page as a gallery section with each image in the gallery having its own customization options.

The image gallery has the following modification options:

• Background Color: change the color of the entire image gallery section.
• Layout: determine how many images should be contained within the gallery: one, two, or three.
• Width: determine how the images will display next to each other. Normal width provides an even border around each image to space them apart. Full width removes the border, sandwiches each image next to each other, and spans the full width of the page.

Each image has the following modification options:

• Image: upload an image from the computer. When the image has finished uploading a green check mark will flash over the image to indicate it was successfully added to the content builder.
• Remove. Click the remove the image (but not the block).
• Link . Optionally, add a clickable link to the image. When linking to a URL outside of Composer, please be sure to begin your link with “https://”.
• Caption Alignment: determine how the caption text should be justified under the image: left, center, or right.
• Caption: rich text box that allows the user to enter a short description for each image in the gallery.

A Note About Images: Images are automatically resized to a width of 640px and are optimized for file size. This may cause some degradation of image quality, especially when text is concerned. Our current recommendation for images are: 640px wide, a .png format, and setting the image to "Full Width" in Composer.

File

The file section allows users to include a direct link to a downloadable file such as a word document or pdf. Files added in the content builder can be given a new name so the saved name and file format (e.g. .pdf, .doc., .jpeg, etc.) are not visible. The file text color and the background color for the file section may also be modified.

Embed (Available for News & Events and Class Websites)

The embed section allows users to insert media into the content builder, such as a youtube video, map, audio, and more. Only iframes or embed tags are supported. Additionally the background color for the embed box may be changed.

Video (Available for Emails)

The Video section allows users to “embed” a video in an email. The word “embed” is in quotations marks because the video is not actually attached (embedded) to the message, which would result in a prohibitively large email. Rather, it embeds a thumbnail image (which must be uploaded with the “Choose File” button) and links to the video, which must be hosted by a video provider (e.g., YouTube, Vimeo).

Content Editor

Each section in the content builder has five editor tool options to allow quick access to styling, editing, and section management options.

  Change Layout

The left and right change layout arrows allows for quick re-positioning of content within the section. Layout options include left justification, center, and right justification.

 Reorder Section

Reorder sections by selecting the reorder icon and dragging and dropping the section to the desired location.

 Edit Section

To access the full range of content editor options for the particular section, select the edit icon. The edit options for this section type will appear in the right column of the Composer Editor.

 Copy Section

Duplicate a section by selecting the copy icon. The duplicate section will appear immediately below the original. The reorder section icon can then be used to drag and drop the copied section to the desired location.

 Delete Section

Remove any sections by selecting the trash can icon. Before the section is deleted a warning message will appear asking to confirm the action. Content cannot be recovered once removed.