GP Customizer | GeneratePress in 9 Schritten anpassen

GP Customizer – Seite 2

Farbeinstellungen im GP Customizer

Während die Farbauswahl beim GP Customizer in der Basis-Version wie bei allen kostenlosen Themes recht überschaubar ist, bietet das Premium Theme die individuelle Anpassung für die unterschiedlichsten Bereiche an. Dementsprechend verbergen sich hinter dem Menüpunkt Farben recht viele Unterpunkte.

Global Colors

Nachdem du dein Farbkonzept für die Website entwickelt hast, kannst du als erstes deine Global Colors (vorherrschenden Farben) festlegen (s. Abb. unten linke Spalte). Das heißt, dass du die voreingestellten Farben des Themes durch deine eigenen ersetzt. Dazu klickst du auf einen Farbpunkt und gibst entweder den Hex-Code deiner Farbe ein oder wählst eine Farbe über das Farbfeld aus.

Jeder Farbpunkt (von links nach rechts) hat eine andere Bedeutung. Abgesehen von den beiden Leit-/Hauptfarben Contrast und Accent, die du auch so verwenden solltest, ist natürlich, abhängig von deinen Prioritäten, auch jede andere Zuordnung möglich. Bei den Angaben in Klammern handelt es sich nur um Beispiele.

• Contrast: Deine Hauptfarbe (Branding / Corporate Design )
• Contrast-2 (2. Hauptfarbe, z. B. für die Schrift)
• Contrast-3 (dunklere Hintergrundfarbe)
• Base (hellere Hintergrundfarbe)
• Base-2 (hellste Hintergrundfarbe)
• Base-3 (Neutraler Hintergrund, z. B. weiß)
• Accent (Kräftige Kontrastfarbe z. B. für Buttons / Links)

Falls du dein Farbkonzept modifizieren möchtest, kannst du die Farben jederzeit ändern, Farbpunkte entfernen (mit dem Cursor darüber fahren und auf das „X“ klicken) oder neue hinzufügen (+). Diese Einstellungen solltest du auf jeden Fall nutzen, da dein Farbschema anschließend ebenfalls im Gutenberg Editor in der Farbwahl für Schriften, Hintergrund, usw. angezeigt wird. Mit einem Klick setzt du so die „richtige“ Farbe ein und ersparst dir die wiederholte Eingabe deiner eigenen Farb-Codes. Farbabweichungen aufgrund versehentlicher Eingabefehler oder einer Schätzung „so müsste der Farbton eigentlich aussehen“ werden somit vermieden.

Zweckgebundene Farben

Um die Farben für einen bestimmten Bereich anzupassen, klickst du auf den Pfeil neben dem betreffenden Unterpunkt. Für jeden Bereich vom Body bis zum Back to Top-Button (Zurück zum Anfang) kannst du die Hintergrund- (Background) und Textfarbe individuell einstellen. Darüber hinaus hast du für einige Elemente noch zusätzliche Optionen. Da manche Bezeichnungen (noch) nicht vollständig ins Deutsche übersetzt sind, füge ich diese im Klammern hinzu.

• Body (gesamte Website): Link
• Header: Site Title (Name deiner Website), Tagline (Untertitel/Slogan), Link
• Forms (Formulare): Border (Rand)
• Content (Inhalt): Link, Beitrags-,Seitentitel, Archive Content Title (Archiv-Inhalts-Titel), Entry Meta … (Meta-Daten Eintrag wie Kategorie, Schlagwörter,…) Heading (Überschrift) H1 bis H6
• Sidebar- / Footer-Widget (Widgets in der Seitenleiste / im Fußbereich): Link, Widget Titel
• Fußzeile: Link

Während du für die meisten Anpassungen nur eine Farbe angeben kannst, bestimmst du beispielsweise für Links jeweils eine eigene Farbe als Initial (Ausgangsfarbe) und Hover (beim darüber schweben) Color. Für Links im Header und den Navigationstext hast du darüber hinaus die Möglichkeit, eine dritte Farbe für besuchte (visited) Links bzw. den aktuell geöffneten Punkt deines Menüs (current) einzustellen.

Alle Farben, die du hier im GP Customizer festlegst, wirken sich auf die gesamte Website aus. Das bedeutet, dass z. B. ein roter Button immer automatisch rot ist, sobald du in einer Seite / einem Beitrag im Gutenberg Editor einen Button einsetzt. Das hat den Vorteil, dass du, falls dir z. B. rote Buttons nicht mehr gefallen, im Customizer mit einer einmaligen Farbanpassung alle Buttons auf deiner Website gleichzeitig von rot z. B. in blaue Buttons umwandeln kannst. Das erspart bei einem Farbwechsel das Aufrufen und die Korrektur auf jeder einzelnen Seiten / in jedem Beitrag.

Jedoch kann die einmal voreingestellte Farbe für besondere Zwecke im Einzelfall auch geändert werden. In der rechten Seitenleiste des Editors findest du für viele Blöcke die Option, die Text- und/oder Hintergrundfarbe (einmalig für diesen Block) anzupassen. Das beeinflusst nicht die Farbe desselben Elements auf anderen Seiten oder an einer anderen Stelle desselben Beitrags. Auch ändert sich diese individuelle Farbe anschließend nicht, wenn du das globale Farbschema für Buttons änderst.

GP Customizer – Typografie

Ähnlich umfangreich wie für Farben sind die Optionen für die Typographie. Im Gegensatz zu den älteren Versionen des GeneratePress Premium Themes findest du nach dem Aufklappen dieses Menüpunkts jedoch kein echtes Untermenü mehr. Stattdessen bietet der GP Customizer dir zwei Bereiche mit je einem „Hinzufügen-Button“ an. Infolgedessen bestimmst du selbst, welche Elemente du gestalten möchtest und auch nur diese werden anschließend angezeigt.

Font Manager

Nachdem du auf Add Font (Schrift hinzufügen) geklickt hast, erscheint ein Suchfeld. Wenn du dieses aufklappst, kannst du einerseits eine der Standardschriften auswählen. Andererseits hast du aber auch die Möglichkeit, „deine“ Font-Familie direkt in das Feld darunter einzugeben (s. Abb. unten linke Spalte). Dies wäre der Fall, wenn du eine externe Schrift / Google Fonts, die du selbst hosten musst, auf deiner Website verwenden möchtest. Ist ein Hochladen von Schriften in deinen Webspace auf dem Server deines Anbieters nicht möglich, bleibt deine Auswahl leider auf die Standard-Schriften beschränkt.

Falls du mehrere Schriften einsetzen willst, klickst du wieder auf den blauen Button und verfährst wie oben beschrieben. Normalerweise benötigst du nur eine Schrift für alle Inhalte. Sofern sich jedoch z. B. deine Überschriften oder Zitate nicht nur größenmäßig oder farblich, sondern auch durch den Schrift-Typ vom übrigen Text absetzen sollen, kannst du eine zweite hinzufügen. Mehr sind normalerweise nicht notwendig.

Typografie Manager

Nach der ersten Installation des GeneratePress Themes dürfte unter diesem Punkt nur der Button Add Typographie (Schriftgestaltung hinzufügen) vorhanden sein. Wie bereits für den Font Manager beschrieben, öffnet sich nach dem Klick auf den Button ebenfalls ein Suchfeld. Über den Pfeil in diesem Feld gelangst du zu einer Auswahl an Kategorien und Elementen, für die du die Schriften anpassen kannst.

Wenn du ein Element anpassen willst, dass nicht in der Übersichtsliste auftaucht, kannst du auch ein neues erstellen. Dazu müsstest du jedoch dessen genaue CSS-Klasse in der Programmierung deiner Website kennen.

Schrifteinstellungen

Sobald du z. B. Überschrift 1 auswählst, wird eine Schaltfläche unter der Kategoriebezeichnung INHALT eingefügt. Wählest du anschließend „Fußzeile“ aus, so erscheint diese unter der Kategorie FOOTER. Um nun die Einstellungen anzupassen, klickst du auf den Pfeil rechts neben dem ausgewählten Element. Zunächst hast du bei allen neben der Schriftgröße die folgenden Optionen:

Font Family (Schriftfamilie): Voreingestellt ist die im Font Manager eingetragene / die Standardschrift. Wenn du mehrere Schriften verwendest, kannst du hier zu einer anderen Familie wechseln.

Font Weight (Schriftschnitt): Neben Standard (entspricht i. d. R. der Einstellung „Normal“) sind dies Bold (Fett) sowie die Werte 200 (sehr dünn), 300, 600, 700, 800 sowie 900 (sehr fett). Bei einer selbst gehosteten Schrift sind jedoch nur die Schnitte einsetzbar, die du auch installiert hast. Sind nur „normal und bold“ vorhanden, wird deine Schrift z. B. nicht in „sehr dünn“ umgewandelt, auch wenn du dies im GP Customizer so festlegst.

Text Transform (Textumwandlung): Standard, Uppercase (nur Großbuchstaben), Lowercase (nur kleine Buchstaben), Capitalize (alle Wörter beginnen mit einem Großbuchstaben), Normal

Darüber hinaus wird bei manchen Elementen noch die Anpassung der Zeilenhöhe (Line Height), des Abstands zwischen zwei Buchstaben (Letter Spacing) und des Außenabstands unten bzw. der Abstand nach einem Absatz (Bottom Margin) angeboten.

Um deine Einstellungen eventuell später zu modifizieren, öffnest du wieder den gewünschten Bereich und passt die Angaben erneut an. Mit einem Klick auf das „X“ neben dem Element löschst du dieses und alle Einstellungen fallen wieder auf die vom Theme vorgegebenen Standard-Werte zurück. Dasselbe gilt für Elemente, die du gar nicht erst anpasst / anpassen (willst).

Hintergrundbilder

Beim GP Customizer gestaltet sich das Einfügen von Hintergrundbildern ähnlich komfortabel, wie die Anpassung bei den bereits zuvor beschriebenen Punkten. Auch in diesem Fall wählst du im Menü den Bereich aus, den du mit einem Hintergrundbild versehen möchtest. Anschließend setzt du das gewünschte Bild aus deiner Mediathek ein oder lädst eines von deinem PC hoch. Danach nimmst du folgende Feineinstellungen vor:

1. Wiederholen des Bilds, Wiederholen x (mehrfach waagerecht nebeneinander), Wiederholen y (mehrfach senkrecht untereinander), keine Wiederholung
2. 100 % Breite mit automatischer Anpassung der Höhe, Originalgröße (auto), Vollständig (Cover = über die gesamte Bildschirmbreite), Beinhaltet (contain = so breit wie dein Container; s. o.)
3. Anhang (Attachment) = der Hintergrund bewegt sich beim Scrollen mit dem darauf befindlichen Element, Feststehend (fixed) = nur die Elemente bewegen sich, Lokal (local) = der Hintergrund bewegt sich mit dem Inhalt der Elemente, Vererbt (inherit) = er übernimmt die Einstellungen des Elternelements
4. Position = eigene Einstellungen (gewisse Programmierkenntnisse sind dafür notwendig)

Allgemeine Angaben im GP Customizer

Hinter dem Menüpunkt Allgemein verbergen sich Einstellungen, die das Verhalten (Performance) deiner Website betreffen. Als erstes entscheidest du, ob das CSS (die Vorgaben für das Erscheinungsbild) inline oder als externe Datei eingebunden werden soll. Im Allgemeinen wird „inline“ empfohlen, bei sehr großen CSS-Dateien kann aber die zweite Variante die Ladezeit verkürzen.

Bei älteren GeneratePress Versione ist unter Struktur meistens (noch) floats (fließend) voreingestellt. Die Alternative wäre flex (flexibel), welches die modernere und eventuell bessere Option ist. Ist deine Website jedoch mit dem „alten“ System erstellt worden, kann ein nachträglicher Wechsel Probleme bei Breiten-Angaben verursachen, die du bei jedem einzelnen betroffenen Element korrigieren müsstest. Bei den neusten Versionen entfällt diese Einstellung.

Beim Icon-Typ bietet sich svg an, da es die Darstellung der Icons verbessert. Du kannst aber auch zu Schriftart wechseln. Des weiteren hast du die Möglichkeit, Links automatisch immer / nie bzw. nur / nicht bei Cursor-Berührung zu unterstreichen. Die weiteren Optionen sind bereits im GP Customizer erklärt.

Der Wechsel zum dynamischen Typografie-System (dynamic typography system) verspricht mehr Geschwindigkeit und Nutzerfreundlichkeit. Falls du jedoch deine Website bereits mit den „alten“ System erstellt haben, müsstest du auch hierbei nach dem Wechsel deine Einstellungen unter Typografie kontrollieren. Unter Umständen können Fehler bei der Übertragung aufgetreten und die Darstellung entspricht nicht mehr genau der von dir gewünschten.

Menüs und Widgets

Zwar kannst du deine Menüs auch im GP Customizer erstellen, jedoch ist es meiner Meinung nach einfacher, dies über das WP-Dashboard Design > Menüs zu tun. Alle Menüs, die du dort erstellt, mit einem Namen versehen, einem bestimmten Bereich zugeordnet und gespeichert hast, erscheinen auch hier im GP Customizer.

Menüs, die du nicht in den Standard-Bereichen (Menüleiste, Off-Canvas s. o.), sondern als Widget an einem anderen beliebigen Ort deiner Website einsetzen möchtest, erstellst du am besten unter Design > Widgets. Allerdings kannst du im GP Customizer schnell das für einen der Bereiche festgelegte Menü gegen ein anderes austauschen.

Ähnlich verhält es sich mit den Widgets der unterschiedlichsten Art. Auch hierfür eignet sich der speziellen Widget-Editor von WordPress-Gutenberg, zu erreichen über Design > Widgets, besser. Insbesondere, wenn du Widgets nicht in den angegebenen Widget-Bereichen, sondern in „Elements“ einsetzt, werden diese im GP Customizer gar nicht angezeigt.

Homepage-Einstellungen

Obwohl der GP Customizer diesen Menüpunkt fast ans Ende gesetzt hat, ist er doch von Bedeutung für deine Website. Die Einstellung, die du hier vornimmst, entscheidet nicht zuletzt über den Inhalt deiner Startseite. Da der Begriff „Homepage“ in Deutschland oft falsch verwendet und verstanden wird, eine kurze Erklärung: Homepage ist kein anderes Wort für „Website“, sondern nur ein Teil davon. Als Homepage wird die (einzelne) Seite bezeichnet, auf der die Besucher landen, wenn sie die Domain z. B. meinewebsite.de im Browser eingeben. Es ist also nur die Startseite eines Internetauftritts.

Da sie in erster Linie repräsentativen Zwecken dient und Interessenten oder Kunden neugierig machen soll, ist sie meistens aufwendiger gestaltet als die übrigen Informationsseiten oder Beiträge. Der Inhalt der Startseite hängt natürlich maßgeblich davon ab, um welche Art von Website es sich handelt. Wenn du Dienstleistungen oder Produkte anbietest, stellst du dein Angebot kurz auf einer eigenständigen Startseite vor, verlinkst zu anderen relevanten Seiten oder forderst zu bestimmten Aktionen auf (Call-to-Action).

Falls du jedoch einen Blog oder eine reine Nachrichten-Website betreibst, kannst du die Übersichts-/Archivseite mit deinen (neusten, aktuellen) Beiträgen als Startseite einstellen. Dementsprechend bestimmst du im GP Customizer zuerst, ob die Startseite deine letzen Beiträge zeigen oder eine statische Seite (mit speziellem Inhalt) sein soll. Wenn du wie ich sowohl „etwas zu verkaufen hast“ als auch informative Beiträge in Form eines Blogs anbietest, erstellst du eine eigene Startseite, die du im ersten Feld als Homepage auswählst. Unter „Blog“ wählst du dann die Seite aus, die dein Beitragsarchiv zeigt.

Zusätzliches CSS

Trotz des wirklich großen Angebots an Anpassungsmöglichkeiten im GP Customizer, gibt es vielleicht doch noch die eine oder andere Stelle, an der du selbst „Hand anlegen willst“. Ein Klick auf den Menüpunkt Zusätzliches CSS öffnet einen speziellen Editor. Voraussetzung für die Nutzung ist, dass du entweder Kenntnisse im Schreiben von eigenen CSS-Codes hast oder einen fertigen CSS-Code von Websites wie beispielsweise › Free Frontend kopierst und dann in den Editor einfügst.

Allerdings eignet sich der Editor im GP Customizer primär nur für wenige, kleinere Modifizierungen. Bei größeren Veränderungen an der Basis-Programmierung, dem Einbau zusätzlicher Funktionen oder dem Einfügen eigener Schriften ist immer die Installation eines Child-Themes zu empfehlen. Vor allem hast du damit die Sicherheit, dass deine eigenen Codes bei einem Theme-Update nicht überschrieben werden bzw. verschwinden.

GP Customizer – Zusammenfassung

Die fast grenzenlosen Möglichkeiten, die dir der GP Customizer bietet, lassen kaum noch Wünsche offen. Die in ihm (angepassten) globalen Einstellungen erleichtern in jedem Fall das spätere Arbeiten mit dem Gutenberg Editor. Einerseits musst du dich nicht mehr auf jeder Seite / bei jedem Beitrag um das Grund-Design wie einheitliche Abstände, Farben von Buttons und Links, etc. kümmern, sondern kannst dich ganz auf die Inhalte konzentrieren. Andererseits sind für spezielle Einzelfälle trotzdem noch Änderungen während des Erstellens der Inhalte möglich, ohne dass das Gesamt-Konzept durcheinander gerät.

Andererseits können die Vielfalt an Optionen im GP Customizer sowie dessen einfache Bedienbarkeit sehr verführerisch sein. Wenn du wirklich alle Optionen auszuprobieren möchtest, ist das zunächst kein Problem. Jedoch kann ein Zuviel auf deiner Website schnell auch den Besuchern zu viel werden, da sie u. U. die Orientierung verlieren.

Unabhängig davon, bis zu welchem Grad du deine Kreativität im GP Customizer auslebst, bildet er in Verbindung mit den Optionen des Gutenberg Editors die ideale Grundlage für die Gestaltung einer professionellen Website. Wer noch mehr möchte, sollte einen Blick auf GenerateBlocks vom selben Entwickler werfen. Ein Page Builder (Website-Baukasten) ist jedenfalls definitiv überflüssig und hat in Verbindung mit GeneratePress bei weitem mehr Nach- als Vorteile.

Fazit

Bleib trotz aller Optionen deinem Grundkonzept treu und pass nur das an, was für deine Website tatsächlich notwendig ist, sonst verlierst nicht nur du leicht die Übersicht. Zu viel „Design“ führt zu unübersichtlichen Websites und lenkt vom eigentlichen Inhalt ab. Häufig drängt sich dadurch nur der Eindruck auf, ein Designer wollte ohne Rücksicht auf Inhalte und Zweck der Website mal zeigen, was er so drauf hat. Dies ist weder besonders professionell, noch resultiert daraus ein positive(re)s Nutzererlebnis.

© eb | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.