How to Edit a Section with Precision

Editing specific sections or elements of your website is easy and intuitive with Websito.io. You can update content quickly by either entering a new prompt or editing the underlying HTML directly — all inside a handy popup.

Here’s how to edit any section with precision:

🎯 Step 1: Hover to Highlight Sections

Move your mouse over the website preview in the builder. As you hover over different elements — such as headers, paragraphs, images, buttons, or sections — a clear outline appears around the element you’re about to edit.

✍️ Step 2: Click to Open the Edit Popup

Click the outlined section or element you want to change.

A popup window appears, showing editing options for that specific element.

🔄 Step 3: Edit Using Prompts or HTML

Inside the popup you have two options:

• Edit via Prompt:
  Enter a new natural language prompt describing how you want to change this section. For example:
  “Change the button text to ‘Start Now’.”

  

• Edit HTML Directly:
  Switch to the HTML tab to tweak the underlying code if you want full control over the element’s content or styling.

  

⚠️ Optional: Edit Using the AI Widget

You can also edit content using the AI widget in the corner. However, this method generally takes longer because it processes entire pages or sections rather than specific elements.

✅ Step 4: Save Changes

Once you’re happy with your edits, click Save.

Your changes will update instantly on the website preview.

💡 Tips for Precise Editing

• Use the hover outlines to make sure you’re selecting the right element.
• Use prompts for quick text or layout changes.
• Use the HTML editor if you want to add custom code or styles.
• Editing via the popup is faster and more precise than using the AI widget for individual sections.

Editing sections with precision helps you create exactly the website you envision — quickly, easily, and flexibly.

For more details on what you can ask Websito, visit our What Can I Ask Websito To Do? article.