Vollständiges Webflow-Bootcamp: Vom Figma-Design über die Entwicklung zur Freiberuflichkeit

1. Einführung: Willkommen bei The Complete Webflow Bootcamp. Wollten Sie schon einmal moderne Websites erstellen, wussten aber nicht, wie man kodiert? Möchten Sie Ihr Webdesign in eine vollständig reaktionsfähige Website ohne Code umwandeln? Hallo, ich bin [unhörbar] und ich bin UI, UX Designer. Ich lehre auch UI UX Design und Webentwicklung an der Universität für Wirtschaft und Humanwissenschaften in Warschau. In diesem Kurs werde ich Ihnen zeigen, wie Sie jedes Design ohne Programmierung in eine voll funktionsfähige Website umwandeln können . Ja, hast du es richtig gehört? Ohne eine einzige Codezeile zu schreiben. Wenn Sie noch keine Erfahrung in der Entwicklung haben, sich keine Sorgen, denn dieser Kurs deckt alles ab, was Sie wissen müssen. Zuerst werden wir in die Grundlagen des Webdesigns und der Webentwicklung eintauchen und dann in Webflow einsteigen. Webflow ist ein leistungsfähiges Tool, mit dem Sie moderne Websites komplett visuell ohne Code erstellen können. Es wurde von bekannten Unternehmen wie Dell, Upwork, Zendesk und vielen anderen verwendet . Wir werden Webflow-Elemente, Styling, Animationen, Interaktionen und vieles mehr durchlaufen . Sobald Sie die Grundlagen von Webflow erfahren haben, beginnen wir mit dem Aufbau einer kompletten Website für eine Designagentur von Grund auf neu. Sie lernen, wie Sie Ihr Figma-Design in eine voll reaktionsfähige Website mit komplexen Animationen und Interaktionen umwandeln , die am besten auf jedem Gerät funktionieren , egal ob es sich um ein Handy, Tablet oder Computer handelt. Als Nächstes werde ich einige erweiterte Tipps und Tricks teilen, die Ihnen helfen, Ihre Webdesign-Fähigkeiten zu verbessern und ein erstklassiger Webentwickler zu werden. Im letzten Teil dieses Kurses werde ich Ihnen beibringen, wie Sie Ihr eigenes Webdesign-Geschäft als Freiberufler führen. Sie werden lernen, wie Sie Ihren ersten Kunden bekommen, wie Sie Ihre Arbeit preisen, wie Sie eine großartige Vorschläge vorbereiten und vieles mehr. Dieser Kurs richtet sich an Menschen, die völlig neu in der Webentwicklungswelt sind. Wenn Sie ein kompletter Anfänger oder ein UI-UX-Designer sind, der erstaunliche Websites ohne Code erstellen möchte, ist dieser Kurs genau das Richtige für Sie. Wenn Sie bereit sind, No-Code-Entwickler zu werden und atemberaubende Websites in kürzester Zeit zu erstellen, werde ich Sie in der Klasse sehen. 2. Einführung in Webflow: Was ist Webflow? Nun, Webflow ist ein modernes und leistungsfähiges Tool, mit dem Sie professionelle und benutzerdefinierte Design-Websites visuell ohne Code erstellen können. Versteh mich nicht falsch. Es ist kein anderer Template-basierter Website-Builder, wie Wix und Squarespace , der Ihre Kreativität in hohem Maße einschränkt. In der Tat ist es ein unglaublich leistungsfähiges Tool, mit dem Sie visuell programmieren können. Ja, du hast mich richtig gehört. Mit Webflow können wir tatsächlich benutzerdefinierte Websites visuell entwickeln. Es kommt nicht mit allen Einschränkungen dieser vorlagenbasierten Websites. Wenn es um die Webentwicklung geht, gibt es eine Vielzahl von Möglichkeiten, eine Website zu entwickeln. Wir können eine Website erstellen, indem wir benutzerdefinierten Code schreiben, ich meine HTML, CSS und JavaScript, wir können Template-basierte Plattformen wie Wix, Squarespace und WordPress verwenden , oder wir können Webflow verwenden. Wenn Sie nicht wissen, wie sie sich voneinander unterscheiden, sich keine Sorgen, lassen Sie mich mehr darüber erläutern. Die erste Option erfordert zu wissen, wie man kodiert. Sie müssen HTML, CSS und JavaScript lernen , um eine Website zu erstellen. Die zweite Option erfordert keine Codierung, und es gibt Ihnen einige vorgefertigte Vorlagen, mit denen Sie arbeiten können. Diese Option ist für jeden geeignet, der schnell eine einfache Website erstellen möchte, aber der Kompromiss ist die Einschränkung, mit der es kommt. Letzt können Sie Webflow verwenden, um eine Website von Grund auf neu zu entwickeln , ohne eine einzige Codezeile und vor allem ohne Einschränkungen zu schreiben . Aber wie ist das möglich? Nun, wenn Sie Webflow verwenden, codieren Sie tatsächlich eine Website von Grund auf, aber visuell. Aus diesem Grund ermöglicht Webflow Ihnen, professionelle und maßgeschneiderte Websites ohne Einschränkungen zu erstellen . 3. Umwelt des Webflow: Hey, in diesem Video werden wir über die Umgebung von Webflow sprechen. Ich werde Ihnen zeigen, wie Sie sich registrieren können und wie Sie sich anmelden können, welchen Plan Sie verwenden sollten und wie die gesamte Schnittstelle aussieht. Ohne weitere Umschweife, lasst uns anfangen. Um mit Webflow arbeiten zu können, müssen Sie sich zunächst registrieren. Wenn Sie hier oben auf die Schaltfläche „Erste Schritte“ klicken, können Sie sich mit Ihrem Gmail-Konto anmelden oder sich mit Ihrer E-Mail registrieren. Es liegt ganz an dir. Sobald Sie sich angemeldet haben, werden Sie zum Dashboard weitergeleitet. Um Webflow zu verwenden, können Sie verschiedene Optionen verwenden. Sie können das kostenlose Konto verwenden oder Sie können einen ihrer Pläne verwenden. Was ist der Unterschied? Lassen Sie mich Ihnen zeigen, welchen Plan Sie brauchen, um mit den Partituren fortzufahren. Grundsätzlich hat Webflow Standortpläne und Kontopläne. Wir werden später in die Details eintauchen. Aber für jetzt, Sie müssen wissen, dass Webflow bietet eine drei verschiedene Kontopläne. Der Starter, der kostenlos ist, lite, das ist $16 pro Monat, und Pro, das ist $35 pro Monat. Für die Partituren müssen Sie einen kostenlosen Plan verwenden. Mit dem Starterplan können Sie bis zu zwei Projekte erstellen. Es gibt einige Einschränkungen, aber es ist perfekt für die pädagogischen Zwecke und damit Sie sich an das Werkzeug und die Praxis gewöhnen. Wenn Sie später Projekte für Ihre Kunden erstellen möchten, können Sie ein Upgrade auf den Lite-Plan oder den Pro-Plan durchführen. Wir werden später darüber reden. Aber für jetzt, registrieren Sie sich einfach und verwenden Sie ein kostenloses Konto. Sobald Sie registriert sind, werden Sie auf diese Seite weitergeleitet. Dies ist das Dashboard. Sie können die Schaltfläche „Neues Projekt“ drücken und Sie werden diese Seite sehen. Es gibt einige kostenlose Vorlagen, die Sie verwenden können und es gibt auch einige kostenpflichtige Vorlagen. Für diesen Kurs werden wir jedoch keine dieser Vorlagen verwenden, da wir lernen werden, wie man eine Website von Grund auf neu erstellt. Wir müssen immer eine leere Seite erstellen. Sie müssen nur diese Option auswählen, die erste. Hier können Sie den Namen Ihres Projekts angeben. Standardmäßig gibt es Ihnen einen Standardnamen. Sie können jedoch auch einen genauen Namen für Ihr Projekt angeben. Nennen wir es neu. Ich werde auf „Projekt erstellen“ klicken. Da gehen wir. Hier ist der Designer. Eigentlich können wir die gesamte Schnittstelle in verschiedene Hauptteile aufteilen. Auf der linken Seite sehen Sie, dass sich die Symbolleiste befindet. Wir haben verschiedene Möglichkeiten. Dann haben wir den Navigator. Im Moment ist der Navigator ausgewählt. Wir haben die Add-Option, die einige Elemente enthält, über die wir später sprechen werden. Wir haben Symbole, wir haben wieder Navigator, Ich habe Ihnen bereits gezeigt. Wir haben Seiten, wir haben CMS Sammlungen, wir haben E-Commerce, und schließlich haben wir Vermögenswerte. Zu guter Letzt haben wir Einstellungen. An der Spitze haben wir verschiedene Optionen. Das sind unsere Haltepunkte, über die wir später sprechen werden. Aber wie Sie sehen können, haben wir Desktop, wir haben Tablet, wir haben mobile Landschaft, und wir haben mobile Porträt. Dies bestimmt im Grunde die Dimension unseres Bildschirms. Auf der rechten Seite hier können Sie sehen, dass wir verschiedene Möglichkeiten haben. Wir haben den Publish-Button , der so wichtig ist. Wir haben die Freigabe-Projekt-Schaltfläche, und wir haben einen Export-Code. Auf der rechten Seite haben wir das Style-Panel. Wir haben andere Einstellungen, wir haben den Stil-Manager, und wir haben die Registerkarte Interaktionen. Wir werden später über jede dieser Registerkarten spezifisch im Detail sprechen. Aber im Moment müssen Sie nur wissen, wie die Schnittstelle aussieht. In der Mitte haben wir die Leinwand. Dies ist im Grunde, wo wir unsere Website gestalten und unsere Website erstellen. Es ist eine leere Leinwand. Wie Sie sehen können, da ich dieses Körperelement hier ausgewählt habe, können Sie sehen, dass das Stilfenster jetzt einige Eigenschaften hat. Dies sind die CSS-Eigenschaften, die wir ändern und für unsere Projekte verwenden können. Jedes Projekt hat eine Projekteinstellungen. Wenn Sie in die obere linke Ecke gehen, sehen Sie dieses W- oder Webflow-Logo. Wenn Sie den Mauszeiger über dieses Logo bewegen, sehen Sie diesen Hamburger-Menü-Button. Wenn ich darauf klicke, haben wir drei Möglichkeiten. Wir haben Armaturenbrett. Wenn Sie darauf klicken, werden Sie zum Dashboard weitergeleitet. Wir haben Projekteinstellungen und wir haben Editor. Moment werden wir nicht über Editor sprechen , weil wir ein bestimmtes Video dafür haben. Aber im Moment werde ich Ihnen zeigen, wie die Projekteinstellungen aussehen. Wenn ich darauf klicke, werden wir zu den Projekteinstellungen weitergeleitet. Hier haben wir verschiedene Möglichkeiten. Wir haben allgemeine, wir können den Namen des Projekts angeben. Wir haben hier verschiedene Möglichkeiten, über die wir jetzt nicht sprechen werden. Wir haben Hosting, wir haben Editor, wir haben Abrechnung, SEO, Formulare, Fonds, Backups, Integrationen und benutzerdefinierten Code. Sobald wir mit der Erstellung unserer Projekte beginnen, werde ich Ihnen zeigen, wie Sie diese Optionen nacheinander nutzen können. Aber im Moment müssen Sie nur wissen, dass die Projekteinstellungen tatsächlich existieren. Es gibt einige Optionen, auf die Sie auch hier zugreifen können. Wenn ich auf „Designer“ klicke, werden wir zum Designer-Tool weitergeleitet, das diese Umgebung ist. Das ist alles für dieses Video. Wir sehen uns in der nächsten. 4. Einführung in HTML: Was passiert, wenn Sie eine Webseite öffnen? Wenn Sie eine Webseite besuchen, rendert der Browser tatsächlich den vom Programmierer geschriebenen Code und zeigt Ihnen das Ergebnis an. Wenn Sie zum Beispiel auf Ihre Lieblings-Website gehen und den Code selbst überprüfen, können Sie sehen, wie diese Website erstellt wird. Sie können auch die Inhalte dieser Website ändern, um etwas Spaß zu haben, aber lokal, weil sobald Sie die Seite aktualisieren, all Ihre harte Arbeit ist weg. Sie fragen sich vielleicht, warum reden wir darüber, sollten wir nicht Websites erstellen, ohne zu programmieren? Ja, wie ich versprochen habe, werden wir nicht einmal eine einzige Codezeile schreiben. Aber als Webdesigner und Webentwickler ist es entscheidend für Sie, zu verstehen, wie eine Webseite aufgebaut und strukturiert ist. Wenn es um die Webentwicklung geht, gibt es zwei Hauptkomponenten, die jede Webseite mitgeliefert wird, HTML und CSS. HTML steht für HyperText Markup Language, und es dreht sich alles um den Inhalt einer Webseite. Es sagt im Grunde dem Browser, was auf der Seite angezeigt werden soll; Überschriften, Bilder, Videos, Schaltflächen usw. Dies ist ein einfacher HTML-Code, und wie Sie sehen können , enthält es einige Elemente wie Titel , Körper, h1 und p. HTML-Tags. So versteht ein Browser, was er dem Benutzer anzeigen sollte, aber diese Seite ist langweilig. Denkst du das nicht? Nun, wir können jedes dieser Tags stylen, um den Inhalt interessanter aussehen zu lassen. Zurück in den Tag, wann immer wir unsere Webseiten stylen wollten, mussten wir jedes Tag eins nach dem anderen stylen. Wann immer wir unsere Stile ändern wollten, raten Sie was? Wir mussten jeden Inline-Stil eins nach dem anderen ändern. Es ist nicht sehr effizient. Deshalb verwenden wir CSS. CSS steht für Cascading Style Sheets. Es ermöglicht uns, unsere Stile einmal in einer separaten Datei zu erstellen und sie immer wieder in unserer HTML-Datei wiederzuverwenden. Es nimmt alle Informationen über Farbe, Positionierung, Größe, Ausrichtung, Topographie und vieles mehr, und es fügt sie in ein separates Stylesheet. Jetzt, wann immer wir Änderungen vornehmen möchten, machen wir es einmal und die Änderungen gelten für alle diese HTML-Tags gleichzeitig. Aber wie funktioniert Webflow? Erinnerst du dich, als ich sagte, wir werden programmieren, aber visuell meinte ich das wirklich? Lassen Sie mich Ihnen zeigen, wie es funktioniert. Hier ist der Designer und es gibt nichts unter Canvas. Wenn Sie zum Abschnitt Hinzufügen gehen, können wir einige Elemente finden. Dies sind die genauen HTML-Elemente, oder sagen wir HTML-Tags, über die wir gesprochen haben. Wir haben Abschnitt, div Blog, Überschrift, Absatz, und vieles mehr. Hier im Navigator haben wir die Körperelemente. Erinnern Sie sich an das body-Tag in der HTML-Datei? Hierdurch wird der Hauptinhalt der HTML-Datei definiert. Jede HTML-Datei hat ein body-Tag, und deshalb sehen Sie beim Erstellen einer Seite in Webflow immer das body-Element dort standardmäßig. Wir können andere HTML-Tags innerhalb des body-Tags hinzufügen. Wenn ich zum Abschnitt Hinzufügen gehe, kann ich ein Überschriftenelement per Drag & Drop in meinen Canvas ziehen. Sieh mal, was passiert. Die Überschrift befindet sich innerhalb des body-Elements. Anstatt eine Reihe von Codes zu schreiben, ziehen wir einfach produktionsfertigen Code, mit dem wir interagieren können. Was ist mit Styling? Nun, wenn ich diese Überschrift auswähle und zum Style-Panel auf der rechten Seite gehe, kann ich die CSS-Eigenschaften dieses bestimmten Elements einfach so ändern. Um zu beweisen, dass Sie die Seite tatsächlich von Grund auf neu codieren, kann ich auf diesen CSS-Vorschau-Button unten links klicken, um meinen CSS-Code live anzuzeigen. Wenn ich die Farbe dieser Überschrift ändere, sehen Sie, dass hier eine neue Eigenschaft hinzugefügt wurde. Jetzt hoffe ich, dass Sie ein besseres Verständnis dafür haben, wie eine Webseite funktioniert und was am wichtigsten ist, wie Webflow funktioniert. 5. Einführung in das Modell: Hier ist eine einfache Webseite, die einige HTML-Elemente wie Überschrift, Absatz, ein Bild hat. Das Markierungsmodell definiert tatsächlich, wie das Layout im Web funktioniert. Zum Beispiel wird hier jedes dieser HTML-Elemente als Box behandelt. Es ist wie eine Grenze auf jedem von ihnen. Alle diese Boxen können entsprechend den CSS-Eigenschaften positioniert und ausgerichtet werden, die wir ihnen geben. Aber warum funktioniert das Web so? Können wir nicht einfach eine Webseite wie eine PowerPoint-Folie erstellen? Nun, wir können, aber das Problem ist, wenn Sie eine Snide entwerfen, es ist nicht ansprechbar und Sie es für eine bestimmte Dimension entwerfen, aber es ist nicht der Fall für eine Webseite. Wenn wir eine Website erstellen, wollen wir sie immer reaktionsschnell machen, damit sie perfekt auf jedem Gerät angezeigt werden kann. Egal ob es sich um ein MacBook, iMac, iPhone handelt, du hast die Idee. Mit dem Box-Modell und CSS können wir responsive Web-Seiten machen. Eine weitere wichtige Sache über das Box-Modell ist, dass wir Boxen in andere Boxen legen können. Auf diese Weise können wir entscheiden, ob sie übereinander oder nebeneinander stapeln. Wir können sie auch so ausrichten, wie Sie wollen. Wenn wir den Abstand ändern wollten, können wir Ränder und Polsterung verwenden. Rand fügt Platz außerhalb der Box hinzu, während das Padding Platz in der Box hinzufügt. Werfen wir einen Blick auf ein Beispiel aus der realen Welt. Hier haben wir verschiedene Karten und innen haben wir verschiedene Elemente. In der Tat werden sie alle als Boxen betrachtet, dass sie entweder nebeneinander oder ineinander positioniert sind. Wir können die CSS-Eigenschaften jedes dieser Felder ändern , um das Styling und Layout jedes Elements zu steuern. Werfen wir einen Blick auf einige berühmte Websites. Wie Sie sehen können, werden alle diese Websites mit dem Box-Modell erstellt. Wenn Sie ein professioneller Webdesigner und Entwickler werden möchten, müssen Sie verstehen, wie das Box-Modell gründlich funktioniert. 6. Webflow: Wie Sie sich erinnern, sprachen wir über HTML-Elemente oder sagen wir HTML-Tags. In Webflow finden Sie sie im Abschnitt Hinzufügen. Auf der linken Seite, wenn Sie auf dieses „Plus“ -Symbol klicken, können Sie zum Abschnitt Hinzufügen gehen, und hier haben wir zwei verschiedene Registerkarten, Elemente und Layouts. Die Registerkarte „Layouts“ enthält tatsächlich einige vorgefertigte Layouts. Wir werden nicht mit diesen vorgefertigten Layouts in unseren Projekten arbeiten , da wir unser eigenes Layout erstellen werden, aber Sie müssen nur wissen, dass sie existieren. Wenn Sie jedoch auf die Registerkarte Elemente gehen, finden Sie hier alle HTML-Elemente. Wir haben verschiedene Abschnitte wie Layout, Basic, Topographie, CMS, Medien, Foren und Komponenten. Wir werden über jedes dieser Elemente speziell in den kommenden Videos sprechen, aber im Moment werde ich Ihnen zeigen, wie Sie diese Elemente verwenden können, wie Sie diese Elemente zu Ihrem Canvas hinzufügen können. Nun, um ein Element zu Ihrem Canvas hinzuzufügen, können Sie dieses bestimmte Element einfach hier ziehen und ablegen, genau so. Wie Sie sehen können, haben wir jetzt das Abschnittelement. Wir können alle unsere Elemente direkt im Navigator sehen. Wenn Sie den Navigator finden möchten, können Sie auf dieses Symbol klicken. Wenn ich zum Hinzufügen gehe und versuche, ein anderes Element per Drag & Drop zu ziehen. Zum Beispiel, ein Container, dort gehen wir, Sie können sehen, dass der Container direkt unter dem Abschnitt hinzugefügt wurde. Sie müssen verstehen, dass im Webdesign und der Webentwicklung die Hierarchie unserer Schichten wichtig ist. Zum Beispiel, hier, wenn wir einen Abschnitt haben, wie Sie sehen können, wird dieser Abschnitt rechts oben platziert. Deshalb sehen Sie, wenn Sie einen Blick auf den Canvas werfen, dass der Abschnitt über dem Container platziert wurde. Wenn ich den Container über dem Abschnitt legen möchte, kann ich ihn einfach ziehen und direkt über den Abschnitt ablegen und dort gehen wir. Sein Platz wurde geändert. Jedes Element hat sein spezifisches Symbol direkt neben seinem Namen. Zum Beispiel hier, wie Sie sehen können, hat der Container ein eindeutiges Symbol und ein Abschnitt hat ein eigenes eindeutiges Symbol. Es ist ein sehr guter Weg, um herauszufinden, welche Art von Element Sie verwenden. Wie Sie sich erinnern, als wir über das Box-Modell sprachen, erwähnte ich, dass Sie Boxen in andere Boxen legen können. Werfen wir einen Blick auf ein Beispiel. Wenn ich diesen Container auswähle, kann ich ihn per Drag & Drop ablegen und ihn innerhalb des Abschnitts platzieren. Da gehen wir hin. Nun ist dieser Container in diesem Abschnitt verschachtelt, und wie Sie sehen können, wurde er eingerückt. Ich kann ein anderes Element hinzufügen, zum Beispiel einen Div-Block in meinem Container, da gehen wir, und es wurde auch verschachtelt. Der Container ist jetzt das übergeordnete dieses Div-Blockelements und Div-Block ist das untergeordnete Element dieses Containers. Der Container ist das untergeordnete Element des Abschnitts und der Abschnitt ist das übergeordnete Element des Containers. So kann ich diese Elemente leicht zusammenbrechen und erweitern. Wenn Sie mehrere Abschnitte und mehrere Elemente haben, genau wie diese, und Sie alle gleichzeitig reduzieren möchten, können Sie auf dieses Symbol rechts oben klicken, und wenn ich darauf klicke, noch einmal, kann ich sie alle erweitern. Sie können den Navigator auch erweitern, indem Sie auf dieses Symbol klicken, und Sie können den Navigator einfach so anheften. In den kommenden Videos werden wir in Webflow-Elemente eintauchen. Wir sehen uns dann. 7. Div-Block: Was ist ein Div-Block? Nun, ein Div-Block ist die grundlegendste Box auf einer Webseite. Wenn Sie zum Abschnitt hinzufügen gehen, können Sie sehen, dass wir verschiedene Abschnitte hier haben. Wir haben Layout, Basic, Topographie usw. Jetzt unter dem Grundabschnitt haben wir verschiedene Elemente und das erste wird Div-Block genannt. Wenn ich versuche, es in meine Leinwand zu ziehen und zu legen, können Sie sehen, dass der Div-Block meiner Leinwand hier hinzugefügt wurde und er die gesamte Breite der Leinwand einnimmt. Ein Div-Block wird tatsächlich basierend auf dem Inhalt im Inneren dimensioniert. Aber hier, wie Sie sehen können, hat es eine Grenze erstellt, und es scheint, dass es einige im Inneren gibt. Wenn ich jedoch eine Vorschau darauf ansehe, wenn ich nur auf dieses i-Symbol klicke, können wir sehen, dass nichts hier ist. Eigentlich ist es eine leere Kiste. Es ist eine dynamische Box, denn wenn Sie mehr und mehr Elemente hinzufügen, wird seine Größe entsprechend geändert. Probieren wir es mal aus. Ich werde voran gehen und versuchen, eine Überschrift in diesen Div-Block hinzuzufügen. Genau so. werde ich voran gehen und einen Absatz hinzufügen. Da gehen wir hin. Lassen Sie mich voran und fügen Sie eine Schaltfläche hinzu. Cool. Nun, diese drei Elemente befinden sich in diesem Div-Block. Wie Sie sehen können, wurde die Div-Blockgröße entsprechend geändert. Wenn ich eines dieser Elemente entferne, können Sie sehen, dass die Div-Blockgröße erneut geändert wurde. Ein Div-Block kann im Allgemeinen alles sein. Es könnte ein Bild sein, es könnte eine Linie sein. Aber die meiste Zeit verwenden wir einen Div-Block, um Elemente auszurichten und Elemente zusammenzufassen. Zum Beispiel, hier gruppieren wir diese beiden Elemente zusammen. Wann immer wir zum Beispiel den Rand dieser speziellen Div-Block ändern wollen , können wir einfach zu diesem Einfügen Abschnitt auf der Seitenwand hier gehen. Zum Beispiel kann ich den oberen Rand auf 70 setzen. Da gehen wir hin. Beide Elemente wurden verschoben, da sie innerhalb dieses Div-Blocks gruppiert sind. Obwohl ein Div-Block standardmäßig die gesamte Breite der Leinwand einnimmt, können wir ihm auch eine bestimmte Breite und Höhe geben. Wenn Sie hier den Größenabschnitt im Stilfenster aufrufen, können Sie eine bestimmte Breite angeben, z. B. 400 Pixel. Da gehen wir hin. Wir können auch die Höhe ändern. Wir können es auf 300 Pixel setzen, und die Höhe des Div-Blocks wurde geändert. Jetzt hat dieser Div-Block eine feste Breite und Höhe. Abhängig von unseren Bedürfnissen können wir unseren Div-Blöcken eine spezifische Breite und Höhe geben. Wie ich bereits erwähnt habe, kann ein Div-Block alles sein, zum Beispiel ein Bild. Lassen Sie mich voran gehen und Drag & Drop und andere Div-Block hier direkt unter diesem Absatz. Nehmen wir an, wir wollen hier ein Bild hinzufügen, zum Beispiel wollen wir dieses Div ein Bild blockieren. Wir können zum Schieberegler gehen, wir können nach unten scrollen. Wenn wir zum Hintergrundabschnitt gehen. Hier haben wir Bild und Farbverlauf. Wenn ich von hier auf diesen Plus-Button klicke, kann ich auf Bild auswählen klicken und auf alle meine Assets zugreifen. Verwenden wir zum Beispiel dieses Bild. Moment werden wir nicht über all diese Einstellungen sprechen, aber lassen Sie mich die Position auf Mitte und Farbe ändern. Da gehen wir hin. Wie Sie sehen können, haben wir diesen Div-Block, aber dieser Div-Block hat tatsächlich einen Bildhintergrund. Wenn ich es größer machen möchte, kann ich die Größe, zum Beispiel die Höhe auf Pixel einstellen . Natürlich werden wir über all diese Eigenschaften sprechen. Eigentlich sind dies CSS-Eigenschaften in den kommenden Videos, aber im Moment müssen wir uns nur auf die Web-Flows Elemente konzentrieren. Wir müssen verstehen, wie sie funktionieren und warum wir sie brauchen, um eine professionelle und moderne Website zu erstellen. 8. Abschnitt: Was ist ein Abschnitt? In diesem Video werden wir über Sektionen sprechen. Wenn Sie zum Abschnitt Hinzufügen gehen hier, unter dem Layout, können Sie sehen, dass wir verschiedene Elemente haben. Wir haben Abschnitt, Container, Raster und Spalten. Hier gehe ich voran und füge einen Abschnitt in meine Leinwand ein. Lassen Sie mich Drag & Drop einen Abschnitt hier, und da gehen wir. Der Abschnitt wurde hinzugefügt. Nun, ein Abschnitt nimmt tatsächlich die gesamte Breite des Browserfensters ein, aber warte, ist es nicht wie ein Div-Block? Ja, es fungiert tatsächlich als Div-Block, jedoch mit einem Unterschied. Der einzige Unterschied zwischen einem Abschnitt und einem Div-Block ist tatsächlich die Bedeutung des Inhalts, den Sie in diese Elemente einfügen. Wenn wir einen Abschnitt verwenden, sollte der Inhalt im Inneren logisch verbunden sein. Wenn wir zum Beispiel eine Website entwerfen, haben wir möglicherweise verschiedene Abschnitte, den Heldenbereich, den Kundenbereich, den Testimonial Abschnitt und jeder Abschnitt enthält einige Inhalte. Zum Beispiel ein Titel, ein Untertitel, eine Schaltfläche. Wenn wir all diese Inhalte gruppieren, legen wir sie in einen Abschnitt, also gruppieren wir sie mit einem Abschnitt, nicht einem Div-Block. Für alles andere können wir einen Div-Block verwenden. Zum Beispiel, wenn wir einige Elemente ausrichten wollen, wenn wir einige Elemente gruppieren, um sie zu stylen. Dies ist im Grunde der Hauptunterschied zwischen einem Div-Block und einem Abschnitt. Wenn wir anfangen, unsere Projekte zu entwerfen, werden Sie wirklich verstehen, was der Unterschied zwischen einem Abschnitt und einem Div-Block ist. Aber jetzt möchte ich Ihnen sagen, dass wir Abschnitte verwenden, um unsere Websites zu strukturieren. Grundsätzlich für jede Website, für jedes Projekt, was Sie tun müssen, ist ein Abschnitt direkt nach dem Körperelement hinzuzufügen. Hier müssen wir einen Abschnitt hinzufügen und wir können unseren Inhalt und unsere Div-Blöcke in diesem Abschnitt hinzufügen . Versuchen wir es mal. Ich werde diesen Div-Block nehmen. Da dieser Div-Block eine bestimmte Höhe hat, lassen Sie mich ihn auf auto setzen. Ich werde die Höhe auf Auto einstellen. Dann werde ich es per Drag & Drop innerhalb des Abschnitts. Da gehen wir. Die Größe eines Abschnitts basiert auf dem Inhalt im Inneren. Um es besser zu verstehen, wähle ich diesen Abschnitt aus und gehe zum Seitenfeld auf der rechten Seite und lasse mich die Hintergrundfarbe ändern. Ich gehe zum Hintergrund und ist standardmäßig auf transparent eingestellt. Ich werde es auf etwas anderes setzen. Zum Beispiel, dieses lila. Jetzt können Sie sehen, dass die Höhe dieses Abschnitts durch den Inhalt im Inneren bestimmt wird. Wenn ich diesen Div-Block, dieses Bild, wähle und ändere seine Höhe auf 200 Pixel, können Sie sehen, dass die Höhe dieses Abschnitts auch geändert wurde. Sie sollten immer bedenken, dass die Höhe des Abschnitts basierend auf dem Inhalt im Inneren bestimmt wird. Wie ich bereits erwähnt habe, nimmt ein Abschnitt standardmäßig die gesamte Breite der Leinwand auf, oder sagen wir das Browserfenster. können wir jedoch ändern. Wir können diese Voreinstellungen und diese Eigenschaften überschreiben. Wenn Sie hier auf die Größe gehen, lassen Sie mich Ihnen zeigen, ich die Breite auf 500 Pixel setzen kann, zum Beispiel, einfach so. Sie können alle diese Eigenschaften einfach außer Kraft setzen. Wir werden später über diese Eigenschaften sprechen, aber im Moment müssen Sie nur wissen, dass wir unsere Websites immer so strukturieren. Nach Abschnitt setzen wir normalerweise einen Container und dann werden wir unseren Inhalt in einem Container hinzufügen. Wir werden im kommenden Video über den Container sprechen. 9. Container: Was ist ein Container? In diesem Video werden wir über Container sprechen. Wenn ich wie gewohnt zum Abschnitt Hinzufügen gehe, kann ich zum Layout-Abschnitt gehen und von hier direkt neben dem Abschnitt kann ich Container finden. Wie ich im vorherigen Video erwähnt habe, wir, unsere Website in einer bestimmten Weise zu strukturieren, wenn wir eine Website entwerfen versuchenwir, unsere Website in einer bestimmten Weise zu strukturieren, wenn wir eine Website entwerfen. Eigentlich versuchen wir, alles organisiert zu halten. Deshalb haben wir hier all diese verschiedenen Elemente. Grundsätzlich sind Abschnitte und Container nur div Blöcke mit einigen vordefinierten Stilen. Beispielsweise hat ein Container eine bestimmte Breite. Wenn ich versuche, einen Container in meine Leinwand zu ziehen und zu legen, dann gehen wir. Wie Sie sehen können, ist es nur ein einfaches div, das eine maximale Breite hat. Standardmäßig hat sie eine bestimmte Breite von 940 Pixeln. Wenn ich alles organisiert halten möchte, kann ich diesen div-Block nehmen, ich werde die Breite auf Auto genau so einstellen. Wie Sie sehen können, nimmt dieser div-Block, da die Breite und Höhe auf auto eingestellt sind, die gesamte Breite der Seite. Wenn ich alles ordentlich in der Mitte organisieren möchte, kann ich dieses div wie auswählen und es ziehen und in meinen Container ablegen. Da gehen wir. Jetzt wird alles in diesem Container platziert, der eine Standardbreite hat. Natürlich können Sie voran gehen und seine Breite ändern, wenn Sie möchten. Zum Beispiel können Sie bei größeren Bildschirmen zur Größeneigenschaft gehen, zum Größenabschnitt hier und die maximale Breite auf 1100 festlegen. Genau so. Es liegt ganz an Ihnen, wie Sie sie verwenden möchten. Sie können sich entscheiden, keinen Container zu verwenden und einfach einen div-Block zu verwenden und eine bestimmte Breite dafür festzulegen. Das ist völlig in Ordnung. Sie müssen nur wissen, dass dies nur vorgefertigte Elemente sind, um unser Leben viel einfacher zu machen. Ich hoffe, jetzt kennen Sie den wirklichen Unterschied zwischen einem Abschnitt, Container und einem div-Block. Sie sind im Grunde alle gleich. Sie sind Variationen eines div-Blocks mit vordefinierten Stilen. Wie ich im vorherigen Video erwähnt habe, wann immer wir eine Website entwerfen wollen , wir zuerst einen Abschnitt, dann verwenden wir einen Container und innen werden wir unsere Elemente setzen. Dies ist der beste Weg, um eine Website zu organisieren und zu strukturieren. Wenn wir mehr Abschnitte erstellen müssen, können wir hier einfach weitere Abschnitte per Drag & Drop ablegen, oder wir können einfach unsere Abschnitte kopieren und einfügen. 10. Raster: Was ist ein Gitter? In diesem Video werden wir über CSS-Gitter sprechen. Wenn Sie zum Abschnitt Hinzufügen unter der Kategorie Layout gehen, können Sie sehen, dass wir ein Rasterelement haben. Es ist eigentlich ein CSS-Raster. Es ist kein HTML-Tag, weil wir im Grunde alle Blöcke in ein Raster verwandeln können. Wir werden darüber in den kommenden Videos sprechen, aber vorerst gehen wir weiter und ziehen Sie diese Rasterelemente in unsere Leinwand. Da gehen wir. Hier habe ich einen Abschnitt, und dann habe ich einen Container. In diesem Container werde ich mein Gitter fallen lassen. Wie Sie sehen können, ist ein Gitter nichts anderes als ein Leitfaden. Grids helfen uns, unsere Inhalte dynamisch zu organisieren. Wenn wir zum Beispiel mehrere Bilder haben , die wir dynamisch organisieren wollen, oder sogar wenn wir einige Div-Blöcke haben, die wir dynamisch und ordentlich organisieren möchten, können wir Gitter verwenden. Sie müssen verstehen, dass ein Raster als Orientierungshilfe dient, also ist es wie ein Platzhalter für unsere Inhalte. Wie Sie jetzt sehen können, sind wir im Bearbeitungsmodus. Hier haben wir standardmäßig zwei Spalten und zwei Zeilen, und wenn Sie einen Blick auf die rechte Seite werfen, können Sie sehen, dass wir hier die Einstellungen unseres Rasters ändern können. Zum Beispiel können wir den Rinnenbetrag ändern, der den Abstand zwischen Zeilen und Spalten darstellt. Standardmäßig ist es auf 16 x 16 Pixel eingestellt. Sie können es auf jeden Betrag einstellen, den Sie wollen. Sie können es auch hier manuell einfach so ändern, und wenn Sie mehr Spalten und mehr Zeilen zu Ihrem Raster hinzufügen möchten, können Sie einfach auf diesen Plus-Button klicken, um weitere Spalten hinzuzufügen, und wenn Sie weitere Zeilen hinzufügen möchten, Sie können hier auf diesen Plus-Button klicken. Alternativ können Sie diese Plus-Taste direkt in den Einstellungen drücken , um eine neue Spalte hinzuzufügen, und für Zeilen können Sie auf diesen Plus-Button klicken. Nachdem Sie Ihr Raster erstellt haben, müssen Sie den Bearbeitungsmodus beenden. Um dies zu tun, können Sie auf der Tastatur Escape drücken oder klicken Sie auf diesen blauen Fertigen Button unten hier. Wie Sie sehen können, habe ich bereits vier einfache Div-Blöcke erstellt, und jeder von ihnen enthält eine Überschrift, einen Absatz und eine Schaltfläche. Was wir tun werden, ist Drag & Drop diese Div-Blöcke in unser Raster, aber zuerst, mal sehen, wie viele Blöcke wir haben. Wir haben eigentlich vier verschiedene Div-Blöcke, daher werde ich meine Rasterelemente hier auswählen und dann werde ich auf diesen roten oder rosa Button klicken. Da wir vier verschiedene Div-Blöcke haben, werde ich einige dieser Spalten und Zeilen entfernen. Lassen Sie uns zwei dieser Spalten und zwei dieser Zeilen entfernen. Jetzt haben wir ein zwei-mal-zwei-Gitter; wir haben zwei Spalten und zwei Reihen. Das ist perfekt. Jetzt werde ich die Lücke oder die Rinne anpassen, also lassen Sie es für Spalten und Zeilen auf 20 setzen. Ich werde auf diese Schaltfläche „Fertig“ klicken, und das ist alles. Nun, was wir tun müssen, ist unseren Div-Block auszuwählen, ziehen Sie ihn und legen Sie ihn in das Raster, genau so. Eine Sache, die über Raster zu erwähnen ist, dass, wenn Sie Inhalte zu Ihrem Raster hinzufügen, der Inhalt die nächste verfügbare Zelle im Raster nimmt. Wie Sie sehen können, nahm der erste Div-Block die erste Zelle, und jetzt, wenn ich diesen Div-Block auswähle und ziehen und in das Raster ziehen, können wir sehen, dass es die nächste verfügbare Zelle nahm. Natürlich, wenn ich ihre Reihenfolge im Navigator ändere, können Sie sehen, dass sich ihr Platz ändert, genau so. Nun lasst uns dasselbe für die verbleibenden zwei Div-Blöcke tun. Ich wähle sie aus und ziehe sie hierher. Da gehen wir. Lassen Sie uns dasselbe für den letzten Div-Block tun. Unsere Div-Blöcke befinden sich in unserem Raster. Wenn ich jedoch mein Raster auswähle und in den Bearbeitungsmodus gehe, können Sie sehen, dass diese Zellen größer sind, und diese Div-Blöcke nehmen nicht die gesamte Breite jeder Zelle ein. Das liegt daran, dass ich diesen Div-Blöcken eine feste Breite gegeben habe. Wenn ich also Inhalt auswähle und die Breite von 400 auf Auto ändere, sehen Sie, was passiert. Jetzt nimmt es die ganze Breite dieser Zelle ein, und das ist genau das, was wir wollen. Wenn Sie die Höhe Ihres Rasters ändern möchten, können Sie Ihr Raster auswählen und die Höhe beispielsweise auf 700 Pixel einstellen . Oder ich kann es auf 500 Pixel setzen. Lassen Sie mich diesen Abschnitt für eine Sekunde entfernen. Eines der wichtigsten Dinge über Gitter ist, dass sie standardmäßig reagieren. Werfen wir einen Blick. Wenn ich hier auf die Schaltfläche Vorschau klicke und versuche, die Dimension meines Bildschirms zu ändern, können Sie sehen, dass diese Inhalte dynamisch sind. Sie reagieren standardmäßig, da wir ein Gitter verwendet haben. Deshalb sind Gitter in Bezug auf die Reaktionsfähigkeit so leistungsstark. Wenn ich zum Desktop-Basispunkt gehe und ich etwas Padding hinzufügen möchte, kann ich den Container auswählen, und dann kann ich hier etwas Padding einstellen. Natürlich werden wir später über all diese Eigenschaften sprechen, aber ich möchte Ihnen nur zeigen, wie die Gitter tatsächlich in Bezug auf die Reaktionsfähigkeit funktionieren . Da gehen wir. Aber was, wenn ich das Layout dieses Rasters ändern möchte? Das ist so einfach. Ich kann mein Raster auswählen, ich kann in den Bearbeitungsmodus gehen. Von hier aus kann ich die Anzahl der Zeilen und Spalten ändern. Nehmen wir an, ich möchte diese Inhalte vertikal stapeln. Ich brauche nur eine Spalte. Ich werde diese Spalte entfernen, und ich werde zwei weitere Zeilen hinzufügen und „Fertig“ drücken und es ist fertig. Wie Sie sehen können, haben wir jetzt vier verschiedene Reihen, die übereinander platziert werden und sie sind dynamisch. Wenn ich versuche, seine Reaktionsfähigkeit zu überprüfen, können Sie sehen, dass sie auf allen Geräten immer noch dynamisch sind. Aber was, wenn Sie wollen, dass einer dieser Div-Blöcke mehr als eine Zelle nimmt? können wir auch tun. Fügen wir eine Spalte hinzu und entfernen Sie diese zusätzlichen zwei Zeilen, einfach so. Ich werde Überschrift 4 entfernen, diesen letzten Div-Block. Angenommen, Sie möchten Überschrift 3 nehmen, diesen letzten Div-Block, und Sie wollten die letzten beiden Zellen nehmen? Um dies zu tun, können Sie diesen Griff direkt an der unteren Ecke verwenden. Wenn ich mit der linken Maustaste darauf klicken und Drag & Drop, da gehen wir, jetzt könnte es leicht den Inhalt ausgeben, um mehr Zellen aufzunehmen. Die gute Nachricht ist, es ist immer noch dynamisch und es ist immer noch ansprechbar. Werfen wir einen Blick. Manchmal müssen wir unsere Inhalte möglicherweise manuell platzieren. Wie Sie sich erinnern, habe ich erwähnt, dass, wenn Sie Inhalte zu Ihrem Raster hinzufügen, standardmäßig die nächste verfügbare Zelle einnimmt. Aber was ist, wenn ich sie manuell platzieren möchte? Nun, das können wir tun. Lassen Sie mich die Operation rückgängig machen. Was ist, wenn ich diesen letzten Div-Block hier in diese letzte Zelle legen will? Nun, wir können das tun. Zuerst müssen wir diesen Div-Block auswählen, und wenn wir zu den Grid Child Einstellungen auf der rechten Seite gehen, können Sie sehen, dass standardmäßig seine Position auf auto eingestellt ist. Wenn ich es auf manuell setze, kann ich es einfach ziehen und hier ablegen. Jetzt könnten wir unsere Inhalte ganz einfach manuell positionieren. Ich hoffe, jetzt haben Sie ein besseres Verständnis von Gittern. Wir werden mit Rastern arbeiten, wenn wir anfangen unsere Projekte zu erstellen. So sehen wir uns dann. 11. Liste: Es gibt Zeiten, in denen wir einige Elemente in unserem Projekt auflisten möchten, egal ob wir eine Liste von Bildern oder eine Liste von Elementen haben, das Listenelement könnte so hilfreich sein. Wenn Sie zum Abschnitt Hinzufügen unter der Basiskategorie gehen, finden Sie eine Liste. Wenn ich die Liste per Drag & Drop in meinen Container ziehe, können Sie sehen, dass sie standardmäßig drei Listenelemente enthält. Wie Sie sehen können, wird dieses Fenster „Listeneinstellungen“ angezeigt. Wir haben zwei Arten von Listen. Wir haben die ungeordnete Liste und die geordnete Liste. Der Unterschied ist das. Wenn Sie eine ungeordnete Liste verwenden, gibt es keine Nummer. Wenn Sie es auf bestellt setzen, können Sie sehen, dass wir Zahlen haben. Lassen Sie mich diese Liste auswählen und die Farbe dieses Textes in Weiß ändern , damit Sie besser sehen können. Perfektes. Wenn ich es auf ungeordnete Stellen setze, können Sie sehen, dass wir nur Aufzählungspunkte haben. In Bezug auf das Styling haben wir überhaupt keine Kugeln und Kugeln. Lassen Sie mich auf das erste Listenelement hier doppelklicken, um etwas hinzuzufügen. Lasst uns Elemente schreiben. Für den zweiten werde ich etwas anderes schreiben, schreiben wir Webdesign. Für die letzte, werde ich Web-Entwicklung schreiben. Großartig. Jetzt haben wir drei verschiedene Listenelemente und wenn ich mehr Listenelemente hinzufügen möchte, kann ich es einfach kopieren und einfügen mit Befehl C und Befehl V oder Control C und Control V Alternativ können Sie zum Abschnitt Hinzufügen gehen und unter der Kategorie Basic, Sie können sehen, dass wir ein separates Element für das Listenelement haben. Sie können ein Listenelement nur in einer Liste per Drag & Drop verschieben, genau so. Aber können wir tatsächlich einige Bilder auflisten? Natürlich können wir das. Lassen Sie mich es Ihnen zeigen. Ich kann zu den Assets gehen und ich kann ein Bild hier per Drag & Drop ablegen. Da gehen wir. Ich werde die Breite auf 300 Pixel verringern . Egal, welche Art von Elementen Sie haben, Sie können sie immer auflisten. Wenn Sie die Listeneinstellungen öffnen möchten, können Sie Ihr Listenelement im Navigator auswählen und direkt neben dem Listennamen auf dieses Symbol „Einstellungen“ klicken. Da gehen wir. Alternativ können Sie Ihre Listenelemente auswählen und Sie können direkt neben dem Stilfenster direkt hier zu den Elementeinstellungen wechseln, und wir haben die Listeneinstellungen. 12. Link: Was ist ein Link-Block? Nun, ein Link-Block ist ein anklickbarer Container. Alle Inhalte, die Sie in einen Linkblock einfügen, werden anklickbar. Es ist sehr nützlich, da wir manchmal Benutzer auf eine andere Seite oder einen anderen Bereich unserer Website oder sogar auf eine andere Website umleiten müssen Benutzer auf eine andere Seite oder einen anderen Bereich unserer Website . Wir können dies tun, indem wir einen Link-Block verwenden. Wenn Sie zum Abschnitt Hinzufügen unter dem Grund gehen, können Sie sehen, dass wir diesen Link-Block haben. Lassen Sie mich einen Link-Block direkt in diesen Container ziehen und wie Sie sehen können, ist es nur ein div-Block, aber es ist anklickbar. Dieser Verknüpfungsblock hat einige Einstellungen. Standardmäßig können Sie die URL sehen. Hier können Sie die URL angeben, zu der Sie den Benutzer umleiten möchten. Zum Beispiel kann ich hier google.com schreiben. Ich kann auf die Seite gehen, wenn wir mehr Seiten für unsere Website erstellen, zum Beispiel Kontaktseite, Registrierungsseite, etc können wir unsere Seite hier wählen. Wenn wir verschiedene Abschnitte auf unserer Website erstellen, können wir diesen Seitenbereich verwenden. Zum Beispiel, wenn wir eine [unhörbar] erstellen, haben wir möglicherweise einige Menüs. Wenn der Benutzer auf eines dieser Menüs klickt, sollte der Benutzer zu einem bestimmten Abschnitt unserer Lernseite weitergeleitet werden. Wir können hier einen Abschnitt auswählen. Wir werden später über all diese Einstellungen sprechen, wenn wir sie tatsächlich verwenden, können Sie eine E-Mail-Adresse, den Betreff dieser E-Mail festlegen, Sie können eine Telefonnummer festlegen und schließlich können Sie sogar einen Anhang auswählen. Sie müssen sich daran erinnern, dass Sie einen Linkblock für alles verwenden können. Sie können es für Karten verwenden, Sie können es für bestimmte Elemente, ein Symbol, alles verwenden. Lassen Sie mich voran gehen und fügen Sie hier eine Überschrift hinzu, nur um Ihnen zu zeigen, wie es funktioniert. Wie Sie sehen können, sobald ich die Überschrift hier in diesen Linkblock hinzufüge, wurde ihr Stil geändert, weil es jetzt ein Link ist. Ich kann diese Einstellungen manuell überschreiben. Zum Beispiel kann ich unter dem Typografie-Abschnitt auf der Seitenwand seine Deklaration auf keine setzen. Lassen Sie mich seine Farbe in Weiß ändern, genau so. Wenn ich eine Vorschau unseres Projekts sehe, können Sie jetzt sehen, dass, sobald ich den Mauszeiger über diese Überschrift führe, der Cursor in einen Zeiger geändert wurde. Nun, wenn Sie den Zeiger nicht sehen können, liegt es wahrscheinlich an Ihrem Browser. Sie können den Cache Ihres Browsers löschen, oder Sie können ihn in einem anderen Browser ausprobieren. Aber ein Verknüpfungsblock ändert Ihren Cursor automatisch in einen Zeiger. Wenn ich darauf klicke, passiert nichts, weil wir dafür keinen Link angegeben haben. Wenn ich diesen Linkblock auswähle und die URL ändere , setzen wir ihn zum Beispiel auf google.com. Nun, wenn ich eine Vorschau darauf und wenn ich darauf klicke, werde ich zu Google weitergeleitet. Kurz gesagt, ein Link-Block ist ein anklickbarer div-Block. Nun, es gibt Zeiten, in denen wir unsere div-Blöcke in einen Link-Block konvertieren möchten , anstatt einen Link-Block von Grund auf neu zu erstellen. Natürlich können wir voran gehen und einen Linkblock ziehen und dort einen Div-Block hinzufügen und unsere Karten und Elemente entwerfen. Aber manchmal entwerfen wir zuerst unsere Karte oder unsere Elemente, und dann müssen wir sie möglicherweise in einen Linkblock konvertieren. Wie können wir das tun? Wenn wir unseren div Block wählen, zum Beispiel hier, diese Karte, und wenn Sie mit der rechten Maustaste auf den Namen rechts unter Leinwand klicken, haben wir viele Optionen. Die zweite sagt konvertieren in Link-Block. Wenn ich darauf klicke, da gehen wir. Jetzt ist das Styling dieser Elemente, die untergeordneten Elemente geändert worden, weil es jetzt eine Verknüpfung ist. Natürlich kann ich diese Einstellungen überschreiben, aber ich werde das nicht tun, weil ich Ihnen nur zeigen möchte, wie der Linkblock funktioniert. Wenn ich eine Vorschau auf mein Projekt, jetzt können Sie sehen, dass diese Karte einfach so anklickbar ist. Die anderen Karten sind jedoch nicht, weil die anderen Karten nur einfache div-Blöcke sind. 13. Button: Fast alle Websites verwenden Schaltflächen. Buttons sind so wichtig, wenn es um Webdesign und Webentwicklung geht, weil sie den Benutzern erlauben, Maßnahmen zu ergreifen. Sie werden in der Regel für unseren Aufruf zum Handeln verwendet. Wenn Sie zum Abschnitt Hinzufügen gehen, können wir sehen, dass wir die Schaltfläche unter dem Grund haben. Eigentlich ist eine Schaltfläche nichts anderes als ein Link-Block. Es ist nur eine anklickbare Markierungen mit einem Textblock im Inneren. Wenn ich diese Schaltfläche per Drag & Drop in meine Karte, können Sie sehen, dass es einige Standard-Stylings hat, und ich kann ihm eine URL geben, genau wie ein Link wie wir alle diese Einstellungen haben, die wir bereits besprochen haben. Aber für jetzt, lassen Sie uns vorgehen und eine Vorschau darauf. Wie Sie sehen können, wurde der Cursor geändert, da es sich tatsächlich um einen Linkblock handelt. Wir können alle Eigenschaften dieses Schaltflächenelements ändern. Zum Beispiel können wir seine Farbe hier im Stilfenster ändern. Wenn Sie darauf doppelklicken, können Sie den Text ändern. Lassen Sie uns Anmelden einfach so schreiben, aber manchmal müssen wir möglicherweise eine benutzerdefinierte Schaltfläche erstellen. Wenn Sie zum Beispiel ein Symbol zu dieser Schaltfläche hinzufügen möchten, können wir das button-Element nicht verwenden. Wir müssen einen Linkblock verwenden, und dann müssen wir einen Textblock innerhalb und auch ein Bild hinzufügen. So können Sie eine benutzerdefinierte Schaltfläche erstellen, und wir werden später darüber sprechen. Das button-Element hat unterschiedliche Zustände. Wir werden im Detail über Zustände sprechen, aber jetzt müssen Sie nur wissen, dass jede Schaltfläche einige Zustände hat. Es hat keine, schweben, gedrückt, fokussiert und besucht. Wenn Sie zum Abschnitt Selektor gehen, hier ist, wo wir unsere CSS-Klassen angeben, über die wir später sprechen werden, und wenn Sie auf diesen Abwärtspfeil klicken, können Sie alle Zustände Ihrer Schaltfläche sehen. Wenn ich zum Hover gehe, kann ich das Styling einfach ändern, einfach so. Wenn ich nun in den Status „Keine“ gehe und diese Schaltfläche in der Vorschau zeige, und ich den Mauszeiger über, können Sie sehen, dass der Hover-Zustand ein anderes Styling hat. Wenn wir in die Styling- und CSS-Eigenschaften eintauchen, werden wir über all diese Details sprechen. 14. Typografie: Wenn es um Webdesign und Webentwicklung geht, spielt Typografie eine wichtige Rolle. Ich kann mir nicht vorstellen, eine Website zu gestalten, ohne Text zu verwenden, oder? In diesem Video werden wir über Typografie sprechen. Wenn Sie zum Abschnitt Hinzufügen unter der Kategorie Typografie gehen, können Sie sehen, dass wir sechs verschiedene Elemente haben. Wir haben Überschrift, Absatz, Textlink, Textblock, Block Zitat und Rich-Text. Lassen Sie uns in jeden von ihnen eintauchen. Ich werde mit dem Weg beginnen. Überschrift ist ein HTML-Tag. Es wird verwendet, um Titel und Untertitel zu erstellen. Wir haben sechs verschiedene Rubriken, von H1 bis H6. Eine wichtige Sache bei Überschriften ist, dass Suchmaschinen und Bildschirmlesegeräte versuchen, den Inhalt unserer Website basierend auf Überschriften zu verstehen, also müssen Sie sicherstellen, dass Sie sie richtig verwenden. Im Moment, hier habe ich zwei verschiedene Karten, und oben habe ich eine Überschrift. Wie Sie sehen können, heißt es H1. Wenn ich auf dieses „Einstellungen-Symbol“ klicke, kann ich den Überschrifentyp auswählen. Wie Sie sehen können, haben wir sechs verschiedene Überschriften. H1 ist die größte, und H6 ist die kleinste. H1 definiert den wichtigsten Titel oder Untertitel auf Ihrer Webseite, während H6 den am wenigsten wichtigen Titel oder Untertitel auf Ihrer Webseite definiert. Sie müssen sicherstellen, dass Sie sie mit Bedacht verwenden, da Google zum Beispiel Ihre Überschriften überprüft, um Ihre Inhalte zu analysieren und Ihre Website zu bewerten. Wenn wir anfangen, unser Projekt zu bauen, werden wir viel über Überschriften sprechen, aber jetzt müssen Sie nur wissen, dass wir sechs verschiedene Überschriften haben, und H1 ist die wichtigste, und H6 ist die am wenigsten wichtige. Eine Sache, die Sie hier erwähnen sollten, ist, dass Sie niemals Überschriften verwenden sollten, nur um einen Text größer oder fett zu machen, das ist falsch. Um dies zu tun, können Sie CSS-Eigenschaften verwenden, über die wir später sprechen werden. Überschriften verfügen über Standardstile. Sie haben Standardschriftgrößen, Schriftgewichtungen usw. Aber Sie können diese Standardstile später überschreiben. Gehen wir nun zu den nächsten Typografie-Elementen, die Absatz ist. Absatz können wir Multi-Satz Inhalt erstellen. Wie Sie hier sehen können, habe ich einen Absatz und es gibt mehrere Textzeilen hier. Ich kann doppelklicken, um diesen Absatz leicht zu ändern, und wenn ich ein bestimmtes Wort oder mehrere Wörter hier formatieren möchte, kann ich es auswählen, genau so, und ich kann das Inline-Styling hier verwenden. Zum Beispiel kann ich es fett machen, ich kann es zu einem Link einfach so machen, oder ich kann einfach meinen Absatz auswählen und die Formatierung löschen. Wir werden über diese Option Wrap mit Spam später sprechen, es ist fortgeschrittener, also werden wir es für jetzt verlassen. Gehen wir zum nächsten Element. Wie Sie hier sehen können, haben wir einen Textlink. Ein Textlink ist nur ein Text, der wie eine Schaltfläche anklickbar ist, Sie können ihn für eine Textschaltfläche verwenden. Lassen Sie mich einen Textlink hier ziehen und ablegen, und ich werde ihn direkt neben dieser Schaltfläche platzieren. Wie Sie sehen können, ist dies nur ein Link. Es hat alle Funktionen eines Links, wie Sie sehen können, können wir eine URL angeben. Wir können einfach alle diese Einstellungen hier ändern. In der Tat ist dieser Read More Button ein Textlink mit etwas Padding Wenn Sie also eine benutzerdefinierte Schaltfläche erstellen möchten, verwenden Sie einfach einen Textlink und stylen ihn dann. Gehen wir zum nächsten Element, das Textblock ist. Ein Textblock wird für alle Elemente verwendet, die keine Überschrift, Absatz oder Textverknüpfung sind. Lassen Sie mich voran gehen und ziehen Sie diesen Textblock hier, da gehen wir. Wie Sie sehen können, ist es nur ein Container mit einem Text im Inneren. Sie können darauf doppelklicken, um den Text zu ändern, formatieren, und Sie können ihn sogar in einen Textlink verwandeln. Jetzt ist der Text im Inneren ein Link-Element. Es wird für so etwas wie eine Beschreibung oder den Urheberrechts-Haftungsausschluss verwendet. Wir werden später über die Anwendungsfälle von Textblöcken sprechen. Lassen Sie uns zum nächsten Element gehen, das Block Zitat ist. Anführungszeichen blockieren, können Sie ein Angebot erstellen. Lassen Sie mich dieses Block Zitat hier ziehen und ablegen, und wie Sie sehen können, ist es nur ein Textblock mit einigen vordefinierten Stilen. Wenn ich darauf doppelklicke, kann ich einfach den Text ändern. Dies ist ein Block-Zitat. Es hat diese linke Grenze. standardmäßig können Sie natürlich alle Eigenschaften ändern, wir werden darüber sprechen. Wenn Sie ein Angebot in Ihrem Projekt verwenden möchten, können Sie die Blockangebotselemente verwenden oder es auch manuell erstellen. Lassen Sie uns auf das nächste Element gehen, das Rich-Text ist. Das Rich-Text-Element ist so mächtig. Warum? Weil es alle Arten von Elementen zusammenfasst. Zum Beispiel haben wir hier einen Rich-Text. Dieser Rich-Text kann viele verschiedene Elemente wie Überschriften, Absätze, Bilder, Videos, Links verwenden , Sie nennen es. Warum müssen wir sie benutzen? Es ist nützlich, weil es einfacher ist, den Inhalt zu ändern, wenn wir einen Rich-Text haben. Wenn ich hier einfach doppelklicke, kann ich diesen Absatz einfach ändern. Ich kann einfach einen neuen Absatz erstellen, wenn ich „Enter“ drücke, oder ich kann einfach auf diesen „Plus“ -Button klicken und ein Bild, ein Video, einen benutzerdefinierten Code oder sogar eine Liste hochladen ein Video, einen benutzerdefinierten Code . Lassen Sie mich voran und laden Sie hier ein Bild hoch. Da gehen wir, unser Bild ist fertig. Ich kann es nach links ausrichten. Es ist sehr einfach, alles innerhalb des Rich-Textes anzupassen. Am wichtigsten ist, wenn Sie eine Website für einen Kunden erstellen, ist es sehr praktisch, einen Rich-Text zu verwenden, da der Client kein Webentwickler oder Webdesigner ist. Er oder sie muss den Inhalt leicht ändern. Sie können einfach zu diesem Rich-Text gehen und einfach Bilder, Videos hinzufügen, den Inhalt ändern, die Überschrift formatieren, den Absatz formatieren und so weiter. Wir werden später über den Editor sprechen, aber im Moment müssen Sie nur wissen, dass Rich Text alle Elemente gruppieren kann: Bilder, Videos, Überschriften, Absätze, alles. 15. Bild: Können Sie sich vorstellen, eine Website ohne Bilder zu gestalten? Das kann ich nicht. In diesem Video werden wir über Bilder sprechen. Ich werde zum Abschnitt Hinzufügen gehen, und aus der Medienkategorie werde ich dieses Bildelement ziehen und es direkt meinem Container im Navigator ablegen, genau so. Hier ist ein Bildelement, und es hat verschiedene Einstellungen. Wir können dieses Bildelement verwenden, um gängige Dateiformate wie PNG, JPG, SVG und so weiter hochzuladen . Nun, Bilder sind unser Vermögen. Um ein Bild in Ihrem Projekt zu verwenden, müssen Sie es daher zuerst hochladen. Die beste Vorgehensweise besteht darin, zuerst alle Elemente im Bedienfeld „Elemente“ hochzuladen, wenn Sie mit der Erstellung Ihres Projekts beginnen und dann mit der Arbeit an dem Layout und dem Inhalt beginnen. Auf diese Weise erhalten Sie ganz einfach Zugriff auf Ihre Assets, wann immer Sie möchten. Alternativ können Sie einfach ein Bildelement per Drag & Drop ablegen, und von hier aus können Sie dieses Bild auswählen drücken und dann Ihr Bild hier hochladen. Für den Moment werde ich dieses Bild auswählen. Da gehen wir hin. Dieses Bild hat einige Einstellungen. Wie Sie sehen können, ist es zu groß. Ich werde es zu diesem ändern, es ist viel besser. Wie Sie sehen können, hat es die Breite und Höhe auf auto eingestellt. Es bedeutet, dass Webflow hier die Breite und Höhe bestimmt. Es gibt auch das HiDPI-Kontrollkästchen, und wenn es aktiviert ist, wird die Breite unseres Bildes durch zwei geteilt um perfekt auf den Retina-Displays angezeigt zu werden. Zum Beispiel hier, da die Breite unseres Bildes 640 Pixel beträgt, wenn ich das überprüfe, setzt Webflow es auf 320 Pixel, diese Weise können wir sicherstellen, dass unser Bild erstaunlich auf verschiedenen -Geräten. Es ist optional, HiDPI zu verwenden, aber die meiste Zeit, wenn Sie das überprüfen, können Sie sicherstellen, dass alles auf allen Arten von Geräten gut aussieht. Sie können hier die Breite und Höhe Ihrer Bilder angeben oder Sie können sie im Stilfenster hier unter dem Größenbereich formatieren. Wir werden später über Styling sprechen, aber im Moment müssen Sie nur wissen, dass es möglich ist, die Dimension Ihrer Bilder direkt hier in den Bildeinstellungen anzugeben . Sie können Ihre Bilder auch ersetzen, wenn Sie auf dieses Ersetzungsbild klicken, und aus dem Assets-Panel können Sie verschiedene Bilder wie diese auswählen. Eine wichtige Sache bei Bildern ist, dass Sie Bilder bis zu vier Megabyte hochladen können. Alles, was größer ist, kann nicht hochgeladen werden. Warum? Weil es nicht praktisch ist, Bilder zu verwenden, die so groß sind, da sie die Ladegeschwindigkeit der Webseite verlangsamen. Deshalb können Sie Bilder mit bis zu vier Megabyte hochladen. Es gibt einige erweiterte Optionen hier, wie alle Texte und laden. Wir werden sie jetzt nicht ansprechen, weil es sich um fortgeschrittene Themen handelt und wir werden später in diesem Kurs darüber sprechen. Sie können auch ein Bildelement für Symbole verwenden. Da ein Symbol ein Bild ist, können Sie im Grunde einfach zu Ihren Assets gehen, und wenn Sie ein Symbol hochladen, können Sie es einfach so ziehen und ablegen, oder Sie könnten einfach ein Bildelement ziehen und dann Ihre -Bild aus den Bildeinstellungen. Es liegt ganz an dir. 16. Video: Manchmal müssen wir vielleicht ein Video in unserem Projekt verwenden. In diesem Fall können wir ein Videoelement verwenden. Wenn Sie von hier aus zu den Medien gehen, können Sie ein Videoelement per Drag & Drop in Ihre Leinwand ziehen. Ich werde es in meinen Container legen, um alles organisiert zu halten. Dieses Video-Element funktioniert wie ein Platzhalter, Sie können einen Video-Link von jeder Drittanbieter-Quelle wie Vimeo oder YouTube einfügen , es spielt keine Rolle. Moment werde ich einen YouTube-Link einfügen, und sobald ich ihn einfüge, lädt er ihn hier, und ich kann einfach eine Vorschau meines Projekts anzeigen. Ich kann dieses Video leicht spielen, und wie Sie sehen können, haben wir alle Optionen des YouTube-Video-Players, aber wir haben auch ein anderes Element. Lassen Sie mich dieses Video-Element entfernen, dann werde ich dieses YouTube-Element ziehen und ablegen. Was ist der Unterschied? Nun, mit dem Video-Element können Sie einen beliebigen Link von beliebigen Plattformen verwenden, aber mit dem YouTube-Element können Sie nur einen YouTube-Link verwenden. Was ist der Hauptunterschied hier? Mit dem YouTube-Element haben wir mehr Möglichkeiten, mit denen wir arbeiten können. Wir haben verschiedene Einstellungen wie Start bei, wir können das Video standardmäßig stummschalten, wir können die Autoplay aktivieren. Wir können andere Spieler-Steuerelemente ändern, ob wir die Player-Steuerelemente anzeigen möchten oder nicht. Wir können auch die Datenschutzeinstellungen ändern. Dies ist im Grunde der Hauptunterschied zwischen diesen beiden Elementen. Wie alle anderen Elemente können Sie auch alle CSS-Eigenschaften dieser Video-Elemente ändern. 17. Lottie: Haben Sie sich jemals gefragt, wie Sie eine Animation in Ihrem Projekt verwenden können? Die Antwort ist Lottie-Animation. Wenn Sie hier im Hinzufügen-Bedienfeld zum Medienbereich gehen, können Sie sehen, dass es ein Element namens Lottie-Animation gibt. Lassen Sie mich dieses Element per Drag & Drop in meinen Container. Nun, Lottie ist ein Dateityp für Animationen. Es ist so mächtig, weil es uns erlaubt, qualitativ hochwertige Animationen zu verwenden , und vor allem können wir verschiedene Eigenschaften dieser Animation steuern. Zum Beispiel können wir es interaktiv machen, wir können es rückwärts spielen, und andere Dinge. Wir werden später ausführlich über Lottie-Animationen sprechen, aber im Moment versuchen wir es. In der Assets-Datei habe ich eine JSON-Datei, die im Grunde das ist, was wir brauchen, wenn wir eine Lottie-Animation verwenden wollen, wenn ich einfach auf diese Schaltfläche Lottie-Sequenz ersetzen klicke, kann ich einfach diese Animation wählen, und da gehen wir. Jetzt haben wir die Animation, aber lassen Sie mich eine Vorschau darauf. Wenn ich auf diese Vorschauanimation klicke, wird die Animation von null bis 100 Prozent abgespielt. Wie cool ist das? Ich kann die Loop-Option überprüfen, lassen Sie uns eine Vorschau anzeigen. Da gehen wir hin. Es spielt immer wieder. Ich kann das Spiel in umgekehrter Option wählen, einfach so. 18. Formen: Wenn Sie eine Website erstellen möchten, die eine Kontaktseite oder sogar einen Newsletter-Bereich hat , müssen Sie sicher Formulare verwenden. Nun, ein Formular kann verschiedene Elemente wie Label, Eingaben, Textbereich, Checkboxen, Optionsfelder, Formularschaltflächen, etc.haben Textbereich, Checkboxen, Optionsfelder, Formularschaltflächen, etc. Wenn Sie zum Abschnitt Formulare auf dem Add Panel gehen, können Sie sehen, dass wir verschiedene Elemente hier haben. Wir haben Form-Block, der verschiedene Formularelemente wie Beschriftung, Eingaben, Formular-Button gruppiert. Wir haben Label, das ist nur ein einfacher Textblock. Wir haben Eingabe, es ist ein Textfeld. Wir haben den Textbereich für lange Sätze und lange Inhalte. Wir haben Checkboxen, wir haben Optionsfelder für die Auswahl. Wir haben das select-Element, wenn Sie den Benutzer aus verschiedenen Optionen wählen lassen möchten. Wir haben die Rückeroberung und wir haben die Schaltfläche Formular. Wir haben auch das Datei-Upload-Element hier, aber es ist nur verfügbar, wenn Sie einen Website-Plan zu Ihrer Website hinzufügen. Wenn wir ein Formular erstellen möchten, benötigen wir zuerst einen Formularblock. Wie ich bereits erwähnt habe, sammelt es all diese Formelemente, die notwendigen. Ich werde es per Drag & Drop in meinen Container auf der Leinwand ziehen. Da gehen wir. Wie Sie sehen können, hat dieser Formularblock bereits einige Elemente, wie zwei Beschriftungen, zwei Textfelder und eine Schaltfläche. Sie können diese Textebenen aufgrund ihrer Farbe nicht sehen. Ich werde voran gehen und die Farbe und das Styling hier ändern. Im Moment ist es besser. Wenn Sie ein Formular per Drag & Drop in den Canvas ziehen, werden die Formulareinstellungen angezeigt. Ein Formularblock hat unterschiedliche Eigenschaften, unterschiedliche Zustände und einen Formularnamen. Hier lassen Sie mich Ihnen verschiedene Zustände eines Formularblocks zeigen. Wenn wir mit Formularen arbeiten, haben wir den Normal-, Erfolgs- und Fehlerstatus. Was ist der Unterschied zwischen ihnen? Der normale Zustand ist derjenige, den Sie betrachten. Es ist nur eine normale Form. Der Erfolgsstatus, zeigt tatsächlich eine Nachricht an den Benutzer. Sobald das Formular erfolgreich eingereicht wurde, können wir einfach jeden dieser Zustände anpassen. Der Fehlerstatus zeigt dem Benutzer einen Fehler an, wenn etwas schief geht. Moment können Sie den Text nicht sehen, da wir das Styling dieser Textebenen bereits geändert haben. Aber wenn ich diesen Textblock auswähle, kann ich voran gehen und die Farbe in Schwarz ändern, und jetzt können Sie es besser sehen. Wenn Sie verschiedene Zustände Ihres Formulars entwerfen möchten, müssen Sie zuerst den Formularblock im Navigator auswählen, nicht die Formularelemente. Wählen Sie zuerst Ihren Formularblock aus und klicken Sie dann auf [unhörbar]. Oder Sie können einfach Ihren Formularblock auswählen und auf dieses Einstellungssymbol klicken, genau so. Jetzt reden wir über die Formung. Nun, Sie müssen möglicherweise verschiedene Formulare auf Ihrer Website verwenden und es ist wichtig, sie richtig zu benennen, denn später, wenn wir Formularübermittlungen erhalten, können wir leicht erkennen, dass welche Informationen mit welchem Formular verknüpft sind. Ich werde dieses Formular Demo nennen. Ich werde zur Normalität gehen. Diese Elemente haben standardmäßig einige Styling, die wir überschreiben können. Wir werden jetzt nicht über Styling reden, aber ich werde Ihnen zeigen, dass dies ein Textfeld ist. Ein Textfeld hat auch einige Eigenschaften. Wenn ich das Textfeld auswähle, wenn ich darauf doppelklicke, können Sie sehen, dass die Eingabeeinstellungen angezeigt werden. Jedes Textfeld hat verschiedene Einstellungen wie Name, Platzhalter, Texttyp, und hier haben wir die erforderlichen und Autofokus Optionen. Sie können diese Textfelder einfach benennen. Zum Beispiel, wenn dieses Textfeld mit dieser Namensbeschriftung verknüpft ist, können wir es einfach nennen Name. Wenn es Nachname sein wird, können wir es einfach Nachname hier nennen. Wir haben auch den Platzhalter. Wenn ich einen Platzhalter direkt auf dem Textfeld präsentieren möchte, kann ich ihn hier schreiben. Lassen Sie uns schreiben, geben Sie Ihren Nachnamen ein. Genau so. Wir haben auch den Texttyp. Standardmäßig ist es auf Ebene festgelegt, und es bedeutet, dass Text alles sein könnte. Wir könnten es auf E-Mail setzen, wir könnten es auf Passwort setzen, wir können es auf Telefon oder Nummer setzen. Warum spielt es eine Rolle? Denn hier für das E-Mail-Textfeld ist der Texttyp bereits auf E-Mail festgelegt. Warum? Denn wenn der Benutzer versucht, diese Textfelder auszufüllen und die Schaltfläche „Absenden“ zu drücken, dann prüft dieses Textfeld, ob eine gültige E-Mail-Adresse vorhanden ist oder nicht. Zum Beispiel, wenn wir etwas wie test@ haben, wird es dem Benutzer einen Fehler geben. Es sollte eine gültige E-Mail-Adresse vorhanden sein. Es überprüft nicht, ob diese E-Mail-Adresse existiert oder nicht, weil sie nicht möglich ist, sondern überprüft nur das Format dieser E-Mail-Adresse. Dasselbe passiert mit Passwort, Telefon oder Nummer. Lassen Sie uns nun über diese beiden Optionen sprechen. Wir haben die erforderliche Option. Wenn ich dieses Kontrollkästchen ankreuze, bedeutet dies, dass der Benutzer diese Textfelder ausfüllen muss. Wenn ich das Kontrollkästchen deaktiviere, ist das ein optionales Textfeld. Überprüfen Sie Ich überprüfe den Autofokus, das bedeutet, wenn die Seite geladen wird, ist dieses Textfeld Autofokus und der Cursor blinkt bereits. Ich werde es auf erforderlich setzen, und ich werde den Autofokus deaktivieren. Dann wählen wir diese Schaltfläche „Senden“. Wenn ich darauf doppelklicke, kann ich diese Eigenschaften einfach ändern. Es gibt zwei Eigenschaften, wenn es um Schaltflächen, Schaltflächentext und wartenden Text geht. Ich kann es auf irgendetwas wie zum Beispiel senden und dann den wartenden Text setzen. Dieser Text wird angezeigt, wenn der Benutzer auf diese Schaltfläche klickt und auf das Senden des Formulars wartet. Hier lassen Sie mich das ändern, um einen Moment zu warten. Nicht der am besten wartende Text übrigens. Versuchen wir es jetzt mal. Um ein Formular auszuprobieren, können Sie nicht einfach in den Vorschaumodus wechseln, da es nicht so funktioniert. Sie müssen zuerst Ihre Website veröffentlichen. Wir haben nicht über die Veröffentlichungsoption gesprochen, aber es ist so einfach. Zuerst klicke ich auf diese Schaltfläche „Veröffentlichen“ in der oberen rechten Ecke. Wir müssen nichts ändern. Klicken Sie einfach auf Veröffentlichen, um die Domains auszuwählen. Genau so. Dies ist eine einzigartige Domain, die von Webflow für unser Projekt erstellt wurde. Sobald diese Schaltfläche grün wird, bedeutet dies, dass unsere Website veröffentlicht wird. Wenn ich auf diesen Button klicke, dieses kleine Symbol direkt neben diesem Link, kann ich meine Website überprüfen. Lassen Sie mich hineinzoomen. Hier ist unsere Form. Lassen Sie mich voran und überprüfen Sie den Typ dieses Textfelds, weil ich es fälschlicherweise auf Nummer geändert habe , sollte es einfach sein, da es nur der Nachname ist. Ich werde meine Website noch einmal veröffentlichen, und ich werde diese Seite aktualisieren. Da gehen wir. Nun, dies ist ein Nur-Text-Feld. Hier, lassen Sie mich Test schreiben. Für die E-Mail-Adresse werde ich test@ schreiben. Dies ist keine richtige E-Mail-Adresse, dies ist kein korrektes Format für diese E-Mail-Adresse. Wenn ich auf die Schaltfläche „Senden“ klicke, schau, was passiert. Bitte geben Sie ein Teil nach @ ein. Dies geschieht, wenn Sie den E-Mail-, Textfeldtyp auswählen. Dann schreiben wir gmail.com. Jetzt sollte alles perfekt funktionieren. Ich werde den „Senden“ -Button drücken. Warten Sie einen Moment, und wir werden die Erfolgsmeldung erhalten. Natürlich ist das Styling nicht gut, weil wir bereits die Farbe geändert haben, aber Sie haben gerade die Idee bekommen. Wenn etwas mit der Internetverbindung nicht stimmt, erhalten wir den Fehler. Lassen Sie mich die Seite aktualisieren und ich werde nur meine Internetverbindung für eine Sekunde trennen. Hier schreiben wir Test 2 und ich werde eine andere E-Mail-Adresse schreiben, hello@gmail.com. Wenn ich auf die Schaltfläche „Senden“ klicke, schau, was passiert. Ups, beim Absenden des Formulars ist etwas schief gelaufen. Dies ist der Unterschied zwischen verschiedenen Zuständen eines Formulars. Jetzt wollen wir sehen, wie wir Zugang zu den Formular-Einsendungen erhalten können. Nun, wir müssen zu den Projekteinstellungen gehen. Wie ich es dir schon mal gezeigt habe. Wenn Sie zu diesem W-Symbol in der oberen linken Ecke gehen, und wenn Sie den Mauszeiger darüber bewegen, sehen Sie dieses Hamburger-Menü-Symbol. Ich werde darauf klicken, und ich gehe zu Projekteinstellungen. Von hier aus gehe ich zur Registerkarte Formulare. Hier haben wir verschiedene Einstellungen eines Formulars. Wir können hier den Namen des Formulars angeben, können wir das Formular an eine bestimmte E-Mail-Adresse senden, wir können die Betreffzeile schreiben, wir können eine E-Mail-Adresse für Antworten angeben, und auch die E-Mail-Vorlage. Wir werden später über diese Optionen sprechen. Aber für jetzt müssen Sie nur wissen, dass, wenn Sie hier nach unten scrollen, können Sie ein Formular Einreichung Daten finden. Wie wir sehen können, haben wir ein Formular eingereicht. Es sagt Nachname, Test, E-Mail-Adresse test@gmail.com Sie können einfach die Einreichung löschen. Mit diesem CSV-Button können Sie alle Einreichungsdaten als CSV-Datei herunterladen. Eine Sache, die Sie beachten müssen, ist, dass es eine Grenze für den Empfang von Einsendungen gibt. Wenn Sie Ihrem Projekt kein Hosting hinzufügen, können Sie bis zu 50 Einsendungen pro Monat erhalten. Wir werden später in diese erweiterten Einstellungen von Formularen eintauchen , wenn wir mit der Erstellung unserer Projekte beginnen. Aber hier geht es im Grunde nur um Formen. Gehen wir zurück zum Designer. Ich werde den „Designer“ -Button drücken. Ich werde meinen Formularblock einfach so auswählen. Lassen Sie mich andere Elemente hier überprüfen. Hier haben wir eine Beschriftung Eingabetextbereich. Wir können einfach Drag & Drop eines dieser Elemente in unseren Formularblock. Alle diese Elemente haben ihre eigenen Eigenschaften. Lassen Sie mich voran und ziehen Sie ein Kontrollkästchen hier. Genau so hat es verschiedene Eigenschaften. Wir können ein selektiertes Element hier ziehen und ablegen. Wenn ich die Auswahloptionen angeben möchte, kann ich dieses Auswahlfeld auswählen und zu den Elementeinstellungen wechseln. Von hier aus können Sie sehen, dass wir die Wahl haben. Wir haben wählen 1, erste Wahl, zweite Wahl, dritte Wahl. Wir können sie einfach ändern, aber lassen Sie uns eine Vorschau anzeigen. Da gehen wir. So sieht es aus. Das Kontrollkästchen konnte aktiviert und deaktiviert werden. Der Textbereich konnte vergrößert werden und alles funktioniert wie erwartet. 19. Nav-Bar: Die meisten Websites haben heutzutage eine Navigationsleiste an der Spitze. Wenn Sie einen Blick auf einige berühmte Websites werfen, können Sie sehen, dass sie eine Navigationsleiste verwenden um dem Benutzer einige viele Optionen anzuzeigen. Zum Beispiel haben wir hier die Navigationsleiste, die einige Menüs wie MAC, iPad, iPhone hat, oder hier haben wir die Navigationsleiste, die Produkte, Anwendungsfälle, Entwickler usw. hat , und auch eine Schaltfläche. Die meisten Navigationsleisten haben einige gemeinsame Elemente, wie ein Logo, das anklickbar ist. Dies ist ein Link-Block. Sie haben einige Menüoptionen. Sie sind auch in der Regel Link-Blöcke, und sie haben eine Schaltfläche auf der rechten Seite. Wir können Navigationsleiste manuell mit einem Div-Block und einem Link Blöcke und andere Elemente erstellen. Aber es gibt eine vorgefertigte Elemente in Webflow. Wenn ich hier unter den Komponenten nach unten scrolle, gibt es die Navigationsleiste. Wenn ich es hier in mein Körperelement ziehe, wie Sie sehen können, wurde diese Navbar zu meinem Canvas hinzugefügt und sie hat einige Elemente. Im Inneren gibt es einen Container, es ist nur ein Div-Block, wir haben bereits darüber gesprochen, und im Inneren gibt es einige andere Elemente. Es gibt einen Link Block, in dem wir unser Logo setzen, und dann haben wir die nav Menüs. Dies ist ein weiterer Div-Block, der alle diese Links enthält. Schließlich gibt es die Menü-Taste. Aber wir können hier keine Menüschaltfläche sehen. Warten Sie einfach eine Sekunde. Ein navbar-Element ist dynamisch und reaktionsschnell. Wenn wir vom Desktop-Breakpoint zum Tablet-Breakpoint gehen, können Sie sehen, was passiert. All diese Menü-Links sind verschwunden, und stattdessen haben wir diesen Hamburger-Menü-Button. Dies ist mit dieser Menüschaltfläche im Navigator verknüpft, die im Desktop-Breakpoint nicht sichtbar war. Die Navigationsleiste reagiert bereits. Wenn ich eine Vorschau dieses Projekts vorsehe, diese Menü-Taste angezeigt und es gibt kein Logo, da wir noch kein Logo hinzugefügt haben. Dies ist im Grunde, wie eine Navbar funktioniert. Wir können diese Links anpassen. Wenn wir auf einen dieser Links doppelklicken, können wir den Text ändern. Wir können auch dieses Nav Link-Element auswählen, und wenn ich auf dieses Settings Icon klicke, kann ich die URL ändern. Wir können dies bitten, den Benutzer zu einer bestimmten Seite oder zu einem bestimmten Abschnitt unserer Website zu bringen. Dies ist nur ein Link-Block. Daher haben wir alle Eigenschaften eines Link-Blocks. Eine navbar ist im Grunde ein Div-Block, der bereits reagiert und einige vorgefertigte Elemente hat, die wir verwenden können. Wenn Sie eine benutzerdefinierte Navigationsleiste erstellen möchten, ist das völlig in Ordnung. können wir einfach machen. Aber die meiste Zeit werden wir das navbar-Element verwenden, weil es unser Leben viel einfacher macht , da es bereits reagiert und alles für uns bereit ist. 20. Lightbox: Wenn Sie möchten, dass Ihre Bilder oder Videos in einer Vollbildansicht auf einem beliebigen Gerät angezeigt werden , können Sie eine Lightbox verwenden. Wenn Sie im Add-Panel zum Komponentenabschnitt wechseln, finden Sie eine Lightbox-Komponente. Ich werde es per Drag & Drop in meinen Container ziehen. Da gehen wir. Dies ist ein Lightbox-Link und um damit zu arbeiten, brauchen wir ein Thumbnail. Wenn ich darauf doppelklicke, kann ich das Bild im Inneren auswählen, weil es standardmäßig ein Bild hat, und aus meinen Assets werde ich dieses Bild auswählen, und ich werde die Breite und Höhe auf 300 verringern Pixel und die Höhe wird 400 Pixel sein, genau so. Dies ist ein Lightbox-Link. Lassen Sie uns eine Vorschau sehen und sehen, was passiert. Wenn ich darauf klicke, passiert nichts, denn damit eine Lightbox funktioniert, müssen wir dafür ein Medium angeben. Wir müssen fortfahren und unseren Lightbox-Link auswählen. Dann müssen wir direkt neben der Seitenwand zu den Elementeinstellungen gehen und von hier aus können wir Lightbox-Einstellungen finden. Es gibt diesen Medienbereich. Wir können entweder ein Bild oder ein Video wählen. Fangen wir mit einem Bild an. Ich werde ein Bild auswählen, das gleiche Bild aus meinem Vermögen, da gehen wir. Da ist diese Beschriftung hier. Wir werden keine Beschriftung für jetzt hinzufügen, weil ich Ihnen den Unterschied zwischen diesen beiden Optionen zeigen werde . Ich werde speichern und dann lassen Sie es uns eine Vorschau. Dort gehen wir, wenn ich auf meinen Lightbox-Link klicke, können wir dieses Bild in einer Vollbild-Ansicht auf jedem Gerät anzeigen. Es funktioniert perfekt auf Handy, Tablet oder jedem Bildschirm, einfach so. Aber was ist, wenn ich mehrere Lightbox-Links haben möchte? Nun, das ist sehr einfach. Ich kann einfach mehr Leuchtkästen per Drag & Drop ablegen, oder ich kann diese Lightbox einfach kopieren und immer wieder einfügen. Lassen Sie mich diesen neuen Lightbox-Link entfernen. Ich werde diesen Lightbox-Link, Befehl C oder Steuerung C und Befehl V oder Steuerung V noch einmal kopieren , um drei verschiedene Lightbox-Links zu erhalten. Standardmäßig gibt es keine Polsterung zwischen ihnen, also werde ich diesen Lightbox-Link auswählen, den ersten und ich gehe zum Abstand und füge einfach ein paar rechte Polsterung wie 10 Pixel hinzu, und wie Sie sehen können, sofort eine Klasse erstellt wurde. Wir haben noch nicht über Klassen gesprochen, aber im Moment brauchen wir nur diesen Namen Lightbox Link. Später werden wir in den Unterricht eintauchen. Ich werde die zweite Lightbox auswählen und von hier aus werde ich nach einer Lightbox-Link-Klasse suchen, genau so, und sobald ich diese Klasse auf den zweiten Lightbox-Link anwende, kann dieses Element alle Stylings verwenden, die ich bereits für diese besondere Klasse. Jetzt werde ich die Miniaturansicht dieser beiden Lightbox-Links ändern. Lassen Sie mich doppelklicken und ersetzen Sie das Bild zu diesem und für die dritte, ich werde das gleiche tun, da gehen wir. Unsere Thumbnails sind fertig. Jetzt lassen Sie uns eine Vorschau anzeigen. Der erste sieht gut aus. Das zweite zeigt das gleiche Bild, weil wir es gerade kopiert und eingefügt haben, das dritte dasselbe. Was wir tun müssen, ist, dass wir unseren zweiten Lightbox-Link auswählen müssen, dann zu den Elementeinstellungen gehen, dann zu den Elementeinstellungen gehen, und von hier aus müssen wir dieses Medium entfernen und ein anderes Bild hinzufügen, das dieser Miniaturansicht entspricht. Cool. Ich werde es für die dritte speichern. Ich werde das Gleiche tun. Ich werde dieses Medium entfernen und das richtige Bild auswählen und speichern, jetzt sollte es perfekt funktionieren. Probieren wir es mal aus. Ich klicke auf das erste Bild, das zweite und das dritte Bild. Aber hier, wie Sie sehen können, gibt es keine Beschriftung. Was passiert, wenn ich eine Beschriftung zu unseren Medien hinzufüge? Gehen wir und schauen es uns an. Wir werden den ersten Lightbox-Link auswählen, und von hier aus werde ich auf dieses erste Bild klicken, und lassen Sie uns eine Beschriftung hinzufügen. Dies ist ein schönes Bild, cool, speichern. Jetzt sehen wir, was passiert, wenn ich darauf klicke. Wie Sie sehen können, wurde am unteren Rand dieses Bildes eine Beschriftung hinzugefügt. Das ist sehr praktisch, aber was ist, wenn ich meine Lightboxen miteinander verbinden möchte, damit wir das tun können. Das ist sehr einfach. Zuerst müssen wir diesen Lightbox-Link auswählen, den ersten, und unter den Medien gibt es ein Kontrollkästchen, das Link mit anderen Lightboxen sagt. Wenn ich dies überprüfe, kann ich hier einen Gruppennamen angeben. Es ist sehr wichtig, denn wenn Sie mehrere Lightboxen auf einer Seite haben, können wir sie auf diese Weise richtig verbinden. Geben wir ihm einen Namen. Ich werde Main schreiben, ich werde es kopieren. Lassen Sie mich meinen zweiten Lightbox-Link auswählen, ich werde diesen Namen hier einfügen. Für den dritten werde ich dasselbe tun, und jetzt sind unsere Lightbox-Links verbunden. Probieren wir es mal aus. Ich werde auf diesen ersten Link klicken und dort gehen wir. Jetzt haben wir diese Schieberegler-Interaktion. Ich kann auf diesen Rechts-Pfeil-Button klicken und ich kann mich einfach durch diese Elemente bewegen. Das ist sehr nützlich. Wenn Sie beispielsweise eine E-Commerce-Website erstellen möchten und verschiedene Bilder eines bestimmten Produkts anzeigen möchten , können Sie eine Lightbox verwenden. Lasst uns zusammenfassen. Um mit Lightboxen zu arbeiten, müssen Sie zuerst einen Lightbox-Link in Ihren Canvas ziehen und dort ablegen. Zweitens müssen Sie Ihre Miniaturansicht auswählen, die dieses Bild ist. Drittens, was so wichtig ist, müssen Sie ein Medium für diesen bestimmten Lightbox-Link hinzufügen. Wenn Sie Ihre Lightbox-Links verbinden möchten, müssen Sie diesen Link mit anderen Lightboxen überprüfen und einen Gruppennamen angeben. Leute, ich hoffe, ihr hat dieses Video genossen. Wir sehen uns in der nächsten. 21. Slider: Wenn Sie eine Bildergalerie oder eine Diashow für Ihre Website erstellen möchten, können Sie die Schiebereglerkomponente verwenden. Von hier aus können Sie einen Schieberegler ziehen und ihn innerhalb Ihres Containers ablegen, oder Sie können ihn dort platzieren, wo immer Sie wollen. Ich werde es in den Behälter legen, und es nimmt die volle Breite meines Containers ein. Wie Sie sehen können, hat dieser Schieberegler mehrere Elemente. Wenn ich es erweitern, können Sie sehen, dass es hier vier Hauptkomponenten gibt: die Maske, die unsere Folien enthält, den linken Pfeillink, den rechten Pfeil Link und das Slide Nav, das ist dies -Indikator unten. Wenn Sie auf diese Indikatoren klicken, können Sie zwischen Ihren Folien wechseln, und wenn Sie weitere Folien hinzufügen möchten, müssen Sie Ihren Schieberegler auswählen und zu den Schiebereglereinstellungen wechseln. Von hier aus können Sie auf die Schiebereglereinstellungen zugreifen. Wir haben viele Möglichkeiten zu modifizieren. Wir werden jeden von ihnen durchgehen. Wenn Sie weitere Folien hinzufügen möchten, können Sie diese Schaltfläche „Folie hinzufügen“ drücken, genau so. Wenn Sie sich durch Ihre Folien bewegen möchten, haben Sie verschiedene Möglichkeiten. Zuerst können Sie auf diese Indikatoren klicken, zweitens können Sie diese Pfeile hier in den Schiebereglereinstellungen verwenden, und drittens, wenn Sie genau wissen, wohin Sie gehen möchten, können Sie Ihre Folie von hier aus wählen, zum Beispiel Folie 3 oder ein Folie 5. Lassen Sie mich diese beiden Folien vorerst entfernen. Ich werde hier verschiedene Optionen erklären. Der Schieberegler hat unterschiedliche Eigenschaften. Es verfügt über die Animationseigenschaft, die Beschleunigungsmethode und die Dauer, und Sie haben auch einige erweiterte Einstellungen hier. der Animation können Sie den Typ des Übergangs steuern, der auftritt. Sie können „Folie“, „Crossfade“, Fade out“, „Fade Over“ und „Gleiten“ auswählen. Sie können sie überprüfen und sehen, welche zu Ihren Bedürfnissen passt. Die Beschleunigungsmethode bezieht sich auch auf die Animation und den Übergang. Da es sich um ein fortgeschritteneres Thema handelt, werden wir jetzt nicht darüber sprechen, aber später, wenn wir über Interaktionen sprechen, werden wir viel über die Lockerungsmethode sprechen. Dann haben wir die Dauer. Dies ist die Dauer unseres Übergangs, und die Einheit ist Millisekunden. Wenn ich hier 1.000 spezifiziere, erfolgt die Animation in genau einer Sekunde. Hier haben wir auch verschiedene Möglichkeiten. Wir haben die unendlichen Wiederholungsfolien, wir haben Swipe Gesten deaktivieren. Standardmäßig verfügt der Schieberegler über die Wischgesten wenn der Benutzer auf dem Tablet oder Smartphone mit ihm interagiert. Sie können diese Option deaktivieren, wenn Sie möchten. Sie haben die Option „Folien automatisch abspielen“. Du hast das Versteck an jedem Ende. Was es tut, ist das. Wenn ich diese Option aktiviere, wird der Pfeil nach links für die erste Folie und der Pfeil nach rechts für die letzte Folie ausgeblendet . Versuchen wir es mal. Hier, wir haben nicht den linken Pfeil. Dann, wenn ich zum dritten gehe, haben wir nicht den Pfeil nach rechts. Sie können diese Optionen nach Belieben anpassen. Dann haben wir die Folie Nav. Hier geht es um diese Indikatoren. Ich kann es überprüfen, oder Sie können das deaktivieren, um diese Quadrate zu bekommen. Sie können Zahlenbeschriftungen überprüfen, Schatten überprüfen, Farben invertieren, und Sie können auch den Abstand in Pixel angeben, wie ich 10 angeben kann. Ich werde alle von ihnen deaktivieren und ich werde es überprüfen. Großartig. Lassen Sie uns nun Inhalte zu unseren Folien hinzufügen. Eine Folie kann jede Art von Behälter enthalten. Sie können einige div Leerzeichen hinzufügen, Sie können Hintergrundbilder hinzufügen, Sie können ein Bild hinzufügen. Das liegt ganz an dir. Aber im Moment werde ich diese Folie 1 auswählen, und ich werde im Stilfenster nach unten scrollen. Aus dem Hintergrund werde ich „Bild und „Gradient“ drücken und „Bild“ wählen. Aus meinem Vermögen werde ich eines dieser Bilder auswählen. Cool. Lassen Sie uns die Position auf die Mitte setzen, und es wird genau so abdecken, und nicht kacheln. Für den nächsten werde ich dasselbe tun. Lassen Sie mich mein Bild wählen, genau so. Lassen Sie mich die Position und Größe ändern. guter Letzt für die letzte Folie wähle ich für die letzte Folieein anderes Bild aus. Dieses, lasst uns die Position in die Mitte ändern, und die Größe wird abgedeckt sein und nicht kacheln. Großartig. Unser Schieberegler ist fertig. Allerdings werde ich seine Höhe ändern. Ich werde den Schieberegler auswählen, stellen Sie sicher, dass Sie Ihr Schiebereglerelement auswählen. Aus der Größe kann ich eine bestimmte Höhe angeben, zum Beispiel 500 Pixel. Es sieht jetzt viel besser aus. Wenn ich nun auf diese Indikatoren klicke, kann ich zwischen diesen Bildern wechseln. Jetzt wähle ich den Schieberegler und gehe dann zu den Elementeinstellungen. Von hier aus werde ich Auto-Play-Folien überprüfen. Hier kann ich die Zeit oder Verzögerung angeben. Standardmäßig ist es auf 4.000 Millisekunden festgelegt. Es bedeutet, dass der Übergang in genau vier Sekunden erfolgt. Wenn ich es jetzt in der Vorschau sehe, erfolgt nach vier Sekunden der Übergang. Sie können das ändern. Ich werde es auf 1.000 setzen. Da gehen wir. Es ist zu viel. Vielleicht kann ich es auf 2.000 setzen. Jetzt ist es besser. Wie ich bereits erwähnt habe, kann eine Folie alles enthalten. Hier kann ich einige andere Elemente hinzufügen, zum Beispiel eine Überschrift. Lassen Sie uns eine Überschrift innerhalb dieser Folie ziehen und ablegen. Da gehen wir. Ich kann ihm einen Titel geben, Folie 1. Ich kann seine CSS-Eigenschaften ändern, alles. Für jede Folie kann ich das Gleiche tun. Ich kann hier auch einen Absatz hinzufügen. Alles klar, Leute. Das ist alles für die Schiebereglerkomponenten. Ich hoffe, es hat dir gefallen, und ich sehe dich im nächsten Video. 22. Tabs: Manchmal müssen wir einige Inhalte mit Registerkarten haben, einige interaktive Inhalte mit Registerkarten. In diesem Fall können wir das Tabs-Element verwenden. Unter dem Komponentenabschnitt haben wir das Tabs-Element. Einer der häufigsten Anwendungsfälle von Registerkarten ist der Preisabschnitt verschiedener Websites. Hier, wie Sie sehen können, habe ich zwei verschiedene Div-Blöcke vorbereitet und innen gibt es einige andere Div-Blöcke mit einigen Elementen. Was wir tun werden, ist, diese Preisblöcke in Tabs zu setzen. Die oberste Reihe ist unser monatlicher Plan und die untere Reihe ist unser Jahresplan. Wir werden zwei verschiedene Registerkarten brauchen. Aber zuerst gehen wir weiter und ziehen Sie das Tabs-Element in meinen Container, genau so. Wie Sie sehen können, verfügt das tabs -Element standardmäßig über drei verschiedene Registerkarten. Grundsätzlich hat das Tabs-Element verschiedene Komponenten. Das Registerkartenmenü, das sind diese Registerkarten oben, und die Registerkarten Inhalt. Innerhalb der Registerkarten Inhalt, wie Sie sehen können, ist es eine Maske. Dieses Symbol zeigt an, dass es sich um eine Maske handelt. Innerhalb dieser Registerkarten Inhalt, haben wir drei verschiedene Bereiche. Wir haben Tab Pane, Tab 1, Tab 2 und Tab 3. Der Inhalt unserer Registerkarte sollte innerhalb des Registerbereichs platziert werden. Wann immer wir die Registerkarten Namen ändern möchten, müssen wir mit Registerkarten Menü arbeiten. Wenn ich hier nur auf diesen Text doppelklicke, kann ich das ändern. Schreiben wir monatlich und für den nächsten werde ich jährlich schreiben. Dieser dritte ist nicht notwendig. Ich kann auf der Tastatur auf Löschen oder Rücktaste drücken, um diesen Tab Link zu entfernen. Genau so habe ich jetzt zwei verschiedene Registerkarten, aber was ist mit dem Inhalt? Nun, zuerst werde ich diesen Div-Block auswählen, dieser Top-Preismarken. Ich werde es ziehen und im ersten Registerbereich ablegen, stellen Sie sicher, dass es korrekt verschachtelt ist. Werfen Sie einen Blick auf Ihren Navigator und stellen Sie sicher, dass dieser im Registerkartenbereich 1 verschachtelt ist , genau so. Nun, diese Preisbox. Dies sind Felder, sind Teil des Registerkartenbereichs 1. Wir werden dasselbe für diesen untersten oder jährlichen Plan tun. Ich ziehe es und lasse es fallen. Ich werde sicherstellen, dass es in Tab-Fensterbereich 2 verschachtelt ist, genau so, aber jetzt ist es unsichtbar. Von nun an, wenn ich meine Tabs Inhalt überprüfen möchte, muss ich auf diese Registerkarten klicken. Zum Beispiel werde ich auf Registerkarte 1 klicken. Das ist unser monatlicher Plan. Wenn ich auf Tab Pane 2 klicke, ist dies unser Jahresplan. Standardmäßig gibt es keinen oberen Rand, also werde ich Tabs Inhalt auswählen, was im Grunde ein Wrapper für unsere Scheiben ist. Dann werde ich ihm einen oberen Rand geben, vielleicht 30 Pixel. Mal sehen, was jetzt passiert. Ich werde es in der Vorschau sehen. Wir sind auf Jahresplan. Ich werde auf monatlich klicken. Da gehen wir. Kannst du diesen Übergang sehen? So funktionieren die Registerkarten im Grunde. Natürlich können Sie diese Tabs stylen und wir werden später über Stylings sprechen. Aber im Moment müssen Sie nur wissen, wie das Tab-Element funktioniert. Wenn ich weitere Registerkarten hinzufügen möchte, kann ich mein Tabs-Element im Navigator auswählen. Wenn ich zu den Tab-Einstellungen gehe, kann ich auf diese Schaltfläche Hinzufügen klicken, einfach so, um weitere Registerkarten hinzuzufügen. Wie Sie sehen können, wurde Tab 3 hier hinzugefügt. Ich kann meine Tabs so neu anordnen. Ich kann die anfängliche Registerkarte festlegen, die der Benutzer sieht. Zum Beispiel wird es Tab 1 sein. Ich werde Tab 3 vorerst entfernen. Sie können die Registerkarten hier umbenennen, aber nur in Bezug auf die Organisation. Wenn ich es hier umbenenne, ändert sich nichts auf der tatsächlichen Registerkarte, auf dem tatsächlichen Link, da dies ein Text ist und Sie diesen auf der Leinwand ändern müssen. Aber wenn Sie sie richtig organisieren möchten, können Sie zum Beispiel einfach eine schreiben, und auch dafür können Sie die einfache Methode ändern. Moment wissen Sie nicht, was es ist, aber wir werden später darüber reden. Es dreht sich alles um die Animation. Hier wird das Fade-in auf 300 Millisekunden eingestellt und das Fade-Out wird auf 100 Millisekunden gesetzt. Es ist zu schnell. Um den wirklichen Unterschied hier zu sehen, werde ich es auf setzen, das Fading wird 500 Millisekunden betragen und das Ausblenden wird auch 500 Millisekunden betragen. Jetzt lassen Sie uns eine Vorschau anzeigen. Der Monatsplan ist bereits ausgewählt. Ich werde auf jährlich klicken. Da gehen wir. Es ist jetzt viel langsamer. Lasst uns zusammenfassen. Das tabs Element verfügt über zwei Hauptkomponenten, Registerkarten Menü und Tabs Inhalt. Das Registerkartenmenü enthält alle diese Registerkarten. Diese Registerkarten oben. Der Inhalt der Registerkarten enthält unsere Registerkarten hier. Wann immer wir den Inhalt unserer Registerkarten ändern möchten, sollten wir nur zu den Registerkarten Inhalt gehen und unseren Registerkartenbereich auswählen. Wenn Sie das Aussehen unserer Registerkarte Links oder sogar den Namen, den Text ändern möchten, sollten wir immer zu Registerkarten Menü gehen und wählen Sie unsere Registerkarte Link. Das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und wir sehen uns im nächsten. 23. Soziale Medien: Ich denke, Social-Media-Schaltflächen auf Ihrer Website können dazu beitragen, mehr Traffic zu Ihren Social-Media-Konten zu erreichen. Dazu können Sie die Facebook- oder die Twitter-Komponenten verwenden. Ich fange mit Facebook an. Lassen Sie mich es in meinen Container ziehen und ablegen. Wie Sie sehen können, gibt es standardmäßig eine Schaltfläche wie. Es gibt die Standard-wie Nummer, und diese Anmeldung, um zu sehen, was Ihre Freunde mögen Satz. Hier können Sie die URL des Facebook-Kontos angeben. Es könnte die Kunden Facebook-Konto oder Ihr eigenes Facebook-Konto sein, wenn Sie Ihre eigene Website erstellen. Sie können das Layout hier von Standard zu Feld zu Schaltfläche ändern . Das liegt ganz an dir. Sie können hier die Breite und Höhe angeben, und Sie können auch die Sprache ändern. Zum Beispiel kann ich Deutsch wählen, ich kann es auf Spanisch ändern, einfach so. Aber für jetzt, lassen Sie es uns Englisch halten. Wenn ich vorschau, dass, wenn Sie darauf klicken, werden Sie zu Facebook weitergeleitet. Aber da wir hier kein Konto angegeben haben, gehen wir einfach zu facebook.com. Aber wenn Sie hier ein Konto angeben, kann der Benutzer dieses bestimmte Konto mögen. Aber was ist mit Twitter? Lassen Sie mich diese Facebook-Komponente entfernen. Ich werde Drag & Drop Komponente, die Twitter-Komponenten hier. Mal sehen, was wir hier haben. Wir haben verschiedene Optionen, Tastentypen wie Tweet oder Folgen. Wenn Sie möchten, dass der Benutzer etwas twittert, können Sie den Tweet auswählen, und hier können Sie die URL der Website angeben. Hier können Sie einen Tweet-Text wie „Check it out“ angeben. Dann können Sie entscheiden, ob die Blase angezeigt werden soll oder nicht, einfach so. Sie können das Layout ändern. Hier haben wir das horizontale Layout. Sie können es in vertikale oder die Größe ändern, Sie können es in groß ändern. Ich werde die Blase vorerst verstecken. Jetzt lassen Sie uns eine Vorschau darauf. Wenn ich es vorschau und ich klicke darauf, da gehen wir. Ich kann diese Check it out webflow.com sehen. Dies ist die URL, die wir angeben können, wenn wir die Einstellungen dieser Komponente ändern. Wenn ich gehe zu folgen, kann ich hier den Benutzernamen für Konten angeben, ohne das @-Zeichen, da das @-Zeichen bereits vorhanden ist. Ich kann meinen Account-Benutzernamen schreiben und sofort wird hier die Anzahl der Follower dieses bestimmten Accounts angezeigt. Ich werde die Blase vorerst verstecken, und wir machen sie größer. Jetzt schauen wir mal, was passiert. Wenn ich darauf klicke, kann ich entscheiden, ob ich dieser Seite folgen möchte oder nicht. Da dies meine eigene Seite ist, werde ich dem nicht folgen. Gehen wir zurück. Hier geht es um Social-Media-Komponenten. Ich hoffe, es hat dir gefallen, und wir sehen uns dann. 24. Suche: Wenn Sie die Suchfunktion zu Ihrer Website hinzufügen möchten, können Sie das Suchelement, eigentlich diese Suchkomponente hier unter dem Komponentenbereich verwenden . Dies ist eine sehr leistungsfähige Komponente, da Sie sich keine Gedanken über die Indizierung Ihrer Seiten und die Vorbereitung Ihrer Suchergebnisse machen müssen . Was Sie tun müssen, ist es einfach per Drag & Drop in Ihren Canvas. Ich werde es in meinen Bereich legen, wie Sie hier sehen können. Lassen Sie mich hier einen Container hinzufügen, den Sie ihn leicht sehen können. Ich werde es in meinen Behälter legen. Nun, es sieht besser aus. Außerdem werde ich die Farbe des Suchwortes zu weiß ändern. Nun, es ist ziemlich sichtbar. Dies ist nur ein Textfeld, und wenn Sie darauf doppelklicken, können Sie diese Platzhaltereigenschaft hier finden, die Sie ändern können. Sie können den Autofokus auch aktivieren oder deaktivieren. Das liegt ganz an dir. Eine Sache zu erwähnen ist, dass, wenn Sie ein Suchelement zu Ihrem Canvas hinzufügen, automatisch eine neue Utility-Seite für Sie erstellt wird. Wenn Sie zu den Seiten hier gehen, können Sie sehen, dass unter Utility-Seiten, haben wir diese neue Suchergebnisseite. Wenn ich darauf klicke, da gehen wir. Sie können sehen, dass wir hier einige Beispielergebnisse haben. Lassen Sie mich die Farbe dieser Takes auch auf Weiß und dieses zu Weiß modifizieren. Cool. Dies ist im Grunde das, was der Benutzer sieht. Sie können es leicht stylen, aber Sie müssen verstehen, dass es nicht für alle Websites und alle Pläne funktioniert. Warum? Wenn Sie zu den Einstellungen hier gehen und Sie zur Suche gehen, können Sie sehen, dass es besagt, sobald Sie CMS oder Business-Hosting eingerichtet haben, Webflow automatisch den Inhalt Ihrer veröffentlichten Website indiziert , um einen aktuellen Suchindex zu erstellen. Ohne CMS oder Business-Hosting können Sie diese Suchfunktion nicht nutzen. Wenn Sie an einem Client-Projekt arbeiten möchten und diese Suchfunktion benötigen, müssen Sie sicherstellen, dass Sie entweder das CMS-Hosting oder das Business-Hosting zu Ihrem Projekt hinzufügen . Wir werden später über diese Pläne sprechen, aber jetzt müssen Sie nur wissen, dass diese Funktionalität existiert. Wenn Sie eine Suchleiste benötigen, können Sie diese verwenden. 25. Symbol: Als Designer und Entwickler versuchen wir immer, uns nicht zu wiederholen. Wir möchten vermeiden, dass alles immer wieder kopiert und eingefügt und wiederholt wird. Um dies zu tun, müssen wir lernen, wie wir ein Element einmal erstellen und es mehrfach im gesamten Projekt wiederverwenden können . Wie können wir das tun? Nun, wir können Symbole verwenden. Wenn ich zum Abschnitt Hinzufügen gehe und versuche, eine Navigationsleiste hier zu ziehen und abzulegen. Genau so werde ich es direkt unter meinen Körper legen. Hier haben wir eine Navigationsleiste und nehmen wir an, wir wollen es in ein Symbol verwandeln. Wie können wir das tun? Wir haben verschiedene Möglichkeiten, dies zu tun. Zuerst können wir hier auf die Seite Symbole gehen und dann können wir die Schaltfläche Neues Symbol erstellen drücken, und wir müssen unser Symbol benennen. Ich werde es Navbar nennen, dann Symbol erstellen. Wie Sie sehen, wird es grün, hier wird eine grüne Grenze angezeigt. Das bedeutet, dass unser Symbol erfolgreich erstellt wurde. Aber jetzt sind wir innerhalb des Meister-Symbols. Sie können die Escape-Taste drücken, um das Master-Symbol zu verlassen , oder Sie klicken auf diese grüne Schaltfläche Zurück zu Instanz. Hier haben wir ein Symbol, wie können wir das wiederverwenden? Nun, lassen Sie uns weitermachen und eine neue Seite erstellen. Ich gehe zu Seiten und von hier aus werde ich auf Neue Seite erstellen klicken. Lassen Sie es uns benennen. Ich werde es nennen Kontakt und Erstellen. Jetzt haben wir eine leere Leinwand. Ich gehe zu Symbolen von hier aus haben wir unsere Navbar. Wenn ich es hierher ziehe, dann haben wir unsere Navbar. Aber warten Sie, können wir es nicht einfach kopieren und einfügen, anstatt Symbole zu erstellen? Ja, das können wir, aber das ist kein effizienter Weg. Warum? Denn wenn Sie ein Element kopieren und einfügen, wenn Sie eine Änderung an einem dieser Elemente vornehmen, ist diese Änderung für dieses bestimmte Element eindeutig und wirkt sich nicht auf die duplizierten Elemente aus. Aber wenn wir Symbole verwenden, lassen Sie mich Ihnen zeigen, wie es funktioniert. Nehmen wir an, ich möchte diesen Kontakt ändern, dieser Kontakt nimmt, um uns stattdessen zu kontaktieren. Um dies zu tun, müssen Sie zuerst zum Master-Symbol gehen. Wenn Sie darauf doppelklicken, wie Sie jetzt sehen können, sind wir innerhalb des Master-Symbols. Ich kann auf diesen Text doppelklicken und ich werde diesen zu Kontaktieren ändern. Dann werde ich hier die Schaltfläche Zurück zur Instanz drücken. Jetzt ändern wir es hier auf unserer Kontaktseite. Wenn ich auf meine Homepage zurückgehe, sehen Sie, dass die Änderung auch automatisch auf diese Instanz angewendet wurde. Wenn Sie mit Symbolen arbeiten, nehmen Sie einmal Änderungen vor, und die Änderungen werden automatisch auf alle Instanzen des jeweiligen Symbols angewendet . Es ist so mächtig, weil Sie sich vorstellen, Sie haben 100 verschiedene Seiten auf Ihrer Website. Wenn Sie einfach manuell vorgehen und Ihre Navigationsleiste oder ein anderes Element nacheinander ändern möchten , wird es so viel Zeit in Anspruch nehmen und glauben Sie mir, es ist ein langweiliger Prozess. Wenn Sie Symbole verwenden können, stellen Sie sicher, dass Sie es verwenden. Es ist in der Regel nützlich, um Navigationsleisten und Fußzeilen zu erstellen. Wir werden später über die Anwendungsfälle sprechen. Aber vorerst werde ich Ihnen zeigen, wie Sie sie verwenden können und wie Sie den Inhalt ändern können, wie Sie den Inhalt hier überschreiben können. Bisher haben wir gelernt, wie man ein Symbol erstellt, wie man ein Symbol wiederverwendet, wie man ein Symbol editiert. Jetzt werden wir über das Überschreiben sprechen. Wie wir den Inhalt unserer Symbole überschreiben können. Hier habe ich eine einfache Karte mit einigen Elementen, einer Überschrift, einem Bild, einem Absatz und einer Schaltfläche erstellt. Ich werde es in ein Symbol verwandeln. Die andere Möglichkeit, ein Symbol zu erstellen, besteht darin, einfach mit der rechten Maustaste auf Ihr Element zu klicken und von hier aus können Sie Symbol erstellen wählen, genau so. Jetzt können wir es nennen, sagen wir Karte. Unser Kartensymbol ist fertig. Nun, was ich tun werde, ist zu kopieren und fügen Sie es zweimal. Ich werde zwei Mal Befehl C oder Kontrolle C und Befehl V oder Kontrolle V zweimal drücken. Diese beiden neuen Karten sind Instanzen unseres Kartensymbols. Wenn ich Änderungen an der ersten Karte vornehme, z. B. wenn ich die Größe dieses Bildes ändere, gelten die Änderungen sofort auch für andere Karten. Wenn ich diese Überschrift in H2 ändere, können Sie sehen, dass die Änderungen für alle Instanzen gelten. Aber wie können wir den Inhalt dieser beiden Instanzen überschreiben? Da wir drei verschiedene Karten haben und sicher nicht den gleichen Inhalt für alle Karten verwenden werden, müssen wir lernen, wie wir Inhalte überschreiben können. Um dies zu tun, müssen Sie zuerst einige Felder für Ihre Symbole erstellen. Ich werde auf dieses Symbol doppelklicken, um zum Master-Symbol zu gehen und ich werde in der Lage sein, Dinge zu bearbeiten. Dann wähle ich das Element aus, für das ich ein Feld erstellen möchte. Ich werde mit diesem Bild beginnen, weil dieses Bild austauschbar sein sollte. Ich wähle das aus. Wenn ich zu den Bildeinstellungen hier oben gehe, kann ich sehen, dass es hier Bildeinstellungen gibt und ich diese lila Schaltfläche rechts oben links habe . Wenn ich den Mauszeiger darüber führe, können Sie sehen, dass es sich zu einem Plusknopf dreht. Ich werde darauf klicken und dann werde ich „Neues Feld“ drücken, einfach so. Wie Sie sehen können, heißt es: „Dieses neue Feld wird automatisch mit diesem Bild überschreiben verknüpft “, und ich werde es Image nennen. Erstellen und verknüpfen, heißt es, dass Sie gerade ein Überschreibungsfeld erstellt und verknüpft haben. Jetzt werde ich diese Überschrift auswählen und von hier aus werde ich auf diesen Link zum Feld klicken, Neues Feld erstellen und nennen wir es Titel. Erstellen und verknüpfen. Großartig. Ich werde dasselbe für den Absatz tun. Lassen Sie uns ein neues Feld erstellen. Hier werde ich Beschreibung schreiben, Erstellen und Link und das ist alles. Ich werde kein Feld für den Boden erstellen, aber wenn Sie möchten, können Sie das auch tun. Wie funktioniert es? Lassen Sie mich zuerst das Master-Symbol verlassen. Ich werde auf „Zurück zur Instanz“ klicken. Wenn ich nun meine zweite Karte auf der rechten Seite auswähle, können Sie sehen, dass wir Instance-Overrides haben. Wir haben das Bild, das sind die Felder, die wir gerade erstellt haben. Wir haben das Bild, den Titel und die Beschreibung. Jedes Feld verfügt über einen Standardinhalt. Ich werde dieses Bild einfach damit ersetzen. Ich werde den Text hier in Karte 2 ändern, und wir können den Absatz auch so ändern. Dann lass mich die dritte Karte wählen und wir werden dasselbe für diese Karte tun. Dieser wird Karte 3 sein. Für diesen werde ich den ersten Satz einfach so entfernen. Auf diese Weise können Sie den Inhalt Ihrer Symbole überschreiben. Das Letzte, worüber ich reden werde, ist, deine Symbole aufzuheben. Wie kann man die Verknüpfung eines Symbols aufheben? Es gibt Zeiten, in denen Sie einige Änderungen vornehmen möchten, und Sie möchten, dass diese Änderungen auf bestimmte Elemente angewendet werden. Sie dazu zuerst Ihr Symbol aus, klicken Sie mit der rechten Maustaste darauf. Von hier aus können Sie Unlink Instance finden. Wenn Sie auf Edit main Symbol klicken, werden Sie zum Master-Symbol weitergeleitet und Sie können es bearbeiten. Aber wenn Sie die Verknüpfung der Instanz einfach so aufheben, ist es jetzt nur ein einfaches div. Wie Sie sehen können, ist es kein Symbol mehr und Sie können das aus dem Navigator erkennen, da hier das Symbol dieser Symbole grün ist. Aber das ist nur ein einfacher div-Block. Nun, wenn ich eine Dimension dieses Bildes ändere, ist diese Änderung einzigartig für diese bestimmte Karte.. Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und wir sehen uns im nächsten. 26. Wichtige Shortcuts: Hey, in diesem Video werden wir über Webflow-Shortcuts sprechen. Wenn wir an einem Projekt arbeiten, müssen wir möglicherweise einige Verknüpfungen verwenden, um unseren Designprozess zu beschleunigen, und in diesem Video werde ich über die wichtigsten sprechen, weil es viele verschiedene Verknüpfungen gibt, die Sie verwenden können, aber wir werden nicht über alle reden, weil wir die meiste Zeit nicht alle diese Verknüpfungen verwenden werden. Wenn Sie hier in die untere linke Ecke von Webflow gehen, können Sie dieses Fragezeichen sehen. Wenn Sie darauf klicken, hier im Hilfebereich haben wir hier im Hilfebereichverschiedene Optionen. Die zweite Option sind Tastenkombinationen. Ich werde darauf klicken, und da ist es. Wie ich bereits erwähnt habe, brauchen wir vielleicht nicht alle von ihnen, aber einige von ihnen sind so wichtig zu wissen, wie Kopieren und Einfügen , Rückgängig machen, Wiederholen,Finden usw. , kann Befehl C oder Steuerelement C verwenden, wenn Sie Windows verwenden. Wenn Sie etwas ausschneiden möchten, können Sie Command X oder Control X verwenden, und wenn Sie etwas einfügen möchten, können Sie Befehl V oder Control V verwenden. Grundsätzlich müssen Sie, wenn Sie ein Mac-Benutzer sind, Befehl verwenden. Wenn Sie ein Windows-Benutzer sind, müssen Sie Control verwenden. Hier zum Beispiel, für Duplikate, heißt es Option plus Ziehen. Wenn Sie also die Wahltaste auf Ihrer Tastatur gedrückt halten und klicken und ziehen, können Sie ein Element duplizieren. Bei Fenstern anstelle von Option müssen Sie die Alt-Taste auf der Tastatur gedrückt halten. Hier, wie Sie sehen können, verwenden wir für Rückgängig Command Z oder Control Z, und für Redo verwenden wir Command Shift und Z. Die anderen wichtigen Tastenkombinationen sind Geräteansichten. Hier, wie Sie sehen können, wenn Sie zu einem anderen Haltepunkt gehen möchten, zum Beispiel, wenn Sie zum Tablet-Breakpoint gehen möchten, können Sie Nummer 2 auf Ihrer Tastatur drücken. Wenn Sie zum mobilen Portrait gehen möchten, können Sie die Nummer 4 drücken. Die Verwendung dieser Verknüpfungen ist optional, aber glauben Sie mir, es wird Ihr Leben viel einfacher machen, wenn Sie sie lernen. Die andere wichtige Abkürzung, die wir fast die ganze Zeit verwenden, ist Find. Es gibt eine sehr gute Funktion namens Quick Find. Wenn Sie es öffnen möchten, können Sie Befehl E oder Befehl K oder Control E oder Control K drücken . Wir werden später über die Schnellsuche sprechen, aber im Moment müssen Sie nur wissen, wie Sie diese Verknüpfungen verwenden können. Wenn Sie mehr über diese Verknüpfungen erfahren möchten, können Sie zum Hilfebereich gehen und auf Tastenkombinationen klicken und sie einfach überprüfen, aber im Moment sind dies die wichtigsten Verknüpfungen, über die Sie wissen müssen. Alles klar, Jungs, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und wir sehen uns im nächsten. 27. Kurs: Fast alle modernen Websites werden heutzutage mit Klassen erstellt. Warum? Denn Klassen lassen uns unsere Styling-Informationen speichern und sie dann immer wieder für so viele Elemente wie wir wollen wiederverwenden. Deshalb sind Klassen so mächtig und es ist fast unmöglich, eine moderne Webseite ohne Klassen zu erstellen. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Wenn Sie Ihrem Canvas ein Element hinzufügen, zum Beispiel einen Div-Block, genau wie folgt, können Sie zum Stilfenster auf der rechten Seite gehen und oben haben wir den Abschnitt „Selector“. Hier ist, wo wir eine Klasse hinzufügen oder sagen wir, wählen Sie eine Klasse. Standardmäßig haben unsere Elemente keine Klasse und wenn wir die CSS-Eigenschaften unserer Elemente ändern möchten, müssen wir eine bestimmte Klasse hinzufügen. Wenn wir dies nicht tun, weist Webflow automatisch eine Klasse zu diesem bestimmten Element. Mal sehen, wie es funktioniert. Zuerst werde ich hier keine Klasse hinzufügen, ich möchte nur die Hintergrundfarbe ändern, und da gehen wir. Sobald ich eine dieser Eigenschaften geändert habe, wurde diese Div-Blockklasse automatisch erstellt. Wenn wir unsere Klasse umbenennen möchten, können wir sie einfach mit der linken Maustaste anklicken und sie einfach umbenennen. Ich werde es „Div“ nennen. So können Sie im Grunde eine Klasse erstellen. Der andere Weg, was meiner Meinung nach besser ist, besteht darin, einfach eine Klasse zu erstellen, sobald Sie Ihr Element zu Ihrem Canvas hinzugefügt haben. Anstatt die Eigenschaften Ihrer Elemente zu ändern, fügen Sie zuerst eine Klasse hinzu. Auf diese Weise können Sie sicherstellen, dass Ihre Klassen organisiert sind, da wir später diese Klassen wiederverwenden und sie richtig benennen werden. Jetzt werde ich diesen Div-Block auswählen und es gibt keine Klasse hier, weil ich das gerade entfernt habe. Lassen Sie mich Ihnen zeigen, wie Sie eine Klasse entfernen können. Ich werde „Div“ schreiben, um diese Klasse zu wählen, die ich erstellt habe. Um eine Klasse zu entfernen, können Sie einfach auf diesen Abwärtspfeil klicken und einfach „Klasse entfernen“ drücken. Alternativ können Sie hier irgendwo klicken und wie wir sehen können, blinkt dieser Cursor. Wenn Sie auf der Tastatur die Entf-Taste oder die Rücktaste drücken, wird diese Klasse entfernt. Jetzt haben wir keine Klasse auf dieses Element angewendet. Ich werde hier klicken und ich kann anfangen, eine neue Klasse zu erstellen. Wir müssen unsere Klasse hier nennen. Ich werde „New Div“ schreiben, „Enter“, genau so. Unsere Klasse wurde erstellt und wir haben die Eigenschaften dieses Elements noch nicht geändert. Wenn ich nach unten scrolle, können Sie sehen, dass es einige Eigenschaften gibt und sie mit dieser Bernsteinfarbe hervorgehoben sind. Es bedeutet, dass diese besondere Eigenschaft von einer anderen Klasse geerbt wird. Wenn ich darauf klicke, können Sie sehen, dass der Wert von „Body (Alle Seiten)“ kommt. Wir werden später über diese Tags sprechen, aber jetzt müssen Sie nur wissen, dass diese bernsteinfarbene Farbe bedeutet, dass tatsächlich die Eigenschaft und das Styling von woanders kommen. Natürlich können Sie das überschreiben, und wenn Sie das überschreiben, sehen, was passiert, wird es blau. Es bedeutet, dass diese Eigenschaft jetzt von dieser Klasse kommt. Wenn ich darauf klicke, können Sie sehen, dass wir diese Eigenschaft zurücksetzen können und das Zurücksetzen wird den Wert von Body (Alle Seiten) erben. Nun gehen wir weiter und ändern den Hintergrund. Ich werde es in Weiß umwandeln. Warum müssen wir Klassen verwenden? Nun, wie ich bereits erwähnt habe, speichern Klassen Informationen über unser Styling. Nun, da wir die Hintergrundfarbe und auch die Schriftart ändern, können wir diese Klasse einfach wiederverwenden. Wie man eine Klasse wiederverwendet. Lassen Sie mich zuerst einen weiteren Div-Block hinzufügen und ich werde ihn direkt daneben platzieren, und jetzt, anstatt eine neue Klasse zu erstellen, kann ich einfach die neue Div-Klasse auf diesen speziellen Div-Block anwenden. Ich werde „Neu“ schreiben. Ich kann es unter den bestehenden Klassen finden hier und da gehen wir. Eine Sache, die Sie sich erinnern müssen, ist, dass wir Änderungen am Stil vornehmen, wir nehmen keine Änderungen am Element selbst vor. Deshalb können wir eine Klasse auf jedes Element anwenden. Wir setzen die Eigenschaften für eine bestimmte Klasse und dann können wir auf jedes Element anwenden. Jetzt werde ich voran gehen und die Hintergrundfarbe ändern, und mal sehen, was passiert. Da gehen wir. Wie Sie sehen können, wurde die Änderung auf diese beiden Div-Blöcke angewendet, da diese beiden Elemente diese neue Div-Klasse verwenden. Aber was, wenn ich eine einzigartige Klasse für den zweiten Div-Block haben möchte? Um dies zu tun, können wir eine Klasse duplizieren. Wir können einfach auf diesen Abwärtspfeil klicken und ich werde „Duplicate class“ drücken , und schreiben wir „Second Div“, genau so. Nun gibt es keine Verbindung zwischen diesem Div-Block und diesem Div-Block, weil wir die Klasse nur dupliziert haben und es keine Beziehung zwischen diesen beiden Klassen gibt. Wenn ich mich also dafür entscheide, die Farbe des Hintergrunds zu ändern , gilt die Änderung, die ich hier mache, nur für dieses bestimmte Element. Aber wie können Sie eine Klasse umbenennen? Um eine Klasse umzubenennen, können Sie einfach darauf klicken und sie einfach umbenennen. Ich werde es in „Demo“ ändern. Jetzt wurde unsere Klasse umbenannt. Lassen Sie mich Ihnen ein weiteres Beispiel zeigen. Ich gehe zum Abschnitt „Hinzufügen“, und von hier aus werde ich eine Schaltfläche in meine Leinwand bringen, genau so. Lassen Sie mich es in meinen Behälter legen und ich werde diese Div-Blöcke entfernen. Cool. Diese Schaltfläche hat keine Klasse. Ich werde eine Klasse hinzufügen. Ich werde „Primary Button“ schreiben. Cool. Jetzt hat diese primäre Schaltfläche einige Standardstile, da dies ein vordefiniertes Element ist, und ich werde diese Elemente überschreiben. Ich fange mit dem Abstand an. Hier haben wir verschiedene Eigenschaften und ich kann die Polsterung ändern. Ich halte die Wahltaste auf meiner Tastatur oder Alt-Taste gedrückt und ziehe einfach mit der linken Maustaste und ziehe, um die Polsterung von beiden Seiten gleichzeitig zu ändern, einfach so. Wie Sie sehen können, wurde es blau. Es bedeutet, dass diese Eigenschaften von dieser Klasse kommen, dieser bestimmten Klasse. Nehmen wir nun eine weitere Änderung an dieser Schaltfläche vor. Ich werde seine Farbe zu etwas anderem ändern. Nun, was ich tun werde, ist eine weitere Schaltfläche hier hinzuzufügen. Da gehen wir, und ich werde die gleiche Klasse auf diese neue Schaltfläche anwenden. Lassen Sie uns nach primären Knopf suchen. Alle Stylings wurden auch auf diese neue Schaltfläche angewendet. Was ist, wenn ich Variationen für meine Schaltfläche erstellen möchte? Nun, in diesem Fall können wir etwas sehr Nützliches verwenden, eine Combo-Klasse. Eine Combo-Klasse ist ein Typ von Klasse, die auf Ihrer Basisklasse basiert. Moment haben wir die Basisklasse erstellt und wenn ich eine Combo-Klasse erstellen möchte, kann ich hier einfach irgendwo klicken und wie Sie sehen können, heißt es „Neue Combo-Klasse“. Warum? Weil wir bereits die Basisklasse haben und wir eine Combo-Klasse auf dieser Basisklasse erstellen können. Also lasst uns „Licht“ schreiben. Aber nichts ist passiert. Natürlich ist nichts passiert, weil wir nichts geändert haben. Nachdem wir diese Combo-Klasse erstellt haben, erbt dieses Element das Styling von zwei verschiedenen Klassen. Es erbt zuerst alle Eigenschaften von der Primary Button-Klasse und erbt dann mehr Eigenschaften von der Light-Klasse. Also zuerst werden alle Eigenschaften der Primär-Button-Klasse auf diese Schaltfläche angewendet und dann, wenn wir etwas hier ändern, da wir eine Combo-Klasse erstellt haben, überschreibt es diese Eigenschaften von der primären Schaltfläche. Es ist so mächtig. Nehmen wir an, ich möchte hier eine Licht-Taste erstellen. Ich werde die Farbe in Weiß ändern und wie Sie sehen können, wird sie blau, und ich werde die Typografie Farbe hier in Schwarz ändern, genau so. Lassen Sie mich erklären, was passiert ist. Wie Sie sehen können, hat sich der Abstand nicht geändert und wir haben diese bernsteinfarbene Farbe hier. Es bedeutet, dass diese Eigenschaften von unserer primären Schaltflächenklasse kommen. Wenn wir jedoch zum Hintergrundabschnitt gehen, können Sie sehen, dass wir diese blaue Farbe haben und es bedeutet, dass diese Farbe, diese besondere Eigenschaft stammt aus der Licht-Combo-Klasse. Aber um es besser zu verstehen, werde ich die primäre Schaltfläche auswählen. Wie Sie sehen können, gibt es nur eine Klasse angewendet, wir haben keine Combo-Klasse, und ich werde die Polsterung von 30 bis 40 einfach so ändern. Wie Sie sehen können, gilt die Änderung, die ich hier vorgenommen habe, automatisch für diese Schaltfläche, obwohl wir eine Combo-Klasse hatten. Warum? Da wir die Combo-Klasse erstellt haben, haben wir die spacing-Eigenschaft nicht berührt, wir haben nur die Hintergrundfarbe des Hintergrunds geändert. So funktionieren Combo-Klassen. Sie sind auf unserer Basisklasse aufgebaut. Abgesehen von diesen beiden Klassen, der Basisklasse und der Combo-Klasse, haben wir eine andere Art von Klasse, die eine globale Klasse genannt wird. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Ich gehe weiter und ziehe einen Div-Block hier in meinen Container. Da gehen wir. Dies ist ein leerer Div-Block. Ich werde voran gehen und ihm eine Klasse zuweisen. Also werde ich eine neue Klasse erstellen und nennen wir sie „Schatten“. Ich werde es außerhalb meines Behälters stellen, dass du besser sehen kannst. Es ist genau hier an der Spitze, und ich gab ihm diese Schatten-Klasse. Jetzt gehe ich zum Abschnitt „Effekte“, und von hier aus werde ich auf diesen Plus-Button klicken, um diesem speziellen Div-Block einige Schatten hinzuzufügen. Wie Sie sehen können, wurde der Schatten hier hinzugefügt. Ich werde die Eigenschaften, die Unschärfemenge und die Größe ändern und auch die Deckkraft ändern. Cool. Jetzt haben wir eine globale Klasse. Was bedeutet das? Wann immer wir einige spezifische Styling auf viele Elemente auf unserer Webseite anwenden möchten, können wir globale Klassen verwenden. Nehmen wir zum Beispiel an, wir haben verschiedene Schaltflächen und wir haben verschiedene Bilder. Lassen Sie mich voran gehen und ziehen Sie ein Bild hier, das Sie besser sehen können. Ich werde seine Breite auf 300 Pixel verringern. Cool. Nehmen wir an, wir wollen einen konsistenten Schlagschatten für alle unsere Elemente haben. In diesem Fall werde ich meine primäre Schaltfläche hier auswählen und ich werde unsere globale Klasse hinzufügen. Lasst uns nach Schatten suchen. Wie Sie sehen können, heißt es „Globale Combo-Klassen“. Da gehen wir. Der Schatten wurde hier hinzugefügt. Jetzt werde ich diese primäre Schaltfläche auswählen und hier werde ich schreiben „Schatten“. Da gehen wir. Der Schatten wurde angewendet und lassen Sie uns dasselbe für dieses Bild tun. Hier gibt es keinen Unterricht. Also zuerst werde ich ihm eine Klasse geben, Image, und dann werde ich den Schatten, Global Class hinzufügen , genau so. Wie Sie sehen können, verwenden diese drei Elemente jetzt unsere Shadow Global Class. Aber was, wenn ich die Eigenschaften dieser Shadow Global Class ändern möchte? Ich kann diesen Div-Block auswählen. Dies ist ein temporäres Element. Ich kann das einfach entfernen und nichts passiert, aber wenn ich die Eigenschaften dieser globalen Klasse ändern möchte, muss ich diesen Div-Block auswählen. Nehmen wir an, ich möchte, sagen wir, die Größe hier ändern . Wie Sie sehen können, gelten die Änderungen für alle Elemente, die unsere globale Klasse verwenden. Wenn Sie mit verschiedenen Design-Software wie Figma oder Sketch vertraut sind, haben Sie sicher Stile verwendet. In Figma können wir Farbstile, Typographie-Stile erstellen. Das ist genau das gleiche Konzept. Wir erstellen unsere Stile einmal und wir wenden sie immer wieder auf mehrere Elemente an, und auf diese Weise, wenn wir einige Änderungen vornehmen möchten, können wir es einmal tun und die Änderungen gelten sofort für alle Elemente , die diese bestimmte Klasse verwenden. Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich hoffe, dass du jetzt ein besseres Verständnis für den Unterricht hast. Wir werden Klassen fast die ganze Zeit verwenden, wenn wir an unseren Projekten arbeiten. Stellen Sie also sicher, dass Sie das Konzept der Klassen richtig verstehen , da wir sie in unseren Projekten verwenden werden. Wir sehen uns im nächsten Video. 28. Anzeigeeinstellungen: Jede Website, die Sie heutzutage besuchen, verwendet eine der sechs Anzeigeeinstellungen hier. Wenn Sie zum Layout-Bereich auf der rechten Seite gehen, sehen Sie, dass wir sechs verschiedene Anzeigeeinstellungen haben. In diesem Video werden wir über jede dieser Anzeigeeinstellungen sprechen, was ist der Unterschied zwischen ihnen, wie Sie sie verwenden können und wann Sie jeden von ihnen verwenden sollten. Es ist wichtig, diese Anzeigeeinstellungen sehr gut zu erlernen , denn wenn nicht, es Ihnen sehr schwer, verschiedene Layouts für Ihre Projekte zu erstellen. Achten Sie darauf, auf die Details zu achten, da der Unterschied manchmal subtil ist. In realen Projekten macht es jedoch einen Unterschied. Lasst uns kurzerhand anfangen. Zuallererst füge ich eine Überschrift in diesen Container hinzu. Ich gehe fort und wähle diesen Container aus und entferne diese obere Polsterung. Das brauche ich nicht. Jetzt haben wir diese Überschrift. Lass es mich einen Kurs geben. Ich schreibe H1. Dann werde ich weitermachen und seine Farbe ändern, damit Sie es besser sehen können. Jedes Element wie Überschrift, Absatz, Div-Block, Schaltfläche usw. verwendet standardmäßig die Einstellung für die Blockanzeige. Hier haben wir sechs verschiedene Anzeigeeinstellungen. Wir haben den Block, wir haben den Flex oder die Flexbox, wir haben das Raster, wir haben den Inline-Block, wir haben den Inline und schließlich haben wir keine. Wie Sie standardmäßig sehen können, hat es die Einstellung für die Blockanzeige. Was heißt das? Wenn die Anzeigeeinstellung auf Blockieren eingestellt ist, bedeutet dies, dass Ihr Element die gesamte Breite seines übergeordneten Elements einnimmt. In diesem Fall sind die Eltern dieses Elements Container. Wie Sie sehen können, wenn ich dieses H1-Element auswähle, nimmt diese Grenze die gesamte Breite dieses Containers ein. Die Breite dieses Containers ist auf 1.100 Pixel festgelegt. Daher nimmt dieses H1-Element auch hier 1.100 Pixel ein. Eine weitere wichtige Sache ist, dass wenn ich hier weitere Elemente hinzufüge, da diese Überschrift blockiert wird, wenn ich weitere Überschriften hinzufüge , sehen können Sie sehen, dass sie die nächste verfügbare Zeile benötigt. Es wird nicht direkt neben dieser Überschrift sitzen. So verhält sich das Blockelement. Lassen Sie mich ihm einfach so das H1-Tag geben. Wenn ich es mehrmals kopiere und einfüge, kannst du sehen, dass jedes dieser Elemente die gesamte Breite seines übergeordneten Elements einnimmt , nämlich in diesem Fall der Container. Deshalb können sie nicht nebeneinander sitzen. Die nächste Anzeigeeinstellung, über die wir sprechen werden, heißt Flex oder Flexbox. Es ist eine der wichtigsten Anzeigeeinstellungen, mit denen wir für die Webentwicklung arbeiten können. Lass mich dir zeigen, wie es funktioniert. Im Gegensatz zu der Blockanzeigeeinstellung, die auf das Element selbst angewendet wird, wird die Flex-Display-Einstellung auf das übergeordnete Element unserer Elemente angewendet. In diesem Fall ist dieser Container. Wir wählen unser Element nicht aus und ändern deren Anzeigeeinstellung in Flexbox. Warum? Weil Flexbox zum Ausrichten verschiedener Elemente verwendet wird, entweder horizontal oder vertikal. Lass mich dir zeigen, wie es funktioniert. Nehmen wir an, wir haben hier mehrere Überschriften. Genau so haben wir drei verschiedene Überschriften, und die Anzeigeeinstellung dieser Überschriften wird blockiert. Sie nehmen die gesamte Breite dieses Containers ein. Wenn ich diesen Container auswähle, wie Sie standardmäßig sehen können, ist die Anzeigeeinstellung auf Blockieren eingestellt. Wenn ich es in Flexbox ändere, schau was passiert. Jetzt sind diese Elemente nebeneinander ausgerichtet, und hier unter dem Layout habe ich verschiedene Eigenschaften, mit denen ich arbeiten kann. Ich habe eine Richtung. Standardmäßig ist es auf „Horizontal“ eingestellt. Ich kann es auf vertikal einstellen, um sie vertikal zu stapeln. Ich kann das Element sowohl horizontal als auch vertikal an der Mitte ausrichten . Ich kann diese Elemente so ausrichten, wie ich will. Aber im Moment müssen Sie nur wissen, dass wir Flexbox verwenden können, wann immer wir ein eindimensionales Layout erstellen möchten . Aber was ist, wenn ich ein zweidimensionales Layout erstellen möchte? In diesem Fall müssen wir ein Raster verwenden. Du hast Recht. Wir haben bereits über Grid gesprochen. Wenn du dich erinnerst, habe ich dir gesagt, dass wir jede Art von Box in ein Raster verwandeln können, und genau das meinte ich. Wenn ich hier die Anzeigeeinstellung von Flexbox zu Raster ändere, schau was passiert. Jetzt haben wir ein Zwei-mal-Zwei-Raster. Jetzt kann ich mein Raster ändern, wie ich will. Grundsätzlich können Sie einen Div-Block in ein Raster verwandeln, einen Container in ein Raster, da Sie die Anzeigeeinstellung dieser Elemente einfach ändern können. Wenn Sie einen Container haben und ihn in ein Raster umwandeln möchten, können Sie einfach die Anzeigeeinstellung hier ändern und dann erhalten Sie ein Raster. Sprechen wir jetzt über den Inline-Block. Zuerst stelle ich es wieder auf die Blockdarstellungseinstellung ein. Wenn ich möchte, dass diese Überschriften nebeneinander sitzen, kann ich den Inline-Block verwenden. Verwandeln wir es in Inline-Block und los geht's. Wie Sie jetzt sehen können, sitzen diese Elemente nebeneinander und nehmen nicht die gesamte Breite eines Elternteils ein, das ist dieser Container. Es ist gut, wenn Sie einige Tags erstellen möchten, die nebeneinander oder andere Anwendungsfälle platziert werden müssen . Aber was ist mit dem Inline? Dieser wird Inline-Block genannt. Wir haben auch das Inline. Wenn ich es auf Inline schalte, schauen wir mal, was passiert. Der Hauptunterschied zwischen dem Inline-Block und dem Inline besteht darin, dass die Inline die Eigenschaft spacing nicht berücksichtigt. Sie können die Abstandseigenschaften hier nicht ändern, aber Sie können die Topographieeigenschaften oder sagen wir die backgrounds -Eigenschaft ändern. Probieren wir es mal aus. Jetzt, da unsere Anzeigeeinstellung auf Inline eingestellt ist, ändere ich den Hintergrund hier in etwas anderes, einfach so, und ich kann das Padding oder den Rand nicht ändern. Aber warum sollten wir jemals die Inline-Anzeigeeinstellung verwenden , wenn wir das Padding oder den Rand nicht ändern können? Nun, lass mich dir dafür einen sehr guten Anwendungsfall zeigen. Ich entferne diese Überschriften. Ich gehe zum Abschnitt Hinzufügen und ziehe von hier aus einen Absatz in meinen Container. Lassen Sie mich nun weitermachen und die Farbe dieses Absatzes ändern. Aber lass mich zuerst ein Etikett geben. Ich nenne es P für Absatz und lasse es mich in Weiß ändern. Standardmäßig verwendet dieser Absatz die Einstellung für die Blockanzeige, und das ist völlig in Ordnung. Lassen Sie mich zunächst die Breite dieses Absatzes ändern. Ich stelle es einfach so auf 500 Pixel ein. Lassen Sie mich die Schriftgröße ein wenig erhöhen. Cool. Auch die Zeilenhöhe stelle ich auf 150 Prozent ein. Wir werden später über diese Einheiten sprechen. Aber im Moment möchte ich nur, dass Sie sich auf diesen Absatz konzentrieren. Im Moment hat dieser Absatz etwas Styling. Es verwendet die P-Klasse und diese P-Klasse hat etwas Styling. Was ist, wenn ich ein bestimmtes Wort hier anders stylen möchte? Nun, in diesem Fall kann ich dieses bestimmte Wort auswählen, zum Beispiel dieses Wort, und dann klicke ich von hier aus auf dieses Pinselsymbol und es heißt: „Mit Span umwickeln“. Mal sehen, was es macht. Wenn ich darauf klicke, erstellt es einen Textabschnitt, und dieser Textabschnitt verwendet standardmäßig die Einstellung für die Inlineanzeige. Wir können die Polsterung oder den Rand ändern. Selbst wenn wir die Größeneigenschaften hier ändern möchten, wirkt sich dies nicht auf dieses Wort aus. Lass es mich dir beweisen. Ich schreibe hier 500. Wie Sie sehen können, passiert nichts, da die Einstellung für die Inline-Anzeige die Größen- oder Abstandseigenschaften nicht berücksichtigt. Lassen Sie mich das vorerst zurücksetzen. Seit wir diese Textspanne erstellt haben, werde ich es als Highlight bezeichnen. Da sind wir los. Was ich tun werde, ist die Hintergrundfarbe dieser bestimmten Textabteilung zu ändern. Ich gehe hier zum Hintergründebereich und lasse mich die Hintergrundfarbe in so etwas anderes ändern. Lass es mich leichter machen. Dann modifiziere ich die Topographieeigenschaft hier. Einfach so. Wie Sie sehen können, könnten wir dieses bestimmte Wort mit einem Textabschnitt stylen, und dieser Textabschnitt verwendet die Inline-Anzeige. Dies ist ein sehr guter Anwendungsfall der Inline-Display-Einstellung. Wenn wir mehrere Absätze in unserem Projekt wie diesen haben und wir nur ein anderes Wort hervorheben möchten, können wir einfach dieses Wort auswählen, es mit der Spanne umschließen und von hier aus gebe ich ihm die gleiche Klasse wie wir gerade erstellt; hervorheben. Da sind wir los. Wenn ich die Eigenschaften hier ändere, da es sich nur um eine Klasse handelt, gelten die Änderungen sofort für alle Elemente, die diese bestimmte Klasse verwenden. Lassen Sie mich das ändern. Da sind wir los. Gehen wir nun zur letzten Anzeigeeinstellung über, die keine ist. Keiner verbirgt die Elemente tatsächlich. Lass mich dir zeigen, wie es funktioniert. Ich werde diese Absätze entfernen und hier in diesem Container füge ich einen Div-Block hinzu. Genau so, und dieser Div-Block wird eine Klasse haben. Ich schreibe eine neue Karte und ändere dann ihre Hintergrundfarbe in Weiß. Jetzt füge ich noch ein paar Elemente in diesen speziellen Div-Block hinzu. Lassen Sie mich damit beginnen, eine Überschrift hinzuzufügen, und dann füge ich hier einen Absatz hinzu, und schließlich füge ich eine Schaltfläche hinzu. Dann lass mich diesen neuen Karten-Div-Block auswählen und seine Höhe ändern. Standardmäßig ist es auf „auto“ eingestellt. Ich ändere es auf 400 Pixel. Wie ich bereits erwähnt habe, verwenden Überschrift und Absatz standardmäßig die Einstellung für Blockdarstellung. Aber was ist, wenn ich hier ein Element verstecken möchte? Nun, mal sehen, was passiert, wenn ich auf diese Einstellung ohne Anzeige klicke, die letzte Option. Da sind wir los. Jetzt ist es versteckt. Wenn ich es einfach so zurückkehre , sieht man, dass es jetzt sichtbar ist. Aber Sie können sagen: „Können wir nicht einfach die Deckkraft dieses Elements verringern?“ Mal sehen, was der Unterschied zwischen dem Abschalten der Deckkraft und dem Einstellen der Anzeigeeinstellung auf „None“ besteht. Ich wähle diesen Absatz aus und im Typografiebereich werde ich die Deckkraft dieser Elemente mit diesem Schieberegler verringern. Da sind wir los. Es ist nicht sichtbar. Es ist jedoch immer noch da. Wie Sie sehen können, nimmt es etwas Platz ein und wenn ich eine Vorschau ansehe, können Sie sehen, dass etwas da ist und ich diesen Text auswählen kann, aber er ist nicht sichtbar. In diesem Fall ist es besser, ein Display keine zu verwenden. Eine Sache, die zu erwähnen ist, ist, dass das Element immer noch in Ihrem Code angezeigt wird, wenn Sie die Einstellung „Keine anzeigen“ verwenden . Es verschwindet einfach auf der Seite und von der Benutzeroberfläche. Es nimmt keinen Platz ein, aber es ist immer noch in unserem Code vorhanden. Wenn Sie etwas vollständig aus Ihrem Code entfernen möchten, müssen Sie dieses Element entfernen. Um dies zu tun, klicken Sie einfach auf die Schaltfläche Löschen oder Rücktaste auf Ihrer Tastatur oder klicken Sie mit der rechten Maustaste auf Ihr Element und klicken Sie auf Löschen. Alles klar Leute, das ist alles für dieses Video. Im nächsten Video werden wir ausführlich über Flexmarkierungen sprechen. Wir sehen uns dann. 29. Flexbox: Im vorherigen Video haben wir über alle Anzeigeeinstellungen gesprochen, die Sie für Ihre Layouts verwenden können. In diesem Video werden wir in die Details der Verwendung von Flexbox eintauchen. Wie bereits erwähnt, ist Flexbox sehr nützlich für eindimensionale Layouts. Ich werde Ihnen einige nützliche Beispiele zeigen, die Sie wirklich verstehen können, wie Sie verschiedene Funktionen und verschiedene Eigenschaften einer Flexbox verwenden können. Hier, wie Sie sehen können, habe ich einige einfache Karten erstellt. Wenn ich zu diesem Wrapper gehe, habe ich drei verschiedene Karten. Wie Sie sehen können, hat jede Karte ein Bild, eine Überschrift und einen Textblock, nichts Phantasie. Aber ihre Ausrichtung ist nicht das, was ich will, eigentlich möchte ich, dass sie nebeneinander sitzen. Dafür können wir eine Flexbox verwenden. Wenn Sie einige Elemente ausrichten möchten, müssen Sie sicherstellen, dass die Anzeigeeinstellung dieser Elemente nicht auf Flexbox gesetzt wird. Das ist falsch. Lassen Sie mich Ihnen zeigen, was passiert. Wenn ich diese Karte, zum Beispiel die erste,wähle zum Beispiel die erste, und ich die Anzeigeeinstellung auf Flexbox drehe, passiert dies, und es ist nicht unsere Absicht. Sie müssen immer sicherstellen, dass Sie das übergeordnete Element dieser Elemente auswählen. In diesem Fall ist der übergeordnete Teil dieser Karten dieser Wrapper. Ich werde den Wrapper auswählen, der das Elternteil ist, und ich werde ihn in eine Flexbox verwandeln. Da gehen wir. Jetzt sitzen diese Karten nebeneinander, und wenn ich möchte, dass sie vertikal stapeln, kann ich die Richtung von horizontal zu vertikal ändern, einfach so. Denn jetzt werde ich es horizontal halten, und lassen Sie uns über die Ausrichtung und die Rechtfertigung sprechen. Wenn ich etwas in eine Flexbox umwandle, kann ich die Ausrichtung der untergeordneten Elemente steuern. Moment sind die Kinder dieser Flexbox diese Karten. Was ich tun werde, werde ich Ihnen zeigen, wie die Ausrichtung funktioniert. Wenn ich die Ausrichtung jetzt ändere, kannst du nicht sehen, was los ist. Warum? Da die Höhe dieses Wrappers auf auto eingestellt ist. Lassen Sie mich eine bestimmte Höhe für diesen Wrapper festlegen, ich werde es auf 500 Pixel setzen. Nun, wie Sie sehen können, sind diese Karten gestreckt, da die Option Ausrichten auf Strecken eingestellt ist. Aber was, wenn ich möchte, dass sie horizontal und vertikal an der Mitte ausgerichtet werden ? Die Ausrichtung ist auf zentriert eingestellt Wenn ich die Option Ausrichten auch auf zentrieren ändere, geschieht dies. Wie Sie sehen können, ist diese erste Karte kleiner. Der Grund ist, wenn ich auf diese Karte klicke, können Sie sehen, dass die Höhe auf auto eingestellt ist. Hier auf diesen beiden Karten haben wir vier Textzeilen, und hier haben wir nur drei Textzeilen. Wenn ich hier nur ein paar Dummy-Worte hinzufüge, können Sie sehen, dass wir hier jetzt die gleiche Höhe bekommen werden. Lassen Sie uns nun über die Ausrichtung sprechen. Ich kann es an der Spitze, an der Unterseite, in der Mitte ausrichten , ich kann es auf Dehnung einstellen. Ich kann die Rechtfertigung ändern, nach links, in die Mitte, nach rechts, und diese beiden Begründungen sind so wichtig. Dieser sagt Raum zwischen, also lasst uns sehen, was passiert. Wenn ich darauf klicke, verteilt es einen gleichmäßigen Abstand zwischen diesen Karten. Die erste Karte klebt jedoch an der linken Seite der Grenze, die dieser Wrapper ist. Die rechte Karte klebt auf der rechten Seite dieser Grenze. Aber wenn ich die Ausrichtung auf die letzte Option, Space around, ändere, können Sie sehen, dass wir einen gleichmäßigen Abstand zwischen den Karten haben, aber die erste und letzte Karte sind nicht an den Rändern dieses Wrapper befestigt. Dies ist der Hauptunterschied zwischen ihnen. Meistens verwenden wir Space zwischen, ist es viel sicherer, mit dieser Option zu arbeiten, aber Sie müssen nur den Unterschied zwischen diesen Optionen verstehen. Bisher haben wir mit den übergeordneten Elementen gearbeitet. Aber wenn wir das übergeordnete Element in eine Flexbox umwandeln, hat das Kind selbst einige Eigenschaften. Das Kind hier ist diese Karte. Ich werde eine Karte auswählen, und auf der rechten Seite können wir sehen, dass wir das Flex-Kind haben, und wir haben verschiedene Optionen hier. Wir haben Sizing, und dann haben wir Ausrichtung und Ordnung. Wenn ich darauf klicke, können Sie sehen, dass wir auch einige Optionen bekommen. Mal sehen, was passieren wird, wenn ich die Größenoption ändere. Wir haben hier drei verschiedene Größenoptionen. Der erste sagt Shrink, falls erforderlich, und standardmäßig ist er auf diese Option gesetzt. Es bedeutet, wenn wir zu anderen Haltepunkten gehen, zum Beispiel zu kleineren Geräten wie diesem, schrumpft es, da es gebraucht wird, da wir nicht so viel Platz haben. Aber schauen wir uns die nächste Option an, die „Grow“ sagt, wenn möglich. Wenn ich darauf klicke, wie Sie sehen können, gibt es keinen Platz dazwischen, und es füllt den gesamten Raum in unserem Wrapper aus, also ist dies der Unterschied zwischen ihnen. Dann haben wir nicht schrumpfen oder wachsen. Nun, wenn ich zum Tablet-Haltepunkt gehe, können Sie sehen, dass sie nicht schrumpfen, und es ist nicht gut, tatsächlich in Bezug auf die Reaktionsfähigkeit. Sie können auch die manuelle Option verwenden, aber ich habe das nie benutzt, und es ist besser, es zu vermeiden, da es Ihr Leben viel kompliziert machen wird. Ich werde es in Schrumpfen ändern, wenn nötig. Lassen Sie uns nun über Ausrichtung und Ordnung sprechen. Hier haben wir Ausrichten, und wir haben Ordnung. Manchmal müssen wir die Reihenfolge unserer Karten ändern. Natürlich können wir das im Navigator so tun, aber wir können das auch hier mit den Flex-Kind-Optionen tun. Wenn ich diese Karte auswähle und ich füge eine Combo-Klasse hinzu. Zum Beispiel, nennen wir es Summer, und ich möchte, dass es immer die letzte Karte ist, ich kann es auf die letzte einstellen, und da gehen wir. Ihre Platzierung wurde geändert. Ich kann es zuerst ändern, und ich kann es auf Nicht ändern setzen. Auch hier kann ich die angepasste Reihenfolge verwenden, aber die meiste Zeit verwenden wir zuerst und letzte, einfach so. Lassen Sie uns über die Ausrichtung sprechen. Nehmen wir an, ich möchte diese erste Karte anders ausrichten, das kann ich tun. Ich kann diese Karte auswählen, da diesem Kind eine Kombiklasse hinzugefügt wurde. Ich kann die Ausrichtung in Oben, Mitte, Unten oder wieder, Strecken oder Grundlinie ändern. Ich werde mit Auto gehen. Die automatische nimmt die Ausrichtung, die wir auf das übergeordnete Element hier gesetzt, Stretch. Aber manchmal müssen wir aus irgendwelchen Gründen diese Einstellungen außer Kraft setzen, jene Eigenschaften, die wir für das übergeordnete Element festgelegt haben. Werfen wir nun einen Blick auf ein anderes Beispiel. Hier unten habe ich einige Link-Blöcke erstellt. Dies sind einige einfache Linkblöcke, und ich habe hier einige Tags erstellt, wie Sie sehen können. Es gibt einen Wrapper namens Tags, und alle diese Tags befinden sich in diesem Wrapper. Wenn ich dieses Tag als Wrapper auswähle und es in eine Flexbox verwandle, schau nach, was passiert. Wie Sie sehen können, ist nichts organisiert und unsere Tags werden zerstört. Wie können wir das beheben? Es ist sehr einfach. Können Sie hier die Option „Untergeordnete Elemente“ sehen, die standardmäßig „Nicht umbrechen“ lautet? Wenn ich es auf Wrap setze, umhüllt es alle unsere Kinder. Diese Tags sind die Kinder des Wrappers dieses Tags, und jetzt habe ich Zugriff auf diese erweiterte Ausrichtungsoption. Hier kann ich es auf Zeilen ausrichten: Start setzen. Jetzt umschließt der Wrapper dieses Tags alle untergeordneten Elemente. Wenn ich diese Tags immer wieder kopiere und einfüge, können Sie sehen, dass sie perfekt wie erwartet ausgerichtet sind. Können Sie sehen, wie leistungsstark es ist, mit Flexbox zu arbeiten? Werfen wir noch einmal einen Blick auf die Bestellung. Hier, wenn ich möchte, dass dieses UI/UX-Design-Tag immer unser letztes Element ist, kann ich ihm eine bestimmte Combo-Klasse geben. Zum Beispiel werde ich UI/UX schreiben, und dann werde ich die Reihenfolge auf die letzte ändern, genau so. Leute, das ist alles für dieses Video, ich hoffe, es hat euch gefallen, ich sehe euch im nächsten. 30. Flexbox: Jetzt, da Sie gelernt haben, wie Sie mit Flexbox arbeiten, ist es an der Zeit, Ihre Fähigkeiten herauszufordern. Workflow hat ein sehr cooles Flexbox-Spiel geschaffen damit Sie üben können, was Sie gelernt haben. Wenn Sie zu flexboxgame.com gehen, können Sie dieses Spiel in einer Vorschau anzeigen und Sie können dieses Spiel tatsächlich spielen. Sie können einige Übungen machen. Es gibt 28 verschiedene CSS-Flexbox-Herausforderungen, die Sie lösen können um zu sehen, ob Sie wirklich verstehen, wie die Flexbox funktioniert oder nicht. Ich möchte, dass Sie voran gehen und diese Herausforderungen einzeln von Level 1 bis 28 lösen . Wenn man sich von Level 1 auf Level 28 bewegt, wird es schwieriger und schwieriger, diese Herausforderungen zu lösen, aber keine Sorge, ich bin mir ziemlich sicher, dass man sie lösen kann. Was zählt, ist, dass Sie versuchen, sie zu lösen. Es spielt keine Rolle, wie viel Zeit es braucht, um sie zu lösen. Was zählt, ist es zu versuchen. Im nächsten Video werden wir all diese Herausforderungen gemeinsam lösen. Wir sehen uns in der nächsten. 31. Challenge: Hey, ich hoffe, du warst in der Lage, alle 28 Flexbox-Herausforderungen zu lösen. Aber wenn du es nicht konntest, ist das in Ordnung, denn zusammen werden du und ich durch alle 28 Levels gehen und wir werden jeden einzelnen von ihnen lösen. Bist du bereit? Lasst uns anfangen. Beginnen wir zunächst mit der Stufe 1. Mal sehen, was wir hier haben. Es sagt, bewegen Sie den grünen Kreis in den Umriss mit Flex Layout Einstellung. Zuerst müssen wir das Elternteil auswählen. Denken Sie daran, immer zuerst das übergeordnete Element auszuwählen. Es sagt, wählen Sie diese weiße Box und spielen Sie dann mit Flex-Layout im rechten Bereich. Hier müssen wir nur die Rechtfertigung nach rechts ändern. Das ist alles. Ebene 1 ist fest. Gehen wir zum nächsten, Level 2. Hier haben wir zwei Kreise mit zwei Platzhaltern. Es ist auch einfach. Ich werde einen Elternteil auswählen, der dieser Spielplatz ist und es so zum Zentrum rechtfertigen. Gehen wir zum nächsten. Hier haben wir ein, zwei, drei Kreise. Wie ich sehen kann, müssen wir die Rechtfertigung so modifizieren, dass sie einfach so räumt. Gehen wir nun zur Stufe 4 über. Cool. Hier ist das einzige, was wir tun müssen, das Ausrichten nach unten zu ändern. Was ist mit hier? Nun, wir müssen sowohl die Ausrichtung als auch die Ausrichtung hier ändern , um diesen Kreis an der Mitte auszurichten. Ich werde die Ausrichtung und die Ausrichtung ändern. Nummer 5 ist gelöst. Gehen wir zum nächsten. Hier, zuerst, werde ich es an der Mitte ausrichten, und dann werde ich Raum um diesen wählen. Der nächste hier, wir müssen nur die Richtung ändern. Diese Kreise sollten vertikal gestapelt werden. Ich werde die Richtung in vertikal ändern und sie ist gelöst. Gehen wir zur Nummer 8. Auch hier müssen wir die Richtung auf Vertikal ändern. Außerdem werde ich die Justify ändern, und schließlich werde ich es nach rechts ausrichten. Fertig. Der nächste. Hier werden wir die umgekehrte Option verwenden. Wir haben noch nicht darüber gesprochen, aber wenn Sie einen Blick auf den Abschnitt Richtung direkt neben diesen Registerkarten werfen, haben wir dieses Symbol. Es gibt zwei Pfeile, und dies ist die Option „Umkehren“. Lasst uns darauf klicken. Fertig. Gehen wir zum nächsten. Hier zuerst werde ich die Richtung auf Vertikal ändern und dann werde ich es auf der rechten Seite und unten ausrichten, aber wir haben ein Problem. Hier haben wir die Nummer 1, aber die Nummer 1 sollte hier unten platziert werden. Daher werde ich das Kind auswählen, das dieser Kreis ist. Stellen Sie sicher, dass Sie das Kind auswählen, und ich werde die Bestellung ändern. Hier werde ich die Reihenfolge ändern, um zuletzt zu machen. Für diesen, den mittleren, werde ich die Reihenfolge auf den ersten ändern. Fertig. Können Sie sehen, wie einfach es ist, mit Flexbox zu arbeiten? Was ist mit dem hier? Lassen Sie uns zuerst die Richtung vertikal machen, dann werde ich die Rechtfertigung in Abstand zwischen ändern, und schließlich werde ich die Reihenfolge ändern. Ich werde zuerst den Kreis auswählen, der dieses Kind ist, und die Reihenfolge auf die letzte ändern, und dieser, der zweite sollte zuerst sein. Jetzt schauen wir mal, was wir hier haben. Wie Sie hier sehen können, haben wir eins, zwei, drei, und die Platzhalter sind drei, zwei, eins. Wir müssen das Layout erst so umkehren. Ich werde auf diese Reverse-Taste klicken, und dann werde ich es unten ausrichten, und schließlich werde ich Raum zwischen verwenden. Fertig. Gehen wir zum nächsten. Mal sehen, was wir hier haben. Wie Sie sehen können, sind diese Kreise geschrumpft, und das ist nicht das, was wir wollen. Also, was sollen wir tun? Erinnerst du dich an das Tag-Beispiel, das ich dir vorhin gezeigt habe? Wir änderten die Kinder zu wickeln. Das ist genau das, was wir hier tun müssen. Wählen Sie zuerst das übergeordnete Element aus und ändern Sie die untergeordneten Elemente in Umbruch und fertig. Wir müssen nichts anderes anfassen. Gehen wir zu Level 14. Auch hier müssen Sie nur die Kinder in Wrap ändern, und dann müssen wir die Ausrichtung ändern. Zuerst werde ich es hier an der Mitte ausrichten, und dann werde ich die Justify to center ändern. Gehen wir zu Level 15. Wieder müssen wir die Kinder in Wrap ändern, und dann werde ich die Ausrichten hier auf Raum zwischen ändern, und schließlich werde ich die Ausrichtung in Leerzeichen zwischen ändern. Jetzt gehen wir zum nächsten. Auch hier müssen wir die Kinder in Wrap ändern. Mal sehen, was wir hier haben. Ganz oben haben wir grüne Platzhalter, dann orangefarbene Platzhalter und schließlich die violetten Platzhalter. Mal sehen, was passiert, wenn ich die Richtung von Horizontal zu Vertikal ändere. Da gehen wir. Wir sind fast da. Nun, was ich tun werde, ist die Ausrichtung in Mitte zu ändern, und auch ich werde die Ausrichten hier auf Mitte ändern. Gehen wir zum nächsten. Mal sehen, was wir hier haben. Eins, zwei, vier und fünf sind richtig platziert, das einzige, was wir tun müssen, ist die Ausrichtung dieser grünen Kreise zu ändern. Ich werde diesen Kreis auswählen und dann werde ich die Ausrichtung nach unten ändern getan. Jetzt sind wir in Level 18. Mal sehen, was wir hier haben. Auch hier können wir uns immer einen Hinweis ansehen. Es sagt umgekehrtes Layout auf dem Flex-Container und Änderung der Ausrichtung auf zwei der Flex-Kinder. Zuerst werde ich den Container auswählen, der dieser Spielplatz ist, und dann werde ich ihn umkehren. Wählen wir nun diesen Kreis eins aus, richten Sie ihn an der Mitte aus, diesen Kreis drei, richten Sie ihn an der Unterseite aus, und schließlich werde ich wieder das übergeordnete Element auswählen und ändern Sie die Ausrichtung in Raum zwischen einfach so. Nun gehen wir zum nächsten Level, Level 19. Zuerst hier werde ich diesen Kreis auswählen und ich werde die Größe ändern, um zu wachsen, wenn möglich, und es ist fertig. Gehen wir zu Level 20. Nummer eins ist richtig platziert, Nummer drei und zwei sollten geändert werden. Ich werde Nummer zwei auswählen und die Größe ändern, um zu wachsen, wenn möglich, und es ist fertig. Gehen wir zum nächsten, Level 21. Hier werfen wir einen Blick auf den Hinweis. Es sagt, der grüne Kreis sollte Breite 200 Pixel haben. Ja, das stimmt. Ich werde Kreis eins auswählen, und ich werde die Breite von 100 Pixel auf 200 Pixel ändern. Ich werde Kreis zwei auswählen und die Größe ändern, um wenn möglich zu wachsen. Gehen wir zu Level 22. Hier sollte die Nummer eins hier in der Mitte sein, und die Nummer drei sollte hier platziert werden. Zuerst werde ich Nummer drei auswählen, und ich werde die Reihenfolge auf die erste ändern, und es ist erledigt. Gehen wir zur nächsten Herausforderung. Mal sehen, was wir hier haben. Diese Nummer zwei sollte das letzte Kind sein. Ich werde die Reihenfolge auf die letzte ändern. Nummer drei sollte das erste Kind sein, also werde ich die Reihenfolge auf zuerst ändern, und der Rest ist in Ordnung. Ich gehe auf die nächste Ebene, Level 24. Mal sehen, was wir hier haben. Zuerst werde ich den Spielplatz auswählen, der hier das Elternteil ist, und ich werde die Kinder von Nicht umwickeln zu Wrap ändern. Noch passiert nichts. Das ist in Ordnung. Dann sollte diese Nummer drei hier die ganze Breite dieses Behälters einnehmen. Wie Sie hier sehen können, haben wir einen Hinweis. Es sagt, raten Sie, was Sie tun müssen, wenn Sie das Kind über die volle Breite seines übergeordneten Containers ziehen möchten? Setze einfach seine Breite auf 100 Prozent, und das ist genau das, was wir tun werden. Ich wähle Nummer drei und ich werde die Breite auf 100 Prozent ändern. Dann werde ich die Reihenfolge zuerst ändern. Jetzt muss ich das übergeordnete Element auswählen und die Zeilenoption hier ändern. Ich werde die Zeilen „An ausrichten ausrichten“ ändern, starten, und es ist fertig. Gehen wir zum nächsten. Diesmal gibt es keinen Hinweis, das ist in Ordnung. Mal sehen, was wir haben. Erstens sollte der zweite Kreis hier anstelle dieses grünen Kreises platziert werden, daher werde ich dies auswählen und ich werde seine Reihenfolge auf den ersten ändern. Dann, wie Sie sehen können, sollte Nummer eins die gesamte Breite dieses grünen Platzhalters einnehmen. Daher werde ich seine Breite auf 100 Prozent ändern, und wie Sie sehen können, da wir seine Kinder nicht in Wrap geändert haben, ist alles hier durcheinander. Ich werde die Kinder in Wrap umstellen. Wir kommen dorthin und sehen, was wir haben. Zuerst werde ich diesen Kreis drei auswählen und die Größe ändern, um zu wachsen, wenn möglich. Das einzige, was noch übrig ist, ist die Ausrichtung. Also werde ich das übergeordnete Element auswählen und die Ausrichtung hier in Abstand zwischen ändern. Alles klar, fertig. Gehen wir zum nächsten. Hinweis, die Einstellung „Ausrichten“ für einzelne Flex-Kinder wird Ihnen helfen. Zuerst sollte dieser Kreis der letzte sein, da er unten platziert werden wird. Ich werde seine Reihenfolge auf die letzte ändern. Die Bestellung ist jetzt korrekt. Dann wähle ich Kreis eins aus und setze seine Breite auf 100 Prozent. Schließlich wähle ich das übergeordnete Element aus und ändere es in Wrap. Ich wähle Kreis eins, diesen, und ändere seine Ausrichtung nach unten. Ich wähle noch einmal die Eltern aus. Mal sehen, wie wir diese beiden Kreise ausrichten können. Wenn ich die Rechtfertigung nach rechts ändere, wird Nummer zwei richtig platziert. Nun, ich muss die Ausrichtung dieses speziellen Kreises ändern, Nummer drei. Ich muss es auswählen und lassen Sie uns seine Ausrichtung nach unten ändern. Level 26 ist ebenfalls erledigt. Lasst uns eins auf Level 27 bewegen. Mal sehen, was wir hier haben. Nummer zwei sollte die gesamte Breite dieses Platzhalters einnehmen. Ich wähle das aus und ich werde die Breite auf 100 Prozent ändern. Dann, wie Sie wissen, müssen wir das übergeordnete Element auswählen und es so ändern, dass es umgebrochen wird. Dann wählen wir Kreis zwei und machen es zuerst. Was haben wir sonst noch hier? Wenn ich Kreis eins auswähle und die Größe so ändere, dass sie wächst, wenn möglich wird sie wachsen, aber die Reihenfolge ist nicht korrekt. Was ich tun werde, ist das Elternteil auszuwählen und die Richtung einfach so umzukehren. Ich werde diesen Kreis fünf auswählen und die Größe so einstellen, dass sie wächst, wenn möglich. Schließlich, während es ausgewählt ist, werde ich es nach unten ausrichten. Fertig. Last but not least, Level 28, jetzt kombinieren Sie all die Dinge, die Sie heute gelernt haben, um dies zu lösen. Mal sehen, wie wir das lösen können. Interessant, nicht wahr? Mal sehen, was wir haben. Hier haben wir eins, vier, fünf. Ich werde das Elternteil auswählen und zuerst die Richtung umkehren, genau so, da einer hier ist. Dann wähle ich den zweiten Kreis aus und mache ihn zuerst. Da wir das umkehren, funktioniert die Reihenfolge nicht wie erwartet. Also, wenn ich zuerst wähle, bedeutet es jetzt zuletzt, und wenn ich letztes wähle, bedeutet es zuerst. Aber für jetzt, lass uns zuerst wählen. Ich werde diesen grünen Kreis auswählen und ihn zuletzt machen. Während es ausgewählt ist, setze ich seine Breite auf 100 Prozent ein, wähle das übergeordnete Element aus und wähle Wrap aus. Ich werde diesen grünen Kreis auswählen und seine Ausrichtung nach unten ändern. Ich wähle diesen Kreis aus, diesen lila, und ändere seine Reihenfolge auf die letzte. Wählen wir einen dieser orangefarbenen Kreise aus und richten sie an der Unterseite aus. Schließlich müssen wir unseren zweiten Kreis auswählen und seine Größe ändern, um wenn möglich zu wachsen. Da gehen wir. Wir haben alle 28 Herausforderungen von CSS Flexbox erfolgreich gelöst. Lassen Sie mich Ihnen etwas sagen, wenn Sie einige dieser Herausforderungen nicht lösen könnten, das ist in Ordnung, denn in realen Projekten verwenden wir nie einige dieser Layouts. Aber es ist gut für Sie zu sehen, was möglich ist und wie Sie die Flexbox nutzen können. Das ist alles für dieses Video. Ich hoffe, es hat dir gefallen. Wir sehen uns im nächsten. 32. Flexbox: Sie nun über Flexbox und Grid erfahren haben, ist es an der Zeit, sie nebeneinander zu vergleichen, um zu sehen, welche Sie für welchen Zweck verwenden sollten. Lassen Sie mich erwähnen, dass es manchmal keinen richtigen oder falschen Weg gibt, wenn es um die Webentwicklung geht , weil Sie etwas mit Grid erreichen können und Sie das Gleiche mit einer Flexbox erreichen können. Manchmal geht es um unsere Präferenzen und wie wir unsere Website strukturieren wollen. Daher werde ich Ihnen einige Beispiele zeigen, um den Unterschied besser zu verstehen. Zunächst einmal müssen Sie wissen, dass, wenn wir eindimensionale Layouts haben, es wahrscheinlich am besten ist, eine Flexbox zu verwenden, aber manchmal, wenn Sie unser Design reaktionsschnell machen und unser Leben viel einfacher machen möchten, können wir dasselbe mit einem Raster tun. Hier habe ich eine Karte in diesem Abschnitt. Ich gehe weiter und füge hier einen Container hinzu. Ich werde einen Container per Drag & Drop ziehen. Dann lassen Sie mich den Klassencontainer dazu hinzufügen. Schließlich werde ich diese Karte per Drag & Drop in meinen Container. Schön. Jetzt kopiere ich es und füge es dreimal ein. Lassen Sie mich meinen Abschnitt auswählen, da ich ihn in eine Flexbox verwandelt habe, und jetzt werde ich meinen Container auswählen und ich werde die Anzeigeeinstellung auf Flexbox ändern. Hier haben wir eine horizontale Flexbox. Wie Sie sehen können, sieht alles gut aus. Ich kann die Rechtfertigung in Raum zwischen Raum ändern, links, Mitte, was immer ich will. Aber jetzt verwende ich ein eindimensionales Layout. Wenn ich zwei Container wie diesen habe, haben wir jetzt ein zweidimensionales Layout. Es ist wahrscheinlich sinnvoller, ein Gitter zu verwenden. Lassen Sie uns nun dieses Layout auf verschiedenen Haltepunkten überprüfen. Ich gehe zu Tablets und wie Sie sehen können, schrumpft es. Schön. Wenn Sie jedoch unser Design reaktionsfähiger gestalten möchten, wäre es sinnvoll, auch ein Raster zu verwenden, sogar für eindimensionale Layouts. Es liegt ganz an dir. Wie ich bereits erwähnt habe, gibt es keinen richtigen oder falschen Weg. Manchmal müssen wir uns nur auf unsere Vorlieben konzentrieren und uns auf die Tatsache konzentrieren, dass der Weg zu unseren Bedürfnissen besser passt. Lassen Sie mich jetzt voran und ziehen Sie ein Gitter hierher. Ich werde es in meinen Bereich legen und diese Karten in dieses Raster ziehen lassen. Natürlich könnte ich diesen Container in ein Raster verwandeln, aber ich werde das manuell machen, genau so. Ich werde den Behälter entfernen. Jetzt haben wir dieses Gitter, das sich innerhalb unseres Abschnitts befindet. Hoppla, ich werde diese Karte noch einmal kopieren und einfügen. Lassen Sie mich dieses Raster auswählen und ich werde eine Klasse hinzufügen. Ich nenne es „Grid“. Dann lassen Sie mich etwas Marge von beiden Seiten hinzufügen. Cool. Genau wie eine Flexbox können wir auch das Kind eines Gitters steuern. Hier, wenn ich dieses Kind, diese Karte, Ich kann die Ausrichtung ändern, Ich kann die Rechtfertigung hier ändern, Ich kann die Reihenfolge ändern, und so weiter. Sie müssen entscheiden, ob Sie ein Raster oder Flexbox verwenden möchten. Stellen Sie sicher, dass Sie mit beiden arbeiten und überprüfen Sie , welche sinnvoller für Ihre Bedürfnisse ist. Alles klar, Jungs, das ist alles für dieses Video, ich sehe euch im nächsten. 33. Abstände: Hier habe ich eine Karte, aber sie sieht nicht gut aus. Warum? Wegen der Abstände. Hier kann der Inhalt nicht atmen, daher muss ich den Abstand zwischen diesen Elementen ändern. Wie ich bereits erwähnt habe, haben wir, wenn es um Abstände geht, wenn es um Abstände geht,zwei Hauptkomponenten. Wir haben den Rand und die Polsterung. Der Rand ist der Raum außerhalb des Elements, und die Polsterung ist der Raum in einem Element. Werfen wir einen Blick. Hier, ich wähle meine Karte aus. Wenn ich hier etwas Atemraum für den Textblock hinzufügen möchte, werde ich das auswählen, und ich kann linke Polsterung und rechte Polsterung hinzufügen, genau so. Alternativ kann ich die Karte auswählen und die Polsterung hinzufügen. Diese Polsterung gilt jedoch für alle Elemente in dieser Karte, alle untergeordneten Elemente dieses Blocks. Versuchen wir es mal. Genau so, und da gehen wir. Aber das ist nicht das, was ich will. Ich werde den Prozess rückgängig machen, und ich werde den Textblock auswählen, und ich werde 20 Pixel und linke und rechte Polsterung hinzufügen. Es ist jedoch sehr mühsam und zeitaufwendig, die Polsterung für jede Seite einzeln hinzuzufügen. Daher kann ich die Wahltaste unter macOS und Alt-Taste unter Windows gedrückt halten und dann klicken und ziehen, um die Polsterung für gegenüberliegende Seiten anzupassen. Genau so. Wenn ich die Polsterung für alle Seiten wie oben, unten, links und rechts anstelle der Wahltaste oder Alt-Taste ändern möchte, muss ich die Umschalttaste auf meiner Tastatur gedrückt halten und dann klicken und ziehen. Sieh es dir an. Das spart viel Zeit. Aber was ist mit der Marge? Lassen Sie mich die obere Polsterung hier auf Null setzen. Ich werde diese Überschrift auswählen. Dieses Mal, anstatt aufzufüllen, werde ich den Rand ändern, den unteren Rand. Wie ich bereits erwähnt habe, ist der Rand der Raum außerhalb eines Elements. Daher werde ich das um 10 Pixel und den oberen Rand um 10 Pixel erhöhen . Es sieht jetzt viel besser aus. Jetzt ist diese Karte in einem Behälter. Wenn ich es für eine Sekunde außerhalb dieses Behälters nehme, können Sie sehen, dass es die Kanten berührt. Wenn ich es an der Mitte meines Abschnitts ausrichten möchte, lassen Sie mich diesen Container für eine Sekunde entfernen. Wenn ich es sowohl horizontal als auch vertikal zentrieren möchte, habe ich einige Optionen. Die erste Option ist, dass ich voran gehen und die Marge manuell festlegen kann, genau so, was keine gute Option ist und Sie das nie versuchen sollten. Der Grund ist, dass, wenn Sie den Rand manuell einstellen, es auf einem Gerät gut aussehen kann. Wenn Sie jedoch zum iPad-Breakpoint gehen, können Sie sehen, dass er nicht zentriert ist, da er immer noch einen 435-Pixel-Rand hat. solltest du nie tun. Ich werde diese Marge zurücksetzen. Ich werde darauf klicken. Lassen Sie uns auf Zurücksetzen klicken. Alternativ können Sie die Wahltaste oder die Alt-Taste gedrückt halten und dann genau so darauf klicken. Wie kann ich es an der Mitte ausrichten? Ich habe verschiedene Möglichkeiten. Wenn Sie ein Element haben, das eine feste Breite wie diese hat, wenn die Breite hier definiert ist, wie Sie hier sehen können, beträgt die Breite 300 Pixel, können Sie den linken und rechten Rand auf auto setzen. Wenn ich darauf klicke, kann ich den linken Rand auf auto setzen und dann werde ich den rechten Rand auch auf auto setzen. Da gehen wir. Jetzt ist es perfekt zentriert. Versuchen wir es mal. Ich werde überprüfen, ob es reagiert und ob es richtig funktioniert. Ich gehe zu Tablet, wie Sie sehen können, es ist immer noch in der Mitte. Das ist perfekt. Dies ist eine Option. Lassen Sie mich diese Ränder zurücksetzen. Du könntest einfach auf diesen Button klicken. Jetzt sind sowohl der linke als auch der rechte Rand auf auto eingestellt. Beachten Sie jedoch, dass diese Weise nur funktioniert, wenn Sie eine definierte Breite haben. Wenn nicht, können Sie einen anderen Weg verwenden, und das sind Flex-Markierungen. Lassen Sie mich diese Ränder zurücksetzen. Jetzt habe ich diese Karte, und ich werde den Abschnitt auswählen und die Anzeigeeinstellung ist auf Blockierung eingestellt. Ich werde es auf Flex setzen. Ich werde es an der Mitte ausrichten und es zum Zentrum rechtfertigen. Da gehen wir. Wir haben das Gleiche, aber diese Option funktioniert auch, wenn Ihr Element keine definierte Breite hat. Jetzt zeige ich Ihnen ein weiteres Beispiel. Zuerst werde ich diese Karte auswählen, und wie Sie sehen können, ist ihre Anzeigeeinstellung auf Blockieren eingestellt. Ich werde es für eine Sekunde in Flex ändern und alles ist unorganisiert, weil die Richtung auf horizontal eingestellt ist. Ich werde es in Vertikal ändern, wir sind wieder gut. Jetzt werde ich die Ausrichtung in die Mitte ändern. Lassen Sie mich jetzt das Bild auswählen. Lassen Sie mich seine Breite auf 200 Pixel und seine Höhe auch auf 200 Pixel ändern. Manchmal müssen wir dieses Bild möglicherweise nach oben verschieben, um ein Overlay-Bild zu erhalten. Um das zu tun, können wir negativen Raum verwenden. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Ich werde dieses Bild auswählen, und hier am Rand werde ich ihm eine negative Marge geben. Genau so. Da gehen wir. Negative Ränder zu verwenden, ist völlig in Ordnung. In der Tat, viele beliebte Websites verwenden sie. Alles klar, Leute, hier geht es nur um Abstände. Ich hoffe, es hat dir gefallen. Wir sehen uns im nächsten Video. 34. Größe: In der Webentwicklung gibt es verschiedene Größeneinheiten, die wir verwenden können. In diesem Video werden wir über jeden einzelnen von ihnen sprechen. Lasst uns anfangen. Zuallererst werde ich voran gehen und ein Bild per Drag & Drop in meine Leinwand ziehen. Lass es mich hier in meinen Bereich fallen. Für Bilder können Sie die Abmessungen direkt hier in den Bildeinstellungen angeben, aber es ist kein guter Weg. Warum? Lassen Sie mich es Ihnen zeigen. Hier werde ich die Breite auf 400 Pixel ändern und die Höhe wird automatisch sein. Vorerst sieht es gut aus. Aber wenn ich zum Desktop-Breakpoint gehe und einige Änderungen vornehmen möchte, speziell für diese Dimension, gelten die Änderungen auch für die Desktop-Version. Lassen Sie mich es Ihnen zeigen. Ich werde darauf doppelklicken, und ich werde die Breite hier auf 300 Pixel verringern. Wenn ich zum Desktop-Breakpoint zurückgehe, da gehen wir, unser Bild wird in der Größe verändert und das ist nicht gut, wenn wir responsive Webseiten entwerfen wollen. Daher ist es immer gut, Klassen zu verwenden, um die Größe Ihrer Bilder zu vergrößern. Sie sollten es vermeiden, Ihre Bilder hier so viel wie möglich zu dimensionieren. Ich werde es auf Auto setzen. Großartig. Nun, auf der rechten Seite, können Sie sehen, dass ist in der Seitenwand, wir haben die Größe Abschnitt. Wie ich bereits erwähnt habe, sind dies alle CSS-Eigenschaften und die Größe ist auch eine CSS-Eigenschaft. Wir haben verschiedene Einheiten, mit denen wir arbeiten können. Die einfachste ist Pixel. Die Abmessungen aller Elemente sind standardmäßig auf auto festgelegt. Wie Sie sehen können, steht „auto“. Auto bestimmt die Abmessungen dieses Elements in Bezug auf das übergeordnete Element dieses Elements. In diesem Fall sind die Eltern dieses Bildes dieser Abschnitt. Hier werden Breite und Höhe auf auto gesetzt. Ich werde dieses Bild auswählen und anstelle von Auto werde ich ihm einen bestimmten Wert geben. Nehmen wir an, 350 Pixel. Um das Gerät zu schreiben, können Sie einfach px schreiben, oder Sie könnten einfach auf dieses kleine „PX“ klicken und Sie werden alle verfügbaren Einheiten sehen. Ich werde „PX“ auswählen, lassen Sie mich es vergrößern. Ich werde es auf 450 Pixel setzen. Jetzt hat dieses Bild eine bestimmte Breite. Wir können auch eine bestimmte Höhe dafür festlegen. Setzen wir es auf 350 Pixel, genau so. Aber was ist mit anderen Einheiten? Wir haben Prozentsatz. Ich werde das wählen. Nun, Prozentsatz ist eigentlich auch relativ zum übergeordneten Element. Zum Beispiel, wenn ich möchte, dass dieses Bild 30 Prozent des verfügbaren Speicherplatzes hier in diesem Abschnitt belegt, der das übergeordnete Element ist, kann ich es auswählen und ich kann es auf 30 Prozent setzen. Beachten Sie, dass der Prozentsatz tatsächlich einen Teil des verfügbaren Speicherplatzes beansprucht. Hier für diesen Abschnitt habe ich gerade eine 40 Pixel linke und rechte Polsterung. Daher nimmt es hier 30 Prozent des linken Raums ein. Lassen Sie mich mein Bild auswählen. Ich kann es einfach auf 50 Prozent setzen oder was auch immer ich will. Dasselbe passiert mit der Höhe. Wenn ich dieses Bild aus meinem Abschnitt hier verschiebe und das übergeordnete Bild jetzt der Körper ist, so dass es 50 Prozent des Browserfensters einnimmt. Schauen wir es uns an. Wenn ich eine Vorschau darauf, wie Sie sehen können, nimmt es 50 Prozent meines Browserfensters ein. Wenn ich nur die Bemaßung ändere, können Sie sehen, dass sie immer noch 50 Prozent der Bemaßung beansprucht. Es ist einfach, nicht wahr? Jetzt gehen wir zur nächsten Einheit. Die nächste Einheit ist em. Wir werden über ems und rems sprechen, obwohl sie nicht so nützlich sind. Fangen wir mit Ems an. Eigentlich sind ems und rems relativ zur Schriftgröße. Hier wird die Schriftgröße auf 14 Pixel eingestellt. Ein em ist gleich 14 Pixel. Wenn ich die Breite auf 280 Pixel einstellen möchte, kann ich diesen Betrag einfach mit dieser Schriftgröße multiplizieren. Sagen wir 20. Also 20 ems entspricht 280 Pixel. Lasst uns 20 Ems schreiben. Da gehen wir. Wenn ich nur 280 Pixel schreibe, so können Sie sehen, dass dies das Gleiche ist. Lass mich dir das beweisen. Da gehen wir. Nichts ändert sich, da 280 Pixel gleich 20 ems sind. Lassen Sie mich noch 20 Ems schreiben. Wenn ich nun versuche, die Schriftgröße zu erhöhen, ändert sich auch diese Breite entsprechend. Ich werde die Wahltaste auf meiner Tastatur oder Alt-Taste gedrückt halten , wenn Sie Windows verwenden, und klicken Sie einfach und ziehen. Da gehen wir. Ich werde die Schriftgröße auf 30. Ein em ist jetzt gleich 30 Pixel. Daher beträgt die Breite dieses Bildes jetzt 600 Pixel. Sie können ems manchmal verwenden. Zum Beispiel, wenn Sie eine Karte entwerfen möchten und Sie möchten, dass alle Elemente die Schriftgröße berücksichtigen. Aber einer der besten Anwendungsfälle für die Verwendung von ems ist in Schaltflächen. Ich gehe voran und ziehe einen Knopf hier ab. Diese Schaltfläche hat standardmäßig eine 15-Pixel links in der rechten Polsterung. Mal sehen, was passiert, wenn ich die Schriftgröße ändere. Zuerst lassen Sie mich diesem Knopf eine Klasse geben. Ich werde New Button schreiben. Wenn ich versuche, die Schriftgröße zu erhöhen, mal sehen, was passiert. Kannst du das sehen? Die Polsterung bleibt gleich. Wir können dieses Problem einfach beheben. Zuerst werde ich die Größe auf 16 Pixel einstellen. Jetzt hier für die Polsterung, werde ich ems verwenden, für die obere, untere, linke und rechte Polsterung. Ich werde Top-Polsterung auswählen und hier werde ich ein em für den Boden schreiben. Das gleiche, ein em für die linke, ein em und für das rechte em. Jetzt haben wir eine voll reagierende Schaltfläche, da diese Polsterung jetzt relativ zu unserer Schriftgröße sind, so dass sie unsere Schriftgröße respektieren. Ich werde voran gehen und die Schriftgröße erhöhen. Wie Sie sehen können, die Padding Skala als auch. Dies ist einer der beliebtesten Anwendungsfälle. Aber was ist mit Rems? Lassen Sie mich dieses Bild auswählen. Nun, rems steht eigentlich für root ems, und es bedeutet, dass es die Topografiegröße, die wir hier festgelegt haben, nicht respektiert. Es überprüft nur die Schriftgröße des Browsers des Benutzers. Standardmäßig ist es auf 16 Pixel festgelegt, es sei denn, der Benutzer ändert dies. Aber wenn ich hier die Breite auf 20 rem setze, genau so, und ich versuche, die Schriftgröße zu erhöhen, passiert nichts, weil rem die Schriftgröße hier nicht respektiert. Versuchen wir es mal. Da gehen wir. Nichts passiert. Wenn ich jedoch zu meinen Browsereinstellungen gehe und versuche, die Schriftgröße zu erhöhen, wird dieses Bild größer sein. Dies sind einige fortgeschrittene Einheiten, die Sie vielleicht nicht brauchen, um sie zu benutzen, aber ich möchte nur, dass Sie wissen, dass sie existieren. Jetzt reden wir über ch. Lassen Sie mich voran gehen und ziehen Sie einen Absatz hier, in dem Sie wirklich verstehen können , was die ch bedeutet. Ich werde es direkt in meinen Bereich ziehen und ablegen. Lassen Sie mich die Farbe hier auf Weiß ändern. Cool. Wie wir sehen können, ist die Textbreite hier so lang, daher ist es sehr schwer, diesen Absatz zu lesen, und es ist eine gute Praxis, die Anzahl der Zeichen in einem Absatz zu begrenzen. Wie können wir das machen? Wir können entweder eine bestimmte Breite dafür festlegen. Wir können Prozentsatz verwenden, oder wir können CH verwenden. Ich werde es auf CH setzen. Also, was ist ein CH? Eigentlich entspricht 10 CH 10 Nullen dieser bestimmten Schriftart. Was meine ich damit? Lassen Sie mich diese Breite auf, sagen wir 50 CH. Es bedeutet, dass die Breite dieses Absatzes jetzt auf 50 Nullen dieser bestimmten Schriftart eingestellt ist. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Ich werde hier etwas schreiben. Lassen Sie mich diese Schriftgröße größer machen, ich werde es auf 20. Schreiben wir „Hallo“. Dann werde ich die Breite auf 10 CH ändern. Zehn CH bedeutet nicht 10 Zeichen. Dies ist ein sehr häufiger Fehler, den die meisten Anfänger machen. Hier geht es nicht um Zeichen. Lassen Sie mich Ihnen das beweisen. Hier werde ich Hallo schreiben. Wieder werde ich Hallo schreiben. Noch einmal, lasst uns schreiben, hallo, nur, er, hier. Zählen wir es, 1, 2, 3, 4, 5, 6, 7, 8 , 9, 10, 11 und 12. Es sind 12 Charaktere. Aber wenn ich „Enter“ drücke und versuche, Nullen zu schreiben, sollten wir in der Lage sein, genau 10 Nullen zu schreiben, 1, 2, 3, 4,5, 6, 7 , 8, 9 und 10, die nächste Null geht in die nächste Zeile. So funktioniert das CH. Wenn ich die Schriftart hier in etwas anderes ändere, können Sie sehen, dass sich auch die Breite ändert. Kannst du das sehen? In Ordnung. Nun gehen wir zur nächsten Einheit, die VW und VH ist. VW steht für Ansichtsfensterbreite und VH steht für Ansichtsfensterhöhe. Also, was meinen sie? Nun, ich werde dieses Bild auswählen und ich werde die Breite auf 50 VW einstellen . Was bedeutet das? Viewport ist tatsächlich die Größe unseres Browserfensters. Wenn ich einen 13-Zoll-Bildschirm verwende, ist mein Ansichtsfenster ein 13-Zoll-Bildschirm. Wenn ich einen größeren Bildschirm verwende, mein Ansichtsfenster größer. Okay, wenn ich also die Breite auf 50 VW setze, bedeutet dies, dass dieses Bild 50 Prozent der Breite des Ansichtsfensters einnehmen sollte. Versuchen wir es mal. Da gehen wir. Wie Sie sehen können, nimmt er 50 Prozent der Breite des Ansichtsfensters ein. Wir können dasselbe für die Höhe tun. Ich kann die Höhe auf, sagen wir, 50 VH. Versuchen wir es mal. Wie wir sehen können, nimmt es 50 Prozent meiner Browser-Fensterhöhe ein, genau so. Lassen Sie uns nun über minimale Breite und minimale Höhe sprechen. Diese sind super, super mächtig. Manchmal müssen wir nicht explizit spezifische Größe für unsere Elemente angeben. Stattdessen können wir minimale Breite, minimale Höhe und maximale Breite und maximale Höhe verwenden. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Ich gehe zu einem anderen Beispiel. Hier habe ich eine Karte, okay? Wenn ich das wähle, können Sie sehen, dass die Breite und Höhe auf auto eingestellt sind. Es sieht jedoch nicht gut aus. Warum? Weil es die gesamte Breite des Abschnitts, sein übergeordnetes Element, einnimmt. Wie kann ich das beheben? Nun, anstatt eine bestimmte Breite dafür festzulegen, werde ich eine minimale Breite und eine maximale Breite dafür festlegen. Nehmen wir an, wir möchten, dass dieses Bild eine Mindestbreite von 350 Pixeln hat. Daher werde ich die Mindestbreite auf 350 Pixel einstellen. Nichts ändert sich, da dies minimale Breite ist. Wenn ich die maximale Breite dieses Bildes oder dieser Karte begrenzen möchte, nehmen wir an, ich muss die maximale Breite ändern. Hier wird die maximale Breite 400 Pixel betragen. Da gehen wir. Jetzt ist diese Karte 400 Pixel, aber sie darf nicht kleiner als 350 Pixel sein. Versuchen wir es mal. Wenn ich eine Vorschau darauf sehe, können Sie sehen, dass es nicht kleiner als die 350 Pixel sein kann, okay? Weil wir dafür eine Mindestbreite festlegen. Wenn ich es zum Beispiel kleiner mache, wird die minimale Breite sein, sagen wir 250 Pixel. Jetzt kann es kleiner sein, okay, einfach so. Dies ist minimale Breite. Wir können auch minimale Höhe verwenden. Es funktioniert genau gleich. Das können wir für unsere Heldenabteilung verwenden. Zum Beispiel können wir für unsere Abschnitte die minimale Höhe auf 100VH einstellen, und das bedeutet, dass es mindestens 100 Prozent der Höhe des Ansichtsfensters einnimmt und unsere Inhalte nicht durcheinander bringt. Wie ich bereits erwähnt habe, sind diese Einheiten fortgeschritten und wenn Sie nicht wissen, wie sie vollständig funktionieren, ist das völlig in Ordnung, weil es Zeit und Übung braucht um sich vollständig an diese Einheiten zu gewöhnen. Nun gehen wir zum nächsten Thema über, das Überlauf ist. Hier in unserer Karte habe ich einen Absatz. In Ordnung, ich werde diese minimale Breite und minimale Höhe zurücksetzen. Hier werde ich eine bestimmte Breite festlegen, wie 340 Pixel. Die Höhe anstelle von Auto, ich werde es auf setzen, sagen wir 400 Pixel. Nun, wenn ich versuche, hier weitere Sätze hinzuzufügen, mal sehen, was passiert. Da gehen wir. Jetzt haben wir den Überlauf. Es passiert manchmal, und wir können das beheben. Um das zu beheben, müssen wir das übergeordnete Element dieses Elements auswählen. Die Eltern dieses Text-Plugs ist diese Karte. Achten Sie darauf, das übergeordnete Element auszuwählen. Wenn Sie zum Überlauf gehen, hier können wir den Überlauf auf versteckt setzen. Es maskiert den überlaufenden Inhalt. Wenn ich das in der Vorschau sehe, können Sie sehen, dass es keinen Überlauf gibt. Wir haben auch andere Möglichkeiten. Wir haben Schriftrolle. Wenn ich das auswähle, können Sie sehen, dass der Benutzer durch den Inhalt einfach so scrollen kann, wir haben eine weitere Option und das ist automatisch. Auto bedeutet, dass der Browser zuerst überprüft, ob es hier so viel Inhalt gibt , der nicht in diese Karte passt, es wird den Scroll angezeigt, aber wenn ich versuche, einige Sätze hier wie folgt zu entfernen, wird der Scroll nicht angezeigt . Jetzt müssen wir über die letzte Eigenschaft des Größenabschnitts sprechen, die fit ist. Lassen Sie mich einen Div-Block hierher ziehen. Da gehen wir. Ich gebe ihm eine Klasse, oder nennen wir es Demo. Für diese Demo werde ich voran gehen und ein Bild hier per Drag & Drop ablegen. Nehmen wir an, wir wollen, dass dieses Bild diesen Div-Block abdeckt. Zuerst werde ich dieses Bild auswählen. Ich werde die Breite und Höhe auf 100 Prozent einstellen. Es bedeutet, dass es 100 Prozent seiner übergeordneten Breite benötigt, die dieser Demo-Div-Block und 100 Prozent seiner übergeordneten Höhe ist, was genau dieser Demo-Div-Block ist. Dann, während dieses Bild ausgewählt ist, werde ich die Anpassung von Füllung zu Abdeckung ändern. Jetzt schauen wir mal, was passiert. Wenn ich diesen Demo-Div-Block auswähle, kann ich ihm eine bestimmte Breite und Höhe wie 400 Pixel geben. Sie können sehen, dass das Bild diesen Div-Block perfekt abdeckt. Wenn ich die Höhe modifiziere, sagen wir zu 500 Pixel, da gehen wir, es bedeckt das Bild und es ändert nicht das Seitenverhältnis des Bildes, da wir die Anpassung auf Abdeckung eingestellt haben. Wenn ich es in ändere, sagen wir, füllen es wird das Seitenverhältnis ändern. Aber da es so eingestellt ist, dass es bedeckt ist, ändert es nicht das Seitenverhältnis unseres Bildes. Aber was, wenn Sie mit der Positionierung dieses Bildes nicht zufrieden sind? Nun, es gibt eine erweiterte Option direkt neben dieser Passform. Wenn Sie Ihr Bild auswählen, können Sie auf dieses Symbol mit drei Punkten klicken und dann können Sie Ihr Bild so positionieren, wie Sie wollen. Alles klar, Jungs, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen. Wenn Sie einige dieser fortgeschrittenen Einheiten nicht verstanden haben, ist das völlig in Ordnung. Du kannst mich immer erreichen und ich werde versuchen, alles für dich zu vereinfachen. Aber glauben Sie mir, wenn Sie anfangen, sie in realen Projekten zu üben, werden Sie sich sicher so schnell wie möglich an sie gewöhnen. Wir sehen uns dann. 35. Position: He. In diesem Video werden wir über Positionierung sprechen. Grundsätzlich haben wir sechs verschiedene Arten der Positionierung. Wir haben statisch, wir haben relativ, wir haben absolut, fest, klebrig, und schließlich haben wir Float. In diesem Video werden wir in jeden von ihnen eintauchen und ich werde Ihnen zeigen, wie sie sich voneinander unterscheiden und wie Sie sie richtig verwenden können. Bist du bereit? Fangen wir an. Ich werde mit statischen beginnen. Jedes Element hat standardmäßig eine statische Position. Was bedeutet das? Das bedeutet, dass sie Teil des Dokumentflusses sind, also nehmen sie Platz auf unserer Seite ein und erscheinen auch in der Reihenfolge, in der sie gestapelt sind. Zum Beispiel, hier habe ich eine Überschrift, ihre Position ist auf statisch gesetzt. Dann habe ich einen Absatz, wieder statisch. Dann habe ich diesen Image-Wrapper wieder statisch. Dann habe ich diese Bilder, diese div-Blöcke, sie sind alle auf statisch gesetzt. Die meiste Zeit verwenden wir die Position statisch, und wir ändern die Positionierung mit den Anzeigeeinstellungen, über die wir zuvor gesprochen haben. Aber manchmal, aus bestimmten Gründen, müssen wir möglicherweise die Positionierung ändern. Mal sehen, wie sie sich voneinander unterscheiden. Ich werde dieses Bild auswählen, das dritte, diesen div-Block, und ich werde seine Position von statisch zu relativ ändern. Mal sehen, was passiert. Nichts. Aber es ist nicht wahr, denn jetzt ist seine Position relativ zu sich selbst. Hier, wie Sie sehen können, sagt es relativ zu, und dann zeigt es an, dass die Position dieses div-Blocks relativ zu sich selbst ist. Was bedeutet das? Wenn wir die Position eines Elements auf relativ setzen, haben wir zwei Positionen; die alte Position und die neue Position. Die neue Position dieses Elements ist relativ zur alten Position dieses Elements. Es klingt kompliziert und komplex auf den ersten Blick, aber glauben Sie mir, es ist so einfach. Lassen Sie mich es Ihnen zeigen. Hier, sobald ich diese Position auf relativ gesetzt habe, habe ich Zugriff auf diese Positionierungseinstellungen. Wenn ich versuche, seine Position einfach so zu ändern, ist diese neue Position jetzt relativ zu ihrer vorherigen Position. Wir haben es von seiner ursprünglichen Position um 92 Pixel nach links verschoben. Wenn wir die Position eines Elements auf relativ setzen, ist es immer noch Teil des Dokumentflusses, so dass es immer noch Platz in Anspruch nimmt. So funktioniert im Grunde die relative Positionierung. Eine Sache zu erwähnen ist, dass, wenn wir verschiedene Elemente haben , die wir übereinander setzen wollen, wir das nicht mit statischen tun können. Lassen Sie mich Ihnen zeigen, was ich meine. Wenn ich es auf statisch setze und wenn ich möchte, dass sich diese Bilder überlappen, kann ich das nicht tun. Natürlich kann ich die Polsterung und den Rand ändern und ich kann ihnen einige negative Marge und Polsterung geben, aber das ist kein guter Weg. Warum? Denn wenn wir den Rand und die Auffüllung ändern, ändern wir tatsächlich die tatsächliche Position dieses Elements und wir ändern den Dokumentfluss. Das ist nicht das, was wir wollen. Wenn wir möchten, dass sich diese Bilder für ein bestimmtes Layout überlappen, können wir diese Elemente auf relativ setzen. Wenn ich diesen div-Block wähle, den letzten und ich seine Position auf relativ setze, ist er relativ zu sich selbst, und hier haben wir eine neue Eigenschaft, die Z-Index genannt wird. Der Z-Index lässt uns steuern, wie unsere Elemente übereinander stapeln sollen. Wenn ich möchte, dass das zweite Bild oben auf diesem Bild angezeigt wird, kann ich es auswählen, ich kann es auf relativ setzen, und sobald ich es auf relativ setze, kann ich seinen Z-Index ändern. Lass es uns auf eins setzen, da gehen wir. Jetzt hat dieses Bild einen höheren Z-Index, daher wird es oben auf unserem vorherigen Bild sein. Wenn ich dieses erste Bild auswähle und seine Position auf relativ setze, kann ich es einfach so auf die rechte Seite verschieben, und es ist hinter unserem mittleren Bild. Warum? Weil unser mittleres Bild, das zweite Bild, einen höheren Z-Index hat. Wenn ich möchte, dass dieses erste Bild über unserem mittleren Bild steht, kann ich dafür einen höheren Z-Index festlegen. Zum Beispiel zwei. Da gehen wir. Wenn ich möchte, dass ein drittes auf all diesen Bildern steht, kann ich seinen Z-Index auf drei setzen. Wenn ich es bewege, kann man deutlich sehen, dass es auf den anderen beiden Bildern steht. So funktioniert im Grunde die relative Positionierung. Wir erstellen eine neue Position für unser Element, die relativ zu seiner alten Position ist und wir können auch den Z-Index steuern. Lassen Sie uns nun die Position dieser Bilder für eine Sekunde wieder auf statisch setzen. Lassen Sie uns über die andere Positionierungsoption sprechen, die absolut ist. Wenn ich ein Element auf absolute Position setze, schauen wir uns an, was passiert. Wie Sie sehen können, ist alles desorganisiert. Ich kann Zugriff auf diese Ausrichtungsoptionen erhalten, und wenn ich darauf klicke, zum Beispiel oben links, können Sie sehen, dass es oben links positioniert wird, und hier steht es, dass es relativ zum Körper ist. Die Position absolut funktioniert so. Es sucht immer nach dem ersten übergeordneten Element, das die Positionierung von relativ hat. Hier habe ich diesen Image-Wrapper und dieser Image-Wrapper hat eine statische Positionierung. Deshalb, wenn ich die Position dieses div-Blocks ändere, dieses Bild auf absolut, es relativ zum Körper. Was ist, wenn ich möchte, dass dieses Bild relativ zu diesem Image-Wrapper ist? Nun, es ist einfach. Ich kann den Bild-Wrapper auswählen, und ich kann seine Position in relativ ändern. Da gehen wir. Jetzt ist dieses Bild relativ zur Bild-Wrapper-Grenze. Es findet ein übergeordnetes Element, das dieser Image-Wrapper ist, der eine relative Positionierung hat. Sie müssen diese Konzepte sehr gut verstehen und lernen , denn wenn es um Web-Entwicklung geht, könnten diese Positionierungsoptionen wirklich helfen, einige atemberaubende Layouts und einige atemberaubende Webseiten zu erstellen. Jetzt kann ich diesen div-Block auswählen und seine Position ändern, wie ich will. Es ist jetzt relativ zu seinem übergeordneten Element, das die relative Positionierung hat. Wann können wir die absolute Positionierung nutzen? Nehmen wir beispielsweise an, Sie möchten ein Popup-Fenster erstellen, das so beliebt ist. Heutzutage verwenden die meisten Websites ein Pop-up, um den Benutzer für etwas registrieren zu lassen. In diesem Fall können wir die Position absolut verwenden. Natürlich werden wir später über die Position absolut und verschiedene Anwendungsfälle sprechen. Aber im Moment müssen Sie nur verstehen, wie es funktioniert. Genau wie der Verwandte können wir hier noch mit dem Z-Index arbeiten. Eine Sache, die über Position absolut zu erwähnen ist, dass, wenn Sie ein Element auf absolute Position setzen, es nicht mehr Teil des Dokumentflusses ist. Was meine ich damit? Es bedeutet, dass es keinen Platz braucht. Wenn ich versuche, es zu bewegen, braucht es hier keinen Platz. Es ist nicht wie ein Verwandter. Dies ist der Hauptunterschied zwischen Position absolut und relativ. müssen Sie im Hinterkopf behalten. Es braucht keinen Platz. Setzen wir es auf statisch. Jetzt werde ich über die nächste Positionierungsoption sprechen, die behoben ist. Lassen Sie mich Ihnen ein weiteres Beispiel zeigen. Ich gehe voran und ziehe eine Navigationsleiste hier, und ich werde sie direkt unter meinen Körper setzen, genau hier. Dann geben wir ihm eine Klasse. Ich werde Nav schreiben. Cool. Auch werde ich seine Höhe ändern. Lassen Sie uns seine Höhe auf etwa 200 Pixel einstellen. Es ist zu viel, vielleicht 150 Pixel. Cool. Ich setze seine Höhe auf 150 Pixel, weil ich dir in einer Sekunde etwas zeigen werde. Lassen Sie uns eine Vorschau auf unser Projekt für eine Sekunde. Diese Navigationsleiste ist Teil des Dokumentablaufs und nimmt Platz in Anspruch. Wenn ich nach unten scrolle, können Sie sehen, dass alles wie erwartet funktioniert. Es verschwindet, sobald ich nach unten scrolle. Was ist, wenn ich möchte, dass es beim Scrollen ganz oben bleibt? Nun, wir können die feste Option verwenden. Wenn ich die Position fixiert verwende, mal sehen, was passiert. Zuerst wird alles disorganisiert, denn wenn wir etwas fixiert setzen , müssen wir seine Ausrichtungen angeben. Wir müssen definieren, dass es zum Beispiel oben fixiert werden sollte. Jetzt ist es behoben. Dies ist jedoch nicht mehr Teil des Dokumentflusses. Woher weiß ich das? Denn jetzt können Sie sehen, dass dieser Behälter ein wenig nach oben geschoben wurde. Warum? Denn es gibt keine Navigationsleiste mehr Platz in Anspruch nimmt. Wenn ich das in der Vorschau sehe, kannst du sehen, dass es ganz oben klebt, genau so. Aber wir haben dieses Problem. Um das zu beheben, können wir eine andere Positionierung verwenden. Aber bevor Sie das tun, lassen Sie mich Ihnen ein weiteres Beispiel für eine feste Positionierung zeigen. Wenn ich dieses Bild, diesen div-Block auswähle und seine Position auf fixiert setze, kann ich seine Ausrichtung in die untere rechte Ecke ändern und es ist relativ zum Körper. Eigentlich ist es relativ zum View-Port. Es ist nicht mehr relativ zu seinen Eltern. Es ist relativ zum Browserfenster. Wenn ich eine Vorschau darauf sehe, können Sie sehen, dass es in der unteren rechten Ecke fixiert ist. Wenn ich nach unten scrolle, ist es immer noch behoben, da es relativ zum View-Port zum Browserfenster ist. Wenn ich die Dimension ändern möchte, möchte ich Ihnen zeigen, wie es funktioniert. Genau so. Es ist immer noch da. Lassen Sie mich seine Position wieder auf statisch setzen und ich werde Ihnen zeigen, wie wir das Problem mit dieser Navigationsleiste beheben können. Da wir uns nicht mit unserem Dokumentenfluss verwirren wollen, können wir die klebrige Option verwenden. Wenn ich diese Navigationsleiste auswähle und ihre Position auf klebrig setze, können wir sehen, dass sie immer noch Teil des Dokumentflusses ist , weil dieser Container nicht nach oben gestoßen wurde. Wir können jedoch angeben, dass es an der Spitze haften soll. Wenn es auf auto gesetzt ist alle diese Kanten auf auto eingestellt sind, sehen Sie, was passiert, es funktioniert nicht. Die Sache mit klebrig ist, dass Sie definieren müssen, wo dieses Element bleiben soll. Ich werde die Spitze hier auf Null setzen. Es bedeutet, dass es am oberen Rand unseres Browsers bleiben sollte. Eine Sache zu erwähnen ist, dass klebrig auch relativ zum View-Port ist. Es ist nicht relativ zu seinen Eltern. Wenn ich das jetzt vorsehe, dann gehen wir. Es ist oben fixiert und es ist nicht mit unserem Dokumentfluss durcheinander , da es immer noch Teil des Dokumentflusses ist. Wir können diese Position für unsere Navigationsleiste für die Fußzeile verwenden. Wir haben über sie geredet. Aber ich habe ein anderes Beispiel für dich vorbereitet, das heutzutage so beliebt ist. Hier habe ich einen Abschnitt und innen habe ich einen Container, der eine Flex-Box ist. In diesem Container habe ich zwei verschiedene div-Blöcke. Der Inhalt des Blocks auf der linken Seite, und dieser Newsletter div Block auf der rechten Seite. Nichts Kompliziertes. Ich werde diesen Newsletter div auswählen, und ich werde seine Position zu klebrig ändern. Mal sehen, was passiert. Zuerst werde ich voran gehen und entfernen Sie diese Navigationsleiste. Wir brauchen es nicht mehr. Jetzt werde ich das in der Vorschau sehen. Wie Sie sehen können, passiert nichts. Warum? Denn wie Sie sich erinnern, wenn wir mit klebriger Position arbeiten, müssen wir angeben, wo es bleiben soll. Hier setze ich die Spitze auf Null und lasse mich dir zeigen, was passiert. Ich werde das in einer Vorschau sehen. Wenn ich nach unten scrolle, sobald es den oberen Rand meines Browsers berührt , der den oberen Rand des View-Ports ist, können Sie sehen, dass es anfängt, genau so zu kleben bis es das Ende seines übergeordneten Elements erreicht, das die -Container. Lassen Sie mich es Ihnen noch einmal zeigen. Da wir die obere Position auf Null gesetzt haben, beginnt sie, sobald sie die obere Kante berührt, zu kleben, bis sie das Ende seines übergeordneten Elements erreicht, das in diesem Fall der Container ist. Dann verhält es sich normal, wie Sie sehen können. Jetzt können wir hier sogar mehr Abstand hinzufügen. Zum Beispiel werde ich es auf 100 setzen und mal sehen, was passiert. Jetzt, wenn es 100 Pixel oben gibt, fängt es an, einfach so zu kleben. Wie cool ist das? Sie können dieses Verhalten auf vielen Websites wie mittleren oder anderen verschiedenen Blogging-Websites sehen. Lassen Sie uns nun über eine andere Option sprechen, die die letzte Art der Positionierung ist und Float genannt wird. Nun, heutzutage benutzen wir keinen Float und machen so viel klar. Für einige Anwendungsfälle ist es jedoch immer noch sehr praktisch und wir können float verwenden. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Zunächst möchte ich erwähnen, dass float und clear nicht mit Flexboxen und dem Kind einer Flex-Box funktionieren. Hier habe ich einen Container, der keine Flex-Box ist. Die Anzeigeeinstellung ist auf Block eingestellt. Im Inneren habe ich einen einfachen Bild-Div-Block und dann habe ich einen Absatz. Wenn ich dieses Bild div Block und eine Änderung seiner Position zu schweben, zum Beispiel Float links, können wir sehen, dass der Inhalt um dieses Bild jetzt wickelt. Wenn ich den Float nach rechts ändere, können Sie sehen, dass der Inhalt jetzt von der linken Seite, nur von der gegenüberliegenden Seite, umhüllt wird . Aber was ist klar? Nehmen wir an, wir haben dieses Bild so eingestellt, dass es links schwebt. Ich werde diesen Absatz auswählen. Ich wollte dieses spezifische Bild nicht umwickeln. In diesem Fall kann ich klar nach links, rechts oder auf beiden Seiten setzen . Meistens verwenden wir beide Seiten. Da unser Bild hier auf der linken Seite ist, funktioniert jetzt nur noch die linke Seite. Wenn ich es links setze, können Sie sehen, dass es sich nicht mehr um ihn wickelt. Aber wenn ich es richtig setze, funktioniert es nicht, weil unser Element hier, das auf Float gesetzt ist, nicht auf der rechten Seite ist. Wenn ich beide klar setze, können Sie sicherstellen, dass es gelöscht wird. Alles klar Leute, das ist alles für dieses Video. Wir haben über viele verschiedene Dinge gesprochen und ich hoffe Sie könnten verschiedene Arten der Positionierung verstehen. Wenn Sie Fragen haben, lassen Sie es mich wissen. Stellen Sie sicher, dass Sie alle diese Positionierungsoptionen praktizieren , da wir mit ihnen in realen Projekten arbeiten werden. Wir sehen uns im nächsten Video. 36. Typografie: Hey, in diesem Video werden wir über den Typografiebereich auf dieser Seitenwand auf der rechten Seite sprechen. Hier habe ich einige Textelemente, ich habe eine Überschrift, und auch ich habe einen Absatz. Lassen Sie mich die Überschrift auswählen, und ich werde Ihnen hier alle Eigenschaften des Typografie-Panels zeigen. Zuerst haben wir die Schrift. Wenn Sie es öffnen, haben Sie einige Standardschriftarten. Wenn Sie weitere Schriftarten hinzufügen möchten, können Sie oben auf diese Schriftarten hinzufügen klicken, und Sie werden zu den Projekteinstellungen weitergeleitet. der Registerkarte Schriftarten können Sie verschiedene Schriftarten hinzufügen. Wenn Sie beispielsweise mit Google Fonts wie Roboto oder anderen Google Fonts arbeiten möchten, können Sie diese einfach hier hinzufügen. Lassen Sie mich für eine Sekunde nach Roboto suchen. Lassen Sie mich sehen, ob ich sie finden kann. Da gehen wir. Hier ist Roboto, dann können Sie Varianten dieser bestimmten Schriftart auswählen. Dies sind die Gewichtungen Ihrer Schriftarten, zum Beispiel regulär, 500, 700, die schwarz ist, und wenn Sie einige benutzerdefinierte Schriftarten hochladen möchten, können Sie sie hier von Ihrem Computer hochladen, und wenn Sie Adobe Fonts verwenden, können Sie einfach diesen Abschnitt verwenden, um Ihr Projekt mithilfe einer API mit Adobe Fonts zu verbinden. Lassen Sie uns nun über das Typografie-Panel sprechen. Ich werde diese Überschrift auswählen. Hier haben wir über die Schriftart gesprochen, dann haben wir Gewicht, wir haben fett, verschiedene Gewichte. Jede Schriftart hat unterschiedliche Gewichte. Dann haben wir die Größe. Dies ist unsere Schriftgröße, und Sie können verschiedene Einheiten wie die size Eigenschaft hier verwenden. Sie können Pixel, Prozent, EMS und REMS, CH, Ansichtsfensterbreite und Ansichtsfensterhöhe verwenden. Schließlich haben wir die Zeilenhöhe, die so wichtig ist, wenn wir einen Absatz haben. Wenn ich hier diesen Absatz auswähle, setze ich die Zeilenhöhe auf 150 Prozent, also sind es 150 Prozent der Schriftgröße. Wenn ich diese Einstellung nur zurücksetze, können Sie sehen, dass dieser Absatz nicht so lesbar ist. Daher ist es immer eine gute Übung, die Zeilenhöhe zu erhöhen, besonders wenn Sie mit kleinen Schriftgrößen arbeiten, also werde ich sie auf 150 Prozent einstellen. Da gehen wir. Hier haben wir Farbe. Sie können die Farbe Ihrer Schriftart einfach in die gewünschte andere Farbe ändern. Hier ist der Farbtonschieber, dann haben wir den Transparenzschieber, dies steuert die Alpha-Menge Ihrer Farbe, wenn Sie wollen, sagen wir, verringern Sie die Deckkraft, Sie können einfach diesen Schieberegler verwenden. Hier haben wir den Hex-Farbcode. Sie können einfach kopieren und einfügen Sie den Hex-Farbcode von jeder Design-Software, mit der Sie arbeiten, unabhängig davon, ob es Figma, Sketch, Adobe XD ist, es spielt keine Rolle. Dann haben wir HSB, das für Farbton, Sättigung und Helligkeit steht . Wir werden hier nicht über diese Spezifikationen sprechen. Dann haben wir das Alpha oder die Deckkraft. Wenn ich diesen Schieberegler verwende und die Deckkraft vermindere, können Sie sehen, dass sich der Alpha-Betrag ändert. Hier haben wir das Kontrastverhältnis und es lässt uns tatsächlich wissen, ob wir genug Kontrast zwischen der Hintergrundfarbe und der Vordergrundfarbe haben. Wie Sie sehen können, heißt es AAA, und es bedeutet, dass es sehr lesbar ist. Aber wenn ich versuche, ein paar hellere Farben zu verwenden, können Sie zuerst sehen, dass wir AA haben, es ist immer noch in Ordnung, es ist immer noch gut. Aber wenn es scheitern sagt, bedeutet das, dass Ihr Text für manche Leute möglicherweise nicht lesbar ist. Es ändert sich basierend auf Ihrer Schriftgröße und verschiedenen Faktoren. Stellen Sie daher immer sicher, dass Ihre Farbe den Kontrastverhältnis-Test bestanden hat. Lassen Sie mich den Vorgang rückgängig machen. Was haben wir hier? Hier können wir unsere Farbfelder erstellen. Nehmen wir an, wir haben diese Farbe und wir wollen einen Farbstil erstellen oder sagen wir ein Farbfeld. Wenn Sie mit Figma vertraut sind, wissen Sie vielleicht, dass wir Farbstile erstellen können, und das funktioniert so. Hier können wir einfach auf diesen Plus-Button klicken und es erstellt ein neues Musterfeld. Ich kann es nennen, zum Beispiel kann ich sagen, neutral/Licht, erstellen. Wenn ich hier ein anderes Element auswähle und zum Farbbereich gehe, können Sie sehen, dass das Farbfeld hier ist. Wie Sie sehen können, gibt es diesen kleinen Pfeil und es bedeutet, dass dies ein globales Muster ist, und ich kann es für alle Elemente einfach so verwenden. Hier, wenn ich dieses neutrale Lichtmuster für diesen Absatz verwende, und ich benutze es auch hier. Lassen Sie mich das zum Beispiel ändern. Wenn ich es hier ändere, wenn ich auf diesen Stift-Button klicke und versuche, diese Farbe zu ändern können Sie sehen, dass die Änderungen sofort für alle Elemente gelten , die dieses bestimmte Muster verwenden, also müssen Sie sicherstellen, halten Sie Ihre Farben organisiert. Lassen Sie uns den Prozess rückgängig machen. Gehen wir zur nächsten Eigenschaft, die ausrichten ist. Es ist so einfach. Wir haben verschiedene Ausrichtungsoptionen, links, zentriert, rechts und rechtfertigen, genau wie Microsoft Word oder jede Designsoftware. Dann haben wir die Stil-Eigenschaft. Wir können unseren Text so kursiv formatieren. Wir können hier ein paar Dekorationen verwenden. Zum Beispiel können wir diese Durchgestrichen verwenden. Wir können Unterstreichungen oder Überstriche verwenden. Wenn Sie zum Beispiel einige Links erstellen möchten , können wir diese Unterstreichung verwenden. Dann haben wir diese Weitere Typ-Optionen, Standardmäßig ist es nicht sichtbar, aber wenn Sie darauf klicken, können Sie Zugriff auf diese erweiterten Optionen wie Buchstabenabstand, Texteinzug, Spalten, und diese Groß-/Kleinschreibung und Richtungsoptionen. Lasst uns jeden von ihnen durchgehen. Mit diesem Feld können wir den Buchstabenabstand steuern. Wenn ich zum Beispiel den Abstand zwischen Buchstaben vergrößern möchte, kann ich hier einen höheren Buchstabenabstand festlegen. Ich werde es jetzt auf 20 setzen. Wie Sie jetzt sehen können, ist der Abstand zwischen den Buchstaben viel höher. Lassen Sie mich das abnehmen. Eigentlich ist ein guter Anwendungsfall für die Verwendung von Buchstabenabständen, wenn wir ein Wort haben, das vollständig groß geschrieben ist. Wenn ich dies auswähle, Innenarchitektur, und wenn ich die Option Großschreibung auf alle Großbuchstaben wie diese setze. Wenn ich mit kleinen Schriftgrößen arbeite, muss ich manchmal den Buchstabenabstand erhöhen, um die Lesbarkeit und Lesbarkeit meiner Texte zu verbessern. Lassen Sie mich in diesem Fall auf fünf setzen. Nun, es sieht viel besser aus. Ich kann es auch auf drei setzen. Dies wird grundsätzlich für diesen Zweck verwendet. Gehen wir nun zum nächsten, der Texteinzug ist. Ich werde diesen Absatz auswählen und lassen Sie mich einen Betrag wie 20 Pixel angeben. Es zieht nur den Text ein, genau wie Microsoft Word. Dann haben wir Säulen. Eigentlich habe ich das noch nie benutzt und ich sehe selten eine Website oder ein Designer diese Option verwenden. Aber es ist gut zu wissen, dass es existiert. Wenn ich hier drei spezifiziere, nimmt es unseren Text und teilt ihn in drei gleiche Spalten auf. Wenn ich Enter drücke, da gehen wir, jetzt haben wir drei verschiedene Spalten. Wir können einfach die Lücke hier ändern, zum Beispiel das Styling. Wir können einige Trennwände hinzufügen. Wie Sie sehen können, können wir die Dicke dieser Trennwand ändern, genau so, und wir können auch die Farbe dieser Trennwand ändern. Aber um ehrlich zu sein, ich habe das nie benutzt und ich bezweifle, dass du das auch benutzen solltest. Lassen Sie mich das vorerst entfernen. Wenn Sie eine Eigenschaft hier zurücksetzen möchten, können Sie die Wahltaste oder die Alt-Taste auf Ihrer Tastatur gedrückt halten und dann einfach einmal darauf klicken, einfach so. Dann haben wir die Optionen für die Großschreibung. Wir haben alle Mützen, wie ich dir schon mal gezeigt habe. Wir haben jedes Wort groß geschrieben, einfach so, oder wir haben Kleinbuchstaben. Ich werde es auf keine setzen. Dann haben wir die Richtung. Für die meisten Sprachen verwenden wir die Richtung von links nach rechts, aber für einige Sprachen wie Arabisch können Sie die Richtung von rechts nach links verwenden. Dann haben wir kaputt, es gibt einige Optionen wie diese. Das ist nicht so nützlich. Wir werden nicht auf all diese Optionen zu berühren da wir die meiste Zeit nicht diese brechende Option verwenden. Dann haben wir Text Schatten. Wenn ich auf diesen Plus-Button klicke, kann ich meinem Text Schatten hinzufügen, einfach so. Ich empfehle, dass Sie vermeiden, Schatten zu Ihren Texten hinzuzufügen , da dies die Lesbarkeit Ihres Textes verringert. Ich werde das entfernen. Das ist alles über Typografie. Aber es gibt noch eine Sache, die ich hier erwähnen werde. Wenn ich vorangehe und einen div-Block hier ziehe, werde ich ihm eine Klasse geben, schreiben wir Typografie. Hier für diesen div-Block kann ich einige spezifische Eigenschaften festlegen, die seine Kinder verwenden können. Wenn ich die Schriftart in etwas anderes ändere, verwenden wir diese zum Beispiel, und ich erhöhe die Schriftgröße auf, sagen wir, 40 Pixel, etwas Dramatisches, und auch ich ändere die Farbe in Rot, können Sie sehen Sie, dass hier nichts passiert, weil es keine Textebene gibt. Allerdings, wenn ich voran und ziehen und eine Überschrift hier, da gehen wir. Nun erhält diese Überschrift die Eigenschaften von den Standardeigenschaften, die wir auf sein übergeordnetes Element gesetzt haben, das ist dieser Typografie-Div-Block. Natürlich können wir das überschreiben, zum Beispiel kann ich dieser Überschrift eine Klasse geben, wie Überschrift 1, und ändern Sie einfach die Farbe, was wir wollen, und Schriftgröße oder andere Eigenschaften hier. Aber Sie müssen verstehen, dass es manchmal viel sinnvoller ist, zuerst die Standardeigenschaften zu den Eltern unserer Elemente hinzuzufügen, und dann können wir diese Elemente einfach per Drag & Drop ablegen und wir müssen nicht alles ändern von Grund auf neu. Sie können beispielsweise Ihren Abschnitt auswählen. Wenn Ihr Abschnitt einige bestimmte Schriftarten haben wird, und sagen wir einige bestimmte Schriftarteigenschaften, können Sie einfach diese Eigenschaften für den Abschnitt angeben. Dann erbt alles, was Sie in diesem Abschnitt einfügen , von den Eigenschaften, die Sie für diesen Abschnitt festgelegt haben. Ich persönlich, wenn ich ein Projekt starten möchte, wähle ich meinen Körper aus und stelle die Schriftart hier einmal ein, und dann muss ich die Schriftart nicht immer wieder ändern. Natürlich kann ich diese Eigenschaften überschreiben, aber es wird mir so viel Zeit sparen, wenn ich einige Standardeigenschaften festlegen kann. Alles klar, Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen. Wir sehen uns im nächsten. 37. Hintergründe: He. In diesem Video werden wir über Hintergründe sprechen. Wenn Sie zum Style-Panel direkt unter dem Typografiebereich gehen, haben wir den Hintergrundbereich. Es ist sehr nützlich, weil wir es fast die ganze Zeit verwenden werden. Hier, wie Sie sehen können, habe ich zwei verschiedene Abschnitte. Ein leerer Abschnitt. Dies ist für den nächsten Teil dieses Videos. Aber im ersten Teil werden wir mit diesem Abschnitt arbeiten. Im Inneren habe ich einen Container, wie üblich, und dann habe ich die Überschrift und einen Absatz. Nehmen wir an, wir möchten unserem Abschnitt einen Hintergrund hinzufügen. Ich wähle meinen Abschnitt aus. Ich kann in die Hintergründe gehen. Ich kann hier auf diesen Plus-Button klicken. Jetzt kann ich Bild wählen. Ich habe Ihnen diesen Abschnitt bereits gezeigt, aber wir haben nicht wirklich in alle Details hier eingetaucht. Jetzt werde ich dieses Bild aus meinem Vermögen wählen und da gehen wir. Standardmäßig ist es immer auf Kachel gesetzt, wie Sie hier sehen können, haben wir die Kachel-Option. Wir können es einfach auf keine setzen, weil wir nicht wollen, dass es kachelt. Dann haben wir hier die Positionsoptionen und all diese Optionen. Beginnen wir mit dem Typ. Hier haben wir verschiedene Arten. Wir haben Bild, wir haben lineare Farbverlauf, wir haben radialen Farbverlauf, und wir haben die Farbüberlagerung. Lassen Sie uns zuerst über Bild sprechen. Hier kann ich die Größe einstellen. Ich kann eine benutzerdefinierte Größe festlegen, wenn die benutzerdefinierte Registerkarte ausgewählt ist. Wir verwenden diese benutzerdefinierte Größe selten hier, da wir normalerweise die Größe unserer Bilder mit der Eigenschaft size im Stilfenster verwenden. Dann haben wir die Abdeckung, die so nützlich ist fast die ganze Zeit, die wir diese Option verwenden, und wir haben die enthalten. Der Inhalt skaliert das Bild tatsächlich nach unten, bis es in unserem Abschnitt oder unserem Container oder in welchem Element es sich befindet. Dann kann ich die Position hier in die Mitte ändern. Ich werde es vorerst auf Deckung setzen. Unser Hintergrundbild sieht gut aus. Sie können auch die linke und die obere Position basierend auf dem Prozentsatz festlegen. Wie Sie sehen können, ist es standardmäßig auf 50 Prozent festgelegt. Wenn ich es oben links setze, können Sie sehen, dass links und oben auf Null gesetzt sind. Wenn ich sie manuell ändern möchte, kann ich das auch tun. Ich kann es zum Beispiel auf 48 Prozent setzen, oder vielleicht sagen wir 35 Prozent. Hier ändert sich nichts, weil unser Bild eigentlich zu groß ist, also lassen Sie mich auch die Oberseite auf 20 Prozent ändern. Wie Sie sehen können, bewegt es sich nach unten. Ich werde den Prozess rückgängig machen. Wenn wir möchten, dass unser Bild kachelt, können wir die Kachel-Option verwenden. Wir können einfach eine konstante Breite einstellen. Lassen Sie mich eine benutzerdefinierte Breite festlegen, die Sie sehen können, wie es funktioniert. Ich werde die Breite auf 100 Pixel einstellen, und wie Sie sehen können, ist unser Bild gekachelt, da die Kachel-Option ausgewählt wurde . Ich kann es horizontal kacheln und auch vertikal kacheln. Ich werde es so einstellen, dass es nicht kachelt und wir es auf Deckung setzen. Wir haben hier die feste Option. Standardmäßig sind alle Bilder auf nicht fixiert festgelegt. Wir werden in ein paar Sekunden über den Unterschied zwischen fixiert und nicht behoben sprechen. Aber jetzt gehen wir zum nächsten Feature dieses Bild- und Verlaufsabschnitts über. Wie Sie sehen können, sind unsere Textebenen nicht lesbar. Warum? Weil wir hier nicht genug Kontrast haben. Was ist, wenn ich ihre Farbe in Weiß ändere? Mal sehen, ob es einen Unterschied macht. Natürlich macht es einen Unterschied, aber trotzdem, da wir eine kleine Schriftgröße haben, könnte es manchmal schwierig sein, diesen Text zu lesen. Wie können wir das beheben? Nun, eine sehr bekannte Lösung besteht darin, nur ein Overlay hinzuzufügen. Wenn ich diesen Abschnitt hier auswähle und dann gehe ich in den Hintergrund. Wenn ich hier auf diesen Plus-Button klicke, kann ich den Typ so überlagern. Es erzeugt ein Overlay, ein dunkles Overlay, und wir können einfach die Deckkraft dieses Overlays von hier aus steuern, genau so. Jetzt ist es viel sichtbarer. Aber was ist mit linearen und radialen Farbverläufen? Lassen Sie uns auch über sie reden. Ich werde mit linearem Farbverlauf beginnen. Nun, wie Sie wissen, ist ein Farbverlauf ein fließender Übergang von einer Farbe zu einer anderen Farbe. Standardmäßig haben wir hier zwei verschiedene Stopps oder Punkte. Wir haben die schwarzen und weißen Punkte. Ich werde diesen Punkt auswählen, und von dieser Farbe werde ich die Farbe in etwas anderes ändern. Lassen Sie mich es zum Beispiel zu dieser Orange ändern . Der nächste Punkt wähle ich den nächsten Punkt und ich werde ihn in diese Farbe ändern. Dann kann ich hier den Winkel dieses Gradienten ändern. Wie Sie sehen können, kann ich einfach den Winkel, den Grad ändern. Aber was ist mit dieser Wiederholungsoption? Wenn ich dieses Kontrollkästchen ankreuze, passiert nichts. Das liegt daran, damit diese Option funktioniert, brauchen wir hier im Schieberegler etwas Platz. Wenn ich nur einen dieser Punkte nehme und ihn auf die linke Seite schiebe, können Sie sehen, dass wir jetzt mehr Platz haben. Wie Sie sehen können, wiederholt es sich immer wieder und wieder, einfach so. Ich kann auch den Winkel ändern. Cool. Lassen Sie mich einfach diese Wiederholungsoption deaktivieren. werden wir nicht brauchen. Wir können auch die Deckkraft dieser Farben steuern, zum Beispiel, um ein benutzerdefiniertes Overlay zu erstellen. Wenn ich den Alpha-Betrag hier auf 50 Prozent ändere, wie Sie sehen können, haben wir jetzt eine Gradientenüberlagerung. Ich kann dasselbe für meine orange Farbe tun, 50 Prozent, da gehen wir. Sieht toll aus. Aber was ist mit Radialgradienten? Wenn ich darauf klicke und wenn ich die Deckkraft auf 100 Prozent setze, könnte man einfach den Unterschied zwischen einem linearen Farbverlauf und einem radialen Farbverlauf sehen. Wie Sie hier sehen können, haben wir einen Schwerpunkt. Wir können die Größe hier ändern, zum Beispiel, diese, ich kann auf diese einstellen, ich kann die Größe leicht ändern. Außerdem kann ich den Brennpunkt so ändern, aus welcher Richtung dieser Übergang so beginnen soll. Schön. Wenn Sie eines dieser Bilder oder Farbverläufe ausblenden möchten, können Sie einfach auf dieses Augensymbol klicken oder einfach auf diesen Entfernen-Button klicken. Wenn Sie Ihre Elemente hier neu anordnen möchten, können Sie einfach den Mauszeiger über diese vertikalen Linien neben diesem winzigen Miniaturbild bewegen, klicken und ziehen, genau so. Lassen Sie mich diesen radialen Farbverlauf vorerst entfernen. Aber manchmal müssen wir nur eine feste Hintergrundfarbe haben. können wir auch tun. Wir können immer ein Element auswählen, egal ob es sich um einen div-Block, eine Überschrift, einen Absatz handelt. Jedes Feld kann eine Hintergrundfarbe haben. Standardmäßig ist sie auf transparent festgelegt. Wenn ich es wähle, kann ich es zum Beispiel auf weiß setzen , aber da wir hier ein Bild haben, können Sie das nicht sehen. Ich kann die Hintergrundfarbe in Schwarz ändern, die Farbe, die ich will. Es gibt auch einen guten Trick hier, wenn Sie einige berühmte Farben wie weiß oder schwarz verwenden möchten , können Sie einfach seinen Namen hier schreiben. Zum Beispiel werde ich hier weiß schreiben. Da gehen wir. Ich habe einen weißen Hintergrund. Wenn ich es in Schwarz ändere, funktioniert es. Wenn ich es zu rot ändere, funktioniert es auch. Aber die meiste Zeit legen wir normalerweise manuell die Hintergrundfarbe fest oder kopieren und fügen den Hex-Farbcode hier ein. Jetzt werde ich über Clipping reden. Es funktioniert wie Maskierung in Designsoftware. Nehmen wir an, ich möchte dieser Überschrift einen Farbverlauf hinzufügen. Ist es möglich? Nein, außer es ist. Wenn ich zur Farbe gehe, kann ich einen Farbverlauf festlegen. Allerdings gibt es hier einen guten Trick. Wenn ich hier zu Hintergründen gehe, kann ich hier einen Farbverlauf erstellen und den Typ in linear ändern. Von hier aus werde ich den Farbverlauf zu ändern, sagen wir diese Farbe. Lass mich einen coolen Farbverlauf erstellen, schön. Jetzt werde ich den Winkel ändern. Wie Sie sehen können, füllt dieses Feld diesen Text jedoch nicht aus. Er deckt seine Höhe nicht ab. Daher muss ich die Höhengröße auf etwas anderes erhöhen. Lassen Sie mich es vorerst auf 100 Pixel erhöhen. Aber sieht es gut aus? Es ist nicht genau das, was wir wollen. Nun, warte eine Sekunde. Ich gehe zu den Hintergründen, und von hier aus gehe ich zu Clipping, und standardmäßig ist es auf Keine gesetzt. Wenn ich dies ändere, um Hintergrund in Text zu schneiden, dann gehen wir. Jetzt haben wir den Farbverlauf in unserem Text abgeschnitten. Wie cool ist das? Dies ist genau die gleiche Methode, die die beliebtesten Websites verwenden, um einen solchen Effekt zu erzeugen. Zum Beispiel verwendet Apple diese Technik auch. Ich kann einfach die Farbverläufe ändern und die Änderungen gelten für diesen Text in Echtzeit. Mal sehen, ob es funktioniert. Ja, tut es. Ich werde die Hintergrundfarbe dieses Abschnitts in Schwarz ändern , damit Sie den Effekt viel besser sehen können. Lassen Sie uns nun über die andere Funktion sprechen. Wie Sie sich erinnern, habe ich erwähnt, dass es hier einen weiteren Abschnitt gibt. Lassen Sie mich die Hintergrundfarbe in Weiß ändern. Hier in diesem Container werde ich einen div-Block ziehen und ablegen, und für diesen div-Block werde ich eine Klasse erstellen. Nennen wir es Image-Fix. Dann werde ich seine Breite auf 100 Prozent einstellen, so dass es die gesamte Breite seines Elternteils einnimmt , der der Container ist, und die Höhe wird so 50 Prozent betragen. Ich gehe zu Hintergründen, und von hier aus werde ich ein Bild oder einen Farbverlauf hinzufügen. Ich werde hier ein Bild auswählen. Da gehen wir. Schließlich werde ich die Größe ändern, um zu decken, und die Position zu zentrieren. Lassen Sie uns die Kachel auf keine setzen. Wie Sie sich erinnern, habe ich Ihnen gesagt, dass wir über die feste Option sprechen werden. Lassen Sie uns standardmäßig sehen, wie es funktioniert. Wenn ich eine Vorschau auf diese Webseite vorschaue, funktioniert sie wie erwartet. Aber was, wenn ich möchte, dass dieser Hintergrund fixiert wird und wir hier einen Parallax-Effekt erzeugen? In diesem Fall kann ich dieses Bild auswählen und ich kann einfach zu den Bildeinstellungen hier gehen, und anstatt die feste Option auf nicht korrigieren zu setzen, werde ich fest wählen. Wieder einmal kann ich es neu positionieren, wie ich will, und dann lassen Sie uns eine Vorschau darauf. Da gehen wir. Kannst du sehen, wie cool dieser Effekt ist? Wenn wir das Bild so einstellen, es tatsächlich eine neue Ebene hinter unserem Browserfenster erstellt, dass es tatsächlich eine neue Ebene hinter unserem Browserfenster erstellt, und diese neue Ebene ist unser Hintergrundbild, das fixiert ist, und wir können einfach durch unsere Seite scrollen. Wir können das Gleiche auch mit Text machen. Lassen Sie mich Ihnen das beweisen. Lassen Sie mich dieses Bild entfernen und ich werde diesen Container auswählen und hier eine Überschrift hinzufügen. Dann werde ich die Schriftgröße drastisch erhöhen. Lassen Sie uns es auf 80 Pixel erhöhen, oder vielleicht 120 Pixel, dass Sie den Effekt deutlich sehen könnten. Dann werde ich die Höhe auf 100 Pixel oder vielleicht sogar mehr erhöhen, vielleicht 140 Pixel. Ich gehe zu Bild und Farbverlauf, und fügen wir hier ein Bild hinzu. Ich werde wählen, sagen wir diese, und lassen Sie uns das neu positionieren. Nicht kacheln und abdecken. Wie kann ich das machen? Nun, zuerst muss ich das Bild auf fixiert setzen, und dann muss ich zu Clipping gehen, und ich werde es ändern, um Hintergrund in Text zu schneiden. Mal sehen, was passiert. Kannst du das sehen? Jetzt haben wir diesen festen Hintergrund hinter unserer Textebene. Es ist sehr cool. Sie können einige coole Effekte mit dieser Technik erstellen. Jetzt werde ich über etwas sehr Interessantes reden. Bisher erfahren Sie, dass Sie hier ein Hintergrundbild hinzufügen können. Wenn Sie Ihren Abschnitt auswählen, können Sie einfach ein Hintergrundbild hinzufügen und alles sieht perfekt aus. Aber was, wenn Sie tatsächlich ein Video zu Ihrem Hintergrund hinzufügen möchten? Ist es möglich? Natürlich ist es das. Allerdings können wir es nicht im Hintergrund tun, wir müssen eine Komponente verwenden, die Hintergrundvideo genannt wird. Wenn ich zum Abschnitt Hinzufügen gehe und ich nach unten scrollen, können Sie sehen, dass ich unter den Komponenten die Hintergrundvideo-Komponente habe. Lassen Sie mich Drag & Drop und legen Sie es direkt über meinen ersten Abschnitt. Da gehen wir. Dies ist nur ein Element wie alle anderen Elemente, und Sie können einfach alles ändern, was Sie wollen. Ich kann ihm eine bestimmte Höhe wie 100 VH geben. Dann kann ich diese Schaltfläche „Video hochladen“ verwenden, um ein Video hochzuladen. Lassen Sie mich voran und laden Sie schnell ein Video hoch. Sie müssen bedenken, dass Ihr Video weniger als 30 Megabyte betragen sollte. Wie Sie sehen können, passiert nichts. Das liegt daran, dass die Hintergrundvideo-Komponente nur funktioniert, wenn Sie eine Vorschau Ihrer Webseite anzeigen, sie funktioniert nicht im Designer. Ich werde es in der Vorschau sehen, und da ist es. Siehst du, wie cool es ist? Aber warten Sie, können wir einige Inhalte auf diesem Hintergrund hinzufügen? Ja, das können wir. Genau wie alle anderen Elemente kann ich zum Beispiel meinen Container hier auswählen und ihn mitbringen und in dieses Hintergrundvideo einfügen. Aber wie Sie sehen können, ist es nicht zentriert. Ich kann mein Hintergrundvideo auswählen und die Anzeigeeinstellung von Block zu Flex ändern. Jetzt schauen wir es uns an. Können Sie sehen, wie einfach es ist, mit diesen Komponenten zu arbeiten? Alles klar, Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich sehe dich im nächsten Video. 38. Borders (Ränder): In diesem Video werden wir über Grenzen sprechen. Wenn Sie hier auf der rechten Seite nach unten scrollen, können Sie sehen, dass wir den Randabschnitt direkt unter den Hintergründen haben. Wir verwenden Grenzen fast die ganze Zeit. Es hat verschiedene Eigenschaften, die wir anpassen können, und wir werden durch alle gehen. Lasst uns anfangen. Zuerst werde ich Ihnen ein sehr häufiges Beispiel zeigen. Ich werde diese Schaltfläche auswählen. Wie Sie sehen können, hat diese Schaltfläche nur eine Hintergrundfarbe. Aber was, wenn ich es abgerundet machen will? Nun, ich kann zum Grenzabschnitt gehen und ich kann die Radius-Eigenschaft hier ändern, um sie abgerundet zu machen. Wenn ich den Eckenradius erhöhen, gehen wir. Wir haben diesen coolen, abgerundeten Knopf. Aber was ist, wenn ich den Eckenradius jeder Ecke unabhängig ändern möchte? Nun, das können wir auch tun. Wenn ich auf diese Option klicke, die „Individuelle Ecken“ steht, kann ich den Eckenradius jeder Ecke separat steuern. Eine Sache zu erwähnen ist, dass Sie immer noch alle Einheiten verwenden können, über die wir zuvor gesprochen haben, wie Pixel, Prozentsatz, EM , REM, CH, VW und VH. Hier, nehmen wir an, ich möchte nur den beiden oberen Eckenradius abgerundet machen. Daher werde ich die unteren Ecken, den Eckenradius auf Null setzen. Mal sehen, was passiert. Da gehen wir. Wir haben jetzt diesen seltsam aussehenden Knopf. Lassen Sie mich den Vorgang rückgängig machen. Das ist alles über den Betrag des Eckenradius. Aber was ist, wenn Sie eine Gliederungsschaltfläche anstelle einer enthaltenen Schaltfläche erstellen möchten? Im Moment haben wir eine enthaltene Schaltfläche, weil es nur eine Hintergrundfarbe hat. Es hat keine Grenze. Wenn ich eine Gliederungsschaltfläche erstellen möchte, kann ich hier zuerst eine Kombinationsklasse hinzufügen, weil ich diese Schaltflächenklasse woanders für diese Registerschaltfläche und diese Schaltfläche „Mehr erfahren“verwende diese Schaltflächenklasse woanders für diese Registerschaltfläche und diese Schaltfläche „Mehr erfahren“ und ich die Standardeigenschaften nicht ändern werde. Deshalb werde ich voran gehen und ihm eine Combo-Klasse geben. Lassen Sie mich schreiben, kontaktieren Sie uns. Genau so. Wenn ich dann zu der Farbe, der Farbe dieses Hintergrunds gehe, kann ich transparent schreiben, und unser Knopf ist gehe, kann ich transparent schreiben, verschwunden, außer dass er es nicht getan hat. Es ist immer noch da, aber das können wir sehen. Es ist nicht sichtbar, weil wir nur die Hintergrundfarbe auf transparent setzen. Wenn ich darauf klicke, können Sie sehen, dass der Alpha-Betrag auf Null gesetzt ist. Deshalb können wir unser Element sehen. Das nächste, was ich tun werde, ist offensichtlich die Farbe meines Textes hier in etwas anderes zu ändern . Ich werde es in Schwarz ändern. Dann muss ich ein paar Grenzen hinzufügen. Wenn Sie zu den Rändern gehen, hier haben wir den Randabschnitt direkt unter dem Radius, wir können entscheiden, ob wir Ränder für alle Kanten oder nur für bestimmte Kanten erstellen möchten. Wenn Sie Rahmen für alle vier Kanten erstellen möchten, müssen Sie diese mittlere Kante auswählen, die sich in der Mitte befindet. Dann können Sie Ihren Stil auswählen, ich werde solide auswählen. Wir haben unsere Grenze, aber ich werde die Breite vergrößern. Ich kann voran gehen und manuell erhöhen, zum Beispiel kann ich einen Betrag hier auf drei setzen, aber wenn Sie nur Augapfel wollen und Sie mit verschiedenen Beträgen experimentieren möchten, können Sie die „Option“ -Taste auf Ihrer Tastatur oder „Alt“ -Taste gedrückt halten, und dann können Sie klicken und ziehen, um die Breite hier zu vergrößern und zu verringern, genau so. Ich denke, vier Pixel sehen gut aus. Jetzt können wir auch die Farbe Ihres Rahmens ändern, um die gewünschte Farbe, und Sie können den Stil Ihrer Rahmen so ändern. Das ist so einfach. Aber mal sehen, was passiert, wenn ich nur Ränder zu bestimmten Kanten hinzufügen möchte. Ich werde den Stil entfernen und dann werde ich eine bestimmte Kante hier auswählen, zum Beispiel links, und dann werde ich den Stil auf solide setzen. Da gehen wir. Eine Sache zu erwähnen ist, dass, wenn Ihr Element keine bestimmte Breite oder Höhe hat, wenn Sie einige Rahmen hinzufügen, seine Größe geändert wird. Wenn Sie jedoch eine bestimmte Breite und Höhe für Ihr Element definieren, spielt es keine Rolle, ob es sich um eine Schaltfläche oder einen Div-Block oder irgendetwas handelt, ändern sich die Dimensionen Ihres Elements nicht da der Rahmen von innen hinzugefügt wird, nicht die draußen. Lassen Sie mich Ihnen zeigen, was ich damit meine. Ich gehe voran und wähle dieses Bild, diesen Div-Block, und dieser Div-Block hat eine bestimmte Breite, keine bestimmte Höhe. Ich gehe weiter und füge hier ein paar Grenzen hinzu. Ich werde die mittlere auswählen, die Mitte, da ich Ränder zu allen vier Kanten hinzufügen werde. Lassen Sie mich den Stil-Volumenkörper auswählen. Dann werde ich die Breite erhöhen. Genau so. Wie Sie sehen können, ändert sich die tatsächliche Dimension dieses Div-Blocks nicht. Der Grund ist, dass ich eine bestimmte Breite bereits definiert habe. Aber was passiert, wenn ich das entferne? Mal sehen, was passiert. Ich werde es auf auto setzen, und dann werde ich dieses Bild für eine Sekunde außerhalb dieses Bild-Wrapper verschieben , um Ihnen zu zeigen, wie es funktioniert. Dann lassen Sie mich die Breite vergrößern und verringern. Wie Sie jetzt sehen können, ändert sich die tatsächliche Dimension. Warum? Weil keine Breite und Höhe definiert sind. Wenn ich hier eine bestimmte Breite einstelle, zum Beispiel 350 Pixel, und ich die Breite anpasse, können Sie sehen, dass der Rand innen hinzugefügt wird. Lassen Sie mich den Vorgang rückgängig machen. Nehmen wir an, Sie möchten einen perfekten Kreis erstellen. Zum Beispiel möchten Sie, sagen wir, eine kreisförmige Profilseite erstellen . In diesem Fall können Sie auch Radius verwenden. Hier ist unser Bild. Um einen perfekten Kreis zu erstellen, müssen Sie einige Schritte unternehmen. Zuerst müssen Sie Ihr Bild auswählen, das sich in Ihrem Div-Block befindet. Dann müssen Sie sicherstellen, dass seine Breite und Höhe auf 100 Prozent festgelegt sind; sie nehmen die gesamte Breite und Höhe des übergeordneten Elements ein, das ist dieser Bild-Div-Block. Während das Bild ausgewählt ist, nicht der Div-Block, gehen Sie zu der Anpassung und ändern Sie es von Füllung zu Abdeckung. Jetzt können Sie Ihr Bild Div Block auswählen und zu den Grenzen gehen, und von hier aus werde ich den Radius auf 50 Prozent einstellen. Aber nichts passiert, weil wir noch zwei Dinge tun müssen. Lassen Sie mich nach oben scrollen. Wie Sie sehen können, hat unser Div-Block eine bestimmte Breite, aber um einen perfekten Kreis zu schaffen, sollten unsere Breite und unsere Höhe gleich sein. Ich werde voran gehen und eine bestimmte Höhe dafür festlegen, die der Breite gleich ist. Ich werde 350 Pixel schreiben, großartig. Das Letzte, was wir tun müssen, ist den Überlauf zu ändern. Ich werde zum Überlauf gehen und dann werde ich es von sichtbar zu versteckt ändern. Da gehen wir. Hier ist unser perfekter Kreis. Aber warum funktioniert es so? Erinnerst du dich, als wir über Überlauf gesprochen haben, wenn wir eine Karte erstellen und in dieser Karte ein Absatz war, der die Karte überlappte? Erinnern Sie sich daran? Dies ist genau das gleiche Szenario. Wenn es sichtbar ist, wurde unser Kreis erstellt, da wir den Radius auf 50 Prozent gesetzt haben, aber wir können das nicht sehen, weil dieses Bild in diesem Div-Block unsere Form überlappt. Daher müssen wir den Überlauf auf ausgeblendet setzen, um diese Maske zu erstellen. Das letzte, was ich erwähnen werde, ist, dass Sie, wenn Sie mit Grenzen arbeiten, die Kontrolle über die Eigenschaften jeder Kante haben. Wenn Sie die linke Kante auswählen und die Farbe ändern möchten, können Sie dies tun. Sie können eine andere Farbe für den oberen Rand einstellen, das liegt ganz bei Ihnen. Sie sind in keiner Weise beschränkt. Alles klar, Leute. Das ist alles für dieses Video. Ich hoffe, es hat dir gefallen. Wir sehen uns im nächsten. 39. Effekte: In diesem Video werden wir über Effekte Abschnitt sprechen. Wenn ich hier in diesem Zeitfenster einfach nach unten scrollen, können wir sehen, dass wir unten den Effektebereich haben. Es gibt so viele verschiedene Optionen hier, und wir werden über jeden von ihnen sprechen. Zuerst werde ich voran gehen und eines dieser Bilder auswählen. Lassen Sie mich diesen DIV-Block, den Bild-DIV-Block, den ersten auswählen den Bild-DIV-Block, , und jetzt kann ich tatsächlich verschiedene Optionen hier ändern. Lassen Sie mich mit Opazität beginnen. Die Deckkraft ist so einfach, weil sie uns nur Transparenz ermöglicht. Wenn ich es verkleinere, wird mein Element transparent sein. Wenn ich es vergrößere, können Sie sehen, dass es keine Transparenz gibt. Wenn Sie ein Element haben und Ihr Element einige untergeordnete Elemente hat, können Sie einfach Ihr übergeordnetes Element auswählen, in diesem Fall ist es dieser Bild-DIV-Block, und passen Sie einfach die Deckkraft hier an. Dann haben wir Kastenschatten. Nun, wie Sie aus seinem Namen erraten können, lässt es uns einige Schatten zu unseren Box-Elementen hinzufügen. Wenn ich auf diese Plus-Taste klicke, kann ich diesem bestimmten Element einige Boxschatten hinzufügen, und hier haben wir verschiedene Eigenschaften. Wir haben zwei verschiedene Arten von Schatten, außen und innen. Nun, wenn es auf außerhalb gesetzt ist, erscheint der Schatten außerhalb der Grenze dieses Elements. Wenn ich nur den Abstand ändere, können Sie besser sehen, aber der Innentyp lässt uns innere Schatten hinzufügen. Ich kann den Winkel hier ändern, einfach so. Ich kann den Grad kontrollieren, oder sagen wir die Richtung meines Schattens. Ich kann den Abstand ändern, wie nah dieser Schatten am Element ist. Ich kann die Blare ändern, so dass es bestimmt, wie fokussiert der Schatten ist. Ich kann die Größe ändern. Es bestimmt, wie viel es sich ausbreitet, und die Farbe lässt uns tatsächlich die Farbe unseres Schattens kontrollieren. Ich kann es auf jede Farbe einstellen, die ich will. Die meiste Zeit, wenn wir Schatten verwenden, wollen wir sicherstellen, dass die Deckkraft verringert wird, um einige weiche Schatten zu haben. Genau so. Hier geht es um Schatten. Eine Sache, die Sie sich erinnern sollten, ist, dass Sie tatsächlich mehrere Schatten zu Ihrem Element hinzufügen können. Wenn ich noch einmal auf diesen Plus-Button klicke, da gehen wir, könnte ich noch einen Schatten hinzufügen. Ich kann noch mehr Schatten hinzufügen. Ich kann sie bewegen, und ich kann sie verstecken und einblenden, und ich kann sie einfach entfernen. Lassen Sie uns nun über 2D- und 3D-Transformationen sprechen. Nun, manchmal müssen wir einige einfache Interaktionen haben, einige 2D- und 3D-Transformationen, und in diesem Fall müssen wir diese Option verwenden. Wir können auch die Interaktionen verwenden, die fortgeschrittener ist und wir werden später im Detail darüber sprechen. Aber jetzt zeige ich Ihnen, wie es funktioniert. Während mein Element ausgewählt ist, kann ich diesen Plus-Button drücken und wir haben verschiedene Arten der Transformation. Wir haben Verschieben, Skalieren, Drehen und Schrägen. Lassen Sie mich mit Move beginnen. Nun, der Move-Typ lässt uns unsere Elemente bewegen und wir können die X-, Y- und Z-Achse genau so steuern . Wenn ich den Typ in Skalieren ändere, kann ich dieses Element so skalieren. Wenn ich es in Drehen ändere, kann ich es so mit einer anderen Achse drehen, da gehen wir, und wenn ich es auf Skew setze, mal sehen, was passiert. Abhängig von unseren Bedürfnissen können wir oder auch nicht jede einzelne dieser Typen verwenden aber es ist gut zu wissen, dass sie existieren und die Möglichkeiten hier grenzenlos sind. Jetzt werde ich dir etwas anderes zeigen. Lassen Sie mich diese 2D- und 3D-Transformationen entfernen. Ich werde nur eine neue Transformationsebene erstellen und sie verschieben. Aber was ist, wenn ich mein Element gleichzeitig verschieben und skalieren möchte? Wenn ich jetzt zur Skala gehe und ich zurückkomme, kann man sehen, dass hier alles verloren ist. Alle Modifikationen, die ich hier gemacht habe, sind weg. Das liegt daran, dass wir nicht alle Typen gleichzeitig verwenden können. Wir müssen unsere Elemente tatsächlich verschieben und dann müssen wir eine andere Ebene erstellen, genau so. Jetzt kann ich es auch skalieren. Sie müssen dies beachten, wenn Sie mit 2D- und 3D-Transformationen arbeiten. Dann haben wir Übergänge. Wenn ich auf diesen Plus-Button klicke, können Sie sehen, dass wir verschiedene Arten von Übergängen haben und wir werden jetzt nicht über Übergänge sprechen, weil Sie zuerst über Zustände lernen müssen, was das Thema unserer nächsten Lektion. In der nächsten Lektion werden wir auch Übergänge ansprechen. Lassen Sie mich Übergänge entfernen. Jetzt werde ich über Filter reden. Während dieses Element ausgewählt ist, werde ich diesem Element einen Filter hinzufügen, und hier haben wir verschiedene Filter. Wir haben Unschärfe. Wir können dieses Element verschwommen machen, einfach so. Wir haben Farbanpassungsfilter wie Helligkeit. Sie können die Helligkeit Ihres Elements steuern. Sie können den Kontrast, den Farbton, ändern. Wir haben Sättigung. können Sie die Sättigung Ihres Elements verringern oder erhöhen. Wir haben Graustufen. Wenn wir Schwarz-Weiß-Bilder oder Schwarz-Weiß-Elemente wollen, können wir diesen Filter und andere Effekte verwenden. Gehen wir nun zur letzten Eigenschaft des Effekteabschnitts, der Cursor ist. Nun, jedes Element hat standardmäßig einen bestimmten Cursor. Zum Beispiel, wenn ich eine Schaltfläche hinzufüge, lassen Sie mich Ihnen zeigen, wenn ich vorgehe und eine Schaltfläche hier hinzufüge, und ich sehe, dass, wenn ich den Mauszeiger über, Sie sehen können, dass der Cursor zu diesem Zeiger geändert wurde und es erwartet wird, weil dies anklickbar. Das gleiche passiert, wenn ich einen Linkblock hinzufüge. Wenn ich einfach voran gehe und hier einen Linkblock hinzufüge, muss ich natürlich etwas hinzufügen oder mich einfach seine Farbe, Hintergrundfarbe zu etwas ändern , das Sie sehen könnten, und auch muss ich die Breite und Höhe angeben, weil Sonst ist es unsichtbar. Lassen Sie mich die Breite, 50 Pixel und die Höhe, 100 Pixel, und jetzt lassen Sie es uns überprüfen. Wieder haben wir einen Zeiger. Zum Beispiel hat der Text einen eigenen Cursor. Diese Cursor sind die Standard-Cursor unseres Browsers. Manchmal müssen wir jedoch für bestimmte Zwecke diese Eigenschaften außer Kraft setzen. Zum Beispiel, wenn ich den Cursor dieser Schaltfläche ändern möchte, kann ich das auswählen, und hier, wenn ich dieses Dropmenü öffne , ist es standardmäßig auf auto eingestellt. Meistens ist es besser, die Option auto zu verwenden, da der Browser auf diese Weise bestimmt, welchen Cursor er verwenden soll. Wenn Sie diese Einstellungen jedoch absichtlich außer Kraft setzen möchten, können wir dies tun. Zum Beispiel, lassen Sie mich es in etwas anderes ändern. Ich werde dieses Diagramm wählen und sehen, ob es funktioniert. Ja, tut es. So funktioniert der Cursor. Die meiste Zeit brauchen wir es nicht zu ändern, es sei denn, wir müssen es aus einem bestimmten Grund ändern. Alles klar Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen. Wir sehen uns im nächsten Video. 40. Staaten: Hey, in diesem Video werden wir über Zustände und Übergänge sprechen. Nun, fangen wir mit den Staaten an. Jedes Element, mit dem wir gearbeitet haben, hat einige Standardzustände , wie keine, Hover , gedrückt, fokussiert usw. Je nach Art der Elemente können sich unsere Zustände auch ändern, also lassen Sie mich Ihnen ein Beispiel zeigen. Wenn ich dieses Schaltflächenelement auswähle und zum Selektorbereich gehe, können Sie sehen, dass es dieses Abwärtspfeil-Symbol gibt. Wenn ich darauf klicke, erhalten wir Zugang zu unseren Staaten. Wir haben keine, schweben, gedrückt, fokussiert, besucht. Wenn ich Hover auswähle, kann ich die Eigenschaften des Hover-Status anpassen . Wenn der Benutzer den Mauszeiger über dieses Element bewegt, werden die neuen Eigenschaften auf dieses Element angewendet. Lassen Sie mich voran und ändern Sie die Hintergrundfarbe und ich werde es zu etwas leichterem ändern. Nun, um zu sehen, ob es funktioniert oder nicht, muss ich zuerst zum Nicht-Staat zurückkehren. Ich gehe zum Nicht-Staat, und wenn ich rüber schwebe, gehen wir hin. Wie Sie sehen können, ändert sich die Farbe, sobald ich den Mauszeiger über diese Schaltfläche führe. Wenn ich die Eigenschaften eines dieser Zustände ändere, dieser blaue Indikator angezeigt, der anzeigt, dass es einige Eigenschaften gibt , die wir für diesen bestimmten Zustand geändert haben. Aber was ist mit gepresstem? Nun, da ich die Eigenschaften von Hover geändert habe, erbt der gedrückte Zustand von den Eigenschaften von Hover. Lassen Sie mich Ihnen das beweisen. Wenn ich das auswähle, gehen wir. Wir haben jetzt unser hellblau, aber wir können das auch ändern. Ich werde voran gehen und diese Farbe in etwas dunkleres ändern. Nun, wenn ich zu keiner gehe, wenn ich eine Vorschau darauf, und jetzt, wenn ich den Mauszeiger über, werde ich das hellblaue Licht bekommen und wenn ich drücke, können Sie sehen, dass wir das dunkelblaue bekommen. Hier geht es im Grunde nur um Zustände. Aber jetzt werde ich Ihnen ein weiteres Beispiel zeigen. Wenn ich hier nach unten scrolle, habe ich hier ein Textfeld. Für Textfelder haben wir einen zusätzlichen Status. Wenn ich es auswähle und wenn ich gehe, um meine Zustände zu öffnen, können Sie sehen, dass wir diesen Platzhalter auch haben. Wenn ich zum Platzhalter gehe, kann ich das Aussehen und das Styling dieses Platzhaltertextes anpassen , geben Sie Ihre E-Mail ein, denn im Moment kann ich das nicht im None-Zustand ändern, aber wenn ich zum Platzhalter gehe, Ich kann einfach seine Farbe ändern, zum Beispiel zu Rot oder zu irgendetwas anderem. Lassen Sie mich das vorerst zurücksetzen und ich werde Ihnen einen anderen Zustand dieses Textfeldes zeigen. Das Textfeld hat auch den fokussierten Zustand, und dieser Zustand ist sehr nützlich für Texteingaben. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Wenn ich es auswähle und wenn ich zu gehe, sagen wir Kastenschatten, werde ich diesem Zustand einige Schatten hinzufügen. Lassen Sie mich den Winkel ändern, und auch die Entfernung, die Unschärfe. Ich werde die Unschärfe erhöhen und ich werde auch die Größe erhöhen und schließlich die Deckkraft verringern. Jetzt sehen wir mal, was passiert. Ich werde es in der Vorschau sehen, nichts passiert. Aber sobald ich hier klicke, können Sie sehen, dass der Fokusstatus erscheint. Wir können Zustände für fast alles verwenden, sogar für Bilder, für div-Blöcke, wie Sie hier sehen können, haben wir verschiedene Zustände. Sie sind so nützlich für diese subtilen Interaktionen. Aber wenn ich den Mauszeiger über diese Schaltfläche führe, können Sie sehen, dass wir hier keinen reibungslosen Übergang haben. Wie können wir das in Ordnung bringen? Nun, wir müssen hier den Übergangs-Abschnitt verwenden, den, über den wir in der vorherigen Lektion nicht gesprochen haben. Aber jetzt werde ich Ihnen zeigen, wie es funktioniert. Wenn wir die Eigenschaften verschiedener Zustände ändern oder einige Effekte zu unseren Elementen hinzufügen, können wir diese Änderungen mithilfe von Übergängen animieren. Im Moment haben wir drei verschiedene Zustände für diese Schaltfläche, keine, schweben und gedrückt. Wann immer wir den Übergang hinzufügen möchten, müssen wir in den None-Zustand gehen, es ist sehr wichtig, sonst wird es nicht funktionieren. Während wir uns im Nicht-Staat befinden, wie Sie sehen können, erscheint hier nichts, was darauf hinweist, dass wir im Neine-Zustand sind. Ich werde einen Übergang hinzufügen und hier muss ich die Art des Übergangs angeben. Ich habe die Hintergrundfarbe geändert. Ich werde voran gehen und nach Hintergrundfarbe suchen. Wie Sie sehen können, können wir alle Eigenschaften animieren, sogar Rand, und Polsterung, Flex-Topographie, Rahmen, alles. Ich werde Hintergrundfarbe auswählen und dann haben wir die Dauer, standardmäßig ist es auf 200 Millisekunden und die Beschleunigungsmethode eingestellt, genau sowerden wir über den Lockerungs-Editor und Lockerungsmethoden später sprechen, werden wir über den Lockerungs-Editor und Lockerungsmethoden später sprechen weil es vorerst vorwärts ist . Später werden wir in sie eintauchen, denn jetzt werden wir das nicht berühren. Mal sehen, wie es funktioniert. Ich werde es in der Vorschau sehen, und da gehen wir. Jetzt haben wir diesen reibungslosen Übergang. Der Übergang gilt für alle Zustände. Wenn ich dränge, haben wir auch einen reibungslosen Übergang. Gehen wir weiter und machen das Gleiche für unsere Texteingabe. Ich werde dieses Textfeld auswählen und ich werde sicherstellen, dass ich im Neine-Zustand bin und dann gehen wir weiter und fügen Sie die Übergänge hinzu. Von hier aus werde ich den Typ von Deckkraft zu Box-Schatten ändern. Da gehen wir. Ich werde die Dauer dieses Mal ändern, um einen dramatischeren Übergang zu bekommen. Nehmen wir an, ich werde es auf 500 Millisekunden oder eine halbe Sekunde erhöhen. Lassen Sie uns eine Vorschau darauf. Wenn ich hier klicke, da gehen wir. Jetzt ist es fokussiert und Sie müssen verstehen, dass Übergänge in beide Richtungen funktionieren Wenn ich also irgendwo anders klicke, um in den None-Zustand zu gelangen, können Sie sehen, dass es ebenfalls animiert wird. Mal sehen. Hast du das gesehen? So funktionieren Übergänge und Zustände im Grunde. Wenn Sie einige einfache Interaktionen zu unseren Elementen hinzufügen möchten, wie das, was ich Ihnen gerade gezeigt habe, können wir immer Übergänge verwenden und auch wir können 2D- und 3D-Transformationen verwenden. Aber für fortgeschrittenere Interaktionen werden wir das Interaktionsfenster verwenden und später darüber sprechen. Aber bevor wir dieses Video abschließen, werde ich Ihnen ein weiteres Beispiel zeigen. Ich werde dieses Bild, diesen Bild-Div-Block,auswählen diesen Bild-Div-Block, und mich in einen anderen Zustand gehen lassen. Ich werde gehen, um zu schweben und ich werde eine 2D- und 3D-Transformation hinzufügen und mich skalieren lassen. Ich werde es leicht skalieren, und dann werde ich zu keiner zurückkehren, und schließlich, lassen Sie mich einen Übergang hinzufügen, und ich werde Transformation animieren. Lassen Sie uns eine Vorschau darauf. Da gehen wir. Hast du das gesehen? Aber wie Sie sehen können, funktioniert es nicht für andere Bilder. Das liegt daran, dass ich für diese Elemente eine Combo-Klasse hinzugefügt habe. Dieser Übergang und all diese Interaktionen funktionieren nur für diese speziellen Div-Block. Wenn ich auf all diese Div-Blöcke anwenden möchte, muss ich diese Combo-Klasse entfernen. Jetzt, wenn ich zum Hover gehe und den Skalierungsübergang hinzufüge, da wir ihn bereits hinzugefügt haben, ist er immer noch da, also werde ich voran gehen und das ändern. Lassen Sie mich zu keiner gehen und ich werde die Übergänge hier hinzufügen, um zu transformieren. Lassen Sie mich schließlich meine Combo-Klasse noch einmal hinzufügen. Mal sehen, ob es funktioniert oder nicht und ich werde über dieses Element schweben, es funktioniert, dieses Element, es funktioniert in diesem Element. So funktionieren Zustände und Übergänge. Alles klar, ich hoffe, Sie haben dieses Video genossen. Wir sehen uns in der nächsten. 41. Breakpoint: Wenn wir eine Webseite verantwortungsvoll gestalten wollen, müssen wir Haltepunkte verwenden. Was ist ein Haltepunkt? Nun, ein Haltepunkt ist nichts anderes als eine bestimmte Größe, die einige Stiländerungen auf bestimmte Bildschirmbreite anwendet. Sie müssen sich daran erinnern, dass wir unsere Stiländerungen für verschiedene Bildschirmgrößen nur basierend auf der Breite des Browsers oder der Breite des Geräts selbst definieren , egal ob es sich um ein iPad, ein iPhone oder andere Geräte handelt. Standardmäßig verfügt Webflow über vier voreingestellte Haltepunkte. Wenn Sie hier einen Blick auf die obere Leiste werfen, können Sie sehen, dass wir den Desktop haben , der unser Basispunkt ist, dann haben wir das Tablet, dann haben wir mobile Landschaft und schließlich mobile Portrait. Ein wichtiges Prinzip, das Sie über Haltepunkte erfahren sollten, ist, dass Änderungen, die wir an unseren Stilen vornehmen, auf kleinere Geräte kaskadieren und bis zu größeren Geräten kaskadieren. Dies ist das Hauptprinzip der responsiven Webseiten. Wenn Sie es richtig lernen, können Sie leicht ansprechende Websites erstellen. Beginnen wir mit dem Desktop-Breakpoint. Wenn ich den Mauszeiger über dieses Symbol führe, bekomme ich die Informationen zu diesem bestimmten Haltepunkt, und dies wird unser Basis-Breakpoint genannt. Die nächste ist die Tablette. Wie Sie sehen können, erhalten wir den Pixelbereich. Es sagt 991 Pixel und unten, dann haben wir mobile Landschaft. Es sagt 767 Pixel und unten, und schließlich haben wir mobile Portrait. Wenn Sie Ihrem Projekt größere Haltepunkte hinzufügen möchten, können Sie dies tun. Wenn Sie hier auf dieses Symbol klicken, können Sie mit dem Hinzufügen größerer Haltepunkte beginnen. Beachten Sie jedoch, dass Sie im Moment, wenn Sie Ihrem Projekt einen großen Haltepunkt hinzufügen, diesen nicht entfernen können. Bevor Sie größere Haltepunkte hinzufügen, lassen Sie mich Ihnen zeigen, wie Breakpoints funktionieren. Ich werde beginnen, indem ich diesen Titel auswähle. Dieser Titel sieht toll aus. Die Schriftgröße sieht auf der Breite dieses Bildschirms gut aus, aber was ist, wenn ich zum Tablet gehe? Auf dem Tablet sieht es auch gut aus. Was ist mit mobiler Landschaft? Nun, hier sieht es gut aus, aber ich kann es auch kleiner machen. Während dies ausgewählt ist, gehe ich zum Typografie-Abschnitt hier im Stilfenster, und ich kann diese Eigenschaften überschreiben. Wie Sie sehen können, haben alle diese Eigenschaften diese bernsteinfarbene Farbe. Es bedeutet, dass der Wert von unserem Basis-Breakpoint kommt. Sobald ich das außer Kraft setze, wirst du sehen, dass es blau wird. Lassen Sie mich die Schriftgröße auf 40 Pixel ändern. Da gehen wir, es wird blau. Jetzt kommt diese spezifische Eigenschaft von diesem Haltepunkt, und alle Änderungen, die ich in diesem bestimmten Haltepunkt vornehme, werden auf das mobile Portrait kaskadiert, aber es wirkt sich hier nicht auf größere Haltepunkte aus. Lassen Sie mich Ihnen das beweisen. Wenn ich jetzt zum mobilen Teil gehe, können Sie sehen, dass die Schriftgröße auf 40 Pixel eingestellt ist und es aus unserer mobilen Landschaft kommt. Wenn ich jedoch zum Tablet gehe, können Sie sehen, dass die Schriftgröße immer noch 60 Pixel beträgt. So funktionieren Haltepunkte, Änderungen kaskadieren nach unten und nach oben. Wenn Sie dieses einfache Prinzip lernen, wissen Sie bereits, wie Responsive Webseiten zu entwerfen. Eine wichtige Sache bei Haltepunkten ist, dass es nur funktioniert, wenn wir die Stile im Stilfenster ändern. Wenn wir versuchen, beispielsweise die Reihenfolge dieser Elemente im Navigator zu ändern , wirkt sich dies auch auf alle anderen Haltepunkte aus. Lassen Sie mich zum mobilen Portrait gehen, und ich werde die Reihenfolge dieser Elemente im Navigator so ändern. Jetzt, wenn ich in mobile Landschaft gehe, wurde die Reihenfolge geändert, um Tablet das gleiche, Desktop-Haltepunkt, das gleiche. Sie müssen bedenken, dass wir, wenn wir die Reihenfolge unserer Elemente ändern möchten, mit Flexbox im Stil-Panel und allen anderen Eigenschaften hier tun müssen. Sie können auch ein Raster verwenden, und Sie können die untergeordneten Elemente des Rasters ändern. Sie können die Reihenfolge der untergeordneten Flexbox-Elemente ändern, wie bereits erwähnt, wie bereits erwähnt, aber Sie können die Reihenfolge Ihrer Elemente im Navigator oder auf der Leinwand hier, da die Änderungen für alle Haltepunkte gelten. Nehmen wir an, ich möchte die Farbe dieses Textes ändern. Das kann ich auch tun. Wenn ich es jedoch hier am Basishaltepunkt ändere, wird es nach unten und oben kaskadiert. Daher wirkt sich dies auch auf alle anderen Haltepunkte aus. Lassen Sie mich hier nach unten scrollen und ich werde die Farbe in etwas anderes ändern. Zum Beispiel etwas Leichteres. Mal sehen, was auf anderen Geräten passiert. Da gehen wir. Die Änderungen gelten für diesen Haltepunkt, diesen und für diesen. Wenn ich jedoch die Farbe dieses Textes hier oder an anderen Haltepunkten überschreibe, lassen Sie mich Ihnen zeigen, was passiert, wenn ich ihn hier zum Beispiel auf Rot übersetze . Wenn ich zum Desktop-Breakpoint gehe und versuche, diese Farbe in Schwarz zu ändern, wirkt sich dies nicht mehr auf den mobilen Portrait-Breakpoint aus. Warum? Weil wir diese Eigenschaft bereits für diesen bestimmten Haltepunkt überschrieben haben. Da gehen wir. Es hat sich nicht geändert. Auf diese Weise funktionieren Haltepunkte im Allgemeinen, es sei denn, es gibt eine bestimmte Eigenschaft, die auf diesen bestimmten Haltepunkt festgelegt ist, werden Änderungen immer kaskadiert. Wenn ich dieses Styling hier entferne, wenn ich die Wahltaste oder die Alt-Taste auf meiner Tastatur gedrückt halte und hier klicke, klicke auf diesen Farbtext, jetzt kommt das Styling vom Desktop-Haltepunkt. Lassen Sie mich auf den Desktop gehen und ich werde Ihnen auch andere Dinge zeigen. Lassen Sie mich auf Tablet gehen, und wie Sie sehen können, sehen diese Bilder gut aus, obwohl wir eine schmale Bildschirmgröße haben. Aber was ist, wenn ich in die mobile Landschaft gehe? Nun, sie sind zu geschrumpft, also werde ich das ändern. Wir können unseren Image-Wrapper auswählen, die Flexbox ist, und wir können die Eigenschaften unserer Flexbox ändern. Anstatt die Richtung auf horizontal zu setzen, werde ich sie in vertikal ändern. Großartig. Dann werde ich sie an der Mitte ausrichten. Schließlich werde ich die untergeordneten Elemente dieses Wrapper-Bildes auswählen, und hier wird die Breite auf 31 Prozent gesetzt, da sie vom Desktop-Breakpoint stammt. Ich werde die Breite auf 100 Prozent ändern, und erinnere mich daran, dass jede Änderung, die ich an diesem Haltepunkt mache auch auf das mobile Portrait kaskadiert. Jetzt werde ich diesen Bildern einen unteren Rand hinzufügen. Ich denke, vielleicht wären 10 Pixel in Ordnung. Mal sehen, was passiert, wenn ich ins mobile Portrait gehe. Da gehen wir. Jetzt sehen sie toll aus. Aber wenn ich auf Tablet gehe, ist es intakt. Wenn ich auf den Desktop gehen, können Sie sehen, wir haben immer noch die horizontale Richtung. Wenn ich eines dieser untergeordneten Elemente auswähle, wird die Breite auf 31 Prozent festgelegt und hat sich nicht geändert. Mit Breakpoints können wir jede Art von responsiven Seiten einfach und bequem erstellen. Es gibt jedoch einige Punkte, die ich erwähnen sollte. Nehmen wir an, ich möchte dieses Bild an einem anderen Haltepunkt ändern. Mal sehen, was passiert. Wenn ich dieses Bild auswähle und es in etwas anderes ändere, zum Beispiel dieses, gilt diese Änderung für alle Haltepunkte. Wenn ich auf den Desktop gehe, gehen wir. So funktionieren Bilder. Du änderst den Stil nicht. Wenn ich das Hintergrundbild hier im Stilfenster verwende, könnten wir es für jeden bestimmten Haltepunkt festlegen, aber mit Bildern ist es nicht möglich. müssen Sie im Hinterkopf behalten. Ein weiterer wichtiger Punkt ist, dass, wenn Sie den Text irgendwo auch im mobilen Portrait ändern , er sich auf alle anderen Haltepunkte auswirkt, da wir die Stile nicht ändern. Wenn ich dieses Design hier einfach entferne, mal sehen, was passiert. Da gehen wir. Es wurde aus allen Haltepunkten entfernt. Sie müssen sich also dieser Einschränkungen bewusst sein. Aber was, wenn Sie einige Elemente entfernen möchten? Nun, ich zeige Ihnen, wie es funktioniert. Wenn ich mich entscheide, diesen Absatz hier zu entfernen, und ich wähle ihn aus und ich drücke Löschen oder ich kann mit der rechten Maustaste darauf klicken und ihn einfach löschen, wird er aus dem Dokument selbst entfernt. Es wirkt sich auf alle anderen Haltepunkte genau so aus, weil es nicht mehr in unserem Code existiert. Lassen Sie mich jedoch die Operation rückgängig machen, wenn ich beschließe, diese Elemente aus diesem bestimmten Haltepunkt zu entfernen, kann ich sie auswählen. Ich kann hier zu den Anzeigeeinstellungen gehen, und ich kann die Anzeigeeinstellung auf Keine einstellen. Jetzt ist es versteckt, und es ist nur im mobilen Portrait versteckt. Warum? Weil wir die CSS-Eigenschaften hier geändert haben. Lassen Sie mich hier auf den Desktop gehen. Sie können sehen, dass es immer noch da ist. Ich werde auf Tablet und mobile Landschaft gehen, es ist immer noch da. Dies ist ein guter Trick zum Ausblenden von Elementen. Sie müssen jedoch bedenken, dass das Element hier zwar ausgeblendet ist, es sich jedoch immer noch in Ihrem Code befindet, aber es ist nicht sichtbar, weil wir nur seine Anzeigeeinstellung auf keine setzen, aber es bedeutet nicht, dass es nicht existiert. Wenn ich hier irgendwelche Eigenschaften zurücksetzen möchte, wie ich bereits erwähnt habe, werde ich Alt-Taste oder Wahltaste auf meiner Tastatur gedrückt halten und ich werde darauf klicken. Alternativ können Sie auf dieses blaue Label klicken und Sie können auf Reset einfach so drücken. Aber was ist mit größeren Haltepunkten? Nun, größere Haltepunkte sind optional. Deshalb werden sie hier standardmäßig nicht oben angezeigt. Aber manchmal ist es sinnvoll, größere Haltepunkte hinzuzufügen und einige, sagen wir, bestimmte Stile für diese Haltepunkte anzugeben . Ich werde Ihnen zeigen, wie es funktioniert. Ich werde diesen 1280 Pixel Haltepunkt hinzufügen. Es heißt, diesen Haltepunkt erstellen und höher, Sie können den Haltepunkt nicht aus dem Projekt entfernen, nachdem er erstellt wurde. Erstellen Sie einen. Ich werde auch den nächsten Haltepunkt erstellen. Ich werde es erstellen, und schließlich die 1920 Pixel Breakpoint und Create. Cool. Jetzt haben wir alle sieben verfügbaren Haltepunkte, und wie kleinere Geräte werden Änderungen, die wir am Basis-Breakpoint vornehmen, bis zu größeren Geräten kaskadiert. Wenn ich zu dieser Pause gehe und wenn ich mich entscheide, die maximale Breite meines Containers hier zu ändern, wie Sie sehen können, wird die maximale Breite auf 1100 gesetzt. Wenn ich mich entscheide, es auf, sagen wir, 1200 zu erhöhen , so gilt diese Änderung für alle größeren Geräte, aber sie kaskadiert nicht. Lassen Sie mich Ihnen zeigen, wenn ich zu diesem 1440 Pixel Haltepunkt gehe, können Sie sehen, dass die maximale Breite auf 1200 eingestellt ist. Wenn ich zu 1920 Pixel Breakpoint gehe, dann gehen wir. Wieder, 1200. Für diesen Haltepunkt kann ich das ändern. Ich kann diese Eigenschaft zum Beispiel auf 1700 überschreiben , sie sieht jetzt viel besser aus, diese Änderung gilt jedoch nicht für kleinere Haltepunkte. Das war viel zu verarbeiten. Lasst uns zusammenfassen. Zuerst müssen Sie das Hauptprinzip der Reaktionsfähigkeit und Haltepunkte, auch als Medienabfragen bekannt, verstehen auch als Medienabfragen bekannt, um responsive Design zu erstellen. Dieses Prinzip besagt, dass Änderungen, die wir auf unseren Basis-Breakpoint anwenden, auf kleinere Geräte kaskadieren und bis zu größeren Geräten kaskadieren. Dies ist die Hauptsache, die Sie lernen müssen. Dann müssen Sie verstehen, dass Haltepunkte nur auf Stiländerungen reagieren. Was auch immer Sie im Stilfenster auf der rechten Seite ändern, wird die Haltepunkte respektieren. Wenn Sie jedoch etwas im Navigator ändern oder die Reihenfolge Ihrer Elemente im Navigator oder auf der Leinwand ändern, wirkt sich dies nicht auf verschiedene Haltepunkte aus. Der andere Punkt war, dass, wenn Sie Ihre Bilder mit einem Bildelement ersetzen, dies sich auf alle Haltepunkte auswirkt, und nicht zuletzt, wenn Sie Ihre Textebenen ändern, wenn Sie Ihren Text ändern, es wirkt sich auch auf alle Ihre Haltepunkte aus. Alles klar, Leute, hier geht es um Breakpoints und Reaktionsfähigkeit. Natürlich werden wir ausführlich über Reaktionsfähigkeit sprechen , sobald wir mit der Erstellung unserer Projekte beginnen. Ich hoffe, Sie haben dieses Video genossen und wir sehen uns im nächsten. 42. So erstellst: Hey, willkommen zurück zu einem anderen Abschnitt dieses Kurses. In diesem Abschnitt beginnen wir gemeinsam mit dem Aufbau unseres realen Projekts. Ich bin so aufgeregt. Zuerst werde ich Ihnen zeigen, was wir bauen werden, und dann werde ich den Prozess erklären. Schließlich werden wir unser Projekt in Webflow einrichten. Ohne weitere Umschweife, lasst es uns loslegen. Dies ist das Projekt, das wir in diesem Abschnitt erstellen werden. Es ist eigentlich eine Website für eine fiktive Designagentur namens Circle. Zusammen werden Sie und ich diese Website von Grund auf neu erstellen. Wir werden nicht über den Prozess der Benutzeroberfläche sprechen , da dies nicht das Hauptziel dieses Kurses ist. Das Hauptziel dieses Kurses ist es, Ihnen beizubringen, wie man ein Benutzeroberflächendesign in eine voll funktionsfähige Website umwandelt. Daher werden wir dieses Projekt nicht von Grund auf neu entwerfen. Ich habe das Design vorbereitet und ich werde Ihnen zeigen, wie Sie Zugang zu diesem Projekt bekommen können. Lassen Sie mich Ihnen zunächst zeigen, wie das Design aussieht. In diesem Projekt werden wir drei verschiedene Seiten erstellen: die Homepage, die Projektseite und die Kontaktseite. Wir werden zwei statische Seiten und eine dynamische Seite erstellen. Natürlich werden wir über den Unterschied zwischen statischen Seiten und dynamischen Seiten sprechen. Aber jetzt möchte ich Ihnen zeigen, wie die Homepage aussieht. Ich werde einfach so nach unten scrollen. Wie Sie sehen können, haben wir verschiedene Abschnitte. Wir haben Zeugenabschnitt, wir haben Dienstleistungen, wir haben einen Call to Action Abschnitt, und schließlich, eine Fußzeile. Ich werde verkleinern und ich werde Ihnen auch andere Seiten zeigen. Hier haben wir die Projektseite. Wie Sie sehen können, gibt es einige Informationen über die neuesten Projekte, die dieses Unternehmen vor kurzem durchgeführt hat, und auch den anderen Projektabschnitt und wieder den Aufruf zum Handeln. Schließlich gibt es diese Kontakt-uns Seite, die wir zusammen bauen müssen. Dies sind die Hauptseiten dieses Projekts, eine Homepage oder sagen wir, die Landingpage, die die jüngsten Projekte dieser Firma namens Circle, diese fiktive Firma, zeigt , sagen wir, und zeigt auch ihre Dienste. Zum Beispiel haben wir hier User Interface Design, User Experience Design, Anwendungsentwicklung und einen Call to Action mit einem Formular. Zuerst werden wir dieses Design in Webflow erstellen, und dann werden wir es reaktionsschnell machen und schließlich werden wir mit Interaktionen und Animationen arbeiten, um die Website viel besser aussehen zu lassen und den Benutzer zu verbessern Erfahrung. Sie werden lernen, wie Sie erweiterte Interaktionen in Webflow erstellen und auch Sie werden lernen, wie Sie erweiterte Animationen erstellen. Dies ist der Hauptpunkt, den ich erwähnen musste. hier, wie Sie sehen können, haben wir auch ein Designsystem. Hier haben wir die Farbstile und die Textstile auf der rechten Seite. Ich habe sie schon vorbereitet. Ich werde Ihnen zeigen, wie Sie jetzt Zugang zu diesem Projekt bekommen können. Die Software, die ich verwende, heißt Figma. Sie sind vielleicht damit vertraut oder vielleicht nicht, aber wenn Sie es nicht sind, ist das völlig in Ordnung, weil wir in diesem Projekt nicht mit Figma arbeiten werden. Wir brauchen nur Figma, um zu sehen, wie dieses Projekt strukturiert ist, und vielleicht müssen wir nur einige Eigenschaften wie die Schriftgröße oder die Farben überprüfen. Nichts Kompliziertes. Wenn du noch nicht mit Figma gearbeitet hast, mach dir keine Sorgen, du wirst keine Probleme haben. Zunächst einmal werde ich Sie bitten, voranzugehen und ein kostenloses Figma-Konto zu erstellen , wenn Sie noch keine haben. Wenn Sie auf figma.com gehen, können Sie auf diesen Anmelde-Button in der oberen rechten Ecke klicken und hier können Sie Ihre E-Mail-Adresse eingeben und ein Passwort für Ihr Konto auswählen und auf hier können Sie Ihre E-Mail-Adresse eingeben und ein Passwort für Ihr Konto auswählen das Konto erstellen klicken. Sobald Sie angemeldet sind, sehen Sie dieses Dashboard. Sie können sich in einer aktuellen Registerkarte oder der Registerkarte Entwurf befinden, das ist völlig in Ordnung. Was Sie tun werden, ist das Projekt hochzuladen, das ich für Sie vorbereitet habe. Wenn Sie sich in einem Entwurf oder kürzlich befinden, können Sie einfach den Kopf über diese neue Schaltfläche auf der rechten Seite und Sie können darauf klicken und Sie können den Import-Button drücken. Ich werde es Ihnen auch hier zeigen. Ich bin in einem Team und ich werde diese neue Schaltfläche drücken und ich werde auf Import klicken, und dann kann ich das Projekt von meinem Computer importieren. Alternativ können Sie die Datei, die ich für Sie vorbereitet habe, einfach per Drag & Drop ablegen. Zuerst müssen Sie das Figma-Projekt, das ich für Sie vorbereitet habe, aus dem Ressourcenbereich oder aus der Asset-Vorlesung herunterladen . Sobald Sie diese ZIP-Datei heruntergeladen haben, müssen Sie diese entpacken und sobald Sie die Datei entpacken, erhalten Sie diese webflowproject.fig-Datei. Die Erweiterung ist.fig und du kannst sie einfach per Drag & Drop in das Dashboard deiner Figma ziehen, genau so. Sobald es importiert wurde, können Sie darauf doppelklicken und es ist fertig. Sie erhalten Zugriff auf das Projekt mit allen Details, die Sie benötigen. Das ist im Grunde das, was Sie in Figma tun müssen. Nichts mehr. Erstellen Sie zuerst ein Konto. Zweitens laden Sie das Figma-Projekt herunter, das ich für Sie vorbereitet habe, und drittens importieren Sie dieses Projekt in Ihr Figma-Konto. Das ist alles. Sobald Sie diese drei Schritte ausgeführt haben, ist es an der Zeit, das Projekt auf Webflow einzurichten. Ich gehe zum Dashboard meines Webflows. Hier werde ich diese neue Projekt-Schaltfläche drücken, und dann werde ich diese leere Website auswählen, und hier, lassen Sie es uns nennen Kreis. Sie können es benennen, was Sie wollen, das spielt keine Rolle und lassen Sie uns auf die Schaltfläche Projekt erstellen klicken. Perfekt. Jetzt sind wir innerhalb des Designers und wir haben eine leere Leinwand. Für dieses Projekt müssen wir mit einigen Assets arbeiten. Wenn ich hier zu meinem Figma-Projekt gehe, wie Sie sehen können, haben wir verschiedene Bilder, wir haben verschiedene Logos. Außerdem haben wir einige Bilder für unsere Projekte und diese Emojis, und auch einige Icons. Wir müssen diese Assets exportieren und dann in unser Webflow-Projekt importieren. Aber um Ihre Zeit zu sparen, habe ich sie bereits exportiert und habe einen Asset-Ordner für Sie vorbereitet. Sie können es aus dem Ressourcenbereich oder aus der Assets-Vorlesung herunterladen. Später werden wir darüber sprechen, wie Sie Ihre Bilder exportieren sollten, wie Sie Ihre Bilder für die Webentwicklung optimieren sollten. Aber im Moment müssen Sie nur Zugriff auf diese Assets erhalten und Sie müssen lernen, wie Sie diese Assets verwenden können, um ein reales Projekt zu erstellen. Wir werden in diesem Stadium dieses Kurses nicht in Details über die Bildoptimierung eintauchen , aber später werden wir darüber sprechen. Gehen wir zu Webflow. Wenn ich dann zum Asset-Bereich hier gehe, kann ich meine Akten hier ablegen. Sobald Sie den Assets-Ordner heruntergeladen und Sie das entpacken, können Sie diese Dateien einfach per Drag & Drop hier, lassen Sie mich Ihnen zeigen, wie es funktioniert. Innerhalb des Assets-Ordners haben Sie verschiedene Ordner wie Hero-Abschnitt, Logos, Newsletter, Projektabschnitt, Services-Abschnitt und Testimonial Abschnitt. Wir werden jeden von ihnen öffnen, und wir werden sie eins nach dem anderen importieren. Ich beginne mit dem Heldenbereich. Da gehen wir. Ich werde alle auswählen und sie per Drag & Drop ablegen. Genau so. Ich werde den gleichen Prozess für all diese Ordner wiederholen. Ich werde diesen Prozess beschleunigen, um Ihnen etwas Zeit zu sparen. Es ist erledigt. Alle unsere Bilder und Icons wurden erfolgreich hochgeladen. Was müssen wir noch tun, um unser Projekt aufzustellen? Nun, in diesem Projekt werden wir bestimmte Schriftarten verwenden. Wenn ich hier zu meinem Figma-Projekt gehe und wenn ich eine dieser Textebenen auswähle, werde ich auf diesen Titel, diese Überschrift doppelklicken , und ich kann Ihnen zeigen, welche Schriftarten ich dafür verwendet habe. Es heißt Roboto. Dies ist eine Google-Schriftart und es ist kostenlos zu verwenden, und wir werden das auch brauchen. Wie Sie sich erinnern, müssen wir die Schriftart in unseren Projekteinstellungen hinzufügen, um mit diesen Schriftarten zu arbeiten . Wenn ich zu Webflow gehe und wenn ich zu den Projekteinstellungen gehe, kann ich auf die Registerkarte Schriftarten gehen und hier werde ich Schriftart aus der Liste auswählen. Ich werde nach Roboto suchen. Da gehen wir. Ich werde mich für Roboto entscheiden. Hier werde ich verschiedene Varianten dieser Schriftart wählen, verschiedene Gewichte für diese Schriftart. Regular sollte ausgewählt werden. Ich wähle 300, 500 und 700 aus. Wir werden keine 900 brauchen. Es wird zu mutig sein. Dies sind die notwendigen Schriftarten, die wir für diese Projekte benötigen. Später, wenn wir mehr Varianten benötigen, können wir immer zu diesem Abschnitt kommen und einfach mehr Varianten hinzufügen. Ich werde die Schaltfläche „Schriftarten hinzufügen“ drücken und das ist alles. Ich gehe rüber zum Designer. Perfekt. Wir sind bereit, unser Projekt zu bauen, da unsere Assets importiert werden und auch unsere Schriftarten zu diesem Projekt hinzugefügt wurden. Alles klar, Leute, das ist alles für dieses Video. Wir haben unser Projekt erfolgreich aufgebaut und wir werden mit dem Aufbau unseres Projekts im nächsten Video beginnen . Wir sehen uns dann. 43. Navigationsbar: Hey, in diesem Video werden wir anfangen, unsere Navigationsleiste zu bauen. Lassen Sie mich zuerst zu meinem Figma-Projekt hier gehen. Wie Sie oben sehen können, haben wir eine Navigationsleiste, die ein Logo auf der linken Seite enthält, dann drei verschiedene Menüs, rechts in der Mitte, und schließlich eine Kontakt-Us-Schaltfläche auf der rechten Seite. Es sollte oben platziert werden. Wie Sie sehen können, hat diese Homepage eine Hintergrundfarbe, die nicht weiß ist. Für diesen Hintergrund habe ich eine Farbe namens neutrales Licht verwendet. Wenn ich zu meinen Farbstilen gehe, wie Sie sehen können, habe ich diese neutrale Farbe und habe sie für meinen Hintergrund verwendet. Dies ist die gleiche Farbe, die wir für alle verschiedenen Seiten verwendet haben. Daher sollten alle unsere Seiten in unserem Projekt die gleiche Hintergrundfarbe haben. Um unser Leben viel einfacher zu machen, werden wir einige globale Farbfelder für unsere Farben erstellen , um sie immer wieder und später wiederverwenden zu können. Wenn Sie sich entscheiden, einige Änderungen vorzunehmen, müssen Sie nicht weitergehen und Ändern Sie manuell die Farbe aller Elemente nacheinander. Sie können die Änderung nur einmal vornehmen, und die Änderung wird auf alle Elemente angewendet , die dieses bestimmte globale Farbfeld verwenden. Wir haben bereits über globale Farbfelder gesprochen. Wir werden jetzt einige für unser Projekt erstellen. Fangen wir an. gehe ich hier zu meinem Designsystem. Ich werde keine globalen Farbfelder für all diese Farben erstellen da einige dieser Farben in diesem Projekt nicht verwendet werden. Ich habe sie gerade erstellt, um ein gutes Farbschema zu haben, und später, wenn Sie einige Farben zu Ihrem Projekt hinzufügen müssen, oder wenn Sie einige Farben ändern müssen, könnten Sie hier nur einige vordefinierte Farben haben, aber wir werden nicht , um alle von ihnen zu verwenden. Wenn ich zu Webflow gehe und hier, werde ich Körper auswählen, und dann gehe ich zum Selektor. Hier, wenn ich nur einmal klicke, können Sie sehen, dass wir dieses HTML-Tag bekommen, das rosa ist. Hier steht Body alle Seiten. Diese HTML-Tags sind so nützlich, weil wir einige Standard-Stylings für verschiedene Tags definieren können . Zum Beispiel auf Textkörper oder Seiten, oder alle H1s oder alle H3s für unsere Überschriften oder für unsere Absätze. Wir werden später darüber reden. Aber im Moment werde ich Körper alle Seiten auswählen. Sobald ich diesen Körper alle Seiten ausgewählt habe, kann ich einige Standard-Styling für das body-Tag definieren. Hier werde ich voran gehen und die Farbe ändern, und ich werde einen Farbcode brauchen. Wenn ich hier zu meinem Figma-Projekt gehe, wie Sie sehen können, habe ich hier den Farbcode geschrieben. Sie können einfach darauf doppelklicken und dann können Sie es kopieren und einfügen Befehl C oder Control C. Dann können Sie zu Ihrem Webflow gehen, und hier, Sie können es einfach einfügen Befehl V oder Control V Wenn ich Enter drücken, da gehen wir. Die Farbe wurde geändert. Aber wie ich bereits erwähnt habe, werde ich verschiedene Farbfelder erstellen, verschiedene globale Farbfelder für dieses Projekt. Ich werde diesen „Plus“ -Button drücken, und hier werde ich Neutral/Licht schreiben. Dann werde ich es erschaffen. Cool. Jetzt brauche ich mehr Farben. Lassen Sie uns voran und erstellen Sie hier alle Farbfelder , die wir für dieses Projekt benötigen werden. Ich gehe voran und kopiere diesen Farbcode, den einen direkt neben diesem Neutral/Licht. Ich werde es kopieren und ich werde ein neues Farbfeld erstellen , dass wir den Farbcode in den neuen geändert haben, und ich werde es Neutral/Medium nennen, genau so. Dann werde ich das nächste Farbfeld erstellen. Gehen wir zu Figma und ich werde diesen dunklen Farbcode kopieren. Lassen Sie mich ein Musterfeld erstellen. Ich werde den Farbcode ändern und nennen wir ihn Neutral/Dunkel. Wir brauchen drei weitere Farben. Wir brauchen unsere Primärfarbe, die dieses Blau ist. Ich werde den Farbcode kopieren. Ich werde ein neues Musterfeld erstellen, es hier einfügen. Hier werde ich es Primär/Standard nennen. Erstellen. Ich werde diesen Farbcode für diese orangefarbene Farbe kopieren. Ich werde es kopieren und lassen Sie uns ein neues Farbfeld erstellen, den Farbcode hier einfügen, und nennen wir es sekundär. Klicken Sie auf „Erstellen“. Schließlich werde ich voran gehen und kopieren Sie diesen Farbcode, diese hellblaue Farbe, und lassen Sie mich ein Farbfeld erstellen. Ich werde es hier einfügen, und nennen wir es neutrales Hellblau. Großartig. Unsere globalen Farbfelder sind fertig, aber stellen Sie sicher, dass Sie Ihre neutrale/helle Farbe für Ihren Körper verwenden, alle Seiten stapeln. Moment haben wir diese Farbfelder im Bereich „Typografie“ erstellt, deshalb hat sich unser Hintergrund nicht geändert. Das ist völlig in Ordnung, weil wir diese Farbfelder auch im Farbbereich Hintergründe verwenden können . Wenn ich zur Hintergrundfarbe gehe, kann ich diese Farbe auswählen und sie in Neutral/Licht ändern. Nun wurde die Farbe meiner Hintergründe geändert und ich kann auch diese Typographie-Farbe zurücksetzen. Ich kann meine Wahltaste oder Alt-Taste auf meiner Tastatur gedrückt halten und darauf klicken. Da gehen wir. Die Farbe der Typografie wurde zurückgesetzt und wir sind gut zu gehen. Jetzt, da unser Hintergrund fertig ist und auch unsere Farben bereit sind, können wir mit der Erstellung unserer Navigationsleiste beginnen. Mal sehen, was wir hier haben. Wie Sie sehen können, habe ich in diesem Projekt verschiedene Abschnitte erstellt. Lassen Sie mich Ihnen zeigen, wie es strukturiert ist. Genau an der Spitze haben wir navbar. Dies ist ein Abschnitt, und wenn ich ihn öffne, innen haben wir einen Container, und wenn ich ihn innen öffne, haben wir verschiedene Elemente. Wir haben die Menüs, wir haben den Knopf, und wir haben das Logo. Das ist so einfach. Dann haben wir den Heldenbereich, den Kundenbereich und so weiter. Alle diese Abschnitte haben einen Behälter, wie Sie sehen können, hier haben wir den Behälter und innen haben wir verschiedene Elemente. In diesem Abschnitt haben wir einen Behälter und innen haben wir verschiedene Elemente. Wir werden unser Projekt in Webflow auf die gleiche Weise strukturieren. Jetzt werden wir anfangen, unsere Navigationsleiste zu erstellen. Um eine Navigationsleiste zu erstellen, müssen wir zum Abschnitt Element hinzufügen gehen. Ich werde nach unten scrollen, um eine navbar-Komponente zu finden. Ich werde es hierher ziehen und ablegen. Da gehen wir. Wir haben die meisten Elemente, die wir für dieses Projekt benötigen, aber wir müssen einige Änderungen vornehmen. Hier, in dieser Navigationsleiste, wie Sie sehen können, haben wir einen Container wie in unserem Design. Hier in dieser Navbar haben wir einen Container. Aber dieser Container standardmäßig hat eine bestimmte maximale Breite, und dies ist nicht die maximale Breite, die wir in diesem Projekt verwenden werden. Standardmäßig ist die maximale Breite dieses Containers auf 940 Pixel festgelegt. Aber für dieses Projekt wird die maximale Breite unseres Containers 1.100 Pixel betragen. Warum? Denn wenn ich hier zu meinem Design gehe und wenn ich zum Beispiel diese aktuellen Projekte auswähle, im Inneren, wenn ich den Container auf der rechten Seite im Inspektor auswähle, können Sie sehen, dass die Breite 1.100 Pixel beträgt. Deshalb müssen wir unseren eigenen Container erstellen und es ist sehr einfach. Wir brauchen nur einen div-Block mit einigen spezifischen Größeneigenschaften. In Ordnung, also zuerst, lassen Sie uns unseren eigenen Container erstellen. Ich gehe zum Add-Abschnitt, ich werde einen Div-Block hier in dieser Navbar ziehen und ablegen und ihm eine Klasse geben. Ich werde es Container nennen. Wir werden diese Klasse auch für andere Container verwenden. Hier für die maximale Breite werde ich es auf 1100 Pixel setzen und dann müssen wir diesen Container zentrieren. Erinnerst du dich, wie wir das machen konnten? Ja, du hast recht. Wir können hier einfach auf dieses kleine Symbol klicken und da gehen wir, es ist zentriert. Jetzt haben wir gerade einen Container erstellt, der eine maximale Breite von 1100 Pixel hat und er zentriert ist, weil wir auf diese Schaltfläche geklickt haben, und seine linken und rechten Ränder sind auf auto eingestellt. Deshalb ist es zentriert. haben wir bereits besprochen. Was müssen wir jetzt noch tun? Weil wir jetzt hier zwei Container haben. Wenn ich diesen Hauptcontainer öffne, kann ich einfach alle Elemente ziehen und in unseren neuen Container ablegen , weil wir diesen Container nicht mehr brauchen. Lassen Sie mich mit diesem Logo-Link beginnen, Brand Link und ich werde es ziehen und sicherstellen , dass Sie es in Ihrem neuen Container fallen, sollte es innen verschachtelt werden. Dann werde ich das Nav-Menü auswählen, Ich werde das gleiche tun und schließlich diese Menü-Taste, und lassen Sie es hier, cool. Jetzt können wir diesen Container, den Hauptcontainer, auswählen und entfernen. Alles klar, unser Container ist fertig. Da dieser Container für diese Navbar verwendet wird, werde ich ihm eine Combo-Klasse geben. Warum? Denn später werden wir diesen Container-Klassennamen auch für andere Container verwenden. Hier werde ich eine neue Combo-Klasse erstellen und ich werde es navbar nennen. Setzen wir nun die Anzeigeeinstellung auf Flexbox anstelle von Block, okay, einfach so. Hier, wie Sie im Inneren sehen können, haben wir verschiedene Elemente. Wir haben die Marke Link Block, wir haben diese nav Menü div Block, und schließlich haben wir diese Menü-Taste, die nicht sichtbar ist, weil diese Menü-Taste erscheint, wenn wir zu Tablet gehen, wie Sie hier sehen können, oder mobil. Wir haben bereits darüber geredet. Was müssen wir jetzt tun? Zuerst werde ich diesen Container auswählen und ich werde einige seiner Eigenschaften hier ändern. Ich werde mit einer Linie beginnen, ich werde es an der Mitte ausrichten, und auch ich werde die Rechtfertigung in Raum zwischen ändern. Warum? Denn wenn Sie hier zu unserem Designprojekt gehen, können Sie sehen, dass unser Logo und unser Knopf die Kanten dieses Behälters berühren. Deshalb muss ich die Begründung dieses Containers in Abstand zwischen ändern. Wenn Sie sich erinnern, wenn wir es auf Abstand zwischen setzen, berührt unser erstes Element die linke Seite dieses Containers und unser letztes Element berührt die rechte Seite dieses Containers. Das ist genau das, was wir wollen, aber hier brauchen wir etwas anderes, wir brauchen auch einen Knopf. Lassen Sie uns einen erstellen. Ich gehe weiter und ziehe einen Knopf, innerhalb dieses Containers. Da gehen wir, wir haben unseren Knopf und ihre Platzierung sieht gut aus , weil unser Knopf die rechte Seite unseres Containers berührt. Nun gehen wir weiter und wählen Sie diesen Brand Link Block und ich werde ihm einen Klassennamen geben. Hier werde ich es Navbar Logo nennen. Das ist richtig, navbar Unterstrich, Unterstrich, ich werde zwei Unterstriche verwenden, und Logo dort gehen wir. Sie können es benennen, wie Sie wollen, so strukturiere ich meine Klassen. Ich werde später über Klassennamen sprechen, welches System Sie für Ihre Projekte verwenden können, aber es spielt keine Rolle, solange Sie wissen, was Sie tun und solange Ihre Namen Sinn machen, können Sie entscheiden, wie Sie Ihre Elemente benennen möchten. Hier haben wir navbar Logo, und dann werde ich zu den Hintergründen hier gehen und ich werde hier ein Bild hinzufügen. Lassen Sie uns Bild wählen und aus meinem Vermögen, Ich werde für Kreis SVG suchen, das ist das Logo groß, ich werde wählen, dass. Was muss ich sonst noch tun? Zuerst werde ich es so einstellen, dass es enthalten ist, dann werde ich seine Position in die Mitte ändern und schließlich werde ich den Reifen ändern, um nicht einfach so zu fliesen, aber es sieht zu groß aus, nicht wahr? Also werde ich voran gehen und seine Größe Eigenschaft ändern. Legen wir die Breite auf 60 Pixel und die Höhe auf 18 Pixel fest. Sie können sie anpassen, wie Sie wollen, aber basierend auf meiner Designdatei hier, wenn ich dieses Logo auswähle, können Sie sehen, dass seine Breite ungefähr 60 Pixel beträgt und seine Höhe auf 18 Pixel eingestellt ist. Cool, unser Logo sieht toll aus. Jetzt müssen wir unsere Navigationsmenüs erstellen. Also hier in unserer Design-Datei haben wir ein Haus, Projekte und Dienstleistungen. Die Startseite, die die ausgewählte Seite oder das ausgewählte Menü ist, sollte die Primärfarbe haben und die anderen sollten die neutrale mittlere Farbe haben, wie Sie hier sehen können. Lassen Sie uns voran und erstellen Sie unsere Menüs. Wir haben das Haus, wir haben über, Ich werde die über Projekte und den Kontakt zu Dienstleistungen ändern, cool. Was müssen wir sonst noch tun? Wie Sie sehen können, verwenden wir hier eine mittlere Schriftart, ein mittleres Gewicht für diese Menüs, aber hier, das sieht leicht aus. Also werde ich einen von ihnen auswählen, es spielt keine Rolle, mit welchem ich mit zu Hause anfangen werde, und ich werde ihm eine Klasse geben. Warum? Weil wir die Stile wiederverwenden, die wir für diese bestimmte nav Link immer wieder einstellen werden. Es macht Sinn, ihm hier eine Klasse zu geben und ich werde nav Unterstrich schreiben, Unterstrich, Link, einfach so. Jetzt werde ich hier zum Typografiebereich gehen, und ich werde die Schriftart in Roboto ändern, die, die wir zuvor hinzugefügt haben, und das Gewicht ist auf 400 oder normal eingestellt. Ich werde es auf 500 oder mittel setzen und die Schriftgröße wird 17 Pixel sein, wie Sie hier sehen können, wir haben 17 Punkte. Setzen wir es auf 17. Was ist mit der Farbe? Lassen Sie uns die Farbe auf neutrales Medium setzen und wir sind fast fertig. Nun, da wir diese Stylings auf diesen ersten Nav-Link angewendet haben, können wir unseren zweiten Link auswählen und hier werden wir die nav Link-Klasse genau so für die dritte als auch verwenden , cool, aber was ist mit der Farbe des ersten sollte Verwenden Sie nicht die Primärfarbe? Ja, sollte es. Wie können wir das tun? Es ist so einfach. Wir müssen eine Combo-Klasse erstellen, während dieser erste Link ausgewählt ist, werde ich eine neue Combo-Klasse erstellen und nennen es aktuell. Es bedeutet, dass die aktuelle Seite ausgewählt ist, okay. Dann werde ich seine Farbe zu primären ändern, unsere Menüs sind auch bereit. Cool, aber was ist mit diesem Knopf? Nun, wir müssen diesen Knopf ändern. Also werde ich diese Schaltfläche auswählen und ich werde ihm eine Klasse geben. Ich werde es primäre Taste groß nennen , dann werde ich anfangen, seine Eigenschaften zu ändern. Zuerst werde ich hier die Typografie ändern, die Schrift auf Roboto, und das Gewicht wird 400 normal sein, das ist in Ordnung. Was ist mit der Größe? Es wird 17 Pixel sein. Wenn Sie hier zur Entwurfsdatei gehen, wenn Sie diese Schriftart auswählen, können Sie sehen, dass es 17 heißt, und ich kann den Weg der Schriftart auch auf Medium ändern. Aber mal sehen, wie es geht. Dann werde ich seine Hintergrundfarbe auf unsere Primärfarbe ändern und schließlich, lassen Sie mich den Text ändern, um uns zu kontaktieren, cool. Aber was ist mit der Polsterung? Da hier, wie Sie sehen können, haben wir mehr Polsterung um diesen Text, Ich werde diese Kontaktieren Sie uns nimmt hier auswählen, und wir werden die Wahltaste oder Alt-Taste auf meiner Tastatur gedrückt halten und dann kann ich die Polsterung. Unsere obere und untere Polsterung beträgt 15 Pixel, und unsere linke und rechte Polsterung sind auf 33 Pixel eingestellt. Gehen wir also voran und wählen Sie diese Schaltfläche und dann werden wir hier in diesem Abstandsabschnitt die Polsterung ändern, nicht den Rand. Denken Sie daran, Polsterung ist der Raum in unseren Elementen und Rand ist der Raum außerhalb unserer Elemente. Hier werde ich die obere und untere Polsterung auf 15 Pixel ändern, ich werde die Wahltaste oder Alt-Taste auf meiner Tastatur gedrückt halten und die rechte und linke Polsterung auf etwa 30 Pixel ändern. Es sieht gut aus, es sieht gut aus. Aber was ist mit der Farbe dieses Hintergrunds? Wenn ich diese navbar auswähle, können Sie sehen, dass wir diese hellgraue Hintergrundfarbe haben, die nicht das ist, was wir wollen, weil wir hier einen transparenten Hintergrund haben, während diese navbar ausgewählt ist, werde ich ihm eine Klasse und ich werde navbar einfach so schreiben. Schließlich, wenn ich hier zur Hintergrundfarbe gehe, werde ich transparent schreiben. Da gehen wir. Der Hintergrund ist weg, aber was ist mit dem oberen Rand? Hier, wie Sie sehen können, haben wir einige obere Marge. Wenn ich meinen Container auswähle und die Wahltaste oder die Alt-Taste auf meiner Tastatur gedrückt halte, sehe ich hier den oberen Rand, es heißt 70 Pixel. Lassen Sie uns voran und fügen Sie einige Ränder hinzu. Um dies zu tun, werde ich meinen Container auswählen, weil unser Container hier einen 70 Pixel oberen Rand hat. Wenn ich dann zum Abstandsabschnitt gehe, kann ich einfach einen oberen Rand wie diesen hinzufügen. Ich kann es auf 70 Pixel setzen, genau so. Das ist alles, unsere Navigationsleiste ist fertig. Wir werden nicht über Reaktionsfähigkeit sprechen, jetzt werden wir später darüber sprechen. Alles klar Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 44. Hero: Hey, in diesem Video werden wir anfangen, gemeinsam unseren Heldenbereich zu erstellen. Wie Sie in diesem Figma-Projekt sehen können, hat unser Heldenbereich einen Container, genau wie alle anderen Abschnitte haben wir immer einen Abschnitt und im Inneren werden wir einen Container haben. Dies ist die beste Struktur, die Sie für Ihre Projekte haben können. Ein Abschnitt, und dann ein Container im Inneren, und dann können Sie Ihren Inhalt haben. In diesem Container haben wir zwei andere Frames hier, diese werden unsere Div-Blöcke sein, wie Sie sehen können, sehen sie wie Boxen aus. Hier, in diesem Container werden wir zwei Boxen haben, zwei Div-Blöcke. Einer wird unseren Inhalt enthalten, der linke, und der zweite wird unsere Bilder enthalten. Innerhalb des Inhalts werden wir eine Überschrift haben, wir werden einen Textblock haben, der unsere Beschreibung ist, und dann zwei verschiedene Schaltflächen. Eine primäre Schaltfläche, genau wie die, die wir für unsere navbar erstellt haben, und dann ist dies eine Textschaltfläche, und schließlich für diesen richtigen Container oder sagen wir Bild DIV-Block, wir werden zwei verschiedene Karten haben, Karten 1, Karte 2 und schließlich das Heldenbild, das dieses Hauptbild ist. Sie fragen sich vielleicht, warum können wir diese drei verschiedenen Elemente nicht als ein Bild exportieren? Das ist eine tolle Frage. Wir könnten das tun, es wäre viel einfacher, wenn ich das tun würde. Wenn wir jedoch mit Animationen und Interaktionen arbeiten, werden wir alle diese Elemente einzeln animieren. Wenn ich sie als ein einzelnes Bild exportiere, wäre es unmöglich. Deshalb habe ich diese Elemente separat exportiert, dass wir mehr Flexibilität haben könnten, wenn es um Interaktionen und Animationen geht. Gehen wir zu unserem Webfluss-Projekt, und das erste, was wir erstellen müssen, ist ein Abschnitt. Ich gehe zum Add-Abschnitt und lasse mich einen Abschnitt hierher ziehen und ablegen und ihn direkt unter meiner Navigationsleiste platzieren. Ich werde ihm eine Klasse namens Abschnitt geben, und das ist die Klasse, die wir für alle unsere Abschnitte verwenden werden. Daher ist es sehr wichtig, die Eigenschaften anzugeben , die global für alle unsere Abschnitte verwendet werden sollen. Wir werden die Größeneigenschaften hier nicht ändern, aber ich werde die Polsterung dieses Abschnitts ändern, die linke und rechte Polsterung. Warum? Weil alle unsere Abschnitte einige linke und rechte Polsterung haben werden. Wenn ich die Alt-Taste oder Wahltaste auf meiner Tastatur gedrückt halte und einfach klicke und ziehe, kann ich eine 30 Pixel linke und rechte Polsterung hinzufügen. Wir können hier nichts sehen, aber wenn wir zu anderen Haltepunkten gehen, wird diese Polsterung, die wir hier hinzugefügt haben, verhindern, dass der Inhalt außerhalb des Ansichtsfensters geht. Diese Polsterung ist so wichtig. Wenn wir über Reaktionsfähigkeit sprechen, werden wir die Auswirkungen der Polsterung sehen, die ich hier hinzugefügt habe. Eine weitere Sache, die ich hier erwähnen werde, ist, dass ich gerade mit einem großen Bildschirm arbeite. Deshalb heißt es hier 1600 Pixel und es sagt 100 Prozent. Wenn Sie mit einem kleineren Gerät arbeiten, wie einem 13-Zoll-Laptop oder sogar größeren Laptops , werden Sie wahrscheinlich nicht die genaue Leinwand sehen, wie ich hier sehe, aufgrund der verfügbaren Pixel Ihrer Bildschirmgröße. Aber ich werde Ihnen einen sehr guten Trick zeigen. Wenn Sie arbeiten, sagen wir mit einem kleinen Gerät wie einem 13-Zoll-Laptop, können Sie einfach hier klicken und dann können Sie Ihr Projekt nach unten skalieren , um zu sehen, was ich hier sehe. Es ist nur für die Vorschau-Zwecke, so dass es nicht Ihr Hauptprojekt und die Größe Ihrer Elemente beeinflusst. Wenn Sie jedoch sehen möchten, wie Ihr Projekt auf größeren Geräten aussieht, können Sie es nach unten skalieren. Beispielsweise können Sie die Skalierung auf 70 Prozent einstellen. Was müssen wir sonst noch tun? Nun, zuerst werde ich voran gehen und eine Combo-Klasse zu diesem Abschnitt hinzufügen , weil es unser Heldenbereich sein wird. Ich werde Held schreiben, da gehen wir, und dann innerhalb dieses Abschnitts werde ich einen Container brauchen. Wenn ich einfach voran gehe und ein Div schwarz hierher ziehe und es in diesen Abschnitt lege, stelle sicher, dass es innen verschachtelt ist, kann ich ihm einen Klassencontainer geben, und da gehen wir. Wir haben unsere maximale Breite von 1100 Pixel, die wir für den Container festgelegt haben, den wir für unsere navbar verwendet haben. Eine wichtige Sache, die ich hier erwähnen werde , ist , dass, wenn Sie die Elemente viel schneller hinzufügen möchten, Sie einfach die Befehlstaste oder die Steuerungstaste K Tastenkombinationen auf Ihrer Tastatur verwenden können, und hier können Sie suchen Sie nach jedem Element, das Sie wollen. Nehmen wir an, ich werde nach einem Div-Block suchen. Ich kann Div schreiben, und da gehen wir. Wenn ich „Enter“ drücke, wird dieser Div-Block in diesem Container hinzugefügt. Lassen Sie mich das entfernen. Ich werde diesen Container auch entfernen, und ich werde Ihnen noch einmal zeigen, wie es funktioniert. Zuerst werde ich meinen Abschnitt auswählen, weil ich im Inneren einen Container hinzufügen werde. Dann werde ich „Command K“ oder „Control K“ drücken, und hier schreiben wir Div-Block „Enter“. Dieser Div-Block wurde meinem Abschnitt hinzugefügt, und dann werde ich ihm einen Klassencontainer geben, und wir sind fertig. Unser Container ist fertig, unser Abschnitt ist fertig, aber wir haben nicht genügend Abstand zwischen unserer Navigationsleiste und dem Abschnitt. Gehen wir zu unserer Designdatei. Wenn ich diesen Heldenbereich auswähle und die Wahltaste oder die Alt-Taste auf meiner Tastatur gedrückt halte, können Sie sehen, dass wir 100 Pixel oberen Rand für diesen Heldenbereich gesetzt haben. Ich werde diesen Abschnitt auswählen, und da wir diese Hero-Combo-Klasse hinzugefügt haben, wenn ich etwas Marge dazu hinzufüge, wird es sich nicht auf die Eigenschaften unseres Abschnitts auswirken, es wirkt sich nur auf die Eigenschaften dieser Helden Combo -Klasse. Ich werde den oberen Rand auf 100 Pixel setzen, und da gehen wir, es wurde nach unten geschoben. Was brauchen wir in diesem Behälter? Nun, dieser Container sollte zwei Div-Blöcke haben. Also lassen Sie uns voran und fügen Sie zwei Div-Blöcke hinzu. Ich werde „Befehl K“ drücken, um die QuickFind zu verwenden, und ich werde Div schreiben, da gehen wir. Es gibt einen Div-Block im Inneren und ich brauche einen weiteren Div-Block, also werde ich diesen Container erneut auswählen und „Command K“ oder „Control K“ drücken und Div schreiben. Jetzt habe ich zwei verschiedene Div-Blöcke in diesem Container. Wie Sie jedoch sehen können, nimmt jeder dieser Div-Blöcke die gesamte Breite seines Elternteils ein, der dieser Container ist, und es ist nicht das, was wir wollen. Ich werde den Container auswählen und dann werde ich seine Anzeigeeinstellung auf Flexbox ändern. Warum? Werfen wir einen Blick auf unsere Designdatei. Hier, wie Sie in diesem Container sehen können, haben wir zwei Div-Blöcke, wir haben sie erstellt, aber sie sitzen nebeneinander, nicht übereinander. Wenn Sie sich erinnern, wenn wir ein eindimensionales Layout haben, können wir die Flexbox verwenden, um unsere Div-Blöcke einfach auszurichten. Das werde ich tun. Ich muss das übergeordnete Element auswählen, und ich werde seine Anzeigeeinstellung von Block zu Flexbox ändern. Jetzt haben wir eine horizontale Richtung, gut, dann ist die Ausrichtung auf Strecken eingestellt, und ich werde die Ausrichtung in Mitte ändern, aber sie sehen zu klein aus. Das ist völlig in Ordnung, weil wir ihnen einige Klassen geben werden. Aber mal sehen, was wir hier getan haben. Wir haben den Container ausgewählt und seine Anzeigeeinstellung in Flexbox geändert. Allerdings gibt es hier einen Fehler. Wir haben dieser Hauptklasse keine Combo-Klasse hinzugefügt, und das ist falsch. Warum? Wenn Sie später denselben Container verwenden möchten und wir keine Flexbox mit diesen Eigenschaften verwenden möchten, müssen wir diese Eigenschaften mithilfe einer Kombinationsklasse außer Kraft setzen. Ich habe diesen Fehler absichtlich gemacht, um Ihnen zu zeigen, warum es wichtig ist, Combo-Klassen zu verwenden. Jetzt werde ich die Operation Command Z oder Control Z wieder und wieder rückgängig machen, und hier haben wir unseren Container, und jetzt, bevor ich seine Anzeigeeinstellung auf Flexbox ändere, werde ich ihm eine Combo-Klasse geben. Ich werde Held schreiben. Dann werde ich seine Anzeigeeinstellung auf Flex-Spikes ändern und ich werde seine Ausrichtung in Mitte ändern. Jetzt sieht alles gut aus. Ich werde den ersten div-Block auswählen und ihm eine Klasse geben. Ich werde Hero__Content schreiben, weil dieser div-Block unseren Inhalt enthalten wird. Für die zweite werde ich es auswählen und geben wir ihm eine neue Klasse. Ich werde Hero__Image schreiben. Genau wie das, was wir in unserem Figma-Projekt haben, haben wir Inhalt und Bild. Fangen wir mit Inhalten an. Was brauchen wir hier? Wir brauchen einen Titel, eine Überschrift. Dann haben wir eine Beschreibung direkt darunter und zwei Schaltflächen; einen Container-Button und einen Text-Button. Ich werde mit der Überschrift beginnen. Lassen Sie mich voran und ziehen Sie eine Überschrift hierher, einfach so, stellen Sie sicher, dass sie innen verschachtelt ist. Für diese Überschrift werde ich H_1 wählen. Es ist sehr wichtig. Für den Heldenbereich müssen Sie immer das H_1 verwenden. Es ist wichtig, wenn es um SEO-Optimierung geht, wir werden später über diese Details sprechen. Aber im Moment müssen Sie nur wissen, dass Sie für Ihren Heldenbereich immer H_1 verwenden sollten, nicht H_2, oder andere Überschriften. Cool. Nun, für diese Überschrift, werde ich ihm eine Klasse geben. Das ist richtig Hero__ Überschrift. Wir müssen seine Eigenschaften ändern, wie die Topografieeigenschaften, die Farbe, die Schriftgröße usw. Haben Sie bemerkt, dass wir für jede Textebene den gleichen Prozess wiederholen? Wir ändern die Schriftart in Roboto. Können wir diesen Schritt irgendwie weglassen? Ja, das können wir. Erinnern Sie sich, als ich über Körper alle Seiten Tag sprach? Wir stellen dort die Hintergrundfarbe ein. Wir können auch die Standard-Topografieeigenschaften dort festlegen, und dann können wir sie überschreiben, wenn wir etwas ändern müssen. Da ich weiß, dass ich für dieses Projekt nur eine Schriftart verwenden werde, Roboto, kann ich einfach voran gehen und mein Körperelement hier auswählen und dann gehe ich zum Selektor und ich werde Körper alle Seiten auswählen. Wenn ich zur Topographie gehe, kann man sehen, dass die Schriftart auf Arial gesetzt ist. Lass mich weitermachen und es in Roboto umwandeln. Sobald ich es hier ändere, können Sie sehen, dass die Schriftart dieser Überschrift ebenfalls geändert wurde. Warum? Da Überschriften, Absätze und Textfeld standardmäßig suchen nach den Eltern und ihren Eltern jetzt ist der Körper. Sie erben die Eigenschaften, die wir für den Körper gesetzt haben , alle Seiten Tag, es sei denn, wir überschreiben sie. Wir werden die Schriftgröße nicht ändern, da die meisten der Zeit müssen wir die Schriftgröße überschreiben. Außerdem werde ich seine Farbe in unsere ändern, sagen wir neutrale Dunkelheit, denn für den Großteil unseres Textes müssen wir unsere neutrale dunkle Farbe verwenden. Es ist gut, den Typografiestandard auch hier festzulegen. Jetzt kann ich zu meinem Hero-Content-Div-Block gehen und ich muss die Schriftarten nicht mehr ändern, ich kann sie überschreiben, wann immer ich will. Aber wenn ich hier auf diese Schriftart klicke, können Sie sehen, dass der Wert aus dem Körper aller Seiten kommt, weil wir dort einige Standardeigenschaften gesetzt haben. Mal sehen, welche Schriftgröße wir hier brauchen. Ich gehe zu meinem Figma-Projekt, ich werde diesen Text auswählen. Es sagt H_1 und hier ist H_1 60 Punkte. Ich werde es hier auf 60 Pixel setzen, genau so. Was ist mit der Strichhöhe? Normalerweise setze ich es auf 130 oder 150 Prozent. Für diese Überschrift, da wir eine große Schriftgröße haben, werde ich es auf 130% setzen, genau so. Dann gehe ich weiter und kopiere diesen Text aus meinem Design. Wenn Sie einfach auf diese Ebenen doppelklicken, können Sie sie auswählen und kopieren, fügen Sie sie hier ein. Da gehen wir. Aber wie Sie sehen können, nimmt dieser Held Content Div Blog hier zu viel Platz. Wenn ich zu meiner Entwurfsdatei gehe und diese Content-Gruppe auswähle, sehen Sie, dass die Breite auf 530 Pixel eingestellt ist. Daher werde ich voran gehen und diesen Helden Inhalt div Block auswählen, und ich werde ihm eine maximale Breite geben. Es sollte nicht größer als 530 Pixel sein. Ich werde es auf 530 Pixel setzen und da gehen wir. Was brauchen wir noch? Direkt unter dieser Überschrift benötigen wir eine Beschreibung, wie Sie sehen können. Ich kann einen Absatz oder einen Textblock per Drag & Drop ablegen. Ich werde mit einem Textblock gehen. Ich werde es hierher ziehen und ablegen. Dieser Textblock, wie Sie sehen können, verwendet die Standard-Roboto-Schriftart, die wir für unseren Körper alle Seiten Tag festgelegt. Es wird unseren Designprozess beschleunigen. Was ist mit der Größe? Ich werde seine Größe auf 20 Pixel ändern. Wenn ich hier zu meiner Designdatei gehe, können Sie sehen, dass es Körper normal verwendet und Körper regulär 20 Pixel hat. Ich werde es auf 20 setzen. Lassen Sie mich voran gehen und kopieren und fügen Sie diesen Text hier ein. Cool. Aber wie Sie sehen können, reicht die Zeilenhöhe nicht aus. Ich werde Ihre Höhe auf 150 Prozent ändern da die Schriftgröße nicht so groß ist und zu lang ist. Wenn ich hier zu meinem Designprojekt gehe und diesen Text auswähle, können Sie sehen, dass es eine Breite auf 435 Pixel gesetzt ist. Ich muss dasselbe auch für diesen Textblock tun. Ich werde eine maximale Breite von 400 und 35 Pixel einstellen, und jetzt sieht es gut aus. Schließlich werde ich seine Farbe ändern. Für diesen Text habe ich neutrales Medium verwendet. Ich werde das Gleiche hier benutzen. Ich werde eines der Farbfelder hier benutzen, neutrales Medium. Da gehen wir. Cool. Was brauchen wir noch? Wir brauchen zwei Knöpfe. Um diese beiden Schaltflächen zu organisieren, müssen wir einen div-Block erstellen und innerhalb dieses div-Blocks können wir unsere Schaltflächen setzen. Lassen Sie mich voran und wählen Sie diesen Helden Inhalt div Block, und ich werde einen neuen div Block Befehl K oder Control K erstellen und lassen Sie mich div schreiben. Da gehen wir. Hier ist unser div Block und ich werde es hero__buttons nennen. Cool. In diesem werde ich voran gehen und zwei Tasten hinzufügen. Eine enthaltene Schaltfläche oder diese primäre Schaltfläche und eine Textschaltfläche. Lassen Sie mich diese primäre Schaltfläche in der Navigationsleiste auswählen. Ich werde Befehl C oder Control C drücken und ich werde diese Helden Tasten div Block auswählen und ich werde Befehl V oder Control V drücken, um es hier einzufügen. Da gehen wir. Wir haben unsere Kontakt-Us-Schaltfläche hier und es steht primäre Taste. Cool. Ich werde diesen Text ändern, um in Kontakt zu treten. Lassen Sie mich schreiben, melden Sie sich an. Auch werde ich eine Textschaltfläche benötigen. Lassen Sie mich voran und suchen Sie nach Textlink. Ich werde es hier in den Hero Buttons div Block ziehen und ablegen, genau so. Da es sich um einen Textlink handelt, können Sie standardmäßig sehen, dass es etwas Styling und Dekoration hat. Wir werden sie außer Kraft setzen und ich werde ihm eine Klasse geben. Lassen Sie uns Held Unterstrich, Unterstrich, Text-Taste schreiben. Da gehen wir. Lassen Sie mich hier nach unten scrollen. Die Schrift sieht gut aus. Das Gewicht wird 500 oder mittel sein. Die Schriftgröße wird 17 Pixel betragen. Wenn ich hier zu meiner Designdatei gehe, verwendet es das Überschriftenmedium und das Überschriftenmedium hat eine 17-Punkt-Schriftgröße. Was ist mit der Farbe? Die Farbe wird neutral, mittel, und eine Dekoration wird standardmäßig unterstrichen. Ich werde es auf keine setzen. Lassen Sie mich abschließend diesen Text ändern, um unsere Arbeit zu sehen. Jetzt habe ich zwei Möglichkeiten. Ich kann entweder diesen Hero Buttons div Block auswählen und die Anzeigeeinstellung auf Flexbox ändern und einfach ausrichten und diesem Knopf etwas Rand hinzufügen, oder ich kann einfach die Blockanzeigeeinstellung beibehalten und nur einige rechte Ränder hinzufügen in der Touch-Taste. Da diese beiden Tasten nebeneinander platziert werden, brauche ich keine Flexbox. Ich kann einfach diese Schaltfläche auswählen und einige Ränder hinzufügen. Die linke Seite ist fast fertig. Das einzige, was noch übrig ist, fügen Sie einige Abstände hinzu. Ich werde diese Überschrift hier auswählen. Ich werde die „Option“ -Taste oder „Alt“ -Taste gedrückt halten. Wenn ich den Mauszeiger über diese Beschreibung führe, können Sie sehen, dass ich einen unteren Rand von 30 Pixeln habe. Wenn ich diese Beschreibung hier auswähle, wie Sie sehen können, habe ich einen 40-Pixel-unteren Rand, und für diese Schaltfläche habe ich einen 40-Pixel-rechten Rand. Gehen wir weiter und ändern ihre Margen. Ich werde diese Überschrift auswählen. Wenn ich darauf klicke, können Sie sehen, dass der Wert aus allen H_1-Überschriften stammt. Wir haben nicht über dieses Tag gesprochen, aber es funktioniert wie der Körper alle Seiten Tag. Ich werde den oberen Rand entfernen. Ich werde es auf Null setzen, und ich werde den unteren Rand auf 30 Pixel ändern. Lassen Sie mich nun diese Beschreibung auswählen. Wir haben den Klassennamen nicht geändert, also werde ich den Klassennamen hier in Heldenbeschreibung ändern. Hero Unterstrich, Unterstrich Beschreibung. Jetzt kann ich eine 40-Pixel-Bodenauffüllung hinzufügen, einfach so. Hier werde ich diese Schaltfläche auswählen, aber ich kann seinen Rand jetzt nicht ändern. Warum? Weil ich gerade die primäre Button-Klasse verwende. Wenn ich hier etwas Marge hinzufüge, wirkt sich dies auch auf die Schaltfläche „Kontaktieren Sie uns“ in der Navigationsleiste aus. Lassen Sie mich es Ihnen zeigen. Wenn ich nur einige rechte Ränder hinzufüge. Da gehen wir. Kannst du das sehen? Es ist nicht das, was wir wollen. Was soll ich tun? Ja, du hast recht. Ich brauche eine Kombiklasse. Hier werde ich eine Combo-Klasse hinzufügen, und ich werde Held schreiben. Jetzt kann ich einen 40-Pixel-rechten Rand hinzufügen, ohne die Schaltfläche „Kontaktieren Sie uns“ zu beeinflussen. Jetzt ist es Zeit, an dem zweiten div-Block zu arbeiten, der der Hero-Bild-Div-Block ist. Wie Sie hier sehen können, benötigen wir drei verschiedene Bilder. Lassen Sie mich dieses Heldenbild auswählen und dann werde ich hier drei verschiedene Bilder hinzufügen. Lassen Sie mich Befehl K drücken und ich werde nach Bild suchen, Enter. Ich werde das Bild wählen und von hier aus werde ich nach Heldenbild suchen. Da gehen wir. Sieht gut aus. Jetzt brauche ich noch zwei Bilder für meine Karten. Lassen Sie mich diesen Helden Bild div Block auswählen. Ich werde Befehl K oder Control K drücken . Lassen Sie mich Bild schreiben. Toll, es ist hier. Ich werde Karte 1 wählen. Lassen Sie mich nach Karte 1 suchen. Da gehen wir. Es ist genau hier. Es ist zu groß. Wir werden das reparieren, und ich brauche auch noch eine Karte. Lassen Sie mich dieses Bild auswählen und ich werde es eine Klasse geben. Lasst uns Heldenunterstrich schreiben, Unterstrich Karte 1. Ich kann es einfach so skalieren oder alternativ kann ich hier auf diese „Einstellungen“ klicken und ich werde seine Breite auf 380 oder 375 Pixel einstellen . Sieht gut aus. Aber warum diese Box zu groß aussieht, aber das Element ist nicht so groß? Es liegt daran, dass ich einige Schlagschatten für diese Karte verwendet habe und diese exportiert habe. Deshalb haben wir diese große Grenze. Jetzt werde ich diesen Helden Bild div Block auswählen, noch einmal, drücken Sie Befehl K oder Control K und suchen Sie nach Bild. Da gehen wir. Ich wähle Karte 2 aus meinem Vermögen aus. Hier ist es. Ich gebe ihm eine andere Klasse. Lasst uns Heldenunterstrich schreiben, Unterstrich Karte 2. Jetzt werde ich es einfach so skalieren. Geben wir ihm eine bestimmte Breite von 375 Pixeln. Erstaunlich. Aber können Sie sehen, wie sie übereinander platziert werden? Es ist nicht das, was wir wollen. Wie können wir das beheben? Nun, erinnerst du dich, als wir über verschiedene Positionierungsoptionen wie statisch, relativ, absolut, fest und klebrig sprachen verschiedene Positionierungsoptionen wie statisch, relativ , habe ich dir gesagt, dass wir sie brauchen, wenn wir ein paar moderne Layouts erstellen wollen. Das ist genau das, was wir tun werden. Wir werden die Positionsoption ändern, um zu bekommen, was wir wollen. Hier, wie Sie sehen können, sind diese beiden Karten schweben. Deshalb werde ich ihre Position auf absolut setzen. Aber wie Sie sich erinnern, um die Position auf absolut zu setzen, zuerst müssen wir,um die Position auf absolut zu setzen, zuerstseine übergeordnete Position auf relativ setzen. Das Elternteil ist dieser Held Bild div Block und ich werde seine Position zu relativ ändern. Nichts passiert. Aber wenn ich diesen Helden Karte 1 wähle und ich ändere seine Position zu absolut. Da gehen wir. Jetzt ist es relativ zum Hero-Bild-Div-Block. Ich werde dasselbe für diese Karte tun. Ich werde seine Position auf absolut ändern. Schön. Jetzt kann ich einfach ihre Position hier kontrollieren. Fangen wir mit Karte 1 an. Ich wähle Karte 1 aus, und sie sollte hier platziert werden. Ich werde oben links auswählen und dann werde ich den linken Rand einfach so ändern. Ich kann es auf minus 19 Prozent setzen, und für die Spitze werde ich es auf, sagen wir, minus 2 Prozent setzen . Sieht toll aus. Was ist mit dem hier? Ich werde Helden Karte 2 auswählen. Ich werde seine Position nach unten rechts ändern und dann lassen Sie mich es einfach so nach unten bewegen. Setzen wir die untere Position auf minus 22 Prozent und ich kann hier den rechten oder linken Rand ändern. Es spielt keine Rolle. Lassen Sie mich es Ihnen zeigen. Es ist genau so. Wenn ich den richtigen verwende, brauche ich negative Werte. Wenn ich den linken benutze, brauche ich positive Werte wie diese. Ich ziehe es vor, den richtigen zu verwenden. Ich werde es gleich hier machen. Sieht gut aus. Vergleichen wir es mit unserem Design. Sieht gut aus. Dieser Content-Div-Block ist jedoch nicht mit diesem rechten Div-Block, diesem Image Div-Block, ausgerichtet . Wie kann ich das beheben? Nun, ich kann diesen Heldeninhalt auswählen und ihm einige Top-Ränder geben. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Genau so. Wenn ich es so nach unten schiebe, kann ich seinen oberen Rand auf 114 Pixel setzen. Sieht gut aus. Ich denke, jetzt sind sie perfekt ausgerichtet. Alles klar Leute, das ist alles für dieses Video, ich hoffe, es hat euch gefallen. Wenn Sie Fragen haben, lassen Sie es mich wissen. Wir sehen uns im nächsten. 45. Kundenabschnitt: Hey, in diesem Video werden wir anfangen, diesen Kundenbereich zu erstellen. Wie Sie im Kundenbereich sehen können, werden wir verschiedene Logos haben. Eigentlich müssen wir fünf verschiedene Logos platzieren. Standardmäßig sollten diese Logos schwarz-weiß sein, und wenn der Benutzer über sie schwebt, sollten sie bunt werden. Was brauchen wir für diesen Abschnitt? Wie Sie hier sehen können, brauchen wir einen anderen Abschnitt, und im Inneren müssen wir einen Container haben, der unsere Logos enthält. Jedes Logo sollte in einem div-Block platziert werden. Lasst uns anfangen. Zuallererst werde ich voran gehen und einen neuen Abschnitt erstellen. Ich werde Körper auswählen und ich werde Befehl K oder Control K drücken und nach Abschnitt suchen. Da gehen wir. Ein neuer Abschnitt wurde hinzugefügt. Dann müssen wir wie üblich die Abschnittsklasse zu diesem Abschnitt hinzufügen. Lassen Sie mich nach Abschnitt suchen. Großartig, unsere Sektion ist fertig. Jetzt innerhalb dieses Abschnitts brauchen wir einen Container. Während dieser Abschnitt ausgewählt ist, werde ich Befehl K oder Control K drücken, und ich werde nach div Block suchen. Da gehen wir und ich werde ihm die Container-Klasse geben, fantastisch. Unser Container ist fertig, unser Bereich ist auch fertig. Aber dieser Abschnitt hat noch keine Marge, also werde ich voran gehen und überprüfen, ob es hier Marge ist. Es muss 130 Pixel oberen Rand haben. Daher werde ich hier für diesen Abschnitt eine Combo-Klasse namens Logos hinzufügen. Für unseren Heldenbereich haben wir die Heldenkomboklasse hinzugefügt. Für diesen Abschnitt werde ich Logos hinzufügen, und dann werde ich 130 Pixel oberen Rand hinzufügen. Da gehen wir. Jetzt haben wir genug Platz, mit dem wir arbeiten können. In diesem Container müssen wir verschiedene div-Blöcke haben. Eigentlich müssen wir fünf verschiedene Div-Blöcke haben. Wie sollten wir diese div-Blöcke ausrichten? Nun, wir haben zwei Möglichkeiten zur Auswahl. Option 1, können wir diesen Container in eine Flexbox verwandeln. Option 2, wir können es in ein Gitter verwandeln. Nun, eine Flexbox ist eine gute Option, aber ich werde mit Raster gehen, obwohl es ein eindimensionales Layout ist. Warum werde ich Gitter wählen? Denn später, wenn es um Reaktionsfähigkeit geht, wenn wir unsere Webseite reaktionsschnell machen wollen, wäre es viel einfacher, mit Grid zu arbeiten. Das werde ich Ihnen in unseren zukünftigen Lektionen beweisen. Aber für den Moment werde ich diesen Container auswählen und ich werde einen neuen div-Block hinzufügen. Ich werde diesen Container nicht in ein Raster verwandeln, ich werde einen neuen div-Block hinzufügen, genau so, und lassen Sie uns ihm eine Klasse geben. Ich werde Grid__Logos schreiben. Ich werde diesen Div-Block einfach so in ein Raster verwandeln. Wie viele Zeilen und wie viele Spalten benötigen wir? Nun, im Grunde brauchen wir nur eine Zeile und fünf verschiedene Spalten, wie Sie hier sehen können. Ich werde die zweite Zeile hier entfernen, und ich werde drei weitere Spalten hinzufügen, um insgesamt fünf Spalten zu erhalten. Cool, unser Gitter ist fertig. Jetzt ist es an der Zeit, unsere Logos hier hinzuzufügen. Wie ich bereits erwähnt habe, sollte jedes Logo in einen div-Block gelegt werden. Ich werde dieses Raster auswählen und ich werde Befehl K oder Control K auf meiner Tastatur drücken, und dann fügen wir hier einen div-Block hinzu. Jetzt nimmt unser div-Block die erste Zelle hier ein, und das ist genau das, was wir wollen. Ich werde es Client__Logo nennen. Cool. Schließlich werde ich in diesem div-Block ein Bild hinzufügen. Lassen Sie uns den Befehl K oder Control K sehen, und ich werde nach Bild suchen. Da gehen wir, und lassen Sie uns die Logos hier wählen. Standardmäßig sind die Logos bunt. Das ist völlig in Ordnung, denn später werden wir sie schwarz-weiß machen und sie interaktiv machen. Aber vorerst werde ich hier das Airbnb-Logo auswählen. Cool. Dann werde ich diesen div-Block auswählen und ich werde ihm eine bestimmte Breite und Höhe geben. Wenn ich hier dieses erste Logo wähle, wenn ich dieses Feld hier anwähle, können Sie sehen, dass die Breite 150 Pixel und die Höhe 96 ist. Lassen Sie uns seine Breite auf 150 Pixel und seine Höhe auf 96 setzen. Dann werde ich diesen Div-Block in eine Flexbox verwandeln. Ich werde es an der Mitte ausrichten und ich werde es auch zum Zentrum rechtfertigen. Das ist genau das, wonach wir gesucht haben. Was müssen wir sonst noch tun? Unser erstes Logo ist fertig. Ich werde diesen div-Block kopieren, Befehl C oder Control C drücken und dann vier Mal Befehl V oder Control V drücken, um fünf verschiedene Logos zu erhalten. Dann gehe ich voran und modifiziere das Bild jedes Logos hier. Ich werde dieses auswählen, ich werde es in Google ändern. Ich gehe voran und wähle dieses aus, ich werde es in Microsoft ändern. Ich wähle den nächsten aus und lasse ihn in FedEx ändern. Schließlich wähle ich dieses letzte Bild aus und ändere es in Amazon. Fantastisch. Leute, das ist alles für dieses Video, ich hoffe, es hat euch gefallen. Wir sehen uns im nächsten Video. 46. Projektabschnitt: In diesem Video erstellen wir gemeinsam einen aktuellen Projektabschnitt. Wie Sie sehen können, enthält dieser Abschnitt einen Container diese Überschrift und auch diesen unteren Abschnitt, den Projektabschnitt, enthält. Dieser Projektabschnitt, oder sagen wir, Projects_Wrapper hat drei verschiedene Projekte, und jedes Projekt hat verschiedene Elemente, wie ein Bild an der Spitze, einen Titel, einen Untertitel, und schließlich, dies erfahren Sie mehr Link, Ich werde wie gewohnt vorgehen, erstellen Sie zuerst einen Abschnitt. Lassen Sie mich meinen Körper auswählen und drücken Sie „Command“ -Taste oder „Control“ und suchen Sie nach Abschnitt. Da gehen wir. Unsere Rubrik wurde hinzugefügt. Dann gebe ich ihm die Sektionsklasse. Ich werde einen Abschnitt schreiben. Schließlich werde ich ihm eine Combo-Klasse geben, die als Projekte bezeichnet wird. Wie Sie sehen können, da es nichts in diesem Abschnitt gibt, nimmt es hier keinen Platz ein und es ist verständlich. Nun, während dieser Abschnitt ausgewählt ist, werde ich „Command“ -Taste oder „Control“ -Taste drücken, und ich werde nach einem div-Block suchen. Jetzt ist ein div-Block in diesem Abschnitt und ich werde ihm die Container-Klasse geben. Da gehen wir. Jetzt ist auch unser Container fertig. Schließlich werde ich diesem Abschnitt einige Top-Ränder geben. Lassen Sie mich hier einen Blick auf mein Design werfen. Wenn ich diesen Projektbereich auswähle und die „Wahltaste“ oder „Alt“ -Taste auf meiner Tastatur gedrückt halte, sehen Sie, dass er einen oberen Rand von 200 Pixeln hat. Ich werde voran gehen und ihm auch hier einen 200 Pixel oberen Rand geben. Da gehen wir. Nun, was brauchen wir? In diesem Container brauchen wir eine Überschrift und dann brauchen wir den Wrapper dieses Projekts. Lassen Sie mich zuerst nach einer Überschrift suchen. Ich werde „Command“ -Taste oder „Control“ -Taste drücken, und ich werde Überschrift schreiben. Stellen Sie sicher, dass Sie Ihren Container auswählen, warum Sie nach Ihren Elementen suchen. Da diese Elemente innerhalb des aktuell ausgewählten Elements verschachtelt werden. Ich werde auf diese Überschrift klicken. Da gehen wir. Nun, diese Überschrift ist in meinem Container. Schließlich werde ich H1 in H3 ändern. Das ist nicht richtig, weil es im Grunde H2 sein sollte und ich werde es später erklären. Aber ich werde diesen Fehler absichtlich machen denn später, wenn wir über Barrierefreiheit sprechen werden, werde ich Ihnen zeigen, warum es wichtig ist, die richtige Rubrik zu wählen. Aber jetzt lassen Sie es H3 behalten, und ich werde ihm eine Klasse geben. Ich werde Projekte schreiben__Überschrift. Dann werde ich einige seiner Topografie-Eigenschaften ändern. Ich werde seine Schriftgröße von 24 Pixel auf 40 ändern. Lassen Sie mich abschließend diesen Text kopieren und ihn dort einfügen. Jüngste Projekte, unsere Überschrift ist fertig. Was brauchen wir jetzt noch, direkt unter dieser Überschrift, werden wir den Projects_Wrapper haben. Ich werde diesen Container auswählen und ich werde „Befehlstaste oder „Control“ -Taste drücken und nach einem div-Block suchen. Ich werde ihm eine Klasse geben, nennen wir es projects__wrapper, und jetzt sind diese beiden Elemente in diesem Container platziert. Dieser Container verfügt jedoch über eine Blockanzeigeeinstellung. Ich werde es in Flexbox verwandeln, aber bevor Sie das tun, stellen Sie sicher, dass Sie ihm eine Combo-Klasse geben. Es ist so wichtig. Warum? Da Sie, wie bereits erwähnt, keine Kombinationsklasse hinzufügen und die Anzeigeeinstellung oder eine dieser Eigenschaften hier ändern, Sie die Änderungen global vor. Wenn ich es auf Flexbox drehe, können Sie sehen, dass diese Logos durcheinander sind. Wenn ich die Richtung in vertikal ändere, sieht alles durcheinander aus und das ist nicht das, was wir wollen. Hier werde ich den Container auswählen und ich werde ihm eine Combo-Klasse geben. Ich werde Projekte schreiben. Jetzt kann ich die Anzeigeeinstellung auf Flexbox ändern und ich werde die Richtung von horizontal zu vertikal ändern. Lassen Sie uns die Begründung auch zwischen Raum ändern. Gerade jetzt, wenn ich wähle, dass nichts passiert, aber später, wenn wir Inhalte, unseren Projects_Wrapper hinzufügen und auch einige Ränder zu dieser Überschrift hinzufügen, werden wir sehen, dass der Unterschied richtig ist. Ich werde diese Projects_Wrapper auswählen, und ich werde ihm einen oberen Rand geben. Lassen Sie mich 70 Pixel oberen Rand hinzufügen. Wenn ich hier einen Blick auf mein Design nehme, habe ich auch 70 Pixel oberen Rand. Im Inneren werden wir drei verschiedene Karten haben. Daher brauche ich einen Haupt-div-Block. Das ist unsere Hauptkarte und darin werden wir zwei weitere div-Blöcke benötigen, einen für das obere Bild und den zweiten für den unteren Inhalt. Beginnen wir mit dem Hinzufügen des Haupt-div-Blocks. Wireless Projects_Wrapper ist ausgewählt. Ich werde „Command“ -Taste oder „Control“ -Taste drücken, und ich werde nach div Block suchen. Jetzt drin gibt es einen div-Block und ich werde ihm eine Klasse geben. Lassen Sie uns Project_Card schreiben, genau so und diese Project_Card nimmt die ganze Breite und Höhe ihrer Eltern ein, was dieser Projects_Wrapper ist. Es ist nicht das, was wir wollen. Wir wollten eine maximale Breite und auch eine bestimmte Höhe haben. Wenn ich hier zu meiner Designdatei gehe und wenn ich dieses Projekt 1 wähle, können Sie sehen, dass diese Karte eine Breite von 340 Pixeln und eine Höhe von 444 Pixeln hat. Ich werde die maximale Breite auf 340 Pixel und die Höhe auf 444 Pixel einstellen. Genau so ist unsere Project_Card fertig. Wir werden es jetzt nicht duplizieren, denn zuerst werden wir es entwerfen. Später werden wir es duplizieren. Was brauchen wir hier? Darin werden wir zwei verschiedene div-Blöcke benötigen, wie ich bereits erwähnt habe, einen für das Bild und den zweiten für den Inhalt. Während es ausgewählt ist, werde ich „Command“ -Taste oder „Control“ -Taste drücken, und ich werde nach einem div-Block suchen. Unser erster div-Block ist fertig und ich werde ihm eine Klasse geben. Nennen wir es project__image, genau so. Im Inneren müssen wir ein Bildelement hinzufügen. Während dieses Projektabbild, div block ausgewählt ist, werde ich hier nach einer Bildkomponente suchen. Lassen Sie mich nach einem dieser Bilder suchen. Nummer 1, von meinem Vermögen. Ich werde dieses Bild in meiner Entwurfsdatei auswählen und wie Sie sehen können, ist die Höhe auf 240 Pixel eingestellt. Deshalb werde ich voran gehen, und hier werde ich es zuerst eine Klasse geben. Lassen Sie uns project__card_image schreiben, genau so. Schließlich werde ich seine Höhe auf 240 Pixel einstellen. Lassen Sie mich die Füße vom Feld ändern, um auf diese Weise abzudecken, kann ich sicherstellen , dass es den Projekt-Image-Div-Block perfekt abdeckt. Außerdem werde ich ihm eine 100-prozentige Breite geben. Ich werde seine Breite auf 100 Prozent einstellen. Auf diese Weise nimmt es die gesamte Breite des übergeordneten Elements ein, d. h. dieses Projektabbild und auch die Project_Card. Der erste Teil ist fertig. Jetzt, während dieser Project_Card-Div-Block ausgewählt ist , werde ich hier einen weiteren div-Block hinzufügen. Da gehen wir. Ich werde ihm eine Klasse geben und nennen es Project__Content. Zuerst werde ich sicherstellen, dass dieser Projektinhalt-Div-Block die gesamte verfügbare Höhe hier einnimmt. Wie Sie sehen können, haben wir etwas Platz, aber dieser Projektinhalt Div Block deckt nicht all diesen Raum. Deshalb werde ich das auswählen und wenn ich zum Seitenabschnitt gehe, kann ich seine Höhe auf 100 Prozent einstellen, genau so. Aber es gibt ein Problem. Wie Sie jetzt sehen können, ist es außerhalb unserer Projektkarte. Warum? Da diese Projektkarte eine bestimmte Höhe hat und die Anzeigeeinstellung auf Sperren eingestellt ist. Um dieses Problem zu beheben, werde ich diese Projektkarte auswählen und ich werde seine Anzeigeeinstellung von Block zu Flex-Box ändern , und es wird vertikal sein, weil wir zwei verschiedene Kinder haben innen, die vertikal übereinander stapeln sollte. Jetzt sieht alles gut aus. Wir haben den Projektinhalt, wir haben auch das Bild der Projektkarte. Wenn ich zu meiner Design-Datei gehe, können Sie sehen, dass diese Karte einen weißen Hintergrund hat, aber hier haben wir keinen Hintergrund. Lassen Sie mich meine Projektkarte auswählen. Wenn ich dann zur Farbe gehe, schreibe ich hier weiß. Da gehen wir. Jetzt haben wir den weißen Hintergrund. Innerhalb dieses Projektinhalts benötigen wir einen Titel, einen Untertitel und einen Link „Weitere Informationen“. Wie können wir das strukturieren? Lassen Sie mich sehen. Wenn ich diesen Projektinhalt in eine Flex-Box umwandle und innen einen Div-Block und einen Link-Block lege, bekomme ich leicht, was ich hier habe. Wie? Wenn ich diesen Projektinhalt in eine Flex-Box umwandle, kann ich seine Begründung leicht ändern, dann kann ich genau das gleiche Design erreichen. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Im Moment hat dieser Projektinhalt die Blockdarstellungseinstellung und es ist nichts drin. Während es ausgewählt ist, werde ich Befehl K oder Kontrolle K drücken und ich werde hier einen Div-Block hinzufügen, und ich werde ihm eine Klasse geben. Lass uns weitermachen und eine Klasse erstellen. Ich werde project__text schreiben, und in diesem Div-Block werde ich zwei verschiedene Textblöcke haben. Ich werde Befehl K drücken und ich werde nach Textblock suchen. Da gehen wir. Das ist der Erste. Lassen Sie mich ihm einen Kurs geben. Ich werde project__title schreiben, und ich werde seine Topografie-Eigenschaften ändern. Die Schriftart wird Roboto sein, das Gewicht wird 500 oder mittel sein. Die Größe wird 24 Pixel betragen, genau so wird die Zeilenhöhe 150 Prozent betragen und die Farbe sieht gut aus. Jetzt gehe ich voran und kopiere und füge diesen Titel ein. Lassen Sie mich das auswählen, kopieren Sie es und fügen Sie es hier ein, vereinfachen Sie es. Dies ist der Name des Projekts. Das sind übrigens fiktive Projekte. Cool. Unser Titel ist fertig. Jetzt werde ich seinen Abstand ändern. Ich gebe ihm ein paar Margen. Ich halte die Wahltaste und die Umschalttaste auf meiner Tastatur und fügen wir allen Seiten einen gleichen Rand hinzu. Ich werde ihm einen 30-Pixel-Marge geben. Vielleicht könnte ich den unteren Rand auf 20 Pixel verringern. Jetzt werde ich diesen Titelbefehl C oder Steuerelement C, Befehl V oder Kontrolle V kopieren . Dann werde ich meine Beschreibung oder Untertitel hier hinzufügen. jedoch sicher, dass Sie zuerst Ihre Klasse duplizieren. Es ist so wichtig, weil wir seine Eigenschaften ändern werden. Andernfalls ändern wir auch den Projekttitel. Klicken Sie zuerst auf diesen kleinen Pfeil, duplizieren Sie diese Klasse und ändern Sie ihren Namen in Projektbeschreibung. Genau wie diese Beschreibung. Das erste, was ich tun werde, ist, den oberen Rand zu entfernen, ich brauche ihn nicht. Ich werde die Wahltaste auf meiner Tastatur oder Alt-Taste gedrückt halten und darauf klicken, dann werde ich hier den unteren Rand auf 10 verringern. Los geht's. Jetzt kann ich die Topografieeigenschaften ändern. Fangen wir mit dem Gewicht an. Es wird normal sein. Die Größe wird 17 Pixel betragen, und die Höhe sieht gut aus. Die Farbe sollte jedoch in eine gegenseitige mittlere Farbe geändert werden. Jetzt kann ich diesen Text einfach kopieren und hier einfügen. Da gehen wir. Jetzt werde ich diesen Projekttext auswählen und ich werde seine Anzeigeeinstellung auf Flex-Box ändern und sicherstellen, dass die Richtung vertikal geändert wird. Es sieht jetzt viel besser aus, und stellen Sie sicher, dass es nach oben gerechtfertigt ist. Jetzt, während der Projektinhalt Div Block ausgewählt ist. Ich werde auf meiner Tastatur auf Befehl K Tasten-Steuerung K drücken, und lassen Sie mich nach einem Textlink suchen. Wir erstellen einen Textlink wie das, was wir hier für diesen Heldenbereich getan haben. Zuerst, wie üblich, werden wir ihm eine Klasse geben. Ich werde Link Button schreiben, einfach so. Dann werde ich seine Topografie-Eigenschaften ändern. Das Gewicht sieht gut aus. Ich werde seine Größe auf 17 Pixel ändern. Es ist Farbe wird primärer Standard sein und schließlich sollte die Dekoration auf keine gesetzt werden und lassen Sie mich diesen Text ändern, um mehr zu erfahren. Erfahren Sie mehr. Lassen Sie mich hier ein paar Margen geben. Ich gebe ihm den linken, unteren und rechten Rand. Da dieser Textlink jedoch die Inline-Anzeigeeinstellung verwendet, kann ich den unteren Rand nicht ändern. Daher werde ich seine Anzeigeeinstellung auf Sperren ändern. Dann kann ich ihm einen 30 Pixel linken unteren und rechten Rand geben, genau so. Da gehen wir. Was sollen wir denn sonst noch tun? Wie Sie sehen können, sind sie nicht perfekt ausgerichtet. Ich werde den Projektinhalt Div Block auswählen. Wie Sie sehen können, ist die Anzeigeeinstellung auf Block eingestellt. Ich werde es in Flex-Box ändern, und ich werde die Richtung in vertikal ändern. Schön. Auch werde ich die Rechtfertigung in Raum zwischen ändern. Jetzt sieht es viel besser aus. Cool. Aber was ist mit anderen Karten? Nun, wir werden diese Projektkarte jetzt auswählen und wir werden sie kopieren. Drücken Sie den Befehl C und fügen Sie ihn zweimal ein, drücken Sie Befehl V oder Kontrolle V. Aber gerade jetzt sind diese Karten vertikal übereinander gestapelt. Das ist nicht das, was wir wollen. Wir wollen, dass sie horizontal nebeneinander sitzen. Wie können wir das in Ordnung bringen? Nun, wir können unseren Projekt-Wrapper auswählen und wir können seine Anzeigeeinstellung von Block zu Flex-Box ändern , genau so. Dann können wir die Rechtfertigung in Raum zwischen ändern. Da gehen wir. Wir haben, was wir hier haben. Jetzt werde ich fortfahren und den Inhalt ändern. Ich werde dieses Bild auswählen und ich werde gehen und das Bild ersetzen. Ich werde den zweiten wählen. Für den dritten werde ich den gleichen Prozess wiederholen. Ich werde es auf Nummer 3 ändern, und auch werde ich den Namen dieser Projekte und auch ihre Beschreibung ändern. Lassen Sie mich schnell weitermachen und die Titel ändern. Da gehen wir. Jetzt werde ich die Beschreibung hier und für das dritte Projekt hier ändern . Wir sind fast fertig, aber es gibt noch eine Sache, die wir tun müssen. Wenn ich mir diese Designdatei anschaue, können wir sehen, dass der Abstand zwischen diesen Karten kleiner ist als das, was wir hier haben. Wie wir sehen können, ist die Lücke hier viel größer. Warum ist das so? Dafür haben wir bereits eine maximale Breite und eine Höhe festgelegt. Das ist der Schlüssel, wir stellen die maximale Breite ein. Daher müssen wir die Projektkarte auswählen, eine von ihnen. Es spielt keine Rolle, weil wir hier keine Combo-Klasse hinzugefügt haben. Ich wähle zum Beispiel den ersten aus. Lassen Sie mich einfach voran und wählen Sie die erste. Dann in der Dimensionierung, wie Sie sehen können, sagt es schrumpfen, wenn nötig. Ich werde es ändern, um zu wachsen, wenn möglich. Da gehen wir. Es ist behoben. Jetzt ist der Abstand hier gleich dem, was wir hier haben. Wir haben einen gleichen Abstand zwischen ihnen, und sie wachsen, wenn sie genug Platz haben. Unsere aktuellen Projekte Abschnitt ist fertig. Ich werde Ihnen jedoch eine andere Möglichkeit zeigen, ein solches Layout mit Rastern zu erstellen. Denn wenn Sie Raster anstelle einer Flex-Box verwenden, wäre es viel einfacher, Ihr Design reaktionsschnell zu gestalten. Das einzige, was ich tun muss, ist, diese Projekte Wrapper auszuwählen, und dann anstelle von Flex-Box werde ich es in Grid ändern. Im Moment habe ich zwei Zeilen und zwei Spalten. Ich werde eine dieser Zeilen entfernen, und ich werde eine weitere Spalte hinzufügen. Da gehen wir. Hier werde ich die Lücke zwischen unseren Spalten auf 40 Pixel ändern und „Fertig“ drücken. Das war's. Jetzt anstatt Flex-Box zu verwenden, verwenden wir ein Raster und wir haben genau das gleiche Layout. In Bezug auf die Reaktionsfähigkeit wird es jedoch unser Leben viel einfacher machen. Alles klar Leute, das ist alles für dieses Video. Unsere aktuellen Projekte Abschnitt ist ebenfalls fertig. Ich hoffe, es hat dir gefallen, und ich sehe dich im nächsten Video. Wir sehen uns dann. 47. Testimonial Abschnitt: In diesem Video werden wir anfangen, diesen Testimonial Abschnitt zusammen zu erstellen. Mal sehen, was wir hier haben. Wie Sie sehen können, sollte dieser Abschnitt eine kleinere Breite im Vergleich zu anderen Abschnitten haben. Hier hatte unsere letzten Projekte Abschnitt eine 100% Breite, aber hier sollte dieser Abschnitt eine 1320 Pixel Breite haben. müssen wir im Hinterkopf behalten. Mal sehen, was wir hier haben. Dieser Abschnitt sollte eine neutrale dunkle Hintergrundfarbe haben. Wie Sie sehen können, haben wir einige Umlaufbahnen. Wie soll ich das strukturieren? Zuerst werde ich einen Abschnitt mit einer maximalen Breite von 1320 Pixeln erstellen. Dann werde ich ihm eine Hintergrundfarbe geben, diese neutrale dunkle Farbe. Schließlich werde ich ein Hintergrundbild hinzufügen, um diese Umlaufbahnen hinzuzufügen. Sobald unser Abschnitt fertig ist, werden wir einen Container innerhalb hinzufügen, und innerhalb dieses Containers werden wir diese Textebenen hinzufügen, diesen Titel, diesen Untertitel, oder sagen wir Beschreibung , und schließlich die Informationen hier. Grundsätzlich sollte dieser Container eine Flexbox mit einer vertikalen Richtung sein. Für diesen Abschnitt erstellen wir zunächst einen div-Block mit der Flexbox-Anzeigeeinstellung. Dann werden wir im Inneren zwei weitere Div-Blöcke haben, einen für dieses Profilbild und einen für diese beiden Textebenen. Der rechte div-Block wird eine Flexbox mit vertikaler Richtung sein. Last but not least werden wir diese Emojis direkt um diesen Container legen und wir werden ihre Position auf absolut setzen. Schließlich müssen wir die Position dieses Abschnitts auf relativ ändern. In Ordnung. Klingt einfach. Lass es uns anfangen. Ich gehe zu Webflow. Hier, ich werde meinen Körper auswählen. Ich werde Befehl K oder Kontrolle K auf meiner Tastatur drücken, und suchen wir nach Abschnitt. In Ordnung. Der Abschnitt wurde hinzugefügt. Ich gebe ihm die Abschnittsklasse wie gewohnt. Außerdem werde ich ihm eine Combo-Klasse geben. Nennen wir es Zeugnis. Da gehen wir. Wie bereits erwähnt, sollte dieser Abschnitt eine bestimmte maximale Breite haben. Auch eine bestimmte Höhe. Werfen wir einen Blick darauf. Die maximale Breite sollte 1320 Pixel betragen und die Höhe sollte 622 Pixel betragen. Lassen Sie uns voran und geben Sie diese Werte an. Ich werde seine maximale Breite auf 1320 und seine Höhe auf 622 Pixel setzen. Da gehen wir. Unsere Sektion ist fertig, aber sie ist nicht zentriert. Wie können wir dieses Problem lösen? Du hast recht. Ich kann zum Abstandsabschnitt gehen und hier kann ich auf diesen kleinen Knopf klicken. Jetzt sind die linken und rechten Ränder auf auto gesetzt und es bedeutet, dass unser Abschnitt zentriert ist. Perfekt. Das letzte, was ich tun werde, ist, diesem Abschnitt einige obere Ränder hinzuzufügen. Lassen Sie uns unser Design für eine Sekunde überprüfen. Wie ich hier sehen kann, sollte der obere Rand 200 Pixel betragen. Ich werde ihm einen 200 Pixel oberen Rand geben. Da gehen wir. Jetzt ist es an der Zeit, diesem Abschnitt eine bestimmte Hintergrundfarbe zu geben. Also werde ich zum Hintergrundbereich gehen und mit diesem Farbwähler werde ich neutrale Dunkelheit wählen. Schließlich werde ich diesem Hintergrund ein Bild hinzufügen, wie folgt, und wählen Sie die Umlaufbahn aus meinen Assets. Genau so. Aber es sieht nicht gut aus. Das liegt daran, dass die Größe auf Benutzerdefiniert festgelegt ist. Ich werde es ändern, um einzudämmen, und das ist, wonach wir suchen. Wir müssen nichts anderes ändern. Unser Hintergrund ist fertig. Jetzt im Inneren werden wir einen Container erstellen. Während dieser Abschnitt ausgewählt ist, werde ich Befehl K oder Kontrolle K drücken, und ich werde nach einem div-Block suchen, genau so. Dieser div-Block befindet sich jetzt in diesem Abschnitt. Ich gebe ihm die Container-Klasse. Da gehen wir. Nun hat dieser Container eine maximale Breite von 1100 Pixel wie alle anderen Container, die wir zuvor erstellt haben. Okay. Cool. Was brauchen wir für diesen Container? Zuerst sollte dieser Behälter die gesamte Höhe dieses Abschnitts einnehmen. Daher werde ich ihm eine Combo-Klasse geben. Lassen Sie mich ein Zeugnis schreiben. Ich werde seine Höhe auf 100 Prozent einstellen. Da gehen wir. Im Inneren werde ich eine Überschrift hinzufügen. Also, während dieser Container ausgewählt ist, werde ich Befehl K oder Kontrolle K drücken, und lassen Sie uns nach Überschrift suchen. Da gehen wir. Die Überschrift wurde hinzugefügt. Für diesen Abschnitt werde ich H3 wählen. Lassen Sie uns dieser Überschrift eine bestimmte Klasse geben. Ich werde Zeugnis Unterstrich schreiben, Unterstrich Überschrift. Dann werde ich seine Typografie-Eigenschaften ändern. Lassen Sie mich zunächst seine Farbe ändern. Wir werden neutrales Licht benutzen, dieses hier. Außerdem werde ich seine Schriftgröße auf 40 Pixel ändern. Wenn ich hier zu meiner Designdatei gehe, wenn ich dies auswähle, können Sie sehen, dass ich H3 verwende und H3 40 Punkte beträgt. Hier werden wir 40 Pixel angeben. Ich werde die Zeilenhöhe nicht berühren. Dann lassen Sie mich fortfahren und diesen bestimmten Text aus meiner Designdatei kopieren und einfügen. Ich kopiere es, befehle C oder kontrolliere C und füge es hier ein. Okay. Großartig. Jetzt brauche ich einen Textblock. Wählen Sie also noch einmal den Container aus, drücken Sie den Befehl K oder steuern Sie K und suchen Sie nach Textblock. Da gehen wir. werde ich ihm eine Klasse geben. Lassen Sie uns Zeugnisunterstrich schreiben, unterstrichen Text. Schließlich werde ich seine Farbe auf diese sekundäre ändern. Außerdem werde ich seine Größe auf 24 Pixel und seine Zeilenhöhe auf 160 Prozent ändern. Ich kann auch sein Gewicht ändern. Werfen wir einen Blick auf das Gewicht hier. Ja, es wird mittel sein, also werde ich es zu Medium ändern. Dann werde ich den Text hier kopieren und einfügen. Kopieren wir es und fügen Sie es hier ein. Auch unsere Texte sind fertig. Wir haben jedoch ein Problem. Hier, wie Sie sehen können, ist dieser Text zu lang, aber wenn ich einen Blick auf meine Designdatei werfen, können Sie sehen, dass ich zwei Textzeilen habe und die Breite auf 596 Pixel gesetzt ist, so dass Sie wissen, was wir tun müssen. Wir müssen seine Größeneigenschaft ändern. Wenn ich eine maximale Breite für diese Textebene festlege, wird das Problem gelöst. Ich werde 596 Pixel schreiben. Da gehen wir. Wir haben zwei Textzeilen, und ich werde es an der Mitte ausrichten. Schön. Bevor wir anfangen, den letzten Abschnitt hier zu erstellen, den Client-Abschnitt, werde ich voran gehen und diesen Container auswählen, und ich werde seine Anzeigeeinstellung von Block zu Flexbox ändern. Wie Sie standardmäßig sehen können, ist die Richtung auf horizontal eingestellt. Ich werde es in Vertikal ändern. Außerdem werde ich es an der Mitte ausrichten und wir werden dort modifiziert und die gerechtfertigt legen, aber nicht jetzt. Was brauchen wir noch hier? Wie ich bereits erwähnt habe, für diesen Client-Abschnitt benötigen wir für diesen Client-Abschnitteinen div-Block. Also, während dieser Container ausgewählt ist, werde ich Befehl K oder Kontrolle K drücken und nach div Block suchen. Da gehen wir. Ich werde ihm eine Klasse geben. Lasst uns Client schreiben. Dieser Client-Div-Block sollte zwei weitere div-Blöcke haben. Während es ausgewählt ist, suchen wir nach einem div-Block. Jetzt ist ein weiterer div-Block drin und ich werde den gleichen Prozess wiederholen, um einen anderen div-Block hinzuzufügen. Wir haben jetzt zwei div-Blöcke, aber sie sind übereinander gestapelt und es ist nicht das, was wir wollen. Warum? Denn hier sollten sie nebeneinander platziert werden. Daher werde ich das Elternteil auswählen, das ist dieser Client-Div-Block, und ich werde seine Anzeigeeinstellung von Block zu Flexbox ändern . Die Richtung ist horizontal eingestellt, das ist genau das, was wir brauchen. Ich werde den linken div-Block auswählen und ich werde ihm eine Klasse geben. Lassen Sie uns Client-Unterstrich schreiben, Unterstrich Profil. Für den richtigen, den nächsten div-Block, werde ich ihm eine Klasse geben und ich werde Client-Unterstrich schreiben, Unterstreichungsinformationen. Unsere div-Blöcke sind bereit. Jetzt müssen wir hier Inhalte hinzufügen. Zuerst werde ich einen Client-Profil-Div-Block auswählen, und ich werde zum Hintergrundbild übergehen. Fügen wir hier ein Bild hinzu. Ich werde ein Bild aus den Assets, dem Profilbild auswählen. Da gehen wir. Aber wir müssen seine Präferenzen ändern. Zuerst werde ich seine Größe ändern, um zu decken. Schön. Dann werde ich es in der Mitte neu positionieren und auch werde ich die Kachel so einstellen, dass sie nicht kacheln. Schließlich muss ich es kreisförmig machen. Wie können wir das tun? Nun, es ist so einfach. Ich habe dir schon vorher gezeigt, wie wir einen Kreis schaffen können , und wir werden das Gleiche tun. Zuerst müssen wir eine bestimmte Breite und Höhe einstellen. Die Breite und Höhe sollten gleich sein, wenn wir einen Kreis erstellen möchten. Daher werde ich diese Breite und Höhe hier überprüfen. Es ist ein 50 mal 50 Pixel Bild. Ich werde ihm 50 mal 50 Pixel-Dimensionen geben. Das einzige, was wir tun müssen, ist, zu den Grenzen zu gehen und ich werde den Radius auf 50 Prozent ändern. Da ist es, wir haben unseren Kreis. Was sollen wir sonst tun? Jetzt ist es an der Zeit, den Client-Info-Inhalt hier hinzuzufügen. Für diesen div-Block benötigen wir zwei Textebenen. Wie Sie sehen können, haben wir einen Namen und dann den Namen des Unternehmens oder den Namen der Website. Hier, während dieser Client Info div Block ausgewählt ist, werde ich Befehl K oder Kontrolle K drücken, und ich werde nach Textblock suchen. Da gehen wir. Dies ist unser erster Textblock. Ich werde ihm eine Klasse geben. Lassen Sie mich Client-Unterstrich, Unterstrich Informationen, Unterstrich, Unterstrich Namen schreiben , einfach so. Dann werden wir einige seiner Eigenschaften ändern. Gehen wir rüber zum Typografiebereich. Von hier aus werde ich seine Größe auf 17 Pixel ändern. Wenn ich mir mein Design hier ansehe, beträgt seine Größe 17 Punkte. Dann müssen wir seine Farbe zu primären Hover ändern. Wir haben kein globales Farbfeld für diese primäre Hover-Farbe erstellt, aber das ist in Ordnung. Ich werde es jetzt tun. Also lass mich weitermachen und den Farbcode von hier holen. Wie Sie sehen können, ist der Farbcode A2D6F9. Ich werde es kopieren. Dann werde ich zu Webflow gehen und von der Typografie-Farbe hier, werde ich ein neues Farbfeld erstellen, und lassen Sie uns den Farbcode hier einfügen. Ich werde es primären Schrägstrich Hover nennen. Wir haben ein neues globales Muster. Nun kopieren und fügen Sie den Namen des Kunden hier ein. Ich werde es kopieren, und fügen wir es hier drüben ein. Sieht gut aus. Schließlich brauchen wir eine weitere Textebene. Ich werde den Client-Info-Div-Block auswählen, und mit dem QuickFind werde ich nach einem anderen Textblock suchen. Genau so. Geben wir ihm eine Klasse. Ich werde Kundenunterstrich schreiben, Unterstrich Info, Unterstrich, Unterstrich Firma. Dann werde ich seine Topografie-Eigenschaften ändern. Beginnen wir zunächst mit der Schriftgröße. Seine Schriftgröße sollte 13 Punkte betragen, wenn ich mich nicht irre, lass es mich überprüfen. Wir verwenden die Beschriftung zwei Textstil. Hier, Beschriftung zwei ist 13 Punkte, das ist in Ordnung. Ich werde es hier 13 Pixel geben, und für seine Farbe werden wir ein neutrales Licht verwenden. Schön. Lassen Sie mich fortfahren und kopieren und fügen Sie die Website des Unternehmens, die booking.com ist. Ich werde es hier einfügen, und wir sind fast fertig. Jetzt müssen wir nur unsere Elemente ausrichten. Beginnen wir mit dem Client_Info. Wenn ich diesen Client_Info-Div-Block auswähle und zum Layout-Abschnitt gehe, können Sie sehen, dass die Anzeigeeinstellung auf Block gesetzt ist, und es ist nicht das, was ich möchte, weil ich die Ausrichtung ein wenig ändern möchte. Daher werde ich es in Flex-Box ändern und ich werde die Richtung in vertikal ändern. Das Letzte, was ich hier tun werde, ist, die Rechtfertigung in Raum zu ändern. Da gehen wir. Das letzte, was wir tun müssen, ist ein paar linke Ränder hier hinzuzufügen. Lassen Sie mich meine Designdatei überprüfen. Wenn ich diese Gruppe auswähle und die Alt- oder Wahltaste auf meiner Tastatur gedrückt halte, sehen Sie, dass der linke Rand auf 10 Pixel eingestellt ist. Daher, während dieser Client _Info Div Block ausgewählt ist, werde ich ihm einen 10 Pixel linken Rand geben. Ich werde den Container auswählen, und ich werde die Begründung in Raum ändern. Wir haben, was wir hier haben. Werfen wir einen Blick. Wir haben genau das, was wir in unserer Designdatei haben. Was ist mit den Memojis? Wie ich Ihnen bereits gesagt habe, werden wir auch vier verschiedene Memojis haben. Ich werde diesen Abschnitt auswählen, nicht den Container. Ich werde einen Abschnitt auswählen, und dann werde ich nach einem Div-Block suchen und dieser Div-Block befindet sich jetzt in diesem Abschnitt. Geben wir ihm eine Klasse. Ich werde Memoji schreiben, und diese Memoji sollte eine bestimmte Breite und Höhe haben. Werfen wir einen Blick auf unsere Designdatei für eine Sekunde. Wenn ich dieses Memoji wähle, können Sie sehen, dass seine Breite und Höhe auf 150 Pixel eingestellt sind. Ich werde seine Breite auf 150 und seine Höhe auf 150 Pixel einstellen. Aber was ist mit dem Bild? Werden wir hier ein Bildelement hinzufügen? Nein, wir werden das Hintergrundbild verwenden, aber bevor ich das Hintergrundbild hinzufüge, gebe ich ihm eine Combo-Klasse. Warum? Da wir vier verschiedene Memojis haben werden, und da wir das Hintergrundbild hier ändern werden, ist es wichtig, diesem Memoji Div Block eine Combo-Klasse zu geben. Für das erste Memoji werde ich ihm die eine Combo-Klasse genau so geben, dann geben wir ihm ein Bild. Ich werde ein Bild aus meinem Vermögen wählen, dieses, und ich werde seine Größe ändern, um zu enthalten und lassen Sie mich das in der Mitte neu positionieren. Ich werde die Fliese so einstellen, dass sie nicht binden. Es ist genau hier, aber wie können wir es dort drüben platzieren? Wie Sie jetzt sehen können Entwurfsdatei. Sie sind direkt neben den Ecken platziert. Wie ich bereits erwähnt habe, werde ich diesen Abschnitt auswählen, und ich werde seine Position von statisch zu relativ ändern. Warum? Denn später werde ich die Position dieser Memojis zu absolut ändern, und so kann ich sie neu positionieren, wie ich will. Wenn ich dieses Memoji auswähle und wenn ich seine Position in ändere, sagen wir absolut hier, ist noch nichts passiert, weil ich seine Position nach oben links ändern werde. Nun, wie Sie sehen können, da die Position dieses Memoji relativ zu seinem Abschnitt ist, wie Sie hier sehen können. Ich kann einfach seine Position ändern. Lassen Sie mich die linke und obere Position ändern. Ich werde es ändern, sagen wir 5 Prozent, und für die Spitze werde ich es auf 10 Prozent setzen. Jetzt muss ich das nächste Memoji erstellen, damit Sie dieses Memoji entweder kopieren und einfügen können, oder Sie können es duplizieren. Ich werde mit der rechten Maustaste auf diesen Memojis Namen klicken, und ich werde auf Duplizieren klicken. Es wurde dupliziert, aber sie sind jetzt übereinander. Wenn ich die duplizierte Ebene auswähle, kann ich sie einfach neu positionieren, aber bevor ich das mache , werde ich diese Combo-Klasse duplizieren, genau so. Dann werde ich ihm eine neue Combo-Klasse geben. Ich werde zwei schreiben, weil das unser zweites Memoji ist. Jetzt werde ich es nach unten links neu positionieren, und ich kann seine linke und untere Position hier auf 5 Prozent ändern, und hier werde ich es auf 10 Prozent setzen. Alles klar, cool. Jetzt ist es an der Zeit, zum Hintergrundabschnitt zu gehen und das Bild selbst zu ändern. Ich werde diese Memoji auswählen und jetzt müssen wir nur den gleichen Vorgang wiederholen. Ich werde diese Memoji duplizieren, einfach so. Ich werde den duplizierten Div-Block im Navigator auswählen, und ich werde seine Combo-Klasse duplizieren. Ändern wir es in drei und lassen Sie mich es in die rechte obere Ecke neu positionieren. Außerdem werde ich seine Memoji vom Hintergrundabschnitt zu diesem ändern. Schließlich werde ich seine Position nach rechts ändern, ich werde es auf 5 Prozent setzen und die Spitze, ich werde es auf 10 setzen. guter Letzt Zuguter Letztwerde ich es noch einmal duplizieren. Lassen Sie uns die duplizierte Ebene im Navigator auswählen und auch ihre Combo-Klasse duplizieren, und ich werde sie vier nennen, dann werde ich sie in die untere rechte Ecke neu positionieren. Auch werde ich sein Bild von den Assets zu diesem Memoji ändern. Lassen Sie mich abschließend die rechte und untere Position auf 5 Prozent bzw. 10 Prozent ändern . Genau so, Jungs. Unser Testimonial Abschnitt ist ebenfalls bereit. Können Sie sehen, wie einfach es ist, Ihr Figment Design in funktionale Websites zu konvertieren. Das einzige, was zählt, ist, dass Sie die Strukturen und die CSS-Eigenschaften verstehen , solange Sie die Regeln befolgen, und Sie haben eine klare Struktur in Ihrem Kopf, alles ist einfach. Lasst uns zusammenfassen. Für diesen Abschnitt. Wir haben einen Abschnitt erstellt. Wir gaben ihm eine Testimonial Combo Klasse, und auch wir gaben ihm einen 200 Pixel oberen Rand gemäß unserer Designdatei. Dann haben wir eine maximale Breite und auch eine bestimmte Höhe dafür angegeben, und wir haben ihm eine Hintergrundfarbe und ein Hintergrundbild gegeben. Gleich danach haben wir einen Container erstellt, und wir gaben ihm die Container- und Zeugnisklassen, und im Inneren haben wir eine Überschrift, einen Textblock und einen anderen Div-Block hinzugefügt, der zwei andere Div-Block enthält. Alle diese Div Block sind Flex-Boxen. Wir ändern ihre Anzeigeeinstellung in Flex-Box, um ihre Richtung, ihre Ausrichtung und ihre Ausrichtung zu steuern . Nachdem der Containerabschnitt abgeschlossen war, haben wir angefangen, die Memojis hier hinzuzufügen. Um sie richtig zu positionieren, setzen wir die Abschnitte Position auf relativ und wir sagten, die Memojis-Position auf absolut. Alles klar Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und wir sehen uns im nächsten. 48. Dienstleistungsbereich: Hey, in diesem Video werden wir anfangen, den Bereich „Dienste“ zusammen zu bauen. Mal sehen, wie wir es strukturieren sollten. Wie Sie hier sehen können, haben wir einen weiteren Abschnitt. Zuerst müssen wir einen Abschnitt erstellen und im Inneren brauchen wir einen Container genau wie das, was wir hier für den Abschnitt Letzte Projekte getan haben, wir werden das Gleiche auch hier tun. In diesem Container werden wir eine Überschrift für diesen Titel Unsere Dienste haben und dann werden wir den Service Wrapper haben. Es wird ein Raster oder eine Flexbox sein. Wir gehen mit Gitter. Innerhalb dieses Services-Containers oder sagen wir Dienste Grid, wir werden eine drei verschiedene div Blöcke haben. Hier haben wir drei verschiedene Karten, und jede Karte sollte mit einem div Block erstellt werden. Nehmen wir das zum Beispiel. Dies wird ein div-Block sein, und im Inneren werden wir dieses Symbol haben, und wir werden dieses Symbol mit einem div-Block und einem div-Block im Inneren erstellen. Sobald unser oberer Abschnitt erstellt wurde, werden wir fortfahren und den Inhaltsbereich erstellen. Hier brauchen wir einen Titel und eine Beschreibung, und schließlich brauchen wir diesen Learn More Button. Letzt werden wir unseren Div-Block zweimal duplizieren, um drei verschiedene Karten zu erhalten. Es sieht einfach aus, also fangen wir an. Zuerst gehe ich voran und wähle hier meinen Körper aus. Dann werde ich Befehl K oder Control K drücken und nach Abschnitt suchen. Da gehen wir. Ein neuer Abschnitt wurde hier hinzugefügt, und ich werde ihm eine Klasse geben, die Abschnittsklasse. Dieser Abschnitt wird keine bestimmte Breite oder Höhe haben; ich werde ihm jedoch einen oberen Rand geben. Werfen wir einen Blick auf unsere Designdatei hier. Wie Sie sehen können, werden wir 200 Pixel oberen Rand benötigen. Ich werde diesen Abschnitt auswählen und den oberen Rand auf 200 Pixel ändern . Da gehen wir. Aber wir können es jetzt nicht sehen, weil es nichts in unserem Bereich gibt. Wie können wir das beheben? Zuerst werde ich diesen Abschnitt auswählen und ich werde Befehl K oder Control K drücken und ich werde einen div-Block hinzufügen, denn wie Sie wissen, werden wir einen Container benötigen. Wie Sie jetzt sehen können, haben wir unseren 200 Pixel oberen Rand, und während dieser div-Block ausgewählt ist, werde ich ihm die Container-Klasse geben. Da gehen wir. Jetzt haben wir die maximale Breite von 1.100 Pixeln. Das ist genau das, was wir brauchen. Für diesen Container werde ich auch eine Combo-Klasse hinzufügen. Ich werde Dienste schreiben, und in diesem Container werden wir eine Überschrift und den Services-Wrapper haben. Während dieser Container ausgewählt ist, drücken Sie Befehl K oder Control K, und suchen Sie nach Überschrift. Diese Überschrift wurde hinzugefügt, und ich werde H3 hier wählen. Lass mich weitermachen und ihm eine Klasse geben. Da es sich um CSS-Eigenschaften handelt, sollten genau die gleichen wie die Überschrift Zuletzt verwendete Projekte sein. Daher werde ich auch die Rubrik „Projekte“ für diese Rubrik festlegen. Ich werde es auswählen und schreiben Projekte Überschrift. Da gehen wir. Dann werde ich seinen Text in Unsere Dienste ändern. Lass mich weitermachen und es kopieren. Cool. Unsere Überschrift ist fertig. Was brauchen wir noch? Wir brauchen den Service Wrapper. Während dieser Container ausgewählt ist, werde ich Befehl K oder Control K drücken und nach div Block suchen. Dann benötigt dieser div-Block wie gewohnt eine Klasse. Da wir die Anzeigeeinstellung später auf Raster ändern werden, werde ich es nennen, Dienste unterstrichen Grid. Es ist jetzt kein Raster, aber später werden wir es in Gitter ändern. Dieses Dienstraster muss einige obere Ränder haben. Lassen Sie mich das hier überprüfen. Wenn ich diesen Service Wrapper auswähle und ich die Alt-Taste oder Wahltaste auf meiner Tastatur gedrückt halte, können Sie sehen, dass wir 70 Pixel oberen Rand benötigen. Ich werde dieses Dienstraster auswählen und ich werde einige Margen hinzufügen. Setzen wir es auf 70 Pixel. Cool. Jetzt, da unsere Dienste Grid Div Block erstellt wird, benötigen wir einen weiteren div Block innerhalb für unsere Service-Karte. Während dieses Dienstraster ausgewählt ist, suchen wir daher nach einem div-Block, und dieser div-Block wird eine neue Klasse haben. Lassen Sie uns es nennen, Service Unterstrich Karte. Diese Karte wird eine bestimmte maximale Breite haben, aber wir werden nicht eine bestimmte Höhe dafür angeben, wir werden die Höhe auf auto setzen. Aber wenn ich diesen Dienst eine Karte hier auswählen, können wir sehen, dass die Breite auf 340 Pixel eingestellt ist. Daher werden wir die maximale Breite auf 340 Pixel setzen. Schön. Diese Karte ist weiß. Was sollen wir tun? Ja, du hast recht. Wir müssen hier die Hintergrundfarbe ändern. Ich werde zum Hintergrundbereich gehen und mit diesem Farbwähler werde ich seine Farbe in Weiß ändern. Cool. Aber es sieht zu klein aus. Ja, weil wir dafür keine bestimmte Höhe festgelegt haben, und das ist völlig in Ordnung. Sobald wir diesem Div-Block mehr Elemente hinzufügen, wird seine Höhe wachsen, also mach dir keine Sorgen darüber. Sobald diese Servicekarte ausgewählt ist, werden wir einige Elemente hinzufügen. Was brauchen wir? Wir brauchen zwei Div-Blöcke. Wir brauchen das Service-Icon div Block und den Service Content div Block. Lassen Sie uns nach einem div-Block suchen. Wieder werde ich Service-Karte auswählen und nach einem anderen div-Block suchen. Jetzt haben wir zwei div-Blöcke, die übereinander platziert werden. Ich werde ihnen einen Kurs geben. Für den ersten div-Block, für diesen Top-div-Block, werde ich es nennen, Service-Unterstrich Icon. Für den unteren div-Block werde ich es benennen, Service-Unterstrich Inhalt. Der obere div-Block wird für unser Icon verwendet und der untere div-Block wird unseren Inhalt enthalten. Beginnen wir mit dem Symbol. Ich werde das Dienstsymbol div Block auswählen, und lassen Sie uns hier zu unserer Designdatei gehen. Wenn ich dieses Symbol auswähle, können wir sehen, dass wir diesen Kreis haben und seine Breite und Höhe auf 80 Pixel eingestellt sind. Daher werde ich hier die Breite und Höhe auf 80 Pixel genau so angeben. Dann werde ich die Hintergrundfarbe ändern. Hier müssen wir neutrales Hellblau verwenden. Lassen Sie uns voran und ändern Sie die Hintergrundfarbe in neutrales Hellblau, genau so. Dann müssen wir es kreisförmig machen. Ich werde den Radius auf 50 Prozent ändern. Da gehen wir. Unser Kreis ist fertig. Aber was ist mit der Ikone? Nun, für das Symbol haben wir zwei Optionen; Erstens können wir voran gehen und ein Bild hier hinzufügen, zweitens können wir einen weiteren div Block innerhalb dieses Service-Icon-div-Blocks hinzufügen und unser Symbol dort setzen. Die zweite Option ist flexibler in Bezug auf die Ausrichtung, aber lassen Sie uns voran und überprüfen Sie die erste Option. Ich werde hier ein Bild hinzufügen mit dem Hintergrundbild Abschnitt und ich werde dieses erste Symbol auswählen. Dann werde ich seine Position in die Mitte ändern, und ich werde die Zeit auf Morgendämmerung einstellen. Da gehen wir. Unsere Ikone ist fertig. Jetzt müssen wir eins zum nächsten div Block verschieben. Aber bevor wir das tun, geben wir diesem Service-Icon div einige Ränder blockieren. Ich werde nach oben scrollen und ich werde den oberen Rand auf 40 Pixel setzen. Werfen wir einen Blick auf unsere Designdatei. Ja, der obere Rand wird 40 Pixel sein und der linke Rand wird 30 Pixel betragen, also werde ich seinen oberen Rand auf 40 setzen und den linken Rand auf 30 Pixel. Aber sieh mal, ich konnte den oberen Rand von 40 Pixeln nicht bekommen. Warum ist das? Das liegt daran, dass der zweite div-Block, dieser Dienstinhalt-div-Block hier den verfügbaren Speicherplatz belegt. Daher kann dieses Service-Icon nicht diesen 40 Pixel oberen Rand haben, da wir dieser Servicekarte keine bestimmte Höhe gegeben haben. Das ist völlig in Ordnung. Gehen wir nun zu den Service-Inhalten über, und später werden wir diesen oberen Rand erhalten. Was brauchen wir innerhalb dieser Service-Inhalte? Werfen wir einen Blick auf unsere Designdatei. Innerhalb dieses Service-Content-Div-Blocks werden wir einen weiteren div-Block haben, um diese Textebenen einzufügen, und dann brauchen wir eine Link-Schaltfläche, einen Textlink. Lassen Sie uns voran und erstellen Sie einen div-Block. Während dieser Service-Inhalt ausgewählt ist. Ich werde „Command K“ oder „Control K“ drücken und nach einem div-Block suchen. Da gehen wir. In diesem Service-Inhalt haben wir einen neuen div-Block. Dieser neue div-Block wird eine Klasse benötigen, also gehe ich zum Selector und lass uns eine neue Klasse hinzufügen. Ich werde Service-Unterstrich schreiben, Unterstrich Text, und innerhalb brauchen wir zwei verschiedene Textblöcke. Während es ausgewählt ist, lassen Sie uns „Befehl K“ oder „Control K“ drücken und nach Textblock suchen. Da gehen wir. Dies ist der erste Textblock, ich brauche auch einen anderen. Wieder einmal werde ich „Service-Inhalt“ auswählen, „Befehl K“ oder „Control K“ drücken und nach Textblock suchen. Okay, wir haben zwei Textblöcke hier, aber sie haben keine Klassen. Also werde ich die erste auswählen und ich werde ihm eine Klasse geben. Ich kann Service-Unterstrich Titel schreiben. Da dieser Titel und die Beschreibung jedoch das gleiche Styling haben werden wie wir hier für diese Projektkarte haben, werde ich ihm die Klasse geben, die wir für diesen Titel erstellt haben. Für ihre Beschreibung sollte es Projektbeschreibung sein. Lassen Sie uns voran und wählen Sie den ersten Textblock und lassen Sie uns Projekttitel schreiben, okay, da ist es und für den nächsten werde ich Projekt schreiben und dann nach Beschreibung suchen. Hier ist es. In Ordnung. Cool. Jetzt gehe ich voran und kopiere diesen Text und füge ihn hier ein und aus der Beschreibung werde ich ihn auch kopieren, lass es uns hier einfügen. Direkt unter diesem Servicetext benötigen wir auch einen Link-Block. Da Sie jedoch sehen können, dass sich diese Projektbeschreibung nicht in unserem Service-Textdiv-Block befindet, werde ich es ziehen und ich werde sicherstellen, dass es innerhalb des Service-Div-Blocks verschachtelt ist. Jetzt werde ich Service-Inhalte auswählen und ich werde nach einem Textlink suchen. Da gehen wir. Wir haben unseren Textlink und wir müssen keine neuen Eigenschaften dafür erstellen , da wir unseren Link Button hier haben. Ich werde das wählen und ich werde ihm die Link-Button-Klasse geben. Da gehen wir. Können Sie sehen, wie nützlich es ist, Klassen richtig zu verwenden? Schließlich werde ich seinen Text ändern, um mehr zu erfahren. Alles klar cool. Wir sind fast fertig. Jetzt müssen wir nur einige Eigenschaften ändern, um unsere Karte größer zu machen und die Ausrichtung zu ändern. Zuerst werde ich diesen Dienstinhalt-div-Block auswählen und wie Sie sehen können, ist die Anzeigeeinstellung auf blockieren festgelegt. Ich werde es in Flexbox ändern und ich werde die Richtung in vertikal ändern, und ich werde die Begründung in Raum zwischen ändern. Dann werde ich den Service Card div Block auswählen und ich werde dasselbe wiederholen. Ich werde die Anzeigeeinstellung auf Flexbox ändern und die Richtung auf vertikal ändern. Jetzt haben wir unseren oberen Rand. Für diese Beschreibung haben wir jedoch keinen unteren Rand. Daher werde ich diese Projektbeschreibung auswählen und ich werde ihr einen unteren Rand geben. Sein unterer Rand ist auf 10 Pixel eingestellt und ich werde ihm einen unteren Rand von 40 Pixeln geben. Lassen Sie uns das ändern. Jetzt sieht es viel besser aus. Wie Sie sehen können, sieht unsere Karte genau so aus wie wir hier in unserer Designdatei haben, und genau das haben wir gesucht. Was sollen wir jetzt tun? Nun, der harte Teil ist fertig, jetzt müssen wir unsere Service-Karte auswählen, wir müssen sie duplizieren, also werde ich mit der rechten Maustaste hier klicken und ich werde zweimal „Duplicate“ drücken. Ich werde diesen Vorgang zweimal wiederholen. Da gehen wir. Wir haben drei verschiedene Karten. Sie sind jedoch übereinander gestapelt und wir haben zwei Möglichkeiten; wir können entweder mit einer Flexbox oder mit Gitter gehen. Da ich unser Design konsistent halten werde, werde ich mit Grid gehen, weil wir für diesen Abschnitt auch ein Gitter verwendet haben. Daher werde ich den Dienst als Grid-Div-Block auswählen und ich werde seine Anzeigeeinstellung in Raster ändern. Schön. Weißt du, was wir tun müssen? Wir müssen eine dieser Zeilen entfernen und wir müssen hier eine weitere Spalte hinzufügen. Schließlich werde ich die Lücke von 16 Pixel auf 40 Pixel ändern, genau so. Alles klar, cool. Unsere Karten sind fast fertig. Das einzige, was ich tun muss, ist, diese Symbole und den Inhalt zu ändern. Lassen Sie mich voran und ändern Sie dieses Symbol schnell. Wenn ich diesen Service-Icon-div-Block auswähle, kann ich zum Hintergrundbereich wechseln und ein anderes Bild auswählen. Aber etwas passiert, sobald ich dieses Bild geändert habe. Da ich dieser Basisklasse keine Kombinationsklasse hinzugefügt habe, diese Symbole betroffen, wenn ich dieses Symbol ändere sind allediese Symbole betroffen, wenn ich dieses Symbol ändere. Lassen Sie mich Ihnen zeigen, was ich meine. Da gehen wir. Das ist nicht das, was wir wollen. Deshalb, was ich tun werde, ist, gehen Sie voran und fügen Sie eine Combo-Klasse zu diesem Service-Icon-Div-Block hinzu. Ich werde 2 schreiben, und für diesen werde ich 3 schreiben, und für den ersten schreiben wir 1. Obwohl der erste nicht notwendig ist, werde ich ihm eine Combo-Klasse geben, die ich meine Elemente leicht organisieren könnte. In Ordnung. Jetzt kann ich dieses Dienstsymbol auswählen, und wenn ich das Symbol ändere, die anderen Symbole nicht betroffen. Also werde ich den zweiten wählen, nett, und für den dritten werde ich dasselbe tun und wählen wir diesen. In Ordnung. Unsere Symbole sind fertig, jetzt werde ich voran gehen und den Titel und die Beschreibung ändern. Lassen Sie mich diese Texte hier schnell kopieren und einfügen. Alles klar, Jungs, das ist alles für dieses Video, unser Servicebereich ist auch bereit. Ich hoffe, es hat dir gefallen und wir sehen uns im nächsten. 49. CTA Abschnitt: Hey, in diesem Video werden wir diesen CTA-Sektion erstellen. CTAs steht, wer To Action genannt werden, und es greift normalerweise die E-Mail-Adresse oder den Namen und die E-Mail-Adresse des Benutzers, um ihm oder ihr einige Dateien zu senden oder sagen wir einige Neuigkeiten oder Informationen, die der Benutzer sucht. Dieser Abschnitt zum Aufrufen der Aktion hat ein Formular. Wie Sie sehen können, hat dieses Formular ein Textfeld und auch den Abonnieren Button. Mal sehen, wie wir das strukturieren sollten. Zuerst haben wir einen Abschnitt, ich muss seinen Namen in CTA-Abschnitt ändern, und dieser Abschnitt, genau wie unser Testimonial Abschnitt, hat eine bestimmte Breite. Es nimmt nicht die gesamte Breite unseres Ansichtsfensterfensters ein, daher werden wir eine bestimmte Breite für diese 13 und 20 Pixel festlegen, wie Sie hier sehen können. Es erfordert eine Hintergrundfarbe, daher werden wir hier die sekundäre Farbe für den Hintergrund verwenden. Sobald unser Abschnitt erstellt ist, benötigen wir einen Container wie gewohnt, und schließlich werden wir in diesem Container eine Überschrift, einen Textblock und auch einen Formularblock haben . Dieser Formularblock wird einen Textfeld Wrapper und eine Schaltfläche haben. Nichts Kompliziertes. Wir müssen uns nur an die Regeln halten und wir müssen nur Flexbox verwenden, um diese Elemente auszurichten. Bist du bereit? Fangen wir an. Zuerst werde ich voran gehen und meinen Körper hier auswählen, und dann werde ich nach Abschnitt suchen, genau so. Lassen Sie mich ihm einen Kurs geben. Ich gebe ihm hier die Sektionsklasse. Außerdem werde ich ihm die Combo-Klasse geben, nennen wir es CTA. Wie Sie sehen können, können wir den Abschnitt nicht sehen, da es nichts in unserem Abschnitt gibt. Zuerst werde ich voran gehen und ihm eine maximale Breite von 1.320 Pixeln und auch eine bestimmte Höhe von 500 Pixeln geben. Wenn ich mir mein Design anschaue, können Sie sehen, dass seine Höhe 500 Pixel beträgt. Ich könnte es auch auf auto setzen, aber ich ziehe es vor, hier eine bestimmte Höhe zu haben. Jetzt müssen wir unseren Abschnitt zentrieren. Wie können wir das tun? Du hast recht. Ich kann zu diesem Abstandsabschnitt gehen und ich kann auf diese Schaltfläche klicken , um das Element horizontal genau so zu zentrieren. Das nächste, was wir tun müssen, ist die Hintergrundfarbe zu ändern. Wenn ich zum Hintergrundbereich gehe und hier mit diesem Farbwähler auf diese Farbe klicke, kann ich eines meiner Farbfelder verwenden. Ich werde die sekundäre benutzen. Unsere Sektion ist fertig. Jetzt, wie immer, brauchen wir einen Container. Während dieser Abschnitt ausgewählt ist, werde ich die Befehlstaste oder die Steuerungstaste drücken. Lassen Sie uns nach einem div-Block suchen. Dieser div-Block hat keine Klasse, also lassen Sie uns voran gehen und ihm die Container-Klasse geben. Schön. Unser Container ist auch fertig. Was brauchen wir in diesem Behälter? Wir brauchen eine Überschrift, einen Textblock und einen Formularblock. Zuerst werde ich diesem Container eine Combo-Klasse CTA geben, und dann werde ich Befehlstaste oder Steuerungstaste drücken und nach Überschrift suchen. Lassen Sie uns die Überschriftenzeit auf h3 ändern, und ich werde ihm auch eine Klasse geben. Hier werde ich CTA-Unterstrich, Unterstrich Überschrift schreiben , und lassen Sie uns einige seiner Topografieeigenschaften ändern. Das Gewicht wird fett sein. Die Größe wird jedoch 40 Pixel betragen. Die Farbe wird auch neutral dunkel sein. Jetzt werde ich voran gehen und diesen Text von hier kopieren und direkt dort drüben einfügen. Unsere Überschrift ist fertig. Jetzt brauchen wir einen Textblock. Wählen wir unseren Container mit Hilfe der Schnellsuche aus. Ich werde voran gehen und nach einem Textblock suchen, und ich werde ihm eine Klasse geben. Lassen Sie uns CTA-Unterstrich, Unterstrich, Untertitel schreiben , und ich werde einige seiner Topografie-Eigenschaften ändern. Das einzige, was wir hier tun müssen, ist, die Größe hier auf 17 Pixel zu ändern. Wir müssen nichts anderes anfassen. Großartig. Lassen Sie mich jetzt voran gehen und kopieren Sie diesen Text. Lassen Sie uns Ihnen helfen. Genau so. Unsere Textebenen sind fertig. Jetzt brauchen wir einen Formularblock. Lassen Sie mich diesen Container auswählen. Sie können entweder zum Abschnitt Hinzufügen gehen und einfach einen Formularblock hier ziehen und ablegen, oder drahtloser Container ist ausgewählt, Sie können Befehlstaste oder Steuertaste drücken, um die Schnellsuche zu öffnen und nach einem Formularblock zu suchen. Wir haben unseren Formularblock. Wir haben jedoch zwei Textfelder, wir haben zwei Textfelder Beschriftungen, und auch wir haben hier eine Schaltfläche. Aber für diesen Abschnitt brauchen wir nur ein Textfeld, wir brauchen keine Beschriftung und wir müssen die Schaltfläche ein wenig ändern. Lassen Sie uns fortfahren und wählen Sie die Feldbeschriftung aus dem Navigator und entfernen Sie diese, drücken Sie die Rücktaste oder die Entf-Taste auf Ihrer Tastatur. Ich werde auch das Textfeld entfernen. Jetzt werde ich diese Feldbeschriftung entfernen. Wir brauchen keine Feldbeschriftung. Im Moment habe ich ein Textfeld und einen Submit-Button. Zuerst werde ich diesen Form-div-Block auswählen, und wie Sie sehen können, ist seine Anzeigeeinstellung auf Block gesetzt. Ich werde es in Flugspitzen ändern, und jetzt ist die Richtung auf horizontal eingestellt, das ist genau das, was wir brauchen. Wir haben das Layout, nach dem wir suchen. Wenn Sie jedoch einen Blick auf die Entwurfsdatei werfen, können Sie sehen, dass wir diesen Platzhaltertext und auch dieses Symbol haben. Lassen Sie uns voran und ändern Sie unser Textfeld ein wenig. Dieses Textfeld hat eine bestimmte Breite und Höhe. Die Breite beträgt 393 Pixel und die Höhe beträgt 80 Pixel. Daher werde ich dieses Textfeld auswählen und ich werde seine Breite auf 393 Pixel und seine Höhe auf 80 Pixel ändern . Aber wie Sie sehen können, hat dieses Textfeld standardmäßig einige untere Ränder. Ich werde weitermachen und das entfernen. Lassen Sie uns den unteren Rand auf 0 setzen. Nun ist dieses Textfeld an dieser Schaltfläche ausgerichtet. Aber was ist mit dem Platzhaltertext? Nun, wenn Sie sich erinnern, wenn ich hier auf dieses Textfeld doppelklicke, kann ich den Platzhaltertext angeben. Lassen Sie mich schreiben, geben Sie Ihre E-Mail und der Texttyp wird E-Mail sein und es wird erforderlich sein. Der Name wird auch E-Mail sein. Aber wie können wir hier ein Symbol hinzufügen? Nun, da wir ein Textfeld Elemente verwenden, können wir nicht einfach voran gehen und ein Symbol hinzufügen. Deshalb müssen wir kreativ sein und das, was wir bisher gelernt haben, nutzen , um hier ein Symbol hinzuzufügen. Was ich vorschlage, ist das. Zuerst gehe ich weiter und füge diesem Textfeld weitere linke Polsterung hinzu. Ich werde seine Polsterung auf 70 Pixel ändern, und dann werde ich seine Farbe ändern. Wie Sie hier sehen können, ist die Farbe dieser Textebene neutral dunkel. Erinnern Sie sich, wie wir die CSS-Eigenschaften dieser Platzhalter Steuer ändern können ? Ja, du hast recht. Wir müssen unser Textfeld auswählen, und wenn wir dann zum Selektor gehen, können wir zum Platzhalter Zustand gehen. Von hier aus kann ich einfach die Farbe anpassen. Wie Sie sehen können, sagt es, dass die Textfarbe bereits auf neutral dunkel eingestellt ist, ist es aber nicht. Es ist nur ein lästiger Bug. Wenn ich einfach darauf klicke und ich diese Farbe noch einmal wähle, da gehen wir. Jetzt wurde die Farbe richtig angewendet. Die Farbe ist jetzt in Ordnung, aber wir brauchen ein Symbol. Daher werde ich einen div-Block erstellen, und ich werde dieses Textfeld und einen neuen div-Block darin einfügen , um alles perfekt auszurichten. Zuerst, während dieses Formular ausgewählt ist, werde ich die Befehlstaste oder die Steuerungstaste drücken und nach einem div-Block suchen. Dann werde ich ihm einen Kurs geben. Nennen wir es CTA, Unterstrich, Unterstrich, Textfeld, Unterstrich Wrapper. Dann werde ich dieses Textfeld ziehen und es in diesem CTA_ TextField_Wrapper ablegen, den wir gerade erstellt haben, und ich werde diesen Wrapper nach oben verschieben, einfach im Navigator neu anordnen. Nun, während dieser neue Div-Block, dieser Wrapper ausgewählt ist, werde ich voran gehen und einen neuen Div-Block für unser Symbol hinzufügen. Also lassen Sie uns nach einem Div-Block suchen, großartig, und dieser Div-Block ist in diesem Wrapper. Also lassen Sie mich diesen Div-Block auswählen und ich werde ihm eine Klasse geben. Ich werde TextField_ Icon schreiben, und dieses Symbol sollte eine bestimmte Breite und Höhe haben. Wenn ich also zu meiner Designdatei gehe und dieses „Icon“ auswähle , können Sie sehen, dass seine Breite und Höhe auf 30 Pixel eingestellt sind. Also werde ich ihm die spezifische Breite und Höhe geben. Ich werde 30 Pixel schreiben. Da gehen wir, und wie Sie wissen, müssen wir zum Hintergrundbereich gehen und wir müssen unser Symbol hier hinzufügen. Also lass mich nach dem Mail-Symbol suchen, in Ordnung, nett. Unsere Ikone ist hier. Alles sieht gut aus, außer seiner Position. Wie können wir dieses Symbol hier positionieren? Nun, erinnerst du dich, als wir hier über die Positionseigenschaft gesprochen haben, werde ich die Position dieses Div-Blocks auf absolut setzen, genau so und dann werde ich sein Elternteil auswählen, das ist dieser CTA_TextField_Wrapper und ich bin gehen, um seine Position auf relativ zu setzen. Ok? Jetzt ist die Position dieses Textfeld-Icon-Div-Block relativ zu seinem übergeordneten Element. Wie Sie hier sehen können, haben wir CTA_TextField_Wrapper und ich kann es einfach nach oben links positionieren. Also werde ich die Spitzenposition auf etwa 30 Prozent erhöhen. Wir müssen das nur augapfeln, und dann ändere ich die linke Position auf etwa acht Prozent. Okay, Nett. Ich kann es einfach ein bisschen nach unten bewegen. Ich kann die obere Marge auf, sagen wir, 32 Prozent erhöhen . Alles klar, unser Textfeld ist fast fertig. Aber was ist mit seiner Farbe? Im Moment ist die Hintergrundfarbe standardmäßig weiß, aber unser Textfeld ist nicht weiß. Unser Textfeld verwendet die neutrale Lichtfarbe. Also werde ich dieses Textfeld auswählen und ich werde seine Farbe zu neutralem Licht ändern, und jetzt können wir zum nächsten Teil gehen, der Schaltfläche ist. Es wird so einfach sein, weil wir bereits unseren primären Button für den Heldenbereich und für die Navigation erstellt haben. Also, was ich tun werde, ist wählen Sie diese Schaltfläche hier, und ich werde ihm eine Klasse geben, Primär-Taste. Da gehen wir. Wir haben unsere Wissenschaft, das einzige, was wir tun müssen, ist die Polsterung ein wenig anzupassen. Okay, also zuerst werde ich ihm eine Combo-Klasse geben, auf diese Weise kann ich sicherstellen, dass die Änderungen, die ich hier mache, nicht auf andere Schaltflächen angewendet werden und dann werde ich die Polsterung anpassen. Also lass mich nach oben scrollen. Wie Sie standardmäßig sehen können, hat es eine linke und rechte Polsterung von 30 Pixeln. Werfen wir einen Blick auf unsere Designdatei. Wenn ich diese „Subscribe“ Textebene wähle, können Sie sehen, dass es links und rechts Padding ungefähr 60 Pixel sind. Also werde ich ihm eine 60 Pixel linke und rechte Polsterung geben. Wenn ich die Wahltaste oder die Alt-Taste auf meiner Tastatur gedrückt halte, kann ich einfach die linke und rechte Polsterung gleichzeitig ändern, genau so sehen die obere und untere Polsterung gut aus. Jetzt brauche ich auch noch einen linken Rand. Hier werde ich einen 20 Pixel linken Rand brauchen. Also, während diese Schaltfläche ausgewählt ist, werde ich ihm einen linken Rand von 20 Pixel geben. Alles klar, ich werde dieses „Formular“ auswählen und wie Sie sehen können, nimmt dieses Formular die gesamte Breite seines Elternteils ein , der dieser Formularblock ist. Zuerst werde ich dieses „Formular“ auswählen und ich werde die Begründung in Mitte ändern und dann werde ich diesen „ Formularblock“ auswählen und ich werde ihm eine Klasse geben, Formularblock. Lassen Sie mich die Anzeigeeinstellung auf Flexbox ändern, und ich werde die Ausrichtung in Mitte ändern. Jetzt werde ich meinen „Container“ auswählen, wie Sie sehen können, ist die Anzeigeeinstellung auf Block gesetzt, ich werde es in Flexbox ändern und lassen Sie mich die Richtung auf vertikal ändern. Ich werde die Begründung auch in die Mitte ändern, aber wie Sie sehen können, nimmt es nicht die gesamte Höhe dieses Abschnitts ein. Warum? Weil seine Höhe auf auto eingestellt ist. Daher wird seine Höhe basierend auf der Höhe seiner untergeordneten Elemente bestimmt. Sie nehmen im Inneren nicht so viel Platz ein. Was ich also tun werde, ist, diesen „Container“ auszuwählen und seine Höhe auf 100 Prozent zu setzen. Jetzt nimmt es die gesamte Höhe dieses Abschnitts ein, und dann werde ich die Ausrichtung auch in die Mitte ändern. Ordnung, jetzt wähle ich meine Überschrift aus, und diese Überschrift erfordert einen unteren Rand. Also lassen Sie mich zu meiner Design-Datei gehen. Wenn ich diese Überschrift auswähle, kann ich sehen, dass ich 20 Pixel unteren Rand erhalten muss. Also, während es ausgewählt ist, werde ich den unteren Rand auf 20 Pixel überschreiben, und ich werde dasselbe für diesen Formularblock tun. Wenn ich diesen Formularblock auswähle, sehen Sie, dass ich keinen oberen Rand habe. Ich gehe zu meiner Designdatei und wähle dieses Textfeld aus. Sie können sehen, dass ich einen 50 Pixel oberen Rand bekommen muss. Also werde ich es hier 50 Pixel geben. In Ordnung. Nun lassen Sie mich den Text dieser Schaltfläche von Submit to Subscribe ändern, und da gehen wir. Unsere CTA Sektion ist ebenfalls bereit. Aber jetzt möchte ich, dass Sie auf die anderen Elemente in diesem Formularblock achten, denn abgesehen von diesem Textfeld und Button haben wir zwei weitere Div-Blöcke. Wir haben bereits in unseren vorherigen Videos darüber gesprochen, aber ich möchte sie nur noch einmal erwähnen, falls du sie vergessen hast. Also hier haben wir einen Success Message Div Block, der nicht sichtbar ist. Der Grund dafür ist, dass die Anzeigeeinstellung auf „none“ gesetzt ist. Wir haben auch diese Fehlermeldung. Standardmäßig ist die Anzeigeeinstellung auf „none“ gesetzt und wir können das nicht ändern. Warum? Denn sobald der Benutzer auf diese Schaltfläche „Abonnieren“ klickt, erhält er entweder eine Erfolgsmeldung oder eine Fehlermeldung. Wenn alles gut läuft, gibt es kein Problem mit der Internetverbindung, er oder sie wird die Erfolgsmeldung sehen. Ist dies nicht der Fall, wird die Fehlermeldung angezeigt. Aber können wir einfach das Design dieser Botschaften ändern? Natürlich können wir das. Nun, in diesem Fall müssen wir unseren Formularblock auswählen, dann, wenn ich auf das Einstellungen-Symbol hier klicke, können Sie sehen, dass Status anzeigen. Normal, Erfolg, Fehler. Wenn ich hier zum Erfolg gehe, kann ich anfangen, sein Aussehen zu ändern. Wenn ich zum Fehler gehe, kann ich auch sein Aussehen ändern. Zum Beispiel hier, wenn ich zum Fehler gehe, können Sie sehen, dass die Ausrichtung falsch ist. Also lasst uns weitermachen und das reparieren. Während wir uns im Fehlerzustand befinden, werde ich voran gehen und diesen Formularblock auswählen. Dieser Formularblock enthält diesen Form-Div-Block, die Erfolgsmeldung und die Fehlermeldung und die Layoutrichtung, wie Sie sehen können, ist auf horizontal eingestellt. Wenn wir uns im normalen Zustand befinden, macht es keinen Unterschied, aber wenn wir uns im Fehlerzustand befinden, macht es einen Unterschied. Ich werde die Richtung in vertikal ändern, und jetzt sieht es viel besser aus. Also, wenn ich nur in den normalen Zustand gehe, sieht es gut aus. Wenn ich zum Erfolg gehe, sieht es gut aus, wenn ich zum Fehler gehe, ist das in Ordnung. Natürlich können Sie den Inhalt hier ändern, aber das ist jetzt nicht unser Ziel. Alles klar Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen. Wir sehen uns im nächsten Video. 50. Fußer: In diesem Video werden wir diese Fußzeile am Ende unserer Homepage erstellen. Diese Fußzeile wird auf allen Seiten unserer Website platziert. Wie Sie hier auf der Projektseite sehen können, haben wir auch die Fußzeile, auch auf der Kontaktseite. Wie sollen wir das bauen? Lassen Sie uns analysieren und sehen, wie es strukturiert ist. Wie Sie sehen können, haben wir einen Abschnitt, der die gesamte Breite unseres Berichts aufnehmen wird. Wie üblich, müssen wir einen Abschnitt erstellen und dann innerhalb, werden wir einen Container brauchen. Da gehen wir. In diesem Container werden wir zwei div-Blöcke haben. Eine für den Inhalt auf der linken Seite, der das Logo und die Adresse enthält , und eine für die Links auf der rechten Seite. In der Tat, für die Links, denke ich, es wäre viel besser, ein Gitter zu erstellen , weil wir hier ein zweidimensionales Layout haben. Es wäre viel sinnvoller, ein Gitter für diese Links zu erstellen. Ohne weitere Umschweife, lasst uns anfangen. Zuerst werde ich meinen Körper auswählen und ich gehe auf Befehl K oder Control K. Lassen Sie uns nach Abschnitt suchen. Dann werde ich diesem Abschnitt eine Klasse wie gewohnt geben. Schön und wir können nichts sehen, weil da nichts drin ist. Dann suchen wir, während dieser Abschnitt ausgewählt ist, nach einem div-Block. Ich werde einen div-Block innen hinzufügen. Geben wir ihm die Container-Klasse, weil es unser Container sein wird. Schön. Unser Abschnitt ist fertig, unser Container ist fertig und während dieser Container ausgewählt ist, werde ich ihm auch die Fußzeilenkombinationsklasse geben. Da gehen wir. Wie ich bereits erwähnt habe, werden wir für diese Fußzeile einen Div-Block auf der linken Seite und ein Raster auf der rechten Seite erstellen. Insgesamt werden wir zwei Div-Blöcke Kugeln erstellen. Während dieser Container ausgewählt ist, lassen Sie uns nach div Block suchen. Ich werde einen weiteren div-Block hinzufügen, also stellen Sie sicher, dass Ihr Container ausgewählt ist. Dann können Sie mit der Schnellsuche einen div-Block hinzufügen. Da gehen wir. Jetzt haben wir zwei div-Blöcke. Ich werde die oberste auswählen und ich werde ihm eine Klasse geben. Lassen Sie uns Footer__Inhalt schreiben. Ich wähle die zweite aus und ich werde ihm eine Klasse geben. Lassen Sie uns Footer__Links schreiben. Cool. Dann werde ich diesen Container auswählen und ich werde die Anzeigeeinstellung von Block zu Flexbox ändern, warum? Weil ich diese beiden Div-Blöcke horizontal und nicht vertikal ausrichten werde. Daher werde ich es in Flexbox ändern. Da gehen wir. Die Richtung wird auf horizontal eingestellt. Das einzige, was ich hier tun muss, ist, die Rechtfertigung in Abstand zwischen zu ändern, genau so, weil wir möchten, dass diese div-Blöcke die Kanten dieses Containers berühren. Werfen wir einen Blick auf unsere Designdatei. Wenn ich diese Gruppe hier auf der linken Seite auswähle, können Sie sehen, dass dieses Inhaltsfeld, dieser div-Block, eine bestimmte Breite von 260 Pixeln haben wird. Was ich tun werde, ist diesen speziellen div Block Fußzeileninhalt auszuwählen, und ich werde ihm eine maximale Breite von 260 Pixeln geben. Dann werde ich einen weiteren div-Block für unser Logo und einen Textblock für die Adresse hinzufügen . Während es ausgewählt ist, lassen Sie uns Befehl K oder Control K drücken und nach div Block suchen. Ich werde diesem Div-Block eine Klasse geben. Lassen Sie uns Footer__Content__Logo schreiben. Wenn ich dann zum Hintergrundbereich hier gehe, kann ich ein Bild hinzufügen. Aus den Vermögenswerten werde ich dieses Kreis-Logo wählen und ich werde die Größe ändern, um zu enthalten. Lassen Sie mich das neu positionieren, um zu zentrieren und nicht zu kacheln. Lassen Sie mich einen Blick auf mein Design werfen. Wenn ich dieses Logo auswähle, beträgt seine Breite ungefähr 100 Pixel und seine Höhe beträgt 30 Pixel. Während dieser Fußzeileninhalt Logo-div-Block ausgewählt ist, werde ich eine bestimmte Breite, 100 Pixel, und seine Höhe wird 30 Pixel sein, aber was ist mit der Adresse? Ich werde diesen Fußzeileninhalt-div-Block auswählen und ich werde hier nur so einen Textblock hinzufügen. Dann muss ich ihm einen Kurs geben. Nennen wir es Footer__Content__Address. Lassen Sie uns voran gehen und einige seiner Typografie-Eigenschaften ändern. Das Gewicht sieht gut aus. Ich werde die Größe auf 17 Pixel ändern. Dann werde ich die Farbe auf neutrales Medium und die Zeilenhöhe auf 150 Prozent ändern. Schließlich werde ich diese Adresse kopieren und sie hier einfügen. Mal sehen, was wir hier haben. Wenn ich diesen Fußzeileninhalt auswähle, können Sie sehen, dass die Anzeigeeinstellung auf Blockierung eingestellt ist und jetzt gut aussieht. Aber später, wenn wir unsere Website reaktionsfähig machen wollen, wäre es problematisch, weil wir zum Beispiel im mobilen Portrait oder mobilen Querformat im mobilen Portrait oder mobilen Querformatdie Ausrichtung dieser beiden Elemente hier ändern müssen. Daher werde ich es jetzt in Flexbox ändern und ich werde die Richtung in vertikal ändern. Ich werde dieses Logo auswählen und wir müssen ihm einen unteren Rand geben. Lassen Sie mich dieses Logo hier auswählen und sein unterer Rand wird 30 Pixel betragen. Daher werde ich hier einen 30 Pixel unteren Rand geben. Schön. Unsere Fußzeileninhalte sind fertig. Jetzt ist es an der Zeit, mit dem nächsten Teil fortzufahren, der Fußzeilenlinks ist. Wenn ich diese Fußzeilenlinks auswähle und auf Befehl K oder Control K klicke, kann ich nach Textlink suchen. Dann kann ich ihm eine Klasse geben. Lassen Sie uns Footer__Link schreiben und ich werde seine Typografie-Eigenschaften ändern. Zunächst einmal möchte ich die Schriftgröße auf 17 Pixel erhöhen und seine Farbe wird neutrales Medium sein. Schließlich werde ich die Deklaration auf keine setzen. Das ist im Grunde unser Styling hier. Dann werde ich voran gehen und diesen Text hier kopieren. Der erste wird Team sein. Schön. Jetzt werde ich es fünf Mal duplizieren, um sechs verschiedene Links zu bekommen. Ich kann es einfach kopieren, Befehl C oder Control C und es fünfmal mit Befehl V oder Control V einfügen , genau so. Ich habe hier sechs verschiedene Links. Jetzt gehe ich einfach voran und kopiere und füge diese Namen eins nach dem anderen ein. Unsere sechs Links sind fertig. Da die Anzeigeeinstellung dieser Fußzeilenverknüpfungen jedoch auf Blockierung eingestellt ist, können Sie sehen, dass sie nebeneinander sitzen und das ist nicht das, was wir wollen. Wie ich bereits erwähnt habe, werden wir es in ein Raster ändern. Lasst uns ins Netz gehen. Wir werden drei Spalten und zwei Reihen haben. Daher werde ich hier eine weitere Spalte hinzufügen. Schön. Ich werde „Fertig“ treffen. Unser Raster ist auch bereit. Wie Sie sehen können, haben wir jedoch keinen unteren Rand. Jetzt berührt unser Container den unteren Rand unseres Bildschirms. Es ist nicht das, was wir wollen. Lassen Sie uns voran gehen und wählen Sie diesen Container hier in unserer Entwurfsdatei. Ich werde den unteren Rand überprüfen. Es ist auf 100 Pixel eingestellt. Was sollen wir tun? Wenn ich voran gehe und diesen Container auswähle und versuche , einige untere Ränder hinzuzufügen, funktioniert es nicht. Daher werde ich unseren Abschnitt auswählen und stattdessen werde ich ihm eine untere Polsterung geben. Hier werde ich die untere Polsterung auf 100 Pixel setzen. Da gehen wir. Wir haben, was wir wollten, aber sieh mal, was passiert. Wie Sie sehen können, wurde das Padding dieses Abschnitts ebenfalls geändert, sobald ich etwas Padding zu diesem Abschnitt hinzugefügt habe. Warum ist das so? Der Grund dafür ist, dass wir diesem Abschnitt keine Kombinationsklasse hinzugefügt haben. Wie Sie sehen können, haben wir keine Combo-Klasse und diese untere Polsterung wurde zu allen Abschnitten hinzugefügt. Alle Abschnitte haben diese zusätzliche Bodenpolsterung und es ist nicht das, was wir wollen. Wie können wir das in Ordnung bringen? Nun, ich werde Befehl Z oder Control Z drücken, um dieses Padding zu entfernen, während dieser Abschnitt ausgewählt ist, während unser Fußzeilenabschnitt ausgewählt ist, werde ich ihm eine Combo-Klasse geben, die Fußzeile genannt wird. Jetzt kann ich einfach diese zusätzliche Polsterung hinzufügen, ohne andere Abschnitte zu beeinflussen. Ich werde es auf 100 Pixel setzen. Da gehen wir. Jetzt sieht es toll aus. Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und wir sehen uns im nächsten. 51. CMS und dynamische Inhalte: Hey, in diesem Video werden wir über CMS und Dynamic Content sprechen. Wenn es um Web-Entwicklung geht, haben wir zwei Arten von Webseiten, wir haben statische und dynamische Seiten. Was ist der Unterschied zwischen den statischen und dynamischen Seiten? Nun, statisch bedeutet fest, und dynamisch bedeutet etwas, das funktioneller ist und ändert sich basierend auf der Aktion des Benutzers. Wenn Sie sich erinnern, habe ich Ihnen bereits gesagt, dass wir zwei statische Seiten und eine dynamische Seite für diese Projekte erstellen werden. Lassen Sie mich Ihnen sagen, was es bedeutet. Hier ist unsere Homepage und wir haben alle Elemente in Webflow erstellt. Aber das ist gerade eine statische Seite. Warum? Weil sich der Inhalt dieser Seite nicht häufig ändern wird. Das Bild wird korrigiert. Diese Logos werden fixiert. Dieses Zeugnis wird behoben werden und so weiter, deshalb ist es eine statische Seite. Manchmal müssen Sie jedoch einige dynamische Seiten erstellen. Nun, lassen Sie mich Ihnen ein gutes Beispiel geben. Nehmen wir an, Sie möchten einen Blog erstellen. Für einen Blog haben Sie normalerweise Hunderte oder Tausende von verschiedenen Blogbeiträgen. Daher müssen Sie dynamische Seiten erstellen. Nun, dynamische Seiten haben dynamischen Inhalt, das bedeutet, dass wir die Seite einmal erstellen können, und dann können wir einfach den Inhalt immer wieder ändern, abhängig von den Aktionen des Benutzers. Für einen Blog können wir eine Blog-Beitrag-Seite einmal mit einem bestimmten Layout erstellen und dann einfach den Inhalt immer wieder ändern, deshalb müssen wir ein CMS verwenden. In diesem Projekt werden wir eine dynamische Seite für unsere Projekte erstellen. Wie Sie hier auf unserer Homepage sehen können, haben wir drei verschiedene Projekte und es heißt aktuelle Projekte. Aber was ist, wenn diese Agentur in Zukunft weitere Projekte kreiert und sie hier präsentieren möchte, sollte sie Sie als Webentwickler oder Webdesigner kontaktieren und Sie bitten, den Inhalt zu modifizieren? Nun, die Antwort ist nein, denn das ist kein effizienter Weg. In diesem Fall können Sie eine dynamische Seite erstellen, wie Sie hier sehen können, haben wir diese Projektseite und es zeigt die Details zu jedem Projekt. Wir haben den Untertitel, wir haben den Titel, wir haben das Fertigstellungsdatum. Wir haben einige Informationen über das Projekt, und dann haben wir diese anderen Projekte Abschnitt. Es könnte sehr schwierig sein, einige statische Seiten zu erstellen , wenn Sie den Inhalt häufig ändern möchten. Wann sollten Sie eine statische Seite verwenden und wann sollten Sie eine dynamische Seite verwenden? Nun, wenn Sie nur eine Zielseite mit einigen Informationen oder Inhalten erstellen möchten, können Sie statische Seiten verwenden, weil sie viel einfacher zu erstellen sind und sie nicht zeitaufwendig sind. Wenn Sie oder Ihr Kunde den Inhalt jedoch häufig ändern möchten, oder sagen wir, einige neue Inhalte zur Website hinzufügen möchten, ist es besser, dynamische Seiten zu erstellen. Hier für dieses Projekt werden wir eine dynamische Seite erstellen. Wie Sie hier sehen können, werden die Projektseite und diese Projekte dynamisch geändert. Wenn der Kunde später noch ein Projekt hinzufügen möchte, wird das Projekt automatisch zu diesen letzten Projekten hinzugefügt. Sie müssen dafür nicht manuell eine separate Projektseite erstellen, da wir einmal eine Projektseite erstellen und wenn der Kunde weitere Inhalte hinzufügt, wird der Inhalt dieser Seite entsprechend geändert. Was brauchen wir, um dynamische Seiten zu erstellen? Nun, um dynamische Seiten zu erstellen, benötigen wir dynamische Inhalte und wir müssen unsere Inhalte irgendwo speichern. Wie können wir das tun? Nun, wir können Workflow, CMS verwenden. Lassen Sie mich zu Workflow gehen, und wenn ich zum CMS Abschnitt hier gehe, können wir eine CMS Sammlung erstellen. Wofür steht CMS? CMS steht für Content Management System und ermöglicht es Ihnen, Inhalte zu speichern, dann kann Ihre Website immer wieder auf diese Inhalte verweisen. Sobald Sie einige Änderungen an diesen Inhalten vorgenommen haben, werden alle dynamischen Seiten sofort aktualisiert. Es ist so vorteilhaft, CMS-Sammlungen zu verwenden, wenn Sie den Inhalt häufig aktualisieren möchten. Das erste, was wir tun müssen, ist eine CMS-Kollektion zu erstellen. Um das zu tun, müssen Sie auf dieses blaue Symbol in der oberen rechten Ecke klicken, da gehen wir. Hier können wir eine neue Kollektion erstellen. Auf den ersten Blick mag es kompliziert erscheinen, aber keine Sorge, es ist sehr einfach. Ganz oben haben wir einige Sammlungsvorlagen. Wir haben Blogbeiträge, Autoren , Kategorien, Projekte, Kunden usw. Aber wir werden eine Sammlung von Grund auf neu erstellen, weil ich werde Ihnen zeigen , wie Sie eine Sammlung Schritt für Schritt erstellen können. Eine Sammlung ermöglicht es uns, eine Struktur für unsere Inhalte zu erstellen. Wenn wir einige Projekte haben, sagen wir hier, jedes Projekt hat einige Inhalte. Wir haben ein Bild, wir haben den Namen dieses Projekts, wir haben den Untertitel. Dann auf der Projektseite hier haben wir das Fertigstellungsdatum und wir haben diese Informationen hier. Das werden unsere Sammlungsfelder sein. Jede Sammlung hat einige Felder, aber zuerst benötigen wir einen Sammlungsnamen. Nennen wir es Projekte, weil wir hier eine Verbindung für unsere Projekte schaffen werden. Webflow erstellt automatisch diese Sammlungs-URL für uns. Das musst du dir vorerst keine Sorgen machen. Wir werden später darüber reden. Wie Sie sehen können, heißt es Projektseite. Sobald Sie eine Sammlung erstellt haben, erstellt Webflow automatisch eine separate Seite für Ihre Sammlung, eine Seite für unser Projekt hier. Lassen Sie uns zu den Sammlungsfeldern gehen, hier ist, wo wir einige Felder hinzufügen müssen. Was brauchen wir für unser Projekt? Nun, offensichtlich hat jedes Projekt einen Namen, und denken Sie daran, dass jedes Feld einen bestimmten Typ hat, wie Sie hier sehen können, es heißt Klartext, das liegt daran, dass wir einen Namen haben. Dann haben wir die Slug, das ist nur die URL, die Webflow automatisch für uns erstellt, also müssen wir das nicht ändern. Dann können wir einige benutzerdefinierte Felder hinzufügen, wenn ich hier auf dieses Add New Field klicke, hier haben wir verschiedene Typen, wir haben einfache Texte. Sobald ich den Mauszeiger über diese Feldtypen führe, können Sie auf der rechten Seite sehen, erhalten wir einige Informationen. Sie können voran gehen und sie einzeln lesen, wenn Sie mehr über sie erfahren möchten. Aber lass mich voran gehen und sie dir schnell erklären. Nun, der Klartext ist nur ein einfacher Text oder einfacher Textinhalt. Dann haben wir Rich-Text, na ja, der Rich-Text ist für langformatige Inhalte. Angenommen, Sie möchten einen Absatz, dann eine Überschrift, dann ein Video oder ein Bild haben , in diesem Fall können Sie einen Rich-Text verwenden. Dann haben wir das Bild. Nun, das können Sie für ein Bild verwenden. Dann haben wir Multi-Image, wenn Sie mehr Bilder haben, können Sie dieses Multi-Image verwenden. Dann haben wir Video-Link, Link, E-Mail, Telefonnummer, Datum, Schalter, Farbe, Option, Datei und Referenz und Multi-Referenz. Diese beiden letzten Optionen sind fortgeschritten. Wir werden jetzt nicht über sie sprechen, aber im Moment müssen wir nur voran gehen und unsere benutzerdefinierten Felder mit diesen einfachen Typen erstellen. Wir haben den Namen hier. Was brauchen wir noch? Lassen Sie mich voran gehen und schauen Sie sich meine Designdatei hier an. Hier haben wir ein Bild, also brauchen wir natürlich ein Bild. Gehen wir voran und wählen Bild. Dann brauchen wir ein Etikett. Ich werde Project Image schreiben. Wir können hier einen Hilfetext hinzufügen oder nicht. Wenn wir diesen Hilfetext später hinzufügen ein Mitarbeiter den Inhalt ändern möchte, weiß er oder sie, worum es in diesem Feld geht, aber machen Sie sich jetzt keine Sorgen. Dann können wir dieses Kontrollkästchen aktivieren, es besagt, dass dieses Feld erforderlich ist. Ich werde das überprüfen, weil wir kein Projekt ohne ein Projektbild erstellen können, also werde ich es überprüfen, dann Feld speichern, da gehen wir. Unser Projektbild ist fertig. Was wäre das nächste Feld? Lassen Sie mich voran und überprüfen Sie es. Hier haben wir diesen Untertitel und es wird unser Projekttyp sein. Wenn ich hier auf die Projektseite gehe, können Sie sehen, dass wir direkt unter dem Projektnamen den Projekttyp, UI-Design und App-Entwicklung haben . Daher werde ich hier voran gehen und ein neues Feld hinzufügen. Dieses neue Feld wird Option sein, weil ich einige Optionen erstellen werde und später, wenn ich einige Sammlungselemente erstellen möchte, kann ich aus diesen Optionen wählen. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Diese Designagentur hat einige spezifische Dienstleistungen. Zum Beispiel, UI-Design und App-Entwicklung, Web-Entwicklung, User Experience Design. Wir wissen bereits über die Dienste, deshalb können wir einige Standardoptionen erstellen Wenn wir dann einige Projekte erstellen oder sagen wir einige Sammlungselemente, können wir einfach aus diesen Optionen wählen. Lassen Sie mich voran gehen und wählen Sie Option hier. Dann werde ich ihm ein Etikett geben, schreiben wir, Projekttyp. Hier, mit diesem grünen Knopf, kann ich einige Optionen hinzufügen. Lassen Sie mich hier einige Optionen hinzufügen. Ich werde UI-Design und App-Entwicklung schreiben, ich werde die Eingabetaste drücken, um zu speichern. Dann werde ich eine andere Option erstellen. Lassen Sie uns Web-Entwicklung schreiben. Ich werde die Eingabetaste drücken, ich werde eine weitere Option hinzufügen. Lassen Sie uns User Experience Design schreiben. Drücken Sie „Enter“. Der nächste wird UI-Design sein, und der nächste wird nur die App-Entwicklung sein. Der letzte wird UI-UX-Design sein. In Ordnung, unsere Optionen sind fertig. Dieses Feld ist auch erforderlich, da ein Sammlungselement nicht erstellt werden kann , ohne den Projekttyp auszuwählen Daher ist es erforderlich. Ich werde „Save Field“ drücken. Wir brauchen noch zwei Felder. Wir brauchen das Datum der Fertigstellung. Wie Sie hier auf der Projektseite sehen können, haben wir dieses Fertigstellungsdatum. Lassen Sie mich voran und erstellen Sie ein neues Feld und dieses Mal werde ich Datum und Uhrzeit wählen. Ich werde das Abschlussdatum schreiben, und hier haben wir zwei Checkboxen. Der erste sagt Include Time Picker. Ich werde das überprüfen. Wie Sie sehen können, kann ich beim Erstellen dieser Felder auf der rechten Seite eine Vorschau meiner benutzerdefinierten Felder anzeigen. Hier habe ich Projektbild, ich habe Projekttyp, und ich habe Abschlussdatum und es wird erforderlich sein. Dann werde ich „Save Field“ drücken. guter Letzt Zuguter Letztwerde ich hier ein Feld für das Projektdetail für diese Absätze erstellen. Lassen Sie mich weitermachen und ein neues Feld erstellen. Dieses Mal werde ich einen Rich-Text wählen. Warum? Denn später kann der Kunde leicht einige Bilder oder Videos ohne meine Hilfe hinzufügen. Es wird so nützlich sein. Ich wähle „Rich-Text“ und lasse mich es Projektdetails nennen. Hier können wir einige minimale Zeichenanzahl oder maximale Zeichenanzahl angeben. Es ist optional. Ich werde es verlassen. Ich werde dieses Kontrollkästchen aktivieren und „Feld speichern“ drücken. Unsere Felder sind fertig. Wir haben den Namen, wir haben die Slug. Dies sind die grundlegenden Informationen und dann haben wir einige benutzerdefinierte Felder. Wir haben Projektbild, Projekttyp, Fertigstellungsdatum, Projektdetails. Sobald wir unsere Felder hinzugefügt haben, können wir auf der rechten Seite eine Vorschau unserer Felder anzeigen. Hier haben wir Name, Slug, das sind die grundlegenden Informationen. Dann haben wir benutzerdefinierte Felder, Projekt-Bild, Projekttyp. Wir haben Fertigstellungsdatum und Projektdetails. Wenn alles gut aussieht, können Sie die Schaltfläche „Sammlung erstellen“ drücken und dort gehen wir. Wir haben erfolgreich unsere CMS-Kollektion erstellt und auf der linken Seite sehen Sie es Projects. Dies ist unsere CMS-Kollektion. Wenn ich auf diese Projekte klicke, auf der rechten Seite, kann ich einige Sammlungselemente erstellen. So funktioniert das CMS. So können wir eine Struktur für unsere Inhalte erstellen. Wir erstellen einige Sammlungen mit einigen benutzerdefinierten Feldern, dann erstellen wir einige Elemente für diese bestimmte Sammlung. Später können wir diese Kollektionen und Artikel einfach in unserem Projekt und Design rund um unsere dynamischen Inhalte verwenden , sagen wir. Hier haben wir verschiedene Möglichkeiten. Wir können entweder einige Dummy-Artikel hinzufügen. Wenn ich auf „Fünf Elemente hinzufügen“ klicke, erstellt Webflow einige zufällige Elemente mit zufälligen Inhalten für mich. Es ist eine gute Option, besonders wenn Sie den Inhalt nicht haben oder der Inhalt noch nicht bereit ist. Da wir jedoch den Inhalt haben, werde ich voran gehen und die Schaltfläche „Neues Projekt“ hier drücken. Warum sagt es neues Projekt? Woher weiß er, dass dies ein Projekt sein wird? Weil wir unsere Sammlung Projekte benannt und Webflow verwendet automatisch diesen Namen und machen es hier einzigartig, und es heißt Neues Projekt. Wenn ich eine neue Sammlung erstelle und ich sie als Mitglieder bezeichne, hier sehen Sie ein neues Mitglied. Ich werde „Neues Projekt“ treffen und da gehen wir. Wir haben unsere Felder hier. Zuerst müssen wir den Namen angeben. Ich werde Simplify schreiben. Dies ist unser erstes fiktives Projekt, und wie Sie sehen können, wurde diese Schnecke automatisch erstellt. Dann müssen wir hier unser Projektbild hochladen. Wenn ich darauf klicke, kann ich das Bild von meinem Computer auswählen. Ich werde das erste Bild wählen. Diese Bilder befinden sich im Ordner des Assets, den Sie zuvor heruntergeladen haben. Jetzt werde ich den Projekttyp mit diesen Optionen auswählen. Wie Sie sehen können, sind dies die Optionen, die wir bereits erstellt haben. Ich werde „UI-Design & App-Entwicklung“ wählen, und dann brauche ich ein Fertigstellungsdatum. Hier mit dieser Datumsauswahl kann ich einfach mein Datum und meine Uhrzeit auswählen. Lassen Sie mich voran gehen und ein bestimmtes Datum wählen. Ich werde den 1. Juni wählen und Sie müssen auch die Zeit angeben, aber ich werde es verlassen, da es mir eine Standardzeit geben wird. Es ist nicht wichtig, das werden wir nicht zeigen. Aber wenn Sie diese Zeit anzeigen möchten, können Sie sie auch hier angeben. Dann werde ich hier nur etwas Dummy-Text hinzufügen. Ich habe bereits einen Text vorbereitet. Ich gehe einfach weiter und kopiere es und füge es ein. Sie können diesen Text auch hier aus der Entwurfsdatei verwenden. Sie können es einfach kopieren und einfügen und hier steht es vereinfachen als bla, bla, bla. Auf diese Weise kann ich sicherstellen, dass diese Absätze mit diesen Projekten zusammenhängen. Lassen Sie mich nun die Schaltfläche „Erstellen“ drücken. Unsere erste Sammlung Artikel ist fertig und es steht für die Veröffentlichung inszeniert. Es ist noch nicht veröffentlicht, weil wir das vorher nicht benutzt haben. Aber jetzt werde ich voran gehen und fünf weitere Sammlungselemente erstellen. Ich werde fünf weitere Projekte erstellen. Wenn Sie so viele verschiedene Projekte erstellen müssen, können Sie auch die Importoption verwenden. Wenn ich hier auf diesen Import-Button klicke, kann ich eine CSV-Datei hierher ziehen und dann erstellt Webflow alle Elemente automatisch für mich. Aber ich werde voran gehen und diese Projekte manuell erstellen. Lassen Sie mich weitermachen und dieses neue Projekt erstellen. Ich werde es Dashcoin nennen. Lassen Sie mich für das Bild das Bild aus meinem Projektabschnittsordner auswählen, das zweite, und dann wird der Projekttyp Web-Entwicklung sein. Jetzt werde ich das Abschlussdatum zu etwas anderem angeben. Lassen Sie mich den 17. Juni wählen und hier werde ich die Details hinzufügen. Lassen Sie mich einfach die vorherigen Texte hier einfügen und ändern Sie einfach das erste Wort, das wir erkennen konnten, dass dieses Detail mit diesem Projekt zusammenhängt. Ich werde diesen Dashcoin-Namen kopieren und ich werde ihn hier anstelle von Vereinfachung einfügen. Lassen Sie mich dieses Projektdetail kopieren, weil wir das brauchen werden. Ich werde es erstellen und ich werde den gleichen Prozess noch vier Mal wiederholen. Sie können diesen Teil überspringen oder Sie können einfach voran gehen und diese Projekte eins nach dem anderen mit mir erstellen. Nennen wir das dritte Projekt Vectorify. Dann brauche ich ein Bild, das dritte Bild und der Projekttyp wird User Experience Design sein. Das Fertigstellungsdatum wird etwas anderes sein, lassen Sie mich den 23. Juni wählen. Schön. Ich brauche Projektdetails. Ich füge das vorherige Projektdetail ein. Lassen Sie mich einfach das erste Wort hier ändern, einfach so. Lassen Sie mich das kreieren. Ich werde weitermachen und drei weitere Projekte erstellen. Dieser wird Orbit genannt, und ein Projekt-Bild wird das vierte sein. Der Projekttyp wird UI-Design und ein Fertigstellungsdatum sein. Lassen Sie mich es auf etwas anderes setzen, vielleicht den 1. Juli, und ich werde Projektdetails benötigen, also lassen Sie es mich hier einfügen und ich werde das erste Wort in Orbit ändern. Schön. Das werde ich erschaffen. Dann werde ich zwei weitere Projekte erstellen. Es wird Purify heißen. Lassen Sie mich sein Bild wählen. Es wird das fünfte Bild sein. Der Projekttyp wird UI-UX-Design und das Abschlussdatum sein, das ich am 5. Juli wählen werde. Die Details werden die gleichen sein. Lassen Sie mich das erste Wort in Purify ändern. Schön, schafft es. guter Letzt werde ich voran gehen und das letzte Projekt erstellen, das CryptoPie genannt wird. Lassen Sie mich das Projektbild auswählen. Es wird das letzte Bild sein. Der Projekttyp wird App-Entwicklung sein. Das Abschlussdatum wird sagen wir 9. Juli und die Details hier, ich werde das erste Wort zu Crypto Pie ändern . Schön. Unsere Kollektionsartikel sind alle bereit und wir können sie benutzen. Wie können wir unsere Kollektion in unseren Kollektionen verwenden? Nun, wir können eine Sammlungsliste und die Sammlungsseite verwenden , die der Webflow automatisch für uns erstellt hat. Sobald wir diese Sammlung erstellt haben, Webflow eine spezifische Seite für unser Projekt erstellt. Wenn ich zu den Seiten hier gehe, können Sie sehen, dass wir eine statische Seite haben, die heißt Home. Dann haben wir zwei Utility-Seiten, diese werden standardmäßig erstellt. Wenn Sie zu den CMS Sammlungsseiten gehen, können Sie sehen, dass Webflow die Vorlage dieses Projekts für uns erstellt hat. Wenn ich darauf klicke, ist nichts da und es ist in Ordnung, weil wir das nicht entworfen haben. Was sollen wir hier machen? Nun, wir müssen unsere Projektseite hier gestalten. Da diese Projektseite eine dynamische Seite sein wird, müssen wir sie hier in der Vorlage dieses Projekts entwerfen , und dann wird der Inhalt dieser Seite für jedes Sammlungselement geändert werden. Wie Sie oben sehen können, haben wir diese Option, wenn ich darauf klicke, können Sie sehen, dass wir alle unsere Artikel haben, aber das wird das Thema unserer nächsten Lektion sein. Moment werde ich Ihnen zeigen, wie Sie eine Sammlungsliste verwenden können. Lassen Sie mich zu den Seiten gehen und ich gehe zur Homepage. Wenn ich hier nach unten scrolle, wie ich bereits erwähnt habe, ist diese Seite statisch und diese Inhalte sind ebenfalls statisch, aber jetzt ist es an der Zeit, sie durch dynamischen Inhalt zu ersetzen. Wie können wir das tun? Wie ich bereits erwähnt habe, brauchen wir eine Sammlungsliste. Lassen Sie mich diesen Abschnitt hier im Navigator öffnen und dann haben wir diesen Container und innen haben wir diese Projekte Wrapper und Projekte Überschrift. Ich gehe zum Abschnitt Hinzufügen, und wenn ich rechts unter dem CMS-Abschnitt scrollen, haben wir diese Sammlungsliste. Wenn ich es in diesem Abschnitt direkt hier ziehen und ablegen, können wir sehen, dass wir diesen Sammlungslisten-Wrapper erhalten, standardmäßig hat es drei verschiedene Elemente, und es sagt Doppelklick, um eine Verbindung zu einer Sammlung herzustellen. Jetzt müssen wir diesen Sammlungslisten-Wrapper mit der Sammlung verbinden , die wir gerade mit der Sammlung des Projekts erstellt haben. Wenn Sie einfach darauf doppelklicken, erhalten Sie hier Zugriff auf diese Sammlungslisteneinstellungen, und aus der Quelle können Sie Projekte auswählen. Da gehen wir. Sobald ich diese Sammlung Listen Wrapper mit meiner Sammlung verbunden, können Sie sehen, dass die Anzahl der Elemente hier erhöht und jetzt haben wir den Namen unserer Artikel, wir haben den Namen unserer Projekte hier, CryptoPie, Reinigen, Orbit, Vektorify, Dashcoin und Vereinfachen. Es bedeutet, dass alles perfekt funktioniert. Was sollen wir jetzt tun? Wenn ich diesen Sammlungslisten-Wrapper im Navigator öffne, können Sie sehen, dass wir zwei verschiedene Elemente haben. Wir haben die Sammlungsliste, und wir haben den leeren Zustand. Wir müssen jetzt nicht über den leeren Zustand sprechen, was wir brauchen, ist einfach voran und öffnen Sie diese Sammlungsliste und im Inneren haben wir dieses Sammlungselement. Unsere Karten sollten in diesem Sammlungsgegenstand platziert werden, immer sollte Ihr Inhalt innerhalb des Sammlungsgegenstandes platziert werden, nicht in der Sammlungsliste. Die Sammlungsliste ist nur dieser Wrapper. Was sollen wir jetzt tun? Nun, es ist sehr einfach. Ich gehe voran und wähle die erste Karte, diese Projektkarte. Ich werde es im Navigator ziehen und ich werde es innerhalb des Sammlungselements ablegen. Es ist sehr wichtig. Achten Sie auf die Hierarchie Ihrer Elemente. Es sollte genau so innerhalb des Auflistungselements verschachtelt sein. Sobald ich diesen Artikel in dieser Sammlungsliste abgelegt habe, können Sie sehen, dass hier sechs verschiedene Projektkarten erstellt wurden, nicht eine. Warum? Weil der Sammlungslisten-Wrapper weiß, wie viele Projekte wir haben. Was ist mit diesen Projektkarten? Wir brauchen sie nicht. Ich werde diese Projektkarte auswählen, ich werde Rücktaste oder Löschen drücken, um sie zu entfernen, und ich werde dasselbe für diese tun. Was ist mit diesen Projekten Wrapper? Im Moment sind diese Projekte vertikal übereinander gestapelt. Die gute Nachricht ist, dass die Sammlungsliste auch eine Anzeigeeinstellung hat. Wenn ich vorangehe und die Anzeigeeinstellung von Block zu Raster ändere, erhalten wir genau das, was wir brauchen. Lassen Sie mich voran und geben Sie es zuerst eine Klasse, ich werde Collection List schreiben. Da gehen wir und ich werde die Anzeigeeinstellung auf Raster ändern. Jetzt habe ich zwei Spalten und zwei Zeilen. Ich werde eine dieser Zeilen entfernen, und ich werde hier eine weitere Spalte hinzufügen. Schön. Dann werde ich die Lücke auf 40 Pixel ändern und ich werde Done drücken. Es sieht jetzt nicht aus, aber gebar mit mir, ich werde dir zeigen, wie wir das in Ordnung bringen können. Zunächst einmal ist der Inhalt all dieser Karten der gleiche und wir müssen das beheben. Was sollen wir tun? Nun, wir müssen unsere Elemente wie Bild, Titel, Projektbeschreibung und diesen Link mit den Feldern verbinden , die wir für unsere Sammlung erstellt haben. Es ist sehr einfach. Wenn ich hier nur auf dieses Bild klicke, und wenn ich hier auf dieses Einstellungssymbol klicke, heißt es, wird von Projekten abgebildet. Wenn ich dieses Kontrollkästchen ankreuze und dann ein Feldprojektbild auswählen kann, wird Ihnen automatisch das entsprechende Feld angezeigt. Da ich hier ein Bild ausgewählt habe, zeigt es mir nicht alle Felder an, also haben wir nur ein Bildfeld, Project Image, ich werde es auswählen. Da gehen wir. Jetzt sind die Bilder anders. Was ist mit dem Titel? Wir machen das Gleiche hier. Ich werde den Titel auswählen. Ich klicke auf das Einstellungen-Symbol und lasse mich überprüfen Texte aus Projekten abrufen, und aus dem Drop-Menü wähle ich Name einfach so aus. Jetzt haben wir CryptoPie, Purify, Orbits usw. Jetzt lassen Sie mich dasselbe für die Projektbeschreibung tun. Sobald ich es ausgewählt habe, werde ich das Einstellungssymbol drücken und ich werde Text aus Projekten abrufen überprüfen. Hier werde ich Projekttyp wählen, nett. Letzt Zu guterLetztwerde ich diesen Link Button auswählen, und ich werde die URL von Projekten abrufen überprüfen, aber warten Sie, wir haben keine URL für unsere Projekte erstellt. Ja, Sie haben Recht, aber Webflow hat das automatisch gemacht. Erinnerst du dich, als wir über Schnecke gesprochen haben? Das ist genau die URL, die wir suchen. Was soll hier passieren? Wenn der Benutzer auf diesen Link klickt, sollte der Benutzer zu dieser CryptoPie Projektseite weitergeleitet werden. Deshalb gehe ich hier zur Sammlungsseite, und von hier aus werde ich Aktuelles Projekt wählen. Das ist es, was wir hier tun müssen. Wir können dieses Kontrollkästchen aktivieren, öffnen Sie in einer neuen Registerkarte. Ich werde das nicht tun und es gibt nichts anderes, was wir tun müssen. Jetzt verwenden unsere Karten dynamische Inhalte und wenn wir Änderungen an unseren CMS-Kollektionselementen vornehmen, werden die Änderungen automatisch auf all diese Karten angewendet. Das ist erstaunlich, aber hier haben wir sechs verschiedene Karten. Wir können unsere Artikel filtern. Wie? Wenn ich meinen Sammlungslisten-Wrapper auswähle und wenn ich zu den Elementeinstellungen gehe, , hier verschiedene Optionen, wir haben Filter, Sortierreihenfolge, Anzeigegrenzen. Lassen Sie uns zu den Anzeigegrenzen gehen. Hier werde ich Limit Items überprüfen. Dann kann ich hier die Anzahl der Elemente angeben, die ich hier anzeigen werde. Schreiben wir drei. Jetzt haben wir drei Artikel, aber hier haben wir CryptoPie, Purify, Orbits, aber in unserem Design haben wir Simplify, Dashcoin, Vectorify. Jetzt können wir die Sortierreihenfolge Option verwenden. Wenn ich auf diesen Plus-Button klicke, kann ich meine Projekte anhand des Abschlussdatums basierend auf dem Namen basierend auf dem erstellten Datum sortieren basierend auf dem Namen . Dies ist ein Feld, das Webflow automatisch für uns erstellt. Ich werde Abschlussdatum wählen und hier kann ich wählen, älteste bis neueste und neueste bis älteste. Ich werde alle Listen auf die neuesten treffen und Speichern drücken. Da gehen wir. Jetzt haben wir Simplify, Dashcoin und Vectorify, genau so. Jetzt werden sie nach ihrem Fertigstellungsdatum bestellt. Was sollen wir sonst noch tun? Nun, hier ist dieser Sammellisten-Wrapper außerhalb unseres Containers. Deshalb nimmt es so viel Platz ein. Daher werde ich voran gehen und es einfach ziehen und in unseren Container legen und ich werde den Projekt-Wrapper entfernen, den wir vorher erstellt haben, einfach so. Jetzt, während dieser Sammlungslisten-Wrapper ausgewählt ist, werde ich voran gehen und ihm eine Klasse geben, schreiben wir, Collection List Wrapper. Ich werde einige obere Ränder hinzufügen, geben wir ihm einen 70 Pixel oberen Rand und wir sind gut zu gehen. Können Sie sehen, wie einfach es ist, ein CMS und Sammlungen und Sammlungslisten zu verwenden? Diese Inhalte sind von nun an dynamisch und diese Webseite verweist auf unsere Inhalte in unseren Sammlungen und Sammlungsgegenständen. Wenn ich zu meinem CMS gehe, und wenn ich gehe, sagen wir hier Vereinfachen, und ich beschließe, seinen Namen zu etwas anderes zu ändern, schreiben wir Simplify plus und ich speichere es, jetzt wirkt sich diese Änderung hier als Nun ja. Ich muss eine Vorschau darauf sehen, dass wir hier , da gehen wir, wir haben unseren neuen Titel. Leute, das war viel zu verdauen, also lasst uns diese Lektion zusammenfassen. Zuerst haben wir über das CMS gesprochen. CMS ist, wo Sie einige Sammlungen erstellen und sagen wir, einige Strukturen für Ihre Inhalte erstellen können. Um eine Sammlung zu erstellen, müssen Sie einige Felder erstellen. Wir haben einige benutzerdefinierte Felder wie Projektbild, Projekttyp, Fertigstellungsdatum und Projektdetails erstellt. Dann haben wir einige Projektelemente erstellt. Wir haben hier eine Sammlungsliste hinzugefügt und unseren Collection List Wrapper mit der Kollektion unseres Projekts verbunden . Dann haben wir unsere Projektkarte innerhalb dieses Sammlungsgegenstandes gezogen und abgelegt, und schließlich haben wir alle unsere Elemente in einer Richtung eins ausgewählt, das Bild, den Titel, die Beschreibung und den Link und wir haben sie mit dem entsprechenden Feld verbunden hier. Zum Beispiel haben wir für dieses Bild Projektbild gewählt, für diesen Titel haben wir den Projektnamen gewählt, wie Sie sehen können. Schließlich haben wir unseren Sammlungslisten-Wrapper ausgewählt und wir gingen zu den Elementeinstellungen, von hier aus haben wir die Anzahl der Elemente, die wir hier anzeigen wollten, auf drei begrenzt. Außerdem verwenden wir die Sortierreihenfolge Option, um unseren Inhalt basierend auf dem Fertigstellungsdatum und vom ältesten zum neuesten genau so anzuzeigen . Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen. Im nächsten Video beginnen wir mit der Erstellung unserer Projektseite. Wir sehen uns dann. 52. Projektseite Teil 1: Hey, in diesem Video werden wir anfangen, unsere Projektseite gemeinsam zu erstellen. Diese Seite wird, wie ich bereits erwähnt habe, eine dynamische Seite sein. Daher wird auch sein Inhalt dynamisch sein. Wie können wir mit dynamischen Seiten arbeiten? Auf die gleiche Weise wie wir mit statischen Seiten arbeiten, ändert sich nichts. Der einzige Unterschied hier ist, dass diese Seite eine Vorlage für unsere Projektseite sein wird und ihr Inhalt entsprechend unseren Kollektionen Artikel geändert werden könnte. Zunächst einmal gehe ich zu Webflow und hier ist unsere Homepage. Wenn ich auf diese Seiten hier unter den CMS Sammlungsseiten gehe, wie Sie sehen können, wurde die Vorlage dieses Projekts von Webflow für uns erstellt. Ich werde darauf klicken. Was brauchen wir für diese Seite? Wie Sie sehen können, brauchen wir die Navigationsleiste oben. Unten brauchen wir diesen CTA-Abschnitt und die Fußzeile. Wir haben diese Abschnitte bereits erstellt. Sollen wir sie hier kopieren und einfügen? Wir können das tun, aber das ist kein guter Weg. Erinnerst du dich, als wir über Symbole gesprochen haben? Ich erwähnte, dass es sehr vorteilhaft sein könnte, wenn Sie ein Symbol erstellen und dieses Symbol immer wieder und wieder und später wiederverwenden dieses Symbol immer wieder und wieder und könnten, wenn Sie einige Änderungen an Ihren Symbolen vornehmen möchten, machen Sie sie einmal und es wirkt sich auf alle Instanzen dieses bestimmten Symbols sofort. Das ist genau das, was wir tun werden. Jetzt werden wir weitermachen und ein Symbol für unsere Navigationsleiste, für unseren CTA-Sektion und für unsere Fußzeile erstellen . Lassen Sie mich zu Webflow gehen. Bevor ich das tue, zeige ich dir etwas. Können Sie sehen, die Hintergrundfarbe ist genau die gleiche wie unsere Hintergrundfarbe hier auf unserer Homepage. Warum ist das so? Die Hintergrundfarbe dieser Projektvorlage wurde nicht geändert. Erinnern Sie sich, als wir die Hintergrundfarbe des Körpers geändert haben, alle Seiten Tag auf unserer Homepage? Deshalb erhalten wir hier auch die Hintergrundfarbe. In der Tat, wenn ich kreativ und mehr Seiten, alle diese Seiten haben die gleiche Hintergrundfarbe und das ist genau das, was wir wollen. Natürlich können wir das überschreiben, wenn Sie wollen, aber in diesem Fall ist es völlig in Ordnung. Jetzt gehe ich zu „Meine Homepage“ und von hier aus werde ich zuerst meine „Navbar“ auswählen. Erinnerst du dich, wie wir ein Symbol schaffen könnten? Ja, du hast recht. Wir hatten zwei verschiedene Möglichkeiten. Wir könnten entweder mit der rechten Maustaste darauf klicken und „Create Symbol“ Button hier drücken, oder wir könnten zu den Symbolen hier gehen und einfach „Create new Symbol“ Button hier drücken. Ich werde diesen Knopf drücken und ich werde es navbar nennen. Da gehen wir. Unser Symbol ist fertig. Jetzt sind wir innerhalb des Master-Symbols. Ich werde auf diese „Zurück zur Instanz“ klicken. Lassen Sie mich zur CTA-Sektion gehen. Ich werde auch diesen Abschnitt auswählen. Ich werde das Gleiche tun. Lassen Sie mich ein Symbol erstellen und ich werde es CTA Abschnitt nennen. Das Symbol unserer CTA Sektion ist ebenfalls fertig. Schließlich wähle ich meine Fußzeile aus und lasse mich das Gleiche hier machen. Ich werde ein Symbol erstellen und lassen Sie mich es Fußzeile nennen. Wir haben erfolgreich drei verschiedene Symbole erstellt, aber jetzt ist es an der Zeit, sie wiederzuverwenden. Lassen Sie mich zu „Seiten“ gehen und ich gehe hier zu „Projekte Vorlage“, und dann gehe ich zum Abschnitt „Symbol“. Von hier aus kann ich sie einfach per Drag & Drop in meine Canvas ziehen. Es gibt auch eine Alternative. Sie können auch die „Schnellsuche“ verwenden, um Ihre Symbole zu finden. Lassen Sie mich Ihnen zeigen, wie. Wenn ich diesen Körper auswähle und wenn ich „Command“ -Taste „Control“ -Taste auf meiner Tastatur klicke, kann ich nach Fußzeile suchen. Wie Sie hier sehen können, fand es unser Fußzeilen-Symbol. Wenn ich nach navbar suche, da gehen wir, navbar Symbol. Ich kann einfach darauf klicken und da ist es. Unsere Navbar ist hier. Was ist mit anderen Abschnitten? Wir werden das Gleiche hier machen. Dieses Mal werde ich Ihnen zeigen, wie Sie sie per Drag & Drop in Ihre Leinwand ziehen können. Ich gehe zum Symbol Abschnitt. Von hier aus werde ich den CTA-Abschnitt in meine Canvas ziehen und ablegen und jeden direkt unter die Navbar legen. Da gehen wir. Unsere CTA-Sektion ist ebenfalls bereit. Last but not least, lassen Sie mich gehen und ziehen Sie diese Fußzeile. Ich werde es direkt unter meinen CTA-Sektion setzen. Unsere navbar ist fertig, unser CTA-Bereich ist fertig, und auch die Fußzeile wurde erfolgreich hinzugefügt. Der erste Teil dieser Seite wurde erstellt. Wie Sie hier sehen können, hatten wir die Navbar, den CTA-Abschnitt und die Fußzeile. Jetzt ist es an der Zeit, diesen Projektabschnitt zu erstellen, aber wir werden das in unserer nächsten Lektion tun. Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen. Wir sehen uns in der nächsten. 53. Projektseite Teil: In diesem Video werden wir weiter an unserer Projektseite arbeiten. Jetzt ist es an der Zeit, diesen Projektabschnitt zu erstellen. Lassen Sie uns diesen Abschnitt analysieren und sehen, wie wir es auf Webflow strukturieren können. Hier müssen wir einen Abschnitt erstellen, und im Inneren müssen wir einen Container erstellen. Innerhalb dieses Containers müssen wir eine Überschrift, diesen Projekttyp, dieses Fertigstellungsdatum und das Bild des Projekts und schließlich die Details haben. Wie Sie hier sehen können, hat das Bild dieses Projekts einige Schlagschatten, aber es ist kein einfacher Schlagschatten. Wenn ich vergrößere, können Sie sehen, dass dieser Schlagschatten unterschiedliche Farben hat. Ich habe keinen einfachen dunklen Schlagschatten verwendet, weil wir in der realen Welt keine dunklen Schatten für bunte Bilder und Objekte bekommen. Daher wäre es realistischer, die Farben unseres Objekts zu haben, oder in diesem Fall auch unser Bild für unseren Schlagschatten. Wie habe ich das gemacht? Es war so einfach. Ich habe dieses Bild gerade dupliziert und diese duplizierte Ebene hinter unser Hauptbild gelegt, und dann habe ich diesen Ebenenunschärfeeffekt hinzugefügt. Lassen Sie mich Ihnen zeigen, wie es aussieht. Wenn ich diese Unschärfe einfach auf Null verkleinere, können Sie sehen, dass dies hier genau das gleiche Bild ist, aber wenn ich die Unschärfe vergrößere, wird es verschwommen und es wird wie ein Schlagschatten aussehen. Schließlich verkleinere ich die Deckkraft dieser duplizierten Ebene auf 50 Prozent. Wir werden die gleiche Technik auch in Webflow verwenden. Für diese Absätze werden wir einen Rich-Text verwenden, weil wir wollen, dass unser Kunde, wir wollen, dass die Designagentur, Lage sein, einige Rich Media wie Bilder, Videos hinzuzufügen, und leicht die Details jedes Projekts zu ändern. Hier haben wir diese Überschrift und um diesen Abschnitt, den Projekttyp und dieses Fertigstellungsdatum zu erstellen, werden wir einen div-Block erstellen, und wir werden sie in diesen div-Block legen und schließlich werden wir dass div zu einem flex max blockieren, warum? Weil wir wollen, dass sie die Kanten dieser Grenze berühren. Es sieht einfach aus, also lass uns voran und erstellen es. Zuallererst werde ich voran gehen und meinen Körper auswählen. Ich werde „Befehl K“ oder „Control K“ drücken. Lassen Sie uns nach einem Abschnitt suchen. Dieser Abschnitt wurde hier hinzugefügt, direkt unter meiner Fußzeile. Im Navigator ziehe ich es und lebe es direkt über den CTA-Abschnitt, genau hier. Dieser Abschnitt wird eine Klasse haben. Wie üblich werde ich ihm eine Abschnittsklasse geben. Da gehen wir. werde ich ihm eine Combo-Klasse geben. Lasst uns ein Projekt schreiben. Cool. Dieser Abschnitt erfordert nun einen Container. Während es ausgewählt ist, werde ich „Befehl K“ oder „Control K“ drücken. Lassen Sie uns nach einem div-Block suchen. Ich werde ihm die Container-Klasse geben. Da gehen wir. Unser Container ist auch fertig. Was brauchen wir in diesem Behälter? Ja, du hast recht. Wir brauchen eine Überschrift. Während dieser Container ausgewählt ist, lassen Sie uns „Befehl K“ oder „Control K“ drücken und nach Überschrift suchen. Es wird H1 sein, und ich werde ihm eine Klasse geben. Lassen Sie uns Projektseite Titel schreiben, Seite __Titel. Da gehen wir. Ich werde diesen Titel nicht ändern, da wir später alle diese Elemente mit unseren Sammlungsfeldern verbinden werden. Weil wir mit dynamischen Inhalten arbeiten werden. Was brauchen wir noch hier? Direkt unter dieser Überschrift müssen wir diesen Projekttyp und auch dieses Fertigstellungsdatum erstellen. Aber lassen Sie uns diesen Abschnitt analysieren, das Abschlussdatum. Da das Abschlussdatum dynamisch sein sollte, werde ich hier zwei verschiedene Textblöcke erstellen: einen für diesen Abschnitt abgeschlossen, und den anderen für das Datum selbst. Später, wenn wir unsere Elemente mit unseren Feldern verbinden, verbinden wir einfach den richtigen Textblock mit dem Vervollständigungsdatumsfeld. Lassen Sie mich voran und erstellen Sie einen div-Block. Ich werde diesen Container auswählen und ich werde „Befehl K“ oder „Control K“ drücken. Lassen Sie uns nach einem div-Block suchen. Da gehen wir. Ich werde ihm eine Klasse geben. Lassen Sie uns Project Type Wrapper schreiben, genau so. Im Inneren werde ich hier einen Textblock platzieren. Während es ausgewählt ist, werde ich nach einem Textblock suchen. Da gehen wir. Dieser Textblock wird auch eine Klasse haben. Lassen Sie uns Projektseite __Type schreiben, und ich werde seine Topografieeigenschaften ändern. Ich gehe zu meiner Entwurfsdatei, ich werde diesen Projekttyp auswählen, und wie Sie sehen können, verwende ich Körpermedium. Body Medium, seine Schriftgröße ist 24 Punkte und es ist auch mittel. Daher werde ich hier die Größe auf 24 Pixel ändern. Außerdem wird sein Gewicht 500 oder mittel sein. Seine Farbe wird neutrales Medium sein, genau so. Ich werde seinen Text nicht ändern. Cool, aber was ist mit dem Abschlussdatum Abschnitt hier? Wie ich bereits erwähnt habe, werde ich einen div-Block erstellen. Also, ich werde diesen Projekttyp Wrapper auswählen, und dann werde ich hier einen Div-Block hinzufügen. Dieses div wird eine Klasse haben. Lassen Sie uns Projekt __Fertigstellung schreiben. Da gehen wir. In diesem div-Block werden wir zwei Textblöcke platzieren. Während es ausgewählt ist, drücken Sie „Befehl K“ oder „Control K“ und suchen Sie nach Textblock. Dies ist unser erster Textblock, ich werde ihn einfach kopieren, „Befehl C“ oder „Control C“, und fügen Sie ihn ein, um meinen zweiten Textblock zu erhalten. Jetzt sollte jeder dieser Textblöcke eine Klasse haben. Ich werde den ersten auswählen, und ich werde ihm eine Klasse geben. Lassen Sie uns Projekt __Abgeschlossen schreiben, einfach so. Der zweite wird Projekt __Date sein. Lassen Sie uns nun fortfahren und seine CSS-Eigenschaften ändern. Ich werde das erste auswählen, dieses Projekt abgeschlossen. Lassen Sie mich voran gehen und ändern Sie seine Schriftgröße auf 20 Pixel und auch seine Farbe zu neutral dunkel. Was ist mit dem zweiten? Die zweite, die dieses Projekt 8 ist, wird auch 20 Pixel sein, aber seine Farbe wird neutrales Medium sein. Schön, aber es sieht nicht gut aus, warum? Weil wir diesen Projektabschluss div Blog nicht in ein flex max umgewandelt haben. Also, ich werde diesen Projektabschluss-Div-Block in meinem Navigator auswählen, und dann werde ich die Anzeigeeinstellung auf flex max ändern. Nun, die Richtung ist horizontal und sie sitzen nebeneinander, genau das, was ich will. Jetzt werde ich den ersten Text auswählen und ich werde seine Einstellungen ändern , um abgeschlossen am. Um zu sehen, wie es aussehen wird, werde ich auch diesen Text ändern. Obwohl dieser dynamische Inhalte haben wird. Aber nur um zu sehen, wie es aussehen wird, werde ich am 22. Juni 2021 schreiben. Schön. Hier brauchen wir ein paar Margen zwischen ihnen. Ich werde dies auf Textblock abgeschlossen auswählen, und ich werde ihm einen fünf Pixel rechten Rand geben, genau so. Nun, es sieht viel besser aus. Aber wie Sie sehen können, sitzen diese beiden Elemente, dieser Projektseitentyp und auch diese div Blogs, dieser Projektseitentyp und auch diese div Blogs, übereinander. Das ist nicht das, was wir wollen. Ich werde diesen Project Type Wrapper auswählen und ich werde ihn in eine Flex-Box verwandeln. Die Richtung wird horizontal sein, aber ich werde die Rechtfertigung in Raum zwischen ändern, warum? Weil wir wollen, dass sie die Kanten dieser Grenze berühren. Ich werde es auf Raum zwischen setzen. Schön, unser Layout ist fast fertig. Lassen Sie mich zu meiner Designdatei gehen. Wenn ich diesen Projekttyp auswähle und die „Alt“ -Taste oder „Wahltaste“ auf meiner Tastatur gedrückt halte, sehe ich, dass er einen oberen Rand von 20 Pixeln hat. Während dieser div-Block ausgewählt ist, dieser Project Type Wrapper, werde ich ihm einen 20-Pixel-oberen Rand geben. Es sieht jetzt viel besser aus. Nun gehen wir zum nächsten Teil über, der dieses Bild ist. Hier, während dieser Container im Navigator ausgewählt ist, werde ich diesen Container auswählen. Ich werde „Befehl K“ oder „Control K“ drücken. Lassen Sie uns einen neuen div-Block erstellen, weil wir einen Wrapper für unser Bild erstellen werden. Hier werde ich div Block schreiben, und dieser div Block wird eine Klasse haben. Lassen Sie mich Projekt __Image __Wrapper schreiben. Im Inneren werden wir ein Bild platzieren. Während es ausgewählt ist, werde ich „Befehl K“ oder „Control K“ drücken. Suchen wir hier nach dem Bildelement. Da gehen wir. Ich werde diesem Bild eine Klasse geben, also lassen Sie uns hier eine Klasse erstellen. Ich werde Project Page __Image schreiben. Dieses Bild sollte die gesamte Breite seines Elternteils einnehmen , der dieser neue div-Block ist, den wir erstellt haben, dieser Image-Wrapper. Was soll ich tun? Ja, du hast recht. Ich werde voran gehen und die Breite auf 100 ändern. Da gehen wir. Jetzt nimmt es die gesamte Breite seines Elternteils ein, aber seine Höhe wurde ebenfalls erhöht. Wie kann ich das beheben? Lassen Sie mich zu meiner Designdatei gehen. Wenn ich dieses Bild hier auswähle, wenn ich darauf doppelklicke, können Sie sehen, dass es eine bestimmte Höhe hat, 444 Pixel. Daher werde ich die Höhe hier auf 444 Pixel einstellen. Wie Sie sehen können, nimmt unser Bild jetzt nicht die ganze Breite ein, deckt diesen Bereich nicht ab. Daher werde ich voran gehen und die Passform von Füllung zu Abdeckung ändern. Nun, ich werde darauf doppelklicken und lassen Sie uns ein Bild aus den Assets für jetzt wählen, ich werde das erste auswählen. Es deckt den gesamten Wrapper ab. Unser Bild ist fertig, aber was ist mit dem Schlagschatten? Wie ich bereits erwähnt habe, werde ich dieses Bild duplizieren und ich werde es hinter diesem Hauptbild setzen und dann werde ich einige Filter hinzufügen. Ich werde hier mit der rechten Maustaste auf diesen blauen Teil und dann werde ich „Duplizieren“ wählen. Wie Sie jetzt sehen können, haben wir zwei identische Bilder mit der gleichen Klasse. Es ist sehr wichtig, die Klasse dieser duplizierten Ebene zu ändern. Warum? Weil wir seine CSS-Eigenschaften ändern wollen. Ich werde diese duplizierte Ebene auswählen, und ich werde voran gehen und auf diesen kleinen Pfeil klicken und mich diese Klasse duplizieren lassen. Ich werde es in Projektseite__Image__Effect umbenennen. Da gehen wir. Jetzt hat es eine neue Klasse und wir können leicht voran gehen und seine CSS-Eigenschaften ändern. Wie können wir dieses Bild hinter unser Hauptbild setzen? Wir können voran gehen und seine Position hier ändern. Während es ausgewählt ist, ändere ich seine Position von statisch zu absolut. Wie Sie sehen können, ist es vermasselt. Es ist nicht das, was wir wollen. Warum passiert es? Das liegt daran, dass seine neue Position relativ zum Körper ist. Wenn Sie sich erinnern, als wir mit Position absolut gearbeitet haben, habe ich erwähnt, dass es immer nach einem übergeordneten Element sucht, das die Position relativ hat. Wenn ich voran gehe und die Position dieses Projekt-Image-Wrappers in relativ von statischändere dieses Projekt-Image-Wrappers in relativ von statisch und dann dieses duplizierte Bild auswähle, kann ich einfach seine Position oben links einstellen. Jetzt ist dieses Bild oben auf unserem Hauptbild. Wie können wir es hinter unser Hauptbild setzen? Wir können den Z-Index verwenden. Hier werde ich den Z-Index auf minus 1 setzen. Auf diese Weise kann ich sicherstellen, dass diese duplizierte Ebene mit dieser Projektseiten-Bildeffektklasse hinter meinem Hauptbild liegt , weil ich ihm einen negativen Z-Index gegeben habe. Jetzt müssen wir weitermachen und einige Effekte hinzufügen. Wenn ich zum Abschnitt „Effekte“ gehe, kann ich zu „Filter“ gehen. Wenn ich auf diese Plus-Taste klicke, kann ich den Weichzeichnungsfilter hinzufügen. Lassen Sie uns den Radius auf etwa 40 Pixel setzen. Genau so. Wie Sie sehen können, haben wir unseren Schlagschatten. Außerdem werde ich die Intensität meiner Farben erhöhen. Ich werde hier einen neuen Filter hinzufügen. Lassen Sie uns voran und fügen Sie den Sättigungsfilter hinzu, und ich werde seine belief sich auf 200 Prozent einstellen. Nun, wie Sie sehen können, wurde die Intensität meiner Farben erhöht. Dieser Schlagschatten ist jedoch zu hell und sieht nicht realistisch aus. Ich werde voran gehen und seine Deckkraft auf 40 Prozent reduzieren. Da gehen wir. Jetzt sieht es viel besser aus, aber ich werde noch eine Sache machen. Wenn wir diesen Schlagschatten auswählen, kann ich ihn einfach etwas nach unten bewegen. Ich werde die 2D- und 3D-Transformationen hier hinzufügen, und ich werde es ein wenig nach unten mit der Y-Achse verschieben. Lassen Sie mich es um 14 Pixel nach unten verschieben, genau so. Es sieht jetzt viel besser aus. Unser Projekt-Image-Wrapper ist ebenfalls bereit. Jetzt ist es an der Zeit, voranzugehen und unsere reichen Texte hier direkt unter diesem Bild hinzuzufügen. Ich werde den Container auswählen und dann werde ich ihm eine Combo-Klasse geben und wir werden Project schreiben, genau so. Schließlich werde ich seine Anzeigeeinstellung ändern weil ich möchte, dass alle diese Elemente vertikal übereinander stapeln. Später, wenn wir unser Design reaktionsschnell machen wollen, wäre es so vorteilhaft. Ich werde seine Anzeigeeinstellung auf Flexbox ändern und die Richtung in vertikal ändern. Jetzt, während dieser Container ausgewählt ist, werde ich Befehl K oder Control K drücken. Lassen Sie mich hier einen Rich-Text hinzufügen. Da gehen wir. Unser Rich-Text wurde hier hinzugefügt, und ich werde ihm eine Klasse geben. Lassen Sie uns Project__Detail schreiben. Lassen Sie mich zu meiner Designdatei gehen. Ich werde diesen Absatz auswählen und ich werde seinen oberen Rand überprüfen. Wie Sie sehen können, brauche ich einen 70 Pixel oberen Rand. Während es hier ausgewählt ist, werde ich ihm einen 70 Pixel oberen Rand geben. Wir werden den Inhalt hier vorerst nicht ändern. Nun gehen wir voran und ändern den Abstand zwischen diesen Elementen. Wenn ich zu meiner Entwurfsdatei gehe und diesen Projekttyp wähle, können Sie sehen, dass der untere Rand auf 80 Pixel festgelegt ist. Ich kann hier zu meinem Projekt gehen, ich kann diesen Projekttyp Wrapper auswählen und ich werde ihm einen 80-Pixel-unteren Rand geben. Alles ist fertig und wir können mit dem nächsten Abschnitt fortfahren. Lassen Sie mich zu meiner Designdatei gehen. Genau darunter müssen wir diese anderen Projekte Abschnitt haben. Es sieht genau so aus wie dieser aktuelle Projektabschnitt, also denke ich, es wäre klug, es hier einfach zu kopieren und zu übergeben. Lassen Sie mich zu Webflow gehen. Ich gehe auf meine Homepage. Von hier aus werde ich diesen Abschnitt auswählen, Abschnitt Letzte Projekte. Ich werde es kopieren, drücken Sie Befehl C oder Kontrolle C. Dann gehe ich zu Seiten und ich gehe auf die Seite Projekte Template, und lassen Sie mich den Körper auswählen und Befehl V oder Control V drücken. drücken Sie Befehl C oder Kontrolle C. Dann gehe ich zu Seiten und ich gehe auf die Seite Projekte Template, und lassen Sie mich den Körper auswählen und Befehl V oder Control V drücken. Abschnitt wurde direkt unter meiner Fußzeile hinzugefügt, also werde ich es einfach in meinem Navigator neu positionieren und ich werde es unter meinen Projektabschnitt setzen. Zuerst werde ich voran gehen und die Combo-Klasse dieses Projekts duplizieren, und ich werde es in Andere Projekte ändern, um alles organisiert zu halten. Dann werde ich diesen Namen hier von Letzte Projekte in Andere Projekte ändern. Schließlich werde ich seinen oberen Rand ändern, weil es jetzt zu viel ist, es sind 200. Wenn ich zu meiner Designdatei gehe, wenn ich sie auswähle, können Sie sehen, dass der obere Rand auf 70 Pixel eingestellt ist. Ich werde es hier auf 70 setzen. Wenn ich diesen Abschnitt auswählen, können Sie sehen, dass wir zu viel Marge hier oben haben. Ich werde diesen Abschnitt auswählen und den Standardmarge überschreiben. Wenn ich darauf klicke, können Sie sehen, dass der Wert aus dem Abschnitt kommt. Es ist in Ordnung. Aber da wir dieses neue Combo-Klassenprojekt hinzugefügt haben, können wir es einfach überschreiben, ohne andere Abschnitte zu beeinflussen. Ich werde es auf 70 Pixel setzen. Das Layout unserer Projektseite ist fertig, und jetzt ist es an der Zeit, alle unsere Elemente mit unseren Sammlungen Artikel und Sammlungen Felder zu verbinden . Aber das werden wir in unserer nächsten Lektion tun. Ich hoffe, Sie haben dieses Video genossen und wir sehen uns im nächsten. 54. Projektseite Teil: Hey, willkommen zurück. In diesem Video werden wir alle unsere Elemente mit den Feldern unseres CMS verbinden. Bist du bereit? Fangen wir an. Zuallererst werde ich diese Überschrift auswählen. In dieser Überschrift sollte der Name des Projekts angezeigt werden. Wenn ich auf dieses Einstellungssymbol klicke, kann ich dieses Kontrollkästchen aktivieren, es sagt, Texte aus Projekten zu erhalten, dies ist die Sammlung, die wir vorher erstellt haben. Dann werde ich das Feld auswählen, ich werde „Name (Nur-Text)“ auswählen, das ist unser Projektname. Da gehen wir. Es wurde geändert, um Plus zu vereinfachen. Wenn Sie sich erinnern, haben wir es modifiziert. Aber warum ist einfach plus, warum nicht ein anderes Projekt? Das ist, weil, wenn Sie in die obere Leiste gehen hier, können Sie sehen, dass wir diesen Artikel haben, und es sagt vereinfachen Plus. Diese Projektvorlage hat verschiedene Elemente, die Elemente, die wir die Projekte erstellt haben. Wenn ich zu CryptoPie gehe, können Sie sehen, dass dieser Titel automatisch geändert wird. Wenn ich zu Orbit gehe, gehen wir, also das ist die Schönheit der Verwendung von Webflow CMS. Ich werde gehen, um Plus für jetzt zu vereinfachen. Dann werde ich den Projekttyp auswählen, lassen Sie mich auf das Einstellungssymbol klicken, ich werde dieses Kontrollkästchen aktivieren, und lassen Sie mich das Feld auswählen. Dieser wird Projekttyp sein, da gehen wir, UI-Design und App-Entwicklung. Dann werde ich dieses „Projektdatum“ auswählen, und ich werde auf diese Einstellungen klicken. Lassen Sie mich dieses Kontrollkästchen aktivieren, und ich werde das entsprechende Feld auswählen. Es wird Fertigstellungsdatum sein, da gehen wir, es wurde auf den 1. Juni 2021 geändert. Hier können wir auch das Format ändern. Wenn Sie es anders anzeigen möchten, zum Beispiel, wenn Sie auch die Zeit einbeziehen möchten, können Sie einfach das Format ändern. Wir haben hier viele verschiedene Formate, also liegt das ganz an Ihnen, aber es sieht gut für mich aus. Jetzt ist es Zeit, voran zu gehen und wählen Sie unser Bild, „Project Page Image“, und ich werde dieses Einstellungen-Symbol zu treffen. Lassen Sie mich dies Get Imaged from Projects überprüfen, und ich werde Project Image wählen. Aber was ist mit dem Schatten? Nun, da wir dieses Bild für unseren Schlagschatten dupliziert haben, müssen wir es nur auswählen, und wir müssen es einfach mit unserem Feld verbinden, genau wie unser Hauptbild. Ich werde dieses Kontrollkästchen aktivieren und ich werde das „Projekt-Image“ aus dem Feld-Drop-Menü auswählen , genau so. Jetzt ist es an der Zeit, unser Projektdetail, diesen Rich-Text, auszuwählen. Ich werde fortfahren und dieses Kontrollkästchen aktivieren, und lassen Sie mich ein Feld auswählen, „Projektdetails“, da gehen wir. Es wurde in das Projektdetail geändert, mit dem es verknüpft ist. Unsere Elemente sind miteinander verbunden, und jetzt kann ich voran gehen und es überprüfen. Wenn ich den Artikel hier an der Spitze von Vereinfachung Plus zu reinigen ändern, da gehen wir. Der Titel wurde geändert, der Projekttyp wurde geändert, das Datum wurde geändert, das Bild und das Projektdetail. Werfen Sie einen Blick darauf, der Schlagschatten ändert sich auch, weil er auch einen dynamischen Inhalt verwendet. Ich gehe zu einem anderen Gegenstand. Ich werde zu Dashcoin gehen, da gehen wir, es sieht toll aus, nicht wahr? Wir sind fast fertig, aber es gibt noch eine Sache, um die wir uns kümmern müssen, und das ist der andere Projektabschnitt. Wenn ich gehe, um Plus zu vereinfachen, und ich scrolle nach unten, können Sie sehen, dass wir in anderen Projekten auch das vereinfachte Plus-Projekt sehen werden. Das macht keinen Sinn, da wir das Projekt ausschließen sollten, das der Benutzer gerade ansieht. Wir sollten hier nur andere Projekte anzeigen. Wenn ich hier zu meiner Designdatei gehe, wie Sie sehen können, haben wir hier Vereinfachung. Wir haben das vereinfachte Projekt nicht in den anderen Projekten. Wie können wir das tun? Nun, das ist sehr einfach. Ich werde diesen „Collection List Wrapper“ auswählen. Wenn ich zu den Elementseinstellungen gehe, hier haben wir diese Filteroption. Ich werde diesen Plusknopf drücken, und hier haben wir zwei verschiedene Felder. Hier haben wir Name, Projekt, Projekt-Image. Wir können einfach verschiedene Filter hinzufügen, aber ich werde Projekt wählen, und dann haben wir hier ein weiteres Drop-Menü, das sagt, ist oder nicht. Dann steht hier das aktuelle Projekt. Dieses Projekt ist das aktuelle Projekt, es bedeutet, dass wir das Projekt bekommen, das der Benutzer derzeit auch hier ansieht, aber das ist nicht das, was wir wollen. Ich werde zu ändern ist nicht, und dann werde ich auf „Speichern“, und da gehen wir. Das Projekt „Simplify plus“ wurde hier entfernt. Hier, wie Sie sehen können, haben wir dashcoin. Wenn ich auf die Dashcoin-Projektseite gehe, haben wir hier kein Dashcoin-Projekt, und das ist genau das, was wir brauchten. Eine weitere Sache, die ich hier erwähnen möchte, ist, dass, wenn ich auf die Homepage gehe und wenn ich zu den jüngsten Projekten gehe, ich diesen „Collection List Wrapper“ auswählen werde. Unter der Sortierreihenfolge haben wir die Option Älteste bis Neueste ausgewählt. Es ergibt keinen Sinn, warum? Da wir hier die aktuellen Projekte haben, sollte daher das Fertigstellungsdatum vom neuesten zum ältesten sortiert werden. Aber warum haben wir uns für die Älteste bis Neueste entschieden? Das liegt daran, dass wir bei der Erstellung dieser Projekte zufällig die Fertigstellungstermine des Projekts ausgewählt haben. Da ich genau das gleiche Design erhalten wollte, das ich hier habe, Simplify, Dashcoin und Vectorify, änderte ich diese Sortierreihenfolge von neuestem zu ältestem zu neuestem. Aber im realen Projekt, wenn Sie die aktuellen Projekte haben, müssen Sie es von neuesten zum ältesten sortieren Wenn also die Agentur oder der Kunde ein neues Projekt zu den Sammlungselementen hinzufügt, wird es hier hinzugefügt, also Behalten Sie das im Hinterkopf. Jetzt werde ich voran gehen und alles überprüfen und sehen, ob alles perfekt funktioniert. Wenn ich meine Vorschau auf mein Projekt, hier habe ich verschiedene Projekte, ich werde auf diese Schaltfläche „Mehr erfahren“ klicken, da gehen wir. Ich werde es auf die Projektseite leiten, und es steht vereinfachen plus, ich kann nach unten scrollen, ich habe auch andere Projekte. Ich kann auf „Dashcoin“ klicken, ich werde auf die Dashcoins Seite weitergeleitet, perfekt. Ich gehe jetzt zurück auf die Homepage und probiere es noch einmal aus. Ich werde „Vectorify“ auswählen, und alles sieht gut aus. Das einzige, was wir hier tun müssen, ist einfach die Farbe dieser Reichweite Medientexte zu ändern , weil wir vergessen haben, das zu tun. Wenn ich voran gehe und meine Designdatei schaue, können wir hier sehen, dass es nicht unsere dunkle Farbe verwendet. Ich werde voran gehen und dieses „Projektdetail“ auswählen, und ich werde sein Styling ändern. Lassen Sie mich zum Abschnitt Typografie gehen, und ich werde seine Farbe auf neutral, mittel ändern. Jetzt sieht es viel besser aus. Alles klar, Jungs, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen. Wir sehen uns in der nächsten. 55. Kontakt-Seite: Hey, in diesem Video werden wir die Seite „Kontaktieren Sie uns“ zusammen erstellen. Dies wird eine statische Seite sein, daher werden wir nicht mit unserem CMS und irgendwelchen dynamischen Inhalten arbeiten. Wir müssen nur dieses Formular erstellen und das ist alles. Lassen Sie mich fortfahren und alle Elemente auf dieser Seite analysieren. Oben müssen wir die Navigationsleiste haben, wie üblich. Dann müssen wir diesen Abschnitt „Kontaktieren Sie uns“ und schließlich die Fußzeile haben. Für die Navigationsleiste und eine Fußzeile können wir unsere Symbole verwenden, dann müssen wir diesen Abschnitt Kontaktieren Sie uns erstellen. Im Inneren müssen wir wie üblich einen Behälter setzen, und dann müssen wir eine Überschrift und einen Formularblock haben. Dieser Formularblock wird verschiedene Textfelder haben, wie vollständiger Name, E-Mail, Telefon. Hier statt ein Textfeld zu verwenden, werden wir einen Textbereich verwenden. Warum? Da die Nachricht des Benutzers lang sein könnte und daher ein Textfeld zu klein wäre, um diese Art von Daten zu sammeln. Schließlich werden wir diesen großen Submit-Button haben. Nichts Kompliziertes. Lasst uns anfangen. Zunächst werde ich zu Webflow gehen, und ich werde voran gehen und eine neue statische Seite erstellen. Wenn ich zu Seiten gehe, kann ich diese Schaltfläche „Neue Seite erstellen“ drücken, und dann werde ich es nennen Kontaktieren Sie uns, und drücken Sie die Schaltfläche „Erstellen“, einfach so. Jetzt ist es an der Zeit, unsere Navigationsleiste und unsere Fußzeile hier hinzuzufügen. Ich gehe zum Symbolbereich, und ich werde unsere Navigationsleiste ganz oben ziehen und ablegen, und dann lassen Sie mich unsere Fußzeile direkt darunter ziehen und ablegen. Zwischendurch werden wir einen Abschnitt erstellen, also werde ich meinen Körper auswählen, und lassen Sie uns Befehl K oder Control K drücken. Lassen Sie mich einen Abschnitt erstellen. Dann werde ich ihm eine Klasse geben, eine Abschnittsklasse. Schließlich werde ich es nach oben bewegen und zwischen diese beiden Symbole setzen. Drinnen brauchen wir einen Container. Zuerst werde ich diesem Abschnitt eine Combo-Klasse geben, und ich werde es Kontakt nennen. Dann sehen wir, während es ausgewählt ist, die Befehlstaste oder die Strg-Taste und suchen Sie nach einem div-Block. Dann werde ich diesem div Block die Container-Klasse geben, und wir sind gut zu gehen. In diesem Container brauchen wir eine Überschrift. Während es ausgewählt ist, verwenden wir die Schnellsuche und ich werde Überschrift schreiben, und es wird H1 sein. Dann geben wir ihm eine Klasse. Ich werde Contact__Überschrift schreiben. Schließlich müssen wir einige seiner Typografie-Eigenschaften ändern. Ich werde mit seiner Schriftgröße beginnen, es sind 38 Pixel. Ich werde 60 Pixel schreiben, weil wir zuvor 60 Pixel für unsere H1-Überschriften verwendet haben, dann werde ich seine Farbe in neutrale Dunkelheit ändern. Lassen Sie mich auch die Linienhöhe ändern. Ich werde es auf hundert und vielleicht zehn Prozent ändern. Schließlich werden wir ihm einige untere Ränder geben. Ich gehe zu meiner Designdatei, und wenn ich sie auswähle, kann ich sehen, dass sie einen 80-Pixel-unteren Rand hat. Zuerst, während es ausgewählt ist, werde ich den standardmäßigen oberen Rand entfernen. Ich werde es auf 0 setzen. Dann werde ich seinen standardmäßigen unteren Rand auf 80 Pixel ändern. Was brauche ich noch? Unmittelbar darunter brauche ich einen Formularblock. Ich werde diesen Container auswählen und ich werde Befehlstaste oder Strg-Taste drücken. Lassen Sie uns nach einem Formularblock suchen. Da ist es, unser Formularblock ist fertig. Jetzt in diesem Formularblock, wie üblich, haben wir zwei verschiedene Textfelder und zwei Beschriftungen und eine Schaltfläche, und wir werden das ändern. Ich werde fortfahren und eines dieser Textfelder und eines dieser Beschriftungen entfernen , bis ich nur ein Textfeld und eine Beschriftung bekomme. Ich beginne mit dem Erstellen des Namens Textfeld. Ich gehe zu meiner Entwurfsdatei. Hier, wenn ich diesen vollständigen Namen auswähle, können Sie sehen, dass er die neutrale mittlere Farbe verwendet, und es verwendet den normalen Textstil des Körpers und seine Schriftgröße beträgt 20 Pixel oder 20 Punkte. Ich werde zu Webflow gehen und ich werde ihm eine Klasse geben. Das ist richtig, Kontakt__Titel. Dann werde ich einige seiner Typografie-Eigenschaften ändern. Fangen wir mit seinem Gewicht an. Es wird normal sein, und seine Größe wird 20 Pixel sein. Schließlich wird die Farbe neutrales Medium sein. Cool. Unser Label ist fertig. Jetzt gehe ich voran und kopiere den Text hier, vollständigen Namen, mit diesem Sternchen, weil dieses Feld erforderlich sein wird. Da gehen wir, unser Label ist fertig. Ich werde es auswählen. Lassen Sie mich noch ein paar Button-Ränder geben. Wenn ich dieses Label hier auswähle und den unteren Rand überprüfe, wenn ich die Wahltaste auf meiner Tastatur oder die Alt-Taste gedrückt halte, können Sie sehen, dass es einen unteren Rand von 10 Pixeln hat, also werde ich hier den unteren Rand erhöhen, als gut auf 10 Pixel. Aber was ist mit dem Textfeld? Ich werde dieses Textfeld auswählen, und ich werde Ihnen die Klasse geben, weil ich sein Styling ändern werde. Lassen Sie uns schreiben Contact__Form__Textfeld. Genau so. Dann werde ich seine Breite auf 100 Prozent ändern, dass es immer 100 Prozent seiner Elternbreite einnimmt. Auch ich werde seine Höhe ändern. Lassen Sie mich voran und überprüfen Sie die Höhe, die ich für dieses Textfeld verwendet habe. Wie Sie sehen können, ist seine Höhe auf 70 Pixel eingestellt. Ich werde seine Höhe hier auch auf 70 Pixel einstellen. Dann werde ich voran gehen und die Hintergrundfarbe ändern. Lassen Sie mich zu meiner Designdatei gehen. Hier, wie Sie sehen können, verwende ich diesen Farbcode mit einer Opazität von 10 Prozent. Ich werde diese Hex-Farbcode kopieren, es ist 6B708D. Dann werde ich es hier in das Farbfeld dieses Hintergrunds einfügen. Es ist zu dunkel. Schließlich werde ich seine Deckkraft, es ist alles in Ordnung, auf 10 Prozent reduzieren. Da ist es. Aber wie Sie sehen können, hat es eine Grenze. Wenn ich es wähle, können Sie sehen, dass es hier keine Grenze gibt. Das liegt daran, dass Textfelder standardmäßig Rahmen haben. Wie können wir das in Ordnung bringen? Wir können den Stil dieser Grenze hier einfach in „solide“ ändern und sie wieder auf „Keine“ umwandeln. Aber was ist mit dem Platzhaltertext? Nun, wenn Sie sich erinnern, wenn Sie einfach auf Ihr Textfeld doppelklicken, können Sie hier Ihren Platzhaltertext eingeben. Ich werde schreiben Geben Sie Ihren vollständigen Namen ein. Da gehen wir. Der Texttyp wird einfach sein, weil es nur der Name und Nachname ist, und es wird erforderlich sein. Ich werde dieses erforderliche Kontrollkästchen überprüfen. Cool. Aber was ist mit dem Styling des Platzhalters? Nun, ich gehe in den Platzhalterstatus, genau so, und ich werde seine Farbe ändern. Mal sehen, was wir hier haben. Wenn ich diesen Text auswähle, verwendet er neutrales Medium. Lassen Sie mich voran und ändern Sie seine Farbe in neutrales Medium. Ich werde seine Schriftgröße auf 17 Pixel erhöhen. Cool, unser Textfeld ist fertig. Jetzt werde ich weitermachen und andere Textfelder wie E-Mail und Telefon erstellen . Zuerst werde ich diesen gebildeten Block auswählen, und ich werde ihm eine Klasse geben. Lassen Sie uns Contact__Form__Wrapper schreiben, und während es ausgewählt ist, werde ich einen neuen div-Block erstellen. Lassen Sie uns Befehl K oder Control K drücken. Ich werde nach einem div-Block suchen. Dieser div-Block wird dieses Textfeld und dieses Label halten. Ich werde dieses Label in diesen div-Block ziehen, und ich werde dieses Textfeld auch in diesem div-Block ziehen. Stellen Sie sicher, dass sie ordnungsgemäß im Inneren verschachtelt sind. Dann werde ich diesen neuen div-Block auswählen, und ich werde ihm eine Klasse geben. Lassen Sie uns schreiben, Contact__TextField und ich werde es über meinen Submit-Button setzen. Unser erstes Textfeld ist fertig. Cool. Jetzt werde ich diesen Contact__TextField div Block auswählen, und ich werde ihn zweimal duplizieren, einfach so. Dann werde ich das Etikett des zweiten ändern, um eine E-Mail zu senden. Wie Sie hier sehen können, haben wir E-Mail und es ist nicht erforderlich, daher brauchen wir dieses Sternchen nicht. Der nächste wird Telefon sein, und auch, wir müssen den Platzhalter hier ändern. Ich werde darauf doppelklicken und ich werde den Platzhalter in etwas anderes ändern. Versuchen wir es, geben Sie Ihre E-Mail-Adresse ein. Ich werde den Texttyp in E-Mail ändern und es wird nicht erforderlich sein. Hier ändern wir den Namen dieser Eingabe in E-Mail. Lassen Sie uns doppelklicken auf dieses Textfeld und ich werde den Platzhalter ändern, um Ihre Telefonnummer einzugeben , und ich werde auch den Texttyp von einfach zu Telefon ändern, und es wird nicht auch erforderlich sein. Ändern wir den Namen hier in Telefon. Cool. Unsere Textfelder sind fertig. Jetzt brauchen wir noch ein Feld und dafür werden wir einen Textbereich verwenden. Lassen Sie mich voran und wählen Sie einen dieser div-Blöcke. Dieses Contact__TextField, ich werde es noch einmal duplizieren, da ist es. Hier ist diejenige, die ich gerade dupliziert habe. Ich werde die Beschriftung in Nachricht mit einem Sternchen ändern. Dieses Textfeld ist jedoch zu klein für unsere Nachricht. Wenn ich einen Blick auf das Design werfen, können Sie hier sehen wir einen Textbereich nicht ein Textfeld. Daher werde ich dieses Textfeld entfernen, Rücktaste oder Löschen auf Ihrer Tastatur drücken, und ich werde diesen Contact__TextField div Block auswählen hier das übergeordnete Element ist. Lassen Sie uns Befehl K oder Control K drücken und nach Textbereich suchen. Da ist es. Da ich das gleiche Styling verwenden werde, das ich für andere Textfelder verwendet habe, verwende ich nur die gleiche Klasse, die ich für diese Textfelder verwende. Es ist Contact_Form_TextField. Lassen Sie mich ihm die gleiche Klasse geben, Contact_Form_TextField. Lassen Sie mich doppelklicken auf diesen Textbereich und ich werde seinen Namen in Nachricht ändern, und der Platzhalter wird Ihre Nachricht hier und einige Punkte schreiben, und es wird erforderlich sein. Jetzt ist es an der Zeit, unsere Schaltfläche „Senden“ zu ändern. Lassen Sie mich zurück zu meiner Designdatei gehen. Wie Sie sehen können, wird diese Schaltfläche „Senden“ das gleiche Styling haben , das wir für unsere primäre Schaltfläche, die Kontaktieren Sie uns und auch diese Schaltfläche „Get in Touch“ verwendet die Kontaktieren Sie uns haben. Seine Höhe wird 80 Pixel betragen. Gehen wir weiter und wählen Sie diese Schaltfläche aus. Ich werde ihm eine Klasse geben. Es wird Primär-Taste sein, und dann werde ich ihm eine Combo-Klasse geben. Lassen Sie uns Kontakt schreiben und der Text sieht gut aus. Jetzt müssen wir das Layout dieses Formulars ändern. Hier, wie Sie sehen können, nimmt dieses Textfeld Vollständiger Name die gesamte Breite seines übergeordneten Containers ein. Dann haben wir hier in der zweiten Zeile zwei Textfelder und schließlich wird diese Nachricht die gesamte Breite ihres übergeordneten Elements aufnehmen. Dieser Knopf wird auch die gesamte Breite seines Behälters einnehmen. Wie können wir dieses Layout erstellen? Nun, wir können das mit Flexbox tun, aber es wäre viel einfacher, wenn wir es mit einem Raster erstellen könnten, denn später, wenn wir unsere Website reaktionsfähig machen wollen, wird es viel einfacher sein, unser Raster anstatt eine Flexbox zu ändern. Ich werde voran gehen und hier einen Wrap erstellen. Ich werde diesen Formularblock auswählen, und ich werde ihm eine Klasse geben. Schreiben wir Contact__Form. Was wir tun müssen, ist einfach voran und wählen Sie diesen Contact_Form_Wrapper, den wir vor erstellt haben, und dann werde ich seine Anzeigeeinstellung von Block zu Raster ändern. Da gehen wir. Für dieses Raster brauche ich sechs Spalten und sechs Zeilen. Lassen Sie mich fortfahren und fügen Sie vier weitere Spalten mit diesem Plus-Button und vier weitere Zeilen hinzu. Außerdem werde ich die Lücke auf 40 Pixel ändern und auch hier gehen wir. Aber sie sehen nicht gut aus, das ist völlig in Ordnung. Ich werde „Fertig“ drücken und wenn ich diesen div-Block auswähle, und wenn ich über diesen kleinen Kreis schwebe und klicke und ziehe, kann ich all diese sechs Zellen aufnehmen, einfach so. Dann werde ich dasselbe für das E-Mail-Textfeld tun. Ich werde es auswählen und ich werde auf diesen Kreis klicken und einfach ziehen, um drei Zellen zu nehmen. Lassen Sie uns dasselbe für das Telefon-Textfeld tun. Es wird die nächsten drei Zellen aufnehmen. Das Nachrichten-Textfeld wird so viele verschiedene Zellen aufnehmen. Eigentlich wird es drei Reihen vollständig in Anspruch nehmen. Dann werde ich diese primäre Schaltfläche auswählen und es wird alle diese sechs Zellen aufnehmen. So weit, so gut. Lassen Sie mich eine Vorschau meines Projekts anzeigen. Wie Sie sehen können, sieht es gut aus. Dieser Textbereich sieht jedoch wie ein einfaches Textfeld aus, es ist nicht das, was wir wollen. Lasst uns voran gehen und das reparieren. Wenn ich diesen Textbereich auswähle, können Sie sehen, dass seine Höhe auf 70 Pixel eingestellt ist. Warum? Weil wir ihm dieses Contact_Form_TextField gegeben haben. Jetzt werde ich voran gehen und ihm einen Combo-Kurs geben. Lasst uns eine Nachricht schreiben. Ich werde diese Standardhöhe auf 200 Pixel überschreiben. Jetzt sieht es viel besser aus, lassen Sie mich eine Vorschau darauf. Schön. Aber was ist mit unserem Knopf? Ich werde es auswählen und ich werde ihm eine bestimmte Höhe geben. Es werden 80 Pixel sein, genau so. Nun, lassen Sie uns eine Vorschau auf unser Projekt. Sieht nett aus. Wie Sie sehen können, sobald ich mein Projekt in der Vorschau vorschau, ist dieser Button ein wenig nach oben verschoben. Das liegt daran, dass wir diesen Textbereich verwenden und es ist völlig in Ordnung. Es wird unsere Website nicht brechen, da dieser Textbereich nicht die gesamte Höhe seines Containers füllt, was dieser Contact__TextField div Block ist, dieser Button bewegt sich ein wenig nach oben. In Ordnung. Jetzt werde ich diese Überschrift auswählen und ich werde sie in Kontaktieren Sie uns ändern. Nun lassen Sie uns eine Vorschau auf unser Projekt. Hier haben wir die Navigationsleiste, wir haben die Kontaktieren Sie uns, das Formular, die Schaltfläche Absenden und die Fußzeile am unteren Rand. Alles sieht gut aus, außer einer Sache, dem Auffüllen dieses Platzhaltertextes. Lass uns voran gehen und das schnell beheben. Wenn ich hier zu meiner Designer-Datei gehe, können Sie sehen, dass dieser Text mehr Padding hat. Es hat 22 Pixel oben und eine 20 Pixel linke Polsterung. In der Tat werde ich das Auffüllen all dieser Textfelder ändern , denn wenn Sie sich das Design hier ansehen, können Sie sehen, dass alle diese Textfelder unterschiedliche Polsterung haben. Wie Sie sehen können, 22 Pixel oben und 20 Pixel links. Was soll ich tun? Anstatt das Padding hier für diese Nachrichten-Combo-Klasse zu ändern, werde ich mein Contact_form_TextField auswählen, dies ist unser Hauptbasistextfeld, und ich werde das Padding hier und die Änderung ändern, die ich mache wird auch auf diese Nachricht angewendet. Lassen Sie mich dieses Textfeld auswählen und ich werde seine obere Polsterung auf 20 Pixel ändern, es ist auch unten auf 20, und es ist links Polsterung auf 20. Jetzt sieht es viel besser aus, nicht wahr? Alles klar Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und wir sehen uns im nächsten. 56. Einführung in die Reaktion: Hey, jetzt, da wir unsere Website erfolgreich aufbauen, ist es an der Zeit, unsere Website reaktionsschnell zu gestalten. Wir haben bereits über die Grundlagen von Breakpoints gesprochen. Aber jetzt ist es an der Zeit, alle Dinge, die Sie zuvor gelernt haben, auf unser Projekt anzuwenden. Wenn es um Reaktionsfähigkeit geht, können wir zwei verschiedene Wege wählen. Wir können weitermachen und unsere Website abschnittsweise reagieren, oder wir könnten unsere Website reaktionsschnell Breakpoints nach Breakpoint machen. Beide Wege sind korrekt. Das ist eine Frage der Vorliebe. Das liegt an Ihnen, welche Sie wählen müssen. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Ich werde mit dem ersten Weg beginnen, der Abschnitt für Abschnitt ist. Es bedeutet, dass ich voran gehen muss und diese Navbar in allen Breakpoints reaktionsschnell machen muss. Im Tablet, im mobilen Querformat und im mobilen Portrait. In der zweiten Weise, die Breakpoint für Breakpoint ist,müssen wir jedoch die Breakpoint für Breakpoint ist, zum Tablet-Breakpoint gehen und wir müssen alle Abschnitte hier ändern, bis wir mit dem Ergebnis dieses besonderen Haltepunktszufrieden sind mit dem Ergebnis dieses besonderen Haltepunkts und dann werden wir zum nächsten Haltepunkt übergehen. Das ist genau das, was wir tun werden. Zuerst werden wir zum Tablet-Breakpoint gehen und wir werden alle Elemente hier ändern. Dann werden wir in die mobile Landschaft gehen und schließlich werden wir zum mobilen Porträt gehen. Aber Sie haben frei, zwischen diesen Wegen zu wählen. Alles klar, Leute. Das ist alles für dieses Video und wir werden anfangen, unsere Website im nächsten Video reaktionsschnell zu machen . Wir sehen uns dort. 57. Responsiveness: In diesem Video werden wir anfangen, unsere Website reaktionsschnell zu machen. Wie ich bereits erwähnt habe, werden wir Breakpoint für Breakpoint auf allen Seiten gehen. Wir fangen mit Tablet an. Im Moment auf dem Desktop sieht alles gut aus, aber wenn ich zum Tablet-Breakpoint gehe, ist hier alles durcheinander. Aber keine Sorge, wir werden das in Ordnung bringen. Wir beginnen mit der Navigationsleiste. Wie Sie hier oben sehen können, hat diese Navigationsleiste einige Probleme. Die Art und Weise, wie diese Elemente ausgerichtet sind, ist falsch, da wir auf dem Tablet diese Schaltfläche „Kontaktieren Sie uns“ nicht mehr benötigen. müssen wir verbergen. Außerdem sollte dieser Hamburger-Menüknopf auf der rechten Seite platziert werden. Hier haben wir diese zusätzliche Marge, diese zusätzliche obere Marge. Gehen wir weiter und reparieren das. Zuallererst werde ich darauf doppelklicken, denn um dieses Symbol zu ändern, müssen wir in das Master-Symbol gehen. Lassen Sie uns damit beginnen, diese Schaltfläche zu verstecken. Ich werde es auswählen, und wenn Sie sich erinnern, wenn Sie ein Element ausblenden möchten, können Sie zur Layoutdarstellung wechseln und die Anzeigeeinstellung auf keine ändern. Da gehen wir. Es ist jetzt versteckt, aber hier berührt dieses Logo den Rand unseres View-Ports, was nicht genau das ist, was wir wollen. Ich werde diesen Container auswählen, den Container in unserer Navigationsleiste. Wie Sie sehen können, ist die Polsterung auf 0 gesetzt. Ich gehe weiter und halte die Wahltaste auf meiner Tastatur oder Alt-Taste gedrückt und klicke und ziehe und füge 30 Pixel links und rechts gleichzeitig hinzu. Jetzt sieht es viel besser aus. Aber was ist mit diesem oberen Rand? Wie Sie hier sehen können, haben wir 70 Pixel oberen Rand, und ich werde es auswählen, und dann werde ich es auf 0 setzen. Da gehen wir, denn auf Tablet brauchen wir diese zusätzliche Marge nicht. Denken Sie daran, dass die Änderungen, die ich hier mache, sich auch auf andere Haltepunkte auswirken. Später, wenn wir zu mobilem Querformat und mobilem Portrait übergehen, wäre es viel einfacher, das Layout für diese Haltepunkte zu ändern. Da wir mit dem Ergebnis zufrieden sind, können wir auf diese Schaltfläche zurück zur Instanz klicken, und wir können mit dem nächsten Abschnitt fortfahren , der unser Heldenbereich ist. Unser Heldenbereich ist hier völlig unorganisiert. Warum? Denn wenn Sie sich erinnern, setzen wir für diesen Behälter die Richtung der Flussspitzen auf horizontal. Das machte Sinn für den Desktop-Haltepunkt, aber für das Tablet und kleinere Haltepunkte wäre es viel sinnvoller, die Richtung in vertikale zu ändern. Ich werde diesen Container hier auswählen. Ich werde die Richtung in die vertikale ändern. Es sieht jetzt schon viel besser aus. Dann werde ich alles auf das Zentrum hier ausrichten. Cool. Jetzt ist es Zeit, unsere Überschrift auszuwählen, und dann werde ich die Topografieausrichtung von links nach Mitte ändern. Ich werde all diese Takes Ebenen in der Mitte ausrichten. Ich werde diese Hero_Description auswählen, und ich werde das gleiche hier tun, aber ihre Ausrichtung sieht nicht gut aus. Warum? Denn wenn ich diesen Helden Inhalt Div Block auswähle und ich nach oben scrollen, kann ich diese Ausrichtung öffnen und hier bestellen. Hier kann ich die Ausrichtungen des Flex-Kindes ändern. In diesem Fall ist dieser Heldeninhalt Div-Block das Flex-Kind dieses Containers, da unser Container eine Flexbox ist, dieser Heldeninhalt ist sein Kind. Ich werde seine Ausrichtung in die Mitte ändern. Dann werde ich die maximale Breite dieses Heldeninhalts ändern. Im Moment ist die maximale Breite dieses Hero-Content-Div-Blocks auf 530 Pixel eingestellt. Das ist in Ordnung. Da wir jedoch die Richtung unserer Flexbox von horizontal nach vertikal geändert haben, wäre es viel sinnvoller, hier die maximale Breite zu erhöhen, da wir jetzt alles vertikal ausrichten. Ich werde die maximale Breite von 530 Pixel auf 700 Pixel ändern. Schön. Dann werde ich diese Hero_Description auswählen, und ich werde dasselbe auch für diesen Textblock tun. Ich werde seine maximale Breite auf 600 Pixel erhöhen, aber es ist nicht an der Mitte ausgerichtet. Wie kann ich das beheben? Nun, ich kann einfach diesen Helden Inhalt des Glücks auswählen und ich kann seine Anzeigeeinstellung auf Flexbox ändern, und dann kann ich seine Richtung in vertikal ändern. Richten Sie schließlich alles an der Mitte aus, genau so. So weit so gut. Jetzt ist es Zeit, um unsere Helden Tasten Div Block gehen. Wie Sie sehen können, ist unser „get in touch“ -Button verschwunden. Warum ist das so? Das liegt daran, dass wir, wenn wir die Anzeigeeinstellung unserer Schaltfläche in der Navigationsleiste ändern, vergessen haben, eine Combo-Klasse hinzuzufügen. Lassen Sie mich es Ihnen zeigen. Wenn ich zur Navigationsleiste gehe und wenn ich diese primäre Schaltfläche wähle, können Sie sehen, dass diese Schaltfläche nur eine Klasse hat. Dies ist die primäre Schaltflächen-Basisklasse. Unsere get in touch button hier hat auch diese primäre Taste Klasse. Lass mich zu diesem Div-Block gehen. Da gehen wir. Wenn ich es im Navigator auswähle, können Sie sehen, dass die Basisklasse primäre Schaltfläche ist, und hier haben wir eine Combo-Klasse. Daher habe ich zwei Möglichkeiten, dies zu beheben. Ich kann entweder die Anzeigeeinstellung hier überschreiben oder ich kann voran gehen und eine Combo-Klasse zu der Schaltfläche in unserer Navigationsleiste hinzufügen. Ich denke, es wäre viel einfacher, die Anzeigeeinstellung hier auf Schwarz zu überschreiben. Da haben wir diese Helden Combo Klasse. Ich werde es auf schwarz setzen, und da ist es. Es erscheint wieder. Aber diese Knöpfe sollten nebeneinander sitzen. Sie sollten nicht übereinander stapeln. Ich werde diese Helden Tasten auswählen, Div Block, und dann werde ich seine Anzeigeeinstellung auf Flexbox ändern und die Richtung ist auf horizontal eingestellt. Schön. Auch unsere Knöpfe sehen toll aus. Hier, wie Sie sehen können, haben wir so viele Top-Margen und das ist nicht, was wir wollen. Wenn ich diesen Heldeninhalt auswähle, können Sie sehen, dass er standardmäßig einen oberen Rand der oberen Zelle von 114 hat. Dies ist der Rand, den wir im Desktop-Breakpoint festlegen. Ich werde das jetzt auf 0 überschreiben, aber wir haben immer noch so viel leeren Platz hier. Ich werde meinen Abschnitt auswählen. Hier wird der obere Rand auf 100 Pixel gesetzt. Ich werde es auf 50 ändern. Jetzt sieht alles gut aus. Aber was ist mit dem Bildbereich? Wie Sie dieses Bild sehen können, sieht es so groß aus. Gehen wir weiter und reparieren das. Lassen Sie mich dieses Heldenbild auswählen, Div Block, und ich werde hineingehen und lassen Sie mich dieses Hauptbild wählen. Wie Sie sehen können, haben wir ihm keine Klasse gegeben. Ich werde voran gehen und ihm eine Klasse geben. Jetzt schreiben wir Hero__ Image__Main. Ich kann darauf doppelklicken. Wie Sie sehen können, ist die Breite auf auto eingestellt. Ich werde es auf etwas um 500 und vielleicht 60 oder 70 Pixel reduzieren. Sie können hier verschiedene Zahlen ausprobieren, wenn Sie keine bestimmte Nummer haben und sehen, ob es gut aussieht oder nicht. Jetzt sieht es viel besser aus. Diese Karten sind auch zu groß. Ich werde diese Heldenkarte 1 auswählen, und ich werde es ein wenig nach unten skalieren, einfach so. Hier beträgt die Breite 328 Pixel. Für diesen, werde ich es auch auf 328 setzen. Aber wie Sie hier sehen können, haben wir nicht genug Platz zwischen unseren Tasten und unseren Bildern. Nun, ich werde dieses Heldenbild auswählen, und ich werde ihm einen oberen Rand geben. Lassen Sie mich den oberen Rand auf etwa 40 Pixel erhöhen. Unser Heldenbereich sieht jetzt toll aus. Jetzt können wir zum nächsten Abschnitt übergehen. Wenn ich dieses Raster auswähle, können Sie sehen, dass wir auf dem Tablet nicht so viel Platz haben. Daher können wir eines dieser Logos entfernen , wenn wir auf das Tablet oder kleinere Haltepunkte gehen. Wie können wir das tun? Das ist so einfach. Ich kann einfach diesen Amazon Div Block auswählen, das letzte Logo. Ich werde ihm eine Combo-Klasse geben, weil wir seine Anzeigeeinstellung auf keine ändern werden und wir andere Logos nicht beeinflussen werden. Schreiben wir Amazon hier. Dann werde ich seine Anzeigeeinstellung von flex zu none ändern. Da gehen wir, es ist verschwunden, aber hier haben wir so viel Platz. Wäre es nicht besser, wenn wir zwei Linien Logo anstelle einer Zeile haben könnten? Ich glaube schon. Ich werde dieses Raster bearbeiten. Wenn ich dieses Gitter-Logos auswähle und wenn ich hier auf diese rosa Schaltfläche klicke, kann ich einfach eine weitere Zeile hinzufügen und einige dieser Spalten entfernen. Lassen Sie mich diese Spalten entfernen. Jetzt habe ich ein zwei-mal-zwei-Gitter. Ich werde die Lücke hier für die Spalte auf 40 Pixel ändern. Lass mich „Fertig“ drücken. Sie sehen gut aus, aber sie sind nicht zentriert, wie Sie hier sehen können, sind sie auf der linken Seite ihrer Zellen ausgerichtet. Wie können wir das beheben? Während dieses Grid_Logos ausgewählt ist, kann ich seine Ausrichtung in zentrieren und hier zentrieren. Jetzt sehen sie fantastisch aus. Unser Kundenbereich ist ebenfalls bereit. Jetzt können wir zum nächsten Abschnitt übergehen. Hier haben wir den letzten Projektabschnitt, und ich denke, wir müssen hier nichts ändern. Lassen Sie mich die Dimension dieses Bildschirms ändern , um zu sehen, ob wir etwas ändern müssen oder nicht. Wenn ich diesen Griff hier auf der rechten Seite packe und ich in Bezug auf Fließfähigkeit ziehe, sehen sie gut aus. Aber hier haben wir ein Problem. Wie Sie sehen können, diese Learn More Button, bewegen Sie sich ein wenig nach unten. Das liegt daran, dass diese Projektbeschreibung einige untere Ränder hat. Ich werde es auswählen, und ich werde diese Marge von 40 auf vielleicht 10 verringern. Jetzt sieht es viel besser aus. Da gehen wir. Jetzt können wir zum anderen Abschnitt gehen, der die Zeugenaussage ist. Was sollen wir hier tun? Nun, zuerst müssen wir den oberen Rand verringern. Ich werde diesen Abschnitt auswählen, und ich werde den oberen Rand von 200 Pixel auf 100 Pixel verringern , weil es jetzt zu viel ist. Es sieht viel besser aus, dann werde ich diese Überschrift des Zeugnisses auswählen. Ich werde die maximale Breite dafür einstellen, dass hier eine echte Zeile Texte zu haben. Ich werde 400 Pixel schreiben. Da gehen wir. Dann werde ich seine Textausrichtung hier in die Mitte ändern und die Zeilenhöhe auf 150 erhöhen. Fünfzig Prozent und das nächste, was wir hier beheben müssen, ist der Hintergrund unserer Umlaufbahn. Wie Sie sehen können, wurde unsere Umlaufbahn wiederholt. Ich werde meinen Abschnitt auswählen und zu den Hintergründen hier gehen. Wenn ich auf dieses Orbitbild klicke, sehen Sie von hier aus, dass die Position oben links gesetzt ist und die Kachel-Option aktiviert ist. Ich werde die Kachel auf Dämmerungsfliese setzen und dann werde ich es in die Mitte neu positionieren und schließlich werde ich seine Größe ändern, um zu decken statt enthalten, jetzt sieht es gut aus. Das nächste, was ich hier ändern werde, ist die Größe dieser Memojis. Wenn ich sie hier auswähle, können Sie sehen, dass seine Breite und Höhe auf 150 Pixel eingestellt sind. Da wir weniger Platz auf einem Tablet haben, werde ich voran gehen und es auf 130 mal 130 Pixel reduzieren. Da diese Memojis ihre eigenen Kombinationsklassen haben, gelten die Änderungen, die ich an diesem ersten Memoji vornehme, nicht für andere Memojis hier. Wir können entweder voran gehen und die Größe jedes Memoji ändern, oder ich könnte diese Operation einfach rückgängig machen, es ist Befehl Z oder STRG+Z. Ich kann diese Combo-Klasse entfernen. Es wurde verlegt, das ist völlig in Ordnung. Dann kann ich seine Breite und Höhe auf 130 x 130 Pixel verringern und wieder werde ich seine Combo-Klasse hinzufügen, eine dort gehen wir. Unser Testimonial Abschnitt ist ebenfalls erledigt. Gehen wir nun zum Abschnitt „Dienste“ über. Ich denke, hier sieht alles gut aus, aber es gibt ein Problem. Wenn ich diese Dimension nur verkleinere, können Sie sehen, dass diese Schaltfläche „Weitere Informationen“ nach unten verschoben wird und sie nicht mit anderen „Weitere Informationen“ -Schaltflächen ausgerichtet ist. Das ist ein Problem, also wie können wir das beheben? Ich werde diese Projektbeschreibung auswählen und den unteren Rand von 10 auf, sagen wir, 50 Pixel erhöhen . Dann werde ich den Service-Content-Div-Block auswählen. Es ist der div-Block, der den Service-Text und diese Schaltfläche enthält, wie wir hier sehen können. Ich werde ein spezifisches Hoch darauf setzen. Im Moment ist es auf Auto eingestellt Ich werde es auf 100 Prozent setzen, dass es die gesamte verfügbare Höhe meiner Karte einnimmt, genau so, dass es jetzt behoben ist. Lassen Sie mich es noch einmal überprüfen, alles sieht jetzt perfekt aus. Nun gehen wir zum nächsten Abschnitt über, der unser CTA ist. Wie Sie sehen können, ist unser Knopf hier wieder verschwunden. Dies ist das gleiche Problem, das wir mit dieser Schaltfläche hier hatten, mit diesem immer Touch-Button, so dass wir nur seine Anzeigeeinstellung zu blockieren überschreiben müssen. Ich werde auf diesen CTA-Abschnitt doppelklicken und wenn ich zum Container gehe und nach meiner Schaltfläche im Formular hier suche, es auswählen und ich kann es überschreiben, um zu blockieren. Es gibt nichts anderes, was wir tun müssen, alles sieht gut aus. Aber was ist mit der Fußzeile? Lassen Sie mich nachsehen. Die Fußzeile sieht auch gut aus. Das einzige, was ich tun werde, ist, den oberen Rand zu verringern , weil wir hier zu viel Platz haben. Ich werde darauf doppelklicken. Hier, wie Sie sehen können, hat es einen 200 Pixel oberen Rand. Ich kann es auf 100 Pixel reduzieren, jetzt sieht es viel besser aus. Ich werde dasselbe für die CTA-Sektion tun. Wenn ich darauf doppelklicke, können Sie sehen, dass der obere Rand auf 200 eingestellt ist, ich werde es hier auf 100 setzen, um einen konsistenten Abstand zu haben. Was ist mit unseren Dienstleistungen hier? Das Gleiche hier auch. Hier habe ich jedoch keine Combo-Klasse, also werde ich hier eine Combo-Klasse hinzufügen. Ich werde unsere Dienste schreiben und dann werde ich den oberen Rand von 200 auf 100 Pixel verringern. Es sieht jetzt viel besser aus. Aber hier, wie Sie sehen können, haben wir immer noch das Problem mit dieser Schaltfläche Mehr erfahren. Hier, wenn ich diese Projektbeschreibung auswähle, können Sie sehen, dass der untere Rand auf 50 gesetzt ist, es ist zu viel, also werde ich es auf 10 Pixel reduzieren, und jetzt ist das Problem gelöst. Das letzte, was ich hier tun werde, ist, wählen Sie diesen Abschnitt, diesen letzten Projektabschnitt, und ich werde den oberen Rand von 200 auf 100 Pixel verringern. Jetzt sieht alles gut aus. Gehen wir weiter und schauen uns alles an. Unsere Nav Bar sieht gut aus, ich werde seine Fließfähigkeit überprüfen. Unser Heldenbereich sieht gut aus, ich werde nach unten scrollen, unser Logo-Bereich sieht gut aus, die jüngsten Projekte, den Testimonial Abschnitt, dann haben wir unsere Dienste, den CTA Abschnitt und unsere Fußzeile. Alles sieht toll aus. Unsere Homepage ist fertig, aber was ist mit anderen Seiten? Jetzt ist es an der Zeit, weiterzumachen und unsere anderen Seiten auch ansprechbar zu machen, wie etwa kontaktieren Sie uns und die Projektseite. Lassen Sie mich zu den Seiten gehen. Von hier aus gehe ich auf die Seite „Kontaktieren Sie uns“. Wie Sie sehen können, sieht alles gut aus. Warum ist das so? Das liegt daran, dass wir hier ein Gitter benutzt haben. Wenn Sie Gitter anstelle von Flexboxen verwenden, reagiert dies standardmäßig. Wie Sie sehen können, ist es flüssig und alles sieht gut aus, so dass wir das Layout nicht vollständig ändern müssen. Das einzige, was wir hier tun müssen, ist, unsere Schaltfläche auszuwählen und einfach diese Anzeigeeinstellung von keiner zu blockieren, einfach so zu überschreiben. Jetzt können Sie sehen, dass es gut aussieht, schön, wenn ich eine Vorschau darauf. Eine weitere Sache, die ich hier bemerkt habe, ist dieser obere Rand. Wir haben so viel Platz hier oben. Ich werde voran gehen und das schnell reparieren. Wenn ich diesen Abschnitt auswähle, können Sie sehen, dass er einen oberen Rand von 200 Pixeln hat. Ich werde es auf 100 Pixel reduzieren und da gehen wir, unsere Kontakt-Us-Seite ist auch ansprechbar. Jetzt gehen wir weiter und überprüfen Sie unsere Projektseite. Wenn ich auf die CMS-Sammlungsseite gehe und auf die Projektseite gehe, kann ich hier überprüfen, ob alles gut aussieht oder nicht. Lassen Sie mich die Dimension verringern, so weit so gut. Wir müssen den oberen Teil nicht ändern. Was ist mit hier? Nun, ich denke, wir können die Schriftgröße dieses Bereichstextes erhöhen, aber nicht nur für das Tablet, wir können es auch für den Desktop erhöhen. Ich gehe für eine Sekunde zum Desktop-Breakpunkt und während es ausgewählt ist, werde ich es auf 20 Pixel erhöhen. Dann werde ich die Zeilenhöhe auf 150 Prozent erhöhen. Sieht viel besser aus. Wir haben vergessen, es vorher zu erhöhen, und jetzt ist es behoben. Mal sehen, ob ich hier noch etwas ändern muss, sieht es gut aus. Was ist mit diesen anderen Projekten Karte? Lass mich sehen, nein, sie sehen toll aus. Was ist mit der CTA-Sektion? Es sieht gut aus, auch die Fußzeile sieht gut aus. Ich muss nichts anderes ändern. Das ist die Schönheit, Websites mit Webflow zu erstellen, die meisten Dinge reagieren standardmäßig, so dass wir nicht so viele verschiedene Änderungen vornehmen müssen. Alles klar, Jungs, das ist alles für den Tablet-Haltepunkt. Wir haben unsere Homepage, Kontaktseite und die Projektseite erfolgreich modifiziert . Jetzt ist es Zeit, in die mobile Landschaft überzugehen. Das ist die Aufgabe unserer nächsten Lektion. Wir sehen uns im nächsten Video. 58. Reaktionsfähigkeit Landschaft: Hey, jetzt ist es Zeit, weiterzumachen und an der mobilen Landschaft Haltepunkt zu arbeiten. Bist du bereit? Fangen wir an. Ich werde hier in die mobile Landschaft gehen, und mal sehen, ob wir hier einige Änderungen vornehmen müssen. Diese Überschrift sieht für die mobile Querschnittsdimension ein wenig groß aus. Daher werde ich es auswählen und ich werde seine Schriftgröße von 60 Pixel auf 40 Pixel verringern . Ich werde das Gleiche hier machen, Beschreibung. Ich werde es auswählen. Wie Sie sehen können, ist seine Größe auf 20 Pixel eingestellt, werde ich es auf 17 Pixel setzen. Wir müssen unsere Schaltflächen nicht ändern. Dieser Abschnitt sieht ebenfalls gut aus. Für die mobile Landschaft und das mobile Porträt, denke ich, dass es viel sinnvoller ist, diese beiden kleinen Karten zu verstecken, denn auf mobilen Bildschirmen haben wir nicht so viel Platz. Daher müssen wir unser Design nicht laut machen. Ich werde diese Heldenkarte 1 auswählen, und ich werde voran gehen und seine Anzeigeeinstellung auf keine setzen, hier auch für diese Heldenkarte 2. Da gehen wir, und sie sind im mobilen Querformat und im mobilen Portrait versteckt. Denn wie Sie sich erinnern, werden Änderungen, die wir an unseren Haltepunkten vornehmen, kaskadiert. Gehen wir zum nächsten Abschnitt. Unser Heldenbereich sieht gut aus. Ich werde nach unten scrollen. Was ist mit dem Kundenbereich? Es sieht auch gut aus. Hier haben wir jedoch so viel Platz, also werde ich diesen Client-Abschnitt hier auswählen, und dann werde ich seinen oberen Rand auf Null anstelle von 130 Pixeln setzen, genau so. Nun sieht es viel besser aus, denn wenn es um die mobile Interaktion geht, wollen wir nicht, dass der Benutzer so viel scrollen, um den Inhalt konsumieren zu können. Deshalb sollten wir, wenn wir können, die Margen zwischen unseren Abschnitten verringern. Was ist mit den letzten Projekten Abschnitt, hier haben wir ein Problem. Wie Sie sehen können, sind diese Karten außerhalb unseres Bildschirms. Da gehen wir. Wie können wir das beheben? Nun, die beste Lösung ist, einfach diese Sammlungsliste auszuwählen. Wenn Sie sich erinnern, verwenden wir dafür das Gitter. Ich werde den Bildschirm ändern. Hier haben wir eine Reihe und drei Spalten. Ich werde auf diese rosa Schaltfläche klicken, und ich werde zwei Spalten entfernen und zwei Zeilen hinzufügen, um sie vertikal zu stapeln. Lassen Sie mich voran gehen und entfernen Sie zwei Spalten hier, und fügen Sie zwei Zeilen hinzu. Da gehen wir, aber hier haben wir ein Problem. Wie Sie sehen können, nimmt diese Karte nicht die ganze Breite ihres Elternteils ein. Wie können wir das beheben? Wenn ich voran gehe und meinen div Block hier, dieses Projekt Auto div Block, können Sie sehen, dass wir eine maximale Breite dafür setzen. Ich werde diese maximale Breite von 340 Pixel auf 100 Prozent ändern , um die gesamte Breite seines übergeordneten Elements zu übernehmen. Da gehen wir. Jetzt nehmen wir die gesamte Breite seiner Zelle in unserem Gitter auf und das Problem ist gelöst. Jetzt lass es mich mal nachsehen. Da gehen wir. Alles sieht flüssig aus, es sieht toll aus. Was ist mit dem nächsten Abschnitt? Wow, hier ist alles unorganisiert. Gehen wir weiter und reparieren das. Zuerst werde ich diese Überschrift auswählen und ich werde die Schriftgröße von 40 Pixel auf 30 Pixel verringern . Außerdem werde ich seine maximale Breite von 400 Pixel auf 500 Pixel erhöhen , genau so. Dann wähle ich hier unseren Container aus. Wenn ich nach oben scrolle, können Sie sehen, dass die Ausrichtung auf Leerzeichen gesetzt ist. Ich werde es in die Mitte ändern. Lassen Sie mich diesen Testimonial Text auswählen und seine Schriftgröße auf 17 Pixel verringern. Es ist zu groß für unseren mobilen Bildschirm, und ich werde ihm einige untere Ränder geben. Das liegt bei 30 Pixeln am unteren Rand. Ich werde meine Überschrift hier auswählen, und ich werde den unteren Rand auf 30 Pixel erhöhen, um einen konsistenten Abstand für alle unsere Elemente zu haben. Jetzt sieht alles gut aus. Wie Sie in Bezug auf die Fließfähigkeit sehen können, sieht es gut aus, also sind wir gut zu gehen. Gehen wir zum nächsten Abschnitt. Hier haben wir das gleiche Problem, das wir für diesen letzten Projektabschnitt hatten. Die Lösung ist die gleiche. Ich gehe voran und wähle dieses Dienstraster aus, und dann werde ich dieses Raster ändern. Ich werde zwei Spalten entfernen. Dann werde ich hier zwei Zeilen hinzufügen. Dann werde ich diese Servicekarte auswählen und ihre maximale Breite von 340 Pixel auf 100 Prozent ändern , dass sie die gesamte Breite ihres übergeordneten Elements einnimmt. Alles sieht gut aus, außer diesem Symbol. Wählen wir es aus. Wie Sie sehen können, ist dies ein Flex-Kind, und wenn wir auf die Größe hier auf der rechten Seite gehen, können Sie sehen, dass es eingestellt ist, um zu schrumpfen, wenn nötig. Wir haben zwei weitere Möglichkeiten. Wir sind gewachsen, wenn möglich, und wir haben nicht schrumpfen oder wachsen. Ich werde es so einstellen, dass es nicht schrumpfen oder wachsen kann, ad da wir gehen, es sieht jetzt gut aus. Da es jedoch eine Kombinationsklasse hat, die Änderung nur auf diesen bestimmten div-Block angewendet. Ich werde diese Eigenschaft zurücksetzen, halten Sie die „Option“ -Taste oder „Alt“ -Taste auf Ihrer Tastatur gedrückt und klicken Sie darauf. Dann werde ich diese eine Combo-Klasse entfernen. Jetzt werde ich die Größe ändern, um nicht zu schrumpfen oder zu wachsen. Schließlich werde ich die erste Combo-Klasse hinzufügen. Jetzt sieht alles gut aus. Lassen Sie mich das überprüfen. Aber hier haben wir ein anderes Problem. Wie wir sehen können, hat diese Projektbeschreibung nicht genügend unterer Rand. Während wir im mobilen Querformat Haltepunkt sind, werde ich diese Projektbeschreibung auswählen und ich werde sie von 10 Pixel auf 40 Pixel erhöhen. Jetzt sieht es viel besser aus. Können Sie sehen, wie einfach es ist, Ihre Website reaktionsschnell zu machen? Sie müssen nur die Stylings an verschiedenen Haltepunkten ändern. Dieser Abschnitt sieht ebenfalls gut aus. Was ist mit der CTA-Sektion? Dieser Abschnitt erfordert einige Änderungen Gehen wir also weiter und nehmen Sie einige Änderungen vor. Zunächst einmal werde ich diese Überschrift auswählen und ich werde die Schriftgröße von 40 Pixel auf 30 Pixel verringern. Dieser Untertitel sieht gut aus, und hier hat unsere Form eine horizontale Richtung. Ich werde es in vertikal ändern, aber diese Schaltfläche nimmt nicht die gesamte Breite seines Elternteils ein. Nun, lassen Sie mich diesen „Abonnieren“ -Button hier auswählen, und ich werde seine Breite auf 100 Prozent einstellen. Ich werde diesen linken Rand hier von 20 Pixel auf Null entfernen. Schön. Außerdem werde ich eine bestimmte Höhe darauf einstellen, also lass mich 80 Pixel schreiben. Das einzige, was noch übrig ist, hier einige obere Ränder hinzuzufügen. Ich werde ihm einen oberen Rand von 20 Pixeln geben, genau so. Jetzt lass mich zurück in mein Inneres gehen. Hier ist es. Sieht fantastisch aus. Ist es nicht? Das Letzte, was wir hier ändern müssen, ist unsere Fußzeile. Wie Sie sehen können, sieht dieses Layout für unsere mobile Landschaft und mobile Portrait definitiv nicht gut aus, also was sollten wir tun? Hier haben wir eine horizontale Richtung. Ich werde auf diese Fußzeile doppelklicken, und ich werde meinen Container auswählen, und dann werde ich die Richtung von horizontal nach vertikal ändern. Außerdem werde ich die Ausrichtung in die Mitte ändern. Dann werde ich diesen Fußzeileninhalt-div-Block auswählen und alles an der Mitte ausrichten. Außerdem werde ich diese Adresse auswählen und ihre Topografieausrichtung in die Mitte ändern. Schließlich werde ich diesen Fußzeileninhalt-div-Block auswählen, und ich werde hier einige untere Ränder hinzufügen. Fügen wir hier einen 30 Pixel unteren Rand hinzu. Sieht fantastisch aus. Unsere Homepage sieht gut aus. Nun gehen wir weiter und ändern andere Seiten. Ich gehe zu meiner Kontaktseite. Mal sehen, wie es hier aussieht. Hier haben wir ein Problem. Zuerst werde ich diese Überschrift auswählen und ich werde die Schriftgröße von 60-40 verringern. Dann müssen wir das Layout unseres Formulars ändern. Ich werde diesen Kontaktformular-Wrapper auswählen, das Raster, das wir erstellt haben. Wenn ich auf diese rosa Schaltfläche klicke, können Sie sehen, dass wir sechs Spalten und sechs Zeilen haben. Meinung nach ist es kein gutes Raster für diese mobile Landschaft und sogar für mobiles Porträt. Anstatt diese beiden Textfelder zu haben, sitzen die E-Mail- und Telefon-Textfelder nebeneinander. Ich werde all diese Textfelder übereinander stapeln lassen. Lassen Sie mich gehen und entfernen Sie drei Spalten von hier, genau so, und ich werde auch eine Zeile entfernen. Nichts hat sich geändert. Das ist richtig, weil wir unseren Div-Block, den ersten, manuell auswählen müssen. Wie Sie sehen können, nimmt dieser Div-Block sechs Spalten ein. Das ist nicht das, was wir wollen. Ich werde auf diesen kleinen Kreis klicken und ihn auf die linke Seite ziehen , bis er drei Zellen einnimmt. Cool, ich werde dasselbe für diesen Message-Div-Block tun. Dies ist unser letzter div-Block. Lassen Sie uns voran und lassen Sie es nur drei Zellen aufnehmen. Es sieht gut aus, aber was ist mit diesem Knopf? Ich werde es auswählen und ich werde das Gleiche hier tun. Da ist es. Jetzt sieht unser Layout viel besser aus. Lassen Sie uns eine Vorschau anzeigen. Hier ist unsere Form, es sieht gut aus in Bezug auf Fließfähigkeit und Reaktionsfähigkeit. Haben Sie bemerkt, dass unsere Fußzeile auch auf dieser Seite geändert wurde. Da wir Symbole verwenden, auf anderen Seiten, wenn wir unsere Symbole auf einer Seite reaktionsschnell machen ändert sich dies auchauf anderen Seiten, wenn wir unsere Symbole auf einer Seite reaktionsschnell machen. Gehen wir nun zur Projektseite. Ich werde voran gehen und lassen Sie mich diese Projektvorlage auswählen, cool. Mal sehen, was wir hier haben. Wie ich sehen kann, sieht die Überschrift gut aus. Der Projektseitentyp sieht gut aus. Zuallererst werde ich diesen Projekttyp Wrapper auswählen und ich werde seine Richtung in vertikal, schön ändern. Dann lassen Sie mich diesen Projektseitentyp-Textblock auswählen und lassen Sie uns einige untere Ränder hinzufügen. Ich werde hier 10 Pixel hinzufügen, es sieht gut aus. Was müssen wir hier sonst noch tun? Wie Sie hier sehen können, ist der obere Rand dieses Bildes zu groß. Wenn ich diesen Projekttyp Wrapper auswähle, können Sie sehen, dass er einen unteren Rand von 80 Pixel hat. Ich werde voran gehen und es auf 40 Pixel reduzieren. Jetzt sieht es viel besser aus. Ich werde nach unten scrollen. Hier, wie Sie sehen können, haben wir auch zu viel Platz. Lassen Sie uns diese Rich-Texte hier auswählen. Dann werde ich den oberen Rand von 70 Pixel auf 20 Pixel verringern. Außerdem werde ich die Schriftgröße von 20 Pixel auf 17 Pixel verringern. Denn gerade jetzt sind wir auf mobilen Bildschirmen. Ich werde nach unten scrollen, ich werde diese anderen Projekte Überschrift auswählen, und ich werde die Schriftgröße auf 30 Pixel verringern. Hier, wie Sie sehen können, haben wir zu viel Platz. Lassen Sie mich meine Sammlung diesen Wrapper auswählen, und ich werde den oberen Rand von 70 Pixel auf 30 Pixel verringern. Ich werde nach unten scrollen. Alles sieht gut aus. Hier sieht auch alles gut aus. Jetzt lass mich die Fließfähigkeit meiner Elemente überprüfen, nett. Alles ist reaktionsschnell. Was ist mit hier, großartig. Ich denke, wenn ich diesen Projektseitentyp auswähle und weitere Schaltflächenränder hinzufüge, wäre es viel besser. Ich werde den unteren Rand auf 20 Pixel setzen. Es sieht jetzt viel besser aus. Hier haben wir keinen konsistenten Abstand. Ich werde diesen Projekttyp Wrapper auswählen. Ich habe hier einen 40 Pixel unteren Rand hinzugefügt. Für diese Rich-Text habe ich einen oberen Rand von 20 Pixeln hinzugefügt. Ich werde diesen oberen Rand auf 40 Pixel erhöhen, um einen konsistenten Abstand zu haben. Jetzt sieht es toll aus. Alles klar, Leute, das ist alles für dieses Video. Wir modifizieren erfolgreich die CSS-Eigenschaften unserer Elemente auf den mobilen Querschnitts-Breakpoints und überprüfen die Fließfähigkeit aller unserer Elemente. Ich hoffe, Sie haben dieses Video genossen und wir sehen uns im nächsten. 59. Mobiles Porträt: Hey, willkommen zurück. In diesem Video werden wir weitermachen und unsere Website auf dem mobilen Portrait-Breakpoint reagieren. Wenn du bereit bist, lass uns anfangen. Ich gehe zum mobilen Portrait-Breakpoint und lass uns sehen, was wir hier haben. Ich werde die Fließfähigkeit überprüfen. Die meisten unserer Elemente sehen gut aus, weil wir bereits einige Änderungen am mobilen Querschnitts-Breakpoint vorgenommen haben. Wir müssen hier nicht so viele Änderungen vornehmen. Das erste, was ich hier bemerkte, ist die Schriftgröße dieser Überschrift. Für mobiles Porträt sieht es zu groß aus. Ich werde es auswählen und ich werde die Schriftgröße auf 30 Pixel verringern. Die Schriftgröße dieser Heldenbeschreibung sieht gut aus. Das werde ich nicht ändern. Was ist mit diesen Knöpfen? Sie sehen gut aus, aber mal sehen, ob ich diesen Bildschirm kleiner mache, wie sie aussehen. Wie Sie sehen können, werden sie geschrumpft und das ist nicht das, was ich will. Ich werde diesen Block auswählen, Helden Tasten. Lass mich nach oben scrollen. Die Richtung dieser Flexbox ist horizontal. Ich werde es in Vertikal ändern. Dann wähle ich diesen „Kontakt aufnehmen“ -Button aus und lasse mich den rechten Rand entfernen. Ich werde es auf 0 setzen, nett. Schließlich werde ich einige untere Ränder hinzufügen. Lassen Sie uns den unteren Rand auf 20 Pixel setzen. Wenn ich nun die Fließfähigkeit meiner Elemente überprüfe, können Sie sehen, dass sie nicht mehr geschrumpft sind. Schön, das Bild sieht gut aus. Wir haben diese Karten bereits entfernt. Logos sehen auch gut aus. Da wir hier jedoch weniger Platz zum Arbeiten haben. Ich denke, wir können voran gehen und die linke und rechte Polsterung unserer Abschnitte ändern. Was meinst du? Ich finde, es ist eine gute Idee? Ich werde diesen Abschnitt auswählen. Wie Sie sehen können, sind die linke und rechte Polsterung auf 30 eingestellt. Ich werde es auf 20 Pixel reduzieren. Aber da ich diese Änderung auf Alle Abschnitte anwenden werde, werde ich zuerst die Hero-Combo-Klasse entfernen, weil ich diese Änderung an meiner Basisklasse, dieser Abschnittsklasse, vornehmen muss . 'm gehen, um diese Helden Combo-Klasse zu entfernen. Dann halte ich die Wahltaste oder die Alt-Taste auf meiner Tastatur gedrückt und verkleinere die Polsterung auf 20 Pixel. Wieder werde ich die Hero-Combo-Klasse hinzufügen. Schön. Nun, wie Sie sehen können, wurden die linke und rechte Polsterung aller Abschnitte geändert. Wenn ich diese Client-Abschnitt auswähle, da gehen wir, die Polsterung wurde geändert. Wenn ich diesen Abschnitt der letzten Projekte auswähle, gibt es es, und jetzt sehen sie viel besser aus. Der aktuelle Projektabschnitt sieht gut aus. Ich werde hier runter scrollen. Ich denke, wir müssen einige dieser Emojis entfernen, weil dieser Abschnitt zu laut ist. Wie kann ich diese Emojis entfernen? Ich kann nicht einfach Rücktaste oder Löschen drücken da es in diesem Fall von allen Haltepunkten entfernt wird. Daher werde ich seine Anzeigeeinstellung auf none setzen. Ich werde dieses auswählen und ich werde dasselbe tun. Dann wähle ich diese beiden Emojis aus und lass uns ihre Position hier ändern. Lassen Sie es uns oben links setzen. Für diesen hier werde ich es nach oben rechts setzen. Bringen wir sie ein bisschen runter. Vielleicht könnte ich seine Top-Position ein wenig ändern. Ich werde es auf 5 Prozent für beide setzen. Sieht nett aus. Was ist mit der Schriftgröße hier? Die Schriftgröße sieht gut aus. Meiner Meinung nach. Wir müssen das nicht ändern, aber hier haben wir zu viel Platz. Vielleicht kann ich diesen Abschnitt auswählen und ich kann seine Höhe von 622 Pixel auf vielleicht 550 Pixel verringern . Jetzt sieht es meiner Meinung nach viel besser aus. Das Letzte, was ich tun werde, ist die Größe dieser Emojis zu ändern. Ich werde dieses Emoji auswählen und ich werde seine Breite und Höhe auf 100 Pixel verringern . Ich werde das Gleiche hier tun, da sie einige Combo-Klassen haben. Sie sehen jetzt viel besser aus. Jetzt, wo ich sie kleiner gemacht habe, werde ich ihre Position wieder ändern. Lassen Sie mich es um 5 Prozent auf die linke Seite bewegen. Ich werde dieses Emoji um 5 Prozent auf die rechte Seite verschieben. Erstaunlich. Lassen Sie mich die Fließfähigkeit meiner Elemente überprüfen. Schön. Alles sieht reaktionsschnell aus und es sieht gut aus. Gehen wir zum nächsten Abschnitt über, der unsere Dienstleistungen ist. Diese Karten sehen toll aus. Wir müssen keine Änderungen vornehmen. Ich gehe zum nächsten Abschnitt, der CTA-Sektion ist. Zuerst werde ich diese CTA-Überschrift auswählen und ich werde sie an der Mitte im Typografieabschnitt ausrichten, wahrscheinlich kann ich die Zeilenhöhe auch auf 150 Prozent erhöhen. Was ist mit diesem Formular? Nun, ich kann diesen Formularblock auswählen und seine Breite ist auf auto eingestellt. Ich kann es auf 90 Prozent setzen und ich werde dieses Textfeld innerhalb des CTA-Textfeld-Rappers auswählen , und ich werde seine Breite auf 100 Prozent ändern. Jetzt braucht es 100 Prozent seines Elternteils mit nichts mehr und nichts anderes wird benötigt. Eigentlich sieht es ziemlich gut aus. Footer sieht auch gut aus. Unsere Homepage ist fertig. Schauen wir es uns noch einmal an. Wenn ich versuche, diese Dimension noch kleiner zu machen, sie sich außerhalb unseres Ansichtsfensters. Nun, das können wir reparieren. Wir können einfach dieses Gitter-Logos auswählen und dann das Raster ändern. Wir könnten einfach zwei weitere Zeilen hinzufügen und einfach eine dieser Spalten entfernen. Genau so. Jetzt werden wir uns diesem Problem nicht mehr stellen. Unsere Homepage sieht toll aus. Jetzt gehen wir weiter und schauen Sie sich andere Seiten an. Ich gehe auf die Kontaktseite hier alles sieht gut aus. Ich werde nur eine Vorschau anzeigen und lassen Sie mich sehen, ob es in Bezug auf die Fließfähigkeit gut funktioniert, es sieht sehr gut aus. Das liegt daran, dass wir Gitter verwendet haben. Unser Knopf sieht auch gut aus. Was ist mit unserer Projektseite? Lassen Sie mich hier auf die Projektseite gehen und überprüfen Sie, ob es auch perfekt funktioniert. Alles sieht gut aus. Wie Sie sehen können, muss ich die Zeilenhöhe dieses Projektseitentyps erhöhen. Ich werde es auswählen und ich werde die Zeilenhöhe auf 150 Prozent erhöhen. Jetzt sieht es viel besser aus. Lassen Sie uns andere Elemente überprüfen. Die Schriftgröße sieht gut aus. Der Abschnitt für andere Projekte sieht ebenfalls gut aus. Ich werde den CTA-Abschnitt nach unten scrollen sieht gut aus, da es ein Symbol ist. Aber hier im CTA-Sektion haben wir ein Problem und das ist das Padding. Die Polsterung hier ist nicht konsistent. Für andere Abschnitte haben wir eine 20 Pixel linke und rechte Polsterung verwendet. Aber für diese CTA, werde ich diesen Abschnitt auswählen. Wie Sie sehen können, haben wir die 20 Pixel links und rechts Polsterung. Mal sehen, wie wir das beheben können. Wenn ich diesen Formularblock auswähle, setzen wir die Breite bereits auf 90 Prozent. Ich denke, wir können es auf 100 Prozent setzen, um dieses Problem zu beheben. Mal sehen, ob wir irgendwelche Probleme in Bezug auf die Fließfähigkeit haben werden. Ich gehe zurück zu meinem Weihrauch. Hier werde ich es Vorschau. Nein, es sieht gut aus. Genau so. Es sieht jetzt viel besser aus. In Ordnung Jungs, jetzt haben wir eine voll responsive Website. Haben Sie gesehen, wie einfach es ist, mit Breakpoints und CSS-Eigenschaften zu arbeiten? Wenn Sie sich an die Regeln und Grundlagen halten, ist alles einfach. Ich werde jetzt alle Seiten überprüfen. Ich gehe auf die Homepage. Ich werde es in der Vorschau sehen. Der Desktop sieht gut aus. Alles sieht hier auf allen Geräten gut aus. Lassen Sie mich zu anderen Abschnitten hier gehen, Logos. Schön. Was ist mit aktuellen Projekten? Es sieht gut aus auf allen Haltepunkten. Was ist mit Testimonial? Großartig. Unsere Dienste, lassen Sie mich überprüfen. Hoppla, hier haben wir ein Problem mit den Symbolen. Lass mich weitermachen und das reparieren. Ich werde dieses Dienstsymbol auswählen und ihre Größe ändern, um nicht zu schrumpfen oder zu wachsen. Ich werde das Gleiche für alle tun. Schön, und schauen wir uns noch einmal an. Cool. Was ist mit der CTA-Sektion? Es sieht toll aus und die Fußzeile sieht gut aus. Gehen wir nun auf die Seite „Kontakt“ und ich werde es in der Vorschau anzeigen. Die Desktop-Version sieht gut aus, das Tablet sieht auch gut aus. Mobile Landschaft sieht erstaunlich und mobile Porträt. Aber wenn wir auf die Projektseite gehen, Lassen Sie uns es überprüfen. Ich werde es in der Vorschau sehen. Es sieht gut aus hier auf dem Desktop. Ich gehe zu Tabletten. Da gehen wir. Ich werde nach unten scrollen, alles sieht gut aus. Lassen Sie mich zur mobilen Landschaft gehen. Alle Abschnitte sehen toll aus und mobile Porträts, schön. Eine Sache, die ich hier bemerkt habe, ist, wenn wir auf dem Desktop Haltepunkt sind und wenn ich den Bildschirm kleiner, einfach so, können Sie an einem gewissen Punkt sehen diese Kontaktieren Sie uns Schaltfläche berührt die Kanten unserer Berichte. Es ist nicht das, was wir wollen, also müssen wir das in Ordnung bringen. Wie können wir das beheben? Nun, lass mich weitermachen und zu meiner Navbar gehen. Wenn ich diese Navigationsleiste im Navigator auswähle, können Sie sehen, dass es kein Padding gibt. Während ich unter Desktop-Breakpoint bin, werde ich hier eine 30 Pixel linke und rechte Polsterung hinzufügen. Lassen Sie mich die Wahltaste oder die Alt-Taste auf meiner Tastatur gedrückt halten und etwas linkes und rechtes Polster zu meiner Navigationsleiste hinzufügen. Aber hier haben wir ein anderes Problem, dieser Container hat auch etwas Polsterung. Ich gehe voran und entferne die Polsterung hier von 30 Pixel auf 0. Außerdem wird die richtige Polsterung auch 0 sein. Mal sehen, ob es funktioniert. Ich werde es kleiner machen. Da gehen wir. Auf dem Desktop sieht es jetzt gut aus, weil wir diese zusätzliche Polsterung auf der rechten und linken Seite haben. Aber was, wenn ich auf Tablet gehe? Mal sehen, was passiert. Hier haben wir diese zusätzliche Polsterung und wir müssen voran gehen und das ändern. Während ich auf dem Tablet-Breakpoint bin, werde ich die „Navbar“ auswählen, und ich werde diese 30 Pixel linke und rechte Polsterung zurücksetzen. Ich werde es auf 0 setzen. Hier werde ich es auch auf 0 setzen. Schön, und mal sehen, was jetzt passiert. Da gehen wir. Es sieht gut aus, wenn ich auf Tablet gehe, es sieht gut aus, wenn ich in mobile Landschaft gehe, alles ist in Ordnung und mobiles Porträt. Alles klar Jungs unsere Website ist jetzt voll ansprechbar. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 60. Animationen und Interaktionen – Teil 1: Jede moderne Website verwendet heutzutage Animationen und Interaktionen, um die Benutzerfreundlichkeit und Benutzererfahrung zu verbessern, und schließlich kann es die Konversionsrate verbessern. Werfen wir einen Blick auf Apples Website als Beispiel, wenn ich hier nach unten scrollen, können Sie sehen, dass diese Elemente verblassen. Ich werde nach unten scrollen. Sie können sehen, dass wir diese Interaktion haben, dieser Textblock ist animiert. Ich werde nach unten scrollen. Hier, wenn ich scrollen, können Sie sehen, dass diese Texte Block nach unten skaliert, während ich nach unten scrollen, und diese Elemente, dieses Bild und dieser Textblock einblenden. Dies sind die Animation, die einen Unterschied machen, wenn es um die Web-Entwicklung geht, ist der Aufbau einer responsive Website eine Sache, aber es interessanter aussehen zu lassen, ist eine andere Sache. Indem wir Interaktionen und Animationen auf unserer Website hinzufügen, können wir die Benutzererfahrung verbessern und unsere Benutzer wirklich Freude daran haben, mit unserem Produkt zu interagieren. Lassen Sie mich Ihnen zeigen, wie Interaktionen auf Webflow funktionieren. Wenn es um Interaktionen geht, haben wir zwei Hauptkomponenten zu arbeiten, den Trigger und die Animation. Was ist ein Auslöser? Nun, ein Auslöser ist etwas, das die Animation auslöst. In einfachen Worten, wenn etwas passiert, sollte eine andere Sache passieren. Wenn zum Beispiel auf eine Schaltfläche geklickt wird, sollte sie wachsen. Wenn der Benutzer den Mauszeiger über etwas bewegt, sollte ein anderes Objekt verschoben werden. Im Allgemeinen haben wir zwei Arten von Triggern. Wir haben den Element-Trigger und wir haben den Seitenauslöser. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Wenn ich zum Interaktionen-Panel auf der rechten Seite hier gehe, wie Sie sehen können, gibt es dieses Thunderbolt-Icon, werde ich darauf klicken. Hier können wir einen Trigger erstellen. Wie ich bereits erwähnt habe, haben wir den Element-Trigger und wir haben den Seitentrigger. Nun, was ist der Unterschied zwischen dem Element-Trigger und dem Seitenauslöser? Wir verwenden den Element-Trigger, wenn der Trigger ein Element ist, zum Beispiel eine Schaltfläche, ein Bild, ein Textblock, eine Überschrift, irgendetwas. Wir können unser Element auswählen und dann können wir dieses Element Trigger erstellen. Wenn der Benutzer mit diesem Element interagiert, löst er unsere Animation aus. Aber was ist mit Seitenauslöser? Nun, der Seitenauslöser löst unsere Animation aus, wenn sich unser Seitenstatus ändert. Zum Beispiel, wenn ich auf dieses Plus-Symbol klicke, können Sie sehen, dass wir die Maus im Ansichtsfenster bewegen, während Seiten scrollen, Seite laden, Seite gescrollt. In diesem Fall müssen wir nicht auf etwas klicken oder mit einem Element interagieren. Der Auslöser ist unsere Seite selbst, so können wir angeben, wann die Seite vollständig geladen ist, dann spielen Sie diese bestimmte Animation. Lassen Sie mich Ihnen hier einige Beispiele zeigen. Wie Sie hier sehen können, habe ich einige einfache Elemente. Ich habe einen Kreis, ich habe hier ein Quadrat. Ich werde dies in einer Vorschau anzeigen und ich werde Ihnen einige Beispiele für den Element-Trigger zeigen. Hier, dieser Kreis ist unser Auslöser. Dafür habe ich bereits eine Interaktion erstellt, und wenn ich darauf klicke, sollte etwas passieren. Sie müssen bedenken, dass der Trigger nicht immer selbst animieren sollte Wenn ich also auf diesen Kreis klicke, sollte die Animation nicht unbedingt auf diesem Objekt erscheinen. Ich kann einen Trigger für dieses Objekt setzen und andere Elemente animieren lassen. In diesem Fall, wenn ich auf diesen Kreis klicke, sollte sich dieses Quadrat auf die rechte Seite bewegen. Lassen Sie mich es Ihnen zeigen. Da gehen wir. In diesem Fall ist der Kreis unser Auslöser, und sobald er ausgelöst wird, bewegt sich dieses Quadrat. Aber was, wenn ich den Trigger selbst animieren möchte? können wir auch tun. Zum Beispiel können wir einen Element-Trigger setzen, und wir können sagen, wenn der Benutzer mit dem Mauszeiger über diese Elemente bewegt, sollten sich diese Elemente ändern. Zum Beispiel sollte es wachsen, es sollte sich bewegen, es sollte verblassen, alles, was Sie sich vorstellen können, also wenn ich über diesen orangefarbenen Kreis schwebe, bekommen wir diese Bounce-Animation. In diesem Fall wird der Trigger selbst animiert. Ich werde Ihnen ein weiteres Beispiel zeigen. Wenn ich auf dieses Quadrat auf der rechten Seite klicke, wird es auch animiert, genau so. Lasst uns zusammenfassen. Um zu verstehen, wie die Animationen funktionieren, müssen Sie verstehen, wie die Interaktion funktioniert. Im Allgemeinen haben wir zwei Hauptkomponenten. Wir haben den Auslöser und die Animation. Wenn unser Trigger ausgelöst wird, sollte die Animation stattfinden. Lassen Sie mich Ihnen zeigen, wie ich diese Animationen erstellt habe. Ich gehe zu meinem Designer. Wenn ich zu den Interaktionen gehe, hier, wie Sie sehen können, habe ich keinen Auslöser, also werde ich voran gehen und diesen Kreis auswählen, und sobald ich ihn ausgewählt habe, können Sie sehen, dass der Elementauslöser, den wir bereits erstellt haben, dort ist . Ich werde das für eine Sekunde entfernen, weil ich Ihnen zeigen werde, wie ich es erstellt habe. Wenn ich auf dieses Symbol klicke, kann ich das entfernen. Jetzt habe ich keinen Elementauslöser. Da dieser Kreis unser Auslöser sein wird, werde ich ihn auswählen, und dann werde ich diesen Plusknopf hier drücken. Hier kann ich aus verschiedenen Optionen wählen. Mal sehen, was wir haben. Wir haben Maus-Klick-Tap, wir haben Maus-Hover, wir haben Maus über Element bewegen, wir haben Scrollen in Ansicht, und wir haben beim Scrollen im Blick, wir haben andere Optionen, die jetzt nicht verfügbar sind. Beispielsweise funktioniert Navbar geöffnet nur für Navbars oder Dropdown-Öffnungen funktioniert nur für Dropdownmenüs. Aber in diesem Fall werden wir Mausklick verwenden. Wenn der Benutzer auf den Kreis klickt, sollte die Animation abgespielt werden. Ich werde Maus-Klick-Tap wählen, da gehen wir, und hier ist, wo wir unsere Aktion angeben können. Es sagt beim ersten Klick und beim zweiten Klick, es bedeutet, dass ich eine Animation für den ersten Klick angeben und dann eine andere Animation für den zweiten Klick angeben kann . Für dieses Beispiel möchten wir nur eine Animation, also gehe ich auf den ersten Klick. Wenn ich dieses Dropmenü öffne, kann ich eine Aktion auswählen. Ich kann entweder eine benutzerdefinierte Animation erstellen, indem ich diese Option zum Starten einer Animation verwende, oder ich kann schnelle Effekte verwenden. Zum Beispiel, verblassen, schieben , drehen, wachsen, groß werden usw. Wir werden darüber sprechen, aber im Moment werde ich Ihnen zeigen, wie Sie eine benutzerdefinierte Animation erstellen können. Ich werde auf Starten Sie eine Animation klicken und hier ist die Animation, die wir bereits erstellt haben. Ich kann entweder diese Animation auswählen oder eine neue Animation erstellen. Ich werde das für eine Sekunde entfernen. Hier haben wir keine Animationen, und ich werde hier eine neue Animation erstellen, und ich muss das nennen. Lasst uns Move Square schreiben. Warum habe ich es so genannt? Weil dieser Auslöser dieses Quadrat bewegen wird. Ich drücke die Eingabetaste. Jetzt muss ich einige Aktionen erstellen. Hier ist unsere Zeitachse. Wenn ich auf diesen Plus-Button klicke , kann ich zwischen verschiedenen Optionen wählen, verschieben, skalieren , drehen, schief, Opazitätsfilter , BG-Farbe, Rahmenfarbe , Textfarbe usw. animieren. Aber zuerst, lassen Sie uns sehen, wie wir unsere Elemente animieren sollten. Dieser Kreis ist unser Auslöser, und bisher haben wir unseren Auslöser geschaffen. Jetzt wollen wir das Quadrat animieren. Sobald wir uns in der Timeline befinden, müssen Sie daher das Element auswählen, das Sie animieren möchten. In diesem Fall ist es unser Quadrat, also werde ich es auswählen, und sobald es ausgewählt ist, werde ich auf diesen Plus-Button klicken. Da ich es verschieben werde, möchte ich nur seinen Standort ändern. Ich wähle Verschieben aus. Wir haben einen Punkt oder sagen wir einen Keyframe erstellt. Hier habe ich eine Warnung und es besagt, dass diese Verschiebungsaktion keinen Wert angewendet hat, das ist in Ordnung, weil wir hier nichts geändert haben. In der Zeitleiste hier haben wir die Zeit, und wir haben den Ausgangspunkt und den Endpunkt. Bisher haben wir den ersten Keyframe erstellt, jetzt gehe ich zum Endpunkt und ich werde klicken, um einen anderen Keyframe zu erstellen, es wird Move sein. Wir haben diese Warnung auch, weil wir nichts geändert haben. Mal sehen, was wir tun möchten, wenn der Benutzer auf diesen Kreis klickt, sollte sich dieses Quadrat auf die rechte Seite bewegen. Daher haben wir hier unseren ersten Keyframe erstellt, und wir müssen ihre Position nicht ändern, da die Animation von hier beginnen sollte und dann auf die rechte Seite verschoben werden sollte, also werde ich diesen zweiten Keyframe auswählen, den wir erstellt, und wenn ich dann hier nach unten scrolle, können Sie sehen, dass ich diese Option Move habe. Wir haben hier viele Eigenschaften, über die wir sprechen werden, aber jetzt lassen Sie uns die Verschieben-Eigenschaften ändern. Ich kann die X-, Y- und Z-Achse ändern. Ich werde die X-Achse ändern, also verwenden wir diesen Schieberegler. Ich werde es um 100 Pixel verschieben, das ist richtig, auf 100 Pixel, schön. Jetzt werde ich Speichern drücken und unsere Animation wurde erstellt, wie Sie sehen können, es heißt Platz bewegen, und wenn Sie Änderungen an Ihrer Animation vornehmen möchten, können Sie einfach darauf klicken und Sie werden in Ihre Timeline gehen. Sie können diese Keyframes auswählen und alle gewünschten Änderungen vornehmen. Aber jetzt sieht es gut aus. Lassen Sie mich eine Vorschau darauf, und jetzt ist dieser Kreis unser Auslöser, ich werde darauf klicken. Da gehen wir, dieser Platz ist bewegt worden. Dies ist im Allgemeinen, wie die Interaktion und Animationen auf Webflow funktionieren, Sie können einfach komplexe Animationen visuell erstellen , ohne eine einzige Codezeile zu schreiben, das ist so mächtig. Ich werde Ihnen ein weiteres Beispiel zeigen. Nehmen wir an, dieser Kreis wird der Auslöser sein, aber er wird sich selbst animieren. Ich werde Ihnen zeigen, wie es möglich ist. Wenn der Benutzer darauf klickt, wird es sich bewegen, so dass der Element-Trigger erstellt wird, wie Sie sehen können , haben wir das bereits erstellt ich werde darauf klicken, und innen möchte ich diesen Move nicht verwenden Quadratische Animation, weil ich diesen Kreis selbst animieren werde, also werde ich hier eine weitere zeitgesteuerte Animation erstellen, und ich werde Move Circle schreiben. Dann lassen Sie uns eine Aktion erstellen, und ich werde Verschieben wählen. Ich werde hier einen weiteren Keyframe erstellen, und wählen wir „Verschieben“. Hier, ich werde es wieder auf die rechte Seite bewegen. Lass es mich retten. hier sicher, dass Sie die Animation Kreis verschieben nicht das Quadrat verschieben auswählen. Ich kann auf Vorschau klicken, um das zu sehen, und auch ich kann hier gehen, und wenn ich darauf klicke, jetzt ist dieser Kreis animiert, nicht das Quadrat. Sie müssen den Unterschied zwischen einem Trigger und der Animation verstehen. Sie sollten immer einen Trigger erstellen und dann müssen Sie entscheiden, welche Elemente animiert werden sollen. Denken Sie daran, dass Sie beim Erstellen eines Triggers nicht darauf beschränkt sind, nur ein Element zu animieren Sie können mehrere Elemente animieren. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Nehmen wir an, wenn ich auf diesen Kreis klicke, möchte ich, dass sich diese beiden Quadrate bewegen. Wie kannst du das machen? Es ist so einfach. Zuerst werde ich voran gehen und einen Auslöser erstellen. Der Trigger wurde bereits erstellt. Ich gehe zum Abschnitt Animation, auf den ersten Klick, und hier werde ich wählen Platz bewegen, weil wir gehen, um dieses Quadrat hier zu verschieben. Wenn ich hineingehe, habe ich hier zwei Keyframes erstellt. Aber für dieses Quadrat, wenn ich voran gehe und Platz 2 auswähle und ich hier einen weiteren Keyframe erstelle, und ich sage, bewegen, dann kann ich es auch auf die rechte Seite verschieben. Lassen Sie es uns um 100 Pixel verschieben, einfach so, und lassen Sie mich es speichern. Wenn ich nun auf diesen Kreis klicke, sollten sich diese beiden Quadrate gleichzeitig bewegen. Mal sehen, was passiert. Aber haben Sie gesehen, was passiert ist? Zuerst bewegte sich dieses Quadrat und dann bewegte sich das Quadrat. Warum? Können wir sie nicht gleichzeitig bewegen? Wir können, wenn ich zu meiner Timeline gehe, wenn ich diese Bewegung Quadrat Animation hier wähle, wie Sie sehen können, dieses Square 2 Element hat einen separaten Keyframe. Wenn ich möchte, dass diese beiden Elemente gleichzeitig animiert werden, muss ich dieses Quadrat 2 auswählen, und ich muss es ziehen und mit meinem ersten Quadrat gruppieren, genau so. Jetzt erfolgt die Animation zur gleichen Zeit, ich werde Speichern drücken, und mal sehen, was passiert, da gehen wir. Sie sind zu langsam. Kann ich ihre Geschwindigkeit ändern? Natürlich kannst du das. Gehen wir zu unserer Zeitachse. Wenn ich hier meine beiden Quadrate auswähle, kann ich die Umschalttaste auf meiner Tastatur gedrückt halten und nacheinander darauf klicken. Hier im Timing habe ich verschiedene Optionen. Ich habe die Verzögerungsoption, ich habe Lockerung, und ich habe Dauer. Die Dauer ist auf eine halbe Sekunde eingestellt, ich werde sie auf 0,2 reduzieren, und wenn ich speichere, werde ich jetzt eine Vorschau anzeigen, es ist jetzt viel schneller. Bisher haben Sie gelernt, wie die Interaktionen und Animationen in Webflow funktionieren. Im nächsten Video werden wir beginnen, einige Animationen für unser Kreisprojekt zu erstellen, und wir werden über den Seitenauslöser und einige fortgeschrittene Animationen sprechen. Wir sehen uns im nächsten Video. 61. Animationen und Interaktionen – Teil 2: Hey, willkommen zurück. In diesem Video werden wir beginnen, einige Interaktionen und Animationen für unsere Website zu erstellen . Bist du bereit? Fangen wir an. Zuerst werden wir über die Arten von Animationen nachdenken , die wir erstellen werden. Was brauchen wir hier? Lassen Sie uns eine Vorschau dieser Website. Wie Sie sehen können, laden alle diese Elemente zur gleichen Zeit, und es ist in Ordnung, aber wir können es besser machen. Was ich hier tun möchte, ist, dass ich möchte, dass alle diese Elemente eins nach dem anderen verblassen, sobald die Seite geladen ist. Zuerst sollte diese Navigationsleiste verblassen, dann diese Überschrift, dann die Beschreibung, diese Schaltflächen, das Hauptbild und diese Karten. Wir können diese Elemente auch leicht verschieben, um eine erweiterte Animation zu erstellen. In Ordnung. Was sollen wir tun? Für diese Animation benötigen wir keinen Element-Trigger. Wie ich im vorherigen Video erwähnt habe, ist ein Element-Trigger erforderlich, wenn der Benutzer zuerst mit etwas interagieren muss und dann die Animation abspielen sollte. In diesem Fall sind jedoch keine Interaktionen beteiligt. Wenn die Seite geladen wird , sollten diese Elemente animiert werden. Ich werde fortfahren und einen Seitenauslöser erstellen. Wie kann ich das machen? Lassen Sie mich zu den Interaktionen hier gehen, und dieses Mal, anstatt diesen Element-Trigger zu erstellen, werde ich einen Seitentrigger erstellen. Lassen Sie mich auf diesen „Plus“ -Button klicken. Welche Option sollten wir verwenden? Maus bewegen Ansichtsfenster, Während Seite scrollt, Seite laden, Seite gescrollt , wir müssen eine Seite laden und Sie können lesen welche Interaktion wir mit diesen Trigger erreichen können. Es steht: „Animieren, wenn die Seite beginnt oder beendet wird.“ Das ist genau das, was wir wollen. Ich werde auf „Seite laden“ klicken. Großartig. Hier haben wir zwei verschiedene Abschnitte. Wenn die Seite beginnt zu laden, wenn die Seite geladen wird, werde ich verwenden, wenn die Seite fertig geladen wird. Warum? Da ich möchte, dass der gesamte Inhalt der Website geladen wird, bevor die Animation wiedergegeben wird, sollten diese Bilder geladen werden, und auch diese Texte, Blöcke und Schaltflächen. Ich gehe mit, wenn die Seite geladen wurde und ich werde eine Aktion erstellen. Hier werde ich eine Animation starten. Es wird eine benutzerdefinierte Animation sein, und dann werde ich auf diese „Plus“ Schaltfläche klicken. Da gehen wir. Nennen wir diese Animation Held Animation, weil sie mit dem Heldenbereich verwandt ist. Ich drücke „Enter“. Schön. Jetzt ist es an der Zeit, weiterzumachen und unsere Aktionen zu kreieren. Was sollen wir hier erreichen? Wie ich bereits erwähnt habe, möchte ich, dass alle diese Elemente verblassen. Einige von ihnen sollten skaliert werden, einige von ihnen sollten ebenfalls verschoben werden, aber lassen Sie uns eins nach dem anderen gehen. Wenn ich möchte, dass sie zuerst verblassen, muss ich ihre Deckkraft auf Null setzen. Warum? Denn gerade jetzt ist die Deckkraft auf 100 Prozent eingestellt und es gibt keine Möglichkeit, diese Animation zu erreichen. Ich habe zwei Möglichkeiten. Ich kann entweder voran gehen und alle diese Elemente hier auswählen. Zum Beispiel, diese Überschrift, und ich kann zum Stilfenster gehen, verringern Sie die Deckkraft hier auf Null Prozent. Oder ich kann genau das gleiche hier im Interaktionsbereich tun, ich gehe zum Seitenladen. Ich werde auf „Hero Animation“ klicken. Hier kann ich eine Aktion erstellen, zum Beispiel Deckkraft, und ich kann ihre Deckkraft auf Null Prozent drehen, aber fangen wir mit der Navigationsleiste an. Ich werde diese Navigationsleiste auswählen und ich werde hier eine Aktion erstellen, aber um eine Aktion für ein Symbol zu erstellen, müssen Sie zuerst darauf doppelklicken. Nun ist diese Navigationsleiste das Master-Symbol ausgewählt und ich kann eine Aktion erstellen. Dann werde ich Deckkraft wählen, und lassen Sie uns seine Deckkraft von 100 Prozent auf Null Prozent umwandeln. Schön. Es ist verschwunden und es ist genau das, was wir wollen. Dies ist, was wir den Anfangszustand nennen, und hier, wenn Sie zum Zeitabschnitt gehen, können Sie sehen, dass wir diesen Schalter haben, der besagt: „Als Anfangszustand einstellen“. Wenn ich den Mauszeiger über dieses Fragezeichen führe, heißt es: „Beim Festlegen des Anfangsstatus werden Stile auf das Element vor dem Laden der Seite angewendet. Es ist nützlich, um Elemente auszublenden, bevor sie in die Ansicht animiert werden.“ Genau das müssen wir tun. Da ich seine Deckkraft auf null Prozent gesetzt habe und es unser Anfangszustand sein wird, werde ich diesen Schalter aktivieren. Was sollen wir sonst tun? Ich werde alle diese Elemente nacheinander auswählen, und ich werde auch ihre Deckkraft auf Null Prozent verringern. Lassen Sie uns diese Überschrift auswählen und dann werde ich hier noch einmal zu meiner Animation gehen, und ich werde eine neue Aktions-Deckkraft erstellen. Setzen wir seine Deckkraft auf null Prozent, und denken Sie daran, diesen Schalter einfach so zu aktivieren, setzen Sie als Anfangszustand, und wie Sie jetzt sehen können, sind diese gruppiert, weil diese Top-Gruppe alle Aktionen enthält, die wir die anfängliche Zustand auf. Jetzt werde ich diese Beschreibung auswählen. Ich werde dasselbe tun, Deckkraft, und ich werde seine Deckkraft auf Null Prozent drehen, und ich werde es als Anfangszustand festlegen. Ich werde dasselbe für diese Knöpfe tun. Eine übrigens. Ich werde diese primäre Schaltfläche auswählen und Opazität erstellen. Ich werde seine Deckkraft auf null Prozent reduzieren. Es wird ein Anfangszustand sein. Lassen Sie uns es auch für diese Text-Schaltfläche tun. Ich werde die Kapazität auswählen. Lassen Sie uns es auf Null Prozent reduzieren und es wird der Anfangszustand sein. Als nächstes wählen wir dieses Bild aus, und lassen Sie uns auch seine Deckkraft auf Null Prozent reduzieren. Es wird der Anfangszustand sein. Schließlich müssen wir diese beiden Karten auswählen und dasselbe tun. Lassen Sie uns die Deckkraft wählen, ihre Deckkraft verringern und schließlich den Anfangszustand aktivieren, und nicht zuletzt werde ich diese Karte auswählen und ich werde das Gleiche hier tun. Lassen Sie uns seine Deckkraft verringern und den Anfangszustand aktivieren, aber warten Sie eine Sekunde, warum alle diese Elemente außer unserer navbar verschwunden sind? Nun, das liegt daran, dass unsere Navbar ein Symbol ist, in Wirklichkeit, wenn ich mein Projekt jetzt vorschau, können Sie sehen, dass es verschwunden ist, aber da es ein Symbol ist, werden wir das sehen. Das ist der Grund, aber keine Sorge, es funktioniert perfekt. Wir haben unsere Anfangszustände geschaffen. Wir setzen die Deckkraft aller unserer Elemente auf null Prozent. Jetzt ist es an der Zeit, den nächsten Keyframe zu erstellen, um ihn einzublenden. Wir müssen die Deckkraft auf 100 Prozent erhöhen. Um das zu tun, werde ich meine Navigationsleiste auswählen. Noch einmal, doppelklicken Sie darauf, und ich werde darauf klicken und hier, um einen neuen Keyframe zu erstellen, Lassen Sie uns Deckkraft wählen, und dieses Mal sollte seine Deckkraft auf 100 Prozent eingestellt werden. Stellen Sie sicher, dass es auf 100 Prozent eingestellt ist. Wir werden die Dauer und die Ebene jetzt nicht ändern, aber in ein paar Minuten werden wir sie ändern. Moment müssen wir nur Ihre Trübungen auf 100 Prozent zurückdrehen. Jetzt werde ich meine Überschrift hier auswählen. Ich kann es im Navigator auswählen, und dann gehen wir zu meiner Animation und lassen Sie uns hier einen neuen Keyframe erstellen, Deckkraft, und ich werde die Deckkraft auf 100 Prozent setzen. Ich werde das Gleiche für alle unsere Elemente hier tun. Lassen Sie uns die Beschreibung wählen. Ich werde einen neuen Keyframe erstellen, Deckkraft, und dann werde ich die Deckkraft auf 100 Prozent setzen. Ich wähle die Tasten eins nach dem anderen. Wiederholen wir den gleichen Prozess und erhöhen die Deckkraft auf 100 Prozent. Ich werde diesen Prozess nicht beschleunigen, weil ich möchte, dass Sie sich an den Prozess der Erstellung von Interaktionen gewöhnen. Ich werde hier die Schaltfläche „Weiter“ auswählen. Lassen Sie uns einen neuen Keyframe erstellen, Deckkraft, und ich werde die Deckkraft auf 100 Prozent setzen. Wählen wir nun das Hauptbild aus. Lassen Sie uns einen neuen Keyframe, Deckkraft erstellen und dessen Deckkraft auf 100 Prozent umwandeln. Schließlich werden wir unsere Karten einzeln Opazität auswählen und ihre Deckkraft auf 100 Prozent setzen, und nicht zuletzt müssen wir unsere letzte Karte auswählen, hier einen neuen Keyframe erstellen, Deckkraft und setzt seine Deckkraft auf 100 Prozent. Schön. Lassen Sie uns nun auf „Speichern“ klicken und unser Projekt in einer Vorschau anzeigen. Da gehen wir. All diese Elemente verblassen eins nach dem anderen. Lassen Sie mich das noch einmal ansehen. Genau das wollte ich. Können Sie sehen, wie einfach es ist, Animationen in Webflow ohne Programmierung zu erstellen , das ist erstaunlich. Aber warten Sie, können wir es nicht einmal besser machen, indem wir mehr Animationen zu unseren Elementen hinzufügen? Ja, das können wir. Das ist genau das, was wir tun werden. Nun, das ist unsere Fading Animation erfolgreich erstellt. Ich werde weiter gehen und einige andere Aktionen zu diesen Elementen hinzufügen. Zum Beispiel werde ich diese Überschrift und diese Beschreibung leicht nach unten bewegen. Außerdem werde ich diese beiden Karten ein wenig skalieren lassen. Schließlich werde ich dieses Heldenbild auch nach oben bewegen lassen. Beginnen wir mit dieser Überschrift. Zuerst gehe ich zu meiner Animation. Ich gehe zu Hier Animation, und dann werde ich meine Überschrift auswählen. Eine Sache, die hier zu erwähnen ist, dass ich nicht möchte diese Überschrift von ihrer ursprünglichen Position, die hier ist, nach unten geht. Ich möchte es leicht nach oben verschieben und den Anfangszustand dafür einstellen und wieder in seine ursprüngliche Position drehen. Das werden wir tun. Ich werde diese Überschrift auswählen und ich werde eine Aktion erstellen Verschieben, sie wurde innerhalb der ursprünglichen Zustandsgruppe erstellt, und das ist genau das, was ich will. Wenn Sie es irgendwo anders erstellen, können Sie diesen Schalter einfach als Anfangszustand aktivieren und er wird mit anderen Anfangszustandselementen gruppiert. Dann werde ich es um 20 Pixel nach oben verschieben. Ich werde minus 20 schreiben. Wir können das sehen, aber es ist leicht gestiegen. Dann werde ich dasselbe für die Heldenbeschreibung tun. Lassen Sie mich es auswählen. Ich werde hier eine neue Aktion erstellen, Move und lassen Sie mich es um 20 Pixel minus 20. Jetzt wähle ich mein Hauptbild aus, aber dieses Bild sollte sich nicht von oben nach unten bewegen. Es sollte sich von unten nach oben bewegen. Ich werde die Aktion Verschieben erstellen. Aber dieses Mal werde ich das y auf 20 Pixel setzen, nicht minus 20, um es nach unten zu bewegen. Denken Sie daran, das sind alle unsere Anfangszustände. Schließlich, wie ich bereits erwähnt habe, werde ich meine Karten skalieren, diese beiden kleinen Karten leicht nach oben. Zuerst werde ich diese Heldenkarte 1 auswählen, und ich werde sie als Anfangszustand nach unten skalieren. Lassen Sie mich hier eine Aktion erstellen. Ich werde Scale wählen und ich werde x auf 0,8 setzen und die Y-Achse wird ebenfalls geändert. Da diese verknüpft sind, dann werde ich Hero Card 2 auswählen, lassen Sie uns die gleiche Aktionsskala erstellen und ich werde sein x auf 0,8 ändern. Drücken Sie „Enter“, aber diese ist nicht mit anderen Anfangszustandsaktionen gruppiert. Ich kann es entweder innerhalb dieser Gruppe ziehen und ablegen oder ich kann die Switch-Sets einfach als Anfangszustand aktivieren, und jetzt ist es hier mit anderen anfänglichen Zustandsaktionen gruppiert. Schön. Jetzt müssen wir weitermachen und sie wieder in ihre ursprüngliche Position bringen. Aber wie sollen wir das hier tun, haben wir viele Schlüsselbilder. Sollen wir hier nach dem letzten Keyframe einen Keyframe erstellen? Nein. Warum? Denn wenn wir das tun, werden zuerst alle diese Elemente verblassen und dann beginnen sie sich zu bewegen und zu skalieren. Das ist nicht das, was wir wollen. Wir wollen, dass sie sich gleichzeitig bewegen und verblassen. Für die Karten möchten wir, dass sie gleichzeitig skaliert und verblasst. Ich gehe voran und wähle diese Heldenüberschrift aus. Ich werde hier eine neue Aktion erstellen, und sie wird verschoben werden. Wir haben hier einen neuen Keyframe erstellt. Dann werde ich sein y hier auf 0 ändern. Auf diese Weise drehen wir es zurück in seine ursprüngliche Position. Schließlich ziehe ich es und lege es auf den Deckkraft-Keyframe. Auf diese Weise können wir sie und die Deckkraft gruppieren und Aktionen eine Pflege gleichzeitig verschieben, genau so, wie Sie jetzt sehen können, sind sie gruppiert. Ich werde dasselbe für die Beschreibung tun. Wählen wir es aus. Ich werde eine neue Aktion Move erstellen. Dann werde ich das y auf 0 setzen. Lassen Sie mich sie zusammenfassen. Ich werde es ziehen und darüber ablegen. Lasst uns dasselbe für den Helden machen. Ich werde es auswählen und ich werde eine neue Aktion erstellen. Bewegen Sie und ich werde sein y auf 0 setzen. Gruppieren wir es mit dem Deckkraftschlüsselbild. Schließlich werde ich diese Heldenkarte 1 auswählen. Ich werde eine neue Aktion erstellen. Es wird maßstäblich sein, weil wir es diesmal skalieren werden. Ich werde die x und y auf 1 setzen. Gruppieren wir es mit dem Deckkraftschlüsselbild der Heldenkarte 1. Dann werde ich dasselbe für die zweite Karte tun. Lassen Sie mich diese Skalierungsaktion erstellen und ich werde die x und y auf 1 setzen. Schön. Schließlich gruppieren wir sie zusammen, es war eine Menge. Jetzt speichern wir unsere Animation. Ich werde voran gehen und eine Vorschau darauf. Wie cool ist das? Lassen Sie mich noch einmal eine Vorschau anzeigen. Zuerst verblasste das Navi, dann diese Elemente, sie bewegen sich und sie skalieren zur gleichen Zeit. Aber hier haben wir ein Problem. Wie Sie sehen können, ist die Dauer dieser Animation zu viel. Wir müssen fortfahren und die Dauer dieser Keyframes ändern. Zuerst werde ich hier zur Heldenanimation gehen. Ich werde diese Deckkraft auswählen. Ich werde die Dauer von 1/2 Sekunde auf 0,3 verringern. Wir müssen den gleichen Prozess auch für die Bewegung Aktion wiederholen. Ich werde es auf 0,3 reduzieren. Dann lassen Sie uns dasselbe für andere Elemente tun. Ich gehe voran und wähle diese Heldenbeschreibung Deckkraft aus. Es wird 0,3 sein. Dann wähle ich das Verschieben aus. Es wird auch 0,3 sein. Lassen Sie uns dasselbe für diese primäre Taste tun, 0.3. Hier, 0.3, werde ich diesen Prozess beschleunigen. Ich werde fortfahren und alle diese Elemente nacheinander auswählen und die Dauer auf 0,3 verringern. Fertig. Nun lassen Sie mich diese Animation speichern und lassen Sie sie noch einmal in der Vorschau sehen. Cool. Wie Sie sehen können, ist es jetzt viel schneller. Lassen Sie uns die Vorschau nochmals anzeigen. Schön. Ich hoffe, es wird dir gefallen, aber ich werde dir noch eine Sache zeigen. Erinnern Sie sich, als wir über Animationen und Interaktionen sprachen, erzählte ich Ihnen von der Lockerungsmethode. Ich sagte, wir werden später darüber sprechen, und genau das werden wir tun. Wenn ich zum Interaktionsbereich gehe und wenn ich diese Animation wähle, wähle ich zum Beispiel eine dieser Aktionen aus. Lassen Sie uns diesen Helden Überschrift bewegen. Wenn ich zum Timing gehe, können Sie sehen, dass wir diese Lockerungs-Tab haben und wir Presets oder Zoll haben. Warum Standard? Alle Aktionen haben die lineare Nicht-Lockerung Methode, und es bedeutet, dass die Animation linear wiedergegeben wird. Aber wenn ich das Drop-Menü öffne, können Sie sehen, dass wir viele verschiedene Lockerungsmethoden haben. Wir haben Leichtigkeit, Lockerung, Leichtigkeit, einfache In-Out. Was ist der Unterschied zwischen ihnen? Ich werde Ihnen eine sehr coole Website zeigen, die von Herrn Christopher Travers erstellt wurde , die den Unterschied zwischen allen Lockerungsmethoden illustriert . Es ist sehr cool. Es heißt easing.webflow.io. Du kannst voran gehen und es dir ansehen. Der Unterschied zwischen diesen Beschleunigungsmethoden ist in der Regel die Geschwindigkeit. Hier, wenn wir diese Lockerung haben, beginnt die Animation langsam und es endet schneller. Auf der anderen Seite, wenn wir wählen, erleichtern, beginnt die Animation schnell und dann verlangsamt es sich. Hier können Sie alle diese Optionen vergleichen und sehen, welche Ihren Bedürfnissen entspricht. Gehen wir zurück zu Webflow, um unsere Animationen besser aussehen zu lassen. Ich werde voran gehen und alle diese Animationen zu erleichtern. Gehen wir weiter und machen es eins nach dem anderen. Wir können hier die Anfangszustände ändern, und das brauchen wir nicht. Wie Sie sehen können, ist es deaktiviert, da keine Animationen im Anfangszustand wiedergegeben werden. Ich werde diese Navbar Opacity auswählen und ich werde ihre Lockerungsmethode ändern, um Lockerung zu machen. Ich werde es für all diese Elemente tun. Lassen Sie mich diesen Prozess schnell weiterleiten, um Ihnen etwas Zeit zu sparen, es ist fertig und jetzt werde ich die Animation speichern und lassen Sie mich voran und Vorschau es. Da gehen wir. Sieht viel besser aus. Leute, ich hoffe, ihr mocht dieses Video. Wir haben erfolgreich einige Animationen für unseren Heldenbereich erstellt. Im nächsten Video werden wir weiterhin einige Interaktionen für andere Bereiche der Website erstellen . Wir sehen uns dann. 62. Animationen und Interaktionen – Teil 3: Hey, in diesem Video werden wir weitermachen und Animationen zu anderen Abschnitten unserer Website hinzufügen. Zum Beispiel, wie Sie hier sehen können, sind diese Logos schwarz-weiß und wir werden sie interaktiv machen. Wenn der Benutzer den Mauszeiger über jedes dieser Logos bewegt, sollten sie bunt werden. Hier haben wir zum Beispiel diesen Schlagschatten, wenn der Benutzer über diese Karte schwebt, sollte dieser Schlagschatten erscheinen und sonst sollte er verschwinden. Aber was ist mit dem Testimonial Abschnitt? Hier, wenn der Schnitt in das Ansichtsfenster kommt, wollen wir beginnen, diese Memojis und diese mittleren Elemente nacheinander zu animieren. Wir wollen nur, dass sie verblassen. Lassen Sie mich nach unten scrollen. Was ist mit diesem Abschnitt? Nun, was werden wir für diese Karten tun? Wenn der Benutzer auf dieser Karte den Mauszeiger zeigt, wird die Hintergrundfarbe in unsere Primärfarbe geändert, und dann sollte auch die Farbe dieser Textebenen geändert werden. Lassen Sie uns voran und beginnen Sie mit der Arbeit an unserem Kundenbereich hier. Ich gehe zu Webflow, und ich gehe hier zum Logobereich. Unsere Logos sind standardmäßig bunt. Wie können wir sie schwarz und weiß machen? Erinnerst du dich, als wir über die Filter gesprochen haben? Das ist genau das, was wir benutzen werden. Ich werde dieses Bild hier auswählen. Lassen Sie mich zum Bedienfeld „Stil“ wechseln. Wie Sie sehen können, haben wir keine Klasse zu diesen Logos hinzugefügt. Während dieses Bild ausgewählt ist, werde ich voran gehen und eine Klasse hinzufügen, schreiben wir Logo. Jetzt werde ich diese Klasse zu jedem einzelnen dieser Logos hinzufügen. Lassen Sie mich voran und fügen Sie diese Klasse schnell zu ihnen hinzu. Genau so. Ich werde es zu allen Logos hinzufügen, lassen Sie mich auch dieses auswählen, und ich werde es hier hinzufügen. Schließlich wähle ich das Amazon-Logo aus und lasse es mir hier hinzufügen. Perfekt. Jetzt, während eines dieser Logos ausgewählt ist, scrollen Sie nach unten und ich gehe zum Abschnitt Effekte. Von hier aus werde ich voran gehen und einen Filter erstellen. Wenn ich auf diesen Plus-Button klicke, ist der Filter standardmäßig unscharf. Ich werde keinen Unschärfefilter verwenden. Ich werde den Filter in Graustufen ändern, und wie Sie sehen können, wird der Betrag auf 100 Prozent festgelegt. Das ist völlig in Ordnung. Also, was sollen wir tun? Wenn ich hier zum Hover-Zustand gehe, kann ich diesen Graustufenfilter auswählen und diesen Betrag auf Null Prozent reduzieren. Genau so. Lassen Sie mich nun in den None-Zustand gehen und lassen Sie uns eine Vorschau anzeigen. Da gehen wir. Es funktioniert perfekt für alle Logos, aber hier haben wir keinen reibungslosen Übergang zwischen diesen beiden Zuständen. Lassen Sie uns voran und fügen Sie einen Übergang hinzu, aber stellen Sie sicher, dass Sie sich im None-Zustand befinden, nicht im Hover-Zustand , sonst wird es nicht funktionieren. Fügen Sie Ihre Übergänge immer zum Status „Keine“ hinzu. Ich werde hier einen Übergang hinzufügen, ich werde den Typ in Filter ändern und die Beschleunigungsmethode wird einfach sein. Das ist in Ordnung. Die Dauer wird 200 Millisekunden betragen. Lassen Sie uns noch einmal eine Vorschau anzeigen. Jetzt sieht es viel besser aus, nicht wahr? Was sollen wir sonst noch tun? Nun, wenn ich hier eine Vorschau dieses Projekts sehe, können Sie sehen, dass unser Header-Abschnitt animiert ist. Aber was ist mit diesem Abschnitt? Ich möchte dem Container dieser Logos einen Element-Trigger hinzufügen, und sobald er in das Ansichtsfenster scrollt, sollte dieser Container eingeblendet werden. Lassen Sie mich Ihnen zeigen, was ich meine. Ich werde hier einen Container auswählen und dann werde ich Ihnen die Combo-Klasse geben. Lasst uns Logos schreiben. Nun lassen Sie mich zu den Interaktionen gehen, und von hier aus werde ich einen Element-Trigger hinzufügen. Hier, wie Sie sehen können, haben wir einen Bildlauf in die Ansicht. Das ist es, was wir brauchen. Dann heißt es, wenn in die Ansicht gescrollt wird, wenn sie aus der Ansicht gescrollt wird. Wir brauchen die erste Option, wenn sie in die Ansicht gescrollt wird. Dann werde ich diesen schnellen Effekt verwenden, Fade, einfach so, und hier haben wir verblassen, verblassen. Wir können die Verzögerung oder den Offset ändern, so dass es verblassen wird. Lassen Sie mich eine Vorschau darauf. Da gehen wir. Es ist zu schnell, also werde ich hier etwas Verzögerung hinzufügen. Lassen Sie uns eine Verzögerung von 400 Millisekunden hinzufügen. Ich werde es in der Vorschau sehen. Schön. Lassen Sie mich eine Vorschau des Projekts anzeigen. Wir können den Effekt jetzt nicht sehen, da ich einen großen Bildschirm verwende und sobald diese Seite geladen ist, sich dieser Abschnitt in meinem Ansichtsfenster. Aber wenn ich einen kleineren Bildschirm verwende, wird er angezeigt, wenn ich mit dem Scrollen beginne. Zum Beispiel, wenn ich hier zum Tablet-Breakpoint gehe und ich nur eine Vorschau des Projekts noch einmal, können Sie sehen, dass unser Header-Abschnitt, Elemente, animiert sind. Ich werde nach unten scrollen. Sobald dieser Abschnitt in die Ansicht blättert, wird er eingeblendet. Lassen Sie mich es Ihnen noch einmal zeigen. Ich werde nach unten scrollen, da gehen wir. Es verblasst. Das ist genau das, was ich brauchte. Beachten Sie, dass beim Hinzufügen der Animation zum Desktop-Breakpoint die Animation zu allen Haltepunkten hinzugefügt wird. Wenn ich zum mobilen Portrait gehe und ich es in der Vorschau sehe, funktioniert alles wie erwartet. Großartig. Jetzt können wir zum nächsten Abschnitt übergehen, und das sind die jüngsten Projekte. Ich werde das Gleiche für diesen Container tun. Ich werde diesen Container auswählen und ich werde hier einen Element-Trigger hinzufügen, in die Ansicht blättern, dann werde ich hier eine Aktion hinzufügen, einblenden und eine Verzögerung von 400 Millisekunden hinzufügen, genau so. Cool. Da diese Container einige Kombinationsklassen haben, wird die Interaktion zu diesem bestimmten Container hinzugefügt. Aber wenn ich die Interaktion dem Container zur Basisklasse hinzufüge , wird sie allen Elementen hinzugefügt, die diese Container-Basisklasse verwenden. Behalten Sie das im Hinterkopf. Lassen Sie uns voran und sehen Sie es in der Vorschau. Ich werde nach unten scrollen. Da gehen wir. Schauen wir es uns noch einmal an. Ich werde nach unten scrollen, es verblasst. Großartig. Wie ich bereits erwähnt habe, weicher Schlagschatten erscheinen, wenn der Benutzer über diese Karten sollte auch einweicher Schlagschatten erscheinen, wenn der Benutzer über diese Kartenschwebt. Wie können wir diese Interaktion erreichen? Es ist so einfach, dass wir bereits darüber geredet haben. Zuerst gehe ich voran und wähle diese Projektkarte aus. Lassen Sie mich sehen, Sie können es leicht im Navigator finden, und dann werde ich von hier in den Hover-Zustand gehen. Schließlich werde ich voran gehen und einige Kastenschatten hinzufügen. Lassen Sie uns nun die Eigenschaften dieses Kastenschattens ändern. Ich werde den Winkel auf 180 ändern. Ich werde die Unschärfe auf 50 Pixel und die Entfernung auf 25 Pixel ändern. Schließlich werde ich die Farbe von schwarz zu neutral, mittel ändern. Lassen Sie mich die Deckkraft von 100 auf 10 Prozent reduzieren , um diesen weichen Schlagschatten zu erhalten. Sieht toll aus. Gehen wir nun zurück zu unserem „Keine“ -Zustand und lassen Sie uns eine Vorschau anzeigen. Da gehen wir. Es funktioniert perfekt. Kannst du das sehen? Aber wir haben hier keinen reibungslosen Übergang. Lassen Sie mich weitermachen und einen Übergang hinzufügen. Stellen Sie sicher, dass Sie sich im Status „Keine“ befinden. Ich werde nach unten scrollen und während diese Projektkarte ausgewählt ist, werde ich einen Übergang hinzufügen. Der Typ wird Box-Shadow sein und die Dauer wird 200 Millisekunden betragen. Ich werde die Lockerungsmethode nicht ändern. Lassen Sie uns noch einmal eine Vorschau anzeigen. Da gehen wir. Jetzt sieht es viel besser aus. Cool. Jetzt können wir mit dem nächsten Abschnitt fortfahren, dem Zeugenabschnitt. Was sollen wir hier tun? Nun, zuerst werde ich diesen Abschnitt auswählen und ich werde einen Element-Trigger hinzufügen. Lassen Sie mich zu den Interaktionen gehen, und von hier aus werde ich einen Element-Trigger hinzufügen. Wir werden scrollen in die Ansicht verwenden, weil wir möchten, dass die Elemente verblassen, sobald dieser Abschnitt in die Ansicht scrollt. Deshalb verwenden wir Scroll in View. Dann werde ich hier eine benutzerdefinierte Animation erstellen , weil wir diese Elemente nacheinander animieren werden. Ich werde eine Animation starten verwenden. Lassen Sie mich diesen Plusknopf drücken, um zu unserer Timeline zu gehen. Da gehen wir. Hier, schreiben wir Testimonial, Sie können es nennen, was immer Sie wollen, Enter. Dann wähle ich eine unserer Memojis aus und lass uns hier eine Aktion erstellen. Es wird Deckkraft sein, weil wir sie verblassen lassen werden. Wie üblich müssen wir zuerst den Anfangszustand erstellen. Daher werde ich die Deckkraft auf Null Prozent reduzieren und ich werde sie als Anfangszustand festlegen. Dann werde ich hier einen neuen Keyframe erstellen. Ich werde Deckkraft verwenden und die Deckkraft auf 100 Prozent erhöhen. Lassen Sie mich die Animation spielen. Schön. Aber es gibt hier ein Problem. Wie Sie sehen können, funktioniert diese Animation nur für diese erste Memoji. Sollen wir fortfahren und diese Memojis nacheinander auswählen? Natürlich nicht, weil es eine Alternative dazu gibt. Da wir hier die Memoji-Basisklasse haben, können wir einfach zu diesem Abschnitt gehen , der Klasse genannt wird, und dann können wir diese eine Combo-Klasse hier entfernen. Ich will nur Memoji schreiben. Ich werde meine Memoji wählen und sicherstellen, dass diese Option ausgewählt ist, nur Kinder in dieser Klasse. Ich werde den Anfangszustand auswählen, und jetzt, wenn ich ihn wiedergebe, funktioniert die Animation jetzt für alle Memojis. Warum? Denn jetzt funktioniert diese Animation für diese Klasse, die Memoji-Klasse mit all ihren Kindern. Genau das wollten wir, aber was ist mit anderen Elementen? Nun, wir werden voran gehen und sie einzeln auswählen, und wir werden sie animieren. Beginnen wir mit dieser Überschrift. Ich werde es auswählen, ich werde eine Aktion erstellen, Deckkraft, und ich werde seine Deckkraft auf Null Prozent setzen. Lassen Sie uns es als Anfangszustand festlegen. Es wird mit unserem Memoji-Anfangszustand gruppiert, und ich werde hier einen neuen Keyframe erstellen. Ich werde Deckkraft wählen. Drehen wir seine Deckkraft auf 100 Prozent. Schön. Jetzt werden wir voran gehen und diesen Text für die Zeugnis auswählen. Lassen Sie uns eine Aktion dafür erstellen, Deckkraft. Ich werde die Deckkraft auf null Prozent setzen. Legen wir es als Anfangszustand fest, und lassen Sie uns hier einen neuen Keyframe erstellen, wählen Sie Deckkraft und drehen Sie es auf 100 Prozent zurück. Schließlich werde ich diesen Client-Div-Block auswählen, eine neue Aktion erstellen, Deckkraft, lassen Sie uns seine Deckkraft auf Null Prozent drehen, als Anfangszustand festlegen und einen neuen Keyframe, Deckkraft und drehen Sie es auf 100 Prozent zurück. Genau so. Jetzt lassen Sie mich diese Animation speichern und ich werde voran gehen und eine Vorschau darauf. Mal sehen, was wir bekommen werden. Ich werde nach unten scrollen und sobald der Testimonial Abschnitt in das Ansichtsfenster scrollt, die Animation wiedergegeben, aber diese Memojis sind so schnell verblasst. Gehen wir weiter und reparieren das. Ich gehe zu der Testimonial Animation hier auf der rechten Seite, und ich werde diese Memoji-Deckkraft hier auswählen, und ich werde etwas Verzögerung hinzufügen. Fügen wir eine Verzögerung von einer Sekunde hinzu und lassen Sie uns eine Vorschau anzeigen. Ich werde es speichern und mal sehen, ob es richtig funktioniert oder nicht. Ich werde nach unten scrollen, nett. Aber eine Sekunde sieht zu viel aus, also werde ich es auf vielleicht eine halbe Sekunde reduzieren. Lassen Sie mich diese Memoji-Deckkraft auswählen und die Verzögerung nur auf 0,5 verringern und speichern Sie sie. Lassen Sie uns noch einmal eine Vorschau anzeigen. Ich werde nach unten scrollen, da gehen wir, fantastisch. Lassen Sie uns es auch auf anderen Haltepunkten überprüfen. Ich werde voran gehen und es vorsehen. Lassen Sie mich nach unten scrollen. Ziemlich gut. Sieht toll aus, nicht wahr? Gehen wir nun zum Abschnitt „Dienste“ über. Hier, wie ich bereits erwähnt habe, werden wir die Hintergrundfarbe, die Farbe dieser Textblöcke und auch diesenLink Button ändern die Farbe dieser Textblöcke und auch diesen . Können wir also einfach diese Servicekarte auswählen und in den Hover-Zustand wechseln und unsere Hintergrundfarbe ändern, genau wie das, was wir für diesen letzten Projektabschnitt getan haben? Leider nicht. Warum? Der Grund dafür ist, wir gerade eine Eigenschaft geändert haben, also gingen wir in den Hover-Zustand und wir haben den Schlagschatten zu dieser Karte hinzugefügt. Wenn der Benutzer jedoch den Mauszeiger über diese Karte bewegt, möchten wir mehrere Elemente ändern. Deshalb ist es nicht möglich, all diese Elemente hier in den Effekten zu animieren. Daher müssen wir fortfahren und eine Interaktion im Abschnitt „Interaktion“ erstellen . Also, was sollen wir tun? Zuerst werde ich diese Servicekarte auswählen. Stellen Sie sicher, dass der Service Card Diff Block ausgewählt ist, wie Sie in unserem Service-Raster sehen können, und dann werde ich gehen und einen Elementbaum hier erstellen und dieses Mal werde ich Maus Hover wählen, nicht Mausklick, nicht in die Ansicht scrollen, Maus schweben. Ich werde es auswählen und hier haben wir auf schweben, auf schweben. Deshalb werden wir hier zwei verschiedene Animationen erstellen. Warum? Denn zuerst möchten wir alle diese Elemente animieren, sobald der Benutzer mit dem Mauszeiger über diese Karte bewegt, und dann möchten wir alle diese Elemente in ihre ursprünglichen Farben umwandeln , wenn der Benutzer mit dem Mauszeiger ausfährt. Also zuerst, lassen Sie uns voran und erstellen Sie eine benutzerdefinierte Animation hier, auf Hover, Ich werde eine Animation erstellen und nennen es Karte Hover. Da gehen wir. Also, was sollen wir tun? Müssen wir einen Anfangszustand schaffen? Nein, weil wir keinen Anfangszustand brauchen. Der Anfangszustand ist das, was wir hier haben. Wir müssen nur die Hintergrundfarbe und die Farbe dieser Elemente ändern. Während diese Servicekarte ausgewählt ist, werde ich eine Aktion erstellen, weil ich die Hintergrundfarbe dieses Stahlblocks ändern möchte und hier unter dem Stil werde ich BG Farbe, Hintergrundfarbe wählen. Da gehen wir und hier kann ich eine neue Hintergrundfarbe dafür wählen. Lassen Sie mich den primären Standard wählen, nett, und dann werde ich die Lockerung von linear zu Lockerung ändern. Das nächste, was wir ändern müssen, ist die Farbe dieses Projekttitels. Ich werde es auswählen. Ich werde eine neue Aktion erstellen, und dieses Mal wird es Textfarbe sein. Lassen Sie mich voran und ändern Sie die Farbe dieses Textes in weiß, genau so, und dann werde ich diese Projektbeschreibung auswählen und fügen wir hier eine neue Aktion hinzu, Textfarbe und ich werde weiß wählen. Dann werde ich die Deckkraft von 100 Prozent auf 60 Prozent reduzieren, um hier eine gute visuelle Hierarchie zu haben. Schließlich werde ich diese Link-Schaltfläche auswählen und ich werde eine neue Aktion erstellen, und es wird wieder Textfarbe sein, aber dieses Mal wird es unsere sekundäre Farbe sein, diese Orange. Lassen Sie mich diese Animation spielen und sehen, ob alles perfekt funktioniert. Nun, es gibt ein Problem. Diese Animationen sollten gruppiert werden. Wir wollen, dass sie gleichzeitig spielen. Im Moment spielen sie eins nach dem anderen, das wollen wir nicht. Also werde ich diese Textfarbe auswählen, und ich werde sie ziehen und ablegen auf unsere erste Aktion, die die Servicekarte ist. Ich werde dasselbe auch für diese beiden Elemente tun, ziehen Sie es einfach und legen Sie es ab und jetzt sind sie gruppiert. So erfolgt die Animation zur gleichen Zeit. Lass es mich noch mal spielen. Fantastisch. Lassen Sie mich die Animation speichern und sehen, ob sie perfekt funktioniert. Ich werde es retten. Ich werde es in der Vorschau sehen, und ich werde den Mauszeiger darüber zeigen. Sieht toll aus. Aber funktioniert es für alle Karten? Nein, tut es nicht. Was sollen wir tun? Sollen wir fortfahren und diese Karten nacheinander animieren? Natürlich nicht, weil es kein effizienter Weg ist. Da wir Klassen verwenden, müssen wir das nicht tun. Also, was sollen wir tun? Nun, ich werde diesen Kartenhover auswählen, und wie Sie hier sehen können, wenn ich diese Servicekarte, den ersten Keyframe hier im Bereich Affect auswählen , heißt es Interaktionsauslöser, und es steht: „Sie wirken sich jetzt nur auf die Triggerelemente aus.“ Also werde ich diese Drop-Menü öffnen und ich werde es in Klasse ändern. Dann werde ich dieses Drop-Menü öffnen und ich werde es nur für Kinder mit dieser Klasse ändern. Nun lassen Sie mich es speichern und hier, wie Sie unter den Trigger-Einstellungen sehen können, haben wir zwei verschiedene Optionen. Wir haben Elemente, wir haben Klasse. Standardmäßig ist das Element ausgewählt. Es steht: „Trigger nur auf dem ausgewählten Element.“ Das ist nicht das, was wir wollen. Wir wollen, dass diese Animation für all diese Karten funktioniert. Also werde ich es von Element zu Klasse ändern und die Klasse wird Service-Karte sein. Wie Sie hier sehen können, haben alle diese Karten die gleiche Klasse, Servicekarte. Wenn ich nun eine Vorschau darauf zeige, wenn ich den Mauszeiger über diese Karten führe, können Sie sehen, dass die Animation für alle funktioniert. Aber was, wenn ich rausschaue, ändern sie sich nicht. Das liegt daran, dass wir die Hover-Out-Animation nicht erstellt haben. Also lass mich voran gehen und einen erstellen. Was sollen wir tun? Nun, hier, wie Sie sehen können, haben wir auf Hover out, wir werden eine neue Aktion, Start und Animation erstellen. Dieses Mal, anstatt eine neue benutzerdefinierte Animation zu erstellen, werde ich Ihnen einen schnellen Weg zeigen, dies zu tun. Da wir nur wollen, um ihre Farben zurück zu ihren ursprünglichen Farben zu drehen, werde ich voran gehen und mit dem Mauszeiger über diese Karten schweben und hier, wie Sie sehen können, haben wir zwei Symbole. Wenn ich auf diese Punkt-Symbol klicke, kann ich diese Animation duplizieren und ich habe auch Karte Hover. Dann werde ich es umbenennen. Ich werde auf dieses Punktsymbol klicken und lassen Sie mich es in Card Hover Out umbenennen. Jetzt werde ich es auswählen, klicken Sie darauf, und hier werde ich alle diese Elemente auswählen, und ich werde ihre Farbe wieder in ihre ursprünglichen Farben ändern. Während Servicekarte ausgewählt ist, werde ich voran gehen und die Farbe in Weiß ändern. Jetzt werde ich den Projekttitel auswählen und ich werde seine Farbe in neutrale Dunkelheit ändern. Jetzt werde ich die Projektbeschreibung auswählen und ich werde ihre Farbe in neutrales Medium ändern. Schließlich werde ich diese Link-Schaltfläche auswählen und ich werde seine Farbe auf den primären Standard ändern. Genau so. Ich werde „Speichern“ drücken und jetzt, wenn ich mein Projekt in der Vorschau sehe und wenn ich den Mauszeiger über diese Karten führe, können Sie sehen, dass diese Animation in beide Richtungen funktioniert. Genau so. Können Sie sehen, wie einfach es ist, Interaktionen und Animationen auf Webflow zu erstellen? In Ordnung, Jungs. Das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich sehe dich im nächsten Video. 63. Barrierefreiheit: Hey, in diesem Video werden wir über Barrierefreiheit sprechen. Als Webdesigner und Webentwickler müssen wir immer sicherstellen, dass unsere Website für jedermann zugänglich ist. Egal ob jemand blind ist oder Sehbehinderungen hat, er oder sie sollte in der Lage sein, unsere Website bequem und einfach zu nutzen. Aber wie können wir unsere Website zugänglicher machen? Nun, in diesem Video werden Sie einige wichtige Punkte über Barrierefreiheit lernen, und Sie werden einige Techniken lernen, um Ihr Design zugänglicher zu machen. Bist du bereit? Fangen wir an. Wenn Sie Ihre Website entwerfen, müssen Sie sicherstellen, dass Sie das Kontrastverhältnis Ihrer Farben überprüfen, da einige Personen Sehbehinderungen aufweisen und die Farben möglicherweise nicht so verarbeiten, wie wir es tun. Daher ist es wichtig, sicherzustellen, dass unsere Farben genügend Kontrast haben und sie den Kontrastverhältnis-Test bestehen. Wir überprüfen normalerweise das Kontrastverhältnis unserer Farben, wenn wir die Benutzeroberfläche entwerfen, aber als Webentwickler lohnt es sich, das Kontrastverhältnis Ihrer Farben zu überprüfen wenn die Entwicklung Ihres Projekts als Nun ja. Wie kannst du das machen? Wir haben bereits darüber gesprochen, aber ich werde es noch einmal schnell erwähnen. Also, hier, wenn ich diesen Text, diese Überschrift, und wenn ich gehe über die Typografie Abschnitt, Ich werde auf Farbe klicken. Hier haben wir den Abschnitt, der Kontrastverhältnis sagt. Es gibt hier ein Fragezeichen. Wenn ich darauf klicke, können Sie sehen, dass sich das Kontrastverhältnis auf die Zugänglichkeit Ihrer Website auswirkt. ausreichendes Kontrastverhältnis hängt von Vorder- und Hintergrundfarbe, Schriftgröße und Schriftstärke ab. Das ist absolut wahr. Grundsätzlich interessieren wir uns für die Farbe unseres Vordergrunds und die Farbe unseres Hintergrunds. In diesem Fall ist die Farbe dieses Textes unsere Vordergrundfarbe, und diese hellblaue Farbe ist unsere Hintergrundfarbe. Hier, wie Sie sehen können, haben wir die dreifache A-Klasse, und es bedeutet, dass wir das höchste Kontrastverhältnis haben, was erstaunlich ist. Also immer auf das dreifache A zielen, aber manchmal kann man auch das doppelte A bekommen. Das ist auch akzeptabel. Lassen Sie mich Ihnen ein Beispiel zeigen. Wenn ich versuche, diese Farbe zu ändern, da gehen wir, jetzt habe ich die doppelte A. Es ist immer noch lesbar, aber das Kontrastverhältnis ist nicht so viel. Wie Sie sehen können, ist es vier zu eins. Ich werde den Prozess rückgängig machen, Befehl Z oder Control Z Wenn Sie die Entwicklung Ihres Projekts beenden, müssen Sie fortfahren und alle Ihre Farben einzeln überprüfen und sehen, ob Sie den Kontrastverhältnis-Test bestehen. Wenn Sie dieses dreifache A oder Doppel-A sehen, bedeutet das, Sie sind gut zu gehen. Sie müssen voran gehen und Ihre Farben einzeln überprüfen. Ich werde hier runter scrollen. Lassen Sie mich diese auswählen, Learn More Button, und wenn ich den Kopf über die Farbe, Sie können sehen, dass ich habe dreifache A als auch. Was ist mit hier? Sicher ist es dreifach A. Da gehen wir, weil wir diese Farbe schon überprüft haben. Was ist mit dieser Projektbeschreibung? Sieht gut aus. Wir haben Doppel-A, es ist immer noch akzeptabel. Grundsätzlich müssen Sie fortfahren und alle Ihre Elemente einzeln überprüfen. Hier haben wir dreifach A. Was ist mit diesem? Wir haben auch Triple A. Dies ist das erste, was Sie in Bezug auf die Zugänglichkeit überprüfen müssen. Jetzt gehen wir zum nächsten Punkt. Ich werde nach oben scrollen. In fast allen Projekten werden wir Bilder verwenden. Wir können dekorative Bilder oder einige aussagekräftige Bilder verwenden. Zum Beispiel, hier in diesem aktuellen Projektabschnitt, können Sie sehen, dass wir das Projektbild auf diesen Karten haben. Ich werde nach unten scrollen. Hier haben wir einige dekorative Memojis. Das sind dekorative Bilder. Ich werde nach unten scrollen. Diese Symbole sind auch dekorativ. Was meine ich mit dekorativ? Nun, wenn etwas keinen Mehrwert für unsere Website schafft und es der Suchmaschine nicht hilft, die Struktur Ihrer Website zu verstehen, bedeutet das, dass es dekorativ ist. Ich werde hier runter scrollen. Wir haben keine anderen Bilder. Wenn ich hier zur Seite „Meine Projekte“ gehe, ist dieses Bild nicht dekorativ, da dies eines der Bilder unseres Projekts ist. Aber wie können wir die Suchmaschinen dazu bringen, die Struktur unserer Website und die Bedeutung hinter unseren Bildern zu verstehen ? Nun, wir können etwas namens Alt-Text verwenden. Lassen Sie mich zu meiner Homepage gehen, und hier werde ich diese Karte auswählen. Wenn ich auf das Einstellungen-Symbol klicke, wie Sie hier sehen können, haben wir den Alt-Text. Alt ist die kurze Form der Alternative, also ist es ein alternativer Text. Für jedes Bild können wir einen Alt-Text angeben, aber warum müssen wir das tun? Nun, es gibt viele verschiedene Gründe, einen Alt-Text für Ihre Bilder anzugeben. Nummer 1, Suchmaschinen könnten leicht verstehen, die Bedeutung hinter Ihren Bildern, und daher können sie Ihre Website höher rangieren. Auf diese Weise können Sie Ihre SEO verbessern. Der zweite Grund ist, dass unsere Bilder manchmal nicht vollständig geladen werden. In diesem Fall zeigt der Browser dem Benutzer den Alt-Text oder alternativen Text an. Der letzte Grund ist, dass Alt-Text oder alternativer Text für Menschen mit Sehbehinderungen hilfreich sein könnte , die Bildschirmlesegeräte verwenden. Menschen mit Sehbehinderungen verwenden in der Regel Screenreader , um den Inhalt einer Webseite zu lesen. Wenn unsere Bilder keinen Alt-Text haben, liest der Screenreader einfach seinen Namen. Zum Beispiel, wenn ich zu My Assets gehe, werde ich nach unten scrollen, es steht Karte 1. Es ist nicht beschreibend, so dass der Benutzer verwirrt sein kann. Wenn ich hier nach oben scrolle, können Sie sehen, dass diese Projekte Bilder keine beschreibenden Namen haben. Hier haben wir 1, 2, 3, 4, 5, 6. Wir sollten Alt-Text zu unseren Bildern hinzufügen, um einem Benutzer mit Sehbehinderungen zu helfen , die Bedeutung hinter Ihrem Bild zu verstehen. Aber wie können wir Alt-Text zu unseren Bildern hinzufügen? Nun, es gibt viele Möglichkeiten, das zu tun. Der erste und einfachste Weg besteht darin, zu den Assets zu gehen, und wenn Sie den Mauszeiger über eines Ihrer Bilder bewegen, können Sie auf das Symbol Einstellungen klicken. Dann können Sie hier Ihren Alt-Text schreiben. Hier haben wir einen Hinweis. Es sagt, schreiben Sie eine Beschreibung dieses Bildes. Alt-Text wird von Bildschirmlesegeräten verwendet und/oder wenn ein Bild nicht geladen wird. Hier haben wir zwei verschiedene Registerkarten. Wir haben beschreibende, wir haben dekorative. Wenn unser Bild dekorativ ist, können wir es einfach so dekorativ einstellen. Hier steht, dass dekorative Bilder keine Bedeutung vermitteln und keinen Alt-Text benötigen. Das ist richtig. müssen wir unseren dekorativen Bildern keinen Alt-Text hinzufügen. Aber wenn unser Bild eine Bedeutung hat, müssen wir dafür eine Beschreibung schreiben. Wir müssen Deskriptiv auswählen, und hier müssen wir etwas schreiben. Dieses Bild ist nicht dekorativ. Wenn ich zum Abschnitt „Testimonial“ gehe, ist das das Bild unseres Klienten. Hier können wir einfach das Bild von Kristine Watson schreiben. Fertig. Ab sofort, wenn Sie dieses Bild auf Ihrer Website verwenden, wird es diesen Alt-Text haben. Aber es gibt etwas, das Sie beachten müssen. Wenn Sie ein Bild mithilfe des Hintergrundabschnitts hinzufügen, haben sie keinen Alt-Text. Also hier, dieses Symbol hat keinen Alt-Text. Aber wenn Sie dieses Symbol woanders mit einem Bildelement verwenden möchten, wie Sie hier sehen können, können Sie zu Ihren Assets gehen und Sie können einfach auf das Settings Icon klicken und seinen Alt-Text so dekorativ einstellen. Ich werde dasselbe auch für diese beiden Symbole tun. Dekorativ und dekoriert. In der Regel sind unsere Symbole immer dekorativ. Lassen Sie mich ein wenig nach oben scrollen. Aber was ist mit diesen Bildern, die dynamisch sind? Wie Sie sich erinnern, stammt dieses Bild von unserem CMS. Es kommt nicht von unseren Vermögenswerten hier, als wir unsere Sammlung in unserem CMS hier erstellt haben. Als wir unsere Sammlungen Elemente, zum Beispiel Simplify+, erstellt haben, haben wir dieses Bild von unserem Computer hochgeladen. Hier können wir jeden ALT-Text angeben. Was sollen wir tun? Nun, um dieses Problem zu beheben, können Sie einfach zu Ihrer Projektsammlung hier gehen. Wenn Sie dann auf dieses Symbol „Einstellungen“ klicken, können Sie hier ein neues benutzerdefiniertes Feld erstellen. Ich werde hier ein Feld hinzufügen, und es wird einfacher Text sein, und das Label wird ALT-Text sein. Genau so. Es wird nicht erforderlich sein, also werde ich dieses erforderliche Kontrollkästchen nicht aktivieren. Ich werde „Feld speichern“ und „Sammlung speichern“ drücken. Nun, wenn ich zu diesem Simplify+ Projekt gehe. Lassen Sie mich zunächst den Namen in „Vereinfachen“ ändern. Wenn ich nach unten scrollen, hier haben wir dieses neue Alt-Textfeld. Wir können dieses Bild einfach beschreiben. Moment werde ich nur etwas als Beispiel schreiben. Das Bild des Projekts „Vereinfachung“. Nicht der beste Alt-Text übrigens. Ich werde es retten. Nun, lassen Sie mich zu meinem Entwurf hier gehen. Wenn ich dieses Bild auswähle und wenn ich auf das Symbol „Einstellungen“ klicke, haben wir hier, wie Sie sich erinnern, dieses Element mit unserem Projektbild verbunden. Hier kann ich einfach den Alt-Text aus meinen Sammlungen bekommen. Wenn ich dieses Kontrollkästchen aktiviere, kann ich ALT-Text, Nur-Text, und es ist fertig. Jetzt wird jedes dieser Bilder seinen eigenen Alt-Text haben. Natürlich, wenn Sie bereits den Alt-Text für sie festgelegt haben. Wir können dasselbe für die Projektseite tun. Wenn ich zur Projektvorlage gehe, werde ich dieses Bild auswählen, und ich werde auf dieses Symbol „Einstellungen“ klicken, ich werde den Alt-Text aus Projekten erhalten, und lassen Sie mich das Feld ALT-Text einfach so auswählen. Das ist alles über Alt-Text. Aber es gibt noch eine Sache über Barrierefreiheit, und das ist Ihre Überschriftenhierarchie. Wie ich bereits erwähnt habe, sollten unsere Rubriken eine klare Struktur aufweisen. Wenn ich auf meine Homepage gehe und zum Hero Abschnitt gehe, sehe ich, dass dieser Titel das H1 HTML-Tag hat. Wenn ich auf das Einstellungen-Symbol klicken, können Sie sehen, wir haben H1 bis H6. Aber wie sollten Sie Ihre Überschriftenart wählen? Nun, lassen Sie mich Ihnen eine Regel sagen. H1 ist für die wichtigsten Wörter auf Ihrer Seite reserviert. Es sind normalerweise die ersten Wörter, die der Benutzer auf Ihrer Seite sieht. In diesem Fall ist es unser Titel des Heldenabschnitts. Denken Sie daran, dass Sie den H1-Überschrifentyp immer einmal auf jeder Seite verwenden sollten. Sie sollten es nicht mehrmals verwenden. Aber warum spielt es eine Rolle? Weil Suchmaschinen die Struktur Ihrer Website leicht verstehen könnten , wenn Sie die Überschrifentypen richtig festlegen. Wenn Sie sich erinnern, als wir diesen letzten Projektabschnitt entwarfen, sagte ich, dass sie absichtlich seinen Überschriftstyp auf H3 gesetzt haben. Es ist nicht richtig. Warum? Weil Sie beim Entwerfen einer Webseite einen Überschrifentyp nicht überspringen sollten. Wenn Sie H1 verwenden, sollten die zweitwichtigsten Texte auf Ihrer Webseite das H2-Tag haben. In diesem Fall setze ich es auf H3, um Ihnen den Unterschied hier zu erklären. Wenn ich einen Überschrifentyp überspringe, können Suchmaschinen wie Google die Struktur Ihrer Website nicht richtig verstehen, und daher geben sie Ihrer Website keinen höheren Rang. Ich werde voran gehen und das schnell reparieren. Aber bevor Sie das tun, werde ich Ihnen ein sehr hilfreiches Feature zeigen, den Abschnitt „Audit“. Wenn Sie in die untere linke Ecke hier gehen, können Sie sehen, dass wir verschiedene Optionen haben. Wir haben diese Hilfe-Taste, wir haben Video-Tutorials, wir haben QuickFind, und dann haben wir den Abschnitt Audit. Wenn ich darauf klicke, hier finden wir die fehlenden Alt-Text-Bilder und übersprungen Überschriftenebene. Wie Sie sehen können, heißt es: „Audits überprüfen Sie die aktuelle Seite auf Möglichkeiten, um die Leistung und Benutzerfreundlichkeit Ihrer Website zu verbessern.“ Ich werde es abweisen. Hier, wenn ich auf diesen Fehlenden Alt-Text (13) klicke, können Sie sehen, dass er uns alle Bilder zeigt, die keinen Alt-Text haben. Es zeigt uns sogar die Projektsammlung hier und alle Elemente, die keinen Alt-Text haben. Wir haben bereits den Alt-Text für dieses Projekt „Vereinfachung“ angegeben, aber schauen Sie sich an, dass andere Projekte keinen Alt-Text haben. Wir haben hier zwei Möglichkeiten. Wir können das entweder ignorieren. Zum Beispiel, wenn diese Karte 1 keinen Alt-Text benötigt, können wir einfach auf dieses Glockensymbol klicken, um es zu ignorieren, oder wenn Sie einfach weitergehen und ein Alt-Text zu unserem Bild hinzufügen möchten, können wir einfach auf diesen Pfeil nach rechts klicken. Da steht: „Bringen Sie mich zur Lösung.“ Wenn ich darauf klicke, werden wir auf die Asset-Seite gebracht, und wir können hier einen beschreibenden ALT-Text angeben. Aber was ist mit dem anderen Abschnitt? Wie Sie hier sehen können, haben wir diese übersprungene Überschriftenebene. Wenn ich es öffne, heißt es hier: „Bestellte Überschriften helfen den Besuchern, die Seitenstruktur zu verstehen und die Seitennavigation zu verbessern.“ Darin steht: „Projekte in Richtung H3.“ Etwas stimmt nicht mit der Überschrift dieses Projekts. Das ist genau das, was wir vorangehen und beheben werden. Ich kann es entweder ignorieren oder ich kann sagen, dass Sie mich zur Lösung bringen. Wenn ich auf diesen Pfeil nach rechts klicke, kann ich hier den Überschrifentyp auf der rechten Seite ändern. Ich werde es in H2 ändern, und jetzt haben wir eine korrekte Struktur. Ich werde nach unten scrollen. Lassen Sie mich auch diese Überschrift auswählen. Es wird auch H2 sein. Ich werde es auf H2 setzen. Schön. Lassen Sie mich nach unten scrollen. Alles sieht gut aus. Jetzt lass mich zu den Audits gehen. Da gehen wir. Diese Warnung ist verschwunden, weil unsere Website jetzt eine klare Struktur in Bezug auf Überschriftenarten hat. Ich kann einfach auf andere Seiten gehen, zum Beispiel Kontaktieren Sie uns. Hier ist dieser Titel „Kontaktieren Sie uns“ der wichtigste Titel auf dieser Seite. Daher verwenden wir den Überschrifentyp H1. Wenn ich zum Audit gehe, heißt es: „Keine Probleme gefunden.“ Das ist großartig. Lassen Sie mich nun zu einer anderen Seite in unserer Projektvorlage gehen. Hier werde ich es prüfen. Es heißt: „Übersprungen Überschriftenebene“, wieder, Projektüberschrift. Der Name dieses Projekts hat den Überschrifentyp H1. Wir haben hier keine andere Überschrift, außer hier wird es H2 sein, also werde ich es einfach so in H2 ändern. Nun, wenn ich es überprüfe, da gehen wir, ist diese Warnung weg. In Ordnung, Jungs. Hier geht es um Zugänglichkeit. Wenn Sie eine Website erstellen, stellen Sie sicher, dass sie für alle zugänglich ist. Es ist sehr wichtig, denn das ist, was macht Sie zu einem großartigen Web-Designer und Web-Entwickler. Ich hoffe, Sie haben dieses Video genossen. Wir sehen uns im nächsten. 64. Projekteinstellungen: Hey, in diesem Video werden wir über ein Projektsetting sprechen. Wir haben bereits vorher darüber gesprochen, aber in diesem Video werde ich Ihnen einige andere Funktionen der Projekteinstellung zeigen. Wie Sie sich erinnern, um zu den Projekteinstellungen zu gehen, müssen Sie in die obere linke Ecke gehen und Sie müssen hier auf dieses „W“ -Symbol klicken, und dann von hier aus können Sie zu Ihren Projekteinstellungen gehen, und hier haben wir verschiedene Optionen. Wir haben General, Hosting, Editor, etc. Wir werden nicht in alle von ihnen eintauchen, weil wir zum Beispiel ein dediziertes Video über SEO und auch Hosting-Pläne haben. Ich werde Sie nur durch die wichtigsten Registerkarten und Felder hier führen. Auf der Registerkarte Allgemein haben wir diesen Namen, das ist unser Projektname. Wie Sie hier sehen können, haben wir einen Hinweis: „Dies ist der Titel des Projekts innerhalb von Webflow.“ Dann haben wir die Subdomain. Dies ist eine Staging-Domain, die Webflow uns zur Verfügung stellt. Es ist völlig kostenlos und Sie können Ihre Website auf dieser Domain veröffentlichen. Derzeit ist dieses Projekt noch nicht veröffentlicht. Sie können dies ändern, und wenn diese Subdomain verfügbar ist, können Sie diese Domäne verwenden. Hier können wir einen Ordner auswählen und es heißt „Projekte können hier in und aus Ordnern verschoben werden.“ Wir müssen unser Projekt nicht in einen Ordner verschieben. Dann haben wir diese Symbole. Hier können Sie ein Favicon hochladen. Ein Favicon ist dieses kleine Symbol, das Sie auf jedem Browser-Tab sehen können. Es sollte ein 32 x 32 Pixel-Symbol sein. Sie können alle unterstützten Formate hier sehen, PNG, GIF oder JPG. Sie können auch einen Webclip hochladen. Dies ist nur ein Symbol, das angezeigt wird, wenn Ihr Website-Link auf einem iPhone-Home-Bildschirm gespeichert wird. Diese sind optional, aber stellen Sie sicher, dass Sie das Favicon immer für Ihre Website hochladen. Dann haben wir die Lokalisierung. Hier können Sie die Zeitzone aus dieser Liste auswählen. Dann können Sie einen Sprachcode angeben. Es heißt: „Stellen Sie den Sprachcode Ihrer Website so ein, dass Browser , Übersetzungs-Apps und andere Tools sprachsensitive Aufgaben ausführen können.“ Es ist auch optional. Sie können auf die Liste der Sprachcodes zugreifen, wenn Sie auf diesen Link klicken, aber für Englisch können Sie zum Beispiel EN schreiben. Dann haben wir Website Passwort. Einige dieser Optionen sind für den kostenlosen Plan gesperrt. Wenn Sie sie verwenden möchten, müssen Sie Ihr Konto aktualisieren oder Sie müssen Ihrem Projekt einen Hosting-Plan hinzufügen. Wir werden über die Kontopläne und Hosting-Pläne sprechen, aber im Moment müssen Sie nur wissen, dass einige Funktionen nur in Pro-Plänen oder für Projekte mit einem Hosting-Plan verfügbar sind . Wenn Sie beispielsweise Ihr Projekt präsentieren möchten, benötigen Sie einen kostenpflichtigen Plan. Eine weitere wichtige Sache ist das Webflow-Branding. Es heißt: „Um das Webflow-Branding von der veröffentlichten Website auszublenden , fügen Sie Hosting hinzu oder aktualisieren Sie Ihr Konto auf Pro.“ Was ist das Webflow-Branding? Lassen Sie mich für eine Sekunde zum Designer gehen, und ich werde Ihnen zeigen, was es genau ist. Wenn Sie Ihre Website veröffentlichen, wenn Sie auf diese Schaltfläche „Veröffentlichen“ klicken, ist dies unsere Staging-Domain, die ich Ihnen gerade gezeigt habe. Wenn Sie auf „Veröffentlichen“ klicken, um eine Domains auszuwählen, können Sie Ihre Website veröffentlichen, und jetzt ist es veröffentlicht, und wenn ich auf dieses kleine Symbol klicken, da gehen wir. Hier ist unser Projekt. Sie können sehen, dass in der unteren rechten Ecke dieses „Made in Webflow“ Badge ist, und es wird auf Ihren Websites angezeigt, wenn Sie die kostenlose Staging-Domain verwenden und wenn Ihre Website auf dieser Domain veröffentlicht wird. Wenn Sie fortfahren und Ihrem Projekt einen Hosting-Plan hinzufügen, können Sie das einfach deaktivieren. Lassen Sie mich zu den Projekteinstellungen zurückkehren, mal sehen, ob wir noch etwas haben. Hier haben wir den Überblick über unser Projekt, die Gesamtgröße der Assets, zuletzt veröffentlicht, zuletzt aktualisiert, die Anzahl der Seiten, Formulareinsendungen. Das sind unsere Statistiken. Hier haben wir die Website-Aktivität, ich werde nach oben scrollen. Wenn Sie zu Hosting gehen, können Sie Ihrem Projekt ein Hosting hinzufügen. Wir werden später darüber reden. Dann haben wir den Redakteur. Hier können Sie Mitarbeiter zu Ihren Projekten hinzufügen, damit andere Person den Inhalt Ihres Projekts bearbeiten kann. Dieser ist jedoch nur verfügbar, wenn Sie über den CMS oder den Business-Leitplan verfügen. Dann haben wir Billing. Wir werden jetzt nicht darüber reden, weil wir dafür ein Video haben. Dann haben wir SEO, den gleichen Fall. Wir werden später darüber reden. Dann haben wir Formulare. Wir haben alle diese Felder vorher durchlaufen. Dann haben wir Fonts. Hier können Sie Ihre benutzerdefinierten Schriftarten hinzufügen, wir haben bereits darüber gesprochen. Dann haben wir Backups. Diese Wanne ist so nützlich. Sie müssen wissen, dass Webflow Ihr Projekt sichert, wenn Sie die Befehlsschalttaste S oder die Umschalttaste S unter Windows drücken. Warum spielt es eine Rolle? Denn manchmal können Sie etwas ändern und zur vorherigen Version Ihres Projekts zurückkehren. In diesem Fall können Sie einfach zu den Backups gehen und Sie können hier die passende Version finden, zum Beispiel, diese sagt vor zwei Tagen, automatische Sicherung, drei Seiten, 102 Stile, etc. Sie können auch eine drei Seiten, 102 Stile, etc. Vorschau diese Version und dann können Sie sie wiederherstellen. Beachten Sie jedoch, dass Sie, wenn Sie einige alte Backups wiederherstellen möchten, einen Hosting-Plan oder ein kostenpflichtiges Konto benötigen. Sie können diese letzten Backups jedoch problemlos wiederherstellen. Dann haben wir Integrationen. Auf dieser Registerkarte können Sie Ihr Projekt tatsächlich mit Diensten von Drittanbietern verbinden. Zum Beispiel, Google Analytics, Google Maps, Facebook Pixel, und Sie können auch ein API-Token generieren. Wir werden über die Integrationen in einem separaten Video sprechen, aber im Moment müssen Sie nur wissen, dass es in den Projekteinstellungen existiert. Schließlich haben wir Custom Code, der auch für kostenpflichtige Pläne verfügbar ist. Mithilfe dieses Abschnitts können Sie Ihrer Website ggf. einen benutzerdefinierten Code hinzufügen. Aber die meiste Zeit müssen Sie für die meisten Websites keinen benutzerdefinierten Code hinzufügen. Wenn Sie jedoch die nativen Funktionen von Webflow erweitern müssen, können Sie Ihren Plan einfach aktualisieren und diese nützlichen Funktionen nutzen. Was haben wir hier in der Symbolleiste? Hier haben wir einige Symbole. Die erste ist das Übertragen-Symbol. Wenn ich darauf klicke, steht „Zu einem Benutzer, zu einem Team“. Mit dieser Schaltfläche können Sie Ihr Projekt auf ein anderes Webflow-Konto übertragen. Aber um dies zu tun, müssen Sie Ihren Plan wieder auf ein kostenpflichtiges Konto aktualisieren. Sie können Ihr Projekt auch an ein Team übertragen, wenn Sie auf diese Registerkarte gehen. Dies ist eine nützliche Option, wenn Sie das Projekt des Kunden auf ein eigenes Konto übertragen möchten und Sie das Projekt nicht auf Ihrem eigenen Konto hosten möchten. Wir werden später über die Vorteile dieser Option sprechen. Die nächste Option hier ist Löschen. Wenn Sie Ihr Projekt löschen möchten, müssen Sie einfach diesen roten Code hier eingeben und dann Ihr Projekt für immer löschen. Denken Sie daran, dass das Projekt nach dem Löschen dauerhaft gelöscht wird, und Sie können diesen Vorgang nicht rückgängig machen. Stellen Sie sicher, dass Sie zweimal überlegen, bevor Sie Ihr Projekt für immer löschen. Dann haben wir die Option Duplicate. Manchmal müssen Sie ein Projekt aus einem bestimmten Grund duplizieren, egal ob Sie nur ein Projekt archivieren möchten oder nur einige Änderungen an der duplizierten Version vornehmen möchten, Sie können einfach auf diese Schaltfläche „Duplizieren“ klicken, und hier können Sie einfach Ihr Projekt duplizieren. Die letzte Option hier ist Veröffentlichung rückgängig machen. Wenn Sie darauf klicken, wird Ihre Website unveröffentlicht und Sie müssen sie erneut veröffentlichen. Hier haben wir auch andere Möglichkeiten. Wir haben Share. Manchmal müssen Sie Ihr Projekt möglicherweise mit anderen Designern oder anderen Mitarbeitern oder sogar mit dem Kunden teilen . Wenn Sie auf diese Schaltfläche „Teilen“ klicken, können Sie hier einfach diesen Schalter einschalten, und dann generiert Webflow einen eindeutigen Freigabe-Link für Ihr Projekt. Wenn Sie diesen Link einfach kopieren und mit Ihrem Kunden oder anderen teilen, kann er oder sie leicht Zugriff auf das Projekt erhalten, aber mit Lesezugriff. Was bedeutet das? Es bedeutet, dass sie einige Änderungen auf der Website vornehmen können, aber diese Änderungen werden nicht gespeichert, deshalb wird es schreibgeschützt genannt. Sie können 100 Prozent sicher sein, dass sie Ihre Website nicht brechen können. Ich werde es ausschalten und dann haben wir den Designer. Wenn Sie darauf klicken, werden Sie zum Designer weitergeleitet. Dann haben wir den Editor. Es steht: „Veröffentlichen Sie Ihr Projekt, um auf den Editor zuzugreifen.“ Wir werden im nächsten Video über den Editor sprechen. Alles klar, Leute, das ist alles für die Projekt-Einstellungen. Es gibt viele Dinge, über die wir nicht gesprochen haben, wie die SEO Sektion oder Editor, aber wir werden definitiv in sie eintauchen. Ich habe Sie dieses Video genossen und ich werde Sie in der nächsten sehen. 65. Editor: Hey, in diesem Video werden wir über den Workflow-Editor sprechen. Aber vorher gehen wir weiter und überprüfen unsere Links, weil wir unsere Website veröffentlichen werden. Als wir dieses Projekt erstellt haben, haben wir einige Links erstellt, aber es handelt sich um leere Links. Es gibt keine URL, daher haben wir kein Ziel für diese Links erstellt. Lass uns voran gehen und das schnell beheben. Ich werde mit der Navigationsleiste beginnen. Wenn wir auf diesen Logo-Link klicken, bringt es uns nirgendwo hin. Lassen Sie mich es Ihnen zeigen. Wenn ich es in der Vorschau sehe und wenn ich darauf klicke, passiert nichts. Das liegt daran, dass es kein Ziel für diesen Link gibt. Ich werde auf diese Navigationsleiste doppelklicken, und ich werde diesen Navbar-Logo-Link auswählen. Dann auf der rechten Seite können Sie sehen, dass wir die Markeneinstellungen haben und hier haben wir verschiedene Optionen. Was uns interessiert, ist der Typ und die URL. Welche Art von Verhalten suchen wir? Wir wollen das erreichen. Wenn der Benutzer auf dieses Logo klickt, sollte er den Benutzer zur Homepage bringen. Ich werde Typ auswählen. Standardmäßig ist es auf externe URL festgelegt. Ich werde es auf Seite ändern. Dann von dieser Seite Drop-Menü, haben wir zwei statische Seiten nach Hause erstellt und kontaktieren Sie uns. Ich wähle Homepage aus. Genau so. Dann können wir angeben, ob es es in der gleichen Registerkarte oder in einer neuen Registerkarte öffnen soll. Ich werde es auf diese Registerkarte setzen. Jetzt gehen wir weiter und schauen es uns an. Wenn ich darauf klicke, da gehen wir. Das ist genau das, was wir wollen. Was ist mit anderen Links hier? Ich werde darauf doppelklicken. Ich werde diesen Home-Link auswählen. Ich werde den Typ auf Seite ändern und die Seite wird zu Hause sein. Was ist mit Projekten und Dienstleistungen und kontaktieren Sie uns? Lassen Sie mich zuerst diese Kontaktieren Sie uns auswählen und dann werde ich den Typ auf Seite ändern, und es wird den Benutzer auf die Seite Kontaktieren Sie uns bringen. Aber was ist mit Projekten und Dienstleistungen? Nun, wie Sie sich erinnern, haben wir auf unserer Homepage den Projektabschnitt und den Bereich Dienstleistungen erstellt. Wenn der Benutzer also auf diesen Projekt-Link klickt, sollte der Benutzer zu diesem bestimmten Abschnitt auf unserer Homepage weitergeleitet werden. Wie ist das möglich? Es ist sehr einfach. Lassen Sie mich zuerst zu meiner Instanz zurückkehren und ich werde nach unten scrollen. Lassen Sie mich zum letzten Projektabschnitt gehen und ich werde diesen Abschnitt auswählen. Dann, wenn Sie zu den Elementeinstellungen auf der rechten Seite gehen, hier haben wir dieses Feld, ID. Ich werde eine ID für diesen bestimmten Abschnitt angeben. Es sollte eine eindeutige ID sein. Denken Sie daran. Ich werde schreiben, Projekte. Cool. Aber was ist mit Dienstleistungen? Ich werde nach unten scrollen. Ich werde dasselbe für diesen Dienstbereich tun, und hier werde ich Dienste schreiben. Schön. Wir sind fast da. Ich werde nach oben scrollen und ich werde auf meine Navigationsleiste doppelklicken. Wenn ich diese Projekte Link auswählen, auf der rechten Seite, wenn ich diesen Typ Dropdown-Menü öffnen, haben wir verschiedene Optionen abgesehen von externen URL und Seite, die wir vor verwenden, wir haben Telefon, E-Mail, Abschnitt und fein. Ich werde Abschnitt wählen, und dann haben wir diesen neuen Abschnitt Drop-Menü, und wenn ich es hier öffnen, haben wir verschiedene Abschnitte. Diese beiden sind für unsere Formulare, ich werde Projekte auswählen. Dies ist der Abschnitt, den wir gerade erstellt haben. Jetzt sehen wir, was passiert, wenn ich zu meiner Instanz zurückgehe und wenn ich dieses Projekt in der Vorschau sehe, klicke ich auf Projekte. Da gehen wir. Wir werden zum Projektabschnitt gebracht. Sie können dieses Verhalten heutzutage auf vielen verschiedenen Websites finden. Gehen wir weiter und machen das Gleiche für die Dienste. Lassen Sie mich diesen Typ auswählen. Ich werde Abschnitt wählen und lassen Sie mich Dienste auswählen. Wir sind fertig, außer wir sind es nicht. Lassen Sie mich zur Instanz zurückkehren. Ich werde es in der Vorschau sehen. Ich werde auf Dienste klicken. Da gehen wir. Sieht gut aus. Wir haben jedoch ein Problem. Wenn ich zu einer anderen Seite gehe, zum Beispiel unserer Kontaktseite, lassen Sie mich Ihnen zeigen, was passiert. Ich werde es in der Vorschau anzeigen und wenn ich auf Projekte klicke, wie Sie sehen können, passiert nichts, weil wir den Projektabschnitt hier nicht haben. Das gleiche passiert, wenn ich auf diese Dienste klicke. Wie können wir das beheben? Lassen Sie mich Ihnen zeigen, wie. Ich gehe zurück zu meiner Homepage, und ich werde auf diese Navigationsleiste doppelklicken und lassen Sie mich den Link dieses Projekts auswählen. Hier wird der Typ auf Abschnitt gesetzt und Sie werden es wieder auf externe URL umschalten. Hier werde ich dieses Hashtag-Zeichen entfernen und wir können einfach ein Back-Häkchen und einen Schrägstrich schreiben, und dann werde ich ein Hashtag-Zeichen hinzufügen. Schließlich müssen wir unsere Abschnitte ID angeben. Lassen Sie mich Projekte schreiben. Ich werde dasselbe für diese Dienste tun. Lassen Sie mich diesen Link auswählen. Ich werde seinen Typ in eine externe URL ändern, und ich werde zurückschreiben Tick Forward Schrägstrich, ein Hashtag-Zeichen und Dienste. Auf diese Weise verwenden wir einen Ankerlink. Dies bedeutet, auf unsere Homepage zu gehen und dann diese Hashtag-Dienste bedeutet, zu diesem bestimmten Abschnitt zu gehen. Jetzt gehen wir weiter und sehen, ob es funktioniert. Aber um es zu überprüfen, müssen Sie zuerst Ihre Website veröffentlichen, weil es nicht funktioniert, wenn wir einfach vorwärts gehen und eine Vorschau darauf. Ich werde es veröffentlichen. Ich werde diese Staging-Domain auswählen, und lassen Sie uns diese Veröffentlichung drücken, um eine Domains auszuwählen. Schön. Dann, wenn ich es hier öffne, kann ich auf Projekte klicken und ich werde zu diesem Abschnitt weitergeleitet werden. Wenn ich auf Dienste klicke, werde ich zu diesem Abschnitt weitergeleitet. Aber der coole Teil ist, dass, wenn ich zum Beispiel den Kontakt mit uns gehe und wenn ich auf Projekte klicke, wir zurück auf unsere Homepage gebracht werden, direkt zu diesem Projektabschnitt. Das ist so nützlich. Ist es nicht? Lassen Sie uns nun voran und wählen Sie diese Schaltfläche in Berührung. Ich werde auf das Einstellungssymbol klicken, und dann gehe ich zum Seitenabschnitt. Lassen Sie mich Kontaktieren Sie uns wählen. Was ist mit CR-Arbeit? Ich werde es auswählen und ich werde Abschnitt hier, Seite Abschnitt wählen, und lassen Sie mich Projekte auswählen. Lassen Sie mich hier nach unten scrollen. Diese Informationen mehr Schaltflächen haben dynamische URLs, so dass wir sie nicht ändern müssen. Was ist mit diesen mehr Schaltflächen lernen? Wir haben keine Seite für unsere Dienste erstellt, da es sich um ein fiktives Projekt handelt und wir nicht immer wieder einfache Seiten erstellen müssen . Bisher haben Sie gelernt, eine moderne Seite mit komplexen Interaktionen zu erstellen. Wenn Sie möchten, können Sie fortfahren und eine Seite für diese Dienste erstellen, aber es ist für diesen Kurs nicht notwendig. Ich werde nach unten scrollen. Hier haben wir auch verschiedene Links. Wir haben auch keine Seite für sie erstellt. Es ist völlig in Ordnung, weil ich Ihnen nur zeigen wollte, wie Sie eine Fußzeile mit verschiedenen Links erstellen können . Sie können immer weitergehen und einige andere Seiten erstellen und ein Ziel für diese Links festlegen. Nun gehen wir zu unserem Hauptthema, das ist der Editor. Wenn Sie eine Website entwickeln, weiß Ihr Kunde nicht, wie er mit dem Webflow-Designer arbeiten soll, und sie sollten es nicht tun. Warum? Weil es zu komplex ist, um all die Dinge zu lernen, die Sie in diesem Kurs gelernt haben, und es ist völlig verständlich. Sollten sie sich immer mit Ihnen in Verbindung setzen, wenn sie etwas ändern, den Inhalt ihrer Website ändern wollen ? Natürlich nicht. Es kann den Editor verwenden. Wenn Sie zu diesem oberen Teil Ihres Symbols in der oberen linken Ecke gehen, und wenn Sie darauf klicken, können Sie den Editor finden. Ich werde darauf klicken und wir werden zum Redakteur gebracht. Hier ist der Redakteur. Wie Sie sehen können, haben wir diese Symbolleiste am unteren Rand, wir haben Seiten, Sammlungen, Einstellungen. Dann haben wir zwei Schaltflächen, zurück zu Live-Website und veröffentlichen. Wie können die Kunden voran gehen und den Inhalt hier ändern? Es ist so einfach. Nehmen wir an, Sie möchten die Überschrift ändern. Sie können einfach mit dem Mauszeiger über diese Überschrift bewegen, sie können darauf klicken und dann beginnen, sie zu ändern. Nehmen wir an, ich möchte dieses atemberaubende Wort mit erstaunlich ändern, einfach so. Es ist so einfach. Sie müssen nicht zum Designer gehen und alles ändern. Sie können hier auch einen Link einfügen. Sie können es mit Spannweite, alle möglichen Dinge, aber sie können das Layout der Website nicht ändern. Es ist sehr wichtig. Sie können Ihre Anzeigeeinstellung, die CSS-Eigenschaften und solche Dinge ändern. Nehmen wir an, sie möchten diese Schaltfläche „Get in Touch“ ändern. Sie können den Mauszeiger darüber bewegen, und wenn sie hier auf dieses Einstellungssymbol klicken, können sie den Text bearbeiten. Sie können den Link auch bearbeiten. Ich werde auf Text bearbeiten klicken, und hier werde ich es ändern, um uns zu beginnen, zum Beispiel. Genau so. Ich werde es rückgängig machen. Was ist mit Bildern? Nun, Ändern von Bildern ist auch einfach. Sie können den Mauszeiger über ein Bild bewegen und wenn sie darauf klicken, können sie ein neues Bild von ihrem Computer auswählen. Ich werde nach unten scrollen. Sie können sogar den Inhalt aus ihrer Sammlungsliste ändern. Lassen Sie mich auf diese Schaltfläche „Mehr erfahren“ klicken und jetzt sind wir auf der Projektseite. Erinnern Sie sich, als wir über den Rich-Text gesprochen haben, den wir hier für die Details verwendet haben? Wenn wir einen Rich-Text verwenden, kann der Client das hier einfach ändern. Sie können es bearbeiten, sie können es formatieren, sie können es fett machen, sie können Links hinzufügen, sie können sogar Bilder und Videos zu diesem Abschnitt hinzufügen. Wie? Wenn ich einfach hier klicke, kann ich auf diesen Plus-Button klicken, und da gehen wir. Ich kann ein Bild, ein Video wählen. Es kann sogar einen Code einbetten. Es ist nur für eine kostenpflichtige Website oder ein kostenpflichtiges Konto verfügbar. Sie können eine Aufzählungspunktliste usw. hinzufügen. Deshalb ist die Verwendung eines Rich-Textes so vorteilhaft, wenn Sie eine Website für einen Kunden entwerfen , da sie nicht wissen müssen, wie die Absätze, Überschriften usw. geändert werden sollen. Sie können sogar eine Überschrift hier, wenn sie wollen. Aber was ist mit dynamischen Inhalten? Ich gehe zur Homepage. Hier in dieser Symbolleiste unten, wenn ich auf Seiten klicke, kann ich alle Seiten sehen. Ich kann eine statische Seiten sehen, Projektseiten. Ich kann die Einstellungen dieser Seiten nacheinander ändern, aber was ist, wenn ich noch mehr Projekte zu meiner Website hinzufügen möchte? Es ist so einfach. Ich kann zu den Sammlungen gehen. Ich kann zur Projektsammlung gehen und alle meine Projekte sind hier. Ich kann einfach einen von ihnen auswählen, wenn ich sie ändern möchte. Hier sind alle Felder, die wir zuvor erstellt haben, wie das Bild, Projekttyp, Fertigstellungsdatum, Projektdetails, sogar der gesamte Text. Wenn ich ein neues Projekt erstellen möchte, kann ich diesen grünen Knopf drücken und ein Projekt erstellen und der Kunde kann seine Website einfach ohne Ihre Hilfe verwalten. Natürlich, wenn sie das Layout ändern wollen oder ein tun einige komplexe Modifikationen, sie können zu Ihnen erreichen. Andernfalls können sie einfach Inhalte ändern, neue Inhalte hinzufügen, ohne Sie zu kontaktieren. Nachdem die Änderungen abgeschlossen sind, können sie auf diese Schaltfläche „Veröffentlichen“ klicken, um alle Änderungen zu veröffentlichen. Wie Sie hier sehen können, sagt es, dass zwei unveröffentlichte Änderungen sind. Wenn ich darauf klicke, können Sie eine Vorschau der vorgenommenen Änderungen anzeigen und Sie können auf „Veröffentlichen“ klicken. In Änderungen veröffentlichen, und jetzt sind diese Änderungen live. Hier dreht sich alles um den Editor. Es ist ein sehr nützliches Werkzeug, um den Inhalt zu ändern und neue Inhalte hinzuzufügen, insbesondere für Ihre Kunden. Denn jetzt sind Sie ein professioneller Webflow-Benutzer und brauchen den Editor nicht zu verwenden, aber Ihr Client ist es nicht. Daher muss er oder sie den Editor verwenden, um Inhalte hinzuzufügen oder Inhalte zu ändern. Alles klar Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 66. Veröffentlichen: Hey, jetzt, da unsere Website fertig ist, ist es Zeit, unsere Website zu veröffentlichen. Zuvor müssen Sie jedoch möglicherweise Ihre benutzerdefinierte Domäne mit Ihrem Projekt verbinden. Ich habe Ihnen bereits gezeigt, dass, wenn Sie hier zu diesem Veröffentlichungsbereich gehen und wenn ich auf diese Schaltfläche „Veröffentlichen“ klicke, Sie sehen können, dass Webflow eine Staging-Domain für Ihr Projekt erstellt. Es ist völlig kostenlos und Sie können diese URL in den Projekteinstellungen ändern. Wenn Sie jedoch ein Projekt für einen Client erstellen, möchten Sie die Stagingdomäne nicht verwenden, da sie nicht professionell aussieht. Daher müssen Sie die benutzerdefinierte Domäne mit Ihrem Projekt verbinden. Wie kannst du das machen? Nun, Sie können hier einfach auf diese Schaltfläche klicken oder Sie können direkt zu den Projekteinstellungen gehen und zur Registerkarte Hosting gehen. Ich werde darauf klicken und ich werde zum Hosting Tab der Projekteinstellungen weitergeleitet. Hier können wir einen Lageplan für unser Projekt hinzufügen. Alle Projekte in Ihrem Starterplan werden mit kostenlosem Staging geliefert, wie Sie sehen können, dass es hier angegeben ist. Wenn Sie die benutzerdefinierte Domain mit Ihrem Projekt verbinden möchten , müssen Sie auf einen kostenpflichtigen Standortplan upgraden. So müssen Sie hier einen Lageplan hinzufügen, Sie können zwischen verschiedenen Optionen wählen, wie Basic, CMS, Business. Wir werden später über die Unterschiede sprechen, aber der Prozess sieht so aus. Zuerst fügen Sie Ihrem Projekt einen Hostingplan, einen Standortplan hinzu, und dann steht die benutzerdefinierte Domänenoption zur Verfügung. Wenn Sie bereits eine Domain haben, können Sie sie einfach hier aufschreiben und dann müssen Sie fortfahren und Ihr DNS aktualisieren. Wir werden jetzt nicht in die technischen Fragen eintauchen, da die Verbindung einer benutzerdefinierten Domain mit Ihrem Projekt von Ihrem DNS-Provider abhängt. Wenn Sie Ihre Domain von der Google-Domain gekauft haben, ist Ihr DNS-Anbieter Google-Domain und jeder Anbieter hat seinen eigenen Setup-Prozess. Daher ist es nicht möglich, den Prozess der Verbindung von benutzerdefinierten Domänen von allen Domänenanbietern zu erklären . Dieser Setup-Prozess kann sich häufig ändern, so dass der beste Weg, um mehr darüber zu erfahren , ist es, einfach zu diesem benutzerdefinierten Domänenabschnitt zu gehen und Sie darauf klicken, um zu erfahren, wie Sie benutzerdefinierte Domain-Hosting einrichten. Wenn Sie darauf klicken, werden Sie zu einer anderen Seite weitergeleitet und hier gibt es ein sehr gutes Video, das Sie sehen können, wie Sie eine benutzerdefinierte Domain mit Ihrem Projekt verbinden können. Sie können diesen Artikel auch lesen, da Webflow diese Artikel regelmäßig aktualisiert, wenn sie sich entscheiden, etwas zu ändern. Es ist ein einfacher Prozess. Da der Prozess jedoch für jeden Anbieter anders aussieht, werden wir nicht in die technischen Probleme eintauchen, aber der Prozess ist so einfach und es ist nicht zeitaufwendig. Sobald Sie Ihre benutzerdefinierte Domain verbunden haben, können Sie Ihre Website in Ihrer benutzerdefinierten Domain veröffentlichen. Wie kannst du das machen? Es ist so einfach. Sie können einfach auf diese Schaltfläche „Veröffentlichen“ gehen, Sie können darauf klicken und dann hier, abgesehen von dieser Staging-Domain, können Sie Ihre benutzerdefinierte Domain auswählen und auf „Veröffentlichen“ zu ausgewählten Domains klicken. Denken Sie daran, dass Sie die Veröffentlichung Ihrer Website jederzeit rückgängig machen können. Sie können auch zum Designer gehen und Sie können auf diese Schaltfläche „Veröffentlichen“ in der Symbolleiste klicken und Sie können Ihre benutzerdefinierte Domain auch hier auswählen und dann auf die Schaltfläche „Veröffentlichen“ klicken. Momentan ist unsere Staging-Domain ausgewählt. Lassen Sie uns unser Projekt für eine Sekunde veröffentlichen, und jetzt ist es veröffentlicht und Sie können es öffnen, wenn Sie auf dieses kleine Symbol klicken. Wann immer Sie Änderungen an Ihrer Website vornehmen, müssen Sie sicherstellen, dass Sie diese veröffentlichen. Andernfalls ist diese Änderung privat und niemand kann das sehen. Vergewissern Sie sich, dass Sie Ihre Website veröffentlichen, sobald Sie einige Änderungen vorgenommen haben. Wenn Sie die Veröffentlichung Ihrer Website rückgängig machen möchten, können Sie einfach auf diese Schaltfläche „Veröffentlichung rückgängig machen“ klicken und sie wird unveröffentlicht. Wenn Sie diese Staging-URL ändern möchten, wie ich bereits erwähnt habe, können Sie zu den Projekteinstellungen gehen und dann unter der Registerkarte Allgemein hier haben Sie Sub-Domain und Sie können diese Sub-Domain einfach ändern. Lassen Sie mich es zu etwas anderem ändern; Circledesign. webflow.io, ich werde Änderungen speichern und dann werde ich es jetzt veröffentlichen. Derzeit ist unsere Website auf dieser Staging-Domain veröffentlicht und niemand sonst kann diese URL verwenden. Dies ist eine eindeutige URL für unser Projekt. Ich werde es öffnen. Dort gehen wir, die URL wurde geändert. In den zukünftigen Videos werden wir über verschiedene Hosting-Pläne sprechen , ob Sie auf Webflow hosten sollten oder nicht. Wenn Sie also nicht wissen, welcher Plan für Sie oder Ihre Kunden geeignet ist, sich keine Sorgen, wir werden darauf eingehen. Alles klar, Jungs, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und wir sehen uns im nächsten. 67. Webflow: Jetzt, da unsere Website bereit ist, ist es an der Zeit, über die Pläne von Webflow zu sprechen. Webflow hat verschiedene Pläne. Es hat Kontopläne und Standortpläne. In diesem Video werden wir über verschiedene Pläne sprechen. Sie werden lernen, was der Unterschied zwischen ihnen ist, und Sie können entscheiden, welcher Plan Ihren Bedürfnissen entspricht. Wenn du bereit bist, fangen wir an. Wenn Sie zu webflow.com/pricing gehen, können Sie diese Seite öffnen, und hier finden Sie alle Informationen, die Sie über verschiedene Pläne benötigen. Wenn ich nach unten scrolle, können Sie sehen, dass Webflow zwei Arten von Plänen hat: Websitepläne und Kontopläne. Was ist der Unterschied zwischen ihnen? Nun, wann immer Sie Ihre benutzerdefinierte Domäne mit Ihrem Projekt verbinden möchten, müssen Sie Ihrem Projekt einen Websiteplan hinzufügen. Im Moment verwenden wir den Stagingplan. Alle Projekte verfügen standardmäßig über den Kommissionierplan. Wenn Sie jedoch Zugriff auf weitere Funktionen erhalten und Ihre benutzerdefinierte Domäne mit Ihrem Projekt verbinden möchten, müssen Sie einen Websiteplan hinzufügen. Dies ist im Grunde ein Hosting-Plan. Wenn ich auf diesen Abschnitt „Lageplan“ klicke, werde ich zu diesem Abschnitt weitergeleitet. Mal sehen, was wir haben. Wie Sie sehen können, haben wir vier verschiedene Optionen. Wir haben Basic, CMS, Business und Enterprise. Fangen wir mit Basic an. Wir können hier die Kosten sehen. Es sind die monatlichen Kosten. Es sagt, am besten für eine einfache Website, die kein CMS benötigt. Grundsätzlich unterstützt dieser Plan kein CMS. Wenn Sie eine Website veröffentlichen möchten, die nur statische Seiten hat, funktioniert dieser Plan am besten für Sie. Sie können hier alle verfügbaren Funktionen sehen, Sie können bis zu 100 verschiedene statische Seiten erstellen, Sie können bis zu 25.000 monatliche Besuche erhalten, Sie erhalten 100 Formulare pro Monat und andere verschiedene Funktionen. Dann haben wir CMS, was gut für Websites ist, die dynamische Seiten haben und mit CMS arbeiten müssen. Auch hier können Sie bis zu 100 statische Seiten erstellen, Sie können bis zu 100.000 monatliche Besuche erhalten. Mit diesem Plan können Sie bis zu 2.000 Sammlungselemente erstellen. In unserem Projekt ist der Sammlungsartikel, wo die Projekte, die wir für unsere Projekte erstellt haben Sammlung. Wenn Sie sich erinnern, haben wir verschiedene Projekte wie Vereinfachen, Crypto Pi, etc. Hier sind die Anzahl der Formulare Einreichungen ist viel höher. Sie können voran gehen und alle diese Informationen lesen. Wir werden nicht in sie eintauchen. Ich werde sie nicht nacheinander lesen. Sie müssen jedoch verstehen, dass Sie Ihrem Projekt einen Websiteplan hinzufügen müssen, wenn Sie eine benutzerdefinierte Domäne mit Ihrem Projekt verbinden möchten. Denken Sie daran, dass Standortpläne zu Projekten hinzugefügt werden, nicht zu Ihrem Konto, weil wir auch Kontopläne haben und wir werden in wenigen Minuten darüber sprechen. Aber das nächste, was ich hier erwähnen werde, sind die E-Commerce-Pläne. Diese Website-Pläne sind gut für persönliche Websites, Blogs und Business-Websites. Wenn Sie eine E-Commerce-Website mit Webflow erstellen möchten, müssen Sie Ihrem Projekt einen E-Commerce-Plan hinzufügen. Hier haben Standard, Plus, und fortgeschritten. können Sie die Informationen lesen und hier mehr über verschiedene Pflanzen erfahren. Ich gehe zurück zu den Standortplänen, und jetzt werde ich über Kontopläne sprechen. Wenn Sie mit Webflow arbeiten, sind die meisten Funktionen kostenlos zu verwenden, aber es gibt auch Funktionen, die bezahlt werden. Dies sind einige zusätzliche Funktionen, die Sie möglicherweise verwenden müssen , um erstaunliche Projekte zu erstellen. Jetzt werde ich auf diese „Kontopläne“ klicken. Da gehen wir. Hier haben wir individuelle Pläne und Teampläne. Wenn Sie ein Freiberufler sind und alleine arbeiten, brauchen Sie keinen Teamplan zu bekommen. Wenn Sie jedoch mit anderen Entwicklern und anderen Designern zusammenarbeiten möchten, müssen Sie möglicherweise einen Teamplan erhalten. Aber lassen Sie uns über individuelle Pläne sprechen. Wenn Sie standardmäßig ein Konto auf Webflow erstellen, wird der Starterplan Ihrem Konto zugewiesen. Hier, wie wir sehen können, heißt es, alles, was Sie brauchen, um mit Webflow zu beginnen und es ist für immer kostenlos. Mit dem Starterplan können Sie bis zu zwei Projekte erstellen. Wenn ich darauf klicke, können Sie sehen, dass Projekte auf gehosteten Websites sind, die Sie in Webflow erstellen. Wenn Sie zwei Projekte erstellen und diesen Projekten einen Lageplan hinzufügen, können Sie weiterhin zwei weitere Projekte mit dem Starterplan erstellen. Hier steht, dass Sie sie in einer webflow.io-Unterdomäne veröffentlichen können, um sie als Prototypen freizugeben oder einen Websiteplan hinzufügen, um auf einer benutzerdefinierten Domain live zu gehen. Dann haben Sie die Kundenabrechnung. Wir werden später über diese Option sprechen. Inszenierung, da steht frei. Wenn ich darauf klicke, werden wir die Informationen hier sehen. Es sagt bis zu zwei statische Seiten und 50 CMS-Elemente. Das bedeutet, dass Sie mehr als zwei statische Seiten und mehr als 50 CMS-Elemente erstellen können. Denken Sie daran, dass Sie nicht dynamischere Seiten erstellen können, aber Sie können mehr als zwei statische Seiten erstellen. In unserem Projekt hatten wir nur zwei statische Seiten: unsere Homepage und unsere Kontaktseite. Lass mich weitermachen und es dir zeigen. Wenn ich zu den „Seiten (P)“ gehe, hier können Sie unter Statische Seiten sehen wir Home und Kontakt haben. Wenn ich versuche, hier eine neue Seite hinzuzufügen, erlaubt es mir nicht, das zu tun. Lassen Sie mich es Ihnen zeigen. Es besagt, dass Sie alle Seiten erstellt haben, die von Ihrem kostenlosen Plan erlaubt sind. Aktualisieren Sie Ihren Standortplan, um weitere hinzuzufügen. Dies ist die Einschränkung, wenn es um Starterplan geht. Sie können Ihr Projekt nicht übertragen, Sie können Ihren Code nicht auch exportieren. Eine der großartigen Funktionen von Webflow ist, dass Sie Ihr Projekt exportieren können. Wenn ich auf diesen „Code Export“ klicke, heißt es, exportiere saubere und semantische HTML- und CSS-Dateien, um dein Entwicklerteam zu übergeben. Manchmal müssen Sie Ihr Projekt möglicherweise woanders hosten. Das Hosting von Webflow wird nicht verwendet. In diesem Fall können Sie hier zur Symbolleiste gehen, und rechts oben sehen Sie diese Option Code exportieren. Mit dem Starterplan ist es nicht möglich, Ihren Code zu exportieren. Wie Sie sehen können, wird hier die HTML-Vorschau angezeigt. Es ist nicht der ganze Code Ihrer Website. Wenn Sie zu CSS gehen, können Sie auch Ihren Code, JavaScript und Assets sehen . Wenn Sie ein kostenpflichtiges Konto haben, können Sie einfach Ihr Projekt exportieren und es woanders hosten oder Änderungen vornehmen, die Sie wünschen. Das liegt ganz an dir. Das ist etwas zu überlegen. Dann haben Sie keine Projektübertragungen mit Starter. Lassen Sie mich es Ihnen zeigen. Sie können Projekte an Teams oder andere Personen mit einem Webflow-Konto übertragen , und Sie können keine weiße Beschriftung verwenden. Es heißt, fügen Sie Ihr eigenes Logo zu den Zahlungsformularen CMS und Client Billing hinzu und entfernen Sie Webflow-Branding von Formularen, E-Mails und Staging-Sites. Sie haben auch keinen Website-Passwortschutz. Wenn Sie als Freelancer arbeiten möchten und mehr und mehr Projekte als Webentwickler erhalten , können Sie wahrscheinlich mit einem Light-Plan gehen, mit dem Sie 10 nicht gehostete Projekte mit verbessertem Staging-Hosting und auch Projektübertragungen haben können. Aber Sie haben immer noch nicht die weiße Beschriftungsoption. Wenn Sie viele Kunden und viele Projekte haben, an denen Sie arbeiten können, können Sie ein Pro-Konto bekommen. Mit dem Konto können Sie alle diese Funktionen nutzen. Eine weitere Sache, die ich über kostenlose Pläne und Zahlungspläne erwähnen werde , ist, dass Sie mit dem kostenlosen Plan keinen benutzerdefinierten Code zu Ihrem Projekt hinzufügen können. Wenn ich zum Circle-Projekt gehe, wenn ich einfach zu „Statische Seiten“ hier gehe, und wenn ich auf das Einstellungen-Symbol klicke, werde ich nach unten scrollen, hier unten können Sie sehen, wir haben diese Option, Custom Code. Es ist jedoch nicht verfügbar. Wenn Sie Ihrem Projekt einen erweiterten benutzerdefinierten Code hinzufügen möchten, können Sie einfach auf einen kostenpflichtigen Plan upgraden, und dann ist diese Option verfügbar. Sie können Ihrem Projekt auch einen Hosting-Plan hinzufügen und wieder wird diese Option verfügbar sein. Wenn ich zu den „Projekteinstellungen“ gehe und auf die Registerkarte „Benutzerdefinierter Code“ gehe, können Sie sehen, dass diese Option auch hier nicht verfügbar ist. Auch hier benötigen wir einen kostenpflichtigen Lageplan, oder wir müssen unseren Kontoplan aktualisieren, um benutzerdefinierten Code auf unserer Website hinzuzufügen. Wir werden in unseren zukünftigen Lektionen über benutzerdefinierten Code sprechen. Aber im Moment müssen Sie nur wissen, dass Sie mit dem kostenlosen Stater-Plan keinen benutzerdefinierten Code verwenden können, und es ist völlig in Ordnung, weil der Starterplan für Menschen nützlich ist, die lernen. Wenn Sie nur mit verschiedenen Optionen experimentieren und erfahren möchten, wie Webflow funktioniert, ist dies der beste Plan, den Sie verwenden können. Es gibt keine Probezeit und es ist keine Kreditkarte erforderlich. Aber wenn Sie Kunden bekommen und Sie an bezahlten Projekten arbeiten, können Sie definitiv auf kostenpflichtige Pläne upgraden, um diese zusätzlichen Optionen zu nutzen. Lasst uns zusammenfassen. Denken Sie daran, wenn wir über Pläne auf Webflow sprechen, haben wir zwei Arten von Plänen: Website-Pläne und Kontopläne. Wenn Sie Ihre Kontopläne betreiben, stehen Ihnen neue Funktionen für alle Ihre Projekte in Ihrem Konto zur Verfügung. Wenn Sie einem Projekt jedoch einen Standortplan hinzufügen , kann nur dieses Projekt diese zusätzlichen Funktionen verwenden Wenn Sie eine benutzerdefinierte Domäne mit Ihrem Projekt verbinden möchten, müssen Sie Ihrem Projekt einen Standortplan hinzufügen. Aber wie können wir unserem Projekt einen Lageplan hinzufügen? Es ist so einfach. Wenn Sie über zu den Projekteinstellungen Ihres Projekts gehen, können Sie sehen, dass wir diese Hosting Registerkarte haben. Unter diesem Hosting Tab haben wir verschiedene Standortpläne. Hier, wie Sie sehen können, haben wir grundlegende, CMS, Business und Enterprise und Sie können alle verfügbaren Optionen für jeden Plan sehen. Sie können einfach einen dieser Pläne zu Ihrem Konto hinzufügen. Stellen Sie sicher, dass Sie hier den Abrechnungstyp überprüfen, da Sie die jährlichen oder monatlichen Abrechnungsoptionen haben . Alles klar, Jungs, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und wir sehen uns im nächsten. 68. Einführung in SEO: Hey, jetzt, da der Entwicklungsprozess vorbei ist, ist es Zeit, über SEO zu sprechen. Als Webentwickler müssen Sie verstehen, dass Ihre Arbeit nicht beendet wird, wenn der Entwicklungsprozess abgeschlossen ist. Sobald Sie die Website entwickelt haben, müssen Sie Ihr Projekt optimieren, um einen höheren Rang bei Google und anderen Suchmaschinen zu erzielen, aber wie können Sie das tun? Nun, das ist das Thema dieses Videos. Was ist SEO? SEO steht für Suchmaschinenoptimierung. Lassen Sie mich Ihnen ein Beispiel zeigen. Wann immer Sie zu Google gehen und Sie nach etwas suchen, können Sie schreiben Apple, wenn der Rang dieser Website hoch ist, wird es höher in der Suchmaschine und auf der ersten Seite erscheinen, weil, wenn Ihre Website nicht auf die ersten drei Seiten, bedeutet dies, dass Ihre Website nicht optimiert ist und die Chancen sind, dass die Besucher Ihre Website nicht finden können , weil die meisten Leute nicht auf die vierte oder fünfte Seite gehen. Daher müssen wir unsere Website optimieren, um in Suchmaschinen einen höheren Rang zu erzielen. Wir haben bereits über einige Punkte gesprochen, wie Überschriftenhierarchie, aber wir werden noch mehr Dinge tun. Sobald Sie Ihr Projekt entwickelt haben, müssen Sie zuerst Ihre Überschriftenhierarchie überprüfen, wie das, was wir zuvor getan haben müssen Sie sicherstellen, dass Sie nicht mehr als ein H1 auf jeder Seite verwenden wie das, was wir zuvor getan haben,müssen Sie sicherstellen, dass Sie nicht mehr als ein H1 auf jeder Seite verwendenund keine -Überschrift auf Ihrer Seite verwenden, müssen Sie sicherstellen, dass Ihre Bilder den gesamten Text enthalten. Schließlich können Sie einfach zum Seitenfenster gehen und wenn Sie hier zu den Seiteneinstellungen gehen, können Sie sehen, dass wir hier einige Einstellungen haben. Ganz oben haben wir den Seitennamen. Dies ist nur für den internen Gebrauch, um alle unsere Seiten hier zu organisieren, aber für den externen Gebrauch, müssen wir über die SEO-Einstellungen gehen. Mal sehen, was wir hier haben. Es heißt, geben Sie den Titel und die Beschreibung dieser Seite an. Wir können sehen, wie sie in den Suchergebnisseiten in der Vorschau unten aussehen. Hier können wir einen Titel-Tag und eine Meta-Beschreibung eingeben. Dies ist im Grunde, was auf Google-Suchergebnisseiten und auch auf anderen Suchmaschinen-Ergebnissen angezeigt wird. Hier für den Titel, werde ich Circle schreiben, das ist der Name dieser fiktiven Agentur, eine vertikale Linie, und dann kann ich die wichtigsten Dienstleistungen schreiben, die dieses Unternehmen bietet. Lassen Sie uns Design und Entwicklungsagentur einfach so schreiben. Aber was ist mit einer Meta-Beschreibung? Nun, hier müssen Sie kurz erklären, was diese Firma macht. Ich werde schreiben, wir helfen Startups, ihre Ideen zum Leben zu erwecken , indem sie atemberaubende Schnittstellen und Benutzererlebnisse so entwerfen Sie können die Suchergebnisvorschau sehen und es heißt, diese Vorschau verwendet die typischen Zeichengrenzen für Google-Suchergebnisseiten auf dem Desktop. Suchmaschinen experimentieren mit ihren Charaktergrenzen und können sich entscheiden, unterschiedliche Inhalte anzuzeigen. Das stimmt zu 100 Prozent. Ich werde nach unten scrollen. Hier haben wir Open Graph Settings. Die Informationen, die wir hier hinzufügen, zeigt, wenn unsere Benutzer teilen unsere Inhalte auf ihren Social-Media-Konten wie Facebook, Twitter, LinkedIn, Pinterest, etc. Wenn ich hier nach unten scrollen für Open Graph-Titel, Ich werde diese gleiche als SEO-Titel-Tag-Kontrollkästchen. Für Open Graph Description werde ich auch dieses Kontrollkästchen aktivieren. Hier haben wir Open Graph-Bild-URL. Stellen Sie sicher, dass Sie hier eine Bild-URL hinzufügen. Zum Beispiel können Sie zu Ihren Assets gehen. Lassen Sie mich zuerst diese Seite speichern, und dann gehe ich zu Assets. Lassen Sie mich eines dieser Bilder auswählen. Zum Beispiel werde ich das hier wählen. Wenn ich auf dieses Einstellungssymbol klicke, hier kann ich den Link zu diesem Bild bekommen. Wenn ich darauf klicke, kann ich es kopieren. Dann lassen Sie mich zu Seiten gehen, Startseite, und wenn ich es hier einfügen, da gehen wir, dieses Bild wird angezeigt, wenn der Benutzer teilt unsere Inhalte auf ihren Social-Media-Konten das Bild, den Titel und die Beschreibung. So weit so gut. Jetzt lass es mich retten. Jetzt müssen wir weiter gehen und unsere anderen Seiten wie die Kontaktieren Sie uns optimieren. Wenn ich zu den Einstellungen der Kontaktseite hier gehe, für das Titel-Tag, werde ich schreiben Kontaktieren Sie uns, eine vertikale Linie, Circle Agentur. Für die Meta-Beschreibung, lassen Sie mich schreiben, wenn Sie einen Code für Ihr Projekt erhalten möchten, zögern Sie nicht, sich mit uns in Verbindung zu setzen. Lassen Sie mich das überprüfen. Wenn Sie einen Code für Ihr Projekt erhalten möchten, zögern Sie nicht, sich mit uns in Verbindung zu setzen. Das ist großartig. Ich werde nach unten scrollen. Hier haben wir die Open Graph Settings als auch und wir werden nur diese Kontrollkästchen aktivieren, um den gleichen Titel und Beschreibung zu erhalten. Für das Bild werde ich den gleichen Link hier einfügen. Schön, lass es mich retten. Fertig. Jetzt müssen wir auf unsere Projekt-Vorlagenseite gehen. Wenn ich zu den Einstellungen gehe, hier haben wir wieder Titel, Meta-Beschreibung, und alle diese Felder mit einer Ausnahme. Diese Seite ist eine dynamische Seite, daher ändert sich ihr Inhalt ständig. Wie können wir den Titel und die Meta-Beschreibung für jedes Projekt hinzufügen? Nun, es ist so einfach. Wie Sie hier sehen können, haben wir diese Feldoption, daher können wir diese Textfelder dynamisch mit dynamischem Inhalt füllen . Das ist so cool. Nehmen wir an, zuerst möchten wir den Projektnamen hinzufügen. Wenn ich auf dieses Feld hinzufügen klicke, kann ich das richtige Feld auswählen. Es wird Name sein. Da gehen wir. Hier können Sie eine Vorschau der Suchergebnisse anzeigen. Dies ist der Name unseres Projekts, Raum, eine vertikale Linie, Raum, dann werde ich die Art des Projekts hinzufügen. Ich werde ein neues Feld hinzufügen. Es wird Projekttyp sein. Hier haben wir UI-Design und App-Entwicklung. All diese Informationen stammen von unserem CMS und dann von einer vertikalen Linie. Hier werde ich Circle Agentur schreiben, aber was ist mit der Meta-Beschreibung? Lassen Sie uns schreiben, überprüfen Sie die, und jetzt werde ich ein Feld hinzufügen, Projekttyp, Projekt, das wir für die getan haben, Projektname, Firma. Lassen Sie uns eine Vorschau anzeigen. Schauen Sie sich das UI-Design- und App-Entwicklungsprojekt an, das wir für das Unternehmen Simplify durchgeführt haben. Das ist großartig, nicht wahr? Da wir Felder verwenden, kann ich, wenn ich diese Pfeile verwende, leicht eine Vorschau der Suchergebnisse anderer Projekte auch. Schauen wir es uns an. Ich werde auf diesen Pfeil nach rechts klicken und wie Sie sehen können, ändert sich der Inhalt hier. Das ist sehr nett, nicht wahr? Ich werde nach unten scrollen und hier für den Open Graph-Titel, werde ich diese Kontrollkästchen aktivieren. Für das Bild werde ich das Projektbild aus diesem Dropmenü auswählen und das Bild wird auch dynamisch geändert. Wenn der Benutzer den Link zu diesem Projekt, Vereinfachen, teilt , ist die Miniaturansicht dieses Bild, aber für andere Projekte die Miniaturansicht anders, genau so, und das Bild entspricht der Inhalt hier. Alles klar, cool. Jetzt lass es mich retten. Was können wir sonst noch in Bezug auf Suchmaschinenoptimierung tun? Nun, es gibt viele Dinge, die wir tun können, und wir werden die wichtigsten in den kommenden Videos abdecken. Ich hoffe, Sie haben dieses Video genossen, und wir sehen uns im nächsten. 69. Site und Google Analytics: Hey, willkommen zurück. Bisher haben Sie gelernt, was SEO ist und wie wir Ihre Webseiten optimieren können , um auf verschiedenen Suchmaschinen einen höheren Rang zu erzielen. Aber in dieser Lektion werden wir über Website-Verifizierung und Google Analytics sprechen. Wenn eine neue Website veröffentlicht wird, versucht Google normalerweise, sie automatisch zu indizieren, aber manchmal dauert es so lange, bis Google unsere Website überprüft, verschiedene Seiten überprüft und unsere Website geordnet hat. Daher können wir unsere Website manuell an Google vorführen. Wie können wir das tun? Um dies zu tun, müssen wir mit zwei verschiedenen Plattformen arbeiten. Wenn Sie nach Google Search Console suchen, und hier finden Sie Google Search Console. Ich werde es öffnen. Hier ist die Plattform. Tools und Berichte der Search Console helfen Ihnen dabei Suchverkehr und die Leistung Ihrer Website zu messen, Probleme zu beheben und Ihre Website in den Google-Suchergebnissen glänzen zu lassen. Das ist genau das, was wir brauchen. Die andere Plattform, mit der wir arbeiten werden, heißt Google Analytics. Aber zuerst gehen wir weiter und überprüfen unsere Website mit der Google Search Console. Wie können wir das tun? Nun, es ist so einfach. zunächst sicher, dass Sie voran gehen und ein kostenloses Konto erstellen. Wenn ich dann zu den Projekteinstellungen gehe und hier zum SEO-Tab gehe, kann ich nach unten scrollen. Hier steht Google-Website-Überprüfung, und hier gibt es einen Link. Sie können auch auf diesen Link klicken, um zu dieser Website zu gelangen. Das liegt ganz an Ihnen, da ich bereits eingeloggt bin, werde ich darauf klicken. Da gehen wir. Wenn Sie bereits eine Website verifiziert haben, sehen Sie möglicherweise diese Seite, aber wenn Sie noch keine Website überprüft haben, sehen Sie möglicherweise einen Dialog. Wenn du einen Dialog siehst, mach dir keine Sorgen, ich werde dir zeigen, was du tun sollst. Aber falls Sie bereits einige Websites verifiziert haben, müssen Sie den Kopf über und klicken Sie auf diesen Link und Sie müssen eine Eigenschaft hier hinzufügen. Fügen Sie einfach Eigentum hinzu. Dann haben wir hier zwei Möglichkeiten. Wir haben Domain, wir haben URL-Präfix. Ich werde hier die richtige Option auswählen. Hier ist, wo Sie die URL Ihrer Website beschleunigen müssen. Wenn ich auf meine Website gehe, kann ich meine Website veröffentlichen. Ich werde in den ausgewählten Domains veröffentlichen, und hier ist unsere Domain. In Ihrem Fall ist es definitiv anders, da diese URL für jedes Projekt eindeutig ist. Du musst es öffnen. Hier müssen Sie diese URL kopieren. Denken Sie daran, diese URL vollständig einschließlich Http oder Https kopieren. Ich werde es kopieren. Ich gehe weiter und gehe zur Google Search Console. Lassen Sie mich voran und erstellen Sie eine Eigenschaft und lassen Sie mich sie hier einfügen. Klicken Sie auf „Weiter“. Da gehen wir. Hier gibt es viele verschiedene Möglichkeiten, um das Eigentum an dieser Website zu überprüfen. Aber lassen Sie mich Ihnen das einfachste zeigen. Ich werde hier zum HTML-Tag gehen. Hier, wie Sie sehen können, haben wir dieses Tag klicken Sie auf diese „Schaltfläche kopieren“ und fügen Sie es auf einem Texteditor. Da gehen wir. Lassen Sie mich die Schriftgröße vergrößern. Sobald Sie das hier einfügen, müssen Sie diesen Inhaltscode einfach so greifen. Achten Sie darauf, nur den Text zwischen diesen Anführungszeichen zu greifen. Ich werde es kopieren. Wenn ich dann zu meinen Projekteinstellungen gehe, kann ich es hier einfügen. Dies ist unsere Google Site Verifizierungs-ID. Klicken Sie dann auf „Änderungen speichern“. Schön, aber hier ist der wichtige Teil. Sobald Sie die Änderungen gespeichert haben, müssen Sie Ihre Website erneut veröffentlichen, sonst funktioniert sie nicht. Vergiss diesen Schritt nicht. Ich werde veröffentlichen, um die Domains auszuwählen. Schön. Jetzt gehen wir zur Google-Konsole, und hier werde ich diese „Bestätigen Schaltfläche“ drücken. Da gehen wir. Eigentümerschaft verifiziert. Jetzt kann ich „Fertig“ drücken, nett, aber da ich verschiedene Projekte habe, muss ich voran gehen und diese spezielle URL hier auswählen. Wenn Sie nur dieses Projekt haben, müssen Sie sich keine Gedanken darüber machen. Hier in dieser Suchleiste gehe ich voran und füge die URL unserer Website ein, die diese ist. Ich werde es kopieren, hier einfügen, eingeben. Hier heißt es, URL ist nicht auf Google, aber das ist völlig in Ordnung. Es besagt, dass diese Seite nicht im Index ist, aber nicht wegen eines Fehlers. Das ist in Ordnung, weil es etwas Zeit braucht, um zu arbeiten. Wir können jedoch voran gehen und klicken Sie auf diese „Request Indexing“. Es besagt, ob Live-URL indiziert werden kann, es dauert ein oder zwei Minuten Absenden Anfrage. Da gehen wir, Indizierung angefordert. Ich werde auf „Got It“ klicken. Aber wie können wir sicherstellen, dass alles gut läuft? Nun, wir können voran gehen und klicken Sie auf diese „Test Live URL“. Wie Sie sehen können, besagt es, dass URL für Google verfügbar ist. URL kann indiziert werden und wir können auch auf diese klicken“ Ansicht getestete Seite“. Auf der rechten Seite sehen wir den Code unserer Website. Wir können zum Screenshot gehen. Wie Sie sehen können, gibt es einen Screenshot unserer Website und weitere Informationen. Perfekt. Jetzt ist unsere Website verifiziert. Der nächste Schritt ist die Erstellung eines Kontos bei Google Analytics. Wenn Sie einfach nur Google Analytics auf Google suchen, können Sie ein Konto erstellen, es ist völlig kostenlos mit Ihrem Gmail-Konto. Sobald Sie eingeloggt sind, werden Sie so etwas sehen. Was sollen Sie hier tun? Sie müssen zum Administrator hier am Ende dieser Seite gehen. Hier haben wir verschiedene Optionen, Konto und Eigentum. Sie müssen eine neue Eigenschaft erstellen. Hier steht, erstellen Sie eine Google Analytics 4-Eigenschaft, um Ihren Web- oder App-Dateneigenschaftsnamen zu messen. Ich werde Kreis-Design-Agentur schreiben. Hier die Zeitzone meldet, spielt es vorerst keine Rolle, die Währung spielt keine Rolle. Sie können voran gehen und sie ändern, wenn Sie möchten. Klicken Sie auf „Weiter“. Hier müssen Sie eine Branche wählen. Ich werde Computer und Elektronik wählen. Business-Größe: klein und Sie können nur einige dieser Form-Boxen überprüfen, für unser Beispiel, sie sind egal. Ich werde auf die Schaltfläche „Erstellen“ klicken. Perfekt. Jetzt müssen wir eine Plattform, Web, Android App und iOS App wählen. Ich werde mit Web gehen, weil dies unsere Website ist. Hier müssen wir die URL unserer Website einfügen. Wir haben die Https hier. Ich gehe voran und kopiere nur diesen Teil der URL und füge ihn hier ein. Der Stream-Name wird einfach so etwas wie Kreis-Agentur schreiben und Stream erstellen. Es wurde erstellt. Was wir hier brauchen, ist diese Maß-ID. Wenn Sie auf diesen „Copy Button“ klicken, können Sie ihn kopieren. Wenn Sie zu den Projekteinstellungen gehen, können Sie auf die Registerkarte Integrationen gehen, hier haben wir Google Universal Analytics Tracking-ID. Sie müssen die Mess-ID einfügen, die Sie hier kopiert haben. Schön. Stellen Sie sicher, dass dieser Schalter aktiviert ist, verwenden Sie das globale Website-Tag und klicken Sie auf „Änderungen speichern“. Schön. Dann denken Sie daran, Ihre Website noch einmal zu veröffentlichen. Erfolgreich veröffentlicht. Jetzt können wir tatsächlich die Leistung unserer Website messen. Google Analytics hilft Ihnen, das Verhalten der Nutzer zu verstehen, was sie mögen, wo sie sich befinden, wie sie mit Ihrer Website interagieren und vieles mehr. Es ist wichtig, dass jede Website in Google Analytics integriert werden kann. Wenn ich hier zu den Berichten gehe, kann ich hier einige Statistiken sehen. Ich kann in Echtzeit gehen. Da gehen wir. Ich kann zu verschiedenen Abschnitten wie Demographie gehen, zum Beispiel, demografische Übersicht. Moment, da wir keine Zuschauer haben, bekommen wir keine Daten. Aber sobald wir unsere Website veröffentlichen und wir den Traffic dazu treiben, können Sie zum Berichtsbereich gehen und Sie werden alle Statistiken und Daten sehen. Jetzt werde ich etwas Wichtiges erwähnen, wenn Sie eine benutzerdefinierte Domain mit Ihrer Website verbinden und Sie sie veröffentlichen, müssen Sie zum SEO-Abschnitt hier gehen, und Sie müssen sicherstellen, dass Webflow-Sub-Domain-Indizierung deaktiviert wird. Es ist sehr wichtig, wenn Sie es nicht deaktivieren, können Google und andere Suchmaschinen Ihre Website niedriger bewerten, da es eine duplizierte Version Ihrer Website auf einer Subdomain veröffentlicht. Stellen Sie immer sicher, dass Sie die Webflow-Sub-Domain-Indizierung einfach so deaktivieren und Änderungen speichern und Ihre Website veröffentlichen. Es ist sehr wichtig. Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich sehe dich im nächsten Video. 70. Bildoptimierung und laute: Hey, willkommen zurück. In diesem Video werden wir über die Bildoptimierung sprechen. Wenn Sie mit dem Erstellen Ihres Projekts und Webflow beginnen möchten, müssen Sie zunächst Ihre Assets vorbereiten. Sie müssen Ihre Assets aus Ihrer Designsoftware exportieren, unabhängig davon, ob es sich um Figma, Adobe XD, Sketch oder um welche Software Sie verwenden, und dann müssen Sie Ihre Assets in Webflow importieren. In diesem Video werde ich Ihnen zeigen, was der richtige Weg ist, um Ihre Assets zu exportieren und wie Sie sie optimieren müssen um die Benutzerfreundlichkeit Ihrer Website zu verbessern, und auch um das Ranking Ihrer Website auf der Suche zu verbessern Motoren. Wenn du bereit bist, fangen wir an. Ich gehe zu meiner Entwurfsdatei. Hier ist Figma. Hier, wie Sie sehen können, haben wir verschiedene Bilder, die wir in unserem Projekt verwendet haben, und Sie haben sie bereits exportiert, aber ich werde Ihnen zeigen, wie Sie sie richtig machen müssen. Nehmen wir an, ich möchte diese Karte exportieren. Zuerst werde ich es auswählen und dann, wenn ich zum Inspektor auf der rechten Seite gehe, kann ich einfach zum Exportbereich gehen und ich kann auf diesen Plus-Button klicken, und hier kann ich einige Einstellungen angeben. Zuerst werde ich das Format angeben. Standardmäßig ist es auf PNG festgelegt. Sie können JPG, SVG und PDF wählen. Je nach verwendeter Software können sich diese Formate ändern. Aber die meisten Designsoftware unterstützen PNG, JPG, PNG und SVG. Was ist der Unterschied zwischen diesen Formaten? Nun, fangen wir mit JPG oder JPEG an. JPEG ist eines der beliebtesten Formate, die Sie für Ihre Bilder verwenden können. Es hat eine sehr gute Kompression, daher werden Ihre Bildgrößen kleiner sein, wenn Sie JPEG verwenden. Der Kompromiss besteht jedoch darin, dass Sie keinen transparenten Hintergrund erhalten, wenn Sie JPEG verwenden. In diesem Fall, da wir hier abgerundete Ecken haben und wir transparente Hintergründe für diese Karten erhalten müssen, können wir JPEG nicht verwenden. Stattdessen müssen wir PNG verwenden. PNG ist ein weiteres beliebtes Format, das Sie für Ihre Bilder verwenden können , und es ermöglicht Ihnen, Ihre Assets mit transparenten Hintergründen zu exportieren. Daher können wir einige Overlay-Grafiken erstellen und es ist so nützlich. Aber was ist mit SVG? Nun, SVG ist ein Vektordateiformat. Wenn Sie eine einfache Form erstellen, beispielsweise wenn Sie einen Kreis erstellen, lassen Sie mich Ihnen zeigen, dass Sie es im SVG-Format exportieren können. Was ist der Unterschied? Wenn Sie das SVG-Format verwenden, ist diese Datei skalierbar , ohne Qualität zu verlieren, da es sich um eine Vektordatei handelt. Aber wenn wir ein Bild exportieren, wird es eine Raster-Datei sein, und wenn wir es skalieren, verliert es die Qualität. Wenn es möglich ist, Ihre Dateien mit SVG zu exportieren, stellen Sie sicher, dass Sie dies tun. Es ist jedoch nur für Vektordateien möglich. Wenn Sie beispielsweise ein Logo erstellen und Ihr Logo eine Vektordatei ist, stellen Sie sicher, dass Sie es mit SVG exportieren. Aber für diese Bilder ist es nicht möglich, SVG zu verwenden, da es sich nicht um Vektordateien handelt, es sich um Raster-Dateien. Ich werde diesen Kreis entfernen. SVG-Format bietet Ihnen kleine Dateigrößen, dann bietet JPEG Ihnen die kleinste Dateigröße und schließlich PNG. Wenn Sie keine transparenten Hintergründe benötigen, können Sie einfach JPEG verwenden. Aber wenn Sie transparente Hintergründe benötigen, müssen Sie mit PNG gehen. Aber warum reden wir darüber? Ist es wirklich wichtig, welches Format wir verwenden? Ja, tut es. Warum? Da Ihre Dateigröße eine direkte Beziehung zu Ihrer Seitenladegeschwindigkeit hat und wenn Sie eine niedrige Seitenladegeschwindigkeit haben, wird Google Ihre Website niedriger stufen. Das ist nicht das, was wir wollen, deshalb müssen wir unsere Assets optimieren, um unsere Seiten schneller zu laden und die Benutzerfreundlichkeit unserer Website zu verbessern. Lassen Sie mich Ihnen zeigen, wie Sie Ihre Bilder exportieren müssen. Nehmen wir an, Sie möchten diese Karte exportieren. Zuerst müssen Sie es auswählen. Dann gehen Sie zum Exportbereich. Hier geben Sie PNG an, da Sie transparente Hintergründe benötigen. Hier können wir angeben, ob wir wollen, dass dieses Element bei 1x, 2x, etc. ausgenutzt wird Was bedeutet es? Wenn es auf 1x gesetzt ist, bedeutet dies, dass Sie das genau erwähnte bekommen, dass Sie hier haben. Wie Sie sehen können, wird seine Breite auf 190 Pixel und seine Höhe auf 216 Pixel eingestellt. Es ist in Ordnung. Heutzutage verwenden jedoch immer mehr Menschen Retina-Displays, und diese Bildschirme zeigen zweimal Pixel an. Anstatt unsere Assets bei 1x zu exportieren, können wir es auf 2x setzen und jetzt, wenn wir es exportieren, wird die Breite unserer Datei 380 Pixel und die Höhe 432 Pixel betragen. Wenn ein Benutzer über einen Breitbildschirm verfügt, verliert er nicht an Qualität. Der Grund, dass Sie bei 2x exportieren sollten. Wenn Ihr Bild jedoch bereits zu groß ist, müssen Sie es nicht mit 2x exportieren. Wenn die Breite beispielsweise auf 2000 Pixel festgelegt ist, müssen Sie sie nicht mit 2x exportieren. Denken Sie daran, wenn Sie ein Bildelement in Webflow verwenden, erstellt Webflow automatisch Variationen Ihres Bildes für verschiedene Bildschirmgrößen. Es optimiert grundsätzlich automatisch Ihre Bilder. Aber was ist mit anderen Bildern? Nehmen wir an, Sie möchten dieses Projektabbild exportieren. Zuerst müssen Sie es auswählen. Auch hier können Sie es mit 2x exportieren oder Sie können das Bildformat in JPEG ändern , da wir keinen transparenten Hintergrund benötigen und so weiter. Lassen Sie mich es bei 2x exportieren. Da gehen wir. Nun, die meisten entwickelten Software lassen Sie Ihre Bilder nicht komprimieren, so dass sie mit der Bildoptimierung nicht gut sind. Lassen Sie mich Ihnen zeigen, was ich meine. Ich gehe weiter und öffne eines dieser Bilder hier in der Asset-Datei. Zum Beispiel der erste. Wenn ich die Dateigröße überprüfe, können Sie sehen, dass es 600 Kilobyte sind, aber wir können es noch mehr komprimieren, um unsere Seitenladegeschwindigkeit zu erhöhen. Aber wie? Es gibt verschiedene Möglichkeiten, wie Sie Adobe Photoshop verwenden können, und Sie können die Option Für Web speichern verwenden. Es gibt jedoch eine bessere Alternative. Es gibt eine Website namens TinyPNG. Wenn Sie auf tinypng.com gehen, können Sie Ihre Bilder einfach per Drag & Drop im PNG oder JPEG Format und komprimieren Ihre Bilder für Sie, ohne Qualität zu verlieren. Das ist erstaunlich. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Ich gehe weiter und lasse eines meiner Bilder hier fallen. Zum Beispiel dieses. Da gehen wir, es ist schon fertig. Wie Sie sehen können, betrug die ursprüngliche Dateigröße 600 Kilobyte und die komprimierte Version 146 Kilobyte. Es ist großartig. Wir verringern die Dateigröße um 76 Prozent. Ich werde es herunterladen. Da gehen wir. Das ist unser neues Bild. Obwohl wir es komprimiert haben, hat es immer noch eine qualitativ hochwertige. Sie müssen Ihre Bilder immer komprimieren, bevor Sie sie in Webflow importieren. Hier geht es um die Bildoptimierung. Jetzt werde ich über faule Ladung sprechen. Als ich verschiedene Funktionen von Webflow erklärte, habe ich Ihnen gesagt, dass wir später über faule Last sprechen werden und das ist genau das, was ich jetzt tun werde. Wenn Sie ein Bildelement verwenden und zum Bedienfeld „Hinzufügen“ wechseln und ein Bildelement per Drag & Drop ablegen, lassen Sie mich Ihnen zeigen, was passiert. Hier haben wir verschiedene Einstellungen. Wenn Sie sich erinnern, haben wir den Alt-Text und hier haben wir die Ladeoptionen. Seit 2020 sind alle Bilder standardmäßig auf Lazy Load eingestellt. Aber was bedeutet es? Lassen Sie mich dieses Bildelement entfernen. Ich werde dieses Heldenbild auswählen. Wenn ich auf das Symbol „Einstellungen“ klicke, kann ich auch die Ladeoption sehen. Wenn ich dieses Drop-Menü öffne, können Sie sehen, dass wir drei verschiedene Optionen haben; wir haben faul, eifrig und auto. Was meinen sie? Wenn es auf faul eingestellt ist, lädt der Browser dieses Bild, sobald es angezeigt wird. Zum Beispiel, wenn ich hier nach unten scrolle, haben wir verschiedene Bilder. Diese Bilder werden erst dann geladen, wenn sie angezeigt werden. Wenn wir hier nach unten scrollen, wird der Browser diese Bilder laden. Auf diese Weise können wir sicherstellen, dass unsere Webseite sehr schnell geladen wird und sehr gut für SEO ist. Aber wir können diese Einstellung auch überschreiben. Ich kann dieses Bild auswählen, ich kann zu den Bildeinstellungen gehen und von hier aus kann ich es zu eifrig Lasten mit Seite einstellen. Wenn ich diese Option beim Laden der Seite auswähle, wird dieses Bild ebenfalls geladen. Daher ist es zeitaufwendiger für den Browser, unsere Webseite zu laden. Wir können es auch auf auto einstellen, und es wird sich basierend auf den Browser-Einstellungen verhalten. Mein Vorschlag ist, dass Sie es immer zu faul machen sollten. Wie ich bereits erwähnt habe, sind alle Ihre Bilder standardmäßig zu faul. Aber ich werde noch eine Sache erwähnen. Diese Option funktioniert nur für Ihre Bildelemente. Wenn Sie nur einen div-Block erstellen und das Hintergrundbild verwenden, funktioniert es nicht dafür. müssen Sie im Hinterkopf behalten. Alles klar, Leute. Das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und wir sehen uns im nächsten. 71. Benutzerdefinierte Attribute: Hey, in diesem Video werden wir über benutzerdefinierte Attribute sprechen. Was sind benutzerdefinierte Attribute? Nun, laut Webflow können Sie benutzerdefinierte Attribute verwenden, um Eigenschaften von HTML-Elementen zu definieren. Macht es Sinn? Wenn nicht, lass mich dir zeigen, wie es funktioniert. Für jedes HTML-Element können wir einige benutzerdefinierte Attribute angeben, um ihr Verhalten zu ändern oder einige benutzerdefinierte Eigenschaften hinzuzufügen. Zum Beispiel hier, wenn ich irgendwelche HTML-Elemente wie Überschrift auswähle, und wenn ich zu den Elementeinstellungen auf der rechten Seite gehe, können Sie hier sehen, wir haben die benutzerdefinierten Attribute Abschnitt. Mit diesem Plus-Button können Sie ein benutzerdefiniertes Attribut erstellen. Jedes Attribut hat einen Namen und einen Wert. Manchmal sind sie sehr nützlich, aber die meiste Zeit werden Sie sie nicht brauchen. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Wenn ich eine Vorschau meines Projekts vorstelle und wenn ich den Mauszeiger über diese Schaltfläche Get in touch zeige, können Sie sehen, dass nichts angezeigt wird und es in Ordnung ist. Aber manchmal müssen wir vielleicht einen Tooltip bekommen, der angibt, was es tatsächlich tut. Wenn der Benutzer zum Beispiel mit dem Mauszeiger über diese Schaltfläche fährt, sollte der Tooltip ein Wort oder einen Satz anzeigen, wie klicken Sie mich oder kontaktieren Sie uns etwas Auf diese Weise können Suchmaschinen auch verstehen, was diese Schaltfläche tut oder was ein Link tut. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Zuerst werde ich diese Schaltfläche auswählen, und wenn ich zum Abschnitt mit benutzerdefinierten Attributen gehe, kann ich ein neues benutzerdefiniertes Attribut erstellen. Hier für Namen, Ich werde Titel schreiben und für den Wert, Ich werde schreiben Klicken Sie mich, Speichern, und wir sind fertig. Jetzt veröffentlichen wir unsere Website, und ich werde sie öffnen. Wenn ich nun den Mauszeiger über diese Schaltfläche führe, sollte ich einen Tooltip sehen, der besagt, klicken Sie auf mich. Mal sehen, was passiert. Da gehen wir hin. Kannst du diesen winzigen Tooltip sehen? Das ist genau das, was wir gesucht haben. Aber lassen Sie mich Ihnen ein weiteres Beispiel zeigen. Wenn ich auf die Kontaktseite gehe und hier im Textfeld für den vollständigen Namen gehe, werde ich etwas zufällig schreiben. Wie Sie sehen können, überprüft die Rechtschreibung. Kannst du diese rote Linie unter diesem seltsamen Namen sehen? Mein Browser überprüft tatsächlich die Rechtschreibung dieses Namens. Es ist nicht das, was wir für das Textfeld in voller Länge wollen, also wie können wir es deaktivieren? Wir können ein benutzerdefiniertes Attribut verwenden. Lassen Sie mich zum Seitenfenster gehen. Wenn ich hier zur Kontaktseite gehe, kann ich dieses Textfeld auswählen, und wenn ich zu den benutzerdefinierten Attributen auf der rechten Seite gehe, kann ich ein neues Attribut erstellen. Hier werde ich Rechtschreibprüfung ohne Leerzeichen schreiben, und für den Wert werde ich falsch schreiben. Sollte der Browser die Rechtschreibung überprüfen? - Nein. Deshalb setzen wir den Wert auf false und speichern ihn. Dann veröffentlichen Sie Ihre Website. Ich gehe auf die Seite „Kontaktieren Sie uns“, stellen Sie sicher, dass Sie Ihre Seite aktualisieren. Wenn ich jetzt etwas Seltsames schreibe, überprüft mein Browser die Rechtschreibung nicht. Dies ist einer der beliebtesten Anwendungsfälle von benutzerdefinierten Attributen. In der Tat gibt es viele verschiedene HTML-Attribute, die Sie verwenden können, und Sie können die vollständige Liste hier erhalten. Wenn Sie zu W3Schools.com gehen, können Sie die HTML-Attribute-Referenz finden. Hier gibt es eine Liste aller Attribute, aber die meiste Zeit verwenden wir sie nicht. Aber wenn Sie möchten, können Sie voran gehen und einen Blick werfen. Leute, das ist alles für dieses Video, ich hoffe, es hat euch gefallen, und ich sehe euch im nächsten. 72. Wie man einen Aufstieg erstellt?: Heutzutage verwenden immer mehr Websites Pop-ups, um die Benutzer zu bitten, etwas zu tun. Zum Beispiel die Registrierung für den Newsletter oder die Eingabe ihrer E-Mail-Adressen oder das Absenden eines Formulars. In diesem Video zeige ich Ihnen, wie Sie ein Pop-up einfach und bequem erstellen können. Bist du bereit? Lasst uns anfangen. Um ein Pop-up zu erstellen, müssen Sie zuerst die Struktur eines Popups verstehen. Ein Pop-up unterbricht tatsächlich die Interaktion des Benutzers mit Ihrer Website. Es blockiert tatsächlich die Nutzung der Website, bis der Benutzer einige Aktionen, zum Beispiel das Ausfüllen eines Formulars oder das Absenden eines Formulars. Wie können wir eine solche Interaktion schaffen? Nun, zuerst brauchen wir einen Div-Block. Lassen Sie mich die Taste „Command“ oder „Control“ drücken. Ich werde Div Block schreiben. Da gehen wir. Ich werde diesen Div-Block direkt unter meinen Körper stellen. Es spielt keine Rolle, wo es ist, aber um alles richtig zu organisieren, werde ich es an die Spitze meines Navigators setzen. Jetzt lass mich ihm eine Klasse geben. Ich werde Pop-up-Wrapper schreiben. Dieser Pop-up-Wrapper sollte behoben werden, unabhängig davon, ob der Benutzer durch die Seite blättert. Lassen Sie uns voran und ändern Sie seine Position von statisch zu Position fixiert, genau so, und dann werde ich seine Position auf voll setzen. Wie Sie sehen können, nimmt es die gesamte Breite und Höhe unseres Berichts ein. Hier heißt es relativ zum Körper. Dann werde ich nach unten scrollen und lassen Sie mich ihm eine Hintergrundfarbe geben. Ich werde ihm eine schwarze Hintergrundfarbe geben, und ich werde seine Deckkraft verringern, um diesen Overlay-Effekt zu erzeugen. Ich werde es auf 70 Prozent reduzieren. Schön. Wie Sie sehen können, ist dieser Pop-up-Wrapper jetzt über einigen unserer Elemente, aber immer noch gibt es einige Elemente, die über diesem Pop-up-Wrapper liegen, obwohl er oben auf unserem Navigator platziert ist. Wenn Sie sich erinnern, habe ich Ihnen gesagt, dass es egal ist, wo sich unser Element im Navigator befindet, wir können unsere Elemente immer darauf setzen, wenn wir den Z-Index ändern. Hier werde ich den Z-Index auf 9999 setzen. Auf diese Weise kann ich sicherstellen, dass dieser Pop-up-Wrapper immer auf allen Elementen steht, genau so. Nun, wie Sie sehen können, sind alle anderen Elemente hinter diesem Pop-up-Wrapper. Wenn ich nach unten scrolle, können Sie sehen, dass es behoben ist. Der erste Teil ist fertig. Jetzt in diesem Wrapper werde ich einen neuen Div Block erstellen, und dieser Div Block kann alles enthalten. Es kann einen Formularblock oder einen Text enthalten, alles, was Sie wollen. Aber in diesem Beispiel werde ich einen Formularblock erstellen. Während dieser Wrapper ausgewählt ist, werde ich „Command“ -Taste oder „Control“ -Taste drücken. Lassen Sie uns nach einem Div-Block suchen. Da gehen wir. Hier werde ich ihm eine Klasse geben. Dieses Mal werde ich pop-up__model schreiben. Hier werde ich die Breite und Höhe angeben. Es wird 500 Pixel mal 300 Pixel sein. Lassen Sie mich voran und geben Sie ihm eine weiße Hintergrundfarbe. Jetzt ist es in der oberen linken Ecke positioniert, aber wir wollen es zentrieren. Wie können wir das tun? Es ist so einfach. Zuerst müssen wir unseren Pop-up-Wrapper auswählen, und dann müssen wir nur die Anzeigeeinstellung auf Flexbikes ändern. Wie Sie wissen, müssen wir die Ausrichtung in die Mitte und die Ausrichtung zu zentrieren sowie zu zentrieren ändern . In diesem Pop-up-Modell werden wir einen Formularblock haben. Während es ausgewählt ist, werde ich „Command“ -Taste oder „Control“ -Taste drücken und nach einem Formularblock suchen. Da gehen wir. Der Formularblock wurde hinzugefügt. Hier werde ich diesem Formularblock eine Klasse geben. Lassen Sie uns pop-up__form schreiben. Lassen Sie uns die Breite auf 100 Prozent setzen, und ich werde die maximale Breite von 400 Pixel dafür einstellen, aber es ist nicht zentriert. Ich werde dieses Pop-up-Modal auswählen und seine Anzeigeeinstellung auf flex max ändern, und lassen Sie mich die Ausrichtung in Mitte ändern, genau so. Hier ist unsere einfache Form. Wir werden das Styling nicht ändern, weil ich nur zeigen möchte, wie Sie ein Pop-up erstellen können. Sobald das Pop-up angezeigt wird, sollte der Benutzer es auch schließen können. Wir werden einen Schließknopf brauchen. Ich werde voran gehen und einen Textlink hier in unserem Pop-up-Wrapper hinzufügen. Stellen Sie sicher, dass es in unserem Pop-up-Wrapper verschachtelt ist. Da ist es. Ich werde ihm eine Klasse geben. Lets schreiben rechts pop-up__close. Ich werde seine Farbe in Weiß ändern, dass wir das sehen konnten, lassen Sie mich die Deklaration auf keine ändern. Hier werde ich nah schreiben, aber seine Position ist Wrangle. Ich werde es in die rechte obere Ecke legen. Während es ausgewählt ist, werde ich seine Position zu absolut, nett ändern und dann lassen Sie mich es oben rechts positionieren. Da ist es. Mit diesen Beträgen hier werde ich seine richtige Position auf vielleicht 8 Prozent setzen, seine Spitzenposition auf 8 Prozent als auch. Unser Pop-up ist fertig, aber wie können wir es wirklich nutzen? Gerade jetzt, wenn ich es Vorschau, können Sie sehen, dass ich nicht mit der Website interagieren kann. Wenn ich auf die Schaltfläche „Schließen“ klicke, passiert nichts, weil wir keine Interaktionen erstellt haben. Jetzt ist es an der Zeit, weiterzumachen und unsere Interaktion zu schaffen. Aber zuerst werde ich diesen Pop-up-Wrapper auswählen, und dann werde ich seine Anzeigeeinstellung von flex max zu none ändern , weil ich ihn vorerst ausblenden werde. Jetzt müssen wir weitermachen und die Interaktion erstellen, aber welche Art von Auslöser sollten wir schaffen? Wenn ich zur Interaktion gehe, wie Sie sich erinnern, können wir den Element-Trigger oder den Seitenauslöser erstellen. Es liegt ganz an dir. Sie können zum Beispiel einen Element-Trigger erstellen, wenn der Benutzer auf eine Schaltfläche klickt, dieses Pop-up angezeigt werden soll oder Sie können sogar einen Seitentrigger erstellen. Wenn beispielsweise alles nach drei oder vier Sekunden geladen wird, sollte dieses Pop-up angezeigt werden. Zuerst werde ich voran gehen und einen Seitenauslöser erstellen. Wir haben bereits die Seite geladen und wir verwenden diese Helden Animation. Wir können diese verwenden oder Sie können einen anderen Seitenauslöser verwenden. Ich werde erneut das Laden der Seite verwenden. Hier, wenn die Seite beginnt zu laden, großartig , starten Sie eine Animation, und ich werde eine neue Animation erstellen. Nennen wir es Pop-up offen, nett. Hier müssen wir einige Aktionen erstellen. Während dieser Pop-up-Wrapper ausgewählt ist, erstellen Sie zunächst eine Aktion. Die erste Aktion wird Deckkraft sein. Standardmäßig sollte seine Deckkraft auf Null Prozent gesetzt werden und wir werden den Anfangszustand einfach so aktivieren. Dann werde ich einen neuen Keyframe erstellen und ich werde Deckkraft wählen. Lassen Sie uns seine Deckkraft auf 100 Prozent zurückdrehen und dazwischen werde ich eine andere Aktion erstellen, aber dieses Mal werde ich Ausblenden/Anzeigen wählen. Wenn Sie sich erinnern, stellen wir seine Anzeigeeinstellung auf keine ein, jetzt müssen wir es wieder auf flex max genau so ändern. Lassen Sie mich es für Sie zusammenbrechen. Zuerst setzen wir ihre Deckkraft standardmäßig auf Null Prozent, da wir sie beim Laden der Seite nicht sehen sollten und sie auch ausgeblendet ist, damit wir mit der Seite interagieren können. Wir werden seine Anzeigeeinstellung auf flex max ändern, so dass es jetzt blockiert unsere Website-Nutzung, und dann erhöhen wir seine Deckkraft auf 100 Prozent. Es gibt jedoch ein Problem, wenn ich es speichere und wenn ich es in der Vorschau sehe, können Sie sehen, dass beim Laden der Seite auch das Pop-up angezeigt wird. Das ist nicht das, was ich will. Ich möchte, dass alle diese Elemente zuerst geladen werden und nach drei Sekunden sollte dieses Pop-up angezeigt werden. Lassen Sie mich die Verzögerung hier ändern. Ich werde Pop-up-Wrapper Ausblenden/Anzeigen auswählen, und ich werde die Verzögerung auf drei Sekunden erhöhen, genau so. Lass es mich retten. Jetzt lassen Sie mich es wieder vorschauen, alles wird geladen. Da gehen wir. wurde alles geladen und dann tauchte dieses Pop-up auf. Genau das wollten wir. Aber wie können wir dieses Pop-up schließen? Es ist so einfach. Wir müssen weitermachen und einen neuen Auslöser schaffen. Wenn ich nur diese Seite laden hier schließen, können wir voran gehen und unseren Pop-up-Close-Link auswählen, den wir erstellt haben, und dann können wir einen Element-Trigger dieses Mal erstellen. Ich werde Mausklick wählen oder tippen. Beim ersten Klick werde ich eine benutzerdefinierte Animation erstellen, wir werden eine neue Animation erstellen, und ich werde es Pop-up schließen nennen. Was sollen wir hier tun? Wir müssen zwei Dinge tun. Zuerst müssen wir die Deckkraft unseres Pop-up-Wrappers auf Null Prozent reduzieren, und dann müssen wir seine Anzeigeeinstellung auf keine setzen. Warum sollten wir das tun? Denn wenn wir nur die Deckkraft von 100 Prozent auf 0 Prozent verringern, werden wir sie verstecken, aber sie ist immer noch da. Es blockiert immer noch die Nutzung unserer Website. Wir müssen seine Anzeigeeinstellung auf keine setzen, dass der Benutzer mit unserer Website interagieren könnte. Es ist sehr wichtig. Achten Sie darauf, das nicht zu vergessen. Ich werde Pop-up-Wrapper auswählen. Ich werde eine neue Aktion erstellen, Deckkraft, und lassen Sie uns ihre Deckkraft auf Null Prozent ändern. Lassen Sie uns einen neuen Keyframe erstellen, Ausblenden/Anzeigen, und ich werde seine Anzeigeeinstellung auf keine setzen und speichern. Lassen Sie mich vorgehen und eine Vorschau darauf. Da gehen wir. Alles lädt, nett. Das ist unser Pop-up. Ich kann nach unten scrollen, es ist immer noch da. Wenn ich auf Schließen klicke, da gehen wir, es ist geschlossen. Ich kann wieder mit meinen Elementen interagieren. Alles klar, Leute, so kannst du ein Pop-up in Webflow erstellen. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten sehen. 73. Benutzerdefinierte Code und Integration: Hey, willkommen zurück. In diesem Video werden wir über konstanten Code und Integration von Drittanbietern sprechen. Ich weiß, dass ich Ihnen gesagt habe, dass wir nicht codieren werden und das ist zu 100 Prozent wahr, aber manchmal, wenn Sie Ihrem Projekt einige Funktionalitäten hinzufügen möchten , die Webflow nicht anbietet, können Sie einige Dienste von Drittanbietern in Ihr Webflow-Projekt, indem Sie einfach Code kopieren und einfügen. Sie müssen nicht wissen, wie man Code schreibt, Sie müssen nur wissen, wie man das benutzt. Wie ich bereits erwähnt habe, ist die benutzerdefinierte Code-Funktion nur für kostenpflichtige Abo verfügbar Wenn Sie also den kostenlosen Plan verwenden, können Sie das leider nicht verwenden. Ich wollte Ihnen jedoch zeigen, wie es funktioniert, falls Sie Ihren Plan in Zukunft aktualisieren möchten. Wenn du bereit bist, fangen wir an. Zunächst einmal haben wir hier diese leere Leinwand. Dies ist ein neues Projekt und wenn ich einen benutzerdefinierten Code verwenden möchte, habe ich verschiedene Optionen. Wenn ich den konstanten Code zum gesamten Projekt hinzufügen möchte, zu allen Seiten der gesamten Website, kann ich zu den Projekteinstellungen gehen und ich kann hier zum benutzerdefinierten Code-Tab gehen und ich habe Kopfcode und ich habe Fußzeilencode. Aber wenn wir einer bestimmten Seite meines Projekts einen benutzerdefinierten Code hinzufügen möchten, kann ich das direkt im Designer tun. Lassen Sie mich Ihnen zeigen, wie. Hier ist unsere leere Leinwand. Ich gehe zum Add Panel und scrollen Sie nach unten. Hier unter den Komponenten können Sie sehen, dass ich dieses Embed habe. Es ist nicht kostenlos verfügbar, daher, wenn Sie das verwenden möchten, müssen Sie Ihren Plan aktualisieren. Ich werde es hierher ziehen und ablegen. Da gehen wir. Jetzt haben wir diese HTML-Einbettungskomponente, und hier können wir unseren benutzerdefinierten Code einfügen. Es funktioniert wie alle anderen Elemente. Sie müssen nur einen benutzerdefinierten Code hier einfügen und speichern und schließen und sicherstellen, dass Sie Ihr Projekt veröffentlichen. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Nehmen wir an, Sie möchten eine Umfrage oder ein Formular erstellen , das den Benutzern die Informationen aus einem bestimmten Grund abruft. Sie können einen Dienst namens Typeform verwenden. Es ist ein sehr beliebter Service. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Hier ist ihre Zielseite. Es ermöglicht Ihnen tatsächlich, einige Umfragen oder Formulare einfach und bequem zu erstellen und Sie können das Design Ihres Formulars, die Einstellungen, alles, was Sie sich vorstellen können, ändern , und es hat einen kostenlosen Plan als auch, so dass Sie verwenden Sie es kostenlos. Zuerst müssen Sie sich anmelden, ein kostenloses Konto erstellen und dann einfach ein Formular erstellen. Wir werden nicht in die Details eintauchen, weil es so einfach ist, ein Typeform zu erstellen. Ich möchte Ihnen nur zeigen, wie Sie dieses Formular in Ihr Projekt einbetten können. Hier ist die Form, die ich zuvor erstellt habe. Lassen Sie mich es Ihnen zeigen. Wenn ich zu meinem Dashboard gehe, habe ich diese RSVP, Ich kann darauf klicken. Ich kann die Fragen ändern, ich kann die Optionen oder Antworten hier ändern und dann kann ich sie veröffentlichen. Sobald es veröffentlicht ist, kann ich zum Freigabe-Tab oben gehen und hier kann ich zum Einbetten in einem Webseitenabschnitt gehen. Sie können wählen, welche Option Sie wollen. Wenn Sie ein Pop-over benötigen, können Sie diese Option verwenden. Wenn Sie die Registerkarte Folie benötigen, können Sie diese Option verwenden. Ich werde den Standard verwenden und hier werde ich den Code einfach so bekommen. Ich werde den Code kopieren und wenn ich zu meinem Webflow-Projekt gehe und es hier einfüge, können Sie sehen, dass der Code in einer Zeile ist Wenn Sie ihn auschecken möchten, können Sie einfach so horizontal scrollen. Jetzt werde ich speichern und schließen und sicherstellen, dass Sie Ihre Website veröffentlichen , weil es nicht funktioniert, wenn Sie nur eine Vorschau Ihrer Website hier, also müssen Sie sie veröffentlichen, und dann müssen Sie sie öffnen und sehen, was wir haben. Da gehen wir. Hier ist unser Typeform eingebettet in unser Projekt. Wenn ich nur Arash schreibe, und dann Nachname. Hier schreiben wir test@ gmail.com und dann kann ich aus einer dieser Optionen wählen. Lassen Sie uns UK schreiben, und dann werde ich eine dieser Optionen wählen, zum Beispiel Figma, und einreichen. Da gehen wir. Fertig. Ihre Informationen wurden perfekt gesendet. Wenn ich hier auf die Typeform-Website gehe, wenn ich zum Ergebnis-Tab hier gehe, kann ich das Formular sehen, das wir gerade gesendet haben. Wenn ich zu den Antworten gehe, hier ist es. Ich kann hier einfach alle Antworten sehen. Es ist ein sehr nützlicher Service, den Sie in Ihr Webflow-Projekt integrieren können und Sie es auch für Ihre zukünftigen Kundenprojekte verwenden können. Können Sie sehen, wie einfach es ist, einfach einen benutzerdefinierten Code zu kopieren und einzufügen und die Benutzerfreundlichkeit Ihrer Website zu verbessern? Lassen Sie mich Ihnen ein weiteres Beispiel zeigen. Nehmen wir an, Ihr Kunde möchte, dass Sie ein Buchungssystem für ihn erstellen. Wie kannst du das machen? Nun, Sie können einen anderen Dienst nutzen. Es gibt tatsächlich viele Dienste da draußen, die Sie verwenden können. Ich werde Ihnen jedoch einen sehr beliebten Dienst namens Calendly zeigen. Wenn Sie einfach voran und erstellen Sie ein Konto auf ihrer Website, hier ist ihre Zielseite. Sie können es auch kostenlos nutzen. Ich werde dir zeigen, wie es funktioniert. Zuerst müssen Sie nur ein Ereignis erstellen. Standardmäßig haben Sie dieses Demo-Ereignis. Sie können hier auch Ihre eigenen Veranstaltungen oder ein einmaliges Meeting erstellen. Sobald Ihr Meeting erstellt wurde, müssen Sie auf diese Freigabe-Schaltfläche klicken und dann müssen Sie auf die Registerkarte Zur Website hinzufügen gehen, und hier werde ich einbetten verwenden. Einfach so, und fahren Sie fort. Hier werden wir den Code bekommen. Sie können das Design einfach hier ändern. Sie können auch die Einstellungen ändern. Wenn Sie dann einfach den Code kopieren und zu Ihrem Webflow-Projekt gehen und es einfach hier einfügen, werde ich den vorherigen benutzerdefinierten Code entfernen, den wir hinzugefügt haben, und ich werde ihn hier einfügen, Code speichern, veröffentlichen und wir sind fertig. Lassen Sie mich es öffnen, hier ist es. Unser Buchungssystem ist für uns bereit und unsere Nutzer können einfach ein Meeting bei uns buchen. Lassen Sie mich ein Datum wählen, zum Beispiel dieses, dann die Zeit. Bestätigen. Hier werde ich einfach Arash und test@gmail.com schreiben und schließlich werde ich eine Nachricht schreiben. Wir sprechen über benutzerdefinierten Code. Dann werde ich die Veranstaltung planen und da ist es, die Konformation, Sie sind mit Arash geplant und hier sind die Informationen. Wenn Sie zu Calendly gehen und hier unter der Registerkarte „Geplante Veranstaltungen“ finden Sie hier genau so alle anstehenden Veranstaltungen. Wenn Sie ein Ereignis ändern oder neu planen möchten, können Sie das einfach tun. Sie können das Ereignis auch abbrechen, hier ist die Nachricht. Es gibt Tonnen von Optionen, die Sie hier verwenden können. Alles klar, wenn Sie eine Liste aller Dienste erhalten möchten, die Sie in Ihr Webflow-Projekt integrieren können, können Sie zu dieser URL university.webflow.com/Integrationen gehen und dann hier gibt es mindestens alle Dienste, die Sie kann sich einfach so in Ihr Webflow-Projekt integrieren. Wir haben Shopify, Zapier. Zapier ist auch so nützlich. Wenn Sie einfach verschiedene Dienste verbinden und mit Ihrem Projekt integrieren möchten, können Sie Zapier verwenden, überprüfen Sie das auf jeden Fall. Sie können auch andere Dienste nutzen. Sie können auf diese Schaltfläche klicken, um andere Dienste anzuzeigen. Es gibt viele verschiedene Dienste, die Sie nutzen können und sie sind so praktisch. Deshalb wollte ich Ihnen zeigen, wie Sie benutzerdefinierten Code in Ihrem Projekt verwenden können, da Sie einfach eine Codezeile kopieren und einfügen und Ihrer Website leicht eine erweiterte Funktionalität hinzufügen können. Das letzte Beispiel, das ich Ihnen zeigen möchte, ist dies. Es gibt eine sehr coole Website namens CodePen, Codepen.io und wenn Sie voran gehen und ein kostenloses Konto hier erstellen, können Sie einfach einige coole Effekte verwenden. Es gibt viele verschiedene Effekte hier, die Sie verwenden können und wie Sie sehen können, haben Sie für jeden Effekt den HTML-Code auf der linken Seite, das CSS hier, rechts in der Mitte und das JavaScript. Lassen Sie mich Ihnen zeigen, wie Sie das nutzen können. Hier ist der Fakteneffekt, den ich gewählt habe, wie Sie sehen können, dass es so cool ist, aber wie kann ich das verwenden? Es ist so einfach. Zuerst müssen Sie den HTML-Code auf der linken Seite greifen, ich werde ihn kopieren und wenn ich hier zu meinem benutzerdefinierten Code gehe, werde ich ihn hier einfügen, ich werde den vorherigen konstanten Code entfernen, den wir eingefügt und ich werde es hier einfügen, speichern und schließen. Der erste Schritt ist erledigt, aber wir sind noch nicht fertig. Warum? Da dieser Effekt das CSS oder Styling erfordert und auch das JavaScript verwendet, müssen wir auch das CSS und das Skript in unsere Seite einfügen. Wie können wir das tun? Wenn Sie hier zu Ihren Seiteneinstellungen gehen und wenn Sie nach unten scrollen, haben wir hier den Kopf und das body-Tag. Wir müssen den CSS-Code hier in das head-Tag einfügen, und wir müssen den JavaScript-Code hier in das body-Tag einfügen. Also lassen Sie mich gehen und kopieren Sie den CSS-Code und ich werde ihn hier einfügen, aber wie Sie sehen können, erkennt Webflow diesen CSS-Code nicht. Warum? Weil alles weiß ist. Zuerst werde ich diese zusätzlichen Codezeilen oben entfernen , das brauchen wir nicht. Wir müssen den Körper haben, und damit Webflow verstehen kann, dass dies ein CSS-Code ist, müssen wir das Style-Tag verwenden. Warum? Weil CSS eigentlich zum Styling dient. Also werde ich dieses Titel-Tag einfach so erstellen und da gehen wir. Jetzt haben wir all diese Farben und es bedeutet, dass Webflow versteht, dass dies ein CSS-Code ist. Aber sobald Sie das Style-Tag erstellen, müssen Sie voran gehen und schließen, es ist so einfach. Sie müssen nur einen Schrägstrich schreiben und einfach Stil schreiben. Da gehen wir. Der erste Teil ist fertig. Jetzt müssen wir fortfahren und unseren JavaScript-Code kopieren. Jetzt werde ich es kopieren. Lassen Sie mich zu Webflow gehen und hier direkt im body-Tag, ich werde es einfügen, aber wieder, Webflow erkennt das nicht als JavaScript-Code, weil alles weiß ist. Also zuerst werde ich voran gehen und diese Kommentare an der Spitze entfernen. Wie Sie sehen können, ist dies ein Kommentar, der kein Code ist, ich werde das entfernen und hier müssen wir ein anderes Tag erstellen. Welche Art von Tags? Da dies ein JavaScript-Code ist, müssen wir ein Skript-Tag erstellen. Also lasst uns ein Skript schreiben. Whoops, Drehbuch, wir gehen. Nun, wir haben all diese Farben, ich werde voran gehen und schließen dieses Tag, ein Schrägstrich Skript, cool. Nun, lassen Sie mich es speichern und wenn ich mein Projekt veröffentliche, und wenn ich es dort oben öffne, ist es es. Hier ist unsere coole Wirkung, es ist erstaunlich, nicht wahr? Aber wie können wir diese Worte ändern? Es ist so einfach. Sie müssen den Kopf über Ihre Seiteneinstellungen hier, wenn ich scrollen rechts in der JavaScript-Code hier haben wir diesen Text Nachteile, und wir haben alle Wörter, und jedes Wort ist zwischen zwei Anführungszeichen. Sie können einfach voran gehen und es ändern. Ich werde nur eines dieser Worte modifizieren, zum Beispiel, warum ist das so befriedigend für Design? Ich werde es speichern und ich werde es veröffentlichen. Denken Sie daran, Ihre Website zu veröffentlichen, wenn Sie benutzerdefinierten Code verwenden, und lassen Sie mich ihn öffnen. Warum ist das so befriedigend für Design? Da ist es. Wie cool ist das? In Ordnung Jungs können Sie sehen, wie einfach es ist, benutzerdefinierten Code in Webflow zu verwenden? Ich hoffe, Sie haben dieses Video genossen und stellen Sie sicher Sie die Webflow-Integrationsliste überprüfen, weil es viele verschiedene Dienste gibt , die Sie in Ihre Webflow-Projekte integrieren können , indem Sie nur einige benutzerdefinierte -Code. Ich hoffe, Sie haben dieses Video genossen und ich werde Sie im nächsten sehen. 74. Lottie: Hey, in diesem Video werde ich Ihnen zeigen, wie Sie Lottie-Animationen in Ihren Projekten verwenden können. Wenn Sie unser Kreis-Projekt öffnen, das wir gemeinsam erstellt haben, können Sie auf die Seite „Kontaktieren Sie uns“ gehen. Hier, wie Sie sich erinnern, hatte unsere Form drei verschiedene Zustände. Es hatte den normalen Zustand, Erfolg und Fehler. Wenn ich nur dieses Kontaktformular im Navigator auswähle und ich hier zum Erfolgszustand gehe, können Sie sehen, dass wir diese einfache Nachricht mit einem grauen Hintergrund haben. Es ist in Ordnung, aber wir können es noch besser aussehen lassen, indem wir hier eine Lottie-Animation hinzufügen. Zum Beispiel können wir hier eine Konformation Animation hinzufügen. Wie können wir das tun? Zuerst werde ich diesen Erfolgsmeldungsblock hier auswählen. Dann werde ich zum Hintergrundbild gehen und ich werde es transparent machen , weil wir keine Hintergrundfarbe einfach so bekommen müssen. Ich werde die Deckkraft auf null Prozent reduzieren. Alles klar, cool. Jetzt werde ich diesem tiefen Block ein Lottie-Element hinzufügen. Während dieser tiefe Block ausgewählt ist, gehe ich zum Add-Panel über. Von hier aus werde ich diese Lottie-Animation per Drag & Drop ablegen und jede rechts über meinen Textblock legen. Da gehen wir. Hier ist unser Lottie-Animationselement, aber wir haben keine Lottie-Animationsdatei. Woher kriegen wir eine? Nun, Sie können auf eine Website namens lottiefiles.com gehen und es ist die offizielle Website von Lottie. Es gibt großartige Ressourcen, die Sie hier finden können, aber was wir brauchen, ist einfach das Menü „Entdecken“ zu öffnen. Von hier aus werde ich zu kostenlosen Animationen gehen. Hier können Sie viele verschiedene kostenlose Animationen erkunden , die von verschiedenen Mitwirkenden erstellt wurden. Wie Sie sehen können, wenn ich nach unten scrolle, gibt es viele coole Animationen hier, und Sie können sie einfach kostenlos verwenden. Sie können auch zu anderen Seiten gehen. Abhängig von Ihren Bedürfnissen können Sie zwischen ihnen wählen. Was brauchen wir eigentlich? Wir suchen nach einer Konfirmationsanimation. Mit dieser Suchleiste oben, werde ich nach Bestätigung suchen. Alles klar, drücke „Enter“ und lass uns sehen, was wir bekommen. Wie Sie hier sehen können, haben wir viele verschiedene Optionen. Lassen Sie mich sehen. Ich werde diese wählen, die dritte, Sie können wählen, was Sie wollen. Ich werde mit dem hier gehen. Jetzt kann ich einfach auf diesen „Download“ -Button klicken und ich muss die Lottie JSON-Datei herunterladen. Um die Datei herunterzuladen, müssen Sie ein kostenloses Konto erstellen. Stellen Sie sicher, dass Sie voran und melden Sie sich zuerst an. Jetzt gehe ich zu Webflow und gehe zu Assets, und ich werde meine Lottie-Datei per Drag & Drop in meine Vermögenswerte. Da ist es. Dann werde ich dieses Lottie-Animationselement auswählen, wenn ich darauf doppelklicke, kann ich diese Lottie-Sequenz ersetzen. Ich werde diese JSON-Datei auswählen und ich kann diese Animation in einer Vorschau anzeigen. Aber es ist zu groß. Solange es ausgewählt ist, werde ich ihm eine Klasse geben, lassen Sie mich Lottie-Animation schreiben. Dann werde ich Ihnen die spezifische maximale Breite geben. Lassen Sie uns auf 100 Pixel schreiben. Das ist in Ordnung, aber es ist nicht zentriert. Ich werde auf diese kleine Schaltfläche im Abstandsbereich klicken , um den linken und rechten Rand auf auto zu setzen. Dann werde ich ihm etwas unterste Marge geben. Lassen Sie uns hier einen 20-Pixel-unteren Rand hinzufügen, ich denke, es wäre genug. Schön, lassen Sie mich eine Vorschau sehen. Sieht gut aus. Allerdings müssen wir fortfahren und unsere Website veröffentlichen und sie tatsächlich auf unserer veröffentlichten Website testen. Ich werde es veröffentlichen und wenn ich es hier geöffnet habe, werde ich dieses Formular ausfüllen. Lassen Sie uns Arash schreiben und hier werde ich test@gmail.com schreiben. Dann schreiben wir eine Nachricht, hallo und „Senden“ Wir werden dieses Bild sehen, aber die Animation wird nicht abgespielt. Was ist los? Wie können wir das in Ordnung bringen? Um dieses Problem zu beheben, müssen wir den Webflow-Interaktionsbereich verwenden. Warum? Weil wir einen Element-Trigger erstellen müssen, um diese Animation auszulösen. Lassen Sie mich zum Interaktionsfenster gehen. Von hier aus werde ich einen Element-Trigger erstellen. Unser Element wird unser Submit-Button sein, dieser primäre Button. Bitte wählen Sie es aus dem Navigator und erstellen Sie einen Element-Trigger, klicken Sie mit der Maus, tippen Sie auf. Dann werde ich hier eine neue Aktion erstellen, es wird eine benutzerdefinierte Animation sein. Hier werde ich eine neue Animation erstellen und schreiben Lottie-Animation. Was sollen wir hier tun? Jetzt müssen wir unser Lottie-Animationselement auswählen und dann müssen wir eine Aktion erstellen. Hier, wie Sie unter den Integrationen sehen können, haben wir Lottie. Ich werde Lottie wählen. Da gehen wir, wenn ich hier unter dem Lottie-Abschnitt scrolle, können Sie sehen, dass ich die Frames kontrollieren kann. Ich werde es auf null Prozent setzen, weil das unser Startpunkt ist. Dann werde ich eine neue Aktion Lottie erstellen und dann drehen wir es auf 100 Prozent. Wenn ich es in der Vorschau sehe, sieht es gut aus , aber es spielt so schnell, also werde ich seine Dauer auf zwei Sekunden ändern. Lassen Sie mich eine Vorschau anzeigen. Es ist viel schöner, nicht wahr? Lassen Sie mich retten, und wir sind fertig. Nun, ich werde meine Website hier veröffentlichen und dann werde ich fortfahren und diese Seite „Kontaktieren Sie uns“ aktualisieren. Lassen Sie mich dieses Formular noch einmal ausfüllen. Ich werde Arash schreiben und hier schreiben wir test@gmail.com und für die Nachricht, schreiben wir hallo. Ich werde die Schaltfläche „Senden“ drücken. Da gehen wir. Unsere Lottie-Animation spielt perfekt. Dies ist im Grunde, wie Sie benutzerdefinierte Animationen zu Ihrer Website hinzufügen können. Wenn Sie Ihre eigene Animation erstellen möchten und mit der Software Adobe After Effects vertraut sind, können Sie einfach die Lottie-Plugins herunterladen und dann Ihre Animation in Adobe After Effects erstellen und exportieren Ihre Lottie JSON-Datei und importieren Sie sie in Webflow, es ist sehr einfach. Auf diese Weise können Sie einige benutzerdefinierte Animationen für Ihr Projekt erstellen. Sie können auch einen Motion Graphic Designer bitten, dies für Sie zu tun. Das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten sehen. 75. Benennung: Hey, in diesem Video werden wir über Namenskonvention sprechen. Nun, wenn Sie eine Website erstellen, verwenden Sie viele verschiedene CSS-Klassen, genau wie das, was wir in unserem eigenen Projekt, dem Circle Agency Project, getan haben . Wenn Sie mehr und mehr Klassen erstellen, wird es schwieriger und schwieriger, alle Klassen, Kombinationsklassen, globale Klassen, alles zu verwalten und zu organisieren . In diesem Video werde ich Ihnen eine sehr beliebte Namenskonvention vorstellen , die Sie in Ihren Projekten verwenden können, sie heißt BEM. BEM steht für Block, Element und Modifikator. Klingt es kompliziert? Keine Sorge, ich werde es für dich kaputt machen. Zuerst gehe ich voran und erstelle ein Element. Ich werde dieses Navbar-Element einfach hierher ziehen und ablegen. Diese navbar hat keine Klasse. Nehmen wir an, wir wollen hier eine Klasse erstellen. Wie sollen wir es benennen? Im Grunde liegt es ganz an dir. Sie können Ihre eigene Namenskonvention verwenden, solange Sie Ihre Klassen organisiert halten können und Sie verstehen, was Sie tun, es ist völlig in Ordnung. Aber wenn Sie mit einem Team von Entwicklern und Designern arbeiten, wäre es besser, ein Namenskonventionssystem zu verwenden , das alle anderen Entwickler verstehen. Wie funktioniert das BEM-System? Nun, wie ich bereits erwähnt habe, steht es für Block, Element und Modifikator. Worauf bezieht sich Block? Block ist unser Hauptelement. Zum Beispiel, hier in diesem Fall, ist diese Navbar unser Block. Daher werden wir es einfach navbar nennen. Wir haben unsere Basisklasse erstellt. Dann, wenn ich es im Navigator erweitere, haben wir hier einen Container, und dieser Container wird Container genannt werden, weil dies ein weiterer Block ist. Dies ist der Hauptblock. Dann im Inneren werden wir verschiedene Elemente wie diese Marke Link haben, haben wir dieses Nav Menü und diese Nav Links und auch diese Menü-Taste, die versteckt ist. Nehmen wir an, wir wollen diesen Brand Link nennen, wie können wir das tun? Zuerst müssen wir unseren Blocknamen schreiben. Was ist unser Hauptblock? Es ist Navbar. Wir schreiben navbar, und dann verwenden wir zwei Unterstriche einfach so, und dann müssen Sie den Namen des Elements schreiben. Hier wird es Logo sein, genau so. Jetzt haben wir unseren Blocknamen und unser Element hier. Aber was ist mit dem Modifikator? Nun, der Modifikator bezieht sich auf unsere Kombinationsklassen. Zum Beispiel, wenn ich einfach voran und wähle diesen nav Link und ich gebe ihm nur eine Klasse, schreiben wir nav Menü Unterstrich, Unterstrich nav Link. Also hier haben wir unseren Block und dann haben wir unser Element, und dieser Link hat einige Eigenschaften. Aber nehmen wir an, wir wollen diese Eigenschaften mit einer Combo-Klasse überschreiben. Dann können wir voran gehen und eine Combo-Klasse erstellen. Diese Combo-Klasse wird unser Modifikator sein. Nehmen wir an, wir wollen die Farbe dieser Home-Link ändern, zum Beispiel, in rot. In diesem Fall kann ich eine neue Combo-Klasse erstellen und Sie können so etwas schreiben. Sie können schreiben.is Bindestrich rot, und dann können Sie die Farbe direkt im Bereich Typografie in Rot ändern. Hier, diese.is dash dash red ist unser Modifikator. Sie können es benennen, wie Sie wollen, aber so funktioniert das BEM-System. Wenn ich einen neuen Modifikator erstellen möchte, kann ich diese Klasse entfernen und dann kann ich.is dash green schreiben, zum Beispiel. Lassen Sie mich voran und ändern Sie diese Farbe in Grün, so etwas. Jetzt kann ich einfach zwischen diesen Modifikatoren wechseln. Es sagt, ist grün, ist rot. Der ganze Sinn der Verwendung dieses Namenskonventionssystems besteht darin , dass Sie einfach verstehen können, was jede Klasse tut. Zum Beispiel können Sie hier sofort verstehen, dass es sich um einen Modifikator handelt, grün ist, rot ist. Sie können verschiedene Modifikatoren erstellen, wie; ist groß, ist groß. Zum Beispiel, wenn ich navbar Logo hier wählen, werden Sie sofort den Blocknamen sehen, der navbar ist, und dann das Element, logo. Sie können einfach alle Elemente innerhalb des Navigators organisieren , wenn Sie diese Namenskonvention verwenden. Aber wieder, es liegt ganz an dir, wie du deine Klassen benennst. Solange Sie sie organisiert und verständlich halten, können Sie jedes gewünschte Namenskonventionssystem verwenden. Aber denken Sie daran, dass Sie an einem kleinen Projekt arbeiten können und Sie Ihr eigenes Namenskonventionssystem verwenden können und es funktioniert perfekt. Wenn Sie jedoch dieselbe Namenskonvention auf ein groß angelegtes Projekt anwenden, können Sie Schwierigkeiten haben, denn wenn Sie Hunderte von verschiedenen Seiten und Hunderte von verschiedenen Klassen erstellen , wäre es eine Herausforderung, zu organisieren und zu verstehen alle Kombinationsklassen und -klassen, die Sie erstellen. In diesem Fall können Sie die BEM-Benennungskonvention verwenden. Na gut, Leute, ich hoffe, ihr habt dieses Video hilfreich gefunden. Wir sehen uns im nächsten Video. 76. Einführung in die freiberufliche Welt: Aufbau eines erfolgreichen Webdesign-Geschäfts ist eine anspruchsvolle Aufgabe , die eine enorme Menge an Energie und viele Fähigkeiten erfordert. Bisher haben Sie gelernt, eine moderne und voll reaktionsfähige Website mit komplexen Interaktionen und Animationen zu erstellen eine moderne und voll reaktionsfähige Website mit , und ich bin so stolz auf Sie, aber Sie wissen immer noch nichts über die geschäftliche Seite der Freiberufler Reise. In den kommenden Videos werde ich Sie als Webdesigner und Webentwickler durch den Freelancing-Prozess führen. Wir werden über die Akquisition von Kunden, Vorbereitung von Vorschlägen, die Preisgestaltung Ihrer Arbeit und vieles mehr sprechen. Also, wenn Sie wissen möchten, wie Sie ein erfolgreiches Web-Design-Geschäft für sich selbst erstellen, stellen Sie sicher, dass Sie die kommenden Videos überprüfen. 77. Wie man Kunden bringt?: Egal, wie gut Ihr Design ist, wenn Sie Ihre Dienstleistungen nicht verkaufen können, ich fürchte zu sagen, dass Sie früher oder später aus diesem Geschäft sein werden. Aber das werden wir nicht zulassen. Nehmen wir an, Sie haben keine Erfahrung im Webdesign und in der Webentwicklung und möchten von Grund auf neu beginnen. Was müssen Sie tun, um Ihren ersten Kunden zu bekommen? Das ist eine einfache Frage. Aber die Antwort ist nicht so einfach. Warum? Weil es eine Reihe von Dingen gibt, die Sie tun müssen, um Ihren ersten Kunden zu bekommen. Um den Kunden zu bekommen, sollten Sie zunächst verstehen, wie Kunden denken, was ihnen wichtig ist und was sie erreichen wollen. Ein Kunde muss immer Ihrem ersten vertrauen, bevor er den Vertrag mit Ihnen unterschreibt. Wie können Sie das Vertrauen des Kunden gewinnen? Nun, du musst ihnen zeigen, dass du fähig bist, das zu tun, was du bietest. Wie? Durch die Präsentation Ihres Portfolios. Aber warte, du hattest keine Klienten. Was sollst du ihnen zeigen? Die Antwort ist, Sie müssen einige Beispielprojekte erstellen. Um dies zu tun, können Sie für einige lokale Unternehmen in Ihrer Umgebung suchen und sehen, ob es Websites erfordern einige Verbesserungen. Sie können ihre Websites schnell neu gestalten und in Webflow erstellen. Denk dran, es sollte nicht perfekt sein. Dann kannst du sie erreichen und ihnen zeigen, was du getan hast. Sie können einfach sagen: „Hey, ich bin ein Webdesigner und ich dachte, vielleicht muss Ihre Website aktualisiert werden. Hier ist das Vor- und Nachher Ihrer Website, und es würde sich freuen, Ihnen meine Dienste anbieten zu können.“ Dies ist der einfachste Weg, um loszulegen und Ihren ersten Client zu bekommen. Darüber hinaus können Sie Ihre Beispielarbeiten in sozialen Medien wie LinkedIn, Instagram, Facebook usw. posten . Auf diese Weise werden immer mehr potenzielle Kunden Ihre Arbeit sehen und sie können mit Ihnen Kontakt aufnehmen. Sie können Ihre Beispielprojekte auch auf Behance und Dribbble posten. Diese Plattformen sind ein großartiger Ort, um Ihre Design- und Webentwicklungsfähigkeiten zu demonstrieren. Das nächste, was Sie tun müssen, ist ein Konto auf einem freiberuflichen Marktplatz zu erstellen. Es gibt viele Marktplätze, die Ihnen helfen, Kunden bequem zu bekommen, wie Fiverr, Freelancer, Upwork, etc. Ich schlage vor freelancer.com, aber Sie können auf jedem von ihnen sein. Erstellen Sie Ihr Profil und fügen Sie Ihre Beispielarbeiten hinzu. Am Anfang ist es schwieriger, Kunden zu bekommen, weil Sie keine Bewertungen bekommen haben, aber sobald Sie ein paar Projekte abgeschlossen und gute Bewertungen bekommen, wird es viel einfacher, neue Kunden zu gewinnen. Ich möchte, dass Sie wissen, dass es bei Freiberuflern um Verbindungen und Beziehungen geht. Wenn Sie an verschiedene Kunden gebunden sind, aber sie haben Ihnen das Projekt nicht gegeben, ist das in Ordnung. Es ist Teil des Prozesses. Sie können sich nach einem Jahr oder so mit Ihnen in Verbindung setzen und Ihnen ein anderes Projekt geben. Es ist so wichtig, gute Beziehungen zu allen zu schaffen, weil wer weiß? Sie können Ihre zukünftigen Kunden sein. 78. Einen Vorschlag senden: Sobald Sie Ihren potenziellen Kunden gefunden haben, werden sie Sie bitten, ihnen einen Vorschlag zu schicken und es ist eine der wichtigsten Phasen des Freiberuflings. Wenn Sie es richtig machen, erhöhen Sie drastisch die Chance, das Projekt zu erhalten. Viele Anfänger kämpfen mit dieser Phase, weil sie es vorziehen, Zeit mit der Gestaltung und dem Bau eines Projekts zu verbringen , anstatt einen großen Vorschlag vorzubereiten. Aber ich erinnere dich an etwas. Wenn Sie den Client nicht bekommen können, gibt es kein Projekt zu tun. Es lohnt sich, sich auch mehr auf diese Bühne zu konzentrieren. Lassen Sie uns nun über den Vorschlag selbst sprechen. Wie soll es strukturiert werden? Welche Informationen sollten enthalten sein? Wenn es um die Ausarbeitung von Vorschlägen geht, gibt es keinen richtigen oder falschen Weg. Sie können zwischen verschiedenen Stilen, verschiedenen Layouts usw. wählen. Hier ist, wie ich meine Vorschläge strukturiere. Jeder Vorschlag sollte sieben Hauptelemente enthalten. Nummer 1, Einleitung. Dieser Abschnitt basiert hauptsächlich auf den vorherigen Gesprächen, die Sie mit dem Kunden geführt haben. Sie können den Namen des Kunden, den Projekttitel, den Namen Ihres Auftraggebers, Ihren Namen und Titel und schließlich das Einreichungsdatum angeben. Hier ist ein Beispiel für eine gute Einführung. Nummer 2, Problemübersicht. Sobald Sie sich dem Kunden vorgestellt haben, der nächste wichtige Abschnitt, der folgt die Problemübersicht. In diesem Abschnitt sollten Sie das Problem klar definieren und der Kunde sollte verstehen , dass es ein Problem mit der Website gibt, das sich negativ auf sein Geschäft auswirkt. Der Kunde sollte auch verstehen, dass Sie ein tiefgreifendes Verständnis für ihre Probleme haben und Sie hier Ihre Verantwortlichkeiten und den Projektumfang klären können. Denken Sie daran, das Hauptziel eines Projektvorschlags ist es , Ihren Kunden glauben zu lassen, dass Sie ihre Probleme lösen können. Konzentrieren Sie sich immer auf die Bedürfnisse und Probleme des Kunden. Hier ist ein Beispiel für eine Problemübersicht. Nummer 3, Lösungsübersicht. Nachdem Sie die Probleme des Unternehmens durch verschiedene Forschungen definiert haben, ist es an der Zeit, sie davon zu überzeugen, dass Sie ihre Probleme lösen können , indem Sie eine detaillierte Lösung bereitstellen. In diesem Abschnitt sollten Sie erklären, wie sie von der Nutzung Ihrer Dienste profitieren können , um ihre Probleme zu lösen und vor allem, wenn Sie tun, um ihre Probleme zu lösen. Wie Sie hier sehen können, haben wir einen sehr guten Lösungsüberblick. Nummer 4, Lieferbestandteile. Dieser Abschnitt sollte klar definieren, was Sie als Teil des Projekts liefern und was Sie nicht liefern werden. Sie können denken, es ist seltsam, auszuschließen, was wir nicht liefern, aber glauben Sie mir, wenn Sie mit unerfahrenen Kunden arbeiten, manchmal erwarten sie, dass Sie den Inhalt, Logo, Bilder vorbereiten und sogar ihre Website für Suchmaschinen optimieren. Es liegt in Ihrer Verantwortung zu klären, was Teil des Projektumfangs ist und nicht. Nummer 5, Prozessübersicht. Nachdem Sie die Probleme, Lösungen und Lieferbestandteile definiert haben, sollten Sie erklären, wie Ihr Prozess aussieht. In diesem Abschnitt können Sie verschiedene Schritte Ihres Prozesses skizzieren. Wie bei den ersten Besprechungen, Vorbereitung der Assets, Entwurf eines Drahtmodells usw. Sie können auch angeben, wie lange jeder Schritt dauert und was Sie vom Kunden während dieses Prozesses erwarten. Nummer 6, die Kosten. Jetzt ist es an der Zeit, die Kosten für Ihre Dienstleistungen zu skizzieren. Wenn Sie das Budget Ihres Kunden nicht kennen, stellen Sie sicher, dass Sie sie fragen, bevor Sie den Vorschlag vorbereiten. Denn sonst könnten Sie nach einem sehr hohen Preis oder einem mageren Preis fragen. Denken Sie daran, es ist völlig in Ordnung, den Kunden im Voraus nach ihrem Budget zu fragen, also haben Sie keine Angst davor. Wenn Sie nicht wissen, wie Sie Ihre Arbeit preisen können, machen Sie sich keine Sorgen. In der folgenden Lektion werden wir tief darüber sprechen. Nummer 7, CTA oder Call to Action. In diesem Abschnitt sollten Sie den Kunden auffordern, mit dem nächsten Schritt fortzufahren, den Vorschlag anzunehmen und den Vertrag zu unterzeichnen. Wenn Sie Ihren Vorschlag als PDF- oder Word-Datei senden, können Sie ihn bitten, Ihnen eine E-Mail zu senden und Sie über ihre Entscheidung zu informieren. Ich empfehle diesen Weg nicht wirklich. Warum? Aus vielen Gründen wie PDFs sind nicht reaktionsschnell. Wenn der Kunde es auf seinem Telefon lesen möchte, wäre es daher problematisch. Der zweite Grund ist, dass PDFs nicht zulassen der Kunde ein Projekt annimmt und den Vertrag sofort unterschreibt. Stattdessen können Sie ein Online-Angebots-Tool verwenden, mit dem Sie den Vorschlag professionell und bequem gestalten und vorbereiten können . Auf diese Weise können Sie den Vorschlag als Webseite senden, die ansprechbar, kennwortgeschützt und editierbar ist . Darüber hinaus kann Ihr Kunde einfach auf die Schaltfläche „Akzeptieren“ klicken und sofort den Vertrag unterzeichnen. Wie Bequemlichkeit ist das? Ich persönlich nutze diese Website, um diesen Vorschlag kostenlos auszuarbeiten. Es gibt viele Werkzeuge wie diese, die Sie für diesen Zweck verwenden können. Das ist alles über die Vorbereitung des Vorschlags. Ich hoffe, dass dir dieses Video gefallen hat und wir sehen uns dort. 79. Die Arbeit: Die Preisgestaltung spielt in jedem Unternehmen eine wichtige Rolle. Sie als Freiberufler sollten wissen, wie Sie Ihre Arbeit preisen können, um in diesem Geschäft erfolgreich zu sein. Viele von euch erwarten, dass ich euch jetzt eine magische Zahl gebe. Aber es gibt keine magische Zahl, wenn es um die Preisgestaltung geht. Es gibt keine Standardformel, die Ihnen den genauen Preis gibt , den Sie für Ihre Dienstleistungen wählen sollten. Wie können Sie entscheiden, wie viel Sie Ihren Kunden berechnen sollten? Vor allem, wenn du gerade erst anfängst. Nun, es gibt viele Faktoren, die Sie berücksichtigen sollten , wenn es um die Preisgestaltung geht. Lassen Sie uns zuerst über die Preismodelle sprechen. Es gibt in der Regel drei Preismodelle, aus denen Sie wählen können. Stundensatz, Pauschalpreis und wiederkehrende Rate. Fangen wir mit dem Stundensatz an. Wenn Sie $60 pro Stunde berechnen und das Projekt 60 Stunden dauert, berechnen Sie $3.600. Dieses Modell ist ziemlich unkompliziert, weil der Client leicht verstehen kann, wie viel Zeit jeder Schritt benötigt. Aber das gibt es einen Nachteil. Sie müssen die Stunden verfolgen, die Sie für das Projekt verbringen, da der Kunde manchmal den Umfang des Projekts ändern kann und es möglicherweise viel länger dauern kann, bis es bereitgestellt wird. Jetzt reden wir über Pauschalpreis. Es ist eine effektive Möglichkeit, Ihren Kunden zu laden. Warum? Weil Sie die Erwartungen einmal festlegen und einen festen Preis für dieses Projekt berechnen. Nehmen wir an, Sie berechnen $4.000 für ein Projekt, das 60 Stunden benötigt, um zu bauen, es ist ein $66 Stundensatz. Aber hier ist der Punkt, wenn Sie dieses Preismodell wählen, müssen Sie beachten, dass Sie immer noch einen festen Preis berechnen müssen , unabhängig davon, wie lange es dauert, um das Projekt abzuschließen. Wenn es 80 Stunden statt 60 dauert, ist es ein $50 Stundensatz. Auf der anderen Seite, wenn Sie es schaffen, das Projekt in 50 Stunden abzuschließen, ist es ein $80 Stundensatz. Das letzte Preismodell ist die wiederkehrende Rate. Es funktioniert so, Sie haben einem Kunden einen festen Betrag für einen Zeitraum von Zeit berechnet, sagen wir $600 monatlich für 12 Monate. Es hat einige Vor- und Nachteile. Wenn Sie die Kunden monatlich berechnen, müssen sie nicht den gesamten Preis im Voraus bezahlen. Darüber hinaus können Sie ihnen einen wiederkehrenden Support-Service zur Verfügung stellen. Aber hier ist der Haken, wenn Sie sich entscheiden, einen Kunden über einen langen Zeitraum zu berechnen, müssen Sie klar definieren, was Sie ihnen zur Verfügung stellen werden, denn sonst können sie erwarten, dass Sie viel Arbeit tun, da Sie sie immer und immer wieder aufladen . Wenn Sie auf der Suche nach einer stetigen Einnahmequelle sind, wäre es eine gute Wahl für Sie. Aber ich persönlich benutze dieses Umsatzmodell nicht, weil es so viele verschiedene Variablen gibt , die schwer zu verwalten sind. Lassen Sie uns nun über den Preis selbst sprechen. Der Preis, den Sie für Ihre Arbeit festgelegt haben, hängt von dem Wert ab, den Sie angeben. Denken Sie daran, dass es eine Korrelation zwischen Preis und Wert gibt, und Sie sollten Ihre Arbeit immer basierend auf dem Wert, den Sie dem Unternehmen des Kunden bieten, Preis . Es gibt immer einen Marktwert für alles, von Gold über Immobilien bis hin zu Autos. Aber Sie müssen verstehen, dass Sie Ihren eigenen Wert definieren. Wenn Sie Ihre Arbeit sehr niedrig preisen, verringern Sie automatisch Ihren eigenen Wert. Auf der anderen Seite, wenn Sie Ihre Arbeit sehr unangemessen hoch preisen, werden Sie aus diesem Geschäft sein, weil Sie kaum jemanden finden, der sich auf Ihren Wert einig ist. Aber wie auch immer, das ist die Entscheidung, die Sie treffen sollten, und Sie sollten Ihren eigenen Wert setzen. Wenn Sie Ihre Arbeit sehr hoch schätzen, sollten Sie natürlich auch ein erstklassiges Projekt liefern. Manchmal nähert sich ein Kunde Ihnen und bittet Sie, etwas kostenlos zu tun, und sie sagen, dass Sie dieses Projekt zu Ihrem Portfolio hinzufügen können, und es ist gut für Ihre zukünftige Karriere. Lassen Sie mich Ihnen etwas sagen, nie ein Projekt kostenlos zu machen, denn Ihre Arbeit hat Wert und niemand sollte Ihre Arbeit unterschätzen. Selbst wenn Sie gerade erst anfangen, machen Sie keine freien Projekte. Sie können mit einem niedrigeren Preis beginnen, aber nicht völlig kostenlos. Wenn Sie auf verschiedene freiberufliche Websites gehen, können Sie leicht den Durchschnittspreis für die von Ihnen angebotenen Dienstleistungen finden und die Preise entsprechend festlegen. Sie können sie auch basierend auf Ihren Erfahrungen und dem von Ihnen bereitgestellten Wert anpassen. Wenn Sie Ihre Zahlen setzen, bleiben Sie an ihnen. Wenn ein Kunde sagte, dass ich jemand anderes gefunden habe, der dasselbe für einen niedrigeren Preis tut , den Sie höflich antworten könnten, verstehe ich, aber basierend auf dem Wert, den ich Ihnen und Ihrem Unternehmen zur Verfügung stelle, denke ich, dass mein Preis vernünftig ist. Welches Preismodell schlage ich vor, dass Sie verwenden? Ich persönlich bevorzuge das Flatrate Einnahmenmodell. Warum? Denn wenn Sie immer selbstbewusster werden und Erfahrungen in Webdesign und Webentwicklung sammeln, können Sie die Projekte schneller abschließen. Daher wäre es vorteilhafter für Sie, das Flatrate-Umsatzmodell zu verwenden , da Sie nicht pro Stunde berechnen. Auf diese Weise wird Ihr Stundensatz erhöht, wenn Sie Projekte schneller abschließen können. Denken Sie daran, wenn Sie ein Projekt schneller abschließen, bedeutet dies nicht, dass Sie Ihre Arbeit unterschätzen sollten. Der Grund, warum Sie Projekte schneller abschließen können, ist die Tatsache, dass Sie mehr Erfahrung haben und mehr üben. Lassen Sie mich Ihnen ein Beispiel geben. Nehmen wir an, ein Webentwickler kann eine Website in 60 Stunden entwickeln und sein Stundensatz beträgt $50. Wir nennen ihn oder ihren Entwickler 1. Ein anderer Entwickler kann die gleiche Website in 30 Stunden entwickeln und er oder sie berechnet $100 pro Stunde. Wir nennen ihn oder ihren Entwickler 2. Welcher ist vorteilhafter für den Kunden? Ja, Sie haben Recht, Entwickler 2, weil er oder sie die gleiche Menge an Geld wie der Entwickler 1, aber liefert das Projekt viel schneller. Der zweite Entwickler könnte noch mehr wie $200 pro Stunde berechnen und trotzdem für die Kunden von Vorteil sein , weil er oder sie das Projekt schneller als der erste Entwickler liefert. Denken Sie daran, dass Sie Ihre Preispunkte jederzeit ändern können. Zum Beispiel, wenn Sie einige Projekte durchgeführt haben und glauben, dass Sie den Kunden nicht genug berechnet haben, können Sie Ihre Preise für Ihre zukünftigen Projekte erhöhen, es gibt keine Begrenzung in dieser Hinsicht. Aber behalten Sie immer den Überblick über Ihre Preispunkte und die Änderungen, die Sie vornehmen , um den besten Preis für Ihre Dienstleistungen in der Zukunft zu finden. Jungs, bei denen es um Einnahmenmodelle und Preisgestaltung geht. Ich hoffe, es hat dir gefallen. Wir sehen uns im nächsten Video. 80. Treffen deines Kunden: Viele unerfahrene Designer und Entwickler denken, dass wir uns mit Kunden treffen , weil sie uns einige Fragen über uns und wie wir arbeiten, stellen wollen, aber das ist nicht alles. Der Grund, warum wir uns mit Kunden treffen, ist der Austausch von Informationen. Sie stellen Fragen und wir stellen Fragen. Wir wollen wirklich verstehen, wie ihr Geschäft funktioniert, um das Problem lösen zu können. Bereiten Sie immer einige Fragen vor, bevor Sie zu einem Meeting gehen. Diese Fragen können je nach Art des Projekts variieren, aber der Hauptpunkt ist nur, sich mit ihrem Geschäft vertraut zu machen. Einige Kunden fragen Sie vielleicht nach Ihrem Prozess und es ist völlig in Ordnung. Sie können ihnen erklären, wie der gesamte Prozess aussieht. Einige von ihnen können möchten, dass Sie eine WordPress-Website zu entwickeln, vielleicht, weil sie gehört, es ist gut oder sie sind nur vertraut mit der WordPress-Schnittstelle. könnten zwei Szenarien passieren. Erstens können Sie denken, dass nach ihrem Budget und auch ihre Bedürfnisse, es wäre besser für sie, eine WordPress-Website zu haben , und es ist Ihre Verantwortung, sie zu führen und sagen, Sie müssen für einen WordPress-Entwickler suchen, um Ihnen zu helfen erstellen Sie dieses Projekt. Sie können sie auch jemandem vorstellen, wenn Sie einen guten WordPress-Entwickler kennen , weil wir keinen Kunden um jeden Preis bekommen wollen. Wir möchten, dass sie glücklich sind, sobald das Projekt abgeschlossen ist. Das zweite Szenario ist, dass Sie denken, dass sie falsch sind und es wäre viel besser für sie, eine konstante Webflow-Website zu haben. In diesem Fall müssen Sie sie überzeugen, warum Webflow besser für ihre Bedürfnisse geeignet ist. Sie können erwähnen, welche Funktionen Webflow hat und wie bequem es ist, mit dem Webflow-Editor zu arbeiten und viele andere Dinge. Sie sollten tatsächlich Ihre Kunden zu erziehen, weil sie vielleicht noch nie einen Webflow gehört haben und sie gerade von WordPress gehört haben. Im kommenden Video werden wir über den Verkauf von Webflow an Ihre Kunden sprechen. Wir sehen uns dort. 81. Webflow: Sie haben ein Meeting mit einem Kunden und Sie möchten diesen Webflow verkaufen. Wie macht man das? Zunächst einmal müssen Sie ihnen ein paar Fragen stellen, um zu sehen, ob Webflow die beste Wahl für sie ist oder nicht. Denn wie ich bereits erwähnt habe, ist es nicht richtig, sie dazu zu bewegen, etwas zu verwenden, das nicht gut für sie ist , nur weil wir das Projekt bekommen wollen. Was sollten Sie sie fragen? Sie können ihnen folgende Fragen stellen. Was erwarten Sie von Ihrer Website? Welche Funktionen sollte es haben? Benötigen Sie ein CMS? Was ist mit Sicherheit? Ist es dir wichtig? Wie oft müssen Sie die Inhalte Ihrer Website aktualisieren? Kümmern Sie sich um Geschwindigkeit und Skalierbarkeit? Diese Fragen helfen Ihnen, ihre Bedürfnisse wirklich zu verstehen und sich auf die Dinge zu konzentrieren, die ihnen wichtig sind. Zum Beispiel, wenn sie sich um Geschwindigkeit kümmern, können Sie darüber reden. Sie können ihnen mitteilen, dass Webflow von AWS unterstützt wird, was für Amazon Web Services steht, wodurch ihre Website sehr schnell geladen wird. In der Tat ist AWS eine der sichersten und schnellsten Hosting-Optionen, von großen Unternehmen vertraut werden. Wenn sie sich um CMS kümmern, können Sie erklären, wie einfach es ist, mit Webflow CMS zu arbeiten. Was ist mit Skalierbarkeit? Sie können ihnen sagen, dass sie sich um nichts kümmern müssen, egal wie viel Traffic sie zu ihrer Website fahren, Webflow kann das leicht bewältigen. Wenn sie bereits mit WordPress gearbeitet haben, können Sie sie fragen, was sie mögen und nicht mögen, und konzentrieren Sie sich darauf. Lassen Sie uns nun über die Unterschiede zwischen Webflow und WordPress sprechen. Sie sind wie Mac OS und Windows, jeder hat seine eigenen Vor- und Nachteile. Sie müssen zwischen ihnen wählen, basierend auf Ihren Bedürfnissen und Vorlieben. Workflow ist ein relativ neues Tool, aber WordPress ist bekannt und sehr alt. Deshalb sind die meisten Kunden mit WordPress vertraut, aber es bedeutet nicht unbedingt, dass es gut für sie ist, es zu verwenden. Webflow verwendet die neuesten Technologien, um eine saubere und moderne Websites zu bauen. Auf der anderen Seite verwendet WordPress alle Technologien wie PHP. Webflow benötigt keine Plug-Ins, um benutzerdefinierte Webseiten zu erstellen, aber WordPress verlässt sich für fast alles auf viele verschiedene Plugins. Deshalb generiert Webflow im Vergleich zu WordPress einen viel saubereren Code. Webflow-Funktionen sind bezahlt und es ist nicht Open Source, aber WordPress ist völlig kostenlos und Sie müssen nur für das Hosting bezahlen. Webflow gibt Ihnen vollständige Gestaltungsfreiheit, während WordPress durch Vorlagen eingeschränkt wird. Dies waren die wichtigsten Unterschiede zwischen Webflow und WordPress. Jetzt werde ich Ihnen eine sehr coole Art zeigen, Webflow Ihren Kunden zu präsentieren. Webflow hat einen innovativen Weg geschaffen, um unsere Kunden und Freunde leicht davon überzeugen zu können, Webflow zu nutzen. Wenn Sie zu webflow.com/pitch gehen, können Sie Ihren Namen und Ihre E-Mail-Adresse eingeben und mit der Erstellung einer benutzerdefinierten Präsentation beginnen. Sie können den Namen Ihres Kunden hier schreiben, einen Screenshot ihrer aktuellen Website hochladen, und dann können Sie durch die Folien gehen und einige von ihnen anpassen. Zum Beispiel kann ich hier eine Option aus dem Dropdown-Menü auswählen und das Bild wird entsprechend hinzugefügt. Sie können auch optionale Folien einfach so deaktivieren. Schließlich können Sie eine Nachricht für Ihren Client erstellen und auf die Schaltfläche Speichern und senden klicken. In wenigen Minuten erhalten Sie Ihre Kostümpräsentationen Link zu Ihrer E-Mail und Sie können es mit Ihrem Kunden teilen. Wie cool ist das? Alles klar, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich sehe dich im nächsten Video. 82. Webflow: Hey, in diesem Video werden wir über Webflow-Hosting-Pläne sprechen. Ich werde oft gefragt, warum Webflow-Hosting ist so teuer im Vergleich zu anderen Hosting-Optionen wie Bluehost, HostGator, etc. Wenn Sie Ihre Website mit Webflow erstellen, sind Sie nicht verpflichtet, ihr Hosting zu verwenden. Wenn Sie ein kostenpflichtiges Konto haben, können Sie Ihr Projekt einfach exportieren und woanders hosten, entweder kostenlos oder zu einem niedrigen Preis. Warum sollten Sie jemals Webflow-Hosting verwenden? Wenn Sie das Projekt exportieren und an einem anderen Ort hosten, können Sie die CMS-Funktion nicht mehr verwenden. Dies bedeutet, dass Ihre dynamischen Seiten nicht funktionieren. Nehmen wir an, das Projekt hat keine dynamischen Seiten und es hat nur einige informative statische Seiten. Sie hosten Ihr Projekt woanders und alles funktioniert gut. Nach einer Weile möchte der Kunde etwas hinzufügen oder etwas auf der Website ändern, dann sollten sie einen Entwickler einstellen, um den Code Ihrer Website zu ändern, was so zeitaufwendig und frustrierend ist. Sie sollten diesen Vorgang immer wieder wiederholen. Jedes Mal, wenn der Entwickler kann ihnen etwas zwischen $100 und $300 berechnen , um diese Änderungen vorzunehmen. Wenn sie den Inhalt ihrer Website mindestens einmal im Monat ändern möchten, sollten sie alles zwischen $1.200 und $3.600 pro Jahr bezahlen. Jetzt vergleichen wir es mit Webflow-Hosting. Für die meisten Kunden funktioniert der CMS-Plan am besten und kostet $16 pro Monat, jährlich berechnet. Das ist $192 pro Jahr für einen Hosting-Plan, der mit vielen Funktionen kommt. Erstens können sie ihre Website mit dem Webflow Editor bearbeiten und müssen sich auf niemanden verlassen. Zweitens können sie alle Funktionen von Webflow wie CMS, Editor, Designer, etc. Drittens, Webflow erstellt automatisch Backups für sie. Darüber hinaus bietet Webflow-Hosting CDN, das für Content Delivery Network steht, das schnellere Laden der Seite durch die Bereitstellung von Inhalten von den Servern, die dem Benutzer am nächsten sind, sicherstellt . Es kommt auch mit einem kostenlosen SSH, die ihre Website sicher macht, gewinnt das Vertrauen von Google und schließlich verbessert ihre SEO. Meiner Meinung nach lohnt sich Webflow-Hosting basierend auf dem Wert, den es bietet. Alles klar, Leute, das ist alles über Webflow-Hosting. Ich hoffe, dass dir dieses Video gefallen hat und ich sehe dich im nächsten. 83. Wie du das Projekt an den Kunden liefern kannst?: Hey, in diesem Video werde ich über die Projektübergabe sprechen. Wenn es an der Zeit ist, das Projekt an den Kunden zu übergeben, können Sie eine der folgenden Optionen auswählen. Nummer 1, hosten Sie das Projekt auf Ihrem Webflow-Konto und fügen Sie die Hosting-Kosten zu Ihrer Rechnung hinzu. Nummer 2, erstellen Sie ein Webflow-Konto für den Client, übertragen Sie das Projekt auf sein Konto und fügen Sie dem Projekt einen Hosting-Plan hinzu. Was ist der Unterschied zwischen ihnen? Welchen sollst du wählen und welche wähle ich persönlich? Nun, die erste Option funktioniert so. Sie fügen einen Hostingplan zum Projekt hinzu, und Sie veröffentlichen es, Sie sind fertig. Außer, dass du es nicht bist. Denn jetzt jedes Mal, wenn der Kunde etwas ändern will, sollte er sich an Sie wenden und Sie sollten es entweder kostenlos oder als kostenpflichtiger Service tun. Wenn Sie sich auf diese Weise entscheiden, können Sie die Webflow-Abrechnungsoption verwenden. Was ist das und wie funktioniert es? Nehmen wir an, Sie wählen den CMS-Plan und es kostet $192 pro Jahr. Aber Sie können Ihren Kunden mehr für das Hosting berechnen. Mit der Abrechnungsoption können Sie Ihren Hosting-Preis, Webflow-Ausgaben und Rechnungen für sie in Ihrem Namen festlegen. Nehmen wir an, Sie berechnen $250 pro Jahr für das Hosting. Webflow erhält dieses Geld und sendet Ihnen die Zugabe von $58, die Sie in Rechnung gestellt haben. Auf diese Weise können Sie etwas zusätzliches Geld verdienen. Lassen Sie uns nun über die zweite Option sprechen. Es ist ziemlich unkompliziert. Sie übertragen das Projekt auf das Konto des Kunden und fügen dem Projekt auf seinem Konto einen Hosting-Plan hinzu. Auf diese Weise können sie den Inhalt ihrer Website leicht ändern und sollten sich nicht auf Sie oder einen anderen Designer verlassen. Beachten Sie jedoch, dass Sie, sobald Sie das Projekt auf sein Konto übertragen haben, keinen Zugriff auf das Projekt in Ihrem Konto erhalten können. Daher können Sie es duplizieren, bevor Sie das Projekt als Referenz übertragen. Ich persönlich bevorzuge den zweiten Weg, denn erstens würde ich nicht sagen, dass ich gerne einen Client für Hosting berechnen möchte, zweitens möchte ich nicht für die Wartung ihrer Website verantwortlich sein, und drittens, ich brauche nicht, um die Zahlungen zu verwalten und jährliche Abrechnung. Sobald Sie das Projekt veröffentlicht haben, ist es Zeit für die Schulung. Sie können eine 30-minütige Besprechung mit dem Client abhalten und erklären wie Webflow funktioniert und wie dieser den Editor verwenden kann, um den Inhalt selbst zu ändern. Ich persönlich bitte sie, keine Änderungen mit dem Designer vorzunehmen, weil sie etwas durcheinander bringen und die gesamte Website brechen können. Bitten Sie sie immer, stattdessen den Editor zu verwenden. Wenn sie einige Sammlungselemente hinzufügen möchten, können sie dies auch im Editor tun. Da Sie diesen Schritt für jedes Projekt wiederholen sollten, schlage ich vor, dass Sie ein Trainingsvideo aufzeichnen , alles einmal erklären und es an alle Ihre Kunden senden. Wenn Ihre Kunden mehr Hilfe benötigen, können Sie ein Meeting einrichten und ihnen eine Hand geben. 84. Was kann ich als nächstes tun?: Hallo zusammen, willkommen zum letzten Video dieses Kurses. Herzlichen Glückwunsch zum erfolgreichen Abschluss des Kurses. Es war eine lange Reise für uns beide und ich möchte Sie wissen lassen, dass ich so stolz auf Sie bin , dass Sie so weit gekommen sind. Jetzt bist du offiziell Webentwickler und wirst tolle Projekte erstellen. Ich hoffe, Ihnen hat dieser Kurs gefallen und ich würde mich freuen, wenn Sie eine ehrliche Bewertung des Kurses hinterlassen könnten , damit ich ihn für Sie immer besser machen kann. Wenn du über Kurs-Updates und meine neuen Kurse informiert werden möchtest, kannst du mir auf Skillshare folgen, wenn du mehr über UI UX Design erfahren und deine Designfähigkeiten verbessern möchtest. Ich habe gute Nachrichten für dich. Ich habe einen YouTube-Kanal, in dem ich tonnenweise kostenlose Inhalte veröffentlicht habe , die Sie vielleicht interessant finden. Abonniere also unbedingt meinen Kanal, um meine kommenden Tutorials nicht zu verpassen. Wenn Sie mehr über UI-UX-Design erfahren möchten, können Sie sich meinen UI-UX-Design-Kurs auf Skillshare ansehen. Es war mir eine Ehre, Ihr Lehrer zu sein , und ich wünsche Ihnen alles Gute. Wir sehen uns und tschüss.