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
- Accessibility in emails and forms best practice reference
Learn how to make your emails and sign-up forms more accessible. When designing your emails and signup forms, you’ll want to make sure your designs are accessible to all of your recipients.
- Understanding styles for a sign-up form
Learn how to use Klaviyo’s sign-up form builder to design your form by editing the design settings available in the Styles section. Style settings apply across your sign-up form, including in all of a form’s steps and in its success message.
- Getting started with Canva for Images
Learn how to integrate Klaviyo with Canva in order to bring images from Klaviyo into Canva, and designs from Canva into your Klaviyo image library. Once Canva designs are in your Klaviyo image library, you can use them within email templates, SMS content, sign-up forms, and more.