Elemente und Sections klonen (vorher "Referenzen")

Klone sind Live-Kopien eines Elements. Änderst du das Original einmal, werden alle Klone auf deinen Unterseiten automatisch aktualisiert.

Basiswissen

Eine Klon ist eine verknüpfte Kopie eines Elements mit all seinen Inhalte. Durch diese Verknüpfung existieren ein Eltern- und ein Kind-Element. Das Eltern-Element ist das "Original" und das Kind-Element das geklonte Element. Werden Inhalte des Eltern-Elements angepasst, ändert sich automatisch auch der Inhalt im Kind-Element.

Sobald ein Klon erstellt wurde, kannst du die untergeordneten Elemente darin nicht mehr einzeln auswählen.

Weitere Informationen über Klone: 

• Benutzerdefinierte Klassen, die dem ursprünglichen übergeordneten Element zugewiesen sind, bleiben am Klon erhalten. Er übernimmt damit sämtliches CSS, das für das Original gilt.

• Generische Klassen werden durch die entsprechenden Klon-Klassen ersetzt. Zum Beispiel wird aus .ed-headline zu .ed-reference-headline, und .ed-text wird zu .ed-reference-text, etc.

  • Hinweis: Styles, die für .ed-text, aber nicht für .ed-clone-text geschrieben wurden, greifen unter Umständen nicht mehr.

• Jeder Klon erhält eine eigene ID.

  • Hinweis: Styles, die für eine bestimmte ID geschrieben wurden, greifen unter Umständen nicht mehr.

• Klone funktionieren innerhalb eines Projekts und allen zugehörigen Seiten. Projektübergreifend können sie nicht verwendet werden.

Ein Klon lässt sich in ein eigenständiges Element umwandeln. Danach können alle Komponenten darin bearbeitet werden, denn die Verbindung zum Eltern-Element besteht nicht mehr. Deshalb greifen auch keine weiteren Aktualisierungen des ehemaligen Eltern-Elements.

Einen Klon erstellen

Als Beispiel klonen wir einen Banner. So hältst du den Header auf allen Seiten einheitlich.

Du kannst einen Klon auf folgende Arten erstellen:

• Klicke mit der rechten Maustaste in das Element, das du klonen möchtest, und wähle Klon erstellen. Der Klon wird direkt unter dem Original eingefügt. Prüfe anhand der Breadcrumbs am unteren Rand des Editors, ob das richtige Element ausgewählt ist. Meist ist das das ganz linke Element in den Breadcrumbs oder der übergeordnete Container eines Presets (mit einem Puzzle-Symbol gekennzeichnet).
• Klicke mit der rechten Maustaste auf das Element und wähle Element kopieren. Gehe dann zur gewünschten Stelle, klicke erneut mit der rechten Maustaste und wähle Als Klon einfügen. Das funktioniert auch seitenübergreifend.
• Wähle das Element aus, klicke in den Breadcrumbs mit der rechten Maustaste darauf und wähle Klon erstellen.

Tipp: Mit Tastenkürzeln geht es am schnellsten. Drücke [STRG + C], um das Element zu kopieren, und anschließend [STRG + UMSCHALT + V], um es als Klon nach dem aktuell ausgewählten Element einzufügen. Mit [STRG + V] fügst du stattdessen ein normales Duplikat ein.

Nach dem Erstellen eines Klons trägt der Container in den Breadcrumbs die Bezeichnung Klon. So erkennst du auf einen Blick, ob ein Element ein Original oder ein Klon ist. Die Klassen bleiben unverändert.

Klon-Einstellungen

Mache einen Doppelklick auf einen Klon, um das Einstellungsfenster auf der rechten Seite zu öffnen. Dort siehst du die ID des Klons und findest folgende Optionen:

• Einstellungen kopieren: Aktiviere dieses Kontrollkästchen, um bestimmte Effekte und Animationen des Originals auch auf den Klon anzuwenden.
• Klon umwandeln: Wandelt den Klon in ein normales Duplikat um und deaktiviert die automatische Aktualisierung.
• Ursprungselement anzeigen: Bringt dich zur Position des Originalelements.

Unter Styles kannst du den Klon wie jedes andere Element konfigurieren, zum Beispiel Animationen hinzufügen, ein Ablaufdatum festlegen oder eigene Klassen zuweisen.

Teilweises Klonen

Manchmal möchtest du nicht den gesamten Header klonen. Vielleicht soll eine Unterseite einen anderen Header-Hintergrund haben, während Menü und Infoleiste identisch bleiben. In diesem Fall klonst du nur die gewünschten Teile:

1. Kopiere die gesamte Section. Prüfe in den Breadcrumbs, ob der richtige Container ausgewählt ist. Klicke in den Breadcrumbs mit der rechten Maustaste auf die Section und wähle Kopieren, oder drücke [STRG + C].
2. Füge den Header auf der Unterseite ein. Verwende hier ein normales Einfügen, nicht Als Klon einfügen.

In diesem Beispiel sollen der Header-Hintergrund und der Text in der Mitte anpassbar sein, während Menü und Infoleiste auf allen Unterseiten gleich bleiben. So gehst du vor:

3. Gehe zurück zum ursprünglichen Header und wähle die Infoleiste aus. Prüfe in den Breadcrumbs, ob das richtige Element ausgewählt ist, klicke dann mit der rechten Maustaste und wähle Kopieren.
4. Wechsle zurück zur Unterseite und wähle im Kontextmenü Als Klon einfügen, oder drücke [STRG + CMD + V]. Der Klon wird unter der kopierten Infoleiste eingefügt.
5. Lösche die ursprüngliche (nicht geklonte) Infoleiste, sodass nur der Klon übrig bleibt. Prüfe in den Breadcrumbs, dass du den Klon behältst.
6. Wiederhole die Schritte 3 bis 5 für die Menüleiste.

Infoleiste und Menüleiste sind jetzt Klone und werden aktualisiert, sobald sich ihre Originale ändern. Header-Hintergrund und Text bleiben dagegen frei bearbeitbar. Du kannst dieses Vorgehen beliebig oft wiederholen, um auf allen Unterseiten ein einheitliches Erscheinungsbild zu erhalten.

Best Practices

Überlege dir vor dem Erstellen eines Klons, welches Element du klonen möchtest und wie es mit anderen Elementen zusammenhängt. Die Breadcrumbs helfen dir dabei, das richtige Element zu erkennen. Zum Beispiel möchtest du auf einer Unterseite vielleicht nicht den kompletten Header haben, oder du willst Texte oder Bilder im Header ändern, aber Menü und Kontaktinfos einheitlich lassen.

Mehrere zusammenhängende Elemente lassen sich auch auf einmal klonen. Wir empfehlen Klone vor allem für den Header-Bereich, das Menü und den Footer, da diese in der Regel auf jeder Seite gleich sind.