Grundlagen von Webflow: Leitfaden für Anfänger:innen zum Aufbau attraktiver Websites

1. Einführung in den Webflow: Hallo zusammen, mein Name ist Dan Scott und gemeinsam werden wir lernen, wie man reaktionsschnelle, schöne und zugängliche Websites in Webflow erstellt . Jetzt richtet sich dieser Kurs an Personen, die der Workflow-Software noch nicht vertraut sind. Und für diejenigen unter Ihnen, die mit Webdesign im Allgemeinen noch nicht vertraut sind , erstellen Sie zunächst eine einfache einseitige Website. Und in den Grundlagen von Layout und Animation verwenden Webflow ist keine Code-Software, alles ist visuell gestaltet, Sie werden lernen, wie Sie Ihre Website auf Desktop, Tablet, und mobil. Sie lernen CSS-Klassen für Layout und Schriftstil sowie die Bedeutung von Klassenbenennungskonventionen kennen. Wenn Sie jemand sind, der Workflow nur ein bisschen benutzt hat , okay? Und du wirst Dinge wie Grid und Flicks sowie Spalten und Entwickler finden . Es ist ein bisschen schwierig zu wissen, welches man benutzen soll. Ich mache mir keine Sorgen, ich verspreche, dass Sie, mein Freund, am Ende dieses Kurses wissen, wann Sie welches NY verwenden müssen. Anschließend gehen Sie unser größeres Projekt in Angriff, bei dem Sie Ihre eigene Portfolio-Website erstellen. Hier fangen Sie auch an, komplexere Animationen, zeitgesteuerte Animationen, Parallaxenanimationen und ausgefallene Animationen zu erstellen . Sie lernen, Formulare zu erstellen und zu stylen. Einige von Ihnen haben vielleicht einige Kenntnisse in Figma oder Adobe XD, und ich zeige Ihnen, wie Sie diese Designs in eine Workflow-Website konvertieren können. Aber wenn Sie Figma wissen, was XD für den Kurs nicht unbedingt erforderlich ist, werden Sie lernen, dass Sticky Navs E0-Symbole, Marken-Floats, rote bis grüne Farbverläufe und Comic Sans sind. Aber es ist falsch mit Comic Sans Impact. Sobald wir also die Grundlagen des Webflows hinter uns haben , schauen wir uns die Erstellung einer dynamischen CMS-Website an. Wir werden einen Blog erstellen. Okay, Sie lernen, wie Sie einen neuen Stil erstellen und dann die Verantwortlichkeiten dieser Website an Ihren Kunden, Ihren Kunden, Ihren Mitarbeiter, Ihre Zimmerpflanze übergeben dieser Website an Ihren Kunden, . Sie können sich anmelden und ohne Ihre Hilfe eigene Änderungen an der Website vornehmen und ihre eigenen Blog-Beiträge erstellen der Website vornehmen und ihre eigenen Blog-Beiträge erstellen. Am Ende des Kurses nutzen Sie dann Ihre medizinischen neuen Fähigkeiten, um einen E-Commerce-Shop zu erstellen und Einkaufswagen, Bestellformulare und Zahlungsgateways zu erstellen und zu gestalten. Sie lernen den Verkauf physischer und digitaler Produkte sowie den Verkauf von Dienstleistungen kennen. Wenn Sie da sitzen und globale Klassenfilme, Grids, Float denken , klingt das alles viel zu heiß. Tür. Denken Sie daran, wir beginnen gleich am Anfang und arbeiten uns Schritt für Schritt durch. Dieser Kurs richtet sich an alle , die Websites und Workflows erstellen möchten. Möglicherweise haben Sie nur eine Website oder Geschäft, das Sie für sich selbst oder für einen Kunden erstellen müssen . Oder vielleicht möchten Sie ein Vollzeit-Webdesign werden, oder vielleicht sind Sie bereits Freelancer und müssen Ihr Angebot als Freelancer erweitern. Ich nehme während dieses Kurses Aufgaben ab, damit Sie das Gelernte üben und Dinge für Ihr Portfolio aufbauen können. Ordnung, es ist an der Zeit, sich selbst zu aktualisieren. Gehen Sie von Websites Null zu Webflow Hero. 2. Erste Schritte mit dem Webflow-Tutorial: Ordnung, erste Schritte. Als Erstes gibt es einige Übungsdateien. Auf dieser Seite wird es hier einen Link geben. Laden Sie diese herunter. Es gibt die Dateien, die wir für diesen Kurs verwenden. Ordnung, der Software-Workflow ist eigentlich browserbasiert. Gehen Sie also zu, Sie können diesen Link hier verwenden wenn Sie sich anmelden möchten. Es ist ein Affiliate-Link. Also Webflow gibt mir sein Honorar dafür zu finden oder gehe einfach direkt zum Workflow, melde dich dort für ein Konto an. Anmeldung ist kostenlos. Es ist Mac oder PC, weil es browserbasiert ist. Ich verwende Google Chrome. Überprüfen Sie die Browser-Spezifikationen von Webflow, ob sie Ihren Browser unterstützen, ob Sie Safari oder Edge oder etwas anderes verwenden, aber ich verwende Chrome in diesem Kurs. bezahlte versus kostenlose Workflow hat also sowohl einen kostenlosen als auch einen kostenpflichtigen Workflow. Für diesen speziellen Kurs werden wir den Kurs so weit wie möglich mit der kostenlosen Version beginnen . Und es gibt einen Punkt, an dem wir die zusätzlichen Funktionen benötigen und uns für die kostenpflichtige anmelden. Wenn ja, können Sie zwei Optionen wählen. Du kannst alle kostenlosen Sachen machen und dann einfach die bezahlten Sachen ansehen und entscheiden, ob es sich um eine Ansicht handelt. Oder was nützlich sein könnte, ist, dass Sie sich für ein monatliches Konto bei ihnen anmelden können ein monatliches Konto bei , wenn wir zu den bezahlten Sachen kommen. Und dann kannst du nach ihrem ersten Monat entscheiden, ob es für dich richtig ist oder nicht und vielleicht danach jährlich wechseln. Aber ja, Sie können einen Teil dieses Kurses machen, sagen wir 20 bis 30% davon mit der kostenlosen Version. Und ich lasse Sie wissen, wenn wir die kostenpflichtige Versionslinie überschreiten . Jetzt wird der Workflow sehr schnell aktualisiert. Wenn es also irgendwelche Updates an der Benutzeroberfläche gibt, die nicht offensichtlich sind , und sieh dir die Kommentare unter dem Video um zu sehen, ob es etwas gibt oder ob es wirklich schlecht ist oder eine große Veränderung darstellt, werde ich noch einmal... nimm es auf, aber lass mich wissen, ob es irgendwelche Änderungen gibt und damit du anderen Menschen helfen kannst oder wenn es etwas gibt, das es nicht weiß, meckern, einfach Hühnchen zum Video zu sehen. Es gab ein kleines Update. Die andere Sache ist, ich spreche sehr schnell. Ich weiß nicht, ob ich gerade schnell spreche. Ich fühle mich ein bisschen entspannter. Ich bin am Anfang des Kurses etwas nervös, weil wir uns gerade getroffen haben, aber ich spreche schnell. Du wirst feststellen, dass es ein Zahnrad gibt und unten auf dieser Seite aller Videos. Du hast jemals die Geschwindigkeit geändert und mich auf den betrunkenen Dan verlangsamt . Es kann einfacher sein, wenn Englisch vielleicht nicht deine Muttersprache ist oder ich einfach schnell spreche. Manche Leute beschleunigen mich. Beides. Es klingt komisch nett, aber man gewöhnt sich daran. Und das Letzte war, oh, ja, ich, es gibt ein bisschen erklärende Workflows, was er für die nächsten Videos bewirkt. Wenn Sie das überspringen möchten, fahren Sie mit dem Video Gewicht fort. Sie werden nachsehen, haben es gefunden. Es heißt wie man seine erste Website und Webflow erstellt. Sie werden das also etwas weiter im Kurs sehen , wenn Sie nur zu dem Teil springen möchten , in dem Sie gerade anfangen möchten, Füllung zuzubereiten , kochen Sie mit dem ganzen Truthahn und Sie können dorthin springen. Andernfalls gehen wir einfach die nächsten Videos durch oder beantworten alle Fragen, die ich hatte bevor ich mit Webflow angefangen habe. Ich denke, es ist wichtig, zu formulieren, was es tut, was es tut. Häufig gestellte Fragen. Diego. Ordnung, nächstes Video. 3. Was ist Webflow?: Was ist also der Arbeitsablauf? Workflow ist eine Möglichkeit, Websites zu erstellen, und wo er sich auf dem Markt der Website-Erstellung befindet, wird als No-Code-Website-Builder angesehen. Es bedeutet also, dass Sie auf der einen Seite hier vollständig programmiert haben, Ihre Website, HTML, CSS, PHP, was auch immer Sie verwenden. Auf der anderen Seite sind hier eher Wix und Squarespace, wo es sehr Drag-and-Drop ist. Und sie kümmern sich um das gesamte Backend. Webflow befindet sich also irgendwie in diesem glücklichen Medium für mich, es schreibt schönen Code und gibt dir Zugriff auf den Code wenn du ihn willst, du musst es nicht. Aber und für mich als Webdesigner, der einen Großteil des Codes versteht, finde ich ihn sehr nützlich, weil er mir die volle Kontrolle gibt , wie die Codierungsseite. Wenn Sie Ihre eigenen programmieren, können Sie tun, was Sie wollen. Aber es dauert länger und es ist eine andere Art zu bauen, oder? Du bist ein Programmierer. Ich bin eher ein Designer. Was ich mag, ist Webflow, weil es mir ermöglicht, wirklich recht komplexe Websites zu erstellen, genau so sind, wie ich es möchte. Oder ich kann eher mit Vorlagen beginnen, wie diese Wix Squarespace-Welt funktioniert, okay? Workflows in der Mitte verbergen den Code vor Ihnen. Es ist zugänglich, wenn Sie es brauchen oder wollen, wenn Sie es weiter vorantreiben möchten. Und hat viel Tiefe. Codierung. Ihre eigene Website hat unendliche Tiefe. Du kannst machen, was du willst. Okay? Windströme in diesem Mittelweg von dir können so ziemlich alles tun, was du willst, alles, was normal ist. Sie können es im Workflow tun und es wird erweitert, wo und dann hier auf diesem anderen Set gibt mehr Drag-and-Drop für Leute, die eine Website für ihr Team oder ihren Verein erstellen möchten ihr Team oder ihren Verein oder geschäftlich, und möchte es nie wieder anfassen. Weil du dir eine schöne Vorlage aussuchen kannst und los geht's. Hier kannst du dir eine schöne Vorlage aussuchen und los geht's. Aber auch wenn du dieses andere komische Ding machen willst und dieses Ding auch hier. Und du wolltest so aussehen. Hier fließt es, setzt sich ein und es verbirgt den Code irgendwie vor Ihnen. Schreiben Sie guten Code. Nur für die Leute, die ausflippen die richtige Syntax und solche Sachen zu haben. Das ist also eine Sache bei dem, was Workflow ist. Das ist es, was Webflow ist, für wen ist es gedacht und wer nutzt es normalerweise. Normalerweise sind es Designer und Vermarkter, die Lage sein möchten, eine Website ohne die Hilfe eines Entwicklers zu erstellen . Sie haben vielleicht das Gefühl, dass sie nur alleine so weit kommen können , und dann wird es ziemlich schwierig, eine andere Person einzubeziehen und sie zu bezahlen. Design wird es daher häufig verwenden, um mehrere Websites für seine Kunden zu erstellen. Sie könnten andere Designarbeiten für sie erledigen. Möchte Websites erstellen, weiß nicht, wie man programmiert. Wir haben diese perfekte Lösung gesenkt. Kein Code, ziemlich komplexe Websites und es gibt dem Kunden Zugriff, um sie ebenfalls zu aktualisieren. Es ist also ein schöner Ablauf für einen Designer, Websites zu erstellen, und es wird immer beliebter bei Vermarktern, wo sie eine Idee oder eine Microsite oder etwas haben eine Idee oder eine Microsite oder etwas haben , das sie vielleicht schnell erledigen möchten. Okay? Und ich möchte es nicht zu einem wirklich großen Projekt mit anderen externen Dwell machen müssen. Es ist nichts Falsches daran, mit einem Entwickler zu arbeiten. Ich arbeite ständig mit dem Entwickler zusammen, um benutzerdefinierte Sachen zu machen. Aber mit Logos habe ich die Möglichkeit, alleine ohne Hilfe ziemlich weit zu kommen. Und Sie können den Workflow ein bisschen weiter vorantreiben und es ist nicht so, Sie können keinen Entwickler verwenden. Was Sie tun können, ist, Webflow zu nutzen und Sie werden wahrscheinlich 99% dessen bekommen, was Sie erledigen müssen. Aber für diesen seltsamen Randfall können Sie einen Entwickler um Hilfe bitten. Und es gibt immer mehr Entwickler, die Designern und Vermarktern speziell dabei helfen , dies ein bisschen weiter voranzutreiben , sodass Sie auch dort ein bisschen Gentleman sein können . Und auch Geschäftsinhaber nutzen Webflow, weil sie dadurch die volle Kontrolle übernehmen können. Sie lagern es nicht aus und spüren diese Trennung zwischen ihrer Idee, insbesondere am Anfang, und dem , was sie liefern wollen. Weil wir gehört haben, dass Sie E-Commerce- und datenbankgesteuerte Websites im CMS-Stil erstellen können , die traditionell Hilfe von anderen Personen benötigen. Der Workflow bringt alles in sich und ermöglicht es Ihnen, alles selbst zu erledigen. Lassen Sie uns darüber sprechen, wo es in den Webdesign-Prozess passt. Webflow wird also nicht zum Entwerfen einer Website verwendet. Das hättest du vorher machen sollen. Du machst es in etwas wie Figma oder XD oder Photoshop oder Microsoft Paint. Warum sollten Sie es zuerst in diesen entwerfen und vielleicht eine Kundenabzeichnung oder Ihre eigene Abmeldung erhalten? Und dann baue es anschließend in Webflow. Und nicht nur, weil es sehr schnell und einfach ist, etwas und so etwas wie diese anderen Tools wie Figma, XD, Photoshop zu entwerfen . Wir haben Kurse zu allem, die veranschaulichen, dass es egal ist. Jedes Tool, das Sie zum Entwerfen verwenden möchten. Es ist sehr einfach, Dinge zu bewegen und zu arbeiten, es ist viel strukturierter. Du musst irgendwie Sachen bauen, Bob, von Grund auf. Und es ist sehr schwer, Dinge zu ändern, aber etwas mit der Maus zu bewegen, anstatt ändern, wo es sich auf einer Website befindet, ist ganz anders. Und die beste Analogie ist, du willst ein Haus, okay? Sie könnten zehn davon entwerfen, und Sie könnten Blechhäuser bauen und entscheiden, welches Ihnen am besten gefällt. Oder Sie zeichnen ein Blechhaus und entscheiden, welches Ihnen gefällt, und dann eines bauen, um auf die Idee zu kommen. Es ist nicht so aufwändig, wie man es komplett entwerfen kann, und Webflow ist einfach keine gute Möglichkeit, dies zu tun. Zuerst etwas entworfen, Git Client genehmigt, abmelden, du kannst es testen lassen. Und diese anderen Programme, ich bin mir nicht sicher, warum sie hier sind. Diese Folie enthält all diese Leute, die Designsoftware und dann erstellen Sie sie und den Workflow. Sobald Sie Ihr Design lieben, können Sie unterwegs einige Änderungen vornehmen. Es ist nicht in Stein gemeißelt, aber ich hoffe du kommst auf die Idee. Arbeitsablauf für Planung, Bau. Und dann ist der Workflow die letzte Anlaufstelle. Du kannst dann sagen, hier ist eine Website, ich bin fertig. Das ist es, was Webflow ist, für wen es ist und wo es in den gesamten Webdesign-Flow passt. Wenn du sagst, oh, ich habe mehr Fragen. Oh ich, ich, ich. Gut. Weil ich noch ein Video habe. Ich werde alle häufig gestellten Fragen durchgehen , die mir die meisten Leute gestellt haben und die ich dazu hatte, als ich anfing Ich habe dieses Video gesehen. Ich hole mir eine Tasse Tee und komme wieder. Wir sehen uns in einer Minute. 4. FAQs für Webflow – Wie viel ist Webflow Teil 1: Hallo zusammen. Willkommen zum Video mit häufig gestellten Fragen. Was war das am Anfang, es ist wie ein Weg, wie Sie in diesem langen Video für all die verschiedenen häufig gestellten Fragen mitspringen können diesem langen Video für all die . Für viele von Ihnen haben Sie gerade das Ganze gesehen. Für einige von Ihnen. Du kannst es durchsehen. Geh ich weiß. Fahren wir mit dem nächsten Video fort. Auch für einige von Ihnen möchten Sie sich nur ein paar Dinge ansehen. Also hebe ich das gleich zu Beginn auf. So ist es einfach, zurückzuschrubben und zu sehen wo es sich befindet, und dann in der Zeitleiste weiterzumachen. Stellt das sicher, dass es Sinn macht? Nun, während wir das tun, liegt daran , dass es nur ein paar Fragen gab bevor ich zu Webflow gehe, die ich hatte und die ich irgendwann alles herausgefunden habe. Und ich dachte, das ist die Art von Sachen. Ich wünschte, es gäbe nur einen Ort für all das Zeug. Das ist also das, was dieses Video für dich ist. Hoffentlich beantwortet dies alle Ihre Fragen und Antworten an einem Ort. Geh einfach runter. Ordnung, die am häufigsten gestellte Frage zu Webflow ist der Preis. Ich werde hier nur aus Gründen der Konsistenz über US-Dollar und monatliche Zahlungen sprechen . Und lassen Sie uns zunächst mit einem kostenlosen gehen Die Vor- und Nachteile, die Vor- und Nachteile sind, dass Sie kostenlos arbeiten und eine Website erstellen und starten können. Du kannst nur zwei davon haben. Und der große Nachteil dabei ist , dass dies der erste Nachteil ist, dass diese beiden verschiedenen Websites, die Sie erstellen, nur zwei verschiedene Seiten haben können. Das ist ein Bußgeld für eine Zielseite oder eine Broschüre, Websites oder Homepage-Kontaktseite, Homepage wird ziemlich umfangreich. Und die Sache, die wir hier aufbauen ist, dass Sie sie ziemlich lang machen können. Zeige immer noch viel Inhalt für diese beiden Seiten. 2 Websites, nur zwei Seiten. Die Einschränkung besteht darin, dass Sie aufhören möchten zu zahlen, wenn Sie eine benutzerdefinierte Domain wünschen, da diese ersten beiden Websites veröffentlicht werden können, aber sie sind auf dem kostenlosen Konto aktiviert, aber sie sind auf Dan's tolle Webseite, Punkt Webflow, Punkt io. Das ist also die URL, die Sie angeben müssten. Es ist also nicht sehr professionell. Also, wenn du Dans tolle Website.com willst, okay. Sie müssen dann ein Upgrade auf 15 USD pro Monat durchführen. Okay. Und das ist dein Webhosting. Und es ist, als ob Sie ewig brauchen, Webhosting-Kosten, es kann bis zu 5 US-Dollar kosten. Aber mit Webflow erhalten Sie den Puck, alle Vorteile des Workflows. Sie müssen also von dort aus ein Upgrade für die Website durchführen, aber erst, wenn sie bereit ist, diese benutzerdefinierte Domain zu erstellen. Und ja, die nächste Art von Preissprung wäre in diesem Kurs, wenn wir ein CMS brauchen. Cms, wenn du noch nie eines benutzt hast, ist es wirklich gut für Dinge wie Blogposts. Nehmen wir an, wir wollen nicht jede Seite und jeden Webflow entwerfen. Wir möchten es dem Kunden geben und ihn dazu bringen , auf die Website zu gehen und einen Blog-Titel in einige Bilder und ihre eigenen Texte einzufügen. Klicken Sie auf Auf Website hochladen. Und sie haben nichts mit Webflow-Gates zu tun , die in ein CMS oder eine Datenbank hochgeladen und auf der Website angezeigt werden. Es erlaubt den Leuten also, nicht jede Seite zu programmieren und zu gestalten, gibt ihnen nur einen kleinen Bereich um Dinge wie WordPress hochladen zu können. Sie wechseln also zu etwa 20$ pro Monat, um zu diesem CMS zu gelangen, es gibt einen Bandbreitenverkehr. Die meisten kleinen Standorte werden diese Bandbreite also überhaupt nicht überschreiten. Aber wenn Sie eine Website mit sehr hohem Traffic haben, werden Sie möglicherweise aufgefordert, auf die nächste Stufe zu aktualisieren , weil sie so viel Verkehr bekommt, aber sie ist sehr beliebt und Sie verdienen eine Menge Geld wird dazu in der Lage sein. Andere Preisklassen, Es gibt viele verschiedene Skalen und er, ich wähle nur die wichtigsten aus, die ich am nützlichsten finde , wenn sie vom CMS zum E-Commerce wechseln. Also lass mich nachschauen. E-Commerce. E-Commerce ist etwas anderes , weil sie eine Menge verschiedener Dinge erledigen müssen. Um also eine leichte E-Commerce-Website zu erhalten, sagen wir, Sie stellen Kopfhörer her und möchten sie auf Ihrer Seite verkaufen, müssen Sie auf den 29-Dollar-Plan pro Monat umsteigen , denn genau das sind wir im Flow bleibt. Und es schaltet all ihre E-Commerce-Sachen frei. Du kannst direkt zu ihr gehen wie Was war das? Ja, das ist ein Monat. Sie können direkt zu dem teuersten gehen, den ich hier sehen kann , 212 US-Dollar pro Monat für E-Commerce. Und es geht runter zum Lake. Sie teilen es auf, wie viele Artikel Sie in Ihrem Geschäft haben. Und haben sie dir eine Transaktionsgebühr mitgeteilt? Tun sie das nicht? Alle möglichen anderen Sachen. Sie sich also einen kleinen Blick auf einen Preisnachlass von webflow.com an. Das sind die wichtigsten Punkte. Auch diese ändern sich, die Regeln ändern sich. Aber das sind die Art von 015, 2029 sind die wichtigsten Lebensmittelgruppen Sie möglicherweise für Webflow verwenden. Und wenn Sie denken, ich bezahle sie nicht, wenn Sie schon einmal Webdesign gemacht haben, wissen Sie, Sie brauchen eine Art Hosting und Sie benötigen Domainregistrierung und jemand wird müssen den E-Commerce für Sie erledigen. Du wirst irgendwo bezahlen. Das macht der Workflow. Es geht über das hinaus, was Sie bekommen können wenn Sie wirklich ein knappes Budget haben. Aber die Vorteile dafür sind ziemlich gut. Sie kümmern sich um das gesamte Patching. Du musst dir Sorgen um Server machen und ja, das war's. Das ist die Preisgestaltung. 5. FAQs für Webflow – Wie viel ist Webflow Teil 2: Lass uns über WordPress gegen Webflow sprechen. Was sind die Unterschiede? Welches solltest du benutzen? Lassen Sie uns also darüber sprechen , was sie beide sind. Wordpress wird im Wesentlichen als Blogging-Software gestartet , die Sie manipulieren können , um im Grunde alles zu tun. So viel auf der Welt wird von WordPress unterstützt. Es hat eine erschöpfende Tiefe, so viel Tiefe. Wenn all diese seltsamen Randfälle auftreten, können Sie wahrscheinlich ein WordPress-Plugin finden , das das löst. Wenn Flow eher der Kern dessen ist , was Sie für das Webdesign tun müssen. Aber keiner von ihnen mag winzig kleine Edge-Cases, oder zumindest ist es kein Click and Plug-In and Play. Du kannst WordPress dazu bringen, ziemlich viel davon zu machen. Und wenn Sie eine Person sind, die heute Nachmittag nur einen kurzen Blog haben möchte, hey, Blogging-Website hoch. Installiere einfach WordPress, wähle ein Plug-In oder wähle eine Vorlage aus, die du gerne installierst, und fange an, sie anzuschließen. Und wenn Sie möchten, wenn Sie ein Design haben, das Sie erstellt haben und das Sie bauen möchten. Mach es in WordPress. Denn wenn Sie diese Anpassung in Web, Wordpress, nehmen ihr Zeitdesign, Sie möchten, dass es perfekt ist. Oder zumindest haben Sie eine sehr gute Vorstellung davon , wie es aussehen soll. Und WordPress dazu zu bringen ist echt knifflig. Ich bin in Ordnung zu codieren und es ist immer noch ziemlich schwierig , WordPress dazu zu bringen, das zu tun, was ich will Und du musst in den Code einsteigen und so. Und zu sagen, dass WordPress, obwohl ich es nicht will, erstaunlich ist wegen all der Plug-Ins, die man braucht, um etwas zu tun. Wenn Sie ein Plugin benötigen, das Zahlungen akzeptiert, aber nur von seinem seltsamen Zahlungsgateway , das nur Ihre Landesbenutzer verwendet. Und es ist nur für Linkshänder, Sie werden wahrscheinlich ein Plug-In dafür finden. Während WordPress generische Zahlungen aus dem größten Teil der Welt entgegennimmt . Ja, das ist eine Menge Tiefe, ziemlich schwierig anzupassen, aber der Einstieg ist wirklich einfach. Wordpress, ziemlich einfach anzufangen. Das wirst du in diesem Kurs sehen. Ermöglicht es Ihnen aber, alles zu kontrollieren. Und du bist ein bisschen WordPress, guter Workflow, sehr gut. Und beide haben ihre Vor- und Nachteile, aber das ist, das ist der Überblick über diese beiden. welchem fängst du an? Du sagst, kann dein Kunde deine Webflow-Website ohne deine Hilfe aktualisieren ? können sie. Webflow hat zwei Seiten. Da ist die Designerseite, Sie, der Hersteller, der Schöpfer der Website. Und dann gibt es noch etwas, das sich Editor nennt. Und der Editor ist für Kunden oder Kunden gedacht und sie können die Website nach Bedarf aktualisieren. Sie brauchen keine Interaktion mit Webflow, okay. Sie können es auf der Website tun. Ich gebe dir die winzigste Demo. Nur um dir zu zeigen, was ich meine, los geht's. Webflow hat zwei Seiten. Da ist der Designer , der ich hier reingehe und sage: Weißt du, was ich tun muss? Ich muss diese Polsterung vergrößern, um sie zu bewegen und überhaupt zu entwerfen. Lass es gut aussehen. Ich veröffentliche die Website und dann der Kunde oder mein Kunde verwendet der Kunde oder mein Kunde etwas, das als Editor bezeichnet wird. Der Editor erlaubt ihnen als Kunde, nicht zu Ihnen zurückzukehren, sondern auf die Website zu gehen und auf Bearbeiten zu klicken und zu sagen , dass ich das ändern möchte. Das muss 2036 sein, okay? Und wenn ich eine Änderung vorgenommen habe, können sie sagen, dass sie sie veröffentlichen, und sie haben die Website veröffentlicht. Und das Coole daran ist, dass die Live-Website aktualisiert wird , sodass sich der Text ändert oder aktualisiert. Aber es wird sich auch hier in meiner Designansicht ändern . Da haben wir's. Das bedeutet also, dass Kundenänderungen auch für mich angezeigt werden. Wenn ich entwerfe, sehe ich, was sie geändert haben. Jetzt können sie Textbilder, Links und alles andere ändern. Sie können auch Blog-Beiträge hinzufügen , wenn Sie einen Blog eingerichtet haben oder Produkte hinzufügen Wenn Sie eine E-Commerce-Website eingerichtet haben, ist das hier ein nettes kleines Setup. Sie können Webflow Justin Design von Ihnen verwenden und nur für sich selbst, okay, wenn Sie Ihr eigenes Portfolio aufbauen und den Editor nie berührt haben. Wenn Sie jedoch einem Kunden übergeben möchten, hat dieser die Möglichkeit, die Website zu aktualisieren ohne sich jedes Mal bei Ihnen melden zu müssen. Kann der Kunde die Website aktualisieren? Ja, das können sie. Ohne deine Hilfe, Phantasie. 6. FAQs - Wie viel ist Webflow Teil 3: Die Frage ist, kann ich meine Webflow-Website auf meinem eigenen Server oder meiner eigenen Hosting-Plattform hosten? Ja, begrenzte Anwendungsfälle. Und wenn Sie etwas und einen Workflow wie eine statische Website und vielleicht ihr Portfolio erstellen möchten. Und du schaffst es einfach und du wolltest es nicht auf deinen eigenen Gastgeber kleben. Absolut machbar. Wenn Sie Aktualisierungen an dieser Website vornehmen möchten, können Sie entweder den Code auf dieser Seite hacken, okay, wenn Sie über grundlegende HTML- und CSS-Kenntnisse verfügen, können Sie das auf Ihrem eigenen Host tun und vergessen workflow jetzt, habe es einfach benutzt, um es zu machen. Wenn Sie Webflow weiterhin verwenden möchten, um Änderungen vorzunehmen, können Sie in Webflow gehen und sagen: OK, ich möchte das verschieben oder das nächste Projekt hinzufügen und alles auslegen und dann das Codon in Ihr eigenes exportieren Gastgeber. kannst du auf jeden Fall tun. Die Einschränkung besteht darin, dass Sie ein CMS wünschen, der Kunde sich anmelden kann oder wenn wünschen, der Kunde sich anmelden kann Sie Beiträge bloggen möchten. Wir werden unsere Blogposting-Website erstellen. Und wir werden auch einen E-Commerce schaffen. Beide Funktionen müssen auf Webflow gehostet werden. Sie durchsuchen nicht alle Datenbanken und Dinge, damit das für Ihre eigene Website funktioniert. Statische Websites sind also perfekt. Alles, was entweder Funktionen wie Kundenanmeldung oder ein CMS zum Hochladen unserer Blog-Beiträge oder E-Commerce erfordert wie Kundenanmeldung oder ein CMS zum Hochladen unserer Blog-Beiträge oder E-Commerce mit wenig gehostet werden muss, damit das funktioniert. Also ja und nein. Können Sie Ihren eigenen Code in Inflow importieren? Ja oder nein? Nein. Sie können Ihre vorhandene Website nicht abrufen und in Webflow einfügen, Anpassungen vornehmen und sie dann wieder ausspucken. Sie können keine ganze Website importieren, also tut es das nicht. Was Sie im Workflow jedoch tun können, ist, dass Sie es in Ihren eigenen benutzerdefinierten Code einfügen können. Möglicherweise haben Sie also Code , der in das Head-Tag oder in den Textkörper einer bestimmten Seite oder Seiten eingefügt werden muss . Sie können Ihren eigenen Code in Seiten einfügen, um kleine Code-Bits einzufügen , aber nicht die gesamte Website in Webflow zu importieren. Du gehst, kann ich eine Mitgliedschaftswebsite in Webflow erstellen? Irgendwie noch nicht. Es ist in der Betaphase. Es könnte inzwischen draußen sein, je nachdem, wann Sie sich das ansehen. Zum Zeitpunkt dieser Aufnahme sie sich in der Beta-Phase, also arbeiten sie daran. Also ist es wahrscheinlich inzwischen draußen. Ja, das kannst du. Im Moment können Sie einen passwortgeschützten Bereich Ihrer Website erstellen , der bereits in Webflow funktioniert und Mitgliederseite kommt oder veröffentlicht wird. Jetzt geh mal nachsehen. Sie gehen. Das ist die Antwort. Kann ich meinen eigenen benutzerdefinierten Domainnamen mit Webflow verwenden? Können sie dir einen als Teil der kostenlosen Teil - und Entwicklungsseite von Webflow geben. Und das ist wie Dans tolle Website dot Webflow, Punkt io. Den kannst du benutzen. Jeder möchte jedoch seine eigene benutzerdefinierte Domain , Dan's amazing website.com. Und ja, du kannst sie verbinden. Verkaufen sie sie? Wissen Sie, wie man sie einrichtet? Ich werde Ihnen später im Essentials-Kurs zeigen, aber es ist machbar. Ja, schon wieder, in Ordnung. Weiter. Behandelt Webflow Ihre E-Mail-Adressen? Du hast Dans tolle Website.com. Okay. Du willst Dan auf Dans toller Website.com? Unser Workflow bearbeitet die E-Mail nicht für Sie. Du brauchst etwas anderes. Die meisten Benutzer verwenden Gmail - oder Google-Arbeitsbereiche. Das benutze ich, ist sehr verbreitet. Oder regeln Sie Ihr eigenes E-Mail-Hosting. Sie übernehmen also nicht die E-Mail-Verwaltung für Sie. Sie können einfach Ihr Google Mail-Konto verwenden und keinen speziellen Dan an der speziellen E-Mail von website.com erhalten speziellen Dan an der und einfach Ihr Gmail verwenden. Die andere Sache ist, dass sie Dinge wie zum Beispiel eine Bestellung über Ihre Website erledigen , jemand einen Kauf tätigt. Sie kümmern sich die Bestellung abzuholen und sie Ihnen per E-Mail zu senden und Ihnen einen Bereich zum Anmelden zu geben , um alle Ihre Bestellungen zu sehen. Sie verarbeiten also nicht ganz E-Mails, aber sie mögen diese Transaktionen. gleiche gilt für ein Formular. diesem Kurs zeige ich Ihnen, wie Sie ein Formular erstellen. Und wenn jemand Hallo sagt, mein Name ist Daniel Scott und ich möchte dich engagieren und einreichen. Es wird das verarbeiten, das eine Kopie davon enthält, und sie wird es Ihnen zusenden. Welche E-Mail-Adresse auch immer Sie an Ihr Gmail oder Hotmail senden möchten , Yahoo oder würde es verwenden? Okay, also werden sie diesen Anreiz verarbeiten, um ihn zu nutzen. Du verstehst den Kontext. Sie bearbeiten das Formular und senden es an Ihre E-Mail-Adresse. Sie sortieren Ihre ausgefallenen E-Mail-Adressen nicht aus, aber sie verarbeiten und senden Dinge an Ihre bestehende E-Mail-Adresse. Ist Webflow gut für SEO? Ja. Ich bin eine relativ qualifizierte ACO-Person, lange damit befasst, einigermaßen gut. Und es macht die Grundlagen sehr gut. Workflow auf Seite, auf Seite SEO und tatsächlich ziemlich tief in Bezug auf Wasser kann tatsächlich für Ihre Website SEO tun . Die Antwort lautet also ja, das tut es. Website auf Seite SEO. Sehr gut. Ich werde sagen, extrem eifrig. 7. Wie du deine erste Website im Webflow erstellt: Hallo zusammen. Wir werden unsere erste Website in Webflow erstellen. Es wird so super einfach sein und wir werden es nicht wirklich so sehr bauen , sondern viele der vorgefertigten Sachen in Webflow verwenden. Und ich mache das, weil ich einen wirklich guten Überblick darüber haben möchte , wie der Prozess abläuft, wie man eine Website startet, wie man Dinge hineinlegt, wie man sie veröffentlicht, wie man sie in der Vorschau anzeigt? Okay, deshalb ist es ein kurzes Video und wir werden es ziemlich schnell hören , weil es nur ein paar Grundlagen gibt. Ich möchte Ihnen den gesamten Prozess in einem wenig zeigen und Ihnen die Hauptbereiche zeigen, die Sie verwenden werden , bevor wir uns den grundlegenden Dingen von Webflow befassen. Netter kurzer Überblick. Es wird entweder sehr hilfreich sein , wenn du sagst : Oh ja, das war gut. Ich kann jetzt ein Gefühl dafür bekommen, wo wir reingehen oder es wird zu schnell und sehr verwirrend sein. Ich bin mir noch nicht sicher, welches es ist, also fangen wir gleich an. Je nachdem, wo Sie anfangen, Sie vielleicht hier, Sie können eine neue Site starten. Sie könnten tatsächlich nur in diesem Fenster landen. Du kannst mit Vorlagen beginnen, was später großartig sein wird, wenn du großartig bist. Aber jetzt fangen wir einfach mit einem kostenlosen Projekt an. Du kannst, ich werde es nur vorführen. Sie können zu diesem Zeitpunkt mitmachen, wenn Sie möchten, aber wir werden das, was ich machen werde, ablegen. Es ist eher ein vollständiges Walk-Through-Mitglied, nur um Ihnen einen Eindruck davon zu vermitteln, was in der Zukunft liegt. Das ist also der Designer. Willkommen! Hier werden Sie die meiste Zeit verbringen. Ja, es ist wie vier Hauptorte, an denen man Sachen finden kann. Ich werde dir jetzt drei zeigen und einer später, der den Herausgeber angerufen hat. Lass uns später im Kurs sein. Aber die wichtigsten, die Sie jetzt als Designer benötigen, hier können wir Dinge hinzufügen und zeichnen. Also gehe ich hier rein und sage diesen kleinen Plus-Button und ich kann sagen, dass ich drücken möchte und dann will ich den Knopf. Denken Sie daran, dass dies nur eine kurze Verlangsamung ist , wenn Sie möchten. Dieses Video dient nicht dazu, Ihnen einen umfassenden Überblick zu geben. Bevor wir uns mit dem Detail befassen, werden Sie, der Designer, Sachen machen und Designarbeiten erledigen. Die andere Stelle, die nützlich ist, ist sagen wir hier oben in der Ecke Sind Ihre Projekteinstellungen. Das ist also unser Projekt, okay, das ist mein Projekt. Ich kann in diese Einstellungen gehen und es gibt viele wichtige Dinge. Meine heißt also Dan's Awesome Seite. Und wir haben einen Button und klicken hier darauf, allgemeines Zeug, den Namen deiner Website, sie haben Symbole. Okay. Beobachten Sie, wo Sie ansässig sind, all diese Dinge. Und Mitglieder sind ein Bereich für, vielleicht haben Sie es ein anderes Design, das Ihnen oder Ihrem Kunden hilft Ihrem Kunden Ihre Abrechnung zu veröffentlichen, Dinge, die Sie für die Website ändern können, für SEO, jedes Formular Einreichungen. Ich denke, es ist noch nicht bereit, es durchzugehen , es ist eher so dieser Abschnitt hier viele wichtige Dinge enthält , dass Sie, wenn Sie anfangen, sagen werden, wo ist das? Es ist in Ihren Einstellungen, Ihren Projekteinstellungen. Okay, also lasst uns zurück zum Designer für dieses Projekt namens Daniel is awesome site gehen. Es gibt ein paar Möglichkeiten, überall hin zu gelangen. Es ist in Ordnung, denk dran Designer, ich kann zu meinen Projekteinstellungen gehen, okay, aber nehmen wir an, Sie haben zwei Projekte. Du arbeitest mit drei Kunden, zehn Kunden, du bist großartig. Okay, du kannst zu deinem Armaturenbrett gehen. Sie werden ziemlich oft hier landen, wenn Sie Workflow nach einer Weile laden, abmelden oder ihn verlassen und ihn schließen und hierher zurückkehren, Sie werden hier landen. Im Moment habe ich eine Website, Sie werden am Ende mehrere Websites hier haben. Wenn Sie von hier aus mehrere Websites erstellen, können Sie meistens einfach darauf klicken und zu dem Designer gehen, bei dem wir zuvor waren. Oder Sie gehen direkt zu den Projekteinstellungen. Da ist es, die Einstellungen dieses Projekts. Das sind also die drei Teile, der Designer, die Einstellungen und dieses Dashboard. Du wirst zwischen all diesen Dingen umschalten, diese Dinge hier sind, das ist wichtig. Diese Dinge hier, coole Websites, die Designer dazu gebracht haben , dass Sie ihren Bildungsteil einstellen könnten , das ist der Hauptteil. In diesem Dashboard können Sie Ihr Projekt und einen Designer, Diego, öffnen. Das sind also die Hauptbereiche. Und die anderen wichtigen Dinge, die ich behandeln möchte , sind, dass ich darauf klicke und einfach auf meiner Tastatur lösche. Und ich möchte diese Teile hier kurz durchgehen. Sie haben also Elemente und Layouts. Elemente sind die Bausteine , mit denen Sie arbeiten werden. Sie werden anfangen, einen Container zu erstellen. Und dann kannst du in diesen Container deine Überschriften legen , damit sie nicht treffen, war ganz da drüben. Wenn du anfängst, deine Website zu erstellen, sagst du , okay, was brauche ich noch? Wir brauchen. Einfaches Zeug. Ich brauche ein Bild. Okay, lass uns unser Bild einbauen. Ich habe es verpasst, bring es in die richtige Gegend. Sie beginnen mit dem Aufbau Ihrer Website durch diese Elemente und hier sind viele enthalten, es gibt Formulare. Du kannst sehen, dass es Nav-Menüs gibt, allerlei coole Sachen , die wir in diesem Kurs lernen werden. Layouts lassen mich diese Layouts löschen, schummeln nicht, sondern sind vorgefertigte Chunks. Du willst ein klebriges Nap oben drauf haben. Bumm. Du willst ah, Layouts. Du willst eine Helden-Sektion? Fußzeile? Wo gehe ich hin? Da haben wir's. Plus Layouts. Fußzeile. Okay, du hast schon eine ziemlich komplexe Seite am Laufen. Und das Coole daran ist, ich dir zeigen werde, dass das deine Vorschau ist. Das ist also der Designer. Das bin ich mit all der Bearbeitung und viel Müll überall. Sie können in der Vorschau alles bereinigen, wie es für den Endbenutzer aussehen wird , indem Sie auf diesen kleinen Augapfel klicken. Los geht's. Es wird so aussehen, als ob du es hier sehen kannst. Ich kann nicht viel machen. Es ist nicht schön, aber es ist ein Großteil der Struktur da. Wenn Sie beispielsweise zu dieser mobilen Ansicht wechseln , können Sie das Navi sehen? Ändert es sich? Jeder Stapel, die Bilder stapeln sich irgendwie anders darauf. haben einen Großteil der Arbeit für Sie erledigt, indem Sie diese Layouts verwendet haben, um aus der Vorschau herauszukommen . Klicken Sie erneut auf den Augapfel. Elemente, alle einzelnen Bits, Layouts sind alle einzelnen Bits, die miteinander verbunden sind. Das trifft immer noch, und das sind immer noch einige Texte und das ist immer noch ein Knopf. Aber es ist zentriert. Nun, sieh dir an, das scheint in die Box zu passen. Es ist also nur eine Art zu springen, zu überspringen. Jetzt kannst du es noch nicht tun. Du könntest. Das Problem ist wie, okay, ich möchte das bekommen, ich möchte das löschen, okay, ich möchte das ganze bisschen löschen. Wir löschen sie einfach alle. Warum ist das da drüben gesprungen? Es gibt viele Dinge, die sehr hilfreich sind, wenn Sie wissen, was Sie tun. Am Ende dieses Kurses können Sie all dies nutzen und wissen, was die Floater sind und was die Floater sind und warum Flexbox dies in der Mitte hält. Es ist nicht schwer, du musst es nur lernen. ist also cool, zu diesen vorgefertigten Sachen oder Vorlagen anderer Leute zu springen Es ist also cool, zu diesen vorgefertigten Sachen oder Vorlagen anderer Leute zu springen. Aber erst wenn Sie einige Grundkenntnisse haben, werde ich Ihnen einige Grundkenntnisse vermitteln, damit auch Sie Zeit sparen können, indem Sie Vorlagen kopieren oder Websites klonen oder diese großen Layout-Chunks verwenden. Gibt es noch etwas, das ich dir zeigen wollte? Also die Bausteine des Elements, Layouts, Betrug, okay, Vorschau. Und der andere veröffentlicht, okay, also hier oben können wir es veröffentlichen und es kann von Leuten im Internet gesehen werden. Es wird diese Art von seltsamer Domain benutzen. Wie ich bereits im Kurs sagte, können Sie Ihre eigene benutzerdefinierte Domain verwenden. Aber im Moment werden wir das benutzen. Und Sie können es veröffentlichen und die Leute können es sehen. es nur für Sie in der Vorschau veröffentlichen Sie es der Welt. Baue es mit Elementen. Schummeln mithilfe von Workflows, Elementen, die bereits erstellt oder irgendwie vorgestaltet und einsatzbereit sind. Okay, das ist mein kurzer Überblick über das Erstellen von etwas in Webflow. Der gesamte Prozess ist sozusagen kurz. Vergessen Sie auch nicht die Orte, an denen Sie sein müssen. Denken Sie daran, dass Ihre Projektsitzung alles über dieses spezielle Projekt dreht. Okay, zurück zum Dashboard um all die verschiedenen Projekte zu sehen, an denen du gerade arbeitest und über die der Redakteur später sprechen wird. Dies ist die Ansicht , die Ihr Kunde möglicherweise sieht , wenn Sie ihm Zugriff auf die Aktualisierung der Website gewähren. Sie haben vielleicht nicht vor, das zu tun, aber das ist ein weiterer Teil. Ordnung, ich hoffe das hat geholfen, hat nicht geholfen. Ich weiß es nicht. Ich finde, ein kurzer kleiner Überblick ist schön zu sehen, wohin alles führt, sonst wird es die Akademie verwirren. Es ist das eine oder andere. So oder so, gehen wir zum nächsten Video und fangen an, etwas von Grund auf neu zu erstellen , damit wir Webflow kennenlernen. kleiner Bonus, denke ich, als wir herausfinden, wie man eine Website löscht, weil das alles ist, wofür sie gedacht war, war, etwas hochzubringen und es zusammenzuwerfen. Wenn du also etwas gemacht hast, löschen wir es. Also gehe ich zurück zu meinem Armaturenbrett. Und ich sage, hier sind alle meine Projekte. Diesen speziellen werde ich löschen. Man muss in all dem sehr tippig sein , weil es sehr wichtig ist, weil sie es löschen und man es nie zurücklassen würde. Kopiere das nicht und füge es nicht ein, denn das ist Betrug. Ordnung, wir sind also aufgeräumt und bereit, in Webflow richtig zu starten. Wir sehen uns im nächsten Video. 8. Kursprojekt 01 - Erstellen eines eigenen Webflow: Hallo zusammen. Wir machen das Alpha-Klassenprojekt. Es ist nett einfach. Es wird nur ein Briefing erstellt, mit dem Sie mir in diesem ersten Abschnitt des Kurses folgen können. Und ich will nicht, naja, es macht keinen großen Spaß. Wenn wir alle genau dasselbe machen. Wir werden die gleiche Struktur haben, aber ich möchte, dass jeder seinen eigenen Kunden und seinen eigenen Auftrag und seine eigenen Farben hat , damit er einzigartig ist und Sie ihn für Ihr Portfolio verwenden können. Jetzt sind alle Unterrichtsprojekte in Ihren Übungsdateien aufgeführt. Es gibt ein vollständiges PDF namens Klassenprojekte, sodass Sie zu etwas gelangen können , das so aussieht. Der erste ist Gehe zum Zufallsprojektgenerator. Es ist etwas, das wir hier bei bringyourownlaptop gemacht haben , damit wir alle einzigartig sind. Klicken Sie also auf Webflow-Zentralen und alles, was Sie tun müssen, ist Stadt oder Ihren Namen oder Ihre Stadt oder was auch immer es ist, einzugeben. Okay. Es muss nicht der richtige Ort sein. Ich will nur nicht wissen , wo du wohnst. Aber wir wollen für jeden etwas Einzigartiges haben . Wenn Sie also darauf klicken, erhalten Sie Ihren Club. Also dieser hier, benutze den ersten, den du bekommst, schummele nicht, drücke nicht auf „Wiederholen“. Okay, ich habe die Idee. Kreisverkehr Appreciation Club. Es gibt ungefähr Appreciation Club, glaube ich in Großbritannien. Aber jeder wird hier in dem Brief, den wir verfolgen werden, etwas anderes bekommen dem Brief, den wir verfolgen werden , dass ich es vorlesen kann. Sie wurden gefragt, dass dies eine einseitige Website für diesen Club ist. Dies erfordert eine einfache Website. Es wird ein One-Pager sein, nur um bevorstehende Veranstaltungen, vergangene Veranstaltungen und Sponsoren zu veröffentlichen . Dies ist ihr idealer Kunde. Sie sind in den Sechzigern. Sie leben vor Ort. Und im Grunde ist diese Folie nur eine Möglichkeit, dass der Club nicht jedes Mal kontaktiert wird , wenn jemand wissen möchte, um wie viel Uhr wir uns am Samstag treffen. Okay. Das ist also das Ziel davon. PNG heruntergeladen. Klicken Sie nicht auf „Wiederholen“, um nur das erste zu verwenden , das Sie erhalten haben, und wenn Sie dies tun, wird das Internet kaputt gehen, wenn Sie es dreimal treffen. Okay. Versuche es nie dreimal. Heruntergeladen, mach dich bereit und dann können wir in den nächsten Videos aufhören zu bauen. Ist das alles? Es ist in den Klassenprojekten? Ja. In Ihren Namen, heruntergeladene Ergebnisse. Dafür gibt es nichts . Bei einigen zukünftigen Klassenprojekten bitte ich Sie, Screenshots zu machen und sie für dieses hochzuladen. Nein, nimm einfach deinen Auftrag. Lassen Sie mich optional in den sozialen Medien wissen , dass Sie gerade anfangen Sie verwenden diesen Hashtag, um den Windfluss zu starten. Sie müssen es kopieren und einfügen, damit Sie sehen können, wie andere Leute anfangen, und mich wissen lassen. Du bist echt aufgeregt. Ist es schon zu schwer? Weil ich später im Kurs Hühnchen mache, Violet, dasselbe Etikett und sehe, wie du reingehst. Du bist überfordert, als wir anfingen, den Dreh raus zu bekommen, lass es mich wissen. Es ist cool zu sehen, wie Leute mit MyCourses anfangen. Hat alle meine sozialen Netzwerke. Ja. Schreiben Sie mir eine Nachricht. Ordnung. Schreiben Sie sich ein und wir sehen uns im nächsten Video. 9. Was sind Container vs in Webflow: Haltet eure Hüte fest, Leute. Wir machen daraus ein wunderschönes Designbeispiel. Wir werden es schaffen, weil wir hier ein paar Dinge lernen müssen , die wir unter Ihren Layoutelementen lernen müssen. Die wichtigsten enthalten es im Abschnitt. Ich zeige dir, wie das geht, und ich stelle dir diesen Typen hier vor, den Navigator. Er ist super nützlich. Ordnung, designe Brilliance. Hier kommen wir an erster Stelle. Lass uns eine neue Seite erstellen. Wenn Sie Zeile eins nicht gelöscht oder eine neue Site erstellt haben, erstellen Sie eine leere, um loszulegen, und geben Sie ihr einen Namen. Und mein einziger, an den ich mich erinnere, heißt Dear Kayaks Day Kayak Club. Da haben wir's. Großartig. Und du zitierst. Denken Sie also daran, das ist unser Designer. Eine Sache wurde uns gegeben. Es ist dieser Körper. Der Körper ist alles, was Sie derzeit auf der Leinwand sehen , weiß und es ist nichts drin. Wenn ich meine Website in der Vorschau sehe, ist dieses Mitglied Verleumdung, ich habe nichts. Klicken Sie erneut darauf, um wieder herauszukommen. Wir werden also die beiden grundlegendsten Teile des Aufbaus einer Website kennenlernen . Wir klicken auf diesen kleinen Hinzufügen-Button. Und unter Elemente werden wir uns Abschnitte und Container ansehen . Wir schauen uns den Rest später an. Aber das sind die beiden wichtigsten. Der Container ist im Allgemeinen in Ordnung, das ist sehr allgemein. Sie haben eine pro Website und sie mit verschiedenen Abschnitten gefüllt. Damit meine ich, sagen wir mal , ich füge hier unten jemanden hinzu. Ich hatte eine gewisse Topographie, wenn ich sie hier meinem Kumpel hinzufüge. Okay. Es hängt einfach ab und es ist ganz hier auf der linken Seite und du sagst, ich möchte, dass es in der Mitte ist, wie es Websites sind. Okay, also werde ich das rückgängig machen mit Command Z auf einem Mac, Control Z auf einem PC. Okay, also was Sie damit beginnen müssen, ist keine Müllkippen direkt in den Körper zu treffen. Was Sie tun, ist zu sagen, warum kann ich einfach einen Abschnitt in das Problem einfügen, dieser Abschnitt auch, er hat das gleiche Problem wie der Header. Es wird sich so weit erstrecken , wie es erlaubt ist, bis zum Rand des Körpers. Du fängst also nicht mit einem Abschnitt an. Was Sie tun, ist mit einem Container zu beginnen und Sie können den Container sehen. Es hat Kanten, okay, also wie gesagt die Sonnenseite hier. Es ist jetzt üblich, dass Sie bis an die Ränder expandieren können, und ich werde Ihnen später zeigen , wie das mit einer komplexeren Website geht. Aber viele Websites hängen hier einfach in der Mitte rum und haben diesen Leerraum. Das ist einfach üblich. Es ist nicht zentral. Aber denken Sie daran, als Websites sowieso auf der linken Seite waren. Wir haben also diesen Container und er hängt in der Mitte. Und innerhalb dieses Containers, den wir hinzufügen, sind unsere Abschnitte Abschnitte. Abschnitte sind, schauen wir uns Apple an. Die Website ist in einzigartige Abschnitte unterteilt. Es ist eine Art, Informationen abzugrenzen. Das ist eine Navigation. Es ist ein Abschnitt namens Navigation. Dies ist ein Bereich namens Charity. Ich schätze, das ist ein Abschnitt namens MacBook Air, iPhone 313. Okay. Das sind also verschiedene Abschnitte. Scrollen Sie nach unten, es gibt eine Fußzeile, genau wie bei Sony. Sie haben ein Navi, sie haben dieses Karussell, sie haben das, ich möchte das nicht verschiedene Geschäftsbereiche nennen . Und dann die unteren oder neuesten Nachrichten und eine Fußzeile. Das sind also verschiedene Abschnitte. Das hast du. Und im Workflow werden Sie am Ende einige Abschnitte haben. Schauen wir uns also unsere Vorschau an. Das ist es also, was wir bauen, oder? Deins wird anders aussehen, aber es gibt ein Navi, es gibt eine sogenannte Heldenabteilung. Dort wird es einen gesponserten Bereich, einen neuen Eventbereich und dann vergangene Veranstaltungen geben. Du kannst es beenden. Ich zeige Ihnen, wie das mit einem Gitter gemacht wird. Aber Sie haben nur ein paar große Dinge, die Abschnitte genannt werden. Okay, also was wir tun werden, ist, die Navigation zu überspringen und einfach die Helden-Sektion zu erstellen. Und es ist einfach einfacher, die Helden-Sektion zu lernen und wir machen das Navi etwas später. Also was habe ich getan? Ich habe auf geklickt, mach das rückgängig. Also klicke auf Plus und ich habe meinen Abschnitt in meinen Container gezogen. Man kann irgendwie sehen , wohin man es zieht. Wenn ich es dorthin ziehe, befindet es sich unter meinem Container. Schlecht. Also werde ich rückgängig machen und meinen Abschnitt in den Container ziehen, das Mitglied, der Abschnitt ist einfach so weit wie möglich verteilt. Aber weil es im Container ist, ist es da drin gefangen. Lass uns eine Vorschau machen. Es ist nicht viel los. Werfen wir einen Blick darauf, etwas in diesem Abschnitt hinzuzufügen . Also lass uns plus gehen und lass uns unsere Treffer hinzufügen. Also schnappen Sie sich den Schlag hier unten, klicken Sie auf Halten, Ziehen, Ziehen, Ziehen. Denken Sie daran, dass Sie es in diesem Abschnitt oder unter diesem Abschnittsbehälter oder einfach hier draußen im Körper zusammendrücken oder unter diesem Abschnittsbehälter können. Es ist nicht das, was ich will. Wenn Sie es an der falschen Stelle haben, können Sie einfach auf Halten klicken und ziehen und sagen, tatsächlich reingehen. Da hast du es. Wir haben unsere Treffer in der OWL-Sektion. Fügen wir hinzu, nun, wir könnten immer wieder verschiedene Abschnitte hinzufügen. Ich lasse im Moment einfach einen bei dem, den wir Held nennen, weil ich dir etwas vorstellen möchte , zwei Dinge. Ich habe meine Treffer ausgewählt, also wählen Sie auch Ihre Treffer aus. Dann unten hier, kannst du sehen dass ich einen Treffer habe, der sich zufällig in einem Abschnitt befindet , der sich in einem Container befindet, in meinem Kumpel. Wir entwerfen Everybody im Internet. Okay? Das sind also die Semmelbrösel, die Ihnen zeigen , wo Sie sich auf der Welt befinden, was praktisch sein kann. Sie möchten also jetzt den Container auswählen. Schlagen Sie weiter. Man kann sagen, dass ich tatsächlich auf den Container klicken und dem Container eine Hintergrundfarbe geben möchte , die hier unten irgendwo ist, Hintergründe. Also könntest du das tun. Die sind praktisch. Die andere Sache in der Wahrscheinlichkeit, die du am häufigsten verwenden wirst oder zumindest ich, ist, dass ich auf das Schlagen klicken werde. Ist dieses Ding gleich Navigator? Navigator zeigt Ihnen ähnlich wie die Breadcrumbs unten, aber er hat all diese Einrückungen , die wirklich nützlich sind. Mein Schlagen befindet sich also zufällig einem Abschnitt innerhalb meines Containers, in dem Sie im Körper einen Kumpel haben werden. 100% der Fälle haben Sie höchstwahrscheinlich einen Container und Sie werden viele verschiedene Abschnitte und viele verschiedene Überschriften haben . Dann ist die Navigation praktisch , um Dinge zu bewegen. Nehmen wir an, ich möchte einen weiteren Treffer hinzufügen oder einen Absatz sagen und bearbeite ihn hier und hier. Aber es landete im Körper und bei ihr. Du könntest es ziehen und versuchen, es unter die Überschrift zu bringen. Und das funktioniert. Ich mache es rückgängig, damit du es nicht tun kannst. Dann ist navigation wirklich gut dafür. Du kannst sagen, hier ist er. Er hängt nicht am richtigen Ort rum, er ist unter dem Container. Man kann also sagen, dass ich sie direkt unter dieser Überschrift haben möchte . Also ziehst du einen Mob und bewegst ihn herum. Los geht's. Er ist direkt darunter, in diesem Bereich, und hängt mit der Heizung ab. Sie können die Reihenfolge ändern , in der diese UVA, los geht's. Es ist also eine nette Art mehr mit dem Code zu arbeiten als er ist. Das visuelle, visuelle Erscheinungsbild, das sich hervorragend für viele Dinge eignet. Manchmal kann es jedoch schwierig sein. Deshalb habe ich dir den Navigator vorgestellt. Lassen Sie uns diesen Abschnitt ein wenig gestalten, bevor wir weitermachen und uns wahrscheinlich die Stile ansehen. Sie könnten also im Hintergrund einen Blick auf unsere Vorschau werfen. Ich möchte den Hintergrund für diesen Chunk hier habe ich ein Bild drin. Ich werde das Bild für den Moment etwas später machen, füllen wir es einfach mit einer dunklen Farbe damit wir den Text sehen können. Das. Färbe ich den Absatz ein? Du könntest hier Absatz sagen. Ich hätte gerne eine Schriftrolle. Also solltest du hier deine Style-Option bekommen. Es ist ein bisschen Standard , scrolle nach unten, scrolle nach unten, scrolle nach unten. Ich benutze mein Mausrad. kannst du schaffen. Du bist dafür verantwortlich herauszufinden, wie man dieses Ding rauf und runter geht. Okay, ich benutze mein kleines Scrollrad. Sie können den kleinen Schieberegler oder die Seite ziehen. ist es also, da ist der Hintergrund. Ich kann also sagen, dass u, p Tag oder Paragraph Tag einen dunklen Hintergrund haben, den du magst. Du musst es tun Das Schlagen. Okay. Also willst du oft mit so großen Stilen wie diesem, okay, ich werde rückgängig machen, was Command Z auf einem Mac ist , C auf einem PC steuern. Du würdest es gerne mit diesem Abschnitt machen, ich weiß, dass es hier eine wichtige Sache gibt , in der ich dunkel sein möchte. Wie wähle ich die Hände hoch aus, Hände hoch. Wie wähle ich den Bereich aus? Weißt du, hier unten gibt es zwei Möglichkeiten , wie ich „Du“ sagen kann. Erinnerst du dich an die Paniermehl Ich habe zuerst reingeklickt. Es weiß also irgendwie, wo auf der Welt du bist. Auf Absatz. Ich möchte nicht, dass dieser Abschnitt einen Hintergrund, eine Farbe oder einen transparenten Hintergrund hat. Ich werde für den Moment nur ein dunkles Grau verwenden. Und wir ändern es später in ein Bild. Da hast du es. Du hast deine Sektion gestartet. Sie haben gerade das erste bisschen CSS erstellt. Du wusstest es nicht mal. Also verwenden wir die Breadcrumbs , um es auszuwählen. Du könntest vielleicht, wenn ich noch einmal auf meinen Absatz klicke, du sagst: Hey, die Hintergrundfarbe ist weg. Wie klicke ich auf den Abschnitt? Das Navigator-Panel ist wahrscheinlich das, was ich am häufigsten verwende, könnte man sagen, kein Absatz. Klicke auf ihn. Da hast du es. Da ist meine Farbe, die ich dann anklicken kann und mit diesem Farbwähler hier. Und wenn Sie nicht an sie gewöhnt sind, klicken Sie einfach irgendwo hier rein. Sobald ich klicke und ziehe, muss ich oft nicht mehr, sondern finde einfach eine Farbe. Und um eine andere Farbe auszuwählen, können Sie diesen Farbtonregler ziehen, okay? Wenn Sie ein dunkles Blau wünschen, wenn Sie ein Grün wünschen, ziehen Sie den Schieberegler auf Grün und wählen Sie dann die Schattierungen und die Sättigung des Grüns aus. Aber ich gehe den ganzen Weg hierher, einfach ein verwaschenes Grau aus und dann gehe ich einfach hier rein und wir sind fertig. Ordnung, das ist es. Wir haben einen Container hinzugefügt, uns irgendwie von den Rändern fernhält. Und von innen nach außen. Im ersten Abschnitt werden wir unserem einen Container mehrere Abschnitte hinzufügen . Und Buddy ist da , um alle auf dem Land im Hintergrund zu sitzen und alle am richtigen Ort zu halten . Ordnung, das war's. Grundstruktur, Behälter, Abschnitte. Kommen wir zum nächsten Video. 10. So erstellen Sie CSS in Webflow: Hallo zusammen. In diesem Video erfahren Sie alles darüber , welche Klassen CSS-Klassen in Webflow sind. Wie stylen wir Dinge? Es ist lang, weil es ein relativ wichtiges Thema ist, das Leuten, die neu im Webdesign sind, ziemlich fremd ist. Wenn Sie bereits wissen, was eine CSS-Klasse ist, schauen Sie sie sich wahrscheinlich trotzdem Es gibt einige Webflow-Macken, die wir uns ansehen müssen , bevor wir mit dem Kurs fortfahren können. Ordnung, gehen wir. Was ist eine Klasse? Eine Klasse, eine CSS-Klasse. Die lange Version ist eine Möglichkeit, die Elemente auf der Seite zu gestalten, verleiht ihnen Farbe und Stil und Polsterung und was für Spaß macht, sie zu verwenden. Also ziehen wir solche Elemente auf Blockebene auf die Seite, genau diese Art von Dingen. Wir haben sie gerade in einen Topf geworfen. Und dann wollen wir sie stylen, wir wählen sie aus und ändern hier den Stil. Wir haben den Hintergrund des Graus schon einmal gemacht. Also lass uns noch einen machen. Klicken wir auf unsere Treffer. Okay, und lassen Sie uns einen kleinen Blick darauf werfen , wie das Design wir verfolgen. Denken Sie daran, dass Sie selbst auswählen können, was Sie möchten. Lass uns gehen und es stylen. Also habe ich meine Treffer ausgewählt. Der richtige Weg, das zu tun, ist, hier reinzugehen und zu sagen: Okay, ich habe meine Treffer ausgewählt. Ich klicke hier rein und gebe ihm einen Namen. Also werde ich sagen, das ist mein Wille Dens Hit, gib ihm einen Namen. Sie können hier sehen, dass es darauf angewendet wurde. Dann gehe ich zum Style und sage hier unten und Typografie, scrolle nach unten. Da ist meine Farbe. Ich sage, klicke auf das kleine Ding dort und sage eigentlich, dass Weiß weiß wird. Es spielt keine Rolle, was Hugh Urin ist, solange Sie auf Halten klicken und ziehen, ziehen, ziehen, ziehen, ziehen. So wie bis zu dieser Ecke und ich werde ein bisschen daran vorbeikommen. Oder Sie können öffnen, wenn, wenn, wenn das der Code für White In mit hexadezimaler Sprache ist , können wir die Eingabetaste auf meiner Tastatur drücken? Tue ich nicht, ich werde einfach klicken. Okay, und wir haben es nach weißem Geschmack gestylt. Wenn ich darauf klicke, hat es eine CSS-Klasse die ich Dance Hitting K genannt habe und die sagt, dass die Dinge weiß sein sollen. Ich kann es wiederverwenden. Okay. Ich könnte sagen, ich könnte eigentlich diesen Absatz hier sagen , den ich hinzugefügt habe. Du bist auch, wenn ich hier reinklicke, kann ich sagen, schau, hier sind all meine anderen , die ich gemacht habe. Meine bestehenden Klassen , die tanzen, schlagen, du gehst, Dänen schlagen können schlagen, du gehst, , bewirken eigentlich nichts. Alles was es tut ist die Dinge weiß zu machen. Das ist der einzige Job, den es heute auf der Welt gibt. Ich werde es so verwenden, als ob es sich um bitteren, kaltweißen Text handeln könnte . Ich kann mich einfach auf verschiedene Dinge bewerben. Sie haben jetzt Ihre erste CSS-Klasse namens Hitting oder Density erstellt Ihre erste CSS-Klasse , in meinem Fall. also etwas auswählen und möchten also etwas auswählen und absichtlich eine Klasse hinzufügen. Bond Workflow weiß, dass die Leute einfach herumhacken und es tun. Und was sie tun, ist, dass sie tatsächlich Unterricht für dich machen. Wir haben bereits einen gemacht, wir haben bereits Nachdruck darauf gelegt. Das ist wie dein zweiter CSS-Stil. Denken Sie daran, als wir unseren Abschnitt hatten, den Hintergrund. Wie klicke ich auf diesen Abschnitt? Denk dran, du kannst es entweder hier unten machen. Ich klicke zuerst rein und sage eigentlich nicht die Heizung auf der Sektion. Klicke darauf. Oder vielleicht gehst du zu deinem Navigator und klickst auf. Die Sektion hat eine Stilüberschrift, einen guten Stil. Siehst du, dass sie automatisch nach uns benannt wurden, kleinen blauen Ding , das vorher nicht da war. Die Seite wurde nicht damit geboren. Es wurde gerade bearbeitet, als du eine Kette startest , um die Farbe zu ändern, und du hast vergessen, sie zu benennen. Also das ist alles, ich nenne sie nur für dich. Sie werden also am Ende viel davon haben , besonders wenn Sie neu sind. Lassen Sie mich Ihnen ein Beispiel zeigen. Folgt nicht mit. Also füge ich einen neuen Abschnitt hinzu. Sektion. Ich ziehe es in die Länge und versuche, an die richtige Stelle zu kommen. Nun, sie haben nicht funktioniert. Okay. Rückgängig, rückgängig machen. Ich gehe zur Sektion. Sie können eins ineinander stecken. Es verstößt gegen die Regeln des Internets oder zumindest gegen die Regeln des Workflows. Abschnittselemente können nicht ineinander verschachtelt werden. Also stimme ich zu, ich werde es hier irgendwo hinstellen wo du sehen kannst, dass sein Körper oben da, du kannst ein bisschen höher steigen, im Container ist , wo ich ihn irgendwie im Container haben will, nicht in diesem anderen Abschnitt wegen y, lass es mich irgendwie an die richtige Stelle bringen. Auch wenn Sie es nicht an der richtigen Stelle haben. Ich möchte Ihnen einige zeigen, nein, lassen Sie uns dieses Beispiel beenden. Also werde ich an die richtige Stelle gehen und es stylen. Und in meinem kleinen Modell hier sieht man die weißen Hintergründe. Oh cool. Ich mache weißen Hintergrund. Wow, warum es im Moment nicht so hilfreich sein wird. Wählen wir irgendwelche alten Hintergründe aus. Also hier drüben, und was ich möchte, dass du tust, werde ich den Hintergrund ändern. Schau dir das an, sieh dir das hier oben an. Ich sage, können wir es nach oben scrollen, damit es näher ist? Dort ist es schlimmer. Ich sage, du wirst eine Hintergrundfarbe von wirklich leuchtendem Rot haben . Kannst du sehen, dass es heißt: Hey, du hast ihm keinen Namen gegeben, also werde ich es für Abschnitt zwei benennen. Wenn Sie neu sind, erhalten Sie am Ende Abschnitt 42, was nicht sehr hilfreich ist. Was du also tun willst, ist ein bisschen zielstrebiger zu sein. Ich mache es rückgängig. Ich möchte, dass Sie sehen, ob Sie Ihren Abschnitt hinzufügen können , probieren Sie es aus. Dann geben wir ihm einen Namen, bevor wir es stylen. Okay, ich nenne es Sektion. Ich werde hier Titelfall verwenden. Es spielt keine Rolle, wie Sie Ihre CSS-Klassen nennen . Du kannst ihnen jeden alten Namen geben. Ich denke, sie müssen mit einem Buchstaben beginnen, nicht mit einer Zahl. Das ist wichtig. Es wird Sektion sein und das werden meine Sponsoren sein , die sie weiterlassen. Ich kann es leicht finden und wähle jetzt eine wirklich interessante Farbe, falsche Farbe, Hintergründe. Wir müssen hier reinklicken , um die Farbe zu sehen. Ich möchte herumschleppen, bis ich etwas habe. Ich werde für den Moment einfach ein anderes Grau verwenden. Ich bin jetzt etwas zielstrebiger, ich habe einen Stil kreiert ihn auf den Bereich Sponsoren angewendet. Und du würdest sagen: Wow, was machen wir mit dem, den wir bereits gemacht haben? Also wählen wir es aus. Wir klicken hier rein. Wir werden etwas tun. Nun, klicken wir hier unten darauf und sagen, ich möchte, dass dieser Abschnitt ausgewählt wird. Okay, statt eines coolen Abschnitts, weil das kein sehr guter Name ist, können Sie einfach mit der rechten Maustaste darauf klicken und einfach darauf doppelklicken und Abschnitt sagen. Und dieser heißt My Hero. Okay, jetzt habe ich eine Heldenabteilung und ich habe eine Sektion. Da haben wir's. Nach einer Weile gewöhnen Sie sich an, zuerst Namen zu machen, aber am Anfang werden Sie sie machen und sie danach benennen, und das ist völlig in Ordnung. Das nächste, was bei CSS-Klassen zu beachten ist, ist, dass es häufiger nützlich ist , den Abschnitt oder das Ding, in dem er sich befindet, zu formatieren den Abschnitt oder das Ding, in dem er sich befindet, , anstatt die Elemente selbst, die wir gestaltet haben. Wir benutzen Dans Schlag und setzen es auf beide. Und das ist in Ordnung. kannst du weiter machen. Daran ist nichts falsch, aber es ist wahrscheinlich besser. Lass es uns loswerden. Wie entfernen wir hier ein heruntergefallenes Etikett . Es gibt eine, die besagt, entferne sie einfach. Und ich werde es auch von hier entfernen, diese Klasse entfernen. Also ist es weg. Was? Es ist einfacher, anstatt eine Klasse zu erstellen, indem man es beiden antut. Sie sagen, eigentlich möchte ich, dass alles in meiner Abteilung, der Held, hier unten eine weiße Typografie hat. Es ist nicht wirklich so, du musstest es nicht so machen, aber du siehst, dass es einfacher ist. Es ist einfacher, den Container so zu gestalten , dass er sich in den einzelnen Elementen befindet, oft mit der Polsterung: Schauen wir uns unser Beispiel an. Es gibt einen großen Abstoß von dieser Seite. Ich könnte also drücken, wenn ich ihm keinen Namen gebe, und ich füge hier einige, sagen wir etwas Padding auf sagen wir etwas Padding auf der linken Seite hinzu, indem ich klicke, halte und ziehe. Kannst du sehen, dass es sofort etwas namens Schlagen gemacht hat. Und wenn ich noch eins mache, wird es 2345674 erreichen. Also will ich das nicht so machen. Ich werd es los. Entferne diese Klasse, damit ich sie benennen kann, und füge dann das Padding hinzu, was etwas besser ist, aber eigentlich ist es einfacher. Geh einfach auf die Sektion. Okay, also klicke ich auf meinen Heldenbereich. Ich werde sagen, ich möchte Polster für alles da drin haben. Klicken Sie auf Halten und ziehen Sie es, und alles kommt für die Fahrt mit. Das gleiche gilt für die oberste. Penny, von oben bis heute ist es etwas knifflig. Du ziehst es so, wie du es willst. Okay, also werde ich das rückgängig machen. Also wollte ich, dass die Zahl steigt. Also habe ich es hochgezogen. Du willst es runterziehen? Wir gehen. Wie viel Polsterung will ich? Und wir werden es im Moment nur erraten. Ich werde irgendwie hierher zurückschauen und etwas dazu sagen. Das sieht gut aus. Ich möchte unten etwas Polsterung . Wie viel Polsterung ist hier unten? Ungefähr das Gleiche wie oben. Also sage ich deine 23, damit ich unten klicken und 23 sagen kann. Jetzt habe ich ein paar Probleme mit Zahlen. Mir ist klar, dass es in 23 53 ist. Was bin ich, Wade Quick? Sie werden es wahrscheinlich wieder im Kurs sehen. Meine Augen, mein Gehirn und mein Mund. Manchmal nennen sie es nicht. Wie dem auch sei, wir haben unsere Sektion sehr bewusst erstellt. Wir haben ihm eine Hintergrundfarbe gegeben. Okay. Oder ist es Hintergrundfarbe? Ich scrolle da runter. Ist da. Und wir haben gesehen, dass alles hier drin eine weiße Textfarbe hat und etwas Polsterung herumläuft. Wahrscheinlich auch etwas Polsterung auf dieser Seite. Ziehe es so, wie du es haben möchtest. Du gehst. Schau dir das Beispiel so weit an. Eigentlich braucht es das nicht wirklich. Ich möchte, dass dieser Absatz ein bisschen da reinkommt, aber ich möchte hier einen anderen. Also, das ist ein wirklich gutes Beispiel, wo wenn ich die Polsterung für alles mache, auf dem Absatz stehen, sagen wir, lass uns gehen, lass uns den ganzen Weg rübergehen. Los geht's. Das Schlagen wird nicht lang genug sein. Das Ego, also hier ist eigentlich die Polsterung für den Behälter nicht so nützlich. Was du also sagen kannst ist Go, eigentlich werde ich dazu neigen, aufzufüllen weil du es einfach für den Abschnitt ausschalten wirst. Du musst es ausschalten. Es gibt mehrere Möglichkeiten, wie Sie einfach darauf zugreifen können. Zero funktioniert irgendwie. Okay? Wenn er also etwas entfernt, sieht er blau und dieses ist nicht blau. Blau bedeutet, dass ich es auf Null gesetzt habe. Ich sagte, sei Null. Das ist ausgegraut, weil es so ist, als würde ich nur raten. Was auch immer es nicht auf Null gesetzt ist, ist zufällig Null. Ich bin hier sehr konkret. Sie können also die Wahltaste auf einem Mac gedrückt halten , die Alt-Taste auf einem PC gedrückt halten und auf etwas klicken. Siehst du, wenn Gray einfach sagt, ich sage nicht, sei Null, sei einfach was auch immer dein Standard ist, geh einfach deinem Tag nach. Und jetzt möchte ich diesen Absatztext hier sagen. Ich sage, du bist mein Absatz. Ich werde das Wort verwenden, ich verwende den Buchstaben P, k, dann ein Leerzeichen, weil ich wahrscheinlich mehr Absatztext in meinem gesamten Dokument habe . Es wird also Absatz für den Helden stehen, kleine Sonderklasse, die wir machen werden. Okay, erstelle es. Sie können entweder die Eingabetaste drücken oder darauf klicken. Ich möchte, dass das hier etwas gepolstert ist, was sich von der Art des Abschnitts unterscheidet. Und was ist dort passiert. Warum hört es sich die Sektion nicht an? Dieser Abschnitt ist wie ein Elternteil. Okay. Er sagt, in Ordnung, tu diese Dinge, die Kinder hier drinnen außer Kraft setzen können, und das nennt man Spezifität. Wir werden darüber sprechen, es ist genauer. Dieser Absatz nimmt also einige vage Anweisungen von oben an. Wenn er spezifischere Anweisungen bekommt, wird er sie außer Kraft setzen und sagen, hey, ja, aber ich wollte andere Dinge tun um das generische Zeug in den äußeren Wrapper zu bekommen . Jetzt gibt es etwas namens Section Hero. Und wenn Sie dann etwas spezifischere Dinge im Inneren tun möchten , geben Sie ihnen ihren eigenen Klassennamen. Und in unserem Fall machen wir nur Polsterung. Jetzt macht die Klassenbenennung allen Angst. Und selbst wenn Sie der Beste und Fleißigste sind, weise ich es selbst darauf hin. kannst du nicht sehen, aber ich bin ein bisschen fleißig und ich mag all das Zeug und ich verstehe alles. Am Ende triffst du immer 17. Ich kann mich nicht erinnern, vielleicht nicht so schlimm. Am Ende erhalten Sie Kurse, die Sie mit den besten Absichten beginnen , und am Ende sorgen Sie dafür, dass es funktioniert, aber vielleicht nicht so organisiert, wie Sie es sich erhofft hatten, aber Sie werden besser. Und in diesem Kurs werden Sie feststellen, dass es drei Abschnitte für CSS gibt, nur ein bisschen vorstellen, jetzt genug, um uns in Schwung zu bringen. Und später machen wir ein Level zwei und Level drei wird High-Core-CSS-Code sein Am Ende sprechen wir von Code, wir einen kurzen Blick auf zwei Dinge, die ich tun möchte. Ich möchte den Code und das Navigator-Panel sehen. Das hat kein Kit-Panel, weil es schnell ist und es eine Menge gibt , als würde man darauf klicken und dann denken, sagen wir, ich möchte das in den nächsten Abschnitt ziehen, ich kann es wahrscheinlich tun, weil es nicht so ist so schwer. Oh, sehr gut. Punkt. Ich muss dir drei Dinge sagen. Das erste ist, dass das Navigator-Panel einfach praktisch ist, wenn es immer draußen ist. Das heißt, wenn du Sachen im Navigator-Panel machst und du sagst, ich möchte das hineinziehen. Kannst du sehen, dass es nicht verschwindet, die ganze Zeit dort bleibt und es ist einfach, es direkt hineinzuziehen. Sie können sagen, dass ich innerhalb des Abschnitts klicken möchte, anstatt zu versuchen, ihn auf die Seite zu ziehen, Sie können es tun. Daran ist nichts falsch. Und mache das Navigator-Panel rückgängig, wenn du darauf gehst. Okay. Denn sonst schließt es sich automatisch und es ist super praktisch, die ganze Zeit geöffnet zu sein. Um das mit mir zu machen, wirst du dich daran gewöhnen. Und diese Option hier oben, es heißt, den Navigator anheften , nicht schließen. Es ging um zwei Dinge. Was waren die anderen beiden? Wartest du dort? Oh ja. Ich erinnere mich. Schauen wir uns das an, denn ich sagte, du schreibst Code und führst Code aus. Woher weißt du das? Sie können hier raufgehen und dies ist eine Option mit der Aufschrift Exportcode. Sie können darauf klicken, um alles zu exportieren, was Sie zum Zählen bezahlen müssen. Aber du kannst einen Teil davon hier drin sehen. Es wird der Code geladen. Komm schon. Code wird geladen. Ich bin mir nicht sicher, ob ich normalerweise immer geladen werde. Schließen wir es und versuchen es erneut. Ja. Okay. Welchen Code haben wir geschrieben? Wir haben etwas HTML, etwas CSS und etwas JavaScript-HTML geschrieben . Also haben wir hinzugefügt, wir wussten, dass es eine Körpermarke gibt. Schau dir das an. Das ist was es ist. Also, wenn du das tust, habe ich quasi ein Webdesign-Essentials. Wir würden diesen Code schreiben und Body in einer div-Klasse namens container sagen . Darin befindet sich etwas, das sich Abschnitt nennt. Wir schreiben Code und es ist nett und hübsch und übersichtlich. Es ist leicht zu lesen, aber wir machen es nur auf eine visuellere Art und Weise. Man muss nie auf diese Seite schauen. Es ist einfach interessant. Ich denke es ist sowieso so. Divs sind nur generische Container, Abteilungen, geteilte Tags. Wir haben einen Container namens Container, Stunden in der Mitte hält. Okay, ich gehe in die Sektion und wir haben ihr hier einen Klassennamen gegeben . Wir haben hier einen anderen Abschnitt, wir einen Klassennamen gegeben, okay, also div Klasse von Sektionen, Sponsoren. Das ist also nicht das HTML. Wir haben irgendwie gesagt, hier ist eine Box, sie heißt Sektionssponsoren. Hier in meinem CSS haben wir es gestylt. Wir haben gesagt, okay, wo meine Sektionssponsoren, da ist sie da. Und ich möchte, dass du es stylst. Das ist die CSS-Klasse, die du erstellt hast. Diese Klasse heißt CSS-Sektionssponsoren. Und diese Hintergrundfarbe, das haben wir gemacht. Wir haben etwas mehr mit dem Abschnitt Hero gemacht. Wir fügen etwas Polsterung und Hintergrundfarbe und Farbe der Schrift hinzu. Denk dran, Dan schlägt da rein. Wir brauchen nicht mehr, aber es setzt die Farbe auf FFF, was weiß ist. Und ein paar zufällige Treffer, die wir gemacht haben. Okay, wir schreiben also HTML, CSS und das JavaScript. Wir berühren uns dort im Moment nicht wirklich, aber es wird für uns produziert. Deine Coda. Deshalb ist es wie keine Code-Codierung. Die andere Sache, die ich erwähnen werde, während wir hier drin sind, können Sie sehen, dass Klassennamen haben, wenn Sie meinen anderen Webdesign-Kurs machen, wir verwenden VS-Code, Sie müssten tatsächlich wissen, dass ein Klassenname beginnt mit einem Punkt und muss dann schreiben, muss in Kleinbuchstaben geschrieben werden. Man kann Räume haben, all diese Art von Dingen. Während Webflow sagt, wollen wir den Leuten nicht beibringen, dass Sie dort etwas eingeben. Und wir konvertieren es in die richtige Syntax, das heißt, es gibt keine Leerzeichen, also setzen sie einfach Bindestriche ein, wo ich Leerzeichen eingefügt habe, und sie haben alles automatisch für uns in Leerzeichen eingefügt habe, und sie haben alles Kleinbuchstaben geschrieben. Wir müssen nie hier reinkommen. Ich denke, es ist nützlich. Jedenfalls. Schauen Sie sich Ihren Code an und sehen Sie, was Sie gemacht haben. Ich sagte, es gäbe nur zwei Dinge und dann gibt es eine Sache. Das hast du gesehen. Ich habe es ignoriert. Es ist also ein gutes Beispiel, okay, ist, dass diesem Ding hier ein paar Dinge erzählt werden. Es wird gesagt, dass es sich hier um diesen Absatz handelt, den ich genannt habe. Und was sagt uns das zu tun? Es sagt uns, dass es alles will, was es uns sagt dass wir nur sehen, dass es das ist, was es war, es polstert, das ist das einzige, was wir mit diesem Ding gemacht haben. Alles andere, was es weiß macht , was es von dieser Seite schiebt, kommt von. Woher kommt das? Das stimmt. Es kommt von diesem Abschnitt zu Abschnitt sagt B, dies von oben, dies von der Seite, und es ist eine Textfarbe von Weiß. Die Tasten sind blau, wenn Dinge erledigt sind, und alles ist weiß oder grau, wenn Sie nichts gesagt haben. Wir werden später besprechen, was der MBA färbt. Aber dieses Tag hier, dieser Absatztext bezieht einige Befehle. Es wird ein bestimmter Befehl damit verbunden, der besagt, dass er auf dieser Seite aufgefüllt wird. Wenn ich es also hierher ziehe, ist das einzige, was dazu gehört, dieses Ding hier, weil alles andere , was es weiß macht und es von links nach unten drückt. Jetzt gehen wir von oben und die Linke kommt von diesem Kerl, aus diesem Abschnitt hier. Es ist also interessant, das zu verstehen. Hilft es, es so früh verwirrender zu machen? Warum wenden wir es nicht einfach auf alles an , sodass es weiß ist, wenn Sie es hierher ziehen, und polstern es darüber. kannst du machen. Es wiederholt sich nur sehr, besonders wenn ich dann sage, dass ich eine Blogseite mache und meine Blogs habe, wahrscheinlich nur vier Beiträge weil das so weit ich komme, bevor ich das Interesse verliere. Aber ich liebe es, Videos zu machen. Aber nehmen wir an, Sie sind ein begeisterter Blog-Autor oder Ihr Kunde ist es und Sie erstellen 1.000 Seiten. Und Sie haben auf jedes einzelne Bit von Absatztexten einen angewendet und sie sagen: Können Sie die Schriftart vergrößern? Du kannst nein sagen, denn du musst jeden einzelnen finden, auf sie klicken und sie alle in einen anderen Stil ändern . Wenn Sie es nur mit den Containern machen, ist es relativ einfach, da alles darin von rechts kommt. Du sagst eigentlich, ich wollte uns jetzt dazu bringen schrecklichen Lesekontrast zu haben, einfach. Und wenn es in diesem Abschnitt 1.000 Textbits gäbe, könnte es wie im Artikelabschnitt sein. Nun, im Blogpost-Bereich kommt alles mit für die Fahrt. Ordnung, es gab einen langen, aber er ist ziemlich grundlegend für den Rest dieses Kurses, Klassen verstehen, wie sie angewendet werden, und ein bisschen Spezifität. Spezifität ist schwer zu sagen, okay? Und das ist eine Art zu sagen, ich werde für diesen Teil wirklich spezifisch sein , aber alles andere ist nur generisch. Folgen Sie mir, sofern ich Ihnen nicht etwas anderes sage. Ordnung, das ist es. Auf das nächste Video. 11. Wie man Bilder mit Rand in Webflow fügt: Hallo zusammen. In diesem Video werde ich dir zeigen, wie man ein Bild einbringt. Wir schauen uns das Asset-Panel an und schauen uns an, wie wir ihm eine Klasse hinzufügen und mit den Unterschieden zwischen Rand und Padding experimentieren . Ordnung, lassen Sie uns darauf eingehen. Oh, und ich zeige Ihnen auch eine Möglichkeit, kostenlose Bilder für kommerzielle Zwecke für Ihr Projekt zu erhalten . Es ist ein Bonus. In Ordnung, jetzt lass uns darauf eingehen, okay, erster Halt. Holen Sie sich Ihr Image und für welchen Club Sie es tun. Und du kannst auf etwas wie unsplash.com gehen. Unsplash ist einfach ein großartiges Bild für kommerzielle Nutzung. Okay, es ist ziemlich beeindruckend. Ich klicke hier rein und tippe die Jonglierliste ein. Ich gehe nur davon aus, dass Ihre Clubber jonglieren und eines dieser Bilder hier unten finden und auf diese kleine Option hier klicken , um Downloads zu finden, um etwas für Ihren Club zu finden. Ihre könnte, ich weiß nicht, genäht oder immer wieder jongliert haben, was auch immer es ist. Finden Sie Ihr Bild, laden Sie es herunter und machen Sie sich bereit. Ich habe also schon mein Bild, es ist in den Übungsdateien. Als Erstes müssen wir ein Bild hinzufügen, okay, also füge diesen ersten kleinen Tab hier hinzu, okay, und unten gibt es eines namens Media und sein Bild. Klicken Sie auf Halten und ziehen Sie sie und platzieren Sie sie einfach dort, wo sie hin müssen. Du kannst, aber oberhalb einer kleinen blauen Linie. Okay, habe ein Bild. Gehen wir zur Auswahl des Bildes. Diese kleine Sitzung kommt heraus und du kannst ein paar grundlegende Dinge erledigen. Ich werde Bild auswählen verwenden. Und was es getan hat, ist, dass es diese Registerkarte hier geöffnet hat, Ihre Assets-Tab. Wir waren auf der Registerkarte Hinzufügen und im Navigator, aber jetzt haben wir diese Registerkarte Assets. Hier bewahren wir alle unsere Bilder auf. Sie können entweder Ihr Bild hochladen. Wir machen das und gehen zum Stöbern und suchen es. Was ich sehr nützlich finde, ist es einfach da rein zu ziehen. Wo sind meine Übungsunterlagen? Also hier ist meins. Ich bin im Club of Insight. Ich habe ein Bild hier drin. Und es ist wirklich cool, denn wenn du 20 davon hast, klickst du sie einfach an und ziehst sie hinein. Los geht's. Hier ist mein Bild, es wurde hochgeladen, okay, und jetzt kann ich tun, weil wir das ausgewählt haben. Wenn ich darauf klicke und es einfach da reinwerfe. Okay, also mein kleiner Platzhalter ausgewählt, einfach darauf geklickt und er hat sich irgendwie selbst eingespritzt. Nett. Und es ist viel zu groß. Du kannst einfach den Rand davon greifen. Sieh dir diesen kleinen Ankerpunkt hier unten an. Klicken Sie auf Halten, ziehen. müssen nichts gedrückt halten, ziehen Sie es einfach nach oben und die Größe wird online geändert. Diese Art von Größe. Ich sehe mir mein Modell an, das ich gemacht habe, ungefähr so. Los geht's. In Bezug auf die Bildeinstellungen können Sie also etwas mehr Menü haben und von dort aus zu den Einstellungen gelangen. Denn im Moment ist Schleppen in Ordnung. Sie können die Zahlen dort irgendwie sehen, aber sagen Sie, es muss genau auf 50 sein. Du kannst entweder zu diesem kleinen Zahnrad hier gehen, Bildeinstellungen oder es gibt tatsächlich einen Tab hier drüben, also werde ich ihn schließen. Schließ es. Das Gleiche erscheint. Sieh dir dieses Zahnrad hier an. Sie sind dasselbe, zwei verschiedene Wege um zur gleichen Sache zu gelangen. Dieses Zahnrad, dieses Zahnrad. Der Unterschied zwischen diesem Zahnrad ist, dass es etwas mehr Einstellungen hat, ein bisschen fortgeschrittener. Also die Grundlagen, Bild hier ersetzt und Sie können die Größe eingeben. Also werde ich sagen, und das muss 50 sein und ich überlasse die Höhe auf Auto. Wenn ich die Höhe eintippe, machen wir es zu 20 Pixeln. Es zerquetscht es. Sie möchten es also als automatisch belassen, indem Sie es löschen. Da ist also nichts drin. Da haben wir's. Nun, mach 50. Los geht's. Ordnung, wir werden später mehr über Bilder sprechen, aber das ist es im Moment. Ich habe versprochen, dass wir über Padding versus Margin sprechen werden. Okay? Also möchte ich ein bisschen Abstand zwischen meinen Absätzen hinzufügen , die sehr eng sind. Also was ich tun möchte, ist eine CSS-Klasse hinzuzufügen, okay, und wie machen wir das? Ich habe es ausgewählt. Ich könnte einfach zu Styles gehen und anfangen, Sachen zu ziehen. Was wird das Problem sein? Das stimmt, es wird mir automatisch eine Klasse erstellen , die ich später umbenennen kann, was in Ordnung ist. Aber was ich tun möchte, ist etwas Besonderes zu sein und zu sagen, ich möchte ein Bild machen. Und dieser wird kalt sein. Kapital I. Das muss es nicht sein. Ich weiß nur, dass es eine Zecke ist. Ich habe Image Hero. Also lege ich es zurück, weil es ein Bild geben wird , das vielleicht in der Fußzeile oder im Sponsorenbereich zu sehen sein wird . Also setze ich immer zuerst das Bild und dann die anderen Dinge an zweiter Stelle, nur damit es später leichter zu finden ist, oder meine Bildsalsa zusammen, anstatt Held vorne. Los geht's. Das mache ich. die Eingabetaste auf meiner Tastatur. Und ich werde sagen, ich werde jetzt etwas Padding oder Rand mit einem Bildabstand hinzufügen jetzt etwas Padding oder Rand mit und der Rand spielt keine Rolle. Also ziehe ich es hier oben runter. Also habe ich dort ein bisschen Platz. Nett. Sie werden feststellen, dass, wenn ich das rückgängig mache, Sie es rückgängig machen , die Option auf einem Mac gedrückt halten, auf einem PC die Alt-Taste gedrückt halten und auf Okay klicken, und es wird los. Du merkst den Spielraum, wenn ich das nach oben ziehe. Okay, optisch sieht es aber nicht so aus. Sonst etwas? Okay, also das Auffüllen und der Rand für ein Bild müssen Sie sich keine Sorgen machen. Du kannst beides tun. Okay, wo es anders wird, steht dieser Abschnitt hier, also klicke ich einfach hier in diesen Bereich. Wir haben vorher gepolstert. Nehmen wir an, ich will mehr, aber ich werde nur die Marge verwenden, weil es egal ist. Dan sagte vor dem Abschnitt, sieh dir das an. Wenn ich den Rand nach unten ziehe. Okay, gut, du siehst den Unterschied zwischen Rand und Polsterung. Padding ist die interne Grenze dessen, was in diesem Abschnitt betrachtet wird. Margin schiebt es von seinem nächsten Element weg. Es fügt also Platz zwischen ihnen hinzu. Auch wenn, sagen wir mal, wenn ich es mit diesem p-Tag mache, macht es immer noch dasselbe. Es wird sich entweder öffnen und Polsterung wird es von der Innenseite des p-Tags drücken. Und der Rand wird die Außenseite des p-Tags irgendwie vom nächsten Element wegdrücken . Es wird genauso aussehen , also wenn ich das hochziehe, habe ich etwas Platz. Ordnung. Mach es. Wenn ich Padding verwende, ziehe es nach unten. Es ist komisch, oder? Du ziehst es hoch, die innere Polsterung ertränkt. Man kann auf diesen Boxen irgendwie die Einsicht sehen , die das Äußere ist. Aber was Sie sehen können, ist das tatsächlich dasselbe? Wenn ich zum Beispiel abklicke, hat es die gleiche Menge an Speicherplatz ich Rand oder Padding verwende, also spielt es hier oder ein Bild keine Rolle, aber manche Dinge machen das so. Ich möchte, dass du oben etwas Platz hast, okay? Oder eine Polsterung auf der Innenseite. Du kommst auf die Idee. Wir machen es hier noch ein paar Mal. Aber in diesem Fall, wenn Sie nach einer Rolle suchen, okay, es ist besser für diesen Fall, Ränder als Padding zu verwenden weil Sie sehen können dieses Feld ganz oben befindet. nichts wirklich falsch. Ich werde mich an Option oder Alt erinnern, klicke darauf. Es ist besser, es irgendwie mit Spielraum wegzuschieben. Das p-Tag ist also von diesem Bit hier getrennt. Dazwischen gibt es eine Lücke. Es macht später mehr Sinn wenn wir Dinge anklickbar machen. Wenn ich möchte, dass das alles anklickbar ist, möchte ich vielleicht nicht, dass das alles auch anklickbar ist. Ich möchte nur, dass das p-Tag anklickbar ist. Los geht's. Also gehe ich zu Was habe ich getan? Ich mache das rückgängig , was ich mache. Also dein Command Z oder Control Z auf einem PC. Und ich habe in diesem Fall einen gewissen Rand oben auf meinem Bild. Ich habe eine Klasse namens Image Hero hinzugefügt, ein Bild überprüft und es ist großartig. Wir können zu den Einstellungen gelangen, indem wir darauf klicken oder die Auswahl hier angezeigt wird . Dasselbe, dasselbe. Das war ein paar zusätzliche Sachen. Ordnung, Bilder werden in den Workflow importiert. 12. Hintergrundbilder wie man Text auf dem image überlagert: Hallo zusammen. In diesem Video werde ich Ihnen zeigen, wie Sie ein Hintergrundbild hinzufügen , das es irgendwie ausfüllt, damit die Texte oben angezeigt werden können. Ich zeige Ihnen auch, wie Sie das Bild abdunkeln, damit Sie übertriebene Texte haben, die lesbar sind. Ordnung, lass uns loslegen. Ordnung, um das Hintergrundbild hinzuzufügen, müssen Sie zuerst ein Hintergrundbild auswählen. Okay, also nochmal, wenn du ein kostenloses Bild für deinen Hintergrund willst, für deinen speziellen Club , den du aufbaust. Gehe zu unsplash.com und tippe ein und finde etwas. Es ist besser, wenn es einen dunklen Hintergrund hat. Wow, muss das nicht sein. Wenn Sie einen hellen Hintergrund wie diesen haben möchten, müssen Sie wahrscheinlich dunklen Text darauf haben. Und ich habe nach etwas für mich gesucht , das einen dunklen Hintergrund hat Das wäre gut, weil der Text gut darauf erscheint. Um Ihr Hintergrundbild hinzuzufügen, Sie es am besten zuerst zu den Assets hinzu, okay, also werde ich sie hier auf die Registerkarte Assets laden. Und du klickst auf den Upload und lädst ihn hoch oder machst es, ich finde es. Und Bild zwei hier, ich ziehe es einfach. Es wird sich dort oben selbst hochladen. Es ist eine wirklich große Akte. Ich zeige dir später, wie du diese kleineren, aber schönen großen Dateien bekommst. Und was wir tun werden, ist die Hintergrundgrafik hinzuzufügen. Beachten Sie wie eine eigene Einheit, es ist nicht wie ein Bild, das wir hinter allem schieben wie in anderen Designprogrammen. Was wir tun ist, dass dieser Abschnitt hier ein hilfreicher kleiner Abschnitt ist , den wir Held genannt haben. Wir sagen, dass Sie einen Hintergrund haben, wir haben schon einmal Hintergrundinformationen gemacht. Schau hier unten ist eine Hintergrundfarbe von Grau. Eigentlich will ich kannst du sehen, dass Bild und Farbverlauf stehen. Also dieses Plus hier, Hintergrund, ich möchte unser Bild hinzufügen, was cool ist. Welcher Farbverlauf? Okay, wenn du das machen willst und wo Bilder stehen, wähle er ein Bild und ich klicke darauf. Es öffnet das Asset-Panel und du musst das bitte sagen. Du gibst es eine Sekunde und es wird riesig. Ihre könnte klein sein, abhängig von der Größe. Okay, also um mit Gedanken über Gewohnheiten zu beginnen, okay. Was bedeutet, dass es wirklich die erhöhte Breite ist , ich es heruntergeladen habe. Es ist riesig. Die, die Sie wahrscheinlich wollen, ist Deckung. Es gibt Benutzerdefinierte, die Sie in jeder alten Größe eingeben können. Man kann sagen, ich möchte, dass es 30 Pixel mal 30 Pixel sind. konntest du nicht tun. Es ist jedoch sehr üblich, nur um abzudecken , welche Farbe tatsächlich bewirkt, ist , dass das Bild an die Größe des Abschnitts angepasst wird. Wenn ich mich dafür entscheide, füge ich zwei P-Tags hinzu, die besagen , ob ich dieses p-Tag mit Befehl C auf einem Mac kopiere, C auf einem PC steuere und dann den Befehl oder das Steuerelement V einfüge, das ich extra erstellt habe. Aber dieser Hintergrund besagt, dass ich größer bin. Also werde ich mehr zeigen. Und ich füge es wieder ein, weil es immer wieder den Hintergrund ausfüllt. Es deckt es ab. Ich kann jetzt keine dieser Seite des Bildes sehen , was ein bisschen schmerzhaft ist, wie Sie vielleicht sind. Der zentrale Teil dieses Entwurfs ist dieser schöne Fluss. Ich möchte, dass es in der Mitte ist und Sie können einige Änderungen daran vornehmen. Denken Sie also daran, dass ein schwererer Abschnitt ausgewählt wurde, da dort der Hintergrund angewendet wird. Und mithören und Hintergrund, ich klicke auf mein Bild. Und du hast ein paar Optionen. Sie können also sagen, können Sie sehen, ob Sie es positionieren und sagen, ich werde oben links beginnen und mich ausbreiten, Sie können sagen, dass es gerade aus der Mitte gewachsen ist. Wenn die Größe geändert wird, befindet sich die Mitte des Bildes in der Mitte. Lass uns das löschen. Jetzt ein bisschen. Die Unterseite ist ein bisschen von den oberen Seiten weg , welcher Knorpel. Das ist also die Art von Kompromiss und du würdest sagen, hey, ich möchte, dass es pixelperfekt ist. Dieses Bild ist perfekt. Es ist ein Produkt, es muss perfekt funktionieren. Das Problem, so für Webdesign zu sein, ist die Anzahl der Geräte, auf denen Sie es anzeigen müssen. Responsive Design ist ein Begriff für die Anzeige auf dem Desktop verwendet wird. Und sie hat diesen hier. Wie sieht das auf einem Tablet aus? Es hat eine ganz andere Größe. Das Format ist unterschiedlich, daher wird der Inhalt in der Größe geändert und angepasst, um sich an diese Größe anzupassen. Und das Bild auch. Wenn Sie es also perfekt und auf dem Desktop finden, wird es nicht perfekt aussehen. Auf dem Tablet. Sie werden nicht in der Lage sein, jedes einzelne Pixel zu sehen und es perfekt umrahmen zu lassen. Im Gegensatz zum Druckdesign, bei dem Sie wirklich perfekt sein können. Du musst es sein, du musst leider zu 90% gutes Webdesign haben. Also komm runter, zeigt ein kleines bisschen davon. Ich zeige Ihnen, wie Sie all diese verschiedenen Breakpoints beheben können. Aber es ist nur etwas, worauf Sie achten sollten , wenn Sie Dinge entwerfen. Und vor allem Hintergrundbilder decken gut ab, weil es sich an all diese verschiedenen Gerätegrößen anpasst all diese verschiedenen Gerätegrößen nur für einen generischen Desktop entworfen wurden. Sie haben gesehen, wie viele Laptops und große Bildschirme und Bildschirme es gibt. Es gibt einfach so viele, dass Ihre Website auf alle reagieren muss. Also lasst uns noch einmal auf unsere Helden-Sektion klicken und uns ein paar andere Dinge ansehen. Bevor wir loslegen, klicke ich noch einmal auf mein Bild. Deckungsbeschränkung ist also eher so, als würde sie das Bild vollständig zeigen, den Felsen unten hier unten. Es drückt es in das bereitgestellte Gewürz , wenn ich es jetzt auf dem Handy mache, es wird eingedrückt und dann gefliest. Ich benutze es nicht sehr oft. Okay. Wenn Ihnen die Fliesen nicht gefallen, können Sie die Fliesen so einschränken, sie alles in das Fenster passen und Sie können sagen ich eigentlich möchte, dass sie nicht für immer Fliesen, Fliesen. Du kannst es links und rechts betiteln, hoch und runter, keine Fliesen, aber es ist nicht das, was ich will. Ich will, dass es abgedeckt ist. Danke. Abdeckung. Das nächste, was ich tun möchte ist dunkel zu werden, im Moment ist es ein bisschen hell. diesen Stilen können Sie Ihre Bilder mit CSS verdunkeln. Sie könnten zu Photoshop oder Figma oder XD gehen oder veranschaulichen, was Sie zum Entwerfen von Canva verwenden, was auch immer es ist, Microsoft Paint. Sie können sich definitiv nicht darin und Microsoft Paint ducken , aber wir müssen es verdunkeln. Es gibt also einen kleinen Trick, den du machen kannst. Ich zeige Ihnen, dass wir ein Bild auf unserem Hintergrund haben. Sie können tatsächlich mehr als eine Sache im Hintergrund haben . Im Moment habe ich also ein Bild im Hintergrund, aber lass uns etwas anderes haben. Deshalb gibt es ein Plus. Sie können sagen, dass ich niemanden hinzufügen möchte, aber Sie möchten hinzufügen, ich möchte ein Bild hinzufügen, weil ich bereits eines davon habe. Kein Farbverlauf oder linearer Farbverlauf, kein radialer. Ich will diesen. Ich möchte bitte eine Volltonfarbe. Okay. Und diese Volltonfarbe wird darauf klicken. Und ich bin mir nicht sicher, ob dieser Zimmerbesuch vom letzten Mal, als ich es gemacht habe, oder ob dies die Standardeinstellung ist. Aber trotzdem möchte ich eine dunkle Farbe wählen. Es könnte schwarz getönt sein. Was ich tun werde, ist es hier direkt in die Ecke zu ziehen , okay, schwarze Nullen 00000 ist die CSS-Farbe für Schwarz. Wenn, wenn, wenn, wenn es weiß war, denken Sie daran. Und was wir tun können, ist, dass wir diesen namens Alpha benutzen können. Im Moment sind es 50%. Das ist die Transparenz des Sliders. Nikola Alpha, Webdesign um schick zu sein. Aber wir wissen, dass es Opazität oder Transparenz ist, okay, Sie können entscheiden, wie ich wähle und wie transparent es ist. Also werde ich etwas finden, wo ich meinen Text lesen kann , weil wir einen schönen guten Kontrast zwischen dem Text und dem Hintergrund wollen . Ordnung, das ist gut genug für mich. Ich klicke ab. Wenn du sagst, das hat bei mir nicht funktioniert, was vielleicht passiert ist, ist, dass ich erneut auf meinen Bereich klicke. Kannst du sehen, dass es hier tatsächlich eine Ebenenreihenfolge gibt. Ihr könnte darunter sein, er könnte oben sein. Sie möchten, dass es wirklich mit ein bisschen Transparenz ganz oben steht . Und das Bild unten, nun, eine letzte Sache, die ich hier notiert habe ist, dass ich den Rückgängig-Befehl Z verwende. Ich bin direkt zu den Verknüpfungen gegangen. Hier ist ein manueller Weg. Schau, rückgängig, wiederhole es. Wenn Sie den Workflow schließen und darauf zurückkommen, diese Rückgängigmachungen nachgegeben. Sie können mit den Schaltflächen rückgängig machen und wiederholen. Ordnung, das ist es. Auf das nächste Video. 13. Knöpfe mit einer Hover-Farbe in Webflow: Hallo zusammen. In diesem Video werden wir uns ansehen, wie wir eine Schaltfläche hinzufügen und sie irgendwohin bringen, werden hier auch diese Hoverfarbe hinzugefügt , plus ein paar Dinge, die mit einer Schaltfläche zu tun haben. Wenn Sie nur wegen der Rollover-Farbe hierher gekommen sind, lassen Sie sie auswählen. Und es ist hier drin. Dieses kleine Drop-Down. Gehen Sie zum Mauszeiger und gestalten Sie das, indem Sie einen Hintergrund und eine andere Hintergrundfarbe auswählen , und Sie fügen den Mauszeiger hinzu. Ich kenne den Titel des Videos, Promises Rollover Color und kaufte. Am Ende habe ich es ungefähr fünf Minuten gemacht. Also los geht's. Das ist der Cheat-Code für den Rest von uns, der alles über Buttons lernen möchte. Lass uns weitermachen. Ordnung, einen Button hinzufügen, ganz einfach. Geh zu Ed. Und hier unten gibt es einen namens Button unter Basic. Und klicken Sie auf Halten und ziehen Sie es. Und es wird nicht untergehen. Es wird auf die Seite eines Bildes gehen wollen. Es wird durch Absatz-Tags unter diesen Text gehen. Aber mal sehen, warum ich nach diesem Button suche. Sie werden es hier in meinem Navigator-Panel sehen. Denken Sie daran, wenn Sie es nicht hängen geblieben sind, gehen Sie zum Navigator, kleben Sie den Rand auf, super praktisch. Sie können sehen, dass er in diesem Abschnittsfeld und er ist ein sogenanntes Geschwister, weil er mit seinen anderen Geschwistern zusammen ist. Er ist alle unter diesen Leuten, die alle in diesem Bereich sind. Er ist die Elternbedürfnisse von Kindern und auch die Geschwister dieser Männer. Wie auch immer, eine Sprache ist für dich da. Aber er ist nicht darunter. Warum ist es darunter? Es liegt daran, dass dieses Bild etwas Seltsames macht. Mit diesem treffenden Tag hier haben wir einen Absatztext. Okay, kannst du sehen, wenn ich den Mauszeiger darüber bewege, kannst du sehen, dass Trisha unendlich läuft, okay? Es wird ein Block-Level-Element genannt. Und was passiert ist, wenn Sie nicht sagen, dass es eine Breite ist, es geht auf 0, soweit ich kann, bis zum Alter. gleiche gilt für den Absatztext. Ich gehe den ganzen Weg hierher und fülle ihn aus. Niemand sonst kann hier oben sein. Das ist die Standardeinstellung dafür. Ein Bild kannst du hier sehen, er rast nicht an die Ränder. Er sagt, ich bin hier. Er nennt sich Inline-Block-Level , Inline, ändere sie. Also hier ist dieser Kerl diese Option hier. Also werden wir das Layout im Laufe der Zeit detaillierter behandeln , aber lassen Sie uns das jetzt machen. Nachdem ich es ausgewählt habe, bin ich in meinen Stilen. Ich gehe zu dieser ersten Option hier heißt Layout. Er hat die Einstellung verschoben, ist auf etwas eingestellt, das in Linie genannt wird. In der Linie meinst du nur , dass er in der Reihe ist. Dieser Typ steht auch in der Schlange. Siehst du, dass er in der Schlange steht? Schauen wir uns den Unterschied zwischen diesem so an. Er ist ausgestellt und er ist darauf eingestellt, a zu blockieren und er wird füllen, Sie können sogar sehen. Danke. Aber afloat sagt, er werde die gesamte verfügbare Breite füllen . Oder ist das ein Typ? wird er nicht. Er könnte nebeneinander stapeln. Knöpfe sind also wirklich gut , wenn sie in einer Reihe sind. Denn wenn ich viele Buttons haben will, wie in diesem Navi und oben , die wir noch nicht haben. Das ist echt gut. Und als Bild möchten Sie manchmal, dass Bilder nebeneinander gestapelt werden. Aber in diesem Fall wollen wir dir nicht sagen, mein Freund ist tatsächlich hier zu diesem gegangen. Schau dir das an. Er sagt: Niemand kann neben mir sein, überhaupt nicht freundlich. Der Knopf wird jedoch nach unten gedrückt und heruntergedrückt. Ordnung. Also knöpfe ich selbst ein bisschen an. Lass uns gehen und etwas ändern. Dieser wird also Event-Details heißen. Okay, schauen wir uns ein paar Styles an , damit du sie alle hier auswählen kannst. Ich kann darin Schüsseln und so machen. Und was ich machen möchte, ist, wenn es ausgewählt werde ich Ihnen erweiterte Topographie zeigen. Topographie. Da ist einer drin. Es heißt, wir werden mehr Typoptionen eingeben, bereit? Da ist einer hier drin, auf dem steht Make Caps. Ich bin mir nicht sicher, warum es dich dorthin gebracht hat. Jedenfalls. Wir waren dort. Ich meine, du tippst einfach Großbuchstaben ein. Sparen Sie sich etwas Zeit. Okay, lass es uns stylen. Jetzt. Was passiert, wenn ich gehe und es tue? Nun, eigentlich habe ich es schon gestylt. Ich wusste es nicht. Ich habe alles mit Mützen gemacht. Was ist passiert? Sie haben gesehen, dass ein Stil namens Button erstellt wurde. Ich hab's nicht geschafft. Es war nicht da , als ich es zum ersten Mal herauszog. Schau dir das an. Wenn ich jetzt einen Button von selbst herausziehe, siehst du, dass er keine Klasse angewendet hat. Okay, aber als ich diesen Stil hinzufügte und so tat, als würde ich es absichtlich machen, aber vergessen habe so tat, als würde ich es absichtlich machen, , ihn zu benennen, weil wir ihn alle tun, habe ich dieses Ding namens Button erstellt. Und das kann verwirrend sein, wenn Sie neu sind und sagen, oh, hat das schon etwas gemacht , weil es eine besondere Anmerkung ist, dass Sie das versehentlich gemacht haben. Also nennen wir das einen Knopf und wir nennen das hier. Okay, nur weil es eine Erbbox ist, werde ich ein Styling machen, das ich nirgendwo anders auf der Website verwenden werde, nur in dieser Heldenbox. Deshalb nenne ich es Button Hero. Möglicherweise landen Sie mit der Schaltfläche Nav oder Schaltfläche Fußzeile, Schaltfläche Kontaktseite. Okay, also haben wir diese Anpassung. Und ich werde ein bisschen stylen. Ich suche mir eine Farbe aus. Unter den Hintergründen für diesen Button wähle ich also nur ein Grün aus meinem Design aus. Sie können jede Farbe wählen, die Sie mögen. Okay, und was will ich sonst noch machen? Ich werde einige Topographiebereiche gut auswählen. Wir werden die neuen Bereiche nutzen. Open Sans ist ein wirklich hübsches, hübsches, ziemlich starkes Wort dafür. Es ist eine sehr vernünftige Body Copy-Schriftart, wirklich lesbar, kostenlos zu verwenden, und ich mag sie, aber ich werde in Bezug auf die Größe fett gehen. Ja, 14 Pixel sehen gut aus für mich. Die einzige andere Sache, die ich tun möchte , ist, abgerundete Ecken hinzuzufügen. Also jetzt in diesem Panel hier, ich möchte Ihnen einen kleinen Tipp zur Verwendung des Stile-Panels geben. Es ist groß und verwirrend. Nicht groß und verwirrend. Es gibt einfach viele Dinge wie wo ist alles, was man nach unten scrollen kann und man es irgendwann findet. Was ich gerne mache, dir vielleicht nicht gefällt, ist du diese kleinen Pfeile hier sehen kannst. Sie können tatsächlich einfach darauf klicken, um sie zu verkleinern, und einfach die gewünschte öffnen. Okay, also was will ich tun? Die Grenzen sind ausgezeichnet, öffnen Sie das einfach, arbeiten Sie daran, schließen Sie es wieder. Fühlt sich etwas mehr an. Befreie mich. Ein weiterer cooler Trick ist mit ihnen. Sie können die Wahltaste auf einem Mac gedrückt halten, die Alt-Taste auf einem PC gedrückt halten und dann auf eine beliebige Taste klicken Alle öffnen sich und halten dieselbe Taste gedrückt. Sie schließen sich alle. Diese kleinen blauen Punkte zeigen dir , dass du irgendwo hier drin etwas geändert hast. Sie haben keine Änderungen an der Grenze vorgenommen. Es ist also nichts los. Also knopf Hero, Nichts. Du hast nichts davon geändert. Du hast ein bisschen Topographie gemacht. Erinnerst du dich, was es war? Es ist richtig. Wir haben alles in Großbuchstaben geschrieben und einige Hintergrundinformationen erstellt. Also, wenn ich jetzt Grenzen mache und ich sage, ich möchte , dass dieser Grenzradius etwas ist. Ich schleppe es her. Ich schaue es mir hier an. Okay. Such dir etwas aus und du gehst. Jetzt drehe ich es runter. Siehst du oh, es ist ein blauer Punkt. Punkt bedeutet, dass ich etwas geändert habe, werde n tun, aber später bedeutet das, dass etwas anderes darauf zutrifft. Es ist nicht etwas, das Sie direkt damit gemacht haben, was wichtig ist, aber wir werden darauf eingehen. Ich weiß, dass du fragen wirst. Ich habe abgerundete Ecken. Schauen wir uns die Polsterung und den Rand an. Eigentlich nein, lass uns dafür sorgen, dass es funktioniert. Wir haben keine abgerundeten Ecken, aber wir haben diesen Link nirgends hergestellt. Eine Schaltfläche hat also einige Standardfunktionen. Jetzt, wie vor den Einstellungen von diesem Zahnrad hier oder wenn es ausgewählt wurde, können wir hier zur Ladung gehen. Es spielt keine Rolle. Viele Optionen, nur ein paar Optionen. Verwenden wir hier nur die wenigen standardmäßig verletzten, wir werden diesen ersten verwenden. Wenn also auf diese Schaltfläche geklickt wird, geht sie zur URL. Sie können eine beliebige URL auswählen. Okay, und es wird sich öffnen und jetzt in einem anderen Tab, okay? Das bedeutet nur, dass, wenn auf die Schaltfläche geklickt wird , diese Website geöffnet bleibt, oben im Browser eine neue Registerkarte geöffnet wird und darauf zugegriffen wird. Beide sind also offen, wenn es einen internen Link zu einer anderen Seite auf Ihrer Website handelt oder Sie möchten , dass sie ersetzt wird. Sie können diesen Offset ändern. Es wird die Website dorthin umschalten, wo immer Sie danach fragen. Okay, lass uns das machen und es testen, einen neuen Tab öffnen und ihn schließen. Ich gehe zu meiner Vorschau. Wir haben sowieso nicht viel Vorschau gemacht, weil es hübsch ist, es ist ziemlich gut darin, Ihnen genau zu zeigen, wie es in einem Browser aussehen wird, ohne dass Sie eine Vorschau anzeigen. Vorschau es schließt alle deine Panels und beseitigt all diese seltsamen blauen Linien, die diese seltsamen blauen Linien weg sind und schau dir das an, ich kann es anklicken und magisch, ich habe mich zu einem erstaunlichen Webseite. Okay, also lass uns hier wieder reingehen und den Augapfel ausschalten. Andere Dinge, die ich Ihnen mit dem Button zeigen möchte , sind, dass wir diese anderen durchgehen. Sie gehen also in eine URL. Dies wird auf eine externe Website wie Hey, schauen Sie sich dieses großartige Webflow-Tutorial , das Sie anhand dieser Summe überprüfen sollten. Aber hier, Alter, du könntest darauf verlinken. Und eine andere ist, dass Sie auf einen Link auf dieser Seite verlinken können. Wir haben nur eine Seite. Wenn Sie also auf eine Seite auf dieser Website verlinken, kann ich nur nach Hause gehen weil wir nur eine Seite haben. Sie können eine Verknüpfung zu einem Abschnitt erstellen. Also machen wir das gleich. Auf unserer einen Seite werden wir eine Navigation hinzufügen, um durch die verschiedenen Abschnitte zu springen. Es funktioniert noch nicht ganz, aber wir machen es. Wenn Sie auf diese Schaltfläche klicken, Sie zur E-Mail einer anderen Person wechseln. Okay. Oder wenn es auf einem mobilen Gerät angeklickt wird, klingeln Sie. Sie können es also wie eine Colas-Nummer haben. Das funktioniert nur gut. Nein, es funktioniert in meinem Browser. Wenn ich es hier in eine Telefonnummer eingebe und darauf klicke, wird es trotzdem versuchen, Google Voice oder etwas anderes zu starten. Aber auf einem Handy klickt es und es wird das Telefon irgendwie vorladen. Das sind also diese Optionen. Im Moment werden wir jedoch nur unsere NEO-URL verwenden , nur weil sie ein Platzhalter ist. Bis später springen wir zu unseren Abschnitten auf unserer Seite. Das sind also die verschiedenen Links. Und die andere Sache, die wir vielleicht tun möchten ist den Hover zu ändern, denn in dem Moment, in dem Sie die Hoverfarbe ändern möchten . Schauen wir uns das an. Wenn es ausgewählt ist, bringe ich Sie an einen geheimen Ort. Also gehen wir zu meinen Styles. In dem Moment, in dem wir uns hier die Schaltfläche ansehen, möchte ich den Hover stylen. Wenn Sie also mit der Maus drüber fahren, funktioniert es. Es ist hier versteckt, wenn die Schaltfläche ausgewählt ist. Webflow weiß, dass einige besondere Dinge mit Buttons gibt, in die wir sie im Moment hier einfügen würden. Wie wird der Boden irgendwo hier drin sein? Es heißt, dass Höhentasten besondere Dinge haben. Hier sind sie. Da ist der Hover, gedrückt auf den fokussierten Hover. Sie können sehen, dass es eine spezielle Klasse hinzugefügt hat, Grün bedeutet Figma, tut mir leid, Figma. Width Flow weiß bereits, wovon Sie sprechen. bisschen wie ein vorab geschriebenes. Es gibt bereits eine Klasse namens Hover. Du musstest es nicht benennen und sagst, hey, sind besondere Dinge, die Buttons haben, wir haben sie gemacht. Sie können sie damit einfach aus dem KU-Dropdown auswählen. Nun kann man sagen, ich möchte, dass dieser Stil für den Hintergrund in etwas anderes geändert wird. Wähle eine andere Farbe, okay? Weil runter und da gehen wir. Lassen Sie uns eine Vorschau darauf geben. Okay, wenn du abklickst, wird eine Art Vorschau angezeigt ohne in den Vollvorschaumodus zu wechseln. Einige von ihnen machen das. Wir werden schweben. Wir sind weniger CSA-Superstars. Und so haben wir einen Hover. Alles andere, was ich dir ein k zeigen möchte . Wenn ich es ausgewählt habe, wenn ich wieder den Mauszeiger bewegen möchte, weil ich es stylen möchte, muss ich hier wieder reingehen, weil es standardmäßig ist. Sobald ich geklickt habe, habe ich geklickt, auf „Zurück“ geklickt und Sie können sehen, dass es hier zur Schaltfläche gegangen ist, aber wo ist das hingegangen? Wenn du die Farbe noch einmal ändern willst, gehe zu Hover und Erzählungen. Es ist alles eine Art geladenes Backup und Sie können das ändern. Sie könnten sich für eine der anderen entscheiden. Die anderen nicht, sie haben nicht funktioniert. Aber Dinge wie gedrückt sind, wenn jemand darauf klickt, was passiert, aber niemand den Klick sieht . Das ist meine Meinung. Wie auch immer, lasst es uns hell und rot, leuchtend gelb, leuchtend gelb machen. Schauen wir uns das an. Sie müssen in den Vorschaumodus gehen, um zu überprüfen, ob gedrückt. Schau dir das an. Wenn Sie darauf klicken, fliegen Sie einer anderen Seite hinterher. Aber hast du es gesehen? Du kannst es sehr schnell, aber du kannst es sehen, wenn es gelb ist. Sie können also drücken, um das Gefühl zu haben , dass es fokussiert ist etwas anderes Google, das mit Tabbing auf unserer Website und Barrierefreiheit zu tun hat und schlecht. Außerhalb des Rahmens für diesen . Lass uns einen Blick darauf werfen. Worauf wir uns sonst noch konzentrieren konnten. Wenn Sie diesen Link schon einmal aufgerufen haben, benutzen die Leute ihn nicht mehr wirklich. Es ändert die Farbe, wenn jemand einmal darauf geklickt hat. Denken Sie daran, dass alle blauen Links lila werden. Das, weil du schon einmal dort warst und meiner Meinung nach nicht wirklich für Button benutzt wurde. Ordnung, cool. Und heimlich hast du deinen ersten Combo-Kurs gemacht , über den wir gleich sprechen werden. Aber ja, das ist ein Button , der es stylt. Oh, die andere Sache ist, dass ich gerade meine Notizen dort überprüft habe. Schweben. Fahren Sie mit der Maus auf einem Telefon zur Arbeit. Ist es nicht. Du kannst den Mauszeiger nicht auf deinem Handy bewegen. Sie können Ihren Finger über den Bildschirm Ihres Mobiltelefons bewegen und die Farbe ändert sich. Also die einzige Sache auf dem Desktop. Also ja, oh, die andere Sache wir tun müssen, ist Padding und Margin, während wir hier sind. Also habe ich meine Buttons ausgewählt, ich kann diesen Stil hier sehen. Ich gehe zu meinem Abstand und möchte ich Polsterung oder Rand? Du musst jetzt nachdenken, bevor ich sage, dass irgendetwas wie ein Stiel verbogen ist. Wenn du Polsterung gewählt hast, hast du dich geirrt Schau, klicke auf Halten. Also kann ich Polster hineinlegen und es bewegt es nach unten. Aber offensichtlich befindet sich das Bezahlen auf der Innenseite der Box. Und Marge. Klicken Sie, ziehen Sie es nach oben. So. Da hast du es. Ordnung, es war ein Stoßfänger. Wir haben gelernt, dass Knöpfe schweben. Wir haben Ihnen die verschiedenen Möglichkeiten gezeigt. Ich habe dir gezeigt, wie man diese schließt, Option oder Alt, um sie alle zu öffnen. Klicken Sie auf einen von ihnen. Wir haben den Comic Sans Appreciation Club besucht und die geheimen Zutaten für diese Buttons hier gefunden . Es gibt nicht nur Knöpfe. Wir haben hier Sachen gefunden. Sie können andere Elemente innerhalb dieses Kurses und innerhalb des Workflows über dieses Dropdown-Menü verfügen , um Dinge anzuzeigen, die sich auf dieses bestimmte Element beziehen. Ordnung, cool. Eine Sache ist also, dass ich, wenn Sie mitmachen, ein Klassenprojekt einrichten werde Sie einreichen können, und zwar ein bisschen. Und im Grunde wird es dafür sorgen, dass du da bist, wo ich bin. Wenn du folgst und nur zuschaust, weiß ich nicht, es ist wirklich gut zu üben, aber wir wollen auch das Klassenprojekt machen. Sie sind größtenteils fertig und bereit zum Einreichen. Ja, mach die Übungen während wir weitermachen. Es ist gut. Es ist eine gute Art zu lernen und es wird das Klassenprojekt sowieso zu einer kleinen Kleinigkeit machen , die man dem nächsten Video hinzufügen kann. 14. Herstellung unseres eigenen Marineblaues in Webflow: Hallo zusammen. Wir werden diese Navigation hier oben aufbauen. Wir werden es gemeinsam aufbauen, damit wir einige der Prinzipien verstehen. Sie werden feststellen, dass ich diese Knöpfe am Ende nicht sehr gestylt habe. Warum? Weil wir das am Ende tatsächlich verbiegen werden. Also mach es, folge mir, baue es mit mir, aber lege nicht zu viel Stil hinein. Verbringen Sie keine halbe Stunde damit, den richtigen Kooning und den Drehpunkt für die Schriftgröße zu finden, denn wir werden ihn biegen. Wir müssen wissen, wie dieses Ding in einer einfachen Form erstellt wird , damit wir, wenn wir das einfache aus Webflow hinzufügen, es anpassen können, in dem Wissen, was wir tun, Dinge wie Float behandeln, Inline- und Blockelemente. Also lasst uns anfangen. Okay, um unser Menü zusammenzustellen , werden wir zuerst einen Abschnitt hinzufügen, weil wir eine Helden-Sektion haben, wir haben unseren langweiligen kleinen Sponsorenbereich. Fügen wir einen weiteren für unseren Navigationsbereich hinzu und ziehen ihn. Denken Sie daran, dass ich es auf die Seite ziehen kann oder ich kann es hier reinziehen. Okay. Hier oben, geh irgendwie an die richtige Stelle, wahrscheinlich nicht im Container. Also habe ich es verpasst. kannst du nachträglich anpassen. Also sehe ich dir meinen Abschnitt hier. Eigentlich möchte ich in den Container direkt über dem Helden sein. Schau uns an. Ordnung, ich gebe ihm einen Namen. Okay, solange ich mich erinnere, okay, du wirst diesen einen Abschnitt nennen. Dieser wird mein Navi heißen, Enter auf der Tastatur. Weil wir das hier auf meinem Modell nachbauen werden. Vielleicht können Sie Ihre eigenen Farben in Urinstilen auswählen , in Ihren eigenen Schriftarten. Also lass uns diese Hintergrundfarbe machen, fange damit an. Denken Sie also daran, dass ich online getötet wurde. Vielleicht ist das Option oder Alt auf einem PC, Option auf einem Mac. Ich werde sagen , wenn das ausgewählt ist, habe ich mein Auswahl-Navi, Hintergrund wird eine Art dunkelgrau sein. Exzellent. Fügen wir ein Bild für das Logo hinzu. Also lasst uns weitermachen. Gehen wir runter zum Bild, okay, und ziehen es einfach hinein. Perfekt. In Bezug auf das Logo hier klicke ich auf Bild auswählen. Und lass uns gehen und eins hochladen. Jetzt habe ich eine, die ich verwenden werde, und ich habe eine generische, die Sie verwenden können. also unter Club Event Site zu den Symbolen. Und ich muss, ich werde Icon Click verwenden. Okay, so sieht es aus. Du kannst Go verwenden, um dein eigenes Symbol zu bekommen, etwas wie icon finder.com ausprobieren und dort nach den kostenlosen suchen. Sie können Ihr eigenes Logo finden, das Sie im Moment verwenden können. Wir könnten einen in Illustrator zeichnen. Wir werden herausfinden, wo x, t, oder einfach eines dieser beiden generischen Club-Icons verwenden. Ein weiteres generisches Club-Icon im Moment, benutze einfach das 64-Pixel-Symbol, das kleine. Aber ich werde dieses visuelle Kajak benutzen weil es das ist, das ich baue. Wir gehen mit dem Kajak-Logo rein. Ich muss die Farbe geändert haben. Irgendwo auf der Strecke. Unsere Banknoten sind jetzt zahlbar, größenmäßig. Okay, es ist komisch, aber manchmal kann man es nicht ziehen und auflisten. Das ist geschlossen. Das scheint zeitweise zu sein. Und was wir tun werden, ist, diesem Bild eine Klasse hinzuzufügen. Also werde ich sagen, das ist mein Bild. Ich verwende Großbuchstaben I, Bild, Logo. Und ich werde sagen, das hat einige, was Polsterung und Rand den Abstand nicht auslegen. Es wird dasselbe tun. Okay, Polsterung und Rand sehen also gleich aus. Ich mache das rückgängig. Okay, also werde ich Margin verwenden. Ordnung, ungefähr. Das tut mir leid. Ich möchte hier meine kleinen Buttons hinzufügen. Gehen wir also zum Hinzufügen, fügen wir einige Schaltflächen hinzu. Lass uns einen Knopf gehen, bring ihn da rein. Du sagst, wie haben wir es hierher gebracht? Okay, also der Weg, das hier rüber zu bringen , heißt Float. Die gewählte Schaltfläche. Ich werde sagen, dass du unter Position dieses Ding namens Float hast. Ich werde ihn nach rechts schweben lassen. Okay, schreibe eine Zeile, aber bei Objekten wird es ihn nach rechts schweben lassen. Was ist passiert? Ich habe dieser Schaltfläche einen Stil hinzugefügt und vergessen, absichtlich eine Klasse hinzuzufügen. Hab ich vergessen. Was können wir tun? Es hat diesen bereits für uns erstellt. Das ist okay. Damit kann ich leben. Ich rufe Button einmal eine Firma namens Space nav an. Nun, was waren meine Tics und dieser, ich werde vergangene Veranstaltungen haben, Sponsorenveranstaltungen. Also dieser hier ist mein großer. Ereignisse. Gehen wir zu Vince. Ich will noch einen. Was wir tun können, ist einfach kopieren und einfügen. Also habe ich es ausgewählt. Befehlen Sie C V auf einem Mac, Steuern Sie C V auf einem PC. Sie können die Wahltaste oder die Alt-Taste auf einem PC gedrückt halten und sie einfach herausziehen. Eigentlich macht es ein Duplikat von zwei, es ist ein bisschen schick. Bei drei Knöpfen war dieser hier, ich kann mich nicht erinnern, Sponsoren. Sponsoren. Auch dies waren vergangene Ereignisse. Er muss wahrscheinlich zu genau benannt werden. Wie dem auch sei, wir bauen unser Navi. Lassen Sie uns eine Vorschau anzeigen, während wir es durchmachen. Schauen Sie sich das an. Okay, es geht noch nirgendwohin, weil ich diese Abschnitte nicht habe, aber ich werde es tun. Ja, lass uns den Abstand dazu machen. Das ist ein Augapfel weg. Also werde ich es an zweiter Stelle zu einem von ihnen sagen. Und weil es angewendet wird, ist es auf all diesen, weil ich Nav-Button, Nav-Button, Nav-Button, Nav-Zone, all diese Dinge kopiert und eingefügt Nav-Button, Nav-Button, Nav-Zone, habe. Wenn ich jetzt einen Knopf hätte, hätte ich einen neuen drin. Siehst du, es wird nicht dasselbe angewendet. Und du magst eigentlich, hey, was ist, wenn ich hier rüber gehe und Button Nav anwende? Kannst du hier sehen, wenn ich hier reinklicke, kann ich button nav eingeben und es würde funktionieren. Ich muss genauso sein. Aber jetzt, ja, es funktioniert. Es ist aber einfacher, einfach darauf zu klicken und hier rein zu klicken und es geht, hey, diese existierenden Klassen, Dan, willst du eine davon verwenden? So wie ich es tue. Ich möchte Button Nav verwenden. Und wenn Sie 1.000 davon haben , was Sie am Ende vielleicht tun, können Sie anfangen, sie zu tippen, aber das Bild, das Sie gerade gezeigt haben, ist Ihr immaterielles Bildlogo. Das ist die Namenskonvention , die ich mag, weil sie es einfach macht. Aber ich habe einen Knopf. Ich habe nur zwei davon, aber es reduziert es zumindest auf diese beiden. Nett. Okay, also werde ich ihn los. Ich werde diese Jungs stylen, die nur einen stylen müssen. Also habe ich sie ausgewählt, egal welche. Okay, ich gehe in meinen Abstand und ich möchte ihn vom ROI herunterdrücken, ihn von oben nach unten und voneinander weg drücken. Okay, also wie mache ich das? Ist es Rand oder Polsterung? Ziehe einfach beide. Dann? Davon wird es ein bisschen geben. Ich will etwas Spielraum an den Seiten. Wenn Sie nun mehr Platz innerhalb der Schaltfläche wünschen, nehmen wir an, dass mein Button hier ziemlich viel negatives Leerzeichen enthält . Dieser ist sehr nah dran, also klicke ich auf, es spielt keine Rolle, auf welchen du klickst. Wird das jetzt Patagonien sein? Lass uns Dan aufpolstern, komm schon. Kannst du das sehen? Die graue, sie hat 15. hast du nicht hinzugefügt. Es ist ausgegraut, weil es die Standardeinstellung ist. Das haben Webflow und Web und Jim hinzugefügt. Diejenigen, die blau sind, haben wir gemacht. Ich werde das von der Seite nach oben ziehen und 32 auf dieser Seite auch. Nun, ein kleiner Trick zum Stylen dieser Dinge wird rückgängig gemacht, wieder rückgängig gemacht. Es wird auf die Standardeinstellungen zurückgesetzt. Wenn du auf einem Mac die Wahltaste gedrückt hältst und eine Seite ziehst, kannst du sehen, dass beide e kommen weil es gleichzeitig links und rechts läuft. Das ist also Option auf einem Mac, Alt auf einem PC. Gleiches gilt für oben und unten. Jeder, der ein Ober- und Unterteil hat. Wenn das stimmt, können Sie das tun. Es liegt an dir. Sie halten gedrückt, Sie halten die Befehlstaste, die Umschalttaste, die Alt-Umschalttaste gedrückt. Ich kann mich nie erinnern. Sie halten die Umschalttaste gedrückt. Es macht sie alle gleichzeitig. Alle gleichzeitig. Okay, also hier ist die Alt-Option ziemlich oft, das Halten der Shift-Taste, ein bisschen Tastaturzertrümmerung. Aber wie dem auch sei, wir sind da. Jetzt. Ich sollte sie durchgehen und komplett stylen. Eigentlich gibt es noch eine Sache, bevor wir weitermachen, denn wir werden das gewesen sein, weißt du noch? Also möchte ich etwas Text hinzufügen. Also möchte ich hier etwas Text hinzufügen. Ich möchte dir zeigen, wie du es baust. weißt du schon. Ich habe am Anfang gesprochen, aber ich möchte Ihnen zeigen, wie es selbst gebaut wurde , sodass, wenn Sie das erhalten, es das Element genannt wurde, das eine Komponente ist , die zum Einziehen bereit ist und wie um es anzupassen. Also lass uns ein bisschen Text hinzufügen und das wird interessant. Wir haben Überschriften und Absätze hinzugefügt , die zuvor Sinn gemacht haben. Ich möchte ein Logo, es gibt keine Like-Logo-Ticks Option. Wenn Sie sich nicht sicher sind, ob es so ist, wenn es keiner von diesen ist, gibt es diesen Block ist ein generischer Textblock. Das bedeutet wirklich nichts. Ist es nicht, der Browser glaubt nicht , dass er etwas Besonderes oder alles trifft. Hey, das ist der Artikel und der Absatz ganz besonders. Nun, das Wichtigste dabei. Okay, wenn es nur unterstützende Zecken sind und Sie sich nicht vorstellen können, wie Sie es nennen sollen. Es ist nichts davon , das zu ziehen und einfach einen wirklich einfachen, ungestylten Textblock zu mögen. Und lassen Sie uns Ihren Blick auf Ihren Brief eintippen. Und wie hieß meins? Ich habe meine in Mützen gesteckt. Lieber. Königs-Club. Es setzt deins ein. Was machen wir hier? Denke ein wenig darüber nach, zieh es wie, was würdest du tun? Worauf würdest du anfangen zu klicken? Welche Begriffe kommen mir in den Sinn. Wir haben es uns vorher angesehen und es hatte mit dem Layout zu tun. Also klicke ich darauf und er ist der Name, er ist im Namenstextblock versteckt. Block bedeutet, dass es den ganzen Weg geht, einen Platz für sich selbst freigibt. Niemand sonst kann in derselben Leitung sein wie sie. Aber wir können sagen, Hey Kumpel, unter Layout möchte ich nicht, dass du blockiert bist, ich möchte, dass du Inline-Block bist. Stellen Sie sich an. Okay? Und es hat ihm eine Klasse gegeben, weil ich einen Stil hinzugefügt habe , der Layoutanzeige, Inline-Block ist. Hey Kate, das will ich nicht. Was ich will, ist, dass ich diesen einen Text nenne. Ich nenne es Logo. Und ich sage, dass Sie den richtigen Ort nutzen, Arbeit erledigt. Ich werde sie jetzt einfach stylen. Ich hole mir den Abstand. Ich werde der Seite etwas Spielraum hinzufügen , war der falsche Weg. Okay, ich gehe zu meiner Typografie. Okay? Und ich gehe zu was benutze ich? kann mich nicht an Roboto erinnern, ich denke Nein, wir benutzen Open Sans oder ist es? Da ist es. Okay. Ich werde die Kühne benutzen. Ich verwende die Farbe Weiß. werde das rote Zeug ein bisschen machen, aber das ist auch die richtige Größe, basierend auf meinem Modell, aber das könnten wir ändern. Cool. Also manchmal ist die Standardeinstellung richtig, okay, wie dieses Bild hier, nur irgendwie, naja, eigentlich ist dieses Textfeld hier auf Display Block gesetzt und wir mussten den nächsten Kerl nach unten drücken und dann wollten wir dass. Aber dann sagst du manchmal: Nein, das wollen wir nicht. Wir hatten das Bild. Denken Sie daran, dass es in der Reihe war, aber es war nicht dort, wo wir es wollten Also drückst du nach unten, ein Leerzeichen frei und drückst den Kerl runter. Ordnung, diese ganze Arbeit. Und du hast mir am Anfang gesagt , dass wir es löschen werden. Warum? Nun, das liegt daran, dass Sie es nicht müssen, aber wir haben an einem Desktop gearbeitet und wir haben irgendwie nur auf diese anderen verschiedenen Displays hingewiesen. Aber wenn ich zum mobilen Wackeln komme und es nicht ganz passt und du das kleine Navbar Nav-Sandwich willst , die kleinen drei Zeilen, auf die du klicken und fallen lassen kannst. Jeder liebt das und mach das in Gang. Es gibt ein bisschen JavaScript. Es sind Breakpoints. Es ist nicht schwer, aber es ist viel einfacher, Webflow das in mir machen zu lassen, selbst als fortgeschrittener Benutzer würde ich immer noch nur das vorgefertigte in Webflow verwenden, aber es ist sehr praktisch zu wissen wie die Dinge laufen float und inline-block funktionieren zuerst, wenn du anfängst es zu modifizieren, weil du es ablegst und du sagst, ich möchte alles ändern. Und alles fällt auseinander und du hast keine Ahnung warum. Jetzt wissen wir, wie ein Teil der Struktur funktioniert. Wir können mit etwas Autorität verwenden, wir können diese Nav-Komponente verwenden. Also lass uns ins Geschäft gehen und das machen. Jetzt sehe ich dich dort. Wir sehen uns im nächsten Video. 15. Wie man eine mobile freundliche burger Bar in Webflow macht: Hallo zusammen. Wir werden diese Navigation oben neu aufbauen. Wir werden die integrierte Komponente aus dem Workflow verwenden , um es super einfach zu machen. Wir werden es so gestalten, wie wir es wollen. Und es wird das Schöne machen , wenn wir auf das Handy kommen, es wird zu diesem Burger-Menü mit einem Drop-down-Menü wechseln , ohne dass wir etwas tun. Okay, lass uns gehen und es in Webflow machen. Ignoriert er, wie schlimm es aussieht? Absolut m Wir werden dazu kommen. werden wir. Okay, was machen wir? Bei diesem alten könnten wir unsere Sektion Nav auswählen. Wir könnten sagen, es gibt mir eine Ausrede , um Ihnen das zu zeigen. Wir haben uns Display, Block und Inline angeschaut. Schau dir das an, sagt keine, okay, und klicke darauf und sag keine, und es geht weg. Es steht immer noch im Code. Okay, nur der Browser kann es auch nicht mehr sehen. Es macht also keinen Sinn, dass es in Ordnung ist, es wieder einzuschalten. Was Sie wirklich tun möchten, ist darauf zu klicken oder das funktioniert nicht, Sie müssen zu der gewünschten Display-Sitzung zurückkehren, okay, was jetzt Fallblock ist. Also drückt es seinen Kumpel darunter runter. Ordnung, also werde ich es einfach löschen, auf Section nav auswählen und gehen. Ich brauche eine Ich kann hier gehen und meine hinzufügen oder ist es meine Navigationsleiste? Und es wird eigentlich ziemlich gut sein, wenn ich über meinem, meinem Sektionshelden, bearbeite . Ich muss hier in meine Abteilung gehen. Okay, geht hier nie über den Abschnitt. Es wird gut funktionieren. Es ist besser, wenn sich dies in einem Abschnitt befindet, nicht zu 100% unbedingt erforderlich ist, aber der Browser und die Suchmaschinen möchten Ihre verschiedenen Abschnitte sehen. Und das bedeutet, dass wir viel einfacher navigieren können. Viel einfacher. Weil kein Wort. Aber Sie haben die Websites gesehen, auf denen ein Fehler auftritt, der besagt, dass Sie zurück nach oben gehen. Sie können auf die Schaltfläche klicken und speichern. Gehen Sie zu dem Abschnitt, in dem wir die Nav-Sektion sagen können. Geh. Also lasst es uns in einen Abschnitt stellen. Also fügen wir einen Abschnitt hinzu, deinen Abschnitt. Ich lege es direkt über meine Navigationsleiste und dann lege ich mein Navi auf. Aber nebenbei. Los geht's, nichts hat sich geändert, außer ich habe diesen Abschnitt. Und die Sektion, die ich Section Nav nennen werde. Du sagst, hey, aber das haben wir schon gemacht. Und ja, wir benutzen einfach Section Nav. Wir könnten, wenn du es zum ersten Mal tust, musst du es schaffen. Aber weil wir es schon geschafft haben, los geht's. Aber es gibt da schon ein Ding namens Abschnitt. Sie werden feststellen, dass der Abschnitt jetzt eine Hintergrundfarbe hat. Das macht gar nichts. Warum macht es nichts? Das liegt daran, dass die Navigationsleiste ihre eigene Farbe hat und sie überschreibt, weil sie spezifischer ist oder übertrieben ist. Okay. Es ist tatsächlich grau im Hintergrund, aber wir können es nicht sehen, weil die Navigationsleisten oben drauf sind. So können wir unsere Navigationsleiste auswählen und entweder die Navigationsleiste aufrufen. Sie sind völlig transparent, dieser hier. Damit ich bis zu meinem Navi durchschauen kann oder wir geraten hier ins Unkraut, nicht wahr? Wir lernen. Wir können nur die Navbar stylen. gibt es keinen wirklichen Unterschied Hier gibt es keinen wirklichen Unterschied, denn ich habe schon angefangen. Ich werde meine Navbar transparent machen und mein Abschnitt wird meine Farbe durchbringen , was mein Dunkelgrau ist. Ordnung, schauen wir uns an, was das Besondere daran ist. Das Besondere ist, dass es zwei große besondere Dinge gibt. Erstens, es ist schon erledigt. Ich kann mein Logo hier einbauen. Ich habe schon ein paar Knöpfe vor mir. Net erspart mir Zeit beim Hinzufügen von Schaltflächen, die es nach links und rechts schweben. Und das auch, wenn ich zur mobilen Version komme, sehe ich , das ist schon ein bisschen JavaScript, das das ausschaltet und ändert. Schauen wir uns die Vorschau an , die besagt, dass ich darauf klicken kann. Oder solche Sachen werden für uns erledigt. Css tauscht das tatsächlich gegen dieses kleine Icon aus. Und dann macht etwas JavaScript dieses schöne Dropdown, aber es ist alles fertig. Okay, ich gehe zurück zum Desktop und gehe zu meiner Vorschau. Lass uns eine kleine Dekonstruktion machen. Wir haben also diesen ersten Teil, der einfach Marke heißt. Alles was es ist, ist ein Container, sie Brand Webflow genannt haben und den sie verknüpfbar gemacht haben. Wenn ich also ein Bild hier reinwerfen würde, wird es einer dieser Links sein, die zurück zur Homepage führen. Vielen Dank Workflow. Was sie auch getan haben, ist, dass sie ein paar Knöpfe haben. Okay. Also der Knopf, Knopf, Knopf. Und wir wissen, wie sie sie hier auf die rechte Seite gebracht haben , du bist wie, ich weiß, Hände hoch, weißt du, hinten. Was war es? Float, richtig? Großartig. Es wird also sagen, dass Sie zwei schweben, oder ist es unter Position? Da ist es. Schwebe zum Es macht keinen Float. Schweben Sie nicht. Warum schwebt es nicht, Dan? Du hast uns versprochen, dass Float funktioniert. Was sie hier gemacht haben, ist , dass dieser Behälter alles einschließt. Also diese milden Knöpfe. Okay. Das habe ich auch gemacht. Ich habe beantragt, auf diesen Knöpfen zu schweben. Was sie getan haben, ist einfach klüger zu sein, anstatt es mit allen dreien gleichzeitig mit dem Wrapper zu tun , legen wir diesen Wrapper außen herum, okay, und in diesem Fall ist Kohle hat es mit diesem Ding namens Diblock gemacht, das wie ein generischer Wrapper ist , der dieses Haus in Teilen erledigt. Aber um einen Blick darauf zu werfen, gehen wir zurück. Sie haben dieses generische Ding, sie haben es genannt und gekauft und ich habe gesehen, wie du zum richtigen Look schwebst und alles darin ist verschwunden. Ich schätze, wir gehen nach rechts, weil wir keine Wahl haben. Die Navigationsleiste fliegt nach rechts und schleppt diese Typen für die Fahrt hinein. Sie sind also vorgefertigt. Aber wir können verstehen, wie es ein bisschen gemacht wird. Wir können neue erstellen, indem wir sie kopieren und einfügen. Nett, okay, ich brauche sie nicht. Das Letzte, was ich Ihnen zeigen möchte, ist diese Marke klobiger. Es ist ein Container, auf den ein Link angewendet wurde. Vielen Dank. Arbeitsablauf. Und was macht es? Ich sagte das Zahnrad, warum funktioniert es nicht? Es funktioniert nicht, weil einfach so viel daraus hervorgehen muss , was gewaltig wäre. Was sie also tun ist, dass dies meine Annahme ist , dass sie tatsächlich gebrochen sein könnte. Aber wenn du das Zahnrad hier siehst, habe ich es ausgewählt. Es gibt einfach so viel, was sie für dieses Menü getan haben , dass sie. Es ist nicht wirklich ein einfaches Drop-down-Menü. Also haben sie einfach nichts getan. Du musst hier auf das Zahnrad klicken und du kannst sehen, dass es meine Link-Einstellungen gibt. Der Moment ist die Verlinkung zu einer URL. Was ich jetzt tun könnte, weil es mein Logo da drin ist. Ich sage „Gehe zu einer Seite“. Welche Seite? Ich habe nur eine Seite nach Hause. Und es ist gut, denn wenn ich diese ganze Website dupliziere , um verschiedene Seiten zu erstellen, bedeutet das, dass es immer, wann immer du das Logo kochst, es wieder auf die Homepage geht, was ziemlich typisch für Websites ist. Ordnung, ich will aber ein Logo da drin haben. Es ist nicht besonders schwer. Wir haben bereits ein Logo von früher. Okay. Was immer Ihre Gewinner sind. Also klicke mein Asset-Panel auf Halten, ziehe es hinein und überprüfe das. Wenn ich drinnen bin, passe ich meine Größe an, was nicht funktioniert , wenn das ein anderes Mal geöffnet ist. Okay. Und los geht's, da ist mein kleines Logo. Ich fange jetzt einfach an, Sachen zu stylen. Das ist es also. Wenn du weitermachen willst, werde ich im Grunde das tun, was wir schon gemacht haben, okay, im letzten Video. Also gehe ich durch und schiebe das an meinem Logo-Text, an meinen Knöpfen herum . Deshalb ist dieses Video so lang wie ein bisschen bloß Zeug. Wenn du nichts anderes zu tun hast oder den Überspringen-Button nicht erreichst, kannst du mir solide zusehen. Lass es uns zusammen machen. Also mein Image, ich habe alle meine Stile. Manchmal sagst du, wo ist das ganze Zeug geblieben? Da ist es. Ich möchte etwas Polster darum legen. Aber denken Sie hoffentlich daran, dass ich ein Logo vom letzten Mal abgebildet habe , um Zeit zu sparen. Gleiche gilt für diese Knöpfe. Sind das aber Knöpfe? sind sie nicht. Kann ich diesen Stil für sie anwenden? Los geht's Button. Navi. können wir absolut. Es hat die Farbe nicht durchgebracht, aber wir haben die Farbe beim letzten Mal nicht hinzugefügt. Fantastisch. Okay, wir können diese Schaltfläche also immer noch wiederverwenden, obwohl wir die letzte Navigation gelöscht haben. Und das ist ein wichtiger Punkt, wenn Sie Stile erstellen und sie verwendet haben , hängen sie einfach ab. Wir müssen sie gegen Ende des Projekts bereinigen , aber sie verschwinden nicht. The Persistent, was will ich machen? Ich möchte, dass dieser grün ist und ich möchte, dass der Abstand größer ist. Größer. Beide Seiten, Haiti auf beiden Seiten. Gleiche Zeit. Ja, das stimmt. Warte durch. Die Wahltaste auf einem Mac, die Alt-Taste auf einem PC. So etwas. Ich möchte, dass meine Hintergrundfarbe keine Typografie ist. Der Hintergrund wird diese Art von grüner Farbe haben. Du wählst deine eigenen aus. Ich möchte, dass der Button die Zecken sein sollen. Ordnung. Das hat nicht funktioniert. Was ich ausgewählt habe, habe ich den Kumpel auswählen lassen. Es ist nicht das, was ich auf diesem Button will, das Navi hier. Ich möchte, dass die Typografiefarbe weiß ist. Da haben wir's. Und ist es das, was ich mir das ansehen möchte? Wollte Caps sein. Wir wissen, dass wir das können. Also Krawattenarbeit, Füße und höher, mehr Typenoptionen, Kappen. Ich möchte, dass es auch Eule ist, keine großartige Stimmung oder Wirkung. Impact benutzt die Comic Sans von Webflow es nicht? Du kannst es benutzen. Das ist in Ordnung. Wir benutzen keinen Bereich, wir benutzen einen Open Sans. Lass mich gehen. Los geht's. Okay, jetzt möchte ich es auf alle anwenden. Sie haben also einen Stil namens Button Nav. Du hast einen Stil, der sich nichts nennt. Es ist also der GO-Knopf. Aber Navi U2-Taste. Da haben wir's. Ich möchte die Farben dieser ändern. Es wird eine Combo-Klasse erfordern, was wir gleich machen werden, aber lassen wir sie einfach für den Moment. Ich werde den Hover nicht machen. Ich werde die Ketzer hier drüben hinzufügen. Also haben wir das schon mal gemacht. Du. Wenn ich Ketzer sage, meine ich den Logotext. Also werde ich einen Textblock verwenden, keinen dieser anderen, weil es eine Art generischer Text ist. Und hoffentlich, wo ist es hingegangen? Es ist so, dass wir es nicht wollen, ich will es so. Die Marke, die das in sich trägt. Dann ist in diesem markenverknüpfbaren Ding ein Bild und dann habe ich es danach? Okay, was flippt irgendwie aus oder setze ich es nach dem Bild? Ich bin mir nicht sicher. Ich werde nur sehen, wie es aussieht. Es ist irgendwie in der Marke. Es ist also in der Box-Marke. Siehst du da, aber es macht etwas Seltsames. Wie beheben wir das? Wir werden uns unsere Position ansehen. Wir werden also sagen, dass das Logo es nicht mitspielen lässt oder der Textblock es nicht das eine oder andere macht. Es wurde versucht, Platz zu nehmen, weil ich vermute und ich bin mir ziemlich sicher, dass es unter oder in der Größe ist? Nein, wir werden nicht angezeigt , obwohl ich hier nach oben scrollen muss. Anzeige. Ich möchte kein Inline-Block sein, ich möchte, dass es so ist, ich möchte nicht blockiert sein, Inline-Block. Da ist es. Cool. Jetzt können wir entweder das Logo so gestalten, dass mehr Polsterung an der Seite hat, oder diesen Text mit der Aufschrift kayak club. Und ich denke, wir haben schon Stil gemacht. Es wurde eine Aktie mit Textblock erstellt. Und das ist interessant , weil es das für mich geschaffen hat, weil ich es nicht war, weil ich das Display geändert habe. Also sagte ich: In Ordnung, du hast keinen Kurs gemacht. Ich mache jetzt eines für dich in der Position, in der das letzte Video tatsächlich eines gemacht hat. Also möchte ich das darauf anwenden, aber ich möchte das loswerden. Was mache ich? Okay? Ich möchte diese Klasse entfernen, okay? Weil ich zwei davon nicht will. Ich möchte, dass der, den ich bereits gemacht , wie hieß er? Es heißt Textlogo. Wir haben es schon mit Inline-Block gemacht, nicht wahr? Also haben wir den automatischen Wein gelöscht und sind irgendwie einen Schritt zurückgegangen. Ich habe die gefunden, die wir wollen, und sie hat alles getan, was wir brauchen. Frohe Tage, cool. Ordnung, wunderschön. Ish. Es nähert sich. Ich möchte mir diesen schnappen und mit der Marge herumspielen. Jeep. Oben, sei die Ober- und die Unterseite derselben. Ordnung, das ist also gut genug für den Moment und es kommt voran. Wir haben die Navigation hinzugefügt. Wir lernten, dass Begriffe kommen, mehr Webdesigner, Sie wissen schon, Begriffe wie Displayblock, Inline-Block, Floating. Schick. In Ordnung, schick. Gehen wir zum nächsten Video. 16. Produktionsvideo 1 – Unterstützung und nächste Veranstaltungsbereiche: Hallo zusammen. Willkommen zum Schutzvideo. Was ist ein Produktionsvideo? Nun, es ist ein Punkt in der Klasse, an dem ich hier tatsächlich einige Details ausfüllen muss , um eine Website zu erstellen, aber ich verwende keine neuen Dinge. Ich verwende bestehende Techniken , die wir alle kennen, und setze sie einfach in die Praxis um, um wiederholbare Dinge zu machen . Ich werde einige Tags starten, einige Bilder in Style-Tags einfügen und einige Bilder einfügen. Und es gibt einfach viele Wiederholungen in diesem. Nicht viele Wiederholungen, sondern eher die Umsetzung unserer Fähigkeiten, die wir kennen, in die Praxis. Jetzt könnte ich das machen und es nicht aufnehmen und dich einfach damit überraschen. Und manche Leute würden sich darüber freuen. Und einige Leute sagten, ich möchte wissen, wie er es gemacht hat , obwohl es die Dinge sind, die wir bereits gemacht haben. Also schau dir dieses Video an, wenn du willst. Das sind diese Produktionsvideos oder überspringe sie. Wenn Sie versucht haben sicherzustellen, dass es hier keine neuen Techniken gibt keine neuen Techniken , verpassen Sie nichts, wenn Sie sie überspringen, okay, also werde ich nicht wütend sein, wenn Sie sie überspringen. Aber mein Rat wäre, zu beobachten, wie ich diese Dinge zu Problemen mache , auf die ich stoße, und wie ich sie behebe. Deshalb ist diese ein bisschen lang, weil wir ein paar verschiedene Boxen herstellen. Da haben wir's. Okay. Und kopiere diese beiden Dinge. Also ja, Produktionsvideo. Folgt mir. Okay, fangen wir an. Was ich machen werde ist, dass ich diese Demo habe, dieses Ding arbeite ich an einem Beispiel. Also was ich tun werde ist, dass du offensichtlich deine eigenen Styles machen kannst. Und was ich machen werde, ist eine Kopie meines Entwurfs. Wir werden erklären, wie Sie es genau aus einigen anderen Designprogrammen herausholen können, die im Moment falsch sind, wir einfach etwas kopieren. Und ich werde meins bewegen, damit ich ein bisschen von beidem sehen kann. Die eine Sache, die du vielleicht auf einem kleineren Bildschirm bist und du denkst vielleicht, ich kann dieses Ding nicht ganz richtig benutzen, deshalb geht es automatisch wieder rein. Wenn du so bist, ja, du sagst das und es deckt einfach zu viel ab. Ja, tut mir leid. Du brauchst einen größeren Bildschirm. Sie können das umgehen, indem Sie hier hochgehen und sagen, dass Ihre Website nicht verkleinert wird, aber es skaliert Ihre Ansicht darauf, setzt sie auf 70%, damit Sie mehr sehen können, okay, und dann können Sie das verwenden Ding damit es draußen bleibt. Oder ist es das? Ja. Nein. Warum bist du draußen geblieben? Ihren Browser erweitern? Es wird nicht drin bleiben. Los geht's jetzt. Nun, ich wusste nicht, dass wir alle etwas gelernt haben, ob du gehst. Browser muss eine bestimmte Breite haben, damit dieses Ding an der Seite geheftet werden kann , weil nicht genug Platz ist, okay? Sie können dies aber auch noch verringern wenn Sie es einbauen müssen. Okay, vielleicht entwirfst du auf einem wirklich kleinen Bildschirm und musstest ihn nur kleiner machen. Ich werde meins kleiner runterholen. Es ändert nichts an der Vorschau, die besagt, dass sie, wenn ich zur Vorschau komme, die richtige Größe hat und aus der Vorschau kommt. Geht zum Glück zurück. Entschuldigung, es ist Dwell Styling. Als Nächstes wollen wir also an diesen Sponsoren arbeiten. Als Erstes müssen unsere Hintergrundfarbe ändern, da sie hier einfach ein bisschen dunkelgrau ist. Was wir also tun, ist unseren Körper zu starten, der alles ist. Und wir sagen, der Körper hat eine Klasse, Kumpel. Okay, ich werde sagen, dass dieser Körper eine Klasse namens Körper hat eine Klasse namens Körper und er wird eine Hintergrundfarbe von haben, ich werde mich bemühen, eine Hintergrundfarbe von nicht weiß zu verlangsamen . Ich werde es benutzen, ich sehe es mir nur irgendwie an. Es ist irgendwie blaugrau. Da haben wir's. Blaugraue Farbe. Los geht's. Damit meine Sponsoren ein paar Dinge tun können. Es kann eine Hintergrundfarbe von Weiß haben. Und ich füge etwas Abstand hinzu. Ich werde etwas Spielraum hinzufügen. Los geht's. Ich werde etwas Text hinzufügen, unterstützt von, okay, also schnappe ich mir mein Plus, ich werde hinzufügen, das wird ein Hit. Ich werde sie durchgehend wie kleine Heizungen benutzen . Wenn ich mir jetzt meine Hierarchie der Überschriften ansehe, ist dies meine wichtigste. Das ist mein, was man H1 nennt. H1, am wichtigsten, wenn ich meine H2 treffe. Das sollte ich wahrscheinlich tun, denn es ist das Nächste, was ich mache. Ich sage, Alice wird mein H2 sein, aber es ist nicht die zweitwichtigste Information auf meiner Seite. Googles Algorithmus wird es sich ansehen und sagen: Hey, was ist das Wichtigste? Wenn das Wichtigste ist, sind Sie krank und das Wichtigste ist nächste Ereignis, das für Suchmaschinen nicht besonders nützlich ist. Die zweitwichtigste Information als Überschrift ist eigentlich dieses Flussereignis. Okay, also überspringe ich H2, weil ich das gleich machen werde. Und ich werde sagen, ich will zuschlagen, ich mache keinen Sinn. Ich mache hier einen Schlag. Das wird h drei sein, obwohl ich irgendwie als H2 vernixt bin, aber ich möchte das eigentlich retten, weil es so ist, dieses Ding hier ist wichtiger. Also werde ich H3 benutzen. Es hat ein Standarddesign. Ich sage dir, mein Freund, ich nenne es „Drei schlagen“. Ich werde ein paar Dinge tun. Ich suche mir ein bisschen Typografie aus. Typografie wird amüsant sein. X0, Schriftgröße, Vermutung ca. 26 ish. Okay. Die Farbe davon wird diese Art von 3D-Farbe sein. Es ist eine Art rosafarbenes Gericht. Wie Kühlschränke Nuclear Red, nicht Pink. Los geht's. Und wir brauchen etwas Polsterung. Es wurde geändert, der Text doppelklicken darauf. Und dieser ist kalt, kalt, unterstützt von Ich möchte etwas Polsterung rundum haben. Was wir also auch tun, ist, dass wir es bis zum Schlagen machen könnten, aber was ist ein besserer Weg, das zu tun? Das stimmt. Mach es mit dem Abschnitt , in dem es sich befindet. Weil es in diesem Abschnitt viele Dinge gibt, die den Abstandsregeln folgen müssen . Also werde ich eintragen, was das macht, okay, ich will dort den gleichen Abstand. Gehen wir also dazu. Sektion Hero. Ich bin 37 von dieser Seite und 53 von oben. Mal sehen, was wir in meinen Abschnitt kopieren wollen . Ich wollte Rand gehen, eigentlich polstern. Und was die Marge angeht, wollte ich, dass Marge 30 perfekt für mich ist. Lass uns ein bisschen aufpolstern. Lass uns so etwas machen. Ich sehe es mir nur aus dem Modell an, das ich habe. Und der Boden wird derselbe sein. Denk dran, Margin, schieb es weg. Überschrift drückt das Innere. Brauche wahrscheinlich etwas mehr Bodenpolsterung. Wie können Sie nun Top und Bottom gleichzeitig machen? Okay, du erinnerst dich, halte die Wahltaste auf einem Mac Alt-Taste auf einem PC gedrückt und sie passen zusammen. Und Sie werden vielleicht feststellen , dass dies tatsächlich nicht perfekt in der Mitte ist, weil dieses H Three seinen eigenen kleinen Spielraum hat. Er sieht, er kommt nur mit seinem eigenen Spielraum, ohne nach einigen der Elemente zu fragen , die Sie von hier aus hineinziehen. Habe einige eigene Einstellungen wie einen Button, ein Button macht einiges ist blau. Ich habe nicht gesagt, dass es blau sein soll, aber es enthält einige Standardkram , die wir überschreiben können. Wir können also sagen, dass wir tatsächlich drei treffen, wir können sagen, ich möchte, dass es Null ist, nicht 20. Ich möchte, dass der Tiefpunkt Null ist. Jetzt ist es irgendwie perfekt in der Mitte. Jetzt hat es mein Auge ruiniert. Es ist wie auf diesen Abschnitt zu klicken. Wir sagen, meine Option oder Alt gedrückt halten, ziehen Sie eine davon heraus. Gut genug. Jetzt brauche ich ein paar Bilder darunter. Also lasst uns jetzt unsere Bilder schnappen. Wir müssen ein paar mitbringen. Also lasst uns die wenigen Methoden machen, die irgendeine Chick-Methode mitbringen. Ich habe in meinen Übungsdateien auf mein Vermögen geklickt. Ich habe einige in Ihren Übungsakten unter Club-Veranstaltungen. Sie sind nicht wirklich da drin. Geben wir ihnen einen Namen. Drinnen von hier. Es gibt Sponsor 12.3. Es kann also einfach alle vier hineinziehen. Sie alle können diese Sponsoren nutzen. Okay? Und dann gehe ich zu, was wir in der Vergangenheit getan haben, ist, dass wir gesagt haben jetzt füge ein Bild hinzu, ziehe es hinein und wähle es dann von hier aus aus. Und das funktioniert total. Aber ich zeige Ihnen, es ist eigentlich einfacher, direkt zum Assets-Panel zu gehen und zu sagen , dass Sie diesen gerade an der falschen Stelle ansprechen. Es ist in Ordnung. Lass mich gehen. Das nächste That's AU ist das nächste. Ein bisschen groß. Es ist okay, wenn du sie ziehst und du sagst, warum, warum geht es oben? Ed ist komisch. So funktioniert der Codefluss einfach. Manchmal muss man es einfach entweder einfach hineinwerfen und danach bewegen oder es einfach auf der blauen Linie lassen , weil er einfach um den Ort springt. Theorien. Als Nächstes melden wir uns bei Who's next. Dieser. Dies sind nur verschiedene Logos, die aus verschiedenen Projekten hergestellt wurden. Und Sie sehen, dass es auch hier ziemlich einfach ist, das zu tun. Machen wir es also eher in diesem Fall als mit dem Dokument. Es ist der letzte Grund für CSS. Das ist der GAG für dieses T-Shirt, das ich trage , das wir ausmalen. So fühle ich mich, als würde ich es tun. Jedenfalls. Ich nehme mein Design und verwende CSS, um es mit Buntstiften einzufärben. Es ist wie eine große Farbgebung für Erwachsene in der Version, aber du machst Codierung oder zumindest Workflows. Bewältigen. Also habe ich meine Bilder, verkleinern wir sie. Also klicke ich einfach auf den einen. Du bist ein bisschen kleiner, um sie in die richtige Größe zu bringen. Wir gehen. Scheint ungefähr richtig. Standardmäßig ist dieses Treffen mit drei blockiert, sodass sie alle nach unten gedrückt werden. Und standardmäßig sind die Mitglieder der Bilder inline, sodass sie nebeneinander bleiben. Ich würde sie gerne ein wenig ausräumen. Also werde ich diesem Bild eine Klasse hinzufügen . Es gibt nichts. Okay, ich nenne dich Image. Ich nenne dich Image-Sponsor. Und hier wird es nur eine Liste von allen geben. Ich füge es diesem hinzu. Wo hat es getippt? Kannst du es in irgendwelchen bestehenden Klassen sehen? Es zeigt mir nur ein paar Tage, wenn ich reingehe. Bin ich. Okay. Hey, Angular Sponsor. Da hast du es. Sponsor. Du sponserst. Los geht's. Es spielt keine Rolle , welche ich ausgewählt habe. Ich kann sagen, ich möchte, dass sie alle auf beiden Seiten etwas Spielraum haben . Es ist ein Halten meines Alt oder meiner Option, um es irgendwie zu bekommen, damit es nicht zur nächsten Zeile übergeht. Ja, sieht gut aus. Als Nächstes brauche ich einen weiteren Abschnitt. Also sage ich neue Sektion, Sektion, Sektion. Gehst du, es wird sehr unter dir liegen. Es muss in meine Dose gehen, in die Sponsoren gehen, aber es muss in meinen Container gehen, was schwierig ist, oder? Von hier. Es ist außerhalb davon. Hier oben. Es ist jetzt in meinen Sponsoren enthalten. Kannst du sehen? Es ist immer noch in meinen Sponsoren, aber wenn ich es nach links ziehe, kannst du sehen, dass es irgendwie ist, die Einrückung ändert sich und du kannst irgendwie rechts drüben sehen, also falsch, rot hier, es wird in meine Behälter. Ich steige ein bisschen mehr. Es wird in den Körper gelangen, nicht was ich will. Irgendwo da drin. Da haben wir's. In meinem Container. Geben wir ihm einen Namen. Nennen wir es Abschnitt, und dieser heißt nächstes Ereignis. Nächstes Event, Informationen auf meiner Tastatur. Ich mache den Hintergrund jetzt grün. Lassen Sie uns zunächst den Hintergrund grün machen . Ich will dir etwas zeigen. Hintergrund wird sein , es wird eine grüne Farbe haben. Was Sie jetzt tun können, ist, weil Sie sehen können, ich kann beides sehen. Ich kann, das heißt nicht, später im Kurs zu sein, aber hey. Verwenden Sie die Pipette. Schau dir das an. Ich kann mir hier jede Farbe aussuchen, oder ich kann hier rüber gehen, sieh mal, stahl diese Farbe. Da haben wir's. Also habe ich diesen Abschnitt. Lassen Sie uns eine Vorschau anzeigen. Das passiert mit der Auswahl. Vorschau. Vollständig weg. Es verschwindet , weil es keine Höhe oder Breite hat. Was Webflow macht, denn weil wir diesen leeren Abschnitt haben, absolut ist es keine Höhe, weil wir keine Höhe hinzugefügt haben. Die Höhe ist einfach magisch. Und doch, weil Webflow weiß, dass Sie ausflippen und weglaufen würden, wenn Sie einen Abschnitt hinzufügen und ihn erst sehen könnten, wenn Sie Höhe hinzugefügt haben. Was es also tut, ist, dass es hier nur vorübergehend erhöht wird, damit Sie Dinge hinzufügen können. Und es ist nicht nur eine komplett leere Box, keine sichtbaren Zeichen. Falls Sie das codieren, würden Sie diesen Abschnitt hinzufügen und es gibt nichts zu sehen. Okay, deshalb gibt es irgendwie deswegen nichts zu sehen. Erst wenn Sie ihm eine Höhe geben, indem Sie diesen Abschnitt auswählen und sagen, schauen wir uns die Größe an. Man könnte sagen, ich will eine Körpergröße von 30 oder 300. Jetzt hat es eine Höhe, weil wir ihm gesagt haben, dass dieser Abschnitt eine Höhe hat. Wenn Sie nichts haben, was automatisch angehoben wird, lassen Sie es klären. Sie können darauf rechtsklicken. Können Sie mit der rechten Maustaste klicken, wenn Sie darauf klicken, aber das können Sie nicht. Wenn Sie es einfach von dort löschen und die Eingabetaste drücken, wird es auf die Standardeinstellung zurückgesetzt, oder? Das tut es. Okay. Ich weiß nicht warum? Weil ich das so mache. Halten Sie die Wahltaste auf einem Mac gedrückt, Alt-Taste auf einem PC und klicken Sie darauf, klicken Sie auf das Wort und es wird einfach auf die Standardeinstellungen zurückgesetzt. Ordnung, jetzt sind wir wieder bei einer Box, die keine Höhe oder Breite hat, aber wir wissen, dass wir einige der Abstände hinzufügen können. Wir könnten also den gleichen Abstand wie diesen verwenden. Schauen wir uns das an. Wir haben eine Marge von 3.049,73. Du entfernst eine 73? Ich erinnere mich an 49,30. Ordnung. Was war es? 49. Das waren 73. An einen erinnerst du dich. Danke. Und ich kann mich nicht erinnern. 49. Ordnung. Es läuft schlecht, Leute. Ordnung, also 30, 49, das kann ich machen. Wo ist meine Abteilung? Wo ist es hingegangen? Es ist winzig klein. Lass uns einen Blick darauf werfen. Ordnung, was habe ich getan? Ich wähle es aus. Ich habe ihm einen Rand gegeben, ich habe ihm eine Breite gegeben. Ich habe keine gegeben. Also geben wir es einfach ein und schauen, ob es sich selbst repariert. Und dann 49. Hey Leute, lasst uns wieder zum Leben erwachen. Und ganz unten machen wir auch 49. Ordnung, wir haben also eine Art Struktur am Laufen. Fügen wir den Titel „nächstes Ereignis“ hinzu. Und was wir hier tun werden, ist, dass wir dieses wiederverwenden und kopieren, weil das gesamte Styling darauf angewendet wurde . Es ist das richtige Alter von drei Jahren, der falsche Text. Also habe ich es für alle Stile kopiert und eingefügt, und dieser heißt einfach nächstes Event. Das einzige Problem dabei ist, die Art von Kontrast hier eine gute Idee zu sein schien, aber es sieht ziemlich schlecht aus. Jedenfalls. Wir müssen mit rot auf grün brennenden Augen leben und uns mischen. Aber ich will, ich will das vielleicht, was wir entschieden haben, ich habe vorgeleert, dass es das H2 ist, also habe ich es übersprungen. Also werde ich gehen, wirst du schon drunter schlagen? Es wird mein H2 sein. Und ich werde es mit H2 schlagen. Und wir werden sagen, was ist das? Es heißt, Lass uns Typografie machen. Zuerst werden Open Sans sein. Du tippst einfach 0 ein. Wenn du das geöffnet hast, springt es zu den O's. Wenn es mutig ist, ist es in Ordnung. In Bezug auf die Größe wird es etwas größer und es wird weiß sein. Und es wird heißen, dass Sie sich Ihre eigene Veranstaltung einfallen lassen. Meins ist da ist ein Fluss in meiner Nähe. Okay. Ich kann den River nicht aussprechen. Irisch. Mein Gu mein Ego. Wenn Sie Ire sind, tut es mir leid. Manche Namen, bei denen ich es einfach finde, ich finde es wirklich schwierig. Mike. Wenn du mir einen Maori-Namen nennst, wäre ich okay. Aber wie dem auch sei, lass uns das nächste Ding, Elisa, nettere Blockelemente. Sie stapeln sich also alle irgendwie übereinander. Lass uns ein Bild hinzufügen. Ich werde eigentlich nur schummeln. Kopiere das. Es ist dasselbe Bild , weil ich das will. Ich will so etwas wie die Details dafür hier runter. Und ich werde etwas Absatztext hinzufügen. Ich kopiere das einfach. Wenn ich das kopiere, ist das interessant, also könnte ich es kopieren, weil es die weißen Häkchen sind, die ich will, und ich füge es ein. Ich klicke hier rein und füge es ein. Okay, jetzt hat es ein paar Dinge getan. Es ist in den Stil gebracht. Schau es dir an. Diese beiden Dinge sind falsch daran. Die weißen Texte kamen nicht und diese große Polsterung hier drüben kam. Was habe ich falsch gemacht? Es ist also im Grunde nichts, was ich will. Okay, also wenn du es herausgefunden hast, dieser Heldentext , sorry, dieser Helden- und Absatztext , den wir hier hinzugefügt haben, ist er da. Er hat einen Job auf der Welt und es war ein bisschen knapp . Du kannst das irgendwie sehen, ist es hier? Es hat einen Job und es ist dieses blaue Ding. Und was es ist, dass wir ihnen Überschriften gegeben haben. Also lasst uns alle an Bord gehen. Woher kam der weiße Text? Oh, das stimmt. Es kam von hier. Okay. Es kam aus der eigentlichen Sektion. Der Abschnitt sagt, ich habe eine Topographie des Lichts. Du kannst gehen. Aber diese, die Helden-Sektion, sagt nichts darüber aus, welche Farbe die Typografie haben sollte. Okay. Ich weiß, dass es nicht daran liegt, dass es diese Bernsteinfarbe hat, was bedeutet, dass es durch etwas gefärbt wird. Aber das habe ich nicht getan. Es wäre blau, wenn ich es färben würde. Also kann ich eines von zwei Dingen tun. Wenn ich mir das ansehe, habe ich zwei Absätze und oben habe ich Text. Sie sind alle weiß. Wir machen dieses rote Zeug gleich. Aber was ich tun sollte, ist zu dieser Heizung zu gehen , um zu sagen, dass ich eigentlich nicht weiß sei. Ich erinnere mich, dass ich die Wahltaste oder die Alt-Taste gedrückt halte und darauf klicke, um sie loszuwerden. Anstatt zu sagen, dass das weiß ist, werde ich sagen, dass der Abschnitt Next Event sein wird, alles darin wird weiß sein , sofern ich es nicht anders sage, welches ist dieser Typ, er ist ein Kind der Eltern. Die Eltern sagen, sei weiß und das Kind sagt auf keinen Fall, ich werde rot sein. Dieses Kind weiß es nicht besser. Niemand hat ihm gesagt , dass er nicht gelesen werden möchte. Also nimmt er einfach alles, was die Eltern sagen. Du siehst diesen Fluss irgendwie. Okay. Sie stylen das Out-of-Box so weit wie möglich und tun dann einzelne Dinge, um es zu überschreiben , ein bisschen spezifischere Dinge, Spezifität. Also schaue ich mir dieses Design immer an, wenn ich arbeite, ich bin wie die meisten seiner weißen. Lass uns die Vorhersage weiß machen und wir machen ein bisschen. Wenn es halb und halb ist, wähle einen von ihnen. Es ist besser, als dieses, dieses und dieses zu stylen . Also was ich tun möchte, ist diese Hero Texts zu entfernen , weil sie mir nicht gefallen haben. Ich hätte einfach einen Absatztext aus meinen Anzeigenoptionen ziehen sollen. Aber denk dran, Dropdown, ich kann sagen, entferne einfach diese Klasse. Los geht's. Jetzt will ich zwei davon. Ich habe meine SMS. Ich habe meine Meinung zu einem anderen Dokument. Du tippst einfach etwas für deine nächste Veranstaltung ein. Du kannst es lassen Loren Ipsum drin, wenn du dir nicht sicher bist, was du da drin, wenn du dir nicht sicher bist, was du Lernenden bekommst und diese Art gefälschter Text, der aufgetaucht ist, okay, du kannst ihn einfach abziehen, wenn du ein p-Tag hinzufügst, auch wenn du willst nur kopieren und einfügen, wo das in den Absatz geht, du ziehst es auf irgendeine Weise, du bekommst einen Teil von diesem Zeug, benutze es einfach heraus. Es ist eine Kopie und lösche sie dann. Du brauchst es nicht. Nun, es gibt viele Online-Optionen. Sie können Loren Ipsum-Text von holen. Ich habe meins in Figma und eine XD Datei. Also schnapp ich mir einfach meins, Paste. Okay, ich muss zurück. Da haben wir's. Ich werde doppelte Renditen erzielen und im Moment werden wir nach dem Tick-Styling später den richtigen Platz schaffen. Die andere Sache, die ich wahrscheinlich tun möchte, ist was sollen wir tun? Jetzt könnte ich eine Klasse hinzufügen, um zu sagen, dass die Ticks, die sich in meinem Sektionsereignis befinden, oben eine Polsterung haben können , um sie nach unten zu drücken. Und das schafft eine neue Klasse. Oder ich schaue mir Klavier an, ich habe schon einen Kurs gemacht. Ein zitiertes Material. Und ich könnte es einfach hinzufügen. Es spielt keine Rolle, ob es vom Bild nach unten oder vom Absatz nach oben gedrückt wird. Also kann ich dir sagen, mein Freund, es wird Abstand haben. Lass uns oben ein paar dieser 32 haben. Lass es uns machen. Lass uns die beiden unten machen. Ich klicke nur darauf , um reinzukommen. Nun, du klickst und ziehst es. Los geht's, ein bisschen Text. Und die eine Sache sowie diese hier, wie hast du das bekommen? Du könntest versuchen, es als separate Boxen aufzuteilen , aber damit bin ich mir nicht sicher, warum der Redakteur, den Cohen mich gemacht hat, ich bin kein Fan mehr davon, aber wenn du diesen Chunk hinzufügen willst, also wählen Sie diesen Abschnitt aus. Was wir tun können, ist eine Grenze hinzuzufügen. Also lasst uns das alles schließen. Das wird Jungs haben. Also haben wir abgerundete Grenzen gemacht. Sie können dies sowohl für Abschnitte als auch für Schaltflächen tun. Ich mache das rückgängig. Es ist nicht das, was ich will. Kannst du hier unten sehen, es gibt diese Optionen. Grenze. Ich will eine Grenze, nicht auf allen Seiten. Also lasst uns zuerst alle Seiten machen. Geben Sie zuerst eine Breite ein und lassen Sie uns sie in zehn setzen , nur damit Sie sie sehen können. Standardmäßig sind es also alle Größen. Sie können verschiedene Arten von Rändern auswählen. Ich werde nur eine harte Linie haben. Und was ich eigentlich tun will, ist zu sagen, dass ich es nicht von allen Seiten haben will. Ich möchte es auf Null setzen und ich möchte speichern, dass diese Seite nur eine Grenze von etwa 30, ungefähr 50 hat . Ein weiterer kleiner Trick während der Arbeit ist , hier rein zu klicken und einfach den Aufwärtspfeil zu benutzen. Du siehst hoch, hoch, hoch. Wenn Sie die Umschalttaste gedrückt halten, steigt sie um 109.000.1020. Also benutze ich das ziemlich oft. Da hast du es. 50 wird für mich funktionieren und die Farbe ist wähle eine Farbe für den Stahl, mein Pipettenwerkzeug. Es passt noch nicht genau zusammen, aber wir kommen dahin. andere Sache ist, ich habe diese Polsterung von der Seite, weil es so aussieht, als würden wir sie lesen. Es ist sehr schwer , sie auf der gesamten Website zu lesen. Also werde ich es kürzen. Ich könnte also eine Klasse für diesen Absatz erstellen, um den Abstand zu erfassen und zu sagen, dass der Rand von der Seite geht. Wie man es zur Seite macht, weil es nicht viel Platz gibt. Zieh es ein wenig, damit das funktioniert. Aber ich musste eine Klasse erstellen. Es wird automatisch als Absatz bezeichnet. Ich würde es P nächstes Event nennen. Aber das ist ein schlechter Weg. Nun, es ist kein schlechter Weg. Es ist nur eine Extraklasse , die du nicht brauchst. Weil ich den Abschnitt von int habe und ihn einfach hinzufügen kann. Ziehe es, ziehe. Oh, stell dir nicht vor. Es ist die Überschrift. Wir gehen, das Malen geht rein. Ich sehe mir mein Ding an. Das ist gut. Gut genug. Ordnung, da sind wir gerade. Da waren ein paar neue Kleinigkeiten drin, aber im Wesentlichen die gleichen Dinge, die wir bisher verwendet haben , irgendwie in einem eher realen Projekt. Und du darfst trotzdem mit mir schreiben und dir mein Geschwafel anhören. Das ist es also. Kommen wir zum nächsten Video. 17. Hyperlinks & entfernen von Unterstrich und Farbe aus Link in Webflow: Hallo zusammen. Ich zeige Ihnen hier, wie Sie diesen Hyperlink erstellen. Wenn Sie darauf klicken, wird eine andere Website geladen. Ich werde dir zeigen, wie man so hässlich blau und unterstrichen stylt . Und wir machen es weiß und unterstrichen. Aber ich zeige Ihnen auch, wie Sie den Basiswert entfernen können. Hyperlinks sind also anklickbar und sie sind zu einer Website gesprungen und jetzt wird zu einem Link zu einer Karte gesprungen. Lassen Sie mich Ihnen zeigen, wie Sie das Stylet in Webflow beenden. Ordnung, also bin ich zurück zum Vollbildmodus gegangen und kann meinen Browser rausziehen. Und lass uns über Hyperlinks sprechen. Was sind sie? Sie sind ein bestimmtes Beispiel und so weiter in einem Blogbeitrag, können Sie hier und diesen kleinen Link hier im Text sehen , dass der Autor entschieden hat , dass es großartig ist, irgendwo von hier aus zu verlinken. Wenn ich darauf klicke, wird es auf eine andere Seite gehen. Okay, ich gehe zurück. Es gibt ein paar von ihnen hier drin. Sie nutzen sie, um Affiliate-Links anzubieten. Okay, also er spricht über Dinge wie, Hey, Notizblöcke, die völlig irrelevant sind, aber ich habe entschieden, dass es Teil ihrer Art der Monetarisierung ist, dass Notizblöcke, wenn ich darauf klicke, an eine Affiliate-Link zu Amazon mit Notizblöcken. Okay. Zufälliger Notizblock. Ich glaube nicht, dass es das ist, was diese Person erwähnt hat, aber hey, Sie können auch zu Pfefferminzbonbons und Kopfhörern gehen und alle gehen zu Amazon. Dieser hier geht an Muji, was cool ist. Hatten sie ein Affiliate-Programm? Sieh nicht so aus. Vielleicht. Ich liebe es sowieso, dass es Gesellschaft gibt. Das sind also Hyperlinks. Was wir tun werden, ist , zu einer Google Map zu gehen. Wenn also jemand hier unten sagt, klicken Sie hier für die MapLocation. Wir wählen es aus. Und was Sie bemerken werden, wenn ich irgendeine Art von Text hervorhebe, kann ich ihn angesichts dieser Optionen fett und kursiv schreiben. Es ist nicht das, was ich tun will. Ich will diesen hier haben. Ich wollte einen Link einfügen. Oh, und das Blau darunter, das wir lieben. Das ist also der Link. Lass es uns irgendwohin gehen lassen. Also gehe ich zu meinen Karten. Ich suche meinen Fluss. Okay. Meg, Meg, ich Agriba. sich den Club anschaut , ist das der Anfang des Flusses. Ich möchte woanders hin, aber hey, es ist in Ordnung. Okay. Ich werde es teilen. Ich werde mir nur einen Link schicken lassen und ich kopiere ihn. Ich füge es hier ein. Okay, also hier ist mein Link. Da ist es. Ich klicke auf das kleine Zahnrad. Und ich werde es wegbringen, um den Hash wegzunehmen. Der Hash ist als Platzhalter da, Sie müssen ihn nicht dort lassen. Es erkennt einfach an , dass es sich um einen Link handelt und verwendet einen Hash. Es ist also kein Pfeil , wenn Sie darauf klicken. Aber lösche den Hash, setze eine Nance. Ich werde meinen dazu bringen, einen neuen Tab zu öffnen, weil ich möchte Leute den Workflow offen halten. Großer Sprung zur Karte. Es gibt einen internen Link. Hab das nicht an. Cool. Also lasst es uns testen. Gehen wir zur Vorschau. Und gehen wir zu unserem Link. Hey, und es öffnet Google Maps für L River bei einem Clog-Angriff. Wie auch immer, lass es uns stylen. Gehen wir also aus der Vorschau raus. Hier drin, Deckelstilet. Also lasst uns eine Klasse hinzufügen. Also geh zu unseren Styles. Und ich habe es ausgewählt. Ich werde sagen, dass Sie eine Klasse für Hyperlink sein werden . Hyperlink. Und ich möchte die Standardeinstellungen überschreiben. Da kommen ein paar Sachen durch. Sie sehen all das irgendwie aus den Standardeinstellungen für einen Link. Deshalb sagen sie NBA, ich muss Aereo sein und vielleicht diese Größe, diese Größe , diese Farbe, und das braucht Dekoration. Das ist das Erste, was wir loswerden können. Es braucht Dekoration ist unterstrichen. Ich sage, ich will es nicht an haben. Schalten wir es also aus, indem wir zu Keine, keine Textdekoration gehen. Die andere Sache, die ich tun möchte, ist, dass ich die Farbe in Weiß ändern möchte, bitte. Okay. Aber ich frage mich jetzt, was der Basiswert ist, es liegt an dir, was du tun willst, okay, also lasse ich den Basiswert eingeschaltet, weil es irgendwie universell ist, vielleicht ist es ein Hyperlink, der unterstreichen wird. Das Blau ist jedoch offensichtlich ein bisschen hart mit unserem Design. Jetzt ein bisschen Vorahnung für den späteren Teil des Kurses, wenn wir über SEO sprechen. Dies ist jedoch einer der wirklich wichtigen Faktoren um Ihre Rankings für Ihre Website zu erhalten , um Ihre Rankings für Ihre Website zu erhalten, wenn andere Personen auf ihrer Website Hyperlinks erstellen , die auf Sie verweisen. Okay, also unser Hyperlink oder ist es okay, unterstützt Google Maps, aber nehmen wir an, dies war, um auf einen Lieferanten für Kajaks zu verlinken und sagen, dass Sie Ihre Kajaks hier an diesem Ort kaufen sollten , und hier ist der Link. Das sind die Arten von Links, die wirklich wichtig sind und wonach Sie suchen und für Ihre Website oder Ihren Rang. Nun, daher ist es für Ihre Website nicht so wichtig, sie zu versenden . Aber wer auch immer diese Links bekommt, diese eingehenden Links, wie der Kajakladen, wie in meinem Fall hier. Und sie werden Links zurück zu ihrer Website lieben. Es ist irgendwie wie das, was ausmacht, es ist einer der wirklich großen Indikatoren für Google. Sobald Sie Ihre Website haben, können Sie unter anderem nach Personen suchen , die mit guten Keywords auf Sie verlinken. Hier hatte ich an dich verkauft. Wenn dir dieses Video gefällt, schätze ich es, meine Kurse und das hilft mir. Und Michael sagt, werde beliebt. Wenn Sie also eine Website erstellen und es irgendwo in Indien angebracht ist , den besten Webflow-Kurs im Internet zu nennen. Es geht, du Dan, ich mache daraus einen Hyperlink und habe auf diesen Kurs hingewiesen. Ja, das ist mein Backen. Aber Hyperlinks, super wichtig. Es gibt etwas mehr Navigation für Ihre Website, aber damit sie auf Ihre Website verweisen, ist Goldstaub für Suchmaschinen wirklich hilfreich? Ordnung, das ist es. Auf das nächste Video. 18. Ankerlink zu einem anderen Seitenabschnitt in Webflow: Hallo zusammen. In diesem Video machen wir das und ich klicke auf eine Schaltfläche und sie rutscht nach unten in den anderen Abschnitt. Es ist eine Möglichkeit, auf einer einseitigen Website zu navigieren , bei Sie nicht wirklich zu separaten Seiten springen, sondern einfach zu verschiedenen Teilen davon springen. Die Cold-Element-IDs und Anker, aber in Wirklichkeit sind sie nur schickes Zeug zur Seitenfoliennavigation. Lassen Sie mich Ihnen zeigen, wie sie funktionieren. Um diese Navigation zu erstellen. Es funktioniert irgendwie rückwärts. Deshalb ist es wirklich schwer, sich daran zu erinnern, und am Ende wirst du zu diesem Video zurückkehren oder es irgendwo aufschreiben. Du fängst also nicht mit dem Knopf an, okay, was natürlich erscheint, wenn du damit anfängst, wo du hin willst. Ich will diesen Button, wenn er angeklickt wird, um hier runterzukommen. Ich werde diesen Abschnitt hier erläutern. Ich möchte zu meiner Einstellungsoption gehen. Ich gebe ihm einen Ausweis. Das ist es, was es benutzt. Der Button weiß, wohin er gehen muss. Okay, also geben wir ihm jetzt einen Namen. Du musst vernünftig sein, naja. Es ist nur ein Abstand in einem Abschnitt , der als nächstes Ereignis bezeichnet wird. Okay, sieh dir das an. Wenn ich Enter drücke, wird sie in die Bindestriche gesetzt , denn ich scheint mit oben und unten in Ordnung zu sein, aber sie sind nur einige Dinge wie IDs, mögen keine Leerzeichen. Also zwingt es dich, kleine Bindestriche zu setzen und abzukühlen. Das ist also die halbe Arbeit. Nun gehen wir auf die Schaltfläche und sagen dir, wenn du angeklickt wirst sorta Einstellungen. Wir sagen, ich möchte nicht auf unsere Website gehen. Ich möchte, dass es in diesen Seitenbereich geht. Und Sie werden feststellen, dass das erst jetzt erscheint, obwohl wir Abschnitte für kalte Dinge haben, ist es egal. Es will einen Ausweis sehen. Also dieser Link da, okay, er heißt Anker. Es wird zu diesem Anker hier gehen, Sektion nächstes Event genannt wird. Wenn es angeklickt wird, probieren wir es aus. Lassen Sie uns eine Vorschau anzeigen. Und lass uns darauf klicken. Re, hier unten ist nicht viel. Stoppt. Ich werde später mehr auf meine Website stellen, aber all diese Lockerung wird für uns bereits automatisch vom Browser und von Webflow erledigt , aber wir machen es mit einem Abschnitt. Sie können tatsächlich alles bearbeiten. Sie können dies auswählen, zu diesem gehen, ihm eine ID geben und sagen, wenn es klickt, gehen Sie zu dem, was auch immer es ist. Es muss kein Abschnitt sein, ist nur offensichtlich, wahrscheinlich nützlich. Gehen Sie in einen Abschnitt und gehen Sie zu einem H1, solange es eine ID hat. Also lasst uns einige der anderen Teile machen. Also der Kontakt, den wir gerade nicht haben, der über uns, wir wollen eigentlich nicht, was wir wollen, oder, was ist L? Es heißt, dass frühere Veranstaltungen Veranstaltungen sponsern. haben wir schon gemacht. Wir haben es gelöscht. wir kein Gewicht gesehen, werde ich es sehr schnell tippen. Haha. In Ordnung, also haben wir unsere Knöpfe. Okay, also was ich tun möchte, ist, wenn wir zu Veranstaltungen gehen, es wird in diesem Abschnitt hier herunterfallen. Und das Coole daran ist, dass ich diese ID bereits habe und an denselben Ort gehen möchte, dieser Knopf, und dieser Knopf geht an dieselbe Stelle. Also kann ich es einfach wiederverwenden. Wählen Sie es also aus. Ich kann in meine Einstellungen gehen. Ich kann sagen, keine URL. Ich möchte zu einem Seitenabschnitt und Bereichen gehen. Also gehen beide dorthin. Lassen Sie uns eine Vorschau anzeigen. Hier, Leute. Ordnung, schalten wir das aus. Und was können wir noch einrichten? Wir können Sponsoren einrichten. Also lass es uns noch einmal machen. Eigentlich mache ich eine Pause. Du machst es. Du wartest dort. Du machst es, aber du kannst es pausieren. Gut. Versuch es. Ordnung, du bist zurück. Du hast es geschafft. Wie ist es gelaufen? Okay. Hast du es vergessen? Ich zeige dir ob du es geschafft hast, das zu tun, was du willst. Sei stolz auf dich, super dein Webdesign, okay, also denk zuerst daran, es ist der Ort, an den du zuerst gehen willst und Einstellungen, ich nenne das so, wie du magst, ich muss es nennen Sektion unter wird als Sponsoren bezeichnet. Sie haben vielleicht genannt, dass Ihre Unterstützer mit dem, was ich meine nenne, etwas locker werden. Okay, also werde ich dorthin gehen, aber fertig. Nun, ich möchte sagen, dass Sie zu einer Seite gehen und zu einer angerufenen gehen, möchten, dass wir ihr eine Vorschau geben. Sponsoren gehen nicht sehr weit. Aber hey, man merkt, wenn wir eine längere Seite erstellen, wenn wir nicht mehrere Seiten haben, können wir nur diese eine Seite haben. Du kannst rauf und runter gehen. Wir hatten noch keine vergangenen Veranstaltungen. Da ist es. Da haben wir es nicht, wird es diesen Abschnitt bauen und eine Weile werden wir diese Gitter unten machen. Aber gute Arbeit. Wir haben ein paar Hyperlinks gemacht, gleiche Art von Dingen. Das sind Links, aber diese haben coole Seitenfolien. Ordnung, das heißt das nächste Video. 19. Kursprojekt 02 - Erstelle deine Clubseite: Hallo, gute Leute. Es ist Unterrichtsprojektzeit, keine Hausaufgaben. Ich möchte, dass du durchgehst und deine Website dahin bringst, wo wir gerade sind und mir einen Screenshot schickst. Die Anweisung lautet also, verwenden Ihre eigene Anweisung, wenn Sie zusammen mit dem Kajak folgen, das ist auch völlig in Ordnung. Aber hoffentlich haben Sie an Ihrem eigenen Briefing gearbeitet, das Sie zuvor erhalten haben , und es gebracht, wo wir uns gerade in diesem Kurs befinden. Sie können es weiter vorantreiben, wenn Sie möchten. Aber ich bitte nur darum, es hier hochzubringen. Sie können also Ihre eigenen Farben, Ihre eigenen Bilder, Ihre eigenen Schriftarten wählen , ganz nach Ihnen, okay? Dies sind die Voraussetzungen. Sie müssen die vier Abschnitte haben. Also nav, der Held, der Sponsor und das nächste Event bei den Bildern, im Hintergrundbild, okay, du musst die 12.3 drücken, du musst dort oben Navigation hinzufügen. Du brauchst diese Button-Hover-Klasse. Ich weiß, dass ich nach einem Screenshot frage, damit du dir die Hover-Klasse nicht wirklich zeigen kannst, aber ich weiß, ob du es nicht tust. Okay, das ist das Rollover-Ereignis auf der Schaltfläche, Hyperlink, das ist dieses hier, Mitglied unten. Okay. Wir klicken darauf und gehen woanders hin. Und der Anker verlinkt, das ist die Navigation, wo es nach unten rutscht. Okay, mach es jetzt, während du in der Vorschau bist, damit all dieser Müll überall los wird, okay, und auch wenn du einen Screenshot machst, ist es schwierig, wenn du überhaupt nichts sehen kannst. Also was ich, was du tun solltest, ist hier rauf zu gehen. Das ändert sich ziemlich. Ich hoffe also, dass es derselbe Stil ist, aber wenn nicht, finden Sie ihn irgendwo hier oben , wo Sie die Skalierung nach unten ändern können. Mein Laptop, ich bin auf etwa 70 gesunken, vielleicht ein bisschen mehr, 60. Okay. Und dann kann ich einen Screenshot machen. Jetzt, Screenshots auf einem PC, können Sie den Bildschirm drucken und einfügen. Sie müssen googeln, dass es auf einem Mac relativ einfach ist. Es ist Command Shift vier. Okay, halte die gedrückt. Sie können ein Feld auf Ihren Desktop ziehen, um einen Screenshot zu erhalten. Wenn Sie an etwas anderem arbeiten, oder Sie müssen googeln, wie Sie einen Screenshot auf Ihrem Computer erstellen. Aber ja, mach das und lade es irgendwo hoch. Auf dieser Website wird es einen Bereich für Aufgaben, Projekte oder Kommentare geben. Es gibt ein bisschen anders bei verschiedenen. Also lade es dort hoch und ich würde gerne sehen, was du tust. Sie auch, es in den sozialen Medien zu platzieren. Zeig mir, was du getan hast. Wir sind in der Lage, auch wenn Sie so sind, dass es schwierig ist, weil all diese Gruppen mit Leuten gefüllt sind , die wie Sie waren und die gerade erst anfangen. Also mach dir keine Sorgen darüber , oh mein Gott, ich teile nicht, was ich vorhabe, weil ich neu bin. Das Schöne an diesen Gruppen ist, dass alle neu sind, hochgeladen und um ein bisschen Feedback gebeten haben. Oder poste nicht einfach und sage Hier habe ich mich getroffen. Es ist interessant zu sagen, dass die Entwicklungen aller sehen, welche Gruppe sie Gott welche Stile sie machen. Bitten Sie um Feedback, wenn Sie es möchten. Es ist eine großartige Möglichkeit, kreatives Feedback zu erhalten. Wenn Sie es vielleicht nicht gewohnt als Designer zu kritisieren oder kritisiert zu werden. Die einzige Sache ist, dass ich möchte du es auch jemand anderem anmachst. Selbst wenn Sie es nicht sind, betrachten Sie sich selbst nicht als Hardcore-Webdesigner. Indem Sie Feedback geben, sich die Arbeit einer Person ansehen und sehen was Ihnen gefällt, was Sie nicht mögen, was sie besser machen könnte, können Sie selbst besser werden, weil Sie anfangen, andere zu selbst besser werden, weil Sie anfangen analysieren Die Arbeit und das Gehen der Leute gefällt mir deswegen. Und du lagerst das weg und du gehst, ich hasse das deswegen. Benutze nicht das Wort Hass. Etwas sanfter, aber sag, ich mag es nicht, das ist etwas , das wegen X, Y und Z alles funktioniert wegen X, Y und Z Du kannst das auch verstauen. Wenn du also dein nächstes Webprojekt machst, magst du : Oh ja, das sind die Dinge, die ich Webdesign mache und nicht mag . Wie auch immer, Sie müssen nicht in sozialen Medien teilen. Dies sind jedoch die wichtigsten Lebensmittelgruppen. Die Facebook-Gruppe ist super genial, dass LinkedIn-Gruppen wirklich großartig sind. Diese hier, Instagram und Twitter, sind ein bisschen mehr eine Möglichkeit, aber es ist cool zu sehen, was du tust. Diese Gruppen hier sind ein bisschen gruppenähnlicher, aber ich würde gerne sehen, was Sie tun wenn Sie mir sagen, wie Sie sich fühlen. Nun, zu Beginn des Kurses, bat ich Sie, mir zu sagen, war es Nase und überwältigt? Wie fühlst du dich jetzt? Mehr doppelt nervös, doppelt überwältigt, ein bisschen selbstbewusster. Wie auch immer, lass es mich wissen. Ich scrolle gerne durch meine sozialen Medien und sehe, wo alle bei High Fives sind und bei Bedarf scharf darauf sind , und Umarmungen, dass es den Leuten schwer fällt. Ordnung, das ist ein Klassenprojekt, um es zu machen, viel Spaß damit. Wir sehen uns im nächsten Video sobald du deine Hausaufgaben gemacht hast. Ordnung. 20. Verstehen von Kombinationskursen für Webflow: Hallo zusammen. In diesem Video werden wir uns ansehen, was für eine Combo-Klassen. Lassen Sie mich es ein wenig demonstrieren , bevor wir es schaffen. Also haben wir diese Knöpfe oben in meinem Design hier. Ich möchte eigentlich, dass nur dieser grün ist und diese sollen es nicht sein. Was ich also tun kann, ist, dass ich mehr als eine Klasse bewerben kann, okay, um sie zu aktualisieren. Es nimmt einen Teil des Stylings vom Original ab, aber das einzige, was sich ändert, ist der klare Hintergrund. Das gleiche gilt für diesen Text hier. Ich möchte, dass nur ein Teil davon rot ist, also kann ich hier reinklicken, und ich habe sie bereits gemacht. Okay, also machen wir das in diesem Video. Aber ich kann sagen, ich will, dass dieser kleine Brocken rot wird. Wenn ich darauf klicke, habe ich zwei Klassen, die sich darauf bewerben, mein Button-Navi und mein Hintergrund sind klar. Das ist es, was es zu einer Combo macht. Ordnung, Kombinations-, Combo-Klassen. Lass uns darauf eingehen. Okay, lass uns über Kombinationskurse sprechen. Was sind sie? Sie sind im Moment haben wir hier unseren „Gefällt mir“ -Button. Es hat eine Klasse. Wenn wir eine zweite hinzufügen, diese beiden Kombinationen, Let's Combo-Klasse, okay, also wir, warum sollten wir sie verwenden? Gute Frage. Nehmen wir zum Beispiel an, unser Design hier hat einen grünen Knopf, aber einige davon nicht. Also wollen wir ein bisschen davon. Wir wollen die Schriftfarbe, die Schriftgröße und den Abstand beibehalten. Wir wollen nur den Hintergrund ändern. Was ich tun könnte, ist dich zu gehen, ich könnte gehen, lass uns diese entfernen und eine brandneue Klasse erstellen oder von Grund auf neu, sie richtig schweben lassen, sie in Großbuchstaben und Weiß und die Polsterung hinzufügen arm, was für ein Schmerz im Hintern. Und wenn ich dann die Schriftart ändere, muss ich das und die neue Klasse, die ich erstellt habe, ändern. Diese seltsamen Combo-Klassen sind nützlich. Was ich also sagen kann ist, dass ich alles behalten möchte, aber ich wollte etwas Spezifischeres hinzufügen . Also werde ich sagen, dass du Button Nav sein kannst, aber ich möchte eine weitere Klasse namens Background Red hinzufügen , die ich mache. Und Öl will sagen, all das wird einfach sagen, das ist es, was es jetzt sagen wird , tatsächlich hast du diese rote Farbe aus diesem Text drüben, los geht's. Okay, diese Combo-Klasse ist also nur eine etwas spezifischere Goldspezifität. Ich glaube, ich sage sowieso gerne das Wort Spezifität. Also ja, wir haben es gerade übertrieben und nur ein Job Design Job ist es , die Hintergrundrate zu erreichen. Wir können es auf weitere Dinge anwenden, von denen wir sagen können, dass Sie auch eine bereits existierende Combo-Klasse haben, da sie da ist, ich kann sie darauf anwenden. Da haben wir's. Jetzt möchte ich, dass meins transparent ist, also werde ich meine wahrscheinlich umbenennen und es für Sie klar oder transparent nennen . Und ich werde sagen, dass das so komplett transparent ist wie der Reißverschluss den ganzen Weg hier unten. Oder manchmal ist ein Farbfeld bereit zum Mitnehmen. Sie gehen und haben sich beide verändert. Sieh dir das an, großartig. Das Schöne an der Combo-Klasse ist , dass jetzt, wenn der Client zurückkommt und sagt : Hey, diese Schriftart muss fett sein, du kannst kein Problem sehen. Ich habe Combo-Kurse. Also kann ich sagen, klicke auf diesen, okay, mein Button nav. Und ich sage eigentlich, was ändern wir? Die Topographie wird jetzt der Bolzen sein. Kannst du sehen, wie sie sich alle verändern? Weil sie alle Button-Navs benutzen. Und das einzige, was sich an diesen beiden ändert , ist, dass der Hintergrund transparent gemacht wurde. Das ist der Grund, warum sie es die kaskadierenden Stylesheets nennen , die CSS-Kaskaden. Sie beginnen mit dem Körper und er weist die Website an, etwas zu tun, es sei denn, etwas Spezifischeres passiert, als ob sich Navigationen in der Mitte befinden. Und dann ist da noch die Navigation, die sagt, ich erinnere mich, was es ist, aber es könnte sagen, dass der gesamte Text weiß es sei denn, etwas darin stürzt nach unten und sagt, ich bin spezifischer, als ob ich möchte, dass er fett ist. Es wird außer Kraft setzen und Bolt sagen. Und dann sagt etwas noch Spezifischeres: Ich möchte, dass dieser Button nicht grün ist, um klar zu sein. Kannst du also sehen, dass die Hierarchie ganz oben beginnt, das generische Zeug und du wirst spezifischer und deine Website wird komplett funktionieren, wenn du 1.000 Klassen hast, der Versuch, Dinge zu tun, macht es einfach schwierig Update später. Es ist also nur eine gute Praxis und es ist trotzdem interessant, denke ich, lassen Sie uns ein weiteres Projekt machen, bei dem wir uns mit der Verbesserung des Steuersatzes befassen. Schauen wir uns also unser Design an. Ich kann sehen, dass ich einen Teil der Zecken dort rot gemacht habe und den Kofferraum oder den Steuersatz dort. Was wir also tun werden ist, dass wir noch ein bisschen weiter gehen . Also will ich dieses Wort Kajakfahren. Zunächst einmal denke ich, dass wir einen Stil für die Überschrift haben. Wenn ich darauf klicke, gibt es dort keinen Stil. Jetzt möchte ich stylen, also werde ich einen Akkord machen , der einen trifft. Und ich möchte ein paar Dinge tun. Ich mache es zum XO, ich mache alles in Großbuchstaben. Wir haben das schon mal gemacht, oder? Und ich werde es zur Lightweight-Version machen. Wir glauben, wir haben eine Heizung. Ich kann also nicht nur einen Teil davon für mich lesen lassen. Ich kann nicht sagen, du bist rot weil alles entlang dieses riesigen Blocks kommt. Es wird auf alles angewendet. Wie wende ich etwas an? Mache einfach einen kleinen Textblock. Was Sie also tun, ist, diesen Textabschnitt auszuwählen und dieser wird angezeigt. Du willst also ein bisschen , das dieses sagt, er hat einen Vertreter mit einer Spanne. Du siehst einen kleinen Pinsel. Das liegt daran, dass ich nur darin stylen möchte , es heißt Span-Tag. Sie müssen sich das nicht merken, aber im HTML werden einige Teile darum gelegt, sodass Sie eine Klasse nur zu diesem Bit hinzufügen können . Also klickt er darauf. Nichts ändert sich wirklich, außer dass wir uns das ansehen. Wir müssen Span den Namen nehmen. Nennen wir das hier. Es braucht Rot. Denn warum es Weiß und Blau braucht, heißt es TTX, Fred und sein Job werden das außer Kraft setzen, was derzeit da ist. Irgendwo im Stylesheet wurde gesagt , dass es weiß sein soll. Deshalb ist es MBA, aber nicht diese Klasse, aber irgendwo dort ist sie. Ich werde sagen, übertreiben Sie das tatsächlich. Ich möchte von der Norm brechen. Ich möchte ein Rebell sein. Kinder hören nicht auf ihre Eltern. Ich werde nuklear sein. Lies, du gehst. Ordnung, also haben wir dieses kleine Span-Tag gemacht , um genau ein bisschen zu stylen. Und wie wir es zuvor getan haben, wenn wir unseren Treffer ändern, also habe ich auf diesen Teil hier draußen geklickt und einen getroffen. Eigentlich möchte ich, dass du jetzt nicht x bist. Ich möchte, dass Sie diese anderen Fonds beeinflussen. Kannst du wegen dieser Kaskade oder dieser Spezifität sehen oder ich werfe Worte, dass du gerade Designhölzer geschwenkt hast. Du denkst vielleicht, ich weiß was das ist. Wenn Sie neu sind, versuche ich nur, mich an einige dieser Dinge zu gewöhnen , weil es für die Gesundheit hilfreich ist , sie zu finden. Du hast ein Problem. Sie können die Begriffe , die Sie gelernt haben, googeln, während der Workflow sie gerne ein wenig ausblendet , nur um die Dinge benutzerfreundlicher zu gestalten und trotzdem die menschliche Sprache zu verwenden. Sie können also sehen, dass sie durchziehen und rot werden. Nett. Ordnung, machen wir es nochmal. Das Gute daran, wenn Sie es einmal gemacht haben und viele Seiten haben, können Sie sagen, erinnern Sie sich an unser Design hier, während es, der 8. Juni, rot war. Das Gleiche hier. Du kannst es dir sagen, mein Freund in einer gewissen Zeit. Okay, und ich werde die Klasse der Text-Ticks genau dort hinzufügen , wo sie ist. Hey, wir müssen vielleicht entwerfen. Das ist die Idee einer Combo-Klasse. Sie können einem Element mehrere hinzufügen, um es zu unterstützen oder etwas anderes zu tun. Also, ja, in Ordnung, ich denke, wir haben dort Combo-Klassen, mehr als eine Klasse, die auf ein bestimmtes Element angewendet wurde, in Ordnung, einmal im nächsten Video. 21. Webflow: Hallo zusammen. Es ist Zeit, ein Gitter zu erstellen, und wir werden loslegen und ein solches dreispaltiges Layout erstellen. Aber Sie können leicht durchgehen, den Abstand anpassen, wie breit sie sind, wie viele Spalten sie haben desto mehr Zeilen, es ist alles sehr aufregend. Grids sind großartig. Lassen Sie mich Ihnen zeigen, wie sie funktionieren. Rückgängig, Rückgängig, Rückgängig, Fertig. Jetzt lass es mich dir zeigen. In Ordnung, guten Morgen. Es ist vielleicht nicht dein neuer Morgen, aber es ist meiner. Ich bin bereit zu handeln, um Ihnen die Gitter zu erklären. Also lasst uns ein Netz in Gang bringen. Wir wollen diese, also diese kleinen Kisten hier unten, ein bisschen vergangene Event-Karten hineinlegen also diese kleinen Kisten hier unten, ein bisschen . Okay, also was wir tun werden, ist es zu geben. Du konntest dich erinnern, dass wir unseren Container haben, wir könnten einfach eine Ware direkt hineinwerfen. Daran ist wirklich nichts falsch. Aber es ist praktisch, es in etwas Faust zu stecken , weil wir es für alles andere getan haben. Wir gehen zur Sektion für die nächsten Veranstaltungen. Wir haben hier einen Bereich für Sponsoren. Wir haben eine Trennung. Wir werden einen Abschnitt für vergangene Ereignisse einrichten. Also neuer Anzeigenbereich. Okay. Ich lege es hier hin, damit ich an die richtige Stelle komme. Jep. Am Boden herunterhängen. Was drückt das runter? Hier unten gibt es einen großen Spielraum. Ich habe das schon einmal gemacht, weil es schmerzlich nahe am Boden war . Ich werde es entfernen. Jetzt können Sie darauf klicken und es löschen. Denken Sie an die Option auf dem Mac, Alt auf einem PC, um sie loszuwerden, und wir werden hier unten daran arbeiten. Dieser Abschnitt wird also kalt sein. Geben wir ihm einen Namen. Wir geben ihm mindestens einen Abschnitt. Und dieses wird ein positives Mittel sein. Sie können anfangen, meine Miss-Namenskonventionen zu sehen , und einige von ihnen hatten sich den Abschnitt angesehen, einige von ihnen haben Bindestriche, einige von ihnen haben sich nicht hingeschaltet. Okay. Ordnung, bringen wir es zurück in ihre Abteilung. Nun, bei vergangenen Ereignissen habe ich es geschafft zu sagen, dass ich etwas Spielraum für oben und unten hinzufügen möchte noch einmal etwas Spielraum für oben und unten hinzufügen möchte, gerade während ich arbeite, nur damit es oben und unten herausgedrückt wird. Also hier gehe ich zum leeren Bereich. Lass uns ein Gitter einwerfen. Grid ist dieses und es ist diese letzte Option hier. Klicken Sie auf Halten, ziehen Sie es hinein. Nett. Grids sind fantastisch und sehen irgendwie gruselig aus, aber dann nicht. Im Grunde ist eines der Dinge, wenn Sie Ihr Raster bearbeiten, können Sie sehen, dass während dieser Zeit etwas anderes ausgegraut wird, wie der Magic Grid-Bearbeitungsmodus, Sie können es verlassen , indem Sie auf Fertig klicken und gehen Sie zurück, indem Sie entweder auf das Gitter klicken oder darin kochen. Gehen Sie zu Ihren Stilen und sagen Sie unten hier, unter Layout, Raster oder so. Wir sind also in der Hand, was macht ein Grid? Es ermöglicht uns, Bereiche aufzuteilen. Es ist wirklich praktisch, weil wir sagen können, dass wir die Pluspunkte an den Enden hier und hier verwenden werden, nicht an denen in den Zellen. Das sind nun Maulwurfsberechnungen, mehr Hardcore, und das werden wir im Moment später machen . Jetzt fügen wir eine neue Spalte hinzu. Super, okay, du kannst so viele hinzufügen wie du willst. Sie können ein paar weitere Zeilen hinzufügen je nachdem, was Sie anordnen. Wir werden diese Rasteroption später im Kurs auch für unser Portfolio verwenden später im Kurs auch für unser Portfolio , um sie zu entfernen Vielleicht gibt es einen Weg, ich kann es nicht auf dem Bildschirm herausfinden. Okay, also muss ich es hier machen. Also habe es ausgewählt. Du musst dich im Bearbeitungsmodus befinden. Klicke darauf. Dieses bisschen taucht hier draußen auf. Man kann eigentlich Kolumnen sagen. Ich will nicht alle vier. Ich will nur drei. Und hier mit Reihen werde ich The Rose loswerden, werde ich The Rose loswerden die auf den kleinen Mülleimer trifft. hab ich gerade verstanden. Das brauche ich. Jetzt machen wir gerade Kolumnen, okay, aber sieh dir diese Nummer hier oben an. Was ist ein FR? Und es ist ein Bruchteil. Es ist wirklich praktisch, ein bisschen wie Prozentsätze. Es ist, wofür es wirklich praktisch ist, sich das anzusehen. Ich kann darauf klicken und sagen, dass das eigentlich zwei Brüche sein sollen. Okay, dann teilt man den Raum in zwei Teile. Das sind zwei und das ist einer von ihnen, einer der beiden Brüche, okay, also kannst du die Division dort sehen. Ich kann sagen, dass dies tatsächlich ein halber Bruchteil ist und es teilt ihn auf. Okay? Es verbringt immer den gesamten Raum, okay, in unserem Fall wird es in unserem Container eingeschlossen. Sagt: Sei nicht weiter als das hier. Okay, beachte, dass ich darauf nicht klicken konnte , weil wir uns im Bearbeitungsmodus befinden. Du musst auf Fertig klicken. Kann raussuchen Da ist mein Container. Das gibt ihm seine Breite. Können wir wieder ins Netz gehen? Geh zurück hier rein. Sie können dies also auf alle möglichen coolen Fraktionen aufteilen. Du kannst sagen, das sind drei und es wird es für dich aufteilen. Ordnung, ich gehe zurück zu 111111. Lass uns etwas hinzufügen, denn das ist ein bisschen seltsam. Schau dir das an. Ich füge ein Bild hinzu. Wenn Sie Ihr eigenes Projekt verfolgen, suchen Sie nach drei Bildern und wenn Sie wissen, wie Sie sie zuschneiden, damit das gleiche Seitenverhältnis erreicht wird, tun Sie dies. Und wie sagen wir Photoshop oder Figma oder XD. Aber ich wusste, wenn Sie sagen, was bedeutet ein Seitenverhältnis, wenn ich hier ein Bild einfüge, das alle verschiedene Größen hat, sagen wir diese, indem wir dieses setzen, dann dieses und dann das auf die dasselbe Raster, das nicht übereinstimmt weil ich möchte , dass sie alle die gleiche erhöhte Breite haben. Wir werden es später machen. Bild, Bild. Es gibt einen Abschnitt namens Bildebene, in dem wir mit Bildern etwas härter umgehen und sie zwingen, die richtige Größe zu haben. Aber für den Moment und geh und schneide sie ab. Oder ich habe in der Vergangenheit einige Image-Events gemacht, 123, ich habe dafür gesorgt, dass sie alle gleich sind. Höhe versus Breite. Okay. Mach deine eigenen oder benutze diese. Ich habe versucht, sie generisch zu machen. Ich zeige dir einen Coup. Ein anderer Trick ist, dass ich Workflow habe Ich werde es schließen. Ich werde mein Bild loswerden. Denn was ich tun werde, ist, dir eine sehr schnelle Möglichkeit zu zeigen , Bilder hinzuzufügen. Sie müssen nicht einmal Ihr Asset-Panel geöffnet haben. Sei einfach in der Lage, Webflow zu sehen und das alles zu schließen. Ich gehe einfach, hey, kannst du schauen, hier vorbeischauen, dort wird der Vermögensverwalter bearbeitet . Wenn sie nachschlagen, sagen sie Okay, nette und einfache Möglichkeit, Bilder hinzuzufügen. Also zurück in mein Netz. Und denken Sie daran, dass ich es nicht tun werde, ich werde das Ganze überspringen, indem ich ein Bild hinzufüge und es dann verbinde. Ich gehe einfach auf das S8-Panel. Du gehst da rein. Und dann möchte ich meinen Titel unter mein Bild mit dem Titel der Veranstaltung setzen . Hier wird es komisch. Ich füge meine Heizung hinzu. Du. Ich gehe hin, wo triffst du dich oder die Topographie? Zieh es rein. Großartig. Hat es rübergeschoben Ordnung. Bring es darunter. Ich kann meinen praktischen Dandy-Navigator benutzen. Kein Problem. Also werden meine Schläge unter meine Bilder geraten. Obwohl das Gleiche. Sie sind auf dem gleichen Niveau. Sie sind Geschwister, also sollten sie im selben Raster sein. Was mit einem Raster passiert, ist, dass es einzelne Einheiten hier drin betrachtet und sagt, ich werde sie handlich für Sie in verschiedene, diese verschiedenen Zellen legen , was gut ist, wenn Sie es nur mit Bildern zu tun haben. Okay, also lasst uns das loswerden. Schlagen. Das heißt, ich kann gehen, okay, wo sind meine Sachen? Ist das auch? Und dann gehe ich noch einen. Ich gehe auch zu dir und da können sie einfach in neue gesteckt werden. Und dann dasselbe, fügen wir noch einen hinzu. Ich wiederhole den Vorgang. Sie können sehen, ob Sie sie immer wieder hinzufügen. Es wird sie einfach weiter in das nächste Raster aufnehmen. Danke. CSS-Gitter. Aber jetzt wollen wir tatsächlich mehr als nur einen pro Einheit haben . Also werde ich das rückgängig machen. Ich lasse alle drei da drin. Was wir tun müssen, ist, dass das in einem Rapper sein muss, okay, etwas, das es enthält und zusammenkommt. Und was könnte das sein? Okay, du kannst einen Abschnitt machen. Wir wissen, dass Sektionen nicht ineinander leben können. Was verwenden wir also? Es ist dieser hier. Es wird Diblock genannt. Div Block ist nur dein generischer Wrapper , der ein Styling bekommen hat. Alles was es da ist, ist wie ein Gummiband, um alles zusammenzuhalten. Abschnitt ist eigentlich ein div-Tag. Div. Das ist ein Div, das sind ihre alten Divs. Aber diese haben angefangen bei diesem hier nichts zu tun. Es hat einfach so etwas wie ein leeres Wrapper. Dies ist auch ein Div, aber es hat einen Link darauf angewendet. Div ist die Art von zugrunde liegendem Ding, Division von Raum k oder Division oder geteilter Block. Ich füge es zufällig hinzu. Okay? Also hier habe ich diesen Div-Block. Okay? Ich werde mein Bild hineinlegen , was etwas knifflig ist. Du musst es holen. Denken Sie also daran, es ist irgendwie so, es ist wie drin und es wird ein bisschen mit Tabs versehen. Es ist schwer. Du kannst es hier auf der Leinwand nicht wirklich reinziehen. Hey, du musst es hier drüben machen und dann Navigator, ich habe einen Div-Block mit einem Bild drin. Und jetzt kann ich sagen, weil es nichts bewirkt, weiß es nur, dass es im Moment um den Rand meines Bildes gewickelt ist . Aber wenn ich etwas anderes hinzufüge, also mein Schlag, okay, ich verstehe es richtig. Ich bin zumindest irgendwie in derselben Zelle. Du kannst meine Heizung darunter sehen. Und wir haben zu oft dafür gegeben, nun, sie haben Karten gerufen. Diese kleinen Einheiten können Features oder vergangene Ereignisse oder aktuelle Blog-Beiträge sein. Diese sind wie kleine Einheitenkarten. Wenn du es in einem Raster verwenden willst, musst du sie in einen Rapper stecken. In diesem Fall hält es Block sie zusammen. Also wohin gehen wir von hier aus? Löschen Sie diese und duplizieren Sie alle Entscheidungen. Lass uns die Div-Blöcke machen ich gerade ausgewählt habe, kopieren und einfügen. Ich hole mir einen neuen und ich hole, du gehst da rein. Du gehst hier rüber. Du gehst da rein. Es ist schwer, das mit einem Gitter hier zu machen. Sie können es also nicht wirklich tun. Also habe ich einen Div-Block mit einem Bild und einem Treffer. Okay, ich habe ein Bild, das von selbst rumhängt. Löscht ihn. Ich habe jetzt ein Div mit einem Bild ohne Treffer. Es kann verwirrend werden. Ich lasse das drin, weil du dich zu hoch verirrst. Es ist einfach, diese Bilder loszuwerden und diesen IP-Block zu kopieren und einzufügen . Da haben wir's. Tauschen wir die Bilder aus. Einfacher Weg, doppelklicken Sie einfach darauf. Bild ersetzen. Ich werde mir das aussuchen. Dieser. Es ist sowieso irgendwie generisch. Also haben wir diese Jungs haben jetzt ein Gitter in ihrer eigenen kleinen Wrapper-Div-Box , um sie schön und ordentlich zu halten. Also was sonst noch mit Grids und wir fügten hinzu, waren ziemlich zielgerichtet und wir gingen, äh, du fügst Grid hinzu. Sie können tatsächlich etwas in ein Raster verwandeln , weil ich anerkennen möchte , dass dies eigentlich nur eine Anzeige- und Lautanzeigeeinstellung ist . Gehen wir zurück zu L. Also haben wir dieses Raster richtig? Und kannst du sehen, dass es auf das eingestellt ist, was wir gelernt haben , erinnere dich an den Displayblock. Erinnerst du dich , was das bewirkt? Denken Sie daran, das drückt einfach alles nach unten. Das ist die Standardeinstellung für viele Dinge. Und dann haben wir diesen hier gelernt, Inline-Block, wo wir das gemacht haben. Wo machen wir das mit diesen Bildern oder setzen uns ein, wenn wir das gemacht haben? Für diese Typen fließen sie jedenfalls auf derselben Linie. Okay, dann gute Woche. Dies ist das andere Optionsraster, okay, also ist es eine andere Layoutoption. Also könnte ich hier rauf gehen und eigentlich den Container dafür sagen . Also die Sektionen nannten Sponsor, könnte ich sagen, statt. Mit diesem Block konnte ich Ihr Raster sehen und es wandelt es einfach in jeder einzelnen Einheit in ein Raster um. Und dann klicken wir auf fertig ist, weißt du, das war etwas, es gab ein Element, das war ein Element. All diese verschiedenen Elemente haben sich wie ein Gitter in diese verschiedenen Zellen gedrängt in diese verschiedenen Zellen , dasselbe wie zuvor. Hier gibt es keinen wirklichen Unterschied. Ich kann eine weitere Reihe hinzufügen und anfangen, damit herumzuspielen. Wenn du an einen Punkt kommst und es in Diblock gesetzt hast und versuchst , alles auszulegen und du sagst, eigentlich möchte ich sie einfach trennen. Sie können es einfach in ein Raster umwandeln. Und das Gleiche ist , dass man sagen kann , das Gute loswerden und zurück zu dem, diesem hier, dem Blockelement, in Ordnung, zurück zum Block gehen . Andere Dinge, die ich dir über Grids zeigen möchte. Und die Sache ist, dass tatsächlich ein Stil in diesem Raster erstellt wurde, sobald Sie sich daran gewöhnt haben, diese Stile zu fangen, sobald sie wurden, damit Sie sie benennen können. Also haben wir dieses Raster erstellt und angefangen, uns zu ändern und wir sagen: Okay, es waren drei drüben. Nicht auch nicht. Und sobald du das tust, heißt es: Hey, ich style es, weil ich Sachen im Styles-Panel mache . Wir machen Sachen hier drin. Und da steht: In Ordnung, wir machen dir einen Stil , weil du keinen geschrieben hast. Wir nennen es Grid. Du kannst sagen, du lässt es einfach. Das Problem ist, wenn ich ein anderes Raster mache und Sie am Ende Grid 1, 234-567-8910 erhalten. Und das ist in Ordnung, dass uns gegeben wird. Gut. Das wird mein Startfeld für, in diesem Fall vergangene Ereignisse, sein. Und ich bin hier ganz konkret. Wenn Sie das Gefühl haben, ein Raster zu haben, in dem Sie viele verschiedene Seiten verwenden können , was als Raster bezeichnet wird. Das ist in Ordnung. Sie können alles wiederverwenden. Aber in diesem Fall werden es drei Mal sein. Ich könnte noch einen finden, der zwei gegenüber liegt. Und schauen wir uns auch die Lücke zwischen an. So kannst du mit der Lücke herumspielen. Sie können das Raster bearbeiten. Also habe ich es ausgewählt. Lass uns rauskommen. Ich habe es ausgewählt. Ich gehe zu meinen Styles. Eigentlich habe ich mein Bild ausgewählt. Ich klicke auf mein Raster. Und ich werde es entweder hier bearbeiten oder Raster bearbeiten sagen. Und ich kann mit einer Lücke dazwischen herumspielen. Sie können es also manuell tun. Okay. Und ich kann meinen Auf- und Abwärtspfeil benutzen. Kannst du den Abstand zwischen ihnen sehen? Änderungen, die verknüpft sind. Okay. Ich kann es auch auf der Leinwand machen. Okay. Um visuell zu werden, mach es einfach. Sieht gut aus. Klicke auf Fertig. Grids sind großartig, wenn Sie jetzt im Kopf haben, was ist mit Flexbox? Und wenn Sie keine Ahnung haben, was Flexbox ist, sich keine Sorgen, wir werden später im Kurs darauf eingehen. Es gibt einen Abschnitt namens Layout, Layout Level drei, K. Und die Faustregel lautet : Wenn du das versteckt hast, magst du : Hey, was ist mit Flexbox, da machen sie die ganze Zeit viele der gleichen Jobs. Sie erledigen 70% der Arbeit. Das gleiche. Flexbox ist nur ein bisschen schwierig zu verstehen, wenn Sie neu sind und Grid ist einfacher zu verstehen, wenn Sie es wussten. Meine Regel für jeden, der bei mir selbst anfängt , ist das Grid-Layout. Und wenn Sie kein Gitter erstellen können, tun Sie, was Sie wollen. Sie sehen Flexbox aus, aber sie konkurrieren nicht wirklich. Sie machen viele der gleichen Sachen. Aber wie dem auch sei, ich weiß, dass du diese Frage haben wirst. Jetzt. Das ist alles, was ich für Grids habe. Und du wirst feststellen, dass das Video länger ist, weil ich den Rest der Boxen in unserem Modell hier durchgehen und stylen werde , es gibt etwas Farbe und die Schriftart muss geändert werden und das hinzufügen Heizung oben hier. Du kannst mitmachen. Ich werde nichts tun, was wir noch nicht gelernt haben, aber manchmal macht es Spaß , mir dabei zuzusehen. Ja, das Netz ist vorbei. Jetzt werden wir diese Elemente innerhalb dieses Rasters stylen . Ordnung, also lasst uns zuerst die Boxen stylen. Willst du diese Hintergrundfarbe. Also hole ich mir meinen Container. Ich habe geblockt. Okay, ich füge eine Klasse hinzu. Denn wenn ich es nicht tue, wird es sowieso um eins zurückbleiben. Also nenne ich das ein div und das ist vier, wie heißt es? Vergangene Ereignisse. Und ich werde sagen, dass Sie über Option oder Alt klicken müssen , um sie alle zu schließen. Bring es in den Hintergrund. Und ich werde die Farbe aus unserer Schrift wählen , wie ich sie zuvor verwendet habe. In Bezug auf dieses Schlagen hätte ich gerne daran erinnert, dass es Schlagen heißt. Nun, ich habe bei vier geknallt. Tut mir leid, es trifft einen. Ich will nicht, dass es einen trifft. Warum? Weil das mein wichtigster Treffer und ich möchte, dass Google und andere Suchmaschinen gehen. Das ist das Wichtigste, nicht das. Okay. Das ist mein Schlagmann. Ich entschied, dass dies meine zwei Treffer sind, einzigartig, es ist gut. Das sind meine drei Treffer. Das nächste wichtigste Element. Und dann suche ich nach diesem , den ich hier benutzen werde. Ich sage KG. Du bist 4.4 standardmäßig kleiner, was mir sowieso irgendwie passt. Und ich werde eine Klasse hinzufügen , weil sie es sowieso tun wird. Lass mich vier schlagen. Ich sage dir, mein Freund, Typografie, weiß. Ich möchte etwas Polster hinzufügen. Also gehen wir zu Spacing und ziehen es heraus, um Padding oder Rand zu wollen. In diesem Fall wird es keine Rolle spielen. Er ist Margin. Ich mache es wahrscheinlich von beiden Seiten. Ich halte meine Wahltaste auf einem Mac und die Alt-Taste auf einem PC gedrückt, um beide Seiten zu erhalten falls das Beispiel trifft. Lassen Sie mich über etwas nachdenken, das sich gleich einfallen lässt. Jedenfalls. Also habe ich meine Probe in der Luft. Ich möchte etwas Polsterung auf der Baustelle bei Ziegeln zu zwei Linien. Ordnung, jetzt möchte ich es auf alle anwenden. Also werde ich sagen, dass du, mein Freund, ich gehe in diesen Diblock und werde eine Klasse von Div haben. Vergangene Ereignisse. Dieser hier. Nein, nicht das Bild. Ich will den Diblock. Okay. Ich werde bei vergangenen Veranstaltungen live gehen. Und das gleiche gilt für die Heizung. Ich sage, du bist ein tolles Festival. Ich schlage voll zu. Ich könnte es so belassen, als würde ich einen treffen. Und scheint es so, wenn ich heize, können wir sagen, dass wir schlagen, wir können sagen, dass es trifft, vier trifft, obwohl wir gesagt haben, dass H1 immer noch die Standardeinstellungen des treffenden sind, der große Schriftgröße kommt immer noch durch. Also werde ich sagen, dass du tatsächlich ein Zahnrad bist, H4 sagt mit dir, ich werde diesen hinzufügen, der Scherz genannt wird. Vier. Weiter. Ordnung, da ist mein Styling. Jetzt möchte ich die Heizung hinzufügen, okay, die ist da. Jetzt werden wir das Gitter nicht verwenden , weil es Spalten überspannt und so weit wie möglich ist. Aber es liegt nur daran, dass es eine Menge Arbeit verursachen wird wenn wir einfach ein H abwerfen können, das direkt darüber trifft. Also schließ all diese. Da ist mein Netz. Ich schließe das, damit wir unsere Treffer erzielen und sehen können, ob wir an der richtigen Stelle treffen können. Okay. Ich sehe mir meinen Navigator da drüben an , er ist an der falschen Stelle. Ich ziehe es einfach her. Und dieser wird, er muss mir tatsächlich dasselbe geben wie diese. Eigentlich musste ich es nicht hineinziehen und lösche es. Ich werde mir das schnappen, weil es der richtige Treffer ist, es hat sich bereits die richtige Klasse beworben. Kopieren. Und ich sage, du gehst einfach her, was falsch ist, und dann versuchst, es in die Länge zu ziehen , was falsch ist. Lass mich das einfach benutzen. Hier gehen wir in meine Sektion, aber es sind drei. Nun, der Trick hier ist, dass ich auch scheinen möchte, das kann etwas Polsterung hinzufügen und ich könnte das tun, indem ich drei Klassen drücke und einfach sage, in Ordnung, lass uns gehen, um die Linie zu kreuzen, Topographie, Text mittig ausrichten. Das Problem ist, was wird das Problem sein , an das du denkst. Kannst du dir das vorstellen? Das stimmt. Dieser Typ benutzt dieselbe Klasse. Also musste ich etwas genauer sein. Was könnte ich tun? Du bist richtig in der Kombiklasse. also drei plus drücke, füge ich ein Tick-Center hinzu. Weil ich Sitzen und Polster oder Rand nehmen wollte. Also möchte ich es nicht Tick-Center nennen. Also nenne ich das eigentlich einfach. Vergangenes Ereignis trifft plus vergangenes Ereignis und es wird zentriert sein. Und ich werde den Abstand verwenden und ich werde oben und unten verwenden. Ich werde wahrscheinlich einfach Bottom benutzen. Das wird nett werden. Ich habe hier oben einige riesige Ränder , weil ich die Seite nur vorantreiben wollte. Also werde ich meinen nächsten Eventbereich geben und sagen, woher kommt er eigentlich? Sie kommen aus der Sektion. Nein. Wo ist meine riesige Polsterung, da ist der angrenzende Rand. Okay, also werde ich das weglegen. Was habe ich in der Vergangenheit getan? Lass uns einen Blick darauf werfen. Ich versuche herauszufinden, was das ist. Ich klicke darauf. Es ist 30. Ist es da? Es ist da. Also werde ich sagen, Abschnitt vergangene Ereignisse, Sie sind auch 30. Lass das große Endergebnis an, bis ich später ein Foto mache. Aber das funktioniert im Moment bei mir. Sonst noch was? Ich glaube das war's. Du änderst den Text. Vergangene Ereignisse. Gute Arbeit, Dan, gute Art. Q2. Also style deins. Lassen Sie mich in den Kommentaren wissen, wenn Sie auf Probleme stoßen, aber lassen wir es vorerst dort. Gute Arbeitsgitter. Gitter sind super, super praktisch. Es wird Einschränkungen für Gitter geben, die Sie irgendwann finden werden. Und wir werden diese mit etwas namens Flexbox reparieren, was etwas später erledigt wird. Ordnung, weiter. 22. Was ist reaktionsfähiges Design in Webflow: Hallo zusammen. In diesem Video werden wir über Responsive Webdesign sprechen . Wir werden darüber sprechen, was es ist und wie Webflow damit umgeht. Also zuerst, was ist es? Es ist im Grunde nur dann, wenn eine Website auf die Browsergröße oder die Gerätegröße reagiert. Ich bin hier auf einer großen Leinwand, wenn ich aufnehme. Aber nehmen wir an, ich schaue auf mein iPad. Ich verkleinere das. Okay. Kannst du sehen, dass es sich je nach Größe ändert? Wenn ich das also auf einem Bildschirm öffne , der vielleicht ein kleinerer Laptop ist, können Sie sehen, dass Dribble das für große Bildschirme entschieden hat, okay, und sie beschließen, es für einen mittleren Bildschirm auf drei zu reduzieren . Und wir kommen zu etwas wie vielleicht einem Porträttablett. Ich betrachte diese Website, dribble.com, auf einem Tablet. Es wird es laut auf nur zwei Platten reduzieren. Also passen sie das Layout an, um auf das Gerät zu reagieren , auf dem es sich befindet. Responsives Webdesign. Es ist Layout, es sind Schriften, es sind Bilder. Es gibt alle möglichen Dinge, die Sie ansprechen können. Diese sehen ein wenig aus, gehen Sie auf das Handy. Sie können sehen, dass es auf eine Spalte heruntergeht. Schau dir noch einen Apfel an. Also bei einem mittleren Bildschirm, okay, es ist links und das MacBook Air ist rechts. Und wenn wir dann den kleineren Blick hinuntergehen, ändern sie die Struktur davon. Dann sieht man hier unten einen großen Sprung. Sehen Sie sich die Änderung der Schriftarten für MacBook Air an. Und das gleiche gilt für das Charity-Logo hier oben. den verschiedenen Optionen ist alles anders Bei den verschiedenen Optionen ist alles anders angeordnet. Wie wird es also darauf angewendet? Der Workflow geht es also an, indem er Desktop macht. Zuerst entwerfen Sie auf dem Desktop und dann entwerfen Sie für diese anderen Stile. Was also passiert, ist, dass Sie auf dem Desktop entwerfen und sich dann auf diese verschiedenen einstellen. Das ist dein Tablet. Dies ist ein Telefon im Querformat und das ist ein Portrait-Handy. Sie können es sich auch in der Vorschauoption ansehen, okay. Stellen Sie sicher, dass alles ordnungsgemäß funktioniert. Also Desktop, man kann irgendwie sehen, wie es aussehen wird und wie es auf die wir geklebt haben, ziemlich schlecht zusammenbricht aufgrund der Polsterung, auf die wir geklebt haben, ziemlich schlecht zusammenbricht. Also werden wir das in den nächsten Videos anpassen. Wenn Sie eine bestimmte Größe wünschen, können Sie sie ziehen und Sie können 360 sehen Sie können sie hier eingeben, unabhängig von der Größe, die Sie sich ansehen möchten. Möglicherweise arbeiten Sie an einem Gerät, das Ihr Gerät ist, ich habe ein Google Pixel. Ich kann jede Breite eingeben, also kann ich sie hier auf meinem Bildschirm in der Vorschau anzeigen oder sie einfach herausziehen und sehen, wie sie zusammenbricht. Und jetzt ist es zunächst ziemlich schlecht. Wenn Sie die Frage haben, warum kann ich zuerst Mobile-First entwerfen oder kann ich Mobile-First entwerfen? Sie können in Webflow nicht, Workflow ist zuerst ein Desktop, entwerfen Sie Design und Desktop und ändern Sie es dann für diese anderen. Gibt es eine Möglichkeit, es umzuschalten? Nein. Im Moment sowieso nicht, ich bezweifle, dass sie Pläne haben. Sie stützen sich auf Desktop-Design und wechseln dann zu diesen Handys. Entwerfen Sie also am besten zuerst einen Desktop, besorgen Sie sich alles, was Sie brauchen, und trainieren Sie anschließend das Handy. Das ist also ein responsives Design und reagiert auf die Gerätegröße. Lass uns gehen und im nächsten Video anfangen, in Webflow daran zu arbeiten . 23. Wie man den Webflow ansprechend macht: Hallo zusammen, Zeit, Webflow responsiv zu machen. Schau dir diesen Titel an, sieh dir diese Polsterung an der Seite hier an, als zum Beispiel, das ist meine Desktop-Ansicht. Es sieht gut aus. Aber wenn ich zum Tablet komme, lass uns auf den Breakpoint warten. Kannst du sehen, dass es geändert wurde? Die Polsterung wurde kleiner. Schauen wir uns die Polsterung an, massive Polsterung auf dem Tablet, kleiner und die Schriftgröße wurde kleiner. Lass uns nochmal schauen. Gehen wir einen weiteren Breakpoint runter, K2, unsere nächstkleinste Größe. Lass uns das holen. Die Schrift ist größer, kleiner. Okay, das ist also die Reaktionsfähigkeit. Wir ändern die Dinge je nach Gerätegröße und gehen zum Handy über und beobachten, was passiert. Die Schrift wird auf keinen Fall größer. Und wir machen es zentriert. Wir machen es auch mit den Bildern, die diese Bilder auf verschiedene Linien fließen können. Wir werden bei diesem nächsten Event auch hier unten herumspielen. Schließlich ein mobiler Ausblick. Werde es einfach los, denn es war ein schönes Designelement, das bei größeren Größen funktionierte, aber mobil, wir haben es gerade losgeworden. Ordnung, responsives Webdesign in Webflow. Lass es uns machen, okay? Schauen wir uns zunächst an, wie gut unsere Reaktionsfähigkeit ist. Ist im Moment nicht gut oder schlecht oder reagiert nicht. Also wie es funktioniert und Webflow ist, es ist einfach nicht fair. Also fängst du hier an. Ihr Telefonzeug nicht und bereiten Sie es hier vor. Weil es so etwas gibt, das sich dekreierte Strömung nennt. Was passiert ist, dass es diese Dinge gibt, die man Breakpoints nennt. Diese werden als Desktop Breakpoints genannt, können Sie sehen, dass es Base heißt. Ich kann nicht darauf zeigen, aber Sie können hier direkt unter meinem Cursor sehen, das ist der Basis-Breakpoint. Es gibt etwas für diese Größe. Man sagt Tablet, aber es ist nicht wirklich für ein Tablet, es ist nur für eine Bildschirmgröße , die zufällig mit 991 und weniger gerendert wird . Und dann können Sie hier all die verschiedenen Größen für verschiedene Telefone oder Geräte oder irgendetwas dazwischen sehen. Was also mit diesem Flow passiert ist, wenn Sie etwas auf dem Desktop tun, es durch all das fließt, was wir wissen, weil wir dieses Padding haben, was das große seltsame Ding ist. Wir haben es und den Desktop hinzugefügt, es war sinnvoll, diesen riesigen Spielraum hier drüben zu haben , aber es macht keinen Sinn. Offensichtlich passt das auf dem Handy nicht einmal. Wir springen also nicht zum Festnetz. Wir müssen alle vier Breakpoints korrigieren. Also gehen wir hierher, weil ich dir nicht zeigen will, wenn ich mich ändere, machen wir das einfach. Drücken von Zecken macht etwas Einfaches. Also habe ich dieses Ding namens Hitting one, nicht unbeliebt Little Span-Tag. Schnapp dir den großen Teil davon. Also treffen wir einen. Auf dem Desktop. Es passt. Es ist viel Platz. Es ist herrlich hier. Es wird ein bisschen eng. Also, was ich tun werde, ist nur eine wirklich kleine Schriftgröße zu verwenden und Vertigo in die darauf angewendete Klasse zu ändern. Praktisch. Okay, und ich werde sagen, ich werde das alles schließen. Ich werde bei der Typografie vermissen. Typografie, man sieht diese Dinge, die Amber, es bedeutet, dass das Styling von woanders kommt. Es kommt tatsächlich von. Wenn ich darauf klicke, heißt es: Hey, ich bekomme meine Werte von woanders. Ich bekomme es von, sieh dir dieses kleine Icon an. Ich bekomme es von meinem H1-Tag, aber ich bekomme es von, sieh, dass das kleine Symbol zu diesem Symbol hier oben passt. Okay, also von dort bekommt er ein Styling. Deshalb ist es nicht blau. Zurück hier auf dem Desktop. Es ist nicht blau. War kein Blau. Jedenfalls. Woher fängt es an? Es bezieht es vom H1-Tag, einem generischen. Ignoriere das. Es wird später klarer. Also bekommt es es vom Desktop. Also werde ich das außer Kraft setzen und nur ein bisschen kleiner sagen. Ich benutze meine Pfeiltasten und klicke einfach nach unten, bis ich mit dieser Tablet-Größe zufrieden bin. Schauen wir uns das Telefon horizontal an oder es passt nicht einmal in zwei Zeilen, so schlimm. Also sage ich hier, lass uns darüber schweben. Das wird sinnvoller sein, weil es Amber ist. Es hat sein Styling von, es kommt von der Überschrift eines Stils auf dem Tablet. Lass dich gehen. dort aus fängt es an. Also sage ich, dass du noch kleiner sein wirst. Ich benutze meinen Abwärtspfeil. Und wer besucht dann meine Website horizontal auf einem Telefon? Denken Sie nicht, dass es Bildschirmgrößen gibt , die nur der Größe entsprechen. Und schauen wir uns das mobile Portrait an. Okay, und ich werde es schaffen, ich werde es tatsächlich größer machen. Du sagst was? Größer? Ich muss es größer machen. Okay. Weil ich auf zwei Zeilen aufbrechen muss. Also werde ich einfach diese beiden Linien besitzen und sie schön groß machen. Lass uns also eine kleine Vorschau machen. Gehen wir in unseren kleinen Vorschaumodus und schauen uns das an. Also Desktop, okay, es ist die Größe des Tablets. Es springt, verkleinert sich und schaut sich das an. Ich ziehe es einfach, weil es Spaß macht und interessanter ist, die Breakpoints zu sehen. Also geht es, was ist das für ein Drag ist größer. Es wird wieder auf den Desktop gehen, ziehen Sie es, um zum Tablet zu gelangen. Und irgendwann werde ich dazu kommen, deshalb nennen sie sie Breakpoints, werden hierher kommen und schnell loslegen. Okay. Es geht also, du kannst sehen, wie es sich hier ändert. Wenn ich die Folien ziehe, können Sie sehen, dass die Änderung noch kleiner wird, aber sie versucht zu besetzen, es gibt eine ziemliche Reichweite. Siehst du, es sieht nicht wirklich gut aus, sie werden nur kleiner. Aber es belegt diesen Pixelbereich zwischen diesen beiden verschiedenen Grenzwerten. Es gibt also alle möglichen Bildschirme. Aus diesem Grund ist Responsive Webdesign schwierig, wenn Sie pixelgenau sein möchten, das können Sie im Grunde nicht. Okay, also es geht hier runter und irgendwann wird es Boom auf dem Handy und ein riesiges, okay, und all diese verschiedenen Mobilgeräte, es ist auch irgendwie interessant, sich die verschiedenen Geräte anzusehen das gibt dir einige Vorschläge. Schau dir das an. Schalten wir das aus und schalten Sie die Vorschau aus, wenn Sie den Schieberegler hier hineinziehen. Also geh zu einem dieser anderen. Irgendjemand? Und ziehen Sie diese Folie auf eine andere als die vorherige. Wir sind gerade im Design und schauen jetzt zu, was passiert. Siehst du es unten? Da sind all diese wie Watch, ich ziehe sie. Du behältst da unten ein Auge. Kannst du es sehen? Es zeigt dir all diese verschiedenen Breakpoints und schnappt sie irgendwie an. Also der Kindle Fire. Wenn Sie also etwas entwickeln, das speziell für den Kindle Fire ist , los geht's. Okay, lass uns zu einer größeren Größe gehen als das Surface Pro. Bei Microsoft. Sie können zu diesen verschiedenen gehen und Sie können noch kleiner werden. Gehen wir zum Telefon. Schauen wir uns die verschiedenen hier an. Sie können sehen, Sie können Ihr Telefon planen oder Ihre Kunden finden heraus , dass dies wahrscheinlich wichtiger ist, nur um sicherzustellen, dass es für die Person, die es überprüft, gut aussieht . Okay, schauen wir uns das mal an. Was wir haben war mein, Pixel drei, ich brauche Pixel vier. Kannst du dich erinnern? Es ist sowieso uralt? Also los geht's. So sieht es auf meinem Handy aus. Okay. Diese auf den größeren iPhones, großen Maxes, und Sie können das NES ganz nach unten mögen. Ich glaubte nicht, dass ich so war, als hätte ich auf keinen Fall ein NES oder zumindest ein Freund hatte eines. Ich habe es gegoogelt und doch waren es 256 Pixel. Und das war die Auflösung war reizend. Gute Spielekonsole. Wie dem auch sei, ich war eher ein Typ vom Sega Master System. Jedenfalls. Das ist also unsere Reaktionsfähigkeit. Wir haben es für den Titel gemacht. Sie können es für jede Polsterung, Farbe, Größe tun. Also das ist es irgendwie. Ich werde meine Seite durchgehen und stylen. Ich werde das Raster hier unten erst beim nächsten Video berühren . Wenn Sie also nur zu dem Rest springen möchten, werde ich nur einige der Probleme beheben und die Navigation sieht in Ordnung aus, aber ich passe das an, weil Sie das vielleicht nicht haben Luxus oder deins könnten etwas problematisch sein. Ich arbeite an der Polsterung. Lass uns das alles machen. Nimm dir das, wenn du möchtest. Ordnung, denken Sie daran, dass Sie es hier unten nicht stylen, in der Hoffnung, die Dinge in der Kette zu stylen, weil Sie sich das ansehen. Wenn ich das Padding durchgehe und repariere, gehe ich los, okay, auf das Layout, ich möchte den Abstand und ich werde ihn hier unten anpassen. Hier will ich den Container oder die Sektion. Und ich werde die Polsterung hier entfernen, genau so rein. Wenn ich zum nächsten gehe, geht es wieder um den Großen. Ist wieder beim Großen, zurück zum Großen. Am besten. Ansonsten muss ich es jedes Mal ändern. Wenn ich das rückgängig mache, gehe zur Tablet-Version und verkleinere sie erheblich. Kannst du die Ströme zu diesem und jenem sehen? Es ist also besser, groß anzufangen Laufe der Zeit kleiner zu werden, obwohl Sie das Mobile wirklich stylen möchten, stellen Sie sicher, dass Sie es systematisch durcharbeiten. Ich werde das rückgängig machen, denn lasst uns daran arbeiten. Also hat es einen Blick darauf geworfen. Ja, es sieht gut aus. Ich werde das kleiner machen. Meine Polsterung hier macht offensichtlich keinen Sinn mehr. Ich kann es nicht wirklich gut nach rechts ziehen. Rudern Sie das Boot oder tippen Sie es einfach Dan ein. Gehen Sie weiter. Das ist gut genug. 149. Okay. Was muss ich sonst noch ändern? Eigentlich machen wir das Padding, also und dann schauen wir es uns an, alles andere. Also bist du okay. Ich möchte, dass du gehst, was wir für eine Polsterung auf diesem haben, es ist nur vermutet, dass 50 tatsächlich direkt an den Rand gehen. Was haben wir auf dieser Seite? Das hat 35. Ich mache 35 auf der anderen Seite. Also werde ich hier zu meinem Absatz gehen und sagen, lass es uns klären. Wer erinnert sich, wie man es löscht? Es gibt die Option zum Zurücksetzen oder die Option. Klicke auf einen Mac und bei gedrückter Alt-Taste auf einen PC. Ich werde es los. Eigentlich nein, bin ich nicht. Das ist ein gutes Argument. Ich dachte, ich würde es klären, indem ich zurück auf Null gehe. Eigentlich werde ich es klären. Und es wird sagen, ich werde zurück auf den Absatz schauen , der gesagt wurde. Entschuldigung, Absatz, was auch immer auf den Tablets steht, auf dem Tablet stand 149. Also dieser Typ versteht es. Ich kann es also nicht einfach löschen oder zurücksetzen. Ich muss eigentlich sagen, dass du bei Null bist. Denn was ich von nun an tun werde ist, dass dieser Abschnitt die Kontrolle übernimmt. Warum wir das tun , um dich zu verwirren, hauptsächlich damit ich nicht weiß, ich weiß nicht, was ich mache. Das sind also 35 auf jeder Seite. Es fühlt sich gut an hier drüben, okay, das Gleiche, es sind 35 auf beiden Seiten. Und dieser Absatz ist hier auf Null gesetzt. Es ist wahrscheinlich zu breit. Also 35, wir halten meine Wahltaste auf einem Mac gedrückt. 0-Taste auf einem PC, gib es einigermaßen nah. Je nach Spitze gibt es viel zu viel. Also gehe ich auf ein mobiles Gerät, ich werde es runterholen, so etwas. Oder fühlt sich immer noch zu nah an. auch keine Angst, die verschiedenen Größen durchzugehen und zu überprüfen . Denken Sie daran, es hochzuziehen und klein zu verkleinern. Nintendo NES. Nur um zu sehen, was diese bewirken werden. Ich denke, wahrscheinlich ist die Polsterung auf diesem mobilen Gerät immer noch zu klein. Los geht's. Muss nicht gleich sein. Ich habe das Gleiche gemacht, aber schauen wir uns das an, also schauen wir uns das mal an. Du, du, du, du. Eine Sache, die ich dafür tun könnte, ist, dass ich mittendrin bin. Und ich werde tatsächlich hier reinschauen. Ich will nicht, dass das gesintert wird, wahrscheinlich nicht nur hier drin. Ich werde dich dazu bringen, zentriert zu sein. Schauen wir uns das genauer an. Aber wenn man in dieser Ansicht ist, ist es eigentlich ein bisschen anders, oder? Wenn Sie sich im Vorschaumodus befinden, können Sie tatsächlich über Haltepunkte hinaus ziehen. Schau, ich kann es größer machen und auf Landschaftstelefon, Tablet, Desktop gehen . Okay, wenn Sie sich nicht im Vorschaumodus befinden, Sie und der Designer können Sie und der Designer eigentlich nur im Rahmen von können Sie sehen, dass ich nicht größer werden kann. Ich kann diesen Breakpoint überschreiten. Ich weiß nicht warum. Okay. Schauen wir uns das an. Ja, ich mag es. Und wir müssen etwas mit dem Hintergrund machen und ihn dunkler machen , weil dieses Rot und Grün , dieser Hintergrund nicht funktionieren wird. Ich muss diese Lektüre vielleicht komplett aufgeben, weil sie hier cool aussieht. Aber auf diesem Gerät hier ist es ja. Schmerz. Was mache ich? Mal sehen, ob wir es reparieren können. Ich werde, ich werde hier eine Dose Würmer verursachen. Ich gehe, lass uns das in Ordnung bringen, obwohl ich es nicht geplant hatte. Okay, also das Hintergrundbild hier, ich durchgehen könnte und das Dokumentmitglied hat zwei Hintergründe. Also in diesem hier, wird es sich nur in diesem ändern? Das ist eine gute Frage. Ich kenne nicht einmal die Transparenz, die auf 0,24 eingestellt ist. Schauen wir es uns an. Gehen wir hier rein. Lass es uns hier dunkler machen. Wirkt sich nur auf das Handy aus, das es tun sollte Da haben wir's. Schauen Sie sich das an. Also Hintergrundbild in diesem Abschnitt, Hero-Hintergrundbild. Ist alles für die Fahrt mitgekommen? Du gehst. Hintergrund. Es ist immer noch bei 42. In diesem Fall. Sie liegt bei 0,7 bis 72%. Es hat funktioniert. Das wusste ich die ganze Zeit. Okay, auf dem Handy ist es also dunkler. Ordnung, andere Dinge möchte ich tun. Schauen wir uns das Bild an. Bilder, schöne Bilder in Ordnung hier, es ist nur ein bisschen komisch , dass es nicht ganz rübergeht. Ich habe einen Image-Helden. Und was ich tun könnte, ist, dass wir die Waffe ein bisschen springen und größenmäßig sagen, wir haben es so eingestellt, dass wir es nicht getan haben, wir haben eine Größe ausgewählt, wir haben sie einfach gezogen, wir nicht einfach durchgegangen, okay, was wir tun werden, ist zu sagen, dass du eine Breite von 100 hast, und wir verwenden den Prozentsatz. 100% werden später Einheiten und Inkremente Eigentum übernehmen und sich all die verschiedenen ansehen , weil er geladen ist. Aber lasst uns das überspringen und es sagen. Diese anderen Versionen haben eine bestimmte Breite, okay, aber bei dieser letzten Version springt sie auf 100 Prozent. Nett. Und das bedeutet, schau dir das den verschiedenen Größen an, okay, wenn ich in den Vorschaumodus gehe, schau dir das an, es wird ein guter Test sein. Es wird ziemlich groß. Aber wenn er ins Porträt geht, springt es auf eine bestimmte Größe zurück. Nett. Ordnung, Vorschau aus. Was S, was ich machen will. Das ist sehr weit weg. Mir hat es hier irgendwie gefallen. Gefällt es mir hier? Wir sind dort so. Es ist in Ordnung. Was gibt ihm seine Polsterung? Das heißt, das ist auch ein lustiges Spiel Woher kommt das? Wenn das ausgewählt ist, werde ich meinen Abstand öffnen und es wird etwas davon daraus und wahrscheinlich etwas aus dem Bild gezogen. Und du kannst irgendwie sehen, ob ich darüber schwebe, kannst du ein kleines Schachbrettding sehen , damit es es von dort bekommt. Und woher kommt es? Wenn ich in der Desktop-Version des Hero-Buttons auf dem Handy darauf klicke, werde ich das außer Kraft setzen. Und ich setze es auf Null. Und das ist wahrscheinlich ziemlich gut. Gut genug. Dieses ganze Durcheinander. Schau dir das heiße Durcheinander an. Schauen Sie sich das an. In Ordnung. Ja. Weißt du, gut hier. Wie beheben wir das? Nun, ich werde mit der Größe herumspielen und wir werden mit herumspielen , schauen wir uns den Sponsor der Sektion an. Okay. Nehmen wir an, alles darin ist auf die Mitte ausgerichtet, aber nur auf dem Tablet. Okay. Sie können also sehen, dass ich die Ausrichtung und die Topographie verwende . Das ist ein gewogenes. Sie werden feststellen, dass wir das Topographiezentrum anstelle von Größen- und Abstandszentren verwenden Topographiezentrum anstelle von Größen- und , die dies später tun werden, wenn wir uns Raster und Flex-Gitter ansehen. Aber oft kann man damit davonkommen, einfach den Text eines ganzen div-Tags oder in unserem Fall diesen Abschnitt zu zentrieren , und es wird diesem Beispiel folgen. Und haben wir ein Bild, also haben wir etwas in der Nähe, richtig? Wir haben einen Wrapper namens Image-Sponsor. Und was ich machen möchte, ist wahrscheinlich der Padding Desktop. Also ich kann hier finden, dass es in die Mitte wechselt und ich möchte etwas Polsterung hinzufügen. Also werde ich sagen, wer sich daran erinnert, was Sie gedrückt halten , damit alle Seiten gepolstert werden. Weil ich meine Umschalttaste gedrückt halte und Padding und Rand sage. Also könntest du sie alle machen. Geh aufs Tablet. Es gibt ein bisschen mehr Polsterung um ihn herum. Die andere Sache ist, dass alles irgendwie auf der Seite liegt. Warum? Weil mein Abschnitt etwas Padding hat und es auf dem Desktop angemessen war, aber hier nicht so passend. Also sage ich: Geh weg, Null. Es wird immer ein bisschen zwischen den verschiedenen Größen springen. Schauen wir uns das an, gehen wir zur Vorschau. Okay, also Desktop, Desktops, auf denen es darauf ankommt, werden kleiner. Okay, es reagiert irgendwie. Dann gehst du etwas größer, passt da drauf zu drauf. Du bist in diesen reingekommen, wirst kleiner runter. Und wie bricht es zusammen? Ich bin eigentlich damit einverstanden, wie es von jetzt an ist. Ich werde nichts anderes ändern. Wir können später Lust auf Flexbox haben, aber eigentlich funktioniert das ziemlich gut, wenn man bedenkt, dass es einige Polster um die Bilder gibt. Und sie scheinen einfach zusammenzubrechen oder was als Inline-Blockmitglied bezeichnet wird . Sie passen also in eine Reihe. Wenn es nicht genug Platz gibt, brechen sie in die nächste Zeile auf, so wie es die Topographie tut. Ordnung, ich dachte, es würde viel schwieriger werden als es war. Lass uns das machen. Was wir sonst noch haben Desktop das. Also was gibt dem Raum? Also lasst uns herausfinden , was das vorantreibt. Was ist es wie es ist u, u, Lass uns einen Blick darauf werfen. Also ist es einfach alles in diesem Abschnitt? Es ist da. Was ist ihre große alte Polsterung darauf? In diesem werde ich es einfach viel kürzer machen oder zu mir rüberfahren , was wahrscheinlich auch bei dieser Gerätegröße herunterkommen muss . Sieht gut aus. Dieser, der alles vom letzten erbt , ist gut genug. Ist es. Weil ich dein mobiles Gerät im Hoch- oder Querformat nicht mag . Ich gehe irgendwie Tablet, schwer. Schau dir das an, stell sicher, dass es nicht so schlimm ist und gehe dann zum Handy. Es ist wirklich wichtig. Du solltest das nicht tun, okay, dieser hier, was ich vielleicht tun könnte, ist eigentlich diese kleine Designwahl, die ich hier mache. Es funktioniert nicht wirklich auf Mobilgeräten, muss weggehen oder wirklich klein werden. Lass es uns loswerden. Nachdem dieser Abschnitt ausgewählt ist, erinnere ich mich, dass er unter Grenzen ist, da er dort ist. Es hat also einen Rand von der linken Seite. Wenn ich auf diese 50 klicke, geht es auf Null, auf dem Handy. Lassen Sie uns eine Vorschau anzeigen. Auf dem Desktop. Es ist da. Auf dem Tablet ist es da, aber wenn es kleiner, kleiner wird, ist es weg. Okay. Du siehst, was du hier tust. Und arbeite dich einfach durch alle Elemente. Beginnen Sie ganz oben und arbeiten Sie sich durch. Überspringen Sie nicht das Handy im Querformat. Und wenn wir den letzten verschieben, gehe ich als nächstes zum Abschnitt, ich sage, dass das alles viel kleiner sein wird und halte meine Umschalttaste gedrückt. Ziehe sie alle. Gut genug, dass alles was wir haben, wir werden im nächsten Grids machen. Aber ich bin zufrieden damit, wie es läuft. Sie werden wahrscheinlich, weil Sie etwas alleine machen, wahrscheinlich ein paar andere Teile haben, die vielleicht nicht funktionieren oder nicht genau wie meine laufen , weil wir verschiedene Größen verwenden und verschiedene Bilder und unterschiedlich in verschiedenen Textlängen wenn die Kommentare etwas fragen. Aber wissen Sie auch, dass wir noch einen Teil des Kurses übrig haben , den wir irgendwann durchstehen werden. Die andere Sache, die Sie vielleicht tun, ist Ihre Logo-Größe. Als ist auf diesen verschiedenen Geräten in Ordnung. In diesem Fall könnten Sie entscheiden , dass er kleiner und dieser Text kleiner sein soll, okay, es liegt an Ihnen, dass er passt. Und vielleicht wird die Polsterung etwas kleiner. Marke: Woher bezieht es seine Polsterung? Woher bringt uns das Polster? Das Bild? Ja, da drüben wurde gerade Lochfraß. Großartige Arbeit durch Renditen und sehen Sie, was Sie tun können. Sie können es dann also herausfinden, aber wenn Sie hier beginnen und sich nach unten arbeiten, in Ordnung, so können Sie Webflow reaktionsschnell machen. 24. Responsive Grids im Webflow: Hallo zusammen. Wir werden dieses Raster hier unten auf dem Desktop responsiv gestalten. Es ist drei mal drei. Es wird kleiner als die Tablet-Größe. Und eigentlich habe ich gerade drei mal drei ausgewählt , weil sie gut aussehen. Und dann bekomme ich zwei mal zwei in die Landschaft, mobil und dann gehe ich zum Handy und beobachte, was passiert. Hier ist es da. So größer. Und ich ging, ich drückte es an den ganzen Rand und hielt mich an einer Säule hoch. Lassen Sie mich Ihnen zeigen, wie das jetzt in Webflow geht. Okay, lassen Sie uns unser Grid responsiv machen. Der Moment reagiert nicht oder zeigt keine Vorschau an. Du gehst einfach runter zum Tablet und quetscht einfach da rein und wirst irgendwann einfach zur Seite geschoben , um es zu reparieren. Das ist ziemlich einfach, als sie mit dem Desktop angefangen haben. Okay, es sieht gut aus. Wir schauen uns das Tablet an und es ist wahrscheinlich in Ordnung für die Größe. Also lasse ich es dort. Und in der mobilen Landschaft, okay, es wird zu eng, also werde ich es in verschiedene Spalten aufteilen . Was wir also tun, ist auf das Gitter zu klicken. Wenn ich also dort hineinklicke, da ist mein Raster hier drüben und das Layout, ich bearbeite mein Raster oder klicke einfach auf die Option in der Ecke. Und was wir sagen werden, ist hier zu dieser Ansicht hier, ich möchte nicht, dass es drei Spalten sind. 123, ich sage nur Lösche eins. Und es löscht nicht den eigentlichen Inhalt der Spalten, die verfügbaren Spalten, in die die Dinge gehen müssen, das macht Sinn. Es endete also damit, dass es einfach auf die nächste herunterdrückte, erstellte eine automatische Zeile. Okay, ich wollte nur noch eine Reihe nach unten drücken. Es ist ein fälliges Tablet. Gehen wir runter zu hier. Das Problem mit meinem Layout ist jedoch, dass es bei zwei mal einem Mann nicht sehr gut aussieht. Es ist eine Designentscheidung, bei der ich das nächste Mal, wenn ich etwas entwerfe, entscheiden kann, dass es für diese erste vielleicht besser ist, vier Spalten zu haben , weil es dann gut zusammenbricht, um diese zu machen Entscheidungen selbst. Manchmal muss man mit seltsamen Layouts mit Reaktionsfähigkeit leben . Und Sie werden auch feststellen, dass, wenn Sie zwischen den Breakpoints wechseln, was ich ständig mache, die Spaltensache ausflippt, als ob Ihnen was gefallen würde? Ich habe es dort noch nie gesehen, aber es gefällt ihm einfach nicht. Okay. Also mach das aus. Okay. Und wenn ich darauf zurückkomme, wird es in Ordnung sein. Aber wenn du versuchst, es zu ändern, während du hier drin bist, flippt es irgendwie aus. Aber mach es aus, komm wieder rein. Und es ist in Ordnung. In diesem hier auf meinem Handy. Und ich werde sie einfach alle übereinander stapeln. Also werde ich alle Säulen loswerden. Sie müssen eine Spalte haben, eine Spalte, und dann werden einfach so viele Zeilen gefüllt, wie es benötigt. Codes werfen einen Blick darauf. Gehen wir zur Vorschau. Lass es uns ausgeben, damit es auf dem Handy gut aussieht. Irgendwann kommt ich zu einem Breakpoint und geht zu meinem hässlichen Layout und dann zurück zu drei. Und dann die großen Drei. Ich sage, ich mag es nett und einfach. Lass es uns aufräumen. Und nur indem Sie mit einem Teil des Abstands auf einem Handy herumspielen . Und hier gibt es einige große Lücken. Will ich Zoll drauf haben? Man könnte denken, auf dem Handy ist es schön, manchmal an die Ränder zu rennen. Also werde ich sagen, Handy, ich werde mich ändern, ändert diesen Abstand. In diesem Fall hat es mit den Zeilen- oder Spaltenzeilen zu tun. Die Reihe hat eine Höhe von 60 Omo, aber fangen wir hier an. wir sicher, dass wir nicht einfach aufhören. Mir hat der Abstand hier gut gefallen. Hier. Zu groß. Okay, also was ich tun werde, ist auf Mobile Landscape zu sagen, dass das Raster und ich werde die Zeilenhöhe sagen. Und ich klicke darauf und ich werde auf und ab gehen, mit gesenktem Kopf, Shift gedrückt halten und gedrückt halten. Es springt in kleine Dosen. Und ich schaffe es auf 30, vielleicht auf 20. Und ich werde wahrscheinlich die Lücke dafür als 20 auch für die Kolumnen machen müssen , weil es sonst komisch aussieht. Möchte ich außen etwas Polsterung haben? Ich glaube schon. Also gehe ich zu dir, weil es an die Ränder drängt, bei dieser Gerätegröße nicht richtig aussieht. Also werde ich sagen, schauen wir uns die Abstände an und wir gehen von beiden Seiten. Und stell dir vor, jetzt wähle ich mein Raster aus, an dem es funktionieren wird, oder ich könnte meinen Abschnitt machen. Beides wird funktionieren. Lass uns das machen und es hineinziehen. Halten Sie die Option gedrückt und ziehen Sie sie in die richtige Richtung. Und 30er werden wahrscheinlich gut sein , weil sie zu allem anderen passen werden. Stattdessen stimmt es nicht mit 30 überein. Da. Schau mal. Warum ein Steady größer als diese 30. Du weißt, warum du sagst, Hey, dieses Ding, ich kann es nicht klären, damit es aussieht, als ob es reingeht. Das liegt daran, dass es 20 Dan gibt. Dan ist ein Vollidiot. Das machen 20 beide Seiten, 20.20. Ordnung. Lass uns mobil werden. Und deshalb haben wir es dort oben gemacht. Und das nicht nur in der Hand, denn eigentlich sieht es hier okay aus. Nein, ich will es bis an den Rand schieben, also will ich die 20 loswerden. Also 0,0. Ich bin ein glücklicher Mann, los geht's. Unser Raster ist angelegt. Das reagiert. Es gibt einen Vorgeschmack darauf. klein. Peinlich. Finde besser. Nun, nennen wir das eigentlich das Beste. Ordnung, das heißt, Grid-Reaktionsfähigkeit in Webflow. 25. Kursprojekt 03 - Grid und Responsive WebsiteClass 03 - Grid und Responsive Website: Hallo, es ist Unterrichtsprojektzeit. Okay, Klassenprojekt Nummer drei, ich möchte, dass du dein Raster hinzufügst und dann die Seite responsiv machst. Okay, schauen wir uns an, was wir tun müssen. Auf dem Desktop hier der einzige Unterschied zum letzten darin, dass wir dieses Raster unten hinzugefügt haben. Es will, dass du es hinzufügst. Und dann möchte ich, dass Sie alle Breakpoints durcharbeiten und entscheiden, Designentscheidungen treffen. Schriftgrößen, Padding, k, wie wir es in den letzten Videos haben. Ich möchte sehen, wie sie jetzt alle für Screenshots der vier verschiedenen Breakpoints hochladen . Das Problem ist, dass Sie nicht alle vier sehen können. Ich denke, früher in dem Kurs, den ich gesagt habe können Sie hierher gehen und wir können sagen, dass es tatsächlich 80 Prozent gezeigt oder einen Screenshot von allem machen. Tablet scheint es nicht zu funktionieren. Du könntest deins zur Arbeit bringen. Ich kann es nicht zu 100 Prozent zwingen. Also, worum ich dich gebeten habe , ist alles zu nehmen, was du sehen kannst nimm es einfach bis hierher. Das Minimum ist also die Navigation und das Hero Board. Wenn Sie Wege finden können, das Ganze zu tun, den Browser zu verkleinern, ist das irgendwie ausgefallenes Zeug. Bitte tun Sie das. Andernfalls nehmen Sie einfach den ganzen Weg, um Screenshots von allem zu machen, was Sie sehen können. Um das durchzusehen, laden Sie es in die Aufgaben-Slash-Projektkommentare hoch, je nachdem, wo Sie sich das ansehen, und teilen Sie es auch in sozialen Medien. Ich würde gerne sehen, was du vorhast, wenn du das Vier-mal-Vier nicht ausstehen kannst , okay. Es geht mir gut, dass du hier zurückgehst und sagst Eigentlich, Dan, füge einfach einen vierten hinzu, damit er auf diesen anderen Geräten gut kaputt geht . Mach es, in Ordnung, das ist Klassenprojekt Nummer drei. Geh los, viel Spaß. Wir sehen uns im nächsten Video. 26. Webflow mit der Animation mit Element: Hallo zusammen, es ist Zeit für Animationen, also machen wir es mit diesen Buttons. Ich kann nicht glauben, dass ich durch die Webflow-Klasse so weit gekommen bin. Du kannst es nicht glauben. Du sagst: Warum haben wir Dinge animiert? Deshalb habe ich mich für den Workflow angemeldet , weil es cool aussieht, wenn die Dinge herumrutschen. Das werden wir uns ansehen. Ich mache es zunächst mit zwei Knöpfen. Wir holen das für das Gummiband. Dieser ist ziemlich cool. Pop, bereit für alles Wackelpudding, ob man hineinfliegt und sie vom Himmel fallen lässt. Floppy Doodles und mein Lieblings-Jigger GIGO. Okay, lasst uns lernen, wie man das in Webflow macht. Okay, lass uns das zaubern. Und so stellen Sie vielleicht fest, dass ich diese Animation bereits habe, wenn Sie zu diesem Video zurückgekehrt sind. Woher kam das? Denken Sie daran, auf einer Schaltfläche können Sie hier hineingehen und den Mauszeiger ändern. Okay, also wo ist meine Hintergrundfarbe ist zunächst grün, aber ich kann den Mauszeiger bewegen und sie in diese Art von Rosinrot ändern. Okay, das ist also diese Animation. Das möchte ich nicht abklicken, klicken Sie auf „Zurück“. Ich füge noch etwas hinzu. Was mache ich? Ich werde eines dieser Dinge von Anfang an tun. Also lass es uns machen. Ist dieses Panel hier, habe das gewünschte Element ausgewählt. Jetzt betätigen Sie unseren Knopf. Klickinteraktionen, okay, und wir werden uns mit diesem Element-Trigger befassen, nicht mit Seiten-Triggern, Element-Triggern. Wir sagen Head Plus. Also wenn dieses Element, okay, Schaltfläche So schwebt. Ja, wann, wenn ich den Mauszeiger darüber bewege, okay? Es wird etwas bewirken, nicht nur die Farbe ändern. Nein, wir bringen es zum Wackeln oder so. bei Hover diese Aktion aus. Okay, also werden wir einige der vorgefertigten machen , weil sie nett und einfach sind und ziemlich gut getimt sind. Also werden wir etwas tun, lass uns Pop machen. sie ist also irgendwie eingebrochen. Das wird sich wahrscheinlich ändern. Sie scheinen Dinge hinzuzufügen oder daraus zu entfernen. Es gibt also quasi Bewegungskram , der auftaucht und verschwindet. Und dann gibt es Dinge , die ihre Aufmerksamkeit erregen, Betonung, wir werden uns für Pop K entscheiden. Also lass uns Pop machen, lass uns eine Vorschau anzeigen, du bist bereit. Und es ist Arbeit und probieren Sie es aus. Also lasst uns eine Vorschau ansehen und schauen. Wenn ich den Mauszeiger darüber bewege, ändert es die Farbe und macht ein kleines Pop-Ding. Gute Lockerung, gut gemachter Arbeitsablauf, cool. Du kannst sie alle durchspielen. Mit den ausgewählten Interaktionen sehen Sie das alles. Und statt Pop können wir es tun. Bevor wir nun weitere davon mit großer Interaktionskraft durchgehen , geht eine große Verantwortung einher. Ich möchte deine Website finden. Google hat Spaß gemacht, aber ich möchte nicht auf Ihre Website gehen und 1.000 Dinge auf mich zuwackeln lassen. Okay. Auch wenn es sehr cool ist, es anzusehen, ist es gut, okay, aber es ist wie Lernen. Denken Sie daran, als Sie den Linsenblendeffekt in Photoshop K gelernt haben und alles einen Linsenblendeffekt hatte Ich warne, weißt du, alles auf deiner Seite muss animiert werden, auch wenn es mir eindeutig Freude bereitet. Die Dinge, die Sie beachten müssen, wenn Sie diese Elemente hinzufügen, Trigger. Dieses Element löst also etwas aus. Okay, kriegt es einen kleinen Blitz. Fantastisch, denn alles Harry Potter, nur ein visueller Hinweis darauf , dass, wenn ich hier drüben klicke und auf klicke , sagen wir mal, oh, es gibt eine Interaktion zu diesem, und ich kann sie nur sehen, wenn ich eine Vorschau sehe. Es erscheint auch hier drüben. Nur ein visueller Hinweis , dass dieser Blitz, während wir darauf warten, loszulegen Wenn Sie ihn anpassen müssen, wählen Sie ihn aus. Und gleich hier drüben kannst du darauf klicken und es öffnet sich. Schließ es. Da hast du es. Lass uns ein paar machen, ein bisschen mehr. Lass uns das Wackeln loswerden. So nett es auch ist. Lass uns noch einen schrecklichen machen. Das ist wie Bond-Türen aus PowerPoint-Folien. Es ist wie unser Übergang, aber es ist cool. Jedenfalls. Also haben wir unseren Hover raus. Im Moment schweben wir also rein und etwas und tun nichts, wenn wir wirklich, also können wir sagen, wenn es draußen schwebt , wir könnten etwas anderes tun. Ich gebe es zum Blinken. Gib dem eine Vorschau. Sie können es hier in der Vorschau anzeigen, aber es ist besser, es zu indirekten, denke ich. Oh, es flippt aus. Wo dein Tag ist. Das ist merkwürdig. Ich habe diese Kombination noch nie gemacht. Es liegt daran, dass das, was ich vermute, daran liegt, dass es sich bewegt. Also versucht es zu blinken. Wenn ich es befolge, wird es das nicht tun. Es wird das Gleichgewicht ausgleichen. Pass auf, ob ich den Finger drauf lassen kann. Ich habe es verstanden, weil es sich nach oben bewegt, also macht es den Maus-Rollover aus. Ergibt das Sinn? Es springt hoch und aktiviert dann den Rollout und so blinkt es und es flippt aus. Also lasst uns nicht balancieren. Es gibt einfach ein Verblassen. Probiere es aus. Heißer Herd und raus. Okay. Ah, ich lasse das hier drin, weil diese Probleme, auf die wir stoßen, diese Probleme sind auf Hover-Fades , wahrscheinlich kein gutes. Lass es uns wieder zum Platzen bringen. Und wenn es draußen schwebt, blinkt es irgendwie. Und mal sehen, ob das Problem dadurch behoben wird. Blinzeln. Hey, los. Es gibt Kombinationen, die es einfach nicht mag. Okay, das ist also okay. Benutze Blink nicht, ich denke, das ist das Vallate und ich lasse dich mit ihnen spielen. Andere Dinge, die du tun kannst, du kannst mehr als eine hinzufügen, okay, also lass uns den Hover Out loswerden, nur weil es mich umbringt und ich dir zeigen kann , wie du ihn loswerden kannst. Okay? Wie kann man es loswerden? Aktion. Wählen Sie eine Aktion aus. Das muss eine Nonnenoption sein, aber gehen wir zurück, um eine Aktion auszuwählen. Okay, also werd es los. Lassen Sie uns eine Vorschau anzeigen. Es wird den Pop platzen lassen und noch etwas anderes, sodass du noch einen hinzufügen kannst. Also lasst uns das schließen. Es gibt also zwei Teile, richtig? Sie befinden sich auf einer solchen Element-Trigger-Ebene und gehen hinein, um an unserem Maus-Hover zu arbeiten . Kommen Sie wieder heraus. Ich kann einen zweiten hinzufügen, ist ein kleines Plus. Ich kann sagen, ich will noch einen. Da steht, dass unsere Maus schwebt. Ich möchte zwei Dinge tun. Ich wollte es dazu bringen und ich bringe es dazu oder versuche eine Kombination auszudenken, die nicht alles aufzeichnet. Wir müssen es platzen lassen. Können wir es zum Spin bringen? Ich hätte das testen sollen, bevor ich dieses Video aufgenommen habe. Was bewirkt es? Es knallt nicht und macht es, oder. Lass es uns versuchen. Beides ist einfach zu machen. Es hat einen Pop und einen Spin-In. Bist du bereit? Das ist es. Es knallt. Es ist einfach. Es ist eine weitere schwierige Frage. Es wackelt rein und raus, während es sich dreht. glorreiche Dan. Okay, du kannst sie aktivieren. Ein schreckliches Video, aber wir lassen es hier drin, weil es manchmal, manchmal schön ist, die Probleme zu sehen, sowie die völlig immer funktionierenden Sachen, falls du in den Kaninchenbau gehst China, füge viel zu viele hinzu. Ordnung, was sollen wir eigentlich tun? Lass es uns beenden. Ja, geh sie alle selbst durch. Eigentlich werden wir sie nicht durchgehen. Wackeln. Wackeln. jemand, kann jemand das Wort Jugar sagen ohne dass das Louis-Throat-Lied rein kommt und der Kopf. Wie auch immer, wenn Sie noch nichts von Google gehört haben, großartig. Jedenfalls. Also lassen wir es auf Wiggle, denn damit möchte ich mit diesem Intro beginnen. Jeder andere große Vorteil ist, dass wir schweben, über den wir vorhin gesprochen haben. Hover funktioniert auf einem Tablet oder Telefon nicht , da Sie den Mauszeiger mit dem Finger bewegen können . Was wir also im nächsten Video machen werden, wir werden etwas mehr machen wie das Animationszeug zum Laden von Seiten. Das wäre cool. Also lass uns das jetzt machen. 27. In Webflow einlassen: Hallo zusammen. Wir machen das, sieh dir das an. Ich scrolle nach unten und die Dinge wieder, ein Fade-In, viel Ligand, den sie einblenden, während du nach oben scrollst. Wir machen es komplett und dann zeige ich Ihnen, wie Sie sie auch irgendwie ausgleichen können. Noch ein Mal. Lass uns einen Blick darauf werfen. Magisch. Lass uns, lass mich dir zeigen, wie man die Magie macht. Okay, lasst uns noch ein paar Blitze erstellen. Es sind also diese Elemente hier , die ich einblenden möchte. Also will ich es nicht mit dem Bild machen. Ich möchte es mit dem machen, was das Bild umgibt. In diesem Fall habe ich ein Div, auf das eine Klasse angewendet wurde , die als div class of int bezeichnet wird. Also gib dir selbst Unterricht, wenn du ihn nicht hast, okay, es ist eine gute Möglichkeit , ihn später wiederzuverwenden. Gehen wir also zu den Interaktionen. Jetzt, wo ich es ausgewählt habe, verwenden wir immer noch diese Element-Trigger. Wir sagen dieses Element hier. Ich würde gerne etwas anderes machen als vor dem Maus-Hover. Wir werden diesen namens Scroll in View verwenden. Wenn dieses Ding in Sicht gescrollt wird, hat das nichts mehr mit der Maus zu tun. Okay, es ist mit dem Scrollen der Seite fällig und du folgst ihm einfach. Du sagst einfach, okay, wenn sie gescrollt werden, um zu sehen, was du tun willst, wenn es in Sicht ist. Kannst du die Aktion machen, ich werde meine einfach dazu bringen, ein-, - und auszublenden. Ich will, dass es einblendet. Gehen wir zur Vorschau und testen wir es. Wenn du testest, wenn ich hier teste, lade einfach sofort. Okay, also was du tun musst ist irgendwie nach oben zu gehen. Du musst also ein bisschen scrollen. Sehen Sie sich jetzt eine Vorschau an und wir sind bereit für das Scrollen. Scrollen wird nicht nur einmal geladen, nicht jedes Mal zurückgesetzt. Lass uns nochmal gehen. Von oben. Da ist es. Da ist meine Gehaltsliste. Können wir die benutzen. Okay, schauen wir uns etwas anderes an, denn in dem Moment dem ein Großteil der eigentlichen Animation passiert, passiert es wie in der Sekunde. Es scheint, als ob es gerade einblasst und fertig sein kann, wenn die Person dort ankommt. Was also ganz nett ist, ist mit meinem Div-Wrapper ausgewählt, ich möchte diesen Offset verwenden und das liegt an dem Viewport. Viewport ist wie alles, was die Person von oben nach unten sehen kann. Und ich möchte es so ausgleichen, dass es möglicherweise einen Prozentsatz nach dem, nach dem Start der Seite, geladen wird. Also wird es wahrscheinlich geladen, sagen wir, das sind meine 100%. Es wird ungefähr dort 17% laden. Es wird anfangen, K zu aktivieren. Wenn ich es auf Gefällt mir einstelle, ist es schwer zu erklären. Um bis zu 40% Es wird erst aktiviert, wenn es 100% ig ist, es wird warten, bis es 40% auf der ganzen Seite erreicht und dann aktiviert wird. Es wird ein bisschen komisch sein. Es ist ein bisschen zu viel. Also lass es uns versuchen. Du wirst nach 20 aktiviert, das haben wir dir geschickt. Denk dran, fange ganz oben an. Gib ihm eine Vorschau. Scrollen Sie entlang. Und kannst du sehen, dass es ziemlich weit oben auf der Seite angefangen hat. Mach das aus und wieder an. Da hast du es. Was kannst du sonst noch tun? Sie könnten eine Verzögerung anstelle eines Offsets vornehmen. Offset wartet auf den physischen Teil davon , wie viel Scrollen erledigt wird. Du könntest das wieder auf Null bringen und sagen, dass ich verzögern möchte, oder wir möchten, dass es um diese Mini-Millisekunden verzögert, 1.000 Millisekunden sind 1 Sekunde, okay? Was viel zu lange dauert. Okay, also die Hälfte sind es 500 Millisekunden. Du gehst, probieren wir das aus. Also lasst uns eine Vorschau sehen. Wir werden etwas Ähnliches machen. Schau dir das an. Wenn ich nach unten scrolle, dauert es nur eine halbe Sekunde, bis es geladen wird. Du entscheidest, was du tun willst. Es ist wahrscheinlich besser, den Offset zu verwenden , weil er auf ein physisches Objekt wartet, wie hoch es ist. Während der Timer, schau dir das an, ich kann den Timer irgendwie betrügen, wenn ich hierher gehe und warte, und ich lasse es einfach nicht zu. Okay, lass uns noch einmal langsam mit meiner Maus gehen. Komm schon. Siehst du es geladen? Ich sah, wie es seinen Höhepunkt erreichte und fing dann an. Es ist ein kleiner Timer, was auch immer für dich funktioniert. Es gibt kein richtiges Richtig oder Falsch. Lassen Sie uns das jetzt ein bisschen weiter , denn ich wollte es mit allen machen. Was wir also tun können, ist, dass wir durchgehen und einfach jeden einzelnen bearbeiten genau den gleichen Prozess ausführen können. Es wäre praktisch, weil du gut darin wirst. Aber nehmen wir an, ich habe das, ich habe diese Interaktion. Unten steht hier, hey, die Triggereinstellungen. Das ist, ich möchte es nicht zum Element. Nun, das ist der Moment, in dem ich es einfach mit dem physischen Ding mache , das ich mit allem machen wollte , was denselben Klassennamen hat. Denken Sie daran, dass wir diese div-Klassenereignisse haben und Sie können sehen dass sie auf dieses und jenes angewendet wurden. Also sagen wir Klasse, gut, gut, alle, bitte schauen Sie, sie haben alle Blitze. Und es ist eine Vorschau. Los geht's. Scrollen Sie also nach oben. Gehen wir runter. Und du könntest mehrere Elemente machen. Könntest du das mit der ganzen Sektion machen? Sie könnten dann wahrscheinlich einfach den Abschnitt machen. Du hättest genau das Gleiche der Sektion machen können und es würde das Ganze viel einfacher machen als das, was ich gerade gemacht habe. Jedenfalls. Das Schöne daran ist jedoch, dass es wiederverwendbar ist, wenn ich es benutzt habe, während es vergangene Elemente teilt. Wenn ich etwas anderes habe, lass uns das durchgehen. In einem Div. Muss ich es in ein Div einpacken? Ich denke, ich kann ihm einfach den Klassennamen von div-Parse-Elementen geben. Das wird funktionieren. Ich sollte diese Dinge üben, bevor ich es dir zeige. Versuchen wir es oben, es wird wahrscheinlich nicht funktionieren, wenn es vollständig funktioniert. Vertrauen in dich selbst, dann ist das Ding wiederverwendbar solange du denselben Klassennamen verwendest. Das nächste, was ich tun möchte, ist, dass ich es im Moment ausgleichen möchte, richtig? Sie erscheinen alle gleichzeitig. Ich möchte, dass einer eingeblendet wird und der nächste, der nächste. Sie können es also nicht mit dieser Art von Struktur tun , die wir jetzt haben, wo wir dasselbe auf alle Klassen anwenden werden, weil sie nur ein wenig angewendet wurden. Und ich werde sagen, dass es wieder auf das Element angewendet wurde. Und es wird mich wiederholen. Ich sage: In Ordnung, also haben wir einen Ausgleich von 20%. Wir können das tun, aber eine Wiederholung. Also dieses nächste, dieses nächste Div Pass div vergangene Ereignisse. Wir sagen, fügen wir den Element-Trigger von l hinzu. Scrollen Sie in die Ansicht. Welche Maßnahmen würden wir gerne denken? Ich möchte, dass es eingeblendet wird und es um 20% ausgleichen möchte, eigentlich brauchen wir diesen vielleicht um 30%. Es ist ein bisschen höher, bevor es tatsächlich aktiviert wird. Es ist also eine Art, es zu terminieren. Wir könnten es auch mit der tatsächlichen Verzögerung tun, genau wie wir es zuvor getan haben. an dir, lass uns das ausprobieren. Sie haben einen Auslöser für Scrollen in Sicht. Action ist verblasst. Ich möchte, dass es nach einem Offset von Woody eingeblendet wird. Ich habe keine Ahnung, wie lang wird es aussehen? Es wird wahrscheinlich nicht sehr gut laufen. Die Prozentsätze sind wahrscheinlich etwas hoch. Fangen Sie ganz oben an. Gib ihm eine Vorschau. Lass uns mitmachen. Hey, ich hatte recht. Und ich glaube, ich habe auch versucht, es zu verzögern. Versuchen wir es mit der Verzögerung , denn das war ein bisschen nervös. Wenn Sie also einen Seitenversatz haben, halten wir alles bei 20 Prozent. Also geh rein. Ich schicke Null für diesen. Im nächsten werden wir darauf eingehen und sagen, bleib 20, weil ich nicht möchte, dass das zu früh passiert. Aber lassen Sie uns eine Verzögerung von beispielsweise einer Viertelsekunde haben , 250 Millisekunden. Wir gehen. Das nächste hier, das Gleiche. Setzen Sie es auf 20% zurück, 20% weniger als die Seite. Bartlett hat eine halbe Sekunde, also 500 Millisekunden. Ordnung, geben wir ihm einen der Besten. Oh ja. Was denkst du? Ist es eine Kohorte oder werden später im Kurs benutzerdefinierte Animationen erstellt. Aber im Moment und die meiste Zeit haben diese bei diesen vorgefertigten wirklich gute Arbeit geleistet und diese Elemente werden ausgelöst. Ordnung, meine Freunde, das ist ein Fade-In, wenn du auf einer Seite in Webflow scrollst. 28. Kursprojekt 04 - Interaktionen: Hallo zusammen, Klassenprojekt Nummer vier. Dieser dient dazu, Ihre eigenen Interaktionen zu erstellen. Ich möchte zwei davon erstellen, wie wir es in diesem Kurs getan haben. Eine für die Schaltfläche und etwas, das sich auf der Seite befindet, zum Beispiel Mitglied, das ist die Schaltfläche beim Hover. Okay, du kannst machen, was du willst. Und die Seite scrollt in meinen Fällen ein, aber Sie können tun, was Sie wollen. Der beste Weg, es mit mir zu teilen, ist es per Video zu machen. Ich bin also auf einem Mac. Ich weiß, dass Sie Command Shift F5 drücken und einen Abschnitt Ihres Bildschirms aufnehmen und ihn dann in die Aufgaben, Projekte oder Kommentare hochladen können, je nachdem, wo Sie ihn sehen. Und manchmal ist es einfacher, es zuerst auf Vimeo oder YouTube hochzuladen es zuerst auf Vimeo oder YouTube und den Link einfach auf einem PC zu posten. Ich bin mir nicht ganz sicher, wie Sie das auf Ihrem PC machen könnten. Also googeln Sie einfach , wie es auf Ihrem PC geht. Diese Bildschirmaufzeichnungssoftware auf Mac und PC. Ich habe Google darüber informiert, wie das geht. Wenn nicht, schauen Sie, nicht jeder kann seinen eigenen Bildschirm aufnehmen. Wenn du das nicht kannst, akzeptiere ich nur Screenshots. Okay, schau mal, ob du das Video machen kannst . Ich liebe es zu sehen, was es ist. Übe, hab Spaß, genieß es und wir sehen uns im nächsten Video. 29. Teilen mit deinem Design mit deinem Kunden: Hallo zusammen. In diesem Video schauen wir uns an , was wir mit unserem Kunden gemacht haben. Wie machen wir das? Jetzt tun wir so, als dies in Arbeit ist. Es ist in Arbeit, aber genau das tun wir gerade. Wir möchten mit dem Kunden einen Teil des großen Finales teilen . Ich kündige es der Welt an. Das ist wie, Hey Jeff oder Ginny, und hier will ich hin. Was denkst du? Nun, vielleicht wird es für Leute getestet , damit sie es irgendwie durcharbeiten, Fehler oder etwas Fehlendes finden können. Wie machen wir das? Super einfach. Wenn Ihre Website geöffnet ist, gehen Sie zu Veröffentlichen, und das sollte bereits angekreuzt sein und klicken Sie einfach auf Veröffentlichen wie bei den Domains. Lass es uns schnell machen und dann gehe ich zurück und zeige dir ein paar andere Dinge. Es ist also jetzt live im Internet. Es ist sehr aufregend, dazu zu kommen. Klicken Sie hier auf diesen kleinen Pfeil, oder Sie können ihn kopieren und einfügen, oder es sollte sich öffnen und meine Freunde ist Ihre Website im Internet. Es ist voll funktionsfähig. Okay, los geht's. Und Sie können das kopieren und einfügen, an Ihren Kunden senden und sagen: Hey, schauen Sie es sich an. Es ist sehr aufregend, wenn Sie neu im Webdesign sind, Ihre Sachen auf den Markt zu bringen und tatsächlich online zu stellen, anstatt nur irgendwie in Webflow oder Photoshop oder Figma oder XD gefangen Webflow oder Photoshop oder Figma oder XD wo auch immer Ihre ersten Designs sind Handeln Sie ein großer Meilenstein. Hurra. Werfen wir einen kleinen Blick zurück. Das hier ist also die Domain, die Sie verwenden werden. Stellen Sie sich das als Staging-Domain vor. So merkwürdig. Ein bisschen, das im Webdesign für einen Entwurfsteil der Website verwendet wird, ist voll funktionsfähig. Daran ist nichts falsch. Es ist nur auf einer sogenannten Subdomain. Die Hauptdomäne hier ist also workflow dot io. Diese andere Idee, Kayak Club Dot Workflow zu IO, der Subdomain für die Hauptdomain. Wie auch immer, manche Leute nennen es Staging-Domain und es ist einfach ein guter Weg, wir sind in Arbeit. Schließlich fügen Sie Ihre eigene benutzerdefinierte Domain hinzu, was wir gemeinsam tun werden. Und es wird auf einer Website sein. Davon kann es leben. Es ist einfach keine schöne URL. Es ist ein bisschen unprofessionell. Aber wenn Sie eine sehr unprofessionelle Website haben, sollten Sie diese Subdomain verwenden. Wenn Sie es überprüfen und dann wieder ausschalten möchten, wenn Sie es nicht veröffentlicht haben, wird es aus dem Internet entfernt. Das einzige Problem ist, dass, wenn ich hierher gehe und meine Seite aktualisiere, bekommst du eine große alte für vier Ära die Aramäer, die Website kann nicht gefunden werden. Okay. Wenn ich es also wieder einschalte, wird es wieder gefunden. Es ist also so, als würde man ein- und ausschalten. Und eine Sache, die Sie hier vielleicht fragen, ist: Es gibt ein paar Dinge, die Sie vielleicht einschalten möchten. Okay, also gehe ich zu meinen Projekteinstellungen. Wer erinnert sich, wo das war? haben wir am Anfang gemacht, das waren vier Plätze. Wir haben uns drei davon angesehen. Der Designer, da war der Redakteur, was wir später machen werden. Und dann Projekteinstellungen und Dashboard. Wir waren alle versteckt. Du erinnerst dich daran. Okay, Projekteinstellungen. Projekteinstellungen für den Deer Kayak Club. Jetzt zeige ich Ihnen einige Dinge , die Sie wahrscheinlich noch nicht tun können , wenn Sie den kostenlosen Plan haben. Wir haben noch nichts getan. Okay? Und wenn Sie das tun, zeige ich sie Ihnen weil Sie einen Blick darauf werfen möchten, aber sie benötigen eine kostenpflichtige Version von Webflow. Im Allgemeinen ein Website-Passwort, das die Leute gerne einschalten, wenn sie so Website-Passwort, das die Leute gerne einschalten, wenn sie sind, als wäre es einfach neu und ich mache mir darüber keine Sorgen. Früher habe ich es getan, weil niemand vermuten wird, dass es keine Möglichkeit gibt, ihn zu wie ein Hirschkajak-Club, wenn Float IO finden, wie ein Hirschkajak-Club, wenn Float IO ist. Nun, es ist schwer zu finden, aber Sie könnten das einschalten, aber Sie müssen Ihr Hosting aktualisieren. Ich werde dir das auch später erklären. Wenn Sie sich noch nicht daran erinnert haben, ob Sie ein Upgrade auf Hosting durchführen möchten, können Sie meinen Link hier auf dem Bildschirm verwenden. Eine andere Sache, die Sie vielleicht tun möchten ist, wenn es noch lange da oben sein wird, unter der Registerkarte SEO. Hier gibt es eine, die Indizierung genannt wird. Wenn Sie dies einschalten, bedeutet das nur, dass Google es nicht indexieren wird. Und was sie mit Indizierung meinen, ist das Hinzufügen zu den Suchergebnissen, da dies nur eine laufende Arbeit ist , die noch nicht ganz abgeschlossen ist. Es ist die falsche Subdomain, vielleicht sind Platzhalter-Tics wie eine ALS. Wir sagen also nur, dass sie Google sagen, gehen Sie nicht rein, durchsuchen Sie meine Website und fügen Sie sie zu Ihren umfangreichen Suchergebnissen hinzu. Vielen Dank. Aber wenn Sie auf Änderungen speichern klicken, heißt es: Hey, Sie müssen Ihr Hosting aktualisieren. Also im Moment, und das ist nicht das, was wir tun wollen. Okay, also gehe ich von zurück zu SEO. Vielleicht möchten Sie diese Dinge einschalten oder Sie haben einfach diese Fragen im Kopf. Ja, du kannst sie machen. Ja, Sie benötigen einen kostenpflichtigen Hosting-Plan, aber machen Sie sich im Moment keine Sorgen. Als ob ich mir darüber keine Sorgen mache. Folgendes versuche ich zu vermitteln. Sie könnten so sein, als bräuchte es ein Passwort. Du kannst das auf jeden Fall tun. Aber nur diesen Link dort zu teilen ist in Ordnung. Wenn es läuft, können Sie natürlich noch einen Tipp aus den Sitzungen veröffentlichen. Nicht dass du es nie von hier aus machst, aber du kannst die Seite von hier aus biegen. Sie können die Veröffentlichung in den Projekteinstellungen der Website rückgängig machen. Aber ich finde es einfacher, so zu arbeiten. Und wenn Sie es ein- und ausschalten möchten, teilen Sie dem Kunden einfach mit , dass es einen Testtag gibt und Sie die URL deaktivieren werden . Ordnung, das war's für diesen. Gehen wir zum nächsten Video über. Wir sehen uns dort. 30. Wie viel ist Webflow Hosting Site vs Arbeitsfläche: Hallo zusammen. In diesem Video werden wir uns das Hosting auf Webflow ansehen , die Vor- und Nachteile. Wir werden uns auch ansehen, was der Unterschied zwischen einem Standort- und einem Arbeitsbereichsplan ist. Es springt. Ordnung. Das Erste ist, dass ich wette, ich gerade in ihrem Büro bin und darauf warte, dass ich dieses Video fertigstelle , damit sie die Sprache, die Preise und die Funktionen, die Sie erhalten, aktualisieren können. also sicher, dass ich es jetzt durchgehen werde , aber das könnte sich ändern, die Sprache könnte sich ändern, aber es gibt Ihnen einen guten allgemeinen Überblick. Also bin ich hier auf meinem Armaturenbrett. Sie werden sehen, dass dies die Seite ist, an der wir arbeiten. Es heißt Status Site. Es gibt diese andere Sache namens Einen Arbeitsplatz starten. Das war wahrscheinlich das Schwierigste verstehen musste, als ich anfing. Lassen Sie uns diese besprechen. Und ich gehe hier auf diese Seite. Es ist die Preissenkung von webflow.com, und das ist wahrscheinlich dasselbe. Ich möchte hier nicht auf die beiden verschiedenen Optionen eingehen. Es gibt so etwas wie Lagepläne und unten hier Arbeitsbereichspläne. Wo ist der Unterschied? Kurz gesagt, ein Lageplan wird gehostet , so nennen sie es kalte Standortpläne und Wirtschaftspläne. Diese Dinge sind die gleichen, nur verschiedene Ebenen hier, aber dies ist das Hosten Ihrer Website irgendwo im Internet, wo sie dort leben kann , wo die Leute sie besuchen können. Jemand muss es hosten. Also genau das ist dieser Kofferraum. Der Workspace-Plan ist Sie als Designer, Sie als Designer so, als würden wir ihn im Moment kostenlos nutzen. Aber nehmen wir an, ich möchte mehr als das für gehostete Websites erstellen . Ich brauche zehn davon. Ich muss den Code exportieren. Ich muss einen Passwortschutz hinzufügen. Dort rüsten Sie als Designer das auf. Sie persönlich werden dies aktualisieren und 19 US-Dollar pro Monat zahlen, dann benötigt jede Website ein Hosting. Wenn Sie also zehn Websites haben, sind es zehn mal 12. Jede Website benötigt Hosting, aber Sie, wie es der Designer benötigt, können Sie versuchen, mit einer kostenlosen Website davonzukommen, aber Sie müssen möglicherweise hier ein Upgrade auf diese durchführen, wenn Sie mehr als eine Website erstellen möchten weil es viele Funktionen freischaltet . Das ist es also. Sie können mit nur einer Zahlung davonkommen. Du brauchst vielleicht beide , wenn du ernsthaft in Webflow gehen willst, das ist die dünne Version. Schauen wir uns etwas genauer an und die Standortpläne, diesen E-Commerce-Plan, also befinden wir uns auf dieser Datenebene. Der große Nachteil hier ist dass Sie keine benutzerdefinierte Domain erhalten, okay, jeder wird Daniel Scott.com wollen, keinen Hirschbindestrich, Kajak-Bindestrich, Clubpunktbreite, Io laden. Okay. Das ist also das, wenn Sie es aktualisieren müssen und das ist alles, was Sie tun. Nehmen wir an, diese Website ist Ihre Website. Es ist statisch. Es macht nicht viel und Sie wollen nur den Domainnamen. Das ist alles, was Sie brauchen, um sich die Basis zu schnappen , um die benutzerdefinierte Domain zu bekommen, und das war's. Der nächste Sprung nach oben ist ein CMS. Also werden wir ein CMS machen, wenn wir ihren eigenen Blog erstellen. Es ist, wenn es ein paar Gegenstände gibt und du mich siehst. Es ist wie in Blogbeiträgen oder es könnten Portfolioelemente oder CMS, Content Management System, sein. Wenn Sie etwas davon benötigen, möchten Sie, dass der Kunde Artikel oder Blog-Beiträge aktualisieren kann . Du musst hier zu diesem gehen und es gibt nur eine Einschränkung für CMS-Elemente, okay, wenn du mehr als 2000 hast, musst du hierher springen. Gleiche gilt für die Bandbreite. 50 GB sind ziemlich viel für eine kleine Site 200 ist ziemlich viel. Und dann fängst du an , 400 Gig zu werden. Aber es ist wie bei den Trends, wie viele Informationen von deinem Gastgeber an die Leute gesendet werden. Im Grunde hängt es davon ab, wie viel sie tatsächlich Bilder und Videos und alle möglichen anderen Dinge herunterladen müssen. Und es kommt wirklich darauf an, wie viel Verkehr Sie haben. Wenn Sie diese höheren Preise erreichen, erzielen Sie oft mehr Umsatz und das ist übersetzbar. Zahlen Sie weniger für weniger Verkehr, zahlen Sie mehr für mehr Verkehr. Der große Sprung hier sind die E-Commerce-Site-Pläne hier. Cms, statische Seiten, perfekt. Wenn Sie anfangen möchten, Zahlungen anzunehmen, müssen Sie hier zu Beginn zu den Grundlagen dieser Zahlung übergehen. Hier hilft uns Flow bei Zahlungen und Einkaufswagen Bestellungen und Versand und all den lustigen Dingen , die unglaublich, wirklich hilfreich von Webflow sind, aber ein bisschen mehr kosten. ist also genau dasselbe, nur mit verschiedenen Ebenen. Wie für ein Tag ein Kajakclub darin wahrscheinlich in Ordnung sein wird weil ich den zusätzlichen Domainnamen haben möchte und er wahrscheinlich nicht mehr als 50 GB bekommen wird. Sagt, ich möchte anfangen, Sachen daraus zu verkaufen. Ich muss auf ein Minimum davon upgraden. Und dann wieder, das wird nur irgendwie verbessert, abhängig von Ihrem Level, wie vielen Dingen sich in Ihrem Shop befinden und Ihrem Verkaufsvolumen. Sie können sich all diese Dinge ansehen. Sie sehen sich irgendwie alle geplanten Funktionen an. Und Sie können nach unten scrollen und einen Blick darauf werfen, was für Sie funktioniert womit Sie durchkommen können und Sie können bei Bedarf ein Upgrade durchführen. Ordnung, das wird meine dünne Version sein. Ich möchte nicht jedes Feature durchgehen , weil es sich ändern wird. Ich weiß, dass es so ist, aber gehen Sie zu Preisen, Anzeigen oder Planen Sie Funktionen für beide Hosting-K, das sind die Website- oder E-Commerce-Pläne. Und dann schauen Sie sich Workspace an und sehen Sie, was für Sie funktionieren wird. Wenn Sie neu sind, melden Sie sich vielleicht für ein monatliches Konto an und Sie können auf ein jährliches Konto upgraden , wenn Sie langfristig etwas Geld sparen möchten , eigentlich bevor Sie losfahren. Vor- und Nachteile für mich sind die Nachteile, dass es im Vergleich zum Hosting etwas teuer ist. Hosting muss bezahlt werden, jemand muss irgendwo dafür bezahlen. Ging über die Tage der freien Geostädte hinweg, Hände hoch. Wer erinnert sich an diejenigen, bei denen sie es früher aus Anzeigen finanziert haben, ich denke, man muss irgendwo für das Hosting bezahlen. Aber der Nachteil dabei ist, dass es etwas teurer ist als andere Orte. Wenn Sie solche Dinge schon einmal gemacht haben , ist das nicht unverschämt, aber es führt irgendwie zu den Profis und fühlt sich wohl Sie Ihren eigenen Gastgeber aufsitzen, als eine Sache. Wenn nicht, kann ich eine Domain einrichten. Ich kann einrichten, ich kann eine Datenbank einrichten und meinen Host woanders einrichten. Ja, aber ich mag das, weil es jemand ist, der sich darum kümmert. Die Sicherheitspatches werden alle von jemand anderem ausgeführt. Für mich sitzen einige der Großen darauf, dass der Kunde es aktualisieren kann, sodass sie sich beim Editor anmelden und Aktualisierungen vornehmen können , um unsere eigenen Blog-Beiträge hinzuzufügen, ihre eigenen Artikel zum Geschäft hinzuzufügen, organisieren ihre eigenen Bestellungen. Das Formular, das alle Arten von Outsourcing ist als von ihnen gehandhabt. Ordnung, das war's. Site-Pläne und E-Commerce werden gehostet. Und dieser hier unten ist im Grunde genommen oder ist es ein Arbeitsbereich? Zahlen Sie für die Nutzung der Software? Ich verwende Air Quotes, weil es eine Art Website ist, aber Software als Service. Da haben wir's. In Ordnung. Ich habe dort wahrscheinlich das Offensichtliche angegeben, aber ich hoffe trotzdem, dass es hilfreich war, wenn es nicht so war. Es tut mir leid. Wie dem auch sei, wir sehen uns im nächsten Video. Wir werden anfangen, unser Portfolio spannend zu gestalten. 31. Die besten Webflow und shortcuts und Tricks: Bist du bereit? Das ist aufregend, Tipps, Tricks, Abkürzungen. Jetzt, da wir ein paar Webflow-Fähigkeiten auf dem Laufenden haben, werde ich Ihnen einige Dinge vorstellen, um Ihren Tag viel schneller zu gestalten. Lassen Sie Sie auch vor Ihren Kollegen beeindruckend aussehen . Bleib bis zum Ende herum. Ich habe dort am Ende spezielle Windstrom-Ostereier versteckt. Okay, wahrscheinlich die am häufigsten verwendete, oder zumindest für mich, ist auf einem Mac, es ist Command Shift P. Auf einem PC ist es Control Shift P, drücke das und es wechselt einfach dazwischen. Sie können einfach weiter auf diese Schaltflächen drücken und der Vorschaumodus wird ein- und ausgeschaltet, anstatt zu versuchen, hier oben auf diese weitere Verleumdung zu klicken. Okay, das ist Command Shift P auf einem Mac, steuere Shift P auf einem PC, es bringt den Bieter in den Vorschaumodus und Sie können auf Ihrer Tastatur auf Ihre Tastatur schauen, die Zahlen, die sich über dem Buchstabenkopf befinden 12345, Ton. Man kann einfach zwischen all den verschiedenen Ansichten hin- und herspringen. 123455 ist nicht die, die du willst. Öffnet einfach, dass nur 1234 oder sogar Sie können es sowohl im Vorschaumodus als auch im Designer tun . Eins-zwei-drei-vier, ich erinnere mich an Command Shift P oder Control Shift P auf einem PC, Sie können sich den Vorschaumodus ansehen. nächste super tolle ist B wieder in deinem Designer bei einer Vorschau. Und auf deiner Tastatur hast du A, S, D und Z. Sie sind alle irgendwie auf einer englischen Tastatur gruppiert . Sie sind alle sehr praktisch. Das sind die, die ich am häufigsten benutze. Wenn Sie Interaktionslose verwenden, können Sie sehen, ob Sie den Mauszeiger darüber bewegen, es ist H. Ich erinnere mich nie an die Abkürzung für Interaktionen, weil ich nicht die ganze Zeit da bin. Die, die ich die ganze Zeit da bin. Unser ASD Z a ist Ed. Das ergibt Sinn. A für Ed. Ich gehe immer in die Anzeige und dann zurück zum Navigator , der z a z, a z ist. Der andere ist S für Stile. Schau dir das an, wenn du hier bist und auf etwas anderem bist, drücke S für Styles , die Sinn machen. A für ED, S für Styles. Und was wären die Sitzungen. D ergibt keinen Sinn. Es ist sinnvoll, weil es sich neben den anderen nützlichen auf Ihrer Tastatur befindet. Aber los geht's. Als Lasten D verwende ich Lasten und Z für den Navigator. Denken Sie daran, dass es viele andere gibt. Du musst nur über ihnen schweben. Und wenn Sie die Style-Manager-Ladungen verwenden, Sie wahrscheinlich der einzige, aber es ist G. Du gehst, okay, ASD z. Der nächste ist super genial ist die Verknüpfung „Alles finden“. Also bin ich, ich bin hier und ich möchte etwas hinzufügen anstatt in mein A zu gehen und dann zu scrollen und es als Komponente herauszufinden, vielleicht ist es unter Layouts. Was Sie tun können, ist auf den Punkt zu kommen und einfach darauf zu klicken, wo es hingehen soll, und Command E auf Ihrer Tastatur zu drücken. Kannst du das sehen? etwas angezeigt wird, müssen Sie nur wissen, was Sie eingeben müssen. Und wenn ich ein anderes Bild möchte, fange ich einfach an, Bild zu tippen. Da hast du es. Es fügt ein Bild hinzu, das sofort einsatzbereit ist. Deshalb möchte ich unter diesem Absatztext eine weitere Überschrift hinzufügen . Also gehen Command D und ich einfach los, los geht's. Drücken Sie die Eingabetaste. Ich tippte einfach die ersten Buchstaben ein und drückte die Eingabetaste und fing an zu drücken, wenn Sie sich vage erinnern können, wie es heißt, Command E. Oh, das ist Command D auf einem Mac, Control E auf einem PC. Tut mir leid, PC-Leute, ich habe es vergessen. Ja, okay, also kommandieren Sie E auf einem PC und klicken Sie dann auf Fußzeile. Schau dir das an. Da ist eine Fußzeile, riesiger Fuß hoch. Ich kann darin keine Fußzeile hinzufügen. Wie auch immer, du kommst auf die Idee. Command K funktioniert auch. Macht Control K auch auf einem PC. Wenn einige dieser Verknüpfungen nicht funktionieren oder sich ändern, können Sie nach unten gehen, um dieses kleine Fragezeichen in der Hugo-Hilfe und den Tastaturkürzeln zu sehen . Und es wird den Maulwurf auflisten ich dir gebe, die guten. Kannst du auf einem Mac sehen, es sind Command E und Command K. Damals war es nur Command K, aber die Befehlstaste auf einem Mac öffnet sich. Ich kann mich nicht erinnern. Ist die Patrouille in Michigan etwas anderes? Also haben sie es geändert, aber sie heben das alte auf, was sowieso verwirrend ist. Also das ist Control oder Command E, finde irgendwas. Das wird jetzt besser. Wie kann man besser verwenden, hey, wenn man eine Klasse automatisch hinzufügen kann? Nun, sieh dir das einfach an. Nehmen wir an, ich habe diesen Stil hier. Ich werde eine Klasse hinzufügen, wenn wir hier oben waren und das durchgemacht haben und wir können aus vorhandenen auswählen oder sie eingeben, um sie hinzuzufügen. Schau dir das an. Wenn ich einfach meine Tastatur benutzen könnte, klicke darauf und ich drücke Command oder Control, Return auf meinen Tastaturtasten, es ist hier drüben aufgesprungen. Hier bin ich. Ich kann Heizung eingeben, weil ich meine relativ gut benannt habe. Da haben wir's. Gehen wir zu diesem Command Return oder Control Return. Und ich werde einfach noch einen Bauchabsatz eingeben. Ich hab eine SMS. Da hast du es. Ich benutze meine Pfeile, um nach unten zu gehen. Da ist mein Textblockraster. Los geht's, wo es cool wird ist Festival und machen meins rückgängig. Command or Control Z. Um zurück zu kommen zeige ich Ihnen ein bisschen mehr von einem Flow, der ein paar davon kombiniert. Also unter diesem Absatz brauche ich einen, sagen wir mal einen weiteren Treffer. Also werde ich Command E zum Neuladen der Site gehen. Welche Abkürzung ich gedrückt habe, ich bin mir nicht sicher. Es ist schon wieder so. Also hier drücken wir Befehl E. Ich tippe ein und drücke die Eingabetaste, drücke den Befehl zurück, um die Klasse hinzuzufügen. Und ich werde einen runterschlagen. So können Sie Dinge hinzufügen und stylen, ohne alle Menüs durchzugehen. Sie fügen Command oder Control E zusammen mit Command oder Control Return hinzu. Dieser hier, Button, ich gehe auf Command Return. Was habe ich sonst noch vergessen ein Mehr Button Styles. Ich habe nur ein Tasten-Navi. Du kannst sie hinzufügen. Nehmen wir an, ich möchte nur einen hinzufügen. Ich möchte ein Gerinnsel hinzufügen und ich möchte hier eine neue Klasse hinzufügen. Also nenne ich es einfach Button und nenne das eine lila Rückkehr. Es wurde eine Klasse erstellt. Anstatt eine auszuwählen, ist es dieselbe Verknüpfung Command oder Control Return. Und dann kann ich hier runter gehen und sagen, dass der Hintergrund dieses jetzt lila sein wird . Da haben wir's. Ordnung, der nächste ist ziemlich cool. Es ist dieser hier. Es heißt X-Ray-Modus. Das ist die Abkürzung Command Shift X oder PC. Es wird Control Shift X sein. Was macht es? Es macht alles schwarz und weiß, was nicht so nützlich ist. Was jedoch nützlich ist, ist, wenn ich in diesem Modus bin, beobachte, wenn ich den Mauszeiger darüber bewege, kannst du sehen, dass ich nichts mache , ich schwebe nur und es zeigt mir die gesamte Polsterung und wo sie ist kommt von. Kannst du das sehen? Warum ist das hier? Das liegt daran, dass es eine grüne Polsterung gibt. Was drückt das ein bisschen nach unten? Das liegt daran, dass es Blau gibt, was Rand ist, genauso wie hier. Wenn ich nach oben klicke, klicke ich nicht einmal auf diesen Abschnitt hier. Es hat Polster drauf. Das ist es, was all diese Dinge vorantreibt. Es ist kein Spielraum vom Titel. Es geht vom Sektionshelden weiter. Es ist also einfach eine wirklich praktische Art , sich zu bewegen und zu gehen, was macht das aus? Mach das. Ordnung, das ist Command Shift X oder Control Shift X auf Ein und Aus und arbeiten Sie sich einfach um, um zu sehen, was betroffen ist. Großartig. Wenn Sie an einem Projekt eines anderen arbeiten und es nicht oder Ihres von vor langer Zeit können und Sie sich nicht erinnern können, was die Dinge tatsächlich dazu bringt, das zu tun, was sie tun sollen. Der nächste ist hier in meinen Styles, das ist S für Styles. Ich bin im Style-Panel. Und wenn Sie auf einem Mac die Wahltaste gedrückt halten, drücken Taste 0 auf einem PC und klicken Sie auf einen dieser kleinen Pfeile oder Chevrons. Sie haben alle geschlossen und es ist einfach eine nette und ordentliche Art zu arbeiten und einfach rein und raus zu gehen, anstatt sie alle offen zu haben, was dieselbe Taste hat, Alt oder Option, und zu scrollen durch sie hindurch und versuche herauszufinden, wo sie sind. Die andere nette Sache an dieser Option ist, dass Sie sehen können , ob ich diese ausgewählt habe. Es zeigt mir, dass dieses Bild, diese Klasse, zumindest die ich hier ausgewählt habe, Dinge über Layout und Abstand macht, aber sonst nichts. Es gibt keine blauen Punkte. Das bedeutet, dass etwas in dieser Klasse tatsächlich etwas tut. Und in diesem Fall ist das Display auf Blockieren eingestellt. Die Größe hat einen gewissen Spielraum. Diese hier, diese Klasse macht nichts mit Position, absolut nichts, keine Punkte. Die bernsteinfarbenen hier sagen nur , dass es tatsächlich eine maximale Breite gibt , die von woanders kommt. Und deshalb ist es Amber. Wie finde ich heraus, was das zu 100% ausmacht? Sie halten die Wahltaste auf einem Mac gedrückt, Alt-Taste auf einem PC und klicken einfach darauf. Tatsächlich funktioniert die Befehlstaste oder die Steuerungstaste auf einem PC. Und es heißt, die Werte, die von allen Bildern kommen, kennzeichnen. Wir schauen uns das Etikett später an. Aber es gibt Zeiten , in denen wir uns diese Texttypografie ansehen . Hier wird nichts getan. Eine Menge, viel MBA-Zeug. Lass uns den Mauszeiger darüber bewegen. Schauen wir uns die Farbe an, während die Farbe, die von kommt, halten Sie die Befehlstaste auf einem Mac und die Strg-Taste auf einem PC gedrückt. steht, hi, es kommt aus der Sektion Hero. Von dort hat es also seine Farbe. Also könnte ich hier auf diesen Abschnitt klicken und sagen: Ja, da ist er, er ist blau, er ist weiß. Es wirkt sich auf alles aus , was sich darin befindet. Ordnung, der nächste ist das Kommissionieren von Einheiten. Also lass uns sagen, das hier trifft, wir wollen eigentlich gehen, ja, lass uns das machen. Lass uns die Topographie machen. Und nehmen wir an, wir wollen nicht, dass es Pixel sind. Wir werden Ziele verwenden, okay, du musst das nicht wirklich fallen lassen und sagen, dass ich Ziele oder Felgen will. Ich kann das einfach rückgängig machen lassen. Ich tippe einfach ein, ich möchte, dass es im RAM ist und drücke Enter. Sie sehen, es hat das gerade aktualisiert und angepasst. In jedem dieser Felder können Sie Maße eingeben und sagen der Abstand ein Rand von 50 sein soll, aber ich wollte Prozent sein. Anstatt es von Pixeln zu ändern, kann ich einfach Prozent eingeben und es werden 50% erreicht. Ordnung, rückgängig machen, rückgängig machen. Die Dinge werden wackelig und wir werden ihn los. Nächste, in Ordnung, Diese nächste ist nützlicher , wenn Sie komplexere Websites haben, werde später eine davon erstellen. Aber um alles hier in dieses Video zu bringen, klicken wir hier auf dieses Bild. Und wenn ich meinen linken und rechten Pfeil benutze, kannst du sehen, dass er sich durch alles bewegt , was als Geschwister angesehen wird. Alles, was in dieser Sektion Hero oder diese Jungs heißt , das sind alles Freunde. Sie sind alle Geschwister. Sie sind alle auf dem gleichen Niveau. Sie können hier klicken und mit der linken und rechten Maustaste die verschiedenen auswählen. Es kann schwierig sein, diese Dinge auszuwählen. Es gibt viele Daten auf der Seite und vielleicht sind sie nicht sehr groß. Also links und rechts sind Geschwister auf und ab. Also kann ich meinen Aufwärtspfeil benutzen , um das Elternteil auszuwählen. In diesem Fall ist es der Sektionsheld. Wir gehen. Das ist also der Unterschied dort. Manchmal kann man sogar auf den darunter liegenden Bereich klicken. Sie klicken also auf das Kind und drücken einfach den Aufwärtspfeil und das wählt alles aus , was sich außerhalb des Kindes befindet. Dies kann sehr praktisch sein, wenn kein Platz ist. Vielleicht verdecken diese Buttons den Hintergrund. Wir können es nicht auswählen. Also können wir dir einfach den Pfeil nach oben sagen, wähle das übergeordnete Element aus , das hier unten funktioniert. Denken Sie daran, dass es hier div-Tags gibt. Wir können den Navigator natürlich benutzen, aber wir klicken einfach auf dieses Bild, drücken den Aufwärtspfeil, und wir wählen das übergeordnete Div nach unten beginnen mit der Auswahl der Kinder. Ich kann also sagen, Abschnitt vergangene Ereignisse, ich kann Pfeil nach unten, Pfeil nach unten gehen und tiefer in sie eindringen, was ich nie tue. Aber der Aufwärtspfeil ist wirklich gut. Wählen Sie das Elternteil aus, machen Sie weiter Irgendwann bekommst du die Leiche ganz oben, die Großeltern, niemand nennt es so Bowie. In Ordnung, der nächste. Als nächstes werde ich hier auf diese Absatz-Tags klicken . Ich möchte die Größe ändern. Wenn ich hier reinklicke, kann ich meinen Aufwärtspfeil benutzen. Kannst du sehen, dass es sich durch 16, 17, 18, 19, unten, auf und ab bewegt . Nur mit den Pfeiltasten in einem dieser kleinen Felder können Sie mit der Tabulatortaste zum nächsten wechseln , wobei diese Registerkarte die Höhe hat. Okay, also kannst du mit diesen Shift-Tabs rumspielen . Cool. Ich benutze es ständig. Aber ich füge hinzu, du kannst die Umschalttaste gedrückt halten und den Aufwärtspfeil verwenden. Siehst du, es geht in Dosen und Zinn. Okay, und das gilt im Grunde für jede dieser Optionen. Nehmen wir an, ich möchte, dass der Abstand am Rand hier bei eins beginnt. Ich kann hier reinklicken und meinen Aufwärtspfeil verwenden, um einzeln zu gehen, Shift gedrückt halten, um hinüberzugehen, und große Chunks. Kannst du sehen, wie es sich auf Patria bewegt? Ordnung, wie setzt man es zurück? Sie können bei den meisten davon die Reset-Taste drücken oder die Wahltaste oder die Alt-Taste gedrückt halten und darauf klicken. Dadurch wird sie einfach auf die Standardeinstellung zurückgesetzt. Denk an die Null. Denken Sie daran, dass die Standardeinstellung manchmal nicht In diesem Fall hier, wenn ich es auf den zurücksetze, wenn ich es auf Null setze, um zum Standard zurückzukehren , nicht zum Standard. Die Standardeinstellung ist wahrscheinlich 16. Halten Sie die Option gedrückt, klicken Sie darauf und es wird tatsächlich, 14 ist das, was die Standardeinstellung dafür ist. Denken Sie also daran, Wahltaste oder Alt-Klick ist besser, um es zurückzusetzen und es dort herauszuholen. Kehren Sie nicht zu dem zurück, was es standardmäßig war. Du kommst auf die Idee. keine Angst, Dinge mit Alt zu ziehen. Halten Sie also die Alt-Taste auf einer PC-Option auf einem Mac gedrückt und schauen Sie sich das an. Ich kann noch eins davon ziehen und schauen, ich habe zwei davon. Weißt du, in der Überschrift hier drüben, halte die Alt- oder Wahltaste gedrückt und ziehe sie einfach und sie wird dupliziert, während du ziehst. Die andere nützliche Sache ist, dass Sie mit der rechten Maustaste auf Dinge in Webflow klicken können . Ich kann mit der rechten Maustaste darauf klicken und auf verschiedene Dinge eingehen. Kopieren, duplizieren. Ich kann eine Klasse hinzufügen, ich kann die Klasse, die hier ist, umbenennen , kann einen Trigger hinzufügen. Schau dir das hier an, anstatt auf diese Option hier drüben zu gehen, könnte ich sie in ein Symbol verwandeln. Ich kann es auf und ab zu den Eltern bewegen. Ich lese die gerade vor. Und es ist irgendwie komisch, denn in einer webbasierten Anwendung wie dieser geht man davon aus, dass die rechte Maustaste alle möglichen Google-Sachen macht, nicht die eigentliche Anwendung, aber irgendwie haben wir Flow die Kontrolle über die Maus zu übernehmen und funktioniert hier manchmal nicht. Kannst du sehen, dass dies das normale Zeug ist du im Chrome-Browser siehst , dass du Webflow-Sachen bekommst. Eine andere Sache, die Sie tun können, ist mit einigen dieser Felder, insbesondere mit solchen singulären Feldern, die die Limpets haben. Sie können die Wahltaste auf einem Mac und die Alt-Taste auf einem PC gedrückt halten und sie einfach ziehen. Kannst du sehen, dass der kleine Pfeil meine Option auf einem Mac geändert hat , Alt auf einem PC, und ziehe diese Dinge einfach wieder auf und ab. Sie sie nur visuell dorthin, wo Sie wollen, einige von ihnen mögen diesen Rand hier, Sie müssen eigentlich nichts gedrückt halten . Zieh sie einfach. Gewöhnt man sich daran , welche machen welche? Diese Art von Infografiken können Sie einfach ziehen. Aber in jedes dieser Felder, in die Sie eingeben werden, können Sie die Wahltaste auf einem Mac gedrückt halten und die Alt-Taste auf einem PC gedrückt halten, nur um zu klicken und zu ziehen, nett. Apropos Ziehen hier rüber , wir haben es uns schon einmal angesehen, aber wenn Sie die Optionstaste hier oben gedrückt halten und ziehen, werden Sie feststellen, dass Sie dies auch durch einfaches Klicken der Taste nach unten sehen können, aber hervorhebt. zeige dir, dass ich beide Seiten gleich aussehen lassen werde. Sie sind beide 98. Wenn Sie die Umschalttaste oder die Befehlstaste gedrückt halten , drücken Sie die Umschalttaste. Und ziehe sie, sie machen oben, unten und heben. Ideal für Dinge wie die Abschnitte, in denen alle einen gewissen Rand haben sollen, oder in diesem Fall einige Polsterungen, die alle gleich sind. Halten Sie die Umschalttaste gedrückt und ziehen Sie eine davon. Sie kommen alle mit auf die Fahrt. Und die Alt-Option ist beide Seiten, entweder oben oder unten. hier durcheinander bringen. Denken Sie auch daran, dass Sie den Navigator anheften können, wenn Ihr Bildschirm groß genug ist, während wir hier sind. Es ist diese Option hier, bedeutet, dass sie einfach nicht verschwindet. Ansonsten ist der Navigator sehr hilfreich und Sie müssen ihn jedes Mal öffnen. Bleib bitte dort. Danke. Und zu guter Letzt das aufregendste von allen, es ist das Osterei in Webflow Als Designer machen Sie nichts anderes. Eigentlich. Nehmen wir an, ich habe das. Ich denke, weißt du, was? Muss etwas Besseres sein als Wirkung. Du willst nichts Besseres als Wirkung. Du bist bereit, IDD, QD einzugeben und dann wieder reinzugehen. Und glückliche Tage schau, Comic Sans ist erschienen. Ich hasse dich Comic Sans. Aber ihr Hass ist ein starkes Wort. Entschuldigung, Comic Sans, Comic Sans Liebhaber. Was war nochmal diese Abkürzung, es ist IDD, QD. Du bekommst Extrapunkte. Wenn du weißt was das ist. Erinnert sich jemand, woher das kam? Lass es mich in den Kommentaren wissen. Wenn Sie das in Estelle machen, scherzen für diejenigen eines bestimmten Jahrgangs, richtig? sind all die Abkürzungen , die ich gerne verwende. Möglicherweise haben Sie Ihre eigenen, wenn Sie eine haben , die Sie teilen möchten , die Kommentare bedroht haben. Und wenn Sie sich fragen, ich kann auch keinen Weg finden, es auszuschalten. Willkommen! Sobald es für ein Projekt aktiviert ist, kann ich es anscheinend nicht mehr ausschalten. Das tut mir leid. Da haben wir's. Auf das nächste Video. 32. Wie man die Standardstile in Webflow ändert: Hallo zusammen. In diesem Video werden wir uns mit dem Ändern der Standardeinstellungen für Webflow-Websites befassen . Anstatt zu allem, was wir durchmachen werden, Klassen hinzuzufügen und dieses Treffen zu sagen, werden wir sagen, dass alle Treffer auf allen Seiten getroffen werden. Ich möchte, dass du diese andere Schriftgröße hast. Sie können sehen, dass es alle Instanzen dieses Treffers ändert dass es alle Instanzen dieses Treffers , ohne eine Klasse erstellen zu müssen. Es gibt einige zugrunde liegende Standard-Tags, die wir verwenden können. Wir können noch weiter gehen und den ganzen Körper greifen und sagen, alles auf diesem Körper dieser ganzen Website wird eine neue Schriftart sein, Comic Sans. Da haben wir's. Wir werden in einer sehr schrecklichen Designposition landen, aber ein sehr gutes CSS-Verständnis. wird also schlecht, nur das Design zu wollen, aber das Wissen wird gut. Ordnung, lassen Sie uns eintauchen und alle Standardeinstellungen ändern. Für dieses Beispiel habe ich eine Website erstellt, eine brandneue ist nicht viel los. Wenn Sie mitmachen möchten, erstellen Sie einfach eine leere Website und einen leeren Workflow. Und was ich hier beim Designer gemacht habe ist, dass ich einfach ein paar verschiedene Elemente eingeworfen habe. Okay, tut mir leid, ich habe es in einen Container und einen Abschnitt geworfen und einige Überschriften und Absätze, einige Links und einige Schaltflächen und einige Bilder nur damit wir das Ändern der Standardeinstellungen zeigen können. Und was ich tun werde, um es auch deutlich zu machen. Und ich werde den ganzen Abschnitt kleben und kopieren und einfügen. Also habe ich zwei von ihnen , die auch eine weitere Seite erstellen und sie auf sie werfen. Nur um Ihnen zu zeigen, dass wenn Sie eine Aktualisierung durchführen , diese auf alle Seiten oder alles auf dieser Website geht. Du könntest eintauchen. Okay, du bist zurück. Nun, ich habe eine neue Seite erstellt, also habe ich die Startseite und die zweite Seite, also fangen wir zu Hause an. Nehmen wir an, ich möchte meine Überschriften für alle Seiten stylen . Ich weiß, was es sein muss. Anstatt also einen Stil zu erstellen und ihn jedes Mal anzuwenden, wie wir es getan haben, haben wir hier durchgegangen und gesagt, lass uns einen neuen Stil erstellen, der als Hit One bezeichnet wird. werden wir nicht tun. Was wir tun werden, ist dort nichts eintippen zu lassen. Klicke einfach da rein und diese rosa hier, okay, dieses HTML-Tag, diese riesigen globalen Tags, diese existieren bereits, k es sind Block-Level-Tags. Sie enthalten alle H1-Überschriften in meinem gesamten Dokument. Dieser Stil, dieser, cool. Und Sie können sehen, dass es standardmäßig einige dieser Standardeinstellungen gibt, die wir zuvor im Kurs gesehen haben. Schau, da kommt es her. Du sagst eigentlich, ich will nicht ungleich Null. Für mich ist es abgehauen. Und ich will meine Typografie, den ultimativen Helden. Ich möchte, dass mein Standard ist, wir werden es benutzen, ich weiß es nicht. Wie alt siehst du, dass das aktualisiert und das hier ist. Und gehen wir zu Seite zwei. Wissen Sie, was passieren wird? Zweite Seite. Die zweite Seite ist ebenfalls fertig. Wenn du diese Block-Level-Tags abmeldest, Das ist was die Kohle, sie werden auf allen Seiten aktualisiert. Du kannst immer noch Combo-Klassen hinzufügen, okay, um es zu ändern. Möglicherweise geben Sie ihm die Farbe nicht, da es auf verschiedenen Seiten in verschiedenen Farben angezeigt wird. Weiß auf Schwarz, Schwarz auf Weiß. Man könnte einfach sagen, es wird die richtige Schrift sein. Es geht darum, die Ränder loszuwerden oder die Ränder zu behalten oder die Ränder zu ändern. Und du könntest mit der Schriftgröße spielen, okay? Man könnte sagen, dass meine Standardgröße für ein H1, anstatt sie jedes Mal zu ändern, 24 sein wird. Okay, das haben Sie in diesem Fall entschieden, das hat absolut nicht funktioniert. Dadurch wurde eine Klasse erstellt, weil dieses globale Tag auf Blockebene nicht ausgewählt war. Also mach das jetzt rückgängig. Geh zurück dahin, wo es war. Okay, und wenn ich darauf klicke, wirst du feststellen, dass es nicht da ist. Wenn ich eine Änderung vornehme, wird eine Klasse namens hitting erstellt. Es ist nicht das, was ich will. Also mache ich rückgängig, klicke erneut darauf, klicke hier rein, klicke auf diesen und sage dann, dass es 24 sein wird. Und wenn ich diese Art von globaler Seite geändert habe, kann ich hoffentlich zu meiner ersten Seite zurückkehren und sie haben sie alle 24 geändert. Wie finden Sie heraus, was Sie ändern müssen? Wenn ich hier erneut darauf klicke, tippe nichts ein und klicke einfach. Sie können sehen, dass es alte Absätze gibt und ich könnte entscheiden, dass alle Absätze wieder großartige Stimmung haben werden, schrecklich. Dann wird der Platz nach all diesen Absätzen sein, aber sie werden bekommen, und Sie verbringen einige Zeit damit, gleich zu Beginn eines Projekts daran zu arbeiten . Und dann können Sie danach und später Combo-Klassen hinzufügen , wenn Sie solche Standardänderungen vornehmen müssen , kehren Sie zu diesen rosa Tags zurück, stellen Sie einfach sicher, dass sie vorher ausgewählt sind du gehst und nimmst Änderungen vor. gleiche gilt für dieses Bild. Sie können hier sehen, es gibt einige Standardeinstellungen. Wenn Sie sich nicht sicher sind, welche Standardwerte vorhanden sind, kennen wir aus diesem Blau die blauen Farben. Denken Sie also daran, wenn ich die Option oder die Alt-Option auf einem Mac gedrückt halte, Alt auf einem PC, und ich habe diese Art Standard. Kannst du sehen, dass die blauen Dinge die Standardeinstellungen sind, die von Webflow stammen , oder kann es nur Webdesign im Allgemeinen sein? Es befindet sich also ein Layout des Displays. Es ist das Standardmitglied. Wir haben es früh geändert, um blockiert zu werden. Du könntest entscheiden, ich möchte nur, dass alle meine Bilder blockiert werden. Abstand. Haven gibt es Abstände. Du sagst, Hey, es ist blau. Es heißt, dass es etwas tut. Es ist tatsächlich auf Null gesetzt, was standardmäßig nicht aufgehoben ist, sondern von Webflow auf Null gesetzt. gleiche hier drin. Größen, die eine maximale Breite von 100 Prozent der tatsächlichen Größe haben, sodass nicht alles gedehnt und verpixelt wird. Das ist standardmäßig nicht aktiviert, Webflow hat das für uns nur als All-Image-Tag getan, auf all diese anderen wurde nichts angewendet. Und dieser hier bekommt ein paar Styles von woanders. Woher bezieht es es? Das ist ein großartiger Übergang, aber ich hatte nicht geplant. Aber ich werde trotzdem in diesem Video darüber sprechen. Was ich also tun kann, ist, wer Mitglieder ist, wie finde ich heraus, was ihm das gibt? Und die Farbe. Woher kommt die Aktie? Okay, es ist kein Blues, es kommt nicht aus diesem echten Bild-HTML-Block. Es kommt von woanders. Wie kriegt man es? Halten Sie die Option gedrückt und klicken Sie darauf. Dieser Optionsbefehl. Befehl auf einem Mac-Steuerelement auf einem PC. Und da steht, hey, es kommt vom Körpergewicht. Was tut dem leid. Wir haben das gestylt, diesen Schlag, okay, und wir sind zu den alten Tags gegangen und wir sind gegangen alle Überschriften sind an Homer. Was wir tun können, ist, dass wir sogar einen Schritt höher stylen können als das Schlagen, damit wir zum Körper gehen können. Körper ist alles auf der Seite. Was wir also tun könnten, ist, können Sie sehen, dass wir das Schlagen tatsächlich gezielt gestylt haben und Absatz, Absatz absichtlich gestaltet haben. Aber immer noch diese anderen, ich bekomme immer noch einen Aereo. Was Sie also tun können, ist, zuerst den Körper zu stylen. Es ist wahrscheinlich das allererste, das stylt. Okay, also klickst du auf Kumpel. gleiche hier drin. Ich sehe da sind ein Text oder Seiten. Was Sie also sagen können , ist, dass der ganze Typ davon verrückt sein wird . Also können wir alles sehen IDD, QD. Es funktioniert nicht, wenn Sie dort geklickt haben. Mein D, D, Q, d. Look Comic Sans. Die Standardeinstellung ist jetzt Comic Sans und Freude enorm. Wenn es um nichts bittet. Wenn es nicht ausdrücklich heißt, dass es so etwas wie zwei Homer ist, wird es standardmäßig auf Comic Sans und meine 16 gesetzt. Okay, also stylen Sie zuerst Ihren Körper. Es ist auch gut für die Hintergrundfarbe. Okay, also ich gehe, meine Hintergrundfarbe wird diese Farbe sein. Designpreis geht an Tanz, der Körper kümmert die Hintergrundfarbe und alles darin. Da steht: Hey, ihr alle könnt durchgehen und sagen, ich möchte, dass alle Schriftarten so sind und die Größe haben. sei denn, ich überschreibe es, weil die Heizung etwas spezifischer ist als beim generischen alten Kumpel. Spezifität setzt also ein und sagt, ich werde nicht Comic Sans sein. Ich werde mit dem Absatz genauso sein , wenn wir ihn löschen. Wenn ich hier reingehe und tatsächlich sage, gehen wir zu meinen ganzen Absätzen und gehen in Typografie und sagen, wie lösche ich das? Weil ich es ändern kann, aber ich will es nicht ändern. Ich will es klären. Das stimmt. Halten Sie die Wahltaste auf einem Mac gedrückt, Alt-Taste auf einem PC, es geht, Ordnung, ich werde ihr nicht sagen, was sie tun soll. Ich werde standardmäßig das verwenden, was in einem Mikrofonfall jetzt Comic Sans Standard ist, weil es vom Kumpel kommt, Oh mein Gott, die Listen kommen mit k. Also gibt es viele Dinge. Stil hier ist ziemlich wichtig für das Ändern standardmäßig, da ich weiß, dass jedes Mal, wenn Sie so etwas tun , ein Basiswert ist . Können Sie die Unterstreichung sehen? Es gibt eine etwas seltsame blaue Farbe. Du könntest jetzt entscheiden, dass ich Links sein werde. Also werde ich das löschen. Okay, lass uns versuchen, wie ich den Kurs dort gemacht habe. Ich glaube, ich habe damit rumgespielt, aber ich werde sagen, dass alle Links jetzt, wo ich eine Textdekoration habe, Topographie von, ich möchte nicht, dass sie unterstrichen wird. Ich will, dass es keine ist. Vielen Dank. Und ich will nicht so blau sein. Ich möchte, dass es nur die normale Textfarbe ist , die ich verwende. Ich bin mir nicht einmal sicher, welche Textfarbe ich verwende. Wenn Sie gehen, lassen Sie die Unterstreichung dort, damit Sie wissen , dass es sich um einen anklickbaren Link handelt. Nun, vielleicht ist nicht zuletzt das Blau weg. Okay, das gleiche gilt für Knöpfe. Klicke darauf. Es gibt einen alten Link. Also sind alle Links ein bisschen seltsam, weil alle Links diesem hier sehr ähnlich sind Was entscheiden wir? Kugelglieder, sie sind gleich. Wenn Sie also nach dem Styling fragen, insbesondere nach allen Links, eine Schaltfläche ist ein gestylter Link, dieser Link ist derselbe und derselbe , wenn Sie es mit etwas zu tun haben , das als Linkblock bezeichnet wird, ist es immer noch überlegte einen Klick darauf oder ist es ein verknüpfter Block? Es werden immer noch alle Links berücksichtigt. Es ist eines der wenigen , das wie ein Mehrzweckgerät ist. Aber wenn Sie feststellen, dass Sie immer wieder dasselbe stylen , Sie einen kleinen Blick auf die Basisebene. Geh ein bisschen durch. Es gibt einen Kurs darüber. Okay, lösche die Klasse und sieh einfach, entferne sie, habe sie ausgewählt, klicke darauf, um zu sehen, was in diesem HTML-Tag hier erscheint, und vielleicht kannst du sie alle auf einmal auf allen Seiten stylen . Nun, ich dachte nicht, dass ich hier landen würde. Dann ist der tolle Designer willkommen. Wir haben gelernt, was die, diese Art von HTML-Tags oder sie sind Standardwerte für die Seite, der Tag-Stil auf Anrufblockebene, dann können Sie alles auf einer ganzen Website auf einmal stylen . Und wenn Sie Klassen für kleine einzigartige Änderungen hinzufügen möchten , ist das alles in Ordnung. Wir sehen uns im nächsten Video. 33. Kombinierte vs globale Kurse in Webflow: Hallo zusammen. Dieses hässliche alte Design soll uns den Unterschied zwischen globalen und Combo-Klassen in Webflow beibringen . Lassen Sie uns eine kurze Notiz eintauchen, bevor wir loslegen , das ist relativ schwierig. Es werden einige von euch da draußen sein, sie werden nicken und weitermachen. Das ergibt absolut Sinn. Und es werden einige von euch da draußen geben, die sagen, oh meine Güte, mein Gehirn ist explodiert. Das ist okay. Ich habe versucht, dies früh im Kurs einzuführen , damit wir es über die gesamte Länge des Kurses ausspülen können . Am Ende ist es also keine Überraschung, aber wenn Sie ein bisschen Probleme haben, ist das in Ordnung. Das ist kniffliges Zeug. Du darfst etwas verwirrt sein und hoffentlich kommen wir am Ende des Kurses besser hin und du kannst vielleicht zu diesem Video zurückkehren. Ordnung, lass uns loslegen. Lass dein Gehirn nicht explodieren. Ordnung, um eine globale Klasse zu verstehen, werden wir nur für dieses Video die HTML-Tags ignorieren , wie die Standardtags. Wir werden uns Combo-Klassen im Vergleich zu globalen Klassen ansehen , weil das nur einen Teil der Komplexität nimmt. Schauen wir uns eine Combo-Klasse an denn zu verstehen, wo das endet, ist ein guter Ort , um mit dem Verständnis der globalen Klasse zu beginnen. Also möchte ich hier eine Klasse namens Hitting erstellen. Okay, und ich möchte, dass diese Überschrift eine Schrift von Mary mit einer, ich möchte nicht, dass es eine Schriftfarbe von Rot ist. Und genau das will ich. Jetzt. Ich brauche zwei davon. Es gibt noch andere Treffer hier unten. Dieser muss blau sein. Was ich also tun kann, ist, dass ich eine Combo-Klasse hinzufügen kann , weil ich diese ursprüngliche geändert habe. Es wird beide ändern. Also gehe ich in den Kombiunterricht. Und das wird kalt loswerden. Beachten Sie, nennen wir das blau. Ich kann also sagen, mit Blau wirst du blau oder lila sein. Du verstehst es und es ist blau. Das ist eine großartige Verwendung einer Combo-Klasse. Okay, es ist auf dem Original aufgebaut und Sie fügen ein bisschen mehr hinzu. Das nächste ist, wo es zusammenbrechen wird. Ich möchte hinzufügen, dass die Combo-Klasse mit der dritten Combo-Klasse nichts falsch ist , aber nehmen wir an, es ist etwas, das Sie ein bisschen mehr verwenden möchten als nur die Schlagkante links. Und das ist eine Abkürzung für Margin-Left. Und ich werde ein X raus haben, was ein wirklich großes, großes ist . Anstatt 64 Pixel zu sagen, falls ich es ändere, nenne ich es einfach Excel, eine gute, eine Art generische Größe. habe ich mir gerade ausgedacht. Ich drücke die Eingabetaste auf meiner Tastatur und sage, dass ich einen Rand von 64 Pixeln möchte , eine gute Excel-Größe. Also habe ich diese kleine Kombination. Obwohl Sie später im Kurs oder Kreditgeber auf Ihrer Website sagen: Okay, ich brauche, lassen Sie uns ein Bild machen oder hat er das Bild verpasst? Ist Edom da drin? Er ist nicht in meinem Container. Es wird in meinen Container gehen. Und ich muss ihn über genau dasselbe Spiel drängen. Also gehe ich nach rechts, ich werde es benutzen. Das Gleiche in L. Es ist nicht da ist meine E-Mail. Was in Webflow passiert und wie sie diese Combo-Klassen strukturieren , ist, dass Sie dort tatsächlich keine E-Mail-Excel irgendwie global haben können. Es hängt hier mit dieser Art von Struktur zusammen. Schauen wir uns das Ding hier an. Es heißt Stone Manager und zeigt Ihnen, dass wir nur ML- oder ML-Margin-Links extra groß haben können . Du schwebst darüber. Es heißt sechs gleiche Pixel erst nach Blau, okay, und erst nachdem sie getroffen haben, sind sie alle angehängt. Es ist eine nette Art, sie zu gruppieren. Andernfalls enden Sie überall dort , wo sie Probleme haben, wenn ich jetzt zuschlage und ich sage, in Ordnung, zu schlagen, ich würde gerne sein, wenn ich blau wurde, ist ML, kann ich diesen Abstand nicht global verwenden. Das ist also wo, hier ist der globale. Wie machst du das? Was du tust, ist diblock hinzuzufügen. Das Buch hat eine nette generische Sache. Es ist nur ein leerer Container irgendwo in Ihrem Dokument als Meta. Und wenn Sie eine Klasse auf der Stammebene hinzufügen, bauen Sie auf nichts anderem auf. Das ist Nichts. Wir klicken darauf und sagen Ihnen ML, Excel, Medium, Lift, Extra-Large. Ich werde nicht die Eingabetaste drücken, klicken Sie nicht einfach hier unten, da Sie möglicherweise das Problem stoßen, das ich zuvor hätte erwähnen sollen. Drücken Sie die Eingabetaste, um sicherzustellen, dass es einen gibt , ich habe Ja gesagt, ich werde einen Selektor treffen. Und ich sage, du hast 64 Pixel, okay? Weil ich es auf dieser Art Root-Ebene gemacht habe, okay? Ich brauche das nicht mehr wirklich. Es ist geschaffen. Wenn ich es lösche, ist es immer noch Leah in meinem Style-Manager, aber kannst du sehen, dass es hier auf der Basisebene ist. Jetzt ist es ein globaler Stil. Jetzt kann ich dir sagen, mein Freund ist ML Excel. Du schiebst es rüber. Dieser Typ. Sie möchten MLA Excel to Excel sein, das ist ein globaler Stil. Schauen wir uns ein weiteres gutes Beispiel für Combo und Global an, und wir können, beide sind, in Harmonie leben. Also lass uns einen Button hinzufügen. Also werde ich hier einen Button hinzufügen. Und nehmen wir an, dass ich dieses Standardzeug ändern möchte. Also füge ich eine Klasse namens button hinzu. Sie werden feststellen, dass es keine, gibt einen alten Link, aber es gibt keine HTML-Tags mit der Schaltfläche „Gefällt mir“. Buttons sind also nur gestylte Links mit Polsterung und klickbar. Okay, also werden wir ein Button-Tag erstellen, sorry, eine Button-Klasse war vielleicht zurückgekehrt, um es zu erstellen. Ich sage, abgerundete Ecken werden wirklich groß und offensichtlich sein. Es wird eine Schrift haben. sollte das wahrscheinlich mit meiner Körpermarke ändern, aber wir machen es einfach für diesen Kerl. Also werde ich sagen, dass es Auswirkungen haben wird. Notieren wir Homer etwas Offensichtlicheres? Wählen wir das aus. Okay, also mein Knopf sind diese beiden Dinge. Nehmen wir an, ich möchte jedoch einen großen Knopf. Okay, also erstelle ich eine große Combo-Klasse und drücke die Eingabetaste auf meiner Tastatur. Was ich tun werde ist zu sagen, dass du hier oben etwas zusätzliche Polsterung hast. Halten Sie also die Option auf einem Mac, Alt auf einem PC. Okay, ich möchte so etwas für den Großen sein , vielleicht sogar größer. Und ich ändere meine Schriftgröße. Ich verschiebe es ein paar Mal nach oben. Okay, das ist also eine Combo-Klasse, eine gute. Okay, ich habe also einen Knopf , der die generischen Sachen erledigt. Also heißt das, ich kann einen Knopf haben oder bist du ein Knopf? Ein Button und diese Button-Klasse. Und es hat abgerundete Ecken, aber es gibt auch eine Option für einen großen Knopf , den ich ein- und ausschalten kann. Und ich kann ein kleines oder mittleres erstellen. Du könntest einen quadratischen Knopf haben und keinen quadratischen Knopf eins, wo die globale Klasse nützlich wäre, jetzt färbt sie bei k. Also könnte ich es den Button nennen, aber es wird Fälle geben, in denen ich brauche einen hellen Knopf auf dunklem Hintergrund und umgekehrt. Das Problem dabei , das so zu machen , wie Webflow diese Combo-Klassen macht , ist, dass ich so viele verschiedene Combo-Klassen erstellen müsste , okay, ich muss keine weitere primäre Klasse erstellen. Nehmen wir an, die Farbe wird gelb. Ich würde eine gelbe Klasse erstellen. Das Problem ist, dass ich auch eine kleine gelbe Klasse erstellen müsste. Sie sind nicht irgendwie Crossover. Eine globale Klasse wäre nützlich, weil ich sie für mehr als eine Sache verwenden kann. Also lass uns ein Div erstellen. Glück! Okay, nennen wir das einen Hintergrund. bg ist also eine wirklich gute Abkürzung für Background. Und ich werde die Primarvereinigung erstellen. Es ist nützlich, primär, sekundär, primär, sekundär zu sekundär drei zu gehen , anstatt den Namen der Farbe, falls sich die Farbe ändert, jemand ändert die Hauptfarbe für eine Marke. Wir sind bei rotem Hintergrund geblieben, du musst den ersten Spatenstich machen. Rid könnte am Ende Blue Case sein. Also primär ist ein netter Platzhaltername. Und alles was ich tun werde ist, das runterzudrehen. Ich werde Hintergründe dafür nennen. Nehmen wir an, meine Grundfarbe wird diese Farbe wie Lila sein. Perfekt. Okay, und ich erstelle noch einen. Also gehe ich, benutzen wir einige unserer Abkürzungen. Merken Sie sich Befehl E, div, diblock, drücken Sie die Eingabetaste. Ich denke, mein Diblock ist in meinem Diff-Stecker. haben sie getan. Tun Sie das nicht. Komm raus. Du wirst es tun. Also belasse ich das im Kurs. Diblock außerhalb der anderen Dinge ist eine Abkürzung. Dann wird dieser BG heißen, und er wird sekundär genannt. Diese Farben, meine zweite wird mein Kastanienbraun sein. Und dann kann ich diese beiden löschen. Ich brauche sie nicht mehr. Es gibt immer noch in meinen Stilen. Da sind sie. Es bedeutet diesen Button hier. Dieser Knopf, den ich vielleicht entscheide, sind diese Dinge. Außerdem tippe ich BG ein und da ist meine Grundfarbe. Dieser hier muss aber mein bg-Sekundärschlüssel sein . Sehen Sie, diese High-Level-Schaltflächen sind sehr nützlich, weil ich sie für diese Schaltflächen verwenden kann, aber es geht hier, dieser, was braucht eigentlich noch einen Hintergrund? Das Schlagen braucht nicht wirklich einen Hintergrund. Aber hey, gib es trotzdem. Lass uns gehen, sekundär. Es ist nicht wirklich gut, aber du verstehst, was ich dir meine. Es ist etwas, das einen Hintergrund braucht. Fügen wir einen Abschnitt hinzu. Der Abschnitt hier benötigt ein Hintergrund-BG von primär. Nicole Sache ist, wenn du dich änderst, kommt dieser Hauptkunde zurück und sagt : Oh, es ist nicht Jushi genug. Du willst es verdunkeln oder aufhellen. Können Sie alles sehen, was diese globale Klasse vorgenommen hat, Änderungen? Das ist in der Anfangsphase wirklich gut. Es ist nur eine gute Praxis, globale Stile für Dinge wie Hintergrundfarbe oder Abstände zu verwenden . Okay, es sieht so aus als hätten wir es hier oben gemacht Denken Sie daran, dass die E-Mail Excel und andere gute Zwecke dafür vielleicht ein Schlagschatten sind, okay, wenn Sie immer wieder Schlagschatten auf einem Dokument verwenden und Sie denken, dass es richtig ist, aber dann wachen Sie auf am nächsten Tag ist es furchtbar. Sie können sie alle ändern, solange Sie es gerade getan haben und diese Art von Root-Ebene und nicht alle kombinieren. ist nichts auszusetzen, denn das macht Sinn, aber vergrößern. Aber dann haben wir diese globalen hinzugefügt, in denen wir uns auch bewerben können. Ergibt das Sinn? Wenn es etwas verwirrend ist, schwitzen Sie nicht. Gehen Sie einfach durch und fügen Sie Ihre eigenen Klassen hinzu, vielleicht einige Combo-Klassen , um sich daran zu gewöhnen. Ich hoffe, das war nützlich. Globale Klassen. Los geht's. Wir werden es im Laufe der Zeit noch einmal machen, aber das war's für dieses Video. Wir sehen uns im nächsten. 34. Class in Webflow: Hallo zusammen. In diesem Video werden wir uns die Namenskonventionen für Klassen in Webflow ansehen Namenskonventionen für Klassen , damit Sie auch eine Art Struktur haben, die funktioniert. Du weißt also, es benennt nicht alles, alles. Wir schauen uns auch das Beam-BEM an, auch das Namenskonventionssystem, richtig, lassen Sie uns loslegen. Erstens ist es eine Kunst, keine Wissenschaft. Es gibt kein spezifisches Like. Genau so solltest du es machen. Und wenn er es nicht so gemacht hätte, ist es kaputt. Du kannst es benennen, wie du willst. Sie enden einfach mit einem kleinen Fehlschlag. Wenn Sie einige Grundregeln nicht befolgen müssen. Und zu sagen, dass du zwar ein paar unordentliche Klassennamen haben wirst, es passiert einfach, wir alle tun es. Und er hat wirklich gut für das Projekt angefangen. Und am Ende hast du die endgültige, endgültige, endgültige Version all dieser verrückten Namenskonventionen. Aber lassen Sie uns einige allgemeine Richtlinien durchgehen, damit Sie es gut machen können. Der erste ist dieser ich Ihnen zu Beginn des Kurses gesagt Ich nenne diesen Text gelesen. Zu Beginn dieses Kurses war es einfach , uns den Einstieg zu erleichtern und zu verstehen, was wir hier tun. Das Problem mit Rot ist, dass der Klassenname rot ist. Wenn jemand durchgeht und sagt: „ Eigentlich wird es jetzt gelb oder eine andere Farbe sein. Sie können sehen, dass der Klassenname immer noch rot ist. Geben Sie ihm also keine wörtlichen Namen, geben Sie ihm ein bisschen mehr generische Namen. Also Ticks, Farben gut, okay, in Bezug auf die Farbbenennung sagen die Leute das oft nicht. Sie können Farbe eins, Farbe zu Farbe drei für die verschiedenen Textfarben sagen Farbe zu Farbe drei für , die Sie haben. Es ist jedoch üblich, die Primärfarbe für Ihre Hauptmarkenfarbe zu verwenden . Sie haben eine Sekundärfarbe, Art zusätzliche Farbe , die Sie möglicherweise verwenden. Sie können eine Akzentfarbe haben. Wenn du eine dritte Farbe brauchst. Du kannst es untermischen. Das ist also eine gängige Namenskonvention für Farben, primär, sekundär und exit. Denken Sie also daran, nennen Sie es nicht rot, geben Sie ihm einen etwas generischen Namen , damit Sie es später ändern können. Das ist also Tipp Nummer eins. Tipp Nummer zwei ist nett zu dir selbst. Nenn es nicht so, wie du es nennen könntest btn, unterstreiche 01. Das ist irgendwie hilfreich. Es ist Art und Weise. Es wird viel nützlicher sein, es Button zu nennen. Und das könnte mein Aufruf zum Handeln sein. Ein Aufruf zum Handeln. Du kannst CTA sein, es wird viel getippt. Das ist sehr laut. Sie können mit Kurznamen davonkommen, aber denken Sie daran, dass möglicherweise jemand anderes an diesem Projekt arbeiten muss. Zukunft. Sie bei diesem Projekt könnten sagen: Was ist das? Das funktioniert? Ich weiß, das ist ein Knopf und die Hintergrundfarbe und als Rand links, aber sie werden ihre Zähne machen. Du kannst. Okay. Und die Leute tun es, schreiben es aber beschreibend auf. Es tut nicht weh. Tipp Nummer zwei. Nun, Tipp Nummer drei, das ist 2.5 und Sie müssen sich keine Gedanken darüber machen, wie Sie es tippen. Sie können Leerzeichen oder Bindestriche verwenden. Viele Leute werden Schaltflächenunterstriche machen und sie werden sie als meine primäre Schaltfläche verwenden. Okay, das ist in Ordnung. Sie können Leerzeichen verwenden. Sie können jeden Fall verwenden, den Sie möchten. Du kannst ein Knopf und ein Leerzeichen sein, eins. Weil du es dir nicht zeigen willst, füge das dort hinzu. Schauen wir uns das CSS an. Wir können diese These überprüfen, indem wir zum kleinen Fragezeichen gehen und zur CSS-Vorschau gehen. Sie können sehen, was auch immer Sie in Webflow eingeben , der Workflow wird albern. menschlich. Es muss eine CSS-Klasse sein, darf keine Leerzeichen haben. Sie sehen also, wo hier Space One steht, zoomen Sie hier rüber, zurück hier drüben, es setzt einen Bindestrich. Und was ist mit Unterstrichen? Sie können Unterstriche verwenden , wenn Sie möchten. Es spielt keine Rolle. Die einzige Sache ist, beginne deine Klasse nicht mit einer Nummer. Es mag das nicht, aber Sie können oben oder unten verwenden. Sie können CamelCase verwenden. Camelcase ist aufregend. -Knopf. Primär, okay. an Ihnen, was auch immer Sie möchten, oder vielleicht kommen Sie aus der Entwicklungswelt, sodass Sie Ihre Klassenbenennungsstile daraus verwenden können , es spielt keine Rolle. Tipp Nummer drei, Abstand. Abstände sind sehr häufig , wenn ich das brauche. Und lasst uns diesen tatsächlich im Unterricht entfernen. Wenn ich das brauche, um von der Seite zu gehen, muss ich einen Rand hinzufügen. Ich werde es zu einer globalen Marge machen, okay, also werde ich sicherstellen, dass ich nicht auf einer Kombination aufbaue , weil ich diese Marge woanders wiederverwenden werde . Sie können entweder ein div-Tag ziehen und darauf anwenden. Oder weil ich keine anderen Stile habe , die auf meinen Button angewendet werden, könnte ich es darauf anwenden, aber lass es uns einfach als Block einen Rand machen. Es ist sehr üblich, Dinge wie „extra klein“, „ okay“ oder „klein“ oder „mittel“ zu verwenden . Burgund, so groß in Excel, können Sie diese Art von abgekürzten Größen verwenden. Es ist besser als 64 Pixel zu verwenden weil Sie später entscheiden könnten, dass es 63 sein müssen, okay, und Sie werden den Namen erneut ändern. Es ist also sehr üblich, nur Medium zu verwenden. Eine andere Sache mit Abständen ist , dass Sie sie oft getrennt machen. Also machen wir Spielraum und wir machen links. Zuerst bin ich gegangen, ich werde es abkürzen. Und dann werde ich sagen, dass ich mittel bleiben werde. Ich drücke die Eingabetaste und mein Abstand dafür wird Rand 24 sein. Sie werden feststellen, dass ich viele seltsame Zahlen verwende, keine typischen ganzen Zahlen, die Sie 10203040 verwenden können. Die Leute werden ein Vielfaches von acht verwenden und im Webdesign gestalten. Es basiert auf einem Acht-Punkte-Raster. Sie haben viele Entwicklungs-Frameworks erstellt. Es ist nicht so, Sie müssen diese Größen nicht verwenden. Es ist einfach sehr praktisch. Es passt zu den Dingen der Schriftgröße. Sie werden viele Schriftarten bemerken, 816-20-4302, ich hinzufügen kann. Ich gebe da raus. Sie werden jedoch feststellen, dass viele Größen auf diesen Vielfachen von acht basieren. Es sind leicht teilbar, was praktisch ist und Ihnen auch eine gute Reichweite bietet. Acht ziemlich klein. 16 ist gut, irgendwie mittelgroß als 24 ist ein schöner guter Sprung dort, da, da, guter Abstand. Sie verwenden also ein Vielfaches von acht oder nicht. Du kannst noch kleiner werden. Es liegt ganz bei dir. Sie könnten diesen Margin-Links-MD machen. Ich komme wahrscheinlich zu so klein für diese Dinge wie Ränder und Polsterung, die nur noch b, P, L, MD von meiner Polsterung links übrig sind auf etwas angewendet, das ein mittlerer Raum von 24 ist. Frage könnte sein, fängst du ein Dokument an und machst zuerst eine Reihe globaler Klassen wie diese, du könntest, ich gehe sie einfach durch und baue sie so, wie ich sie brauche. Und während ich durch den Kurs komme, während ich mein Website-Design durchlaufe, muss ich immer weniger Klassen erstellen. Aber du könntest am Anfang im Einkaufszentrum sein, aber dann wirst du wahrscheinlich nie, ich weiß nicht, eine extra große Polsterung benutzen . Sie erstellen nur die, die Sie benötigen. Kredite weltweit. Ich werde dann gehen und sagen, du brauchst Header of Lift, Medium, um es auch zu bekommen. Polsterung links mittelgroß, wiederverwendbar im globalen Stil. Das nächste, was ich dir zeigen möchte, ist Beam. Sie werden auf Balken stoßen weil Sie zu Google gehen, was die am besten klassifizierte Namenskonvention ist . Und dieser Strahl wird töricht benutzt. Ich verwende einen Geschmack davon und habe ihn irgendwie schon in diesem Kurs verwendet. Lassen Sie uns darüber diskutieren , weil es ein bisschen auftaucht. Es ist der Retter der Namenskonventionen. Das einzige Problem ist, dass es wirklich gut für wirklich große Websites funktioniert ein bisschen davon für unsere kleinere Website hier verwenden wird. Und es ist auch ein bisschen nützlicher , wenn Sie Ihre Website tatsächlich programmieren. Wir verwenden Webflow, um die Codierung für uns zu erledigen, okay, also ist ein Großteil des Syntaxstrahls hilfreich für Dinge wie wo sind sie? Sie haben diese doppelten Bindestriche und dann haben sie Unterstriche. Und es gibt diese interessante Art von Syntax, die jemandem, der sich den Code ansieht, hilft die jemandem, der sich den Code ansieht, zu verstehen, was Sie getan haben. Aber weil wir uns den Code hier nicht ansehen, wird er erstellt, aber wir tippen ihn nicht von Hand ein, aber er sagt, dass er immer noch nützlich ist. Was ist Beam? Balken ist ein Blockelement und ein Modifikator. Okay. Wo sind sie? Modifikator „Blockelement“. Was sind sie? Und am einfachsten, so wie ich es als generisches Ding erkläre, spezifisches Ding, Variante der Sache. Hier ist ein Beispiel. Schaltfläche, Preisgestaltung, Schaltfläche, gelbe Preisschaltfläche. Sie werden immer tiefer in Bezug auf die Nuancen. Wenn du also ein paar generische Sachen machst, würdest du sagen: Okay, meine Knöpfe haben abgerundete Ecken. Sie sind, sie sind eine Schriftart dieser Schriftart , von der ich eine Größe verwende und sie haben Polster um sie herum. Das sind alle Buttons auf meiner Website, das ist der generische Button, aber es gibt diesen einen bestimmten Button. Okay, das muss größer sein weil es auf der Preisseite, dem Call to Action oder der CTA-Button steht. Es muss groß sein. Es braucht eine größere Polsterung, aber es ist nur so, dass du generisches Zeug machst. Okay, das ist also der Block General, Specific Button, der Preis-Button. Möglicherweise haben Sie eine kleinere Version davon als die generische. Kleiner, der weitergeht. Formular senden, okay, verwendet immer noch abgerundete Ecken und dieselbe Schriftart, aber es ist zufällig kleiner als der Modifikator. Es kann ein gelber Knopf oder ein dunkler Modus sein. Der Dunkelmodus ist, wenn es sich um eine Schaltfläche auf dunklem Hintergrund handelt. Es muss also eine weiße Taste mit schwarzem Text oder eine Flugmodus-Taste sein. Das ist es, was dieser Strahl bedeutet. Es ist eine gute grobe allgemeine Regel, die man befolgen muss. Lassen Sie uns also ein Beispiel für Beam machen , da es verwirrend sein kann, als Sie ihn zum ersten Mal gehört haben. Ich werde alles loswerden, was ich beantragt habe. Klasse verschieben. Was ich gerne machen würde, ist den generischen Button zu machen. Also schaue ich mir meine Figma- oder XD- oder Photoshop-Datei an und meine Schaltfläche muss wie mein Button aussehen. Ignoriere bestehende Klassen. Wenn Sie Kurse haben, die Sie nicht möchten, können Sie zu Ihren Stilen gehen und zwei Stile bereinigen. Es stehen alle folgenden Stile. Diese wurden sowieso nicht benutzt und sagten, du willst sie aufräumen und Ja bitte sagen, weil ich sie nicht benutzt habe. Also bin ich wieder bei meinen Styles. Klicke auf meinen Button, ich mache einen Stopp-Button. Ich mache einfach generisches Zeug, das Blockzeug, das B im Balken. Und in diesem Fall muss ich es sein, es muss Typografie haben. Ich benutze einen Stuhl. Was benutzen wir? Oswald, sagen wir mal. Okay, und im Allgemeinen tut das, die Schriftgröße, generisch , die generische Schriftgröße ist klein. Sagen wir, es ist 13. entschied, dass er einige abgerundete Grenzen haben wird. Also sage ich, du bist, ich weiß nicht, fünf, nicht groß genug. Und mit meinem Aufwärtspfeil, nur um offensichtlich zu sein, sind die Dinge etwas matschig. Jedenfalls. Das ist also mein generisches, sei mein Strahl, mein Block-Level-Generikum. Jetzt wird meine spezifische Schaltfläche, die ich kopieren und einfügen werde, eine der Preisseiten sein. Und es ist irgendwie all das, außer dass es ein bisschen mehr ist. Das ist also mein Element, das E und der Strahl, was ich wegen dieser speziellen Einfaltung als spezifisch bezeichne. Als Erstes, sogar was sage ich? Was ist die Preisgestaltung? Cta, mein Call-to-Action-Button. Okay. Es läuft auf meiner Heldenseite, wie auch immer du es nennen willst. Und so fielen Namenskonventionen bereits vom Wagen. Okay, das ist also mein CTA und alles was es ist, es wird eine Schriftgröße von 16 haben, okay, es wird größer sein. Es wird alles in Großbuchstaben sein. Und es wird ein bisschen mehr Polsterung haben. Denken Sie daran, die Wahltaste oder Alt-Taste auf einem PC gedrückt zu halten und beide Seiten auszuführen. Weise wird es ein bisschen größer. Und so. Es könnte groß sein oder etwas anderes. Ein bisschen bitterer Knopf, CTA ist wahrscheinlich nicht großartig. Schule als eine große, dann die nächste, was machen wir? Okay. Ich möchte die Farbe der Primärfarbe hinzufügen. Okay? In dieser Primärfarbe wird Alt oder Option sein. Klicken Sie auf die Chevrons, schließen Sie sie. Der Hintergrund wird so sein, wie meine Grundfarbe für mein Design in Ordnung ist. Wenn ich immer wieder benutze, sind wir los. Also werde ich dieses am häufigsten verwenden weil es das allgemeinste ist. Dieser hier wird nur einmal auf der Homepage verwendet und vielleicht einmal auf der Preisseite, auf der du ihn verwenden möchtest und sie sagen, dass es eine Submit-Button-Version gibt, okay, also werde ich dasselbe tun, nimm noch einen Knopf, ich werde meinen Achy benutzen, um zu Ed zu gehen. Ich gehe auf den Knopf. Du kannst in die Gang gehen. Es ist also größtenteils dasselbe, außer dass ich möchte, dass dieser ein Knopf ist. Ich will, dass es groß ist. Ich möchte nicht, dass es groß ist und es entferne. Ich werde das hier klein machen. Okay? Und dieser wird meine Schaumstoffe benutzen. Um das Kleine tatsächlich zu erstellen, hat es nicht einfach geklickt. Sie klicken entweder auf Erstellen oder drücken die Eingabetaste auf Ihrer Tastatur. Hier ist die Schriftgröße niedriger als normal. Es ist gut, dir die Grafik umzuschalten. Weniger als klein. Es wird Oswald extra leicht sein, irgendwie zur Knopfgröße passen. Ich mache gerade nur rum, verstehst du die Idee richtig? Kleiner, kleiner. Und vielleicht müssen die abgerundeten Ecken angepasst werden, weil sie für diesen speziellen Anwendungsfall etwas groß sind. Das sind also fünf. Das war's also, das ist der Strahl. Lassen Sie uns ein anderes Beispiel machen und dann zeige ich Ihnen eines der Probleme, die Sie vielleicht bemerkt haben und die ich ignoriere, weil ich versuche, Beam zu erklären. Also lass uns noch eins machen. Wenn wir den Block treffen, werden wir in diesem Fall den Block als HTML verwenden , alle Überschriften. Wir könnten eine Ein-Akkordüberschrift erstellen, aber es gibt bereits diese , die auf allen steht. Wir haben uns das vorhin bei der Änderung der Standardeinstellung angesehen. Also werden wir diesen Button verwenden keinen Make-up-Button hat. Wenn es keine „Gefällt mir “ -Schaltflächen-Tags gibt, macht Links eins, aber Links zu viele verschiedene Dinge, also bewerten wir einfach um eines herum. Dieser hier hat eine generische HTML-Überschrift, ein Tag, großartig, also das ist mein b, mein Block. Ich möchte sicherstellen, dass ich diese großartige Vibes-Schriftart verwende. Okay? Und es wird diese Schlaggröße sein, wenn ich Umschalttaste gedrückt halte und einfach meinen Aufwärtspfeil benutze. Ich habe entschieden , dass ich das verwende. Okay. Vielleicht bin ich mir nicht sicher, warum ich das style. Und ja, genau das werde ich tun, Größe und Schriftart. Und dann könnten es meine Freunde sein, das ist vielleicht dein Strahl drüber. Du hast gerade den Strahl gemacht, den Strahl weil die Überschriften auf jeder Seite gleich sind. Aber es gibt diese Zeit später im Projekt, wo du sagst : Oh, eigentlich möchte ich auf dieser Blogseite, dass sie wirklich groß ist, weil sie viel Platz haben, um mit Spenden zu arbeiten es gibt viel negativen Raum , den es füllen kann. Toll, also werde ich gehen, okay, also habe ich diese Überschriften, die ich gemacht habe. Ich habe meinen Block beendet. Jetzt konkret werde ich ein Element machen. Und ich werde sagen, dass dies das H1 ist, okay, für meine Blogseiten. Also meine spezielle Sache, okay. In diesem speziellen Anwendungsfall ist es irgendwie so. Sie stellen fest, dass es nicht die gleiche Struktur hatte wie der Button, wo Sie das haben können weil wir unser erstes B erfinden mussten. Während beim Klicken bereits alle HTML-Tags vorhanden sind, aber wir sind jetzt im zweiten Teil auf meinem Blog. Das einzige, was ich ändern werde , ist die Größe, sie ist wirklich groß. Weil ich die Größe geändert habe. Ich werde mit meinen Rändern herumspielen müssen. Okay, tun wir so, als würden wir an meiner Blogposting-Seite arbeiten meiner Blogposting-Seite , weil diese hier große Nachkommen haben , wir müssen es rausdrängen. Also mein Element ist so, großartig, oder? Aber dann werde ich bei einigen Blog-Posts ein Bild im Hintergrund haben. Und einige der Bilder sind hell, was dunkle Häkchen benötigt, wenn das in Ordnung ist. Aber es gibt noch einen anderen, den ich kopieren und einfügen werde. Es gibt noch diese anderen Blog-Beiträge , die einen wirklich dunklen Hintergrund haben. Also was ich tun werde, ist mein M für meinen Modifikator, du verstehst die Idee richtig? Das wird also meine Dunkelmodus-Vision sein. Okay, Doc Mode, drücke Enter und ich werde sagen, dass die einzige Änderung in diesem diese Art von Off-White sein wird. Man kann es also immer noch sehen und es sieht vor diesem Hintergrund irgendwie gut aus. Das ist also unser Strahl in einer Art vereinfachter Form. Es gibt Ihnen zumindest eine Struktur wie Sie diese Sache machen, z. B. wie viele Details Sie in generische spezifische Varianten aufnehmen müssen. War das hilfreich? Ich weiß, dass das Sein für mich verwirrend war. Geh, um es zu verstehen. Also ja, du wirst darauf stoßen. Die Leute meinten, warum benutzt du Vene? Du würdest sagen, was für ein Typ von ihm? In Bits? Und wenn ich m Bits sage, gibt es Syntax, die hier drin ist, und sie wird immer nützlicher, je größer das Projekt ist. Und unser Projekt ist derzeit nicht besonders groß. Das ist also Beam. Lassen Sie mich über das Problem sprechen, auf das wir vielleicht gestoßen sind oder wir haben, ist, wo Strahlen, verständlich, dann Combo- und globale Klassen auftauchen weil ihm dieses hier gefallen hat. Wir haben das hier, tut mir leid, das erste hier, das B des Balkens, den Block. Auch hier haben wir eine Schaltfläche und was haben wir dieser Sache gemacht, wir haben eine Schriftart ausgewählt, weil sie blau ist, eine perfekte Größe hat, und wir haben abgerundete Ecken ausgewählt. Cool. Dann haben wir das gemacht. Und dann hier haben wir eine große Option hinzugefügt. Darüber hinaus modifiziere ich, dass es die Primärfarbe war. Das Problem damit, es hier als Combo-Klasse zu machen, bin ich in meinem Styles Manager. Combo-Klasse wird also wie folgt angezeigt. Die Primärfarbe ist nur nach dem Großen zu sehen , da dies die Kombination ist. Es zeigt sich auch hier nach klein, ich kann mir diese Grundfarbe nicht aussuchen. Lass es uns versuchen. Also lass uns gehen. Geh zurück zu hier. Ich werde sagen, nach der Kleinigkeit möchte ich, dass die Primärfarbe nicht da ist. Also muss ich noch einen machen. tust du, wenn es ein Kombikurs sein soll. Also was ich tun werde ist, dass ich es von hier aus loswerde. Wenn du entfernst, gehe ich zurück zu meinen Styles. Es ist immer noch da. Ich werde Styles aufräumen, eine Primärfarbe entfernen. Cool. Was ich also tun möchte, ist von selbst erstellt. Also werde ich sagen, dass u div block unser Hintergrund sein wird. Eigentlich werde ich zuerst die Klasse erstellen. Es wird Primärfarbe genannt. Und das wird so sein. Erinnerst du dich, welche Farbe ich gewählt habe? Was war es? Das ist nah genug. Nah genug. Was für ein Mann, was auch immer das ist. Okay. Also werde ich es dort verwenden und ich werde sechs als globale Farbe verwenden. Ich sage, dass du es jetzt bist. Denken Sie daran, dass das primäre und erscheinen sollte. Du siehst, was schief gelaufen ist. Ordnung. Warte da, ich überprüfe es. Ordnung. Vergiss es raus. Das liegt daran, dass ich dieses Ding benannt habe, aber dann nicht die Eingabetaste auf meiner Tastatur gedrückt habe. Ich klicke einfach woanders, was ich zur Gewohnheit habe. Und es hieß: Oh, ich nenne es einfach einen Diblock anstelle ihres Namens, den du ihm gegeben hast. Deshalb haben wir uns geirrt. Ich habe einfach nicht auf Zurück geklickt. Also sage ich Farbe primär. Ich ziehe es vor, die Art von generischem Topf gut zu platzieren, je mehr du wiederverwendbarer Topf am Anfang meiner Benennung hast, okay, dann kann ich Farbe haben, Sekundärfarbe. Und dieser könnte BG sein, Hintergrundfarbe primär, weil Sie auch die primäre Farbe haben. Da hast du es. Ich denke, das wird funktionieren. Jetzt kann ich Button Lodge sagen und ich kann sagen, dass du es sein wirst, ich kann anfangen, Farbe zu tippen. Da ist es da. Das Coole daran ist jedoch, dass dieser kleine Knopf auch darauf verweisen kann , um Farbe, Hintergrund, Farbe, Primär, Cool zu sagen . Du gehst. Wenn Sie also Ihre Balken bauen, tun Sie sie manchmal als globale und manchmal als Kombinationsklassen weil es keinen Nutzen eine große als eine globale zu haben. Keine Notwendigkeit, weil es kein großes gibt. Ich sage irgendwie, Oh, treffe, ich würde gerne große Zwei auftragen, wodurch die Polsterung auf beiden Seiten sowie links und rechts aufgetragen wird . Es ist nur für Button-Combo-Klassen. Großartig. Über die Hintergrundfarbe ist großartig. Denn dann sagen wir mal den Abschnitt, in dem es ist, sagen wir mal, machen wir tatsächlich den ganzen Kumpel. Buddy kann Hintergrundfarbe haben, primäres Heu. Und dann kann ich sagen, dass ich es so lassen wollte , weil ich jetzt gehen und meinen Hintergrund in der Grundschule ändern kann , alles andere tun kann und alle Knöpfe für die Reise kommen mit. Wenn ich die Hintergrundfarbe ändere, kannst du sie nicht sehen, oder? Weil sie ganz oben drauf sind. Und wie mache ich das? Komm schon Tag. Das ist nicht so. Lass uns ein Div hinzufügen. Es befindet sich in einem Abschnitt unter diesem, der die Hintergrundfarbe bg primary hat . Wenn wir es jetzt ändern, kommen sie alle mit und kommen auf die Idee. gleiche gilt für Tics Color, jedes dieser generischen Sachen ist gut, weil es wiederverwendbar ist. Und das bedeutet, dass ich die Schaltfläche, die Hintergrundfarbe, nicht in etwas Neues ändern muss. Und der Abschnitt und die Treffer, die ich verwende , werden nicht funktionieren. Wenn ich versuche, Biji damit zu tun, was wird dann passieren? Es wird funktionieren. Das ist vielleicht ein cooles Design, für das du dich entscheidest, aber es ist eigentlich ein bisschen wie n, aber es ist nicht das, was es bedeutet. Ich muss einen anderen globalen Stil namens Textfarbe erstellen , primär und sekundär. Eine hervorragende, in Ordnung, wir sind auch im Unkraut angekommen. Wir hatten einige Probleme mit Dans Namenskonventionen oder vergaßen, Enter zu drücken. Vergiss also nicht , wenn du etwas benennst und es bearbeiten möchtest. Ich habe die Angewohnheit, das zu tun. Benennen Sie es und klicken Sie dann darauf. Und was passiert ist, dass es einfach nicht erschaffen wurde, es war überhaupt nicht da. Drücken Sie die Eingabetaste auf Ihrer Tastatur. Das sind die Namenskonventionen , die für mich funktioniert haben. Es gab andere Varianten. Sie könnten etwas sein, das Sie verwenden Sie glauben, dass es andere Menschen nützlich finden. Also wirf es in die Kommentare hier. Ich würde mich freuen, wenn Sie sich die Zeit nehmen, wenn Sie möchten, immer das eine oder das ist ein anderer guter Weg oder ein anderer guter Weg, oder das sind die Probleme und das sind Lösungen. Wirf es in die Kommentare, denn es wäre sehr praktisch für dich als Zuschauer, diese zu lesen, um zu sagen, ich bevorzuge diesen Weg, weil es keine wirkliche Regel gibt , solange die Website rendert gut im Browser, Sie können final, final v2 haben , wenn Sie möchten. Ordnung, das ist Dans Leitfaden zur Benennung von Konventionen, nicht Wissenschaft. Es ist mehr Kunst und sei nicht hart mit dir selbst in der Mitte eines Projekts. Und es ist alles wie in Teilen weil Sie eine schreckliche Namenskonvention haben. Du machst einfach weiter und verfolgst einfach weiter , was ich tun möchte, jedes Mal, wenn ich etwas baue und wenn der Flow von vorne beginnt, um meine Klassennamen umzustrukturieren , weil du manchmal nur Sachen , die du nicht vorhattest. Aber entweder versuchen wir schnell zu sein oder Sie konnten sich zu dem Zeitpunkt nicht wirklich daran denken und Sie haben am Ende ein bisschen Chaos. Es ist okay. Sei nett zu dir selbst. Es ist okay, chaotisch zu sein. Und wenn Sie ein Entwickler sind, der diesen Kurs absolviert, sagen Sie, nein, es ist nicht in Ordnung, chaotisch zu sein. Das ist auch okay. Du kannst super legitim sein, aber es bringt ein bisschen Übung mit sich, wenn du alles irgendwie gesperrt hast und diese Namen bekommen hast. Perfekt. Ordnung, das ist es, aber ein weitläufiger, aber ich hoffe, das war nützlich. Gehen wir zum nächsten Video über. 35. Wie man den style verwendet: Hallo zusammen. In diesem Video schauen wir uns dieses Ding an, diesen Style-Manager, den ich in einem früheren Video angedeutet habe. Lass uns jetzt alles durchgehen und was es wahrscheinlich in diesem Video macht, okay, Style Manager, dieses hier. Was macht es also? Ermöglicht die Suche nach Klassen, den Namen. Nehmen wir an, ich muss alles finden , was getroffen wird. Okay, da ist es. Es gibt diese Überschriften hier. Du kannst sehen, oh, sieh mal, es gibt eine generische. Es gibt einen zufälligen Tanzschlag. Ich habe einen Eins-Zwei-Drei-Vier gemacht und du kannst den Mauszeiger darüber bewegen. Es zeigt Ihnen die Syntax und zeigt Ihnen, was es tut. Dieser hier trifft drei, sagt Rand oben 0% Marge unten z steht für eine Schriftfamilie, eine Farbe und eine Schriftgröße. Es wird etwas anderes geben. Das ist also eine Sache, die das tut. Eine Sache, die du finden wirst, oh, und dann kann es das tun. Nein, es hat ein paar grundlegende Dinge gemacht. Ich hoffe, dass der Style-Manager in Zukunft viel wie Find and Replace machen wird . Es könnte jetzt da sein, weil du in der Zukunft bist. Aber es macht nicht viel von dem , was ich mir vorgestellt hatte. Okay. Eines der coolen Dinge, die es macht, ist , dass der Kunde zurückkommt und sagt, dass wir diese Primärfarbe ändern werden. Es muss heller oder dunkler oder grün sein. Okay. Was Sie tun können, ist, dass Sie es sich schnappen können, denn nehmen wir an, Sie waren ziemlich schlecht mit Ihrer Benennung, okay. Oder Sie schauen sich die Säuberung von jemand anderem an und mir ist bewusst, dass sie sie benutzt haben , weil ich sehen kann, dass sie dort, dort, dort sieht . Du musst vorsichtig sein, weil du es magst . Ich möchte sichergehen, dass ich alles verstehe, weil es vielleicht nur eine kleine Farbtonänderung und du es vielleicht falsch verstehst. Was Sie also tun können, ist es zu installieren, zu verwalten und diese Farbe einfach einzufügen. Okay, das ist die hexadezimale Zahl dafür. Hash fünf, wenn fünf, wenn 5D, können Sie lesen. Aber zumindest kann man hier sehen, dass es alle Attribute durchgegangen ist und gesetzt hat. Dieser benutzt es, dieser benutzt es, diese Klasse, benutzt es. Sie können also durchgehen und sie alle finden. Jetzt findet und ändert es sich nicht mehr. Ein Auto. kann hier reingehen und gehen, Oh, klicke einfach darauf und ändere es. Aber ja, ich hoffe, dass diese Funktion kommen wird. Aber was Sie tun können, ist, dass Sie es stapeln können , um Farbe anzunehmen. Schauen wir uns das an. Dann zeige ich Ihnen alle verwendeten Stellen, betroffenen Elemente auf dieser Seite oder anderen Seiten. Jetzt haben wir nur eine Seite. Ich kann es irgendwie sehen. Kannst du es sehen? Sie können darauf klicken und es bringt Sie zu diesen beiden Orten. Ich habe es benutzt. Zumindest weißt du, dass es dort ist. Ich weiß, wie der Klassenname lautet, damit ich ihn ändern kann. Ich kann im Moment nicht hier reingehen und es ändern. Ich kann den Namen ändern. Okay. Es ist nicht das, was ich will, aber ich weiß, dass die Farbe der Zecken geändert werden muss, damit ich Textfarbe hier drin finden und sie ändern kann, damit ich weiß, dass sie da ist. Ich weiß, dass es Eros ist, der da war. Und jetzt kann ich es ändern weil sie die gleiche Zeckenfarbe haben. Lass es uns ändern. Etwas Offensichtliches. Diese beiden werden sich ändern. Ich muss nur einen von ihnen finden und ihn ändern. Und ich kann mich in dieser alten Farbe durch das Tempo arbeiten. Das ist also der nächste, den wir ändern müssen. Wo ist es? Da ist es da. Ich kann es hier drin suchen, drei treffen und es in das neue ändern. Es ist also irgendwie nützlich. Andere Dinge, die es tun kann, können Sie für Schriftarten tippen. Ich weiß also, dass ich X0 ein paar Mal benutze. Ich weiß, dass es beim Erreichen von 1.2 liegt, welches hier ist. Okay. Es wird aus irgendeinem Grund nicht benutzt , wenn ich drei treffe , ich benutze etwas anderes. Okay, aber Sie können jede Art von Attribut eingeben, indem Sie den tatsächlichen Namen und Farbcode angeben, es wird es finden . Die andere Sache ist Aufräumen. Aufräumen. Ich zeige es dir hier, weil wir im Style Manager sind. Oft räume ich erst auf , wenn ich weiter im Projekt bin weil es hier vier Stile gibt , die im Projekt überhaupt nicht verwendet werden. Gehen wir zum Aufräumen, falls ein Tanzschlag nirgendwo verwendet wird. Es gibt einen namens „Schlagen wird nicht verwendet“. Es gibt eine Combo-Klasse , die nicht verwendet wird und Image Hero Div Past Events genannt wird . Und es gibt einen namens Textblock j. Damit ich diese bereinigen kann. Und in diesem Fall weiß ich, dass es gut wird. Aber sagen wir später, auf der nächsten Seite, die ich baue, dass ich tatsächlich Dance Hitting brauche und es ist weg. Okay, also mach es am Ende auf. Du kannst es machen, während du arbeitest. Es ist in Ordnung. Ich bin jetzt zuversichtlich, dass ich keinen dieser End-Workflows verwenden werde, um mir zu sagen , dass sie auf nichts angewendet werden. Also selbst wenn ich es tue, ist es nicht so, es wird nicht kaputt gehen. Es bedeutet nur, dass ich später keinen Zugriff mehr darauf habe. Also räumen wir sie auf, Vega, wir werden aufräumen. Ein kleiner Bonus, den ich am Ende hier werfen möchte, ist, ich habe ihn noch nicht erwähnt, aber ich dachte, er würde inzwischen kommen. Aber nehmen wir an, ich habe das getroffen und ich kopiere es, weil ich es nur für etwas anderes verwende, nicht für eine Überschrift zwei, ich werde sagen, ich will dich, ich werde es danach weniger benutzen. Ja, füge es irgendwo zufällig ein und du magst, eigentlich werde ich das einfach für etwas anderes verwenden. Ich nenne es nicht mehr „Zwei schlagen“. Und ich kreiere einen neuen Stil namens, ich weiß nicht, fünf zu treffen, und ich werde ihn ändern. Also das Problem dabei, also ändern wir es und wir haben die Farbe in etwas anderes geändert , weil ich es dafür verwende. Du hast nicht wirklich eine neue Klasse erstellt, du benennst einfach die alte um. Das passiert mir ziemlich oft. Zumindest kopiere und füge ich etwas ein, von dem ich denke, okay, ich werde es ändern und ein neues erstellen. Also habe ich es dupliziert und dachte ich habe eine neue Klasse erstellt und kann sie umbenennen, aber eigentlich benennen wir diese auch um. Das trifft jetzt ziemlich fünf. Also wollen wir es duplizieren und etwas Neues machen. Wenn sie das nicht verwenden, löschen sie es oder löschen oder entfernen die Klasse und geben ihr einen neuen Namen, um F5 zu und geben ihr einen neuen Namen, um drücken und daran zu arbeiten. Oder man kann sagen , dass das ziemlich nah genug war , damit ich die Klasse duplizieren kann. Und es wird Überschrift fünf entsprechen. Und ich werde es ein paar kleiner machen . Und Sie werden jetzt feststellen, dass es nicht mit diesem verbunden ist. Also wisse einfach, ob du ein Duplikat willst, ein Element, auf dem bereits eine Klasse steht, benenne es nicht um. Löschen Sie es entweder, erstellen Sie eine neue oder duplizieren Sie die Klasse. Das ergibt Sinn. Nicht wirklich ein Bonus. Ich nenne es einen Bonus. Ordnung, das ist der Style Manager in Webflow. Ich freue mich auf ein Upgrade. Ich denke, das könnte cool sein. Sachen wie „Finden und Ersetzen“ hier drin. Können wir ähnliche Gruppen hinzufügen, damit wir Unterricht auf die Mitarbeiter übertragen können? Ich habe das Gefühl, dass vielleicht die Zukunft von Webflow da drin ist. Wie dem auch sei, das ist der Style Manager. 36. Produktionsvideo 2 - Neues Portfolio: Hallo zusammen. Dieses Video ist ein Produktionsvideo. Wir müssen eine neue Website erstellen, weil wir jetzt mit dem Aufbau unseres Portfolios beginnen werden. Jetzt, wo wir einige Ned CSS-Fähigkeiten hinter uns haben, werden wir aufhören, Dinge zu machen und sie in die Tat umzusetzen, also mache ich meine. Deshalb ist dieses Video relativ kurz. Es wird eine neue Seite entstehen. Ich muss meinen Workspace auf eine kostenpflichtige Version aktualisieren. Ich führe dich durch, was ich getan habe. Aber ja, also erstelle eine neue Website, wenn du sie unter deinem kostenlosen Konto einbinden kannst , tu das. Aber es ist ungefähr die Zeit, in der ich meinen Arbeitsbereich aufrüsten muss. Ich werde sowieso monatlich wählen. Lass es uns machen und du machst es. Ordnung, also als Erstes werden wir stoßen, wenn Sie ein kostenloses Konto haben, müssen wir eines Ihrer beiden aktualisieren oder löschen. Ich werde ein Upgrade durchführen, denn wenn ich hier jetzt eine dritte Seite für mein Portfolio hinzufügen möchte und es heißt, dass Sie Ihr Limit erreicht haben , müssen Sie ein Upgrade durchführen. Also mache ich das und bin in einer Sekunde zurück. Eigentlich werde ich ein Upgrade auf Call durchführen, nur damit Sie es wissen, sie könnten den Namen dieses ändern, aber ich brauche nur mehr als zwei auf gehosteten Websites. Und diese Seiten benötigen mehr als nur zwei Seiten. Also lass uns das machen. Ich bin gleich zurück. In Ordnung, also bin ich wieder in meinem Dashboard oben und kann jetzt eine neue Seite hinzufügen, jedes Drama, okay, also füge ich eine leere Seite hinzu. Und das wird Daniels unglaubliches, was man Tanzportfolio nennt. Und du kannst deinen mit deinem Namen anrufen, okay, also baue dein eigenes Portfolio für dieses auf. Sie werden Ihnen keinen Brief geben, weil Sie es einfach als Ihr Portfolio betrachten. Auch wenn Sie jetzt nichts für Ihr Portfolio haben, werden sie einem mit Ihrem eigenen Namen beitreten. Wir können Platzhalter-Portfolio, Sachen, Tür aufstellen. Also mach weiter und erstelle deine eigene leere Seite , auf der du dich mir anschließen kannst. Wir werden später richtige Klassenprojekte einrichten, aber im Moment werde ich dieses nicht überprüfen. Machen Sie es einfach, damit wir mit dem Aufbau unseres Portfolios beginnen und nächsten Video mehr Webflow-Sachen lernen können. 37. Mindesthöhe vs. ViewPort im Webflow: Hallo zusammen. In diesem Video werden wir uns diese Gruppe hier ansehen , Min. und maximale Breite, Min. Höhe, maximale Höhe. Was machen sie? Warum verwenden wir nicht einfach Höhe und Breite? Was macht dieser Overflow-Button? Alles wird in diesem Video enthüllt. Ordnung, das erste, was zu beachten ist, ist, dass, sagen wir, einen Container, einen Schlüsselabschnitt, okay, und ich gebe diesem Abschnitt einen Namen. Dieser Abschnitt wird ein kalter Abschnitt sein. Lass uns für den Moment einfach Helden machen. Ich gehe hier nur auf generische Beispiele und wir werden sie während des gesamten Kurses verwenden , während wir sie durchgearbeitet haben. Und so Sektionsheld, er wird, wenn ich ihm einen Hintergrund von etwas gebe , diese Farbe auswähle. Wenn ich eine Vorschau erhalte, klicken Sie darauf. Wir sind nicht gegangen. Denken Sie daran, dass der Shortcut-Befehl Shift P bei gedrückter Taste also standardmäßig etwas hinzu, irgendwelche dieser Dibs , die standardmäßig keine Höhe hatten, also kollabieren sie einfach und verschwinden. Workflow weiß das. Das ist ein bisschen komisch, wenn Sie versuchen, dieses Design zu verwenden. Wenn Sie etwas hinzufügen würden und er es nicht sehen könnte, wäre das keine gute Benutzererfahrung. Also fügen sie nur einige Fälschungen hinzu, die hier nicht existieren, wenn sie veröffentlicht werden und die Website veröffentlicht. Wir müssen etwas Höhe hinzufügen. Das ist also eine Sache. Es gibt keine Höhe. Nimm die Matrix. Jedenfalls. Wir können ihm jedoch etwas Höhe geben. Wir können ihm eine gewisse physische Größe geben. Wir können sagen, dass dies die Höhe meiner Heldenbox ist , die 500 Pixel betragen wollte, und das ist in Ordnung. Okay, das Problem bei dieser absoluten Höhe von 500 Pixeln ist, dass es nicht sehr flexibel ist. Also werden die Leute eine Min-Höhe benutzen. Min-Height ist wahrscheinlich die am häufigsten verwendete Minmax, okay für mich zumindest, es bedeutet, dass ich so etwas wie meinen Absatztext greifen kann. Okay, also ein, wohingegen ich einen Absatz hinzufügen werde. Stecken wir es rein und schnappen uns alles. Und ich werde es kopieren und einfügen weil das diese feste Höhe ist. Wir werden auf ein Problem stoßen weil es hier ankommen und es wird gehen, was machen wir? K diese feste Höhe ist problematisch. Okay, also wollte ich expandieren. Also alles, was sie tun, ist es einfach abzuschalten, lass uns einen Teil dieser abgekratzten Sektion loswerden , die Held nur anstelle von Höhe verwenden wird, wird min-height in beiden verwenden, erklären, dass es die Option gedrückt hält oder Alt-Taste auf einem PC, Sie können es so belassen und es wird erweitert und zusammengezogen. Aber für mein Design hier, okay, Hallo, das erste Mal, dass du sie gesehen hast. Wie dem auch sei, ich habe die Größe, die ich will. Okay, also ich weiß ungefähr was, wie hoch es ist. Also was ich tun will ist, dass es niemals so klein sein wird. Okay, ich wollte eigentlich sagen, gib ihm einfach eine Mindesthöhe von Foner-Pixeln. Es sah also genauso aus wie das letzte. Der Unterschied ist jetzt, wenn ich es kopiere und einfüge, füge es ein, füge es ein, füge es ein, füge es ein. Es gibt ein Minimum von 500, aber wenn es nötig ist, wird es etwas größer. Es ist also wirklich üblich. Verwenden Sie einfach die Mindesthöhe anstelle der Höhe, da Sie etwas flexibel sind. Min-height wird sehr nützlich, wenn wir uns etwas davon ansehen, wir haben sie früher gemacht, und standardmäßig haben sie hier einfach mit der richtigen Höhe gearbeitet. Das liegt daran, dass Grid ziemlich großartig ist. Und wenn einer von diesen auf drei steigt, gehen wir drei Zeilen. Sie kommen alle mit auf die Fahrt. Das stimmt nicht immer. Schau dir das an. Wenn ich mein Gitter mit meinem Gitter gepackt habe, ist das okay? Wenn ich sage, dass Sie tatsächlich nur zu zweit sind, wird automatisch eine weitere Zeile generiert. Lass uns einen Blick darauf werfen. Siehst du, das sind zwei, das ist jetzt nur noch einer. Warum sind sie gleich? Und der OCD-Designer und du meinst, ich möchte, dass sie zusammenpassen. Warum auf der Metrik können Sie diesen eine Mindesthöhe angeben. Gehen wir also hier zu diesem. Es hat ein Div oder eine Klasse direkt um das externe Mitglied. Das haben wir schon früher gemacht. Es gibt etwas einen für alle drei kontrolliert. Also mache ich es mit allen dreien. Ich werde eigentlich für die Größe und Dichte sagen , dass wir ihm eine Höhe geben könnten wir ihm einfach eine Mindesthöhe falls es erweitert werden muss. Okay. Aber ich gebe ihm eine Mindesthöhe von, ich schätze nur 500 Pixel. Das heißt, sie können größer sein, aber sie können nicht kleiner sein. Okay, also ich könnte, wenn ich diese wirklich große Karte habe , die drei Linien hat oder in meinem Fall fünfzeilig, wird sie größer, wenn sie muss. Aber es gibt eine Mindesthöhe , die für solche Dinge sehr praktisch ist, wie diese Karten, oder vielleicht ist es ein Preis darunter. Ein Bild der Preisgestaltung könnte untertitelt sein, so etwas gibt Ihnen die Flexibilität der Höhe, aber wenn Sie alles gleich einstellen. Es ist also min-Höhe, um das am häufigsten zu verwenden, du wirst es die meiste Zeit einfach anstelle der Höhe verwenden, Jump Cut, weil ich mich verlaufen habe. Und Sie haben vielleicht bemerkt , dass ich die Min-Höhe des Abschnitts nicht so gemacht habe, wie ich es geplant hatte. Am Ende habe ich es mit dem Absatz gemacht. In diesem Fall ist es kein Problem außer wenn ich den Absatz woanders verwenden möchte. Also habe ich die Min-Höhe dafür gemacht. Ich wollte wirklich auf diesem Abschnitt machen, minimale Höhe von 500 Pixeln. Du bekommst also die Min-Höhe. Lass es uns loswerden , jetzt klären wir es. Denken Sie daran, Alt-Option, klicken Sie auf Instagram, maximale Höhe. Ich verwende die maximale Höhe nicht sehr oft. Sie könnten eine gute Verwendung dafür finden. Es gibt nur eine, die mir einfällt, selbst Googled konnte, wie andere gute Verwendungen der maximalen Höhe, wie andere gute Verwendungen der maximalen Höhe, keine guten finden. Hinterlassen Sie in den Kommentaren, wenn Sie ein gutes Beispiel haben , das besser ist als mein K. Also werde ich diesen Text bekommen haben. Und es befindet sich in einer Box, in der steht, dass vielleicht beschreibend unter einem Bild ist, aber Sie möchten nicht, dass es für immer so weitergeht. Sie möchten, dass diese kleinen Bildlaufleisten angezeigt werden. Was Sie also tun können, ist, dass Sie tatsächlich sagen können, dieser Abschnittsheld eine maximale Höhe von vielleicht 300 Pixeln hat. Okay, was heißt das? Es heißt, sieh dir das an. Wenn ich etwas mehr Text hinzufüge, kopiere, füge ein und füge schließlich eine maximale Höhe ein. Du gehst einen Schritt größer als das. Wenn Sie eine ganze Reihe von CMS-Daten injizieren, können Produktbeschreibungen oder Blog-Beiträge oder etwas anderes darin enthalten sein. Du willst es eigentlich nicht, weil es im Moment überfüllt ist, es sieht einfach nicht richtig aus, es ist in Ordnung. Du kannst es immer noch lesen. Aber nehmen wir an, Sie möchten diese Bildlaufleisten. Was Sie tun können, stellen Sie sicher, dass Sie zu der ausgewählten Sektion Hero gehen . Sie können diese Überlaufoption ausführen. In dem Moment, in dem Sie noch sichtbar sind, können Sie es nicht sichtbar machen, was nicht sehr hilfreich da Sie die Bildlaufleisten hier oben haben möchten. Okay? Sie können also nach unten scrollen und überprüfen, was da drin ist. Bedeutet, dass Sie zumindest etwas Bildschirmfläche verwendet haben , ist nur 300 Pixel groß, aber Sie können tatsächlich viel mehr Inhalte hineinpassen , wenn die Person wirklich in ihrer maximalen Höhe graben möchte , benutze es nicht sehr oft. Sie werden zurückkommen und die Kommentare zu diesem Video überprüfen , denn ich bin mir sicher, dass es noch viele andere Gründe gibt, warum du Max Height verwenden würdest, kann sie momentan einfach nicht herausfinden. Nun, eine Sache, die Sie mit maximaler Höhe tun könnten , ist speziell für diesen Überlauf. Klicken Sie auf das Abschnitts-Tag. Held ist, wir haben uns für diesen entschieden. Dies zwingt sie, diesen hier immer automatisch anzuzeigen. ändert sich nicht wirklich viel, außer wenn es weniger geht, sieh dir das an. Kann ich Aufzüge bekommen? Das ist, dass sie irgendwann verschwinden , weil es nicht überläuft. Jetzt gibt es keine Bildlaufleisten. Die Kraft von B an die ganze Zeit. Überlauf. Okay, das ist also Auto. Es wird nach Bedarf ein- und ausgeschaltet , oder Sie können sie zwingen, ständig eingeschaltet zu sein. Ordnung, das ist definitiv die maximale Höhe über einer maximalen und minimalen Breite. Um das zu verstehen, verwenden Sie das Beispiel, das wir zuvor gemacht haben. Wir können das Gleiche tun. Was wir in diesem gemacht haben, ist hier, wie gesagt, der Absatz im Heldentext hatte eine große alte Polsterung an der Seite. Kannst du das sehen? Was wir früher gemacht haben, wir können etwas Ähnliches tun. Ich schalte es aus. Denken Sie an Alt oder Option, klicken Sie darauf, um es loszuwerden . Ich werde sagen, dass dieser P-Tag-Held mit meiner Größe eine maximale Breite haben wird . Da haben wir's. Wie weit du willst, dass es sein soll. Das könnten Sie tun, sagen wir, 500 Pixel sehen so aus, als ob Sie entscheiden könnten, dass es das ist. Okay, max-width ist also gut für Überschriften, die Sie in zwei Teile zerlegen möchten. Wir werden es gleich machen. Für diesen haben Sie eine wirklich große Leinwand und sie erstreckt sich über den gesamten Weg. Man kann sagen, erzwinge es einfach, aufzuhören, weil ich diese Art von negativem Raum hier drüben mag. Also dieser hier, man könnte sagen, lass uns eine maximale Breite von 600 Pixeln haben. Okay? Es heißt nur, oh, eigentlich sind es 500, was bedeutet, dass es dort kaputt gehen wird . Wenn Sie verschiedene Überschriften für beispielsweise verschiedene Blog-Beiträge einfügen, werden sie nicht ewig auf die Seite gehen. Sie werden sich selbst ein bisschen Würze geben , wie du es mit Margin machst. Oder in diesem Fall machen wir die maximale Breite. Was Sie auch tun könnten, ist, dass das Weben mit Pixeln ein ganzes Video in ein bisschen über all die verschiedenen, diese Dinge macht . Es gibt eine Menge von ihnen. Aber prozentual könnten Sie tatsächlich entscheiden, ich möchte nur, dass es bei 80% liegt. Was machen 80% seiner, 80 Prozent seiner Eltern, k des Elternraums aus, was in unserem Fall der Elternteil hier der Abschnitt ist, okay? 80% weiter draußen im Körper ist hier viel breiter. Und das gibt Ihnen ein besseres Beispiel. Wir schnappen uns eine Heizung, sie würde sie kopieren. Lass es uns in etwas stecken. Lass es uns reinlegen. Okay. Also werde ich es auf die Heizung stellen, denn geht es rein? Kann keine nativen Daten aus der Zwischenablage lesen, mag es nicht, weil es das enthält. Es hat den Span-Text und ich nehme ihn und füge ihn ein. kann ich irgendwie. Lass es uns noch einmal versuchen. Lass uns nach dem Erhitzen für Paste hier runter gehen. Jetzt sind es 80% dieses Speicherplatzes, weil er irgendwie in dieser Klasse für vergangene Ereignisse gefangen ist, die ich hier eingefügt habe. Wenn ich hier 50% sage, werden es 50% davon sein, eine andere Größe zu wiegen 50% hier oben. Okay. Weil es 50 Prozent des größeren Containers ausmacht. Ergibt das Sinn? Du kannst sie ändern. Bei einem Desktop könnten Sie entscheiden, dass 50 gut ist. Du wolltest brechen, weil dir dieser negative Raum gefallen hat, aber auf dem Tablet könntest du gehen, ich mag ihn nicht. 50 auch. Ich bin in der Ecke gefangen und vielleicht teilt es es in drei Zeilen auf. Du wirst sagen, dass du tatsächlich auf dem Tablet sagen kannst, dass du ein bisschen mehr sein kannst, 70% oder 8%, okay? Und wenn es um diese geht, reichen 80% immer noch nicht aus. Sie könnten also von da an tatsächlich hundertprozentig auf all diese Dinge eingehen . Ordnung, das ist also maximale Breite. Wir haben es mit unseren Überschriften gemacht, aber du kannst es mit zwei Div-Tags machen, du kannst es mit allem machen, was du willst. Okay, schauen wir uns die Mindestbreite an. Beispiel bei minimaler Breite. Ich versuche mir einen auszudenken. Verwenden Sie es nicht sehr oft, z. B. minimale Höhe. Eine minimale Breite kann jedoch nützlich sein. Du verstehst wahrscheinlich, was es bewirken wird, aber lass es uns trotzdem zusammen machen. Ich muss, diese Buttons werden sie kopieren und einfügen. Also zwei von ihnen. Und nehmen wir an, es gibt tatsächlich drei davon. Dieser Button hier, wenn ich so gehe, und einer der Buttons, der ein Fragezeichen enthält, die Buttons zu klein. Stellen Sie sich vor, es hätte eine Mindestbreite. Du hast es verstanden. Also wird Button Hero tatsächlich eine Mindestbreite haben, um zu erraten, wie groß 100 sind, okay? Das bedeutet, dass ich den Fülltext auf allen zentrieren werde. Es bedeutet nur, dass dieser hier, wenn es auf ein wirklich kleines Wort ankommt, wie Dan, kannst du sehen, dass es immer noch nicht über die Mindestgröße hinausgeht. Das ist eigentlich ein gutes Beispiel. Ich hatte dort eine Sekunde lang Probleme. Ordnung? Sie verwenden also viel Min-Höhe und Sie verwenden häufig die maximale Breite. Wenigstens mache ich die anderen beiden. Ich benutze sie nicht sehr oft, aber du weißt, was sie tun. Sie sind das Gegenteil von den anderen, die Sie oft verwenden. Könnte dies das bisher schlechteste Video sein, das in diesem Kurs gemacht wurde? Ich glaube schon. Ich mache das schon länger als eine Stunde und das ist so gut wie ich konnte. Ich muss weitermachen. Hoffentlich kommst du auf die Idee. Verwenden Sie keine absoluten Höhen, sondern Mindest- und Höchstwerte, um sich ein bisschen Flexibilität zu geben . Bevor wir gehen, lassen Sie uns unseren Min-Max anwenden, Güte und die Mythen , die ich hier gemacht habe, in Ordnung bringen. Also muss ich, ich werde das hier kopieren. Ich werde oben eine weiße Navigation haben. Eigentlich musst du nur den Helden der Navigationssektion benutzen. Gehen wir Command E oder Control E auf einem PC und gehen in Abschnitt. Okay. Ich habe über Abschnitte gesprochen. Sie können nicht ineinander gehen und es denkt nicht nur daran, es danach zu setzen. Ich hoffe, Sie könnten es tun, indem Sie zuerst einen Container erstellen und dann Command D and go Abschnitt gehen. Und dann sollte es an die richtige Stelle gehen. Oder trifft einen und zieht ihn heraus. Also habe ich meine Sektion, geben wir ihr einen Namen. Cool, dieser eine Abschnitt. Okay, standardmäßig ist es weiß, das ist in Ordnung. Und denken Sie daran, wenn ich in der Vorschau gehe und den Befehl Shift P, Control Shift P auf einem PC zurückführe , ist es weg. Wo ist es hingegangen? Es ist in ihrem Designer vorhanden, nicht in der eigentlichen Website. Warum? Weil wir vielleicht unsere falsche Größe hier von Webflow haben. Geben wir ihm eine tatsächliche Höhe. Geben wir ihm eine Mindesthöhe von 80 Pixeln. Okay? Nur um hinzuzufügen, lassen Sie etwas Flexibilität zu. Und lassen Sie uns eine Vorschau anzeigen . Command Shift P. Das hat nicht funktioniert, als ich hier drüben bin, kannst du sehen, dass ich diese AD halb tippe. Also Ware von p in jedem Smash meiner Tastatur, dann arbeite. Ich klicke hier in diese Art von Canvas und dann Command Shift P. Ich werde diesen Bereich offen halten. Ordnung, dieses Ding, das er reparieren muss, sind zuallererst ein bisschen Absatz-Tics, die ich nicht brauche. Also auf Wiedersehen Absatztext, hier reinklicken. Es gibt noch einige andere Dinge, die ich damit gemacht habe, aber den Überlauf, ich setze ihn wieder sichtbar, was die Standardeinstellung ist. Und ich werde keine maximale Körpergröße haben. Denken Sie daran, optional Klicken Sie darauf. Ich werde eine Mindesthöhe von 400 Pixeln haben. Und die Farbe, ich mache mir im Moment keine allzu großen Sorgen um die Farbe. Wir zeigen Ihnen sehr bald, wie Sie Farben aus Figma oder XD oder Photoshop ziehen können. Aber zumindest meine Strukturen, sie haben meinen Nav-Sektionshelden. Es ist alles ein winziger Kanal. Okay, ich habe Wow, das wird es für dieses Video auf das nächste sein. 38. Konvertieren von Figma in Webflow: Hallo zusammen. In diesem Video werden wir Elemente aus unserem Figma-Design auf Webflow übertragen. Ich werde Ihnen zeigen, wie Sie zwischen den beiden Software-Bits arbeiten können . Jetzt haben wir kurz darüber gesprochen, warum Sie so etwas wie Figma und nicht nur Design in Webflow verwenden würden , Sie haben jetzt ein ziemlich gutes Gefühl dafür, oder? Denn wenn wir hier in Webflow Designentscheidungen treffen müssen, bewegen Sie die Dinge. Es ist ziemlich schwierig, weil wir Dinge wie Abstand und Rand als Padding oder als n betrachten müssen, so etwas wie Figma oder alternativ XD, das ein Konkurrent ist, oder es in Photoshop oder Adobe tun müssen. Illustrator. Das Design hier, Sie müssen sich keine Sorgen machen. Du magst einfach, ich möchte, dass der Button hier drüben ist, weil er gut aussieht. Okay, du müsstest dir überlegen, wie du diese Kiste hier zerschneiden wirst . Du wirst es dazu bringen, dieses Ding zu überlappen. Wie bringt man es dazu, hinter Sachen zu stecken? Figma, bring es einfach dorthin. Im. Tut mir leid, ja, Figma macht damit weiter. In Webflow müssen wir einige Entscheidungen darüber treffen, wie der Code es rendern soll. In Webflow dauert es also viel länger. Es ist so viel einfacher. Entwerfen Sie, lassen Sie es in Figma testen, lassen Sie den Kunden abmelden und beginnen Sie dann mit dem Aufbau und dem Workflow. Es wird also keinen vollständigen Kurs in Figma geben , der Ihnen nur zeigt, wie Sie die Elemente ziehen, die Sie zum Erstellen eines Workflows benötigen. Wenn du Figma lernen willst, habe ich einen Kurs dazu. Okay, sieh dir das an. Es heißt Figma Essentials. Und so, ja, lasst uns eigentlich unseren ersten Teil ziehen. Schauen wir uns Bilder an. Nehmen wir an, wir brauchen diesen Kerl raus, dieses hübsche Ding. Frag nicht. Hier in Figma unter Design können Sie hier unten auf Exportieren klicken und darauf klicken. Scrollen Sie nach unten, Sie können entscheiden, welches Bildformat ein transparenter Hintergrund sein soll. Ein PNG ist also großartig. Ein JPEG wird es exportieren und Sie werden nicht in der Lage sein, um die Ränder des Quadrats herum zu sehen . PNG ist also großartig und ich werde es exportieren. Und wohin werde ich es exportieren? Ich stecke es überall hin. Und es wird es in Webflow k bringen . Stellen Sie es also dort hin, wo Sie es brauchen. Ich werde meine in die Übungsdateien schreiben, okay, danach. Sie können diese Bilder also abrufen, wenn Sie eine hübsche Raupe in Ihrem Portfolio haben möchten , aber sonst würden Sie Ihre eigenen erstellen. Okay, also werfe ich meins auf meinen Desktop nur um es dort hin zu werfen. Lass uns gehen. Bild von Dan. Da haben wir's. Auf meinem Desktop steht, wenn Sie mehr als eine Dose greifen möchten, können Sie all diese Dinge für den Export markieren. Exportiere diesen hier, oder klicke einfach hier doppelt darauf. Ich werde das als JPEG exportieren, weil es quadratisch ist, viele Farben hat und keine Transparenz benötigt. Hervorragend. Okay, du machst das durch, mach all die Dinge, die du exportieren willst. Und dann können Sie auf einen großen Schlag hierher gehen, zum Dateiexport gehen und wir werden all diese Bilder auf einmal erkunden. Anstatt also Bilder herauszuholen und sie dann in Webflow zu bringen , ziehen Sie sie einfach auf den Desktop, in die Mitte des Designers. Oder verwenden Sie diese Option hier und ziehen Sie sie dort hinein oder klicken Sie darauf, um sie hochzuladen. Also lasst uns Bilder von Figma in Webflow. Lass uns über Farben sprechen, okay, es könnte so einfach sein wie ein Doppelklick darauf. Kannst du sehen, wo es da ist. Einfach kopieren und einfügen. Ich möchte, dass das ein Knopf ist. Wo ist mein Button? Oder ich kann weitermachen. Okay, ich habe einen Knopf hier drin. Es muss diese Farbe haben. Okay, los geht's. also die Farben von Figma ziehen, können Sie etwas schicker sein und auf diese Inspect-Option umsteigen. Sie können Optionen ganz nett auswählen , weil es bedeutet, dass Sie sich einfach bewegen und auf Dinge klicken können und Inspect sehen können. Es macht ein paar Dinge. Es gibt mir nicht nur meine Farben, okay, in dem Moment, in dem es mir einen Farbton, eine Sättigungshelligkeit und Alpha K gibt , könntest du einfach zu Hicks gehen, sie kopieren und einfügen. Sie können sehen, dass sie dieselbe CSS-Ausgabe teilen. werden wir in Figma nicht benutzen. Wir schnappen uns nur die einzelnen Teile damit Sie auf diese Weise Farben aufnehmen können. Und die andere nette Sache an Inspektoren, die mit dem Abstand zu tun hat. Also kannst du hier sehen und ich schwebe einfach und mache nichts. Es wird mir sagen, dass ich 21 Pixel von unten bin, in 16 von der Seite, ich würde wahrscheinlich beide auf 21 ausrichten. Aber sagen wir mal die Höhe meiner Navigation, die ein Gast zuvor hatte. Okay, wenn ich den Mauszeiger darüber bewege, wo ist es? Es sagt mir, dass es ein Rechteck gibt das die Höhe von 86 Pixeln hat. Wechseln Sie zurück zu Webflow und sagen Sie: Hey, Navigation, von der ich sagte, dass sie ein Minimum von dem ist, was es war? Vielleicht sechs. Los geht's. Ich sagte AT Ich bin nah dran, das ist ziemlich nah dran. Also kann ich jetzt aufhören, mein Design anzupassen, in Figma, kann diese Inspect-Option sehr praktisch sein , wenn Sie mit jemandem zusammenarbeiten der die Figma-Datei hat und er sie entworfen und Sie der Aufbau sind Webflow. Sie werden sie bitten, zu Teilen zu gehen, und Sie können sie dazu bringen, diese Ansicht zu teilen, da sie diese Anzeigeoption hatte. Und das bedeutet, dass Sie keine kostenpflichtige Version von Figma haben müssen. Es bedeutet nur, dass Sie am Ende standardmäßig diese Inspektionsansicht verwenden. Und Sie können herumarbeiten und alle Abstände überprüfen und die Farben erhalten. Und Sie können die Bilder veröffentlichen, solange sie sie für den Export geladen haben, und sie als Export markieren. Also je nachdem, ob du die Person in Figma bist, die Sachen herstellt, oder ob du sie für einen anderen Designer baust , der glücklich und selbstbewusst Figma ist, aber nicht den ganzen Flow machen möchte. Ein Teil davon Can, vielleicht bist du in dieser Position. Das ist also die dünne Version, wie man Figma benutzt und Dinge für Webflow vorbereitet. Und natürlich habe ich einen vollen Kurs und für Figma, wenn du dich darauf einlassen willst. Aber ja, Figma to Webflow, das ist erledigt. 39. Konvertieren von XD in Webflow: Hallo zusammen. In diesem Video nehmen wir unser Adobe XD-Design und konvertieren es dann in Webflow. Ich werde Ihnen zeigen, wie Sie die verschiedenen Teile, die Sie zum Erstellen Ihres Webflow-Projekts benötigen, aus einer Adobe XD-Datei herausziehen die verschiedenen Teile, die Sie . Wenn du denkst, hey, Adobe XD sieht Figma sehr ähnlich, okay, es sieht genauso aus. Es ist ein Design-Tool. Klicken Sie, ziehen Sie herum, lassen Sie den Client es abmelden, Ihre Benutzer können es hier testen. Dann fange an, Webflow zu bauen. Nun, welches solltest du benutzen? Webflow oder, sorry, Figma oder XD? Es spielt keine Rolle , dass es vergleichbar ist. Sie verfolgen dasselbe Publikum. Für mich als UX-Designer macht es mir nichts aus. Ich benutze beide ständig. Ich habe diesen in XD genauso schnell gebaut wie den anderen in Figma. Okay? Es liegt also an dir, du entscheidest, ich weiß, dass es ein bisschen verrückt ist. Ich erkläre vielleicht das Ende dieses Videos ein bisschen genauer, nur weil mich die Leute die ganze Zeit gefragt haben. Aber erstens ist es voll, hatte eine Pull-Information von XD. Wie unterschied es sich von Figma? Nun, es ist sehr ähnlich. Sag, wir wollen Bilder. Also hier drin kannst du sie anklicken. Und dann willst du hier drüben sehen, du hast diese drei verschiedenen Tabs. Wo befinden wir uns auf Ihren Assets-Registerkarten, notieren Sie Ihre Ebenen-Tab, die Registerkarte Ich konnte mich nicht erinnern wie Gold. Wenn Sie hier nicht ausgewählt haben, können Sie sehen, dass es hervorgehoben wird, und Sie können mit der rechten Maustaste darauf klicken und Ausgewählte exportieren sagen. Dies scheint etwas anders zu sein als bei Figma. Du kannst sagen, ich möchte, dass es ein PNG ist, gib ihm ein Namensschild auf deinem Desktop. Klicke sie an. Ich mache einen Doppelklick , um in das Bild zu gelangen. Ich werde hierher gehen und diese kleine Gruppe hier sagen, die ich exportieren möchte , dass Sie einen großen Massenexport machen können , aber um das zu tun, müssen Sie sich auf die Dinge setzen, die Sie gehen möchten, und sagen: Markierung für den Export, diese auch zum Mitnehmen. Ich möchte, dass dieser geht, er ist schon markiert. Dann können Sie den Batch-Export durchführen und auf einen von ihnen klicken und zum Batch-Export gehen. Und wir werden all die Dinge untersuchen, die Sie markiert haben , oder Dateiexport, Batch, Export, alles, was Sie für den Export markiert haben. Und Sie haben einen Stapel Bilder, in die Sie ziehen und in Webflow ziehen können. Und dann für den Workflow, das Asset-Panel und ziehen Sie sie einfach alle aus Ihrem Browser hierher, klicken Sie auf diesen, um sie hochzuladen. Das sind also Bilder von XD. Schauen wir uns an, was sonst noch zu tun? Farben. Klicke sie einfach an. Okay, das ist eine Gruppe. Ich doppelklicke darauf, um reinzugehen. Da ist mein Fill. Klicke darauf, los geht's, ich kann diesen Code kopieren und in Figma einfügen. In diesem Fall ist dies genau das Gleiche, als ob es sich um Großbuchstaben handelt. Gleiche, das Gleiche. Wie Figma. Sie können eine Inspect-Version davon durchführen. , Sie möchten es in XD Nehmen wir an, Sie möchten es in XD herausfinden, und lassen Sie uns jetzt den Abstand machen, weil das ziemlich cool ist. In XD können Sie die Wahltaste auf einem Mac und die Alt-Taste auf einem PC gedrückt halten . Und nehmen wir an, Sie möchten die Entfernung zwischen diesen beiden wissen , okay? Sie möchten also wissen, dass die Entfernungstaste nach unten gedrückt werden muss. Wenn Sie die Wahltaste gedrückt halten und eine Faust auswählen, halten Sie die Wahltaste auf einem Mac Alt-Taste auf einem PC gedrückt und bewegen Sie den Mauszeiger darüber. Siehst du, neun Pixel sind die Lücke. Wie weit diese Jungs darauf klicken, die Wahltaste oder die Alt-Taste gedrückt halten dann den Mauszeiger darüber bewegen, kannst du dort 11 Pixel voneinander entfernt sehen? Sie können das einfach tun, während Sie in der Designoption sind. Du willst noch ein bisschen weiter gehen. Du kannst gehen, um zu teilen. Nehmen wir an, Sie befinden sich in der Position, in der Sie es in Webflow erstellen, aber Sie sind nicht der Designer. Jemand S entwirft einen nächsten Tag und er möchte, dass du ihn mit deinen süßen neuen Webflow-Fähigkeiten in Webflow erstellst. gibt dir, dass sie zu Share gehen und sagen, welche Version du willst, okay, sie geben ihnen, um sie in die Entwicklung zu bringen , weil es standardmäßig Design Review ist. Sie führen keine Entwurfsprüfung durch. Sie befinden sich in der Entwicklungsphase und entwickeln es in Webflow. Du willst es für das Internet, okay? Es sei denn, Sie erstellen etwas für iOS, was Sie in Webflow nicht tun, weil es Web ist. Okay. Und möchten Sie die herunterladbaren Assets, die Dinge, die wir jetzt für den Export markiert haben , Teil dieses Links sein. Dann muss ich sie dir separat schicken , was wirklich nett ist. Ich gebe jedem mit der Linkachse. Hier wird es eine Option geben , die besagt Link erstellen, das habe ich schon gemacht. Die Vergangenheit. Mein Fall, den ich aktualisiere, sieht genauso aus. Sagt einfach Link erstellen. Okay, ich klicke darauf, um es zu kopieren oder öffne es einfach. Und genau das erhalten Sie als Ihr Webflow Developer. Das sind die Bilder , die markiert wurden. Du kannst sie anklicken. Sie können sie selbst als JPEG, PNG oder PDF herunterladen. Hier sind die Farben, die im Dokument verwendet werden. Das ist ziemlich süß. Sie können den Mauszeiger darüber bewegen, Sie können sehen, dass es die Höhe ist. Sie können sehen, wenn ich darauf klicke, es sind 29 von oben, 29 von unten. Es ist sehr nett. Ist auch das CSS, das wir wahrscheinlich nicht verwenden werden, weil wir mehr Visual Designer mit Webflow machen. Nochmals, nur eine kurze Version der Verwendung von XD Figma in Ihrem Projekt. Ich habe einen langen Kurs, XD Essentials, also kannst du dir das ansehen, wenn du XD lernen willst. Nun, ich habe am Anfang versprochen, sagen, welches du wählen solltest XD Figma. Es spielt wirklich keine Rolle, ist meine Antwort. Aber dann gehen die Leute , erzählen uns aber mehr. Bin ich mehr ist Sigma ist im Moment beliebter und du als UX-Design-Tool. Wenn Sie also nach einem Job in einem großen Unternehmen suchen , das wahrscheinlich Figma haben will. Es ist also gut, Figma-Fähigkeiten zu haben. Und wenn Sie ein Freelancer sind, ist es aufgrund der Preisgestaltung oft besser, sich für XD zu entscheiden. Keyframe ist teuer und Sie zahlen separat dafür. Aber wenn Sie ein freiberuflicher Designer sind und Arbeitskräfte beschäftigen, haben Sie wahrscheinlich bereits eine Creative Cloud-Lizenz. Und Adobe XD ist Teil dieser Creative Cloud-Lizenz. Das kostet dich also nicht mehr. Und weil das Toolset identisch ist, identisch ist sie unterschiedlich mit verschiedenen Dingen um. Die Leute sind sehr begeistert davon. Ich bin ziemlich leidenschaftslos, weil ich sie beide liebe. Das ist echt gut. So ähnlich. Es kommt also auf Preise und Bewerbungen an. Wenn Sie sich also Ihr Land ansehen und sagen: Hey, schauen Sie sich die Bewerbungen an, um zu sehen, was und was sie benötigen. Suche nach einem UX-Designer, großartig, muss in bereitgestellt werden. Und wenn dort XD, XD steht, wenn sie sagen, dass du den Figma-Gorilla kennen musst und über meinen Rat nachdenken musst. Mach beides. Wenn du einen meiner Kurse absolvierst, sobald du den ersten gemacht hast, tanke zuerst XD und wechsle dann zu Figma. Kein großer Übergang. Es ist okay, du musst nur herausfinden was sie irgendwie bewegt haben. Die Dinge sind also etwas anders benannt, aber es ist wirklich einfach, das zweite Tool in die Hand zu nehmen , das sind meine 0,02$. Sie arbeiten sehr hart an beiden Unternehmen, um diese erstaunlichen Tools zu entwickeln, sie werden immer erstaunlicher. Aber für mich, XD, Figma oder vergleichbar, bin ich mir sicher , dass die Leute arbeiten. Beide Unternehmen sind anderer Meinung. Aber das sind meine 0,02$. Ordnung, das war's. Xd zu Webflow, fertig. Nächstes Video. 40. So fügen Sie Schriftarten zu Webflow hinzu: Hallo zusammen. In diesem Video zeige ich Ihnen, wie Sie benutzerdefinierte Schriftarten zu Webflow hinzufügen. In diesem Fall verwenden wir Google Fonts. Ich werde dir zeigen, wie du sie einziehst und zu deinem Design hinzufügst. Du kannst sie benutzen. Gehen wir. Okay, also habe ich eine Überschrift und die Schriftarten hinzugefügt , die in Webflow integriert sind, eine ziemlich eingeschränkte Art von generischen für das Internet. Wenn Sie eine Schriftart hinzufügen möchten , können Sie eine Schriftart hinzufügen. Klicken Sie darauf, öffnet eine separate Registerkarte K, Sie sind auf Ihre dichte Portfolio-Site gegangen. Und denken Sie daran General, wir waren da drin. Wir haben diese Schrift, die dich direkt dorthin bringt. Also sind beide offen. Wir werden uns also nicht mit Adobe-Schriftarten befassen. Sie sind ziemlich kompliziert mit diesen API-Schlüsseln. Und dann müssen Sie möglicherweise Ihren Kunden dazu bringen , die Schriftart zu lizenzieren und dafür zu bezahlen, obwohl Sie sie möglicherweise aus Ihrer Adobe Creative Cloud ausgewählt haben . Ja, es ist chaotisch. Eine Google-App. Ich habe eine gute Dokumentation dazu. Wir entscheiden uns für die einfache, bei der die Leute die meisten Google Fonts machen würden. Sie finden Ihre Schrift auf fonts.google.com. Es gibt erstaunliche Schriftarten. Sie können sie auswählen, herunterladen, Ammoniakmaschine verwenden, sie in Ihrem Figma-Design oder Ihrem XD-Design verwenden. Und dann müssen Sie sie irgendwann in Ihr Projekt einbringen. Sie bringen sie also getrennt von Ihrem Desktop ein. Okay, obwohl du es in Figma oder XD hast, heißt das nicht, dass es in deinem Webflow-Projekt sein wird. Wir müssen es irgendwie reinklemmen, um das zu tun, ich werde herausfinden, welche Schriftart ich verwende. Ich benutze öffentliche Sans. Es ist eine gute, nette Helvetica sein will, ich mag es. Gehen wir also in den Workflow. Wir haben auf die Anzeigenschriften geklickt und alles, was wir tun müssen, ist zu sagen, nun, ZZ hätte einfach damit beginnen sollen das hieß Public Sense. Ein öffentlicher Sinn. Das ist der große Teil wie diese Varianten. Das Problem beim Hinzufügen all dieser Varianten, die du magst, ich nehme sie einfach alle. Woohoo. Das Problem dabei ist, dass es an der Geschwindigkeit der Website liegt. Wenn Sie alle diese Schriftarten in Ihrem Workflow-Projekt installieren , dauert es viel länger, bis Ihre Website geladen ist. Und wenn das Laden Ihrer Website viel länger dauert, gefällt es Google nicht. Sie bestrafen dich in den Such-Rankings. Sie wollen Websites, die gut, leicht zugänglich und schnell geladen werden . Sie brauchen nicht ewig, besonders auf Mobilgeräten, sagt seien Sie vorsichtig. Die wichtigsten sind 400, was regulär ist, 700, 900. Wenn Sie aus dem Schriftland kommen, ist das leicht, das ist normal, das ist fett wie extra fett. Du entscheidest vielleicht, du brauchst all die. Oder du entscheidest vielleicht, ich brauche das Licht nicht. Ich brauche eine normale, aber eine normale Kursivschrift, die da ist. Um sie zu benutzen projiziere ich. Sie können diese am Ende ein - und ausschalten. Wir werden uns später ansehen, wenn wir uns SEO und Suchmaschinenoptimierung ansehen , aber Sie können sie alle für den Moment einschalten. Auch hier macht es Sinn, zu denen zu kommen, auf denen Sie dort keinen Brief anbieten. Ich kann es irgendwie an meinem Design erkennen. Ich weiß, dass ich hier drin benutzt habe, was werden sie benutzt? Ich habe dort 400 benutzt. Ich habe diesen benutzt. Sagt es mir nicht. Du bist 400. Was sage ich? Ich bin Inspektor. Es wird ein Inspektor entworfen. Los geht's, Dan. Ich habe Regular bekommen, was 400 ist, und dieses hier, extra fett, was 900 ist. Ich weiß, dass es Teile davon gibt , die leichte Version des Ego sein werden. Das weiß ich schon, dieser Mann, dass ich sowieso keine Kursivschrift verwendet habe. Seien Sie also sehr sparsam bei den Schriftarten. Klicken Sie auf Hinzufügen und fertig. Wenn du gehst und dich dann entscheidest , wirst du zehn andere Schriftarten verwenden. Und es wird Lowe's sein, sie werden sich ziemlich schnell summieren. Seien Sie also vorsichtig, wenn Sie es entwerfen und an den Kunden verkaufen. Welche Schriften verwendest du? Geben Sie einfach zwei, vielleicht drei und nur ein paar verschiedene Gewichte ein, da Sie nicht möchten, dass Ihre Website sehr schnell geladen wird. Das war eine lange Erklärung für die Verwendung einer Schrift. Können wir einen treffen, wird das sein, was wir tun werden, ist, alle treffenden zu stylen und sie werden alle öffentlich sein. Jetzt wurde es nicht geladen. Warum wurde nicht geladen? Muss wahrscheinlich aktualisiert werden. Auffrischen? Ja, bitte alt. Jetzt schauen wir mal, ob es funktioniert. Eine Typografie treffen, Sans Da ist es da. Willkommen! Okay, und Sie werden feststellen, dass nur die Schriftarten, die Sie tatsächlich ausgewählt haben, hier drin sind. Ordnung? Und dieser muss schwarz sein. Da haben wir's. Weil ich es aus meiner Nähe ziehe, schließ es. Ich ziehe aus meiner Figma-Datei, die extra fett ist. Es ist seltsam, wie sie ihnen unterschiedliche Namen geben würden. Und schwarz, extra fett oder 900, sie bedeuten alle dasselbe. Große dicke Schrift. kopiere und füge die Häkchen ein, die das sind. Und so fügt man Schriften hinzu. Ordnung? Das heißt, es werden Schriftarten zu Webflow hinzugefügt. Und ich werde es so bauen, dass es im nächsten Video viel mehr so aussieht. Aber im Moment haben wir Schriftarten hinzugefügt, Arbeit erledigt. 41. Produktionsvideo 3 - Hero: Hallo zusammen. Dies ist ein Produktionsvideo. Das ist es. Wir müssen von hier nach hier gelangen, wo wir das letzte Video beendet haben. Aber unser Design, schauen wir uns unser Design an. Es ist eher so, wo es zwei Spalten gibt und diese richtig ausgerichtet sind. Es gibt ein bisschen blauen Text. Was ich in diesen Produktionsvideos versucht habe, versuche ich, keine neuen Konzepte einzuführen. Ich trenne diese für Like-Videos aus. Und dann setze ich es einfach in die Praxis um, während ich diese mache. Und Sie können zuschauen, wenn Sie möchten, Sie können es überspringen, wenn Sie möchten. In diesem Fall hatten wir jedoch viele Probleme beim Versuch, mein Design zu vervollständigen , und wir haben Wege gefunden, es zu überwinden. Also überspringe es, aber du verpasst vielleicht bisschen gutes Lernen, während Dan ein bisschen ins Wanken gerät und versucht, es dazu zu bringen. Ich denke, es ist ziemlich nützlich für die Leute zu sehen, als ob wir sowieso in Ihren eigenen Projekten auf Probleme stoßen könnten , was dann gerade erst losgeht, oder? Lass uns loslegen. Lassen Sie uns zunächst das große Ding hier ist , dass es irgendwie wie zwei Chunks ist, k zwei Spalten. Wir verwenden ein Gitter, um sie aufzuteilen, und dann fangen wir an, es zu stylen. Okay, also der erste Chunk, der erste nervige Teil ist die Hintergrundfarbe. Also lass uns gehen. Okay, die Hintergrundfarbe für diese Homepage ist die Hintergrundfarbe dieser Homepage. Ich werde, weißt du, meinen Buddy-Tag schnappen und sagen, der Körper auf allen Seiten wird eine Hintergrundfarbe davon haben , ich mache es tatsächlich ein bisschen dunkler. hier einfach auf das B für Helligkeit geklickt und meinen Abwärtspfeil benutzt, um es etwas dunkler zu machen Diese Helden-Sektion sollte keinen Hintergrund haben. Also gehe ich zu Command or Control, klicke darauf. Okay, und das ist so, dass meine Navigation weiß sein wird. Okay, los geht's. Und wir werden, ich zeige dir später, wie man es dehnt. Kannst du sehen, dass sich dieser über den ganzen Weg erstreckt. Möglicherweise müssen Sie den Kontrast erhöhen, der Kontrast ist sehr niedrig. Es schien nicht so, als hätte es ganz anders ausgesehen, als ich es entworfen habe, tut es aber nicht mehr. Das ist also die Farbe sortiert. Lass uns den Abstand klären. Also will ich einen Chunk für diese Seite und einen Chunk für diese Seite. Grid wäre gut. Dann lass uns das machen. Also lass uns gehen und uns das Raster ansehen. Was für ein Durcheinander mit meinem Fenster. Also lasst uns zuerst das Gitter einsetzen und dieses H1 hineinlegen. Da ist also mein Bereich hier. Lass uns ein Gitter hinzufügen. Los geht's und überprüfen sie unten. Er wird zwei Spalten und nur eine Reihe haben. Okay? Und ich drücke einen Klick auf Fertig oder doppelklicke , um es zu verlassen. Wenn du einen triffst, gehst du in die Startaufstellung. Los geht's. Okay, und lass uns auf ein Gitter klicken und den richtigen Abstand festlegen. Jetzt werde ich das nicht messen. Ich werde es mir einfach ansehen und sagen, ja, es ist ungefähr so weit drüben. Also werde ich hier schweben. Ja, aber das ist die Lücke. Ich werde mir diese kleinen Zeilen hier schnappen. Sind wieder so etwas. Sie können hier reinklicken und es eingeben. Wenn Sie möchten, dass es 0,55 ist, wird der Rest berechnet. Okay. Ich bin zufrieden mit 0.5. Okay, das ist also dieser Teil. Klicken wir auf Fertig. Geben wir ihm eine Mindesthöhe , denn wie hoch ist das im Allgemeinen? Und auf Figma können Sie die Optionstaste gedrückt halten, wie Sie es in XD getan haben. Klicken Sie einfach auf etwas Ähnliches, halten Sie die Wahltaste oder die Alt-Taste gedrückt und Sie erhalten die Maße von allem um sich herum. Aber in diesem Fall, weil es nicht wirklich eine Box gibt, ist nur der Hintergrund. Sie können Rechtecke verwenden, um zu sagen, gut quadratisch. Dieses Quadrat ist, kannst du die Zahlen sehen, die unten herausspringen, okay, es ist 576 Pixel hoch. Das ist es also, was ich mir das Minimum wünsche. Ich möchte also, dass diese Heldenabteilung ein Minimum an Männern hat, 556. So schlimm. Keine Ahnung was ich gerade gemessen habe. Nah genug. Ordnung, also da ist dieser Teil. Jetzt muss es von oben herunterkommen. Wie weit ich darauf klicken werde, halte meine Option gedrückt. Auf einem Mac Alt auf dem PC Sie den Mauszeiger einfach über diese Schaltfläche, die Sie sehen, ist 187. Denk dran, Dan, du erinnerst dich, dass du es mir eine Sekunde erzählt hast Also kann ich diesen Schlag nach unten drücken oder ich kann diesen Harris-Abschnitt mit Rand oder Polsterung versehen. Wenn ich also einen Rand hinzufüge, wird meine Gesamtgröße größer. Kannst du sehen, dass sich die eigentliche Box nach unten bewegt. Also sage ich nein, es werden 187 sein. Ich erinnerte mich an die Polsterung auf der Innenseite. Ich will das eigentlich, weil es nicht so groß ist, oder? Gutes Argument. Okay. Also brauche ich es nur , um das zu beeinflussen. Ich könnte Stil anwenden, nur das Schlagen oder vielleicht Danke. Warte dort. Okay. Es gibt ein paar Dinge, die ich tun könnte. Was ich also tun werde, ist, dass ich eine spezielle Klasse darauf anwenden werde. Ich mache das rückgängig, um die Polsterung in der Harris-Sektion zu entfernen . Und ich werde es mit diesem Schlagen machen, ich sage Schlagen. Ich gebe dir, worauf bereits ein Kurs angewendet wurde. Gefahr, es sollte daran denken, dass wir den All-Treffenden hinzugefügt haben . Jetzt gibt es einen Kurs hier. Was macht dieser Kurs? So wie ich es überprüfe, halte ich meine Wahltaste gedrückt. Klicke auf diese kleinen Chevrons. Es macht irgendwas Blaues hier drin. Es macht das Gewicht und die Schrift. Ich nahm einfach an , dass ich das mit der Klasse gemacht habe. Ich nahm an, dass ich das mit der Überschrift One gemacht habe. Das heißt nicht, dass du gehst. Und jetzt hat es nur das verstanden. Und ich habe nur Aereo ohne öffentlichen Sinn oder tue oh, okay. Wir sind wieder im Geschäft. Was habe ich in Bezug auf die Größe hier ausgewählt? Ich habe mit 50 benutzt. Okay, also hier drin werden das alle meine Heizung auf allen Seiten sein, wieder 50. Aber ich sage 51. Das muss für dich unerträglich sein. Benutze alle 50. Und die Zeilenhöhe k, wir verwenden eine Zeilenhöhe von I, verwenden hier 95%. Ich mache es auch hier drin. 95% werden reinkommen, aber es gibt einige andere Möglichkeiten , das später zu tun, aber folgen Sie dem Design. Okay, also fange ich immer noch mit meinen Altersstufen an. Das ist alles was ich will. Dieser hier braucht einen speziellen , den k in einem anderen Klassenmodus. Das ist wie ein Block, erinnere dich an unseren BEM-Blockteil, die generischen, die ich verwenden werde , und viele Seiten. Ich brauche hier ein bisschen mehr, um den Helden schlagen zu sagen, weil ich ein paar Dinge tun musste. Es muss richtig ausgerichtet sein. Okay. Was nicht alle in meinem Alter sind, um nur dieses besondere zu sein. Und außerdem brauche ich eine Marge von 187, ungefähr so. Unter Abstand werde ich also Polsterung oder Rand haben, egal in diesem Fall, es bekommt 20 von irgendwoher. Okay. Gehen wir auf 187 hoch. Geben wir es ein. Wenn Sie sich alle fragen, woher es etwas vom Mitglied bekommt, halten Sie die Umschalttaste gedrückt und klicken Sie darauf. Und es heißt, dass die Werte vom H1 kommen. Der H1 hat also standardmäßig einen gewissen Polsterrand oben und unten. Ich werde es nicht überschreiben. Lass uns so weit abkühlen, wie es sein muss. Ich schaue nach rechts. Jetzt. Die andere Sache ist, dass mir dieser Whitespace hier so gefallen hat. Es stimmt nicht mit der Kante überein. Was kann ich also tun? Das ist gut. Was denkst du? Wie erhalte ich es? Also ist es irgendwie hier drüben. Stellen Sie sich vor, wir könnten eine minimale oder maximale Breite machen. Okay, also was wir tun werden, ist der Spezialheld, Spezial-Heroin, okay, das macht das besondere, nur für diese Box, kann eine Größe haben. Oh, es ist irgendwie auf halbem Weg. Wir können eine maximale Breite von dieser haben. Wie weit davon entfernt, entschuldigen Sie mein Rechteck noch einmal, ich möchte sagen, dass es darum geht, was 54550 ist, etwas da in der Nähe. Maximale Breite von fünf Pixeln. Teilen wir es in zwei Zeilen auf. Bin ich damit zufrieden? Manchmal muss man damit zufrieden sein. Ich bin damit nicht zufrieden. Ich brauche es. Ich gehe weiter nach oben und benutze meine Umschalttaste und benutze den Aufwärtspfeil, bis er in drei Zeilen zerfällt. Ich mache gute Arbeit, Dan. Ich denke, das liegt daran, dass ich das in Figma viel breiter gestaltet habe Figma viel breiter als das, was hier standardmäßig für den Container ist . Der Container ist eines dieser seltsamen Dinge bei denen ich meinen Container unter Größe greifen kann. Du wirst sehen, dass es verschlossen ist. Sie machen viel Arbeit und Webflow, um diese Breakpoints zu bekommen , die funktionieren und alle hübsch gestylt sind. Das Beste ist also, es einfach als das dünne zu belassen. Aber hey, wir sind hier. Ich habe es zu groß gestaltet. Also werde ich eine Klasse erstellen, die sie außer Kraft setzen kann. Es enthielt eine Breite. Und es wird auf Container aufgetragen. Und ich sage nur, kann das nicht gebrauchen, kann es nicht benutzen. Ich kann die maximale Breite verwenden. Ich glaube, ich sage 1080. Okay? Ordnung, wir sind näher am Design. Jetzt ist die maximale Breite irgendwie okay, außer dass sie dort drüben ist. Wir sagten, dieser Held, der hier trifft, ist so breit, was die richtige Größe hat. Aber ich möchte wissen, wo diese Seite richtig ausgerichtet ist. Der Text innerhalb des Helden, Helden trifft, ist rechtsbündig ausgerichtet , aber die eigentliche Box selbst, okay, dieses Ding namens H1 ist nicht, es ist nur standardmäßig auf das linke Bein eingestellt. Im Webdesign funktioniert alles, wie bringen wir es voran? Du kannst es mit dem Netz machen. Da ist also das übergeordnete Element des Rasters, das allgemeine Dinge wie unseren Abstand macht Da ist also das übergeordnete Element des Rasters, das allgemeine Dinge wie und wir können die Dachrinne machen oder wir hören, okay, los geht's. Lass es unten. Okay, vielleicht ein bisschen kleiner. Und die ganze Rinne in der Gosse ist hier dazwischen, diese Dinger ziehen die Größen dazwischen. Ordnung, also das macht das ganze Zeug. Wenn Sie in das Kind gelangen möchten, können Sie auf das Innere doppelklicken oder auf Fertig klicken und dann auf Innen doppelklicken. Du wirst das bemerken, wenn ich im Layout nach oben scrolle oder ist es ein Doppelklick, um hineinzukommen? Klicken Sie jetzt, um hineinzugehen. Da drüben ist das Grid Child, wow, ich kann es auf jeden Fall wieder machen? Ordnung, also sind sie weiter Eltern, klicken Sie auf Fertig. Nimm alles in diesem Gitter und du wirst das Kind sehen. Also das ist, wir schauen uns diese Zelle hier an und all die Dinge darin. Aber wir können sagen, dass es in diesem Grid-Kind tatsächlich eine Zelle gibt. Ich möchte, dass alles nach rechts gerechtfertigt ist. Hey, oh, gut. Also die richtige Größe. Wie auch immer, schauen wir uns an, was ich sonst noch machen möchte? Lass uns diese Farbe machen. Denken Sie daran, dass wir diesen hervorgehobenen Schnitt gemacht haben Wir haben sie schon mal gemacht. Du glaubst, du könntest es schaffen. Okay. Also möchte ich, dass du dich daran erinnerst, was es war. Du wärst wahrscheinlich fertig. Es wird Span-Tag genannt. Es ist dieses Ding hier. Wickeln Sie es in einer Spanne ein. Und die Spanne wird eine Span-Klasse haben , die Sie haben können. Primärfarbe ist das erste Mal, dass wir eine globale Klasse machen, okay, es wird unsere Primärfarbe sein . Und es wird diese Farbe sein hier ist die, die wir am häufigsten verwenden werden, oder? Es ist keine Sekundärfarbe. Ich benenne es um. Das ist meine Farbe, zweitrangig. Ich bevorzuge es, diese Namenskonvention so zu machen. Und das ist Sekundärfarbe, der Text. Okay, also lass es uns machen, um eine SMS zu schreiben. Farbe, sekundäre Typografie. Das ist meine Farbe dort. Also los geht's. Einer hier, dieser hier. kann ich jetzt nicht leben. China war Schrift. Ich dachte, dass ich eine zusätzliche Glühbirne verwende, wäre tatsächlich eine 900. Das sind 900. Das sind 800, Dan. Okay, also was wir tun werden, wir müssen zu den Schriftarten zurückkehren und sie ändern. Also, ja, los geht's. Lass uns das zusammen machen. Also gehen wir zu meinen Projekteinstellungen für die Site. Oben hier gibt es eine namens Fonts. Dies sind diejenigen, die installiert wurden. Und ich bin irgendwie so, aber ich habe 900.800 installiert. Du kannst sie bearbeiten, okay. Was ein bisschen nervig ist. Also kann ich sie noch einmal hinzufügen, aber sie gehen nicht durch öffentliche Sans oder tippt es nur PUB? Und ich kann 800 hinzufügen? Das Problem wird sein , dass ich ziemlich sicher bin, dass es wahrscheinlich im Code Ed sein wird , diese Schriftarten zweimal zu laden, was meine Seite verlangsamen wird. Also beide. Und mach es einfach nochmal für alle Fälle. So normal will ich einmal 8000. Ich kann mich nicht erinnern, was ich sonst noch brauche, ich sollte viel besser sein als dieser normale. Regular sollte besser auf Sie vorbereitet sein. Wie dem auch sei, wir lernen Sachen , okay, und das wird reichen. Und ich gehe zurück zu meinem Designer. Von hier aus können Sie direkt loslegen. Wir können zurück zum Dashboard und wieder rein und hoffentlich die Schriftart oder das Laden, weil es hier wie ein Reset ist. Es wird weitergehen, also wie sind wir dazu gekommen? Weil Hero Hitting Hero nur Mitglied von R BE war . Es war also nicht das Erste, was wir mit dem Block gemacht haben. Okay, es ist also unter der Topographie. Es ruft hier nicht die Schrift auf, weil es all dieses Zeug gibt. Denken Sie daran, die Umschalttaste gedrückt zu halten und darauf zu klicken Es kommt von den alten. Und das ist eine gute, eine gute Sache, denn wie komme ich dazu? Ich kriege es hier nicht hoch. Wo ist es? Ich kann eines von zwei Dingen tun. Ich kann die Sachen, die ich hier gemacht habe, löschen oder sie einfach entfernen und in einer Sekunde wieder hinzufügen. Denn jetzt, wenn ich es auswähle, es keine anderen Klassen. Ich sollte in der Lage sein, zu einem H1-Tag zu gehen, oder du könntest, anstatt das zu tun, Lass es uns rückgängig machen. Du könntest einfach hinzufügen und hier unten klicken und nicht Andy Style dazu machen. Dann können Sie darauf zugreifen. Später zeige ich Ihnen, wie Sie nur diese Elemente zu einer Styleguide-Seite hinzufügen , damit Sie keine Auswahl haben. Ich habe sie auf der Seite abgelegt, geändert und dann erneut gelöscht. Es ist gut, sie im Moment auf einer separaten Seite zu haben. Ich mache es so. Ich werde es löschen. Ich werde es einfach entfernen. Man hört, wie man in die Öffentlichkeit geht. Sie sehen, es wusste irgendwie nicht, was zu tun ist, will 900 sein, aber es kann es nicht. Es ist also irgendwie ausgegraut. Also mache ich 800. Jetzt. Ich werde meinen Stil wieder anwenden. Und wie nennen wir es? Wir nennen es Textfarben sekundär. Haben wir nicht. Wir nennen es Helden, Schlaghelden. Los geht's. Besser. Okay, glücklich, dass wir in ihrem Video viel mehr gemacht haben, als ich dachte. Aber das wird live sein, wenn du Sachen machst und Webflow. Du weißt sogar, wovon er spricht. Das ist die große Frage. Was ich gerne machen würde, ist das ein paar Mal zu üben und dir direkt zu zeigen, wie es bis zum Ende geht. Aber ich weiß, dass es sehr wichtig zu sehen, wie Sie auf Probleme stoßen und auf Probleme stoßen und wie Sie sie möglicherweise beheben können. Wenn du da sitzt und denkst, hey, ich kann mir zwei bessere Möglichkeiten vorstellen, genau das zu tun, was du hier gemacht hast. Es gibt viele verschiedene Möglichkeiten genau dasselbe zu tun. Wenn Sie eine bessere Lösung finden können. Es ist ein cooles Puzzle. Es ist ein cooles Puzzle. Abschlussprojekte. Es macht Spaß, die besten Wege zu finden, Dinge zu tun. Vielleicht ist es ein bisschen schneller, es auf deine Weise zu machen. Vielleicht ist es ein bisschen schneller, es auf die Art der anderen Person zu machen. Unabhängig davon ist es ein lustiges Build-Projekt und Webflow, aber das war's. Ordnung, das Produktionsvideo ist vorbei. 42. Line nach Buchstabenabstand in Webflow: Hallo zusammen. In diesem Video werden wir uns ein paar Dinge ansehen. Wir schauen uns den Abstand zwischen Charakteren oder Kooning oder Tracking an, wie willst du es nennen? Wir schauen uns den Abstand zwischen den Zeilen an. K korreliert möglicherweise je nachdem, wie Sie es nennen möchten, die vertikale Höhe zwischen den Zeilen, dann schauen wir uns den Absatzabstand an. Okay, also wenn wir zwei Absätze haben, wie man den Abstand zwischen dem IT-Bereich anpasst , nachdem Sie eher von einem gedruckten Hintergrund kommen. Ja, lassen Sie uns dann über diese drei Dinge sprechen. Werde am Ende ein großes Durcheinander anrichten und versuchen, es zu reparieren. Ich werde versuchen so zu tun, als hätte ich es in den Kurs aufgenommen weil es für Sie nützlich ist, es zu wissen. liegt auch daran, dass ich bei der Gestaltung meines Designs nicht weit genug vorausgedacht habe und mich selbst in ein Loch gesteckt habe. Sie werden sich auch selbst in ein Loch einbauen. Behandle zuerst die einfachen Dinge und versuche dann, unser Problem zu beheben. K ist, fangen wir mit Zeilenhöhe an. Das ist der Abstand zwischen dem vertikalen Raum zwischen diesen beiden Linien. Vielleicht stellst du es dir als Leben vor, wenn du aus einem anderen Teil der Designwelt kommst. Okay, also lasst uns das öffnen. Du machst es mit Körpergröße. Das ist das einfache k. Das Erste ist aber , wo machen wir es? Okay, ich könnte es mit diesem Kurs machen, den wir gemacht haben. Daran ist nichts falsch. Aber in meinem Kopf denke ich, weißt du was, ich möchte wahrscheinlich, dass der Abstand in allen Überschriften auf allen zukünftigen Seiten gleich ist. Es ist also besser, es mit dem Standardtag zu tun . Also werde ich diese Klasse für eine Sekunde entfernen, okay, und dann werde ich, wenn sie ausgewählt ist, Zugriff auf diese alten H1-Tags haben. Und jetzt kann ich sagen, dass ich eigentlich eine Höhe von haben möchte und ich kann die Wahltaste auf einem Mac gedrückt halten, Alt-Taste auf einem PC und einfach ziehen, okay, um es so zu machen, wie du es willst. Oder schauen wir uns die Messungen von Figma an. Und schauen wir uns auch XD an, nur um Ihnen einige der Unterschiede und deren Funktionsweise zu zeigen . Also Fitness ist, ich will hier eine Linienhöhe, k von 95% hier. Und Workflow, wir können sagen, ich möchte, dass es Prozentsatz 95 ist. Da haben wir's. Okay, wenn du es von XD bekommst, wird XD sagen, dass es da sein wird, es ist da. Es werden 47 Pixel groß sein. Das sagen sie nicht. Aber wenn Sie 47 auf all diesen Pixeln eingeben, dann macht jeder, der arbeitet, 47 plus 47 rein, los geht's. Du landest am selben Ort. Okay, das ist also Vorsprung oder Zeilenabstand. Schauen wir uns Kooning oder den Buchstabenabstand an. Okay, es ist unter dieser Option „Mehr“. Ich arbeite wieder an meinem alten H1. Und dieser hier, wo ist er? Es ist dieser hier, Buchstabenabstand. Also werden wir hier keine Prozentsätze haben. Wir werden uns später Felgen und ein paar andere ansehen , um etwas Ähnliches zu bekommen. Aber im Moment werde ich einfach, es wird standardmäßig auf Pixel gesetzt. Also halte ich meine Wahltaste Alt-Taste auf einem PC gedrückt und ziehe sie einfach nach links, wo ich sie haben möchte. Das scheint nett zu sein. Minus zwei Pixel. Los geht's. Minus, in Ordnung, das war einfach. Damit hat es gerade erst angefangen. Schauen wir uns den nächsten an, bei dem es sich um einen Absatzabstand oder ein Leerzeichen nach dem Abstand zwischen den Absätzen handelt, weil er einige interessante Punkte aufwerfen wird. Als Erstes fügen wir diese Klasse wieder hinzu. Okay, also erinnere dich an unseren schlagenden Helden der Klasse, damit er irgendwie nach unten gedrückt wird. Jetzt werden wir, naja, eigentlich bevor wir das tun, ein kurzes Okay machen. Aus dem Zusammenhang gerissen, bevor ich mich erholt habe . Ich weiß, dass ich alles machen werde. Also werde ich gehen, ich werde außerhalb dieser Heldenabteilung sein . Dieser Behälter. Ich klicke auf diesen Warenabsatz. Los geht's. Ich habe einen Absatz. Ich füge einen weiteren Absatz hinzu, nicht den Druckbildschirm. wir einen weiteren Absatzbefehl D hinzu, Control E. Auf einem PC haben Sie zwei davon. Wann immer Sie also mehr als einen Absatz benötigen, müssen Sie zwei dieser Absatzblöcke haben, was wirklich seltsam ist, aber es ist nur ein gewelltes Design, wie es funktioniert. Du könntest es vortäuschen , indem du zurück gehst. Das Problem ist, dass es sehr schwierig ist, diese Lücke hier drin zu platzieren. Wenn du das gerne machst, ist das in Ordnung. Ich mag es einfach nicht. Wenn Websites es nicht mögen, ist es am besten, die ganze Zeit über Absätze zu haben. also in separaten Haben Sie also in separaten Absätzen 100 Absätze? Du hast 100 dieser kleinen Absatzblöcke. Schauen wir uns nun den Abstand zwischen ihnen an, oder das Leerzeichen danach oder wie man sie sonst nennen soll. Es ist im Grunde der untere Rand. Wir werden alle Absätze sagen. Lass uns alle Absätze machen. Alle Absätze. Es wird ein Layout haben. Kann standardmäßig einen Abstand haben, diese Dose, ich werde sie öffnen. Okay, also werde ich das machen. Und das bedeutet, wenn ich das kopiere und einfüge, sind sie alles, was jeder Absatz, den ich habe , diesen Abstand zwischen ihnen haben wird. Je nachdem, was du machen willst. Ich mache vielleicht dasselbe und mache die Zeilenhöhe. Okay, also du, die Zeilenhöhe wird etwas höher sein. Es hängt davon ab, was Sie tun möchten. Das ist Platz nach Absätzen und die Seltsamkeit, dass Absätze getrennt sind. Jeder Chunk muss in einem eigenen kleinen Wrapper sein. Du hast am Ende jede Menge davon, weil Webdesign, jetzt wird es seltsamer, bevor es nicht auf k wartet. Also werden wir auf ein Problem stoßen und dann werden wir es fast beheben können. haben wir schon einmal gelernt. Erinnerst du dich an unser Netz, dieses Gitter hier oben, oder ist das ein Grid? Gitter. Wir haben diese beiden Abschnitte und wir haben bereits früher gelernt. Denken Sie daran, wenn ich diesen Absatz hier reinziehe, okay, es geht, in Ordnung, CO, zwei Dinge. Also werden sie in verschiedene Netze gehen. Wenn ich weiterhin Dinge zu diesem Raster hinzufüge, wird es immer wieder Sachen zum Raster hinzufügen und es einfach in die nächste Zelle verschieben. Das wollen wir nicht. Wir wollen sie nur zu diesem ersten hinzufügen. Wer erinnert sich daran, was wir getan haben , um sie beide da reinzubringen? Das stimmt. Wir gruppieren sie gerne zusammen. Und das wird hauptsächlich hier funktionieren. Und dann wird es auf etwas Zukunftswissen zurückgreifen , das ich hier schnell durchgehen werde schnell durchgehen , und wenn Sie es nicht verstehen, ist es okay, weil es Teil des späteren Kurses ist. Ich habe mich mit diesem Modell selbst in ein Loch gesteckt. Wir wollen uns also daran erinnern, dass wir ein div-Tag hatten, einen Div-Block. Wir stecken es rein. Ich lege es einfach hier hin und dann legen wir den Schlag rein. Und wo sind die Überschriften darin. Da ist also mein Diblock. Okay, und ich werde auch einen Absatz für beide zusammen einfügen. Also waren sie drin, ich werde die anderen loswerden. Und normalerweise, wenn du den Diblock in das Gitter legst , okay. Wo ist es? Ich kann nicht wirklich sehen, dass es dort mein Raster ist. Okay? Ich klicke auf die ganze Oma Diblock. Mache ich es tatsächlich so oder so? Lass es uns hier im Navigator machen. Ich schnappe mir den Diblock, lege ihn in mein Gitter und er wird nicht verschwinden. Dann werde ich sicherstellen, dass es ein wenig eingerückt ist, also ist es drinnen. Schau dir das an. Okay, die beiden können also dasselbe belegen, aber du sagst: Was ist mit diesem Raum? Das ist der knifflige Teil hier. Wir werden etwas namens Flexbox verwenden, zu dem ich einen ganzen Abschnitt habe, zu dem ich führen wird. Aber im Moment können wir es einfach lassen, weil ich gerade herausgefunden habe , dass wir hier eigentlich keinen Absatztext haben, aber es könnte eine Schaltfläche geben, die das gleiche Problem hat, aber wir haben es behoben. Wir haben diese beiden in einem Div-Block zusammengebracht , innerhalb dieses Gitters. Das dort rüberzuschieben ist bei einem Raster ziemlich schwierig. Nur weil ich ein lustiges gemacht habe, habe ich eine Art maximale Breite gemacht und ich möchte eine Zeile schreiben, aber es ist in einem Div-Block, was ein Grid nicht wirklich mag. Also könnte ich sagen Kind UB, richtig ausrichten, richtig ausrichten. Es funktioniert nicht. Ich gehe mit der Option darauf klicken. Ich klicke darauf, um es loszuwerden. Und was wir hier mit diesem doppelten Wechsel zu Flexbox tun können. Flexbox soll vertikal sein und ich möchte sie richtig ausrichten. Du sagst, was ist Flexbox? Das ist für später, wenn du es jetzt reparieren willst , tu das. Okay. Es ist das Gegenteil von Grid. Grid ist fantastisch und erledigt die meisten Jobs, bis sie es nicht mehr tun, dann brauchst du Flexbox. In diesem Fall ist es ziemlich einfach. Du gehst einfach vertikal und schaltest es auf Ende. Also richtet es es auf seiner Seite aus. Aber genau darüber werden wir im Moment über Flexbox sprechen . Wir werden gleich auf sie zurückkommen. Ordnung, also haben wir K-Raum für den Zeilenabstand zwischen unseren vertikalen Linien gemacht. Wir haben Leerzeichen zwischen Buchstaben gemacht als Leerzeichen nach Absätzen, Kopieren und Einfügen, okay, Mitglieder nur Rand. Und dann haben wir das Design in unserem Grid ausgebrochen, aber wir haben es repariert, indem wir es in einen DIV-Block eingewickelt haben. Dann haben wir mit Flexbox etwas gezaubert, aber das ist für später. Ordnung, das ist es. Wir sehen uns im nächsten Video. 43. Text- und Box im Webflow: Hallo zusammen. Wir schauen uns die Schatten an. Dieser Text hier, behalte ihn im Auge. Wir zeigen Ihnen, wie Sie einen Schatten hinzufügen, damit Sie ihn vorher und nachher vom Hintergrund schieben können. Okay, wir werden ein bisschen verrückt und kommen direkt in den vollen Schatten, wo es mehrere Schatten gibt. Einige von ihnen waren weiß, manche sind dunkel. Und wir schauen uns auch Kastenschatten an. Also entweder auf Buttons oder wir haben es auch hier oben. In der Navigation sieht man es dort kaum. Es gibt einen Shedder. Lassen Sie mich Ihnen zeigen , wie man beide herstellt. Mit beiden meine ich Text und Bücherregale. Es wird langsam da. Okay, fangen wir mit der Textur an. Es ist ganz einfach. Entscheiden Sie, wo Sie möchten, welche Klasse Sie sich bewerben möchten, und denken Sie dann an Option Alt, klicken Sie auf den Chevron, um sie alle zu schließen. Ich werde diese Abkürzung bald beenden. Jede Menge Male. Hoffentlich kommt es da rein. Aber weiter zur Typografie, ich sage „Mehr Optionen“. Und dann unten, tickt Schatten, leichter, schrecklicher, schrecklicher Schlagschatten. Es ist wahrscheinlich besser bei diesem Design hier, okay, als wir es vorhin gemacht haben. Ich mache dasselbe und erhalte einen Textschatten. Und was ich eigentlich tun werde , ist, dass ich es dort lassen werde , weil wir jetzt einen Schatten haben, wir können einen Teil der Dunkelheit in dieses Hintergrundbild verringern . Aber auf diese Weise sind wir schon lange her. Ich kann, ich werde es verstecken , weil ich es wieder einschalten will . Wir werden es löschen. Aber jetzt mit ein bisschen Schlagschatten können wir es irgendwie sehen. Schauen wir uns jetzt auch unter Typografie um. Jetzt. Wenn Sie es erneut bearbeiten möchten, klicken Sie einfach auf das Wort. Okay? Und die Grundlagen, Sie können dies für die Entfernung ziehen. Es ist ein bisschen schwierig, beide zu vergrößern. Es ist ganz hier drüben. Tut mir leid , der Winkel, in den es gehen soll. Okay. Oder du kannst das benutzen, um herumzuspringen. Ich weiß es nicht. Ich mag es hinzufügen, wenn AT so irgendwie gerade nach unten zeigt. Und ich mag es im Moment nicht wirklich, dass sich die Dinge geändert haben. Schlagschatten-Stile. Ich mag die Unschärfe nicht zu hoch und ich mochte die Entfernung ziemlich niedrig, nur um ihr eine wirklich durchgezogene Linie zum Herausdrücken zu geben. Okay. Und dann kann das Schwarz hier oft zu dunkel sein als was für ein Bein tiefer, um einen Teil des Hintergrunds durch Absenken des Opazitätsschiebereglers hier zu lassen . Ordnung, du kannst noch ein bisschen weiter gehen. Lass uns hier drüben, dieser schreckliche. Was wir tun können, ist tatsächlich zu haben, und wir machen es besser ish, Sie können tatsächlich mehr als eine Textur haben. Also zuerst gehe ich zu, ich gehe zu meiner 180-Entfernung bei einem Pixel und die Unschärfe bei ein oder zwei abhängig von vielleicht zwei. Und ich werde die Farbe verringern aber nur um einen Hinweis zu haben, vielleicht werde ich das Blau los. Klicken Sie auf Aus. Klicken Sie hier zurück, klicken Sie hier rein. Also den blauen Vektor, du kannst tatsächlich einen weiteren hinzufügen. Also werde ich einen weiteren Textschatten hinzufügen, um mich zusammenzutun. Und manchmal ist es ganz schön, einen ziemlich starken internen zu haben und dann einen richtig großen, flauschigen. Wir haben eine sehr geringe Deckkraft. Heb weiter ab. Okay, also da ist der da. Dieser hat keine Distanz. Entfernung gibt an, wie weit sie entfernt ist. Du kannst entscheiden, was du tun willst, okay? Aber ich werde eine Strecke zurücklegen, immer noch ziemlich niedrig. Aber die Unschärfe, kannst du anfangen, sie zu sehen? Vielleicht wünschen Sie sich das nur, aber mit doppelten Schatten können Sie den Schnitt bekommen, den Sie brauchen, aber dann können Sie ihn etwas mehr vom Hintergrund abheben. Ich werde die Deckkraft verringern. Ist das cool? Ist das nicht? Lass uns einen Blick darauf werfen. Geh mit dem Nichts. Lass es uns ausschalten. Ich schalte es ein und aus. Sie müssen wirklich nur die Wahltaste oder die Alt-Taste drücken, um es zu deaktivieren, und dann Ihr Undo und Redo verwenden, das auf einem Mac Command Shift Z ist. Aber eine Gymnastik mit den Finger oder Control Shift C. Verwenden Sie einfach das dann. Okay. Da hast du es. Gefällt es mir? Ja, lass es uns richtig machen. Du kannst ein drittes hinzufügen, lass es uns tun. Dann noch einer, und es muss nicht schwarz und weiß sein. Okay? Und Sie können anfangen zu sehen, nun, machen wir es und es macht die gegenüberliegende Seite und ziehen einfach den Winkel über diese Seite, um diese Seite zu verbessern und sie aus diesem verschwommenen Hintergrund herauszuschneiden. Das Blau wird auch ziemlich niedrig sein. Ich will ein bisschen Glanz auf dieser Seite. Was denkst du? Gutes Bett. Es könnte schlimm sein. Nun, wenn es um diese Art von Schatten geht , lassen Sie uns den Winkel auf diese Weise machen. Und ich denke, ich muss es ein bisschen senken. Ich lasse es hoch, weil ich dir etwas mit der Auswahl und dieser Ebenenreihenfolge zeigen möchte . Das wird also zuerst gesehen, was großartig ist. Du hast es vielleicht schon früher gemacht. Und kannst du sehen, ob es die Rückseite ist, die von den anderen Schatten bedeckt ist? Diese beiden spielen keine Rolle, weil sie beide schwarz sind und beide versuchen, dasselbe und die Art der Mischung zu machen, während dieser hier eine ganz andere Farbe hat. Okay, also muss ich sichergehen, dass es ganz oben ist. Und ich werde die Deckkraft verringern, um diesen kleinen Hinweis zu erhalten . Sie haben es wahrscheinlich online gesehen. Du magst einfach etwas Seltsames daran. Der Text. Ich bin mit dem Schatten darunter nicht zufrieden, aber ich werde ihn belassen, weil es daran liegen könnte warum ich sowieso das geringste ziehe, das sind Schlagschatten auf Text. Schauen wir uns an, wie wir es mit Boxen machen . Werde es mit einem Knopf machen. Warum nicht? Weil ich diesen Absatztext nicht brauche. Ich brauche allerdings einen Knopf. dies ausgewählt ist, gehe ich zu Command E oder Control E auf einer PC-Typ-Enum-Taste. Um den Button zu benennen. Ich denke, ich habe vorhin eine Button-Klasse erstellt, die BY kommt. Haben wir. Und es ist diese Farbe. Ist es die richtige Farbe? Jedenfalls? Lass es uns stehen. Lass uns einfach den Schatten machen. Der Schatten ist nicht in der Typografie, sondern unter Effekten und Kastenschatten. Okay, jetzt, will ich den generischen Button stylen , ist die Frage, nun, lass es uns einfach einschalten. Du gehst in den Schatten. Alles andere sieht genauso aus. Es gibt noch ein paar andere kleine Optionen, bevor wir loslegen und über Klassenbenennungen sprechen, die Größe k haben. Wenn Sie jemals eine Verbreitung auf Dingen wie Photoshop und Illustrator gesehen auf Dingen wie Photoshop und haben, das gleiche wie das. Also Entfernung, wie weit sie entfernt ist, verschwimmen, wie verschwommen sie ist und wie groß sie ist. Es ist wie diese ganze Sache. Drückt es die Kanten oder ist es wirklich gerade? Du kannst wirklich flauschige machen, was du mit dem Text nicht machen kannst. Nur etwas , das nicht nützlich ist. Du kannst es drinnen machen, um es zu finden. Okay, sagen wir mal, ich möchte etwas Nettes machen. Ich werde meine Marine machen, weil ich das mag. Ich gehe auf eine Entfernung von eins, Schicht von eins und die Größe von Eins. Und ich werde diese Farbe verringern, nur um einen Hinweis zu geben. Was stimmt nicht daran? Irgendwas ist damit los. Die Tatsache, dass ich überhaupt einen Schatten habe, muss vielleicht etwas verschwommener sein. habe sowieso kein gutes Chateau de , ich mag Schatten nicht wirklich. Hundert Dollar das oder ich weiß nicht, ob ich etwas Gutes verdienen kann. Und lass uns reden. So bearbeitest du es also, oder? Lass uns darüber reden, ich werde alles los. Also gehe ich auf Wahltaste oder Alt-Klick. Okay, wo wende ich es an? Kiste. Und dieser Kastenschatten kann immer wieder verwendet werden. Es ist also wahrscheinlich am besten als globales Produkt. Ich werde dieses verrückte Ding nicht anders verwenden als den Marketing-Teil meiner Homepage, okay? Sonst würde ich es zu einem globalen Stil machen. Was ich tun werde ist, mir eine Kiste zu schnappen. Es wird einfach alles Mögliche sein. Okay. Nur ein winziger alter ist in diesem Fall ein Debulking oder eine Arbeit, egal, das wird Box-Shadow genannt , weil sie es so nennen. Und es sollte einfach sein, die Suche mit dem Wort Schatten zu finden. Das heißt, ich kann es mehr als nur diesen Button anwenden. Ich kann es für alle möglichen Dinge verwenden. Wenn ich es anpassen muss, kann ich dieses globale anpassen und es wird einfach auf der gesamten Website angezeigt, okay, falls ich mich entscheide, falls ich mich entscheide, manchmal hast du dich für einen Schatten entschieden und wachst am nächsten Tag auf, du sagst, warum gibt es da? Also box-shadow und arbeite es dann so aus. Okay, also werde ich das entscheiden, dieses, das Null ist, es wird etwas niedriger. Aber wenn du es so machst, bedeutet das, dass ich es löschen werde. Ich kann es wie diese zusätzliche Bande anwenden. Ich kann also sagen, dass Shadow hier ihren Box-Shadow macht. Wenn ich es auf andere Dinge wie diesen Nav-Box-Schatten anwende, gehen wir, ich kann gehen und das holen. Global One, um den globalen anzupassen wird später ein Stil erstellt , also sind sie alle darauf. Im Moment. Wir können es uns einfach schnappen und Box-Shadow holen. Und wenn wir eine Anpassung daran vornehmen, machen wir es auf Distanz. Kannst du es bemerken? Macht es für alle, nicht nur für diesen. Gutes altes globales Zeug. Los geht's. Und das ist Texts. Gut in diesem Fall. House, schieb es ab. Dieser hier. Das ist die Push the Limits. Und was für ein guter Drop Shadow sein sollte. Und dann haben wir uns Box Shadow angesehen . Wir haben es für eine Schaltfläche gemacht, aber es funktioniert für jede Art von Box-Element. Ordnung, das war's. Wir sehen uns im nächsten Video. 44. Wie man globale Uhren in Webflow erstellt: Hallo zusammen. In diesem Video werden wir uns Farbfelder ansehen. Kannst du hier unten sehen, ich habe einige vorgefertigte Farbfelder bereit, Markenrichtlinien, Farben, Unternehmensfarben. Das Coole an ihnen ist, dass Sie sie , sobald Sie sie als globale Farben eingerichtet haben, was sehr einfach ist, sie und alle damit verbundenen Farben durchgehen und ändern können . Kannst du sehen, dass sie sich alle gleichzeitig ändern? Super praktisch. Ordnung, also lasst uns einsteigen und globale Farbfelder erstellen. Und am Ende werden wir in diesem Video ein bisschen von unseren Schriftarten zu zwei für eins aufräumen . Ordnung, gehen wir. Hallo zusammen. Lassen Sie uns ein globales Farbfeld erstellen. Würde es schnell machen und dann werden wir es ein bisschen genauer aufschlüsseln. Ich mache es mit Command E oder Control E auf einem PC. Und ich tippe div. Ich werde jetzt einfach einen Festplattenblock aufwerfen anstatt hier oben etwas anzupassen, okay, also brich es mit dem ausgewählten. Ich werde in diesem Fall Hintergründe erstellen und meine Unternehmensfarbe auswählen , die ich verwendet habe, oder zumindest die aus dem Design. Okay, und dann klicke darauf, dass mein Freund ein globales Swatch ist. Es endet dort. Es hat ein kleines Etikett drauf. Es ist irgendwie das universelle Symbol für Global. Es hat ihm einen Coup-Namen gegeben, und so macht man es. Klicken wir auf Erstellen. Es heißt nur, wenn ich später etwas anderes wie dieses Navi erstelle und du sagst, oh, ich möchte dieses Rosa benutzen. Ich muss mein Pipettenwerkzeug nicht benutzen oder es eingeben. Ich kann einfach auf dieses wiederverwendbare Farbfeld klicken, das globale Farbfeld. Lass es uns noch einmal machen, ein bisschen langsamer, weil ich möchte, dass du verstehst, was das alles tut. Schauen wir uns den Hauptpunkt eines globalen Farbfelds an und nicht nur ein normales Farbfeld. Und ein globales Farbfeld bedeutet, wenn ich hier unten auf dieses klicke und in meine Farbe gehe, und ich gehe zu diesem Bild mit der Aufschrift Edit. Ich bearbeite das globale Farbfeld, das derzeit Hot Pink heißt. Und sieh dir das an, wenn ich das ziehe und ändere. Kannst du sehen, dass es darauf angewendet wird? Okay, und das ist verbunden , deshalb ist es global. Das heißt, wenn ich hier unten eine Anpassung vornehme und der Kunde am Ende eine etwas andere Farbe auswählt, habe ich dieses globale Farbfeld immer wieder verwendet. Es wird dann aktualisiert. Es kann auch im Text verwendet werden. Also dieser Text hier, und ich gehe rein und toben und ruiniere alles. Aber der andere gute Punkt ist , dass die Farbe, die wir gemacht haben Background Color Swatch, sie verwenden dieselbe. Das ist also Textfarbe, aber Sie können sehen, dass globale Farbfelder immer noch vorhanden sind. Und wieder kann ich es bearbeiten, egal wo ich nicht bin. Du musst nicht in dieses ursprüngliche Div gebracht werden, aber du kannst eine Änderung sehen, sie ändern sich alle. Deshalb sind Globals praktisch. Es gibt Zeiten, in denen Sie nicht möchten, dass sie verbunden sind. Sie möchten es verwenden, aber sie können angepasst werden , um es etwas dunkler zu machen. Nehmen wir an, ich mache das rückgängig. Sag das hier oben schmal, es muss dunkler sein, nur weil die Textlinks darüber in der Nähe sein müssen, aber ich werde nur die Helligkeit verringern. Was Sie also tun können, ist, das Farbfeld anzuwenden und dann auf dieses zu klicken, um zu sagen, brechen Sie es und ich trenne es einfach gerne. Und jetzt, wenn ich es ändere und dann die Helligkeit der Farbtonsättigung verwende, runter, runter, runter, runter, runter, runter, runter, runter, runter, wieder runter. Ich halte die Umschalttaste gedrückt. Kannst du sehen, dass es keine globale, sondern nur eigenständige Farbe mehr gibt. Okay, schauen wir uns ein bisschen mehr an. Fügen wir noch einen hinzu und wir gehen ihn etwas langsamer durch. Also lasst uns das Blau daraus hinzufügen. Es wurde verwendet, wieder können Sie es einfach aus dem Design ziehen. Sie können diese Hexadezimalzahl verwenden. Du kannst also durchgehen und sagen: Okay, ich werde die Verbindung zu diesem Thema unterbrechen. Ich erstelle ein neues Farbfeld, indem ich es entweder hier eintippe. Okay, komm mit. Da ist mein Blau. Wenn Sie die Zahlen H ist B haben, können Sie sie eingeben. Die meisten Leute werden diese nicht haben, aber vielleicht haben Sie in Ihren Unternehmensspezifikationen oder Ihren Markenrichtlinien RGB. Also klickst du einfach auf einen dieser Typen. Sie können sehen, dass es zwischen RGB und Farbtonsättigung und Helligkeitsschicht umschaltet . Also könntest du das tun. Der andere ist vielleicht, ein Logo einzuziehen und daraus zu ziehen. Also werde ich gehen, was mache ich? Befehl oder Steuerung E? Ich gehe zum Bild, drücke die Eingabetaste und wähle Bild. Ich gehe und lade es hoch. Und es ist nur etwas für mein letztes Projekt. Es ist zum Beispiel eher ein, wo sind meine Sponsoren? Du benutzt meinen. Da ist also mein Logo. Und du kannst, wenn es ausgewählt ist. Lass uns eigentlich auf dieses Ding klicken. Ich werde eine neue erstellen, die jemand machen wollte. Ja. Okay. Also benutze ich mein Pipettenwerkzeug ziehe es aus dem Logo. Okay, jetzt kann ich daraus ein globales Muster machen und das wird mein BYOL sein. Bei grün. Sie können die Standardeinstellung verwenden. Es ist erstaunlich, wie die Farben benennen , dass es dort unten funktioniert. Es gibt kein wirklich gutes. Jedes Mal, wenn ich auf etwas klicke, ist es wie, oh ja, ich denke, es ist ein großartiger Name dafür. Während ich das tue, füge ich Weiß am Ende meiner Farben hinzu. Ich gehe. Das ist orange. Um die Tatsache zu umgehen, dass ich keinen wirklich guten Namen für mich habe. Also Workfare, Workflow, Sie könnten es von dort aus ziehen. Okay, die andere Sache, die wir tun könnten , ist, dass Sie mit einem Dokument arbeiten. Ich habe diesen aus unserer Fragmentklasse geöffnet, je nachdem, wer Ihr Projekt erstellt hat, haben wir es gemacht, jemandem wie Ihnen jetzt als Workflow-Designer oder Entwickler zu übergeben , und Sie kann diese Farben hier sehen. Ich habe diesen kleinen Schritt gemacht , um es ihnen leicht zu machen. Was ich für mich tun kann, ist zu Inspect zu gehen, wie wir es zuvor getan haben. Ich kann darauf klicken und da ist die Hexadezimalzahl. Hicks ist seltsam. Es ist nicht seltsam. Es ist eigentlich RGB. Die ersten beiden Buchstaben stehen für die zweiten beiden Buchstaben G, neben der Hexadezimalzahl. Es ist eine Art webbasierte Version, obwohl Webbenutzer jetzt auch RGB haben, habe ich es auch für die Person eingegeben , die es möglicherweise verwendet. Okay, du kannst es hier unten im CSS sehen. Zweitens, schnappen Sie sich eine dieser Bohnen darüber, wie fleißig die Person ist, die das Projekt vor Ihnen durchführt Vielleicht erhalten Sie einen anderen großen Styleguide. In meinem Fall ist es ziemlich einfach, als wir es gemacht haben, im letzten Kurs machen alle Guides es ein bisschen praktisch an einem Ort. Sie können es auch hier sehen. Bisher haben wir nur Primär -, Sekundarstufe und Akzent gesetzt. Sie können jedoch sehen, dass Sie primäre 12.3 für die verschiedenen Farben verwenden können . Es hängt davon ab, wie komplex Ihre Designer sind. Dieser hier benutzt nur diese beiden Farben. Also gut, zurück zu Figma, zurück in den Holzboden. Kannst du jetzt gehen, ich füge einfach den Rest der Farben für mein Projekt weil ich dieses Grün eigentlich nicht will. Wie löscht man sie? Bevor du gehst, ist das eigentlich gut. Habe ich dieses erstellt ist schon erstellt. Und lass uns das löschen. Ich schnappe mir mein Blau, dem ich bereits weiß, dass es hier oben ist. Okay, wenn ich es hinzufüge, nenne ich das hier und ich nenne das Himmelblau. Toller Name. Ich habe ein cremefarbenes Weiß und den Hintergrund hier. Okay, also werde ich gehen und ein anderes erstellen. Und ich werde hoch auf dich zugehen. Und kannst du das sehen? Ich habe es falsch gemacht. Also habe ich dieses Farbfeld erstellt und dann geändert und es ist immer noch himmelblau. Also sage ich das ab. Ich werde darauf klicken. Dann machen Sie die Pipette , um die richtige Farbe zu erhalten. Dann schlag plus weißer Rauch, cool, großartig. Nennen Sie sie leicht beeindruckt. Und denken Sie daran, wenn Sie es abbrechen müssen , damit es nicht mit dem Globalen verbunden ist, sodass es nichts anderes ändert. Mach das. Und wenn Sie die globale bearbeiten, auswählen lassen, zu etwas bearbeiten und dann auf diese Option klicken müssen, können Sie sie ändern Abbrechen, weil mir diese gefallen. Ich füge einfach ganz schwarz und schlichtes Altweiß hinzu. Mach es tatsächlich richtig herum. Also werde ich gehen und es dann in die Ecken ziehen. Wenn, wenn, wenn wir bei diesem weiß werden, und dann werde ich ganz schwarz machen. Eigentlich habe ich noch ein paar andere Farben hier drin. Es ist dieser hier. Es ist irgendwie blaugrau, das ich gemacht habe. Los geht's. Den schnapp ich mir. Also lass uns gehen und das dich ausgewählt und ich tippen irgendwie darauf, dass es sich tatsächlich ändert. Sie gehen zu dir. Und leicht dunkles Schiefergrau. Blau-grau. Danke. Figma. Jetzt sind diese beiden wahrscheinlich zu nah dran. Ich werde sie neu bestellen. Sie können sie nicht nachbestellen. Könnten Sie sie verwenden, um sie nachbestellen zu können? Vielleicht tun sie das nicht. Diese beiden stehen sich sehr nahe. Ich habe das Gefühl, dass ich versehentlich auf beide klicke. Was ich jetzt wirklich tun möchte, ist sie alle zu löschen und weiß direkt am Anfang haben und etwas Abstand zwischen ihnen zu haben. Und benutze diese Art von Rauchweiß ein bisschen weiter. Aber ich werde es für den Moment belassen , weil es genug hat. Okay, und das Letzte, was ich tun werde, es hat nichts mit Farben zu tun. Ich muss es nur für den Rest dieses Kurses machen. Und wegen der Schrift werde ich diesen Kampf um das Ändern der Schriftarten die ganze Zeit führen. Wir haben es hier für die Überschrift geändert. Wir haben es für unseren H1, X1 gemacht. Wir haben das öffentlich sinnvoll gemacht, okay. Und dann dieser Button zu y, dann füge ihn auch zum Button hinzu? Nein, denn wenn ich mir mein Design ansehe, verwende ich in diesem Design nur den öffentlichen Sinn. Also was ich tun werde ist, wer erinnert sich? Wie ändere ich es global für alles auf allen Seiten, überall, okay, und weniger vorbei und es ist der Körper. Klicken Sie also oben hier oder draußen. Ich werde das Bild ändern. Woher bezieht es es? Denken Sie an Shift, Click, Buddy oder Seiten. Also nicht dieser Körper. Hier gibt es einen Stil. Ich muss das entfernen und wieder hinzufügen. Okay, ich mache gerade diese Studie. Es ist eine gute Sache. Ich habe diese Körperklasse hier und du sagst, was macht sie? Nun, ich weiß es nicht. Ich schaffe es nicht Ich habe es nicht geschafft. Ich weiß es einfach nicht. Es hintergründet diese Farbe. Anstatt das Problem zu haben das Body-Tag mit einer Klasse, die Sie benannt haben, oder zumindest Webflow in Ihrem Namen namens body benannt zu haben und diese Farbe hinzuzufügen, ist das in Ordnung. Das Problem wird sein, dass Sie auf der nächsten Seite, die wir erstellen, diesen Stil darauf anwenden müssen. Und eigentlich werde ich diese Klasse einfach entfernen. Ich gehe drauf klicken. Ich werde sagen, dass alle Body-Tags einen Hintergrund davon haben. Seltsam, dass sie sich beide beworben hatten und du sagst, das war eine große Zeitverschwendung im Unterricht. Und unter Topographie werde ich nicht Arial sagen, ich sage meinen öffentlichen, öffentlichen Sinn. Okay? Was ist die Standardeinstellung? Und wir verwenden normal und dann überschreibe ich es bei allen anderen Stilen. Es bedeutet also, dass mein Schaltflächentext hier jetzt schwer zu sehen ist, aber wenn ich ihn durchgehe, können Sie alles sehen , was Text in diesem Dokument ist , sofern nicht anders angegeben, es wird öffentlich Sans normal. Und ich werde mir die Größe der Körperkopie ansehen, die ich verwende. Was ist die gängigste Größe, die ich verwende? Ich versuche es hier auf meinem Design zu finden und zoome heraus. Das ist die App, das wird meine Körperkopiegröße sein. Was habe ich entschieden? Viel Herumspringen. Ich weiß, dass das meine gängigste Größe sein wird. Es werden 16 sein. Also werde ich sagen, dass mein alter Buddies-Tag 16 sein wird. Und die Zeilenhöhe, wobei die Zeilenhöhe 26 ist. Ich gehe hier rein und tippe 26 ein. Sie stellen fest, dass sich das geändert hat. Daher ist es wirklich wichtig, die Körpermarke frühzeitig zu da Sie diesen Knopf am Ende perfekt starten werden. Es benutzt es hat gewisse Zeilenhöhe, weil wir Text darin verwenden. Also du 24. Lass es uns wirklich klein machen. 12, Sie sehen, dass sich die tatsächliche Größe der Schaltfläche ändert. Machen Sie also zuerst all diese Dinge richtig, das Body-Tag zuerst nach unten und gehen Sie dann in Bezug auf die Textfarbe durch. Sprich weiter mit dem falschen. Ich benutze, nicht schwarz, ich benutze dieses a3. A3, z3. Siehst du, ich sage Body-Tag oder Seitentext, es werden drei sein. Siehst du, sehr ähnlich dem, was wir hatten. Und das war's. Oder Body-Tags sind fertig, haben eine Klasse losgeworden. Eine andere Sache, die wir jetzt tun könnten, gerade während wir hier sind, sind wir, sollten wir oder sollten wir nicht? Wir haben gesagt, dass dies öffentlich verständlich ist. Denken Sie früh daran, dass wir das nicht mehr brauchen. Also könnte ich es durchgehen weil es kommt , wenn ich die Umschalttaste gedrückt halte und auf den Umschlag klicke und sage, dass es von den Überschriften H1 oder H2 H1 kommt . Ich bearbeite es dort. Ich sollte es durchgehen und entfernen. Sollte ich nicht müssen. Das ist einfach wie, ich weiß nicht, OCD. Aber ich versuche Ihnen zu geben , dass das, was Sie tun sollten und was ich wahrscheinlich in der Praxis mache, nicht dasselbe ist. Ich lasse es wahrscheinlich einfach. Okay, aber ich klicke hier unten, Command E, drücke und wirf es rein. Und Sie können sehen, dass ich mein Überschriften-Tag haben möchte und ich werde sagen, dass es auch aktuell ist. Es ist witzig, als würdest du None treffen wollen. Das ist meine natürliche Reaktion. Es ist nicht das, was ich tun will. Ich will es ausschalten. Ich erinnere mich, dass du Alt oder Option gedrückt hast, um zu sagen , tu nichts, tu nichts. Und es ist wie, Hey, aber es ist wieder in den öffentlichen Sinn zurückgekehrt. Aber durch dieses Drücken wird nicht gesagt, dass es sich um öffentliche Sans handelt, ich halte die Umschalttaste gedrückt und klicke darauf. Es kommt jetzt von meinem alten Buddies-Tag, macht das Sinn? Es bedeutet nur, dass später , wenn jemand sagt, Ordnung, wir benutzen keine öffentlichen Sans, Arial benutzen, weil wir zwei haben die dir die Überschriften für die Fahrt geben, nicht nur, dass wir das tun müssten getrennt. also nur versuchen, Ihnen zu geben, dass Sie das tun sollten , was Sie bedenken , wenn Sie diese Dinge tun, müssen Sie manchmal zurückgehen, nur um die Dinge aufzuräumen, es fühlt sich gut an. Ordnung, Farbfelder und etwas Topographie haben sich da rein geschlichen. Ordnung, das war's für das Video. Ich sehe dich beim nächsten. 45. Was ist das Farbkontrastverhältnis in Webflow: Hallo zusammen. In diesem Video werden wir uns das Kontrastverhältnis ansehen. Im Grunde bedeutet es, wie lesbar Ihre Texte im Vergleich zum Hintergrund sind. Und es hat mit der Farbe, der Größe Ihrer Schrift und dem Gewicht Ihrer Schrift zu tun . Sie erhalten eine bestimmte Zahl und eine bestandene Note. Es hat AAA. Wer, wer? Lassen Sie mich Ihnen zeigen, wie es funktioniert und was es für Ihre Website bedeutet, es zu ignorieren. Ordnung, Kontrastverhältnis. Nun, fangen wir hier mit dieser Überschrift an. Also wähle ich es aus und du beschäftigst dich mit dem bewussten Radio, mit Typografie und der Farbe K und nicht mit den Hintergrundfarben. Also habe ich diesen ausgewählt. Ich werde darauf klicken. Es zeigt mir, dass ich mit diesem globalen Farbfeld den Test bestehe. Es ist ein AAA K. Es ist ein wirklich guter Kontrast zwischen der Vordergrundfarbe, die meine leichte ist, und der Hintergrundfarbe, die mein Rauchweiß ist. Sie werden sehen, wie diese Zeilen hier auftauchen , wenn Sie sich fragen, was sie sind. Sie sind die bewussten Verhältnislinien. Sie können also sehen, dass ich ein AAA bin. Wenn ich es nach oben verschiebe, kannst du sehen, dass ich in der WBS bin und darüber ist Phi. Okay, das wird als nicht genug Kontrast angesehen , um vor dem Hintergrund lesbar zu sein. Jetzt versuchen wir, für alle Formen und Größen und unterschiedliche Sichtfähigkeiten zu entwerfen . Dafür hilft uns das, was uns hilft, ist ein wenig restriktiv in Bezug auf das Design. Schauen wir uns das rosafarbene hier an. Also dieser pinke Knopf hier, es ist nicht der Hintergrund. Sie werden das Kontrastverhältnis nicht finden. Und hier hat es mit der Typografie zu tun. Also muss ich die Topographie finden, die sich mit dem befasst, denn im Moment sagt es mir, dass schwarzer Kuchen herkommt. Wenn ich bei gedrückter Umschalttaste darauf klicke, wissen wir, dass es weiß ist. Ich kann dich sehen. Du bist weiß. Okay. Der Weg, das zu verfälschen, ist dass ich es einfach schnell in Weiß ändere. Nun füge dieser Klasse als Bhatia-Klasse hinzu, nur zu Weiß, nur damit ich sehen kann, wie schlimm es ist. Und es ist die schlimmste aller Wetten gegen diese rosa Farbe, mein Hot Pink. Es heißt, dass das wirklich ein Fehlschlag ist und um in die Nähe zu kommen, muss es im Grunde schwarz sein. Das ist also der Kompromiss, den wir hier für diesen speziellen Button eingehen müssen , weil es ein ziemlich wichtiger Button ist. Also müssen wir es auf unser Schwarz umstellen. Wir werden das benutzen oder es schlägt gerade noch fehl. Das tut es nicht. Es ist ein Punktesystem. Es gibt hilfreiche Eins und Doppel-As. Es gab hilfreiche WA ist AAA. Du wirst dir diese Zahl hier wirklich ansehen, wie gut oder wie schlecht sie ist. Offensichtlich wird etwas , das so ist , schwer scheitern , weil ich es nicht sehen kann. Es ist ein kostenloses Bett. Okay. Und es ist gut darin hier. Wie schlimm ist es gescheitert? Nicht 100. Weißt du, du magst es nicht, das Internet zu verlieren, wenn es darunter liegt. Aber dies ist ein netter Maßstab, der Ihnen hilft, ein Gefühl dafür zu bekommen, wie nah oder weit Sie sich erinnern Möglicherweise können wir mit der Schriftgröße und der Schriftstärke herumspielen, um das Kontrastverhältnis durcheinander zu bringen. Es ist also interessant, ich könnte mich dafür entscheiden die Doc-Takes tatsächlich auszuführen und vielleicht dafür zu sorgen, dass der Knopf eine Linie um die Außenseite hat, anstatt eine volle Farbe, wie einen Rand um die Außenseite. Aber zu sagen, dass es sich ziemlich einschränkend anfühlt die Art von Caliban, die Sie verwenden können , wirklich zusammendrückt. Offensichtlich werden es Fälle sein, in denen es zu 100% so gut wie möglich zugänglich sein muss . Vor allem, wenn Sie diesem Suchmaschinentraum nachjagen. Und Sie haben es mit einem breiteren Publikum zu tun. Wenn Sie etwas viel Künstlerischeres oder Kreativeres tun und versuchen, die Grenzen zu überschreiten. Das Kontrastverhältnis ist schwierig nur damit Sie wissen, dass es Dinge gibt, die Sie für bestehende Websites tun können, Beispiel ist es schön hier, dass sie diese Option haben. Aber Sie können zu Google gehen und einige Optionen haben, wo, sagen wir, ich möchte das testen. Gehen wir zurück zu, ich mache es rückgängig. Also bin ich wieder bei meinem weißen Text und mache, tue und tue. Okay. Ich lasse es dort. Und ich werde die Seite veröffentlichen, weil Google sehen muss, dass sie krank veröffentlicht wurde, die Domain. Und das sind im Allgemeinen praktische Tools. Also ist es veröffentlicht. Ich nehme den Link, kopiere ihn und füge ihn hier in diesen ein. Web Dev Slash Measure ist ein guter allgemeiner Überblick über eine Website. Wir werden hier nicht alles durchgehen. Es liegt weit außerhalb des Rahmens dieses Kurses, aber wir werden uns die Barrierefreiheit ansehen, um zu beweisen, dass das Kontrastverhältnis nicht ignoriert wird, da Google weiß, dass es sehr einfach ist. Geht und indexiert Ihre Seiten und sagt, okay, Sie erhalten weniger Informationen und Sie versagen wie Ratten die Barrierefreiheit angenommen haben. Und wo ist es? Los geht's. Schaltfläche „Jetzt“. Es weiß es. Es ist ein geringer Kontrast , sodass Sie durchgehen und mehr herausfinden können. Aber das ist der Nachteil, dass Sie Barrierefreiheit sehen können. Es ist ein Teil davon. Sie haben es nicht an das Ende der Such-Rankings gesetzt . Es ist bei 84, es ist gelb, es ist nicht. Okay, aber es ist nicht grün. Du musst also entscheiden, was dein Projekt macht und wie sehr du dem nachjagen willst, okay? Alle Kontrastverhältnisse. Manchmal ist der Text nur dekorativ und er ist ein kleiner Teil eines großen, weil unserer ziemlich niedrig ist, weil es so ist, als hätten wir nicht viel auf unserer Website. Dies nimmt einen ziemlich großen Teil dessen ein , was verfügbar ist. Also alle Arten von Call-to-Actions, alle wichtigen Tasten sollten gute Kontrastverhältnisse haben und einige mehr Dekorationsartikel brauchen es vielleicht nicht so, aber hier ist ein kleiner Teil davon. Ich mochte es sowieso nicht, es ist jetzt ziemlich hell und der Schlagschatten läuft irgendwie. Aber du warst gerade dabei, du denkst vielleicht, dass es das nicht wert ist, für das Extra, welche Stilpunkte du anstrebst. Ich wandere. Ordnung, das ist es. Das ist das Kontrastverhältnis. Wir sehen uns im nächsten Video. 46. Hintergrund in Webflow: Hallo zusammen. In diesem Video werden wir uns ansehen wie wir diesen Farbverlauf unten einfügen. Ich zeige dir, wie man es hinzufügt. Zeige dir auch einige coole Orte, an denen du deine von anderen Websites bekommen kannst und wie du sie von Websites wie Dribble direkt von Webflow ausleihen kannst. Ordnung, lassen Sie uns ein paar Farbverläufe machen, okay, um einen Hintergrundverlauf zu schaffen, werden wir unsere Abschnitte stylen. Also fügen wir einfach einen Abschnitt an der falschen Stelle hinzu und bearbeiten ihn. Alles was es ist, ist im Hintergrund. Wir haben bis jetzt Farbe verwendet, okay, aber da ist dieses kleine Plus hier, auf dem steht. Lass uns eigentlich den Hintergrundverlauf verwenden. Da ist es da, hässliches Schwarz-Weiß-Modell. Um die Farben anzupassen, klicken Sie einfach auf eines der Enden in, okay? Und dann klickst du hier unten auf, okay, also ist er schwarz und du kannst deine Farben auswählen. Ich werde dieses und das andere Ende wählen. Das ist ein bisschen warte auf mich, ich will zurück zu dem Farbverlauf, in dem das Ding auftaucht, du musst irgendwie abklicken und dann geht es irgendwie weg. Du gehst. Da ist mein schrecklicher Farbverlauf. Ich weiß nicht. 1980er Jahre. Es wächst tatsächlich an mir heran. Jedenfalls. So geht es also, okay, an der Jahresbox kannst du es auch mit deinem Knopf machen. Das muss es nicht sein. Wir haben hier eine Farbe, aber wir können ihr einen Farbverlauf hinzufügen. Es gibt ein lineares und unser Radio und Radio, was nur um E1 bedeutet, machen das rückgängig. Die andere Sache, die anderen Dinge sind, es zu bearbeiten, einfach darauf geklickt. Und du kannst mit dem Winkel herumspielen weil ich meinen gleich ändern werde. Sie können diese Pins von links nach rechts umschalten. Das sind also die Grundlagen. Wenn Sie nach guten Farbverläufen suchen, war ich bei Menschen zum Gradienten. Also gradient.com, hier stehen nur ein paar schöne Farbverläufe zur Auswahl. Und wenn Sie eine finden, die Ihnen gefällt, diese hier, klicken Sie darauf. Da ist diese Auswahlnummer. Geh zurück zu Webflow. Ich kann hier klicken und anstelle meines Hot Pink das einfach einfügen und ich kann damit beginnen, meine Farbverläufe auf diese Weise zu erstellen. Sie können eine dritte Farbe hinzufügen. Denn selbst einige von denen, die nach einem greifen, können Sie sehen, dass es drei Farben sind . Sagen wir diese Mittelfarbe hier, ich kann sie anklicken, kopieren, hier reingehen. Und was du tust ist, dass du diese beiden Farben hast. Klicken Sie einfach irgendwo hier rein. Sie können so viele Farben haben, wie Sie möchten. Klicken Sie auf die aktuelle Zeile. Hier unten, füge es ein. Und du kannst drei Farben haben. Eigentlich werde ich schnell durchgehen und das machen. Ordnung, los geht's. Und andere Dinge, die Sie tun könnten. Der Farbverlauf ist also nett. Manchmal ist es gut, sich die Arbeit anderer Leute anzusehen. Dribble ist also ein großartiger Ort , um sich inspirieren zu lassen. Und es gibt immer ein paar schöne Farbverläufe , um die Kreativität in Schwung zu bringen. Und was für ein cooler kleiner Trick ist, ich werde diesen Tab so ziehen, dass es einen separaten gibt, also gibt es meinen Webflow und da ist mein Dribbeln. Also werde ich das Dribbeln kleiner machen. Damit ich es sehen kann. Hey, da haben wir's. Und ich werde Webflow kleiner machen. Das ist ein bisschen wie eine Fenstergymnastik. Möglicherweise können Sie das nicht tun. Wir werden ein kniffliges auf deinem Größenmonitor finden, Schwul. Aber jetzt hier gehe ich zu meinem Gradient. Also habe ich das ausgewählt. Ich werde diese Farbe entfernen. Du klickst einfach darauf und ziehst, ziehst, ziehst und irgendwann verschwindet es einfach. Einfach klicken und eine Weile ziehen . Okay, und lass uns unsere beiden Farben wählen. Ich werde das benutzen, auf diese Farbe klicken und tatsächlich das Pipettenwerkzeug verwenden. Und eigentlich muss ich zuerst etwas finden, das mir gefällt. Also suche ich nur nach Erkenntnissen. Sagen wir, das hat uns gefallen, Eyedropper, such dir das aus. Und dann klicke ich ab, klicke auf dieses Ende. Klicken Sie dort darauf. Sie können die Farbverläufe anderer Personen durchgehen und sich diese anpassen. Farbverläufe sind nicht markenrechtlich geschützt. Ich habe Old Horizons One gestohlen. Es ist ziemlich nett. Also lass uns, ja, du kannst diese Art von Gymnastik machen , um Farben oder zumindest Farbverläufe zu erhalten. Ordnung? Ich werde auch mit dem Abschnitt einfach eine Mindesthöhe hinzufügen, nur weil es schwer zu erkennen ist. Es ist schwierig, diesen Farbverlauf zu erkennen, wenn er fest zusammengedrückt ist. Und wir wissen, wenn wir Command Shift P, Control Shift P zur Vorschau verwenden, können Sie sehen, dass es verschwindet. Also auf einer minimalen Höhe, nur damit wir ein paar Sachen drin haben. Also dieser Abschnitt hier wird kein Abschnittsname sein. Ich werde diesen umbenennen und dieser wird im kalten Bereich niedriger sein , weil ich mir nicht vorstellen kann, wie ich es nennen soll, weil mein Design uns diesen unteren Teil nimmt. Okay, und ich werde dieses Zeug herausstechen und mir einfach einen furchtbar benannten Sektionsliebhaber besorgen. Und geben wir ihm eine Mindesthöhe. Also unter Größe, und denken Sie daran, dass wir keine Höhe verwenden , weil wir clever sind. Wir verwenden eine Mindesthöhe, damit sie sich bei Bedarf vergrößern kann . In Ordnung, das war's. Ich werde jetzt tatsächlich gehen und wow, ich verlasse dich jetzt. Ich werde es in den richtigen Farbverlauf stellen. Okay. Ich möchte das hier reinlegen, aber ja, du gehst zum nächsten Video. Wir sehen uns in einer Sekunde. 47. Navbar full in Webflow: Hallo zusammen. In diesem Video werden wir diesen Heldenbereich hier herausnehmen und ihn so erweitern, dass er in voller Breite geht. Wir machen es auch mit unserer Portfolio-Site. Wir lassen diese Navigations-Whitebox bis zu den Rändern gehen , während ein Abschnitt in der Mitte, den wir für die Navigation beibehalten haben, auch diesen unteren Teil aktualisiert , um einen Abschnitt darin zu haben Schauen wir uns die Erstellung von Navigationen und Containerboxen in voller Breite in Webflow an. Ordnung, schauen wir uns zunächst das vergangene Projekt an. Ich mag einen Club, den wir gemacht haben. Alles befindet sich in einem Behälter. Ich hefte es dort an. Okay. Ich habe also einen Container und alles ist drin und es fühlt sich an, als ob du nur einen Behälter haben solltest . Das stimmt nicht. Es kann viele, viele Behälter haben hängt davon ab, ob Sie möchten, dass alles innerhalb des Mittelteils eingeschränkt wird oder wie unser Design, bei dem die Kopfschmerzen bis zum Ende reichen. Und dieser untere Farbverlaufsteil auch. Fangen wir also mit dieser Navigation an. Hauptsächlich möchte ich Navigationsbereich löschen, den ich erstellt habe. Und ich möchte dir nur unter dem Add hier unten unter Komponenten zeigen , es gibt eine namens Navbar. Wenn ich das zu meinem Design hinzufüge, versuche es irgendwie zu bekommen. Dass ich es verstehe, ist nicht da. Und wenn ich es aus meinem Container ziehe, schauen Sie, was standardmäßig passiert, ist tatsächlich mit diesem Abschnitt in voller Breite strukturiert. Und darin befindet sich ein Behälter, der das Bit für mein Logo und meine gesamte Textschaltfläche enthält. Das ist also schon für uns und diese Struktur erledigt. Das werden wir also wieder aufbauen. Wir werden diese Standard-Navigationsleiste nicht verwenden , da wir nur eine Schaltfläche haben. Wir brauchen also nicht all diese Komplexität hier drin. Also werde ich dich los. Ich mache das rückgängig, bis meine Nav-Sektion wieder da ist. Im Grunde möchte ich mir nur diesen Abschnitt schnappen und ihn aus dem Container bringen, was großartig ist. Jetzt ist es in voller Breite. Mit diesem Container ist wirklich nichts los . Es hat einen Stil von Box-Shadow, aber es ist nicht viel los. Jetzt möchte ich einen Behälter hineinlegen. Also ein okay. Um zu Ed Grad den Container zu bringen, schauen Sie nach, ob Sie ihn im Inneren bekommen können. Und dann sagen wir: Wir haben diesen Abschnitt gemacht. Ich werde hier für den Moment einen Button hinzufügen. Ich schnappe mir diesen, kopiere ihn und steck ihn hinein. Sie können sehen, dass er komischerweise irgendwie in diesem Behälter enthalten ist. So können Sie drücken, einige Stylings für diese gesamte Breite vornehmen, dh in unserem Fall nur die Hintergrundfarbe, aber behalten Sie sie in der Mitte der Site bei. Wirklich gängige Webdesign-Praxis. Dieser hier muss nicht wirklich erledigt werden, weil ich, ich habe keine Füllung für diesen Abschnitt hier, der hier als Abschnitt bezeichnet wird. Es gibt einfach keine Füllung. Der Hintergrund wird also durch k angezeigt und das ist die Hintergrundfarbe, die ich verwende. Sie können also zuerst Abschnitte und Container darin haben . Sie können viele Container haben. Schauen wir uns Apple an. Okay, also dieser hier wäre ein Nav-Bereich mit einem Container in diesem hier, das gleiche. Dieser hier braucht es wahrscheinlich nicht, aber könnte Same hier sehen Sie dass sie sich alle über die volle Breite dehnen. Lassen Sie uns ein weiteres Beispiel dieses Stück unten machen, denn unser Design hat diese Typen in kleinen Miniaturansichten im mittleren Bereich. Okay, also hier drin, ich habe gerade diesen untersten Abschnitt. Nun, das bringt einen guten Punkt zur Sprache. Ich könnte jetzt einfach einen Container werfen, hey, als Container, rein. Und ich könnte anfangen, meine Karten zu bauen , was wir in einer Sekunde tun werden. Okay, das ist in Ordnung. Das einzige Problem ist, dass ich das einen Abschnitt nenne. Und was wissen wir über Sektionen? Was es ist eine der Scheiben für Abschnitte, wenn ich gehe, denn im Moment hat mein Design nichts anderes. Ich habe keine Fußzeile zu diesem gemacht, nur um den Kurs etwas kürzer zu halten, aber es wird wahrscheinlich eine Fußzeile sein, vielleicht hier in diesem großen Teil. Und wenn ich einen Abschnitt, einen Abschnitt einbauen möchte , fügen Sie ihn hier ein, große rote Linien. Sie können keine Abschnitte ineinander legen. Okay, was ist damit? Was machen wir? Dieses Ding hier wird wahrscheinlich besser nicht als Abschnitt bezeichnet , weil wenn ich mir mein Design ansehe, es nur dekorativ ist. Dieses Ding, Portfolio-Miniaturansichten als Abschnitt. Dann gibt es vielleicht einen Testimonial-Bereich und dann einen Fotobereich hier. Was machen wir damit? Was ich tun werde, ist, es zu verbiegen. Ich werde mich erinnern, dass ich diese Klasse tatsächlich umbenennen wollte , weil sie mir gefällt. Ich möchte es behalten, weil es meine Steigung enthält, aber es ist nicht mehr Abschnitt tiefer. Dieser wird als Farbhintergrundverlauf bezeichnet. Und ich werde diesen Abschnitt löschen. Ich brauche dich nicht. Aber ich brauche aber was ist die generische Sache? Dass wir eine generische Box hinzufügen können, eine generische Raumaufteilung hier, diblock, versuchen, sie an die richtige Stelle zu bringen. Ich hatte Glück. Also ist es nicht mehr, es ist nicht in meinem Heldencontainer hier. Es ist hier. Exzellent. Also werde ich sagen: Du hast jetzt diesen Diblock, benutze einfach meinen Hintergrundfarbverlauf. Es ist dasselbe, außer dass ich jetzt zu einem gehen kann und einen Abschnitt hinzufügen und diesen dann meinen Thumbnail-Bereich nennen kann . Ich kann einen weiteren Abschnitt namens Footer hinzufügen. Also ja, manchmal hat man einfach eine generische Box, die nur ein Div-Block ist. Ich möchte es beenden, denn jetzt geht dieser Abschnitt als nächstes? Oder der Container, der mein Design betrachtet, wenn ich hier eine Fußzeile hätte, okay, und sie wird die gleiche Breite haben. Ich hätte einen Container und meinen Thumbnail-Bereich plus meine Entschuldigung, meine Miniaturansichten plus meine Fußzeile sowie die Testimonials hängen davon ab, welche Struktur Sie erhalten möchten. Mein Fall, ein Container wird gut sein. Ein voller Behälter. Du hast das langsam satt, aber du wirst gut darin. Mein Container funktioniert super. Es ist tatsächlich aufgefallen, warum dieser Container, denken Sie daran, dass wir hinzugefügt haben, wir möchten Website etwas breiter wird. Also haben wir eine Containerklasse der Containerbreite hinzugefügt. Wir haben es genauso für das Navi hier oben gemacht. Also Containerbreite, wiederverwenden, wenn sich der Unterricht gut anfühlt. Also hier drin füge ich meinen Abschnitt hinzu. Und innerhalb dieses Abschnitts wird dies mein Abschnitt für Lebens-Thumbnails sein. Und dieser wird einen gewissen Abstand haben. Es wird eine gewisse Spitzenmarge haben. Ich werde es für den Moment erraten. Und wir werden ein Raster hinzufügen, aber das ist eine Art Struktur. Es gibt also einen internen Container, den wir ausgearbeitet haben , dass wir manchmal nur ein dekoratives Div um die Außenseite dieses Zeugs haben , weil ich in Zukunft den Abschnitt haben möchte und ich wahrscheinlich will Fußzeile später, um dort auch reinzugehen. Also zwei verschiedene Abschnitte, die du mir gibst. Lass uns gehen und diesen aktualisieren. Ich möchte Ihnen diesen zeigen damit Sie jetzt gehen können, wenn Sie den Direktor haben, wenn Sie noch ein Beispiel wollen, wir machen es mit diesem nachgerüsteten und wir werden es bis an die Ränder schieben wie wir es beim Intro gezeigt haben. Dieser hier ist nicht knifflig. Es sind nur die Navigatoren schwierig zu benutzen. Was machen wir also? Wie würdest du es machen? Sie eine Pause, denken Sie darüber nach, wie Sie es nicht tun. Komm zurück und sieh nach ob du dort angekommen bist, wenn du nur zuschauen willst. Also was ich tun werde ist, dass dieser Typ nicht mehr in diesem Container ist , weil der Container sie enthält. Wir wollen, dass es kostenlos ist. Sektion muss frei sein. Wie machen wir das? Ich werde einen, ich werde hinzufügen, ich werde nicht in den Abschnitt gehen, ich werde nicht dazu kommen. Ich werde diesen Kerl einfach aus dem Container ziehen und es ist ziemlich schwer, sie rauszuholen. Links, rechts, links, rechts. Also ist er draußen und unten hier unten. Er ist schon in voller Breite. Exzellent. Was müssen wir jetzt tun, während er hier unten ist, was wir tun könnten, ist einen Behälter hinein zu stellen und zu versuchen ganzen Behälter zu klumpen, ich stelle ihn da rein und ich gehe Um es zu versuchen, versuchen wir es auf diese Weise. Es funktioniert. Es funktioniert. Irgendwie zu arbeiten. Okay, du kommst also auf die Idee. Du kannst es versuchen. Das ist eigentlich einfach genug, wenn sie alle oben gestapelt sind, aber sie können einfach direkt nach rechts, ziehen Sie nach rechts, verfolgen Sie die richtigen Zählungen wie mehr als einer gleichzeitig der Moment, soweit ich weiß. Also los geht's. Wir haben diesen Abschnitt, perfekt ist , weil es meine Helden-Sektion ist. Und all das Zeug ist in diesem Container. Los geht's. Jetzt müssen wir sie in der Liste nach oben verschieben, weil er immer noch zwischen NAB und Sponsoren stehen muss. Was machen wir mit diesen Typen? Was ich tun werde ist, dass ich wahrscheinlich zuerst einen Container reinstelle. Also nehme ich einen Container und ziehe ihn dann ganz nach unten. Ich kriege es nicht. Also werde ich noch einmal versuchen Container. Sie können zwei Behälter ineinander stellen. Also gehst du, er ist außerhalb der Sache, von der ich möchte, dass Sponsoren dabei sind. Hat funktioniert. Wenn Sie es schwierig finden, es zu verwenden, ist es völlig schwierig, es zu verwenden. Sie werden jedes Mal besser, wenn ich das Ding lade, die Dinge hier drin laufen ein bisschen besser. Dieser Behälter, der all diese Dinge enthält. Jetzt ist es nur noch die Ebenenreihenfolge. Und ich glaube, ich habe versehentlich alles getan. Also habe ich diesen Top-Container, in dem sich mein Navi befindet. Dann habe ich diese Helden-Sektion, die sich auf die gesamte Breite erstreckt. Darin habe ich meinen Container, der all das Zeug enthält. Manchmal geht der Abschnitt in den Container. Wenn du willst, dass es drinnen ist. Manchmal sind die Container in diesem Abschnitt, es ist wie ein Anfang. Dann hilfst du nicht. Das hoffe ich. Also. So rüsten wir diese Website nach. Ich mag es nicht, weil es wahrscheinlich auch in voller Breite sein muss, aber es sind genau die gleichen Preise wie diesem letzten hier. Also wenn du es machen willst, mach es. Wenn Sie das nicht tun, werden Sie einfach weitermachen wollen. Komm schon, Dan. Das nächste Video, das Sie sich wünschen, ist mein Befehl. Lass uns zum nächsten Video gehen. 48. Webflow - Spalten vs Flex vs Grid vs None vs Inline: Hallo zusammen. In diesem Video werden wir uns die Layoutanzeigeeinstellungen ansehen . Wir werden Block, Inline-Block und keine abdecken. Wir haben sie im Laufe des Kurses in Teilen behandelt. Wir packen die einfach zusammen. Wir schauen uns an, warum wir keine Spalten verwenden, okay, und dann werden wir im nächsten Video das Battle Grid gegen Flexbox machen . Aber lassen Sie uns jetzt auf diese ersten eingehen. Ordnung, also fangen wir mit den beiden wahrscheinlich einfachsten an. Die, denen wir schon ein paar Mal begegnet sind, Displayblock und Inline-Block. Schauen wir uns die Überschriften an. Das Schlagen ist standardmäßig unser Block. Was meine ich damit? Ich kopiere es und füge es ein. Es gibt zwei davon. Sie möchten nicht denselben Raum oder zumindest den horizontalen Raum teilen. Sie drücken sich gegenseitig nach unten. Sie sind ein Block. Der Erzfeind für Block ist Inline-Block. Also kann ich das hier sagen. Ich gebe diesem Schlag eine Klasse. Okay? Ich werde sagen, dass Sie standardmäßig nicht mehr gesperrt sind, werde Ihnen das Inline-Blockieren beibringen. Nichts ist wirklich passiert, weil dieser Typ immer noch blockiert ist. Ich werde ihm die Klasse auch vorspielen, dass beide Inline-Blöcke, wenn ich sie jetzt weiter kopiere und einfüge, in einer Reihe sind. Sie sind immer noch Box, aber sie stehen in der Reihe. Okay, Sie werden also standardmäßig einige Elemente finden, unser Block bedeutet, dass sie alle gestapelt werden wollen und einige von ihnen sind Inline-Arten von Inline-Elementen. Schauen wir uns das hier an. Die Knöpfe sind in einer Reihe. Sie wollen einander nachgehen. Lass es mich da reinbringen. Wenn ich es in einen stecke, drücke einen anderen Knopf. So. Sie sind in Linie, Einfügen, Einfügen, Einfügen. Sie werden stapeln wollen. Sie sind alle glücklich, den gleichen horizontalen Raum einzunehmen . Ich kann sie ändern. Ich kann meinen Knopf sagen, okay, er wird Button eins sein. Und ich werde sagen, lösche all diese, weil die Klasse nicht angewendet wurde. Deshalb dieser hier mit dem Knopf eins. Standardmäßig bist du in der Reihe, nicht mehr. Du blockierst. Es will den ganzen Raum füllen, aber das ist okay. Du hast ihnen gesagt, sie sollen das tun. Es ist ein bisschen komisch , wenn ein Knopf für das Ego interessanter sein könnte, das zu tun. Und ich bin das, was ich mit einem Bild hätte machen sollen. Also hier ist mein Bild. Das Bild möchte standardmäßig inline sein, aber eigentlich möchten wir, dass es eine Image-Klasse erhält. Und ich sage eigentlich nein, du wärst blockiert. Drücke bitte einfach alles runter. Das würde in derselben Zeile stehen. Okay, also Block, Inline-Block. Schauen wir uns noch einen einfachen an. Schauen wir uns keine an. Keiner sagt nur das ganze Bild. Wenn ich zum Handy komme, würde ich eigentlich gerne zu keinem gehen. Ich möchte, dass es verschwindet. Sehen Sie auf Desktop und Tablet, im Querformat mobil. Aber in diesem Fall, schalte es aus, los geht's. Es ist also so, als würde man es löschen, aber zumindest ist es an diesen anderen Breakpoints verfügbar. Sie können es auf dem Desktop und wieder auf dem Tablet schaffen. wie findest du es? Das ist ein gutes Argument. Kannst du hier drüben sehen, es hat das. Ich kann es immer noch hier auswählen, obwohl ich es nicht sehen kann. Also kann ich sie hier auswählen. Es ist auf „Keine“ gesetzt. Also ist es eigentlich hier, okay, hier, komm zurück zum Block oder Inline-Block oder nicht dort auf dem Desktop, erscheint wieder auf dem Tablet und sollte da sein und wieder auf dem Handy beginnen. Da hast du es. Das ist keins. Was haben wir sonst noch? Lass es uns eigentlich dort lassen. Vergleichen wir das Grid und die Flexbox in einem eigenen Video. Und der nächste. Lass uns das Video machen, um krank zu werden. 49. Webflow Flex vs Grid, die ich verwenden sollte: Hallo zusammen. In diesem Video werden wir uns die Unterschiede zwischen Grid, das wir zuvor gemacht haben, und Flex, das ist diese Option hier, k-, Flexbox- oder Flex-Layouts, Flex und Grid, ansehen die Unterschiede zwischen Grid, das wir zuvor gemacht haben, und Flex, das ist diese Option hier, k-, Flexbox- oder Flex-Layouts, Flex , um viel zu tun von den gleichen Jobs, aber sie haben einige Unterschiede , auf die ich mich einlassen möchte. Und es ist am besten, Flex im Vergleich zu Grid wirklich zu verstehen . Also lass es uns machen. In Ordnung, fangen wir mit einem Raster an. Okay, wir haben es erledigt, bevor wir hier auf einen Container klicken, ich ziehe mein Gitter hinein und wir bekommen das. Das erste, was ich erwähnen möchte, ist, wenn ich das rückgängig mache, werden Sie feststellen, dass die Gitter hier drüben sind. Also waren es Säulen, okay, aber hier drüben, wo ich Dinge ändern kann, damit mein Container, ich kann eigentlich einfach das Raster erstellen. Hier. Es spielt keine Rolle Sie etwas auf der Seite haben, wie einen leeren div-Block oder einen Container, und Sie konvertieren es in ein Grid. Oder wenn Sie das Raster rüberziehen, weil es eher eine Sache ist, die auf ein div-Tag angewendet wird. Wir ziehen gerne wie Klumpen über k, also machen wir es so. Aber all diese Dinge hier in diesem Layout sind nur ein einfaches altes Div, bei dem dieser Container ein gewisses Styling auf dieses Div angewendet hat , das es zentriert macht. Dieser hier teilt es in Prozentsätze für Spalten auf. Dieser wendet ein Rasterlayout für uns an. Sicherlich der Abschnitt, es sind nur diese Div-Blöcke mit angewendetem Styling. Deshalb lieben wir Grids. Grids sind wirklich einfach, Spalten und Zeilen hinzuzufügen, entfernen Sie sie. Den Abstand zwischen diesen zeige ich Ihnen, weil Flexbox im Vergleich dazu ziemlich schwierig ist, einige dieser Abstandssachen zu tun , die das Gitter wirklich gut macht. Es ist, es ist etwas in unserem Netz. Okay, also fügen wir etwas Topographie hinzu. Das Einzige, was wir über Gitter wissen, wenn ich jetzt etwas in eine dieser Zellen hinzufügen muss, füge ich auch ein Bild hinzu, okay? Es geht weiter zum nächsten. Du willst, dass sie zusammen sind, aber du erinnerst dich, alles was wir tun müssen, ist sie in einen Rapper zu stecken. Und ich klicke auf eine auf meiner Tastatur für diesen Fall, ich gehe div-Block. Und in diesem Block wird mein Bild sein. Komm mit auf die Fahrt. Los geht's. Es ist schwierig. Es ist schwierig für uns alle. Also jetzt ist dieser div-Block hier drin, wenn ich ihn hier klicke und ihn kopiere und einfüge, okay. Ich kann es erneut einfügen, dreimal eingefügt und es ist ein weiterer Vorteil für Grid. Du kannst einfach weitermachen und wir werden weiterhin genügend Zellen hinzufügen. Okay, das ist also ein wirklich großer Vorteil für Grid. Nun, so wie das Raster funktioniert, ist ein Großteil der Gesamtstruktur wird mit dem übergeordneten Element erstellt. Kannst du sagen, der Elternteil all dieser Dinge hier drinnen ist? Ich kann auch Sachen machen. Ich kann sagen, dass ich sie an der Mitte in ihren Zellen ausrichten möchte. Fantastisch. Während wir das Bild sagen , mit dem wir uns im letzten Video befasst haben, werde ich diesen Button hier unten sagen. Wenn wir es ändern wollen, tun wir es nicht, machen es übergeordnet, wir tun es einfach an. Wir sagen, Sie befinden sich jetzt im Zeilenblock oder Block. Also machen wir es mit der eigentlichen Sache, wohingegen Grid und Flexbox. Okay. Wir machen es mit dem übergeordneten Container. Okay. Aber die Eltern haben Kinder, diese kleinen Jungs. Und Sie können diesen Kindern individuelle Dinge antun. Man kann also sagen, dass sie alle zentriert außer diesem Rebellen unten hier unten. Wenn du auf das Kind des Elternteils klickst, kannst du sagen: Hey, du bist richtig ausgerichtet. Grids sind großartig. Grids eignen sich hervorragend für wirklich strukturierte Inhalte wie unsere Thumbnails, die wir für unser Portfolio erstellen werden. Eine Menge sich wiederholender Sachen. Es können Artikel in Ihrem Geschäft sein, Bilder oder Ihr Portfolio. Wirklich gut aber sehr strukturiert. Es ist alles Samy Flexbox im Gegensatz dazu, was wir gleich machen werden, ist gut für unregelmäßige Sachen. Sachen, die ein bisschen seltsam sind und komische Dinge bewirken müssen. Die Sache, die ich wissen möchte, ist, dass ich dieses Bild zur Seite bewegen möchte. Kannst du sehen, dass dieses Bild hier kein Kind unseres Rasters ist. Wie Sie sehen, es ist, als gäbe es das Raster, das getestete und es geht um eine Ebene nach unten. Also gibt es Diblock hier ist das Kind die Dinge in dem Kind oder die Enkelkinder, dass ich irgendwas tue. Es gibt nicht, dass ein Enkelkind diesen Upcase richtig erscheinen ließ. Okay, aber dafür gibt es keine zusätzlichen Layouts. Es ist also eine Sache zu beachten und wir werden darauf zurückkommen weil wir irgendwie hinübergehen und weil sie es mögen, aber ich möchte, dass das auf der rechten Seite geht. Das ist ziemlich klein und ich brauche es auf der rechten Seite. Lege ich ein Gitter hinein und gehe genau dort hin? Es wäre lächerlich. Du könntest es schaffen. Aber es ist viel einfacher, Flexbox zu verwenden. Okay, also werde ich mir diesen Diblock aussuchen. Vergiss, dass es Teil des ganzen Kindes ist. Es ist einfach zu schließen. Ignoriere es muss nicht sein. Aber sagen wir einfach, jetzt gehe ich zur Flex Box. Flexbox hat viele dieser Optionen, musste aber nicht als Mike Massive Grid erstellen. Und ich kann sagen, dass es tatsächlich vertikal gestapelt ist, was großartig ist. Zurück da, wo wir waren. Es geht immer standardmäßig auf horizontal, was nie so ist, wie ich es möchte. Und man kann sagen, dass ich das alles auf der rechten Seite haben will. Jetzt, wo wir Grid und Flex kombiniert haben, winke ich mit den Armen herum, weil sich das gut angefühlt hat. Es ist schwierig, Grid im Vergleich zu Flexbox zu beschreiben und wo man es benutzt. Denn oft benutzt man eine Kombination der 21 oder der anderen, okay, es sind nie ein bisschen Leute wie Mac oder PC, man muss sich verpflichten. Ich werde vor mir machen, weil es mir gefällt, es funktioniert wirklich gut. Es ist schnell, super teuer, aber ich mag es. Ich kann auch auf einem PC sein. Okay. Ich muss PCS hassen. Das ist mein, das ist Teil des Vertrags, den du mit einem Mac unterschreibst, aber mit Flexbox und Grid gibt es viele wie, Oh, ich benutze nur Flexbox oder du kannst Grid verwenden. Es gibt eine Mischung, die du benutzen kannst. Es gibt nur Vorteile und es gibt nur Vor- und Nachteile für beide. Was ich jetzt tun werde, ist, dass ich mein Raster räumen werde , um mich ein bisschen mehr auf Flex zu konzentrieren , weil wir sie nicht verwechseln wollen. Es geht um ein getrenntes Verständnis. Und dann im nächsten Video, wenn wir noch ein paar Beispiele machen, werden wir sie erneut verwechseln. Also habe ich diesen Container und werde ein Div hinzufügen. Okay, also ein Grab meines Div Block Block wird erweitert , um den Platz zu füllen. Und ich möchte nicht, dass es den Raum ausfüllt. Ich will, dass es so ist, ich gebe ihm einen Namen. Ich nenne das meine Karte. Okay? Und ich sage, Sie haben eine Größe von 33%, 33% des Containers. Du kannst ihn dort irgendwie sehen, YZ so winzig du, okay, weißt du, weil es eine Mindesthöhe gibt, werde ich eine Mindesthöhe von 500 setzen, viel zu groß, 300. Okay, also gebe ich ihm eine Hintergrundfarbe , damit wir sie sehen können. die Flexbox schlagen. Vertrau mir, wähle eine Farbe. Marge hat viel zu lange damit verbracht , eine Farbe auszusuchen und es ist eine schreckliche Farbe. Okay, wir haben also eine Karte, sie hat eine Mindesthöhe, sie ist 33 Prozent, weil es toll wäre , wenn ich sie kopieren könnte. Eigentlich sollten wir zuerst ein paar Sachen reinlegen. Also fügen wir hinzu, indem wir ein treffen, ich werde ein Bild über meinem Schlagen machen, ich wähle ein Bild aus. Ich habe eines, das ich gerade aus dem früheren Tutorial geladen habe . Du kannst es dir schnappen, was immer du willst. Ich möchte das nur hinzufügen, damit es gut aussieht. Okay, wir haben also ein Bild, ich habe das. Lassen Sie uns versuchen , dieses Raster mit Flexbox neu zu erstellen und einige der Einschränkungen zu sehen. Es ist gut, es zu sehen , denn es hilft Ihnen zu wissen, warum Sie Grid over Flexbox verwenden würden. Flexbox ist gut mit dieser Karte. Ich möchte 12 davon und standardmäßig, okay, meine Karte, die ein Div-Tag ist, ist auf Block gesetzt und wir möchten, dass sie nur inline funktioniert. Lassen Sie uns Inline-Block-Netzwerke erstellen, einfügen, einfügen, ein anderes einfügen. Und das könnte das sein, was du willst. Sie können etwas Abstand hinzufügen, der funktionieren würde. Warum in aller Welt sollte Flexbox verwendet werden? Weil es viele coole Zusatzfunktionen hat. Ich klicke drauf. Aber wir haben all diese Art von Alignment-Zeug. Wir können es rechtfertigen. Es ist alles sehr cool. Machen wir das aber rückgängig. Denn wie Grid machst du es mit den Eltern. Also werde ich es wieder auf Block drehen. Und ich will es nicht mit diesen einzelnen Gegenständen machen. Ich möchte es in einen Behälter oder in eine Verpackung geben und es dann in eine Flexbox verwandeln. Und all diese Typen werden Kinder, vielleicht meine Karten. Also werde ich einen Div-Block hinzufügen. Könnte ich das mit dem Container machen? Das könnte ich absolut. Lass uns einfach seinen Container machen. Nehmen wir an, Container ist, Flexbox hält horizontal, vertikal. Also sind wir wieder da, wo wir waren. Jetzt hatten wir aber, was haben wir 33%. Lass es uns ein bisschen kleiner machen. Meine Karte hat also einen Stil, der besagt, dass Sie 33 Prozent sind. Machen wir 25 für Googles und machen es ein bisschen größer. Okay, aber Abstände, ich kann anfangen Prozentsätze für Abstände zu machen, okay, aber es wird schwierig. Also wie zuvor könnten wir Inline-Block verwenden und einfach sagen, füge ein bisschen Abstand hinzu. Aber hier wird Flexbox gut. Man kann eigentlich sagen, eigentlich möchte ich den Abstand ändern und ich werde es nicht mit dem Kind, sondern mit dem Elternteil machen. Und ich könnte sagen, Hey, alle hier, ich möchte, dass du rechtfertigst, wie dieser zwischen ihnen aussieht. Arbeit erledigt, anstatt zu versuchen, unseren Abstand zu berechnen. Das Schöne daran ist, dass wenn Sie auf diese Größe herunterkommen, sie immer noch Platz finden. Okay, es ist also nett und reaktionsschnell. Also Flexbox, wenn du nur das tun willst, okay, es könnte reichen. Okay, diese Karten könnten also ziemlich groß sein. Man könnte also sagen, dass sie tatsächlich bei 33,3% liegen. Sie füllen meistens alles auf. Okay. Und du kannst sagen Eigentlich würde ich gerne zu den Eltern zurückkehren und sagen, rechtfertige sie alle, aber lass uns eine kleine Lücke hineinlegen. Aber ich bin zehn Pixel groß. Flexbox gewinnt, aber wir sind nah dran , wo Grid funktioniert hat. Okay, hier gibt es eine Menge Verwirrung, wie zum Beispiel welches sollte ich verwenden? Wenn Sie nur eine Spalte dieser kleinen Karten hier haben möchten, wäre das egal. Flexbox oder Grid. Vieles von diesem Zeug ist dasselbe, also spielt es keine Rolle. Mein Laster Ich erinnere mich zuerst an Grid, benutze Flexbox. Als nächstes, wenn es nicht mit Flexbox funktioniert und Fixed Box ein bisschen schmerzhaft ist, aber wenn Sie vier davon haben müssen, wenn ich für sie kopiere und einfügen gehe, versucht es, sie in einer Zeile zusammenzudrücken. Da kann ich Eltern-Rap sagen. Und hier läuft alles furchtbar schief. Und ich finde es wirklich schwierig , Dinge dazu zu bringen, K auszurichten , ein anderes einzufügen. Wir können daran arbeiten und diese in Einklang bringen , und wir können sie meistens perfekt machen. Und das Problem tritt mit PAD auf. Es ist einfach viel einfacher, Raster zu erstellen. Wir haben gesehen, wie einfach es all diesen Jungs in einem Raster war , dir im Weg zu stehen. Aber wenn es nur eine Reihe von ihnen ist, Flexbox und Grid, dasselbe. Wir wären Flexbox nützlich dann wäre über einem Raster hier für ungleichmäßige Karten ungleichmäßige Karten oder so. Okay, wir machen ein bisschen wie ein Mosaik aussehendes Ding. Also, wenn du dich erinnerst, Gitter, gut, solange sie ziemlich strukturiert sind, wohingegen das, wenn ich dich gehe, dieser Maulwurf und du, oder noch größer, okay, und du ziemlich klein. Die kleinste, diese Überschrift hier ist in diesem speziellen Fall winzig. Dieser ist nach und nach länger. Wir können mit Flexbox, wir geben den Code ein, wir sagten Du bist 33 Prozent, okay, nur um ihm etwas Abstand zu geben, gekauft weil wir jetzt Flexbox hinzugefügt haben, ich kann sagen, aber optional, Ich klicke, werde das los und sieh dir das an. Es wird die Größe sein , die sein muss. Muss es klein oder groß oder winzig sein? Dann kann ich mit den Eltern entscheiden, ich kann Dinge tun wie: Was macht es, was macht es? Haben sie sich alle gerade gestapelt? Oh, das ist nett. Grid kann diese Art von Cain nicht machen. Aber du musst sehr explizit sein. Sie müssen sagen, Spalte a besteht aus 0,5 Brüchen, während Sie hier den Inhalt verknüpfen und entscheiden können, wie groß er ist. Also Flexbox, super flexibel, ein bisschen schwieriger zu verstehen. Grids, super starr, aber großartig, weil viele Dinge auf Websites irgendwie Schritt sind und Starrheit wiederholen. Lass uns verrückt werden mit dem Flexbox-Container. Wir können sagen, dass alle Kinder gleichzeitig ausgerichtet sind anstatt der oberen Linie entlang der unteren Strecke, um die Linie entlang der Oberseite in der Mitte ihres Containers nach rechts zu passen entlang der Oberseite in . Vieles von diesem Zeug ist auch im Raster, aber sie besetzen alle irgendwie ihre eigenen Zellen, teilen sie auseinander, drücken sie an die Ränder, um sie einzuwickeln. Okay, das sind also einige allgemeine Übersichten von Grid versus Flexbox. Gehen wir im nächsten Video auf einige Beispiele ein, wir machen eigentlich nur ein paar Sachen und sehen, wo wir landen. 50. Flex mit Beispielen in Webflow: Hallo zusammen. In diesem Video zeigen wir Ihnen einige, wir, ich werde Ihnen einige Beispiele zeigen. Und wir werden zusammen das Flexbox-Layout ein bisschen besser verstehen. Also werden wir einige gute Anwendungsfälle wie diesen hier durchgehen , die Navigation, okay, alles ist gerechtfertigt. Also Sachen links, dieses Zeug rechts, ich kann Dinge hinzufügen und entfernen. Hier. Die Ausrichtung ist auch wirklich gut für Flexbox , weil es ein Abschnitt ist und genau in der Mitte hier habe ich diesen schönen Teil , habe ich diesen schönen Teil der keinen Rand verwendet, wie wir es zuvor getan haben, sondern nur in der Mitte sein will. Und ein weiteres Beispiel hier, wo wir diese beiden Optionen Case Stack neben unserem Bild bekommen diese beiden Optionen Case Stack und wir werden es mit Flexbox machen. Ordnung, es macht keine Sachen. Okay, fangen wir mit der Navigation an. Wir bauen diese Navigation hier oben , die diese Dinge im Inneren hat. Es ist eine gute Verwendung von Flexbox. Und ich mache es isoliert. Also mache ich es nicht bei unserem Hauptprojekt, ich mache nur an einem leeren Projekt, nur damit wir alleine an Flexbox arbeiten können. Also ein Container, ein, einen auf der Tastatur benutzt, einen div-Block hineinlegt. Beachten Sie, dass Sie einen Abschnitt hineinlegen, okay, weil es ein Navigationsbereich sein wird, Abschnittsseite meines Containers namens Section nav. Ich werde ein paar Dinge hinzufügen, wie ein A, ich werde unser Logo hinzufügen. Ich füge ein Bild hinzu. Ich wähle eine aus unseren Übungsdateien aus. Es gibt einen namens Sponsor. Okay, wenn sie einen sponsern, verwende ich das nur als Beispiel. Sie können es etwas kleiner machen und einen Knopf hinzufügen, einen Knopf hinzufügen und ihn dort hineindrücken. Mein Sektionsnavigationsprogramm wird erweitert , um das Zeug darin unterzubringen. Ich möchte eine Mindesthöhe festlegen. Wir wissen alles über diese Sektion Nav. Ich lege eine Größe an, ich lege eine Mindesthöhe fest. Alle hundert und 50. Nein, 100. Das wird reichen. Jetzt. Ich möchte es in die Mitte bringen, was schwierig ist. Ich könnte Margen gebrauchen. Okay, und das ist in Ordnung. Ich könnte arbeiten. Es gibt viele Möglichkeiten, dasselbe zu tun, ich denke, einer der Punkte aus diesem Layoutabschnitt, aber lassen Sie uns Flexbox verwenden. Also eine coole Sache an Flexbox ist, mache ich es mit den Kindern oder mache ich es mit dem Wrapper, draußen, aber das ist in Ordnung. Wir machen es mit dem externen Elternteil, mit diesen Leuten, wir sagen, dass Sie Flexbox-Job erledigt haben. Eine der Standardeinstellungen ist horizontal, was ich will, nicht vertikal oder horizontal. Aber kannst du hier sehen, dass die Standardeinstellung auch Stretch ist. Ich möchte, dass es im Mittelpunkt steht. Machen Sie weiter und rechtfertigen Sie. Schau dir das an. Es gibt eine linke Ausrichtung, eine zentrierte, eine rechte Linie. Aber sieh dir das an. Nun, wen genau das wollte ich. Okay. Was auch immer das darüber schwebt, Abstand zwischen den Gehäusen wird den Abstand zwischen Flexbox gleichmäßig verteilen , in dieser Situation sehr einfach ist. Okay, es ist genau das, was ich tun wollte, wegen der Leichtigkeit dieser Ausrichtung und Rechtfertigung. Gehen wir noch ein bisschen weiter. Ich möchte eine weitere Schaltfläche hinzufügen, kopieren und einfügen. Okay, es verteilt sie also gleichmäßig, was großartig ist. Also wird keiner dieser anderen für uns arbeiten. Was wir also tun können, ist Flexbox ein bisschen weiter voranzutreiben. Diese beiden, wenn wir sie in ihr eigenes Div-Tag einpacken, okay? Das bedeutet, dass es ein Logo und ein Div-Tag gibt. Also werden sie immer noch aufgeteilt. Okay? Die Tatsache, dass darin zwei Dinge stecken, spielt keine Rolle. Es sieht nur auf der höheren Ebene aus. Es sieht so aus, als gäbe es ein Logo und ein div-Tag und wir werden sie trennen. Das ergibt also irgendwie Sinn. Also diblock, ich sage div tag, es ist aus dem HTML-Land, sie nennen es ein div-Tag. Sie nennen es einen Block hier in Webflow, was korrekt ist. Es ist nur eine andere Art, es zu nennen. Ich setze dich da rein und dich in den Block. Also was ist gerade passiert? Okay, ich habe eine Abteilung und darin sind nur zwei Dinge drin. Okay. Wenn Sie also einen nach links, einen nach rechts, innerhalb des Diblocks teilen, gehen zwei Dinge vor sich, aber dann reparieren Sie es. Okay? Und ich kann natürlich so viele Buttons hinzufügen wie ich möchte, weil alles in diesem kleinen Wrapper ist , dieser Diblock und es drückt zur Seite. Jetzt eine andere Sache, ein anderes Level, in das ich vielleicht gehen könnte, ich könnte etwas Polsterung hinzufügen. Ich könnte einen Schaltflächentext erstellen. Ich könnte auf Knopfnav gehen und einige Ränder hinzufügen. Okay, da wollen wir sie ausräumen. Absolut in Ordnung. Okay. Aber wir erkunden Flexbox. Was ich also tun könnte, ist im Moment, richtig, wir haben unseren Wrapper, das Elternteil, auf das Flexbox angewendet wurde. Und in diesen beiden Dingen sind zwei Kinder drin. Ich mache dieses Zeug. Nun, wir können sagen, Hey Kind, was als furchtbar benannter DIV-Block bezeichnet wird. Geben wir ihm einen richtigen Namen. Nennen wir das Wetter Nav. Knöpfe. Jetzt knopf schnell, nur um mir später klar zu machen, was ich sagen kann ist, dass ich sagen kann, ich kenne Ihr Kind. Ich kann dich dort sehen. Du kannst Sachen machen, die nicht genug bewirken. Ich will die Lücke. Okay. Und das ist in Ordnung. Okay. Was ich tun kann, ist zu sagen, dass ich dein Kind kenne, aber du wirst jetzt auch Eltern- oder Großelternsache sein . Okay. Jetzt sind Sie also ein Elternteil, und ich kann sagen, dass die Leute in Ihnen, Ihre Kinder eine Lücke von Spalten oder Zeilen haben werden. Lass uns Kolumnen machen. Und lass uns gehen. Könnte ich einfach einen Rand auf den Button setzen? Absolut gut. Wenn ich, könnte ich das in einem Raster aufbauen. könnte ich absolut. Ich könnte dein Gitter hinter meinem Container her gehen, nach meinem im Container, aber danach wird das Problem darin bestehen, ihn da reinzubringen. Aber ich brauche 123, das kann ich machen. Also werde ich mir das schnappen. Ich werde drei Spalten haben. Eine Reihe. Ich werde das in etwa dieser Größe für das Logo machen . Eigentlich mache ich diese beiden und mache sie groß. Hier stoßen Sie auf Probleme, die Sie gerne hätten, okay, wie groß ist dieser 1ab? Aber weil es so steif ist, nimmt Mike Links und diese Knöpfe in derselben Größe. Wenn sie es nicht wären, gäbe es genau das Gleiche, was sie nie sind, Sie könnten das Raster verwenden, weil Sie diese auf die richtige Größe einstellen und einfach die Knöpfe einsetzen können und es wäre großartig und Sie können die Polsterung anpassen. Okay, großartig. Aber das ist problematisch. Wenn Sie Ihre zweite Schaltfläche haben, hat sie einen sehr langen Text, Nummer zehn. Sie können also sehen, wie es sie aufteilt. Und wenn ich eine andere habe, die bereits Flexbox zur Rettung hat, ungleichmäßige Formen, Flexbox-Flexibilität. Ordnung, machen wir die Heldenbox. Also in meinem Hauptcontainer möchte ich einen anderen Abschnitt. Also gehe ich zu einem, ich gehe Abteilung und werde versuchen , es an die richtige Stelle zu bringen. Es ist reingegangen. Da haben wir's. Es ist also darunter, es wird hier ein kalter Bereich sein. Und was ich am Anfang gerne machen würde, dann werde ich es einfach ausmalen. Ich lasse die Alt- oder Wahltaste auf einen der Chevrons klicken. Ich sage, du wirst eine dunkle Farbe haben. Großartig. Die gesamte Typografie hier wird weiß sein und es wird eine zufällige Schrift sein. Okay? Und ich werde eine Höhe machen. Die Größe wird also keine Höhe sein, sondern eine Mindesthöhe von 500 Pixeln. Nun, wenn ich einen Helden hinzufügen möchte, tut mir leid, dass ich einen Absatz und eine Schaltfläche wie am Anfang gedrückt habe. Wenn ich eine kriege, haben sie nicht funktioniert. Was Sie hier sehen, das passiert, passiert mit dem Besten, es ist zurückgekehrt. Klickt eigentlich raus. Drücken Sie jetzt a und sagen Sie, ich möchte, ich möchte ein bisschen Absatztext. Und wenn ein Knopf, okay, ich will, dass dieser Absatztext hier drin mein P-Held sein wird und er wird eine Größe haben. Ich möchte, dass es ein Minimum ist. Eigentlich werden wir eine maximale Breite von 600 Pixeln verwenden. Dehnt sich nicht nach außen. Und ich möchte, dass sie alle zentriert sind Ich könnte durchgehen und sagen, okay, Topographie. Alles in dieser Helden-Sektion ist Topographie Align Center. Und das funktioniert irgendwie. Okay. Aber zur Rettung als Flexbox Flexbox sagen, Mann, das ist fett, nicht gut. Wie dem auch sei, der äußere Elternteil, okay. Ich werde sagen, das Layout ist Flexbox, was nicht funktioniert. Es wird vertikal sein. Möchte ich, dass sich das den ganzen Weg erstreckt? Geh einfach in die Mitte. Hey, sieh uns an und will auch nicht falsch mit top sein. Es geht in unsere Flexbox. Unterseite dehnbar, gleichmäßiger Abstand. Flexbox bietet viel Flexibilität. Und offensichtlich wäre ein Grid hier nicht nützlich. Es gibt andere Möglichkeiten, dies zu tun. Es gibt Möglichkeiten, Dinge wie automatische Margen zu tun , und es gibt andere Möglichkeiten, dies zu tun. Sie könnten in Ihren Abenteuern darüber stolpern. Und es kann genauso richtig sein wie dieses. P Hero muss zentriert sein. Los geht's. Und es muss nicht die riesige Schrift sein. Gehen wir auf den öffentlichen Sinn. Möglicherweise haben Sie keinen öffentlichen Sand. Wir können ein paar nette, in Ordnung, also einige gute Beispiele für die Verwendung von Flexbox gebrauchen. Lass uns mehr tun. Nehmen wir an, wir wollen dieses Bild auf der linken Seite und diese beiden Dinge irgendwie nebeneinander gestapelt haben. Grid würde total funktionieren, aber wir machen nur Flexbox. Okay, also was wir tun werden ist wie würdest du es machen? Setz dich hin, mach eine Pause. Haben Sie ein kleines Memory-Spiel wie eine Herausforderung, wie Sie es machen, bringen Sie es zum Laufen. Okay, zuerst brauchen wir ein Div, um all dieses Zeug zu umgeben. Okay, also werde ich einen und einen Wenn-Block gehen, ihn irgendwo da reinlegen, Bild im Urin. Und es hieß, wir wollen das einfach. Wir wollen, dass das einfach daneben bleibt. Alles was wir dafür tun müssen, geh zu den Eltern, dem Wrapper draußen und sag, dass du dich falsch herum flexboxen wirst . Okay. Vertikal. Horizontal ist irgendwie das, was ich will und ich möchte, dass es mittig ausgerichtet ist. Jetzt hatte ich zufällig zufällig meine Heizung vor meinem Bild. Und das erinnert mich daran, dass man einige seltsame Sachen machen kann , bei denen man mit Flexbox die Richtung ändern kann, so dass man machen kann, das Bild zuerst darin machen, dann ist alles in Gegensätzen. Ich weiß nicht, wofür du das machen möchtest. Aber du kannst, lass uns sie richtig platzieren und sie auf der rechten Seite ausrichten. Denken Sie also daran, zurück zum Elternteil, gehen Sie nach links ausrichten. Und das Coole an Flexbox sind die Lücken zwischen den Säulen. Ich werde meine hochgehaltene Shift Up Arrow benutzen, du kannst dort entscheiden. Cool. Das funktioniert also. Nehmen wir an, ich möchte den Button unten hier hinzufügen. Was machen wir? Das stimmt. Wenn ich versuche zu bearbeiten, was passieren wird, geh da rein. Es hat sie irgendwie alle verteilt. Also brauche ich ein Div, das um all diese Dinge gewickelt ist. Also ein Diblock, wirf es da und da rein, du und fast verpassen den Befehl hier drüben. Also merke sofort. Also habe ich diesen Div-Block, ist ein Kind und dieses Bild auch. Hier sind nur zwei Dinge drin. Jetzt ist es einfach zu gehen. Alle Eltern, alle sind links ausgerichtet, damit es da reinpasst. Jetzt ist es zentriert, oder? Aber du kannst oben und unten sehen , da ist all dieser Raum dazwischen. Lasst uns herausfinden, was diese große Lücke verursacht. Es ist eine gute Art, dass wir uns eine Website angesehen haben, die wir vor einiger Zeit gemacht haben, und wir sind uns nicht sicher, woher das ganze Styling kommt und warum gibt es hier eine große Lücke? Also denk an das Röntgenbild, okay, es ist hier versteckt. Wir können sagen, Sie gehen in den Röntgenmodus, klicken ab, starten vom Hintergrund und bewegen den Mauszeiger einfach herum und Sie können sehen, woher der gesamte Abstand kommt. Es gibt also einen Teil des Weltraums und kommt von Button, Hero und einigen von etwas namens H2. Es ist ein H2-Etikett mit einem Vorrat oder einer Heizung fünf. Also lass uns gehen und diese entfernen. Wir können es machen, solange sie im Röntgenmodus sind. Also klicke darauf und sag Button Hero. Es ist also nur der Button für eine Hara-Seite weil wir sie schön benannt haben. Wir benutzen nirgendwo anders. Hoffentlich kann ich das klären. Ich gehe Option oder Alt auf einem PC. Klar das. Brauche ich die rechte Seite? Das brauche ich jetzt auch nicht, das wird sich auszahlen. Jetzt. Es sieht besser aus. Vielleicht möchte ich das auch klären. Lass uns darauf klicken. Er bekommt sein Styling vom Summieren. Er ist ein H2-Tags schau mal. Also ist er aus irgendeinem Grund H2. Es sollte ein h5 sein, was unser Problem klärt. Denn wenn es H2 ist und ich das H2-Tag bereinigen würde . Ich habe H2 ein paar Mal benutzt. Ich glaube, das ist ein H3, das ist ein H2. Ich habe das früher im Kurs falsch etikettiert. Sie haben es vielleicht schon früher im Kurs bemerkt. Also sollte ich es eigentlich einfach zu einem H5 machen und meine Probleme haben überlebt. Ordnung, also schalte ich die Röntgenansicht aus und sehe eine weitere gute Verwendung der Flexbox an, weil sie noch mehr hat, sagen wir den Abstand hier drin, ich kann zu meinem Block gehen. Eigentlich werde ich es nicht gut machen, es in eine andere Flexbox zu verwandeln und mit dem Abstand dazwischen zu spielen , aber es sieht gut aus. Und ich habe hier bereits diesen Cold Button zum Anwenden, mit dem ich einfach gehen könnte. Es ist also nicht alles. Sie müssen nicht weiter den Kaninchenbau gehen, wenn sich mehr Flexbox auf Flexbox befindet, also könnten Sie dafür kein Richtiges oder Falsches tun. Lass uns noch eins machen. Ordnung, lasst uns mit diesem fertig werden. Wir haben es vorhin gemacht. Erinnerst du dich Ich mache es einfach flexibel. Megan Flexbox, schieb es nach rechts und ich werde später darüber sprechen. Es ist Zeit, darüber zu sprechen. Okay, lass uns dekonstruieren, was wir getan haben. Da war also ein Container in diesem Container, der eine Heldenabteilung war. In diesem Abschnitt haben wir ein Gitter platziert, irgendwie eines auf die eine Seite, eines auf die andere. Perfekt. Und damit diese beiden Dinge die Enter-Taste drücken, müssen sie in ein Div eingeschlossen werden, okay, sonst springen sie in die nächste Rasterspalte. Also haben wir das gemacht. Und was wir gemacht haben, ist zu sagen: Hey, habe gerade das Div gepackt , es gemacht, nun, es hat so angefangen , aber das war unser Problem. Wir haben es geschafft, in Bezug auf die Ausrichtung auf die rechte Seite zu gehen . Aber Sie können den Helden sehen, die H1-Box um sie herum ist links ausgerichtet und wir konnten es nicht schaffen, auf die andere Seite zu gehen , der Knopf steckt dort fest und das auch. Also was ich getan habe, war, dass ich diblock sagte, bitte sei einfach ein Film, sei nach rechts ausgerichtet. Und dann winke ich mit den Händen und wir fragen nicht, warum wir das später tun. Aber jetzt verstehst du super einfache Behälter, Eltern machen Flocken auf der rechten Seite. Fröhliche Tage. Wir haben aber auch früher in diesem Video erfahren, dass wir dieses Ding in den Mittelpunkt stellen mussten. Wir haben es mit diesem verfälscht, indem wir gesagt haben, Hero One hat eine ganze Menge Spielraum und es funktioniert, daran ist nichts auszusetzen. Okay, machen wir es besser oder anders. Nur um unsere Fähigkeiten zu verbessern. Also wie löschen wir Das ist richtig, Option Alt, klicken Sie darauf. Okay, jetzt steckt es oben fest. Wie komme ich dazu, hier gehst du hin. Ordnung, klicke auf den Diblock und da ist das in einem. Bum, Bum, Bum, Bum, Bum. Wir sind schon einmal auf dieses Problem gestoßen. Ich stoße ständig auf alle Probleme und bin sehr verwirrt. Ich denke, wie kommt man auf den Grund? Das liegt daran, dass dieser Diblock, seine Höhe, auf nichts eingestellt ist und keine Höhe erreicht hat. Also wickelt es sich einfach die Höhen hoch und kommt eigentlich nicht von diesem Diblock, es kommt von weiter oben auf der Liste, ziemlich weit oben, nicht vom Raster. Das Gitter gibt dir nicht die Höhe. Es ist die Helden-Sektion. Okay. Lass uns das tatsächlich überprüfen, können wir das mit dem Röntgenbild überprüfen? Ich bin mir nicht sicher, ob es das aufgreift. Lass uns einen Blick darauf werfen. Macht das das? Nein, es greift es in diesem nicht auf. Ordnung. Schlechtes Röntgenbild. Ich habe mich hochgearbeitet, bis ich herausgefunden habe , welcher die Höhe angibt. Okay, und ich werde es entfernen. Nun, ich werde es tatsächlich schneiden. Setz das auf nichts zurück. Okay, erinnere dich an Alt oder Wahltaste. Und dann gebe ich dem Diblock die Höhe oder die Mindesthöhe , dann weiß er, wie groß er sein muss. Also lass uns die Mindesthöhe gehen sie an diesem Ende einfügen, weil wir sie in der Mitte haben. Es weiß, dass es in die Mitte oder nach unten gehen muss. Nun zur gleichen Zeit oder verteilen Sie es gleichmäßig verteilt. Okay, also das Ego, wir sind zurückgekommen, wir leben, was wir getan haben und wir haben es besser gemacht. Es ist nicht besser. Es ist das Gleiche. Es befindet sich in derselben Positionsnische, nur auf eine andere Art, es zu tun. Ordnung. Ich weiß nicht, wie du dich fühlst. Ich werde jetzt mit dem Flexor weitermachen , Flex-Fähigkeiten. Ich habe das Gefühl, dass das mein neuer Gag für den Rest des Kurses ist, Let's Flex, Flex-Fähigkeiten. Und ich habe das Gefühl, dass wir ein paar kleine Projekte gemacht haben , bei denen einige Probleme aufgetreten sind, aber ich habe das Gefühl, dass wir ein paar Beispiele hinter uns haben. Gehen wir zum nächsten Video über. Lass uns ein paar neue Sachen lernen. 51. Gleiche Höhenkarten mit Knopf auf der Unterseite in Webflow: Hallo zusammen. In diesem Video wird dieser Button ganz unten auf all diesen verschiedenen Karten angezeigt. Wenn du aus der Zukunft zurückkommst und mich schon so beobachtet hast , was war es nochmal? Sie stellen sicher, dass der Elternteil Rapa auf ein Flex-Layout eingestellt ist und dies dann auf sein Kind eingestellt ist. Okay. Nun, sie ist auf einen Rand eingestellt und das Margin-Top ist auf Auto eingestellt. Es wird sich bis zur Elternbox hinunterdrängen. Okay, lass uns gehen und die ganze Sache machen. Es wird lustig werden. Ordnung, wir fangen mit einem Problem an. Und ich dachte, wo ist mein Knopf hin? Irgendwie funktioniert die Hälfte. Ich kann irgendwie darin navigieren. Und dann dachte ich hier oben: Hi, fordert Designkontrolle an, du entwirfst und noch ein Tab. Gute Arbeit, Dan. Also habe ich es gerade zweimal geöffnet. Normalerweise habe ich es nicht zweimal geöffnet , weil ich sie nicht brauche. Aber wenn ich diese Tutorials mache, tue ich es. Aber hey, du könntest auf dieses Problem stoßen. Also lasst uns einfach einen von ihnen öffnen und los geht's. Okay, also werden wir diesen Brocken unten rechts hinzufügen . Lass mich meine Figma-Datei holen und sie dort zusammenfügen, damit ich sie sehen kann. Das erste Ding zu bauen ist also, dass ich entweder eine Flexbox oder ein Gitter brauche. Grid wird einfach viel einfacher sein. Also habe ich hier schon meinen Hintergrund eingerichtet, der an die Ränder dieses Containers geht. Ich habe ihm einen Namen gegeben und darin werde ich ein Gitter anbringen. Also werde ich gehen, ich werde eine etwas andere Methode verwenden , anstatt eine zu verstecken und sie hineinzuziehen. Okay, das mache ich. Machen Sie es uns einfach bequem alle Möglichkeiten zu nutzen. Es wird eine Ware sein. Und ich gehe ins Netz. Okay? Und ich werde einfach darauf eingehen, weil es das einzige verfügbare ist. Da haben wir's. Wir haben also ein Raster und jetzt will ich, dass es so ist, ich mache drei quer. Ich werde einen von ihnen löschen. Eigentlich ist es egal , es nicht zu tun. Es fügt sie sofort hinzu, weil es sich um eine eigene Reihenfolge handelt. Ordnung, also habe ich unsere Größen. Jetzt will ich meine kleine Karte hineinbauen. Also klicke ich auf Fertig. Okay, und hier drin werde ich nicht darauf doppelklicken. Ich werde einen Container und einen schönen generischen Container hineinziehen . Ich habe das ausgewählt. Ich gehe zu Command D und tippe div, div block ein. Ich gebe meinem Block einen Namen, werde einfach cod heißen. Kabeljau ist ein guter Gattungsname für meine Preiskarte und unsere Hüllen Diese Karten für Miniaturansichten für unser Portfolio können Karten sein , die verschiedene Artikel in Ihrem Geschäft zeigen. Okay. Also Karte, Vorschaubild. Jetzt werde ich nicht zu lange verbringen. Ich schätze, ich wollte dir zeigen wie man das Button-Ding unten runterbringt. Ich möchte es nicht zu sehr stylen. Wir werfen nur ein paar grundlegende Dinge ein. Also Befehl E in diesem div, ich werde ein Bild platzieren. Und das werde ich für den Moment belassen. Ich will nur reinwerfen, wir werfen ein Lehrbuch rein. Es braucht Block ist nur generisch. Text. Ist nicht wirklich, es ist kein Absatz, es ist einfach eine Eule. Und das ist unser UX-Designprojekt. Okay, auch in diesem Div werde ich Command E sagen und ich werde einen Schlag einlegen. Okay, ich werde sichergehen, dass es auch eine Heizung ist. Und was können wir dann noch nicht reinstecken? Befehlstaste D. Und das ist gut genug. Das einzige, was ich wahrscheinlich brauche, ist mein Image, damit das funktioniert. Ich werde zu meinem Asset-Panel gehen und mir diese auch schnappen. Ich wähle einige generische aus , die wir alle verwenden können. Es ist also im Portfolio und im Miniaturbild eins bis sechs. Also hol dir diese und lege sie einfach auf deine Seite. Ich werde im Assets-Panel landen dein eigenes Portfolio-Zeug schlagen. Und wir beginnen damit, dass ich mein Bild löschen und es einfach direkt von dort ziehen kann . Ich bin mir sicher, dass es im div-Tag steht. Mach es hier drüben. Los geht's. Ordnung, so toll. Ich habe ein Bild. Es braucht keine Heizung und keinen Knopf. Gehen wir nicht zu viel weiter. Lassen Sie uns sagen, obwohl ich die Miniaturansicht der Karte anbringen werde, setzen wir einfach eine Hintergrundfarbe darauf. Kam rein aber Alt oder Wahltaste klicke auf diese Chevrons. Ich gehe auf meine Tafel. Ich werde die Dub-Biografie stylen , die breit genug sein wird. Was wir wirklich tun wollen, ist ein paar davon mit Überschriften unterschiedlicher Größe zu haben . Und wir wollen den Knopf unten rechts. Also hole ich mir ein paar Texte. Kopiere es einfach und füge es von diesem Ding ein. Kopieren und Einfügen. Ich werde, ich habe es hier drüben kopiert und eingefügt. Ich habe also ein paar verschiedene. Und jetzt zoome ich und wechsle einfach zu verschiedenen Überschriften und tausche diese Bilder aus. Okay, wenn ich die Ränder an der Außenseite ignoriere, werde ich am Ende dieses Videos stylen, ich möchte dich nur an einen Punkt bringen, an dem ich den Button sowohl hier drüben haben möchte als auch ich alles an der unten, weil diese Überschriften im Moment, weil diese Überschriften unterschiedlich sind, nicht ganz unten steht. Es ist also ein Job namens Flexbox. Also haben wir die Startaufstellung gemacht, es ist großartig. Sag konsequent. Aber wir wollen ein paar lustige Sachen machen. Also werden wir Flexbox verwenden. Also habe ich mein Karten-Thumbnail , das alles umschließt. Ich bin ein Kind des Netzes. Okay. Wir werden das ignorieren, denn was wir tun werden, ist zu Layout zu gehen und zu sagen, dass Sie jetzt das übergeordnete Element aller Flexbox sind und vertikal sein müssen. Und es muss sich nicht dehnen, sobald es standardmäßig gedehnt wird. Okay, cool. Um es nach rechts zu bewegen, haben wir das früher gemacht. Denken Sie also daran, dass die Eltern generische Dinge machen, aber das Kind kann rebellisch sein und sagen, dass Sie Charter Flex sind und eine richtige Ausrichtung haben. Los geht's. Das nächste, was wir tun wollen, ist, dass wir umziehen müssen. Warum wurde der nicht verschoben? Warum war das da und nicht dieses? Weil dieser eine Klasse bekommen hat, als ich sie geändert habe. In diesem Fall wurde diese Klasse nicht angewendet. Also nenne ich es Knopfkarte. Okay, und ich werde es hier mit meinen super süßen Abkürzungen spielen , die wir vorhin gelernt haben, wo du früher bei Command and Enter warst. Sie sehen, es ist gerade bei den Stilen hier angestiegen. Und ich kann die Schaltfläche eingeben. Ich benutze meine Pfeiltasten, um nach unten zu gehen , um es auf diese anzuwenden. Das gleiche gilt für diesen. Befehls- oder Control-Eingabe. Und wir holen uns eine Karte, was auch immer wir wollen. Es ist wahrscheinlich gut, oder? Sie haben alle die Klasse beworben. Also machen wir dasselbe, diese rote Linie. Wie kommen wir in den Boden und stoßen ihn hinein? das große Ding ausgewählt ist , können Sie zu Ihrem Abstand gehen. Und wenn Sie den Rand auf Auto setzen, bedeutet auto nur füllen. Intellekt kann sich nicht mehr füllen. Okay. Es dehnt sich irgendwie aus und drängt, bis es nicht mehr gehen kann. Anstatt ihm eine tatsächliche Größe zu geben, geben Sie ihm einen Spielraum. Dies funktioniert nur, wenn Sie das übergeordnete Element auf Flexbox und das untergeordnete Element auch auf margin auto gesetzt haben . Das ist der große Trick dafür. Jetzt lass uns reingehen und wir werden mehr Probleme verursachen, aber lerne mehr. Lass uns das machen. Also ich will das. Ebenfalls. Ich habe es nicht wirklich so gemacht. Lass uns das Wenige sehen, wir machen das, wir werden versuchen, es ein bisschen mehr zu machen. Anstatt den Navigator zu verwenden, verwenden wir das Karten-Thumbnail. Was ich tun möchte, ist, dass ich die paar Dinge aufpolstern möchte . Ich möchte, dass es eine bestimmte Höhe oder eine Mindesthöhe hat, also sind sie alle gleich. Es gibt also ein Karten-Thumbnail , das eine Größe von haben wird, ich werde keine Höhe verwenden. Denken Sie daran, dass wir eine Mindesthöhe von 300 verwenden können Eine schreckliche Vermutung. Ich gehe so lange hoch, bis ich etwas gefunden habe. Ich lasse Platz für ein drittes, ein drittes Stück Text. Und ich werde diesen Abstand wahrscheinlich verringern, aber ich bin auf eine minimale Höhe gegangen. Diese Jungs kommen alle für die, kommen auch runter für die Fahrt, was cool ist. Dann wird Nixon das was wir gerade getan haben, total ruinieren. Denn was ich gerne machen würde, ist, dass ich außen Polster anbringen möchte , jetzt könnte ich eine Klasse darum herum platzieren, Klasse darum, aber eine Klasse darum herum. Aber offensichtlich ist es besser, es um die Verpackung zu legen. Das Problem ist, ist das Bild, ich möchte bis zum Rand gehen. Gestaltung. Das Bild geht bis zum Rand, aber nur dieser Brocken. Okay, also ich könnte einfach Kabeljau gehen, Miniaturbild-Abstand, Shift gedrückt halten und es tut mir nicht leid, kein Randauffüllen. Okay. Ich könnte das machen , wenn wir das wollten. Es ist nicht das, was ich wollte. Denn was ich will, ist nur Abstand hier unten. Also werde ich ein kleines Div darin erstellen, okay, ein weiteres Div und lege all diesen Müll hinein und mache es. Das Problem ist, dass ich es gut gemacht habe, nicht der Ärger an der ganzen Flexbox, den ich mit diesem externen Wrapper gemacht habe , braucht es nicht mehr wirklich. Ich kann es dort lassen. Lass es uns dort lassen und ich zeige es dir wenn wir es ausschalten, es macht nichts. Also schnappe ich mir ein div-Tag. Ich klicke hier rein. Ich gehe Command D und versuche div um mein Mikrofon zu tippen und ich sage, okay, ich werde alles reinwerfen. Zum Glück, geh da rein. Und dann gehen wir rein. Und sind wir da hin gegangen. Jetzt habe ich es nur für diesen getan. Ich muss es für all diese anderen wiederholen. Und ich hätte es von Anfang an gemacht, aber ich wollte nicht zu viel davon verwechseln. Also lasst uns jetzt verwirren , denn das wird komisch. Weil, naja, ich versuche einfach, dass du dich zusammen wiegst. Also dieser hier, ich gebe einen Namen. Ich nenne das dort meinen Kabeljau Lower Rapa, wenn es mir gut geht. Und ich möchte ihm etwas Polsterung geben, gedrückt halten, Shift, einen Drohnen-Soundeffekt. Okay, und los geht's. Also hat das aufgehört zu funktionieren. Okay, diese Klasse wurde immer noch angewendet. Es ist immer noch automatisch oben drauf. Okay, aber es macht nicht seinen Job. Nun, das ist es irgendwie. Lassen Sie uns das bei allen wiederholen, damit wir es können, es wird Ihnen die Verrücktheit leichter zeigen. Also kopiere ich einfach dieses Div und füge es in alle ein. Ich werde Jason dazu bringen, einfach durchzugehen und mich zu beschleunigen. Okay. Wenn also die Kartenverpackung gesenkt wird, werde ich es weitermachen und die Überschrift ändern. Also lass uns rasen. Okay, also erster Schritt, es klebt nicht am Boden. Okay. Wie haben wir das gemacht? Das stimmt. Wir haben uns die äußere Hülle geschnappt, die ein bisschen wird, und lassen Sie uns sie aufräumen. Schauen wir mal, sehen besser aus. Also meine Rasterschnitt-Thumbnails in diesen Karten, Thumbnails funktionieren nur auf dem untersten Stamm. Okay. Und dieser hier, mein Kabeljau Lower Rapid muss schon ein Kind von Filmen sein. Okay. Das war nur von dem Original , das wir gemacht haben. Lassen Sie uns das loswerden, weil wir es nicht brauchen, weil es eindeutig nicht funktioniert. Also der äußere Wrapper, gehen wir zurück zum Block. Gehen wir zu dem kleinen Wrapper um diesen unteren Brocken, okay? Und sag einfach, dass du jetzt die Eltern bist. Und du musst vertikal sein. Und es erinnert sich, es ist irgendwie cool, als hätte ich angenommen, dass es wieder nach links fallen würde. Aber es erinnert sich, dass es Top-Auto hat. Und es erinnert sich, dass es richtig ausgerichtet ist. Aber denken Sie daran, dass es Tele heißt. Es heißt, dass es so ist. Aber das scheint nicht zuzustimmen. Das tut es auch nicht. Das sieht irgendwie so aus, aber es ist einfach die größte Box. Das ist es, was es noch größer macht. Also hat es das Kabeljau-Thumbnail gepackt, das Ganze. Schnappen wir uns meine Größe. Ich kann gehen Wir hatten eine Mindestgröße. Gehen wir auf 600. Sie werden feststellen, dass er nicht einmal arbeitet. Was also passiert, ist dieser Wrapper hier drin. Wir haben diesen kleinen Wrapper gesagt. Okay. Da ist der untere Cadoret hinten. Kannst du sehen, wenn du dir die Dimensionen ansiehst, es macht es perfekt. Schau dir das hier an. Okay, er wird dem auf den Grund befohlen, aber es wird einfach nicht größer. Kannst du das sehen? Es ist ganz unten in diesem Fall, aber es ist nicht so, es hat keine Ahnung was diese externen Dinge tun. Wie bringen wir es dazu , es zu erkennen? tun wir nicht. Dieses Ding hier wird nicht die Mindesthöhe erreichen weil es nur seinen Elternteil Rapa sehen kann. Es macht also keinen Sinn, es dem Opa oder dem richtig hohen anzutun. Also meine mindestens 600 Pixel, werde ich löschen, wenn ich Alt oder Option gedrückt halte. Und es wird dieser Rapper sein, der mir meine Mindestgröße geben wird. Ich mache es bei den Eltern von ihnen. Geben wir also 500 Pixel ein. Das ist viel zu viel dafür, aber es funktioniert. Okay. Ich halte die Umschalttaste gedrückt und benutze meinen Abwärtspfeil, um es zu bekommen damit ich es kann, ja, das wird meine Größe sein. Das alles kann ein wenig verwirrend sein. Ich schätze, was ich nicht machen möchte, ist nur Übungen zu machen, aber alles läuft gut , denn das war auch für mich ein bisschen ein Kopfkratzer. Ich dachte mir, warum das Knie unten ist. Und erst als ich meine Maus bewegte und die kleine blaue Linie sah, im Gegensatz zu dir, er tut nicht , was ich gesagt habe. Okay. Er ist unten in der Box. Ich habe sie in seine Eltern gesteckt, aber er hat keine Ahnung weiter oben in der Kette, was los ist. Man kann nur erkennen, was in seiner Art von einem Step-Up-Elternteil steckt , der jetzt genauso niedrig ist wie eine Katze. Also haben wir einfach die Mindesthöhe von der äußeren Hülle auf die innere umgestellt . Wir lösen das Problem. Jetzt werde ich das Styling tatsächlich verlassen. Wir werden es zusammen in einem zukünftigen Video machen , weil ich denke , das ist genug, viel gemacht. Dann denke ich darüber nach, jetzt , sobald wir es gebaut haben, kann ich meinen Kabeljau, Miniaturbild, Kopieren nach Leerzeichen, Raum, Raum, Raum, Raum, Raum einfügen. Und wir können viele dieser Typen haben und einfach die Bilder austauschen. Ordnung, das Wichtigste, an das man sich erinnern sollte, ist, dass dieses Kind meiner Eltern Flexbox den Rand oben braucht , um automatisch zu sein, und wir haben die Box herausgefunden, dass der Elternteil, in dem er ist, groß genug sein muss dann kannst du nach unten drücken. Ordnung, weiter zum nächsten Video. Es gibt Bitteres. Werde einfacher. Es wird leicht einfacher. Jetzt wird es ein bisschen schwieriger, dann wird es richtig einfach. Sobald Sie die Struktur verstanden haben, können die Dinge ein bisschen getroffen werden. Dann passieren all die wirklich einfachen lustigen Sachen. Ich verspreche es. Ordnung, danke. Video. 52. Position in absoluter und relativer Erklärung in Webflow: Hallo zusammen. Schau, was wir haben. Wir haben einen Knopf in der oberen Ecke über unserem Bild. Es ist übertrieben. Dieses überlappende Zeug. Es ist entweder metrisch oder absolut positionierbar. Schau, bewege es herum. Es ist einfach, einfach ish. Lass mich einspringen und dir zeigen, wie es geht. Gleich zuerst füge ich einen Button hinzu, so schmerzhaft, zieh ihn rein. Ich werde es zwischen diese Titel stellen, nur weil ich Teil der Positionierung ausdrücken möchte, was es tut, und dafür wird es hilfreich sein. Also gebe ich ihm ein Plus. Ich gehe das zu weit. Dies liegt nur daran, dass es ein Kind einer Flexbox ist. Wenn Sie keine Flexbox eingerichtet haben, müssen Sie dies nicht tun, aber ich habe sie nach links gestellt und jetzt muss ich sie nach oben bewegen. Eigentlich mache ich zwei Versionen davon. Eine mit absolut, N1, unter Verwendung von relativ. Also gebe ich ihm Namen. Das wird mein Knopf sein. Okay, sie existieren bereits, wird mein Button plus zwei davon sein. Aber Button plus eins. Und ich kopiere es und füge es hier ein. Schnapp es dir. Ich habe das Ganze gepackt und kopiert und eingefügt. Nur du kopierst. Sie fügen an derselben Position ein. Jetzt gebe ich dem einen anderen Kurs. Du hast das wahrscheinlich schon getan. Wenn du gehst, benenne ich es einfach Nummer zwei um. Okay. Du hast es nicht umbenannt. Sie haben alle Klassen in Nummer zwei umbenannt. Schau dir an, dieser erste ist jetzt Nummer zwei. Was Sie also tun müssen, ist das rückgängig zu machen und zu sagen, dass wir die Klasse tatsächlich duplizieren. Oder Sie können die Klasse löschen und erneut bearbeiten. Ordnung, wir haben also zwei separate. Dieser heißt Eins. Gehen wir also zu diesem speziellen Button. Sie können jedes Element, jeden Text, ein div-Tag verwenden. Du kannst alles positionieren. Schauen wir uns die Position an. Es wird das alles beenden. Position öffnen. Die Standardeinstellung ist static. Okay? Wir schauen uns die Verwandten an. Okay, und dann klicken wir auf Halten und ziehen einige davon. Beobachten Sie. Schau, es bewegt sich. Jetzt hey, gehe hoch und ich klicke und ziehe nach rechts. Ein bisschen schleppend, los. Los geht's. Wir haben es in der Ecke, gestiegen wie negativ 250 und über 256, 265, komm aufs Gehirn. Exzellent. Aber es hat dort ein großes Loch hinterlassen. Das macht Relative also, wenn Sie alles ganz lassen müssen , sie sind großartig. tue ich nie. Ich will nur sagen, dass du absolut sein wirst. Der Cousin zum Verwandten. Aber sieh dir an, was hier passiert , wenn ich es auf absolut setze. Schau, schließ irgendwie die Lücke. Und genau das will ich. Ich will jetzt ein bisschen rauf gehen, hier drüben ein bisschen rein. Los geht's. Und du sagst: Großartig. Aber lass uns einfach absolut für alles verwenden. Und es wird funktionieren, als würde es jetzt total funktionieren, du stößt auf ein kleines Problem. Lassen Sie mich erklären , was passieren könnte. Ist das im Moment, schauen wir uns diesen ersten Button an, diesen hier. Es ist relativ zu sich selbst. Es weiß, wo es früher auf der Welt war. Es kann also bis zu 50 und bis zu 65 steigen. Dieser aber, weil die Lücken ihn im Grunde in der Matrix geschlossen haben. Es weiß nicht , wo es früher war. Es heißt also, dass ich relativ zu dem bin . In diesem Fall der Körper, was er ist, tatsächlich relativ zum nächsten Elternteil. Okay, also im Moment ist der nächste Elternteil für diesen Kerl mein unteres Kartenpapier. Das übergeordnete Element dieses Bildes ist das ausgeschnittene Miniaturbild. Es gibt auch ein Elternteil davon, wünscht sich mein Raster. Es gibt eine Menge Aussehen. Auf diesem Button steht, dass ich nach dem nächsten Elternteil suchen werde , der zu Verwandten sitzt. Okay. Das haben wir schon nebenbei gemacht. Aber in dem Moment, in dem ich nichts habe ist keiner dieser Eltern relativ, also geht es bis zum Körper zurück. Und es funktioniert ish. Okay? Das Problem dabei ist jedoch, dass Sie diese riesigen Zahlen sehen können? Okay? Es ist ungefähr 700.800. Okay. Es liegt daran, dass es relativ zum Körper ist. Der Körper beginnt hier drüben, also ist es ein Kreuz 800.844 und runter 724. Okay. Und das ist in Ordnung. Solange du die Position nicht änderst. Nehmen wir an, ich mache es viel kleiner. Lass uns meine Mindestgröße messen. Ich halte die Umschalttaste gedrückt und drücke meinen Abwärtspfeil. Ich habe meinen Knopf hier unten. Okay. Nun, nein. Er bewegt sich. Dieser Typ war relativ zu sich selbst, weil sich diese Position bewegte. Er ist umgezogen. Dieser Typ. Er ist relativ zur oberen linken Ecke des Körpers und tut immer noch genau das, was wir ihnen gesagt haben. Okay. Er ist immer noch 800.700 unten. Es spielt keine Rolle, was um sie herum vor sich geht. Okay. Blöde Kiste. Okay. Was wir also tun können, ist, uns irgendwie zu bewegen, was das war. Und hatte viele Undo, Undo, Undo, Undo, Undo. Los geht's. Ordnung, also alles, was wir tun müssen, ist einen seiner Eltern zu setzen , um etwas zu relativieren , das sich mit ihnen bewegen wird, was dieses Ding ist oder das Karten-Thumbnail wird sich total bewegen. Aber lasst uns diese Kabeljauhülle benutzen. Wir setzen ihn an einen Verwandten und es wird kaputt gehen. Es ist okay. Du Knopfdruck ist weg. Okay, das ist also irrelevant relativ. Mein Button kann sie nur hier drüben anklicken . Er ist immer noch da. Er ist hier unten. Er ist immer noch auf 700 mal 800 eingestellt. Okay, also erinnert er sich immer noch daran. Aber er ist jetzt relativ zu diesem Ding, das ein bisschen da ist. Also geht er quasi wie du es im Körper getan hast , um auf die Idee zu kommen. Manchmal bist du vielleicht außerhalb des Bildschirms. Er könnte total sagen, wo ist er? Er könnte total wie dort drüben sein. Du wirst ihn nie wiedersehen. Der Trick besteht nur darin, diese zu klären. Denken Sie daran, Wahltaste oder Alt gedrückt zu halten, klicken Sie Es geht zurück zu dem, wo du angefangen hast. Und jetzt können wir sie rüberziehen. Und er ist relativ zu diesem Elternteil, was in unserem Fall sehr eng ist , wird sich auf und ab bewegen. Gehen Sie zu diesem Punkt, der Tangente zu 100 ist. Und sieh mal, es kam zur Sprache, weil er relativ dazu ist, nicht mit dem Körper. Der Trick mit Absolute ist also, dass es eine Weile funktioniert , bis Sie etwas ändern und dann nicht mehr. Wenn das passiert, hast du einfach vergessen zu sagen, dass du relativ zu etwas bist, einer Art Eltern, einigen, du musst es vielleicht in ein div-Tag einpacken , das nichts anderes tut. Dann sei relativ, okay, also schnapp dir die Eltern, mach sie relativ, tu nichts anderes. Jetzt ist er relativ zu meinem Katalog-Wrapper. Das ergibt Sinn. Eine letzte Sache, die Sie auffallen könnte , im Moment nicht, ist manchmal, den Knopf hier zu verpassen , wenn Sie sie absolut positionieren und bewegen. Er verschwindet. Es geht, verschwindet einfach. Im Moment täuschen alle es vor. Er macht das. Er mag, ich kann sie hier in meinem Navigator anklicken oder nimmt er einen Knopf. Aber ich kann ihn nicht sehen. Wo ist er? Ist er leer? Denn eigentlich direkt hinter diesem Bild sich der sogenannte Z-Index. Da ist also standardmäßig mein Button. Okay, wenn ich das klarstelle, geht es ihm gut. Aber manchmal verwenden Sie vielleicht das Projekt oder die Vorlage einer anderen Person und lieben Miss mit dem Z-Index, von dem sie gesagt haben, dass das Bild hier eine relative Position sein wird von dem sie gesagt haben, dass das Bild hier eine relative Position und ich der Z-Index von einem sein werde. Warum habe ich es relativ und absolut gemacht? Weil ich möchte , dass sie diesen Raum halten denn wenn ich absolut gehe, wird es ein bisschen schwierig und räumt aus dem Weltraum auf und springt relativ heraus, um wieder an deinen Platz zu kommen , halte deine Ort. Und alles. Sie haben den Z-Index zu eins gesagt. Also kann ich zu meinem Button gehen, sagen Sie Button. Du wärst jetzt zwei, ich gewinne. Und dann könnte das Bild gehen, du wartest diese drei, okay? Und du kannst es ausfechten. Manchmal, wenn man den von jemand anderem bekommt, geht ein cleverer Designer oder entwickelt : Oh mein Gott, ich werde das einfach 2999999 drehen. Und dann drehst du die ganze Zeit triffst, wo ist es? Wo drückt mein Knopf? Und du gehst zu drei. Du könntest für immer dort sein. Okay, du musst klüger sein und 99999999 eingeben. Das wird knifflig. Versuche hoch zu springen, bleib im Teenageralter. Weil die arme nächste Person vielleicht versucht, so viele Neunen einzugeben. Das macht all diese Dinge nicht aus, aber Sie kommen auf die Idee, solange die Z-Zahl höher ist. Okay, das hier, ich werde einfach klären, solange es höher ist, es ist in Ordnung. Das gilt für alles. Wenn Sie einen anderen Teil Ihres Projekts finden dem etwas nach unten rutscht, ist so etwas wie dieser der Index. Es ist die Größe, muss nur mindestens eine höher sein mindestens eine höher als die Person. Es rutscht darunter. Ordnung, wie war das? Es gibt einen kniffligen. Positionierung. Absolut stand auf meinem Plan und dann dachte ich, es wäre zu heiß. Gehen wir aus seinen Engeln raus, dann spicken wir rein und wieder raus. Ich habe das Gefühl, dass wir jetzt, wo wir Teil dieses Kurses sind, das Gefühl habe, dass wir es in den Griff bekommen. Und Sie kommen wahrscheinlich zum Ende dieses Kurses und gehen. Er hat uns jedes einzelne davon beigebracht , außer der Position. Warum hat er das nicht getan? Weil es schwierig ist und Essentials sein soll. Es ist der längste Kurs, den ich je gemacht habe. Aber hey, Webdesign ist interessant und es gibt viel zu verstehen. Du gehst also absolut in Position, nicht so hart oder dein Gehirn schmilzt. Eines dieser beiden Dinge ist passiert. Ordnung, das ist es. Wir sehen uns im nächsten Video. 53. Sticky navbar footer webflow position klebrig nicht funktioniert: Hallo du, du unterstützt dieses Video, das wir uns ansehen werden, sieh dir dieses Navi an. Ja, ein sehr minimalistisches Navi ist ein Nerv. Aber das Gute daran ist, dass es oben haftet und die Dinge darunter scrollen und man kann sehen, sie hier dasselbe für dieses Filmmaterial auf der Unterseite tun, es klebt unten. Es ist relativ einfach zu machen. Sie verwenden die Sticky-Option in Position, wenn Sie hier sind weil Sie das getan haben und es einfach nicht funktioniert. Sie müssen die oberste Zahl auf Null setzen. Und du wirst ein Weg sein. Aber für Leute , die es noch nie zuvor gemacht haben, lassen Sie uns eintauchen. Ordnung, wir behandeln es jetzt. Das Menü sieht nicht sehr gut aus, aber wir haben eine Navigationsleiste oben auf einer idealen Schaltfläche. Stellen Sie sich also eine schöne Navigation , die Sie ganz oben halten möchten. Ich mache es in diesem Teil des Kurses, obwohl der Name noch nicht ganz fertig ist, denn wenn der Layoutabschnitt des Kurses, also möchte ich alles irgendwie zusammenhalten. So klebrig ist komisch, es ist einfach und knifflig. Ordnung? Also habe ich alles, was ich will, an die Spitze, ich gehe auf Position. Es gibt diese Option hier, es heißt Sticky und dann gehst du in die Vorschau und arbeitest nicht. Das einzige, was Sie tun müssen, ist zu sagen, der Kleber muss, er braucht eine Höhe. In diesem Fall wollte ich bleiben, um oben zu schreiben, also drücke ich Null und drücke die Eingabetaste. Jetzt Command Shift P, Control Shift P auf einem PC. Schau dir das an. Es steckt dort fest. Werde uns kriegen. Was wir tun könnten. Wenn Sie ein Sticky NAB machen wollen, müssen Sie keine Haftnotiz machen, dass die Navigation eine Hintergrundfarbe von Weiß hat. Ich könnte die Opazität etwas verringern, damit wir darunter etwas Peaking machen können. Damit lass uns jetzt mal schauen es funktioniert sogar im Anzeigemodus. Und Sie können hier sehen, der Designer, dass Sie keine Vorschau sehen müssen. Sie können entscheiden, wie Sie das machen. Okay? Möge ich, es muss wohl dunkler sein. Ich möchte nur darauf hinweisen, was sich darunter befindet. Okay, ich möchte nicht wirklich alle Z-Index-E/A abdecken. Ich tue so, als hätte ich das mit Absicht getan. Warum steht das darüber? Warum ist der ganze Rest darunter? Erinnerst du dich an den Z-Index? Also werde ich sagen , dass diese Navigation auf einen Z-Index von 1.000 gesetzt wird. Okay? Es gibt mir auf dieser Seite auch eine andere. Es gibt mir zehn oder neun Optionen. Sie können negative Zs setzen. Kenntnis der Optionen. Zum Stapeln. Du könntest deine Navigation in der Regel in deinem eigenen Kopf machen , 100, dann hast du 100 Bits Stapelung. Aber du weißt, dass dein Navi auf 100 geht. Jetzt ist es oben. Verstehen? Ordnung, das Gleiche ist wahr. Wenn Sie Footer, Footer möchten , möchten Sie wahrscheinlich nicht klebrig sein. Vielleicht ist es wie ein Aufruf zum Handeln als eine Art Benachrichtigung. Sie könnten also eine Sache sein, die du tun willst. Fügen wir unten einen Abschnitt hinzu. Ich kann da nicht reingehen. Geh da rein. Wie kommt man an die richtige Stelle? Ich nenne das eine Abschnittsfußzeile. Und du kannst das Gleiche tun. Ich füge eine Hintergrundfarbe um es deutlich zu machen. Und ich werde das Gleiche tun. Lass es uns zu klebrig , um es nicht oben oder unten zu setzen, um es auf Null zu setzen. Okay, und das sollte funktionieren. Und hier wird es funktionieren. Schau, dass es da irgendwie feststeckt. Es liegt an Ihnen, ob Sie das nützlich finden oder nicht. Die Leute machen das nicht sehr oft, aber die Leute fragen mich gerne, wie es geht. Und los geht's. Das Einzige daran , dieser Abschnitt hier, und was ich gehen werde, wer erinnert sich? Es hat keine Höhe. Das ist wirklich eine Größe von einem Minimum. Es hat eine Mindesthöhe. Lass uns 50 Pixel machen. Vielleicht ist nur ein bisschen Text drin, um zu erklären, dass ein Verkauf stattfindet oder etwas anderes. Klicke hier. Ordnung, das ist es, klebrige Navigation, klebrige Fußzeilen. Denken Sie daran, das obere K für die Navigation auf Null oder eine Art Zahl und dann etwas für das untere für unsere Fußzeile zu setzen. Und du musst vielleicht mit dem Z-Index herumspielen , wenn die Dinge darunter gehen oder du kannst meinen überprüfen, weil ich nicht hoch genug nach oben scrollen kann , um das darunter zu bringen. Lass uns einen Blick darauf werfen. Vielleicht kann dieser das nicht. Sie sind es auch nicht. Ordnung, das reicht. Wir sehen uns im nächsten Video. 54. Kursprojekt 05 - Portfolio-Homepage: Es ist Klassenprojektzeit und wahrscheinlich das wichtigste Klassenprojekt , das wir bisher gemacht haben, wir wahrscheinlich im gesamten Kurs machen werden. Ich möchte, dass Sie alle Fähigkeiten einsetzen , die wir bisher in diesem Kurs gelernt haben. Ich habe sie alle hier aufgelistet, nur als Referenz für die Dinge, die Sie tun sollten , und wenden Sie sie an , um von dort zu kommen, wo wir jetzt sind. Oder wenn Sie noch nicht bei Null angefangen haben, erstellen Sie eine neue Seite. Und ich möchte zu dieser Phase kommen in der Sie eine Homepage haben, die Ihr gesamtes Portfolio enthält und verschiedene Breakpoints hat. Also werde ich Sie dazu bringen, auch Responsive Design zu machen. Verwenden Sie jetzt alle Ihre eigenen, Ihren Namen, Ihre eigenen Farben, Ihre eigene Schriftart, alle Ihre Bilder. Wenn du meiner Struktur folgen willst. Ich habe einen Ordner hinzugefügt , der Rechner zwei der Übungsdateien unter Portfolio ist, es gibt einen namens fertiges Design. Ich habe nur Screenshots der Struktur eingefügt, damit Sie wissen, was los sein muss. Okay. Ich habe auch all die verschiedenen Breakpoints aufgenommen. Ich habe die Figma in XD-Datei, wenn du sie öffnen und zu dir schauen willst , oder einfach nur ihre Screenshots ansehen willst. Es sieht also lang aus und es ist irgendwie so, schätze ich, wenn du noch nichts getan hast. Aber mein Rat ist, werde ich ein Lösungsvideo machen nächstes werde ich ein Lösungsvideo machen und alles selbst machen , damit Sie sehen können, wie ich zu meinem Punkt gekommen bin. Aber mein Rat ist, es zuerst selbst zu machen , diese Probleme zu lösen und herauszufinden, wie viel Art des Lernens wahrscheinlich das beste Lernen ist , das du in dieser ganzen Sache machen wirst , die ich zeige du, was zu tun ist, ist gut, aber du bringst das Zeug nicht dazu, reinzukommen und zu wissen, dass es Probleme geben wird. Es gibt nur, dein neues wird ein paar knifflige Teile sein. Der schwierigste Teil ist ein Cheat oder mein Cheat in dieser Navigation. Also auf dieser Navigation oben hier. Okay, ich möchte mich auf diese Seite drängen lassen, um diese Seite zu drängen. Und wir haben schon ähnliche Sachen gemacht. Wir haben die Eltern zum Flex gebracht. Jetzt haben wir es an die Ränder geschoben. Das einzige Problem mit dieser Struktur, wenn Sie mir jetzt gefolgt sind , ist, dass wir einen Container haben. Sie könnten Flex auf diesen Behälter auftragen und sie herausdrücken lassen. Aber auf diesen Container, den uns der Workflow bietet, wurde tatsächlich ein gewisses Styling angewendet, und es kann Probleme verursachen, und das tut es in diesem Fall. Obwohl Sie einen Behälter haben, ist es besser, ihn in diesen Behälter zu stellen. Setze ein, nur ein, nur ein einfaches altes Div wie dieses hier. Und fange damit an. Verwenden Sie das als Verpackung oder nicht, den Behälter, da bereits ein gewisses Styling aufgetragen wurde. Also lege einfach einen weiteren Wrapper hinein. Und diese, mein Textlogo und mein Knopf im Inneren. Es ist das einzige, was dich auffallen könnte. Es gibt also einen kleinen Cheat, aber alles andere sollte so sein, du solltest über die Fähigkeiten verfügen oder zumindest , die wir im Kurs behandelt haben , um zu sehen, ob du es schaffen kannst. Mach weiter und mach es. Ich habe die verschiedenen Themen und die Elemente aufgelistet , die in der Navigation enthalten sein sollten. Es sollte ein Logo und eine Schaltfläche geben. In der Heldenbox sollte ein Held einen Knopf drückt, und ein Bild enthalten. Wenn Sie wissen möchten, was in welchem Bereich passiert. Die Herausforderung, eine kleine geheime Herausforderung, die ich für Sie habe , ist , dass sich das Bild in einem Kreis befindet. Wie macht man das? Ich möchte, dass du siehst, ob du das selbst herausfinden kannst. Es besteht aus zwei Teilen. Da sind die abgerundeten Ecken, aber Sie werden auch feststellen, dass ich quadratische Bilder verwendet habe. Du kannst schummeln und deine Bilder auf zwei Quadrate bringen. Aber wenn Sie Ihr eigenes Bild haben und rechteckig sind, werden Sie ein Problem finden. Und es ist eine Open-Book-Testprüfung, ein Forschungsprojekt. Ich gebe Ihnen einen Hinweis, wenn Sie online nach Lösungen dafür suchen. Wenn etwas namens Object passt, wirst du Oma wahrscheinlich dazu bringen, ihm zu sagen, dass ich Hallo gesagt habe. Wenn Sie das nicht schaffen, machen Sie sich keine Sorgen, wir behandeln es später im Kurs wenn wir Bilder der zweiten Stufe erstellen. Okay, ich wollte nur sehen, ob Sie etwas herausfinden können, denken das an Ihren eigenen kleinen Herausforderungsleistungen. Machen Sie einen Screenshot der vier verschiedenen Breakpoints Desktop, Tablet und der beiden Handys, und teilen Sie ihn dann, teilen Sie ihn im Aufgabenteil und auch in sozialen Medien. Ich würde gerne sehen, was du in den Kommentaren bekommst. Lassen Sie mich wissen, wo Sie festgefahren sind und einfach keine Lösung finden konnten. Weil es interessant wäre zu sehen, was andere Leute dort zu sagen haben. Ich hatte auch dieses Problem, aber ich habe es auf diese Weise behoben. Oder es gibt 1.000 Leute, die zu diesem Zeitpunkt in Webflow keine Ahnung hatten, wie sie das Problem beheben könnten. Und ich werde interessiert sein zu sehen, vielleicht muss ich zurückgehen und etwas in der Klasse hinzufügen. Aber wenn Sie etwas haben, das schwierig war und es vielleicht nicht repariert haben, legen Sie es auch dort hin. Seien Sie interessant zu wissen, wo sich all die Newbie-Probleme befinden. Ordnung, das war's. Geh und erstelle ein Portfolio. Und wie gesagt, nächstes kommt ein Lösungsvideo, aber schauen Sie sich das erst an, wenn Sie Ihr eigenes erstellt haben. Sie könnten einige Teile übrig lassen , weil Sie sie nicht reparieren können. Wir werden sie im nächsten Video zusammen machen. Aber ja, viel Spaß, löse die Probleme. Wir sehen uns im nächsten Video. Wie lange hat das gedauert? Wahrscheinlich ein paar Stunden. Es wird lang werden. Und je nach Können kann es sogar ein paar Tage dauern. Okay. Also nur damit du es weißt, es ist kein schneller Job und du machst es nicht falsch, wenn es ein paar Vokale braucht, okay? Tschüss. 55. Kursprojekt 05 - Portfolio-Homepage - Lösung Teil 1: Und wie ist es gelaufen? Wie hast du deine Version gemacht? Ich zeige dir jetzt, wie ich meins gemacht habe. Wir gehen von, ich gehe von dieser zu dieser vollständigeren Version über. Okay, es wird auf verschiedenen Geräten funktionieren. Und ich werde einige der Probleme lösen, die ich habe, wie ich sie löse. Und es wäre interessant, mach auf jeden Fall zuerst deine eigenen , damit du hier reinkommen und sagen kannst, oh, als hätte er es anders gemacht als ich, aber ich bin am gleichen Punkt angekommen oder ich bin dort stecken geblieben und habe es einfach übersprungen . Ich wollte, dass Haldane es macht. Okay. Dafür ist dieses Video gedacht, das dir meine Lösung für das, für das Klassenprojekt zeigt . Lass uns einsteigen. Stimmt's? Lass uns anfangen. Nun, ich habe tatsächlich angefangen, ich habe tatsächlich schon 25 Minuten von diesem Video gemacht. Und weißt du was? Ich stecke mein Mikrofon an. Deshalb ist er seit der Feindseligkeit, weil ich das noch einmal machen muss, das Mikrofon anschließen und das nächste Mal sagst du mir, dass ich dich hören kann. Ordnung, machen wir das nochmal. Wir fangen ganz oben an, okay, also raus aus diesem oberen Teil hier für die Navigation, okay? Und wir werden dieses hässliche Navi hier ganz oben haben. Was haben wir? Und so habe ich einen Knopf. Fügen wir einen Textblock für den Namen hinzu, okay, wenn Sie ein Logo haben, werfen Sie es hinein und Sie können ein Logo in einem anderen Programm erstellen . Illustrator. Dafür habe ich einen Kurs. Aber ja, ich habe gerade verstanden , was sie brauchen. A, ich gehe zum Textblock. Textblock ist hier kein Absatztext , weil es kein Absatztext und keine Überschrift ist. Facebook ist also eine generische Sache. Nein, ziehe es über meinen Knopf. Ich tippe meinen Namen ein. Daniel Scott. Folio, voller Stopp. Ich brauche eines der beiden Layouts, oder? Also mache ich es. Jetzt. Möglicherweise sind Sie zuerst auf dieses Problem gestoßen, das erste, und Sie haben Ihren Laptop schon gerne aus dem Fenster geworfen. Und ist das, dass du diesen Behälter machen kannst. Das ist einer dieser Container. Wir haben ihm eine Klasse gegeben, aber es ist ein Container. Sie können diese Flexbox erstellen, aber sie verursacht nur Probleme. Es ist also besser, ein Wrapper-Div um sich herum zu haben. Wie kommt es, dass Sie diesen Container fragen, diese Dinge hier eigentlich nur div-Tags , deren Workflow diesem Styling manchmal eine Menge Styling hinzugefügt hat, weil Sie es nicht erstellt haben und weil Sie es nicht erstellt haben und Ich weiß nicht, was los ist. Kann Sachen mit Dingen wie Filmen machen. Ich setze einfach einen Fahrraddiblock ein. Stecken Sie meinen Knopf rein, stecken Sie meine Zecken hinein, machen Sie die Bestellung richtig herum. Und dann hat das blockiert, was ich div, nav nennen werde . Ich mache ihm Filme. Und ich sage, geh an die Ränder. Da haben wir's. Der höhenmäßig in der Mitte. Wir sind ein paar Mal auf dieses Problem gestoßen, das ist, dass das Div nicht weiß, wie groß es ist. Schweine, wir haben ihm keine Größe gegeben. Die Höhe stammt von diesem Navi, was früher Sinn machte. Okay, es ist also nicht der Box-Shadow. Eigentlich behalte ich den Kastenschatten. Jedenfalls. Es stammt aus dieser Sektion nav, woher weiß ich das? Ich kann es hier irgendwie unter Größe sehen, Mindesthöhe ist auf 68 eingestellt. Wenn ich meine Befehlstaste gedrückt halte und darauf klicke, heißt es, dass sie herkommt, also ist sie nicht von hier, nicht von der Box aus der sie jetzt kommt. Also muss ich zu Abschnitt F gehen und sagen: Du bist nicht Null, weil das anders ist als das Löschen. Das Löschen ist anders als Null. In diesem Fall hätte es wahrscheinlich gut funktioniert, aber gewöhnen Sie sich einfach an, sie zu löschen, aber Option oder Alt klicken Sie darauf. Und ich werde es jetzt zu diesem Div Nav hinzufügen. Und es gibt ein U, eine Mindesthöhe von 68. Und es funktioniert irgendwie. Gehen wir zum Layout. Und standardmäßig dehnt es sich aus. Ich möchte zentriert sein. Und die Ränder. Los geht's. Nett. Okay, als Nächstes will ich das stylen. Okay, ich nenne das eine SMS. Und das wird Logo heißen. Und ich werde es machen, brauche ein Logo, ich werde es überprüfen. Es wird öffentlicher Sand sein. Es heißt, es sind 400, aber da drin ist es eine Art Mischung. Ich weiß, es ist das schwere Zeug und es sind 20 Pixel. Also lass uns das machen. Du, mein Freund, wirst also 20 Jahre alt. Du wirst mutig sein. Und ich denke, es gibt ein bisschen Negatives, das würzt. Ich werde es mir nur ansehen. Es sieht gut aus. Okay, dieses Stück hier, ich will, wer erinnert sich, wie ich das ändere? Denn wenn ich hier eine Combo-Klasse hinzufüge, okay, das wird meine sein, ich möchte, dass es die Farbe der Sekundarstufe ist. Es macht nicht alles. Wer ist reingekommen? Das ist eine Weile her. Okay. Wenn Sie sich erinnern, erhalten Sie einen Bonuspunkt. Sie wählen es aus und schließen es in dieses Span-Tag ein. Anstatt ein bisschen zu tun, nur ein bisschen. Okay. Und ich werde sagen, einfach Glück, dass ich mich daran erinnert habe. Ich habe hier unten die Farben der Zecken zweitrangig gemacht Erinnerst du dich, dass ich es zu einer globalen Klasse gemacht habe dass wir Klassen verwenden, Happy Dice, okay? Und was ich nicht machen will, ist machen. Diese Zecke tickt die Farben sekundär, je geringer das Gewicht, weil es auch dazu passt. Das will ich nicht. Okay, also möchte ich eine Combo-Klasse erstellen. Mache ich daraus eine globale Klasse? Werde ich es woanders wieder benutzen? Wahrscheinlich nicht. Vielleicht. Ich spreche davon, es global zu bewegen. Ich kann es mehrfach benutzen. Wenn ich es zu einer Combo-Klasse mache, Text oder unregelmäßig, werde ich es wahrscheinlich woanders verwenden. Also werde ich gehen Sind wir fertig? Ist das ein Span-Text? Also werde ich es zu einem globalen machen. Also was ich tun werde, ist mir ein Div-Tag zu schnappen. Sie könnten dies auf ein div-Tag anwenden. Ich werde nur einen Textblock bearbeiten, nur einen zufälligen. Okay, du wirst txt rigueur haben. Und es heißt irgendwie, dass du gezwungen bist , regelmäßig zu sein, fertig zu werden, ihn loszuwerden. Jetzt kann ich ein paar Klassen hinzufügen. Ich füge regulären Text als Nächstes hinzu, und ich füge auch sekundären Text hinzu. Es ist cool. Ich weiß es nicht. Ich fühle mich sehr erfolgreich als Webdesigner, wenn ich anfange, Unterricht zu haben und ich wiederverwenden kann. Schau mir an, wie ich Kurse wiederverwende. Schauen wir uns das an. Ja. Also wird Button eins interessant sein denn was für dieser Button, dieser Knopf wird wiederverwendet. Ich werde nicht einfach für jeden einen Knopf machen. Ich werde versuchen, sie mit Combo-Klassen aufzubauen. Okay? Weil ich einen großen habe, ich habe einen kleinen und dann ist da unten ein Treffen mit einem. Dieser ist tatsächlich ein bisschen kleiner als dieser größere. Was ich also tun muss, ist eine Art Basisklasse zu erstellen, wie die niedrigste, die den größten Teil der Arbeit wie abgerundete Ecken erledigt . Und vielleicht macht es auch die Farbe. Es macht alle Häkchen in Großbuchstaben, weil man sehen kann , dass sie alle in Großbuchstaben geschrieben sind und all diese, okay? Und gekauft, muss ich es mit dem allgemeinsten machen. Dieser wird nur verwendet, der große, und er wird einmal auf einer Seite verwendet. Dieser kleine wird hier oben benutzt. meinem Design gibt es keinen anderen Platz. Dieser wird mehrmals benutzt, und ich werde ihn eher immer wieder verwenden . Also werde ich das hier tatsächlich stylen. Und ich werde es hier unten nicht stylen, weil es hier ein paar seltsame Sachen im Code macht. Also wenn ich das loswerde, Dach irgendwie dehnbar. Ich möchte keine Positionierung von Kindern hinzufügen, tut mir leid, Kinderfilme und das tun , weil es Teil des Stils wäre. Und es ist nicht wirklich das, was ich will, weil es eine ziemlich einzigartige Sache ist. Also werde ich diesen stylen. Okay? In diesem Fall wurden ein paar Dinge darauf angewendet. Ich mag diesen Kastenschatten nicht mal, also werde ich ihn los. Button macht also ein paar Dinge. Was bewirkt es? Denken Sie an Wahltaste oder Alt-Klick Es gibt nur Hintergrund. Das ist seine einzige Aufgabe. Also werde ich diesen weiter benutzen. Okay, also macht er das. Was wollte ich sonst noch tun? Ich möchte, dass es in Großbuchstaben geschrieben wird. Okay? Ich möchte, dass es für meine Knöpfe fett ist, weil es genau das ist, was es hier drauf ist. Okay, ich möchte oben und unten etwas mehr Polsterung. Jetzt geht es um die Polsterung von oben und unten. Was du wirklich machen willst, ist das perfekt zu kopieren, okay, weil trainiere die Polsterung und lass es irgendwie schön kalkulieren. Das Problem ist, dass viele dieser Dinge mit bereits vorhandenen Dingen wie Margen einhergehen . Wenn ich Hera One betrachte, indem ich es mir ansehe, wo ist mein versteckter Held? Hat schon ein paar Sachen drauf. Es hat einen Rand von 20 oben und zehn unten , der von diesem Treffer herrührt. Wer das vor langer Zeit gemacht hat, als H 1s im Internet entschieden hat, wird alle diese Art von Standardfüllung haben. Okay, also wenn Sie versuchen, Dinge zu messen, müssen Sie einige der Standardgrößen berücksichtigen. Es gibt also einen Teil der Zeit. Wir gehen eigentlich so vor, als ob das irgendwie aussieht, das sieht nah genug aus. Okay, also gehe ich nah genug ran. Also ich möchte, dass ein Knopf etwas Polsterung hat. Mal sehen, ich sehe mir diesen an. Es sieht ein bisschen mehr aus. Eigentlich ist der Button-Text wahrscheinlich das, was ich als nächstes tun muss. Das ist also 14. Ich glaube, das sind wahrscheinlich 16. Meine Buttons werden eine Standardeinstellung haben, alle 14, dann fange an, das Auffüllen zu machen. Und ich denke, es könnte knapp sein. Wenn ich das machen würde, hätte ich auf einem anderen Bildschirm, damit ich es sehen kann. Aber das sieht man auf dem Bildschirm nicht. Also müssen wir diesen peinlichen Tanz machen. Du kannst Command 1.2 drücken, okay, für welche Tabs es gibt, okay, wir steuern 1.2 auf einem PC. Also das ist in Ordnung, ich denke die Polster oder direkt oben und unten, es liegt an den Kanten hier und den abgerundeten Ecken. Ich werde die abgerundeten Ecken mit diesem interessanten machen . Das ist die, an der ich diese kleine Aufgabe vorhin für dich erledigt habe. Wie man sie rundet, funktioniert sowohl für Schaltflächen als auch für Bilder. Also finde die Grenze. Okay, und mach die Runde hoch. Du kannst mich sehen, ich kann meins ganz hochziehen. Perfekt. Aber nehmen wir an, ich mache diese Höhe dieses Buttons. Also habe ich 20 Pixel daraus gemacht. Das ist alles, worauf Sie es in Webflow ziehen können. Aber nehmen wir an, ich mache die Höhe größer. Also sage ich, die Größe ist eine Mindesthöhe von 100 Pixeln. Siehst du, dass 20 es nicht schaffen? Ich wollte perfekt abgerundet sein , wenn das hier das Ziel ist, Leute, was Sie tun können, ist zu sagen dieser Grenzradius tatsächlich 200 beträgt. Du kannst weit darüber hinausgehen , wo es sein muss. Sie können diesen 2000, 20.000 XD herstellen und er wird immer nur super praktisch sein. Okay, also mach es nicht perfekt und mach alles, was perfekt ist. Denn wenn es größer wird, erhalten Sie am Ende kleine abgeschnittene Bits, wie ein übertriebenes. Vielleicht nicht so übertrieben, aber Sie können hier sehen, dass ich es näher bringen kann , näher kommen kann. Okay, mach es einfach statt 61, mach 100 draus. Dann wird es immer perfekt rund sein. Und das wird auch für dieses Bild funktionieren , wir machen das aber zusammen. Und ich will den Radius, setze ihn auf 100. Ich werde die Mindestgröße loswerden, oder? Wenn Sie die Mindesthöhe wählen, klicke ich auf Los. Es sieht ziemlich gut aus. Mir gefällt es. Ich denke, du brauchst mehr Polsterung an der Außenseite. Also lass uns das machen. Ziehe es zuerst in die falsche Richtung, ging in die andere Richtung zurück, dann eine angemessene Zeit, Ordnung, also habe ich meinen generischen Button. Dann hier unten können wir sagen, dass du, ich werde die Knopfkarte los, deine Klasse. Du beginnst als Button, generischer Button. Und dann haben wir die Klasse namens Button Card hinzugefügt. Okay, das hat das Ganze nach rechts überflutet. Und in diesem speziellen Fall oder jenem Fall der Zählung, denken Sie daran, dass Sie einfach zum Flicks-Kind gehen und sagen, richten Sie sich an der richtigen Stelle aus. Vielen Dank. In Ordnung, wir haben also einen Knopf. Lass uns eine kleine und eine große machen. Fangen Sie also mit dem Großen an. Also lass uns jetzt eine Combo-Klasse haben. Es macht keinen Sinn, dass es sich um eine globale Klasse handelt , da sie immer nur zwei Schaltflächen anwenden wird. Ich ziehe den Knopf L-O-G hoch. Sie können es ganz groß ausschreiben, wenn Sie möchten. Okay, und dieser braucht mehr Polsterung. Halten Sie auf beiden Seiten die Wahltaste oder die Alt-Taste gedrückt, während Sie etwas mehr ziehen. Und der Text, den ich kenne, ist, weil ich das schon gemacht habe. 16 erinnern sich an einiges davon. Aber es ist nicht deine Schuld. ich gebe dir die Schuld. Das ist also mein größter Knopf. Okay? Ja. Okay. Schauen wir uns das hier an. Muss ein kleiner Knopf sein und den Kastenschatten loswerden. Ich gehe rein. Und ich sage das Festival. Der Text ist, ich glaube, ich erinnere mich, dass es Topographie war, sagen wir heute Abend. Okay. Und die Polsterung wird deutlich sinken. Und das wird kommen. Los geht's. Ich bin glücklich. Eine Sache, die Sie finden werden , ist, dass Sie die Zecken hier sehen , sie haben die richtige Größe, aber sie sehen hier einfach nicht gleich aus. Es gibt Webdesign ist lustig wie Schriftarten, vor allem werden dem Computer und der Software zum Rendern gegeben . Sie sind nicht auf jedem Computer gleich. Also ist dein Computer im Grunde anders als mein Computer. Chrome unterscheidet sich von Firefox. Sie alle rendern die Schrift leicht unterschiedlich. Verbringen Sie also nicht zu lange damit, es zwischen hier und hier perfekt zu machen . Weil Sie vielleicht feststellen, dass es beim Laden in Firefox oder einem anderen Browser etwas anders aussehen wird. Die Schriftart wird von dem Ding gerendert , das versucht, sie dem Computer zu zeigen , und dem bisschen Software. Text sieht also in Photoshop nicht genauso aus wie in Illustrator, wie in Figma oder XD oder anderen Browsern. Also mach es nah dran, aber teste am Ende ein paar Tests. Werde jetzt nicht pixelgenau und putze ab und finde heraus, was falsch ist. Und bring es fast zu Ende. Du bringst es in die Nähe, wo du bist, machst ein paar Tests und siehst, wo das okay ist, vielleicht sagt Figma, dass es besonders mutig sein muss. Aber ich habe beschlossen, alles durchzugehen und tatsächlich alles 700 zu machen weil Browser sie im Allgemeinen nur ein bisschen kleiner zu machen scheinen . Eher wie das, was du in Figma hattest. Im Unkraut, Dan? Ja. Ja. Geh wieder auf Kurs. Also haben wir das hier und das. Ich brauche hier ein bisschen Polsterung. Also werde ich tun, ich werde ein paar Dinge tun. Ich bin mit der Zeilenhöhe nicht zufrieden, oder kommt sie von? Ich halte meine Affensteuertaste auf einem PC gedrückt, sie kommt von allen Einsen. Alle Einsen sind dort viel zu eng geworden. Und ich werde es auch los oder ich bin zurück. Wo bist du hingegangen? Ich bin verschwunden. Das Mikrofon funktioniert immer noch. Ich wüsste nicht, dass ich Windel bin. Jedenfalls. Es hat gut funktioniert. Und sie werden dort in Panik geraten. Und weil es ungefähr die Zeit ist, in der ich beim letzten Mal herausfand, dass es nicht funktioniert. Also was ich tun werde ist, dass ich diesen Heizungsheld loswerden werde, der irgendwo ist, wo ist er? Topographie. Nimm Schatten. Auf Wiedersehen. Mach Fotos. Ich mag ihn und ich möchte hier etwas Polsterung. Das ist interessant. Wie schiebe ich das auseinander? Weil dieses Ding in einem Raster ist. Okay. Es ist nicht in einer, es ist in der Flexbox, oder? Es ist ein David Bach. Und Sie könnten etwas Spielraum hinzufügen. Ich würde dem Button getrennt von der Button Lodge etwas Rand hinzufügen , ich würde das nennen. Ich würde einen Klassenaufruf einer globalen Klasse namens Margin Top hinzufügen. Und ich würde es groß oder klein machen, egal welche Größe du willst. Und das würde total funktionieren und das hättest du vielleicht getan . Was habe ich getan? Los geht's und kauften, weil hier Filme auf diese Art von Rapid Div-Block angewendet wurden, den wir hier haben, ich diblock genannt habe, was nicht großartig ist. Und ich sage, dass du es bist, was werden sie tun? Es ist in Ordnung. Und die Grid-Kinder, kein Layout. Er ist also ein Kind des Grids, aber er ist auch das Elternteil dieser Flexbox. Flexbox hat coole Dinge wie die Reihen werden meinen Aufwärtspfeil benutzen. Oh, sieh dir das an. Halten Sie vielleicht die Umschalttaste und oben gedrückt, um den gewünschten Abstand zu erhalten. Ordnung. Nein, das werde ich nicht tun. Ich werde die Zeilenhöhe verringern. Geh einfach weiter rein. In Ordnung, das nächste bisschen reicht dieses Bild. Stellen Sie sich vor, Sie werden sich auf etwas freuen. Wir bringen die Bilder rein. Ich habe ein paar, die du benutzen kannst meine schon gezogen, weil ich das schon gemacht habe. Gehen Sie also in Ihre Übungsdateien. Sie setzen Ihr eigenes Gesicht für Ihr Portfolio ein. Oder vielleicht eine generische Person von Unsplash oder steckt es ein, vielleicht einen Teil Ihrer Arbeit darin, vielleicht sind Sie spät dran, oder Sie können eine der Masken verwenden. Sie können also eines davon verwenden. Ich ziehe das hier rein. Okay. Er ist an die falsche Stelle gegangen. Also werde ich ihn dazu bringen, hinter diesem Diblock her zu sein. Er wird zu diesem nächsten Rasterelement übergehen weil es nur zwei Dinge in diesem Raster gibt, obwohl es hier viele gibt, sie sind alle in diesem Div-Tag eingeschlossen , in dem sie sich versteckt haben. Dieser Typ zweitens, großartig. Und das Coole an Grid ist, dass man den Kindern Dinge antun kann, okay, also dann dieses Gitter hier, irgendwo darin, es ist hier drinnen nicht gemacht. Das ist ein bisschen wie der Gesamtabstand und das Layout und so. Aber wähle einfach etwas aus und sag Grid Child, würdest du für mich in der Mitte ausrichten? Und lass uns die abgerundeten Ecken machen. Es ist genau das gleiche wie der Button. Komm einfach zurecht. Also gehen wir hier runter und gehen Grenzen. Du bist, du kannst nur bis zu 20 kriegen. Aber wir wissen, dass wir es auf 200 oder 1.000 erhöhen können. Überprüfe einfach, ob es abgeflachte Kanten hat. Und wenn Sie irgendwie paranoid sind, gehen Sie einfach auf 100.100,2, kurz 5.202, 50, keine Änderung. 250-200. Lass es einfach um 02:50 Uhr, dann weiß ich nicht warum ich etwas finde, das groß genug, aber nicht zu groß ist. Aber bis zu 999 würde Mehta. Okay. So abgerundet. Es muss auch etwas kleiner sein, weil es nicht so ist, wissen Sie, wir können die Lücke definitiv vergrößern. Das ist einfach genug zu tun oder zu beenden. Sie können Bilder aufnehmen, wir haben es früher im Kurs gemacht. Du kannst sie einfach ziehen und dir die Art von nicht jenem holen. Das hier. Okay. Der Pfeil da ist wie hey, wir gehen, ich werde ihn kleiner machen. Aber das, jede widersprüchliche Sache innerhalb dieser Gitterzelle. Und ich kann sagen, dass hier oben das Gitterkind auch so heilig werden kann. Und los geht's. Es sieht gut genug aus. Ordnung, schauen wir uns das an. Ich werde das los. Ich will nicht, dass es dort früher ankommt. Und was können wir noch tun? Was ich aber tun könnte, ist mein Instinkt war damals so die Fußzeile des Abschnitts. Ich brauche es nicht. Ich werde niemals diese klassische CSS-Sektionsfußzeile verwenden, oder sie könnte es tun, aber sie macht seltsame Dinge. Also mein, wie mein Webdesign-Gehirn sieht, werde es jetzt los, halte es sauber. So kann ich meinen Style-Manager in die Fußzeile eingeben. Und du kannst gehen und dann, okay, und das mache ich später, weil ich es hinzufügen werde und es wird seltsame Dinge tun und es wird mich verrückt machen. Ich weiß es gut. Ordnung, jetzt sind wir bei diesem Brocken dran. Was wir tun müssen, Dinge, die wir dort aufknöpfen müssen, die schon irgendwie nur noch Styling und nur kleine Kleinigkeiten brauchen . Lass uns diese kleinen Kleinigkeiten machen. Und das werde ich tun, ich werde all diese außer einem loswerden. Das ist die Schaltfläche, die bereits aus einem früheren Video funktioniert als wir die absolute Positionierung vorgenommen haben. Okay. Geh zurück zu diesem. nicht, wenn Sie Probleme damit hatten , weil ich das für den Moment wiederverwenden werde. Ich schnappe dich. Und ich möchte die Eltern nehmen, was ein bisschen schwierig ist, weil all diese Dinge im Weg stehen. Ich komme nicht zum Code-Thumbnail, ich kann es hier drüben anklicken. Es gibt also zwei Möglichkeiten, darauf zu klicken und zu sagen: Schneide sie jetzt aus, lösche oder klicke darauf. Und ich kann meinen Aufwärtspfeil benutzen und das packt die Eltern. Denken Sie an diesen Workflow-Teil. Wenn ich darauf klicke und die Links- und Rechtspfeile verwende, geht es nach links. Rechts zeigt die Geschwister da drin, was irgendwie cool ist. Aber der wichtigste, den ich benutze, klicke hier rein, drücke den Aufwärtspfeil, es wird das Elternteil packen, das ist mein unterer Wrapper. Es ist wieder soweit. Es wird seine Eltern schnappen, was mein Kabeljau-Thumbnail ist. Und ich werde löschen, löschen, löschen. Ich habe Blei hinzugefügt. Ich mache eins, wiederhole es und ändere es dann . Andernfalls müssen sie immer wieder Klassen und so hinzufügen. Also fangen wir mit diesem an. Wir werden den Moment stylus machen und es hat keine Klasse dafür. Also nenne ich das einen Text, und ich nenne das ein Thema. Sie werden feststellen, dass ich zuerst den allgemeineren Namen setze und dann der beschreibendere Teil zweitens bedeutet, dass ich später, wenn Sie Text eingeben, ich finde, dass dies einfacher zu betrachten ist. Statt Logo nimmt regulären Text. Das bin nur ich. Also der Thementext, ich werde sagen, was werden wir tun? Ich muss die Größe herausfinden. Es ist 12 weil die 12, das kann ich machen. Der Thementext wird also Topographie 12 sein. Es erhält alle Schriftgrößen Befehle oder Steuerelemente, klicken Sie vom Hauptteil oder von Seiten. habe ich schon gemacht. Und ich denke, das ist alles, was ich dafür brauche. Schauen wir uns das hier an. Jetzt. Dieser ist interessant, weil der Abstand hier ziemlich klein ist. Und dieser hier ist standardmäßig, ich habe nichts mit diesem Zeug gemacht. Ich habe es gerade auf der Seite zusammengefasst. Es wurden keine Klassen in Abständen angewendet, die bereits ziemlich groß sind. Es ist gut für den Röntgenmodus. Okay, und geh in den Röntgenmodus. Woher kommt es? Maus darüber fahren, können Sie sehen ein großer Teil auf mein H2 angewendet dass ein großer Teil auf mein H2 angewendet wurde und der nur aus dem Internet stammt. Okay. Haben wir das hier besprochen? Das H tut es auch. Ich habe nicht darum gebeten, diesen Abstand zu haben. Wenn ich darauf klicke, hat es einen Standard von 20.10. Wenn ich den Befehl klicke, heißt es, dass alle H2 mit dem im Artikel geliefert werden, aber sie tun es nicht. Eine Person, die zum ersten Mal das Internet oder zumindest HTML erfindet, entschied, dass Heizungen oben und unten ein bisschen Spielraum haben werden . Und was ich gerade entscheide, wahrscheinlich zu meinem zukünftigen Ärger, ist, dass ich einfach die Margen abräumen werde. Okay. Ich werde sagen, wenn ich tatsächlich zwei treffe, gehe ich raus und den Röntgenmodus. Okay. Ich werde sagen, dass Sie zwei treffen, die eigentlich oben auf Null und unten auf Null gesetzt werden . Okay? Und ich möchte nicht dich bearbeiten. Historisches HTML erstellt ein Typ wird gehen. Also werde ich es bearbeiten, wenn ich es im Moment brauche, ich glaube, ich brauche es nicht. Okay. Andere Dinge, die ich mit meinem H2-Generikum machen möchte, ich werde es zu einer kleineren Schriftgröße machen, denn was dieser Krieg von ihnen ist , kann die Schriftgröße von 23 sein. Okay, ich schaffe es wahrscheinlich einfach 24. Übliche Art der Schriftgröße. Es hat H2 erstellt, weil ich abgeklickt habe und dann zurück geklickt habe. Also was ich tun werde, ist es rückgängig zu machen. Und dieses Ding hier, ich werde sicherstellen, dass ich es mit H2-Tags mache , alle. Okay, und das werden 24 sein. Nett. Ich werde sicherstellen , dass alles in Großbuchstaben geschrieben , denn das ist eine Art Regel, die in diesem Design entschieden wurde. Und alles andere, was ich tun möchte. Ich brauche Polster. Ich brauche keine Polsterung. Wenn ich Padding hinzufügen würde, würde ich es wahrscheinlich zum Ticks-Thema hinzufügen. Ich habe etwas Spielraum auf den Grund gelegt. Denn das ist der Moment eine ziemlich reine Sache. Es wurden keine Stile darauf angewendet und es ist irgendwie perfekt. Ich möchte jetzt nicht mit dem Hinzufügen von Padding beginnen , denn wer weiß, ob es später nützlich sein wird. Aber das Ding dort, das er nur als Textthema für diese spezielle Karte benutzt als Textthema für , ist nur Job im Leben. Also kann er ganz ruhig sein, du kannst ihm alle möglichen seltsamen Sachen hinzufügen. Dieser Typ wird es schön aufgeräumt halten. 56. Kursprojekt 05 - Portfolio-Homepage - Lösung Teil 2: Ordnung, die Höhe ist zu hoch. Lass uns die Buttons schon fertig haben. Wir werden also herausfinden , woher die Höhe kommt. Okay. Also, wo sind die minimalen Wanderungen, die von dieser Kabeljauunterwiederholung kommen , auf die ich gerade geklickt habe und die richtige genannt wird. Hervorragend. Okay. Und ich werde die Mindesthöhe auf senken , da bin ich mir nicht sicher. Was ich gerne machen würde, ist diese zwei Zeilen zu haben. Ich möchte, dass genug Platz für zwei Leitungen ist. Okay? Also werde ich es stylen, weißt du, meine Mindesthöhe darauf auf die Zeilenhöhe ausrichten und die Umschalttaste gedrückt halten, um meinen Abwärtspfeil zu benutzen, offensichtlich zu niedrig, irgendwo da drüben. Und weil es eine Mindesthöhe ist, heißt das, wenn ich mehr hinzufüge, kannst du sehen, dass es es nach unten drückt. Okay. Weil es die Mindesthöhe ist, nicht die maximale Höhe. Es lässt es wachsen, wenn es nötig ist. Überschreibt. Alles was wir sonst noch tun müssen, du brauchst einen Style This Button. Lass uns den Knopf dort machen. Also deine Ruftaste plus zwei. Und wir werden uns daran erinnern, dass wir früher zwei Schaltflächen hatten, wir fügen Button plus zwei und Button plus 11 hinzu. Sie sind nur Beispiele. Dieser hier fügte relativ hinzu, dieser fügte absolut hinzu. Also brauche ich das nicht mehr. Also werde ich wieder aufgeräumt sein. Ich werde diesen in Button Plus umbenennen , weil ich nur einen davon habe. Und ich gehe zu meinen Styles und sage Button plus eins. Ich brauche dich nicht mehr. Ein Veranstaltungsort wie unser ordentliches IM you, das ich stylen werde, glaube ich, sollte ursprünglich schwarz sein. Das gefällt mir nicht mehr. Also mache ich es zu dieser Sekundärfarbe , in der Button Plus, ja, aber ich bin Plus kann all diese Stile aufnehmen. Eigentlich. Er macht nichts. Es ist diese Wissenschaft, die meiner Farbe ziemlich nahe kommt und manchmal bin ich verwirrt. Aber was ich tun werde, ist zu überprüfen, ob ich bereits Farbe oder Hintergrundfarbe habe oder ob wir sekundäre Textfarben haben, das funktioniert nicht, weil es darin enthalten ist. Also Farbe, Hintergrundverlauf. Was ich jetzt will, okay. Also habe ich das nicht, also werde ich es zur globalen Klasse machen , weil ich wahrscheinlich diese Hintergrundfarbe wiederverwenden würde , den farbigen Hintergrund sekundär. Also lasst es uns machen. Also schnappe ich mir meinen Schlüssel ziehe einen Div-Block hinein. Bin gerade da reingegangen. ist mir egal, denn ich mache dieses Ding namens Farbe. Ich verwende die amerikanische Schreibweise, obwohl ich aus Neuseeland komme, lebe ich in Irland. Wir verwenden den Gebrauch überall. Aber überraschend, wie viele Leute mir schreiben werden, um zu sagen, dass ich Farbe falsch geschrieben habe. Ich habe viele Dinge falsch geschrieben, aber ich habe es gerade verstanden. Da haben wir's. Ordnung, also färbe BG für Hintergrund und dieser wird einen Farbverlauf haben. Wir machen die Sekundarstufe. Und ich sage den Hintergrund, ich werde sie alle geschlossenen Hintergründe zusammenfassen. Du hast meine süßen Farbfelder. Und genau das wird der Typ tun. Was ich jetzt tun werde, ist, dass ich es duplizieren werde , denn solange ich hier bin, werde ich ein sekundäres erstellen. Entschuldigung, zweitrangiger. Ein anderer, der primär heißt. Und dieser wird so ausgezeichnet sein. Also habe ich dich und ich kann entweder das primäre Ende des Hintergrunds setzen oder ich kann es entfernen und Farbhintergründe sagen, sekundär, los geht's. Also war er nur da, um meine kleinen Global-Klassen zu erstellen. Wenn Sie wissen, eine bessere Art, das zu tun, tun Sie es wahrscheinlich. Wenn ja, lass es mich in den Kommentaren wissen. Jedenfalls. Also habe ich Button Plus Ich werde die sekundäre Farbe verwenden. Der Grund dafür ist, dass ich es nicht nur auf die Button-Klasse anwende , wenn ich das später ändern muss , weil es nur das Kontrastverhältnis ist nicht gut. Ich muss es anpassen. Ich wache am nächsten Morgen auf. Ich mag es einfach nicht. Wenn ich nur diese eine Klasse ändere, ändert sich die Schaltfläche, und das ändert alles andere , was ich benutzt habe. Zumindest die Farbhintergründe sind zweitrangig als angewendet. Das Gleiche gilt für die Knopfrundheit, die wir hier oben gemacht haben. Und was wir tun werden, ist zu sagen, ich werde, ich will es mit dem Button Plus machen, weil ich es dort nicht zu dieser Klasse hinzufügen möchte. Button Plus wird also Grenzen haben. Drehen Sie es hoch und stellen Sie es einfach auf 50. Es ist also komplett rund. Es ist nicht ganz rund. Kannst du sehen? Es ist irgendwie oval. Wie mache ich es rund? Ich gebe ihm eine Größe. Und mein wird sein, wie groß habe ich diese 3D gemacht, vier Pixel breit. Ich sage also, dass Sie eine Größe von 34 haben. Ich habe das Gefühl, dass ich mir hier Probleme bereiten werde. Ja. Es braucht die Co, wie kriegen wir ihn in die Mitte? Das war ein sehr guter Punkt. Wie erhalte ich Input? Und das ist ein Kopfkratzer und Zeit. Hier sind also ein paar Zecken drin. Es kommen ein paar Styles hinzu. Wenn ich das auswähle, hat es einige Stile. Ich könnte es in eine Grafik verwandeln und es reinbringen. Wenn du nicht hier wärst, würde ich das wahrscheinlich tun und zu Figma gehen, es machen und zeichnen und es einfach als Bild einbringen und nach oben bewegen. Okay. Aber du bist hier. Also, wie soll ich das machen? Ich werde das Topographie-Festival vergrößern , weil ich nur das Plus nutze. Und dann will ich es hier rein bewegen. Benutze ich Position? Bewege es rüber. tue ich. Ich versuche mit der Polsterung zu spielen. Mal sehen, ob irgendein Muster kommt oder ich es schaffen kann. Mein Problem ist jetzt jedoch, dass ich es im sekundären Hintergrund mache. Und wer hat das Rückgängigmachen beibehalten? Sie eine Menge Male rückgängig das Gewicht meiner Tastatur zu messen, weil ich mit der Größe gespielt habe, als ich mit dieser Combo-Klasse verbunden war. Also rückgängig gemacht, werde ich machen, ich werde das für den Moment einfach ausziehen, nur für den Fall, dass ich versehentlich wieder zurückgehe. Ich bin auf Knopfdruck und mache dir eine Größe von 34. Warum habe ich keine Mindestgrößen verwendet? Weil es keine Erweiterbarkeit gibt, die ich will. Ich möchte nicht, dass es erweitert wird , falls es Ihnen keine feste Breite geben darf. Und das wird eine Schriftgröße von dem haben, was ich auch habe. Das wird reichen. Und ich werde die Polsterung und den Rand verwenden , von denen sie kommen, sie kommen von Halten Sie die Umschalttaste, halten Sie den Befehl gedrückt. Zeit dir, wo es herkommt. Ignoriere das. Also werde ich dir auf diese Weise ein bisschen geben. Ganz perfekt in der Mitte. Geh noch einen hoch. Fünf. Wir sind zufrieden damit. Ich bin glücklich damit. Okay. Und wir gehen zur sekundären Hintergrundfarbe. Los geht's. Er ist nicht in der richtigen Position. Also gehen wir zurück zu meinem Button , finden die Positionierung und gehen. Ich ziehe das beim letzten Mal einfach herum und war nicht wirklich begeistert davon, wo es gelandet ist. Aber jetzt bin ich begeistert. Ich ziehe es hoch und runter oder links und rechts, betrachte es und los geht's. Okay. Das ist irgendwie alles. Und ich muss mit meiner Richtung herumspielen. Ich brauche auch etwas Platz auf der Unterseite, klebt irgendwie unten und es macht mich verrückt. Also brauche ich danach unten ein bisschen Platz. Okay, ich werde also herausfinden , woher dieser Abstand kommt. Okay, Containerbreite, schauen Sie sich die Größe an. Vielleicht haben die Miniaturansichten des Abschnitts dort Abstände, wo sie da sind. Ich habe also 64 an der Spitze. Und was ich dort gemacht habe, war wie ich entschieden habe, was das kontrolliert. Sie können einen Röntgenmodus erhalten. Okay, du könntest also in den Röntgenmodus gehen und wer, wo, wo kommt das her? Es zeigt es dir nicht mal. Okay. Das hat also nicht funktioniert. Wenn das also nicht funktioniert oder was ich meistens mache, gehen sie in den Röntgenmodus , wenn ich einfach wieder durcharbeite. Ich weiß, dass das irgendwie direkt in den Dingen steckt. Ich gehe zurück zu den Eltern. Der Typ hat oben keinen Abstand. Dieser Typ, das Gitter hat keinen Abstand. Miniaturansichten der Abschnitte. Da ist er da. Er hat 64. Ich bin zufrieden mit 64. Und ich will aber auch 64 unten. Was habe ich getan? Ich hatte 12,3. Okay. Denken Sie daran, das ist die Abkürzung, um all diese verschiedenen Größen durchzugehen , okay. Oder die verschiedenen Ansichtsfenster. Das war ausgezeichnet okay. Was ich tun sollte , ist einfach eins zu tippen , war bei 64 und drücke Enter. Jetzt, weil ich unten Abstand habe. Ray. Eigentlich möchte ich, dass es größer wird. 164. So hat es etwas Luft zum Atmen bekommen. Jetzt greife ich nach oben, um das übergeordnete Element, das die COD-Miniaturansicht ist, zu greifen , zu kopieren, einzufügen, einzufügen, einzufügen, einzufügen, einzufügen. So befriedigend, wenn Sie endlich an einen Punkt kommen, Sie sagen, ich kann, wissen Sie, Sie haben all diese harte Arbeit geleistet und Sie können einfach Schritt halten und wiederholen. Okay, jetzt werde ich die Polsterung hier drin erhöhen. Also möchte ich den Rasterpfeil nach oben greifen bis ich das Rastersymbol sehe und es größer machen. Und schaffe ich es sogar, dass ich es hier überhaupt schaffe? Habe ich. Was war es? Also werde ich darauf klicken. Halte meine Wahltaste gedrückt. Da steht 32, aber es geht in die Luft. Was hängt da über dem Rand. Und es ist eine große alte Gruppe. Unentschieden. Es funktioniert nicht. Nimm ein Rechteck. Nehmen wir an, Sie haben eine Breite von 50 Pixeln. Vielen Dank. Und so will ich, wo ist es? Mein Layout? Tippe es ein. Der Abstand wird 50 mal 50 betragen. Los geht's. Ordnung, das ist es. Jetzt gehe ich durch und ändere den Text und die Bilder hier. Ich mache es im Schnellvorlaufmodus. Ich mache eine Pause, wenn ich etwas Interessantes finde. Ich bezweifle, dass es das Wenn Sie Ihre eigenen erstellen, haben Sie natürlich Ihre eigenen Bilder oder Sie können die Bilder verwenden , die in den Übungsdateien enthalten sind. Meine sind schon hier. sind sie. Also ja, ich gehe in den Schnellmodus und pausiere ihn. Wenn überhaupt. Fantastisch passiert , wann immer es welche gibt Whoa, whoa. Okay, lass uns aufhören. Mache zuerst den Abstand. Warum? Weil warum ist es dort drüben? Okay. Das liegt daran, dass wir einen Blick darauf werfen, weißt du, wie du denken würdest? Weil ja, die Pause. Überlegen Sie sich ein wenig, was hätte passieren können, um ein oder zwei Ideen zu entwickeln, und machen Sie dann eine Pause, fertig, gehen Sie zurück. Okay, also dieser Button hier erhält seine Positionierung von seinem Elternteil relativ zu dem Elternteil Rapa. Du weißt noch, dass wir es getan haben Der Knopf befindet sich also weiter unten unter der Position auf einer Taste plus. Also nicht dieser. Er bekommt es vom Button Plus, nicht von der Combo-Klasse. Er positioniert sich und es heißt, dass diese absolut relativ zu dem Wrapper namens Card Lower Wrapper sind , der direkt um die Außenseite herum ist. Und wir sagten, sei das im wahrsten Sinne des Wortes. Okay, und jetzt haben wir das geändert. Es ist immer noch genau das richtige Maß, aber jetzt hängt es über den Rändern. Also jetzt sagen wir dir oder so. Und was ich vielleicht tun könnte, ist es von dieser Seite zu tun anstatt von dieser Seite wegzukommen , mal sehen, ob das funktioniert. Das ist sowieso meine Theorie, anstatt von dieser Seite nach oben zu kommen . Denn wenn das kleiner wird, ist es immer noch. Aber wenn ich von dieser rechten Seite komme, wird es immer nur ein bisschen sein. Lass es uns versuchen. Ergibt das Sinn? Das tut es nicht. Ich werde das los und werde es los, ich lasse das oberste, weil das stimmt. Aber ich werde diese Seite benutzen. Ich sage, du bist diese Seite. Ich benutze diese Ecke als Referenz. Okay. Also oben drauf und auf der rechten Seite des Elternteils, ich benutze das. Also muss ich rüberkommen, du musst irgendwie mischen, mischen, mischen. Ich hoffe jetzt , dass es funktioniert, wenn ich es ändere . Ich gehe total zur Arbeit. Komm schon, arbeite. Gitter. Das wirst du dir schnappen. Und wenn ich es bewege, macht es den Bürgersteig und ich muss den Boden machen. Ich mache den Tiefpunkt. Es macht die rechte Seite. Ich muss es vielleicht bis zu einem anderen guten Punkt machen. Wir machen es relativ dazu. Aber obwohl wir es über dieses Bild kleben. Also lasst uns noch etwas tun , das uns das leichter machen könnte. Hat es die richtige Größe, 50 Pixel? Lass uns einen Blick darauf werfen. Eine andere Art, es zu tun. Ich habe es hier reingetan, nur weil es gut war dir hier zu zeigen, und wir haben es hierher verlegt. Es wäre besser, wenn sich dieser Knopf dort befindet wo diese Bilder Sie sehen können, diese Karte ist separat. Ich möchte, dass es sich in derselben Ebene wie das Bild befindet, weil er relativ dazu ist. Ich möchte, dass sie relativ zu diesem Bild Beachten Sie dieses Ding unten , das sich aufgrund der erhöhten Breite ständig verzerrt und verändert. Während dieses Bild hier den Knopf gepackt hat. Wenn du hier mit seinem Bild rumhängst, möchte ich, dass du relativ dazu bist. Okay. Und er ist seinen Eltern entkommen und seine Eltern waren Verwandte und das hat ihn dazu gebracht, zu arbeiten. Das brauche ich nicht mehr. Kehren wir zurück zu Ich werde das tatsächlich entfernen. Die Eltern dieses Typen sind jetzt dieses Kabeljau-Thumbnail. Okay. Also lasst uns seine Eltern relativ machen. Das ist in Ordnung. Dieser Plus-Knopf. Und gehe dort zum Plus-Button und sag Du bist Nullen, Null. Lass uns ihn machen. Wir benutzen die Seite, wir benutzen die Unterseite. Wird das besser sein? Lass es uns versuchen. Gehen wir zu diesen verschiedenen Stilen über. Kombi. Geht. Lass es uns nochmal mit dem Ding versuchen. Es geht ihm viel besser. Okay. Er bleibt oben rechts. Es war also in Arbeit und ich bin dankbar, dass es das geklappt hat. Und es schien kurz genug zu sein , um zu verstehen, was wir mit ihnen gemacht haben. Er war ursprünglich drin, also versuchte er, relativ dazu zu sein und das ist in Ordnung. Wenn du sie in der oberen rechten Ecke haben wolltest. Das wollten wir nicht. Wir wollen , dass sie mit seinem Bild abhängen. Es ist also besser, in einer solchen Gruppe zu sein, ein Geschwister der Sache , der sie folgen soll. Okay, ich will also, dass sie irgendwie mit diesem Bild enden. Das Problem war , dass wir einen Verwandten hatten. Er muss etwas sehen. Seine Eltern müssen relativ sein und es war in Ordnung, als er dort drin war, weil wir diesen Wrapper relativ gemacht haben . Aber jetzt müssen wir dieses relativ machen, was wir auch getan haben. Bist du Brian explodiert? es irgendwie tun können. Das ist entweder sehr hilfreich, sehr schwierig, oder ich denke, um Ihnen zu zeigen, dass die Dinge ein bisschen knifflig sind und es wie Problemlösung ist. Ich liebe die Problemlösung. Ich habe es genauso geliebt, was eine gute Idee ist. Und vielleicht verbringen Sie eine halbe Stunde damit, das Problem zu beheben, und Sie bekommen einen neuen Webdesigner. Das finde ich spannend. Aber wir sind ins Unkraut gegangen und U2 wird ins Unkraut gehen und versuchen, etwas zu reparieren. Oder ich atme tief durch. Ich mache eine Sekunde Pause. Ordnung, habe angehalten. Wenn Sie das wirklich schwierig fanden, legen Sie einfach keine Dinge auf Bilder, zumindest noch nicht in Ihrer Webdesign-Karriere. Entwerfen Sie sie nur nicht in Figma, Photoshop oder Illustrator so, dass sich die Dinge so überschneiden. Halte sie einfach getrennt , da sie schwierig sein können. Und das nächste, was wir tun werden, ist Reaktionsfähigkeit. Wir ignorieren es bisher. Schauen wir uns an, wie es aussieht wie ein Tablet. Zerquetsche deine Finger. Es gibt nicht zu viel Arbeit. Hey, es ist nicht so schlimm. Fangen wir einfach ganz oben an. Okay, schauen wir sie uns alle an. Du musst an der nächsten arbeiten. Du bist irgendwie auf das Handy gesprungen und dann das Tablet repariert, weil sie vielleicht wie dieses herunterfallen und dieses dazu bringen, alles darunter zu reparieren. Und wenn ich dieses ändere, wirkt es sich auf diese aus. Sie müssen also am nächsten Breakpoint arbeiten. Für mich. Beliebige Polsterung. Also wo werde ich die Polsterung wahrscheinlich den Eltern hinzufügen. Ich klicke hinein benutze meinen Aufwärtspfeil ein paar Mal. Er ist mein Elternteil, weil es hier chaotisch wird. Es ist, als würde es ein bisschen schwierig anzusehen. Also div, nav, ja, war nicht losgegangen. Lassen Sie uns einen gewissen Abstand von Polsterung oder Rand haben. In diesem Fall spielt es keine Rolle, da die Farben von seinem Elternteil aus der Containerbreite kommen . Aber wenn nicht, das von ihm käme, müssten wir Polsterung verwenden. Ich benutze meine Wahltaste Alt-Taste auf einem PC und ziehe sie hinein. Perfekt, dieser hier. Kann ich damit durchkommen? Wahrscheinlich nicht. Was ich in diesem Fall hier vielleicht tun muss, ist in meine Startaufstellung zu gehen und zu sagen, dass ich das tatsächlich verschärfen werde. Dieses Raster hier wird wahrscheinlich etwas Spielraum benötigen. Auf dieser Seite. Es braucht es hier nicht wirklich weil die Steuervergünstigungen, vielleicht möchten Sie es auf beide Seiten legen, nur damit Sie für den Fall, dass Sie mich auf dem Desktop anders treffen. Denken Sie daran, kommen Sie darauf an, wenn Sie diese ändern möchten. Es gibt also keine Polsterung hier drüben, okay, aber hier unten sieht man, wie der Rand steigt. Es ist keiner hier. Okay. Es war merkwürdig. Man konnte sehen 22 Sie haben es getan. Siehst du es? Springen durch Bike-Punkte hat einige solche Macken, aber ich habe irgendwie geklickt, wieder in die Startaufstellung geklickt und es ging weg. Aber es ist da. Es gibt einen Spielraum. Und ich bin ziemlich zufrieden mit allem. Da wird es ein bisschen eng. Ich bin noch nicht bereit, die Schriftgröße etwas zu verringern weil ich die Bremsen in dieser dritten Zeile hier unten sehr mag . Diese Typen. Ja. Wir können wahrscheinlich damit spielen und es drei drauf legen. Und ich werde einfach auf zwei mal zwei sinken und das H2-Gitter verringern , wahrscheinlich wird das Raster hier oben sein und ein Layout wird es sein. Und du kannst sehen, dass es nicht mehr blau ist. Das liegt daran, dass es vom Desktop abgerufen wird, um einen kurzen Blick darauf zu werfen. Es wird, wow, tatsächlich ein Raster, um einen Stil auszuwählen, von dem es kommt, aber es ist von der Desktop-Version. Kuchen sehen kleine Icons ganz wichtig. Da kommt es her. Also mache ich eigentlich nur zwei mal zwei. Jetzt. Das machen wir. Was will ich? Ich möchte etwas oder verringern die Polsterung und etwas mehr auf die Außenseite legen. Also werde ich den Rasterstil, den ich als Grid bezeichnet habe, zu meinen Grid-Miniaturansichten sagen . Und ich werde sagen, dass Sie auf beiden Seiten einen gewissen Spielraum haben , halten Sie die Alt oder Option. diese Abkürzungen satt. Und das sind 33. Ich mache vielleicht den Container. Wo sind meiner Meinung nach die Abschnitts-Thumbnails. Dafür sage ich gut genug, um zu denen zu passen. Bin ich jetzt glücklich mit denen? Bin ich. Ich muss die Bilder austauschen. Ich weiß, und damit bin ich genug zufrieden. Muss es rübergehen? Ignoriere es. Da ist einer. Dieser hier. Ich hasse Landschaft in Ordnung. Wer schaut sich eine Website an? Landschaft in Ordnung. Sie könnten es tun, aber wir müssen es zumindest angehen, denn was ich wahrscheinlich tun werde, ist, dieses Raster in Gang zu bringen. Werde meine 0.5 los und mach es eins nach dem anderen. Okay, also ich habe diese und diese Grid-Option hier. Was ich tun möchte, ist Schauen wir uns das hier an. Schlagen des Helden war also richtig auf dem ausgerichtet, auf allen anderen. Aber hier hier werde ich tatsächlich Typografie machen. A hat es an diesen geschickt, also wird es gut gehen, oder? Rechts ausgerichtet. Und dann wird dieser zentriert sein. Dieser Typ hier, was bringt ihn dazu, nach rechts zu gehen? Erinnerst du dich? Okay. Er machte den Flux-Prozess, zwang ihn, zu dem zu gehen, der es überhaupt nicht tat. Es ist das Elternteil des Elternteils. Eltern sagen, es ist nicht das, was ich will. Es ist lustig, wenn du Grid ist das Elternteil hast und dann innerhalb des Rasters Flexbox hast. Ein gutes bisschen verwirrt sie wie zu viel. Okay. Also hier habe ich gesagt, dass jeder in ihnen nach rechts geht, aber tatsächlich ist jetzt jeder darin zu sehen. Nett. Und wir haben irgendwo eine Mindesthöhe. Ich kann mich nicht erinnern , wo wir es her haben. Was dir die ganze Polsterung gibt , ist der Diblock. Schau mal. Schauen wir uns die Abstandsgröße an. Es gibt eine Mindesthöhe, die vom Befehls - oder Steuerungsklick vom Diblock kommt , was ich dieses furchtbar benannte Ding genannt habe. Und wie nennen wir es? Div hier? Ich habe schon einen Div, Hera. Hoffentlich nicht. Wir werden sagen, setze das außer Kraft. Ich benutze diese Option, halte die Option oder Alt auf einem PC gedrückt und ziehe einfach nach links und rechts. Vor allem, wenn du dir nicht sicher bist, du magst mich, du weißt nicht, was du eingeben sollst. Dieser hier wird bei dieser Option viel kleiner sein. Sieht es in Ordnung aus? Sie können den Bolzen selbst drehen. Man kann sagen, Bild zwei ist der Stil, den ich hier auf dieses Ding angewendet habe. Gib ihm einen kleinen Namen, Image-Held. Und ich sage, du bekommst vielleicht den Eckenradius Null. Ich glaube, es sieht besser aus. Aber wenn du es weglassen wolltest, könntest du es gut machen. Von Heroin und es wird quadratisch sein. Aber ich gehe tatsächlich zurück zur Runde. Es braucht eine gewisse Mindesthöhe. Ich gehe noch kleiner. Wahlweise ziehen. Dieses Ding hier hat eine Netzlücke. Ich werde einfach nur für diesen Haltepunkt schließen und fertig. Aber was ich wirklich machen möchte, ist für div Hero, möchte ich unten etwas Padding hinzufügen. Also wo bearbeite ich? Ich kann in diesem Abschnitt Miniaturansichten bearbeiten. Ich könnte etwas Top-Polster hinzufügen, sorry, oberer Rand. Oder ich könnte den Image-Helden herausfinden. Okay, denn das ist ziemlich einzigartig. Es wird nur für dieses Bild verwendet. Ich könnte es mit dem oder dem anderen machen. Absolut in Ordnung. Sei interessant zu sehen, was du getan hast oder nicht. Einfach komisch, wie es keines von beiden gibt. Okay. Querformat auf meinem Handy. Okay. Ich bin glücklich mit dem Zwei-mal-Zwei. Gehen wir runter zum Handy. Und ich möchte das hier oben ändern. Das ist wichtig. Es hat ein Ding namens div nav. Es wurde ein Flex darauf angewendet und es ist horizontal. Wir gehen vertikal. Und wir gehen. Das ist irgendwie interessant, wie sieh dir den Flip an. Es wäre wahrscheinlich praktisch gewesen, wenn wir Flexbox dafür verwenden und die beiden umdrehen würden, vielleicht wäre das Bild oben besser. Aber Grid hat es nicht. Ich glaube nicht. Also. Ich gehe vertikal. Und ich will das nicht benutzen, indem ich es an die Ränder schiebe. Ich möchte, dass es genau in der Mitte der Luft ist, aber ich kann die Lücke für Zeilen und Spalten in diesem Fall auf Zeilen anwenden aber ich kann die Lücke für Zeilen und Spalten in diesem Fall auf Zeilen anwenden. Ich halte meine Wahltaste auf einem Mac gedrückt , 0 Taste auf einem PC. Erweitere das ein bisschen. In Ordnung, ich wäre genug. Ordnung, alles andere hier drin, stimmt es, diese Größe zu haben, es ist wahrscheinlich zu groß, groß, wahrscheinlich zu groß. Also mein schlagender Held auf dem Handy, es geht zur Tomographie. Ich halte meine Wahltaste gedrückt und ziehe sie nach unten. Ich mag es so. In Bezug auf die Höhe gehe ich runter. Text der Schaltfläche. Es kann gewaltig sein. Das alles andere. Lassen Sie uns auf das Bild eingehen, denn es ist im Allgemeinen seltsam, aber auf Mobiltelefonen sieht es noch seltsamer aus. Also sage ich Hero Image. Wird dieses Netz geschlossen? Das ist eine gute Frage. Gehen wir also zu unserem Display keine. Und das hat es getan. Nett. Ordnung, das, aber hier passt nicht. Also schnappe ich mir mein Elternnetz. Und ich sage, Sie haben die Startaufstellung festgelegt. Ich weiß, dass es das Raster ist, weil es dort dieses kleine Symbol hat. Kannst du sehen, dass das Gitter ist und ich möchte, dass der Abstand ist. Wo ist es? Was für eine Art von Sehen? Wir sind im Netz, in einem Netz. Deshalb werde ich sagen, dass es eins nach dem anderen sein wird. Und was ich tun könnte, ist mit der Breite herumzuspielen. Es sind völlig solche, bei denen wir versuchen werden, den Raum zu füllen. Es ist Gott. Etwas treibt es also seit Ewigkeiten voran. Lass uns einen kleinen Blick darauf werfen. Lass uns aus diesen Raster-Thumbnails herauskommen, machst du es? Und Größe, Abstand. Halten Sie die Befehlstaste gedrückt. Ja, es ist ein Raster, Thumbnails geben es immer noch. Aber es kommt von der kleinen Hock-Ikone. Schau dir das an. Er ist der Tablet-PC. Er kommt davon. Also werde ich es überschreiben und es einfach auf Null setzen . Beide Seiten. Wie sehe ich aus? Command Shift P, Control Shift P auf einem PC. Gefällt mir das? Ich habe das Gefühl, dass es außen etwas Polsterung braucht. Befehlen Sie Shift P, um es auszuschalten, oder Control Shift P. Und ich denke, ich werde wahrscheinlich zu meinem Raster zurückkehren , der Abstand der Miniaturansichten. Ich werde wahrscheinlich nur ein bisschen auf beiden Seiten einlegen und die Alt- oder Wahltaste gedrückt halten. Vielleicht geh und das Netz selbst. Was ist, wenn ich 16 wähle? Ich schnappe mir das Gitter selbst und ziehe es auf 16. Passt also zu Command Shift P. Schauen Sie sich ein paar Telefone an, wie verschiedene Größen eines Telefons. Ja. Würdest du sonst noch etwas ändern? Wir brauchen die, weil Button ihn mitnimmt. Button nimmt das macht Sinn, oder? Wie nennen wir sie? Dieser ist eine Frage stellen und heißt Tiefe namens Ask a Question. Was ich also tun könnte, ist tatsächlich zum Desktop zurückzukehren , weil ich das komplett ändern möchte. Ich werde den Vorschaumodus verlassen , weil er dort feststeckt. Und dieser ist kalt. Dann haben sie mir nur eine Frage gestellt. Stell eine Frage. Und dieser hier ist auch eine Frage stellen. Aber auf Handynummer 1234 machte das hier Sinn. Aber wenn es auf der Handyversion ist, macht es keinen Sinn. Mach es einfach dort aus. Gehen wir also zu Position und Opposition und Display. Während Anzeige, Layout, Anzeige aus. Das ist Beta. Dieser Button, dieser Button ist vielleicht ein bisschen riesig. Das tickt hier unten. Diese Knöpfe möchte ich wahrscheinlich dazu bringen, sie zu einer Knopfkarte zu machen. Alles andere, was ich wollte , möchte ich immer noch all diese Sachen durchmachen. Also sage ich Ausrichtung. Ich möchte, dass du im Mittelpunkt stehst. Möchte ich, dass diese zentriert sind? Ich werde mir das ein bisschen ansehen müssen, aber ich denke, wir haben die ganze harte Arbeit geleistet. Ich mache wahrscheinlich eine Pause, komm zurück, sieh es dir an. Hühnchen auf meinem Handy. Also würde ich es veröffentlichen. Und dann überprüfe die URL auf meinem Handy oder Tablet, um einen wirklich guten Look zu die URL auf meinem Handy oder erhalten. Aber ich glaube, wir sind sowieso für dieses Video da. Sie ist sowieso alleine. Wie hast du es gefunden? Wie lang? Das ist? Wie lange hat es gedauert. Ich musste dort in der Mitte pausieren , die ich bei der Bearbeitung ausgeschnitten hatte. Aber so lange habe ich relativ lange gebraucht. Wie lange hast du gebraucht, hast du heute gebraucht , um dich zu Alice zu bringen? Hat es 10 Minuten gedauert? Wahrscheinlich nicht. Aber lass es mich wissen, sei interessant zu wissen. Und es wäre auch interessant zu wissen, was Sie anders gemacht haben. Okay. Erzählen Sie mir auf dem verrückten langen Weg , dass Sie etwas zum Arbeiten haben und dann festgestellt haben , dass es einen besseren Weg gibt. Oder du hast mich vielleicht schon verrückt lange machen sehen , wenn du sagst, warum hast du das einfach getan? Es ist wahrscheinlich richtig. Und du bist wahrscheinlich besser darin, es auf deine Weise zu machen. Und es gibt keine richtigen Rollen und keine harten schnellen Wege, alles zu tun. Sie können mit verschiedenen Methoden zu vielen Lösungen gelangen. Also lass es mich und andere Leute durch die Kommentare selbst wissen , nur um zu sehen, dass du sagst : Oh ja, dann hat es so gemacht. Ich habe es so gemacht. Aber sieh dir an, Jane oder Dave haben es anders gemacht und es macht mehr Sinn als wir beide. Schauen Sie in den Kommentaren nach. Schreiben Sie Ihre Kommentare. Mein Weg ist nicht der beste Weg. Bin ich. Vernünftigerweise bin ich ein ziemlich selbstbewusster Webdesigner, aber ich freue mich auch sehr auf Videobearbeitung und Grafikdesign und so. Es wird also Leute geben, die hoffentlich sehr schnell viel besser werden als ich. Die Welle wird sich ändern. Es wird bessere Möglichkeiten geben, Dinge zu tun. Also ja, ich bin mir nicht sicher , wo ich damit hinwill. Wir wandern nur, denn am Ende, diesem Ende sehe ich dich im nächsten Video. 57. Wie man Px Rem & Em’s in Webflow verwendet: Hallo zusammen. In diesem Video werden wir uns ansehen, warum wir nicht wirklich Pixel für Schriftarten verwenden sollten wirklich Pixel für Schriftarten verwenden und wir sollten Ringe verwenden, wir werden auch die Enden ansehen, aber Ringe wie die, die wir wollen. Warum haben wir sie benutzt? Wie sorgen wir dafür, dass sie funktionieren? Darum geht es in diesem Video. Um dies zu verstehen, fügen wir zwei Absätze hinzu. Also fügen wir gleich dort einen Absatz hinzu. Und wir machen zwei davon dafür, dass sie repariert werden. Ich werde zwei verschiedene Stile hinzufügen, das wird mein Textexperiment sein , einer, Kopie. Und ich nehme noch einen hier unten. Und kalt braucht ein Spearman zwei, ich werde sie in einer Sekunde verbiegen. Also haben wir jetzt Schriften auf eine Topographiegröße von 16 Pixeln gesetzt. Geben wir einfach 16 ein, um es dort zu erzwingen. Okay, hier, hier drüben werden wir sagen, wir werden Rems benutzen. Räume sind besser als Ziele zu sagen, wissen Sie, wir werden beide abdecken, aber RAM verwenden. Okay, wow, das ist groß. Also lasst uns ein Zimmer eintippen. Warum sind Felgen so groß? Der Rand ist eine der Standardgrößen. Die Standardgröße für die meisten Browser ist also 16. Wenn Sie also 16 Felgen eingeben, das sind 16 mal 16, erhalten Sie eine riesige Schrift. Aber wenn du nur einen Log von 16 benötigst, brauchst du nur einen Rim. Wie würdest du, wenn du Zimmer bräuchtest, welche Größe wäre es? Kannst du rechnen? Ich habe 32 gemacht. 32. Hey, am Ende hast du diese Art der Skalierung wenn du 1,5 Zimmer willst, welche Größe hat das? 20 bis? Der Herausgeber hätte das so herausgeschnitten, dass es sehr schnell erscheint, aber ich habe eine Weile gebraucht. Also machst du diese Berechnung. Warum haben wir uns die Mühe gemacht? Liegt daran, dass es Leute gibt, die ihren Browser aktualisieren müssen damit alle Schriftarten größer werden. Okay, lass mich dir ein Beispiel zeigen. Ich werde laden, ich werde das veröffentlichen. Und ich werde in einen Browser laden, du hast sie gegessen. Ordnung, ich habe es also im Internet. Ich werde es auch in Chrome überprüfen und zu meinen Vorlieben gehen und eine Schriftgröße auswählen. Okay, in Chrome ändern sie sich ständig, aber ich sehe aus und Sie können die Schriftgröße sehen. Die Standardeinstellung dafür ist Medium. Und was ich tun werde, ist Alt zu ziehen damit ich beide sehen kann. Du schreibst sie. Okay? Also kann ich beide sehen. Wenn jetzt jemand Probleme mit der Barrierefreiheit hat , ist er sehbehindert. Sie sind jetzt vielleicht alt und haben ihre Brille auf. Oder einfach wie Giant Schriften wie das Handy meines Vaters nimmt und sie jedes Mal schnappt. Es mag supermassive Größe. Okay. Also könnte er oder irgendjemand gehen und es in groß ändern. Okay. Kannst du sehen, was hier links passiert? Siehst du, dieser sitzt um einen Rin erhöht. Dieser war es nicht, und das auch nicht. Weil wir sie auf Pixel setzen. Pixel wollen sich nicht ändern. Sie werden, sie werden für immer 16 bleiben. Während die Person, die mehr Zugänglichkeit benötigt, okay, das ist das Wort, das wir verwenden, k weil Google es so nennt. Es sucht nach Ihrer Website, um sie zu sehen. Ist diese Seite gut, nützlich für alle Arten von Menschen, die große Schriftarten benötigen. Und es ist kein großes Drama für uns, Dinge an Rändern statt an Pixeln zu setzen . Es ist nicht besonders schwer, aber es bedeutet, dass Personen, die müssen, die Schriftgröße erhöhen können. Unabhängig davon, ob Sie Rems oder Pixel verwenden, wenn Sie das tun, verwenden die meisten Menschen der Welt das nicht, wenn Sie dort sitzen, gehen Sie einfach, ich möchte vielleicht hineinzoomen. Ich weiß, wie es auf meinem Mac geht. Es ist Command Plus, um es zu vergrößern. Okay. Es ist wahrscheinlich Control Plus auf einem PC, zoomen Sie heraus. Es spielt keine Rolle, ob es Pixel von Räumen sind, dieser weiße Balken. Google würde gerne sehen, dass die Felgen verwendet werden. Es ist keine große Sache. Wenn Sie es nicht tun, können Sie Moment an Pixel halten. Wenn du neu bist und zu viel Haut magst, wirst du irgendwann zu einer Felge wechseln weil es nur eine Kleinigkeit ist. Sie hatten ein kleines Zeichen auf Ihrer Website. Aber wenn Sie sich für eine Suchmaschinendominanz entscheiden, möchten Sie all diese kleinen Markierungen, ein Häkchen neben dem Namen Ihrer Website, damit sie besser rangieren. Sie können dies innerhalb eines Workflows vortäuschen. Ich zeige dich hier oben. Wenn ich zu diesem gehe, hatte er eine Zoom-Vorschau für Zecken. Es ist standardmäßig auf 16 eingestellt, aber wenn ich es auf 32 erhöhe, kannst du sehen, dass all diese steigen? Chrome nennt es einfach Medium. Die mittlere Standardeinstellung für die meisten Dinge ist 16. Okay, also hier drin sagen sie einfach, wenn ich es zurücksetze, ist die Standardeinstellung 16, aber wenn ich es klein oder groß mache, wird es hier eine Vorschau anzeigen, wenn du sehen willst , wie es zusammenbricht und sich ändert, überprüfe es, denn manchmal hast du einen Titel, der in zwei Zeilen wie dieser stehen muss . Und es ist groß und zugänglich, weil es riesig ist, es ist wirklich dick und hat einen wirklich guten Kontrast. Und Sie könnten sich dafür entscheiden, es als Pixel zu belassen, denn wenn es sich ausdehnt und zusammenzieht bricht einfach die Folie und das ist schlimmer als eine Schriftart. Vielleicht ist das so. So riesig es auch sein könnte. Okay, überprüfe es. Okay, also wie gehen wir sie durch und aktualisieren sie alle? müssen wir nicht, aber lassen Sie uns einen einfachen Trick machen. Nehmen wir an, ich brauche das. Und sag das hier. Ich weiß, dass es 50 sind. Wie mache ich die richtigen Felgen daraus? Teilen Sie einfach durch 16, was die Standardeinstellung ist, und geben Sie danach REM ein, und es wird hoffentlich rechnen. Da hast du es. Sie sehen, es hat sich nicht geändert. Es wird berechnet, dass 15 oh, sorry, 50/16 und Felgen 3,125 sind. Okay. Sie könnten einfach entscheiden, dass es drei sind, weil das irgendwie ist, ich mag keine Dezimalstellen, die sich mit Schriftarten befassen. Okay. Okay, teilen Sie es also durch 16 und welche Schriftgröße soll es haben. Wir besorgen Ihnen die Felgengröße. Aber wissen Sie nur, dass wenn jemand die Standardeinstellung ändert, dies Ihr Layout durcheinander bringt. Das ist okay. Die andere Sache, die Sie tun könnten, ist, dass Sie dasselbe mit Ihrer Größe, Ihrer Zeilenhöhe, tun . Wenn ich das als Pixel behalte, schauen wir uns das an. Wenn ich größer werde, bleibt es bei Pixeln hängen, weil sich die Pixel nicht ändern. Aber Felgen sehen aus. Kannst du sehen, dass es proportional zur Schriftgröße steigen muss . Also gehe ich zurück zu drei. Und hier kannst du auch Räume benutzen. Also werde ich machen, was ist 52? Warum kann ich es dort nicht anklicken? Weil es aus allen Überschriften kommt. Ich sollte gehen und meine Ölrubriken ändern. Ich sollte das nicht nur hier machen. Also sollte ich zu allen Überschriften gehen und ich sollte es hier machen. Schlechter Dan. Okay, also ich sage, ich mache ein U geteilt durch 16 RAM, treffe Nico. Und dieser ist durchgestrichen , weil die Auswahl ihn außer Kraft setzt. Also werde ich befehlen, klicke darauf, um es loszuwerden. Ich gehe zurück zu meinem Schlag. Und du wirst jetzt 50/16 REM sein. Um ein bisschen zusätzliche Komplikation hinzuzufügen. Aber wir machen unsere Website für beide Benutzer zugänglicher . Und weil die Google-Suchmaschine es will, wollen wir einen guten Rang erreichen. Mein Rat ist, es nur für Schriftzüge zu verwenden. Verwenden Sie es nicht für Abstände. Du kannst. Das Problem ist, wenn Sie sich dafür entscheiden, meine Ränder zu verwenden, wie es manche Leute tun, sehe ich viele Leute, die ihren Abstand verwenden. Wo, wenn ich hinkomme, lass mich irgendwohin gehen. Lass uns die Mindesthöhe machen, okay, sie könnten die Mindesthöhe haben, das ist eine Größe. Finde es Containerbreite, div nab. Da ist es, Mindesthöhe. Du kannst hier Ringe benutzen. Das Problem ist, dass es auf und ab geht, wenn Benutzer ihre Einstellungen im Browser ändern, und das wollen wir nicht. Sie können es völlig tun, und es macht Ihre Website flexibler, aber Majors brechen am Ende Lasten. Und es ist nicht eines der Dinge, auf die Google auf Barrierefreiheit setzt. Das ist meine Meinung. Google sagt niemandem genau, was er tut. Aber ja, Felgen, wirklich gut für Schriften und schriftbezogene Sachen. Lassen Sie uns als Nächstes die Ziele besprechen. Du, Maxine ist in dich verliebt. Er ist es, Rim. Ich sage Ems und Rems. Okay. Also haben wir Rampen einfach gemacht. Benutze die einfach. Benutz die Ames nicht. Das ist die kurze Antwort. Die lange Antwort lautet: Warum würdest du sagen? Ich sage dir warum. Bei einigermaßen komplizierten Arten sind sie einfach knifflig. Ich benutze sie einfach die ganze Zeit und beschäftige mich mit der Schwierigkeit bis ich etwas über Felgen gelernt habe. Also habe ich diesen Div blocky, ich werde ihn da oben verschieben. Ich werde ein paar Textabsatz-Tags einfügen , um dorthin zu gelangen. Ich werde super schick sein und sagen, in Ordnung, ich werde meinen schicken Kurs haben und Ames benutzen. Und ich weiß, dass 16 nicht das ist, was ich will, weil das 16-fache der Standardeinstellung ist. Jungs wollen einen von ihnen, einen der Standardwerte, der 16 ist. funktioniert es also genauso wie bei Felgen. Das Problem dabei ist, dass es von seinem Elternteil überprüft wird, ob der Standard in Ordnung ist, während ein Root-Ziel, okay, deshalb ist es RAM. Dem root m ist es egal, was der Elternteil ihm sagt. Da steht nur, ich suche nach dem Browser. Und der Browser sagt, ich bin 16, ich bin einer von denen. Während die AME sagt, werde ich auf jeden über mir schauen, auf jeden Elternteil. werde ich benutzen. Wenn Sie sich also für diesen Block entschieden haben, werde ich eine Klasse dafür erstellen. Das wird mein schickes Div sein, Div hier drin. Ich mache die Topographie, alles darin. Wir haben es schon mal gemacht, oder? Wir haben gesagt, dass alles auf einer Körpermarke öffentlich ist. Wir sagten, alles sei weiß, damit wir uns nicht wiederholen müssen. In diesem Fall, nehmen wir an , jemand hat entschieden, ich mache drei EMs daraus. Warum hat sich das geändert? Es ist auf eins eingestellt. Ich kann es sehen. Es gibt ein Bild, das 16 sein sollte. Nein, nein. Es schaut auf seine Eltern, die sagen, ich bin drei M, sei einer von ihnen. Dann gehst du, er tut, was er gesagt hat. Deshalb verwenden wir die Wurzel. Die Wurzel geht bis zum Anfang zurück und schaut nur in den Browser und sagt: Was ist deine Standardeinstellung? Das werde ich sein. Oder geht dieser Typ, was macht der Elternteil? Ich werde ein Vielfaches davon sein. Wenn ich also sagen würde, dass ich drei Ziele für diesen Absatztext haben möchte, was wird passieren? Es werden drei Ziele von den Eltern mal drei Teams innerhalb von sein, okay, deshalb verwenden wir keine Namen. Du kannst dann manchmal werden es nur 16 sein. Manchmal wirst du am Ende Vielfaches haben, was wir nicht wollen. Also werde ich rückgängig machen, bis es vorbei ist. Möchte ich sonst noch etwas besprechen? Nö, das ist alles. Warum sie es Ziele nannten, stammt aus älterer Topographie und vordigital. Und im Grunde haben sie beibehalten, wenn man ein Ziel hätte, wäre es eine der Größen des M. So würden sie die Größe der Schriftarten annehmen. Verschiedene Buchstaben sind unterschiedlich. Sie würden die Größe des Auges nicht verwenden , weil es mit einem großen M zu eng ist, besonders wäre eine sehr gute Art, es ist wie eine Box, oder? Also benutzen sie das. Sie schauen sich jede Schrift an und sagen, in Ordnung, jeder Großbuchstabe endet zusammen. Und das ist es, was wir verwenden werden, ist wie die Grundlinie für diese Schriftart und wir werden das EMS nennen, weil es nur so ist, aber es wurde das M's. Jedenfalls. Das ist mein Verständnis davon. Ja, das ist alles. Benutze Ringe. Benutze keine Ns. Schriftarten, verwenden Sie keine Pixel, verwenden Sie Rems für Abstände, verwenden Sie Pixel, klar wie Schlamm. Ordnung, wir sehen uns im nächsten Video. 58. Wie man VH in Webflow verwendet: Hallo zusammen. In diesem Video schauen wir uns die Höhe an und wir werden uns diese Zahl hier ansehen, VH-Ansichtsfensterhöhe, okay, diese ist auf 80 eingestellt. Das bedeutet, dass in diesem veröffentlichten diese große graue Box hier nur 80% des Darstellungsfensters ausmachen wird . So wie es gesehen werden kann. Sie sehen, dass es sich je nach Größe des Darstellungsfensters ändert. Und in diesem Fall 80 Prozent. Es ist ein bisschen wie Prozentsätze, aber es basiert auf der Höhe des Sichtfensters. Also lass uns das herausfinden. Ordnung, Viewport. Wir machen die Höhe des Ansichtsfensters, aber was bedeutet die Höhe des Ansichtsfensters? Ich zeige das in einem Browser in der Vorschau an. Das ist mein Aussichtspunkt von dieser kippigen oberen Ecke hier, bis hier runter. All diese Messungen. Ihr Computer ist vielleicht kleiner, vielleicht sind Sie auf diesem Computer. Ihre Ansichtsfensterbreite wird also ungefähr halb so groß sein wie meine. Das ist also etwas zu beachten. Es hängt davon ab, wer es ansieht und auf welchem Gerät sie es ansehen. gleiche gilt für das. Wenn ich die Höhe des Ansichtsfensters mache und auf einen Computer wie diesen schaue, weiß ich es nicht. Ab den neunziger Jahren, winzig klein, wird es von dort nach dort als seine Maße verwenden . Wenn ich B 100 Viewport height sage, wird es so groß sein. Auf meiner Maschine. Es ist so groß. Möglicherweise haben Sie eine davon in Normas Wrap Around sobald Ihre Ansichtsfensterbreite episch lang sein wird. Es ist also ein bisschen knifflig. Es ist, es stimmt definitiv viel besser mit der Höhe überein. Lass es uns machen. Im Moment hält etwas das offen. Warum ist es Div Hero, ist es, es hat eine Mindesthöhe. Ich werd es los. Alt-Wahltaste klicken. Was ich tun werde ist, dass ich keine Mindesthöhe verwenden werde , weil das sowieso variabel ist, also muss ich Min-Max nicht verwenden. Also sage ich einfach, die Höhe ist, sagen wir 100 vh. Nun, Sie können, aus diesem Drop-down-Menü hier, 100 VH sind 100% meines Viewports. Ich möchte, dass dieser Div-Held 100% meiner Viewporthöhe hat, was gut ist. Lass uns einen Blick darauf werfen. Lassen Sie uns eine Vorschau anzeigen. Also Command Shift P. Nun, sehen Sie, es ist die ganze Sache außer dem, was hier unten nachschaut. Lass uns das schließen. Schau mal nach unten. Da sind noch mehr. Ich dachte, ich sage 100%. Es tut es, es ist kein, es versucht nicht, den Space Lift zu füllen. Was es tut, ist, dass es in deiner kompletten Größe aussieht. Und dann sag: Ist diese Box 100, ist diese Größe. Es ist also von oben hier nach oben unten. Es nimmt diese Messung vor und wendet sie mit dieser helleren grauen Box an. Deshalb geht es ein bisschen weiter. Ergibt das Sinn? Greift irgendwie nach dieser Messung und wendet sie dann an. Ordnung, schauen wir uns das an, sagen wir einfach 50 Ansichtsfensterhöhe. Es betrachtet das Ganze von oben bis unten, teilt es durch zwei und dann Edelsteine, die hier drin sind. Sie können also entscheiden, ob das für Sie funktioniert. Es ist wirklich nett auf einigen Seiten , wo es verschiedene Abschnitte gibt. Du hast die besagte Navigation und es fällt auf sie an. Sie können die volle Browserhöhe verwenden. Nun, die Höhe des Darstellungsfensters. Oft habe ich es gerne , damit es noch gesehen werden kann. Ich klicke hier rein und halte die Umschalttaste gedrückt. Wenn ich also zu 80 Prozent gehe, dieses Zeug immer noch seinen Höhepunkt wie über der Falte. Es schaut nur heraus, wenn jemand auf meine Website geht und die Navigation nicht benutzt. Er glaubt nicht, dass auf dieser Folie nichts anderes ist nur ein großer alter Mann und ein Raupenanzug. Es ist so, sie können sehen, wie dieses Zeug aufgeht und das ist eine Möglichkeit , es zum Aufheben zu zwingen. Während wir früher, als wir in Min-Höhe waren, hofften wir, dass die Leute sehen können. Deshalb habe ich es ziemlich klein gehalten. Also lasst uns das loswerden. Lass uns eine Minthöhe gehen, an die ich mich nicht erinnern kann. Also nimmt es zu. Aber was passiert bei jemand anderem? Ich werde eine Vorschau des Befehls Shift P Control Shift P Wenn jemand einen Monitor hat, der so groß ist, wird er nicht funktionieren. Sie werden gehen, es ist nur der Typ im Raupenanzug. Wenn wir es mit der Höhe des Ansichtsfensters gemacht haben, gehen wir zurück. Du verstehst es richtig. Lass es uns nochmal machen. Garantiert, Sie machen 80 Prozent der Ansichtsfensterhöhe. Es spielt keine Rolle, auf welchem Gerät sie sich ansehen. Es werden immer 80% sein. Kannst du sehen? Es war drin kann es auch nicht. Nun, visuell wird es zu klein. Es berechnet die Höhe des Ansichtsfensters und macht sie dann zu 80% davon. Es ist also ziemlich cool, großartig für die Körpergröße. Damit das wirklich gut funktioniert, wenn Sie gerade in dieses Video eingesprungen sind, habe ich diesen Div-Helden als ein Layout von Flexbox festgelegt , weil es mir erlaubt hat, das zu tun. Wenn ich es tatsächlich ausschalte, erlaubte es mir zu gehen. Du Flexbox, du bist vertikal und ich möchte, dass du dich in der Mitte ausrichtest. Okay? So schnell tauche ich darum herum. Tun Sie das, wenn Sie in der Mitte ihrer Ansichtsfensterhöhe sein möchten , dieses Kind hier, Sie können dorthin gehen. Oh Mann, ich habe alles kaputt gemacht. Du bist auf diese Weise im Layout. Geh zurück. Das ist die Ansichtsfensterhöhe. Das Einzige, was Sie berücksichtigen sollten, ist , es hier etwas schwierig ist, denn wenn Sie in diesen Optionen eine Vorschau anzeigen und diese Optionen verwenden, insbesondere auf Mobiltelefonen, können Sie sehen, dass einen Prozentsatz des Ansichtsfensters zu machen und so zu sein, als wäre das komisch. Aber niemand telefoniert so lange, oder zumindest nicht im Moment. Es ist also schwer hier in Webflow zu gehen. Wie groß wird das aussehen? Kannst du sehen, dass es jetzt das Viewport Phone benutzt, mein Telefon hat wahrscheinlich ungefähr ein solches Verhältnis, oder? Höhe zu Gewicht, Höhe bis Taille, Höhe zu Breite. Okay, um das zu umgehen und eine Vorschau anzuzeigen, besteht darin, Ihre Website zu veröffentlichen, zu veröffentlichen und sie dann in einem anderen Browser zu öffnen. Will eigentlich, lass uns das dort machen. Ordnung, das ist also mein Viewport. Ich kann einfach mein Monitoring ziehen, was mein, tut mir leid, meinen Browser und es versteht mich nicht. Ich kann es irgendwie vortäuschen. Aber ich möchte das Handy sehen und es zeigt es mir nicht. Also, was Sie zumindest in Chrome tun können, und ich bin mir ziemlich sicher, dass alle es herausfinden. Wenn Sie etwas anderes als Google Chrome verwenden, können Sie mit der rechten Maustaste darauf klicken und sagen: Lassen Sie uns diese Website untersuchen. Das ist ziemlich cool. Und du, was du suchst, ist dieser Button hier. Ich denke, Ihre befindet sich vielleicht auf der rechten oder linken Seite, aber Sie suchen nach diesem Symbol. Klicken Sie darauf. Und du kannst sagen, ich würde mir das gerne auf einem iPhone Pixel Five zeigen , okay? Das Schöne daran ist, sieh dir das an. Es schneidet tatsächlich den Bottom-Up ab. So wird es auf meinem Handy aussehen. Wenn ich ein neues hätte, habe ich ein altes Pixel. Aber wie wird es auf dem iPhone SE aussehen? Es wird anders aussehen, ein großes Telefon, ein anderes Verhältnis. Aber zumindest stimmt das Viewport-Mitglied überein, wie es auf dem Telefon aussehen wird. Hier ist es super lang und dehnbar. Chicken und Webflow könnten hier Sachen machen , wo Sie den Moment irgendwie können, Sie können die Breite berechnen, aber Sie können die Höhe nicht machen. Chick fühlt sich an wie etwas, das diese Breite des Ansichtsfensters wieder erhöhen könnte . Ich benutze es nie. Es ist machbar. Sie haben vielleicht einen guten Anwendungsfall dafür. Und ich zeige dir eine zufällige Sache, weil mir keine gute Verwendung einfällt. Und ich nehme meine Grid-Miniaturansichten. Und ich sage, dass Ihre Rasterminiaturansichten eine Breite von, sagen wir 50%, 50 Ansichtsfensterbreite haben, VW. Oder du kannst es hier reinwerfen und es hat nur in meinem Viewport geschaut. Das Ganze wurde durch die Hälfte geteilt und gesagt, in Ordnung, das ist diese Messung und ich werde sie hier anwenden. Beachten Sie, dass es nicht in der Mitte ist. Es ist nicht so, dass 50 Prozent vom Rand oder an den Rand des Bildschirms gehen und aufhören zu sagen, wie breit ist die Breite? Ordnung, ich weiß, wie die Zahl lautet. Nimm es und trage es auf diese Box auf und es geht ins n. Deshalb sind es irgendwie über 50%. Du verstehst es. Ordnung, das ist VH und ein bisschen VW. Auf das nächste Video. 59. Wie man die navbar in Webflow stylt: Hallo zusammen. In diesem Video schauen wir uns diesen Typen an , die Nav-Bar. Er ist eine vorgefertigte Komponente k. Und wir haben uns früher im Kurs angesehen, und wir haben sie irgendwie verlassen, weil wir losgegangen sind und diese wirklich einfache gebaut haben, aber nur einen Knopf hat. Ein Knopf macht keinen Spaß. Wir werden mehrere Knöpfe haben. Und weil wir diese vorgefertigte Komponente verwenden , wenn wir beispielsweise zur Handy-Ansicht kommen, beispielsweise zur Handy-Ansicht ist es ein Burger-Menü und schauen Sie, es rutscht heraus. Irgendwie. Dieses Video wird Spaß machen, weil es etwas bewirken wird, das all das Wissen verbindet, das wir bisher im Kurs gelernt haben. Nehmen Sie all die guten Teile der vorgefertigten Sachen wie diese Navigationsleiste hier, bei der es sich um vorgefertigte Komponenten handelt, aber Sie können sie auch anpassen, sie so gestalten, dass um vorgefertigte Komponenten handelt, aber Sie können sie auch anpassen, sie so gestalten, sie das tun, was wir wollen, unsere erstaunlichen Webflow-Fähigkeiten verbessern. Du bist bereit, ich bin bereit. Lass uns das machen. Also zuerst habe ich nur eine leere Seite, um sie von dem zu trennen, was wir getan haben. Denn was wir vorher gemacht haben, ist, dass unsere Navigation in Ordnung war. Wir hatten nur einen Knopf. Also, als wir zum Handy gingen, war es in Ordnung. Wir benutzen einfach diesen Knopf. Okay. Oder klein genug, um hier zur Seite zu gehen. Aber eine Ein-Knopf-Website macht nicht besonders viel Spaß. Lassen Sie uns also eine Website mit mehreren Schaltflächen erstellen. Also fügen wir dieser leeren Seite die Navbar-Komponente hinzu und ziehen sie an. Es hat eine coole Sache, hat ein paar Dinge. Es hat diese äußere Hülle, ein bisschen wie ein Abschnitt. Es hat einen Behälter, der es in der richtigen Breite hält. Es hat Platz für ein Logo. Es hat einen Wrapper um eine Reihe verschiedener Knöpfe. Sie nannten sie hier Nav-Links , okay, statt Buttons. Und dann gibt es noch eine Menüschaltfläche, die wir tatsächlich sehen können , weil sie ausgeschaltet ist und nur angewendet wird. Du hast ihr Handy dort ist Hallo. Deshalb mögen wir diese Komponenten weil sie viel davon gemacht haben, ein auszuschalten und die gesamte Ausrichtung zum Laufen zu bringen. Und noch mehr klicken wir auf, wenn Sie hier für die Navbar auf das kleine Home-Icon klicken. Und entweder die Option Einstellungen hier oder das Einstellrad hier drüben. Diese Dinge, das ist kein Webdesign wie dieses, sind kein Code-Zeug, das wir herausfinden wollen. Was ist absolute Positionierung. Dies sind Dinge, die Webflow getan hat , um Dinge wie die Navigation zu vereinfachen. Was sie gesagt haben, ist, wenn Sie auf das Handy gehen und ich eine Vorschau darauf sehe und ich darauf klicke, wird ein Drop-down-Menü angezeigt. Was ist, wenn Sie von der Seite kommen wollen, anstatt das Ganze wieder aufzubauen? Man kann „Navigation“ sagen. Komm von rechts. Sie gehen in die Vorschau, es kommt mit einem Rechtsklick an einer beliebigen Stelle. Es geht weg. Ein paar andere lustige Sachen. Okay. Nehmen wir an, es spielt auch keine Rolle, welche Ansicht Urin ist. Ich kann zu meinen Einstellungen gehen und sagen, ich möchte eine weitere Schaltfläche hinzufügen. Ich kann auf Link hinzufügen klicken und einen weiteren hinzufügen. Ich nenne das vielleicht meinen Laden. Nur weil wir das meinen Laden nennen werden. Okay. Macht es einfach. Ich weiß, es bedeutet, weißt du, jetzt kann ich mir einfach diesen Link-Artikel schnappen, kopieren und einfügen, das ist genau das Gleiche, aber der Workflow hat es noch einfacher gemacht. Jetzt ohne wirklich coole Fähigkeiten wissen wir, dass es ein schnelles Div gibt um diese Jungs geht, die sie alle zusammenhalten. Und eine andere coole Sache, die sie für uns eingebaut haben , ist, lass uns eine Vorschau des Befehls Shift P Control Shift P ist, wenn ich runter komme. Kannst du hier sehen, ich füge mein Logo in einer Sekunde hinzu. Okay, wenn ich hier bin, wird es in das Burger-Menü umgewandelt, was etwas früh ist. Okay, es gibt genug Platz für all das Zeug. Ich habe nur vier Knöpfe. Was Sie also tun können, ist, dass Sie nur die Navigationsleisteneinstellungen sagen können . Komm schon. Ich möchte, dass sich das Menüsymbol für turbulente Strömung einschaltet. Lassen Sie uns es jetzt für Telefone im Querformat und darunter oder nur für Mobilgeräte einschalten , je nachdem, wie viele Tasten Sie haben. Okay, wenn ich es jetzt in der Vorschau sehe, komme ich zum Tablet. Es bleibt dort. Aber wenn ich zu Landscape Mobile komme, wird es aktiviert. Cool, danke, Arbeitsablauf. Es gibt noch andere Dinge, die du mit K herumspielen kannst , mit der Lockerung herumspielen. Leg dich nicht mit dem Lockern herum. Es gibt alle. Die Standardeinstellung war gut. Die Expo wurde nur eine gemacht, während du hier bist. Bereit? Okay. Los geht's. Was sonst? Das Timing? Wenn ich 2 s nehmen wollte, wie lange sollte das groß sein? An wie viele Millisekunden erinnern Sie sich? Du hast es richtig verstanden? 2000. Okay. Und das wird viel zu lange dauern. Lassen Sie uns eine Vorschau darauf geben. Okay, füge deinen eigenen Soundeffekt hinzu. Schauen wir uns also an, wie wir da reingehen und es zerbrechen und reparieren. Und nehmen wir an, wir wollen die größere Speisekarte ändern, irgendjemand. ist eine interessante Sache für dieses spezielle Setup hier, diese Komponente, wenn ich das will und ich stylen möchte, kann es auf eines davon heruntergehen, also erscheint es tatsächlich. Und dann kann ich darauf klicken. Und es wird wie eine Schrift behandelt. Seltsamerweise werden Icons wie eine Schrift behandelt. Ich kann sagen, du hast eine andere Farbe. Okay, meine Markenfarbe, die immer irgendwie grün ist. Hier wird es dunkler. Ein Kontrast, der Gold gewann. Gehen wir zurück zu den Desktopdeckeln. Lass uns ein bisschen gehen. Das ist alles ziemlich schnell und schnell, ein bisschen schnell und ich möchte es mir noch einmal ansehen. Aber ich werde jetzt etwas langsamer gehen und versuchen , es so zu machen, wie es in meinem letzten Projekt aussah. Okay, wo war es? Hier? Es sieht hier ungefähr so aus mit solchen Knöpfen. Ich mache eine schnelle Version davon, weil ich Ihnen jetzt zeigen möchte , wie wir unsere Fähigkeiten verbessern können. Damit es so aussieht, aber ich werde nicht zu viel Zeit verbringen. Also zuerst habe ich diese Markensache, die cool ist. Ich kann ein Logo einwerfen. Also habe ich einen von vorhin. Da ist es da. Es steht in Ihren Übungsakten. Sie können jedes Logo anbringen, das Sie möchten. Okay, wir verwenden das früher für unsere Sponsoren, für unsere allererste Webflow-Website, die da drin ist. Wie kriege ich es jetzt in die Mitte? Du könntest Flex machen. Sie können anfangen zu biegen oder Sie könnten einfach sagen das Logo tatsächlich etwas gepolstert ist. Daran ist nichts falsch. Es gibt nichts, was man bewegen kann , um die Kinder in den Mittelpunkt zu rücken. Oder du könntest das einfach tun, weil dieses Navi niemals größer oder kleiner werden wird . Ich will nicht, dass es so ist. Ich glaube, es ist groß genug. Es wird nicht expandieren und schrumpfen. Okay, lass uns diese Knöpfe stylen. Also werde ich eine Klasse namens button nav hinzufügen . Und was mache ich? Fangen wir mit der Hintergrundfarbe an. Ich wähle eine zufällige Farbe, vielleicht das Dunkelgrün. Ich kann mich nicht erinnern, was es ist. tun sie. Zecken werden Topographie wird weiß sein. Ich wähle eine Schriftart für alle meine Buttons aus. Jetzt klicke ich immer raus und fange dann an, Sachen zu machen und was mein Styling markiert. Jetzt habe ich den Körper ausgewählt und ich weiß, dass ich gerade damit anfangen wollte. Halte es wieder auf den Knopf. Und du wirst eine Schrift sein, Droid Sans, sie nicht kleiner machen. Und ich möchte mit dem Abstand herumspielen. Ich gehe jetzt etwas schnell, weil wir Fähigkeiten einsetzen, von denen wir bereits wissen, dass ich das kleiner machen werde . die Wahltaste auf einem Mac, die Alt-Taste auf einem PC gedrückt halten und nach oben ziehen, können wir das erreichen. Ich verstehe, warum mach ich damit? Das ist ein interessanter Punkt. Kannst du das mit der 20 2020 bestätigen, okay. Das ist Teil des Geschäfts mit der Verwendung einiger Komponenten, obwohl ich auf keinen Fall darauf klicken kann, dass dies nicht der Fall ist. Normalerweise kann ich bei gedrückter Umschalttaste darauf klicken und es wird dir sagen, woher es ihre Styles bezieht. Es versteckt diese Frau vor uns. Es sagt voraus, dass dieses Ding es kaputt macht, und sagt, ich habe dich zu einer Nav-Komponente oder Navbar-Komponente gemacht. Und es gibt viele Sachen, die ich dir nicht zeigen werde, also kannst du sie nicht kaputt machen. Da. Tolle Dinge, die wir mögen. Ich will da rein. Ich möchte es ändern. Nun, ich muss es einfach außer Kraft setzen. Ich kann es überschreiben, was cool ist. Ich weiß, dass mit dieser Navbar Dinge im Hintergrund laufen, mit Floats und allerlei guten absoluten Positionierungsdingen. Aber du kannst es nicht in Webflow finden, der Ausgabe am Ende. Aber halte es einfach schön und einfach für uns. Und ich möchte abgerundete Ecken anbringen. Du. Willst du von oben nach unten drücken. Auch hier könnte ich Flexbox benutzen, aber eigentlich sage ich einfach alle Buttons. Habe einen Top-Manager. Los geht's. Es ist für alle von ihnen editierbar. Lassen Sie uns unsere speziellen Verknüpfungen Command oder Control Return verwenden Command oder Control Return und dann NAV eingeben, um ein paar meiner Tastaturen herunterzufahren. Jetzt muss ich zum nächsten Button gehen. Ich könnte hier hingehen und darauf klicken. Aber denken Sie daran, dass es eine Abkürzung gibt. Erinnerst du dich, wie man Geschwister auswählt die oben, unten, links oder rechts sind? Einer von ihnen traf sie alle richtig und links. Ich gab dir wieder Command Return. Ich kann sagen, dass Nav ein paar runtergekommen ist, geh zum nächsten. Fühlt sich gut an, wenn man ein paar Abkürzungen zusammenwirft. Sein Name auch, er wird wahrscheinlich etwas Abstand brauchen. Okay. Ich gehe links auf den Rand. Du kannst gehen. Nett. Auf dem Höhepunkt davon stellte sich heraus, dass der Knopf das Ding war, das ihn offen hielt. Also was ich sagen werde ist Navbar, du hast eine Mindesthöhe, alle fertigen Pixel runter, runter. dort hineinklicke, halte ich Umschalttaste gedrückt und benutze meine Auf- und Abwärtspfei Wir gehen, das reicht. Es ist nicht sehr hübsch. Also haben wir es gestylt einige unserer Klassen benutzt. Sie haben vielleicht eine Combo-Klasse verwendet, und jetzt wird sie kaputt gehen. Lassen Sie uns eine Vorschau anzeigen. Okay, und ich werde zu dieser Ansicht kommen und zu meinem Gott, damit ich gehen kann. Oh, du sagst: Ja, lass uns zu ihnen gehen und gut. Okay. Auf dem Desktop. Okay. Ish und das hier drüben, ich will das nicht machen und ich bin nicht dazu gekommen. Wie ändert man sie? Weil, weißt du, und ich weiß, dass ich einfach zu dieser Ansicht gehen und sie ändern kann und sie wird sie von unten an ändern. Du sagst: Nun, warum sehe ich es nicht. Klicken Sie auf die Navigationsleiste und klicken Sie entweder auf das COG oder gehen Sie zu Ihren Einstellungen. Und du kannst sagen, zeig es. Dieses Ding hier. Verwirrt mich für eine Weile, ist wie, was macht es, wenn Sie ein Desktop sind? Tut das nicht. Oh, eigentlich lass uns hier hingehen. Und wenn man am Desktop ist, macht es irgendwie komische Sachen. Okay? Es zeigt dir nur hier rein. Es wird nicht für immer eingeschaltet, nur während Sie sich in der Vorschau befinden. Und jetzt kann ich es stylen , denn wenn ich eine Vorschau der Site aufrufe, verschwindet es. Es ist einfach da, solange du daran arbeiten kannst. Es ist also nur so, dass sie zeitlich begrenzt sind. Also zeige ich es, aber es wird sich ausschalten. Jetzt kann ich sagen, wenn ich in diesem bin, gehe ich zu Nav-Buttons , um einige andere Dinge zu tun. Es wird, es wird dieselbe Farbe behalten. Ich werde die Polsterung außer Kraft setzen . Zuallererst gehe ich mit den abgerundeten Ecken. Auf Wiedersehen, Null. In Bezug auf das Padding werde ich es so einrichten, dass es schön groß und auf einem mobilen Gerät anklickbar ist, die Schriftart muss größer werden. Es wird zentriert sein, muss keines dieser Dinge sein, genau das, was ich entschieden habe. Okay. 13 oben und 13 unten. Okay. Und es ist hässlich. Und es ist okay, ich denke, es ist okay, Algorithmus-Zeug zu entwerfen, wenn man weiß, es ist okay. Aber ich schätze, es ging darum, Ihnen zu zeigen, wie es geht und wie cool diese Nav-Komponente ist. Weil wir eigentlich navbar sagen können, verstecken wir es. Und wenn du es stylen willst, zeige es vorübergehend, solange ich es stylen kann, werde ich noch eine letzte Sache los, bevor ich es in der Vorschau sehe. Ich wollte die Marge auf Null setzen. Da ragt ein bisschen Spielraum heraus. Es scheint das zu tun. Und jetzt werde ich es in der Vorschau ansehen. Und es geht ab und zurück, scheint es zurückzusetzen. Jetzt gibt es meine wunderschöne Speisekarte. Okay, es war ein bisschen wie ein Wirbelwind. Ich fühlte mich wie. Aber ich schätze, es zeigt dir schon am Anfang, wo wir, warum ziehen wir nicht einfach alles auf die Seite und bauen diese App-Komponenten. Das liegt daran, dass wenn wir zu Dingen kommen, bei denen wir wissen müssen was Klassen sind und was all diese Einstellungen hier in meinem Stil sind, ich meine, dass sie verwendet werden und wie man sie überschreibt. Und was Blau bedeutet und Gelb bedeutet Rho wird ein bisschen natürlicher. Wir können anfangen, Vorlagen und andere vorgefertigte Komponenten zu verwenden und deren Chef zu sein. Bring sie dazu, zu tun, was wir wollen. Ordnung, das ist das Styling der vorgefertigten Navbar-Komponente in Webflow. 60. Hinzufügen und Verbinden von Seiten in Webflow: Hallo zusammen. In diesem Video schauen wir uns dieses Seiten-Panel an. Okay, wir haben eine Homepage. Ich zeige Ihnen, wie Sie neue Seiten erstellen. Ordner, erstellen Sie Seiten, die Entwürfe sind, damit sie nicht veröffentlicht werden, während Sie daran arbeiten. Wir werden Utility-Seiten besprechen sie mit ein wenig Navigation verbinden. Es wird nicht besonders schick sein. Okay, da ist unsere Kontaktseite zurück auf der Homepage. Und zwei sind wunderschön gestaltete Portfolio-Seiten. Ordnung, lass uns loslegen. Ordnung, um eine Seite zu erstellen, gibt es einen Seiten-Reiter, oder du kannst ihn hier oben anklicken. Es liegt an dir. Sie öffnen beide dasselbe. Die gesamte P-Taste lässt sich ein- und ausschalten. Und wir haben bereits eine Seite erhalten, eine statische Seite, was später wichtig sein wird, wenn wir mit der Erstellung dynamischer CMOS-Seiten beginnen . Im Moment brauchen wir eine weitere statische Seite , die nur bedeutet, dass sie nicht viel macht. Es stammt nicht aus einer Datenbank. Und wenn Sie immer noch nicht wissen, was ich meine, besprechen wir das später. Also brauche ich eine andere Seite. Ich habe die Angewohnheit, zuerst auf diese Schaltfläche zu klicken, nicht auf einen Ordner. Ich will eine neue Seite. Klicken Sie also darauf, geben Sie unsere Seite an und der Kontakt ist ein sehr gebräuchlicher Name für die Kontaktseite. Die Kugel hier ist, glaube ich, ziemlich wichtig. Können Sie sehen, dass das unser Domain-Slash sein wird? Kontaktieren Sie uns. Lassen Sie uns, sie werden das sein, was in den Browsern der Leute erscheinen wird, einige dieser SEO-Einstellungen später und später auch den Passwortschutz behandeln . Aber im Moment geben wir ihm einfach einen Namen. Klicken wir auf Erstellen. Und dass mein Freund eine brandneue Seite ist, macht nicht viel und lässt los und wechselt jetzt zwischen unserer Homepage. Und ich werde uns auf der Seite kontaktieren. Wenn ich auf meine Homepage gehe und eine Vorschau dieser Seite sehe, haben wir keine Möglichkeit, dorthin zu gelangen. Okay, es gibt absolut keine Möglichkeit, den Vorschaumodus und unsere Homepage zu verlassen und einen dieser Schaltflächen zumindest anklickbar zu machen. Also lass es uns machen. Lass uns diesen riesigen Riesen hier machen. Wenn er angeklickt wird, weil er ein Knopf ist, hat er hier dieses nette kleine Zahnrad mit der Aufschrift Link-Einstellungen. Sie können entweder darauf klicken oder, wenn es ausgewählt ist, zu diesem Zahnrad gehen, das hier drüben sitzt. In dieser Option steckt noch mehr. Es spielt jedoch keine Rolle, welche Sie verwenden. Schauen wir uns das mal an. Es ist nett und aufgeräumt, daher wird standardmäßig diese URL verwendet. Dies ist unser Link zu einer anderen Seite. Wenn Sie auf diese Seite gehen möchten, klicken Sie auf uns. nächste heißt Seite. Welche Seite? Praktisch, es ist bereits hier, unsere Kontaktseite. Ordnung, geben wir jetzt eine Vorschau. Also Command Shift P oder Control Shift P eine Seite kann eine Frage stellen und ich gehe auf die große alte leere Seite. Da haben wir's. Verbinde es. Also gehe ich zurück zu unserer Homepage. Ich mache dasselbe für diesen Kerl. Er verbindet sich auch. Gehen Sie also zur Seite, auf der Sie zur Kontaktseite gehen. Das Problem ist, dass es kein Zurück mehr nach Hause gibt, sobald ich auf diese Kontaktseite komme . Was wir also tun werden, ist, diese Navigation so zu verschieben, dass sie auf beiden Seiten angezeigt wird. Wir machen es auf die Art des Höhlenmenschen, und dann zeige ich Ihnen ein bisschen, wie man Symbole herstellt. Also Höhlenmensch ist, klicken wir auf diesen ganzen Abschnitt namens nav. Lass es uns kopieren. Wechseln Sie zu meiner Kontaktseite und klicken Sie auf Einfügen. Es wird heißen, dass Sie ein Element auswählen müssen. Weiß einfach nicht, wohin ich gehen soll. Also klickst du einfach auf den Körper, drückst dann auf Einfügen und es wird funktionieren. Gehen wir zurück zu unserer Homepage. Lassen Sie uns eine Vorschau anzeigen. Lass uns hierher gehen. Ich hab ein paar Sachen. Diese Schaltfläche, wenn sie mit sich selbst verbunden ist. Okay. Ich gehe auf die Kontaktseite, aber wir haben keinen Weg nach Hause. Wir könnten einen Home-Button hinzufügen und viele Leute werden das tun. Was wir tun werden, ist das Logo wieder zu verbinden. Und das ist eine interessante Art von Benutzertests. Cade, sieh dir dein Publikum an, um zu sehen, ich weiß, dass viele Websites keinen Home-Button mehr haben , aber einige von ihnen schon. Es hängt von Ihrer Zielgruppe ab, ob sie wirklich explizite Informationen benötigen, z. B. wie man auf dieser Website navigiert, oder ob sie sehr versiert sind und wissen , dass Sie auf das Logo klicken, um zur Startseite zurückzukehren. Das ist Ihre Aufgabe, zunächst Ihre besten Vermutungen anzustellen und dann einige Tests mit Ihren Benutzern durchzuführen , um festzustellen, ob sie durchgeführt werden können und nicht hängen bleiben. Kehren wir zur Vorschau zurück. Gehen wir zurück zu unserer Homepage. Gehen wir eigentlich zu unserer Kontaktseite. Denn wir wollen dass dieses Logo angeklickt wird. Wenn es nur ein einfaches altes Logo ist, wie ein JPEG oder ein PNG oder ein SVG. Eigentlich machen wir das in einem Zyklus, weil wir dort Zecken haben. Lass uns das zuerst machen. Sie haben ein paar Optionen. Wir werden im Moment eine Option machen. Ich wähle einfach alles aus und wickle es ein und bewege mich. Wir haben schon viel früher im Kurs Hyperlinks erstellt. Es wird ein Link eingefügt. Das Problem ist, dass es so gehen wird. Es ist blau, ich muss es stylen. Lassen Sie uns das im Moment ignorieren. Ich habe die Unterstreichung. Was ich tun möchte, ist , auf die Seite zu gehen und zurück nach Hause. Okay, und lassen Sie uns jetzt eine Vorschau darauf geben damit wir jetzt eine Vorschau dieser Seite anzeigen können. Also Command Shift P, Control Shift P. Aber sieh dir nur diese Abkürzung an. Es steckt allerdings da drin fest. Also kann ich zurück zur Homepage gehen. Ich kann zu meiner Seite „Frage stellen“ oder meiner Kontaktseite und wieder zurück gehen. Okay, wenn es ein Bild ist, tun wir so, als wäre das ein Bildlogo wie dieses, gutaussehende Männer. Mit einem Bild. Wir müssen es in etwas zusammenfassen, das als Linkblock bezeichnet wird. Und lass uns das im nächsten Video gemeinsam machen, ich werde es zu einem besonderen machen, weil es ein paar Dinge zu besprechen gibt. Wir haben eine grundlegende Navigation. Könnte einfacher sein , einfach zu kopieren und einzufügen. Und füge einen weiteren Home-Button hinzu. Ich müsste diese Jungs einpacken und einen kleinen Div machen, damit sie auf dieser Seite bleiben. Aber los geht's. Lass uns auf diese Seiten gehen, aber mehr. Also dieser hier, erstelle einen neuen Ordner. Wofür ist es? Es ist, wenn du gruppieren willst. Ich weiß, dass ich viele Portfolio-Seiten haben werde, okay, also habe ich zunächst sechs. Ich habe vor, 50 oder 100 zu haben. Okay, also was du tust, ist sie in einen Ordner zu legen , damit sie nicht nur wie dieser riesige Stapel hier sind. Wie jede Art von Dateiverwaltung. Dieser wird mein Portfolio heißen, Portfolio. Und alles was es ist, kannst du sehen es ist ein bisschen wie ein kleines Ordnersymbol. Jetzt kann ich eine Seite erstellen, die mein Webdesign für einen Hirschkajak-Club ist . Dies ist das Projekt, für das ich mein Portfolio anzeigen möchte. Ich möchte, dass es in den übergeordneten Ordner des Portfolios verschoben wird. Bevor ich also weiter gehe, ist es auch fertig, wenn ich auf Erstellen klicke. Wenn ich auf Erstellen klicke und auf Veröffentlichen gehe, sage ich, dass ich die Homepage veröffentliche, wird auch diese Seite veröffentlicht, auch diese Seite, auch wenn ich sie noch nicht fertiggestellt habe. Wenn Sie also eine Live-Website haben, verwenden die Leute sie gerade. Ich veröffentliche einfach irgendwas, weil das niemand überprüft. Es ist, weißt du, es hat keinen guten Rang, wahrscheinlich hat es überhaupt keinen Rang. Aber du hast eine Website, die funktioniert. Sie möchten wahrscheinlich zu Save As Draft gehen. Okay. Und als hätte ich eine Seite wie zuvor erstellt. Okay. Der Unterschied ist also, kannst du da a sehen, es ist in einem Ordner, und B, es hat dieses kleine Symbol dort. Es bedeutet, dass ich daran arbeite, aber wenn ich auf Veröffentlichen klicke, wird es erst veröffentlicht, wenn ich auf dieser Seite bin. Und ich gehe zu diesem kleinen Zahnrad hier und sage, du bist jetzt Bühne für Publish, okay, das heißt nur, nächstes Mal, nicht jetzt ist es nicht veröffentlicht. Bedeutet nur, dass es das nächste Mal inszeniert wird, bereit zu gehen. Und das nächste Mal klicke ich auf Veröffentlichen. Okay, es wird ins Internet gehen und andere Leute können es sehen. Aber im Moment ist das offensichtlich eine schlechte Idee , weil nichts drauf ist. Vielleicht werde ich wieder ein Draft. Okay, ich mache das Gleiche und lasse meine P-Taste die Homepage greifen, schnappen Sie sich dieses Navi, kopieren Sie es. Ich werde meinen Peaky bekommen, zu meinem Entwurf gehen, zuerst auf den Körper klicken und Einfügen drücken. Und ich habe eine Portfolio-Seite. Da ist nichts drauf. Wir werden diese Seiten im Laufe der Zeit gestalten. Aber angesichts der laufenden Struktur werde ich wieder zurück zum schmerzenden, spitzen, zurück nach Hause springen . Ich bekomme diesen Button, wenn er angeklickt wird, um zu gelangen, ich weiß, dass das die falsche Art von Projekt ist, aber hey **, wenn es hier zu dieser Entwurfsseite geht, die mein Webdesign-Projekt ist. Wenn ich es jetzt in der Vorschau sehe, springt es zu dieser Seite. Ordnung, alle Seiten. Bevor wir weitermachen, geht es hier um diese beiden. Passwort. Für dein kostenloses Konto. Du darfst keine Passwortvorhersage verwenden. Sie müssen Ihre Website aktualisieren , um den Moment für dieses kostenlose Konto zu erhalten , das ich für dieses spezielle Konto verwende. Ja, wir können es nicht tun, aber diese Passwortschutzseite soll ich es dir zeigen. Ich kann diese Seite hier sagen. Eigentlich diese Seite hier. Geh zum Zahnrad, das ich mit einem Passwort schützen kann. Okay. Ich kann es einschalten, wenn Sie auf diese Seite gehen möchten, vielleicht sind es nur Mitglieder, eine Art sensibler Daten. Ich kann das einschalten. Aber weil es das kostenlose Konto brauchte ich zuerst den Lageplan zu besitzen. Was bedeutet diese Seite? Das ist nur das Aussehen und die Haptik davon. Wenn es dir nicht gefällt, gehst du, wir können damit rumspielen. Ich kann dem einen Stil hinzufügen. Okay, so sieht es also aus, wenn jemand auf diese Seite kommt, du könntest das für ein anderes Bild ändern. Du kannst den Text ändern, okay, es gibt dir nur einen Ort, an dem du ihn stylen kannst. Ich werde meins verlassen, so wie es bei den vier vierseitigen Seiten der Fall ist. Eine Vier- oder Vier-Seite ist das, was passiert, wenn jemand auf einen Link auf Ihrer Website klickt und dieser nirgendwohin geht, der Browser nach einer ganzen Seite sucht und diese ihm anzeigt. Und hier könnten Sie hingehen und den Stil erneut ändern. Vielleicht haben Sie weitere hilfreiche Informationen, vielleicht haben Sie einen Link zurück zur Homepage. Viele Leute werden es für ganze Seiten installieren , um lustig und lustig zu sein. Aber auch diese Option, wir uns gerade ansehen, können wir stylen. Ordnung, Homepage. Wir wissen was das ist. Ich habe eine Kontaktseite eingerichtet. Wir haben einen Ordner, den wir stapeln können. Wir könnten hier zehn, 20 oder 30 Seiten für unser Portfolio haben. Und das sind nur Utility-Seiten, die wir später im Kurs gestalten können . Wir werden nahtlose Seiten erstellen und E-Commerce-Seiten erstellen, die für Ihr Projekt zu ausgefallen sind . Erstellen Sie eine Kontaktseite und einen Portfolio-Ordner. Und eine deiner Seiten spielt keine Rolle, was sie ist, denn wir werden anfangen, sie mit verschiedenen Sachen zu laden. Das sollte das Ende sein. Ich bin aus der Zukunft zurück weil ich vergessen habe, dir etwas zu sagen. Nehmen wir an, Sie möchten eine Seite duplizieren, weil Sie viele Portfolio-Seiten benötigen, was ich später im Kurs erkannt habe. Und ich habe Ihnen unter Seiten nicht gezeigt, wie Sie zu Portfolio gelangen. Gehe zu dem kleinen Zahnrad oben, nicht in den Ordner, sorry, auf der eigentlichen Seite selbst, die du duplizieren möchtest. Dann geh zum Zahnrad, dann das dort, dupliziere die Seite. Du kannst einen zweiten machen. Okay, also werden wir eine zweite Portfolio-Seite namens Second Portfolio Page erstellen , weil mir momentan nichts einfällt. Du kommst auf die Idee. In Ordnung, das ist auch das Duplizieren von Seiten. Und damit ist dieses Video abgeschlossen, allerlei Seitenkram hier drin, plus ein kleiner Bonus. Wir nennen es einen Bonus, nur etwas, das ich vergessen habe. Ordnung, nächstes Video. 62. Ein Symbol und Überschreibungen in Webflow erstellen: Hallo zusammen. In diesem Video werden wir uns Symbole und Instanzen ansehen , Symbole als diese kleine Registerkarte hier können wir können, wir werden eine Navigation erstellen. Wir fügen es einfach zu unserer Seite hinzu. Und das Coole daran ist, dass es ein netter kleiner wiederverwendbarer Block ist. Aber wenn ich darauf eingehe und Sachen lösche, wird es von allen Seiten gehen, die ich habe, die Instanz schau, es ist von dieser Seite verschwunden um Sachen hinzuzufügen, Kopieren und Einfügen. Gehen Sie jetzt zurück zur Startseite. Sie alle folgen. Der Anführer wird noch ein bisschen weiter gehen und unten diese Karten erstellen , die alle miteinander verbunden sind, aber wir können sie einzigartig machen, indem wir Außerkraftsetzungen auf Ihren Symbolen setzen. Es ist super schick für Dinge in Ihrem Webdesign-Projekt, dass Sie hier viele Live-Dinge wie diese Karte haben können. Möglicherweise haben Sie Hunderte von ihnen, möglicherweise Produktlisten, Tausende davon, die alle durch ein Symbol gesteuert werden. Ordnung, lass mich dir zeigen, wie man eines macht , um ein Symbol zu machen. Und ich werde an meiner Kontaktseite, Homepage arbeiten, weil das die ist, mit der ich im Moment die meiste Zeit in unserem Problem verbracht habe , oder? Wenn ich diesen und einen weiteren Button kopiere und einfüge , vergiss, dass er sich in der Mitte befindet. Und wenn ich auf meine Homepage gehe, werden sie nicht aktualisiert. Also das werde ich tun. Ich gehe auf meine Kontaktseite. Lass mich den Kerl loswerden. Ich sage diesen ganzen Navigationsabschnitt. Ich werde dich bekehren. Lass mich zu meinem Symbol-Panel gehen. Beim zweiten Mal werde ich ein neues Symbol erstellen . Ich gebe ihm einen Namen. Erstellen Sie das Symbol. Und das war's. Wir haben ein Symbol geschaffen. Wir sind gerade innerhalb des Symbols. Wir können da wieder rauskommen. Okay, das heißt jetzt die Instanz des Symbols. Gehen wir jetzt auf meine Homepage. Okay? Und dieser Brocken oben, der hier Nav-Sektionsnerv genannt wird, ist nutzlos. Okay, ich werde es löschen. Und was ich tun möchte, ist mein Symbol zu greifen und eine Instanz davon herauszuziehen , was nur bedeutet, dass dies der Hauptdarsteller ist , der sie alle kontrolliert. Und ich kann Kopien von ihnen herausziehen, sie an die richtige Stelle bringen, kann sie verwenden. Er ist auch grün. Und das Coole daran ist jetzt, wenn ich reingehe und mein Symbol bearbeite, okay? Und ich sage dir, es gibt zwei von euch. Passiert wieder auf unserer Kontaktseite. Irgendwann. Da haben wir's. Es kontrolliert also alle Instanzen dieses Symbols. Diese Sprache ist ziemlich wichtig. Sie können hier sehen, dass kleine Icons wichtig sind, das Grün wichtig ist. Du weißt also, du betrachtest Symbole. Vielleicht schauen Sie sich das Dokument einer anderen Person an oder eine Vorlage, die Sie gekauft oder geklont, gestohlen oder auf der Straße gefunden haben . Cool. Lass es uns auf unsere letzte Seite setzen. Wir haben tatsächlich die beiden. Schon wieder. Du bist zum Symbol gegangen. Ziehen Sie eine Anzeige heraus. Los geht's. Und ich habe noch eine Seite zu erledigen, was ich jetzt nicht tun werde, die wahrscheinlich später zurückkommen und mich verfolgen wird , wenn Sie bearbeiten, zusammenstellen, alles andere irgendwie ausgegraut wird und Sie alle anpassen eine einzige Sache. Aber es gibt Zeiten, in denen wir einen Blick auf unsere Homepage werfen. So sind die Dinge hier einigermaßen gute Kandidaten für ein Symbol. Okay, es gibt nur sechs auf der Homepage. Würde ich gehen und es tun? Ich würde das wahrscheinlich in 50% der Fälle tun. Okay. Aber wenn dies ein Artikel in einem Geschäft wäre, Anzeige des Preises und der Produktdetails, dann ja, weil Sie möglicherweise Hunderte oder Tausende davon haben. Sechs von ihnen, kein großes Drama, um alle sechs auf den neuesten Stand zu bringen, bis ich finde, dass es der Fluch ist. Ich denke nein, es muss kein Symbol sein. Und das bringt das Universum sofort dazu , einen Grund zu erfinden , warum ich 1.000 davon brauche. Aber nehmen wir an, ich möchte, dass dies unser Symbol ist , weil ich es wiederverwenden möchte, aber sie sind alle ziemlich einzigartig. Falls ich nicht möchte, dass sie alle meiner Navigation übereinstimmen. Wie machen wir das? Zunächst wählen Sie alles aus. Also klicke ich hinein und benutze meinen Aufwärtspfeil, um mir die ganze Karte zu schnappen. Welches sollten wir eigentlich machen? Ich mache das hier. Okay. Ich nehme mir das ganze Karten-Thumbnail , das ich erstellt habe. Gehe zu meinen Symbolen. Lass mich ein neues Symbol erstellen. Sie können tatsächlich mit der rechten Maustaste klicken, wenn Sie hier oben mit der rechten Maustaste auf diesen Namen und ihn in ein Symbol konvertieren können, wird ein Symbol erstellt. Ich gebe ihm einen Namen. Das wird meine Karte sein. Es ist Cola-Karte, Vorschaubild. Jetzt. Ordnung, und das funktioniert irgendwie. Ich kopiere es, füge es ein, füge es ein. Nein, bin ich nicht. Eines meiner widersprüchlichen Miniaturansichten. Kopiere es, füge es ein, füge es ein. Warum hat das nicht funktioniert? Das liegt daran, dass ich hier drin war und nicht wirklich das Ganze kopiert habe. Ich glaube, das habe ich gerade ausgewählt. Also werde ich mit meiner Bearbeitung, dem eigentlichen Symbol, herauskommen . Okay, jetzt habe ich die Instanz des Symbols ausgewählt. Und was ich will ist 123456. Okay, und das hier, es tut mir leid. Funktioniert das? Wir werden dich in den Müll werfen. Auf Wiedersehen. Okay. Also ich habe all das und es ist irgendwie gut, weil es bedeutet, dass ich durchgehen und sagen kann, großartig, ich werde das entfernen. Hier. Du gehst. Einfach für meine tausend davon auf der Seite, aber ich möchte diese Dinge zusammen mit dem Text auch einzigartig machen . Wie mache ich das? Als Erstes müssen Sie Ihr Symbol finden. Es ist das grüne Ding. Da ist es da, gehen Sie hinein, um es zu bearbeiten, doppelklicken Sie darauf, um das Ding auszuwählen, das Sie ändern möchten. So muss es bei jedem einzelnen einzigartig sein. Und du gehst hier zu deinen Einstellungen. Also nicht die Stile gehen zu Einstellungen. Und du kannst hier sehen, du suchst nach diesen Dingern, dem lila Zeug. In diesem Fall sage ich, dass Sie mit einem Feld K verknüpft sind , und ich werde dieses Feld erstellen. Ich nenne es mein Thumbnail Hitting, Create und Link. Was ist in lila passiert? Genau das ist passiert. Was ist sonst noch passiert? Das ist dabei herausgekommen. Also nicht in den, wenn du alles bearbeiten willst, du gehst hinein. Wenn Sie jetzt nur kleine Teile dieser Instanzen ändern wollten, jetzt eine davon, weil es sich alles um Instanzen dieses einen Symbols handelt . Wenn ich auf diesen klicke und zu den Einstellungen gehe, wirst du sehen, kannst du sehen, kannst du sehen, dass das sofort überschrieben wird? Das ist das Ding, das ich gerade gemacht habe. Das war nicht da. Vor einer Sekunde nannten wir es Thumbnail Hitting und ich kann die Ticks hier ersetzen. Und das war, ich kann mich nicht erinnern. Dies ist ein farbiges Webdesign-Projekt. Okay, jetzt werde ich Instanzen einzigartig sein, aber wenn ich etwas ändere, kann ich in jede dieser Instanzen gehen , egal um welche es sich handelt. Aber ich kann es physisch sogar durch eine Bewegung machen und sie ändern sich alle. Gua, Symbole sind fantastisch. Machen wir dasselbe für dieses Bild hier. Ich werde auf diesem Bild und dasselbe auswählen und nach dem lila Punkt suchen, wo immer er ist, okay, halte einfach Ausschau danach. Das ist also etwas , das bearbeitet werden kann. Erstellen wir ein neues Feld. Dieser wird vielleicht Imagebild heißen , aber nur Bild. Komm aus meiner Bearbeitung meines Symbols zurück zur Instanz. Und denk dran, dieser erste ist in Ordnung. Der zweite, der sich jetzt unter Einstellungen befindet, hat zwei Überschreibungen für das Bild. Außerdem ist das Thumbnail, das zwei Dinge trifft , die ich dir geben kann, und das ist dieses. Lass uns noch eine Sache tun, die wir vielleicht tun. Ich möchte diesen Button ändern, damit nicht alle an den gleichen Ort gehen denn im Moment, in dem ich einen ändere , werden sie sich alle ändern. Also möchte ich es sagen, das Symbol geht hinein. Sie stellen fest, dass die Rückkehr zum Original die Außerkraftsetzungen irgendwie beseitigt. Jetzt dieser Button hier, das Gleiche. Ich klicke darauf und sage, dass du den Text hinzufügst. Muss es sich ändern? Vielleicht tut es das. Meins liegt nicht daran, dass ich glaube, dass ich nur das Wort Ansicht verwende, aber der Link tut es definitiv. Okay, also ich sage ein neues Feld und ich nenne das, mein Button-Link ist in Ordnung. Klicken Sie auf Erstellen. Und das war's. Jetzt komm wieder raus. Ich muss mich daran gewöhnen, zu mögen, was darin enthalten ist, um Dinge zu ändern, alle, und dann herauskommen und in den normalen alten Designermodus gelockt werden , um die Instanz davon zu ändern. In diesem Fall kann ich darauf klicken, nur die ganze Sache, okay, und ich habe eine Menge Dinge. Ich kann das Bild ändern, das Thumbnail drücken und jetzt den Button-Link. Und was ich sagen werde, es ist Seite und diese geht auf meine Portfolio-Seite, Symbole. Behalte also die Dinge im Auge, die lila sind, behalte das grüne Zeug für andere Leute im Auge, Symbole, die du vielleicht das Projekt eines anderen bekommst und es hat eine Menge Symbole drin. Sie können die Verknüpfung von Symbolen aufheben, die besagen , dass es eine Zeit gibt, in der Sie möchten , z. B. Also wird es in unser Symbol passen. Okay, ich ändere diesen Knopf so, dass er „Zuhause“ sagt. Kunden kamen zurück und sagten: Wir brauchen den Home-Button. Niemand weiß, wie man das anklickt. Oder Sie testen, kamen zurück und sagten: Ja, niemand weiß, wie man nach Hause kommt oder mindestens die Hälfte der Benutzer nicht. Okay, also habe ich diesen Teil. Und das ist cool, denn auf diesen anderen Seiten ist es sinnvoll, den Home-Button zu haben und du gehst zurück nach Hause. All diese anderen Seiten. Wirklich praktisch für die eine Seite. Ich habe es nicht auf dieses geklebt. Ich habe CC-Häuser auf all diesen anderen Seiten wichtig gemacht. Aber der Kunde kommt zurück und sagt, warum gibt es einen Home-Button auf der Homepage? Und du magst, es ist nur, weil es ein Symbol ist und all die Seiten und ich mag, werde es los und sage: Okay, also was wir tun werden, ist , es zu lösen. Also klicken wir mit der rechten Maustaste darauf. Und es gibt eine Option, die besagt, dass Unlink Instance, das Grün ist weg. Es ist jetzt etwas, das ich löschen kann und es wirkt sich auf nichts anderes aus. Ich kann zu diesen anderen Seiten zurückkehren, z. B. zu meinem Kontakt. Es ist immer noch da, es ist immer noch auf jeder anderen Seite. Ich habe diese Instanz. Das einzige Problem ist, dass ich als Designer jetzt daran denken muss , dass ich, wenn ich Änderungen an der Navigation vornehme, es mit dem eigentlichen Symbol tun muss . Und wenn ich Änderungen vornehme, wir an, ich ändere die Farbe davon, ich muss zurückgehen und auch die Homepage aktualisieren , weil sie von allem anderen getrennt ist. Aber es ist ein guter Kompromiss, weil dies auf meinen tausend Seiten erscheint. Es gibt nur eine Homepage, mit der ich leben kann. Das einzig Knifflige bei Symbolen ist, dass wenn ich meinen Text ändern möchte, okay? Du doppelklickst irgendwie darauf. Klicken Sie darauf. Wie ändere ich den Text? Weil wir das gemacht haben. Wie nennen wir sie eine Außerkraftsetzung. Wir können es einfach hier ändern. Wir müssen raus und wir müssen es hier auswählen. Und wir ändern es von nun an hier, was in Ordnung ist, solange Sie wissen, wo es ist. Aber das kann ein bisschen schwierig sein, weil man sich verirrt. Du öffnest vielleicht das Projekt einer anderen Person und doppelklickst auf Dinge und sagst, warum ändert sich das? Was ist los? Nun, weißt du, es sind lila Teile in diesen grünen Teilen. Grüne Bits kontrollieren alles. Lila Bits sind Überschreibungen und du wirst es in den Einstellungen hier tun. Fantastisch. Okay, was haben wir sonst noch? Ist es richtig? Das war das falsche Ende. Ich sagte, ich würde das einfach ignorieren und aufräumen. Das räumt es einfach auf. Du weißt wahrscheinlich, wie ich in meine Bearbeitung gehen werde, mein Symbol, okay, das ist in Ordnung. Ich mache das für sie. Diese, was bringt es in der Mitte zum Laufen? Erinnerst du dich, dass du dich an unser Div Nav erinnerst, das Ding, das alles einschließt, auf Flex eingestellt ist. Und wir haben hier diese Option, die super funktioniert hat, wenn es nur zwei Dinge gibt, okay? Aber jetzt kann ich es nicht wirklich für das machen , was ich will . Wie machen wir das? Ich werde immer noch den ganzen Weg nach links und rechts gedrückt haben . Okay. Denken Sie daran, dass es für zwei Dinge hervorragend funktioniert hat. Wenn ich also diese beiden Dinge in einen Rapper lege, sind es wieder nur zwei Dinge, der Wrapper und dieses Logo hier drüben. Lass uns versuchen, das zu tun. Ein Schlüssel, all die wilden Dochte in meiner Navigation. Alles andere ist ausgegraut. Und das habe ich da reingetan. Ich habe eine Uni und setze dich da rein. Jetzt funktioniert es ganz einfach. Muss ich das benennen? Ich könnte es wahrscheinlich, aber ich werde nicht tun Braucht es einen Kurs? Im Moment nicht. Brauchen wir Platz? Ja, das tun wir. Wie werden wir das machen? Lass mich darüber nachdenken. Ich habe einen kleinen Knopfknopf. Habe ich einen Rand links? tue ich nicht. Habe ich einen Spielraum richtig? Wie haben wir keine davon? Ich mache einen Spielraum, oder? Wo mache ich das? Ich mache es einem div-Tag, auf das keine Klassen angewendet wurden. Sein einziger Job ist die verbleibende Marge. Und ich werde die Vermutung klein machen, hoffentlich wird es richtig sein, denn es werden meine 16. So toll, dieser hier wird der Rand links sein, okay, und es werden 16 sein. Und ich hoffe, dass wir das jetzt loswerden. Ich werde es anwenden können, weil es global ist, weil es es irgendwie von selbst geschafft hat. Rand links klein, Ron, einer , den man heben und klein heben muss. Das wird reichen. Da haben wir's. Jetzt können wir uns im nächsten Video sehen. 63. Wie man ein Kontaktformular in Webflow erstellt: Hallo zusammen. In diesem Video werden wir dieses Formular erstellen. Es hat benannte Felder, E-Mails, es gibt Dropdown-Menüs, diese Häkchen, und ich werde Ihnen zeigen, wie Sie es einreichen und was danach damit passiert. Oder zumindest, los geht's. Es landet in meiner E-Mail. Ordnung, sie sind super einfach herzustellen. Lassen Sie mich Ihnen zeigen , wie man einen zusammenstellt. Ordnung, fügen wir ein Formular hinzu. Also werde ich das los . Das kommt mir bekannt vor. Ich füge einen Container hinzu, in den sie gehen können, und ich füge einen Abschnitt hinzu, in den sie gehen können . Das musst du nicht haben. Sonst springt es einfach auf der linken Seite. Dies wird meine Abteilung sein und dies wird Kontakt sein. Und ich werde oben etwas Spielraum hinzufügen, damit es oben eingeklemmt ist. Und alles, was wir tun, ist zu Add zu gehen und dann zwei Formen nach unten zu gehen. Es gibt einen ganzen Abschnitt hier. Kannst du es sehen? Okay. Und das sind alles einzelne Bestandteile eines Formulars. Dies ist insgesamt ein großer Teil davon, und das ist wahrscheinlich ein guter Ort, um aufzuhören. Ich werfe es in meine Abteilung und fertig. Du bist bereit zu gehen. Lassen Sie uns eine Vorschau darauf geben. Ich kann hier tippen. Sie können sehen, dass es es vorab ausgefüllt hat. Meine verschwommenen Informationen, Name, E-Mail, mehr verschwommene Informationen und ich klicke auf Senden. Jetzt heißt es bitte füllen Sie dieses Feld aus, das erforderlich ist. Lassen Sie mich das ausfüllen. Okay, wir haben also einige Formulare, die noch recht funktionieren. Du musst deine Seite veröffentlichen, damit das funktioniert. kann ich machen. Okay, es ist hier rausgekommen. Ich werde gehen, veröffentlichte Domain veröffentlichen. Jetzt. Wir können den Vorschaumodus anzeigen, aber es wird funktionieren, wenn wir zu den Live-Versionen gehen , einen Blick darauf werfen. Okay, jetzt habe ich auf Senden geklickt und Magic Man-Formulare malten einen Knopf und versuchten, sie in meinem Webdesign-Kurs zu machen. Wenn Sie meine Web-Essentials gemacht haben, ist ein bisschen schwierig, jemand muss damit umgehen, und genau das macht Webflow. Was passiert jetzt? Wo geht es hin? Lass uns einen Blick darauf werfen. Zurück in Webflow gibt es also ein paar Stellen, an denen Sie es finden können. Eine befindet sich unter den Projekteinstellungen für diese spezielle Website. Okay. Es gibt Projekteinstellungen. Das ist also Dans Portfolio. Wir waren schon bei einigen davon. Okay. Es ist dieser hier, der hier viele Informationen enthält. Wichtig hier ist, wo diese E-Mail-Adresse Sinn kommt, in meine verschwommene E-Mail-Adresse. Aber ganz unten auf dieser Seite können Sie sehen, können Sie sehen mein Formular eingereicht wurde, oder hier kann ich es von hier aus lesen. Ich kann irgendwie eine CSV herunterladen oder ist sie da? Das ist es. Der große schwarze Knopf. Aber auch. Lass mich meine E-Mails überprüfen. Ordnung, also bin ich in meiner E-Mail-Adresse und da ist es. Ich habe ein Formular von Jason erhalten. Aus dem Formular geht hervor, dass dies der Name des Formulars von dieser Website ist, falls Sie mehr als eines verwalten. Sie werden auch feststellen, dass es einen Teil meiner kostenlosen Website gibt. Ich kriege nur einen von 50 für diesen Monat. Okay. Und es ist so, als würde Beginn des Monats, am Ende des Monats zurückgesetzt, es zu Beginn des Monats, am Ende des Monats zurückgesetzt, aber wir müssen auf einen anderen Plan upgraden , wenn Sie möchten, dass dieser höher ist. Sehr cool. Wenn Sie nicht wussten, dass das sehr schwierig sein kann, wenn Sie einen eigenen Mailserver oder zumindest einen Weiterleitungsserver einrichten müssen, kann es schwierig sein. Lass uns gehen und ein bisschen mehr machen. Ich gehe zurück zum Designer. Ich könnte zurück zu meinem Armaturenbrett gehen und dann direkt von hier aus einen Look entwerfen. Gehe auf meine Kontaktseite. Fügen wir noch ein paar verschiedene Teile hinzu. Gehen Sie also zum ED, gehen Sie zu den verschiedenen Formularen und alles, was Sie tun müssen, ist sicherzustellen, dass Sie es in diesen Formular-Wrapper ziehen. Siehst du, sie sind irgendwie ********. Ich zeige es dir in einer Sekunde. Okay, das ist also die ganze Sache. Ich brauche keine weitere davon. Ich will ein anderes Feld. Also ziehe ich es da rein. Und diese wird für eine Telefonnummer sein. Also was ich tun möchte, ist ihm auch ein Label zu geben. Es besteht aus zwei Teilen. Da ist diese Feldbeschriftung, dort sehen Sie den Namen und dann ist da noch das eigentliche Textfeld. Also habe ich ein anderes TextField bearbeitet. Lass uns noch einen hinzufügen. Es ist nah dran. Ich gehe zu, also mussten wir für dieses Video nicht weiter nach unten scrollen . Wenigstens. Ich möchte nicht, dass das Etikett direkt darüber steht. Und dieses Etikett wird sagen, Sie werden feststellen, dass dieses einen Platzhaltertext enthält, aber dieser schaltet das auch nicht einfach aus. Du kannst hier reingehen und Platzhalter-E-Mail sagen. Los geht's. Dieser hier benötigt besseren Platzhaltertext, da dort nur Beispieltext steht. Vielleicht möchten Sie auf eine internationale Nummer hinweisen . Okay. Ich weiß nicht, ob das eine Zahl ist. Es könnte eine Handynummer in Irland sein, als hätte sie zu viele Ziffern und Sie kommen auf die Idee. Die andere Sache, an die Sie sich erinnern sollten, wenn Sie diese Dinge hinzufügen, insbesondere diese Felder, ist, dass Sie eine E-Mail erhalten , um sich die E-Mail anzusehen. Kannst du hier sehen, wo steht: Wo ist? Es heißt, dass der Name Jason Bourne entspricht. E-Mail entspricht dem, weil wir das selbst hinzugefügt haben, nicht hinzugefügt wurde, heißt das Feld. Also werde ich eine E-Mail erhalten, die eingeht und besagt, dass das Feld der Telefonnummer entspricht. Also sage ich Telefon. Wenn ich meine E-Mail erhalte, wird es für mich als Empfänger etwas einfacher zu verstehen sein. Der Benutzer der Website wird diese kleine Option hier niemals sehen. Die andere ist, ist es erforderlich? Okay, du kannst das standardmäßig ein- und ausschalten. Diese E-Mail wurde vom Workflow aktiviert. Sie können es ausschalten, wenn es Ihnen nichts ausmacht. Wissen Sie, welches Sie bekommen? Schauen wir uns vielleicht noch ein oder zwei weitere an. Ich gehe zu Ed, gehe zu meinen Formularen, nimmt Bereich ist ziemlich nützlich. Ich ziehe das hier her. Das sind Textblöcke. Es braucht also Feld ist nur eine Zeile. Jetzt braucht es Fläche, die berücksichtigt werden kann, ziehe es nach unten. Es nimmt Fläche ein, kann mehrere Linien enthalten. Also dieser wird, ich werde auch eine Feldbeschriftung hinzufügen. Also, wenn du Boo hier liegst, ist das da, und das wird meine Frage sein. Mehr Informationen. Okay? Ich werde sagen, dass ich anstelle von Zecken etwas sagen werde. Ich will nicht, dass sie das neu aufnimmt. Lassen Sie uns eine Vorschau anzeigen. Jemand hier drin kann anfangen zu tippen und kann Return it an das Ende db dot drücken, wohingegen dieser nur ein einzeiliger Mulberry-Text ist. Ordnung, machen wir noch eins zusammen. Schauen wir uns also das Hinzufügen eines Formulars an. Schauen wir uns die Checkbox an. Ich mache noch zwei. Noch zwei. Die Checkboxen könnten also normalerweise sein dass sie uns die Erlaubnis geben. Wir haben es vielleicht automatisch. Starte geprüft. Es gibt immer den Trick. Du musst k unterbieten. Lass uns hinzufügen, ah, dropdown, wähle hier die Option aus, ziehe sie hinein. Okay, es wird hier hingehen und wir sagen, dass dieser angerufen wird. Denken Sie daran, dass der Name für mich als Schöpfer des Formulars nicht wirklich durchkommen wird. Der Benutzer wird es nicht sehen. Aber das ist meine, vielleicht meine bevorzugte Methode. Und wir haben diese Felder hier. Wenn ich sie alle leer lasse, schauen wir uns eine Vorschau an. Okay, du hast die erste, zweite und dritte Wahl. Schalte die Vorschau aus. Lass uns gehen und es ändern. Vorschau kann nicht deaktiviert werden. Irgendein Grund, los geht's. Und was will ich? Ich werde eine auswählen lassen , die interessant ist, weil sie wie die Standardeinstellung ist. Okay? Es ist der, der dort erscheint. Ich belasse das als Auswahl eins. Und eigentlich nenne ich es etwas anderes, anstatt eines auszuwählen. Ich werde sagen, dass dies die bevorzugte Kontaktmethode sein wird . Was ich vielleicht tun könnte, ist das auch als Etikett zu verwenden. Okay, meine Optionen werden erste Wahl sein. Es wird lustig werden. Der Wert hier, du, muss wahrscheinlich nur Spaß machen. Wir schauen uns die andere Seite an weil es heißt, ich habe mich bevorzugt, wenn das dem Telefon entspricht, dem Wert des Telefons entspricht, was cool ist. Okay, machen wir den letzten. Dieser hier ist, sie können wählen, ob es sich um eine E-Mail handelt. Okay. Und es wird einfach als E-Mail zurückkommen. Sonst noch was? Ich möchte das letzte entfernen, weil ich es nicht brauche, es ist nicht erforderlich. Lassen Sie uns eine Vorschau-Kontaktmethode geben. Los geht's, telefonisch oder per E-Mail. Es braucht wahrscheinlich einen Titel wie die anderen , weil so etwas schwer zu wissen ist. Es sieht so aus, als würden wir etwas mit der E-Mail dort machen. Stecken Sie das Etikett ein. Denken Sie daran, dass diese Etiketten nichts bewirken. Sie mögen keine Textblöcke , die Menschen lesen können. Also gehst du, es ist ein schrecklicher Titel. So groß, aber lasst uns alles testen. Ich muss die ausgewählte Domain veröffentlichen. Ich könnte es wieder öffnen, aber hier ist es schon geöffnet. Was wir also tun müssen, ist, dass wir diese Seite zurücksetzen müssen , um alle zusätzlichen Informationen zu erhalten. Ich fülle es aus. Okay. Normalerweise weiß ich nicht, dass Jason Bourne Ihren Newsletter nicht möchte und ich möchte per E-Mail kontaktiert werden. Senden, bitte füllen Sie dieses Feld aus. Ich habe das erforderlich gemacht. Ordnung, jetzt machen wir es. Okay, mal sehen, was auf der E-Mail-Seite passiert. Ordnung, wir haben also alle unsere Felder. Name ist gleich Jason, E-Mail, Telefonnummer, Feld, siehe, ich habe vergessen, es zu benennen. Hier müssen Sie hingehen und das überprüfen. Okay. Das sollte also sein, was sagen wir? Mehr Informationen? Checkbox ist falsch. Ein weiterer Bettenname, ich tue so, als würde ich das tun. Ich tue so, als würde ich das absichtlich tun, bevorzugte Methode per E-Mail. Das ist eine bittere Seite. Wir haben also zwei, wir haben diese beiden. Schauen wir zurück. Schauen wir uns das mal an. Die Checkbox ist Was war es? Checkbox falsch. Es gibt also zwei Dinge. Keine Checkbox, es wird Newsletter, Newsletter, Anmeldung sein. Denken Sie daran, dass der Benutzer dies nicht sieht. Genau das kommt in Ihrer E-Mail zum Ausdruck. Und ich glaube nicht, dass du falsch ändern kannst. Es wird entweder wahr oder falsch sagen. Ziemlich sicher, dass wir das ändern können. Du kannst vielleicht irgendwo hingehen, wo ich nicht habe, aber es wird besser. Es heißt Newsletter-Anmeldung, wahr oder falsch. Okay. Das ist immer noch nicht ja oder nein, aber es macht Sinn. Dieser hier, kannst du sehen, dieser hier sagt nur, wo ist die bevorzugte Methode? Beachten Sie, dass dieser hier das Problem hat , wir es einfach ein Feld nennen. Ich werde mehr Informationen geben. Da haben wir's. Und das wird diese beiden Probleme klären. Ordnung, das heißt, das Hinzufügen eines Formulars sieht ein bisschen langweilig aus. Also gehen wir das nächste Video durch und stylen es. Aber solange Sie diese Elemente weiterhin innerhalb des Formular-Blocks hinzufügen , werden sie an Webflow weitergegeben. Wer? Webflow sendet es per E-Mail weiter, oder Sie können über die Projekteinstellungen und unter Formularen darauf zugreifen. Aber wenn es einen schönen und einfachen Workflow macht, Ordnung, auf das nächste Video. 64. Wie man eine Form in Webflow stylt: Hallo! In diesem Video werden wir uns ansehen, wie diesen langweiligen Schaum nehmen. Dieser Webflow gibt uns zwei, was es zu einer etwas weniger langweiligen Form macht. Wir werden diese Felder stylen. Schau, es gibt einen schwarzen Liner auf der Außenseite, keine schwarze Linie, schick. Es ist in diese verschiedenen Spalten aufgeteilt. Einige von ihnen breiten sich über sie aus, andere nicht. Extra schick. Oh, sieh dir unseren schicken Knopf an. Wir haben die Etiketten losgeworden. Wir haben etwas Platzhaltertext in der Mitte. Ich zeige Ihnen, wie Sie dieses Raster hier so gestalten können, dass es auf verschiedenen Geräten unterschiedlich aufgeschlüsselt wird , sodass es auf verschiedenen Gerätegrößen gut gestapelt werden kann. Und ich zeige Ihnen, wie Sie diese Nachricht finden , die angezeigt wird, wenn jemand Ihnen eine E-Mail gesendet hat, die Erfolgsbenachrichtigung, und einen Stil , der sie rosa macht. In Ordnung, lasst uns einsteigen. Lass uns die Form stylen. Okay, das Erste ist, dass ich, sagen wir, ich möchte all diese Felder stylen, jedes von ihnen. Sie müssen also dieselbe Klasse auf sie anwenden. In dem Moment, in dem keine Klasse auf sie angewendet wird. Also könnte ich einen Kurs geben. Ich könnte sagen, das ist mein Feldtitel und Stil. Ein Trick bei Webflow ist, dass wir versehentlich gelernt haben, dass, wenn ich vergesse, ihm einen Klassennamen zu geben, es ihm einfach einen eigenen Klassennamen gibt. Oft benutzt es alles, was hier drin ist. Und eigentlich ist das ziemlich praktisch. Wenn ich ihm also keinen Klassennamen gebe, braucht es einen. Wenn ich es tatsächlich sage, muss es das Schriftgewicht von normal haben. Kannst du sehen, dass alles automatisch einen Klassennamen, eine Feldbeschriftung des Gerichts macht. Und eigentlich ist das für mich ein guter Weg zurück zu Beginn des Kurses. Das war nicht praktisch, weil wir nicht wirklich wussten, was wir in diesen Kursen machen werden, aber jetzt nutzen wir es nach meiner Macht. Jetzt kann ich Feldbeschriftung machen. Hervorragend angewendet auf alle von ihnen wird eine Verknüpfung Command oder Control Return verwendet . Ich war Field Down Arrow. Los geht's. Denken Sie daran, dass Geschwister links und rechts benutzen können , obwohl sie auf und ab sind und oben an die Eltern geht. Wenn ich hier bin, kann ich einfach meinen Rechtspfeil benutzen und so nach unten in U gehen. Ich mache solche Sachen gerne. Wie keine Hand an der Maus. Schau Amigo. Okay, cool. Also werde ich es auf alle anwenden. Und was ich eigentlich tun werde, ist zu sagen, ich möchte nicht, dass einer von euch Tische fühlt , die nichts anderes für das Formular tun , als zu beschreiben, was sich darunter befindet. Aber das kann ich in diesem Platzhaltertext sehr gut machen. Also Name, vielleicht geh, wenn du stylen willst, was darin enthalten ist, du kannst dasselbe wieder sehen. Ich möchte, dass dieses Ding namens Textfeld, das anders ist als zuvor, Feldname ist. Auch hier werde ich ihm keinen Namen geben , weil es einfach geht, ich werde es für den Klassennamen verwenden , was perfekt ist. Und nehmen wir an, ich möchte dass das Zeug, das der Benutzer eingibt , diese pinkfarbene Farbe hat. Schau es dir an. Okay, und wenn ich jetzt anfange zu tippen, los geht's, es ist Hot Bank. Können Sie die eigentlichen Felder selbst so gestalten, wie Sie es möchten? Weil mein Portfolio hier außen dunkle Linien hat. Wenn ich auf dieses Textfeld klicke, habe ich bereits eine Klasse dafür beworben, was cool ist. Okay, und ich werde einfach im Kommando untergehen. Ich gehe zur Wahltaste auf den Chevron Alt klicken Sie auf einen PC-Rand. In dem Moment, in dem es einen Stil gibt, sind sie nur vor uns verborgen. Aber wir können sagen, ich möchte noch einen weiteren Stil hinzufügen. Und ich will, dass es so ist, ich werde dir nur zeigen, dass es groß und dick werden kann. Es ist nicht das, was ich will. Aber Sie könnten entscheiden, dass Sie dies tun möchten. Abgerundete Ecken. Abgerundete Ecken. Warum tut es ihnen nicht allen an? Lass mich etwas weniger hässliches aussehen lassen. Ich benutze mein Grau. Oh, ja. Nicht viel anders. Warum sind sie alle blind. Das liegt daran, dass, obwohl diese Ticks-Felder genannt werden, es nicht das Klassen-Takes-Feld, das angewandte Feld gibt. Wie heißt es? Feldbeschriftung, Notizfeld. Sie schreiben also Feld Abwärtspfeil, Befehl oder Steuerung in ein Textfeld. Okay, machen wir den letzten. Okay, und es ist, es ist über mein Hot Pink gegossen , was ich eigentlich nicht wollte. Entschuldigung, ich helfe. Du wirst es klären. Ordnung, wie halten wir uns ab, Knopf, Knopf. Fangen Sie an wie jeder andere. Ich habe bereits einen Member-Button, den wir zuvor erstellt haben. Da haben wir's. Und weil wir vorhin super cool sind, denken Sie daran, dass wir Knöpfe groß gemacht haben oder Knöpfe klein entfernen. Schau dir S an, Webdesign, Bauen von Sachen früh in dem Kurs, in dem es uns ewig dauert. Aber später, Website-Building-Ninjas mit all unseren coolen Klassen oder zumindest diesen Combo-Klassen. Und sie werden globale Klassen sein, denn denken Sie daran, wir wollen sekundäre Farben machen. So gut, trug den Knopf. Das ist okay. Was passiert, wenn Sie es einreichen? Wir haben es schon mal gesehen. Als du es tatsächlich einreichst, gab es wie : Hey, danke, dass du es eingereicht hast, wenn du dazu kommst. Sie müssen also auf eines dieser beiden klicken, entweder auf den Formular-Block oder auf das Formular , das sich darin befindet. Es ist nicht wirklich wichtig. Okay. Und zu Ihren Einstellungen gehen ist hier eine Option , die den Status dieses Formulars anzeigt, normal. Also entwerfen wir das alles. Erfolg ist das, was erscheint, wenn es jemand getan hat und Sie jetzt einfach einen Stift verwenden, Sie könnten entscheiden, dass ich meine sekundäre Farbe verwenden werde . Nein, ich mache das so oft. Das ist der Ausweis. Wir verwenden nicht so viel, außer wenn wir vor langer Zeit im Kurs sind, diese IDs, die wir für die Navigation verwendet haben, wo wir zu Abschnitten von Schaltflächen gesprungen sind. Und füge unsere Farbklasse hinzu. Und wir werden den Hintergrund der Primarvereinigung verwenden. Dieser hier wird der Tick-Stil sein. Ich habe keins. Ich kann mir eine vorstellen, die wir gemacht haben , die sekundäre Farbe hat und immer gut sein wird. Los geht's. Sie können dies also wieder am Formular in Einstellungen lösen und Sie können die Ära auch erledigen. Okay, habe das aber unten installiert. Lassen Sie uns alles in ein Raster setzen , denn im Moment will ich das, das ist mein Figma-Modell, bei dem ich sie nebeneinander habe. Wie machen wir das? Wir werden ein Grid verwenden, weil Grids gut sind, sie einfach zu bedienen sind und es ziemlich reglementierte K gibt. Also gehe ich ins Grid. Ich werde sowieso sicherstellen, dass es irgendwo in mein Formular kommt . Okay. Solange es sich innerhalb des Form- und Formularblocks befindet, wird es funktionieren, denn im Grunde klebt der formelle Griff, alles, was sich in diesem Schaum befindet, alles hinein . Es wird versuchen, es als Formularoption zu senden. Also stecke ich mein Gitter hier rein. Und das im Moment habe ich was, zwei mal zwei, was in Ordnung ist. Also nehme ich mir den Namen eins. Okay. Kannst du dir die E-Mail holen? Ich hole mir meine Telefonnummer eins. Und das wird hier für meinen fünften funktionieren. Es wird sich über beide erstrecken und das lässt das über beide hinweg. Es ist einfach nicht in der Startaufstellung. Es wird immer noch funktionieren. Die Gitter kommen nur hier runter , dem Formular ist das egal. Aber nehmen wir an, Sie tun es hier. Also lass uns das da reinlegen. Und dieser ist auch hinter diesem Typen her. Und er landet hier und du sagst: Oh, kann ich sie dazu bringen, sich innerhalb dieses Gitters zu erstrecken? Dies ist eine gute Art Bonus-Cred-Erklärung hier als Teil von Formularen, es gibt einen geheimen Trick mit den Gittern. Wenn Sie auf das Ding innerhalb des Rasters klicken, egal was es ist, Sie können es tatsächlich ziehen, um es in das Raster auszugeben. Es wird uns ein bisschen Kummer bereiten, wenn wir zum Handy kommen, aber wir können es reparieren. Als Nächstes ist das ein Wir, es ist ein guter Punkt. Wenn ich auf mein Handy gekommen bin, weil ich entwerfe, etwas schief gelaufen und ich gehe zu den Einstellungen und entwerfe meinen normalen Urin, der diesen Topf installiert habe . Zum Glück geht nicht alles auf das gleiche Layout zurück. Ordnung? Es gibt also einen Newsletter hier. Dies ist eine Bezeichnung, aber im Gegensatz zu den Feldbeschriftungen muss dieses Ding mitkommen. Kannst du das Feld sehen, dieses Checkbox-Feld, es ist eine Einheit. Wenn Sie einen Teil davon löschen, flippt die Art der Verflechtung aus. Und ich könnte es einfach so lassen. Daran ist nichts falsch. Aber wenn du es auch innerhalb des Gitters haben willst , bin ich mir nicht sicher, warum ich es dem Netz gebe. Muss nicht. Okay. Jetzt ist es Teil des Grids. Los geht's. Bring es ins Netz. Da haben wir's. Und ich lasse einfach den Knopf draußen. Sonst muss ich sie reinbringen und sie irgendwie reinbringen. Und dann muss ich diesen Kerl holen und sie dazu bringen, sich auszubreiten und sie nach unten zu drücken. Und dann verbreitet sich dieser Typ zu weit. Dann kann ich einige Optionen innerhalb dieser Rasteroption auswählen. Kehren Sie zu meinen Rastereinstellungen zurück, in denen ein Kind aufgehört hat, dehnbare Sachen zu machen, und gehen Sie zur Seite. Was ist, wenn wir wollen, dass dieser auf seine eigene Zelle herunterfährt? Diese beiden machten Sinn, das machte auf seiner eigenen Linie Sinn, aber dieser hat hier irgendwie gewogen. Also was ich tun kann, ist einfach einen Platzhalter zu werfen. Also schnappe ich mir ein div-Tag. Also werde ich das alles noch einmal runterdrehen. Die Topographie wird dazu führen, dass die Naht geschlossen ist, weil wir das nicht machen. Halten Sie die Formulare offen. Ordnung. Also steckst du es einfach in ein div-Tag. Wo ist es da? Er macht nichts anderes, als es offen zu halten und er ist jetzt irgendwie high und du sagst, oh, die Schicht funktioniert nicht. Erinnerst du dich, was er macht, wenn wir eine Vorschau Okay, er geht einfach, er bricht zusammen. Er hat sich gerade geöffnet, damit wir in Webflow darauf klicken können. Also dieser hier, dieser braucht keinen Platzhalter weil dieser Typ zwei seiner Formularzellen durchgehen möchte , damit du nicht dorthin passen kannst. Also brechen wir einfach zum nächsten auf. Okay, wir arbeiten, wir machen Sachen. Was ich für meinen Bereichskontakt tun könnte, ich könnte diesen Bereichskontakt stylen und tatsächlich den Abstand angeben , den ich auf beiden Seiten einfügen werde. Halten Sie die Wahltaste oder die Alt-Taste gedrückt. Los geht's. Nett. Meine Grid-Optionen. Ich möchte ein bisschen größer sein. Ordnung, abgesehen von dem seltsamen Abstandsproblem, das auftauchte. Ordnung, schauen wir uns die mobile Ansicht an und wir machen im Grunde nur wieder Grids. jetzt nichts mit Formularen zu tun. Aber wir könnten es genauso gut machen, weil es okay aussieht, bei diesem nicht funktioniert, aber zu klein. Also arbeiten wir an unserem Stromnetz. Also klicken Sie auf das Raster, gehen Sie hier rein. Und ich zeige dir das, weil dieser Typ lustige Sachen macht, weil er zwei meiner Kolumnen umfasst. Also wenn ich zu meinem Layout für mein Raster sage, und ich sage eigentlich nur eine Spalte. Warum bist du nicht eine Kolumne? Es versucht es irgendwie, aber bei diesem Kerl kämpft er. Was Sie also tun, ist , auf Fertig zu klicken, herauszukommen und loszulegen, Sie machen eigentlich nur einen an diesem speziellen Breakpoint. Okay. Jetzt kann ich zurück in mein Raster gehen. Gitter. Warum funktioniert das nicht? Ich hab einen. Ihr seid alle da. Füge noch einen hinzu. Geht weiter. Was erstreckt sich über? Ich weiß es nicht. Du wartest dort. Jemand anderes gibt Geld aus. Ich habe es herausgefunden. Komm schon, Gehirn. Es war gemein für diese Typen, aber das habe ich auch vorhin gemacht. Ich habe den Newsletter auf einige von ihnen ausgedehnt. Sie sind sehr erfolgreich. Ordnung. Und dieses Ding hier, das war ein guter Platzhalter, R6, es hier unten auf einem Hügel klatscht, richtig. Lass uns einen Blick darauf werfen. Also ist er auf dem Handy fertig. Sehen wir uns eine Vorschau an. Er bricht zusammen, aber er geht ein bisschen da. Wie werden wir das los? Wir können das sagen, Toby ist ihr Tablet, er ist da, weil er ein guter Platzhalter ist. Wenn wir zum Telefon im horizontalen Querformat kommen, okay, ich kann sagen, zeig diesen Kerl an, None. Oh, wir haben Design. Jetzt lass uns eine Vorschau haben. Schön, hoffentlich jetzt einige dieser Dinge, die wir zuvor gemacht haben und von denen wir wissen, dass es lange her ist, Anzeigeeigenschaften und alle möglichen Inline-Blöcke zu machen . Sobald Sie jetzt zu diesen Dingen kommen, die ziemlich einfach zu verstehen sind, aber schwieriger anzupassen sind, wenn Sie nicht über einige dieser grundlegenden Fähigkeiten verfügen , fühle ich mich erfolgreich. Ich hoffe du tust es auch. Ordnung, das Letzte, was ich tun will, ist meine Schlagkraft hinzuzufügen. Du kannst jetzt weitermachen, ich werde den Schlag einfach reinwerfen. Du kannst rumhängen, wenn du willst, und ich lege es auf meinen Desktop. Fangen Sie immer am Desktop an. Und ich werde mir das schnappen, was es war, das alles nicht getan hat. Ich glaube. Werde ich schummeln und es mir einfach von der Homepage holen? Wahrscheinlich. Oh, es hat eine Menge Styling drauf, nicht wahr? Mache ich es trotzdem? Lass uns versuchen, uns zu verbinden. Bringen Sie es an die richtige Stelle , um den Abschnitt zu platzieren , in den ich gehen wollte, und klicken Sie auf Einfügen. Dann geht es auf die falsche Seite, hol es oben. Und ich möchte dieses Styling nicht verwenden, also sage ich, werde diesen Kurs los. Und was wollten wir sagen? Stell Dan eine Frage. Frag. Dann Dan. Ich möchte dieses Span-Tag, weil es nicht schwer anzuwenden ist, aber es wird es darin einfügen. Mach es einfach auf dem langen Weg. Okay. Also Dan, Frage, und wie geben wir es aus? Du erinnerst dich, da ist es. Und warum haben wir gesagt Wir sagten Text, Sekundärfarbe. Wir gehen zur Standardfrage, dass wir dieses kleine q wollen. Und wir wollen einen Randboden, den wir nicht haben. Ich glaube nicht, dass die Marge in B liegt, aber stell dir unten vor. Also was ich tun werde, ist es auf einen Div-Block zu werfen. Und ich sage: Du bist NB. Ich schätze, ich brauche wahrscheinlich mein Medium, weil mein Medium , das ich kenne, diese sind, vielleicht ist es 81624. Also extra klein, klein, mittel. Das ergibt Sinn. Das wird also der untere Rand der Medienmarge sein. Das werden meine 24. Mal sehen, ob das funktioniert. Darauf ist nichts zutreffend. Ich könnte hier eine Gutschrift für meine globale Klasse erstellen lassen, weil keine anderen Klassen darauf angewendet wurden, aber wir haben es jetzt geschafft. Mittlerer Boden Ja. Ordnung. Das ist mein Styling meiner Form. Sonst noch was? Nein, das ist alles. Wir sehen uns im nächsten Video. 65. Bildtypen in Webflow SVG vs PNG vs JPG: Hallo, mein Freund. Wir werden diskutieren, wann JPEGs ein guter Weg in PNG sind, irgendwie gut. Und wir werden uns ansehen, wann SVGs in Webflow fantastisch sind. Wenn Sie die Unterschiede bereits kennen, sollten Sie es sich ansehen. Wir behandeln einige coole Dinge beim Exportieren aus Dingen wie Photoshop und Adobe Illustrator. Und wir sprechen darüber, in welcher Größe sie kommen sollten. Aber wenn Sie das alles wissen, können Sie es überspringen. Ich werde nicht wütend sein, aber für den Rest von uns, lass uns einsteigen. Ordnung, fangen wir mit Jpeg an. Ich bin in Photoshop. Du brauchst Photoshop nicht. Ich zeige es dir einfach. JPEGs sind also perfekt für so etwas , wo es viele Details und keine Transparenz gibt. Sie können sehr klein werden und richtig gut aussehen. Sie können eine sehr kleine Dateigröße erreichen und sehen wirklich gut aus. Wann werden wir PNGs verwenden? Wenn Sie in Ihren Portfolio-Übungsdateien mitspielen möchten. Es gibt eine namens SVG, PNG JPEG. Ich habe ein paar Beispiele hier. Also werde ich das in Photoshop öffnen. Und so an sich sollte es immer noch ein JPEG-BOD sein. Wenn ich Magie sage, benenne um, entferne den Hintergrund. Antwort: Wenn Sie das noch nicht getan haben, aktualisieren Sie normalerweise Ihre Photoshop-Kenntnisse. Besuchen Sie mich für meinen Photoshop-Essentials - und Fortgeschrittenenkurs, Cross-Selling-Barden, egal, es hat einen transparenten Hintergrund. Jetzt werde ich das kürzen. Okay, kehre zurück. Und jetzt exportiere ich es. Es muss ein PNG sein , weil ich es sehen muss. Ich brauche die durchsichtige Neuheit davon. Und ein J-Peg lässt Sie das nicht tun, wenn Sie aus etwas wie Photoshop exportieren , verwenden Sie dieses. Das ist das beste. Datei exportieren Exportieren als benutze Save for Web nicht mehr, okay? Weil dies einen besseren Export hat als die großen. Also JP: Kannst du sehen, dass keine Transparenz sehr gering ist. Nun, meine Bilder sind riesig. Dewpoint drei, wahrscheinlich noch nicht gut für das Web, aber es geht zu PNG. Okay, und achten Sie auf die Transparenz. Du bekommst Transparenz. Der Nachteil sind massive Dateigrößen. Also JPEGs, wenn Sie damit durchkommen können, PNGs sind großartig, wenn Sie Transparenz benötigen. Und wenn Sie aus etwas wie Photoshop kommen und Dinge exportieren, können Sie an dieser Stelle hier entscheiden, dass dies viel zu groß ist. mache ich, wir brauchen es bei 4.000. Du könntest entscheiden, dass ich es nur brauche, vielleicht 1.200, und eine vernünftigere Dateigröße bekommen , auch wenn das ziemlich groß ist. Die Grenze für das Einspielen in Webflow, um diese 4 mb im Moment zu sehen, das könnte Ihre Meinung ändern wenn Sie riesige Bilder haben, müssen Sie einige Bearbeitungen vornehmen, bevor Sie sie in Webflow. Wieder gleiche Größe, 1.200, aber als JPEG geht k von einem Punkt nach okay, 2,3 kb runter, naja, 0,3 mb. Okay, also ein Bruchteil der Größe, es wird toll aussehen, aber keine Transparenz. Also JPEG für detaillierte Bilder , die keine Transparenz benötigen, PNGs für Dinge, die sie tun. Auch wenn Sie aus etwas wie Photoshop exportieren . Wir brauchen also keine Transparenz. Wir speichern es nur auf eine kleine Größe und stellen sicher, dass es mindestens doppelt so groß ist wie Sie es benötigen. Die meisten Geräte wie Browser und Telefone benötigen die doppelte Auflösung. Sie nennen es High DPI oder ich denke, Apple nennt es Retina K. Wenn ich also weiß, dass ich es ungefähr 800 Pixel breit haben muss, sollte ich es wirklich als 1.600 exportieren. Es braucht all diese zusätzliche Auflösung, um auf diesen besonders schicken Displays gut auszusehen . Sie können es hier in Photoshop ausgefallen machen. Also kann ich es bei 200 belassen und sagen, oder 800 und sagen, ich hätte gerne eine Größe, die beides ist. Vielleicht, vielleicht brauche ich nicht einmal , dass du mehr als einen hinzufügen kannst, oder? Man kann sagen, ich möchte, dass es eine Einheitsgröße hat, vielleicht möchte ich, dass eine auch doppelt so groß ist. Sie können beide exportieren, aber wir benötigen keine Einheitsgröße. Und wenn ich es jetzt exportiere, es tatsächlich 1.600. Ordnung, JPEGs, PNGs, PNGs werden trübe, wenn wir uns mit Dingen wie Logos befassen. Gehen wir also zu Illustrator. Das ist Adobe Illustrator. Wenn Sie es noch nicht benutzt haben oder noch ein bisschen weiter gehen möchten. Ich kenne einen Mann, der einen Kurs über Grundlagen und Fortgeschrittene hat , nur zu sagen, aber egal, es ist eine wirklich gute Möglichkeit, Ihnen den PNG- und SVG-Vergleich zu zeigen . Denn was wir von Webflow gelernt haben , ist, dass es keine Dinge macht, man kann kein Logo in Webflow entwerfen, man könnte ein Div-Tags ausprobieren, es wird schwierig sein. Sie müssen also in etwas wie Illustrator oder InDesign oder Photoshop oder Figma oder XD etwas tun. Okay. Und wenn Sie das tun, müssen Sie eine Dateigröße auswählen. Und wenn Sie das tun, müssen Sie einen Dateityp auswählen. Illustrator hat also eine coole Sache unter Fenster, Asset Export. Stelle sicher, dass es gruppiert ist. Du kannst es hier reinwerfen, ihm einen Namen geben. Wenn Sie versucht haben, etwas aus Illustrator zu exportieren und versuchen, die Leinwand auf die gleiche Größe zu bringen. Dieses Ding ist ein Lebensretter. Es wird mein Logo für die Abschlussarbeit sein. Und ganz unten, wie bei Photoshop, können wir sagen, möchte ich, dass es ein JPEG ist? Schauen wir uns J Peg an. Okay. Werfen wir einen Blick auf P & G. Denken Sie daran, dass Dan sagte, es muss doppelt so groß sein wie ich es brauche wegen dieser hohen DPI und dieser Retina-Bildschirme sehen sie darauf gut aus. Und schauen wir uns den letzten an, SVG. Okay. Und hast du bemerkt, dass das alles verschwunden ist? Warum kann ich zweimal kochen? Gute alte skalierbare Vektorgrafik. Das ist SVG, das heißt, es kann auf jede Größe skaliert werden. Also, wenn du so etwas hast, Victor, einfache Formen brauchen Transparenz, geh einfach SVG, PNG wird funktionieren, aber SVG kann so groß oder so klein sein, wie du willst. Also habe ich alle drei. Gehen wir Exportieren. Ich werde sie in diesen Ordner in unserem Portfolio legen. Sie können also auch einen Blick darauf werfen. Lass uns einen Blick darauf werfen. Also hat es diese beiden Ordner gemacht, die zwei Wochen, okay? Und es wird interessant werden. Das JPEG ist ziemlich groß und hat keine Transparenz. Dieses PNG ist viel kleiner, was cool ist, und es hat einen transparenten Hintergrund, was bedeutet, dass ich es übertreiben kann. Ich zeige es dir in einer Sekunde. Sie müssen mir eine Transparenz anvertrauen, aber die Dateigröße ist kleiner, was großartig ist. Aber was ist mit SVG? Vergleichen wir diese mit dem SVG, das noch kleiner ist, und bringen wir es in Webflow. Okay, ich bringe die beiden rein. Ich werde hier meine Background-Buddy-Seite erstellen. Ich werde alle Temp haben. Immer wenn ich Delete Me auch mache. Ich mache diese kleinen Delete Me-Kurse, weil ich später weiß , dass ich sie einfach für ein Tutorial verwendet habe, vielleicht jemanden zerstören, vielleicht nur um etwas zu probieren. Ich sage, dass der Hintergrund eine Farbe sein wird. Ich werfe diese beiden Bilder rein. Also habe ich diese beiden. Schauen wir uns P&G an. Es läuft gut. Es ist allerdings etwas verschwommen. Keine Sorge, ich werde es kopieren und einfügen, wenn ich es halb so groß mache, kannst du sehen, dass es zu dieser schönen Knusprigkeit wird. Es wird schwierig sein, ein anderes Video zu sehen. Kannst du es sehen? Okay. Abhängig von der Qualität des Videos, das Sie erhalten. Es kommt also in dieser großen Größe rein, Sie verkleinern es um mindestens die Hälfte , sodass es auf diesem Monitor, auf dem ich aufnehme, für k High DPI-Monitore kristallklar diesem Monitor, auf dem ich aufnehme, wird. Die meisten Dinge sind heutzutage, also muss es gut aussehen. Also PNGs, was ist mit SVG? Okay, also lass uns gehen und das mitbringen. Und das ist meine SVG-Version. Schau, sieh es dir an. Es ist glasklar. Schau, wie groß es ist und die Dateigröße mit kleineren Heaps, kleiner die Dateigröße. Schau, wie groß es wird, denn es ist ein Vektor und sie können so groß werden, wie du möchtest, groß wie ein Berg und es wird immer noch schöne, scharfe Kanten haben. JPEGs für Bilder, die keine Transparenz benötigen, sind oft kleiner und wirklich guter Qualität wie Alfred zurück. Nun dieser Typ, dieser Typ, wenn du ein detailliertes Bild brauchst, das Transparenz braucht, PNG ist der richtige Weg, weil ein SVG das nicht kann. Es kann nicht all diese kleinen Pixel ausarbeiten. Es braucht eine sehr einfache Geometrie. ganze Zeug. Es braucht eine Art von Linien und Ankern, und genau das ist es, was es wirklich glänzt. Wenn Sie sich also in dieser Situation befinden, sagt Node PNG Ja zu SVG, weil es ein Autoaufkleber sein sollte. Und nur schnell auch in Figma und in XD, wenn Sie so etwas wie diesen Typen exportieren, denken Sie daran, hier unten, wo wir diese exportieren, stellen Sie sicher, dass es a bis x k ist , weil Sie diese doppelte Größe wollen , in Ordnung, das ist ein Blick auf die verschiedenen Dateiformate und die Größe, die Sie benötigen, um sie für Webflow einzubringen , damit sie schön und scharf aussehen. Ordnung, weiter zum nächsten Video. 66. Was sind Hi-DPI und reaktionsfähige Bilder in Webflow: Hallo zusammen. Lassen Sie uns darüber sprechen , was diese Sache mit hohem DPI ist. Was bedeutet das, was macht dieses reaktionsschnelle Bild aus? Was macht das? Warum hat Dan hier drei verschiedene Größen? Ich freue mich sehr über dieses Thema denn wenn Sie irgendein anderes Webdesign gemacht haben, das eine wirklich knifflige Sache, reaktionsschnelle Bilder, aber Webflow erledigt alles für uns. So gut. Lass mich dir die Güte zeigen. Ordnung, fangen wir mit einer Sache mit hohem DPI-Wert an. Okay, also werde ich dieses PNG reinziehen , das ich zuvor hatte. Denken Sie daran, dass wir es mitgebracht haben und herausgefunden haben, dass wir darüber gesprochen haben, es halb so groß zu machen, wenn ich es kopiere, einfüge und erstelle. Die Größe wird toll aussehen. Etwas verschwommen. Die halbe Größe sieht gut aus. Okay? Was Sie tun können, ist, den Ziehtopf zu überspringen und zu sagen, machen Sie einen hohen DPI, sie sind nur Schnitte in der Größe und die Hälfte war früher 701. Jetzt ist es 351. Nah genug. Okay. Schau dir das an. Wenn ich es ziehe, geht es los. Du kannst es größer ziehen. Es ist kein hoher DPI-Wert, aber sieh dir das an. Es schaltet sich einfach automatisch ein , wenn ich die richtige Größe erreicht Kannst du hohe DPI sehen? Man geht einfach zu einem visuellen Indikator dafür , dass es halb so groß ist, wie es sein muss. Auf diesen Retina-Bildschirmen sieht es irgendwie toll aus. Und es gibt Monitore mit hoher DPI. Ordnung, das ist also dieser Teil. Schauen wir uns die responsiven Bilder an. Wenn Sie aus einem Webdesign-Land oder Entwicklungsland oder Ihrem Softwareentwickler kommen, denken Sie vielleicht, was macht das mit Bildern? Okay? Ist es nur, wenn ich ein riesiges Bild einbringe, verkleinert es es so , dass ich es tun muss. Das Coole an Webflow ist, dass es alles für dich erledigt. Also was ich tun werde ist, dass ich dich reinbringen werde. müssen Sie nicht, aber wenn Sie alleine unter diesem Portfolio spielen möchten , wird SVG als responsives Beispiel bezeichnet. Bring es rein. Und was ich tun werde ist, es in ein Div zu legen, muss in einen Container gehen, kann es nicht einfach herumliegen lassen , sonst funktioniert es nicht. Okay, und ich werde darauf eingehen und sagen: Du kommst rein, du bist riesig. Was ist, wenn Sie einen hohen DPI-Wert haben, es immer noch riesig Sogar halb so groß füllt es den Bildschirm aus. Okay, vergessen wir die hohe DPI, aber ich habe diese wirklich, sehr große Version. Okay, ich lasse ihn dort. Ich kopiere sie und füge sie ein. Ich habe also zwei davon. Es ist schwer zu erkennen, aber ich habe zwei Versionen. Dieser Top hier. Ich sollte sogar den darunter machen. Klicken Sie darauf und versuchen Sie, das Zahnrad zu finden. Ich werde es sehr klein machen. Ich sage, du hast 100 Pixel. Es gibt eine gemeinsame Version. Ich habe diese kleine Version, Copy and Paste. Ich muss es ziehen, um zur größeren Version zu gelangen. Kopiere es und füge es erneut ein. Große Abneigung. Werde wieder platziert, größere Vision. Okay, also all diese verschiedenen Größen, das Coole an Webflow ist, dass ich denke, dass es während der Veröffentlichung ist, weil Sie keine Vorschau anzeigen und das zum Laufen bringen können. Du musst die Seite tatsächlich veröffentlichen. Mal sehen, ob es funktioniert. Okay, in amu it habe ich diese große Version. Also lasst uns diesen retten. Ich klicke einfach mit der rechten Maustaste in meinem Browser. Ich werde es hier speichern. Ich rette sie auf. Sie können sich also diese riesige Version ansehen , die 3 MB groß war. Es gibt diese Version, außer, ich speichere sie auch. Speichern unter Rechtsklick, ebenfalls speichern. Ich habe mir zufällig Webflow angeschaut. Es hieß die große Riesenversion. Oder können wir es sehen? Da haben wir's. Es sind immer noch 3 mb. es nicht angefasst, mach mit uns nichts weil wir ihm keine Größe würde nur sagen, geh da rein. Es ist also die große Größe, aber dann die kleinere Version. Okay. Nun, wo ist es? Ja. Dieser sagt, ich bin der Verkleinerte. Okay, es gibt eine 1.600-Pixel-Version, es gibt eine 1081, es gibt eine 500-Pixel-Version. Und tatsächlich sind diese beiden untersten, ich denke, 500 sind die kleinsten, sie werden es schaffen. Also hat es eigentlich nur zwei davon bekommen. Das sind diese beiden. Okay, es ist also ziemlich clever. Sie müssen nichts tun, laden Sie einfach Ihre große Version hoch, solange sie kleiner als 4 mb ist. Und Webflow wird es nicht nur um Dosen physischer Größe verkleinern, sondern auch eine gewisse Bildkomprimierung verwenden , um es zu verkleinern. Und es ist ziemlich gut, ziemlich clever. Und als ob Sie versuchen könnten, diese wieder zu verkleinern , bevor Sie sie in Webflow bringen , führen Sie einige Experimente durch. Ich finde, dass die Komprimierung , die sie verwenden, gut aussieht. Die Dateigröße ist sehr klein und überlässt sie dem Workflow. Wenn du darüber nachdenkst, was zum Teufel war das alles? Die Sache, die Sie wissen müssen, ist, dass Sie nichts wissen müssen. Bring einfach Bilder ein, solange es nicht größer als 4 mb ist. Und Wide Flow reduziert sie auf die richtige Größe, anstatt zu versuchen, sie zu laden. Andernfalls wird es versuchen, diese Drei-Megabyte-Datei zu laden und auf die Größe zu reduzieren. Es verschwendet also eine ganze Menge, benötigt keine Daten im Wert von 3 MB. Und Qualität bedeutet nur , dass wir in dieser Version, wenn Sie meinen Web-Essentials-Kurs absolviert haben, mehr auf den Code eingehen werden. Wir haben gerade viel Zeit damit verbracht herauszufinden, wie man Bilder oder verschiedene Breakpoints austauscht. Und weil das auch die andere Sache ist, ist, wenn es das in der Desktop-Ansicht rendert, aber es wird gerendert, es wird kalt auf einem Handy, es könnte viel kleiner sein. Suchen Sie also nur nach dem 500-Pixel-Eins, nicht nach diesem Join fast einem , den Sie vielleicht schön groß auf dem Desktop haben, aber klein auf der Handykabine Flow injiziert einfach das Richtige Code zum Gerät kann das Bild in der richtigen Größe aufrufen. Es muss super praktisch sein. Ein kleiner Bonus, um es bis zum Ende zu schaffen, ist Webflow, irgendwie mit Bildern im Assets-Panel. Hier kann es ein bisschen voll werden. Was ist das? Du kannst eigentlich nur diesen hier, erweitern, schönes und großes Heu bekommen und du kannst entscheiden, sie schönes und großes Heu bekommen und du einfach ein bisschen kleiner zu machen, sie mit der Liste winzig klein zu machen, mir die Bilder zu zeigen, die ich habe die Dokumente haben keine Dokumente oder Dateien. Zurück zum gesamten Vermögen. Du kannst suchen, mir alles zeigen , was einer von denen ist, die wir hassen würden , und du ziehst sie hier rein. Du kannst sie bestellen. Du kannst sagen, zeig mir zuerst den ältesten , der reinkam. Zeigen Sie es mir dann in alphanumerischer Reihenfolge und wählen Sie dann alle aus. Lösche sie überall. Aufregend. Also werden wir das in ihrem Bonus für die Leute zurückbekommen , die es bis zum Ende geschafft haben. Ordnung, das war's. Auf das nächste Video. 67. Wie Schnittbilder in Webflow mit object: Hallo zusammen. In diesem Video nehme ich unser rechteckiges Bild auf und erzwinge, dass es ein bestimmtes, höheres Rechteck hat. Und dann klebe ich es in einen Kreis. Ich hätte das wahrscheinlich früher machen sollen. Jedenfalls. Lassen Sie mich Ihnen zeigen , wie Sie Bilder in Webflow zuschneiden. Das Erste, was ich sagen werde, ist, dass, wenn Sie die Möglichkeit haben , Dinge zuzuschneiden etwas wie Photoshop zu sagen, tun Sie das , denn wenn Sie viel abschneiden, bedeutet das nur, dass es Die Dateigröße ist hoch. muss es nicht sein, aber es gibt viele Anwendungsfälle, in denen es hier zugeschnitten werden muss, Webflow. Ich werde den Kerl los und bringe ein rechteckiges Bild mit. Ich benutze den, den wir vorhin benutzt haben. Wenn deins feststeckt wie ich, denke ich: Wo ist mein Bild geblieben? Das werde ich klarstellen. Okay, und ich gehe zurück ins Netz, weil es mir gefällt. Und ich werde diesen hier reinbringen , eindeutig rechteckig. Es muss quadratisch sein. Was mache ich? Das nächste ist, dass das in einer Klasse sein muss, aber ich kann es mit k kontrollieren. Also nenne ich das meinen Image-Helden. Ich werde das nicht benutzen, weil ich schon irgendwie rückwärts gegangen bin und es rückgängig gemacht habe und es benutze. Ich benutze es schon für die Sache mit abgerundeten Ecken. Also nenne ich das ein Bild. Hier sind zwei, sehr clever. Und ich gebe ihm eine Größe und eine Breite. Also würde ich sagen, Größe, du machst Mindest- und Höchstwerte. Wir werden sagen, dass du eigentlich genau wie etwas bist , das hier reinpasst. Ich sage, du bist bei 200 mal 200. Okay? Und es hat es zerquetscht, womit wir nicht leben können. Was wir also sagen, ist diese Option hier, sie heißt sitzen. Wir sagen also, dass das Objekt es nicht füllt, das versucht, die Höhe und die Breite zu füllen , sondern es einfach abzudecken. Es ist oben und unten abgeschnitten , wenn ich es ziemlich breit mache. Also halte ich meine Wahltaste auf einem Mac gedrückt, Alt-Taste auf einem PC und ich ziehe sie in diese Richtung oder in die Breite, dann sagst du, ich mache eine breitere Kannst du sehen, dass es versuchen wird, alles abzudecken, aber es verliert viel von oben und unten. Es kommt also darauf an , was Sie tun müssen. Denken Sie daran, dass diese hier unten angezeigt werden, bevor wir sie in Symbole verwandeln. Wir hätten diesen Schlafentag machen sollen. Aber jetzt weißt du, ich wollte absolut ehrlich sein. Wieder werde ich 200 mal zwei gehen. Das sind 2.200 mal 200. Und jetzt kann ich meinen Rand hinzufügen, ihn ein bisschen runden und ihn einfach 200 machen. Es geht also rundum, weil es sich innerhalb des Gitters befindet. Es ist ein großartiges Kind. Ich kann sagen, du hast es geschickt und dann so gesintert. Nett. Wir müssen es auch an die verschiedenen Größen anpassen . Das funktioniert gut. Das funktioniert. Ich will, dass es größer wird. Ich will es nicht bewegen. Sie können also durchgehen und sagen, dass es bei dieser Größe Manana ist, 500 mal 500. Okay. Und man sieht dort die abgerundeten Ecken zu Hunderten, nicht genug. Gehen wir. 300. Neo wird ein bisschen lächerlich , wo wir es einfach ausschalten. Aber die Idee, du kannst es anpassen, solange sie eine Klasse darum haben. Sie können die verschiedenen Breakpoints anpassen. Und der Trick besteht darin, es einfach zu sitzen , um es abzudecken. Sie können erzwingen, dass es eine beliebige Größe hat. In Ordnung, das war's. Wir sehen uns im nächsten Video. 68. Was ist faule Belastung in Webflow: Hallo zusammen. Wir werden uns diese Option hier ansehen. Was bedeutet Lazy Load? Was ist es, IGA zu sein, alles wird enthüllt. Okay, also Lazy Load ist standardmäßig in Webflow aktiviert, okay, ich habe ein Bild gefunden, ich habe auf das Zahnrad geklickt und es heißt hier, load. Schließlich ist das Gegenteil eifrig geladen, sehr coole Namen, so viele andere Webdesign-Teile oder, ich weiß nicht, Displayblock oder Inline-Block oder Klassen-ID div zero, schreckliche Namen, faul und IGA. Macht Sinn. Okay, es bedeutet nur das, und ich habe diese wirklich lange Version davon gemacht. Es ist wirklich schwer, ich muss es nur beschreiben. Im Grunde passiert es, wenn die Website geladen wird, diese geladen wird, weil ich sie sehen kann. Es wird die Tippy-Tops dieser Bilder laden, wo all diese Bilder geladen werden, diese drei hier, weil ich sie sehen kann. Es wird keines dieser anderen geladen , weil es es nicht sehen kann . Es ist nicht im Darstellungsfenster. So faul bedeutet einfach , dass ich die lade, die ich sehen kann, aber ich werde die anderen nicht machen, weil ich faul bin. Warum ist das gut? Es bedeutet nur, dass die Seite sehr schnell geladen wird. Google schaut sich also alle diese Seite an, schaut sich Facetten an, die geladen werden, wenn die Person dort ankommt, und während des Scrollens kann es dann eilig sein, zu versuchen, die Bilder nachzuholen und zu laden. Das kann so sein, du kannst es zwingen, tatsächlich diese Bilder hier unten zu sagen, ich will nicht in mein Symbol, ich kann immer noch das COG sehen. Und ich kann sagen, dass ich möchte, dass diese alle eifrig sind. Du kannst es durchgehen und es dafür tun, für alle von ihnen, solange du es der Klasse anmachst. Okay. Diese Dinge werden ihm genauso gefallen. Ich weiß nicht, warum du das tun würdest, du kannst es auf Standard setzen. Man kann also sagen, lass eigentlich einfach den Browser entscheiden. Und ich denke, in Google Chrome ist die Standardeinstellung Lazy Loading. Ich weiß nichts über die anderen Browser, aber los geht's. Es ist einfach eine interessante Sache. Ich weiß, du wirst diesen Kerl hier fragen, wird nicht faul laden, weil er zuerst gesehen hat, er wird, er wird sofort laden, aber all seine Kumpels unten, wir werden warten, bis sie gut sind und wirklich faule Bilder, die auch nur bei Bildern funktionieren. Habe faulen Text laden. Ordnung, das war's. Kommen wir ganz einfach zum nächsten Video, Dendritik, Bettgefahr. 69. Wie man Favicon in Webflow ändert: Hallo zusammen. In diesem Video werden wir uns diese kleinen Jungs hier oben ansehen . Es gibt ein Favicon. Wir werden unsere auf diesen seltsamen Emoji-Typ aktualisieren , wie Little es getan hat. Nur weil lass mich dir zeigen , wo es zu tun ist und wie die Regeln lauten. Lass uns loslegen, okay, um das Favicon für ein Projekt zu finden, musst du zu den Projekteinstellungen gehen. Ich bin also in meinem Portfolio und es ist nur in diesem ersten allgemeinen Tab. Du hast es wahrscheinlich gesehen. Das ist wahrscheinlich der warum du gegoogelt hast, was macht das Favicon? Es ist dieses Icon hier oben. Siehst du das Favicon für Figma? Ist das ein kleiner Kerl, ein bisschen davon schwimmt, dass du dein eigenes machen willst. Das Problem ist, dass es für Sie nicht geschafft wird. Sie müssen etwas hochladen, das genau 32 Pixel mal 32 Pixel groß ist. Es muss einer dieser kleinen Kerle sein. Es kann kein SVG sein, obwohl das von guter Qualität ist. Wahrscheinlich wird es ein PNG sein, weil Sie vielleicht Transparenz wünschen. Dieser hier braucht keine Transparenz, weil es ein solides Quadrat ist. Es ist ein bisschen rechteckig, aber es ist ein festes Quadrat. Es sind also viele Favicon-Icon-Hersteller online. Ich benutze Photoshop und alles, was ich gemacht habe, war eine neue Datei zu erstellen und 32 mal 32 Pixel zu erstellen. Stellen Sie sicher, dass es RGB ist. Klicken Sie auf Erstellen. Und dann habe ich einfach einige Grafiken kopiert und eingefügt an denen ich für etwas anderes gearbeitet habe. Okay. Ich habe sowieso an einigen Kostensachen gearbeitet. Also ja, bring es da rein. Es ist winzig klein. Es ist ätzend. Die Qualität ist schrecklich, aber Ernie muss ziemlich klein sein. Okay, wenn Sie es dann in einem, zumindest in Photoshop, exportieren, können Sie es als PNG exportieren, sodass Sie diese Transparenz erhalten, okay, und Sie exportieren es. Es können also nicht 32 sein, es können nicht 31 mal 30 auf Konto B sein, 33 mal drei, das sehr streng. Sobald Sie es haben, können Sie es hochladen. Ich habe ein paar. Ich habe die beiden in deinen Übungsakten, wenn du sie willst. Ich werde in mein Portfolio in den Übungsdateien dieses Favicon hochladen mein Portfolio in den Übungsdateien , ich werde es in einer Sekunde umbenennen. Aber es wollte einen auswählen, auf Öffnen klicken und darauf warten. Nachdem ich bereits aktualisiert war, musste ich nicht einmal auf Änderungen speichern klicken. Nun, wie siehst du es im Designer? Du wirst es nicht sehen. Es wird immer noch Webflow sein. In der Vorschau. Es wird immer noch nicht angezeigt. Sie müssen die Site also veröffentlichen. Ich werde es veröffentlichen. Ich werde es mir ansehen und mich fertig machen. Weil das neue Favicon, offensichtlich skelettartig, Emoji gemacht hat, wahrscheinlich nicht für mein Portfolio geeignet. Aber hey, du wählst alles aus, was du willst. Gleichheit ist schrecklich. Verwenden Sie Farben. Das Einzige, was mit Favicon passiert, also wenn Sie es aktualisieren, wird der Fall geladen, dass der Browser manchmal das Favicon festhält und es nicht ändert. Wenn Sie es also hier im Workflow aktualisieren, wird es manchmal aktualisiert. Aber manchmal muss der Browser sein, man muss den Käfig leeren, im privaten Modus sein, etwas, weil er manchmal viel zu lange an diesem Favicon festhält und es nicht aktualisiert wird. Auch wenn Sie es aktualisiert haben. Es speichert nur Abneigung und zeigt es nicht an und sucht nicht oft nach dem neuen Symbol , denn wer das Favicon sehr oft aktualisiert , zeigt einen Designer und du machst das alles Zeit zu versuchen, ein perfektes Pixel da rein zu bekommen. Ordnung, Feder-Nachteile in Webflow. 70. Fußzeile im Webflow nach unten: Hallo zusammen. Das ist meine Fußzeile. Auf anderen Seiten war es in Ordnung, aber auf dieser Seite, weil sie wirklich kurz ist, bleibt sie immer oben hängen. Ich möchte, dass du bei der vermittelten Deborah ganz unten bleibst. Ordnung, wir haben es tatsächlich schon einmal gemacht. Einfach eine bekannte Fähigkeit wiederverwenden. Lassen Sie mich Ihnen zeigen, wie es geht. Erstens ist es nicht dasselbe wie der Schlag, den wir gemacht haben. Wir haben es mit dieser Position klebrig gemacht. Okay. Das hat ihr Fuß funktioniert. Es ist etwas anders und wir haben es tatsächlich schon einmal gemacht. Wir haben es hier gemacht. Okay, denken Sie daran, dass dieser Doppelklick, um in mein Symbol zu gelangen , auf diese Weise entwickelt wurde, um bei all diesen verschiedenen Größen nach unten zu drücken . Okay. Wir haben die Eltern Flexbox gemacht und wir haben das Kind gemacht. Wir hatten eine Marge an der Spitze der Bestellung. Was wir noch einmal machen werden, aber es ist wieder, dass die Eltern die Körpermarke sein werden und die Fußzeile wird in der Reihenfolge von oben gedrückt. Lass es uns machen. Ich gehe zu, es macht keinen Sinn, es auf dieser Seite zu tun, weil es auf den Grund gezwungen wird. Es ist sehr praktisch, dies in Aktion zu sehen, wenn Sie auf der Portfolio-Seite sind . Beispiel, wenn ich hier eine Fußzeile hinzufüge, deine Fußzeile. Es bleibt ganz oben hängen, weil es kein Inhalt auf der Seite ist. Wir haben vielleicht schon eine kurze Seite. Also werde ich ein super Basic-Styling einbauen. Also werden wir es in einen sogenannten Abschnitt einfügen und ich füge es in die Fußzeile des Abschnitts. Aber eigentlich weiß ich nicht , dass ich das schon einmal aufgenommen habe und es ist schlecht gelaufen. Ich zeige Ihnen, wie Sie eine löschen , die Sie nicht mehr benötigen. Okay, also bin ich zu meinen Styles gegangen. Ich habe es gefunden, indem ich danach gesucht habe, und ich werde es biegen. Okay, ich habe vergessen, dir im ersten Thema dieses Videos etwas zu erzählen , also mache ich es wieder. Es ist wieder da, wo wir waren. Ich werde für diesen eine Klasse namens Abschnitt erstellen. Und ich füge nur zwei Dinge hinzu. Ich gehe zu Option oder Alt, klicke auf die Chevrons , um sie zu schließen. Ich werde sagen, dass Hintergrund diese Tafel ist. Und ich gebe ihm eine Größe mit einer Mindesthöhe von vielleicht 100. Cool, wie kleben wir es auf den Boden? Das Erste ist, dass es so sein muss , weil wir den Körper herstellen. Das werden die Eltern sein. Okay. Das ist das Kind. Ich kann das in keinem dieser anderen Div-Tags verstecken . Ich kann es nicht in einen Abschnitt stellen in dem ein Behälter parallel zum Körper sein muss , damit das funktioniert. Okay, also wenn ich parallel sage, muss es wie ein Schritt rein sein. Der Elternteil ist das Kind, das in den Körper wandert , muss geändert werden. Ich möchte, dass das auf allen Seiten passiert. Also will ich es nicht nur mit diesem Körper machen, denn wenn ich reingehe und ihn ändere, um hier oben aufzupassen, wenn ich ihn ändere, sagt er : Hey, erstelle eine Klasse namens Body Two. Und dann musst du auf jede Seite gehen und sie anwenden. Also was ich tun will ist wieder hier drin zu sein und Buddy zu sagen, klicke hier rein. Ich möchte, dass alle Seiten auf alten Kumpels mit Flexbox fertig sind. Du willst sagen, dass die Richtung vertikal ist, dann wird sie wieder so, wie sie war. Ich kann sagen, du, mein Freund, mein Kind von meinem Flex, das ist komisch. Wir können zu Spacing gehen und wir können sagen, dass die Oberseite automatisch ist. Wir haben es geschafft. Das ist so ziemlich alles. Ich gehe jetzt durch und style mein Foto. Du kannst rumhängen und überprüfen, wie ich eine Fußzeile baue, den Anfang dort sortieren. Es ist nicht besonders schick. Sie können entlassen werden. Ansonsten bleib hier. Ich verwandle es in ein Symbol und setze es auf alle Seiten. Ordnung, also was ich will, achy, ich möchte es nicht in einen Container legen, einen Keegan, und möchte einen Textlink einfügen. Ich mache nur einen einfachen. Ich werde diesen Textlink in einen Texteditor einbinden. Okay, es braucht, was macht das Sinn? Ja, ich weiß, dass die Topographie weiß sein wird. Ich werde es irgendwo verlinken lassen. Okay, aber zuerst ändere ich den Text. Okay, also ich habe eine SMS. Ich werde mir noch keine Gedanken darüber machen, es zu zentrieren . Wir fügen den Link hinzu. Eigentlich will ich das machen, mir geht es darum, es zu stylen. Damit ich das Bild runterdrücken konnte. Ich kann mit den Rändern spielen. Eigentlich zeige ich Ihnen einen anderen Weg denn der einfache Weg, naja, unser Weg ist, uns den Container zu schnappen. Ich sagte, mach den Container nicht von Flexbox. Wird es funktionieren? Lass uns einen Scheck zentrieren lassen und wird er ihn so schicken? Was du gehst, deshalb machen wir das nicht. Okay. Also werde ich in eine Sackgasse geraten und das reinlegen. Okay, hier ist mein Text und der Summationsblock. Es ist nicht in meinem Container. Los geht's. Nein, ist es nicht. Los geht's. Jetzt kann ich sagen, dass diblock, okay, div heißen wird. Div. So viele Fußzeilen. Und ich sage, du bist flexibel. Du wirst zentriert sein und du wirst dort zentriert sein. Oh, es funktioniert immer noch nicht. Oh, ich weiß warum. Weißt du warum? Pause. Denke warum? Warum kann ich es dort sehen. Du kannst sehen, wie es vor meinen Augen läuft. Es gibt keine Höhe. Die Höhe stammt aus dem Abschnitt. Ein ***** des Containers hätte sich gut umgewandelt , wenn ich ihm die Höhe gegeben hätte. Also sage ich, ich werde den hier los. Das hat also eine Mindesthöhe von 100. Ich lösche es, indem ich die Wahltaste oder die Alt-Taste auf einem PC gedrückt halte . Und ich werde es dir geben. Du wirst die Mindesthöhe haben . Jetzt ist es auf der Wiese oder ein Tanz, super tolle Webdesign-Firma weiß ein bisschen, was er macht. Es ist viel zu groß. Sie sind nach unten gerichtet. Los geht's. Ordnung. Ich verwandle es in ein Symbol, ich verwandle es in ein Symbol. Lass uns das machen. Sie können mit der rechten Maustaste darauf klicken und es in ein Symbol verwandeln , in dem Sie zum Symbolbedienfeld gehen und Symbol erstellen sagen können. Das wird meine Fußzeile sein. Habe schon eins davon. Tue ich nicht. Schau dir meine Symbole an, nicht. Ordnung, es gibt nur eine Instanz auf dieser Seite. Lass es uns auf alle Seiten schreiben. Also kopiere ich es. Gehen wir zu den Seiten. Es hat eine Homepage und scrolle nach unten. Gehen wir zu meinen Symbolen. Monteur. Hinzufügen kann schwierig sein. Den Boden erledigt. Nett. Aber weil es ein Symbol ist, kann ich darauf eingehen und es ändern und sagen, dass wir nicht TTY wie Australien sind. Wir sind limitiert wie Neuseeland oder.co. Ich weiß nicht, was das ist, aber es bedeutet, dass es auf den anderen Seiten wie dieser aktualisiert wird . Hier ist es da.co, das Unternehmen. Und wir gehen es durch und fügen es allen anderen Seiten hinzu. erspare ich dir, weil du es gesehen hast. Ordnung, so wird Ihre Fußzeile klebrig. Kleben Sie es auf den Boden. Sie verwenden tatsächlich die Flexbox und Sie verwenden das Kind, um oben bestellt zu werden, ist seltsam, aber wahr. Okay, lass uns zum nächsten Video gehen. 71. Wie man eine page in Webflow erstellt: Hallo zusammen. In diesem Video machen wir einige Animationen zum Laden von Seiten. Wir können diesen Text anzeigen lassen, wenn die Seite geladen wird. Okay, also die Seite wird geladen , die auftaucht. Wir werden dieses Interaktions-Panel behandeln. Wir schauen uns die Lockerung an. Und wir werden unsere erste benutzerdefinierte Animation erstellen, ohne einige der Voreinstellungen zu verwenden. In Ordnung, lass uns loslegen. Okay, also für diesen nächsten Abschnitt Indirection und Animationen habe ich eine ganz neue Website erstellt, habe ich eine ganz neue Website erstellt nur um sie von unserem Portfolio und der Club-Website, die wir erstellt haben, zu trennen . Nur um es zu halten, ja, um es klar zu halten und sehen zu können, was wir ohne 1.000 Klassen machen. Aber natürlich kann es in diesen funktionieren. Was ich hier gemacht habe, ist, dass ich den Hintergrund bearbeitet habe. Ich habe ein Navi hinzugefügt, nur weil animierte Container und der Harris-Bereich, der nur die reguläre Struktur für die Site ist. Ich glaube, ich bereue den Farbverlauf schon. Es ist eine ziemlich, ziemlich große Wirkung auf die Augen. Es gibt also ein Logo. Um loszulegen, ist es ziemlich praktisch, weil wir nicht wirklich zu viel von dem Abschnitt stylen und dann den Diblock dort hineinstecken wollen . Und es tut nichts, außer dass es die Dinge akzeptiert, die wir animieren werden. Sie können alles animieren, ein Bild, eine Schaltfläche, Listen. Ich werde nur Textblöcke einfügen, wie der Anfang dort. Dieser wird kalt sein. Tanzen. Und dann habe ich noch eins, ein paar basierte Portfolios für 30. Ordnung, ich werde die ganz schnell stylen. Ich erstelle meine eigenen Klassen. Das ist also ziemlich wichtig. Sie animieren das Element also nicht wirklich, sondern eliminieren die Klasse , die Sie darauf anwenden. Also genau das, was Sie animieren möchten und zu dem Sie eine Klasse hinzufügen möchten. Und Sie werden feststellen, dass ich zwei separate Textfelder eingefügt es ist nicht schwer, sie zu animieren, oder wenn sie sich alle im selben Textfeld befinden, weil ich wollte, dass diese separat animiert werden. Sie werden also Text genannt verwenden dann vielleicht Großbuchstaben , um es klarer zu machen, damit Sie sehen können, was ich vorhabe. Das Animationspanel ist ein bisschen, ein bisschen knifflig. Nun, ist es nicht, aber es ist, es braucht, und das wird ein großes Portfolio sein. Ordnung, ich habe diese beiden, also werde ich diese beiden Klassen animieren. Wie mache ich das? Eigentlich werde ich die ganz schnell stylen. Du wartest dort. Okay, also habe ich sie gestylt. Sie müssen nicht beide animieren. Sie können sie beliebig animieren , um loszulegen. Haben Sie Ihre Klasse ausgewählt, um sie zu erweitern? Wir gehen zu dem kleinen Blitz hier. Und dieser wird bei Gewicht ein Seitenauslöser sein. Früher im Kurs haben wir Ellen und Trigger gemacht und wir werden viel machen. Am Ende werden Sie mit viel mehr Element-Triggern fertig werden. Wir machen einen Seitenauslöser, nur um dir zu zeigen, was er tut und es ist angebracht, dass wir hier wollen, wenn die Seite geladen wird, denn sieh dir das an. Wenn ich zum Page-Trigger gehe, gibt es einen wirklich coolen Trigger. Dies ist, wenn die Seite geladen wird. So gesund. Du musst das irgendwie durchlesen. Ich habe es durchgelesen, weil es so ist, ich finde es schwierig. Und wenn ich eine knifflige finde, wirst du sie schwierig finden. Sie sagen sehr deutlich, was Sie tun müssen, und es ist ziemlich gut, wenn Sie es lesen. Wenn die Seite geladen wird, wähle eine Aktion aus, wir haben keine Aktion. Wir werden unsere erste benutzerdefinierte Aktion starten bevor wir eine voreingestellte Aktion verwenden. Also haben wir eine Aktion gestartet, eine Animation gestartet, so dass eine neue, aber immer noch keine hat , wirklich zu einer Art erstellt wird . Jetzt müssen wir zu dieser Zeit die Animation hinzufügen. Wir sagen, füge hier zwei hinzu. Und dieses Ding von p wird ihm einen Namen geben. Wir nennen das hier eine Textanimation. Und wir werden mit deiner Klasse ein paar Sachen hinzufügen. Da Sie an diesen Punkt hätten kommen können, ohne etwas ausgewählt zu haben, müssen Sie sicherstellen, dass Ihre Klasse jetzt aufgehoben ist. Denn was es bewirkt, ist, dass ich mich bewegen werde. Sie können jedes davon machen. Ich würde einen Schritt machen. Kannst du sehen, dass es durch den Klassennamentext gebracht wurde über den Dan Capital Dan es gekauft hat. Und wann immer du Animationen machst , behalte diese Typen im Auge. Sie sind sehr hilfreich. Okay, es heißt, dass diese Bewegungsaktion keinen Wert hat. Okay, also tu das. Was ich also sagen werde ist, dass ich es gerne bewegen würde und Sie können sehen, dass es hier ganz unten erscheint . Ignoriere das Timing für den Moment. Schauen wir uns diese Aktion hier an. Schauen wir uns einfach die Einstellungen hier unten an und du kannst X, Y und Z sehen . Es macht mir nichts aus, alle meine ziemlich weit runter zu gehen . Also schneide ich es auf Gesetze ab, die aussehen, als würde es irgendwie aus dem Boden kommen. Aber egal, drücke Play, es ist falsch herum. Das passiert also oft. Also was du sagst ist hier bei Null K, ich will, dass es hier unten ist. Eigentlich möchte ich, dass dies der Ausgangszustand ist. Ich will da nicht hin. Ich möchte, dass es hier anfängt. Das ist also der Ausgangszustand. Das Problem ist jetzt, dass es keinen anderen Staat gibt. Okay, Sie müssen also sagen, dass wir eine weitere Aktion hinzufügen, die noch ausgewählt ist . Es ist lustig, als könntest du hier tatsächlich 1 Million verschiedene Dinge animieren. Wenn Sie darauf klicken, stellen Sie sicher Sie das Ding animieren möchten, okay? Ich möchte eine Aktion hinzufügen. Ich möchte noch einen Schritt machen. Okay, und was sagt dieser Schritt? Er ist wieder bei 0 und setzt es wieder auf Null. Sie können sehen, dass es Null sagt. Da ist es. Warum es Null heißt. Du hattest tatsächlich einen Sake auf Null gehen lassen, bitte. Also sieht es bei diesem ersten aus, okay? Dieser ist auf gesetzt, die Initiale ist auf gesetzt, ich setze sie auf 234. Dann wird dieser andere auf Null gesetzt. Dann holen wir ihren Teller. Hey, wir animieren. Ignoriere dieses Ding. Ich finde das echt knifflig. Und es passiert tatsächlich über 5 s. Woher weiß ich, dass die Dauer dort ist? Also dieser Top hier verliert all das Timing, weil ich sagte, er sei der Ausgangszustand, also tut es nichts. Der zweite hat jedoch viele Informationen. Beide verschieben das beide für Text hinein. Hier steht: Oh, ich möchte, dass die Dauer 5 s beträgt. Ich würde annehmen, dass dies bei 5 s ist. Ich weiß nicht, warum das nicht so ist. Ich sehe mir also nicht einmal an, dass es sich um Proteine handelt, sie existieren nicht. Sie können es ändern. Das hat diese Benutzeroberfläche hier in dieser geändert, diese Option hier, lädt ein, um zu versuchen, sie zu verbessern. Ordnung, also geht es irgendwie hoch. Bevor wir das zweite machen, schauen wir uns ein paar Dinge an. Denken Sie an diese erste Option hier, der Ausgangszustand hat nicht viele Optionen. Der zweite, der die Kranken macht, ist, wie lange wird es dauern , bis das 1 s dauert , Lass uns auf Play klicken. Es dauert länger als nicht. Das beste ist jedoch dieses Ding hier. Lockerung, Lockerung hat mit dem Moment zu tun , ist ziemlich linear, oder? Nun, es ist linear, wird einfach langweilig. Powerpoint-Animation. Nun, ich will, ist wahrscheinlich das schönste erste ist einfach rein und raus. Anfang wird es langsam gehen, am Ende langsam, was sich wie im wirklichen Leben anfühlt, aber Schwerkraft, Reibung, ich weiß nicht, etwas passiert damit, geht schnell in der Mitte, verlangsamt Anfang und Ende . Ganz viel netter. Es gibt ein paar wirklich nette. Es wird davon abhängen. Gedanken kommen von unten. Ihre könnte von oben herunterkommen. Schauen wir uns also an, verwenden Sie Ease In und Ease Out oft nicht. Ich verwende In-N-Out zusammen. Okay, jemand, der beide sind. Also, wenn ich sage, Leichtigkeit rein raus, tatsächlich zum Bounce übersprungen, Bounce-Arbeit auf diese Weise. Sehen Sie, dass Bounce nicht funktioniert, weil es kommt, es kam vom Top-Bounce mit also Arbeit. Aber weil es von unten kommt, könnte es dir gefallen, aber es ist, es ist irgendwie komisch, oder? Es ist der Anti-Schwerkraft-Text. Es hängt also davon ab, wie Sie es tun. Was ich also tun möchte, ist, dass dieser ziemlich gut aussieht. Denken Sie also daran, dass all diese - und Ausgänge ziemlich gut sein können. In einem Postausgang. Ziemlich nettes Spiel. Kannst du sehen, dass es weggeht, irgendwie in die entgegengesetzte Richtung geht, bevor es den Weg des Ford geht. Es heißt Vorfreude. Es geht irgendwie rückwärts und dann hoch. Es ist irgendwie nett. Und die Dauer spielt dabei eine große Rolle. Und so wie es aussieht , sieht es irgendwie albern aus. Und diese 2 s sehen viel zu lang aus. Es wird also viel damit herumgespielt. Aber sagen wir mal, sagen wir 2 s, aber es tut es für einen dieser anderen. Manchmal ist es möglich, wir sind perfekt für 2 s, weil noch viel mehr los ist. Lass uns elastisch werden. Sie sehen, 2 s sind eigentlich ganz nett für Gummibänder. Ordnung? Also zuerst eine Menge Optionen. Dauer des zweiten Monats in der Lockerung , spielen Sie mit den verschiedenen herum. Bounce Past ist ziemlich cool. Das hat es. Das ist der, der vom Boden kommt. Es ist irgendwie, irgendwie hoch und springt rüber. Aber die Dauer ist zu lang, also lasse ich es dort. Es ist irgendwie cool. Ordnung, lassen wir es für den Moment dort. Klicken wir auf Speichern, wenn Sie es verlassen haben. Okay, nehmen wir an, du bist rausgekommen und willst dich wieder darauf einlassen, okay? Sie tun nichts, müssen auf nichts klicken, da es sich um eine Seitenanimation oder Seitenauslöser handelt. Sie hören sich also alle Ihre Seitenauslöser an. Ein Teil der Seite, nicht Teil irgendwelcher Elemente. Sie müssen nicht zuerst darauf klicken. Ich kann also sagen, dass du dieses große alte Ding bist. Okay, hier haben wir angefangen, aber wir haben eine Animation hinzugefügt. Okay, wir haben ihr eigenes hinzugefügt. Wir nannten es Hero-Text. Wir haben es in diesem Teil irgendwie benannt. Um wieder darauf einzugehen. Denken Sie daran, gehen Sie zum Laden der Seite, und hier passiert die Magie hier drin. Sie sehen sich hier eine Vorschau an. Ich kann zu diesem gehen und ich kann sagen, mache ich es mit dem ersten? Okay, hier ist nicht viel los. Der zweite aber, ich kann sagen, ich möchte, dass ich den Bounce Pass nicht mehr mag. Ich glaube, ich mag den elastischen . Das muss länger dauern. Okay, nochmal, ich werde es retten. Sie können es einfach hier in der Vorschau anzeigen oder einfach in Ihren Vorschaumodus wechseln. Es wird eine Vorschau angezeigt. Das Nächste, was ich tun möchte, bevor ich anfange, das zweite zu animieren , ist, dass es mir sehr gut gefallen hat, als würde ich aus dem Boden springen anstatt es hier unten zu sehen. Lass uns zuerst eine Pasadena machen, denn bevor wir sie abschneiden, und weil das nützlich ist, um sie in Aktion zu sehen, werde ich hierher gehen und sie hineingehen, und du machst es nicht separat, sie gehen alle hier rein. Also werden wir Text animieren und noch einmal, aber um mit der Deckkraft zu spielen. Und im Grunde wiederholt es das. Und es wird einige interessante Dinge aufwerfen. Also werde ich Plus drücken, okay, ich möchte, dass dieser eine Deckkraft hat. Ich will die Deckkraft. Denken Sie daran hier unten angezeigt wird. Der Zug war, dass Paare von ihnen Null sind. Aber ich möchte, dass es der Ausgangszustand ist. Es wird eine vollständig transparente Deckkraft bei Null beginnen . Großartig, Hit Play. Nichts wird passieren, weil wir es nicht sehen können. Es macht es. Wir können es einfach nicht sehen. Also brauchen wir eine zweite davon, ich gehe zu dir, ich will noch eine, Opazität. Und ich will diese Undurchsichtigkeit. Ein großer Trick dabei ist, sich anzusehen, 100 wie die Größe zu sehen und es wird wahrscheinlich funktionieren. Okay, funktioniert irgendwie. Sie am besten sicher, dass Sie wirklich explizit sind. Sag es, ich will, dass es 100 sind. Okay. Und wie weit soll es nach einer halben Sekunde sein. Und sieh dir an, was es bewirken wird. Dass ich zuerst Opacity mache und dann meinen Schritt mache, damit du das vielleicht willst. Okay, weiß ich nicht. Was am Ende passiert ist, kannst du hier sehen, es heißt: Also was machen wir? Also macht es zuerst die Opazität und geht dann zu dieser über. Wenn wir also auf diesen letzten Abschnitt klicken, den Zug k, wird ihm gesagt: Okay, er sagte, Dieser Typ wird nach dem vorherigen Abschnitt beginnen , der vorherige Abschnitt als dieser. Also wird es danach beginnen. Das will ich nicht. Ich möchte mit dem vorherigen Abschnitt fortfahren. Wir sagen, es wird viel in Webflow gelesen , um es irgendwie zu verstehen. Los geht's. Sie machen beides gleichzeitig. Du kannst hier auch irgendwie sehen, kannst du sehen, dass die außen einen kleinen Liner haben? Diese sind zu Beginn gruppiert. Diese sind gruppiert, während wenn ich es rückgängig mache, okay, kannst du sehen, dass es separate gibt. Sie sind so, als gäbe es eine Art Grenze zwischen ihnen, um zu sagen, mach diesen, dann diesen. Okay, also gehen wir auf welchen Schritt ein. Und ich möchte sagen, fange eigentlich damit an, oder? Meine sind irgendwie komisch. Es liegt daran, dass es hier unten immer noch irgendwie verblasst. Weil weißt du warum? Es wartet nicht? Es verbringt eigentlich nur viel Zeit mit der Animation. In der Bewegungsanimation wird diese als elastisch bezeichnet. Den werde ich einfach los. Tiefer runter. Und hoffentlich, los geht's. Es blasst im Laufe der Zeit irgendwie ein. Selbst dann ist es immer noch nicht so. Was wir mit Kapazitäten machen können. Wir können sagen, dass sich das etwas verzögert hat. Okay, verzögern wir es um eine halbe Sekunde, damit es tatsächlich anfängt , sein Ding zu machen eine halbe Sekunde nach Beginn dieser kleinen Animation anfängt , sein Ding zu machen. Möglicherweise müssen Sie mit den Verzögerungen herumspielen. Das könnte genug sein. Ich werde meins los. Wie löscht man sie? Du gehst hier rüber und sagst, du bist in der Passivkanone, weißt, was sie waren. Ermordet, einer ist auch weg, weil ich ihn dazu bringen werde, aus dem Boden zu springen . Spar es. Wie bringe ich es dazu, aus dem Boden zu springen? Also gehen wir zurück zu den Styles. Es hat nichts mit den Interaktionen zu tun, es hat alles mit seinem Container zu tun. Also ist außen ein Diblock gewickelt. Da ist es da. Ich meine, selbst wenn wir ihm einen Namen geben, nennen wir das eine Div-Heldenanimation. Wir müssen uns nur diesen ansehen , der Overflow genannt wird. Okay? In dem Moment ist alles , was sich außerhalb dieses Divs sichtbar oder du kannst sagen, dass alles außerhalb des Divs unsichtbar ist. Es ist irgendwie von den Rändern dort abgehackt. Weil ich die Schrift war. Ich glaube, ich habe eine wirklich große Zeilenhöhe drauf. Also was ich tun werde, ist es einfach ein bisschen größer zu machen, weißt du, ein bisschen Polsterung, damit ich den unteren Teil sehen kann. Los geht's. Ordnung? Ordnung, jetzt lass uns die Animation spielen. Ich gehe Command Shift P, um zur Vorschau zu gelangen. Kannst du sehen, dass es jetzt irgendwie aus dem Boden springt? Sie können sehen, wie oben herausgesprungen ist, was ich vielleicht nicht will. Also werde ich auch oben etwas Polsterung hinzufügen . Also polsterst du, polstert da Schau, hängt die ganze Zeit. Ordnung, machen wir den zweiten. Also nochmal, ich muss nichts auswählen lassen. Ich kann zu diesem gehen und ich kann sagen: Hier ist meine Seite geladen. Es macht das. Hero macht Animation, okay, Mantel, klicke drauf. Ich habe Text gemacht, nur um mich zu bewegen. Ich werde jetzt auf dieses namens Takes Portfolio klicken . Ich mache das Gleiche. Ich werde ihm einen Schritt hinzufügen. Ich will ihn Ich will das dort, wo er als Ausgangszustand sein soll , weil ich möchte, dass sie dort landen. Bewältigen. Wieder gibt es diesen kleinen Kerl, halte Ausschau nach ihnen. Sie haben keinen anderen Wert. Es macht es also zu einem Wert. Nehmen wir an, ich möchte Move for Ticks-Portfolio. Und ich möchte, dass es etwas bewirkt. Wieder gibt es noch einen, der sagt: Hey, du hast noch nicht einmal die Werte geändert, wie okey-dokey. Das kann ich machen. Ich möchte es außerhalb des Bildschirms starten, was sich außerhalb dieses Divs mit Überlauf-Sets befindet, was bedeutet, dass es herausspringt und die Arbeit falsch gemacht wird. Okay. Also fängt er ihre Herzen falsch an, oder? Okay. Ich hab es falsch gemacht. Sie haben jedoch Probleme damit, weiß ich. Machen wir es rückgängig und machen es und tun es. Kannst du das Rückgängigmachen sehen? In dem Moment, wenn ich rückgängig mache weil ich das gezogen habe, werden alle meine Rückgängigkeiten angezeigt oder ich gehe in diese Folie. Ich wünschte, sie hätten sie zusammen gruppiert. Das könnte in Zukunft zutreffen. Workflow, wenn du zuschaust, denke ich, das Rückgängigmachen sollte wie alles sein, weil ich einfach so lange gerutscht bin. Also zählte es jede kleine Zahl als Undo. Okay, also dieser erste hier ist nicht der Ausgangszustand. Der Ausgangszustand wird sinken. Und dann wird dieser so eingestellt , dass explizit Null eingibt. Jetzt drücke ich auf Play. Dieser hier ist der Ausgangszustand. Da haben wir's. Man kann irgendwie sehen, dass sie gruppiert sind jetzt ist der Ausgangszustand und es wird funktionieren. Wer erinnert sich, warum einer geht und dann der andere? Es könnte dir gefallen, als ob der Job erledigt ist. Wie gesagt, das ist der Grund, warum es da ist, denn denken Sie daran, diese es nicht gleichzeitig tun. Es liegt ganz bei Ihnen, ob Sie möchten, dass das passiert, einer kommt und der andere auftaucht. Was ich tun werde, ist sie zu kombinieren, okay? Und du kannst ein paar Möglichkeiten tun. Ich kann das hier sagen. Warte nicht auf diesen Kerl. Ich will, dass du mit ihm gehst. Okay, ich möchte, dass du mit dem vorherigen Abschnitt anfängst und sie haben sich irgendwie zusammengetan. Kannst du die kleine Band um sie herum sehen? Ich mache das rückgängig. Mach es noch einmal rückgängig. Du kannst es eigentlich einfach da reinziehen. Hast du nicht. Da hast du es. Kumpels. Und die andere Sache, wenn sie da drin sind, weil dies sein Höhlen-Portfolio und Portfolio ist, dann ist meine Zwangsstörung so, als würde ich sie bewegen , um sie in die richtige Reihenfolge zu bringen. Siehst du, es ist ein bisschen knifflig. Man kann sie tatsächlich nachbestellen, macht nichts, weil sie in derselben kleinen Band sind. Es würde sie neu ordnen. Wenn Sie sie ziehen, als sie getrennt wurden, würde eines vor dem anderen passieren. Okay. Was ist der Unterschied zwischen den beiden? Warum ist einer glücklich und voller Leben und der andere? Der andere ist ein bisschen Palpatine, tut mir leid, PowerPoint, du bist großartig, aber ich benutze dich als deine schreckliche Animation. Bei Webflow können Sie hier hingehen und sagen, ich werde dasselbe verwenden. Ich werde In-Out-Density verwenden und ankündigen. Gut. Wir könnten einfach hier draußen davonkommen, aber weil wir neu sind, kleb es rein und raus. Und die einzige andere Sache ist , dass y schnell geht. Das Timing, kannst du sehen, dauert 1 s, dieses dauert eine halbe Sekunde. Lass uns beide gleich machen und sehen, jetzt wird einfach viel herumgespielt wie, was denkst du? Es ist irgendwie cool? Weil Dan so viel schneller vorankommen muss, weiter. Es bewegt sich mit einer anderen Geschwindigkeit. Okay, das ist irgendwie cool. Also vielleicht bringe ich Dan dazu , sich etwas zu verzögern. Dan hat Verspätung. Los geht's. Zu lang. Okay. Wenn wir Sekunden machen, also 0,25, Viertelsekunde. Ja, der Trick dabei ist jedoch, dass ich es um so viel verzögere, was bedeutet, dass die gesamte Generation tatsächlich ziemlich klein ist. Was sagt, ob ich 0.99495 kriege oder ausflippe. Entschuldigung, Computer. Schau. Siehst du die Verzögerung? Oh nein, es dauert immer noch 1 s, Dulles mich. Geh. Und 0,25 haben das schon gemacht. Habe auch einen 9.5-Verzögerungspunkt. Weil ich irgendwie will, dass es damit rauskommt. Ordnung, es ist irgendwie nett. Jetzt haben wir gerade zwei Schritte gemacht. Denken Sie daran, dass wir Text und Undurchsichtigkeiten schreiben mussten. Du kannst so viele haben. Du könntest 14 verschiedene Dinge tun , um Stan mitzunehmen , und dann ging er zum Portfolio. Das Einstellen des Anfangszustands ist sehr wichtig. Und dann für den zweiten , um sicherzustellen, dass Sie tatsächlich ganz explizit darüber sprechen, was es ist, obwohl es irgendwie ist, Kannst du es sehen? Es ist ausgeblendet und sagt, dass es Null ist. Es wird nicht immer davon ausgegangen, dass es heißt: Nun, Sie haben nichts gesagt und es ist nur ein Platzhalter. Es heißt eigentlich, dass ich auf Null gehen wollte, was seine ursprüngliche Homebase war. Sie können sie neu bestellen, achten Sie darauf, sie zu benennen. Okay, du wirst nicht neue Animation genannt , ich nenne es. Denken Sie daran, Ihre Klassen zu benennen da dies nicht der Fall ist, wenn Sie ein Bild hineinziehen und versuchen, es damit zu tun. Und es muss eine Klasse sein die auf dieses Bild angewendet wird oder was auch immer es ist. Und obwohl es jetzt nicht viel Sinn und wenn wir Seitenauslöser durchführen, machen wir es mit dem eigentlichen Element selbst, das wir animieren. Wohingegen das, aber wir haben es vorher gemacht und später machen wir es mit den Eltern. Können wir die Animation zum übergeordneten div hinzufügen, was im nächsten Video sinnvoller sein wird. Nur das, woran man sich erinnern Pates löst das Ding aus. Und wenn wir mehr Elementauslöser ausführen, tun Sie das mit dem Elternteil. Ordnung, rette es. Lass uns eine kleine Vorschau geben. Ordnung, das ist es, Seitenlade-Animation in Webflow. 72. Bild in und werde größer auf dem Überrollen in Webflow: Hallo zusammen. In diesem Video werden diese kleinen Karten größer werden kleinen Karten und irgendwie verblassen, wenn Sie sie überrollen. Okay? Ja, lass mich dir zeigen , wie man das macht und Webflow. Okay, um loszulegen, werden wir tatsächlich die Karte verwenden, die wir zuvor im Kurssymbol gebaut haben. Moment möchte ich gerade eine neue Seite auf meiner Website erstellt haben , einfach Animation heißt, während ich den Animationstest, nur um sie von allem anderen zu trennen, nur um sie von allem anderen zu trennen, füge ein Gitter , damit meine Karten irgendwohin gehen können. Es wird drei Spalten sein, eine Reihe. Und ich schnappe mir das Symbol. Okay, cool. Das Kabeljau-Thumbnail, es wird hier reingehen. Und weil ich es auch nicht mit uns verwechseln möchte, muss es ein Symbol sein? Nein, wir sagen einfach Rechtsklick und sagen Unlink Instance. Es ist also nicht mehr mit diesem Symbol verbunden, muss es nicht sein, aber es kann sein. Okay. Was wir auch tun werden, ist, dass ich die ganze Nachnahme will. Ich habe eine Div-Codekarte, ein Thumbnail, fasst alles zusammen, alles versteckt sich da drin. Cool. Was wir also damit machen werden, dass es ausgewählt ist, wir gehen zu unseren Blitzinteraktionen und wir werden einen Auslöser ausführen. Letztes Video, das wir gemacht haben Seite. Diese Sache hier hat mit einem Element zu tun. Man muss damit interagieren oder das Element muss etwas tun. Jetzt wird unser Element einen Maus-Hover haben. Okay? Wir werden beim Hover sagen, die Action stattfinden wird, und wir haben mit ein paar davon herumgespielt, aber es ist nicht so, dass hier ein paar drin sind, die so nah dran wären. Vorschau. Es ist irgendwie das, was ich will. Es ist nicht das, was ich will. Es gibt keine vorgefertigten, die ich haben möchte. Also erstellen wir eine benutzerdefinierte Animation. Okay, großartig, das hat nichts wie zuvor gemacht. Wir sagen, in Ordnung, fügen wir eins hinzu. Diese Animation werden wir das eine Mädchen nennen , welche Nachnahme? Wachsen. Und drücken Sie die Eingabetaste und haben Sie wie zuvor das Ding, das Sie animieren möchten. Und ich sage plus, ich möchte, dass dieser skaliert wird. Dieser ist ein bisschen komisch. Ich bin nicht wirklich komisch. Bevor wir diesen Text vielleicht verschieben , können wir unten angefangen haben und ihn nach oben verschoben. Also begann es an einem Ort , an dem ich noch nicht war. Also mussten wir diesen Ausgangszustand machen. Dieser fängt genau dort an, wo ich ihn haben will. Ich muss keinen Anfangszustand haben . Was am Ende passiert, ist alles, was ich tun muss, ist die Skalierung der Code-Thumbnails. Über einen bestimmten Zeitraum. Ich werde es ein gewisses Maß an Größe nach Ihren Wünschen tun . Ich werde hier einen Punkt zu Es ist wahrscheinlich ein bisschen groß, aber ich war noch nie in Showmanship hier. Es gibt also keine erste Ansicht , nur um die zweite Ansicht zu haben, Sie können sie spielen. Es ist ein bisschen einfacher, wenn es schon so ist. Wenn es dort sitzt, wo es sein muss, müssen Sie keinen Anfangszustand haben um es zu ändern, und es dann für den zweiten zurücksetzen. Dieser ist schon da, wo er sein muss. Also werde ich es einfach ändern, um es ein bisschen größer zu machen. Mein X und Y sind miteinander verknüpft, also wird es für jeden 1.2 sein. Und das ist im Grunde alles. Hoffentlich speichern wir es. Lassen Sie uns eine Vorschau darauf geben. Und ich bewege den Mauszeiger über ein halbes Werk. Okay, also wurde es größer. Und der Trick ist, sieh dir das an. Schon wieder. Wenn ich abklicke, klicke auf meinen Container. Ich habe diesen Auslöser, Elementauslöser und es heißt auf Hover, wächst dieser Kabeljau, dann schwebe weiter herum, tut nichts. Es ist vergesslich. Das ist einfach aufräumen, wenn du mit der Maus herumfährst. Ich muss das Gleiche tun. Ich sage „ Start“ und „Animation“. Ich möchte nicht, dass die Nachnahme wächst, weil sie es nur zweimal tun. Ich bin mir nicht mal sicher, was dort passiert ist. Fügen wir eine weitere Animation namens card hinzu und wachsen. Sehr schlau, Dan. Und ich werde mit der Sache sagen, dass ich es auch machen möchte. Ich füge Plus hinzu und möchte es auf eins zurückskalieren. Es fing bei eins an. Einige von ihnen sind Null. Es ist verwirrend. Okay. Dieser fing sofort an. Ich möchte zu einem zurückkehren und ich kann es einfach so lassen. Ich musste eigentlich sagen, Nummer eins. Und das war's. Ich muss den ursprünglichen Status nicht ablegen sagen Sie bitte zurück zu einem, beim Rollover, speichern Sie ihn, lassen Sie uns eine Vorschau anzeigen. Schweben. Schweben. Obwohl es cool ist. Es ist ein bisschen langsam. Es sieht also nach dem Zeitpunkt aus, aber das sind die Grundlagen davon. Okay. Machen wir ein paar davon. Gehen wir auf die Miniaturansicht der Karte, kopieren, einfügen , einfügen und gehen zur Vorschau dieser Karte. Und dieser macht einen. In Ordnung, also lass uns das machen, es hübsch aussehen lassen und diese Art von Dunkelheit dazu. Also arbeite ich hier an diesem ersten. Okay. Und schauen wir uns die Lockerung für das Wachstum der COD an. Wenn es also schwebt, mache ich das hier namens Cargo. Okay, ich habe dieses ausgewählt und ich möchte, dass die Dauer schneller ist. Wahrscheinlich nicht. Ich möchte nur, dass die Lockerung anders ist. Erleichtern Sie sich das Ein- und Aussteigen oder einige dieser. Ich benutze Quad, genau die Form des Ys. Sie haben seltsame Namen. Namen. Lassen Sie uns eine Vorschau darauf geben. In Ordnung. Ja, hier verbringt Dan viel zu lange damit, zu spielen. Ich werde das beschleunigen. Geh irgendwie so. Ging mit In-Out, erwischt. Und das Timing war okay. Ich muss dasselbe für die COD-Ungroup tun. Okay. Ich mache das Gleiche. Jetzt ist der Trick, wenn es ausgeblendet wird, auch wenn ich dasselbe mache, was war es? Okay und speichere es. Und spiel es. Speichern wir und zeigen es in der Vorschau an. Also klicke ich hier raus Befehl Shift P, Control Shift P. Du wirst feststellen, dass es zu lange dauert, wofür du ein Gefühl dafür bekommst, als ob es ganz nett herauskommt, aber dann dauert es zu lange, um zurück zu gehen. Es ist meine Erfahrung als Langzeitanimator. Okay. Durchschnittlich langfristig. Und da ist das, wenn ich auf die Karte klicke und ich mit der Maus über ähnliches gehe , was auch immer das ist. Das mag die erste Instanz, wenn es rückwärts geht und meine Kosten sinken. Okay, mach es ungefähr die Hälfte der Zeit. Wenn es 1 s dauert, bis es auftaucht, finde ich, wenn es eine halbe Sekunde dauert, bis es auftaucht, denke ich, dass etwa eine Viertelsekunde im Allgemeinen eine gute Regel dafür ist wie der Wasserhahn zurückgehen sollte. Aber die Hälfte der Zeit, die benötigt wird, um dorthin zu gelangen , fühlt sich irgendwie schön an, zurückzukehren. Das war sowieso so. Das ist dieser Teil. Machen wir es wie ein anderer Teil einer Animation. Im Gegensatz zum letzten Video müssen wir nur vorsichtig sein, aber hier müssen wir mehr Sachen hinzufügen. Also werden wir darauf eingehen, wo es seinen ursprünglichen Zustand bearbeitet. Okay, ich möchte, dass es ein bisschen dunkler oder transparenter ist oder so. Also werde ich auf Plus klicken und es gibt eine Menge Sachen, die du tun kannst. Unter dem Filter sind noch ein paar versteckt. Filter hat diesen hier, unten unten möchte ich etwas mit Filter machen. Und du kannst eine Unschärfe nehmen. Helligkeitskontrast ist hier eine Menge Zeug. Spielen Sie mit ihnen herum. Okay, was ich machen werde, Crease Cow könnte cool sein. Und das sehe ich oft. Ich verwende nur die Helligkeit. Und die Helligkeit wird gewogen 200 Prozent ist doppelt so hell, hundert sind normal, und Sie können 100 blasen und dunkler werden. Was ich will, ich werde wahrscheinlich dunkler werden als ich möchte, nur um sicherzustellen, dass es in diesem Video-Tutorial bis zu 50% gut sichtbar ist. Da wollte ich anfangen. Denn wenn ich es spiele, macht es es am anderen Ende, der falschen Seite, es wird dunkler, wenn es herauskommt. Ich möchte also sagen, dass dies mein Ausgangszustand ist. Dies ist eine dieser Zeiten, in denen auf einer Tour durch sie nur eine benötigt weil der Ausgangszustand bereits vorhanden war. Es hat die richtige Größe. Dies ist nicht der Fall, die Anfangsgröße muss dunkler sein, und jetzt kann ich eine andere erstellen, einen Filter erstellen. Ich zeige dir einen kleinen Trick. Ich könnte den langen Weg gehen, den wir im letzten Video gemacht haben. Füllen Sie zum Mitnehmen, finden Sie es, bearbeiten Sie es, fügen Sie die Helligkeit hinzu und setzen Sie es wieder auf 100. Okay, und das funktioniert. Aber was ich dir einen kleinen Trick zeigen will, ist dieser hier. Sie können mit der rechten Maustaste darauf klicken und einfach duplizieren Der richtige, kein Skalenfilter. Lass es uns duplizieren. Es ist schon unkontrolliert, dass ich nicht mehr im Ausgangszustand bin. Das ist der Ausgangszustand. Gibt es keine Einstellungen? Dieser ist nicht aktiviert und ich habe eine Reihe von Einstellungen. Und was ich tun werde, ist die Helligkeit von dort aus auf 100 zu erhöhen, was nur Standard ist. Nichts traf wirklich zu. Spar es. Lassen Sie uns eine Vorschau anzeigen. Es werden Probleme geben. Sie sehen also gut aus. Oh, funktioniert nicht. Wenn das Einblenden ewig gedauert hat, zwei Dinge falsch daran. Lass uns zur Größensache gehen. Beobachten Sie. Was passiert. Warum dauert es so lange? Irgendwelche Ideen? Alles, mach hier eine kleine Pause, werde darüber nachdenken, warum das Laden ewig dauert, lass es uns zurücksetzen und es ein bisschen probieren. Die dunklen, dann ist es das. Es blasst ein und wird dann größer, das müssen wir reparieren. Du klickst also auf den äußeren Elternteil, du sagst Kabeljau wachsen. Du kannst sie sehen. Dazwischen gibt es eine kleine Lücke. Ich wollte diese Dinge zur gleichen Zeit machen, die gleiche Gruppe bekommen. Jungs kommen schon, los geht's. Gehe jetzt zur Vorschau. Sehen Sie sich das alle an. Das ist unser halbes Problem. Lass uns das andere machen. Warum? Geht es nicht wieder in die dunkle Farbe zurück? Es könnte dir so gefallen. Es könnte das Tolle sein, das könnte der tolle Designeffekt sein , den Sie mögen. Aber nehmen wir an, ich möchte, dass es zurückgeht. Was machen wir? Du hast es verstanden. Also muss meine Ungroup es auch tun, weil wir im Moment Outgrow diese zusätzlichen Teile haben. Okay, es hat die Waage und den Filter, aber mein unbekannter Wuchs oder irgendein anderes hat die Waage. Ich werde hier dasselbe tun, wo auch immer es jetzt ist, nämlich 100% Helligkeit. Ich würde gerne noch einen für den Filter machen. Unten hier. Ich möchte, dass es hell ist. Und wer erinnert sich, wie dunkel ich es gemacht habe? Ich kann mich nicht erinnern. Es waren ungefähr 50%, oder? Ich sollte mal nachsehen. Ich werde es tun, lasst uns alle, weil es irgendwie mit 100 angefangen hat. Okay. Von meinem Roll-Over oder meinem Wachsen. Und jetzt sage ich: Geh zurück zu 50. Sie werden großartig sein. Nach so viel Zeit. In Bezug auf das Timing muss es getestet werden. Ich weiß, dass es um Core geht. Ich sage immer etwa ein Viertel der Fälle. Das gilt im Allgemeinen für Bewegungen im Maßstab, manchmal mit Kapazität und Helligkeit. Es ist nicht so, weil es ein bisschen mehr darum geht, es zu überprüfen. Speichern wir es. Lass uns einen Blick darauf werfen. Hubba. Hubba. Ja. Ich denke, es ist in Ordnung. Es ist allerdings ziemlich cool. Ich liebe es. Ordnung, es hätte also schon ein Symbol sein können. Ich kann es jetzt in ein Symbol verwandeln , indem ich mit der rechten Maustaste darauf klicke und sage, nun, lass es uns hier machen. Wir könnten daraus ein neues Symbol erstellen und ihm einen Namen geben, um es wiederzuverwenden. Aber das habe ich schon von früher bekommen und möchte es nicht verwechseln. Und eine andere Sache, die ich Ihnen zeigen möchte, ist, dass die Eltern ausgewählt wurden, gehen Sie darauf ein. Und ich sage, lass uns darauf eingehen, wenn du komische Probleme findest, okay. Es kann oft sein, dass dieser, der diesen Indirection-Trigger beeinflusst , für R1 arbeitet und perfekt funktioniert. Wer auch immer es auslöst, k, was auch immer der Action-Trigger ist, das ist der Wrapper auf der Außenseite, der zu diesen Dingen gegangen ist, wird darauf zutreffen. Möglicherweise möchten Sie feststellen , dass Sie es nur mit den ausgewählten Elementen tun möchten. Nicht alle von ihnen. Okay? Manchmal funktioniert der Unterricht. Ich möchte, dass dies für alle Klassen gilt. Okay, also lass uns zu gehen, lass uns das machen. Dies wird keine Phase sein, in der das für Sie funktioniert. Aber schauen Sie sich im Moment ein wenig an. Wenn ich den Mauszeiger darüber bewege, kannst du sehen, dass sie es alle tun, zumindest passiert das Wachstum in k bei allen Klassen. Ich will es in diesem Fall nicht, es besteht die Möglichkeit, dass wir es tun. Wenn es also einen Nullpunkt gibt, den wir mögen, Mann, macht er nicht das, was ich will. Spielen Sie mit diesen drei herum. Nur die, die ich ausgewählt habe und die nicht zutrifft. Dieser Effekt spielt keinen der anderen ab und gilt nicht für alle gleichzeitig. Oder dieser hier mit ihm löst es aus. Mach diese Dinge. Jedenfalls. Ordnung, das ist es. Das ist unser Bild, das beim Rollover in Webflow mit Dan eingeblendet und größer Rollover in Webflow mit Dan eingeblendet und größer wird. In Ordnung, das ist es. Wir sehen uns im nächsten Video. 73. Parallax scroll bewegen in Webflow: Hallo zusammen. In diesem Video machen wir das wie Parallax-Scroll-Dinge. Ich scrolle auf und ab und schau, es sieht so aus, als ob die vorderen irgendwie unscharf sind. Ich zeige dir, wie das geht. Es heißt Parallaxe. Es wird lustig, weil es irgendwie miteinander verbunden ist, nicht nur die Animationsfähigkeiten , die wir in den letzten Videos gelernt haben, sondern auch einige der anderen Fähigkeiten , die wir im Laufe der Kurs. Wir werden uns die Positionierung und Überlauf und den Z-Index und andere Dinge ansehen. All dieses Vorwissen wird es uns ermöglichen , dies relativ einfach zu tun. Ordnung, lass uns einsteigen. Lassen Sie mich Ihnen zeigen, wie es geht. Okay, zuerst habe ich eine neue Seite erstellt, nur um alles getrennt zu halten. Ich habe ein Navi hinzugefügt, weil ich der Meinung bin, dass eine Seite ein Elektrofahrzeug benötigt. Und sie helfen uns auch dabei, einen Kontext dafür zu geben , wo wir auf der Seite scrollen. Damit das funktioniert, fügen wir unseren Abschnitt hinzu, okay, ich gebe diesem Abschnitt einen Namen. Ich nenne es Sektionswolken. Ich gebe ihm eine Höhe. Ich werde ihm keine Höhe geben. Kann es so lassen wie es ist. Es ist in einem Container. Und während wir es dann mit dem Container machen könnten, ist es besser, ein Div darin zu platzieren und all unsere Animationen hinzuzufügen. wir unserem div einen Namen, damit wir ihn leicht wiederfinden können , klinische Div-Clouds. Ordnung, fügen wir unsere verschiedenen Elemente in Ihr Asset-Panel ein. Ich habe meine bereits importiert, aber Sie werden in Ihren Portfolio-Übungsdateien eine finden, die Cloud vorne und hinten genannt wird. Bringen Sie beide rein und bringen Sie dann beide rein. Okay. Da ist also noch ein Typ, er ist da. Es gibt also SVGs, was irgendwie gut ist. Nun, es ist großartig. Der Kommentar ist allerdings wirklich groß. Standardmäßig können Sie Bilder zu 100% so breit sehen , wie breit sie sein können? Denn in SVG kann jede Größe sein oder mag es einfach massiv. Also wird es scrollen. Ziehen Sie es auf eine geeignete Größe herunter. Wie groß ist angemessen? Ich habe das einfach zu einem Illustrator gemacht, einige Wolkenstile gefunden sie dann als SVGs für euch exportiert , damit ihr alles benutzen könnt. Das nächste, was ich brauche , ist ein bisschen Text. Ich hätte es hier exportieren können. Okay, habe ich, aber dann dachte ich es ist besser , editierbaren Text zu haben. Du kannst es ändern und es ist nicht für immer repariert. Also lasst uns das hinzufügen. Also gehe ich zu deinem Textblock, hattest du in irgendeiner Weise. Und ich werde es stylen. Ich werde das beschleunigen, weil wir das Laden von Texten gestylt haben und es unterrichtet haben und ich bin eigentlich bevor du gehst. Es wird also meinen Text geben, die Wolken, und ich werde ihn stylen. Du wartest dort. Okay, was machen wir jetzt? Und wir haben zwei, das muss so sein. Es funktioniert nicht. Wie kriege ich das drauf? Weil ich das will, richtig. Ich möchte, dass das noch oben drauf ist. Wie machen wir das? Erinnerst du dich, dass du es schon mal gemacht hast? Paula's, du bekommst einen Goldaufenthalt, wenn du dich zumindest an den Begriff gerade Zahl erinnern kannst , du musst nicht einmal wissen, wo er ist, in Ordnung, wenn du dich daran erinnerst, es ist diese Person hier, die sich positioniert haben muss, auf absolut gesetzt, dann kann ich es bewegen. Was ich aber tun werde, ist, dass ich ihm einen Klassennamen gebe oder wir können es danach machen. Wenn Sie sagen, Position absolut gibt ihm ein klassisches Bild. Ich nenne dieses eine Bild Wolken vorne. Hervorragend. Okay, er ist absolut positioniert , damit ich sie bewegen kann. Was ist eine Sache, an die ich mich erinnern muss , denken Sie daran, dass Dan etwas gesagt hat, als wir absolut gemacht haben, es gab noch etwas anderes, an das Wenn du dich an den Moment erinnerst, in dem es den Körper benutzt. Okay, und das ist in Ordnung. Solange Sie nichts über diesen Clouds hinzufügen , wird andernfalls alles aufgezeichnet. Also, was du sagst, ist das Elternteil, was mein Fall ist, das Div trübt dich, sagte ich zu einem Verwandten. Okay, jetzt ist diese Person relativ zu diesem Wrapper. Diese Referenz wird immer kommen, also ist sie nett und nützlich. Jetzt können wir einfach damit herumspielen , um es in die richtige Position zu bringen. Verbringen Sie nicht zu lange hier, um es perfekt zu machen, denn es gibt so ein Test-Wiederholungs-Chick-Ding wenn Sie das tun, und holen Sie sie einfach grob, wir brauchen sie in etwa der richtigen Größe, experimentiere und passe dich danach an. Er wird da sein. Ich werde das nicht bewegen. Ich könnte, ich werde einen Hintergrund haben, einen Mittelweg und einen Vordergrund. Der Mittelweg ist im Allgemeinen Don't Touch. So wird er zum Mittelweg. Also dieser hier, ich werde dasselbe bei einem Klassennamen machen, Bild, Cloud, Beck. Klicken Sie auf. Okay, und ich werde sagen, dass du eine absolute Position von Rix bist , mein Text ein bisschen. Okay, ich werde es ein bisschen runterziehen. Meinen Text könnte ich auch absolut machen, oder ich könnte einfach etwas Padding hinzufügen, damit Sie wissen, was Sie tun möchten. Ähm, es ist irgendwie, als würde man es von oben nach unten drücken , würde gehen. In diesem Fall spielt es keine Rolle, Qu, ungefähr so etwas. Ordnung, wenn du alles hast, hat jeder einen ClassName, was eine der Zeilen ist. Es muss sich in einem Container , den wir verwenden können, weil wir in früheren Containern die Animation zu jedem dieser Container hinzugefügt haben . Was wir tun werden, ist es jetzt den Eltern hinzuzufügen, okay, also wählen wir das Elternteil aus, das Def Clouds heißt. Ich werde in Richtungen sagen, ich möchte den Elementauslöser auslösen. Die, die ich will, ist die, die besagt, dass das beim Scrollen in der Ansicht ziemlich cool ist. Während Sie in der Ansicht scrollen, bitte. Kannst du etwas für mich tun? Okay, das Problem damit, es gibt im Moment kein Scrollen. Wenn ich eine Vorschau sehe, kann ich nichts scrollen , weil es nein gibt. Es ist nicht lang genug. Was wir also tun werden, ist es für den Moment einfach vorzutäuschen. Okay, ich zeige dir, wie man es zum Laufen bringt, wenn es wie hier oben ist. Aber im Moment drücke ich es einfach runter. Sie haben also Wolken und sagen, dass Div-Clouds einen Teil der Marge haben werden. Okay? Es ist unten außerhalb des Bildschirms und fügt einen Chunk hinzu, keine negativen und positiven Ergebnisse , damit ich an diesem Ding vorbeiscrollen kann, damit es cool aussieht. Wenn Sie an Ihrer eigenen Website arbeiten, haben Sie mehr Inhalte, an denen Sie vorbeiblättern Moment mehr Inhalte, an denen Sie vorbeiblättern können, indem Sie sie mit riesigen Mitogenen vortäuschen. Großartig. Also haben Wolken und Richtungen bereits angefangen zu singen, die besagten, dass beim Scrollen, oder wir machen es auf der Schriftrolle, wir werden eine Aktion der ausgewählten Aktion ausführen. Wir haben nichts. Okay, also erstellen wir eine benutzerdefinierte Animation. Ignoriere das, aber im Moment werden wir uns die Grenzen ansehen. Das soll nicht da sein. Ich habe dieses Video jetzt ungefähr dreimal aufgenommen , um es einfach zu machen. Es ist nicht einfach. Das ist also der einfache. Es läuft ziemlich gut. Ich habe mich an Tangenten festgefahren, damit es fantastisch aussieht. Er wird es aussehen lassen, okay, gut. Das Prinzip quer. Du hast auch nichts. Also sagen wir, wir werden eins hinzufügen. Ich gebe ihm einen Namen. Ich nenne das Cloud Scroll. Hervorragend. Und was passieren wird, ist, dass es 0% und 100% gibt. Was am Ende passiert, ist die Animation hier startet wenn 0% bedeutet, dass gerade wenn ich sehe, wo du bist, kurz bevor sie auf den Bildschirm kommt, das hier ist. Und wenn es an dieser Kiste vorbei ist, posten die Kiefer hier. Okay, hier sind 100% fertig. Wenn du es nicht verstehst, lass es uns tun. Okay, das heißt, wenn ich will, dass sich diese Wolken bewegen, ok. Jetzt gehen wir weg von der ganzen Sache. Wir sagen, ich möchte, dass diese Cloud hier eine Aktion hat. Es wird sich alles um 0% bewegen, was hier vollständig ist. Wo ist es? Ich möchte, dass es unten ist. Diejenigen, die dir am nächsten sind, sollten anfangen. Okay, ich werde meins etwas nach unten bewegen. Wie weit wirst du es heute probieren. Es wird einen Down geben und dann bei 100% unten haben mir die Hände schon einen gegeben, ich möchte, dass er oben ist. Und wenn Sie es ziemlich weit bewegen, gibt es die richtige Art von Dip nach vorne. Es bewegt sich wahrscheinlich schneller über die Kamera. Nun, wenn sie Co freilassen können, lass es uns testen. Sie können es hier in der Vorschau anzeigen. Also klicke darauf. Wenn es also gerade auf den Bildschirm kommt, ist es überall, wo ich es hinstelle. Wir können es nicht wirklich sehen. Es spielt also keine Rolle, wo Sie es auf 0% setzen, muss nur in der Nähe sein , wo Sie es haben möchten, weil es es nicht einmal sehen kann. Aber wenn es durch die Schriftrolle kommt, kann ich 35, 35, 31% davon sehen. Siehst du, dass es vorbei ist. Jetzt. Es funktioniert, ich sehe, dass es ziemlich sprunghaft ist. Es ist lustig an meinem Scrollrad. Okay, ich habe eine Maus. Ich verwende ein Logitech-Scrollrad. Ich liebe es die meiste Zeit, oder? In diesem Fall macht es diese Sprünge und es sieht eklig aus. Mein Trackpad auf meinem Mac , sieh dir dieses St. an Ich habe nichts anderes gemacht als mein Trackpad. Es sieht gut aus. Schau dir das an und sieh dir mein Scrollrad an. Baba, Baba benutzt ein bisschen nervös. Das wird wahr sein , wenn die Leute Ihre Website auch tatsächlich nutzen. Es ist also ein bisschen schade. Manchmal sieht es auf den Computern einiger Leute nicht so hübsch aus , aber mein Trackpad ist nett. Das ist also irgendwie so, oder? Wir werden mehr tun. Aber im Grunde hast du es. Das ist näher, also beginnt es nach unten und bewegt sich nach oben. Lass uns den Hintergrund machen. Wir verlassen diesen Kerl, weil er der Mittelweg ist. Er sieht aus, als würde er etwas tun , obwohl er nicht viel tut. Dies, weil es weiter hinten sein wird, was derzeit nicht der Fall ist. Reparieren wir das zuerst? Ja, lass uns das zuerst reparieren. Dies ist oben auf diesem Bild. Wer erinnert sich, wie ich die Dinge übereinander gebracht habe? Du erinnerst dich, dass es einen Z-Index gibt. Also lass uns das machen. Also dieses Bild Cloud zurück, stellen Sie sicher, dass es da rauskommen muss, speichern Sie es, kehren Sie zu meinen Stilen zurück. Okay, das hat nichts mit der Animation zu tun. Ich klicke hier auf diesen Typen, Bild namens Beck. Er ist bereits absolut, was mir Zugriff auf den Z-Index gibt. Also sage ich, dass du 11 bist. Dieser hier nimmt Cloud. Ich kann diesen Index nicht sehen. Also werde ich das Relative verwenden, weil relativ bedeutet, dass es dir diese Optionen bietet. Aber er hält seinen Platz, hält seinen Platz im Code. Und ich werde sagen, dass du es willst, was darüber liegt. Dieser Typ hier kann den Z-Index bereits sehen weil wir sie absolut gemacht haben. Er wird drei Jahre alt. Ordnung, da ist mein Layering. Nun diese Person, wo kommt die Cloud zurück? Bringen wir ihn zum Animieren. Wenn ich ihn also ausgewählt habe und hier reingehe, gibt es nichts Vergleichbares, weil vielleicht der Elternteil anfängt, er ist der Auslöser. Er kontrolliert irgendwie alles. Wenn Sie dann in die Cloud gehen, scrollen Sie. Okay, jetzt können wir uns jetzt die einzelnen Teile ansehen, diese Person oder als meine Tics-Cloud und diese hier, es war einfacher, sie hier im Navigator auszuwählen. Ich füge ihn hinzu muss es um 0% dorthin verschieben, wo ich sie haben möchte. Wenn Sie möchten, dass sie so aussehen, als wäre er im Hintergrund, starten Sie sie oben und verschieben sie nach unten. Während dieser Typ tiefer angefangen hat und sie hochgezogen hat. Das ist das Gegenteil. Also werde ich sagen, dass du ein bisschen höher bist und einfach nicht so viele Emotionen durchmachst. Das muss schnell gehen und es sieht so aus, als wäre es in der Nähe. Das muss langsam aussehen, passt hinten rein. Eine Menge Tests. Da ist er also. Ich werde hinten noch eines davon hinzufügen. Es hat es mir nicht automatisch gegeben. Also werde ich bei einem Umzug Plus sagen , weil ich das ausgewählt hatte, es hat Cloud zurück. Okay. Und ich werde es auf mich übertragen, wenn ich runterkomme. Also Nummer wo ist es, vorne oder hinten oben? Er ist ein bisschen höher und wir brauchten den Boden. Er ist ein bisschen niedriger. Wird das funktionieren? Lass es uns versuchen. Schalten wir die Live-Vorschau ein. Benutze vielleicht nicht das Mauspad, den Maus-Tracker. Sie schauen, sie haben alle ein anderes Timing, Parallaxe gemacht. Wir werden noch ein paar andere Dinge tun, nur um es aufzuräumen, aber du kannst mit deinem Z-Index in die Stadt gehen. Möglicherweise haben Sie zehn verschiedene Ebenen. Und du wirst zehn verschiedene Dinge hier drin haben. Und die Dinge, die weiter hinten liegen, müssen sich langsamer bewegen und sich von oben nach unten bewegen. Und die Dinge, die vorne sind , müssen sich bei allen Geschwindigkeiten schneller bewegen , je nach Geschwindigkeit Amine, dieser hier vorne beginnt hier und endet dort. Wenn Sie möchten, dass etwas näher am Bildschirm und Phosphat ist, muss es nur weiter oben enden. Es würde sich im Z schneller bewegen und x muss höher sein. Wie fühlen wir uns dabei? Okay, es wird keine Vorschau von zwei in der Vorschau angezeigt, wenn ich das Scrollrad benutze und meine linke Hand benutze. Es ist ziemlich cool. Dies ist ein Vorschaumodus, da dadurch die Boxen entfernt werden. Hey, Parallaxe ist großartig. Mein Problem. Ich zeige Ihnen einige Beispiele für Indien. Aber so wie ich weiß, fühlt es sich an , als hätten alle das gerade entdeckt und ich liebe subtile wie diese. Da bewegt sich etwas, aber die Parallaxen, bei denen es so ist, ich weiß nicht einmal, ob ich auf Dinge klicken soll, ein Scrollen und es ist sehr verwirrend. Die Leute können mit Parallaxe ein bisschen verrückt werden, wenn Sie das dürfen, zum Beispiel wenn Sie Lynn Sphere in Photoshop lernen und einfach Linsenblendeffekte auf alles setzen. Es ist okay. Sie können alles parallaxieren, aber wissen Sie, dass Sie nach einer Weile einige Benutzertests durchführen, um sicherzustellen, dass die Leute tatsächlich arbeiten können. Ihre Website ist nicht so, wie es Mein Gott getan hat. Alles ist verwirrend. Okay, lass uns ein bisschen mehr tun. Ich möchte nur irgendwie, ich weiß nicht, ob du bei mir bist und du sagst, das schien Sinn zu ergeben und du hast es geübt. jetzt inne, übe es. Das Video ein paar Mal. Es dauert eine Weile. Ich möchte, dass du glücklich bist. High-Five. High-Five. Okay. Gehen wir noch weiter, denn Sie werden wahrscheinlich noch einige andere Fragen haben und einige andere Dinge, die ich Ihnen zeigen möchte, aber ich möchte mich wie ein Punkt fühlen. Wir sind fertig. Es war gut, dass es funktioniert hat. Schauen wir uns ein paar andere Dinge an. Sie können einige coole Dinge mit physischem Aufwand machen, um sie zu bearbeiten. Du musst dich also an dich erinnern, wenn du hier draußen bist, du wirst zu den Div Clouds gehen. Du kannst den kleinen Kerl sehen, den kleinen Blitz, um hineinzukommen, sonst kannst du ihn nicht finden. Okay. Die Seitenauslöser sind einfacher zu finden, wenn ich hier bin. Wir ignorieren das alles und das ist der Teil, den wir darin genannt haben. Und jetzt sind wir irgendwie beim Animationsteil. Was wir auch tun könnten, um bei der Tiefe zu helfen, ist, dass Sie damit herumspielen können. Aus Animationen heraus machen wir im Moment keine Animation. Wir werden nur sagen, dass ich zurück in meinen Styles bin. Ich bin eigentlich diese Frontwolke. Ich tue so, als gäbe es ein bisschen unscharfe Tiefenschärfe. Ich werde sagen, dass Sie einen Effekt einiger Filter haben einen Effekt einiger Filter und einer von ihnen hier drin ist blau. Also kann ich es leiser stellen. Der Trick ist, dass du verstehst, was ich versuche zu tun. Ich versuche es zu mögen, es unscharf zu machen. Es ist wahrscheinlich besser , wenn du noch ein paar Elemente hast und dann ein paar Running hat. Aber ja, es sieht irgendwie so aus, dann löst man das aus ist okay. Sieht es so aus, als wäre es vielleicht von schlechter Qualität. Ich möchte offensichtlich verschwommen sein , ohne dass es wie verrückte Unschärfe ist. Mit diesen beiden kannst du herumspielen. Zwei sind gut für mich. Und es bedeutet nur, dass es sich bei der Vorschau irgendwie unscharf anfühlt. Einige Teile sind scharf. Siehst du, dass es draußen etwas verschwommen ist. Magst du das? Du kannst nach oben schauen. Andere Dinge, die ich dir zeigen möchte. Jetzt tun wir das nicht in diesem Fall, aber vielleicht möchten Sie die zu erstellenden Div-Wolken festlegen, aber nicht in der Animation. Und hier können wir den Overflow auf hidden setzen den Overflow auf hidden , sodass Sie hier nur Dinge darin sehen können. Du kannst damit spielen, wie groß das ist. Sie müssen es vielleicht nur einclipsen , weil sagen wir , dass große Wolken abkühlen, aber es ist so, Sie haben hier einen Teil darunter. Ein weiterer Abschnitt, der nicht betroffen sein muss, da er alles abdeckt. Du kannst es an eine Grenze wie meine binden. Das Scrollrad funktioniert nicht wirklich, aber mein Trackpad schon. Es ist wunderschön. Wie macht man es schöner? Glätten, Glätten ist meiner Meinung nach standardmäßig aktiviert. Schauen wir uns das an. Klicken Sie auf das übergeordnete Div. Schnappen wir uns die Animation. Gehen wir hier rein. Also glatte Dinge weiter. Jetzt ist es auf 50% bei ausgeschaltetem Gerät Schalten wir es vollständig ein. Eigentlich das wohl beste Beispiel. Und voll und ganz wahrscheinlich nicht das, was wir wollen, aber es gibt uns ein Beispiel. Siehst du, dass alles so verlangsamt ist? Schau dir das an. Wenn ich vorbeiscrolle. Siehst du, ob ich wirklich schnell scrolle? Nichts passiert wirklich , bis das besagt, dass es ewig dauert, bis ich hier scrolle , um aufzuholen. Okay, das ist die Glättung oder wenn es ein bisschen läuft, gibt es nur ein bisschen mehr Realismus, als wäre es nicht mechanisch. Ich kann gehen. Kannst du sehen, dass es langsam aufholt? Wenn ich es auf Null habe, wird es einfach sehr mechanisch sein und wir werden einfach dort sein, wo ich bin. Es gibt also keine Dämpfung. Dämpfen ist so wie ich will. Okay. Sie nennen es Glätten. Was ist gut? Alles ist gut. Ich spiele irgendwo herum, irgendwie in diesem Top Chunk. Die besten 70% igen Fische sehen ganz gut aus. Was ist das für ein Sprung? Das liegt daran, dass niemand eine Website auf halbem Weg lädt. Normalerweise laden Sie hier eine Website. Es ist also ein Sprung in den Vorschaumodus. Und so werden die Clouds verwendet, um die Wolken dahin zu bringen , wo sie sein müssen. Macht das Sinn? Niemand wird diesen Sprung sehen. Ich werde mein anderes Ding los . Wir machen das Letzte. Wie bringe ich es zum Laufen, wenn es ganz oben ist. Also lass uns das jetzt machen, lass es uns brechen. Gehen wir also zu Def Clouds. Lassen Sie uns den Rand entfernen. Wir brauchen immer noch einen Rand unten, denn wenn wir nicht scrollen können, können wir die Scroll-Animation nicht zum Laufen bringen und sie funktioniert irgendwie, oder? Kannst du hier sehen, lass uns zu meinen Arbeiten gehen. Und was Sie hier tun könnten, ist das nächste Stück zu vergessen und einfach Ihre Animation durchzuspielen und einfach hier herumzuspielen , bis Vorder- und Rückseite an die richtigen Stellen bewegt werden. Oder was Sie tun können, ist, dass Sie dies hier tun können, Animationsgrenzen. Sie können also auf eines davon klicken. Und es heißt: Starte die Animation, Nullen enden zu 100% in den Animationen. Schauen wir uns schnell an , was sie damit meinen. Das ist also das, worüber wir in diesem Raum sprechen im Vergleich zu diesem Raum, was tun wir? Es heißt also bei null Prozent, wenden Sie es an, wenn Sie mit der Eingabe beginnen, was nicht funktioniert, weil es vorher funktioniert hat weil wir mit der Eingabe begonnen haben, wir scrollen nach unten. Es ist bereits da, es ist vollständig sichtbar. Es ist vollständig sichtbar. Ich starte die Animation , wenn sie vollständig sichtbar ist. Jetzt hat mich dieser erwischt und du sagst: Oh, ich werde die Vergiftung so umstellen, gestoppt wird, wenn sie austritt. Wissen Sie, wir werden nicht aufhören, wenn es aussteigt, weil es sofort ausläuft. Was wird zu 100% abgeschlossen sein, wenn es anfängt zu beenden. Entschuldigung, ich war verwirrt, es einfach auf diesem zu belassen. Siehst du, es heißt unsichtbar. Das ist mein Ich weiß nicht. Ich will es nicht nennen, aber ich habe es nicht gelesen. Stoppt, wenn es vollständig sichtbar ist, was es ist, und ich möchte, dass es in der Animation ist, um den 100% -Punkt zu erreichen, wenn es vollständig unsichtbar ist. Unsichtbar, was bedeutet, lass uns einen Blick darauf werfen. Völlig unsichtbar heißt, wenn es komplett draußen ist, gehst du, Lass uns zu meiner schönen Schriftrolle gehen. Los geht's. Wir haben es dort auch ganz oben. Okay. Also die einzige andere Sache, ich werde nicht zu viel darauf eingehen, aber hier drin kannst du mit dem Offset spielen. Der Offset bedeutet einfach dieses Ding hier tatsächlich vollständig sichtbar ist, aber es ist schon eine ganze Weile vollständig sichtbar. Als ob oben schon ein Brocken weg ist. Das gleiche gilt, wenn es vollständig unsichtbar ist. Okay, du könntest entscheiden , dass du ein bisschen vorher fertig werden willst . Es ist völlig unsichtbar. Und Sie können diesen Offset bei verschiedenen Prozentsätzen sehen. Spielen Sie damit herum. Es wird ziemlich nerdig, aber du bekommst das meiste von dem, was du brauchst, ohne all das. Möglicherweise müssen Sie jedoch am Offset herumbasteln Ziehen Sie ihn einfach auf die aktuelle St. 80%, um zu sehen, wie die Ergebnisse aussehen. Du bekommst ein Gefühl dafür, wie es funktioniert oder ignorierst es und spielst einfach hier herum. Was ich am Ende mache, ist einfach mehr Zeit hier drin zu verbringen um mit den verschiedenen Zeiten herumzuspielen wo es tatsächlich ist, vorne. Nun, wenn es vorbei ist, was ist, wenn es hier aussieht? Und dann schauen Sie sich einfach an , wie es hier aussieht. Sehen Sie sich an, wie es aussieht. Es ist hier drüben. Vorschau. Das finde ich nützlicher. Nochmals, wenn du das rückgängig machst, okay, nachdem du dieses Ding gezogen hast, wenn ich es ziehe, zählte es irgendwie all diese kleinen Schritte, als gäbe es 1.000 kleine Rückgängigmachen. Ich setze es einfach auf, ich ziehe es einfach zurück. Wir können wahrscheinlich Rektum bekommen. Ordnung, das ist es. Das ist Parallaxe. Letzte kleine Vorschau. Benutze meine Bildlaufleiste, benutze mein Trackpad. Mir gefällt es auch. Das sind die Grundlagen. Wir haben verschiedene Ebenen, verschiedene SI-Indizes und wir haben mit Al herumgespielt. Und was machen wir? Wir haben einen Element-Trigger gemacht. Es ist während des Scroll-Interviews und wir bearbeiten unsere Animation. Sie können es jetzt mit diesen Tools auf andere Dinge anwenden. Um also gute Beispiele für die anderer Leute zu erhalten, hat der Workflow eine coole Sache namens Made in Webflow. Und Sie können Parallaxe eingeben. Parallax kann nicht anders buchstabieren, als Parallaxe, das ist das Wort, das du willst. Und schauen Sie sich die Beispiele anderer Leute an. Okay, schauen wir uns ein paar davon an. Es gibt einfach tolle Beispiele hier, okay? Und sie nehmen irgendwie das, was wir getan haben , und fügen mehr plus M0 plus acht weitere hinzu. Okay, jetzt hoffentlich hast du einige der Tools , um solchen Tutorials folgen zu können. Hall, das ist eine Maus. Ich liebe es. Also schauen wir uns einen anderen an. Dieser hier. Ich liebe diesen. Schau, wie sich die Wolken bewegen. Und es hat Parallaxe. Parallaxe und bewegte Wolken verdoppeln sich. Also weil dieser, oh, 3D und die Parallaxe auch. Weil die Straßen eben sein können. Es gibt super coole. Wenn du das mit uns machst, Dan. Der Kurs ist schon so weit und es sind diese Engel. Ich glaube, wir haben viel getan. Jedenfalls. Jetzt solltest du über einige Fähigkeiten verfügen, um einige dieser Dinge erstellen zu können, indem du anderen Tutorials folgst. Es hat Spaß gemacht, besonders dieses, das wir mit Dingen wie Overflow verbunden haben . Wir haben Dinge gebunden wie, denken Sie daran, dass wir die relative Position positioniert haben, absolute Z-Index ist alles mögliche der absolute Z-Index ist alles mögliche coole Zeug, damit diese Parallaxe funktioniert. Ordnung, das ist es, Parallaxe im Webflow über siehe im nächsten Video. 74. Ist Webflow gut für SEO: Hallo zusammen, ich habe im wirklichen Leben keinen Bildschirmrekorder mehr. Echtes Leben. In diesem Video, über das wir sprechen werden, ist Webflow gut für SEO? Und in diesem Video werden wir darüber sprechen, was SEO mehr ist, was auf Seiten ist und wofür Sie als Workflow-Designer verantwortlich sind ? Das ist Off-Page. Und wer ist dafür verantwortlich? Ja, machen wir beides. Ist also gut für SEO. Ich bin echt überrascht. Ich bin eine einigermaßen kompetente ACO-Person, also mein Vollzeitjob, aber ich habe ein paar Geschäfte aufgebaut. Ja. Im Grunde geht es um ein wirklich gutes Ranking in Suchmaschinen. Okay, also ja, ich war überrascht, als ich zum ersten Mal zu Webflow kam und wie viel sie entwickelt haben, seit sie angefangen haben , was man tun kann, ebenso wie die Anomalie, das ist einfach ein bisschen grundlegendes Zeug. Dies ist jedoch der Fall, wenn Sie über einigermaßen Erfahrung und Suchmaschinenoptimierung oder besser werden möchten und sicherstellen möchten, dass Workflows dazu in der Lage sind. Es ist überraschend, welche Tiefe sie Ihnen ermöglichen. Ich war überrascht, also ja, es ist gut. Wir werden Ihnen in den nächsten Videos zeigen, wie einige der grundlegenden On-Page-Sachen, aber ja, nein, zumindest von mir bin ich besonders beeindruckt von den SEO-Fähigkeiten des Workflows. Lassen Sie uns zunächst über On-Page- und Off-Page-SEO sprechen. Seo, Suchmaschinenoptimierung. Sie wissen wahrscheinlich, was es ist, naja, Ihre Website rangiert in Suchmaschinen. Dafür müssen wir optimieren. Okay, und es besteht aus zwei Teilen. Es gibt On-Page und Off-Page. Als Website-Designer, der Webflow verwendet, sind Sie voll verantwortlich dafür die On-Page-SEO Teil Ihrer Arbeit sein kann und sollte , während Sie an Ihrer Website arbeiten. Das Off-Page ist etwas, das Sie vielleicht tun, aber oft liegt es am Kunden. Der Unterschied besteht darin, dass wir uns auf Seiten, Dingen, die auf der Seite sind, Dinge wie Metatitel, Schlüsselwörter, Alt-Text ansehen werden, Dinge, die relativ einfach zu machen sind. Und dann ist das Off-Page-Zeug Dinge wie das Verlinken auf Ihre Website. Ich habe dich gefragt, ich denke früher im Kurs wie, hey, wenn dir dieser Kurs gefällt, verlinke auf meinen Webflow-Kurs, weil diese schwierig zu bekommen sind, wirklich schwer zu bekommen, aber für unser Portfolio wirklich wertvoll sind. Wenn jemand von einer anderen Seite , vom Blog einer anderen Person oder einer anderen vertrauenswürdigen Website darauf verlinkt vom Blog einer anderen Person oder einer anderen , auf der steht : Hey, dieser Typ ist wirklich gut im UX-Design. Schau sie dir an und es gibt einen Link zu dieser Seite, der unglaublich ist, abseits der Seite. Also ist jemand anderes von Ihrer Website mit Ihnen verlinkt. Das ist ein Beispiel für Off-Page-SEO. Es gibt noch viel mehr, okay, und es ist ein großes Wurmloch, Schwarzes Loch, eines der Löcher, die es zu erkunden gilt. Und das sollte eines der Dinge sein, die Sie tun nachdem Sie Ihre Workflow-Fähigkeiten verbessert haben und Ihr Galen auf der Seite erhalten haben. K soll Off-Page-SEO erkunden. Und ja, es ist ein bisschen wie Top-Dinge, die man tun kann, aber es ist ziemlich, ja, es ist super wertvoll , damit eine Website funktioniert, aber es steckt möglicherweise eine Menge dahinter. Ich liebe es. Ich werde einen ganzen Kurs über Off-Page-SEO machen. Ich mache es die ganze Zeit von meinen Sachen bis hin zu Rank Wells , dass du es gefunden hast? Ja. On-Page-Off-Page-SEO, das wir machen werden , Sie müssen gehen und Off-Page machen , machen Sie einfach weiter und ich zeige Ihnen wo es ist und wo es in allen Workflows zu tun hat. 75. Meta-Beschreibung Titel-Tags Roboter und Sitemap erläutert Webflow: Hallo zusammen. In diesem Video werden wir einige High-Level-SEO für die Website behandeln , okay, nur ein paar Dinge, die Sie tun sollten. Und wir schauen uns auch SEO-Titel-Tags und Meta-Beschreibungen für Ihre Seiten an. Ordnung, fangen wir mit der Website-weiten Suchmaschinenoptimierung an. Wir gehen also zu jeder Website, auf die Sie gehen können Ihre Projekteinstellungen haben eine globale Art von Website-SEO-Tab. Das einzige, was wir hier behandeln werden, ist dieses hier. Ziemlich wichtig. Im Grunde genommen in dem Moment, in dem wir auf diesem Mitglied sind, das auf dieser Art von Entwicklungswebsite, wie eine Staging-Website bevor es einen eigenen Domainnamen bekommt. Was passieren kann, ist Google oder Yahoo oder Bing oder was auch immer andere Suchmaschine kommen kann Website tatsächlich indexiert und möglicherweise bewertet. Das Problem ist jetzt, ist es immer noch in Teilen? Es ist noch nicht bereit für die Hauptsendezeit und ich möchte nicht, dass Google denkt, dass dies der Domainname ist. Als ich die andere Version veröffentlicht habe, werden zwei Versionen davon zu sehen sein, und das ist das Original. Was Sie also tun können, ist Disable zu sagen. Und sie sagen Workflows, Subdomains. Webflow gibt uns also diese Website, die Domain, wir, die Subdomain davon. Sie können also einfach Google sagen, überprüfen Sie bitte nicht diesen Website-Blocker. Und es fügt der Website ein bisschen Zeug hinzu, um zu sagen: Komm nicht hier rein. Es kann zwar ignoriert werden, von Google könnte es immer noch nennen, aber sie werden Sie nicht zu den Suchmaschinen-Rankings hinzufügen . Wenn Sie Ihre vollständige Domain erhalten. Es spielt keine Rolle. Sie können dies eingeschaltet lassen und ausgeschaltet lassen. Es wird einfach nicht zulassen, dass diese Art von Entwicklungsseite durchsucht wird. Dafür ist dieses Roboter-Ding da. Es wird automatisch eine robots.txt erstellt und um User-Agent zu sagen, Google erlaubt es, auf meine Website zu kommen. kann es, aber es ist einfach praktisch, weil du die Seite nicht bewerten und dann mit ihr konkurrieren willst, wenn sie in Zukunft zu ihrer großartigen URL veröffentlicht wird, ich werde hier laufen, ich würde nicht zu viel durchmachen es Lass uns noch eins machen. Schalten Sie das ein, okay, generiert nur eine Sitemap, um es im Moment klar zu machen, und Ihre Website ist ziemlich klein. Suchmaschinen wie Google werden also kommen und in der Lage sein, es ziemlich schnell nach Index und Mittelwert zu indizieren, wie durchforsten und es auschecken und entscheiden können, was auf welchen Seiten steht, was wichtig, worum es geht. Okay, Sie können es einfacher machen indem Sie eine Sitemap generieren. Diese werden immer wichtiger, wenn die Seite riesig wird, okay? Und Sie können sicherstellen, dass die Suchmaschinen wissen, wo sich alles befindet und wie sie alle miteinander verbunden sind. Aber im Moment ist eine automatische Sitemap perfekt. Außerdem gibt es viele Online-Checklisten, die sagen, ist meine Website gut? Und es wird sagen, dass Sie keine Sitemap hatten. Du kannst es einfach anklicken und sagen, jetzt tue ich es. Ordnung, das ist also irgendwie ein Overall für die Seite. Lassen Sie uns näher auf seitenspezifische Dinge eingehen. Also geh zurück zum Designer. Ordnung, also hat jede Seite einige Meta-Informationen , die Sie hinzufügen müssen , damit sie alles sein kann, was sie sein kann, wenn sie in Suchmaschinen wie Google rangiert. Also müssen wir hier zu unseren Seiten oder dieser gehen. Du kannst zu beiden gehen. Jedenfalls. Wir machen es zuerst auf der Homepage und treffen dieses kleine Zahnrad. Dieser Name steht ganz oben. Sie müssen sich keine Gedanken darüber machen, wie Sie es in Webflow referenzieren. Der wichtige ist dieser hier, SEO-Einstellungen, es gibt ein Titel-Tags und eine Meta-Beschreibung. Diese sind sehr wichtig, denn wenn Sie sie nicht auf Ihrer Seite haben, es unwahrscheinlich, dass Sie alles bewerten. Und wenn Sie sie einmal ausgefüllt haben, ist es nicht so, dass Sie absolut anfangen werden, die Nummer eins zu rangieren, aber es ist eines dieser Dinge, bei denen Sie aber es ist eines dieser Dinge, bei denen Sie auf Platz 1000000 stehen können. Was tun sie, wenn du sie nicht reinsteckst? Sie werden hier oben eine Art Suchergebnis sehen. Sie erscheinen tatsächlich in Google-Such-Rankings. Schauen wir uns das an. Sag, ich versuche es, ich versuche es, ich versuche, dafür zu ranken. Das ist es, was die Leute in Google suchen werden und das möchte ich erscheinen. Ich möchte also, dass dies auf meiner Homepage ist, ist mein wichtigster Satz von Keywords. Es ist lokal für mich und es ist die Sache, die ich vielleicht mache. Ich füge meinen Namen hinzu. Okay? Weil vielleicht auch jemand wegen meines Portfolios nach meinem Namen sucht . Ich habe es vielleicht gesehen, als sie mein Portfolio herausgenommen haben. Ich möchte, dass auch mein Name klingelt. Kannst du da sehen? Das ist es, was unsere Kollegen. Ich habe hier in Google gesucht, okay, nach Webdesign limerick, es gibt einige Karten. Also möchte ich vielleicht gehen und sicherstellen, dass mein Büro einen bestimmten Ort hat. Stellen Sie sicher, dass mein Büro tatsächlich in Google Business registriert ist , okay, und Sie sehen hier unten all diese Ergebnisse. Diese Leute können Sie eine Art Webdesign sehen, Webdesign Limerick, WebAssign Limerick. Aber Design Limerick, kannst du sehen, wie wichtig dieses Titel-Tag ist? Wie dieser, Webdesign Irland, okay? Alle sicheren und besten Unternehmen in Limerick. Das ist also das Titel-Tag , das Sie für jede Seite eindeutig sein müssen. Wenn ich also weiter mein Portfolio für den ADEA-Kajakclub nenne, würde ich es das ADEA-Kajak-Webdesign-Projekt in Limerick nennen. Es ist also einzigartig, aber es enthält auch meine Keywords. Es kann also schwierig sein, wenn Sie Hunderte von Seiten haben, aber es ist sehr wichtig, weil es keinen Sinn macht, dies auf jeder Seite zu haben. Es wird Ihre Website nicht mehr Webdesign Limerick machen , die Suchmaschinen wissen einfach nicht , was auf dieser Seite steht oder einzigartig ist. Also habe ich vielleicht Seiten, auf denen es UX, UI oder Grafikdesign ist. Der allgemeine Sinn ist also , dass es nur um Design geht. Und es dreht sich alles um Limerick. Vielleicht habe ich ein paar verschiedene Bereiche. Ich bin in der Grafschaft Limerick, aber ich bin in einer anderen Stadt, vielleicht in einem Dorf. Okay. Das ist also der Titel. Du kannst es dort sehen. Die Beschreibung ist genauso wichtig. Ist dieser Brocken hier unten, wird er abgeschnitten, sodass Sie nur eine bestimmte Anzahl von Charakteren haben können . Ich kann mich nicht mehr genau erinnern, was es war. Sagt es dir, macht die Länge 155-300, es entscheidet, dass du nicht entscheiden kannst, wie viel es abschneidet. Es schneidet es einfach ab, wenn es nötig ist. Also hier ist eine etwas längere Beschreibung. Also nochmal, ich finde, du kannst es schwer finden, wenn du am Anfang bist. Schauen Sie einfach nach, geben Sie die Keywords ein , wissen Sie, wenn es sich um eine Branche handelt , zu der Sie nicht gehören und für die Sie verantwortlich sind. Gehen Sie raus, suchen Sie und sehen Sie dann, was andere Leute tun. Okay, wie können Sie sehen, dass wir Limerick entworfen haben erscheint auch in der Beschreibung, also stellen Sie sicher, dass es sich darin wiederholt. Aber das ist eher die Zelle. Das bringt die Leute wie hoch oben. Hier muss ich sein. Und hier bestätigen die Leute, dass ES genau das ist, wonach ich suche. Ich brauche eine E-Commerce-Website oder eine kleine Website. Schauen Sie sich das an, besonders wenn es sich um eine Branche handelt. Es ist einfacher für mich, weil ich mich für Webdesign interessiere. Aber wenn ich eine Website für die Käserei machen würde, wäre das einfach schwierig. Sie müssen nach Sachen aus der Käserei suchen und bei den ausgegebenen Beschreibungen helfen. Nun, obwohl ich es für die Käserei gemacht habe, ging ich zu ihnen und sagte: Okay, ich brauche Beschreibungen dieser Hauptseiten. Könnten die fünf High-Level-Seiten sein, und ich brauche sie, um sie zu schreiben. Angesichts der Schlüsselwörter, die ich brauche. Sie müssen eindeutig sein oder die Länge haben, die ich brauche, und ich bringe sie dazu, es zu schreiben, vielleicht schicke ich ihnen einen Artikel wie man eine gute Meta-Beschreibung schreibt, oder ich kann es schreiben, weil das so ist nur ein paar Kunden, die wir mögen. Ich schreibe das nur auf die Website eines Vaters. Das schreibe ich selbst. Okay, schreib das auf, stell sicher, dass da gute Keywords drin sind. Hier unten. Suchmaschinen oder diese hier unten, Sie können mögen, dass Sie einfach das gleiche SEO-Titel-Tag und die gleiche Beschreibung verwenden können ACO, dieses Open-Graph-Zeug taucht in Dingen wie Facebook und Twitter auf. Hast du sie gesehen? Und es gibt einen Link zu einer Website, er ruft ihn auf. Sie nennen es Open Graph oder ist diese Art von Meta-Titel und Meta-Beschreibung macht Sie auf jeder einzelnen Seite einzigartig . Wenn Sie Blog-Beiträge schreiben, stellen Sie sicher, dass es sich um einen Ausschnitt daraus handelt. Es kann ein Ausschnitt daraus sein. Das ist in Ordnung. Eines war einzigartig, solange es um Ihr Titel-Tag und Ihre Meta-Beschreibung geht . Ordnung, ich werde es speichern und das EBIT schließen, richtig, das ist Meta-Titel und Meta-Beschreibung. Stellen Sie sicher, dass es auf jeder Seite angezeigt wird. 76. Was ist Image im Webflow: Hallo zusammen. In diesem Video werden wir über SEO für Bilder sprechen. Okay, es heißt Alternativtext. Nimm es, das du hinzufügen kannst, um das Bild zu beschreiben. Suchmaschinen mögen es. Wir werden auch über dekorativen Text sprechen. Können Sie außerdem Alternativtext zu Hintergrundbildern hinzufügen? Jetzt kannst du es, es gibt einen Weg, das zu umgehen. Ordnung, lassen Sie uns darüber sprechen, was es ist, was Sie dort einfügen sollten, in Ordnung, Alternativtext, Sie bearbeiten zwei Bilder. Warum bearbeitest du das Bild? Nennen sie es alt, weil es ein alternativer Text ist. Was wird geladen, was wird hier angezeigt? Das Bild wird nicht geladen, okay, das ist der alternative Text, also nennen wir es Alt-Text. Noch wichtiger ist, dass es für Personen gedacht ist, die das Bild nicht sehen können. Sie haben Screenreader und es wird sie ihnen vorlesen. Das kann man ganz einfach lesen. Es heißt, es heißt, ich bin Daniel, Full-Service-UX - und Webentwickler-Designer. Besser noch, wir kommen hier hin und drehen uns um den Kreis. Es weiß nicht, was drin ist. Okay, also was wir tun müssen, um diesen Menschen zu helfen, und auch für Suchmaschinen möchten Suchmaschinen wissen, dass Ihre Website für Menschen mit Sehbehinderung zugänglich ist . Und es gibt ihnen auch einen Hinweis darauf , worum es auf der Website geht. Wenn dies der einzige Text auf der Seite ist , um den es sich gerade handelt. Okay, es läuft gut, was hat es sonst noch mit dieser Seite zu tun? Und wenn das ein Designer ist, der bei lepto arbeitet, okay, es hilft dem Browser, zu wissen, worum es auf dieser Seite geht. Um es zu bearbeiten, wählen Sie es hier in den Bildern oder Sie können es in Ihrem Assets-Panel tun. Sie können sehen, dass es dasselbe Bild gibt. kann zum COG gehen und ich kann meinen Text hier hinzufügen, oder ich kann es hier machen. Ein sehr ähnlicher Weg. Du kannst sagen, benutze es aus der Säure oder ich kann hier mein eigenes benutzerdefiniertes hinzufügen. Kannst du es einfach gut schreiben, um zu wissen , was du schreiben sollst? Geben Sie hier nicht unbedingt ein paar Schlüsselwörter ein, als ob es nicht schadet. Ich bin Designerin. Das ist was ich. Ich bin Designer, der am Laptop arbeitet , muss vielleicht sagen, dass ich ein Kostüm trage. Er trägt ein Kostüm. Ja. Es wird helfen, es so zu beschreiben, wie ich es mache Die beste Methode ist, die Augen zu schließen und zu versuchen es jemandem zu beschreiben, der beschrieben wurde, dass Sie es sehen können. Schließen Sie ihre Augen und versuchen Sie dann sich selbst laut zu beschreiben, was es ist. Da arbeitet Daniel Scott und ein Laptop. Ich mache es. Schließ meine Augen. Er arbeitet an einem Mac-Laptop und trägt ein Raupenkostüm mit Regenbogen. Das ist nützlicher Alttext, weil es den Leuten hilft zu verstehen was auf der Website vor sich geht. Vielleicht wundern Sie sich warum. Vielleicht ist es nicht wirklich angemessen , dieses Kostüm zu tragen. Das könnte völlig richtig sein, aber wir tun es weil es Sehbehinderten hilft. Google hilft gerne Sehbehinderten und wir möchten ein gutes Ranking erzielen. Stellen Sie also sicher, dass es Schlüsselwörter gibt. Nicht alles stimmt nicht? Limerick, schreibe kein Webdesign. Vielleicht kann es in einem Webdesign auf einem Laptop entworfen werden. Ja, es wird etwas schwierig, wenn Sie auf Ihrem 50. Bild sind, aber überspringen Sie keine Bilder, gehen Sie durch und fügen Sie Alternativtext zum Einkaufszentrum hinzu. Es gibt eine Zeit, in der wir einen Blick darauf werfen und Sie müssen es nicht tun, wenn es dem Screenreader keinen Wert bringt . Lass uns einen kleinen Blick darauf werfen. Wir haben Animationsgeschmack. Es ist nicht in diesem. Du bist genau da. In Ordnung, dieses Bild hier macht dieses Bild, indem es diskutiert, was es ist und was es tut. Warum sieht es aus? Orange verschwommene Wolke. Wird das den Wert der Website erhöhen oder dient sie nur zur Dekoration? Die Wolken sind ein bisschen wie ein Ion, weil es eine Art Wolke ist und ich kann es erklären. Es ist sehr einfach zu erklären. Aber nehmen wir an, es ist nur eine große Star-Grafik, nur ein bisschen Swish oder so. Was du tun kannst ist zu sagen, das ist eigentlich nur dekorativ, okay? Es bedeutet nur, dass Sie sehen können , dass es nur begrenzten Informationswert hat. Es bedeutet nur, dass es übersprungen werden kann. Lassen Sie sich einfach als dekoratives Bild beschreiben , ohne dass Sie so aussehen müssen , als wäre es eine orangefarbene Wolke, als würde man jemandem, der bezahlt wird, alles erklären , was es ist. Es wird nicht zur Website hinzugefügt, helfen Sie, es zu erklären. Und klar Wolken und wie kann ich meinem Webdesign-Geschäft helfen , ein gutes Ranking zu erzielen, Cloud-basiertes Webdesign, oder vielleicht tut es das, aber das ist die Alternative. Sie können es entweder in einer richtigen Beschreibung entweder auf das Asset schreiben oder ablegen, es tatsächlich in sich selbst auf die Seite oder es einfach als dekorativ markieren. Und noch einmal, gehe durch und mache jedes einzelne Bild, das ich mache , während ich es hinzufüge. Denn sonst, wenn du bis zum Ende wartest , tust du es einfach nicht. Eine Frage, die ich oft bekomme, ist fällig. Ich mache keine zwei Hintergrundbilder. Kannst du es überhaupt als Hintergrundbild machen? Das kannst du nicht sagen. Er ist eigentlich ein Hintergrundelement, wo ist es? Ähm, ich kann mich nicht erinnern. War es eine Heldenabteilung? Es war Hintergrund da ist es da. Es ist nicht etwas, das Sie auch Alternativtext hinzufügen können , indem Sie den Bildschirm neu definieren, es überspringt ihn einfach. Wenn Sie sitzen und viele davon als Hintergrund, sagen wir mal hier drüben, nehmen wir an, Sie haben sich dafür entschieden. Wir haben dies absichtlich als Bild hinzugefügt , weil ich möchte, dass es einen guten Alternativtext hat. Ich werde einen großartigen alten Text hinzufügen erklärt, was es ist, weil ich wollte, dass er Teil der Struktur der Website ist. Ich möchte, dass die Leute es über diese Screenreader lesen können . Und ich möchte, dass Google sieht, wie all diese Bilder oder in Bezug auf Design, dieser Website muss es um Design gehen. Wenn Sie dies also als Hintergrundgrafik hier festgelegt haben , weil es einfacher ist, dies zu übertreiben. Es ist knifflig. Und umgekehrt, wenn Sie etwas wollen, das ein Hintergrundbild ist, aber Sie möchten, dass es vom Screenreader und von den Suchmaschinen gelesen wird , können Sie dieses Ding dort machen, wo es tatsächlich ist ein Ding und du hast die Sachen absolut oben positioniert. Sie müssen entscheiden, wie wichtig diese Bilder für die Suche nach Rankings sind. Viele von ihnen haben Sie, weil ich es in diesem Fall irgendwie als Symbol eingerichtet habe , damit ich die harte Arbeit leisten kann das übertrieben zu machen, und ich kann es zuschneiden. Aber wir lernen, wie man Bilder zuschneidet weil ich möchte dass sie im Textfluss stehen und nicht als Hintergrundbild ausgeblendet werden. Ordnung, das ist Alternativtext für Bilder. 77. SEO Schlüsselwörter in Überschriften und URLs in Webflow: Hallo! In diesem Video werden wir über Keywords in der Suchmaschinenoptimierung sprechen. Ich zeige Ihnen, wo sie hin müssen und einige Tools, wie Sie gute auswählen können. Ordnung, lasst uns einsteigen. Okay, also wo sind sie hingegangen? Es ist einfach in den Überschriften, okay, da brauchst du gute Schlüsselwörter. Aber auf der eigentlichen Seite, Browsern und anderen guten Orten eigentlich nur Keyword-Wissen ist eigentlich nur Keyword-Wissen sehr nützlich, um es in Ihre alten Texte zu schreiben, nur sicherzustellen, dass Sie die richtigen Wörter verwenden und andere Wörter, die Sie verwenden könnten, weil Sie vielleicht den Webdesign-Limerick satt haben, okay, also Seiten, und schauen wir uns an, was wir haben. Kontaktiere uns. Es ist schwierig, es ist nichts weiter als die Kontaktseite, aber auf diesen anderen Seiten kann ich mir ein gutes Keyword ansehen. Der erste ist, dass ich einen Unterordner namens Portfolio habe. Portfolio ist ein guter Name dafür. Denken Sie daran, das wird Dans erstaunlicher Slash-Portfolio-Slash auf website.com sein In diesem Fall haben wir einen Tag entworfen, ein Kajakclub-Portfolio in Ordnung sein könnte. Wird jemand nach einem Webdesign-Portfolio suchen ? Vielleicht. Okay. Ich glaube, ich mag die Idee des Slug K, weil genau das passiert. Dies ist der Name , den Webflow-Benutzer verwenden. Es ist also nicht wirklich wichtig. Dies wird im Internet veröffentlicht und Google verwendet, um Ihre Website zu verstehen. Was ist in diesem Ordner? Ich sage „Website-Design“. Das wird die URL dort sein. Und dann wird es danach alle anderen Seiten geben. Das ist also ein guter Ort , um Keywords zu setzen. Ich möchte sagen, dass, wenn dies veröffentlicht wird und die Leute darauf verlinken und ich es ändere, es die Links unterbrechen wird . jetzigen Zeitpunkt ist es in Ordnung, da niemand auf die Website verlinkt. Ich verlinke nicht darauf. von niemandem sonst. Es ist also einfach zu ändern, speichern Sie es. Schauen wir uns die anderen an. Schauen wir uns diese Seiten hier an. Lass uns eigentlich auf die Seite gehen und zum Zahnrad gehen. Also nochmal, das ist der Slug K, also das ist der Seitenname innerhalb des Workflows. In dieser Sache können gute Keywords eingesetzt werden. Kannst du sehen, dass es unter Webdesign steht? Und dann wiederhole ich mich, wir haben es entworfen, also sollte ich das vielleicht nicht tun. Und das, obwohl es darum geht, worum es auf der Website geht, ist es nicht besonders gut. Die Leute werden nicht nach Tageskajaks suchen. Ich möchte nicht für einen Tag mit Kajaks ranken. Ich möchte nicht, dass mich jemand, der Kajak fahren will, sucht. Also das ist wahrscheinlich zu lang. Aber so etwas ist viel nützlicher , um zu beschreiben, was ich hier mache. Ich mache keinen Club für einen Deer KX, oder zumindest bin ich kein Ort zum Kajakfahren, aber ich bin definitiv ein Ort für kleine Unternehmen und Limerick, um Webdesign zu machen, ich muss wahrscheinlich ein paar Worte, die da sind. Es scheint ziemlich lang zu sein, aber zu wissen, worauf q hier eingehen soll, auch in das Titel-Tag und die Beschreibung, kann schwierig sein. Wovon erhalten Sie Keyword-Informationen? Ich zeige dir, was ich mache. Ich nutze den Bezahlservice. Möglicherweise können Sie kostenlose finden. Ich weiß, dass Sie besonders wie dieser hier, SEM Rush, eine siebentägige Testversion machen können. Sie haben vielleicht nur ein kleines Projekt, verwenden Sie einfach die Testversion und beenden Sie sie dann. Aber für langfristiges Webdesign benötigen Sie so etwas. Es gibt einen Link auf dem Bildschirm hier. Wenn Sie sich bei ACM Rush anmelden möchten, ist es das, was ich liebe. Es ist ein Affiliate-Link, also bekomme ich eine Provision, wenn Sie sich anmelden Fügen Sie den Link auch in die Klassenprojekte ganz unten ein. Wofür es unter anderem nützlich ist, ist das Finden von Schlüsselwörtern. Wenn ich diesen Kurs schreibe, sind wir okay für Webflow. Ich hoffe immer darauf, wenn ich entscheide, wie ich die Website nennen soll, ich denke, ich nenne sie Webflow. Nehmen wir an, ich habe ein Video, das ich über Bilder machen möchte, über Hintergrundbilder. Also tippe ich es einfach in so etwas ein. Und ich werfe einen kleinen Blick darauf. Und ich könnte es Hintergrundbilder nennen. Aber kannst du hier sehen das Hintergrundbild weiß es nicht, das war's. Es hat 3D-Ansichten, 30 Suchanfragen pro Monat, was nicht sehr hoch klingt, aber es ist irgendwie so, dass für diese Art von obskurer Blutfluss an sich nicht dunkel ist, aber wenn es kein Auto ist Versicherung oder etwas Ähnliches. Aber Sie können hier sehen, ob ich dieses Ding namens How to add background image to blood flow nenne, es gibt nicht ganz das Doppelte des Suchvolumens. Also nenne ich es auch so. Wenn ich nur nach Vorschlägen für Remember Our Cheese Factory suche , können Sie hier Schlüsselwörter eingeben und Ideen bekommen, wonach die Leute suchen , denn es hat keinen Sinn es in etwas zu stecken , das falsch ist , nach dem die Leute einfach nicht suchen. Es könnte so sein, wie du es nennst. Ich rufe unser Wohnzimmer in der Lounge an. Meine Frau und meine Kinder wissen nicht , wovon ich spreche. Die Lounge. Du meinst das Wohnzimmer wie ja. Wenn ich also hier in Irland Renovierungsarbeiten durchführe, nenne ich es nicht Lounge. Und sagt mir auch coole Dinge wie diese, dass es einfach ist , auf diese Weise zu ranken , weil es da draußen nicht viel Konkurrenz gibt, nur andere super nützliche Dinge. Ich genieße so etwas wirklich und es hilft mir wirklich, wenn ich Seiten erstelle , um die richtige Sprache zu finden und die richtigen Keywords zu erhalten. Erstens, da ich viele Adobe Photoshop Photoshop-Kurse mache , ist das eines der Dinge, die ich mache. Lass uns Photoshop-Schulungen machen. Denn als ich anfing , habe ich es so genannt, weil ich das getan habe und das habe ich auf meine Seiten geschrieben. Du sagst, Großartig, schüttle es aus. Ordnung, für das Photoshop-Training suchen hundert und 70 Leute danach. Cool. Lass uns einen Blick darauf werfen. Wenn ich endlich Adobe Photoshop verglichen habe, wird das für Boom sorgen. Leute benutzen das Wort „kostet viel mehr als Training“. Aber wenn ich meinen InDesign-Kurs und meine InDesign-Schulung sage , sind sie im Grunde gleich. Einige von ihnen drehen um. Einige von ihnen nutzen eher Schulungen als Kurse. Seltsames Zeug, das man solchen Tools herausfinden kann. Und es ist erstaunlich, wenn Sie zu einem Kunden gehen und anfangen können diese Dinge zu verstehen und ihm zu helfen die richtigen Seiten für seine Website zu erstellen. Möglicherweise fehlen ihnen einige großartige Seiten, die helfen. Sie sind wirklich gut durchsucht und sollten eine eigene Seite auf dieser Website haben , um dies zu erklären. Ordnung, also wenn Sie an Ihrem eigenen Projekt oder Ihren eigenen Kunden arbeiten , machen Sie sich ein Bild davon, welche Keywords Sie verwenden könnten, und stellen Sie sicher, dass Sie sie auf dieser Website mit Ihrem Alternativtext verwenden auf dieser Website mit Ihrem Alternativtext Ihre Titel-Tags oder Meta-Beschreibungen und in den Slugs für diese URLs in den Überschriften. Und damit Sie nicht immer wieder dasselbe wiederverwenden , verwenden Sie Variationen davon. Dafür ist das auch gut. Ordnung, meine Freunde, das ist mein Scherz über Schlüsselwörter. Ich habe das Zeug geliebt. Ordnung, weiter zum nächsten Video. 78. Kannst du den Code selbst gehosteten Webflow exportieren: Hallo zusammen. In diesem Video werden wir diskutieren Können Sie Code aus Webflow exportieren? kannst du absolut und es ist wirklich brauchbar. Es exportiert alle Dateien, das CSS, das JavaScript, alles. Sie müssen dafür sorgen, dass dies auf Ihrem eigenen Host funktioniert, oder vielleicht an einen Entwickler übergeben , der Ihre Website ein bisschen weiter bringen kann. Okay, lass uns reinspringen und einen Blick darauf werfen, in Ordnung , was der Code hier oben ist. Es gibt einen kleinen Exportcode. Ich habe meine Website geöffnet und der Designer, ich kann den Code exportieren, ihm eine Sekunde geben und Sie können HTML und CSS sehen , je nachdem, was Sie tun müssen, Sie könnten einfach den HTML-Code kopieren und CSS und JavaScript in Ihre eigene Datei. Okay, weil alles da drin ist. Die eine Sache ist jedoch, dass Sie, wenn Sie kein aktualisiertes Workspace-Konto haben, nur einen Teil davon sehen und es nicht exportieren können. Ich zeige dir in einer Sekunde , wo das ist. Aber nehmen wir an, wir haben, ich arbeite im Kern. Sie nennen es den Kernarbeitsbereich. Also einer von unten, ich kann eine Zip vorbereiten, sie krank herunterladen. Ordnung, ich habe einen Ordner. Ich werde den Zip darin speichern. Hier ist die Zip-Datei und da ist der Ordner. Und du wirst sehen, dass es ziemlich nett ist. Sie können sehen, dass alle unsere Seiten meine Homepage sind, welche die Indexseite ist. Sie können meine Kontaktseite sehen, die Animation, die wir erstellt haben, Fehlerseiten. Und Sie können vielleicht diese Subdomain sehen, während der Ordner, den wir erstellt haben, früher Portfolio hieß, wir haben im letzten Video Webdesign geändert. Und da sind diese beiden. Sie werden feststellen, dass die Entwürfe auch hier sind. Also etwas, auf das man achten sollte. Jetzt können Sie das Ganze kopieren und auf Ihren eigenen Hosting-Server einfügen. Warum würdest du es tun? Es ist billiger es auf Ihrem eigenen Hosting-Server zu tun. Die Nachteile sind jedoch, wenn Sie hineingehen und dies in einem Texteditor öffnen, sagen Sie VS Code oder Sublime oder Dreamweaver und beginnen Sie mit der Bearbeitung. Du kannst es nicht wieder in Webflow einfügen. Es ist eine Einbahnstraße. Wenn der Client jedoch zurückkommt und eine Änderung wünscht, können Sie hier wieder reinkommen, eine Änderung vornehmen und sie dann erneut exportieren und auf Ihren Server hochladen , solange Sie noch für diesen Arbeitsbereich bezahlen Konten, die einen anrufen, das zeige ich dir in einer Sekunde. Nun, um etwas detaillierter auf die Probleme mit dieser speziellen Site einzugehen . Du kannst es hier unten sehen, wenn es tatsächlich geladen wird, wird dich warnen. Okay, in diesem Fall würde hier alles funktionieren, außer dem Formular auf der Kontaktseite. Webflow-Formulare sind ziemlich schwierig, alleine online zu erstellen. Sie scheinen einfach zu sein, aber es gibt ein paar Schecks und Malfoy merkt an, dass das weitergehen muss. Sie können hier sehen, dass Exporte native Formularfunktionen enthalten. Sie können das Formular verwenden, wenn Sie wissen, wie Sie es selbst einrichten. Die Teile, die ich dir gegeben habe, oder du könntest sie gegen etwas austauschen. Es gibt andere Dienste wie vielleicht MailChimp oder andere Dienste , die Sie auf die Seite stellen können. Es gibt vielleicht einen Weg, der große wird sein, wenn du ihn hier sehen kannst? In den nächsten Abschnitten dieses Kurses werden wir uns mit CMS und E-Commerce befassen. Sie funktionieren jedoch nicht wenn Sie den Code exportieren und selbst hosten. Es gibt viele Überprüfungen, Datenbanken und Validierungen, die durchgeführt werden müssen , damit dieses Zeug funktioniert. Also für eine ästhetische Seite, perfekte Formen, können wir das umgehen. Aber wenn wir anfangen, Dinge zu tun, die über CMA verteilt sind, wie ein Blog mit einem Kunden kann es mit einem Kunden hochladen oder ein Kunde kann mit der Arbeit daran beginnen. Oder wenn Sie mit E-Commerce arbeiten möchten, müssen Sie das Hosting von Webflow, den Exploit-Code, verwenden . Werfen wir einen kurzen Blick darauf. Ich gehe zurück zu meinem Armaturenbrett. Für mich habe ich also den Kernarbeitsbereich. Du bist vielleicht auf der Stata , der kostenlosen. Möglicherweise müssen Sie auf dieses Kernmodell upgraden. Das bedeutet, dass Sie , wenn Sie irgendeine Zeit in Webflow verbringen möchten, diese benötigen, weil Sie mehr als nur zwei gehostete Websites benötigen, an denen Sie gerade arbeiten möglicherweise plus den ganzen Rest. Und einer von ihnen ist der Export von Code. Eine weitere gute Verwendung für die Exportcode-Option ist auch dann, wenn Sie nicht die Person sein werden , die sie hostet weil Sie nicht wissen, was das bewirkt und wie es geht. Möglicherweise arbeiten Sie mit einem Entwickler zusammen, der das tut. So können Sie einen Großteil des Frontends entwerfen, einschließlich des niedrigen JavaScripts, um es tatsächlich lebendigen Webflow zu machen , tun Sie es für Sie. Dies wäre völlig angemessen , um es dann einem Entwickler zu übergeben , um diese Datenbank oder E-Commerce-Funktionalität hinzuzufügen . Es ermöglicht Ihnen, viel mehr von der Arbeit zu übernehmen. Und wenn Sie wie ich sind, Ihnen bei OCD darum, alles in Einklang zu bringen und perfekt zu sein und es nicht einfach jemand anderem zu überlassen , hoffentlich Gutes zu tun. Sie können einen Großteil dieser Frontend-Arbeit für das Projekt erledigen und diesen Ordner dann einem Entwickler übergeben . Sie werden auch Webflow-spezifische Entwickler finden . Nun, das ist zu einer Branche geworden, in der es Divs gibt, die Leuten helfen , die wie ich sind, diese Frontend-Sachen zu erledigen, aber wirklich nicht wissen, wie die Back-End-Datenbanken machen sollen Unterstützung, weil wir dieses Design nehmen und etwas tun wollen, was mit Flow vielleicht nicht möglich ist, kurz bevor wir loslegen. Es ist einfach interessant, wenn Sie es noch nicht angeschaut haben, Sie können hier sehen, dass wir dieses Div mit der darauf angewendeten Klasse namens Textlogo gemacht haben . Das heißt, können wir es sehen? Wie ich geschaut habe, ist es nirgends. Schauen wir uns das an. Wir haben ein H1 namens Hero. Da ist ein Span-Tag drin. Werfen wir einen Blick auf den Exploit-Code. Ordnung, schauen wir uns das an. Da ist mein Div für das Navi und Sie können sehen, dass ihre Schließungen hier geöffnet werden. Okay, und wo ist dann mein Held? Da ist es da. Das ist mein offenes Ende des Erbes, das ich zum Abschluss gebracht habe. Und drinnen ist etwas namens Who's my heating? Da ist es. Da ist mein H1. Es gibt auch eine Menge anderer Sachen hier. Dies wird von Webflow bearbeitet. Im Grunde hängen sie alles an. Das ist am Anfang. Ich kann mich nie erinnern. Sie haben einen W Hi Fanon eingesetzt. Das ist etwas, das du nicht gemacht hast, das sie hinzugefügt haben, damit dieses Ding funktioniert. Und da ist meine Klasse, die ich gemacht habe, genannt Hitting hier. Da ist es. Da ist mein Text. Ich habe diese kleine Span-Klasse hinzugefügt. Es ist also interessant. Span-Klasse dreht einfach dieses kleine Ding namens Designer. Es ist immer noch im H1. Kannst du sehen? Aber es dreht sich um Designer und wendet diese als sekundär bezeichnete Klasse an. Wenn Sie ein bisschen HTML und CSS kennen, ist das einfach. Wenn Sie neu in diesem Bereich sind, ist es wirklich interessant und zu sehen, wie sich das alles irgendwie entwickelt, und ich wünschte, ich hätte geschrieben, ist ordentlich. Html, ist das. Schau dir das alles so schön an. gleiche gilt für das CSS. Sie werden sehen, dass es eine Mischung aus, siehe diese hier, dieser Checkbox gibt. Ich habe das nicht geschrieben, weil das ein schwuler W-Bindestrich ist, aber du wirst viele Sachen finden, die du geschrieben und bearbeitet hast . Okay. Lass uns einen Blick darauf werfen. Da hast du es. Ich habe den Absatz gestylt und diese Dinge getan. Ich style mein A, was eigentlich die alten Links sind. Ich habe dieses Ding namens Hero Section gemacht und Overflow sichtbar gemacht. Ich bin mir nicht sicher, was ich dort gemacht habe. Section Nav ist meine Sektion. Okay. Für das Navi und alles, was ich getan habe, war es eine Hintergrundfarbe von Weiß zu machen, fff, schau ein wenig durch. Schau, da ist mein Button und der ganze Code , den ich benutze, um es so fantastisch wie es ist zu machen, um auch einen kleinen Blick auf den Export zu werfen. Es ist einfach interessant. Das ist also die Homepage für 4.4. Ich möchte nur Fehlerseiten anzeigen. Schau dir das CSS an, ist es schön aufgeschlüsselt. Das ist der, den ich gemacht habe. Dies ist normalisiert, was nur dazu beiträgt, dass es in verschiedenen Browsern sehr gut funktioniert . Und das ist der Webflow , den sie für uns geschrieben haben, als wir eine Navigation hineinziehen und der einfach magisch funktioniert. Das liegt daran, dass sie eine Reihe von Klassen darauf angewendet haben , damit es funktioniert und wir mussten keine Bilder fließen lassen. Sie können sehen, dass alle großen, kleinen und mittleren Größen unser schönes Favicon sind. Javascript. Javascript ist nützlich für das Frontend und die Anweisungen. Also alle Dinge vom Typ Leg Mobile Nav, Dropdown-Menü für diese Art von Interaktion für die Benutzer werden mit dem JavaScript erledigt. Und das ist mein Unterordner. Ordnung, das ist es, das ist es, Code aus dem Workflow zu exportieren . 79. Wofür werden nur Links in Webflow gelesen: Hallo zusammen. In diesem Video schauen wir uns diesen schreibgeschützten geteilten Link oder den schreibgeschützten Link zum Teilen an. Sogar Sie können diese Kopie erstellen. Es schien, als würden die Leute sagen, ich brauche deine Hilfe, sie bekommen einen Link, er ist schreibgeschützt. Sie müssen eine Vollversion von Webflow durcharbeiten. Sie können Ihre Website überprüfen, frechen Code, überprüfen, was vor sich geht, und Ihnen Feedback geben. Ich sage dir, was los ist. Völlig verrückt. Bewege es, aber es ist schreibgeschützt. Wenn sie das schließen, wird es dein Original nicht kaputt machen. Deshalb ist es der schreibgeschützte geteilte Link. Es ist super nett. Ja, lassen Sie mich Ihnen zeigen, wie Sie es in Gang bringen und Ihnen ein bisschen mehr Details darüber zeigen. Habe ich dir gerade das Ganze im Intro gezeigt? Ich glaube, das habe ich gerade getan. Es gibt noch ein bisschen mehr, um das zu besprechen, aber ja, los geht's. Du bist willkommen. Okay, um den Link zu bekommen, gehst du hier hoch. Also geteiltes Projekt und es gibt zwei num dieses Jahr schreibgeschützte Links. Lass es uns kopieren. Werfen wir einen kleinen Blick darauf, was gemacht wird. Ich schicke das an jemand anderen weiter. Okay. Also tue ich so, als wären sie jemand anderes. Ich bin Jane. Und Dan hat mir den schreibgeschützten Link geschickt , weil er Hilfe braucht. Okay. Er sagt, er fragt, hey, sieh dir dieses Bild hier an. Ich weiß nicht, wie die abgerundeten Ecken aufgetragen werden. Ich muss sie ausschalten. Kannst du Jane helfen? Und Jane hat diesen Link? Und kannst du sehen, dass wir tatsächlich in Webflow sind, was cool ist. Jane muss nicht bei Webflow angemeldet sein oder ein Konto haben. Okay, Jane kann einfach nach Hause gehen. Lass uns einen Blick darauf werfen. Ich kann im Vorschaumodus ausschalten und schauen, es ist eine voll funktionsfähige Version des Workflows. Das schreibgeschützte bedeutet nur, dass, wenn ich hier Änderungen vornehme , das Original nicht aktualisiert wird, was super cool ist. Okay, ich kann hier reingehen und sagen, Ordnung, sieh mal, was los ist. Ich kann all diese schließen und sagen, was ist blau? Es ist blau. Okay Dan, es gibt eine Klasse namens Image Hero, bei der du den Radius auf 200 setzt, entweder tot zurücksetzt oder auf 100 setzt. Okay, es gibt einfach keine Möglichkeit, es zu speichern, aber es ist eine voll funktionsfähige Version des Workflows, damit die Leute helfen können. Du kannst in Gruppen und Foren fragen, Webflow hat auch eines, okay, es heißt discourse.workflow.com. Veröffentlichen Sie die Kommentare dieses Videoposters in einer der Bring Your Own Laptop-Gruppen. Und obwohl ich sie nicht alle selbst erreichen kann, habe ich jetzt Hunderttausende von Studenten. Die Foren, in denen Gruppen sind voller Ego-Leute , die gerade lernen und den Kurs durchlaufen haben. das auch sagen, wenn Sie eine Frage sehen, von der Sie denken, könnte ich das wahrscheinlich klären, oder es würde Spaß machen, das herauszufinden, dort nachzuschauen, nach dem schreibgeschützten Link zu fragen und einen Blick darauf sehen Sie, ob Sie anderen Menschen helfen können, sich gegenseitig zu helfen. Ordnung, das war's. Eigentlich einer der Orte, über die man hier oben dorthin gelangen kann. Sie können es auch über Ihr Dashboard abrufen. Du kannst hier reingehen und sagen, dass Scheren egal ist, auf welche Weise ich den schreibgeschützten Link auf Shared einschalte, Hilfe erhalte und anderen Leuten helfe. Es ist eine schöne Welt. Ordnung, das war's. Wir sehen uns im nächsten Video. 80. Stilmanager und cleaning: Hallo zusammen. In diesem Video zeige ich dir, wie du all deine Klassen aufräumen kannst, all die Stile, die du in diesem Kurs gemacht hast, okay, ich habe 13, die einfach nirgendwo verwendet wurden. Ich kann sie alle loswerden. Wir sind in diesem Style Manager. Es ist nützlich, wenn Sie eine Website fertigstellen, die in die Domain aufgenommen wird , oder wenn Sie sie an einen Entwickler senden. Und Sie möchten sicherstellen, dass es so sauber und aufgeräumt wie möglich ist. Lassen Sie uns etwas leichter darüber sprechen und Ihnen die Grundlagen geben. Aber lassen Sie uns etwas genauer darüber sprechen. Ordnung, es ist sauber. Es ist der Style-Manager. Wir waren schon ein bisschen hier. Okay, es wird mir alles zeigen ich auf dieser Website gemacht habe oder dass der Workflow in meinem Namen gemacht wurde , weil ich vergessen habe, ihn zu benennen. Und Sie können sehen, wie ich 11 davon live habe , die nirgendwo auf der Website verwendet wurden. Also klicke ich auf Aufräumen. Und das einzige Problem dabei ist, es hängt davon ab, wie Sie arbeiten. Möglicherweise erstellen Stile, die Sie möglicherweise in Zukunft verwenden werden. Denken Sie daran, wie Rand links, Rand rechts, unterer Rand, oben aussieht. Das könnte durchgehen und all diese töten und du könntest sie später für mich verwenden. habe ich nicht getan. Ich habe diese Absatztexte, die nicht verwendet wurden. Ich habe diese Combo-Klasse namens button box-shadow , die nie benutzt wurde. Alles Haufen Sachen. Also kann ich sie jetzt durchgehen. Warte mal. Du Kumpel. Ich habe Buddy nicht benutzt. Nun, dieses Zeug, aus dem ich gemacht habe, wie Schlagen und Körper, das ich einfach nicht benutzt habe und ich habe sie nicht einmal gemacht Webflow hat sie in meinem Namen gemacht , weil ich etwas geändert habe. Dann habe ich entweder auf Rückgängig geklickt oder mich für das Titel-Tag entschieden. Es wird, tut mir leid, das HTML-Tag, das diese hat, ich habe es wahrscheinlich mit dem Körper gemacht. Okay, und dann habe ich einfach vergessen, die Klasse zu löschen , dass ich ein kalter Körper bin. Du nimmst allerlei Müll. Es hat es aufgeräumt und es macht nichts anderes als sauberer. Und hier wird es nicht versuchen, Klassen vorzuschlagen die nirgendwo verwendet wurden und während dieser Exportphase, okay, nehmen wir an, ich exportiere das , um es woanders zu hosten. Es gibt nicht viele Klassen, in die Entwickler gerne am Kopf kratzen, entscheiden, wo das verwendet wurde oder sie fangen an, es zu benutzen, weil sie sagen: Oh, du hast es geschrieben, muss nützlich sein . Und das war auch nicht so, als wir hier drin sind. Der Style Manager eignet sich sehr gut für die Suche. Wir haben uns das irgendwie angesehen. Deshalb verwende ich gerne das Wort „ Text sagen“ , bevor ich beschreibe, was es ist. Weil es mir all die verschiedenen Textkurse zeigt , die ich für meinen Malunterricht gemacht habe. Nicht viele. Okay, es ist wirklich praktisch, sie einfach durchsuchen zu können. Die andere Sache ist, dass du hier vielleicht etwas hast, das dir gefällt, wann habe ich das geschrieben oder weiß ich es nicht. Ich werde was finden. Zeckenfeld, das ist ein schrecklicher Name, was habe ich getan? Nun, vielleicht ist es kein Fehlername. Es ist viel los damit. Was habe ich gemacht, damit das Formular etwas findet, nicht während Sie auf die Startaufstellung drei warten, zum Teufel ist das. Schauen Sie sich das an. Wo habe ich es benutzt? Sie können sehen, dass es auf einer Seite namens Animationstests verwendet wird. Schauen Sie sich das an. Raster drei, die hier reingehen. Sie geht zurück zu hier, klicken Sie darauf, während Raster drei, Sie sind hier drin . Da ist es. Gut drei. Und was ist Grid Drei, um es zu schließen , es macht nicht viel. Es wurde angewendet. Was macht es? Dadurch wird mein Raster drei Spalten breit und nur null Zeilen. Also, wenn ich gehe und die entfernte Klasse lösche , wird sie irgendwie auf den Standard zurückgehen. Es ist nicht das, was ich will. Ja, gut, Three muss bleiben, aber ich könnte es Grid-Animationstestseite nennen. Okay, also los geht's. Den Style-Manager werde ich vor der Bereinigung rückgängig machen. Oh, ich kann eine Bindung an die Seite nicht rückgängig machen. Wenn ich die Seiten wechsle, die Rückgängigmachung gelöscht. Okay. Also gehe ich zurück. Geh zurück. Okay, es ist für immer vorbei. Lass uns eine Klasse erstellen und sie löschen. Also werde ich eine Klasse namens axes erstellen. Mach es einfach, um eine globale Klasse namens Ding zu teilen. Okay, ich muss es machen. Ich dachte: Oh ja, es wird großartig. Es wird eine Breite von 100 haben. Okay, und genau das wird es bewirken. Und später denke ich, ich brauche das Ding eigentlich nicht. Also werde ich gelöscht. Sie können in die Stile gehen und es sollte unten als nicht alphanumerisch erfolgen. Du kannst sie so bestellen, wo sie kann. Aber sie stehen in der Liste der Kaskaden, dem kaskadierenden Stylesheet. Das Letzte, was ich gemacht habe, ist, dass dies die einzige ist, bei der die kleine Linie nicht vorhanden weil diese kleinen Zeilen hier nur zeigen, wo sie angewendet wurde und auf welchen anderen Seiten sie angewendet wurde. Also dieser hier, er wird auf nichts angewendet, weil ich ihn gelöscht habe. Also kann ich einfach hierher gehen und löschen gehen. Während Sie in Raster drei feststellen werden, heißt es hier: Klicken Sie darauf. Ich kann nicht löschen, tickt das? Während dieser hier unten sagt, du warst gut, bereinigt, in Ordnung, also solltest du das tun, bevor du eine Website fertigstellst, sie Client schickst, sie auf ihren Haupthost hochlädst, ob es sich um Webflow oder auf Ihrer eigenen Domain oder bevor Sie es einem Entwickler übergeben. Ordnung, das ist es, das ist der Style-Manager und das Aufräumen von Stilen. 81. Verwendung deines eigenen Domainnamens in Webflow: Hallo zusammen. In diesem Video werden wir etwas für unseren eigenen Domainnamen veröffentlichen . Es ist der aufregendste Teil. Hier ist es. Daniel Scott, webdesign.com. Es ist live, die Leute können es sehen. Es hat eine gute 60 URL ist für mich bei weitem der aufregendste Teil dieses gesamten Prozesses. Als ob es live ist, können die Leute es sehen. Es ist erstaunlich, wenn es dein erstes Mal ist, wenn du viele Websites erstellt hast, es ist immer noch ziemlich aufregend. In diesem speziellen Video zeige ich Ihnen, wie Sie es automatisch mit etwas wie GoDaddy oder genau wie mit GoDaddy machen. Und im nächsten Video zeige ich Ihnen, wie Sie Ihre benutzerdefinierte Domain manuell mit einer anderen Person einrichten . Aber die automatische Version in Webflow ist ziemlich schick. Ordnung, kaufen wir einen Domainnamen und verbinden ihn mit unserer Workflow-Seite. Zunächst gehen Sie zu Publish und Custom Domain. Klicken Sie auf den Link, der sich darunter befindet. Und eines von zwei Dingen wird passieren. Wenn Sie immer noch ein kostenloses Konto für Ihre Website betreiben. Bei diesen Daten müssen Sie zumindest auf die Basisdaten aktualisieren , da sie dann benutzerdefinierte Domänen zulassen. Sonst steckst du bei diesem fest. kannst du absolut gebrauchen. Es sieht nur ein bisschen seltsam aus, okay, also wenn du es einmal aktualisiert hast, wird es ein bisschen mehr so aussehen. Ich zeige dir, okay, dasselbe. Klicken Sie auf die Schaltfläche. Und es führt Sie zu den Projekteinstellungen, denen Sie springen können , wenn Sie möchten. Kannst du es dort sehen? Es steht unter Publishing. Ich bin in meinem Portfolio. Ich füge eine benutzerdefinierte Domain hinzu. Und das lässt mich jetzt irgendwie wissen, weil ich diesen Lageplan habe. Wenn du dort eine bestehende Domain gestoppt hast, hast du vielleicht schon deinen dub, dub, dub dot Dan is awesome.com und du musst im Video ein bisschen weitermachen für Leute, die habe keinen Domainnamen. Ich werde das zuerst durchgehen, bevor ich es hier hinzufüge. jetzt einen Domainnamen kaufen, gibt es einige automatische Versionen über den Workflow, und das ist total cool. Gu arbeitet nicht und mein Land aus irgendeinem Grund, genauso wie es nicht ist. Also werde ich GoDaddy benutzen. Jetzt sehen Sie hier auf dem Bildschirm einen Link , der mein Affiliate-Link zu GoDaddy ist. Wenn Sie sich also bei ihnen anmelden und meinen Link verwenden, sie mir eine Finder's Fee, haben mir geholfen, mich und die Dinge, die ich tue, zu unterstützen. Andernfalls können Sie direkt zu GoDaddy gehen. Ich werde nicht beleidigt sein oder Google benutzen. Es könnte in Ihrem Land funktionieren, aber ich werde die GoDaddy-Route machen. Nun, welches Metall werden Sie kaufen, wenn Sie bereits woanders ein Konto haben, Sie können es von dort kaufen und dann in dem Video weitermachen, in dem wir die vorhandene Domain tatsächlich hinzufügen, aber wir müssen kaufe es zuerst. Ich kaufe meinen ganz schnell. Wir machen es zusammen, weil es Spaß macht, Domainnamen auszuwählen. Ordnung, also gehe ich Papa und hier oben oben, es erlaubt mir, einen Domainnamen auszuwählen und danach zu suchen. Die Website ändert sich. Es sollte einfach genug sein, herauszufinden, wie man einen Domainnamen auswählt. Möglicherweise müssen Sie sich anmelden oder ein Konto erstellen und sind dann verärgert, weil jemand die.com bereits hat und Go Daddy wird durchgehen und Ihnen eine Reihe von Alternativen für Domainnamen is.co geben , okay? Offensichtlich sind Dotcoms die beste. Die Guten sind oft weg. Eine Diode oder Co könnte also eine gute zweitbeste sein. Es gibt viele Generatoren in Bezug auf Domainnamen-Generatoren, und sie könnten Ihnen Vorschläge geben, was Sie natürlich für einen guten Vater halten könnten. Er ist ziemlich gut darin, es durchzustehen verschiedene Arten von Aussterben hier. Das Einzige, worauf Sie achten sollten ist, dass Sie im ersten Jahr nachschauen, denn manchmal sind diese so , als ob Dot Tech für das erste Jahr großartig sein könnte, aber dann können Sie sehen, dass jedes zweite Jahr 70$ kostet. was in Ordnung sein könnte, je nachdem, was Sie möchten. Aber es gibt immer so, oh, Sie bekommen es für 0,01$, solange Sie es für das erste Jahr tun , für eine zweijährige Registrierung. Denk einfach daran. Und es gibt viele coole Sachen. Es wird durchgehen und dir verschiedene Optionen bieten. Offensichtlich muss man bei den beförderten vorsichtig sein. müssen Sie nicht, aber beachten Sie nur, dass die Leute dafür bezahlen, Ihnen diese zu zeigen. Ordnung, also werde ich gehen und es mit meinen Kreditkartendaten bezahlen . werde ich nicht aufnehmen. Ich bin in einer Sekunde zurück , bevor du kaufst. Ich wollte nur ein paar Dinge durchgehen. Es spielt keine Rolle, mit welchem Registrar Sie Ihren Domainnamen registrieren , der versucht, Ihnen andere Dinge zu verkaufen , und Sie möchten sie vielleicht. Nur nach meiner Erfahrung nach Ihren eigenen Recherchen, dass all dieser vollständige Schutz und das Zeug für Ihren Domainnamen nichts bewirken. Es ist immer noch Nita. Wer ist? Sie müssen immer noch Ihre Daten darüber aushändigen , was gefaltet ist. Es könnte teilweise verdeckt und das alles wie Hacker verhindern. Für mich denke ich, dass das ein bisschen Angst einflößend sein könnte. Sie können Ihre eigene Zwei-Faktor-Authentifizierung durchgehen und aktivieren Ihre eigene Zwei-Faktor-Authentifizierung , um sicherzustellen, dass niemand Anpassungen vornehmen kann. Aber es ist nicht so teuer, wenn du so bist, ich weiß nicht. Mach einfach alles an. Das einzige, was wir hier tun wollen, ist wir die Abrechnung der Website nicht beenden wollen. Wir haben eine Art Drama. Es ist kostenlos, es passt wirklich nichts an. Und hier unten, brauchst du E-Mail-Adressen bei dir? Ich würde wahrscheinlich so etwas wie Google verwenden , um die E-Mails zu bearbeiten. Ich würde Go Daddy also nicht verwenden, aber Google hat professionelles Web-E-Mail-Hosting. Webflow macht das nicht. Oder Sie verwenden einfach Ihre aktuelle Hotmail- oder Gmail-Yahoo-Adresse und verwenden einfach keine professionelle E-Mail-Adresse. Also werde ich nein sagen danke. Und dann schneide ich weiter. Dann werde ich zu einem Board springen , okay, also hast und kaufst du einen Domainnamen oder einen vertikalen Namen , der zuerst Papa werden würde , weil es schnell und einfach ist. Dann zeige ich Ihnen, wie Sie es manuell einrichten, wenn Sie einen anderen Domainhost-Anbieter verwenden. Also fügen wir unsere benutzerdefinierte Domain hinzu. Wir haben einen gekauft. Und jetzt tippe ich meinen ein. Es wird eine Domain hinzufügen. Mein Fall hat erkannt, dass ich es über GoDaddy gekauft habe, was es super einfach macht. Ich mache das in der Sekunde manuell. Ordnung, Sie werden möglicherweise aufgefordert , sich in Ihrem Konto anzumelden. Es wird erklären, was es bewirken wird. Ich klicke auf Verbinden. Manuell verbinden. Es geht eigentlich nicht nur darum, die automatische Sache zu machen . Lass es uns eine Sekunde geben. Ordnung, das erscheint. Das haben wir uns vorhin angesehen. Denken Sie daran, dass wir die Indexierung der Staging-Site aktiviert und deaktiviert haben. Okay, lass es einfach seine Sache machen und wir sind teilweise da. Es ist verbunden. Mein Problem ist, dass ich die Seite nicht veröffentlicht habe. Und bevor wir loslegen, müssen wir einen Standard festlegen. Im Moment gibt es also tatsächlich zwei Versionen Ihrer Website. Es gibt eine Breite, Dub, Dub, Dub, und eine ohne irgendetwas macht einen zum Standard, was es tun wird, ist tatsächlich umzuleiten. Wenn jemand genau das eintippt, wird es auf dieses umgeleitet. Ansonsten hatten wir am Ende zwei Seiten. Es ist komisch, ich weiß, aber mach dieses einfach zum Standard mit dem Dub, Dub, Dub. Und wir können zu Publish gehen. Jetzt können wir zu unserem Designer zurückkehren und es veröffentlichen, oder wir können es von hier aus tun. Okay, gehen wir zurück zum Designer, denn dort wir uns im Moment am wohlsten . Es ist das , was wir wissen. Okay. Wir sind an einem bequemen Ort , könnten bequeme Hosen tragen. Ich gehe zu Publish. Wir hatten ab jetzt nur noch diese Option, okay, jetzt haben wir diese. Wir können beide veröffentlichen. Bist du bereit? Ich benutze City. Sie werden Ihre allererste Website veröffentlichen. Vielleicht. Es ist ein sehr aufregender Moment und es wird wahrscheinlich nicht funktionieren. Warum? Weil ich den Domainnamen vor ungefähr 5 Minuten gekauft habe. Manchmal kann es eine Weile dauern, bis diese Domainnamen dort sind. Ordnung, wir sind bereit zu gehen. Schau es dir an. Mal sehen, ob es funktioniert. 321. Es heißt sofort la Hey. Das passiert normalerweise nie, wenn ich das mache. Es kann ein paar Stunden dauern , bis die DNase bevölkert ist, und alle möglichen Dinge müssen eine Magie sein, die zwischen Webflow und Go Daddy vor sich geht , ich liebe es. Also das ist jetzt live. Dies ist meine eigene Website. Es fühlt sich realer an, nicht wahr? Jetzt? Schauen Sie sich die Seite jetzt selbst an. Okay, Daniel Scott webdesign.com. Ich füge da ein kleines Osterei für dich rein. Du bist willkommen. Okay, aber wenn es nicht funktioniert, wende dich an Webflow, wende dich an Go Daddy, beide sind sehr hilfreich, um diese Dinge in Gang zu bringen , weil sie wollen, dass du eine großartige Erfahrung hast Für das, wofür Sie bei Webflow und GoDaddy bezahlen, suchen sie dort nach Nachteilen. Das Einzige, was Sie jetzt tun könnten, ist , dass Sie hierher zurückkehren und tatsächlich sagen könnten, wie diese beiden, brauche ich diesen noch? Sie können einfach direkt weiter veröffentlichen und Änderungen direkt an der Hauptwebsite vornehmen. Aber was Sie tun könnten, ist, dass Sie tatsächlich Änderungen vornehmen und sie auf der Staging-Website veröffentlichen könnten Änderungen vornehmen und sie auf der Staging-Website veröffentlichen , damit die Kunden sie überprüfen können, jemand anderes, um sie zu überprüfen, bevor Sie gehen und gehen. Okay. Ich werde mich verpflichten, es auch auf die Hauptseite zu stellen. Okay, das ist also so, als ob du in Arbeit bist. Und das ist die letzte Folie. Das ist sehr aufregend. In Ordnung, das ist die superautomatische Art, das zu tun. Wir haben einen Domainnamen gekauft und Webflow im Grunde lassen wir Webflow mit Go Daddy verbinden, was sehr nützlich ist. Im nächsten Video machen wir es manuell. Lass uns das machen. 82. Manuelle Verbindung von eigenen eigenen Domainnamen in Webflow: Hallo zusammen. In diesem Video schauen wir uns die Einrichtung eines bereits existierenden Domainnamens an. Das ist nicht die automatische , die wir im letzten Video entweder über Go Daddy- oder Google-Domains gemacht letzten Video entweder über Go Daddy- oder Google-Domains Wir schauen uns einige Hosting-Anbieter an, auf die ich Zugriff habe , Bluehost und GoDaddy. Außerdem zeige ich Ihnen, wo Sie Dokumentation für all die verschiedenen Hosts erhalten können all die verschiedenen Hosts Wenn Sie einen dieser Hosts verwenden, sollten Sie in der Lage sein, herauszufinden, wo Sie die DNS-Einträge manuell aktualisieren können. Es geht direkt darum, in den richtigen Bereich für die Einrichtung Ihres Domainnamens zu gelangen . Sie müssen dorthin gehen, wo Sie Ihren Domainnamen gekauft haben. Ich werde dir Go Daddy und Bluehost zeigen, was du suchst , wo immer deine Domain ist, es wird etwas mit DNS zu tun haben. Das ist es, wonach Sie suchen, Ihre Domainnamen-Server, okay, hier ist es auch auf GoDaddy. Es wird an verschiedenen Orten geben, aber Sie werden an einem sehr ähnlichen Ort landen . Schauen wir es uns an. Suchen Sie als Nächstes Ihre Website und Sie möchten zu dieser Veröffentlichungsregisterkarte wechseln. Sie wurden umbenannt, wie in der Möglichkeit der Veröffentlichung oder des Hostings. Und wir werden eine benutzerdefinierte Domain hinzufügen. Wir bearbeiten eine bestehende Domain. Ich werde diesen hier mit dem Plural einrichten und die Domain hinzufügen. Und es wird mir ein paar Optionen geben. Das ändert sich auch. Okay, also wenn Sie sich nicht sicher sind, checken Es wird irgendwo auf der Seite einen Link geben, über den Sie direkte Hilfe von Webflow erhalten können, wenn sie es aktualisiert haben oder vielleicht das Gefühl haben, dass das nicht funktioniert, gehen Sie Schauen Sie es sich an und scheuen Sie sich nicht, sich mit Webflow oder Ihrem DNS in Verbindung zu setzen , die Sie Ihren Domainnamen gekauft haben , und erklären Sie, was Sie versuchen zu tun. Was Sie versuchen, ist die Aktualisierung auf Datensätze, den A-Record und hier unten den CNAME-Datensatz. Und das nimmt hier Rekord auf. Also dieser erste hier hat zwei Optionen. Benutze einfach den empfohlenen, werde nicht zu sehr auf die Weiterleitungen und so eingehen , aber lass uns einfach diesen machen. Wir müssen zwei DNS-Einträge K für diesen Typ hinzufügen und hinzufügen, dass Sie danach suchen. Lassen Sie mich Ihnen zeigen, wie sie in den beiden Domainnamen-Unternehmen , auf die ich Zugriff habe, GoDaddy, aussehen den beiden Domainnamen-Unternehmen , auf die ich Zugriff habe, . Es ist ziemlich einfach. Ich suche nach dem Typ, der a ist, und der Name der unter dem Hostnamen steht, ist Ed, und es ist ein Datensatz. Ich muss beide löschen bevor Sie das tun, einen Screenshot von allem machen, was Sie ändern werden, einen Screenshot von allem auf diese Seiten kleben , damit Sie es nicht tun, wenn es schief geht mach es richtig. Sie können es zumindest wieder dahin zurücksetzen, wo es war. Löschen Sie beide. Wenn Sie sie aus irgendeinem Grund nicht löschen können oder in Ihrem Hosting-Unternehmen einfach kein Zugriff darauf besteht , wenden Sie sich an sie und fragen Sie sie, denn wenn sie gesperrt sind, kann dies bedeuten, dass Sie bezahlen für einen anderen Dienst , bei dem sie niemals geändert werden müssen. Also musst du das vielleicht freischalten. Ordnung, also lösche ich beide Aufzeichnungen, sonst nichts. Okay. Und ich bin Bluehost. Sie machen es etwas anders. Wenn ich dieses DNS aktualisiere und hier habe ich alle Datensätze in ihrer eigenen kleinen Gruppe aufbewahrt . Also habe ich in diesem Fall nur einen, vielleicht hast du nichts hier drin. Geh und lösche das. Und wir werden zwei Datensätze hinzufügen. Denken Sie daran, einen Screenshot zu erstellen, bevor Sie Änderungen vornehmen. Okay, also ich gehe rein, lösche diese Aktion kann nicht rückgängig gemacht werden. Ich habe das gerade herauskopiert, weil es eine Art Demo für diese Klasse ist. Ich füge das in einer Sekunde wieder ein. Okay, also ist es weg, meine Website wird ein bisschen nicht funktionieren . Also füge ich meinen Datensatz hinzu. Und in diesem Fall ist es irgendwie komisch. Das ist ein Rekord, es wird davon ausgegangen, dass Sie einen Rekord meinen. Möglicherweise müssen Sie etwas expliziter sein. Es wird also davon ausgegangen, dass Sie einen Fehlercode erstellen. Es wird veranstaltet bei. Und zeigt auf. Hier haben Sie die Dinge aus dem Workflow übernommen. Also in diesem Fall will ich das. Wenn Sie einfach darauf klicken, wird es tatsächlich die Zwischenablage kopiert, was cool ist. Okay, also gib den Namen ein, lass uns zu Bluehost gehen. Geben Sie den Datensatz ein. Sie haben unterschiedliche Arten, es zu benennen. Es wird in einer Sekunde mehr Sinn ergeben. Ich verlasse die TTL-Planke. Lass uns auf meins speichern klicken. Sieht aus, als wäre es hier nicht in diesem aufgetaucht. Zeig alles oder ist es, hey, da ist es unten. Die Art und Weise, wie diese Gastgeber oder Arbeiten, was sie gerne tun, ist, sich mit mir anzulegen. Sie bewegen sie überall auf allen verschiedenen Hosts an verschiedenen Orten. Wenn Sie in Schwierigkeiten geraten, können Sie das. Es gibt diese Website hier oder Webseite hier, die Webflow erstellt hat, okay, und das ist eine wirklich großartige Möglichkeit, weil sie tatsächlich eine Reihe von Domains oder zumindest DNS-Anbieter durchlaufen haben, was machst du willst du sie anrufen? Und sie werden dir zeigen, wie du dorthin kommst. Okay, und dann habe ich ein paar Unterlagen gemacht. Ich füge das zu den Klassenprojekten hinzu. Es wird eine Link-Option geben, mit der Sie nach unten springen können , und da ist sie. Das könnte sich auch ändern. Also schau es dir an. Wenn es ein Fehler ist, lass es mich wissen und ich kann diesen Link aktualisieren. Ja, es ist ein bisschen rumzuspielen und zu versuchen, es möglich zu machen. Gleiche. Ich füge meinen zweiten Rekord hinzu. Okay. In diesem hier war noch ein At und ich werde das wieder in Bluehost kopieren. Es ist also bei null Punkten für dich und klicke auf Speichern. Das ist also die Hälfte davon erledigt. In GoDaddy ist es ein bisschen einfacher. Ich werde diese nicht löschen, aber sagen wir mal, tun wir so, als hätte ich, wenn ich sie hinzufüge, Es sind ein bisschen Optionen, Mehr Dropdown. Und das wird bei sein, und dann fügen Sie beide hier ein und belassen Sie die TTL auf Standard. Also wirst du mit denen enden, dein Gastgeber wird anders sein, oder? Was müssen wir noch tun? Nun, Sie können jetzt auf Status überprüfen klicken. Es wird gehen und nachschauen. Du hast es richtig gemacht und kommst zurück. Manchmal kann es einige Stunden dauern bis die DNS-Einträge über das Internet gefüllt sind. Testen Sie das jetzt und sehen Sie, ob es funktioniert. Ich werde das schließen. Und das nächste Bit ist der C-Name und die Ticks neu codiert, ähnlich. Also je nach Gastgeber, geh und finde und lösche, wonach du gesucht hast, den C-Namen mit einem Dub, Dub, Dub da, lösche diesen und füge ihn wieder hinzu. Okay, Bluehost trennt diese aus, oder ist es ein C-Name? Also habe ich diesen hier , den ich loswerden möchte. Okay. Ich gehe hin und entferne dich. Ich muss mir um die anderen keine Sorgen machen. Nur dieser Dub, Dub, Dub recodiert genauso wie zuvor. Tun wir so, als hätte ich es gelöscht. Und ich füge einen neuen Rekord hinzu. Das war dub, dub, dub. Und es deutet darauf hin, dass wir uns diese Option hier schnappen, Gesicht kopieren und wir gehen und bearbeiten. Ich werde es hier nicht tun, weil ich das mehr als bisher ricken will . Und hier sind meine Tics-Aufzeichnungen. Also habe ich eine, die ich löschen muss. Denken Sie daran, Screenshots von allem zu machen und diese zu kopieren und einzufügen denn einige der Dinge , die Sie nicht eingeben möchten, werden wir nicht löschen, aber ich möchte diesen Datensatz löschen k und ersetze es durch ein neues. That will flow sagt mir, wie es heißt. Super einfach. Nochmals, du überprüfst den Status und hoffentlich heißt es irgendwann: Wir sind alle gut. Und das Letzte, was Sie tun müssen ist wie im letzten Video, es macht eines davon auf den Standard. Und für uns machen wir den Dub, Dub , Dub zum Standard. Das ist hier wichtig, weil wir gesagt haben, dass wir diese Option verwenden , die besagt, dass unsere Domain alles auf diese umleiten soll. Der Dub, Dub, Dub. Dieser hier ist, wenn du das nicht willst, du willst alles auf den non dub, dub, dub, dub, dub, dub, dub, dub, default machen. Wenn Sie jetzt bereits etwas auf Ihrem Host eingerichtet haben oder zu Subdomains gehen, könnten Ihnen viele andere Dinge gefallen. Es ist ein ziemlich kniffliges Zeug. Sie müssen sich je nach Qualität des Dienstes an Ihren DNS-Anbieter wenden. Ich mache nur einen Screenshot von dem, was du versuchst zu tun, erkläre einfach, dass Webflow mich gebeten hat, das zu tun. Kannst du mir dabei helfen, weil es verschlossen ist oder ich es nicht finden kann. Denken Sie daran, dass Webflow eine wirklich gute Verbindung zu den rechten Seiten der Dokumente auf diesen Websites hat, um das zu klären. Aber scheuen Sie sich nicht zu fragen. Dann wirst du irgendwann eine Website haben , die funktioniert, Daniel. Das. Schließlich landen Sie auf einer Website, die mit Ihrem eigenen Domainnamen funktioniert. Ordnung, ein bisschen Rente. Dieser, manuelles Einrichten von DNS-Datensätzen für Ihre Website, Hardcore-Webdesign. Ordnung, das ist es. Weiter zum nächsten Video. 83. Testen auf deinem tatsächlichen Handy: Hallo zusammen. In diesem Video zeige ich Ihnen ein paar Testmöglichkeiten auf einem mobilen Gerät. Lass uns testen und ein falscher Weg. Und wir werden auf eine echte Art testen die falsche Art es einfach im Browser tun, gut auf einem Handy. Und du kannst es irgendwie ziehen und du kannst die kleinen Breakpoints unten sehen. Darüber haben wir gesprochen. Okay, das ist eine Möglichkeit. Eine weitere nette Möglichkeit ist es, die Seite tatsächlich zu veröffentlichen. Veröffentlichen Sie also eine Domain. Und dann im Browser, insbesondere in Chrome, okay, wenn Sie Chrome nicht haben und ein Webdesigner sind, installieren Sie es wahrscheinlich, weil es der beliebteste Browser und Sie sicherstellen müssen, dass es funktioniert es In Chrome können Sie jedoch zu Inspect gehen und es gibt eine Option hier unten. Siehst du diese kleine Ikone hier? Manchmal ist es standardmäßig rechts oder links. Ich denke, es ist normalerweise unten. Aber schauen wir uns das an. Sie suchen nach diesem Symbol und können darauf klicken. Und man kann sagen, reaktionsschnell. Ich wollte auf die verschiedenen Größen eingehen und fünf K mit dem 12th Pro oder was auch immer die neueste Version ist, vergleichen . Kannst du ein Gefühl dafür bekommen Kannst du sehen, dass es verkleinert wird, damit du sehen kannst, wie es in voller Größe aussieht? Du kannst sehen, dass ich mit meinem Knopf rumspielen muss. Das ist also eine Sache. Eine weitere gute Möglichkeit, dies zu tun, ist, dass ich es einfach gerne noch veröffentliche und mir einfach eine E-Mail damit sehe und auf dem Telefon mein Handy in Chrome öffne, weil ich ein Google-Mensch bin. Sie werden vielleicht sehen, ob es für Sie funktioniert. Ich kann in Chrome darauf klicken und sagen, ich kann es auf meinen Geräten teilen und ich kann es einfach öffnen und es sendet es an mein Telefon. Es ist etwas schneller. Und dann öffne einfach die Hände auf meinem Handy. Okay. Und das sehe ich. Kannst du es sehen? Und ich kann damit interagieren. Das Gute daran ist ich sehen kann, dass die Knöpfe kaputt sind, aber es gibt mir die Möglichkeit , alle Knöpfe zu drücken. Sind sie groß genug, um zu klicken, was eine Sache ist. Google testet Ihre Website, um festzustellen ob Sie das tatsächlich physisch können, wenn Sie winzig kleine Schaltflächen erhalten. Also wird es mir nicht gefallen. Sie können es also testen, weil es manchmal auf dem Bildschirm gut aussieht und Ihr Bein dann komisch aussieht. Und Person. Das ist meins. Außerdem macht es Spaß. Es macht Spaß, Ihre Website im Internet auf Ihrem Handy zu sehen . Fügen Sie das einfach in das eigentliche Ding ein, veröffentlichen Sie es zuerst und öffnen Sie es dann in Ihrem Browser. Es ist ziemlich einfach. In Ordnung, testen auf einem echten Telefon. Ihr Workflow-Projekt. Das nächste Video. 84. Kursprojekt 06 - Portfolio Complete: Es ist Klassenprojektzeit-Timing, um all das Wissen, das wir in diesem letzten Teil gelernt haben, auf die Probe zu stellen das Wissen, das wir in diesem letzten Teil gelernt haben, auf die Probe zu Sie können Ihre eigenen Bilder verwenden. Wenn Sie Ihr eigenes Buch erstellen, ist ein guter Anfang, okay, verwenden Sie Ihre eigenen Bilder. Du bist in Kopfschüssen , so was. Wenn Sie das nicht tun möchten, finden Sie Platzhalterbilder bei etwas wie Unsplash oder Pixels PEX ELS k, und Sie könnten von dort Schäden für das Portfolio erhalten. Was machst du? Es müssen drei Seiten fertiggestellt werden, die Homepage, die Kontaktseite und eine, mindestens eine Portfolio-Seite. Okay, hier ist mein Link zu meinem Design hier. Okay, lass uns im Moment nur ein paar Platzhalterbilder haben , aber genau das wollte ich für meine tun. Ich werde loslegen und es ein bisschen einbauen. Aber dieser hier liegt an dir. Die Art, wie Sie es aussehen möchten, kann einfach sein, es kann etwas weiter fortgeschritten sein. Sie können einige Zeit damit verbringen, es zu entwerfen. Es liegt an dir. Es ist hauptsächlich nur Üben und Webflow muss nicht das Beste sein , was man kopieren kann, was ich habe, Make-up, etwas Eigenes, nachforschen , was andere Leute getan haben, lass dich inspirieren. Okay, das sind also die drei Seiten. Stellen Sie sicher, dass sie auch auf Mobilgeräten funktionieren. Okay. All die verschiedenen Breakpoints. Dies sind die Anforderungen. Dies sind die Dinge , die wir seit den Projekten der letzten Runde behandelt haben . Stellen Sie einfach sicher, dass Ihre Typografie zurückgeht. Möglicherweise müssen Sie es wiederholen und sicherstellen, dass es sich auf den Felgen befindet. Die Schaltflächen müssen für alle Inhaltsseiten funktionieren. Case ist nur die Navigation funktioniert. -Symbole. Es sollte ein Symbol für das Navi geben, wahrscheinlich für die Karte und die Fußzeile, um zu üben, sicherzustellen, dass Sie ein Symbol erstellen können. Dies sollte ein Formular auf der Kontaktseite sein. Ich möchte, dass Sie üben, ein Bild mit Object Fit zuzuschneiden . Vielleicht haben wir es einfach in vorgefertigten, sofort einsatzbereiten Bildern mitgebracht . So einfache Verhältnisse werden Sie nicht haben . Bilder, wenn du Sachen von mir zu Unsplash bekommst oder Urinkram. Wie man das CSS-Zuschneiden macht, musst du vielleicht zu diesem Video zurückkehren und uns ein Favicon geben. Schau dir den Kerl an. Das Foto sollte klebrig sein, das heißt, es wird einfach nach unten geschoben, mindestens eine Homepage-Animation. Es kann super einfach sein, nur etwas Subtiles muss keine Parallaxe oder irgendetwas anderes sein . Es kann sein, es kann super verrückt sein. Es liegt an Ihnen, wenn Sie den Animationsfall teilen , den Staging-Link scheren, nicht den schreibgeschützten. Staging-Link ist dieser hier, der eine Weg. Gehen wir zum Designer. Es ist dieser hier, der oberste. Also schieb es einfach raus, es muss keine benutzerdefinierte Domain sein kopiere sie einfach und füge sie ein, aber auf der Homepage, damit wir sehen können, was du tust, stelle sicher, dass es einen mittleren Titel und eine Beschreibung gibt oder zumindest die Homepage, und ich muss es für sie tun. Stellen Sie sicher, dass sie alle auf Mobilgeräten funktionieren. Animation könnte es etwas knifflig werden. Auf dem kleinsten Handy. Sie dürfen es einfach für das Handy deaktivieren da es möglicherweise einfach zu viel für die Bildschirmfläche ist, die Sie haben, aber es kann für Desktop - und Tablet-Ergebnisse gehören. Machen Sie einen Screenshot der drei Seiten, so viel Sie im Browser sehen können , laden Sie diese hoch und teilen Sie auch den Staging-Link. Dieser hier. Laden Sie sie auf die Website hoch, teilen Sie sie in sozialen Medien, insbesondere diesen Link hier Wenn Sie bereit sind, ihn in den Gruppen zu teilen, auch wenn es nur die Screenshots sind, lieben Sie es zu sehen, was Sie mit Ihrem Portfolio. Eine Sache, die Sie beachten sollten, ist jedoch nur gekennzeichnet, ob es sich Ihre eigene Arbeit oder um Arbeiten von einer Stockbibliotheksseite handelt. Nur um jegliche Verwirrung der Leute zu verhindern, die denken: Oh Mann, du bist ein toller kann ich dich einstellen und du sagst : Ja, aber ich habe gerade all das Zeug gestohlen. Seien Sie also ganz offensichtlich, um zu sagen , dass dies der Fall ist. Ich verwende die Arbeit eines anderen als Platzhalter, um meine Webflow-Fähigkeiten zu üben und sogar die Bilder zu würdigen, wenn Sie möchten. Und es ist immer eine gute Idee, die Bilder zu würdigen. Du wirst ein Unsplash bemerken, wenn du es herunterlädst, es gibt dir den Namen. Du kannst sagen, Danke Carol, jemandem für die Bilder oder Bilder, die von dir geliefert wurden, und die Personen auflisten, die du benutzt hast. Ordnung, es ist ziemlich groß, besonders wenn Sie diesen oberen Abschnitt noch nicht abgeschlossen haben. Du musst, es gibt nur ein paar Kleinigkeiten zu tun. Ich sage das Go Design, es ist wirklich einfach. Auch hier geht es nicht darum, wie gut Ihr Portfolio für Farben aussieht. Du benutzt Schriften, Layout , andere Sachen. In diesem Kurs geht es darum, Vertrauen in Webflow zu haben und keine Angst zu haben, wenn Sie sagen, ich bin nicht der beste Designer, aber ich lerne Workflows. Ich werde es nicht teilen. Share it erklärt, dass Sie neu im Design sind, vielleicht lernen Sie die Funktionen von Webflow kennen und wir würden uns über Feedback freuen. Ordnung, das ist das Klassenprojekt, niemals das Sexportfolio, abgeschlossen. Mach es und dann können wir mit einem anderen Projekt beginnen. In Ordnung, wir sehen uns gleich dort. Eigentlich wirst du einige Zeit damit verbringen. Wir sehen uns in einer Weile. Ich werde dir den Einstieg in das nächste Video erleichtern. Jetzt. 85. Was sind Statische vs dynamische CMS in Webflow: Hey, worüber diskutieren wir? Wir besprechen zwei Dinge. Was CMS ist und was für eine statische versus dynamische Site. Bis jetzt haben wir statische Websites erstellt , obwohl wir coole Animationen waren , die immer noch als statische Website gelten. Was macht es zu einer dynamischen Website? Lassen Sie uns zunächst über ein CMS sprechen, denn das ist der Hauptbestandteil, um eine dynamische Website zu gestalten. Cms, Content-Management-System oder Datenbank. Es ist eine Reihe von Informationen, die Sie Ihre Website ziehen und laden und den Leuten zeigen können. Sie ziehen es nicht beim Kopieren und fügen es in statischer Form ein. Du machst die ganze Arbeit. Was Sie tun können, ist diese nahtlose Datenbank zu haben. Hallo, nenne es eine Sammlung. Und du gibst eine ganze Menge Informationen da rein. Und Sie sagen, stellen Sie alle Informationen auf meine Seite, auf meine Website als Seiten und es geht einfach und bringt alles dort hoch. Okay. Das ist eine dynamische Seite, sagen wir mal ein Blogbeitrag, wirklich gutes Beispiel dafür ein wirklich gutes Beispiel dafür und was wir gleich machen werden. Okay, wenn jemand zu dir sagt, Anna hat drei Blogbeiträge auf meiner Website, mach weiter, vielleicht mach dir keine Sorgen. Erstellen Sie den ersten, duplizieren Sie ihn und machen Sie dann die nächste Kopie, fügen Sie alles ein, was ich nicht verstanden habe, dass es gut aussieht und dann großartig, cool. Liebe die drei. Kannst du noch 300 machen? Klar. Okay. Und du bist weggelaufen? Eine dynamische Seite. Was passiert ist, dass du sagen kannst: Ja, ich kann 300 davon machen. Was ich aber für dich tun werde ist, dass ich einfach stylen werde. Ich werde eine Sammlungsdatenbank erstellen, CMS, alles irgendwie dasselbe, etwas andere Dinge, aber dasselbe in diesem Zusammenhang. Ich baue das für dich. Ich werde einen Blogbeitrag stylen. Das Schlagen sieht so aus, der Absatz sieht so aus. Bilder gehen hier rein. Okay? Es sieht alles so aus. Du sagst: Hey, Kunde, mach so viele wie du willst. Großartig. Sie geben einfach Sachen in die Datenbank ein und es fängt einfach an, Seiten auszuspucken. Das ist gut, das ist auch dynamisch. Andere gute Beispiele dafür könnten sein, dass Sie eine Mitarbeiterliste haben, okay? Und Sie haben eine CSV davon aus Ihrem CRM oder was auch immer es stammt, und Sie haben Dutzende davon, Hunderte davon, Tausende davon. Du kannst einen stylen. Checken Sie sie alle und die Website ein. Okay. Lädt sie alle auf, hast du es dir gewünscht. Okay, es könnten Ereignisse sein, denen Sie eine große Liste für Datenbanken, Sammlungen, andere gute Zwecke, Rezepte, Menüs, alles, wovon Sie viel haben, haben. Ich hatte ein paar andere Beispiele. Ich kann mich nicht an sie erinnern. Autoren, Kunden, Teammitglieder, Auflistungen, Songs, Shows, Rezepte. Das sind alles gute Anwendungsfälle , in denen es viele der gleichen Dinge gibt. Also ja, das ist alles. Wir werden mit dem Aufbau unserer dynamischen Website beginnen , für die eine CMS Slash-Sammlung erforderlich ist. Okay, und dann zeige ich dir, wie das alles funktioniert und mache eins, es macht Spaß. Wir machen, wir machen ein paar Zeugnisse. Zuerst. Schwul, sie werden auf eine Website geladen und dann fangen wir an Seiten mit Blog zu erstellen. Okay, lasst uns heute Morgen loslegen , um uns zu rasieren. Absolut nicht. Als würdest du es nicht bemerken. Wiederholen Sie das Video, als ob Sie den Hinweis erkennen können, aber raten Sie mal was? Du bist nicht meine Mama. Ich Dan 86. Erstellen einer CMS in Webflow: Hallo zusammen. In diesem Video werden wir eine neue Site erstellen. Es wird für alle zukünftigen Blog k sein. Wir werden auch unsere allererste CMS-Sammlung erstellen. Dafür sind wir hier. Wir werden eine Verbindung zu unserer Datenbank herstellen. Das macht unsere Website dynamisch. Und dann fügen wir dieser Datenbank manuell nur ein Element hinzu. In unserem Fall wird es ein Testimonial von Sarah Smith sein , ein Testimonial haben, es wird einen Kopfschuss und ein paar andere Details geben, richtig, um mit der Schaffung einer Marke zu beginnen neue Seite. Okay, nur ein leeres. Jetzt ist es ein bisschen komisch. Wir werden in einer Sekunde mit dem Aufbau einer Sammlung beginnen und können eine auf der kostenlosen Website erstellen. Fantastisch. Hat nichts mit meinem Arbeitsbereich zu tun, aber auf dieser Website selbst können Sie bis zu 50 Elemente in Ihrem CMS haben, was für den Einstieg praktisch ist. Das Problem ist im Moment, Sie CMS-Elemente haben können, die ein Alkane sein könnten , 50 Testimonials. Aber sobald Sie zur Basisdomain wechseln , erhalten Sie wieder Null Wenn Sie eine benutzerdefinierte Domain benötigen, müssen Sie grundsätzlich zu einem dieser beiden Konten springen . Und trotzdem sind 50 Platten nicht so viel, also werden wir viel, möglicherweise viel mehr brauchen. Also EMS-Artikel der 2000er Jahre. Perfekt. Also werde ich meine Website aktualisieren und in der Sekunde, in der wir es im Moment nicht müssen, werden wir nur sehen, wie weit wir mit der kostenlosen Website kommen. Ordnung, schauen wir uns an, wie wir diese Sammlung machen. Also lasst uns eine Sammlung erstellen. Sie nennen sie CMS-Sammlungen think database. Okay, das gibt mir einen schönen Namen. Okay, du kreierst also diese Gesamtkollektion. Sie können mehr Sammlungen in einer Sache haben, vielleicht haben Sie Testimonials als Sammlung. Möglicherweise haben Sie eine Sammlung von Preisen. Möglicherweise haben Sie eine Sammlung von Produkten mit Preisen und Produktfotos. Sie können viele Sammlungen auf einer Site haben. Wir fangen mit diesem an. Das werden Testimonials sein. Ordnung, nun, ignoriere den Rest für den Moment und sieh dir unsere grundlegenden Informationen an. Wir haben zwei Möglichkeiten. Standardmäßig nur etwas für die Liste k. Also geben wir ihr einen Namen , der perfekt für uns ist. Wir werden den Namen der Person haben , die uns das Zeugnis gegeben hat , und ignorieren die Kugel im Moment. Wir werden im kommenden Video darüber sprechen , wenn wir Blog-Beiträge Schauen wir uns das Hinzufügen von Feldern an. Fügen wir ein benutzerdefiniertes Feld hinzu. Und das wahrscheinlich wichtigste ist ein Klartextfeld. Das ist das Label dafür das Testimonial genannt wird. Testimonial. Okay, das Label ist also, dass Sie hier eine Vorschau sehen können, mein Redakteur, okay, die Person, die dieses Zeug hochladen wird, es könnte ein Angestellter sein, vielleicht der Kunde, vielleicht Sie. Sie werden dieses nette kleine interaktive Ding zum Füllen haben und so. Sie werden es eingeben können. Okay. Geben Sie den Namen der Person des Zeugnisses ein, die das Testimonial-Feld ausfüllen wird . Sie können Hilfe mit Text hinzufügen, wenn Sie möchten. Es gibt eine seltsame Sache wie diese schiefe Zahl. Sie mögen, Sie wissen, dass die Person, die es ausfüllt, erklären muss, dass sich die SKU-Nummer auf der linken Seite befindet , um es etwas genauer zu erklären. muss ich nicht, weil das Ammonium ziemlich einfach ist. Was ist da drin? Meins wird in diesem Fall mehrzeilig sein. Zeichenbegrenzungen. Wahrscheinlich. Ich weiß nicht, was es sein wird. Ich gebe 500 ein und teste es, weil ich mein Testimonial nicht zu lange haben möchte. Ist es erforderlich? Nein. Okay. Nun, das ist es wahrscheinlich. Um ehrlich zu sein. Es hat keinen Sinn. Ich meine, Testimonial. Das hat kein Zeugnis. Was wollten wir sonst noch im Namen der anderen Person sagen, dem Testament des Geschriebenen. Lass uns das hinzufügen. Schau doch mal kurz durch, oder? Rich Takes erklären in ein bisschen, Bild, Großartig, mehrere Bilder. Du kannst das haben, dieses wird großartig, weil wir einen Headshot machen, diesen auf den Willen lassen, mehrere Bilder bedeuten, dass es eine mehrere Bilder bedeuten, dass Menge zur Auswahl geben wird. Okay, gut für einen Blogbeitrag. Laden Sie eine Reihe von Bildern einen Blogbeitrag hoch, damit die Person zwischen ihnen wählen kann. Wird es ein Videolink sein, Link, E-Mail, Telefonnummer, k, nur eine normale alte Nummer. Datum und Uhrzeit. Das machen wir noch. Wir werden später über die Schalter sprechen, und wir werden uns später die Optionen ansehen. Gibt es eine Option zum Hochladen von Dateien? Denken Sie daran, dass dies nicht der Fall ist, Sie fügen gerade eine Datei hinzu. Dies gibt ihnen später, wenn sie hochladen, die Möglichkeit , eine Datei, ein Word-Dokument oder ein PDF anzuhängen , es könnte sein, ich würde sagen, wir machen etwas für unseren Shop-Gewinn, indem wir den Preis auflisten, was es ist, und vielleicht kannst du ein paar Spezifikationen darauf herunterladen. Ich will das nicht ohne zu sparen. Also will ich ein Bild. Und dieses Bild wird sich verbessern. Okay. Vielleicht ist es ein Firmenlogo. Wenn es dieses Testimonial ist, werde ich noch ein paar andere Dinge hinzufügen , wie eine Datumsauswahl. Ich werde sagen, dies ist das Datum des Zeugnisses. Ich mochte sie auf meiner Website, wo man tatsächlich sehen kann, dass sie von vor fünf Jahren allerdings von diesem oder letzten Monat. Okay. Brauche also keine Hilfe oder Text. Ich brauche keinen Zeitwähler. Und es muss nicht erforderlich sein. Das mache ich. Lass uns noch einen hinzufügen. Nur ein einfaches Textfeld. Eigentlich nein, wir verlinken nicht. Okay, beenden Sie ohne zu speichern, fügen wir unseren Link anklickbar hinzu. Das wird also wie Instagram sein, Instagram-Link. So können sie das dort einfügen, wenn sie es hochladen, damit die Leute zu ihrem Geschäft gehen können oder was auch immer es ist. Hauptsächlich, weil ich nur einen Link hinzufügen wollte. Ordnung, wir haben also ein paar grundlegende Dinge. Was passiert am Ende? Lassen Sie uns die Sammlung erstellen. Und jetzt haben wir so etwas wie Platzhalterkram. Wir haben noch keine Testimonials. Wir haben gerade eine Möglichkeit, sie auf die Website zu ziehen. Okay, wenn Sie es hier bearbeiten müssen , können Sie unter Testimonials sehen, dass dies die Dinge sind , nach denen ich fragen werde. Also lasst uns das absagen. Ich habe keine Artikel in meiner Sammlung. Du kannst mir einfach ein paar Musterartikel geben und es würde nur ein paar Sachen hineinlegen. Wir machen es Schritt für Schritt. Was machen die ersten zusammen? Und dann zeige ich dir, wie du sie mit einer CSV einbringst. Also habe ich in deinen Übungsdateien unter Blog, da ist ein Testimonial. Okay. Und ich habe nur ein paar grundlegende Dinge dafür. Du musst es nicht benutzen. Ich verwende tatsächliche Testimonials, aber ich habe die Namen nur aus Datenschutzgründen geändert. Also Sarah Smith, ein Testimonial, ist wegen der roten Sternchen erforderlich, die zuhören. Sie hat ein Problem. Okay. Welche ist die Lady? Okay. Du gehst, das sind auch nur Platzhalter. Sie sind in deinem Blog. Du wirst Kopfschüsse sehen und ich habe vier davon drin. Du kannst benutzen, was ich sonst noch machen möchte? Das Datum des Testimonials, klicken Sie darauf, wählen Sie ein Datum in der Vergangenheit und einen Instagram-Link aus. Ich weiß nicht, was das für eine falsche Person ist. Ich werde meins benutzen. Komm und folge mir dort. Okay, und ich klicke auf Erstellen. Da haben wir's. Ich habe also eine nahtlose Sammlung. Ich würde die Miss-Datenbank sehen und sie hat einen Gegenstand darin. Okay. Aus einem Testimonial von Sarah Smith. Okay, solange genug für dieses Video, lass uns zum nächsten Video kommen und wir laden eine CSV hoch , um es irgendwie auszufüllen. Wir machen also nicht nur eins nach dem anderen. Ordnung, wir sehen uns dort. 87. Hinzufügen der CMS über CSV: Hallo zusammen. In diesem Video zeige ich Ihnen, wie Sie es in eine CSV bringen , die entweder aus Ihrem CMS erstellt wurde, entweder aus Ihrem eigenen CMS, vielleicht aus einem Client-Management-System, CMS, vielleicht ist es Ihr Buchhaltungssoftware , die das produziert. All Ihre, vielleicht Ihre Produktmanagement-Software oder wie wir hier, wir machen das einfach von einem Google Sheet aus. Ich werde es in Webflow bringen und es automatisch als Elemente in How-Sammlungen einfügen. Lass es uns eins nach dem anderen machen, ist machbar, mühsam. Und es wird viele Situationen geben, in denen Sie es aus einer bereits vorhandenen Datenbank übernehmen. Möglicherweise arbeiten Sie mit einem CRM wie einer Kundenverwaltungssoftware oder einer Art Buchhaltungspaket oder einer Aktiensache. Was Sie suchen, ist, eine CSV importieren zu können , okay? Sie werden also wissen, wenn Sie wissen, wenn Sie es nicht tun, tun Sie es vielleicht so, dass ich gerade ein Google Sheet erstellt habe, schwul, und ich habe meinen Kunden, der sie ausfüllt. Mit meinem Klienten meine ich, ich mache es einfach manuell auf diese Weise. Und hier in Google Sheets ging ich zu File und ging herunterladen. Und wir suchen nach diesen kommagetrennten Werten, CSV. Ich hab eins für dich. Okay, du kannst in deine Übungsunterlagen gehen. Es gibt einen namens Testimonials , bis jetzt fragt er in der ersten Reihe. Im Grunde ist es so, wie es fragt, sollten wir die erste Zeile ignorieren? Hier? ersten Zeile gibt es nicht wirklich die Namen der Leute und passt den Titel an. Also ja ist es. Und was es tun wird, ist, dass es versucht, mit dem, was Sie geschrieben haben, übereinzustimmen. Wir sagten, wir hätten seinen Namen aufgehoben. So nannte Mitglied Webflow dieses erste Feld, das wir ausgefüllt haben. Und dieser wird auch Name genannt. Sie können sich also etwas Zeit sparen, wenn Sie die Datenbank oder die CSV Sie können denselben Namen verwenden, da die Testimonials identisch sind und sie automatisch zugeordnet werden. Name ist also gleich Name, Testimonial ist gleich Testimonial. Software hat diesen heute nicht wirklich hinzugefügt. Ich werde es importieren und ein neues Feld erstellen. Und das werden wir auch tun. Lass uns das als Option machen. Okay, das neue Feld namens Softwarehilfe Texas ist eigentlich Software, die verwendet wird. Vielleicht ist das für den Benutzer sinnvoller. Und es wird die folgenden Optionen schaffen , aus denen wir auswählen können. Es ist ein kleines Drop-down-Menü, kein Bonus. Und hier haben wir, dass ich das Date gemacht habe. Ich habe keine Verabredungen. Ich muss diese manuell hinzufügen. Dieses Datum. Date, ich nenne es Date und hier heißt es Date. Warum hat es nicht gepasst? Und dann, wenn nicht, können Sie zu einem vorhandenen Feld wechseln, das ich als Data Testimonial bezeichnet habe . Deshalb Instagram. habe ich da nicht reingetan. Ich habe es einem Feld zugeordnet. All das Zeug, das ich vergessen habe, ich habe einen Instagram-Link hinzugefügt, erwähnt sie und macht das Leben einfacher. Ich hatte keinen Headshot weil man tatsächlich eine Datenbank bekommen kann , um auf zwei Bilder und Dateien zu verlinken. Und es hängt davon ab, wo sie sich befinden, ob sie online sind, und macht es einfacher. Okay, und Sie können absolute Pfade angeben und hier für einen definierten, aber außerhalb des Bereichs dieses werden wir sie einfach hochladen und selbst hinzufügen. Also machen wir uns bereit, neun zu importieren, die 900 sein können, okay, es ist weniger befriedigend mit seinen einzigen neun. Okay, aber wenn es 9.000 sind, sieh dir das an. Ordnung. Das ist wichtig, im Moment nicht wichtig. Ich tue nicht, ich habe nicht vor, diese wie auf ihren eigenen Seiten erwähnt zu veröffentlichen, sind Blog-Beiträge. Ich könnte die Bühne erneut veröffentlichen, sie werden nicht veröffentlicht und ich freue mich , sie so zu belassen. Ich mag am Anfang, sie sind etwas früher, ich habe dir die Testimonials gezeigt. Das ist es, was ich einfach auf die Homepage gehen werde. Sie werden keine eigenen separaten Seiten haben. Jetzt können wir Dinge wie Namen und Sachen sehen , die wir benutzt haben. Es fehlen Teile. Sie können hierher gehen, weil es ein kleiner Stift ist und sagen, zeig mir das Testimonial selbst und zeigen mir das Datum des Zeugnisses. Aber ich benötige keinen erstellten, geänderten oder veröffentlichten Instagram-Link, den Sie möglicherweise verwenden. Es liegt an Ihnen, was Sie auf dieser Liste sehen möchten, okay, also denken Sie an diese Artikel auf meiner Liste, das ist meine Sammlung. Wenn ich die Sammlung bearbeiten möchte, gehe ich zurück zu hier und klicke auf das kleine Zahnrad. Da ist es da. Dadurch wird meine gesamte Sammlung bearbeitet. Wenn ich in die Sammlung gehen will. Wenn ich auf die Artikel in der Bearbeitung eingehen möchte, stornieren Sie das und ich gehe einzeln auf diese ein. Ich kann sie anpassen. Und wir wählen die ersten vier aus und fügen ein Bild hinzu. Also hat Sarah Smith eigentlich schon einen. Also lass uns das tun, lass uns einfach zufällig auswählen, denn das wird später helfen. Ich werde diese Person auswählen , die Jobs hatte. Dieser Typ, der Typ ist nicht so, es ist ein Archivfoto von Graph. Ich denke an sich selbst. Ich denke, das könnte Joseph sein, aber er wird bei allen Modellen verwendet. Er ist ein großartiger Platzhalter. Du siehst gut aus, Mann, Joseph. Lass uns einen Blick darauf werfen. Ich suche mir einfach ein paar verschiedene aus. Ich warte eigentlich auf den Upload. Speichern. Fantastisch. wir uns einen anderen aus. Ich mache das schnell durch. In Ordnung, Don, sie sind alle gerettet. Kannst du sagen, dass ich einen Zufallsnamengenerator benutzt habe? Es sind fast keine Namen. Okay? So lädt man eine CSV hoch. Und was wir hier vielleicht mit Syriza zu tun haben , das früher nicht da war. Also muss ich auswählen und sagen, dass dies ein Zeugnis von ihr ist , dass sie einen Kurs gemacht hat, vielleicht ist es Sigma. Rette sie. Und weiter zum nächsten Video. 88. Hinzufügen der CMS auf der Webseite in Figma: Hallo zusammen. In diesem Video nehmen wir diese Liste von Testimonials aus unserer Sammlung. Und wir werden es auf die Seite stellen und es wird automatisch beginnen, es wie eine dynamische Website zu füllen. Okay, lass uns einsteigen und ich zeige dir wie. Ordnung, ich habe also leere Seiten, also nur ein bisschen Hauswirtschaft. Ich werde einen Behälter in diesen Behälter hinzufügen , der eigentlich nichts isst. Es ist immer schön, einen Diblock im Behälter zu haben , weil ich ihn einfach von oben schiebe. Ich bin mir nicht sicher, ob ich es nicht aushalten kann. Ordnung, also lass uns gehen und es hinzufügen. Es steht unter unserer Leitung. Sie könnten darauf gestoßen sein. Da ist es da. Cms, in dem Moment gibt es nur einen Artikel in dieser kleinen Gruppe. Es ist die Sammlungsliste. Wir wissen, wie die Liste lautet. Wir haben es schon mal gesehen. Okay, es ist dieser Teil der Sammlung und das ist die Sammlungsliste. Also gehen wir, Los geht's und editieren. Es ist etwas schwierig , daraus herauszukommen. Es fühlt sich an wie etwas Neues. Aber kannst du den Crossover hier sehen ? Du kannst alles schließen. Es ist also einfach eine riesige Sache, die sich öffnet. Also lass uns gehen und unsere Sammlungsliste in mein Div einfügen. Los geht's. Es macht nichts, bis Sie es mit einer Quelle verbinden, weil Sie mehr als ein CMS auf unserer Website haben können , wir machen Testimonials. Es könnten auch Ihre Produkte sein. Vielleicht Mitarbeiter, Fallbewegungen, Art von Testimonials und schauen Sie sich das an. Es funktioniert irgendwie halb, zumindest bringt es die Namen durch. Aber ich sehe mir nichts anderes an, wenn ich es in der Vorschau sehe, nicht viel. Sie sind einfach wie Geistersachen. Sie würden dir helfen, eine Vorstellung davon zu bekommen , was all diese verschiedenen Zellen sind. Und es sieht viel besser aus, wenn wir zu diesem anderen Layout gehen. Es hat drei Spalten , weil das die Hälfte dessen ist , wie es aussehen soll. Fangen wir an, Bits hinzuzufügen. Also was ich tun werde, ist, dass wir jetzt alles hinzufügen können, jede dieser Optionen und es mit unserer Liste verbinden. Fügen wir also das Testimonial hinzu. Das ist der wichtigste. Also lasst uns einen Textblock einbauen. Könnte es ein Absatz sein? könnte ich wahrscheinlich. Okay. Und Sie können sehen, dass es in meinem Sammlungsstück steckt. Was ich tun will ist, dass ich es sogar hier rausbringen möchte. Es heißt, ich möchte den Text für diesen Textblock aus Testimonials erhalten . Es weiß es, weil wir die Liste mit Testimonial verbunden haben. Also geht es los, Hey, willst du die Nachricht von irgendwoher bekommen? Woher möchtest du es bekommen? Vier. Lassen Sie uns davon ausgehen und lassen Sie es uns direkt aus dem Testimonial herausholen. Es sind einfache Texte. Großartig. Sie können in mein einfaches Textfeld-Logo gehen durch das es eingefasst ist. Es ist ein bisschen schwer zu lesen, aber Sie können sehen, dass es 12 gibt. Wie viele haben wir gemacht? Machen wir neun oder zehn? Ich bin mir nicht sicher, wie viele wir gemacht haben, aber da ist alles vollgestopft. Gestalten wir nicht den Textblock, sondern gestalten wir das Sammlungselement. Ich gebe ihm den Klassennamen Ammonium. Ich nenne es Zeugnis oder Wrapper. Ich füge nur ein paar Ränder und Polster hinzu, damit ich sie herumschieben kann. Und sagen wir, es ist imaginiert. Eigentlich werde ich Polster verwenden , die meine kleinen Boxen nicht kaputt machen. Stark. Bezahlen Sie beide Seiten oben und unten. Nur damit ich sie trennen kann. Ordnung. Also haben wir uns von LC-MS durchgesetzt, schauen Sie uns an, wir haben eine Datenbank namens Collection erstellt. Dann haben wir diesen Listen-Wrapper innerhalb der Liste hinzugefügt. Wir haben angefangen, Elemente hinzuzufügen und sie mit der Liste zu verbinden. Lass uns noch einen hinzufügen. Also lass uns dir sagen, was wir sonst noch brauchen den Namen der Person. Es ist ein weiterer Textblock. Okay, langweiliges altes Lehrbuch. Ich werde diesen mit der Person verbinden, die einen Namen hat , der ich ein wenig Stil geben werde. Okay, das wird ein Zeugnis sein. Kopieren Sie diesen Code und verwenden Sie ihn beim Laden. Und das ist die Namensformatierung. Ich mache nur ein paar grundlegende Stylings. Wir machen den Schnellmodus. Das ist alles was ich getan habe. Ich habe den Redakteur gebeten, es zu beschleunigen, aber ich bin mir sicher, dass du, wenn du mir 2 s gibst . Also die Textbox, die ich starten konnte. Ich werde den ganzen Ticks-Wrapper machen, Anzahl der hinzugefügten Zeugnisse oder Wrapper zu dieser ganzen Sache. Und ich werde alle Schriftarten hier reinlegen, jetzt können wir es beschleunigen, weil ich paar Sachen machen kann. Dein Gewicht da. Ordnung, das ist alles was ich auch getan habe. Kein Beschleunigen. Bewahrt die Schrift für alles, was sich darin befindet. Okay, und vielleicht dieses Lehrbuch, also nenne ich dieses eine Testimonial, und dieses wird Text heißen. Ich nenne das. Ich wollte unten ein bisschen Polsterung hinzufügen. Also Abstand dich. Ordnung, lass uns weiter Sachen hinzufügen. Lass uns gehen, ich füge einen weiteren Textblock hinzu. Okay? Und das wird, eigentlich ist es, es wird ein Lehrbuch sein, ja. Es wird also ein Lehrbuch mit Testimonials geben. Was wird es sein? Es wird die Software sein, die verwendet wird. Obwohl es ein Dropdown auf der Eingabeseite war , in dem sie auswählen konnten. Eigentlich hast du diese Ziffer nicht gesehen. Lass uns das machen. Es ist hier drin Text. Werfen wir einen Blick in die eigentliche Sammlung selbst. Denken Sie daran, wir haben ein Dropdown erstellt Ich habe es mir eigentlich nicht so oft angesehen. Okay. Da ist es. Das heißt, wenn jemand etwas hinzufügt, sagen wir, dass er das hinzufügt und er sich darauf einlässt. Aber kannst du sehen? Sie müssen hinzufügen, sie können unsere bei Figma auswählen oder ist es Photoshop und dann speichern und zurück in meinem Dokument, Sie können sehen, dass es von Photoshop auf XD umgestellt wurde und das ist ein wirklich gutes Anwendungsbeispiel für diese Datenbank. Ich kann es dort ändern, vielleicht eine ganz neue CSV importieren. Es wird alles durchgehen und aktualisieren. Es ist also nichts, was ich kopiere und einfüge. Vielleicht sind es Zeugnisse, von denen Sie nur drei auf der Homepage haben. Und du hast sie nie geändert. Ich brauche kein CMS. Also viel Drama, um das in Gang zu bringen. Es ist für diese Art von sich wiederholenden Dingen , die ständig passieren. Wie bei meinen Testimonials aktualisiere ich es gerne jede Woche mit neuen für verschiedene Softwareteile. Also werde ich das alles in einer Sekunde stylen. Schauen wir uns an, was wir noch hinzufügen können. Denn worum wurde gebeten? Meine Liste, ich erinnere mich, dass es ein Bild gab oder sollten wir das Bild jetzt machen, machen wir das Bild, ich werde es bearbeiten, aber es wird kaputt gehen, weil nur wenige von ihnen Bilder haben. Also lasst uns hier ein Bild hinzufügen . Okay, du kannst nach oben gehen. Klar. Ich kann ein Bild auswählen oder ich kann sagen, dass es tatsächlich aus den Testimonials stammt. Sie sehen es, reduzieren Sie es so, als gäbe es nur eine Sache, die ein Bild ist, großartig. Und nur ein paar von ihnen, Himmel, es wird mein Layout durchbrechen. Ich werde es für den Moment ausschalten weil ich dir das in einer Sekunde zeigen werde. Wenn Sie nur ein Element löschen möchten , das Sie verbunden haben, klicken Sie einfach auf Löschen. Das erinnert mich an ein gutes Argument. Nehmen wir an, ich lasse die da drin. Und nehmen wir an, ich will den mittleren nicht, als würde ich sie loswerden. Ich könnte meine Liste durchgehen und sagen, geh und entferne sie alle. Oder ich kann in meine Sammlung gehen , die irgendwie wie die Gesamtsammlung ist. Es ist der Boss-Account, der all diese Gegenstände gegeben hat. Und ich kann tatsächlich sagen, lasst uns das loswerden. Ich will keine Kopfschüsse machen mir nur Ärger. Ich gehe hierher und lösche es. Es wird angezeigt, dass Sie das nicht können, weil es auf der Seite verwendet wird . Wo wird es verbunden? Okay. Es sagt mir, dass es eine eigene Homepage ist. Da ist ein Bild. Sehen wir es uns an. Ich sage hier ist es. Ich kann es nicht aus der Datenbank löschen , weil es verwendet wird. Also sehr gut. Danke. Aber ich könnte es jetzt löschen. Und weil es nicht auf der Seite verwendet wird, kann ich es in der Datenbank löschen oder sie nennen es die Sammlung. Gute kleine Randnotiz da. Ordnung, das ist der Kern dieses Videos. Wenn du weitermachen willst, werde ich sie stylen und noch ein paar hinzufügen, aber es ist dasselbe. Was auch immer Sie in der Liste haben, Sie können nachsehen. Ich habe einen Linkblock. Also füge ich den Linkblock hinzu. Ich erhalte die URL von meinem Instagram-Link. Eigentlich denke ich, dass die Linkblöcke, die nicht funktionieren , eindeutig nicht funktionieren. Gehen wir. Was wir sonst noch tun könnten, sind zwei Dinge, die wir tun könnten. Ich denke, Texte verlinken oder wir könnten nur ein normales Lehrbuch hinzufügen und das hinzufügen, den Hyperlink, den wir zuvor gemacht haben. Aber fügen wir nur einen Textlink hinzu. Es ist verbunden. Hol es dir von Instagram. Nun, was bringt es Fromm er sagt, es bekommt die URL von dort, um sie am Ende zu setzen, aber es wird nicht bekommen, du bekommst auch einen Text von dort. Okay, Instagram-Link. Ich will diesen Text nicht wirklich. Okay, was ich tun möchte, ist es einfach da rein zu schreiben und Instagram Link zu sagen. Instagram-Link. Okay, und installiere das. Erregung wird einzigartig sein außer dass ich sie alle gleich gemacht habe. Okay, was will ich sonst noch? Was haben wir sonst noch in dieser Liste? Wir werden die Kopfschüsse im Moment ignorieren. Ich kann mich nicht erinnern, was auf meiner Liste steht, um dort zu warten. Ordnung, und es war das Datum. Also noch ein Lehrbuch. Okay, du gehst in Hanf. Ich bekomme nur die Zecken von Testimonials und es wird das Datum sein, an dem Sie diese anderen haben. Wir haben also das Datum des Zeugnisses. Es gibt noch diese anderen, die erstellt, veröffentlicht und aktualisiert wurden. Diese werden automatisch generiert zum Beispiel zu dem Zeitpunkt, zu dem die Liste erstellt wurde , als sie veröffentlicht wurde. Dies wurde noch nicht veröffentlicht, daher wird eine Zeit damit verbunden sein , und wenn es aktualisiert wurde, möchte ich im Moment keine davon haben. Sie werden später nützlich sein, aber Datum des Zeugnisses. Perfekt. Ordnung. Du kannst also rumhängen, wenn du willst. Eigentlich habe ich das schon gesagt, oder? Ich werde es einfach durchgehen und stylen. Also mache ich es im Geschwindigkeitsmodus, diesmal im aktuellen Geschwindigkeitsmodus. Ordnung, das ist nicht sehr sexy, aber ich habe es geschafft, richtig. Lass uns im nächsten Video ein bisschen mehr mit dieser Liste spielen . 89. Neuorganisieren, was aus der Liste der Webflow angezeigt wird: Hallo zusammen. In diesem Video nehmen wir diese Liste und können die angezeigten Informationen neu organisieren. Wir können entscheiden, nur diejenigen zu zeigen, die Testimonials für die Software Photoshop sind, oder mir nur diejenigen zeigen, die Bilder haben, oder mir nur die ersten drei und dann andere neueste Testimonials zeigen . Holen wir uns unsere Liste , um unsere Gebote zu erfüllen. Lass mich dir zeigen wie. Lass uns etwas neu organisieren. Und im Moment zeigt es mir zu viele Optionen. Ich wollte vielleicht nur die ersten sechs oder drei zeigen. Was wir also tun können, ist das, was am Ende passiert, ist die Liste. Wenn ich hier irgendwo angeklickt werde, sollte ich in der Lage sein, zu diesem Zahnrad zu gelangen und es zeigt mir Sachen über dieses spezielle Zahnrad. Gehen wir ein Level höher. Lass uns zu den Eltern gehen und es gibt mir mehr Sachen. Okay, und ich kann zurückgehen und sagen, dass ich möchte, dass es zwei Spalten für k oder drei sind, Sie können Elemente einschränken. Ich würde sagen, ich möchte bitte nur drei oder sechs zeigen. Gehen wir zurück zu drei. Das Filtern kann gut sein, weil es mir momentan nur eine Bestellung k anzeigt. Nehmen wir an , dies sind die Testimonials für eine bestimmte Seite, die besagen, dass es sich um die Figma-Seite mit Photoshop-Seite handelt. Was ich tun kann ist, dass ich tatsächlich sagen kann, ich es dir nur in dieser Liste zeigen möchte. Ich möchte nur den Namen zeigen, der nicht dem Namen entspricht, den ich will. Es wird einfach werden. Der Name, den ich anfangen kann zu tippen, ich kann sagen , dass Leute Pam heißen. Und ich habe es falsch geschrieben. Es wird also keine Namen haben. Was ich machen will, es ist wahrscheinlich einfacher, nicht genannt zu werden, aber vielleicht möchte ich diejenigen zeigen, bei denen die Software verwendet wird , die Figma gleich verwendet hat. Perfekt. Es zeigt mir also nur diese Figma-Ergebnisse. Das könnten also Budgetprodukte für Ihre Tags sein. Welche Budgetprodukte werden nicht nur auf dieser Seite angezeigt, oder vielleicht ist es auf einer Seite für Ihr Portfolio, auf der Ihnen Wix-Testimonials angezeigt werden. Es zeigt Ihnen also nur UX-Testimonials. Nico, verstehst du? Nehmen wir an, ich möchte, weil diese Bilder, lassen Sie mich sagen, ob ich das Bild hinzufüge. Also hier drüben werde ich weitermachen und Image gehen. Okay, es gibt viele andere Seiten, die keine Bilder haben, aber sagen wir mal auf der Homepage und vor allem möchte ich, dass Kopfschüsse so aussehen, naja, nicht alle von ihnen haben Kopfschüsse. Was Sie tun können, entfernen Sie es, gehen Sie zurück zum äußeren Wrapper und sagen Sie, zeigen Sie mir drei, aber nicht die Verwendung der Software. Ich möchte nach Bildern filtern, die Bilder haben, Kopfschüsse, die wir gesagt haben, Bildern, die ich gesagt habe , und nach Leuten, die nicht überprüfen wollen, los geht's. Ich muss diese stylen, werde sie im nächsten Video machen. Das ist wirklich sehr mächtig, wie man diese Informationen sortieren kann. Denken Sie auch hier daran, dass Sie dies einzeln eingeben könnten , ohne CMS zu verwenden. Sie können jedoch feststellen, wie nützlich und leistungsfähig es ist, wenn Sie aufhören zu filtern und zu sortieren. Okay, Schwitzen könnte auch nützlich sein. Lassen Sie uns einen Blick darauf werfen, sagen wir, ich werde nach Namen sortieren, aber ich sage das große Datum, an dem das Zeugnis erstellt wurde, das Datum des Zeugnisses. Vom ältesten zum neuesten. Vom neuesten zum ältesten. Okay. Oder es könnte dort sein anstatt das Datum der Testimonials, nur die Daten wurden tatsächlich erstellt oder wann sie aktualisiert wurden? Ja. Vom neuesten zum ältesten. Speichern. Du gehst, weil ich Bilder zu diesen bearbeite , die diese Listenelemente aktualisiert haben. Also sind sie an die Spitze gekommen. Das Letzte, was ich noch nicht erwähnt habe, ist, dass Sie das trennen können. Man kann sagen, dass dieses Ding hier, dieses kleine Zahnrad, man kann sagen, dass es eigentlich kein Testimonial ist, es soll sein, dass es Software verwendet wird. Sie können sie neu zuweisen, wenn Sie möchten. Das ist nicht das, was ich tun möchte. Aber ich habe vergessen zu erwähnen, eines der Dinge mit dem CMS und der Liste ist wie, sollte es mein Portfolio zeigen, eine Liste haben. Sie sollten es nur tun, weil es es schafft, es ist eine gute Praxis, hängt aber davon ab, wie oft Sie es aktualisieren werden. Zum Beispiel, wenn Sie eine Person sind, kein Personen-Portfolio, es jede Woche aktualisieren, vielleicht machen Sie eine Einsen und verlassen es. Wie viele von uns dort ist ein CMS vielleicht eine kleine zusätzliche Arbeit , die Sie nicht benötigen. Aber für vielleicht eine größere Agentur, in der Sie viele Testimonials haben und es viele verschiedene Arten von Kategorien für Ihre geleistete Arbeit gibt. Es ist sinnvoll, ein CMS zu haben. Ich erinnere mich, dass das mein Job war, eine große Agentur, als wir keine Arbeit daran hatten, wo wir Portfoliostücke herstellen weil wir nichts anderes zu tun hatten. Okay, und wir gehen durch, finden gute Bilder, lassen sie zusammen aussehen, schreiben ein paar Berichte. Jemand müsste meine Texte, meine Rechtschreibung und Grammatik überprüfen meine Rechtschreibung und Grammatik und auf die Website hochladen. Cms wäre perfekt dafür. Okay, das ist die Neuorganisation der Daten aus unseren Listen. Sehr mächtig. Lass es uns im nächsten Video stylen. 90. Gestaltung unserer Sammlungsliste mit Grid & Flex in Webflow: Hallo zusammen. Wir werden irgendwie dorthin gehen, wo wir das letzte Video fertiggestellt haben, und wir werden unsere Testimonials stylen. Die wichtigste Neuerung in diesem Fall ist, dass ich diese Liste in ein Raster konvertiert habe, was nicht die natürliche Anzeigeeinstellung für diese Sammlungslisten ist , es gibt standardmäßig Spalten, aber sehr oft Ich möchte sie in Gitter umwandeln und zeige Ihnen wie. Außerdem machen wir ein bisschen Styling. Wir bringen alles auf den unteren abgerundeten Köpfen gleich aus, weil irgendwie alle Menschen mit Köpfen um Kreise herum sein müssen. Es ist wie die Regel des Internets. Ordnung, lasst uns einsteigen. Ordnung, wir beenden die Sache , die du noch nie gemacht hast. Und dann sind viele der anderen Stylings nur Sachen, die wir gemacht haben. Wir werden uns erholen, weil es gut ist, uns daran zu erinnern. Die erste ist , dass im Moment standardmäßig eine Sammlungsliste in der Anzeige namens Spalten angezeigt wird. Wir haben es uns vorher angeschaut und ich sagte: Benutze einfach keine Spalten. Wir werden Grid benutzen. Säulen sind gut, die besten, an ihnen ist nichts falsch. Ich finde sie schwierig, wenn man mehr hat als wir drei Gegenstände haben , wenn es noch eine Reihe gibt und sechs davon, man verliert einfach viel Kontrolle. Es geht darum, wie man sich aufteilt. Es sind nur andere Probleme. Also machst du vielleicht dasselbe und denkst , wie wandelst du es um? Nun, wenn ich zu meinen Anzeigeeinstellungen gehe und das noch einmal durchgehe, also da ist mein Wrapper, verschiebe ihn, um ihn zu blockieren. Ich gehe noch einen höher. Der Platz am Block, keine davon sind zwei Säulen? Als Wade passiert es tatsächlich hier im Einstellungsfeld. Dies ist das einzige Mal , dass dies passiert. Okay, es ist mit diesem speziellen Sammlungslistenelement , das wir hinzugefügt haben. Sie nehmen es irgendwie von dieser Seite und stellen es hier hin. Wir würden, wen machst du das auch? Es gibt ungefähr zwei. Dies sind Rapper auf der Außenseite, um zu sagen, von welcher Liste es stammt. Da ist dieser übergeordnete Rapa, dann gibt es noch einen Wrapper und dann ist da noch meine eigentliche Listenoption. Ich werde es mit diesem machen, denn obwohl wir nicht alle drei Elemente sehen können , ist es das, was es ist. Es gibt eine und sie wird nur ein paar Mal wiederholt. Also die Eltern, ich möchte all diese Typen in ein Raster aufteilen, okay, also musst du ein Raster sein und es wird kaputt gehen. Und ich klicke auf Fertig. Dir gefällt, was hier passiert ist. Sie können sogar sehen, dass der Workflow sagt : Hey, wenn Sie dieses Raster verwenden möchten, müssen Sie die Spalten ausschalten und Sie können sogar auf die Schaltfläche klicken oder hier hingehen. Derselbe, derselbe Ort hier drüben. Und selbst hier gibt es eine kleine Warnung, dass Sie das ausschalten müssen, indem Sie entweder auf diese ausschalten müssen, indem Sie entweder auf Schaltfläche klicken, um dasselbe zu klicken, genauso, Sie gehen und es funktioniert. Es sieht nicht so aus, als würde es funktionieren. Dieser mit diesem riesigen Bild ruiniert mein Layout, aber es funktioniert. Lass uns einen Blick darauf werfen. Habe die Liste gepackt, geh hier rein, sagen wir nur Filter. Lassen Sie mich Kopfschüsse zeigen, die ich für Sie eingerichtet habe oder nicht. Also zeigt es mir meinen dreien diese Säure. Ich schalte das Limit aus. Da hast du es. Das sind die Fälligkeitstermine von meinem Kumpel. Okay. Ich mache das Gegenteil. Zeig mir die, die sitzen. Wenn Sie eines dieser Dinge in ein Raster umwandeln möchten, klicken Sie auf die übergeordnete Liste, nicht auf das übergeordnete Element des übergeordneten Elements. Okay, schalte es auf Raster und dann schalte einfach die Säulen in den Einstellungen aus, was ein seltsamer Ort ist. Ordnung, schauen wir uns zuerst diese Bilder an, da dies auch beim Layout mit einem Raster hilfreich sein wird . Ich werde es auf umstellen, ich habe hier den ganzen Kurs meine Kolumnen hinzugefügt. Sie können sie hier hinzufügen. Ich mache nie irgendeinen Grund, nichts falsch daran. Okay. Ich werde ein ganzes machen, ja, es ist gestiegen. Okay, klicken wir auf Fertig und lassen Sie uns diese Bilder reparieren. War die Aufgabe vorhin. Vielleicht hast du es nicht herausgefunden, vielleicht hast du es getan. Wenn ja, wissen Sie, dass ich die Größe dafür festlegen muss. Nehmen wir an, ich will sie 200 mal 200 machen. Das gefällt mir wahrscheinlich nicht, dass diese ganze Kolumne einfach zu klein ist. Oma, gib dir Eltern, es werden drei sein. Ordnung, es ist wieder gut. 200 mal 200 sind also wahrscheinlich immer noch zu groß. Jetzt habe ich keine Klasse für diese hinzugefügt . Ich nenne dieses eine Bild, umbenennen. Das werden 15150 sein. Ich würde gerne rüberblättern und es wird nur auf deiner Tastatur angezeigt, es war Tab zum nächsten. Und dann sagen wir fit, wir sagen, kann decken. Dann können Sie in Cava hier zu diesen Optionen gehen und entscheiden wo es sich für einen Kopfschuss von der Mitte aus erstreckt . Es funktioniert offensichtlich nicht bei mir, also muss ich wahrscheinlich nach oben in deiner Nähe gehen. Das ist irgendwie das beständigste. Jedermanns Kinn. Das machen wir. Co und alles andere, was wir tun wollen. Dies fügte die abgerundeten Ecken hinzu. Also hier unten, abgerundete Ecken, sag einfach, dass Beat 200 groß ist. Jetzt möchte ich alles auf eine Linie bringen. Und ich habe es schon einmal damit gemacht, nur mit einem Textmitglied, ich habe gerade einen Stil gemacht und ich bin richtig gelaufen Ally, SRE, right align. Und es funktioniert problemlos für Texte. Aber manchmal, wenn es viele gibt , bei denen Sie etwas verpassen müssen, wie können wir dann alles irgendwie in die Mitte bringen? Wie würdest du es machen, wenn du es erraten würdest, den Wrapper greifen und ihn auf nicht setzen Er ist ein Grid-Kind, das wissen wir, aber er kann auch Elternteil von Filmen sein, was nicht funktioniert, weil es vertikal sein muss. Vertikal sollte sowieso der Standard-Workflow sein. Also werden wir sagen: Oh, wir scheinen, das ist es, was ich will. Siehst du, es hat meine rechte Ausrichtung irgendwie außer Kraft gesetzt. Ich muss hier einzeln reingehen und sagen, du bist das Kind der Flexbox und du kannst deine eigenen Regeln aufstellen. Aber ich bin glücklich, wo es war. Lassen Sie uns zunächst sehr wichtig sein. Es ist kursiv geschrieben, was bedeutet, dass es sich um gesprochenes Wort handelt. Aber ich habe das Gefühl, wenn es wie eine Serifenschrift sein muss , um Spiegel mit einem guten, in Ordnung, wo werde ich meine Polsterung hinzufügen? Ich möchte nur alle Abstände machen. Hier drücke ich meinen Aufwärtspfeil, um den Elternteil zu schnappen. Ich sehe mir meine Beine an. Hey, vielleicht kann ich das alles hier mit den Reihen machen. Entschuldigung. Nein. Ich kann das definitiv nicht tun, weil es zwei separate gibt. Also werde ich nur sagen , dass Sie entweder das Bild mit einem kleinen Boden versehen können, oder die Testimonial-Texte können ein bisschen Schinken oben drauf haben . Also tust du es, ich mache es in diesem Fall, weil ich nur denke , wenn es Zeiten geben wird, in denen es vielleicht kein Bild gibt und sie nicht benötigt werden, wäre keine Polsterung darüber oder Rand erforderlich. Also du Abstand. Als Nächstes möchte ich sehen, dass sie nicht unten anstehen. Okay? Diejenigen, die zu tun sind, die tatsächliche Größe der Wörter ist sehr nahe beieinander, als ob sie fast in derselben Zeile stehen. Geht dieser kaputt? Ja, dieser geht in eine andere Zeile über. Also was wir tun werden ist, ich will, dass alle Namen in derselben Reihe stehen. Wie mache ich das? Erinnerst du dich, dass du es jetzt ein paar Mal gemacht hast? Erinnerst du dich? Gut, ja. Ich hole dich. Ich muss es keinem von ihnen antun. Kann einer von diesen sein. Und ich sage, erinnerst du dich? Wir sagen nur, dass Sie eine gewisse Fehlerquote haben. Denken Sie daran, dass das Flussmittel bereits auf die Elternhülle aufgetragen wurde und dann auf das Kind, Sie sagen einfach, seien Sie automatisch oben und wir drücken es nach unten. Nett. In Ordnung, das ist es. Ändern Sie Ihre Sammlungsliste in ein Raster. Du musst nur die Spalten in den Einstellungen ausschalten, was seltsam ist, aber alles andere, was wir getan haben und es sieht besser aus. Ordnung, das ist es. Wir sehen uns im nächsten Video. 91. Kursprojekt 07 - Kitchen: Hallo zusammen. Es muss Klassenprojektzeit sein. Dieser ist einfach. Es ist ein nettes kleines kompaktes eigenständiges Projekt. in diesem Fall Machen Sie sich in diesem Fall entweder eine neue Seite oder eine neue ganze Website nach Ihren Wünschen. Es wird im Kurs nicht weiter verwendet. Das ist also ein bisschen wie ein kleines eigenständiges Projekt. Deshalb habe ich Ihnen einige Daten für diese Küchenkollektion gegeben . Ähnliches Verfahren wie bei den Testimonials. Okay, ich gebe dir nur neue Daten, die verwenden kannst, damit du deine eigenen erstellen kannst. Es gibt also eine CSV. Es steht in den Übungsdateien unter Blog. Obwohl wir noch keinen Blog erstellt haben, ist es sowieso der Blog-Bereich in meinen Notizen. Okay. Und hier ist eine namens Kitchen Collection. Es gibt also eine CSV, die den Namen des Designers, seinen Standort und seine Website enthält. Und es gibt ein entsprechendes Bild, C jj design studio. Dazu gehört auch ein Bild. So können Sie die CSV-Daten importieren und das Bild dann manuell hinzufügen. Ich möchte, dass das Bild Teil der Datenbank es nicht nur separat als Bild hinzufügt, obwohl ich es nicht erkennen kann. Schauen wir uns das mal an. Also Ed und style die Kollektion. Großartig. Dort befinden sich die Dateien bei allen Daten, bei allen Bildern in der Liste. Und diese hier wollte ich sehen, ob du die URL, die dieses Ding hier ist, zum Profil machen kannst . Kannst du das zu einer Schaltfläche anstelle eines Textlinks machen? Ich habe dir nicht gezeigt, wie das geht, schau, ob du es schaffen kannst. Es gibt ein paar Möglichkeiten, wie ich mir zwei vorstellen kann Wenn Sie wirklich nicht weiterkommen, die Kommentare, stellen Sie eine Frage, beantworten Sie eine Frage. Sonst noch was? Nee. Wenn Sie fertig sind, machen Sie einen Screenshot. Jetzt habe ich Ihnen Bilder gegeben, wenn Sie die CSV-Daten mit den Namen und so verwenden möchten , und dann andere Bilder von Küchen suchen , damit Ihre etwas anders aussieht. Sie haben besser schmeckende Küchen. Das mag ich sein, ich bezweifle es sehr. Aber zumindest, wenn Sie Ihre eigenen Bilder auswählen würden, würde alles ganz anders aussehen, anstatt dass alle gleich sind. Sobald Sie es getan haben, machen Sie einen Screenshot, der zu den Aufgaben hochgeladen wurde , und teilen Sie ihn mir in den sozialen Medien mit. Ich will sehen, was du tust. Teilen Sie mit anderen, wenn Sie auf Probleme stoßen und wie Sie sie behoben haben, ist das Teilen wichtig. Okay, mach dein Projekt und wenn du fertig bist, sehe ich dich im nächsten Video. 92. Ermöglicht es deinem Client, die Website im Webflow zu aktualisieren: Hallo, dieses Video schauen wir uns den Editor an. Ich habe viel über den Herausgeber gesprochen, aber das haben wir nicht getan. Wir arbeiten schon lange in der Designerin. Der Editor ist die Möglichkeit, Ihren Kunden oder Kunden, Ihren Mitarbeiter, Ihre Mutter oder Ihren Vater zu gewinnen, für den eine Website erstellt wurde. Es ermöglicht ihnen, Änderungen vorzunehmen. Sie können die Seite durchgehen, die Live-Site hier, Sie können sehen, dass ich sie tatsächlich durchgehen und eine Änderung vornehmen kann. Ich kann mir ein neues Bild aussuchen, okay. Sie können veröffentlichen. Die Seite wird aktualisiert. Sie können die Formulare überprüfen , die möglicherweise auf der Website ausgefüllt wurden. Alles ohne zu dir zurückkommen zu müssen. Sie können Änderungen vornehmen und von der Website aus veröffentlichen. Sie können auch Dinge zu unserem CMS hinzufügen und ein neues Testimonial hinzufügen. Kein Problem. Schau, wir haben hier unten Zeugnisse. Fügen Sie ein neues Testimonial von der Website hinzu, ohne zu Ihnen oder über Webflow zurückkehren zu müssen, können Sie alles im Browser erledigen. Super schick, ich liebe es. Es ist wahrscheinlich eine meiner Lieblingsfunktionen von Webflow. Wir müssen nichts tun, fangen Sie einfach an, es zu benutzen. Ordnung, machen wir das. Fangen wir an, es zu benutzen. Die erste, die wir machen werden, ist nur eine statische Website. Wir möchten, dass der Kunde in der Lage ist, die Ticks zu ändern, Änderungen an der Schaltfläche vorzunehmen und die Bilder auszutauschen. Nur Sachen, die nicht zu uns zurückkommen mussten, ohne dass CMS involviert war. Die Regeln lauten, dass es entweder auf Ihrer Staging-Domain veröffentlicht werden muss oder ich werde die Hauptdomain verwenden. Okay, und dann kannst du hier rüber gehen und sagen, oder ist es ein gemeinsames Projekt? Wir haben uns Shear erst vorhin angeschaut, das ist zum Teilen mit anderen Designern gedacht. Dieser hier ist das, was Sie benötigen, um Personen Zugriff auf die Website zu gewähren , ohne zu Ihnen zu kommen oder Webflow zu durchlaufen. Eine Sache, die Sie dabei beachten sollten, ist, dass Sie im Moment einen Mindestplan benötigen . Ist das c dasselbe S1? Okay, Sie dürfen also drei Gastredakteure mit diesem haben, Sie können die Unterschiede irgendwie durchgehen und sehen. Okay, also ich habe meins bereits aktualisiert, ich glaube, ich kann mich nicht erinnern, was wir herausfinden werden. Wenn ich darauf klicke, wurde es den Mitgliedern klar, okay, und ich werde einen Gastredakteur hinzufügen. Sie können direkt zu Ihren Projekteinstellungen gehen und zu Mitgliedern kommen. Okay, ich gehe zum Gastredakteur. Das Kühlmittel bekommt einen Editor, seltsamer Name. Ich nenne es gerne Kundenredakteur, Kundenredakteur, Mitarbeiterredakteur, ich bekomme Vermutungen, gebe eine E-Mail-Adresse ein, entscheide, ob sie bearbeiten oder bearbeiten und veröffentlichen können. Was passieren kann, ist, dass Sie den Leuten erlauben können, es zu bearbeiten und bereits zu erstellen und Entwürfe zu erstellen. Und dann muss jemand anderes der Herausgeber sein, Inhalte erstellen, aber nicht in der Lage sein, diese zu veröffentlichen. Also kannst du bitte beides machen. Danke. In Ordnung, ich gebe eine E-Mail-Adresse ein und klicke auf Senden. Sie erhalten eine E-Mail und wir öffnen die E-Mail, okay, sie können entweder auf den Link klicken, den Sie ihnen per E-Mail senden, oder nach einer Weile erfahren sie , dass Sie einfach ein Fragezeichen eingeben können und tippen Sie auf einer beliebigen Webflow-Site bearbeiten ein. Und wenn Sie den Benutzernamen und das Passwort hier unten kennen , geben Sie das ein und Sie können mit der Bearbeitung der Website beginnen , und ich gebe meine ein. Ordnung, sobald du dich eingeloggt hast, siehst du unten diese kleine Leiste. Und es ist cool. Sie können zu verschiedenen Seiten Ihrer Website springen und diese bearbeiten. Sie können entscheiden, in Ordnung, sie müssen durchgehen und sagen: In Ordnung, es geht nicht darum, Dan und Cushion zu fragen, wir haben mehr als ein Teammitglied. Wir sind es. Jetzt eine Frage. Okay, und hier drüben kann ich auf Veröffentlichen klicken, okay? Weil ich die Möglichkeit hatte, zu bearbeiten und zu veröffentlichen und zu beobachten, was passiert. Ordnung, also das ist die Live-Site aktualisiert und wir können zur Live-Site zurückkehren, aber es wird einfach unsere Bearbeitungsfähigkeiten los . Und das hat sich auf dieser Website für immer geändert, auch zurück in Webflow. Was das ist, wenn ich als Designer reingehe, muss ich nicht akzeptieren oder eine andere Version eines Gehe zur Kontaktseite haben . Siehst du, es ist unglaublich. Sie wurden auf der Website aktualisiert, dann können Sie sie hier aktualisieren. Deshalb musst du das vielleicht haben. Sie können bearbeiten, aber vielleicht nicht veröffentlichen, nur für den Fall, dass sie den Ort jetzt mieten, um die Dinge bearbeitbar zu machen, okay, vielleicht wird unbearbeitet sagen aufhören, den Submit-Button zu ändern. Wenn Sie es hier und unten in Ihrer Einstellungsoption auswählen , gibt es eine Option, die besagt, dass die Schaltfläche nicht über die Schaltfläche Fertig geändert werden kann. Wir ändern Leben, um hier auf diesen Text zu klicken. Gehen wir zu Einstellungen und Einstellungen. Mitarbeiter können dieses Element bearbeiten. Ich bin mir nicht sicher, warum Buttons das nicht sind. Da hast du es. Gehen wir auf die Homepage. Du kannst Bilder bearbeiten, sieh dir das an. Sie können entscheiden, ob sie es tun oder nicht. Schauen wir uns an, was mit Bildern auf ihrer Website und Formularen passiert und ein paar andere Dinge. Also gehe ich zurück in den Editor. Sie können es selbst machen, als ob ich dort vorgab, der Kunde zu sein. Sie können tatsächlich so tun , als wären Sie selbst der Kunde und gehen Sie einfach zum Redakteur dieses Projekts. Okay, das ist also der Designer , den wir den ganzen Kurs besucht haben. Das ist der Editor, und ich muss mich nicht anmelden, da ich bereits angemeldet bin. Also kann ich hier hingehen, auf das Bild klicken und einfach ein anderes auswählen. Ordnung, klicken wir auf Öffnen. Es wird hochgeladen. Sie müssen daran denken, zu veröffentlichen. Es ist ziemlich nett. Ich komme da rüber, um mir ein Bild Die andere Sache, die man sich ansehen sollte, wird hier als Formular gemacht. Wir haben ein Formular und die Site K, und der Kunde kann diese Formulare jetzt hier durchgehen und überprüfen und in CSV exportieren. Okay, wenn hier keine Daten angezeigt werden oder es nur Dinge gibt, die du einfach nicht wissen willst. Sie können sagen, schalten Sie vielleicht die E-Mail aus und zeigen Sie es mir einfach , weil Sie möglicherweise viele verschiedene Informationen sammeln . Aber es bedeutet, dass sich der Kunde auf dieser Seite irgendwie selbst betrachtet . Schauen wir uns die Aktualisierung des CMS wie zuvor an. Stellen Sie sicher, dass es veröffentlicht ist. Sie können sie einladen, kamen herein, laden aber einen Gastredakteur unter der E-Mail-Adresse ein. Und dann, in Ordnung, jetzt sind wir dabei und wir sind gerade ein bisschen schlecht geworden. Und unten, der Unterschied ist, dass wir Codesammlungen für Sammlungen und Testimonials haben . Möglicherweise haben Sie hier viele verschiedene Sammlungen, Blog-Beiträge, Testimonials, Mitarbeiter. Und Sie können entweder darauf klicken oder hier auf diesen kleinen Tab klicken. Sie können dieselbe Art von Liste sehen, aber sie ist weiß. Und Sie können sagen, ich kann ein Testimonial hinzufügen , das dies ausfüllt. Ordnung, füge ein Bild hinzu. Okay, War, welche sind diese leckeren? Wir haben die Kiwi eine Weile nicht mehr benutzt. Und Datenaussagen sechs rückwärts für mich. Es ist also der Monat, das ist der Tag, an dem wir das Jahr machen würden . Instagram-Link. Ordnung, und die Software , die wir verwenden, ist Adobe XD. Nehmen wir an, klicken wir auf Erstellen oder Als Entwurf speichern. Okay. Es wird zur Veröffentlichung bereitgestellt. Veröffentlichen Sie es. Ja, bitte. Sehen wir uns die Seite hier oben an. Nun, es denkt darüber nach, mein Verlagswesen. Nun, es hat funktioniert, seit es noch veröffentlicht wird, aber los geht's. Hat funktioniert. Okay. Es erscheint vielleicht nicht, abhängig von den Regeln, die Sie im Moment für Ihre Liste haben. Ich habe zuerst das Neueste, ich bin mir ziemlich sicher, aber es ist ein Lebensretter , dem Kunden, den Sie eingerichtet haben, geben zu können . Sie müssen sie nicht dazu bringen, die Seite zu betreten und sie jedes Mal zu ändern. Sie müssen sie nur dazu bringen, weitere hinzuzufügen. Stellen Sie sicher, dass sie das Gefühl haben, dass alle Felder und sie auf dieser Seite angezeigt werden können. Es wird möglicherweise auf 20.000 anderen Seiten angezeigt, weil Sie sie alle miteinander verbunden haben. Du hast diese Liste an vielen verschiedenen Orten. Super praktisch, in Ordnung, damit Ihr Kunde die Website aktualisieren kann. Sie können entweder den Link verwenden, über den Sie ihnen ständig senden. Denken Sie jedoch zuerst an ein Fragezeichen und geben Sie dann edit ein. Wir werden dies unten öffnen, wo sie die Details eingeben und mit der Bearbeitung beginnen können. Und ich werde dich drängen. Ordnung, wir sehen uns im nächsten Video. 93. Wie man Blog mit CMS in Webflow erstellt: Hallo zusammen. Wir werden unsere nahtlose Sammlung wie zuvor nehmen , aber in diesem Fall Blog-Beiträge in Seiten verwandeln , hässliche Seiten. Wir haben sie noch nicht gestylt. Das machen wir gleich. Aber sieh mal, ich habe nicht alle diese Seiten erstellt. Sie wurden für mich von with flow basierend auf dieser Liste generiert . Aber die Sehne, zwei Seiten, hässliche, ungestylte Seiten. Es ist ungefähr diese Zeit im Kurs, in der ich war, und wahrscheinlich wirst du dich wie starke, selbstbewusste Webdesigner fühlen , bei denen wir mit wenig Aufwand viele Sachen produzieren. Lassen Sie uns einsteigen und ich zeige Ihnen , dass ich, wenn Sie mitmachen, meine Testimonials, die wir im letzten gemacht haben, veröffentlicht habe und festgestellt habe, dass ich es falsch geschrieben habe. Das ist mein Zeugnis. Nägeln. Das ist auf einer eigenen Seite, also bin ich wieder frisch auf der Homepage und bereit, zwischen denen zu wechseln es nicht gibt. Sie hatten kein Herz. Lösche sie. Wie erstellt man die Seite? Der Anfang beginnt gleich, um eine Sammlung zu erstellen. Also werden wir ein neues erstellen. Wir haben alle unsere Testimonials. Wir werden einen Blogbeitrag schreiben. Jetzt gibt es Vorlagen. Schau dir das an, ich klicke mich durch ein paar davon, eigentlich Blogpost und es ist gerade vorgefüllt und das Zeug unten hier unten, du kannst irgendwie Post Buddy, Post-Zusammenfassung, das Bild, das Thumbnail-Bild sehen , Nur praktische Dinge, um loszulegen und Ihnen einige Ideen zu geben , wofür Sie Sammlungen möglicherweise auch verwenden können. Also Teammitglieder, sie biografische Berufsbezeichnung. Sie können sehen, wir beginnen mit Blogbeiträgen. macht jeder. Siehst du hier unten, willst du da noch etwas hinzufügen? Alles gut. Okay, für diesen werden wir die Kollektion erstellen. Was passiert dann? Wir haben keine Daten. Okay, anstatt Ihnen welche zu geben, zeige ich Ihnen, dass Sie durchgehen und Beispieldaten hinzufügen können . Es ist nur Müll, dass Webflow , Eds, auch irgendwie verrückt ist. Richtet sich an Blogbeiträge. Denn wenn du ein Rezept machst, werden es genau die gleichen Namen haben. Es wird ein Rezept der historischen Geschichte des Webdesigns geben. Und es wird keinen Inhalt darin haben. Es wird also für diesen Blog-Posts funktionieren, weil sie irgendwie wie Blogpost-Titel sind. Lass uns einen Blick darauf werfen. Sie haben für uns den Namen The Slug eingegeben, was jetzt sinnvoller ist, kurz bevor diese Testimonials nicht auf ihrer eigenen Seite veröffentlicht wurden, also war es egal, was die Kugel war. Jetzt können Sie jedoch meine Website unter Post-Slash den Namen des Beitrags sehen , was gute Keywords sein sollten. Okay, das ist etwas, auf das sich jemand verlinken kann. Es ist in einem grundlegenden Textkörper enthalten. Es heißt Rich Text, dieses Zeug. Und es ist ein Bild zu bearbeiten, sowohl das Hauptbild als auch ein Miniaturbild. Und wir schauen uns diese vorgestellte Option an. Mit diesem Listenelement ist eine Farbe verknüpft , was ziemlich cool ist. Ordnung, das sind also meine Listenelemente. Was passiert jetzt? Ich werde sagen: Nun, das hat es heute nicht geändert. Jedenfalls. Es ist nah dran. Du sagst, Wow, wie erstelle ich alle Seiten bevor wir plus gegangen sind und ziehe einfach den Listeneintrag auf. Aber das ist noch nicht alles, was wir mit diesem Zeug machen werden. Okay, was passiert ist das irgendwie schon gemacht, was cool hier oben ist, keine Seiten. Statische Seiten sind jetzt also sinnvoller, oder? Und das sind Seiten für Ihre dynamischen Seiten, Sie werden Miss Collection Pages sehen. Und da ist es. Da ist meine Vorlage für Blogposts. Wenn wir hier reingehen, haben wir eine leere Seite. Hey, das ist die Vorlage , die all diese Listenelemente, alle Männer kennen. Wie viele haben wir um 510 gebeten. Wie auch immer, wir haben viele verschiedene Blog-Beiträge. Alles was wir tun müssen, ist einen von ihnen zu stylen. Also lasst uns ein paar grundlegende Dinge machen. Also ich bin in der Vorlage, okay, stell sicher, dass du in der Vorlage bist. Ich gehe zu meiner, ich verwende eine etwas andere Methode. Ich werde das Control E für PC oder Command E auf einem Mac verwenden . Und ich werde sagen, ich will wieder einen Container Command T. Und ich sage, ich will zuschlagen. Also ich will Command oder Control E. Ich möchte ein Bild. Command and Control E, und ich will einen Text. Ich möchte, ich möchte einen Textblock, der das Datum hat, an dem dieser Blog erstellt wurde. Dann wird noch einer Tics sein. Jetzt haben Sie einen Textbereich , den Sie vielleicht denken, Oh, Sie können ihn hier verwenden, weil das wie aus den Formularen stammt, aber es ist ein schöner großer Bereich. Hab dir das hinzugefügt. Es heißt, nein, das ist nur Aufführungen, finde etwas anderes. Du kannst es tun. Text. Wir schauen uns Rich Text an. Wir werden uns Rich Takes in einem Video ansehen sehr bald richtig erscheint. Aber im Grunde erlaubt es dir, ein Lehrbuch zu haben und darin Überschriften und allerlei Dinge zu haben. Ko, ist es das? Sind wir fertig? Nein. Das sind nur Platzhalter. Du kannst sehen, es heißt „ Schlagen mit meinem Schlagen“. Es war mein Bild. Was Sie also tun müssen, genau wie wir es zuvor mit der Liste getan haben, wir binden sie an die Datenbank. Wir sagen dir, wir müssen sie nicht wie zuvor in einen Rapper stecken . Du sagst nur, du verbindest dich mit welchem? Verbinde dich bitte mit dem Blogbeitrag. Es weiß es, weil der Vertreter bereits da ist, weil wir in der Blogpost-Vorlage sind . Okay, und was bedeutet es daraus, den Namen des Blogs zu verwenden. Habe es angeschlossen. Okay, und jetzt werden im Grunde alle diese miteinander verbunden. Aber was jetzt passiert ist, ist, dass alle deine Seiten erstellt wurden , eigentlich nur fünf oder sechs. Ich gehe auf die andere Seite, Akkord, fünf Webdesign-Blöcke. Schau dir das an. Die Seite ist fertig. Es ist nicht sehr gut gestylt. Aber das war's. Sie haben alle diese Seiten erstellt, die in einer Sekunde von der Homepage aus auf sie verlinken , aber alle Seiten sind erstellt. Lassen Sie uns ein paar Dinge durchgehen und verbinden. Lass uns gehen und die Blog-Beiträge verbinden. Und ich möchte, dass du es von meinem Hauptbild bekommst. Du gehst, in Ordnung, dieser, er eigentlich, ich will das darunter haben, diesen hier. Okay, dieses Textfeld wird eigentlich von der stammen, wir haben dieses eine Datum nicht erstellt oder veröffentlicht. Diese sind jedoch automatisch da weil sie wissen, an welchem Tag Sie sie veröffentlicht haben. Darauf kann ich klicken. Meins ist noch nicht veröffentlicht, weil ich es nicht veröffentlicht habe. Es weiß es also noch nicht wirklich. Meins endete mit dem, was es endete. Das war merkwürdig. Es ist in Ordnung. Das kostet hier aus irgendeinem Grund Taschen. Während ich wusste, warum nicht veröffentlicht wurde mache ich einfach einen CreateDon-Beitrag hier unten. Es würde hier unten erscheinen , um darauf veröffentlicht worden zu sein , wenn es veröffentlicht worden wäre. Der Moment wird also leer, weil er nicht veröffentlicht wurde, was ein bisschen komisch ist. Damit können wir leben. Nun der Rich-Text, den du dir schnappen willst, der Eltern-Rapa, nicht die Dinge dazwischen sind nicht die Dinge, die hier drin sind, der Rich-Text-Block. Und das möchte ich an den Pfostenkörper anhängen, bei dem es sich im Moment nur um Loren ipsum handelt. Und das war's. Wir haben alle unsere Seiten. Ihr habt alle unterschiedliche Bilder, alle verschiedene Überschriften, alle das gleiche Datum, weil dort alle zur gleichen Zeit hochgeladen wurden. Da hast du es. Es ist gut, wenn Sie an einer Seite arbeiten , an der Sie arbeiten möchten, Sie entscheiden einfach, um welche Seite es sich handelt, und dann beginnen Sie, an Ihren Stilen zu arbeiten. Aber Sie möchten sie wahrscheinlich einfach durchforsten oder sehen, was mit einem wirklich langen Titel im Vergleich zu einem kurzen Titel, einem großen Bild oder einem kurzen Bild passiert einem kurzen Titel, einem . Halten Sie auf einem Mac die Umschalttaste und die Wahltaste gedrückt und verwenden Sie die Links- und Rechtspfeile. Es dauert eine Weile, bis die Bilder aktualisiert sind. Auf einem Mac sind es Shift und Alt und verwenden Sie Ihre Links- und Rechtspfeile. Geh einfach durch und sag, ja, das passt. Dieser hier ist in zwei Zeilen aufgeteilt. muss ich mich befassen. Du gehst und stylst es, Styles dazu. Ordnung, das macht die Seiten wirklich gut, sehr schnell und einfach. Natürlich kannst du das. Das ist etwas , was der Redakteur so machen kann, wie wir es zuvor getan haben. Sie können reingehen, sie können die Liste oder die Sammlung finden , tut mir leid, und ihre eigenen Listenelemente durchgehen und hinzufügen. Ich habe auf das Zahnrad geklickt, auf das Zahnrad geklickt, auf das eigentliche Ding geklickt. Es wird in der Lage sein, neue Blog-Beiträge hinzuzufügen oder du kannst, vom Windstrom bis zu dir. Wir werden es ein bisschen stilisieren. Lass uns den nächsten Chunk machen, wo wir von der Homepage aus darauf verlinken. Das war für mich etwas schwierig zu verstehen, also füge ich es in ein anderes Video für dich ein. 94. Verknüpfung zu einer Sammelseite von der Homepage in Webflow: Hey, in diesem Video haben wir Seiten mit Blogbeiträgen. Wie verlinken wir von anderen Seiten auf sie? Messen Sie, ob wir eine Homepage hatten und wir hören möchten , ob das mit ihnen verbunden ist? Da haben wir's. Wir erstellen eine Sammlungsliste und dann können wir auf diese Dinge klicken. Wir haben eine Sammlungsliste für unsere Testimonials erstellt, aber sie hat nirgendwo verlinkt. Wir haben gerade Informationen angezeigt. Sie können genau dasselbe tun, aber tatsächlich auf das Listenelement verlinken , wie es hier angezeigt wird, wie wir auf einer eigenen Seite. Lass mich dir zeigen wie. Ordnung, also haben wir unsere Seiten. Wie verbinden wir uns mit ihnen? Gehen wir zu, wir machen es auf unserer Homepage. Ich gehe immer da hoch. Du kannst dorthin gehen. Spielt keine Rolle. Startseite. Und wir fügen einfach eine Sammlungsliste hinzu, wie wir es zuvor getan haben. es irgendwie unterbrochen, weil man manchmal nur eine eigene Sammlungsliste haben möchte , wie ihre Testimonials, und man braucht keine Seiten, und es ist ein bisschen einfacher zu verstehen als mache sie beide gleichzeitig. Aber wir wissen, was dieser Typ ist. Wir kennen dich in meinem Container, meinen Sammlungsgegenständen. Ich verbinde sie mit der Sammlung. Also Blogposts und Sie können sehen, denken Sie daran, dass dies nur temporäre Platzhalter sind. Du kannst sagen, was will ich hier drin haben? Nun, im Moment freue ich mich, dass sie sich erstrecken , denn ich füge einen Button hinzu. Ich klicke auf Command oder Control E. Ich tippe die Schaltfläche ein. Wo wird dieser Knopf hingehen? Nun scheint dieses lila Bild auf statische Seiten zu verlinken. Nichts hat mit der Seite der Purple One Collection verlinkt. Welcher im Besonderen? Man wählt nicht wirklich aus einer Liste. Du sagst einfach, weil wir all diese Dinge aktualisieren , beobachte, was passiert. Aktueller Blog. Wir haben all diese Seiten vor einer Sekunde, ich hatte den Titel davon, also wussten wir irgendwie, was es war. Denken Sie daran, rückgängig zu machen, rückgängig zu machen, bevor ich den Button dort hinzufüge Es weiß also, dass die Box weiß, was sie tun muss. Und wenn wir eine Schaltfläche hinzufügen und wiederholen, wiederholen, wiederholen, okay. Der Button kann zum Blogbeitrag gehen , sodass er weiß, was es war und er wird dort hingehen. wird einfacher, wenn Sie einfach sagen, holen Sie sich den Text auch aus dem Namen des Blogposts und machen Sie das tatsächlich richtig. Da hast du es. Macht es das klarer? Wenn diese Schaltfläche angeklickt wird, wird sie dort angezeigt. Ordnung, ich werde auch ein kleines Bild hinzufügen, nur damit es für die Homepage ein bisschen einfacher ist und weiß, wohin Sie gehen. Also der Wrapper, du, wir haben das vor mir gemacht. Lass uns sie holen. Warum nicht? Fügen wir einem von ihnen ein Bild hinzu. Okay, es wird über meinem Button sein, um es aus den Blogbeiträgen von dem zu bekommen , was mein Miniaturbild angeheizt hat. Hervorragend. Und was ich tun werde, ist ein bisschen Text hinzuzufügen. Ich sage „Lehrbuch“. Geh da rein, bitte. Okay. Und das wird auf den Titel, den Namen, verlinken. Und da ist eine Schaltfläche die den Text anzeigt, dass es sich um Schaltflächentexte handelt. Und hier heißt es „ Mehr sehen“. Ordnung, wir können es mehr stylen. Okay, aber wir haben sie alle da und du sagst, wow, das ist die Homepage. Ich will sie nicht alle zeigen. Wie zeige ich nur einige von ihnen? Erinnerst du dich, wie ich es filtere? Du hast es verstanden. Du filtert es hat einen coolen Filter oder sortierst k. Lass uns Oberfläche machen. Also noch einmal, wenn ich meine Sammlungsliste auswähle, werde ich sagen, dass wir sie tatsächlich nach dem sortieren, nicht nach dem Namen, aber die Daten wurden veröffentlicht oder noch nicht veröffentlicht. Also lasse ich das hier. Das ist wahrscheinlich der beste, aber keiner von ihnen wurde veröffentlicht, also wird es nichts bewirken. Also werde ich das Datum nennen, an dem sie vom neuesten zum ältesten erstellt wurden , und klicke auf Speichern. Ich werde sagen, zeig mir die ersten vier D los. Auf diese Weise können Sie Ihre Homepage möglicherweise mit den neuesten dort haben. Hey, ich kann eine Vorschau sehen und sagen, geh zu dieser Seite dort. Hervorragend. Ich brauche ein Navi, um zurück nach Hause zu kommen. Du weißt, wie das geht. Die andere Sache, die Sie tun könnten, ist, uns vorgestellten Funktionen anzusehen, weil sie im Moment vielleicht sehr lustvoll sind. Sie müssen das älteste bis neueste alphanumerische Zeichen haben, ungefähr so. Wohingegen sie sagen, ich will nur vier davon auswählen. Ich möchte sie wählen. Sie können die Bestellung nicht abholen. Das ist es, was der kleine Schalter sehr nützlich ist. Werfen wir also einen Blick auf unsere Listensammlung. Schauen wir uns unsere Blogeinträge an. Und lass uns einen Blick darauf werfen. Es gab eine Option am Ende dieser Spruchwörter, du sagst, woher kam das? K um selbst eines hinzuzufügen, bearbeiten wir die Testimonials. Dies ist ein Projekt von früher im Kurs, und Sie tun es nicht mit der Liste, sondern mit der Sammlung. Sagen wir, ich möchte diese Sammlung aktualisieren, okay, um ein Feld namens switch einzuschließen. Die Bezeichnung für den Switch wird lauten, Sie könnten einen Switch für, ich weiß nicht, Photoshop hinzufügen . Sie können es einschalten und sagen, dass nur diejenigen angezeigt werden, bei denen der Schalter für Photoshop aktiviert oder neu oder vorgestellt ist. Was auch immer Sie verwenden möchten oder für nützlich halten, um sie einzuschalten, haben Sie möglicherweise einen Rabatt und sind sich nicht sicher, warum Sie es verwenden. Die Funktionen funktionieren in diesem Fall hervorragend. Okay, jetzt habe ich diesen kleinen Feature-Switch. Und tatsächlich speichern Sie Ihre Änderungen. Also Sammlung. Nun hast du den gleichen Platz mit Blogbeiträgen beendet, man kann sagen, dass hier unten eingeschaltet ist. Ich hab was, fünf davon. Ich werde nur die Threonin-Geschichte drehen. Ich werde nur aufgrund der Geschichte und der fünf Webdesign-Blogs weiter gehen. Also werde ich das schnell durchgehen und nur zehn davon. Okay, also ich habe nur Geschichte und fünf Webdesign auf. Ich werde das schließen und sie gehen auf meine Homepage und ich werde hier einen Filter machen. Also hier ist meine Sammlungsliste. Ich werde sagen, dass ich es gerne sortieren würde. Eigentlich will ich es nicht sortieren. Ich möchte Filter anzeigen. Okay, ich klicke auf Filter. Was Bi ist mein kleiner vorgestellter Switch, und ich wollte nur Switches einschalten. Wenn es nicht aktiviert ist, kannst du nicht auf der Homepage sein und du kannst durchgehen und den Namen davon sagen, was Homepage heißen sollte. Ich habe keine Funktionen funktioniert. Cool. Okay, wir müssen es mehr stylen, aber das ist die Art etwas wie die Homepage mit all deinen CMS-Blog-Posts in deinem Listenelement zu verbinden all deinen CMS-Blog-Posts , vielleicht hast du die verschiedenen Kategorien, okay, als Dropdown könnten Gesundheit und Schönheit, Ihre Ausbildung oder was auch immer die Kategorien sein Ihre Ausbildung oder was auch immer , die Sie für Ihre Website haben. Und auf dieser Seite, auf der Sie sich auch befinden, sagen Sie, es ist die Gesundheits - und Schönheitsseite. Sie können Filter nur für diejenigen aktivieren, die es sind, Sie können mehr als einen hinzufügen, der vorgestellt wird. Außerdem habe ich diese Option hier nicht , bin aber auf Gesundheit und Schönheit eingestellt. Vorgestellt in Gesundheit und Schönheit und dann nach den neuesten, supermächtigen Produkten sortiert. Ordnung, nehmen wir an, Sie möchten es manuell machen. Lass es uns in einem anderen separaten Video machen. Als nächstes sehe ich dich dort. 95. Manuelle Verknüpfung zu einer Sammelseite in Webflow: Hallo zusammen. In diesem Video werden wir einen Button machen , wo wir wollen. Es wird also zu einer Sammlungsseite springen , weil wir dort gespeichert haben. Es ist ein bisschen hackig, aber manchmal braucht man einfach einen Knopf, um zu gehen, wenn man ihn braucht. Das Erstellen von Sammlungslisten ist großartig. Sie sind alle dynamisch super cool gemacht, aber manchmal geht der Höhlenmensch-Knopf weg. Ich möchte Ihnen zeigen, wie Sie sie manuell verbinden können. Wir kommen von der Homepage aus rein. Ich habe diese Liste, die wir ignorieren werden. Diese Sammlungsliste würde es über eine einfache Schaltfläche in einer Liste erledigen . Okay, wir sagen nur , hier ist ein Knopf. Wie bringen wir es außerhalb der Liste? Ich hole mir die Liste und schalte sie einfach aus. Lassen Sie uns also die Anzeige „Keine“ abschließen. Und dieser Knopf hier, ich kann dort oben in meinen Container gehen , Verschiedenes. Das gibt es nicht, tu so, als gäbe es es nicht. Also Button, wie verbinden wir es? Aber ich möchte wirklich hierher gehen und Seiten gehen und dann mit der Seite verbinden. So funktioniert das nicht. Ich wünschte es wäre so. Und wenn Sie es wissen, ohne zuerst eine Sammlungsliste zu erstellen, was gut ist, manchmal möchten Sie einfach nur einen Link darauf liken, verlinken Sie einfach auf diese Seite. Was Sie tun können, ist einfach die URL-Hacky-Methode zu verwenden . Ich zeige dir was ich meine. Gehen wir in die Liste. Finde Blogbeiträge heraus. Gehen wir darauf ein, sagen wir, ich besitze einen Link zur Geschichte des Webdesigns. Diese Kugel hier, okay, schrecklicher Name. Die URL dafür ist diese. Es ist auf der Website. Also Dans Website design.com Slash Blog Slash Slash, die Geschichte des Webdesigns, Ihre könnten Beiträge hier sagen. Ich habe meinen irgendwann auf Blog umgestellt , während du nicht zugesehen hast. Aber diesen Teil hier, okay, ich kann mir das alles schnappen, einschließlich dieses Forward-Schrägstrichfehlers, kopiere es. Okay, ich will das nicht , weil sich das ändern wird. Dann kann ich wieder von hier verschwinden. Okay, zurück zu meiner Homepage und sag einfach Link dazu. Es ist nicht reingegangen. Ordnung, das ging nicht und phosphorylierte. Klicke auf „Kopieren“ und komm dann raus. Jetzt füge ich es ein und lösche es. Das ist zu viel hartcodiert, aber wenn Sie den Schrägstrich lassen und alles andere darin lassen, funktioniert es. Okay, es funktioniert nur mit der veröffentlichten Site, nicht in der Vorschau. Das ist es also, perfekt. Okay, und ich werde meine Seite veröffentlichen. Denken Sie daran, dass die Veröffentlichung viel länger dauert , wenn es eine Datenbank gibt, mit der Sie umgehen müssen. Okay, schauen wir uns die Seite an. Und jetzt habe ich einen einsamen Knopf. Und wenn es klickt, geht es an, es geht auf jede Website und es ist das plus all dieser Müll. Okay, und es geht direkt dorthin. Was könnte das große Problem hier sein? Das stimmt. Wenn wir gehen und den Namen ändern, okay? Oder das, vielleicht haben Sie es durchgemacht und es geändert. Es wird ein Problem verursachen. Sie müssen aktualisiert werden, alles einrichten, was als Weiterleitung bezeichnet wird. Lassen Sie mich Ihnen zum Beispiel eine geben, ich kann jetzt hier reingehen und es geht Sammlung und Go Blogposts. Und auf sieben Arten wollen wir klicken, um das zu glauben. Ja, ich möchte das von Post zu Blog oder Blog zu Post ändern . Okay. Ich mache es hier in der aktuellen CMS-Sammlung. Und ich sage eigentlich, ich möchte nicht, dass das etwas anderes ist. Ich wollte wieder posten. Und was du hier sehen wirst, heißt es: Hey, du musst Weiterleitungen einrichten, darauf klicken, der Sache folgen. Es liegt irgendwie außerhalb des Rahmens dieses Kurses. Oder speichern Sie es einfach und stellen Sie sicher, dass, wenn Sie zu Ihrer Homepage zurückkehren, gehen Sie auf die kleine Schaltfläche, Sie jetzt Post heißen, dass ich das speichere. Das ist die eine Sache, auf die man achten sollte. Hard codiert es ein bisschen hackig. Die einzige Möglichkeit , wie ich mir vorstellen kann manuell nur eine Verbindung zu einer Seite herzustellen, es gibt Zeiten, in denen Sie es tun möchten. Andernfalls erstellen Sie eine Liste, haben Sie vielleicht einen Schalter , der sie einschaltet, um Featured“ zu sagen , oder um sie einfach einzuschalten, sodass Sie dann Filter einrichten und einfach die eine bestimmte Schaltfläche anzeigen können Filter einrichten und einfach die eine bestimmte Schaltfläche anzeigen mehr Hacky-Button, der besagt, dass wir die meiste Zeit eine Liste wollen, Lass uns das Display so wieder einschalten. Es funktioniert also super. Ich werde schwierig alt. Gegen Ende dieses Kurses möchte ich, dass ein Höhlenmenschenknopf dorthin geht, wo ich will. Gib mir nicht dieses ausgefallene, tolle, tolle Zeug, das mir eine Menge Zeit spart. Gib mir das Zeug, das ständig kaputt mit vollen URLs, mit fest codierten URLs. Wie auch immer, das ist es, manuell auf eine Sammlungsseite zu verlinken? Lassen Sie mich wissen, ob Sie es besser machen können. Es gibt wahrscheinlich einen und ich weiß es nur noch nicht. 96. Wie füge mein Client einen Blog-Beitrag in der CMS in Webflow hinzu: Hallo zusammen. In diesem Video zeige ich Ihnen, wie Ihr Kunde Ihrer Website eine Seite hinzufügt. In diesem Fall ist es ein Blogbeitrag. Gehen Sie im Grunde zum Editor und klicken Sie auf diese Schaltfläche. Ja, es steckt nicht viel mehr dahinter als das, aber hey, es gibt noch ein paar andere Dinge, die ich dir zeigen möchte. Nun, eigentlich zeige ich dir alle Schritte, nur für den Fall , dass du dich sonst ein bisschen verirrst, das war's. Genau wie das Testimonial, das wir zuvor gemacht haben, außer dass es eine ganze Seite ist. Prachtvoll. Ordnung, das Erste ist, dass alles veröffentlicht werden muss. Stellen Sie also sicher, dass es veröffentlicht ist. Sie müssen sicherstellen, dass Sie es mit ihnen geteilt haben, okay, laden Sie Gastredakteure ein. Sie können entweder darauf klicken, sie können entweder auf den Link klicken, den sie von Ihnen erhalten haben , oder sich daran erinnern, sie können ein Fragezeichen darin setzen und sie können dort hineingehen. Ordnung, damit sie reinkommen und die vorhandenen Seiten bearbeiten können. Sie können durchgehen und sagen, dass dies tatsächlich geändert werden muss. Okay, hier geht es um Grafikdesign. Klicken Sie auf Änderungen veröffentlichen. Es wird die Aufzeichnung bearbeiten. Aber jetzt möchte ich meinen eigenen Blogbeitrag hinzufügen. Ich bin der Kunde. Ich denke, ich möchte meinen eigenen Blogbeitrag hinzufügen, bitte. Ich gehe zu Blogbeiträgen oder du kannst den langen Weg gehen, Sammlungen, Blogbeiträge. Oder du kannst diesen kleinen Tab dort benutzen und schauen, hier gibt es eine Option. Da steht „add new“, wie auch immer wir genannt haben. Es heißt jetzt „Neuen Blogbeitrag hinzufügen“. Gleiche gilt für Testimonial. Testimonial, einfach peasy. Wir müssen die Felder ausfüllen und eine Sekunde. Ordnung, der gute alte ipsum.com. Benutzt irgendjemand das? Okay, nur ein bisschen Platzhaltertext und inszeniert fertig, gesetzt, veröffentlicht, okay , und wie zuvor, wie jedes Testimonial, wird es erscheinen, aber jetzt wird es tatsächlich eine Seite sein, sobald das Bild Ladungen. Eigentlich habe ich kein Thumbnail gemacht und whoops. Okay, wird aber nie alt. Sie haben einen Blogbeitrag erstellt oder es ist eine neue Produktseite und Sie servieren uns ein neues Rezept, was auch immer Sie Ihrer Website hinzufügen . Wir müssen da rauf. Und wieder hier in meinem Designer werde ich sehen, dass der Kunde reingegangen ist weil mein Blog sechs Artikel veröffentlicht hat. Es ist neun. Ja, ich weiß, dass es so ist. Hallo, gutes Unterrichten von Wavelet. Da ist es. Es wird alles hinzugefügt. Lustig! In Ordnung, das ist es. So ist Ihr Kunde, Ed ein Blogbeitrag oder eine andere Seite, die Sie Ihrer Sammlung hinzufügen möchten , in Ihre Website aufgenommen. 97. Wie man reiche Textelemente in Webflow verwendet: Hallo zusammen. Rich nimmt Elemente. Wir haben sie uns irgendwie angesehen. Sie sind hier und da aufgetaucht. Was sind sie? Wie fügt man ihnen Sachen hinzu? Oh, sieh mal, du kannst Sachen hinzufügen, du kannst Sachen ändern. Sie können Bilder, Videos und allerlei Güte zu einem Rich-Text-Block hinzufügen . Du und ich und der gutaussehende Kerl, wir werden alle lernen, sie hinzuzufügen, anzupassen, aber nicht zu stylen. Wir werden sie im nächsten Video stylen. Ordnung, fangen wir an, ein Rich-Text-Element zu erstellen, okay, Rich-Text-Element. Wir haben einen oder was blockiert, okay, wir haben schon einen. Denken Sie daran, dass wir eine hatten, die automatisch in unsere Blog-Beiträge aufgenommen wurde . Wir sind da reingegangen und da ist es. Es wurde gerade hineingeworfen. Anders als vielleicht das, das wir hier hinzugefügt haben , wo sie es einfach einfügen, wenn ich es einfach einfüge, ist es am Ende Absatztext und sonst nichts. Schauen wir uns also an, wie wir eine alleine machen, nur auf der Homepage, noch nicht mit der Datenbank verbunden , schauen wir uns einfach selbst an. Also, ein Schlüssel, dafür brauche ich hier eine Art Zuhause. Und ich werde diesen Rich-Text-Block hier hinzufügen. Ordnung, wir haben also einen Rich-Text-Block. Du kannst wie zuvor darauf klicken und sagen: Was ist das für eine Klasse? Aber nehmen wir an, ich möchte Dinge hinzufügen , weil es im Moment einige generische Sachen enthält. Lass uns Dinge hinzufügen. Alles was Sie tun müssen, doppelklicken Sie auf ein Element oder darüber , wo Sie es haben möchten, und kehrt es zurück? Okay, und wenn Sie anfangen zu tippen, wird davon ausgegangen, dass Sie Absatztext eingeben, obwohl Sie daran gebunden sind, nur als Absatztext zu wissen , wie kann ich, sagen wir, ich möchte hier unten klicken, zurückkehren und ich bin Ich werde sagen, das ist ein gemischter Treffer. Die Schlagoption. Was Sie tun, ist es hervorzuheben und es gibt Ihnen die Optionen, die im Rich-Text-Feld zulässig sind. Es gibt nicht viel, was Sie tun können, aber im Grunde alles, was Sie für einen Artikel oder einen Blogbeitrag benötigen , Textblock, Sie haben Ihre Überschriften, natürlich Besprechungen. Okay, lass uns einen Blick darauf werfen. Wir können es fett machen, wir können es kursiv, tiefgestellt, hochgestellt machen. Eine Sache ist, ist, dass, wenn es ein Hit ist, wie schaffe ich es wieder zu einem Absatz? Es gibt keine Like-Absatz-Option. Klicken Sie einfach erneut auf die Heizung, sehen Sie, dass drei getroffen werden, weil sie blau ist. Okay. Klicken Sie darauf und es wird auf die Standardeinstellung zurückgesetzt, nämlich Absatz. Wir werden einfach wichtig sein, wenn wir im nächsten Video anfangen, es zu stylen. Oder die interessanten Dinge hier, Hyperlinks bei Hyperlink-Block-Anführungszeichen, vielleicht nicht. Ich wähle das aus, mache es zu einem Blockquote. Blockquote ist, ist ein Klick aus. Es ist ein eingerückter Textabschnitt, der als Zitat verwendet werden soll. Deshalb ist es ein Blockquote. Blockquote, weil es ein großer Block von Sachen sein soll . Es soll so sein, als ob man jemanden zitiert, man kann einfach Anführungszeichen setzen. Aber wenn es sich um einen vergrößerten Block handelt, verwenden Sie diesen eingerückt. Es ist also außerhalb des Textflusses und soll als Zitat interpretiert werden , das auf etwas anderes verweist. Und oft benutzen sie diese kleine Linie. Dann machen sie so ein Blockquote. Was wir sonst noch bekommen haben alle Blockquote-Links ausgewählt. Das ist alles. Werfen wir einen Blick auf einige der wahrscheinlich mächtigeren Teile. Nehmen wir an, ich möchte ein Bild hinzufügen, ich drücke die Eingabetaste. Und vielleicht hast du, ich habe es vorher ignoriert. Wenn du anfängst zu tippen, bekommst du nur einen Absatz. Aber wenn du auf Return drückst und einfach abwartest, schau, was macht dieses Ding? Ich werfe einen kurzen Blick darauf. Es hat ein paar coole Sachen. Lass uns die langweiligen Sachen machen , Aufzählungsliste, ich brauche Orange, ich brauche lila. Okay, es ist eine Aufzählungsliste und wir kehren wieder zurück. Lass uns etwas Aufregenderes machen. Es gibt eine nummerierte Aufzählung. Lass es uns machen. Ein Bild, Bilder, ziemlich cool weil es, lass uns das Bild hinzufügen. Es hat einige zusätzliche Funktionen. Sie können entscheiden, ob es zentriert ist, ob es groß ist, wie es im Moment sein kann, wenn dies ein größeres Bild wäre, würde es bis zu den Rändern reichen, aber es breitet sich nicht darüber hinaus aus ob es groß ist, wie es im Moment sein kann, wenn dies ein größeres Bild wäre, würde es bis zu den Rändern reichen, aber es breitet sich nicht darüber hinaus aus ist zu 100 Prozent groß. Linke Ausrichtung. Das ergibt Sinn. Dieser ist ziemlich cool. Lass uns etwas Text hinzufügen. Ich werde mir das schnappen und dir genau dort etwas Loren Ipsum anbauen . Benutzt das jeder? Loren Ipsum aus der Site generieren? Es ist die langweiligste Seite einer Vermutung, wer sich Schlauchtrommeln angeschaut hat? **** deine Anzeigen. Ordnung, zurück hier rein. Also habe ich ein paar Zecken, ich werde sie darunter kleben. Setzen Sie ihr Tune-In Rambo ein, fügen Sie es einfach ein, sobald der Absatztext vorliegt. Was ein Bild bewirken kann, ist, dass du, mein Freund, links ausgerichtet bist. Sie können sehen, dass der Text rechtsbündig verläuft . Der Text wird umbrochen, was ziemlich cool ist. Bilder, die Sie hier eingeben können und die eine Art Bildunterschrift haben. Okay? Die Bilder auch. Das ist ein kleines Affenschlüssel-Ding hier. Nur der Schraubenschlüssel, selbst wenn du grundlegende Sachen hast. Du hast Alt-Text. Bekommst du es von anderen Assets als dem Asset-Panel oder schreibst du benutzerdefinierte Sachen und füllst es dort aus? In Bezug auf die Größe können Sie entscheiden, dass die Größe tatsächlich einen hohen DPI-Wert hat, was halb so groß ist, mal zwei. Ich weiß nicht , warum das mal zwei ist, aber Sie können in voller Breite gehen wenn Sie versuchen, so weit wie möglich die volle Breite zu erreichen. Benutzerdefiniert, okay, du kannst entscheiden, wie groß es sein wird. So können Sie hier mit Ihrem Bild ein bisschen Detail erfahren. Und dieser Link hier ist gerade, wenn er angeklickt wird, gehen Sie zu einer URL. In diesem Fall könnte es zu Unsplash gehen, wo ich das Bild von Bildern erhalten habe. Und was sind die coolen Dinge hier drin? Lass uns etwas reinlegen. Ich denke, es ist ziemlich einfach, ein Video durchzugehen. Sie kopieren einfach und fügen ihn von Ihrem Lieblings-YouTube-Kanal ein. Das ist mein Favorit. Und jede alte und meine Garage. Jeder alte YouTube-Clip, den du dir schnappen, teilen, okay, und kopieren kannst. Okay, Vimeo funktioniert auch. Und dann fügst du es einfach hier ein und du hast ein YouTube-Video mit vielen der gleichen Eigenschaften wie das Bild. Es gibt eine Menge Dinge, die du hier machen kannst. Aber das ist meistens dasselbe wie ein Bild, lustig. noch etwas drin , das ich erwähnen sollte? Sie können dort Code einbetten. Wir werden jetzt nicht auf Code und Beans eingehen. Es ist ein Video auf meiner Liste, das hier auftaucht, ein bisschen reichhaltiger, eingebetteter, reichhaltiger Inhalt. Ich benutze das nie. Sie können Dinge wie SoundCloud- und Spotify-Listen einfügen. Und Sie müssen eine große Liste von eingebetteten Rich-Inhalten für Webflow googeln . Ich benutze es nicht sehr oft, aber es gibt Dinge, die man dort hineinlegen kann. Das hier machen wir später, aber das ist für Dinge wie dein Kalender-Li-Ding, männliches Schimpansen-Ding. Sie können dort als Code und als großen Code reingehen. Und während das gut für uns als Designer und Designer von Webflow ist. Es ist immer noch sehr nützlich, sehr schnell Inhalte hinzuzufügen, anstatt ein Bild herauszuziehen und all diese Dinge zu tun. Es ist wirklich für den Herausgeber, Ihren Kunden, Ihren Kunden, Ihre Mutter gebaut Ihren Kunden, Ihren Kunden, Ihre , die die Website aktualisiert hat, weil wir zuvor gezeigt haben, dass ich sie laden sollte die Website aktualisiert hat, weil wir zuvor gezeigt haben, , wenn sie in den Editor kommen. Aber falls Sie es vergessen, müssen Sie sicherstellen, dass die Website veröffentlicht wird. Und Sie gehen zur Option Teilen und stellen sicher, dass Sie sie als Gastredakteur einladen. Wir haben die Seite geöffnet. Und wenn sie den Link aus der E-Mail nicht erhalten haben, können sie einfach ein Fragezeichen eingeben. Und sie können den Rich-Text-Block auf die gleiche Weise durchgehen und mit der Bearbeitung beginnen . Möglicherweise müssen Sie ihnen eine kleine Demo geben , wie es funktioniert. Okay, also können sie hier reingehen und sagen, ich gehe durch und wähle Enter. Okay, sie werden einfach anfangen, für einen Absatz zu tippen oder ihn hervorzuheben und daraus ein H2 oder ein Blockquote zu machen, oder kehren zurück und beginnen, eine Art Rich Media hinzuzufügen. Großartig für Artikel, ideal für Blogs. Würdest du uns schon sagen, wie man es stylt? Wir können es nicht aushalten. Es wird noch ein Video geben. Lass uns das als nächstes machen. Jeder möchte es zuerst stylen. Ich muss herausfinden, was es bewirkt. In Ordnung? Ordnung, machen wir es. 98. Styling von reichen Text in einem Webflow CMS: Hallo zusammen. Es ist an der Zeit, unseren Rich-Text-Block anders zu gestalten als die normale Website. Das ist eine Überschrift, die auch eine Schlagzeile ist. Warum sehen sie anders aus? Weil es sich in einem Rich-Text-Block befindet und ich Ihnen zeigen werde, wie Sie Stile innerhalb desselben Absatztextes , Absatztexten, stricken . Sie sehen anders aus, weil sich einer innerhalb eines Rich-Text-Blocks befindet. Lassen Sie mich Ihnen zeigen, wie es geht. Ordnung, um den Rich-Text-Block zu stylen, können Sie dies mit allem anderen tun, oder Sie können es eindeutig für den Rich-Text-Block tun , je nachdem, was Sie möchten. Wenn Sie nur möchten, dass es den Stilen der übrigen Website folgt , müssen Sie nichts tun. Nehmen wir an, das ist ein großer Erfolg. Ich werde hier oben einen vergleichenden Treffer hinzufügen und vielleicht auch Absatztext hinzufügen. Und wir wissen, dass der Typ hier oben drauf ist. Es ist nicht im Rich-Text-Feld, okay, da ist es. Was ich also tun muss, ist egal, ob ich diesen style. Nun, dieser, okay, wenn ich darauf klicke und hier rüber gehe und sage, dass du willst, alle auf dieser ganzen Website. Und sie werden alle eine Schrift sein , die wir Oswald sein werden. Okay? Und nehmen wir an, der gesamte Absatz auf der gesamten Website wird irgendwie hellgrau sein oder lassen Sie uns eine wirklich offensichtliche Farbe machen. Okay. Warum hat das nicht funktioniert? Weil ich eigentlich nicht auf die alten Klassen geklickt habe. Also entferne ich die Klasse. Okay, alle Absätze auf dieser Website werden blau sein. Nett. Also kommen sie alle mit auf die Fahrt. Wenn es das ist, was du willst, dann tust du es. Wenn du möchtest, dass das anders wird. Okay? Das ist gut für die Website, aber das für den Blog oder den Artikel muss anders sein. Was Sie tun müssen, sind zwei Dinge. Sie benötigen den Rich-Text-Block, die Art von Elternteil, die überhaupt herumläuft. Es braucht eine eigene Klasse. Es spielt keine Rolle , wie es heißt. Okay, wir nennen unsere Rich-Texte, aber du kannst es so nennen, wie du willst. Und welche Magie passiert, wenn Flow ist, sagen wir mal die Überschriften hier. Wenn ich sage, erinnert es dich daran, wenn du es vergisst, aber das ist mein Job. Ich erinnere dich daran. Wenn ich ihm das Phi gebe, sag alle H 1s, weil es vielleicht ein paar Mal auftaucht, okay, alle acht, aber dieses Ding ist neu. Es heißt nist, der Selektor innerhalb von Rich-Texten. Das ist der Kurs , den wir gerade gemacht haben. Und du sagst : Ja, lass uns das machen. Okay. Es bedeutet nur, dass es nur H 1s betrifft. Bei allen spielt es keine Rolle, wie oft Sie sie verwenden. Wenn sie sich in unserem Rich-Text-Feld befinden, das diese Klasse hat. Okay, also werde ich hierher gehen und sagen, dass ich eigentlich will, wer auch war, okay, was bei Artikeln anders ist. Es ist eine Möglichkeit, Inhalte zu trennen, hässliche Schriftauswahl, okay, wahrscheinlich will Serif-Schriftart. Da haben wir's. Okay, sagen wir den Absatz und das Gleiche noch einmal. Nehmen wir an, ich möchte, dass es kursiv geschrieben wird und ich möchte , dass es nicht blau ist, weil es mich umbringt. Also solange mein Elternteil, okay, des Rich-Text-Feldes eine Klasse angewendet hat. Jetzt, falls wir Rich-Text sind. Man kann sagen, dass man alle Absätze hört. Ich würde gerne wieder Black Place sein. Oh, okay. Warum hat das hier unten funktioniert und ist nicht erschienen? Das ist ein sehr gutes Argument. Oh, das habe ich nicht rückgängig gemacht. Ich klicke darauf. Ich glaube nicht, dass ich das getan habe. Vielleicht habe ich mir das nicht angeschaut. Ja. Hast du mich gesehen? Es könnte dir passieren. Ich lasse es für den Fall, dass es sicherstellt, dass, wenn Sie sagen, dass ich möchte, dass alles H4 in Ordnung ist Rich-Text verschachtelt werden soll. Nur der H4 ist hier drin und sieh dass es ein paar von ihnen gibt, es gibt noch einen H4. Also wähle ich eine schöne, sehr offensichtliche, schreckliche Farbe. Da haben wir's. Jetzt habe ich ein paar Mal gesagt, dass die Verpackung außen sein muss . Das bringt uns also nicht zu einem Problem, aber es ist etwas, an das wir uns erinnern sollten. Denn wenn ich auf eine andere Seite gehe, sagen wir einfach, ich gehe zu, ich habe eine Seite, die es schon hat , aber Blogposts Vorlage. Okay. Da ist mein reichhaltiges Lehrbuch. Du sagst, warum ist es blau? Wir haben es schwarz gemacht. Sie müssen also nein tun. Das stimmt. Füge einfach diesen Rich-Text hinzu. Reichhaltiger Text. Und das wird sagen: Oh, sieh dir Schnappschüsse an. Das ist, okay, ich bin jetzt schwarz und ich schlage. Okay? Du bist nicht dieser. Ich möchte es wirklich hier reinklicken. Sie haben sich vielleicht gefragt, wie kann ich es hier nicht ändern? Okay, du bist nicht zu deinem Redakteur gegangen. Hier drin. Sie können zum Editor wechseln und damit beginnen, oder zum CMS zurückkehren und zu Blogbeiträgen zurückkehren. Und ich kann mich nicht erinnern, welches ich mir angesehen habe. Das ist einer von ihnen. Nee, nicht dieser. Schauen wir uns das an. Hier können alle Änderungen vorgenommen werden. Wenn Sie so wollen, der Designer, würden Sie oft hier arbeiten. Der Kunde arbeitet oft im Editor. Jetzt können Sie durchgehen und sagen, dass dies ein H1 sein sollte. Jetzt werde ich es speichern und nach der Geschichte des Webdesigns suchen . Lass es uns schließen. Und es sollte die Geschichte der Serifenschrift sein. Es ist nicht dieser. Geschichte ihres Namens. Gesund. Macht das Sinn? Stellt sicher, dass es eine Klasse um den Wrapper für den Rich-Text-Block gibt. dann sicher, dass Sie auf die Verschachtelungsoption klicken , die dort oben angezeigt wird. Ordnung, ich bin zurück. Ich war beim Abendessen und dachte Weißt du was, ich hätte es ihnen sagen sollen. Ich bin zurück, um dir zu sagen , was ich dir hätte sagen sollen. Es hat mit der Kaskade oder Spezifität zu tun. Deshalb haben wir diese Stile für den Rich-Text-Block getrennt. Dieser Absatz hier war anders, weil er in das reichhaltige Lehrbuch eingebettet ist und sich von diesem unterscheidet. Irgendwie bei den Cascades funktioniert es immer noch, weil dies ein Absatz ist, nimmt es, um alle Absätze zu schauen. Es ist auf Arial eingestellt, dieses Ende. Und dieser hier habe ich mich nicht verändert. Es sind immer noch alles Absätze, reiche Texte, aber ich habe nichts anderes als Arial gesehen. Es wird also diesem Beispiel folgen, sofern ich es hier nicht ändere. Was ich meine, also Absatztext hier oder Absätze. Und weil ich es hier nicht geändert habe, sollte sich das auswirken. Okay. Weil ich hier nichts geändert habe. Es geht los Mama, ich weiß nicht, was ich tun soll. Ich werde einfach standardmäßig das übergeordnete K verwenden, Das flussaufwärts, den Wasserfall, und benutze es als meine Basis. Aber wenn ich hier etwas genauer bin, gehe ich rein und sage: Schau, du, die Wirkung war Bett. Wer erinnert sich an das Ding? Ibn Ady. Du bist in ihrem Ausweis, dq dy, solltest wissen wie man es auswendig macht. Los geht's. Comic Sans, nimm diese Wirkung , denn das ist spezifischer. Es ignoriert, was hier oben passiert ist. Also musst du das immer noch in Betracht ziehen. muss ich die Schriftgröße hier auf Heizung ändern , um hier eine zu treffen , anstatt hier eine zu treffen. Ich dachte: Nein, sie sind beide gleich. Wenn ich beide ein bisschen größer sein wollte, werde ich eigentlich nur diese Art von Eltern verwenden , damit sie alle größer werden. Und ich bin auch dort zufrieden damit. Also lasse ich die Kaskade einfach kühl. Also kam ich zurück, um dir den Umgang mit Impact und Comic Sans beizubringen . Du bist willkommen. 99. Kursprojekt 08 - Blog CMS: Hallo, es ist Zeit für ein Klassenprojekt. Wir werden nahtlos ein Blog erstellen. Nichts ist zu groß oder ausgefallen. Nur etwas Einfaches wie einfach eine Homepage sein und eine der Vorlagenseiten entwerfen, okay? Und es geht darum, dieses CMS zu lernen. Deshalb möchte ich, dass Sie Ihre eigene Sammlung erstellen und Sie benötigen nur drei dieser Artikel in Ihrer Sammlung. Woher bekommst du es? Ich möchte, dass Sie einen bestehenden Blog neu interpretieren. macht nichts aus, woher du es bekommst. Wenn ich dir den Inhalt gebe, sieht alles gleich aus. Und wenn wir das Zeug verwenden , das aus dem Workflow kommt, sieht alles sehr Loren ipsum aus. Geh einfach raus. Wenn Sie ein Blog haben , das Sie möchten oder gehen Sie raus und suchen Sie einfach nach Blogs. Dies sind einige der Blogs, die ich mir kreative Überprüfung ansehe , den Workflow, den Sie möglicherweise durchlaufen und diesen verwenden. Adobe hat eine tolle. Dribbeln. Sie nennen es Triple Stories. Und was Sie tun möchten, besteht aus zwei Teilen. Wir werden eine Homepage haben, wie wir es mit einer solchen gemacht haben. Okay. Sie haben beschlossen, ihre Sammlungsliste so zu erstellen. Und wenn Sie darauf klicken, gelangen Sie auf die Blog-Seite. Ich möchte also nicht, dass Sie durchgehen und drei von welchen Websites auswählen ? Da ist der Titel, den du dir schnappen kannst, es gibt die kurze Zusammenfassung, das Datum, an dem du dich ausdenken kannst, und da ist die Miniaturansicht des Bildes. Also schnappen Sie sich einfach drei davon und Sie benötigen nicht die gesamte Seite. Mach einfach Sachen über der Falte. Und ich suche nicht nach allem , was wir gemacht haben. Gehen Sie einfach Bild und Titel durch. Stellen Sie sicher, dass Sie den Autor behalten, okay, und dann schnappen Sie sich einen Teil davon , das muss nicht alles sein. Du kannst sehen, hey, schau, was ist das? Wissen Sie, wie es heißt? Es ist ein Blockquote-Fall und verschiedene Überschriften. Es bringt dir nur einiges davon vor. Sie können versuchen herauszufinden, wie man Drop Cap so macht. Okay, wir schnappen uns nur ein bisschen vom Text und bearbeiten dann deinen Blogbeitrag. Wählen Sie also drei davon aus. Lass uns einen Blick darauf werfen. Neugestaltung vorhandener Blog- und Blog-Sammlung auf der Homepage. Mach einfach ein kurzes Nickerchen, muss nirgendwohin gehen. Wir kriegen einfach alles zusammen. Style es so oft du kannst. Wenn Sie eine halbe Stunde damit verbringen wollen , verbringen Sie eine halbe Stunde damit. Wenn du einen halben Tag mit dieser Drehung verbringen willst, einen halben Tag damit. Es ist völlig okay. Hier gibt es kein Richtig oder Falsch. Man hat unterschiedliche verfügbare Zeit, hat ein Navi, hat eine Heldensektion und in den Zusammenfassungskarten. Okay, das ist diese Sammlungsliste, die wir ein paar Mal auf der Homepage erstellt haben, war meine Testimonials-Seite. Das ist diese Zusammenfassung der Sammlung, in der Sie sich durchklicken und den großen Artikel lesen können. Sie ist eine bessere. ist hier unten, dass auf deiner Homepage ein bisschen von mir ist. Und sie sollten auf diese Seiten verlinken. Also drei tatsächliche Seiten. sich nur klar, dass es eine Neuinterpretation von jemand anderem handelt, wenn Sie es veröffentlichen, und es ist nicht Ihre Arbeit. Und fügen Sie einfach einen Link zum Autor und einen Link zum Originalartikel hinzu. Setzen Sie es einfach darauf und sagen Sie, dass dies der Originalartikel ist, stylen Sie ihn und machen Sie ihn zu einem Teil davon. Oh, ich bin zurück. Okay. Es ist der nächste Tag und ich dachte, wissen Sie, was sie auch tun sollten, ist einfach den deaktivierten Index k einzuschalten. Es ist in Ihren Projekteinstellungen, um ECO zu veröffentlichen. Erinnern Sie sich an diesen hier, hier, hier. Okay, nur um Google zu sagen: Hey, mach dir nicht die Mühe, das zu indizieren, weil es ein Duplikat ist. sind nicht die Droiden, nach denen du suchst. Okay. Versuche nicht, für dieses Zeug zu ranken , weil es nicht unseres ist. Durchführen. Während du da bist. Stellen Sie einfach sicher, dass Sie die Editor-Oberfläche erkunden die Editor-Oberfläche , damit Sie im Umgang mit Kunden wissen, wie sich ihre Seite anfühlt , und versuchen Sie zu tun, was sie tun werden. Und es könnte dir die Möglichkeit geben, so zu trainieren, oh, ich muss das auf der Designerseite machen, um sicherzustellen, dass x auf der Bearbeitung passiert, wirklich nur zwei Seiten und eine Sammlungs-Homepage, eine Blogseite Vorlage, die drei Seiten für Sie ausspuckt, weil sie fantastisch ist, weil es die CMS-Ergebnisse sind, machen Sie einen Screenshot Ihrer Homepage und Ihres Blog-Seitenlayouts. Das sollten also insgesamt vier Homepages und deine drei Blog-Seiten-Layouts sein und lade sie hier hoch, teile sie auch in sozialen Medien. Seien Sie interessant zu sehen, was Sie waren, und machen Sie ein bisschen vorher und nachher, um einen Screenshot von dem zu machen, was wir daraus gemacht haben was Sie letztendlich mit IT gemacht haben. Problemen, auf die Sie stoßen müssen Sie sich möglicherweise an die Community wenden, insbesondere an die Gruppen hier, um Ratschläge zu erhalten und auszutauschen. Alle, einer von ihnen, keiner von ihnen. Es liegt an Ihnen, ob Sie in sozialen Medien teilen möchten. Ordnung, das ist das Klassenprojekt für einen nahtlosen Blog. Geh und mach es. Viel Spaß, mach es nahtlos, mach uns stolz. Wir sehen uns im nächsten Video. 100. HTML-Einbettungscode aus Calendly, Twitter und Castos: Hallo zusammen. Wir werden uns die HTML-Einbettungscodes ansehen. Es ist eine Möglichkeit, Funktionen, Inhalte und Interaktivität von anderen Websites abzurufen. Wir schauen uns Calendly, Caster und Twitter an , die ich verwende. Aber im Grunde kopierst du einfach Code und fügst ihn ein und am Ende hast du coole Sachen auf deiner Website. Sie können Podcasts sehen, nur Spiele auf der Website abspielen, jemand anderes hostet und liefert sie aus. Sie können Zeit und einen Zeitplan für Calendly buchen und alle meine Tweets lesen und dann dynamisch aktualisieren. Und bei den von Twitter bereitgestellten Diensten kopieren wir einfach den Code und fügen ihn ein. Es ist eine super einfache Möglichkeit, Ihrer Website echte Funktionen hinzuzufügen Ihrer Website echte Funktionen hinzuzufügen , die Sie vielleicht nicht erstellt haben. Du hast dir von anderen Leuten geliehen, wodurch du gut aussiehst. Okay, lass uns gehen und uns gut aussehen lassen, okay, um eines davon in Gang zu bringen, fangen wir damit an, ich bin wieder in meinem Portfolio, weil meine andere Seite ziemlich chaotisch wurde . Also habe ich hier unten einen kleinen Abschnitt dafür gemacht. Ich drücke einen Knopf und schaue unter Komponenten, diese hier genannt und geboten. Dieser erhält den Code. Hier muss der Code hin. Lass uns den Code suchen. Ich werde nur einige der Dinge verwenden, die ich jetzt verwende. Das ist nicht grenzenlos, aber es gibt Tausende von Websites, auf denen ihre Dienste in Ihre Website eingebettet werden können. Ich werde es dir hier so zeigen. Podcasts. Ich benutze den Zyklus, der uns gekostet hat Sie hosten meine Podcasts und wir möchten sie beispielsweise nicht auf einer Website veröffentlichen, nicht in einem Podcast. Was ich tun kann ist, dass ich diesen hier sagen kann, ich möchte darauf verlinken und mir das ansehen. Dies ist genau wie ein einfacher Einbettungscode. Das ist es, wonach Sie suchen, das ist der Begriff HTML-Einbettungswebsite und Gebotseinbettungscode. Das sind ihre Knie. Das ist die Sprache, nach der du suchst. Und du kommst einfach zurück und fügst es ein und klickst auf Speichern. Und da ist es, nur ein Stück wie dieses. Okay, ich werde eine Vorschau meiner Website anzeigen und du sagst, okay, meiner Website zu spielen und große Codes sind großartig, um dir ein bisschen Dynamik zu verleihen oder vielleicht eine potenziell statische Website anderer Leute verwendet Dienste, die die Lautstärke Ihrer Website beeinflussen. Ich bin mir nicht sicher, ob ich es sage, aber es gibt coole. Sie sehen auf deiner Seite cool aus. Okay, lass uns noch einen machen. Nun, eine Sache, die Sie bemerken werden, ist, dass das den gesamten Container eingenommen hat . Nehmen wir an , das enthält, in dem ich es habe, wahrscheinlich stecke ich es in ein div-Tag und wenn ich es ändere. Also nennen wir das Div Locke wird Div-Podcast heißen. Ich setze dich da rein, okay? Und diesen Div-Podcast werde ich verkleinern. Es hat etwas Polsterung an der Seite angebracht. Oh, kannst du sehen, dass es sich überhaupt ändert oder es weiß, dass es ein responsiver Code ist. Es weiß also, wenn es kleiner wird, wird es einfach diese Seite benutzen. Sie können also die Größe dieser Dinge für einige von ihnen steuern , indem Sie einfach mit dem Container herumspielen. Lass uns noch eins machen. Nehmen wir an , für denselben Podcast, was ich mache, ist, wenn ich jemanden interviewe, ich benutze Calendly, es ist nur eine Planungs-App und ich möchte nicht , dass du dich für all das anmeldest, aber du wirst einige davon in deinem Leben haben. Und du kannst sie zu deiner Website hinzufügen, weil es schwierig wäre, unser Planungssystem innerhalb von Webflow selbst aufzubauen , Wow, sie wäre schwierig. Das verbindet sich tatsächlich mit meinem Google-Kalender, was großartig ist. Es ist ziemlich beeindruckend. Jetzt. Sie werden alle an verschiedenen Orten sein , dieser Einbettungscode. Also hier hier, ich werde auf Teilen klicken und es ist die ED zur Website. Da ist es. Inline im Bett. Okay, googeln Sie einfach den Dienst, den Sie verwenden, Mailchimp, Eventbrite, HubSpot. Also sucht jeder Affe, was auch immer du benutzt, nach dem Einbettungscode k. Und dann kannst du ihn oft einfach schnappen. Und das hier, sieh mal, kopiere es einfach. Dieser hier sieht etwas extra aus. Sie können die Farben ändern. Wenn du auf das kostenlose Konto gegangen bist, bin ich billig. Cayenne benutzte den kostenlosen. Okay, ich kopiere es, kopiere den Code, gehe zurück zu Webflow. Ich gebe es ein, ich gebe nur einen weiteren Einbettungscode ein. Man verwechselt sie nicht. Okay. Sie haben sie in getrennten. Kann noch einen darunter legen. Okay. Oh, ich habe es verpasst. Schau mal. Sagen wir einfach, es ist nicht im Container. Ich füge es ein. Exzellent. Speichern und schließen. Treffer. Nun, großes Ding schau, naja, sie wollten erscheinen. Wenn dieser auftaucht, tun es einige von ihnen, andere nicht. Es kommt darauf an. Dieser ist ein sogenannter Iframe. Der Code ist in diesem Iframe eingeschlossen , der wie ein kleiner Browser aussieht , der diesen hier lädt und auch in der Nähe funktioniert. Ich will einfach nur arbeiten, aber es muss veröffentlicht werden. Du kannst es sogar sehen. Schau, ich muss zuerst veröffentlicht werden. Also sage ich veröffentlichen, hier ist mein Portfolio und schau unten nach unten. Da haben wir's. Es gibt meine Sweet App , in der Leute mal bei mir buchen können. Okay, es ist alles interaktiv. Es macht Sachen. Sie können es tatsächlich buchen. kann es tatsächlich buchen, weil ich im Juli keine Zeit habe , die Leistung des Dienstes Calendly eines anderen zu nutzen , Sie vielleicht für die Nutzung der kostenlosen Option für k bezahlen . Eine Sache, die ich mache will dir aber zeigen es gibt einige von ihnen, nicht alle. Du müsstest nur diesen hier machen. Siehst du, es hat eine Höhe. Okay, ich kann den Code sehen. Was passiert also, wenn ich es ändere? Du kannst es total ändern. Also dein Code auf deiner Seite, okay, weil ich diese Seite sehen kann, kann ich das nicht wirklich tun. Ich kann die Farben hier ändern , weil etwas passiert, weil das auf der Calendly-Website passiert . Ich könnte es aber wahrscheinlich sowieso tun. Also ja, es gibt Dinge, die du hier machen kannst und dich einfach ändern. Die Sache ist, wenn Sie es ändern, müssen Sie speichern und schließen und erneut veröffentlichen. Damit dies auf der Live-Site verfügbar ist, machen wir noch einen. Ich werde den Twitter-Feed eintragen. Sie sind alle etwas anders, also ist das meins. Geh mir folgen, wenn du es nicht getan hast. Okay. Dan liebt Adobe. Ich werde das kopieren und ich werde es tatsächlich tun, ja. Twitter macht es also so. Sie haben die süße Option publish.twitter.com. Du kannst hergehen und sagen, was willst du, dass sie schlafen? Ich dachte: Oh, ich will einmarschieren. Sie können einen bestimmten Tweet einbetten. Nehmen wir an, Sie möchten, dass es Teil von etwas ist, auf das Sie in einem Artikel verweisen. Sie können nur einen Tweet einbetten, die URL dafür kopieren und einfügen. Okay, ich mache ein Profil, aber du kannst vielleicht eine Liste erstellen oder du kannst einem Handle von jemandem folgen, dem wir vielleicht folgen. Ich weiß nicht, was mein Portfolio sein könnte , UX-Design-Projekte. Ich füge meinen Namen ein und gehe so vor und bette die Timeline ein oder nur eine Schaltfläche, die Sie sich diese ansehen möchten. Und wenn du nichts anderes machen willst, kopiere es einfach. Ich lasse dich durchgehen und Spaß daran haben , wie die Optionen für die Dinge anzupassen , die du gerade für mich tust, ich werde es einfach darauf werfen. Also wie toll Codes einbetten oder einfügen. Du wirst feststellen, dass ich den Zeilenumbruch an habe. Sonst ist es einfach, es ist immer noch da. Es ist nur so, du musst irgendwie in diese Richtung scrollen und es ist irgendwie versteckt dort drüben. Ich breche es gerne, um zu sehen, womit ich mache , ändert nichts, sondern zeigt den Code nur in mehreren Zeilen an. Also nochmal, es ist eines von denen, die veröffentlicht werden müssen. Und ich aktualisiere meine Seite, scrolle nach unten. Nun, ich muss es wahrscheinlich unbeschränkt eindämmen, also dehnt es sich einfach für immer aus. Du kannst alle meine neuesten Tweets sehen. Okay, es gibt Möglichkeiten , das für Instagram und Facebook zu tun . Ich habe mit einem Kunden zusammengearbeitet, der wie ein Pilates-Studio arbeitet. Sie verwendet ein bisschen Software, um ihre geplante Zeit zu unterstützen und Kunden zu ermöglichen , einen Einbettungscode zu buchen und zu bezahlen. Sie hatten also gerade eine Website und man konnte sie einfach aufwerfen. Dann könnten die Leute Zahlungen über den kleinen Einbettungscode-Teil leisten. Jetzt können wir sie nicht nur vom Designer hinzufügen, okay, plus feinem Einbettungscode. Sie können es tatsächlich nativ in einem Rich-Text-Feld tun. Okay, denken Sie daran, dass wir dieses Rich-Text-Feld erstellt haben, damit wir den Kunden- oder Kundeninhalt haben können. Schauen wir es uns an. Dieses reichhaltige Lehrbuch , wie es der Kunde kann. Ich werde zum Editor wechseln, damit sie da reinkommen und anfangen können, Text hinzuzufügen. Und wenn ich die Eingabetaste drücke, erinnerst du dich an dieses kleine Plus? Sie sehen irgendwie aus wie der Einbettungscode. Es ist der Einbettungscode , den sie durchlaufen können. Und ich nehme das wieder, kopiere, füge es ein, speichere und schließe es, veröffentliche. Sie können hier sehen, dass es nicht angezeigt wird, während sie im Editor sind, aber die Website-Besucher werden tatsächlich erneut auf Veröffentlichen klicken. Ordnung, zurück zur Live-Site. Oh mein Gott, sieh dir das an. Mein Podcast, Sarah Parkinson , die darin interviewt wurde, wird über das Design entsetzt sein. Sie ist umgeben von in irgendeiner Weise eingebetteten Codes. Lass uns noch eine machen, eigentlich eine alte, weil ich dir noch eine letzte Sache des Stylings zeigen möchte . Wir haben es irgendwie behandelt, aber schauen wir uns das an. Calendly bietet also einige wirklich coole Optionen , bei denen Sie diesen Popup-Text verwenden können Wenn ich ihn kopiere, mache ich weiter, schnappe ihn, kopiere ihn und springe wieder hinein. Hier drunter. Vielleicht lege ich ihn statt dieses Buttons darunter. Okay, Sie können also sehen, dass es Code unter diesem Ding einbettet . Und ich füge das ein. Und lass uns einen kleinen Blick darauf werfen. Das ist also ziemlich groß und hässlich. Schauen wir uns an, was tatsächlich passiert. Springen Sie also zur Veröffentlichungsseite. Sie sehen hier die geplante Zeit mit mir. Wir klicken darauf. Taucht auf. Wie cool ist es? Okay, der Grund, warum ich dir das zeigen wollte , ist, weil es großartig ist. Aber auch wie style ich es? Was passiert, ist nicht in allen Fällen, aber dieses spezielle Bit von Einbettungscode wird tatsächlich den Stil von jeder Art von übergeordnetem Wrapper übernehmen. Wir werden ein div-Tag darum legen und es stylen. Also diblockiere dort. Du kannst reingehen. Der if-Block wird Kel und Lee heißen. Und ich werde sagen, dass alles darin öffentlich sein wird , Sans. Lass uns etwas Offensichtliches tun. Wir müssen uns ändern. Wir können viele Dinge daran ändern, aber lasst uns einfach speichern und veröffentlichen und zur fertigen Seite springen. Da haben wir's. Es hat den Stil aus dem div-Tag übernommen. Tauche wieder auf. Nett. Ordnung, das ist also ein bisschen ein Wirbelwind für eingebettete Codes. Es gibt einfach so viele da draußen, wir werden sie nicht alle behandeln, aber es gibt wahrscheinlich etwas , das Sie bereits verwenden. Könnte ein CMS sein, es könnte ein CRM sein, es könnte ein anderes Akronym sein, das ich nicht kenne, oder Dienst, der einen Einbettungscode , den Sie Ihrer Website hinzufügen können. Denn manchmal sagst du: Oh, können wir das in Webflow machen? Du sagst, lass uns einfach überprüfen es keinen anderen Dienst gibt, der das wirklich einfach macht, und wir können den Einbettungscode einfach kopieren und einfügen, oder? Das ist es, bette Code ein. 101. Erstellen eines E-Commerce-Shops in Webflow: Hallo zusammen. In diesem Video und den vorangegangenen Videos werden wir etwas E-Commerce aufbauen, okay, wir werden das bauen. Es wird Produkte geben, in der Lage sein, verschiedene Arten von Produkten zu haben. Wir haben den Warenkorbstil, den Warenkorbstil und die Kaufabwicklung bearbeitet . Es ist sehr aufregend. Lass uns anfangen. Bevor wir anfangen, etwas zu machen soll dieses Video in der Serie hier Ihnen einen Überblick über E-Commerce-Shops in Webflow geben Wir werden nicht ins Detail gehen, Ihnen geben alles, was Sie brauchen, um etwas zu machen, aber all die echten kleinen Details. Es wird außerhalb des Rahmens dieses Kurses liegen, aber du wirst sehen, du wirst ziemlich gut loslegen. Die andere Sache, die ich erwähnen möchte , ist , wie nahe E-Commerce an dem ist, was wir bereits getan haben, wie unser Blog-CMS. Diese Sammlungen haben wir früher durchgeführt weil sie dazu beitragen werden, zu informieren, was wir für den E-Commerce tun. Und Sie werden in der Lage sein , diese Verbindung zwischen den beiden zu erkennen , was diesen Teil im Vergleich zu, denke ich, ziemlich einfach macht, beginnend mit E-Commerce. Lassen Sie uns zunächst eine neue Website erstellen. Also folgen, neue Website erstellen, schau dir nicht alle meine an. Es gibt eine Menge Entwürfe und so. Ich gebe dem Kurs die Schuld dass man am Ende eine Menge Sachen machen muss, nur um es für euch schön glatt zu machen, während ihr zuschaut. Beurteile mich nicht. Ich werde etwas machen, das sich T Store nennt. Okay, mach das Gleiche und lass uns eine Website erstellen. Das Wichtigste an der Umwandlung von einer regulären Site, die wir zuvor gemacht haben, entweder statisch oder dynamisch, ist diese Schaltfläche. Klicke darauf. Und es wird heißen, ich werde zwei Dinge für Sie zu Sammlungen machen. Wir wissen, was eine Kollektion ist, also Produkte und Kategorien. Lass uns das machen. Die eine Sache ist, wenn Sie eine E-Commerce-Website erstellen, müssen Sie Ihren Site-Plan ändern. Bis jetzt haben wir es mit Startup zu tun , es wird ziemlich gut werden, du könntest so ziemlich das ganze Video mit dem Starter machen . Sie können Zahlungen einfach erst annehmen , wenn Sie zu einem dieser E-Commerce-Pläne wechseln. Denken Sie daran, Stata ist eine statische, statische , dynamische, große dynamische Website, und dann ist E-Commerce mit diesen Statistiken. Okay, ich hole dich. Diese Seite wird den Stil ändern. Sie werden es auslegen. Sie werden die Regeln für die verschiedenen Preise ändern . Die Preise werden sich ändern. Aber wissen Sie nur, dass Sie auf einen E-Commerce-umsteigen müssen. Wir haben die richtigen Details. Ordnung, schauen wir uns mal an , was passiert ist. Nun, diese große Setup-Anleitung hier zeigt, dass es wirklich sehr praktisch ist. Ich werde das selbst behandeln. Ich meine dich zusammen, aber mach es auf jeden Fall durch. Und das große Ding ist, dass es unter E-Kommas jetzt Produkte und Kategorien gibt. Produkte sind meine Produkte los, fügen wir einige hinzu, ich füge nur ein paar Beispiele hinzu. Wir werden in diesem Video einfach einen Wirbelwind machen , weil ich das Gefühl habe, dass es gut ist, das Ganze zu sehen und dann einzeln zu arbeiten , anstatt zu versuchen, es anzupassen. Gehen Sie jedes einzelne Video durch und sagen Sie am Ende: Ah, das passt alles zusammen. Dieses Video wird also ein bisschen schnell sein. Ordnung, wir werden es später aufschlüsseln. Wir haben also eine Menge Produkte. Was habe ich sonst noch unter dem Seiten-Tab. Schau dir das an. Du hast ein paar neue Sachen. Eine Vorlage, die dir gefällt, hey, hatten wir nicht früher eine Vorlage, aber sie hieß nicht E-Commerce. Denken Sie daran, jetzt bloggen. Dieser Typ. Wir hatten CMS-Sammlungsseiten , als wir unser CMS erstellten, und wir hatten unsere Blog-Vorlage. Es ist also derselbe Schinken, aber das sind E-Mail-, E-Commerce-Seiten. Es gibt immer noch eine Vorlage und genau wie zuvor, okay, wenn Sie etwas hinzufügen müssen, ist dies unsere Produktvorlage. Deshalb entwerfen wir eines für viele Produkte. Im Moment haben wir nur fünf . Aber lassen Sie mich einfach schnell einen Container hinzufügen, fügen Sie einen Textblock hinzu, der Block akzeptiert, der den Namen vom Namen unseres Produkts erhält. Du gehst, das sollte wahrscheinlich sein, triffst. Ordnung? Okay, fügen wir ein Bild und das Bild hinzu, wenn wir es mit unseren Produkten verbinden , irgendjemand Bildfeld. Los geht's, es wird ein riesiges Bild durchbringen, das den Preis, die Beschreibung durchbringt. Ich sagte, er bringt den Preis durch , weil es dadurch ein richtiges Produkt an der Spitze wird . Das ist okay, und ich werde den Preis durchsetzen. Ordnung, also haben wir unsere Vorlagen wie zuvor und unsere Sammlung, die jetzt unter dem E-Commerce-Tab versteckt ist, gestylt unsere Vorlagen wie zuvor und unsere Sammlung, . Und sehen Sie sich diesen Hit an, Sie können immer noch Sammlungen erstellen, aber sie sind irgendwie getrennt. Okay. Sie funktionieren genauso. Aber sie sind unter E-Commerce und unter hier und unseren Produkten, wir können hier immer wieder Dinge hinzufügen, die ein Kunde über den Editor kann , und wir werden sie weiterhin dem Geschäft hinzufügen. Es wurden auch einige andere Seiten hinzugefügt, eine Checkout-Seite, sieh dir das an. Gerade fertig. Wir können es stylen oder wir können es verlassen. Aber das ist bereit zu gehen. Ist keine Bestellbestätigungsseite. Ja. Vielen Dank. Andere Dinge, die es hinzugefügt hat. Kehren wir zu meiner Produktvorlage zurück es neue Inhalte in diesem Anzeigenpanel gibt, Canada Elements. Also haben wir all das gesehen, wir gewöhnen uns ziemlich daran. War dieser E-Commerce, den es vorher nicht gab. Das passiert, wenn Sie diesen Knopf drücken und ihn in einen E-Commerce-Shop verwandeln. Sie erhalten, dass dieses Zeug zuvor versteckt wurde. Wir können Add to Cart addieren. Ich werde das hier hinzufügen, irgendwo oben, unten bitte. Riesiges Bild. Sie können sehen, sie sehen, es hat den Preis, ich kann es in den Warenkorb legen. Aber Flow macht es ziemlich einfach einen E-Commerce-Shop zu erstellen, gibt Ihnen aber auch die Kontrolle, wo wir alle Klassen durchgehen und zu diesen Schaltflächen hinzufügen können . Salam, wie wir mit unseren süßen neuen Medizin wollen, Styling-Fähigkeiten, die wir in diesem Kurs gelernt haben , Klassen hinzufügen, globale Klassen konvertieren. Bevor wir gehen, wird es einige Dinge geben , die wir nicht behandeln werden. Gehen Sie hier zur Einrichtungsanleitung. Sie können einige davon selbst durcharbeiten. Als würden wir definitiv eine Geschäftsadresse machen, nur weil wir uns irgendwie davon abhalten können, zu weit zu kommen. Überprüfen Ihrer Währungseinstellungen und die Art des Versands, den Sie in Ihrem Text für Ihr Land durchführen werden, fällt und die Art des Versands, den Sie in Ihrem Text für Ihr Land durchführen werden den Sie in Ihrem Text für Ihr Land durchführen den Rahmen dieses Kurses. Es ist für jeden anders. Wir haben Stecker gemacht, um es einfach zu machen. Dinge, die wir behandeln werden, indem wir ein Produkt oder Design hinzufügen, sind Speicherkarten , die all dies tun. Wir schauen uns die E-Mails an und gehen durch, wie man sie hostet. Ziemlich cooles Zeug, okay, das ist ziemlich wirbelig. Übersicht Ed-Produkte und dann zwei Seiten verbinden sie mit einem Warenkorb und einem Zahlungsgateway, Geld verdienen, wie kann es sein? Was ich tun werde, ist diese Produkte zu löschen. Okay, also wähle ich alle aus und lösche, und ich werde meine Sachen auf der Seite löschen , um uns zurück zur Heimatbasis zu bringen , damit wir wieder per Container beginnen können. Wir sind bereit zu gehen. Gehen wir jetzt durch und schauen uns diese einzelnen Schritte an. Individuell und sehen Sie, wo die Hindernisse liegen könnten und wie Webflow mit E-Commerce umgeht. 102. So fügen Sie Produkte in Webflow zu Ihrem Geschäft: Hallo! In diesem Video werden wir Produkte zu unserer E-Commerce-Website hinzufügen. Wir werden einen manuell hinzufügen. Wir werden dort ein paar andere Einstellungen durchgehen. Dann importieren wir das Handgelenk per CSV, nur um die Dinge zu beschleunigen Ich zeige Ihnen, wie Ihr Kunde sie auch über den Editor hinzufügen kann . Und wir werden am Ende eine Menge Produkte und nichts auf der Seite, die wir tun werden Wir werden uns im folgenden Video ansehen, wie wir sie der Seite hinzufügen . Lass uns ein paar Produkte hinzufügen. Okay, also lass uns ein Produkt hinzufügen. Wir gehen zu unserem E-Commerce-Panel. Okay, wir brauchen Produkte. Gehen Sie hier hoch und erstellen Sie ein neues Produkt. Okay. Und Sie haben einen Produkttyp. Handelt es sich um einen physischen, digitalen oder fortschrittlichen Service? Im Grunde bestehen die Unterschiede darin, dass sie alle gleich physisch beginnen. Du Scott-Name, der Slug, die URL-Beschreibung, welcher Kategorie es gehören könnte, alle damit verbundenen Bilder und Abrechnung, wie viel es kostet. Aber dann hast du Dinge wie Schiefe und du hast Versandkosten, Größe, Gewicht , so etwas. Okay? Aber während digital, wird es eine Menge von dem unteren Zeug los und sagt, es ist einfach, da ist der Dateiname und das ist die URL. Also das könnte für etwas sein wie : Hey, lade die Pläne dafür herunter. Hier ist ein E-Book und Sie können Ihren Link zu der Datei haben, vielleicht Dropbox oder so. Okay, also auch hier können Sie in den Service gehen, was im Grunde all das abschneidet weil Sie nichts wie ein digitales Produkt oder den Versand eines physischen Produkts liefern müssen nichts wie ein digitales Produkt . Aber am Ende werden Sie für einen Service tun, wenn Sie die Dankesseite etwas anders anpassen , um zu sagen, hey, willkommen, und Sie haben sich für unsere Kurs- oder Fitnesssache angemeldet . Und wir sehen uns am Dienstag in der Klasse. Mehr zu tun mit der „ Gefällt mir“ -Dankesmail. Sie können es hier sehen. Es gibt Ihnen auch einige Beispiele wie Konsultationen. Geht. Die letzte ist eine Combo. Es macht Produkte, es fügt sie einfach alle unten hinzu. Sie können tun, hat es Downloads? Ja. Hat es Versand? Du kannst ein bisschen von beidem machen. Also was wir tun werden, also machen wir es physisch. Ich ändere den Typ. Jetzt. Ich habe etwas Text in den Übungsdateien. Es gibt eine neue namens Übungsdateien. Es gibt einen namens Store, öffne Produkt eins. Du könntest es auch einfach eintippen. Jasmin-Grüntee. Und ich schnappe mir das Loren-Ipsum für die Beschreibung. Wir werden später Kategorien erstellen. Aber Sie denken, Kategorien könnten koffeinfrei sein, vielleicht eine Kategorie, die die Leute anhand meiner verschiedenen Zähne durchsuchen könnten. Nun, vielleicht Regionen, vielleicht eine Kategorie der verschiedenen Teeanbaugebiete. Ich weiß nicht viel über Tee. Ich weiß nicht einmal, ob es einen Jasmin-Grüntee gibt. Wie auch immer, Medien, es wird das Bild sein, also können wir es in oder unter den Laden ziehen. Da ist dieser namens T, bring ihn rein. Abrechnung. Okay. Ich werde sein, mein Preis wird 13.95 Texte sein. Sie können daran arbeiten, was ihre Texte sind. Sie müssen entscheiden, was das in Ihrer Region ist. Und die Verzerrung der Lagerhaltungseinheit wird im Allgemeinen nur von Geschäften für eine eindeutige Kennung verwendet , sodass sie sie leicht verfolgen können, anstatt sie Jasmin-Grüntee zu nennen sie haben vielleicht verschiedene Versionen davon von verschiedenen Anbietern und es hat einen schönen Code. Inventar. Vielleicht hast du nur zehn davon, vielleicht verkaufst du Drucke oder T-Shirts. Auf diese Weise können Sie die Menge anzeigen und wenn sie aufgebraucht ist, können Sie sie stoppen. Der Versand muss warten, okay, Sie müssen Ihre Versandhöhlen sortieren, durchgehen, wie viel Versand Sie kosten wird , und Sie führen Berechnungen mit dem Gewicht, dem Ende und den tatsächlichen physischen Abmessungen durch. Wir werden es nicht für diese Option tun. Klicken wir auf Erstellen. Hier, mein Freund, haben wir ein Produkt genau wie zuvor, wo wir unsere Blog-Beiträge hatten, außer dass dieses Produkt Preise und Versand hat. Um Zeit zu sparen, möchte ich, dass Sie einen Import, eine CSV, durchführen. Okay. Ich habe eine in Ihren Übungsakten denn wenn Sie nur Ihre eigenen Drucke und Siebdrucke machen Ihre eigenen Drucke und und ich sie online verkaufe. Du könntest sie eins nach dem anderen einbauen. Das ist völlig in Ordnung, wenn Sie mit arbeiten, sich an das Akronym dafür erinnern können, aber eine Art Bestandskontrolle. Sie können eine CSV mitbringen, Sie können eine CSV exportieren und mitbringen. Und ich werde über CSVs sprechen und ein bisschen, weil es etwas schwieriger ist als beispielsweise unser Blogbeitrag CSV, Notiz-Testimonials. Das haben wir mitgebracht, aber das machen wir in einem Video. Ich habe einen bereit zu gehen. Okay, wir klicken auf Importieren. Es kann eine Weile dauern, je nachdem wie groß Ihre Datenbanken sind. Nun, die CSV ist. Da haben wir's. Wir haben sie weitergeleitet, okay, also haben wir Produkte über den Designer hinzugefügt. Ihr Kunde oder Kunde kann über den Editor gehen. Bevor sie das tun können, müssen wir unsere Website veröffentlichen. Wir haben nichts davon gemacht. Okay, also werde ich das schließen. Und jetzt würden Sie es mit Ihrem Gastredakteur teilen und der Redakteur würde es öffnen. Wir haben das richtig gemacht? Ich habe noch nichts auf unserer Seite. Aber schauen Sie, sie können in den E-Commerce gehen, okay, und sie können anfangen, sich ihre Produkte anzusehen. Und genau wie wir können sie einen Produktnamen hinzufügen, aber sie bekommen die weiße Version, wir bekommen die Dark Moody-Version und Webflow. Aber es ist im Grunde dasselbe. Was Sie vielleicht bemerken ist, dass es auf unserer Website nichts gibt. Gehen wir als Nächstes dazu über. 103. Hinzufügen deines ecommerce zu einer Seite in Webflow: Hallo du. Wir nehmen unsere Produkte, die sich derzeit in unserem E-Commerce-Tab befinden, und fügen sie ihrer eigenen Seite hinzu. Wir legen einen Einkaufswagen hinzu. Wir können verschiedene Größen für unser Produkt auswählen und sie der Katze hinzufügen. Da taucht ein Kabeljau auf. Dies ist ein cooles Video, in dem wir ziemlich viel machen können. Eigentlich machen wir nicht viel. Wir würden es werfen, macht eine ganze Menge. Das ist noch besser, oder? Denken Sie daran, dass wir eine Vorlage entwerfen, nicht die eigentlichen Seiten selbst, also befinden sie sich unter meinen Seiten. Aber wir entwerfen nur diese eine Produktvorlage. Und es werden alle Angebote unserer E-Commerce-Produkte abgerufen. Wir haben vier davon drin und es wird sie alle abrufen und diese Seiten für uns erstellen. Ratet mal was? Es ist genau so, wie wir den Blogbeitrag geschrieben haben, als wir zuvor unser CMS gemacht haben. Es gibt also wirklich nur eine Zusammenfassung, schauen wir uns die an, also schauen wir uns die Vorlage an. Wir werden eine sehr schnelle Seite erstellen . Also lass es uns schnell machen. Also gehen wir Command E oder Control E auf einem PC. Ich packe es in einen Behälter. Befehl E. Ich setze einen Div-Block ein. Dieser div-Block wird nur ein gefälschtes Navi als Platzhalter sein. Denken Sie an Command oder Control Return, Denken Sie an Command oder Control Return um diesem Diblock eine Klasse hinzuzufügen. Und das wird Div Nav heißen. Ich sollte es wahrscheinlich einen Abschnitt nennen. Das ist in Ordnung, Command E. Fügen wir einen Abschnitt darunter hinzu, und das wird mein Produkt sein. Ich glaube, es ist in meinem Container verschwunden. Name, dieser Abschnitt, ich nenne ihn Abschnitt Produkt. Lass uns einen Blick darauf werfen. Du bist da drin gelandet. Lass es uns darunter legen und lass uns anfangen, unsere Stücke hinzuzufügen. Wir haben das vorhin irgendwie angedeutet. Okay, wir werden einfach entscheiden, was zuerst passiert. Was ich tun werde, ist ein Bild einzubauen. Okay, ich fange mit meinem Bild an. Wir haben angefangen, die Abkürzungen zu verwenden. Lass uns weitermachen. Also Command oder Control E oder ein Bild, mit dem wir es verbinden. Es weiß das nur, weil wir uns in unserer Produktvorlage und es größenmäßig aus meinem Bildfeld abgerufen wird. Ich mache einfach 500 auf dem Desktop, weil es zu groß ist. Sektion Produkt. Gehen wir Command oder Control E und setzen uns ein, wir stellen es in eine Heizung. Diese Heizung wird ein Ufer treffen. Lassen Sie uns das vom Namen meines Produkts erfahren. Denken Sie daran, Sie können entscheiden welches Sie sich tatsächlich ansehen, wenn Sie möchten, oh, das ist falsch, das ist mein hässliches Produkt. Schauen wir uns die ganze Zeit die Mongolei an, t, entlang t. Diese stimmen nicht überein, indem einfach t-Bilder aus dem Internet abrufen und T-Namen finden. sind vielleicht nicht einmal T-Namen. Aber schauen wir uns trotzdem das Hinzufügen des Lehrbuchs an. Dieser kriegt es für die Beschreibung. Wie zuvor können wir unsere Klassen hinzufügen und das Styling wird es etwas später stylen , wenn wir wissen, wie man Dinge stylt. Jetzt schauen wir uns mehr die Funktionalität von e-comm an. Jetzt fügen wir unseren „In den Warenkorb“ -Button hinzu. Okay, hier drunter gibt es diese Gruppe, okay? Diese beiden sehen gleich aus. Dies ist wie Ihr Gesamtschnitt für die Seite oder Website. Okay. Du kannst zehn Dinge drin haben. Das ist die Art und Weise, wie man Sachen da reinbringt. Button In den Warenkorb legen. Ich lege den da drunter. Hab es nicht verstanden. Klicken Sie auf Halten und ziehen Sie es nach rechts. Nun geht es darum, warum wir eine Größe haben , die zu den Daten gehört, die wir aus der CSV importiert haben. Keine Sorge, wir schauen uns das an. Ich mache etwas namens Varianz und ein bisschen, aber meins ist viel zu breit, also mache ich eine Mindestbreite von 200, was nicht funktionieren wird. Lass uns einfach eine Breite von 200 Caught machen. Und diese „In den Einkaufswagen“ -Buttons haben einige besondere Fähigkeiten. Wenn sie also etwas anderes machen als Sie es gewohnt sind, gehen wir die nächsten Videos durch und zeigen einige davon. Ich wusste nicht, dass man keine Mindestbreite darauf machen kann, bis es richtig ist, dann ist es normalerweise ein Wrapper-Behälter und gibt ihm seine Breite. Aber hey, es gibt einige besondere Befugnisse und einige seltsame Dinge , die mit den Kosten passieren , weil sie versuchen viel mit diesen Dingen anzufangen, Daten einzuziehen, aber das ist im Moment gut genug. Lass uns das Ding testen. Wenn Sie also E-Commerce probieren, können Sie manchmal Dinge im Vorschaumodus testen. Du kannst durchgehen und sagen: „Ich bin da, los geht's. So viele verschiedene Größen. Manchmal müssen Sie die Website jedoch veröffentlichen, sonst funktioniert sie nicht. Es wird dir sagen. Und wenn Sie auf Probleme stoßen, bevor Sie loslegen und versuchen, eine Lösung zu finden. Es könnte sein, dass E-Commerce mehr als alles andere, was wir getan haben, auf Ihrer Staging-Domain veröffentlicht und getestet werden muss . Schauen wir uns das an. Damit wir darauf klicken können, können wir eine Menge verpassen. Und um es zu kürzen, heißt es, dass Sie auf dieser Seite keinen Schnitt hatten. Wir müssen in den Warenkorb legen, aber es gibt keine Katze auf dieser Seite. Okay, also müssen wir den Schnitt tatsächlich hinzufügen. Wir müssen hinzufügen, dass jede Seite, auf der Sie Dinge von ihm verkaufen möchten , dies auch in der Vorlage hier tut. Perfekt. Wo ist es? Es ist diese andere Option hier. Das Auto hinzuzufügen ist also so würde man entscheiden, was man tun und was man kaufen wird. Es muss irgendwohin gehen. Es geht um diesen. Und diesen hier werde ich meiner Navigation hinzufügen. Das ist mein Warenkorb-Button. Ich muss es für den Moment auf der rechten Seite haben, nur weil die Katze das Gefühl hat, dass sie hingehen sollte. Wenn du mitspielst und zum Beispiel die Navigation von hier drin oder von der Vorlage eines anderen hast Beispiel die Navigation von hier drin oder von , die Komponente, die Navigationsleiste. Wir werden uns das etwas später ansehen. Dieses und seltsame Zeug, das damit passiert , muss es bekämpfen. Aber noch einmal, wir werden die Übersicht behandeln, bevor wir uns mit einigen Dingen befassen, in Ordnung, jetzt sollte es in der Vorschau funktionieren. Ich will zwei meiner Hundert-Gramm-Versionen und ich sage Etikette. Schau dir das an. Wir haben eine Katze. Es ist alles für uns erledigt und es sieht ziemlich gut aus. Auf Null gesetzt, aber das können wir reparieren. Oh, süßes Pop-up. Ordnung. Schauen Sie sich einige unserer anderen Seiten an. Das ist das, was wir eingegeben haben und es gibt dieses Drop-down-Menü nicht. Ordnung. Mein Freund, du hast Produkte hinzugefügt und wir haben sie zu unserer Website hinzugefügt. Das nächste, was wir brauchen, ist , eine große Liste aller unserer Produkte zu erstellen und sie auf unsere Homepage zu stellen. Das machen wir aber im nächsten Video. 104. Hinzufügen einer Liste deiner Produkte auf der Homepage: Okay, also haben wir alle unsere Seiten erstellt. Was wir tun wollen, ist von der Homepage aus auf sie zu verlinken und eine Liste wie diese zu erstellen, damit wir alle unsere Produkte auf einer Seite sehen können. Lass es uns machen, in Ordnung, denn ich konnte mein Navi nicht hacken , weil es so langweilig war, ich es weniger langweilig gemacht habe. Ich habe hier ein paar Texte hinzugefügt und die ausgewählte Hintergrundfarbe festgelegt. Ich werde es kopieren, weil wir es zu unserer Homepage hinzufügen müssen. dem Moment, in dem wir noch in unseren Testimonials stehen, sollte ich daraus ein Symbol machen. Jahre. Ja, du hast völlig recht. Ich werde es löschen und ein bisschen, weil wir, ich werde dir etwas und ein bisschen zeigen. Ich weiß, was kommt, also ist es besser , kein Symbol zu sein. Ich füge einen Container hinzu. Mein Navi kann reingehen. Ich werde hier vorerst einen Abschnitt einbauen. Ich hole es rein. Es wird mein Bereich für unsere Produkte sein. Muss ich es benennen? Wahrscheinlich nicht. Es gibt bereits ein sexuelles Produkt. Ich habe es im letzten Video gemacht. Habe ich das nicht? Liste? Da haben wir's. Okay. Um alle unsere Produkte zur Seite hinzuzufügen , haben wir es schon einmal gemacht. Geh einfach hier hin und du sagst, wie wir das machen, bevor wir die Testimonials verschieben und dich an die Blog-Beiträge auf der Homepage erinnern. Wie bekommen wir all diese, diese große alte Liste? Das stimmt. Benutze dasselbe. CMS-Liste. Los, wir sehen mich als Sammlungsliste. Es ist nicht anders. Okay. Du sagst, du hattest dort. Daran erinnere ich mich. Woher kommt es? Es wird von meinen E-Commerce-Produkten kommen. Schau dir das an. Es gibt alle vier. Also werde ich meins auf diese Weise hochhalten und eine Vorschau anzeigen und nichts passiert. Was müssen wir noch tun? Wir müssen die verschiedenen Elemente hinzufügen, in denen wir tatsächlich erscheinen möchten, wie wir es auf der Produktvorlagenseite getan haben, aber das haben wir auch schon einmal gemacht. Lass uns ein Bild hinzufügen. Klicken Sie hier rein, vielleicht fügen Sie es einfach zu einem von ihnen hinzu. Befehl E, Bild. Ich bekomme es von den Produkten und es gibt nur ein Bild, von dem ich bekommen kann. verstehen wir. Ich muss mit der Größenbestimmung herumspielen, weil ich zufällig Sachen aus dem Internet bekommen habe. Aber wir wissen, wie man Bilder zuschneidet, wir werden es jetzt nicht tun. Aber wie wir hinzufügen möchten, fügen wir den Namen des Produkts hinzu. Das ist also genau das gleiche wie zuvor auf der Vorlagenseite, ich kann es an der richtigen Stelle bekommen. mir leid, ich kriege diese Nachricht. Ich gebe den Namen dafür an. Sollte wahrscheinlich schlagen, vielleicht vier treffen oder so ähnlich. Es ist in Ordnung. Im Moment braucht es Eimer. Auch hier werden wir es nicht stylen. Wir werden nur ein weiteres Textfeld hinzufügen. Gehen wir hier zu den Preisen. Nun, wir könnten einfach gehen, wir fügen einfach eine Schaltfläche hinzu und sagen, in Ordnung, wenn darauf geklickt wird, holen wir es vom Produkt, bekommen tatsächlich die URL, ja, verbinden Sie sich mit, erinnern Sie sich an diese Seite, URL, wir wollen eigentlich zwei Seiten nehmen und vielleicht gibt es zwei. Jetzt gibt es eine lila, weil sie sie von einer Sammlungsseite bekommen wird. Aber jetzt kommt die E-Commerce-Seite, welche? Aktuelles Produkt, von dem es es abziehen wird, wie auch immer der schnelle Name lautete. Kannst du den schnellen Namen sehen? Und sie sind jetzt weg, Sie können sehen, dass es von diesem Knopf kommt , der mit süßem Zimt verknüpft ist. Das wird darauf verlinken. Die Mongolei wird hier auf diese Schaltfläche verlinken. Okay, wir werden das ändern, um mehr zu sehen. Lass uns eine kleine Vorschau machen. Lass uns einen kleinen Blick darauf werfen. Gehen wir zu Bio-Kamille, Kräutertee. Du gehst zurück zur Startseite und es funktioniert nicht. Gehen Sie hauptsächlich zurück zur Homepage. Gehen wir den langen Weg zurück. Startseite, neuronale Werke. Sie könnten sich dafür entscheiden, dies nicht zu tun. Ich schalte es für den Moment einfach aus. Also werde ich keine anzeigen , weil ich sie wieder einschalten möchte. Und nehmen wir an, wir wollen auf dieser Seite einkaufen können. Wir können zu unserem neuen praktischen Ed-Element gehen. Wir verwenden „In den Einkaufswagen“. Und denk dran, wir müssen den Warenkorb auf der Seite haben. Deshalb habe ich es kopiert und eingefügt. Wenn Sie es nicht haben, stellen Sie sicher, dass die Katze auch dort weitergeht. Ich setze es rein. Sie können sehen, dass es an einen besonderen Ort gehen muss. Und das scheint, als ich das erste Mal erfuhr, dass es so war wie, Whoa, wie kann es nicht auf die Homepage gehen? Es muss nur in den richtigen Teil dieser Listenelemente gehen . Wenn du anfängst, es mit Dividenden zu stylen, tauche ich, achte nur darauf, wo es hier landet. Okay, also ich gehe, du musstest schneiden und sicherstellen, dass du siehst, dass Rot es nicht mag. Sie werden nicht gelesen. Gut, zu hoch. Exzellent. Lesen Sie das Bett. Oh, es läuft nicht gut. Okay, genau darunter. Ordnung. Wir haben alle unsere Produkte auf der Homepage aufgelistet. Was kannst du sonst noch tun? Die Sammlungslisten? Vielleicht haben wir es früher gemacht. Wenn wir darauf klicken, können wir zu den Einstellungen gehen und es filtern. Okay, also hier kann ich mich entscheiden. Vielleicht will ich, ich will drei, aber es zeigt sich vorher, wie kann ich es auf drei reduzieren? Das stimmt. Beschränken Sie die Elemente auf nur drei. Bitte. Klicken Sie erneut darauf und ich klicke auf die Liste. Jetzt können wir es auch sortieren. Vielleicht haben wir nach zufälliger Reihenfolge gespeichert, wir können filtern. Okay, also lass uns einen Filter hinzufügen, der Name ist gleich. Jetzt hier drin, okay, es gibt noch ein paar andere Dinge. Was wir tun könnten, ist mit dem Switch fortzufahren , den wir zuvor hinzugefügt haben. Wir könnten uns also entscheiden, in unsere Sammlung zu gehen , in diesem Fall handelt es sich um eine E-Commerce-Sammlung. Also ist es hier drin, ich brauche Produkte. Und schauen wir uns das Hinzufügen einer Option an, die besagt, dass ich einen dieser kleinen Kippschalter habe? Und die eine Sache ist, wir machen es nicht mit den eigentlichen Produkten selbst. Wir machen es mit dem Produkt hier hinten. Okay? Wir sagen also das Zahnrad, nicht der eigentliche Gegenstand. Und wir wollen ein Feld für diese Leute hinzufügen. Und wir sagen, fügen wir ein neues Feld hinzu. Es wird ein Schalter sein. Und dieser Schalter wird als Verkaufsartikel oder empfohlene Artikel gekennzeichnet sein . Und ich werde es speichern, die Sammlung retten. Und hier drin kann ich jetzt durchgehen und sagen, wer einen Verkauf für diesen hat. Und vergiss nicht, die Änderungen zu speichern. Und vielleicht Jasmintee, vielleicht hat dieser hier auch einen Verkauf. Spar es. Jetzt kann ich mit unseren süßen Fähigkeiten von früher auf meine Homepage zurückkehren . Wir können sagen, eigentlich weiß ich nicht schon, wie ich das machen soll. Homepage, ich kann auf die Navigator-Sammlungsliste klicken. Ich kann sagen, zeig mir einfach den Filter, hat, oder ist ein Verkaufsschalter eingeschaltet , um nur diese genial zu wirken? Nun ja, ich bin glücklich mit mir selbst. Ich hoffe du bist auch glücklich mit dir selbst. Wir lernen neue E-Commerce-Dinge, aber wenn wir einen Teil des frühen Wissens nutzen, das Ganze viel einfacher zu machen, brauchen wir wahrscheinlich nur zwei. Nun, los geht's. Das heißt, Hinzufügen von Listen zu unserer Homepage oder einer anderen Seite, die wir erhalten, um diese CMS-Sammlungsliste wiederzuverwenden. In Ordnung, Auf das nächste Video. 105. Zahlungseinstellungen in Webflow: Willkommen zurück. Wir haben unsere Produkte auf unseren Seiten. Wir haben einen Einkaufswagen sind nur ein paar weitere Schritte, bevor wir Zahlungen entgegennehmen oder zumindest Bestellungen für unser t annehmen können Zahlungen entgegennehmen oder . Lassen Sie mich Ihnen zeigen, was sie sind. Der beste Weg ist eigentlich, die Website zu veröffentlichen und zu überprüfen, soweit wir kommen können. Also werde ich die veröffentlichte Website überprüfen, nicht die Testwebsite. Okay. Und ich sage In den Warenkorb und es wird heißen, du kannst nicht, du musst eines davon auswählen. Okey-dokey hat eine Karte, füge sie hinzu oder wen wir dort bekommen. Wir werden weiterhin als deaktiviert auschecken und auschecken. Was heißt das? Lassen Sie mich Ihnen zeigen, wie Sie die Site aktivieren können. Es wird dich nicht sofort lassen. Es wird dir sagen, Lass uns zu unseren gehen, eigentlich geht es zu unseren Projekteinstellungen. Okay, und wir gehen zum E-Commerce und es wird sagen: Hey, bevor du weitermachen kannst, musst du uns deine grundlegenden Dinge mitteilen. Okay. Es ist hauptsächlich Ihre Geschäftsadresse. Ich. Ich arbeite in Euro, die du nicht eingeben kannst. Okay. Also E für Euro. Ich gebe meinen Firmennamen und meine Adresse ein. Du siehst weg. Ordnung, das ist meine verschwommene Adresse. Fahren Sie fort. In Ordnung, jetzt haben wir hier ein paar zusätzliche Funktionen. Und das, was wir wollen, wir können es fast schaffen, ist sich daran zu erinnern, dass wir unser Geschäft aktivieren müssen. Also lass uns gehen und General gehen. Lass uns zur Kasse gehen und lass uns ölig auschecken. Wer muss unser Hosting upgraden. Wir haben vorhin darüber gesprochen. Ich gehe jetzt meins machen. Sie können immer noch viel von diesem Kurs oder der Vielfalt dieser Videos machen, ohne den Host zu aktualisieren. Aber ich werde meins machen, damit ich direkt hinter dem Upgrade weiter gehen und jetzt meine Homepage abholen kann, meine Sammlungen sind weg. Oder ist es? Das erste, was ich immer versuche, ist das Zurücksetzen der Seite, das Stück neu zu laden. Keine Artikel gefunden. Das ist nicht gut. Du hast gegessen, dann werde ich es herausfinden und dich wissen lassen, was passiert ist. Ich habe es herausgefunden. Okay. Es waren meine Produkte in meinem E-Commerce unter Produkten, sind alles noch Entwürfe, also nun, sie haben geänderte Entwürfe bekommen, sie wurden veröffentlicht. Okay. Was ich also tun kann, ist, dass ich einzeln sagen kann , dass Sie kein Entwurf der USA sind , der zur Veröffentlichung inszeniert wurde oder direkt nach oben geht, veröffentlichen Sie ihn. Der Unterschied zwischen diesen beiden ist irgendwie inszeniert wird es irgendwie inszeniert wird, wenn ich das nächste Mal die gesamte Website veröffentliche, die veröffentlicht wird, es wird weitergehen. Wenn ich jetzt veröffentlicht hätte, geht es jetzt direkt live und wartet nicht darauf, dass ich die gesamte Website veröffentliche. Aber ich mache sie alle zusammen. Ich sage, wähle sie alle aus. Danke. Hier drüben sage ich „Stage full publish“. Ja, bitte. Nun, ich schätze, das war es. Gut. Ich habe nicht wirklich nachgesehen. Jep. Sie sind bereit zu gehen. Wir haben unser Hosting aktualisiert, wir haben einen Schnitt auf unserer Seite. Wir haben unsere Geschäftsadresse hinzugefügt. Lass es uns auf YouTube einschalten. Ihr Checkout wird aktiviert. Wird aktiviert. Sie müssen einen Zahlungsanbieter hinzufügen. Also lass uns darauf klicken. Sie können hier oder dort hingehen und auf diese Schaltfläche klicken. Sie müssen einen dieser beiden verbinden. Jetzt möchte ich meine 12 hier nicht verbinden, weil mein Geschäft nicht wirklich mit diesem T-Store verbunden ist. Ich möchte im Moment nicht, dass Transaktionen eingehen, aber das ist es, was wir als Ihr Zahlungsgateway hören und Sie können Ihren Knopf einschalten. Okay, anstatt Zahlungen sofort anzunehmen. Mit diesen Zahlungen werde ich jetzt nicht darauf eingehen, wie man Stripe und PayPal aufsetzt. Stripe ist eine sehr verbreitete Kreditkartenverarbeitung. Sie können auch PayPal verwenden. Sie können beide verwenden. Es wird Einschränkungen geben. Okay. Wenn Sie es einrichten, überprüfen Sie einfach, was sie sind, bevor Sie in die Abrechnung des Kunden gehen , möglicherweise weil Sie wirklich möchten , dass Ihr Kunde die Stripe und PayPal, nicht Sie, weil sie für die Steuern und die Zahlung der Gebühren verantwortlich sind . Außerdem benötigen beide eine Identifizierung. Wenn ich also meinen Stripe und PayPal einrichte, möchten sie Ihre Daten in einem Ihrer Reisepässe oder in Ihren Kleidern wissen . Sie stellen Dinge ein, du fügst ein Bankkonto hinzu und sie verifizieren das Bankkonto. Sie werden ziemlich schnell arbeiten. wird es jedoch einige Einschränkungen Bei neuen Konten wird es jedoch einige Einschränkungen geben, wie viel Sie verarbeiten können und wie viel Sie viel Sie verarbeiten können und wie viel Sie überweisen können. Aber ja, das ist alles. Zahlungsanbieter hinzufügen, aufhören zu machen, aufgehört, T-Store-Imperium aufzubauen. Ordnung, das war's für dieses Video. Gehen wir zum nächsten über. 106. Was nach einem Kauf in einem Webflow geschieht: Also hat jemand auf Ihrer Website eine Bestellung aufgegeben. Wie werden Sie benachrichtigt? Was passiert als nächstes? Nun, zwei Dinge passieren. Eine E-Mail geht raus und dann gibt es Bestellungen , die Sie überprüfen können. Schauen wir uns zuerst die E-Mails an. Wenn Sie hier zu diesem kleinen Zahnrad gehen, gibt es eine Option mit der Aufschrift E-Mail. Sie können dieser E-Mail ein Branding hinzufügen. Und unten sind hier die verschiedenen E-Mails, die Sie sehen und ändern können. Go-Bestellung bestätigt. Okay. Und Sie können hier eine Testvorlage davon sehen. Ich habe eines meiner Produkte hat einen falschen Namen. Muss gehen und reparieren. Aber das ist es, was Sie, oder wenn es Ihr Geschäft ist oder Ihr Kunde eine E-Mail erhält, können Sie es unten testen, hier gibt es eine Test-E-Mail. Du kannst es dir selbst schicken. Sie sehen, dass es teilweise anpassbar ist. Und es gibt alle möglichen Phasen in diesem E-Mail-Prozess, wann sie empfangen wurden, wann sie versendet werden, wer die E-Mail erhält? Okay. Das ist hier unter Allgemein definiert. Nein, ist es nicht. Es ist unter E-Commerce. Allgemeines. Zu viele Generäle. Und Sie können hier sehen, dass es sich um eine verschwommene E-Mail-Adresse handelt. Es geht also los, sodass Sie und der Kunde E-Mails erhalten. Es wäre jedoch praktisch, einen zentralen Ort im E-Commerce unter Bestellungen zu haben , in denen sie alle aufgeführt sind. Und da hatte ich im Moment keine Bestellungen, aber dort können Sie sie im Designer sehen , der Ihnen einen Ladenbesitzer gegeben hat. Sie können es einfach über den Designer tun. Aber wenn Sie der Kunde sind, schauen Sie sich das vielleicht vom Herausgeber an. Denken Sie daran, dass dies die Ansicht ist, die Ihr Kunde, Kunde, Mitarbeiter sieht und unter Bestellungen die Liste aller Bestellungen angezeigt wird. Ordnung, das passiert also, nachdem jemand einen Kauf getätigt hat. E-Mail geht raus, diese Bestellliste wurde bearbeitet. 107. Anpassung der Warenkorbeinstellungen in Webflow: Hallo zusammen. In diesem Video schauen wir uns diesen Warenkorb-Button und das Element „In den Warenkorb“ an , das wir zuvor hinzugefügt haben , und zeigen Ihnen alle darin integrierten Geheimnisse. Und ich zeige dir, wie du in sie hineinkommst , damit du sie stylen kannst. Bleiben wir zuerst bei diesem Wagen. Es ist etwas Besonderes. Warum ist es besonders? Weil es hier im Navigator sein eigenes kleines Icon bekommt . Und hier drinnen gibt es ein paar Dinge. Da ist der Cut-Knopf. Nehmen wir an, wir wollen es stylen. Wir haben gerade angefangen, als hätten wir alles andere getan. Wir sagen Button Cut. Wir sagen, Sie werden alle abgerundeten Ecken und vielleicht den Verschluss haben , nett oder nicht nett, aber Sie haben die Idee. Du kannst das Ding ziemlich einfach stylen. Aber wie finde ich stilvoll das Pop-up, das du am Anfang gesehen hast? Das ist dieses Ding hier. Das ist der Cut-Wrap. Und du sagst, wow, normalerweise und du klickst auf etwas, kannst du sehen, dass es es hervorhebt. Dieser hebt nichts hervor, also ist alles da. Okay. ganze Zeug ist da drin , damit du das machen kannst. Wie lässt man es zeigen? Klicken Sie im Grunde auf den Warenkorb und wir schauen uns die Einstellungen an. Also schauen wir uns das kleine Zahnrad hier an , nicht die Styles, das Zahnrad, und es kommt mit einigen besonderen Sachen. Hier ist das Zeug zum räumlichen Schnitt. Also öffne den Wagen, das ist das Erste. Und standardmäßig ist es auf einem modalen Popup-Modal. Wenn du gerade ein Stylet hattest, kannst du jetzt sagen Du Lehrbuch, wir fügen einen Stil hinzu. Also zurück zu S für Stile, Textprodukte. Und ich suche mir eine Schrift und die Größe aus. Und ich nehme ein Gewicht. Mein Fall, es wird einheitenlos sein und das wird einer von dem sein, was auch immer das ist. Vielleicht ein bisschen mehr. Es werden nur 1,3 von diesen 20 Pixeln sein. Ja, wir sollten Zimmer benutzen, Bett runter. Wir sind schnell. Ja. Okay. Also können wir uns darauf einlassen, es zu stylen. Es hat auch einige andere Optionen. Also nochmal, zurück zu unseren Einstellungen. Sie können den Kartentyp sehen. Wir können eine machen, die von links auftaucht, eine, die nach rechts auftaucht, oder eine, die tatsächlich aus dem Wagen fällt. Lassen Sie mich das vorführen. Also lasst es uns öffnen und darauf klicken. Siehst du das? Ordnung, was es sonst noch macht, ist es in den Einstellungen ausgewählt zu haben . Mach es auf. Jetzt haben diese einige Grundeinstellungen. Bei diesen ersten drei sieht man, dass alles gleich ist. Letzteres hat ein paar andere, wie Sie es links oder rechts an der Schaltfläche ausrichten können oder rechts an der Schaltfläche je nachdem, wo es sich befindet und wie man es öffnet. Musst du darauf klicken oder kannst du einfach Mauszeiger darüber bewegen, wenn es herausspringt? Sie können hier mit der Lockerung und dieser Option spielen, sie alle haben das besagt, öffnet sie sich, wenn ein Produkt bearbeitet wird ? Machen Sie einige Benutzerproben. Ich weiß, dass ich auf vielen Websites manchmal einfach aufhöre, mich zu öffnen und zu versuchen, Dinge hinzuzufügen. Und es öffnet sich immer wieder, wenn Sie den Button „Weiter einkaufen“ finden , um ein wenig zu testen was für Sie und Ihre Kundschaft funktioniert. Und hier unten wird eine Vorschau angezeigt, wie viele es in einer Netzliste gibt. Es macht es nicht wirklich, es zeigt nur Vorschau wie viele. Ich habe nur vier von mir, also werden sie nur vorher angezeigt. Du könntest es drehen, nur um zu sehen, wie es aussieht. Abgesehen von ihrem Produkttitel ist es vielleicht nicht so nützlich, hier einen großen Treffer zu setzen hier einen großen Treffer zu setzen, wenn wir uns verlaufen haben. Dann ist die andere Sache, während wir hier drin sind , dass es Zeiten geben wird, in denen, wie sieht es aus, wenn es leer ist? Okay, du kannst hier durchgehen und den Text ändern. Okay, du kannst auch eine Klasse hinzufügen und sie stylen. Das Gleiche gilt für ERA. Du hast hier den Tiefpunkt erreicht. Das ist standardmäßig nicht da, siehst du? Sie können gehen und die Schriftfarbe stylen. Okay, schalten wir die Karte aus. Jetzt ist der „In den Warenkorb“ -Button hier unten auch etwas Besonderes, wenn ich versuche, ihn zu finden. Lass uns das alles beenden. Und lasst uns das in den Warenkorb legen, das ich aus dem Elementfenster gezogen habe. Also diese Person hier, diese hier hat dasselbe unter Einstellungen. Du hast ein paar Dinge. Möchten Sie, dass die Menge dort erscheint? Vielleicht tust du das nicht. Vielleicht wählt niemand mehr als einen aus. Als ob es nur einige gibt, an die ich momentan nicht denken kann, aber willst du drei Rückenmassagen? Tust du nicht? Nur der eine. Okay. Es macht also vielleicht keinen Sinn, dass ich mir nicht sicher bin , ob Ihnen dafür wahrscheinlich Anwendungsfälle von Bietern einfallen könnten . Okay. In den Warenkorb legen. Möchten Sie Ihnen zeigen, dass Sie jetzt nicht nur direkt kaufen, vielleicht nur eine Sache verkaufen. Es gibt keinen Like-Cut zum Hinzufügen. Ich möchte einfach direkt sagen Ja, das ist die eine Sache, die niemand mehr kauft als eines deiner Sachen. Vielleicht ist es Add to Cart und weiß inzwischen, dass Sie im Gegensatz zum Warenkorb das nicht vorrätige K und die Fehleroptionen stylen können . Es ist so, als würde man sie zwingen, zu erscheinen , damit man sie installieren kann. Auf einer anderen Seite werden Sie sich fragen, wie die Route zum Auto aussieht, die sich auf jeder Seite befindet, auf der Sie es platzieren. gleiche gilt für das Hinzufügen in den Warenkorb. Es gibt Unterseiten. Wir haben es uns vor einer Weile angesehen. Es gibt diese Checkout-Seiten. Du gehst einfach hinein und installierst sie wie du willst. Jetzt mit diesen Checkout-Seiten und dem Warenkorb und allem folgt es immer noch diesem CSS-Kaskadenfall. Irgendwelche Stile davor, das Checkout-Formular, das ist die eine Sache, wenn Sie nichts ausgewählt haben und hier wird es ein bisschen verwirrend, wie mache ich das? Kann ich irgendwas tun? Wenn Sie standardmäßig auf das eigentliche Formular selbst klicken, es irgendwie auf etwas anderes geklickt. Ich bin Buddy. Klicken Sie auf das Checkout-Formular, bisschen wie der Warenkorb und das Hinzufügen in den Warenkorb, das wir hier gemacht haben. Und unter Einstellungen kannst du Dinge tun , wie es keine große Menge gibt, also kannst du einiges davon tun. Ein Großteil davon wird von Webflow gesteuert , um sicherzustellen, dass alles funktioniert. Okay, es gibt also keinen, keinen Grund für den Versand. Also mach es irgendwie aus. Verstecken wir die Rechnungsadresse. Und wie zuvor können Sie gestalten die Fehlermeldung aussieht wie die Fehlermeldung aussieht, zusammen mit der normalen Seite. Nun zurück zu meinem Styling-Scherz darüber dass dies immer noch Teil der Kaskade ist Okay, also können wir diesen hier stylen und ihn mit einzelnen Stilen großartig aussehen lassen , das ist in Ordnung. Aber nehmen wir an, im Moment benutzt immer noch alles ARIO. Also was ich tun werde, ist zu meinem Körper zurückzukehren, obwohl ich auf dieser Checkout-Seite bin und Styles muss, werde ich hier darauf eingehen. Ich werde sagen, dass alle Körpermarken etwas sein werden, das Sie sehen können. Sie können sehen, je mehr sich ändert. Nehmen Sie also Ihre allgemeinen Änderungen vor wenn Sie den Rest der Website entwerfen. Und dann kannst du hier reinkommen und kleine Änderungen vornehmen. Ordnung, das ist das Anpassen Ihres Einkaufswagens. Sie werden in den Warenkorb gelegt und können alle stylen, einschließlich dieser Checkout-Seite. Ordnung, das war's. Wir sehen uns im nächsten Video. 108. Wie man Varianten in Webflow fügt: Wir müssen über Variablen sprechen. Variablen sind diese Dinge. Es gibt ein kleines Drop-down-Menü. Ich möchte Jasmintee, die 13€, aber was sind die 250? Oh, ich kann viel Geld sparen und es ist ein anderer Preis. Unsere Variablen sind also die Größe des Produkts. Ihre können die Größe der Kleidung haben, klein, mittel, groß, können verschiedene Farben haben, es kann sich um Kombinationen von Farben und Größen handeln. Die kalten Variablen. Lassen Sie mich Ihnen zeigen, wo sie sich in Webflow befinden. Ordnung, Sie werden sich also daran erinnern, dass wir tatsächlich schon einige Abweichungen haben. Sie stammen aus dem CSV, das ich dir gegeben habe. Okay, also was ich tun werde, ist Ich werde gehen“ klicken, sie alle einschalten, damit wir sie sehen können. Also werde ich das Limit ausschalten, damit wir diese Person sehen können. Okay, der alte Jasmin-Grüntee hat keine Varianz. Um die Varianz zu erhalten, gehen wir zu dem Produkt, bei dem es sich um ein E-Komma handelt und ein Produkt erhalten hat. Und schauen wir uns die Jasmine an. Dies ist die, die wir manuell hinzugefügt haben, okay, und dann unten unter Optionen, seltsamerweise sollte es Kovarianz sein. Fügen wir also einen Optionssatz hinzu. Das könnten Farbe, Gewichtsgrößen, Geschmacksrichtungen sein , was auch immer es ist, ich werde die Größe machen. Versuchen wir es mit Größe oder Gewicht gleich der Größe. Und wir werden haben, wie viele Optionen ich haben werde. Ich werde es in 100 g verkaufen können und du bekommst Enter oder Tab K und 150 g auch. Tut mir leid, Amerika, ich weiß nicht was das ist. Es ist Gramm. Das wird reichen, es scheint angemessen. Werfen wir also einen Blick auf Lass uns auf Fertig klicken. Du hattest es zuerst getan, sonst kommst du nicht zu diesem nächsten Teil oder zumindest zu dem, dass du es änderst. Woher kamen diese? Du meinst, ich habe die nicht gemacht. Durch Hinzufügen dieser Optionen. Es heißt, in Ordnung, du hast diese, weißt du, du hast etwas und es gibt zwei Versionen davon. Wenn ich sie hier weiter addiere, wenn ich eine KG-Version habe und die Eingabetaste drücke und ich war fertig. Sie werden unten sehen, dass wir eine KG-Option haben. Ich beuge ihn und wir kriegen das, bitte. Tun Sie das nicht. Da drauf. Gibt es eine Rückgängig-Option? Ich glaube nicht, dass es einen gibt. Oder rückgängig machen. Rückgängig, Rückgängig, Rückgängig. Oh Mann. Weißt du, Ross, ich glaube, ich mache es, ich glaube, ich mache das rückgängig, aber nicht hier drin, weil das noch offen ist. Es ist hier draußen rückgängig gemacht. Diese sind in Entwürfen enthalten, die diese Arbeit tatsächlich erledigt haben. Uid, ich repariere eine Sekunde. Geh nirgendwohin. Danke, dass du nicht gegangen bist. Also bin ich zurück. Ich habe gerade alles wieder eingeklebt. Und wir waren ja. Okay. Also haben wir diese n Erinnern Sie sich, als ich eine hinzugefügt habe, wie habe ich sie losgeworden? Ich habe das versehentlich gemacht und sie haben die Benachrichtigung nicht gelesen, weil ich weiß, was ich tue. Was du tust ist, dass es nicht hier oder da ist, oder da, es ist hier oben. Sie sagen, Sie können, Sie löschen diese Option. Das wollte ich also diese Ein-Kilo-Option hinzufügen. Die andere Sache, die ich ändern muss, ist die Größenänderung, aber die Preise werden sich hier ändern. Also gehe ich rein und sage, lass uns gehen, was in deinen Notizen steht. Wenn Sie einen erfundenen Preis wollen. Also tippe alles, was du willst. Preisvergleich ist ziemlich interessant. Lass uns einen kleinen Blick darauf werfen. Tauschen wir das aus. Also der Vergleich zum Preis wie dieser hier. Es ist so leicht, es ist ihr Preis, der eine Linie durchzieht, wie normalerweise vor dem Verkauf dieser Preis, aber Sie können es für diesen Preis bekommen. Ich habe berechnet, das würde es kosten wenn Sie es in den Hundert-Gramm-Losen kaufen würden. Sie sparen also eine ganze Menge von 14$. Da nehmen meine Teegeschäfte nicht genug mit. Okay. Also gehen die Deckel rein und schließen sie. Okay. Preis meine Mengen, ich habe zehn davon und nur eine davon. Speichern wir es und stellen sicher, dass es veröffentlicht ist. Weil es inszeniert ist, muss ich es veröffentlichen. Jetzt bin ich mir nicht sicher, ob ich dir das schon gezeigt habe , weil ich ein bisschen neu drehen musste . Also gehe ich immer nah dran, schließe sie. Aber du kannst einfach gehen und diesen schließen und alle brechen zusammen. Ordnung, ich werde die Seite veröffentlichen. Kann ich mir meine Seite ansehen, so wie ich es hier machen kann. Okay. Im Vorschaumodus. Okay. Aber wäre das veröffentlicht worden? Es funktioniert. Ich habe mein Drop-down-Menü. Wir haben eine Variable darüber der Preis nicht ändert, was mich nervt. Also auf der eigentlichen Hauptseite , die ich aktualisiere, an die ich mich nicht erinnern kann. Ich habe es nicht aktualisiert, um die Updates zu sehen und jetzt sollte ich 100 Gramm haben. Oh schau, es ändert sich. So einfache Dinge. Okay, das ist also eine Variable. Mit Variablen kann man verrückt werden. Sie können verschiedene Farben und Größen haben. Ich würde nicht zu viel auf das Wesentliche eingehen, aber Sie können alle möglichen Kombinationen und verschiedene Praktiken haben . Sie können das Bild auch austauschen. Lass uns das zusammen machen. Also lass uns hier wieder reingehen. Kommen wir zurück zu meinem Produkt. Und für diese andere Größe, gespeichert als eine andere Farbe. Das ergibt Sinn, oder? Du hast eine andere Farbe. Wenn Sie Unterhosen in diesen grünen und roten und blauen Unterhosen verkaufen , würden Sie das Bild gegen die verschiedenen Farben austauschen. Hier drin. Ich habe ein anderes Weiß, also habe ich nur ein kleines Bild für uns gemacht. Okay, also ich bin im 200-Gramm-Bild und Sie können sehen, dass dies das variable Bild ist. Ich ersetze es. Ich habe eine in deinen Notizen in deinen Übungsdateien. Ich muss gerade um 50 g Dollar sparen, obwohl es hier Euro sind. Und lass es uns schließen. Das Bild hat funktioniert. Cool. Es ist ein wirklich großes Bild für das, wofür ich es verwende. Lass uns veröffentlichen. Von hier aus kann es direkt veröffentlicht werden. Sobald es veröffentlicht wurde, können Sie es auch direkt von dort aus veröffentlichen, wenn Sie zum ersten Mal die gesamte Website veröffentlichen müssen. Wenn ich die Website aktualisiere, sollten wir in der Lage sein, Bilder zu wechseln, den Preis zu ändern, und sie ändern das. Ordnung, so fügen Sie eine Variable hinzu, suchen Sie nach den Optionen in Ihrem Produkt und löschen Sie sie nicht, oder klicken Sie zumindest nicht auf die Hitze, kann dies nicht rückgängig machen, lesen Sie es zuerst n. In Ordnung, das war's. Weiter zum nächsten Video. 109. Kategorien für Produkte CMS Sammlung mit Filtern hinzufügen: Hallo! In diesem werden wir Kategorien hinzufügen. In meinem Fall wird es Regionen geben, in denen Sie es aus Indien und China bekommen können. Und ich werde meine Produkte zu diesen Kategorien hinzufügen , damit wir nach ihnen filtern und nach ihnen suchen und sie gruppieren können. Sie könnten es für Herrenbekleidung, Damenbekleidung, Kinderkleidung tun , könnten gute Kategorien sein. Budget, Premium könnten zu gute Kategorien sein. Zuhause wo Hardware. Du musst dir deine eigenen Kategorien überlegen . Sobald wir eine Kategorie erstellt haben, was ziemlich einfach ist, werden wir auf unseren Produktseiten sagen können, mir alle T zeigen, die mit diesem T verwandt sind , von seinem Category Manager und das ist Herrenmode. Du willst nicht, dass deine Kinder hier auftauchen. Sie möchten zwar verwandte Produktkategorien. Ordnung, lass uns einsteigen. Lass uns ein paar Kategorien machen. Kategorien müssen Sie nicht haben, aber es ist eine gute Möglichkeit, Ihre Produkte zu trennen. In meinem Fall werde ich die Produkte in Regionen aufteilen, in denen Sie den Tee kaufen können, Indien oder Sri Lanka oder Japan wo immer Sie Ihre Zähne bekommen möchten, Sie können diese Kategorie auswählen. Aber für Sie könnte es ein Mittel geben und eine Frauen- und Kinderabteilung könnte eine Premium- und eine Budgetoption sein. Sie kennen Ihre Branche und welche Kategorien sie eingeordnet werden können. Sie können es also auf zwei Arten tun. Sie können zu demselben wie hier gehen und zu Kategorien gehen. Oder Sie können es über die Produkte tun. Lassen Sie uns Kategorien auf der Registerkarte Kategorien erstellen. Es hat eine neue Kategorie. Meine erste Kategorie wird, sagen wir mal China, sein. Okay, das werde ich erstellen. Eigentlich aus Mindanao. Sie können tatsächlich anfangen, sie hinzuzufügen. Nehmen wir an, die Mongolen können aus China kommen. Gehen wir von Kevin Mile. Okay, und ich füge auch süßen Zimt-Schwarztee hinzu. Okay, ich werde speichern, das ist eine Möglichkeit, Kategorien hinzuzufügen. Sie können es auch anhand des Produkts tun. Sagen wir Jasmintee hier, Sie können Kategorien sehen. Sie können aus einer vorhandenen auswählen, die wir bereits erstellt haben. Oder hier drüben kannst du hinzufügen, im Grunde ist es dieselbe Schnittstelle, okay, diese wird Indien sein. Und du wirst deine URL sehen. Es wird sie auch in kleine Unterordner aufteilen . Und Sie können sehen, dass es mir die Möglichkeit gibt, diese anderen gleichzeitig hinzuzufügen . Ich werde das einfach erstellen. Es kann für mehr als eine Kategorie gelten. Sie könnten also entscheiden , dass dieser aus Indien und China stammt. Knifflig. Aber schauen wir uns diese anderen an. Achten Sie darauf, die Änderungen zu speichern. Die Mongolei wird aus Indien kommen. Entschuldigung, ich dachte nicht, dass das alles durchgegangen ist. Und achten Sie darauf, die Änderungen zu speichern. Dan, lies den Popup-Text und der letzte ist okay, also hat einer einen, der ist weg. Der ist weg. Ich suche nur her. Und das geht, die meisten von ihnen sind die meisten von ihnen aus Indien. Speichern. Was kannst du jetzt damit machen, lass es uns schließen. Du könntest auf deiner Homepage etwas filtern, du kannst dich sehen, nun, das haben wir schon einmal gemacht. Entweder wird die Seite zurückgesetzt, wir gehen zurück. Werfen wir einen Blick auf unsere Produkte. Sie sind alle bereit zu gehen. Etwas stimmt nicht, es ist zurück. Ich habe sowieso nichts getan, ignoriere das. Nehmen wir an, gehen wir hier rein Schnappen wir uns unsere Sammlungsliste und wir können mit dem Filtern beginnen. Wir können das tatsächlich auf dieser Seite hier sagen, und wir müssen uns eigentlich limitierten OFS zuwenden. Wir haben nur vier, aber nehmen wir ich möchte nur denen auf dieser Seite zeigen , dass die Kategorie, die China enthält, nur zwei haben sollte. Ich glaube, bei einem von ihnen wurden zwei davon angewendet. Indien und China sind auch sehr praktisch , wenn Sie auf einer Seite sind. Also lass uns das sagen. Gehen wir zu unserer Produktvorlage. Ja. Wir schauen uns also die mongolische an. Ich kann mich nicht erinnern, wer sich bei Lost My Way beworben hat. Das ist gut. Jasmin TK. Und was wir tun können, ist dieselbe Liste hinzuzufügen. Also werde ich das beschleunigen. Okay, es hat gerade einen Container hinzugefügt und dann die Liste bearbeitet , die wir zuvor verwendet haben. Und ich werde es mit den Kategorien verbinden, aber ich werde es mit den Produkten verbinden. Denn was ich tun möchte, ist diese hinzuzufügen. Ich mache zwei mal zwei. Ich werde wieder beschleunigen und ein paar Funktionen hinzufügen. Okay, und ich verbinde sie nur mit dem Namen der Produkte. Plus ein Thron, ein Bildgeschwindigkeitsmodus. Okay, also jetzt auf dieser Seite und ich möchte irgendwie, wenn du in dieser und in einer Kategorie bist, also bist du in Herrenmode. Ich möchte andere Herrenmode sehen, möglicherweise keine Kindermode. Das Problem ist, dass ich dasselbe wieder sehen kann. Lass uns einen Blick darauf werfen. Gehen wir meine Liste durch. Und schauen wir uns die Filter an. Und lassen Sie uns zunächst sagen, ich möchte nur die Kategorien zeigen, die enthalten. Das ist einfach. Kannst du diesen kleinen Blitz sehen? Man könnte sagen, ich erinnere mich irgendwie daran, welche Kategorien aus dieser aktuellen Kategorie zu sagen sind. Es weiß, in welcher Kategorie es sich befindet. Warum werden sie alle noch angezeigt? Ich denke, Jasmintee ist in beiden Kategorien voll. Es werden also alle Angebote angezeigt, die sich in dieser Kategorie befinden , und weil sie in beiden enthalten sind, alle. Lass uns einen Blick darauf werfen. Lass mich ein bisschen durcheinander bringen. Grüner Tee gibt es also sowohl in China als auch in Indien. Es bedeutet also, dass es sie alle zeigt. Schauen wir uns das an. Wer ist dieser ist nur Indien. Lassen Sie uns das nur auf China setzen. Nur damit du auch nach China gehst. Also ändert sich und weiter, nach Indien. Also mach es ein bisschen einfacher. Sie speichern die Änderungen. Und Sie haben beide Indien. Nett. Okay, hoffentlich wird es auf magische Weise nur zwei Dinge zeigen, wenn wir zurück sind. Da haben wir's. Aber wenn ich in eine der anderen gehe, die Mongolei, gehst du, das zeigt den mongolischen Peer. Aber was Sie feststellen werden, ist, dass dieses zweimal angezeigt wird, was ich nicht mehr filtern möchte. Ich klicke jetzt auf die Liste. Wir fangen gerade an, in das Wurmloch zu gehen, wie die erstaunliche Breite, die Workflow in Bezug auf diesen E-Commerce hat, diese wichtigen Kurse wie ja, er übernimmt alles. Ich gehe nicht zu sehr ins Detail, aber ich denke, das ist cool, weil es einem ein Gefühl von vielen gibt . Okay, also füge ich einen Filter , der nicht der Name ist, das Produkt. ist schwierig, sich daran zu erinnern, als ob das Produkt das aktuelle Produkt ist. Nein, ich will ist nicht das aktuelle Produkt. Also möchte ich dir diese Liste zeigen. Sie möchten die Produkte filtern , die nicht das aktuelle Produkt sind. Ich kann das tun und diese andere mit der Aufschrift Teilen zu den Kategorien loswerden . So kann ich mir diejenigen zeigen , die nicht dieses Produkt sind. Macht das Sinn? Irgendwie. Es ist dieser hier. Ed Name. Es gibt ein paar Dinge zu erledigen, aber ich habe dieses Produkt hier verwendet, okay, und gesagt Nicht dieses Produkt. Super cool, super mächtig. Zurück zu meiner Liste. Drei, bitte. Liebevoll. Ordnung, das ist es für Kategorien in Webflow. 110. Importieren eines CSV in den E-Commerce von Webflow: Hallo zusammen. Sprechen wir über CSVs, Tabellenkalkulationen, Excel-Dokumente. Oh, welchen Spaß habe ich in der Ladenansicht in diesem Video beim Umgang mit Produkten. Daher ist es für einige Jobs und andere Jobs in Ordnung, E-Commerce-Produkte einzeln einzubauen . Offensichtlich ist es nicht praktikabel, besonders wenn Sie viele Sachen verkaufen. Sie haben wahrscheinlich schon eine Art Software, die Ihr Inventar verwaltet, okay, und was Sie tun müssen, ist eine CSV zu exportieren. Es war nicht einfach, es zu importieren. Denken Sie daran, als wir unsere Sammlungen erstellt haben, könnten wir uns einfach die alte CSV schnappen und sie würde einfach portiert und sagen, dass diese dorthin gehört, diese gehört hierher. Es ist ein bisschen kniffliger. Jetzt nicht der Experte in diesem Bereich, also finden Sie vielleicht bessere Möglichkeiten, dies zu tun. Ich weiß nur, dass ich Probleme hatte, als ich dachte, wissen Sie was, sie sollten sich wahrscheinlich mit diesen Problemen und meinen Lösungen befassen. Der beste Weg, dies zu tun, ist, wenn Sie dies tun, werde ich eine CSV importieren. Das Produkt, das Sie sehen, besagt , dass Ihre Produkte mithilfe unserer Online-CSV-Vorlage korrekt importiert werden . Also lade das einfach herunter. Das ist der beste Weg, weil Sie sehen werden alle Titel Ihnen eine Art Vorlage bieten. Möglicherweise müssen Sie Ihre Informationen neu organisieren. Möglicherweise benötigen Sie Hilfe von einer Pivot Table-Person für Master-Tabellen. Ich habe einen Kurs über Excel, der vielleicht nicht der richtige für Sie ist, aber trotzdem, also die CSV-Vorlage herunter und genau das habe ich gemacht. Ich zeige dir die Vorlage , die ich habe. Ich habe meine in Zahlen geöffnet, was die Mac-Version von Adobe Excel ist. Grundsätzlich müssen Sie diesen Titeln zusammen mit oben hier folgen . Okay, also stellen Sie einfach sicher, dass diese übereinstimmen und es wird gut importiert, auch wenn Sie sie leer lassen. Jetzt, da dieser hier ist, zeige ich Ihnen etwas Wichtiges. Diese beiden Namen müssen also so sein. Oh, lassen Sie uns das eigentlich beschreiben, damit Sie sehen können, dass ich zwei gleiche Dinge habe. Warum sind es zwei von derselben Sache? Weil eigentlich Varianten oft in Bestandskontrolle sind, also das ist mein wo ist es? Ich habe meine 100 g und meine 200 g. Welches machen wir? Wir machen Kamille. Okay, es gibt also tatsächlich zwei verschiedene Produkte, obwohl sie den gleichen Namen haben. Die unterschiedlichen Größen bedeuten, dass sie unterschiedliche, sagen wir schiefe Zahlen, ähnlich, aber unterschiedlich haben . Am Ende hast du hier also zwei Teile. Ich habe ewig damit verbracht herauszufinden , wie man beide auf die gleiche Linie bringt. Es sind eigentlich nur zwei separate Zeilen. Okay, die andere interessante Sache war, dass Sie natürlich entscheiden können, ob wir uns den digitalen Download im Vergleich zum Produkt angesehen haben. Sie können entscheiden, wohin es geht und wo es als Produkt platziert wird. Dies ist gerade meine Produktbeschreibung Loren Ipsum, ich hatte keine Kategorien für diese Phase. Du kannst sie hier reinlegen. Wir haben einfach manuell und Bilder eingegeben. Bilder können lustig sein, wie zu Beginn des Kurses, wir haben sie gerade importiert und Sie werden feststellen , dass sie in diesem automatisch durchkamen. Wie ist das passiert? Sie benötigen den Root-Pfad oder die vollständige URL des Bildes. Jetzt sind die Seiten weiter aber das eigentliche Bild selbst. Ich zeige dir, wie ich es gemacht habe. Ich habe meins von Unsplash und ich zeige dir, okay, nehmen wir an, du willst, dass dieses Bild Teil davon ist, okay? Ordnung, ich mag diesen. Also klickst du darauf. Okay? Du, was ich gerne mache, ist mit der rechten Maustaste darauf zu klicken und es gibt eine Option, die besagt, Bildadresse kopieren. Jetzt auf dem PC wird es etwas Ähnliches sein. Grundsätzlich möchten Sie die Seite nicht kopieren, aber Sie möchten die URL dafür kopieren. Möglicherweise müssen Sie je nach Browser googeln, wie es geht , und ich habe es kopiert. Und im Grunde ist alles, was es ist, dir das anzusehen, wenn ich es einfüge, es ist die vollständige URL. Es ist ein bisschen chaotisch, okay, für dieses Bild, und es sollte von selbst geladen werden ohne all das Zeug darin. Wenn Sie mit einem Produkt in Ihrer vielleicht eigenen Datenbank zu tun haben, gibt es möglicherweise eine Möglichkeit , darauf zuzugreifen. Sie müssen sich bei jedem, der die Datenbank betreibt, erkundigen, ob es einen Link gibt, zu dem Flow gelangen kann Wenn Sie sich im selben Netzwerk befinden, könnte es funktionieren. Jedenfalls. So funktioniert das auf diese Weise. Möglicherweise müssen Sie Ihre Produkte einfach auf eine öffentliche Festplatte stellen , damit Sie sie abrufen können. Und hier drin, wo ist es? Ja, ich habe sie gerade eingeklebt. Alles andere, um unterschiedliche Preise, unterschiedliche Schiefzahlen durchzugehen . Ist Versand erforderlich? Stimmt? Möglicherweise ist Ihr Virion weiß getönt. Es gibt die Größenoptionen für digitale Downloads und das war's. Du kannst mehr als einen haben. Ich habe nur Größenoptionen. Das große Ding, es anzusehen, da sie alle gleich aussehen. Vielleicht bin es nur ich, aber Option eins, Option zwei, Option eins, Option zwei Werte oder diese zusammen. Die sind zusammen. Es kann also sein , dass dies die Größen sind und dann gibt es die entsprechenden Farben Sie am Ende ziemlich oft haben werden. Aber wenn Sie sich schon einmal mit SKU-Nummern und Produkten befasst haben , wissen Sie, dass tatsächlich jede einzelne Einheit ihre eigene Schiefnummer hat und es viele davon gibt. Hoffentlich können Sie Ihre Inventarsoftware dazu bringen , mit Webflow zu sprechen, zu überprüfen, wie sie heißt und zu sehen, ob jemand anderes etwas getan hat. Vielleicht gibt es eine Integration, vielleicht gibt es ein Plug-In dafür. Und wenn es sich um einen Deal Breaker handelt, wenden Sie sich an Webflow und prüfen Sie, ob sie eine Lösung haben, die andere Leute möglicherweise hatten. Sie möchten E-Commerce auf dieser Website wirklich begrüßen. Gute Geschäfte für sie. Und die Designer-Slash-CMS-Slash-E-Commerce-Seite ist wirklich gut für uns. Hoffentlich können Sie es schaffen. Aber wie auch immer, ich wollte Ihnen nur einen kleinen Überblick darüber geben , was ich mit diesen CMS gemacht habe und warum er gearbeitet hat und warum das in der Vorlage funktioniert und warum das CSV in Die Übungsdateien funktionieren. Aber vielleicht möchten Sie nicht das bereits vorhandene herunterladen und es als Leitfaden verwenden. Ordnung, das war's. Csv, Güte über weniger Tabellenkalkulationen, bitte. 111. Schwimmen und warum der Warenkorb-Button in Webflow nicht in der Nav geht: Hallo zusammen. In diesem Video setzen wir den Warenkorb-Button in die Navigation und du sagst Das scheint nicht so schwer zu sein. Das ist es nicht, aber es ist so, es gibt einige geheime Zutaten in einer Baumwolle geheime Zutat in einem Navi, die beide dazu bringt, nicht zusammen zu spielen. Außerdem möchte ich Ihnen etwas vorstellen , das sich Float nennt. Und im Allgemeinen eher, um einige dieser Dinge als zu findende Fondslösungen zu betrachten , nicht Dinge, die kaputt sind, sie können niemals repariert werden. Mein Webdesign-Psychologie-Video ist eins mit den Problemen. Ordnung, also haben wir uns vorhin mit der Bearbeitung des Warenkorbs befasst. Können wir es einfach in unsere wirklich einfache Version werfen , jetzt wo wir es gemacht haben und ich sagte Steck es nicht ins Navi, das ist von den Komponenten. Lassen Sie uns jetzt herausfinden, warum, ich möchte Ihnen ein paar Dinge über einige der vorgefertigten Komponenten zeigen , einige Einblicke in diese und Ihnen zeigen, dass viele Dinge hier und Webflow wirklich ist einfach. Bring es einfach los. Und dann gibt es ein paar Dinge, die ein bisschen Problemlösung erfordern , und es ist nicht so, dass Sie schlecht darin sind, es ist nur ein Teil des Prozesses. Ich finde dich nicht die ganze Zeit bei der Problemlösung. Ordnung, also werden wir diese Komponente hinzufügen. Also gehen wir und Elemente oder Komponenten sind vorgefertigte Sachen ist die Navigationsleiste, wir mögen das. Weißt du noch warum es uns gefallen hat Weil es das getan hat, liegt daran, dass , wenn ich zum Handy komme, es auch diese ändert, dass es einige geheime Kräfte hat. Diese geheimen Kräfte hier drüben, weil es unten ist. Die Navigationsleiste hat also ein spezielles Symbol. Es hat einen Behälter drin, es hat eine Marke. Es hat etwas namens Nav-Menü, das ist dieses Ding hier. Und dann hat es diese Menüschaltfläche, die wir nicht sehen können. Das ist der geheime Teil. Es ist etwas, das angezeigt werden soll. Keine. Es ist da oder blockiert es da ist es. Okay. Schaltet sich aber nur ein , wenn es auf dem Handy ist. Und das ist ein Teil des Problems, wenn es um China-Brei geht , dass die Katze auch einen geheimen Palast hat und sagte: Schau, wir werden das Auto benutzen, nicht das Hinzufügen in den Warenkorb. Das ist dieser, der die gesamte Menge und Größe des Ausschneidenknopfs hat , so wie Sie es insgesamt könnten. Also werden wir bearbeiten und es wird zuerst gehen : Hey, du bist nicht das Menü. Und ich dachte, was kannst du in der Speisekarte sein? Es scheint ein großartiger Ort für dich zu sein. Was Sie erkennen ist, dass Sie sehen können, wo es geschrieben steht? Es heißt, dass cut es nicht im Nav-Menü platzieren kann. Das ist eigentlich die Klasse. Sie sind vielleicht nicht das gesamte Nav, nur diese bestimmte Klasse. Also kann ich es hier drüben hinstellen. Die geheime Fähigkeit des Wagens ist, dass er all dieses Zeug enthält. Schauen Sie es sich also an. Cat hat also den Kopier-Button, was wir sehen können, aber auch die Katzenhülle, die wir nicht sehen können. Das wird angezeigt, wenn Sie darauf klicken. Das ist das Div , das dort erscheint. Der Versuch, die beiden zusammenzuschlagen würde bedeuten, dass wenn ich den Schnitt hier reinlege, es bedeutet, dass er verschwinden würde. Dieses Menü wird verschwinden , wenn er auf das Handy kommt. Und dein Einkaufswagen und Webflow würden gerne versuchen, dafür zu sorgen , dass einfache Kreaturen wie ich nicht solche dummen Dinge tun . Es würde funktionieren. An Code ist nichts falsch. Da ist ein Wagen drin, aber für ein Handy würde er sich ausschalten. Was sie also getan haben, ist, dass sie Webflow dazu gebracht haben , ein paar Dinge zu tun, unnatürlich Cody, Dinge zu sagen. Du kannst nicht im Nav-Menü sein, weil er nie Ja, lies es, kann total da reingehen, aber sie sagen nur, naja, niemand will das jemals. Wir werden also dafür sorgen, dass es am Arbeitsplatz nicht passiert. Also zu wissen, dass das Unternehmen in der gleichen Position ist, cool. Mach das einfach. Ich kann es einfach rüberschieben. Die andere Sache, auf die wir stoßen werden, ist, dass diese Nav-Bars ein bisschen anders konstruiert als die Best Practices aus dieser Klasse. Wir verwenden Flex wie oft , um Dinge dazu zu bringen, ihre Arbeit zu erledigen. Okay, und das funktioniert völlig, aber wir verwenden die Komponente eines anderen und eine ältere Komponente von Webflow. Es ist nichts falsch daran, wie sie es gebaut haben. Sie haben gerade einen anderen Weg gebaut. So wie sie es in diesem speziellen Fall gemacht haben, ist, dass ich Sie zum Nav-Menü gesagt habe , indem Sie etwas verwenden, das wir getan haben, Position und relativ und absolut. Eine Sache, die wir nicht behandelt haben, okay, wir sind hier einigermaßen weit fortgeschritten , dass sie dieses Ding namens Float gemacht haben. Sie werden auf einige Elemente stoßen, die dies haben. Anstatt Flex zu verwenden, um es irgendwie an die Kanten oder das Gitter zu drücken, haben sie float verwendet und es ist nach links geschwommen und nach rechts geschwommen. Da haben wir's. Also kann ich sagen, ich möchte, dass du nach rechts schwebst und dann möchte ich, dass du dir das ansiehst. dem Cut-Knopf kann ich den Schwimmer nicht einstellen. Nun, es heißt, dass der Float nicht eingestellt werden kann. Es hat es für dieses spezielle Ding blockiert , damit es funktioniert. Also los geht's. Es sind viele, also gehst du nicht. Und Rick, dieser Teil davon wird am Ende zur Seite schweben. Sie können es mit dem gesamten Warenkorb tun, aber nicht mit der Schaltfläche. Seltsamerweise sind nur Dinge, die wir entschieden haben , in unserem besten Interesse. Und hier drüben kann ich das schweben lassen. Los geht's. Ich schätze, ich würde diese Videos gerne machen weil ich manchmal Kurse machen kann , die alle sehr logisch erscheinen. Mach das einfach. Und dann gehst du in die reale Welt und sagst, ich schätze, ich möchte, dass du diese Webdesigner umarmst. Tricky Webflow macht es einfacher, aber es werden Herausforderungen sein und alles gehört dazu. Und obwohl es super frustrierend ist, wenn es nicht funktioniert, aber wenn du es verstehst, sagst du : Oh, warte auf ein Genie. Ich schätze, das ist das Essen zum Mitnehmen und Float. Halte Ausschau nach Flut. Die andere seltsame Sache ist , dass ich keine Ahnung habe warum. Lass uns einen kleinen Blick darauf werfen. Ist Marke da ist sie da. Dort drüben befindet sich ein Hinzufügen-Menü, das auf der rechten Navigationsschaltfläche geladen ist. Ich weiß, das ist das versteckte Burgermenü ist die Katze. Warum steht das Auto davor? Ich kriege es nicht heraus. Ich weiß nur, dass wenn ich das mache, es funktioniert. Das ist alles was zählt. Okay, schau mal. Es wird viele Entwickler geben, die sich dieses Video ansehen und viel besser im Code sind als ich. Schauen Sie sich das an. Ich weiß in den Kommentaren, warum ich das weiß. Ich habe es nur auf die Geheimnisse des Autos zurückgeführt. Es gibt Dinge, die unglaublich sind. Sie und vielleicht sind sie mir entkommen. Aber ich meine, du solltest wirklich, sollte umgekehrt sein und die kleine Liste hier. Die andere coole Sache ist , sagen wir, ich möchte auf das Handy gehen und lass uns einen Blick darauf werfen. Es ist wahrscheinlich sinnvoll, dass das Auto in der Speisekarte steht, um dort zu sein. Aber wenn Sie nicht auf dem Handy sind, fühlt es sich komisch an, als sollten sie abgewechselt werden und wir können das schaffen. Zum Glück hat Webflow das Menü getrennt. Die Speisekarte ist die, die ich auf dieser Seite hier sehen kann. Das ist dieser. Auf der mobilen Version. Da ist der Knopf, aber sieh mal, was ich dazwischen stecken kann. Wir da haben wir's. Cool. Also habe ich das anders gemacht. Ich möchte, dass die Karte auf dem Knopf über allen steht. Los geht's. macht nicht viel Sinn, aber ich kann den Wagen auf dieser Seite haben, weil die Menüs dort getrennt sind und eine Katze dort. Wir können uns dort das Menü aussuchen, das Nav-Burger-Menü dort. Wir können die Baumwolle in die Mitte kleben, damit wir paar coole Sachen machen können, und sie umschalten um das, was auf dem Handy gefangen wurde , im Moment ein bisschen weiter zu bringen, Desktop findet groß, kann alles fertig sehen auf dem Handy. Sie wird eng. Okay, was wir also tun können, ist die Warenkorbtaste abhängig vom Anzeigebruchpunkt angepasst werden kann . Was wir also sagen können, ist, dass es hier den gesamten Warenkorb den Warenkorb-Button gibt und tatsächlich unterschiedliche Einstellungen haben und den Warenkorb-Button gibt und tatsächlich unterschiedliche Einstellungen haben. Also lass uns einfach schneiden. Wir können Dinge wie die Art machen, wie es herauskommt. Wir können den Warenkorb öffnen, aber der Warenkorb-Button, den Sie sehen können, hat seine eigenen Einstellungen. Und wir können immer noch in den Einkaufswagen steigen. Aber hier hat es die Möglichkeit, die Menge anzugeben. Ich kann es ausschalten. Renne ich, um das Wort Katze loszuwerden? tue ich. Es wird hier klicken. Und ich werde sagen, dass Sie noch keine Anzeige auf dem Desktop haben , nicht auf dem Handy. Wir können es zu einer schönen Runde machen, ihr den Hintergrund geben. Du könntest auch einen Blick darauf werfen wie andere Leute mit diesen Problemen umgegangen sind K, weil du nicht der Erste sein wirst. Gehen wir. Und ich bin im Dribble, ich finde das gut für Web- und UI-Oberflächen, die besonders getribbelt wurden, ich habe gerade in den Warenkorb getippt und ich war wie Scrollen, Scrollen , Scrollen und sieh dir das an. Diese Website hier befasst sich damit, indem sie den Schnitt auf einer eigenen Linie hat. Weil es viele Informationen hat. Sie haben eine große Suchleiste. Sie haben beschlossen, diese Art Doppeldecker-Nav-Header-Datei zu verwenden. Da ist noch einer. Das war es und war es nicht. Dieser hat keinen Einkaufswagen. Seien Sie interessant zu sehen, wie das funktioniert. Es ist nur ein visuelles Bild, also wäre es schön, tatsächlich nach einer echten App zu schauen. Es gab noch einen. Dieser hier. Sie können sehen, was sie getan haben, ist, dass sie oben rechts besetzt und das Menü hierher verschoben wird. Die Marke hat herausgefunden , dass sie dieser Version hier in der Mitte stecken bleiben kann. Sie könnten also etwas tauschen. Mein Rat jedoch, machen Sie es einfach und haben Sie es einfach auf einer eigenen Linie, dann müssten Sie sich jetzt darüber Gedanken machen. Ordnung, das war's. Ich habe versprochen, das Top Nav zu reparieren, und wir haben etwas über Float gelernt und wir haben uns angesehen Webdesign ein unterhaltsam lösbares Problem ist, gleich nachdem es ein frustrierendes lösbares Problem Ordnung, nächstes Video. 112. Zusammen mit Dan den Aufbau des full in Webflow Teil 1: Hallo zusammen. Wir werden zusammen mit mir eine Fahrt machen , zusammen mit Dan. Wir haben uns viele dieser Themen hier isoliert angesehen , wie diese Videos zu machen, uns eine bestimmte Sache anzusehen, okay, und sie entfernen sich davon. Was wir jetzt in diesem Video machen werden , ist, dass ich das tatsächlich bauen werde, lass es uns auf dem Bildschirm anzeigen. Ordnung, das ist es also. Dies ist das Modell in Adobe XD. Ich habe XD benutzt, weil wir Figma benutzen. Und ich schätze, ich werde oft gefragt, wie zum Beispiel welches sollte ich benutzen? Und ich benutze einfach gerne beides. Also werden wir eine Desktop-Version erstellen, aber auch eine mobile Version weil wir in diesem Kurs nicht so viel Mobile gemacht haben. Und für diesen speziellen Kunden Fake Blind. Und das, es wird hauptsächlich auf Mobilgeräten verwendet, muss Ihnen aber nur die Schritte zeigen , wie wir zuerst auf den Desktop gehen, den Workflow durchführen und dann mobil erstellen müssen . Ja, und ich führe Sie einfach durch meinen Prozess. Da das also weniger ein Tutorial oder eher eine Mitfahrgelegenheit ist, werde ich ein bisschen Miete schimpfen. Ich werde versuchen, mein eigenes Leben zu erzählen , was schwierig ist. Und es wird lang werden. Also wie lang? Ich habe keine Ahnung. Ich schätze mal eine Stunde und 32 Minuten. Kannst du dir trotzdem die Zeit für CFOs nehmen, Nicholas? 45 min, 2 h, 3 h. Und es wird so sein, wie es sein wird. Und ja, es wird dir zeigen , wo ich feststecke und wie ich es repariere. Ich denke, es ist nützlich zu sehen, aber Sie müssen sich das nicht ansehen. Ich gebe dir die Erlaubnis , mitzumachen. Ich werde über nichts Neues berichten. Verwenden Sie einfach die Dinge, die wir im Kurs gelernt haben , und den Titel zusammen. Es könnte nützlich sein, denken Sie auch daran , dass dies der beste Weg ist. Der beste Weg angesichts der Fähigkeiten, die wir im Kurs gelernt haben. Meiner Meinung nach könnten sie eine bessere Art sein, etwas zu tun, das völlig in Ordnung ist. Hinterlassen Sie es in den Kommentaren, wenn Sie wissen, Oh , warum hat er es nicht so gemacht? Und wenn Sie sich das ansehen haben Sie auch die Kommentare gelesen. Es könnte so sein, oh, so haben wir es gemacht, weil ich bestimmt irgendwo auf dem Weg stecken bleibe. Ja. Ordnung, lass uns darauf eingehen. Wir sehen uns da drin. Okay, fangen wir an dem Morgen an, an dem ich meinen Kaffee trinke. Sag es uns am Morgen. Ich musste mir das Video ansehen, das ich gerade aufgenommen habe, und das ist ein bisschen mein Morgengesicht. bin noch nicht aufgewacht. Ordnung, also fangen wir mit dem XD-Modell an. Wie ich im Intro sagte, muss ich zuerst den Desktop machen und dann über das Handy arbeiten. Und ich zeige Ihnen meinen Prozess dafür. Und in dem Moment, in dem ich weiß, dass Sie in Webflow zuerst auf Mobile umsteigen können , ohne ein paar Super-Hacks zu machen, oder? Navigation, ich beginne mit der normalen Navigation wie in der Komponente. Ich werde dafür sorgen, dass dies meine Gebote erfüllt, weil ich den einfachsten Wechsel zum mobilen Navi liebe . Okay, fangen wir an, fangen wir an, indem wir es ausmalen. Und ich werde es oft tun, wenn der Tag gut aussieht, okay, Navbar ist eine großartige Klasse. Ich lasse es einfach und lasse es schweben, generiere den Klassennamen. Habe meine Farben von XD geholt. Ich hinterlasse eine Kopie der XD-Datei wenn du sie dir ansehen willst , wenn du XD kennst, aber mach dir keine Sorgen, wenn du keine XD - oder Figma-Fähigkeiten hast, du kannst einfach in Webflow bauen. Ordnung, also die Klasse, ich werde das runterdrehen. Ich werde hier am Anfang noch ein paar andere Abkürzungen sagen , nur als letzte Erinnerung. Und dann werde ich es nicht während des gesamten Kurses machen , weil eine Stunde oder was auch immer es sich um Abkürzungen handelt , beide verrückt werden. Okay, also Option Alt, klicke, wenn er zu 12 geht und runter, lösche dich. Das wird diese Farbe haben. Ich werde es als globale Farbe verwenden. Ich werde das Scott T benutzen und das wird mein primäres sein. Jetzt, je nachdem, ob Sie für einen Designer arbeiten oder ob Sie der Designer sind. Sie werden in diesem sehen, dass ich hier tatsächlich eine grundlegende Sprache habe , also einige Benennungen. Okay, also dieser hier ist Primär Drei. Okay, also werde ich diese Benennung einfach durchgehend beibehalten, okay, und beziehe mich einfach darauf, weil ich sie wiederverwenden kann. In Ordnung, holen wir uns ein Logo. Also hier und lade es hoch. Ich habe einige Dateien, die ich für den gesamten Export von XD habe. Also gehe ich schnell durch und ich gehe und finde ihn. Okay, und ich wähle es aus. Und dann habe ich Command D oder Control E auf einem PC gedrückt. Oder Sie können hier in Ihrem Ebenenbedienfeld mit der rechten Maustaste darauf klicken und Auswahl exportieren sagen. Und ich habe mich gerade für SVG entschieden , weil es skalierbar ist. Okay? Ich habe ein paar JPEGs, die ich benutzen werde. Mein Sohn ist durchgegangen und hat sich diese geschnappt und am Ende zwei Logos erhalten, PNG und SVG. Ich werde das SVG benutzen. Bitte kommen Sie in der richtigen Größe, was gut ist. Jetzt mache ich gerne den Alternativtext, den ich kenne, wenn ich sie einfüge, sonst gehe ich nie zurück und mache es. Also werde ich es nicht mit dem Objekt machen, ich mache es im Assets-Panel. Okay, hier drin werde ich sagen, dass dies das Scott T. Logo von Scott T. Ireland ist. Kann mir drei und Schlüsselwort helfen, und ich bin mir sicher, dass es ein paar Scott T gibt. Ich habe nicht nachgesehen. Ordnung. Das sollte also den Alternativtext bekommen. Alternativtext wird aus dem Asset stammen. Hervorragend. Jetzt wird diese Navigation mit Dingen wie Float und nicht mit Grid oder Flicks erstellt . Es gibt also verschiedene Möglichkeiten, wie anstatt zu versuchen, Gitter zu bekommen, großartig, man kann es im Gebäude der mittleren Balken stecken lassen und ich muss selbst, ich hatte definitiv ein Gitter eingebaut, aber ich habe es nicht getan, also Ich werde einfach billig sein. Benutze die Klasse, die vielleicht von der Marke kommen wird . Okay, und ich werde sagen, ich zeige einfach die Spitze, bitte. Und gut genug. Okay. Eigentlich ist es nicht gut genug. Gehen wir und schnappen es uns. Runter. Da haben wir's. Im Moment denke ich, dass die Knöpfe die Größe haben. Wenn du diese loswirst, kollabiert das Ding. Als wäre es nicht zusammengebrochen. British zeigt die Knöpfe , die die Größe beibehalten. Oder vielleicht das Nav-Menü, das gut für mich ist. Und ich werde einen von ihnen loswerden. Ich werde got browse home umbenennen und t. Ehrlichkeit durchsuchen. Und ich werde diese Buttons tatsächlich stylen, anstatt die Buttons zu verkaufen, werde ich mein Body-Tag einfügen, weil die Buttons diese Schriftart namens Inter verwenden. Okay, und ich verwende hier Enter als meinen Absatztext. Also Enter und ich habe diesen einen Mac-Tick Nomadic genannt. Also gehe ich zum Fall Google Fonts. Ich werde die für den Kurs installieren. Projekt-Einstellungen. Ich gehe zu Schriftarten in IFA, in, und ich werde sie finden. Okay, ich verwende normal und fett in meinem Design. Ich weiß es, weil ich es überprüft habe. Sie können Ihre Designs überprüfen. Okay. Und ich will keinen anderen namens MA. Es gibt nur ein metrisches Ende, es gibt ein fett gedrucktes. Ich glaube, ich will nur die Kühnen. Ordnung, das sind also die m2. Ich gehe zurück zum Designer und richte meine Körpermarke ein. Körper-Etikett. Ich werde alles sagen, alles auf dieser Website wird eine Schriftart dieses Eintrags sein . Okay, und meine Standardschriftgröße ist die Suche nach der allgemeinsten 116. Diese, er ist auch 16. Perfekt für die Linienhöhe. Und eigentlich sollten wir Rems geteilt durch 16 REM-Cope verwenden. Also ein Zimmer. Da hast du es. Okay, und dieser hier, ich werde das verwenden , nichts dergleichen hat nur bedeutet, dass es normalerweise eines von dem sein wird , was auch immer das ist, das sind 20 Pixel. Machen Sie das in diesem Bindestrich, bedeutet nur, dass es einer von dem sein wird, was auch immer das ist. Also wird meine Größe ein Zimmer sein. Manchmal ist es 1.11, 0.20, 0.9. Es ist wie ein Prozentsatz dessen, was auch immer das ist. Also fange ich mit einem an und sehe einfach, wie es uns geht. Sie können sehen, dass es hier oben irgendwie funktioniert. Und ich werde die Standardfarbe so belassen, wie ich denke, die Standardfarbe. Lass uns einen Blick darauf werfen. In Webflow ist es wie ein Off-Grau, Off-Grau, nur ein helleres Grau, Schiefergrau. Ich werde es einfarbig schwarz machen, weil das Design sagt und ich tue, was der Designer sagt. Ordnung, und das ist vorerst gut genug. Und schauen wir uns diese Knöpfe an. Das sind also Nav-Links im Nav-Menü. Was ich tun werde, ist, dass ich erstellen werde, ich werde keine Button-Klasse erstellen , weil der Button, der generische Button dieses Ding hier ist, diese hier drin, so einzigartig wie am Morgen, den du einfach benutzt dort. Ich verwende sie nirgendwo anders auf dem Design, das ich sehen kann. Also werde ich den Knopf verlassen, weil es ein wirklich guter Name für eine Klasse ist. Und ich nenne das etwas genauer. Und diese Typen teilen im Grunde nichts, was beide in Großbuchstaben geschrieben ist, schätze ich. Und ich werde zwei Klassen haben, habe ich entschieden. Okay, also dieser wird getrennt von dem sein , was ich später erstellen werde, Button genannt. Ordnung, also wird es Navi, Button, Navi, das Ding, das Ding und die Sache geben, die etwas spezifischer ist. Ordnung, und ich sage , du bist weiß. Hervorragend. Jetzt sage ich: Sie sind alle Hauptstädte. Weil die Hälfte der Männerhauptstädte und irgendwie, es ist gut, weil gesagt wird, dass der Kunde auf der Website arbeiten wird. Das bedeutet, dass sie nicht in Kleinbuchstaben geschrieben werden können und bei meinem Design fehlen. Wenn ich es hier hinzufüge, verwenden wir die Command Enter oder Control Enter. Ich tippe den Button ein. Erstens bedeutet es, dass es in Großbuchstaben geschrieben werden muss. Ordnung, andere Dinge, es ist klar, was gut ist. Hier ist viel mehr Platz. Was ich also gerne mache, ist , diese wie M zu platzieren. Wenn du auf etwas klickst und die Wahltaste auf einem Mac gedrückt hältst , auf einem PC die Alt-Taste gedrückt hältst und den Mauszeiger über etwas bewegst, siehst du, dass es eine 67. Hälfte davon sind also 30 oder 33, 33. Also werde ich sicherstellen, dass diese Füllung von 33 Tasten Nav einen Abstand von 20 hat. Ich schaffe es auf beiden Seiten 33. Und ich behalte es nur im Auge, wie hier in XD oder irgendwie wie der Befehl kommt man auf 100% und ich richte sie irgendwie halb auf. Nicht perfekt, aber du kannst sehen, wenn ich zwischen den beiden wechsle, kann ich irgendwie nah dran sein. Und wenn du darüber nachdenkst, wie hat er mir auf einem Mac gesagt, du die Befehlstaste gedrückt hältst und auf einen PC tippst, das ist anders. Ich glaube, es ist Control Tab oder Control Shift. Probiere ein paar davon aus. Möglicherweise müssen Sie Google mögen, wie Sie auf einem PC oder Mac zwischen offenen Anwendungen umschalten können, es ist die Befehlsregisterkarte. Ich mache das oft zwischen XD und wir sind manchmal verwirrt. Welcher dann? Ordnung, also lass uns diesen Einkaufswagen hinzufügen. Jetzt. Wir haben das früher gemacht, wo wir einige Probleme hatten, aber wir wissen , wie wir diese jetzt beheben Das Erste ist, wenn ich hinzufügen gehe. Es ist nicht da. Warum bist du nicht da Ich kann CMS sehen, aber hier ist normalerweise der E-Commerce-Kram. Das stimmt. Wir müssen dies in eine E-Commerce-Website umwandeln. Es wird mir zwei Kollektionen geben. Lass es uns machen. Auch dies ist nur kostenlos. Sie können mit dem E-Commerce ziemlich weit kommen, Sie können mit dem E-Commerce ziemlich weit kommen ohne dafür bezahlen zu müssen, es Bezahlung einrichten zu müssen, aber wir können dies im Voraus für den Kunden vorbereiten. Ich werde die Enttäuschung schließen weil ich wollte, dass es diese Dinge einschaltet. Hallo, und zum Schneiden. Bringen wir dich da rauf. Das Mitglied kann hier reingehen, aber es kann hier rüber gehen. Ich kann da nicht reingehen. Oh, warum wenn du reingehst? Oh, ich verstehe es ständig. Ich denke jedes Mal, wenn ich es mir schnappe. Ich habe die Schaltfläche In den Warenkorb statt in den Warenkorb gegriffen. Auf dem Warenkorb-Button sieht es so ähnlich aus. Ordnung, das komische Layout-Zeug. Lass es uns stylen. Lass es uns zuerst runterbringen. Also haben wir vorher irgendwie trainiert. Wenn ich diesen Warenkorbknopf gepackt habe oder kann ich mich erinnern, gehen wir zur Position. Wir können ihn schweben lassen. Du kannst es also nicht mit dem Knopf machen, aber ich denke, du kannst es mit dem Einkaufswagen machen. Du kannst, wir können ihn schweben lassen. Wir haben in diesem Kurs also nicht viel Flüssigkeit gemacht, aber diese Navigation wurde mit Schwimmern gebaut. Also müssen wir das nutzen, was sie getan haben. Also werde ich nach rechts schweben. Ich werde es auf die andere Seite kriegen, die ich tue. Was in diesem Fall vor dem Menü bedeutet . Unkraut. Hallo **. Also lass es uns jetzt stylen und lass es uns jetzt ein paar Dinge besorgen, in meinem Ding hier, Es gibt keine Nummer. Ich gehe vielleicht zurück. Kunden sagen, möchten Sie die Warenkorbnummer? Sie haben vielleicht nicht darüber nachgedacht. Aber sagen wir einfach, die Schnittmenge muss ausgeschaltet werden. Du kannst es verstecken, weil es eine Option ist. Aber ich denke, mit dem Warenkorb kann man eigentlich einfach, es ist eine der Optionen unter Einstellungen. Also habe ich die Katze ausgewählt und verstecke sie, wenn der Warenkorb leer ist und nur erscheint, wenn sie benutzt wird oder Rechte hat. Und schauen wir uns an, wie wir den Wagen holen. Nun, ich könnte es so gestalten, dass es in Großbuchstaben K wird Das ist also Großbuchstaben hier und es ist nicht hier. Eigentlich mach es einfach aus. Okay, ich schreibe einfach eine Karte , weil das niemand ändern wird. Ich werde es nicht für den Kunden editierbar machen. Kann es in Großbuchstaben eingeben. Sonst noch was? Ich muss mit dieser Größe und der Farbe herumspielen. Also müssen wir eine weitere Farbe hinzufügen. Also lass uns das zuerst machen. Also benutze ich mein iPhone auf der Tastatur, benutze meine Pipette. Okay, Rick, mein Entwurf. Aber das ist der Code. Sind nicht da. Okay. Also möchte ich sagen, du Knopf für Karte. Okay. Ich werde den Stilnamen nicht hinzufügen da hier ein Goodstein-Name namens Cut Button steht . Und wenn ich es erstelle, sage ich Hintergrund. Tippe es hier ein. Ich kann sehen, dass es die Klasse basierend darauf erstellt hat , welche Fußbreite Float dachte, dass sie sein würde. Was hier eigentlich ziemlich praktisch ist. Und ich werde bearbeiten, um eine globale Klasse zu werden. Und das wird meine S-T-Sekundarstufe sein. Und das war auch der dritte. Klicken Sie auf Erstellen. Jetzt muss ich mit der Polsterung herumspielen. Ich mache das gleiche wie zuvor. Lass uns den Abstand machen. Und es waren 33. Halten Sie die Optionstaste Alt-Taste auf einem Mac gedrückt, um beide Seiten 33 zu erhalten, oben und unten. Ich werde nur mit dem übereinstimmen, was in ihrer Zeile steht. Nett. Ordnung, alles ist irgendwie aufgereiht und dann musst du dir nur ein kleines bisschen einfallen lassen. Ordnung, ich schaue. Okay, lass uns jetzt sehen, wie schlecht es über das Handy geht. Aber ich neige dazu , einfach einen Brocken wie einen Abschnitt zu machen und dann zu überprüfen, ob ein Mondball ist, anstatt das Ganze zu tun und dann zurückgehen und es tun zu müssen. Okay. Also drücken Sie allen die Daumen beim Tablet? Ja. Ich glaube nicht, dass ich denke, dass es genug Platz gibt , um nicht auf das Handy auf dem Tablet umzusteigen. Okay, also lasse ich die Knöpfe offen. Was Sie also tun, ist in E und F zu klicken, und es gibt einige Optionen unter Einstellungen, um diese hier zu sagen. Behalte das Menüsymbol bei, wie aktiviere es für mich in der Telefonlandschaft. Es sollte per Tablet da sein und nichts hier drauf, sollte hier so sein. Perfekt. Die eine Sache ist, wenn ich hier bin, überprüfe ich, ob sie bei diesen nicht kaputt sind. Ich weiß für diesen speziellen Kunden , dass es einen fiktiven Kunden gibt, aber Mobile-First ist das Wichtigste für diesen, dass ein paar Dinge hier unten sind. Es sieht gut aus, sieht gut aus, aber das sollte weiß sein und das muss kleiner werden. Okay, um es hier unten zu machen, muss ich es überall machen, wo ich das Burgermenü machen will. Ich muss es zuerst machen. Wann immer es auftaucht, kann ich es nicht im Hoch- und Querformat machen , weil es herunterschwebt. Denken Sie daran, wenn dieses Ding hier ist, sind Symbole lustig und einige Symbole sind Listen wie Bilder, und Sie stylen sie, bevor sie reinkommen. Aber mit diesem speziellen Symbol können Sie mit der Schriftfarbe beginnen, was fantastisch ist. Okay, Icons sind also kein Hund, ich nenne es Icon-Burger-Menü. Weil ich am Ende mehr als ein Icon habe. Und du kannst es mit der Schrift beginnen. Also Topographie und wähle Weiß. Was ich auch tun werde, ist das Wort Wagen auf dieser Ebene loszuwerden . Okay, also ich sage nur Cart Add es ist endlich. Tablet heiß allerdings, ich werde sagen, dass Sie ein Layout von Display keine sind. Und hoffentlich gibt es jetzt auf dem Handy einen. Ich verwende die Eins-Zwei-Drei oben auf meiner Tastatur, 121234. Ordnung, es ist, als würde ich mit dem Abstand spielen. Auch hier muss ich um drei Uhr damit spielen, was meine mobile Landschaft ist und nur ein bisschen kleiner sein muss. Also dieser hier ist ein Overall. Es ist so, dass es mir nicht sagt, dass es die tatsächliche Größe 0, 18 auf beiden Seiten ist. Okay. Also werde ich sehen, ob ich dem Moment , in dem es 2032 ist, schaffe. Also in diesem Fall, also mache ich einfach 18 auf beiden Seiten. Jep. Aber dieses Ding, das er irgendwie an den Rand ist, ist ein bisschen Polsterung auf dieser Seite. Also werde ich es einfach irgendwie los. Und es ist nicht dasselbe. Dieser hier sieht gut aus. Sie sind einfach alles ist ein bisschen anders, als ob die Symbole unterschiedliche Höhen haben. Und so muss manchmal nur ein bisschen ins Auge gefasst werden. Lassen Sie uns das einfach erhöhen , damit es quadratisch aussieht. Und es muss ein bisschen größer sein. 123.4 für den, um den ich mir wirklich am meisten Sorgen mache. Ordnung, also die Navigation ist fast fertig. Wir klicken hier rein und gehen, du öffnest dich, zeige es bitte. Und Höhe. Ja, lass uns gehen und das machen. Also was ich tun werde, ist zu sagen, dass du ein Design sein wirst , das nicht drin ist. Sie müssen also einige Exekutiventscheidungen treffen. Wird es grün, würde braun werden. Eine andere Farbe, Knopfnav. Es ist immer noch das gleiche Navi, was interessant ist, wie der Knopfnerv hier ist. Aber wenn es um diese Option geht , wird sie irgendwie neu gestaltet und ein anderer Stil darauf angewendet. Und ich muss es mit der Landscape-Version machen , weil es dann zum ersten Mal erscheint. Okay, also du zeigst und du wirst auf dieser Version sein, Hintergrundfarbe davon. Okay, was machen wir vielleicht? Wir machen dir die gleiche Farbe. Farbe. Farbe. Hervorragend. Vielleicht bleibt es einfach so. Wenn es herunterfällt. Ordnung, befehlen Sie Shift P, Control Shift P und klicken Sie darauf. Jetzt zögere ich jetzt zwei und lasse es dort, weil ich es auf meinem Handy überprüfen möchte. Weil ich es auf dem Bildschirm überprüfe. Ja. Es ist direkt auf Ihrem Desktop hier so, aber es ist besser, es auf Ihrem Handy zu überprüfen. Also werde ich es veröffentlichen. Öffne es in einem Browser. Denken Sie daran, dass dies möglicherweise nicht für alle zutrifft. Sie können dies einfach auf Ihrem Telefon eingeben. Ich verwende diese Option gerne und sende sie an meine Geräte. Und ich kann mich mit meinem Google-Handy verbinden . Und es erscheint einfach hier. Es ist ziemlich süß. Es sieht gut aus. Die Knöpfe sehen groß genug aus. Wir müssen es bei Google überprüfen, um zu sehen, ob Google mit der Größe der Schaltflächen einverstanden ist, okay? Okay, Zugänglichkeit für Hühner Aber es sieht gut aus. Eine Sache am Telefon ist jedoch , kannst du diese kleine Leitung sehen? Und das war's. Okay, also ich gehe, du machst es nur ein bisschen zu vertuschen. Ordnung, so gut. Auf dem Handy. Gehen wir zum nächsten Teil über. Schauen wir uns an, was es ist? Hier gibt es eine Heldenbox. Ich schaue mir auch die Zeit an. Das wird viel länger dauern als ich dachte, nicht wahr? Du weißt schon, dass du es mir nicht sagst. Okay, lass uns unseren Abschnitt reinbringen und zuerst an diesem Hintergrundbild arbeiten. Okay, also ich gehe zu dir, lass uns unseren Container für alles hinzufügen, im Grunde alle anderen Seiten in einem Container auf all diesen Seiten. Also was macht das? Überprüfe einfach. Gibt es irgendetwas, das aus dem Container ausbricht. Also kann ich das tun, indem ich hier reinklicke, Command oder Control E. Ich gehe Abschnitt, Befehl oder Tune oder Control Return das letzte Mal, wenn ich verspreche, dass Janice hier mein Abschnitt sein wird. Ich wollte es eigentlich eindämmen und ich und u können hineingehen. Ich lege eine Mindesthöhe an nur um sie zu groß zu halten, nur damit ich mir etwas für mein Hintergrundbild ansehen kann. Okay, lass uns einen Blick darauf werfen. Das Hintergrundbild, wenn ich hier reinschaue, ist, dass ich es nur ungern herausziehe, weil es tatsächlich ein größeres Bild ist. Und ich möchte ein bisschen mehr für die verschiedenen Größen, weil Sie wissen, dass wenn wir die Größe ändern, es je nach Browserbreite heiß, größer und kleiner wird . Obwohl es wahrscheinlich so ist, würde ich wahrscheinlich die Ober - und Unterseite ein wenig abschlagen Ober - und Unterseite ein wenig abschlagen weil es einige zusätzliche Pixel gibt , die ich wahrscheinlich nicht brauche. Und das wird eine große Dateigröße haben. Aber im Moment werde ich sehen, nur sehen, wie das läuft. Also das Hintergrundbild ist das, was ich machen möchte. Also Abschnitt hier habe ich das ausgewählt, Hintergrund plus Entschuldigung Bild. Das hier. Ich werde es zur Deckung bringen. Und ich werde wahrscheinlich eher von der Mitte als von oben links gehen . Passt irgendwie zu dem, was ich in ihm gemacht habe. Das nächste ist, das zu übertreiben. Ich kann mich nicht erinnern, dass ich im früheren Teil des Kurses hinzugefügt habe, dass es zwei Möglichkeiten gibt, das zu tun. Sie können sich durch alle Buttons klicken. Sie können einen zweiten Farbblock über der Oberseite hinzufügen oder den Effekt hinzufügen. Es gibt einen Filter namens Schatten, sorry, Helligkeit, und Sie können die Helligkeit verringern. Ich füge einfach zwei Hintergrundbilder hinzu. Aber eigentlich wird das ein Hintergrund-Overlay sein. Und können Sie sehen, dass der Unterschied darin besteht , dass dieser eine Art grünliche Tönung ist. Diese Dinge werden Sie auffallen, wenn Sie nicht der Designer sind. Ich weiß, weil ich es gemacht habe, dass es nicht schwarz ist oder der Top-Business-Farbton. Ich werde dich schnappen und mir die Undurchsichtigkeit ansehen. Sie sehen, es sind 80 Prozent. Das werde ich tun. Ich gehe auf dich los und sage, du hast die Farbe davon. Und du wirst 80 Prozent davon ausmachen und das sollte ziemlich gut passen. Schau, lass uns sehen. Ja, großartig. Okay. Ich muss es ein bisschen von oben nach unten drücken. Also werde ich es tun, um es mir anzusehen. Ich mache es mit der Sektion oder der Container passiert auf dem Container. Sie sind da drin. Und ich bin mobil. Es passiert irgendwie. Ja. Es scheint sich so zu wiederholen, dass ich es auf dem Container mache. Also eigentlich nein, ich werde es mit dem machen Ich bin nicht das, ich werde es mit der Sektion hier machen. Nein, Fenster zum Container. Ein Container wird einen Container haben. Ich werde nicht alle Container machen weil ich trage, dass ich Container ein paar Mal benutzen werde . Auf der Oberseite befindet sich eine Polsterung. Ich weiß tatsächlich, dass wir wollen, ich denke eine bessere Idee, die wir machen werden, ist eine globale Klasse zu schaffen. Okay, also sagen wir, ich werde einfach ein div-Tag einwerfen und eine globale Margin-Klasse erstellen. Es wird eine Marge geben, obendrein, denk daran, dass ich einen Überschuss habe, Sam und Sam. Okay, es gibt mittelgroß, groß, extragroß. Wenn ich jetzt einen Job mache, muss ich sie oft vor mir aufschreiben. Was ich für einen Überschuss entschieden habe, sind acht Pixel, ist m, das kleine ist 16, dann werden es 24, 30 bis 40. Ich kann nicht wissen, warum sie nicht in meinem Kopf bleiben. Also schreibe ich sie auf eine Post-It-Notiz, die direkt vor mir liegt. Okay. Also habe ich das von einem alten Job herumliegen lassen, poste die Notiz und ich schätze, dass ich es brauche. Ich schätze, ich bin in XD. Und wenn du das benutzt, halte ich die Wahltaste gedrückt und es steht 20. Also werde ich versuchen, konsistent zu bleiben, so wie der Designer hört ich mich für Partnerschaften entscheide , weil es gut aussah. Ich wähle 24 aus, damit ich mit meinen Schriftarten und meinem Abstand übereinstimme. Also werde ich 24 verwenden, was mein Medium ist. Also in XD, tut mir leid, in Webflow werde ich sagen, dass Sie eine Marge an der Spitze haben. Du wirst mittelgroß sein. Und der Abstand wird ein Rand oben auf diesen 24 sein. Hoffe der Designer merkt nicht, dass es nicht 2024 ist. Lösche U-Container, es wird eine leere Klasse haben. Okay? Stellen Sie sich also hart vor und das mittlere bedeutet, dass ich dieses mittlere Top wiederverwenden kann , müsste es wahrscheinlich schaffen. Sie könnten an einem bestimmten Punkt sein. Jetzt machen wir weiter, ich mache den Überschuss und klein und mittel, groß. Ich finde, dass ich jedes Mal, wenn ich sie so mache, wie ich es richtig mache, sie alle einsetzen werde. Dann verwende ich nur zwei. Und die Jobs, bei denen ich das brauche, mache ich nicht. Ich benutze jeden einzelnen von ihnen. Mache sie individuell. Es ist wie Murphys Gesetz. Ordnung, also werden wir auf sie tippen. Sie müssen einen Blick darauf werfen. Also muss ich das in zwei Teile zerlegen. Es gibt ein paar Möglichkeiten, wie ich das machen könnte. Kann Säulen verwenden, könnte Flex verwenden. Ich werde Grid benutzen , weil es großartig ist. Ich könnte den Sektionshelden hier drüben in ein Raster oder das Layout-Grid umwandeln . Und das ist total Arbeit. Ich habe es gerne getrennt. Ich für meinen eigenen Verstand. Es macht es einfach, das Raster zu finden und darauf zu klicken, anstatt herauszufinden, welcher Elternteil sich hervorragend darauf angewendet hat. Und da bin nur ich. Okay, also ich brauche zwei Spalten, eine Zeile, zwei Spalten, eine Zeile. Und der Abstand, mit dem ich herumspielen werde, aber wenn ich versuche, etwas herauszufinden, wird es wahrscheinlich irgendwo dazwischen sein, es springt, aber du kannst es tatsächlich eingeben wie, sagen wir, das ist auch viel und 0,25 sind nicht genug. Du kannst einfach sagen, ich will nicht 0,35 sein. Ich meinte nur, es ist wie, ja, es sind Brüche. Aber sie müssen nicht alle gleich einem sein, es geht einfach alles, was ich füllen werde, um die Lücke zu schließen. Das füllt nur den Rest aus. Okay, also 0,35 sieht ungefähr richtig aus. Lass uns die Bildgebung werfen. Und wieder, mit diesem Bild könnte ich dieses bereits ausgeschnittene XD exportieren , das würde total funktionieren. Ich lege es lieber hinein und schneide es dann, lege einen kreisförmigen Rand darum. Oder wiederverwenden. Dieses Bild bedeutet, dass es nur einmal geladen und die Website nur einmal geladen wird. Es gibt mir auch ein bisschen mehr Flexibilität. Es gibt kein echtes Like, das Sie nicht müssen, Sie können einfach das bereits zugeschnittene Bild einbringen. Okay, also werde ich gehen und das Bild ziehen. Und wenn Sie das Bild hineinziehen, wird davon ausgegangen , dass Sie das Bild-Tag in das Bildelement einfügen. Ich werde meinen Alternativtext hier eintragen. Ich werde sagen, du wirst ein süßer Igel sein, der in eine Schüssel gerollt wird. Wisse, du wirst es sein. Jasmintee braut sich in einer Glasschale. Ich glaube, das gefällt mir, oder? Und ich werde es machen, welche Größe hat es? Es sind 175 mal 175 Bilder. Ich möchte nicht, dass dies reagiert, daher werde ich keine Mindesthöhe verwenden. Es wird nicht größer werden, weil ich nicht mehr Kontinent einrichten werde. Also 12.5175, es ist alles verzerrt, bis ich fit bin. Fügen wir einen Rahmen hinzu. Grenze von Brasilien. Wähle immer eine niedrige Zahl. Ich bin mir nicht sicher, warum ich mit den Pixeln geizig bin. Es kostet dich nicht mehr, 1.000 zu setzen, und ich bin mir nicht sicher warum. Ordnung, das ist es irgendwie. Der Abstand muss aussortiert werden. Aber das Coole am Grid, das leicht anklickbar ist, kann man sagen, ich möchte sie alle in der Mitte haben. In der Mitte, okay. dir aufgefallen, wie Grid ist? Nun, es geht nicht um das Auf und Ab. Weil das Netz dort aufhört. Siehst du die blaue Linie? Das übergeordnete Element ist größer, aber das übergeordnete Element gibt seine Maße nicht an das Gitter weiter , das sich darin befindet. Er macht was er will. Also gehe ich zum Abschnitt Hero, finde die Größe, werde sie los, indem ich die Option oder die Alt-Taste gedrückt halte. Und ich gehe ins Netz. Sie können die Mindesthöhe von 300 erreichen. Dann weiß Grid, wie hoch es ist. Es weiß also, dass es sich in der Mitte ausrichten kann. Es ist nicht mehr weit. Lass uns alles reinbringen und dann verpasse ich den Abstand. Also lasst uns das, dieses und dieses wunderschöne T holen. Es wird mein Schlag sein, es wird mein Schlag sein. Ich sehe mich nur um, das kann einen treffen. Das muss irgendwie einen auf dieser Seite treffen , was ein Problem ist. Und ich stimme nicht mit meiner Aussage überein, dass es wahrscheinlich ein schlechtes Design ist. Okay. Aber ich mag es , das ist cool. Und ich werde diese Art von Information verwenden, um eine zu treffen, wahrscheinlich öfter auf dieser Seite. Jetzt ist meine Seite sehr klein, es sind nur drei Seiten. Ihre Website wird viel größer sein. Und ich weiß, dass dies das besser verwendbare generische sein wird. Was ich also tun werde, ist, dass ich alle H eher so stylen werde , weil ich weiß, dass das Weiß auf dem Schwarzen dies nur einmal auf der Heldenseite verwenden wird. Ich werde das viel mehr benutzen. Was ich am Ende mache, ist einfach nur an ein verstecktes Gehen zu denken. Ich werde es dir zuerst sagen und dann eine spezielle Ausnahme machen , kleine Combo-Klasse, um sie weiß zu machen. Ich lege meinen Schlag auf Skid It. Ich lege es einfach hier runter. Ich treffe okay. Und ich sage, du bist ein H1. Es ist schon die richtige Schrift. Größenmäßig. Lass uns einen Blick darauf werfen. Du wirst 51 Jahre alt. Zufällig. Designer kommt mit den Wünschen des Designers. Okay? Ich werde alle H sagen, bei denen du vergessen wirst, Ladungen zu machen, okay, du musst nicht zurückgehen und sagen, dass ich will, dass es 51 ist, ich will keine Rampen sein, also gehen wir 16/16 RAM. Und wie zuvor ist es einfach, nur einen Bindestrich zu setzen und es wird einer sein. Die Linienhöhe wird 3,187 Marines betragen. Okay, und es wird die Farbe meiner ersten drei sein und irgendetwas anderes, das es hat? Die Zeilenhöhe ist ziemlich nahe. Okay. Wir werden dasselbe verpassen. Und es gibt keine anderen Dinge. Es ist kein Großbuchstaben. Ich denke also, das reicht. Das ist also mein gutes Generikum, wie Stock H1. Okay, also ich werde dich jetzt hier drüben benutzen, aber auf diesen wird eine Klasse namens Ticks White angewendet. Weil ich auch ein paar Mal wiederverwenden kann. Du wirst weiß sein. 113. Zusammen mit Dan den Aufbau des full in Webflow Teil 2: Und das ist alles, was Weiße im Unterricht machen werden. Ordnung, als Nächstes kommt dieser hier. Und wieder schaue ich mich um, um zu sehen, ob es wiederverwendet wird. Es ist irgendwie mein H2. Ich treffe zwei auf vielen Seiten. Also nochmal, das ist das besser verwendbare, als ob ich es benutze, sie sind auf der Checkout-Seite. Das ist also mein Standard, H1, H2. Und dann füge ich die weißen Zecken dafür hier oben weil es hier ein bisschen einzigartiger ist. Das Gleiche. Ich sage, du wirst H2 sein und du wirst diese Schrift sein, ein Sanitäter. Größenmäßig. Schau, du bist 434-34-3403, mutig. Ordnung. Du 43. 43 auch? Guter Designer Dan. Okay. Also werde ich sagen, dass Sie fett sind und 43 Schrägstrich 16 Rand haben, und Sie werden eine Zeilenhöhe von einem Bindestrich haben. Und du bist diese Schrift, okay, diese Farbe hier. Was bedeutet dieser? Was ist es hier in meinen Styles? Oder ist es nicht mal da drin? Das ist eine Frage, die Designer hat, denn die haben wir schon benutzt. Vielleicht sieht dieser nicht richtig aus. Es ist das wärmere Grau. Dieser heißt also St. Gray 700 gy. Es ist schwer, sie 12345 zu nennen. Sie können, oft, Sie können dasselbe Schriftformat verwenden. Denk dran, das war ziemlich gewagt und das ist leicht. Es ist üblich, es auch für Farben zu verwenden. Ordnung, du wirst also die Farbe von Oh, okay, ich muss denken, was habe ich getan? Die andere Sache ist, das noch einmal zu überprüfen , weil mir das aufgefallen ist. Kannst du sehen, der Code ist Hash 575 und dieser hier hat Hash eins a. Du musst mit dem Designer reden wie, hey, nun, welchen willst du? Ich entscheide mich für diesen , weil ich der Designer bin , der das gemacht hat. Ich suche mir das Datum aus. Gehen wir also zurück zu Webflow. Und ich sage, zwei zu treffen oder absichtlich den falschen zu beschädigen , um Ihnen zu zeigen, was Sie nicht tun sollten. Denken Sie also daran, wir brauchten alles H2O. Sie zeigen wahrscheinlich auf ein Gehen da Sie es falsch machen, Sie machen es falsch. Also lass uns schnell eine Farbe hinzufügen , weil ich das in meiner Zwischenablage habe. Okay. Perfekt. Jetzt hole ich mir den Namen. Ich kann mich nicht erinnern, was es war. Zurück zu dir. Und du wirst es sein, wenn du zwischen den beiden umschaltest, es irgendwie verliert. Das ist sowieso meine Entschuldigung. Also werde ich als globale Klasse bearbeiten . Ich gebe ihm einen Namen. Ich werde ganz rechts auf Erstellen klicken, das ist da. Es hat die richtige Farbe. Jetzt. H zwei für alle wird Sanitäter sein und es wird 43/16 Zimmer sein. 16 Zimmer. Und es wird ein Bindestrich sein. Ordnung, also ist es da. Ich werde es zusammenzählen. Es wird ihm das Genick brechen. Wir wissen, wenn ich hier addiere weil es ein Raster ist, in dem das Grid funktionieren , es wird gehen, Hey, ich habe ein neues Ding, es muss in seine neue Box gehen. Also was ich tun werde, ist, dass ich hier reingreife, ich werde additiv werden. Diese Div-Blöcke werden in diesem enthalten sein. Die Heizung wird in dieser sein und zuschlagen. Es ist schwierig, das auf Seite zu tun. Lass es uns hier machen. Also werden die weißen Zecken in ihm sein. Und dann in ihm. Los geht's. Mäntel, sie haben blockiert, ist eine Einheit , damit sie nicht in eine andere Zelle fällt. Und zu dieser Heizung werde ich eine Klasse hinzufügen, die sich Textwiederverwendungsklassen nennt. Nett. Es geht darum, lasst uns sie zunächst nach links ausrichten. Gehen wir also in das, ich möchte mir das Kind des Gitters schnappen, das ist dieses Ding namens Diblock hier. Und ich werde ihn dazu bringen, zu tun, was er will. Auftritt steht im Mittelpunkt. Aber dieser Typ ist linksbündig und es ist irgendwie magisch. Es hat keine Klasse darauf angewendet. Dazu gehen Sie davon aus, dass eine Klasse generiert wird weil dies für viele Dinge der Fall ist. Aber das Beste, etwas anders, okay, es wird nicht wirklich auf das Element selbst angewendet , es ist auf das Raster. Ordnung, fügen wir unseren Button hinzu. Ordnung, du knopfst k, du. Auch hier ist der Button wie hier oben. Dies ist die am meisten wiederverwendbare Taste. Das wird also ein weiterer einzigartiger Button sein und ich mache ihn zu meinem generischen. Das wird also einfach Button Hero heißen , irgendwas. Du, okay, ich werde es im Moment mit nichts verknüpfen. Das erinnert mich daran. Es gibt eine Menge wie, ups, habe ich das getan? Die Marke muss auf verlinken. Und wo sind meine Dropdown-Navigationseinstellungen, Link-Einstellungen, ich werde sagen, geh zu der Seite davon. Bevor ich es vergessen habe. Also dieser Button hier wird einen ClassName haben , alle Buttons hier. Button hier wird ein paar Dinge tun. Es wird keinen Hintergrund haben. Keine. Es wird eine Topographie aller anderen haben. Es wird Browse t heißen. Es wird viel mehr Polsterung haben. Okay, also wie groß ist es? Klicken Sie auf diese Gedrückt-Option. Sie können also sehen, dass es nicht gleich kubisch ist, dann etwa 27 mal 16. Lass uns das machen. Benötigen Sie einen Abstand, um die Alt- oder Wahltaste 27. gedrückt zu halten, beachten Sie die falsche Ebene, die 16 oben. 16,27. In Ordnung? Ordnung, Größe. Lassen Sie uns eine Grenze um die Außengrenze von was hinzufügen? Hier ist ein Zweierschlag. Du brauchst keinen Radius, du brauchst eine Breite von zwei, und du musst weiß sein. Umschalten, stellen Sie sicher, dass 100% umgeschaltet, umgeschaltet, umgeschaltet oder umgeschaltet ist. Das ist mutig. Das ist nicht gewagt. Dieser Button, Held, wird Typografie haben. Du wirst mutig sein. Die Schriftgröße ist 16. Mein Standard ist 16, was einer Felge entspricht. Jetzt kochen wir. Ordnung, also lass uns ein paar Texte hinzufügen und den richtigen Abstand festlegen. So schönes T an deiner Tür. Standardmäßig sind die Abstände komisch, als ob H einen gewissen Abstand haben. Wie das, was den ganzen Raum da drin schafft. Und ich werde die X-Ray-Option verwenden, kann von nun an die Verknüpfung verwenden. Okay, also mein Fall, es ist Command Shift X wird Control Shift X sein. Es ist einfach praktisch, durchzugehen und zu sagen, ich bin, der H1 hat oben einen Brocken und unten einen Rand. Okay. gleiche gilt für den H2. Da ist ein Brocken. Was ich gerne mache, ist es einfach früh in einem Job los zu werden, okay? Und nur um zu sagen, dass Sie alle H Null haben, Sie können es einsetzen, Sie können es nicht zurücksetzen. Du musst es überschreiben, weil es standardmäßig 20 mal zehn ist. Sie müssen also 00 eingeben. Das gleiche gilt für diesen. Du wirst alles sein, h zwei werden Null sein. Nach Euro. Geht. Ich hätte lieber einfach das und habe nichts und bearbeite mich selbst. Wie werden wir das ausräumen? Du kannst entweder am unteren Rand dieses einen Padding hinzufügen oder ich mache das. Und anstatt Kosten speziell für diesen zu erstellen, werde ich ein paar globalere Margin-Klassen erstellen und ich könnte k wiederverwenden. Also unten am Rand. Und wie viel Lücke gibt es nicht? Es ist ein bisschen knifflig mit dieser Schriftart weil Sie sehen können, dass sie wie die Hauptversion davon hat . Kannst du sehen, es ist, als wäre es nicht einmal das Eis in Ähnliches, als ob die Kappe viel hoch drauf ist. Es ist eine seltsame Schrift. Okay, also mein Abstand wird ihn in diesem Fall etwas seltsam bewegen, aber lass uns zum Beispiel einfach das Rechteck gehen. Manchmal ist es so, als würde man ein Rechteck nehmen , um so viel zu tun. Und ich schaue hier drüben nach. Die Höhe ist also 14. Und wenn ich mir meine kleine Liste ansehe, ist 16 wahrscheinlich am nächsten dran. Ich mache beide 8,16 Pixel für den Boden. Und dann kann ich mich entscheiden, denn man sieht dort, obwohl die beiden bei Null sind, die beiden unterschiedliche Größen voneinander haben. Weil dieser etwas Platz für Absteiger lässt. Wenn ich sage, anständig ist wie, kannst du sehen, dass das unten hängt? Es ist also wirklich nah dran, aber die Schrift ist etwas höher. Es ist also so, nur ein Glück, dass dieser hier keine Nachkommen hat. Okay, wir würden darauf hinweisen, dass mein Name Daniel Walter Scott keine Absteiger hat, was es einfach macht, auf einer Linie zu runden. Fakt zur Breite. Also werde ich jetzt eine Div-Klasse hinzufügen und ich sage dir Margin-Bottom und ich mache Exzess, Exzess. Eines meiner großen Probleme ist jetzt, dass ich es mache. Beachten Sie , dass es weg ist. Sie müssen die Eingabetaste drücken, Rand unten x ist vorhanden. Drücken Sie die Eingabetaste, und dieser wird extra klein sein, es wird acht sein. Okay? Jetzt werde ich es entfernen. Es ist immer noch da, aber margin-bottom, klein. Und ich werde etwas tun. Du solltest sie auch durchgehen und den Rest machen. Sie werden also am unteren Rand sein. Wir wollten wahrscheinlich nur klein sein. Und dieser wird wahrscheinlich der größere sein. Rand unten, klein. Ich mache mein kleines, wie habe ich es genannt? Ja. Es ist nah genug. Ich möchte es nicht wirklich ein klitzekleines bisschen anders machen , weil der Kunde vielleicht zurückkommt und sagt, verwenden wir Beautiful oder nicht , wir verwenden Beautiful. Okay, und dann muss ich mich wieder mit dem Abstand herumschlagen. Der Moment. Atme einfach tief durch und lass es einfach so. Lass uns einen Blick darauf werfen. Und wenn du jemals ein Design für mich bekommst, wird es wahrscheinlich überall Rechtecke weil ich vergessen habe, sie zu entfernen. das sonst noch jemand? Verwenden Sie die Rechtecke als Abstandswerkzeug. Ordnung, das ist alles gut. Wie muss das eigentlich sein? Es müssen drei für drei sein, ich habe es nur 300 erraten. Schauen wir uns also die Helden-Sektion an. Eigentlich. Nein, es ist das Gitter, das die Höhe angibt. Du kannst dabei sein. Okay, lass uns das machen, okay? Das, weil das kein seltsamer Ort ist. Wie bringen wir Dinge an seltsame Orte? Erinnerst du dich? Du hast es verstanden. Wir werden einige Positionen platzieren, an die ich mich nicht erinnern kann oder es ist ein Echo meiner Gehirnposition absolut. Das ist gut, äh, wo wird es hingehen? ist nicht wirklich wichtig, aber ich werde vorsichtig sein wo ich es hinstelle, weil ich möchte, dass es referenziert wird. Wenn ich es hier reinlege und es auf dem Handy verschiebe, wenn ich diese Dinge bewege und mische, wird es an der falschen Stelle landen. Also ich möchte irgendwie dass es im Grunde darüber sitzen muss . Das ist sein Ziel stattdessen darüber und um den Ort zu bewegen, werde ich es direkt darüber legen, so dass wir in der Stapelreihenfolge hier knapp darunter sind, damit wo auch immer das ist, wo der Umzug zu diesem Kerl mit ihnen kommen wird . Das ergibt Sinn. Also nochmal, Bild, ich gehe zu meinem Vermögen. Ich werde ihn in zwei Teile unter meinen ziehen, was über den Ketzern liegt. Und ich werde, ist das dekorativ oder ist das etwas Interessantes? Ich denke, es könnte so etwas sein, als wäre es nicht abstrakt, es ist etwas Spezifisches. Also gehen wir Teeblatt. Die Blattgrafik oder Teeblatt-Illustration könnte NF1 sein, als wäre sie irgendwie nur dekorativ, aber sie hat geholfen, die Seite zu beschreiben. Ja, in Ordnung, also du, mein Freund, wirst eine Klasse namens Image, Cold Image haben. Und ich werde sagen, dass die Position absolut ist. Denken Sie daran, wann immer etwas absolut ist, der Fall der Elternmäuse, dass dieses Ding namens Diblock auf relativ eingestellt werden muss , wenn es Probleme damit hat, es wird ihm ein klassischer Diblock gegeben. Ich werde den Block oft benutzen. Also nenne ich das Div, Hero Wrap Up. Okay, und bewerbe dich relativ zu ihnen. Ich lasse sie vielleicht an, wenn ich es benutze, weil Verwandte nicht viel mit einer ganzen Menge Div-Tags machen werden. Ich verwende es einfach wieder und nenne es. Wie hieß es? Diblock. Hey, ich kann es später umbenennen. Du wirst in Beziehung zu deinen Eltern stehen, okay? Ich sage, dass du es bist. Sie können darauf klicken, um zu sehen, was es bewirken wird. Ich bringe dich dahin, wo du sein musst. Kannst du sehen, dass es im Inneren der Eltern hüpft. Okay. Ich spiele sie einfach alle. Okay. Und ich werde eigentlich einfach gehen. Du hast ihnen gesagt, sie sollen mein Gebot erfüllen. Etwas mehr als ein bisschen. In Ordnung, ich mag es. Okay, also als Nächstes werde ich, werde ich, ich gehe zu diesem Abstand dort. Denk dran, wir können zur Startaufstellung gehen. Es ist eigentlich ziemlich gut. Als könnten wir nicht ins Netz gehen und es einfach ein bisschen öffnen. Ich kann es messen denn kannst du das Bild hier sehen? Wenn ich es von hier nach hier messe, kann ich das tatsächlich hier eintippen. Es gibt also ein bisschen bloß einen Blick darauf um es jemandem zu erzählen. Gut genug für mich. Ich weiß , dass es ein bisschen höher sein soll. Wir können das einfach für eine lange Zeit ausführen. Das werde ich wahrscheinlich tun. Okay, mal sehen, wie schlecht es auf dem Handy läuft. Es wird ein bisschen Daumen und Zehen gekreuzt , um zu sehen, ob alles auseinanderfällt. Ordnung, 234. Okay, also was ich tun werde, ich werde das hier einfach überkreuzen. Das ist also einfach zu beheben. Ich kann auf dem Tablet sagen, ich werde nur eine andere Größe haben. Sie sind fertig. Gut genug. Diese hier, mobile Landschaft. Oh mein Fehler. Ich könnte das Bild einfach kleiner machen. Okay, also auf dich, du wirst die Umschalttaste nach unten gedrückt halten 150 scheint gut zu sein. Und wenn Sie diese Größe erreichen, müssen Sie sie so angeben, als ob kein Handy genau die Größe hat. Du musst es ein bisschen geißeln, um zu sehen was passieren wird und es geht kaputt, okay. Und du schlecht. Okay, also ich werde es mir nur ansehen. Mein Design eigentlich, mein Design, es ist ganz anders. Kannst du sehen, dass das Bild verschwindet und es ist irgendwie in voller Höhe. Also werde ich das Bild ausschalten. Okay. Also nennst du es einfach „Bild beschäftigt“. Es ist kein guter Name für ihn, weil ich nicht machen will, wenn alle Bilder, ich will Image Hero. Und du wirst feststellen, wenn du sie hier stylst, wird er der Simon mündlich sein. Er ist bildhafter Held, Image-Held, Image-Held. Okay, wenn ich es als Bild belassen würde, jedes Mal, wenn ich ein anderes Bild bearbeite würdest du jedes Mal, wenn ich ein anderes Bild bearbeite, der Größe und allen möglichen Dingen folgen. Ich werde dir sagen, dass du kein Qu hast, komisch. Okay, du drängst dich also zur Seite, das Netz macht ein paar Dinge. Was macht es? Es hängt irgendwie daran fest, okay. Weil ich es geklärt habe, springe ich zum nächsten, okay, lass diesen Raum hier drüben. Aber eigentlich ist es toll, hier zwei Kolumnen zu haben, aber nicht hier bei Mobile. Also werde ich sagen, dass er eigentlich nur eine Kolumne sein wird. Und ich möchte, dass es die volle Reibung und ich möchte, dass es zentriert ist. Die Sache ist, wenn es so ist, sagt es zentriert, warum ist es dann nicht zentriert? Ich weiß warum. Wissen Sie, warum alles linksbündig ist? Das liegt daran, dass die Zusammenfassung besagt, dass man zentriert sein soll, okay, aber das Zeug in diesem Wrapper macht etwas anderes. Also was ich sagen werde ist DEA div hier ein Rapper, ich werde dich dazu bringen, dich zu biegen, weil Flexoren großartig sind. Und ich gehe vertikal und sage , dass ihr alle in der Mitte seid. Und ich denke, die Lücke ist gut. Nur die Schriftgröße muss kleiner werden. Ende. Woher kommt das? Das Netz? Grid Da sind die Ränder. Während es diesen Kerl hält. Warum bekommt er auf dieser Seite ein bisschen Polsterung? Ich sehe es dort nicht. Wir gehen in den El Super-Röntgenmodus, Super-Röntgenmodus, Röntgenmodus. alle Schlüssel zertrümmert. Was hält ihn da drüben fest? Das ist meine Eröffnung. Okay, warte, sie werden es herausfinden, um es rauszuholen. Beim Klicken war alles nicht sicher , wie das war, was falsch war. Und ich habe mich einfach irgendwie hochgearbeitet. Ich denke, das scheint der größte Schuldige zu sein. Und ich schließe das irgendwie und schaue hier rüber und gehe MBA, blau, blau, blau, blau, und ich überprüfe all diese Dinge und was es da drin macht. Nun, es geht so, als wäre ich hier drin, wie ich, ich schalte es an und das tut es offensichtlich. Ein bisschen davon. Ich fand heraus, dass nichts falsch daran ist der Startaufstellung und schaute es mir an und ging hierher und ich habe mir nur eine Notiz angesehen, dass das Grid-Kind, also dieser Typ hier drin ist es eigentlich will mit ihnen. Kannst du sehen, dass er linksbündig ausgerichtet ist und dass der Raum nur kommt , weil er linksbündig ist. Und wenn das ein kleineres K wäre , wäre das Ganze noch kleiner. Okay. Macht das Sinn? Er hat gerade diesen Kinderfall ausgerichtet. Ich sage du Enkelkind. Ich werde da drin zentriert sein. Wer hat es herausgefunden? Die andere Sache, die ich machen möchte, ist, dass es Vollbild sein muss. Erinnert sich jemand an die Messung , um sie im Vollbildmodus zu machen? Wenn nicht, werde ich das Gitter erstellen, weil in dem Moment, in dem die Gitterhöhe nur eine Mindesthöhe ist . Okay, also wir haben ein Gitter mit einer Mindesthöhe von 343. Was ich sagen werde ist nicht das, ich sage, die Höhe ist die vertikale Höhe. Ich sage also, es 90% der vertikalen Höhe, der Höhe des Ansichtsfensters. Das ist der, den ich will. Und es macht etwas, das wir gerne hätten. Ich habe 90 gemacht, weil ich weiß, dass ich einen Teil des Turms habe, rate nur 90, aber es sieht hier in deinem Browser nicht sehr gut aus. Also geh auf deinem Handy testen. Das ist der perfekte Weg, oder Sie können es vortäuschen, indem Sie es einfach kleiner machen. Okay. Ich kriege es irgendwie in der gleichen Größe. Okay. Ja. Okay. Damit kann ich leben. Sie können also zumindest ein Design hier drin haben, aber stellen Sie auch sicher, dass Sie auf Ihrem Telefon testen, es versenden und einen Blick darauf werfen. Ich werde das für eine Sekunde machen, weil ich ein paar Dinge dafür tun muss. Zunächst möchten Sie, dass es vielleicht nur auf zwei Zeilen aufgeteilt wird, wie ja. Ich möchte die Schrift also nicht verkleinern. Ich will versuchen, es kaputt zu machen. Also weißer Text hier. Ich habe keine Klasse, die ich angreifen kann, was nicht gut ist. Ich muss eine Klasse von wahrscheinlich etwas geben . Also kann ich die ganze Box verkleinern oder kann ich die ganze Schachtel verkleinern? Ich kann dieses Div hier machen, ein Rapper, ich kann es kleiner machen, weil er eine Klasse hat. Ich mag es einfach nicht, Klassen zu allem hinzuzufügen. Ich möchte versuchen, so minimal wie möglich zu sein. Aber dieser hier treibt an, wie ich sagen könnte, Sie haben eine Mindestbreite von etwas, Sie können eine Mindestbreite davon sein. Geben Sie einfach 300 ein und sehen Sie, wie es läuft. Entschuldigung, maximale Breite ist was ich will. Sie können auf diesem Gerät hier maximale Breite von 300 Pixeln haben. Kleiner. Teilt sich jetzt in zwei Zeilen auf. Und jetzt ist es linksbündig ausgerichtet, was irgendwie seltsam ist bevor es automatisch erweitert wurde. Es war also einfach immer in der Mitte, weil ich der Box gesagt habe, dass sie in der Mitte sein sollte. Jetzt, wo wir ihm eine physische Breite geben , bricht es auf diese Linie und wir haben nie gesagt, dass es in der Mitte sein soll. Und es sieht einfach so aus, als wäre es geschickt worden, das macht keinen Sinn, dann schaffe ich eine globale Klasse? Dies ist zentrierter Text oder muss diesen möglicherweise nur in einer Klasse zusammenfassen. Also was ich tun werde ist, dass ich diese maximale Breite hier loswerde . Und ich muss einfach nachgeben und sagen, du hast eine andere Combo-Klasse namens Text Hera. Hera wird schon chaotisch. Also dieser hier wird meine maximale Breite von haben, ich kann mich nicht erinnern, was ich hineingesteckt habe, aber das ist nicht klein genug. Shift gedrückt halten und ablegen. Das ist wieder Min-Breite, Dan, max-width, zu klein. Aber er wird auch die Topographie des Weihnachtsmanns sein. Ordnung, jetzt kann ich mein Auf und Ab benutzen, nur um so etwas zu sehen. Und wieder werde ich nachsehen , ob das funktioniert. Und Adrian Soundeffekte. Auch hier unten muss das ein bisschen durcheinander gebracht werden. Also werde ich sagen, dass du dich auf diesen einlässt. Position ist etwas über 11234 und es funktioniert irgendwie. Ich muss den Abstand oben dort loswerden. was habe ich es hinzugefügt? Ich habe es hinzugefügt, um zu zählen. Denken Sie daran, ich habe es dem Container hinzugefügt, lehne es hier ab. Ich will es ausschalten. Wenn wir hier weitermachen, setze ich es auf Null. Los geht's. 1234. Okay, ich werde noch einmal auf meinem Handy probieren, um sicherzugehen , dass das dort unten funktioniert. Okay, stell sicher, dass es stimmt. Ordnung, das wird drin sein. Das war's für die Heldenbox. Ich glaube, da ist nichts anderes drin. Okay, lasst uns zu diesen Typen übergehen. Das wird viel länger dauern als ich dachte. Okay, also werde ich diesen Brocken unten hier reinlegen. Und was ich tun werde, ist einen Abschnitt dafür zu erstellen, und ich werde eine Hintergrundfarbe dafür haben. Hervorragend, machen wir das. Kehren wir also zu diesem zurück. Und lassen Sie uns einen Abschnitt hinzufügen, der sich in meinem Container befinden kann , ziehen Sie ihn hinein, Abschnitt B, Abschnitt Produkt. Und es wird darin enthalten sein. Wir verstehen, okay, das wird meinen Kollegen hier benutzen. Du wirst okay sein, und du wirst der Hintergrund dieser einen Bearbeitung sein , die t grey 300 sein wird . Okay. Und was haben wir noch? Bringen wir diese Typen in den Fall, dass wir eine Liste brauchen. Okay, also meine Produkte habe ich noch nicht. Also meine Produkte, ich werde Produkte importieren. Ja. Ich habe sie vom letzten. Wir schauen es uns irgendwie an. Also meine Produkte alles es dauert eine kleine Minute , bis diese Leute geladen sind, je nachdem, wie groß der Geist Ihres Clusters ist. Nicht sehr lang Qu, also habe ich meine Produkte bekommen. Fügen wir die Produktliste hinzu. Also werde ich es hier schließen und die Sammlungsliste hinzufügen, okay? Und ich sage, ich werde es mit dem Produkt verbinden , um es drei zu schaffen. Wahrscheinlich werde ich es umstellen, um es tatsächlich auf ein Netz umzustellen. Das mache ich sehr oft. K statt du stellst es wieder auf diese Art von dehnbarem um. Okay? Und dann sagst du eigentlich mein Freund, du bist jetzt Grid. Okay? Und Sie werden sehen, dass diese Sammlungsliste nicht glücklich ist. Sie sind alle da drin eingeklemmt. Ich glaube, ich habe die Gitter dem falschen Wrapper hinzugefügt. Also muss ich es der Liste hinzufügen. Also lasst uns das rückgängig machen. Diese Sammlungsliste wird also ein Raster sein , das sinnvoller ist. Jetzt springen wir in diese ein, okay? Und du wirst drei Spalten und eine Reihe haben. Lass uns ein paar Sachen hinzufügen. Füge unser Bild hinzu. Hier drin. Lass uns ein Bild hinzufügen. Das Bild kann nicht innerhalb der Sammlung hinzugefügt werden. Klicken Sie zuerst auf das Innere und dann auf Bearbeiten. Wir verbinden uns mit dem Hauptbildfeld. Hervorragend. Ich füge eine Anhörung hinzu. Es wird meine Heizung zum Preis sein. Ich werde sagen, Oh, wir verbinden es damit. Stellen Sie sicher, dass Sie es mit dem Produkt des Basisnamens oder des Problemdesigners verbinden , entwerfen Sie die kleine Version. Ich muss das anpassen , weil wir viel länger sind. Sie haben nicht die Ladung. Okay, setzen wir OWL ein, nur ein Bild, sorry, einen Textblock, oder verbinden das mit L. Price, price, price. Hervorragend. Und was Sie tun können, ist danach einfach zu tippen, was damit verbunden ist. Ich bin eigentlich, ich will diesen Brocken danach pro hundert Gramm. Also werde ich tun, was werde ich tun? Eigentlich? Ja, genau das werde ich tun. Also Textblock im Moment. Okay, ich nenne ihn kostet Preis. Ich werde ihn in die Reihe bringen. Okay. Weil er sonst ein Block ist, oder? Weil er Textblock heißt. Er will die ganze Linie besetzen. Wenn ich also eine andere Person mache, eine andere Person, braucht eine andere Sache Block. Du wirst feststellen, dass er darunter sein will, okay? Und das wird weniger als hundert Gramm kosten. Okay? Also kannst du zu diesem Kerl sagen, nimmt den Preis, du würdest in der Schlange stehen. Diese Person will immer noch ein Block sein. Also nenne ich das einen Text. Und ich konnte den Preis auch nicht annehmen weil er das Gleiche tut, wäre Inline-Block. Ich brauche welche habe ich noch einen Rand übrig? Ich weiß es noch nicht. Also Rand links x s, nicht streicheln. Es wird, du wirst acht extra klein sein. Und Sie werden einen linken Rand haben, extra klein. Da haben wir's. Der nächste, aber ein Textblock ist dies. Also gehen wir, du gehst da noch einen Textblock rein. Es ist jetzt tatsächlich ein Absatz, oder? Ich habe das Gefühl, dass das jetzt als Absatz qualifiziert ist, weil es eine Entzündung geben wird. Also werde ich keine Texte eingeben, ich werde einen Absatz einfügen, der mit dem Absatzfeld verbunden ist. Okay? Jetzt hat mir der Kunde keine Zusammenfassungsoption gegeben. Okay, also was ich tun werde, ist zu ihnen zurückzukehren und eine Zusammenfassungsoption hinzuzufügen. Also schnapp dir ein bisschen Text. Nehmen wir an, es müssen drei Zeilen sein , denn dafür haben wir Platz oder finden heraus was dein Mindestcharakter gemischt ist. Ich werde einfach so viel benutzen. Okay, ich gehe in das Produkt und sage Produkt. Sie brauchen ein neues Feld, nicht im eigentlichen Produkt selbst, sondern in der globalen Produktsitzung. Ich sage, du brauchst ein neues Feld und es erscheint irgendwie unten, was komisch ist. Du wirst ein neues Lane-Ticks-Feld haben. Es wird mehrzeilig sein wenn sie es dort hineinlegen, und das Etikett wird eine Zusammenfassung sein. Okay? Und wir werden eine minimale, minimale Anzahl von Charakteren haben. Ich weiß noch nicht, was das ist. Okay, ich muss probieren, aber wir müssen auch zum Kunden zurückkehren und ihn im Rahmen des Prozesses dazu bringen, zu sehen, ob wir eine Zusammenfassung in Gang bringen können. Jemand muss es schaffen. Das heißt also die Sammlung. Ich gehe jetzt darauf ein und sage, wo ist meine Zusammenfassung? Paste? Sparen muss mindestens sein, Hoppla. Ich werde das tatsächlich schnell ändern. Okay, also habe ich es von Minimum auf Maximum geändert. Jetzt sollten wir also sparen können. Ordnung, also wird es mich durch diese arbeiten und einen In Ordnung, also wird es mich durch diese arbeiten und einen Platzhalter einfügen, der vage anders aussieht. Okay, jetzt kann ich wieder reingehen und sagen, dass Sie tatsächlich feststellen werden , dass Sie mit dem Zusammenfassungsfeld verbunden sind. Zusammenfassung besser. Ordnung, was brauchen wir noch? Wir brauchen unseren Button, okay, und fügen wir einen Button hinzu. Sie erinnern sich, dass dieser etwas anders ist. Du hast den lila. Nur wenn Sie es entweder in ein CMS oder eine E-Commerce-Website verwandelt haben , können Sie einfach eine angeben, um zu sagen, wählen Sie das aktuelle Produkt aus. Es weiß, welche Box es nicht ist. Es weiß, dass es dieser süße Zimt-Schwarztee ist. Es wird dort hingehen. 114. Zusammen mit Dan den Aufbau des full in Webflow Teil 3: Ordnung, es ist alles da drin. Ich muss es jetzt stylen. Also lasst uns das machen, indem wir alles in einem Div zusammenfassen. Ich könnte den Sammlungsgegenstand gebrauchen. Ich weiß nicht genau, was der Sammlungsgegenstand bewirkt. Es hat wahrscheinlich einige besondere Kräfte. Ich werde einfach ein div-Tag dort ablegen und einfach alles hineinwerfen. Du ziehst einfach alles nach rechts. Lass mich gehen. Also kann ich diblock für dich sagen. Mach ein paar Dinge. Lass uns etwas Abstand haben. Ich sage die Sammlungsliste. Eigentlich wird der ganze Abschnitt etwas Padding haben von dem ich Margin machen kann 24-Bit verwenden. Ich werde nachschauen, was der Designer gemacht hat. Halten Sie die Optionstheorie gedrückt. Bed Designer 32 wird bei sein. Also werden wir 32 verwenden, weil das nahe genug an der Liste der Produktionsabschnitte liegt bei allen einen Spielraum haben wird. Halten Sie eins gedrückt, halten Sie fest, schalten Sie 32 ein. Und ich werde sicherstellen, dass das Raster, das auf die Sammlungsliste angewendet wurde, auch 32 hat, falls es in das Raster gelangt. Und es werden 32, 32 sein, obwohl wir keine Reihen haben. Stecken wir es da rein. Ordnung, also das ist die Art von Abstand sortiert. Fügen wir einen weißen Hintergrund hinzu. Ich möchte, dass es das Ganze hat, oder weißen Hintergrund unten, aber weil es einen Schlagschatten gibt. Das wird also chaotisch werden. Eine weitere Rolle im Diblock, ausgezeichnet, nicht chaotisch. Hintergrundfarbe weiß. Lass uns einen Schlagschatten hinzufügen. Was ich tun werde, ist einen globalen Schlagschatten hinzuzufügen, damit ich ihn für andere Dinge verwenden kann. Also werde ich einen Div-Block hinzufügen. Ich nenne das hier. Nennen wir es Schatten, weil ich einen technischen Schatten haben werde , wahrscheinlich werde ich nicht kühn Knospen haben. Da hast du es. Also füge es hinzu. Sie können Effekte von Box-Shadow haben. Und schauen wir mal, was wir hier haben. Dieser hat also einen Schatten von 0,36, 16%. Ich werde nicht die Hälfte davon entfernen . Also direkt um drei verschiedene hier in Webflow, sie haben dieses Zifferblatt. Sie hatten keine X - und Y-Koordinaten. 1AD ist also gerade auf und ab, perfekte Entfernung. Es werden drei Pixel sein. Okay, das ist der Grund. Und das Blau war drei zu Hause und erinnere mich an all das, hey, die Farbe war 16. Genial. Das passiert nie. Okay, also das ist mein Schatten und wende ihn dann an, um zu sehen, ob er tatsächlich genauso aussieht. Also gibt es Diblock hier wird Schatten haben. Im Schatten. Es sieht ziemlich gut aus, wenn ich denke. Es ist ziemlich dasselbe, weil es derselbe Code ist. Ich bin sicher, du fragst dich. Ich bin mir nicht sicher, ob wir das erwartet haben oh, okay. Hast du es bemerkt? Mir ist es nicht aufgefallen. Jetzt ist es so, als ob sie, sobald sie die dunkle Farbe haben weil ich Polster angebracht habe, habe ich nichts getan, ich habe einen Rand oder eine Polsterung angebracht. Dieser Wickel um die Außenseite hat also die beiden aber seinen Rand, der Rand drückt sich von außen weg und das Streicheln drückt von innen nach Mitte. Also das will ich. Ich werde das alles klären. Ich mache sie. Wie würde sich verschieben? Okay, ich werde 32 Beta sein. Okay, wie mache ich die Polsterung auf der Innenseite? Ich kann Polster machen , weil das Bild auf diesem wie bei anderen Drogen aussieht. Also, weil ich den Schlagschatten auf der Außenseite des Bildes haben muss , aber wenn ich Padding hinzufüge, wird es am Ende kaputt gehen, oder? Wenn ich diesen Diblock habe und Padding hinzufüge, wird es funktionieren, aber es wird das Bild hineinschieben. Und ich mache das vielleicht einfach, weil es einfach ist. Und hoffentlich merkt es der Designer nicht. Er wird einen anderen Kerl bemerken, gutaussehend, aber er wird solche Dinge bemerken. Also diblock, ich brauche noch ein Div drin , um das alles abzuschließen. Okey-dokey. Gehen wir zum additiven Block. Da. Du kannst einsteigen. Und dann gehst du rüber, rüber. Wenn du rübergehst. Und dann diblock, ich füge eine Klasse hinzu. Wenn ich es jetzt erstelle, wird es eine globale Klasse erstellen. Ich werde mir alles vorstellen, was ich brauche, um es zu sein? Ungefähr 21. Also werde ich meinen Twin T4 verwenden, um aufrechtzuerhalten. Du musst nachsehen. Also werde ich diblock marginal gehen und dieser wird wahrscheinlich noch testen müssen. Stell dir alles Rauch vor Eigentlich mache ich Padding oder Margin spielt in diesem Fall keine Rolle, es tut es nicht. Ich werde Padding machen oder weil ich eher ein Padding wiederverwenden werde. Okay, und ich werde das nicht negativ machen und keine Marge machen. Halte Shift gedrückt und ich kann es mir ansehen. Ich muss nicht raten. Ich versuche es mit 16 zu kriegen. Das ist knifflig. Ich denke, das ist besser als 22 oder 24. Mir geht einfach der Platz aus. Note 24 ist netter. 24 ist mein Medium, nicht klein. Du wirst also mittelgroß sein. Ordnung, also wir werden es schaffen, wir werden es schaffen, wir werden es schaffen. Ich muss eine Combo-Klasse hinzufügen, um zu sagen, dass ich auf die Textliste klicke. Ich nenne es Produktliste muss eigentlich kleiner sein. Typografie benutzte meinen Abwärtspfeil, bis ich sie bekam. Ich bin froh, dass Wirbel in zwei Linien gehen, aber es kann einfach nicht auf drei zerfallen. Gehen Sie jetzt meine Datenbank durch und überprüfen Sie einfach , was der längste Name ist. Und dann muss ich vielleicht reduzieren, was sie in der Datenbank eingeben können , zumindest in meiner Produktliste, weil es nicht zu lang sein darf. Es wird meine Website ruinieren. Ordnung, und das hier, ich sage, Sie brauchen einen Randboden. Was habe ich? Kannst du anfangen zu sehen, wie nützlich es jetzt wird? Weil du sagst, Oh ja, das kann ich jetzt hinzufügen. Ich habe es angesprochen. Margin-Bottom scheint dämlich und du könntest nicht so gestohlen werden. Vielleicht ziehen Sie es vor, einfach alles mit seinem eigenen Stil zu stylen. Das ist total cool. Okay, geben wir diesen Jungs einen Block mit Mindesthöhe. Warum nicht Größe, Mindesthöhe, Höhe und Höhe. Und ich möchte , dass der Knopf unten ist. Wer erinnert sich, wie das geht? All diese sind alle bekannt. Und manchmal denke ich, sagen wir, ich möchte, dass das die Mindesthöhe hat oder nicht, Sie verlieren sich verdient, wenn wir gehen, Mindestgröße wird zu hoch sein. Pfeil nach unten verschoben. Das ist wahrscheinlich gut genug. Je mehr wir die verschiedenen Zeilen überprüfen müssen, um zu sehen, wie viele, wie viele Zeilen das sind, um zu sehen, wie weit es den Knopf nach unten drückt. Wie bekomme ich den Button nach unten? Weißt du, div markiere mich. Flex, Flex wird verrückt. Vertikal. Schnappen Sie sich diesen unteren und sagen Sie, dass Sie es sind, haben Sie Unterricht. Das tut es nicht. Ich möchte eine Button-Klasse drauf haben, zuerst ein bisschen Button-Klasse drauf, und dann bringe ich sie dazu, nach oben zu drücken. Ich habe eine andere Klasse, also ignoriere es, sie nach unten zu drücken, aber wir sollten flex gehen. Eigentlich können wir es jetzt machen weil es keine Klasse braucht, dreht es Kind? Lass uns einen Blick darauf werfen. Xd muss Margin-Top-Order sein. Es ist eine Klasse. Also werde ich das entfernen weil ich den Button zuerst stylen möchte. Schau mal. Das Styling ihn dort. Ja, machen wir das. Ich werde einen kleinen Blick darauf werfen. Du hältst es für 14, 44 mal 44. Okay. Du, mein Freund, wirst also ein Knopf sein, auf den ich das nicht anwenden werde. Nehmen wir an, ich hatte zwei Flexbox vom Elternteil , damit ich den Button selbst stylen kann. Ich werde es an allen möglichen Orten benutzen. Button, Freund, ich gehe zur Aufnahmetaste. Wenn Sie irgendwelche Kurse auf ihn angewendet haben, tut er es nicht. Also nehme ich nur das Blau. Das gibt es nicht. Also gehen wir zu Spacing. Was war es? Ich kann mich nicht an 44 erinnern. Ich möchte 44 sagen. Wir können in einer Sekunde überprüfen, was e4 ist und Ihre Optionstaste 44 gedrückt halten . Und dann etwas 14. 14. Manchmal funktioniert es nicht, meine Wahltaste gedrückt zu halten. Ich treffe es irgendwie zweimal. Sicher warum? 44? Das sind Buttons , die aufgerufen werden. Ich werde sagen, es wird dich retten. Es wird ausgeglichen sein. Und ich werde Schaltflächen verwenden , die eine Hintergrundfarbe meiner abgerundeten Ecken haben . Rund um die Ecken von 44,4 sind vier. Nett. Ordnung, also das ist gut. Da ist ein Schlagschatten drauf. Also verwende ich diesen Schatten irgendwie wieder. Seltsamer Weg. Wo bin ich? Lass es da unten? Habe ich, hab ich. Hoppla. Schatten zu Schatten auf dem Knopf. Ordnung, jetzt kriegen wir es auf den Grund. Sommerhöhen reichen wahrscheinlich immer noch nicht. Also die Mindesthöhe für dieses P ein Pad. Oh, du hast recht. Okay. Also will ich, ich will das nicht stylen. Also werde ich mich an PA, PA, Mid erinnern und die Klasse entfernen. Ich werde, ich werde diese Klausel entfernen, weil ich das nicht stylen möchte. Ich möchte diesem Deblocking eine Klasse hinzufügen. Das wird div, list, product, list, lower grey name sein. Okay? Und es wird eine Mindesthöhe von 350 haben. Viel zu viel. Halte die Umschalttaste gedrückt, meinen Pfeil nach unten, und nimm ihn einfach so, dass er groß genug ist, dass sie alle die gleiche Höhe haben. Warum ist der Typ ein bisschen kleiner? Immer das Bild. Hat damit nichts zu tun. Und du gehst, ich dachte wir brauchen vielleicht nicht mal eine Mindestgröße. Ich dachte, das wäre kürzer, weil es nicht genug verdrängt wurde. Es ist das Bild. Siehst du, ich habe zufällig Bilder, die etwas kürzer sind. Fügen wir dazu unsere PA hinzu. Also besorge ich mir eine PA, die alles noch aussteht. Und ich werde den Knopf unten kleben lassen. Also lasst uns die Höhe vergrößern damit wir sehen können, was wir tun. Geh zurück zu dir und verstecke das dann höher. Ganz offensichtlich groß. Und jetzt kann dieser Typ ein Elternteil sein. Danke, ist es nicht. Also sein Elternteil dieses div-Tags, du musst sicherstellen, dass wir zu dem zurückkehren , von dem ich nicht immer wieder Flex zu dieser PA hinzufügen möchte von dem ich nicht immer wieder Flex zu dieser PA , weil das kein sehr guter Anwendungsfall ist. Und ich möchte, dass es so ist, und ich möchte, dass du vertikal bist, perfekt. Und ich will diesen auch hier haben. Ich mache das hier. Spielt es eine Rolle, ob du dieses oder jenes anfängst? Ich will die Höhe dieses Buttons hier sehen. Zuallererst möchte ich, dass es Filme von sind, die Sie einfach nach links ausrichten können. Habe ich das hier gemacht? Jetzt habe ich es mit der rechten Seite verknüpft. Jetzt style ich Divs Shadow. Ich brauche dafür eine spezielle Button-Klasse . Das werde ich los. Ich nenne, dass dieser eine spezielle Button-Klasse hat , die als Button-Produktliste bezeichnet wird . Ein bisschen spezifischer und Sie werden verlassen und Sie werden eine obere Marge von Ordersticks unten haben . Nett. Dafür gab es viel Arbeit und ich möchte nicht, dass es links bleibt. Ich möchte, dass es so läuft. Und jetzt diese Bilder, also nehmen wir an, das werfen einen Blick darauf, was wir hier haben. Also kopieren wir einfach das Design. Es ist ziemlich dünn hier drin. Ich gehe, du wirst eine Größe von 123 haben. Okay, also dieses Bild hier wird eine spezielle Bildklasse haben , die einen Helden bekommen hätte, Teeblatt. Es wird eine Image-Produktliste geben. Und er wird ein Höhepunkt davon sein. Die Breite kann 100% betragen, also füllt sie alles aus, was sie ist. Und ich mache einen Anfall von Farbe. Jetzt gibt es mindestens die gleiche Höhe. Eigentlich immer noch nicht. Dennoch reicht die Mindesthöhe nicht ganz aus. Kannst du nur ein klitzekleines bisschen daneben sehen? Also werde ich sagen, dass die Mindestgröße dieses Kerls nur noch eine sein wird. Ein Paar. Ordnung, nimmt den Preis. Das hat es verloren. Ich bin mir also nicht sicher, wann es verloren hat. Oh, sieh dir das an. Weil ich das Ding flexibel gemacht habe. Es wird keine Inline-Blockierung mehr machen, weil er ein Kind ist. Kann ich ihn einfach nach links drehen lassen? Eine kann, aber dieser Typ macht das Gleiche. Ich muss zu dir zurückkommen. Beugt sich und bringt sie irgendwie auf ihr eigenes Niveau. Ich muss sie vielleicht in ein div-Tag setzen. Das ist momentan wahrscheinlich die einfachste Lösung. Wenn Sie sich einen besseren Weg vorstellen können, teilen Sie mir den Zeitpunkt und die bessere Art und Weise mit. Weil das billiger sein könnte. Es könnte schmecken. Der Unterricht wird mutig, mutig, mutig sein. Ordnung, wenn wir dort ankommen, überprüfen wir es jetzt auf dem Handy. Leute, ihr drückt bei mir die Daumen. Also werde ich es wahrscheinlich nicht tun. Okay. Ich muss die Mindesthöhe erneut erhöhen . Also werde ich das eigentlich einfach leiser stellen. Wir schnappen uns das Würgeraster. Es ist das Grid-Kind, das eigentliche Grid selbst sein wird. Kann ich sehen dass meins besser zurückkommt und es tatsächlich herausziehen kann? Und ich sage dir dazu, ich werde nur zwei mal zwei sein. Werde einen los. Okay, ich werde am Ende mehr haben, vielleicht auf der Homepage und lass uns die Filterung später herausfinden. Holen wir uns eine Leiter. Arbeite einfach an einer Sache nach der anderen, Dan. Du siehst gut aus. Und mobil. Es ist irgendwie zu klebrig. Denken Sie also daran, dass es eher so aussehen wird. Also wird es wahrscheinlich eher so aussehen. Du musst immer noch nach unten scrollen. Dann kannst du hier gehen. Sammlungsgegenstand für dich, und damit wirst du zwei sein. Okay. Nett. Das wird gut sein. Wieder habe ich die Tests auf meinem Handy, aber du kannst mich nicht auf meinem Handy sehen , also ist es nicht sehr aufregend. Ich gehe einfach , das ist vorerst gut. Das ist vorerst gut. Ordnung. Dann ist meine Homepage fertig, wahrscheinlich nicht. Schau du gegen dich. Das 100%, 100%. Einer hier hat wahrscheinlich eine Höhe darauf gelegt , damit alles in einer Reihe bleibt. Aber ich schätze, ich will nicht zu viel Unkraut bekommen. Ich möchte, dass dieses Video erhalten bleibt, ich fasse die Dinge am Ende zusammen. Also denke ich bin glücklich. Das ist gut genug für die Homepage. Fahren wir mit unserer nächsten Seite fort. Bist du immer noch bei mir? Du bist immer noch wach, Becky? Ich bin wach. Also lasst uns das hoffentlich machen. Ja, wir haben ein paar Sachen hier, um damit anzufangen. Gehen wir also auf Seite zwei. Das wird also eine Eulen-Produktliste sein und es wird eine Produktseite sein. Wir beschäftigen uns also noch nicht mit der Vorlage. Was erstellt eine weitere Seite? Und lass uns gehen. Sie wollten sagen, dass dies eine Produktproduktliste, ein Produkt, ein Produkt oder ein Produkt sein Produktproduktliste, ein Produkt, wird. Das wird in Ordnung sein. Ich sollte jetzt meinen Metatitel und meine Beschreibung eingeben. Gehen Sie auf dieser Seite auf nichts ein. Gehen wir zurück zur Startseite. Schnappen wir uns meine Navigationsleiste und wandeln sie in ein Symbol um. Gute Idee, nav. Zurück zur Instanz, zurück zu dieser anderen Seite. Und lass uns gehen und das Lied hinzufügen. Weiter. Was ich gerne tun würde, ist das zu duplizieren. Ich kann also zwei Seiten gleichzeitig sehen. Du kannst bearbeiten und beide lassen dich nicht. Eines davon sind wir schreibgeschützt, wie können Sie sehen, das ist hier nichts. Ich kann durch die Seiten springen, was cool ist, aber ich kann es in der zweiten Version nicht bearbeiten. So oft verschiebe ich es einfach als Referenz hierher , damit ich irgendwie auf dieser Seite sein und sehen kann , was ich auf dieser Seite gemacht habe. Denn sonst musst du es jedes Mal neu laden. Und jedes Mal, wenn Sie eine Seite neu laden, verschwinden Ihre Rückgängigkeiten, was eine Nervensäge ist. Also du Was haben wir? Ich wünschte, es zeigt Ihnen , wie Sie darin navigieren, auch wenn Sie es nicht bearbeiten könnten. Einfach nicht da. Ordnung, also brauchen wir einen Container. Ich glaube nicht, dass wir den Container gesehen haben. Und wir haben oben ein paar Sachen hinzugefügt. Was haben wir also oben hinzugefügt? Wir fügten hinzu und darin war es Medium Top und es war das. Okay. Lass uns eine White-Box hinzufügen. Füge ich oben eine Box hinzu? Es gibt nur Weiß oder füge ich eine Box , die alles weiß ist und ich mache sie zu Buxton, die Unterseite dort ist grau. Sehr gute Frage. Ich versuche zu überlegen, welches das Beste ist. Ich mache nur einen Top-Section. Ich habe das Gefühl, dass ich diesen wiederverwenden könnte , den ich wirklich tun möchte , um ihn nach unten zu verschieben. Also ja, lass uns dieses Ding machen, wir können es wiederverwenden. Das wird also Abschnitt, Abschnitt sein und es wird Abschnitt heißen. War ein Scherz. Weil ich das Gefühl habe , dass ich das ein paar Mal benutzen werde. Nicht ja. Ich habe das Gefühl, dass ich meine Sektion zum Erfolg bringen werde. Es wird keine Farbe drauf haben. Meine ganze Website hat eine Farbe drauf, nicht wahr? Also lass uns das machen. Der Körper muss diese Farbe haben. Meine 100. Also lass uns wieder hierher gehen. Ich gehe zu den Körper- oder Körpermarken. Und ich werde sagen, dass Hintergrund diese Farbe hat. Ich nenne das wird editieren und das wird AST grau sein , das Grau. Grau. Jedenfalls. Ich werde nicht fragen. Es wird also die Hintergrundfarbe sein. Und das bedeutet, dass dieser Abschnitt hier weiß sein muss. Fehlt meine Homepage? Weißt du, so wollte ich es irgendwie haben. Dieser hier, Abschnitt, Hintergrund. Es wird weiß und weiß sein. Globale Farbe. Es könnte einfach sein, ich weiß es nicht. Ich habe nicht das Gefühl, dass es jemals ein Bedürfnis nach Vollschwarz für Weiß gibt. Sie sind leicht zu erreichen und es ist unwahrscheinlich, dass Sie sie ändern werden. Unwahrscheinlich, wahrscheinlich wegen des Unterschieds, aber lass uns hier reingehen. Los geht's Drücken Sie nicht Command R. Das ist direkt neben Befehl D. Wenn Sie es vorher nicht getan haben, Control E, um Dinge hinzuzufügen, und das ist der Reset-Knopf. Das Zurücksetzen des gesamten Browsers ist nervig. Ordnung, wenn ich einen treffe, bereit zum Rollen, brauche ich etwas Kleinliches. Und hier, mit 32 Section Hero, werde ich eine Überschrift hinzufügen. Ich habe ein Medium und Medium ist 24. Also lasst uns noch einen für die Polsterung machen. Polster fett, und dieser wird groß sein. Lg, schreibe einfach groß. In vielen anderen Frameworks ist es üblich, LG, SM Excess oder solche Akronyme zu verwenden . Also polstern Sie den ganzen Weg, halten Sie die beiden gedrückt, verschieben Sie sie. Ordnung. Da hast du es. Also dieser Abschnitt, nicht die Anhörung, es wäre egal, wird PD sein. Ich verwende Algen. Sie sind wie ich es nenne. Ich hab's nicht mal getan. Habe ich das die ganze Zeit gemacht? Ich mache das rückgängig, bis es zurück ist. Was habe ich damit eine Div-Klasse erstellt, du siehst, dass ich nicht die ganze Zeit in PD gehe. Es ist so nervig für mich einzutreten. Eintreten. Jetzt halten sie die Umschalttaste gedrückt. Jetzt sollte es getan werden. Nett. Ordnung, schneide den Pfeil nach oben, um das TED-Elternessen zu holen. Ich glaube, ich verwende eine andere Schriftfarbe. Ich benutze, glaube ich, den zweiten da drin. Ich muss zurück zu den Heizungen. Ich glaube nicht, dass überhaupt die zweite Farbe trifft. da. Um tatsächlich zu sein. Ihr müsst eine Quelle der Primärtheorie sein. Ich habe keinen Primärzahn gemacht, was ich will. Also werde ich das machen. Machen wir es zu globalen Kosten und nennen wir es T prime Mary, ich habe eine Drei und einen Thunfisch. Hervorragend. Ordnung, finde dein schönes Ding. Stellen wir diese Region ein, dieses Ding hier, sollte es ein Abschnitt sein? Es kann leicht ein Abschnitt oder eine Region sein, die ein div-Tag sein sollte, oder es ist nicht wirklich groß genug, um ein Abschnitt zu sein. Ich weiß es nicht wirklich. Ich werde es einfach in eine Div-Abteilung machen, oh, naja. Tun Sie etwas, dann Abschnitt. Sektionen können nicht ineinander verschachtelt werden. Ich will es nicht ineinander haben. Es wird auf die Körperabschnittsklasse namens Abschnitt klicken . Sektion. Das wird eine Region sein. Es wird in meinem Container sein. Okay? Und es wird eine Höhe von dem sein, was ich tun werde , ist, dass ich den Text dazu bringen werde, ihn zu öffnen. Ich mache das manchmal gerne, dann muss ich nicht gerne versuchen, das mittendrin zu bekommen. Was ich tun kann, ist einfach zu sagen, sei etwas höher und niedriger als dieser Text. Also werde ich einen Textblock hinzufügen, der getroffen wird. Es kann 123 sein. Es schaut sich alle Seiten an. Ich habe nicht viele andere Seiten, also kann es sein, dass eine Drei hier drin sein wird. Schlagen. Es wird drei Stile geben, alle drei werden Planeten sein, die das nur hier drin benutzen. Also wirst du mutig sein. Schreiben Sie den Text ein. Okay, welche Größe 16 ist, sollte die Standardfett sein. Du bist als Weiße und Kälber geendet. Okay. Ich denke, es werden 16 sein. Ich werde das entfernen, entferne es vorerst. Null-Null. Wir können einige hinzufügen, vielleicht nicht zum Bereich der Heizstrecke. Eigentlich brauchen wir diesen Abschnitt überhaupt nicht. Schau dir das an. Ich kann drei schlagen und lass uns das einfach tun , weil ich den Abschnitt wahrscheinlich da drin lassen würde, aber ich möchte Ihnen zeigen, dass dieser Dreierschlag für einen Zweck verwendet wird, diesen ganzen Block. Es wird also Block bleiben , was bis zum Rand reicht. Es wird eine Hintergrundfarbe der Hintergrundfarbe haben. Es wird eine Topographie von diesem haben, wird einen Abstand von 32-dimensional haben. Alles andere. Ich bin ziemlich zufrieden damit. Also Mützen, ich benutze viele Katzen dabei. Wir verwenden zu viel Kappen. Ja, es rendert die Schrift etwas anders. Die Glühbirne treibt hier mutiger an, aber hey, es ist was es ist. Es wird auf allen möglichen Browsern gerendert, etwas anderes Weiß. In Bezug auf die Höhe füge ich vielleicht oben und unten ein kleines bisschen Polsterung hinzu. Und nenn das gut. Ordnung, also noch ein Abschnitt, und es wird dieser Brocken sein, okay? Das wird also mein Listenbereich sein. Du hast Spaß. Ich meine Spaß. Ich mache gerne Sachen wie wenn es nicht so schlecht läuft, wie ich es mag, wenn ihr zuschaut. Ich nahm an, dass es viel passen würde also wird es die Hintergrundfarbe haben. Ich habe keine Hintergrundfarben. Nennen wir das einfach einen Abschnitt. Sektion. Und das wird eine Produktliste sein, okay, es wird ein Produkt sein. Und ich werde die Seite durchsuchen. So nenne ich es sowieso, Produkte auf der Durchsuchen-Seite. Und das wird eine Hintergrundfarbe haben. Aus. Es ist der 300. Das ist es. Sie fügen die Polsterung für groß hinzu. habe ich dem Körper hinzugefügt. Okay. Ich mache mich auf den Weg. Und schnappen wir uns meine Liste. Sie können Listen kopieren und einfügen. Ich kann es so nicht machen weil ich mir das Ganze schnappen kann. Okay. Was kann ich meinen Aufwärtspfeil verwenden? Dieser Wrapper? Kann ich das so machen? Ich glaube nicht. Sie haben die Bindungsstelle entfernt. Damit kann ich leben. Kann ich es wieder binden? Sie werden also verbunden sein, um wieder die Produkte zu sein. Hat es mein Nein losgeworden, das hat nicht funktioniert. Also werde ich das nochmal versuchen. Ich werde eher rückgängig machen als löschen , weil sie mir anderen Müll mitgebracht haben. Lass uns sehen. Das. Ich bin mir ziemlich sicher, dass das funktioniert. Ich kann mir alles hier schnappen. Gehen Sie zurück zu hier, zurück zu meiner Produktsuche. Wer wird gehen? Also verwende ich dieselbe Liste. Dies sind ein paar Klassen. Ich muss aufpassen, dass da drüben nicht kaputt gehe. Sie müssen also einige dieser Klassen ändern. Sie werden entscheiden, ob Zeit sparen, indem Sie es kopieren und einfügen, weil wir es so bearbeiten müssen, dass es so aussieht, oder? Vielleicht ist es auch nicht so schick, so clever wie ich denke. Lass uns einen Blick darauf werfen. Du, lass uns gehen. Ändern Sie zunächst das Raster. Ändert tatsächlich das Netz. Ich möchte sagen, dass das Raster in der Liste und der Liste erfasst wird der Liste und der Liste erfasst wird , weil mein Raster ist Deshalb behalte ich gerne das Raster. Oh, du machst es so laut da versteckst du dich. Es wird einer auf Bestellung sein. Okay, und dann schnappe ich mir den Div-Block und den Diblock. Ich habe das Gefühl, wenn ich das ändere, wird es zu schwer sein, mich daran zu erinnern was auf der anderen Seite vor sich geht. Also muss ich es einfach wieder aufbauen. Wir können sie wieder aufbauen. Ich bin nicht clever genug , um alles, was ich hier mache, auch auf der Homepage zum Laufen zu bringen . Es ist also einfach genug, nur additiv zu blockieren. Damit ich Dinge stylen kann. Füge ein Bild hinzu, Bild. Ich füge noch Scherz hinzu. Ich füge Text hinzu. Füge noch einen hinzu. Ich versuche mich daran zu erinnern, was auf der anderen steht, weißt du, was auf der Liste steht. Es braucht Block K. Also nehmen wir an, wir haben ein Bild, das auf das Lehrbuch trifft, Lehrbuch. Das braucht man auf Knopfdruck. Bevor wir sie installieren, können wir das tun. Und lass uns einen Button hinzufügen. Hinweis vom Shortcut-Button. Dies wird auf die Seite weitergeleitet, die das aktuelle Produkt ist. Du nochmal, der Link zum Hauptbild. Du wirst der Erste sein und H2. Und Sie können es anhand des Produktnamens erhalten. Sie erhalten es vom Preis des Produkts. Preis, Preis, Preis. 115. Zusammen mit Dan den Aufbau des full in Webflow Teil 4: Okay, du wirst nur das Lehrbuch sein , das besagt, dass du 100 g eingibst. Dies wird die vollständige Beschreibung oder immer noch eine Zusammenfassung des Zusammenfassungsblatts sein, die Pins, richtig. Weil nicht so lang. Was werden wir sein? Die Zusammenfassung hängt zusammen mit zusammenfassenden Beschreibungen ab, wo ja. Richtig. Aber ich möchte niemanden, der das schreibt, auf die Zusammenfassung beschränken , sondern mich an diese kleine Liste halten. Es ist besser, einfach den Sommer zu nutzen, um dies zu erreichen. Schnappen wir uns also die ganzen Eltern und machen sie zu Filmen, denn wie standardmäßig gehen wir immer vertikal. Dieser ist eigentlich ziemlich praktisch für diesen Weg, weil ich eine Menge Sachen in der Mitte haben will. Du wirst also sehr klein sein. Du bist also genau so groß du bist, nicht quadratisch. Hoppla, das ist so, als wäre es quadratisch. Also werde ich dir auf dieser Seite ein Bild machen. Also dein Bild, was habe ich sonst noch? Ich habe eine Produktliste. Es wird eine Produktsuche geben. Und du wirst eine Größe der Breite von dir haben. Und ich sage „ Füllen Sie mit Kebab“. Ja, ausgezeichnet. Lass uns einen Blick darauf werfen. Also triffst du sie mündlich in einem anderen Buch. Eigentlich will ich ein Gitter und hier, Donna, könnte ich Flex benutzen, ein anderes hier reinlegen und es biegen. Also machen wir das einfach, um Ihnen Gitter einfacher zu zeigen , weil Flex nur oben und unten ausgerichtet ist, was jetzt funktionieren wird. Geht es einfach weiter mit dem Flex, den Sie dort gebeugt haben? Ich gehe da hin. Ich werde hier noch ein div-Tag erstellen. Div. Wir gehen rein. Ich würde gerne mehr als einen Shift-Klick auswählen können . Ich bin mir nicht sicher, warum wir es nicht einmal in dich bekommen können , wenn du den ersten hast und dann ist es wahrscheinlicher, dass der Rest reingeht. Im Moment. Es scheint so zu sein, als ob das funktioniert. Sie scheinen also in Webflow daran zu arbeiten und es scheint ganz natürlich immer besser zu werden, aber es ist ein Deblocking hier, Sie werden auch Filme sein. So können Sie einen Flex horizontal biegen. Dieser ist vertikal. Es ist Futter. Auf diese Weise. Rechtfertigung dieses Zentrums. Ich will Lücken und Reihen. Dieser kann ein paar Reihen bekommen. Das übergeordnete hier ist also die Lücke, die Reihen. Setzen wir 32 ein. Das hat nicht funktioniert. Bist du und du schuldest Gap wird dich nicht verstehen. Du musst alles gut machen. Dieser hier, das übergeordnete Element des Fehlers, wird aus Zeilen mit zu viel bestehen. Benutze meinen Pfeil nach unten, wo wir hingekommen sind. Du bist also der Richtige. Du musst dort vorbeikommen. Und es hat diese auch in ein Div gesetzt. Denken Sie daran, dass Flex den B-Inline-Block nicht zulässt. Also eigentlich wollte ich nur, dass wir Grid sind, weil Grid, lass mich das machen. Spiegelt wider. Okay, also was ich tun werde ist Flex. Jetzt bist du Block hat laut. Du musst auch mutig sein. Wie Nein, du, im Moment. Sie können haben, es dauert ungefähr drei, kann am linken Rand sein. Einfach mehr. Ich mochte die gesamte Polsterung, obwohl sie mit Flexbox geliefert wurde . Was ist zu tun? Du bist genau da. Ordnung. Ich mag zu viel von dem Filmkram. Ich setze ein, ich füge ein div-Tag ein. Ich wickle es um. Ich habe das Gefühl, dass dies vielleicht nicht der schönste Weg ist, wenn Sie sich noch einmal ansehen, was er tut, das wahrscheinlich denken sollte. Also. Du wirst in dich und dich hineingehen. Also verschiebe ich es zurück auf die Homepage. Das war ich in der Lage, richtig. Ich habe SMS Price angerufen. Sie werden den Preis der Tags aufzeichnen. Und du wirst Tics Price sein. Aber mutig. Beide treiben dieses Ding immer noch nicht hier. Oh, das ist nicht. Es nimmt Prozess, nimmt p, entfernt Klasse, Text. Preis. Wir haben irgendwie einen klassischen Text P erstellt, weil er nirgendwo verwendet wird. Ich kann es löschen. Und los geht's. Ordnung, Leute würden da reinkommen und Medien, sorry, einen Rand links oder rechts. Und wieder habe ich Flux geliebt, also habe ich irgendwie daran gearbeitet. Es gibt viele Kompromisse. Es geht in Reihen. Ich werde das erhöhen. Dieser Typ hier wird mein generischer Button sein. Also wollte ich das Margin-Auto nicht zum generischen Button hinzufügen das Margin-Auto nicht zum , weil ich es so oft verwenden werde . Okay. Also wird es aufgenommen. Was ich tue ist, dass ich weiß, dass ich vergessen werde, Kappen anzubringen , obwohl das Design es irgendwie sagt. Also werde ich sagen, dass Button eigentlich nur erzwingt, alles zu behalten, damit ich mir darüber keine Sorgen machen muss. Du wirst da nicht hochgehen. Ich hätte es einfach tun können, ich könnte das auch da reinlegen. Aber ich habe gemerkt, dass der Designer das getan hat. Und ich könnte dafür sorgen, dass dies den Preis kostet und es auf Inline-Block bringen könnte, aber es wird nur viele Probleme verursachen , weil einige dieser Kredite wirklich lang sind und es nicht geht lange zu dauern, bis es es vom Rand drückt, besonders wenn ich zu diesen komme . Okay, also, ja. Ordnung. ganze Block hat keinen Namen. Es heißt div Block zwei. Das wird sein, dass mein Div nicht angezeigt wurde, sondern es nur umbenannt hat. Okay. Normalerweise sehe ich gerne die anderen, die es benannt haben, auf eine Idee, aber weil ich es umbenenne, werden sie nicht angezeigt. Ich werde Ihnen sagen, dass ich Live-Produktsuche, Listenartikel mache. Ich habe es überhaupt nicht umbenannt. Da ist etwas Seltsames. Ordnung. Was kann ich ändern? Ich weiß nicht. Div. Wenn ich die Klasse entferne, wird sie kaputt gehen. Wenn ich noch einen hinzufüge, denke ich, alles was ich getan habe , war diesen zu erstellen, ihn flexibel zu machen. Und ich fügte hinzu, dass einige falsch liegen, aber wir sind zurück. Ordnung, es sieht irgendwie so aus. Ich brauche, aber ich brauche, weißen Hintergrund. Dieser Vertreter wird einen weißen Hintergrund haben. Und ich werde eine Combo-Klasse von Schatten hinzufügen. Okay. Jetzt kommen wir dorthin. Ordnung. Ich bin glücklich, du bist glücklich. Ich bin froh, dass wir es schaffen. Ich habe das Gefühl, wir haben keine Sachen gemacht. Kannst du sehen, wie viel schneller wir gebraucht haben, um diese Seite zu erstellen als auf der ersten. Es steht nicht so viel drauf, aber wir verwenden Klassen wieder. Das ist echt cool. Ich fühle mich wie ein starker, mächtiger Webdesigner. Wenn ich nur Box-Shadow gehe, habe ich das Padding dort schon konsistent gemacht. Wie fühlst du es? Vielleicht nur ich. Du fühlst es. In Ordnung. Schauen wir uns die letzte Seite an. Was haben wir hier vor, bis zu diesem. Lass uns das machen. Ordnung, also werden wir an der Vorlagenseite arbeiten , denn das wird so sein, viele von ihnen werden so aussehen. Also gehen wir und wir gehen über zwei L. Da ist es. Ich werde Produktvorlage machen. Okay, wir benutzen unser Navi und werfen ein Bearbeitungs-Lesezeichen ein. Ich hatte so viele Lesezeichen. Montag, wir gehen, legen wir es in einen Container. Fügen wir diesen Container hinzu, Rand oben Md. Schauen wir uns mein Design an. Es gibt ein bisschen Polsterung in diesem. Dieser wird einen weißen Hintergrund haben. kann den weißen , den wir vom letzten hatten, nicht wirklich wiederverwenden , weil ich ziemlich genau darüber war. Also lass uns hier einen Abschnitt erstellen. Gehen wir zu Abschnitt, den ich nur die globale Klasse namens Beet Color BG White nennen sollte . Ich kann es also immer wieder benutzen, aber wir sind fast am Ende. Also werde ich einfach den Abschnitt ausmalen, das Produkt mit weißem Kittel, diesen Abschnitt auch hier, es wird die ganze Mitte gehen. Nett. Lass uns Eule hinzufügen. Wir müssen jetzt eigentlich keinen Listeneintrag hinzufügen, wir fügen einfach etwas hinzu, weil wir in der Vorlage und ein Bild einwerfen können, Bild Juni. Okay, verbinden wir es mit der Notiz, dass es mit dem Hauptbild verbunden ist. Jetzt musst du sicherstellen , dass das Produkt wie beim Entwerfen durchkommt , okay? Sie müssen darauf achten, dass die Bilder möglicherweise nicht passen. Möglicherweise müssen Sie Ihr Design anpassen, nur weil das Bild nicht groß genug ist. Dieser ist, und es wird eine Höhe von, Höhe, Höhe von drei bis drei sein. Ich habe die mobile Version M&A total vergessen. Ich fühlte mich auf der letzten Seite zu einfach, wir werden beide am Ende zusammen machen , weil wir schon angefangen haben. Okay. Ich werde die erhöhte Breite hier drin nicht machen, okay, ich werde eine Klasse Y ergeben. In dieser Sitzung da kann man keine Prozentsätze machen. Sie können die Pixel bearbeiten. Also möchte ich eine Klasse namens image product PRO cut product hinzufügen . Okay? Und wir sagen, du bist so groß wie du. Hervorragende Breite von 100%, passen dort hinein und füllen, abdecken und in der Mitte oder oben und Sie müssen einige davon durchgehen und die Option Nr. Drücken Sie alle Tasten und prüfen Sie, ob Sie durch die verschiedenen Seiten wechseln können. Wie die Tabs. Welcher ist es, Dan. Ordnung. Ist Shift Option auf einem PC, ich bin mir sicher, dass es ein Shift und Alt, Links- und Rechtspfeil ist. Kannst du sehen, dass ich gerade durch meine Bilder spreche , durch ein du könntest einfach hier reinklicken. Ich habe nur drei. Aber es ist eine gute Möglichkeit, Bilder durchzugehen und einfach zu überprüfen, sie alle in der Mitte besser aussehen, denen sie wahrscheinlich wissen, dass eines nicht so toll ist, sondern anstatt hier reinzugehen und zu sagen: Okay, ich möchte, dass Überlauf oben oder unten passt. Also lass uns das machen und jetzt einfach meine Pfeile benutzen. Die Oberseite oder die Unterseite. Ich bin mir nicht sicher. Ich denke die Spitze. Ordnung, also haben wir das. Ich werde das übertreiben. Jetzt. Ich hätte das als Hintergrund festlegen können, und das ist eine Art, es so zu machen, wie wir es auf der Homepage gemacht haben. Ich möchte ein echtes Bild sein, weil ich möchte, dass es Alt-Text k hat. Im Moment glaube ich also nicht, dass wir das haben. Was Sie tun können, ist ein Alternativtextfeld in Ihren Produkten einzurichten . Das habe ich nicht. Okay, Sie könnten wir diese benutzerdefinierten Zusammenfassungsfelder hinzufügen. Ich würde jetzt zurückgehen und ein weiteres benutzerdefiniertes Feld für Alternativtexte hinzufügen und den Client haben, oder sie haben vielleicht schon eine Beschreibung, die wir verwenden können, okay, und ich setze eine Limit-Anzahl darauf, eine Zeichenanzahl. Im Moment werde ich aber so tun, als hätte ich das getan und mache weiter. Also möchte ich sagen, dass ich das reinlegen möchte. Lass es uns zuerst drunter legen. Schlagen. Okay, und das kann ein Hit sein. Es wird eins treffen und ich weiß nichts Vergleichbares, aber ich brauche das, um zu sein, dass du nicht hast, du springst nicht zu den drei Treffern auf einer Seite, du brauchst mindestens eine Überschrift. Man sagt dem Browser, dass dies das Wichtigste auf dieser Seite ist. Also muss ich für diese Seite einfach ziemlich ausführlich stylen, einen zu treffen . Das wird mein Hit für die Produktseite sein. Okay. Und es wird so sein, du fügst keine Schrift hinzu. Es wird das sein. Okay. Es wird eine Größe davon haben, wo wir hingehen. Was hasst du? Männer? Das mache ich dauernd. Nichts 48 darüber. Mein Gehirn tut es. Verwechselt die. Du teilst es durch sechs. Dean Rim. Und es wird einer sein ist großartig. Es muss weiß sein, was wir nicht sehen können. Und was ich tun werde, ist das einzufügen, du könntest es in ein Div stecken und es stylen. Ich werde das tun, was ich für diese Heizung ohne Region getan habe . Ich werde die eigentliche Klasse dazu bringen, ein paar Dinge zu tun. Ich möchte, dass es keine Blocker sind. Block hat den ganzen Weg bis zum Rand, was für diese andere Sache großartig ist. Ich habe eigentlich nur den Hintergrund und die Faust gesetzt. Also, wenn wir darüber sprechen, weil es standardmäßig so ist, wenn Sie es auf Overflow umstellen, nein, Chrome möchte ich auf das Gehirnlayout zum Inline-Block kommen. Kommt hier einfach an den Rand. Dann kann ich mir dort etwas Polster von ihrem Grundstück holen. Stellen Sie sicher, dass ich es anschließe, damit es aus dem Namen des Produkts stammt, und schauen Sie es sich an. Es ist sowieso nicht sehr gleichmäßig, also vertraue ich nicht darauf, dass die Zener-Diode funktioniert. Okay, lass uns gehen. Sie müssen sie ungefärbt machen und ich werde es schwarz machen, aber die Transparenz beträgt 2%. Also hier werde ich Alpha eingeben ist 82. Okay, und jetzt muss ich es hochziehen. Also werde ich den Abschnitt relativ machen. Es wird wahrscheinlich in Ordnung sein, sich das anzusehen. Vielleicht möchte ich es immer noch in einem Div zusammenfassen. Ich hoffe nur auf das Beste und sage dir wird es gut gehen. Also gehst du in Position. Absolut. Interessant, was? Es drückte sich an den Rand , weil es nirgendwohin gehen kann. Das liegt daran, dass dieses Ding den Raum offen hält. Aber wenn ich die ganze Sache relativ mache und mir das dann schnappe oder würde es funktionieren? Das ist gut. Deshalb häuft es sich irgendwie an. Es liegt nur daran, dass es da draußen nicht passt und einfach so klein wie möglich zusammendrückt. Das sieht okay aus, aber Option nach links und rechts verschieben oder Alt umschalten, es ist ein Häkchen, das richtig ist. Und PC, Sie müssen möglicherweise anfangen, die Tasten gedrückt zu halten. Sie passen alle lokal. Okay, dieser hier ist Teil des Add to Cart. Ich gehe da rein. Wollte in der weißen Box sein, damit du in das Produkt gehst. Hervorragend. Qu, was machen wir? Ich möchte die Schaltfläche „Jetzt kaufen“ nicht. Ich muss wahrscheinlich nur mit dem Kunden darüber sprechen. Mögen wir die Schaltfläche Jetzt kaufen? Ist das angemessen? Vielleicht machen Sie wahrscheinlich eine Benutzerverkostung und haben Sie beides. Sehen Sie nach, ob es eine Art Anwendungsfall für sie gibt. Dieser Typ wird keine Marke sein. Er wird Button sein. Mützen. Button sollte mutig sein. Ich denke, Knöpfe sollten fett sein. Ich kann es nicht so auswählen wie du, oh, es ist ganz anders. Schrift. Z, nichts. Okay. Ich habe meine Buttons tatsächlich halb fett gedruckt und es ist aus der Zeit, als ich bei Schriftarten fehlte. Früher, als ich schlecht designt habe, musste ich zu Design gehen und sagen, was falsch ist. Also werde ich gehen und es einfach so lassen wie Coca-Cola. Was will ich sonst noch machen? Ich möchte das Formular ein wenig stylen, also möchte ich das rein und raus schieben. Ich kann sie nicht in ein Div einpacken oder eine Klasse zu diesem Ding hinzufügen müssen. Könnte daran liegen, dass ich es wahrscheinlich noch einmal für etwas anderes tun werde. Also werde ich sagen, dass Sie nur ein R-Feld haben, die Klasse der Feldgröße wird mittel sein. Und es wird mittel, ich gebe es, wird das ein Minimum oder Maximum funktionieren? Maximale Breite? Wie viel gehen wir los? 300 Pixel. Merke es. Ordnung, ich will die nicht auf den Etikettenfeldern haben. Ich brauche es für diesen , aber nicht für diesen. Du siehst es hier. Es heißt Select Size und ich kann wählen sagen, aber ich kann die Wortgröße , die aus der Produktdatenbank stammt, nicht ändern . Sie müssen also reingehen und die Art und Weise ändern, wie es in die CSV aufgenommen wird, weil es wirklich davon abhängt. Ordnung, was sonst? Wir müssen damit spielen? Etwas Abstand, wir müssen in den Warenkorb und in den Warenkorb legen, es gibt Schaltflächen, die viel größer sind auf dieser Seite. Es ist größer und breiter. Also sage ich: Du wirst einen Knopf haben, aber du wirst einen Knopf groß sein. Okay? Und du wirst von allem mehr haben. Du bist so. Ich sollte nachsehen, aber ich werde es nicht tun. Du brauchst deine eigene Klasse. Sie werden Textmenge sein. Okay? Und du wirst die richtige Farbe haben. Sie haben das Kontrastverhältnis nicht erreicht. Sie werden alle die Kolumne AAA sein. Und ich brauche noch ein paar andere Dinge, also habe ich das. Was ich auch beachten muss, ist das In den Warenkorb. Also darüber, wenn ich oben Command oder Control E drücke , sollte ich drücken. Im Lehrbuch wird das die vollständige Beschreibung sein , die nicht so lang ist. Ordnung? Okay, ist das, nehmen wir an, das ist nichts und ich suche , ob es sich um eine Flex-Flexbox handelt, weil ich dann Zeilen hinzufügen und mit dem Abstand herumspielen kann, wobei die Wahrscheinlichkeit besteht, dass sie alle gleich sind. Sie können sehen, dass es viel breiter ist und dieser ist der gleiche wie dieser. Es ist was, was benutze ich? Warum verwende ich ein so kleineres? Mein Malmedium ist eigentlich nur 24 h groß und ich wollte alle Polster groß machen. Lass uns das entfernen. Überschrift. Groß. Da haben wir's. Jetzt kann ich hier reingehen und sagen, Sektionsprodukt Sie mit dieser einen Vertikalen. Ich kann Zeilen von 3d2 hinzufügen. Und das ist total durcheinander , weil du relativ zu diesem bist. Das hat auf Aktualisieren geklickt, nur um zu sehen, ob das Absolute zurückgeht, ob der eigentliche Code aktualisiert wurde. Jep. Immer noch Schnäppchen. Also werde ich einen schlagen. Sie haben Abstand oder Position. Wo sind Sie positioniert? Wir gehen wir gehen. Ich weiß nicht, warum sich das bewegt hat. Ich glaube, weil ich mit Flex rumgespielt habe. Ja. Vielleicht bereitet mir Flux Probleme. Schauen Sie sich das an. Kann ich nicht rückgängig machen, weil ich es aktualisiert habe. Okay. Also werde ich eigentlich gehen. Es ist nicht gebeugt, weil es Probleme verursachen könnte. Und ich wollte meine Polsterung hinzufügen. Lass uns einen kleinen Blick darauf werfen. Also das gleiche Problem. Das liegt daran, dass es von oben kommt. Und die Linke. Okay. Das ist also der Teil da oben. Oh, seine Eltern gingen von relativ zu blockierten Anzeigen y. Also sucht es nach Körper, weil ich damit herumgespielt habe, dass er gebeugt wurde damit herumgespielt habe, dass er gebeugt und es vielleicht nicht wieder P-Block gebaut wird, ich will nicht, dass ich es bin wollte blockiert werden, aber ich möchte, dass es immer noch bei einem Verwandten ist. Okay. Damit dieser Typ weiß, wo er ist und du deswegen aufgestiegen bist? Wir haben es geschafft. Okay. Hat sich die Zahl geändert , weil wir geändert haben, wer relativ zu dem Produkt der Sektion ist . Weil ich mit Sachen herumgespielt habe, hat er sich auf den Körper eingestellt. Also Eric, er tut, was ihm gesagt wurde. Ich sage ihm nur, er soll komische Sachen machen. Das ist die eine Sache mit Code. Es ist nie kaputt. Du bist es, es macht genau das was du ihm gesagt hast oder es wird ihm gesagt, es wird herausfinden, was das ist. Deshalb war es falsch. Abkürzung 123, los, Sie müssen die Größen ändern, aber in Ordnung, lassen Sie uns, was wir sonst noch in Bezug auf Kontrollprodukte haben? Da ich bereits eine Klasse darauf angewendet habe, werden Sie eine untere Marge von 32 bekommen , weil das irgendwie nicht genug ist, aber Sie sind auch an der falschen Stelle. Darüber hinaus. Kann es in die Karte passen? King, geh, da ist der ED-Carbon, der da nicht reingehen kann. Okay. Kann ich da reingehen? Es braucht Block. Kann reingehen. Geht irgendwie dorthin. Kann es gehen? Kannst du da nicht hingehen? Das wussten wir. Es ist absolut, könnt ihr mich bemerken? Das ist also da unten. Du wirst oben und unten eine Polsterung haben. Dieser hat eine Klasse darüber. Also kann ich ihn auch irgendwie hinterhältig benutzen. Ich sollte wie Python essen, oben auffüllen, unten auffüllen. Ich habe diese Kurse schon da drin. Okay, dieser hier, habe ich schon einen Randboden? tue ich. Beide haben recht. Menge kann sein, an der sie teilnehmen können. Da hast du es. Haben wir bei diesem einen oberen Rand? Rand oben? tun wir. Ordnung. Mir gefällt es. Sie benötigen den Rand unten nicht mehr. Okay. Jetzt, ja, ich gehe mir eine Tasse Tee holen. Du wartest dort und wir werden die mobilen Versionen viel länger als eine Stunde machen , dann j12 342-34-1234. Okay. Zwei brauchen also Arbeit. Wahrscheinlich nur die Größe der Schrift. Es hat eine Klasse. Ich benutze meinen Abwärtspfeil. Das ist meine längste von allen, wenn du tatsächlich in der Größe bist und versucht hast, das zu benutzen, wie nach meiner Abkürzung Shift Option links und rechts oder Shift Alt, ich suche nach dem längste Aufzeichnung von Gott als dieser hier. Also hole ich mir ein kleines Geld dafür. Der Rest davon. Okay. Dieser hier. Auch hier werde ich es wahrscheinlich einfach auf zwei zerlegen lassen , weil die Schrift zu klein sein wird. Also werde ich nur sagen, ich hoffe, dass ich mich mit der Position herumschlagen kann. Hey, wo ist meine Position? Ich vermisse mich bei diesen anderen Positionen nicht. Und was die Breite betrifft, warum ist es so weit draußen? 100%, ich gehe nur zu Männern in allem, es hat eine Mindestbreite, nicht wahr? In Bezug auf die Größe blockiert es nicht. Warum? Ich werfe einen kleinen Blick darauf, es ist gut. Der Röntgenmodus wird einfach funktionieren Ich bin mir nicht sicher , was offen gehalten wird. Es sollte da einrasten, denn das bringt uns auf die andere Linie. Es gibt etwas, das ihm eine minimale, minimale Breite verleiht. Das ist es aber nicht. bist du nicht. Was Sie tun können, ist einfach Ihren Aufwärtspfeil zu benutzen , um zu sehen, wie das Wort darin klickt. Verwenden Sie Ihren Aufwärtspfeil, um zu sehen, ob das nächste Auto ist und schauen Sie sich jetzt an als dort. Danke Leute. Ich bin mir nicht sicher. Komm zurück zu dir. Ja. Weil ich mir nicht vorstellen kann, was schief gelaufen ist. Das ist einer, ja. Ja. Dieser wird wahrscheinlich ein paar Sachen machen müssen. Was werde ich in diesem machen, was hat der Designer gemacht ? Schau? Benutze einfach den kleinen Text. Okay, also fangen wir mit einem kleinen bisschen Text an und dem Diagramm zur Reduzierung der Schriftgröße. Ist das wirklich da draußen geblieben, Hannah? Das Problem wurde gelöst. Es löst es aber nicht wirklich ist das längste noch lesbar? Was ich für diesen mache, kommt tatsächlich auf diese Weise. Wird das dort bleiben? Das ist es. Kann ich auf dieser Seite etwas Spielraum hinzufügen? Ich habe das Gefühl, das ist Betrug. Schummeln. Wird es aber funktionieren, ist der Schlüssel? Nein. Ja, das scheint keine gute Lösung zu sein. In der Schrift wird es kleiner sein. Ich rufe zwei Leitungen an, okay? Wahrscheinlich da. Und ich werde mich damit anlegen müssen Lass uns das auf die 16 reduzieren und um dem zu entsprechen, habe ich hinzugefügt, dass oh, das ist Positionierung. Ich will die Überschrift drauf haben. Also größenmäßig gepolstert. Lass es uns hier runter bringen, ein k, hier, k, die Positionierung muss ein wenig steigen, einfach da reinklicken und meine Pfeiltasten benutzen, 1234. Und auch diese Größe ist wahrscheinlich ein bisschen komisch für hier. Der Höhepunkt davon und dieser ist also , dass Sie jetzt höhenmäßig davon sein werden, was in meiner Position fehlt . Ich kann das aber reparieren. Wenn Sie die Umschalttaste gedrückt halten, geht es hoch Ordnung. Das Letzte, was ich tun werde, ist, eine kleine Polsterung für diesen zu erstellen . Also klicke hier unten, wirf ein Div ein. Div wird Padding genannt. Und das wird sein, wir haben ein Medium, ich mache ein kleineres hier. Klein und es wird die Umschalttaste gedrückt halten und die Umschalttaste gedrückt halten und 16 rundum machen. Hervorragend. Ist weg. In diesem Fall. Es ist kein Symbol , Klassen hinzuzufügen und sie zu entfernen, abhängig von deinen Breakpoints, du musst den Song wiederholen. Ich muss sagen, dass es gewogen wird und der Behälter hier hat diesen Rand, der obere Teil hat eine große Polsterung, was dieser Phi ist, füge einfach Polsterung hinzu polstert klein darauf. Es setzt außer Kraft, das tut es absolut. Aber hier habe ich auch kleine Polster. Du wirst finden, du wirst finden, du wirst finden. Da hast du es. Das wird also Section Hero aussehen, Sektionsprodukte wurden groß gepolstert, Überschrift klein darauf angewendet. Aber es wird erst hier wirksam. Ich nahm an, dass es ganz nach oben und unten gehen würde , weil die Klasse angewendet wird. Aber das liegt nicht daran, dass ich es hier angewendet habe. Diese, ich habe Polster, Mittagessen, du machst weiter, es ist etwas. Ordnung, lass uns das zusammenpassen lassen. Eigentlich könntest du jetzt einfach diese Art von Styling verwenden. Okay, das heißt, lass uns einen Blick auf die werfen, lass uns jetzt aus dieser herauskommen, lass uns die andere Seite ansehen , die wir für diese nicht gemacht haben. Also beginnend bei den ersten beiden, okay, es funktioniert nicht. Okay, es wird tatsächlich eine Zwei sein, lass uns einfach runter gehen, um das Gitter zu finden. Hoch. Da ist es da, nach dem ich suche, ich habe irgendwie auf die Mitte und diesen Mopppfeil geklickt bis ich das Gittersymbol sehe. Da ist es. Ich sage, du bist nur eins nach dem anderen fertig. 123 oder sie wird eng. Wie werde ich das bekämpfen? Habe ich zufällig gemacht , dass DID vertikal ist und zentriert wird. Ist das. Das ist es auch. Das sind Filme. Das war genau dort ein Glücksfall. Und diesen hier, ich werde anwenden, dass wir gelernt haben , dass wir Padding machen können. Mal sehen, ob das funktioniert. Rundum klein bemalt. Sie traf nicht zu. Warum nicht rückgängig machen? Machen Sie große Polster für den Fall, dass etwas nicht stimmt. Es stimmt etwas nicht mit kleinen Polstern. Was ist falsch an einer kleinen Polsterung? Lass uns gehen und es herausfinden. Also gehe ich einfach in eine Additivklasse oder auf irgendeine Weise zufällig. Ich füge PD Stall hinzu. Es macht eigentlich nichts so Kleines wird 16 sein. Deshalb ist das ja. Haben, wenn es nicht funktioniert. Und damit bin ich zufrieden. Und ich werde tatsächlich mobil sein , mal sehen, ob es auch hier zutrifft. Ihr Sammellisten-Wrapper. Wir können Klassen deaktivieren, kodieren. Wie macht man das hier und Webflow. Was wir tun müssen, ist einfach hier hoch zur Spitze zu gehen. ich groß gehe, werde ich auf Null setzen und es auf Null setzen, um einige diese Klasse außer Kraft zu setzen. Du wirst also Null sein. Und dann bist du dafür hier. Zurück hier werden die größten Ausgaben für diesen Fall 32 betragen. Und dann sollte es auch auf diesen folgen. Ich habe das noch nicht gemacht. Okay. Du hast also eine große Polsterung. Wir haben es für diese anderen nicht deaktiviert. Wir haben es einfach für diese höheren außer Kraft gesetzt und es dann für Danio wieder eingeschaltet. Und dieser hier, es sieht okay aus, aber der eigentliche Abschnitt wird eine kleine PDE haben. Da haben wir's. wir sicher, dass ich Rick bin, die anderen sind immer noch PD groß, groß und klein. Lass uns was überprüfen. Ordnung, zwei zu treffen hat keine Klasse. Ich möchte es zentrieren, schreibt es in den Text. Kann ich das mit dem ganzen Block machen? Kann ich gehen? Oh, aber wird es das auch mit diesem machen ? Schauen Sie sich das an. Weil das gut aussieht. Das Versteckte sieht hier etwas komisch aus. Ich sage, alles in diesem Div wird mittig ausgerichtet sein. Spiegelt es diesen wider? Dieser hier ist nett. Es gilt nur vom Kopf abwärts. Okay. Will ich oder wollen wir wahrscheinlich damit herumspielen , um die kleinen bis 16 zu erreichen. Erstens, klick auf 1234, es muss etwas mehr Abstand geben, aber ich habe genug. Hast du genug? Ich hab genug. Ordnung. Das wird kleiner sein. Es wird einen Kurs brauchen. Nach alldem. Lass uns hier bearbeiten. Nennen wir das eine Überschrift, eine auf der Produktseite. Beachten Sie, dass dies die Suchseite ist. Es wird „Eins schlagen“ nennen . Und ich sehe dich hier. Das ist immer das Letzte. Das wird das Letzte sein. Also Schriftgröße kleiner. Sie können nicht auf zwei Zeilen aufbrechen. Und Sie können auf zwei Linien sein, aber Sie können zentriert sein und Sie werden 1,1 Zeilenhöhe haben. Ordnung, meine Damen und Herren, veröffentlichen wir dieses Ding. Daran stimmt irgendwas nicht. Wir werden es ignorieren. Du würdest denken oh, bitte, oh, bitte. Oh bitte. Keine Navigation. Bitte warten Sie. Ordnung, es ist soweit. Machen wir die Navigation. Gehen wir ins Navi. Dieser hier wird in das Symbol aufgenommen, weil ich sie alle haben will. Ich möchte nicht, dass du zu einer externen URL zu der Seite kalt gehst . Sie werden zur Durchsuchen-Seite gehen . Sie gehen also zu einer Seite namens Produktsuche. In dieser Registerkarte öffnen. Vielen Dank. Der Cotton weiß, wohin er geht. Veröffentlichen Sie erneut. Das wird nicht, wir werden ein paar Mal veröffentlichen. Ordnung. Lass es uns überprüfen. Wir sind auf der richtigen Seite, wo Sie einen von ihnen aktualisieren und loswerden. Durchsuchen Sie, wen wir nicht haben LinkedIn wird das tun, sonst noch etwas? Wir sind also eher auf der großen Version auf der Homepage, die Homepage ist kaputt. Hervorragend. Kommt zur kleinen Seite. Es funktioniert besser. Homepages sind also kaputt. Warum ist die Homepage kaputt? Sieht okay aus. Und er ließ einen MI Rowan Blick auf diesen werfen. Gehen wir zur Startseite. Oh, wir haben etwas falsch gemacht. K, die Klasse, die wir benutzen. Schauen wir uns das Raster an. Lege es nicht in ein Gitter. Habe ich. Also ist er in einem Raster. Ein Gitter. Wie ist er genau so geworden? Es sollten drei sein. Ich weiß es nicht. Wenn ich diese editiere, heißt Sammlungsliste. Weil die Sammlungsliste mit demselben Namen hier als auch auf einer anderen Seite verwendet wird. Alle anderen Seiten. Produkt durchsuchen. Ja. Dieser benutzt also dasselbe. Können wir also die Klasse entfernen , von der ich denke, dass wir sie schreiben können, weil wir , ja, nennen wir diese eine Sammlungsliste auf der Durchsuchen-Seite. Und wir sagen du und jetzt eins per Auto. Erledigt. Also lassen wir das auf der Homepage in Ruhe. Du arbeitest. Lass uns nochmal veröffentlichen. Ich sehe es mir hier nur in der Vorschau an, bevor wir zu weit gehen und veröffentlichen. Also machen wir uns auf den Weg zur Arbeit, gehen wir zu einem dieser Typen. Und es funktioniert so viel auf der Seite. Mir ist klar, dass wir sonst 1 Million Jahre hier wären. Ich denke, das Ding ist das einzige oder das Bit 0. Ich denke, das ist nicht schlecht, nicht schlecht. Ich muss das auch auf meinem Handy testen . Lassen Sie uns das beheben und ich zeige Ihnen eine Möglichkeit, auf Ihrem Handy, auf Ihrem Desktop, zu testen . Sie sollten es einfach an Ihr Telefon senden, aber das können Sie nicht sehen. Also lasst uns das in Ordnung bringen. Also, es gibt diese Option, die Sie hier für die aktuelle Seite haben für die aktuelle Seite , auf der wir uns befinden, hat einen blauen Stil. Es ist ein bisschen wie ein Standard , der aus dem alten HTML stammt. Also werde ich sagen, dass der Nav-Tastenstrom tatsächlich auch die Farbe Weiß haben wird. Zeigen Sie eine Vorschau an Das wird nicht blau. Es wird nicht blau. Werde blau. Als wären wir vielleicht da. Lassen Sie uns eine Vorschau des Dings auf dem Handy anzeigen und dann nennen wir es einen Tag. Und es ist ein Tag. Ich habe das Ding morgens angefangen und es ist Nachmittag und ich mache dort eine Mittagspause. Kannst du sagen, wann sich meine Stimmung wahrscheinlich irgendwann geändert hat, wenn ich wütend werde und danach, wenn ich viel gegessen habe? Ordnung, veröffentlichen wir es. Aktualisieren Sie dieses und was Sie in Chrome, Middle East, tun können . Ich bin mir bei anderen Browsern nicht sicher, Sie können mit der rechten Maustaste klicken und überprüfen sagen. Und ich habe hier den Tiefpunkt gemacht, du kannst sagen, zeig es mir auf diesem Symbol hier. Ihre könnte irgendwo anders auf der Seite sein. Ich glaube, es steht da drauf. Vielleicht das Recht standardmäßig, du kannst sagen, zeig mir auf einem Pixel fünf, du kannst sehen, dass meine Ansichtsfensterhöhe auf diesem nicht ganz stimmt. Wir geben vielleicht nur 100% an und so füllt es das vollständig aus, oder vielleicht sogar kleiner , damit Sie wissen , dass Sie scrollen können. Manchmal kann es auch nützlich sein , dass man nur etwa 80 Prozent hat. Aber fertig, du bist fertig. Ich bin fertig. High-Five, schaffe es bis zum Ende. Du gewinnst einen Preis. Wir gewinnen beide Preise. Wir sind beide hier angekommen. Ich hoffe du hast etwas gelernt. Ich hatte das Gefühl, dass es ein wichtiger Teil des Kurses war , alles miteinander zu verbinden und zu sehen, wie sich die verschiedenen Teile verbinden. Und hoffentlich haben Sie auch gesehen , dass es den richtigen Weg gibt, Dinge zu tun. Und dann ist da noch das, es funktioniert einfach und es ist in Ordnung und Künstler, die in verschiedenen Browsern sind, und es wird dem Designer viel Druck geben. Es gibt also viele Dinge, die besonders bei der Namenslänge wichtig sind. Vor allem, wenn der Designer, ich weiß jetzt, wenn ich es entwerfe, dass ich nach längeren Titeln suchen sollte. Es ist also großartig, wenn Sie die Website entwerfen und entwickeln. Ja, das ist alles. dass du mitgefahren bist. Ich hoffe es hat euch gefallen und wir sehen uns bald in einem anderen Video. Tschüss. 116. Kursprojekt 08 - Ecommerce: Hey, es ist Hausaufgabenzeit, keine Hausaufgaben. Es ist eine unterhaltsame, praktische Anwendung Ihres Wissens. Was ich tun werde, ist, dass ich Sie dazu bringe, dasselbe zu tun wie in dem langen Video diesem Aufbau eines E-Commerce-Shops, Sie müssen nur einen Patienten machen. Ich muss alle drei machen. Es liegt an Ihnen, ob Sie Zeit Dual Three haben, aber das Minimum ist nur eine der Seiten. Wählen Sie die Startseite, die Produktsuchseite oder den Produktangebotspreis aus. Was meine ich überhaupt? Werfen wir einen Blick auf die aktuelle Seite. Ich erinnere mich, dass es 12 gibt und dann die eigentliche Produktseite, mach einfach eine davon. Ich möchte, dass du dich daran gewöhnst, den Schnitt hinzuzufügen und auf welcher Seite du auch immer die volle hast oder ist es ein Ticket darauf? Okay. Also schnapp dir das und lege es auf die Durchsuchen-Seite, wenn du das tun willst, oder auf die Homepage oder zwei oder drei Seiten, es wird eine Weile dauern, ungefähr eine Stunde, laut Dan. Also ja, es ist ein ziemlich großer Job. Und es ist nicht wieder so, Stilpunkte, okay, es geht nicht darum, wie schön es ist, wie großartig es ist, wie die Benutzeroberfläche aussieht. Es geht darum, die Funktionalität zu leben und den Arbeitsablauf zu üben. Das ist die Art von Ort, an dem mindestens eine der Seiten, alle drei, wenn Sie dazu bereit sind, Ihr eigenes Produkt oder Unternehmen verwenden. Okay. Also einfach ausgeschaltet wie Scott T einfach nicht, du kannst es einfach in ein bisschen Texte schreiben, die auf deinen eigenen Namen abkühlen. Wenn Sie den Figma- oder XD-Kurs gemacht haben, ist ein guter Zeitpunkt, um zu diesem Design zurückzukehren und Dinge daraus zu ziehen. Wenn Sie es nicht getan haben, machen Sie sich keine Sorgen, überlegen Sie sich einfach einen Markennamen. Wähle ein paar Farben, wähle ein Produkt aus, nimm ein paar Bilder von Unsplash, oder vielleicht hast du einige deiner eigenen Sachen. Okay. Ich habe drei Produkte. Sie müssen sie nicht mit einer CSV einbinden , laden Sie sie einfach ein. K, ich möchte, dass Sie die Warenkorbschaltfläche und die Schaltfläche In den Warenkorb haben. Es ist die große Praxis hier herauszufinden, wie man das Ding dazu bringt, das zu tun, was man will und einfach zu üben, das Hinzufügen in den Warenkorb dort irgendwie zum Laufen zu bringen . Sie benötigen also mindestens eine Variable , wie ich es Ihnen dort gezeigt habe Die unterschiedlichen Gewichte können unterschiedliche Farben haben, je nachdem, was Sie tun. Also drei Produkte mit mindestens einem Varianten-Breakpoint. Stellen Sie also sicher, dass es in all diesen Bereichen funktioniert. Ich möchte, dass du den Warenkorb personalisierst. Jetzt muss ich viel tun, denn einmal könntest du es zweimal auf die gleiche Weise mögen. Ich möchte, dass du hier reinkommen und das Styling darin tatsächlich ändern kannst . Okay, schau mal, ob du herausfinden kannst , wie du da reinkommst und es machst. Wählen Sie also mindestens eine Seite, aber drei Produkte in Ihrem Produktbereich Ihrer E-Commerce-Website aus. Es kann als kostenlose Website bleiben, es an allen Breakpoints an einem Warenkorb und dem Warenkorb-Button zum Laufen bringen und sehen, ob Sie diese Baumwolle auch anpassen können . Machen Sie also einen Screenshot Ihrer Seite und all der verschiedenen Breakpoints, okay, meine App wird geladen oder Sie laden möglicherweise ziemlich viele davon hoch. Wenn Sie alle drei Seiten und alle Arten von Fallbreak-Punkten erstellen, können Sie die mobile Landschaft überspringen. Man merkt, dass mir dieser Bruchpunkt nicht gefällt, weil er nicht da war. Aber ich bin mir sicher, dass es viele Leute gibt Websites vertikal und horizontal scrollen. Machen wir auch einen Screenshot des Warenkorbs und laden ihn hoch. Und ich würde es gerne sehen, besonders wenn Sie es in den sozialen Medien versenden. Wenn Sie so etwas wie Ihr eigenes Projekt machen, wenn Sie am Ende nur Scott T machen , versuchen Sie es mit Ihrem eigenen, weil es aufregend wäre und Sie es für Ihr Portfolio verwenden können. Ordnung, das ist dein Klassenprojekt. Genießen Sie, genießen Sie den Prozess, genießen Sie es, stecken zu bleiben Denn wenn man es irgendwann herausfindet, lernt das alles gut. Ordnung, das war's. Wir sehen uns im nächsten Video. 117. Was als nächstes nach deinem Webflow Essentials Kurs: Du hast es geschafft. Ich wusste, dass du es tust. tut nicht jeder. So gut gemacht. Du wirst ballaststoffreich, wir haben es geschafft. Fertig ist nicht einfach, hierher zu kommen. Und ich wollte nur sagen, Gute Anya, weil nicht jeder, alle anderen schauen gerne fern und du bist hier und machst den ganzen Weg Webflow. So gut gemacht und herzlichen Glückwunsch. Und was wir jetzt tun werden, ist nur darüber zu sprechen , was danach zu tun ist, wie meine Vorschläge. Vielleicht möchten Sie sich Nicks andere Kurse ansehen. Lassen Sie mich diese erklären. Könnten Sie uns sagen, dass wir dort meinen Gedankengang verloren haben? Lassen Sie uns über die verschiedenen Kurse sprechen , die Sie danach machen könnten. Denn wenn der Flow uns an einen Punkt bringt, habe ich während des gesamten Kurses ein paar Mal darüber gesprochen , wie wenn Sie es noch nicht getan haben, Figma oder XD sind ein guter Ort um vorher zu sein Webflow macht das Design dort. Ich habe also Kurse für beide. Schau dir meine Figma oder XD Essentials an. Ebenfalls. Eine weitere sehr praktische Sache, die Sie wissen sollten, wenn Sie Webflow verwenden, ist Code. Wir haben uns irgendwie damit beschäftigt und irgendwie etwas über Klassen und Festwagen und alle möglichen anderen Dinge gelernt . Es gibt einige grundlegende HTML- und CSS-Codes, die Sie sehr praktisch kennen sollten. Auch wenn Sie es nicht programmieren möchten. Es hilft einfach sehr beim Workflow. Also hat sie, ich habe etwas namens Web Design Essentials Kurs. Benutzt VS-Code als das Ding. Also ist es, es ist ziemlich gemütlich. Es ist nur Code, aber ich schaue mir das Intro an und ein paar andere Dinge sind, ich habe das Gefühl, dass ich es dort relativ gut aufgeschlüsselt habe. Also schau dir das an. Außerdem hat Malcolm, nicht der Entwickler, bringt Ihren Laptop mit, einen wirklich coolen Kurs über Rückenwind und Lawine, was eine Art CSS ist. Wenn du nicht untergehst, besonders ein bisschen mehr von der Coderoute kann deine eigenen Sachen machen und Rückenwind ist ein wirklich gutes CSS-Framework und genau wie Avalanche großartig für JavaScript ist, also schau dir diese an ebenso. Andere Kurse habe ich Lobes bekommen, Photoshop. Es gibt ein wesentliches und erweitertes für Photoshop Illustrator InDesign, nachdem Premiere Pro InDesign repariert wurde, das sage ich. Das sind also einige Kurse , mit denen Sie vielleicht weitermachen. Wenn Ihnen der Kurs gefallen hat, sollten Sie auch Ihren Freunden, Familie und Kollegen davon erzählen. Und auch wenn Sie die Fähigkeit und Einrichtung haben, hätte ich gerne einen Backlink zum Workflow-Kurs, Dans erstaunlichem Webflow-Kurs. Klicken Sie hier, um so etwas zu finden. Diese Dinge sind für mich und mein Unternehmen sehr wertvoll , mehr als die meisten Menschen wissen. Wenn du kannst, wäre das großartig. Auch ein großes Dankeschön an das Bring Your Laptop Team. Ich bin nur das gutaussehende Gesicht hier vorne. Und hinter den Kulissen passiert viel Arbeit mit meinen Redakteuren Jason Hummels und Taylor Coleman. Vielen Dank. Und auch ein großes Dankeschön an Stephen Butler und sein Team von Lehrassistenten, die uns im gesamten Q & A Thanks Team helfen . Zu diesem Zeitpunkt sind manchmal Leute, die neu sind, wenn Sie bereits ein Webdesigner sind, ein Webdesigner, okay? Oder Entwickler oder Ingenieur. Und Sie lernen gerade den Workflow als zusätzliches Tool. Einige von Ihnen werden jedoch etwas besorgter sein. Ein bisschen Betrüger-Syndrom wie beim MIT-Webdesigner. Jetzt ist es ganz oder ich gebe dir die Erlaubnis, neben deinem Namen Webdesigner zu schreiben. Sie verwenden Webflow und erstaunlich beliebtes Tool, um interaktive und zugängliche Websites zu erstellen. Also geh raus, sei stolz und nenne dich selbst Webdesigner. Ich gebe dir aber die Erlaubnis für alle. Gut gemacht. Wir haben es bis in die N's geschafft. Herzlichen Glückwunsch nochmal. Geh ab. B3. Ich weiß es nicht. Ich weiß nicht, wie man an diesen Kursen teilnimmt. Ja, ich winke und wir werden schwarz. Bist du bereit? Du winkst zu und fühlst dich, als hätten wir uns kennengelernt. Wir werden sehen, wir sehen uns in einem anderen Kurs. Ordnung. Tschüss. B mehr oder schreibe das Ende dieser Videos zu.