Elemente

Mit Hilfe von Elementen und Presets erstellst du in Sitejet schnell und einfach wunderschöne Websites ohne dass zusätzlicher Code notwendig ist. Elemente stellen einzelne Objekte wie z. B. Icons, Slider oder dergleichen zur Verfügung. Presets kombinieren Elemente und erweitern diese um weitere Design-Optionen. In diesem Artikel zeigen wir, wie Elemente verwendet werden. 

ABSCHNITT

Basiswissen

Elemente hinzufügen

Elemente verschieben

Der Style Tab

Preset Einstellungen

Ebenen Handling

Responsive Einstellungen


Basiswissen

Elemente sind in Sitejet die "kleinste Einheit". Mit ihnen werden Grundfunktionen zur Verfügung gestellt. Noch komfortabler geht das mit Presets. Wir empfehlen immer erst einmal nach einem Preset zu schauen. Wie man mit Presets arbeitet, zeigen wir in unserem Hilfeartikel zu Presets.

Sitejet stellt außerdem eine große Auswahl an Website Templates zur Verfügung. Erstelle ein neues Projekt und wähle ein Template aus, das dir gefällt. Bearbeite anschließend dieses Projekt, verschiebe Elemente, ändere Farben und mache dich mit der Oberfläche von Sitejet und der Funktionsweise von Elementen und Presets vertraut.

Um ein Element zu bearbeiten klickst du es doppelt mit der linken Maustaste an oder drückst die [Enter]-Taste wenn es bereits ausgewählt ist. Mit den Pfeiltasten kannst du zwischen den einzelnen Elementen hin und her springen.

Klickst du ein Element doppelt, lassen sich nicht nur die Inhalte bearbeiten, sondern es öffnen sich auf der linken Seite auch zusätzlich die Einstellungen. Hier hat jedes Element seinen eigenen Tab im dem speziell für dieses Element existierende Einstellungen angepasst werden können sowie den "Style" Tab.


Elemente hinzufügen

Um ein Element hinzuzufügen, gehe wie folgt vor:

  1. Bewege deine Maus über den Menüpunkt "Inhalte"
  2. Klicke auf "Element"

Auf der linken Seite öffnet sich nun das Inhalte-Panel, in dem der Elemente-Tab bereits geöffnet ist. Hier kannst du das gewünschte Element auswählen und per Klick auf die [Enter] Taste unter dem aktuell ausgewählten Element einfügen. Du kannst auch mit gedrückt gehaltener linker Maustaste das Element an der gewünschten Stelle ziehen. Achte hierbei auf die orange Linie, die anzeigt, wo das Element eingefügt wird, wenn du die Maustaste loslässt.


Elemente verschieben

Sitejet bietet dir mit Hilfe von Tastenkombinationen und dem Ebenen Handling mehrere Möglichkeiten, um Elemente zu verschieben. Nutz du beispielsweise die Tastenkombination [Strg] + [Pfeiltaste "hoch"], verschiebst du das Element nach oben. Mit [Strg] + [Pfeiltaste "herunter"] verschiebst du das Element entsprechend nach unten.

Mit Hilfe des Ebenen Handlings verschiebst du Elemente, indem du das Label mit der linken Maustaste anklickst, die Maustaste gedrückt hältst und dann das Element durch Bewegen der Maus an die gewünschte Stelle ziehst. Achte hierbei wieder auf die orange Linie.


Der Style Tab

Im Style Tab kannst du grundlegende Design-Vorgaben treffen. Diese Einstellungsmöglichkeiten sind für alle Elemente gleich. Zusätzlich hast du im Style Tab die Möglichkeit, in die Preset-Einstellungen zu wechseln, sofern sich das Element in einem Preset-Container befindet. Näheres hierzu erklären wir im Hilfeartikel über Presets.

Sichtbarkeit

Im Sichtbarkeits-Abschnitt kannst du vorgeben, auf welchen Geräten das aktuell ausgewählte Element angezeigt werden soll. Hierbei wird zwischen "Mobile", "Tablet" und "Desktop" unterschieden.

Zusätzlich kannst du die Deckkraft reduzieren und so mit Transparenz arbeiten. Darüber hinaus gibst du mit "Überlauf" oder auch "overflow" an, ob Inhalt, der über die Grenzen des Elements hinausgeht, trotzdem angezeigt werden soll. Die Pfeile neben den Überlauf-Einstellungen stellen ein, ob bei zu viel Inhalt Scrollleisten jeweils unten, rechts oder automatisch je nach Fenstergröße eingeblendet werden sollen.

Layout (Flexbox-Item)

Sitejet organisiert Elemente nach dem "Flexbox"-Prinzip. Dabei wird für den übergeordneten Container eine Hauptachse ("nebeneinander" oder "untereinander") festgelegt sowie weitere Anordnungsvorgaben getroffen. Dadurch ist immer definiert, wie Elemente angeordnet werden sollen und es gibt keine "bösen Überraschungen" die beim "Verschieben von Hand" auftreten könnten: Das Design ist auf allen Geräten, allen Displayauflösungen und allen Umständen immer berechenbar und fest vorgegeben.

Dazu wird in den "Flexbox-Item"-Einstellungen vorgegeben, wie sich das Element innerhalb des übergeordneten Containers verhalten soll:

  • Die "Basis" gibt an, wie groß das Element auf der Hauptachse im Verhältnis zum übergeordneten Container sein soll
  • Mit "Wachsen" wird vorgegeben, ob das Element bei mehr verfügbaren Platz auch wachsen darf
  • "Schrumpfen" legt fest, um bis zu wie viel das Element schrumpfen darf, um weiteren Platz freizugeben

Abstände

Ohne Abstände wirken Websites schnell sehr "vollgestopft". Im Abschnitt "Abstände" kannst du deshalb Innenabstände (auch "Padding" genannt) und Außenabstände (auch "Margin" genannt) festlegen. Hier hast du die Möglichkeit jeweils oben, unten, links und rechts getrennt voneinander oder für alle den gleichen Wert vorzugeben, indem du ihn im mittleren Feld einträgst.

Rahmen

Rahmen bieten eine interessante Möglichkeit, um bestimmte Elemente besonders hervorzuheben oder einfach vom restlichen Inhalt abzutrennen. In Sitejet kannst du, ähnlich wie bei den Abständen, für alle vier Seiten des Elements unterschiedliche Werte oder über das mittlere Feld für alle den selben Wert vorgeben.

Auch eine Farbe kannst du für den Rahmen vorgeben.

Mit dem Feld "Style" gibst du vor, ob der Rahmen eine "durchgehende", "gestrichelte", "gepunktete" oder "doppelte" Linie sein soll.

Möchtest du dem Element abgerundete Ecken verpassen, gibst du im Feld "Radius" den Radius der abgerundeten Ecken vor. Per Klick auf "Alle Ecken" gibst du für alle Ecken eigene Werte vor. So lässt sich z. B. vorgeben, dass nur die obere linke und die untere rechte Ecke abgerundet sind - deiner Phantasie sind keine Grenzen gesetzt.

Schatten

Schattierungen sorgen für ein räumlichen Eindruck. So lassen sich Elemente "anheben" oder "herabsetzen", um sie stärker in den Fokus zu rücken: 

  • "Normal" ist hierbei der typische Anwendungsfall für Schattierungen, bei dem um das Element herum ein Schatten auf die "dahinter" liegenden Elemente geworfen wird
  • "Eingesetzt" bedeutet, dass die anderen Elemente um das aktuell ausgewählte Element einen Schatten auf das ausgewählte Element werfen

Anschließend passt du über die entsprechenden Felder die Farbe des Schattens, dessen Ausrichtung sowie die Weichzeichnung (= "Blur") des Schattens und Streuung an. 

Positionierung

Über den Abschnitt "Positionierung" gibst du die Positionierung des Elements auf der Website vor: 

  • Bei einer "statischen" Positionierung wird das Element immer genau dort angezeigt, wo es im Editor auch platziert wurde
  • "Relative" Elemente dienen als "Ankerpunkt" für andere untergeordnete Elemente, die also "in" dem relativen Element sind; diese Positionierung ist für Container-Elemente von Bedeutung; hier wird auch der "Z-Index" vorgegeben, mit dem die Position auf der Z-Achse (aus dem Bildschirm heraus) definiert wird
  • "Absolut" positionierte Elemente werden relativ zum nächstgelegenen, übergeordneten Element positioniert, welches eine "relative" Positionierung hat; auch hier lässt sich ein Z-Index vorgeben
  • "Fixiert" sind Elemente relativ zum Browserfenster: So kannst du sicherstellen, dass das Element immer an der selben Stelle im Browserfenster angezeigt wird - egal, ob der Website-Besucher hoch- oder herunterscrollt
  • "Sticky" sorgt dafür, dass ein Element an einer Position relativ zum oberen Bildschirmrand "fixiert" wird, nachdem der Website-Besucher vorbeiscrollt

Transform

Mit Transform kann das Erscheinungsbild des Elements zusätzlich verändert werden. Dafür stehen dir 4 Optionen zur Verfügung:

  • Mit "Translate" verschiebst du das Element auf der Website, ohne, dass die restlichen Elemente verschoben oder anderweitig beeinträchtigt werden
  • "Scale" verändert die Größe des Elements anhand eines prozentualen Faktors
  • "Rotate" dreht das Element um den von dir angegebenen Winkel
  • "Skew" verzerrt das Element auf der X- und Y-Achse wodurch das Element selbst "schräg" wird

ID & Klasse

Im Abschnitt "ID & Klasse" vergibst du IDs, die im Umgang mit Links und CSS notwendig sein können. Auch Klassen weist du hier einem Element zu. Näheres sowohl zu IDs als auch zu Klassen erfährst du in unserem Artikel zu benutzerdefiniertem Code.

Animation

Mit Sitejet kannst du jedem Element ganz einfach verschiedene Animationen zuweisen. Du hast hier verschiedenste Animationen zur Auswahl. Näheres zu diesen Animationen und deren Einstellungsmöglichkeiten zeigen wir dir in unserem Hilfeartikel zu Animationen.

Zeiten

Im Abschnitt "Zeiten" kannst du für jedes Element ein Start- und/oder Ablaufdatum vorgeben, nach dem das Element entweder angezeigt oder nicht mehr angezeigt werden soll.

Sonstiges

Im Abschnitt "Sonstiges" gibst du die Mindest- und Maximalanzahl von Elementen vor. Das ist bei der Zusammenarbeit mit deinen Kunden interessant, wenn du bestimmte Abschnitte oder Elemente freigibst. Die Mindest- und Maximalanzahl geben vor, wie oft ein Element von deinen Kunden dupliziert bzw. entfernt werden darf, um z. B. ein von dir gewünschtes Design nicht zu zerstören.

Das Ursprungselement ist interessant, wenn ein Element dupliziert wird. Es wird automatisch beim Duplizieren mit der ID des Ursprungselements befüllt, sodass nachvollzogen werden kann, von welchem Element das aktuelle Element ursprünglich abstammte.


Preset Einstellungen

Wie eingangs erwähnt greifst du aus jedem Element innerhalb eines Presets auf die Preset-Einstellungen zu. Dazu klickst du im "Style" Tab auf "Preset".

Im oben gezeigten Beispiel werden nach einem Klick auf "Preset" die Preset-Einstellungen des "About with Image" Presets angezeigt, da das aktuell ausgewählte Textelement Bestandteil des "About with Image" Presets ist:


Ebenen Handling

Das Ebenen Handling bietet dir neben dem oben beschriebenen "Verschieben"-Feature zusätzliche Funktionen. Vor allem bietet es eine intuitive Übersicht über alle ineinander verschachtelten Elemente. So siehst du schnell und einfach, in welchen Containern und Presets das jeweilige Element ist und bekommst so einen Eindruck von der Struktur der Website.

Jedes Label besteht aus einem passenden, eindeutigen Icon zum jeweiligen Element, sodass du auf einen Blick siehst, um welches Element es sich handelt. Das Element, über welchem gerade dein Mauszeiger ist, hat zusätzlich noch den Namen des Elements im Label. Außerdem findest du Icons für das Kontext-Menü (Zahnrad), welches du auch mit einem Rechtsklick auf das Element öffnen kannst, zum Duplizieren des Elements (zwei übereinander liegende Papierblätter), zum Verschieben des Elements nach oben und nach unten bzw. nach links und rechts( Pfeil hoch und herunter), zum Öffnen der Preset-Einstellungen (Puzzle-Teil) und zum Öffnen der Animationseinstellungen (Stern). Das Stern-Icon hilft dir außerdem dabei schnell zu sehen, ob für ein Element eine Animation eingestellt wurde.


Responsive Einstellungen

"Responsiv" bedeutet, dass sich das Design je nach anzeigendem Gerät und Displaygröße anpasst, damit die Website den Inhalt jederzeit bestmöglich anzeigt. Sitejet bietet dir hierzu mehrere Möglichkeiten: Zum Einen empfehlen wir immer bei so vielen Dingen wie möglich Presets zu verwenden. Zum Anderen kannst du Angaben zu Farben, Höhen, Breiten, Positionierung, etc. für die jeweilige Ansicht (Desktop, Tablet, Mobil) anpassen. 

Wechsle dazu über die drei Icons am oberen Rand des Editors in die gewünschte Ansicht und ändere den entsprechenden Wert. Im folgenden Beispiel wird für Tablets und Handys der obere Außenabstand der Tabelle angepasst, damit sie etwas weiter weg vom Header-Bereich ist. Gehe dazu wie folgt vor:

  1. Wechsel in die Tablet-Ansicht 
  2. Wechsle in den "Style"-Tab und dort in den Reiter "Element"
  3. Klicke im Abschnitt"Abstände" auf "Definiert" und tippe ins obere Feld beispielsweise "2" ein, nachdem du "rem" augewählt hast

Änderungen in anderen Geräteansichten gelten immer auch automatisch für alle kleineren Geräte: Alle Einstellungen, die du in der Desktop-Ansicht triffst, gelten für alle Gerätetypen, sofern sie nicht durch Preset-Einstellungen überschrieben werden. Änderst du Einstellungen für die Tablet-Ansicht, werden die Einstellungen auch für mobile Geräte, nicht aber für Desktop-Geräte übernommen. Du wirst feststellen, dass sich nach dem Anpassen des oberen Außenabstands die Farbe der Einstellungsbeschriftung von weiß auf "blau" geändert hat - entsprechend der Farbe des Tablet Icons. So kannst du jederzeit erkennen, für welche Gerätetypen die Vorgabe gilt.

Zurück zum Anfang

Hat dir der Hilfeartikel geholfen? Vielen Dank für dein Feedback! Bei der Übertragung ist ein Fehler aufgetreten. Bitte versuche es später erneut.

Hilfe benötigt? Kontakt aufnehmen Kontakt aufnehmen