How to Create Complete Websites with AI | Scoreapps

How to Create Complete Websites with AI

The Web Builder can generate a complete site (Home page and subpages) with AI or use predefined site templates.

The builder will set up your entire site, including custom pages, menu items, Theme Builder templates, and more.

This article will use the full generation of sites with Divi Quick Site AI to create a Website from scratch.

And to get an idea of potential, here's an example of a complete website created in less than a minute and with a single Prompt:


Complete generation of sites with AI

1. Go to the WordPress Desktop → Desktop

Divi Quick Sites Dashboard

2. Click the buttonGenerate a new site

Divi Quick Sites - Generate A New Site

3. In the sectionGenerate your site with AI, click on the buttonGenerate my website

Divi Quick Sites - Generate Your Site With AI

4. In the formTell us about your website, complete all the details about your site:

Divi Quick Sites - AI Prompts window

  • Name of site

  • Site motto

  • Tell Divi AI about your website: Here you can provide as many details as possible about your business. Divi AI will use this information to build the entire website. The name and motto of the site are also important in ensuring that Divi AI is as accurate as possible.

  • Ecommerce: Activate this option if you also want to include a store and all related pages, such as cart and payment.

  • Logo: Choose your business logo

  • Images: Choose the type of images you want Divi AI to use when generating the entire site:

    • Use stock images (faster): This option uses images from Unsplash.com. Although it speeds up the process, the accuracy of the images may not always be accurate.

    • Generate images with AI (slower): This will use Divi AI imaging. The process may be slower, but it is more precise.

    • Use placeholder images: The images used will be placeholders. You can change them later. This option is ideal if you already have different images that you want to use on your website.

  • 5. Customize fonts and colors: Use this drop-down section to specifically tell Divi AI which fonts and colors to use. If you want to let Divi AI choose the fonts and colors for your new website, make sure the optionLet AI chooseis enabled for all available options.

Divi Quick Sites - AI Customize Fonts and Colors

6. 6. Click the buttonGenerate and Publish My Website

Notes:

  • The whole process may take a few minutes, especially if you choose to use Divi AI for image generation.

  • The pages you have previously published will continue to exist and work exactly the same as before. The complete generation of sites with Divi AI will create new pages for you. If, for example, there are one or more pages with the same name, their names of "slug" will differentiate them.

  • The Theme Builder templates you previously created will remain available within the Theme Builder; however, old templates will be disabled.

Case Study: Build an AI-generated website for a burger restaurant called Burger Bliss

For this case study, we will build a complete website taking advantage of the power of Divi AI for a burger restaurant called Burger Bliss. Images will also be generated using Divi AI image generation.

To get started, fill out the formTell us about your websitewith business details:

  • Site name: Burger Bliss

  • Site motto: Your ultimate experience of burgers in the heart of the Bay Area

  • Tell Divi AI about your website:
    Burger Bliss is the main destination for burger lovers in the San Francisco Bay Area. Located in the vibrant heart of San Francisco, our venue is a culinary refuge where delicious flavours and quality ingredients come together to create the ultimate experience in burgers.

    At Burger Bliss, we believe in the art of preparing the perfect burger. Our menu features various gourmet burgers, each carefully designed to delight your palate. From classic meat burgers to innovative vegetarian and vegan options, we meet all dietary preferences and needs. Each burger is made from the freshest ingredients, of local origin, ensuring an experience from the farm to the table celebrating the rich culinary heritage of the Bay Area.

    Our cozy and modern atmosphere, combined with our commitment to exceptional customer service, makes Burger Bliss the perfect place for a casual lunch, family dinner or night meal. Whether you are local or visitor, you will find a warm welcome and a satisfactory meal in Burger Bliss.

  • Ecommerce: disabled

  • Logo: a JPEG, PNG or WEBP file

  • Images: for this case we will use AI-generated images

  • Customize fonts and colors: Let AI choose

Divi Quick Sites - AI prompts

Website ready

Once the entire construction process with AI is completed, you will receive a breakdown of the website pages and Theme Builder that Divi AI created:

Divi Quick Sites - Explore your website

Explore the new website generated by Divi AI

The resulting website is incredible. It contains excellent content and images, perfect for use as a starting point. Click here to see the final result.

What's next?

After the website is complete, you can make additional changes to all pages and design elements that Divi AI has created.

Edit pages

  1. Go to WordPress Desktop → Desktop → Desktop
  2. Under Site Pages, hover your cursor over the page you want to edit and click the pencil icon.

Divi Quick Site - Delete, Edit and Preview generated page

3. The respective page will open in a new browser tab with the Visual Builder active.

Divi - Edit an element with Visual Builder

Note: You can also access all your pages from WordPress Desktop → Pages → All pages.

WordPress - Edit pages

Edit templates from the Builder Theme

  1. Go to WordPress Desktop → Desktop → Desktop
  2. Under Divi Summary, click the Manage Templates link.

Divi - Access the AI Generated Theme builder templates

3. The Theme Builder Theme page will be uploaded, showing all the templates Divi AI created. From this page, you can choose which template you want to edit by clicking on the pencil icon.

Divi - Edit a Theme Builder Template

Customize the color palette

When you create your website using Quick Site together with Divi AI, Divi AI will set all colors as Global Colors.
  1. Open any of your pages with the Visual Builder.
  2. Edit any of the elements (section, rows, module).
  3. Choose a color option, such as background color or text color.
  4. Click the Global option.
Divi - Global colors

5. Click the gear icon.
Divi - Open the global color editor

6. 6. Click the pencil icon for the color you want to change.

Divi - Edit a global color

7. Choose a different color.

8. Confirm the change.

Divi - Confirm global color change

9. Click Finish Global Color Editing.

Divi - Finish editing a global colorAll modules that use the modified overall color will update all instances of that color.

Customize the element preset

Similar to global colors, Divi AI will create and use presets throughout the design.
  1. Edit any of the elements (section, row, module).
  2. Open the preset selection window.

Divi - Open the module Preset list

3. Click the pencil icon to edit the item preset.

Divi - Edit a module preset

4. Make the desired changes to the Design tab.

5. Click the green check mark button to save your changes.

6. 6. Confirm the changes.

Divi - Confirm Preset changes

Editing the preset of an element is another quick way to customize the design generated by Divi AI. Since each element shares a specific preset, editing any of these presets will apply to all modules on your website using that specific preset.

Frequent questions

  • Can I use the full generation of sites with Divi AI if I already have pages published on my website?

  • What about my previously published pages?

  • Can I use the full generation of sites with Divi AI if I already have Theme Builder templates created?

  • What about my previous Theme Builder templates?

Additional resources

  • How to use Divi AI: Everything you need to know

  • How to transform a Divi design using Divi AI

  • How to use Divi AI to automatically improve your texts

  • Building a home page with Divi AI from start to finish

  • Top tips for creating indications for images with Divi AI

  • How to write a blog post with Divi AI

  • Divi AI's new image editor



    • Popular Articles

    • How to Create an App for Restaurants (with or without Delivery)

      Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...

    • APPS: Radio

      The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...

    • APPS: Webhooks

      The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...

    • APPS: Audio & Music

      How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...

    • QR Promotions

      This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...

    • Related Articles

    • Divi AI

      Aprovecha el increíble poder de la inteligencia artificial mientras creas sitios web con Divi. <br> Nota: Divi AI está disponible a partir de la versión 4.22 de Divi. Mientras tengas la versión más reciente de Divi y un nombre de ...

    • Generating Sections with Divi AI

      Learn how to use Divi AI to create well-written content and visually appealing image sections, all driven by the power of Divi AI. < Generation of Sections with Divi AI The Divi AI Section Generation is part of Divi artificial ...

    • How to Use Divi AI Code

      Learn how to use Divi AI Code capabilities to generate clean and efficient snippets of code for various web elements. <br> Divi AI Codeis an innovative feature that leverages artificial intelligence to help you write, ...

    • Getting Started with Divi AI

      Divi AI es una función innovadora integrada en el tema Divi que utiliza inteligencia artificial para mejorar tu sitio web. Divi AI es perfecto para propietarios de sitios web, diseñadores y desarrolladores. Esta guía te brindará una comprensión ...

    • How to Use Divi AI Layouts

      Learn how to harness the power of Divi Layouts IA to create professional and visually appealing designs in minutes. <br> This article provides a step-by-step guide on how to use Divi Layouts IA to streamline and improve ...