---
title: Email Designer
slug: hinge-ajo-hol/email-designer
docTags: 
createdAt: 2024-01-22T15:42:14.371Z
---

This lab will walk through the steps to create an Email in Adobe Journey Optimizer.

NOTE:  Some exercises may vary during the actual Hands on Lab versus what is listed in the HOL Page, due to industry setup and / or Presenter preferences.

## Create a New Message

1. Within the Basic Journey, click on Email action node

::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/sssHfZKG4JIB2xZy2Lwjx-20260505-174535.jpg" size="76" width="916" height="695" position="center" showCaption="false"}

2. Enter a Label and Description for the message.
3. Click on the Configure Action button.

## Define a Subject Line

1. From the next screen, click on the Email Channel Configuration drop-down and select the Marketing Channel:

::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/SnbUIwcjqeZGpZT7rpnbl-20260505-174746.jpg" size="76" width="795" height="547" position="center" showCaption="false"}

2. You can leave the other options as default.
3. Click on the Edit Content Button.  This will open up the message canvas.
4. Enter a Subject Line:

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/H3z5HZaJXP3smhcsYozeK-20260505-175014.jpg)

5. Click on the Personalization icon to add personalized data available for a customer record. 
6. To add personalization, place your cursor where you want the personation added. Search for first name by searching for "first" and clicking the plus sign. Click Save.
7. You subject line should read something like: {{profile.person.name.firstName}} - Check out the New Products from Luma!

   ![](https://api.archbee.com/api/optimize/uPOtL7uv91chg_DkhmUnr-amMWwt2-Bdyf5W-Cop1_u-20250908-153728.jpg)

## Design Email

1. Click on the "Edit Email Body" button:

   ::Image[]{src="https://api.archbee.com/api/optimize/uPOtL7uv91chg_DkhmUnr-o7WUsO6uc_F7Cz3aQSNRH-20250908-153418.jpg" size="68" width="501" height="466" position="center" showCaption="false"}
2. In the next Window, Select “Design from Scratch”

   ::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/image222.png" size="50" isUploading="false" width="1413" height="757" darkWidth="1413" darkHeight="757" showCaption="false"}
3. Click on the 1:1 Column. Drag it 10 times onto the Canvas.

   ::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/image277.png" size="50" isUploading="false" width="1414" height="966" darkWidth="1414" darkHeight="966" showCaption="false"}
4. Select Content Components

   ::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/image188.png" size="50" isUploading="false" width="1414" height="966" darkWidth="1414" darkHeight="966" showCaption="false"}
5. Add an Image Component in the first 1:1 Content Structure 
6. Add a Divider in the Second Component 
7. Add a Text Component in the Third Content Structure
8. Add a Divider in the Fourth Content Structure 
9. Add an Image in the Fifth Content Structure 
10. Add a Divider in the Sixth Content Structure 
11. Add a Button in the Seventh Component
12. Add a Divider in the Eight Content Structure
13. Add Social in the 9th Content Structure

    ::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/ScreenShot2022-08-19at12.01.04PM.png" size="50" isUploading="false" width="2246" height="1074" darkWidth="2246" darkHeight="1074" showCaption="false"}
14. Add a Divider in the last content structure
15. Select Browse to select an image. Go to the Luma Brand Folder and look for the Luma Logo. Resize as necessary using the Styles menu. 

    ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/7xTrn9VBKNxtqtY3cb42X_screenshot-2024-06-18-at-90046-am.png)
16. The type and center align the following text: "Check out our new products at Luma!!"
17. Add a hero image to the email message for your email.
18. Next, click on the button at the bottom of the email, change the text to "Shop Now".
19. Your email should appear something like the following:

    ![](https://api.archbee.com/api/optimize/uPOtL7uv91chg_DkhmUnr-F0YVxRZ_ukF323fsCrRLH-20250908-154710.jpg)
20. Click Save to save the message and then exit out of the Designer. 
21. End of Lab.