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 haben Sie alle Möglichkeiten, das Theme für Ihre Website anzupassen sowie um alle gewünschten Funktionen zu erweitern. Näheres dazu können Sie 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.com

Zwar finden Sie 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 Sie Ihre Website auch ohne / mit geringen Programmierkenntnisse/n sehr individuell gestalten können. Meine folgenden Erläuterungen beziehen sich auf den GP Customizer des Premium-Themes.

GP Customizer im Überblick

Nachdem Sie GeneratePress installiert, aktiviert und ggf. die Module des GeneratePress Premium Themes Ihren Wünschen entsprechend eingerichtet haben, 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 klicken Sie in Ihrem WP-Dashboard in der linken Seitenleiste auf Design > Customizer.

Anschließend sehen Sie rechts Ihre Startseite als Vorschau sowie links unterhalb des Namens Ihrer Website und der Bezeichnung des aktiven Themes ein Menü. Am besten gehen Sie alle Menüpunkte der Reihe nach durch, klappen Sie auf und passen 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 sehen Sie sofort rechts in der Vorschau, sofern das entsprechende Element auf der dort angezeigten Seite verwendet wird. Falls nicht, können Sie über Ihr eigenes Menü in der Vorschau rechts zu jeder anderen Seite Ihrer Website wechseln. Natürlich besteht die Möglichkeit, Ihre Änderungen mit einem Klick wieder auf den Standardwert zurücksetzen, Ihre 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.

1. Website-Informationen

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

Falls Sie auf Ihrer Website einen Kopfbereich und eine zusätzliche Menüleiste nutzen, erscheinen Titel und Untertitel automatisch im Kopfbereich. Mittels eines Hakens in die Kästchen jeweils unter den Textzeilen, können Sie nur den Untertitel oder beide ausblenden. Vor allem wenn Ihre Website keinen eigenen Kopfbereich, sondern nur die Hauptmenü-Leiste anzeigen soll, ist letzteres sinnvoll.

Logos

Auch Ihr/e Logo/s fügen Sie direkt im GP Customizer ein. Zuerst sollten Sie sich überlegen, wo das Logo angezeigt werden soll. Wenn Sie es in die Hauptmenü-Leiste integrieren möchten, 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ötigen Sie Ihr Logo in zwei Größen: Der gewünschten Breite und Höhe sowie der doppelten für Retina-Displays. Zusätzlich erstellen Sie noch ein Website-Icon mit Ihrem Logo im Zentrum. Halten Sie sich dabei an die Vorgaben im GP Customizer, um nach dem Einsetzen ein möglichst optimales Ergebnis zu erzielen.

Nachdem Sie die beiden Logos und das Icon komprimiert haben, laden Sie sie in Ihre WP-Mediathek hoch. Anschließend wechseln Sie in den GP Customizer und fügen unter Logo das kleinere und unter Retina-Logo das größere ein. Des weitern können Sie noch die Breite des Logos einstellen. Orientieren Sie sich dabei an der Breite des kleineren Logos. Darunter fügen Sie 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 Ihrem Bildschirm (direkte Verlinkung) angezeigt. Andererseits wirkt es sich positiv bei der Beurteilung der SEO-Qualität Ihrer Website z. B. bei Lighthouse bzw. Google aus, wenn ein solches Icon vorhanden ist.

Natürlich können Sie auch auf das Einsetzen eines Logos verzichten, was jedoch nur sinnvoll wäre, wenn Sie stattdessen den Titel Ihrer Website als „Logo-Ersatz“ einsetzen möchten.

2. Layout-Einstellungen im GP Customizer

Über diesen Menüpunkt im GP Customizer steuern Sie das Erscheinungsbild unterschiedlicher Bereiche für die gesamte Website. Sie legen 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 Sie Ihre Inhalte einfügen. Welche Breite Sie für den Container einstellen, hängt vom Design Ihrer 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 bei 1024 px Breite liegen sollte, fallen bei der erstgenannten Einstellung beispielsweise die seitlichen Ränder weg und das Bild füllt die gesamte Container-Breite aus. Falls Sie eine oder mehrere Seitenleisten verwenden möchten, 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 Sie die Website öffnen. Diesen Leerraum können Sie 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 Sie unter Inhaltslayout nicht „ein Container“, sondern „Container voneinander absetzen“ gewählt haben. Den Abstand zwischen den Inhaltselementen Titel, Bild und Text(block) bestimmen Sie mittels des Inhaltsseparators.

Für die Platzierung des Containers im Verhältnis zum Kopfbereich wählen Sie 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 an dieser gedachten Linie. Der Innenabstand bestimmt die Breite des Rands um den eigentlichen Inhalt des Containers.

Header / Kopfbereich

Auch für den Kopfbereich Ihrer Website können Sie im GP Customizer einige Voreinstellungen vornehmen und unterschiedliche Varianten ausprobieren. So haben Sie die Wahl zwischen

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

Außerdem bestimmen Sie, 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 legen Sie die innere Breite fest. Beispielsweise wählen Sie für den Header als solches die „Gesamte Breite“, lassen den Inhalt jedoch nur in der „Breite des Containers“ anzeigen. Zusätzlich stellen Sie 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 Sie auch ausblenden können. Wenn Sie einen mobilen Header verwenden, entscheiden Sie sich unter Branding entweder für den Titel Ihrer Website oder für Ihr Logo, dass Sie hier dann wiederum einfügen. Zuletzt haben Sie 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 Ihrer Website.

Sofern Sie in das oberste Feld eine Beschriftung wie „Menü“ eingeben, erscheint diese auf mobilen Geräten links neben dem Hamburger-Symbol. Den Umschaltwert für die mobile Navigation würde ich nicht verändern, da es sich bei der Voreinstellung um den allgemein gebräuchlichen Standardwert handelt. Er bestimmt, ab welcher Bildschirmbreite z. B. das „normale“ Menü zum Hamburger Menü wird oder die Seitenleisten sich unterhalb des Haupt-Containers einordnen.

Anders sieht es bei der Position der Navigation aus. Hier haben Sie die Wahl zwischen

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

Falls Sie sich für die „schwebende Navigation“ entscheiden, können Sie bestimmen, ab welcher Bildschirmbreite Ihre Menüpunkte nicht mehr in einer Zeile mit Ihrem Logo dargestellt werden, sondern in eine zweite Zeile darunter rutschen. Auch dieses Feld können Sie frei lassen und der automatischen Anpassung der Designs vertrauen, was im Allgemeinen gut funktioniert.

Sobald Sie Ihr Menü mit Unterpunkten versehen, sollten Sie 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 Ihren Menüpunkten einzufügen.

Zuletzt laden Sie wieder Ihr Logo in das entsprechende Feld hoch und bestimmen 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 schalten Sie nur diese Art der Navigation an oder aus. Falls Sie sie benutzen möchten, können Sie 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 entscheiden Sie, ob Sie es nur mobil, nur auf dem Desktop, in beiden Fällen (An) oder gar nicht (Aus) verwenden möchten. Falls Sie das Panel nur/auch auf Desktops einsetzen, können Sie 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üpunkthöhe, passen Sie 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 Ihnen im GP Customizer bis zu zwei Seitenleisten zur Verfügung, wobei Sie die folgenden Optionen für das globale Layout, den Blog und die Beiträge jeweils getrennt einstellen können (s. Abbildung oben rechte Spalte):

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

Die Breiteneinstellungen nehmen Sie 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 Sie das entsprechende Modul aktiviert haben, also auf Ihrer Website einen Blog anlegen möchten. 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 Ihre Blog-Beiträge mit komplettem Inhalt oder als Auszug chronologisch untereinander angeordnet sind. Unter „Einzeln“ legen Sie fest, wie die einzelnen Beiträge / Beitragsauszüge auf den Archivseiten dargestellt werden. Bezüglich der Beitragsbilder bietet Ihnen der GP Customizer voneinander unabhängige Optionen für die Archivseiten, die Beiträge und die Seiten an.

Am Ende dieses Menüs finden Sie noch den Punkt Spalten. Wenn Sie das Kästchen leer lassen, erscheinen Ihre Beiträge auf den Archivseiten untereinander über die volle Breite des Containers. Sobald Sie den Haken setzen, erhalten Sie die Möglichkeit, die Anzahl der Spalten zu bestimmen und/oder den obersten / neusten Beitrag hervorzuheben. Außerdem können Sie 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 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. Deshalb sind manche höher oder tiefer angeordnet, 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 bestimmen Sie hier außerdem die Anzahl der Widgets, die Sie im Fußbereich Ihrer Website nutzen möchten. Darüber hinaus können Sie 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. Wenn Sie jedoch die Premium Version erworben haben, haben Sie im GP Customizer die Möglichkeit, diesen Hinweis durch Ihr eigenes Copyright zu ersetzen. Dazu löschen Sie den vorhandenen Text aus dem Kasten, kopieren die beiden darunter angegebenen Codes, fügen sie in den Kasten ein und schreiben dahinter Ihren gewünschten Text.

Teil 2 – Farben, Schriften und mehr

GP Customizer | Teil 2