Mise en page et style
Colonnes, éléments, thème, mise en page, espacement, coins, ce que chaque carte montre et la surbrillance Nouvelle. Chaque contrôle, avec sa plage.
Tout ici est gratuit sur tous les plans, y compris le carrousel, le masonry, le bento, la lightbox et les deux surbrillances, Nouvelle et la rotation « Spotlight » (Projecteur). Les changements s'affichent dans l'aperçu en direct immédiatement et s'appliquent à chaque page après avoir appuyé sur « Save » (Enregistrer).
Pour voir les mises en page sur du contenu réel d'abord, les exemples en direct montrent de vrais widgets, et quelques variations bento côte à côte.
Contrôles
| Contrôle | Ce que ça fait | Plage |
|---|---|---|
| Colonnes | Colonnes dans la grille ou le mur. Sur un mur, c'est un maximum : les cartes nécessitent environ 220 px chacune, donc un écran étroit en montre moins | 1 à 6 |
| Éléments | Combien de publications ou d'avis afficher. Une source conserve ses 24 plus récentes (une source Google jusqu'à 72 après son passage photo), et un widget n'affiche jamais plus que ce qui est mis en cache | 1 à 24 |
| Thème | « Auto » suit les paramètres de l’appareil de chaque visiteur, « Light » (Clair) et « Dark » (Sombre) sont fixes | |
| Mise en page | « Grid » (Grille), « Carousel » (Carrousel), « Masonry » (Mosaïque) ou « Bento » | |
| Espace | Espace entre les vignettes | 0 à 32 px |
| Rayon des coins | Coins arrondis | 0 à 24 px |
| Lignes de texte max | Aperçu et murs de publications uniquement : le texte plus long se replie davantage derrière « Show » (Afficher) | 2 à 12 |
Bento
Bento dispose les éléments comme le logo TileSet : un grand carré (2 par 2), un haut (1 par 2), un petit et un large (2 par 1), en répétition, sur des cellules carrées sans espace laissé au milieu. Seule la dernière ligne peut être courte.
- Il utilise 3 à 6 colonnes. Un réglage de 1 ou 2 s’affiche comme 3, et plus de 6 (possible via un agent) comme 6.
- Dans un espace plus étroit que 520 px, comme un téléphone, il affiche 2 colonnes, et les grands carrés restent 2 par 2.
- Sur une grille de flux, une publication ou un avis sans photo devient une carte de texte dans sa cellule au lieu d’être omise. Sur un mur d’avis ou de publications, chaque élément est une carte.
- Le texte d’une carte remplit sa cellule et s’estompe là où la cellule se termine, il n’y a donc plus de « Show ». Les grandes cellules utilisent un texte plus grand.
- « Big cells » (Grandes cellules) (avis Google et WordPress.org) : « Newest » (Plus récents) garde les éléments les plus récents dans les grandes cellules, « Top rated » (Mieux notés) y place ceux les mieux notés, les plus récents d’abord parmi les notes égales. Les mêmes éléments s’affichent de toute façon, seuls leurs emplacements changent.
Ce que montre chaque carte
Commutateurs, selon le modèle :
- « Feed grid » (Grille de flux) : « Likes & comments » (J'aime et commentaires), « Header » (En-tête) (avatar, identifiant et lien de suivi), « Lightbox », « Platform icon » (Icône de la plateforme). Sur une source Twitch ou Kick, « Live stream » (Diffusion en direct) choisit où une diffusion en direct est lue : « Lightbox » ou « Inline » (En ligne) dans une carte en direct (voir Twitch et Kick).
- « Review wall » : « Avatar » (sur les témoignages, la photo ou les initiales de la personne), « Rating » (Note), « Date », « Owner response » (Réponse du propriétaire), « Lightbox », « Platform icon ».
- YouTube propose également « All videos » (Toutes les vidéos) / « Hide Shorts » (Masquer les Shorts) / « Only Shorts » (Shorts uniquement).
« Lightbox » ouvre une image ou une vidéo sur votre page lorsqu'un visiteur clique dessus, avec un lien vers la publication ou l'avis d'origine. Désactivé, un clic ouvre la publication ou l'avis lui-même sur sa plateforme dans un nouvel onglet (l'avis Google, la publication sur X, la vidéo sur YouTube), ou l'image lorsque l'élément n'a pas de lien.
« Platform icon » place une petite marque Google ou YouTube sur chaque photo (en haut à gauche) et carte (en bas à droite). Elle est activée par défaut dans un flux mixte, afin que les visiteurs puissent voir d’où provient chaque publication, et désactivée sinon. Un widget de témoignages n’a pas de plateforme à marquer, il ne l’offre donc pas.
Un commutateur qu’une source ne peut jamais inverser n’est pas affiché. Un petit marqueur « +n » à la fin d’une section indique combien sont masqués et pourquoi au survol.
Légendes sur les photos
Sur une grille de flux, « Captions » (Légendes) choisit ce qu’une vignette photo affiche par-dessus l’image :
- « Off » (Désactivé) : la photo uniquement.
- « On hover » (Au survol) : le texte de la publication apparaît lorsqu'un visiteur survole la vignette ou y accède par tabulation.
- « Always » (Toujours) : le nom du compte et jusqu'à trois lignes de texte, tout le temps, comme dans l'exemple sur notre page d'accueil. Avec « Likes & comments » activé, les compteurs remplacent la dernière ligne de la légende au lieu de se trouver en dessous.
« Overlay » (Superposition) (activé par défaut) assombrit le bas de la photo sous la légende pour que le texte reste lisible sur une image claire. Désactivez-le pour une photo plus épurée.
Mise en surbrillance
Une petite pastille avec un point animé, comme celle de notre page d'accueil, sur n'importe quelle mise en page :
| Mise en surbrillance | Ce que ça fait | Plan |
|---|---|---|
| Désactivé | Pas de pastille | Chaque plan |
| Nouveau | La pastille sur chaque publication des derniers jours. « New for » (Nouveau pendant) définit combien | 1 à 30 jours, chaque plan |
| Sélection | Un anneau et la pastille passent entre vos quatre publications les plus récentes, une à la fois. « Each for » (Chacun pendant) définit combien de temps chacune la conserve | 3 à 30 secondes |
« Chip text » (Texte de la pastille) est ce que dit la pastille, « Nouveau » sauf si vous le changez, jusqu'à 12 caractères. Pour les visiteurs qui ont activé la réduction du mouvement, rien ne bouge : seule la publication la plus récente conserve la pastille.
« Review header » (En-tête des avis) et « Leave a review (Laisser un avis) »
Sur un widget avec des avis Google, « Review header » a deux interrupteurs, tous deux désactivés jusqu'à ce que vous les activiez et tous deux gratuits :
- « Rating summary » (Résumé des notes) ajoute une ligne au-dessus des avis avec la moyenne, les étoiles et le nombre : « 4,9 … sur 24 avis récents ». Les étoiles se remplissent jusqu'à la moyenne, donc un 4,9 montre presque cinq étoiles et un 4,5 quatre étoiles et demie ; les étoiles de chaque avis restent entières. Le chiffre est calculé à partir des avis que TileSet a stockés pour le widget (les 24 plus récents, jusqu'à 72 pour une source Google après son passage photo). Ce n'est pas la note sur la plateforme, que Google ne transmet pas, donc sur Google la ligne indique « avis récents » et ne prétend jamais plus qu'elle n'a compté. Sur d'autres sources, elle indique « moyenne de 12 avis ». Dans un widget mixte, elle ne couvre que les sources d'avis. Elle n'affiche rien lorsqu'aucun des avis stockés n'a de note.
- « Leave a review button » (Bouton « Laisser un avis ») ajoute un bouton sur la page de la plateforme pour écrire un avis : le formulaire d'avis de Google pour l'entreprise. « Button text » (Texte du bouton) modifie les mots, « Leave a review » sauf si vous le changez, jusqu'à 24 caractères. Le bouton s'ouvre dans un nouvel onglet. TileSet n'envoie aucune demande d'avis par e-mail ou SMS ; le visiteur se rend sur la plateforme lui-même. Une source qui n'a pas d'entreprise à lier (une source de démonstration, par exemple) n'affiche aucun bouton.
Dans l'aperçu du constructeur, le bouton est affiché mais ne mène nulle part ; sur votre page, il ouvre le vrai formulaire.
Décrire l'apparence
Tapez quelque chose comme « sombre, 4 colonnes, 12 éléments » dans « Describe the look you want » (Décrivez l'apparence souhaitée) et les contrôles correspondants sont définis pour vous.
Au-delà des contrôles
Le balisage du widget est un ensemble stable de classes sbe- et de propriétés personnalisées --sbe-, de sorte qu'un développeur ou un agent peut le retoucher avec une petite feuille de style sur votre page. La référence complète se trouve dans le guide d'intégration. Le widget utilise sa propre police système ; définissez font-family sur .sbe dans votre feuille de style pour qu'elle corresponde à votre site.
L'API accepte des plages plus larges que les contrôles du tableau de bord (jusqu'à 12 colonnes et 100 éléments) ; les éléments au-delà du cache n'affichent toujours que ce qui est mis en cache.