Divi Layouts AI: o guia completo

Antes do início da revolução da inteligência artificial (IA), construir uma página da web exigia habilidades de codificação ou a contratação de um desenvolvedor caro. Para alguns, isso normalmente está fora de alcance devido à falta de experiência ou orçamento. Tudo isso mudou graças à nova tecnologia que permite construir páginas da web inteiras com um prompt de texto.

Esta postagem servirá como um guia Divi Layouts AI que mostrará os detalhes deste novo produto emocionante. Explicaremos o que ele faz, como funciona e como criar lindas páginas da web com facilidade.

Vamos mergulhar.

O que é Divi Layouts AI?

Divi Layouts AI é um novo produto que lançamos e funciona junto com nosso principal tema WordPress, Divi. O poder do Divi e do Divi AI combinados o torna um dos melhores construtores de sites de IA atualmente no mercado. Ele pode criar páginas inteiras, ajudá-lo a refinar cópias existentes, gerar imagens e adicionar código, tudo com um prompt de texto. Divi Layouts AI também pode criar páginas alinhadas à sua marca, permitindo que você forneça cores e fontes. Dessa forma, cada página que você gerar terá sempre uma aparência consistente.

Obtenha Divi AI

Como funciona a IA do Divi Layouts?

Divi Layouts AI é integrado diretamente na estrutura do Divi e funciona perfeitamente com o Visual Builder. Graças ao seu profundo conhecimento da base de código do Divi, ele pode aprender com o seu site. Ele entende como cada linha de código e módulo de design funciona, facilitando a criação de belos layouts. Divi Layouts AI atua como designer, desenvolvedor e fotógrafo, tudo em um.

Você fornece um prompt de texto simples descrevendo o tipo de página necessária e o Divi Layouts AI criará uma página da web inteira, incluindo texto e imagens, completa com os módulos de design do Divi. Ele pula o estágio inicial de planejamento e construção de uma estrutura de página da web, proporcionando uma vantagem inicial no processo de design.

Criando uma página da web completa com Divi Layouts AI

Para começar com o Divi Layouts AI, você deve adquirir uma assinatura do Elegant Themes junto com o Divi AI. Se você já for membro, pode pular o processo de inscrição e adquirir o Divi AI separadamente. Está disponível por US$ 17,04 por mês (se pagar mensalmente) ou US$ 153 por ano .

Neste guia Divi Layouts AI, orientaremos você nas etapas necessárias para criar uma página da web com IA, desde a criação inicial da página até o refinamento da saída.

Etapa 1: compra de Divi Layouts AI

Comece acessando o site principal do Elegant Themes e navegando até a página Divi AI. Você pode se inscrever no Divi + Divi AI ou optar pelo Divi AI como um produto independente (se já estiver usando o Divi). Clique em INSCREVA-SE HOJE! botão para prosseguir.

Para esta postagem, presumiremos que você já é um membro do Elegant Themes. Ao clicar no botão de inscrição, você será solicitado a fazer login em sua conta Elegant Themes.

Uma vez logado, você será redirecionado para a página de inscriçãodo Divi AI , onde poderá adicionar serviços adicionais, como Divi Cloud, Divi VIP ou Divi Teams.Se continuar sem compras adicionais, clique em NÃO, OBRIGADO, PROSSEGUIR PARA CHECKOUT .

Conclua sua compra inserindo os dados do seu cartão de crédito ou, se você tiver um cartão cadastrado, basta clicar no botão COMPRAR DIVI AI .

Depois de fazer sua compra, você pode visualizar as informações de sua assinatura Divi AI clicando em Conta > Assinaturas. Você precisará de uma chave API para usar o Divi AI na instalação do WordPress. Gerar uma chave exclusiva para cada instalação do Divi é uma boa ideia. Para fazer isso, clique na guia Conta e navegue até Nome de usuário e chave de API .

Quando a página for atualizada, role para baixo e clique no botão Gerar nova chave de API (1). Depois de gerar a chave, é benéfico fornecer um rótulo para ela (2). Esta prática é particularmente útil se você pretende construir vários sites Divi.

Clique na chave para copiá-la. Você precisará ativar o Divi AI no painel Divi Theme Options. Vá para a instalação do WordPress, faça login e navegue até Divi > Theme Options > Updates .

Digite seu nome de usuário e a chave de API que você copiou e clique no botão Salvar alterações para salvá-lo.

Etapa 2: crie uma nova página

Agora que adicionou uma chave de API, você pode usar o Divi AI para construir uma página da web. Comece adicionando uma nova página ao seu site WordPress. Navegue até Páginas > Adicionar nova página .

Quando a página for atualizada, dê um título à sua página (1) e clique no botão Usar Divi Builder (2).

Você terá três opções para escolher. Você pode construir uma página do zero, escolher um layout predefinido ou construir com IA. Escolha Construir com IA e clique em Gerar Layout .

Etapa 3: Fornecer ao Divi Layouts AI informações para gerar uma página da web

Orientaremos você pela interface nesta seção de nosso guia Divi Layouts AI. Quando a página for carregada pela primeira vez, uma caixa de diálogo aparecerá. É aqui que você descreverá o tipo de página que deseja criar (1). Embora opcional, fornecer ao Divi Layouts AI o máximo de contexto possível é uma boa ideia. Você pode inserir sua declaração de missão e proposta de valor ou simplesmente escrever uma breve descrição sobre a finalidade do seu site (2). Você também pode especificar fontes e cores para combinar com a marca da sua empresa (3).

Ao instruir o Divi Layouts AI para gerar uma página, comece descrevendo seu produto ou serviço e público-alvo. Fazer isso dá à Divi uma ideia melhor do que gerar. Você pode até mesmo criar títulos atraentes e otimizados para SEO. Outras coisas a considerar são mencionar seu cliente ideal, descrever quaisquer elementos-chave que você gostaria de incluir e mencionar quaisquer estilos específicos de sua preferência.

Para tornar as coisas mais fáceis para você, aqui está uma pequena lista de dicas a seguir para criar o prompt perfeito:

• Clareza é a chave: seja claro e conciso ao escrever sua solicitação. Quanto mais específico você for, melhor o Divi Layouts AI poderá entender a aparência que você procura.
• Forneça contexto: considere incluir informações no campo opcional Tell Divi AI sobre seu site. Forneça o máximo possível de informações básicas sobre seu produto ou serviço e público-alvo.
• Use palavras-chave: inclua palavras-chave relevantes que descrevam seu negócio ou serviço. Isso não apenas ajuda a Divi AI a escrever conteúdo, mas também garante que sua página seja otimizada para SEO.
• Refinar e regenerar: uma das melhores coisas do Divi AI é que você pode gerar quantos layouts desejar. Se sua primeira tentativa não for o que você deseja, tente novamente! As possibilidades são infinitas.

Etapa 4: usando Divi Layouts AI para construir sua página

Agora que você entende o que é Divi Layouts AI e o que ele pode fazer, a próxima etapa é iniciar o processo de geração de páginas. Para este tutorial, pediremos à Divi para gerar um layout para uma empresa de guloseimas para animais de estimação. No primeiro campo, insira o seguinte texto: Crie uma landing page para uma empresa especializada em petiscos para animais de estimação. O nome da empresa é Critter Cravings e concentra-se em ingredientes totalmente naturais.

Adicionaremos uma declaração de missão ao campo Tell Divi AI sobre seu site para fornecer ao Divi AI o máximo de informações possível. Digite o seguinte texto:

Nossa empresa, Critter Cravings, é uma empresa de guloseimas totalmente naturais para animais de estimação, conhecida por fazer deliciosas guloseimas para seu amigo peludo. Nós preparamos cada guloseima com cuidado, garantindo que apenas os ingredientes mais finos e saudáveis ​​sejam incluídos em nossas receitas. De biscoitos crocantes a delícias mastigáveis, cada mordida certamente garantirá um latido ou miado do seu melhor amigo.

Nossas guloseimas não contêm aditivos, conservantes e enchimentos artificiais, o que as torna uma escolha saudável para animais de estimação de todos os formatos e tamanhos. Na Critter Cravings, acreditamos que todo animal de estimação merece um pouco de indulgência e temos orgulho em oferecer guloseimas nas quais os proprietários podem confiar e que os animais de estimação irão adorar.

Em Personalizar fontes e cores, você pode especificar as fontes e cores que deseja usar em sua página da web. Selecionaremos Lato para a fonte do título (1) e Open Sans para a fonte do corpo (2). Para cores, selecione personalizado na lista suspensa (3). Use #000000 para as fontes do título e do corpo e selecione #F3764D e #6baaae para as cores primárias e secundárias (4). Por fim, clique em Gerar Layout para criar sua página web (5).

Divi AI criará o wireframe ao clicar em gerar, aplicará suas fontes e cores e gerará texto e imagens.

Etapa 5: ajuste fino e personalização

A próxima etapa em nosso guia Divi Layouts AI mostrará como refinar seu layout. Divi AI faz um ótimo trabalho criando lindas páginas, mas às vezes você pode querer fazer alterações.

Gerando imagens com Divi AI

Vamos começar regenerando uma imagem para nossa seção de heróis. Passe o mouse sobre a imagem principal e clique no ícone cinza de configurações para abrir as configurações do módulo de imagem.

Com o pop-up do módulo ativo, passe o mouse sobre a visualização da imagem e clique no botão AI .

Isso abrirá várias opções: gerar com IA, editar com IA (onde você pode modificar, expandir e preencher, aumentar ou aprimorar sua imagem), gerar e substituir uma imagem, alterar o estilo da imagem ou aprimorar sua imagem. Vamos escolher Gerar e Substituir .

Divi AI irá gerar automaticamente 4 novas imagens para o herói com base no original. No entanto, você também pode gerar uma nova imagem, que permite adicionar um novo prompt, especificar o tamanho da imagem e muito mais. Você pode escolher entre 12 estilos, incluindo foto, renderização 3D, desenho e outros.

Para este guia Divi Layouts AI, escolheremos Foto para o estilo (1), adicionaremos uma breve descrição (2), selecionaremos a proporção da paisagem (3) e clicaremos em Gerar (4). Para a sugestão, usamos a foto de um cachorro amoroso e leal, com os olhos brilhando de expectativa enquanto ele saboreia cada pedaço de uma guloseima assada, suculenta e que derrete na boca . Você pode ser tão detalhado quanto desejar, com até 200 caracteres. Se você estiver lutando para encontrar um prompt, confira nossa postagem sobre os melhores geradores de prompt de IA para ajudá-lo a ter ideias.

Assim que o Divi AI gerar 4 imagens, podemos clicar em uma e selecionar usar esta imagem (1) para inseri-la no módulo. Você também pode gerar mais quatro (2), modificar a imagem gerando mais parecidas com a selecionada (3) ou inserir uma nova descrição (4) para recomeçar.

Refinando texto com Divi AI

Outro grande recurso do Divi AI é a capacidade de refinar texto. Comece clicando no ícone cinza de configurações no módulo de texto diretamente abaixo do título na seção herói.

Clique no botão AI no módulo de texto para abrir as opções de IA.

Isso abrirá uma série de opções para editar o texto existente. As opções incluem escrever com IA, melhorar com IA, escrever e substituir e outras opções para editar seu texto com Divi AI.

Vamos selecionar melhorar com IA para este guia Divi Layouts AI. Uma caixa de diálogo aparecerá, permitindo que você escolha o tipo de conteúdo (1), sobre o que está escrevendo (2) e se deseja que o Divi AI aplique contexto adicional do conteúdo da página (3). Você também pode clicar no botão AI (4) para que o Divi AI gere um prompt para você.

Independentemente do tipo de conteúdo que você deseja gerar, o Divi AI pode lidar com isso.

Gerando código com Divi AI

Outro grande benefício do Divi AI é a capacidade de gerar código. Ele treina apenas na base de código do Divi, o que o torna único em relação a outros grandes modelos de linguagem. Isso torna o Divi e o Divi AI uma ferramenta poderosa para todos os tipos de usuários, desde iniciantes até desenvolvedores experientes. Você também pode usar o Divi AI para construir uma biblioteca de trechos de código, ajudar com o código existente e adicionar todos os tipos de efeitos, incluindo animações de texto. Por exemplo, se você quiser adicionar um efeito de máquina de escrever ao título principal da nossa página, o Divi AI pode lidar com isso facilmente.

Para começar a usar o Divi AI para codificação, basta abrir as configurações de um módulo, navegar até a guia avançada (1), abrir o menu suspenso CSS personalizado (2) e clicar no botão AI (3).

Quando a caixa de diálogo aparecer, basta digitar o efeito que deseja criar (1) e clicar no botão gerar código (2). Em nosso exemplo, usaremos o prompt para dar ao título um efeito de máquina de escrever .

Divi AI irá gerar e aplicar código com seletores e adicioná-lo ao campo CSS de formato livre. Clique no botão Usar este código para implementar o código.

Etapa 6: salvando sua página da web

Depois de gerar um layout e fazer ajustes para atender às suas necessidades, a última etapa do nosso guia Divi Layouts AI é salvar a página. Felizmente, Divi torna essa parte mais fácil. Com o Visual Builder ativo, passe o mouse sobre o menu de reticências roxas na parte inferior central da tela.

Você pode salvar a página como rascunho ou publicá-la usando o botão correspondente no canto inferior direito da tela.

Aqui está a visão final do nosso layout depois de gerá-lo e fazer algumas edições:

Exemplos de IA do Divi Layouts

Antes de encerrarmos, incluímos alguns layouts e instruções de texto para mostrar o poder máximo do Divi AI.

Prompt: Crie uma página de destino com aluguel, pacotes e experiências de motos de neve. Use motos de neve coloridas, cenários de montanhas e neve branca e fofa

Dica: Crie uma página de contato para uma empresa de lavagem potente. Inclua um mapa, uma seção de herói com uma imagem de fundo e três sinopses de telefone, e-mail e endereço.

Dica: Crie uma página de loja para um viveiro de plantas. Inclua uma seção de serviços, um formulário de contato, uma seção de produtos em destaque com preços e uma seção de heróis visualmente atraente com uma imagem de fundo vibrante. Inclua uma sinopse para entrega gratuita, próximos eventos de vendas e uma para a fábrica do mês.

Prompt: Crie uma página sobre para uma empresa de serviços de TI. Inclua uma seção descrevendo seus serviços, uma proposta de valor, uma declaração de missão e um formulário de contato. Além disso, inclua uma inscrição no boletim informativo no rodapé. Adicione uma grande seção de destaque com uma imagem de fundo e um título com a palavra-chave “segurança cibernética”

Dica: Crie uma landing page para uma academia de bairro. Inclua uma oferta para novos membros no herói, junto com uma imagem de equipamento de ginástica. Inclua também uma seção “sobre nós”, liste cada serviço e inclua um formulário de inscrição no boletim informativo.

Dica: Crie uma página de menu para uma lanchonete. Inclua imagens de comidas deliciosas, um menu, uma seção de pedidos on-line e um rodapé com inscrição no boletim informativo

Prompt: Crie uma página de cursos de aprendizagem online. Apresente 6 aulas de design gráfico, web design, desenvolvimento web, desenvolvimento de aplicativos, prototipagem e UX/UI. Mostre também os preços de cada classe, um herói com uma imagem de fundo e um formulário de login para usuários registrados.

Dica: Crie uma página de destino para uma empresa de conserto de automóveis. Deixe o tema escuro, com toques de vermelho. Inclua uma seção de herói com uma imagem de fundo em preto e branco de um carro, um título grande com a palavra-chave “Conserto de automóveis” e uma galeria de imagens. Inclua também uma seção de serviços, uma seção sobre o que fazemos e uma seção de apelo à ação.

Quais são os benefícios de usar Divi Layouts AI?

Como demonstramos em nosso guia Divi Layouts AI, criar páginas da web com inteligência artificial é fácil, rápido e intuitivo. Ajuda designers iniciantes e experientes a criar layouts mais rápido do que normalmente seria necessário para projetar um do zero. Também é uma ótima maneira de inspirar a criatividade porque o Divi AI pode gerar imagens, texto e código, o que é um excelente ponto de partida. Outro benefício do Divi AI é que você pode gerar fotos, textos, códigos e layouts ilimitados, sem limites de uso. Divi AI também é o companheiro perfeito para qualquer site Divi porque entende o Divi em sua essência. Em última análise, Divi AI é um assistente criativo incrível que pode agilizar o processo de criação de layout, economizando tempo e esforço valiosos.

Divi Layouts AI irá revolucionar a forma como você usa o Divi

Divi é o tema WordPress mais popular e rico em recursos disponível. Se você deseja criar páginas da web do zero ou usar um layout pré-fabricado, o Divi fornece as ferramentas para fazer isso. Com a introdução do Divi Layouts AI, você pode criar páginas da web completas com apenas um prompt de texto. Todo o processo de criação de uma nova página até seu lançamento é incrivelmente simplificado, permitindo que você crie landing pages bonitas e eficazes em minutos. Com Divi + Divi AI, você pode usar o Visual Builder front-end sem código para gerar imagens, texto, código e layouts completos em minutos, permitindo que você gaste tempo se concentrando em outros aspectos do seu negócio. Com o Divi, o céu é o limite do que você pode criar.

Obtenha Divi AI

perguntas frequentes