How to Customize the Labels for Image Choices

Markdown anzeigen

Möchten Sie die visuelle Attraktivität Ihrer Bildauswahl-Labels in WPForms verbessern? Egal, ob Sie Bildauswahlen für Kontrollkästchen- oder Multiple-Choice-Felder verwenden, Sie können ansprechende Hover-Effekte erstellen und Ihre Labels mit CSS gestalten.

Diese Anleitung zeigt Ihnen verschiedene Möglichkeiten, Ihre Bildauswahl-Labels anzupassen, um ein interaktiveres und visuell ansprechenderes Formularerlebnis zu schaffen.

Einrichtung Ihres Formulars

Beginnen wir mit der Erstellung eines Formulars und dem Hinzufügen unserer Felder. Wir werden auch ein Kontrollkästchen-Feld einfügen, das Bildauswahlen verwendet.

Wenn Sie Hilfe beim Erstellen eines Formulars mit Bildauswahlen benötigen, lesen Sie bitte unsere Anleitung zum Einrichten von Bildauswahlen.

Anpassen von Bildauswahl-Labels

Diese CSS-Beispiele helfen Ihnen, verschiedene visuelle Effekte für Ihre Bildauswahl-Labels zu erstellen. Ersetzen Sie für alle Beispiele form#wpforms-form-1000 durch Ihre eigene Formular-ID. Wenn Sie Hilfe beim Auffinden Ihrer Formular-ID benötigen, lesen Sie bitte unsere Anleitung zum Auffinden von Formular- und Feld-IDs.

Labels beim Hovern überlagern

Dieser Stil erzeugt einen eleganten Überlagerungseffekt, bei dem Labels beim Hovern des Benutzers über dem Bild erscheinen:

Mit diesem CSS können Sie die Labels einfach so gestalten, dass sie beim Hovern über den Bildern erscheinen

Rahmen und Box-Effekte hinzufügen

Verwenden Sie Rahmen- und Box-Eigenschaften, um Rahmen, Umrandungen oder abgerundete Ecken um die Labels zu erstellen.

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

In diesem CSS-Beispiel platzieren wir einen Rahmen um das Label

Bilder beim Hovern drehen

Durch Anwenden der CSS-Regel transform führen wir eine reizvolle Wendung bei Ihren Bildern ein. Beim Hovern drehen sie sich elegant und verleihen Ihrem Formular ein spielerisches interaktives Element. Dieser fesselnde Effekt fesselt die Besucher, während sie Ihre Bildauswahl durchgehen.

form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-item:hover {
    transform: rotate(10deg);
}

In diesem Beispiel wenden wir einen Kippeffekt an, wenn Sie mit der Maus über das Bild fahren

Box-Schatten beim Hovern

Wir verbessern Ihre Bilder mit einem Hauch von Tiefe und Dimension, indem wir beim Hovern einen Box-Schatten-Effekt implementieren und den Standardrahmen beim Hovern entfernen. Wenn Ihre Besucher über jedes Bild gleiten, erscheint ein subtiler Schatten, der Ihrem Formular eine fesselnde Tiefe und Interaktivität verleiht.

form#wpforms-form-1000 .wpforms-image-choices label:hover {
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

Mit diesem CSS-Beispiel versehen wir beim Überfahren mit der Maus einen Schatten auf den Kasten

Mehrere Effekte kombinieren (Rahmen, Labels und Box-Schatten beim Hovern)

In diesem letzten Beispiel werden wir einige der bereits verwendeten CSS-Codes kombinieren.

Wenn Sie jetzt über das Bild fahren, sehen Sie das Label über dem Bild.

Mit diesem CSS können wir ein bisschen von allem kombinieren

Und das sind nur einige Beispiele, wie einfach Sie die Labels für Bildauswahlen anpassen können. Möchten Sie auch den Leerraum um die Bilder entfernen? Sehen Sie sich unseren Artikel Entfernen des Leerraums um Bildauswahlen an.

Anpassen der Beschriftungen für Bildauswahlen

KI-Zusammenfassung