Central de Ajuda
Vibe Block
Crie blocos personalizados exclusivos com IA
O Vibe Block é um novo bloco de biblioteca que usa IA para gerar conteúdo exclusivo com base na sua solicitação. Ao interagir com a IA, você pode criar rapidamente um bloco exclusivo adaptado às suas necessidades e alterá-lo se quiser: editar o conteúdo, o estilo ou o código.
Pode ser necessário ter conhecimentos básicos de HTML, CSS e JavaScript para editar o código do bloco.
Observe que Tilda não presta assistência em questões relacionadas à criação ou edição de código de blocos personalizados.
Observe que Tilda não presta assistência em questões relacionadas à criação ou edição de código de blocos personalizados.
Introdução ao Vibe Block
Adicione um Vibe Block da Biblioteca de Blocos à sua página. Você pode encontrá-lo na categoria “Outros” ou diretamente na lista de categorias.
Digite um comando no campo de entrada do chat para gerar o bloco. Em seguida, clique no botão “Enviar” ou pressione a tecla Enter no teclado.
Para selecionar um modelo de IA para geração de código, clique no nome do modelo no bloco.
Para anexar uma imagem, um arquivo ou um vídeo à sua solicitação, clique no ícone do clipe de papel. Você pode usar o arquivo como conteúdo do bloco ou como referência.
Clique no ícone de ponto de interrogação para ver exemplos de prompts ou criar seu próprio prompt usando esses exemplos.
Clique em qualquer exemplo de prompt para usá-lo.
Você também pode visualizar um exemplo de prompt em uma demonstração ao vivo em uma página separada, como um exemplo de capa.
Para copiar o exemplo e criar o bloco na página, clique em “Copiar o código”.
Clique em “Aplicar prompt” para abrir o editor e modificar sua solicitação.
Assim que o bloco for gerado, o chat de IA exibirá a mensagem “Pronto!”, indicando que o bloco está pronto para uso. Abaixo do prompt, você verá as opções para copiá-lo, regenerá-lo ou excluí-lo.
Os limites de solicitações dependem do seu plano. Por exemplo, os planos pagos Pessoal e Empresarial incluem até 50 solicitações a cada 12 horas e até 100 solicitações por mês. Você pode consultar todos os limites de uso aqui.
No chat, você pode expandir a resposta da IA para visualizar e copiar o código.
Para ver o código completo, clique em “Código” no painel superior para abrir o editor, onde você poderá editar manualmente o código gerado do bloco.
Editando um bloco de Vibe
Para obter o melhor resultado, você pode regenerar o código do bloco usando o mesmo prompt, refinar o prompt original ou inserir uma nova solicitação.
Por exemplo, basta descrever o que precisa ser alterado no bloco, e a IA atualizará o código.
Depois de inserir uma nova solicitação, você não poderá regenerar a solicitação anterior. No entanto, você pode copiar a solicitação anterior e enviá-la como uma nova solicitação no chat.
Por padrão, o bloco exibe a versão mais recente gerada. Para visualizar uma versão anterior, clique no ícone do olho. Para aplicá-la, clique em “Aplicar”.
Com essa opção, você pode alternar entre diferentes versões e selecionar a mais adequada. Para salvar o resultado, basta fechar a janela do chat de IA.
Com essa opção, você pode alternar entre diferentes versões e selecionar a mais adequada. Para salvar o resultado, basta fechar a janela do chat de IA.
Para editar o bloco novamente após fechar o chat, clique no botão “Editar com IA”.
Edição de grupos e elementos por meio do painel Estilo
Para editar um elemento em um bloco criado, clique nele. O painel de estilo e conteúdo será aberto.
Para alternar rapidamente para outro elemento, clique no ícone “Camadas”. O painel “Camadas” será aberto.
Alterne entre as diferentes camadas para selecionar o elemento ou grupo desejado. A camada selecionada fica destacada em cinza.
Você também pode abrir rapidamente o painel Camadas a partir do código do Vibe Block. Clique no ícone Camadas e, em seguida, selecione a camada desejada. O painel de estilos será aberto.
Controles de elementos
Clique no ícone de seta para selecionar rapidamente o grupo pai de um grupo ou elemento aninhado.
Clique no ícone de código para editar o elemento no código.
Para copiar um elemento, clique no ícone de duplicação. Para excluí-lo, clique no ícone da lixeira. Use as setas para cima e para baixo para mover o elemento no painel Camadas e alterar sua ordem.
Para editar um elemento com IA, clique em “Editar com IA”. Um painel para inserir um prompt será exibido. O campo já conterá o caminho para o elemento que você deseja alterar.
Edição do campo de conteúdo
Os itens que você pode editar no campo Conteúdo dependem do elemento selecionado.
No caso de um elemento de texto, você pode editar o texto no campo Conteúdo.
No caso de um elemento de texto, você pode editar o texto no campo Conteúdo.
No caso de uma imagem, você pode substituir ou excluir o arquivo, fazer o upload de uma nova imagem ou selecionar uma imagem da Biblioteca de Imagens.
Em um formulário, aparecerá o botão “Serviços”. Use-o para conectar-se a Tilda , CRM ou outro serviço de coleta de dados.
Para um grupo que contenha elementos, o código será exibido. Você pode editá-lo no campo Conteúdo ou abri-lo diretamente no editor de código.
Edição de estilos
Importante: Alterar um elemento pode afetar a aparência de outros elementos semelhantes no grupo.
Para configurar a responsividade de um grupo ou elemento, selecione o ícone da tela desejada no campo “Pontos de quebra”.
Quatro pontos de quebra estão disponíveis por padrão, mas você pode adicionar valores personalizados. Clique no ícone de engrenagem, selecione “Adicionar”, insira a largura da tela desejada e salve as alterações.
Quatro pontos de quebra estão disponíveis por padrão, mas você pode adicionar valores personalizados. Clique no ícone de engrenagem, selecione “Adicionar”, insira a largura da tela desejada e salve as alterações.
Para um grupo ou elemento, é possível configurar a largura e a altura, o raio dos cantos, a opacidade, bem como as dimensões mínimas e máximas.
Você também pode definir configurações flexíveis para os elementos.
Para grupos e elementos, é possível configurar margens e espaçamento interno, além de alterar a cor de fundo.
As configurações disponíveis podem variar de um bloco para outro. Por exemplo, um bloco pode ter uma configuração de plano de fundo específica, enquanto outro pode não ter. As opções disponíveis dependem do código e do tipo de elemento.
Para adicionar uma borda a um grupo ou elemento, clique em “Borda”. As opções disponíveis serão exibidas no painel de estilos.
Você também pode configurar efeitos adicionais ou adicionar propriedades a um elemento, como animação.
Você também pode configurar efeitos adicionais ou adicionar propriedades a um elemento, como animação.
Edição de conteúdo
Para editar o conteúdo de um Vibe Block, clique em “Conteúdo”.
O painel de edição exibirá campos e elementos que você pode atualizar rapidamente: texto, imagens, ícones da biblioteca e outros elementos de bloco disponíveis.
Importante: O painel “Conteúdo” é específico para cada bloco. Se o elemento de que você precisa não estiver disponível no painel, edite-o no editor de HTML do bloco ou por meio de um prompt.
O Vibe Block em ação: casos de uso
Limites de solicitação para o Vibe Block
O Vibe Block possui limites de solicitações gratuitas incluídos por padrão em todos os planos de preços. A tabela abaixo mostra quantas solicitações você pode fazer a cada 12 horas e por mês, dependendo do seu plano de preços.
Observação: Cada modelo de IA tem seu próprio preço por solicitação. Ao selecionar um modelo, um número é exibido ao lado do nome — esse número representa a quantidade de solicitações que serão utilizadas ao usar esse modelo.
Importante : Alguns modelos pagos não estão incluídos nos limites do seu plano. Para usá-los, compre solicitações adicionais no seu perfil .
Se você atingiu o limite de solicitações da sua conta, pode adquirir solicitações adicionais. Para isso, acesse a página “Compras de solicitações de IA” ou clique no botão “Comprar solicitações” no menu pop-up do chat em bloco.
Na mesma janela, você também pode visualizar o seu limite de solicitações para o dia atual e o total de limites de uso restantes incluídos no plano.
Na mesma janela, você também pode visualizar o seu limite de solicitações para o dia atual e o total de limites de uso restantes incluídos no plano.
Convertendo o Vibe Block em Zero Block
Importante : O recurso de conversão está atualmente em versão beta, portanto, o design convertido pode ser diferente do original.
Você pode converter um Bloco de Vibração gerado em Zero Block Para fazer isso, abra as configurações do Vibe Block e clique em Converter para Zero Block .
Após a conversão, clique em Editor de Blocos para abrir o bloco. Zero Block e personalizar seu design.
Importante : Você não pode converter um Zero Block De volta ao Vibe Block.
Important: When converting a Vibe Block to Zero Block, enable Keep the original Vibe Block to preserve the original.
