--- title: "Construtor de e-mails" slug: "email-builder" status: "new" updated: 2026-06-11T13:10:53Z published: 2026-06-12T10:31:00Z canonical: "docs.xtremepush.com/email-builder" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt > Use this file to discover all available pages before exploring further. # Construtor de e-mails Crie e-mails bonitos facilmente com nosso construtor de arrastar e soltar O construtor de e-mails permite que você crie designs de e-mail de alta qualidade e responsivos. Você pode abrir o construtor na aba [**E-mail**](/documentation/docs/pt-br/campaign-email) do construtor de campanhas, clicando em **Criar com o construtor**. ## Entendendo o construtor: configurações, linhas e conteúdo Uma das maiores forças do construtor de arrastar e soltar é que ele oferece aos profissionais criativos uma flexibilidade de design tremenda. Isso é alcançado separando os conceitos de: - *Configurações*: que se aplicam a toda a mensagem. - *Linhas*: linhas de conteúdo na mensagem, que podem ser adicionadas, removidas, copiadas e movidas. - *Conteúdo*: blocos individuais de conteúdo: imagens, texto, botões, etc., que também podem ser adicionados, removidos, copiados e movidos. ### Configurações Essas são as configurações gerais da mensagem, que são herdadas pelas linhas e blocos de conteúdo, o que é muito útil para construir uma mensagem coerente rapidamente. É possível configurar os seguintes elementos: - **Largura da área de conteúdo**: defina a largura de exibição da sua área de conteúdo. Isso é usado para limitar a exibição de mensagens quando o dispositivo tem uma tela maior que a largura. Você pode pensar nisso como uma largura máxima para essa área de conteúdo. Em dispositivos pequenos, isso será ignorado. - **Alinhamento das áreas de conteúdo**: selecione se o conteúdo está centralizado ou alinhado à esquerda - **Cor de fundo**: a cor padrão de fundo da mensagem. Você poderá sobrescrevê-lo em qualquer linha, coluna ou bloco de conteúdo ao definir propriedades para esses elementos. - **Cor de fundo da área de conteúdo**: a cor padrão de fundo para a área de conteúdo, que é a área para a qual você definiu a largura acima. - **Fonte padrão**: a família de fontes padrão que todos os elementos de conteúdo da mensagem irão herdar. É possível sobrescrever essa seleção no nível do bloco de conteúdo. - **Cor do link**: a cor padrão do link que todos os links herdarão a menos que você a substitua para elementos individuais. ### Linhas Esta aba permite que você selecione diferentes tipos de linhas para inserir na mensagem. Linhas são unidades estruturais que definem a composição horizontal de uma seção da mensagem usando colunas. Você pode usar de uma a seis colunas dentro de uma linha. Usar mais de uma coluna permite que você coloque diferentes elementos de conteúdo lado a lado. Você pode adicionar qualquer número de linhas às suas mensagens (arrastando e soltando), independentemente do modelo que escolheu no início. Cada linha tem suas próprias configurações, o que te dá uma flexibilidade que antes só era alcançada com um modelo de e-mail criado do zero com HTML e CSS. Por exemplo, você pode selecionar uma cor de fundo para toda a linha, apenas para a área da mensagem ou uma coluna específica dentro dela. ### Conteúdo Esta seção inclui uma série de peças que representam os diferentes tipos de conteúdo que você pode usar em sua mensagem. Mais estarão disponíveis no futuro. Para usá-los, basta arrastar um para dentro de uma coluna, ele vai se ajustar automaticamente para a largura da coluna. Cada bloco de conteúdo tem suas próprias configurações, como controle granular sobre o preenchimento (midding). O painel do lado direito muda automaticamente para um painel de propriedades para o elemento de conteúdo selecionado. ![](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/59a186b-1cdbfd3-create_button_settings(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A40Z&se=2026-11-04T10%3A28%3A40Z&sr=c&sp=r&sig=ip%2B1NXW9w5OMI8Gncj5%2Fc47KxWe%2BbOa2Vnp2RZbS%2BDc%3D) > [!TIP] > Ao trabalhar em um novo e-mail, comece pela aba **Configurações** para definir opções gerais para o e-mail, adicione linhas e depois adicione blocos de conteúdo à sua mensagem. ## Seleção de linhas e blocos de conteúdo Dependendo da área que você quer editar, talvez seja necessário selecionar um *bloco de conteúdo* ou *linha*. ### Interagindo com um bloco de conteúdo Se você apenas passar o mouse sobre um bloco de conteúdo (uma imagem no exemplo abaixo), o construtor mostrará um ícone *de movimento* que permite mover esse bloco para outro lugar. ![](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/8289b8c-c3e9e52-Screen_Shot_2018-07-26_at_15.29.24(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A40Z&se=2026-11-04T10%3A28%3A40Z&sr=c&sp=r&sig=ip%2B1NXW9w5OMI8Gncj5%2Fc47KxWe%2BbOa2Vnp2RZbS%2BDc%3D) No entanto, se você clicar no bloco de conteúdo, o esboço do conteúdo será destacado e dois botões aparecerão permitindo **que você exclua** o bloco ou **crie uma cópia**. Além disso, o menu lateral direito mostrará a seção de propriedades daquele bloco de conteúdo, onde você pode modificar uma série de propriedades para esse elemento. ### Interagindo com uma fileira Ao passar o mouse sobre uma área livre de conteúdo (ou seja, a linha onde o conteúdo está localizado) será novamente destacado o contorno de toda a linha e aparecerá o ícone para **mover** a linha dentro do design do e-mail. ![](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/cb4c198-2966f02-Screenshot_2021-03-17_at_16.16.39(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A40Z&se=2026-11-04T10%3A28%3A40Z&sr=c&sp=r&sig=ip%2B1NXW9w5OMI8Gncj5%2Fc47KxWe%2BbOa2Vnp2RZbS%2BDc%3D) Assim que você clica em uma linha, o construtor desmarca qualquer bloco de conteúdo que já tenha sido selecionado, seleciona a linha e mostra dois ícones que permitem **remover** ou clonar toda a linha e todo o seu conteúdo. Nesse caso, o menu à direita exibirá uma série de propriedades que se aplicam àquela coluna dentro da linha (que pode conter mais de uma coluna). Condições de exibição podem ser aplicadas a qualquer linha. ## Editando as propriedades de uma linha Primeiro, passe o mouse sobre uma área da linha que não tenha conteúdo de mensagem e clique nela para selecioná-la. O lado direito do construtor vai mudar para a aba *de linhas* , que mostra algumas propriedades que se aplicam a toda a linha (por exemplo, cor de fundo, imagem de fundo, preenchimento de volume, etc.)... ![](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/80ef0a4-274b2d5-Screenshot_2021-03-16_at_17.35.47(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A40Z&se=2026-11-04T10%3A28%3A40Z&sr=c&sp=r&sig=ip%2B1NXW9w5OMI8Gncj5%2Fc47KxWe%2BbOa2Vnp2RZbS%2BDc%3D) ... e alguns que se aplicam a cada coluna da linha. Uma linha pode conter várias colunas, e você pode controlar várias configurações independentemente para cada coluna. ![](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/a85192a-492b59e-new_editor_drag-n-drop_columns(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A40Z&se=2026-11-04T10%3A28%3A40Z&sr=c&sp=r&sig=ip%2B1NXW9w5OMI8Gncj5%2Fc47KxWe%2BbOa2Vnp2RZbS%2BDc%3D) Quando estiver satisfeito com as configurações de cada linha, salve clicando em [para reutilizar para modelos futuros](/documentation/docs/pt-br/builder-saving-content-rows) ## Visualizando o e-mail Para gerar uma prévia do e-mail, no topo clique em **Prévia**. Isso permite que você veja uma prévia de como o e-mail ficaria nas versões desktop e mobile. Ativar o controle deslizante de pré-visualização do modo escuro permite que os usuários simulem a experiência de renderizar designs em dispositivos com o modo escuro ativado. > [!NOTE] > Modo escuro > > O modo escuro não é padronizado entre clientes de e-mail. A prévia do modo escuro permite que você tenha uma ideia de como o e-mail ficaria com uma inversão de cor completa (cores claras se tornam escuras e cores escuras se tornam claras), mas para melhores resultados sempre é recomendado testar seu e-mail enviando-o para diferentes clientes de e-mail. ### Pré-visualização de texto Clique em Visualização de Texto para ver uma versão apenas de texto do seu e-mail. ## Recursos adicionais Temos uma seção completa de documentação sobre como trabalhar com recursos específicos dentro do construtor: - [Usando o gerenciador de arquivos](/documentation/docs/pt-br/builder-using-the-file-manager) - [Procure fotos gratuitas de banco de imagens para usar nos seus e-mails](/documentation/docs/pt-br/builder-search-free-stock-photos) - [Adicionando uma imagem de fundo aos seus e-mails](/documentation/docs/pt-br/builder-adding-a-background-image) - [Editando propriedades da imagem](/documentation/docs/pt-br/builder-editing-image-properties) - [Uso de imagens dinâmicas e personalizadas](/documentation/docs/pt-br/builder-dynamic-images) - [Adicionando vídeo ao seu e-mail](/documentation/docs/pt-br/builder-adding-video-to-email) - [Trabalhando com HTML personalizado](/documentation/docs/pt-br/builder-working-with-custom-html) - [Salvando linhas de conteúdo para uso futuro](/documentation/docs/pt-br/builder-saving-content-rows) - [Ocultando conteúdo em dispositivos móveis](/documentation/docs/pt-br/builder-hiding-content-mobile)