---
title: Email Designer
slug: columbia-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 Archbee 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://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/ScreenShot2022-08-19at10.57.06AM.png" size="50" isUploading="false" showCaption="false"}
2. Enter a Label and Description for the message.
3. Choose **Transactional **for Category and **MultiChannelTransactional **for Email Surfaces. 


   ::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/ScreenShot2022-08-19at11.55.20AM.png" size="50" isUploading="false" showCaption="false"}
4. Click on Edit Content


   ::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/ScreenShot2022-08-19at11.09.00AM.png" size="50" isUploading="false" showCaption="false"}

## Define a Subject Line

1. Enter a Subject Line. 


   ::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/image210.png" size="50" isUploading="false" showCaption="false"}
2. Click on the Personalization icon to add personalized data available for customer record. 


   ::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/ScreenShot2022-08-19at11.11.48AM.png" size="50" isUploading="false" showCaption="false"}
3. 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.


   ::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/ScreenShot2022-08-19at11.16.28AM.png" size="50" isUploading="false" showCaption="false"}


4. You subject line should read something like: `{{profile.person.name.firstName}}, check our new summer products!`

::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/ScreenShot2022-08-19at11.17.26AM.png" size="50" isUploading="false" showCaption="false"}

## Design Email

1. Click Email Designer


   ::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/image287.png" size="50" isUploading="false" showCaption="false"}
2. Select “Design from Scratch”


   ::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/image222.png" size="50" isUploading="false" 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" showCaption="false"}
4. Select Content Components


   ::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/image188.png" size="50" isUploading="false" 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 an Offer Decision 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" showCaption="false"}
14. Add a button on 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 our new Radiant Tee.
18. Click on the Offer Decision component. Then choose Email-Image as Placement type


    ::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/ScreenShot2022-08-19at12.19.35PM.png" size="50" isUploading="false" showCaption="false"}
19. Choose the desired offer from the Offers Library. Click Add.


    ::Image[]{src="https://adbecdn.blob.core.windows.net/labs/archbee/gitbookAjoBase/ScreenShot2022-08-19at12.19.46PM.png" size="50" isUploading="false" showCaption="false"}
20. Next, click on the button at the bottom of the email, change the text to "unsubscribe", then select the link type as OneClick Opt-out.
21. Click Save to save the message and then exit out of the Designer.