Merge pull request #532 from amplitude/DOC-476

DOC-476 'move' feature

content/collections/web_experiment/en/set-up-a-web-experiment.md

@@ -2,8 +2,8 @@
 id: b8db5ecf-b7b0-432d-b1f3-19ae70d13291
 blueprint: web_experiment
 title: 'Set up a web experiment'
-updated_by: 5817a4fa-a771-417a-aa94-a0b1e7f55eae
-updated_at: 1729195945
+updated_by: 0c3a318b-936a-4cbd-8fdf-771a90c297f0
+updated_at: 1740522217
 this_article_will_help_you:
   - 'Understand the difference between a Web Experiment and a feature experiment'
   - 'Build a Web Experiment using the Visual Editor'
@@ -83,21 +83,43 @@ When you’re making modifications to your site in the Visual Editor, your actua
 
 When you click on an element, its editing panel opens. This is where you make changes to that element. On apply, these changes are then added to the current variant.
 
-![web-exp-5.png](/docs/output/img/workflow/web-exp-5.png)
+![web-exp-5.png](/docs/output/img/workflow/viz-editor.png)
+
+### Selector
 
 At the top is the element’s **selector**. The selector is a unique identifier for the selected element on the current page. This is grayed out by default, but you can edit it if you need to. You may need to update the selector if you're running the experiment on multiple pages, as the selector that's generated by default is only unique for the current page. Alternatively, you could edit the selector to select and edit multiple elements.
 
+### Display and visibility
+
 Below the selector are the **display** and **visibility** settings. These specify how the element displays on the page. Setting *Visibility* to `Hidden` hides the element from view, but the element remains in place; the space it takes up on the page doesn’t change. Setting *Display* to `None` effectively removes the element from the page entirely.
 
+### Text
+
 The **text** field stores the element’s text, if any. Edit it directly in the field. You can also change the color and font size of the element’s text. You may use inline HTML tags in the text area to style plain text.
 
 If you select an element **without** text, the field notes that the element contains inner HTML elements, and lets you edit that, if needed. Click *Edit Raw* to do so.
 
-Finally, change the element’s **background** color, or replace the existing background with an image.
+### Background
+
+Change the element’s **background** color, or replace the existing background with an image.
+
+### Move
+
+Move the selected element up or down in the DOM tree to adjust its placement relative to its current node.
+
+{{partial:admonition type="warning" heading=""}}
+This control updates the underlying HTML of your page. It doesn't enable moving elements by a predefined amount using CSS.
+{{/partial:admonition}}
+
+Keep the following in mind as you move elements on the page:
+
+* If changes don't apply, ensure you chose the correct selector for the intended element.
+* Ensure that CSS styles on your page don't conflict with the updated positioning.
+* Ensure that JavaScript doesn't reset your changes after you apply them.
+* Moving an element ignores invisible elements in your DOM.
+
 
-Click *Apply* to commit your changes to this variant.
 
-You can always re-open the Visual Editor later, by clicking *Open Visual Editor* in the *Variants* tab.
 
 ### Navigation mode
 

public/docs/output/img/workflow/.meta/viz-editor.png.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 31536
+last_modified: 1740522169
+width: 316
+height: 562
+mime_type: image/png
+duration: null