GP Customizer | GeneratePress in 9 Schritten anpassen

Infos und Tipps zu allen Anpassungen, die im GP Customizer angeboten werden. Fortsetzung des Beitrags über das GeneratePress Theme.

eb Webdesign - GP Customizer

GP Customizer – Teil 2

3. 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.

Inhalt

Global Colors

Nachdem Sie Ihr Farbkonzept für die Website entwickelt haben, können Sie als erstes Ihre Global Colors (vorherrschenden Farben) festlegen. Das heißt, dass Sie die voreingestellten Farben des Themes durch Ihre eigenen ersetzen. Dazu klicken Sie auf einen Farbpunkt und geben entweder den Hex-Code Ihrer Farbe ein oder wählen eine Farbe über das Farbfeld aus.

GP Customizer - Global Colors
GP Customizer – Global Colors (Screenshot: eb/WordPress)

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

  • Contrast: Ihre 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)

Falls Sie Ihr Farbkonzept modifizieren möchten, können Sie die Farben jederzeit ändern, Farbpunkte entfernen (mit dem Cursor darüber fahren und auf das „X“ klicken) oder neue hinzufügen (+). Diese Einstellungen sollten Sie auf jeden Fall nutzen, da Ihr Farbschema anschließend ebenfalls im Gutenberg Editor in der Farbwahl für Schriften, Hintergrund, usw. angezeigt wird. Mit einem Klick setzen Sie so die „richtige“ Farbe ein und ersparen sich die wiederholte Eingabe Ihrer eigenen Farb-Codes. Farbabweichungen aufgrund versehentlicher Eingabefehler werden somit vermieden.

Treiben Sie es nicht zu bunt,

… auch wenn Sie beliebig viele Farben hinzufügen können. Zu viele unterschiedliche Farben auf Websites lenken vom eigentlich wichtigen Inhalt ab. Beschränken Sie sich lieber auf (die) zwei Hauptfarben und mehrere Schattierungen einer dazu passenden Grundfarbe für die Gestaltung der Hintergründe.

Zweckgebundene Farben

Um die Farben für einen bestimmten Bereich anzupassen, klicken Sie auf den Pfeil neben dem betreffenden Unterpunkt. Für jeden Bereich vom Body bis zum Back to Top-Button (Zurück zum Anfang) können Sie die Hintergrund- (Background) und Textfarbe individuell einstellen. Darüber hinaus haben Sie für einige Elemente noch zusätzlicher 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 Ihrer Website), Tagline (Untertitel/Slogan), Link
  • Forms (Formulare): Border (Rand)
  • Content (Inhalt): Link, Beitrags-,Seitentitel, Archive Content Title (Archiv-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
GP Customizer - Farbanpassungen
GP Customizer – Farbeinstellungen (Screenshot: eb/WordPress)

Während Sie für die meisten Anpassungen nur eine Farbe angeben können, bestimmen Sie 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 haben Sie darüber hinaus die Möglichkeit, eine dritte Farbe für besuchte (visited) Links bzw. den aktuell geöffneten Punkt Ihres Menüs (current) einzustellen.

Alle Farben, die Sie hier im GP Customizer festlegen, wirken sich auf die gesamte Website aus. Das bedeutet, dass z. B. ein roter Button immer automatisch rot ist, sobald Sie in einer Seite / einem Beitrag im Gutenberg Editor einen Button einsetzen. Jedoch kann die einmal voreingestellte Farbe für besondere Zwecke dort auch geändert werden. In der rechten Seitenleiste des Editors finden Sie für viele Blöcke die Option, die Text- und/oder Hintergrundfarbe (einmalig für dieses Element) anzupassen. Das beeinflusst nicht die Farbe desselben Elements auf anderen Seiten oder an einer anderen Stelle desselben Beitrags.

Halten Sie sich an Ihr Farbkonzept

Selbst wenn Ihnen der GP Customizer anbietet, für jeden Bereich unterschiedliche Text-, Link- oder Hintergrundfarben zu wählen, bleiben Sie bei Ihrem Farbkonzept. Vor allem die Farbgebung für Links, Überschriften derselben Hierarchie und mit Einschränkungen auch für Buttons sollte auf der gesamten Website jeweils einheitlich sein. Nur so wissen die Besucher sofort, um was es sich handelt bzw. was sie tun können/sollen.

4. GP Customizer – Typographie

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

GP Customizer - Font Manager
GP Customizer – Font Manager (Screenshot: eb/WordPress)

Font Manager

Nachdem Sie auf Add Font (Schrift hinzufügen) geklickt haben, erscheint ein Suchfeld. Wenn Sie dieses aufklappen, können Sie einerseits eine der Standardschriften auswählen. Andererseits haben Sie aber auch die Möglichkeit, „Ihre“ Font-Familie direkt in das Feld darunter einzugeben. Dies wäre der Fall, wenn Sie eine externe Schrift / Google Fonts, die Sie selbst hosten (müssen), auf Ihrer Website verwenden möchten. Ist ein Hochladen von Schriften in Ihren Webspace auf dem Server Ihres Anbieters nicht möglich, bleibt Ihre Auswahl leider auf die Standard-Schriften beschränkt.

Falls Sie mehrere Schriften einsetzen wollen, klicken Sie wieder auf den blauen Button und verfahren wie oben beschrieben. Normalerweise benötigen Sie nur eine Schrift für alle Inhalte. Sofern sich jedoch z. B. Ihre Überschriften oder Zitate nicht nur größenmäßig oder farblich, sondern auch durch den Schrift-Typ vom übrigen Text absetzen sollen, könnten Sie eine zweite hinzufügen. Mehr sind normalerweise nicht notwendig.

Google Fonts deaktivieren

Lassen Sie den unter den Eingabefeldern angezeigten Schalter für Google Fonts ausgeschaltet bzw. deaktivieren Sie ihn. Derzeit dürfen Sie Google Fonts nicht direkt über das Theme einbinden, da diese dann von Google Servern geladen werden. Aus Gründen des Datenschutzes ist in der EU die automatische Verbindung zu US-Servern nicht erlaubt. Ein Verstoß wird mit einem Bußgeld geahndet und Sie müssen diese Verknüpfung umgehend von Ihrer Website entfernen.

Typographie 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 gelangen Sie zu einer Auswahl an Kategorien und Elementen, für die Sie die Schriften anpassen können.

Wenn Sie ein Element anpassen wollen, dass nicht in der Übersichtsliste auftaucht, können Sie auch ein neues erstellen. Dazu müssten Sie jedoch dessen genaue CSS-Klasse in der Programmierung Ihrer Website kennen (s. Abbildung Font Manager > OTHER).

GP Customizer - Schriften
GP Customizer – Schriften anpassen (Screenshot: eb/WordPress)

Schrifteinstellungen

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

Font Family (Schriftfamilie): Voreingestellt ist die im Font Manager eingetragene / die Standardschrift. Wenn Sie mehrere Schriften verwenden, können Sie 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 Sie auch installiert haben. Sind nur „normal und bold“ vorhanden, wird Ihre Schrift z. B. nicht in „sehr dünn“ umgewandelt, auch wenn Sie dies im GP Customizer so festlegen.

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 Ihre Einstellungen eventuell später zu modifizieren, öffnen Sie wieder den gewünschten Bereich und passen die Angaben erneut an. Mit einem Klick auf das „X“ neben dem Element löschen Sie dieses und alle Einstellungen fallen wieder auf die vom Theme vorgegebenen Standard-Werte zurück. Dasselbe gilt für Elemente, die Sie gar nicht erst anpassen (wollen).

Keine zu kleine Schrift

Stellen Sie die Schriftgröße für den Fließtext nicht kleiner als 16 px und für Überschriften nicht zu groß ein. Einerseits soll der Text gut lesbar sein. Andererseits führt eine zu große Schrift dazu, dass (längere) Wörter auf kleineren Bildschirmen u. U. an einer beliebigen Stelle geteilt und die letzten Buchstaben eines Wortes in die nächste Zeile verschoben werden. Das macht einen wenig professionellen Eindruck.

5. 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ählen Sie im Menü den Bereich aus, den Sie mit einem Hintergrundbild versehen möchten. Anschließend setzen Sie das gewünschte Bild aus Ihrer Mediathek ein oder laden eines von Ihrem PC hoch. Danach nehmen Sie folgende Feineinstellungen vor:

  1. Wiederholen, Wiederholen x (mehrfach waagerecht hintereinander), 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 Ihr 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)
GP Customizer - Hintergrundbilder
GP Customizer – Hintergrundbilder (Screenshot: eb/WordPress)

Hintergrund sollte nicht vom Inhalt ablenken

Wählen Sie für text-lastige Bereiche aus Gründen der Lesbarkeit ein dezentes Hintergrundbild bzw. erstellen Sie für den Text eine Box mit einem neutralen Hintergrund. Bedenken Sie auch, dass (zusätzliche) Hintergrundbilder sich negativ auf die Ladezeit Ihrer Website auswirken (können).

6. Allgemeine Angaben im GP Customizer

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

Unter Struktur ist meistens (noch) floats (fließend) voreingestellt. Die Alternative wäre flex (flexibel), welches die modernere und eventuell bessere Option ist. Ist Ihre Website jedoch mit dem „alten“ System erstellt worden, kann ein nachträglicher Wechsel Probleme bei Breiten-Angaben verursachen, die Sie bei jedem einzelnen betroffenen Element korrigieren müssten.

GP Customizer - Allgemein
GP Customizer – Performance (Screenshot: eb/WordPress)

Beim Icon-Typ bietet sich svg an, da es die Darstellung der Icons verbessert. Sie können aber auch zu Schriftart wechseln. Des weiteren haben Sie 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 Sie jedoch Ihre Website bereits mit den „alten“ System erstellt haben, müssten Sie nach dem Wechsel Ihre Einstellungen unter Typografie kontrollieren. Unter Umständen können Fehler bei der Übertragung aufgetreten und die Darstellung entspricht nicht mehr genau der von Ihnen gewünschten.

7. Menüs und Widgets

Zwar können Sie Ihre 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 Sie dort erstellt, mit einem Namen versehen, einem bestimmten Bereich zugeordnet und gespeichert haben, erscheinen auch hier im GP Customizer.

GP Customizer - Menüs
GP Customizer – Menüs (Screenshot: eb/WordPress)

Menüs, die Sie nicht in den Standard-Bereichen (Menüleiste, Off-Canvas s. o.), sondern als Widget an einem anderen beliebigen Ort Ihrer Website einsetzen möchten, erstellen Sie am besten unter Design > Widgets. Allerdings können Sie 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 Sie Widgets nicht in den angegebenen Widget-Bereichen, sondern in „Elements“ einsetzen, werden diese im GP Customizer gar nicht angezeigt.

GP Customizer - Widgets
GP Customizer – Widgets (Screenshot: eb/WordPress)

8. Homepage-Einstellungen

Obwohl der GP Customizer diesen Menüpunkt fast ans Ende gesetzt hat, ist er doch von Bedeutung für Ihre Website. Die Einstellung, die Sie hier vornehmen, entscheidet nicht zuletzt über den Inhalt Ihrer 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 Sie Dienstleistungen oder Produkte anbieten, stellen Sie Ihr Angebot kurz auf einer eigenständigen Startseite vor, verlinken zu anderen relevanten Seiten oder fordern zu bestimmten Aktionen auf (Call-to-Action).

Falls Sie jedoch einen Blog oder eine reine Nachrichten-Website betreiben, können Sie die Übersichts-/Archivseite mit Ihren (neusten, aktuellen) Beiträgen als Startseite einstellen. Dementsprechend bestimmen Sie im GP Customizer zuerst, ob die Startseite Ihre letzen Beiträge zeigen oder eine statische Seite (mit speziellem Inhalt) sein soll. Wenn Sie wie ich sowohl „etwas zu verkaufen haben“ als auch informative Beiträge in Form eines Blogs anbieten, erstellen Sie eine allgemeine Startseite, die Sie im ersten Feld als Homepage auswählen. Unter „Blog“ wählen Sie dann die Seite aus, die Ihr Beitragsarchiv zeigt.

GP Customizer - Homepage Einstellungen
GP Customizer – Homepage einstellungen, zusätzliches CSS (Screenshot: eb/WordPress)

9. 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 Sie selbst „Hand anlegen wollen“. Ein Klick auf den Menüpunkt Zusätzliches CSS öffnet einen speziellen Editor (s. Abbildung oben rechts). Voraussetzung für die Nutzung ist, dass Sie entweder Kenntnisse im Schreiben von eigenen CSS-Codes haben oder einen fertigen CSS-Code von Websites wie beispielsweise › Free Frontend kopieren und dann in den Editor einfügen.

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ätzlichen Funktionen oder dem Einfügen eigener Schriften ist immer die Installation eines Child-Themes zu empfehlen. Vor allem haben Sie damit die Sicherheit, dass Ihre eigenen Codes bei einem Theme-Update nicht überschrieben werden bzw. verschwinden.

GP Customizer – Zusammenfassung

Die fast grenzenlosen Möglichkeiten, die Ihnen 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 müssen Sie sich 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 können sich 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 durcheinandergerät.

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

Unabhängig davon, bis zu welchem Grad Sie Ihre Kreativität im GP Customizer ausleben, 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

Bleiben Sie trotz aller Optionen Ihrem Grundkonzept treu und passen Sie nur das an, was für Ihre Website tatsächlich notwendig ist, sonst verlieren nicht nur Sie leicht die Übersicht. Zu viel „Design“ führt zu unübersichtlichen Websites und somit eher selten zu einem positiven Nutzererlebnis.

Grafiken: eb, Logo Beitragsbild: GeneratePress, EDGE22 Studios LTD. | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.

Gehen Sie auf Entdeckungsreise

eb Webdesign - Veraltete Website aktualisieren

Veraltete Website | 8 gravierende Fehler beheben

Welches sind die häufigsten technischen, sicherheitsrelevanten und rechtlichen Mängel und wie aktualisieren Sie Ihre veraltete Website.