Smart Tiles Einführung
Eine farbige Kachel mit Symbol ist klar und kompakt; eine Kachel mit Foto ist einladend. Smart Tiles erlaubt jeder Kachel, anstelle einer einfarbigen Fläche ein Hintergrundbild zu tragen – ein Bild des Büros für Besuchen Sie uns, eine Produktaufnahme für eine Launch-Seite, ein Teamfoto für die Abteilungswebsite. Dieser Artikel erklärt, wie Sie das Bild festlegen, wie es angezeigt wird und wie die Kachel lesbar bleibt.
Das Bild festlegen
- Öffnen Sie die Seite im Bearbeitungsmodus und klicken Sie auf die …-Schaltfläche der Kachel.
- Zeigen Sie auf Hintergrundfarbe und wählen Sie Hintergrundbild – den ersten Eintrag des Untermenüs.
- Geben Sie im Dialogfeld Bild die Adresse des Bildes in das Feld Bild-URL ein oder fügen Sie sie ein, oder durchsuchen Sie die Bibliotheken der Website und klicken Sie auf das Bild.
- Klicken Sie auf Übernehmen.
Das Dialogfeld Bild ist dasselbe, das für eigene Symbolbilder verwendet wird: Das Feld Bild-URL akzeptiert eine Adresse, die mit https:// beginnt, oder einen Pfad, der mit / beginnt, und die Liste darunter durchsucht die Dokumentbibliotheken der aktuellen Website Ordner für Ordner und zeigt die Bilder als Miniaturansichten. Das Dialogfeld ist ausführlich in KB10244. Ein eigenes Bild als Kachelsymbol verwenden beschrieben.
Wie das Bild angezeigt wird
Das Bild füllt die gesamte Kachel: Es wird so skaliert, dass es die Kachel vollständig bedeckt, zentriert, und was nicht passt, wird an den Rändern abgeschnitten. Die Kachel behält ihre Proportionen – ihre Breite wird durch die Größe der Kachel bestimmt, ihre Höhe durch den Inhalt und den Interner Einzug –, sodass dasselbe Bild auf einer Kachel der Größe Klein anders zugeschnitten wird als auf einer mit Volle Breite.
Das Symbol, der Titel und die Beschreibung werden über dem Bild in der Schriftfarbe der Kachel gezeichnet.
Die Farbe darunter
Die Hintergrundfarbe der Kachel verschwindet nicht, wenn ein Bild festgelegt wird: Sie wird unter dem Bild gezeichnet und scheint durch, während das Bild lädt, durch transparente Bereiche eines PNG und wenn das Bild überhaupt nicht geladen werden kann. Wählen Sie eine Farbe, die dem Gesamtton des Bildes nahekommt, damit eine noch ladende Kachel nicht in einer anderen Farbe aufblitzt.
📝 Hinweis
Die Auswahl einer Farbe im Menü Hintergrundfarbe entfernt das Hintergrundbild: Eine Kachel hat entweder ein Bild oder eine Farbe als Hintergrund, nie beides. Die Farbe, die unter dem Bild gezeichnet wurde, wird wieder zum sichtbaren Hintergrund.
Den Text lesbar halten
Text über einem Foto ist nur so lesbar wie der Kontrast zwischen beiden. Einige Gewohnheiten helfen:
- wählen Sie Bilder mit einem ruhigen Bereich – Himmel, Wand, Wasser –, in dem der Titel sitzen wird, oder schneiden Sie das Bild so zu, dass sich ein solcher Bereich in der Mitte befindet;
- verwenden Sie weißen Text auf dunklen Bildern und schwarzen Text auf hellen, und stellen Sie die Schriftfarbe entsprechend ein;
- aktivieren Sie Schatten in den Webpart-Einstellungen: Der Schlagschatten unter dem Symbol hebt es von einem unruhigen Hintergrund ab;
- erwägen Sie, den Titel bei Bildkacheln auszublenden, die für sich selbst sprechen, und den Namen stattdessen in die Beschreibung zu setzen, sodass er weiterhin in der QuickInfo erscheint.
Die YouTube-Miniaturansicht
Wenn der Link einer Kachel auf ein YouTube-Video verweist, erhält das Menü Hintergrundfarbe einen weiteren Eintrag oberhalb von Hintergrundbild: Miniaturansicht. Er verwendet das Vorschaubild des Videos als Hintergrund, ohne eine Bildadresse in der Kachel zu speichern. Auf der veröffentlichten Seite zeigt eine Miniaturansicht-Kachel nur die Wiedergabeschaltfläche; ihr Titel und ihre Beschreibung bleiben in der QuickInfo.
Anforderungen an das Bild
- Die Adresse muss
https://verwenden oder ein Pfad im aktuellen Mandanten sein; Besucher müssen Lesezugriff auf das Bild haben. - Halten Sie die Datei angemessen klein – ein Foto mit 1200 Pixeln an der längeren Seite, als JPEG oder WebP gespeichert, reicht für eine Kachel mit Volle Breite aus und lädt auf jeder Seite, auf der das Panel verwendet wird, schnell.
- Bilder mit transparentem Hintergrund lassen die Kachelfarbe durch die transparenten Bereiche durchscheinen, was sich für Designs im Wasserzeichenstil nutzen lässt.
❗ Wichtig
Bilder werden vom Browser des Besuchers von der Adresse in der Kachel geladen. Speichern Sie die Bilder in einer Bibliothek, die jeder Besucher der Seite lesen kann – Site Assets derselben Website ist die übliche Wahl. Ein Besucher ohne Zugriff sieht nur die Hintergrundfarbe.
Das Bild entfernen
Wählen Sie entweder eine Farbe im Menü Hintergrundfarbe, oder öffnen Sie erneut Hintergrundbild und klicken Sie im Dialogfeld auf Bild entfernen. Die Kachel kehrt zu ihrer Hintergrundfarbe zurück.
💡 Tipp
Die für Kacheln und ihre Schrift verfügbaren Farben sind in KB10043. Kachelfarben in Smart Tiles beschrieben.
Weitere Informationen zum Produkt: https://vitextra.com/de/products/smart-tiles