Hostinger Reach: Creating email templates with HTML, AI, and Design tools

Learn how to create professional email campaigns in Hostinger Reach by leveraging AI prompt generation, the visual Design editor, or custom HTML code.

Updated 1 day ago

Hostinger Reach gives you multiple ways to create professional email templates. You can start with AI, choose a ready-made template from the template library, or upload your own HTML code.

No matter which starting point you choose, you can always continue editing your template with AI, the Design editor, or the Code editor.

Note: The Code editor is a premium feature available on Reach 500 and higher plans. If you are using a lower plan, you may need to upgrade to access it.

Ways to start creating an email template

When creating a new template in Reach, you can choose one of the following starting points:

  1. Create with AI: Describe what you want to send, and Reach AI will create a full email layout, design, and copy in seconds. If you’re not sure where to start, you can use one of the AI prompt suggestions shown on the page. AI will also use your saved brand details to make the template match your business. This is a great option if you want to quickly create a campaign from an idea, promotion, event, product update, or newsletter topic.
  2. (Coming soon) Choose a template from the library: You can browse the Reach template library and select a ready-made design as your starting point. After choosing a template, you can customize the text, images, buttons, sections, colors, and styling to match your brand and message.
  3. Upload HTML code: If you already have an HTML email template, you can upload it directly to Reach and continue editing it. This is useful if you have a custom design created outside Reach or want to reuse an existing HTML template.
When composing a campaign or automation email, you can set a custom pre-header text. The pre-header appears next to the subject line as a preview snippet in the recipient’s inbox. If no pre-header is set, inbox clients may display the first line of the email body or a generic fallback (e.g., “view in browser”). To set a pre-header: open the email editor → locate the Pre-header field → enter your text → save.

Switching between AI, Design, and Code editors

Your starting point does not limit how you can edit your template later. After creating a template, you can freely switch between three different editing tools Reach provides!

AI editor

Use AI to quickly improve or update your template. You can instruct the AI to:

  • Improve the email layout
  • Adjust the design of the email
  • Update the template with your current brand details
  • Fix issues in the email content
  • Generate new images

Design editor

Use the Design editor when you want to manually adjust your template. Use this editor to:

  • Edit text and images
  • Add, duplicate, reorder and remove sections
  • Update buttons and links
  • Change styling
  • Add personalization
  • Edit formatting, margins, corner radius and more

Code editor

Use the Code editor when you want to work directly with your template’s HTML. Use this editor to:

  • Edit HTML code directly
  • Upload a new HTML file
  • Replace the existing template code.

Editing templates with the Code editor

The Code editor allows you to directly update the HTML structure of your email template. Follow these steps to modify and save your code:

  1. Open your template in Reach.
  2. Switch to the Code editor.
  3. Edit the HTML directly or upload a new HTML file.
  4. Review your changes.
  5. Click Save changes.

When you save your changes, Reach validates and prepares your HTML so it works properly in email inboxes.

What happens when you save Code editor changes

After you click Save changes, Reach checks your HTML before applying the update. This may take a few seconds.

During this process, Reach validates and adjusts your HTML to help make sure that:

  • The HTML structure is suitable for all email clients
  • The template can render correctly across different inboxes
  • The Reach unsubscribe link is present and set up correctly
  • Images can be displayed properly in the template preview
  • Unsafe or unsupported elements are handled
  • The template follows Reach security and sending requirements

If needed, Reach may update parts of the HTML structure to improve compatibility, protect unsubscribe functionality, and help your email display correctly for recipients.

Best practices for HTML templates

For the best results when using the Code editor:

  • Use HTML created specifically for email, not regular website HTML
  • Keep your layout simple and mobile-friendly
  • Make sure all images are hosted correctly and can be loaded
  • Test your email before sending it to your audience