cs-icon.svg

Navigating Your Website in Visual Builder

Visual Builder is a powerful tool that allows you to create and manage your website's content and structure.

Note: To use the Visual Builder feature, make sure the Live Preview option is enabled in your stack settings. For detailed instructions, refer to our Set Up Visual Builder for Your Website guide.

Visual Builder transforms your website into an interactive canvas. To effortlessly navigate through your website, log in to your Contentstack account, and perform the following steps:

  1. Go to your stack where you want to preview and manage your website.
  2. In the left panel, click the Visual Experience icon. By default you would see the Timeline preview. Click Builder from the pill at the bottom to switch to Visual Builder.Navigating Your Website in Visual Builder_1.png
  3. The Visual Builder interface is divided into several key areas:
    1. URL Bar: Click the dropdown to find all pages of your website.
    2. Canvas: The central area where you can preview and visually edit your web pages.
    3. Toolbar: On hovering over the different components of your website, a toolbar appears providing options to move or comment.
    4. Right Panel: Find multiple tools that help you inspect and manage your website.
    5. Deploy: Shows a list of all updated entries, allowing you to save them as a view, update workflow details, or bulk publish.
    Navigating Your Website in Visual Builder_2.png

By mastering these navigation techniques, you can efficiently create and manage your website's content using Visual Builder.

Was this article helpful?
^