When creating communications, you can create emails with a drag-and-drop editor called the Graphical Editor for full control of your email design.

Open the Graphical Editor

Open your main church group on Faithlife.com, scroll down to the Admin panel, and click Communications.

Note: To use the Graphical Editor, Ensure Email is toggled to YES once viewing any communication. Learn more about using Communications.

Select the Graphical Editor and click the Launch editor button.

Note: If you’ve begun writing with the Standard or Plain Text editor, click Switch to enable working with the Graphical Editor. If you switch away from one editor, you could lose any existing text, so it’s always best practice to copy any text you’ve already entered to your system clipboard before switching to another editor.

Graphical Editor Sections

The editor includes four important sections.

1. Device Previews: switch the preview between desktop, tablet, and phone.
2. Editor: drag and drop area where you build your communication
3. Content options: show or hide the components or undo/redo changes
4. Editor Options: view the style manager, layer manager, or block options.

Adding Content to Your Email

Below is a basic walk through explaining how to add content in the Graphical Editor.

1. Add content blocks.

While viewing the block options in the right panel, drag and drop the major sections of your communication into place.

Note: For best results, begin by adding structural blocks like columns, spacers, dividers, or wrappers. Then drop individual block items (e.g., text, image, button, hero images, etc.) into your structure.

2. Provide custom content.

Add your own custom content for each block. You can move, duplicate, or delete any block by selecting it and using the icons in the blue popup menu.

• Text: click to replace the default wording.
• Pro tip: you can use the same placeholders available in the Standard editor, though you will need to manually type out the placeholders (e.g., ‌{{ Person.FirstName | Default: "Friend" }} to dynamically include a person’s first name or {{ "View this message on the web" | Link: Snippets.WebViewUrl }} to link to the web version of your email). As always, send yourself an example email to ensure they’re working properly.
• Images: click the default image to replace it with an image from your file vault or from a stock image source.
• Buttons: click the text to replace the button text; provide the link in the right-hand style manager panel (in the href field at the top of the panel).
• Hero: change the text, images, or button as shown above.

3. Provide custom styling.

Click any block to show the style manager in the right panel. Provide color, padding, typography, and additional styling customizations.

4. Finalize and Save

When you’ve finished creating your communication, click Done to return to the communication setup area and finalize your communication.