Skip to content

visualEdits.mdx

Latest commit

 

History

History
40 lines (28 loc) · 1.56 KB

visualEdits.mdx

File metadata and controls

40 lines (28 loc) · 1.56 KB
title Visual Edits
description Make specific design changes directly in the interface.

Niles' Visual Edits allows you to select elements on the page and either edit them instantly, such as updating text or colors, remove them completely, or use prompts to adjust functionality and layout. This tool is useful for making quick, targeted updates without needing to modify the code manually or use the AI.

Using Visual Edits does not deduct credits.

visualedit.png

When to Use Visual Edits

Use Visual Edits when you want to:

  • Change static text content on your site
  • Update fonts, font sizes, or styles
  • Modify colors of text, buttons or other elements
  • Select a specific element and use prompting to modify its visual appearance or functionality. Please note that this prompt will deduct credits as an ordinary prompt.

How to Access and Use Visual Edits

  1. Locate Visual Edits

    You’ll find the "Design" tab on the top left section, right next to the theme button

  2. Click the "Enable Visual Edit" button to activate Visual Edits

  3. Select the Element

    Hover over the element you want to change; headlines, buttons, background sections, etc.
    Then click to select it.

  4. Edit via code or Direct Input

    After selecting, you can:

    • change the CSS directly from the code.
    • Or use the inline editing options to directly change text or select new fonts and colors.

  5. Apply and Review

    Once your change is made, click Save and Niles will instantly update the live preview.