Smart Tiles Einführung
Eine Kachel, die reagiert, wenn der Mauszeiger sie erreicht, sagt dem Besucher „das ist eine Schaltfläche", bevor er klickt. Smart Tiles bietet neun solcher Reaktionen, von einem sanften Abdunkeln bis zur vollständigen Farbumkehr, jede mit einstellbarer Stärke und Übergangszeit. Dieser Artikel beschreibt die Einstellungen, was jeder Effekt bewirkt und welche Kombinationen gut funktionieren.
Den Effekt aktivieren
- Öffnen Sie die Seite im Bearbeitungsmodus und klicken Sie auf Webpart bearbeiten, um den Eigenschaftenbereich zu öffnen.
- Schalten Sie in der Gruppe Darstellung den Hover-Effekt ein. Unterhalb des Schalters erscheinen drei weitere Steuerelemente.
- Wählen Sie den Effekt in der Liste Effekt.
- Stellen Sie die Stärke mit dem Schieberegler unter der Liste ein. Seine Beschriftung – Prozentsatz (%), Grad oder Pixel – hängt vom Effekt ab.
- Stellen Sie die Dauer des Übergangs ein, von 0 bis 5 Sekunden in Schritten von 0,1.
Bewegen Sie den Mauszeiger über eine Kachel auf der Seite, um das Ergebnis zu sehen; die Einstellungen werden sofort angewendet.
Die neun Effekte
Die Effekte sind die Bildfilter des Browsers, angewendet auf die gesamte Kachel – Hintergrund, Symbol und Texte zusammen. Sie teilen sich danach, was ihre Stärke bedeutet, in zwei Gruppen.
Effekte, bei denen 100 % das Original ist. Niedrigere Werte verringern die Eigenschaft; die Kachel kehrt zum Normalzustand zurück, wenn der Mauszeiger sie verlässt.
| Effekt | Bei niedrigeren Werten |
|---|---|
| Helligkeit | Die Kachel wird dunkler. 70–85 % ergibt einen klassischen „gedrückten" Look; 0 % ist Schwarz. |
| Kontrast | Die Farben flachen in Richtung Grau ab. 50 % ergibt eine weiche, verwaschene Kachel. |
| Sättigungsgrad | Die Farben verblassen in Richtung Grau, während die Helligkeit erhalten bleibt. 0 % ist eine monochrome Kachel. |
| Deckkraft | Die Kachel wird durchscheinend und die Seite scheint durch. 70–80 % ist dezent; 0 % lässt die Kachel verschwinden. |
Effekte, bei denen 0 % das Original ist. Höhere Werte wenden mehr vom Effekt an.
| Effekt | Bei höheren Werten |
|---|---|
| Graustufen | Die Farben werden entfernt; 100 % ist eine Schwarz-Weiß-Kachel. |
| Sepia | Die Kachel erhält einen warmen bräunlichen Ton; 100 % ist eine vollständig sepiagetönte Kachel. |
| Farbe invertieren | Die Farben werden umgekehrt; 100 % macht eine weiße Kachel schwarz und Blau zu Orange. 20–30 % ergibt eine spürbare, aber nicht störende Änderung. |
Effekte mit anderen Einheiten.
| Effekt | Einheit und Verhalten |
|---|---|
| Schatten drehen | Grad, 0–360. Verschiebt jede Farbe der Kachel entlang des Farbkreises: Bei 180° wird Blau zu Orange und Grün zu Magenta; 360° ist wieder das Original. Kleine Werte (15–30°) ergeben eine lebendige Verschiebung, die in der Familie der ursprünglichen Farbe bleibt. |
| Weichzeichnen | Pixel, 0–20. Macht die Kachel weicher; 1–2 px ist ein sanfter Fokuswechsel, ab 5 px wird der Titel unlesbar. |
Die Stärke jeder Einheit wird separat gemerkt: Ein Wechsel von Helligkeit bei 70 % zu Schatten drehen und zurück stellt die 70 % wieder her.
Dauer
Dauer ist die Zeit, die die Kachel braucht, um von ihrem normalen Aussehen zum Effekt zu wechseln – und wieder zurück, wenn der Mauszeiger sie verlässt. Bei 0 erfolgt der Wechsel sofort; 0,2–0,4 s fühlt sich reaktionsschnell an; alles über 1 s wirkt für eine Navigation träge. Der Übergang läuft in beide Richtungen, sodass eine Kachel nie „zurückschnappt".
Tastatur und Barrierefreiheit
Der Effekt wird nicht nur unter dem Mauszeiger angewendet, sondern auch, wenn eine Kachel den Tastaturfokus erhält, sodass Besucher, die mit der Tabulatortaste navigieren, dieselbe Rückmeldung erhalten wie Besucher mit einer Maus.
Wenn das Betriebssystem auf reduzierte Bewegung eingestellt ist – Bewegung reduzieren unter macOS und iOS, Animationseffekte aus unter Windows –, wird der Übergang übersprungen: Der Effekt erscheint weiterhin, aber sofort, ohne Animation.
📝 Hinweis
Effekte werden pro Webpart festgelegt. Zwei Smart-Tiles-Webparts auf derselben Seite können unterschiedliche Effekte verwenden, oder eines von ihnen gar keinen.
Empfohlene Einstellungen
- Standardwahl: Helligkeit 80 %, Dauer 0,2 s. Funktioniert auf farbigen Kacheln, auf Fotos und in dunklen Designs.
- Dezent, für monochrome Panels: Kontrast 60 % oder Sättigungsgrad 40 %, Dauer 0,3 s. Die Kachel unter dem Mauszeiger wird weicher, ohne ihre Farbe zu ändern.
- Verspielt: Schatten drehen 20°, Dauer 0,4 s. Die Kachel wechselt zu einem benachbarten Farbton und zurück.
- Fotokacheln: Deckkraft 85 % oder Helligkeit 75 %; Weichzeichnen 1 px ergibt einen objektivähnlichen Fokuswechsel.
- Vermeiden Sie Farbe invertieren und Schatten drehen mit hohen Werten auf Kacheln mit Markenfarben – die Kachel unter dem Mauszeiger zeigt Farben, die nicht Ihre sind.
❗ Wichtig
Der Effekt verändert die gesamte Kachel, einschließlich des Textes. Prüfen Sie, ob der Titel bei der gewählten Stärke lesbar bleibt – Helligkeit unter 50 % oder Deckkraft unter 60 % macht weißen Text auf einer dunklen Kachel genau in dem Moment schwer lesbar, in dem der Besucher klicken will.
💡 Tipp
Die übrigen Einstellungen der Gruppe Darstellung sind in KB10042. So fügen Sie das Smart-Tiles-Webpart hinzu und konfigurieren es beschrieben.
Weitere Informationen zum Produkt: https://vitextra.com/de/products/smart-tiles