Page Transformations Experience

Product Guides Experiences and experiments
1

Page Transformations is an experience type that lets you modify any element on your pages—CTAs, headlines, layouts, colors—and target those changes to specific audience segments. No code required.

Page Transformations Experience
Page Transformations Experience1440×900 143 KB

Page Transformations combines two capabilities: experimentation (test variations to find what works) and personalization (deliver tailored experiences to the right audience). Select an element, apply a transformation, define who sees it, and measure what drives results.

Use cases

Experimentation

Test variations on a portion of your traffic to find what converts:

  • CTA optimization: Test button colors, text, size, or position. Compare “Subscribe Now” vs. “Get Started Free”. Small copy changes often yield 10-30% conversion lifts.

  • Visual hierarchy testing: Reposition elements to test what users see first. Move subscription CTAs above the fold for half your audience and measure the impact.

  • Style and color variations: Test color psychology with controlled experiments. Red vs. green buttons. Bold vs. subtle treatments.

Personalization

Deliver tailored experiences to specific audience segments:

  • Returning visitor experiences: Show different CTAs to first-time visitors vs. returning readers. New visitors see “Start your free trial” while loyal readers see “Upgrade to Premium.”

  • Geographic personalization: Display region-specific promotions or content. Show localized offers to users in specific markets without creating separate pages.

  • Behavioral targeting: Customize experiences based on user behavior. Readers who’ve visited pricing pages see streamlined subscription CTAs.

  • Promotional campaigns: Inject targeted banners for specific segments. Show seasonal offers to high-intent users without cluttering the experience for everyone.

How to select an element

In the ExperienceManager editor, you can select elements in two ways:

  1. Point and click: Enter a URL in the preview panel, then click the locator icon and click directly on any element in the preview. The element highlights and appears in the left panel. Use the Generate button to get AI assistance for creating the CSS selector.

Point and click
Point and click1920×1200 91.8 KB

  1. CSS selector: Enter a CSS selector (like .nav-next or #header) in the “Enter a CSS selector or inspect in preview” field and click Add.

The breadcrumb trail at the top of the preview (e.g., body > main > div.content) shows your position in the page hierarchy. You can use it to select parent elements.

The number badge next to each element (e.g., “.nav-next 5”) indicates how many instances match that selector across the page.

Available transformations

Once you select an element, expand it to reveal options. Click + Add transformation to see all available types, organized by category.

Class transformations

Add class

Add a style class to the element without removing existing ones. Enter the class name (e.g., .highlight).

Remove class

Remove a style class from the element. Select the class to remove from the dropdown.

Swap class

Replace one style class with another. Select the Source class to remove, then enter the Target class to add.

Add style

Apply inline CSS styles directly to the element. Enter style declarations (e.g., color: red; font-size: 18px;).

HTML transformations

Insert HTML before

Add content immediately before the selected element. Write or paste your code in the editor.

Insert HTML inside

Add content within the selected element. Write or paste your code in the editor.

Insert HTML after

Add content immediately after the selected element. Write or paste your code in the editor.

Remove HTML

Remove the selected element from the page entirely.

Reparent HTML

Move the selected element to a different location in the page structure. Specify the new parent element.

Replace content

Replace the inner content of an element with new text or HTML. Enter the replacement content in the field.

Set HTML attribute

Add or modify an attribute on the element. Enter the attribute name and value (e.g., href, data-tracking).

Important: HTML transformations execute in the visitor’s browser. Test thoroughly to ensure changes don’t break page functionality or layout.

Combining transformations

You can stack multiple transformations on a single element. They apply in the order listed.

Example workflow:

  1. Select .cta-button
  2. Add class: .variant-a
  3. Replace content: “Subscribe Now”
  4. Add style: background-color: #FF6B00;

Click the - icon next to any transformation to remove it or the trash-icon to delete all the transformation of a selector

1 Like