Como usar um bloco de divisão em um e-mail
O que você vai aprender
Saiba como usar um bloco de divisão para organizar conteúdo lado a lado na Klaviyo.
Quando usar um bloco de divisão
Há 3 maneiras de organizar conteúdo lado a lado usando o editor de e-mail do Klaviyo: bloco de divisão, colunas e bloco de tabela. Cada opção oferece certas vantagens e concessões. Um bloco de divisão é melhor quando:
- Você precisa de 2 colunas e quer controle total sobre a largura de cada uma.
- Você quer colocar texto ou imagens lado a lado.
- Você quer escolher se as colunas são empilhadas no mobile ou permanecem lado a lado.
Saiba mais sobre blocos de divisão, colunas e tabelas no gráfico abaixo.
Layout do conteúdo | Quantidade de colunas | Opções de largura | Tipos de conteúdo permitidos | As colunas podem ser empilhadas na visualização para dispositivos móveis? |
Bloco de divisão | 2 | Controle preciso (Use Estilos > Layout) | Imagem ou texto | Sim |
Colunas | 1-4 | Seleção limitada | Qualquer tipo de bloco de conteúdo (por exemplo, bloco de texto, bloco de imagem, bloco de citação de avaliação) | Sim |
Bloco de tabela | Qualquer número | Controle preciso (Use Largura da coluna > Manual) | Imagem ou texto | Não |
Tabelas podem ser um desafio para a acessibilidade, pois os leitores de tela têm dificuldade para interpretá-las.
Adicione um bloco de divisão a um modelo de e-mail
Para usar o empilhamento em dispositivos móveis e as prévias em dispositivos móveis, verifique se a opção Otimizar para dispositivos móveis está ativada nas configurações Estilos > Otimização para dispositivos móveis do e-mail.
- Em um modelo de e-mail, arraste um bloco Divisão para a tela.
- Em Seletor de colunas, alterne entre os lados esquerdo e direito da divisão.
- Em Conteúdo da coluna, escolha se o lado da divisão atualmente selecionado deve conter uma imagem ou texto.
- Para texto, clique duas vezes no texto no editor de e-mail e insira seu conteúdo. Para uma imagem, use os controles de imagem na barra lateral para selecionar ou fazer upload de uma imagem.
- Repita o processo para o outro lado da divisão.
- Abra a aba Estilos do bloco.
- Em Layout, altere Col 1 width ou Col 2 width para definir as larguras das colunas como porcentagens. A outra coluna se ajusta automaticamente para que o total permaneça em 100%.
- Defina o Espaçamento para ajustar o espaço entre as colunas em pixels.
- Em Empilhamento em dispositivos móveis na guia Estilos do bloco, escolha Da esquerda para a direita ou Da direita para a esquerda para empilhar as colunas, ou Sem empilhamento para mantê-las lado a lado.
- Clique em Prévia e, em seguida, alterne entre Desktop e Dispositivo móvel para conferir as larguras das colunas, o espaçamento e o empilhamento.
Recursos adicionais
- Como criar blocos dinâmicos em um e-mail de fluxo
Saiba como usar blocos de tabela dinâmica para adicionar informações de produtos e outros eventos aos seus fluxos acionados por métrica. Neste artigo, você vai aprender a criar um bloco dinâmico usando o exemplo de um lembrete de carrinho abandonado que mostra os produtos que foram deixados para trás.
- Como adicionar colunas a um e-mail
Saiba como adicionar colunas aos seus e-mails quando necessário para deixar seus modelos mais atraentes visualmente. Existem algumas formas de adicionar colunas aos seus modelos. Este artigo vai abordar todas as formas de adicionar colunas ao seu e-mail e como otimizar seu design com base no dispositivo.