Webflow: Inhalte selber anpassen

Hallo, ich bin Marcel. Ich habe deine Webseite gebaut, und ich möchte, dass du sie auch selbst in der Hand hast.

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.

Nimm dir beim ersten Mal zwanzig Minuten Zeit. Danach dauert eine Textänderung keine zwei Minuten mehr.

Und wenn du etwas lieber abgibst, bin ich trotzdem da. Support bekommst du bei mir, weil du ihn willst, nicht weil du ihn brauchst.

Was dich erwartet

• Welche Rolle du hast und was sie dir erlaubt
• Einloggen und dich im Edit Mode zurechtfinden
• Texte ändern und Bilder tauschen
• Blogbeiträge und andere CMS Inhalte pflegen und im Voraus planen
• Komponenten und Slots verstehen
• Seitentitel und Beschreibung für Google anpassen
• Veröffentlichen und prüfen
• Anfragen über dein Kontaktformular
• Was du besser mir überlässt, wann du mir Bescheid geben solltest, plus Antworten auf die häufigsten Fragen

Vorab das Wichtigste: Du kannst kaum etwas kaputtmachen. Dein Zugang ist so eingerichtet, dass du genau die Bereiche bearbeiten kannst, die für dich gedacht sind. Design und Struktur sind geschützt. Und solange du nicht veröffentlichst, sieht niemand ausser dir deine Änderungen. Die einzige echte Stolperfalle ist das Löschen von Einträgen, dazu mehr in Abschnitt 6.

1. 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, 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.

[BILD: Rollenübersicht unter People, Content editor markiert]

2. Einloggen

1. Du hast von mir eine Einladung per E-Mail bekommen. Klicke auf den Link darin und lege ein Passwort fest. 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. Ein sicheres Passwort erzeugst du in Sekunden mit meinem kostenlosen Passwort Generator auf marcelschreiner.ch.
4. Nach dem Login siehst du deine Webseite. Klicke sie an, um in die Bearbeitung zu gelangen.

[BILD: Login-Maske webflow.com]

3. Der Edit Mode

Du arbeitest im sogenannten Edit Mode. Das ist eine vereinfachte Ansicht deiner echten Webseite, in der du direkt auf der Seite arbeitest. Du siehst sofort, wie das Ergebnis aussieht. Kein abstraktes Formular, kein Rätselraten.

Wichtig ist der Unterschied zwischen zwei Zuständen:

• Entwurf: Alles, was du bearbeitest, ist zunächst nur ein Entwurf. Nur du siehst ihn.
• Live: Erst wenn du veröffentlichst, wird deine Änderung für Besucher sichtbar.

Das heisst: Du darfst in Ruhe ausprobieren. Nichts davon geht ungewollt online.

[BILD: Edit Mode Oberfläche mit Beschriftung der wichtigsten Bereiche]

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.

[VIDEO: Text direkt auf der Seite ändern, 15 Sekunden]

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 Strg + 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.

[BILD: Bild ersetzen mit sichtbarem Alt-Text-Feld]

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. Eine Breite von rund 2000 Pixeln reicht für praktisch jeden Einsatz.

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

6. Blogbeiträge und andere CMS Inhalte pflegen

Manche Inhalte deiner Seite liegen in sogenannten 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.

[VIDEO: CMS Eintrag erstellen, ausfüllen und veröffentlichen, 20 Sekunden]

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 ist dagegen weg.

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 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.

[BILD: Schedule-Option mit Datum und Uhrzeit bei einem CMS Eintrag]

Ein paar Hinweise dazu:

• Geplant wird nur dieser eine Eintrag. Andere offene Änderungen an deiner Seite gehen dabei nicht mit online.
• 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

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.

Das Prinzip dahinter ist einfach und sehr praktisch: Eine Komponente existiert nur einmal, wird aber an mehreren Stellen angezeigt. Änderst du sie an einer Stelle, ändert sie sich überall gleichzeitig. Deine Telefonnummer im Footer muss also nur einmal angepasst werden, nicht auf zwölf Seiten.

Der Umkehrschluss ist genauso wichtig: Wenn du eine Komponente bearbeitest, wirkt sich das auf alle Seiten aus, auf denen sie vorkommt. Webflow zeigt dir an, wenn du dich in einer Komponente befindest.

[BILD: Komponente im Edit Mode, freigegebene Felder sichtbar]

Bei jeder Komponente habe ich bestimmte Felder für dich freigegeben, meist Titel, Text, Bild und Link. Alles andere ist 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 kannst du weitere Bausteine einsetzen. So baust du eine neue Seite aus fertigen Sektionen zusammen, ohne das Design zu gefährden.

1. Lege eine neue Seite an.
2. Ziehe die vorbereiteten Sektionen der Reihe nach auf die Seite, zum Beispiel Titelbereich, Textblock, Referenzen, Kontakt.
3. Fülle in jeder Sektion die freigegebenen Felder aus.
4. Trage Seitentitel und Beschreibung ein, wie in Abschnitt 10 beschrieben.
5. Veröffentliche die Seite.

[VIDEO: Sektion in einen Slot ziehen und Inhalte ausfüllen, 20 Sekunden]

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.

[BILD: Seiteneinstellungen mit SEO-Titel und Beschreibung]

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 Werkzeug 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. Wähle deine Domain aus.
3. Bestätige. Nach wenigen Sekunden ist die Änderung live.

[BILD: Publish Button mit Domain-Auswahl]

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

Siehst du keinen Publish-Button, ist dein Zugang so eingerichtet, dass ich veröffentliche. Schick mir dann einfach eine kurze Nachricht.

Prüfe danach deine Seite im Browser. Siehst du die Änderung nicht, lade die Seite einmal ohne Zwischenspeicher neu. Auf dem Mac mit Cmd + Shift + R, unter Windows mit Strg + 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 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 Projekt.

14. Wann du mir Bescheid geben solltest

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. Meine Kontaktangaben findest du auf marcelschreiner.ch.

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. Auf marcelschreiner.ch findest du zudem kostenlose Werkzeuge, etwa den Image Optimizer, Search & Social Preview oder die Website Analyse.

Und falls du jemanden kennst, der eine Webseite braucht: Für jede erfolgreiche Empfehlung bekommst du eine Stunde Support-Guthaben geschenkt.

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 brauchst.

16. Häufige Fragen