Was sind Elemente?

Mit Hilfe von Elementen und Presets erstellst du 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 dir, wie Elemente verwendet werden. 

Inhaltsangabe


Basiswissen

Elemente sind die "kleinste Einheit" im Website Editor, die die Grundfunktionen wie Texte, Buttons, Überschriften etc. umfassen. Unsere Empfehlung ist allerdings immer zuerst nach einem passenden Preset zu suchen, da hier mehrere Elemente miteinander verbunden werden und bereits voreingestellte Einstellungen haben, die leicht an deine Bedürfnisse angepasst werden können. So ersparst du dir oft die Arbeit eine Website Section selber zusammenbauen zu müssen. Wie man mit Presets arbeitet, zeigen wir in unserem Hilfeartikel zu Presets.

Um die Inhalte eines Elements 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 herspringen.

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 - in unserem Beispiel ist das zum Beispiel "Überschrift". In diesem Tab findest du immer die Einstellungen, die speziell für dieses Element genutzt werden können. Daneben findest du noch den "Style" Tab, der weitere Einstellungsmöglichkeiten bietet - diese sind für jedes Element gleich.  


Elemente hinzufügen

Um ein Element hinzuzufügen, klicke auf die Kategorie "Elemente" in der Content Sidebar:

Neben der Content Sidebar öffnet sich das "Inhalte hinzufügen"-Panel. Du kannst das Element über Drag und Drop an die gewünschte Position setzen:

Wenn du bereits ein Element im Editor angeklickt hast, reicht auch ein einfacher Klick mit der linken Maustaste, um ein neues Element direkt darunter einzufügen. Um mehrere Elemente gleichzeitig auszuwählen und einzufügen, halte du die Strg-Taste gedrückt während du deine Auswahl triffst. Die Elemente werden dann in der Reihenfolge eingefügt in der du sie angeglickt hast. Du kannst Elemente außerdem super schnell und einfach mit den integrierten Shortcuts einfügen. Nutze bspw. Strg + 2 (oder Cmd + 2), um ein Text-Element einzufügen. Du kannst dir die komplette Shortcut-Liste mit Strg + K (oder Cmd + K) im Website Editor anklicken lassen oder hier gucken. 


Elemente verschieben

Durch die Shortcuts und das Ebenen-Handling hast du mehrere Möglichkeiten, Elemente zu verschieben. Nutzt du beispielsweise die Tastenkombination Strg + Pfeiltaste "hoch", verschiebst du das Element nach oben. Mit Strg + Pfeiltaste "runter" 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 grüne Linie, die dir anzeigt, wo du das Element platzierst. Wenn du ein Element zwischen zwei Container platzieren willst, halte zusätzlich die Strg-Taste gedrückt.


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.

Layout (Flexbox-Item)

Der Website Editor 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 "Layout"-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
  • Wenn du mehrere Elemente nebeneinander hast, werden diese bspw. bei der Mobile-Ansicht untereinander dargestellt. Über "Ordnung" kannst du festlegen an welcher Stelle dieses Element erscheinen soll, ohne die eigentliche Reihenfolge ändern zu müssen. 

Sichtbarkeit

Unter den "Sichtbarkeit"-Einstellungen kannst du vorgeben, ob das ausgewählte Elemente angezeigt werden soll. Du kannst diese Einstellung für die verschiedenen Ansichten von Desktop, Tablet und Mobile anpassen, indem du auf die entsprechenden Icons in der oberen Menüleiste klickst und die Einstellungen dementsprechend vornimmst. Ein Beispiel für solche responsiven Einstellungen findest du unten.

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.

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 in das Feld neben dem Außen- bzw. Innenabstand einträgst.

Rahmen

Rahmen bieten eine interessante Möglichkeit, um bestimmte Elemente besonders hervorzuheben oder einfach vom restlichen Inhalt abzutrennen. 

Bei Stil gibst du vor, ob der Rahmen eine "durchgehende", "gestrichelte", "gepunktete" oder "doppelte" Linie sein soll.

Unter Breits kannst du, ähnlich wie bei den Abständen, für alle vier Seiten des Elements unterschiedliche Werte oder über das obere Feld für alle den selben Wert vorgeben. Außerdem kannst du eine Farbe für den Rahmen vorgeben.

Möchtest du du abgerundete Ecken erzielen, gibst du im Feld "Radius" den Radius der abgerundeten Ecken vor. Entweder du nutzt das Feld neben "Runde Ecken" um den gleichen Wert für alle Seiten festzulegen oder du wählst "Definiert" und kannst für jede Ecke unterschiedliche Werte eintragen.

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. Du kannst zwischen  den folgenden optionen wählen: Standard, Ohne, Außen und Innen. Anschließend passt du über die entsprechenden Felder die Farbe des Schattens, dessen Ausrichtung sowie die Weichzeichnung (= "Blur") des Schattens und Streuung an. 

Text-Schatten

Du kannst nicht nur für das Element, sondern dern auch dem darin enthaltenen Text einen Schatten definieren.

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 vier Optionen zur Verfügung:

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

ID & Klassen

Im Abschnitt "ID & Klassen" 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

Hier kannst du jedem Element ganz einfach verschiedene Animationen zuweisen. 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.

Beim Duplizieren wird das Element automatisch mit der ID des Ursprungselements befüllt, sodass nachvollzogen werden kann, von welchem Element das aktuelle Element ursprünglich abstammt.


Preset-Einstellungen

Wie bereits erwähnt, bestehen Presets aus mehreren Elementen. Wenn du also auf ein Element innerhalb eines Presets klickst, findest du im Style-Tab zwei Kategorien - Element und den Namen des Presets. Unter letzerem verstecken sich die sogenannten Preset-Einstellungen. In unserem Beispiel sehen wir die Preset-Einstellungen für eine Galerie. 


Ebenen-Handling

Das Ebenen-Handling bietet dir neben dem oben beschriebenen "Verschieben"-Feature zusätzliche Funktionen. Du kannst außderdem durch Hovern über ein Element sehen, wie die Elemente ineinander verschaltelt sind. Das wird dir durch die Labels in der linken Ecke eines Elements gezeigt. Ein gutes Unterscheidungsmerkmal bietet zusätzlich der farbliche Kennzeichnung:

  • Hellblau: Element
  • Orange: Preset

Eine schnelle Übersicht ohne Hovern siehst du außerdem in der Breadcrumb, die sich im Footer des Website Editors befindet und die Verschachtelung der Elemente auflistet.

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 kannst du je nachdem über welches Element du hoverst, noch weitere Optionen neben dem Label finden. Im unteren Beispiel findest du die folgenden Optionen: 

  • Ellipsen-Icon, um das Kontext-Menü zu öffnen
  • Duplizieren
  • Löschen
  • Nach oben verschieben
  • Nach unten verschieben


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. Wir bieten dir hierfür mehrere Möglichkeiten: Zum Einen empfehlen wir wann immer es möglich ist Presets zu verwenden, da diese bereits responsiv aufgebaut sind. 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 werden für Tablet und Mobile die seitlichen Außenabstände der Tabelle angepasst, damit die Tabelle nicht so an den Rand gedrängt wird. Gehe dazu wie folgt vor:

  1. Wechsel in die Tablet-Ansicht 
  2. Stelle sicher, dass du im "Style"-Tab im Reiter "Element" bist
  3. Klicke im Abschnitt "Abstände" auf "Definiert" und tippe in das rechte und linke Feld jeweils eine 6 ein, nachdem du px ausgewählt hast 

Um Einstellungen für Mobile zu ändern, wechsle zum Smartphone-Icon und nimm deine gewünschten Änderungen vor. In diesem Fall haben wir den Außenabstand auf 2px reduziert.

Ä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. Sobald du Änderungen für eine Ansicht vornimmst, ändert sich die Label-Farbe - lila für die Tablet-Ansicht und gelb für die Mobile-Ansicht. 


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