Melding: Twee Kolommen — Regels en Voorbeelden
Gebruik een twee-koloms melding om twee gerelateerde mededelingen helder te presenteren, het contrast op mobiel te behouden en valse symmetrie in richtlijnen en voorwaarden te voorkomen.
Een twee-koloms melding plaatst twee korte, gelabelde mededelingen onder één gedeeld onderwerp. De mededelingen kunnen handelingen contrasteren, twee voorwaarden uitleggen of gerelateerde toestanden onderscheiden, maar elk moet nauwkeurig en nuttig blijven wanneer het afzonderlijk wordt gelezen.
Kies de instructie voor uw publicatiestatus
Dit weergegeven element werkt omdat “Conceptpagina” en “Gepubliceerde pagina” echte condities zijn, geen decoratieve koppen. De gedeelde titel definieert de beslissing, elke mededeling geeft een volledige instructie, en geen van beide vraagt de lezer om betekenis af te leiden uit kleur of horizontale positie.
Waarom dit element belangrijk is
Lezers komen vaak richtlijnen tegen terwijl ze scannen op de conditie die op hen van toepassing is. Een lange alinea die zegt “concepten kunnen gelabelde voorbeelden bevatten, terwijl gepubliceerde pagina’s geverifieerde waarden vereisen” dwingt de lezer om één clausule in het geheugen te houden terwijl hij de andere toetst. Twee afgebakende mededelingen verminderen dat werk. De labels tonen eerst de vertakking, zodat een lezer de relevante conditie kan identificeren en vervolgens de bijbehorende instructie kan lezen.
Het psychologische voordeel is selectieve aandacht. Mensen hebben niet altijd beide boodschappen even hard nodig; ze hebben vertrouwen nodig dat ze de juiste hebben opgemerkt. Een gedeelde titel stelt de vraag vast, terwijl duidelijke labels de beschikbare toestanden zichtbaar maken. Zij-aan-zij-presentatie maakt ook een betekenisvol contrast duidelijk zonder het te overdrijven als winnaar en verliezer.
Dat voordeel verdwijnt wanneer de auteur valse symmetrie forceert. Valse symmetrie treedt op wanneer de lay-out suggereert dat twee ideeën gelijke reikwijdte, belangrijkheid of geldigheid hebben, ook al doet de inhoud dat niet. Een herinnering van één zin naast een veiligheidsprocedure van zes stappen is geen paar. Dat is ook een vereiste juridische beperking naast een optionele productiviteitstip niet. Kolommen van gelijke breedte kunnen ongelijke boodschappen uitwisselbaar laten lijken, wat precies het verkeerde signaal is.
Machine-extraheerbaarheid is het vermogen van software om inhoud te isoleren terwijl de relaties die het accuraat maken behouden blijven. Een getypeerde twee-koloms melding legt één bovenliggend onderwerp en twee gelabelde kindmededelingen bloot. Zoeksystemen en AI-agenten kunnen “Voor een gepubliceerde pagina, gebruik geverifieerde waarden met een bron en een gecontroleerde datum” herstellen zonder te raden welke kop bij welke zin hoort. Duidelijke labels, broneenvolgorde en zelfstandige teksten overleven responsieve stapeling en tekst-only extractie.
Volg de schrijfregels voor elementen voordat u dit component kiest. Doel heeft voorrang op uiterlijk. Een ernstig risico blijft een waarschuwingskader , een gedrag-voor-gedrag-correctie blijft een do’s-and-don’ts-blok , en twee feiten worden geen meldingen alleen omdat een ontwerp ze in kolommen kan plaatsen.
Wanneer gebruiken
Gebruik dit element wanneer één gedeeld onderwerp precies twee korte mededelingen heeft en het tegelijk zien van beide de lezer helpt classificeren, vergelijken of verwarring voorkomen. Geschikte relaties zijn onder meer:
- Twee condities: ingelogd versus uitgelogd, concept versus gepubliceerd, vóór migratie versus na migratie.
- Twee doelgroepen: accounteigenaar versus uitgenodigde gebruiker, zolang beide begeleiding krijgen over dezelfde gebeurtenis.
- Aanbevolen en afgeraden gedrag: alleen als elke kant een korte mededeling is in plaats van een lijst met overeenkomende gedragingen.
- Beschikbare en niet-beschikbare toestanden: wanneer de labels de condities noemen die elke toestand produceren.
- Huidig en toekomstig gedrag: wanneer datums of versiegrenzen expliciet zijn.
Al deze tests moeten slagen:
- Eén kop kan beide mededelingen nauwkeurig introduceren.
- Er bestaan precies twee condities of boodschappen; de bron verbergt geen derde geval.
- Elke mededeling heeft een specifiek label en een volledige consequentie of handeling.
- Het paar kan in broneenvolgorde worden begrepen op een smal scherm.
- Geen van beide mededelingen vereist een geneste procedure, tabel, formulier of lange kwalificatie.
Bijna-raakgevallen onthullen misbruik. Gebruik gewoon proza wanneer de tweede uitspraak slechts de eerste voortzet. Gebruik een vergelijkingstabel wanneer lezers meerdere criteria moeten beoordelen. Gebruik een beslisboom wanneer meer dan twee condities vertakken of wanneer het ene antwoord tot een volgende vraag leidt. Gebruik een zelfstandige waarschuwing wanneer het missen van de boodschap schade, gegevensverlies, juridische blootstelling of een onomkeerbare handeling kan veroorzaken. Gebruik do’s-and-don’ts wanneer meerdere verkeerde gedragingen elk een bijbehorende correctie nodig hebben.
Verzin geen tegenwicht. Als de eerlijke instructie is “Maak een back-up van de database vóór migratie,” creëert het toevoegen van “Na migratie: blijf werken” symmetrie maar geen waarde. Splits evenmin één mededeling op in “Belangrijk” en “Ook belangrijk.” Labels moeten echte condities, toestanden, doelgroepen of posities benoemen.
Waar plaatsen
Plaats het element onmiddellijk na de alinea die de gedeelde situatie definieert. Lezers moeten weten welke beslissing of toestand de mededelingen kwalificeren voordat ze de vertakkingen tegenkomen. Wanneer het paar aan een handeling voorafgaat, plaats het dan vóór de eerste stap die gegevens wijzigt of de lezer aan een keuze bindt.
Exacte positie-regels zijn:
- Plaats een twee-conditie-paar na vereisten en vóór conditie-specifieke instructies.
- Plaats een voor-handeling-contrast vóór het besturingselement, commando, download of stap dat het kwalificeert.
- Plaats een resultaat-toestand-paar nadat het resultaat is gedefinieerd en vóór probleemoplossingsdetails.
- Houd bewijs of een bron binnen de relevante mededeling wanneer het alleen die mededeling ondersteunt; plaats gedeeld bewijs onmiddellijk na het complete paar.
- Gebruik in herhaalde documentsecties dezelfde broneenvolgorde zodat terugkerende toestanden niet van positie wisselen.
Het element mag niet naast een andere twee-koloms component, vergelijkingstabel, tabbladbesturing, prijsrooster of gesplitste call-to-action staan. Aangrenzende roosters maken grenzen dubbelzinnig en kunnen een vierrichtingskeuze impliceren. Het mag een bewering niet scheiden van de bijbehorende bron, een stap niet van de vereiste waarschuwing, of een formulierbesturing niet van het label. Plaats het niet binnen een genummerde stap: de geneste vertakkingen kunnen volgorde en verantwoordelijkheid onduidelijk maken.
Plaats nooit een ernstige waarschuwing in de ene kolom naast routineus advies in de andere. De gelijke geometrie vermindert de dominantie van de waarschuwing en suggereert dat lezers tussen de twee kunnen kiezen. Promoot het risico naar een zelfstandige waarschuwing vóór de relevante handeling en gebruik dit element later alleen als twee veilige condities nog verduidelijking nodig hebben.
Anatomie
- Gedeelde kop: benoemt de ene situatie of beslissing die door beide meldingen wordt beheerst.
- Meldingscontainer: groepeert het paar als één redactioneel element zonder te impliceren dat het een enkelvoudige waarschuwing is.
- Meldingslabel: benoemt een conditie, toestand, doelgroep of gedrag in 2–6 woorden.
- Meldingstekst: vermeldt het relevante feit, de consequentie en de volgende handeling in die volgorde wanneer alle drie nodig zijn.
- Optioneel pictogram: versterkt een zichtbaar tekstlabel; het draagt nooit het onderscheid alleen.
- Optionele bronnotitie: ondersteunt een veranderende, gereguleerde of extern gedefinieerde bewering binnen de mededeling die het kwalificeert.
- Broneenvolgorde: bepaalt de volgorde voor schermlezer, kopie en mobiel; visuele opmaak mag deze niet omkeren.
De auteur levert de gedeelde kop, twee labels, twee teksten, toon en eventuele bronnen. De renderer levert het responsieve raster, de witruimte, visuele nadruk, semantische container en decoratieve pictogrambehandeling.
Ontwerpvoorbeelden
Dit zijn de volledig ondersteunde varianten. Varianten veranderen labels en nadruk, niet het twee-mededelingen-datamodel.
Contrasterende handelingen
Gebruik voor één aanbevolen en één afgeraden handeling wanneer er aan elke kant slechts één boodschap is. Vermeld de handeling en de reden; breid deze variant niet uit tot overeenkomende lijsten.
Conditionele toestanden
Gebruik wanneer de juiste instructie afhangt van een elkaar uitsluitende conditie zoals “Bestaand account” en “Nieuw account.” Benoem de conditie in elk label en zet de meest voorkomende of vereiste toestand eerst.
Gepaarde verduidelijkingen
Gebruik wanneer twee gerelateerde feiten verschillende misverstanden voorkomen maar geen tegenstellingen zijn. Pas neutrale opmaak toe op beide, zodat het ontwerp geen goedkeuring, ernst of voorkeur suggereert.
Compact statuspaar
Gebruik voor korte statusgevolgen nadat de toestanden al zijn uitgelegd. Elke tekst is één zin. Verwijder geen labels of reduceer de teksten niet tot onverklaarde waarden.
Gestapeld mobiel paar
Alle varianten stapelen bij smalle breedtes. Houd de eerste mededeling onmiddellijk vóór de tweede en behoud de gedeelde kop. Creëer geen veeginteractie of tabbladen, omdat het verbergen van een mededeling het doel van het element tenietdoet.
Parameters
“Bron” identificeert waar een adapter elke waarde verkrijgt. De body-mapping slaat doelbewust twee volledige meldingsrecords op in plaats van twee visueel gepositioneerde kolommen.
| Naam | Type | Vereist | Min/max | Standaard | Bron |
|---|---|---|---|---|---|
| title | Platte string | Ja | 3–12 woorden; 100 tekens | Geen | Eerste kop in body |
| variant | Enum | Nee | contrast, conditional, clarification of compact | clarification | Attribuut |
| notice | Herhaald record | Ja | Precies 2 | Geen | Genest body-item |
| label | Platte string | Ja per melding | 2–6 woorden; 50 tekens | Geen | Eerste kop in meldingstekst |
| content | Beperkte rijke tekst | Ja per melding | 1–2 alinea's; 25–80 woorden aanbevolen, 120 maximum | Geen | Meldingstekst na eerste kop |
| tone | Enum | Nee | neutral, positive, caution of negative | neutral | Meldingsattribuut |
| icon | Geregistreerde iconsleutel | Nee | Eén decoratief pictogram per melding | Geen | Meldingsattribuut |
| source | Platte tekst met optionele link | Conditioneel | Eén beknopte bronnotitie per melding | Geen | Einde van meldingstekst |
De eerste kop van de bovenliggende body wordt toegewezen aan title. Elk genest item wijst de eerste kop toe aan label en alles daarna aan content; meldingsattributen bevatten tone en icon. De renderer moet één, drie of lege meldingsitems afwijzen in plaats van stilzwijgend een kolom in te vullen of weg te laten.
Syntax en codevoorbeelden
Alle indelingen behouden dezelfde titel, meldingsvolgorde, labels, teksten, tonen en bronnen. “Kolom één” en “kolom twee” zijn presentatietermen, geen veldnamen.
Draagbare Markdown-richtlijn
:::notification-two-column{variant=conditional}
## Kies de instructie voor uw publicatiestatus
::notice{tone=neutral icon="draft"}
### Conceptpagina
Gebruik voorbeeldwaarden alleen wanneer ze zichtbaar als voorbeelden zijn gelabeld. Verwijder of vervang elk voorbeeld vóór publicatie.
::
::notice{tone=caution icon="publish"}
### Gepubliceerde pagina
Gebruik geverifieerde waarden met een bron en een gecontroleerde datum. Als verificatie onvolledig is, onthoud dan de bewering.
::
:::
Dit element overschrijft de generieke geneste itemnaam met notice omdat de records meldingsspecifiek toongedrag hebben. De eerste bovenliggende kop levert de gedeelde titel; de eerste kop van elke melding levert het label.
Hugo shortcode
Geen huidige productie-shortcode implementeert dit exacte gepaarde-meldingen-contract. Totdat een adapter bestaat, gebruik semantische HTML zoals het weergegeven voorbeeld. De beoogde Hugo-notatie is gedocumenteerd als:
{{< notification-two-column variant="conditional" >}}
## Kies de instructie voor uw publicatiestatus
{{< notification tone="neutral" icon="draft" >}}
### Conceptpagina
Gebruik alleen gelabelde voorbeeldwaarden en verwijder ze vóór publicatie.
{{< /notification >}}
{{< notification tone="caution" icon="publish" >}}
### Gepubliceerde pagina
Gebruik geverifieerde waarden met een bron en een gecontroleerde datum.
{{< /notification >}}
{{< /notification-two-column >}}
De schuine-streep-commentvorm voorkomt dat dit specificatievoorbeeld een shortcode aanroept die niet bestaat. Een toekomstige adapter moet precies twee kindmeldingen valideren en deze in broneenvolgorde weergeven.
WordPress-blok
<!-- wp:amicited/notification-two-column {"variant":"conditional"} -->
<h2>Kies de instructie voor uw publicatiestatus</h2>
<!-- wp:amicited/notification {"tone":"neutral","icon":"draft"} -->
<h3>Conceptpagina</h3>
<p>Gebruik alleen gelabelde voorbeeldwaarden en verwijder ze vóór publicatie.</p>
<!-- /wp:amicited/notification -->
<!-- wp:amicited/notification {"tone":"caution","icon":"publish"} -->
<h3>Gepubliceerde pagina</h3>
<p>Gebruik geverifieerde waarden met een bron en een gecontroleerde datum.</p>
<!-- /wp:amicited/notification -->
<!-- /wp:amicited/notification-two-column -->
Een WordPress-editor moet twee vaste meldingssleuven tonen, herschikking toestaan en publicatie voorkomen wanneer het label of de tekst leeg is. Het mag auteurs niet toestaan een derde melding toe te voegen alleen omdat het rasterblok meer kolommen ondersteunt.
Voorbeelden
Goed: twee echte condities met volledige handelingen
Vóór het importeren
Download de huidige gegevens en noteer de exporttijd. De kopie geeft u een herstelpunt als veldtoewijzing een onverwacht resultaat oplevert.Na het importeren
Vergelijk het geïmporteerde aantal gegevens met het bronaantal en inspecteer vervolgens ten minste één record dat elk toegewezen veld bevat. Aantallen detecteren weglatingen; de volledige record detecteert verschoven waarden.
Dit paar heeft één onderwerp—veilige importverificatie—en een echte tijdsgrens. Elke melding benoemt een handeling en legt uit welk falen het opvangt. De tweede is langer omdat deze twee gerelateerde controles bevat, maar beide zijden dragen vergelijkbare verantwoordelijkheid en blijven begrijpelijk wanneer gestapeld.
Slecht: valse symmetrie die een risico degradeert
Handige tip
Hernoem de export zodat deze later makkelijker te vinden is.Belangrijk
Importeren met “Alles vervangen” verwijdert permanent bestaande gegevens en kan niet ongedaan worden gemaakt. Maak een back-up van de database, bevestig het doel, verkrijg goedkeuring en plan downtime in voordat u doorgaat.
De eerste melding is optioneel huishoudelijk werk; de tweede beschrijft onomkeerbaar gegevensverlies en meerdere vereisten. Door ze in gelijke kolommen te plaatsen, wordt een gelijk gewicht gesuggereerd en lijkt de kritieke boodschap een van twee alternatieven. Verplaats de gegevensverliesmelding naar een zelfstandige waarschuwing vóór het besturingselement. Houd de bestandsnaamsuggestie als gewoon ondersteunend proza.
Schema-opmaak en toegankelijkheid
Een twee-koloms melding heeft geen toegewezen Schema.org-type. De inhoud blijft binnen de omvattende Article, TechArticle of WebPage. Stuur geen ItemList, HowToStep, Question of Answer alleen omdat er twee afgebakende records bestaan. Als een melding inhoud bevat die onafhankelijk in aanmerking komt voor gestructureerde gegevens, bepalen de schemaregels van het omvattende berichttype de toewijzing; dit element voegt zelf niets toe.
Gebruik één gelabelde section wanneer het paar bij de hoofdtekst hoort, of een gelabelde aside wanneer beide meldingen complementair zijn. Elk kind mag een aside of section zijn met een echte kop op het juiste documentniveau. Gebruik geen ARIA alert of alertdialog: die rollen kondigen dynamische, tijdsgevoelige wijzigingen aan en zijn ongeschikt voor statische redactionele richtlijnen.
De toegankelijke naam komt van de zichtbare gedeelde kop via native koppenstructuur of aria-labelledby. Elk meldingslabel moet tekst zijn. Kleur, randstijl, positie en pictogrammen kunnen de toon versterken maar kunnen deze niet definiëren. Als een pictogram decoratief is, verberg het dan voor ondersteunende technologie; als het informatie communiceert die niet in het label staat, herschrijf dan het label in plaats van te vertrouwen op alternatieve tekst om het ontwerp te repareren.
DOM-volgorde bepaalt de betekenis. Schermlezers en mobiele lay-outs moeten eerst de ene melding en dan de andere tegenkomen. Keer de visuele volgorde niet om met CSS. Bij 200% tekstzoom en smalle breedtes moeten meldingen stapelen zonder afknippen of horizontaal paginascrollen. Links hebben beschrijvende labels nodig en meerdere links mogen niet worden samengeperst tot een ongelabelde rij pictogrammen.
Schrijfregels
Schrijf de relatie voordat u de meldingen schrijft: “De lezer heeft twee boodschappen nodig omdat de juiste richtlijn verandert door __.” Als het gat niet kan worden gevuld met een concrete conditie, toestand, doelgroep, tijd of gedragscontrast, gebruik dan proza.
- Gebruik precies twee meldingen onder één gedeelde titel.
- Houd de titel op 3–12 woorden en elk label op 2–6 woorden.
- Streef naar 25–80 woorden per tekst; 120 woorden is een absoluut maximum.
- Gebruik één of twee korte alinea’s per melding en niet meer dan één korte inline-link.
- Zet het feit of de conditie eerst, de consequentie als tweede en de handeling als laatste wanneer alle aanwezig zijn.
- Gebruik parallelle labelgrammatica: “Vóór lancering / Na lancering,” niet “Vóór lancering / Wat beheerders later moeten doen.”
- Benoem condities direct. Schrijf nooit “links,” “rechts,” “de andere optie” of “het kader hierboven.”
- Stem de toon af op het bewijs. Neutrale gepaarde feiten mogen geen groene en rode behandeling krijgen.
- Laat veranderende beweringen vergezeld gaan van een datum, versie, plan, rechtsgebied of bron, al naargelang van toepassing.
Vergelijkbaar gewicht betekent dat beide boodschappen hetzelfde moment in de stroom van de lezer verdienen. Het vereist geen identieke zins- of tekentellingen. Vul een korte waarheid niet aan om bij een langere te passen. Als de ene tekst de andere met meer dan ongeveer twee tegen één overtreft, test dan of de grotere melding een aparte sectie nodig heeft of dat de kleinere melding een valse tegenhanger is.
Plaats nooit een meerstappenprocedure, tabel, formulier, prijskaart, getuigenis, promotionele call-to-action, lang citaat, codevoorbeeld, video of genest component in een melding. Gebruik het paar nooit om juridische, medische, financiële, privacy-, beveiligings- of destructieve-handelingsrichtlijnen te verzachten. Impliceer niet dat twee condities uitputtend zijn, tenzij de inhoudseigenaar heeft geverifieerd dat er geen derde toestand bestaat.
Berichttypen die het gebruiken
De postTypes frontmatter-array is de bron voor deze tabel. Opname betekent dat het element beschikbaar is voor een echt twee-meldingengeval, niet verplicht op elke pagina van dat type.
| Berichttype | Typisch gebruik | Aanbevolen positie | Veelvoorkomend misbruik |
|---|---|---|---|
| How-to-gids | Twee condities die de volgende handeling veranderen | Na vereisten en vóór de getroffen stap | Opeenvolgende stappen verbergen in parallelle meldingen |
| Probleemoplossingsgids | Twee waargenomen toestanden met verschillende volgende controles | Nadat het symptoom is bevestigd | Het paar gebruiken wanneer drie of meer oorzaken nog mogelijk zijn |
| Documentatieartikel | Bestaande-gebruiker- en nieuwe-gebruiker-instructies voor één functie | Onmiddellijk vóór configuratiedetails | Routinehulp paren met een waarschuwing voor destructieve handelingen |
| Beleidspagina | Binnen-reikwijdte- en buiten-reikwijdte-condities met gelijkwaardige uitleg | Nadat reikwijdte is gedefinieerd | Een bindende vereiste laten lijken op een optionele zijde |
| Standaard- of regelgevingspagina | Twee toepasbaarheidstoestanden of twee verantwoordelijke partijen | Nadat de beherende term en het rechtsgebied zijn genoemd | Uitzonderingen of juridische kwalificaties samendrukken in een klein kader |
| A vs B-vergelijking | Eén korte contextuele melding voor elke optie | Na de vergelijkingsreikwijdte, vóór bewijstabellen | Een eerlijke criterium-voor-criterium-vergelijking vervangen door marketingsamenvattingen |
QA-checklist
- Gedeeld onderwerp: Eén accurate titel beheerst beide meldingen zonder de reikwijdte te overspannen.
- Precies twee meldingen: De bron bevat twee volledige records en geen geïmpliceerde derde toestand.
- Echte relatie: Labels benoemen een betekenisvol contrast, conditie, doelgroep, status of tijdsgrens.
- Onafhankelijke betekenis: Elke melding blijft duidelijk wanneer geëxtraheerd met de gedeelde titel.
- Geen valse symmetrie: Beide boodschappen verdienen vergelijkbare nadruk; geen van beide is opvulling of een gedegradeerde kritieke waarschuwing.
- Correcte plaatsing: Het paar volgt op de context en gaat vooraf aan de handeling of het detail dat het kwalificeert.
- Veilige buren: Het staat niet naast een andere gesplitste lay-out, tabel, tabbladbesturing of twee-koloms CTA.
- Nuttige labels: Labels gebruiken parallelle grammatica en zijn nooit afhankelijk van links/rechts-positie of kleur.
- Lengtebeheersing: Teksten blijven binnen één of twee alinea’s en niet meer dan 120 woorden elk.
- Inhoudsbeperking: Geen geneste procedure, tabel, formulier, media, promotie of complex component verschijnt erin.
- Responsieve volgorde: Mobiele-, toetsenbord-, schermlezer- en gekopieerde-tekstvolgorde komen overeen met de auteursvolgorde.
- Toegankelijke semantiek: Een zichtbare kop labelt de ouder; kindlabels zijn koppen; statische inhoud gebruikt geen alert-rollen.
- Toonintegriteit: Opmaak weerspiegelt de werkelijke betekenis en verandert neutrale feiten niet in goed/slecht-oordelen.
- Notatiegelijkheid: Markdown, Hugo en WordPress behouden dezelfde titel, labels, teksten, attributen en volgorde.
- Schemabeperking: Het element creëert geen niet-ondersteunde gestructureerde gegevens.
Wijs het element af als de controles voor gedeeld onderwerp, echte relatie of valse symmetrie falen. Dat zijn redactionele gebreken die een renderer niet kan oplossen. Herschrijf de inhoud als proza, aparte secties, een zelfstandige waarschuwing of een ander doelgericht element voordat u de presentatie aanpast.
FAQ
De gestructureerde FAQ in frontmatter behandelt de implementatiebeslissingen die het meest waarschijnlijk verkeerd worden begrepen: de meldingen hoeven geen tegenstellingen of identieke lengtes te zijn, mobiele volgorde volgt broneenvolgorde, ernstige risico’s blijven zelfstandige waarschuwingen en het element creëert geen eigen schema-opmaak.
Meer tutorials in deze sectie
Klaar om het in de praktijk te brengen?
Gratis check · 7 dagen proefperiode · geen creditcard nodig