Was sind Elemente? – Website Editor

Mit Hilfe von Elementen und Section-Templates erstellst du schnell und einfach wunderschöne Websites ohne, dass zusätzlicher Code notwendig ist. Elemente stellen einzelne Objekte wie z.B. Icons, Buttons, Bilder, Überschriften oder dergleichen dar. Section-Templates kombinieren Elemente und erweitern diese um weitere Design-Optionen.

Basiswissen

Elemente sind die "kleinste Einheit" im Website Editor, die die Grundfunktionen wie Texte, Buttons, Überschriften usw. umfassen. Unsere Empfehlung ist allerdings immer zuerst nach einem passenden Section-Template 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.

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 an, lassen sich nicht nur die Inhalte bearbeiten, sondern es öffnen sich auf der linken Seite auch zusätzlich die Einstellungen des Elements. 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 linken Content-Sidebar:

Neben der Content-Sidebar öffnet sich das Inhalte hinzufügen-Panel. Du kannst das Element per Drag & Drop an die gewünschte Position setzen. Die grüne horizontale Linie zeigt dir an, wo das Element platziert wird:

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 und um mehrere Elemente gleichzeitig auszuwählen und einzufügen, haltst 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] bei MacOS), um ein Text-Element einzufügen. Du kannst dir die komplette Shortcut-Liste mit [Strg] + [K] (oder [Cmd] + [K] bei MacOS) im Website Editor anzeigen lassen.

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.

Per Drag & Drop 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 horizontale 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 Section-Template-Einstellungen zu wechseln, sofern sich das Element in einem Section-Container befindet.

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 "händischen Verschieben" 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 der Sichtbarkeit-Einstellungen kannst du vorgeben, ob das ausgewählte Elemente angezeigt werden soll. Du kannst diese Einstellung für die verschiedenen Ansichten, 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 weiter unten.

Zusätzlich kannst du die Deckkraft reduzieren und so mit Transparenz arbeiten. Darüber hinaus gibst du mit Überlauf (overflow) an, ob der 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 (Padding) und Außenabstände (Margin) 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 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 zu trennen.

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

Unter Breite kannst du, ähnlich wie bei den Abständen, für alle vier Rahmen-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 auswählen.

Du kannst außerdem abgerundete Ecken einstellen, indem du entweder für alle Ecken den gleichen Wert im übergeordneten Eingabefeld hinterlegst, oder über Definiert für jede Ecke einen eigenen Wert einträgst.

Schatten

Schatten sorgen für einen 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 die Streuung, an.

Text-Schatten

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

Positionierung

Über den Abschnitt Positionierung, gibst du die Position 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.

Animation

Hier kannst du jedem Element ganz einfach verschiedene Animationen zuweisen.

Sonstiges

Im Abschnitt Sonstiges gibst du die Mindest- und Maximalanzahl von Elementen vor.

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.

Section-Template-Einstellungen

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

Ebenen-Handling

Das Ebenen-Handling bietet dir, neben dem oben beschriebenen Verschieben-Feature, zusätzliche Funktionen. Du kannst außerdem durch Hovern über ein Element sehen, wie die Elemente ineinander verschachtelt 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
Dunkelblau: Container
Orange: Section-Template

Eine schnelle Übersicht ohne Hovern siehst du außerdem bei den Breadcrumbs, die sich im Footer des Website-Editors befinden und die Verschachtelung der Elemente auflistet. Einen gesamten Überblick über die Hierarchien der gesamten Seite, findest du im Navigator.

Jedes Label besteht aus einem passenden und 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
Stern-Icon, um eine Animation anzuzeigen

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, Section-Templates zu nutzen, da diese bereits responsiv aufgebaut sind. Zum Anderen kannst du Angaben zu Farben, Höhen, Breiten, Positionierung, usw. 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:

Wechsel in die Tablet-Ansicht
Stelle sicher, dass du im Style-Tab in der Kategorie Element bist
Klicke im Abschnitt Abstände auf Definiert und klicke in das rechte und linke Feld jeweils eine 6 ein, nachdem du die Einheit px ausgewählt hast

Um die 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 auf 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 Einstellungen der Section-Templates ü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.

Lieblibngszitat: We love y'all, but we love our clients more. (edited)