Portrait Tile Testimonials
Ogni voce visibile a colpo d'occhio, la storia completa a un tocco di distanza.
Trasforma la tua IA in un creatore di sezioni di testimonianze con il pattern portrait-tile — una griglia uniforme di riquadri ritratto, ognuno con una citazione estratta, che si espandono nella storia completa con un tocco, così i visitatori possono scansionare ogni voce a colpo d'occhio e approfondire quelle che contano.
Installala in 3 passaggi
Nessuna registrazione. Nessuno strumento da riga di comando. Scegli la tua AI, copia una riga e incollala.
Preferisci fare da te? Acquista la skill ($4.99), scarica lo ZIP dalla conferma d'acquisto, decomprimilo nella cartella mostrata sopra e riavvia la sessione della tua AI — stesso risultato. L'hai già acquistata? Il tuo assistente AI può scaricarla per te.
Cosa contiene
Un file SKILL.md (la guida operativa) + un modello di partenza. Un'anteprima:
Portrait Tile Testimonials
When to use
- You have 9–24 testimonials and want visitors to see all of them without scrolling through a wall of text
- Your audience compares options by scanning faces, names, and one-line takeaways before committing to read
- You want each testimonial to be equally weighted — no single "hero" quote, no hierarchy games
- The section must hold up on a phone, where a single-column quote list becomes an endless scroll
- You need a pattern that degrades gracefully: full grid visible even before any interaction
Workflow
- Collect the set (input: your testimonial pool → output: 9–24 tile-ready testimonials)
Gather testimonials that each make one distinct point — a different outcome, objection, or buyer type per tile. Tiles work in multiples of three on desktop, so aim for 9, 12, 15, or 18; a grid with two orphan tiles in the last row looks unfinished. Drop any testimonial that can't be reduced to one sharp pull-quote without losing its meaning — if it needs three paragraphs to land, it belongs in a case study, not a tile. - Write the pull-quote (input: full testimonial → output: one-line pull-quote + full text)
For each testimonial, write a pull-quote of 8–14 words that carries the single most specific claim: a number, a time frame, a before-and-after. Keep the full quote (2–4 sentences) for the expanded view, in the speaker's own words. Pair both with the speaker's full name, role, and company, plus a portrait photo at least 400px square, cropped to the face, with consistent treatment across tiles so the grid reads as one family. - Lay out the grid (input: tile content → output: uniform tile grid)
Every tile is the same size: portrait at top (square or 4:3), name and role beneath, pull-quote below that in a fixed number of lines. Uniform tiles are the contract — if one tile is taller, the grid looks broken and scanning stops. On desktop show three or four columns; on tablet two; on phone one or two. Tiles are real buttons or links: tapping or pressing Enter expands the tile. The grid itself is fully readable with JavaScript disabled — expansion is enhancement, not the only way to reach the content. - Build the expansion (input: grid → output: expanding tile or detail view)
Choose one expansion mode and stick to it: either the tile grows in place to reveal the full quote, or tapping opens a detail panel/modal beside or over the grid. In-place expansion keeps context but shifts the grid; a modal keeps the grid stable but hides it. Either way: focus moves into the expanded content, Escape closes it, focus returns to the tile that opened it, and the expanded view shows the full quote plus any verifiable detail (numbers, time frames) that the pull-quote only hinted at. Never expand on hover alone — hover-expansion is unusable on touch screens and infuriating for everyone else. - Check the grid (input: finished section → output: verified section)
Verify every quote against its source: wording, name spelling, title, company, permission to publish. Check the grid at every breakpoint for orphans, stretched portraits, and pull-quotes that wrap past their line clamp and break tile uniformity. Test with a keyboard only: every tile reachable, every expansion closable with Escape. Read the grid as a skeptic: do the pull-quotes together cover real objections, or do they all say the same pleasant nothing?
Anteprima del modello
Portrait Tile Testimonials — Build Template
A uniform grid where every voice is visible at a glance. Fill in the set, then build.
The set (9–24 testimonials, multiples of three)
Total tiles: {9 / 12 / 15 / 18} — Grid: {3 / 4} columns desktop, 2 tablet, {1 / 2} phone
Portrait checklist (per speaker)
- [ ] Portrait ≥400px square, same crop and aspect as every other tile
- [ ] Full name spelled correctly, role and company verified
- [ ] Written permission for quote + name + title + photo on file
Tile layout (identical for every tile)
- Portrait: {square / 4:3} at top
- Attribution: {Name} — {Role}, {Company}
Il pacchetto della skill (SKILL.md + modello) è scritto in inglese.
