Como adicionar imagens laterais em formulários de inscrição

O que você vai aprender

Saiba como incluir uma imagem de alta qualidade à esquerda ou à direita do seu formulário de inscrição para obter uma experiência de inscrição atraente que combine com o design da sua marca.

Antes de começar

As imagens laterais aparecem à esquerda ou à direita do conteúdo do formulário. Ao usar uma imagem em um formulário, há alguns aspectos que o senhor deve ter em mente:

• Há muitos tipos de formatos de imagem para escolher. Os JPEGs equilibram bem a qualidade e o tamanho para imagens coloridas, enquanto os PNGs podem manter imagens transparentes ou logotipos com aparência nítida. 
• Certifique-se de usar uma imagem de qualidade razoavelmente alta para obter melhores resultados. 
  
  • Tente manter suas imagens entre 600 e 1000 px de largura e menos de 2000 px de altura para imagens de largura total para equilibrar a qualidade e o tempo de carregamento. Imagens que não sejam de largura total podem ser menores que 600px
• Como acontece com todas as imagens visualizadas na Web, os tamanhos de arquivo maiores levam a tempos de carregamento mais lentos.
  • Procure usar um tamanho de arquivo de 50-100 KB para imagens laterais e menos de 200 KB para imagens de fundo para garantir que a imagem tenha alta qualidade sem deixar o site lento.
• Adicione texto alternativo à sua imagem para que os formulários sejam acessíveis a todos os visitantes do site. 

Como os formulários de inscrição 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, mantenha imagens de alta resolução, 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 cada lado do conteúdo do formulário de inscrição:

1. Navegue até a guia Sign-up forms (Formulários de inscrição ).
2. Ao lado do formulário, clique nos três pontos > Edit Form.
   

   Se 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 Form Background (Plano de fundo do formulário ) da seção Styles (Estilos ) e remova a imagem de fundo. Em seguida, role para baixo até Form Styles (Estilos de formulário ) e remova qualquer excesso de preenchimento no lado direito ou esquerdo. 

3. Na seção Styles (Estilos ), navegue até a seção Side Image (Imagem lateral ) e selecione o lado em que deseja adicionar uma imagem (esquerdo ou direito).
   
4. Clique no espaço reservado para a imagem vazia na visualização do formulário.
5. Clique em Browse Image Library para adicionar uma imagem de 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 de qualidade razoavelmente alta para obter melhores resultados. Como acontece com todas as imagens visualizadas na Web, arquivos maiores levam a tempos de carregamento mais lentos. Procure usar um tamanho de arquivo de 50 a 100 KB para imagens laterais, a fim de garantir que a imagem tenha alta qualidade sem deixar o site lento. 

Opções de exibição de imagens laterais

Estilos de formulário

Por padrão, os formulários com imagens laterais são definidos para 780px de largura com a largura da imagem lateral definida como Medium. O senhor pode usar as seções Width (Largura) e Minimum height (Altura mínima) para ajustar o tamanho do formulário. Se quiser que a imagem lateral ocupe mais ou menos espaço no formulário, ajuste o tamanho na seção Side Image (por exemplo, pequeno, médio, grande, personalizado). 

A imagem lateral do seu formulário ficará oculta em dispositivos móveis por padrão para otimizar a experiência móvel, pois o espaço da tela em dispositivos móveis é limitado. Se quiser que a imagem lateral seja exibida em todos os dispositivos, clique na imagem na visualização, role até Show on (Mostrar em ) e selecione All devices (Todos os dispositivos).

Estilos de imagem lateral

Use a seção Styles (Estilos ) das configurações de Side Image (Imagem lateral ) para escolher como a imagem será exibida. 

• Texto alternativo
  Adicione texto alternativo à sua imagem para que ela seja acessível a todos que visitam seu site.
• Posição da imagem
  Isso determina como a imagem se ajustará à área da imagem lateral. Selecione uma das seguintes opções: 
  • Contenha
    A imagem completa aparecerá dentro da seção e não será cortada. 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 lateral da imagem. Algumas partes da imagem podem ser cortadas para permitir que a imagem preencha o espaço. 
  • Personalizar
    Selecione sua própria largura para a imagem.
• Horizontal Alignment (Alinhamento horizontal ) e Vertical Alignment(Alinhamento vertical)
  Permitem que o senhor escolha se a imagem está centralizada ou alinhada à parte superior, inferior, esquerda ou direita da área da imagem.
• Cor de fundo
  Se estiver usando uma imagem menor em seu formulário, defina uma cor de fundo para preencher o espaço vazio atrás dela.

Recursos adicionais

• Práticas recomendadas para criar e-mails e formulários acessíveis 
• Compreensão de estilos para um formulário de registro
• Como começar a usar o Canva