Webflow Build-Modus: Wie und wo Sie Ihre Webseite bearbeiten

In diesem Artikel zeigen wir Ihnen, wie Sie sich im Webflow Build-Modus zurechtfinden und Ihre Inhalte effizient verwalten. Zu jedem Thema stellen wir Ihnen ein Screenrecording mit einer kurzen Anleitung zur Verfügung. Die Anleitungen sind alle für den Build-Modus ausgelegt.

Zugang zum Editor

So kommen sie in den Webflow-Editor (Build-Modus):

• Loggen Sie sich bei Webflow über den Log in Button oben rechts ein (www.webflow.com)
• Gehen Sie zu Ihrem Dashboard und öffnen Sie das Tab "All Sites"
• Wenn Sie mit dem Cursor über die zu öffnende Webseite gehen, erscheint der Button "Open site". Klicken Sie diesen Button.

• Nach dem Webflow fertig geladen hat, befinden Sie sich im Webflow "Designer". Dieser Modus ist noch NICHT Ihr Ziel.
• Wechseln Sie über den Button oben rechts auf "Build".
• Jetzt können Sie mit dem Bearbeiten Ihrer Seite starten:)

Navigation im Editor

Seiten wechseln

Im Webflow-Editor können Sie einfach zwischen den Seiten Ihrer Website navigieren. Nutzen Sie die Seitenauswahl links am Rand oder oben in der Mitte (Icon sieht auch wie ein leeres Dokument), um schnell zu bestimmten Seiten zu wechseln.

Verschiedene Deviceansichten

Wechseln Sie zwischen Desktop, Tablet und Mobile-Ansicht, um sicherzustellen, dass Ihr Design auf allen Geräten optimal dargestellt wird.

Vorschau & Publish

• Verwenden Sie die Vorschau-Funktion, um Änderungen zu testen, bevor sie live gehen. Wenn Sie erneut auf den Vorschau-Button klicken, verlassen Sie den Vorschaumodus wieder.
• Mit dem Publish-Button veröffentlichen Sie all Ihre Änderungen. Wenn die obere Checkbox aktiv ist, werden die Änderungen auf die Beta-Seite (weblow.io) veröffentlicht und sind nur über den direkten Link zugänglich. Sobald Ihre Domain mit Webflow verknüpft ist, können die Änderungen auf ihre Live-Seite geschaltet werden, indem Sie die untere Checkbox aktivieren

Mediathek verwalten

Die Mediathek in Webflow ermöglicht es Ihnen, Bilder und Medien effizient zu verwalten.

Bilder hochladen & strukturieren

• Organisieren Sie Bilder in Kategorien/Ordner, um eine bessere Übersicht zu behalten.
• Ziehen Sie Ihre Dateien per Drag & Drop in die Mediathek oder laden Sie sie manuell hoch.

Alt-Texte hinzufügen

Diese sind wichtig für die Barrierefreiheit und SEO-Optimierung.

Bilder austauschen

Ersetzen Sie Bilder in Ihrer Website mit wenigen Klicks.

Textbearbeitung

Textbearbeitung

Webflow ermöglicht Ihnen, Texte direkt im Build-Modus zu bearbeiten:

• Klicken Sie auf einen Textblock, klicken Sie auf das Stift-Icon und geben Sie die gewünschten Änderungen ein. Auch ein Doppelklick auf den Text ist möglich.
• Verwenden Sie den Text-Editor (Text blau markieren), um Formatierungen wie Fett, Kursiv oder Links hinzuzufügen.

Übersetzungen

Übersetzen von Texten

Mit Webflow Localization können Sie Übersetzungen direkt im Bearbeitungsmodus von Webflow generieren.

• Klicken Sie ganz oben auf den Sprachwechsler und wechseln Sie von der Standardsprache zu der Sprache, in der Sie die Übersetzungen erfassen wollen.
• Wählen Sie den zu übersetzenden Text an. Mit einem Klicke auf das Globus-Icon übersetzt Webflow den entsprechenden Text automatisch. Mit Doppelklick in das Feld können Sie die erstellte Übersetzung noch überarbeiten.

Übersetzen von Collection-Items

Auch alle Felder von Collection-Items (z.B. von einem Magazinbeitrag, einem Teammitglied, ...) können übersetzt werden.

• Öffnen Sie dafür den CMS-Tab (das Icon sieht einem gestapelten Kuchen ähnlich).
• Wählen Sie eine Collection und ein Collection-Item aus.
• Falls sie nur spezifische Felder übersetzen möchten, können sie das Globus-Icon vom gewünschten Feld anklicken.
• Falls Sie alle Felder übersetzt haben möchten, dann klicken Sie oben rechts auf den "Translate all fields" Button. 
• In beiden Fällen können Sie bei Bedarf die automatischen Übersetzungen noch überarbeiten.
• Sichern Sie Ihre Änderungen ;)

Collections & Items

Webflow Collections sind dynamische Inhaltsstrukturen, die z. B. für Blogposts, Teamseiten oder andere Gefässe genutzt werden.

Item bearbeiten

• Öffnen Sie dafür den CMS-Tab (das Icon sieht einem gestapelten Kuchen ähnlich).
• Klicken Sie auf eine Collection, anschliessend auf ein Item, um es zu bearbeiten.
• Speichern Sie Ihre Änderungen;)

Neue Einträge hinzufügen

• Klicken Sie oben rechts "New XY"
• Nun können Sie die Felder wie Titel, Beschreibung, Bilder oder weiteres ausfüllen.

Status wechseln oder löschen

Die Items können alle einen anderen Status haben und auch anders abgespeichert werden.

Diese Stati existieren bei den Collection-Items:

• “Draft” (Entwurf) bedeutet, dass sich das Item in einem Entwurfszustand befinden und somit auf der Live-Seite nicht dargestellt wird. Falls also ein Item noch nicht vollständig ausgefüllt wurde oder noch Änderungsbedarf hat, dann empfehlen wir, es als Entwurf zu speichern.
• "Archived" (archiviert) archiviert das Item. Wenn Sie vorübergehend ein Item (z.B. eine Jobausschreibung) offline nehmen möchten, sie aber für eine mögliche zukünftige Verwendung noch nicht löschen wollen, stellen Sie es auf Archiviert.
• “Published” (veröffentlicht) heisst, dass das Item zum aktuellen Zeitpunkt veröffentlicht und somit auf der Live-Seite sichtbar ist. 
• "Queued to publish" (Veröffentlichungs-Warteschlange) bedeutet, dass das Item beim nächsten publishen der gesamten Seite veröffentlicht wird. Bis dahin ist es auf der Live-Seite noch nicht ersichtlich. 

Folgende Speicheroptionen gibt es bei den Collection-Items:

• "Save Changes" (Änderungen speichern) speichert das Item und ändert dabei nichts an seinem Status (die oben genannten).
• "Publish now" (jetzt veröffentlichen) veröffentlicht dieses Item sofort.
• "Schedule" (terminieren) bietet Ihnen die Möglichkeit, einen Termin für die Veröffentlichung eines Items festzulegen. Dies bietet sich für Ankündigungen oder Ähnlichen an.
• "Remove from queue" (aus Warteschlange entfernen) hat zur Folge, dass das Item mit dem nächsten Publishen nicht veröffentlicht wird und erhält erneut den Status Entwurf.

Verlinkungen

Links in einem Text oder auch die Verlinkungen eines Buttons können ganz einfach angepasst werden. Folgende Verlinkungsoptionen gibt es:

• Interne Links: Verlinken Sie auf andere Seiten Ihrer Webseite.
• Externe Links: Geben Sie eine URL ein, um auf eine andere Website zu verweisen.
• Dokumente: Laden Sie ein Dokument hoch
• Kontaktmöglichkeiten: Auch ein Direktlink zu einer Telefonnummer oder Email sind möglich.

Mit der untenstehenden Checkbox können Sie noch einstellen, ob sich der Link in einem neuen Tab öffnen soll oder nicht.