Am Ende dieses Tutorials werden Sie lernen, wie Sie Ihre erste Webflow-Homepage erstellen und mit einem soliden Verständnis dafür nach Hause gehen, wie Sie leistungsstarke Webflow-Websites durch visuelle HTML- und CSS-Codierung erstellen können.
Die erste Regel für eine Website ist, sie so leicht wie möglich zu machen! Wir haben in diesem Beitrag bewusst einen Fehler gemacht: Wir haben zu viele schwere GIFs hinzugefügt, aber das ist gut so! Einige der besten Praktiken sind also, Bilder zu minimieren, SVGs zu verwenden und gleichzeitig eine Website mit erstklassiger Struktur, hoher Zugänglichkeit und hoher Geschwindigkeit zu erstellen.
Dieses Tutorial dient dazu, Einzelpersonen zu unterrichten. Wenn Sie eine Organisation mit groß angelegten Marketinganforderungen sind, sollten Sie wahrscheinlich die Hilfe eines professionellen Webflow-Entwicklungsteams in Anspruch nehmen und vielleicht mit uns chatten.
Es gibt einen großen Hype um die No-Code-Bewegung, eine Welle von Technologien, die es uns ermöglichen, Software ohne Code zu erstellen. Aber Code ist das Herzstück des Internets. Es geht nicht darum, dass man ihn nicht mehr braucht, um Websites und Anwendungen zu erstellen. Diese Bewegung konzentriert sich vielmehr darauf, das Programmieren einfacher (und schneller) zu machen, indem es visuell gestaltet wird. Das bedeutet, dass Sie nur noch entwerfen, und Plattformen wie Webflow schreiben den Code für Sie.
Wenn Sie Webflow mit der Design-Mentalität angehen, die auf der Code-Basis basiert, werden Sie es schnell lernen können. Und vielleicht lernen Sie sogar, wie man richtigen Code schreibt.
Webflow ist eine Plattform für Webdesign und -entwicklung, eCommerce, CMS und Hosting. Jeder Aspekt der Plattform wird durch einen bestimmten Satz von Produkten/Funktionen repräsentiert:
Als visuelles Webdesign-Tool, das fest in Webstandards und Best Practices verwurzelt ist, setzt der Designer Ihre Designentscheidungen in sauberes, produktionsreifes HTML, CSS und JavaScript um. Webflow wurde entwickelt, um Designern die Möglichkeit zu geben, Websites auf eine vertraute Art und Weise zu entwickeln, z. B. visuell, ohne Abstriche bei der Qualität.
Wenn Sie in erster Linie mit Prototypen arbeiten, können Sie den Designer allein verwenden und den Prototyp mit Entwicklern teilen, um ihn zu reproduzieren oder den Code zu exportieren.
Um jedoch die volle Leistungsfähigkeit von Webflow zu erleben, empfehlen wir, den Designer mit dem CMS und dem Hosting zu kombinieren.
Wie der Designer ist auch das CMS ein codefreies Webentwicklungswerkzeug. Es verfügt sowohl über In-Designer-Elemente (wo der Website-Designer arbeitet) als auch über On-Site-Elemente (wo der Kunde und/oder die Content Manager arbeiten).
Für den Moment reicht es, wenn Sie wissen, dass CMS Ihnen im Designer erlaubt, Inhaltstypen zu strukturieren, die Sie immer wieder veröffentlichen, wie z. B. Blogbeiträge, Produktseiten usw., indem Sie modulare "Felder" kombinieren. Nachdem Sie die Inhaltstypen, die Webflow "Sammlungen" nennt, erstellt haben, können Sie mit dem Designer festlegen, wie die Sammlungselemente auf Ihrer Website aussehen sollen (z. B. wie die einzelnen Blogbeiträge aussehen sollen).
Mit Webflow eCommerce können Sie die Leistungsfähigkeit des Designers und des CMS nutzen, um ein vollständig angepasstes eCommerce-Erlebnis zu schaffen. Jeder Webflow-Entwurf kann in eine eCommerce-Site umgewandelt werden, aber der Hosting-Preis unterscheidet sich geringfügig von dem einer normalen Website. Sie können Ihre eCommerce-Site mit Zahlungsgateways wie Stripe, Apple Pay, Paypal oder Google Pay verbinden und gleichzeitig die Möglichkeiten Ihrer Shops mit verschiedenen Integrationen erweitern.
Das letzte Teil des Webflow-Puzzles ist die Hosting-Plattform. Sie wird von Amazon Web Services (AWS) und Fastly unterstützt, ist superschnell, superzuverlässig, bietet Sicherheit auf Unternehmensniveau und Sie benötigen sie, um einige der besten Funktionen von Webflow zu nutzen.
Bevor wir unser erstes leeres Design erstellen, müssen wir verstehen, wie Websites im Web grundsätzlich aufgebaut sind - mit HTML und CSS.
Websites verwenden das Box-Modell, ein Gestaltungsprinzip, das uns zu verstehen gibt, dass alles auf einer Webseite im Grunde eine Box innerhalb einer Box ist. Diese Boxen sind HTML-Komponenten, die als "divs" bekannt sind.
In der obigen Abbildung haben wir einen Abschnitt (schwarz umrandet), einen Container (rot umrandet), um alles innerhalb des Abschnitts responsiv zu halten, und verschiedene Divs (blau umrandet), die als Inhalt innerhalb des Containers fungieren.
Die Nomenklatur für Abschnitt, Container und div hängt davon ab, wie Sie die divs mithilfe der so genannten CSS-Klassen gestalten und beschriften.
Wir verwenden CSS für die Abstände, die Positionierung, die Ausrichtung, die Schriftarten und die Stile dieser HTML-Boxen und ihres Inhalts. Wir fügen jedem Feld die so genannte CSS-Klasse hinzu, die wie eine Voreinstellung für die Stileinstellungen ist, die Sie erstellen. Die Klassen sind auf Ihrer gesamten Website wiederverwendbar und ermöglichen es Ihnen, bei der Erstellung Ihrer Website den Überblick zu behalten.
Zusammenfassung:
Herzlichen Glückwunsch, Sie haben jetzt ein allgemeines Verständnis davon, wie Websites aufgebaut sind. Eine lustige Übung, die Sie jetzt machen können, ist, Ihre Lieblingswebsite, z. B. apple.com, aufzurufen und das Inspektionselement Ihres Webbrowsers zu öffnen.
Sie können den Code (rechts) betrachten und sehen, dass alles eine Box (auch Div genannt) ist. Innerhalb dieser divs befinden sich manchmal andere divs mit Inhalten wie Überschriften, Absätzen und Schaltflächen. Das alles ist HTML. Sie können sehen, wie der Designer von apple.com seine Klassen für jede Komponente/jedes Element und jedes div beschriftet hat, und Sie können auch das CSS im Abschnitt Stile sehen.
Fangen wir an zu bauen!
Der beste Weg, um Webflow zu lernen, ist die tatsächliche Erstellung in Webflow. Um den größten Nutzen aus diesem Leitfaden zu ziehen, müssen Sie mir bei allen Schritten, die wir jetzt angehen werden, folgen. Der erste Schritt besteht darin, ein leeres Projekt zu erstellen.
Hier sehen Sie alles, was Sie brauchen, um eine leistungsstarke Website zu erstellen. Auf der linken Seite sehen Sie alles, was Sie brauchen, um Komponenten hinzuzufügen und zu bearbeiten, und auf der rechten Seite sehen Sie alles, was Sie brauchen, um den Stil dieser Komponenten zu definieren.
In Webflow sind die ersten 3 Schaltflächen auf der linken Seite des Designers die, die Sie für HTML-Elemente verwenden.
Das erste ist das Panel Elemente hinzufügen. Hier können Sie Komponenten wie Divs, Schaltflächen, Text, Bilder, Formulare usw. hinzufügen. Der zweite Bereich ist der, in dem Sie Symbole hinzufügen und verwalten können. Dies sind Abschnitte, die Sie im Voraus speichern und auf mehreren Seiten wiederverwenden können, wie z. B. die Navigationsleiste oder die Fußzeile. Der dritte Bereich ist der Navigator, in dem Sie die Hierarchie und Struktur Ihrer Komponenten sehen können.
Bevor wir Elemente auf der Leinwand ablegen, müssen wir die Schriftart und die Schriftgröße für den Textkörper (die Hauptseite, auf der wir aufbauen) festlegen.
Wählen Sie zunächst Body im Navigator. Gehen Sie dann zum Bedienfeld Stil (rechts) und wählen Sie die Klasse "Body (alle Seiten)". Alle Stiländerungen, die wir an dieser Klasse vornehmen, können auf weiteren Seiten unserer Website wiederverwendet werden. Wenn wir zum Beispiel eine Haupthintergrundfarbe für alle unsere Seiten hinzufügen möchten, können wir das hier tun. In diesem Fall behalten wir die Standardfarbe Weiß bei.
Legen wir unsere Grundschriftart und -größe fest, indem wir auf Typografie gehen und eine Schriftart aus der Liste auswählen. Sie können in Ihren Projekteinstellungen auch eine benutzerdefinierte Schriftart hinzufügen, die dann im Dropdown-Menü angezeigt wird.
Wir haben die Schriftart Verdana ausgewählt und wollen nun die Basisschriftgröße auswählen. 16px ist ein Standard für die Schriftgröße, und wenn Sie "1.4-" für die Höhe hinzufügen, wird die Schrifthöhe das 1,4-fache der Schriftgröße betragen. Wenn Sie mehr über fortgeschrittene Webtypografie und Schrifteinstellungen erfahren möchten, sehen Sie sich dieses Video an:
Okay, fügen wir einige Elemente hinzu. Wir beginnen mit dem Hinzufügen einer Standard-Navigationsleiste.
Als Nächstes fügen wir unten ein section div für unseren Hero-Abschnitt ein. Sobald der Abschnitt div ist an Ort und Stelle, können wir eine Klasse hinzufügen und nennen es "Hero Abschnitt", nur so können wir bleiben organisiert und sehen alle Elemente ordentlich in unserem Navigator.
Jetzt können wir einige Änderungen am Stil unserer Navigationsleiste vornehmen, indem wir zunächst den Hintergrund in der gleichen Farbe wie den Textkörper gestalten.
Wählen Sie einfach die Navigationsleiste im Navigator aus und ändern Sie die Hintergrundfarbe im Bedienfeld Stil.
Fügen wir nun ein Logo hinzu. Speichern Sie Ihr Logo als PNG oder SVG und laden Sie es in den Ressourcenmanager in Ihrem Webflow-Projekt hoch. Von dort aus können Sie das Ressourcensymbol per Drag & Drop auf die Leinwand ziehen.
Nun passen wir die Polsterung des Logos an und fügen einen zusätzlichen Navigationslink hinzu.
Das Hinzufügen eines neuen Navigationsleistenkürzels ist so einfach wie das Kopieren und Einfügen: Command C und Command V auf Mac, Control C und Control V auf Windows.
Nun, wir haben eine einfache Navigationsleiste. Machen wir weiter mit dem Abschnitt über den Helden.
Wir beginnen mit dem Hinzufügen eines Containers zu unserem Hero-Abschnitt. Wir wollen die aktuelle Webflow-Homepage (ein bisschen) nachbilden, also müssen wir auch ein Raster zu unserem Container hinzufügen.
Sobald das Raster hinzugefügt ist, können wir mit der rechten Maustaste darauf klicken und die zusätzliche Standardzeile löschen. Auf diese Weise haben wir ein einfaches zweispaltiges Raster in unserem Container.
In Bezug auf das Box-Modell möchten wir auch ein div in jeder Spalte hinzufügen und Klassen hinzufügen (Left Column Grid und Right Column Grid), damit wir sie richtig beschriftet haben und sie später modellieren können.
Wir haben ein Bildelement zu unserem rechten Spaltenraster hinzugefügt und können nun unseren Inhalt in das linke Spaltenraster einfügen.
Beginnen wir mit einem Titel, einem Absatz und einer Schaltfläche. Wie Sie im Video oben sehen können, können wir unsere Elemente durch Ziehen und Ablegen auf die Leinwand oder durch Ziehen und Ablegen direkt in unseren Navigator hinzufügen. Wenn Sie mit Rastern arbeiten, ist es einfacher, die Elemente im Navigator auszurichten. Wie Sie sehen können, haben wir den Absatz im Navigator und nicht im Canvas eingefügt. Der Grund dafür ist, dass das Element nicht an der gewünschten Stelle platziert wurde.
Jetzt können wir unseren Inhalt hinzufügen und ihn mithilfe des Bedienfelds Stil auf der rechten Seite gestalten. Wir passen die Schriftgröße an und fügen einen Rand für den Abstand hinzu.
Okay, fangen wir mit der CTA-Schaltfläche (Call to Action) an, damit das Ganze etwas besser aussieht.
Wir ändern die Farbe der Schaltfläche und fügen mehr Füllung zwischen dem Schaltflächentext und den inneren Rändern der eigentlichen Schaltfläche hinzu.
Wir verwenden padding, um Platz innerhalb der Elemente zu schaffen, und margin, um Platz außerhalb der Elemente zu schaffen. Um z. B. unsere Überschrift, den Absatz und die Schaltfläche voneinander zu trennen, haben wir margin verwendet, weil wir Platz zwischen diesen Elementen schaffen wollten. Aber für unsere Schaltfläche wollten wir mehr Platz innerhalb des Schaltflächenelements schaffen, also haben wir padding verwendet.
Das bringt uns zu dem Teil, an dem wir unserem Hero-Abschnitt Polsterung hinzufügen, um unserem Raster etwas Platz von unserer Navigationsleiste zu geben.
Nach dem Hinzufügen der Füllung zu unserem Hero-Abschnitt wollen wir unser Bild auch im rechten Spaltenraster zentrieren, um es an unserem linken Spaltenraster auszurichten.
Dazu wählen wir einfach das zuvor erstellte rechte Spaltenraster aus und klicken im Bedienfeld Stil auf Zentriert ausrichten. Dadurch wird sichergestellt, dass alle Inhalte innerhalb des rechten Spaltenrasters in der Mitte des Kastens liegen.
Fügen wir nun einen Abschnitt hinzu, der alle Kunden von Webflow anzeigt.
Nachdem wir unser fünfspaltiges Raster erstellt haben, setzen wir den Klassennamen des Rasters auf Client Logo Grid. Nun möchten wir unsere Logos in unseren Asset Manager hochladen. Zur Veranschaulichung werden wir ein Logo fünfmal verwenden.
Ziehen Sie Ihre Logos einfach per Drag & Drop in jede Spalte des Rasters. Nach der Freigabe des ersten Bildes wollen wir sicherstellen, dass sich unser Logo in der Mitte des Rasters befindet. Um das Logo zu zentrieren, wählen Sie das Bild aus und klicken Sie im Bedienfeld Stil auf Zentrieren.
Da wir das gleiche Logo für alle fünf Spalten verwenden, habe ich sie einfach kopiert und in das obige Video eingefügt (Command C und Command V auf Mac, Control C und Control V auf Windows).
Wir haben gerade unsere erste Homepage erstellt!
Wir hoffen, dass Sie nun besser verstehen, wie Sie als Anfänger an Webflow herangehen können. Wenn Sie es bis hierher geschafft haben, werden Ihre Webflow-Entwicklungsfähigkeiten in kürzester Zeit zunehmen.
Als Anhaltspunkt sehen Sie hier, wie mein Navigator aussieht. Beachten Sie die Platzierung unserer Komponenten:
Aber halt, wir wissen nur, dass es auf dem Desktop gut aussieht. Was ist mit Tablet oder Handy?
Wenn Sie schon einmal mit responsivem Design gearbeitet haben, wissen Sie, dass es in dieser Phase ein wenig knifflig werden kann.
Die gute Nachricht ist, dass Webflow die meiste harte Arbeit bereits für Sie erledigt hat! Um es in Aktion zu sehen, gehen wir durch die verschiedenen Gerätevorschauen, die in der Mitte der oberen Leiste des Designers verfügbar sind:
Now go through each breakpoint and see how it affects your design.
Wenn Sie so entwerfen, wie wir es getan haben, wird Webflow automatisch versuchen, alles responsiv zu gestalten. Aber manchmal müssen Sie die Größe ändern oder Dinge verschieben, wenn Sie ein Raster verwenden (was wir tun).
Wir können sehen, dass alles im Tablet-Modus oder kleiner unser Bild sehr nah aussehen lässt. Unsere Schriftgröße ist auch etwas zu groß, und unser Inhalt ist zu nah an den Rändern.
Bringen wir das in Ordnung.
Alle Designänderungen, die wir im Tablet-Modus vornehmen, werden sich in der kleineren Größe widerspiegeln. Beginnen Sie also im Tablet-Modus und arbeiten Sie sich nach Bedarf nach unten vor.
Beginnen Sie damit, die Darstellung des Vordergrundbildes zu ändern. Anstatt das Bild nach rechts zu quetschen, wollen wir es an den unteren Rand des Heldenbereichs verschieben.
Klicken Sie dazu auf Raster bearbeiten. Fügen Sie dort eine weitere Zeile hinzu und löschen Sie mit einem Rechtsklick die linke Spalte, in der sich unser Featured Image befindet. Dadurch wird das Raster der rechten Spalte mit unserem Bild automatisch in die neu erstellte untere Zeile verschoben.
Klicken Sie anschließend auf Rechtes Spaltenraster und verschieben Sie das Bild in die Mitte des Divs, indem Sie auf Zentrum ausrichten klicken. Fügen Sie von dort aus einen oberen Rand zum rechten Spaltenraster hinzu, um es zu senken.
Das sieht gut aus. Wechseln wir nun in den mobilen horizontalen Modus.
Als Erstes sehen wir, dass die Schriftgröße zu groß ist, also verkleinern wir sie. Als Nächstes wollen wir unseren Inhalt von den Rändern her einfügen. Um dieses Problem zu lösen, wählen Sie den Container aus, in dem sich das gesamte Raster befindet, und fügen Sie an den Seiten Polsterungen hinzu.
Zuletzt gehen wir zum vertikalen Floating-Modus über.
Auch hier ist die Schrift zu groß. Ändern wir die Größe der Überschrift, des Absatzes und des Schaltflächentextes.
Sie sind fertig!
Wie Sie sehen können, bleiben die Kundenlogos am unteren Rand reaktionsfähig und in der Größe angepasst. Wenn Sie jedoch möchten, dass die Logos übereinander gestapelt werden, befolgen Sie genau denselben Prozess, den wir für das Raster in unserem Heldenabschnitt befolgt haben.
Sie haben es geschafft, Ihre erste responsive Homepage, erstellt in Webflow.
Sie sollten stolz sein, ich bin es jedenfalls. Wir haben gerade eine ganze Homepage visuell mit Code entwickelt. Das Bauen in Webflow ermöglicht es uns, die Kraft des Codes zu erleben, ohne ihn tatsächlich zu schreiben. Werfen Sie einen Blick auf das gesamte HTML und CSS, das wir in diesem Leitfaden visuell geschrieben haben:
Wenn Sie nun alle Schritte befolgt haben, um eine Website in Webflow mit Hilfe von Best Practices zu implementieren, sollten Sie damit beginnen, eine echte Website aus einer Figma-Datei zu erstellen. Wenn Sie Fragen haben - fragen Sie!
