How to create aem content fragments ?

If you are new to aem content fragments, I request you please read this introduction to aem content fragments to get some idea, this article is going to cover how to create content fragments and variations

The content fragment is a re-usable asset so, which contains text elements and reference to other assets such as images, videos etc…  to create a content fragment I am going to open DAM folder, in Touch UI you can open it by going to http://localhost:4502/assets.html/content/dam

I am also going to create multiple variations one is desktop and another one is mobile, on selection of mobile variations the content of content fragment will display to mobile content

On top left corner, there is an create button using which you can create new Content Fragment (refer screenshot below)

content-fragments

 

 

 

 

 

 

 

 

 

 

 

 

Next, select simple fragment template here I am using OOTB template, but we can create our own custom template I will cover this in my next article, once we select “Simple Fragment” then click on next button, in the next window enter title and description of fragment

contentfragment

Once the content fragment is created then, you can edit it to author text, there are three options to author text such as rich text, plain text, and markdown, you can create variations by clicking on variations tab

In variations tab, click on “create variation” and enter title as “Mobile” and provide some description

Just author some text and click on tick icon to save content

contentfragmentone

Now, open any page and select parsys and add Content Fragment component ( refer screenshot below )

contentfragmentwo

Next, on left-hand side Assets drop-down select content fragments, the list of content fragments which are created will appear in bottom window, select any content fragment, drag and drop on the content fragment component

contentfragmenthree

Finally, the hello world demo fragment text appears on the page, you can choose different variations by selecting variation dropdown

contentfragmenfour

In the variations dropdown choose Mobile variation, then the “hello world mobile demo fragment” text should appear on the page ( refer screenshot below )

contentfragmenfive