Como usar o Divi AI: tutorial completo passo a passo

Atualizado em 23 de agosto de 2026. Este tutorial mostra como usar o Divi AI no WordPress para criar um site completo, gerar páginas e seções, escrever textos, produzir e editar imagens e solicitar código personalizado. O objetivo é apresentar o fluxo real de trabalho e, principalmente, os pontos que precisam ser revisados antes de publicar.

O Divi AI está integrado ao Divi Builder. Depois que o Divi está atualizado e a conta da Elegant Themes foi autenticada, não é necessário instalar um plugin adicional. A interface pode apresentar pequenas diferenças entre o Divi 4 e o Divi 5, mas a lógica é semelhante: o ícone de IA aparece nos campos de texto, imagem e código, enquanto os geradores de site, layout e seção ficam nos fluxos de criação correspondentes.

Se você ainda está avaliando a ferramenta, leia primeiro o nosso guia sobre o que é o Divi AI, seus recursos, preços e limitações.

O que você precisa antes de começar

• um site WordPress com o Divi instalado e atualizado;
• uma conta ativa da Elegant Themes;
• o nome de usuário e a API key configurados no Divi;
• acesso ao teste gratuito ou uma assinatura do Divi AI;
• um backup recente;
• preferencialmente, um ambiente de staging para testar site completo e código.

A documentação atual informa que o Divi AI está disponível no Divi 4.22 ou superior e no Divi 5. Se o ícone de IA não aparecer, confirme a versão antes de procurar outra causa.

Prepare o contexto que a IA utilizará

O resultado começa antes do primeiro prompt. O Divi AI pode considerar o título, o slogan, o conteúdo da página e os módulos próximos. Por isso, configure corretamente as informações básicas em WordPress > Configurações > Geral.

Prepare também um pequeno briefing com:

• nome e localização da empresa;
• produto ou serviço principal;
• perfil do cliente ideal;
• problema que a empresa resolve;
• diferenciais comprováveis;
• tom de voz;
• páginas e seções necessárias;
• chamada para ação principal;
• cores, fontes e referências visuais;
• informações que a IA não deve inventar.

Um briefing de cinco a dez linhas costuma produzir resultados melhores do que dezenas de tentativas com comandos vagos. Guarde esse texto para reutilizá-lo ao gerar site, páginas e seções.

Como ativar o Divi AI

O Divi AI não tem um botão separado de instalação. A ativação acontece quando o site está conectado à conta correta da Elegant Themes.

1. Atualize o tema Divi ou o plugin Divi Builder.
2. No painel do WordPress, abra as opções do Divi.
3. Localize a área de atualizações ou autenticação.
4. Informe o nome de usuário da Elegant Themes e uma API key válida.
5. Salve as configurações.
6. Abra uma página com o Visual Builder e verifique se o ícone do Divi AI aparece em um campo de texto ou imagem.

Nas instalações recentes, o assistente inicial do Divi pode criar e instalar a API key durante a autenticação. Se você já possui uma licença configurada e o Divi está atualizado, o teste gratuito pode aparecer automaticamente.

Entenda os créditos do teste gratuito

Membros recebem até 100 usos para testar a ferramenta. A documentação oficial apresenta o seguinte consumo:

• site completo: 25 usos;
• layout de página: 10 usos;
• seção: 5 usos;
• texto: 1 uso;
• rodada de quatro imagens: 1 uso;
• código: 1 uso.

Os créditos pertencem à conta da Elegant Themes, não a cada instalação. Planeje o teste antes de gerar várias versões do mesmo site. Comece com textos e seções para entender o comportamento e deixe a geração completa para um projeto de teste.

Como criar um site completo com Divi AI

O Divi Quick Sites oferece duas opções: aplicar um Starter Site criado pela equipe do Divi ou gerar um site com IA. O modo de IA pode configurar páginas, menu, página inicial, modelos do Theme Builder, estilos globais e presets. Ele também pode incluir uma loja WooCommerce.

Atenção: use esse fluxo preferencialmente em uma instalação nova ou vazia. Em um site existente, ele pode alterar a página inicial, o menu e modelos globais. Faça backup e trabalhe em staging.

Abra o Divi Quick Sites

1. No painel do WordPress, acesse Divi > Dashboard.
2. Localize o cartão do Divi Quick Sites.
3. Clique em Generate A New Site.
4. Selecione Generate Your Site With AI.
5. Clique em Generate My Website.

Preencha as informações do site

O formulário solicita os dados que orientarão a geração. Preencha:

• Site Name: o nome correto da empresa ou projeto;
• Site Slogan: uma frase curta que descreva o posicionamento;
• Tell Divi AI About Your Website: o briefing completo;
• E-commerce: habilite apenas se desejar instalar e configurar o WooCommerce;
• Logo: envie a versão correta, de preferência com boa resolução;
• Images: escolha imagens do Unsplash, geração por IA ou placeholders.

As fotos do Unsplash tornam a geração mais rápida. As imagens geradas por IA são mais personalizáveis, mas demoram mais e exigem revisão visual. Placeholders são adequados quando a empresa já possui fotografias próprias que serão inseridas depois.

Exemplo de prompt para um site completo

Crie um site para uma empresa brasileira de manutenção WordPress que atende pequenas empresas e agências de marketing. O público procura suporte técnico contínuo, segurança e estabilidade. Crie páginas de Início, Serviços, Sobre, Blog e Contato. Na home, inclua uma apresentação objetiva, problemas resolvidos, serviços, diferenciais, processo, depoimentos e CTA para falar com um especialista. Use linguagem profissional, clara e sem promessas exageradas. Não invente números de clientes, certificações ou avaliações.

Esse prompt informa público, oferta, páginas, estrutura, tom e limites. Adapte-o ao projeto real. Evite inserir dados confidenciais ou informações pessoais de clientes.

Gere e aguarde a conclusão

Depois de revisar os campos, inicie a geração. O Quick Sites prepara as páginas, define a página inicial, cria o menu e instala modelos globais. Em projetos com e-commerce, o processo pode incluir WooCommerce e páginas de loja, carrinho e checkout.

Não feche a página durante a geração. Quando o processo terminar, abra o site em uma nova aba e faça uma inspeção geral antes de editar detalhes.

Como revisar o site gerado

A primeira versão é um protótipo editável, não uma publicação final. Verifique:

• se todas as páginas necessárias foram criadas;
• se o menu aponta para os destinos corretos;
• se a página inicial está definida corretamente;
• se header, footer, posts e arquivos utilizam os modelos adequados;
• se cores e fontes combinam com a identidade;
• se os presets mantêm consistência entre módulos;
• se os textos apresentam informações verdadeiras;
• se imagens representam o negócio sem criar falsas expectativas;
• se botões, formulários e links funcionam;
• se a versão móvel está legível;
• se a loja, quando incluída, está configurada com moeda, pagamentos, frete e textos legais corretos.

Faça primeiro as correções globais. Alterar cores, fontes e presets antes de ajustar cada módulo evita trabalho repetido.

Como criar uma página com Divi Layouts AI

O gerador de páginas é mais seguro para adicionar conteúdo a um site existente. Ele cria uma única página com módulos editáveis.

1. No WordPress, acesse Páginas > Adicionar nova.
2. Informe um título para a página.
3. Clique em Use Divi Builder.
4. No fluxo inicial do Visual Builder, selecione a opção de construir com IA. Em algumas versões, abra a biblioteca de layouts e escolha a geração com Divi AI.
5. Descreva o objetivo, o público e as seções.
6. Informe detalhes adicionais sobre o negócio.
7. Escolha imagens do Unsplash, imagens geradas por IA ou placeholders.
8. Defina cores e fontes ou peça que o Divi sugira.
9. Inicie a geração.

Exemplo de prompt para uma landing page

Crie uma landing page para um serviço de otimização de performance WordPress voltado a empresas que sofrem com páginas lentas e baixa pontuação no Core Web Vitals. Inclua hero com benefício e CTA, sintomas do problema, diagnóstico, etapas do serviço, entregáveis, perguntas frequentes e CTA final. Use linguagem direta. Não invente resultados, percentuais ou depoimentos. O CTA deve ser “Solicitar diagnóstico”.

Depois da geração, confirme se há uma sequência lógica: problema, solução, evidência, processo, redução de risco e ação. Se a página estiver visualmente adequada, mas a mensagem for fraca, reescreva o texto em vez de regenerar tudo.

Como gerar uma seção com Divi AI

O gerador de seções é ideal para adicionar um bloco sem mexer no restante da página.

1. Abra a página no Visual Builder.
2. Clique no botão azul de adicionar uma nova seção.
3. Selecione Generate Section With AI.
4. Descreva o conteúdo e a função da seção.
5. Adicione o contexto do site, se necessário.
6. Escolha o tipo de imagem.
7. Defina ou reutilize cores e fontes.
8. Gere a seção e revise cada módulo.

Exemplo de prompt para uma seção

Crie uma seção de comparação com duas opções: manutenção reativa e manutenção preventiva de WordPress. Explique de forma breve os riscos, o tempo de resposta e a previsibilidade de cada abordagem. Destaque visualmente a manutenção preventiva, sem desvalorizar o leitor. Inclua um único botão com o texto “Conhecer os planos”.

Se a seção ficar genérica, especifique os módulos ou o conteúdo obrigatório. Por exemplo: “use um título, uma introdução curta, duas colunas de comparação e um botão”. Quanto mais claro for o objetivo, menor a chance de o Divi adicionar elementos desnecessários.

Como gerar textos com Divi AI

Os controles de texto aparecem nos campos dos módulos que aceitam conteúdo.

1. Abra as configurações do módulo.
2. Clique no ícone do Divi AI no campo de texto.
3. Selecione Write With AI ou a opção equivalente.
4. Informe o que deve ser escrito.
5. Escolha tipo, tom, comprimento, idioma e palavras-chave quando disponíveis.
6. Clique em Generate Text.
7. Revise o resultado.
8. Clique em Use This Text somente depois da revisão.

Alguns módulos oferecem geração automática para vários campos. Em um Blurb, por exemplo, a ferramenta pode sugerir título e corpo. O contexto do módulo e da página influencia a resposta.

Exemplo de prompt para texto

Escreva um parágrafo de até 70 palavras para apresentar um serviço de suporte WordPress para agências. Fale com gestores que precisam atender clientes sem ampliar a equipe interna. Destaque apoio técnico especializado, comunicação clara e prevenção de problemas. Não use “solução completa”, “revolucionário” ou garantias de resultado.

Como melhorar um texto existente

Selecione o conteúdo e use ações como melhorar, encurtar, expandir, corrigir gramática, alterar o tom ou traduzir. Também é possível escrever uma instrução específica:

Reescreva este texto em português brasileiro, com frases curtas e vocabulário acessível. Preserve todas as informações técnicas. Remova repetições e qualquer promessa que não possa ser comprovada.

Não peça apenas “melhore”. Explique o que significa melhorar: mais claro, mais específico, mais curto, mais persuasivo ou mais adequado a determinado público.

Como gerar imagens com Divi AI

O gerador pode ser aberto em um módulo de Imagem ou em um campo de imagem de fundo.

1. Abra o módulo ou elemento.
2. No campo de imagem, clique no ícone do Divi AI.
3. Selecione Generate With AI.
4. Escolha um estilo.
5. Escreva a descrição da imagem.
6. Adicione uma imagem de referência, se necessário.
7. Ajuste a influência da referência.
8. Escolha proporção e tamanho.
9. Clique em Generate.
10. Compare as quatro opções e selecione a melhor.

A Elegant Themes recomenda prompts de imagem em inglês. Descreva sujeito, ambiente, composição, iluminação, cores e o que deve ser evitado.

Exemplo de prompt para imagem

Professional editorial photograph of a WordPress support specialist working at a clean desk, laptop screen not visible, natural daylight, neutral office, charcoal and orange accents, realistic skin and hands, wide composition with negative space on the left, no logos, no readable text, no watermark.

Evite pedir imagens que finjam mostrar instalações, funcionários ou produtos reais da empresa. Para esses casos, use fotografias próprias. Ao inserir a imagem, preencha um texto alternativo que descreva sua função para quem não consegue vê-la.

Como usar o editor de imagens do Divi AI

O editor permite modificar uma imagem existente sem sair do Visual Builder.

Substituir ou adicionar um objeto

1. Abra a imagem no editor de IA.
2. Escolha a ferramenta de modificação.
3. Pinte com o pincel apenas a área que será alterada.
4. Descreva o novo elemento.
5. Gere a alteração.
6. Confira bordas, sombras, perspectiva e proporções.

Máscaras menores preservam mais da imagem original. Selecione apenas a área necessária e inclua contexto suficiente para o novo objeto combinar com a cena.

Estender a imagem

Use a expansão de tela quando a imagem tem a orientação errada para o layout. Uma foto vertical pode receber espaço lateral para funcionar em um hero. Depois da extensão, confira repetições, texturas e elementos cortados.

Melhorar ou aumentar a resolução

Os controles de enhancement e upscale ajudam quando o arquivo é pequeno ou pouco nítido. Eles não recuperam fielmente detalhes que nunca existiram. Compare com o original, especialmente em rostos, textos e produtos.

Organize a Biblioteca de Mídia

Cada geração e edição pode criar novos arquivos. Exclua variações que não serão utilizadas, escolha formatos modernos quando possível e comprima as imagens. Uma biblioteca desorganizada aumenta o backup e dificulta a manutenção.

Como gerar CSS com Divi Code AI

Para personalizar um módulo específico:

1. Abra as configurações do elemento.
2. Acesse Advanced > Custom CSS > Free Form CSS no Divi 5, ou o campo equivalente da versão utilizada.
3. Clique no ícone do Divi AI.
4. Descreva o efeito e os limites.
5. Clique em Generate Code.
6. Leia o CSS gerado.
7. Teste em desktop, tablet e celular.
8. Use o código somente se não houver conflito.

Exemplo de prompt para CSS

Adicione a este botão uma transição suave de 180 milissegundos. No hover, mova o botão 2 pixels para cima e escureça a cor de fundo em 8%. Preserve o foco visível do teclado, não altere o tamanho e respeite prefers-reduced-motion. Retorne somente CSS compatível com este módulo.

O prompt explicita comportamento, acessibilidade e escopo. Evite pedir efeitos vagos como “deixe mais moderno”.

Como gerar HTML e JavaScript

HTML e JavaScript devem ser criados no módulo de Código ou em uma área apropriada do projeto.

1. Adicione um módulo de Código à página.
2. Abra o campo de conteúdo.
3. Clique no ícone do Divi AI.
4. Descreva a funcionalidade, os estados e os requisitos de acessibilidade.
5. Gere o código.
6. Revise HTML, CSS e JavaScript separadamente.
7. Teste em staging.

Não use esse caminho para processar pagamentos, autenticação, dados pessoais ou funções críticas sem desenvolvimento profissional. Código no navegador é visível ao visitante e não deve conter chaves de API, senhas ou segredos.

Exemplo de prompt para um componente

Crie um acordeão acessível com três perguntas. Use botões reais, atributos aria-expanded e aria-controls, navegação por teclado e JavaScript sem bibliotecas externas. Apenas uma resposta pode ficar aberta por vez. Não aplique estilos globais e use um prefixo exclusivo nas classes.

Como escrever prompts melhores para o Divi AI

Uma estrutura simples ajuda em quase todas as funções:

1. Objetivo: o que deve ser criado.
2. Contexto: empresa, página, público e momento da jornada.
3. Conteúdo obrigatório: seções, informações ou elementos.
4. Tom e estilo: como o resultado deve se comunicar ou parecer.
5. Restrições: o que não pode ser inventado ou alterado.
6. Formato: tamanho, quantidade, módulos, proporção ou linguagem.

Exemplo resumido:

Crie [entrega] para [público] com o objetivo de [resultado]. Inclua [itens]. Use tom [tom] e a identidade [cores/fontes]. Não invente [dados] e não altere [elementos]. Entregue em [formato].

Se a primeira versão errar apenas um ponto, não reescreva tudo. Peça uma mudança específica. Iterações pequenas dão mais controle e facilitam comparar resultados.

Checklist antes de publicar uma página criada com IA

Conteúdo

• Confirme nomes, preços, datas, estatísticas e especificações.
• Remova frases genéricas e promessas sem prova.
• Ajuste o texto ao tom real da empresa.
• Garanta que o CTA descreva a próxima ação.
• Revise ortografia e português brasileiro.

SEO

• Use apenas um H1 claro.
• Organize subtítulos em ordem lógica.
• Escreva title e meta description próprios.
• Adicione links internos úteis.
• Crie URLs curtas e descritivas.
• Não repita a palavra-chave artificialmente.

Imagens e acessibilidade

• Comprima imagens e confira dimensões.
• Preencha textos alternativos significativos.
• Verifique contraste de textos e botões.
• Teste navegação por teclado.
• Não dependa apenas de cor para transmitir informação.
• Confirme que imagens não mostram dados ou marcas indevidas.

Funcionalidade

• Teste formulários e mensagens de confirmação.
• Abra todos os links.
• Valide menu, header e footer.
• Confira desktop, tablet e celular.
• Teste navegadores principais.
• Revise o código gerado e o console do navegador.

Desempenho e segurança

• Exclua imagens de IA que não serão utilizadas.
• Evite scripts e animações desnecessários.
• Não insira credenciais em código ou prompts.
• Mantenha Divi e WordPress atualizados.
• Faça backup antes de alterar modelos globais.

Problemas comuns e como corrigir

O ícone do Divi AI não aparece

Atualize o Divi, confirme a autenticação da conta e teste um campo compatível. Limpe caches do construtor e do navegador. Se o problema persistir, verifique conflitos em staging e consulte o suporte da Elegant Themes.

Os textos ficam genéricos

Configure título e slogan do site, forneça público, oferta, diferenciais e limites. Inclua exemplos de termos que a marca usa ou evita. Gere uma seção específica em vez de pedir uma página sem contexto.

O design fica inconsistente

Defina cores e fontes antes de gerar várias páginas. Salve escolhas como estilos globais ou presets. Use o mesmo briefing e corrija os elementos globais antes dos módulos individuais.

A geração do site demora

Imagens geradas por IA exigem mais processamento. O uso de fotos do Unsplash é mais rápido. Também é possível gerar o site com placeholders e inserir fotografias próprias depois.

A seção não tem a estrutura desejada

Liste os elementos obrigatórios e a ordem. Em vez de “crie uma seção de serviços”, informe quantos serviços, quais informações cada item deve conter, qual CTA será usado e quais componentes devem ser evitados.

O código funciona no desktop, mas quebra no celular

Peça regras responsivas e teste todos os breakpoints. Verifique se o código usa tamanhos fixos, seletores globais ou posições absolutas. Prefira soluções simples e compatíveis com a estrutura do Divi.

Fluxo recomendado para projetos profissionais

1. Faça diagnóstico do site e defina objetivos.
2. Prepare arquitetura, conteúdo real e identidade.
3. Crie um backup e um ambiente de staging.
4. Use Quick Sites apenas em instalações novas.
5. Em sites existentes, trabalhe por página ou seção.
6. Gere uma primeira versão com briefing detalhado.
7. Revise conteúdo, layout, imagens e código.
8. Aplique ajustes globais.
9. Teste responsividade, acessibilidade, SEO e conversão.
10. Publique somente depois de uma verificação final.

O Divi AI é mais eficiente quando reduz tarefas repetitivas sem eliminar o processo de qualidade. Ele pode acelerar wireframes, variações de texto, imagens de apoio e CSS, enquanto a equipe mantém controle sobre estratégia e publicação.

Perguntas frequentes

Posso usar o Divi AI em um site já publicado?

Sim. Para reduzir riscos, gere páginas e seções específicas. Evite o gerador de site completo sem backup, pois ele pode configurar página inicial, menus e Theme Builder.

Preciso saber programar para usar o Code AI?

Não para gerar uma primeira versão, mas é necessário entender o suficiente para revisar e testar. Em funções críticas, contrate um desenvolvedor.

O Divi AI publica o conteúdo automaticamente?

Ele insere o conteúdo no construtor, mas a decisão de salvar ou publicar continua com o usuário. Aproveite essa etapa para revisar tudo.

É melhor usar Unsplash ou gerar imagens?

Unsplash é mais rápido e oferece fotografias reais. Geração por IA oferece personalização, mas pode apresentar artefatos. Fotografias próprias são preferíveis quando autenticidade e confiança são essenciais.

Posso criar textos em português?

Sim. Informe português brasileiro e o tom desejado. Para imagens, a documentação recomenda prompts em inglês.

Como evitar que a IA invente informações?

Forneça os dados corretos, diga explicitamente o que não deve ser inventado e revise cada afirmação. Não use geração automática como fonte factual.

Fontes oficiais consultadas

Este tutorial foi elaborado de forma original com base na coleção oficial de documentação do Divi AI, nos guias de geração de site completo, layouts, seções, texto, imagens, editor de imagens, Code AI e no material sobre Divi AI no Divi 5. A interface e os nomes dos controles podem mudar em atualizações futuras.