Introduction to QuickEdit and Live Preview

The QuickEdit tool allows content authors to easily inspect the component types used throughout the site and edit specific component types directly, without navigating through page hierarchies.

1. To enable the QuickEdit tool, simply tap the tilde icon on the keyboard three times while on the desired site. The QuickEdit tool appears automatically on the right. Click the Octana icon.

2. Under Preview, content authors can effortlessly preview both draft and published content within the QuickEdit interface.

Clicking Published toggles the preview to display draft content.

The preview shifts to Draft Content. This showcases content that hasn't been published and is currently in draft status.

3. QuickEdit tool also allows content authors to modify the App layout, including navigation and footer elements and also the page that contains all the components and content.

Furthermore, the Sitemap can be access from here providing a detailed overview of the website structure.

The UI Kit, which serves as a guide for branding and typography, can also be accessed from this tool.

Enable Inspect by sliding the toggle button to the right.

The Inspect feature allows users to easily inspect the types of components used throughout the site.

4. Edit in Live Preview allows content authors to make edits while simultaneously viewing a live preview on the right, providing real-time feedback on the changes made.

To enable Edit in Live Preview, slide the toggle button to the right. Hover over and click on the content you wish to edit. This action will highlight the content in red, and an edit link will appear.

Click on the Edit option to launch the component editor.

5. Update the contents and see the change real time. Observe how the changes in the text are automatically reflected in the live preview.

6. The Live Preview feature also enables content authors to view the content according to different breakpoints.

Breakpoints are utilized to adjust the styling of a page according to the screen width of the device it is viewed on. XS and SM represents mobile device and tablets, while MD to XL are laptops and other larger screens.

Select SM to see how the content displays on smaller screens.

7. In Live Preview, the inspect mode is also utilized, allowing you to navigate through other components that you wish to edit.

Hover over and click on the content you wish to edit.

This feature guides you directly to the component you want to edit, eliminating the need to navigate through pages.