Access your Email Template
Once you have selected an Email Template within your Invite Campaign, you will edit it in the Templates section of your Project.
For the most up to date information on accessing, organizing, and navigating your Templates, refer to this article or browse the Templates section of the help desk.
Template Editor
To begin, click the name of your campaign to access the template editor, or navigate to the templates menu (circled above) and either click '+Add Template' or choose and clone a default . We recommend giving your templates descriptive names. To the right are the drag and drop options to design your page - Content, Rows, and Settings. Select 'Full Screen' to view the Template Builder in full screen view.
Note: as you edit Templates, they are automatically saved every 4 minutes. If you make changes and log out of Feathr in less than 4 minutes, however, you will lose your most recent changes since the last autosave.
Designing Your Email Template
- Give your Email Template a Subject Line in the 'Metadata' section below the template. This will appear in your Partners' Dashboards, but can be edited by them if they choose. You may also choose preview text, which displays along with the subject line in many email clients.
- You can use Keyword Variables in the subject that will pull in from your Event information and Partners' information.
- To the right are the drag and drop options to design your email - Content, Structure, and Body.
Settings: Edit the Body
By starting with the body, you can choose the main design aspects of your email, and then work backwards to edit the more intricate details of your email.
Click the 'Settings' tab to the right of the editing section.
- Content Area Width: This is used when the device has a screen larger than that width. You can think of it as a "max" width for that content area. On small devices, it will be ignored. Drag the circle along the line to increase or decrease the content width.
- Background Color: Select the background color of your email. You can type in a Hex code, or click on the color box to the left of the Hex code to select your color.
- Content Area Background Color: Select the background color for the content area. This defaults to transparent, or you can choose a color or type in a Hex code.
- Default Font: Choose your default font from the font drop down. This will apply to all content elements in the message.
- Link Color: This defaults to the standard blue. Again, you can type in a Hex code, or click on the color box to the left of the Hex code to select your color.
Note: When you're done editing, be sure to click 'Save Design' above the body editor. You'll want to do this often throughout the editing process!
Rows: Edit the Structure
If you've started with an existing template, there should already be some sort of structure and content boxes in the email editor. However, you can add more or different structures in this next section.
- Select the 'Rows' tab in the middle of the editing section.
- Here you will see column layouts for your email. Drag and drop your chosen structure layout into the email editor to the left.
- Make sure you're placing your selected row in an area that changes into a blue line and says 'Drag it Here', as seen below.
4. If you want to delete a structure, click on the panel and select the red trashcan to delete.
5. To duplicate the structure, click on the stacked squares, and an identical structure will appear below the original.
6. Click on a structure section to edit the Row Properties to the right.
- Row Background Color: Edit the row background color using the color picker or a Hex code, or keeping it as transparent.
- Content Background Color: Edit the content background color using the color picker or a Hex code, or keeping it as transparent.
- Do not stack on mobile: Select whether you want the rows to stack when viewed on a mobile device.
- Row Background Image: If you want to add a background image for the row instead of using a color, insert the image URL here.
7. Scroll down the editor on the right to edit the Column Properties next.
- Column Background: Select the column background by using the color picker or a Hex code, or keeping it as transparent.
- Padding: Add or remove padding for the column. Click More Options to edit each side of the column individually.
- Border: Add or remove a border width and select the color of the border using the color picker or a Hex code, or leave the border transparent. Click More Options to edit each border of the column individually.
Once you've edited or added any new structures, click 'Save Design'.
Content: Edit Email Content
Now it's time to really get designing! Now you can drag and drop any of the content blocks into existing structures. Below are all the different options you can edit.
1. Text
Drag and drop the text box inside any structure to start writing.
The text editor is pretty self-explanatory. You can change the font family, size, color, and more. What's new here are the Special Links and Merge Tags.
- Special Links include the Event link, Event Registration Link, Partner Website, and Partner Dashboard Link. Selecting one of these will automatically populate with the corresponding link.
- Merge tags are those handy keywords that are typically found in Invite Pages. They include event information and partner information. The selected Merge Tag(s) will populate with the corresponding information, as long as it's provided.
Lastly, you can edit your content box when you select it from inside the structure. The content properties editor will appear to the right with the following options:
2. Image
Drag and drop the image box into an existing structure. Then, click Browse to select your image from the File Manager.
3. Button
Drag and drop a Button to create a CTA and link. The link can lead to a webpage, make a call, send an email, or send an SMS.
Once you've edited the text and style of the Button, go to the content properties editor on the right to make more detailed edits.
You can edit the link, Button background color and text color, alignment, line height, border radius, padding, and spacing.
4. Divider
Place this page break anywhere in your email to break up the message or sections.
You can also edit the color, alignment, width, and padding of the page divider in the content properties editor to the right.
5. Social Icons
Drag and drop the Social box to add your social icons to your email template.
Once you've placed it, you can edit the icons, links, and share buttons in the content properties editor to the right.
- Select Icon Collection: Select to change the color and styles of all the icons.
- URL: Edit the URL that links when an icon is clicked.
- Click 'Delete' to remove the icon from the section in your email template.
- Click 'Add New Icon' to select a different social icon to appear in your email.
- Select the Social Share tab to prepare a link that can be shared across different social media platforms.
- Lastly, you can edit the spacing, alignment, and padding of the icons in the content properties editor to the right.
6. Dynamic Content
You can create and add a Countdown timer to your Email template. Check out the lesson on How to Add Dynamic Content that will help guide you in creating your timer.
7. HTML
Add an HTML block anywhere in your email to manually edit the HTML of the message.
In the content properties editor to the right, an HTML editor will appear.
Note: Using your own code may affect how the message is rendered. Make sure to use correct and responsive HTML, and Preview your Email before sending!
Don't forget to save!
Once you've saved your work, click 'Preview' to take a sneak peek of your email. You can also toggle between Desktop and Mobile versions to see how it renders.
Send a Test Email to Yourself
Lastly, before you get ready to send this out to your Partners, send yourself a test email by clicking the Send Preview button in the top right corner. A popup modal will appear for you to enter an email address to send the test to.
