Modul 3 · 3.4
Deutsch
Abschnitte hinzufügen, verschieben und Maße ziehen
Modul 3: Texte, Fotos und Abschnitte · Lesezeit: 10 Minuten
Lernziel: Nach dieser Lektion können Sie eine Seite aus Abschnitten aufbauen. Sie fügen einen Abschnitt über die Auswahl oder den Chat hinzu, verschieben, kopieren und entfernen ihn, ziehen Abstände und Maße und wählen pro Abschnitt Spalten, Ecken, Hintergrund und die Sichtbarkeit auf dem Handy.
Kernbegriffe: Abschnitt, Blöcke, Element hinzufügen, Form, Abschnitt darunter, drei Designs, Mit KI erstellen, Abschnitt bearbeiten, Abstand, Zwischenabstand, Spalten, Ecken, Auf dem Handy ausblenden, Griff, Eigenes HTML
Eine Seite ist ein Stapel von Abschnitten
Jede Seite Ihrer Website besteht aus Abschnitten: horizontalen Bahnen, die untereinander stehen. Ganz oben steht meistens ein Hero (der große Einstieg mit Überschrift, Text und Button), darunter zum Beispiel Karten mit Ihren Leistungen, Bewertungen, Öffnungszeiten und ganz unten Kontakt. Der Builder bietet 35 Arten, jede in einer oder mehreren Formen: derselbe Inhalt, anders gestaltet.
Wer so denkt, baut eine bessere Seite. Setzen Sie die wichtigsten Informationen nach oben, behandeln Sie ein Thema pro Abschnitt und enden Sie mit dem, was der Besucher tun soll (anrufen, mailen, ein Angebot anfordern). Bei Schildersbedrijf Example sieht die Startseite so aus: Hero mit "Angebot anfordern", Karten mit drei Leistungen, Foto und Text zur Arbeitsweise, Bewertungen, Fragen und Kontakt.
Einen Abschnitt hinzufügen: drei Wege
1. Selbst in der Auswahl wählen (kostenlos)
Öffnen Sie das Panel Blöcke in der Seitenleiste, oder klicken Sie in der Vorschau auf Abschnitt darunter: Dieser Button steht in der Werkzeugleiste eines ausgewählten Abschnitts und auf der Linie mit +, die erscheint, wenn Sie die Maus zwischen zwei Abschnitte bewegen. Unter der Vorschau steht außerdem Element hinzufügen.
Die Auswahl zeigt die Arten in Gruppen: Beliebt, Einstieg und Kopf, Text und Geschichte, Leistungen und Produkte, Preise und Angebote, Vertrauen und Team, Foto und Video, Praktische Infos, Kontakt und Aufruf und Eigenes und Widgets. Es gibt ein Suchfeld ("Suchen, zum Beispiel Bewertungen, Preise oder Team"). Jede Art sehen Sie als Vorschau in Ihrem eigenen Corporate Design. Klicken Sie auf eine Art, um die Formen zu sehen, und wählen Sie eine mit Hinzufügen. Sind Sie nicht über einen bestimmten Abschnitt hierher gekommen, fragt der Builder "Wo soll ... hin?": Klicken Sie auf Ihrer Seite auf eine grüne Linie, oder wählen Sie Ganz oben oder Ganz unten. Sie können ein Element auch direkt aus dem Panel auf Ihre Seite ziehen.
Das kostet nichts. Der neue Abschnitt kommt mit Beispieltexten, die Sie danach selbst anpassen (Lektion 3.2) oder von der KI ausfüllen lassen (Lektion 3.1). Wichtig: Solange noch solcher Beispieltext auf Ihrer Website steht, stellt der Builder Ihre Website nicht online. Sie erhalten dann die Meldung "Auf Ihrer Website steht noch Beispieltext. Füllen Sie ihn zuerst aus oder entfernen Sie den Abschnitt."
2. Im Chat fragen: drei Designs
Schreiben Sie im Chat "Ich möchte einen Abschnitt mit unserer Arbeitsweise in vier Schritten", zeigt die KI zuerst drei passende Designs aus der Abschnittsbibliothek, in Ihrem Corporate Design. Sie wählen mit Dieses Design oder klicken auf Die KI wählen lassen. Danach füllt die KI den Abschnitt mit Inhalt, als Vorschlag. Weil ein Abschnitt hinzukommt, kostet das 2 Bearbeitungen.
Sagen Sie, dass etwas in einen bestehenden Abschnitt soll ("setze die Öffnungszeiten in den Kontaktblock"), oder nennen Sie einen Dienst wie Spotify oder Calendly mit einem Link, überspringt der Builder die drei Designs: Dann ist klar, was Sie möchten.
3. Ein eigenes Element erstellen lassen
Ist das Gesuchte nicht dabei? Ganz oben in der Auswahl steht Eigenen Abschnitt mit KI erstellen. Beschreiben Sie, was Besucher tun können sollen, zum Beispiel einen Preisrechner oder ein kurzes Quiz, und klicken Sie auf Mit KI erstellen. Das kostet 2 Bearbeitungen, denn es kommt ein neues Element hinzu.
Verschieben, kopieren und entfernen
Bewegen Sie die Maus über einen Abschnitt. Es erscheint eine Werkzeugleiste mit Mit KI anpassen, Nach oben, Nach unten, Duplizieren, Abschnitt darunter und Löschen, sowie ein Griff, um den Abschnitt zu verschieben ("Diesen Abschnitt an eine andere Stelle ziehen"). Bei Löschen fragt der Builder zuerst "Sicher?". Auch einzelne Elemente innerhalb einer Reihe, etwa eine Karte oder eine Bewertung, können Sie verschieben, duplizieren und entfernen.
Alle diese Buttons sind kostenlos. Jede Aktion erzeugt eine neue Version ("Abschnitt verschoben (Version ...)"), einen versehentlich entfernten Abschnitt holen Sie also über Versionen zurück (Lektion 3.5). Entfernen über eine Anweisung im Chat kostet dagegen eine Bearbeitung: Nutzen Sie also den Button.
Maße ziehen
Bewegen Sie die Maus in der Vorschau über einen Abschnitt, ein Foto oder einen Text, und es erscheinen Griffe. Ziehen ist kostenlos und kommt ohne KI aus:
- Unterkante eines Abschnitts: mehr oder weniger Abstand über und unter dem Abschnitt.
- Hero: höher oder niedriger machen.
- Foto: breiter oder schmaler, höher oder flacher (die Form), rundere oder eckigere Ecken und der Fokuspunkt (Lektion 3.3).
- Textblock: breiter oder schmaler (rechter Rand).
- Überschrift: größer oder kleiner, und der Abstand darunter.
- Reihe von Karten oder Spalten: die Breite der ganzen Reihe.
Doppelklicken Sie auf einen Griff, und das Standardmaß kehrt zurück; beim Hero wählt der Builder dann selbst wieder die Höhe.
Warum Ziehen besser ist, als "mach es größer" zu schreiben: Sie sehen sofort, was passiert, es kostet nichts, und die KI ändert dabei keinen Text.
Abschnitt bearbeiten: die Einstellungen eines Abschnitts
Klicken Sie auf einen Abschnitt und wählen Sie Abschnitt bearbeiten. Es öffnet sich ein Fenster mit:
| Einstellung | Optionen |
|---|---|
| Hintergrund | Automatisch, Ohne, Helle Fläche, Tönung, Dunkel, Hauptfarbe, Farbverlauf |
| Abstand | von 50% bis 300%, oder Standard |
| Zwischenabstand (zwischen Karten oder Spalten) | 0 bis 96 px, oder Standard |
| Spalten (bei einer Reihe von Karten) | 1 bis 6, oder Standard |
| Ecken | 0 bis 48 px, oder Standard |
| Höhe (nur beim Hero) | 40% bis 100%, oder Standard |
| Auf dem Handy ausblenden | an oder aus |
Darunter stehen dieselben Buttons wie in der Werkzeugleiste (Nach oben, Nach unten, Duplizieren, Abschnitt darunter, Löschen) und unter "Oder fragen Sie die KI etwas anderes:" ein Textfeld für eine KI-Anweisung, die nur diesen Abschnitt betrifft.
Ein paar Tipps. Wechseln Sie die Hintergründe ab (helle Fläche, ohne, Tönung), damit Besucher sehen, wo ein Thema endet. Verwenden Sie bei einer Reihe von Karten höchstens drei oder vier Spalten; auf einem Handy stehen sie ohnehin untereinander. Gehen Sie sparsam mit Auf dem Handy ausblenden um: Blenden Sie nie Ihre Kontaktdaten aus oder etwas, das ein mobiler Besucher braucht. Möchten Sie prüfen, wie es aussieht, wählen Sie Mobil in der oberen Leiste.
Eigenes HTML
In der Gruppe Eigenes und Widgets steht auch Eigenes HTML: ein Abschnitt, in den Sie selbst HTML und, wenn Sie möchten, CSS einfügen. Nach dem Platzieren passen Sie ihn mit HTML bearbeiten am Abschnitt an. Farben und Schriften folgen Ihrem Corporate Design über Variablen wie var(--acc), var(--tekst) und var(--kop-font). Das CSS gilt nur für diesen Abschnitt.
Die Einschränkungen sind gewollt: Scripts, iframes und Formulare funktionieren hier nicht. Für einen Player, einen Kalender, eine Karte oder ein Formular eines anderen Dienstes verwenden Sie das Widget (Lektion 4.3). Eigenes HTML ist für alle, die HTML beherrschen; für alle anderen sind die normalen Abschnitte und die KI der schnellere Weg.
Stolperfallen
- Beispieltext stehen lassen in einem Abschnitt aus der Auswahl: Dann können Sie die Website nicht online stellen.
- Zu viele Abschnitte. Eine lange Seite mit zehn Abschnitten wird nicht gelesen. Entfernen Sie, was nichts beiträgt. Eine Seite hat höchstens 40 Abschnitte, aber so viele brauchen Sie nie.
- Abstände über den Chat regeln. Das kostet Bearbeitungen und ist ungenauer als Ziehen.
- Nur am Computer prüfen. Spalten, Abstände und Ausblenden wirken auf einem Handy anders.
- Im Chat entfernen, obwohl der Button Löschen kostenlos ist.
Im Builder: So gehen Sie vor
- Klicken Sie in der Vorschau auf Abschnitt darunter, oder öffnen Sie Blöcke.
- Wählen Sie eine Gruppe, eine Art und eine Form, und klicken Sie auf Hinzufügen.
- Ersetzen Sie die Beispieltexte selbst oder mit der KI.
- Verschieben Sie mit Nach oben, Nach unten oder dem Griff; duplizieren oder löschen Sie über die Werkzeugleiste.
- Ziehen Sie an der Unterkante für mehr Abstand; doppelklicken Sie, um zum Standard zurückzukehren.
- Öffnen Sie Abschnitt bearbeiten für Hintergrund, Spalten, Ecken, Hero-Höhe und Auf dem Handy ausblenden.
- Prüfen Sie das Ergebnis unter Mobil.
Zusammenfassung
- Eine Seite ist ein Stapel von Abschnitten; 35 Arten, jede in einer oder mehreren Formen.
- Hinzufügen über die Auswahl ist kostenlos und liefert Beispieltext, den Sie ersetzen müssen, bevor Sie online gehen können; über den Chat erhalten Sie drei Designs, und es kostet 2 Bearbeitungen.
- Verschieben, Duplizieren, Entfernen und Maße ziehen sind kostenlos; ein Doppelklick auf einen Griff stellt den Standard wieder her.
- Abschnitt bearbeiten regelt Hintergrund, Abstand, Zwischenabstand, Spalten, Ecken, Hero-Höhe und Auf dem Handy ausblenden.
- Eigenes HTML ist möglich, aber ohne Scripts, iframes und Formulare; dafür gibt es das Widget.
Quiz
Aufgabe
Aufgabe D3.4: Ein Abschnitt dazu, einer weg. Verbessern Sie den Aufbau Ihrer Startseite mit den Buttons und Griffen, ohne unnötige KI-Anweisungen.
Checkliste:
- [ ] die Abschnitte Ihrer Startseite von oben nach unten aufgeschrieben;
- [ ] einen Abschnitt über die Auswahl hinzugefügt und den gesamten Beispieltext ersetzt;
- [ ] einen Abschnitt, der nichts beitrug, mit Löschen entfernt oder zusammengelegt;
- [ ] einen Abschnitt mit Nach oben, Nach unten oder dem Griff verschoben;
- [ ] den Abstand mindestens eines Abschnitts gezogen und einmal per Doppelklick zurückgesetzt;
- [ ] in Abschnitt bearbeiten den Hintergrund oder die Spalten angepasst;
- [ ] die Seite unter Mobil angesehen.
Fragen:
- Wie sah die Reihenfolge Ihrer Abschnitte vorher und nachher aus, und warum haben Sie diese Reihenfolge gewählt?
- Welchen Abschnitt haben Sie entfernt, und warum vermisst ein Besucher ihn jetzt nicht?
- Wie viele Bearbeitungen hat Sie diese Aufgabe gekostet, und welcher Schritt hätte über den Chat Bearbeitungen gekostet?
Nach "erledigt" sehen Sie eine Beispielantwort: von Hero, Zahlen, Karten, Bewertungen, Kontakt zu Hero, Karten, Foto und Text (Arbeitsweise), Bewertungen, Fragen, Kontakt, damit die Leistungen direkt unter dem Einstieg stehen; der Abschnitt Zahlen ist weg, weil die Zahlen ausgedacht waren; die Aufgabe kostete 0 Bearbeitungen, während Entfernen oder ein neuer Abschnitt über den Chat 1 oder 2 gekostet hätte.
Aufgabe D3.4: Ein Abschnitt dazu, einer weg
Diese Aufgabe machen Sie selbst; niemand prüft sie nach. Haken Sie ab, was Sie erledigt haben, und markieren Sie die Aufgabe als erledigt.
Von Hero, Zahlen, Karten, Bewertungen, Kontakt zu Hero, Karten, Foto und Text (Arbeitsweise), Bewertungen, Fragen, Kontakt, damit die Leistungen direkt unter dem Einstieg stehen. Der Abschnitt Zahlen ist entfernt, weil die Zahlen erfunden waren. Die Aufgabe hat 0 Bearbeitungen gekostet; Entfernen oder ein neuer Abschnitt über den Chat hätte 1 oder 2 gekostet.
Ihre Haken und Notizen bleiben nur in diesem Browser; wir senden sie nirgendwohin. Sind Sie angemeldet, speichern wir in Meine Kurse nur, dass Sie die Aufgabe erledigt haben.