Creating Your Template
In the Templates step of your Invites Campaign, you will be prompted to choose a Template for your landing page.
You can start a blank Template from this step, or choose among previously-saved Templates. If you have no saved Templates, you can also create Templates outside of the context of a Campaign by navigating to your Project, then to the Templates menu on the left navigation. Learn more about Templates here.
Template Editor
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.
Settings: Edit the Body
By starting with the body, you can choose the main design aspects of your page, and then work backwards to edit the smaller details of your page.
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 page. 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 settings 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 page editor. However, you can add more or different row layouts 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 layout into the 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 row, click on the panel and select the red trashcan to delete.
5. To duplicate the row, click on the stacked squares, and an identical structure will appear below the original.
6. Click on a row 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 the Page 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 was uploaded in a Partner Import.
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 Call To Action and link. The link can lead to a webpage, make a call, send an email, or send an SMS. Common calls include "Register Now!" or "Learn More."
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 on your page to break up the content 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 page 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
7. HTML
Add an HTML block anywhere in your email to manually edit the HTML of the page.
In the content properties editor to the right, an HTML editor will appear.
Note: Using your own code may affect how the page is rendered. Make sure to use correct and responsive HTML, and Preview the page before sending!
8. Video
Drag and drop the video box into an existing structure.
Then, click Add a Video URL to add a URL and edit the video content block.
- Add a YouTube or Vimeo URL to generate a preview image of your video in your template
- Add or remove padding for the video. Click 'More Options' to edit each side of the video individually.
- Click 'Hide on Mobile' if you do not want to show the video when a user is on a mobile device
Don't forget to save!
Once you've saved your work, click ' Show Preview' to take a sneak peek of your Page! You can also toggle between Desktop and Mobile versions to see how it renders.
