Quer melhorar o apelo visual das suas etiquetas de Escolha de imagem no WPForms? Quer esteja a utilizar Escolhas de imagem para caixas de verificação ou campos de escolha múltipla, pode criar efeitos de foco envolventes e estilizar as suas etiquetas utilizando CSS.
Este guia mostra-lhe várias formas de personalizar as etiquetas de Escolha de Imagem para criar uma experiência de formulário mais interactiva e visualmente apelativa.
Configurar o seu formulário
Vamos começar por criar um formulário e adicionar os nossos campos. Também vamos incluir um campo de Caixa de verificação que também está a utilizar as Opções de imagem.
Se precisar de ajuda para criar um formulário com as opções de imagem, consulte o nosso guia sobre como configurar as opções de imagem.
Personalizar etiquetas de seleção de imagem
Estes exemplos de CSS ajudá-lo-ão a criar vários efeitos visuais para as suas etiquetas Image Choice. Em todos os exemplos, lembre-se de substituir form#wpforms-form-1000 com o seu próprio ID de formulário. Se precisar de ajuda para encontrar o seu ID de formulário, consulte o nosso guia sobre procurar IDs de formulários e campos.
Sobrepor etiquetas ao pairar
Este estilo cria um efeito de sobreposição elegante em que as etiquetas aparecem sobre a imagem quando os utilizadores passam o cursor do rato:
Adicionar efeitos de margem e caixa
Utilize as propriedades border e box para criar molduras, limites ou cantos arredondados à volta das etiquetas.
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-label {
border-radius: 5px;
border: 1px solid #ccc;
padding: 5px;
}
Rodar imagens ao passar o rato
Ao aplicar a regra CSS transformSe o seu formulário for selecionado, introduziremos um toque agradável nas suas imagens. Ao passar o cursor do rato, estas rodam elegantemente, injectando um elemento lúdico e interativo no seu formulário. Este efeito envolvente cativa os visitantes à medida que navegam pela sua seleção de imagens.
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-item:hover {
transform: rotate(10deg);
}
Sombra de caixa ao passar o rato
Para melhorar as suas imagens com um toque de profundidade e dimensão, estamos a implementar um efeito de sombra de caixa ao passar o rato e a remover o contorno predefinido ao passar o rato. À medida que os visitantes deslizam sobre cada imagem, uma sombra subtil emerge graciosamente, impregnando o seu formulário com uma sensação cativante de profundidade e interatividade.
form#wpforms-form-1000 .wpforms-image-choices label:hover {
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
Combinar vários efeitos (borda, rótulos e sombra de caixa ao passar o mouse)
Neste último exemplo, vamos combinar algumas das CSS que já utilizámos.
Quando passar o rato sobre a imagem, verá a etiqueta sobre a imagem.
E estes são apenas alguns exemplos da facilidade com que pode personalizar as etiquetas das Escolhas de imagens. Também gostaria de remover os espaços em branco que vê à volta das imagens? Consulte o nosso artigo sobre Como remover os espaços em branco à volta das opções de imagem.