Visão geral do estúdio

O estúdio é o construtor visual de e-mails do MailInApp. Todo projeto no seu painel abre nele.

Começando a partir de um propósito

Novos projetos podem começar a partir de um propósito: pesquisa, promoção, newsletter, evento, transacional, painel, turma ou time esportivo, escolhido na criação do projeto. Escolher um abre um carrossel com os modelos iniciais reais daquele tema, cada um uma pré-visualização grande e realmente renderizada, não um mockup. Percorra as opções e escolha uma, e ela preenche a tela com um layout inicial construído a partir de blocos comuns (um bloco de Avaliação para pesquisas, um Hero e um cupom para promoções, e assim por diante). Depois disso, não há nada de especial neles: edite, remova ou adicione blocos como faria com qualquer outro. Começar em branco pula essa etapa e abre a tela padrão em branco.

Veja o Guia rápido para o seletor, Respostas e webhooks para saber como o propósito molda o painel de respostas, e Modelos iniciais e sua própria biblioteca para salvar seus próprios modelos de forma privada ou publicá-los na galeria da comunidade.

O espaço de trabalho

• Tela — o centro do espaço de trabalho: uma renderização ao vivo do seu e-mail. Clique em qualquer elemento para selecioná-lo; uma barra de navegação (breadcrumb) mostra o caminho do corpo do e-mail até ele, e cada elemento ancestral é clicável.
• Barra lateral esquerda — quatro painéis, abertos um de cada vez ao clicar no respectivo ícone: Inserir (a paleta de inserção de blocos — arraste blocos de layout como seção, texto, imagem, botão, divisor, espaçador, e blocos interativos como Carrossel, Enquete, Formulário, Contagem regressiva, Quiz para a tela; uma caixa de busca filtra tudo por nome), Árvore (a estrutura completa do e-mail — reordene blocos, selecione elementos aninhados como um único slide de Carrossel, recolha contêineres, oculte um bloco da saída com o alternador de olho sem excluí-lo, ou deixe uma anotação para você mesmo renomeando com duplo clique; qualquer contêiner também traz um + que abre um seletor pesquisável com exatamente os tipos de filho que ele aceita — o de um Formulário se expande nas mesmas variantes de campo da seção Entradas da paleta de inserção — para que você adicione sem arrastar, e o mesmo seletor aparece no lugar do placeholder "Solte aqui" de um contêiner vazio na tela), Dados (Fontes de dados e tags de personalização — conecte fontes, escolha o público, navegue pelos campos), e Tema (veja Temas abaixo).
• Inspetor — o painel à direita para o que estiver selecionado, dividido em quatro abas: Conteúdo (texto, links, campos específicos do bloco, como as opções de uma Enquete), Estilo (cores, espaçamento, bordas, CSS personalizado), Lógica (vinculação de repetição, condições de exibição) e Ações (mover, duplicar, excluir, ⧉ Envolver em… — o inverso do + do painel Árvore: solta a seleção atual dentro de uma nova Seção, Colunas, Repetição ou elemento HTML que legalmente a comporte exatamente onde ela está, por exemplo dando a um botão avulso seu próprio fundo, ou transformando um bloco em um layout de duas colunas — e Salvar como componente, veja Componentes reutilizáveis). Uma caixa de busca acima das abas filtra campos nas quatro ao mesmo tempo.

Modos de pré-visualização

Acima da tela, um alternador Editar / Pré-visualizar controla o que você está vendo:

• Editar — a estrutura de blocos, selecionável e editável.
• Pré-visualizar resolve tags de personalização, condições de exibição e repetições em relação a uma linha de destinatário escolhida, com um seletor de nível logo abaixo: Visualização ao vivo (a mesma página React em que os destinatários chegam), Envio — moderno e Envio — Outlook renderizam o HTML realmente compilado que a caixa de entrada dos seus destinatários receberia — o nível Outlook força as mesmas ramificações de comentário condicional que um cliente Outlook real seguiria, para que você possa verificar o fallback sem precisar ter uma cópia do Outlook. Um alternador de modo escuro simula o nível de visualização ao vivo da forma como o modo escuro de um cliente de e-mail o renderizaria.

Um controle de zoom (50–150%, ou ajustar à largura) redimensiona a tela sem alterar o design original.

Desfazer, refazer e salvamento automático

Toda edição no design — arrastar um bloco, digitar em um campo, mudar uma cor — pode ser desfeita com Ctrl/Cmd+Z (refazer: Shift+Ctrl/Cmd+Z ou Ctrl/Cmd+Y), inclusive de dentro de um campo de texto. Edições rápidas (digitar uma frase, arrastar um controle deslizante) se agrupam em uma única etapa de desfazer, em vez de uma por tecla pressionada.

O estúdio salva automaticamente de forma contínua — não há botão de salvar, e fechar a aba não perde nada; o projeto reabre exatamente de onde você parou. Se você e um colega de equipe tiverem o mesmo projeto aberto ao mesmo tempo, o segundo salvamento mostra um aviso "Alterado em outro lugar" em vez de sobrescrever o primeiro silenciosamente. Recarregue para obter a versão mais recente, ou Salvar como cópia para manter suas alterações como um novo projeto.

Temas

O painel Tema define um punhado de tokens em todo o projeto (cores brand, accent, text, muted e background, uma pilha de fontes, e o raio de canto padrão do botão), então um rebranding vira uma única edição em vez de caçar o campo de cor de cada bloco. Um campo de cor pode conter uma referência de token, exibida como um seletor de amostras ao lado do campo de cor comum, ou sua própria cor literal. Blocos que já vêm com uma referência de token — botões, ícones sociais, botões de envio de formulário/quiz — mudam de estilo automaticamente quando você altera o token, enquanto qualquer bloco em que você tenha definido uma cor literal mantém essa cor. Projetos sem tema renderizam exatamente como antes; o painel só torna as cores da marca explícitas em vez de códigos hexadecimais copiados e colados.

Biblioteca de mídia

Alguns campos existem só para guardar uma imagem: o bloco Imagem, a imagem de capa/pôster de um bloco de Vídeo/Áudio, a imagem de um slide do Carrossel, a imagem de frente/verso de um Flashcard, e a foto do bloco Produto. Esses campos mostram uma miniatura e um botão Escolher imagem… no Inspetor, em vez de uma caixa de URL. Clicar nele abre uma grade com tudo que você já enviou para sua conta (não apenas para este projeto), com um botão Enviar novo logo ali para um PNG, JPEG, WebP ou GIF de até 5MB. Escolha um e ele é gravado no campo imediatamente, da mesma forma que se você tivesse digitado uma URL. O seletor é apenas uma conveniência de criação, então nada muda em como o bloco é renderizado no e-mail, na visualização ao vivo, ou na tela.

Os uploads são compartilhados entre todos os projetos da sua conta: envie um logo ou a foto de um produto uma vez e reutilize sempre que o seletor aparecer. A biblioteca completa também pode ser navegada a partir de Mídia na navegação do painel, onde você pode enviar, visualizar e excluir arquivos fora de qualquer projeto específico. Excluir um arquivo o remove apenas da biblioteca — um bloco que já tinha essa URL continua renderizando a imagem até que você mesmo a substitua por outra coisa.

O armazenamento conta contra a cota do seu plano (veja preços), exibido como um medidor ao lado dos seus outros usos em Configurações. Alguns campos recebem um link em vez de uma imagem — o link opcional de toque de um slide, o src do próprio arquivo de um bloco de vídeo/áudio, a URL de participação de um link de reunião. Esses continuam sendo caixas de URL simples: o MailInApp só armazena imagens, não arquivos de vídeo/áudio ou páginas arbitrárias.

Componentes reutilizáveis

Construiu algo que vale a pena reutilizar — um cabeçalho estilizado, uma seção de cupom, uma linha de produto? Selecione-o, abra a aba Ações do Inspetor, e Salvar como componente. Ele é salvo na sua conta (não apenas neste projeto) e passa a aparecer em Meus componentes, no topo da paleta de inserção, em todo projeto a partir daí. Arraste ou clique para inserir uma cópia nova e totalmente independente; renomeie ou exclua o componente salvo na mesma lista. Isso é diferente das composições prontas da seção Prontos (veja Blocos interativos): elas vêm com o MailInApp para todo mundo, enquanto um componente salvo é seu, construído a partir dos seus próprios designs.

Visualização ao vivo

O botão Visualização ao vivo ↗ da barra de ferramentas abre a versão web hospedada do e-mail — uma página totalmente interativa renderizada a partir do seu design atual. Ele é ao mesmo tempo uma ferramenta de pré-visualização para você e o fallback universal que os destinatários recebem quando o cliente de e-mail deles não consegue renderizar interatividade. O link é assinado e válido por 30 dias; veja Links de visualização ao vivo.

Redação assistida por IA

Está sem ideia para a linha de assunto? Clique em ✨ Sugerir, ao lado do campo de assunto na página de envio. O MailInApp gera algumas opções com base no nome do projeto, no seu propósito, e em um pequeno trecho do texto já existente no e-mail.

As sugestões são apenas para preencher com um clique — nada é escrito automaticamente no seu projeto. As solicitações de sugestão contam contra a cota mensal da sua conta (veja preços), compartilhada entre todos os projetos e todas as pessoas que os editam. Para construir ou editar o e-mail em si — não apenas um campo — veja o copiloto de IA.

Orçamento de tamanho

O Gmail corta mensagens maiores que aproximadamente 102KB — e um e-mail cortado perde seu bloco <style>, o que desativa silenciosamente toda a interatividade em CSS. O estúdio acompanha o tamanho compilado do seu e-mail em relação a esse orçamento enquanto você constrói, e avisa antes que isso vire um problema. Mais em Exportação e envio.