Infobox: 3 Colonne — Formato, Regole ed Esempi

Un infobox a tre colonne presenta esattamente tre punti paralleli sotto un’unica idea condivisa. È utile quando il lettore deve vedere un modello reale a tre parti contemporaneamente: tre responsabilità, tre criteri, tre risultati o tre flussi di lavoro coordinati. Le colonne promettono pari stato editoriale, quindi ogni punto deve svolgere lo stesso tipo di lavoro a profondità comparabile.

L’elemento renderizzato ha un titolo condiviso ed esattamente tre elementi. Tutti e tre i titoli sono sintagmi nominali, tutti e tre i corpi descrivono un tipo di fiducia, e le icone aggiungono ritmo senza trasportare significato. Rimuovi le icone e il modello rimane invariato.

Perché questo elemento è importante

I lettori non percepiscono un paragrafo denso come un modello solo perché contiene tre proposizioni. Devono tenere a mente la prima proposizione, rilevare la transizione alla seconda e decidere se la terza è equivalente, subordinata o semplicemente aggiuntiva. Un infobox a tre colonne rende esplicita la relazione. Il titolo condiviso nomina ciò che rimane costante; tre elementi delimitati mostrano la suddivisione completa; il peso visivo uniforme dice ai lettori di esaminare ogni elemento prima di considerare il modello come compreso.

Questo aiuta attraverso il chunking, ovvero il raggruppamento di informazioni correlate in unità gestibili. Tre è sufficiente per rivelare un sistema senza produrre un catalogo. Un lettore può scansionare i tre titoli, entrare attraverso il punto più rilevante per sé e poi confrontare il livello di dettaglio. L’elemento è particolarmente efficace quando la prosa altrimenti ripeterebbe lo stesso soggetto tre volte o nasconderebbe la distinzione all’interno di una frase lunga.

L’estraibilità meccanica è la capacità del software di isolare un’unità di contenuto senza perderne il soggetto o le relazioni. Un infobox a tre colonne tipizzato espone un argomento genitore e tre figli ordinati. I sistemi di ricerca, le API di contenuto e gli strumenti di recupero AI possono preservare il titolo condiviso, ogni titolo di elemento, ogni corpo e l’ordine di origine invece di indovinare se un paragrafo contiene un elenco. Le intestazioni esplicite danno anche a ogni elemento un’etichetta di recupero utile.

L’estrazione funziona solo quando le parole sono autonome. «La fiducia tecnica significa che la pagina viene renderizzata e i link si risolvono» può sopravvivere al di fuori del layout. «La terza parte gestisce questo» non può. La struttura inoltre non può fabbricare una terza idea. Segui le regole di scrittura degli elementi : stabilisci il modello di contenuto prima di scegliere il renderizzatore. Il requisito specifico dell’elemento di esattamente tre elementi prevale su qualsiasi concessione generale per elementi ripetibili.

Quando usarlo

Usa un infobox a tre colonne solo quando tutti e cinque i test sono superati:

1. Un titolo condiviso può governare accuratamente l’intero elemento.
2. L’argomento si divide naturalmente in esattamente tre punti.
3. Tutti e tre i punti rispondono alla stessa domanda implicita.
4. Ogni punto merita profondità, prove e peso visivo simili.
5. Ogni punto può essere spiegato in uno o due brevi paragrafi senza struttura annidata.

Gli usi validi includono tre componenti di un framework, tre responsabilità del proprietario, tre dimensioni della qualità, tre risultati da una capacità o tre controlli eseguiti nella stessa fase. La relazione può essere complementare, sequenziale o categoriale, ma deve essere dichiarata. Se l’autore non riesce a completare la frase «Questi tre stanno insieme perché…», il raggruppamento è probabilmente un riempimento visivo.

L’errore più comune è una coppia genuina più un terzo elemento debole. «Persone, processi e altro» non diventa un modello a tre parti perché il layout ha tre slot. Così come «Velocità, precisione e valore» quando l’articolo definisce solo velocità e precisione e tratta il valore come loro risultato. Mantieni la coppia, spiega il risultato in prosa o scegli un altro elemento.

Non usare questo infobox per tre istruzioni sequenziali. Le colonne indeboliscono la sequenza, specialmente quando si impilano a larghezze ridotte; usa un elenco di passaggi quando l’ordine di completamento è importante. Non usarlo per tre prodotti valutati secondo diversi criteri; usa una tabella di confronto. Non usarlo per un elenco che oggi contiene tre fatti ma potrebbe acquisirne un quarto al prossimo aggiornamento. Un contratto fisso a tre colonne è adatto solo quando tre è inerente all’idea.

Altri errori comuni includono un’intestazione più due elementi reali, un elemento che contiene tutte le avvertenze, tre affermazioni promozionali senza meccanismo o prove, e un segmento di pubblico suddiviso in tre dati demografici arbitrari. In ogni caso, il layout sopravvaluta una relazione che il contenuto non ha guadagnato.

Dove posizionarlo

Posiziona l’infobox immediatamente dopo il paragrafo che introduce l’idea madre. Quel paragrafo dovrebbe spiegare perché una visione a tre vie è utile; il titolo condiviso nomina quindi il modello e gli elementi ne definiscono le parti. Segui l’elemento con interpretazione, prove o una transizione che si applichi al gruppo nel suo insieme.

Può apparire direttamente sotto un H2 quando quell’intestazione fornisce il titolo condiviso e nessun paragrafo o componente si frappone. Può anche seguire una definizione quando i tre elementi sviluppano le dimensioni del termine. Non deve interrompere un’affermazione e la sua citazione, un’avvertenza e la condizione che la attiva, un passaggio e il suo risultato atteso, o una frase che introduce un elenco convenzionale. Quelle relazioni devono rimanere contigue.

Non posizionarlo immediatamente accanto a un’altra griglia a tre colonne, tabella dei prezzi, controllo a schede, deck di card o invito all’azione a tre opzioni. La geometria ripetuta fa sembrare la spiegazione editoriale interattiva o commerciale e costringe i lettori a dedurre quale raggruppamento conta. Inserisci della prosa esplicativa o scegli una struttura che porti l’intera relazione. Evita di posizionare un secondo infobox nella stessa breve sezione; la ripetizione trasforma un modello deliberato in un arredamento decorativo.

In una pagina lunga, più infobox a tre colonne sono accettabili solo sotto intestazioni diverse e per modelli effettivamente diversi. Non dovrebbero essere usati come trattamento predefinito per ogni trio nella copia.

Anatomia

L’anatomia contiene una regione genitore e tre regioni di elemento ripetute. Lo screenshot etichettato dovrebbe identificare le parti semantiche anziché il colore, il raggio o i token di spaziatura, in modo che la specifica sopravviva a una riprogettazione.

1. Confine esterno: Raggruppa il titolo e tutti e tre gli elementi come un’unica unità editoriale.
2. Titolo condiviso: Nomina l’idea suddivisa dai tre elementi. Non è un quarto elemento.
3. Slot icona opzionale: Contiene un’icona decorativa approvata per elemento; tutti e tre gli slot vengono usati insieme o omessi insieme.
4. Titolo dell’elemento: Nomina un membro dell’insieme con linguaggio parallelo agli altri due titoli.
5. Corpo dell’elemento: Spiega quel membro con profondità corrispondente e rimane significativo quando estratto.
6. Relazione di layout: Usa tre colonne uguali dove lo spazio lo permette e impila elemento uno, elemento due, poi elemento tre su schermi stretti.

Gli autori controllano titoli, corpi, token di icone e ordine di origine. Il renderizzatore controlla larghezza delle colonne, spazi vuoti, breakpoint, bordi, sfondi e tipografia.

Esempi di design

C’è un elemento semantico con quattro varianti supportate e uno stato reattivo. Nessuna modifica il contratto esatto dei tre elementi.

Variante titolata predefinita: Preferita per contenuti esplicativi. Il titolo condiviso e i tre titoli degli elementi rendono esplicita la gerarchia; non sono presenti icone.

Variante con icone: Aggiunge un’icona decorativa a ogni elemento. Le icone devono condividere famiglia, dimensione e peso visivo. Una miscela di icona, fotografia e slot vuoto non è supportata.

Variante con titolo contestuale: L’H2 immediatamente precedente fornisce il titolo condiviso. Ciò è consentito solo quando il contenitore può fare riferimento programmaticamente a quell’intestazione visibile e nulla separa l’intestazione dall’elemento.

Variante compatta: Adatta per tre brevi definizioni o controlli. Ogni corpo è comunque una frase completa, non uno slogan o un frammento di etichetta.

Stato a viewport stretto: Gli elementi si impilano verticalmente nell’ordine di creazione. Nessuna dicitura può dipendere dalla posizione sinistra, centrale o destra.

Parametri

Il contratto separa il significato autoriale dalla presentazione. Le colonne reattive e lo stile delle icone appartengono al renderizzatore; i campi di contenuto e l’ordine semantico appartengono all’origine.

Il titolo è obbligatorio a meno che un’intestazione immediatamente precedente non fornisca lo stesso argomento genitore ed etichetti il contenitore. Il contenuto dell’elemento può contenere enfasi, codice inline e un link testuale pertinente. Non può contenere intestazioni annidate, tabelle, elenchi più lunghi di tre brevi punti elenco, media, moduli, inviti all’azione o un altro componente.

Sintassi ed esempi di codice

Tutte e tre le notazioni preservano lo stesso titolo, tre elementi ordinati, token icona opzionali e corpi. La direttiva Markdown portabile è l’origine canonica. Hugo e WordPress sono contratti di adattamento e devono rifiutare qualsiasi conteggio di elementi diverso da tre.

Direttiva Markdown portabile

:::infobox-3-columns
## A publishable page needs three kinds of confidence

::item{icon="reader"}
### Reader confidence

The answer is clear, complete, and specific enough to guide a decision or action.
::

::item{icon="editorial"}
### Editorial confidence

Claims are supported, terminology is consistent, and every required qualification remains attached.
::

::item{icon="technical"}
### Technical confidence

The page renders, links resolve, metadata maps correctly, and machines can recover its structure.
::
:::

La prima intestazione genitore corrisponde a title. Ogni ::item mappa la sua prima intestazione a item.title, il corpo rimanente a item.content e l’attributo icon opzionale a un token icona approvato. Sono richiesti tre elementi annidati anche quando il layout si impila.

Mappatura shortcode Hugo

{{< infobox-3-columns title="A publishable page needs three kinds of confidence" variant="icons" >}}
  {{< infobox-item title="Reader confidence" icon="reader" >}}
  The answer is clear, complete, and specific enough to guide a decision or action.
  {{< /infobox-item >}}
  {{< infobox-item title="Editorial confidence" icon="editorial" >}}
  Claims are supported, terminology is consistent, and every required qualification remains attached.
  {{< /infobox-item >}}
  {{< infobox-item title="Technical confidence" icon="technical" >}}
  The page renders, links resolve, metadata maps correctly, and machines can recover its structure.
  {{< /infobox-item >}}
{{< /infobox-3-columns >}}

Questa è una specifica di adattamento portabile, non una promessa che il sito corrente registri questi shortcode. Usa solo parametri nominati, preserva l’ordine di origine, convalida i token delle icone e fallisce la validazione di authoring invece di eliminare silenziosamente o avvolgere un elemento extra.

Blocco WordPress

<!-- wp:amicited/infobox-3-columns {"title":"A publishable page needs three kinds of confidence","variant":"icons"} -->
  <!-- wp:amicited/infobox-item {"title":"Reader confidence","icon":"reader"} -->
  <p>The answer is clear, complete, and specific enough to guide a decision or action.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Editorial confidence","icon":"editorial"} -->
  <p>Claims are supported, terminology is consistent, and every required qualification remains attached.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Technical confidence","icon":"technical"} -->
  <p>The page renders, links resolve, metadata maps correctly, and machines can recover its structure.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-3-columns -->

L’editor dovrebbe esporre tre slot fissi per gli elementi. Può consentire all’autore di riordinare gli elementi, ma non deve offrire un inseritore illimitato che permetta un quarto figlio o un blocco non correlato.

Esempi

Buon esempio: un vero modello operativo a tre vie

Questo funziona perché il titolo condiviso definisce un modello di responsabilità, i tre ruoli sono distinti e ogni corpo risponde alla stessa domanda: cosa deve verificare questo responsabile? Gli elementi usano titoli nominali paralleli e profondità comparabile. Nessuno esiste solo per completare la riga.

Cattivo esempio: una coppia allungata a tre

Tre modi per migliorare una landing page

Chiarirai l’offerta: Dai un nome al pubblico, al problema, al meccanismo e al risultato atteso con un linguaggio che il lettore possa verificare.

Dimostra l’affermazione: Aggiungi prove pertinenti, spiega i loro limiti e mantieni le citazioni allegate alle dichiarazioni che supportano.

Rendila accattivante: Aggiungi colori attraenti e tutto ciò che sembra coinvolgente.

I primi due elementi sono requisiti editoriali con output osservabili. Il terzo è un vago consiglio visivo, non ha un corrispondente standard di prova e svolge un lavoro diverso. È stato aggiunto perché il design richiedeva tre colonne, non perché il modello abbia tre parti. Rimuovi il terzo elemento e usa una struttura a due parti, oppure definisci un genuino terzo requisito come la riduzione dell’attrito di interazione e supportalo alla stessa profondità.

Markup schema e accessibilità

Un infobox a tre colonne non ha un tipo Schema.org dedicato e non crea dati strutturati autonomi. Il suo testo rimane parte dell’Article, TechArticle o WebPage che lo contiene, quando quella pagina è qualificata. Non marcare i figli come ItemList solo perché sono tre, e non dedurre HowTo da etichette che suonano sequenziali. Fornisci schema a livello di pagina solo quando il contenuto sottostante soddisfa autonomamente i requisiti di quello schema.

Usa un contenitore semantico etichettato con tre sezioni figlie. Usa <section> quando il modello è parte dell’argomentazione principale e <aside> quando è complementare. Collega il titolo condiviso visibile con aria-labelledby e dai a ogni figlio una vera intestazione al corretto livello del documento. Il testo in grassetto non è un sostituto dell’intestazione.

L’ordine di origine è l’ordine di lettura. Gli screen reader, la navigazione da tastiera, il testo copiato e i layout mobili devono incontrare elemento uno, elemento due, poi elemento tre. Il CSS può creare colonne ma non deve usare regole di ordinamento per riorganizzarle. Non scrivere mai «sinistra», «centro» o «destra»; quelle posizioni scompaiono quando gli elementi si impilano.

Le icone sono decorative a meno che non comunichino informazioni non presenti nel titolo. Le icone decorative usano aria-hidden="true" in HTML o testo alternativo vuoto quando renderizzate come immagini. Se un’icona è informativa, il suo significato deve apparire anche nel testo visibile; un nome accessibile nascosto alla vista non aiuta i lettori che possono vedere la pagina ma non interpretare il simbolo. Colore e forma dell’icona non devono mai essere l’unica distinzione tra gli elementi.

A larghezze ridotte, impila gli elementi prima che il testo diventi troppo compresso. Supporta lo zoom del testo senza ritaglio, sovrapposizione o scorrimento orizzontale a livello di pagina. Uno screenshot a tre colonne non sostituisce un contenuto semantico reattivo.

Regole di scrittura

Inizia con la frase «Questa idea ha tre parti: X, Y e Z.» La frase deve rimanere accurata dopo che ogni parte è stata definita. Se una parte è un risultato delle altre due, un contenitore generico o un esempio minore, il modello non è veramente parallelo.

Usa esattamente tre elementi. Mantieni ogni titolo tra 2 e 7 parole e usa lo stesso schema grammaticale: tre sintagmi nominali, tre domande o tre etichette temporali. Mantieni ogni corpo tra 25 e 80 parole dove possibile e non superare mai 110. Una differenza di una frase è accettabile. Un elemento da 25 parole accanto a due elementi da 100 parole richiede una modifica o una struttura diversa.

Profondità corrispondente significa lavoro esplicativo comparabile, non riempitivo. Ogni corpo dovrebbe rispondere alla stessa domanda implicita, contenere un livello simile di specificità ed enunciare le conseguenze a un livello simile. Se un elemento ha genuinamente bisogno di più spiegazioni, sposta il modello in sezioni ordinarie dove la lunghezza può variare onestamente.

Usa un linguaggio diretto e neutro. I titoli dovrebbero identificare il significato, non la posizione: «Scoperta / Produzione / Revisione» è più forte di «Primo / Secondo / Terzo.» Le etichette sequenziali sono accettabili solo quando ogni elemento riassume una fase anziché istruire il lettore attraverso passaggi. Evita superlativi, affermazioni di benefici non supportati e tre slogan travestiti da spiegazione.

Le icone sono opzionali. Usale tutte e tre o nessuna, selezionale da una famiglia approvata e mantienile visivamente coerenti. Non scegliere le icone prima dei titoli, non usare emoji come token di icone di produzione e non lasciare che un’icona sostituisca un’intestazione significativa dell’elemento.

Non mettere mai questi elementi all’interno dell’elemento:

• Due o quattro elementi, un elemento vuoto o un terzo slot «miscellaneo».
• Una procedura dettagliata, matrice di confronto, piano tariffario, modulo, carosello di testimonianze o banner promozionale.
• Sezioni H2 annidate, un altro infobox, schede, pannelli di accordion, video o galleria di immagini.
• Lunghi elenchi puntati, elenchi di fonti, disclaimer legali, avvertenze di sicurezza o qualifiche scollegate dall’affermazione che governano.
• Tre link non correlati stilizzati per assomigliare a inviti all’azione equivalenti.

Quando il contenuto supera questi limiti, promuovi i tre elementi a sezioni di pagina normali. Il layout fisso non dovrebbe mai diventare un motivo per comprimere sfumature essenziali o nascondere una qualifica.

Tipi di post che lo usano

Il campo frontmatter postTypes è l’insieme di utilizzo registrato. Identifica i formati che spesso contengono un modello significativo a tre parti; non richiede un infobox quando la fonte non ha un trio genuino.

Checklist QA

• Un’idea genitore: Un titolo condiviso preciso spiega perché tutti e tre gli elementi stanno insieme.
• Esattamente tre elementi: L’origine e l’output renderizzato contengono tre figli completi — mai due, quattro o un segnaposto vuoto.
• Suddivisione genuina a tre: Rimuovere qualsiasi elemento rende il modello incompleto; nessuno è riempitivo, un risultato o una categoria miscellanea.
• Titoli paralleli: Tutti i titoli degli elementi usano la stessa forma grammaticale e identificano il significato anziché la posizione sullo schermo.
• Profondità corrispondente: Ogni corpo risponde alla stessa domanda implicita con dettagli e prove comparabili.
• Posizionamento utile: L’elemento segue il suo contesto introduttivo e non separa un’affermazione, avvertenza, passaggio o citazione dal suo contenuto dipendente.
• Vicinanza sicura: Non è adiacente a un’altra griglia a tre colonne, blocco prezzi, controllo a schede o CTA a tre opzioni.
• Dizione estraibile: I titoli condivisi e degli elementi nominano i loro soggetti; i corpi non si basano su pronomi vicini o posizione visiva.
• Coerenza delle icone: Tutti e tre gli elementi usano icone approvate da una famiglia, o nessun elemento usa un’icona; il significato rimane nel testo.
• Ordine reattivo: Mobile impila elemento uno, elemento due, poi elemento tre senza ritaglio, scorrimento orizzontale o riordino CSS.
• Semantica accessibile: Il contenitore ha un’etichetta programmatica visibile, i titoli degli elementi sono intestazioni e le icone decorative sono nascoste alla tecnologia assistiva.
• Limiti di contenuto: I corpi rimangono entro due brevi paragrafi e non contengono componenti complessi annidati, procedure o controlli promozionali.
• Parità di notazione: Markdown portabile, Hugo e WordPress preservano lo stesso titolo, tre elementi, token icona, corpi e ordine.
• Moderazione dello schema: Il renderizzatore non deduce markup di elenco, confronto o procedura dalla presentazione a tre colonne.

Un revisore dovrebbe respingere l’elemento quando il numero di elementi, la logica genuina a tre vie o la profondità corrispondente falliscono. Sono difetti del modello di contenuto; la lucidatura visiva non può ripararli.

FAQ

Le voci FAQ nel frontmatter coprono il numero fisso di elementi, la profondità corrispondente, le icone opzionali, l’ordine mobile e la moderazione dello schema. Il template academy può renderizzare quelle risposte approvate senza duplicarle nel corpo.