Gerador de imagem AI para blocos Gutenberg e Kadence!

Usar inteligência artificial (IA) para gerar imagens no editor de blocos do WordPress, também conhecido como Gutenberg, com AI Image Lab acaba de ficar mais fácil e integrado com a atualização AI Image Lab 1.0.3, que apresenta um bloco Gutenberg criado para tornar a IA a geração de imagens é uma parte ininterrupta do processo de criação de conteúdo! O bloco AI Image foi projetado para permitir que os usuários gerem rapidamente uma ampla variedade de imagens personalizadas geradas por AI para páginas ou postagens do WordPress diretamente em outro conteúdo, em vez de usar uma janela separada ou sobreposição de biblioteca de mídia para tentar selecionar a melhor imagem fora de o contexto dos elementos circundantes. Depois que a imagem perfeita for encontrada e selecionada, o bloco AI Image pode ser facilmente transformado em um dos vários blocos Gutenberg principais ou Kadence Blocks, que fornecem opções adicionais de estilo e layout.

Um tutorial rápido

Não há melhor maneira de mostrar o que o bloco AI Image para Gutenberg pode fazer do que com um exemplo! Usaremos blocos do plug-in Kadence Blocks, mas o processo é o mesmo ao usar os blocos principais do Gutenberg.

Em nosso exemplo, criaremos um layout de página inicial básico para uma hipotética imobiliária. A estrutura da página incluirá um banner superior com sobreposição de texto, seguido por uma linha de duas colunas com imagens e texto.

Para criar o banner, começamos inserindo um bloco AI Image no topo da página. Na barra de ferramentas, alteramos a configuração de alinhamento para “Full Width”. Na barra lateral de configurações do bloco, alteramos a proporção para “Tamanho personalizado” e inserimos uma largura de 2048 (o máximo atual) e uma altura de 600. (Isso pressupõe que estamos usando o AI Image Lab Pro, pois a dimensão máxima no versão gratuita é 768.)

Em seguida, inserimos algum texto descritivo para a imagem na caixa de texto que é mostrada no bloco. Vamos tentar apenas uma única palavra, “vizinhança”. Em seguida, clicamos no botão Gerar imagem e esperamos que o bloco seja preenchido com uma imagem. Como nossa imagem é bastante ampla, as imagens de visualização podem ficar um pouco desfocadas, pois as visualizações são renderizadas em uma resolução mais baixa do que a imagem final no modo HD.

Agora podemos usar as setas na barra de ferramentas do bloco AI Image para navegar pelas imagens de visualização. Se chegarmos perto do final de um conjunto de imagens de visualização, um novo conjunto é gerado automaticamente, portanto, pode haver alguns atrasos se estivermos navegando por muitas imagens de visualização rapidamente. A qualquer momento, podemos clicar no botão de edição na barra de ferramentas do bloco para alterar o texto do prompt; quaisquer alterações que fizermos na barra lateral de configurações do bloco também acionarão um novo conjunto de imagens a serem geradas. Depois de encontrar a imagem que queremos usar, clicamos no ícone de marca de seleção na barra de ferramentas, que fará o download da imagem em resolução total para o nosso site e a substituirá pela visualização em baixa resolução mostrada no bloco. Este processo pode demorar um pouco devido à alta resolução que escolhemos.

Aqui está a imagem que estamos usando para este exemplo:

Como queremos sobrepor algum texto nesta imagem e também fazer algumas outras alterações de estilo, devemos transformar o bloco AI Image em um bloco diferente que seja mais adequado às nossas necessidades. Neste caso, usaremos um bloco Row Layout de Kadence Blocks. Basta clicar no ícone AI Image na extremidade esquerda da barra de ferramentas do bloco e escolher Row Layout em “Transform To” (supondo que o plug-in Kadence Blocks esteja ativo). Quando solicitado, escolhemos um layout de coluna única para a linha.

Podemos precisar redefinir o alinhamento no bloco Layout de linha para a largura total neste ponto. Também queremos definir o preenchimento superior e inferior para 3XL e ir para as configurações de sobreposição de fundo na guia Estilo da barra lateral de configurações do bloco e habilitar uma sobreposição preta com uma opacidade de 60% para que haja mais contraste entre o texto e a imagem de fundo. Em seguida, podemos inserir um bloco “Texto (Adv)” na linha, definir a cor do texto para branco, o alinhamento para o centro, a tag HTML para “H1” e a altura da linha para 2. Agora adicionamos nosso texto, que pode resultar no seguinte como um exemplo muito básico:

Para a linha de duas colunas abaixo do banner, inserimos outro bloco de layout de linha, desta vez com um layout de 2 colunas. Inserimos um bloco AI Image em cada coluna e definimos a proporção de cada bloco para “3:2 (paisagem)” (neste exemplo, deixamos as dimensões de pixel no padrão, mas na produção talvez devam ser ajustadas também para produzir um tamanho de arquivo de imagem menor). Para a coluna da esquerda, usamos o texto de prompt de imagem “prédio de apartamentos” e, na coluna da direita, simplesmente “casa”. Aqui estão as visualizações de imagem com as quais vamos, antes de carregá-las e transformar os blocos de imagem AI:

Em seguida, clicamos no botão de marca de seleção na barra de ferramentas para cada bloco AI Image para fazer o upload das imagens e, quando o upload estiver concluído, clicamos no ícone do bloco AI Image à esquerda da barra de ferramentas e selecionamos a opção de transformar cada imagem em um Info Bloco de caixa da Kadence Blocks. Depois que algum texto é adicionado, nossa página fica assim:

Conclusão

Embora o plug-in AI Image Lab seja compatível com Gutenberg praticamente desde seu primeiro lançamento beta, graças à sua integração com a biblioteca de mídia e o seletor de mídia do WordPress, o bloco AI Image leva essa integração para o próximo nível, permitindo que os usuários criem, visualizem, e carregue imagens geradas por IA diretamente no contexto em que serão usadas, facilitando a escolha de imagens que funcionem bem com o conteúdo ao redor, para encontrar a proporção correta e visualizar o produto final. Com compatibilidade (opcional) com o plug-in Kadence Blocks integrado, o AI Image Lab é uma ferramenta poderosa projetada para permitir que os criadores de conteúdo do Gutenberg criem incríveis visuais baseados em blocos!

O uso do AI Image Lab é gratuito, com algumas limitações sobre quantas imagens você pode carregar em seu site a cada 24 horas, quão alta pode ser a resolução dessas imagens, etc. Para obter ainda mais poder na criação de imagens de alta qualidade, confira o Plano AI Image Lab Pro!