Bausteine

ui-bib

45 Vorlagen im Minni-Look – zum Kopieren für deine Seiten. Alles passt sich automatisch an Farben, Schriften und den Dunkelmodus an.

  • ElementorWidget „Minni UI-Vorlage“ (Bereich „Minni“) einfügen und die Vorlage auswählen – oder die eigenen Minni-Widgets zum Bearbeiten nutzen.
  • Block-Editor„+“ → Vorlagen → „Minni UI“. Oder Shortcode kopieren und in einen Shortcode-Block setzen.
  • HTML kopierenCode kopieren und in einen HTML-Block bzw. das Elementor-Widget „HTML“ einfügen, dann Texte anpassen.

Typografie

Überschriften, Einleitung, Hervorhebungen, Listen und Zitate im Minni-Stil.

Überschriften

Kleine Überzeile

Überschrift H2 – für Abschnitte

Überschrift H3 – für Unterabschnitte

Überschrift H4 – für kleine Titel

Code ansehen Elementor: Typografie – Überschriften 
<span class="m-kicker">Kleine Überzeile</span>
<h2>Überschrift H2 – für Abschnitte</h2>
<h3>Überschrift H3 – für Unterabschnitte</h3>
<h4>Überschrift H4 – für kleine Titel</h4>

Einleitung & Fließtext

Eine Einleitung ist etwas größer und steht ganz oben – sie macht Lust auf den Rest der Seite.

Normaler Fließtext mit fettem Wort, kursivem Wort, markiertem Text und einem Link. Tastenkürzel: Strg + C.

Kleingedrucktes, z. B. für Hinweise oder Quellen.

Code ansehen Elementor: Typografie – Einleitung & Fließtext 
<p class="m-lead">Eine Einleitung ist etwas größer und steht ganz oben – sie macht Lust auf den Rest der Seite.</p>
<p>Normaler Fließtext mit <strong>fettem Wort</strong>, <em>kursivem Wort</em>, <mark class="m-highlight">markiertem Text</mark> und einem <a href="#">Link</a>. Tastenkürzel: <kbd class="m-kbd">Strg</kbd> + <kbd class="m-kbd">C</kbd>.</p>
<p class="m-small">Kleingedrucktes, z. B. für Hinweise oder Quellen.</p>

Handschrift & Farbverlauf

Schön, dass du da bist!

Überschrift mit Farbverlauf

Code ansehen Elementor: Typografie – Handschrift & Farbverlauf 
<p class="m-hand">Schön, dass du da bist!</p>
<h2 class="m-gradient-text">Überschrift mit Farbverlauf</h2>

Listen mit Herz, Haken & Stern

  • Liste mit kleinen Herzen
  • Perfekt für Lieblingsdinge
  • Liste mit Haken
  • Gut für Vorteile oder To-dos
  • Liste mit Sternen
  • Für Highlights
Code ansehen Elementor: Typografie – Listen mit Herz, Haken & Stern 
<ul class="m-list m-list--hearts">
	<li>Liste mit kleinen Herzen</li>
	<li>Perfekt für Lieblingsdinge</li>
</ul>
<ul class="m-list m-list--check">
	<li>Liste mit Haken</li>
	<li>Gut für Vorteile oder To-dos</li>
</ul>
<ul class="m-list m-list--stars">
	<li>Liste mit Sternen</li>
	<li>Für Highlights</li>
</ul>

Zitat

Gemütlichkeit ist kein Zustand, sondern eine Haltung.

– Minni
Code ansehen Elementor: Typografie – Zitat 
<blockquote class="m-quote">
	<p>Gemütlichkeit ist kein Zustand, sondern eine Haltung.</p>
	<cite>– Minni</cite>
</blockquote>

Buttons

Für Links und Aktionen. Bei einem Link „a“ benutzen, bei einer Aktion auf der Seite „button“.

Varianten

Primär Sanft Umrandet Dezent Dunkel
Code ansehen Elementor: Buttons – Varianten 
<div class="m-btn-group">
	<a class="btn" href="#">Primär <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
	<a class="btn btn--soft" href="#">Sanft</a>
	<a class="btn btn--outline" href="#">Umrandet</a>
	<a class="btn btn--ghost" href="#">Dezent</a>
	<a class="btn btn--dark" href="#">Dunkel</a>
</div>

Shortcode (Texte frei änderbar):

[minni_button url="/blog/" style="primary"]Zum Blog[/minni_button]

Größen & Zustände

Groß Normal Klein
Code ansehen Elementor: Buttons – Größen & Zustände 
<div class="m-btn-group">
	<a class="btn btn--large" href="#">Groß</a>
	<a class="btn" href="#">Normal</a>
	<a class="btn btn--small" href="#">Klein</a>
	<button class="btn" type="button" disabled>Deaktiviert</button>
</div>

Mit Icon & nur Icon

Herunterladen Gefällt mir
Code ansehen Elementor: Buttons – Mit Icon & nur Icon 
<div class="m-btn-group">
	<a class="btn" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7 10.5l5 5 5-5M5 19.5h14"/></svg> Herunterladen</a>
	<a class="btn btn--soft" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21s-7.5-4.6-9.6-9.3C.9 8.3 3 4.5 6.7 4.5c2.1 0 3.6 1.2 4.4 2.5h1.8c.8-1.3 2.3-2.5 4.4-2.5 3.7 0 5.8 3.8 4.3 7.2C19.5 16.4 12 21 12 21Z"/></svg> Gefällt mir</a>
	<button class="btn btn--icon btn--soft" type="button" aria-label="Teilen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15V4M8 8l4-4 4 4M5 13v6h14v-6"/></svg></button>
	<button class="btn btn--icon btn--outline" type="button" aria-label="Bearbeiten"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16Z"/><path d="m13.5 6.5 4 4"/></svg></button>
</div>

Umschalter (Gruppe)

Code ansehen Elementor: Buttons – Umschalter (Gruppe) 
<div class="m-btn-group m-btn-group--joined" role="group" aria-label="Zeitraum">
	<button class="btn btn--small" type="button" aria-pressed="true">Woche</button>
	<button class="btn btn--small" type="button" aria-pressed="false">Monat</button>
	<button class="btn btn--small" type="button" aria-pressed="false">Jahr</button>
</div>

Volle Breite

Jetzt mitmachen
Code ansehen Elementor: Buttons – Volle Breite 
<a class="btn btn--block" href="#">Jetzt mitmachen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>

Badges & Chips

Kleine Etiketten für Kategorien, Status oder Zahlen.

Kategorie-Farben

Games Technik Design Lifestyle Kreativität Alltag
Code ansehen Elementor: Badges & Chips – Kategorie-Farben 
<span class="badge cat-games">Games</span>
<span class="badge cat-technik">Technik</span>
<span class="badge cat-design">Design</span>
<span class="badge cat-lifestyle">Lifestyle</span>
<span class="badge cat-kreativitaet">Kreativität</span>
<span class="badge cat-alltag">Alltag</span>

Shortcode (Texte frei änderbar):

[minni_badge color="games"]Games[/minni_badge]

Status & Stile

Neu Highlight Umrandet Online Bald Ausverkauft Info
Code ansehen Elementor: Badges & Chips – Status & Stile 
<span class="badge badge--soft">Neu</span>
<span class="badge badge--solid">Highlight</span>
<span class="badge badge--outline cat-technik">Umrandet</span>
<span class="badge badge--ok"><span class="m-dot"></span>Online</span>
<span class="badge badge--warn"><span class="m-dot"></span>Bald</span>
<span class="badge badge--err"><span class="m-dot"></span>Ausverkauft</span>
<span class="badge badge--solid badge--info">Info</span>

Zähler

Nachrichten 3
Code ansehen Elementor: Badges & Chips – Zähler 
<a class="btn btn--soft" href="#">Nachrichten <span class="m-count">3</span></a>

Chips (Filter)

#Tipps
Code ansehen Elementor: Badges & Chips – Chips (Filter) 
<div class="m-btn-group">
	<button class="m-chip" type="button" aria-pressed="true">Cozy</button>
	<button class="m-chip" type="button" aria-pressed="false">Pixel-Art</button>
	<button class="m-chip" type="button" aria-pressed="false">Indie</button>
	<a class="m-chip" href="#">#Tipps</a>
</div>

Hinweise (Alerts)

Für Infos, Tipps, Warnungen und Erfolgsmeldungen – optional zum Wegklicken.

Arten

Gut zu wissen

Ein neutraler Hinweis mit Zusatzinfos.

Mein Tipp

Speichere dir die Seite, dann findest du sie schneller wieder.

Geschafft!

Deine Anmeldung ist angekommen.

Achtung

Das Angebot gilt nur noch bis Sonntag.

Danke dir!

Schön, dass du meinen Blog liest.

Code ansehen Elementor: Hinweise (Alerts) – Arten 
<div class="m-alert" role="note"><span class="m-alert__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 7.6v.1"/></svg></span><div class="m-alert__body"><strong class="m-alert__title">Gut zu wissen</strong><p>Ein neutraler Hinweis mit Zusatzinfos.</p></div></div>
<div class="m-alert m-alert--tip" role="note"><span class="m-alert__icon"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.5c.5 4.6 2.4 6.5 7 7-4.6.5-6.5 2.4-7 7-.5-4.6-2.4-6.5-7-7 4.6-.5 6.5-2.4 7-7ZM19 15c.2 1.9 1 2.7 2.9 2.9-1.9.2-2.7 1-2.9 2.9-.2-1.9-1-2.7-2.9-2.9 1.9-.2 2.7-1 2.9-2.9Z"/></svg></span><div class="m-alert__body"><strong class="m-alert__title">Mein Tipp</strong><p>Speichere dir die Seite, dann findest du sie schneller wieder.</p></div></div>
<div class="m-alert m-alert--success" role="status"><span class="m-alert__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></span><div class="m-alert__body"><strong class="m-alert__title">Geschafft!</strong><p>Deine Anmeldung ist angekommen.</p></div></div>
<div class="m-alert m-alert--warning" role="note"><span class="m-alert__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5 2.8 19.5h18.4Z"/><path d="M12 10v4.5M12 17.4v.1"/></svg></span><div class="m-alert__body"><strong class="m-alert__title">Achtung</strong><p>Das Angebot gilt nur noch bis Sonntag.</p></div></div>
<div class="m-alert m-alert--danger" role="alert"><span class="m-alert__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m9 9 6 6M15 9l-6 6"/></svg></span><div class="m-alert__body"><strong class="m-alert__title">Hoppla</strong><p>Da ist etwas schiefgelaufen. Bitte versuch es noch einmal.</p></div></div>
<div class="m-alert m-alert--love" role="note"><span class="m-alert__icon"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21s-7.5-4.6-9.6-9.3C.9 8.3 3 4.5 6.7 4.5c2.1 0 3.6 1.2 4.4 2.5h1.8c.8-1.3 2.3-2.5 4.4-2.5 3.7 0 5.8 3.8 4.3 7.2C19.5 16.4 12 21 12 21Z"/></svg></span><div class="m-alert__body"><strong class="m-alert__title">Danke dir!</strong><p>Schön, dass du meinen Blog liest.</p></div></div>

Shortcode (Texte frei änderbar):

[minni_alert type="tip" title="Mein Tipp"]Text des Hinweises.[/minni_alert]

Zum Wegklicken

Neu im Blog

Ab jetzt gibt es jeden Freitag einen Cozy-Game-Tipp. Mehr erfahren

Code ansehen Elementor: Hinweise (Alerts) – Zum Wegklicken 
<div class="m-alert m-alert--tip" role="note"><span class="m-alert__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15Z"/><path d="M10 20.5a2.2 2.2 0 0 0 4 0"/></svg></span><div class="m-alert__body"><strong class="m-alert__title">Neu im Blog</strong><p>Ab jetzt gibt es jeden Freitag einen Cozy-Game-Tipp. <a href="#">Mehr erfahren</a></p></div><button class="m-alert__close" type="button" aria-label="Hinweis schließen">×</button></div>

Umrandet & mit Seitenstreifen

Umrandeter Hinweis auf weißem Grund.

Hinweis: Hinweis mit farbigem Streifen links, ganz ohne Icon.

Code ansehen Elementor: Hinweise (Alerts) – Umrandet & mit Seitenstreifen 
<div class="m-alert m-alert--outline m-alert--success" role="note"><span class="m-alert__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></span><div class="m-alert__body"><p>Umrandeter Hinweis auf weißem Grund.</p></div></div>
<div class="m-alert m-alert--bar m-alert--warning" role="note"><div class="m-alert__body"><p><strong>Hinweis:</strong> Hinweis mit farbigem Streifen links, ganz ohne Icon.</p></div></div>

Akkordeon

Aufklappbare Abschnitte, z. B. für FAQs. Funktioniert ohne JavaScript.

Als Karten

Wie oft erscheinen neue Beiträge?

Meistens ein- bis zweimal pro Woche – je nachdem, wie viel Zeit der Alltag lässt.

Darf ich deine Bilder verwenden?

Frag mich einfach kurz über das Kontaktformular.

Wie kann ich mit dir zusammenarbeiten?

Schau auf meiner Partner-Seite vorbei.

Code ansehen Elementor: Akkordeon – Als Karten 
<div class="m-accordion">
	<details class="m-accordion__item" open>
		<summary>Wie oft erscheinen neue Beiträge?</summary>
		<div class="m-accordion__body"><p>Meistens ein- bis zweimal pro Woche – je nachdem, wie viel Zeit der Alltag lässt.</p></div>
	</details>
	<details class="m-accordion__item">
		<summary>Darf ich deine Bilder verwenden?</summary>
		<div class="m-accordion__body"><p>Frag mich einfach kurz über das Kontaktformular.</p></div>
	</details>
	<details class="m-accordion__item">
		<summary>Wie kann ich mit dir zusammenarbeiten?</summary>
		<div class="m-accordion__body"><p>Schau auf meiner Partner-Seite vorbei.</p></div>
	</details>
</div>

Shortcode (Texte frei änderbar):

[minni_accordion]
[minni_item title="Frage 1" open="1"]Antwort 1[/minni_item]
[minni_item title="Frage 2"]Antwort 2[/minni_item]
[/minni_accordion]

Flach mit Linien

Erster Punkt

Inhalt des ersten Punkts.

Zweiter Punkt

Inhalt des zweiten Punkts.

Code ansehen Elementor: Akkordeon – Flach mit Linien 
<div class="m-accordion m-accordion--flat">
	<details class="m-accordion__item">
		<summary>Erster Punkt</summary>
		<div class="m-accordion__body"><p>Inhalt des ersten Punkts.</p></div>
	</details>
	<details class="m-accordion__item">
		<summary>Zweiter Punkt</summary>
		<div class="m-accordion__body"><p>Inhalt des zweiten Punkts.</p></div>
	</details>
</div>

Avatar

Profilbilder in verschiedenen Größen, mit Status, Ring oder Initialen.

Größen

Minni Minni Minni Minni Minni
Code ansehen Elementor: Avatar – Größen 
<span class="m-avatar m-avatar--xs"><img src="https://minnii.de/wp-content/themes/minni/assets/img/author.webp" alt="Minni"></span>
<span class="m-avatar m-avatar--sm"><img src="https://minnii.de/wp-content/themes/minni/assets/img/author.webp" alt="Minni"></span>
<span class="m-avatar"><img src="https://minnii.de/wp-content/themes/minni/assets/img/author.webp" alt="Minni"></span>
<span class="m-avatar m-avatar--lg"><img src="https://minnii.de/wp-content/themes/minni/assets/img/author.webp" alt="Minni"></span>
<span class="m-avatar m-avatar--xl m-avatar--ring"><img src="https://minnii.de/wp-content/themes/minni/assets/img/author.webp" alt="Minni"></span>

Status, Initialen, eckig

Minni LK Maskottchen
Code ansehen Elementor: Avatar – Status, Initialen, eckig 
<span class="m-avatar m-avatar--lg"><img src="https://minnii.de/wp-content/themes/minni/assets/img/author.webp" alt="Minni"><span class="m-avatar__status" title="Online"></span></span>
<span class="m-avatar m-avatar--lg" aria-label="Lena Kaiser">LK</span>
<span class="m-avatar m-avatar--lg m-avatar--square"><img src="https://minnii.de/wp-content/themes/minni/assets/img/mascot.webp" alt="Maskottchen"></span>

Gruppe & Person

Minni AB CD +5
MinniBloggerin · Games & Design
Code ansehen Elementor: Avatar – Gruppe & Person 
<div class="m-avatar-group">
	<span class="m-avatar"><img src="https://minnii.de/wp-content/themes/minni/assets/img/author.webp" alt="Minni"></span>
	<span class="m-avatar">AB</span>
	<span class="m-avatar">CD</span>
	<span class="m-avatar">+5</span>
</div>
<div class="m-person">
	<span class="m-avatar m-avatar--ring"><img src="https://minnii.de/wp-content/themes/minni/assets/img/author.webp" alt=""></span>
	<span><span class="m-person__name">Minni</span><span class="m-person__meta">Bloggerin · Games & Design</span></span>
</div>

Breadcrumb

Zeigt, wo man sich auf der Seite befindet.

Standard & als Pille

Code ansehen Elementor: Breadcrumb – Standard & als Pille 
<nav class="m-breadcrumb" aria-label="Brotkrümel">
	<ol><li><a href="/">Home</a></li><li><a href="/blog/">Blog</a></li><li><span aria-current="page">Mein Setup 2026</span></li></ol>
</nav>
<nav class="m-breadcrumb m-breadcrumb--pill" aria-label="Brotkrümel (Pillen-Stil)">
	<ol><li><a href="/">Home</a></li><li><a href="/ueber-mich/">Über mich</a></li><li><span aria-current="page">Mein Setup</span></li></ol>
</nav>

Karten (Cards)

Kästen mit Bild, Text und Link. Mehrere Karten in „m-grid“ legen, dann ordnen sie sich automatisch an.

Mit Bild (Raster)

Code ansehen Elementor: Karten (Cards) – Mit Bild (Raster) 
<div class="m-grid">
	<article class="m-card m-card--hover">
		<a class="m-card__media" href="#" tabindex="-1" aria-hidden="true"><img src="https://minnii.de/wp-content/themes/minni/assets/img/hero-1280.webp" alt="" style="object-position:72% 50%"></a>
		<div class="m-card__body">
			<span><span class="badge badge--soft">Neu</span></span>
			<h3 class="m-card__title"><a href="#">Mein gemütliches Zimmer</a></h3>
			<p class="m-card__text">Ein Blick in meine kleine Gaming- und Schreibecke.</p>
			<div class="m-card__foot"><span>5 Min. Lesezeit</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></div>
		</div>
	</article>
	<article class="m-card m-card--hover">
		<a class="m-card__media" href="#" tabindex="-1" aria-hidden="true"><img src="https://minnii.de/wp-content/themes/minni/assets/img/partner-hero-1280.webp" alt=""></a>
		<div class="m-card__body">
			<span><span class="badge cat-games">Games</span></span>
			<h3 class="m-card__title"><a href="#">Cozy Games für den Herbst</a></h3>
			<p class="m-card__text">Meine liebsten Spiele für kuschelige Abende.</p>
			<div class="m-card__foot"><span>7 Min. Lesezeit</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></div>
		</div>
	</article>
	<article class="m-card m-card--hover">
		<a class="m-card__media" href="#" tabindex="-1" aria-hidden="true"><img src="https://minnii.de/wp-content/themes/minni/assets/img/about-1280.webp" alt=""></a>
		<div class="m-card__body">
			<span><span class="badge cat-design">Design</span></span>
			<h3 class="m-card__title"><a href="#">Mein Designprozess</a></h3>
			<p class="m-card__text">Von der ersten Skizze zum fertigen Screen.</p>
			<div class="m-card__foot"><span>8 Min. Lesezeit</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></div>
		</div>
	</article>
</div>

Shortcode (Texte frei änderbar):

[minni_card title="Titel" url="/blog/" image="https://…/bild.jpg" badge="Neu"]Kurzer Text.[/minni_card]

Quer (Bild links)

Empfehlung

Mein Lieblings-Setup

Alles, was auf meinem Schreibtisch steht – mit Links und ehrlicher Meinung.

12. April 2026Ansehen
Code ansehen Elementor: Karten (Cards) – Quer (Bild links) 
<article class="m-card m-card--row m-card--hover">
	<a class="m-card__media" href="#" tabindex="-1" aria-hidden="true"><img src="https://minnii.de/wp-content/themes/minni/assets/img/hero-1280.webp" alt="" style="object-position:72% 50%"></a>
	<div class="m-card__body">
		<span class="m-kicker">Empfehlung</span>
		<h3 class="m-card__title"><a href="#">Mein Lieblings-Setup</a></h3>
		<p class="m-card__text">Alles, was auf meinem Schreibtisch steht – mit Links und ehrlicher Meinung.</p>
		<div class="m-card__foot"><span>12. April 2026</span><span class="btn btn--small btn--soft">Ansehen</span></div>
	</div>
</article>

Zettel, Umrandet, Profil

Vergiss nicht, Pausen zu machen ♡

Eine Karte im Look eines Notizzettels.

Umrandete Karte

Dezent – gut für Zusatzinfos oder Kästen in der Seitenmitte.

Mehr

Minni

Bloggerin, Gamerin & Designerin.

Über mich
Code ansehen Elementor: Karten (Cards) – Zettel, Umrandet, Profil 
<div class="m-grid">
	<div class="m-card m-card--sticker"><div class="m-card__body"><p class="m-hand">Vergiss nicht, Pausen zu machen ♡</p><p class="m-card__text">Eine Karte im Look eines Notizzettels.</p></div></div>
	<div class="m-card m-card--outline"><div class="m-card__body"><h3 class="m-card__title">Umrandete Karte</h3><p class="m-card__text">Dezent – gut für Zusatzinfos oder Kästen in der Seitenmitte.</p><a class="btn btn--small btn--outline" href="#">Mehr</a></div></div>
	<div class="m-card m-card--center"><div class="m-card__body"><span class="m-avatar m-avatar--xl m-avatar--ring"><img src="https://minnii.de/wp-content/themes/minni/assets/img/author.webp" alt=""></span><h3 class="m-card__title">Minni</h3><p class="m-card__text">Bloggerin, Gamerin & Designerin.</p><a class="btn btn--small" href="#">Über mich</a></div></div>
</div>

Zahlen-Kacheln

Beiträge128+12 dieses Jahr
Gespielte Games64+5 diesen Monat
Tassen Kaffee∞zu wenig Schlaf
Code ansehen Elementor: Karten (Cards) – Zahlen-Kacheln 
<div class="m-grid">
	<div class="m-stat"><span class="m-stat__label">Beiträge</span><span class="m-stat__value">128</span><span class="m-stat__trend">+12 dieses Jahr</span></div>
	<div class="m-stat"><span class="m-stat__label">Gespielte Games</span><span class="m-stat__value">64</span><span class="m-stat__trend">+5 diesen Monat</span></div>
	<div class="m-stat"><span class="m-stat__label">Tassen Kaffee</span><span class="m-stat__value">∞</span><span class="m-stat__trend m-stat__trend--down">zu wenig Schlaf</span></div>
</div>

Dropdown

Klappt ein kleines Menü auf. Mit Pfeiltasten und Escape bedienbar.

Menü

Code ansehen Elementor: Dropdown – Menü 
<div class="m-dropdown">
	<button class="btn btn--soft m-dropdown__toggle" type="button">Optionen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 10 5 5 5-5"/></svg></button>
	<ul class="m-dropdown__menu">
		<li class="m-dropdown__label">Beitrag</li>
		<li><a class="m-dropdown__item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16Z"/><path d="m13.5 6.5 4 4"/></svg> Bearbeiten</a></li>
		<li><a class="m-dropdown__item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15V4M8 8l4-4 4 4M5 13v6h14v-6"/></svg> Teilen</a></li>
		<li><a class="m-dropdown__item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7 10.5l5 5 5-5M5 19.5h14"/></svg> Herunterladen</a></li>
		<li class="m-dropdown__sep" role="separator"></li>
		<li><button class="m-dropdown__item" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 7h15M9.5 7V4.5h5V7M6.5 7l1 13h9l1-13"/></svg> Löschen</button></li>
	</ul>
</div>

Modal (Popup-Fenster)

Ein Fenster über der Seite. Der Knopf öffnet das Modal mit derselben ID – bei mehreren Modals auf einer Seite die ID jeweils ändern.

Standard

Bleib auf dem Laufenden ♡

Einmal im Monat schicke ich dir meine Lieblingsbeiträge und Cozy-Game-Tipps.

Jetzt abonnieren
Code ansehen Elementor: Modal (Popup-Fenster) – Standard 
<button class="btn" type="button" data-m-modal="m-modal-newsletter">Newsletter abonnieren</button>
<dialog class="m-modal" id="m-modal-newsletter" aria-labelledby="m-modal-newsletter-title">
	<div class="m-modal__head"><h2 class="m-modal__title" id="m-modal-newsletter-title">Bleib auf dem Laufenden ♡</h2><button class="m-modal__close" type="button" data-m-close aria-label="Schließen">×</button></div>
	<div class="m-modal__body"><p>Einmal im Monat schicke ich dir meine Lieblingsbeiträge und Cozy-Game-Tipps.</p></div>
	<div class="m-modal__foot"><button class="btn btn--ghost" type="button" data-m-close>Später</button><a class="btn" href="#">Jetzt abonnieren</a></div>
</dialog>

Shortcode (Texte frei änderbar):

[minni_modal button="Öffnen" title="Überschrift"]Inhalt des Fensters.[/minni_modal]

Mit Bild

Willkommen in meinem Zimmer

Hier entstehen alle meine Beiträge.
Code ansehen Elementor: Modal (Popup-Fenster) – Mit Bild 
<button class="btn btn--soft" type="button" data-m-modal="m-modal-bild">Bild-Popup öffnen</button>
<dialog class="m-modal m-modal--image" id="m-modal-bild" aria-labelledby="m-modal-bild-title">
	<img class="m-modal__img" src="https://minnii.de/wp-content/themes/minni/assets/img/hero-1280.webp" alt="">
	<div class="m-modal__head"><h2 class="m-modal__title" id="m-modal-bild-title">Willkommen in meinem Zimmer</h2><button class="m-modal__close" type="button" data-m-close aria-label="Schließen">×</button></div>
	<div class="m-modal__body"><p>Hier entstehen alle meine Beiträge.</p></div>
	<div class="m-modal__foot"><button class="btn" type="button" data-m-close>Schön!</button></div>
</dialog>

Tooltip & Popover

Tooltip: kurzer Text beim Drüberfahren. Popover: kleines Fenster beim Klicken.

Tooltip

Ich spiele am liebsten Cozy Games am Abend.

Code ansehen Elementor: Tooltip & Popover – Tooltip 
<p>Ich spiele am liebsten <span class="m-tooltip" tabindex="0" data-tip="Gemütliche Spiele ohne Zeitdruck">Cozy Games</span> am Abend.</p>

Shortcode (Texte frei änderbar):

[minni_tooltip text="Erklärung"]Begriff[/minni_tooltip]

Popover

Kurz erklärt

Ein Popover zeigt zusätzliche Infos an, ohne die Seite zu verlassen. Klick daneben schließt es.

Code ansehen Elementor: Tooltip & Popover – Popover 
<button class="btn btn--outline" type="button" popovertarget="m-pop-info">Was ist das? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 7.6v.1"/></svg></button>
<div class="m-popover" id="m-pop-info" popover>
	<strong class="m-popover__title">Kurz erklärt</strong>
	<p>Ein Popover zeigt zusätzliche Infos an, ohne die Seite zu verlassen. Klick daneben schließt es.</p>
</div>

Tabs (Reiter)

Mehrere Inhalte platzsparend nebeneinander. Mit Pfeiltasten bedienbar.

Als Pillen

Auf dem PC spiele ich gerade Mini Cozy Room und Stardew Valley.

Code ansehen Elementor: Tabs (Reiter) – Als Pillen 
<div class="m-tabs">
	<div class="m-tabs__list">
		<button class="m-tabs__tab" type="button" aria-selected="true">PC</button>
		<button class="m-tabs__tab" type="button">Switch</button>
		<button class="m-tabs__tab" type="button">Handy</button>
	</div>
	<div class="m-tabs__panel"><p>Auf dem PC spiele ich gerade Mini Cozy Room und Stardew Valley.</p></div>
	<div class="m-tabs__panel" hidden><p>Auf der Switch: Animal Crossing – natürlich.</p></div>
	<div class="m-tabs__panel" hidden><p>Auf dem Handy: kleine Puzzle-Spiele für die Bahn.</p></div>
</div>

Shortcode (Texte frei änderbar):

[minni_tabs]
[minni_tab title="Reiter 1"]Inhalt 1[/minni_tab]
[minni_tab title="Reiter 2"]Inhalt 2[/minni_tab]
[/minni_tabs]

Mit Unterstrich

Hier steht die Beschreibung.

Code ansehen Elementor: Tabs (Reiter) – Mit Unterstrich 
<div class="m-tabs m-tabs--line">
	<div class="m-tabs__list">
		<button class="m-tabs__tab" type="button" aria-selected="true">Beschreibung</button>
		<button class="m-tabs__tab" type="button">Details</button>
		<button class="m-tabs__tab" type="button">Bewertungen</button>
	</div>
	<div class="m-tabs__panel"><p>Hier steht die Beschreibung.</p></div>
	<div class="m-tabs__panel" hidden><p>Hier stehen die Details.</p></div>
	<div class="m-tabs__panel" hidden><p>Hier stehen die Bewertungen.</p></div>
</div>

Formular-Elemente

Eingabefelder im Theme-Look – z. B. als Stil-Vorlage für Kontaktformulare (Klassen m-input, m-select, m-textarea).

Felder

Ich antworte meistens innerhalb von 2 Tagen.
Code ansehen Elementor: Formular-Elemente – Felder 
<div class="m-field"><label for="m-name">Dein Name</label><input class="m-input" id="m-name" type="text" placeholder="z. B. Lena"></div>
<div class="m-field"><label for="m-thema">Thema</label><select class="m-select" id="m-thema"><option>Allgemeine Frage</option><option>Kooperation</option><option>Feedback</option></select></div>
<div class="m-field"><label for="m-nachricht">Nachricht</label><textarea class="m-textarea" id="m-nachricht" placeholder="Was möchtest du mir sagen?"></textarea><span class="m-hint">Ich antworte meistens innerhalb von 2 Tagen.</span></div>

Häkchen & Schalter


Code ansehen Elementor: Formular-Elemente – Häkchen & Schalter 
<label class="m-check"><input type="checkbox" checked> Newsletter abonnieren</label>
<label class="m-check"><input type="radio" name="m-wahl" checked> Option A</label>
<label class="m-check"><input type="radio" name="m-wahl"> Option B</label>
<br>
<label class="m-switch"><input type="checkbox" role="switch" checked> Dunkler Modus</label>

Feld mit Knopf

Code ansehen Elementor: Formular-Elemente – Feld mit Knopf 
<div class="m-inputgroup"><input class="m-input" type="email" placeholder="Deine E-Mail-Adresse" aria-label="E-Mail-Adresse"><button class="btn" type="button">Anmelden</button></div>

Fortschritt & Laden

Balken, Schritte und Lade-Kreis.

Balken

Story geschafft75 %
Sammelobjekte40 %
Code ansehen Elementor: Fortschritt & Laden – Balken 
<div class="m-progress"><div class="m-progress__head"><span>Story geschafft</span><strong>75 %</strong></div><div class="m-progress__bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Story geschafft"><span class="m-progress__fill" style="width:75%"></span></div></div>
<div class="m-progress m-progress--striped"><div class="m-progress__head"><span>Sammelobjekte</span><strong>40 %</strong></div><div class="m-progress__bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" aria-label="Sammelobjekte"><span class="m-progress__fill" style="width:40%"></span></div></div>

Shortcode (Texte frei änderbar):

[minni_progress value="75" label="Spielzeit"]

Schritte

  1. Idee
  2. Skizze
  3. Design
  4. Fertig
Code ansehen Elementor: Fortschritt & Laden – Schritte 
<ol class="m-steps">
	<li class="is-done">Idee</li>
	<li class="is-done">Skizze</li>
	<li class="is-current" aria-current="step">Design</li>
	<li>Fertig</li>
</ol>

Lade-Kreis

Code ansehen Elementor: Fortschritt & Laden – Lade-Kreis 
<span class="m-spinner" role="status" aria-label="Lädt …"></span>

Tabelle & Zeitstrahl

Für Vergleiche, Listen und Abläufe.

Tabelle

SpielGenreStundenWertung
Stardew ValleyFarming240♥♥♥♥♥
Mini Cozy RoomIdle35♥♥♥♥
UnpackingPuzzle8♥♥♥♥
Code ansehen Elementor: Tabelle & Zeitstrahl – Tabelle 
<div class="m-table-wrap" role="region" aria-label="Tabelle: Meine Spiele" tabindex="0">
	<table class="m-table">
		<thead><tr><th>Spiel</th><th>Genre</th><th class="is-num">Stunden</th><th>Wertung</th></tr></thead>
		<tbody>
			<tr><td>Stardew Valley</td><td>Farming</td><td class="is-num">240</td><td><span class="badge badge--soft">♥♥♥♥♥</span></td></tr>
			<tr><td>Mini Cozy Room</td><td>Idle</td><td class="is-num">35</td><td><span class="badge badge--soft">♥♥♥♥</span></td></tr>
			<tr><td>Unpacking</td><td>Puzzle</td><td class="is-num">8</td><td><span class="badge badge--soft">♥♥♥♥</span></td></tr>
		</tbody>
	</table>
</div>

Zeitstrahl

  1. März 2024Blog gestartet

    Der erste Beitrag ging online.

  2. Juli 2025100 Beiträge

    Ein kleines Jubiläum mit Gewinnspiel.

  3. BaldNeues Design

    Das Minni-Theme geht live.

Code ansehen Elementor: Tabelle & Zeitstrahl – Zeitstrahl 
<ol class="m-timeline">
	<li class="is-done"><span class="m-timeline__date">März 2024</span><strong class="m-timeline__title">Blog gestartet</strong><p class="m-timeline__text">Der erste Beitrag ging online.</p></li>
	<li class="is-done"><span class="m-timeline__date">Juli 2025</span><strong class="m-timeline__title">100 Beiträge</strong><p class="m-timeline__text">Ein kleines Jubiläum mit Gewinnspiel.</p></li>
	<li><span class="m-timeline__date">Bald</span><strong class="m-timeline__title">Neues Design</strong><p class="m-timeline__text">Das Minni-Theme geht live.</p></li>
</ol>

Trenner, Meldung & Leerer Zustand

Kleine Helfer zum Auflockern.

Trenner

Code ansehen Elementor: Trenner, Meldung & Leerer Zustand – Trenner 
<div class="m-divider" role="separator"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21s-7.5-4.6-9.6-9.3C.9 8.3 3 4.5 6.7 4.5c2.1 0 3.6 1.2 4.4 2.5h1.8c.8-1.3 2.3-2.5 4.4-2.5 3.7 0 5.8 3.8 4.3 7.2C19.5 16.4 12 21 12 21Z"/></svg></div>
<div class="m-divider m-divider--text" role="separator">Kapitel 2</div>

Kurze Meldung (Toast)

Code ansehen Elementor: Trenner, Meldung & Leerer Zustand – Kurze Meldung (Toast) 
<button class="btn btn--soft" type="button" data-m-toast="Gespeichert – danke dir!">Meldung zeigen</button>

Leerer Zustand

Hier ist noch nichts

Sobald es neue Inhalte gibt, erscheinen sie genau hier.

Zum Blog
Code ansehen Elementor: Trenner, Meldung & Leerer Zustand – Leerer Zustand 
<div class="m-empty">
	<img src="https://minnii.de/wp-content/themes/minni/assets/img/mascot.webp" alt="">
	<span class="m-empty__title">Hier ist noch nichts</span>
	<p>Sobald es neue Inhalte gibt, erscheinen sie genau hier.</p>
	<a class="btn btn--small" href="/blog/">Zum Blog</a>
</div>

Pixelmonster