Kein Code-Webdesign - Webflow Fundamentals für Anfänger

1. Einführungsvideo: Hallo, ich bin Kai. Und gemeinsam lernen wir alle Grundlagen von Webflow, indem wir Ihre allererste Website von Grund auf neu erstellen. Jetzt ist Webflow ein Webentwicklungstool ohne Code , mit dem Sie komplette benutzerdefinierte Websites erstellen können , ohne HTML, CSS und JavaScript lernen zu müssen. Stattdessen erstellen wir die Website vollständig visuell mithilfe der Webflow-Editor-Oberfläche. In diesem Kurs lernen Sie nun, wie Websites strukturiert sind und wie Sie alle Elemente erstellen , die für eine gute Website erforderlich sind. Wir werden den Unterschied zwischen Abschnitten, Containern, Rand und Polsterung und vielem mehr behandeln. Dieser Kurs ist projektbasiert, was bedeutet, dass wir alle grundlegenden Funktionen erlernen indem wir eine komplette Landingpage von Grund auf neu erstellen. Wir werden mit Bildern, CSS-Klassen und Kombinationsklassen, Farbe und Typografie arbeiten . Wir werden aber auch lernen, wie man mit Grid und Flexbox komplexere Layouts erstellt . Natürlich lernen wir auch, wie man ein Kontaktformular erstellt und wie man unsere Website responsiv gestaltet, damit sie auf allen Geräten nutzbar ist. Willst du den Arbeitsablauf lernen. Wenn ja, sehen wir uns in der ersten Vorlesung. 2. Was ist Webflow?: Bevor wir uns nun mit unserem Projekt befassen, lassen Sie uns darüber sprechen, was Webflow ist und was Sie damit machen können. Unser Workflow ist nicht gerade ein Page Builder, aber er ist auch nicht voll von Codierung wie Entwicklung. Wir werden keinen Code eingeben. Es ist eine sogenannte Notiz namens Tool. Was wir jetzt hochladen, ist der Designer, die Oberfläche von Webflow, um all unsere Stiländerungen vorzunehmen, und das Design und die visuelle Entwicklung unserer Seite mithilfe des sogenannten Style-Panels. Dieser hier. Wie Sie sehen können, haben wir Zugriff auf all diese verschiedenen Optionen. Wir können einen Typ, Hintergründe und ähnliches hinzufügen. Und damit können wir unsere Website visuell über Webflow aufbauen . Im Hintergrund wird für uns sehr sauberer HTML-, CSS- und JavaScript-Code angezeigt. Jetzt haben wir Zugriff auf diesen Code. Und wir können unsere Website auch als Code exportieren. Aber wenn du nicht willst, musst du diese Seite nicht berühren. Und das ist wirklich großartig an Webflow. So siehst du immer genau, woran du gerade arbeitest. Alles ist visuell, was perfekt für Designer ist. Und das ermöglicht es uns , so ziemlich jede Website zu erstellen. Aber wir wollen. Nun gibt es ein paar Dinge, die wir speziell mit diesem Flow machen können. Jetzt ist Webflow perfekt für einfache statische Websites wie diese, die wir in dieser Klasse erstellen werden. Wir können jedoch auch CMS-Websites erstellen, Content-Management-Systemen gesteuert die von Content-Management-Systemen gesteuert werden und dynamischer sind. Sie können auch Online-Shops sowie Mitgliedschaftswebsites erstellen . Wir haben also viele Möglichkeiten. Wir können eine Vielzahl verschiedener Websites erstellen. Und das alles, ohne eine einzige Seite Code zu schreiben , was perfekt ist. Das ist Webflow. Es ist ein Tool zur Entwicklung ohne Code, mit dem Sie Websites erstellen und entwickeln können , ohne Code schreiben zu müssen. 3. Kursprojekt: Ordnung, bevor wir uns mit Webflow befassen, schauen wir uns kurz an, was Sie lernen werden. In diesem Kurs werden wir also von Anfang bis Ende eine komplette Website erstellen. Jetzt lernen Sie, wie Sie diese Navigationen erstellen. Sie werden einen Blick auf unsere Typografiearbeit werfen. Sie werden also diese gesamte Website erstellen. Wir haben also ein dreispaltiges Layout. Wir haben also ein zweispaltiges Layout, was bedeutet, dass wir alle mit der sogenannten Grid-Komponente arbeiten werden. Sie werden lernen, wie Sie die Hover-Effekte für Schaltflächen erstellen. Sie werden diese komplexeren Preisabschnitte erstellen komplexeren Preisabschnitte und sogar erfahren, wie Sie ein funktionierendes Kontaktformular erstellen. Und am Ende werden Sie dieses Licht auch in Animationen hinzufügen Licht auch in Animationen verknüpfen die gesamte Website über unsere Links miteinander verknüpfen. Und genau das werden wir in dieser Klasse aufbauen. 4. Erstellen und Verwalten von Websites: Ordnung, sobald Sie Ihr Overflow-Konto erstellt haben und bereit sind, gehen Sie sicher, dass Sie zu Ihrem Dashboard gelangen, indem Sie einfach auf das Navigationselement des Dashboards klicken. Und jetzt müssen wir unser erstes Projekt erstellen. In Ihrem Dashboard haben Sie also genau hier eine Liste der Projekte , an denen Sie arbeiten. Jetzt können Sie sie in Ordner legen, um einen neuen Ordner zu erstellen Sie können hier auf diese Schaltfläche klicken. Auf diese Weise können Sie neue Ordner erstellen, um Ihre Dokumente ein bisschen besser zu organisieren. Um nun ein neues Dokument, eine neue Website, zu erstellen , klicken Sie einfach auf die Schaltfläche Neue Website. Wenn es nun darum geht, ein neues Projekt zu starten, haben wir verschiedene Möglichkeiten, dies zu tun. Jetzt verwende ich am liebsten einfach die Voreinstellung für leere Seiten. Es ist eine Website ohne jeglichen Inhalt, ohne Unterricht, nichts. Eine saubere Weste. Wir können bei Null anfangen wenn Sie einen Ausgangspunkt haben möchten, aber Flow bietet einige kostenlose Vorlagen an. Sie können Vorlagen aber auch auf dem Template-Marktplatz erwerben . Wer wird ein neues Projekt starten. Sie bewegen den Mauszeiger einfach über die Vorlage, die Sie auswählen möchten. In unserem Fall leeren Sie die Seite und klicken Sie auf Auswählen. Jetzt können wir ihm einen Namen geben. Nennen wir es einfach Skillshare-Projekt. Gefällt mir, und klicken Sie auf Site erstellen. Und einfach so, unsere Website ist, wurde erstellt. Und jetzt können wir anfangen, uns die Benutzeroberfläche anzusehen und zu erfahren, wie wir tatsächlich auf unseren Websites arbeiten. 5. Die Schnittstelle: Ordnung, nachdem wir unsere Website erstellt haben, lassen Sie uns einen kurzen Überblick über die Benutzeroberfläche oder den Webflow geben. Fangen wir jetzt genau hier auf der linken Seite an. Also hier oben haben wir diesen Arbeitsablauf, der lokale Tierarzt wechselt zum Burgermenü, wenn wir einen Vogel haben , der uns Zugriff auf unser Menü gewährt. Genau hier können wir also auf das Dashboard oder die Seiteneinstellungen zugreifen , z. B. wann immer Sie zu einer dieser Einstellungen zurückkehren müssen, verwenden Sie einfach das Menü hier oben. Und darunter haben wir eine Reihe verschiedener Menüs. Also haben wir zB das und ich kann ein Elementmenü hinzufügen. Und hier haben wir zum Beispiel Zugriff auf all die verschiedenen Elemente, aber wir können sie zu unserer Seite hinzufügen und sie zum Erstellen unserer Websites verwenden. Sie haben auch dieses Komponentenmenü. Sie haben Zugriff auf V Navigator, der uns die Seitenstruktur zeigt. Wann immer wir an unserem Projekt arbeiten, möchten wir, dass die Feed-Navigation immer geöffnet wird. Wenn es also nicht an der Seite befestigt ist, können Sie es an die Site anheften, indem Sie im Navigator auf dieses Symbol klicken, bis es so aussieht. Sie können die Größe auch ändern, wenn wir Mauszeiger über den Rand bewegen, so. Wenn Sie jetzt auf einem sehr kleinen Bildschirm arbeiten, können Sie ihn so schweben lassen. Stellen Sie sicher, dass Sie bei der Suche nach einem Element Struktur Ihrer Website überprüfen möchten Verwenden Sie dafür unbedingt den Navigator. Ich hefte es an den Navigator an. Du liebst es. Wir haben auch Zugriff auf unsere Seiten. diesem Menü können wir nun alle unsere Seiten verwalten und durchsuchen, aber wir haben auf unserer Website die Möglichkeit, neue Seiten zu erstellen Klicken Sie einfach darauf erstellen Sie eine neue Seitenschaltfläche hier oben. Sie können sie auch in Ordnern strukturieren , um sie besser zu organisieren. Und darunter haben wir kostenlose Icons. Eines ist das CMS-Menü, eines ist das V-Benutzermenü und ein V-E-Commerce-Menü. Und das wird verwendet , um mit einer dieser Optionen zu arbeiten. Wenn Sie also ein Content Management System wollen, also wenn Sie einen Blog erstellen, z. B. das CMS verwenden möchten. Wenn Sie Mitgliedschaftswebsites erstellen, benötigen Sie das Benutzermenü und so weiter. Nun, darunter haben wir das Assets-Menü, und dort laden wir alle unsere Bilder hoch, befinden sich unsere Symbole und solche Dinge. All das können Sie im Bedienfeld „Elemente“ verwalten. Und natürlich haben wir einige Einstellungen, die wir verwenden können. Das ist etwas, das uns momentan nicht wichtig ist. Lass uns das schließen. In Ordnung, lassen Sie uns jetzt zur Mitte übergehen. Wir haben diesen großen rechten Bereich. Hier bauen wir gerade unsere Seite, Besuche, unsere Website auf, es ist ein leeres Blatt. Noch ist nichts geehrt. Abgesehen vom Körperelement, das so ziemlich nur ein Halter für unsere Inhalte ist , für unsere Website. Hier oben haben wir ein paar Icons. Das sind also die Breakpoints. Auf diese Weise können wir zwischen Tablet-Modus, Enscape, mobiler oder mobiler Ansicht wechseln . Wir können die Standards auch verwenden, um zu entscheiden, ob die Größe geändert werden soll. Ich bin von der Leinwand verschwunden. Und anhand dieser Breakpoints können wir schnell überprüfen, wie etwas auf verschiedenen Bildschirmgrößen aussieht. Und es ist ein sehr modernes Web. Jeder hat einen anderen Monitor. Die meisten Leute schauen sich einige Websites mit Telefonen oder Tablets an. Daher müssen alle unsere Designs responsiv sein. Und wenn wir diese Breakpoints verwenden, um sicherzustellen , dass unsere Website funktioniert und gut aussieht, tatsächlich verschiedene Bildschirmgrößen. Jetzt, ganz rechts, haben wir unser Panel. Und hier können wir all die verschiedenen Stile anwenden und unsere Websites tatsächlich gut aussehen lassen. Dies verhält sich sehr ähnlich wie bei der Arbeit in Figma oder Photoshop. Und die Art und Weise, wie Sie die Eingangstopographie anpassen und solche Dinge. Jetzt haben wir hier oben noch ein paar Tabs. Wir haben also einige Elementeinstellungen, die sich je nach dem ausgewählten Element ändern. Wir haben einen Style Manager , der uns eine Liste aller verschiedenen Cluster zeigt , die wir in unserem Projekt verwenden. Und unsere Aktivität kann auch unser Produkt, unsere Website, von Stilen säubern , aber wir verwenden keine und Fett werden nicht verwendet. Wir können diese ganz einfach löschen , indem wir auf die Schaltfläche „Bereinigen“ klicken. Und dann auch das Interaktionsmenü, mit dem wir Interaktionen und Animationen für unsere Website erstellen können . Jetzt geht es um die Benutzeroberfläche. Es ist nicht zu viel. Es ist ganz einfach. Und wir sehen uns in der nächsten Vorlesung. 6. Benutzerdefinierte Schriftarten hinzufügen: Ordnung, bevor wir mit der Arbeit an unserem Website-Projekt beginnen , müssen wir ein paar Dinge tun. Zuallererst müssen wir unserem Projekt einige benutzerdefinierte Schriftarten hinzufügen, was wir in dieser Vorlesung tun werden. Fügen Sie nun neue Schriftarten zu Ihren Projekten hinzu. Oder Sie möchten nicht nur die bereits vorinstallierten Basisschriften und Webflow verwenden die bereits vorinstallierten Basisschriften . Das Hinzufügen neuer Schriftarten ist wirklich einfach und wir haben verschiedene Möglichkeiten, dies zu tun. Wir gehen zu unseren Seiteneinstellungen über. Wenn Sie also auf das Menüsymbol klicken und die Einstellungen der Website aufrufen. In diesen Seiteneinstellungen können Sie nun den Namen ändern, z. B. direkt hier in den allgemeinen Einstellungen. Und wir können ein Favicon und solche Sachen hinzufügen. Wenn hier viel mehr Optionen sind. Was uns momentan interessiert, ist der Schriftschritt. Also hier klicken Sie auf Schriftarten. Hier haben wir drei verschiedene Möglichkeiten, Webflow tatsächlich neue Schriftarten hinzuzufügen. Am einfachsten ist es zunächst, Google Fonts zu verwenden. Hier haben wir also eine große Liste verschiedener Schriftarten, zu denen wir problemlos zwei Workflows hinzufügen können, wir haben benutzerdefinierte Schriftarten. Wenn Sie also bereits eine Schrift auf Ihrem Computer installiert haben oder vielleicht möchten, möchten Sie Ihre eigenen Schriftarten verwenden , die Sie selbst erstellt haben. Sie können sie direkt hier hochladen. Und dann können wir auch unser Adobe-Konto mit dem API-Schlüssel und bei Adobe Fonts verbinden unser Adobe-Konto mit , wenn Sie möchten. Jetzt werden wir zwei verschiedene Schriftarten installieren. Eine wird Open Sans sein und eine wird Railway sein, was wir für Überschriften und solche Dinge verwenden werden. Die Kombination gefällt mir ziemlich gut. Gehen wir also zu Google Fonts. Sobald Sie auf dieses Drop-down-Menü klicken, können Sie mit der Eingabe des Namens Ihrer Schriftart beginnen , die Sie hinzufügen möchten. Geben wir Eisenbahn und suchen wir hier nach Eisenbahn. Genau hier ist es. Im Moment haben wir viele verschiedene Varianten, es gibt viele verschiedene Schriftstärken, aber wir können hinzufügen. Jetzt möchte ich das, was wir gefunden haben, hauptsächlich für Überschriften verwenden. Was ich also tun werde, ist, die 700 Dollar zu nehmen, was ein großes Gewicht ist. Ich werde für alle Fälle auch die reguläre Version behalten . Der Grund, warum Sie all dies nicht aktivieren möchten , besteht darin, es auf ein Minimum zu beschränken. Je mehr Schriftarten Sie auf Ihrer Website installiert haben , desto länger dauert das Laden. Wenn Sie also diejenigen auswählen, die wir tatsächlich benötigen wird Ihre Geschwindigkeit bei jeder Verlangsamung Ihrer Website erhöht . Also wählen wir unregelmäßig und 700. Und dann klicken wir einfach auf Schrift hinzufügen. Und einfach so haben wir den Eisenbahnfonds zu unserem Webflow-Projekt hinzugefügt. Jetzt wollen wir auch Open Sans und das biete ich an. Ich hab's. Sie können es auch über Google Fonts installieren. Um zu demonstrieren, wie wir benutzerdefinierte Schriftarten installieren, finden Sie diese in Ihren Projektdateien im Schriftenordner. Wir werden also unter benutzerdefinierten Schriftarten auf Hochladen klicken . Suchen Sie dann in Ihren Projektdateien nach den Schriftordnern. Und genau hier haben wir Open Sans Light und Dracula. Wählen Sie beide aus und klicken Sie auf Öffnen. Und jetzt, wie Sie sehen können, haben wir unsere beiden Schriftarten genau hier. Und wir müssen auf Schriftdatei hochladen oder beides klicken . Und einfach so haben wir Open Sans and Railroad auf unserer Website installiert . Wenn Sie zu unserem Designer zurückkehren, können wir das tun, indem Sie hier auf diesen lila Teil klicken. Und wählen wir einfach das Körperelement aus. Gehen Sie im USD Manager zu Ihren Topographieeinstellungen. Und hier oben können Sie die benutzerdefinierten Schriftarten sehen, die Open Sans sind. Wie Sie sehen können, haben wir, wenn wir es auswählen, eine Seuche und Normalität. Und wir haben hier auch Railway. Wir haben eine normale und mutige redaktionelle Website. Und so fügen Sie benutzerdefinierte Schriftarten für Ihr Projekt hinzu. 7. Den ersten Abschnitt erstellen - Mit Abschnitten und Containern arbeiten: Ordnung, also werden wir in den folgenden Lektionen unseren ersten Abschnitt erstellen , der diese nette und saubere Heldensektion sein wird. Wir werden das Abschnittselement b, r etwas auffüllen . Nun, zuerst lernen wir , wie man neue Elemente hinzufügt. Und wir werden auch über CSS-Klassen sprechen. Und dann fügen wir hier , diesen Absatz, einen Text wie diese Überschrift hinzu. Ich werde Ihnen zeigen, wie Sie diesen Absatz auch tatsächlich versenden können . Und genau das werden wir in dieser ersten Vorlesung behandeln. Wir werden das eigentliche Abschnittselement erstellen diesen Container erstellen. Und dann werden wir auch unsere gesamte Typografie hinzufügen. Dieser Abschnitt. Lassen Sie uns damit beginnen, dies in unserem Projekt zu bauen. Jetzt. Lassen Sie mich das zunächst ganz schnell löschen . In Ordnung, jetzt haben wir eine saubere Weste. Wir haben einen Cluster per Workflow erstellt, weil ich im vorherigen Video die UP-Einstellungen für Typografie gezeigt habe . Jetzt müssen wir zunächst etwas erschaffen. Sie müssen unserer Website mitteilen, welche Schriftarten verwendet werden sollen und welche Grundeinstellungen für die Schrift gelten. Wann immer wir ein neues Absatzelement hinzufügen, stellen Sie z. B. sicher, dass Sie Ihren Text ausgewählt haben. Und hier oben in dieser Stilauswahl können wir jetzt im ausgewählten Stil neue Klassen erstellen und auch die HTML-Tags bearbeiten. Nun HTML-Tags, z.B. du hast den Body alle Seiten Tag, bearbeite V und Tyre. Also alle Elemente auf dieser Website, auf allen Seiten, auf denen wir auf dieser Website handeln, haben alle die Tags Body, All Pages. Also z.B. wenn du sagst Wir wollen Open Sans, eine reguläre und eine Größe von 16 Pixeln auf allen Hauptseiten. Sie können hier einen Tierarzt machen und ein sauberes und konsistentes Tier haben . Eigentlich sind unser Projekt und unsere Klassen so ziemlich alle Stiländerungen , die wir an einem Objekt vornehmen, in einer Klasse gespeichert. Wenn Sie also z. B. einen Button erstellen und wir den Button zuweisen, gruppieren Sie ihn. Wenn es eine neuartige Schaltfläche aus unserem Elemente-Panel einfügt, können Sie diese Button-Klasse einfach zuweisen und es wird genauso aussehen. In Ordnung, genug geredet. Also klicken wir auf den Körper. Alle Seiten sind hier markiert. Und unter Schrift werde ich nicht Open Sans Font sein, die wir zuvor zu unserem Projekt hinzugefügt haben. Gehen Sie also zu benutzerdefinierten Schriftarten und klicken Sie auf Open Sans. Ich möchte eine normale Standardschriftstärke beibehalten. Ich möchte die Größe jedoch auf 16 Pixel erhöhen. So. Die Schriftfarbe ist vorerst in Ordnung, die graue Farbe. Eine Sache, die ich brauche, um die Schrifthöhe zu ändern. In diesem Fall arbeite ich nicht gerne mit Pixeln. Was ich tun werde, ist 1,5 e m einzugeben. Jetzt, wo wir EM-Einheiten verwenden, ist eine Einheit 16 Pixel, weil wir gesagt haben, dass unser Tag für alle Seiten eine Schriftgröße von 16 Pixeln hat. Aber ein m entspricht der Größe der Topographie, die Sie in Ihrem Körper angegeben haben. Tag für alle Seiten. Wir wollen , dass es eineinhalb von 16 Pixeln sind. Also 1,5 e M. Und jetzt haben wir eine gute, eine gute Schrifthöhe. Sein Text ist lesbar. Jetzt erstmal Tierärzte. Fügen wir nun unser erstes Element hinzu. Gehen Sie zum Plus-Symbol im Menü „Elemente“. Und unter Layout fügen wir unseren ersten Abschnitt hinzu, klicken Sie mit MPD darauf und ziehen Sie ihn auf Ihre Leinwand. Oder Sie können es auch direkt in den Navigator ziehen. Jetzt haben wir hier unseren ersten Abschnitt. Lassen Sie uns nun diesem Abschnitt eine Klasse geben. Das wäre jetzt unser Heldenbereich. Nennen wir es also Hero Section. Und um den Cluster zu erstellen, klicken Sie einfach auf Ihrer Tastatur auf Enter. So. Schauen wir uns nun kurz an welche Einstellungen wir diesem Heldenbereich geben möchten. also in diesem Projekt Wenn wir also in diesem Projekt den Heldenbereich ausgewählt haben, können Sie sehen, dass wir eine Polsterung von 150 haben wollen, sowohl oben als auch unten, damit wir viel Spielraum für unsere Inhalte haben . Wir fügen nass hinzu. Es ist wirklich einfach. Wir gehen zu unseren Abstandsoptionen im Seitenbereich, wobei dein Heldenbereich ausgewählt ist. Und dann können wir entweder auf das Polster klicken und ziehen. Wenn wir die Umschalttaste auf allen Seiten gedrückt halten, bekommen wir Polsterung. Und wenn Sie Alt Control oder Command Control gedrückt halten, können Sie das auf beide Seiten anwenden. Also wir oben und unten. Für links und rechts. Um nun einen Stil zu entfernen , den Sie erstellt haben, klicken Sie einfach auf den blauen Typ. Und dann kannst du auf Reset klicken. Sie können, wie Sie sehen, auch Alt-Taste drücken und auf einige Tastenkombinationen klicken. Halten Sie also die Alt-Taste gedrückt. Und so kann man das Styling von etwas entfernen. Wir können es auch eintippen. Also klicke auf die Zahlen. Also 150.150, so. Jetzt haben wir 150 Pixel, beide addieren sich sowohl oben als auch unten. Jetzt wollen wir keine Marge. Also habe ich das noch nicht erklärt. Padding ist also der Raum, der sich innerhalb des Elements befindet, und der Rand ist der V-Raum, aber wir geben ihn außerhalb der Elemente. Wenn Sie also etwas, den gesamten Abschnitt, ablegen möchten , können wir das tun, indem wir etwas Abstand hinzufügen. Okay, jetzt, eine wichtige Sache ist, dass wir einen Container hinzufügen wollen. Der Grund dafür ist nun, dass nicht alle Bildschirme FE haben und die gleiche Größe haben. Manche Leute haben also wirklich große Displays mit einer wirklich hohen Auflösung oder einen ultraleichten Monitor. Wir müssen unseren Inhalt eingrenzen und auf eine bestimmte Breite beschränken , damit wir ihn einschränken können . Und tatsächlich ist eine gut aussehende und zu tatsächlich zugängliche und lesbare Information gut strukturiert. Um nun einen Container hinzuzufügen, klicken Sie auf das Plus-Symbol und wir fügen V-Container-Element aus dem B-Layoutbereich hinzu. Und wir wollen die Lektüre so direkt in unseren Heldenbereich lenken. Wie Sie jetzt sehen können, haben wir die Polsterung angebracht, sodass unser Behälter gut in der Mitte sitzt. Und jetzt wollen wir es etwas vergrößern. Denn im Moment ist es eigentlich völlig leer und nichts. Es ist nicht wirklich da. Diese Grenze ist Vertrauen, das Webflow uns sagt, hey, da ist ein Container. Wir sehen es während der Bearbeitung. Gehen wir nun zum nebenstehenden Panel und geben ihm so eine maximale Breite von 1.340 Pixeln. Nun, warum verwenden wir Max-Width? Max-Breite bedeutet einfach, dass dies der größte Container ist , den der Container bekommen kann. Es kann schrumpfen. Wenn wir also zu einem anderen Breakpoint gehen, können Sie sehen, dass es wirklich gut skaliert. Es ist also responsiv. Wenn du das unregelmäßig gemacht hättest, aber es wäre nicht responsiv. Und wenn Sie ein paar SV kaufen würden, die Mindestbreite, würden sie einfach bis zu den Rändern skalieren, aber niemals unter diesen Punkt. Deshalb verwenden wir in einigen Fällen auch die maximale Breite und in einigen Fällen auch die Mindestbreite. Was wollen wir nun hinzufügen? Als Nächstes? Wir möchten eine Überschrift und einige Texte hinzufügen. Und wir wollen, dass das in der Mitte zentriert ist. Lassen Sie uns also etwas Topographie zu unserer Website hinzufügen. Klicken Sie auf das Plus-Symbol und suchen Sie nach den Topographieeinstellungen. Jetzt wollen wir eine Überschrift. Also klicken wir und navigieren direkt in unseren Container. Und hier haben wir, wie ihr seht, einige Optionen mit Pop-up wird dann direkt Veteran sein. Wir haben also H1 bis H6. Nun, das ist nur die, wie wichtig sind die Elemente? Jedes wird also das wichtigste Element sein. H2b, zweitwichtigster und so weiter. Da dies also unsere Heldenüberschrift ist, wird dies auf eins gesetzt. Und dann wollen wir auch einen Absatz hinzufügen. In Ordnung, neben der Überschrift befindet sich das Absatzelement. Klicken Sie einfach darauf und ziehen Sie es unter Ihre Überschrift in den Container. Und wie Sie sehen, füllt es sich immer mit Platzhaltertext , den wir behalten können. Du kannst damit arbeiten. Schauen wir uns nun unser Beispielprojekt an. Sie können sehen, das sieht ganz anders aus. Also müssen wir dieser Überschrift eine Klasse hinzufügen. Und wir müssen es auch stylen. Also müssen wir ihm eine andere Größe, eine andere Schrift, eine andere Schriftstärke geben. Und lass uns das machen. Fangen wir mit dem Tierarzt an. Sie wählen die Überschrift aus. Und zuallererst müssen wir ihm einen Kurs geben. Wenn wir bei geringfügigen Änderungen keine Klasse erstellen, erstellt Webflow automatisch eine Klasse für uns, was nützlich ist. Ist es jedoch nicht. Dadurch kann unsere Website nicht sehr sauber sein. Also z.B. wenn es eine Klasse namens Hauptüberschrift und wir den Tierarztunterricht später auf einer Seite wiederverwenden wollen , ist das einfach nein. Okay, das ist die Hauptüberschrift. Wir können diese Klasse auf diesen Text anwenden. Mit unserer Klasse für unsere Überschrift gehandelt. Zu Fall gebracht. Und 44. Und wir haben die Rail-Schriftfamilie genau hier installiert. Und wir wollen, dass die Rate fett und V-groß ist. Wir wollen bei 56 Pixeln sein. Und geben wir dem eine Schrifthöhe von 1,5 m So. Lassen Sie uns jetzt auch etwas Text geben. Also Webflow-Websites, die funktionieren, lassen Sie es uns eingeben. Wir können den Inhalt unserer Überschrift bearbeiten , indem wir einfach darauf doppelklicken. Und jetzt können wir den Text wie in Google Docs oder Harvard bearbeiten . Also Webflow, Websites, die wie verrückt funktionieren , und Tierärzte, unser Hauptkurs ist fertig. Schauen wir uns als Nächstes diesen Absatz an , diesen Hauptabsatz. Wie Sie sehen können, ist es kleiner erreicht nicht die Ränder unseres Containers, wie es die Überschrift tut. Und es ist auf 650 Pixel begrenzt, sodass es nicht größer werden kann. Lass uns das bauen. Wählen Sie Ihren Absatz aus. Gib ihm einen Kurs. Gehen wir also einfach zum Hauptabsatz über. Nennen wir es Hero-Paragraph. Wir wissen genau, wo es verwendet wird. Um das tatsächlich kleiner zu machen. Sie können zur maximalen Breite gehen und 650 Pixel eingeben. Wie Sie sehen können, schrumpft es. Nun, eine sehr offensichtliche Tatsache ist derzeit , dass dies nicht zentriert ist. Wenn Sie sich also unser Projekt hier ansehen, befindet sich dieser Text in der Mitte. Um das zu erreichen, wählen Sie einfach zuerst die Hauptüberschrift aus. Und zentrieren wir es, indem wir auf eine Linie klicken und zentrieren. Nun, das ist der einfache Teil. Der einzige Grund, warum das funktioniert, ist , dass die Hauptüberschrift den gesamten Platz bis zu den Rändern des Containers einnimmt den gesamten Platz bis . Wie du siehst. Das Gleiche gilt nicht für den Hero-Absatz, wenn Sie ihn darauf zentrieren würden , ist das etwas, was wir wollen. Es schiebt Ihr Absatzfeld nicht in die Mitte. Eine Möglichkeit, dies zu erreichen, besteht darin , zu unseren Margenoptionen überzugehen. Wenn Sie darauf klicken, können Sie sehen, dass wir diese Auto-Schaltfläche haben. Jetzt schiebt das Auto die Elemente einfach ganz zur Seite. Und wenn wir IN marginal für Auto verwenden, wird es perfekt in die Mitte unseres Containers geschoben . Einfach so. Nun, Tierärzte, VET für dieses Video. In der nächsten Vorlesung werden wir einige Bilder hinzufügen. Also werden wir dieses Hintergrundbild hinzufügen. Sie werden auch dieses dunkle Overlay hinzufügen. Und dann ändern wir sehr schnell und einfach die Farbe unserer Schrift. Diese weiße Farbe. Danach wirst du dir die Knöpfe ansehen. Beginnen wir zunächst mit dem Heldenbild. 8. Bilder optimieren und hochladen - Bilder zu deinem Hintergrund hinzufügen: Ordnung, als Nächstes fügen wir diesem Hintergrund ein V-Bild hinzu. Wir werden auch die Schriftfarbe auf Weiß ändern. Und wir geben das Hintergrundbild anstelle dunklen Überlagerung an, damit wir die Texte besser lesen können , um den Kontrast etwas zu erhöhen. Zuallererst, wenn es um Bilder im Web geht und Sie sie optimieren müssen, möchten wir, dass die Bilder so klein wie möglich sind. So reduzieren wir die Ladezeiten auf ein Minimum. Wie erreichen wir das nun? Bei Websites wie image compress our.com z. B. jetzt, über eine Vis-Website können wir unser Bild z. B. hier ablegen und dann wird eine Lastschrift komprimiert und die Dateigröße reduziert. In Ihren Übungsdateien finden Sie jetzt den Bildordner. Und hier stellvertretend das Heldenbild J Peg. Klicken Sie einfach darauf und ziehen Sie es in Optimismus. Und dann kannst du sehen, dass es unser Bild wie verrückt komprimiert. Wie Sie sehen können, wurden 55 Prozent der gesamten Daten entfernt . Also hat es die Größe im Grunde halbiert. Heruntergeladen. Ich habe diesen optimierten Ordner bereits und auf Ihrem Computer gespeichert. Als Nächstes fügen wir dieses Bild in den hinteren Teil unseres Heldenbereichs ein. Lassen Sie uns zunächst dieses Bild in unser Webflow-Projekt hochladen . Wie laden wir nun Bilder im Assets-Menü auf Webflow hoch? Öffnen Sie natürlich das Assets-Menü und klicken Sie auf dieses Upload-Symbol. Gehe zu deinem Bilderordner. Stellen Sie sicher, dass Sie die optimierte Version verwenden und laden Sie diese auf Webflow hoch. Nun, eine sehr wichtige Sache, das Webdesign ist, dass nicht jeder es sehen kann und einige, manche Leute verwenden Screenreader. Wenn sie also nicht sehen können, ob sie eine Sehbehinderung haben, lassen wir den Screenreader die Feed-Website für sie lesen. Also müssen wir diesem Bild, einigen Texten, eine kurze Beschreibung geben , was es ist. Nur damit einige Leute unsere Website wie alle anderen erleben können. Nennen wir diesen sauberen Schreibtisch mit einem Computer einfach einen Computer darauf. Ich denke schlecht. Nun, eine Sache, die wir auch tun möchten, ist, dass Sie zuerst das V Assets-Bedienfeld erweitern möchten. Wir haben hier mehr Optionen. Und wenn wir unser Heldenbild auswählen möchten , klicken Sie hier auf dieses Häkchen. Und dann klicken Sie auf Komprimieren. Dadurch wird unsere Dateigröße weiter reduziert indem wir sie in eine P.SIT-Datei umwandeln. Einfach so. Daran sollten wir uns nur gewöhnen , damit wir unsere Website so weit wie möglich optimieren können. Aber jetzt fügen wir dieses Bild zum Hintergrund unserer Helden-Sektion hinzu. Fügen Sie nun ein Bild als Heldenbereich hinzu, den Hintergrund. Wähle zunächst deinen Heldenbereich und scrolle dann in deinem Style-Manager ganz nach unten zu den Hintergründen. Jetzt können wir ihm hier eine Hintergrundfarbe geben, wenn Sie möchten. Lassen Sie uns diesen Stil entfernen. Sie können hier auf dieses Plus-Symbol klicken, Bild und Farbverlauf. Jetzt haben wir hier ein paar verschiedene Optionen. Wir können einige Bilder hinzufügen. Wir können ihm einen Farbverlauf, einen radialen Farbverlauf oder eine Volltonfarbe geben. Wir wollen das Bild. Jetzt. Wähle das V-Bild, das unser Heldenbild sein wird. Und dann wollen wir, dass es unter Größe den gesamten Abschnitt abdeckt , also so. Aber die Positionierung ist ein bisschen falsch. Also klicken wir jetzt hier auf den mittleren Punkt. Zentriert. Einfach so. Sie möchten auch das Tailing ausschalten. Wir wollen also nicht, wenn Sie es nicht haben, wenn das Bild nicht den gesamten Bereich ausfüllt und die Kachelung ausgeschaltet ist, es so aussieht. Beim Kacheln wiederholt es einfach das V-Bild. Unsere Tierärzte VET für das Hintergrundbild. Wir können jedoch auch auf die gleiche Weise ein Overlay hinzufügen. Klicken Sie also erneut auf das Plus-Symbol. Dieses Mal klicken wir auf Color Overlay. Jetzt können wir einfach in unseren Farbwähler gehen vielleicht die Opazität so ein bisschen auf 70 erhöhen. Und jetzt haben wir hier zwei Schichten. Wir können diese verschieben, genau wie das Ebenenfenster in Figma oder Photoshop. Sie möchten, dass sich die Farbüberlagerung wie folgt über dem Bild befindet. Jetzt haben wir das Bild, aber unser Text ist nicht lesbar, nicht wie hier. Wie ändern wir die erste Variable? Extrem einfacher Weg, das zu tun. Wählen Sie Ihren Container aus. Und unter Topographie und unter Farbe. Ändere es auf Weiß. Nun, warum blockiert dieser Block, diese beiden Stile? Nimm die Farbe aus dem Behälter. Also CSS, Cascading Stylesheets. Solange wir diese Farbe nicht überschreiben, wird der Farbwert aus dem Container, aus seinem übergeordneten Element, übernommen. So. Das kann uns viel Zeit sparen. Und ich würde empfehlen, dass Sie so arbeiten, wann immer Sie können. So können Sie Ihr Leben ein bisschen einfacher machen. Nun, das ist so ziemlich die Art, wie du deine Bilder hochlädst und optimierst. Wie Sie sie zum Hintergrund eines Abschnitts hinzufügen können. Und wir haben auch gelernt, wie man Di Tri macht und einfach schnell und sehr einfach liest. In der nächsten Vorlesung werden Sie nun diese beiden Knöpfe erstellen. Hier. Ich werde ihnen einige Animationen hinzufügen. Und wir werden auch sogenannte Kombinationsklassen verwenden , um mehrere Varianten eines einzelnen Objekts zu erstellen, wie diese solide Schaltfläche und diese Gliederungstaste. Das werden Sie in der nächsten Vorlesung eintauschen. 9. Ein Schaltflächen-Element erstellen: Ordnung, also in dieser Vorlesung werden wir diesen Button von Grund auf neu erstellen. Lass uns anfangen. In unserem Webflow-Projekt möchten Sie also eine Schaltfläche hinzufügen. Nun könnten wir gehen, ob die Elemente, aber ein schnellerer Weg, neue Elemente hinzuzufügen, wäre, einfach die V-Tastenkombination Strg E auf Ihrer Tastatur zu drücken. Und das öffnet diese Suchleiste. Und jetzt können wir einfach das V-Element eingeben , nach dem wir suchen möchten. In unserem Fall können Sie also einfach auf das Element klicken und es zu unserer Seite hinzufügen. Nun, je nachdem, welches Element Sie ausgewählt haben, es sich möglicherweise nicht im Container. Sie können es einfach in einen Container oder in einen Festplattenblock ziehen , indem Sie einfach den Navigator verwenden und es in den Container ziehen, wo Sie es haben möchten. Einfach so. Jetzt müssen wir diese Schaltfläche zentrieren. Wenn Sie etwas zentrieren oder Dinge ausrichten möchten. Als erstes sollten Sie sich das übergeordnete Element ansehen. Wir haben dieses Container-Element, aber es ist nicht so eingestellt, dass es alles zentriert. Wir haben all diese Elemente mit den jeweiligen Elementen selbst verschickt . also in diesem Absatz Wenn wir also in diesem Absatz den automatischen Rand und die Überschrift verwenden , verwenden wir die Ausrichtung in die Typografie. Lass uns etwas anderes für diesen Button machen. Wählen Sie also Ihren Container und den Veranstaltungsort aus, gehen Sie zur Typografie über und richten Sie ihn an der Mitte aus. Einfach so. Jetzt wird die gesamte Topographie in Ihrem Container zentriert. In Ordnung, lassen Sie uns den eigentlichen Button erstellen. Stellen Sie also sicher, dass Sie Ihre Schaltfläche auswählen. Zuallererst müssen wir ihm einen Kurs geben. Also nennen wir in unserer Stilauswahl diese Schaltfläche. Jetzt können wir den Text dieser Schaltfläche wie bei den anderen Topographietypen ändern den anderen Topographietypen indem wir einfach darauf doppelklicken. Und jetzt können wir unseren Text eingeben. Lass uns mit uns Kontakt aufnehmen. So. In Ordnung, also was wollen wir mit diesem Button? Wir wollen, dass die V-Typografie diese schwarze oder graue Farbe hat. Und die Schaltfläche selbst sollte eine weiße Farbe und einige Ecken haben , sodass ein Eckenradius darauf angewendet wird. Wählen Sie also die Schaltfläche und beginnen wir mit dem. Wir gehen zu unseren Typografie-Optionen und können jetzt alles so anpassen, wie wir es wollten. Wir könnten die Schrift ändern, wir könnten die Größe ändern. In unserem Fall möchten wir nur die Tastenfarbe ändern. Geben wir in das Textfeld Free, Free, Free ein. Und dadurch wird automatisch diese grauschwarze Farbe ausgewählt . Jetzt werden wir dies während des gesamten Projekts verwenden. Stellen Sie also sicher, dass Sie auf dieses Plus-Symbol klicken , damit wir unserer Website ein Muster hinzufügen können. Mit diesem Farbfeld können wir diese Farbe jetzt sehr einfach und sehr schnell auf so ziemlich alle Elemente anwenden . Und wenn Sie das Farbfeld selbst ändern, sich alle Farben, alle Elemente ändern sich alle Farben, alle Elemente , die schlechte Lichtfarben haben. Es ist also so ziemlich wie globale Farbmuster in Figma, wenn Sie damit vertraut sind. Eine wirklich wichtige Sache, die Sie beachten sollten, ist das Kontrastverhältnis hier. Im Moment haben wir ein sehr schlechtes Ergebnis. Also heißt es scheitern. Und Tierarzt meint nur, dass es kaum einen Kontrast zwischen dem Hintergrund und der Typografiefarbe gibt, aber wir können ihn nicht sehr gut erkennen. Das ist für uns kein Problem, da wir die Hintergrundfarbe auf Weiß ändern möchten . Gehen wir zu den Hintergründen. Und unsere Farbe. Ziehen Sie den Schieberegler bis zur B-Kante in der Ecke und machen Sie ihn weiß. Wenn Sie nun zu unserer Typografiefarbe zurückkehren, können Sie sehen, dass wir diese dreifache grüne Bewertung vor uns haben , aber das Verhältnis „be conscious“ ist wirklich, wirklich gut und extrem lesbar. Okay, jetzt haben wir den weißen Hintergrund und wir haben unsere Schriftfarbe geändert. Wie machen wir diese abgerundeten Ecken? Es ist ganz einfach, wenn die tiefe Taste ausgewählt zwei Gewässer aufgeschrieben wurden. Und hier können wir ihm einen Grenzradius geben. Jetzt können wir alle Ränder auf einmal so anpassen. Was wäre, wenn wir jedes einzeln anpassen wollten? Sie können auf dieses Symbol klicken. Und jetzt können wir alles, was wir gekauft haben, anpassen , je nachdem, was wir brauchen. Wir wollen alle uns einzeln gekauft haben, alle Flaschen gleichzeitig. Und lassen Sie uns einen Randradius von acht Pixeln verwenden. Eine weitere Sache, die ich ändern möchte, ist, dass Sie diesem Button einen Bonus für unseren Schwebeeffekt geben möchten . Wenn wir den Mauszeiger über die Schaltfläche bewegen, möchte ich den Hintergrund transparent machen und es dauert , bis er weiß wird. Aber das bedeutet, dass wir eine Umrandung der V-Taste benötigen. Um einen Rahmen, ein Element, hinzuzufügen, gehen Sie einfach zu Grenzen. Und hier haben wir fünf verschiedene Optionen. Wir können eine Grenze für alle Seiten festlegen, oder wir können sie individuell ändern. Geben wir diesen Optionen hier eine Breite von einem Pixel. Und stellen Sie sicher, dass Sie die Randfarbe auf Weiß ändern. So. Wenn wir nun eine Vorschau unseres Projekts mit diesem Symbol anzeigen, können Sie sehen, dass unsere Schaltfläche ziemlich gut aussieht. Vielleicht möchten wir die Polsterung an der Innenseite anpassen, also geben Sie ihr etwas mehr Luft zum Atmen. Wenn Sie jedoch den Mauszeiger über die Schaltfläche bewegen, zeigt uns nur die Cursoränderung , dass es sich um ein interaktives Element handelt. Wir wollen eine kleine Animation erstellen. Wir haben also dieses Feedback, das besagt, hey, du kannst auf dieses Element klicken. Lassen Sie uns zunächst die Polsterung anpassen. Wenn Sie jetzt Alt Control oder Command Control gedrückt halten, verwenden Sie einen Mac. Sie können beide gegnerischen Seiten wechseln. So. Lass uns mit 30 Pixeln beginnen. Und jetzt wollen wir einen Hover-State erstellen. Jetzt lassen sich Hover-Zustände ganz einfach erstellen, wenn unsere Button-Elemente in unserer Stilauswahl ausgewählt sind erstellen, wenn unsere Button-Elemente in unserer Stilauswahl ausgewählt Sie klicken auf diesen Dropdown-Pfeil. Und der Tierarzt gibt uns Zugang zu unseren Staaten. Obwohl wir auf Hover klicken. Dieses grüne Feld, so die Bildschirmtexte , ist, dass wir gerade den Hover-Status bearbeiten. Wenn Sie jetzt nach unten scrollen, nehmen wir die Änderungen vor. Für diese Animation, für diesen Schwebezustand, möchte ich also , dass der Text weiß und der Hintergrund transparent wird. Lassen Sie uns die Typografie und dann den Hintergrund ändern. Mach es einfach so transparent. Wie Sie nun sehen können, ändert sich der Text, wenn wir den Mauszeiger über das Element bewegen und das V-Bit-Muster wird transparent. Eine Sache, die Sie jetzt tun möchten, ist dass der Übergang etwas reibungsloser verläuft. Gerade jetzt. Es ist sofort. Es fühlt sich nicht sehr gut an, oder? Wir können uns das vorstellen, Hey, du kannst mit diesem Element interagieren. Es ist nicht die sauberste Art, das zu tun. Um dieser Schaltfläche nun einen Übergang zu geben, lassen Sie die D-Taste und stellen Sie sicher, dass Sie nur die Schaltflächenklasse und nicht den Hover-Status bearbeiten. Wenn Sie sich immer noch im Hover-Status befinden, klicken Sie in Ihrer Bundesstaatenauswahl einfach auf „Keines“. Wenn wir ganz nach unten zum Effektfenster scrollen. Seien Sie vorsichtig in diesem kleinen Abschnitt namens Transitions. Klicken Sie auf das Plus-Symbol. Und jetzt haben wir diese große Liste all der verschiedenen Übergänge, die wir bearbeiten können. Wir könnten die Hintergrundfarbe und die Typografiefarbe einzeln hinzufügen . Wenn wir jedoch im erweiterten Bereich ganz nach unten scrollen , haben wir alle Eigenschaften. Vet-Tarife, ein Übergang für jede einzelne Immobilienänderung, die wir vorgenommen haben. Jetzt können wir die Dauer ändern. Also lass uns mit 400 Millisekunden beginnen. Und wir könnten die Lockerung auch hier ändern. Ich möchte es so belassen. Belassen Sie es einfach auf der Standardeinstellung. Wenn wir nun eine Vorschau unseres Projekts anzeigen und unsere Übersichtsschaltfläche haben, können Sie sehen, dass es viel reibungsloser läuft. Es fühlt sich wirklich gut an. Und es fühlt sich tatsächlich wie ein echter Knopf an. Und so können Sie diese Knöpfe behandeln. In der nächsten Vorlesung lernen wir nun, wie man sogenannte Kombinationsklassen verwendet , um Variationen bestimmter Elemente zu erstellen. Wie Sie sehen können, haben wir diesen normalen Button genau hier. Daneben haben wir aber auch diese Schaltfläche, die wir skizziert haben, aber sie diese Schaltfläche, die wir wird zu einer festen Schaltfläche, wenn wir den Mauszeiger darüber bewegen. Und wie Sie in unserer Stilauswahl sehen können, haben wir Feedback Class, Invent, Combo Class Outline. Und ich werde dir in der nächsten Vorlesung zeigen wie wir Böses erschaffen können. 10. Kombi-Klassen - Erstellen Sie Variationen für verschiedene Elemente: Ordnung, in dieser Vorlesung werden wir über Kombikurse sprechen. Jetzt lernen wir, wie man Kombinationsklassen verwendet , indem wir diese zweite Button-Variante erstellen, die den Umriss hat und wann sie einfarbig wird. Lassen Sie uns es jetzt bauen. In unserem Webflow-Projekt. Sie können beginnen, indem Sie einfach eine Kopie dieses Schaltflächenelements erstellen . Also der Flip-Button hat mich hier ausgewählt, wir könnten reingehen und einfach mit der rechten Maustaste klicken und kopieren oder duplizieren. Sie können auch einfach Strg C und Control V drücken , um Objekte zu duplizieren, genau wie in anderer Software. Nun, bevor wir die Kombiklasse machen, möchte ich das ein wenig aufräumen , denn wie Sie sehen können, sind die Knöpfe zusammengedrückt. Aber in diesem Beispielprojekt , das ich hier habe, gibt es ein bisschen Abstand. Wie erreichen wir das nun? Meine bevorzugte Methode, um diesen Abstand herzustellen, besteht darin, einfach beide Schaltflächen in einen Festplattenblock zu wickeln und ihm dann mit Flexbox eine kleine Lücke zu geben . Nun, das klingt wirklich kompliziert, ist es aber nicht. Also lasst uns diesen Wrapper sehr schnell bauen. Gehen Sie zu Ihrem Elements-Tab und fügen Sie unserem Container einfach so einen Festplattenblock hinzu. Und wenn wir beide Schaltflächen in diesen steifen Block ziehen wollen , klicken Sie auf Ihre erste Schaltfläche und halten Sie sie gedrückt, ziehen Sie sie in den Festplattenblock und wiederholen Sie dann den Vorgang für die zweite Schaltfläche. Stellen Sie nun sicher, dass Sie diesen Def-Block auswählen. Und geben wir ihm eine Klasse namens Button Wrapper oder Hero, Hero Button Rapper. So. Wie schaffen wir nun diese Lücke zwischen den beiden Knöpfen? Unter Layout können Sie einfach auf Flex klicken, das ist das zweite Symbol. Und jetzt, wie Sie sehen, haben wir viel mehr Kontrolle über die Positionierung der Artikel. Gerade jetzt. Sie sind gegenüber V. gerechtfertigt. Fangen Sie mit dem Gummi an. Wenn Sie auf das V-Mittelsymbol klicken, können wir sie erneut zentrieren. Und um eine Lücke zwischen zwei Elementen zu schaffen. Sie können diesen Bereich direkt hier nutzen. Jep. Und dann in Spalten. Lass uns mit 18 Pixeln beginnen. Ja, ich finde das gut. In Ordnung, und jetzt haben wir den Gap Traded. Lassen Sie uns über Kombiklassen sprechen. Wählen Sie also die zweite Schaltfläche. Und was eine Kombinationsklasse ist, das ist so ziemlich, sie ermöglicht es uns, eine Variation von Klassen zu erstellen , die wir zuvor erstellt haben. Es wird an einer Schaltfläche fehlen, aber wir werden das Design und die Schaltfläche insgesamt nicht so dass sie mit geringfügigen Änderungen identisch ist. Wählen Sie also die Schaltfläche und gehen Sie zu Ihrer Stilauswahl. Und wie Sie sehen können, steht bereits neuer Kombinationsklassen-Typ, um eine neue Kombinationsklasse zu erstellen. In unserem Fall möchten wir es jetzt als skizziert bezeichnen, weil es sich um eine Gliederungsschaltfläche handelt. Ich wurde umrissen und klicke auf Trade Outline. Jetzt haben wir eine Schaltfläche mit der Kombinationsklassengliederung. Wenn wir nun eine Änderung an diesem Schaltflächenelement vornehmen, wird sie nur auf die Outline-Klasse angewendet. Diese Schaltfläche, diese Klasse bleibt davon unberührt. Das spart uns eine Menge Zeit, aber wir müssen nicht eine Reihe von Klassen duplizieren. Wir müssen es von Grund auf aufbauen. Es ist eine arabische, saubere Art , Abweichungen bestimmter Elemente zu lesen. In Ordnung, als Nächstes. Schauen wir uns das zunächst an. Dies ist der Gliederungsstatus aus der Hover-Animation. So wollen wir, dass es aussieht. Aber lassen Sie uns die Typografie so auf Weiß ändern. Und die Hintergrundfarbe ist so transparent. Wenn Sie es jetzt in der Vorschau anzeigen, können Sie sehen, dass wir zwei Arten von Schaltflächen haben. Eine ist die solide Schaltfläche, die zur Gliederung wechselt. Und eine ist die Gliederungsschaltfläche ohne Animation, denn unsere Animation ist die Gliederungsschaltfläche selbst. Lassen Sie uns das in diesen festen Zustand verwandeln. Die Bearbeitung über Hover-Zustände für Combo-Klassen funktioniert also genauso wie das vorherige Button-Element. Gehen Sie also in diesem Drop-down-Menü zum Hover. Und jetzt können wir den Hover-Status der skizzierten Kombinationsklasse bearbeiten . Also lass es uns aufzeichnen. Ändere die Typografie auf unsere graue Farbe und mache den Hintergrund zu 100 Prozent. So. In unserer Button-Klasse haben wir bereits eine Transition mitgeliefert, sodass wir hier nicht weiter arbeiten müssen. Sehen wir uns das in der Vorschau an. Und wie Sie sehen können, sich unsere Gliederungsschaltfläche in eine solide Schaltfläche. Und andersherum. Wenn die solide Taste. Auf diese Weise können Sie Kombinationsklassen verwenden, um Schaltflächen oder Absätze zu enthüllen. Enthalten Sie uns so ziemlich alles, wo Sie leichte Variationen zu einer bereits vorhandenen Klasse benötigen. 11. Arbeiten mit Grids: Ordnung, jetzt, wo wir unseren Heldenbereich fertiggestellt haben, bauen wir als Nächstes diesen Bereich für den kostenlosen Kolumnenservice auf. In dieser Vorlesung lernen wir, wie man die schriftliche Komponente verwendet , um dieses dreispaltige Layout zu erstellen. Und wir werden auch die VCE-Servicekarten mit Blöcken erstellen , denen unsere Inhalte gespeichert werden. Wir werden einige Symbole und eine Überschrift und etwas Absatztext hinzufügen . Du wirst dich in der nächsten Vorlesung um diesen animierten Link kümmern . In Ordnung, lasst uns anfangen, das zu bauen. in unserem Projekt Lassen Sie uns in unserem Projekt zunächst all das abschließen. Wenn wir also hier auf dieses Symbol klicken , können alle unsere offenen Bereiche geschlossen werden. nun, wenn der Körper ausgewählt ist, Verwenden Sie nun, wenn der Körper ausgewählt ist, die Tastenkombination Strg E. Öffnen Sie die Suchleiste und suchen Sie nach der Abschnittskomponente. Sie können einfach, sobald Sie es haben, wenn Sie es in der Suchleiste gefunden und es das einzige Element ist, einfach die Eingabetaste auf Ihrer Tastatur drücken und es wird automatisch hinzugefügt. Der Grund, warum wir den Körper auswählen möchten , ist, dass er einfach das Element ganz unten in unserem Navigator hinzufügt . So. Eine weitere Abkürzung, bei der es in Bezug auf die Geschwindigkeit wirklich hilfreich ist, ist Control. Enter wählt automatisch den Zustandswähler aus. Wenn Sie also ein Element ausgewählt haben, z. B. diesen Abschnitt hier, und Sie drücken die Strg-Eingabetaste. Sie können sofort den Stilwähler auswählen und nach Ihrer Klasse suchen. Da wir noch keine Abschnittsklasse haben , sollten wir diese erstellen und sie etwas auffüllen. Lassen Sie uns mit 100 oben und 100 unten beginnen. So. Wenn wir jetzt zu unserem Abschnitt zurückkehren, können wir sehen, dass es sich um einen weißen Bereich handelt. Und jetzt brauchen wir den Container für unseren Buchhalter. Steuern Sie also erneut E und suchen Sie nach den Container-Komponenten. Einfach schlecht. Drücken Sie die Eingabetaste, um den Stilwähler auszuwählen. Und dann können wir einfach die Containerklasse auswählen. In Ordnung, lassen Sie uns jetzt über Netze sprechen. Jetzt haben wir in unseren Elementen, Elementen , Panel-Layout diese Rasterkomponente. Klicken Sie einfach darauf und ziehen Sie es in Ihren Container. Und jetzt haben wir diesen Bereich genau hier. Und es ist auf dieser Seite zu sehen, dass Sie auch dieses neue Menü haben. Jetzt können wir hier unser Grid bearbeiten. Hier oben können wir die Abstände zwischen diesen Rastern ändern. Lassen Sie uns also die V-Lücke hier auf vielleicht 48 Pixel erhöhen . Ja, ich glaube, das gefällt mir. Da wir mit einem dreispaltigen Layout arbeiten werden, fügen wir eine oder mehrere Spalten hinzu. Drücken Sie einfach so auf das Plus-Symbol. Wir wollen nicht wachsen. Also lass es uns entfernen. Wenn Sie also den Mauszeiger über eine dieser Zeilen hier unten bewegen, können Sie sehen, dass wir dieses Müllsymbol haben. Klicken Sie einfach auf Entfernen. Wenn Sie fertig sind, klicken Sie hier auf Fertig. Und wir haben den Handel mit unserem Basisnetz abgeschlossen. Da wir nun einige Änderungen vorgenommen haben, können Sie sehen, dass der Workflow diese Klasse automatisch erstellt hat. Wenn Sie auf diesen Dropdown-Pfeil klicken, können Sie auf Klasse umbenennen klicken. Nennen wir das Service Grid. Gleich als Nächstes. Lasst uns unsere Herzen erschaffen. Wir werden einen von ihnen erstellen und ihn dann einfach zweimal kopieren und einfügen. Um nun einen solchen Service Cut zu erstellen, fügen Sie einfach einen Festplattenblock hinzu , der dann v cart selbst sein wird. Und nennen wir diesen Serviceblock. Nun, nennen wir diese Servicekarte. Benennen Sie Ihre Klassen immer. Jetzt brauchen wir etwas Abstand, also halte die Umschalttaste gedrückt und dann können wir die Polsterung an allen Seiten anpassen. Lassen Sie uns vorerst mit 31 Pixeln beginnen. Das können wir später immer noch anpassen. Geben Sie ihm eine weiße Hintergrundfarbe. Und wie Sie sehen können, haben wir diese Farbe auch auf der Außenseite mit Schlagschatten. Nun, das ist in Webflow wirklich einfach hinzuzufügen. In unserem Effektebereich seines Style-Panels haben wir Boxschatten. Klicken Sie auf Plus. Und hier haben wir all diese verschiedenen Optionen. Jetzt können wir die Unschärfe erhöhen, so. Es könnte auch die Entfernung vergrößern. Lass uns nach Pixeln suchen. Und wir können die Größe auch erhöhen, wenn wir wollen. Jetzt können wir unter Farbe die Farbe ändern. Lassen Sie uns also die Opazität etwas verringern, etwa zehn. Und jetzt haben wir diesen sehr einfachen Schlagschatten. Lassen Sie uns nun einige Inhalte hinzufügen. Aber wir wollen eine Ikone. Sie möchten also dieses Symbol, eine Überschrift und einen Absatz. Fangen wir mit dem D-Symbol an. nun nach dem Symbol in Ihren Elementfenstern Suchen Sie nun nach dem Symbol in Ihren Elementfenstern einfach nach dem Bild. Unter Medien haben wir das Bildelement. Klicken Sie darauf und ziehen Sie es in Ihr Schottland. Wie Sie sehen können, wird es etwas schwieriger. Was wir also tun werden, ziehen Sie es einfach so direkt in die Karte in unserem Navigator. Jetzt wollen wir auch eine Überschrift. Gehe erneut zu deinem Elemente-Panel und zerstöre die Überschrift unter dem Bild. Einfach so. Und dann wollen wir auch solche Absatztexte. Jetzt, im Moment, ist der gesamte Text weiß. Lassen Sie uns das ändern, indem wir auf unserer Servicekarte Typografie auswählen und unser Farbmuster , das wir zuvor gelesen haben. In Ordnung, jetzt brauchen wir unser Bild. Wir müssen unsere Icons hochladen. Gehen wir zum Bedienfeld „Assets“. Klicken Sie auf das V-Dateisymbol. Und in unseren Projektdateien und unseren Übungsdateien haben wir den Ordner des Symbols. Und hier haben wir all diese verschiedenen Icons. Treffen Sie einfach eine Auswahl und öffnen Sie alle. Wie Sie jetzt sehen können, haben wir unsere Icons einsatzbereit. Dies wird nun der Design-Serviceblock sein. Also klicken wir auf. Das. Es werden die Einstellungen für Elemente angezeigt. Und wenn sie sich ein Bild aussuchen können. Lass uns mit dem v Design Icon beginnen. Und einfach so haben wir unser Symbol hinzugefügt. Lassen Sie uns nun die Überschrift und den Absatz stylen. Wenn Sie sich dieses Projekt hier ansehen, haben Sie diese Service-Überschrift. Und die Schrift ist Eisenbahn und sie ist 28 Pixel groß. Wählen Sie die Überschrift aus und geben Sie ihr einen Klassennamen. Steuern, Enter und nennen Sie es Service. Überschrift. Ihre Typografie-Optionen. Und suchen Sie sofort, genau hier. Und 28 Pixel? Ja. So. Lassen Sie uns auch die Schrifthöhe auf 1,3 EM ändern. Ja, klingt gut. Lassen Sie uns auch den Text ändern, also doppelklicken Sie darauf. Und noch eine wirklich wichtige Sache zu Überschriften. Klicken Sie auf das Real und ändern Sie es in H2. H1-Überschrift ist immer, wir wollten ganz oben und dann kaskadiert sie nach unten. Also lass uns mit H2 gehen , um nichts zu überspringen. Lassen Sie uns auch ein bisschen von diesen Texten entfernen , das ist ein bisschen viel. Lassen Sie uns dann einige dieser Abstandsabstände zwischen diesen beiden Objekten etwas anpassen dieser Abstandsabstände . Wählen wir also die Serviceeinstellung aus. Dies kann sehen, dass dieser Rand von 20 Pixeln automatisch darauf angewendet wird. Setzen wir das auf Null. Und ich glaube, ich mag den Abstand zwischen diesen Objekten vorerst. Eine weitere Sache ist, dass wir diese Ecken bei diesen Servicekürzungen umgehen können . Wählen Sie Ihre Servicekarte aus und klicken Sie auf „Kaufen Sie uns“. Und für alle Ecken nur ein bisschen. Und jetzt wollen wir dem Servicetext eine Klasse geben Servicetext eine Klasse falls wir einige Anpassungen daran vornehmen. Es wird also in unsere Blöcke übersetzt. Und jetzt wählen wir die Servicekarte aus und duplizieren sie. Rechtsklick duplizieren und duplizieren. S kann sehen, dass der Abstand zwischen diesen Spalten genau derselbe ist. Und v, eine Sache, die wir jetzt tun müssen ist, dass wir die Symbole anpassen müssen. Das wird Entwicklung sein. Ändern Sie zunächst den Filmtitel und klicken Sie dann auf die Elementeinstellungen Ihres Symbols. Ersetzen Sie das Bild und verwenden Sie v development. Das spüre ich. Und wenn wir das V-Symbol veröffentlicht haben und es auch ändern, so. Nun, das war's für heute. In der nächsten Vorlesung werden wir uns ansehen, wie man mit Textlinks arbeitet und wie wir diese nette kleine Animation erstellen können. Wie Sie sehen können, bewegt sich der Link ein wenig nach oben, wenn wir den Mauszeiger über den Link bewegen. Das heißt, die Farbe ändert sich, wenn Sie diesen Hover-Status in der nächsten Vorlesung aufbauen werden. 12. Styling-Links: Okay, jetzt, da wir die grundlegenden Service Cuts und unser dreispaltiges Service-Grid erstellt haben die grundlegenden Service Cuts und , müssen wir nur noch diesen Link mit animierten Links hinzufügen. Wenn Sie also den Mauszeiger darüber bewegen, wird es heller und bewegt sich leicht nach oben, sodass wir den Hinweis erhalten, dass Sie dieses Element klicken und mit ihm interagieren können. In Ordnung, also fügen wir zuerst einen Link hinzu. Bevor wir den Link hinzufügen, wählen wir die Servicekarte aus und wir müssen sicherstellen, dass alle Elemente zentriert sind. Seien Sie auch Elemente, die wir hinzufügen werden. Der Filmservice wird unterbrochen. Der einfachste Weg, dies zu tun, besteht darin, es einfach in eine Flexbox umzuwandeln. Die wenigen Servicekarten ausgewählt, gehen Sie zu Ihren Layoutoptionen und klicken Sie auf Flex. Jetzt, wo es anfänglich das Layout kaputt macht, weil wir zuerst sagen müssen, Sie möchten nicht, dass es horizontal ist. Du willst, dass es vertikal ist, so. Und dann wollen wir es an der Mitte ausrichten, wodurch unsere Symbole so fixiert werden. Dadurch wird nur sichergestellt, dass, egal welches Element wir zu dieser Servicekarte hinzufügen, sie immer zentriert ist. In Ordnung, fügen wir die Texte hinzu und blinken sie. Eine der schnellsten Möglichkeiten, ein neues Element hinzuzufügen, ist diese Servicekarte, die Servicetexte auszuwählen. Erweiterte Suche nach dem Textlink. Und der Grund, warum wir den Servicetext zuerst ausgewählt haben , ist , dass das V-Element , das wir hinzufügen werden, nach unten verschoben wird. Das ausgewählte Element bleibt in unserer Servicekarte. Jetzt gibt es ein paar Dinge, die wir tun müssen. Zunächst einmal haben alle Links in Webflow dieses grundlegende Design, den blauen Text, den wir unterstreichen. Und eine Möglichkeit, es loszuwerden, besteht darin, das HTML-Tag selbst zu bearbeiten, genau wie wir es mit dem Body-Tag getan haben. Wählen Sie also Ihren Link aus, gehen Sie zu Ihrer Stilauswahl und wählen Sie das HTML-Tag Alle Links aus. Wenn wir jetzt nach unten scrollen, können wir den unterstrichenen Typografie-Abschnitt entfernen . Und wir wollen es auch auf unsere schwarze Farbe ändern. Jetzt haben wir diesen Link. Es ist nicht vom Absatztext zu unterscheiden. Das ist kein Problem. Wir werden uns sofort darum kümmern. Wählen Sie nun Ihren Link aus und lassen Sie uns dem eine Lektion geben. Nennen wir das serbische Slink. Und wir möchten dem eine Unterstreichung hinzufügen. Wenn Sie sich also dieses Projekt ansehen , das ich zuvor gebaut habe, haben Sie diesen schönen Hintergrund über, unter unserem Element. Jetzt könnten wir es einfach unterstreichen. Aber ich denke, das tun wir nicht. Es ist ein bisschen zu nah dran. Wer sind die eigentlichen Texte. gefällt mir nicht. Aber lassen Sie uns das entfernen. Und was wir tun werden, ist diesem Link einfach eine untere Grenze zu geben . Stellen Sie sicher, dass Sie in Ihren Flascheneinstellungen auf den unteren Rand klicken. Wenn David, von einem Pixel und auch einer Farbe von Schwarz. Einfach so. Jetzt haben wir auch den Basiswert. Lassen Sie uns den Text ändern. Du wirst mehr lernen. Als Nächstes wollen wir die Animation für diesen Link V-Hover-Effekt erstellen . Wenn Sie sich dieses Projekt ansehen, wie Sie sehen können, wenn wir den Mauszeiger über den Link bewegen, wird es etwas heller und es bewegt sich ein wenig nach oben. Lassen Sie uns das jetzt bauen. Gehen Sie zunächst in Ihrer Link-Klasse in Ihr Bundesland. Und lass uns zuerst die Farbe ändern. Typografie. Wählen Sie eine etwas hellere Farbe, vielleicht diese hier. Lassen Sie uns der Einfachheit halber auch ein Muster daraus machen. Wir können auch problemlos an unserer Grenze eingesetzt werden. Wenn Sie nun mit der Maus über eine Schaltfläche fahren, ändert sich die Farbe. Als Nächstes. Stellen wir sicher, dass es tatsächlich nach oben geht, wie es im Beispielprojekt der Fall war. Jetzt können wir das in unserem Schwebezustand tun. der Registerkarte Effekte haben wir 2D- und 3D-Transformationen. Hier können wir unser Objekt ein wenig bewegen. Wie Sie sehen können, können Sie die Y-Achse nach oben und unten bewegen, wenn Sie auf die Y-Achse klicken . Jetzt wollen wir nur noch ein bisschen Bewegung. Also sagen wir minus zwei Pixel, ein bisschen höher. Wenn wir nun den Mauszeiger über diesen Link bewegen, bewegt er sich um zwei Pixel nach oben. Lassen Sie uns das Ganze glatt machen, indem wir den Übergang hinzufügen. Gehen wir einfach mit allen Eigenschaften und 400 aus. Jetzt ist ein reibungsloser Übergang zu unserer Animation. Und es gibt uns, genau wie bei den Schaltflächen, einen visuellen Hinweis darauf, dass hey, Sie mit diesem Element interagieren können. Lassen Sie uns nun als Nächstes diesen Link kopieren und in diese Service Cuts einfügen. Wir könnten es kopieren und einfügen, einfach mit der rechten Maustaste auf Kopieren klicken und es dann einfach mit Control V einfügen Manchmal ist es ein bisschen knifflig, wenn damit nichts bezahlen können, bevor Sie mit der rechten Maustaste klicken. Aber wir kontrollieren, dass die Abkürzung immer funktioniert. Eine Möglichkeit, diesen Link hinzuzufügen , besteht darin, einfach eine neue SMS hinzuzufügen. Wenn wir ihm einfach den Klassenservice-Link geben. Das ist so. Und alle Eigenschaften werden in dieser Klasse übertragen. Also wir verlinken funktioniert genau so. Sie müssen nur Ihre Texte ändern. In Ordnung, und so erstellt man diese Links. Nun, wie verknüpfen wir eigentlich Dinge miteinander? Nun, das werden wir tun, sobald wir mit der Erstellung unserer Website fertig sind. Wenn Sie jedoch auf die Elementeinstellungen klicken, haben Sie viele verschiedene Optionen. Wir können eine URL hinzufügen. Wir können auf Seiten verlinken, Sie können zwei Abschnitte verlinken. Das werden wir am Ende des Baus unseres Projekts tun . 13. Erstellen eines 2-Säulen-Layouts mit Grids: Ordnung, also werden wir in dieser Vorlesung mit dem Aufbau unserer Feature-Sektionen beginnen. Wir beginnen mit diesem zweispaltigen Layout. Es ist ziemlich normal. Wir werden diese dunkle Variante unseres Abschnitts erstellen . Und dann erstellen Sie ein zweispaltiges Layout, eines mit einigen Texten und eines mit unserem Bild. Lass uns jetzt mit dem Bauen beginnen. In unserem Projekt. Wählen wir den Körper aus und fügen einen weiteren Abschnitt hinzu. Strg E, um die Suchleiste zu öffnen und unserer Website einen Abschnitt hinzuzufügen. Natürlich können wir mit Control Enter diesen Typwähler und die Abschnittsklasse auswählen, aber das haben wir bereits gemacht. Dieses Mal möchten wir nicht, dass dieser Abschnitt einen weißen Hintergrund hat. Du wolltest einen dunkleren Hintergrund haben. Lassen Sie uns also ein Kombinationsklassenformat erstellen. Wählen Sie Ihren Stilwähler und erstellen Sie einfach eine neue Comp-Klasse namens Dark. Und jetzt können wir sowohl die Topographie als auch die Hintergrundfarbe unseres Abschnitts ändern sowohl die Topographie als auch . Da wir einen dunklen Hintergrund erstellen werden, möchten wir den Kontrast so hoch wie möglich gestalten. Für unsere Typografie wird die Farbe weiß und unsere Hintergrundfarbe schwarz sein. Wir werden das Farbmuster verwenden , das wir zuvor erstellt haben. Ordnung, jetzt müssen wir in diesem Abschnitt natürlich unseren Container hinzufügen. Fügen wir einen Container hinzu und geben ihm die Containerklasse. Aber wie Sie sehen können, je mehr Abschnitte Sie erstellen, desto mehr Komponenten haben Sie fertig, um sie wiederzuverwenden, wie z. B. den B-Abschnitt, den Container, Links, Schaltflächen und all das Zeug. Als Nächstes müssen wir unser Grid hinzufügen. Sie haben ein zweispaltiges Layout und wir werden ein Raster verwenden, um dieses Layout zu erstellen. Suchen wir also nach dem Grid-Element und fügen es in unseren Container ein. Nun, wir wollen nicht, wir können das lassen, wir bekommen das Gleiche wie 16 Pixel. Wir wollen die zweite Zeile so entfernen. Lassen Sie uns die Klasse umbenennen, der für uns erstellte Workflow schlecht ist, nur um die Dinge zu organisieren. Sagen wir, wir rufen Read an. Als Nächstes wollen wir erstellen, wir wollen etwas Text hinzufügen. Wer? Unsere Sektion. Wenn wir nun einfach die Überschrift hinzufügen würden, fügen wir eine Überschrift hinzu. Und wir wollen auch einen Absatz. Wenn Sie also das Absatzelement hinzufügen, können Sie sehen, dass es zur zweiten Zeile springt, zur zweiten Spalte unseres Rasters. Was wir nun tun müssen, ist, unseren Inhalt in einen Festplattenblock zu packen . Also werden wir def block den Inhalt in einer Zeile unseres Rasters speichern . So wie wir es verwenden, dienen wir als Kartenformat. Lassen Sie uns die Überschrift v löschen, die wahrscheinlich koaguliert, und fügen Sie einen einfachen Div-Block hinzu. Geben wir ihm die Serviceklasse. Der nächste Rapper. Und innerhalb dieses Div-Blocks können wir sowohl unsere Überschrift als auch unseren Absatz hinzufügen. Und wie Sie sehen, wollen wir auch einen Knopf und eine Glocke haben. Fügen wir also auch die Schaltfläche hinzu. Nun, wir wollen nicht, dass das zentriert ist. Es nahm das es nimmt diesen Stil aus dem Container. Wenn Sie den Service Wrapper auswählen und ganz nach unten scrollen, ist der Stil, wie bei Orange, Hintergrund orange und Sie darauf klicken, können Sie sehen, woher der Wert kommt. Also nimmt es diesen Stil aus dem Container. Wir können das überschreiben, indem ihm einfach einen anderen Stil geben, einfach so. Richten Sie es nach links aus. Schauen wir uns als Nächstes an, ob dieser Button, unsere Klasse, einfach so ist. Und fangen wir auch an, an der Überschrift V zu arbeiten. Jetzt müssen wir zunächst eine Überschriftenklasse erstellen. Nennen wir das jetzt einfach Überschrift. Und jetzt geben wir ihm einen Kombikurs. Bevor wir ihr die Combo-Klasse geben, ändern wir die Schriftart dieser Überschrift in Eisenbahn. Ein Pol und zu EM in der Höhe, einfach so. Und was Sie als Nächstes tun werden, ist, dass wir ihm die Kombinationsklasse H2 geben. Nun, warum H2? Weil es die zweitwichtigste Art von Überschrift ist. Wir haben also das obere H1 und dann haben wir für jeden Abschnitt die H2-Überschrift. Und der Grund, warum wir die Kombinationsklasse zur Überschriftenklasse hinzugefügt haben , ist, dass wir jetzt einfach ihre Größe ändern und manipulieren können ihre Größe ändern und manipulieren ohne immer zurückkommen und die Schriftfarbe, die Schrift selbst, die Schriftstärke und solche Dinge ändern zu müssen. Schauen wir uns nun die Einstellung an, die ich hier habe. Also acht Pixel, ein Punkt auf EM. Du kannst es so lassen wie es ist. Ändern wir das Textbüro, indem wir darauf doppelklicken. So etwas. Und dann lass uns, wenn dieser Absatz eine Klasse ist, habe ich ein Diagramm. Und wir möchten, dass dies eine festgelegte Größe von 650 Pixeln ist. Jetzt paragraphieren wir die Klasse selbst. Wir können es so lassen, wie es ist, weil es Informationen aus dem Körper nimmt, allen Seiten. Nun, geben wir dem eine Kombinationsklasse von 650 Pixeln. Und wenn diese Kombinationsklasse ausgewählt ist, können wir die maximale Breite von 650 Pixeln erreichen. Und jetzt wird immer eine maximale Breite von 650 Pixeln eingestellt. Lassen Sie uns nun als Nächstes den Schaltflächentext ändern , um Kontakt aufzunehmen. So. Wenn wir uns unser Projekt ansehen, können Sie sehen, dass wir auch diesen Image-Rapper haben. Obwohl. Wählen wir V2 namens Grit aus. Bei einer negativen Ableitung springt blog automatisch zur zweiten Spalte. Und das wird unser Image festigen. Nennen wir es Image Rabaa. Und in dieses Bildelement werden wir das Bildelement v einfügen. Verwenden wir jetzt einfach das Heldenbild, das wir zuvor hochgeladen haben. Ich wähle es einfach aus und jetzt haben wir ein einfaches zweispaltiges Layout. Wir haben also unseren Text auf der linken Seite und ein Bild auf der rechten Seite. Was ich tun möchte, ist, diesen Text ein wenig nach unten zu verschieben. Nur damit es ein bisschen interessanter ist. Wir bedienen den ausgewählten Tax Trapper. Gehen Sie zu Ihrem Polster und drücken Sie es einfach ein wenig nach unten. Also, lass uns mit 38 Pixeln beginnen. Und ich möchte auch den Abstand zwischen diesen Elementen vergrößern und etwas ändern. Eine Möglichkeit, dies zu tun , besteht darin, die Überschrift direkt auf das VI-Absatzelement anzuwenden . Immer wenn wir die Absatzklasse oder die Kombinationsklasse für Absatz mit 650 Pixeln verwenden , wird auch der Abstand oder der Rand berücksichtigt. Was wir also tun werden ist, einen weiteren Festplattenblock hinzuzufügen. Und wir werden unseren Absatz innerhalb dieses Div-Blocks verfolgen . Jetzt hat sich nichts geändert. Wir tun uns schwer, indem wir den Absatz einfach umschließen , ohne mehr Abstand zwischen den Elementen zu nehmen. Was wir jetzt tun werden, ist etwas Spielraum hinzuzufügen, um taub zu sein. Sagen wir, als ob wir oben Pixel mieten würden. Und lass uns sehen. Lassen Sie uns mit 28 Pixeln am unteren Rand beginnen. Der Grund, warum wir das in eine schwierige Angelegenheit packen , ist, dass wir jetzt eine sehr zerstörungsfreie Art haben , diese Ränder zu schreiben. Lassen Sie uns nun den Klassennamen dieses Def-Blocks ändern. Leere Maustaste auf das Drop-down-Menü, benenne es um und nenne es Margin. Wir haben 20 Pixel oben, also strahlen oben und unten. Nun, der Grund, warum eine Betonung, also wenn sie im Navigator landet, kann man sofort sehen, okay, diese unterschiedlichen Gaben, starker Spielraum. Unsere Elemente. In Ordnung, jetzt haben wir diesen Basisbereich gehandelt. Und wie Sie sehen können, wenn wir zu unserem Vorschauprojekt gehen , das ich erstellt habe, haben Sie zwei weitere dieser Abschnitte. Eines wird genau dasselbe sein und das andere wird umgedreht. Und die Text- und Hintergrundfarbe werden ebenfalls umgekehrt. Lass uns das ganz schnell bauen. Sie können den V-Abschnitt einfach kopieren und einfügen. Also Steuerung Z-Abschnitt ausgewählt und Strg V, um ihn einzufügen. Eine sehr schnelle Möglichkeit, einfach den Abschnitt zu wechseln. Also lass uns einfach die Dunkelheit entfernen. Nun, wie Sie sehen können, haben wir jedoch einige Dinge. Diese Elemente haben die richtige Farbe. Sie nehmen die aus dem Container. Eine schnelle Lösung dafür wäre, einfach den Service Tax Trapper zu nehmen, zur Farbe zu gehen und den Text hier ändern und ihn in unser schwarzes Farbfeld zu ändern. Jetzt werden die Informationen nicht aus dem Container, sondern aus unserem Service Tax Wrapper übernommen. Eine Sache, die wir jetzt ändern müssen, ist der Button. Wir müssen eine neue Kombinationsklasse für eine dunklere Schaltfläche erstellen , wobei die Schaltfläche in der Kombinationsklasse ausgewählt ist. Okay. Und jetzt können wir einfach die Farben des roten Buttons ändern. Wir möchten, dass der Text weiß und der Hintergrund der Schaltfläche unser Grau ist. Und natürlich müssen wir auch den Hover-Effekt ändern. Klicken Sie auf das Drop-down-Menü. Schwebeereignis in den Staaten. Wir wollen auch Typografie verwenden. Der Beinhintergrund sollte transparent sein. Und wir haben ein Testament gekauft, das schwarz ist. Schauen wir uns das jetzt an. Sieht ziemlich gut aus, aber ich denke, wir müssen das ändern, ja, wir müssen auch die Randfarbe der dunklen Kombiklasse auf Plague ändern . Perfekt. Jetzt haben wir ein Laufmuster für diesen Abschnitt. Und eine schnelle Möglichkeit, ja, und deshalb müssen Sie wirklich vorsichtig sein, wenn es darum geht, diese Klassen zu ändern. Wie Sie sehen können, sieht dieser Abschnitt wirklich gut aus. Ich lasse das hier drin, damit du siehst, worauf du achten musst, wenn du V erstellst. Und du nimmst die Stiländerungen mit class vor, weil ich den Vorgang beende und du viele Sachen kaputt machen kannst. Wie Sie sehen können, hat sich auch die Schriftfarbe geändert. Es ist also nicht so, dass es keine weißen Texte mehr gibt, weil wir diese Textzusammenfassung anbieten. Was wir in diesen beiden Abschnitten verwendet haben, wurde geändert. Also die Klasse selbst, hast du die Farbänderungen an der V-Klasse selbst vorgenommen? Eine schnelle Lösung hierfür wäre, einfach eine Kombinationsklasse hinzuzufügen und sie weiß zu nennen. Dafür gibt es jetzt elegantere Lösungen. Aber das ist nur eine schnelle Möglichkeit, das zu beheben. also mit der klassenweiten Kombination Lassen Sie uns also mit der klassenweiten Kombination die Typografie wieder auf Weiß ändern. Und wie Sie sehen können, ist es jetzt behoben. Dies sind nur einige der kleinen Dinge, nach denen Sie suchen müssen. Und sei dir einfach bewusst, was du tust und welche Klasse du bearbeitest. In Ordnung? Aber wir wollen das Bild und den Text umdrehen. Ja, nichts ist einfacher als das. Hallo an dich und Navigator. Und klicken Sie einfach auf Ihr Bild und ziehen Sie es auf den Service-Wrapper einfach so die Orte zu wechseln. Und jetzt wollen wir auch einen dritten Abschnitt des Veröffentlichungsbereichs haben . Wir werden einfach den dunkleren Bereich kopieren und einfügen und ihn unten einfügen. Ein neuer weißer Abschnitt. Das wird sowieso dasselbe sein. Jetzt haben wir diese freien Requisiten , die sie Sektionen nennen. Lassen Sie uns den Inhalt sehr schnell anpassen. Lassen Sie uns also an einer schnellen Entwicklung interessiert sein. Und das wird schnell veröffentlicht. Einfach so. Wir werden die Bilder später ändern. Wenn wir weitere Bilder hinzufügen und einige weitere Bilder optimiert haben, können sie verschwinden und das Gleiche gilt vorerst. Nun, das war's für diese Vorlesung. Und wir sehen uns im nächsten. 14. Komplexe Layouts – Erstellen eines Preisabschnitts: Ordnung, jetzt, wo wir unsere Feature-Abschnitte fertiggestellt haben , erstellen wir ein komplexeres Layout. Wir werden einen kostenlosen Abschnitt mit den Preisen für Kolumnen erstellen. Um loszulegen, richten Sie erneut Ihr Körperelement und erstellen Sie einen neuen Abschnitt. Wir werden es auf die schnelle Art mit unserer Tastenkombination Control machen . Auf der Suche nach dem Spektrum. Und wenn Sie Control verwenden, geben Sie die Suche nach unserer Abschnittsklasse ein. Wir werden die Lite-Version davon verwenden. Wenn Sie erneut E drücken, suchen Sie nach Ihrem Container und wenden Sie das Clustering schnell an. Wie Sie nun sehen können, ob Sie diese Cluster vorbereitet haben und ob Sie die Tastenkombinationen kennen. Das Erstellen des Basis-Layouts ist unglaublich schnell. In Ordnung, nächste App, und wir wollen ein kostenloses Spaltenraster. Jetzt haben wir schon einen, und wir könnten diesen tatsächlich gebrauchen. Es ist also die Service Grid-Klasse. Gehen wir zu unserem Container und suchen wir nach einem Grid. Klicken Sie hier einfach auf Fertig. Wir haben also Zugriff auf unseren Style-Selektor. Und unsere Gruppe wird Service Grid genannt. Also schauen wir uns das hier an, dieses Service-Grid. Und einfach so haben wir ein kostenloses Säulenraster. In Ordnung, als Nächstes, wenn Sie die V-Karte selbst erstellen möchten. Also der Hintergrund für unseren Preisbereich oder den Container dafür. Fügen wir einen Block hinzu und drücken Sie die Eingabetaste, um den Stilwähler auszuwählen. Geben Sie ihm den Namen der Preiskarte. So. Lassen Sie uns als Nächstes mit ein wenig beginnen , bevor wir einige Inhalte hinzufügen. Nun, lass uns runtergehen und Typografie hinzufügen. Wir wollen, dass es immer schwarz ist. Das könnten wir. Machen wir die Topographie des Abwurfs zu unserer schwarzen Farbe. Und der Hintergrund wird einfach so einfarbig weiß sein. Nun, als Nächstes möchte ich diese Preiskarte strukturieren. Schauen wir uns nun dieses Beispielprojekt hier an. Du wirst es nicht genau so bauen. Deshalb möchte ich einen kleinen Titel für unsere Preiskarte sowie einen Untertitel haben. Dann will ich ja, zuerst müssen wir wissen, wie viel es tatsächlich ist. Also werden wir dieses Preisniveau und v pro Monat oder pro Jahr festlegen, abhängig von Ihrem Anwendungsfall. Und all diese sind in verschiedene Differenzblöcke gepackt , sodass wir sie ein bisschen besser ausrichten können. Wir wollen einen Button und wir wollen auch diese Liste hier haben. Jetzt werden wir alles außer der Liste erstellen. Die Liste wird das nächste Video sein. In Ordnung, fangen wir damit an. Füge unser Div hinzu. Stellen wir zunächst sicher, dass es sich um eine Flexbox handelt. Scrollen Sie nun ganz nach oben zum Layout und unter Display. Stellen Sie sicher, dass es sich um eine Flexbox handelt. Die Ausrichtung, die ich so ausrichten möchte , dass sie mittig ist, würde gut aussehen. Und dann wollen wir es auch nach oben ausrichten. Also nach oben ausgerichtet und gegenüber vCenter gerechtfertigt. Wir werden herumspielen, ob die Mitte bei der rechten Ausrichtung besser aussieht , die linke Ausrichtung besser aussieht. Du kannst damit herumspielen. Ordnung, wenn wir jetzt also eine flexible Preiskarte haben In Ordnung, wenn wir jetzt also eine flexible Preiskarte haben, haben wir die Ausrichtungsoptionen bereit. Aber zuerst ändern wir es auf zwei vertikale. Das war mein Fehler. Stellen Sie sicher, dass es auf vertikal eingestellt ist, die Linie in der Mitte liegt und dass die Ausrichtung oben ist. In Ordnung, jetzt möchte ich einen Titel und einen Untertitel haben. Ich werde beide in einen Festplattenblock packen. Suchen wir nach einem einfachen Def-Block und geben ihm den Namen Pricing. Bevor wir weitermachen, sollten wir auch dieser Preiskarte einen Schlagschatten geben. Nur damit wir tatsächlich sehen können, woran wir arbeiten. Vielleicht so etwas. Abstand bis unter 15, Größe 5,0, Opazitätswert 0,15 in V. In Ordnung, jetzt haben wir unseren Pricing Header. bei Nässe stärker drücken, möchten Sie etikettieren. Einer wird der Name und der andere der Untertitel sein. Ich werde es jetzt erstellen, indem ich ein Überschriftenelement für den Titel der Preiskarte verwende . Ich werde es auf drei Jahre einstellen. Und wir werden noch ein bisschen Text hinzufügen, nachdem wir mit dem Erstellen des Abschnitts mit den tatsächlichen Preisen fertig sind. Für die Klasse dieser Überschrift verwenden Sie nun die grundlegende Überschriftenklasse V. Ich wette, du wirst eine neue Kombinationsklasse namens h three erstellen . Lass uns jetzt mit ein bisschen stylen, es ein bisschen größer machen. Vielleicht scheinen acht Pixel in Ordnung zu sein. Und wir werden ihr den Namen Brauerei geben. Einfach so. Wählen Sie als Nächstes die Preisgestaltung aus. Sie werden nach einem einfachen Textblockelement suchen , diesem hier. Und stellen Sie sicher, dass Sie es in der Überschrift V Pricing platzieren. Nennen wir das einfach. Tippe einfach ein. Auch perfekt. Perfekt für Anfänger, so etwas. Und geben Sie ihm auch die Preisklasse. Untertitel. Etwas in dieser Richtung. Erhöhen Sie die Größe auf etwa 18 Pixel. Und wir können es bei Open Sans belassen , nur um es ein bisschen anders zu machen. Wir Überschriftenelement. Ich mag den Abstand zwischen diesen beiden nicht. Was wir also tun werden, ist, zu unserem Abstand zu gehen und den Abstandswert zu entfernen. Stattdessen setzen wir die Marge, den unteren Rand auf Null. Lassen Sie uns überlegen, dass es jetzt ein bisschen näher beieinander liegt. Was wir jetzt auch sehen können, ist, dass auf dieser Preiskarte keine Polsterung angebracht ist. Wählen Sie also Ihre Preiskarte und gehen Sie zu Ihren Polsterungsoptionen. Halten Sie die Umschalttaste gedrückt und wenden Sie eine Form von Polsterung wie 18 auf allen Seiten an. Vielleicht können wir später damit herumspielen. Ordnung, und jetzt haben wir den Pricing Header so gut wie fertig. Lassen Sie uns das als Nächstes erstellen. Der Preis selbst. Also nochmal, die Preiskarte für die Vorlesung und ein Festplattenblock dazu, einfach so. Und dieses Mal nennen wir es v def blog. Einfach Preis oder Preisschild. Nun, lassen Sie uns das zu einem Preis behalten. Das wird unser Festplattenblock sein. Und die Herde umkehren. Wir wollen einen Textblock und ein weiteres Textfeld. Lassen Sie uns also C und Control V steuern, um uns zwei Textblöcke hinzuzufügen. Nehmen wir nun an, der Grundpreis wird drei betragen. Und das wird was auch immer sein. Es ist für immer kostenlos. Geben wir diesem Textblock nun eine Klasse wie Beside-Selektor. Und nennen wir das Preisschild so. Wir geben ihm die V-Eisenbahnschrift. Auch hier nur für eine kleine Abwechslung. Ich will die mutige Version. Und außerdem vielleicht 32, vielleicht sogar 36. Ja, das sieht besser aus. Und stellen Sie sicher, dass es 1,2 E m sind, denn die Höhe scheint in Ordnung zu sein. Nun, das zweite Lehrbuch, wir werden dieses hier sein, das sagt pro Monat oder pro Jahr, je nachdem, was Sie wollen. Nennen wir das also steigende Zeit. Ja. Zeit für die Preisgestaltung. Solange Sie wissen, womit Sie arbeiten, weiß es Ihr Team. Es ist in Ordnung, solange Sie genau wissen, wofür jede Klasse steht. In Ordnung, lassen Sie uns das bei Open Sans belassen. Vielleicht mach es ein bisschen größer, etwa 18 Pixel. Und 1.3 EM scheint in Ordnung zu sein. Eine Sache, die mir daran momentan nicht gefällt, ist, dass wir keinen Abstand zwischen der Kopfzeile und dem Preisschild selbst haben . Wählen Sie also Ihre Preisüberschrift und wenden Sie so eine untere Marge darauf an. 28 scheint völlig in Ordnung zu sein. Jetzt haben wir den Namen unserer Preiskarte. Wir legen den Preis fest und wollen ihm jetzt eine einfache Schaltfläche hinzufügen. Und das ist im Grunde genommen einfach die Preiskarte auswählen beim Tierarzt nach dem Button-Element suchen. Und wenn wir unsere Button-Klasse hinzufügen, stellen Sie sicher, dass sie das ist, was besser aussieht. Wir könnten uns für die dunkle Version oder die Gliederung entscheiden. Lass uns mit der dunklen Version gehen und alles lernen. So. Jetzt müssen wir natürlich ein wenig Abstand zwischen diesen beiden Elementen hinzufügen . Sie können dem V-Preiselement eine gewisse untere Marge zuweisen. Das ist flexibel. Vielleicht ein bisschen weniger, wenn oben 24 Pixel. In Ordnung, jetzt haben wir so ziemlich alles erledigt. Das einzige, was wir mit der Preiskarte tun müssen mit der Preiskarte tun müssen ist eine Liste der Funktionen, die diese Preiskategorie bietet. Und genau das werden wir in der nächsten Vorlesung tun. 15. Arbeiten mit Listen - Ungeordnete und geordnete Listen: Ordnung, um unseren Preisbereich abzuschließen, müssen wir dieser Preisliste eine kleine Liste von Funktionen hinzufügen . Nun, in Webflow, haben wir zum Webdesign im Allgemeinen zwei Arten von Listen, geordnete Listen und ungeordnete Listen. Schauen wir uns nun beide an. Öffnen Sie also Ihre Suchleiste und geben Sie einfach die Liste ein. Und das gibt Ihnen Zugriff auf V-Listenelement Ihrer Preiskarte. Wie Sie sehen können, haben wir diese Stichpunkte. Und hier können wir doppelklicken und einige Inhalte eingeben. Nun allerdings einige weitere Optionen, natürlich in den Listeneinstellungen. Wenn Sie hier auf dieses Rad klicken , haben Sie einige Optionen. Wir haben also zwei Arten von Listen. Wir haben eine ungeordnete D-Liste, die die Liste der Aufzählungspunkte ist. Und dann haben wir auch die bestellte Liste, die einfach 1-3 runter geht und so weiter. Und wir haben auch die Möglichkeit, die Kugel vollständig zu entfernen. Wenn du nur eine Liste willst. Wir brauchen keine Aufzählungspunkte oder Zahlen an der Seite. Wir können es auf diese Weise entfernen. In unserem Fall möchten wir nun eine ungeordnete Liste erstellen. Und wenn wir darauf doppelklicken, geben wir uns einfach gegenseitig als Platzhalter ein. Jetzt können wir einfach zu jedem Punkt passen , so. Und um diese Listenelemente zu gestalten, haben wir verschiedene Möglichkeiten, dies zu tun. Also bei der Wahl in unserem Bundesstaat kann er evakuieren, wir können eine neue Klasse für die Listeneinträge erstellen. Was noch einfacher ist, wir können zum HTML-Tag gehen, alle Listenelemente. Und jetzt können wir die Anpassungen vornehmen, wie wir sie benötigen. Und wie Sie sehen können, ändert sich jeder einzelne Listenpunkt auf unserer Website entsprechend den Änderungen, die wir vornehmen. Nehmen wir an, wir wollen, dass das 18 Pixel sind. Und ich denke das D, den Rest können wir gleich lassen. Einfach so. Ja. Was ich jedoch tun möchte, ist, dass dies zentriert ist. Ich möchte also, dass es perfekt in der Mitte ist, wie Sie gerade sehen können. Es ist ein bisschen falsch nach rechts. Und das liegt daran, dass auf das Listenelement ein Basisabstand von 40 angewendet wird. Lassen Sie uns die Polsterung entfernen und sie auf Null setzen. Wie Sie sehen können, hat Webflow unsere Matrix-V-Klasse erstellt , die unsere Liste perfekt zentriert hat. Jetzt nimmt ein Tierarzt die Stichpunkte nicht mit auf. Vielleicht müssen wir es reinschieben, mussten es nur ziemlich genau unter die Lupe nehmen. So etwas, etwa zehn. Das sieht für mich ziemlich zentriert aus. Außerdem wollen wir ihm einen gewissen Spielraum geben , um ihn ein wenig von der Schaltfläche zu trennen. Vielleicht 24. Und einfach so haben wir diese sehr einfache Preiskarte erstellt. Wenn Sie jetzt mehr Listenelemente haben möchten, können Sie einfach ein Listenelement kopieren und einfügen und beliebig viele hinzufügen oder entfernen. Und das ist so ziemlich alles für diese Preiskarte. Jetzt opiieren wir es und fügen es ein, sodass es automatisch in die zweite Reihe springt. Lassen Sie uns auch den Text ändern. Das wird also grundlegend sein. Und es wird, sagen wir einfach, 4$ sein, andersherum und pro Monat. Also kopiere das. Und das wird Null sein. Das sind 9$ pro Monat. Perfekt für die Grundlagen. Und perfekt für solche Reihen. Da wir nun die Überschrift „Mate V“ in ein H-Feld eingefügt haben, möchten wir darüber ein H2-Tag haben. Machen wir dieses Raster ein bisschen kleiner. Und wenn unser Container ausgewählt ist, fügen wir eine Überschrift hinzu. Stellen Sie sicher, dass es sich oben auf dem Container befindet, über dem Raster. Und wir müssen ihm auch die Klasse der Überschrift H2-Klasse geben. Und jetzt ist es auf rechts eingestellt, so schade, weil unser Container die Grundfarbe Weiß hat. Lass uns das ändern. Lassen Sie uns nun überprüfen, ob alles noch funktioniert. Ist es nicht. Wenn Sie diese Änderungen vornehmen, sollten Sie immer nach diesen Dingen Ausschau halten. Also weil wir nur die grundlegende Containerklasse in unserer Helden-Sektion hatten nur die grundlegende Containerklasse in und die haben wir weiß gemacht. Das müssen wir entsprechend anpassen. Sagen wir also Container und geben ihm die Combo-Klasse. Oder für richtig? Jetzt können wir das Problem beheben, das wieder heruntergefahren wurde. Und jetzt wird die Farbe für jeden Container, den wir haben, schwarz sein. Das nennt man Preisgestaltung. Und lassen Sie uns auch einen Absatz hinzufügen. Die Absatzklasse. Und ich denke, die 650-Kombiklasse sollte ziemlich anständig aussehen. Ja. Stellen wir sicher , dass es zentriert ist. Wenn wir nun diese Ränder ändern, ändert sich das natürlich auch genau hier, wo wir dieselbe Kombinationsklasse verwenden. Eine Möglichkeit, dem entgegenzuwirken , besteht darin, es einfach in einen Festplattenblock zu packen . So. Rufen wir dieses Zentrum und stellen Sie sicher, dass es nach links ausgerichtet ist und nicht funktioniert. Müssen wir es anpassen? Manchmal denkt man, dass etwas funktionieren sollte. Wenn etwas keinen Sinn ergibt, probieren Sie einfach einen anderen Weg aus, spielen Sie mit den Einstellungen herum. Es könnte dein Problem lösen. In den meisten Fällen werden Sie in der Lage sein, eine Lösung zu finden. Ich werde anfangen, verschiedene Arten auszuprobieren, etwas zu tun. Jetzt. Ich möchte etwas Polsterung erstellen, also fügen wir es einfach in die Mitte ein. Wenn etwas Spielraum. Also drück das ein bisschen runter. Also mit unserem Zentrum, dieser Druck zurück nach unten. Und ich glaube, das gefällt mir. Wir könnten einen Teil des Basis-Platzhaltertextes auf diese Weise entfernen . Und einfach so haben wir einen ziemlich anständig aussehenden Abschnitt mit den Grundpreisen erstellt. 16. Erstellen eines Kontaktformulars: In Ordnung, jetzt ist der Abschnitt 50 mit den Preisen fertig. Lassen Sie uns über eines der wichtigsten Dinge jeder einzelnen Website oder jedem Kontakt des Kunden oder Ihres potenziellen Kunden sprechen. Sie müssen eine Möglichkeit haben, sich für Ihren Service mit Ihnen in Verbindung zu setzen. Deshalb müssen wir unserer Website natürlich ein Kontaktformular hinzufügen . Jetzt ist das Erstellen von Kontaktformularen in Webflow unglaublich einfach und es sind nur ein paar Schritte erforderlich. Lassen Sie uns also zunächst einen Abschnitt erstellen, genau wie wir es mit unserem Abschnitt , dem Abschnittselement, getan haben. Wenn es unser Abschnitt Plus ist. Da wir hier den weißen Hintergrund verwendet haben, möchte ich, dass du zwischen dunkel und hell wechselst. Fügen wir also die Kombinationsklasse Dark hinzu. Und natürlich müssen wir einen Container hineinlegen. Und dieser Container oder diese Containerklasse. In diesem Container möchte ich nun eine Überschrift und einen Absatz haben. Fügen wir die Überschrift wie hier oben hinzu. Und stellen Sie sicher, dass Sie den Überschriftstyp H2 vom Typ V wählen. Und wie Sie sehen können, die Textfarbe genau dieselbe Farbe wie die Hintergrundfarbe. Gehen Sie also zu Ihrem Container und fügen Sie die V-Kombinationsklasse Weiß hinzu. Das ist nur Typof für Hypertrophie-Einstellungen von Schwarz nach Weiß. Nun, nennen wir das und sagen wir, nehmen wir Kontakt auf. Und wir müssen auch unsere Überschriftenklasse, Überschrift H2, anwenden. Und darunter wollen wir auch einen kleinen Absatz hinzufügen. Also noch einmal, Haferflocken-Suchbalkendiagramm. Geben Sie ihm die Feed-Absatzklasse, aber wir haben das Kombinationsklassenformat V 650 Pixel erstellt und wollen es verwenden. Lassen Sie uns einen Teil davon Platzhaltertext elitär machen. Und wir wollen, dass es zentriert ist. Also werden wir hier das gleiche Setup mit dieser Mittelklasse machen , aber wir haben gemacht, lass uns einen Def-Block einreiben. Fügen Sie den Absatz in unseren Def-Block ein und schenken Sie ihm die Block-vCenter-Klasse. Und einfach so haben wir unseren Text zentriert. In Ordnung, lassen Sie uns als Nächstes über das Kontaktformular sprechen. Jetzt haben wir Zugriff auf alle unsere Kontaktelemente im Elementbereich, dem Panel hier unten in Formularen. Wir haben Zugriff auf alle einzelnen Elemente, aber wir können auch diesen grundlegenden Formularblock haben. Indem wir es hinzufügen, fügen wir unserer Website ein Formularblockelement hinzu. Schauen wir uns nun kurz die Einstellungen an. Wir haben dazu drei verschiedene Staaten. Efd-Normalzustand, der von sich aus B ist. Der Erfolgsstatus , der angezeigt wird, wenn die E-Mail erfolgreich gesendet wurde und wenn etwas schief geht, haben Sie natürlich einen Fehlerstatus. Jetzt können wir auch unseren früheren Namen angeben. Du wirst all diese Optionen lassen, SVR. Wenn wir nun den Formularblock in unserem Navigator öffnen, können Sie sehen, dass wir drei verschiedene Divs haben. Eines ist das V-Formular selbst, das uns über beschriftete Textfelder und die Schaltflächen tatsächlich hilft . Und wenn wir zwei Motive haben, zwar die Erfolgsmeldung und die Fehlermeldung. Diese sind gerade versteckt. Und sie sind genau dasselbe, aber ich habe dir schon verschiedene Staaten gezeigt , sie sind einfach versteckt. Was ich jetzt tun möchte, ist, dass sich das Formular nicht zu sehr dehnt. Also fügen wir einen neuen Festplattenblock hinzu , der über dem Formularblock liegt, und fügen den Formularblock in diesen Div-Block ein. Sie geben diesem Def-Block eine Klasse von Form Wrapper und eine maximale Breite von, sagen wir, 750 Pixeln, vielleicht. Ja, das sieht gut aus. Und natürlich müssen wir es zentrieren. Lassen Sie uns also einen gewissen automatischen Rand auf beide Seiten anwenden. Wie ein Tierarzt. In Ordnung, jetzt haben wir unser Element, unseren Formularblock, zentriert. Und lassen Sie uns das ein bisschen analysieren. Also haben wir für jedes Textfeld normalerweise eine Bezeichnung und das Feld selbst. Dieses Feld sagt uns einfach, ist beschriftet, sagt uns, worum es in dem Feld geht, welche Art von Informationen wir eingeben müssen. Und so sind diese einzelnen Felder strukturiert, und am Ende haben wir natürlich eine einfache Schaltfläche zum Absenden. Obwohl dies hier als Submit-Button bezeichnet wird , können wir einfach unsere Button-Klasse darauf anwenden. Einfach so. Jetzt stimmt das Muster mit allen anderen Knöpfen überein. Sie können sogar die Textangebote ändern indem Sie darauf doppelklicken. Und hier können wir den V-Button-Text eingeben. Lass uns eine Nachricht schicken, so. Ordnung, jetzt eine Sache , die ich so ändern möchte, wie ich will, all diese sind nach links ausgerichtet. Also der Formularblock ausgewählt. Gehen wir zu den Topographieeinstellungen und richten wir es so aus, dass es links liegt. Wie Sie sehen können, wurde Webflow vor dem Unterricht automatisch für uns erstellt. Bei diesen Feldbezeichnungen ist das Tolle an ihnen, dass wir nicht wirklich eine Klasse für sie erstellen müssen. Wenn Sie das Feldlabel auswählen und zur Seitenauswahl gehen, können Sie sehen, dass wir ein HTML-Tag mit allen Bezeichnungen haben. Wir können es hinzufügen. Also lass uns das machen. Wählen Sie die normale Schriftstärke der Open Sans-Schrift aus. Lassen wir es bei 16 Pixeln belassen. Ich finde, das sieht vorerst gut aus. Was ich jetzt will, das erste Formular, ich möchte auf den Namen, die E-Mail-Adresse klicken. Also diesen beiden geht es vollkommen gut. Wir können sie als PR behalten, aber ich möchte auch ein Nachrichtenfeld. Gehen wir nun zu unserem Menü Hinzufügen und unter Formulare. Lassen Sie uns zunächst ein neues Label hinzufügen. Hier in der Nähe. Nennen wir diese Nachricht. Und fügen wir das Textbereichselement hinzu. diesem Element können Sie jetzt Ihre eigentliche Nachricht eingeben. Und lass es uns einfach so unter die V-Nachricht legen. In Ordnung? Nun, eine Sache, die Sie sofort sehen , ist , dass wir hier Platzhaltertext haben, aber nicht in der E-Mail-Adresse oder im Namensfeld. Wie können wir nun Platzhaltertext hinzufügen indem wir einfach auf das Einstellungssymbol klicken. Genau hier haben wir Zugriff auf unsere Feldeinstellungen, denen wir einen Namen geben können. Und dann können wir die Art der Eingabe deklarieren , die wir haben möchten. Gerade jetzt. Es sind einfache Texte, also ist alles möglich. Sie können also einen Namen eingeben, sodass Sie Nachrichten und ähnliches eingeben können. Wir haben aber auch ein E-Mail-Passwort und eine Telefonnummer. Dafür. Da es nur ein einfacher Name ist, wirst du ihn im Flugzeug behalten. Und wir können ihm einige Platzhaltertexte geben. Nimm einfach etwas Grundlegendes, John Doe, Punkt, Punkt. Und dann hast du zwei Felder. Eins ist erforderlich. Das Formular kann also nicht gesendet werden , wenn die Informationen nicht ausgefüllt wurden. Also wollen wir das. Und wir haben Autofokus , den wir in diesem Fall nicht wollen. Der Autofokusfokus wählt einfach aus, um für Sie geformt zu werden. Sobald Sie auf die Website gehen, können wir sofort mit der Eingabe beginnen. Das willst du in diesem Fall nicht. Lassen Sie uns nun die Einstellungen in unserem E-Mail-Feld bearbeiten. Ändern Sie den Typ auf E-Mail. Ich war eine Platzhalter-E-Mail. Lass uns einfach mit etwas Fiktivem wie John doe@gmail.com beginnen. Halten Sie es auf „erforderlich“, und das war's. Jetzt können wir diese Felder natürlich bearbeiten, diese Felder natürlich bearbeiten, aber wir haben die volle Designkontrolle über sie. Eine Sache, die ich tun möchte, ist, den Platzhaltertext zu ändern. Geben wir dem also zunächst eine Klasse namens Textfeld. Und um den Platzhaltertext zu bearbeiten , hat das Ego das Textfeld ausgewählt. Wir sind runtergefallen. Und da dies ein Textfeld ist, haben wir diesen Platzhalterstatus. Jetzt werden sofort viele Fenster geschlossen. Und hier haben wir Zugriff auf die Topographie. Und wie Sie sehen, können wir es wie jedes andere stylen. Lassen Sie uns mit so etwas beginnen, etwa 30, 30% der V-Opazität, und vielleicht etwas kleiner machen, z. B. 14 Pixel. Ja, das gefällt mir. Es ist nicht zu aufdringlich, aber auch nicht zu klein Eva. Fügen wir nun die V-TextField-Klasse zu den anderen Textfeldern hinzu. So. Eine Sache, die wir jetzt noch entwerfen müssen , sind die verschiedenen Zustände des Erfolgsstatus sowie des Status v Aero. Wählen Sie nun Ihren Formularblock aus und Sie können hier in unseren Formularblock-Einstellungen zwischen Erfolg und Status wechseln hier in unseren Formularblock-Einstellungen zwischen Erfolg und Status . Wenn Sie hier oben einfach auf die Formular-Block-Einstellungen klicken, können Sie auf Erfolg klicken. Und lass uns einfach einen wirklich einfachen Stil machen. Machen wir daraus einen grünen Hintergrund. Ein bisschen dunkler, nur das, es wird grün, sagt uns, okay, es hat funktioniert. Ebenfalls. Lass uns die Ecken ein bisschen abrunden. So können Sie Ihren Text so lassen, wie er ist. Das wäre unser Erfolgsstatus. Und um v Aero State noch einmal den inaktiven Formularblock zu bearbeiten . Und klicken Sie hier auf den Pfeil. Und lassen Sie uns den Fehlerstatus stylen. Jetzt wollen wir hier nur ein etwas dunkleres Rotschwarz also runden die Ecken einfach so ein bisschen ab. Und ich finde, das sieht ziemlich anständig aus. 17. Eine Navigation erstellen: Okay, wenn das Kontaktformular vorerst fertig ist, gibt es nur noch zwei Abschnitte, in denen wir sie nicht wirklich Abschnitte nennen können , die wir erstellen müssen. Und eine wird natürlich die Fußzeile sein und die andere wird die Navigation sein. Fangen wir also an, eine Navigation für diese Vertriebsseite zu erstellen. Ein Webflow macht das für uns jetzt wirklich einfach und bequem, denn wenn Sie sich das Elements-Bedienfeld ansehen und wir etwas Abwechslung nach unten scrollen, genau hier ganz unten. In der Kategorie Fortgeschritten haben Sie eine vorgefertigte Navbar-Komponente die wir entwerfen und gestalten können. Lassen Sie uns das also hineinziehen und sicherstellen, dass es oben im Heldenbereich steht. Das ist so. Lassen Sie uns nun diese Navigationsleiste stylen. Nun, wenn Sie sich das ansehen, wie Sie sehen können, ist das Nephron sein eigenes kleines Symbol. Und dann hat es nur einen Container, einen Branch-Block, einen Link-Blog, in den wir unser Logo einfügen können, sowie ein Div namens Nav-Menü, das unsere Nav-Links enthält. Diese Anleihen sind genau hier. Und wenn auch ein unsichtbarer Knopf. Auf einer kleineren Bildschirmgröße. Du siehst, wir haben diesen Berg, den ich haben kann. In dieser Vorlesung werden wir nun die Desktop-Version dieser Navigationsleiste stylen. Fangen wir mit der Spitze an. Jetzt möchte ich, dass das eine einfache weiße Farbe ist. also zunächst Geben Sie ihm also zunächst einen Stil, eine Klasse, und wir nennen es Navigation. Dann ändern wir die Hintergrundfarbe von Grau auf Weiß. Als Nächstes wählen Sie den Container aus. Und wir geben ihm die grundlegende Containerklasse. Es hat also genau die gleiche Breite wie die restliche Website. Schauen wir uns als Nächstes diesen Zweigblock an. Jetzt könnten wir einfach in einem Bild auch eine grundlegende Topographie hinzufügen. Wenn Sie gerade kein Logo bereit haben, lassen Sie uns das tatsächlich tun. Lassen Sie uns einwerfen , lassen Sie uns einfach einen Textblock verwenden und ihn in die Marke einfügen. So. Nennen wir diese Workflow-Website einfach. Eine Sache, die wir jetzt korrigieren müssen ist, dass wir es tatsächlich versenden müssen. Wenn Sie also den Container auswählen, den wir wollen, könnten wir ihn tatsächlich biegen und dann einfach alles so ausrichten, dass es zentriert ist. Also 50 Container ausgewählt. Geben wir ihr eine Kombinationsklasse namens nav und geben sie als Flexbox ein. Und das machen wir horizontal und richten es an der Mitte aus. So. Okay, jetzt, was Sie wahrscheinlich bemerkt haben, ist, dass das Navigationsmenü ganz nach links verschoben wurde. Das ist jetzt sehr einfach zu beheben. Wählen Sie es im Menü aus, geben wir ihm ein Klassennavigationsmenü. Wenden Sie einfach etwas automatischen Rand darauf an und es wird quasi nach rechts verschoben. Sie können diesen Logotext auch gestalten. Nennen wir das einfach Logobank. Wir haben zwei Eisenbahnen gegründet. Machen Sie es fett und vergrößern Sie die Größe, bis Sie zufrieden sind. 24 Pixel scheinen in Ordnung zu sein. Vorerst. In Ordnung, jetzt haben wir unser Logo. Dann ist alles zentriert, und wir haben diese Navigationslinks genau hier. Schauen wir uns diese nun an. Wie Sie sehen können, wurde zunächst kein Stil darauf angewendet, also wurde keine Klasse angewendet. Also lasst uns das ändern, bevor wir irgendwelche Änderungen vornehmen. Es heißt Nav Link und wendet die Klasse auf alle Links an. So. Wenn Sie nun einige Änderungen vornehmen, da wir dieselbe Klasse verwenden, wird alles genau gleich sein. Machen wir das tatsächlich auf 18 Pixel, nur ein bisschen größer als V oder der Text. Da wir es gewohnt sind, da dies Links sind, die wir stylen möchten, machen Sie einige Hover-Effekte zu ihnen. Also lasst uns etwas Grundlegendes machen. Fügen wir einen grundlegenden Hover-Status hinzu. Gehen Sie im Drop-down-Menü zu den Schwebezuständen der Naphthalin-Klasse und machen Sie es ein bisschen leichter. Verwenden wir diese graue Farbe. Wir könnten es auch ein bisschen nach oben verschieben. Ich glaube. Gehen wir zu 2D- und 3D-Transformationen über. Minus zwei, vielleicht minus zwei auf der Y-Achse der Bewegung. Fügen wir einen Übergang zum Bett hinzu. bei einem Übergang oder Eigenschaften Lassen Sie uns bei einem Übergang oder Eigenschaften über 400 Millisekunden gehen. Und jetzt haben wir diese netten kleinen Animationen in unserem Netflix. Stimmt es? Jetzt. Das ist so ziemlich alles. Es gibt jedoch Navigationselemente. Wenn Sie also zu den Elements-Einstellungen gehen und das Navigationsmenü auswählen, werden Sie feststellen, dass wir in den Einstellungen der Navigationsleiste eine Reihe neuer Einstellungen haben . Jetzt können Sie das mobile Menü so umschalten, wie Sie es sehen können, Sie können es auch ausblenden. Jetzt werden wir uns diese in der nächsten Vorlesung ansehen , in der wir dieses Handy responsiv machen werden. Was ich dir zeigen möchte, ist das hier. Das F ist eine nette kleine Option namens Link hinzufügen , mit der wir der Navigationsleiste einen neuen Navigationslink hinzufügen können . Denken Sie jetzt daran, dass noch keine Klasse darauf angewendet wurde . Wir müssen diese Klasse anwenden. Aber die Option ist immer, wo Sie natürlich auch so viele dieser Links kopieren und einfügen können , wie Sie benötigen. In Ordnung, lassen Sie uns jetzt diese Links bearbeiten. Wir brauchen also keinen Home-Link , da das unser Logo selbst sein wird. Wenn Sie also auf das Logo klicken, kehren wir zur Startseite zurück, hier nach oben. Sie möchten jedoch Funktionen, die genau hier abgerufen werden. Und dann wollen wir einen Link für Preise und Kontakt. Lass uns das iPad rein. Preisgestaltung. Und der Kontakt ist bereits fehlgeschlagen sodass wir es so lassen können, wie es ist. Und so erstellen Sie eine grundlegende Navigation für Ihre Website. 18. Die mobile Navigation machen: Ordnung, also in der vorherigen Vorlesung haben wir diese grundlegende Navigationsleiste erstellt, die Website. Jetzt müssen wir es für Mobilgeräte responsiv machen. Wenn Sie also hier zu einem kleineren Breakpoint gehen, können Sie sehen, wie sich das Symbol ändert, das Burgersymbol und das Menü selbst verschwunden sind. Unser Nav-Venue ist also weg. Aber wir haben diesen Button genau hier. Genau wie Sie es von anderen mobilen Websites wissen. Zuallererst denke ich nicht, dass es notwendig ist. Habe die Menütaste und die Tablet-Ansicht. Wie passen wir das nun an? In den Einstellungen unseres Navigationsleisten-Symbols für Tablets und darunter können Sie diesen Schieberegler einfach zum nächsten Breakpoint ziehen. Und wie Sie jetzt sehen können, haben wir unser Hauptmenü auf Tablet-Größe sichtbar, aber unsichtbar, und das VFD-Symbol auf dem Telefon im Querformat und darunter. Und genau das wollen wir weil wir nicht viele Elemente und eine F-Balke haben. Das ist völlig in Ordnung. Wechseln wir in den mobilen Landschaftsmodus. Und lass uns jetzt mit dem Stylen beginnen. Zuallererst Gase, bevor wir das Symbol hier haben wollen. Der einfachste Weg , dies zu tun, besteht darin, einfach links vom automatischen Rand etwas Abstand zu geben links vom automatischen Rand etwas ihn ganz nach rechts zu verschieben. Einfach so. Nun, als nächstes, wie man das stylt. Denn wenn wir das in der Vorschau ansehen und wenn Sie auf das Menü klicken, sehen wir, dass Sie jetzt gefragt sind, aber nicht in unserer Ansicht. Gehen wir also zurück zu den Einstellungen der VF-Leiste. Sie können das Menü direkt hier anzeigen, indem Sie Einblenden und die Maustaste drücken. Und jetzt können Sie zum Style-Manager zurückkehren und dieses Menü stylen. Zunächst müssen wir die Hintergrundfarbe der Menüschaltfläche ändern . Also lasst uns das Element auswählen. Und lasst uns das ändern. Lass es uns schließen. Eigentlich weiß ich, dass wir es so verstecken können. Und gehen wir näher an den Hintergrund heran, ventral die Hintergrundfarbe bis Weiß. Und wähle das Symbol. Jetzt können Sie Ihr eigenes Symbol importieren. Vergiss es, wenn du willst. Ich glaube, es ist unter Typografie. Ja. Sie können die Typografiefarbe des Symbols ändern. Es ist ein SVG-Symbol genau hier. Und ändere es auf Schwarz. Das ist jetzt erledigt. Und wenn wir dieses ziemlich hässliche graue Kästchen ändern müssen. Nun, dieses graue Feld ist eigentlich das Nav-Menü def. Jetzt möchte ich, dass dies den gesamten Bildschirm abdeckt. Nun, wie machen wir das? Wir wählen das Navigationsmenü und den Höhenwert aus. Sie können das auf 100 vh ändern und die Höhe des Ansichtsfensters überprüfen. Wenn Sie das tun, ist die Höhe immer die gesamte Höhe des Bildschirms des Viewports, unabhängig davon, auf welchen Bildschirm Sie ihn vom ist die Höhe immer die gesamte Höhe Viewport aus betrachten. Auf diese Weise stellt diese Messung sicher , dass das Menü den gesamten Bildschirm abdeckt. Jetzt ändern wir auch die Hintergrundfarbe, weiß, so. Wenn wir nun die Größe dieser Navigationslinks erhöhen möchten, wählen wir einen Navigationslink aus und erhöhen ihn. Jetzt müssen Sie sich keine Sorgen mehr machen dass Änderungen an unserer Desktop-Ansicht vorgenommen werden. Da wir im Wesentlichen mit HTML und CSS arbeiten, mit C- und F-CSS-Cascading Stylesheets, werden wir Änderungen nur an diesem und weiteren Breakpoint vornehmen. Aber wie Sie sehen können, sind die Änderungen dieselben. Wenn wir zu einem größeren Breakpoint gehen. Wie Sie sehen können, ist es immer noch dasselbe wie zuvor und weiß, dass eine Ernährungsumstellung vorgenommen wurde. Das ist das Tolle an CSS. Öffnen wir das Menü erneut, damit wir es weiter bearbeiten können. Jetzt möchte ich auch diese Knöpfe zentrieren. Klicken wir auf Align Center. Und wir könnten auch oben eine Polsterung hinzufügen. Aber lass uns das Navigationsmenü auswählen und oben etwas Polsterung hinzufügen, es ein wenig nach unten drücken. 100 Pixel Wir könnten auch den Abstand zwischen diesen vergrößern und ihn am unteren Rand etwas auffüllen. Sie bekommen also etwa 48 Pixel. Und jetzt haben wir ein ziemlich gut aussehendes mobiles Menü. Nun, wenn du es dir ansiehst. Wie Sie sehen können, haben wir die Desktop-Version. Sie haben die Tablet-Version. Sobald wir die Version im Querformat, die mobile Version im Querformat, erreicht die mobile Version im Querformat, haben wir unser Symbol. Und wenn Sie auf dieses Menü klicken, rutscht es nach unten. Und wir haben unsere Menüpunkte. Das Gleiche gilt für die mobile Version wie diese. Und so erstellen Sie eine serviceorientierte, mobile Navigationsleiste. 19. Komponenten erstellen und bearbeiten: Ordnung, in diesem Video möchte ich Ihnen eine sehr nützliche Funktion von Webflow zeigen , nämlich Komponenten. Jetzt ist eine Komponente einfach ein wiederverwendbares Element , das Sie erstellt haben. Sie können also, Sie können ziemlich alles in eine Komponente verwandeln. Und Sie können Änderungen an dieser Komponente vornehmen. Und jede Komponente, die verwendet wird , dieselbe Komponente kann auf Ihrer Website mehrfach verwendet werden auf Ihrer Website mehrfach und alle daran vorgenommenen Änderungen aktualisieren jede Komponente. Es ist also ziemlich mächtig. ZB können wir die Navigation in eine Komponente einbauen. Und wenn wir beispielsweise einen neuen Link hinzufügen, müssen wir uns keine Gedanken über den Upload machen, also Aktualisierung der V-Neff-Leiste für jede einzelne Seite. Es wird einfach automatisch aktualisiert. Das Erstellen einer neuen Komponente ist sehr, sehr einfach. Navigation auswählen. Und wenn wir in unserem Seitenbereich hier oben auf Komponente erstellen klicken . Und jetzt auf der linken Seite können wir ihm einen Namen geben. Nennen wir das Navigation. Klicken Sie auf Handel. Und das war's. So können wir Komponenten erstellen. Wie Sie jetzt sehen können, ist alles außerhalb unserer Komponenten, außerhalb unserer Komponenten, außerhalb unserer Navigationsleiste, dunkel. Du kannst, du kannst wirklich nichts bearbeiten. Wenn du zurückgehen willst. Sie können gehen und auf Zurück zur Instanz klicken. Und jetzt, wie Sie sehen können, hat der Umriss unserer Navigation diese grüne Farbe und auch dieses Komponentensymbol. Nun, wie Sie sehen, können wir derzeit nicht wirklich etwas bearbeiten , um eine Komponente zu bearbeiten. Wenn ich jedoch darauf doppelklicke und wir dann die vollständige Designkontrolle haben, klicken Sie auf dieses Symbol neben dem Namen. Sobald wir hier eine Änderung vorgenommen haben , wird diese Änderung auf allen Webseiten aktualisiert , auf denen diese Komponente verwendet wird. Also wirklich leistungsstarke und zeitsparende Funktion. 20. Den Fußzeilen-Aufbau: Jetzt fehlt auf unserer Website ein wichtiges Element , und das ist die Fußzeile. Lassen Sie uns also gleich loslegen und einen einfachen Fotobereich für diese Website erstellen. Scrollen wir nun ganz nach unten und wählen unser Körpertag, das Körperelement, aus. Und wir werden einen einfachen Abschnitt hinzufügen. Die Art und Weise, wie wir dieses Foto erstellt haben, wird der Art und Weise, wie wir unsere anderen Abschnitte gebaut haben, sehr ähnlich sein. Wählen Sie diesen Seitenwähler aus und geben Sie ihm eine Klasse. Du wirst ein weißes Foto daraus machen. Und Sie werden auch den V-Basiscontainer hinzufügen und ihn der Container-Klasse übergeben. Eine Sache, die ich ändern möchte , ist der ausgewählte Abschnitt. Ich möchte ihm eine kombinierte Fußzeilenklasse geben. Und ich möchte die Polsterung ein bisschen reduzieren. Lassen Sie uns also mit 50 oben und unten beginnen. Nur damit es nicht so viel Platz einnimmt. Schauen wir uns nun als Nächstes an, wie wir unseren Fuß strukturieren wollen. Also möchte ich mein Logo genau hier haben. Und dann können wir ein paar Zeilen haben, wie zwei oder drei Spalten mit einigen Navigationslinks. Richtig? Nun, die Art und Weise, wie wir das bauen können, ist eigentlich ganz einfach. Zunächst fügen wir diesem Foto ein Raster hinzu. Und das Tierarztnetz wird eine Reihe haben. Aber jetzt schauen wir uns diese Brucheinheiten genau hier an. Wie Sie sehen können, haben wir diese Griffe auf dem Grid. Und wenn Sie auf sie klicken und ziehen, können Sie sehen, dass Sie das Aussehen der Körnungen und den Platzbedarf jeder Zeile tatsächlich anpassen können. Das gibt uns viel Kontrolle über das Design. Wenn Sie nun auf Fertig klicken, haben wir ein rotes Bild mit einem größeren Abschnitt auf der rechten Seite und einem kleineren Abschnitt auf der linken Seite. Lassen Sie uns nun einen einfachen Def-Block einfügen und diesen Logo-Wrapper nennen. Und erfinderischer Block. Ich möchte einen einfachen Markenblock, einen Linkblock, platzieren. Der hier. Und in diesem Link-Blog. Er möchte einen einfachen Textblock haben den unsere lokale Klasse angewendet wird. Wenn Sie jetzt ein Bild für Ihr Logo verwenden, können Sie einfach ein Bild einfügen und das ist schlecht. So. Eine Sache, die wir sicherstellen müssen, ist, dass es rechts links auf Ihrem Logo-Wrapper ausgerichtet ist. Und stellen Sie sicher, dass alle Texte nach links ausgerichtet sind. Jetzt haben wir unser Logo an Ort und Stelle. Was wir tun könnten, um dem Ganzen ein bisschen mehr Charakter zu verleihen . Wir könnten einen Absatz hinzufügen. Das könnte also nur ein Text sein , der uns mehr darüber erzählt, für wen diese Website ist, was Sie tun, oder? Was für ein Service du bist, oft solche Sachen. Wir könnten da reingehen. Jetzt möchte ich den Rand oben rechts vergrößern um ihm etwas mehr Luft zum Atmen zu geben. Fügen wir also ein Div hinzu. Geben Sie unseren Absatz ein. Und dafür habe ich schon, oder wir haben bereits eine Klasse erstellt. Wählen wir also den Stilwähler aus und geben Sie den Rand ein. Und wählen Sie Rand, obere 20, untere 28. Und das macht es hier nur ein bisschen mehr Abstand . In Ordnung. Das ist der erste Teil des Fotos. Nun zu etwas Komplexerem: Wir fügen einen Block in dieses Raster ein wählen die rechte Spalte aus. Und das nennen wir Neff Grid. Weil es zwei Möglichkeiten gibt, einer Webflow-Website Raster hinzuzufügen . Eins mit dem Rasterelement. Eins. Wenn die Anzeigeoptionen im Layout sind, können Sie einfach auf das erste Optionsraster klicken. Und das ermöglicht es uns, jedes Div in ein Grid umzuwandeln. Lassen Sie uns nun diese Zeile löschen und sie tatsächlich bei zwei belassen. Jetzt haben wir also zwei Gitter, wir haben ein Gitter und wir haben ein weiteres Gitter darin. Bei Grid klingt das wirklich kompliziert, aber es wird sehr helfen wenn wir die Website responsiv gestalten. Ordnung, also fügen Sie in dieses Raster ein Div ein. Nennen wir das Nav-Wrapper. Und hier wollen wir eine kleine Überschrift haben. Lass uns mit H gehen , denn das wird eine Website sein. Und stellen wir sicher , dass es linksbündig ist. So. Behalten wir die Überschriftenklasse V und die Kombiklasse im Alter von vier Jahren. Lass uns das ein bisschen stylen, es ein bisschen groß machen, etwa 22 Pixel. Wir könnten Farbe auf die Bank setzen und ein Kind sollte keine Opazität von etwa 70% haben, wie schlecht. Und ich möchte auch den Rand der Überschrift entfernen , damit er perfekt zu dieser passt. Und jetzt ist es oben perfekt ausgerichtet. Und jetzt werden wir einen neuen Div innerhalb des Nephrons erstellen. Wie Sie sehen können, werden wir viel mit einer Reihe verschiedener Div-Blöcke arbeiten einer Reihe verschiedener Div-Blöcke nur um unseren Inhalt zu vervollständigen. Wir haben also ein bisschen mehr Kontrolle über alles. Du wirst diesen Def-Block nennen. Was sind Neff? Und in diesen Festplattenblock werden Sie einige Textlinks einfügen. Und das werden unsere Navigationselemente sein. Das wird mein Zuhause sein. Geben wir dem einen Kurs. Wir könnten es einfach so belassen. Lassen Sie uns tatsächlich einen Klassennavigationslink geben. Es wird für die gleiche Klasse verwendet wie hier oben. Und du wirst ihm das Kombi-Klassenfoto geben. Denn in der mobilen Ansicht wollen wir nicht, dass es sehr groß ist, also werden wir uns später darum kümmern. Aber das wollen wir nicht. Ich wechsle vom Foto, um in der Navigation oben wirksam zu werden. Also werden wir es so machen. Und dann kopieren Sie einfach diesen Nav-Link und fügen ihn ein. Ein paar Mal, wo wir Dienstleistungen haben. Dann haben wir den Aufstieg und wir haben auch Kontakt. Jetzt siehst du sofort , dass hier etwas nicht stimmt. Wir müssen die Anzeigeoption ändern. Und am einfachsten ist es, einfach zu Layout, Lex it und Vertical zu gehen. Das war das falsche Objekt. Wir wollen nicht, dass das im Nephron ist. Und nur um im Photon F zu sein . Wir wollen diese vertikale Linie so nach rechts biegen. Und im Photon hat F13 es gebeugt. Sie können auch einen Lückenzahn hinzufügen. 18 Pixel. Das ist ein bisschen viel. Lassen Sie uns mit 12 Pixeln zwischen den VCE-Elementen beginnen. Das ist sogar ein bisschen zu viel. Lass uns mit acht gehen. Ja, das sieht gut aus. Und wie Sie sehen können, seit wir die Naphthalin-Klasse verwendet haben, alle Animationen, jede Eizelle. Ordnung, als Nächstes kopieren wir einfach das In Ordnung, als Nächstes kopieren wir einfach das Nephron und fügen es ein. Und jetzt haben wir eine zweite Zeile für Navigationselemente. Es heißt diese Dienste. Je nachdem, wie Ihre Website aussehen soll, können Sie das Foto natürlich können Sie das Foto natürlich komplett anders gestalten. Das wird Design sein. Das wird Entwicklung sein, und das wird Veröffentlichung sein. Und du kannst den letzten löschen. Und das ist so ziemlich alles für unser Photon. Eine Sache, die ich wirklich ändern möchte ist die Ausrichtung dieser Zeile. Ich denke, es würde besser aussehen, wenn es tatsächlich auf dieser Seite ausgerichtet wäre. Mal sehen, wie können wir das beheben? So? Sie können es einfach nach rechts ausrichten, das Neff-Raster auswählen und es nach rechts ausrichten. Denn jetzt passt es tatsächlich zu unserem Container. Es sieht einfach viel sauberer aus. Wir könnten aber auch einen Absatz plus diesen Absatz hier anwenden . Und vielleicht würden 350 Pixel gut aussehen. Maximale Breite von 350 Pixeln. Ja. Nimmt hier nicht den ganzen Platz ein. Es ist nur ein bisschen sauberer. Jetzt. Das war's für heute. Das wird das Foto sein. Es ist also sehr einfach. Wir können natürlich noch viel mehr davon machen. Aber ich finde, es sieht bisher ziemlich anständig aus. Eine letzte Sache, die ich tun möchte, ist , daraus eine Komponente zu machen. Klicken Sie also auf Komponente erstellen. Und wann immer wir das jetzt wieder verwenden müssen, haben wir eine Komponente davon. 21. Unsere Website responsive machen: Ordnung, jetzt ist es Zeit für etwas in unserer heutigen Zeit extrem wichtig ist. Jede einzelne Website muss responsiv sein und auf allen Bildschirmgrößen gut aussehen. Im Moment sieht es auf Desktops ziemlich anständig aus. Sobald wir jedoch zu einer kleineren Größe wie dem Tablet-Modus wechseln , können Sie sehen, dass dies nicht sehr gut aussieht. Es sollte nicht so aussehen. Lassen Sie uns das jetzt tatsächlich beheben. Nun, das Tolle an CSS ist nass. Sobald wir diesen Breakpoint ausgewählt haben, nehmen wir Stiländerungen an allen unseren Elementen vor. Diese Änderungen werden nur auf die unteren Schwellenwerte übertragen. Sie wirken sich nicht auf die höheren Breakpoints aus. Breakpoints, die größer sind als sie selbst. Wenn Sie einige Änderungen im Tablet-Modus vornehmen, wird a auf die mobilen Ansichten übertragen, nicht jedoch auf die Desktop-Ansichten. Lass uns anfangen, unsere Elemente zu stylen. Jetzt. Beginnen wir zunächst mit dem Bereich Dienste. Nun, ein dreispaltiges Layout sieht in diesem Einkaufszentrum mit Bildschirmgröße nicht gut aus. Und wie Sie sehen, hat er auch überhaupt keine Luft zum Atmen. Genau hier. Nun, wie ändern wir wo? Es ist super einfach? Lassen Sie uns zunächst mit dieser Atempause beginnen. Wählen Sie unseren Container aus und wir polstern ihn einfach auf beiden Seiten ein wenig ab, z. B. zehn Pixel, vielleicht 2020 Pixel auf beiden Seiten. Und jetzt, wie Sie sehen können, alle Container aktualisiert und alles, das ist ein bisschen mehr Luft zum Atmen, es sieht viel sauberer aus. Keine Elemente berühren die Kanten so, wie wir es wollten. Als Nächstes ändern wir dieses Raster, genau hier, wo wir als Gretchen dienen. Also wie gesagt, ein kostenloses Spaltenlayout, ich glaube nicht, dass es sich allzu gut entspannen wird. Also lasst uns das ändern. Um nun ein Raster zu bearbeiten, können Sie auf diese Schaltfläche Raster bearbeiten klicken, oder Sie können auf das rote Symbol hier oben in der Ecke klicken. Und der beste Weg, das zu tun, denke ich, fügen wir einfach eine weitere Zeile hinzu. Und wenn wir hier ein Element löschen, schiebt der Tierarzt das Objekt automatisch in die zweite Reihe. Und es erhöht den Raum, den V-Elemente haben. Wenn du auf Fertig klickst. Jetzt haben wir dieses zweispaltige Layout. Und die restliche Firmware-Karte wird nach unten gedrückt. Ich finde, das sieht vorerst ziemlich gut aus. Vielleicht könnten wir es sogar zu einem einspaltigen Layout machen. Wenn wir also tatsächlich nur eine maximale Breite angeben, wählen Sie die Servicekarte aus und geben Sie ihr eine maximale Breite von 350. Vielleicht ein bisschen mehr wie 450 Pixel wie diese. Und wenn wir das in den Mittelpunkt rücken müssen, wie machen wir das jetzt? Wir wählen das Service-Grid und richten es so aus, dass es hier zentriert ist. Wie Sie jetzt sehen können, sieht es viel sauberer aus als zuvor. Wir haben zwar auf all diesen Websites viel Luft zum Atmen, Sie haben nicht das Problem , dass es unsymmetrisch ist. Wenn Sie nur zwei Spalten haben, wird genau hier ein leerer Raum angezeigt. Das wollen wir nicht. Eine weitere tolle Sache daran ist, dass, wenn Sie zu einer kleineren Bildschirmgröße wechseln, wie Sie sehen können, es immer noch sehr gut aussieht und einfach funktioniert. In Ordnung, kehren wir zur Tablet-Ansicht zurück. Scrollen Sie nach unten und fügen wir die V-Abschnitte hinzu. Ich denke, der beste Weg, dies zu tun, besteht darin, einfach das Raster zu bearbeiten, eine weitere Zeile hinzuzufügen und eine Zeile zu löschen. Und wie Sie sehen können, haben wir jetzt dieses schöne einspaltige Layout. Eine weitere Sache, die wir tun könnten, ist, diese beiden Elemente etwas stärker voneinander zu trennen . Gehen wir also zurück zu unseren Grid-Einstellungen. Und obwohl wir hier einen festgelegten Wert eingeben könnten, können Sie auch über den Abstand zwischen beiden Zeilen danach fragen . Klicken und ziehen Sie. Um den Abstand zu vergrößern. Lass uns mit 42 beginnen. Und das gibt allem einfach ein bisschen mehr Luft zum Atmen. Es sieht nur ein bisschen netter aus. Ich denke, für die Tablet-Ansicht möchte ich sie bei belassen Ich möchte sie vorerst linksbündig lassen. Vielleicht können wir das später ändern. Was wir auch tun wollen, ist, dass wir die Polsterung von oben entfernen könnten . Ich finde, das sieht viel besser aus. Wenn wir das Padding in unserem Service-Text-Wrap-Up auf Null setzen . Einfach so. Wenn Sie jetzt hier nach unten scrollen, denke ich, dass wir hier dasselbe tun wollen. Ja. Gehen wir also zu dieser Zusammenfassung des Servicetextes. Hier ist nicht die richtige Kombinationsklasse angewendet, also lassen Sie uns, dass wir auch hier auf Null auffüllen. Und wie Sie sehen können, da wir das Grid selbst, die Klasse, bearbeitet haben , der Abstand zwischen den Spalten zwischen den Deferrals befindet sich der Abstand zwischen den Spalten zwischen den Deferrals in jedem Abschnitt. Nun, das sieht völlig in Ordnung aus. Schauen wir uns nun diesen Preisbereich an. Nun, wie Sie sehen können, sieht das überhaupt nicht gut aus. Warum? Ich bin ein Fan des einspaltigen Layouts. Sie müssen die Preisgestaltung selbst stark anpassen. Alles ist bereits linksbündig, mittig ausgerichtet. Wir müssen es nur vergrößern . Wählen Sie also Ihre Preiskarte aus und gehen Sie zu Ihrem Größenmenü zu Ihren Größenoptionen. Und lassen Sie uns mit einer maximalen Breite von 450 Pixeln beginnen. Sie müssen auch das Mindestgebot für anpassen. Wir legen die Mindestbreite n V und Höchstgebot durch diese beiden Elemente fest. Jetzt hat alles ein bisschen mehr Luft zum Atmen. Was wir auch tun könnten, ist die Polsterung nach oben und unten zu erhöhen. Sagen wir die F-Flagge, eine untere Polsterung von etwa vielleicht, wenn mehr wie 48, E kann es oben bei 18 belassen, ich finde das sieht ziemlich anständig aus. Und wenn wir die Größe erhöhen, sieht alles perfekt aus. Ja, ich mag diesen Preisbereich. Schauen wir uns nun dieses Formular an. Im Kontaktbereich. Ich denke, wir könnten es so lassen, wie es ist. Es ist ziemlich nett. Es sieht so aus, diese ansprechende Avi-Tablet-Ansicht, wir können es so lassen, wie es ist. Eine Sache, die jetzt noch übrig ist, ist die Fußzeile. Lassen Sie uns nun zu den Komponenten gehen. Klicken Sie also auf Komponente bearbeiten. Und jetzt werden wir sehen, warum wir grillen wollten. Zuallererst möchte ich, dass diese beiden in der Tablet-Ansicht nebeneinander bleiben. Aber ich will diesen Block oben haben. Wählen Sie also das Raster aus, das wir erstellt haben, und wir gehen zu seinen Optionen. Du wirst eine weitere Zeile hinzufügen. Und wir werden auch v ist 0,5 Bruch rho daraus löschen , die Spalte daraus. Und wenn Sie jetzt auf Fertig klicken, können Sie sehen, dass sich dieses Raster immer noch unten befindet. Und dieser Logo-Rapper hier ist jetzt ganz oben. Stellen wir sie jetzt ein. Wählen Sie also den Logger Rubber und klicken Sie einfach auf Justieren, um mittig zu sein. Und mach das Gleiche. Ihre Typografie-Optionen und klicken Sie auf die Linie, die in der Mitte stehen soll. Nur Toby-Text ist mittig ausgerichtet. Was jetzt noch übrig ist, ist, dass wir zu v Neff Grid gehen müssen. Und im Moment ist es nach rechts ausgerichtet. Wir wollen es an der Mitte ausrichten. Einfach so. Eine weitere Sache , die wir wollen, ist, dass wir tatsächlich in den Fuß und F Now gehen und das auch an der Mitte ausrichten. Gehen wir also zu Ihren Epigraphik-Optionen. Ich denke, wir müssen das Jahr bearbeiten. Sie müssen den Nav-Link bearbeiten. Mal sehen, wo es V hinführt? Ja, wir haben ein F und richten es zur Mitte aus. So. Und natürlich das Gleiche tun. Fahren wir Richtung H? Einfach so? Jetzt ist alles schön auf die Mitte ausgerichtet. Jetzt natürlich ein tierärztlicher Rotz, es. Noch nicht fertig. Während der Großteil der Website selbst auf sehr kleinen Bildschirmgrößen ziemlich gut aussieht , müssen wir einige Dinge anpassen. Also hier z.B. Du könntest, ja, wir können es in der Tablet-Ansicht machen. Der Abstand zwischen diesen Zeilen ist mir ein bisschen zu groß. Selektive Hauptüberschrift, solange Sie sich im Breakpoint des Tablets befinden. Und gehen Sie zu Ihren Höhenoptionen in der V-Topographie. Und reduzieren wir diese Zeilenhöhe. Wie 1.21. Sieht ziemlich anständig aus. Lassen Sie uns das an den anderen Breakpoints überprüfen. Ja, das sieht gut aus. Obwohl je kleiner der Bildschirm wird, denke ich, wenn unsere Überschrift etwas kleiner sein muss, ist es ein bisschen viel. Also in die mobile Landschaftsansicht. Stellen Sie sicher, dass wir eine Größe wie vielleicht 48 hinzufügen. Ja, das sieht ziemlich verdammt gut aus. Lassen Sie uns das bei der kleinsten Größe überprüfen. Damit bin ich zufrieden. Nun, eine Sache, die ich jetzt ändern möchte, diese Patente an Berg als nächstes, nun nebeneinander. Im Querformat musst du sie allerdings in der tatsächlichen mobilen Ansicht anpassen, ich möchte nicht, dass sie so zusammengedrückt werden. Gehen wir zu unserem Hero Pattern Wrapper. In unserem mobilen Breakpoint. Lass uns sehen. Rechtfertige sie. Ändern Sie die Richtung der Flexbox auf vertikal und richten Sie sie so aus, dass sie zentriert sind. Mal sehen, wie der Rest der Website aussieht. Ich glaube, das will ich eigentlich, ich finde, sie sehen auch in einer kleineren Größe ziemlich gut aus. Die Preisgestaltung funktioniert auch. Das einzige, was wir wirklich anpassen müssen, ist die Fußzeile. Gehen wir also zurück zu V0. Klicken Sie auf Ihrem Foto auf Komponente bearbeiten. Und jetzt eine Sache. Zuallererst müssen wir sicherstellen, dass wir, Netflix, tatsächlich gleich bleiben. Also 18 Pixel, 1,5 e m. Im Moment bezieht es die Informationen aus dem Knaflic-Wert , der aus unserem mobilen Menü stammt , das wir zuvor erstellt haben. Da wir jedoch die Fußzeilenklasse angewendet haben, können wir diese Werte wieder auf 18 ändern. Und ich möchte auch das Entfernen entfernen, vielleicht den unteren Rand etwa sechs machen. Das sieht viel besser aus. Ich denke, für die mobile Landschaft können wir sie auf zwei Säulen belassen. Immobile Version, aber ich möchte großartig sein. Nicht zwei Spalten, sondern 22 Zeilen, so. Wir wollen auch den Abstand, den wir zwischen beiden Routen beibehalten haben , auf etwa 36 Pixel erhöhen . Wenn Sie es jetzt in der Vorschau anzeigen, sieht es auf allen Bildschirmgrößen ziemlich gut aus. Und so machen Sie Ihre Websites responsiv. Wie Sie sehen können, ist das ein ziemlich einfacher Prozess. Sie würden sich einfach selbst durch Ihre Abschnitte führen. Jetzt können Sie das sogar am Ende Ihres Projekts tun. Oder Sie können das am Ende jedes einzelnen Abschnitts tun und dabei Anpassungen vornehmen. Lassen Sie uns alles nach Ihren Wünschen gestalten. 22. Hinzufügen grundlegender Animationen – Der Tab „Interaktionen“: In Ordnung, jetzt, wo wir Erstellung unserer Website fertig sind, schauen wir uns eine Vorschau an. Sie können sehen, dass es ziemlich anständig aussieht, aber etwas fehlt. Und das sind einige grundlegende Animationen. Sobald wir nach unten scrollen, möchten wir, dass dieser Abschnitt reibungslos von unten eingeblendet wird. Nur damit es ein bisschen interaktiver ist. Nun, wie machen wir das? Nun, als ich dir den Style-Manager und die Benutzeroberfläche gezeigt habe , schnell über das Interaktionsmenü gesprochen, das du hier oben in deinem Style-Manager findest. nun das Menü „Aktionen“ verwenden, können wir sehr einfach einige grundlegende Animationen oder sehr komplexe Animationen für jeden unserer Abschnitte und für jedes unserer Elemente erstellen sehr komplexe Animationen für jeden unserer Abschnitte . Nun, so wie ich es zumindest in diesem Beispiel gerne mache , stellt sicher, dass Sie Ihren Container auswählen. Jetzt werden wir das wirklich einfach machen, also werden wir nicht zu viel Zeit mit diesen Animationen mit einer Menge Folien und Effekten und so verbringen diesen Animationen mit einer Menge . Was wir wollen, ist, dass das langsam verblasst. Also müssen wir uns zunächst überlegen, was genau wir animieren wollen? In unserem Fall möchten wir nun, dass der Text und die Schaltflächen langsam eingeblendet werden. Wir wollen nicht verblassen und den gesamten Abschnitt. Also wählen sie unseren Container aus. Sie dann in unseren Elementen in unserem Aktionsbereich Gehen Sie dann in unseren Elementen in unserem Aktionsbereich zum Elementauslöser und klicken Sie auf das Plussymbol. Und hier haben wir ein paar Auslöser. Löse unsere Animationen aus. Das kann ein Mausklick sein, das können Hover-Effekte sein. Für die meisten von uns. Was wir wollen, ist in die Ansicht zu scrollen. Sobald sich das Element in unserem Viewport befindet, beginnt die Animation. Wenn wir nun auf In die Ansicht scrollen klicken, haben wir dieses neue Menü genau hier. Zunächst können wir die Aktion auswählen. Was sollte also passieren , wenn das Element in die Ansicht scrollt? Wie Sie sehen können, haben wir eine Reihe vorgefertigter Animationen zur Auswahl, aber wir können auch benutzerdefinierte Animationen erstellen . Für diesen Kurs verwenden wir nun verwenden wir die vorgefertigten Animationen. Da wir nur die Grundlagen ansprechen möchten, kann das Lesen benutzerdefinierter Animationen Lesen benutzerdefinierter Animationen extrem zeitaufwändig sein und ist etwas komplizierter und komplexer. In Ordnung, wir wollen, dass das von unten rein geht. In diesem Drop-down-Menü wählen wir also die leichte Animation aus. Und jetzt haben wir eine Reihe verschiedener Optionen. Sie können es hineingleiten lassen, wir können es herausziehen lassen. Und wie Sie sehen können, haben wir auch diesen Vorschau-Button. Im Moment ist es also auf von links eingestellt. Und wenn Sie es in der Vorschau ansehen, wird es von links eingeblendet. Jetzt wollten wir von unten reinrutschen. Sie wählen also dieses Drop-down-Menü von unten aus. Sehen wir uns eine Vorschau an. Lassen Sie uns eine kleine Verzögerung hinzufügen. Also etwa 200 Millisekunden. Das sieht viel besser aus. Jetzt können wir auch eine Animation hinzufügen, wenn sie aus dir herausgescrollt wird. Nun, das wollen wir in diesem Fall nicht, aber die Option ist immer da. Und natürlich können wir V-Animation auch auf bestimmte Breakpoints beschränken. Darunter befinden sich nun die Element- und Klassenschaltflächen. Jetzt können wir auswählen, womit die Animation nur auf dem Element beginnen soll oder soll sie auf der gesamten Klasse sein? allen Klassen mit den Klassen für Ölbehälter wird diese Animation also innovativ sein. Wir haben auch dieses Drop-down-Menü. Und wie Sie sehen können, haben wir unsere beiden Klassen. Also Container, Entität, Klasse weiß. Wenn Sie darauf klicken, können Sie die einfache Containerklasse auswählen. Das macht jetzt jedes einzelne Element das die Containerklasse angewendet wird. Wir werden diese Folie animiert haben. Lass es uns schließen. Jetzt. Wenn Sie die Animation bearbeiten möchten, wählen Sie einfach das Element mit der Animation aus. Um auf diese Animation zu klicken, klicken Sie hier. Und jetzt haben Sie alle Ihre Bearbeitungsmöglichkeiten. Sie können auch anhand dieses grünen Symbols oben rechts sehen, ob ein Element animiert ist . In Ihrem Navigator an der Seite. Sehen wir uns nun eine Vorschau unserer Website an. Wie du siehst. Die Elemente sorgen für dieses Wachstum. Und sobald wir nach unten scrollen, , da all diese USB-Container derselben Klasse sie langsam eingeblendet, da all diese USB-Container derselben Klasse angehören. Und das verleiht der gesamten Website ein etwas vollständigeres Gefühl. Jetzt ein Visum, nur die Grundlagen von Interaktionen. Wenn Sie wirklich viel Zeit damit verbringen, können Sie einige erstaunliche und einzigartige Interaktionen für Ihre Website erstellen . Eine Sache, die Ihnen vielleicht aufgefallen ist, ist, dass sowohl die Navigation als auch unsere Fußzeile eingeblendet werden. Nun, das ist nicht etwas, was ich will. Was wir also tun werden ist, einfach die Containerklasse für unsere Navigation zu duplizieren und unserer Fußzeile zu folgen und ihren Namen zu ändern. Klicken wir also auf Ihre Navigation und dann auf Komponente bearbeiten. Und suchen Sie nach der Containerklasse. Und was wir tun werden, ist einfach auf dieses Drop-down-Menü und dann auf Klasse duplizieren zu klicken . Und nennen wir das Nav-Container. Einfach so. Wenn Sie nun eine Vorschau anzeigen, wird die Navigation, wie Sie sehen können , nicht eingeblendet. Lassen Sie uns den gleichen Vorgang für unsere Fußzeilenkomponente, den B-Container, wiederholen. Und geben wir ihm einfach den gleichen Class-Nav-Container, wie diese EC2-Instance. Und lass uns sehen. Wie Sie sehen können, verblasst es nicht mehr. Genau so, wie wir es wollten. Und so erstellen Sie einige grundlegende Animationen für Ihre Website. Jetzt empfehle ich Ihnen , einfach mit diesen verschiedenen Optionen herumzuspielen . Weil wir das wirklich getan haben, gibt es wirklich keine Grenzen für das, was wir mit den Interaktionen tun können. Also wann immer du eine Idee für eine Animation hast , die du willst, gib Gas, probiere sie aus und versuche sie zu bauen. 23. Unsere Buttons mit verschiedenen Seiten und Abschnitten verlinken: Ordnung, in diesem Vortrag werden wir über das Verlinken von Schaltflächen und unseren Links sprechen. Jetzt sind wir fertig, wir haben unsere Website so gut wie fertiggestellt. Wir haben die Animation fertig und alles ist erledigt. Es reagiert auf Mobilgeräte. Das einzige, was noch übrig ist, ist, diese Schaltflächen zu markieren. Wie Sie sehen können, wenn Sie auf einen dieser Links der Andenmuster klicken . Nichts passiert, weil wir noch nicht gesagt haben, was passieren soll. Nun, was wollen wir eigentlich erreichen? Ich möchte, dass, wenn ich auf die Feature-Schaltfläche klicke, die Seite scrollt, sodass sie zu Feature-Abschnitten wird. Und das Gleiche gilt für die Preisgestaltung und den Kontakt. Und wenn diese beiden Knöpfe hier sind. Lassen Sie uns nun mit dem Heldenbereich beginnen. Wenn ich also möchte, wenn ich auf die Schaltfläche „Kontakt aufnehmen“ klicke, möchte ich, dass das Muster mich bis zum Kontaktformular führt, das wir erstellt haben. Wie verknüpfen wir das nun? Wenn Sie also Ihre Schaltfläche auswählen und zu Ihren Elementeinstellungen gehen, haben wir hier die Link-Einstellungen. Wir können das Muster mit einer bestimmten URL verknüpfen. Wir können es mit einer Seite auf unserer Website verlinken. Sie können es mit einem Abschnitt verknüpfen , den wir wollen. Und wir können auch sagen, dass Sie eine E-Mail von einer Telefonnummer oder sogar einen Dateidownload öffnen möchten . Jetzt möchten wir auf einen bestimmten Abschnitt verlinken. Gehen wir also hier zum Abschnitt und wählen Sie einen Seitenabschnitt aus. Wie Sie sehen können, haben wir nur diese E-Mail-Abschnitte und diese stammen aus unserem Kontaktformular. Sie sind vorgefertigt zum Bett gemacht. Zuallererst müssen wir Webflow mitteilen, was jeder Abschnitt ist. Wir müssen ihnen eine sogenannte Idee geben. Also die wenigen Helden-Sektionen ausgewählt, z.B. in den Elementeinstellungen. Die erste Option ist mit dem ID-Feld für auf Seite Lincoln. Und hier können wir diesem Abschnitt einen Namen geben. Nennen wir es Held. Und jetzt wird diese Heldenabteilung Hero heißen. Wenn du auf unseren Button gehst und wir einen Seitenbereich auswählen, haben wir hier den Heldenbereich. Ordnung, lassen Sie uns diesen Vorgang wiederholen und all unseren Abschnitten eine Vorstellung geben. Das wäre also der Feature-Bereich. Das musst du n. Do nicht geben . Wir möchten zurück zu unserem Preisbereich verlinken? Und auch unser Kontaktbereich. So. Eine weitere Sache, die wir wollen, ist, dass wir, wenn Sie auf das Logo klicken , ganz nach oben scrollen möchten. Also müssen wir auch unsere Navigation und ID angeben. Lassen Sie uns also diese Komponente bearbeiten und ihr eine Idee geben. Nennen wir es einfach Navi, so. In Ordnung, jetzt fangen wir an, diese Abschnitte miteinander zu verknüpfen. Fangen wir also mit D an, gehen wir in die Einstellungen für die Touch-Taste und die MP-Elemente ein. Abschnitt Lincoln. Und lass uns nach dem Kontakt suchen. Und jetzt mit dem ausgewählten, dem Kontaktbereich für den Link. Wenn Sie eine Vorschau anzeigen und wir auf diese Schaltfläche „ Abrufen und Berühren“ klicken. Wie Sie sehen können, scrollen wir reibungslos bis zum Kontaktformular, das wir erstellt haben. Und einfach so können wir all diese Abschnitte miteinander verknüpfen. Lassen Sie uns diesen Vorgang nun für die verbleibenden Links wiederholen, z. B. für die Preisschaltfläche oder für Sie im Abschnitt Verlinkung. Und suchen Sie nach dem Preisbereich. Eigentlich könnten wir diese auch miteinander verknüpfen. Geben wir diese Abschnitte und die ID an. Nennen wir das also Design. Wir können diese Schaltflächen auch verknüpfen. Das wird Entwicklung sein, und das wird Veröffentlichung sein. Einfach so. Und jetzt wähle V Design Link. Und wählen Sie den V-Designbereich. Entwicklungslink wird mit dem Entwicklungsbereich verknüpft. Und der veröffentlichte Link wird im Abschnitt „Film veröffentlicht“ verlinkt ganz unten im Abschnitt „Film veröffentlicht“ verlinkt. In Ordnung. Jetzt haben wir einige Markt- und Touch-Buttons. Und wir können das mit unserem Kontaktbereich verknüpfen. Also werden wir diese Schaltflächen jetzt nicht verlinken. Lass uns an unserer Navigation arbeiten. Bearbeiten Sie also die Komponente und wählen Sie den Navigationslink für die Funktionen aus. Wir möchten, dass dies auf einen Abschnitt verweist. In diesem Fall gehst du also zu den Knaflic-Einstellungen und wählst unter Typ einfach Abschnitt aus und wählst einen Seitenbereich aus, der Feature sein soll. Machen wir dasselbe für den Preiseintragstyp von der externen URL zum Abschnitt. Und verlinke es mit dem Preisbereich. Und das Gleiche gilt für den Kontakt. So. Jetzt wollen wir auch dieses Logo verlinken. Wählen Sie den Markenblock in Ihrem Navigator aus, um einen Link-Blog zu erstellen, d. h., wo wir einen Link zu ihm verbinden können. Sie hier in den Markeneinstellungen den Eintragstyp aus dem externen URL-Bereich ein. Und setzen wir das auf Neff. Sobald wir auf diese Schaltfläche klicken, bleiben wir automatisch auf dieser Seite. Eigentlich könnte ich es schaffen und es einfach mit Paige verknüpfen. Paige ist zu Hause. Wenn du also darauf klickst, wird die Seite neu geladen und wir gelangen bis zur Homepage. Und jetzt gehen wir zur Fußzeilen-Bearbeitungskomponente. Und lassen Sie uns auch die Nav-Links verlinken. Dieses Mal wird der Home-Link der Abschnitt Neff sein. Ganz oben werden die Dienste also mit dem Abschnitt Dienste und dem Feature-Bereich verknüpft . So nannten wir es, indem wir Foucault zu Preis und Kontakt erhoben haben. Wir gehen zum Kontaktbereich. Lassen Sie uns nun auch diese Service-Links miteinander verknüpfen. Also ein Design, wir werden die Schilderabteilung sein, die Entwicklung. Wir gehen zum Entwicklungsbereich und Publizieren geht zum Verlagsbereich. Jetzt müssen wir natürlich unseren Linkblock aus dem Logo, aus unserem Foto bearbeiten . Und nass verlinken wir auf die Seite. Einfach so. Okay, jetzt schauen wir mal, ob alles rechtlich funktioniert. Sie können den Preisbereich erstellen. Das bringt uns zur Preisgestaltung. Du klickst auf Kontakt aufnehmen. Du scrollst hier nach unten. Wenn Sie zu unseren Fußzeilenlinks gehen und auf Home klicken, werden Sie ganz oben sein. Und unsere Navigationslinks sollten auch funktionieren. Gehen wir also zum Feature-Bereich. Ja, jetzt ist alles schön miteinander verknüpft, so verknüpfst du deine Buttons und all deine Links miteinander und bringst deine Website zusammen. 24. Veröffentlichung der Website: Ordnung, also in dieser letzten Vorlesung werden wir zuerst einige Änderungen an unserem Design vornehmen. Und dann werden wir über die Veröffentlichung der Website sprechen . Oh, es ist live und für jeden verfügbar. Lassen Sie uns nun zunächst diese Website durchgehen und einige der Dinge ansehen , die wir möglicherweise ändern möchten. In dieser Helden-Sektion hat mich zum Beispiel von Anfang an der Abstand zwischen diesen Elementen gestört . Ich möchte etwas Moos machen, etwas mehr Abstand zwischen dem Absatz und diesen beiden Schaltflächen hinzufügen etwas mehr Abstand zwischen dem Absatz und diesen beiden Schaltflächen und auch den Abstand zwischen der Überschrift und dem Absatz verringern . Wählen wir nun zunächst die Hauptüberschrift aus. Und wir setzen die Marge auf Null. Unten, Rand auf Null, so. Als Nächstes wählen wir die Wrapper-Klasse für Hero-Buttons und wenden einen oberen Rand darauf an. Vielleicht scheinen 24, 24 Pixel völlig in Ordnung zu sein. Als Nächstes möchten wir noch den Abstand zwischen diesen beiden Spalten ändern . Wählen Sie Sie also aus, um zu quadrieren. Und der Grund, warum ich das im weißen Bereich mache, ist, dass wir einfach ein bisschen besser sehen, wie nah sie wirklich beieinander sind. Wählen Sie also Ihr Raster und vergrößern Sie den Abstand ein wenig. Aber es scheinen zwei Pixel in Ordnung zu sein. Ja, es sieht wirklich gut aus. Und ich denke, das war es für den letzten Schliff, den ich machen wollte. Und jetzt lassen Sie uns über die Veröffentlichung der Deal-Website sprechen. Sie haben also diese Schaltfläche „ Veröffentlichen“ hier oben. Und wenn Sie darauf klicken, können Sie sehen, dass wir diese Staging-Domain haben, diese Subdomain, aber wir können unsere Website auf veröffentlichen. Moment ist es also das Skillshare-Projekt und diese Zahl Punkt Webflow Punkt io. Jetzt können wir diese Website unter der Domain vet veröffentlichen und sie wird live im Internet verfügbar sein und jeder kann darauf zugreifen. Er kann auch eine benutzerdefinierte Domain damit verbinden. Das ist jedoch nur mit einem Lageplan möglich. Wenn du also kostenlos bleiben möchtest, also nicht für das Hosting bezahlen willst oder wenn es nur ein Übungsprojekt ist, kannst du keinen Kunden mit der Verwaltung verbinden. Um das Projekt nun auf dieser Staging-Domain zu veröffentlichen, klicken Sie einfach auf In ausgewählten Domains veröffentlichen. Jetzt warten wir ein bisschen, bis es veröffentlicht wird. Und jetzt, wie Sie sehen können, erfolgreich veröffentlicht. Wenn Sie jetzt hier darauf klicken, können Sie das Projekt auf dieser Domain öffnen. Und wie Sie sehen können, funktioniert alles einwandfrei. So wie wir es wollten. Das Tolle an Webflow ist, dass wir wirklich schnelle Änderungen vornehmen können. Und wenn wir es einmal veröffentlicht haben, ist es tatsächlich vollständig, es wird unglaublich schnell aktualisiert. Nehmen wir an, wir möchten die Farbe dieser Überschrift ändern. Wählen Sie die Hauptüberschrift aus und wechseln Sie zur Registerkarte Farbe. Und lass uns einfach gehen. Wenn diese hellblaue Farbe, sieht es nicht gut aus, aber es ist alles nur zur Demonstration. Gehen Sie zurück zu Veröffentlichen, Veröffentlichen, um die Domains auszuwählen. Kehren wir nun zu unserem Projekt zurück und aktualisieren die Website. Wie Sie sehen können, ist die Änderung bereits aktiv. Gehen wir zurück zu all dem Flow-Projekt. Verschiebe diese Änderung und veröffentliche sie auf Small, um die blaue Farbe zu entfernen. In Ordnung? Wenn Sie nun einen Kunden dazu verbinden möchten, müssen Sie zu Ihren Seiteneinstellungen gehen. Klicken Sie also auf dieses Menü, Seiteneinstellungen. Und dann haben wir Land und Abrechnung. Und hier haben wir all die verschiedenen Lagepläne. Nun, wie Sie auf der Startseite sehen können. Also machen wir Dollar pro Monat mit der kostenlosen Version. Wir haben die Webflow Dot io Domain. Jetzt, sobald Sie gehen, einmal, angefangen mit den Grundlagen für 14$ pro Monat, wenn Bill, haben Sie im Idealfall Zugriff auf eine benutzerdefinierte Domain und können eine benutzerdefinierte Domain damit verbinden. Sobald Sie, wenn Sie diesen Weg gehen, erstellen möchten Ihren eigenen Blog oder Ihre eigene persönliche Website erstellen möchten, gibt es verschiedene Möglichkeiten, eine Domain zu verbinden. Am einfachsten ist es, dies einfach über Webflow zu tun. Wenn Sie also auf Veröffentlichen klicken, haben Sie hier einige Optionen für eine benutzerdefinierte Domain. Und Sie können eine Domain entweder direkt über Rep Flow mithilfe von Google-Domains kaufen . Die Einrichtung ist unglaublich schnell. Oder geben Sie die Domain ein, die Sie woanders gekauft haben. Und dann wird es dir wie ein Onboarding geben. Abhängig von Ihrem Hosting oder dem Ort, an dem Sie gekauft haben, werden Ihre wichtigsten Schritte etwas anders sein. Es ist überhaupt nicht schwierig. Es ist eigentlich unglaublich einfach. Für diese Website , die wir erstellt haben, bleiben Sie nun bei der Backflow-Punkt-IO-Domain. Und so veröffentlichen wir unsere Website. Eine weitere Sache, die ich Ihnen zeigen möchte, ist wieder im Designer-Panel. Wir designen. Wir haben auch die Schaltfläche „ Teilen“, wir einen schreibgeschützten Gedanken teilen können, um dies umzuschalten. Wir haben diesen neuen Link, den wir aber an unsere Mitarbeiter und Kunden senden können. Und das gibt ihnen diese Editor-Ansicht. Und wir werden in der Lage sein, Änderungen an dieser Website vorzunehmen. Sie werden jedoch nicht gespeichert. Also quasi nach dem Öffnen dieses Event-Flow-Editors können sie alle verschiedenen Elemente und ähnliches untersuchen . Raus, alles zu zerstören, was von Menschenhand geschaffen wurde. Das sind also die Links, die nur gelesen werden können. Also vielleicht brauchst du Hilfe bei etwas. Sie können einen reinen Rasterlink angeben und jemanden Ihr Projekt ansehen lassen. Und vielleicht kannst du den Pfeil so finden. Das ist auch sehr wichtig. 25. Schlussbemerkung: Ordnung, jetzt, wo Sie Ihre allererste To-Webflow-Website erstellt haben, haben Sie das Ende dieses Kurses erreicht. Also, was kommt als Nächstes? Nun, ich empfehle Ihnen dringend , mit Webflow herumzuspielen und verschiedene Layouts auszuprobieren. Und Sie arbeiten einfach an einer Reihe verschiedener Projekte zu gewöhnen, der Workflow-Editor zu sein und wie Websites erstellt werden. Wenn Sie jetzt noch Fragen oder Restaurants haben, können Sie mir einfach eine Nachricht senden oder im FAQ-Bereich nachfragen. Und ich werde mich so schnell wie möglich bei Ihnen melden und versuchen, Ihnen zu helfen. Damit. Ich danke dir, dass du dir diesen Kurs angesehen hast und wir sehen uns beim nächsten Mal.