Schleife HTML-Vorlagen

Loop-HTML-Vorlagen für wiederkehrende Inhalte

Eine Loop-HTML-Vorlage definiert eine einzelne wiederholte Einheit und füllt sie mit dynamischen Inhalten aus Beiträgen, Produkten oder Projektdatensätzen. Sie wählen einen fertigen Element-Block, passen ihn an die von Ihnen veröffentlichten Einträge an, und die Schleife rendert dieses Markup für jeden Datensatz. Nichts wird manuell dupliziert, sodass ein einzelner Block bestimmt, wie das gesamte Raster dargestellt wird.

Wo die Vorlage endet und der Inhalt beginnt

Die übliche Verwirrung bei Loops besteht darin, die Vorlage mit dem eigentlichen Element zu verwechseln. Eine Vorlage enthält leere Platzhalter: oft einen Bildbereich, eine Überschrift und eine Zeile mit Metadaten. Bearbeiten Sie einen Produktnamen, ändert sich ein einzelner Datensatz; bearbeiten Sie das Markup, verändert sich das gesamte Raster auf einmal.

Durch diese Trennung besteht der Loop aus drei beweglichen Teilen:

1. Dem Element-Markup, das die Hierarchie und die Lesereihenfolge festlegt;
2. Den dynamischen Feldern, die Werte in dieses Markup einfügen;
3. Dem äußeren Raster, das bestimmt, wie viele Elemente nebeneinanderstehen.

Diese drei Teile entscheiden darüber, ob eine fertige Vorlage nutzbar ist. Ein Element-Block mit zwei Feldern reicht nicht für Einträge aus, die fünf enthalten.

Feldsätze unterscheiden sich von Loop zu Loop

Nicht jeder Loop enthält ein Bild, einen Titel und eine Beschreibung. Der Feldsatz richtet sich nach dem Inhaltstyp und bestimmt, was einem Leser zuerst auffällt.

Drei vertraute Beispiele zeigen, wie weit diese Zusammenstellungen auseinandergehen:

1. Ein Beitrags-Loop verbindet Datum, Autor und Auszug mit der Überschrift, damit der Auszug sie niemals überlagert;
2. Ein Veranstaltungs-Loop beginnt mit Datum und Ort, sodass der Zeitblock mehr Gewicht erhält als das Bild;
3. Ein Verzeichnis-Loop enthält Kategorie, Adresse und Kontaktdaten, mit der Aktionsschaltfläche direkt daneben.

Alle drei wiederholen dasselbe Grundgerüst, doch die Gewichtung im Inneren verschiebt sich – und eine Vorlage an dieses Gewicht anzupassen, macht den Großteil der Auswahl aus. Die Anpassung eines Beitragslayouts für Veranstaltungsdatensätze erfordert das Neuanordnen von Feldern.

Die Reihenfolge über alle Bildschirmgrößen hinweg wahren

Wiederholte Blöcke lassen sich auf einem breiten Monitor hervorragend lesen, werden jedoch unübersichtlicher, sobald die Spalten umbrechen. Entscheidend ist dann, ob ein Datensatz weiterhin zusammenhängt: das Bild über dem eigenen Titel, der Preis neben dem eigenen Namen, die Aktion fest dem eigenen Eintrag zugeordnet.

Beispielinhalte verbergen dies oft, da Demo-Elemente gewöhnlich gleich hoch sind. Probleme treten auf, wenn ein Projekttitel über drei Zeilen läuft und der nächste fast keine Beschreibung hat. Es lohnt sich, Ihre längsten und kürzesten Einträge in eine gewählte Vorlage zu laden, bevor Sie sie im größeren Umfang veröffentlichen.

In Nicepage platziert das Raster-Element wiederholte Elemente in responsive Zellen; die Anleitung für responsives Webdesign erläutert dessen Steuerelemente.

Eine Loop-HTML-Vorlage bewährt sich, wenn Struktur, Lesbarkeit und Datenreihenfolge über jede Anzahl von Datensätzen und jede Bildschirmbreite hinweg stabil bleiben.