Webflow hat ein Problem. Es ist wirklich viel zu grossartig, ich meine es ernst. Webflow beginnt mit einer leeren Leinwand und gibt Ihnen buchstäblich die Freiheit, eine Website nach Ihren Bedürfnissen zu erstellen, und ermöglicht es Ihnen, kreative Freiheit zu nutzen. Natürlich haben Sie auch die Möglichkeit, mit einer Vorlage zu beginnen, wenn Sie möchten. Dann können Sie sie vollständig nach Ihren Wünschen anpassen und nein, Sie müssen keine einzige Codezeile schreiben.

Persönlich war ich mit HTML- und CSS-Konzepten vertraut, bevor ich mit der Verwendung von Webflow begann, und dies machte mir die Sache so viel einfacher. Ich wusste, wie sich HTML-Blöcke verhalten und wie CSS funktioniert. Um auch Ihre Reise und Erfahrung mit Webflow erheblich zu vereinfachen, empfehle ich Ihnen, sich über die Funktionsweise dieser Dinge zu informieren. Ich sage nicht, dass Sie lernen sollten, wie man programmiert. Nein, weit davon entfernt müssen Sie nur wissen, wie diese Dinge funktionieren, wie sie zusammenhängen und wann Sie was verwenden sollen.

Wie ich bereits erwähnt habe, müssen Sie keine einzige Codezeile schreiben (das heisst nicht, dass Sie dies nicht können, wenn Sie möchten). Wenn Sie jedoch die Funktionsweise von HTML und CSS verstehen, müssen Sie im Grunde verstehen, wie Webflow wirklich funktioniert. Da alle Webflow-Websites mithilfe von HTML-Blöcken wie Abschnitten, Divs, Überschriften, Absätzen und vielen anderen Elementen erstellt werden, sind alle diese Elemente mit CSS gestaltet, jedoch auf visuelle Weise.

• Das Tag <div> definiert eine Abteilung oder einen Abschnitt in einem HTML -Dokument. Das Tag <div> wird als Container für HTML -Elemente verwendet, die dann mit CSS gestaltet oder mit JavaScript bearbeitet werden. Das Tag <div> kann mithilfe des Klassen- oder ID-Attributs einfach gestaltet werden.
• Der Auffüllbereich eines Elements ist der Abstand zwischen seinem Inhalt und seinem Rand. Hinweis: Auffüllen schafft zusätzlichen Platz innerhalb eines Elements. Im Gegensatz dazu schafft der Rand zusätzlichen Platz um ein Element.
• Flexbox ist ein Layoutmodell, mit dem Elemente den Platz innerhalb eines Containers ausrichten und verteilen können. Mithilfe flexibler Breiten und Höhen können Elemente ausgerichtet werden, um einen Raum zu füllen oder den Raum zwischen Elementen zu verteilen. Dies macht es zu einem grossartigen Werkzeug für reaktionsschnelle Entwurfssysteme.

Dies sind nur einige Beispiele aus der Liste der Prinzipien, die Sie bei der Verwendung von Webflow verstehen müssen. Wenn Sie dieses Grundverständnis nicht haben, werden Sie möglicherweise frustriert, wenn Sie ein "div" in Ihre Leinwand legen und nicht wissen, wie Sie es an Ihre Bedürfnisse anpassen und stylen können.

Um all die Frustrationen zu vermeiden und zu verhindern, dass Sie die Attraktivität von Webflow nicht so geniessen, wie es wirklich ist, würde ich die Teilnahme an einem [Grundkurs] empfehlen (https://university.webflow.com/courses/ultimate-web-design-course) ) bevor Sie Ihre Reise mit Webflow beginnen.

Heutzutage ist eine reaktionsfähige Website obligatorisch. Jeder möchte eine mobile Version seiner Website und nicht nur eine mobile - alle Bildschirmauflösungen müssen auch kompatibel sein. Aber was ist Responsive Design? Sie wissen es wahrscheinlich inzwischen; Responsive Webdesign ist der Ansatz, der vorschlägt, dass Design und Entwicklung auf das Verhalten und die Umgebung des Benutzers basierend auf Bildschirmgrösse, Plattform und Ausrichtung reagieren sollten.

Webflow macht es Ihnen einfach, es hat mehrere Haltepunkte. Sie finden sie oben auf dem Bildschirm. Wenn Sie darauf klicken, sehen Sie visuell, wie Ihr Design aussieht, und können es dann an Ihre Bedürfnisse und Vorlieben anpassen .

Sie haben es richtig gehört, indem Sie es kopiert haben. Nachdem Sie gerade die Grundlagen von HTML und CSS gelernt haben und eine Vorstellung davon haben, wie die Dinge in Webflow funktionieren und strukturiert sind, können Sie jetzt eine grundlegende Webflow-Landingpage erstellen, indem Sie einige Elemente in den Arbeitsbereich einfügen. Aber dann möchten Sie mehr, möchten all diese coolen Layouts und Elemente erstellen, die Sie online gesehen haben, oder Sie möchten Ihr super kreatives neues Design implementieren, aber wie?

Webflow verfügt über eine lange Liste verschiedener Vorlagen, aus denen Sie lernen können. Einige davon sind kostenpflichtig und einige kostenlose Vorlagen, die Webflow als Ausgangspunkt für ein Projekt anbietet. Diese lange Liste verschiedener Projekte kann als Lernwerkzeug verwendet werden, indem Sie sich diese ansehen und verstehen, wie sie erstellt wurden. Sie können auch Parameter, Stile, Positionen usw. ändern und sehen, wie sich Ihre Änderungen auf die Layoutelemente auswirken.

• Überprüfen Sie die Webflow-Vorlagen und die, die Ihnen am besten gefällt
• Wenn Sie sich auf der Seite für die ausgewählte Vorlage befinden, klicken Sie auf die Schaltfläche "Vorschau in Designer".
• Anschliessend werden Sie zur Webflow-Designeransicht für diese Vorlage weitergeleitet. Klicken Sie auf das blaue Augensymbol
• Voilà! Jetzt können Sie herumspielen und sehen, wie jedes Element aufgebaut ist.

Ein weiterer Ort, an dem Sie Projekte finden, mit denen Sie Ihre Webflow-Kenntnisse verbessern können, ist Webflow Clonable Showcase. Dies ist eine Liste klonbarer Projekte, die von der Webflow-Community erstellt wurden und von jedem als Vorlage für sein Projekt verwendet werden können. Und genau wie bei Webflow-Vorlagen ist dies der magische kleine Ort, an dem Sie überprüfen können, wie andere Personen ihre Projekte erstellt haben, und tatsächlich von ihnen lernen können. Jeder hat seinen eigenen Stil und seine eigene Art, Dinge zu tun, und Sie können lernen, indem Sie jedem etwas abnehmen und dann Ihren eigenen Stil und seine eigene Art, Dinge zu tun, kreieren.

Wenn Sie ein Element zu Ihrer Leinwand hinzufügen und mit dem Stylen beginnen, weist Webflow ihm automatisch eine Klasse zu. Wenn Sie eine Überschrift hinzufügen, wird es so etwas wie "Überschrift 7" sein - abhängig von dem Element, das Sie hinzufügen, aber das ist nichts, was Sie als brauchbar oder leicht zu merken empfinden.

Was ist, wenn Sie viele Elemente haben, auf die das gleiche Design angewendet wird? Sie werden immer und immer wieder dasselbe durchmachen. Das würde dich zu Tode langweilen, oder? Aber genau hier kommen die Klassen, um Ihnen Zeit und Langeweile zu ersparen. Elemente, die denselben Klassennamen erhalten, werden gleich gestaltet. Dies bedeutet, dass Sie ein bestimmtes Element einmal formatieren müssen. Nehmen wir beispielsweise an, Sie benötigen einen H3, der auf eine bestimmte Weise formatiert werden soll. Geben Sie ihm einen Klassennamen und formatieren Sie ihn dann. Wenn Sie später einen anderen H3 benötigen, um das gleiche Design zu haben, müssen Sie ihm nur die gleiche Klasse und Voilà geben, Ihr Element ist richtig gestylt. Denken Sie daran, dass es wichtig ist, Ihre Klassen richtig zu benennen! Wenn Sie Schwierigkeiten haben, Ihre Klassen zu benennen, können Sie jederzeit BEM verwenden. Es ist einfach zu verwenden und bietet eine solide Stilstruktur, die einfach und leicht verständlich bleibt.

Kombinationsklassen sind die Klassen, die nach der ersten Klasse hinzugefügt wurden, und sie eignen sich hervorragend, wenn Sie eine Ausnahme erstellen oder ein oder zwei Dinge an der vorherigen Klasse ändern müssen. Nehmen wir das gleiche Beispiel wie zuvor: Sie haben einen H3 mit einem bestimmten Stil. eine Grösse von 28px, eine Zeilenhöhe von 1,5, fett und blau. Sie benötigen ein anderes H3 mit den gleichen Eigenschaften, nur jetzt muss es rot sein. Alles was Sie tun müssen, ist nach der ersten Klasse eine weitere Klasse hinzuzufügen und die Farbe des H3 zu ändern. Dann können Sie diese Kombinationsklasse jederzeit wiederverwenden.

Das Erstellen von Stilen ist eine grossartige Möglichkeit, um Zeit zu sparen, indem Elemente gestaltet werden, die in einem Design mehrmals verwendet werden. Als nächstes kommen Symbole. Symbole sind alle Komponenten, die während des gesamten Projekts wiederholt werden, z. B. Schaltflächen, Navigationsleisten, Kartenelemente, Fusszeilen usw. Symbole beschleunigen die Entwicklung Ihres Projekts erheblich. Es gibt zwei Arten von Symbolen, die Sie in Webflow erstellen können. Das erste sind die Symbole mit identischem Inhalt pro Instanz, dh Symbole wie Fusszeilen oder Navigationsleisten. Diese Komponenten haben im gesamten Design den gleichen Inhalt, daher sind sie für jede Instanz identisch. Wenn Sie eine davon bearbeiten, werden sie überall im Projekt bearbeitet. Die andere Art von Symbolen wie Karten, Heldenabschnitte oder Schaltflächen mit eindeutigem Inhalt pro Instanz sind Symbole mit demselben Layout und Design, deren Inhalt jedoch unterschiedlich ist (Text, Videos oder Bilder).

Dies waren einige der wichtigsten Konzepte und Dinge, mit denen Sie vertraut sein sollten, bevor Sie Webflow verwenden. Ich hoffe, sie waren nützlich und machen Ihre Reise mit Webflow reibungsloser und einfacher.