Webflow: Inhalte selber anpassen

Ich baue Webseiten so, dass meine Kunden sie danach selbst pflegen können. Diese Anleitung zeigt dir, wie das bei einer Webflow-Seite geht... ohne Programmierkenntnisse.
‍
Du sollst Texte ändern, Bilder tauschen und neue Beiträge veröffentlichen können, wann immer du willst, ohne mich zu fragen und ohne Technikwissen. Genau dafür habe ich deine Seite so eingerichtet und dir diese Anleitung geschrieben. Und wenn du etwas lieber abgibst, bin ich trotzdem da. Support bekommst du bei mir, weil du ihn willst, nicht weil du ihn brauchst.
‍

‍

‍

‍

1. Einloggen & Zugriff

1. Du hast von mir eine Einladung per E-Mail bekommen. Klicke auf den Link darin und lege ein Passwort fest. Zudem musst du noch ein paar Fragen für dein Konto beantworten. Falls die Mail nicht ankommt, schau kurz im Spam-Ordner nach.
2. Ab dann meldest du dich immer über webflow.com oben rechts bei "Log in" an.
3. Ich empfehle dir, die Zwei-Faktor-Anmeldung zu aktivieren. Deine Webseite ist ein Geschäftswert, und ein zweiter Faktor schützt sie zuverlässig.
4. Nach dem Login siehst du im Webflow-Dashboard deine Webseite. Klicke auf das Vorschaubild der Webseite, um in die Bearbeitung zu gelangen.

‍

‍

‍
‍

2. Deine Rolle verstehen

Webflow arbeitet mit Rollen. Sie bestimmen, was du auf deiner Webseite tun kannst. Für dich sind zwei davon relevant:

• Content editor: Du bearbeitest Inhalte auf bestehenden Seiten. Texte, Bilder, Links, Inhalte in Komponenten, Blogbeiträge, Alt-Texte und die SEO-Angaben einer Seite. Das ist der Standard und deckt ab, was die meisten Kunden brauchen.
• Marketer: Alles vom Content editor, und zusätzlich kannst du neue Seiten aus fertigen Bausteinen zusammensetzen, die ich für dich vorbereitet habe.

Falls du nicht weisst, welche Rolle du hast, oder merkst, dass du mehr brauchst, sag mir Bescheid. Ein Rollenwechsel ist in einer Minute erledigt.

Abschnitte in dieser Anleitung, die nur mit der Marketer-Rolle funktionieren, sind entsprechend gekennzeichnet.

 
‍

‍

‍

3. Der Edit/Build-Modus

Der Edit- oder Build-Modus ist eine der Hauptansichten, die du brauchen wirst, um den Inhalt auf deiner Webseite anzupassen. Das ist eine vereinfachte Ansicht deiner echten Webseite, in der du direkt auf der Seite arbeitest. Du siehst sofort, wie das Ergebnis aussieht.
Der genaue Name des Modus ändert sich je nachdem, welche Rolle du hast. (Siehe Kapitel 2)

• Edit: Der Modus heisst so, wenn du die Rolle "Content editor" hast.
• Build: Der Modus heisst so, wenn du die Rolle "Marketer" hast.

Wichtig ist, dass Änderungen, die du in diesem Modus machst, nicht sofort auf der Live-Webseite sichtbar werden. Du musst die Änderungen immer noch zuerst mit dem Publish-Knopf veröffentlichen. (Dazu aber mehr in Kapitel 11 Veröffentlichen)

‍

 
‍

4. Texte ändern

1. Öffne die Seite, die du bearbeiten willst.
2. Klicke direkt in den Text, den du ändern möchtest.
3. Tippe deine Änderung, genau wie in einem Textprogramm.
4. Klicke ausserhalb des Textes, um die Änderung zu übernehmen.

Ein paar Hinweise aus der Praxis:

• Achte auf die Textlänge. Wenn aus einer kurzen Überschrift plötzlich ein langer Satz wird, kann das Layout unruhig wirken. Im Zweifel ähnlich lang bleiben wie vorher.
• Formatiere sparsam. Fett für einzelne Begriffe ist gut, ganze fett markierte Absätze verlieren ihre Wirkung.
• Kopierst du Text aus Word oder einer E-Mail, füge ihn ohne Formatierung ein, sonst schleppst du unsichtbare Formatierungen mit. Auf dem Mac mit Cmd + Shift + V, in Safari mit Cmd + Option + Shift + V, unter Windows mit Ctrl + Shift + V.

‍

‍
‍

‍

5. Bilder tauschen

1. Klicke das Bild an, das du ersetzen willst.
2. Wähle das neue Bild aus deinen Dateien oder lade es hoch.
3. Trage einen Alt-Text ein. Das ist eine kurze Beschreibung dessen, was auf dem Bild zu sehen ist. Sie hilft Menschen mit Sehbehinderung und wird von Google gelesen. Ein Satz genügt.

Zur Bildgrösse: Lade keine Fotos direkt aus der Kamera oder vom Handy hoch. Solche Dateien sind oft mehrere Megabyte gross und machen deine Seite langsam. Als Faustregel: rund 2000 Pixel Breite für Bilder über die ganze Seitenbreite, rund 1000 Pixel für kleinere Bilder im Text. Als Dateiformat kannst du in 99 % der Fälle .webp wählen.

Zum Verkleinern kannst du mein kostenloses Werkzeug nutzen: den Image Optimizer auf meiner Webseite. Bild hineinziehen, optimiertes Bild herunterladen, hochladen. Fertig.

‍

‍

‍

‍

6. Blogbeiträge und andere CMS-Inhalte pflegen

Manche Inhalte deiner Seite liegen in sogenannten CMS-Collections. Das sind strukturierte Listen, zum Beispiel Blogbeiträge, Referenzen, Teammitglieder oder Angebote. Der Vorteil: Du füllst ein Formular aus, und der Eintrag erscheint automatisch überall dort, wo er hingehört. Das Aussehen musst du nie selbst gestalten.

1. Öffne den CMS-Bereich in der Seitenleiste.
2. Wähle die passende Collection, zum Beispiel Blog.
3. Klicke auf New Item, um einen neuen Eintrag anzulegen, oder auf einen bestehenden Eintrag, um ihn zu bearbeiten.
4. Fülle die Felder aus. Jedes Feld hat einen festen Zweck, zum Beispiel Titel, Vorschaubild, Einleitung und Inhalt.
5. Speichere den Eintrag und veröffentliche ihn, wenn er bereit ist.
6. Wenn du fertig bist, solltest du immer noch in den Edit/Build-Modus zurückkehren und dort nochmals mit "Publish" veröffentlichen.
   (Für Nerds: So wird die sitemap.xml aktualisiert.)

Drei Punkte, auf die du achten solltest:

• Der Slug ist die Adresse des Eintrags. Änderst du ihn nachträglich, funktionieren alte Links auf diesen Eintrag nicht mehr. Lege ihn einmal sinnvoll an und lass ihn dann stehen.
• Pflichtfelder sind markiert. Ohne sie lässt sich ein Eintrag nicht veröffentlichen. Das ist Absicht, damit kein halbfertiger Eintrag online geht.
• Archivieren statt löschen. Willst du einen Eintrag nicht mehr zeigen, archiviere ihn. Er verschwindet von der Webseite, bleibt aber erhalten und lässt sich jederzeit zurückholen. Ein gelöschter Eintrag lässt sich dagegen nur über eine Sicherung der ganzen Seite zurückholen, und das ist aufwendig.

Ein Tipp dazu: Wie dein neuer Beitrag aussieht, wenn ihn jemand auf WhatsApp oder LinkedIn teilt, kannst du vorher mit meinem kostenlosen Werkzeug Search & Social Preview prüfen.

‍

‍

‍

7. Beiträge im Voraus planen

Du musst nicht am Montagmorgen am Computer sitzen, damit dein Beitrag am Montagmorgen erscheint. Webflow kann einen fertigen CMS-Eintrag zu einem bestimmten Zeitpunkt automatisch veröffentlichen.

1. Schreibe den Eintrag fertig und prüfe ihn wie gewohnt.
2. Klicke beim Veröffentlichen nicht direkt auf Publish, sondern öffne die Optionen daneben (Pfeilsymbol) und wähle Schedule.
3. Wähle Datum und Uhrzeit.
4. Bestätige. Der Eintrag geht zum gewählten Zeitpunkt von allein online, du musst nichts mehr tun.

Ein paar Hinweise dazu:

• Bis zum geplanten Zeitpunkt kannst du den Eintrag weiter bearbeiten oder den Termin wieder aufheben.
• Das eignet sich gut für Ferien, Aktionen mit Startdatum oder wenn du mehrere Beiträge auf einmal vorbereiten willst.

‍

‍

‍

8. Komponenten verstehen

Dieses Kapitel gilt für beide Rollen. Auch als Content editor bearbeitest du Inhalte in Komponenten. Neue Komponenten einfügen, entfernen oder verschieben kannst du aber nur mit der Marketer-Rolle (siehe Kapitel 9).

Viele Bereiche deiner Seite sind Komponenten. Eine Komponente ist ein fertiger Baustein, den ich für dich gebaut habe, zum Beispiel ein Kontaktbereich, eine Kundenstimme oder ein Angebotsblock. Sie existiert nur einmal und wird an beliebig vielen Stellen eingesetzt. Jede eingesetzte Stelle nennt Webflow eine Instanz.

Zwei Bereiche in der linken Seitenleiste helfen dir dabei:

• Components: die Liste aller Bausteine, die dir zur Verfügung stehen.
• Navigator: der Aufbau der aktuellen Seite als Liste, von aussen nach innen. Damit wählst du zuverlässig genau das Element an, das du bearbeiten willst, auch wenn es direkt auf der Seite schwer zu treffen ist.

So bearbeitest du eine Komponente:

1. Öffne links den Navigator.
2. Klicke die Komponente an, die du ändern willst, zum Beispiel eine Sektion in einem Page Slot. Sie wird auf der Seite markiert.
3. Rechts erscheinen die Eigenschaften (Properties) dieser Komponente, meist Titel, Text, Bild und Link. Dort trägst du deine Inhalte ein.

Und jetzt der wichtigste Punkt an Komponenten. Es gibt zwei Arten von Inhalt, und sie verhalten sich unterschiedlich:

• Eigenschaften gelten nur für diese eine Stelle. Alles, was rechts im Eigenschaften-Panel steht, gehört zu genau dieser Instanz. Dieselbe Komponente kann auf einer anderen Seite also einen anderen Titel und ein anderes Bild haben.
• Alles andere gilt überall. Inhalte, die nicht als Eigenschaft hinterlegt sind, gehören zur Komponente selbst. Änderst du so einen Inhalt direkt auf der Seite, ändert er sich auf allen Seiten, auf denen die Komponente vorkommt.

Die Faustregel: rechts im Panel arbeitest du nur an dieser einen Stelle, direkt im Inhalt arbeitest du für alle Stellen gleichzeitig. Webflow zeigt dir oben an, wenn du dich innerhalb einer Komponente befindest. Bist du unsicher, klicke den Text an und schau nach rechts. Erscheint er dort als Feld, betrifft deine Änderung nur diese Stelle.

Welche Felder als Eigenschaft freigegeben sind, lege ich beim Bauen fest. Layout, Abstände und Design bleiben gesperrt. Das ist kein Fehler und keine Einschränkung aus Prinzip, sondern das, was deine Seite dauerhaft sauber hält. Du änderst Inhalte, das Design bleibt stabil.

‍

‍

‍

‍

9. Neue Seiten bauen mit Slots

Dieser Abschnitt gilt nur, wenn du die Marketer-Rolle hast.

Ein Slot ist ein vorbereiteter Platzhalter innerhalb einer Komponente. Dort setzt du weitere Bausteine ein. So baust du eine neue Seite aus fertigen Sektionen zusammen, ohne das Design zu gefährden. Im Navigator heisst dieser Platzhalter Page Slot.

Einen leeren Slot füllen

1. Lege eine neue Seite an oder öffne eine bestehende.
2. Klicke im leeren Slot auf Add Component. Links öffnet sich das Components-Fenster mit allen Bausteinen, die dir zur Verfügung stehen.
3. Setze den gewünschten Baustein ein. Entweder klickst du ihn in der Liste an, oder du ziehst ihn mit gedrückter Maustaste in den Slot.
4. Fülle in der neuen Sektion die freigegebenen Felder aus, wie in Kapitel 8 beschrieben.

Eine weitere Sektion in einen gefüllten Slot einfügen

Sobald im Slot etwas drin ist, verschwindet der Knopf Add Component.

1. Wähle zuerst den Page Slot selbst an, am einfachsten über den Navigator.
2. Über dem Slot erscheint ein Pluszeichen. Klicke darauf, das Components-Fenster öffnet sich wieder.
3. Baustein anklicken oder in den Slot ziehen, fertig.

Zum Schluss trägst du Seitentitel und Beschreibung ein, wie in Kapitel 10 beschrieben, und veröffentlichst die Seite (Kapitel 11).

Wenn du eine Sektion brauchst, die es noch nicht gibt, melde dich. Ich baue sie einmal sauber als Komponente, und danach steht sie dir dauerhaft zur Verfügung.

‍

‍

‍

‍

10. Seitentitel und Beschreibung für Google

Jede Seite hat einen Titel und eine kurze Beschreibung, die Google in den Suchergebnissen anzeigt. Beides kannst du selbst anpassen.

1. Öffne die Seiteneinstellungen der Seite, die du bearbeiten willst.
2. Trage unter SEO einen Titel ein: kurz und klar, idealerweise unter 60 Zeichen, mit dem wichtigsten Begriff vorne.
3. Trage eine Beschreibung ein: ein bis zwei Sätze, die neugierig machen, rund 150 Zeichen.
4. Veröffentliche die Seite.

Bei Blogbeiträgen und anderen CMS-Einträgen werden Titel und Beschreibung meist automatisch aus den Feldern des Eintrags übernommen. Wie das Ergebnis aussieht, prüfst du mit meinem kostenlosen Tool Search & Social Preview. Bis Google die Änderung anzeigt, können einige Tage vergehen.

‍

‍

‍

‍

11. Veröffentlichen

Deine Änderungen gehen erst online, wenn du sie veröffentlichst.

1. Klicke oben rechts auf Publish.
2. Stelle sicher, dass der Haken bei deiner Live-Domain gesetzt ist.
3. Bestätige. Nach wenigen Sekunden ist die Änderung live.

Wichtig: Publish stellt alle offenen Änderungen online, nicht nur deine. Arbeite ich oder eine andere Person gerade an deiner Seite, würden auch meine unfertigen Anpassungen live gehen. Im Zweifel frag kurz nach, bevor du veröffentlichst.

Prüfe danach deine Seite im Browser. Siehst du die Änderung nicht, lade die Seite einmal ohne Zwischenspeicher neu. Auf dem Mac in Chrome und Firefox mit Cmd + Shift + R, in Safari mit Cmd + Option + R, unter Windows mit Ctrl + F5.

‍

‍

‍

‍

12. Anfragen über dein Kontaktformular

Am Ende zählt nicht, wie schön deine Seite ist, sondern ob Anfragen bei dir ankommen. Darum lohnt sich ein kurzer Blick auf dein Kontaktformular.

• Wohin Anfragen gehen: Jede Anfrage über das Formular kommt per E-Mail an die Adresse, die wir bei der Einrichtung festgelegt haben. Webflow speichert jede Anfrage zusätzlich. Geht eine Mail einmal verloren, ist die Anfrage also nicht weg.
• Spam-Ordner: Die erste Anfrage landet manchmal im Spam. Markiere sie dann als "Kein Spam", danach kommen die weiteren meist zuverlässig an.
• Selbst testen: Schick dir etwa zweimal im Jahr selbst eine Anfrage über deine Webseite. So merkst du früh, falls etwas nicht mehr funktioniert.
• Neue Empfänger-Adresse: Soll eine andere Person oder Adresse die Anfragen bekommen, sag mir Bescheid.

‍

‍

‍

13. Was du besser mir überlässt

Nicht weil du es nicht darfst, sondern weil es schneller und sicherer ist, wenn ich es mache:

• Layout und Abstände verändern
• Neue Seitentypen oder neue Komponenten anlegen
• Die Navigation umbauen
• Neue CMS-Collections oder Felder erstellen
• Weiterleitungen, Formulare und Custom Code
• Grössere SEO-Umbauten an der Seitenstruktur

Eine kurze Nachricht genügt, und ich sage dir ehrlich, ob es ein Zweiminutenjob ist oder ein grösseres Projekt.

‍

‍

‍

14. Was rechtliche Folgen hat

Manche Änderungen sehen harmlos aus, haben aber Folgen für deine Datenschutzerklärung oder dein Impressum. Gib mir kurz Bescheid, wenn du:

• ein Video von YouTube, eine Karte von Google Maps oder einen Social-Media-Feed einbetten möchtest.
• einen Newsletter, ein Buchungstool oder einen Onlineshop anbinden willst.
• über das Formular neue Angaben abfragen möchtest, zum Beispiel Geburtsdatum oder Adresse.
• umziehst, deine Firmenform änderst oder neue Kontaktdaten hast.

Solche Anpassungen sind meist schnell gemacht. Wichtig ist nur, dass sie nicht vergessen gehen.

‍

‍

‍

15. Wenn du Hilfe brauchst

Du musst nichts davon allein machen. Wenn du etwas lieber abgibst oder unsicher bist, schreib mir einfach.
Am einfachsten erreichst du mich per WhatsApp für kurze Fragen und per E-Mail für alles, was etwas mehr Erklärung braucht.

‍

Wenn du Aufgaben dauerhaft abgeben möchtest, findest du passende Add-Ons mit aktuellen Preisen in deinem Dashboard, zum Beispiel Content-Update, Support-Guthaben, Uptime Monitoring oder Webseite Statistiken. Fallen Änderungen regelmässig an, ist Content-Update meist entspannter und günstiger, als jedes Mal einzeln abzurechnen.

‍

Du möchtest selbst noch tiefer einsteigen? Die offizielle Dokumentation von Webflow findest du in der Webflow University. Sie ist auf Englisch und deutlich ausführlicher, als du es im Alltag je brauchen wirst.

‍

‍

‍

16. Häufige Fragen