Eigenes CSS für OuterWhisper hinzufügen

OuterWhisper bietet im Formular-Builder zahlreiche Möglichkeiten, das Aussehen deiner Feedback-Formulare individuell anzupassen. Farben, Abstände, Rahmen und weitere Design-Einstellungen kannst du direkt im Plugin konfigurieren – ganz ohne CSS-Kenntnisse.

Wenn du darüber hinaus eigene CSS-Regeln verwenden möchtest, kannst du dafür die Funktionen von WordPress oder deines aktiven Themes nutzen.

Design direkt in OuterWhisper anpassen

Bevor du eigenes CSS verwendest, solltest du prüfen, ob sich die gewünschte Anpassung bereits über den OuterWhisper Formular-Builder umsetzen lässt.

1. Öffne im WordPress-Backend OuterWhisper → Alle Formulare.
2. Wähle das gewünschte Feedback-Formular aus.
3. Öffne im Formular-Builder den Bereich Styles oder das jeweilge Formularfeld im Editor.
4. Passe die verfügbaren Design-Einstellungen an.
5. Speichere deine Änderungen.

Je nach Formular und Anzeigeart kannst du unter anderem Farben, Rahmen, Abstände und Größen konfigurieren.

Diese Einstellungen sind der einfachste Weg, um deine Feedback-Formulare an das Design deiner Website anzupassen.

Eigenes CSS über WordPress hinzufügen

Wenn du weitergehende Anpassungen benötigst, kannst du eigenes CSS über WordPress einbinden.

Welcher Weg zur Verfügung steht, hängt davon ab, welches Theme du verwendest.

Möglichkeit 1: Zusätzliches CSS im Customizer

Bei klassischen WordPress-Themes findest du häufig die Funktion Zusätzliches CSS im Customizer.

1. Öffne im WordPress-Backend Design → Customizer.
2. Wähle den Bereich Zusätzliches CSS.
3. Füge deine CSS-Regeln ein.
4. Klicke auf Veröffentlichen, um die Änderungen zu übernehmen.

Die CSS-Regeln werden anschließend auf deiner Website eingebunden und können auch zur Gestaltung von OuterWhisper-Formularen verwendet werden.

Hinweis: Der Menüpunkt „Zusätzliches CSS“ ist nicht bei jedem Theme an derselben Stelle verfügbar.

Möglichkeit 2: CSS bei Block-Themes hinzufügen

Wenn du ein modernes Block-Theme verwendest, erfolgt die Gestaltung deiner Website in der Regel über den Website-Editor.

Öffne dazu Design → Editor.

Je nach WordPress-Version findest du unter Stile zusätzliche Optionen für eigene CSS-Regeln.

Falls dein Theme diese Möglichkeit unterstützt, kannst du dort CSS ergänzen, das auch für OuterWhisper-Elemente gilt.

Möglichkeit 3: Theme-eigene CSS-Einstellungen verwenden

Einige Themes bieten eigene Bereiche für benutzerdefiniertes CSS an.

Diese befinden sich beispielsweise unter:

• Design → Theme-Optionen
• Design → Customizer
• einem eigenen Einstellungsmenü des Themes

Die genaue Bezeichnung hängt vom verwendeten Theme ab.

Prüfe gegebenenfalls die Dokumentation deines Themes, um herauszufinden, wo du eigenes CSS hinterlegen kannst.

OuterWhisper-Formulare gezielt gestalten

Wenn du eigene CSS-Regeln verwendest, solltest du möglichst spezifische Selektoren einsetzen, damit sich deine Anpassungen nur auf die gewünschten OuterWhisper-Elemente auswirken.

So vermeidest du, dass andere Formulare, Buttons oder Elemente deiner Website unbeabsichtigt verändert werden.

Um die passenden CSS-Klassen und Selektoren zu finden, kannst du die Entwicklerwerkzeuge deines Browsers verwenden:

1. Öffne eine Seite, auf der dein OuterWhisper-Formular angezeigt wird.
2. Klicke mit der rechten Maustaste auf das gewünschte Element.
3. Wähle Untersuchen beziehungsweise Element untersuchen.
4. Suche im HTML nach den CSS-Klassen des OuterWhisper-Elements.
5. Verwende diese Klassen für deine eigenen CSS-Regeln.

Achte darauf, dass deine Anpassungen auch auf mobilen Geräten funktionieren und die Lesbarkeit sowie Bedienbarkeit des Formulars erhalten bleiben.

Warum gibt es in OuterWhisper kein eigenes CSS-Eingabefeld?

OuterWhisper verwendet für die Gestaltung der Feedback-Formulare einen integrierten visuellen Editor.

Für zusätzliche CSS-Anpassungen kannst du die bereits vorhandenen Funktionen von WordPress oder deines Themes nutzen. Dadurch bleibt die Verwaltung eigener CSS-Regeln an einer zentralen Stelle und es ist kein zusätzlicher CSS-Editor innerhalb von OuterWhisper erforderlich.

Zusammenfassung

Die meisten Design-Anpassungen kannst du direkt im OuterWhisper Formular-Builder unter Styles vornehmen.

Für individuelle CSS-Regeln stehen dir abhängig von deiner WordPress-Installation der Customizer, der Website-Editor oder die Einstellungen deines Themes zur Verfügung.

So kannst du das Aussehen deiner OuterWhisper-Feedback-Formulare flexibel anpassen, ohne zusätzliche CSS-Funktionen im Plugin zu benötigen.