Edit the design of an AI-created website

After creating your site with the AI website builder, you can customize the design and layout using AI prompts. This guide will show you how to use AI to finalize your website design.

You can use the AI website builder for free to create a new site. Upgrade to a Premium or Business plan to launch the site publicly.

You can continue to update, edit, and add content to your website both with AI and by manually editing. To work on your site with AI:

1. Visit your Sites page.
2. Select your site and click the “My Home” button.
3. The next step depends on the site’s plan:
   • Free trial sites will arrive directly in the editor to resume editing.
   • Upgraded sites will arrive in the site’s dashboard, where you can navigate to Appearance → Editor and click on the homepage preview on the right to resume editing.
4. Enter your prompt in the sidebar:

To update your site’s color scheme using AI, follow these steps:

1. In the AI prompt box, type a prompt such as: “Change the colors” or “I want to change the entire site’s color scheme to pastels.”
2. You will be provided with color palettes to browse through. Click on a color to see how the update looks on your site.
3. Once you have selected your desired color scheme, click the Save button to save the change.

To manually choose a color scheme, navigate to Appearance → Editor → Styles → Colors, and select a new color palette (not available on the free trial).

If you’re happy with the site’s overall color scheme, but you want to change the color of a specific section or element, take the following steps:

1. Click the element (like text or a button) or specific section you want to recolor.
2. Use the AI prompt box to change the color. You can describe the color or ask for a specific color code:
   “Change this button to bright yellow”
   “Make the header background the color #FFB514”
3. Click the Save button to save the color change or the backwards arrow icon in the top navigation to undo the change.

You can add new sections to a page layout:

1. Click on an existing section where you’d like to add the new section.
2. In the AI prompt box, type a prompt such as:
   “Add a testimonials section below About.”
   “Insert a pricing table section on the homepage.”
3. Review the new section. The AI may provide you with multiple layouts to cycle through using the left and right arrow buttons.

Change your site’s layout by moving sections:

1. Click the section you wish to move.
2. In the AI prompt box, type a prompt such as:
   “Move the Services section above Testimonials.”
   “Move the Contact section to the top.”

If extra fine-tuning is needed, you can manually select a section using the List View. A toolbar will appear with the selected section with up and down arrows to move the section to a new position:

Delete unwanted sections or elements in just a few steps:

1. Click the section or element you wish to remove.
2. In the AI prompt box, type a prompt such as:
   “Remove the FAQ section from the homepage.”
   “Delete the extra gallery block in About.”
3. Click the Save button to save the change or the backwards arrow icon in the top navigation to undo the change.

You can also remove any blocks manually by selecting the block(s), clicking the ⋮ icon, and choosing the Delete option.

The possibilities are endless with AI website building. Here are more sample prompts of design-related changes you can ask the AI to do for you:

1. Change the color palette to use blues and grays.
2. Make all buttons rounded and blue.
3. Update the background color to white.
4. Switch the font to something more modern and sans-serif.
5. Use a bold, large heading font for all titles.
6. Add a hero section to the homepage.
7. Change the layout to a single column.
8. Reorganize the footer to show social links first.
9. Add a call-to-action section above the footer.
10. Change the menu style to a vertical sidebar.
11. Make the site logo larger in the header.
12. Add a testimonials section beneath the main content.
13. Use a grid layout for the gallery images.
14. Add a newsletter signup form to the bottom of the page.
15. Make the navigation bar sticky so it stays on top.
16. Add more white space between sections.
17. Center all headlines on every page.
18. Use a light background with dark text sitewide.
19. Add subtle drop shadows to images.
20. Increase the spacing between paragraphs.
21. Change the section order on the homepage.
22. Make team member images circular.
23. Use a colorful gradient for the page background.
24. Add icons to the services section.
25. Use soft pastel colors for the background.
26. Replace all headings with a handwritten-style font.
27. Add a divider between each section.
28. Use large, bold call-to-action buttons.
29. Make headings all caps.
30. Add an intro section at the top of each page.