Navigating Your Website in Visual Builder

Use Visual Builder to visually edit and manage your website’s structure and content in real time.

Note: To use Visual Builder, ensure that the Live Preview feature is enabled in your stack settings. For setup instructions, refer to the Set Up Visual Builder for Your Website guide.

To navigate through your website, log in to your Contentstack account, and perform the following steps:

1. Navigate to your stack and select Visual Experience.
2. Click Builder in the bottom pill menu.

   

3. The Visual Builder interface includes five key areas to help you navigate and manage your website efficiently:
   1. URL Bar: Displays a list of all available web pages. It helps you quickly understand the structure of your site and switch between pages for editing.
   2. Canvas: Serves as the main workspace where you can preview your site and make visual edits directly. It reflects real-time changes and simulates the live appearance of the page.
   3. Toolbar: Appears over page components and provides contextual tools to move elements, add comments, apply field modifiers, and view detailed field information such as the field name and its associated content type.
   4. Right Panel: Gives you access to the following tools:
      • Status to view the current entry’s state along with all linked or referenced entries on the page.
      • Form to perform inline editing with real-time preview and breadcrumb navigation.
      • Drafts to review and manage unsaved changes.
      • Discussions to collaborate through field-level feedback.
      • Widgets to add features like SEO optimization or translation.
      • Audiences to tailor content for specific user segments or regions.
      • Automate to automate workflows and trigger custom actions.
   5. Publish Panel:
      • Displays all entries updated during a session, helping you track changes and organize updates.
      • You can assign workflows, fix validation errors, and choose between quick publishing for fast deployment or advanced publishing for more control.

      

Triggering Interactions within the Canvas

To test interactive elements (e.g., dropdowns, sliders, modals) wrapped in data-cslp tags:

1. Hold Alt (Windows) or Option (macOS) while clicking the element in the canvas.
2. This action temporarily bypasses the builder’s editing mode and lets you interact with the element as it behaves on your live site.

For example, pressing Alt or Option while clicking a dropdown menu opens the menu instead of the editing toolbar.

These techniques help you efficiently manage and preview content within Visual Builder.