Kunde / Projekt
Headline-Font
Website
Body-Font
Datum
Erstellt von
Farbpalette
Klicke auf ein Farbfeld, um die Farbe visuell zu wählen, oder gib den HEX-Code direkt ein.
Entscheidungshilfe
Welchen Style nehme ich wofür?
| Wenn du das brauchst … | … nimm das | |
|---|---|---|
| Echte Seitenstruktur, SEO-relevant | → | H1–H5 |
| Semantisches Label in einer Komponente | → | H6 / Label |
| Visuelle Gliederung ohne SEO-Wirkung | → | Subline |
| Dachzeile über einer Überschrift | → | Topline |
| Einzelnen Satz hervorheben | → | Highlight |
| Kurzer Aufmerksamkeits-Einwurf | → | Kicker |
| Einleitungsabsatz nach Überschrift | → | Lead |
| Hervorgehobener Absatz / Kernaussage | → | Fokus |
| Begleitender Kurztext | → | Caption |
| Kleingedrucktes, Disclaimer | → | Fine |
| CTA / Handlungsaufforderung | → | Button |
Hierarchie-Styles
Echte HTML-Headings. SEO-relevant.
Funktions-Styles
Was ein Text tut — unabhängig von der Heading-Hierarchie.
Klassen ohne H-Tag
Visuelle Auszeichnungen auf <p> / <span>. CSS-Klasse im Advanced-Tab.
Text- & Inhaltselemente
HTML-Grundelemente und ihre Abbildung in Elementor.
| Element | Tag | Wofür | Elementor |
|---|---|---|---|
| Überschriften | <h1>–<h6> | Seitenstruktur, SEO | Heading-Widget |
| Absatz | <p> | Fließtext | Text-Editor |
| Link | <a> | Verweise | Button, Text-Links |
| Bild | <img> | Bilder, Alt-Text | Image-Widget |
| Listen | <ul> <ol> <li> | Aufzählungen | Icon-List, Text-Editor |
| Container | <div> | Gruppierung | Elementor Container |
| Inline-Marker | <span> | Text-Teile auszeichnen | Custom CSS |
| Formulare | <form> <input> | Kontakt, Lead-Gen | Form-Widget / Plugin |
Semantische Strukturelemente
HTML5-Tags für Suchmaschinen und Screenreader.
| Element | Tag | Wofür | Elementor |
|---|---|---|---|
| Kopfbereich | <header> | Logo, Navigation | Header-Template |
| Fußbereich | <footer> | Kontakt, Recht | Footer-Template |
| Hauptinhalt | <main> | Zentraler Inhalt | Auto vom Theme |
| Navigation | <nav> | Menüstruktur | Nav-Widget (auto) |
| Sektion | <section> | Thematischer Block | Container → section |
| Artikel | <article> | Blogpost | Auto bei Posts |
| Seitenleiste | <aside> | Ergänzend | Sidebar |
Praxisregel: Jeder Elementor-Container bekommt den passenden HTML-Tag. Hero → section, Leistungen → section, Blog → article, Sidebar → aside.