Como Personalizar os Rótulos para Escolhas de Imagem

Quer melhorar o apelo visual dos seus rótulos de Escolha de Imagem no WPForms? Quer esteja a usar Escolhas de Imagem para campos de Checkboxes ou de Múltipla Escolha, pode criar efeitos de hover envolventes e estilizar os seus rótulos usando CSS.

Este guia irá mostrar-lhe várias formas de personalizar os seus rótulos de Escolha de Imagem para criar uma experiência de formulário mais interativa e visualmente apelativa.

Configurar o Seu Formulário

Vamos começar por criar um formulário e adicionar os nossos campos. Incluiremos também um campo Checkbox que está a usar Escolhas de Imagem.

Se precisar de ajuda para criar um formulário com Escolhas de Imagem, por favor, consulte o nosso guia sobre configuração de Escolhas de Imagem.

Personalização dos Rótulos de Escolha de Imagem

Estes exemplos de CSS irão ajudá-lo a criar vários efeitos visuais para os seus rótulos de Escolha de Imagem. Para todos os exemplos, lembre-se de substituir form#wpforms-form-1000 pelo ID do seu próprio formulário. Se precisar de ajuda para encontrar o ID do seu formulário, por favor, consulte o nosso guia sobre encontrar IDs de formulário e campo.

Sobrepor Rótulos ao Pairar

Este estilo cria um elegante efeito de sobreposição onde os rótulos aparecem sobre a imagem quando os utilizadores pairam:

Adicionar Efeitos de Borda e Caixa

Use propriedades de borda e caixa para criar molduras, bordas ou cantos arredondados em torno dos rótulos.

form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-label {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 5px;
}

Rodar Imagens ao Pairar

Ao aplicar a regra CSS transform, introduziremos uma reviravolta deliciosa nas suas imagens. Ao pairar, elas rodarão elegantemente, injetando um elemento interativo lúdico no seu formulário. Este efeito envolvente cativa os visitantes enquanto eles 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 Pairar

Aprimorando as suas imagens com um toque de profundidade e dimensão, estamos a implementar um efeito de sombra de caixa ao pairar e a remover a borda padrão ao pairar. À medida que os seus visitantes deslizam sobre cada imagem, uma sombra subtil emerge graciosamente, imbuindo o seu formulário com um sentido 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 Múltiplos Efeitos (Borda, Rótulos e Sombra de Caixa ao Pairar)

Neste último exemplo, vamos combinar alguns dos CSS que já usámos.

Quando pairar sobre a imagem agora, verá o rótulo sobre a imagem.

E esses são apenas alguns exemplos de como pode facilmente personalizar os rótulos para Escolhas de Imagem. Gostaria também de remover o espaço em branco que vê em torno das imagens? Dê uma vista de olhos ao nosso artigo sobre Como Remover o Espaço em Branco em Torno das Escolhas de Imagem.