AI-Assisted Editing

Rollout provides AI-assisted editing capabilities that allow you to modify your website by describing the changes you want to make.

Using AI Edit Mode

1. Select an element on your page that you want to modify
2. Use the AI Edit panel on the right sidebar
3. Type your instructions in plain language
4. Click "Submit" to apply the changes

Example AI Edit Commands

• "Change this heading to 'Welcome to Our Services'"
• "Make this section background light blue"
• "Add a contact form with fields for name, email, and message"
• "Replace this image with a modern office setting"

Tips for Effective AI Editing

• Be specific about what you want to change
• Reference elements by their visible content or position
• Break down complex changes into smaller, specific requests
• Review changes and refine as needed

Replacing Images

To replace an existing image with a new one:

1. Click on the "Edit" button for your project
2. Select the image you want to replace
3. In the AI Edit section, click the "Attach Image" button
4. Upload your new image
5. Type "Replace the existing image with the newly provided one" in the AI Edit field
6. Click "Submit"

Manual Editing

In addition to AI-assisted editing, Rollout provides traditional editing tools:

1. Select an element: Click on any element on your page
2. Use the sidebar controls: Modify properties like:
   • Font size, family, and style
   • Colors and backgrounds
   • Margins and padding
   • Alignment and positioning
   • Width and height

Code Editing (Advanced Plans)

For more advanced users, direct code editing is available:

1. Open your project for editing
2. Click on the "Code" button in the top navigation
3. Edit the HTML, CSS, or JavaScript directly
4. Save your changes

Creating Multi-Page Websites

To add new pages to your project:

1. Go to your project's "Settings" page
2. Find the "Create and manage pages for your project" section
3. Click "Add New Page"
4. Enter the page details and generate content

Adding Custom Elements

Navigation Menus

To create or edit a navigation menu:

1. Go to project Settings
2. Find the navigation menu settings
3. Add or edit menu items and link them to your pages

Contact Forms

Rollout generates forms that can be customized:

1. Select the form element
2. Use AI Edit to modify fields or add new ones
3. For form functionality, you'll need to:
   • Connect to an email service provider through Scripts
   • Use a third-party form service integration
   • Implement API integrations for form handling

Troubleshooting Common Editing Issues

Sections Not Updating

If elements become "frozen" or unresponsive to edit commands:

1. Try the "Undo" button to revert to a previous state
2. Use the "Discard all changes" option if available
3. Try selecting a parent container and modifying the entire section
4. In extreme cases, create a new section and replace the problematic one

Missing UI Elements

If navigation or menu elements show as "[System: Header Navigation Menu] Customize header":

1. Go to project Settings
2. Check that all navigation menu items are properly configured
3. Save the menu settings again to refresh

Image Upload Issues

If you're having trouble uploading or replacing images:

1. Ensure your image is in a supported format (JPG, PNG, SVG)
2. Check that the file size is reasonable (under 5MB recommended)
3. Try selecting the container that holds the image first
4. Use AI Edit with "Replace the image in this section with..." command