M\u00f6chten Sie die Farben auf Ihrer WordPress-Website anpassen?<\/p>\n
Farben spielen eine entscheidende Rolle dabei, Ihre Website \u00e4sthetisch ansprechend zu gestalten und Ihre Markenidentit\u00e4t zu etablieren. Gl\u00fccklicherweise macht es WordPress sehr einfach, die Farben auf Ihrer gesamten Website anzupassen. <\/p>\n
In diesem Artikel zeigen wir Ihnen, wie Sie die Farben Ihrer WordPress-Website, einschlie\u00dflich Hintergrund-, Kopfzeilen-, Text- und Linkfarben, ganz einfach anpassen k\u00f6nnen. <\/p>\n Bevor Sie mit der Anpassung der Farben auf Ihrer WordPress-Website beginnen k\u00f6nnen, ist es wichtig, die Farbtheorie zu verstehen.<\/p>\n Die Farbtheorie befasst sich mit Farben und ihrem Zusammenwirken. Es hilft Designern, Farbkombinationen zu erstellen, die sich gegenseitig erg\u00e4nzen.<\/p>\n Bei der Gestaltung einer Website sollten Sie Farben w\u00e4hlen, die zusammen gut aussehen. Dadurch wird Ihre Website f\u00fcr Ihre Besucher attraktiver, was das Benutzererlebnis verbessern und das Engagement steigern kann.<\/p>\n Unterschiedliche Farben k\u00f6nnen bei Menschen unterschiedliche Emotionen und Gef\u00fchle hervorrufen, und die Farbtheorie kann Ihnen dabei helfen, die richtige Kombination f\u00fcr Ihre Website auszuw\u00e4hlen.<\/p>\n Rot wird beispielsweise h\u00e4ufig zur Darstellung von Lebensmitteln und Restaurants verwendet. Andererseits wird Blau h\u00e4ufig auf Banken- und Finanzwebsites verwendet. <\/p>\n Denn Rot kann Gef\u00fchle von W\u00e4rme, Energie und Leidenschaft erzeugen, w\u00e4hrend Blau Selbstvertrauen, Sicherheit und Ruhe bedeutet.<\/p>\n Neben der Erg\u00e4nzung von Farben k\u00f6nnen Sie auch Farbkontraste nutzen, um die Aufmerksamkeit auf wichtige Bereiche Ihres WordPress-Blogs zu lenken. <\/p>\n Dadurch k\u00f6nnen Sie Ihre Inhalte besser lesbar machen, eine starke Markenidentit\u00e4t etablieren und eine bestimmte Atmosph\u00e4re auf der Website erzeugen.<\/p>\n WordPress-Themes steuern, wie der Benutzer Ihre Website sieht. Ein typisches WordPress-Theme besteht aus einer Reihe vorgefertigter Vorlagen, die Sie auf Ihrer Website installieren, um deren Erscheinungsbild und Design zu \u00e4ndern. <\/p>\n Themes machen Ihre Website attraktiver, benutzerfreundlicher und steigern das Engagement.<\/p>\n Sie k\u00f6nnen mit Plugins wie z.\u00a0B. auch Ihre eigenen Themes von Grund auf erstellen SemillaProd <\/a>und das Thrive Theme Builder<\/a>.<\/p>\n Mit WordPress k\u00f6nnen Sie ganz einfach Themen anpassen und Hintergrundfarben, Schriftarten, Schaltfl\u00e4chen und Links \u00e4ndern.<\/p>\n Beachten Sie jedoch, dass einige Themes \u00fcber vordefinierte Farboptionen verf\u00fcgen, w\u00e4hrend andere mehr Flexibilit\u00e4t bei der Auswahl eigener Farboptionen bieten.<\/p>\n Sehen wir uns nun an, wie Sie Farben in WordPress ganz einfach anpassen k\u00f6nnen.<\/p>\n Sie k\u00f6nnen Farben in WordPress mit vielen verschiedenen Methoden anpassen, darunter dem Theme-Customizer, dem vollst\u00e4ndigen Site-Editor, benutzerdefiniertem CSS, Plugins f\u00fcr den Seitenersteller und mehr.<\/p>\n \u00c4ndern Sie die Farben mit dem Theme-Customizer<\/strong><\/p>\n Es ist sehr einfach, Farben mit dem in WordPress integrierten Theme-Customizer zu \u00e4ndern.<\/p>\n Besuchen Sie zun\u00e4chst die Aussehen \u00bb Anpassen<\/strong> Seite aus der Admin-Seitenleiste.<\/p>\n Notiz:<\/strong> Wenn Sie die Registerkarte \u201eAnpassen\u201c in Ihrem WordPress-Dashboard nicht finden, bedeutet das, dass Sie ein Block-Theme verwenden. Scrollen Sie nach unten zum n\u00e4chsten Abschnitt dieses Tutorials, um herauszufinden, wie Sie die Farben in einem Blockdesign \u00e4ndern.<\/p>\n F\u00fcr dieses Tutorial verwenden wir das Standardthema Twenty Twenty-One. <\/p>\n Denken Sie daran, dass der Theme-Customizer je nach Theme, das Sie gerade verwenden, unterschiedlich aussehen kann.<\/p>\n Das Twenty Twenty-One-Design verf\u00fcgt beispielsweise \u00fcber ein Bedienfeld \u201eFarben und Dunkelmodus\u201c, mit dem Benutzer eine Hintergrundfarbe ausw\u00e4hlen und den Dunkelmodus anpassen k\u00f6nnen. <\/p>\n Klicken Sie nach dem \u00d6ffnen des Panels einfach auf die Option \u201eFarbe ausw\u00e4hlen\u201c. Dadurch wird der Farbw\u00e4hler ge\u00f6ffnet, in dem Sie Ihre bevorzugte Hintergrundfarbe ausw\u00e4hlen k\u00f6nnen.<\/p>\n Wenn Sie fertig sind, vergessen Sie nicht, oben auf die Schaltfl\u00e4che \u201eVer\u00f6ffentlichen\u201c zu klicken, um Ihre \u00c4nderungen zu speichern und auf Ihrer Website zu ver\u00f6ffentlichen. <\/p>\n \u00c4ndern Sie die Farben im vollst\u00e4ndigen Site-Editor<\/strong><\/p>\n Wenn Sie ein blockbasiertes Theme verwenden, haben Sie keinen Zugriff auf den Theme-Customizer. Sie k\u00f6nnen jedoch den Full Site Editor (FSE) verwenden, um die Farben Ihrer Website zu \u00e4ndern.<\/p>\n Gehen Sie zun\u00e4chst zu Aussehen \u00bb Herausgeber<\/strong> Bildschirm aus der Admin-Seitenleiste, um den vollst\u00e4ndigen Site-Editor zu starten. <\/p>\n Jetzt m\u00fcssen Sie auf das Symbol \u201eStile\u201c in der oberen rechten Ecke des Bildschirms klicken.<\/p>\n Dadurch wird die Spalte \u201eStile\u201c ge\u00f6ffnet, in der Sie auf das Bedienfeld \u201eFarben\u201c klicken m\u00fcssen.<\/p>\n Hier k\u00f6nnen Sie die Hintergrund-, Text-, Link-, Kopfzeilen- und Schaltfl\u00e4chenfarben des Themas \u00e4ndern.<\/p>\n Wenn Sie fertig sind, klicken Sie auf die Schaltfl\u00e4che \u201eSpeichern\u201c, um Ihre Einstellungen zu speichern.<\/p>\n \u00c4ndern Sie Farben mit benutzerdefiniertem CSS<\/strong><\/p>\n CSS ist eine Sprache, mit der Sie das visuelle Erscheinungsbild Ihrer Website, einschlie\u00dflich ihrer Farben, \u00e4ndern k\u00f6nnen. Sie k\u00f6nnen benutzerdefiniertes CSS in Ihren Designeinstellungen speichern, um Ihre Anpassungen auf Ihre gesamte Website anzuwenden. <\/p>\n Der benutzerdefinierte CSS-Code wird jedoch nicht mehr angewendet, wenn Sie Themes auf Ihrer Website \u00e4ndern oder Ihr bestehendes Theme aktualisieren. <\/p>\n Aus diesem Grund empfehlen wir die Verwendung von WPC-Code<\/a> Plugin, das beste WordPress-Code-Snippets-Plugin auf dem Markt. Dies ist die einfachste M\u00f6glichkeit, benutzerdefinierten CSS-Code hinzuzuf\u00fcgen und erm\u00f6glicht Ihnen die sichere Anpassung der Farben auf Ihrer WordPress-Website.<\/p>\n Zuerst m\u00fcssen Sie das installieren und aktivieren WPC-Code<\/a> Stecker. Weitere Anweisungen finden Sie in unserem Anf\u00e4ngerleitfaden zur Installation eines WordPress-Plugins.<\/p>\n Notiz:<\/strong> Da ist auch ein kostenlose Version von WPCode<\/a> das du nutzen kannst. Wir empfehlen jedoch ein Upgrade auf einen kostenpflichtigen Plan, um das volle Potenzial des Plugins auszusch\u00f6pfen. <\/p>\n Sobald Sie WPCode aktiviert haben, m\u00fcssen Sie die besuchen Code-Snippets \u00bb + Snippets hinzuf\u00fcgen<\/strong> Seite aus der Admin-Seitenleiste.<\/p>\n Klicken Sie einfach auf die Schaltfl\u00e4che \u201eSnippet verwenden\u201c unter der \u00dcberschrift \u201eBenutzerdefinierten Code hinzuf\u00fcgen (neues Snippet)\u201c.<\/p>\n Sobald Sie sich auf der Seite \u201eBenutzerdefiniertes Snippet erstellen\u201c befinden, k\u00f6nnen Sie mit der Eingabe eines Namens f\u00fcr Ihren Code beginnen.<\/p>\n W\u00e4hlen Sie anschlie\u00dfend einfach \u201eCSS-Fragment\u201c als \u201eCodetyp\u201c aus dem Dropdown-Men\u00fc aus.<\/p>\n Als N\u00e4chstes m\u00fcssen Sie den benutzerdefinierten CSS-Code im Feld \u201eCodevorschau\u201c hinzuf\u00fcgen.<\/p>\n F\u00fcr diesen Abschnitt f\u00fcgen wir benutzerdefinierten CSS-Code hinzu, der die Farbe des Textes auf der Website \u00e4ndert:<\/p>\n Scrollen Sie anschlie\u00dfend nach unten zum Abschnitt \u201eEinf\u00fcgung\u201c.<\/p>\n Hier k\u00f6nnen Sie die Option \u201eAutomatisch einf\u00fcgen\u201c w\u00e4hlen, wenn der Code bei der Aktivierung automatisch ausgef\u00fchrt werden soll.<\/p>\n Sie k\u00f6nnen auch einen Shortcode zu bestimmten WordPress-Seiten oder -Beitr\u00e4gen hinzuf\u00fcgen.<\/p>\n Wenn Sie fertig sind, scrollen Sie einfach zum Seitenanfang und stellen Sie den Schalter \u201eInaktiv\u201c auf \u201eAktiv\u201c um.<\/p>\n Abschlie\u00dfend m\u00fcssen Sie auf die Schaltfl\u00e4che \u201eSnippet speichern\u201c klicken, um den CSS-Code auf Ihre Website anzuwenden.<\/p>\n \u00c4ndern Sie die Farben mit SeedProd<\/strong><\/p>\n Sie k\u00f6nnen die Farben auch mit anpassen SemillaProd<\/a> Stecker.<\/p>\n Es ist der beste WordPress-Seitenersteller auf dem Markt, mit dem Sie Themen von Grund auf erstellen k\u00f6nnen, ohne Code zu verwenden.<\/p>\n Zuerst m\u00fcssen Sie das installieren und aktivieren SemillaProd<\/a> Stecker. Weitere Informationen finden Sie in unserer Einsteigeranleitung zur Installation eines WordPress-Plugins.<\/p>\n Gehen Sie nach der Aktivierung zu SeedProd \u00bb Theme Builder<\/strong> Seite aus der WordPress-Admin-Seitenleiste.<\/p>\n Klicken Sie hier oben auf die Schaltfl\u00e4che \u201eTheme Template Kits\u201c.<\/p>\n Notiz:<\/strong> Wenn Sie Ihr eigenes Theme von Grund auf erstellen m\u00f6chten, m\u00fcssen Sie auf die Schaltfl\u00e4che \u201e+ Neue Theme-Vorlage hinzuf\u00fcgen\u201c klicken. <\/p>\n Dadurch gelangen Sie zur Seite \u201eTheme Template Kit Selector\u201c. Hier k\u00f6nnen Sie aus einer der vorgefertigten Themenvorlagen w\u00e4hlen, die SeedProd anbietet.<\/a><\/p>\n Weitere Informationen finden Sie in unserem Tutorial zum einfachen Erstellen eines WordPress-Themes ohne Code.<\/p>\n Nachdem Sie ein Thema ausgew\u00e4hlt haben, werden Sie zur Seite \u201eThemenvorlagen\u201c weitergeleitet.<\/p>\n Hier m\u00fcssen Sie den Schalter \u201eSeedProd Theme aktivieren\u201c auf \u201eJa\u201c stellen, um das Theme zu aktivieren.<\/p>\n Jetzt m\u00fcssen Sie auf einer beliebigen Themenseite auf den Link \u201eLayout bearbeiten\u201c klicken, um den Drag-and-Drop-Editor zu \u00f6ffnen.<\/p>\n Klicken Sie dort unten in der linken Spalte auf das Zahnradsymbol.<\/p>\n Dadurch gelangen Sie zu den \u201eGlobal CSS\u201c-Einstellungen.<\/p>\n Von hier aus k\u00f6nnen Sie die Hintergrundfarben, Texte, Schaltfl\u00e4chen, Links und mehr Ihrer Website anpassen.<\/p>\n Wenn Sie mit Ihrer Auswahl zufrieden sind, klicken Sie auf die Schaltfl\u00e4che \u201eSpeichern\u201c, um Ihre Einstellungen zu speichern.<\/p>\n Alle WordPress-Themes verf\u00fcgen \u00fcber eine Standardhintergrundfarbe. Sie k\u00f6nnen es jedoch problemlos \u00e4ndern, um Ihre Website zu personalisieren und die Lesbarkeit zu verbessern.<\/p>\n Wenn Sie ein Blockdesign verwenden, m\u00fcssen Sie die Hintergrundfarbe mit dem vollst\u00e4ndigen Site-Editor \u00e4ndern.<\/p>\n Zuerst m\u00fcssen Sie zum gehen Aussehen \u00bb Herausgeber <\/strong>Bildschirm aus der Admin-Seitenleiste.<\/p>\n Sobald der vollst\u00e4ndige Site-Editor gestartet ist, klicken Sie auf das Symbol \u201eStile\u201c in der oberen rechten Ecke des Bildschirms.<\/p>\n Klicken Sie anschlie\u00dfend einfach auf das Bedienfeld \u201eFarben\u201c, um weitere Einstellungen zu \u00f6ffnen<\/p>\n Im Bereich \u201eFarben\u201c k\u00f6nnen Sie jetzt die Standardfarbe verschiedener Elemente auf Ihrer Website verwalten.<\/p>\n Hier m\u00fcssen Sie im Abschnitt \u201eElemente\u201c auf die Option \u201eHintergrund\u201c klicken.<\/p>\n Sobald das Bedienfeld \u201eHintergrund\u201c erweitert ist, k\u00f6nnen Sie hier die Hintergrundfarbe Ihrer Website ausw\u00e4hlen.<\/p>\n Alle WordPress-Themes bieten eine Reihe von Standard-Website-Farben, aus denen Sie w\u00e4hlen k\u00f6nnen.<\/p>\n Wenn Sie jedoch eine benutzerdefinierte Farbe verwenden m\u00f6chten, m\u00fcssen Sie auf das Werkzeug \u201eBenutzerdefinierte Farbe\u201c klicken.<\/p>\n Dadurch wird der Farbw\u00e4hler ge\u00f6ffnet, in dem Sie die gew\u00fcnschte Farbe ausw\u00e4hlen k\u00f6nnen.<\/p>\n Sie k\u00f6nnen auch Verlaufsfarben f\u00fcr den Hintergrund Ihrer Website verwenden.<\/p>\n Dazu m\u00fcssen Sie zun\u00e4chst oben auf den Reiter \u201eVerlauf\u201c wechseln.<\/p>\n Anschlie\u00dfend k\u00f6nnen Sie einen Standardverlauf aus dem Design ausw\u00e4hlen oder mit Hilfe des Farbauswahltools Ihre eigenen Verlaufsfarben ausw\u00e4hlen.<\/p>\n Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfl\u00e4che \u201eSpeichern\u201c zu klicken, um Ihre Einstellungen zu speichern.<\/p>\n Sie k\u00f6nnen den Hintergrund Ihrer Website auch mit dem Theme-Customizer, SeedProd und benutzerdefiniertem CSS \u00e4ndern.<\/p>\n Ausf\u00fchrlichere Anweisungen finden Sie in unserer Anleitung zum \u00c4ndern der Hintergrundfarbe in WordPress.<\/p>\n Bei vielen WordPress-Themes ist oben auf der Seite eine Kopfzeile integriert. Es enth\u00e4lt normalerweise Links zu wichtigen Seiten, soziale Symbole, CTAs und mehr.<\/p>\n Wenn Sie ein Block-Theme verwenden, k\u00f6nnen Sie den WordPress-Header ganz einfach mit dem vollst\u00e4ndigen Site-Editor anpassen.<\/p>\n Zuerst m\u00fcssen Sie die besuchen Aussehen \u00bb Herausgeber<\/strong> Bildschirm aus der Admin-Seitenleiste, um den vollst\u00e4ndigen Site-Editor zu starten. W\u00e4hlen Sie dort oben die Vorlage \u201eKopfzeile\u201c durch Doppelklick aus.<\/p>\n Scrollen Sie von hier aus einfach nach unten zum Abschnitt \u201eFarbe\u201c und klicken Sie auf die Option \u201eHintergrund\u201c.<\/p>\n Dadurch wird ein Popup-Fenster ge\u00f6ffnet, in dem Sie eine Standardfarbe f\u00fcr Ihre Kopfzeile ausw\u00e4hlen k\u00f6nnen.<\/p>\n Sie k\u00f6nnen auch eine benutzerdefinierte Farbe ausw\u00e4hlen, indem Sie das Farbauswahl-Tool \u00f6ffnen.<\/p>\n Um Ihren Header mithilfe eines Farbverlaufs anzupassen, m\u00fcssen Sie zur Registerkarte \u201eVerlauf\u201c wechseln.<\/p>\n Anschlie\u00dfend k\u00f6nnen Sie eine Standardverlaufsoption ausw\u00e4hlen oder mit dem Farbw\u00e4hler Ihre eigene anpassen.<\/p>\n Klicken Sie abschlie\u00dfend auf die Schaltfl\u00e4che \u201eSpeichern\u201c, um Ihre Einstellungen zu speichern.<\/p>\n Wenn Sie die Header-Farbe mit dem Theme-Customizer oder zus\u00e4tzlichem CSS \u00e4ndern m\u00f6chten, k\u00f6nnen Sie unseren Einsteigerleitfaden zum Anpassen Ihres WordPress-Headers lesen.<\/p>\n Das \u00c4ndern der Textfarbe kann dazu beitragen, die Lesbarkeit Ihres WordPress-Blogs zu verbessern.<\/p>\n Wenn Sie ein Blockdesign verwenden, m\u00fcssen Sie die Textfarbe mit dem vollst\u00e4ndigen Site-Editor \u00e4ndern. <\/p>\n Sie k\u00f6nnen beginnen, indem Sie die besuchen Aussehen \u00bb Herausgeber<\/strong> Bildschirm aus der Admin-Seitenleiste. Dadurch wird der vollst\u00e4ndige Site-Editor gestartet, in dem Sie auf das Symbol \u201eStile\u201c in der oberen rechten Ecke klicken m\u00fcssen.<\/p>\n Als n\u00e4chstes m\u00fcssen Sie auf das Bedienfeld \u201eFarben\u201c klicken, um auf zus\u00e4tzliche Einstellungen zuzugreifen. <\/p>\n Sobald Sie dort angekommen sind, klicken Sie im Abschnitt \u201eElemente\u201c auf die Option \u201eText\u201c.<\/p>\n Sobald die Textfarbeinstellungen ge\u00f6ffnet wurden, k\u00f6nnen Sie im Abschnitt \u201eStandard\u201c verschiedene Textfarben sehen.<\/p>\n Alternativ k\u00f6nnen Sie auch eine benutzerdefinierte Textfarbe verwenden, indem Sie auf das Werkzeug \u201eBenutzerdefinierte Farbe\u201c klicken und den Farbw\u00e4hler \u00f6ffnen.<\/p>\n Sobald Sie Ihre Wahl getroffen haben, klicken Sie einfach auf die Schaltfl\u00e4che \u201eSpeichern\u201c, um Ihre \u00c4nderungen zu speichern.<\/p>\n Zus\u00e4tzlicher Tipp:<\/strong> Du kannst den … benutzen WebAIM-Kontrastpr\u00fcfungstool<\/a> um zu pr\u00fcfen, ob Hintergrund- und Textfarbe zusammenpassen. Das Tool kann Ihnen dabei helfen, die Lesbarkeit von Texten auf Ihrer Website zu verbessern.<\/p>\n Um die Textfarbe mit CSS, dem Theme-Customizer oder SeedProd anzupassen, m\u00f6chten Sie vielleicht unsere Anleitung zum \u00c4ndern der Textfarbe in WordPress lesen.<\/p>\n Wenn ein Besucher Text auf Ihrer Website ausw\u00e4hlt, wird dieser in einer Hintergrundfarbe angezeigt. Die Standardfarbe ist Blau. <\/p>\n Manchmal passt die Farbe jedoch m\u00f6glicherweise nicht gut zu Ihrem WordPress-Theme und Sie m\u00f6chten sie m\u00f6glicherweise \u00e4ndern.<\/p>\n Durch das Hinzuf\u00fcgen von CSS-Code zu Ihren Designdateien k\u00f6nnen Sie die Farbe der Textauswahl ganz einfach \u00e4ndern. Beachten Sie jedoch, dass der CSS-Code verschwindet, wenn Sie zu einem anderen Theme wechseln oder Ihr aktuelles Theme aktualisieren. <\/p>\n Aus diesem Grund empfehlen wir die Verwendung von WPC-Code<\/a> Plugin, das beste WordPress-Code-Snippets-Plugin auf dem Markt.<\/p>\nWas ist Farbtheorie?<\/h4>\n
Was sind WordPress-Themes? K\u00f6nnen die Themenfarben ge\u00e4ndert werden?<\/strong><\/h4>\n
So passen Sie Farben in WordPress an<\/h4>\n
So \u00e4ndern Sie die Hintergrundfarbe in WordPress<\/h4>\n
So \u00e4ndern Sie die Textfarbe in WordPress<\/h4>\n
So \u00e4ndern Sie die Textauswahlfarbe in WordPress<\/h4>\n