HTML to Elementor
Zurück zu den Tutorials

Wie Typografie von HTML in Elementor übernommen wird

Typografie ist der Teil einer Konvertierung, der zuerst auffällt, wenn etwas schiefgeht. Hier erfahren Sie genau, was übernommen wird – und welche einzelne Einstellung darüber entscheidet, ob Ihre konvertierte Seite die Schriften Ihres Themes übernimmt oder die ursprünglichen behält.

Vier konkurrierende CSS-Regeln für dasselbe Element links; rechts der einzige aufgelöste Wert, den der Browser tatsächlich gezeichnet hat, ausgelesen über getComputedStyle.
Das Stylesheet lügt; der berechnete Stil lügt nicht. Die Seite zuerst zu rendern ist der Grund, warum Framework- und Utility-Class-Markup überlebt, statt ungestylt anzukommen.

Was aus der Quelle gelesen wird

Für jede Überschrift, jeden Absatz, jeden Button und jede Liste werden die berechneten Werte erfasst: Schriftfamilie, Schriftgröße, Schriftstärke, Textumwandlung, Schriftstil, Textdekoration, Zeilenhöhe und Zeichenabstand. Sie werden in die eigene Typografie-Gruppe des Widgets geschrieben, sodass jeder Wert in Elementor bearbeitbar bleibt, statt in einem Stylesheet festzustecken.

Größen werden pro Breakpoint erfasst. Das ist bei fluider Typografie wichtig – eine Überschrift, die als clamp()-Ausdruck geschrieben ist, hat keine direkte Entsprechung in Elementor. Deshalb werden drei abgetastete Werte gespeichert (Desktop, Tablet, Mobil), die der Kurve für die meisten Designs genau genug folgen.

Die Option Schriften: original oder Website

Im Optionsbereich legen Sie fest, wie Schriften behandelt werden:

  • HTML-Schriften & -Größen beibehalten – jedes Widget erhält explizite Schrifteinstellungen, die aus der Quelle kopiert werden. Die Seite sieht aus wie das HTML, unabhängig von Ihrem Theme.
  • Globale Schriften der Zielseite übernehmen – die Typografie pro Widget wird übersprungen, stattdessen wird die globale Typografie von Elementor referenziert. Überschriften übernehmen die Überschriftenschrift Ihrer Website, Fließtext übernimmt Ihre Fließtextschrift.

Nutzen Sie die zweite Option, wenn Sie einen Abschnitt in eine bestehende Website mit eigenem Branding bringen und er sich automatisch anpassen soll. Nutzen Sie die erste, wenn Sie ein Design originalgetreu nachbilden.

Webfonts reisen nicht mit

Das ist die häufigste Überraschung. Der Name einer Schriftfamilie ist nur eine Zeichenkette – hat die Quellseite eine Schrift aus einem externen Stylesheet geladen, wird dieses Stylesheet nicht nach WordPress übernommen. Das Widget nennt zwar den richtigen Familiennamen, doch der Browser weicht auf eine Systemschrift aus, solange die Schrift auf Ihrer Website nicht verfügbar ist.

Zwei Wege, das zu beheben: Registrieren Sie die Schrift in Elementor (Website-Einstellungen, Eigene Schriftarten), oder verwenden Sie ein Theme, das sie bereits lädt. Tun Sie das, bevor Sie das konvertierte Ergebnis beurteilen – sonst betrachten Sie eine Ersatzdarstellung und jagen einem Problem hinterher, das gar nicht existiert.

Überschriftenebenen

Überschriften-Tags bleiben standardmäßig erhalten, ein <h2> wird also zu einem Überschrift-Widget mit der Einstellung H2. Es gibt außerdem einen semantischen Modus, der die Ebenen des Dokuments neu ordnet – nützlich, wenn Sie eine eigenständige Seite, deren oberste Überschrift ein H1 war, in eine Seite importieren, die bereits eines hat. Zwei H1 auf einer Seite sind ein SEO-Warnsignal, das Sie besser vermeiden.

Die vollständige Liste – acht Eigenschaften und nichts sonst

Hier präzise zu sein, ist nützlicher als vage zu bleiben, denn so wissen Sie genau, was Sie erwarten können und was Sie nacharbeiten müssen. Die Typografie eines Widgets erhält: Schriftfamilie, Schriftgröße, Schriftstärke, Textumwandlung, Schriftstil, Textdekoration, Zeilenhöhe und Zeichenabstand.

Alles andere im CSS-Textmodell gehört nicht zur Typografie-Gruppe von Elementor und wird nicht übernommen – Textschatten, Wortabstand, white-space-Behandlung, Silbentrennung, font-variant, text-indent. Wenn Ihr Design auf etwas davon setzt, behandeln Sie es als manuelle Arbeit und nicht als Konvertierungsfehler.

Bei Schriftfamiliennamen werden unterwegs außerdem die Anführungszeichen entfernt, sodass "Helvetica Neue", sans-serif in einer Form ankommt, die das Elementor-Steuerelement akzeptiert – und nicht als Zeichenkette in Anführungszeichen, die es als einen einzigen seltsamen Familiennamen behandeln würde.

Nur Werte, die vom Standard abweichen, werden geschrieben

Vier dieser acht werden übersprungen, wenn sie ihren Standardwert haben: Stärke 400, Umwandlung none, Stil normal und Dekoration none bleiben ungesetzt, statt explizit geschrieben zu werden.

Das Ergebnis ist ein Typografie-Bereich, den man tatsächlich lesen kann. Öffnen Sie einen konvertierten Absatz, sehen Sie Schriftfamilie, Größe und Zeilenhöhe – die drei Dinge, die bewusst festgelegt wurden – statt acht Feldern, von denen fünf „normal“ anzeigen. Wenn etwas gesetzt ist, dann mit Absicht.

Es bedeutet auch, dass ein Widget dort wirklich erbt, wo es erben soll. Ein Absatz ohne explizite Stärke erbt die Stärke weiterhin von Ihrer globalen Elementor-Einstellung, statt für immer auf 400 festgenagelt zu sein. Das zählt an dem Tag, an dem Sie Ihre Fließtextschrift gegen eine austauschen, deren normale Stärke 350 ist.

Website-Typografie schreibt überhaupt nichts

Hier lohnt sich Genauigkeit, denn „Website-Typografie verwenden“ klingt, als würden Werte übertragen. Das ist nicht der Fall. In diesem Modus endet der Typografie-Schritt sofort, und es werden keine Schrifteinstellungen in das Widget geschrieben – das Widget ist an Ihre globale Typografie gebunden und erbt alles.

Deshalb passt sich ein im Website-Modus konvertierter Abschnitt vollständig an die Zielwebsite an, und deshalb rührt sich derselbe Abschnitt im Original-Modus nicht, wenn Sie Ihre globalen Schriften ändern. Keines von beiden ist besser; sie beantworten unterschiedliche Fragen. „Das soll zu meiner Website passen“ verlangt das Erste. „Dieses Design soll exakt nachgebildet werden“ verlangt das Zweite.

Was Sie trotzdem prüfen sollten

  • Lange Überschriften am mobilen Breakpoint – angenäherte fluide Typografie kann eine Zeile ungünstig umbrechen.
  • Den Zeichenabstand bei Display-Text in Großbuchstaben; kleine Unterschiede fallen hier stark auf.
  • Die Zeilenhöhe bei mehrzeiligem Fließtext, besonders wenn die Quelle einen Wert ohne Einheit verwendet hat.
  • Ob Sie Typografie pro Widget überhaupt wollen – der Wechsel zur Website-Typografie macht die langfristige Pflege oft deutlich einfacher.
  • Alles, was auf Textschatten, Wortabstand oder Texteinzug beruht – das liegt außerhalb der acht und muss erneut angewendet werden.
Geschrieben von Leo

Neun Jahre WordPress und Elementor; 189 migrierte Websites. Jede Regel in diesem Konverter stammt aus einem echten Projekt. Über dieses Tool