Kompatibilität:

WebSite X5 Evo und Pro

Wenn Sie mehrere Dienstleistungen, Produkte, Vorteile oder Kategorien präsentieren möchten, gehört die Darstellung in Boxen zu den effektivsten und am häufigsten verwendeten Lösungen im Webdesign. Jedes Element ist klar von den anderen getrennt, gut lesbar und kann den Benutzer dank einer eigenen Schaltfläche zu einer bestimmten Aktion führen.


Mit dem optionalen Objekt Box List Grid erstellen Sie in wenigen Schritten ein Raster aus Boxen mit Bild, Titel, Text und Schaltfläche. Dabei bleibt das Design einheitlich und das Programm passt das Layout automatisch an verschiedene Bildschirmgrößen an.


Auf der Seite Vorschau finden Sie einige Beispiele für die möglichen Ergebnisse.


Wann Sie Box List Grid verwenden sollten

Das Objekt Box List Grid eignet sich besonders, wenn Sie mehrere Inhalte mit derselben grafischen Struktur präsentieren möchten.


Boxen (oder Cards) zählen heute zu den beliebtesten Gestaltungselementen im Webdesign, da sie Informationen klar, übersichtlich und leicht erfassbar darstellen. Jedes Element ist deutlich abgegrenzt und kann einen Service, ein Produkt, eine Funktion oder einen Link hervorheben.


Sie können Box List Grid beispielsweise verwenden, um Folgendes zu erstellen:

  • Serviceübersichten;
  • Produkt- oder Kategorienraster;
  • Sammlungen von Vorteilen oder Funktionen;
  • die Schritte eines Prozesses oder Ablaufs;
  • Pakete oder Preispläne;
  • Links zu den wichtigsten Bereichen Ihrer Website.


Jede Box kann ein Bild oder Symbol, einen Titel, einen Beschreibungstext und eine Schaltfläche mit Link enthalten und sorgt so für eine übersichtliche, einheitliche und leicht verständliche Darstellung.


Inhalte einfügen

Um Ihr Raster zu erstellen, müssen Sie zunächst die einzelnen Boxen definieren.

  • Doppelklicken Sie auf das auf der Seite eingefügte Objekt Box List Grid, um das Fenster mit allen Optionen zu öffnen.
  • Bleiben Sie im Bereich Inhalt und klicken Sie auf Hinzufügen, um eine neue Box in die Liste einzufügen.
  • Wählen Sie die neu erstellte Box aus und geben Sie alle erforderlichen Informationen ein. Für jede Box können Sie festlegen:
    • einen Titel;
    • einen Text als Beschreibung der Box;
    • ein Bild oder Symbol. Sie können es aus der lokalen Bibliothek auf Ihrem PC oder aus den Online-Bibliotheken auswählen und mit Alternativtext barrierefrei machen (siehe Barrierefreiheit von Bildern: Die Bedeutung von Alternativtexten);
    • eine Schaltfläche mit einer Textbeschriftung (deren Stil im Bereich Stil festgelegt wird);
    • einen Link, sofern eine Schaltfläche vorhanden ist. Klicken Sie auf , um das Fenster Link zu öffnen und die gewünschte Aktion beim Anklicken auszuwählen.
  • Wiederholen Sie diese Schritte, bis Sie alle benötigten Boxen erstellt haben.
  • Um die Liste der Boxen zu ändern, wählen Sie die gewünschte Box aus und verwenden Sie Entfernen, um sie zu löschen, oder die Pfeiltasten, um ihre Position zu ändern.


#Tipp – Zum Schreiben oder Bearbeiten von Titeln, Texten und Schaltflächenbeschriftungen können Sie MagicText, den in WebSite X5 integrierten KI-Assistenten, verwenden.


Das Erscheinungsbild anpassen

Nachdem Sie die Inhalte eingefügt haben, können Sie das Erscheinungsbild des Objekts anpassen, damit es perfekt zum Design Ihrer Website passt.

  • Öffnen Sie den Bereich Stil.
  • Legen Sie die minimale Breite der Boxen sowie den Abstand zwischen ihnen fest. Diese Parameter bestimmen Größe und Anordnung der Boxen entsprechend dem verfügbaren Platz.
  • Wählen Sie den gewünschten Hover-Effekt für die Boxen aus.
  • Falls die Anzahl der Boxen nicht ausreicht, um die letzte Zeile des Rasters vollständig zu füllen, aktivieren Sie die Option Letzte Zeile anpassen, um Leerraum zu vermeiden, damit die Boxen dennoch die gesamte verfügbare Breite einnehmen.
  • Wählen Sie anschließend das Element aus, das Sie bearbeiten möchten: Hintergrund, Hintergrund bei Hover, Symbol/Bild, Titel, Text, Schaltfläche oder Schaltfläche bei Hover.
  • Verwenden Sie die verfügbaren Optionen des ausgewählten Elements, um Farben, Rahmen, Schriftarten, Ränder, Abstände, Ausrichtung und grafische Effekte festzulegen.
  • Wenn Sie das gewünschte Ergebnis erzielt haben, klicken Sie auf OK, um die Änderungen zu übernehmen.


Warum ein einziges Objekt zum Erstellen mehrerer Boxen verwenden?

Auch ohne Box List Grid können Sie dasselbe Ergebnis erzielen, indem Sie jede Box manuell mit anderen Objekten erstellen. In diesem Fall muss jedoch jedes Element einzeln erstellt, konfiguriert und aktualisiert werden.


Mit Box List Grid können Sie dagegen eine komplette Sammlung von Boxen über ein einziges Konfigurationsfenster verwalten und so deutlich schneller und übersichtlicher arbeiten.


Dieser Ansatz bietet mehrere Vorteile:

  • Er verkürzt den Zeitaufwand selbst für sehr umfangreiche Raster.
  • Er sorgt für ein einheitliches Erscheinungsbild aller Boxen.
  • Er vereinfacht die Bearbeitung und Aktualisierung der Inhalte.
  • Er erspart die wiederholte Ausführung derselben Arbeitsschritte für jedes einzelne Element.


Anpassung an verschiedene Geräte

Einer der größten Vorteile von Box List Grid ist die automatische Verwaltung des responsiven Layouts.


Auf großen Bildschirmen werden automatisch mehrere Boxen nebeneinander angeordnet. Wird der verfügbare Platz kleiner – etwa weil das Objekt in einer schmalen Spalte eingefügt wurde oder die Seite auf einem Tablet oder Smartphone angezeigt wird –, wird die Anordnung der Boxen automatisch und schrittweise angepasst.


Das Ergebnis ist eine stets übersichtliche und gut lesbare Darstellung, ohne dass Sie verschiedene Versionen desselben Inhalts erstellen oder die Anordnung der Elemente manuell ändern müssen.


Bereit für den Einsatz?

Möchten Sie Dienstleistungen, Produkte oder Vorteile in einem übersichtlichen, einheitlichen und vollständig responsiven Box-Raster präsentieren? Installieren Sie jetzt das Objekt Box List Grid.


Sie verfügen nicht über genügend Credits, um dieses Objekt zu erwerben? Sehen Sie sich alle Credit-Pakete an.