Grundlagen zur Erstellung von Landingpages mit WordPress

Die Konzeption, Gestaltung und Texte der Landingpages und anderen Unterseiten ist ein wichtiger Teil der meisten Marketing- und Sales-Kampagnen. Hierfür ist es sinnvoll, sich ein paar Webdesign-Basics anzueignen, die dann sowohl auf WordPress, als auch auf anderen Website-Systemen angewendet werden können.

Der Block-Editor von WordPress (als bekannteste Komponente des „Gutenberg“ Projektes von WP) erlaubt es, verschiedene Arten von Inhalten darzustellen, den „Content“. Der Block-Editor ist standardmäßig auf allen neuen WP-Sites aktiv, um bequem Beiträge und Seiten zu gestalten und mit Inhalten zu füllen. Viele Blöcke bieten auch die Möglichkeit, vereinzelt Farben, Schriften und Abstände der Blöcke zueinander anzupassen.

Kann man so machen, ich würde aber empfehlen, die Farben und Schriften lieber auf einer „globalen“ Ebene einzustellen, zB. über den Customizer. Neben dem Content können dort meistens auch der Header, Footer, das Navigations-Menü und die Sidebar für die gesamte Site eingerichtet werden.

Neuerdings bietet WP auch die Möglichkeit, über das Full-Site-Editing (kurz: FSE) sämtliche Bereiche einer Website mit Blöcken zu gestalten – bei Benutzung entsprechend kompatibler Themes.

In diesem Beitrag erkläre ich euch zunächst einige Grundlagen bezüglich eines klassischen Website-Layouts, und zeige euch anschließend, wie ihr für eure Kampagnen eine individuelle Landingpage erstellt, die automatisch im Design eurer Website dargestellt wird.

Webdesign & Layout Basics

Unterschied zwischen Website & Webseite

Zunächst sei auf die Unterscheidung zwischen „Website“ „Webseite“ bzw. „Site“ und „Seite“ hingewiesen:

Eine Website oder Site ist quasi die oberste Ebene, eine Webseite ist nur eine einzelne Seite bzw. Unterseite. Eine Website umfasst also sämtliche Webseiten oder Seiten und Beiträge, die beim Aufruf unter einer Webadresse (Domain) angezeigt werden.

Übrigens kürze ich hier im Beitrag den Begriff „WordPress“ häufig mit „WP“ ab.

Unterschied zwischen Landingpage & Homepage

Mit Landingpages sind bestimmte Sorten von Webseiten gemeint, die meistens nur ein einziges Konversion-Ziel verfolgen. Homepages sind immer die erste Seite einer Website, die unter einer Domain angezeigt wird. Diese hat meistens informierenden Charakter und leitet häufig auf weitere Landingpages weiter.

Eine tiefergehende Erläuterung der Unterschiede findest du in diesem Artikel des Codeinwp-Blogs.

Die gängigsten Elemente auf einer Webseite

Das Design einer Webseite beinhaltet in den meisten Fällen Elemente wie

• Layout-Elemente (Sektionen & Spalten)
• Headlines (untergliedert in h1 bis h6)
• Texte
• Listen
• Bilder
• Videos
• Formulare
• Buttons

und manchmal auch Bilder-Galerien, Slider und Animationen, doch dazu mehr an anderer Stelle.

Globale Bereiche

Fast alle Websites enthalten zudem „globale“ Bereiche, die auf allen Pages dargestellt werden. Hierzu zählen:

• Kopfbereich (Header) mit Logo, Navigations-Menü, Anmelde-Button
• Fußbereich (Footer) mit Impressum, AGB und anderen Links
• Seitenleiste (Sidebar) mit Suchfeld, Blog-Kategorien, Newsletter-Feld und anderen Elementen

In WordPress können diese Bereiche je nach verwendetem Theme meistens über den Customizer angepasst werden.

Layouts & Templates

Die meisten Websites enthalten neben der Startseite noch verschiedene Unterseiten, deren Layout über Seiten-Vorlagen (Templates) definiert sind:

• Standard-Seiten für Impressum & Datenschutz
• Übersicht der Blog-Beiträge
• Einzelansicht eines Blog-Beitrags

Eine Landingpage kann also ebenfalls mit dem Layout einer Standard-Seite angelegt werden, oder ein eigenes Template nutzen.

In einem Template können sowohl die globalen Bereiche, als auch der Content-Bereich definiert werden, also der Bereich, der zwischen Header & Footer angezeigt wird.

Dynamische Inhalte

Und dann gibt es noch sogenannte „dynamische“ Seiten. Das bedeutet, dass sich die Inhalte auf einer Seite automatisch verändern, ohne dass das dortige Design explizit angepasst wird.

Zum Beispiel zeigt die Blog-Übersichtsseite häufig die letzten Blog-Beiträge ganz oben an und wird automatisch – also dynamisch – aktualisiert, sobald ein neuer Beitrag veröffentlicht wird.

Unterschied zwischen Seite & Beitrag (Seiten-Typen)

In WP lassen sich sowohl Seiten als auch Beiträge anlegen.

Eine Seite ist meistens fest im Menü oder Footer verankert und erscheint somit „statisch“, ohne dass sich dort für die Besucher viel ändert im Laufe der Zeit.

Ein Beitrag ist an sich auch statisch, allerdings enthält dieser eine Kommentar-Funktion, sodass bei jedem neuen Aufruf des Beitrags die Besucher ggf. neue Kommentare zu sehen bekommen.

Zudem werden die Beiträge auf der Blog-Übersichtsseite untereinander dargestellt. Für die Seiten ist eine solche Übersicht nicht vorgesehen.

Style Guide

Ein harmonisch abgestimmtes Design lässt sich am einfachsten mit ein paar Gestaltungs-Regeln umsetzen, die idealerweise auf alle Elemente gleichermaßen angewendet werden.

Diese Regeln spielen eine extrem wichtige Rolle, denn sie definieren die zu verwendenden Schriften (Schriftart, Größe, Schnitte etc.), Farben, Größen, Abstände und noch andere visuelle Eigenschaften.

Usability

Ein harmonisches und konsistentes Design ist extrem wichtig für die Lesbarkeit und Benutzbarkeit (Usability) einer Website, genauso wie die Benutzerführung, bzw. die Positionierung der Elemente.

Damit bei einer Landingpage die Besucher nicht allzusehr vom Inhalt abgelenkt werden, wird hier häufig auf das Navigations-Menü und andere Elemente verzichtet.

Je nach verwendeten Theme oder Pagebuilder, können nicht benötigte Elemente, die sonst in den globalen Bereichen enthalten sind, mit ein paar Klicks ausgeblendet werden.

Webdesign mit WordPress

Um eine Landingpage mit WP zu erstellen, ist es gut zu wissen, wie die oben genannten Elemente & Bereiche in einem WP-Theme umgesetzt werden können.

Eigene Themes

In WP konnte man sich früher einfach ein schickes kostenloses (oder kommerzielles) Theme aussuchen, das all diese Regeln und Elemente bereits vordefiniert enthielt und man nur noch die Inhalte wie Texte & Bilder anpassen bzw. neu hinzufügen brauchte.

Viele User wollten allerdings mehr Gestaltungsmöglichkeiten für eigene Ideen bekommen, was über die Entwicklung eines eigenen Themes zwar immer schon möglich war. Doch aufgrund der erforderlichen Programmierkenntnisse war das für die meisten Anwender meist zu aufwendig und komplex.

Pagebuilder

Daher sind im Markt die sogenannten „Pagebuilder“ entstanden, die wie ein Grafik-Programm oder ein Baukasten-System genutzt werden können und man schon während der Gestaltung gleichzeitig das Ergbnis ansehen konnte. Diese praktische Eigenschaft entspricht dem „WYSIWYG“-Prinzip, was eine gängige Abkürzung ist für das englische „What you see is what you get“.

Pagebuilder können meist als Plugin installiert werden und „stülpen“ einem Theme quasi eine weitere Anwendungs-Ebene über. Auf die Vor- und Nachteile von Pagebuildern gehe ich hier nicht weiter ein, es lohnt sich aber zu dem Thema selber zu recherchieren.

Gutenberg – Der WordPress Standard

WP selber hat irgendwann eher die Nachteile von Pagebuildern erkannt und im Jahr 2018 damit begonnen, ein eigenes Layout-System namens „Gutenberg“ in den Kern von WP zu integrieren. Diese Integration wird voraussichtlich erst in einigen Jahren vollständig abgeschlossen sein und wird bis dahin über verschiedene Stufen ausgerollt.

Das Gutenberg-Projekt besteht aus mehreren Komponenten, von denen der „Block-Editor“ wohl am bekanntesten ist. Zudem gibt es ein gleichnamiges Plugin, in dem Funktionen getestet werden, die dann in einer künftigen Version im WP-Kern fest verbaut werden. Eine weitere Komponente ist das eingangs erwähnte „Full-Site-Editing“. Eine gute Erklärung für die verschiedenen Komponenten können in einer Klarstellung von Fränk Klein auf humanmade.com nachgelesen werden.

Webseiten mit Gutenberg gestalten

Block-Editor vs. Customizer vs. Pagebuilder vs. FSE

Der Block-Editor (Gutenberg) öffnet sich automatisch, sobald eine neue Seite oder ein neuer Beitrag erstellt wird. Wie der Editor genau aussieht und genutzt werden kann, welche Blöcke bereits von WP zur Verfügung gestellt werden und für welche Inhalte und Elemente genutzt werden kann, wird sehr anschaulich in der Gutenberg-Fibel angezeigt, eine Website von Jessica Lyschik.

Mit Gutenberg kann der komplette Content-Bereich einer Seite gestaltet werden, der zwischen den globalen Bereichen (Header & Footer) angezeigt wird.

Um Header & Footer ebenfalls mit Gutenberg zu gestalten … tja …

Stand jetzt (22.06.2022) haben wir eine Situation, wo uns einerseits einige Themes erlauben, globale Bereiche über den Customizer anzupassen. Und auch die meisten Pagebuilder bieten eine solche Möglichkeit, dort dann eben nicht über den Customizer, sondern über ihre eigene Anwendungs-Ebene.

Auch WP selber bietet mit dem „Full-Site-Editing“ (FSE) neuerdings Möglichkeiten an, um globale Bereiche und sogar ganze Templates mit Gutenberg-Blöcken zu gestalten. Das FSE ist allerdings noch nicht besonders ausgereift, daher gehe ich hier nicht weiter darauf ein. In den kommenden Jahren wird bzgl. FSE allerdings sicherlich noch viel passieren, daher lohnt es, sich frühzeitig mit dem Thema zu befassen.

Gutenberg-Themes und Block-Bibliotheken

Mittlerweile gibt es einige Hersteller, die nicht nur ein Gutenberg-kompatibles Theme anbieten, sondern auch eigene Block-Bibliotheken, die als Plugin installiert werden können. Diese ergänzen die Standard-Blöcke von WP und glänzen durch eine Vielzahl von Gestaltungs- und Einstellungsmöglichkeiten direkt im Standard-Customizer.

Globale Bereiche individuell ausblenden

Themes wie Astra, Blocky, Kadence, Neve und Olympus bieten zudem die Möglichkeit, auch im Block-Editor einzustellen, ob und welche globalen Bereiche auf bestimmten Seiten angezeigt werden können.

Landingpages mit WP & Gutenberg gestalten

Endlich kommen wir zu dem Punkt, wo ich euch anhand von Beispielen zeige, wie ihr eine Landingpage erstellt, die sich nahtlos in Design der Website einfügt, jedoch nicht alle Elemente der globalen Bereiche anzeigt.

Struktur einer Landingpage

Eine Landingpage kann verschiedene Ziele haben:

• Bewerbung eines Freebies • Anmeldung für ein Webinar • Portfolio der eigenen Dienstleistung

und viele mehr.

Entscheidend ist der obere Bereich, der den Besuchern sofort angezeigt wird. Dieser wird mal „Above the fold“ oder noch spezifischer „Hero Header“ genannt.

FORTSETZUNG FOLGT