Skip to main content
All CollectionsDiviGetting StartedInitial Site Setup
How to Build Your New Website with Divi Quick Sites
How to Build Your New Website with Divi Quick Sites

Learn how to use Divi Quick Sites, the ultimate tool for whipping up stunning websites in record time.

Updated over 3 months ago

Divi Quick Sites combines the power of AI with pre-made starter sites to give you the fastest and easiest way to launch a WordPress website. It is all powered by Divi, the most popular WordPress theme and visual page builder on the market.

Navigating to the WordPress Dashboard → Divi → Dashboard → Divi Qiuck Sites and clicking on the Generate A New Site button, you will be presented with two options:

  1. Use Pre-Made Starter Site: This option allows you to choose one of the Pre-made Starter Sites to lay the foundation of your website.

  2. Generate Your Site With AI: You can use this option to use Divi AI to build your website's structure (pages, Theme Builder templates, Header layout, Footer layout), write the content of each page, generate the entire site's design, and generate images, all based on your website's name, slogan, and description. Divi AI will take all that information into account and build the entire website for you.

Note: All Elegant Themes customers who have an active subscription have access to Divi AI for free up to 100 tokens, which can be used as follows:

  • Generating an Image with Divi AI will consume 1 token

  • Generating text-based content such as Text module text, Blurb module, title, etc., with Divi AI will consume 1 token;

  • Generating a Section with Divi AI will consume 5 tokens

  • Generating a Page layout using Divi AI will consume 10 Tokens

  • Generating an entire Website with Divi AI will consume 25 Tokens

Once the 100 tokens are exhausted, a Divi AI membership is required to continue using Divi AI.

Generate a New Site With Divi AI

After the Divi theme has been installed and activated, you will be redirected to the Divi Dashboard page.

  1. Go to WordPress Dashboard → Divi → Dashboard

  2. Click on the Generate A New Site button

    Divi Quick Sites - Generate a new Site

  3. Click on the Generate My Website button under the Generate Your Site With AI

    Divi - Generate Your Site With AI

  4. Fill out the Tell Us About Your Website form with details about your:

    • Website's name

    • Company Slogan

    • Description of your company

    • (optional) Enable the option Install and Configure WooCommerce if you need an e-commerce website

    • Upload your company logo

    • Choose

      • Use Stock Images from Unsplash(faster)—This option allows you to use stock images from Unsplash.

      • Generate Images with Divi AI — Let Divi AI generate all the images. You can also edit them and change them later if you need to.

      • Use Placeholder images - Use image placeholders instead of actual images.

    • (optional) You can expand the Customize Fonts & Colors toggle to define the fonts and colors the Divi AI will use when generating your website. You can also specify the Primary and Secondary colors according to your branding guidelines.

    Divi - Tell Us About Your Website

  5. Click on the Generate & Publish My Website button

  6. Once the process is complete, you will get an overview of what was created

  7. Click on the View My Site button to view your newly created website

    Divi - View Generated Site

  8. All the pages that have been generated can be edited to make further adjustments:

    1. Hover any of the Website Pages that were generated and click on the:

      • Pencil icon to edit the selected page

      • Eye icon to view the selected page on the Front end

      • Trash icon to delete the selected page

      Divi Sites - Page Quick Actions

    2. Or you can go to WordPress Dashboard → Page → All Pages

      • Hover over the page you want to edit and click on Edit with Divi link

      • Make your adjustments

      • Save your changes

      WordPress - Edit page with Divi

Notes:

  • If the Install and Configure WooCommerce option is enabled, the WooCommerce plugin will be installed and activated for you.
    In addition, a few demo Woo Products and related WooCommerce pages, such as the Checkout, Cart, and My Account Pages, will be created.
    ​

  • Check out our Divi Modules documentation page for more information about all the WooCommerce modules available.

Example Use case

Site Name

Bay Area Shine

Site Slogan

Eco-Friendly Excellence for Your Ride

Website prompt

Bay Area Shine is a premium car detailing service located in the heart of the San Francisco Bay Area.

We specialize in providing top-notch detailing services that cater to the unique needs of Bay Area residents.

Our services range from basic washes to comprehensive detailing packages, including interior and exterior cleaning, waxing, polishing, and ceramic coating.

At Bay Area Shine, we prioritize eco-friendly practices using biodegradable cleaning products and water-saving techniques to ensure a sparkling clean vehicle with minimal environmental impact.

We offer mobile services to provide convenience to our customers, bringing our expertise right to their doorstep, whether at home, at work, or anywhere in between.

After filling in all the details, clicking the Generate & Publish My Website button will initiate the building process. Within minutes, Divi AI will create all pages, generate all the content and imagery, design each page, and much more.

Once the process is complete, you will get an overview of the entire process:

Divi - Overview of the generated site

In this example, Divi Quick Sites has created 5 Pages:

  • Home

  • Services

  • About

  • Gallery

  • Contact

And also 6 Theme Builder Templates:

  • Default Website Templates

  • 404 Page Template

  • All Category Template

  • All Post Template

  • All Author Template

  • Search Results Template

The images are taken from the Unsplash website, and even if they are not perfect, we could use Divi AI Image generation to generate different images if necessary.

Example of a homepage layout generated by Divi AI:

Divi - Example of the Homepage layout generated with AI

Generate a New Site with a Pre-made Starter Site

  1. Go to WordPress Dashboard → Divi → Dashboard

  2. Click on the Generate A New Site button

    Generate A New Site

  3. Click on the Select a Website Template button under the Use Pre-Made Starter Site

    Divi - Use Pre-Made Starter Site

  4. Hover over the premade layout you want to use and click on the Green button

    Divi - Choose A Starter Site

  5. Choose your Site's Name, Site Slogan, Logo Image, and what pages you want to have on your website

    Divi - Customize the Generated Site

  6. Click on the Generate & Publish My Website button

  7. Your new website will be ready in 1-2 minutes using the Starter Site template you chose and the information you provided. Once the process is complete, click on View My Site button

  8. All the pages that have been generated can be edited to make further adjustments:

    1. Hover over any of the Website Pages that were generated and click on the:

      • Pencil icon to edit the selected page

      • Eye icon to view the selected page on the Front end

      • Trash icon to delete the selected page

      Divi Sites - Page Quick Actions

    2. Or you can go to WordPress Dashboard → Page → All Pages

      • Hover over the page you want to edit and click on Edit with Divi link

      • Make your adjustments

      • Save your changes

      WordPress - Edit page with Divi

Customizing Your Starter Site

Once the Starter Site is live, you can edit it further to match your brand.

Step 1. Editing Your Starter Site Theme Builder Templates

Divi Quick Sites also replicates Theme Builder templates from the Starter site and creates copies for your website.

The Divi Theme Builder is an interface within Divi that allows you to construct theme templates and assign custom templates to pages or posts across your theme. You can also create templates for your site's archive pages, such as Search Results, Category pages, Tag Pages, Author Pages, and more.

With the Theme Builder, you have complete control over every website element. And because you can use or exclude templates on any page or post throughout your site, there is no longer any need to edit a theme template file ever again manually.

  1. Go to WordPress Dashboard → Divi → Theme Builder

  2. Click on the Pencil icon on the left side of the global header

    Customize the Global Header

  3. Start customizing the Global Header layout

    Customize the Module inside the Global Header

  4. Once done, click on the Ellipsis icon to open the Visual Builder's toolbar

  5. Click on the Save button

    Visual Builder toolbar

  6. Click on the X icon to exit the Visual Builder

  7. Finally, click on the All Changes Saved button

    Theme Builder - Save all changes

Step 2. Customizing Global Fonts

Depending on which Starter Site you choose, a specific selection of Global Fonts will be applied to your headings and body text. You can change the global fonts from the Theme Customizer or the Divi Builder.

Change the Global Fonts using the Theme Customizer

  1. Go to Divi → Theme Customizer → General Settings → Typography

  2. Change the preselected fonts for Header Font and Body Font

  3. Click on the Publish button

    Customize the Global Fonts

Change the Global Fonts using the Divi Builder

  1. Load any of the pages that the Starter Site created

  2. Open any of the text-based module's settings

  3. Go to Design Tab → Heading Text → Heading Font and expand the Fonts list

  4. Click on the Edit Global Fonts button

    Customize the Global Fonts

  5. Choose the new heading and body fonts

    Customize the Global Fonts

  6. Click on the Save button

Step 3. Customizing Global Colors

  1. Open any module on any of the pages that were generated by the chosen Starter Site

  2. Check any of the variable color options, such as the Background color

  3. Click on the Global option

  4. Click on the Gear icon

  5. Select the color you want to use using the Color Picker

  6. Click on the Finish Editing Global Colors option

  7. Confirm the color change

  8. Close the module's settings window

Note: Check our Divi Color Management System article to learn more about organizing your color pallets efficiently.

Step 4. Customizing Global Presets

Global presets are pre-configured styles and settings that can be applied to multiple elements across a website for consistent design and easier updates.

Each Starter site is purposefully designed with modules that already have global presets. You can modify the existing presets to make site-wide changes and avoid manually modifying each element.

  1. Edit any of the Divi Modules by clicking on the Gear icon

  2. Click on the Preset option at the top

    Customize the Global Presets

  3. Hover the marked preset and click on the Pencil icon to edit it

    Customize the Global Presets

  4. Make your changes and save them

    Customize the Global Presets

Notes:

  • Any module using the edited preset will automatically inherit the changes done on the preset level.

  • Check out our Divi Global Presets article for in-depth documentation regarding the Global Presets

Wrapping Up

Divi Quick Sites and Divi Starter Sites are powerful combos for getting a Divi website up in minutes. They put you in the best position to make any adjustments you need using all the stunning features that make Divi such a powerful design tool.

You can start your next project with a builder that can deliver an entire website with all the tools you need to customize it.

Frequently asked questions

Can I use Divi AI Full Site Generation if I already have pages published on my website?

Yes, you can still use the Divi AI Full Site Generation even if your website already has published pages.

What happens with my previous published pages?

Your previously published pages will still exist and work exactly like before. The Divi AI Full Site Generation will create new pages for you. If, for example, there are one or multiple pages with the same name, their Slug name will differentiate them.

Can I use Divi AI Full Site Generation if I already have Theme Builder templates created?

Yes, you can still use the Divi AI Full Site Generation even if your website already has Theme Builder templates already created.

What happens with my previous Theme Builder templates?

They will still be available inside the Theme Builder; however, the old templates will be deactivated.

Related Articles
How to Import and Export Theme Builder Templates
Divi AI
How to Use Divi AI Full Site Generation
Divi Dash Website Dashboard
Divi Dash Websites Tab
Did this answer your question?