GP Customizer | GeneratePress in 9 Schritten anpassen

GeneratePress – GP Customizer

Generate Press ist ein WordPress-Theme, bei dem Geschwindigkeit und Nutzerfreundlichkeit im Vordergrund stehen. Ersteres wird durch die Art der Programmierung erreicht. Nach der Installation sind zunächst nur die notwendigen Basis-Elemente enthalten, wodurch das Design auf den ersten Blick sehr „einfach“ wirkt. Jedoch hast du alle Möglichkeiten, das Theme für deine Website anzupassen sowie um alle gewünschten Funktionen zu erweitern. Näheres dazu kannst du in meiner Einführung in das GeneratePress Theme nachlesen.

Bei der Beurteilung der Nutzerfreundlichkeit spielt u. a. der GP Customizer eine wesentliche Rolle. Doch was ist ein Customizer?

Der WordPress Theme Customizer ist im Wesentlichen ein Menü mit Einstellungen, welche die Darstellung der Website bzw. auf sonst eine Art und Weise das aktive WordPress Theme betreffen.
Quelle: WebsiteBerater

Zwar findest du bei allen WP-Themes ein Menü für die website-übergreifenden Basis-Einstellungen, aber die Anzahl der Optionen und deren Anpassbarkeit hängt immer vom jeweiligen Theme ab. Einerseits sind die Möglichkeiten bei allen kostenlosen Themes sehr eingeschränkt. Andererseits weichen sie aber auch bei den Premium-Versionen zum Teil deutlich voneinander ab.

GeneratePress gehört dabei zu den Themes, die sehr umfangreiche Anpassungen ermöglichen, wodurch du deine Website auch ohne / mit geringen Programmierkenntnisse/n sehr individuell gestalten kannst. Meine folgenden Erläuterungen beziehen sich auf den GP Customizer des Premium-Themes.

GP Customizer im Überblick

Nachdem du GeneratePress installiert, aktiviert und ggf. die Module des GeneratePress Premium Themes deinen Wünschen entsprechend eingerichtet hast, geht es nun an die Anpassung des Grund-Designs. Diese Einstellungen wirken sich später auf die jeweiligen Bereiche / Elemente der gesamten Website aus. Zunächst klickst du in deinem WP-Dashboard in der linken Seitenleiste auf Design > Customizer.

Anschließend siehst du rechts deine Startseite als Vorschau sowie links unterhalb des Namens deiner Website und der Bezeichnung des aktiven Themes ein Menü. Am besten gehst du alle Menüpunkte der Reihe nach durch, klappst sie auf und passt gegebenenfalls die dort angebotenen Option an. Die Reihenfolge im GP Customizer kann je nach Theme-Version von der in meiner Liste abweichen:

• Website-Informationen
• Layout
• Farben
• Typographie
• Hintergrundbilder
• Allgemein
• Menüs
• Widgets
• Homepage-Einstellungen
• Zusätzliches CSS

Die Umsetzung der meisten Änderungen siehst du sofort rechts in der Vorschau, sofern das entsprechende Element auf der dort angezeigten Seite verwendet wird. Falls nicht, kannst du über dein eigenes Menü in der Vorschau rechts zu jeder anderen Seite deiner Website wechseln. Natürlich besteht die Möglichkeit, deine Änderungen mit einem Klick wieder auf den Standardwert zurücksetzen, deine Eingaben erneut anzupassen oder es direkt bei den Voreinstellungen zu belassen. Einige der angebotenen Anpassungs-Optionen verstehen sich von selbst. Die anderen werden in den folgenden Abschnitten dieses Beitrags näher erläutert.

Website-Informationen

Hinter dem ersten Punkt verbergen sich die Einstellungen, die den Inhalt des Headers (Kopfbereichs) für deine gesamte Website betreffen. Zuerst sind das der Titel und der Untertitel. Normalerweise trägst du hier die Informationen ein, die du auch in den WP-Einstellungen > Allgemein angegeben hast. In manchen Fällen sind diese beiden Felder auch bereits ausgefüllt.

Falls du auf deiner Website einen Kopfbereich und eine zusätzliche Menüleiste nutzt, erscheinen Titel und Untertitel automatisch im Kopfbereich. Mittels eines Hakens in die Kästchen jeweils unter den Textzeilen, kannst du nur den Titel, nur den Untertitel oder beide ausblenden. Vor allem wenn deine Website keinen eigenen Kopfbereich, sondern nur die Hauptmenü-Leiste als Header anzeigen soll, ist letzteres sinnvoll.

Logos

Auch dein/e Logo/s fügst du direkt im GP Customizer ein. Zuerst solltest du dir überlegen, wo das Logo angezeigt werden soll. Wenn du es in die Hauptmenü-Leiste integrieren möchtest, wäre eine Höhe von maximal 60 px ideal. Für einen separaten Kopfbereich kann das Logo etwas größer sein. Darüber hinaus benötigst du dein Logo in zwei Größen: Der gewünschten Breite und Höhe sowie der doppelten für Retina-Displays. Zusätzlich erstellst du noch ein Webicon mit deinem Logo im Zentrum. Halte dich dabei an die Vorgaben im GP Customizer, um nach dem Einsetzen ein möglichst optimales Ergebnis zu erzielen.

Nachdem du die beiden Logos und das Icon komprimiert hast, lädst du sie in deine WP-Mediathek hoch. Anschließend wechselst du in den GP Customizer und fügst unter Logo das kleinere und unter Retina-Logo das größere ein. Des Weiteren kannst du noch die Breite des Logos einstellen. Orientiere dich dabei an der Breite des kleineren Logos. Darunter fügst du das Website-Icon ein.

Dieses erfüllt mehrere Zwecke. Einerseits wird es neben dem Titel der Seite im Browser-Tab, als Schnellwahl-Bild (bei manchen Browsern) oder als Icon auf deinem Bildschirm (direkte Verlinkung) angezeigt. Andererseits wirkt es sich positiv bei der Beurteilung der SEO-Qualität deiner Website z. B. bei Lighthouse bzw. Google aus, wenn ein solches Icon vorhanden ist.

Natürlich kannst du auch auf das Einsetzen eines Logos verzichten, was jedoch nur sinnvoll wäre, wenn du stattdessen den Titel deiner Website als „Logo-Ersatz“ einsetzen möchtest.

Layout-Einstellungen im GP Customizer

Über diesen Menüpunkt im GP Customizer steuerst du das Erscheinungsbild unterschiedlicher Bereiche für die gesamte Website. Du legst beispielsweise die Maße, Abstände sowie einige Funktionen des Headers, Inhaltsbereichs oder Footers fest.

Container

Der Container ist der Bereich zwischen Header und Footer einer Seite, in den du deine Inhalte einfügst. Welche Breite du für den Container einstellst, hängt vom Design deiner Website ab. Eine Einstellung von 1024 px bis max. 1200 px wäre optimal. Da die Standardgröße (volle Größe) von (Beitrags-)Bildern im Web 1024 px Breite betragen sollte, fallen bei der erstgenannten Einstellung beispielsweise die seitlichen Ränder weg und das Bild füllt die gesamte Container-Breite aus. Falls du eine oder mehrere Seitenleisten verwenden möchtest, würde der Container entsprechend schmaler, so dass die zuvor angegebene Gesamtbreite (= 100%) nicht überschritten wird (s. auch unter Seitenleisten).

Die Breite der inhaltslosen Flächen links und rechts des Containers hängt von der Größe des Fensters/Bildschirms ab, in dem du die Website öffnest. Diesen Leerraum könntest du mit einem Hintergrundbild füllen oder farblich gestalten (s. u.). Auf klein(er)en Geräten füllt der Haupt-Container normalerweise den gesamten Bildschirm aus. Aufgrund des responsiven Designs wird/werden die Seitenleiste/n dort automatisch unterhalb des Containers angeordnet.

Der Trennabstand bezieht sich einerseits auf die Abstände zu anderen Bereichen der Seite wie z. B. zur Menüleiste. Andererseits gilt er auch für den Abstand der Container untereinander, sofern du unter Inhaltslayout nicht „ein Container“, sondern „Container voneinander absetzen“ wählst. Den Abstand zwischen den Inhaltselementen Titel, Bild und Text(block) bestimmst du mittels des Inhaltsseparators.

Für die Platzierung des Containers im Verhältnis zum Kopfbereich wählst du entweder Ausrichtung an der Box oder am Text. Im ersten Fall befindet sich der linke Rand des Containers auf einer senkrechten Linie mit dem Logo/dem Textanfang in der Menüleiste. Im anderen Fall beginnen die Textzeilen jeweils etwas nach rechts versetzt von dieser gedachten Linie. Der Innenabstand bestimmt die Breite des Rands um den eigentlichen Inhalt des Containers.

Header / Kopfbereich

Auch für den Kopfbereich deiner Website kannst du im GP Customizer einige Voreinstellungen vornehmen und unterschiedliche Varianten ausprobieren. So hast du die Wahl zwischen

• Standard oder Klassisch,
• Navigation zuerst / zuletzt oder jeweils zentriert
• oder Navigation links.

Außerdem bestimmst du, ob der Header so breit wie der gesamte Bildschirm oder nur so breit wie der Inhalts-Container sein soll. Abhängig von der hier getroffenen Einstellung legst du die innere Breite fest. Beispielsweise wählst du für den Header als solches die „Gesamte Breite“, lässt den Inhalt jedoch nur in der „Breite des Containers“ anzeigen. Zusätzlich stellst du noch ein, ob der Inhalt zentriert, links- oder rechtsbündig dargestellt wird und wie breit die Ränder sein sollen.

Auf mobilen Geräten ändert sich aufgrund der geringeren Bildschirmbreite die Darstellung des Kopfbereiches, den du auch ausblenden könntest. Wenn du einen mobilen Header verwendest, entscheidest du dich unter Branding entweder für den Titel deiner Website oder für dein Logo, dass du hier dann wiederum einfügst. Zuletzt hast du die Möglichkeit, den Header anzuheften, so dass er beim Scrollen immer sichtbar bleibt bzw. während des Herunter-Scrollens zwar ausgeblendet wird, aber beim Hoch-Scrollen wieder erscheint (s. u.).

Primäre Navigation

Im GP Customizer kann das Layout für vier Navigationsbereiche angepasst werden, wobei ich nicht näher auf die Sekundäre Navigation eingehe. Sie wird als eigene Leiste i. d. R. unterhalb der primären angezeigt und deren Einstellungen sind vergleichbar mit denen der unten beschriebenen Navigationsarten. Unter der Primären Navigation ist das Hauptmenü mit den Links zu wichtigen Seiten, Kategorien, dem Blog, o. ä. zu verstehen. Normalerweise befindet sie sich am oberen Rand aller Seiten und Beiträge deiner Website.

Sofern du in das oberste Feld eine Beschriftung wie „Menü“ eingibst, erscheint diese auf mobilen Geräten links neben dem Hamburger Menü Symbol. Da es sich bei der Voreinstellung um den allgemein gebräuchlichen Standardwert handelt, würde ich den Umschaltwert für die mobile Navigation nicht verändern. Er bestimmt, ab welcher Bildschirmbreite z. B. das „normale“ Menü zum Hamburger Menü wird oder die Seitenleisten sich unterhalb des Haupt-Containers einordnen. Wenn du jedoch zahlreiche Menüpunkte verwendest und sich die letzten Punkte auf Tablets in eine neue Zeile verschieben, kannst du den Wert entsprechend erhöhen. Dann erscheint das Hamburger Menü nicht nur bei Smartphones, sondern auch auf Tablets.

Anders sieht es bei der Position der Navigation aus. Hier hast du die Wahl zwischen

• unter / über dem Header,
• links / rechts schwebend,
• in der linken / rechten Seitenleiste
• oder gar keine Navigation.

Falls du dich für die „schwebende Navigation“ entscheidest, kannst du bestimmen, ab welcher Bildschirmbreite deine Menüpunkte nicht mehr in einer Zeile mit deinem Logo dargestellt werden, sondern in eine zweite Zeile darunter rutschen. Auch dieses Feld kannst du frei lassen und der automatischen Anpassung der Designs vertrauen, was im Allgemeinen gut funktioniert.

Wenn du jedoch sehr viele Menüpunkte verwendest, kann es sinnvoll sein, einen Wert festzulegen, damit das Menü z. B. auf Tablets nicht wahllos getrennt wird. Alternativ wäre es möglich, den Umschaltwert (s. o.) zu erhöhen, um auf Tablets wie auf Smartphones das Hamburger-Symbol zu verwenden.

Sobald du dein Menü mit Unterpunkten versiehst, solltest du festlegen, wann und in welche Richtung das jeweilige Untermenü aufklappt. Zur Auswahl stehen: Sobald der Mauszeiger darüber fährt oder nach einem Klick auf den Menüpunkt bzw. auf den Pfeil daneben sowie die Ausklapprichtung (nach links oder rechts). Außerdem ermöglicht es der GP Customizer, ein Symbol für die Suche rechts neben deinen Menüpunkten einzufügen.

Zuletzt lädst du wieder dein Logo in das entsprechende Feld hoch und bestimmst sein Verhalten:

• Angeheftet: Es erscheint nur in der angehefteten Navigationsleiste,
• Statisch: verschwindet in der angehefteten Leiste oder
• Angeheftet + Statisch: bleibt immer sichtbar.

Navigation angeheftet und Off-Canvas Panel

Einige Anpassungen für die angeheftete Navigation im GP Customizer wurden bereits oben beschrieben. Unter diesem Menüpunkt schaltest du nur diese Art der Navigation an oder aus. Falls du sie benutzen möchtest, kannst du bezüglich ihres Übergangs zwischen ohne, gleitend oder einblenden wählen und entscheiden, ob sie beim Herunter-Scrollen ausgeblendet wird. Zwar ist die angeheftete Navigation kein Muss, aber gerade bei längeren Seiten hat sie ihre Vorteile. Die Besucher müssen nicht immer wieder zum Seitenanfang zurückkehren, wenn sie einen anderen Menüpunkt wählen möchten.

Beim Off-Canvas Panel handelt es sich um ein Menü, dass sich sozusagen als eigene Seite vor den Inhalt der geöffneten Seite schiebt und über eine kleine Schaltfläche (Hamburger-Symbol = drei Linien untereinander) gesteuert wird. Zuerst entscheidest du, ob du es nur mobil, nur auf dem Desktop, in beiden Fällen (An) oder gar nicht (Aus) verwenden möchtest. Falls du das Panel nur/auch auf Desktops einsetzt, kannst du eine von der mobilen Version (s. o.) unabhängige Beschriftung einfügen.

Neben der Position des Schließen-Buttons (X) innerhalb oder außerhalb der Menü-Seite und der Menüpunkt-Höhe, passt du noch das Verhalten des Off-Canvass Panels an. Diese kann vom linken oder rechten Rand hineingleiten oder als Overlay erscheinen.

Seitenleisten

Aufgrund der zunehmenden Anzahl an Nutzern, die Websites über mobile Geräte aufrufen, kommen Seitenleisten mehr und mehr „aus der Mode“. Zumindest sollten sie nicht wie früher üblich für das Hauptmenü oder andere wichtige Inhalte verwendet werden. Theoretisch stehen dir im GP Customizer bis zu zwei Seitenleisten zur Verfügung, wobei du die folgenden Optionen für das globale Layout, den Blog und die Beiträge jeweils getrennt einstellen kannst:

• Seitenleiste / Inhalt bzw. Inhalt / Seitenleiste
• Inhalt (keine Seitenleiste)
• Seitenleiste / Inhalt / Seitenleiste
• Zwei Seitenleisten / Inhalt
• Inhalt / zwei Seitenleisten

Die Breiten-Einstellungen nimmst du in diesen Fall nicht in Pixel, sondern in Prozent vor, damit die Seitenleiste/n plus Container die zuvor eingestellte Gesamt-Breite (entspricht 100 %) nicht überschreiten.

Layout für den Blog

Einstellungen für den Blog sind nur möglich, wenn du das entsprechende Modul aktiviert hast, also auf deiner Website einen Blog mit Beiträgen anlegen möchtest. Die meisten Optionen sind bereits im GP Customizer verständlich beschriftet. Deshalb hier nur einige Begriffserklärungen.

Das Layout-Untermenü für den Blog im GP Customizer ist in drei Hauptbereiche untergliedert. Als erstes das Layout für den Inhalt, welches sich wiederum in Archiv(e) und Einzeln aufteilt. Die Anpassung des Archivs bzw. der Archive dient der Gestaltung der Übersichtsseiten, auf denen deine Blog-Beiträge mit komplettem Inhalt oder als Auszug chronologisch untereinander angeordnet sind. Unter „Einzeln“ legst du fest, wie die einzelnen Beiträge / Beitragsauszüge auf den Archivseiten dargestellt werden. Bezüglich der Beitragsbilder bietet dir der GP Customizer voneinander unabhängige Optionen für die Archivseiten, die Beiträge und die Seiten an.

Am Ende dieses Menüs findest du noch den Punkt Spalten. Wenn du das Kästchen leer lässt, erscheinen deine Beiträge auf den Archivseiten untereinander über die volle Breite des Containers. Sobald du den Haken setzt, erhältst du die Möglichkeit, die Anzahl der Spalten zu bestimmen und/oder den obersten / neusten Beitrag hervorzuheben. Außerdem kannst du die Art des Spalten-Layouts einstellen.

Grid: Die einzelnen Elemente einer Reihe haben immer die gleiche Höhe, die von dem „längsten“ Element in der betreffenden Reihe bestimmt wird.
Masonry: Die Höhen der einzelnen Elemente richtet sich nach deren Inhalt und können somit unterschiedlich hoch sein. Dadurch befinden sich die Elemente der nachfolgenden Reihen nicht immer auf gleicher Höhe, sondern orientieren sich am darüber liegenden Element. Das führt dazu, dass manche höher oder tiefer angeordnet sind, obwohl sie sich in derselben Reihe befinden.

Footer

Für das Layout des Footers bietet der GP Customizer zum Teil die gleichen Einstellungen an, die bereits für den Header beschrieben wurden. Jedoch bestimmst du hier außerdem die Anzahl der Spalten / Widgets, die du im Fußbereich deiner Website nutzen möchtest. Darüber hinaus kannst du einen Button aktivieren, der es den Besuchern ermöglicht, von jedem Bereich eines Beitrags / einer Seite direkt zurück zu dessen / deren Anfang zu gelangen.

Wie schon in meinem Beitrag über die kostenlose Version des GeneratePress Themes erwähnt, wird in der untersten Fußzeile automatisch das Copyright von bzw. ein Hinweis auf GeneratePress angezeigt, was sich „eigentlich“ mit Bordmitteln nicht löschen lässt. Wenn du jedoch die Premium Version erworben hast, hast du im GP Customizer die Möglichkeit, diesen Hinweis durch dein eigenes Copyright zu ersetzen. Dazu löschst du den vorhandenen Text aus dem Kasten, kopierst die beiden darunter angegebenen Codes, fügst sie in den Kasten ein und schreibst dahinter deinen gewünschten Text.

WEITERLESEN – FARBEN, SCHRIFTEN UND MEHR

GP Customizer | Seite 2