Rendering of an Experience Fragment inside a Webpage?



Fundamentally Experience Fragments are consumable content which can be used "as-is" and "makes senses on its own".

Also detailed here Adobe Experience Manager Help | Understanding Content Fragments and Experience Fragments in AEM 


If an Experience Fragment lives within a site page, can it use it's own template/styles separate from what the main Page will be?

If an Experience Fragment need to have certain specific styles (like font size/color for title and text, image sizes on it) and if this Experience Fragment need to live on a page in AEM Sites, but if that Page is built using a different Template that as separate styles defined.. the Page/Template styles are over-writing the XF styles. We cannot see the specific styles applied to components in an XF but seeing that of the site.

The process we are doing that isn't working:

  1. Build an Editable Template (say Template-1) using styles (say Styles-A)
  2. Build a page (Page-1) using Template-1
  3. Build an Editable Template (Template-2) using styles (Styles-B)
    1. Add allowed Components. And also apply specific styles using the AEM OOTb Styles UI options.
  4. Build an Experience Fragment (XF-1) using Template (Template-2 - internally uses Styles-B)
    1. While authoring the content using the allowed components, the specific styes are not being applied.
  5. On Page-1, drag an "Experience Fragment Component" and use XF-1 as the source
    1. XF shows up with Styles of the main page Styles-A instead of Styles-B

We have issues at 4.1 and 5.1.  How do we solve this?

Accepted Solutions (0)

Answers (0)