webflow editor thumbnail
Autor
Simon
Veröffentlicht
12 Jul 2020
Lesezeit
29 min

Webflow Editor: Webseite erstellen (Tutorial) Alles was du wissen musst

In diesem Artikel der Webflow Tutorial Serie zeige ich dir, wie du mit dem Webflow Editor, einfach Webseiten erstellen kannst, ohne eine Zeile Code schrieben zu müssen, aber trotzdem viele der Freiheiten bekommt, um atemberaubende Webseiten zu erstellen.

Als Erstes schauen wir uns an, wie wir eine neue Seite in Webflow erstellen. Anschließend nehmen wir die Oberfläche des Editor genau unter die Lupe, wie dieser aufgebaut ist. Dann werfen wir noch einen ausführlichen Blick darauf, wie wir Elemente zu unserer Webseite hinzufügen, bearbeiten und dementsprechend designen können. Auch was responsive Design eigentlich ist und wie wir diesen anwenden, sowie Animationen und Interaktionen erstellen können schauen wir uns an. Dann gehen wir noch darauf ein wie wir unsere Unterseiten verwalten können und die Webseite zum Schluss auch noch veröffentlichen oder Teilen können. Abschließend werfen wir dann noch einen Blick in die Einstellungen.

Webseite erstellen (Einrichten)

Haben wir uns in unserem Webflow-Account angemeldet, können wir eine neue Webseite direkt im Dashboard erstellen. Wenn du wissen willst wie man einen Webflow Account erstellt und diesen verwaltet, schau dir den ersten Teil dieser Tutorial-Serie an, Link zur kompletten Playlist hier. Hier werden wir dann in einen neuen Bereich weitergeleitet, wo wir eine neue komplett leere Webseite erstellen können oder eine kostenlose oder kostenpflichtige Vorlage verwenden können, welche wir dann komplett im Editor bearbeiten können. Wir können auch einfach Designs aus dem Showcase klonen, falls die Autor dies erlauben, was deinen Designprozess enorm schneller und einfacher machen kann. Hier gibt es nämlich viele Design UI Kits, womit wir in der Webseitenvorlage viele Elemente schon vor designt erhalten, welche wir dann individuell bearbeiten können und nicht von Grund auf selber erstellen müssen. Diese sind auch für den Start praktisch, um nachvollziehen zu können, wie solche Designs zu Stande kommen. Über diesen Link kommst du zu den beliebtesten UI Kits, in diesem Tutorial zeige ich dir alles anhand eines kostenlosen Templates, welches wir bei der Erstellung auswählen können. Hier sehen wir an den Symbolen auch, ob die Designs auch Vorlagen für Online-Shops und CMS Elemente beinhalten. Haben wir eins ausgewählt, kommen wir in eine Übersichtsseite, wo wir auch eine Preview anzeigen lassen können und weitere Informationen zum Design sehen. Über die “Use for Free” Schaltfläche, können wir es dann für unser Projekt verwenden. Klicken wir dann auf Create Project, müssen wir dieses noch benennen und werden dann direkt in den Editor geleitet. Über das Dashboard können wir in der Zukunft immer wieder auf unser Webseitenprojekt zugreifen und dieses weiter bearbeiten.

Editor (Oberfläche)

Haben wir jetzt ein Projekt erstellt und geöffnet, befinden wir uns im Webflow Editor, wo die ganze Magie passiert. Bevor wir uns jetzt gleich anschauen, wie alles funktioniert, zeige ich dir erstmal wie dieser Editor aufgebaut ist, damit wir schnell ein Verständnis für diesen bekommen und eigenständig bedienen können. Im Mittelpunkt sehen wir natürlich unsere Webseite, wo wir alle Elemente auch auswählen können und dann verschiedene Optionen zu dieser Auswahl am rechten Rand tätigen können. Darüber können wir das Design, Einstellungen und Animationen verwalten, sowie auf den Style Manager zugreifen, wo wir bestimmte Designs nach Classen festlegen können. Am unteren Rand, sehen wir auch ein Verzeichnis, wo unser aktuelles Element liegt, vorüber man auch einfach übergeordnete Container, welche verschiedene Elemente zusammen fassen, sieht und verwalten kann. Am oberen Rand können wir in der Mitte auch die Webseite in verschiedenen Größen anzeigen lassen. Das ist super wichtig, um die Webseite auch für mobile Geräte zu optimieren, was über responsive Design am besten geht, welches wir uns später noch genauer anschauen werden. Neben den vorgefertigten Geräte Größen können wir auch über die Pixelbreite oder Prozent die Größe einstellen. Am rechten Rand, können wir unsere letzten Bearbeitungen rückgängig machen oder wiederholen, sowie sehen, ob alle aktuellen Bearbeitungen gespeichert sind und unseren Code exportieren, die Seite Teilen für eine Review oder schließlich auch veröffentlichen. Über das Auge am linken Rand, können wir auch alle Editorelemente ausblenden, um eine Vorschau der aktuellen Seite zu haben und mit dieser interagieren zu können. Daneben können wir auch alle Unterseiten der Webseite verwalten und über das Webflow Logo, kommen wir zurück zu unserem Dashboard. Am linken Rand haben wir jetzt noch mehr Bearbeitungsmöglichkeiten, wo wir ein neues Element zu unserer aktuellen Seite hinzufügen können, sowie eine Übersicht öffnen, wo wir alle Elemente auf der aktuellen Seite übersichtlich sehen und darunter auch die Unterseiten verwalten können. Auch die CMS und Online-Shop Funktionen finden wir hier, welche wir uns aber in den folgenden Videos dieser Tutorialserie erst anschauen werden. Darunter finden wir dann noch unseren Dateimanager, wo wir alle Bilder, Videos und Co. sehen, welche wir hochgeladen haben um sie auf der Webseite verwenden zu können. Hier können wir natürlich auch neue Dateien hochladen. Zu guter Letzt haben wir hier im oberen Bereich, auch noch die Einstellungen, auf welche wir am Ende des Videos noch zu sprechen kommen. Am unteren linken Rand, haben wir jetzt noch verschiedene Darstellungsoptionen für den Editor, also wie bspw. ausgewählte Elemente aussehen sollen. Hier können wir bspw. Elementränder ausschalten, sowie leere Elemente anzeigen oder ausblenden oder ein Grid anzeigen, was sehr nützlich ist, um die Seite symmetrisch aufzubauen. Auch ein Layoutmodus können wir hier starten, wo alles schwarzweiß angezeigt wird und wir anhand von Linien das aktuelle Layout sehen und so einfach kontrollieren oder ausrichten können. Über die Lupe können wir dann auch nach bestimmten Funktionen oder Elementen im Editor suchen, was sehr praktisch ist, wenn wir ein komplexes Projekt haben und auch auf die Webflow eigenen Videotutorials zugreifen, welche einem helfen, einzelne Elemente zu erstellen. Das ist praktisch, wenn du etwas Spezifisches wissen willst. Die Videos sind aktuell alle nur auf Englisch verfügbar. Über das Hilfe-Symbol können wir auch Tastenkürzel anzeigen, die unseren Workflow schneller machen können aber auch unseren CSS Code ein sehen können von einem bestimmten Element und die komplette Webseite wieder zurücksetzen.

Wenn du paar praktische Tastenkürzel im Webflow Editor kennenlernen möchtest, schau doch mal auf meinem Instagram-Account: @simontutorial vorbei, dort habe ich dir einige spannende vorgestellt. Dort gibt es auch zu jedem meiner Tutorials kostenlose Bonusinhalte, welche du durch das kostenlose abonnieren, in Zukunft nicht mehr verpassen wirst.

Elemente hinzufügen

Doch wie können wir jetzt ein neues Element, wie einen Text, Schaltfläche oder Bild einfach zu unserer Seite hinzufügen? Dafür klicken wir einfach auf das Plus am linken Rand, wo wir alle verfügbaren Elementarten sehen und direkt per Klick oder Drag-and-drop auf unserer aktuellen Seite hinzufügen können. Bevor wir das jetzt machen, müssen wir aber noch kurz darauf eingehen, wie eine Webseite von den Elementen grundsätzlich aufgebaut ist. Wir können die einzlnen Elemente nämlich nicht frei platzieren, da dies vom Code her sehr kompliziert wäre und stark an der Performance unserer Seite nagt. Deswegen finden wir hier im Elementebereich auch Layout-Elemente, welche wir auf einer leeren Seite, als erstes erstellen sollten. Hier sind Sectionen die oberste Ordnung, was man wie einen Abschnitt einer Webseite sehen kann. Also quasi dieser Bereich mit dem Bild, Text und Button ist ein Abschnitt. Du kannst auch eine Seite innerhalb einer einzelnen Sektion erstellen, dass wird dann aber sehr schnell sehr unübersichtlich und schränkt dich beim Designen ein. Denn über die Sektion kannst du bspw. unterschiedliche Hintergründe, wie Farben und Bilder später super einstellen. Eine Sektion an sich sollte man dann im nächsten Schritt mit einem Container füllen, das kann man sich wie einen Kasten vorstellen, in welchem wir dann unsere Elemente platzieren. Also der Text mit Button ist hier bspw. in einem Container. Der Container ist dafür da, den Bereich festzulegen, in welchem unsere Elemente angezeigt werden, was für das Responsive Design später auch noch wichtig ist. Hier haben wir auch Columns und Grids, womit wir Layouts also mehrere Spalten und Kacheln erstellen können, in welcher wir dann in den einzelnen Container bzw. DIV-Boxen, wie man es beim Programmieren nennt, unsere Elemente platzieren können. Scrollen wir jetzt weiter runter, sehen wir alle unsere Elemente, wo wir von verschiedenen Texten, Bilder, Buttons, Shop-Inhalte, Links, Medien und Kontaktformularen alles dabei haben. Ganz unten finden wir auch besondere Sachen, wie ein Video als Hintergrund, Slideshows, Tabs und vieles mehr. An den gelben Sternen sehen wir, dass es sich um Funktionen handelt, welche wir nur mit einer Premiumabo verwenden können und wenn wir mit der Maus über ein Element fahren, können wir über das Fragezeichen auch genauere Informationen dazu herausfinden, was dies genau ist. Wollen wir jetzt bspw. einen Text hinzufügen, wählen wir einfach das Element aus und schieben es auf unsere Seite. Da öffnet sich währendbei am rechten Rand auch unsere Programmierstruktur, wo wir sehen, wo das neue Element abgelegt wird, also in welcher Sektion und Container. Hier sehen wir auch alle anderen Elemente und mit blauen Hilfslinien ist es für uns noch einfacher das Element zu platzieren. Wir können das Element dann auch nachträglich erneut verschieben, in dem wir es einfach mit der Maus gedrückt anklicken und bewegen. Wir können mit der Maus auch via Rechtsklick ein Menü für das einzelne Element aufrufen, wo wir diese auch einfach duplizieren, kopieren oder ausschneiden können, sowie wieder löschen. Hier können wir aber auch alle seine Einstellungen öffnen und auch einen Class hinzufügen, was für das Designen relevant ist, sowie Animationen verwalten. Am linken Rand können wir unter dem Plus auch die Navigation öffnen, wo wir auch nochmal alle Elemente von der aktuellen Seite sehen, was uns hilft den Überblick nicht zu verlieren und wie die Elemente in sich gruppiert sind und so können wir auch einfacher ein bestimmtes Element finden und auswählen. Am oberen Rand können wir auch alle Sectionen öffnen, um alle Elemente direkt zu sehen und einzelne Elemente auch anpinnen, wenn wir sie hervorheben möchten, falls wir bspw. noch etwas an diesen verändern wollen.

Wenn wir jetzt nochmal erneut auf das Plus klicken, können wir neben den normalen Elementen, oberhalb auch vorgefertigte Layouts für Section direkt hinzufügen, um schon eine Abschnittsstruktur zu haben, welche wir dann individualisieren können. Daneben können wir auch Symbole erstellen, wo wir alle bestehenden Symbole sehen und ggf. löschen können. Erstellen wir ein neues Symbol, müssen wir es benennen und dann die Elemente auf der aktuellen Seite auswählen, welche wir als Symbol erstellen wollen. Doch was bringt es uns solche Symbole zu erstellen? Das sind ja keine kleinen Grafiken wie man es zuerst annimmt. Symbole sind dafür gut wiederkehrende Designs zu erstellen. Also bspw. unser Menü, was wir ja auf jeder Seite unserer Webseite oben haben wollen. Dieses erstellen wir einmal auf der ersten Seite und legen dieses dann als Symbol fest, in dem wir ein neues Erstellen und die Navigationssection auswählen. Gehen wir jetzt auf eine andere Seite, können wir über die Symbole, einfach die Navigationsleiste auf der neuen Seite platzieren. Ändern, wir jetzt was im Menü auf einer Seite, wird diese Änderung auf jeder Seite auch durchgeführt, wo wir das Symbol verwenden. Das ist super praktisch uns spart enorm viel Zeit was das Erstellen und Korrigieren von einzelnen Elemente, welche sich wiederholen, angeht. In der Symbolübersicht sehen wir auch auf wie vielen Seiten das Symbol verwendet wird und wir können bestehende Symbole nur löschen, wenn wir es auf allen Seiten entfernt haben.

Elemente bearbeiten (Design)

Jetzt haben wir ein Element zu unserer Seite hinzugefügt, aber wie können wir dieses Bearbeiten, also den Inhalt individualisieren sowie das Design dafür festlegen?

Dafür wählen wir einfach das gewünschte Element aus. Hier sehen wir oberhalb, den Namen des Elements und wenn wir darauf klicken, sehen wir auch in was für DIV-Boxen und Sectionen dieses Element liegt. Wir können in das Element einfach reinklicken, um den Inhalt bspw. also den Text direkt in der Vorschau bearbeiten zu können. Neben den Namen des Elements können wir jetzt aber auch oft auf ein Zahnrad klicken, wo wir sehr allgemeine Designeinstellungen direkt tätigen können. Bei einer Überschrift können wir bspw. eine der gespeicherten Überschriftgrößen auswählen. Alle Optionen zum Element finden wir jetzt aber am rechten Rand. Diese unterscheiden sich natürlich nach Elementart enorm. Was den Designbereich des Elements angeht aber nicht so stark. Ich werde dir jetzt alles anhand eines Textelementes demonstrieren. Hier können wir über den Pinsel alles zum Design dieses Elements einstellen. Hier haben wir einfach zu verstehende Sachen, wie den Background, wo wir eine Farbe anhand eines Hexcodes oder aus dem Farbrad auswählen können, sowie über das Plus auch einen Verlauf oder ein Bild als Hintergrund von dem Element hinzufügen können. Ich erstelle sehr selten einen Hintergrund zu einem spezifischen Element, da ich die Hintergründe meisten allgemein bei der Section oder dem Container einstelle. Wir können dem Element auch eine Kontur verpassen, wo wir die Dicke einstellen können für alle Seiten gleich oder individuell, sowie ob es eine durchgezogene oder gestrichelte Linie sein soll und ob die Ecken abgerundet werden. Auch die Farbe können wir hier natürlich einstellen. Bei Texten haben wir hier auch noch Typografieeinstellungen, wo wir die Schriftart, Größe, Farbe, Ausrichtungen und vieles mehr einstellen kann, wo wir alles zur Textbearbeitung finden. Ganz unten haben wir auch noch die Möglichkeit Effekte auf das Element anzuwenden. Also bspw. es teilweise transparent zu machen, einen Schlagschatten hinzuzufügen, sowie Filter oder festlegen, wie eine Maus aussehen soll, wenn man über das Element fährt. Der etwas komplexere Teil, was das Design eines Elements angeht, finden wir hier jetzt im oberen Bereich. Hier können wir einmal die Positions des Elements einstellen, was standardmäßig statisch ist, das bedeutet, das Element bleibt immer am gleichen Punkt und die Design Veränderung wird über die Layoutsektion geregelt. Das solltest du bei den meisten Elementen verwenden, da es alles unkompliziert macht. Neben Statisch können wir hier aber auch andere Sachen wie bspw. Sticky auswählen, was für ein Menü bspw. vorteilhaft ist, sodass diese immer angezeigt wird, auch wenn wir weiter runter scrollen. Es bleibt also fest im sichtbaren Bereich der Webseite. Wir können hier auch die Postion anhand von Abmessungen festlegen, was wir uns im nächsten Abschnitt noch genauer anschauen werden. Unter Size können wir auch die Größe der Elementbox einstellen und unter Spacing können wir Abstände zu anderen Elemente herum oder zwischen Elementinhalt und Elementbox einstellen. Unter Layout können wir jetzt festlegen, ob die Elemente innerhalb der aktuellen Box untereinander oder in mehreren Reihen angezeigt werden sollen. Diese Option ist grundsätzlich nur sinnvoll bei Containern oder Sectionen einzustellen und nicht bei einzelnen Elementen. Ganz oben haben wir jetzt noch das Flex Child, wo wir die Größe der Elementbox auch an dem Bildschirm ausrichten können, wo ich dir immer zur Standardeinstellung rate. Ganz oben sehen wir dann auch immer die Classe unseres aktuellen Elements, für welches wir hier gerade die Einstellungen machen und wie oft wir diese Klasse verwenden. Den diese Einstellungen, die wir hier haben, werden nicht auf das einzelne individuelle Element angewendet, sondern in sogenannten Classen gespeichert, welche wir dann einem oder mehreren Elementen zuordnen können. Das ermöglicht uns einfach bestimmte Designs mehrfach zu verwenden, was oft sehr sinnvoll ist um eine konstante Designsprache auf unserer Webseite zu haben. Damit quasi alle Überschriften gleichgroß und im gleichen Stil sind. Hier haben wir den Vorteil, wenn wir eine Klasse ändern, wird die Veräderung auf allen Elementen angewendet, wo wir diese Klasse verwenden. Wir können auch mehrere Classes zu unserem Element hinzufügen, in dem wir diese oberhalb eingeben. Über den Pfeil neben den Klassen können wir auch unterschiedliche Designs für unterschiedliche Stadien unseres Elements einstellen. Also falls wir bspw. mit der Maus über das Element fahren, was wir hier unter Hover auswählen können, kann sich das Design dann ändern. Über das Desktop-Symbol können wir auch eine neue Classe erstellen und oben im Menü unter den drei Wassertropfen sehen wir auch alle unsere Classen übersichtlich, wo wir diese auch einfach umbenennen können und sehen, welche Elemente auf der aktuellen Seite, diese Classe verwenden. Ändern wir etwas an der Classe, werden die Änderungen natürlich bei allen Elementen vorgenommen, wo wir diese Klasse verwenden. Wir können auch Unterklassen erstellen, womit wir Design Abänderungen einer Classe bspw. erstellen können. Ich weiß das klickt jetzt alles sehr kompliziert aber ist es eigentlich nicht. Wir koppeln mit den Classes einfach nur das Design vom individuellen Element ab und ermöglichen es so, gleiche Designs einfach auf mehreren Elementen verwenden zu können. Haben wir ein Element ausgewählt und klicken auf das Zahnrad, können wir individuelle Einstellungen zu dem Element machen, welche stark vom Elementtyp abhängen. Bei Bildern bspw. können wir hier das Bild aus unserer Medienbibliothek auswählen und festlegen, wie dieses innerhalb der Elementebox angezeigt werden soll. Auch wie sich das Elemente für die Suche auf der Webseite verhalten soll oder bestimmte Attribute können wir hier auch einstellen. Wie gesagt, hier verändern sich die Funktionen stark nach Elementart. Aber grundsätzlich können wir hier Dinge für den Inhalt des Elements einstellen.

Responsive Design

Was heutzutage nicht mehr wegzudenken ist bei Webseiten, responsive Design. Das ermöglicht es dir auf einfachem Wege die Webseite für alle verschiedenen Größen, also auch für Handybildschirme zu optimieren, was super wichtig ist. Dafür haben wir jetzt verschiedene Tools im Webflow Editor. Am oberen Rand in der Mitte, können wir die Vorschau unserer Webseite direkt an verschiedene Größen anpassen, um zu sehen, wie unsere Webseite auf anderen Geräten aussieht und darüber auch direkt anpassen zu können. Hier können wir jetzt die Werte der Klassen, was das Spacing, Size und Position angeht, je nachdem welche Geräteauswahl wir haben individuell anpassen. D.h. wir können unterschiedliche Werte eingeben und je nach dem in welcher Größe die Seite aufgerufen wird, wird die Klasse unterschiedlich angezeigt. Hier können wir unter Layout auch komplette Klassen für bestimmte Geräte ausblenden, wenn wir hier auf das durchgestrichene Auge klicken. Du fragst dich jetzt vielleicht, müssen wir dann jedes Mal für jeden Gerätetyp die Einstellungen einzeln für jede Klasse machen? Nein. Grundsätzlich werden die Einstellungen von der Hauptgröße, welche wir am Stern, im oberen Menü sehen, übernommen, nach dem Prinzipien, welche wir unter der Flex Child und Positionseinstellungen getätigt haben. Wenn wir dann etwas Bestimmtes auf einem bestimmten Gerät ändern wollen, können wir, dass dann über die Größenveränderung und die Einstellungen tätigen und dann wird die Änderung nur für diesen Gerätetyp übernommen. Du merkst also hier steckt sehr viel Logik dahinter und ich rate dir, als ersten Schritt deine Webseite einfach standardmäßig im Computerformat zu erstellen und dabei auf die Postions Ausrichtungen und Co. zu achten und in einem letzten Schritt dann die Seiten auch auf anderen Geräten anzuschauen und ggf. optimieren, falls die automatische Version nicht deinen Vorstellungen entspricht.

Interaktionen & Animationen

Um ein atemberaubendes Erlebnis mit unserer Webseite zu bieten, haben wir auch die Möglichkeit verschiedene Animationen und Interaktionen zu einzelnen Elementen hinzuzufügen. Damit kann man so krasse Sachen, wie bspw. diese Schweizer Fahrradseite erstellen. Wir finden alles zu Animationen bei einem Element, wenn wir es ausgewählt haben und am rechten Rand dann auf den Blitz klicken. Hier haben wir jetzt die Möglichkeit Animationen für die komplette Seite unter Page Trigger oder Animationen für einzelne Elemente unter Element Trigger zu erstellen. Schauen wir uns erstmal letzteres an. Dafür müssen wir das Element auf der Seite ausgewählt haben und dann auf das Plus neben dem Namen klicken. Hier musst du dann als Erstes festlegen, durch was die Animation ausgelöst werden soll. Also bspw. durch einen Mausklick, oder wenn man mit der Maus über das Element fährt oder wenn das Element durch das Scrollen bewegt wird. Hierzu muss man sagen, dass nicht alle Animationsauslöser auf mobilen Geräten also per Touch unterstützt werden. Das sehen wir aber auch wenn wir mit der Maus über die verschiedenen Möglichkeiten fahren, am unteren Rand. Je nachdem was wir auswählen, ich habe jetzt den Mausklick als Auslöser gewählt, können wir dann festlegen, was beim ersten und beim zweiten Klick passiert und wir können festlegen, ob die Animation auf bestimmten Geräten nicht verfügbar sein soll. Unter Actions, können wir dann die Animationen auswählen, wo wir viele Bewegungsanimationen wie Fade, Flip oder Slide haben. Aber auch Erscheinungsanimationen wie aufploppen, Bounce oder co. Hier klick dich am Besten mal durch und schau dir an, was für Animationen es alles gibt und wie diese aussehen. Ist deine gewünschte Animation nicht dabei, kannst du ganz oben auch eine eigene Animation erstellen. Wo du dann die komplexe Animationsbewegungen manuell aufnehmen kannst und noch viele weitere Möglichkeiten hast. Hier kannst du dann einen Ablauf von verschiedenen Effekten, welche du hier ebenfalls über das Plus hinzufügen kannst, aufbauen und über den Playbutton sehen. Schließen wir die Animationsbearbeitung, sehen wir auch alle in der Übersicht und können diese über den Papierkorb auch wieder löschen. Auf unserer Vorschauseite sehen wir am grünen Pfeil, dass das Element eine aktive Animation hat.

Jetzt können wir aber auch noch Animationen für die Seite allgemein machen, bzw. die durch die Seite ausgelöst wird. Hier können wir sagen, dass die Animation durch das Laden der Seite oder durch das Scrollen der Seite oder mit der Maus über die Seite fahren aktiviert werden soll. Die Möglichkeiten klingen zwar simple, aber bspw. mit dem Scrollen der Seite, kann man ziemlich coole Effekte machen, was besonders passend für das Präsentieren von Produkten sind. Mit sowas arbeitet Apple bspw. sehr viel auf ihrer Webseite. Haben wir den Auslöser für die Seite erstellt, haben wir nur die Möglichkeit eine eigenen individuelle Animation zu erstellen und auf welchen Gräten es verfügbar sein soll. Bei den eigenen erstellen Animationen sehen wir alle in der Übersicht und können zuvor erstellte hier auch einfach aktivieren, was praktisch ist, wenn wir die gleiche Animation öfters ausführen wollen. 

Seiten verwalten

Die meisten Webseiten haben ja nicht nur eine Seite, sondern neben der Startseite mindestens noch eine About-Seite oder Impressums und Co. Seiten. Wir können alle Unterseiten unserer Webseite am linken Menü oder am oberen linken Rand in einem eigenen Bereich verwalten. Hier werden unsere Seite in verschiedene Kategorien sortiert. Die statischen Seiten sind ganz normale Seiten, wie bspw. die Seite, die wir bisher die ganze Zeit bearbeitet haben und für sich allein stehende Seiten sind. Unter Utility Pages haben wir Seiten, welche geöffnet werden, wenn etwas Bestimmtes passiert, also hier ist meistens die 404 Seite, welche angezeigt wird, wenn jemand eine Seite probiert auf deiner Webseite zu öffnen, die nicht existiert. Wir finden dann hier auch noch alle relevanten Online-Shop Seiten, wie den Warenkorb oder Produkt und Kategorie Templates und Seiten Templates für CMS Elemente. Das schauen wir uns in den entsprechenden Videos noch genauer an. Die Reihenfolge, welche wir unter den statischen Seiten haben, sehen wir auch so direkt in unserem Menü und wir können diese ändern, in dem wir einzelne Seiten vor dem Namen anklicken und verschieben. Wir können mehrere Seiten auch in Ordner gruppieren, wo durch wir bspw. auch Drop-Down Menüs erstellen können. Einen neuen Ordner oder Seite können wir am oberen rechten Rand auch erstellen. Darunter können wir auch nach einer bestimmten Seite suchen, was praktisch ist, wenn wir sehr viele Seiten haben. Klicken wir normal auf eine Seite, können wir diese einfach öffnen und bearbeiten. Am Haus-Symbol bei einer Seite, sehen wir, dass diese die Startseite ist. Wir können bei jeder Seite jetzt aber auch noch die Einstellungen über das Zahnrad öffnen. Hier können wir den Namen der Seite und den Link der Seite ändern, sowie die Seite zu einem bestehenden Ordner hinzufügen oder als Startseite festlegen. Unter SEO Settings können wir auch Optimierungen für Suchmaschinen eingeben, in dem wir eine Beschreibung und Namen der Seite eingeben, welche dann bspw. in der Google Suche angezeigt wird. Dadurch werden unser Seiten oft in Suchmaschinen öfters angezeigt. Unter Open Graph Settings können wir auch ein Bild und individuellen Titel und Beschreibung hinzufügen, welche angezeigt werden, wenn jemand die Seite auf Social Media Plattformen teilt und eine Link-Vorschau angezeigt wird. Schließlich können wir hier auch Einstellungen zur Webseitensuche machen, ob diese in den Suchergebnissen auf der Webseite angezeigt wird oder nicht und wie dort der Titel und Beschreibung sein soll. Hier ist es Sinnvoll einfach einen entsprechenden Text bei den SEO Einstellungen einzugeben und diese werden dann standardmäßig auch bei Social-Media und Seitensuchen angezeigt. Am oberen Rand der Einstellungen können wir die Seite auch duplizieren oder löschen, sowie alle Veränderungen normal oder als Entwurf speichern.

Seite veröffentlichen & Teilen

Haben wir jetzt unsere Seite fertiggestellt, wollen wir sie vielleicht mit anderen Teilen, damit sie die Seite vor der Veröffentlichung testen oder wir veröffentlichen die Seite direkt. Wir können die Seite mit anderen über den Teilen-Button am oberen rechten Rand teilen. Hier können wir einen Link aktivieren, den wir dann teilen können, wo andere dann auf eine Vorschau der Webseite kommen und diese auch in verschiedenen Formaten anschauen können. Diese Vorschau kann nicht bearbeitet werden, sondern ist nur zum anschauen der Seite gedacht. Wenn andere deine Seite auch bearbeiten können, sollen, dann musst du die Seite über ein Team in Webflow freigeben. Wie das genau funktioniert und was Teams sind, habe ich dir im ersten Video dieser Tutorial Serie erklärt, Link zur Tutorial Serien Playlist findest du hier. Wollen wir jetzt, dass unsere Seite im Internet öffentlich erreichbar ist und über Suchmaschinen gefunden werden kann, können wir sie direkt neben dem Teilen-Button veröffentlichen. Hier können wir kostenlos pro Webflow Account 2 Seiten mit Webflow Subdomain veröffentlichen. Das bedeutet, dass unsere Domain auf .webflow.io endet. Wenn wir eine eigne Domain verbinden wollen, über welche unsere Seite läuft, müssen wir ein kostenpflichtiges Abo für unsere Seite buchen, wo wir dann auch HTML, CSS oder JavaScript auf das wesentliche reduzieren können, um die Seite noch schneller laden lassen zu können. Haben wir die Seite dann veröffentlicht, können wir über dieses Menü diese Veröffentlichung auch immer wieder rückgängig machen. Als letzte Möglichkeit gibt es mit einem Premiumplan auch den Code der Webseite zu exportieren, womit du die Seite dann bspw. über einen eigenen Hoster veröffentlichen kannst. Den Code finden wir links neben der Teilen-Schaltfläche. Hier können wir dann den HTML, CSS, JS Code und alle verwendeten Mediendateien exportieren. Wenn du das machst und selbst hosten willst, solltest du etwas Ahnung von Programmierung haben und wie man diese Dateien so zusammenfügen muss, damit du schlussendlich die Webseite hast. Hier ist zudem der Nachteil, dass du die Seite nachträglich nicht mehr so einfach über Webflow verändern kannst, sondern, dies dann im richtigen Code, welchen du exportiert hast oder du exportierst den Code immer neu, nach dem du Veränderungen in Webflow gemacht hast. Einen Überblick für die Seitenpläne findest du in der Beschreibung und im ersten Teil der Tutorial Serie habe ich dir diese auch ausführlicher erklärt, was für dich vielleicht interessant ist, wenn du eine eigene Domain, Premium Funktionen generell oder den Code exportieren möchtest.

Einstellungen

Als Letztes werfen wir jetzt noch einen Blick in die Einstellungen, welche wir am linken Rand über das Zahnrad öffnen können. Hier können wir, falls wir ein Premiumabo haben, eine Webseitensuche aktivieren und verwalten, womit Nutzer über ein Suchsymbol auf deiner Webseite, nach Inhalte auf der Webseite suchen können. Neben der Suche können wir hier auch ein Backup von der Seite erstellen, was wir immer machen sollten, wenn wir große Veränderungen auf der Seite vornehmen, damit falls, die Seite abstürzen sollte oder irgendwas kaputt geht, wir diese wieder auf die vorherige Version zurücksetzten können. Hier müssen wir immer einen Namen für das Backup eingeben und wir sehen dann auch in der Übersicht alle unsere erstellten Backups, wo wir auch das Erstellungsdatum, die Anzahl der Seiten, Styles und Elemente sehen können. Kostenlos können wir immer das letzte Backup wiederherstellen, wollen wir ältere wiederherstellen, müssen wir ein Premium Plan haben. Des Weiteren können wir in den Einstellungen auch Sachen zu unserem Online-Shop einstellen, was ich dir aber in einem weiteren Video noch genau zeigen werden. Als letzten Punkt, können wir auch noch das Design für E-Mails, welche bspw. an Kunden unseres Online-Shops gesendet werden, komplett individualisieren, was die Texte, Farben und Design angeht. Wo wir hier rechts immer eine Vorschau sehen und Links aus dem Dropdown-Menü, alle Texte eingeben können.

Im nächsten Artikel der Webflow Tutorial Serie, zeige ich dir wie du mit Webflow deine eigene Datenbank dank CMS erstellen und für deinen Webseite verwenden kannst, sowie wie du einen Online Shop erstellst. Alle Folgen findest du hier. Über das Teilen des Artikels freue ich mich immer sehr. Falls du noch Fragen oder Feedback haben solltest, kannst du dieses gerne in den Kommentaren hinterlassen. Bis zum nächsten Mal.

Über dieses Tutorial

Geschrieben von Simon
Das letzte mal aktualisiert am 09.05.2022
Dieses Tutorial enthält Affiliate-Links.