Webflow Foundations: So baust du eine Landing-Page auf

1. Einführung: Alle zusammen und willkommen bei Webflow Foundations. Dieser Kurs ist als Einführung in Webflow gedacht und wir vermitteln Ihnen alle notwendigen Fähigkeiten, die Sie für den Einstieg auf der Plattform benötigen Die Website, die wir in diesem Kurs erstellen werden , ist eine von Tesla inspirierte Landingpage Es ist nur eine einzige Seite. Auf dieser Seite werden wir alle wesentlichen Elemente von Webflow behandeln wesentlichen Elemente von Webflow Am Ende dieses Kurses sollten Sie die Plattform viel besser verstehen. Wir werden über die Webflow-Plattform sprechen und darüber , wie sie tatsächlich funktioniert Wir werden uns damit befassen, Ihr eigenes, veraltetes G zu erstellen, Sie haben benutzerdefinierte Bereiche, Sie haben eigene Dred-Layouts, müssen Ihre Website stalken, um sicherzustellen, dass sie genau so aussieht, wie Sie es sich wünschen, und stellen sicher , dass Ihre Website auf allen Geräten responsiv ist responsiv Wenn wir all diese Fähigkeiten kombinieren, sollte das Endprodukt eine gut gestaltete Landingpage sein Und am Ende dieses Kurses solltest du in der Lage sein, deine Webflow-Fähigkeiten weiter auszubauen und eine umfassende Website mit White Tas you in diesem Kurs Deshalb freue ich mich riesig darauf, mit dir in diesen Kurs einzusteigen. Also, nachdem das gesagt ist, lass uns anfangen. 2. Projektübersicht Erstellen deiner Landing-Page: Das Projekt für diesen Kurs ist wirklich einfach. Alles, was Sie tun müssen, ist, alle Schritte zu befolgen , die ich in diesem Kurs durchmachen werde. Am Ende sollten Sie eine Seite wie diese haben , die von Tesla inspiriert ist. Jetzt können die Bilder in den Projektdateien dieses Kurses heruntergeladen werden . Aber auch wenn Sie Ihre eigene Seite mit Ihrem eigenen Thema erstellen möchten , das einer ähnlichen Strukturebene folgt , ist das auch in Ordnung. Das ist völlig offen. Der Sinn besteht nur darin, Sie mit Webflow vertraut zu machen und Sie mit der Plattform vertrauter Egal, womit Sie hier enden , es ist immer noch ein Fortschritt Was auch immer Sie am Ende sagen, teilen Sie es bitte in der Diskussionsrunde mit, damit jeder von dem lernen kann, was Sie aufgebaut haben, und wir können das wirklich vorantreiben Ich freue mich darauf, damit anzufangen. Wenn Sie Fragen zum Projekt oder Fragen zu Webflow haben , kommentieren Sie bitte den Kurs Ich werde mich so schnell wie möglich bei Ihnen melden kommentieren Sie bitte den Kurs. Ich werde mich so schnell wie möglich bei Ihnen melden . Lass uns hineinspringen 3. Lektion 2 Design vor der Entwicklung: Okay. Bevor wir tatsächlich in Web Flote einsteigen und anfangen, unsere Landingpage zu erstellen , gab es etwas wirklich Wichtiges, das ich zuerst besprechen wollte Es geht um Wireframing und Design und darum , wie sich das von der Entwicklung unterscheidet und dass das Design von Drahtgittern immer vor der Entwicklung stehen sollte Weil das ein Fehler ist , der sehr leicht gemacht werden kann, und Sie werden vielleicht nicht einmal merken, dass es sich um einen Fehler handelt, aber er kann in Bezug auf die Zeit ziemlich kostspielig sein Und meiner Meinung nach jedenfalls, weil ich das am Anfang falsch gemacht habe . Als ich anfing, Webflow zu verwenden, habe ich einfach alles innerhalb von Webflows gemacht Früher habe ich dort mein gesamtes Design und meine Entwicklung dort gemacht Du machst gerade einen. Am Anfang denkst du, dass du es kannst. Du siehst den Unterschied nicht wirklich. Sie verstehen den Unterschied zwischen Design und Entwicklung nicht wirklich . Und ich denke, dieser Unterschied wäre viel stärker wenn Sie keinen Webflow hätten und gezwungen wären, Ihre Projekte zu programmieren, wenn Sie eine neue Website erstellen und den Code von Grund auf neu schreiben müssten. Das wäre viel offensichtlicher weil es für die meisten Leute sehr schwierig ist, Code für eine neue Website von Grund auf neu zu schreiben für eine neue Website von Grund auf neu und dann das Design zu übernehmen. Das ist eine ziemlich schwierige Frage. Aber wenn Sie eine Plattform wie Webflow Frame usw. haben , ist es sehr einfach, da reinzugehen und zu denken, dass Sie einfach Ihr gesamtes Design, Ihren gesamten Entwurf und Ihre Entwicklung erledigen können Design, Ihren gesamten Entwurf und Ihre , einfach alles da drin machen Aber das ist ein Fehler. Was ist eigentlich ein viel besserer Prozess, dem man folgen kann. Ist es, zu FM zu gehen oder ein Konto bei Figma zu eröffnen, wie ich es hier habe. Wenn Sie in naher Zukunft noch nichts von Figma gehört haben, werde ich einen vollständigen Kurs über Figma und Design und alles, was Sie darüber wissen müssen, erstellen Figma und Design und . Er ist absolut anfängerfreundlich, wenn Sie völlig neu darin sind Aber nur als Randnotiz für den Moment in diesem Kurs möchte ich Sie dringend dazu ermutigen, mit dieser Plattform zu experimentieren Sie können mir dabei folgen. Möglicherweise müssen Sie das für dieses spezielle Projekt nicht tun , aber ich werde es mir auf jeden Fall zur Gewohnheit machen und ich würde es auf jeden Fall empfehlen. Also hier habe ich diesen Kurs hier und ich gehe einfach zu diesem Kurs hier namens Skillshare Course Assets Dieser ist natürlich für den Kurs, den wir gerade machen Ich habe nicht viel reingesteckt, aber ich werde dir zeigen, was ich drin habe. Diejenigen, mit denen ich Ihre Aufmerksamkeit wirklich auf einige der Projekte lenken wollte Ihre Aufmerksamkeit wirklich auf einige der , die ich in der Vergangenheit gemacht habe. Ich habe einen für lass mich sehen. Ich versuche mir einen guten auszudenken, den ich dir zeigen kann. Wahrscheinlich eine, die ich dir zeigen kann, die keine Kundenarbeit ist, das wäre Lass uns einfach mit diesem weitermachen. Also A, ohne zu viel Zeit vom eigentlichen Fokus wegzunehmen , ist hier. Abi ist ein Softwareunternehmen. Ich habe das Backend meiner Software und das Frontend auf Figma entworfen , aus Mangel an mehr Kontext Aber eine Sache, zu der ich neige, ist, dass ich zuerst versuche alles in Figma zu entwerfen Dies ist eine Rohfassung der Landingpage, die Sie hier sehen können Und dass ich diese Seite tatsächlich erstellt habe, hat ein bisschen anders herausgestellt. Sie können hier sehen , dass in bestimmten Bereichen Bilder fehlen . Aber in den meisten Fällen habe ich fast das gesamte Design, das ich brauchte, hier gemacht . Und auch für diese Seiten hier oben. Nun, das ist so, dass Sie es nie perfekt machen werden, wenn Sie es in Figma tun , es sei denn, Sie haben hier ein Beispiel für mehr Seiten , die ich erstelle, nicht meine beste Arbeit, aber es ist nicht schlecht Aber der Punkt ist, wenn Sie in Figma arbeiten, können Sie sich aufgrund der Art und Weise, wie Figma seine eigene Benutzeroberfläche entworfen hat, voll und ganz auf das Design konzentrieren Weise, wie Figma seine eigene Benutzeroberfläche entworfen hat, voll und ganz auf das Weil ich mir keine Gedanken über Todesblockaden und Unterricht, Unterricht und all das machen muss und Unterricht, Unterricht und all Ich kann mich einfach auf das Design und die Umsetzung konzentrieren, du kreierst etwas , das ich kreieren möchte. Und das ist der Vorteil davon. Wenn ich dann zufrieden bin, habe ich alles in vollem Umfang entworfen , dann kann ich zu Webflow gehen und mich einfach darauf konzentrieren, dieses Design zu kopieren und es in Webflow neu zu erstellen, was viel, viel einfacher ist, als beides in Webflow machen zu müssen Das sage ich dir aus Erfahrung. Nun, das war Ambu. Das gibt Ihnen im Grunde nur eine Vorstellung davon, wie ein Figma-Dokument meiner Meinung nach aussehen würde , wenn Sie Designer Sie können es sogar noch weiter treiben. Ich bin ziemlich schlecht darin, nicht alles zu organisieren und auf dem neuesten Stand zu halten , und das ist etwas für mich , das ich auf meiner eigenen Reise immer besser werden muss meiner eigenen Reise immer besser Dieser hier für den Kurs enthält nur Bilder, die wir, wie bereits gesagt, auf der Website verwenden werden , aber es ist einfach ein guter Punkt Design vor der Entwicklung im Auge zu behalten, und ich möchte Sie ermutigen , dies in Zukunft zu tun . Vielleicht möchten Sie es in diesem Projekt sogar ausprobieren. Wie ich schon sagte, ich habe in naher Zukunft einen kompletten Kurs über Figma Okay. Und das ist alles. Lassen Sie uns dazu übergehen, tatsächlich in Wet Flow zu springen, diese Landingpage zu erstellen und tatsächlich etwas zu erstellen. Also lass es uns tun. Okay. 4. Lektion 1 Den Webflow-Benutzer verstehen Int(1): Okay. In Ordnung. Das allererste, was wir uns hier ansehen werden , ist das Verständnis der Webflow-Benutzeroberfläche Ich denke, das ist ein wirklich wichtiger Ausgangspunkt, weil es Ihnen einige wichtige Informationen darüber bietet , wie Webflow tatsächlich funktioniert und was es hinter den Kulissen tut , wenn Sie darauf aufbauen Weil Webflow sich ein bisschen von einigen anderen Plattformen unterscheidet , mit denen es konkurriert Wenn wir uns also Fahrräder oder Schramerbflow ansehen würden , macht Schramerbflow dasselbe All diese Plattformen machen dasselbe. Sie alle sollen Ihnen helfen, Websites einfacher, schneller und mit weniger Aufwand zu erstellen . Denn wenn Sie Code schreiben können und gut darin sind, dann werden Sie genau das tun und Sie werden darin großartig sein und Sie werden die gleichen Dinge erreichen, die wir tun würden, wenn wir keine Code-Plattform verwenden Aber wenn Sie nicht programmieren können und nicht die Zeit haben, Programmieren zu lernen, machen diese Plattformen einen großen Unterschied. Sie füllen wirklich eine Lücke , weil sie Ihnen eine zugänglichere Benutzeroberfläche bieten , die Ihnen wirklich nur hilft was Sie erreichen möchten, viel schneller zu erreichen. Webflow unterscheidet sich jedoch von diesen Plattformen, da es enger mit dem Programm und den Linien übereinstimmt, die wir im Allgemeinen mit der Erstellung von Websites verbinden würden mit der Erstellung von Websites verbinden Es orientiert sich eher an HTLCSS-Javascript als an Programmen wie X und Framer Und was ich damit meine, ist, dass wenn Sie auf We Framer entwerfen, Ihnen direkt auf Webflow eine leere Leinwand präsentiert wird, Ihnen wird auch eine leere Leinwand präsentiert Aber wenn Sie bei uns und Framer wirklich eine leere Tafel haben, wie ein leeres Blatt Papier, auf das Sie schreiben können, können Sie Elemente per Drag & Drop darauf ziehen und sie nach Belieben verschieben Sie müssen nicht so viel über dieses Zeug nachdenken. Bei Webflow musst du über diese Dinge nachdenken und du musst viel rücksichtsvoller Das Gleiche gilt für den Unterricht und nur für die allgemeine Art und Weise , wie Sie auf der gesamten Website strukturiert sind Ich bin mir sicher, dass es Drag-and-Drop ist, aber es ist Drag-and-Drop mit Einschränkungen. Aber diese Einschränkungen sind tatsächlich weitaus nützlicher als Sie denken würden, wenn Sie tiefer in den Entwicklungsprozess eintauchen und mehr darüber erfahren, worum dieser Plattform eigentlich geht. Okay. Um das zu unterstützen, möchte ich hier reden. Ich möchte Ihnen eine kleine Einführung in HTML, CSS und JavaScript geben. Dann kommen wir zu Webflow selbst, und ich werde Ihnen einfach die Benutzeroberfläche vorstellen und erklären, wo diese Programmiersprachen hinpassen und welche verschiedenen Teile der Plattform es gibt, auf denen Webflow sich tatsächlich mit diesen Programmiersprachen befasst mit diesen Programmiersprachen Mit HTML, CSS und JavaScript versuche ich nicht, Ihnen hier einen verrückten Einblick in jede dieser Sprachen zu geben , weil jede von ihnen für sich genommen , weil jede von ihnen für sich sehr tiefgründig ist und sehr schnell sehr kompliziert Ich versuche dir nur zu erklären , was sie sind und welchen Zweck sie erfüllen. HTML oder Hypertext-Marktsprache, Sie sollten dies im Grunde als den Baustein des Webs Nun zu den beiden Metaphern, die ich hier habe, um Ihnen zu helfen, das ein bisschen besser nach Hause zu bringen Sie sollten sich HTML wie den Rahmen eines Autos oder den Rahmen eines Hauses vorstellen , es bietet einfach den Rahmen eines Autos angeht, Was den Rahmen eines Autos angeht, sagt mir der Rahmen nichts darüber das Auto ist, wie sein Innenraum aussehen wird, wie schnell es fahren wird, wie es aussehen wird Es gibt mir nichts, alles, was ich aus dem Rahmen weiß, ist, dass es sich um ein Auto handelt, und es ist mit HTML sehr ähnlich , wenn es um Websites geht. Wenn ich einfach HTML ohne Stil, ohne CSS, ohne Javascript verwende , wird es nicht sehr gut aussehen. Und unten habe ich ein Beispiel dafür, wie eine einfache HTML-Website aussehen würde. Dieser Code hier, wie Sie sehen können, muss man nicht viel von dem verstehen , was hier vor sich geht, aber im Grunde haben wir nur einen Titel, Text von jemandem und ein paar Links. So sieht das in HTML aus, und da ist kein CSS drin, es gibt kein Styling, das ist nur reines HTL Und so sieht es aus. Nun, wenn ich einen Kunden oder einen Klienten hätte und ich eine Website designe und sie ungefähr so aussieht, würden wir nicht sehr glücklich sein und sie werden nicht sehr glücklich darüber sein weil das nicht das ist, was wir von einer modernen Website erwarten würden . Wir erwarten, dass etwas richtig gestylt ist, dass eine Marke einzigartig ist, modernen Designprinzipien folgt , all diese Dinge Das würde es nicht tun, aber das meine ich dem Frame, weil HTML die Struktur vorgibt , wenn Sie nur an eine einzelne Webseite denken , HTML würde die Struktur der gesamten Seite für diese Seite bereitstellen , es gibt mir eine Struktur Ich habe einen Abschnitt, ich habe einen Titel, ich habe Haupttext und Links, und wenn ich weitere Inhalte zu dieser Seite hinzufügen wollte, würde ich das in HTML hinzufügen. Aber wenn ich irgendwelche Hintergrundfarben hinzufügen wollte, wenn ich die Schriftarten ändern wollte, wenn ich etwas daran ändern wollte, würde ich das mit CSS machen. Ebenso würde ich, wenn ich eine Interaktion hinzufügen wollte, wenn ich wollte, dass sich die Linksäulen ändern, wenn ich mit der Maus über sie fahre, wenn ich wollte, dass sich die Linksäulen ändern, wenn ich mit der Maus über sie fahre, Java Script dafür verwenden Wenn ich wollte, dass sich die Textgröße ändert, wenn ich mit der Maus darüber fahre, würde ich dafür JavaScript verwenden. Alles, was kleine Animationen oder Interaktionen beinhaltet , das ist alles JavaScript , das das macht Aber wie dem auch sei, das gibt dir ein Beispiel für HTML. Lass uns weitermachen. Wenn wir zu CSS übergehen, definiert CSS im Grunde, wie unsere Webseite aussehen wird , und das habe ich bereits erwähnt. Es geht um Design , bei dem Sie den Pinsel auf die Seite nehmen den Pinsel auf die Seite und sie genau so gestalten, wie Sie sie gestalten möchten. Farben, Schriftarten, Größe und Proportionen, Reaktionsfähigkeit, wie sich diese Elemente, wie sich die HTML-Elemente ändern, wenn eine Seite größer oder kleiner wird größer oder kleiner es zum Beispiel vom Desktop zum Mobilgerät wechselt , kommt CSS ins Spiel und folgt der Metapher, die ich CSS wird bestimmen, wie Ihr Haus aussieht. Das ist es, was es von einem Rahmen zum Haus bringt. Gleiche gilt für ein Auto, das CSS in Bezug auf das Webdesign ist der Unterschied zwischen dem Rahmen eines Autos und einem fertig gebauten Tesla. Das macht eine Website am Ende zu einer Website. Ein Beispiel für CSS, das ist ein sehr einfaches Beispiel und es ist nicht unbedingt ein gutes Beispiel, aber es zeigt genau, was es ist. Das CSS hier auf der linken Seite sagt uns im Grunde, dass wir möchten die Hintergrundfarben dieser beiden Elemente ändern. Wie Sie sehen können, handelt es sich bei diesem Code nun um HTML, und CSS wurde innerhalb des HTML-Codes angewendet. Dies wäre oft nicht der Fall. Wenn Sie ein echtes Projekt am Laufen hätten, würde sich Ihr CSS in einer anderen Datei als Ihr HTML befinden, und Sie werden einer anderen Datei als Ihr HTML befinden, Ihr CSS importieren, wann immer Sie es benötigen. Jetzt füge ich hier nur der Einfachheit halber die CSS-Stile in die HTML-Elemente ein, weil ich weiß, dass ich dafür keine separate Datei benötige Für den ersten für das H Okay. Es ist für den Kopf in einem Stil. Wir ändern den Hintergrund auf Blau. Und für den Absatz ändern wir die Tomate, wie Sie hier sehen können, und Dodger-Blau für den ersten Und das nur, um zu veranschaulichen, wie es aussieht , wenn wir versuchen, diese Elemente zu ändern , und was es tatsächlich tut Das ist alles, was wir hier zu zeigen versuchen. Nun, wenn wir das, was wir über HTML und CSS wissen, nehmen und zu Javascript übergehen. Wenn wir an ein Auto denken, ist JavaScript wie der Motor eines Autos. Es geht um Bewegung. Es geht um Interaktion. Es geht darum, wohin die Website geht. JavaScript ist also ein leistungsstarkes Programm, und Line wird hauptsächlich verwendet, um Websites Interaktivität und dynamisches Verhalten zu verleihen um Websites Interaktivität und dynamisches Verhalten zu Es arbeitet zusammen mit HTML und CSS, wobei HTML die Struktur von Webinhalten und CSS deren Erscheinungsbild verwaltet JavaScript erweckt die statischen Elemente zum Leben und ermöglicht es ihnen, auf Benutzeraktionen zu reagieren und komplexe Funktionen auszuführen. JavaScript kann also sehr schnell sehr kompliziert werden und man kann sehr viel damit anfangen Auf der ganz grundlegenden Ebene fügen Sie Ihnen Interaktionen hinzu, wenn Sie mit dem Mauszeiger über Schaltflächen fahren oder wenn Sie möchten, dass Mauszeiger über Schaltflächen fahren oder wenn Sie möchten eine Schaltfläche etwas tut, wenn Sie darauf klicken, ähm, wenn Sie eine Diashow auf Ihrer Website haben möchten und Sie möchten, dass eine Schaltfläche das auslöst, all das ist Javascript Aber Javascript kann noch viel weiter gehen. Aber in Wirklichkeit ist es der Motor einer Website. Wenn Sie möchten, dass Ihre Website Dinge tut, wird JavaScript dafür sorgen. Ein Beispiel. Und noch einmal, ich sollte sagen, dass ich hier ein sehr einfaches Beispiel für JavaScript habe. Auch hier haben wir HTML-Code auf der linken Seite und wir haben die Ausgabe davon auf der rechten Seite. Alles, was bei dieser Interaktion passiert , ist, dass, wenn jemand auf die Schaltfläche mit der Aufschrift „ Klick mich“ klickt , eine Benachrichtigung mit der Aufschrift Hallo Welt erscheint, und das ist der Code, der das tut. wäre es nicht möglich, so etwas zu erstellen Ohne JavaScript wäre es nicht möglich, so etwas zu erstellen. Wenn ich okay bin. Wenn irgendeine Interaktion wie diese, so etwas beinhaltet Java-Skript. Und ich werde dir genau zeigen, wo das bei Webflow ins Spiel kommt , denn so sieht es nicht aus Weißt du, bei Webflow musst du keine Codes schreiben Du wirst dir darüber keine Gedanken machen müssen. Aber es hilft zu verstehen , dass Sie das tun müssten wenn Sie das entwerfen würden , wenn Sie Code von Grund auf neu schreiben würden, Sie müssten Ihr eigenes Java-Skript schreiben, Sie müssten sich diese Funktionen selbst einfallen lassen. Es kann sein, genau hier. Das ist die JavaScript-Funktion hier im grünen Bereich Sie müssten Ihre eigenen Funktionen schreiben und sie im Grunde von Grund auf neu erstellen. Ich glaube, ich habe das am Anfang erwähnt, aber die meisten Websites im Internet werden mit einer Kombination aus HML-CSS erstellt mit einer Kombination aus HML-CSS JavaScript, ich denke, der genaue Prozentsatz davon ist 94% aller Websites im Internet, die eine Kombination dieser drei Sprachen sind Und der Punkt ist Und selbst wenn Sie eine Plattform wie Webflow verwenden, wird Ihre Website immer noch in diesen Zeilen veröffentlicht Ein Webflow bietet Ihnen eine Oberfläche auf Ihrer Website und übersetzt dann in eine Sprache, die das Internet verstehen kann die das Es ist nicht so, dass die Website auf Webflow-Art veröffentlicht wird , als ob Webflow dafür eine spezielle Methode hätte. All diese Plattformen, all diese lokalen Plattformen machen dasselbe Sie nehmen dein Design. Sie konvertieren es in einen Code, den das Internet verstehen kann, und sie veröffentlichen ihn. Mflows ist in dieser Hinsicht nicht anders, aber die Art und Weise, wie es das macht , ist besser als die meisten Also, was ich jetzt tun werde, ist dass wir hier rausspringen und ich gehe zu Webflow und schaue mir die Plattform an und sehe, was vor sich geht Ich werde mich hierher verlegen, und dann ist das eine Website für mein Startup namens Ambo Das ist nicht, um für Ambos zu werben, sondern das ist die Website, auf der ich demonstrieren möchte Aber diese Seite selbst soll ziemlich einfach und unkompliziert sein , und die Landpage, die wir entwerfen werden, wird auch dieselbe sein Wir werden uns auf Einfachheit konzentrieren und einfach etwas schaffen , das gut gestaltet ist, uns aber auf die Benutzeroberfläche konzentrieren. Es gibt ein paar Schlüsselbereiche , die ich hier besprechen möchte und alle beziehen sich auf alles, worüber wir gerade gesprochen haben . Weil ich das nicht zu sehr verkomplizieren möchte. Ich möchte Ihnen im Grunde nur die wichtigsten Bereiche erklären , die Sie am häufigsten verwenden werden , wenn Sie mit Webflow entwerfen , und warum sie Nur kurz, dieser erste Tab hier ist dein Seiten-Tab. Dort erstellst und fügst du neue Seiten hinzu und verwaltest die Seiten, die du hast. Das sind Ihre CMS-Sammlungen. werden wir jetzt nicht eingehen, aber darauf kommen wir ein anderes Mal zurück. Der zweite ist ein Ort, an dem Sie viel Zeit verbringen werden. Das ist die Struktur Ihrer Seite, und darüber habe ich gesprochen, wenn es um HTML geht. Wenn ich mir das ansehe, stellt das für mich eine HTML-Struktur dar. Dies ist die Struktur Ihrer Site. Bei jeder Website tendiere ich dazu, alles mit Standardabschnitt und Standardcontainer zu klassifizieren, es sei denn, ich habe etwas Einzigartiges , das ich mache. Aber wie Sie hier für diesen oberen Abschnitt sehen können, habe ich diesen Heldenbereich einen Heldencontainer genannt und dann habe ich ihn umwickelt und dann sind alle meine Inhalte darauf. Dann habe ich jeden dieser Deadlocks im Grunde auf der rechten Seite gestaltet , worauf ich als Nächstes eingehen werde Wenn ich also Elemente zur Seite hinzufügen möchte, ich sie mit der Plus-Schaltfläche hinzu. Wenn ich also ein Deck hinzufügen möchte, kann ich es darauf ziehen, aber es ist nicht so, dass ich Text einfach ziehen oder darauf ziehen und ihn platzieren kann , was ich Ich muss entsprechend stylen richtigen HTML - und CSS-Prinzipien verwenden. Ich werde das vorerst einfach löschen. Wenn ich wieder rein gehe diese Überschrift bearbeiten möchte, würde ich das auf der rechten Seite tun, auf der rechten Seite, das sind meiner Meinung nach all Ihre CSS-Änderungen Wenn wir über CSS und Styling nachdenken, passiert alles auf dieser rechten Seite Ich denke oft auf der linken Seite darüber nach, ich habe es hier mit HTML zu tun. Und dann beschäftige ich mich auf der rechten Seite mit meinem CSS. Irgendwann wirst du nicht mehr so viel darüber nachdenken, aber für den Anfang ist es hilfreich, es so zu betrachten. Wann immer Sie Änderungen an einem Titel, einer Schaltfläche, einer Farbe oder etwas anderem vornehmen möchten einer Schaltfläche, einer Farbe oder etwas tun Sie dies auf der rechten Seite Aber zu guter Letzt , wenn wir an JavaScript denken , ist JavaScript Interaktionen Ganz unten in dieser rechten Spalte sehen Sie, dass Sie Effekte hinzufügen können. Webflow hat dies zunächst hinzugefügt, um Interaktionen einfacher hinzuzufügen , die nicht umfangreich und komplex sind und deren Erstellung viel Zeit in Anspruch nimmt Sie können Animationen für Ihre Opazität, Konturen, Kastenschatten und TCD-Transformationen All das kann hier passieren. Wenn Sie jedoch anspruchsvollere Interaktionen erstellen möchten , tun Sie das im Interaktions-Parel Das können also Animationen sein, wenn Seiten entweder per Mausklick oder Mauszeiger bewegt werden, wenn Sie durch die Seite scrollen und IN-Elemente in die Ansicht gescrollt werden, all das würde als Javascript-Interaktionen betrachtet werden Damit hoffe ich, dass ich Ihnen etwas mehr Kontext zur Plattform als Ganzes erklärt und gegeben etwas mehr Kontext zur Plattform als Ganzes Aber wir werden viel tiefer darauf eingehen und Sie können den gesamten Weg verfolgen, so wie ich es tue. Dies sollte Ihnen nur eine etwas genauere Einführung in die Funktionsweise der Plattform geben. Und die leistungsstarken Technologien , die ihr zugrunde liegen Aber wir werden uns mit all dem befassen und eine großartige Landingpage erstellen Lass uns mit dem nächsten Video weitermachen. 5. Lektion 3 Aufbau deines Style-Guides: Okay. Nachdem wir nun ein wenig über die Webfll-Benutzeroberfläche gesprochen haben, haben wir über die Bedeutung des Designs vor der Entwicklung gesprochen , und ich habe Ihnen eine kleine Einführung gegeben was GM ist und warum Sie es verwenden sollten Jetzt werden wir tatsächlich weitermachen und mit dem Aufbau dieser Landingpage beginnen Und wenn Sie ein Anfänger in diesem Bereich sind, wie dieser Kurs beabsichtigt ist, würde ich Ihnen dringend empfehlen , genau zu folgen , was ich tue, um sich mit der Plattform vertraut zu machen und Ihr Projekt dann am Ende mit anderen zu teilen , damit ich es überprüfen kann. Ich kann Ihnen einige Ratschläge geben, wie Sie es verbessern können. Aber der Sinn dieses Kurses besteht wirklich nur darin, Sie mit der Plattform vertraut zu machen, und ich hoffe, dass wir das können, genau das versuche ich hier zu erreichen. Also das Erste, was wir tun werden und das Erste, was ich jedem empfehlen würde , ist es. Wann immer sie eine neue Website auf Webflow erstellen , müssen sie ein Stylegate erstellen Jetzt wissen Sie vielleicht schon, was ein Style Gate ist, falls Sie jemals eines für Ihr Branding verwendet Es gibt Ihnen im Grunde nur einen Überblick darüber, was Ihre Marke ist und welche Spezifikationen sie hat. Was Sie beachten sollten, wenn Sie jemals Design-Assets für eine bestimmte Marke erstellen . Bei Webflow ist die Verwendung etwas anders. Es geht weniger nur darum, die Marke zu demonstrieren, sondern es gibt auch eine viel praktischere Anwendung dafür Wenn wir also ein Style-Gate erstellen, wählen wir eine Schriftart oder eine Farbe aus. Wir erstellen Buttons, denen wir unsere Farmen oder Rich-Text-Blöcke gestalten können Im Grunde alles , was wir der gesamten Website einheitlich verwenden werden. Dort würden wir es stylen , wenn wir es nach Dort würden wir es stylen , wenn wir es auf der gesamten Website einheitlich verwenden werden. Dort würden wir es stylen , wenn wir es nach dem Styleguide gestalten, wir können die Elemente, die wir überall auf der Website erstellen, wiederverwenden , ohne sie jedes Mal neu erstellen zu müssen sie jedes Mal neu erstellen zu Bei Webflow dreht sich alles um wiederverwendbare Elemente. Das ist eine wichtige Sache, die ich denke, wenn Sie neu in diesem Bereich sind, je früher Sie das verstehen, desto besser, denn Webflow kann sehr, sehr eng sein , wenn Sie jedes Mal alles von Grund auf neu erstellen Was du tun wirst, wenn du das tust, alles, was du tun wirst, ist all deine Kurse in die Luft zu jagen Du wirst es ein bisschen langsamer machen. Ihre Website wird viel schwerer sein, als sie sein muss. Wenn Sie sich jedoch darauf konzentrieren, wiederverwendbare Elemente zu erstellen wird Ihre Website viel leichter, schneller und es wird für Sie viel einfacher sein , sie zu erweitern und darauf aufzubauen. Das ist es also, worauf ich hier wirklich hinaus will. Sie können das hier im Webflow-Dashboard sehen. Was wir tun werden, ist, dass ich hier eine Menge Faltungen erstellt habe , die als Demo-Websites bezeichnet werden. Wir werden einfach darauf eingehen , wir werden eine neue Website erstellen , um mit einem leeren Dokument zu beginnen . Ich nenne es einfach Tesla Inspires Model Three Website Die andere Sache, die ich sagen möchte die Bilder, die ich auf dieser Website verwenden werde Sie finden sie unten irgendwo verlinkt , damit Sie sie herunterladen können, und Sie können sie verwenden, um ihnen zu folgen. Ich werde auf dieser ersten Seite nicht viele Bilder verwenden, aber in den folgenden Lektionen werde ich es tun. Lass uns einfach und wir können damit anfangen. Großartig. Wenn Sie also mit einem neuen Projekt auf WebP beginnen, wird Ihnen immer eine leere Leinwand angezeigt , die so aussieht Wenn Sie hier jedoch zum Tab Seiten wechseln, haben Sie standardmäßig eine Startseite, eine Passwortseite und eine 404-Seite Das ist deine Grundlinie. Das ist es, womit du anfangen wirst. Was wir hier hinzufügen werden, ist , dass wir auf diese Schaltfläche klicken und eine Seite namens Snail Guys hinzufügen werden Okay. Und Sie müssen sich vorerst über nichts anderes innerhalb des Seitensatzes Gedanken machen , aber wir werden einfach weitermachen und das erstellen. Das Erste , worüber Sie hier nachdenken sollten, ist die Rückkehr zu dem, worüber ich gesprochen habe, mit den verschiedenen Programmiersprachen und dem Box-Layout, das das Web verwendet. Technisch gesehen ist es immer noch ein Drag-and-Drop-Rechnungsprogramm, aber Sie müssen dies mit dem Box-Layout tun Es gibt ein bisschen mehr Einschränkungen, aber sie sind hilfreich, je tiefer Sie sich mit dieser Plattform befassen Wenn Sie etwas über diese Plattform erfahren, würden Sie es meiner Meinung nach sowieso vorziehen, auf diese Weise zu arbeiten meiner Meinung nach sowieso Also das Erste , was wir tun werden, ist einfach einen Abschnitt hinzuzufügen. Und das hier oben in der rechten oberen Ecke, hier werden Sie Klassen erstellen. Nun, Sie können einfach Basisklassen haben, das sind nur einzelne Klassen in die ich hier eine Sache eintippe, und das ist meine Klasse , oder wir können Kombinationsklassen haben, wo wir eine Basisklasse haben, die ich hier für unsere Headins erstelle. Und dann fügen wir darüber hinaus weitere Klassen hinzu, sodass wir jedem Element individuelle Angebote und Optionen hinzufügen können . Also kommen wir etwas später dazu. Aber das Erste, was ich immer tun werde, wenn ich hier reinkomme. Ich erstelle einfach eine Klasse namens Basic Section. Das ist also nur ein wiederverwendbarer Abschnitt, den ich auf dieser Seite und den meisten anderen Seiten verwenden werde , da Abschnitte normalerweise nicht so viel Stil benötigen. Das ist also das Erste, was ich tun werde, und ich werde die Breite auf 100% einstellen. Und ich werde keine Polsterung oder ähnliches hinzufügen, nur weil es nicht wirklich nötig Das ist das Erste. Dann kannst du hier drüben den Wert des Abschnitts sehen. Jetzt füge ich einen Div-Block hinzu. Jetzt möchte ich hier auf eine Sache hinweisen, von der ich denke, dass es wirklich gut für Sie wäre , sich an Container zu gewöhnen. Versuchen Sie nicht, die Webflos-Container-Struktur zu verwenden , die ich Ihnen hier geschickt gegeben habe. Verwenden Sie immer einfach einen Deadlock und gestalten Sie ihn dann so wie Sie es möchten Es gibt keinen Unterschied zwischen beiden in Bezug auf die Leistung Ihrer Website oder die Art und Weise, wie sie verwendet wird Sie werden auf die gleiche Weise verwendet. Containers Webflow-Version eines benutzerdefinierten Deadlocks, der Ihnen jedoch nur dann zur Verfügung steht, wenn Sie ihn benötigen Die meiste Zeit, obwohl ich finde der Container viel redundanter ist , als er vielleicht sein sollte Ich benutze immer einfach einen Deadlock und gestalte ihn so, wie ich es für richtig halte. Das würde ich empfehlen. Ich habe hier einen Deadlock hinzugefügt, und wir werden diesen Basiscontainer einfach nennen . Das ist das Erste Darin ist dies der letzte Block, den wir hinzufügen werden, bevor wir tatsächlich mit dem Hinzufügen von Elementen beginnen. Ich nenne diesen einen Rapper. Weil wir die Überschrift für die Seite einfügen werden. Du musst das nicht tun. Ich übe nur. Es ist auch einfach ein guter Anfang. Außerdem werden wir hier oben unsere erste Überschrift hinzufügen. Und wir werden einen Absatz hinzufügen. Wir werden sie noch nicht stylen. Wir werden darauf zurückkommen. Wir werden sie später stylen , weil es einfach noch keinen Sinn macht, sie zu stehlen Und wenn wir dann zu Tao Wrapper gehen, werden wir auf der rechten Seite einige Änderungen vornehmen Wir legen die Polsterung für jede Seite ich setze sie auf Ich könnte es tatsächlich ändern, ich werde auf 40 umstellen und dann zeige ich dir in einer Sekunde, was ich tun werde Dann werde ich die Ausrichtung des Schrittblocks so ändern , dass der gesamte Text zeigt, dass der gesamte Text zentriert ist. Was wir hier also tun werden , ist, auf Flex umzustellen, und wir werden es nach unten ziehen lassen, und dann wollen wir es in der Mitte haben . Wir wollen alles in der Mitte haben. Jetzt können Sie sehen, dass die Überschrift zentriert ist, aber das hat es mit dem Absatz nicht getan. Das liegt daran, dass wir das auf Absatzebene ändern müssen , aber das werden wir vorerst belassen. nun die Breite des Titel-Wrappers angeht, werde ich das auf einen Prozentsatz ändern, und ich werde diesen Wert auf 60% setzen weil ich das für klug halte Jetzt können Sie aber sehen, dass alles auf die linke Seite gezogen wurde, und hier müssen wir in der Hierarchie eins nach oben gehen und das ändern , um sicherzustellen, dass der Title-Wrapper zentriert ist Also gehen wir zum Basiscontainer über. Und das ist eigentlich etwas, das ich sowieso beabsichtigt hätte. Wir werden das flexibel machen, und wir werden dafür sorgen, dass es Sinn macht, und wir werden sicherstellen, dass es vertikal nach unten geht . Jetzt kommen wir etwas später darauf zurück, aber ich werde nur in Ihrem Stil angeben , dass der Fülltext einfach gleich bleiben kann. Aber dieser Stil spielt vorerst keine Rolle, wir kommen zurück zu Also, was wir tun werden, ist, einen weiteren Abschnitt hinzuzufügen. Wir werden einen weiteren Div-Block hineinlegen und noch einen weiteren darin. Jetzt werde ich dir zeigen, wie auf dieser Seite aussehen. Wir haben nur einen Abschnitt mit dem Dvlock und dann einen weiteren Diblock darin, aber wir wollen es ungefähr so aussehen lassen Und darauf beziehe ich mich, wenn wir über wiederverwendbare Elemente sprechen Wir werden das später etwas weiter vorantreiben, aber im Moment konzentrieren wir uns nur auf die Grundlagen. Wir haben bereits einen klassischen Basisabschnitt erstellt, Basic Container Title Wrapper Hier drüben für diesen Abschnitt werden wir diesen einen Basisabschnitt nennen Dann nennen wir diesen einen Basiscontainer. Und wir haben sie bereits da und Sie können sehen, dass sie alle Stiloptionen, die wir für diese Klassen festgelegt haben , standardmäßig anwenden alle Stiloptionen, die wir für diese Klassen festgelegt haben . Dann dieser letzte Block, wir werden ihn etwas anderes nennen. Ich nenne das Überschriften Wrapper. Weil hier die Überschriften sein werden. Also in der Verpackung der Überschriften. Hier werden wir uns unsere Überschriften ansehen. Wir werden sie stylen. Wir werden die Schriftarten in den richtigen Farben verwenden. Wir werden sie genau so aussehen lassen wie wir sie haben möchten, und wir werden sicherstellen, dass sie auf jedem Gerät angemessen gestaltet sind auf jedem Gerät angemessen uns also zunächst sechs Überschriften hinzufügen, Lassen Sie uns also zunächst sechs Überschriften hinzufügen, weil es in HTML sechs verschiedene Überschriften-Tags gibt , nämlich H eins, H zwei, H, H vier, fünf, sechs, und wir möchten, dass sich das auf unserem Stylegate widerspiegelt Möglicherweise verwenden Sie nicht alle H-Sechs-Überschriften, aber es hat sich bewährt, sie einfach zu haben und zu wissen, dass Sie sie erstellt haben Das ist also Überschrift eins. Und dann wollen wir für den Überschriften-Wrapper die Breite auf 100% ändern Und das liegt daran, dass ich die Container-Stile habe um Essential the vesicle zu sein Es wird einfach alles hineinziehen, es sei denn, ich sage dem untergeordneten Element, dass es die volle Breite der Seite haben muss Also haben wir das gemacht, und dann werde ich auch vier Px auf jeder Seite hinzufügen vier Px auf jeder Seite , damit es einigermaßen proportional aussieht. Also werden wir diese sechsmal duplizieren. Wir nennen das Überschrift eins, Überschrift zwei, drei oder Fünf und sechs. Richtig. Jetzt können wir uns also ein bisschen darauf konzentrieren. Hier werden wir eine Kombinationsklasse erstellen. Die erste Klasse , die wir erstellen werden, ist nur für eine Überschrift selbst bestimmt. Also werden wir zu all diesen Stilen eine Klasse hinzufügen, aber wir werden sie trotzdem hinzufügen. Wir werden hier eine Überschrift hinzufügen. Hier können Sie sehen, wie Webflow es mir empfehlen wird , weil es weiß, dass es sich um eines handelt, das ich erst kürzlich erstellt habe Worte, wir wollen die Eigenschaften ändern, all diese Elemente werden Gemeinsamkeiten haben Wir wissen also, dass die Schrift etwas ist, was sie alle gemeinsam haben werden, wir wissen, dass die Farbe etwas ist, das sie alle gemeinsam haben werden . Das Einzige, was sie nicht gemeinsam haben werden , ist ihre Größe und ihre Höhe. Aber eine weitere Gemeinsamkeit ist die Zeilenhöhe, nur um darauf hinzuweisen. Aber wir werden es durchziehen. Also werden wir die Schrift auf Railway ändern. Gehen wir nun auf der rechten Seite zur Typografie und Sie können schon sehen, nur weil ich sie drüber habe, Sie können sehen, wie sie sich alle ändern Aber die erste, die wir hinzufügen möchten, ist die Schriftart, die ich verwenden möchte, aber die Eisenbahn wird hier nicht angezeigt. Also, wenn wir Webflow eine benutzerdefinierte Google-Schriftart hinzufügen möchten. Das ist sehr einfach, da in Webflow alle benutzerdefinierten Schriftarten erstellt wurden Wenn wir jedoch einen wirklich benutzerdefinierten Fonds hinzufügen möchten , den wir heruntergeladen haben oder den wir von einer Website eines Drittanbieters gekauft haben, müssten wir ihn tatsächlich hochladen Also lasst uns hier oben auf die Schaltfläche Schriften hinzufügen klicken. Und es wird uns zur Site Sence für Webflow führen. Und wenn es geladen wird, werden wir sehen. Für Google Fonts kann ich also eine Schriftart aus dieser Liste auswählen. Also werde ich mit der Eisenbahn fahren. Ich werde einfach all das überprüfen. Manchmal kann Webflow Sie zurückwerfen , wenn Sie all dies überprüft In anderen Fällen ist das kein Problem. Aber ich überprüfe sie nur alle, nur weil ich die volle Kontrolle über die Schriftart haben möchte, die ich verwende. Also werden wir das hinzufügen. Und wenn Sie einen benutzerdefinierten Fonds hätten , den Sie hinzufügen möchten, würden Sie das hier tun, Sie würden einen hochladen. Sie würden also Ihre Dateien hochladen. Im Allgemeinen wären dies TTF-Dateien oder OTF-Dateien Wie auch immer. Weiter geht's, das haben wir hochgeladen. Gehen wir also zurück zum Designer und schauen, ob wir jetzt auf die Eisenbahn zugreifen können oder ob wir das zumindest in unserem Projekt verwenden können. Also sind wir wieder hier drin und gehen nach Stairway. Also, wenn ich zur Überschrift gehe, los geht's. Sie können sehen, dass die Eisenbahn da ist. Das ist also die Schrift, die wir verwenden werden. Nun, die Farbe für die Zwecke dieses Kurses, werde ich im Grunde genommen Schwarz und Weiß verwenden. Ich werde mit den Farbschemata nichts Ausgefallenes machen, vor allem, weil die Bilder für die Landingpage den größten Teil der Rede sein mit den Farbschemata nichts Ausgefallenes machen, vor allem, weil die Bilder für werden . Es wäre ziemlich überflüssig für mich, zu versuchen, neue Farben einzufügen , und sie wollen es einfach ganz einfach halten. Also ich möchte, dass die Schriften, ich möchte, dass die Farben schwarz sind. Du willst nie wirklich Schwarz dafür verwenden, ich verwende ein ziemlich starkes Schwarz. Schwerer als das, das Webflow standardmäßig bereitstellt. Aber ja, du willst immer echt schwarz bleiben oder manchmal, echtes Weiß wird oft benutzt echtes Schwarz, ich halte mich immer fern. Ich habe die Farbe dafür festgelegt. Wir haben die Vorderseite festgelegt. Das Letzte, was wir tun wollen, ist die Zeilenhöhe festzulegen. In der Fotografie können Sie hier also sehen, dass wir Höhe haben. Eine Sache, die ich dabei empfehlen würde ist Webflow. Wir setzen es standardmäßig auf 44 px Ich würde empfehlen, dies so zu bearbeiten , wie wir es jetzt auf unserer Basisklassenebene tun, und ich würde empfehlen, es auf einen Prozentsatz zu ändern, und Sie können sehen, dass es ankommt. Und dann würde ich empfehlen, es auf 145% zu ändern 125% Ihr Minimum wären Ich würde 145% empfehlen. Und wenn Sie das Gefühl haben, dass Sie es wirklich brauchen, können Sie es auf 165% Aber das ist der Bereich, den wir uns in Bezug auf Ihre Kopfhöhe und Ihren Absatztext angesehen in Bezug auf Ihre Kopfhöhe haben. Also lass uns 145 gehen. Ich denke, das ist ein guter Ort für uns. Standardmäßig wird bei all Ihren Überschriften zusätzlicher Rand hinzugefügt Sie können sehen, dass ich bei diesem Bild oben 20 Ränder habe und unten zehn Ich werde sie vorerst so lassen. Ich gehe vielleicht zurück und ändere später, wenn ich nicht glaube, dass sie zum Text passen, aber als allgemeine Standardeinstellung sollten sie in Ordnung sein. Nun, das aktiviert die Basisklasse dafür. Das nächste, was wir tun werden, ist, jeden von ihnen einzeln Für die erste Überschrift werde ich eine weitere Klasse namens H-one hinzufügen. Die zweite, die ich hinzufügen werde, ist H zwei. Dann ist ein anderer H drei. Okay. Oh vier Okay. wir nun alle bewertet haben, wollen wir eigentlich die Größe jeder wollen wir eigentlich dieser Überschriften ändern, um sicherzustellen, dass sie auf allen Geräten einheitlich sind wie wir hier oben sehen können Das Tool, das ich Ihnen dafür empfehlen werde heißt Type Scale, und ich habe es die meiste Zeit verwendet Im Grunde werde ich Ihnen nur die richtigen Größen geben , die Sie für jeden Ihrer Köpfe verwenden sollten . In diesem Fall habe ich die Basis auf 18 gesetzt. Wir unterstützen jedes dieser REM PX oder PT. Aber ich würde einfach bei P x bleiben, und diese werden auf jedem Gerät verwendet. Der erste, den wir nehmen werden, ist 53,75, und wir sind buchstäblich direkt drin Und Sie können sehen , dass ich, weil wir diese Kombinationsklassen hinzugefügt haben, jetzt jede dieser Überschriften einzeln veralten kann dieser Überschriften einzeln ohne dass, wenn ich eine Überschrift erstelle , diese nicht für alle gilt, sondern nur für die, in der ich gerade bin Und lassen Sie uns das einfach erledigen. Ich habe 44,79 direkt hinter mir. Drei und zuletzt sechs Ich würde sagen, das sieht gut aus. Nachdem wir das gestylt haben, schauen wir uns an, wie diese auf verschiedenen Geräten aussehen Ich denke, sie sind insgesamt so, wie sie sich stylen, wenn sie herunterkommen. Wenn wir hier unten ankommen, denke ich, dass die H-Linie insgesamt okay sein wird. Ich finde das ein bisschen groß. Aber darauf kommen wir trotzdem zurück, wenn wir denken, dass es zu viel ist. Aber als das werden wir noch einen weiteren Abschnitt erstellen. In diesem nächsten Abschnitt werden wir die Absätze schreiben , ich werde sie einfach direkt hier hinzufügen. Ich werde den Namen dieser Klasse ändern, um den Text-Wrapper zu erstellen Ich sollte helfen. Wir gehen wieder hier rauf. Wir werden einen Absatz hinzufügen. Nun, was ich generell für Absätze tun würde, würde ich versuchen , großen Text, mittleren Text oder Standardtext und dann kleinen Text hinzuzufügen mittleren Text oder Standardtext , da Sie möglicherweise unterschiedliche Textgrößen benötigen , je nachdem, an welchem Teil der Website Sie gerade arbeiten. Also eins bis drei und wir werden im Grunde dasselbe noch einmal wiederholen. Wir werden nur einen Absatz hinzufügen. Oder manchmal fügen Sie entweder Absatz- oder Standardtext ein. Wir verwenden jetzt einfach den Absatz. Und wir werden den Anfang auf Eisenbahn setzen und die Größe auf 18 ändern, weil wir gesagt haben, dass das die Grundgröße unseres Textes sein wird. Als letztes werden wir dann die Höhe ändern. Nun, das sind entweder 125 oder eins, vier, fünf, ich glaube, wir werden eins, vier, fünf, also dann nehmen wir den Absatz. Wir werden uns für jeden von ihnen bewerben. Das gibt uns nur einen normal aussehenden Absatz. Dann fügen wir groß, standard und mittel und dann klein hinzu. Der erste wird groß sein. Ich werde mich hier für Standard entscheiden, weil ich das weiß. Das ist das eine und dann das Kleine. Und wir wollen großen Text machen, ich würde normalerweise zwei P x höher als die Grundlinie setzen, kleinen Text, zwei P x, niedriger als die Grundlinie. Wenn unsere erste Basis also 18 ist, dann mache ich eine große und ich mache eine kleine 16. Du könntest das erweitern. Du kannst extra groß, extra klein haben. Sie können das nach Belieben nach oben oder unten nehmen. Aber für mich brauche ich im Allgemeinen diese großen, mittleren und kleinen Modelle. Jetzt, wo das erledigt ist, können wir uns das nochmal ansehen und sehen , wie es sich verkleinert. Für mich sieht das ziemlich gut aus. Die Größe sieht gut aus und die Proportionen sehen korrekt aus. Jetzt fragst du dich vielleicht was wir hier oben damit machen. Jetzt habe ich die richtige Größe und das richtige Styling für jeden von ihnen und das einzige, was ich vergessen habe, zu tragen. Wir werden uns das hier oben ausdenken. Wir werden diese Klassen so wiederverwenden, wie wir es für die Überschrift tun sollten , und dann werden wir C Webflow Suggest hinzufügen, dann werden wir H eins hinzufügen. Dann fügen wir einen Absatz hinzu. Und wir werden Standards verwenden. Nun, was ich oft mache, ist, dass es zwei Möglichkeiten gibt, das zu tun. Sie können das duplizieren weil Sie möchten, dass Ihre Überschriften oder Ihr Text an bestimmten Stellen gesendet werden Nun, was passieren wird, ist, wenn ich das jetzt ändere, nehme ich einfach das Standardbeispiel. Wenn ich das in den Mittelpunkt stelle, habe ich diese Eigenschaft jetzt für jede einzelne Stelle geändert, der allgemeine Klassenabsatz im Standard erscheint und das will ich nicht Also was ich eigentlich wollen würde, ist eine weitere Klasse hinzuzufügen Okay. Und was ich hier tatsächlich tun werde, ist das zu demonstrieren. Ich werde nur den gesamten Abschnitt duplizieren , um es Ihnen zu zeigen. Jetzt haben wir also ein Duplikat. Und was ich hier tun werde, ist für jeden Abschnitt. Wir haben einen Kopf in H One, und ich werde Sensoren hinzufügen. Du kannst es nennen, wie du willst. Das ist nur meine persönliche Präferenz. Das ist der Weg, den ich gewählt habe. Aber ich würde Sensoren hinzufügen. Und dann würde ich die Eigenschaft in Sensoren ändern. Okay. Du kannst hoffentlich sehen, wohin ich damit will. Und jetzt werde ich das einfach nehmen und ich werde es mit jedem einzelnen machen. Wenn ich also einen Sensortitel hinzufügen möchte, würde ich einen Sensor hinzufügen im Gegensatz zu Überschrift H einen oder etwas anderes. Das macht es für mich einfacher, beim Aufbau meiner Website genau das zu kategorisieren , was ich möchte Ich gehe zu C Diese wird automatisch angewendet, weil Webflow im Grunde genommen, obwohl wir sie dasselbe nennen, obwohl wir sie dasselbe nennen, jede dieser Klassen als einzelne Klassen behandelt , die als Teil dieser Kombinationsklasse verwendet werden Um darauf zurückzukommen, werden wir diesen einen Sensor machen Okay. Ich werde das nur zu gegebener Zeit kopieren. Und wir können sehen, dass das insgesamt sehr gut zusammenpasst. Und dann werden wir das Gleiche für hier tun. Großartig. Das ist erledigt. Und jetzt zurück zu meinem ursprünglichen Punkt , den ich ansprechen wollte: Wenn wir wieder hierher gehen, kann ich jetzt einfach dieses zentrale Formular hinzufügen, und es wird nicht meine gesamte Site in meinem Klassensystem kaputt machen in meinem Klassensystem Ich würde also empfehlen, so vorzugehen. Jetzt haben wir Standardüberschriften, wir haben zentrierte Überschriften Was kommt danach als Nächstes? Das nächste, was ich mir ansehen würde, sind Änderungen im Hintergrund. Wir haben diese Überschriften in Schwarz. Aber was passiert, wenn wir einen schwarzen Hintergrund oder einen sehr dunklen Hintergrund haben einen schwarzen Hintergrund oder einen sehr und wir zusätzliche Nachteile hinzufügen wollen und wir nicht völlig neue Klassen erstellen müssen völlig neue Klassen nur um sie weiß oder heller zu machen Was ich hier empfehlen würde, ist, dass ich das noch einmal duplizieren werde. Nur noch ein Mal. Dieser ganze Abschnitt. Nimm das Duplikat ein Mal. Und dann werden wir hier schnell den Hintergrund des Abschnitts ändern. Das ist also eine weitere Sache, die ich für Abschnitte tun würde. Sie werden eine Menge verschiedener Klassen erstellen, weil verschiedene Abschnitte natürlich unterschiedliche Hintergründe haben werden Das ist eine von denen, die Sie sehr stark ändern werden Also nenne ich das mal einen mit dunklem Hintergrund. Ordnung. Und wenn ich das jetzt mache, kann ich diesen Abschnitt als Einzelperson bearbeiten. Also werde ich hier einfach eine Farbe hinzufügen, damit es im Grunde fast vollständig schwarz ist. Und jetzt, wo wir das getan haben, werde ich auf jeden dieser Farben noch einmal einzeln eingehen dieser Farben noch einmal einzeln und einen dunklen Hintergrund hinzufügen. Nun, ich würde sagen, dass ich hier oft einen dunklen Hintergrund hinzufügen würde, aber vielleicht möchten Sie tatsächlich etwas hinzufügen , das für Sie vielleicht etwas relevanter ist. Also Lichter, wir machen es einfach weiß. Das kann eine Minute dauern , wenn du das tust. Jetzt, wo wir das für den Himmel gemacht haben und Sie dasselbe noch einmal für Text tun möchten also mache ich Light-Text Ich habe das Gefühl, dass ich einen Fehler machen muss. Du hast all deine Texte und so. Jetzt musst du einen anderen Klassensatz festlegen. Sie haben eine andere Kombiklasse, wenn Sie Ihren Kopf und Text über einem dunkleren Beutel haben möchten Ihren Kopf und Text über einem dunkleren Und das ist einfach eine gute Angewohnheit , all das zu tun. Es mag ein bisschen mühsam und zeitaufwändig erscheinen , aber am Ende des Tages macht dieses Zeug wirklich einen großen Unterschied, macht dieses Zeug wirklich wenn Sie an einem größeren Projekt arbeiten und versuchen, schnell zu arbeiten. , jetzt haben wir das getan, damit so gut wie um unsere Texte gekümmert Einiges davon möchtest du vielleicht zurückkommen und an bestimmten Stellen anpassen, vor allem, wenn du bestimmte Farben hättest , die du verwenden möchtest oder wenn eines dieser Elemente mehr Arbeit benötigt, würden wir das tun Aber da ich für den Großteil dieser Landing Page nur Schwarzweiß verwende, brauche ich nicht viel Farbe oder so. Ich weiß, dass das ausreichen wird. Das Letzte, was Sie hier tun möchten , würde ich zumindest empfehlen, Sie Ihre Schaltflächen hinzufügen und sie entsprechend gestalten möchten. Das ist wahrscheinlich auch ziemlich groß. Und dann die letzte Folge, wir schauen uns Rich-Text an, wir machen schnell die Schaltflächen, und dann können Sie zumindest sehen, wie man das richtig macht. Wir fügen einfach einen weiteren Abschnitt hinzu, damit wir das tun können. Manchmal kann das manchmal lustig sein. Also ein neuer Abschnitt da, dann müssen wir blockieren. Also alles, was wir tun werden, ist, diesen Abschnitt einfach noch einmal zu duplizieren, weil es keinen Sinn macht, einen völlig neuen erstellen zu müssen. Ich werde im Grunde einfach alles löschen, was darin enthalten ist, und es wieder ändern. Das Dar loswerden Für dieses Mal werden wir es loswerden , loswerden Und dann werde ich für das hier einfach den Text-Wrapper loswerden, werde ich für das hier einfach den Text-Wrapper loswerden weil ich weiß, dass wir ihn nicht brauchen Dann fügen wir hier einen weiteren Block hinzu. Und ich nenne das einfach per Add, damit wir es sehen können. Und wir werden etwas Ähnliches tun , wie wir es zuvor getan haben. Wir können die Weißen einfach Hunderte von Sätzen nehmen. Wir ziehen einfach einen Knopf drüber und lassen es so, wie wir es für richtig halten Was ich hier vorher machen werde und mit den Köpfen im Text den Text. Ich hätte drei Knöpfe, groß, mittel, klein. Das ist eine gute Angewohnheit. Lass uns das einfach machen und sehen, wie es weitergeht. Dreht sich um, wird gehen, okay. Okay. Also, jetzt, wo wir die Söhne haben und hier, wir werden einfach bleiben, wir werden weitermachen Und ich denke, in diesem Fall werde ich sie wahrscheinlich alle schwarz machen und dann werde ich sie duplizieren und weiß machen , weil ich glaube nicht, dass ich mehr als das brauchen werde. Aber wir werden nur dafür sorgen, dass sie sich Seite stellen. Was wir hier für diesen ersten Knopf oder für all diese Knöpfe tun, wir wissen, dass sie weiß sein werden. Also werden wir den Hintergrund auf Weiß ändern. Ich werde einen P X-Rahmen hinzufügen nur damit ich jeden von ihnen sehen kann. Und dann machen wir den Text schwarz. Das kannst du dort sehen. Wir werden die Ecken auf mindestens 20 px ändern. Kurve einfach so. Dann werde ich dafür sorgen , dass die Schrift auf Railway geändert wird und dass wir Fett verwenden. Dann ändere ich den Innenabstand auf 20 P x statt auf 15, weil ich denke, das wird besser aussehen Dann ändere ich das auf groß klein Für jeden von ihnen werde ich einen Boxschatten hinzufügen , um mir zu helfen. Der Standard dafür ist okay. Sobald ich den Boxschatten hinzugefügt habe, kann ich den Rand entfernen, da ich bereits weiß, wie er aussieht. Das kannst du loswerden. Und denken Sie daran, dass diese weißen Schaltflächen normalerweise mit dunklem Hintergrund angezeigt werden. Auch wenn Sie sie hier nicht sehr gut sehen können, werden Sie sie auf einem dunklen Hintergrund viel besser sehen. Das ist es. Und das Letzte, was ich tun möchte, ist einen Mauszeiger hinzuzufügen und auf den Status zu klicken Also möchte ich keinen Übergang hinzufügen Ich möchte ja, einen Übergang hinzufügen. Und ich möchte die Hintergrundfarbe ändern. Nun, was ich tun werde , nachdem ich diesen Übergang hinzugefügt habe. Wenn ich zu Hover gehe, kann ich einfach die Hintergrundfarbe so ändern wie ich es für den Hover-Status haben möchte, und ich werde das einfach leicht cremefarben machen, nichts allzu Jetzt bewege ich den Mauszeiger darüber. Bei weißem Hintergrund kann man das nicht wirklich wissen, aber ich gebe dem Benutzer nur etwa Feedback , wenn er mit der Maus drüber fährt Sie können sehen, dass es anklickbar ist. Und das ist einfach eine gute Praxis. Auch hier ist es nur ein weiteres dieser Dinge. Es ist eine gute Praxis. Nachdem wir das Letzte getan haben, was wir ändern wollen, als Größe haben wir die Basisklasse für Schaltflächen, sie werden auf groß umstellen wollen. Ziel und klein. So groß, ich werde es bringen, ich werde es machen. Nennen wir es 30 30, und dann gehen wir zu 12 oben, 12 unten. Und dann ändern wir die Größe auf großen Text , wir sehen uns 20 an. Großartig. Der sieht also okay aus. Dann werden wir für die zweite Textgröße bei 18 suchen , weil das unsere Basistextgröße ist. , wir erhöhen diese Zahl Ich glaube, wir erhöhen diese Zahl auf 15 und machen die mittlere Zahl auf 12. Und ich werde 25 draus machen. Und dann, was die Kleinen angeht, gehen wir auf bis zu 16. Wir lassen es bei 28 und neun stehen. Und das ist alles, was wir wirklich ändern müssen. Und dann nehme ich jeden dieser Knöpfe. Ich nehme den Knopf. Ich werde es duplizieren. Ich werde den Hintergrund noch einmal ändern . Okay. Und jetzt, wo ich das dupliziert habe , werde ich diese ändern, ich muss nur die Bro - und die Schriftfarbe ändern - und die Schriftfarbe Wir werden einfach machen, ich werde Invert hier einfügen Auch hier kannst du diese Klassen nennen, wie du willst. Du musst nicht genau das tun , was ich hier mache. Es geht nur mehr darum, dass du verstehst, was der Unterricht ist. Also werde ich Farbe invertieren verwenden , weil das etwas ist, was ich normalerweise tun würde , wenn ich buchstäblich alles, was da ist , invertieren Es ist Farbe. Also werden wir die Hintergründe schwarz machen. Wir werden den Text weiß machen . Da haben wir es. Nein. Dies sind die wichtigsten Dinge , die Sie bei der Erstellung Ihres Styleguides beachten müssen , denn ich meine, die Elemente wurden hier erstellt, sind die am häufigsten wiederverwendbaren Elemente. Ich meine, du brauchst Überschriften, du brauchst Text, du brauchst Buttons und das sind Aber anstatt sich weitere 25 Minuten Zeit zu nehmen, um all das durchzugehen all das durchzugehen und es Ihnen weiter zu zeigen denn ich denke, ich denke, wenn Sie mir jetzt folgen, haben Sie die Idee Du solltest wissen, wie man unterrichtet. Sie sollten wissen, welche Eigenschaften Sie ändern sollten und welche nicht, und mit der Erstellung von CBO-Klassen vertraut sein mit der Erstellung von CBO-Klassen vertraut Aber ich werde Ihnen schnell einen vollständig fertigen Styleguide zeigen . Dies wird wahrscheinlich über eine Stunde dauern Ich würde sagen, wenn Sie es richtig machen, hängt es davon ab, wie viel von Ihrer Website Sie zusammengestellt haben. Also gehe ich zurück zum Dashboard. Und das, was ich dir zeigen werde, ist wieder für Ambi, ich nehme es zu viel Ich möchte nur, dass du verstehst, wie ein vollständig fertiggestellter Styleguide aussieht Also nochmal, das ist die Website für mein Start-up, die ich Ihnen zeigen werde. Also hier. Und wieder, als ich die Seite gebaut habe, war das das allererste, was kreiert wurde. Styleguide. Ich habe meine Logos hier drin. Weißt du, ich habe hier mehr Überschriften und so erstellt , um dem Ganzen etwas mehr Kontext zu geben , all die verschiedenen Farben , die ich verwende Denn wie ich bereits in diesem Video gesagt habe, ist dies eher eine illustrierte Website, also müssen die Farben und das Branding etwas besser sein , weißt du, sie müssen mehr Arbeit für mich erledigen Also ich habe meine Farben da drin, ich habe meinen Kopf. Ich habe verschiedene Arten von Texten, verschiedene Linkgrößen, viele verschiedene Button-Größen und einfach unterschiedliche Formationen. Dann habe ich meinen Text, Formulare, inverse Texte. Ich meine, alles ist hier drin, denn wenn ich rausgehe , bin ich in die Seite integriert weil ich die ganze Arbeit schon gemacht habe Es ist viel einfacher, Seiten einfach von Grund auf neu zu erstellen. Weil ich nichts Benutztes von Grund auf neu erstellen muss , vielleicht werde ich das manchmal tun, aber alles, was wiederverwendbar ist, muss ich nicht tun. Das ist der Punkt, an dem ich es bei den Styleguides belassen werde , weil ich weiß , dass wir in einem weiteren Gebäude genug für eine Landingpage haben einem weiteren Gebäude genug für eine Landingpage jetzt kann ich weitermachen und das verwenden. Ich werde nicht, ich werde nicht zu viel daran herumbasteln müssen Ich habe alle wichtigen Seiten alle wichtigen Klassen, die ich brauche, jetzt erstellt, welche hat Okay Ich würde Sie also dazu ermutigen, wenn Sie diesen mehr Variationen in den Eigenschaften hinzufügen möchten diesen mehr Variationen in den Eigenschaften wenn Sie verschiedene Farben verwenden möchten, vielleicht möchten Sie rote Schaltflächen oder blaue Schaltflächen hinzufügen, was auch immer Sie möchten, vielleicht möchten Sie, dass die Textfarben etwas anders sind. Ich empfehle Ihnen, sich dafür die Zeit zu nehmen. Aber ich lasse das hier für den Verkauf stehen. Und im nächsten Zeitplan wir tatsächlich weitermachen und beginnen , die Seite von Grund auf neu zu erstellen. Und wir werden diese Kurse nutzen, um uns dabei zu helfen. Wir sehen uns im nächsten. Okay. 6. Lektion 4 Aufbau deiner Navbar: Okay. Inzwischen sollten Sie also Ihre Styleguides erstellt haben und vielleicht weitere Elemente zu Ihren hinzugefügt haben , wie ich es im vorherigen Video getan habe. Der nächste Schritt besteht jedoch darin, mit dem Aufbau Ihrer Navigation fortzufahren. Sie wirklich nicht Damit müssen Sie wirklich nicht beginnen, aber ich würde das empfehlen. Ihre Navigationsleiste und Ihr Fo sind im Allgemeinen Dinge, die auf jeder Seite Ihrer Website erscheinen werden . In diesem Fall erstellen wir nur eine Landingpage. Aber wenn Sie ein großes Projekt hätten und es eine größere Website wäre. Ich würde immer empfehlen, zuerst die Nav Bar zu benutzen. Der Grund dafür ist, dass die , die wir hier erstellen werden, zwar , die wir hier erstellen werden relativ einfach und einfach ist, Navigationsleisten können definitiv ziemlich schnell komplizierter werden, besonders wenn Sie an einem größeren Projekt arbeiten, was Sie nur im Hinterkopf behalten sollten. Darüber hinaus können sie ein bisschen fehlerhaft sein, wenn Sie versuchen, die Reaktionsfähigkeit auf allen Geräten richtig zu Nochmals, bei dem , was wir hier machen, sollten wir keine Probleme haben, aber ich würde sagen, dass Sie eher hier auf der Baustelle und an anderen Stellen Ihrer Entwicklungsreise auf Probleme stoßen hier auf der Baustelle und an anderen Stellen Ihrer Entwicklungsreise auf Probleme stoßen an anderen Stellen Ihrer Entwicklungsreise Es gibt also eigentlich zwei Möglichkeiten, wie Sie das tun können. Die erste Möglichkeit besteht darin, zur Registerkarte Elemente zu gehen und nach unten zu scrollen. Sie können von hier aus einfach eine Navigationsleiste hineinziehen, aber sie wird nicht viele Stile und Optionen haben. Ich würde wahrscheinlich nicht empfehlen, diesen zu verwenden weil es immer etwas gibt , das ich jedes Mal ändern muss, wenn ich es benutze, aber lassen Sie mich es einfach aufrufen, wenn ich sehen kann, während sie gehen würden. Wenn Sie das also aufrufen, das Wichtigste, was ich an diesem Gerät hervorhebe , dass es mit einem eingebauten Container geliefert wird. Nun, das kann ein bisschen problematisch sein, wenn Sie verschiedene Dinge mit der Reaktionsfähigkeit machen möchten verschiedene Dinge mit der Reaktionsfähigkeit Und das ist, wie ich bereits sagte, in Webflow integrierten Container Sie sind nicht wie ein normaler DID-Block weil Webflows, ähm, nur bestimmte Teile davon bearbeitet haben, wie die Webs und das Pad, und es ist im Vergleich zu Diplock ziemlich fest und starr Das werden wir nicht benutzen. Was wir eigentlich nur zur Beruhigung empfehlen , ist einfach in Plus und dann in Layouts zu gehen. Ich werde nur kurz darüber sprechen, weil Webflow für jedes einzelne Projekt, das Sie erstellen, integrierte Bibliotheken enthält. Sie haben Ihre Startbibliothek, aber es gibt noch andere Bibliotheken, die Sie zu Ihrem Arbeitsbereich hinzufügen können zu Ihrem Arbeitsbereich hinzufügen Wenn du hier klickst und weitere Bibliotheken durchstöberst, hast du all diese verschiedenen UIKits, die du verwenden kannst Und wenn Sie sich noch in einem frühen Stadium befinden, mir viel lieber, wenn Sie den Prozess der Erstellung Ihrer Klassen und der Gestaltung Ihrer eigenen Elemente durchlaufen den Prozess der Erstellung Ihrer Klassen und der Gestaltung Ihrer , um mit diesem Prozess besser vertraut zu Wenn Sie wirklich schnell etwas auf die Beine stellen möchten und es eilig haben und Termine haben, dann können diese Bibliotheken wirklich einen großen Unterschied machen , da sie Ihnen alles bieten, was Sie im Grunde benötigen, um eine Website von Grund auf neu zu erstellen, und dann können Sie diese Elemente einfach nach Belieben anpassen. Um darauf zurückzukommen. Flow, wir werden unsere Bibliothek starten, und dann nehme ich einfach eines dieser Navigationslayouts, welches nicht wirklich eine große Sache ist. Lass uns einfach gehen, wir nehmen einfach dieses. Wir nehmen den hier oben auf. Und das bietet uns eine wirklich normale Navigation. Und wenn ich hier oben zur kostenlosen Ansicht gehe, können wir sehen, dass sie kommt. Ich bin mir nicht sicher, wie sehr ich das mag, aber lass uns sehen, wie es auf dem Handy aussieht. Ich werde mit eingebauter Navigation kommen. Und ich sehe tatsächlich, dass das in Ordnung ist. Die Art und Weise, wie sie auf dem Tablet auftaucht , ist kein Fan, aber es ist eigentlich okay. Ich schaue es mir tatsächlich genau an. Aber egal, lass uns für eine Minute zum Desktop zurückkehren. Und wir werden nicht mehr überprüft. Webflow skaliert also deine Navbar, auch wenn du die anderen Methoden verwendest und du eine direkt aus dem Elemente-Tab herausnimmst Es nimmt das und analog wird es standardmäßig responsiv sein Es gibt also keine spezielle Einstellung Sie vornehmen müssen, damit es auf dem Handy oder Tablet so angezeigt auf dem Handy oder Tablet so Das ist standardmäßig der Fall, und Sie können diese für Fronten und die üblichen Dinge entsprechend bearbeiten Fronten und die üblichen Dinge Was wir hier tun werden, ist , dass das zu unserer Marke passt Denken Sie daran, dass wir die von Tesla inspirierte Landingpage sind. Diese Schaltfläche enthält also eine Standardklasse von primärem Bustin Was wir ändern werden, ist nur ein Button und wir werden gehen. Ich denke, wir werden hier einfach die mittlere Größe wählen. Und dann machen wir es schwarz. Das kommt jetzt mit all unseren Schriften. Aber was wir hier tun müssen, ist die Einstellung des Navlinks zu ändern Wenn das etwas anderes wäre, hätte ich das gelöscht und es in Nav Link geändert, das ist die allgemeine Klasse, zu der ich gehen würde, wenn ich das tun würde Wir wollen die Schrift auf Railway ändern und lassen mich das kurz sehen. Ja. Wir wollen, dass die Schriftgröße 18 ist. Ich denke tatsächlich , dass das zu groß ist. Lass uns einfach darauf zurückkommen. Ich werde den Knopf eine Nummer kleiner machen. Okay. Und dann kehren wir die Farbe Komm zurück, um zu blinzeln. Railway, ich mache es 16, und dann machen wir es , glaube ich, halbfett Ja. Dann machen wir das Gleiche hier drüben. Die Klassen, die dieser standardmäßig verwendet hat Webflow. Dies sind die Klassen , die ich sowieso erstellen würde , wenn ich sie von Grund auf neu erstellen Für Ihr Drop-down-Menü ist das der Name der Klasse, die wir verwenden Ich würde sie einfach kopieren . Je mehr du sie auswendig lernst, desto mehr wirst du dir angewöhnen, sie einfach zu benutzen. Wir werden das Gleiche machen, ich bin es . Und dann kann ich mich nicht mehr an die Pools oder Halbfinale erinnern Cool. Nun, all das wird Bestand haben. Ich werde einfach weitermachen und sie zur Veranschaulichung behalten, aber keine dieser Längen hier wird aktiv sein Lassen wir sie also vorerst einfach so, wie sie sind . Ich werde diesen ändern. Wir können diesen Anblick ändern Das Letzte, was wir tun wollen, ist das Logo hinzuzufügen. Sie finden das Logo also in der Datei, die ich für Sie im Kurs habe und die Sie herunterladen können. Also werden wir Bilder auswählen, ein Bild hochladen. Und ich gehe zum Herunterladen und ich habe es hier, und das ist ein Logo Es ist ein Vektor-Logo, ein Vektor sagt ein Logo aus. Es ist SVG. Sie werden nicht wirklich viel davon ändern können . Aber wenn du es hochlädst, ist es absolut in Ordnung. Wenn es hinzugefügt wird. Da haben wir's. Ich werde das runterholen. Großartig. Da haben wir's. Das ist im Grunde genommen so, dass Rennen oder Na immer miteinander verbunden werden müssen. Aber auch hier erstellen wir gerade eine Landingpage. Ich werde das alles nicht verlinken müssen, aber das würdest du hier unten tun. Wenn du weitermachst und versuchst, auf dieser Grundlage eine komplette Website zu erstellen , wenn du Links zu deiner NaF-Leiste hinzufügst, würdest du das unten in den Links hier machen und du würdest deine Seite auswählen oder du kannst einen Abschnitt der Seite auswählen, was wahrscheinlicher ist, was wir damit machen Darauf komme ich etwas später zurück. Okay. Also ja, das ist im Grunde eine NaF-Bar, und sie ist skalierbar, wie Sie sehen können Bringen Sie sie zurück in die wenigen kostenlosen Modi Also, wenn ich das rausnehme, wird es mit mir hoch und runter skaliert Wie gesagt, meiner Erfahrung habe ich viele davon gemacht. Naar kann auf den ersten Blick normalerweise sehr einfach sein, aber sie können sehr schnell sehr kompliziert werden, je nachdem, was Sie tun möchten, vor allem, wenn Sie eine wirklich konkrete Vorstellung davon haben aber sie können sehr schnell sehr kompliziert werden, je nachdem, was Sie tun möchten, vor allem, wenn Sie eine wirklich konkrete Vorstellung davon haben, was Sie erstellen möchten In diesem Fall stört es mich übrigens nicht wirklich, das sieht absolut in Ordnung Aber abgesehen von einer Sache werde ich es tatsächlich reparieren. Aber wenn das meins wäre und mir die Marke wirklich wichtig wäre und ich sichergehen würde, dass es eine ganz besondere Art ist, könnte ich noch lange dabei sein. Also, in diesem Fall kann es 10 Minuten dauern, aber ein anderes Mal kann es sehr viel länger dauern Aber ja. Das ist es. Das heißt, wir sehen uns im nächsten. Okay. 7. Lektion 5 Erstellen eines Symbols: Ordnung. Es gibt noch eine letzte Sache , die ich über die Navbar hinzufügen wollte , die ich über die Navbar hinzufügen Wenn Sie Ihre Navigationsleiste erstellt haben, formatieren Sie sie richtig. Es sieht alles genau so aus, wie Sie es sich wünschen. Das Letzte, was es braucht, um es zu einer Komponente zu machen. Eine Komponente ist im Grunde genommen wieder auf diese Idee wiederverwendbarer Elemente zurückzuführen. Im Moment verwenden wir wiederverwendbare Elemente im Sinne von Klassen. Wir haben Klassen zu Elementen hinzugefügt, um uns die Entwicklungsarbeit zu erleichtern. Erstellen einer Komponente wird jedoch im Grunde ein festes Element erstellt , das Sie per Drag-and-Drop auf eine beliebige Seite ziehen können , und das macht es viel einfacher. Es hilft, Ihren Designprozess wieder effizienter zu gestalten. Also, was wir hier tun werden ist, auf Navbar zu klicken Jetzt möchten Sie sicherstellen, dass Sie tatsächlich auf das Ganze klicken In meinem Fall hier und dann gehen wir hierher und wir werden eine neue Komponente erstellen, und wir werden sie einfach N nennen . Was passiert, ist, wenn ich nur als Beispiel zu den veralteten Anleitungen gehe und diese Navbar hinzufügen möchte, ich gehe einfach zurück zu Komponenten, und dann kann ich sie einfach ziehen Zu. Und dann kann ich es wörtlich nehmen und es so oben auf meiner Seite hinzufügen. Offensichtlich sieht das nicht richtig aus. Also was ich tun werde, ist schnell dabei zu bleiben. Und wie Sie dort sehen können, haben sie eine NaF-Bar auf unserer Sale-Gate-Seite Das war's für die Nath Bar. Fragen haben, hinterlassen Sie einige Kommentare und ich beantworte sie gerne Wenn Sie Fragen haben, hinterlassen Sie einige Kommentare und ich beantworte sie gerne. Also werde ich mir den nächsten ansehen. Okay. 8. Lektion 6 Aufbau deines Heldenbereichs: Ordnung. Nun, da wir die NaF-Leiste erstellt haben, werden wir als Nächstes die Helden-Sektion erstellen Falls ihr nicht wisst, was ein Heldenbereich ist, ist der Heldenbereich einfach das Banner, das über den Seitenfalten angezeigt wird Im Grunde ist es also das Erste, was die Leute sehen, wenn sie eine bestimmte Seite besuchen. Wenn es in diesem Fall Ihre Startseite wäre, ist es das Erste, was die meisten Leute sehen werden , wenn sie Ihre gesamte Website besuchen. Ähm, sie gehen vielleicht nicht tiefer. Sie schauen sich vielleicht nichts anderes auf der Website an. Sie scrollen vielleicht nicht einmal, aber das Erste, was sie sehen werden, ist der Heldenbereich. Sie wollen also, dass das im Grunde das Beste ist, was es sein kann. Hier werden Sie also häufig Videos sehen, die als Hintergrund hinzugefügt werden. Sie werden feststellen, dass Vermarkter und Designer die meiste Zeit und Mühe darauf verwenden diesen Abschnitt so überzeugend wie möglich zu Und in diesem Fall werden wir einfach versuchen und ja, wir werden versuchen, einen guten Heldenbereich zu erstellen, der die Nutzer anlocken wird Wir werden also einen neuen Abschnitt hinzufügen. Nochmals, ich glaube, ich werde dieses Teil von Grund auf neu bauen, aber ich werde es nur erwähnen nur für den Fall, dass Sie diesen Weg einschlagen möchten. Sie können einfach einen Heldenbereich aus einem dieser Layouts hinzufügen , wenn Sie möchten. werden Sie nicht den größten Nutzen daraus ziehen Aus der Sicht des Lernens werden Sie nicht den größten Nutzen daraus ziehen, aber Sie können es tun, wenn Sie möchten wortwörtlich Heldenbereiche haben , die Sie hier hinzufügen können. Sie haben Vorlagen. Aber was ich tun werde, ich werde es von Grund auf neu erstellen nur damit Sie den gesamten Prozess sehen können und was Sie tun müssen, wenn Sie es von Grund auf neu erstellen. Wir werden einen neuen Abschnitt hinzufügen. In diesem Abschnitt werden wir Diplock hinzufügen. Ich werde sichergehen, dass das reingegangen ist und nicht. Also werden wir nur korrigieren, dass ich sichergehen werde, dass es sich um richtige Namen handelt. Grundlegender Abschnitt. Basiscontainer. Dies ist einer der Fälle, in denen ich tatsächlich Klassen aus meinem Basisbereich und dem Basiscontainer je nachdem, wie groß und proportional ich es haben möchte. Das würde ich normalerweise tun und normalerweise würde ich die Klasse einfach Helden nennen, aber darauf komme ich zurück, wenn wir da sind. Dann möchte ich in meinem Container ein weiteres Schloss hinzufügen. Und ich weiß noch nicht wirklich, was ich hier reintun werde, also werden wir darauf zurückkommen. Was den Abschnitt angeht, so möchte ich sagen, dass das WTF zu 100% aus Größe und Proportion besteht Ich glaube, ich werde zuerst das Bild hinzufügen. Ich werde einfach alle Bilder aufnehmen, die ich habe, weil ich das noch nicht gemacht habe. Ich werde alle Bilder aus meinem Ordner zur Site hinzufügen . Sie können hier sehen, dass wir das Bild schon einmal hochgeladen haben , Sie sollten also wissen, wie das geht, aber wir laden es einfach hoch Und dann sind es diese Bilder hier, ein Abfluss Wir haben sie also alle in Webflow. Viele dieser Bilder sind ziemlich groß. Normalerweise würde ich die Zeit damit verbringen, sie auf eine kleinere Größe zu verkleinern, weil man sie sehen kann. Ich bin mir ziemlich sicher, dass Webflow sie beim Hochladen kennzeichnen wird . Ja, habe ich. Ja, es scheint, dass nicht alle hochgeladen wurden, aber die meisten. Das ist in Ordnung. Ich werde schnell einfach hier rauskommen und schnell ein paar Änderungen vornehmen. Ich war schon fertig eingerichtet. Okay. Nimm sie, leg sie da rein. Und ich denke, das wird reichen. Ich weiß nicht, ob ich das im Video anlassen werde, aber wenn du wissen willst, wie man Bilder auf dem Mac in etwas Kleineres konvertiert , dann hast du es. Gehen wir hier zurück zum Vollbildmodus. Wenn du also einen Hintergrund zu deinem Abschnitt hinzufügst und ich diese Klasse hinzufüge, wirst du das hinzufügen und ich werde das Beste daraus machen. Ich werde es einfach so machen , dass ich zunächst den Hintergrund sehen kann. Wir machen das und dann nennen wir es einfach 500 damit ich genau sehen kann, was hier ist. Nun, was wir tun werden, ist wenn Sie hier nach unten zu den Hintergründen scrollen, und wir werden das Hintergrundbild hinzufügen. Nun, für einen habe ich mich noch nicht entschieden. Ich lasse mich einfach treiben, wenn ich ehrlich zu Ihnen bin, aber ich denke, wir werden uns für etwas Besseres entscheiden. Ich denke, einer von diesen sollte es eigentlich tun. Richtig. Jetzt haben Sie hier ein paar Optionen. Sie haben ein individuelles Cover und einen eigenen Inhalt. Benutzerdefiniert bedeutet, dass du genau auswählen kannst, wo auf dem Bild du zeigen möchtest. Beim Titelbild versuchen Sie, das gesamte Bild im Inneren anzuzeigen, aber Sie können trotzdem auswählen, welchen Teil Sie tatsächlich zeigen möchten. Benutzerdefiniert ist nur die Breite und Höhe, Sie legen alles fest, aber am Ende haben Sie eine seltsame Sache , bei der sich das Bild wiederholt In diesem Fall versucht es dreimal, sich zu wiederholen , weil es einfach nicht passt und es nicht wirklich weiß, was Sie von ihm erwarten. Wir werden das Cover verwenden , nur damit es immer auf den Bildschirm passt. Wir werden es zentriert haben und ich werde die Höhe anpassen auf etwa 800, ich glaube, vielleicht weniger, vielleicht sieben. Ja, und dann möchte ich Weise ändern, wie der Hintergrund auch sitzt. Das wird keinen allzu großen Unterschied machen. Versuchen wir es mit sechs. Vielleicht wird das der Switch-Teil sein. Ja, das scheint besser zu sein. 600. Was ich hier machen möchte, ich möchte, dass meine Navigationsleiste über dem Bild angezeigt wird. Und damit meine ich, ich möchte, dass es über dem Bild steht , und ich möchte keinen weißen Hintergrund. Ich wollte einfach gut sitzen. Ich möchte, dass alles zusammenkommt. Was wir tun werden, ist zurück in die NaF Bar zu gehen Und wir werden den Hintergrund ändern. Also gehen wir hier runter und ich denke, der Hintergrund könnte von Nope kommen Es muss aus dem Container kommen. Nein, es kommt nicht aus dem Container. Aber schauen wir mal, wir versuchen es einfach von oben. Also gibt es Weiß eigentlich vielleicht nicht. Was wir machen werden, ist etwas zu kreieren wir werden diesen Schlafbügel klebrig machen, was einfach bedeutet, dass er in Bezug auf die Position auf der Seite kein Pflaster hat oder dass er nichts erbt Es wird also einfach als festes Element über allem anderen auf der Und wenn es scrollt, bleibt es unverändert. Also werden wir das jetzt tun. Also, wenn ich jetzt hier raufgehe, ist es auf statisch eingestellt, aber ich werde das ändern und ich werde es auf stellen und du kannst sehen, dass es keinen weißen Hintergrund gab. Da habe ich mich anfangs geirrt. Jetzt, wo ich das nach oben verschoben habe, befinden das Logo und der Text jetzt in der Navbar oben im Heldenbereich Aber weil ich es auf „Fest“ geändert habe, es etwas an der Breite der Navbar geändert, also werden wir weitermachen und das korrigieren Und wir müssen sicherstellen, dass die Breite auf 100% eingestellt ist. Okay. Denn im Moment, wie du siehst, ist es auf 86. Wir machen das, das war's wieder. Ich finde, das sieht okay aus, aber ich bin mir bei diesem Bild nicht sicher , jetzt wo ich es mir ansehe. Ich glaube, ich möchte es vielleicht ändern , wenn ich eines finde , das heller ist oder eine klare Farbe hat in dem Sinne, dass es keine Muster gibt. Ich denke, ich werde ein solches Bild verwenden. Lass uns sehen, was wir haben. Also gehen wir wieder hierher zurück und wählen ein Bild. Und dieser mit dem Blau genau hier, los geht's. Der sieht 100-mal besser aus. So können wir den gesamten Text aus der Sicht der Barrierefreiheit leicht sehen , niemand wird Probleme haben, ihn zu lesen, und das Bild des Autos ist viel fokussierter, und es passt wahrscheinlich einfach ein bisschen besser zu einer Helden-Sektion. Nun, was den Text angeht, das war das nächste , was wir tun mussten. Und wir werden hier rauf gehen. Ich habe bereits einen Dev-Block hinzugefügt, also werden wir darauf zurückkommen und sehen, wie sich das entwickelt. Das ist hier oben. Das ist also, wo ich hingehen werde , ich werde das Ganze etwas aufpolstern und ich werde es noch nicht klassifizieren Ich werde das später ändern, nur damit du genau sehen kannst, wo es jetzt ist, kannst du diesen Dev-Block hier sehen Lass mich darauf zurückkommen. Okay. Sie können sehen, wie es oben auf der Seite sitzt. Wenn ich mit einem der beiden Texte anfange, wird er nicht richtig aussehen und ich hätte wird er nicht richtig aussehen und ich hätte den Affen um mich herum, der versuchen könnte, ihn zu bekommen, wenn ich diese Layoutoption beibehalten würde. Aber wenn ich zu dem Paar dieses Deblocks gehe , das ist der Basiscontainer Ich werde diesen Helden zum S for Home-Container machen. Ich werde das Layout des Containers bearbeiten. Ich werde im Grunde alles versenden lassen. Also hier. Eigentlich ist das okay. Jetzt werden wir weitermachen und einige Texte hinzufügen. wir das tun, müssen wir einige Dinge Bevor wir das tun, müssen wir einige Dinge beachten. Denken Sie daran, dass ich davon gesprochen habe, Kombinationsklassen aus dem Basisbereich und dem Container zu platzieren , Kombinationsklassen aus dem Basisbereich und dem Container . Hier müssen wir das tatsächlich tun, denn wenn ich versuche, Text hinzuzufügen und Elemente hinzuzufügen und sie so zu verschieben , wie das eingerichtet ist, wird es für mich sehr schwierig sein, das zu tun. Was ich tun möchte, sind zwei Dinge, die ich hier hinzufügen muss Ich muss den Basiscontainer bearbeiten und ich muss die Dev-Sperre bearbeiten, die ich hinzugefügt habe, aber ich habe noch keine Anpassungen vorgenommen Wenn wir zum Basiscontainer gehen, was wir tun werden, werde ich die Höhe des Containers zu 100% erreichen Wie hoch war der Prozentsatz, und wir werden 100 machen und Sie können sehen, dass das jetzt zu 100% vertikal und horizontal passt . Aber das ermöglicht mir , im Grunde genommen, den Todesblock in den Mittelpunkt zu rücken. Jetzt, wo das erledigt ist, kann ich wieder nach oben gehen, und das sollte so sein und wir können die Blockaden hier in der Mitte sehen Jetzt gehen wir zum D-Block und ich werde den Namen in uro Content Wrap oder so etwas ändern uro Content Wrap oder so etwas Auch hier kannst du deine Klassen nennen, wie du willst. Ich bin nur so, dass manche Leute es vorziehen, Codes oder Abkürzungen für ihren Unterricht zu verwenden, weil sie kleine Textmengen verwenden wollen verwenden, weil sie kleine Textmengen verwenden Ich bin ein sprachlicher Mensch, also verwende ich gerne Wörter, die ich gerne verwende. Idealerweise möchtest du, dass dein Unterricht manchmal etwas kurz ist, ich finde es einfach einfacher , sie zu identifizieren und mir auch zu merken Das bin nur ich. Jeder ist anders. Jetzt, wo wir das hier haben, die Breite, werden wir wieder 100% machen , was derzeit der Fall ist. Genau wie beim Container werden wir die Höhe auf 100% einstellen. Es macht Spaß. Sie fragen sich vielleicht warum ich den Deadlock genommen und ihn im Grunde genommen zu einem Container gemacht Und das liegt daran, dass es für mich sinnvoller ist, wenn ich die Elemente zu diesem Text hinzufüge, was ich hinzufügen werde, und die Änderungen, die möglicherweise für mich, einfach meinen eigenen Deadlock für all das zu haben , als zu versuchen, jedes Mal Änderungen direkt am Container vorzunehmen Änderungen direkt am Container Denn obwohl es sich um eine Kombinationsklasse handelt, möchte ich trotzdem nicht viele Änderungen daran vornehmen Ich möchte, dass das ziemlich einheitlich egal wohin ich gehe, weil ich eine völlig andere Helden-Sektion mit einer völlig anderen Absicht erstellen könnte eine völlig andere Helden-Sektion mit einer völlig anderen Absicht erstellen einer völlig anderen Absicht und ich möchte verschiedene Dinge zeigen, ich möchte, dass es völlig anders Diese Kombiklasse, die ich für den Heldenbereich habe , könnte dann überflüssig werden , weil ich sie speziell für das, was ich hier mache, angepasst habe. Es macht immer Sinn, einfach einen neuen toten Block zu verwenden, wo ich kann, und das hat keine großen Auswirkungen auf die Site. Hier werden wir einige Texte hinzufügen . Das wird das Erste sein. Sie können hier sehen , wo das angesiedelt ist. Was den Text angeht, werde ich es einfach schnell machen. Es wird schnell, elektrisch sein. Ich glaube, ich werde zurückkommen und mich umziehen. Aber damit wir es erledigen können. Und wir werden gehen, Claire wird eine Überschrift erstellen und wir werden H eins setzen. Was war das Letzte , was ich hier machen wollte? Wir werden es zentriert machen und das sollte so sein, wie ich denke. Nun, was ich hier tun muss, ist die Position, dass der Text etwas zu hoch oben ist, also möchte ich ihn etwas niedriger machen und da komme ich zum Heedro-Inhalts-Wrapper und ich kann das grundlegend ändern Anstatt 40 zu machen, kann ich 60, 100, 140 daraus machen . Sie können sehen, dass das zu niedrig ist. 160, vielleicht etwas zu hoch, also nehmen wir 65 bis vielleicht 70. Ja. Das scheint den Scheck für mich zu erledigen. Was ist nun, wenn ich am Ende dieses Abschnitts etwas hinzufügen möchte , zum am Ende dieses Abschnitts etwas hinzufügen möchte , Beispiel nur ein paar Informationen, kleine Textblöcke. Was ich tatsächlich tun werde, ist einen weiteren DE-Block hinzuzufügen. Und ich werde das so einsetzen, dass es tatsächlich alles macht. Lassen Sie uns einfach einsteigen und sehen ob wir dem einfach ein Raster hinzufügen können. Ich werde den Deblock loswerden, ich werde ein Grid nehmen . Quick Stack ist eigentlich eine gute Sache, nur eine Gelegenheit für mich, darauf hinzuweisen Grids sind etwas, an das Ich würde sagen, Grids sind etwas, an das man sich gewöhnen wird, wenn man es im Webflow häufig benutzt Rids erleichtern Ihnen das Hinzufügen von Positionselementen erheblich , insbesondere wenn es sich um Spalten handelt, ein bisschen Text, Dinge, die Sie ausrichten möchten und die in einem Rasterformat Damit würden Sie nicht viele Deplocks verwenden wollen. Möglicherweise möchten Sie dafür nicht viele Spalten verwenden. Insgesamt ist die Verwendung eines Rasters in der Regel am sinnvollsten. Sie können hier sehen, dass ich ein Zwei-mal-Eins-Raster hinzugefügt habe. Ich mache vier mal eins. Dann füge ich Dlocks hinzu, die es mir erlaubt, was nicht wie üblich ist Dann sind wir hier unten. Wir werden es einfach direkt zu den Zellen hinzufügen. Scheint immer noch nicht so zu sein wie drin. Habt Geduld mit mir. Ich mache diese 20. Und in jeder dieser Zellen werde ich es einfach über Text ablegen, damit Sie sehen können , während ich daran arbeite, ob es mir möglich ist, was nicht der Fall zu sein scheint. Ich nehme es einfach und kopiere es und füge es in jede Zelle ein, weil ich denke , das wäre viel einfacher. Wie auch immer, wir werden es hier kopieren, einfügen , einfügen. Und füge es hier ein. Bevor ich anfange, etwas davon anzupassen, möchte ich sicherstellen, dass die Position auf der Seite stimmt Wir wollen also zurück zu unserem Content Wrapper gehen Und die Art und Weise, wie wir dieses Setup haben und ich glaube, ich habe es falsch verstanden Also wollen wir zu Flex gehen. Wir wollen, dass das vertikal abläuft. Und wir wollen, dass sie sich oben und unten zeigen. Also lass es mich für eine Sekunde aushalten . Da haben wir's. Also wollen wir einen Abstand dazwischen haben. Also möchte ich meine Kachel hier oben haben und dann möchte ich alle meine Textelemente unten haben. Was wir also tun werden, ist dieses Raster zu erstellen, und wir werden es einfach Raster nennen, ist nicht wirklich wichtig. Wir werden das okay machen. 100%. Jetzt hier drinnen möchte ich Absatztext hinzufügen, also nehmen wir diesen und fügen ihn dort hinzu. Auch das wird sich ändern, also mach dir keine Sorgen. Am Ende wird es viel besser aussehen. Okay. Nun, natürlich die Farben, der Text und so, wir sind gerade dabei, den Inhalt zu ändern. Ich werde nicht wirklich mit zu viel herumspielen. Aber wie dem auch sei, wir werden anfangen, es anzupassen. Wir werden eine Überschrift erstellen und ich werde hier etwas mit Ihnen teilen Die H12 345, die im Styleguide gestylt wurden Diese können auf verschiedene Tags angewendet werden. Also Einstellungen, die dir hier zeigen sollten, du wirst hier deine Kopfeinstellungen haben. Diese ist natürlich richtig, oben auf der Seite, die H-Einstellung, die auch deine Standardeinstellung ist. Das ist der, den wir verwenden werden. Für diesen hier wäre das technisch gesehen ein H Zwei, und er wird ohne Klassen proportional vergrößert Aber wenn ich hierher gehe, kann ich daraus eine H drei oder eine H vier machen , wenn ich will Ich kann es zu einer H-Fünf machen, wenn ich will, und das hat keinen Einfluss auf die Markierung. meine ich also, dass Sie sich nicht auf den spezifischen Stil beschränken müssen , den Sie für ein bestimmtes Tag erstellt haben. Es kann also als H zwei markiert werden, aber in Wirklichkeit verwenden Sie einen H-Vier-Stil, etwas, das Sie beachten sollten, wenn Sie das durchgehen. Wir werden uns für fünf entscheiden, weil ich möchte, dass es ziemlich klein ist , und bei der Überschrift H fünf werden Sie sich für diese beiden entscheiden. Pgraph, dann werden wir das klein machen Und lassen Sie uns das alles schnell anwenden. Pgraph Klein. M. Okay. Und wir müssen die Farbe ändern , weil sie momentan nicht richtig aussehen. Wir werden jeden von ihnen zu Sensoren machen und ich möchte , dass sie einen Lichtkopf haben. Die Zelle selbst, wir müssen den Sensor einstellen. Also du kannst sehen, dass ich es gerade für diese Zelle geändert habe und ich werde einfach eine Zelle machen. Manchmal auch für die Zellen. Wenn Sie sie nicht direkt bearbeiten möchten, können Sie ihnen in diesem Fall direkt einen Deadlock hinzufügen und die Zelle einfach mit D versehen, weil ich das kann, wenn es eine kompliziertere Ebene wäre, ich füge einfach einen Deadlock hinzu, nur um mir diese zusätzliche Anpassungsebene zu geben, wenn ich möchte Richtig. Und wir müssen einen Teil des Textes hier loswerden, also nehmen wir den. Nun, Sie fragen sich vielleicht, dass dieser Text mit ziemlicher Sicherheit geändert werden muss. Ich meine nicht, dass sich der Text von selbst ändern muss. Ich meine den Stil, weil ich glaube, dass das nicht besonders gut passen wird, wenn ich all die, über die ich hier debattiere, gestalte, auch etwas, das Sie sehen können Ich mache das alles einzeln . Normalerweise kopiere ich sie einfach und füge sie ein. Dies dient nur zu Demonstrationszwecken. Außerdem zeigt es nur, wie einfach es ist, Klassen schnell hinzuzufügen. Es ist nicht schwer, weil das Web ziemlich intuitiv ist. Es weiß ungefähr, worum Sie es bitten werden , bevor Sie es fragen weil es weiß, was die vorhandenen Como-Klassen sind. Im Moment ist das fertig, dieser Text sieht nicht richtig aus. Also der Absatztext muss meiner Meinung nach kleiner sein. Auch hier können wir eine weitere gemeinsame Klasse hinzufügen , damit das funktioniert. Also muss das kleiner sein. Also im Moment ist diese Sitzung, ich glaube, 16 können sie dort sehen. Es müssen wirklich 14 sein. Also würde ich normalerweise eine weitere Kombinationsklasse hinzufügen. In einer idealen Welt werde ich sie der Tatsache Rechnung tragen, dass ich noch kleineren Text als 16 Seiten benötige noch kleineren Text als . Ich würde ihn in meinen Styleguide aufnehmen. Ich würde es wieder hierher bringen und es in diesem Fall anwenden und nicht. Ich werde hier jetzt einfach eine neue Klasse erstellen , weil das bequemer ist und mir ein bisschen Zeit spart. Also werden wir einfach den roten kleinen Text Hero hinzufügen. Und das ist speziell nur für dieses Element. Ich verwende diese Ebene, und wenn ich eine Ebene wiederverwende und sie an verschiedenen Stellen verwende, benenne ich sie erneut um. Wir nehmen einfach das und machen daraus 14. Das ist viel besser und die hundert 45% können bleiben. Das ist okay. Ich gehe davon aus, dass das auf all diese zutrifft. Ich möchte sehen, ob ich diese dunkle Debatte fortsetzen sollte dunkle Debatte Und ich glaube, ich glaube, ich werde es schwarz halten Jetzt, wo ich das alles durchgemacht habe, können Sie sehen, dass das nicht so gut ankommt, wie ich es mir vielleicht gewünscht habe. Also werde ich weitermachen und noch ein paar Änderungen vornehmen Also ich möchte das Ganze ein bisschen herunterfahren, und ich werde es vielleicht sogar zehn machen , es ganz nach unten bringen Auf Abschnittsebene werde ich etwas hinzufügen, damit die Textur ein bisschen besser zur Geltung kommt. Wenn wir zurück zu den Hintergründen gehen, können wir klicken. Wir können auf Plus klicken und fügen einfach einen Farbverlauf hinzu. Nun, die oberste Ebene dieses Gradienten wird Null Transparenz sein, bringen Sie das, entfernen Sie das. Auf der Unterseite werden wir es auf Schwarz umstellen , einfach so. Dann werden wir diesen Schieberegler so herunterfahren. So können wir dort sehen, dass wir einen ausreichenden Kontrast zwischen dem Hintergrund und dem Text für den weißen Text geschaffen haben zwischen dem Hintergrund und dem Text für den , sodass er jetzt richtig angezeigt wird. Aber es stört das Bild oder den oberen Text überhaupt nicht , kann ich jetzt einfach ganz schön zusammenblanchieren Also nochmal, ich werde hier nicht zu viel Zeit mit dem Text verbringen, weil es hier natürlich nicht um das Urheberrecht geht Ich werde überlegen setzen. Ich habe noch nie ein Telefon betrieben, ich habe noch nie eines gefahren, aber wenn Sie denken, es war besser, dann zum Spielen Das ist also ein gutes Beispiel für eine Heldenabteilung. Jetzt fragst du dich vielleicht, was wir hier tun, wenn wir diese Entschuldigung stylen wollen , wenn wir sie responsiv machen wollen. Jetzt werde ich etwas später eine Lektion zur Reaktionsfähigkeit insgesamt hinzufügen etwas später eine Lektion zur Reaktionsfähigkeit insgesamt Aber nur zu Demonstrationszwecken, wenn ich das auf ein Tablet herunternehme, sieht das eigentlich nicht schlecht aus, aber es gibt einige Änderungen, die ich vornehmen möchte Also, was den Inhalts-Wrapper angeht, muss das wahrscheinlich auf Null geändert werden , denke ich. Und was das Raster selbst angeht , wenn du auf das Raster klickst und einfach da draufklickst, kannst du das Muster der Randgeschichte zwischen den einzelnen Elementen verringern , und ich weiß nicht wirklich, ob ich das machen will. Vielleicht möchte ich das genau dort lassen, wo es ist. Aber wie Sie sehen können, wie Sie sehen können, hat dieser Text nicht genau gezeigt wie es aussieht, nur ein bisschen klobig, miteinander zu arbeiten. Und für die Bildschirmgröße sieht dieser Text ein bisschen zu groß Da ich meine Kombiklasse bereits hinzugefügt habe, kann ich einfach zur Typografie zurückkehren, und ich werde sie wahrscheinlich auf 12 ändern Ich denke, das sieht ungefähr richtig aus. Sie können den Unterschied sehen, einfacher zu lesen ist, und schauen Sie sich Weiter an , entweder wir kommen zu den kleineren, einem horizontalen Telefon und einem Telefon, und hier können wir das Raster Y ändern. Ich würde gerne diese Spalten loswerden und daraus eine Vier mal Vier machen. Und das sieht gut aus, aber es kollidiert mit dem Bild, und ich muss den Abschnitt vergrößern , damit dieser funktioniert. Also waren es 600, schrotte es nach und nach in 100 und sieh zu, dass wir 700 sind besser, 800, mach es zu viel. Nein, das ist eigentlich okay. 800 funktioniert auch. Das sieht für mich gut aus. Und zu guter Letzt: Das Letzte, was wir uns ansehen wollen, ist das Handy selbst. Also jetzt auf dem Handy. Dieser sieht eigentlich okay aus. Ich muss das nur noch ein bisschen weiter ausbauen , damit der Text nicht im Weg ist. Und vielleicht möchte ich den Farbverlauf nach oben bringen, aber mehr, damit der Text auch weiter oben auf der Seite gut lesbar ist , wo er schneller und aussagekräftiger steht. Wir gehen zum Abschnitt. Wir werden das auf 900 erhöhen. Das sieht besser aus. Wir kommen jetzt zu den Hintergründen, und dort können wir unseren Hintergrundverlauf sehen. Wir werden das nur ein bisschen zurückbringen und das sieht schon viel einfacher zu lesen Nun, Sie werden hier feststellen, ich für die Zwecke dieser Demonstration nicht zu viel Zeit damit verbringen werde , aber dies ist ein Beispiel dafür, aber dies ist ein Beispiel wo Nab Bars ziemlich knifflig werden können Wenn ich mit dem Scrollen anfange, können Sie hier sehen , dass die Elemente behoben wurden Das wird noch deutlicher mehr wir der Seite hinzufügen Aber das Schwarz wird nicht richtig aussehen, wenn ich die Seite heruntergehe, und die Elemente sind nicht dynamisch, also werden sie ihre Farbe nicht ändern sie über dunklere oder hellere Dinge gehen Was ich hier eigentlich möchte, ist eine Interaktion oder Animation, bei der der Hintergrund weiß wird, wenn ich mit dem Scrollen anfange Hintergrund weiß wird, wenn ich mit dem Scrollen Nun, Interaktionen sind nicht etwas, woran ich hier arbeiten werde, sondern die Leitung des Kurses , der auf diesen folgt , der Mastery for Web Flow oder so ähnlich heißen wird Web Flow oder so ähnlich Wenn wir diese Website erweitert und sie zu einer vollwertigen Tesla-Website mit all den Fahrzeugen und so gemacht haben, werdet ihr sehen, wie ich Interaktionen erstelle und ich werde das noch viel weiter ausbauen, aber wir werden es vorerst einfach so belassen Aber du kannst sehen, dass das gut aussieht. In meinen Augen ist das eine abgeschlossene Heldenabteilung, so gut wie Tesla vielleicht nicht Ich weiß tatsächlich, dass ich darauf zurückblicke vielleicht mache ich es ein bisschen größer Also zurück nach unten, um mein Gesicht aus dem Weg zu räumen und zurück zum Abschnitt zu bewegen . Und ich werde 700 draus machen. Okay. Schläger. Ja, das ist definitiv Kein beengter Platz, ein bisschen mehr Platz. Space ist dein Freund, wenn es um Design und Websites geht Meiner Meinung nach habe ich viele davon angesehen. Dies würde als ziemlich gut angesehen werden. Es legt den Schwerpunkt auf das Fahrzeug. Wir werden Text unten und oben bekommen. Wenn wir einen guten Text hineinlegen, wäre das wahrscheinlich ziemlich überzeugend. Jetzt, da wir unseren Heldenbereich erstellt haben , müssen wir als Nächstes weitere Inhalte zu dieser Seite hinzufügen und sie zu einer vollwertigen Seite machen. Das werden wir tun. Wir sehen uns im nächsten. 9. Lektion 7 Den Hauptteil deiner Seite erstellen: Ordnung. Wir haben gerade den Aufbau unserer Heldenabteilung abgeschlossen. Das nächste, was wir jetzt tun müssen, ist einfach den Rest dieser Seite auszufüllen. Ich habe in diesem Fall nicht allzu viel darüber nachgedacht. Wenn Sie meinen Rat in früheren Video befolgt haben und versucht haben , einen Drahtrahmen zu erstellen, oder wenn Sie sich von der Seite inspirieren lassen , auf der Sie versuchen, das Geniale zu erstellen. In diesem Fall. Ich lasse mich einfach treiben. Das wird keine riesige Seite sein. Ich versuche hier wirklich nur, alle grundlegenden Strukturen der grundlegenden Seitenlayouts zu behandeln alle grundlegenden Strukturen der grundlegenden , die Sie wahrscheinlich implementieren werden. Das erste, was wir tun werden, ist , einfach eine grundlegende Spalte zu erstellen. Im Grunde genommen ein ordentliches Spaltenlayout. Ich nehme die Sektion Container. Und wenn es um Kolumnen geht , gibt es zwei Dinge, die Sie tun können. Webflow ganz unten. Früher haben sie viel mehr Wert darauf gelegt als sie es getan haben Jetzt verwendeten sie Quickstak für alles. Sie können also entweder die Spalten- oder die Rasterfunktion hier unten verwenden die Spalten- oder die Rasterfunktion hier unten declam nicht empfehlen, da Sie sich über keines von beiden wirklich Gedanken machen müssen Ich würde mich einfach darauf konzentrieren, Quicksta für alles zu verwenden. Es ist viel einfacher, erfüllt alle Ihre Bedürfnisse und Sie müssen nicht zwischen dem alten DRI-Layoutsystem oder dem Säulensystem wechseln zwischen dem alten DRI-Layoutsystem oder dem Säulensystem Also benutze einfach Quickstak. Also ziehen wir das und dann werde ich schnell sichergehen, dass ich meine Klassen richtig hinzugefügt habe , also gehen wir zum Basisabschnitt Einfacher Container. Und dann nenne ich das Dual Column Grid. Und wir werden aus Hunderten Wörtern bestehen. In Bezug auf die Hintergründe. Das sind ein paar Dinge, die wir hier tun können. Wir können entweder sofort, ich mache es einfach schwarz. Ich komme zurück und füge ein Bild hinzu, noch nicht wirklich entschieden, ich bin noch nicht wirklich entschieden, aber wir werden einfach ein weiteres hinzufügen. Wir gehen hierher und machen es buchstäblich schwarz. Dann werden wir in der Zelle ein weiteres Diplom hinzufügen und darüber habe ich vorhin gesprochen, es war nur ein bisschen mehr Anpassung Ich werde hier ein Bild hinzufügen. Okay, und wir werden ein Bild auswählen. Werde ich ein Bild wählen? Das ist die Frage. Nun nochmal, wenn wir uns wirklich auf den Inhalt dieser Seite und so konzentrieren würden, würden wir etwas machen, das vielleicht über Barrierefreiheit oder das Innere oder die technischen Daten des Motors sprechen Barrierefreiheit oder das Innere würde, solche Dinge. Im Moment konzentrieren wir uns nur auf die Ebenen und verwenden tatsächlich den Webflow. Also werden wir uns für so etwas entscheiden, denke ich. Dann fügen wir hier einen weiteren Dip-Block hinzu, wenn wir einen Absatz hinzufügen werden. Wir werden darüber eine Überschrift hinzufügen und darunter werden wir eine Schaltfläche hinzufügen. Wir werden eine Überschrift erstellen und dann werden wir eine H-Zwei daraus machen. Wir werden es schaffen, wir wollen nicht, dass es zensiert wird. Wir werden es schaffen. Machen Sie es in Richtung Kurs. Ich musste hier eine weitere Klasse namens Light Heaven erstellen , weil ich sie links lassen möchte . Ich möchte sie als Standardüberschrift links belassen. Ich möchte es weiß machen. Da ich aber nicht die Mitte und dann die Kombinationsklasse „Lichtüberschrift“ verwende , möchte ich die Mitte herausnehmen. Ich muss eine neue Klasse erstellen, die sie weiß macht. Auch hier ist es nur etwas , das man von Zeit zu Zeit tun muss, aber es ist keine so große Sache. Ich werde wahrscheinlich darum bitten, dasselbe mit diesem zu tun , was okay ist. Absatz. Wir nehmen Standards, wir machen es wie Paragraph und wir machen das weiß. Ich denke aber, wir werden tatsächlich die kleinen machen. Ich glaube, ich mag die Tribünen nicht besonders, vielleicht lasse ich sie zu groß. Das ist besser. Dann machen wir das. Ich denke , das wird in Ordnung sein. Nun, wenn wir uns diese ansehen, sehe ich insgesamt okay aus, aber ich möchte sichergehen, dass das Muster dafür etwas besser abgestimmt ist das Muster dafür etwas besser abgestimmt ist, wir werden vielleicht 40 setzen. Ich denke, wir werden 40—20 von diesem Set nehmen, dann, was das G angeht, werden wir hier zuerst und 40 weiter unten wählen Ich denke, wir sollten vielleicht mehr Platz einbauen, also vielleicht 60100100 Das ist besser, wenn wir mehr Platz weben. Und ich werde das Innere einrichten. Damit ist ein Abschnitt fertig. Als Nächstes werden wir einen weiteren Abschnitt mit mehr Bildfokus erstellen. Im Folgenden werde ich einen weiteren Abschnitt hinzufügen. Ein weiterer Entwickler. Und was wir tun werden, ist, eine weitere Überschrift erstellen und einen weiteren Entwickler zu erstellen. Dann machen wir einen Absatz und darunter eine Schaltfläche. Und du wirst in einer Sekunde sehen, wohin ich damit will. Also gehen wir wieder hierher zurück, Basisbereich. Also wirst du es merken, wenn ich gehe. Ich habe dabei nicht an der Reaktionsfähigkeit gearbeitet , aber ich werde darauf zurückkommen und es am Ende tun Also dann wird dieser ein einfacher Container sein. Und dann werde ich für diesen Abschnitt Hintergründe erstellen. Eine Eins. Und hier werden wir sichergehen, dass wir ein Bild hatten. Wir werden ein Bild auswählen. Also eines, das wir wahrscheinlich könnten , das ist ziemlich auffällig, ich denke, es wäre gut. Ich meine, wir haben hier eine große Auswahl. Vielleicht ist der, den wir ursprünglich hatten, wieder ein guter Anfang dafür Wir wollen sichergehen , dass die Höhe des Abschnitts angemessen ist, also werden wir 800 machen. Und ich vergewissere mich gerade, dass das korrekt ist. Und ich brauche hier einen Wrapper , und Sie werden feststellen, dass er nicht hinzugefügt wurde, also muss ich in den Container gehen und dann werde ich alles andere hineinlegen Ich nenne das einfach Inhalt. Nein, da ich eine gute Lösung für Ihre Wrapper machen werde , ist vielleicht, einfach eine Basisklasse von Content-Wrappern zu haben Und obendrein möchten Sie vielleicht eine weitere Kombinationsklasse hinzufügen, um die Dinge spezifischer zu machen, aber auch das liegt ganz Und dann wieder Content Wrapper, wir gehen. Wir müssen die Breite auf 100% einstellen. Wir machen die Höhe zu 100%. Und repariere, dass das der Container war. Das sollte etwas anders eingestellt werden. Dann werden wir mit dem Content Trapper diesen Flex machen, nach unten gehen und wir wollen sichergehen, dass nach unten gehen und wir wollen er gestreckt ist, aber ich glaube nicht, dass er es noch tut Ich mache es so , dass du es sehen kannst , aber das sieht nicht richtig aus, also müssen wir das Ganze etwas aufpolstern. Es gibt ein paar Dinge, die wir tun müssen , vielleicht auf der Höhe des Abschnitts drehen, weil wir vielleicht zu groß für das sind, was wir anstreben Okay. Und wir wollen, dass es dieses Mal im Mittelpunkt steht und wir wollen, dass es wie und für die Sackgasse ist, wir wollen es wieder in den Mittelpunkt stellen Okay. Ich werde nur etwas zu dem Button hinzufügen. Ich sorge mich darum. Wenn man das eine Weile gemacht hat, wird es irgendwann zur Selbstverständlichkeit. Es braucht natürlich Zeit, aber Webflow ist nicht so schwer wie das, was manche Leute sich vorstellen Ich glaube, es gibt eine häufige Beschwerde darüber, die ich über Rigid hatte Ich verstehe, woher die Leute dafür kommen, aber wenn man diese Art von Arbeit lange genug macht, beginnt man, die Einschränkungen ein bisschen mehr zu schätzen. Halte dir eine Struktur vor, mit der du arbeitest . Wenn du weißt schon, du weißt schon, andere Plattformen wie Wicks, die ich jetzt oft benutzt habe. Ich bin definitiv kein großer Fan von. Und das heißt nicht, dass es schlechte Plattformen sind. Es ist nur so, wenn man anfängt, etwas Komplizierteres zu tun , oder wenn man einige Dinge wirklich reduzieren will oder, ich sage, die Hauptsache ist Komplexität Wenn Sie mit dem Typ Komplexität Ihres Projekts beginnen, dann ist wx nicht das Richtige für Sie Ich würde nicht sagen, dass es meiner Meinung nach nicht wirklich die Fähigkeiten hat, aber andererseits hat jeder seine eigene Meinung Also wie dem auch sei, also bringen wir das mit, okay. Bring das runter und das sollte alles ganz gut zusammenpassen. Ich denke, hier müssen wir die Breite ändern weil Sie feststellen werden dieser Absatz hier unten viel zu breit ist, wenn wir darüber sprechen, wir haben uns die Benutzererfahrung und das Design angesehen, das ist keine gute Benutzererfahrung und es ist keine gute Verwendung von Design. Wir wollen, dass das viel mehr Nutzer findet. Wir werden also 60 nehmen, und dann muss ich sichergehen und dann muss ich , dass das Sensoren sind Okay. Da haben wir's. Was ich noch einmal mit unserem Hintergrund machen werde, wir werden diesem Abschnitt etwas anderes hinzufügen. Auch hier geht es darum sicherzustellen, dass der Text lesbar ist. Der ist okay. Zu dem gehen wir in der Mitte. Die Transparenz von dem hier loswerden. Am Ende werden wir hier eine weitere Farbe hinzufügen, die einfach blau sein wird. Du kannst es dort sehen. Das sieht aus. Okay. Okay. Ich werde einfach die Wertentwicklung für den Fonds stärker in den Vordergrund stellen . Auch das ist ein weiterer Abschnitt. Nicht zu viel darüber nachzudenken. Das Tolle an dieser Art von Seitenmischung und ich meine, das ist Ted zu verdanken, hat nichts mit mir zu tun , aber die Qualität der Bilder ist wirklich hoch. Ich denke, wenn du das durchmachst und an deinem eigenen Projekt arbeitest und versuchst , deine eigenen Ideen zusammenzubringen, deine eigenen Ideen zum Leben zu erwecken. Sie können die Bedeutung nicht unterschätzen Ich kann die Bedeutung guter Bilder nicht unterschätzen Und ob es von Ihrem Produkt ist. Ich meine, das sind technisch gesehen Produktbilder, die wir uns ansehen. Sie sind einfach so hoch, so ein hoher Standard. Aber wenn du dabei bist, willst du nur versuchen, sicherzustellen , dass der Inhalt so hoch wie möglich ist. Weil es einfach alles andere zusammenbringt und alles so viel einfacher macht. Okay. Also dieser Abschnitt ist fertig. Jetzt gehen wir zu Wir werden diesen Abschnitt nehmen. Auch hier handelt es sich nur um einen kleinen Vorgang zum Ausschneiden und Einfügen , aber wir nehmen das Einfügen ganz unten und drehen dann den Inhalt um. Und dieser wird in die nächste Zelle gehen. Wir werden das Bild ändern. So etwas in der Art. Sei brav, das sieht wieder gut aus. Wir werden uns natürlich ändern, Sie würden den Text so ändern, wie Sie es getan haben, also werde ich sagen, ich weiß es nicht. Drive kann erkennen, dass Sie Gedanken über den Inhalt der Landingpage gemacht haben. Aber insgesamt denke ich, dass es aus gestalterischer Sicht total ist. Also würden wir das tun und in Ordnung. Und wenn dieser Abschnitt fertig ist, nenne ich ihn für den Hauptteil der Seite. Sie können also sehen, wie einfach es ist , das zusammenzustellen. Es ist nicht übermäßig komplex, würde ich nicht sagen. Das sind ziemlich einfache Layouts, aber je mehr Sie diese Effekte verwenden, werden Sie daraus herausholen, desto wohler werden Sie sich damit Webflow ist gruseliger als es aussieht. Es ist nicht so schwer zu benutzen. Ich werde mich daran gewöhnen, dass es eine wirklich, wirklich nützliche Plattform ist. Also werde ich das vorerst hier nennen . Als Nächstes werde ich einen Farmbereich für die Lead-Generierung einrichten, etwas ganz normales, das Sie auf vielen Websites sehen werden, und Sie werden es wahrscheinlich selbst wollen. Und danach werden wir den Fzer erstellen, von dort aus übernehmen wir ihn Also sehen Sie sich den nächsten an. 10. Lektion 8 Aufbau deines Lead-Gen-Formulars: Okay. Also jetzt, wo wir den Text für unsere Seite haben. Das Letzte, was ich will, ist eines der letzten Dinge, die ich auf dieser Seite tun möchte, unsere Generationsfarm zu erstellen Farmen sind ein großer Teil von Webflow und sie sind ein großer Teil weil sie so anpassbar sind, und das ist etwas, das man bei vielen anderen Website-Buildern und sogar Formularerstellern nicht bekommt anderen Website-Buildern und sogar Formularerstellern In den meisten Fällen kann man nicht wirklich viel tun, um die Formulare anzupassen, wie sie aussehen, wie sie interagieren, Hover-Interaktionen oder Hover-Animationen. Es gibt eine Menge Dinge , die Sie auf vielen anderen Formularen tun können , die Sie auf diesen anderen Aber bei Flow kannst du genau so stylen, wie du willst. Ich wollte mir die Zeit nehmen, mich speziell mit Formularen zu befassen, weil ich sie normalerweise zu einem früheren Zeitpunkt im Prozess hinzufüge sie normalerweise zu einem früheren Zeitpunkt im Prozess , wenn du deinen Styleguide erstellst Dort arbeite ich daran, und dann importierst du es einfach in eine beliebige Seite. Aber in diesem Fall möchte ich handeln, ich möchte Schritt für Schritt vorgehen. Wir werden zurück zum Styleguide springen. Wir werden dort alle Konfigurationen vornehmen, die wir benötigen. Dann füge ich hier unten einen neuen Abschnitt hinzu und ich werde ihn so aussehen lassen dass er zu dieser Seite passt und hoffentlich sieht er schnell aus und hilft dabei, zu dieser Seite beizutragen. Lass uns zurück ins abgestandene Tor springen. Ich werde hier ganz nach unten scrollen. Wir werden einen weiteren neuen Abschnitt erstellen. Du hast einfach Geduld mit mir. Das ist eine Sache, bei der wir ziemlich fehlerhaft sein können, nämlich dass, wenn du Abschnitte auf einer Seite platzierst, es manchmal einfach nicht so gut gefällt Wir werden das auf die Schaltfläche reduzieren. Delo drinnen. Ein weiterer Dev-Block in diesen Klassen fügt hinzu. Der Container. Und dann werden wir hinzufügen, dass wir dieses Formular einfach Refer nennen werden. Ich werde das wahrscheinlich auf der Landon-Seite verwenden, aber wir werden sehen. Das machen wir zu 100%. Und wir werden diesen auch zu 100% machen. Ich werde nur etwas Block und Platz hinzufügen. Lass uns das nur ein bisschen leichter erkennen. Richtig. Und dann ziehen wir einfach ein Formular rein und ich werde das alles Schritt für Schritt mit Ihnen durchgehen. Das Wichtigste, was wir hier versuchen, genau wie bei all diesen anderen Elementen des Stils nur um eine kurze Zusammenfassung zu machen Wir fügen das Formular hinzu. Wir werden die richtigen Klassen stilistisch hinzufügen, und dann können wir dieses Formular annehmen und diese Klassen an einer anderen Stelle auf der Website hinzufügen. Ziehen wir also einfach ein Formular hinein und wir fangen damit an. Okay. Das ist nur ein wirklich einfaches Formular, aber es gibt noch einige andere Dinge, die ich hier hinzufügen möchte, weil es noch andere Funktionen gibt , die Sie mit Webflow-Formularen haben können Du kannst also deinen Formular-Block haben, dann bekommen wir Beschriftungen, da wir schon eine Checkbox gesehen Dann wollen wir ein Optionsfeld hinzufügen. Wenn es mich lässt. Wenn wir gehen. Und dann werden wir ein Dropdown hinzufügen. Und dann zurückerobern. Ich werde einfach all das durchgehen. Wir werden über sie sprechen, und wir werden sie einfach anpassen. Fangen wir also mit den Feldbeschriftungen an. Also werde ich nur die Etiketten lesen, wir wollen diese Eisenbahn bauen. Die Schrift kann einfach schnell darüber aussagen und wir nehmen einfach diesen Kurs und fügen ihn dort hinzu. Stimmt. Eingaben sind wichtig. Ich meine, das sind die Dinge, in die die Leute tippen werden. Sie möchten sicherstellen, dass die Benutzer das richtige Feedback von ihnen erhalten. Sie möchten sicherstellen, dass es leicht einzutippen und leicht zu lesen und zu verstehen ist. Lassen Sie uns also einfach weitermachen und den Input farmen. Wir werden sicherstellen, dass die Topographie Eisenbahn eingestellt ist In diesem speziellen Fall möchte ich den Höhepunkt erreichen Ich denke, wir werden uns für 30 40 entscheiden Ich bin mir sicher, dass das normalerweise so ist. 50 Ich werde 51 sagen. Und damit fügen wir einfach Platzhaltertext hinzu Platzhaltertext damit es leichter zu verstehen ist Also werden wir, ich werde es tatsächlich hinzufügen . Hier werde ich dasselbe tun. Okay. Richtig. Und ich glaube, ich hätte gerne, dass sie gekrümmt sind. Im Moment sieht es nur ein bisschen kastenförmig aus. Wenn wir also ganz nach unten gehen, muss ich vielleicht noch mehr hinzufügen Vielleicht sieben Fuß, ich sollte es tun. Okay. Und die Größe des Textes im Inneren also ich denke an 16 bis 181618 Ich denke 18 ist besser. Und hier oben werde ich das Tempo nur leicht ändern. Ich möchte 20 pro Größe haben, nicht 12. Ich sah am besten aus. Und dann will ich nicht wirklich eine Grenze. Was ich will, ist ein Kastenschatten, also wenn wir hier nach unten gehen. Und das ist in Ordnung für einen Box-Shadow, und wir müssen ihn nicht viel ändern. Ich bin nicht wirklich so schnell dabei. Also grenzen wir dort an, wo es grau ist. Nochmals, weil G so viel für uns sprechen wird. Wir müssen uns nicht wirklich Sorgen um die Grenze machen. Der Schatten der Box hilft nur zu sehen, ob wir ihn auf einem weißen Hintergrund betrachten, aber insgesamt ist das okay. Das einzige, was ich hier wirklich ändern würde und das ist eine weitere Interaktion, die wir hinzufügen werden, wir werden einen Übergang hinzufügen und es wird die Rahmenfarbe sein oder Ja, wir werden es zur Randfarbe machen. Und wenn ein Benutzer fokussiert ist und Fokus bedeutet, dass er aktiv darin tippt, möchten wir, dass sich die Farbe der Ränder ändert. Und wir ändern es auf Ich möchte es auf Rot ändern. Ich werde es einfach hier versuchen , glaube ich. Nein, wir werden es tatsächlich ändern. Ja, wir ändern es auf Rot. Wir werden es so ändern. Wir werden sehen, wie das aussieht. Wenn ich jetzt zur Vorschau gehe und anfange, hier zu tippen, werden Sie die Änderungen sehen. Eine letzte Sache, die sie ändern müssen, ist die Farbe des Textes und jemand tippt darauf, weil sie momentan zu schwach ist Also werden wir hierher kommen. Und ich ändere mich hoffentlich. Okay. Da haben wir's. So wollen wir es haben. Das ist gut. Sie werden hier sehen , dass die Bretter ihre Farbe ändern. Das haben Sie wahrscheinlich schon einmal gesehen , wenn Sie mit vielen Websites interagiert haben. Wir sind an solche kleinen Dinge gewöhnt. Jedes Unternehmen macht das etwas anders. Aber das Wichtigste hier ist, dem Benutzer Feedback zu geben. Wenn das rot wird, abgesehen davon, dass der Cursor sie zum Tippen anblinkt, sagt es ihnen nur, dass sie darauf geklickt haben, und sie können anfangen zur Barrierefreiheit einzugeben Es ist eine Designsache. Es ist gut für die Benutzererfahrung, das ist das Endergebnis. Wir können hierher kommen und ich werde die Formulareingabe entgegennehmen. Ich werde es hier anwenden. Okay, das sieht also schon besser aus. Nun, für Checkbox, das wird wieder ähnlich sein, aber wir werden die Schriftart ändern Railway don't used to do much other. Okay. Und wir werden das Radio auf Radio umstellen. Ich habe das einfach gemacht, ohne benutzerdefinierte Klassen hinzuzufügen , weil ich weiß, dass dies die Klassen sind , die ich dafür verwenden möchte, und dann können Sie sehen , ob es zur Überprüfung geht, wenn Sie es dort überprüfen Radio muss drinnen sein, es hat keine Fragen, also wird es hier nicht funktionieren. Ich bin mir ziemlich sicher, dass es auch nicht funktioniert, wenn du testest. Es funktioniert nicht in der kostenlosen Ansicht, Sie müssen es auf der Live-Site oder einem Bewertungslink testen Zum Schluss haben wir das, jetzt nehme ich die Formulareingabe und füge das hier ein Und das wird wahrscheinlich tatsächlich in Ordnung sein. Sie werden also feststellen, dass das grau bleibt. Lass es einfach so. Versuche nicht, es zu ändern. Dies ist einer von denen, in denen wir uns verfärbt haben. Das ist etwas starrer. Ich würde nur empfehlen, das so zu lassen, wie es ist. Und wenn Sie auftauchen, brauchen Sie sich keine Gedanken über das Dropdown oder so zu machen , weil es Ihnen Ihre Optionen bietet, und das sind die Optionen, die Sie erhalten. Und das ist es wirklich. Und jetzt nochmal, mit diesem möchte ich eine Sekunde verbringen. Also, wenn Sie Recapture aktiviert haben und ich werde zum Satz auf die Seite übergehen , weil das hier aktiviert werden muss Wenn Sie also Recapture aktiviert haben, muss es zu jedem einzelnen Formular auf der Website hinzugefügt werden Wenn es nicht aktiv ist, können Sie es nicht verwenden. Aktiviere es so schwer, du musst nur einen Schlüssel von read to Webflow rest erstellen einen Schlüssel von read to Webflow rest Es ist nicht allzu knifflig. Du gehst auf Farmen. Und dann gehen wir hier runter , um die Bestätigung zurückzuholen. Und dann registrieren wir uns für Großbritannien. Sie können also sehen, dass ich hier bereits ein paar davon für verschiedene Websites habe. Du willst hier nur einen hinzufügen. Ich werde nur über diese Model-3-Website berichten. Die, die Sie verwenden, ist Version zwei. Ja. Es ist Version zwei und ich bin keine Roboter-Chatbox. Das ist die, die wir benutzen dürfen. Die Website unterstützt nur diesen. Sie möchten sicherstellen, dass Sie sie jedes Mal verwenden. Und dann haben wir die Domain nicht hier. Nun, in diesem Fall muss ich einfach eine auf die Website von Just Put Model 3 setzen. Punkt com. Wenn ich das mache, hole ich mir zwei Schlüssel ich nehmen kann, und du nimmst sie und kopierst sie, fügst sie wieder in Webflow und hier Stellen Sie sicher, dass es aktiviert ist, um Ihre Änderungen zu speichern. Nachdem Sie sie veröffentlicht haben, fangen Sie an, Ihr gesamtes Formular erneut zu erfassen Also wie dem auch sei, das ist Recapture. Auch hier gilt: Wenn Sie es aktivieren, muss es zu jedem Formular auf der Site hinzugefügt werden Das ist ein weit verbreitetes Missverständnis, und es wird Ihnen einige Kopfschmerzen ersparen wenn Sie sich nur an diese eine Sache erinnern Also kehren wir hier zum Styleguide zurück. Insgesamt ist das im Grunde genommen abgesehen von der Schaltfläche unten hier. Das müssen wir ändern. Okay. Nochmals, da wir die Button-Klassen bereits erstellt haben, können diese einfach hinzugefügt werden. Im Allgemeinen sollten Sie eine große Schaltfläche für Ihre Schaltfläche „Senden“ verwenden . Das ist so ziemlich alles. Da steckt nicht viel anderes dahinter. Jetzt, wo wir das Formular haben, das Klassen erstellt haben, sind wir damit zufrieden. Wir können nach Hause zurückkehren und mit dem Aufbau dieses Formularabschnitts beginnen. wir einfach sicher , dass wir den Basiscontainer für den Abschnitt Basic richtig eingerichtet haben . Sperren. Dann werden wir hier tatsächlich einen Formular-Wrapper hinzufügen Ich denke, das ist einfach die beste Wahl. Ich habe nämlich bereits den Form-Wrapper in der alten Version hinzugefügt , aber ich weiß, dass ich hier etwas ändern muss Dann fügen wir einen Formularblock hinzu. Und was wir hier tun werden , ist den Hintergrund des Abschnitts in etwas Nettes zu ändern . Das passt also zum Thema der restlichen Website. Also gehen wir zum Abschnitt und ich werde den Bildhintergrund zu etwas wechseln, um die Höhe von wahrscheinlich wieder 800 zu erreichen. Vielleicht nicht so groß wie das. Vielleicht waren es 600. Sobald das erledigt ist. Nimm das und wir fügen ein Bild hinzu. Das Bild, um hier eines auszuwählen, für das ich mich entscheide, ist eigentlich ganz so oder eines dieser roten. Das ist ganz nett, aber das formelle Cover des Bildes. Also ich denke, wir werden uns für etwas anderes entscheiden. Was? Ich weiß nicht, was ich davon halten soll. Ja, lass uns so etwas machen. Ich glaube. Jetzt wollen wir nur noch die Klassen auf dieses Formular anwenden. Und ich denke, wir werden ein paar Dinge ändern, aber ich werde es Ihnen zeigen. Okay. Sie können also sehen, dass dieses Formular einen großen Kontrast zum Hintergrund haben wird , oder? Und das ist etwas, das du verlassen und arbeiten kannst, aber ich würde immer versuchen, es zu vermeiden. Und ich werde dir zeigen, was ich normalerweise mache, um das zu machen. Also was das Etikett angeht, und dann werden wir gehen , du wirst Weiße wählen Okay. Richtig. Okay. Also für die Eingabe, und ich werde dafür sorgen, dass ich hier wieder Platz habe. Gehen wir zu mail.com Wenn wir hinzufügen wollen. Ich werde hier auch nur einen Textbereich hinzufügen. Ich mache weiter. Ich glaube nicht, dass ich eine hinzufüge Und am Ende müssen wir versuchen, das ein bisschen zu machen. Das kann ziemlich mühsam sein, wie Sie sicher sehen können, aber am Ende lohnt es sich und das Endergebnis zufriedenstellend, echt. 18. Das muss reinkommen. Ja, das ist okay. Ja, ich glaube, ich bin beide konsequent. Ja, das ist okay. Okay. Also, ich möchte nicht, dass sich das Bild als Hintergrundbild anfühlt, tut mir leid, ich habe das Gefühl, dass es vom Formular getrennt ist Ich möchte, dass alles miteinander verschmilzt. Ich möchte, dass es eine schöne jahrelange Erfahrung ist, wenn mit jemandem interagiert wird Also für den Input werde ich ein coolstes machen, wir werden angeben Wir wollen trainieren Dunkle Brüder. Was wir hier machen werden, hat Background eigentlich noch nicht entschieden Als Erstes werden wir die Deckkraft auf 75%, 50% reduzieren Deckkraft auf 75%, . Vielleicht möchten Sie es einfach so weit bringen, dass der Hintergrund gemischt ist, aber Sie möchten nicht, dass er transparent ist Das ist das Erste, was wir tun werden. Vielleicht komme ich zurück und ändere das, aber hab Geduld mit mir. Dann werden wir die Farbe des P-Textes im Allgemeinen ändern , aber ich werde auch die Farbe des Platzhalters komplett auf Weiß ändern , einfach so Die Bretter sind Der Rand, ich glaube, er wird komplett weiß sein, er wird schwarz sein Ich denke, wir werden uns für Weiß entscheiden. Ich denke, das hält die Erreichbarkeit ziemlich hoch. Wenn ich das dann einfach überprüfe, stellen wir sicher, dass es Chaos gibt. Das sieht okay aus. Wir werden diesen einen Kurs nehmen , den werden wir hier reinstellen. Dann werden wir das auch in den Textbereich einfügen, aber ich muss nur sichergehen und ich muss die Platzhalter wieder weiß machen und es dauert 2 Sekunden. Großartig. Also lass uns besser hinschauen. Alles, was hier wirklich passiert, ist, dass ich versuche , den Hintergrund mit der Form zu verbinden. Ich will nicht, dass ich gesagt habe, ich möchte nicht, dass sie sich voneinander getrennt fühlen Also das macht das meiner Meinung nach viel besser, ich muss es jetzt nur zentriert machen und sie brauchen Text nach oben Also werden wir hier eine Überschrift hinzufügen. Dieser wird Heading Jump myself Überschrift sein , dann machen wir diesen H zwei. In diesem Fall, ja, ich glaube, wir werden es schaffen. Text der Absätze. Dann füge ich das in dep ein, weil ich wieder sichergehen muss, dass der Absatz einfach zu breit ist Und wir werden diesen Stillstand überwinden. Leitender Rapper. Ich denke, das sollte der Richtige sein. Ich denke. Wie dem auch sei, wir machen einfach damit weiter. Zuerst Rapper und dann machen wir die Breite auf 60% Und dann muss ich sicherstellen, dass das Formular Rapper mittig ist, damit das alles funktioniert, diesen Vertikalen richtig machen . Okay. Also ich muss es spüren, aber du kannst sehen, wenn ich das mache, bringt es die Farm in das, was wir tun werden, ist einfach zur Farm zu gehen Und dann werden wir das einfach machen. Das wird aus irgendeinem Grund nicht nett gespielt. Bei 800% Okay. Überwinde mich einfach , während ich versuche zu reparieren diesen Block zu reparieren. Sie können hier also die Probleme sehen die Sie stoßen können , wenn Sie dies tun. Da haben wir es. Ich denke, das muss nur ein schwacher Bug gewesen sein. Da gehen wir arbeiten. Die Form ist immer noch weiß. Das werde ich tatsächlich ändern. Um Wissen Sie, was es ist. Es ist der Formularblock, der hier Probleme verursacht. Mir ist gerade klar geworden , dass es 60% sind. Vielleicht 70. Du kannst dich entscheiden, aber ich versuche nur, dieses Gleichgewicht zu finden. Das sieht okay aus. Für das Formularetikett möchte ich hier oben einen kleinen Rand hinzufügen, für all diese, weil es sich um ein Exemplar handelt. Jetzt muss ich nur noch sicherstellen, dass der Abschnitt eine angemessene Höhe Wir sollten startklar sein. Okay. Okay. Da haben wir's. Das ist ein Formular. Auch hier werden wir zurückkommen und die Reaktionsfähigkeit bearbeiten Auch hier werden wir zurückkommen und die Reaktionsfähigkeit bearbeiten , aber das gibt Ihnen eine gute Vorstellung davon, wo wir uns gerade befinden Sieht insgesamt okay aus. Ich werde nicht darum bitten, Änderungen an dieser Seite vorzunehmen Ich glaube nicht, aber wir können hier das Rechnungsformular sehen. Und ich werde Sie schnell zu den Seiteneinstellungen weiterleiten , um Ihnen zu zeigen , was Sie tun müssen, um sicherzustellen, dass Ihre Formulare zugänglich sind. Wenn Sie also zu den Seiteneinstellungen gehen und wir dann reinkommen, können Sie Ihren Absendernamen ändern. Sie möchten sicherstellen, dass Ihre Firmenbeiträge an die richtige E-Mail-Adresse weitergeleitet werden, und sicherstellen, dass Ihre E-Mail-Adresse dort steht. Sie können Ihre Betreffzeile nach Belieben hinzufügen. Webflow hinterlässt Notizen dazu auf der rechten Seite. Wenn Sie eine E-Mail-Vorlage möchten, können Sie sie dort hinzufügen. Wir haben bereits über die Rückeroberung gesprochen. Wenn Sie Ihre Firmen mit anderen Orten integrieren wollen , aber ich denke schon Die meisten Leute werden sich darüber keine Gedanken machen , weil das für Unternehmen ist. Spam-Filter, schalten Sie das ein. Und ja, Sie möchten auf jeden Fall Zugriff auf Uploaddateien einschränken. Ich werde dir dort unten sagen, wie viele deiner Formulareinreichungen du für den Monat verwendet hast. Davon abgesehen ist es das. Formulare können etwas schwierig zu gestalten sein und so, aber wenn man sich daran gewöhnt hat, sind sie ziemlich einfach. Ich würde sagen, dass alle Dinge im Webflow-Ökosystem wahrscheinlich am unterentwickeltsten sind , was die Tatsache angeht, dass Sie den Unternehmensplan von Web nutzen müssen, um diese Formulare ordnungsgemäß in die Tatsache angeht, dass Sie den Unternehmensplan von andere Plattformen zu integrieren, ist andere Plattformen zu integrieren aber wenn man sich daran gewöhnt hat, sind sie ziemlich einfach. Ich würde sagen, dass alle Dinge im Webflow-Ökosystem wahrscheinlich am unterentwickeltsten sind, was die Tatsache angeht, dass Sie den Unternehmensplan von Web nutzen müssen, um diese Formulare ordnungsgemäß in andere Plattformen zu integrieren, ist eine echte treten in die Zähne , weil es viel schwieriger wird, wenn Sie nur versuchen, Informationen an verschiedene Orte zu senden , als müssten Sie Zapier fast die ganze Zeit verwenden. Aber abgesehen davon sind sie für einfache Formulareinreichungen wirklich einfach Das ist es also. Und das nächste, was wir tun müssen oder das Letzte, was wir in diesem Fall tun müssen , ist die Fußzeile zu erstellen , und das werden wir im nächsten Video tun Okay. 11. Lektion 9 Aufbau deiner Fußzeile: Ordnung. Also haben wir die meisten Dinge getan, die wir für diese Landingpage tun müssen. Das Letzte, was wir tun müssen, ist, einen Monteur hinzuzufügen, und dann müssen wir an einigen Dingen zur Reaktionsfähigkeit arbeiten, und es gibt ein paar kleine Dinge, die ich Ihnen zeigen werde , nur um alles aufzupolieren Also lass uns einfach einen Monteur hinzufügen. Und der Prozess , den wir beim Hinzufügen des Monteurs befolgen werden, wird einfach sein Es wird also dem ähneln, was wir beim Hinzufügen der Navigationsleiste getan haben Sie können das also entweder tun , ich glaube nicht, dass Webflow das nicht hat Wir gehen zu den Layouts und wir werden die Bibliothek erneut starten und wir werden nach unten zur Fixierung scrollen scrollen Sie können hier wählen, was Sie wollen Es macht nicht wirklich einen Unterschied. Nur um das zu demonstrieren, wählen wir einfach diesen aus, und ich werde ihn unten auflisten. Sobald das erledigt ist und wir hier unten sind. Großartig. Wir haben einen Fuß an Ort und Stelle. Jetzt müssen wir nur noch die notwendigen Änderungen daran vornehmen. Als Erstes werde ich den Hintergrund schwarz machen Bevor ich das mache, denke ich, werde ich sicherstellen , dass ich hier alle richtigen Elemente hinzufüge. Ja. Ja, schwarz macht es weiß. Ich denke, ich könnte das Logo einfach ganz entfernen. Weil das nicht zu kompliziert sein muss. Dann werden wir das alles auf Eisenbahn umstellen . Fast da. Und das lasse ich stehen. Wir werden diesen Teil nicht festlegen. Der Teil, in dem wir die Benutzer bitten , Uni-Kleidung und so anzuziehen. Das ist nicht nötig, aber ich werde es verkaufen und wir werden sehen. Also werden wir das wirklich ändern. Und wir werden es schaffen. Ich denke , das wird so sein, wir werden es tun. Also hier, mach das, das reicht dafür. Das Letzte, was wir tun werden, ist, sie alle weiß zu machen. Dann werden wir das auf den Arzt umstellen, damit der Unterricht korrekt ist. Ich mache Wir machen diesen Knopf. Ich denke, das wäre. Okay. Es scheint das Alter eigentlich nicht zu ändern. Also lassen wir das für den Moment einfach so. Das muss im Grunde mehr gestylt werden. Ich werde nicht zu viel Zeit damit verschwenden. Aber es gibt viele verschiedene Dinge, die du hier tun kannst. Diese sind, ich kann sie nicht ändern. Das sind Bilder, also werde ich sie mir einfach ansehen. Grenze hier, die wir auf jeden Fall ändern wollen, weil es ein bisschen ist. Und dann war's das. Und dann sollte es skalieren , weil es unsere Zone ist, was ja auch der Fall ist. Das ist in Ordnung. Ja. Das ist perfekt. Wir wollen nur, dass das Symbol genauso aussieht wie bei der Kleidung, oder? Komponenten-Komponente, rufe The creates create , nachdem wir hier mehrere Seiten erstellt Dann könnten wir einfach diese Leiste hinzufügen und zu jeder Seite, an der wir gerade arbeiten , Das ist es. Das Letzte, was wir tun müssen, ist einfach diese Seite zu bearbeiten, damit tun müssen, ist einfach diese Seite zu bearbeiten reagiert, und dann sind wir an einem guten Ort. Wir sehen uns im nächsten 12. Lektion 10 Deine Seite reaktionsschnell gestalten: Okay. Jetzt, wo wir im Grunde genommen mit der Erstellung unserer gesamten Website fertig sind, wollen wir nur sichergehen, dass sie auf allen Geräten hier oben responsiv ist . Also ich denke, auf dem Desktop sieht diese Seite insgesamt ziemlich gut aus, bin ziemlich zufrieden damit. Weißt du, ich werde nicht viel mehr Zeit damit verbringen, aber wenn ich es wäre , ich meine, ich denke, das wäre eine wirklich, wirklich großartige Website. Okay. Aber wie dem auch sei, konzentrieren wir uns auf die Reaktionsfähigkeit Insgesamt denke ich, dass wir das alles auf dem Desktop so machen, wie Sie es erwarten würden Gehe zum Tablet und das Einzige hier. Ich möchte, dass das Bild zentriert wird . Das Bild ist hier zu hoch. In der Zelle nehme ich das und mache es zentriert, sodass es schon besser aussieht. Und was ich hier hervorheben möchte , ist, dass an jedem Breakpoint, das sind Breakpoints, wenn Sie eine Änderung vornehmen, sie auf dem Desktop nicht geändert wird Aber in diesem Fall gilt jede Änderung, die ich an der Tabelle vornehme, sowohl für das horizontale Telefon als auch für das Telefon . Es funktioniert irgendwie. Und ebenso gelten alle Änderungen, die ich auf dem Desktop vornehme, für alle. Und alle Änderungen, die ich auf Mobilgeräten vornehme, gelten nur für Mobilgeräte, sodass Sie die Art der Hierarchie dort sehen können. Das sieht alles gut aus. Hier nochmal das Gleiche. Ich möchte das zentriert machen. In dieser Form werde ich dieses Jahr auf 70% erhöhen , ich denke, das ist ausreichend. Großartig. Und das sieht hier gut aus. Und auf der horizontalen Ebene gehen wir hier einfach wieder nach oben. Das sieht gut aus. Das hier. Als wir reingehen, können Sie sehen, dass ich damit wahrscheinlich nicht allzu glücklich wäre, aber als wir herauskommen, sieht es eigentlich okay aus. Das ist einer, lass es uns versuchen. Wenn wir zur Körnung gehen und diese Spalte löschen, schauen wir uns an, wie sie aussieht Das sieht so eigentlich okay aus. Ich bin ziemlich glücklich. Eigentlich bin ich damit zufrieden, denn das ist die Sache. Manchmal sind Bilder nicht gut genug, um das zu haben . Manchmal sind sie für manche Websites nicht gut genug, sodass Sie nicht so viel Wert darauf legen möchten. In diesem Fall ist dieses Bild gut genug, um es hervorzuheben. Eigentlich funktioniert das wirklich gut, also werde ich das für den anderen Abschnitt hier unten tun. Toll. Das funktioniert wirklich gut. Und großartig. Das lassen wir so stehen. Dann werde ich das hier wieder auf wahrscheinlich ändern. Das ist besser. Endlich, Handy. Dieser sollte überhaupt nicht lange dauern. Dieser sieht gut aus. Das muss verlängert werden. Ich werde das ein bisschen rausziehen. Ja, das ist behoben. Das muss auf 100% geändert werden , sie brauchen ein Pad auf der Innenseite und machen daraus 20. Und dann für die Textgröße selbst, okay. Die Textseite. Ich denke , lass mich sehen. Wenn ich den Abschnitt vergrößern würde, würde er ihn vergrößern und vielleicht würde ein größerer Farbverlauf den Text auffangen und ihn okay aussehen lassen. Wir machen daraus 800. Das heißt, wir werden hier runter gehen. Wir schauen uns unseren Gradienten an. Dann bringen wir die Hälfte mit , die viel besser ist. Der sieht gut aus. Das ist brillant. Das liebe ich. Das muss auf 100% geändert werden. Gleiche gilt für das. Formularblock. Großartig. Und das ziemlich locker, großartig. Und da haben wir's. Das ist es. Das ist also die Antwort von Miss Dunn. Also alles, was Sie beachten müssen, wenn Sie das tun, ist nur, dass Sie versuchen die Website oder die Seite an jedem einzelnen Breakpoint so gut wie möglich aussehen an jedem einzelnen Breakpoint so gut wie möglich Das ist es. Sobald Sie das getan haben, sei Diese Webseite ist an einem guten Ort. Es gibt ein paar kleine Dinge, die ich hier machen möchte. Und im nächsten Video werde ich mit dir darüber sprechen. Ich werde dir eine bestimmte Interaktion zeigen. Ich möchte etwas zu dieser Seite hinzufügen, nur um sie wirklich zu verdeutlichen , denn im Moment ist sie zu 99% fertig. Es gibt nur eine Sache , die ich ändern muss , um es auf den Standard zu bringen , den ich mir wünsche, und das werde ich Ihnen in der nächsten Version mitteilen. 13. Lektion 11 Eine Einführung in die Interaktionen: Okay. Also das ist der Grund. Also diese Landing Page ist so gut wie fertig und hoffentlich hattest du Spaß daran , diesen Kurs mit mir zu machen, aber es gibt nur eine Sache, die ich nicht verlassen kann , und das hat mit der Navigationsleiste zu tun. Ihr könnt es hier als Schriftrolle sehen. Manchmal fügt sich der Text einfach vollständig in den Hintergrund und es funktioniert nicht wirklich Lenkt ab, es sieht einfach nicht richtig aus. Diese Seite konnte nicht als fertige Seite veröffentlicht werden. Um das zu beheben, muss ich eine Interaktion hinzufügen, da ich hier oben immer noch klar sein und mich in den Heldenbereich einfügen möchte . Aber beim Scrollen möchte ich, dass der Hintergrund der Na-Leiste weiß wird, sodass er immer noch lesbar ist und auf der Website einfach zu verwenden ist, wenn jemand scrollt Was wir hier also tun werden , ist Interaktionen , etwas, auf das ich im Nachgang zu diesem Kurs, der sich mit Wi-Flow-Mastery befasst , viel ausführlicher behandeln Wi-Flow-Mastery befasst , Aber in diesem speziellen Fall werden wir nur eine wirklich einfache Interaktion erstellen, und das ist wahrscheinlich eine gute Gelegenheit um zu sehen, wie Interaktionen tatsächlich funktionieren Weil wir bereits gesehen haben, wie einige kleinere, weniger signifikante Interaktionen im Abschnitt „Stil“ in der Spalte „Effekte“ verwendet werden . Interaktionen sind jedoch etwas anders. Sie sind komplizierter. Sie können sehr schnell sehr kompliziert werden. In diesem Fall ist es ziemlich einfach und es ist wahrscheinlich ein wirklich gutes Beispiel, das man verwenden kann. Also werde ich das einfach machen. Was wir hier tun müssen, ist, eine Scroll-Animation zu erstellen Wenn jemand nach unten scrollt, passiert etwas und wenn er wieder nach oben scrollt, wird es wieder so sein, wie es war Um das zu tun, benötigen wir einen Seitentrigger. Den, den wir verwenden werden, ist, während die Seite scrollt, diesen hier. Ich klicke darauf und dann wählen wir eine Aktion und klicken auf Scroll-Animation abspielen Ich habe keine aktuellen Animationen, die erstellt wurden, und das ist eine Stelle, an der Flow Ihnen im Allgemeinen keine Standardeinstellungen Sie müssen mit ihnen von Grund auf neu bauen. Wir werden eine neue Animation erstellen. Wir werden hier auf das Plus-Symbol klicken und wir werden auf die Hintergrundfarbe klicken. Sie können hier sehen, dass es mir zwei Stellen gegeben hat , an denen ich die Hintergrundfarbe bestimmen kann. In diesem ersten Fall werden wir die Hintergrundfarbe auf vollständig transparent setzen , so wie sie war, und das ist 0%. Und der Prozentsatz gibt an, wie weit wir auf der Seite nach unten scrollen Dann die zweite hier, wir werden auf etwa 5% steigen. Wir werden es auf 4% machen Dann werden wir es für diesen komplett weiß machen. Jetzt werden wir die Live-Vorschau einschalten. ich dann scrolle, können Sie sehen, dass die Navigationsleiste jetzt weiß wird , und das ist alles, was wir hier tun. Aber das macht einen großen Unterschied für die Benutzererfahrung und die Barrierefreiheit insgesamt. So wie es zuvor war, konnte es in diesem Fall nicht veröffentlicht werden , aber es kann. Also muss ich nur sicherstellen , dass wir das speichern und dass es aktiv ist. Wie Sie hier sehen können, werden wir hier aktivieren, was wir tun werden , ist hier, Sie werden es nicht im Designer sehen, aber wenn Sie hier oben auf die Play-Taste drücken, und das ist nicht das, wonach ich wirklich suche, diese 50% hier oben, Sie können als Scrollen sehen, dass es sich ändert, was perfekt ist. Das ist genau das, wonach wir suchen. Und du kannst hier sehen, dass es sich ändert, wenn wir anfangen zu scrollen , und genau danach suchen wir. Das ist es Diese Seite ist so gut wie fertig. Ich bin absolut zufrieden mit dieser Seite. Wenn ich alle Zeit der Welt dafür hätte, könnte ich es viel besser machen, aber insgesamt denke ich, dass dies eine wirklich gute Demonstration dessen ist was Sie in Webflow tun können, wenn Sie ein Anfänger sind, und es ist eine wirklich gute Übung, der Sie folgen Das ist es. Ähm, okay. Und das ist es. Im nächsten Video werde ich mit Ihnen über die Seitenstiche für diese Website sprechen und nur mit Ihnen darüber sprechen, wie Sie sie veröffentlichen und live schalten Aber danach, ja. Hoffentlich sollten Sie mit Webflow inzwischen an einem besseren Ort mit Webflow inzwischen und viel mehr über die Plattform erfahren . Wir sehen uns im nächsten Video Okay. 14. Lektion 12 Deine Website veröffentlichen: Jetzt, wo wir unsere Landing Page fertiggestellt haben, Sie vielleicht in der Position dass Sie bereit sind, dies zu veröffentlichen. Ich werde Ihnen also schnell zeigen, wie das geht. Also, bevor wir überhaupt damit deine Domain zu verbinden oder so, werde ich dich nur für eine Sekunde zum Seitensatz überführen . Also gehen wir zu Seiten und hier. In Ihrem Titel-Tag wäre dies im Allgemeinen die Startseite, aber hier möchten Sie für Sie den Markennamen optimieren , der Tesla sein könnte. Dann würden wir heute Modell C hinzufügen oder Modell C bestellen oder so. So etwas in der Art. Und dann hättest du hier eine Beschreibung. Dieses Titel-Tag und die Beschreibung können Sie dann als Methodenbeschreibung im Titel-Tag festlegen . Wenn Sie ein Bild haben , das Sie hinzufügen möchten, würden Sie es nehmen. Ich zeige es Ihnen nur als Beispiel. Also nehmen wir einfach dieses. Es wird es wahrscheinlich nicht tun, weil es nicht die Rechte sind, die Sie kopieren, die zu Ihrem Seitensatz zurückkehren. Und dann würdest du die URL hier einfügen. Ordnung. Das funktioniert. Okay. Also kannst du es dort sehen. So würden wir auftauchen, wenn die Leute es in den sozialen Medien teilen würden. Dann kannst du hier unten jeden beliebigen benutzerdefinierten Code hinzufügen. In diesem Fall werden Sie das wahrscheinlich nicht tun, aber wenn Sie etwas hinzufügen müssten , würden Sie es hier hinzufügen. Und dann einfach speichern. Jetzt wäre diese Seite bereit für die Veröffentlichung, aber nehmen wir an, Sie haben ein ganzes Projekt, Sie hätten eine Menge davon zu tun und Sie würden wahrscheinlich etwas sorgfältiger darüber nachdenken wollen , wie Sie SEO angehen werden. Wenn wir jetzt veröffentlichen wollen, gehen wir einfach hier rauf und veröffentlichen, können wir es auf unserer Staging-Domain veröffentlichen Ich werde das jetzt einfach machen. Jedenfalls. Dann hier unten zur Produktion. Staging, das ist Ihre Staging-Domain, und dann würden wir es in Produktion nehmen wollen , wenn wir fertig sind, würden wir eine benutzerdefinierte Domain hinzufügen wollen Wenn wir uns in den Seiteneinstellungen befinden, müssten Sie einen Seitenplan auswählen Preisstruktur von Weblos hängt im Allgemeinen davon ab , dass du für einen Workspace bezahlst Dafür gibt es unterschiedliche Stufen , und innerhalb dieser zahlst du, wenn du bereit bist, eine einzelne Website zu veröffentlichen, für einen Seitenplan. Derjenige, für den ich normalerweise den Tarif wählen würde, den ich normalerweise empfehlen würde, ist der CMS-Plan. Sie können monatlich oder jährlich zahlen. Wenn Sie buchstäblich nur etwas veröffentlichen dem ähnelt, was wir gerade gemacht haben, würden, das dem ähnelt, was wir gerade gemacht haben, bräuchten Sie nicht die CMS-Version, sondern nur die Basisversion. Und der Grund dafür ist , dass wir den CMS-Webflow nicht wirklich verwendet haben den CMS-Webflow nicht wirklich verwendet Wir haben keine Sammlungen erstellt. Es gibt keine dynamischen Inhalte. Davon brauchen wir nichts. Sie würden also einfach den Basisplan verwenden. Aber hoffentlich hilft Ihnen das, ein bisschen mehr Kontext dazu zu geben. das Hinzufügen der Domain angeht, würden wir zur Veröffentlichung übergehen, ich bin mir sicher, dass dies der Fall ist. Sie müssten also einen Lageplan hinzufügen , bevor wir das alles tun können. Aber ich werde dir ganz schnell eine andere Seite zeigen. Ich zeige dir den Ambio, damit du genau weißt, wie er aussieht Wenn ich hier drüben hingehe, kannst du hier sehen, dass ich Ambu als Standard habe, und ich habe auch able als weitere Domain, die ich verwenden kann Um diese hinzuzufügen, müssen Sie nur ein paar TXT-Einträge und einen Namenseintrag einfügen , den Sie darin einfügen Ich verwende zum Beispiel Name Sheep, füge das zu Name Sheep und dann kann ich die Domains im Webflow verwenden. Und das ist alles. Das würden Sie tun, um zu veröffentlichen, wenn Sie Ihre Domain erstellt haben . Sie wählen eine aus, die Sie veröffentlichen möchten , und dann eine Schaltfläche „ Veröffentlicht“, und dann können Sie loslegen. 15. Fazit Nächste Schritte: In Ordnung, wir sind jetzt also am Ende dieses Kurses. Zuallererst möchte ich mich bei Ihnen dafür bedanken, dass Sie sich die Zeit genommen haben, diesen Kurs zu absolvieren Und jedes Feedback, das Sie zur Qualität geben können und zu allem, was ich tun kann, um sie zu verbessern, wäre sehr, sehr willkommen. Davon abgesehen sind Sie jetzt hoffentlich in einer Position, in der Sie weitermachen und Ihre Fähigkeiten in Webflow weiter ausbauen und ein besserer Designer Wir haben alles von der Webflow-Benutzeroberfläche bis hin zur Funktionsweise der Plattform behandelt . Also das Box-Layout und all die anderen einführenden Komponenten, über die Sie Bescheid wissen müssen, damit Sie effektiv auf dieser Plattform aufbauen können effektiv auf dieser Plattform aufbauen Wenn Sie sich in einer Position befinden, in der Sie beispielsweise ein Kleinunternehmer sind und versuchen, Ihre Website zu erstellen, aber vielleicht immer noch das Gefühl haben, nicht über alle erforderlichen Fähigkeiten zu verfügen, um die gewünschte Website zu erstellen, können Sie sich gerne an mich wenden und ich helfe Ihnen gerne weiter. Oder hinterlassen Sie einfach, was Sie zu sagen haben, im Kommentarbereich dieses Kurses, und ich werde mich so schnell wie möglich bei Ihnen melden. Aber insgesamt macht es mir sehr viel Spaß, diesen Kurs zu unterrichten, und ich kann es kaum erwarten, in naher Zukunft weitere Inhalte wie diesen zu veröffentlichen . Also danke, und wir sehen uns im nächsten