---
description: "Create Dalton experiments using AI suggestions, prompts, or manual edits directly in the visual editor — no code required."
---

# Creating Experiments

Create experiments using AI suggestions, prompts, or manual edits.

## Dalton Suggestions

When your page is scanned, Dalton proposes new high-impact tests based on CRO best practices. You review each proposal and decide which ones to act on — nothing is selected or launched automatically. Accept a proposal as-is to launch it, or refine it first with a prompt.

## Selecting Elements

The editor is interactive: click any element on your page to select it. The selected element is highlighted, and Dalton's AI receives it as context — so every prompt and manual edit is scoped to exactly what you picked.

## Prompting

With an element selected, describe the change you want and Dalton builds the experiment for you:

- **Create a new experiment** — Click an element and tell Dalton what to change. E.g. 'Add social proof underneath this element.'
- **Iterate on an existing experiment** — Prompt again to adjust its style and content.

Because the AI already sees the element you selected, prompts can stay short — you don't need to describe where the change should go.

![Prompting in the Dalton editor](/prompting.png)

For detailed guidance on writing effective prompts, see [Prompting Best Practices](/editor/prompting-best-practices).

## Manual Creation

Prefer to build the change yourself? Click an element and choose manual creation. A modal opens where you define the variant by hand instead of prompting — useful when you know exactly what you want.

## Multi-Page Experiments

Want to run the same experiment across all your product pages, category pages, or blog posts? See [Multi-Page Experiments](/advanced/multi-page-experiments) for how to set up URL wildcards and avoid common pitfalls.

## What You Can Test

| Element Type | Can Test? | Notes |
|-------------|-----------|-------|
| Headlines & text | Yes | Any text element |
| CTAs & buttons | Yes | Copy, color, size |
| Section order | Yes | Move elements up/down |
| New elements | Yes | Banners, badges, social proof |
| Layout & spacing | Yes | Via prompts |
| Images & videos | No | Use [URL Split Tests](/advanced/url-split-tests) instead |
| Navigation menus | No | Requires backend changes |
| Dynamic content | No | Prices, inventory, etc. |

## Mobile & Desktop View

Preview and edit your experiments on both mobile and desktop directly in the editor.

<script setup>
import { ref } from 'vue'
const activeDevice = ref('mobile')
</script>

<p style="margin-bottom: 0.3rem;">Toggle here between desktop and mobile</p>
<div class="device-toggle-wrap" style="margin-top: 0;">
  <button :class="['device-btn', activeDevice === 'mobile' ? 'active' : '']" @click="activeDevice = 'mobile'">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><circle cx="12" cy="18" r="0.5"/></svg>
    Mobile
  </button>
  <button :class="['device-btn', activeDevice === 'desktop' ? 'active' : '']" @click="activeDevice = 'desktop'">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
    Desktop
  </button>
</div>

<div v-show="activeDevice === 'desktop'" class="device-preview-card">
  <img src="/editor-desktop.png" alt="Dalton editor - Desktop view" />
</div>

<div v-show="activeDevice === 'mobile'" class="device-preview-card">
  <img src="/editor-mobile.png" alt="Dalton editor - Mobile view" />
</div>

<style>
.device-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 1.5rem 0 1rem;
}

.device-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: var(--vp-c-text-3);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}

.device-btn svg {
  flex-shrink: 0;
}

.device-btn:hover {
  color: var(--vp-c-text-1);
}

.device-btn.active {
  background: #4200fd;
  color: #fff;
  border-radius: 20px;
}

.device-preview-card {
  border: 1px solid var(--vp-c-divider);
  border-radius: 20px;
  overflow: hidden;
  background: var(--vp-c-bg-soft);
  margin: 1rem 0 2rem;
}

.device-preview-card img {
  width: 100%;
  display: block;
}
</style>
