Editor
      Back to home
      1. Knowledge Base
      2. Editor

      Using the Nyla Editor

      Edit your site without touching code

      In the Editor you can visually edit your site without writing any code. The Editor interface consists of three primary areas:
      1. Left Panel
      2. Status Bar
      3. Preview

      Left Panel

      The Left Panel is where you will find most of the settings of your website. The Left Panel will change depending on your context and actions as you navigate through the Editor. There are a few major panels that you will see often:
      1. Sections
      2. Content (The content block)
      3. Design
      4. Content item settings
       
      Left bar.png

      Status Bar

      The Status Bar provides another set of view settings and useful tools to save, view, and add your page or styles to the Publish queue. Starting from the left-hand side, moving to the right, you have the following tools:

      Name and quick actions

      Shows you what you are currently editing (Page, Design Token, App etc.) Below you can see the state and quick actions.
      Status bar.png

      Breakpoints and In-Context Toggles

      The left toggle changes between the desktop and mobile breakpoints (See responsive design in Nyla) and the right changes between showing outlines or the preview of your site.
      Breakpoint and in-context.png

      Preview and Publish actions, Settings

      The right side of the status bar gives you access to the next action in the publish flow, a quick link to preview your site, and if applicable, access to the settings of the item you are currently editing.
      Publish actions.png

      Preview

      The preview is the main area that you see your website. Inside the Preview, you see the draft versions of your Pages, Templates and Design Tokens.
      You can share the Preview by clicking on the Preview button in the top right of the Status Bar.