GeneratePress | Das perfekte WP-Theme – 12 Tipps

Was macht GeneratePress besser als andere WP-Themes? Beschreibung des Aufbaus + Erweiterungen sowie Schritt-für-Schritt Installationsanleitung mit Extra-Tipps.

Ellena

eb Webdesign - GeneratePress Theme

GeneratePress – ein WordPress-Theme

Generate Press ist zunächst nur einer von vielen Entwicklern, die insgesamt 9665 (Stand: Juni 2022), in der Grundversion kostenlose WordPress-Themes anbieten. In den › WordPress Statistiken der meistgenutzten Themes (bezogen auf die Top 1 Millionen Websites) belegt GeneratePress zwar bisher noch keinen der vordersten Plätze,

  1. Choices – 3,19 %
  2. Divi – 1,66 %
  3. Popper – 1,17 %
  4. Astra – 1,14 %
  5. Avada – 0,82 %

aber das könnte sich ändern. Denn etwas anders sieht es inzwischen schon hinsichtlich der Beliebtheit bzw. den Empfehlungen (von Webdesignern) aus. Obwohl auch hier die üblichen Verdächtigen wie Divi, Astra, Avada und OceanWP nicht fehlen, erscheint GeneratePress doch zunehmend häufiger unter den 10 beliebtesten oder sogar unter den ersten 5 bei den Empfehlungen.

Lassen Sie sich insbesondere von der „Meistgenutzt“-Statistik nicht in die Irre führen.
Die Ergebnisse beziehen sich auf alle Arten von Websites jeglichen Alters und auch auf solche, die nicht unbedingt von Profis erstellt wurden. Viele Nutzer lassen sich eher vom äußeren Erscheinungsbild und der Auswahl an vorgefertigten Layouts als von der Qualität der Programmierung, der Individualität und dem Support beeindrucken. Wäre letzteres der Fall, sähe das Ergebnis mit Sicherheit anders aus.

Inhalt

Was ist ein Theme?

Grundsätzlich handelt es sich bei einem Theme um

„… eine Zusammenstellung von grafischen Elementen, die das Aussehen von […] Webseiten bestimmen. Innerhalb eines Systems bildet ein Theme eine in sich geschlossene Einheit, die ausgelagert ist und einzeln geladen wird. Dieser Ansatz erlaubt es, das Theme mit geringem Aufwand auszutauschen, ohne dabei andere Funktionseinheiten des Systems zu beeinflussen. – Die meisten Themes werden in PHP geschrieben. Sie enthalten HTML und Stylesheets (CSS) und bilden damit die programmierte Fassung vom einfachen Webdesign. Daneben bieten einige Themes aber auch die Möglichkeit an, ein Custom-Stylesheet zu verwenden, in welchem z. B. Farben oder Schriften angepasst werden können.“

Quelle: arocom.

Das Theme legt also die Basisfunktionen und das Gerüst für das Erscheinungsbild fest und besteht somit aus einzelnen Designelementen wie Layout (Header, Footer, …), Farben, Schriften, Icons, Buttons, usw. Dies erleichtert die Arbeit beim Erstellen einer Website insofern, dass die seitenübergreifenden Einstellungen nicht einzeln immer wieder neu programmiert, sondern nur noch angepasst und/oder bei Bedarf ergänzt werden müssen.

Dennoch ist Theme nicht gleich Theme. Viele der beliebtesten Themes bringen neben den Grundelementen mehrere fertige Vorlagen sowie bereits integrierte Sonderelemente mit, wodurch die volle Funktionsfähigkeit häufig erst durch die Installation zusätzlicher Plugins erreicht wird. Andere sind zwar einfach konzipiert, lassen sich aber auch nur begrenzt individualisieren oder erweitern.

Ziele von GeneratePress

Häufig nutzen Theme-Entwickler Aktualisierungen u. a. für das Integrieren immer neuer Funktionen und Vorlagen. Einerseits wollen Sie damit vor allem den Laien- / Hobby-Webdesignern entgegenkommen, die eine Website schnell nur per Drag & Drop gestalten und möglichst wenig selbst „programmieren“ wollen. Andererseits führt das dazu, dass der Code (Anweisungen nach der ein Programm ausgeführt wird) immer mehr aufgebläht wird. Normalerweise wird dieser beim Aufrufen jeder Website zunächst komplett geladen, unabhängig davon, ob die betreffende Website tatsächlich auch alle darin enthaltenen Elemente verwendet.

GeneratePress geht da seit 7 Jahren einen anderen Weg. Im Vordergrund stehen für Tom Usborne, den Entwickler des GeneratePress Themes, Geschwindigkeit und Nutzerfreundlichkeit.

„Von Beginn an beabsichtigte GeneratePress, eine leichtgewichtige Grundlage zu sein, die jedes Website-Projekt bewältigen kann. Das Ziel ist es, genau die richtige Menge an Anpassung[smöglichkeiten] anzubieten, gleichzeitig aber unglaublich leicht und stabil zu bleiben.“

Quelle: About GeneratePress (aus dem Englischen übersetzt)

Zwar wird auch dieses Theme kontinuierlich aktualisiert und weiterentwickelt, jedoch handelt es sich neben Fehlerbehebungen bzw. Code-Optimierungen nur um neue Optionen. Wenn Sie diese nicht aktivieren / nutzen, bleibt die Programmierung weiterhin auf die Programmzeilen beschränkt, die für die jeweilige Website tatsächlich benötigt werden. Falls Sie nur wenige Elemente oder Funktionen einsetzen, ist der Code entsprechend kurz. Aktivieren Sie eine zusätzliche Funktion, erweitert sich der Code nur um genau die dafür notwendigen Zeilen. Das sorgt nicht nur für kurze Ladezeiten, sondern es treten auch weniger Programmierfehler auf. Außerdem behalten Sie immer die Kontrolle über alles, woraus sich Ihre Website zusammensetzt.

GeneratePress – kostenloses Theme

Wie bei vielen anderen Themes bietet GeneratePress (kurz GP) eine freie Basis- und eine kostenpflichtige Premium-Version an. Um das kostenlose Theme zu installieren, loggen Sie sich in Ihr WordPress-CMS ein. Anschließend klicken Sie in der Menüleiste des Dashboards auf

  1. Design
  2. Themes

Auf der sich nun öffnenden Seite nutzen Sie oben links den Button Theme hinzufügen und geben in das Suchfeld (Themes durchsuchen) GeneratePress ein. Wenn Sie mit dem Cursor über das Vorschaubild des Themes fahren, erscheinen mehrere Schaltflächen. Einerseits können Sie sich die Details oder eine Live-Vorschau ansehen, andererseits aber auch direkt auf Installieren klicken.

GeneratePress - Theme
Theme-Informationen (Screenshot: WordPress / eb)

Nachdem die Installation abgeschlossen ist, haben Sie die Möglichkeit, GeneratePress sofort zu aktivieren oder Sie wechseln auf Ihre WordPress Theme-Seite und aktivieren es dort. Wenn Sie nun Ihre Website im Browser aufrufen, sehen Sie, dass sich das Erscheinungsbild verändert hat.

Bei einer neuen Website ist das WordPress-Standard-Theme mit Header-Bild und verschiedenen Platzhaltern durch eine sehr minimalistische, in den Farben von GeneratePress gestaltete Startseite mit einer Menü-Leiste oben, einem Platzhalter im Inhaltsbereich, einer Beispiel-Seitenleiste sowie einem einfachen Footer ersetzt.

Auch bei einer bereits erstellten Website wechselt das Layout, Ihre Inhalte bleiben jedoch erhalten. Abhängig davon, welches Theme Sie für Ihre alte Website benutzt hatten, müssen Sie unter Umständen einige Elemente wie Bildgrößen, Spalten oder Theme-spezifische Bestandteile anpassen. Dies betrifft vor allem Websites, die ursprünglich mit einem Page Builder oder vorgefertigten Designs erstellt wurden.

Kostenloses Theme
Dank der inzwischen recht umfangreichen Gestaltungsmöglichkeiten, die der Gutenberg-Editor von WordPress bietet, reicht für eine einfache Website das kostenlose Theme eventuell aus. Natürlich sind die Anpassungsoptionen wie bei allen kostenlosen Programmen eingeschränkt. So gibt es nur eine begrenzte Auswahl an Farben, Schriften sowie einige Grundelemente. Darüber hinaus erscheint in der Fußleiste ein Hinweis auf GeneratePress, den Sie auch nicht entfernen können.

Premium-Theme

Sobald es sich um eine umfangreichere (Business-)Website handelt, sollten Sie auf jeden Fall in die Premium-Version von GeneratePress investieren. Damit stehen Ihnen dann alle Werkzeuge für das Erstellen einer wirklich individuellen Website zur Verfügung. Auch können Sie den Hinweis auf GeneratePress im Footer entfernen, was ebenfalls zum professionellen Eindruck der Website beiträgt. Um GeneratePress Premium zu installieren, besuchen Sie zunächst die Website des Anbieters.

Dort klicken Sie im Hauptmenü auf Premium, wo Sie sich über alle Features informieren können. Wenn Sie weiter scrollen oder den Button Pricing am Seitenanfang nutzen, gelangen Sie zur Preisliste. Dort haben Sie die Wahl zwischen zwei Varianten. Beide beinhalten alle Premium Features, vollen Zugang zur Site Library (Vorlagen-Sammlung), 30 Tage Geld-zurück-Garantie sowie die Lizenz für die Nutzung des Themes auf bis zu 500 Websites.

  • Variante 1: Updates und Premium-Support für 1 Jahr = 59 US-Dollar pro Jahr
  • Variante 2: Lebenslange Updates mit Premium-Support = einmalig 259 US-Dollar

Wenn Sie sich für eine der Varianten entschieden haben, gelangen Sie zu einer Formular-Seite. Zur Abwicklung des Kaufs benötigt GeneratePress (EDGE22 Studios) folgende Informationen: Zahlungsmethode (PayPal oder Kreditkarte), Ihre E-Mail-Adresse und Ihren Vornamen sowie „Ihr“ Land und Bundesland. Darüber hinaus müssen Sie einen Nutzername und ein Passwort anlegen.

Nachdem Sie den Kauf abgeschossen haben, loggen Sie sich bei GeneratePress ein und klicken rechts oben auf Account > Downloads. Dort finden Sie eine Liste Ihrer Käufe sowie Ihr Profil, dessen Angaben Sie hier ggf. auch ändern können.

Anmeldedaten sichern
Speichern Sie den von Ihnen gewählten Nutzernamen und das zugehörige Passwort in einem Passwort-Safe. Spätestens wenn Sie eine zweite Website mit GeneratePress erstellen oder Ihr Abonnement ändern / verlängern wollen, werden Sie wieder auf Ihren Account zugreifen müssen.

Installation

Wichtig für das weitere Vorgehen ist der Kasten mit Informationen über Ihr GP Premium. Einerseits sind dies Angaben zum Typ (Plugin), zur aktuellen Version, ein Link zur Installationsanleitung (Englisch) sowie das Ablaufdatum (bei einer Jahreslizenz von Bedeutung). Andererseits beginnt hier sozusagen die Installation.

  1. Klicken Sie auf den Download-Button
  2. Laden Sie das Plugin auf Ihren PC herunter
  3. Kopieren Sie den Lizenzschlüssel
  4. Speichern Sie ihn ebenfalls als Notiz auf Ihrem PC

Zum Fortfahren öffnen Sie Ihr WordPress-CMS (wordpress.org) und im Menü der Seitenleiste den Punkt Plugins – nicht Themes!

  1. Klicken Sie oben links auf Installieren =
  2. eine neue Seite mit der Plugin-Auswahl von WordPress öffnet sich.
  3. Klicken Sie wiederum oben auf Plugin hochladen,
  4. darunter auf Datei auswählen, dann
  5. auf Ihrem PC auf die zuvor heruntergeladene zip-Datei
  6. und zum Schluss auf Jetzt installieren.

Sobald der Installationsvorgang abgeschlossen ist, erscheint GP Premium in der Liste Ihrer installierten Plugins. Dort aktivieren Sie das Plugin und gehen anschließend auf Konfigurieren. Auf der neuen Seite (auch unter Design > GeneratePress zu finden) schließen Sie die Installation ab.

Zuerst kopieren Sie den zuvor gespeicherten Lizenzschlüssel und fügen ihn oben in das entsprechende Feld ein. Sofern der Schlüssel korrekt eingetragen wurde, erscheint oberhalb die grün hinterlegte Mitteilung, dass Sie Premium Updates erhalten (Receiving premium updates).

Falls Sie sich für ein Jahres-Abonnement entschieden hatten und dieses nicht rechtzeitig verlängert haben, erscheint dort die rote Warnung, dass Sie keine Premium Updates mehr erhalten. Dies hat jedoch keine Auswirkungen auf Ihre bestehende Website, nur wird danach das Plugin nicht mehr aktualisiert, sondern lediglich das Basis-Theme.

Premium Plugin
Beachten Sie, dass es sich bei GeneratePress Premium nicht um ein eigenes Theme handelt, sondern um ein zusätzliches Plugin mit Erweiterungsmöglichkeiten für das Basis-Theme. Löschen Sie auf keinen Fall das GeneratePress Theme aus Ihrer Theme Bibliothek!

GeneratePress Module

Unterhalb des Lizenzschlüssels befindet sich auf der Einrichtungsseite eine Liste der sogenannten Module. Einige Optionen ermöglichen es Ihnen, zusätzliche Features in Ihre Website zu integrieren. Andere erweitern die schon im kostenlosen GeneratePress Theme vorhandenen Anpassungsmöglichkeiten. Im Einzelnen betreffen sie …

  • den Customizer:
    • Hintergründe für Seiten, Footer-Widgets, Footer
    • Blog = Beitrags-Übersichtsseite/n
    • Copyright (s. kostenloses Theme)
    • Menu Plus = erweiterte Optionen für das Hauptmenü
    • Sekundäre Navigationsleiste = zusätzliches Menü im Kopfbereich
    • Typografie = erweiterte Anpassung von Überschriften und Text
  • den Editor:
    • Elemente = Deaktivieren einzelner Elemente auf Seiten/in Beiträgen
    • Abschnitte (Sections) = unterschiedliches Layout für Teilbereiche einer Seite
    • Innenabstand = individuelle Abstände einzelner Elemente zueinander
  • Sonstiges:
    • Elements = Seiten-/Beitrags(un)abhängiges individuelles Layout
    • Seiten-Bibliothek (Site Library) = vorgefertigte Designs z.B. für Ihre Startseite
    • WooCommerce[1] = zusätzliche Optionen für die Gestaltung von Verkaufs-Websites

[1] Kann nur nach der Installation des WooCommerce Plugins von WordPress aktiviert werden.

Wie bereits zuvor erwähnt, zeichnet sich GeneratePress durch sein „Leichtgewicht“ aus. Ein Grund dafür sind diese Module. Im Gegensatz zu vielen anderen Themes sind nicht alle Funktionselemente automatisch in die Programmierung für alle Websites integriert. Daher erscheint bei GeneratePress der z. B. für eine sekundäre Navigation notwendige Code nicht in der Programmierung Ihrer Website, solange Sie dieses Modul nicht aktiviert haben.

GeneratePress - Module
GeneratePress Module (Screenshot: WordPress / eb)

Unterhalb der Modulliste haben Sie die Möglichkeit, direkt mit der Anpassung einiger Einstellungen zu beginnen. Ich empfehle jedoch, dies im Customizer zutun, wo Sie systematisch jeden einzelnen Punkt durchgehen sollten. Wie Sie mit diesem Customizer arbeiten, erfahren Sie in einem eigenen Beitrag über den GeneratePress Customizer.

Am Ende dieser Seite bietet Ihnen GeneratePress noch an, alle oder einige Ihrer Einstellungen zu exportieren bzw. aus einer zuvor auf Ihrem PC gespeicherten Datei zu importieren.

Nur notwendige Erweiterungen nutzen
Sie selbst bestimmen bei GeneratePress, welche Erweiterungen Sie auf Ihrer Website tatsächlich einsetzen. Aktivieren Sie nur die Module, die Sie tatsächlich verwenden wollen und lassen Sie alle anderen deaktiviert. Natürlich können Sie Ihre Auswahl auch jederzeit ändern, falls Sie später ein neues Modul hinzufügen möchten oder ein aktives doch nicht (mehr) benötigen.

Module – Elements und Abschnitte

Die in meiner Liste unter „Customizer“ aufgeführten Module beschreibe ich näher in einem separaten Beitrag. Die unter „Editor“ genannten Anpassungsoptionen erreichen Sie über die rechte Seitenleiste, sobald Sie eine Seite / einen Beitrag neu erstellen oder bearbeiten.

Als recht nützlich erweist sich das Modul Elemente. Es ermöglicht Ihnen, das als Standard seitenübergreifend eingestellte Erscheinungsbild nur für (eine) spezielle Seite(n) zu ändern, ohne dass andere Seiten/Inhalte davon betroffen sind. Unter dem Menüpunkt Layout finden Sie folgende Optionen:

  • Seitenleisten-Layout: Hinzufügen, Weglassen oder Positionsänderung der im Customizer als Standard festgelegten Seitenleiste/n.
  • Footer Widgets: Erweitern oder Verringern deren, im Customizer seitenübergreifend eingestellten Anzahl.
  • Inhalts-Container: Wechsel von „Gesamte Breite“ zu „Breite wie Inhalt“ oder umgekehrt.
  • Elemente deaktivieren: Gezieltes Ausblenden der Top-Bar, des Kopfbereichs (Desktop / mobil), der primären Navigation, des Beitragsbilds, des Inhaltstitels oder des Fußbereichs.

Mit dem Modul Abschnitte (Sections) haben Sie die Option, das Layout für einzelne Bereiche einer Seite mit mehreren Gestaltungselementen wie Überschrift + Galerie + Text etc. zu verändern. Beispielsweise kann ein Bereich über die gesamte Breite gestaltet und mit einer eigenen Hintergrundfarbe versehen werden. Andere Bereiche dieser Seite blieben unverändert.

Theme plus GenerateBlocks
Anstelle des Moduls „Abschnitte“ empfehle ich jedoch die Installation des Plugins GenerateBlocks – ebenfalls vom Entwickler von GeneratePress. Insbesondere wenn Sie auf vielen Seiten Bereiche individuell gestalten möchten, lässt es sich damit wesentlich flüssiger und intuitiver arbeiten.

GeneratePress Elements

Dieses Modul von GeneratePress fügt dem Menü des WordPress Dashboards unter Design einen entsprechenden Unterpunkt hinzu. Sobald Sie darauf klicken, öffnet sich eine neue Übersichtsseite mit den bereits vorhandenen Elementen bzw. einem Button, über den Sie ein neues Element erstellen können.

GeneratePress - Elements
GeneratePress Elements (Screenshot: WordPress / eb)

Nachdem Sie auf Neues Element hinzufügen geklickt haben, erscheint ein kleines Auswahlmenü, wo Sie auf den gewünschten Element-Typ (Block, Hook, Layout oder Kopfbereich) klicken. Was Sie auswählen hängt davon ab, welchen Bereich Sie modifizieren möchten. Falls beispielsweise das Design für den Fußbereich individuell gestaltet werden soll, wäre dies ein „Block“.

Unabhängig davon, für welchen Typ Sie sich entschieden haben, bestimmen Sie im Editor für jedes Element selbst die Anzeigeregeln. Das bedeutet, dass Sie festlegen, ob Ihr neugestaltetes Element den Standard nur auf bestimmten Seiten, in bestimmten Kategorien, für bestimmte Benutzer, etc. ersetzen soll. Außerdem haben Sie die Möglichkeit, bei einem eigentlich für die gesamte Website wirksamen Element beispielsweise einzelne Seiten auszuschließen.

Editor für Elements

Je nach Elements-Typ verändert sich der Editor und bietet Ihnen genau die Anpassungsmöglichkeiten an, die zur Veränderung des gewünschten Bereichs notwendig sind. Während es bei den Typen Layout und Kopfbereich (Navigation) nur wenige Optionen gibt, gleicht der Editor für den Typ Block dem für die Bearbeitung von Seiten/Beiträgen. Um das Ergebnis auf der Website sehen zu können, müssen Sie Ihre Eingaben immer zuerst speichern. Falls Sie weitere Änderungen vornehmen möchten, klicken Sie in der Elements-Übersicht unter dem betreffenden Element auf „Bearbeiten“ und nach der Bearbeitung wieder auf „Speichern“.

GeneratePress - Elements Editor
Block-Editor für Elements (Screenshot: WordPress / eb)

Beispiel: Sie möchten den Titel-Bereich um eine kurze Inhaltsbeschreibung, Angaben zur Kategorie oder Ähnliches ergänzen und mit einem besonderen Layout versehen. Dazu wählen Sie den Typ Block aus. Zuerst tragen Sie in die oberste Zeile den Namen des Elements ein. Dieser dient nur zu Ihrer Orientierung und erscheint nicht auf Ihrer Website. Anschließend bestimmen Sie in der rechten Seitenleiste mittels Auswahllisten, wo Sie den neue Bereich einsetzen möchten:

  1. Element Typ: Page Hero (soll auf einer Standard-Seite einen Bereich hinzufügen oder ersetzen), Seitenleiste, Footer, etc.
  2. Quick Hook Select: Stelle, an der das Element sich festhaken soll, z. B. after header (unter dem Seitenkopf), before content /-container (vor dem Inhalt/s-Container).
  3. Hook name (Name des Haken): z. B. after header

Darüber hinaus haben Sie noch die Möglichkeit, den Titel, das Beitragsbild und/oder die primären Post-Metadaten zu deaktivieren. Dies ist immer dann sinnvoll, wenn Sie z. B. einen neuen Seitenkopf erstellen und eine doppelte Anzeige des Titels oder Beitragsbilds vermeiden möchten. Anschließend kreieren sie im Eingabefeld des Editors mit Hilfe der Gutenberg-Blöcke wie gewohnt ein/Ihr neues Layout.

Vergessen Sie nach der Fertigstellung nicht, anzugeben, wo dieses Element den ursprünglichen, im Customizer festgelegten Standard ersetzen soll. Natürlich haben Sie auch die Möglichkeit, die Vorlage jederzeit zu bearbeiten, indem Sie Teile davon löschen, verschieben, etwas hinzufügen oder sonstige Design-Anpassungen vornehmen bzw. das Element komplett löschen.

Templates als Inspiration
Falls es Ihnen an Ideen mangelt oder Sie zwar eine Vorstellung haben, aber nicht wissen wie Sie sie umsetzen, finden Sie ebenfalls in der rechten Seitenleiste unter Templates einige Design-Vorlagen. Per Klick fügen Sie eine Vorlage in den Editor ein und können diese direkt übernehmen.

Teil 2 – Site Library, Documentation

GeneratePress | Teil 2