Como adicionar imagens laterais em formulários de registro
O que você vai aprender
Saiba como incluir uma imagem de alta qualidade à esquerda ou à direita do seu formulário de registro para uma experiência de registro envolvente que combine com o design da sua marca.
Antes de começar
As imagens laterais aparecem à esquerda ou à direita do conteúdo do seu formulário. Ao usar uma imagem em um formulário, há alguns pontos a serem considerados:
- Há muitos tipos de formatos de imagem para escolher. Os JPEGs equilibram bem qualidade e tamanho para imagens coloridas, enquanto os PNGs mantêm imagens transparentes ou logotipos com boa nitidez.
- Use uma imagem de qualidade razoavelmente alta para obter os melhores resultados.
- Tente manter suas imagens com largura entre 600 e 1000px e altura inferior a 2000px para imagens de largura total, equilibrando qualidade e tempo de carregamento. Imagens com largura menor que a total podem ter menos de 600px
- Como acontece com todas as imagens vistas na web, arquivos maiores levam a tempos de carregamento mais lentos.
- Procure manter um tamanho de arquivo de 50–100 KB para imagens laterais e menos de 200 KB para imagens de fundo, para garantir que sua imagem tenha alta qualidade sem deixar seu site mais lento.
- Adicione texto alternativo à sua imagem para que seus formulários sejam acessíveis a todos os visitantes do site.
Como os formulários de registro são renderizados em navegadores (ao contrário dos e-mails, que são renderizados em ESPs), há menos recomendações sobre como formatá-los e ajustá-los. Os navegadores podem renderizar imagens de todos os tipos e tamanhos; portanto, em geral, use imagens em alta resolução, com tamanhos de arquivo gerenciáveis, e teste a aparência em cada tipo de dispositivo.
Adicione uma imagem lateral ao seu formulário
Para adicionar uma imagem em qualquer lado do conteúdo do seu formulário de registro:
- Vá até a aba Formulários de registro.
- Ao lado do seu formulário, clique em 3 pontos > Editar formulário.
Se o seu formulário foi criado antes de julho de 2021 e usa uma imagem de fundo alinhada à direita ou à esquerda como imagem lateral, remova-a antes de usar o recurso de imagem lateral. Para fazer isso, navegue até a seção Fundo do formulário na seção Estilos e remova a imagem de fundo. Em seguida, role para baixo até Estilos do formulário e remova qualquer excesso de preenchimento no lado direito ou esquerdo.
- Na seção Estilos, navegue até a seção Imagem lateral e selecione o lado em que você gostaria de adicionar uma imagem (esquerda ou direita).
- Clique no espaço reservado de imagem vazio na prévia do formulário.
- Clique em Procurar na Biblioteca de Imagens para adicionar uma imagem da sua biblioteca de imagens do Klaviyo, fazer upload de uma imagem ou importar uma nova imagem de um URL.
Certifique-se de usar uma imagem com qualidade razoavelmente alta para obter os melhores resultados. Como acontece com todas as imagens visualizadas na web, tamanhos de arquivo maiores resultam em tempos de carregamento mais lentos. Procure ter um tamanho de arquivo de 50–100 KB para imagens laterais, garantindo que a imagem pareça de alta qualidade sem deixar seu site mais lento.
Opções de exibição de imagem lateral
Estilos do formulário
Por padrão, formulários com imagens laterais são configurados com 780 px de largura, com a largura da imagem lateral definida como Médio. Você pode usar as seções Largura e Altura mínima para ajustar o tamanho do formulário. Se você quiser que a imagem lateral ocupe mais ou menos espaço no formulário, ajuste o tamanho na seção Imagem lateral (por exemplo: pequeno, médio, grande, personalizado).
Por padrão, a imagem lateral do formulário ficará oculta em dispositivos móveis para otimizar a experiência em dispositivos móveis, já que o espaço de tela é limitado. Se você quiser que a imagem lateral seja exibida em todos os dispositivos, clique na imagem na prévia, depois role até Mostrar em e selecione Todos os dispositivos.
Estilos de imagem lateral
Use a seção Estilos das configurações de Imagem lateral para escolher como a imagem será exibida.
- Texto alternativo
Adicione um texto alternativo à sua imagem para que ela fique acessível para todas as pessoas que visitam seu site. - Posição da imagem
Isso determina como a imagem se ajustará dentro da área de imagem lateral. Selecione uma das seguintes opções:- Conter
A imagem inteira aparecerá dentro da seção e não será cortada de forma alguma. Se a imagem não se encaixar exatamente na área da imagem, a cor de fundo da seção preencherá as áreas não cobertas. - Capa
A imagem preencherá completamente a área da imagem lateral. Algumas partes da imagem podem ser cortadas para permitir que a imagem preencha o espaço. - Personalizado
Selecione sua própria largura para a imagem.
- Conter
- Alinhamento horizontal e Alinhamento vertical
Essas opções permitem que você escolha se a imagem fica centralizada ou alinhada na parte superior, inferior, esquerda ou direita da área da imagem. - Cor de fundo
Se você estiver usando uma imagem menor no seu formulário, defina uma cor de fundo para preencher o espaço vazio atrás dela.
Recursos adicionais
- Práticas recomendadas de acessibilidade em e-mails e formulários
Saiba como deixar seus e-mails e formulários de registro mais acessíveis. Ao criar seus e-mails e formulário de registro, você vai querer garantir que seus designs sejam acessíveis para todos os seus destinatários.
- Como funcionam estilos de formulários de registro
Saiba como usar o criador de formulários de registro da Klaviyo para criar seu formulário, editando as configurações de design disponíveis na seção Estilos. As configurações de estilo se aplicam a todo o seu formulário de registro, inclusive a todas as etapas do formulário e à mensagem de sucesso dele.
- Guia de introdução ao Canva para imagens
Saiba como integrar o Klaviyo ao Canva para trazer imagens do Klaviyo para o Canva e designs do Canva para a sua biblioteca de imagens do Klaviyo. Depois que os designs do Canva estiverem na sua biblioteca de imagens do Klaviyo, você pode usá-los em modelos de e-mail, conteúdo de SMS, formulário de registro e muito mais.