feat: add show measurements docs

Author: devvaannsh

docs/07-Pro Features/01-live-preview-edit.md

@@ -195,3 +195,26 @@ The dialog includes:
 To change the saved folder later, click the **Folder Selection** button *(folder icon)* in the Image Gallery header.
 
 ---
+
+## Show Measurements
+
+The **Show Measurements** feature displays ruler lines extending from the edges of a selected element to the edges of the Live Preview document, with labels showing exact pixel positions. This helps you position elements more accurately.
+
+By default, the labels appear at the top for the vertical axis and on the left for the horizontal axis. If there is not enough space, they are displayed at the bottom for the vertical axis and on the right for the horizontal axis.
+
+<!-- TODO: add image showing measurements feature -->
+
+> Ruler lines appear in blue for editable elements and gray for non-editable (dynamically created) elements.
+
+### Enabling Measurements
+
+To enable measurements, click the **mode selector dropdown** in the Live Preview toolbar and select **Show Measurements**. By default, this option is unchecked.
+
+<!-- TODO: add image showing how to enable measurements -->
+
+Alternatively, you can enable measurements from the **More Options** menu *(three-dots icon)* in the Tool Box. Select **Show Measurements** to toggle it on or off.
+
+You can also change this setting by updating the `livePreviewShowMeasurements` preference in the preferences file. Set it to `true` or `false` (default). See [Editing Preferences](../editing-text#editing-preferences) to learn how to edit the preferences file.
+
+---
+