So passen Sie die Farben Ihres WordPress-Designs an

Möchten Sie erfahren, wie Sie die Farben des WordPress-Designs anpassen können? Vielleicht haben Sie ein Thema gefunden, das Ihnen gefällt, aber die Farbpalette passt nicht zu Ihrer Marke. Es gibt einige Möglichkeiten, wie Sie die Themenfarben an Ihre Bedürfnisse anpassen können.

In diesem Beitrag sehen wir uns an, wie Sie die Farben Ihres WordPress-Designs mit und ohne Code anpassen können.

Erstellen Sie jetzt Ihr WordPress-Formular

Wie ändere ich die Farbe eines Kontaktformulars in WordPress?

Nachdem Sie Ihre Themenfarben angepasst haben, möchten Sie, dass die Formulare auf Ihrer Website Stil und Farben entsprechen. Der einfachste Weg, dies zu tun, ist die Verwendung von WPForms.

Neben der Untersuchung, wie Sie Ihre Designfarben mit und ohne Code anpassen können, werden wir uns auch genauer ansehen, wie Sie WPForms verwenden, um ein Formular-Styling zu erreichen. Kurz gesagt, die neue Funktion "Formularstile" macht es super einfach, Ihre Formulare an Ihre Website anzupassen. Wir zeigen Ihnen wie.

So passen Sie die Farben Ihres WordPress-Designs an

Lassen Sie uns einsteigen und mit dem Anpassen beginnen!

Anpassen der Farben Ihres WordPress-Designs mit Code

Wenn Sie sich mit CSS auskennen und mit der Bearbeitung der Dateien und des Stylesheets Ihrer Website vertraut sind, ist die Verwendung von Code zum Anpassen Ihres WordPress-Designs eine Option.

Wir empfehlen jedoch nicht, die vorhandene Datei zu bearbeiten. Stattdessen empfehlen wir die Verwendung eines anderen Plugins zum Erstellen und Anpassen von untergeordneten Themen. Untergeordnete Themen sind im Wesentlichen Kopien Ihres Themas mit denselben Attributen.

Das Bearbeiten eines Child-Themes ist das Bearbeiten einer Kopie. Wenn Sie Fehler machen, können Sie stattdessen zum übergeordneten Design zurückkehren. Es wird Ihnen auch helfen, Probleme zu vermeiden, wenn es Updates für das übergeordnete Thema gibt.

Schritt 1: Installieren Sie ein Child-Theme-Plugin

Hier sind ein paar Plugin-Vorschläge, die Sie verwenden können, um untergeordnete Themen zu erstellen:

• Child-Theme-Konfigurator
• Child-Theme-Assistent
• Child-Theme generieren
• WP-Child-Theme-Generator

In unserem Beispiel verwenden wir den Child Theme Configurator.

Schritt 2: Konfigurieren Sie Ihr Child-Theme

Nachdem Sie das Child-Theme-Plugin Ihrer Wahl installiert und aktiviert haben, müssen Sie für Konfigurationen darauf zugreifen.

Wo Ihr Child-Theme-Plugin in WordPress erscheint, kann je nach verwendetem Plugin unterschiedlich sein. Wir haben auf den Child-Theme-Konfigurator zugegriffen, indem wir auf das Menü Tools in der linken Seitenleiste geklickt haben.

Sobald Sie Ihr Plugin gefunden haben, sollten Sie Einstellungen oder Optionen zum Erstellen eines untergeordneten Designs sehen.

Wir haben festgestellt, dass der Child Theme Configurator Sie durch den Prozess führt, was hilfreich ist und eine ansonsten verwirrende Aufgabe vereinfacht.

Nach dem Klicken auf die Schaltfläche „Analysieren“ wurden weitere Schritte angezeigt. Arbeiten Sie sich durch jeden dieser Schritte nach unten, und am Ende sind Sie bereit, Ihr untergeordnetes Thema zu erstellen.

Schritt 3: Passen Sie Ihr Child-Theme an

Nachdem Sie Ihr neues untergeordnetes Design erstellt haben, klicken Sie im linken Seitenleistenmenü auf Aussehen » Designdatei-Editor .

Sobald Sie sich im Designdatei-Editor befinden, sehen Sie auf der rechten Seite ein Dropdown-Menü, in dem Sie das zu bearbeitende Design auswählen können. Ihr Child-Theme sollte auf dieser Liste stehen.

Sobald Sie Ihr untergeordnetes Thema ausgewählt haben, gibt es zwei Möglichkeiten, wie Sie die Dateien ändern können.

Die erste Möglichkeit besteht darin, das CSS direkt im Dateieditor zu bearbeiten, wie wir oben gezeigt haben. Die zweite Möglichkeit besteht darin, den integrierten CSS-Editor zu verwenden, um eine Vorschau der Änderungen anzuzeigen, während Sie sie vornehmen.

Um auf den integrierten CSS-Editor zuzugreifen, gehen Sie zu Darstellung » Anpassen im linken Seitenleistenmenü.

Auf dieser Seite sehen Sie eine Live-Vorschau Ihrer WordPress-Website sowie Optionen zum Vornehmen von Änderungen.

Wie Sie im Optionsmenü sehen können, gibt es mehrere Stiländerungen, die Sie ohne Code vornehmen können. Dies kann von Ihrem Design und den bereits konfigurierten Einstellungen abhängen.

Innerhalb dieser Optionen finden Sie Einstellungen zum Aktualisieren Ihrer Designfarben.

Sie können beispielsweise auswählen, welchen Schaltflächenstil Ihre Website verwenden soll.

Und nachdem Sie den Stil ausgewählt haben, können Sie benutzerdefinierte Farboptionen für Schaltflächentext, Hintergrund und Rahmen auswählen.

Sie können auch die Schriftfamilien für Überschriften und Textkörper ändern.

Beachten Sie jedoch, dass sich unten eine Menüoption für Zusätzliches CSS befindet. Sie werden möglicherweise feststellen, dass für bestimmte Änderungen, die Sie an den Farben Ihres Websitedesigns vornehmen möchten, immer noch CSS-Code erforderlich ist. Wenn dies der Fall ist, geben Sie den erforderlichen CSS-Code unter diesem Dropdown-Menü ein und sehen sich die Änderungen live an, während Sie sie vornehmen.

Anpassen der Farben Ihres WordPress-Designs ohne Code

Wenn Sie befürchten, beim Ändern des CSS in Ihrem Design etwas kaputt zu machen, gibt es eine noch einfachere Möglichkeit, die Farben Ihres WordPress-Designs anzupassen. Sie können ein No-Code-Plugin wie Thrive Themes verwenden.

Der Thrive Theme Builder ist ein Theme-Anpasser, mit dem Sie Ihr eigenes Theme ohne die Verwendung oder Kenntnis von Code erstellen können. Es verfügt über eine Drag-and-Drop-Oberfläche für die Frontend-Anpassung, und Sie haben die Kontrolle über alle Designaspekte.

Schritt 1: Installieren Sie das Plugin und schließen Sie den Site Wizard ab

Nachdem Sie sich für ein Konto registriert und das Plugin installiert haben, startet der Site-Assistent.

Sie können den Website-Assistenten auch jederzeit über das Dashboard von Thrive Themes erneut aufrufen.

Wenn Sie den Website-Assistenten starten, fordert er Sie auf, Ihr Logo hochzuladen, und zeigt Ihnen, wie es auf einem hellen und einem dunklen Hintergrund aussehen wird. Auch wenn Sie einen hellen Hintergrund verwenden, ist der dunkle Hintergrund wichtig, da die Benutzer auf ihren Geräten den Dunkelmodus verwenden.

Danach können Sie Ihre Markenfarbe auswählen. Wenn Sie auf das Farbfeld klicken, haben Sie die Möglichkeit, entweder eine Farbe mit der Farbauswahl auszuwählen oder einen Hex-Farbcode zu verwenden.

Während Sie die einzelnen Schritte des Assistenten durchlaufen, erstellen Sie Ihr eigenes benutzerdefiniertes Design.

Während Sie den Rest des Site-Assistenten abschließen, passen Sie das Erscheinungsbild Ihrer Website an, ohne auch nur eine Zeile Code schreiben zu müssen. Thrive Theme Builder macht es super einfach, ein Website-Theme zu erstellen, das einzigartig für Sie ist.

Schritt 2: Nehmen Sie zusätzliche Anpassungen über das Dashboard vor

Wie bereits erwähnt, können Sie jederzeit zum Assistenten zurückkehren, wenn Sie Änderungen vornehmen möchten. Sie können auf diese Funktionen auch über das Dashboard zugreifen. Nachdem Sie den Assistenten abgeschlossen haben, klicken Sie sich durch die anderen Optionen, um weitere Anpassungen vorzunehmen.

Wenn Sie die Farben und das Logo Ihrer Website schnell ändern oder ein Favicon für Ihre Website hochladen möchten, können Sie über den Assistenten oder über den Abschnitt „Branding“ im Dashboard darauf zugreifen. Ebenso können Sie hier auch die Typografie aktualisieren.

Nachdem Sie alle Aspekte Ihrer Seite angepasst haben, können Sie Ihr Design speichern und sofort verwenden.

Ändern der Farbe des Kontaktformulars in WordPress

Wie bereits erwähnt, möchten Sie nach der Aktualisierung Ihrer Themenfarben sicherstellen, dass alles andere übereinstimmt.

Nehmen Sie zum Beispiel Ihre Formulare. Wenn Sie eine Seite mit abgerundeten Kanten und sanften Farben haben, wird eine kastenförmige Form mit rechteckigen Schaltflächen und einem scharfen Kontrast wahrscheinlich zumindest ein wenig fehl am Platz aussehen.

Geben Sie WPForms ein. Die Gestaltungsoptionen für Formulare machen das Anpassen Ihrer Formulare an Ihr Thema zum Kinderspiel.

Schritt 1: Installieren und aktivieren Sie WPForms

Vielleicht sind wir voreingenommen, aber wir denken, dass WPForms der beste Formularersteller da draußen ist. Mit der benutzerfreundlichen Drag-and-Drop-Oberfläche können Sie innerhalb von Minuten ansprechende, professionelle Formulare erstellen und veröffentlichen. Außerdem können Sie mit den Formularstiloptionen Ihre Formularstile einfach an Ihr WordPress-Site-Theme anpassen.

Um mit dem Gestalten von Formularen zu beginnen, die zu den Farben Ihres WordPress-Designs passen, installieren und aktivieren Sie WPForms. Wenn Sie eine Anleitung benötigen, lesen Sie diese Anleitung für Anfänger zur Installation von WordPress-Plugins.

Schritt 2: Erstellen Sie ein Formular in WPForms

Sobald Sie WPForms installiert und aktiviert haben, ist es an der Zeit, Ihr Formular zu erstellen!

Verwenden Sie die Schaltfläche Neu hinzufügen , um zu beginnen.

Der Formularersteller wird geöffnet, damit Sie das perfekte Formular für Ihre Anforderungen erstellen können. Erstellen Sie eine von Grund auf neu oder wählen Sie aus Hunderten von anpassbaren Vorlagen.

Wenn Ihr Formular vollständig ist, können Sie es mit der Schaltfläche „Einbetten“ in einen Beitrag oder eine Seite auf Ihrer Website einbetten. Sie können das Formular in eine vorhandene Seite einbetten oder eine neue Seite dafür erstellen.

Schritt 3: Bearbeiten Sie Formularstile im WordPress-Blockeditor

Öffnen Sie als Nächstes den Seitenentwurf im Seitenersteller. Für diesen Schritt müssen Sie den WordPress-Blockeditor verwenden, um auf die Anpassungsoptionen zuzugreifen.

Klicken Sie auf das eingebettete Formular. Die Gestaltungsoptionen für das Formular werden in der Seitenleiste auf der rechten Seite des Seiteneditors geöffnet. Sie werden sehen, dass Sie Feld-, Beschriftungs- und Schaltflächenstile ändern können.

Wenn Sie Feldstile bearbeiten, können Sie die Größe und den Randradius für den Textbereich anpassen. Je höher der Randradius, desto runder wird der Textbereich. Sie können auch Farben für Hintergrund, Rahmen und Text auswählen.

Als nächstes können Sie den Etikettenstil ändern. Entscheiden Sie, welche Farbe das Etikett haben soll, und wählen Sie dann Farben für das untergeordnete Etikett und den Hinweis sowie die Fehlermeldung aus.

Schließlich können Sie Anpassungen am Schaltflächenstil vornehmen.

Um es noch einfacher zu machen, klicken Sie, nachdem Sie Ihre Formularstilauswahl getroffen haben, auf Erweiterte Optionen. Sie sehen ein Feld mit CSS-Code.

Dies ist der benutzerdefinierte Code für Ihr Formular. WPForms generiert es automatisch für Sie. Sie können es in allen Ihren Formularen kopieren und in das Feld „Erweitert“ einfügen, damit alle Stile übereinstimmen.

Und wenn Sie von vorne beginnen möchten, klicken Sie einfach auf Stileinstellungen zurücksetzen, um die gesamte Formatierung zu löschen.

Danach können Sie Ihr vollständig gestaltetes Formular veröffentlichen.

Jetzt passen Ihre Formulare zu den Farben Ihres WordPress-Designs, und Sie mussten keine einzige Codezeile schreiben, um dies zu erreichen.

Erstellen Sie als Nächstes das perfekte interaktive Formular

Sind Sie bereit, Ihr Formspiel zu verbessern? Jetzt, da Sie wissen, wie Sie die Farben Ihres WordPress-Designs anpassen und Ihre Formulare passend gestalten können, ist es an der Zeit, es auf die nächste Stufe zu bringen. Wir haben einige Tipps zum Erstellen des perfekten interaktiven Formulars, um die Benutzer zu beschäftigen und die Conversions zu steigern.

Möchten Sie eine unwiderstehliche Kundenumfrage versenden? Sehen Sie sich diese Beispiele für Kundenumfragen an, um sich inspirieren zu lassen!

Erstellen Sie jetzt Ihr WordPress-Formular

Sind Sie bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularerstellungs-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel weitergeholfen hat, folgen Sie uns bitte auf Facebook und Twitter, um weitere kostenlose WordPress-Tutorials und -Anleitungen zu erhalten.