Using The Editor
Website Viewer
Learn how to use Coframe’s website viewer, including the iframe, grid view, mobile view, and DOM inspector
Main View (Iframe)
The iframe displays your website for real-time editing and previewing.
Chrome Extension Requirement
Note: Ensure the Coframe Chrome Extension is installed to utilize the Editor fully.
Interacting with Elements
- Selecting Elements:
- Hover over an element to highlight it with a blue rectangle and see its type.
- Click to select the element, adding it to your In Scope list.
- Adding New Elements:
- Plus Buttons: Appear above and below hovered elements.
- Click to Insert a New Element, which you can customize via prompts or manual editing.
- Editing Elements:
- Pencil Icon: Click to open the element in the editing panel.
- Deselecting Elements:
- Click the element again to deselect.
- Click the X button on the top right corner to remove the element from scope.
Top Bar
The top bar provides navigation and various view options to enhance your editing experience.
Left Side
- Close Button: Click to exit the Editor and return to the main dashboard.
Right Side
- Grid View: Toggle to compare variants side by side in a grid layout.
- Page View: Switch back to the standard single-page view.
- Edit Mode: Enable or disable element selection and editing.
- DOM Inspector: Toggle the DOM tree view for precise element selection.
- Device Toggle: Switch device views and adjust scale (50% to 150%).
Grid View
The Grid View allows you to compare multiple variants side by side.
Mobile View
Switch to Mobile View to see how your website and variants look on mobile devices.
DOM Inspector
Use the DOM Inspector to navigate and select elements directly from the DOM tree for precise control.