Beiträge in diesem Abschnitt

Weitere anzeigen

Überblick über den Editor

  • Aktualisiert

Dieser Artikel behandelt die Bereiche des Editors und zeigt, wie du Abschnitte, Zeilen, Spalten und innere Zeilen hinzufügst und einrichtest und wie du Widgets ausrichtest.

Überblick über die Editor-Oberfläche

Der Editor gliedert sich in mehrere vordefinierte Bereiche: die obere Navigationsleiste, die Seitenleiste und den zentralen Inhaltsbereich (oft Editor-Canvas genannt). Diese Bereiche bilden die Grundlage, um Websites nach deinen Vorstellungen aufzubauen.

Obere Navigationsleiste

Die obere Navigationsleiste im Editor enthält praktische Schnellzugriffe für verschiedene Aktionen an deiner Website.

Das findest du in der oberen Navigationsleiste:

  • Hamburger-Menü. Öffne das Hamburger-Menü auf der linken Seite der oberen Navigationsleiste, um auf das Projekt-Dashboard, die Plattformsprache und verschiedene Ressourcen zum Website-Bau und Support zuzugreifen.
  • Seitennavigation. Klicke auf das Seiten-Dropdown, um eine Liste der Seiten deiner Website zu sehen. Über dieses Menü wechselst du zu einer Seite, indem du sie auswählst.
  • Gerätesymbole. Wechsle über die Gerätesymbole zwischen verschiedenen Bildschirmgrößen (auch Breakpoints genannt). So siehst du in der Vorschau, wie deine aktuelle Seite auf verschiedenen Bildschirmgrößen aussieht, von Desktop über Tablet bis Mobil.
  • Rückgängig und Wiederholen. Klicke beim Arbeiten im Editor nach Bedarf auf die Schaltflächen Rückgänging oder Wiederherstellen.
  • Fortschrittsanzeige. Das Häkchen-Symbol zeigt an, wie weit deine Website gespeichert ist und ob Änderungen erfolgreich gesichert wurden.
  • Vorschau der Änderungen. Klicke auf Vorschau, um deine Website inklusive unveröffentlichter Änderungen auf allen oder einzelnen Bildschirmgrößen anzusehen.
  • Veröffentlichen oder Erneut veröffentlichen. Nutze die Schaltfläche Veröffentlichen, um deine Website mit den neuesten Änderungen zu veröffentlichen.
  • Home-Schaltfläche. Klicke auf das Home-Symbol, um zu deinem Projekt-Dashboard zurückzukehren.

Seitenleiste

Die Seitenleiste ist dein umfassender Werkzeugkasten, um verschiedene Aspekte von Design und Funktion deiner Website zu verwalten.

Das sind die Standardoptionen in der Seitenleiste:

  • Hinzufügen. Von hier ziehst du Widgets, Medien und Seiten-Text per Drag-and-drop auf den Canvas.
  • Seiten. Seiten und Pop-ups hinzufügen, ansehen und verwalten.
  • Thema. Standardstile und Einstellungen für alle Texte, Farben, Buttons, Bilder, Hintergründe, Zeilen, Spalten sowie für Layout, Breite und Abstände deiner Website festlegen.
  • CMS. Kollektionen und gesammelte Inhalte verwalten.
  • AEO/SEO. SEO-Einstellungen für Seiten, Bilder, interne und externe Links und mehr verwalten.
  • Mehr. Bietet Zugriff auf Personalisierung, Einstellungen und das Projekt-Dashboard.

Inhaltsbereich / Canvas

Im Inhaltsbereich / Canvas verschiebst oder ergänzt du unsere Funktionen oder klickst sie an, um sie zu bearbeiten. Im Inhaltsbereich änderst du Bilder und Texte, bearbeitest und löschst Buttons und mehr.

Aufbau des Webseiten-Baukastens

Der Webseiten-Baukasten besteht aus Header, Footer, Zeilen, Abschnitten und Spalten. Jedes Widget, das du hinzufügst, wird in einen dieser Bereiche eingefügt.

Zeilen

Zeilen sind die horizontalen Bereiche deiner Website. Wenn du Widgets und Spalten zu deiner Website hinzufügst, werden sie in diese Zeilen gesetzt. Um zu ändern, wie Inhalte in der Mobilansicht angezeigt werden, klicke im Zeilen-Editor auf den Schalter zum Umkehren der Spaltenreihenfolge.

Du fügst deiner Website Zeilen hinzu, indem du Widgets in die Website ziehst. Wenn du ein Widget zwischen Zeilen oder in einen Bereich ziehst, in dem du eine Zeile ergänzen willst, wird beim Loslassen des Widgets eine neue Zeile erstellt.

Um eine Zeile zu löschen, klicke mit der rechten Maustaste an eine beliebige Stelle der Zeile, um das Kontextmenü zu öffnen, und klicke dann auf Löschen. Alternativ klickst du oben links an der Zeile auf die Schaltfläche Zeile und dann auf Löschen.

Ausführliche Informationen zum Bearbeiten und Anordnen von Zeilen findest du weiter unten unter „Zeilen-Editor".

Zeilen-Editor

Mit dem Zeilen-Editor änderst du den Hintergrund einer Zeile (Farbe oder Bild), fügst einen Rahmen hinzu oder passt den Innen- und Außenabstand der Zeile an. Mit Zeilen ordnest und strukturierst du die Inhalte deiner Website.

Um Zeilen einzurichten, bewege den Mauszeiger oben links über eine Zeile, bis eine Zeilen-Schaltfläche erscheint, und klicke auf Zeile. Das Menü des Zeilen-Editors erscheint.

Dir stehen folgende Einrichtungsoptionen zur Verfügung:

  • Klicke auf die Pfeile Zeile nach oben verschieben und Zeile nach unten verschieben, um die aktuelle Zeile nach oben oder unten zu verschieben.
  • Klicke auf Hinzufügen und wähle eine der folgenden Optionen:
    • Zeile oben. Fügt eine neue Zeile über der aktuellen Zeile ein.
    • Zeile unten. Fügt eine neue Zeile unter der aktuellen Zeile ein.
    • Abschnitt. Fügt der bestehenden Zeile einen Abschnitt hinzu.
    • Spalte. Fügt der bestehenden Zeile eine Spalte hinzu.
    • Innere Zeile. Fügt eine Zeile innerhalb der aktuellen Zeile ein.
  • Um den Innenabstand der Zeile zu entfernen, klicke auf Innenabstand entfernen.
  • Um den Abstand auf den Wert zurückzusetzen, den du im Thema-Abstand festgelegt hast, klicke auf Abschnittabstand zurücksetzen.
  • Um der Zeile eine Eingangsanimation hinzuzufügen (zum Beispiel von rechts einblenden, hereinspringen, hereinzoomen), klicke auf Startanimation und wähle eine Option.
  • Um die Zeile als Abschnitt zu speichern, klicke auf Save as Section und wähle, ob nur die aktuelle Zeile, mehrere Zeilen oder die ganze Seite gespeichert werden soll.
  • Um die aktuelle Zeile auf einem bestimmten Gerät auszublenden (Desktop, Tablet, Mobil), klicke auf die Option zum geräteabhängigen Ausblenden und wähle das Gerät.
  • Um die Zeile zu kopieren, klicke auf Kopieren.
  • Um die Zeile als Anker auf der Seite zu setzen oder einen bestehenden Anker zu löschen, klicke auf Als Anker festlegen oder Anker bearbeiten.
  • Um die Zeile zu löschen, klicke auf Löschen.

Design-Editor für Zeilen

So bearbeitest du den Hintergrundstil oder den Abstand einer Zeile:

  1. Bewege den Mauszeiger oben links über eine Zeile, bis eine Zeilen-Schaltfläche erscheint, klicke auf Zeile und dann auf Design bearbeiten.
  2. Im Tab Einstellungen hast du folgende Optionen:
    • Randlose Zeile. Um die Zeile in eine Zeile mit voller Breite umzuwandeln, bei der Inhalte über die gesamte Bildschirmbreite reichen, klicke auf den Schalter Randlose Zeile. Wenn du keine Zeilen mit voller Breite möchtest, ist die Inhaltsbreite auf 960px begrenzt.
  3. Wähle im Tab Stil eine Hintergrundfarbe, ein Bild oder ein Video. Du hast folgende Optionen:
    • Color
      • Wähle eine Hintergrundfarbe. Eine Verlaufsfarbe überschreibt das Bild und umgekehrt.
      • Klicke auf Rahmen, um eine Rahmenart zu wählen, und bewege den Schieberegler, um die Rahmenstärke festzulegen.
      • Um einen Schatten hinzuzufügen, klicke auf den Schalter Schatten und wähle Farbe, Art und Position des Schattens.
    • Bild

      • Um dem Hintergrund ein Bild hinzuzufügen, klicke auf +, um die Bildauswahl zu öffnen.

      • Um einen Hintergrundbild-Slider zu erstellen, wähle mehrere Bilder in der Bildauswahl aus, siehe „Hintergrundbild-Slider" weiter unten.

      • Wähle, ob das Bild als Cover, Full image, Tile oder No repeat angezeigt wird.

      • Um Parallax-Scrolling für ein Hintergrundbild zu aktivieren, klicke auf den Schalter Parallax scrolling. Ist dies aktiviert, scrollen Hintergrundinhalte langsamer als Vordergrundinhalte.

        Hinweis: Parallax-Scrolling steht für den Hintergrundbild-Slider und auf Mobilgeräten nicht zur Verfügung. Die Möglichkeit, ein Hintergrundbild statisch zu halten, ist auf Tablet und Mobil aufgrund einer iOS-Einschränkung nicht verfügbar.

      • Richte Position, Background overlay, Rahmen und Schatten für das Bild ein.

    • Video. Klicke auf Video auswählen, um hochgeladene Videos anzusehen, oder füge die URL des YouTube-, Vimeo- oder Dailymotion-Videos in das dafür vorgesehene Feld ein. Mehr Informationen zu Video-Hintergründen findest du unter „Element-Hintergründe".

Hinweis: Mehr Informationen zu Hintergründen findest du unter „Element-Hintergründe".

Spalten

Jede Zeile enthält mindestens eine Spalte. Spalten enthalten alle Widgets deiner Website und steuern deren Anordnung. Immer wenn du eine neue Spalte hinzufügst, erscheint sie neben der bestehenden Spalte in dieser Zeile.

Während Desktop- und Tablet-Ansicht bis zu vier Spalten pro Zeile zulassen, können mobile Websites höchstens zwei Spalten in einer Zeile zeigen. Spalten, die du in der Desktop- oder Tablet-Ansicht hinzufügst, nehmen beim Wechsel zur Mobilansicht die volle Seitenbreite ein. Um in der Mobilansicht eine Zeile mit zwei Spalten zu erstellen, wechsle zuerst in die Mobilansicht und füge dann ein Zwei-Spalten-Widget hinzu.

Um eine Spalte zu löschen, klicke mit der rechten Maustaste an eine beliebige Stelle der Spalte, um das Kontextmenü zu öffnen, und klicke dann auf Löschen. Alternativ klickst du oben rechts an der Spalte auf das rote X.

Du kannst Widgets direkt in Spalten setzen oder die Spalte weiter strukturieren, indem du innere Zeilen hinzufügst.

Spalten-Editor

Mit dem Spalten-Editor änderst du den Hintergrund einer Spalte (Farbe oder Bild), fügst einen Rahmen hinzu oder passt den Innen- und Außenabstand der Spalte an. Mit Spalten ordnest und strukturierst du die Inhalte einer Zeile.

So richtest du eine Spalte ein:

  1. Klicke mit der rechten Maustaste auf die Spalte. Das Menü des Spalten-Editors erscheint.

    Hinweis: Wenn die Spalte keinen Innenabstand hat, ist der Rechtsklick nicht direkt möglich. Um in diesem Fall auf die Spalte zuzugreifen, klicke mit der rechten Maustaste auf ein Widget in der Spalte (das sollte das Kontextmenü des Widgets öffnen und oben dessen Namen anzeigen), klicke auf Container auswählen und wähle Spalte. Um zu prüfen, ob es zum Kontextmenü der Spalte gewechselt ist, sieh oben nach; dort sollte nun Spalte stehen.

  2. Klicke auf die Pfeile Spalte nach links verschieben und Spalte nach rechts verschieben, um die aktuelle Spalte nach links oder rechts zu verschieben (die Pfeile sind deaktiviert, wenn es nur eine Spalte gibt).

  3. Um den Design-Editor für Spalten zu öffnen, klicke auf Design bearbeiten. Mehr dazu findest du weiter unten unter „Design-Editor für Spalten". Der Design-Editor für Spalten erscheint.

  4. Klicke auf Hinzufügen und wähle eine der folgenden Optionen:

    • Spalte. Fügt der aktuellen Zeile eine neue Spalte hinzu (maximal 4 Spalten pro Zeile auf Desktop und 2 auf Mobil).
    • Innere Zeile. Fügt eine Zeile innerhalb der aktuellen Spalte ein.
    • Widget unten. Fügt ein Widget hinzu.

  5. Um den Innenabstand der Spalte zu entfernen, klicke auf Innenabstand entfernen.

  6. Um den Abstand auf den Wert zurückzusetzen, den du im Thema-Abstand festgelegt hast, klicke auf Abschnittabstand zurücksetzen.

  7. Um der Spalte eine Eingangsanimation hinzuzufügen (zum Beispiel von rechts einblenden, hereinspringen, hereinzoomen), klicke auf Startanimation und wähle eine Option.

  8. Um die aktuelle Spalte auf einem bestimmten Gerät auszublenden (Desktop, Tablet, Mobil), klicke auf die Option zum geräteabhängigen Ausblenden und wähle das Gerät.

  9. Um die Spalte zu kopieren, klicke auf Kopieren.

  10. Um die Spalte als Anker auf der Seite zu setzen oder einen bestehenden Anker zu löschen, klicke auf Als Anker festlegen oder Anker bearbeiten.

  11. Um die Spalte zu löschen, klicke auf Löschen.

Design-Editor für Spalten

So bearbeitest du den Hintergrundstil oder den Abstand einer Spalte:

  1. Klicke mit der rechten Maustaste auf die Spalte und dann auf Design bearbeiten.

    Hinweis: Wenn die Spalte keinen Innenabstand hat, ist der Rechtsklick nicht direkt möglich. Um in diesem Fall auf die Spalte zuzugreifen, klicke mit der rechten Maustaste auf ein Widget in der Spalte (das sollte das Kontextmenü des Widgets öffnen und oben dessen Namen anzeigen), klicke auf Container auswählen und wähle Spalte. Um zu prüfen, ob es zum Kontextmenü der Spalte gewechselt ist, sieh oben nach; dort sollte nun Spalte stehen.

  2. Wähle im Tab Stil eine Hintergrundfarbe, ein Bild oder ein Video. Du hast folgende Optionen:

    • Color
      • Wähle eine Hintergrundfarbe. Eine Verlaufsfarbe überschreibt das Bild und umgekehrt.
      • Klicke auf Rahmen, um eine Rahmenart zu wählen, und bewege den Schieberegler, um die Rahmenstärke festzulegen.
      • Um einen Schatten hinzuzufügen, klicke auf den Schalter Schatten und wähle Farbe, Art und Position des Schattens.
    • Bild
      • Um dem Hintergrund ein Bild hinzuzufügen, klicke auf +, um die Bildauswahl zu öffnen.
      • Um einen Hintergrundbild-Slider zu erstellen, wähle mehrere Bilder in der Bildauswahl aus, siehe „Hintergrundbild-Slider" weiter unten.
      • Wähle, ob das Bild als Cover, Full image, Tile oder No repeat angezeigt wird.
      • Richte Position, Background overlay, Rahmen und Schatten für das Bild ein.
    • Video. Klicke auf Video auswählen, um hochgeladene Videos anzusehen, oder füge die URL des YouTube-, Vimeo- oder Dailymotion-Videos in das dafür vorgesehene Feld ein. Mehr Informationen zu Video-Hintergründen findest du unter „Element-Hintergründe".

Hinweis: Mehr Informationen zu Hintergründen findest du unter „Element-Hintergründe".

Hintergrundbild-Slider

Hintergrundbild-Slider kannst du nutzen, um Hintergrundbilder für Zeilen oder Spalten festzulegen.

Nachdem du in der Bildauswahl mehrere Bilder ausgewählt hast, klicke auf Fertig. Sobald der Slider erstellt ist, wähle im Dropdown-Menü einen Folienübergang und bewege den Schieberegler, um eine Foliengeschwindigkeit (Sekunden) zu wählen.

Alle anderen Hintergrundbild-Optionen wie Hintergrundüberlagerung, Positionierung und Anzeigestil lassen sich auf den Slider anwenden.

Innere Zeilen

Innere Zeilen bieten zusätzliche Gestaltungsfreiheit, weil du damit Zeilen innerhalb von Spalten hinzufügen kannst. Mit inneren Zeilen variierst du das Spaltenlayout und behältst das allgemeine Design der Zeile bei (zum Beispiel Hintergrund, Abstand, volle Breite).

Genau wie normale Zeilen können innere Zeilen einen eigenen Hintergrund und Abstand haben, in bis zu vier Spalten aufgeteilt werden und ihre Spaltenreihenfolge auf Mobil ändern. Spalten in inneren Zeilen können mit jedem Widget gefüllt werden, aber innere Zeilen können nicht zu solchen Spalten hinzugefügt werden.

Um einer Spalte eine innere Zeile hinzuzufügen, gehe auf eine der folgenden Arten vor:

  • Klicke mit der rechten Maustaste auf die Zeile und dann auf Innere Zeile hinzufügen. Wenn die Zeile mehrere Spalten hat, wähle, zu welcher Spalte du die innere Zeile hinzufügen willst.
  • Klicke mit der rechten Maustaste auf die Spalte und dann auf Innere Zeile hinzufügen.
  • Klicke mit der rechten Maustaste auf die innere Zeile und dann auf Zeile hinzufügen, um eine innere Zeile unter der aktuellen zu platzieren.

Beispiel für innere Zeilen

Als Beispiel dafür, wie du innere Zeilen nutzt, sehen wir uns zwei Wege an, ein Layout mit einem Titel und 3 Buttons zu gestalten:

Beispiel 1: Füge zwei Zeilen hinzu. Setze den Titel in Zeile 1 mit 1 Spalte. Teile Zeile 2 in 3 Spalten auf. Setze in jede Spalte einen Button. Beachte: Zwei separate Zeilen können nicht dasselbe Hintergrundbild teilen, und du musst Abstand und Vollbreiten-Stil für jede Zeile separat festlegen.

Beispiel 2: Füge eine Zeile hinzu. Standardmäßig enthält jede Zeile eine Spalte. Füge der Spalte 2 innere Zeilen hinzu. Setze den Titel in innere Zeile 1. Teile innere Zeile 2 in 3 Spalten auf. Setze in jede Spalte einen Button. Diese beiden inneren Zeilen teilen sich Hintergrund, Abstand und Vollbreiten-Stil der Hauptzeile.

Ein paar wichtige Punkte beim Bearbeiten innerer Zeilen:

  • Mit den Pfeilen zum Umsortieren kannst du nur die Reihenfolge zwischen inneren Zeilen ändern. Um die Reihenfolge von Widgets und inneren Zeilen zu ändern, musst du die Widgets manuell über oder unter die innere Zeile ziehen.
  • Widgets mit 2, 3 und 4 Spalten können nicht in innere Zeilen gesetzt werden. Um eine Spalte hinzuzufügen, klicke mit der rechten Maustaste auf die Zeile und dann auf Spalte hinzufügen.
  • Anders als normale Zeilen können innere Zeilen nicht kopiert und eingefügt werden.

Designte Abschnitte (vorgefertigte Abschnittsvorlagen)

Abschnitte sind vorgefertigte Zeilen aus Elementen, die du deinen responsiven Websites hinzufügen kannst. Mit Abschnitten baust du schnell ansprechende Websites und sparst Zeit beim Gestalten. Die Infrastruktur wurde geschaffen, um mit einer Vielzahl vorgefertigter Abschnitte ein besseres Nutzererlebnis zu bieten.

Hinweis:

  • Abschnitte nutzen kein eigenes CSS und werden alle von Designern im Editor erstellt.
  • Abschnitte übernehmen weder die Textfarbe noch die Schriftart aus den Thema-Einstellungen. Du kannst die Formatierung aber jederzeit entfernen und dein eigenes Design anwenden.

Abschnitte hinzufügen

So fügst du Abschnitte aus Widgets hinzu:

  1. Bewege den Mauszeiger zwischen zwei Zeilen und klicke auf Abschnitt hinzufügen.
  2. Wähle Designed. Die Abschnitte erscheinen in der Seitenleiste.
  3. Im Abschnitts-Modus steht im linken Panel eine Galerie vorgefertigter Abschnitte bereit, gruppiert in Kategorien (Intro, Features, About, Team, Testimonials und so weiter).
  4. Klicke in der Seitenleiste auf einen Abschnitt, um ihn als neue Zeile anzuzeigen. Anschließend kannst du mit den Pfeiltasten durch Abschnitte derselben Gruppe blättern oder einen Abschnitt aus einer anderen Gruppe wählen.
  5. Um den Abschnitt in die Website einzubauen, klicke auf Speichern. Alternativ klickst du auf Speichern und weiteres hinzufügen, um weitere Abschnitte hinzuzufügen. Der Abschnitt wird in eine Zeile umgewandelt und alle Elemente im Abschnitt sind bearbeitbar.

Einen Flex-Abschnitt mit KI erstellen

Um den Erstellungsprozess zu vereinfachen und die Gestaltungsfreiheit zu erhöhen, kannst du den KI-Assistenten nutzen, um Inhalt und Design für Flex-Abschnitte zu erzeugen.

Eine ausführliche Anleitung zum Erstellen von Flex-Abschnitten mit KI findest du unter „Einen Flex-Abschnitt mit KI erstellen".

Widgets ausrichten

Wenn du Widgets innerhalb derselben Spalte ausrichtest, versucht der Webseiten-Baukasten, sie per Snap-to-Align auf genau dieselbe Größe zu bringen. Beim Ändern der Größe springt der Baukasten vor oder zurück, um an der Position einzurasten. Das erleichtert es, Widgets exakt gleich groß zu machen.

Es gibt außerdem eine Snap-to-Grid-Funktion. Die Snap-to-Grid-Funktion hilft dir, Widgets mit professioneller Präzision auf den Seiten deiner Website anzuordnen. Mit diesem System richtest du Widgets horizontal und vertikal in Spalten und Zeilen aus. Beim Verschieben eines Elements in seiner Zeile oder Spalte oder beim Ändern der Größe eines Widgets erscheinen Hilfslinien. Die ausgerichteten Elemente sind mit einem farbigen Rahmen markiert. Je nach Anwendungsfall kann ein Widget mit mehr als einem anderen Widget ausgerichtet sein.

Die Ausrichtung funktioniert in allen drei Geräteansichten (Desktop, Tablet, Mobil).

Verwandte Beiträge

Kommentare

0 Kommentare

Zu diesem Beitrag können keine Kommentare hinterlassen werden.