Newsletter Editor for SchoolSend

Toolbar controls

Note that the toolbar contains 2 types of controls:

Buttons - expose a sub-menu with more settings you can apply to the currently selected block or text; you can switch from one button to another with a single click
Toggles - switch the editor to another view mode, in which all other tools become disabled; to exit the current mode you will need to toggle back

Shortcuts button
Opens a popup with the keyboard shortcuts that the editor supports. Note that the editor supports the usual Copy, Paste, Undo and Redo shortcuts you might be accustomed to from




Mobile view toggle
Shows how the email will render on a mobile device with a portrait aspect ratio.

Click on the mobile view toggle again to return to desktop view.



HTML mode toggle
Switches the editor to source mode. The source format is an email template syntax, which is HTML-like and transpiles to HTML that can be rendered by browsers and email clients.

For this tool to appear you will need to unselect any currently selected block.

To exit HTML / source mode, click on the toggle again.



Background button
Allows selecting a colour or image as a background for the currently selected block.



Settings button
Opens a popup with settings contextually based on the selected block or text.



Setting Spacing between blocks
In the Settings popup, most blocks will have either a MARGIN or PADDING field.
Margin - is spacing outside of the block
Padding - is spacing inside of the block

The order of your values goes [top right bottom left] with a space between each number value.
Each number (other than 0) needs to have px (pixels) appended.

An example to give top and bottom spacing would be:

/* top right bottom left */
10px 0 10px 0

Add block button
This button allows you to insert a new block of content.For the button to appear you will need to select the existing block below which you would like the new block to be inserted.

The editor comes with a number of predefined blocks such as blocks with a header, image, button, multiple columns, etc.



Alignment button
Enables horizontal alignment (left, right or center).



Text colour
Exposes a colour picker so that you can select the colour of the fonts in the affected block or text fragment.



Border
Permits setting a border width, colour and radius on a given block. Using the radius you can give a block rounded corners.



Links
Converts a selected text fragment into a link. Users can configure the link text and the URL that the link should point to.



Images
Enables you to insert an image into the email.
Note: Only JPEG and PNG Images are supported, and they will be resized to a maximum of 800px wide/tall
You can make this a link after inserting the image, click on the image, then the settings button and insert the LINK.
You can also add alt text for images for users who do not display images in their email.

To make images work better on mobile view, click on an inserted image, then click the Settings button and check the Responsive on Mobile option.






Block Controls
The email editor text area is intended mainly for authoring content, though if you click on a block, a set of tools will also appear, namely:

Move handle - Allows the selected block to be moved up or down with regard to its sibling blocks
Delete - Removes the block from the template
Clone - Clones the block using the exact same settings

Updated on: 08/02/2024