Die Website pflegst du direkt in Webflow. Du brauchst dafür ein eigenes Webflow-Konto. Die Einladung dazu bekommst du per E-Mail von Swiwi Design.

Erstes Mal
1. Öffne die Einladungs-E-Mail von Webflow und klicke auf den Button in der Mail.
2. Erstelle dein Konto mit deiner E-Mail-Adresse und einem eigenen Passwort.
3. Danach landest du im Webflow-Dashboard. Dort siehst du die Website «Hofi's BBQ and Beer».

Jedes weitere Mal
1. Gehe auf webflow.com und klicke oben rechts auf «Log in».
2. Melde dich mit deiner E-Mail-Adresse und deinem Passwort an.
3. Klicke im Dashboard auf «Hofi's BBQ and Beer». Die Website öffnet sich im Bearbeitungsmodus.

Deine Rolle heisst «Content editor». Du kannst Texte, Bilder und alle Einträge im CMS ändern. Das Design und den Aufbau der Seiten kannst du nicht kaputt machen.

Tipp: Arbeite am Computer mit Chrome, Firefox oder Safari. Auf dem Handy funktioniert das Bearbeiten nicht.

Wenn du die Website öffnest, siehst du in der Mitte die Seite so, wie sie im Internet erscheint.

Oben links findest du zwei Tabs:
«Edit»: Texte und Bilder direkt auf den Seiten ändern (Punkt 3).
«CMS»: alle Einträge, die sich oft ändern: Kurse, Events, News, Biere, Partner und die Grillflotte (Punkte 4 bis 8).

Im Tab «Edit»
Oben in der Mitte wählst du die Seite, z.B. «Home».
Links in der schmalen Leiste: das oberste Symbol zeigt alle Seiten, das Bild-Symbol öffnet die Assets (alle hochgeladenen Bilder).
Oben links neben der Seite: Pfeile zum Rückgängigmachen.
Oben rechts: «Publish», um Änderungen online zu stellen (Punkt 9).

Im Tab «CMS»
Links siehst du die Listen (Collections). Klickst du eine an, erscheinen rechts alle Einträge als Tabelle. Mit einem Klick auf einen Eintrag öffnest du ihn.

Wichtig: Was du änderst, ist zuerst nur gespeichert, aber noch nicht online. Erst mit «Publish» wird es auf der echten Website sichtbar.

Text ändern
1. Klicke oben links auf «Edit» und wähle oben in der Mitte die Seite.
2. Klicke einmal auf den Text. Er bekommt einen blauen Rahmen, darüber erscheint ein kleiner Stift.
3. Klicke auf den Stift oder doppelt auf den Text. Jetzt kannst du schreiben.
4. Klicke neben den Text, um fertig zu sein. Gespeichert wird automatisch.

Bild austauschen
1. Klicke einmal auf das Bild. Darüber erscheinen zwei Symbole: ein Bild-Symbol und ein Zahnrad.
2. Bild-Symbol: Links öffnen sich die Assets. Klicke auf das neue Bild. Ein neues Bild lädst du oben im Assets-Bereich über den Pfeil nach oben hoch.
3. Zahnrad: Öffnet das Fenster «Visual Image Properties». Dort tauschst du das Bild mit «Replace Image» und setzt unter «Alt Text» eine kurze Beschreibung, z.B. «Roland am Smoker». Das hilft Google und Menschen mit Sehbehinderung.

Gut zu wissen
Texte in Kurskarten, Eventkarten oder im News-Ticker kannst du hier nicht ändern. Sie kommen aus dem CMS.
Manche Elemente kommen auf jeder Seite vor, z.B. Navigation und Footer. Eine Änderung dort gilt für die ganze Website.
Lade möglichst JPG- oder WebP-Dateien hoch, nicht breiter als 2500 Pixel und unter 1 MB. Grosse Handyfotos machen die Website langsam.

Die Änderungen gehen erst online, wenn du oben rechts auf «Publish» klickst (Punkt 9).

News erscheinen im Laufband (Ticker) oben auf der Website. Gut geeignet für kurze Hinweise wie «Neuer Winterbock ist da» oder «Stübli am Freitag geöffnet».

So erfasst du eine News
1. Klicke oben auf «CMS» und links auf «News».
2. Klicke oben rechts auf «+ New item».
3. Name: interner Titel, z.B. «Winterbock 2026». Erscheint nicht auf der Website. Der Slug darunter füllt sich automatisch.
4. Aktiv: einschalten. Nur aktive News erscheinen im Ticker.
5. Newstext: der Text, der im Ticker läuft. Kurz halten, ein Satz reicht.
6. Optional einen Button anzeigen: «Button anzeigen» einschalten, unter «Button Text» die Beschriftung eintragen (z.B. «Mehr Infos») und unter «Button Link» die Zieladresse.
7. Klicke oben rechts auf den kleinen Pfeil neben «Create draft» und wähle «Publish now». Die News ist sofort online.

News wieder entfernen
Öffne die News, schalte «Aktiv» aus und klicke auf «Publish now». So bleibt der Eintrag erhalten und du kannst ihn später wieder einschalten.

1. Klicke oben auf «CMS» und links auf «Kurse».
2. Klicke oben rechts auf «+ New item».
3. Fülle die Felder aus. Sie sind in Gruppen geordnet:

Basic info
Name: Name des Kurses, z.B. «Grillkurs Einsteiger». Erscheint auch im Browser-Tab und bei Google. Der Slug (Teil der Webadresse) füllt sich automatisch.

Titel & Intro
Kurs ausgebucht?: ausgeschaltet lassen (siehe Punkt 6).
Icon: «Bbq» für Grillkurse, «Zipfel» für Bierkurse.
Bild: ein Querformat-Foto in das Feld ziehen oder anklicken und auswählen.
Titel und Intro: Überschrift und kurzer Einleitungstext auf der Kursseite.

Kursbeschrieb
Kursbeschrieb Titel und Kursbeschrieb: der ausführliche Text. Was lernt man, was gibt es zu essen, was soll man mitbringen.

Details
Startdatum und Enddatum: über den Kalender auswählen, mit Uhrzeit.
Zeit: so, wie es angezeigt werden soll, z.B. «17.30 – 21.30 Uhr».
Ort: kurz halten, z.B. «Brauerei Zipfelbier in Muttenz».
Kosten: so, wie es angezeigt werden soll, z.B. «CHF 190.– pro Person».
Anzahl Personen: z.B. «max. 12 Personen».

Link
Externe Website: nur ausfüllen, wenn der Kurs bei einem Partner stattfindet und dort gebucht wird.

SEO
Meta Description: ein bis zwei Sätze für Google, maximal 155 Zeichen.
Preis: nur die Zahl, z.B. 190. Wird nicht angezeigt, Google nutzt ihn für die Suchresultate.

4. Speichern: Oben rechts auf den kleinen Pfeil neben «Create draft» klicken und «Publish now» wählen. Der Kurs ist sofort online.
Willst du ihn erst vorbereiten, klicke nur auf «Create draft». Dann ist er gespeichert, aber noch nicht sichtbar.

‍

Wenn alle Plätze vergeben sind, markierst du den Kurs als ausgebucht. Er bleibt auf der Website sichtbar, wird aber als ausgebucht angezeigt.

1. Klicke oben auf «CMS» und links auf «Kurse».
2. Klicke auf den Kurs, der voll ist.
3. In der Gruppe «Titel & Intro» ganz oben findest du den Schalter «Kurs ausgebucht?». Schalte ihn ein (er wird blau).
4. Klicke oben rechts auf «Publish now».

Wird wieder ein Platz frei, schaltest du den Schalter aus und klickst wieder auf «Publish now».

Kurs ist vorbei
Wenn ein Kurs vorbei ist und nicht mehr erscheinen soll, archivierst du ihn:
1. Klicke in der Kurs-Tabelle oben auf «Select…».
2. Setze ein Häkchen beim Kurs.
3. Klicke auf «Update Items» und wähle «Archive».
Archivierte Kurse verschwinden von der Website, bleiben aber gespeichert. Lösche Kurse nur, wenn du sie sicher nie mehr brauchst.

Events funktionieren gleich wie Kurse.

1. Klicke oben auf «CMS» und links auf «Events».
2. Klicke oben rechts auf «+ New item».
3. Fülle die Felder aus:

Basic info
Name: Name des Events, z.B. «Rampenverkauf Dezember 2026». Der Slug füllt sich automatisch.

Titel & Intro
Icon: «Bbq» oder «Zipfel».
Titel und Intro: Pflichtfelder (roter Stern). Überschrift und kurzer Einleitungstext.
Bild: ein Querformat-Foto.

Eventbeschrieb
Der ausführliche Text zum Event.

Details
Startdatum und Enddatum: über den Kalender, mit Uhrzeit.
Zeit, Ort und Kosten: so, wie es angezeigt werden soll.

Link
Anmelde Link: Adresse der Anmeldeseite, falls man sich anmelden muss.
External Link: Adresse für den Button «Mehr Infos», z.B. eine Ticketseite. Leer lassen, wenn es keine gibt.

SEO
Meta Description: ein bis zwei Sätze für Google, maximal 155 Zeichen.
Preis: nur die Zahl, z.B. 45. Wird nicht angezeigt, Google nutzt ihn für die Suchresultate. Ist der Event gratis, leer lassen.

4. Oben rechts auf den Pfeil neben «Create draft» klicken und «Publish now» wählen.

Event vorbei? Gleich wie beim Kurs: «Select…», Häkchen setzen, «Update Items», «Archive».

Die Biere sind schon erfasst. Meistens änderst du einen bestehenden Eintrag, z.B. eine neue Beschreibung oder ein neues Flaschenbild. So funktioniert das Ändern von CMS-Einträgen überall, auch bei Kursen, Events und News.

So änderst du ein Bier
1. Klicke oben auf «CMS» und links auf «Biere». Du siehst alle Biere als Tabelle.
2. Klicke auf das Bier, das du ändern willst. Rechts öffnen sich alle Felder.
3. Ändere, was nötig ist. Gespeichert wird automatisch, online ist es aber noch nicht.
4. Klicke oben rechts auf «Publish now». Jetzt ist die Änderung auf der Website.

Die Felder
Name: Name des Biers, z.B. «Golden Ale».
Slug: Teil der Webadresse (…/biere/golden-ale). Bitte nicht ändern, sonst funktionieren bestehende Links nicht mehr.
Farbe: Akzentfarbe des Biers auf der Website. Klicke auf das Farbfeld oder trage einen Farbcode ein, z.B. #fbb400.
Bild: Produktbild der Flasche oder des Glases. Mit «Replace» tauschst du es aus. Am besten ein freigestelltes Bild im Hochformat.
Alkohol: z.B. «5.0% Vol.».
Sensorik: Aroma und Geschmack. Erscheint auf der Rückseite der Karte «Sensorik».
Geschichte: Hintergrund zum Bier. Erscheint auf der Rückseite der Karte «Geschichte».
Reihenfolge: bestimmt die Position in der Bierliste, 1 steht zuerst. Fügst du ein Bier ein, passe die Nummern der anderen an.

Neues Bier
Gleich wie bei den Kursen: «+ New item», Felder ausfüllen, Pfeil neben «Create draft» und «Publish now».

Saisonbier aus dem Sortiment nehmen
Klicke in der Tabelle auf «Select…», setze ein Häkchen beim Bier und wähle «Update Items» und «Archive». Das Bier verschwindet von der Website, bleibt aber gespeichert.

CMS-Einträge veröffentlichen
Bei einem neuen Eintrag (Kurs, Event, News, Bier) hast du oben rechts diese Möglichkeiten:
«Create draft»: gespeichert, aber noch nicht online. Praktisch zum Vorbereiten.
Pfeil daneben, «Publish now»: sofort online.
Pfeil daneben, «Schedule to publish later»: geht zu einem bestimmten Zeitpunkt automatisch online.
Bei einem bestehenden Eintrag klickst du nach jeder Änderung auf «Publish now».

Änderungen an Seiten veröffentlichen
Texte und Bilder, die du im Tab «Edit» änderst, gehen erst online, wenn du oben rechts auf «Publish» klickst. Im Fenster muss www.hofisbbqandbeer.ch angehakt sein. Bestätige mit «Publish to selected domains». Nach etwa einer Minute ist die Änderung live.

Kontrollieren
Öffne danach hofisbbqandbeer.ch in einem neuen Browserfenster und prüfe deine Änderung. Siehst du noch die alte Version, lade die Seite neu (Mac: Cmd + Shift + R, Windows: Ctrl + F5).

Etwas ist schiefgelaufen?
Keine Panik. Mit den Pfeilen oben links oder mit Cmd + Z (Mac) bzw. Ctrl + Z (Windows) machst du Schritte rückgängig. Bei CMS-Einträgen kannst du den alten Text auch einfach wieder eintippen. Ist etwas Grösseres kaputt, melde dich bei uns. Webflow speichert regelmässig Sicherungen, wir können die Website wiederherstellen.

Hilfe
Swiwi Design, Jörg
Schreib uns eine E-Mail oder ruf an, wir helfen gern.