Entfernen der Leerzeichen um Bildauswahlen

Möchten Sie den zusätzlichen Platz um Ihre Bilder herum eliminieren, wenn Sie Image Choices für Ihre Checkbox- oder Multiple-Choice-Formularfelder verwenden? Mit nur ein paar Zeilen CSS können Sie dies mühelos erreichen, und wir sind hier, um Sie durch den Prozess zu führen!

Erstellen des Formulars

Beginnen Sie zunächst mit der Erstellung Ihres Formulars in WPForms. Sobald Sie Ihr Formular erstellt haben, fügen Sie die benötigten Felder hinzu, einschließlich des Multiple-Choice-Feldes, das als Grundlage für unsere Bildauswahl dienen wird.

Wenn Sie sich nicht sicher sind, wie Sie Image Choices einrichten, können Sie unsere Dokumentation zum Hinzufügen von Image Choices zu WPForms lesen. Klicken Sie einfach hier für detaillierte Anweisungen.

Entfernen des Leerzeichens

Wenn Sie sich nicht sicher sind, wie oder wo Sie CSS zu Ihrer Website hinzufügen können, finden Sie in diesem Tutorial eine Anleitung.

Für alle Formen

Wenn Sie Ihrem Formular Bildauswahlen hinzufügen, wird standardmäßig aufgrund von CSS-Polsterung ein Leerraum um das Bild herum angezeigt. Diese Leerstelle ist in der folgenden Abbildung zu sehen:

Um diese Leerzeichen zu entfernen, müssen Sie den folgenden CSS-Code kopieren und in Ihre Website einfügen:

span.wpforms-image-choices-label {
    display: none !important;
}

.wpforms-field-label-inline {
    line-height: 0 !important;
}

label.wpforms-field-label-inline {
    padding: 0 !important;
}

Dieser CSS-Code entfernt nicht nur den Leerraum um die Bilder, sondern blendet auch die mit den einzelnen Bildern verbundenen Beschriftungen aus, so dass die Bilder für sich stehen können.

Für ein bestimmtes Formular

So entfernen Sie diese Leerzeichen für die Formular-ID 1328müssen Sie den folgenden CSS-Code kopieren und in Ihre Website einfügen:

form#wpforms-form-1328 span.wpforms-image-choices-label {
    display: none !important;
}
 
form#wpforms-form-1328 .wpforms-field-label-inline {
    line-height: 0 !important;
}
 
form#wpforms-form-1328 label.wpforms-field-label-inline {
    padding: 0 !important;
}

Und das war's! Sie haben erfolgreich den Leerraum um die Bilder in Ihrem Formular entfernt. Warum lesen Sie nicht weitere Artikel über die Gestaltung von Bildauswahlen? Werfen Sie einen Blick auf unseren Artikel über die Anpassung der Beschriftungen für Bildauswahlen.