Smart Tiles Einführung
Ein Panel in Smart Tiles ist kein festes Raster. Kacheln fließen in Zeilen wie Wörter in Textzeilen: Jede Kachel beansprucht entsprechend ihrer Größe einen Anteil der Zeile, die Zeile wird von links nach rechts gefüllt, und was nicht passt, beginnt die nächste Zeile. Dieses Fließverhalten zu verstehen, macht den Unterschied zwischen einem Panel, das zufällig auf einem Bildschirm gut aussieht, und einem, das auf jedem Bildschirm gestaltet wirkt. Dieser Artikel erklärt die Größen, die Einzüge und die Höhe der Kacheln und gibt einige Layoutrezepte.
Die sechs Größen
Die Größe einer Kachel ist ihre Breite, ausgedrückt als Anteil der Zeile. Wählen Sie sie im Kontextmenü der Kachel: Klicken Sie auf die …-Schaltfläche, zeigen Sie auf Größe und wählen Sie einen der sechs Einträge; die aktuelle Größe ist mit einem Häkchen markiert.
| Größe | Grundanteil der Zeile | Kacheln pro Zeile (gleiche Größe) |
|---|---|---|
| Extra Kleine | 15 % | 6 |
| Klein | 30 % | 3 |
| Mittel | 45 % | 2 |
| Groß | 65 % | 1, mit Platz für eine Kachel der Größe Klein oder Extra Kleine daneben |
| Sehr groß | 80 % | 1, mit Platz für eine Kachel der Größe Extra Kleine daneben |
| Volle Breite | 100 % | 1 |
Eine neue Kachel hat die Größe Klein.
Wie Zeilen gefüllt werden
Zwei Regeln vervollständigen das Bild:
- Kacheln dehnen sich, um die Zeile zu füllen. Der Anteil in der Tabelle ist ein Minimum. Wenn in einer Zeile Platz übrig bleibt – etwa bei zwei Kacheln der Größe Klein allein in einer Zeile –, wachsen die Kacheln, um ihn auszufüllen, wobei größere Größen schneller wachsen als kleinere. Zeilen sind daher immer voll, ohne ausgefransten rechten Rand.
- Eine Kachel, die nicht passt, rückt in die nächste Zeile. Drei Kacheln der Größe Klein füllen eine Zeile; eine vierte beginnt eine neue. Eine Kachel der Größe Mittel nach zwei Kacheln der Größe Klein passt nicht in die verbleibenden 40 % und beginnt eine neue Zeile, in der sie sich auf die volle Breite dehnt, wenn nichts auf sie folgt.
Die zweite Regel ist die, die überrascht: Eine einzelne Kachel der Größe Klein am Ende des Panels wird zu einer Kachel mit voller Breite gedehnt. Zählen Sie die Anteile in jeder Zeile – sie sollten sich auf etwa 90–100 % summieren – oder schließen Sie das Panel mit Kacheln ab, die ihre Zeile genau füllen.
📝 Hinweis
Die Anteile beziehen sich auf die Breite des Webparts, nicht auf die des Bildschirms. In einem zweispaltigen Abschnitt ist das Webpart halb so breit, sodass drei Kacheln der Größe Klein weiterhin eine Zeile bilden – jede halb so breit wie in einem Abschnitt mit voller Breite. Auf einem Smartphone, wo die Seite eine einzige schmale Spalte ist, bleiben die Kacheln in denselben Zeilen und werden einfach schmaler.
Höhe
Die Höhe einer Kachel wird nicht direkt festgelegt. Sie ist die Summe aus dem Inhalt – dem Symbol in seiner Symbolgröße, dem Titel in seinem Schriftgrad und der Beschreibung, sofern angezeigt – und dem Interner Einzug oberhalb und unterhalb des Inhalts. Alle Kacheln einer Zeile haben dieselbe Höhe, nämlich die der höchsten.
Um Kacheln höher zu machen, ohne das Symbol oder den Text zu vergrößern, erhöhen Sie Interner Einzug; um sie annähernd quadratisch zu machen, kombinieren Sie einen großen Internen Einzug mit Kacheln der Größe Klein oder Extra Kleine.
Die drei Einzüge
Die Gruppe Darstellung des Eigenschaftenbereichs hat drei Abstandseinstellungen, jeweils von 0 bis 30 Pixel:
| Einstellung | Welchen Abstand sie regelt |
|---|---|
| Interner Einzug | Oberhalb und unterhalb des Inhalts einer Kachel – das „Padding". Er bestimmt die Höhe der Kacheln. |
| Symbol Einzug | Zwischen dem Symbol und dem Titel. |
| Externer Einzug | Zwischen benachbarten Kacheln, horizontal und vertikal – der „Gap". Bei 0 berühren sich die Kacheln und das Panel wird zu einem durchgehenden Mosaik; bei 10–16 wirken die Kacheln als separate Karten. |
Layoutrezepte
Schnelllink-Leiste. Sechs Kacheln der Größe Extra Kleine, Externer Einzug 4, Interner Einzug 8, Titel angezeigt, Beschreibungen ausgeblendet. Eine Zeile kompakter Schaltflächen unter dem Hero-Bereich einer Startseite.
Abteilungspanel. Eine Kachel mit Volle Breite als Überschrift des Panels – ein Fotohintergrund und der Name der Abteilung –, gefolgt von Zeilen mit je drei Kacheln der Größe Klein mit den Services der Abteilung. Externer Einzug 8.
Hervorgehoben plus Liste. Eine Kachel der Größe Groß mit Hintergrundbild und Beschreibung und daneben eine Kachel der Größe Klein; darunter zwei Zeilen mit je drei Kacheln der Größe Klein. Die große Kachel lenkt den Blick auf den wichtigsten Link.
Mosaik. Gemischte Kacheln der Größen Extra Kleine und Klein mit Externer Einzug 0, alle in Akzentfarben, nur Symbole (Titel ausgeblendet). Wirkt am besten in einem Abschnitt mit voller Breite auf einer Kommunikationswebsite.
💡 Tipp
Erstellen Sie das Panel in einem Abschnitt mit voller Breite, wenn es die Hauptnavigation der Seite ist; siehe KB10042. So fügen Sie das Smart-Tiles-Webpart hinzu und konfigurieren es. Zu den Texten auf den Kacheln siehe KB10249. Titel und Beschreibungen auf Kacheln anzeigen.
❗ Wichtig
Prüfen Sie das Panel vor der Veröffentlichung bei schmaler Fensterbreite – ziehen Sie das Browserfenster schmaler oder verwenden Sie die mobile Vorschau der Seite. Lange Titel, die auf eine Kachel mit Volle Breite passen, werden auf einer Kachel der Größe Klein mit Auslassungspunkten abgeschnitten; die Beschreibung wird, wenn sie nicht passt, auf dieselbe Weise abgeschnitten.
Weitere Informationen zum Produkt: https://vitextra.com/de/products/smart-tiles