We tested three popular email marketing programs with our free HTML templates. Use this step-by-step guide to enhance your real estate marketing using first tuesday’s HTML FARM Letters.

Email marketing for real estate professionals

Real estate agents and brokers are familiar with the importance of marketing to cultivate a thriving client base from which to draw new business. One of the most reliable ways to maintain contact with past and potential clients is through marketing emails.

first tuesday offers free, user-friendly, pre-designed HTML marketing flyers for use by agents and brokers in email marketing. Our HTML flyers are compatible with several top email marketing programs with the power to reach long lists of client contacts.

Read on to learn the basics of HTML necessary to use our templates, and the step-by-step process for creating email marketing campaigns through three select providers.

The basics of HTML

While you do not need to know how to generate HTML from scratch, you’ll still need to identify specific terms to personalize templates with custom information.

HTML (Hypertext Markup Language) is a series of text elements which generate visual effects on a webpage. HTML elements are made up of bracketed HTML tags that structure the content on a page and often contain specific attributes to further define the elements to be displayed (e.g., size, color or source links).

For example, the HTML element <strong>house</strong> causes the word “house” to appear in bold font. Here, the HTML start tag <strong> is placed before the text and the end tag </strong> is placed after the text to define the text between the tags as bold. Together, these tags and text make up an HTML element.

A WYSIWYG (what you see is what you get) editor allows users to customize HMTL templates with an interface that displays both:

  • the customizable HTML making up the template; and
  • the resulting visual design created by the HTML.

The email marketing programs below all provide WYSIWYG editors. Here, you will be able to edit the HTML and immediately preview your changes to see how they will be reflected in the actual design — the end product that will appear to your email recipients.
careermanual

Font and images

To customize HTML templates for your professional use, you’ll need to recognize a few key elements and attributes.

First, look for HTML elements that assign font attributes to text. Most templates provide complete HTML with customizable font fields that allow you to insert your own text, such as contact information or property descriptions.

For example, <p style=”font-size:16px; color:#000000; font-family:Arial”>text</p> indicates the text between the HTML tags will be readable copy in the visual display, which you may replace with custom text. The HTML element — a paragraph defined by the <p> tag — includes additional attributes for the font size, color and type to be displayed. Keep in mind it is best to specify a standard font type, such as Arial, to ensure it will display across multiple platforms.

The email marketing programs below color-code types of elements, tags and attributes to make identification easier: readable text is often highlighted in a color which stands out from the rest of the formatting HTML elements, indicating where you can replace placeholder text with your own copy.

Second, agents need to identify image tags that indicate where a logo, property photo or other image file may be inserted. This HTML element begins with <img and contains attributes dictating the size and display of an image. It is closely followed by the src attribute and a web address link, which indicates where the image is being stored online — you will replace these links when inserting images.

For example, <img src=“http://www.yourimagelink.com” alt=”Your image title” style=”border-radius: 4px; width: 140px; display: block;” /> is an HTML element that places an image on the page using the <img> tag. The src attribute specifies the web address link of the image — replacing this link will replace the image. The alt attribute, though not required, allows you to enter alternative text that will display if the image cannot be displayed. The style attribute defines the size and display of the image.

Keep in mind that all images used in an email template need to be maintained in an online location. The HTML will refer to a specific link for each image. Thus, if an image is later removed from its online database, the image will not display properly in any email template that refers back to that image link.

The programs we reference below allow you to store image files on their database. Otherwise, you may store images on another online photo library and grab your image links from there.

For further assistance with HTML, see these online resources:

W3Schools

Tutorials Point

Downloading an HTML template

Our HTML templates are available for download from our FARM Letter page here. To locate the HTML templates on this page, you may either:

  • search “HTML” in the search bar above the FARM letter table; or
  • filter by category by selecting “HTML Emails” from the dropdown menu above the table.

To download a template, click on the title of the template in the table to be directed to the post for that template. Then, click on the orange button titled “Download the HTML Email Template.”

The file will automatically download to your computer as a zip file, containing the html newsletter file and accompanying image files. Some image files are part of the design; others are placeholder images which you will want to replace with your own photos — one with your company logo and the other with an agent photo of yourself (see instructions below).

Once downloaded, right-click the zip folder and select “Extract all…” to save the files in a location on your computer.

Editor’s note — Newer versions of Windows and Mac iOS are capable of opening zip files internally. However, if your computer does not open zip files, you will need to download a separate program to extract the files, such as WinZip.

We are launching our HTML newsletter collection with the June Newsletter and a FARM letter, both available now. More HTML templates will be released regularly over the next several months.

June Newsletter

Template in hand, now you can choose an email marketing program. Three user-friendly options for the beginning HTML marketer include:

  • MailChimp;
  • iContact; and
  • GetResponse.

Below, we illustrate how to use these three programs to send marketing emails with first tuesday’s HTML templates.

MailChimp HTML template instructions

MailChimp offers a free email marketing service for users with up to 2,500 subscribers. For larger subscriber lists, you can sign up for a paid account. Prices range from $10 to $199 per month.

MailChimp

Once you’ve created an account and logged in, follow these instructions:

  1. Click Create Campaign on the top right of the page and select Create an Email in the pop-up window.
  2. Follow the prompts to create or upload your subscriber list, title the campaign, customize your email subject line and select tracking preferences. Click the Next button on the bottom right when you are done.
  3. On the “Select a template” page, choose Code Your Own to use your own HTML template.
  4. Select Import from zip and choose our template zip file you saved to your computer. This will import the template and all accompanying image files.
  5. Once uploaded, MailChimp will provide the visual display of the email on the left, and the HTML code for the email on the right. You may only enter edits to the HTML display on the right. Scroll through the code to find the image links and text you want to replace.
  6. To insert your own image into the template, select Content Manager below the code. This will take you to a page containing all the images you’ve uploaded to MailChimp. Upload a new image by selecting the Upload button on the top right. Once uploaded, select the image, click the dropdown menu next to View Details on the top of the page and select Copy URL.
  7. Close the Content Manager by clicking the X in the upper right corner to return to your email template. Then, find the <img code sequence where you want to place the image. Paste the copied image URL into the proper code text as follows: src=“IMAGE URL”.
  8. Repeat steps 6 and 7 for each image you want to include. When you’re satisfied with the template, click Next. Confirm the details of your campaign and send or schedule your email to send at a later time.

MailChimp allows you to save a draft of your email template and return later for editing. All campaigns are saved under the “Campaigns” tab on the top of your dashboard menu.

You may also select a premade template from their library to customize and adapt for use in your real estate marketing, which are located under the “Templates” option in the top menu.

iContact HTML template instructions

iContact offers a free, 30-day trial without requiring credit card information. Consider signing up for a trial account to test the program before moving forward with a paid account. Prices depend on the plan you select and number of subscribers you have, ranging from $14 to $249 per month.

iContact

Once you’ve created an account, follow these instructions:

  1. First, create a contact list by selecting Contacts in the left menu. Click Start adding contacts. You can add contacts individually, or upload a file (in .csv, .xls, .xlsx or .vcf formats) — iContact provides tutorials for this on their website.
  2. To add your template, click Create a Message on the top left side of the dashboard. Click More … and select Make an HTML Message.
  3. iContact does not import multiple files at once, so you will need to grab the HTML code for our newsletter template and individually upload images. Navigate to the zip folder you saved on your computer and open the html newsletter file in your internet browser. Once opened in the browser, right click the template and select View Page Source. Hit Ctrl + A (Command + A for Macs) on your keyboard to highlight the entire template code, and hit Ctrl + C (Command + C for Macs) on your keyboard to copy it. Return to iContact and hit Ctrl + V (Command + V for Macs) on your keyboard to paste the code into the text box.
  4. Select Design under Editor Style on the toolbar to view and edit the actual newsletter design (or you may leave HTML selected under Editor Style on the toolbar to edit the HTML code directly).
  5. When editing the template in Design mode (recommended), missing images will display this broken image to indicate where an image file needs to be replaced: Broken image Click the image you want to replace and select the icon under Image in the top menu. Click the down arrow icon under Insert, then select Upload. Note that images must be 200kb or smaller.
  6. A box will open up for you to upload images. Click Upload and add your image. The image automatically appears in the Design display. Click the small blue check mark to close the upload window.
  7. Repeat steps 3 and 4 as necessary. In the Design display, you can edit text directly by clicking and typing.
  8. When you’re satisfied with the appearance of the email, enter your subject title and click Select My Recipients in the bottom right. Select your contacts and click Send Message, or schedule delivery for later.

Much like MailChimp, iContact allows you to save drafts of your emails and offers a selection of premade email layouts you can choose from to create your own emails.

GetResponse HTML template instructions

GetResponse offers a free, 30-day trial for testing before you commit to a paid account. Prices range from $10.50 to $999 per month, depending on the plan you select and number of subscribers.

GetResponse

Follow these instructions to create an email:

  1. First, open the built-in image library where you will be saving your image files by clicking My account in the top right corner of your dashboard. Right-click Multimedia Studio and select “Open link in new tab” to keep the library open while you edit your template.
  2. Return to the dashboard tab and click Create Newsletter in the center of the page. Select Drag-and-Drop Email Editor.
  3. Enter a name for your message and a subject line. Click Next Step in the bottom right.
  4. Select Import from the left menu and then From ZIP. Click Choose file and locate our zip template file on your computer to upload it. Confirm all files you want to import are selected and click Import.
  5. The HTML code for the template will be displayed. Here you can toggle the display in the top right. The left toggle button will change the background from black to white; the right toggle button will split the screen to show the visual design of the email on top and the HTML code on bottom.
  6. To insert new images into the email, navigate to your other internet browser tab containing your Multimedia Studio. Click on the Photos & Images Here, you can click on an existing image you’ve uploaded to copy the URL by right-clicking and selecting Copy image address. Or, upload new images by clicking the Upload File button on the top left.
  7. Once you’ve copied the URL for an image you want to insert into your email, return to the email design tab in your browser. Locate the appropriate image src= code in the HTML and paste the image URL. Repeat for all images.
  8. To edit email text, you will need to enter edits directly in the HTML code display.
  9. GetResponse also allows you to preview your email template in multiple email platforms and devices. Select Test message beneath the code, then Inbox Preview to see how your email will appear across multiple platforms.
  10. When you are satisfied with your email design, select Next step on the bottom right. Choose your recipients and click Next Step. Select Send to deliver your email or Schedule to send it later.

GetResponse provides an expansive library of premade templates you may use to create marketing emails.