Referenzen erstellen

Stelle dir vor, du möchtest ein bestimmtes Element wie z. B. der Footer oder das Menü mehrmals innerhalb des Projekts verwenden. Der Editor bietet dir mit Referenzen die perfekte Lösung. Wir zeigen dir in diesem Artikel, wie du diese verwendest.

Basiswissen

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

• Alle Designvorgaben des Eltern-Elements durch Element-Einstellungen und CSS-Eigenschaften werden für das Kind-Element übernommen
• CSS-Klassen werden automatisch mit angepasstem Namen übernommen, z. B. wird .ed-headline zu .ed-reference-headline,.ed-text wird zu .ed-reference-text etc. (die CSS-Klassen können im Code Editor einzeln angepasst werden)
• Designvorgaben, die für eine bestimmte Element-ID getroffen wurden, gelten nicht für Referenzelemente, da sie eine individuelle ID erhalten
• Referenzen können jederzeit in eine nicht-verknüpfte Kopie des Eltern-Elements umgewandelt werden. Dadurch sind die einzelnen Inhalte wieder unabhängig vom Eltern-Element und werden auch nicht von Änderungen am Eltern-Element beeinflusst.

Wie man eine Referenz erstellt

Um zu veranschaulichen, wie Referenzen funktionieren, stellen wir den Vorgang anhand eines Banners vor. Das ist nützlich, wenn du den gleichen Header auf allen Unterseiten beibehalten möchtest.

Du kannst Referenzen erstellen, indem du eine der folgenden Methoden nutzt:

Per Rechtsklick (Empfehlung für Elemente):

1. Öffne das Kontextmenü des gewünschten Elements per Rechtsklick
2. Klicke auf Element kopieren
3. Wähle per Klick das Element aus, unter dem du die Referenz einfügen möchtest 
4. Öffne erneut das Kontextmenü des zuvor ausgewählten Elements und klicke auf Referenz einfügen

Dadurch wird das Kind-Element genau dort eingefügt, wo du es haben willst. Das kann auch auf anderen Seiten und Unterseiten sein.

Per Shortcuts:

1. Wähle per Klick das Container-Element des Banners aus, für das die Referenz erstellt werden soll
2. Achte darauf, dass in den Breadcrumbs keine anderen Elemente rechts von diesem Container aufgelistet werden
3. Nutze die Tastenkombination [Strg] + [C], um das Container-Element zu kopieren
4. Wähle per Klick das Element aus, unter dem du die Referenz einfügen möchtest 
5. Nutze die Tastenkombination [Strg] + [Umschalt] + [V], um die Referenz einzufügen

Dadurch wird das Kind-Element genau dort eingefügt, wo du es haben willst. Das kann auch auf anderen Seiten und Unterseiten sein.

Du siehst in den Breadcrumbs, wie sich der Container in Referenz ändert. Auf diese Weise kannst du ganz einfach überprüfen, ob ein Element ein Original oder eine Referenz ist. Die Klassen bleiben bei dem Vorgang gleich.

Referenz-Einstellungen

Mit einem Doppelklick auf das referenzierte Element öffnen sich die Elemente-Einstellungen auf der linken Seite.

Hier findest du die neue ID und einige Einstellungen und Optionen:

• Einstellungen übernehmen: Aktiviere die Checkbox, wenn bestimmte Effekte und Animationen des Eltern-Elements auch für die Referenz gelten sollen
• Konvertieren: Verwende die Option, um die Referenz in ein reguläres Duplikat zu verwandeln und die Verbindung zwischen dem Eltern- und Kind-Element zu trennen, wodurch auch das automatische Aktualisieren deaktiviert wird
• Ziel anzeigen: Hierüber gelangst du zum ursprünglichen Element

Du kannst das Referenzobjekt wie jedes andere animieren und auch eigene Klassen darauf anwenden.

Im Tab Style  im Abschnitt Einstellungen kannst du auch ein Ablaufdatum für die Referenz festlegen, sofern die Option Einstellungen übernehmen nicht aktiviert ist. Nach diesem Datum wird die Referenz nicht mehr angezeigt.

Teilweise Referenzieren

Manchmal willst du nicht, dass der gesamte Header auf einer Unterseite angezeigt wird oder du willst einzelne Worte oder Bilder im Header verändern, Menü und Kontaktdaten sollen aber gleich bleiben. Hier erfährst du, wie du vorgehst, um genau das für den Header und andere Sections zu erreichen.

Vergewissere dich zunächst, dass du den gesamten Header ausgewählt hast, indem du in den Breadcrumbs sicherstellst, dass keine weiteren Elemente rechts vom Container-Element angezeigt werden. Dann klicke mit der rechten Maustaste und wähle "Element kopieren" oder verwende die Tastenkombination [Strg] + [C].

Dieses Container-Element kopierst du jetzt auf die Unterseite, auf der dieser Header genutzt werden soll.

Für unser Beispiel nehmen wir nun folgendes an:

• Auf der anderen Unterseite soll das Hintergrundbild und der Text in der Mitte anpassbar sein
• Die Menüleiste mit dem Logo und die untere Zeile mit Adresse und E-Mail sollen immer gleich bleiben

Dazu werden die gleichbleibenden Elemente referenziert. Wir fangen mit der Menüleiste an und kopieren diese wie zuvor.

Die Referenz für diese Menüleiste fügen wir nun über die Tastenkombination [Strg] + [Umschalt] + [V] oder mit Rechtsklick auf die bereits vorhandene originale Menüleiste und anschließendem Klick auf Referenz einfügen auf der Unterseite ein. Da bereits eine Menüleiste vorhanden ist, sieht das kurzzeitig so aus:

Jetzt löschen wir auf der Unterseite die Original-Menüleiste, so dass nur die Referenz übrig bleibt. Die richtige Leiste erkennst du an den Breadcrumbs.

Das Gleiche wiederholen wir für die Leiste mit der Adresse und der E-Mail und schon verhalten sich diese beiden Elemente immer wie das Original auf der Startseite, während Hintergrundbild und Text angepasst werden können.

Möchtest du diesen Effekt auf mehreren Unterseiten nutzen, kopiere den neu erstellten Header-Container, in welchem die Referenz-Elemente sind.

Bewährte Praktiken

Es ist immer wichtig zu wissen, auf welche Art von Element du verweisen möchtest und wie dieses mit anderen Elementen verbunden ist. Breadcrumbs sind eine gute Möglichkeit, die Elemente zu identifizieren.

Manchmal möchtest du z. B. nicht die gesamte Kopfzeile auf Ihren Unterseiten haben, oder du möchtest die Wörter oder Bilder in Ihrem Kopfbereich ändern, während du die Menüs und Kontaktinformationen konsistent hältst.

Es ist möglich, auf mehrere miteinander verbundene Elemente gleichzeitig zu verweisen. Wir empfehlen, die Referenzmethode zu verwenden, insbesondere für den Kopfbereich, das Menü und die Fußzeile. Diese Elemente sind in der Regel auf jeder Seite identisch.

Wenn du möchtest, dass die Cookie-Leiste auf jeder Seite angezeigt wird, kannst du das Cookie-Element in die Fußzeile setzen, die bereits auf allen Unterseiten referenziert wird, so dass du dich nicht darum kümmern müssen, es überall zu referenzieren.