Infobox: 2 colonne — Formato, regole ed esempi

Un infobox a due colonne suddivide un’idea in esattamente due punti paralleli, in modo che il lettore possa comprendere la relazione a colpo d’occhio. Usalo quando la coppia è più utile affiancata che nascosta in un paragrafo: due responsabilità, due fasi, due prospettive o due parti complementari di un’unica risposta.

L’esempio visualizzato è un unico infobox, un titolo condiviso ed esattamente due elementi. Entrambi gli elementi rispondono allo stesso tipo di domanda con profondità comparabile. L’elemento non sostiene che le due esigenze siano opposte; mostra che un brief utile deve tenere conto di entrambe.

Perché questo elemento è importante

La prosa densa costringe i lettori a ricostruire le relazioni. In una frase come «Un brief di contenuti deve servire il lettore risolvendo un’attività e servire l’azienda supportando un’azione qualificata», le due responsabilità esistono, ma i loro confini sono deboli. Un infobox a due colonne rende il soggetto condiviso visibile una volta e assegna a ciascuna responsabilità un’area denominata. I lettori possono scansionare entrambi i titoli, scegliere da dove iniziare e confrontare la quantità e il tipo di dettaglio senza rileggere una frase complessa.

Il beneficio psicologico deriva dal raggruppamento: organizzare le informazioni correlate in unità delimitate. Il titolo condiviso dice al lettore cosa rimane costante, mentre i titoli degli elementi mostrano cosa cambia. Questa gerarchia è particolarmente utile quando nessuno dei due punti deve dominare. La prosa ordinaria dà naturalmente più risalto al primo punto e può far sembrare il secondo un ripensamento; colonne bilanciate segnalano un uguale peso editoriale.

L’estraibilità automatica è la capacità del software di isolare un’unità di contenuto mantenendone il significato. Un infobox tipizzato espone un argomento principale e due elementi figli espliciti. Un sistema di recupero può preservare il titolo condiviso, i titoli degli elementi, il testo del corpo e l’ordine di origine invece di dover indovinare dove finisce una frase e inizia l’altra. Ogni elemento deve comunque essere autonomo: «Il requisito aziendale è l’evidenza che supporta un’azione qualificata» sopravvive all’estrazione, mentre «L’altro lato» no.

La struttura non salva un pensiero debole. Se la fonte contiene un punto sviluppato e una frase aggiunta per simmetria, il renderer si limita a rendere lo squilibrio più evidente. Applica le regole di scrittura degli elementi : scrivi prima l’intero ragionamento, poi scegli questo elemento solo quando l’idea finita ha realmente due parti parallele. Le regole specifiche dell’elemento in questa pagina prevalgono dove definiscono la mappatura esatta degli elementi e i limiti.

Quando usarlo

Usa un infobox a due colonne quando tutte e quattro le condizioni sono vere:

1. C’è un’idea principale chiara che può intitolare l’intero box.
2. L’idea principale si divide naturalmente in esattamente due elementi.
3. Entrambi gli elementi svolgono lo stesso compito informativo, come spiegare una responsabilità, una fase, una prospettiva del pubblico o una dimensione.
4. Ogni elemento può essere compreso in circa 30–90 parole senza una struttura annidata.

Buoni esempi includono «Prima del lancio / Dopo il lancio», «Segnale del lettore / Segnale aziendale», «Cosa cambia / Cosa rimane uguale» e «Responsabilità del proprietario / Responsabilità del revisore». Le etichette dovrebbero rivelare una relazione reale. Se il lettore non riesce a completare la frase «Questi stanno insieme perché…», probabilmente il raggruppamento è puramente decorativo.

I casi di quasi-utilizzo contano perché una disposizione a due colonne può far sembrare intenzionale quasi qualsiasi coppia. Non usarlo per un’unica idea suddivisa in un punto di interruzione arbitrario. Non trasformare un elenco di quattro elementi in due lunghe colonne solo per risparmiare spazio verticale; l’ordine di origine e la scansione diventano ambigui. Non usarlo per un confronto dettagliato di prodotti con più criteri, perché una tabella di confronto assegna a ogni criterio una riga esplicita. Non usarlo per pro e contro quando il numero di punti è diverso o quando i lettori devono valutare diversi compromessi. Non abbinare una definizione a un invito all’azione promozionale: questi blocchi svolgono funzioni diverse e non meritano lo stesso trattamento.

Il segnale di allarme più forte è un’etichetta come «Altro», «Ulteriori informazioni» o «Extra». Queste etichette rivelano che la suddivisione segue lo spazio disponibile piuttosto che il significato. Riporta il contenuto in prosa o trova la distinzione reale prima di usare l’elemento.

Dove posizionarlo

Posiziona l’infobox subito dopo il paragrafo che introduce l’idea condivisa. Il lettore ha bisogno di una frase di contesto prima di incontrare la suddivisione, ma non dovrebbe dover attraversare prove non correlate o un’altra sottosezione per raggiungerla. Dopo il box, prosegui con analisi, esempi o istruzioni che si applicano a entrambi gli elementi.

Può essere posizionato direttamente sotto un H2 quando l’H2 stesso fornisce l’idea principale e l’infobox ha un proprio titolo più specifico. Può anche seguire una breve definizione quando i due elementi spiegano dimensioni di quella definizione. Non deve apparire tra un’affermazione e la sua citazione, tra un passaggio e la condizione necessaria per completarlo, o all’interno di un elemento di un elenco ordinato. Queste posizioni rompono relazioni che dovrebbero rimanere contigue.

Non posizionarlo accanto a un altro infobox a due colonne, tabella di confronto, set di schede o blocco pro-e-contro. Strutture parallele adiacenti costringono il lettore a decidere quale relazione visiva sia importante e possono creare quattro colonne apparenti su schermi larghi. Inserisci prosa esplicativa tra strutture distinte o combina il materiale in un’unica tabella o sezione più adatta. Evita di posizionarlo immediatamente prima o dopo un invito all’azione a due colonne; la geometria identica può far sembrare promozionale una spiegazione editoriale.

Non utilizzare più di un infobox a due colonne in una sezione breve. La ripetizione trasforma un contrasto utile in un elemento di arredo della pagina. Quando un articolo lungo contiene diverse coppie autentiche, separale sotto titoli diversi e verifica che ogni coppia abbia un’idea principale distinta.

Anatomia

L’anatomia contiene una regione principale e due regioni figlie ripetute. Lo screenshot dovrebbe etichettare le parti semantiche, non il padding o i token di colore, in modo che la specifica rimanga utile se il sistema visivo cambia.

1. Confine esterno: Raggruppa il titolo principale ed entrambi gli elementi come un’unica unità editoriale.
2. Titolo condiviso: Nomina l’idea che entrambi gli elementi spiegano. Non è un terzo punto.
3. Titolo e corpo del primo elemento: Presenta il primo membro della coppia in un linguaggio completo ed estraibile.
4. Titolo e corpo del secondo elemento: Risponde allo stesso tipo di domanda con profondità corrispondente.
5. Relazione di layout: Utilizza colonne di uguale larghezza quando lo spazio lo consente e impila l’elemento uno prima dell’elemento due su schermi stretti.

Bordi, sfondo, spazio, raggio, scala tipografica e punto di interruzione appartengono al renderer. Gli autori controllano la gerarchia e l’ordine dei contenuti, non i token visivi.

Esempi di design

C’è un elemento semantico con quattro varianti supportate di contenuto e viewport. Le varianti modificano la gestione del titolo o la presentazione responsive; non modificano mai il requisito di esattamente due elementi.

Variante con titolo predefinito: Preferita per l’uso autonomo. Un titolo condiviso nomina l’idea principale ed entrambi gli elementi figli hanno titoli concisi.

Variante con titolo contestuale: L’H2 immediatamente precedente può fungere da titolo condiviso. Ciò è consentito solo quando nessun paragrafo o componente separa l’H2 dal box e l’infobox ha un nome accessibile derivato da quella intestazione.

Variante compatta: Usala per due brevi definizioni o responsabilità. Ogni corpo forma comunque una frase completa; il layout non diventa una coppia di slogan.

Variante per viewport stretto: Gli elementi si impilano verticalmente. L’ordine rimane significativo senza riferimenti a «sinistra», «destra», «sopra» o «accanto».

Le icone non sono una variante di contenuto. Se il sistema di design aggiunge icone decorative, queste utilizzano testo alternativo vuoto e non sostituiscono i titoli degli elementi. Se ogni elemento necessita di un’immagine informativa, usa un elemento orientato all’immagine invece di espandere questo contratto dell’infobox.

Parametri

Il contratto dei parametri impedisce all’elemento di derivare verso una griglia generica. I valori che descrivono il significato appartengono al contenuto creato dall’autore; il layout responsive rimane nel renderer.

Il titolo è obbligatorio a meno che l’intestazione del documento immediatamente precedente non fornisca lo stesso argomento principale e possa etichettare il contenitore a livello programmatico. I corpi degli elementi consentono enfasi, codice inline e un link utile. Non consentono intestazioni annidate, tabelle, media, accordion, moduli, inviti all’azione o un altro infobox.

Sintassi ed esempi di codice

Tutte e tre le notazioni preservano lo stesso titolo principale, due elementi ordinati, titoli degli elementi e corpi degli elementi. La direttiva Markdown portabile è la fonte canonica. Le forme Hugo e WordPress sono contratti di adattamento; i loro renderer devono produrre HTML semantico equivalente e ordine responsive.

Direttiva Markdown portabile

:::infobox-2-columns
## Un brief di contenuti utile risponde a due domande

::item
### Di cosa ha bisogno il lettore?

Indica la domanda, la decisione o l'attività che la pagina deve risolvere, incluso il contesto che modifica la risposta.
::

::item
### Di cosa ha bisogno l'azienda?

Indica l'azione qualificata che la pagina deve supportare, insieme alle prove necessarie per ottenere quella azione.
::
:::

La prima intestazione principale corrisponde a title. Ogni ::item associa la sua prima intestazione a item.title e il corpo rimanente a item.content. Questa mappatura esatta a due elementi prevale sulla regola generale degli elementi ripetibili nelle regole di base.

Shortcode Hugo

{{< infobox-2-columns title="Un brief di contenuti utile risponde a due domande" >}}
  {{< infobox-item title="Di cosa ha bisogno il lettore?" >}}
  Indica la domanda, la decisione o l'attività che la pagina deve risolvere, incluso il contesto che modifica la risposta.
  {{< /infobox-item >}}
  {{< infobox-item title="Di cosa ha bisogno l'azienda?" >}}
  Indica l'azione qualificata che la pagina deve supportare, insieme alle prove necessarie per ottenere quella azione.
  {{< /infobox-item >}}
{{< /infobox-2-columns >}}

L’adattatore utilizza solo parametri nominati. Deve rifiutare un terzo elemento anziché includerlo silenziosamente e deve preservare l’ordine degli elementi creato dall’autore quando il layout si impila.

Blocco WordPress

<!-- wp:amicited/infobox-2-columns {"title":"Un brief di contenuti utile risponde a due domande"} -->
  <!-- wp:amicited/infobox-item {"title":"Di cosa ha bisogno il lettore?"} -->
  <p>Indica la domanda, la decisione o l'attività che la pagina deve risolvere, incluso il contesto che modifica la risposta.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Di cosa ha bisogno l'azienda?"} -->
  <p>Indica l'azione qualificata che la pagina deve supportare, insieme alle prove necessarie per ottenere quella azione.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-2-columns -->

WordPress dovrebbe esporre due slot fissi per gli elementi anziché un’area «aggiungi blocco» illimitata. Gli editor possono riordinare i due elementi, ma non possono inserire un blocco non correlato tra di loro o aggiungere una terza colonna.

Esempi

Esempio corretto

Funziona perché il titolo condiviso stabilisce un’unica idea, il confine temporale crea una coppia autentica ed entrambe le colonne specificano un lavoro di misurazione comparabile. Ogni elemento rimane significativo quando impilato o estratto indipendentemente.

Esempio errato

Migliora i tuoi contenuti

Scrivi bene: Crea contenuti utili, autorevoli e coinvolgenti che il tuo pubblico amerà e che i motori di ricerca premieranno.

Altre cose: La SEO include anche lavoro tecnico, link, design di conversione, analisi, brand building, distribuzione, manutenzione e molte altre attività importanti.

Non funziona perché la coppia è artificiale. «Scrivi bene» è un’istruzione vaga, «Altre cose» è una categoria generica e il secondo elemento copre molto più ambito del primo. Il box implica concetti uguali e paralleli laddove non esistono. Sostituiscilo con prosa che definisca l’obiettivo di contenuto effettivo, poi usa un elenco o sezioni separate per i diversi flussi di lavoro.

Marcatura schema e accessibilità

Un infobox a due 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 la pagina soddisfa i requisiti per quella marcatura. Non contrassegnare i due elementi come ItemList solo perché sono due; l’elemento rappresenta una relazione, non necessariamente un elenco classificato o completo. Se un elemento contiene indipendentemente un dato utilizzato altrove nei dati strutturati, la politica di schema a livello di pagina governa quel dato.

L’HTML semantico dovrebbe esprimere un contenitore etichettato con due sezioni figlie. Usa aside solo quando la coppia è complementare alla narrazione circostante; usa section quando fa parte dell’argomentazione principale. Assegna al contenitore un nome accessibile attraverso il suo titolo visibile e aria-labelledby. Ogni titolo figlio deve essere una vera intestazione al livello corretto, non testo in grassetto scelto per l’aspetto.

L’ordine di origine è l’ordine di accessibilità. La navigazione tramite tastiera, i lettori schermo, il copia-e-incolla e gli schermi stretti devono incontrare l’elemento uno prima dell’elemento due. Il CSS può creare colonne ma non deve invertirle visivamente. Non fare mai riferimento a «il box di sinistra» o «il box di destra», perché quelle posizioni scompaiono quando gli elementi vengono impilati. Colore, forma dell’icona e sfondo non possono essere l’unico modo per distinguere gli elementi. Il design deve supportare lo zoom del testo senza tagli, scorrimento orizzontale o colonne sovrapposte.

Regole di scrittura

Inizia scrivendo la frase principale: «Questa idea ha due parti: X e Y». Se quella frase è imprecisa, non usare l’elemento. Dai a entrambi i titoli degli elementi la stessa forma grammaticale — due sostantivi, due domande o due espressioni temporali — perché un linguaggio parallelo rende la relazione immediatamente leggibile.

Usa esattamente due elementi. Mantieni ogni titolo tra 2 e 7 parole e ogni corpo tra 30 e 90 parole quando possibile, con un massimo assoluto di 120 parole. Una differenza di una frase è accettabile; un elemento di 35 parole accanto a uno di 110 parole richiede una revisione o una struttura diversa. Ogni corpo dovrebbe rispondere alla stessa domanda implicita e utilizzare una profondità di evidenza comparabile. Profondità corrispondente non significa riempire una risposta breve con contenuti di riempimento.

Usa un linguaggio diretto e neutro. Esprimi la distinzione nei titoli e spiega la sua conseguenza nei corpi. Preferisci «Prima del lancio / Dopo del lancio» a «Primo / Secondo», perché le etichette significative sopravvivono all’estrazione. Evita «o/o» a meno che le scelte non siano realmente esclusive, ed evita «contro» quando gli elementi sono complementari.

Non inserire mai questi elementi all’interno del componente:

• Un terzo elemento, anche se il renderer potrebbe includerlo.
• Una procedura multi-fase, un lungo elenco puntato, una tabella dati, una griglia di prezzi, un modulo, una testimonianza o un banner promozionale.
• Sezioni H2 indipendenti, infobox annidati, schede, accordion, video o gallerie di immagini.
• Testo legale obbligatorio, avvisi di sicurezza, elenchi di fonti o qualifiche che si applicano a una sola frase al di fuori del box.
• Due link non correlati progettati per assomigliare a inviti all’azione concorrenti.

Se uno dei due elementi necessita di sottotitoli o più di due paragrafi, promuovi entrambi gli elementi in sezioni di pagina ordinarie. Se i lettori devono scegliere tra gli elementi, aggiungi criteri decisionali in prosa o usa un elemento di confronto o decisione; la simmetria visiva da sola non spiega una scelta.

Tipi di post che lo utilizzano

Il campo postTypes nei frontmatter è la fonte per questo insieme di utilizzi. Ogni formato elencato ha una relazione naturale in due parti, ma nessuno dovrebbe includere l’elemento per impostazione predefinita quando il contenuto non forma una coppia autentica.

Checklist QA

• Un’idea principale: Il box ha un soggetto condiviso chiaro che spiega perché entrambi gli elementi stanno insieme.
• Esattamente due elementi: L’origine e l’output renderizzato contengono due elementi figli — mai uno, tre o uno spazio vuoto.
• Parallelismo reale: Entrambi gli elementi rispondono allo stesso tipo di domanda e usano titoli con grammatica parallela.
• Profondità corrispondente: Nessun elemento è un contrappeso simbolico o un insieme eterogeneo generico; dettagli ed evidenze sono comparabili.
• Posizionamento utile: Il box segue il suo contesto introduttivo e non separa un’affermazione dalla sua evidenza o un passaggio dal suo requisito.
• Vicini sicuri: Non è adiacente a un’altra griglia parallela, componente di confronto o CTA a due colonne.
• Formulazione estraibile: I titoli principali e degli elementi nominano i loro soggetti e i corpi non dipendono da «sinistra», «destra» o pronomi vicini.
• Ordine responsive: I layout stretti impilano l’elemento uno prima dell’elemento due senza tagli, scorrimento orizzontale o riordino visivo.
• Struttura accessibile: Il contenitore ha un’etichetta programmatica visibile, i titoli figli sono vere intestazioni e colore o icone non veicolano significato da soli.
• Limiti di contenuto: Ogni corpo rimane entro due paragrafi e non contiene componenti complessi annidati, procedure o controlli promozionali.
• Parità di notazione: Markdown portabile, Hugo e WordPress preservano lo stesso titolo, due elementi, corpi e ordine.
• Moderazione schema: Nessuna marcatura di elenco o confronto viene aggiunta a meno che il contenuto della pagina non soddisfi autonomamente i requisiti.

Un revisore dovrebbe rifiutare l’elemento quando uno qualsiasi dei primi quattro controlli fallisce. Questi fallimenti indicano un problema concettuale, non un difetto di stile, e modificare la larghezza o la decorazione non può ripararli.

FAQ

Le voci FAQ nei frontmatter rispondono alle domande ricorrenti di implementazione: il numero di elementi è fissato a due, la profondità conta più della lunghezza identica delle parole, i confronti dettagliati necessitano di una tabella, il mobile preserva l’ordine di origine e l’elemento non genera marcature schema. Mantenere queste risposte nei frontmatter strutturati consente al template dell’academy di visualizzare il trattamento FAQ approvato senza duplicare il contenuto nel corpo.