Componentes da estrutura structure-components

Use os Componentes da estrutura no espaço de design visual para definir a estrutura do seu conteúdo. Ao adicionar e mover elementos estruturais com ações simples de arrastar e soltar, é possível definir rapidamente a forma do layout de conteúdo. Cada componente da estrutura abrange o espaço horizontal e você pode empilhá-los para criar o layout verticalmente.

Biblioteca de estrutura structure-library

Na parte superior da biblioteca Componentes, a seção Estruturas exibe os componentes de estrutura disponíveis:

Ícone

Componente

Descrição

Ícone de coluna

1:1 coluna

Um container de coluna única que preenche a largura do espaço.

Ícone de coluna

Coluna 1:2 à esquerda

Um contêiner de duas colunas que usa uma proporção 1:2 para preencher a largura do espaço. A primeira coluna (à esquerda) ocupa um terço da largura e a segunda (à direita) ocupa os dois terços restantes.

Ícone de coluna

Coluna 1:3 à esquerda

Um contêiner de duas colunas que usa uma proporção 1:3 para preencher a largura do espaço. A primeira coluna (à esquerda) ocupa um quarto da largura e a segunda (à direita) ocupa os três quartos restantes.

Ícone de coluna

Coluna 2:1 à direita

Um contêiner de duas colunas que usa uma proporção de 2:1 para preencher a largura do espaço. A primeira coluna (à esquerda) ocupa dois terços da largura e a segunda (à direita) ocupa o terço restante.

Ícone de coluna

2:2 coluna

Um contêiner de duas colunas que usa uma proporção 2:2 para preencher a largura do espaço. As colunas da esquerda e da direita têm a mesma largura.

Ícone de coluna

Coluna 3:1 à direita

Um contêiner de duas colunas que usa uma proporção de 3:1 para preencher a largura do espaço. A primeira coluna (à esquerda) ocupa três quartos (75%) da largura e a segunda (à direita) ocupa o quarto restante (25%).

Ícone de coluna

3:3 coluna

Um contêiner de três colunas que usa uma proporção 3:3 para preencher a largura do espaço. Todas as três colunas têm a mesma largura.

Ícone de coluna

4:4 coluna

Um contêiner de quatro colunas que usa uma proporção 4:4 para preencher a largura do espaço. Todas as quatro colunas têm a mesma largura.

Ícone de coluna

n:n coluna

Uma estrutura de coluna personalizável que preenche o espaço de acordo com as colunas definidas. Você define o número de colunas (entre duas e dez) e define a largura de cada coluna individualmente. Saiba mais

Adicionar componentes de estrutura add-structure-components

Ao projetar o conteúdo para seu email, página de aterrissagem ou fragmento, adicione cada componente de estrutura para criar o layout. Arraste um item da seção Estruturas à esquerda e solte-o na tela. Você pode usar a barra de ferramentas para selecionar uma coluna e usar as guias Configurações e Estilos no painel direito para definir os parâmetros do componente ou da coluna selecionada.

{width="800" modal="regular"}

Barra de ferramentas do componente component-toolbar

A barra de ferramentas é exibida na tela quando você a seleciona na tela. As ferramentas disponíveis fornecem uma maneira fácil de selecionar uma coluna e aplicar funções de componentes.

{width="150"}

Ferramenta

Nome

Uso

{width="40"}

Ativar conteúdo condicional

(Emails e fragmentos) Ative variantes condicionais para o componente.

{width="100"}

Selecionar uma coluna

Selecione uma coluna por número. Quando a coluna é selecionada, é possível aplicar configurações e estilos de coluna.

{width="40"}

Duplicar

Crie uma cópia do componente e adicione-a diretamente abaixo.

{width="40"}

Excluir

Remova o componente.

Configurações de componentes component-settings

Depois de adicionar um componente, ele é selecionado no espaço de design visual e suas propriedades são exibidas no painel direito. A guia Configurações é exibida por padrão. Você também pode selecionar um componente de estrutura a qualquer momento para alterar as configurações.

Opções de exibição

Se desejar excluir o componente da exibição de desktop ou dispositivo móvel, altere a configuração Opções de Exibição. O padrão, Mostrar em todos os dispositivos, habilita a exibição em todos os dispositivos.

{width="400" modal="regular"}

Escolha outra configuração para tornar o componente exclusivo por tipo de dispositivo:

Cabeçalho e rodapé

Você pode designar um componente de estrutura como o cabeçalho ou rodapé do HTML na mensagem de email ou página de aterrissagem. Com o componente de estrutura selecionado na tela, clique na opção Cabeçalho ou Rodapé. Pode haver apenas um cabeçalho ou rodapé e a opção não estará disponível se outro componente for atribuído.

{width="600" modal="regular"}

Você pode remover a designação do cabeçalho ou rodapé selecionando o componente e clicando na opção para removê-lo.

Colunas empilhadas stacked-columns

Para telas menores ou janelas de exibição, as colunas no componente de estrutura são exibidas como empilhadas, a menos que você altere a configuração padrão. Com o componente de estrutura de várias colunas selecionado, altere a configuração Não empilhar colunas em dispositivos móveis movendo o controle deslizante para a direita.

{width="250"}

Estilos de componentes component-styles

Depois de adicionar um componente, ele é selecionado no espaço de design visual e suas propriedades são exibidas no painel direito. Você também pode selecionar um componente a qualquer momento para alterar as configurações e os estilos.

Histórico background

Com a guia Estilos selecionada no painel direito, use a seção Plano de fundo para definir a cor e a imagem opcional a serem usadas como plano de fundo para o componente de estrutura.

Cor do plano de fundo

Marque a caixa de seleção e clique no quadrado de cores para escolher uma cor no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou use o controle deslizante de cores e o campo de cores para selecionar a cor.

{width="300"}

Imagem de plano de fundo background-image

Mova o seletor de alternância para ativar as configurações de imagem do plano de fundo.

{width="250"}

Clique em Selecionar ativo para abrir o seletor de ativos, onde é possível escolher uma imagem da biblioteca do Assets.

Use a opção Posicionamento da imagem para escolher como a imagem preenche o componente de estrutura. As configurações de posicionamento seguem os atributos padrão de alinhamento e preenchimento da imagem de plano de fundo do HTML.

{width="250"}

Outros estilos other-styles

Você pode aplicar outros estilos de componentes de estrutura para ajustar a exibição na mensagem de email ou página de aterrissagem. Para obter um estilo além dessas opções internas, consulte Adicionar CSS personalizado para o seu conteúdo.

Colunas columns

Use a ferramenta Selecionar uma coluna na barra de ferramentas do componente para selecionar uma coluna. Em seguida, você pode usar a barra de ferramentas da coluna para alterar a seleção da coluna, remover a coluna ou aplicar variações de conteúdo condicional à coluna. Os parâmetros da coluna são exibidos nas guias Configurações e Estilos à direita.

{width="500"}

Ferramenta

Nome

Uso

—

Limpar coluna

Limpe o conteúdo na coluna. Veja a primeira ferramenta na figura da barra de ferramentas da coluna.

{width="40"}

Ativar conteúdo condicional

(Emails e fragmentos) Ative variantes condicionais para a coluna.

{width="100"}

Selecionar uma coluna

Selecione uma coluna por número. Quando a coluna é selecionada, é possível aplicar configurações e estilos.

Alterar n:n colunas change-nn-columns

As larguras das colunas são estáticas para a maioria dos componentes da estrutura. Ao adicionar o componente n:n coluna, você pode alterar o número de colunas e o tamanho da coluna. O componente de coluna n:n começa com cinco colunas de largura igual (20%).

Com o componente selecionado na tela, use a opção Colunas número no painel direito para alterar o número de colunas. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de colunas ou insira o número no campo.

{width="650" modal="regular"}

Na tela de desenho, mova o ícone de dimensionamento de coluna para ajustar a largura da coluna selecionada. À medida que você aumenta ou diminui a largura, a coluna adjacente também se ajusta para que todas as colunas ocupem 100% da largura do componente.

{width="500" modal="regular"}

Estilos de coluna column-styles

Com a coluna selecionada na tela de desenho, é possível definir estilos para serem aplicados a essa coluna.

Árvore de navegação navigation-tree

No espaço de design visual, é possível acessar os componentes estruturais, incluindo colunas e conteúdo, usando a árvore de navegação. Clique no ícone da Árvore de navegação ( ) à esquerda para exibir a árvore.

{width="800" modal="regular"}

O elemento Body é a raiz da estrutura de árvore. Clique em qualquer um dos componentes ou elementos filho da coluna na árvore para selecioná-lo na tela de desenho. As guias Configurações e Estilos à direita exibem os parâmetros desse componente ou coluna.

{width="800" modal="regular"}