Abschnitte und Elemente

Jede Seite deiner Website ist ein Stapel aus Abschnitten: oben ein Hero, dann Leistungen, Preise, ein Kontaktformular und so weiter. Ein besonderer Abschnitt, der Container, enthält kleinere Elemente (Titel, Texte, Buttons, Bilder…), die du frei in Spalten anordnest.

Abschnittstypen

Kopfzeile (Menü) und Fußzeile sind auf jeder Seite immer vorhanden und lassen sich nicht verschieben. Klicke sie in der Liste unter Struktur an, um Logo, Menü-Links, Menü-Button, Fußzeilentexte, Links und soziale Netzwerke zu bearbeiten.

Einstellungen, die alle Abschnitte haben

Wähle einen Abschnitt aus und öffne Aussehen:

• Abschnittshintergrund: keiner, Karte (etwas heller), Leuchten oder Akzentfarbe.
• Abstand oben/unten: kompakt, normal oder großzügig.
• Titelausrichtung: Standard, links oder zentriert.
• Hintergrundbild des Abschnitts und Abdunklung des Hintergrundbilds.
• Größe und Abstände: Breite, Höhe, Außen- und Innenabstand des Abschnitts (siehe Größe und Abstände weiter unten).
• Abschnitts-ID: der Name, der in Links verwendet wird, zum Beispiel #contact. Ein Menü-Link auf #contact scrollt zu diesem Abschnitt. Wenn du die ID umbenennst, werden Links, die darauf zeigten, automatisch angepasst.

Viele Abschnitte haben im selben Tab außerdem eigene Stiloptionen (Spalten, Kartenstil, Bildform und so weiter).

Einen Abschnitt hinzufügen

1. Klicke im Tab Struktur auf den Abschnitt, nach dem der neue erscheinen soll (oder auf keinen, um ihn ans Ende zu setzen).
2. Klicke unter der Liste auf Abschnitt hinzufügen oder öffne rechts den Tab Hinzufügen.
3. Klicke unter Fertige Abschnitte auf den gewünschten Typ.

Der neue Abschnitt kommt mit Beispielinhalten, damit er nie leer aussieht, und ist gleich ausgewählt, sodass du sofort loslegen kannst.

Abschnitte verwalten

In der Liste unter Struktur hat jede Abschnittszeile:

• den Ziehgriff links: Zieh ihn nach oben oder unten, um die Reihenfolge zu ändern;
• das Auge: Auf der Website ausblenden / Auf der Website anzeigen. Ausgeblendete Abschnitte bleiben im Editor (abgeblendet), Besucher sehen sie aber nicht;
• das Menü ⋯: Duplizieren, Nach oben, Nach unten und Abschnitt löschen.

Vor dem Löschen wirst du um Bestätigung gebeten, und mit Strg+Z kannst du einen Abschnitt jederzeit zurückholen.

Elemente: dein eigenes Layout bauen

Mit dem Abschnitt Container (freier Inhalt) baust du jedes beliebige Layout. Wähle ein Spaltenlayout (1, 2, 3 oder 4 Spalten, oder 2/3 + 1/3 und 1/3 + 2/3) und füll die Spalten dann mit Elementen.

Elementtypen

Elemente hinzufügen

Öffne den Tab Hinzufügen. Unter Elemente kannst du:

• ein Element in die Vorschau ziehen. Eine Linie zeigt, wo es landet: in einer Spalte, in einer Box oder zwischen Abschnitten (lässt du es zwischen Abschnitten los, wird dafür ein neuer Container-Abschnitt angelegt).
• auf ein Element klicken, um es direkt nach dem ausgewählten Element einzufügen (oder in die erste Spalte des ausgewählten Containers). Ist kein Container ausgewählt, wird ein neuer Container-Abschnitt hinzugefügt.

Elemente bearbeiten, verschieben, duplizieren und ausblenden

Klicke in der Vorschau auf ein Element, um es auszuwählen. Der Tab Bearbeiten zeigt seine Felder und eine Werkzeugleiste:

• Nach oben / Nach unten (die Pfeile);
• In die vorherige Spalte / In die nächste Spalte (sichtbar, wenn der Container mehr als eine Spalte hat): Das Element wandert ans Ende dieser Spalte und bleibt ausgewählt;
• Anzeigen / Ausblenden (das Auge), um es vor Besuchern zu verbergen, ohne es zu löschen;
• Duplizieren;
• Löschen;
• ✦ AI (Elemente mit Text): öffnet das KI-Feld für den Text des Elements. Siehe Der Editor.
• der Zurück-Pfeil bringt dich zum ganzen Abschnitt zurück.

Du kannst auch den Elementtyp ändern (zum Beispiel aus einem Text eine Karte machen) und die Spalte, in der es sitzt. Mit dem Feld Ausrichtung richtest du das Element links, mittig oder rechts aus.

Größe und Abstände

Jedes Element, jeder Abschnitt und jede Spalte eines Containers hat ein Feld Größe und Abstände: in den Einstellungen des Elements und im Tab Aussehen eines Abschnitts. Leere Felder behalten das Aussehen des Themes, es ändert sich also nichts, bis du einen Wert eingibst.

• Breite, Max. Breite und Höhe: gib eine Zahl ein und wähle daneben die Einheit: px, rem, em, %, vw, vh oder auto. Bei Texten, Buttons und Containern ist die Höhe eine Mindesthöhe (längerer Inhalt passt trotzdem hinein); Bilder und Videos bekommen genau diese Höhe und das Bild füllt sie aus.
• Der Außenabstand (äußerer Ring) ist der Raum um das Element; der Innenabstand (innerer Ring) ist der Raum darin, zwischen Rand und Inhalt. Jeder Ring hat vier Felder: oben, unten und die beiden Seiten. Gib 24 (Pixel), 2rem, 5% oder auto ein (nur Außenabstand: auto auf beiden Seiten zentriert ein Element, das eine Breite hat).
• Der Ketten-Button eines Rings setzt denselben Wert auf alle vier Seiten auf einmal.
• In jedem Feld ändern ↑ und ↓ den Wert um 1 (Umschalt + Pfeil: um 10; bei rem und em um 0,1 und 1).
• Solange der Mauszeiger über dem Feld ist, zeigt die Vorschau den Außenabstand (orange) und den Innenabstand (grün) der Auswahl.
• Zurücksetzen löscht die Werte des Geräts, das du gerade bearbeitest.

Geräte. Die drei Symbole oben im Feld (Desktop, Tablet, Telefon) funktionieren wie die Vorschau-Buttons: wähle eines und die Vorschau wechselt auf diese Größe. Werte, die du dann eingibst, gelten nur für dieses Gerät. Das Tablet übernimmt die Desktop-Werte, solange du ihm keine eigenen gibst, und das Telefon die des Tablets (oder des Desktops); geerbte Werte erscheinen grau in den leeren Feldern, und ein Punkt auf einem Symbol zeigt, welche Geräte eigene Werte haben. Tablet bedeutet Bildschirme bis 1023 px Breite, Telefon bis 640 px.

Spalten. Im Tab Aussehen eines Containers hat Größe und Abstände der Spalten einen Button für jede Spalte (Sp. 1, Sp. 2…): wähle eine und stelle ihre Größe und Abstände ein.

Gut zu wissen:

• Ein Element ist nie breiter als der Platz, in dem es steht, deshalb verursacht eine große Breite in Pixeln auf dem Telefon kein seitliches Scrollen.
• Die Seiten sind „Anfang“ und „Ende“, nicht links und rechts: im Arabischen und anderen Sprachen mit Schreibrichtung von rechts nach links werden die Abstände automatisch gespiegelt.
• Breite, Höhe und Innenabstand eines Buttons bestimmen die Größe des Buttons selbst; sein Außenabstand verschiebt ihn.

Das Element Box / Raster

Mit Box / Raster gruppierst du Elemente, zum Beispiel drei Karten nebeneinander in einer Spalte.

1. Füge ein Element Box / Raster hinzu.
2. Wähle in seinen Einstellungen die Anordnung: Untereinander, In einer Reihe oder ein Raster mit 2, 3 oder 4 Spalten.
3. Wähle das Aussehen der Box: ohne Rahmen, Karte, Glas oder Akzentfarbe. Passe Innenabstand und Abstand zwischen Elementen an.
4. Füge Elemente in die Box ein: Zieh sie in der Vorschau auf die Box oder füge sie unter Elemente in der Box hinzu.

Eine Box kann keine weitere Box enthalten (nur eine Ebene).

Bilder und kostenlose Fotos

Jedes Bildfeld (Hero-Bild, Abschnittshintergrund, Galerie, Kartenbild…) öffnet die Bildauswahl, wenn du auf Auswählen klickst. Sie hat zwei Tabs:

• Meine Bilder: Bilder, die du hochgeladen hast (zieh sie ins Fenster oder klicke auf Hochladen; JPG, PNG, WebP, AVIF oder GIF bis 10 MB), und kostenlose Fotos, die du schon verwendet hast.
• Kostenlose Fotos: Millionen kostenloser, lizenzierter Fotos von Unsplash oder Pexels. Du kannst sie ohne Kosten auf deiner Website verwenden.

So verwendest du ein kostenloses Foto:

1. Klicke bei einem Bildfeld auf Auswählen und öffne den Tab Kostenlose Fotos.
2. Beschreibe das Foto mit ein paar Wörtern auf Englisch, zum Beispiel bakery counter, yoga studio oder mountain lake. Wähle ein Format (Querformat, Hochformat oder quadratisch), wenn die Stelle eines braucht.
3. Klicke auf ein Foto. Es wird zu deinen Bildern hinzugefügt und sofort ins Feld eingesetzt.

Dieselbe Suche findest du im Dashboard unter Bilder → Kostenlose Fotos.

Gut zu wissen:

• Der Name des Fotografen steht unter jedem Ergebnis, und die Fußzeile deiner Website nennt die Fotografen, deren Fotos sie zeigt (zum Beispiel Fotos: Jane Doe auf Unsplash). Das verlangen die Fotodienste, also lass es stehen.
• Unsplash-Fotos bleiben auf den schnellen Servern von Unsplash und werden von dort angezeigt; Pexels-Fotos werden in deine Bilder kopiert.
• Websites aus einer Vorlage oder vom KI-Website-Builder starten eventuell schon mit kostenlosen Fotos, die zu deinem Business passen. Ersetze sie jederzeit durch deine eigenen.
• Deine eigenen Fotos (dein Team, deine Produkte, dein Ort) verkaufen meist besser als Stockfotos. Nutze kostenlose Fotos für Stimmungen, Hintergründe und Orte.

Der Tab Kostenlose Fotos erscheint nur, wenn auf der Plattform der Fotodienst eingeschaltet ist.

Tipps

• Gib jedem Abschnitt ein klares Ziel: eine Überschrift, eine Botschaft, ein Button.
• Mit Duplizieren baust du schnell einheitliche Abschnitte und änderst danach nur die Texte.
• Blende einen Abschnitt aus, statt ihn zu löschen, wenn du ihn vielleicht noch einmal brauchst (zum Beispiel ein saisonales Angebot).