---
title: Create an Email Template
slug: aephol2407/create-an-email-template
docTags: 
createdAt: 2024-07-12T00:09:25.988Z
---

### Content Fragments and Templates

**Templates** can be created to store partially configured messages for any supported channel: Email, SMS, Push, InApp or Direct Mail.   Once leveraged in a Campaign or Journey message the template is disconnected and updates to the template will not impact the .  

**Fragments **can be created to store partially configured HTML or Personalisation Expressions.  Fragments can then be included in templates or messages in Campaigns or Journeys.  Updating a fragment will update the content everywhere it is used.  For this reason you can explore where the fragment has been referenced before making any updates.  

Create a new template by clicking on the **Create Template** button. 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/xPWWEvJ8HDb2z9ggYtUOq_image.png)

Give your template a **name** - something unique to you so you can distinguish it from your colleagues.   Select **Channel** as email and **Type** as HTML.  

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/KygayaqXtVRYdfyqrOlGP_image.png)

We can create templates from existing samples or templates, or you can build your own, either through the visual editor or by direct access to HTML code.  For this exercise choose  to **Design from scratch.**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/lAjJO-0b3_JmBWQmbGQ6f_image.png)

On the left hand side you have structural and content Components which control the layout of your email.  

Drag 2x **1:1 column **structures into your content, add a **2:1 column** right then another **1:1 column.**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/v27hLYmmF_wj0NmqHgMcp_image.png)

In the second component slot, drag across an **image **content block.   

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/Yo6HqOndVB2FPHy77oCI1_image.png)

In the third component slot, drag across a **text **content block.  

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/IvfQfDI0JvdAqVSbmHDJv_image.png)

Update the style settings for the text block from the panel on the right hand side.  You can update the font size, color and padding as desired. 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/M-cNMa4ur1KY9c18NOHQh_image.png)

Now let's use some pre-existing fragments to add a view online link and footer to the template.  On the left change from the component menu to the fragment menu.   Drag the **Open in Browser **and the **SecurFinancial Header **and** Footer **fragments to the top and bottom component slots.  

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/kg_o8lHRDs9BEcIFlKWlw_image.png)

For the image banner, we can select an existing asset from the **Asset repository  **or we can use the native integration with **Adobe Firefly** to generate an image based on text prompts.   Click on the image component and then stars icon to open the **AI Assistant. **



![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/73LONNsxAQTmgaFYd31T-_image.png)

Add a text prompt for your banner and set the parameters for height and width to 200x800 respectively.   Set the other options as desired.  

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/UmL69OqP3GMeVwZAwTwlR_image.png)

Click** Generate**.  It will take a minute to generate some image options.   Click the **Preview **button to open the viewer.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/lasIzuJZYukwO-q9DnRpd_image.png)

Here you can review the images generated and choose whether to modify the prompt or continue with one of the images selected.  

Once you're decided which image to use,  click **select **

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/tGNGMR5ujoKXTjvcD0weP_image.png)

Click **Next **to upload the image to the asset repository.  Select to store the image in the **FSI **folder. 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/PrxDrZQ9z1z0J8DLuGB4m_image.png)

Click **Import **to add your image to the content.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/dUzoB6qVVCCbsD53x5NhD_image.png)

Lastly, let's personalize the content by adding the customer firstname.  Click in the text content and select to **Add Personalisation. **

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/Wy4x0-DCM5fDl9WilUaNu_image.png)

In the personalisation editor, in the **Profile Attributes **tab, search for **first.   **You'll see a few different first name fields, this is due to the schema design in our sandbox.  select the **First Name **field with **Profile Attributes > Person >  Full Name** underneath.  This is the schema field we want to use.  Click the **+ icon** to insert the field.   Then click **Save. **

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/dLlJao1ZeeI00z0GpBUC6_image.png)

The personalisation field is now inserted into your content.  

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/_zyOEq9vSYKdnupqUB7lZ_image.png)

Click to **Save **your template.