Indeling en styling

Kolommen, items, thema, lay-out, afstand, hoeken, wat elke kaart toont en de Nieuwe highlight. Elke controle, met zijn bereik.

Alles hier is gratis op elk abonnement, inclusief de carrousel, metselwerk, bento, de lightbox en beide highlights, Nieuw en de roterende “Spotlight”. Wijzigingen worden direct weergegeven in de live preview en zijn van toepassing op elke pagina nadat je op “Save” (Opslaan) drukt.

Om de lay-outs eerst op echte inhoud te zien, tonen de live voorbeelden echte widgets, en een paar bento-variaties naast elkaar.

Bedieningselementen

Controle	Wat het doet	Bereik
Kolommen	Kolommen in het raster of de muur. Op een muur is het een maximum: kaarten hebben ongeveer 220 px nodig, dus een smal scherm toont er minder	1 tot 6
Items	Hoeveel berichten of beoordelingen weer te geven. Een bron behoudt zijn nieuwste 24 (een Google-bron tot 72 na zijn fotopas), en een widget toont nooit meer dan wat er in de cache staat	1 tot 24
Thema	“Auto” volgt de apparaatinstellingen van elke bezoeker, “Light” (Licht) en “Dark” (Donker) zijn vast
Indeling	“Grid” (Raster), “Carousel” (Carrousel), “Masonry” of “Bento”
Kloof	Ruimte tussen tegels	0 tot 32 px
Hoekradius	Afgeronde hoeken	0 tot 24 px
Max tekstregels	Alleen beoordelingen en berichtenmuren: langere tekst vouwt achter “Show” (Tonen) meer	2 tot 12

Bento

Bento rangschikt de items zoals het TileSet logo: een groot vierkant (2 bij 2), een hoge (1 bij 2), een kleine en een brede (2 bij 1), herhalend, op vierkante cellen zonder ruimte in het midden. Alleen de laatste rij kan kort zijn.

Het gebruikt 3 tot 6 kolommen. Een instelling van 1 of 2 wordt weergegeven als 3, en meer dan 6 (mogelijk via een agent) als 6.
In een ruimte smaller dan 520 px, zoals een telefoon, worden 2 kolommen weergegeven en blijven de grote vierkanten 2 bij 2.
Op een feedraster wordt een bericht of beoordeling zonder foto een tekstkaart in zijn cel in plaats van weggelaten. Op een beoordelings- of berichtenmuur is elk item een kaart.
De tekst van een kaart vult zijn cel en vervaagt waar de cel eindigt, dus er is geen “Show” meer. De grote cellen gebruiken grotere tekst.
“Big cells” (Grote cellen) (Google en WordPress.org beoordelingen): “Newest” (Nieuwste) houdt de nieuwste items in de grote cellen, “Top rated” (Hoogst beoordeeld) plaatst de best beoordeelde items daar, de nieuwste eerst onder gelijke beoordelingen. Dezelfde items worden op beide manieren weergegeven, alleen hun plaatsen veranderen.

Wat elke kaart toont

Schakelaars, afhankelijk van de sjabloon:

“Feed grid” (Feedraster): “Likes & comments” (Likes en reacties), “Header” (Koptekst) (avatar, naam en volglink), “Lightbox”, “Platform icon” (Platformpictogram). Op een Twitch of Kick bron, “Live stream” (Livestream) kiest waar een live stream wordt afgespeeld: “Lightbox” of “Inline” in een live kaart (zie Twitch en Kick).
“Review wall”: “Avatar” (op testimonials, de foto of de initialen van de persoon), “Rating” (Beoordeling), “Date” (Datum), “Owner response” (Reactie van de eigenaar), “Lightbox”, “Platform icon”.
YouTube heeft ook “All videos” (Alle video's) / “Hide Shorts” (Shorts verbergen) / “Only Shorts” (Alleen Shorts).

“Lightbox” opent een afbeelding of video op je pagina wanneer een bezoeker erop klikt, met een link naar het originele bericht of de recensie. Als het uit staat, opent een klik het bericht of de recensie zelf op het platform in een nieuw tabblad (de Google-recensie, het bericht op X, de video op YouTube), of de afbeelding als het item geen link heeft.

“Platform icon” plaatst een klein Google- of YouTube-logo op elke foto (linksboven) en kaart (rechtsonder). Het is standaard ingeschakeld in een gemengde feed, zodat bezoekers kunnen zien waar elk bericht vandaan komt, en anders uitgeschakeld. Een testimonials-widget heeft geen platform om te markeren, dus die biedt het niet aan.

Een schakelaar die een bron nooit kan terugdraaien, wordt niet weergegeven. Een kleine "+n"-markering aan het einde van een sectie geeft aan hoeveel er verborgen zijn en waarom bij het zweven.

Bijschriften op foto's

Op een feedraster kiest “Captions” (Bijschriften) wat een fototegel boven de afbeelding toont:

“Off” (Uit): alleen de foto.
“On hover” (Bij hover): de tekst van het bericht verschijnt wanneer een bezoeker op de tegel wijst of ernaartoe navigeert.
“Always” (Altijd): de accountnaam en maximaal drie regels tekst, altijd zichtbaar, zoals in het voorbeeld op onze startpagina. Met “Likes & comments” ingeschakeld, worden de tellingen de laatste regel van het bijschrift in plaats van eronder te staan.

“Overlay” (standaard ingeschakeld) maakt de onderkant van de foto donkerder onder het bijschrift, zodat de tekst leesbaar blijft op een lichte afbeelding. Schakel het uit voor een schonere foto.

Highlight

Een klein label met een live stip, zoals die op onze startpagina, op elke lay-out:

Highlight	Wat het doet	Abonnement
Uit	Geen label	Elk plan
Nieuw	Het label op elk bericht van de afgelopen dagen. “New for” (Nieuw gedurende) bepaalt hoeveel.	1 tot 30 dagen, elk plan
Spotlight	Een ring en het label wisselen tussen je nieuwste vier berichten, één voor één. “Each for” (Elk gedurende) bepaalt hoe lang elk bericht het behoudt.	3 tot 30 seconden

“Chip text” (Chiptekst) is wat het label zegt, “Nieuw” tenzij je het wijzigt, tot 12 tekens. Voor bezoekers met verminderde bewegingsopties ingeschakeld, beweegt er niets: alleen het nieuwste bericht behoudt het label.

“Review header” (Reviewkop) en “Leave a review (Een review achterlaten)”

Op een widget met Google reviews, heeft “Review header” twee schakelaars, beide uitgeschakeld totdat je ze inschakelt en beide gratis:

“Rating summary” (Samenvatting van beoordelingen) plaatst een rij boven de reviews met het gemiddelde, de sterren en het aantal: “4,9 … van 24 recente reviews”. De sterren vullen zich tot het gemiddelde, dus een 4,9 toont bijna vijf en een 4,5 vier en een half; de sterren op elke review blijven heel. Het cijfer wordt berekend uit de reviews die TileSet voor de widget heeft opgeslagen (de nieuwste 24, tot 72 voor een Google-bron na de fotoverwerking). Het is niet de beoordeling op het platform, die Google geeft niet door, dus op Google zegt de regel “recente reviews” en claimt nooit meer dan het heeft geteld. Op andere bronnen staat “gemiddelde van 12 reviews”. In een gemengde widget dekt het alleen de reviewbronnen. Het toont niets wanneer geen van de opgeslagen reviews een beoordeling heeft.
“Leave a review button” (Knop 'Een review achterlaten') voegt een knop toe aan de eigen pagina van het platform om een recensie te schrijven: het beoordelingsformulier van Google voor het bedrijf. “Button text” (Knoptekst) wijzigt de tekst, “Leave a review” tenzij je het wijzigt, tot 24 tekens. De knop opent in een nieuw tabblad. TileSet stuurt geen recensieverzoeken per e-mail of sms; de bezoeker gaat zelf naar het platform. Een bron die geen bedrijf heeft om naar te linken (een demo-bron, bijvoorbeeld) toont geen knop.

In de builder-preview wordt de knop weergegeven, maar gaat nergens naartoe; op je pagina opent het het echte formulier.

Beschrijf het uiterlijk

Typ iets als “donker, 4 kolommen, 12 items” in “Describe the look you want” (Beschrijf de look die je wilt) en de bijbehorende bedieningselementen worden voor je ingesteld.

Voorbij de bedieningselementen

De markup van de widget is een stabiele set van sbe- klassen en --sbe- aangepaste eigenschappen, zodat een ontwikkelaar of een agent deze kan herstylen met een kleine stylesheet op je pagina. De volledige referentie is de embed handleiding. De widget gebruikt zijn eigen systeemlettertype; stel font-family in op .sbe in je stylesheet om deze aan te passen aan je site.

De API accepteert bredere bereiken dan de dashboardbedieningselementen (tot 12 kolommen en 100 items); items buiten de cache tonen nog steeds alleen wat in de cache zit.