Änderungsarten

Wenn Sie im visuellen Editor von Optimize Änderungen vornehmen, wird automatisch eine Änderungsliste erstellt. Sie können schnell eine Variante erstellen, indem Sie in der Editorpalette auf ELEMENT BEARBEITEN klicken. Jetzt sind verschiedene Arten von Änderungen möglich.

Änderungsarten

In Optimize werden im visuellen Editor die folgenden Änderungsarten unterstützt:

Stiländerung

Stiländerungen dienen der Implementierung von Stilattributänderungen, beispielsweise an der Größe und der Position des Elements.

Durch eine Stiländerung können Sie die Anweisung mit einer CSS-Regel implementieren:

#target { color : red }

... oder das Stilattribut des Zielelements verwenden:

<p id="target" style="color : red"> </p>

Der visuelle Editor wird auf die Standardeinstellung, nämlich die "korrekteste" Syntax, zurückgesetzt. Bevorzugt wird dabei das CSS-Regel-Verfahren.

Wenn es auf der Seite eine spezifischere CSS-Regel gibt, durch die die neue Regel überschrieben wird, wird vom visuellen Editor die Property "important" verwendet. Beispiel:

#target { color : red !important}

Der Stil des Elements wird im Editor nur verwendet, wenn die oben genannte Regel auch von einer spezifischeren Regel auf der Seite überschrieben wird.

Durch das CSS-Regel-Verfahren wird Seitenflackern minimiert. Dieses entsteht, wenn vor dem Laden des CSS-Stylesheets ganz kurz unformatierte Inhalte erscheinen. Im Gegensatz dazu ist es bei der Änderung einer Stil-Property mit element.style erforderlich, dass das Element bereits auf der Seite vorhanden ist. Dadurch wird die Wahrscheinlichkeit erhöht, dass es für den Nutzer kurz sichtbar ist, bevor es geändert wird.

Sie können die Optionen überprüfen, die vom Editor ausgewählt wurden, und dabei jede einzelne von ihnen ändern, indem Sie eine vorhandene Stiländerung bearbeiten.

Erweiterter Editor – Screenshot des Dialogfelds "Stil bearbeiten"

Attributänderung

Attributänderungen dienen der Implementierung von Elementattributänderungen, beispielsweise am Ziel eines Links oder an der Quelle eines Bilds. Sie können Properties wie den CSS-Selektor, das Attribut und den Wert überprüfen und ändern.

Erweiterter Editor – Screenshot "Attribut bearbeiten"

Textänderung

Textänderungen werden verwendet, wenn Sie im Editor Änderungen am Inline-Text vornehmen. Wenn sich in einem Element Text und untergeordnete Elemente überlappen, ist im Editor der Teil des Texts gekennzeichnet, der geändert wurde. Im folgenden Beispiel können Sie nur einen der Teile ändern (z. B. "Some text"). Klicken Sie zum Bearbeiten auf einen Teil oder drücken Sie die Tabulatortaste, um zum nächsten Teil zu gelangen.

<div>
Some text 
<b> a child element </b>
Some other text
</div>

Die folgenden Modi werden unterstützt:

  1. Ersetzen: Ein vorhandener Textteil wird ersetzt.
  2. Einfügen: Ein neuer Textteil wird im Zielelement am Anfang eingefügt.
  3. Anfügen: Ein neuer Textteil wird im Zielelement am Ende eingefügt.
  4. Vor: Ein neuer Textteil wird vor dem Zielelement eingefügt.
  5. Nach: Ein neuer Textteil wird nach dem Zielelement eingefügt.

Erweiterter Editor – Screenshot "Text bearbeiten"

Eine Textänderung ist sicherer und weniger invasiv als eine HTML-Änderung. Im Idealfall soll sich nämlich nur der Text ändern. Eine Textänderung wirkt sich weder auf die Dokumentstruktur noch auf CSS-Selektoren oder andere Elemente aus. Das gilt auch für Event-Handler, die möglicherweise in den Zielelementen registriert sind.

HTML-Änderung

HTML-Änderungen dienen dazu, HTML zu ersetzen oder neue HTML einzufügen. Die folgenden Modi werden unterstützt:

  • Ersetzen: Der vorhandene HTML-Inhalt wird ersetzt.
  • Einfügen: Ein neuer HTML-Inhalt wird im Zielelement am Anfang eingefügt.
  • Anfügen: Ein neuer HTML-Inhalt wird im Zielelement am Ende eingefügt.
  • Vor: Ein neuer HTML-Inhalt wird vor dem Zielelement eingefügt.
  • Nach: Ein neuer HTML-Inhalt wird nach dem Zielelement eingefügt.

Erweiterter Editor – Screenshot "Text davor einfügen"

Eine HTML-Änderung führt zum Verlust aller Nicht-Inline-Event-Handler. Diese Schaltfläche funktioniert beispielsweise nach einer HTML-Änderung nicht mehr (z. B. "HTML einfügen vor"):
<button id=”button”> My button </button>
<script>
  document.getElementById("button")
    .addEventListener("click", function() {alert(‘hello’);});
</script>

Zu HTML-Änderungen kommt es, wenn die ersten HTML-Inhalte vom Browser geparst wurden. Das bedeutet, dass alle darin enthaltenen Skripte bereits ausgeführt wurden. Aus diesem Grund werden Skript-Tags vom visuellen Editor entfernt, wenn der HTML-Inhalt für die Bearbeitung geladen wird. Dem neuen HTML-Inhalt können keine Skripte hinzugefügt werden. Wenn Sie ein neues Skript als Teil einer Variante ausführen möchten, verwenden Sie eine Skriptänderung (JavaScript ausführen). Vorhandene Skripte können nicht verändert werden.

Anordnungsänderung

Für das Ziehen und Verschieben eines Elements an eine andere Position auf der Seite werden zwei Verfahren unterstützt. Beim Standardverfahren kommt es zu einer Anordnungsänderung. Dabei wird die Position des Elements im DOM verändert. Das Element erhält ein neues übergeordnetes Element und/oder ein oder mehrere gleichgeordnete Elemente. Das führt in der Regel dazu, dass das Element im neuen Bereich den Stil der anderen Elemente übernimmt.

Verwenden Sie eine Anordnungsänderung, wenn Sie Menüelemente oder andere ähnlich aussehende Elemente neu anordnen.

Eine Anordnungsänderung umfasst sowohl einen Quell- und einen Ziel-CSS-Selektor, der über den entsprechenden Dialog geändert werden kann, als auch einen "Verschieben"-Modus:

  • Oben: Das Quellelement wird zum ersten untergeordneten Element des Zielelements.
  • Unten: Das Quellelement wird zum letzten untergeordneten Element des Zielelements.
  • Vor: Das Quellelement wird zum vorherigen gleichgeordneten Element des Zielelements.
  • Nach: Das Quellelement wird zum nächsten gleichgeordneten Element des Zielelements.

Skriptänderung

Optimize kann durch eine Skriptänderung beliebiges JavaScript in jedem Element ausführen, das mit einem CSS-Selektor übereinstimmt. Durch diese Änderung kann in Optimize der JavaScript-Code als Text einer Funktion ausgeführt werden, die das Element als Parameter verwendet.

Sie können auch "head" oder "body" für den CSS-Selektor verwenden und das JavaScript nur einmal ausführen. Schließlich ist auf der Seite auch nur ein solches Element vorhanden. Der von Ihnen verwendete Selektor wirkt sich in Verbindung mit seiner "run at"-Option auf die Vorbedingungen aus, die bestimmen, wann das Skript ausgeführt wird. Weitere Informationen finden Sie im Abschnitt Wenn Änderungsanleitungen angewendet werden unten.

Wenn ein CSS-Selektor mit mehreren Elementen übereinstimmt, wird das bereitgestellte Skript mehrere Male, nämlich einmal pro Skript, ausgeführt. Das Element wird bei jedem Anruf als einzelnes Argument der Funktion übergegeben.

Jeder Anruf findet basierend auf der ausgewählten Option so früh wie möglich statt:

  • Nach dem öffnenden Tag: Nur das öffnende Tag des übereinstimmenden Elements muss geparst worden und auf der Seite verfügbar sein, damit das Skript ausgeführt werden kann.
  • Vor dem schließenden Tag: Alle Inhalte und das schließende Tag des übereinstimmenden Tags müssen geparst worden und auf der Seite verfügbar sein, damit das Skript ausgeführt werden kann.

Beispiel:

  • Wenn Sie die Option "Nach dem öffnenden Tag" mit dem Selektor "head" verwenden, kann die Skriptänderung erst ausgeführt werden, nachdem das Optimize-Snippet zum ersten Mal im <HEAD>-Bereich (Ausführung der synchronen Blockierung) ausgeführt wird.
  • Die Verwendung der Option "Nach dem schließenden Tag" mit dem Selektor "body" bedeutet, dass die Skriptänderung nach dem Ereignis "Dokument fertig" (DOMContentLoaded) ausgeführt wird.

Erweiterter Editor – Screenshot "JavaScript ausführen"

Mehrere Zielelemente

Genau wie bei anderen Änderungstypen können Sie mit einer Anordnungsänderung die zugehörigen Quell- und Ziel-CSS-Selektoren so ändern, dass mit mehreren Elementen übereinstimmen. Wenn Sie beispielsweise mehrere Quellelemente auswählen, haben Sie die Möglichkeit, alle Elemente eines Menüs in ein anderes zu verschieben.

Durch eine Anordnungsänderung wird außerdem ein Zielselektor unterstützt, der mit mehreren Elementen übereinstimmt. Damit kann die Reihenfolge von zwei Tabellenspalten oder eine beliebige andere tabellarische Struktur auf der Seite geändert werden

  • Sollten mehr Ziel- als Quellelemente vorhanden sein, werden zusätzliche Zielelemente ignoriert.
  • Gibt es mehr Quell- als Zielelemente, werden die zusätzlichen Quellelemente im letzten Zielelement hinzugefügt.

An beliebige Position verschieben

Es gibt noch ein alternatives Verfahren für das Verschieben von Elementen an eine andere Position. Aktivieren Sie dazu in den Verschiebungseinstellungen die Option An beliebige Position verschieben.

Optimize-Editor – Schalter "An beliebige Position verschieben"

Dieses Verfahren führt zu positionsbezogenen Stiländerungen, also "links", "oben", "Position" usw. Obwohl sich die Position des Elements in der DOM nicht ändert, wirkt es so, als würde es an eine neue Position verschoben. In der Regel wirkt sich das weder auf den Stil noch auf den Rest der Seite aus.

Verwenden Sie An beliebige Position verschieben, wenn Sie die Position globaler Schaltflächen oder Bereiche (z. B. eines Anmeldebereichs) und bereits positionierter Elemente ändern.

War das hilfreich?
Wie können wir die Seite verbessern?