Contenu du pack

Un fichier SKILL.md (le guide pratique) + un modèle de départ. Aperçu :

Testimonial Columns

When to use

• Your homepage, pricing page, or landing page needs social proof and one big quote is not enough
• You have six or more good testimonials and they are different lengths — some two lines, some six
• A wall of identical same-height cards would look like a template, but a chaotic free-for-all would look unedited
• You want visitors to browse proof at their own pace instead of watching quotes auto-rotate past them
• A sales page needs proof grouped by theme (results, ease of use, support) without building three separate sections

Workflow

1. Collect the raw quotes (input: reviews, emails, survey answers, call notes → output: quote bank)
   Gather every usable quote into one list: review-site comments, post-purchase survey answers, support emails where a customer praised you, and notes from calls. Keep each quote attached to the real person's name, role, and company — a quote without attribution is a rumor. Aim for at least nine quotes so each column has enough material to balance; if you have fewer than six, a masonry grid will look sparse and a single featured quote will serve you better. Do not invent or polish quotes into words the customer never said — trimming is editing, rewriting is fabrication.
2. Trim every quote to its sharpest lines (input: quote bank → output: trimmed quotes)
   Cut each quote to one to three sentences that carry the proof: the result, the feeling, or the specific detail that makes it believable. Keep the customer's own words and their most concrete detail ("cut onboarding from three weeks to four days" survives; "great product, highly recommend" does not). If a quote is still longer than three sentences after trimming, it is two quotes — split it, or save the rest for a case study. Aim for a mix of lengths across the bank: short punches, medium stories, and one or two longer ones give the masonry its varied rhythm.
3. Assign quotes to columns by weight, not by order (input: trimmed quotes → output: column assignment)
   Sort the trimmed quotes into three columns so that each column ends up roughly the same total height — that balance is what makes a masonry grid look intentional instead of lopsided. Start by placing the longest quote in column one, the second-longest in column two, the third-longest in column three, then keep dealing the next-longest quote to whichever column is currently shortest. Do not sort by theme down each column unless you are deliberately building themed columns; a reader's eye travels down one column at a time, so each column should feel like a varied conversation, not a single topic repeated. If you do theme the columns, label each column's theme in a small heading so the grouping reads as a choice.
4. Design the cards (input: column assignment → output: card system)
   Design one card, then repeat it: quote text largest, attribution (name, role, company) below in smaller type, and optionally a small avatar or company mark. Keep every card the same width, the same padding, the same type sizes — the masonry variation comes from the quotes being different lengths, not from cards having different styles. Use a star row or a short metric only when every quote has one; a decoration that appears on two cards and vanishes on the rest looks like a bug. Add a subtle top border or background tint to separate cards from the page, and keep the gap between cards consistent — consistent gaps are what make uneven heights look deliberate.
5. Handle the responsive collapse and the edges (input: card system → output: finished section)
   Define exactly how the grid collapses: three columns on desktop, two on tablet, one on mobile, with the quote order preserved top-to-bottom within each column so nothing gets lost. On mobile the masonry becomes a single readable stack — check that the longest quotes do not create an endless scroll by trimming them again rather than by hiding content behind a "read more" unless you genuinely have a full case study linked. Add a small heading above the grid ("What customers say" or the outcome in plain words) and, if you have more than twelve quotes, a "show more" control that reveals the rest in place rather than sending visitors to a new page. Test with real content at every breakpoint — a masonry grid that only looks right with placeholder text will break the day real quotes go in.

Aperçu du modèle

Testimonial Columns — Build Template

One page = one grid. Fill this in before laying out any columns.

Section

Heading: {e.g. What customers say / Loved by teams who ship} Subheading (optional): {one line, plain words} Columns: 3 desktop / 2 tablet / 1 mobile

Quote bank (9+ quotes, real attribution)

Cut list: {quotes rejected as too generic, with reason}

Trim check (every kept quote)

[ ] 1–3 sentences, customer's own words [ ] Keeps its most concrete detail (number, timeframe, or specific outcome) [ ] No invented or "improved" claims

Column assignment (deal longest-first to the currently shortest column)

Le pack de compétence lui-même (SKILL.md + modèle) est rédigé en anglais.

Acheter le pack complet — $4.99 Pro — les 511 compétences