Mit Hilfe von Elementen und Website Sections 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 Überschriften zur Verfügung. Sie sind die "kleinste Einheit" im Website Builder, die die Grundfunktionen wie Texte, Buttons, Überschriften etc. umfassen. Website Sections kombinieren Elemente und erweitern diese um weitere Design-Optionen.

Unsere Empfehlung ist zuerst nach einer passenden Website Section 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 zusammenzubauen. Wie man mit Website Sections arbeitet, zeigen wir in unserem Hilfeartikel zu Website Sections.

Um die Inhalte eines Elements zu bearbeiten klicke 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 rechten 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 + Hinzufügen und wähle die Kategorie Elemente. 

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 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 Builder 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 Einstellungen der Website Section zu wechseln, sofern das Element teil einer Website Section ist. Näheres hierzu erklären wir im Hilfeartikel über Website Sections.

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.

Einstellungen für Website Sections

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

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: Website Section

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 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 eine Website Section zu verwenden, da diese bereits responsiv aufgebaut sind. Zum Anderen kannst du Angaben zu Höhen, Breiten, Positionierung, etc. für die jeweilige Ansicht (Desktop, Tablet, Mobil) anpassen. 

Wechsle dazu über die drei Icons in der oberen Menüleiste des Website Builders in die gewünschte Ansicht und ändere den entsprechenden Wert. Wechsel in die Tablet-Ansicht und mache deine gewünschten Anpassungen.

Um Einstellungen für Mobile zu ändern, wechsle zum Smartphone-Icon und nimm deine gewünschten Änderungen vor. 

Ä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 die Einstellungen von Website Section bereits anders definiert wurden. Ä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. 

Zurück zum Anfang