{"id":6603,"date":"2025-11-11T13:17:45","date_gmt":"2025-11-11T13:17:45","guid":{"rendered":"https:\/\/www.hostinger.com\/support\/?p=6603"},"modified":"2026-02-03T12:09:10","modified_gmt":"2026-02-03T12:09:10","slug":"how-to-edit-your-email-template-in-hostinger-reach","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/how-to-edit-your-email-template-in-hostinger-reach\/","title":{"rendered":"How to Manually Edit Your Email Template in Hostinger Reach"},"content":{"rendered":"<h2 id=\"h-overview\"><b>Overview<\/b><\/h2><p><span style=\"font-weight: 400\">In Hostinger Reach, your email templates are generated using AI prompts. You can create, refine, and personalize your templates directly within the AI chat interface.<\/span><span style=\"font-weight: 400\"><br>\n<\/span><span style=\"font-weight: 400\"> After generating a template, you can either:<\/span><\/p><ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Continue editing it manually in the AI chat, or<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Use the Edit Mode to make quick tweaks and add your personal touch.<\/span><\/li>\n<\/ul><p><span style=\"font-weight: 400\">The Edit Mode allows you to refine your content easily &mdash; perfect for polishing details, adjusting tone, or updating sections without starting from scratch.<\/span><\/p><h2 id=\"h-when-to-use-edit-mode\"><b>When to Use Edit Mode<\/b><\/h2><p><span style=\"font-weight: 400\">Use Edit Mode when:<\/span><\/p><ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">You already have a template generated by AI.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">You want to make minor changes (e.g., update text, links, or formatting).<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">You prefer a visual editor rather than continuing in AI chat.<\/span><\/li>\n<\/ul><h2 id=\"h-entering-edit-mode\"><b>Entering Edit Mode<\/b><\/h2><p><span style=\"font-weight: 400\">To start editing your AI-generated email template:<\/span><\/p><ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">In the AI chat mode, click the Edit<\/span> <span style=\"font-weight: 400\">button in the left upper corner.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Once edit mode is selected, click on any element in your template that you&rsquo;d like to edit &mdash; such as a text block, button, or image.<\/span><\/li>\n<\/ul><p><span style=\"font-weight: 400\">This will open the element&rsquo;s editing toolbar, where you can customize its content and appearance.<\/span><\/p><h2 id=\"h-editing-text-blocks\"><b>Editing Text Blocks<\/b><\/h2><p><span style=\"font-weight: 400\">When you select a text block, you&rsquo;ll see several customization options appear. You can either:<\/span><\/p><ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Click the entire text block to apply changes to all of it, or<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Highlight specific text with your mouse to edit only the selected part.<\/span><\/li>\n<\/ul><h3><span style=\"font-weight: 400\">Available Text Tools<\/span><\/h3><ul>\n<li style=\"font-weight: 400\"><b>Font<\/b><span style=\"font-weight: 400\"> &ndash; Choose from optimized fonts designed for consistent display across different email providers.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Font size<\/b><span style=\"font-weight: 400\"> &ndash; Adjust text size to fit your design and layout.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Formatting<\/b><span style=\"font-weight: 400\"> &ndash; Apply bold, italic, or underline styles.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Alignment<\/b><span style=\"font-weight: 400\"> &ndash; Align your text to the left, center, or right.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Lists<\/b><span style=\"font-weight: 400\"> &ndash; Format text as a bulleted list, numbered list, or list with dashes.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Emoji<\/b><span style=\"font-weight: 400\"> &ndash; Insert emojis into your text.<\/span><\/li>\n<\/ul><h3><span style=\"font-weight: 400\">Colors and Background<\/span><\/h3><ul>\n<li style=\"font-weight: 400\"><b>Text color<\/b><span style=\"font-weight: 400\"> &ndash; Change the color of your text.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Background color<\/b><span style=\"font-weight: 400\"> &ndash; Add or modify the background color behind your text.<\/span><span style=\"font-weight: 400\"><br>\n<\/span><span style=\"font-weight: 400\"> Both color changes can be applied to the whole block or just the selected text.<\/span><\/li>\n<\/ul><h3><span style=\"font-weight: 400\">Adding Links<\/span><\/h3><p><span style=\"font-weight: 400\">You can turn any piece of text into a clickable hyperlink:<\/span><\/p><ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Select the text you want to link.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Click <\/span><b>Add link<\/b><span style=\"font-weight: 400\"> and enter your URL.<\/span><\/li>\n<\/ol><p><span style=\"font-weight: 400\">By default, links appear underlined to signal they are clickable &mdash; but you can adjust the style if you prefer a different look.<\/span><\/p><h3><span style=\"font-weight: 400\">&#128587;&zwj;&#9794;&#65039; Personalization<\/span><\/h3><p><span style=\"font-weight: 400\">You can make your emails feel more personal by inserting recipient-specific details like first name, last name, or email.<\/span><span style=\"font-weight: 400\"><br>\n<\/span><span style=\"font-weight: 400\"> When you send your campaign, each contact will see their own personalized information automatically.<\/span><\/p><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\"><span style=\"font-weight: 400\">&#128161; Learn more about how personalization works in the Personalization in Hostinger Reach <\/span><a href=\"https:\/\/www.hostinger.com\/support\/how-to-personalize-your-email-templates\/\"><span style=\"font-weight: 400\">article<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/div><h3><span style=\"font-weight: 400\">Layout Options for Text Blocks<\/span><\/h3><p><span style=\"font-weight: 400\">You can adjust the overall structure and spacing of each text block using these layout settings:<\/span><\/p><ul>\n<li style=\"font-weight: 400\"><b>Width &amp; Height<\/b><span style=\"font-weight: 400\"> &ndash; Control the shape and positioning of the text area.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Padding<\/b><span style=\"font-weight: 400\"> &ndash; Add or reduce space around your text within the block.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Corner Radius<\/b><span style=\"font-weight: 400\"> &ndash; Round the edges of a text block, especially visible when a background color is applied.<\/span><\/li>\n<\/ul><p><span style=\"font-weight: 400\">These options help you align your content and create visually appealing layouts with balanced spacing.<\/span><\/p><h2 id=\"h-editing-buttons\"><b>Editing Buttons<\/b><\/h2><p><span style=\"font-weight: 400\">Buttons in your email templates can be fully customized in Edit Mode to match your brand and design.<\/span><\/p><p><span style=\"font-weight: 400\">When you click on a button, you can:<\/span><\/p><ul>\n<li style=\"font-weight: 400\"><b>Edit the button text<\/b><span style=\"font-weight: 400\"> &ndash; Type directly into the button or use the text editor toolbar to apply basic formatting (bold, italic, underline, alignment).<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Change the button color<\/b><span style=\"font-weight: 400\"> &ndash; Under the <\/span><b>Colors<\/b><span style=\"font-weight: 400\"> section, adjust the background color to match your campaign style. The color change applies instantly, so you can preview your design in real time.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Adjust layout and size<\/b><span style=\"font-weight: 400\"> &ndash; Under the <\/span><b>Layout<\/b><span style=\"font-weight: 400\"> section, customize the button&rsquo;s:<\/span>\n<ul>\n<li style=\"font-weight: 400\"><b>Corner Radius<\/b><span style=\"font-weight: 400\"> &ndash; Defines how round or square the button edges look. Higher values create more rounded buttons.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Padding<\/b><span style=\"font-weight: 400\"> &ndash; Controls how much space surrounds the button text.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Text and margin<\/b><span style=\"font-weight: 400\"> &ndash; Controls the spacing of the button itself.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Width &amp; Height<\/b><span style=\"font-weight: 400\"> &ndash; Set the button&rsquo;s dimensions to fit your email layout.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Horizontal alignment<\/b><span style=\"font-weight: 400\"> &ndash; Position the button in your email layout (<\/span><b>left, center, right<\/b><span style=\"font-weight: 400\">). Changing alignment updates the button&rsquo;s position in the email template.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul><h2 id=\"h-editing-images\"><b>Editing Images<\/b><\/h2><p><span style=\"font-weight: 400\">Images in your email templates can also be customized directly in Edit Mode. When you click on an image, three main editing options appear: <\/span><b>Change Image<\/b><span style=\"font-weight: 400\">, <\/span><b>Add Link<\/b><span style=\"font-weight: 400\">, and <\/span><b>Layout<\/b><span style=\"font-weight: 400\">.<\/span><\/p><h3><span style=\"font-weight: 400\">Change Image<\/span><\/h3><p><span style=\"font-weight: 400\">Click <\/span><b>Change Image<\/b><span style=\"font-weight: 400\"> to replace or update the image in your template. You&rsquo;ll have several options:<\/span><\/p><ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Upload your own image &ndash; Choose a file from your device.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Select from your uploaded images &ndash; Pick an image you&rsquo;ve already used in previous campaigns.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Free Images &ndash; Search for royalty-free photos by entering relevant keywords.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Link Image &ndash; Paste a public image URL to load an image directly from the web.<\/span><\/li>\n<\/ul><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\"><b>Note:<\/b><span style=\"font-weight: 400\"> The linked image must be publicly accessible. You can usually copy the image address by right-clicking the image and selecting <\/span><b>Copy Image Address<\/b><span style=\"font-weight: 400\">.<\/span><\/div><p><span style=\"font-weight: 400\">Once your image is selected, it will automatically appear in your template.<\/span><\/p><h3><span style=\"font-weight: 400\">Add Link<\/span><\/h3><p><span style=\"font-weight: 400\">Use <\/span><b>Add Link<\/b><span style=\"font-weight: 400\"> to turn your image into a clickable element. When recipients click the image in your email, they&rsquo;ll be redirected to the link you specify (for example, your website or product page).<\/span><\/p><h3><span style=\"font-weight: 400\">Layout Options<\/span><\/h3><p><span style=\"font-weight: 400\">Under <\/span><b>Layout<\/b><span style=\"font-weight: 400\">, you can fine-tune how the image appears in your email:<\/span><\/p><ul>\n<li style=\"font-weight: 400\"><b>Resize with your mouse<\/b><span style=\"font-weight: 400\"> &ndash; Click the image and drag from any of the four sides to adjust its size.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Width &amp; Height<\/b><span style=\"font-weight: 400\"> &ndash; Adjust the size and proportions of your image.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Corner Radius<\/b><span style=\"font-weight: 400\"> &ndash; Round the edges of the image.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Margin<\/b><span style=\"font-weight: 400\"> &ndash; Add blank space around the image.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Horizontal align<\/b><span style=\"font-weight: 400\"> &ndash; Align the image (<\/span><b>left, center, right<\/b><span style=\"font-weight: 400\">).<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Vertical align<\/b><span style=\"font-weight: 400\"> &ndash; Align the image (<\/span><b>top, middle, bottom<\/b><span style=\"font-weight: 400\">).<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Image Fit<\/b><span style=\"font-weight: 400\"> &ndash; Choose how your image fills the designated area:<\/span>\n<ul>\n<li style=\"font-weight: 400\"><b>Contain<\/b><span style=\"font-weight: 400\"> &ndash; Fits the entire image within the area; may leave empty space.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Cover<\/b><span style=\"font-weight: 400\"> &ndash; Zooms and crops the image to fill the entire area.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Fill<\/b><span style=\"font-weight: 400\"> &ndash; Stretches the image to occupy the full space (may distort slightly).<\/span><\/li>\n<li style=\"font-weight: 400\"><b>None<\/b><span style=\"font-weight: 400\"> &ndash; Displays the image at its original size, without scaling or cropping.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul><p><span style=\"font-weight: 400\">These settings allow you to achieve the perfect balance between visual appeal and layout consistency across different devices.<\/span><\/p><h2 id=\"h-feature-of-inserting-new-sections\"><b>Feature of Inserting New Sections<\/b><\/h2><p><span style=\"font-weight: 400\">A powerful feature in Edit Mode is <\/span><b>Insert Section<\/b><span style=\"font-weight: 400\">.<\/span><\/p><p><span style=\"font-weight: 400\">When you hover between existing sections of your email, you&rsquo;ll see plus (+) icons appear. Click the + to add a new section in two ways:<\/span><\/p><h3><span style=\"font-weight: 400\">Add Section with AI<\/span><\/h3><ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Type a short prompt like &ldquo;add a customer testimonial,&rdquo; &ldquo;insert a product grid,&rdquo; or &ldquo;create a bulleted list.&rdquo;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">AI will instantly generate a section that matches your brand style and design, keeping your template professional and cohesive.<\/span><\/li>\n<\/ul><h3><span style=\"font-weight: 400\">Add Pre-Built Section<\/span><\/h3><p><span style=\"font-weight: 400\">Manually insert ready-made elements, including:<\/span><\/p><ul>\n<li style=\"font-weight: 400\"><b>Text<\/b><\/li>\n<li style=\"font-weight: 400\"><b>Button<\/b><\/li>\n<li style=\"font-weight: 400\"><b>Image<\/b><\/li>\n<li style=\"font-weight: 400\"><b>Heading<\/b><span style=\"font-weight: 400\"> (3 heading versions)<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Spacer<\/b><span style=\"font-weight: 400\"> (4 spacer sizes)<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Divider<\/b><\/li>\n<li style=\"font-weight: 400\"><b>Layout<\/b><span style=\"font-weight: 400\"> (2 or 3 columns)<\/span><\/li>\n<\/ul><p><span style=\"font-weight: 400\">After inserting a layout section (2 or 3 columns), you can continue building your email by clicking the plus (+) icon inside the columns and selecting the elements you want to add.<\/span><\/p><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">&#128161; We recommend using the AI Insert Section option for faster, on-brand design creation.<\/div><h2 id=\"h-%f0%9f%aa%84-additional-edit-mode-features\"><b>&#129668; Additional Edit Mode Features<\/b><\/h2><h3><span style=\"font-weight: 400\">Delete \/ Duplicate \/ Reorder Section<\/span><\/h3><p><span style=\"font-weight: 400\">Click any section to see these options:<\/span><\/p><ul>\n<li style=\"font-weight: 400\"><b>Delete section<\/b><span style=\"font-weight: 400\"> &ndash; Removes the section entirely from your template.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Duplicate section<\/b><span style=\"font-weight: 400\"> &ndash; Creates an identical copy of the section directly below it.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Reorder section<\/b><span style=\"font-weight: 400\"> &ndash; Lets you drag and drop the selected section to change its position.<\/span><\/li>\n<\/ul><h3><span style=\"font-weight: 400\">Undo \/ Redo<\/span><\/h3><p><span style=\"font-weight: 400\">Use the small <\/span><b>Undo<\/b><span style=\"font-weight: 400\"> and <\/span><b>Redo<\/b><span style=\"font-weight: 400\"> arrows to reverse or reapply your latest changes.<\/span><\/p><h3><span style=\"font-weight: 400\">Save Changes<\/span><\/h3><p><span style=\"font-weight: 400\">Always click <\/span><b>Save Changes<\/b><span style=\"font-weight: 400\"> once you&rsquo;re done editing.<\/span><span style=\"font-weight: 400\"><br>\n<\/span><span style=\"font-weight: 400\">Saving is required before you can send a test email, return to AI chat to continue editing with AI or continue creating a campaign .<\/span><\/p><h3><span style=\"font-weight: 400\">Version History<\/span><\/h3><p><span style=\"font-weight: 400\">Back on the AI chat, you can use the <\/span><b>Version history<\/b><span style=\"font-weight: 400\"> button to revert your changes, both manually saved and AI changes.<\/span><\/p><p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Customize your email templates using Edit Mode<\/p>\n","protected":false},"author":591,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[296],"tags":[],"class_list":["post-6603","post","type-post","status-publish","format-standard","hentry","category-hostinger-reach"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/how-to-edit-your-email-template-in-hostinger-reach","default":1}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/6603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/591"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=6603"}],"version-history":[{"count":5,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/6603\/revisions"}],"predecessor-version":[{"id":7701,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/6603\/revisions\/7701"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=6603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=6603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=6603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}