3.1.2 Create fragments to be used in your message
In this exercise, you鈥檒l configure 2 fragments, 1 for a reusable header and 1 for a reusable footer.
Login to 51黑料不打烊 Journey Optimizer by going to . Click Journey Optimizer.
You鈥檒l be redirected to the Home view in Journey Optimizer. First, make sure you鈥檙e using the correct sandbox. The sandbox to use is called --aepSandboxName--.
3.1.2.1 Create your Header fragment
In the left menu, click Fragments. A Fragment is a reusable component within Journey Optimizer, which avoids duplication and facilitates future changes that should impact all messages, such as changes to a header or footer in an email message.
Click Create fragment.
Enter the name --aepUserLdap-- - CitiSignal - Header and select the Type: Visual Fragment. Click Create.
You鈥檒l then see this. In the left menu, you鈥檒l find the structure components that you can use to define the structure of the email (rows and columns).
Drag and drop a 1:1 column from the menu into the canvas. This will be the placeholder for the logo image.
Next, you can use Content Components to add content inside these blocks. Drag and drop an Image component in the first cell on the first row. Click Browse.
You鈥檒l then see a popup opening, showing you your AEM Assets Media Library. Go to the folder citi-signal-images, click to select the image CitiSignal-Logo-White.png and click Select.
You鈥檒l then see this. Your image is white, and isn鈥檛 showing yet. You should now define a background color to make the image show correctly. Click Styles, then click the Background color box.
In the popup, change the Hex color code to #8821F4 and then change focus by clicking into the 100% field. You鈥檒l then see the new color applied to the image.
The image is also a bit to big right now. Let鈥檚 change the width by sliding the Width switcher to 40%.
Your header fragment is now ready. Click Save and then click the arrow to go back to the previous screen.
Your fragment needs to be published before it can be used. Click Publish.
After a couple of minutes, you鈥檒l see that you fragment鈥檚 status has changed to Live.
Next, you should create a new fragment for the footer of your email messages. Click Create fragment.
3.1.2.2 Create your Footer fragment
Click Create fragment.
Enter the name --aepUserLdap-- - CitiSignal - Footer and select the Type: Visual Fragment. Click Create.
You鈥檒l then see this. In the left menu, you鈥檒l find the structure components that you can use to define the structure of the email (rows and columns).
Drag and drop a 1:1 column from the menu into the canvas. This will be the placeholder for the footer content.
Next, you can use Content Components to add content inside these blocks. Drag and drop an HTML component in the first cell on the first row. Click the component to select it and then, click the </> icon to edit the HTML source code.
You鈥檒l then see this.
Copy the below HTML code fragment and paste it in the Edit HTML window in Journey Optimizer.
<!--[if mso]><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td style="text-align: center;" ><![endif]-->
<table style="width: auto; display: inline-block;">
<tbody>
<tr class="component-social-container">
<td style="padding: 5px">
<a style="text-decoration: none;" href="https://www.facebook.com" data-component-social-icon-id="facebook">
</a>
</td>
<td style="padding: 5px">
<a style="text-decoration: none;" href="https://x.com" data-component-social-icon-id="twitter">
</a>
</td>
<td style="padding: 5px">
<a style="text-decoration: none;" href="https://www.instagram.com" data-component-social-icon-id="instagram">
</a>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td></tr></table><![endif]-->
You鈥檒l then have this. On lines 7, 12 and 17 you now need to insert a image file, using the assets in your AEM Assets library.
Make sure that your cursor is located on line 7, and then click Assets in the left menu. Click Open asset selector to select your image.
Open the folder citi-signal-images and click to select the image Icon_Facebook.png. Click Select.
Make sure that your cursor is located on line 12, and then click Open asset selector to select your image.
Open the folder citi-signal-images and click to select the image Icon_X.png. Click Select.
Make sure that your cursor is located on line 17, and then click Open asset selector to select your image.
Open the folder citi-signal-images and click to select the image Icon_Instagram.png. Click Select.
You鈥檒l then see this. Click Save.
You鈥檒l then be back in the editor. Your icons aren鈥檛 visible yet because the background and the image files are all in white. To change the background color, go to Styles and click the Background color checkbox.
Change the Hex color code to #000000.
Change the alignment to be centered.
Let鈥檚 add some other parts to the footer. Drag and drop an Image component above the HTML component you just created. Click Browse.
Click to select the image file CitiSignal_Footer_Logo.png and click Select.
Go to Styles and click the Background color checkbox, let鈥檚 change it to black again. Change the Hex color code to #000000.
Change the width to 20% and verify that the alignment is set to be centered.
Next, drag and drop a Text component under the HTML component you created. Click Browse.
Copy and paste the below text by replacing the placeholder text.
1234 N. South Street, Anywhere, US 12345
Unsubscribe
漏2024 CitiSignal, Inc and its affiliates. All rights reserved.
Set the Text alignment to be centered.
Change the Font color to white, #FFFFFF.
Change the Background color to black, #000000.
Select the text Unsubscribe in the footer, and click the Link icon in the menu bar. Set the Type to External Opt-out/Unsubscription and set the url to https://aepdemo.net/unsubscribe.html (it鈥檚 not allowed to have a blank URL for the unsubscribe link).
You鈥檒l then have this. Your footer is now ready. Click Save and then click the arrow to go back to the previous page.
Click Publish to publish your footer so it can be used in an email.
After a couple of minutes, you鈥檒l see that the status of your footer has changed to Live.
You鈥檝e now finished this exercise.
Next Step: 3.1.3 Create your journey and email message