You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/07-Pro Features/02-edit-mode-live-preview.md
+16-23Lines changed: 16 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,16 +9,17 @@ import VideoPlayer from '@site/src/components/Video/player';
9
9
[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
10
10
:::
11
11
12
-
**Edit Mode** lets you modify your page directly in the Live Preview. You can edit text, change element tags, update classes and IDs, insert new elements, rearrange them with drag and drop, swap images, edit links, and much more.
12
+
**Edit Mode** lets you modify your page directly in the Live Preview. You can edit text, insert new elements, rearrange them with drag and drop, swap images, edit links, and much more.
13
13
**Phoenix Code** updates your source code automatically as you make changes.
@@ -28,7 +29,7 @@ Alternatively, you can switch to Edit Mode by updating the `livePreviewMode` set
28
29
29
30
When you click an element in the Live Preview, a **Control Box** appears near it. This floating panel shows you what the element is and gives you tools to edit it.
30
31
31
-
<!-- Add an image here showing the Control Box with the info section and tools section visible -->
> The Control Box is shown only for editable elements. It is not shown for non-editable elements that are dynamically created by JavaScript.
34
35
@@ -40,21 +41,23 @@ The left side of the Control Box displays information about the selected element
40
41
-**Dimensions**: The element’s size in pixels (width × height)
41
42
-**CSS classes**: The element’s classes, shown with a `.` prefix. If the element has more than three classes, only the first three are shown, followed by a “+N more” indicator
42
43
43
-
<!-- Add an image here showing the info section of the Control Box with tag name, ID, dimensions, and classes -->
Clicking on the info section opens the [Element Properties](#edit-element-properties) editor, where you can edit the element’s tag name, classes, and ID.
46
47
47
48
### Select Parent
48
49
49
50
The **Select Parent** button *(up-arrow icon)* appears next to the info section. Clicking it selects the parent of the currently selected element.
> This button appears only when a valid parent exists. It is not shown when the parent is `body`, `html`, or a JavaScript-rendered element.
52
55
53
56
### Tools
54
57
55
58
The right side of the Control Box displays a set of tools you can use to modify the selected element. The available tools depend on the element type. Some buttons are shown for all elements, while others appear only for specific element types.
56
59
57
-
<!-- Add an image here showing the tools section of the Control Box -->
-**Insert Element***(plus icon)*: Opens a panel where you can insert a new HTML element before, after, or inside the selected element.
60
63
*This option is available for all elements.*
@@ -86,7 +89,7 @@ The right side of the Control Box displays a set of tools you can use to modify
86
89
87
90
The **Hover Box** is a small tooltip that appears when you hover over an element in Edit Mode. It shows an icon and a label that describe the element type (for example, “Image”, “Button”, “Container”, “Paragraph”).
88
91
89
-
<!-- Add an image here showing the Hover Box tooltip on an element -->
92
+
![Hover Box](./images/hover-box.png"Hover Box")
90
93
91
94
The Hover Box helps you quickly identify elements as you move your cursor over the page, without needing to click on them.
92
95
@@ -98,15 +101,7 @@ By default, in Edit Mode, hovering over elements in the Live Preview highlights
98
101
99
102
To toggle this setting, click the **chevron icon** next to the **pen icon** in the Live Preview toolbar and unselect **Inspect Element on Hover**. By default, this option remains checked.
100
103
101
-
<!-- Add an image here showing the Inspect Element on Hover option in the mode selector dropdown -->
102
-
103
-
When **Inspect Element on Hover** is checked (default):
104
-
- Hovering over elements shows highlights and the Hover Box
105
-
- Clicking an element selects it and displays the Control Box
106
-
107
-
When **Inspect Element on Hover** is unchecked:
108
-
- Hovering over elements has no effect
109
-
- Clicking an element shows highlights and the Control Box
104
+
![Inspect Element on Hover](./images/inspect-element-hover.png"Inspect Element on Hover option")
110
105
111
106
Alternatively, you can change this setting by updating the `livePreviewInspectElement` preference in the preferences file. Set it to `"hover"` (default) or `"click"`.
112
107
See [Editing Preferences](../editing-text#editing-preferences) to learn how to edit the preferences file.
@@ -117,7 +112,7 @@ The **Element Properties** panel lets you edit an element's tag name, ID, classe
117
112
118
113
To open the panel, click on the **info section** (the left side showing the tag name, ID, and dimensions) of the [Control Box](#control-box).
119
114
120
-
<!-- Add an image here showing the Element Properties panel with the tag, ID, classes, and attributes sections -->
-**Classes**: Existing classes are shown as chips with a **×** button to remove them. Click **+** to add new classes. You can type multiple class names separated by spaces.
127
122
-**Attributes**: All other HTML attributes are shown as editable name-value pairs. Click **+** to add a new attribute, or **×** to remove one.
128
123
129
-
<!-- Add an image here showing the classes section with a few class chips and the add class input -->
130
-
131
124
To undo all changes made in the panel, click the **Reset** button in the panel header. This reverts the element to the state it was in when you first opened the panel.
132
125
133
126
## Insert Element
@@ -136,7 +129,7 @@ The **Insert Element** panel lets you add new HTML elements to your page directl
136
129
137
130
To open the panel, click the **Insert Element** button *(plus icon)* in the [Control Box](#control-box).
138
131
139
-
<!-- Add an image here showing the Insert Element panel with the position bar, search, and element grid -->
132
+
![Insert Element panel](./images/insert-element.png"Insert Element panel")
140
133
141
134
### Choosing a Position
142
135
@@ -155,7 +148,7 @@ The panel shows a grid of commonly used HTML elements like Paragraph, Heading, L
155
148
156
149
Use the **search bar** at the top to filter elements by name or tag. If no matching element exists, you can type any valid HTML tag name and click **Create <tag>** to insert a custom element.
157
150
158
-
<!-- Add an image here showing the search bar with results and the "Create" custom element option -->
Select the text you want to format and click a formatting button, or use the keyboard shortcut. If no text is selected, the formatting is applied to the entire element. Clicking a format that is already applied removes it.
179
172
@@ -190,7 +183,7 @@ Click the **More** button *(three-dots icon)* on the right side of the toolbar t
190
183
-**Superscript**: `<sup>` tag
191
184
-**Code**: `<code>` tag
192
185
193
-
<!-- Add an image here showing the More formatting dropdown with Strikethrough, Subscript, Superscript, and Code options-->
0 commit comments