Submit Feedback
Experiences

Creating and Managing Element Variations

Beta Feature Liferay DXP 2026.Q3+

An element variation changes one element of a content page for a specific audience, instead of duplicating the whole page into a separate experience. Variations can replace the element’s inner HTML, run JavaScript against the element, or hide the element. Variations are applied in the browser, on top of the experience Liferay DXP renders for the visitor.

Note

Replacing an element’s inner HTML or running JavaScript against it requires custom markup or code. Hiding the element does not.

Prerequisites

Using element variations has these requirements:

A variation can target only an editable fragment element on a content page. Elements that carry no editable ID, including widgets and containers, do not appear in the Page Element picker.

Creating an Element Variation

  1. Open the Site Menu (Site Menu) and go to Site Builder → Pages.

  2. Click Actions for a content page and select Edit.

  3. In the page editor toolbar, click Create Variations next to the experience selector.

    The Create Variations control appears as an icon beside the experience selector in the page editor toolbar.

    The element variations editor opens, with a sidebar on the left and a preview of the page on the right.

  4. Use the Experience selector at the top of the sidebar to choose the experience the variation belongs to.

  5. Click New.

  6. Enter a name for the variation.

  7. Select an element in the Page Element picker.

    Each option is labeled with the fragment name and the ID of the editable element inside it, such as Banner (title). Hovering over an option highlights that element in the preview.

    The Page Element picker lists each editable element by fragment name and editable ID, and the hovered option's element is outlined in the preview.

    When the element you want is missing from the list, it most likely does not have the data-lfr-editable-id attribute. See Fragment Specific Tags and Attributes Reference for more information on making fragment elements editable.

  8. Select one or more audiences in the Audience field.

    An audience already used by another variation of the same page element does not appear.

  9. (Optional) Toggle Hide Page Element to hide it from the set audiences.

    Tip

    The preview automatically updates as you make edits, so you can see the result of your changes.

  10. (Optional) Enter custom markup into the HTML field.

    The markup replaces the element’s inner HTML.

  11. (Optional) Enter custom code in the JavaScript field to run it against the element.

    The code runs after the HTML replacement and can use a variable named element, which holds the target element.

    Important

    Once the code has run, its effects stay applied to the preview even as you keep editing. Click Reload to load the preview again and run the current code from a clean page.

  12. Click Save.

    Saving stores the variation on the page’s draft.

  13. Publish the page.

Visitors see element variations only after the page is published. Publishing matches each variation to the experience it belongs to. Because detection runs in the browser after the page loads, visitors may briefly see the default content before a variation is applied.

Managing Existing Variations

The sidebar lists the variations of the selected experience, grouped under the page element each one targets. Every entry shows its name, its audiences, and a label for each part it defines: HTML, JavaScript, or Hide Element. A variation that is turned off also shows a Disabled label.