CI‑Handbuch · Grundwerte & Module
Zeile anklicken (oder ↑/↓), um die Vorschau zu steuern. Auto‑Save aktiv; Export CSS/JSON/HTML; Druck A4 Querformat.
Typographie (Angaben in rem)
| Element (Bezeichnung) | HTML-Tag | Elementor-Bezeichnung | Schrift | Größe | Zeilenabstand | Spacing | Schnitt (Font-Weight) | Farbe (hell/dunkel) |
|---|---|---|---|---|---|---|---|---|
| Überschrift H1 | <h1> | Heading – H1 | Titillium Web | 3.2rem | 1.15 | -0.04em | 800 | #000000 / #ffffff |
| Überschrift H2 | <h2> | Heading – H2 | Titillium Web | 2.4rem | 1.2 | -0.03em | 700 | #000000 / #ffffff |
| Überschrift H3 | <h3> | Heading – H3 | Titillium Web | 1.9rem | 1.3 | -0.02em | 700 | #000000 / #ffffff |
| Überschrift H4 | <h4> | Heading – H4 | Titillium Web | 1.6rem | 1.35 | -0.01em | 600 | #000000 / #ffffff |
| Überschrift H5 | <h5> | Heading – H5 | Titillium Web | 1.4rem | 1.4 | 0em | 600 | #000000 / #ffffff |
| Überschrift H6 | <h6> | Heading – H6 | Titillium Web | 1.2rem | 1.45 | 0em | 600 | #000000 / #ffffff |
| Dachzeile (Typ 1) | <span class="dachzeile"> | Text – Small Uppercase | Titillium Web | 0.9rem | 1.6 | 0.1em | 600 | #000000 / #ffffff |
| Fließtext (Typ 1) | <p> | Text – Body | Titillium Web | 1.0rem (16px) | 1.6 | 0em | 400 | #000000 / #ffffff |
Farbsystem
| Element (Bezeichnung) | Kategorie | Hexwert | Verwendung |
|---|---|---|---|
| Farbe 1 | Primär (Brand Main) | #0041FF | Headlines, Links, Buttons |
| Farbe 2 | Sekundär (Akzent) | #00AEEF | Icons, Hover, Highlights |
| Farbe 3 | Hintergrund hell | #FFFFFF | Body, Cards, Module |
| Farbe 4 | Hintergrund dunkel | #111111 | Footer, Header |
| Farbe 5 | Text Standard | #222222 | Fließtext, Überschriften |
| Farbe 6 | Linien / Trenner | #E0E0E0 | Borders, Tabellen |
| Farbe 7 | Hinweis / Highlight | #FFC800 | CTA, Badges, Markierungen |
Website‑Einstellungen
| Rolle | Farbe | Verwendung |
|---|---|---|
| Primär | #0041FF | Buttons, Links, Akzente |
| Sekundär | #00AEEF | Hover, Icons |
| Text | #222222 | Fließtext, Headlines |
| Akzent | #FFC800 | Badges, Markierungen |
| Element | Familie | Gewicht |
|---|---|---|
| Überschriften | Titillium Web | 700–800 |
| Text | Titillium Web | 400 |
| Buttons/Links | Titillium Web | 600–700 |
| Variante | Hintergrund | Text | Radius | Padding | Schatten | Font/Weight | Zustände |
|---|---|---|---|---|---|---|---|
| Primary | var(--brand-primary) | #fff | 8 px | 12 / 20 px | Schatten 1 | Titillium / 700 | Hover dunkler, Active pressed |
| Secondary | #E8F3FF | #0041FF | 8 px | 12 / 20 px | — | Titillium / 700 | Hover Rand stärker |
| Element | Stil | Abstand | Hinweis |
|---|---|---|---|
| Input | Border 1px #E0E0E0, Radius 6px | 14px vertikal | Focus: Rand var(--brand-primary) |
| Label | 0.9rem, 600 | 6px unten |
| Status | Farbe | Dekoration |
|---|---|---|
| Normal | var(--brand-primary) | keine |
| Hover | #0031C0 | Unterstreichung |
| Parameter | Wert | Hinweis |
|---|---|---|
| Seitenbreite (max) | 1920 px | Viewport Ziel |
| Inhaltsbreite | 1200 px | Container / Grid |
| Container‑Breite | 1200 px | |
| Section‑Padding | 80 / 60 / 40 px | Desktop / Tablet / Mobile |
| Column Gap | 24 px | Standard Raster |
| Tag | Größe | Zeilenabstand |
|---|---|---|
| H1 | 3.2 rem | 1.15 |
| H2 | 2.4 rem | 1.2 |
| H3 | 1.9 rem | 1.3 |
| H4 | 1.6 rem | 1.35 |
| H5 | 1.4 rem | 1.4 |
| H6 | 1.2 rem | 1.45 |
| Element | Farbe hell/dunkel | Hinweis |
|---|---|---|
| Überschriften | #000000 / #FFFFFF | |
| Fließtext | #222222 / #DDDDDD |
| Element | Wert | Hinweis |
|---|---|---|
| Logo | /assets/logo.svg | SVG bevorzugt |
| Favicon | /assets/favicon.png | 512×512 |
| Seitentitel | Marke – Claim | SEO |
| Beschreibung | Kurzbeschreibung | SEO |
Theme Builder – Global Templates
| Template | Beschreibung | Aktiv | Hinweis |
|---|---|---|---|
| Header | Globaler Kopfbereich | Ja | Sticky |
| Footer | Globaler Fußbereich | Ja | 3 Spalten |
| Single Post | Beitragslayout | Ja | Mit Sidebar |
| Archive | Archivansichten | Ja | |
| 404 | Fehlerseite | Ja | |
| Suche | Suchergebnisse | Ja | |
| WooCommerce | Shop‑Vorlagen | Optional | falls aktiv |
Responsives Design
| Gerät | Breakpoint (px) | Hinweis |
|---|---|---|
| Desktop | ≥ 1200 | Basis |
| Tablet | 768–1199 | 2‑Spalten |
| Mobile | ≤ 767 | 1‑Spalte |
| Custom | frei | Projektabhängig |
| Gerät | Margins/Abstände | Sichtbarkeit |
|---|---|---|
| Desktop | Standard | alle |
| Tablet | reduziert | optional ausblenden |
| Mobile | kompakt | einige Elemente aus |
Globale Layout‑Vorgaben
| Parameter | Wert | Hinweis |
|---|---|---|
| Section‑Standardhöhe | Auto | |
| Container‑Padding | 24/24/16 px | D/T/M |
| Widget‑Abstände | 16 px | |
| Seitenhintergrund | global | oder pro Template |
Performance & Erweiterungen
| Einstellung | Wert | Hinweis |
|---|---|---|
| CSS‑Print | Internal File | statt Inline |
| Fonts | Google Fonts lokal | Datenschutz |
| Lazy Load | Aktiv | Images, Iframes |
| Experimentelle Features | Container, Flexbox, Loop Grid |
Rollen & Berechtigungen
| Rolle | Elementor Bearbeitung | Beschränkungen |
|---|---|---|
| Administrator | Vollzugriff | — |
| Editor | Inhalt | Kein Theme‑Builder |
| Autor | Beiträge | Kein Design |