--- title: "So fügen Sie das Smart-Tiles-Webpart hinzu und konfigurieren es" description: "Schritt-für-Schritt-Anleitung zum Hinzufügen des Vitextra Smart Tiles Webparts zu einer SharePoint-Online-Seite: Bereitstellung des Pakets, Auffinden des Webparts in der Toolbox, die Beispielkacheln, der Webparttitel, jede Einstellung der Gruppe Darstellung, die Gruppe Info und das Platzieren des Panels in einem Abschnitt mit voller Breite." url: https://vitextra.com/de/support/kb/10042 language: de published: 2024-11-23 modified: 2026-10-10 products: - "Smart Tiles" author: "Jānis Bērziņš" tags: ["Smart Tiles Webpart hinzufügen", "Smart Tiles konfigurieren", "SharePoint Online Kachelnavigation einrichten", "Webpart Eigenschaftenbereich", "Darstellungseinstellungen", "Webpart Abschnitt mit voller Breite", "Vitextra Smart Tiles Installation", "SharePoint Seite Kacheln", "Smart Tiles Einstellungen", "Kachel-Navigationspanel"] --- # So fügen Sie das Smart-Tiles-Webpart hinzu und konfigurieren es Schritt-für-Schritt-Anleitung zum Hinzufügen des Vitextra Smart Tiles Webparts zu einer SharePoint-Online-Seite: Bereitstellung des Pakets, Auffinden des Webparts in der Toolbox, die Beispielkacheln, der Webparttitel, jede Einstellung der Gruppe Darstellung, die Gruppe Info und das Platzieren des Panels in einem Abschnitt mit voller Breite. ## Einführung Dieser Artikel führt durch die ersten Schritte mit [Smart Tiles](https://vitextra.com/de/products/smart-tiles): die Bereitstellung des Webparts, das Hinzufügen zu einer modernen ::SharePoint Online::-Seite und die Einstellungen des Eigenschaftenbereichs, die für das gesamte Panel gelten. Die Eigenschaften einzelner Kacheln – Texte, Links, Farben, Symbole – werden in [KB10242. So fügen Sie eine Kachel in Smart Tiles hinzu und bearbeiten sie](https://vitextra.com/de/support/kb/10242) behandelt. ## Bevor Sie beginnen Smart Tiles wird einmalig von einem SharePoint-Administrator aus dem ::App-Katalog:: des Mandanten bereitgestellt. Das Paket wird mandantenweit bereitgestellt, sodass das Webpart auf jeder Website verfügbar wird, ohne dass es jeder Website einzeln hinzugefügt werden muss. Das Verfahren ist in [KB10035. Installation eines cloudbasierten Produkts](https://vitextra.com/de/support/kb/10035) beschrieben. Um das Webpart einer Seite hinzuzufügen, benötigen Sie die Berechtigung zum Bearbeiten dieser Seite – die Berechtigungsstufe **Bearbeiten** oder die Mitgliedschaft in der Gruppe „Mitglieder" der Website reicht aus. 📝 **Hinweis** Smart Tiles funktioniert nur auf modernen Seiten. Erstellen Sie auf einer Website, die noch klassische Seiten verwendet, zunächst eine moderne Websiteseite. ## Das Webpart zu einer Seite hinzufügen 1. Öffnen Sie die Seite und klicken Sie oben rechts auf **Bearbeiten**. 2. Zeigen Sie auf die Stelle, an der das Panel erscheinen soll, bis zwischen den Abschnitten oder Webparts eine Linie mit einem **+**-Zeichen erscheint, und klicken Sie darauf, um den ::Webpart-Katalog:: zu öffnen. 3. Geben Sie *Smart Tiles* in das Suchfeld ein und klicken Sie auf das Webpart. ![Smart Tiles in der Webpart-Toolbox](https://static.vitextra.com/articles/10042/web-part-toolbox-de.png) *Smart Tiles in der Webpart-Toolbox* Das Webpart erscheint auf der Seite mit drei Beispielkacheln, die auf Vitextra-Produktseiten verweisen. Sie zeigen, wie eine Kachel aussieht, und können zu Ihren eigenen Links umgearbeitet oder entfernt werden. ![Das Webpart mit den Beispielkacheln](https://static.vitextra.com/articles/10042/sample-tiles-de.png) *Das Webpart mit den Beispielkacheln* ## Der Webparttitel Oberhalb der Kacheln befindet sich ein Titelfeld. Klicken Sie darauf und geben Sie eine Überschrift für das Panel ein, zum Beispiel *Schnelllinks* oder *HR-Services*. Der Titel ist optional: Lassen Sie ihn leer, wird auf der veröffentlichten Seite keine Überschrift angezeigt. ## Darstellungseinstellungen Klicken Sie auf das Stiftsymbol (**Webpart bearbeiten**) links neben dem Webpart, um den Eigenschaftenbereich zu öffnen. Die Gruppe **Darstellung** enthält die Einstellungen, die für alle Kacheln gelten. ![Die Gruppe Darstellung des Eigenschaftenbereichs](https://static.vitextra.com/articles/10042/appearance-group-de.png) *Die Gruppe Darstellung des Eigenschaftenbereichs* |::Einstellung::|::Beschreibung::| |:---|:---| |**Schriftgrad**|Größe des Kacheltitels in sieben Stufen von 14 px bis 32 px. Die Beschreibung wird, sofern angezeigt, proportional verkleinert.| |**Symbolgröße**|Größe des Symbols in sechs Stufen von 20 px bis 64 px. Eigene Symbolbilder verwenden dieselben Größen.| |**Interner Einzug**|Abstand oberhalb und unterhalb des Inhalts einer Kachel, 0–30 px. Größere Werte machen die Kacheln höher.| |**Symbol Einzug**|Abstand zwischen dem Symbol und dem Titel, 0–30 px.| |**Externer Einzug**|Abstand zwischen benachbarten Kacheln, 0–30 px. Bei 0 berühren sich die Kacheln und bilden ein durchgehendes Mosaik.| |**Schatten**|Zeichnet einen weichen Schlagschatten unter den Symbolen.| |**Titel anzeigen**|Blendet die Titel aller Kacheln ein oder aus. Bei ausgeblendeten Titeln werden die Symbole in den Kacheln zentriert.| |**Beschreibungen anzeigen**|Blendet die Beschreibungen aller Kacheln ein oder aus. Die Beschreibungen bleiben in den QuickInfos verfügbar.| |**Hover-Effekt**|Aktiviert einen visuellen Effekt, wenn der Mauszeiger auf einer Kachel ruht. Die Liste **Effekt**, der Schieberegler für die Stärke und **Dauer** erscheinen unterhalb des Schalters.| Die Schieberegler und Schalter werden sofort auf die Seite angewendet, sodass Sie das Ergebnis während der Änderung beurteilen können. 💡 **Tipp** Größen, Einzüge und Texte werden ausführlich in [KB10247. Kachelgrößen und Layout in Smart Tiles](https://vitextra.com/de/support/kb/10247) und [KB10249. Titel und Beschreibungen auf Kacheln anzeigen](https://vitextra.com/de/support/kb/10249) beschrieben; die Hover-Effekte in [KB10248. Den Hover-Effekt für Kacheln konfigurieren](https://vitextra.com/de/support/kb/10248). ## Die Gruppe Info Die Gruppe **Info** des Eigenschaftenbereichs zeigt die Lizenz des Webparts: den **Status** (Testversion, aktiv, abgelaufen oder angehalten), die **Version** des Webparts, das **Anfangsdatum** des Abonnements und den **Mandant**, dem es zugewiesen ist. Während des Testzeitraums wird hier auch die Anzahl der verbleibenden Tage angezeigt. Die Gruppe verlinkt außerdem auf die Produktseite, auf der ein Abonnement erworben werden kann. 📝 **Hinweis** Wenn eine neuere Version von Smart Tiles verfügbar ist, erscheint im Bearbeitungsmodus ein Hinweis oberhalb der Kacheln. Das Update wird installiert, indem das neue Paket in den App-Katalog hochgeladen wird; die Seiten und ihre Kacheln sind davon nicht betroffen. ## Das Panel in einem Abschnitt mit voller Breite platzieren Kacheln wirken am stärksten, wenn sie sich über den gesamten Bildschirm erstrecken. Platzieren Sie dazu das Webpart in einem ::Abschnitt mit voller Breite::: 1. Zeigen Sie im Bearbeitungsmodus auf den linken Rand der Seite und klicken Sie auf das **+**, das zwischen den Abschnitten erscheint. 2. Wählen Sie **Abschnitt mit voller Breite** aus der Liste der Layouts. 3. Ziehen Sie das Smart-Tiles-Webpart aus seinem aktuellen Abschnitt in den neuen, oder fügen Sie dem Abschnitt mit voller Breite ein neues Smart-Tiles-Webpart hinzu. ![Einen Abschnitt mit voller Breite hinzufügen](https://static.vitextra.com/articles/10042/full-width-section-de.png) *Einen Abschnitt mit voller Breite hinzufügen* Smart Tiles passt auch in einen ein- oder zweispaltigen Abschnitt, und mehrere Smart-Tiles-Webparts können sich eine Seite teilen – zum Beispiel ein Panel pro Abteilung. Jedes Webpart behält seine eigenen Einstellungen und seinen eigenen Hover-Effekt. ❗ **Wichtig** Abschnitte mit voller Breite sind auf Kommunikationswebsites und auf Teamwebsites mit dem modernen Startseitenlayout verfügbar. Auf einer Seite ohne Abschnitte mit voller Breite füllen die Kacheln die Breite des Abschnitts aus, in dem sie sich befinden. ## Die Seite speichern Kacheln und Einstellungen werden in der Seite gespeichert. Klicken Sie auf **Als Entwurf speichern**, um später weiterzuarbeiten, oder auf **Erneut veröffentlichen**, um das Panel für Besucher sichtbar zu machen. Bis die Seite erneut veröffentlicht wird, sehen Besucher ihre vorherige Version. Weitere Informationen zum Produkt: