t3n News Design

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

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

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

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

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

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 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

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
7 Antworten
  1. von Voxs am 23.02.2015 (10:23 Uhr)

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

    Antworten Teilen
  2. von Voxs am 23.02.2015 (11:05 Uhr)

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

    Antworten Teilen
  3. von Chris am 23.02.2015 (13:44 Uhr)

    Wirklich praktisches tool, danke !

    Antworten Teilen
  4. von VZmedia am 23.02.2015 (22:08 Uhr)

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

    Antworten Teilen
  5. von Stranger am 24.02.2015 (08:02 Uhr)

    Danke werde ich mal testen! :)

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Webentwicklung
Wordpress-Theme kaufen: Die ultimative Checkliste
Wordpress-Theme kaufen: Die ultimative Checkliste

Es gibt für Wordpress eine Vielzahl von sogenannten „Premium-Themes“, die häufig mit vielen Einstellungsmöglichkeiten werben. Worauf ihr beim Kauf eines solchen Themes achten solltet, zeigen … » weiterlesen

Webentwicklung, UX-Design, Product Lead oder Grafik: Traum-Ferienwohnungen, CHECK24, RTL, Otto, myToys und mehr suchen neue Mitarbeiter
Webentwicklung, UX-Design, Product Lead oder Grafik: Traum-Ferienwohnungen, CHECK24, RTL, Otto, myToys und mehr suchen neue Mitarbeiter

Zweimal pro Woche verweisen wir hier auf aktuelle und interessante Jobangebote aus unserer Stellenbörse „t3n Jobs“. Heute können wir euch 27 Angebote aus den Bereichen „Entwicklung“ und … » weiterlesen

Schicke WordPress-Seiten ohne Coding: Das kann das Open-Source-Plugin Elementor
Schicke WordPress-Seiten ohne Coding: Das kann das Open-Source-Plugin Elementor

Mit Elementor könnt ihr per Drag & Drop WordPress-basierte Websites zusammenklicken. Im Gegensatz zu vielen Konkurrenzprodukten steht das Tool unter einer Open-Source-Lizenz. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?