Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Design

Individuelle WordPress-Seiten ohne eine Zeile Code: Das kann Layers

    Individuelle WordPress-Seiten ohne eine Zeile Code: Das kann Layers

Mit Layers lassen sich WordPress-Seiten erstellen. (Screenshot: Layers)

Mit Layers sollen sich WordPress-Seiten mit einem individuellen Layout erstellen lassen, ohne dass eine Zeile Code geschrieben oder angepasst werden muss. Wir haben uns das Tool für euch angeschaut.

Layers: Von der Installation bis zur leeren Layout-Vorlage in wenigen Minuten

Am Ende der Layers-Einführung wird das Layout für die erste Seite gewählt. (Screenshot: eigene WordPress-Installation)

Nicht jeder WordPress-Nutzer besitzt die notwendigen Kenntnisse, um ein Theme selbst zu erstellen oder anzupassen. Mit Layers lassen sich auch ohne Programmierkenntnisse Seiten-Layouts erstellen, die individuell aussehen. Der Start mit Layers ist denkbar einfach. Ihr ladet euch einfach den ZIP-Ordner runter und installiert Layers im WordPress-Backend wie ein ganz normales Theme (über „Design“ > „Themes“ und dann oben auf „Installieren“). Anschließend werdet ihr auf die Willkommens-Seite von Layers weitergeleitet. Hier könnt ihr jetzt Stück für Stück eure Site einrichten.

Ganz am Ende des Vorgangs geht es an die Erstellung der ersten Seite – hier könnt ihr aus vorgefertigten Layouts wie „Application“ oder „Contact Page“ auswählen oder aber eine leere Seite erstellen (was im Test ausgewählt wurde). Nach der Auswahl werdet ihr zum Customizer weitergeleitet.

Ein Seiten-Layout mit Layers erstellen

Layers bringt einige nützliche Widgets mit. (Screenshot: eigene WordPress-Installation)
Layers bringt einige nützliche Widgets mit. (Screenshot: eigene WordPress-Installation)

Jetzt könnt ihr anfangen, ein Layout zusammenzustellen. In der Sidebar des Customizers findet ihr die Punkte „Edit Layout“, „Site Settings“, „Header“, „Footer“, das bekannte „Statische Startseite“ und „CSS“. Schauen wir uns zuerst den Punkt „Edit Layout“ an. Hier könnt ihr über den Unterpunkt „Home Page Body“ Inhalt und Layout eurer Seite anpassen.

Das Prinzip von Layers ist dabei folgendes: Über Widgets fügt ihr Inhalte in die Seite ein, wobei ein Widget immer eine Zeile in der Seite ist (zwei Widgets nebeneinander funktionieren also nicht, ohne den Code anzufassen). Neben den Standard-Widgets von WordPress stehen noch vier Layers-Widgets zur Verfügung. Mit ihnen könnt ihr Inhalte einfügen und gegebenenfalls auch im Raster anzeigen, Kontakt-Details sowie eine Karte integrieren, eure letzten Posts inklusive Abstract anzeigen und einen Slider einbauen.

Umfangreiche Einstellungsmöglichkeiten in der Detailansicht der Widgets. (Screenshot: eigene WordPress-Installation)
Umfangreiche Einstellungsmöglichkeiten in der Detailansicht der Widgets. (Screenshot: eigene WordPress-Installation)

Um ein Widget hinzuzufügen, klickt ihr einfach wie gewohnt auf „Widget hinzufügen“ und bekommt die Widgets angezeigt. Durch Anklicken wird ein Widget hinzugefügt und es öffnen sich automatisch die Detail-Einstellungen. Hier könnt ihr dann beispielsweise beim Content-Widget Spalten löschen oder hinzufügen, einstellen, wie viele Spalten ein Content-Bereich einnehmen soll und so weiter. Dieselbe Arbeitsweise gilt für die anderen Theme-Bereiche (In die mobile Sidebar muss auch das Menü eingefügt werden, da dieses sonst im mobilen Layout nicht angezeigt wird).

Weitere Einstellungsmöglichkeiten

Über den Punkt „Site Settings“ könnt ihr Menüs den verschiedenen Theme-Positionen zuweisen, das Logo sowie Titel und Untertitel anpassen, bestimmen, welche Sidebar auf welchem Seitentyp angezeigt werden soll und verschiedene Schriftarten für den body-Text, Überschriften und Buttons auswählen (zurückgegriffen wird hier auf Googles Web-Fonts).

Unter dem Punkt „Header“ könnt ihr sein Layout anpassen, einstellen, ob der Header sticky sein soll und eigenes JavaScript einfügen. Ähnliches gilt für den Bereich „Footer“. Wenn ihr mit einer Seite zufrieden seid, könnt ihr sie über die Schaltfläche „Speichern & Publizieren“ veröffentlichen. Wollt ihr eine neue Seite erstellen, geht ihr einfach über „Layers“ > „Add New Page“.

Layers bringt außerdem noch einige Seiten-Templates mit – unter anderem eine Blog-Ansicht. Über die weiteren Möglichkeiten von Layers könnt ihr euch in der Dokumentation informieren.

Ein erstes Ergebnis mit Layers. (Screenshot: eigene WordPress-Installation)
Ein erstes Ergebnis mit Layers. (Screenshot: eigene WordPress-Installation)

Ein Fazit

Es lässt sich mit Layers tatsächlich ziemlich viel einstellen und individuell verändern – eine Landingpage mit den wichtigsten Informationen, den letzten Beiträgen und einer Karte ist schnell erstellt, und der Code sieht bei oberflächlicher Betrachtung auch ganz okay aus. Wer allerdings ganz genaue Vorstellungen und Wünsche hat, die über ein gewisses Schema hinausgehen, wird sich auch weiterhin selbst ein Theme erstellen (lassen) müssen.

Wer aber einfach eine Website mit WordPress und anpassungsfähigen Seitenlayouts erstellen will, keine ausgefallenen Gestaltungswünsche hat und nicht selbst ein Theme erstellen kann oder will, der sollte sich Layers mal anschauen.

Vielleicht auch interessant: Hier findet ihr eine Liste der beliebtesten Plugins für WordPress

Finde einen Job, den du liebst zum Thema TYPO3, PHP

Alle Jobs zum Thema TYPO3, PHP
7 Reaktionen
Stranger
Stranger

Danke werde ich mal testen! :)

Antworten
VZmedia
VZmedia

Klingt sehr interessant, ich werde es mal genauer unter die Lupe nehmen.

Antworten
Chris
Chris

Wirklich praktisches tool, danke !

Antworten
Voxs
Voxs

danke für den Hinweis, Florian! Sorry, ich habe da wohl nicht genau hingeschaut. Grüße! ;-)

Antworten
Florian Brinkmann

Kein Ding, einen guten Wochenstart wünsche ich! :)

Antworten
Voxs
Voxs

Die Menüs in euerem Beispiel sind "eingedeutscht", bei mir jedoch englisch - wie kann man dies umschalten? Danke, und für den Artikel!

Antworten
Florian Brinkmann

Hi Voxs,

welche Menüs genau meinst du? Die Namen der Widgets? Es ist einfach eine ganz normale deutsche WordPress-Installation, alles, was von dem Plugin direkt kommt, ist auf englisch.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen