This article provides a step-by-step guide on effectively using Divi Layouts AI to streamline and enhance your website design workflow.
What Is Divi Layouts AI?
Divi Layouts AI works alongside our flagship WordPress theme, Divi. The combined power of Divi and Divi AI makes it one of the best AI website builders on the market.
It can create entire pages, help you refine existing copy, generate images, and add code, all with a text prompt. Divi Layouts AI can also create pages that are aligned with your branding by allowing you to provide colors and fonts. That way, every page you generate will have a consistent look every time.
How Does Divi Layouts AI Work?
Divi Layouts AI is built directly into Divi’s framework and works seamlessly with the Divi Builder. Thanks to its deep understanding of Divi’s codebase, it can learn from your website. It understands how every line of code and design module works, making it easy to create beautiful layouts. Divi Layouts AI acts like a designer, developer, and photographer all rolled into one.
You provide a simple text prompt describing the type of page you need, and Divi Layouts AI will create an entire webpage, including text and images, complete with Divi’s design modules. It skips the initial stage of planning and building a web page structure, giving you a head start on the design process.
Getting Started With Divi Layouts AI
Configure WordPress
WordPress should be configured with your site title and tagline to ensure you get the best results possible.
Go to WordPress Dashboard → Settings →General
Set your site title
Set your tagline
Create a new Page
Go to WordPress Dashboard → Pages → Add New Page
Give your page a title
Click on the Use Divi Builder button
Provide Divi layouts AI with information to generate a webpage
In the Page Creation Flow, choose Generate Layout
Fill in the details of the page in the Build Your Page With AI modal window where you will describe:
The type of page you want to create. Although optional, providing Divi Layouts AI with as much context as possible is a good idea.
Write a short description of what your website is for. You can enter your mission statement and value proposition.
Specify fonts and colors to match your company's branding.
Pro Tip: To make things easier for you, here’s a short list of tips to follow to craft the perfect prompt:
Clarity is Key: Be clear and concise when writing your prompt. The more specific you are, the better Divi Layouts AI can understand the look you’re going for.
Provide Context: Consider including information in the optional Tell Divi AI About Your Website field. Give as much background information about your product or service and target audience as possible.
Use Keywords: Include relevant keywords that describe your business or service. This helps Divi AI write content and ensures your page is optimized for SEO.
Refine and Regenerate: One of the best things about Divi AI is that you can generate as many layouts as you’d like. If your first attempt isn’t what you want, try again! The possibilities are endless.
Example use case: generate a layout for a pet treat business
In the Describe The Page You Want Divi AI To Create field, enter the following text: Create a landing page for a specialty pet treat business. The company’s name is Critter Cravings, which concentrates on all-natural ingredients.
In the Tell Divi AI About Your Website field, you can add a mission statement to provide Divi AI with as much information as possible.
For example, you can use:
Our company, Critter Cravings, is an all-natural pet treat business renowned for making delicious baked goodies for your furry friend. We handcraft each treat carefully, ensuring only the finest, wholesome ingredients make it into our recipes. From crunchy biscuits to chewy delights, every bite will surely warrant a bark or meow from your best friend.
Our treats are free of artificial additives, preservatives, and fillers, making them a wholesome choice for pets of all shapes and sizes. At Critter Cravings, we believe every pet deserves a little indulgence, and we take pride in providing treats that owners can trust and that pets will adore.
In the Customize Fonts & Color section, specify the fonts and colors you would like to use on your website.
For this example, we are going to use:Lato for the headline font
Open Sans for the body font
#000000 for the Heading Font Color
#000000 for the Body Font Color
#F3764D for the Primary Color
#6BAAAE for the Secondary Color
Click on the Generate Layout button to create your webpage
The creation process can take from a few seconds to a few minutes to complete, depending on the complexity of the layout being generated.
Fine-Tuning and Customization
Divi AI does a great job crafting beautiful pages, but sometimes, you may want to make changes.
Generating Images with Divi AI
Hover over the hero image and click the Gear icon
to bring up the Image module settings
Hover over the image preview and click the Divi AI icon
Choose the Generate & Replace option
Divi AI will automatically generate 4 new images for the hero based on the original image. However, you can also generate a new image, which allows you to add a new prompt, specify image size, and more. You can choose from 12 styles, including photo, 3D render, drawing, and others.
Choose the Photo option for the style
Add a brief description
Example prompt: photo of a loving and loyal dog, his eyes gleaming with anticipation as he savors each morsel of a succulent, melt-in-your-mouth, baked treat
Note: You can be as detailed as you’d like, up to 200 characters. If you struggle to come up with a prompt, check out the best AI prompt generators blog post to help you come up with ideas.Select the landscape aspect ratio
Click on the Generate button
Select one of the 4 newly generated images and click on the Use This Image button.
Refining Text with Divi AI
Besides images, Divi AI also allows you to refine text, including the text that was initially generated for this use case.
Hover over the Text module directly beneath the headline in the hero section and click the Gear icon
to bring up the Text module settings
Click the Divi AI icon
within the Body text area to bring up the AI options
Select the Improve With AI option
In the Write Body With AI modal window, use the following:
Content Type: Paragraph
What are you writing about: Write about the benefits of incorporating Critter Cravings' all-natural treats into a balanced pet diet.
Added Context: This Page Content
Click on the Generate Text button
Generating Code with Divi AI
Another huge benefit of Divi AI is its ability to generate code. It trains solely on Divi’s codebase, making it unique from other large language models.
Open the Heading modules settings window
Go to Advanced Tab → Custom CSS → Free Form CSS
Click on the Divi AI icon
Tell Div AI what you want to create. For example, Give the headline a typewriter effect
Click on the Use This Code button
Tips for writing good prompts for Divi AI
Writing effective prompts is key to generating high-quality layouts with Divi AI. Here are some tips and examples:
Be Clear and Specific: The clearer and more specific your prompt, the better the results.
Provide Context: Include relevant information about your product, service, or target audience.
Use Keywords: Incorporate keywords related to your business to help with SEO and content generation.
Iterate and Refine: Don’t hesitate to regenerate layouts until you achieve the desired result.
Prompt Examples
Good prompt | Create a landing page for a specialty pet treat business called Critter Cravings. Include a hero section with a background image of a dog enjoying a treat, a mission statement, product descriptions, and a call-to-action button. |
Poor prompt | Create a webpage for my business. |
Good prompt | Create a contact page for our tech startup with a contact form, Google Maps integration showing our office location, and a section with our customer service hours. |
Poor prompt | Make a contact page. |
Good prompt | Create a product page for our eco-friendly water bottles. Include high-quality product images, detailed descriptions, customer reviews, and a section highlighting our sustainability practices. |
Poor prompt | Design a product page. |
Good prompt | Design an About Us page for our artisan bakery, featuring our story, team member bios with photos, our mission statement, and our company's history timeline. |
Poor prompt | Build an about us page. |
Good prompt | Create a digital marketing agency homepage featuring a hero section with a call-to-action button, a services overview, client testimonials, and a portfolio gallery. |
Poor prompt | Make a homepage. |
Frequently Asked Questions
What is Divi AI, and what can it do?
What is Divi AI, and what can it do?
Divi AI is a set of tools built specifically to work with Divi. It helps users generate images, text, code, and full websites. It even works with the Theme Builder, so you can design every aspect of your website, including headers and footers, with a text prompt.
How does Divi AI generate content that fits my website?
How does Divi AI generate content that fits my website?
Divi AI is training on a massive dataset of Divi websites and code. This allows it to understand the overall structure of Divi websites. Divi AI analyzes your website's content, including the site title, tagline, and description, and generates content that matches your brand's identity.
Is Divi AI difficult to use?
Is Divi AI difficult to use?
No! Divi AI is designed to be user-friendly. It integrates directly into the Visual Builder, so you don't need to learn any new software. You simply provide a text description and instructions, and Divi AI generates text, code, images, and layouts for you.
What are the advantages of Divi AI over other AI content-generation tools?
What are the advantages of Divi AI over other AI content-generation tools?
Unlike some general-purpose AI tools, Divi AI is specifically designed for Divi users. This means it understands Divi's technology and codebase, allowing it to generate more relevant and accurate content. Additionally, Divi AI offers features like image refinement and AI-powered CSS editing that are not commonly found in other content generation tools.
Is Divi AI free to use?
Is Divi AI free to use?
Divi AI is not a free-standing product. It's available as an add-on to your Elegant Themes subscription. However, new users can try out Divi AI for free before signing up.