Single Page

Will­kom­men auf die­ser Mus­ter­sei­te. / Wel­co­me to this refe­rence page.

Sie zeigt alle wich­ti­gen Typo­gra­fie-Ele­men­te des The­mes, inklu­si­ve aller Über­schrifts­ebe­nen von H2 bis H6.
It shows all important typo­gra­phy ele­ments of the the­me, inclu­ding all hea­ding levels from H2 to H6.

Jeder Abschnitt ent­hält erklä­ren­den Text, damit du die Abstän­de vor und nach den Ele­men­ten rea­lis­tisch beur­tei­len kannst.
Each sec­tion con­ta­ins expl­ana­to­ry text so you can rea­li­sti­cal­ly assess the spa­cing befo­re and after each ele­ment.

Außer­dem dient die­se Sei­te dazu, die Dar­stel­lung des Sei­ten-Tem­pla­tes page.html im Front­end zu über­prü­fen.
This page is also used to veri­fy how the page.html tem­p­la­te is ren­de­red in the front end.

H2 — Hauptabschnitt / Main Section

Dies ist ein Bei­spiel für eine H2. / This is an exam­p­le of an H2.
Sie struk­tu­riert die Sei­te in gro­ße Berei­che. / It struc­tures the page into major sec­tions.
Hier kannst du sehen, wie sich der Abstand zwi­schen Sei­ten-Titel (H1) und der ers­ten Inhalts­über­schrift ver­hält.
Here you can see how the spa­cing bet­ween the page title (H1) and the first con­tent hea­ding beha­ves.

H3 — Unterabschnitt / Subsection

Eine H3 dient als Unter­glie­de­rung von H2-The­men. / An H3 ser­ves as a sub­di­vi­si­on of H2 topics.
Du erkennst hier gut, wie die Typo-Hier­ar­chie wirkt und ob der Abstand zu H2 har­mo­nisch ist.
You can cle­ar­ly see how the typo­gra­phic hier­ar­chy works and whe­ther the spa­cing to H2 is har­mo­nious.

Noch ein kur­zer Satz, um die Zei­len­hö­he zu prü­fen. / Ano­ther short sen­tence to test line height.

H4 — Weitere Detailebene / Additional Detail Level

H4 wird sel­te­ner ver­wen­det, aber ist wich­tig für kom­ple­xe­re Inhal­te.
H4 is used less often, but is important for more com­plex con­tent.

Hier kannst du sehen, ob der opti­sche Abstand nach oben und unten gut aus­ba­lan­ciert ist.
Here you can see whe­ther the ver­ti­cal spa­cing abo­ve and below is well balan­ced.

Wei­te­re Bei­spiel­zei­le zur Les­bar­keit. / Ano­ther exam­p­le line to test rea­da­bili­ty.

H5 — Kleine Zwischenüberschrift / Small Subheading

H5 eig­net sich für klei­ne­re the­ma­ti­sche Hin­wei­se oder sehr fei­ne Struk­tu­rie­rung.
H5 is sui­ta­ble for smal­ler notes or very fine struc­tu­ring.

Die gerin­ge Schrift­grö­ße zeigt dir, wie gut dein The­me klei­ne Ebe­nen les­bar abbil­det.
The smal­ler font size shows how well your the­me ren­ders small levels in a rea­da­ble way.

Ein zwei­ter Satz, um den Block rea­lis­ti­scher zu machen.
A second sen­tence to make the block more rea­li­stic.

H6 — Feinste Ebene / Technische Hinweise / Finest Level / Technical Notes

H6 wird meist nur für sehr klei­ne Hin­wei­se, Meta­da­ten oder tech­ni­sche Beschrif­tun­gen ver­wen­det.
H6 is usual­ly used only for very small notes, meta­da­ta or tech­ni­cal labels.

Hier ist beson­ders wich­tig: Ist die Zei­len­hö­he noch les­bar? Wie nah sitzt der Text anschlie­ßend?
Here it is espe­ci­al­ly important: Is the line height still rea­da­ble? How clo­se does the fol­lo­wing text sit?

Fließtext / langer Absatz / Long Paragraph

Die­ser län­ge­re Absatz dient dazu, Zei­len­län­ge, Zei­len­hö­he und Text­ab­stän­de im rea­len Lese­fluss zu über­prü­fen.
This lon­ger para­graph is used to check line length, line height and spa­cing in a real rea­ding flow.

Lorem ipsum dolor sit amet, con­sec­te­tur adi­pi­scing elit. Curab­i­tur biben­dum jus­to urna, vitae dig­nis­sim est ali­quet nec.
Ves­ti­bu­lum ante ipsum pri­mis in fau­ci­bus orci luc­tus et ultri­ces posue­re cubi­lia curae; Pel­len­tes­que habi­tant mor­bi tris­tique senec­tus et netus.

Noch ein zwei­ter Absatz, um den ver­ti­ka­len Abstand zwi­schen zwei Text­blö­cken zu prü­fen.
A second para­graph to check the ver­ti­cal spa­cing bet­ween two blocks of text.

Absätze & Formatierungen / Paragraphs & Formatting

Dies ist ein nor­ma­ler Absatz. / This is a nor­mal para­graph.

Fett / Bold
Kur­siv / Ita­lic
Fett & kur­siv / Bold & ita­lic
Durch­ge­stri­chen / Strik­eth­rough

Inline-Code / Inline code

Blockquote / Zitatblock

block­quo­te:

Das ist ein Zitat­block mit meh­re­ren Zei­len.
This is a quo­te block with mul­ti­ple lines.
So kannst du sehen, wie Quo­tes ger­en­dert wer­den.
This allows you to see how quo­tes are ren­de­red.

Listen / Lists

Ungeordnete Liste / Unordered List

  • Punkt 1 / Point 1
  • Punkt 2 / Point 2
    • Unter­punkt 2.1 / Subi­tem 2.1
    • Unter­punkt 2.2 / Subi­tem 2.2
  • Punkt 3 / Point 3

Geordnete Liste / Ordered List

  1. Ers­ter Schritt / First step
  2. Zwei­ter Schritt / Second step
  3. Drit­ter Schritt / Third step

Links & Bilder / Links & Images

Link / Link
ibp.Magazin GLÜCKAUF

Bild (Bei­spiel) / Image (exam­p­le)
Bei­spiel­bild / Exam­p­le image

(Hier kann ein ech­tes Bild per Edi­tor ein­ge­fügt wer­den.)
(You can insert a real image here via the edi­tor.)

Codeblock / Code Block

<div class="example">
  <p>Beispiel HTML Codeblock</p>
</div>
.example {
  color: #333;
  padding: 10px;
}
console.log("Markdown Testseite");

Tabellen / Tables

Spal­te A Spal­te B Spal­te C
Wert 1 Wert 2 Wert 3
A B C
123 456 789

Horizontale Linien / Horizontal Rules

Noch eine. / Ano­ther one.

Checkboxen / Checkboxes

  • [ ] Offe­ne Auf­ga­be / Open task
  • [x] Erle­digt / Com­ple­ted
  • [ ] Noch zu tun / To do

Inline-Elemente / Inline Elements

H₂O — Sub­script
X³ — Super­script

Trennende Info-Boxen (wenn dein Theme das unterstützt) / Info Boxes (if supported by your theme)

Hin­weis: Man­che The­mes sty­len Zita­te wie Info­bo­xen.
Note: Some the­mes style quo­te blocks like info boxes.

Hin­weis / Note: Dies ist ein Bei­spiel für eine als Info­box ver­wen­de­te Zitat­dar­stel­lung.
This is an exam­p­le of a quo­te block used as an info box.

Emoji-Test / Emoji Test

⚖️ Die ein­zig funk­tio­nie­ren­den Emo­jis / The only relia­bly working emo­jis

⚖️ ⚡ ✨ ⭐ ✔️ ❌ ⚠️ ❗ ❓
⏰ ⏳ ⏱️ ⏲️ ⏸️ ⏹️ ⏺️
✉️ ☎️ ✏️ ✒️ ▶️ ⏭️ ⏮️