Começaremos com uma visão geral das estruturas, explicando como elas organizam o conteúdo e definem o layout de e-mail responsivos.

Estruturas:

Aqui temos um modelo criado do zero:

O retângulo azul no seu modelo (atualmente) vazio é, na verdade, uma Estrutura que consiste em uma única coluna! Então, o que exatamente você está vendo, e o que ele pode fazer?

No Topol Template Editor , uma estrutura é o bloco de construção fundamental de um modelo de e-mail. Ela define a estrutura de layout para organizar o conteúdo e ajuda a organizar diferentes seções de um e-mail.

Da mesma forma, uma coluna é uma área designada dentro de cada estrutura que pode ser preenchida com um tipo específico de conteúdo , como por  exemplo: Texto, Imagens, Botões, GIFs e outros. Podemos nos referir a esses tipos como Blocos de Conteúdo (Bloco de Texto, Bloco de Imagem, Bloco de Botão, etc.).

 É importante observar que cada coluna pode conter apenas um bloco , enquanto cada seção pode conter vários blocos .

Principais características das seções

Layout baseado em grade:

• Uma estrutura consiste de uma a quatro colunas , permitindo que você organize o conteúdo de forma flexível e responsiva .

• A imagem abaixo mostra todas as estruturas pré-definidas que você pode arrastar e soltar no modelo. Todas elas têm a mesma funcionalidade; a única diferença está no número e na distribuição espacial das colunas dentro delas.

Aqui está um exemplo de um layout que acabamos de criar arrastando e soltando algumas dessas estruturas em nosso modelo. Este layout consiste em quatro estruturas (cada estrutura ocupa uma linha inteira), enquanto cada estrutura contém um número variável de colunas (para ser específico, a primeira estrutura tem uma coluna, a segunda tem duas, a terceira tem quatro e a última estrutura tem três colunas).

• Cada coluna dentro de uma estrutura pode conter diferentes tipos de blocos de conteúdo (texto, imagens, botões, vídeos, etc.).

Propriedades personalizáveis

• Você pode ajustar a largura, a cor de fundo, os estilos de borda, o preenchimento e as margens de cada estrutura.

• Imagens de fundo podem ser adicionadas para melhorar a estética do design.

• Para configurar as propriedades de toda a estrutura, clique nela no seu modelo e ajuste suas configurações no menu à esquerda.

• Você também pode ajustar as propriedades de cada coluna dentro da estrutura selecionada separadamente . No exemplo abaixo, selecionamos uma estrutura que consiste em quatro colunas.

•  Portanto, temos a capacidade de modificar as propriedades de qualquer uma dessas quatro colunas.

Funcionalidade de arrastar e soltar

• Estruturas podem ser adicionadas, removidas, duplicadas e reorganizadas dentro do editor usando uma interface intuitiva de arrastar e soltar.

• Após clicar em qualquer estrutura, uma borda interativa, como mostrado na imagem abaixo, aparecerá. Você também verá vários botões ao longo dessa borda.

• As funções desses botões são:

  1. Adicione outra estrutura vazia acima .

  2. Adicione um comentário a esta estrutura.

  3. Salve temporariamente uma cópia desta estrutura na área de transferência .

  4. Salve permanentemente a estrutura e seu conteúdo em uma galeria .

  5. Exclua esta estrutura.

  6. Adicione outra estrutura vazia abaixo .

  7. Arraste e solte esta estrutura em qualquer outro lugar do modelo.

  8. Troque esta estrutura pela anterior .

  9. Troque esta estrutura pela abaixo .

Responsividade e otimização para dispositivos móveis

• As estruturas são projetadas para serem totalmente responsivas , garantindo que os modelos de e-mail sejam exibidos corretamente em computadores e dispositivos móveis.

• A opção “Empilhar colunas no celular” modifica o empilhamento automático de colunas no celular para layouts que exigem um formato específico.

• Se esta opção estiver ativada, as colunas dentro de uma seção serão empilhadas umas sobre as outras quando visualizadas no celular. Se estiver desativada, as colunas permanecerão lado a lado.

Estruturas pré-fabricadas para eficiência

• Você pode selecionar entre modelos de estrutura pré-criados para acelerar o processo de design.

• Essas estruturas ainda podem ser personalizadas para atender às necessidades da marca.

• Para visualizar e usar essas estruturas pré-fabricadas, navegue até a guia Pré-fabricadas no menu Conteúdo e selecione uma categoria específica de estruturas ( cabeçalho , conteúdo , comércio eletrônico ou rodapé ).