GeneratePress | Das perfekte WP-Theme – 12 Tipps

GeneratePress – ein WordPress-Theme

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

1. Divi – 1,17 %
2. Astra Theme – 1,16 %
3. Hello Elementor – 1,14 %
4. GeneratePress – 0,9 %
5. Newspaper – 0,68 %
6. Avada – 0,51 %

ist es 2023 auf Platz 4 vorgerückt. Ähnlich sieht es inzwischen 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 auch dort zunehmend häufiger unter den 10 beliebtesten oder sogar unter den ersten 5 bei den Empfehlungen.

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 und die Funktion fest und besteht somit aus einzelnen Design-Elementen 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 die Vorgaben für Sonderelemente mit, wodurch die volle Funktionsfähigkeit häufig erst durch die Installation zusätzlicher Plug-ins 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-Designern entgegenkommen, die eine Website nur per Drag & Drop schnell gestalten und möglichst wenig selbst „programmieren“ wollen. Andererseits führt das dazu, dass der Code 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 mehr als 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 Anpassungsmö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 du diese nicht aktivierst / nutzt, bleibt die Programmierung weiterhin auf die Programmzeilen beschränkt, die für die jeweilige Website tatsächlich benötigt werden. Falls du nur wenige Elemente oder Funktionen einsetzt, ist der Code entsprechend kurz. Aktivierst du 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 behältst du immer die Kontrolle über alles, woraus sich deine Website zusammensetzt.

GeneratePress – Kostenloses Theme

Wie bei vielen anderen Themes bietet GeneratePress (kurz GP) eine freie Basis- und eine kostenpflichtige Premium- bzw. Pro-Version an. Um das kostenlose Theme zu installieren, loggst du dich in dein WordPress-CMS ein. Anschließend klickest du in der Menüleiste des Dashboards auf

1. Design
2. Themes

Auf der sich nun öffnenden Seite nutzt du oben links den Button Theme hinzufügen und gibst in das Suchfeld (= Themes durchsuchen) GeneratePress ein, dass darauf unterhalb angezeigt wird. Wenn du mit dem Cursor über das Vorschaubild des Themes fährst, erscheinen mehrere Schaltflächen. Einerseits kannst du dir die Details oder eine Live-Vorschau ansehen, andererseits aber auch direkt auf Installieren klicken.

Nachdem die Installation abgeschlossen ist, hast du die Möglichkeit, GeneratePress sofort zu aktivieren oder du wechselst auf deine WordPress Theme-Seite und aktivierst es dort. Wenn du nun deine Website im Browser aufrufst, siehst du, dass sich das Erscheinungsbild verändert hat.

Bei einer neuen Website wurde 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 einer einfachen Leiste am Ende der Seite ersetzt.

Auch bei einer bereits erstellten Website wechselt das Layout, deine Inhalte bleiben jedoch erhalten. Abhängig davon, welches Theme du für deine alte Website benutzt hattest, musst du unter Umständen einige Elemente wie Bildgrößen, Spalten oder Theme-spezifische Bestandteile anpassen. Etwas aufwendiger ist die Anpassung bei Websites, die ursprünglich mit einem Page Builder oder vorgefertigten Designs erstellt wurden.

Premium-Theme

Sobald es sich um eine umfangreichere (Unternehmens-) Website handelt, solltest du auf jeden Fall in die Premium-Version von GeneratePress investieren. Damit stehen dir dann alle Werkzeuge für das Erstellen einer wirklich individuellen Website zur Verfügung. Auch kannst du dann natürlich den Hinweis auf GeneratePress im Footer entfernen, was ebenfalls zum professionellen Eindruck der Website beiträgt. Um GeneratePress Premium zu installieren, besuchst du zunächst die Website des Anbieters.

Dort klickst du im Hauptmenü auf Premium und erhältst zunächst Informationen über alle Premium-Features. Wenn du weiter scrollst oder den Button Pricing am Seitenanfang nutzt, gelangst du zur Preisliste. Dort hast du 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 du dich für eine der Varianten entschieden hast, gelangst du zu einer Formular-Seite. Zur Abwicklung des Kaufs benötigt GeneratePress (EDGE22 Studios) folgende Informationen: Zahlungsmethode (PayPal oder Kreditkarte), deine E-Mail-Adresse und deinen Vornamen sowie „dein“ Land und Bundesland. Darüber hinaus musst du einen Nutzername und ein Passwort anlegen.

Nachdem du den Kauf abgeschossen und eine Bestätigungs-E-Mail / Rechnung erhalten hast, loggst du dich bei GeneratePress ein und klickst rechts oben auf Account > Downloads. Dort findest du eine Liste deiner Käufe sowie dein Profil, dessen Angaben du hier ggf. auch ändern kannst.

Installation

Wichtig für das weitere Vorgehen ist der Kasten mit Informationen über dein 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. Klick auf den Download-Button
2. Lade das Plugin auf deinen PC herunter
3. Kopiere den Lizenzschlüssel
4. Speichere ihn ebenfalls als Notiz auf deinem PC

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

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

Sobald der Installationsvorgang abgeschlossen ist, erscheint GP Premium in der Liste deiner installierten Plugins. Dort aktivierst du das Plugin und gehst anschließend auf Konfigurieren. Auf der neuen Seite (auch unter Design > GeneratePress zu finden) schließt du die Installation ab.

Zuerst kopierst du den zuvor gespeicherten Lizenzschlüssel und fügst ihn oben in das entsprechende Feld ein. Sofern der Schlüssel korrekt eingetragen wurde, erscheint oberhalb die grün hinterlegte Mitteilung, dass du Premium Updates erhältst (Receiving premium updates).

Falls du dich für ein Jahres-Abonnement entschieden hattest und dieses nicht rechtzeitig verlängerst, erscheint dort die rote Warnung, dass du keine Premium Updates mehr erhältst. Dies hat jedoch keine Auswirkungen auf deine bestehende Website. Es endet nur der Premium-Support und das Plugin wird nicht mehr aktualisiert, sondern lediglich das Basis-Theme.

GeneratePress Module

Unterhalb des Lizenzschlüssels befindet sich auf der Einrichtungsseite eine Liste der sogenannten Module. Einige Optionen ermöglichen es dir, zusätzliche Features in deine 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-Übersichts-Seite/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
  • Innenabstand = individuelle Abstände einzelner Elemente zueinander
• Sonstiges:
  • Elements = Seiten-/Beitrags-abhängiges oder Seiten-/Beitrags-übergreifendes individuelles Layout
  • Seiten-Bibliothek (Site Library) = vorgefertigte Designs z.B. für deine 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 deiner Website, solange du dieses Modul nicht aktiviert hast.

Unterhalb der Modulliste hast du die Möglichkeit, direkt mit der Anpassung einiger Einstellungen zu beginnen. Ich empfehle jedoch, dies im Customizer zu tun, wo du systematisch jeden einzelnen Punkt durchgehen solltest. Wie du mit diesem Customizer arbeitest, erfährst du in einem eigenen Beitrag über den GeneratePress Customizer.

Am Ende dieser Seite bietet dir GeneratePress noch an, alle oder einige deiner Einstellungen zu exportieren bzw. aus einer zuvor auf deinem PC gespeicherten Datei zu importieren. Über den Button am Ende der Seite kannst du alle Einstellungen mit einem Klick zurücksetzen.

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 erreichst du über die rechte Seitenleiste, sobald du eine Seite / einen Beitrag neu erstellst oder bearbeitest.

Unter dem Menüpunkt Layout findest du 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.

Auf vielen Websites dürfte sich das Modul Elemente als sehr nützlich erweisen. Es ermöglicht dir beispielsweise, das als Standard seitenübergreifend eingestellte Erscheinungsbild nur für (eine) spezielle Seite(n) zu ändern, ohne dass andere Seiten/Inhalte davon betroffen sind.

GeneratePress Elements

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

Nach einem Klick auf Neues Element hinzufügen, erscheint ein kleines Auswahlmenü, wo du den gewünschten Element-Typ (Block, Hook, Layout oder Kopfbereich) auswählst. Welcher der richtige ist, hängt davon ab, welchen Bereich du modifizieren möchtest. 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 du dich entschieden hast, bestimmst du im Editor für jedes Element selbst die Anzeigeregeln. Das bedeutet, dass du festlegst, ob dein neugestaltetes Element den Standard nur auf bestimmten Seiten, in bestimmten Kategorien, für bestimmte Benutzer, etc. ersetzen soll. Außerdem hast du 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 dir 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, musst du deine Eingaben immer zuerst speichern. Falls du weitere Änderungen vornehmen möchtest, klickst du in der Elements-Übersicht unter dem betreffenden Element auf „Bearbeiten“ und nach der Bearbeitung wieder auf „Speichern“.

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

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 hast du noch die Möglichkeit, den Titel, das Beitragsbild und/oder die primären Post-Metadaten zu deaktivieren. Dies ist immer dann sinnvoll, wenn du z. B. einen neuen Seitenkopf erstellst und eine doppelte Anzeige des Titels oder Beitragsbilds vermeiden möchtest. Anschließend kreierst du im Eingabefeld des Editors mit Hilfe der Gutenberg-Blöcke wie gewohnt ein/dein neues Layout.

Vergiss nach der Fertigstellung nicht, anzugeben, wo dieses Element den ursprünglichen, im Customizer festgelegten Standard ersetzen soll. Natürlich hast du auch die Möglichkeit, die Vorlage jederzeit zu bearbeiten, indem du Teile davon löschst, verschiebst, etwas hinzufügst oder sonstige Design-Anpassungen vornimmst bzw. das Element komplett entfernst.

Weiterlesen – Site Library, Documentation

GeneratePress | Seite 2