Kennst du das auch? Du hast dir mühsam überlegt, wie du deine Website strukturieren und gestalten möchtest – doch an der Umsetzung hakt es. Es ist nämlich gar nicht so offensichtlich, wie man Seiten gestaltet, die nicht nur aus Text und ein paar Bildern bestehen. Der Texteditor von WordPress kommt da schnell an seine Grenzen.

Mit der anstehenden WordPress-Version 4.8 wird der Editor zwar deutlich erweitert, aber vermutlich noch nicht ausreichen, um großartige Startseiten oder Verkaufsseiten zu gestalten.

Daher stelle ich dir in diesem Artikel verschiedene Möglichkeiten vor, Inhalte in WordPress kreativer zu gestalten. Besonders wichtig ist mir dabei, dass das Ergebnis responsive ist und die Ladezeit nicht unnötig verlangsamt – alle vorgestellten Plugins und Tools bieten das.

Die Grundlage: Dein Theme

Der grundsätzliche Aufbau, das Layout und Design wird in WordPress vom aktiven Theme bestimmt. Abhängig davon kannst du beispielsweise Seiten mit oder ohne Sidebar gestalten und den Aufbau deiner Blog- oder Startseite bestimmen.

Inbesondere für die Startseite bieten viele Themes spezielle Gestlatungsmöglichkeiten an. Die haben meist den Vorteil, dass du mit wenig Aufwand nützliche, erprobte Layouts umsetzen kannst, die responsive sind. Andererseits sind die Möglichkeiten meist stark begrenzt in Anpassbarkeit und manchmal sogar Anzahl der Elemente pro Seite.

Doch verzweifle nicht, falls du in deinem Theme gar keine oder nicht zufrieden stellende Möglichkeiten findest.

Theme-Templates erweitern

Wenn es dir um die Gestaltung bestimmter, gleichförmiger Inhaltstypen geht, kommt eine Anpassung der WordPress-Templates infrage. Beispielsweise kann so die Darstellung von Blogposts, Shop-Artikeln und Custom Post Types angepasst werden. Durch die Anpassung der Templates wird die Darstellung aller Artikel/Produkte/Einträge geändert – du musst also nicht jeden Blogartikel oder jedes Shop-Produkt einzeln bearbeiten.

Dazu werden direkt die PHP-Dateien des Themes angepasst – wenn du dir derartige Anpassungen nicht zutraust, kannst du zum Beispiel uns kontaktieren. Wir (oder auch andere Entwickler) beraten dich, welche Änderungen möglich und sinnvoll sind.

Wenn es um die Gestaltung von einzelnen Seiten oder Blogartikeln geht, z.B. der Startseite oder Verkaufsseiten, hilft das Anpassen der Theme-Templates aber nur wenig. Zwar könntest du auch dafür eigene Page-Templates anlegen, doch die Umsetzung wäre sehr aufwändig (mit PHP, HTML, CSS) und bei jeder Änderung müsstest du erneut die PHP-Templates anpassen.

Page Builder

Einfacher geht es mit Page Buildern. Page Builder funktionieren wie grafische Editoren, mit denen Texte, Bilder, Spalten und viele weitere Inhaltselemente direkt angeordnet werden können. Dabei bearbeitest du Seiten wie gewohnt über das WordPress-Backend und siehts direkt das Endergebnis. Die Bedienung ist daher recht einfach und den Gestaltungsmöglichkeiten kaum Grenzen gesetzt.

Page Builder sind vor allem für statische Seiten gedacht, wie die Startseite, „Über Mich“ oder „Kontakt“. Mit den meisten Buildern können aber auch Blogartikel frei gestaltet werden.

Manchmal ist ein Page-Builder-Plugin mit deinem Theme vorinstalliert. Falls nicht, kannst du ihn als Plugin nachrüsten.

Leider halten nicht alle Plugins, was sie versprechen. Daher solltest du sie ausführlich für deine Bedürfnisse testen, bevor du deine ganze Website damit umgestaltest – oft lassen sich die Inhalte nämlich nicht ohne weiteres übertragen. Du bist also dauerhaft an den Page Builder gebunden.

Ein guter Page Builder sollte einfach und flexibel zu bedienen sein, Vor- und Zurück-Tasten zum Rückgängigmachen haben, Zwischenspeichern und auch mit langsamen Internetverbindungen gut funktionieren. Das Ergebnis sollte natürlich responsive sein und eine gute Ladezeit behalten.

Hier sind meine Empfehlungen:

Visual Composer*

Dieses Plugin ist bei vielen Premium-Themes bereits enthalten. Wenn das bei deinem Theme der Fall ist, probiere den Visual Composer aus.

Er bringt viele Elemente mit, mit denen du beispielsweise Spalten, Blog Grids, Bildergalerien und Call-To-Action-Sektionen einfügen kannst. Zudem gibt es eine Online-Bibliothek für Templatebausteine. Weit verbreitete Plugins wie WooCommerce und Gravity Forms haben zudem eigene Inhaltselemente für den Visual Composer.

Übrigens kann ein Programmierer den Visual Composer relativ einfach um eigene Layoutelemente erweitern, was z. B. für komplexe Webprojekte mit eigenen Inhaltstypen interessant ist.

Thrive Content Builder*

Der Thrive Content Builder* ist Teil der Thrive Suite und funktioniert mit den meisten WordPress-Themes. Besonders ist hier die Anknüpfung an Thrive Leads, mit dem du Newsletter-Anmeldeformulare und Popups gestalten und besonders einfach in deine Seiten integrieren kannst.

Auch für Landing Pages eignet sich Thrive besonders gut. Du kannst einfach eine Landing Page im Stil deines Themes erstellen, aber auf Wunsch ohne Menü oder Header. So kannst du conversion-optimierte Squeeze Pages ohne visuelle Ablenkung erstellen. Auch dazu gibt es zahlreiche Vorlagen im Thrive Builder.

Persönlich fand ich den Thrive Builder allerdings etwas zu unflexibel und mühsam, an meine Standard-Farben anzupassen und die Integration in mein damaliges Theme war nicht optimal.

Divi Builder*

Aktuell der Page Builder meiner Wahl, der passend zu meinem Divi-Theme* auf hootproof.de zum Einsatz kommt. In Kombination mit dem Divi-Theme ist der Divi-Builder für mich die optimale Wahl. Doch auch ohne Divi-Theme kannst du den Divi Page Builder mit fast allen anderen Themes verwenden.

Mir gefällt besonders, wie einfach und flexibel die Gestaltung funktioniert dass das Ergebnis einfach super professionell aussieht. Außerdem können einzelne Elemente oder ganze Seiten als Vorlagen für später gespeichert werden.  Die Auswahl an Inhaltselementen könnte zwar größer sein und scheint nicht erweiterbar zu sein, doch bisher habe ich nichts vermisst.

Alle Elemente sind schon von sich aus responsive. Zusätzlich kann für jedes einzelne Element festgelegt werden, ob und wie groß dieses auf Desktop, Tablet oder Handy dargestellt werden soll. So kannst du Layout und Inhalte komplett flexibel für alle Geräte steuern.

Tailor

Der kostenlose Page Builder Tailor ist zwar vom Funktionsumfang nicht vergleichbar mit Divi & Co., kann aber ein guter Anfang für einfache Layouts sein. Was bisher fehlt, sind flexible Full-Width-Layouts und komplexere Inhaltselemente.

Tailor fügt sich dafür perfekt in dein Theme ein, ist leicht zu bedienen und relativ schnell. Auch hier können Entwickler relativ leicht weitere Bausteine hinzfügen.

Tools für Landing Pages

Landing Pages sind im Prinzip Seiten, die ein ganz bestimmtes Ziel verfolgen, z.B. die Newsletter-Anmeldung oder einen Produktkauf. Besucher kommen in der Regel aus externen Quellen auf diese Seite (z.B. über Werbung). Statt mit der ganzen Website konfrontiert zu werden, wird auf einer Landing Pages gezielt ein Produkt oder Angebot beschrieben. Oft ist nur eine einzige Aktion möglich (Kauf oder eine Anmeldung) und es gibt kein Menü (so genannte Squeeze Page).

Wie baut man nun also Landing Pages? Zum einen kannst du auch dafür Page Builder verwenden. Viele Page Builder erlauben auch das Erstellen von Seiten ohne Menü (z.B. Thrive).

Wenn du es noch einfacher willst und auf conversion-optimierte Vorlagen setzt, kommt vielleicht ein auf Landing Pages spezialisiertes Tool infrage, z.B. LeadPages oder Unbounce. Diese Tools sind recht teuer, aber besonders leicht zu bedienen und bieten bereits erprobte Vorlagen und Newsletter-Integrationen. Leider lassen sie sich nicht oder nur mit sehr viel Aufwand perfekt an das Design deiner Website anpassen.

Meine persönliche Meinung: Ich baue auch meine Landing Pages mit dem Divi Builder* und behalte so die volle Kontrolle. Sie fügen sich besser in das Design meiner Website ein und ich spare mir eine weitere monatliche Nutzungsgebühr. Außerdem bleibt die Pflege der Seiten so einfacher und an einer Stelle.

Fazit

Auch wenn der WordPress-Editor in seinen Gestaltungsmöglichkeiten stark begrenzt ist, gibt es viele gute Möglichkeiten, WordPress-Seiten flexibel und kreativ zu gestalten. Die vielseitigste Lösung für die meisten Anwendungsfälle bieten Page Builder Plugins – damit lassen sich Seiten, Landing Pages und Sales Pages gestalten, ohne das Look & Feel der Website zu mindern. Mein Favorit ist der Divi Builder*.

Gleich geschafft...
Bitte bestätige deine Anmeldung mit dem Link in der E-Mail, die wir die gerade geschickt haben.
So löst du 5 typische WordPress Probleme
Der Frühjahrsputz für deine Website
Kostenloses PDF: Schaff Platz für Neues, mehr Sicherheit und Page Speed.
WordPress Support ab 99€/h
Noch ein Schritt zum Download...
Just one more step...
Almost there...
Please confirm your email address by clicking the link in the email we just sent you.
Die Checkliste zum Abhaken für deine Performance-Optimierung
Kostenloses E-Book & noch mehr Ressourcen
Noch ein Schritt zum Download...
Noch ein Schritt zum Download...
Fast geschafft...
Kostenlose Anmeldung zur Challenge und zum Newsletter von HootProof,de und BlogYourThing.com. Du kannst dich jederzeit wieder abmelden. Datenschutz von HootProof & Datenschutz von BlogYourThing