Die Farbbehandlung ist eine einzige Option mit großer Wirkung im weiteren Verlauf. Wenn Sie sie vor der Konvertierung richtig einstellen, sparen Sie sich später viel Neugestaltung.
Die beiden Modi
- Originalfarben beibehalten — jede Textfarbe, Hintergrundfarbe, Rahmenfarbe und Schattenfarbe wird als expliziter Wert in das Widget geschrieben. Das Ergebnis entspricht exakt der Quelle.
- Site-Farben verwenden — widget-spezifische Farben werden übersprungen und stattdessen auf Elementors globale Farben verwiesen: Überschriften werden Primär zugeordnet, Fließtext Text, Button-Hintergründe Akzent und so weiter.
Wann Sie welchen Modus verwenden
Wählen Sie Site-Farben, wenn Sie einen Block in eine bestehende Marken-Website einfügen. Der Abschnitt übernimmt sofort Ihre Farbpalette, und wenn Sie später eine globale Farbe ändern, ändert sich der importierte Abschnitt mit. Dies ist die wartungsfreundliche Wahl für alles, was langfristig auf Ihrer Website bleiben soll.
Wählen Sie Originalfarben, wenn das Design im Vordergrund steht – ein Kunden-Mock-up, eine einmalige Landingpage oder wenn die Quellpalette bewusst anders als der Rest der Website ist.
Welche Farbwerte erhalten bleiben
Volltonfarben werden direkt konvertiert. Lineare Verläufe mit zwei Farbstopps werden erkannt und zu Elementor-Verlaufshintergründen, wobei Winkel und beide Stopps erhalten bleiben. Komplexere Hintergründe – radiale Verläufe, Verläufe mit mehreren Stopps – lassen sich nicht im selben Steuerelement abbilden, daher wird die erste Volltonfarbe als sinnvoller Fallback verwendet, statt einen leeren Hintergrund zu erzeugen.
Box-Schatten werden ebenfalls übernommen, aber Elementors Schatten-Steuerelement kann nur einen einzelnen Schatten aufnehmen. Wenn Ihr CSS mehrere Schatten übereinanderlegt, wird der vorderste beibehalten und eine Warnung weist darauf hin, dass die übrigen manuell hinzugefügt werden müssen.
CSS-Variablen
Benutzerdefinierte Eigenschaften wie var(--brand) werden vom Browser aufgelöst, bevor sie gelesen werden, sodass Sie die endgültige berechnete Farbe erhalten und nicht den Variablennamen. Das ist in der Regel das, was Sie möchten. Wenn Sie für das Theming auf Variablen angewiesen sind, wechseln Sie zu Site-Farben und steuern Sie die Palette stattdessen über Elementors globale Farben – das ist die WordPress-native Entsprechung derselben Idee.
Transparenz
Vollständig transparente Hintergründe werden als „kein Hintergrund“ behandelt, statt als transparente Farbe geschrieben zu werden, was das Einstellungsfeld sauber hält. Halbtransparente Werte wie rgba(255,255,255,.88) werden unverändert übernommen.
Die vollständige Zuordnung
Im Site-Farben-Modus ist jeder Widget-Typ an einen bestimmten Platz in Ihrer Farbpalette gebunden:
- Überschriften → Primär
- Fließtext → Text
- Button-Hintergründe → Akzent
- Icons → Primär
- Trennlinien → Sekundär
Das Aktivieren der Site-Typografie bewirkt dasselbe für Schriftarten: Überschriften übernehmen Ihre Primär-Typografie und Fließtext die Sekundär-Typografie.
Die beiden Optionen sind unabhängig voneinander. Site-Farben mit Originalschriften sind eine gängige und sinnvolle Kombination – der Block übernimmt Ihre Farbpalette, behält aber eine Display-Schrift bei, auf die das Design angewiesen ist. Stellen Sie sie getrennt ein, statt sie als einen einzigen Schalter zu behandeln.
Warum die Verbindung live ist und keine Kopie
Dieser Teil ist wichtig zu verstehen, denn er erklärt, warum die Wahl später so große Auswirkungen hat. Der Site-Modus schlägt Ihre Primärfarbe nicht nach und fügt ihren Hex-Wert in das Widget ein. Er schreibt eine Referenz auf die globale Farbe – Elementor speichert sie als Zeiger auf den Paletteneintrag, nicht als Wert.
Die Bindung bleibt also bestehen. Ändern Sie in sechs Monaten in den Site-Einstellungen die Primärfarbe, ändert sich jede Überschrift, die im Site-Modus konvertiert wurde, auf jeder Seite mit – ohne dass Sie eine davon öffnen müssen. Eine konvertierte Seite wird zu einem normalen Bestandteil Ihres Designsystems und nicht zu einem Fremdkörper, der heute zufällig passt.
Bei Originalfarben ist der Wert fest eingebrannt. Das ist genau richtig für ein Kunden-Mock-up, das Sie originalgetreu reproduzieren müssen, und genau falsch für einen Abschnitt, den Sie zwei Jahre lang pflegen werden.
Richten Sie zuerst Ihre Farbpalette ein
Eine Voraussetzung wird oft zur Stolperfalle. Der Site-Modus bindet an das, was Ihre globalen Farben derzeit enthalten – er erstellt oder errät sie nicht. Konvertieren Sie in eine Website, deren Palette noch die Elementor-Werksstandards hat, übernimmt Ihr Abschnitt getreu diese Werksstandards, was so aussieht, als wäre die Konvertierung fehlgeschlagen.
Nehmen Sie sich fünf Minuten Zeit, um unter Website-Einstellungen → Globale Farben Primär, Sekundär, Text und Akzent zu definieren, bevor Sie irgendetwas konvertieren, das Sie behalten möchten. Alles, was danach importiert wird, sitzt auf Anhieb richtig.
Icons verhalten sich etwas anders
Ein im Site-Modus konvertiertes Icon erhält currentColor statt eines festen Werts, was bedeutet, dass es von dem umgebenden Element erbt. Ziehen Sie dieses Icon in einen dunklen Abschnitt, wird es zusammen mit dem umgebenden Text hell, ohne dass Sie eine widget-spezifische Einstellung merken müssen.
Es ist eine Kleinigkeit, die eine ganz bestimmte, lästige Aufgabe erspart: zwölf Icon-Widgets zu suchen, nachdem Sie einen Abschnittshintergrund geändert haben, weil sie alle noch die Farbe haben, die sie auf Weiß hatten.
Eine praktische Empfehlung
Wenn Sie unsicher sind, konvertieren Sie einmal mit Originalfarben, um zu prüfen, ob das Layout originalgetreu ist, und dann erneut mit Site-Farben für die Version, die Sie tatsächlich veröffentlichen. Der Vergleich dauert zwei Minuten und macht die Entscheidung offensichtlich.
Als Standardregel gilt: Alles, was auf Ihre eigene Website kommt, mit Site-Farben. Alles, was das Design eines anderen zur Freigabe nachbildet, mit Originalfarben. Wenn ein Mock-up freigegeben und zu einer echten Seite wird, konvertieren Sie es erneut im Site-Modus, statt es von Hand umzufärben.