Referenzen erstellen

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

Inhaltsangabe


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.

Sieh dir das Video an

Wistia video thumbnail

Dieses Video wurde in der alten UI aufgenommen. Wir werden das Video bald updaten.


Elemente und Presets referenzieren

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 (Empfehlung für Presets):

  1. Wähle per Klick das Container-Element des Presets 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 das Kontrollkästchen, um 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 das Aktualisierungsverhalten zu deaktivieren
  • "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.


Teilweises 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 vorgehen musst, um genau das für den Header und andere Presets 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.


Werde ein Teil unserer Community!

Tausche dich mit anderen Webdesignern über aktuelle Entwicklungen, Tipps und Tricks aus und präsentiere deine Lieblingsseiten. Hole dir Feedback und sprich mit uns über Funktionen, die du dir für Sitejet wünschst. Hier gelangst du direkt zur Sitejetters Community.

Zurück zum Anfang

Hilfe benötigt? Kontakt aufnehmen Kontakt aufnehmen