Using the Designer Tool

About

Emails and landing pages within Insightly Marketing are created via the Designer Tool using highly customizable templates. The Designer Tool makes creating high quality and personalized emails and landing pages a simple process.

How Does the Designer Tool Work?

The Insightly Marketing Designer Tool enables the creation of highly customizable emails, email templates, landing pages, and landing page templates that makes creating high quality, personalized content simple. With the Designer Tool, users can choose from prefabricated templates, or they can design their own templates to meet their specific content needs.

The Designer Tool is used to design one off emails and landing pages and it can also be used to create email templates and landing page templates in advance so they can be utilized for future content creation.

Creating with the Designer Tool

When emails or landing pages, the Designer Tool allows users to customize the design that is displayed. The Designer Tool is accessed via the Template and/or the Design steps of the creation process.

Select a Template Type

NOTES:

The Template step is only utilized when creating an email or a landing page. For advanced users, a RAW HTML template can be selected during this step.
When creating a template for an email or a landing page, the Designer Tool will start with the Design step.

There are three different types of templates that can be chosen:

Layout Templates: These are standard templates provided by Insightly. These templates are relatively blank, but they are structured in a way to make building a template easy. These templates are helpful for users who want to customize a standard template to match their own website.
Custom Templates: This section of templates will appear once a user has created a custom template with the Designer Tool. These templates are helpful for users who want to create a new template but base it off one they have created in the past.
Themed Templates: These templates are fully built but can be adjusted to fit the desired message that a user wants to convey.

Design a Template

After locating the desired template that will be used, click the Use This Template option for that specific template – this will initiate the Design step.
1. Via the Design step, Users can customize the design of a template. Design aspects can be added to the template to customize its layout:
  - Content: Different content types can be added to the layout of a template. In order to add a content element, row(s) need to added/available for use. When a row is added, content elements can be dragged and dropped into the row. Once a content element is added to a row, it can be clicked in order to open the content properties so the content can be customized.
    - When creating a landing page or landing page template, if a video is being added to the page, the video content type can be utilized and users can choose to embed the video directly on the landing page rather than having a link to the video; this is accomplished by utilizing the video content properties and selecting Embedded when adding the video URL. Alternately, a video can also be added via an HTML content element.
  - Rows: Rows allow users to determine the structure of the template; rows can be dragged and dropped onto the template. When dragging a row onto the template, a prompt will display where the row can be dropped. Once a row has been added, customizing row properties can be done with the same process as content properties customization – click a row to open the row properties. Once a row has been added to a template, content elements can then be added to the row by dragging and dropping from the Content tab. When various rows have been added to a template, the Show Structure button can be clicked in order to review the structure of the entire template.
    - Display Conditions can be added by clicking the 'Open Builder' button under the Dynamic Content section. This action will open a modal for the Display Conditions Builder. For more information on building Display Conditions, please refer to this article.
    - Custom Rows can be saved by clicking save icon on the row (drag & drop) that opens a Custom Row modal. Marketing users can reuse the email content blocks from an email template by copying and pasting into other emails, in order to save time. Content blocks can be reused as custom rows that can be saved such as custom headers, custom footers and other email content components. This feature is available for all Marketing Plans and is applicable to Emails only, not Landing Pages. Refer this video for more details on Content Marketing Blocks.
  - Settings: The Settings tab allows users to customize the general options of a template such as the margins, alignment, default font, etc. These settings do not apply to either content or rows; in order to edit content or rows properties, the individual content element or row can be clicked.

Preview and Save in the Designer Tool

When creating in the Designer Tool, content can be saved at any time by clicking the Save Design button in the upper right corner.
When creating in the Designer Tool, content can be previewed at any point in the creation process in order to audit the look of the content.

To preview within the Designer Tool, click the Preview button.
- The Preview Mode screen will be displayed where the view can be shifted between desktop and mobile.
- To exit preview mode, click the Exit Preview button.
In addition to previewing, when creating an email, users can click the drop-down arrow to the right of the Preview button in order to send a test email to themselves or someone else to test how the design will appear to recipients of the email once it’s sent.
- The Send a Test Email popup will display where an email address can be entered for a recipient of the test email as well as any applicable personal message to include in the test email.

Add an Unsubscribe Link to Content

Adding an unsubscribe link allows Prospects to easily unsubscribe from content they no longer want to receive. Information pertaining to a Prospect's contact preferences can be reviewed within the Prospect record; it is a best practice to use a suppression list to effectively capture all Prospects who have opted out of email marketing communications.

Once a row has been added to the template to house the unsubscribe link, add a text content element to the row.
- Click the text box and from the text options, select the Special Links drop-down.
- From the Special Links drop-down click and choose Unsubscribe Link.
  - In addition to an unsubscribe link that can be added to the body of an email, landing page or templates and customized, Insightly will automatically add an unsubscribe link in the footer of each email– this footer link cannot be edited. In the event that a Prospect chooses to unsubscribe, be marked as do not email, or opt out, it is imperative that their preference is respected in order to remain compliant in the Americas with the CAN-SPAM Act and in Europe with the General Data Protections Regulations (GDPR).
    This footer will include a link to unsubscribe, the organization’s name, and the organization’s address. The name and address information are pulled from the information entered in System Settings > User Interface > Company Settings. If users do not populate the information in the Company Settings page the footer information will be blank for recipients of the email:
- When the link text is created, click the link and then click the hyperlink option in the text editor. This will allow for editing of the hyperlink properties.

Add a View in Browser Link

Adding a View in Browser link allows prospects to view HTML emails in a web browser. Clicking links in the email will be tracked, with the exception of the View in Browser link. Any link clicks on the page will not be tracked.

Once a row has been added to the template to house the View in Browser link, add a text content element to the row.
Click the text box and enter text for the link.
1. If no text is highlighted when the link is selected, the hyperlinked text View in browser will be applied.
From the text options, select the Special Links drop down.
Select View in Browser Link.

Was this article helpful?