---
title: Content Authoring
slug: ajo-air-india/content-authoring
docTags: 
createdAt: 2025-05-26T03:15:40.858Z
---

### Assets

Click to open the Asset explorer under **Content Management&#x20;**&#x69;n the left hand navigation.  Here you can manage the assets in your Adobe Experience Manager instance.  &#x20;

Click on the **Air India** folder to see the assets available.  You can add new assets from your local machine if you want.&#x20;

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

Select an asset and click on **details**.   Here you can see information about the asset, including *smart tags, versions, comments and tasks*.  You can even edit the asset directly in the Journey Optimizer UI using Adobe Express. &#x20;



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



**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 message. &#x20;

**Fragments&#x20;**&#x63;an 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. &#x20;

### 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 . &#x20;

**Fragments&#x20;**&#x63;an 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. &#x20;

Create a new template by clicking on the **Create Template** button.&#x20;

![](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. &#x20;

![](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. &#x20;

Drag **1x** **1:2 column&#x20;**&#x73;tructures into your content, then add **4x 1:1 columns.&#x20;**

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

In the first component slot, drag across an **image&#x20;**&#x63;ontent block.  &#x20;

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

Click to **Browse&#x20;**&#x69;mages - this will open the asset explorer.   Add the *WKND Fly logo*, you'll find it in the **WKND Fly**  folder. &#x20;



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

Add another image component to the next component. &#x20;



![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/rExtbon-SDQNOkWPgBfYx_jakrbuxrahsahcnulr9sq-image.png)

This time we'll use AI to generate an image based on a Text prompt.   Select the image and click to **Generate and Select an image.**



![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/BpOY7n1cQuifhxEzbO6It_cg539os9po-7nege2klhq-image.png)

Change to the **Adobe Firefly** tab and in the **Image settings&#x20;**&#x63;hange the **aspect ratio** to banner size (height 250, width 700).  Update the other settings as desired.&#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/5aG5kYLZCB5HMfU-1tUle_image.png)

Add your **Text Prompt** and click to **Generate**



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

Review the variations and choose the one you prefer and click **Select**

Save the image into the **WKND Fly&#x20;**&#x66;older. &#x20;



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

After image is generated and saved. Drag across a **text&#x20;**&#x63;ontent block for the main content of the email. &#x20;

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.&#x20;



![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/UZgT1JYzjaQ-IWOlteTry_screenshot-2025-06-25-at-115254-am.png)

You can add any personalized greeting.  To include any profile attributes e.g. first name.

Click on the **personalization** menu to add the customers first name.&#x20;



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

Search for **First,&#x20;**&#x75;se the + to add the syntax for inserting the **First Name (Profile Attributes > Person > Full Name).**

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

Click **Save**

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

Now let's add a button for our call to action link.  Drag a **Button&#x20;**&#x63;omponent into the next slot.&#x20;



![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/E4xeXr5tqfALv4H2XwbVe_drag-and-drop-btn.gif)

You can now update the style of the button or leave it as default.&#x20;

Lastly, 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&#x20;**&#x61;nd the **Generic Footer&#x20;**&#x66;ragments to the top and bottom component slots. &#x20;



![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/CKweta2t63LA9eNUqrvxl_drag-fragments.gif)

Your template is now ready to use in your journeys and campaigns.

Click to **Save&#x20;**&#x79;our template.



