Layout und Styling
Spalten, Elemente, Design, Layout, Abstände, Ecken, was jede Karte anzeigt und das Neue Hervorhebung. Jede Steuerung mit ihrem Bereich.
Alles hier ist in jedem Tarif kostenlos, einschließlich des Karussells, der Kacheloptik, Bento, der Lightbox und beider Hervorhebungen, Neu und des rotierenden „Spotlight“. Änderungen werden sofort in der Live-Vorschau angezeigt und gelten für jede Seite, nachdem Sie auf „Save“ (Speichern) geklickt haben.
Um die Layouts zuerst mit echtem Inhalt zu sehen, zeigen die Live-Beispiele echte Widgets und einige Bento-Variationen nebeneinander.
Steuerelemente
| Kontrolle | Was es tut | Bereich |
|---|---|---|
| Spalten | Spalten im Raster oder in der Wand. Bei einer Wand ist es ein Höchstwert: Karten brauchen jeweils etwa 220 px, daher zeigt ein schmaler Bildschirm weniger | 1 bis 6 |
| Elemente | Wie viele Beiträge oder Bewertungen angezeigt werden. Eine Quelle behält ihre neuesten 24 (eine Google-Quelle nach ihrem Fotodurchlauf bis zu 72), und ein Widget zeigt nie mehr, als im Cache ist | 1 bis 24 |
| Design | „Auto“ (Automatisch) folgt den Geräteeinstellungen jedes Besuchers, „Light“ (Hell) und „Dark“ (Dunkel) sind fest | |
| Layout | „Grid“ (Raster), „Carousel“ (Karussell), „Masonry“ oder „Bento“ | |
| Abstand | Abstand zwischen den Kacheln | 0 bis 32 px |
| Eckenradius | Abgerundete Ecken | 0 bis 24 px |
| Max. Textzeilen | Nur Bewertungs- und Beitragswände: längerer Text wird hinter „Show“ (Anzeigen) mehr eingeklappt | 2 bis 12 |
Bento
Bento ordnet die Elemente wie das TileSet-Logo an: ein großes Quadrat (2 mal 2), ein hohes (1 mal 2), ein kleines und ein breites (2 mal 1), immer im Wechsel, in quadratischen Zellen ohne Lücken in der Mitte. Nur die letzte Zeile kann kürzer sein.
- Es werden 3 bis 6 Spalten verwendet. Eine Einstellung von 1 oder 2 wird als 3 angezeigt, und mehr als 6 (möglich über einen Agenten) als 6.
- In einem Bereich schmaler als 520 px, etwa auf einem Smartphone, werden 2 Spalten angezeigt, und die großen Quadrate bleiben 2 mal 2.
- In einem Feed-Raster wird ein Beitrag oder eine Bewertung ohne Foto zu einer Textkarte in ihrer Zelle, statt weggelassen zu werden. In einer Bewertungs- oder Beitragswand ist jedes Element eine Karte.
- Der Text einer Karte füllt ihre Zelle und verblasst dort, wo die Zelle endet, sodass kein „Show“ mehr vorhanden ist. Die großen Zellen verwenden größeren Text.
- „Big cells“ (Große Zellen) (Google- und WordPress.org-Bewertungen): „Newest“ (Neueste) behält die neuesten Elemente in den großen Zellen, „Top rated“ (Am besten bewertet) platziert die am besten bewerteten dort, die neuesten zuerst bei gleichen Bewertungen. Die gleichen Elemente werden auf beide Arten angezeigt, nur ihre Plätze ändern sich.
Was jede Karte anzeigt
Schalter, abhängig von der Vorlage:
- „Feed grid“ (Feed-Raster): „Likes & comments“ (Likes & Kommentare), „Header“ (Kopfzeile) (Avatar, Handle und Follow-Link), „Lightbox“, „Platform icon“ (Plattform-Icon). Bei einer Twitch- oder Kick-Quelle wählt „Live stream“ (Live-Stream) aus, wo ein Live-Stream abgespielt wird: „Lightbox“ oder „Inline“ in einer Live-Karte (siehe Twitch und Kick).
- „Review wall“: „Avatar“ (bei Testimonials, das Foto oder die Initialen der Person), „Rating“ (Bewertung), „Date“ (Datum), „Owner response“ (Antwort des Inhabers), „Lightbox“, „Platform icon“.
- YouTube hat auch „All videos“ (Alle Videos) / „Hide Shorts“ (Shorts ausblenden) / „Only Shorts“ (Nur Shorts).
„Lightbox“ öffnet ein Bild oder Video auf Ihrer Seite, wenn ein Besucher darauf klickt, mit einem Link zum Originalbeitrag oder zur Bewertung. Wenn sie ausgeschaltet ist, öffnet ein Klick den Beitrag oder die Bewertung selbst auf seiner Plattform in einem neuen Tab (die Google-Bewertung, der Beitrag auf X, das Video auf YouTube) oder das Bild, wenn das Element keinen Link hat.
„Platform icon“ fügt jeder Fotografie (oben links) und jeder Karte (unten rechts) ein kleines Google- oder YouTube-Zeichen hinzu. Es ist standardmäßig in einem gemischten Feed aktiviert, damit Besucher sehen können, woher jeder Beitrag stammt, und ansonsten deaktiviert. Ein Testimonials-Widget hat keine Plattform, die es markieren könnte, daher bietet es dies nicht an.
Ein Schalter, den eine Quelle nie unterstützen kann, wird nicht angezeigt. Eine kleine „+n“-Markierung am Ende eines Abschnitts zeigt, wie viele ausgeblendet sind, und beim Darüberfahren mit der Maus, warum.
Bildunterschriften auf Fotos
In einem Feed-Raster legt „Captions“ (Bildunterschriften) fest, was eine Fotokachel über dem Bild zeigt:
- „Off“ (Aus): nur das Foto.
- „On hover“ (Beim Darüberfahren): Der Text des Beitrags wird angezeigt, wenn ein Besucher mit der Maus über die Kachel fährt oder sie mit der Tabulatortaste auswählt.
- „Always“ (Immer): der Kontoname und bis zu drei Textzeilen, dauerhaft sichtbar, wie im Beispiel auf unserer Startseite. Ist „Likes & comments“ aktiviert, werden die Zahlen zur letzten Zeile der Bildunterschrift, statt darunter zu stehen.
„Overlay“ (Überlagerung) (standardmäßig aktiviert) verdunkelt den unteren Teil des Fotos unter der Bildunterschrift, damit der Text auf einem hellen Bild lesbar bleibt. Deaktivieren Sie es für ein saubereres Foto.
Hervorhebung
Ein kleiner Chip mit einem Live-Punkt, wie der auf unserer Homepage, auf jedem Layout:
| Hervorhebung | Was es tut | Plan |
|---|---|---|
| Aus | Kein Chip | Jeder Plan |
| Neu | Der Chip auf jedem Beitrag der letzten Tage. „New for“ (Neu für) legt fest, wie viele | 1 bis 30 Tage, jeder Plan |
| Spotlight | Ein Ring und der Chip wandern nacheinander zwischen Ihren vier neuesten Beiträgen. „Each for“ (Jeweils für) legt fest, wie lange jeder von ihnen ihn behält | 3 bis 30 Sekunden |
„Chip text“ (Chip-Text) ist das, was auf dem Chip steht: „Neu“, es sei denn, Sie ändern es, bis zu 12 Zeichen. Für Besucher, die reduzierte Bewegung aktiviert haben, bewegt sich nichts: Nur der neueste Beitrag behält den Chip.
„Review header“ (Bewertungskopf) und „Leave a review (Bewertung abgeben)“
Bei einem Widget mit Google-Bewertungen hat „Review header“ zwei Schalter, die beide deaktiviert sind, bis Sie sie einschalten, und beide kostenlos sind:
- „Rating summary“ (Bewertungsübersicht) platziert eine Zeile über den Bewertungen mit dem Durchschnitt, den Sternen und der Anzahl: „4,9 … von 24 aktuellen Bewertungen“. Die Sterne füllen sich bis zum Durchschnitt, sodass eine 4,9 fast fünf und eine 4,5 vier und eine halbe anzeigt; die Sterne bei jeder Bewertung bleiben ganz. Die Zahl wird aus den Bewertungen berechnet, die TileSet für das Widget gespeichert hat (die neuesten 24, bis zu 72 für eine Google-Quelle nach deren Bildprüfung). Es ist nicht die Bewertung auf der Plattform, die Google gibt sie nicht weiter, daher steht auf Google die Zeile „aktuelle Bewertungen“ und es wird nie mehr behauptet, als gezählt wurde. Bei anderen Quellen heißt es „Durchschnitt von 12 Bewertungen“. In einem gemischten Widget deckt es nur die Bewertungsquellen ab. Es wird nichts angezeigt, wenn keine der gespeicherten Bewertungen eine Bewertung hat.
- „Leave a review button“ (Schaltfläche „Bewertung abgeben“) fügt der eigenen Seite der Plattform zum Schreiben einer Bewertung einen Button hinzu: das Bewertungsformular von Google für das Unternehmen. „Button text“ (Schaltflächentext) ändert die Worte „Leave a review“, es sei denn, Sie ändern sie, bis zu 24 Zeichen. Der Button öffnet sich in einem neuen Tab. TileSet sendet keine Bewertungsanfragen per E-Mail oder Text; der Besucher geht selbst zur Plattform. Eine Quelle, die kein Unternehmen zum Verlinken hat (z. B. eine Demo-Quelle), zeigt keinen Button an.
In der Builder-Vorschau wird der Button angezeigt, führt aber nirgendwohin; auf Ihrer Seite öffnet er das echte Formular.
Aussehen beschreiben
Geben Sie etwas wie „dunkel, 4 Spalten, 12 Elemente“ in „Describe the look you want“ (Beschreiben Sie das gewünschte Aussehen) ein und die passenden Steuerelemente werden für Sie eingestellt.
Über die Einstellungen hinaus
Das Markup des Widgets besteht aus einem stabilen Satz von sbe--Klassen und --sbe--Custom-Properties, sodass ein Entwickler oder ein Agent es mit einem kleinen Stylesheet auf Ihrer Seite umgestalten kann. Die vollständige Referenz finden Sie im Einbettungsleitfaden. Das Widget verwendet eine eigene Systemschrift; setzen Sie in Ihrem Stylesheet font-family für .sbe, um sie an Ihre Website anzupassen.
Die API akzeptiert größere Wertebereiche als die Einstellungen im Dashboard (bis zu 12 Spalten und 100 Elemente); bei mehr Elementen als im Cache wird trotzdem nur das gezeigt, was im Cache ist.