Komplettes Webdesign von Figma zu Webflow (neue Benutzeroberfläche)

1. Kurs-Übersicht: Menschen, die ihr Leben mit freiberuflichem Webdesign versuchen , schaffen es nicht. Es gibt drei große Hindernisse, mit denen sie konfrontiert sind, und eines nach dem anderen entfernt sie jedes dieser Hindernisse von ihrer Reise. Diese Kurse sind eigentlich drei in einem, drei Kurse zur Überwindung dreier großer Hindernisse. Das große Hindernis Nummer eins, Programmieren zu lernen, dauert einfach zu lange. Hunderttausende von Studenten nehmen an Webdesign-Kursen teil, aber nur 10%, kaum 10% schaffen es bis zum Ende Ich weiß das, weil mir genau das passiert ist. Bevor ich wusste, wie man Websites erstellt, war ich nur ein visueller Designer. Ich entwarf die Mockups, einen Prototyp einer Website, und ich gab das meinem Kunden, und der Kunde gab diese Designs dann dem Webentwickler, normalerweise einem WordPress-Entwickler, und diese Person erstellte dann die gesamte Mir wurde klar, dass ich eine Menge Geld auf dem Tisch liegen ließ. Wenn ich auch die gesamte Website erstellen könnte, würde ich den ganzen Kuchen für mich nehmen. Also beschloss ich, mich für einige Programmierkurse und Kurse anzumelden , um Webdesign im Hinblick auf das Erstellen einer Website zu lernen im Hinblick auf das Erstellen einer Website und fing an, HTML und CSS und Jascrit und all das zu lernen und CSS und Jascrit und all Nun, da ich bereits an echten Projekten gearbeitet habe und weiß, was meine Kunden, echte Kunden, in Bezug auf die Funktionalität der Website verlangen, und oft fragen sie nach komplizierten und komplexen benutzerdefinierten Interaktionen und Animationen Also habe ich untersucht, wie das mit dem, was ich bereits weiß, gemacht werden könnte und wie viel ich noch lernen muss. Als ich mir das Gesamtbild ansah, wurde mir klar, dass ich bisher so viel gelernt hatte. Ich dachte, ich hätte noch so viel zu lernen, um liefern zu können, was meine Kunden normalerweise verlangen. Aber in Wirklichkeit war so viel noch übrig. Ich habe die ganze Sache mit dem Programmieren bis zu einem unbestimmten Zeitpunkt in der Zukunft beiseite gelegt bis zu einem unbestimmten Zeitpunkt in der Zukunft Aber dann bin ich auf ein Webdesign-Tool namens Webflow gestoßen, und Ich habe es geöffnet und mir einige Video-Tutorials angesehen. Innerhalb weniger Stunden erstelle ich eine komplette Website von Grund auf neu mit benutzerdefinierten Interaktionen, ohne Vorlagen und nichts. War umgehauen, Liebe auf den ersten Blick. Ich begann, meinen Kunden das komplette Verpackungsdesign und die Entwicklung anzubieten das komplette Verpackungsdesign und die Entwicklung Den Kunden gefiel die Tatsache, dass ich das Ganze gemacht habe, und sie fingen an, begeistert zu sein. Das ist mir noch nie passiert. Webflow beseitigt das größte Hindernis, mit dem Sie jemals konfrontiert werden : Zeit und Hingabe, um zu lernen, wie man eine Website programmiert Mit Webflow ist es schneller, reibungsloser und macht kilometerweit mehr Sie werden lernen, wie Sie tolle Websites so gut wie ein professioneller Webdesigner erstellen können, ohne eine einzige Codezeile schreiben zu müssen Webflow ist eine Art Kraftpaket , dem große Marken wie Discord, Upwork und Dropbox Und die kreativen Fähigkeiten von Webflo sind so groß, dass die weltweit führenden Designagenturen Webflow nutzen , um preisgekrönte Websites für Prominente wie Lando Norris bereitzustellen groß, dass die weltweit führenden Designagenturen Webflow nutzen, um preisgekrönte Websites für Prominente wie Lando Norris bereitzustellen. So können Sie sicher sein , dass Ihre Energie auf ein wirklich mächtiges Werkzeug gerichtet ist ein wirklich mächtiges Werkzeug gerichtet Webflow ist auch ein KI-Site-Builder. Was Weblos AI einzigartig macht, Was Weblos AI einzigartig macht ist, dass die Ausgabe im Gegensatz zu herkömmlichen KI-Buildern vollständig über ihren visuellen Designer bearbeitet werden kann Sie müssen sich nicht mit einem Chat-Bot herumschlagen, um das gewünschte Aussehen zu erzielen, aber das ist nur die Spitze des Eisbergs Unternehmen benötigen mehr als nur eine Website. Sie benötigen ein ganzes Ökosystem, starke SEO-Tools, Unterstützung in mehreren Sprachen, ein CMS, das auch technisch nicht versierte Personen einen Bereich nutzen können , in dem Marketer Kampagnen starten können, ohne die Website zu beschädigen, eine benutzerfreundliche Art, den Inhalt der Website zu bearbeiten , und Bei anderen KI-Buildern sind Sie so ziemlich auf sich allein gestellt, um das zusammenzusetzen, aber Webflow bietet all das sofort einsatzbereit Das ist ein Grund, warum selbst das weltweit führende KI-Modell für Codierung, Cloud, seine Marketing-Website auf Webflow aufbaut Nach diesem Titel gibt es ein Video, Was ist Webflow. Sie können es sich ansehen, wenn Sie weitere Informationen benötigen bevor Sie sich für den Kurs anmelden Nach einigen mutigen Schülern, die den gesamten Lernprozess überstanden haben, wartet ein Hindernis Nummer zwei. Sie können eigentlich nicht gut entwerfen. Da sich fast alle Webdesign-Kurse auf den technischen Teil konzentrieren , also auf Codierung, HTML, CSS, JavaScript und all das. Das Design selbst ist jedoch Teil des Bereichs Grafikdesign. Dinge wie Farbtheorie, Typografie, Fotografie, es ist mehr Kunst Und die meisten von ihnen lernen diese entscheidende Fähigkeit nie lernen diese entscheidende Fähigkeit Und was die meisten Webdesigner tun, sie verwenden Themen und Vorlagen. Und manchmal ist das eine legitime Sache, aber hochbezahlte Kunden wollen keine Template-Site. Sie werden nicht Tausende für die Installation eines WordPress-Themes bezahlen , oder? Sie wollen ein schönes, individuelles Design, mit dem sie ihrer Konkurrenz einen Schritt voraus sind, was auch immer ihr Geschäft ist. Und wenn Sie ein Webdesigner sind, der das bieten kann, ziehen Sie nicht nur hochbezahlte Kunden an, sondern auch Ihre Konkurrenz ist geringer, weil nicht viele Webdesigner wissen, wie das geht Also werde ich dir Grafikdesign beibringen, aber nur das, was für das Web benötigt wird So können Sie lernen, schöne und individuelle Websites zu entwerfen . Sie müssen nicht kreativ sein oder irgendwelche Voraussetzungen haben. Wenn du eine Maus bewegen und Farben sehen kannst, werde ich dir beibringen, wie man gestaltet. Design ist ziemlich einfach. Es gibt Regeln , Richtlinien und viele versteckte Tricks, und es macht höllisch Spaß. Um diese Designs zu erstellen, müssen wir ein Interface-Design-Tool verwenden. Sie sehen, großartige Websites werden nicht sofort erstellt. Zunächst müssen Sie einen Prototyp entwerfen. So etwas wie eine nicht funktionierende Zeichnung der Seite, und dann entwickelst du sie. Dafür werden wir das beste Tool auf dem Markt verwenden , nämlich Figma Es ist kostenlos, einfach zu bedienen und dennoch leistungsstark. Sie werden Designübungen und Projekte haben. Du entwirfst Unternehmenswebsites, du entwirfst einen Blog. Sie lernen den Prozess professioneller Designer kennen, vom Schreiben einer Projektbeschreibung über die Erstellung von Drahtkonstruktionen bis hin zur Gestaltung des endgültigen Prototyps Im dritten Kurs lernst du, wie du eine erfolgreiche Frequenz erreichst , weil viele Webdesigner bei diesem letzten Schritt stolpern Sie fühlen sich sehr verwirrt. Sie wissen nicht, wie sie sich selbst einen Preis geben sollen. Sie wissen nicht, wie man erfolgreiche Angebote schreibt, wie man Kunden anspricht und wie man Verhandlungen führt und all das. Und zu guter Letzt überlasse ich Ihnen ein Geschenk, eine tolle Portfolio-Website die ich für Sie entworfen und gebaut habe. Sobald Sie mit diesem Kurs fertig sind, werden Sie eine glänzende, beeindruckende Portfolio-Website mit Portfolio-Arbeiten aus diesem Kurs haben beeindruckende Portfolio-Website mit Portfolio-Arbeiten aus diesem Kurs , die bereits darauf veröffentlicht wurden. Die meisten Webdesigner haben eigentlich keine persönliche Website. Sie werden keine Schwierigkeiten haben Ihre potenziellen Kunden zu beeindrucken Ich bin Acoshelli und werde Sie auf dieser Reise begleiten. Jetzt müssen Sie sich nur noch anmelden . 2. Was ist Webflow?: In diesem Video möchte ich einige Fragen beantworten, die Sie möglicherweise zu Webflow haben . Was ist also Webflow? Webflow ist ein No-Code-Website-Builder , der sich von allem anderen unterscheidet Es hilft Ihnen, responsive Websites von Grund auf neu zu entwerfen und zu erstellen , wie es jeder professionelle Webdesigner tun würde, aber ohne Code zu schreiben Nun, Webflow schreibt es tatsächlich für Sie. Sie entwerfen alles visuell, während Webflow sauberen semantischen Code für Sie schreibt Sie können diesen Code dann entweder exportieren oder behalten und die Website in Webflow hosten Neben dem Webdesigner ist es eine CMS-Plattform, ähnlich wie Wordpress, was bedeutet, dass Sie komplette dynamische Websites wie Blogs und E-Commerce-Websites erstellen können komplette dynamische Websites wie Blogs und E-Commerce-Websites wie Blogs und E-Commerce-Websites Und hier ist ein wirklich großer. Mit Webflow können Sie umfangreiche Animationen und Interaktionen erstellen umfangreiche Animationen und Interaktionen Wenn Sie programmieren, sind dafür fortgeschrittene Javascript-Kenntnisse erforderlich Aber in Webflow machst du das visuell, ohne an den Code zu denken Webflow zu lernen fühlt sich an, als würde man eine neue Superkraft erlernen. Es ist wirklich ein bahnbrechendes Tool , das die Branche verändert hat Sie möchten Seitenbeispiele, die in Webflow erstellt wurden? Machen Sie sich keine Sorgen Webflow-Websites gewinnen regelmäßig bei Designwettbewerben wie awards.com Das ist Oscarsoft Web Design, und das sagt viel aus, wenn ein Tool für visuelles Design mit individuell codierten Websites konkurriert , die komplexe Animationsengines für Spiele verwenden komplexe Animationsengines für Spiele Nach der Übernahme und Integration von Greensock durch Webflow im Jahr 2025, das als Webanimationsengine Nummer eins gilt, werden wir noch viel mehr preisgekrönte Websites in Webflow sehen preisgekrönte Bereits im selben Jahr wurde eine Webflow-Seite, die für Lando Norris erstellt wurde , mit dem Side of the Year Award ausgezeichnet Beeindruckende Designs sind nicht der einzige Grund warum sich Marken für Webflow entscheiden Leistung und Funktionalität sind ein weiterer. Discord verwendet Webflow für die Hauptmarketing-Website und Upwork zwei für all ihre anwendungsfremden Seiten, Dropbox für ihre Marketingkampagnen und Dropbox für ihre Marketingkampagnen und Produkteinführungen. Und hier ist ein Clou. Sogar die Marketing-Website von Clod ist auf Webflow. Das ist ironisch, denn Clot ist das beste Modell für Bettwäsche. Keinem dieser Unternehmen fehlt es an Entwicklern , die ihre Websites per Hand oder Vibe codieren Sie sehen einfach mehr Vorteile in der Verwendung von Webflow. Wenn Sie weitere Beispiele wünschen, können Sie sich Webflow-Seitenpräsentationen auf Websites wie Lapan Ninja, awards.com oder direkt auf der Webflow Showcase-Seite ansehen Webflow-Seitenpräsentationen auf Websites wie Lapan Ninja, awards.com oder direkt auf der Webflow Showcase-Seite awards.com Nur ein paar Beispiele reichen aus, um zu zeigen, wie endlos die Möglichkeiten sind, was Sie mit Webflow endlos die Möglichkeiten sind, was Sie mit Webflow erreichen können. Als jemand, der in die Webdesign-Branche einsteigt, möchten Sie sicher wissen, wie Webflow im Vergleich zu anderen Tools in der Branche abschneidet , einschließlich Vibe-Coding Die Wahl des richtigen Tools für das Projekt ist äußerst wichtig Es gibt so viele Optionen, und wenn Sie einfach googeln, was das Beste ist, erhalten Sie die falschen Antworten, weil es keine besten gibt Sie alle haben ihren Platz und besetzen eine ganz bestimmte Nische, und innerhalb ihrer Nische sind sie sehr stark All dies zu vergleichen ist schwierig, aber wir können dies mit einem praktischen kleinen Diagramm namens Magic Quadrant Wir können zum Beispiel zwei wichtige Aspekte für Unternehmensseiten heranziehen, nämlich Leistung und Funktionalität des Designs, und die beliebtesten Tools auf dieser Skala grafisch Wir würden so etwas bekommen. Die Vibe-Coding-Tools, ich vereinige sie in einem, weil sie im Grunde alle gleich sind Die Methode des Bauens und Entwerfens ist identisch. Es ist aufdringlich. Und die Ausgabequalität hängt weniger von der Plattform als vielmehr vom verwendeten KI-Modell Ich gehe also einfach vom besten Modell für diesen Vergleich aus. Wix bietet aufgrund seiner nativen Tools für Unternehmen wie Restaurantmenüs, Hotelbuchungen, Terminplanung, Veranstaltungen usw. sowie eines starken App-Marktes für andere ergänzende Funktionen eine sehr hohe Funktionalität seiner nativen Tools für Unternehmen wie Restaurantmenüs, Hotelbuchungen, Terminplanung, Veranstaltungen usw. sowie eines starken App-Marktes für andere ergänzende Funktionen eine für andere ergänzende Aber du gewinnst keine Preise mit einer schwachen Seite. Es ist großartig für Leute , die ihre eigene Website erstellen, aber nicht für Designagenturen geeignet , die hochglanzpolierte Premium-Designs liefern möchten. Wenn es um Funktionalität geht, Wordpress mit seiner nahezu unbegrenzten Funktionalität aufgrund seines riesigen Ökosystems mit 60.000 Plug-ins nichts zu riesigen Ökosystems mit 60.000 Plug-ins Visuelle WordPress-Designer wie Elementor sind jedoch auf Widgets beschränkt, was bedeutet, dass Sie vorgefertigte Designs verwenden müssen Ja, sie können wunderschöne Optionen haben, aber sie werden Und die Ergebnisse werden allgemein gehalten sein , da jeder auf dieselbe Auswahl an Widgets und Komponenten zurückgreifen muss. Natürlich auch zu komplett einzigartigen Designs und Kriegsteilen, aber das geht nur mit individuell codierten Seiten ohne Visual Builder. Wenn es um Vibe-Codierung geht, hat es theoretisch unbegrenzte Funktionalität In der Praxis handelt es sich bei den meisten dieser Funktionen jedoch nicht um eine sofort einsatzbereite Website-Funktion Es handelt sich um einen generierten Code, ein Nicht-Programmierer möglicherweise nur schwer validieren und verwalten Bei herkömmlichen No-Code-Plattformen können Sie sich darauf verlassen, welche Funktionalität sie auch bieten Es wurde von Profis im Kampf getestet, gebaut und gewartet . Dies basiert auf der Bewertung von KI-Tools im Jahr 2026. Sie werden sich immer weiter verbessern und im Laufe der Zeit werden sie sich leicht nach rechts bewegen, aber die Prompt-to-Funktionalität wird im Vergleich zu nativen robusten Funktionen , die Sie nicht von Grund auf neu erfinden müssen, immer weniger überlegen sein nativen robusten Funktionen , die Sie nicht von Grund auf neu erfinden müssen Was die Designstärke anbelangt, so ist die Platzierung weniger fraglich. Selbst ein erfahrener visueller Designer kann KI nicht zuverlässig anweisen, einzigartige High-End-Designs zu erstellen Glaub mir, ich habe es versucht. Dies ist keine Einschränkung von AI Tech. Es ist eine Einschränkung der natürlichen Sprache selbst, denn ein Bild sagt mehr als 1.000 Worte. Es ist einfacher und schneller, unsere Vision selbst zu zeichnen , als sie mit Worten zu beschreiben. Aus diesem Grund sehen wir keine preisgekrönten Websites, die aus den Vibe-Coding-Tools hervorgehen Nur Webflow und Framer verdienen ihren Platz über der preisgekrönten Ihre Websites tauchen ständig auf Websites für Designwettbewerbe wie awards.com auf Websites für Designwettbewerbe wie awards.com Beide bieten die volle Kontrolle über das Design und extrem leistungsstarke Framer bietet einen datumsbasierten Animator , der einfach und leistungsstark ist, und Webflow bietet einen zeitleistenbasierten Animator , den Sie in professionellen Animationstools wie Adobe After Effects erhalten professionellen Animationstools wie Und im Vergleich zu Framer bietet Webflow bessere, etabliertere Funktionen für den geschäftlichen etabliertere In dem Bereich, in dem hohe Funktionalität auf hohe Designfähigkeiten trifft hohe Designfähigkeiten , werden Premium-Einnahmen erzielt Aus diesem Grund ist Webflow das Tool der Wahl für Designagenturen Beachten Sie, dass ich diese Tools für Geschäfts - und Marketingseiten evaluiere , nicht für Webanwendungen Diese Unterscheidung ist wichtig, da Unternehmensseiten und Webanwendungen sehr unterschiedliche Anforderungen haben und keiner dieser Site-Builder für Webanwendungen konzipiert ist, mit Ausnahme von Vibe-Code Es gibt andere Aspekte, die man vergleichen könnte und die eine ganz andere Geschichte erzählen würden Wenn wir hier zum Beispiel Funktionalität mit Benutzerfreundlichkeit vergleichen, würde Webflow aufgrund seiner Lernkurve ganz anders abschneiden aufgrund seiner Lernkurve ganz anders Webflow ist nicht etwas , in das man einfach und anfängt, Websites zu verwenden und zu erstellen Es ist nicht so intuitiv wie etwas wie vielleicht Square Space Es hat eine Lernkurve. Und das liegt hauptsächlich daran, dass es auf der regulären Codestruktur basiert , die ein normaler Webdesigner und Entwickler verwenden würde. Sie fügen beispielsweise HTM-Elemente in Webflow hinzu und stylen sie mithilfe von CSS-Klassen, genau wie man es bei der eigentlichen Codierung der Website tun würde bei der eigentlichen Codierung der Wenn Sie Erfahrung mit HTML und CSS haben, wird es sich auf jeden Fall als nützlich erweisen Aber wenn Sie keine haben, machen Sie sich darüber keine Sorgen. Ich werde dir alles beibringen, während wir gehen. Tatsächlich wirkt sich die Webflow-Lernkurve sogar zu Ihrem Vorteil aus, weil sie die einzige ist, die Sie dazu bringt, die unveränderlichen Grundlagen der Webentwicklung, das Box-Modell, die Flexbox, Klassen und die wunderbar seltsame Physik von HTML und CSS zu erlernen die unveränderlichen Grundlagen der Webentwicklung, das Box-Modell, die Flexbox, Klassen und die wunderbar seltsame Physik von HTML und CSS Diese Web-Grundlagen werden niemals irgendwohin führen. Wenn Sie sich eines Tages dazu entschließen , auf Coding oder Vibe-Coding umzusteigen, werden Sie dieses Wissen mitnehmen Es ist eine zeitlose Fähigkeit. Ibecding ist theoretisch am einfachsten anzuwenden und hat keine Lernkurve, weil man einfach damit spricht Aber für Nicht-Programmierer verwandelt sich diese Einfachheit in maximale Komplexität, verwandelt sich diese Einfachheit in sobald Sie Straßensperren sind häufiger als man denkt. Wix nimmt diese Kategorie mit nach Hause. Es ist sowohl funktionell als auch einfach zu bedienen. Das ist ihre Nische und sie dominieren sie. Es wurde so konzipiert, dass es benutzerfreundlich und für Geschäftsinhaber ohne technische Kenntnisse zugänglich ist. Alle Funktionen, die ein Unternehmen möglicherweise benötigt, von SEO bis hin zu Einkaufswagen , sind mit nur wenigen Klicks in einer geführten Benutzeroberfläche möglich Sie denken vielleicht, warum sollten Sie dann nicht Wochen oder quadratische Räume lernen , da sie am einfachsten sind Aber diese Leichtigkeit wirkt sich tatsächlich gegen Sie als Profi aus, der für sein Fachwissen bezahlt werden möchte Die Einfachheit bringt mehr Menschen auf den Arbeitsmarkt für Tools. Hier ist eine Weisheit zum Mitnehmen für Sie. Wenn Sie Geld verdienen wollen, es nicht einfach sein, das zu tun, was Sie tun , denn jeder kann einwöchige Patienten sammeln , um eine neue Fähigkeit zu erlernen , und sie werden den Arbeitsmarkt überfluten. Aber wenn das Erlernen einer Fähigkeit sechs Jahre dauert, dann werden nur sehr wenige Menschen so lange dabei bleiben. Deshalb werden Ärzte und Zahnärzte gut bezahlt und finden immer den Job. Es gibt kein leichtes Geld auf dieser Welt. Es gibt entweder hartes Geld oder kein Geld. Wir können weitermachen und verschiedene Aspekte vergleichen, und wir würden verschiedene Gewinner für verschiedene Nischen finden, wie Framer, der die Designstärke gegenüber der Benutzerfreundlichkeit einnimmt , und Vibe-Coding eine Nische , in der man relativ schnell eine einzigartige Komplexität erreichen muss einzigartige Komplexität erreichen All diese Tools finden ihre Nischen und konzentrieren sich auf sie. Dabei werden Aspekte zugunsten derjenigen geschult, die sie in ihrer Nische stärker machen letzten beiden wichtigen Aspekte, die ich aufzeigen möchte die Aspekte, die für die meisten Menschen vielleicht nicht so wichtig sind, aber für das Webdesign-Geschäft selbst sehr bedeutsam Qualität der Übergabe an den Kunden. Können Sie dies einem Kunden geben, der die Website später mühelos und professionell verwalten kann der die Website später mühelos ? Sieht das Endergebnis wie ein maßgeschneiderter Agenturbau oder ein Do-It-Yourself-Projekt Freelancer oder Agenturen, die bequem einen Premium-Webdesign-Service verkaufen möchten, müssen in der Lage sein, die Probleme des Kunden zu lösen. Ich sehe, dass Kunden ihre Website auf dem neuesten Stand halten Inhalte erstellen müssen Sie müssen den Text auf den Seiten aktualisieren. Sie müssen neue Blogbeiträge erstellen und so weiter. In WordPress müssen sie diesen Inhalt in einem sehr komplizierten, nicht sehr benutzerfreundlichen Admin-Panel von Clunky aktualisieren , das ungefähr so aussieht Diese Umgebung besteht aus vielen beweglichen Teilen, mehr Stellen, auf die man klicken kann, und einem höheren Risiko, dass Kunden in Dinge geraten , die sie nicht anfassen sollten In Webflow bearbeiten Kunden Inhalte jetzt direkt auf der Live-Seite Keine Admin-Panels und seltsame Texteditoren. Sie bearbeiten genau das, was sie sehen. Sie können Fotos ändern, Text aktualisieren und haben keine Möglichkeit, die Seite zu beschädigen. Be Coding hat zum Beispiel ein schreckliches Client-Handle. Es gibt kein visuelles Dashboard, mit dem ein Kunde seinen eigenen Blog oder Shop ohne technische Probleme verwalten kann. Sie sind so gut wie von ihrer eigenen Website ausgeschlossen. Webflow ist der Goldstandard in dieser Kategorie Mashup. Das wirklich nutzbare Content-Management-System und die spezielle Benutzeroberfläche von Webflow für Rollen wie Marketer und Inhaltsredakteure geben Unternehmen die Möglichkeit, ihre Website tatsächlich selbst zu betreiben Unternehmen die Möglichkeit, ihre Website tatsächlich selbst zu betreiben. Unternehmen werben ständig und erstellen Kampagnen, Seiten, Veranstaltungen, Produkteinführungen Sie brauchen mehr als nur eine Website. Sie benötigen eine Reihe von Backoffice-Tools und -Funktionen , um ihr gesamtes Web-Erlebnis zu verwalten. Das perfekte Gleichgewicht zwischen Design, Funktionalität und kundenseitigen Funktionen ist der Grund, warum Webflow zwischen Design, Funktionalität und kundenseitigen Funktionen ist der Grund, und kundenseitigen Funktionen ist für Designagenturen und Freelancer wie mich, die in Geschäftsmärkten tätig sind, zur ersten Wahl geworden Designagenturen und Freelancer wie mich, die in Geschäftsmärkten tätig sind, Es gab uns die Möglichkeit, Unternehmen extrem hochwertige Lösungen anzubieten , ohne die Plattform zu verlassen Ja, mit einer gewissen Lernkurve und einer langsameren Baugeschwindigkeit, aber das ist nicht der Aspekt, der meinen Kunden wichtig ist. Ich kann ihnen keine Plattform verkaufen , weil ich sie leicht erlernen kann. Das ist ein Problem für mich. Sie wollen Design , Leistung und Benutzerfreundlichkeit auf ihrer Seite. sich für Webflow entscheiden, bedeutet das nicht, dass Sie die Möglichkeiten der Vibe-Codierung nicht nutzen können Webflow hat auch AI Builder. Es hat tatsächlich zwei AppGen , die wie ein herkömmlicher AI App Builder funktionieren, genauso leistungsstark sind wie andere Builder das derzeit beste Modell verwenden, nämlich Cloud Der AI App Builder von Webflow bietet den zusätzlichen Vorteil , dass Sie damit Komponenten und CMS-Inhalte von Ihrer vorhandenen Website verbinden können Sie damit Komponenten und CMS-Inhalte von Ihrer vorhandenen Website verbinden CMS-Inhalte von Ihrer vorhandenen Jede Website hat wiederholte Komponenten wie Navigationsleisten, Fußzeilen, Anmeldeformulare, Abschnitte mit Erfahrungsberichten usw. Möglichkeit, diese direkt in Ihre Eingabeaufforderung einzufügen, ist sehr leistungsfähig, insbesondere da Sie diese Komponenten und Datenbankelemente vollständig kontrollieren im regulären Editor von Webflow visuell Dieser AI Builder erweitert offensichtlich die Funktionalitätsobergrenze von Webflow, und ich habe das in meinen vorherigen Vergleichen nicht einmal berücksichtigt in meinen vorherigen Vergleichen Apps und Seiten, die hier erstellt wurden können im Webflow Designer nicht bearbeitet werden Sie müssen sich wie bei jedem anderen Vibe-Code-Pool Ihren Weg durch den Pool bahnen Aber das zweite KI-Tool von Webflow, der Site Builder, ist in der Lage, eine visuell bearbeitbare Website zu generieren Diese Generation wird im Webflow-Designer bereitgestellt , wo Sie sie visuell bearbeiten können. In der nächsten Vorlesung werden wir diesen KI-Sidebuilder ausprobieren, also werde ich dort alle Nuancen behandeln Es gibt noch eine andere Art von Website, die Sie auf Webflow erstellen können, nämlich E-Commerce-Websites, auf die wir in diesem Kurs jedoch nicht eingehen werden Die Nachfrage nach E-Commerce-Websites viel geringer als bei normalen Websites Meine Empfehlung wäre daher , zum Webdesign und zur Webentwicklung von E-Commerce-Websites überzugehen , sobald Sie ausreichend echte Berufserfahrung mit regulärem und allgemeinem Webdesign gesammelt haben. macht nicht viel Sinn, direkt in die komplexe, etwas komplexere Webentwicklung einzusteigen, bei der es sich eher um etwas komplexere Webentwicklung einzusteigen, E-Commerce als um normale Websites handelt, was viel einfacher und viel unkomplizierter ist. Webflow ist kostenlos, bis Sie die Website veröffentlichen müssen, und dann zahlen Sie für das Hosting Aber das Hosting ist etwas , das jeder Webseitenbesitzer bezahlen muss, auch wenn er eine kostenlose Plattform wie WordPress verwendet Aber darüber müssen Sie sich nicht allzu viele Gedanken machen . Es ist nicht deine Ausgabe. Kunden zahlen für das Hosting. Zusammenfassend lässt sich sagen, dass Webflow meine Karriere und die vieler anderer Menschen verändert hat , und es kann dasselbe für Sie tun 3. Webflow-Teaser: Der Kurs besteht aus sechs Teilen. Im ersten Teil lernen Sie die Geheimnisse guten Designs kennen. Im zweiten Teil üben Sie Design an realen Projekten. Im dritten Teil lernen Sie Webflow kennen, indem Sie die Homepage eines Unternehmens erstellen Im vierten Teil werden wir ein Kundenprojekt von Anfang bis Ende durchführen ein Kundenprojekt von Anfang bis Ende Ich werde Sie durch den gleichen Prozess führen , den ich bei jedem Kunden durchlaufe. Wir beginnen mit dem Wireframing entwerfen dann die Website in Figma, dann nehmen wir das Ganze und entwerfen und bauen den Blog innerhalb von Webflow und veröffentlichen ihn schließlich und liefern ihn an den veröffentlichen ihn schließlich und liefern ihn In Teil fünf lernst du die Geheimnisse des Geldverdienens als Freiberufler kennen, und Teil sechs enthält mehrere Tutorials für Fortgeschrittene, sowohl Im Werbevideo habe ich Webflow zuerst erwähnt, aber wir werden diesen Kurs tatsächlich mit dem Design beginnen diesen Kurs tatsächlich mit dem Design weil jedes gute Website-Projekt mit dem Design beginnt So wie jedes großartige Gebäude immer zuerst mit den Architekturplänen beginnt und dann, seit wir mit Webflow arbeiten, erst im dritten Teil dieses Kurses einen kleinen Vorgeschmack geben, wollte ich Ihnen erst im dritten Teil dieses Kurses einen kleinen Vorgeschmack geben, bevor wir weitermachen Also mach weiter und öffne Webflow, damit wir es kurz ausprobieren können Sie sollten bereits über das Webflow-Konto aus der vorherigen Wenn nicht, gehen Sie zu webflow.com und melden Sie sich an. Verwenden Sie Google Chrome. Der Webflow-Designer funktioniert dort am besten. Nachdem Sie sich angemeldet haben, gelangen Sie zu einer Version dieser Seite. Wir haben drei Möglichkeiten, eine Website in Webflow zu erstellen . Eine davon sind Vorlagen Webflow-Marktplatz gibt es mehr als 7.000 kostenpflichtige und kostenlose Vorlagen Sie sind absolut wunderbar. Sie sind überraschend einzigartig für Vorlagen. Es gibt Abwechslung. Sie haben reichhaltige Animationen und Interaktionen. Es ist eine sehr gültige Arbeitsweise für einen Webdesigner. Sie können Vorlagen für einen Kunden installieren, sie bearbeiten sie an ihren Inhalt, ihr Branding und ihr Geschäft anpassen . Und bieten fortlaufende Wartungs- und Aktualisierungsdienste für die Website an. Da diese Vorlagen in Webflow erstellt wurden, sind Sie nicht an Vorlagen gebunden Sie sind vollständig editierbar und können vollständig geändert werden. Der zweite Ansatz besteht darin, mit KI zu bauen. Es ist einer der beiden KI-Builder in Webflow. Dies unterscheidet sich von der App-Generation , die ich zuvor gezeigt habe, sich um ein traditionelleres Vibe-Codierungstool handelt Dieser funktioniert wie ein Generator für den ersten Entwurf. Lassen Sie uns diesen einen kurzen Test machen. Sie können Ihre eigene Eingabeaufforderung wählen oder meine verwenden. Bevor die Site generiert wird, werden Sie zu dieser Art von Seitenstruktur gelangen. Dies ist eine praktische kleine Funktion , die Webflow im Gegensatz zu einigen anderen AI Builders bietet Dies gibt uns die Möglichkeit, unsere Seite tatsächlich zu strukturieren, nicht nur unsere Seite, sondern auch unsere Website, bevor wir die KI tatsächlich generiert haben Das ist sehr nützlich, weil man normalerweise nicht alles strukturiert im Kopf hat, bevor man es NAI irgendwie mitteilen kann Das sind also jeweils Seiten. In diesen kleinen Boxen sind es Abschnitte. Wenn wir zum Beispiel vergessen haben, einen Abschnitt hinzuzufügen, können wir hierher kommen und denken: Okay, wir brauchen einen weiteren Abschnitt unten, wie einen FAQ-Bereich vor oder nach dem Kontaktformular. Und Webflow wird diese vielen verschiedenen Arten von Abschnitten anbieten diese vielen verschiedenen Arten von , aus denen wir auswählen können In Wirklichkeit ist Webflows AI Builder also gleichzeitig eine Art KI und dann auch wie eine Bibliothek mit Komponenten und verschiedenen Layouts, die er bietet Es bietet also quasi das Beste aus beiden Welten in denen Sie sich nicht alles selbst einfallen lassen müssen , sondern auch KI verwenden können So können wir zum Beispiel unten häufig gestellte Fragen hinzufügen, aber okay, vielleicht habe ich meine Meinung geändert. Ich will es nicht unten haben. Kein Problem. Ich kann es nach oben ziehen, und dann können Sie die verschiedenen Abschnitte hier überprüfen, ob sie funktionieren, ob sie nicht funktionieren, und dann können Sie weitere Seiten hinzufügen. Wenn Sie also mehr Seiten hinzufügen möchten, gibt es in Wirklichkeit ein Limit von fünf Seiten. Es werden nicht mehr als fünf Seiten generiert. Wenn Sie also beispielsweise keine Serviceseite oder Kontaktseite benötigen , können Sie diese Seite löschen, und jetzt können Sie eine neue, sagen wir, Preisseite erstellen . Und dann generiert Webflow eine Preisseite für Sie. Und wenn Sie mit der Strukturierung fertig sind können Sie auf Generate SI klicken Es wird ein paar Minuten dauern, geben Sie dem Ganzen etwas Zeit. Ordnung. Also bekommen wir ein fünfseitiges Layout oder ein paar Seiten, je nachdem, wie viel Sie generiert haben. Und was dieser Ort hier ist, ist eigentlich ein Vorschritt bevor wir ihn dem Wilo-Designer übergeben In diesem Schritt können wir, bevor wir die von der KI vorgenommenen Änderungen akzeptieren, tatsächlich diese tatsächlich bearbeiten und sie noch besser gestalten Wir können zum Beispiel auf eine dieser Seiten gehen, indem wir auf Bearbeiten klicken und wir erhalten eine Art benutzerfreundliche Oberfläche einige Stile zu aktualisieren und zu experimentieren. Sie bietet verschiedene Themen, die Sie austauschen und vervollständigen können es werden sich verschiedene Farben ändern. Dadurch werden verschiedene Überschriftenstile und Farben geändert. Es wird viele verschiedene Dinge an der Website aktualisieren und Ihnen eine Vorstellung von der Struktur geben , und der Inhalt bleibt gleich. Aber jetzt haben sich die Farben und die Schriftarten geändert, was Ihnen eine Vorstellung davon gibt , wie das alles in einem anderen Stil aussieht. Jeder dieser Abschnitte ist editierbar. Und wenn Sie zum Beispiel darauf klicken, öffnet sich eine riesige Auswahl an Komponentenbibliotheken und Layoutbibliotheken, sagen wir, und Sie haben verschiedene Heldenbereiche, Funktionen, Galeriepreise oder was auch immer. Und das ist momentan ein Heldenbereich, und du hast viele, viele verschiedene Optionen wie du diesen Heldenbereich gestalten möchtest. Und für Gebäude an der Schnellseite ist das eine tolle Herangehensweise, ist das eine tolle Herangehensweise weil ihr euch nicht mit AIS auseinandersetzen müsst und ihr dadurch etwas mehr Möglichkeiten habt etwas visuell auszuwählen , das ihr seht und mögt, und das ihr bearbeiten könnt Ich mag zum Beispiel diese Art von Abschnitten, die Bilder im Text haben, sehr Abschnitten, die Bilder im Text haben, können wir aktualisieren. Auf diese Weise können Sie Stile austauschen. Sie behalten diesen Abschnitt bei, aber er ändert die Farben auf der Grundlage der Palette, die bereits in diesem Thema verwendet wird. Die Farbpalette kann auch von hier aus geändert werden. Zum Beispiel können wir uns für etwas intensivere, lebendigere Farben wie Purpur, Heilige Blume oder Blau entscheiden intensivere, lebendigere Farben wie Purpur, Heilige Blume oder Und Sie können sehen, dass Sie dadurch viele, viele verschiedene Farbpalettenvariationen Die gesamten Abschnitte werden aktualisiert. Sie können dunkle Themen verwenden. Außerdem können wir die Topographie aktualisieren. Wir können die Gewichtung für die Typografie aktualisieren, vielleicht mutiger machen Die Größen können ebenfalls geändert werden und etwas kleiner ausfallen. Wir können die Stile für Schaltflächen aktualisieren. Im Moment haben wir diese Art von flachem Design. Wir können uns möglicherweise für ein bisschen schumorphes Design entscheiden, ein bisschen klasmorpheres ein bisschen klasmorpheres Von hier aus können wir neue Abschnitte hinzufügen. Zum Beispiel wäre hier ein Logo-Bereich sehr interessant. Die Farbe und der Stil können für verschiedene Bereiche wie diesen aktualisiert werden . Wir können diese Galerie wechseln, zum Beispiel ist diese Galerie nicht so interessant, das sind ein Haufen Fotos. Diese Fotos sind alle von KI generiert, und im Moment sieht alles offensichtlich sehr uneinheitlich und verschmolzen Sie müssen den Inhalt aktualisieren, die Bilder aktualisieren, um ihn persönlicher zu gestalten Und sobald wir mit den Änderungen und den Stilen, die wir angewendet haben, fertig den Stilen, die wir angewendet haben, sind, werden sie alle übernommen und auf alle Seiten angewendet. Wie Sie sehen können, wurden die Farben, die Typografie, die Button-Stile überall hin mitgenommen , was sehr nett ist Und wenn wir damit fertig sind, klicken wir auf Weiter bauen. Dadurch gelangen wir nun in den Webflow-Designer Das einzige Problem dabei ist, dass Sie beim kostenlosen Tarif nur zwei Seiten erhalten, sodass wir einige dieser Seiten entfernen müssen , die wir nicht benötigen Wir können vielleicht eine Services-Seite behalten. Und eine Homepage. Dann enden wir im Webflow-Designer. Hier haben wir die volle Kontrolle darüber, wie wir unsere Website bearbeiten und alle Probleme beheben können, die wir haben Zum Beispiel können wir unsere Bilder aktualisieren. Und Probleme beheben, wie zum Beispiel in diesem Fall, wenn man bedenkt, welche Schriftart und wie die Bilder platziert sind, sie sich hier berühren, und das ist nicht nett. Sie sollten sich nicht berühren, damit wir dieses Problem beheben können. Nun, das wird im Moment nicht einfach für Sie sein , weil Sie nicht wissen, wie Sie mit diesem Designer arbeiten sollen. Sie wissen nicht, wie diese Elemente, wie die Stile und Eigenschaften und all das funktionieren, aber wir werden darauf eingehen. Das gibt uns die volle Kontrolle. Natürlich können wir den Inhalt ganz einfach aktualisieren. Verschiedene Änderungen, ich würde es zum Beispiel vorziehen, wenn diese Logos verteilt würden. Sobald Sie verstanden haben, wie Flexbox funktioniert, können Sie das ganz einfach mit einem einzigen Klick tun Und wenn Sie es vergessen haben und neue Abschnitte hinzufügen möchten, können wir das immer noch mithilfe von KI tun Diese kleinen Schaltflächen zum Generieren von Layouts werden angezeigt. Und dann können wir zum Beispiel einen Preisbereich hinzufügen, und der Webflow-Gewinn wird uns viele verschiedene Preisoptionen bieten , die wir hinzufügen können Es wird den Inhalt an unsere Website anpassen. Und wenn Sie hier irgendwelche Probleme haben, können diese gelöscht werden, ja, wir haben die volle Kontrolle, und wir können von hier aus eine Vorschau unserer Webseite anzeigen und sehen, wie alles zusammenspielt und funktioniert Die Bilder sind momentan schrecklich, aber sagen wir mal. Die Website wird sofort responsiv sein. Sie können sie testen, indem Sie diese Leinwand verkleinern Sie können sehen, dass sie sich an unterschiedliche Größen anpassen. Und von hier aus können Sie auch die verschiedenen Haltepunkte wie Handy, Tablet usw. sehen die verschiedenen Haltepunkte wie Handy, . Aber die Arbeit mit einer bereits erstellten Site wird für Anfänger zu verwirrend sein. Um die Grundlagen des Webdesigns zu erlernen, müssen wir bei Null anfangen Gehen Sie zurück zum Dashboard und erstellen Sie eine neue Site. In einem kostenlosen Flugzeug können Sie nur zwei kostenlose Websites haben. Wenn Sie also dieses Limit bereits erreicht haben , indem Sie mit AI Builder gespielt haben, können Sie von hier aus einfach eine der Websites archivieren. Erstellen Sie eine neue Site und wählen Sie dann eine leere Site. Als Erstbenutzer erhalten Sie dieses Onboarding-Popup. Sie müssen es nicht durchgehen, können es aber, wenn Sie möchten Auf der linken Seite haben wir einen Navigator. Es zeigt die Struktur der Seite und aller Objekte darauf. Im Moment gibt es nur ein Objekt, den Körper. Über das Plus-Symbol können wir neue Elemente hinzufügen. Fügen wir einen Container hinzu, den wir einfach auf die Leinwand ziehen können. Lassen Sie uns auch eine Überschrift und einen Absatz hinzufügen. Und schreibe etwas hinein. Lassen Sie uns den Text zentrieren. Wir können das tun, indem wir den Container auswählen und unter Typografie auf Mittenausrichtung klicken unter Typografie auf Mittenausrichtung Und wir werden etwas Abstand hinzufügen um den Text in die Mitte des Bildschirms zu verschieben, den Container ausgewählt zu lassen und mit der Maus diesen oberen Polstergriff zu ziehen Sie können einen Vorschaumodus umschalten, um in Echtzeit zu sehen, wie Ihre Seite aussieht Wenn du zum Code-Export gehst, siehst du den eigentlichen Code , den Webflow für uns geschrieben hat HTML zeigt die Objekte , die wir bearbeitet haben, wie den Container, die Überschrift und einen Absatz Und in CSS werden Sie die Stiländerungen sehen , die wir vorgenommen haben, den oberen Abstand und die Ausrichtung in der Mitte Wir könnten diesen Code exportieren und an einem anderen Ort hosten. Die Seite würde außerhalb von Webflow Two perfekt funktionieren. Aber das werden wir in diesem Kurs nicht tun. Die beste Option ist es, unsere Seite auf Webflow zu veröffentlichen. Gehen Sie also zu Veröffentlichen und klicken Sie auf In ausgewählten Domains veröffentlichen. Sobald es fertig ist, klicken Sie auf den Link, um die Live-Site zu öffnen. Ihre erste Webseite, die von Grund auf neu erstellt wurde, hässlich und nutzlos, aber immer noch eine Webseite. Ohne zu wissen, wie man gestaltet, würden all unsere Websites so unattraktiv aussehen wie diese, selbst wenn wir professionelle Webflow-Designer wären Die Designfähigkeit steht immer an erster Stelle. Also werden wir den Webflow vorerst beiseite legen lernen und üben und gutes Design lernen und üben und dann im dritten Teil zu Webflow zurückkehren, damit wir die Magie verwirklichen und eine schöne Website entwerfen und erstellen können verwirklichen und eine schöne Website entwerfen und erstellen 4. TEIL 1: GEHEIMNISSE GUTEN DESIGNS: Ich habe nicht an einer Kunstschule studiert. Ich glaube nicht, dass ich jemals in einem war. Mein Lieblingsfach in der Schule war Mathematik, und ich zeichnete nicht gern. Ich hätte nie in meinem Leben Betracht gezogen, Designerin zu werden. Mein damaliger Freund und Geschäftspartner , der Grafikdesigner war, besuchte eine Kunstschule und war dann regulärer Grafikdesigner Eines Tages entdeckte ich, dass er nicht zeichnen konnte. Er konnte nicht zeichnen. Und ich sah ihn seltsam an. Was meinst du damit, du kannst zeichnen? Du bist Grafikdesigner, oder? Und er sagt, das macht Spaß, nicht wahr? Er erklärt, dass man als Designer nicht zeichnen können muss . Man muss kein angeborenes Talent für Kreativität haben oder ein extravaganter Künstler sein Design hat Regeln, Techniken und Richtlinien, und du musst nur lernen, sie zu Ich war schockiert. Ich dachte, warte eine Sekunde. Ich hatte das Gefühl , gerade ein unglaubliches Geheimnis entdeckt zu haben, das diese Welt vor mir versteckt hat. Und in diesem Teil des Kurses möchte ich dir genau das beibringen. All diese kleinen Tricks und Richtlinien, die etwas so gestaltet aussehen lassen. Und ich möchte dir beibringen und dir zeigen, wie einfach es ist , etwas, das nur zufälliger Inhalt ist, in eine wunderschöne Designkomposition zu verwandeln . Ich gebe Ihnen Aufgaben und Übungsaufgaben , damit Sie es selbst in die Hand nehmen können. Dreckig. Wir werden lernen, wie man ein Design-Tool namens Figma benutzt ein Design-Tool namens Figma Es ist ein einfaches Tool, und wir werden es Schritt für Schritt lernen, also werden wir es nicht auf den Kopf stellen Wir werden im Laufe der Zeit und beim Üben mit verschiedenen Designs neue Funktionen erlernen . Und tatsächlich ist Design nicht wirklich Teil des Tools. Sie werden kein Grafikdesigner oder Webdesigner , indem Sie nur Photoshop lernen. Oder Skizze oder was auch immer. Sein Design ist in Wirklichkeit eine mentale Skala. Es ist nicht diese, du weißt schon, Kreativität, die die Leute wirklich nachdenken. Es ist offensichtlich, dass darin viel Kreativität steckt, aber oft ist es eine mentale Fähigkeit, und es ist eine Art, die Dinge zu betrachten. So wie der Automechaniker das Auto betrachtet und den Motor des Autos hört und dann versteht etwas ansieht und das Geräusch hört , wo man die Schrauben festziehen muss und wo man sie hören muss Ich werde dir genau diese Designfertigkeit beibringen. Sie können also eine leere Leinwand nehmen und etwas sehr Attraktives daraus machen. Etwas, für das die Leute dir gutes Geld zahlen werden 5. Erste Schritte mit Figma: Wir tauchen in das Design ein und richten zunächst Figma ein. Es wird ein kurzer Überblick sein. Ich werde Ihnen nur ein allgemeines Verständnis der Funktionsweise des Tools und aller wichtigen Funktionen vermitteln der Funktionsweise des Tools und , die wir für die Gestaltung von Websites in FIGMA benötigen Gestaltung von Websites in FIGMA benötigen Ich werde sie Ihnen beibringen und Ihnen zeigen, während wir uns durch das Material bewegen und wie Sie sie benötigen. Nein sofort. Also als Erstes, lass uns FigMA herunterladen, richtig? Wir haben zwei Optionen: Mac und Windows. Ich bin auf einem Mac, aber die Windows-App funktioniert und sieht genauso aus. So können Sie auch unter Windows meinen Tutorials perfekt folgen. Sie sich keine Sorgen, wenn Sie Linux oder ein anderes Betriebssystem verwenden. Sie können FigMA direkt in Ihrem Browser verwenden. Es ist großartig, aber ich empfehle dringend , die Desktop-App zu verwenden, wenn Sie die Möglichkeit haben Lassen Sie uns es jetzt installieren. Auf einem MAC muss es nur in den Anwendungsordner verschoben werden , und das ist alles. Ich weiß nicht, wie die Installation unter Windows funktioniert, aber ich bin mir sicher, dass Sie nicht zum ersten Mal eine Anwendung installieren. Fahren Sie also einfach mit dem üblichen Installationsvorgang fort. Dies ist der erste Registrierungsbildschirm. Melden Sie sich bei Google an, wenn Sie es einfacher machen möchten , oder melden Sie sich mit einer E-Mail an. Sie werden aufgefordert, Ihre E-Mail-Adresse zu verifizieren. Dein Name Waco. Welche Art von Arbeit entwirfst du? Die kostenlose Version von Figm hat einige Einschränkungen, aber nichts Entscheidendes für einen freiberuflichen Designer Sie können sie ganz einfach für immer kostenlos nutzen. Und wir werden auf unserer Homepage ankommen, die unser Dateibrowser ist. Alle Ihre Figma-Dateien werden hier angezeigt. Figma ist cloudbasiert, sodass Sie Internet benötigen, wenn Sie damit arbeiten Sie können offline arbeiten, aber nur, wenn Sie die Datei laden, bevor Sie offline gehen Dann können Sie mit einer Datei arbeiten Sobald Sie wieder online sind, wird diese Datei synchronisiert und aktualisiert. Es ist okay, aber ich würde das nicht empfehlen. Sie möchten nicht riskieren, Ihre harte Arbeit zu verlieren. Beginnen wir mit der Erstellung einer neuen Datei. Das können wir von hier aus machen. Jetzt sind wir im Figma-Editor. Hier passiert alles. Nichts, wovor man Angst haben müsste, es ist ganz einfach. Geöffnete Dateien werden ähnlich wie in Ihrem Browser als Tab angezeigt. Und wenn Sie zur Startseite zurückkehren möchten, um eine andere Datei zu öffnen, können Sie das über dieses Symbol hier tun. Oder wenn Sie vom Browser aus arbeiten, können Sie entweder hier auf den übergeordneten Ordner der Datei klicken . In den meisten Fällen heißt es Entwürfe . Wenn Sie jedoch im Rahmen eines Teamplans arbeiten, steht dort möglicherweise der Name des Teams oder des Projekts Oder Sie können in dieser Dropdownliste die Option Zurück zu Dateien auswählen Um zur Datei zurückzukehren, müssen Sie nur die Registerkarte Öffnen auswählen, wenn die Datei noch geöffnet ist Wenn sie jedoch nicht geöffnet ist, werden alle Ihre Dateien hier auf der Registerkarte RSNs angezeigt Genauere Speicherorte für diese Dateien sind entweder der Entwurfsordner oder einer der Teamordner Das Team ist jedoch eine kostenpflichtige Funktion und der kostenlose Tarif erlaubt nur drei Dateien Falls Sie also jemals eine Nachricht erhalten , dass Sie das Dateilimit erreicht haben, geht es nur um die Teamdateien. Im Entwurfsordner können Sie unbegrenzt viele kostenlose Dateien haben. Und als Freelancer wird der Entwurfsordner für Sie einwandfrei funktionieren Lassen Sie uns hier eine Werkzeugleiste durchgehen. Wie Sie sehen können, gibt es nur eine Handvoll Tools, nichts wie das, was Sie in Photoshop bekommen würden. erste ist ein Verschiebewerkzeug, das Standardwerkzeug, das meistens ausgewählt ist. Es macht genau das, was es sagt. Es bewegt Objekte und interagiert mit ihnen. Das nächste ist das Frame-Tool. Es ähnelt der Zeichenfläche , die Sie in anderen Designtools verwenden Alle unsere Designs beginnen mit einem Rahmen. Je nachdem, wofür wir entwerfen, müssen wir eine bestimmte Größe wählen, den Bildschirm, für den wir entwerfen. Entweder entwerfen wir einen Bildschirm für einen Desktop-Computer, einen Laptop, ein iPhone usw. Handelt es sich um einen Webdesign-Kurs, werden wir für Desktop- und Laptop-Computer entwerfen. Sie können es zeichnen, aber die bessere Option ist es, eine der voreingestellten Größen zu wählen. Und wählen Sie den Bildschirm aus diesem Drop-down-Menü aus. Es gibt iPhones, Androids, Tablets und sogar Facebook-Cover Wir werden natürlich eine der Desktop-Bildschirmgrößen wählen der Desktop-Bildschirmgrößen Sie sind nicht an diese Abmessungen gebunden. Wenn Sie möchten, können Sie die Größe so ändern. Übrigens, dieses Verschieben der Leinwand, das ich gemacht habe, der Fachausdruck dafür ist Panning Ich mache das, indem ich mit zwei Finger auf meinem Touchpad wische mit zwei Finger auf meinem Wenn Sie einen Laptop verwenden, sollten Sie dasselbe tun können Wenn Sie eine Maus verwenden, können Sie das Scrollrad verwenden, um nach oben oder unten zu schwenken, oder Sie halten die Umschalttaste gedrückt, links oder rechts zu schwenken. Eine bessere Option mit der Maus könnte jedoch darin bestehen, die Leertaste gedrückt zu halten , wodurch ein Handwerkzeug aktiviert wird Anschließend können Sie auf die Leinwand klicken und sie nach Belieben ausrichten. Es gibt auch Zoomen, das Sie von Zeit zu Zeit auf einem Touchpad durchführen müssen von Zeit zu Zeit auf einem Touchpad Auch das ist einfach. Sie müssen nur mit zwei Finger genau so kneifen, wie Sie es auf Ihrem Telefon tun würden. Und mit einer Maus musst du auf dem Mac eine Strg- oder Befehlszeile gedrückt halten , während du scrollst. In Ordnung, als Nächstes kommt ein Formwerkzeug. Wenn Sie auf einen winzigen Pfeil klicken, können Sie damit eine der folgenden Formen wie Rechteck, Linie usw. auswählen . Lassen Sie uns ein Rechteck zeichnen. Es ist das Erste, was standardmäßig ausgewählt ist, und auf dem Rahmen zeichnen Sie ein Rechteck wie dieses. Klicken und ziehen. Gleiche Logik für andere Formen. Dann haben wir ein Stiftwerkzeug. Mach dir darüber vorerst keine Sorgen. Wir werden es nicht so oft benutzen. Daneben befindet sich ein Textwerkzeug. Ziemlich einfach. Das Kommentar-Tool, das ist für die Zusammenarbeit. Wenn Sie es an Ihre Kunden oder Teammitglieder zur Überprüfung senden , können sie jedes Element direkt kommentieren , ein sehr praktisches Tool Hier haben wir das Aktionsmenü , in dem sich viele verschiedene Funktionen befinden. Alle Figma-Einstellungen und -Optionen finden Sie hier, z. B. den Zoom- oder Dunkelmodus Ich bevorzuge eigentlich den Lichtmodus. Sie können das Menü mit der Tastenkombination Strg K oder Befehl K auf dem Mac öffnen . Sie können tatsächlich alle Tastenkombinationen sehen, wenn Sie den Mauszeiger über jedes dieser Elemente in der Werkzeugleiste Im Aktionsmenü finden Sie Registerkarten für Assets und Plug-ins Assets sind im Grunde kleine Komponenten , die wir in unserer Datei erstellen. Dazu später mehr. Und Plugins und Widgets, die von der Community erstellt werden, sind wie Mini-Apps , die unsere Arbeit in Figma effizienter und produktiver machen können in Figma effizienter und produktiver Manchmal werden sie bezahlt, manchmal sind sie kostenlos. Dann haben wir einen Dev-Modus, das ist eine weitere kostenpflichtige Funktion , die weder für diesen Kurs noch für freiberufliches Webdesign benötigt wird . Es ist eine Funktion für Entwickler. Es erleichtert den Prozess der Designübergabe, wenn der Designer die Designs Entwickler weitergibt, um eine App oder ein Webinterface zu erstellen Die Entwickler werden in der Lage sein , alle notwendigen Elemente und Informationen in einem Format und einer Sprache zu finden und Informationen in einem Format und einer , die für sie nützlicher Das ist alles, was Sie vorerst über die Toolbar wissen müssen. Auf der anderen Seite haben wir das Eigenschaftenfenster. Das Lustige am Eigenschaftenfenster ist, dass es sich je nach dem von Ihnen ausgewählten Objekt ändert. Wir wählen ein Rechteck aus und erhalten alle Eigenschaften für dieses bestimmte Rechteck. Wenn wir Text auswählen, erhalten wir leicht unterschiedliche Eigenschaften, Schriftart, Textgröße usw. Wir werden jede dieser Eigenschaften später untersuchen , wenn wir sie tatsächlich benötigen. Sie müssen sich jetzt keine Sorgen um sie machen. Schließlich haben wir auf der linken Seite das Navigationsfenster, das einige verschiedene Abschnitte enthält. Da ist das Hauptmenü. Sie werden hier wieder alle FicMA-Einstellungen und -Optionen sehen hier wieder alle FicMA-Einstellungen und -Optionen Dateiname und einige Aktionen der Datei. Registerkarte „Datei“ im Vergleich zu „Asset“. Das sind dieselben Assets , die Sie im Menü unter den Seiten finden , da unsere Datei mehrere Seiten haben kann. Und der Ebenenbereich. Jedes neue Element, das wir erstellen wird hier unter Ebenen angezeigt. Nun, warum heißt es Ebenen und warum nicht Objekte oder Elemente oder so? Weil sie übereinander liegen. Sie existieren im geschichteten Raum. Wenn wir zum Beispiel möchten, dass das lila Feld nach unten zeigt, müssen wir nur diese Ebene ziehen und sie unter das graue Rechteck verschieben. All diese Objekte sind untergeordnete unseres Frames namens Desktop. Dort leben sie. Und wenn wir eines dieser Objekte außerhalb dieses Rahmens verschieben, werden Sie sehen, wie das Ebenenbedienfeld aktualisiert wird und das Objekt außerhalb des Rahmens auf die allgemeine Leinwand verschoben wird. Das ist alles, was Sie vorerst über Figma wissen müssen. In allen Übungsübungen, die wir machen werden , werden weitere Funktionen auftauchen Wenn Sie noch nicht mitgemacht haben, beenden Sie die Pause und machen Sie gleich weiter. Fahren Sie dann mit der nächsten Lektion fort. Wenn Sie zu irgendeinem Zeitpunkt in diesem Kurs nicht weiterkommen, sind es neue Tools, sie werden manchmal aktualisiert und, wissen Sie, es ändern sich verschiedene Dinge, und ich bin vielleicht nicht so schnell dabei, die Bildschirme und alles zu aktualisieren. Natürlich werde ich das tun, aber wissen Sie, sie entwickeln sich sehr schnell, all diese Tools, und sie aktualisieren Bildschirme und Benutzeroberflächen sehr schnell. Also werde ich dir vielleicht etwas zeigen und es könnte plötzlich weg sein. Lass es mich wissen. Ich repariere das. Aber wenn du nicht weiterkommst, kannst du mir jederzeit eine Nachricht schreiben oder eine Frage in den Diskussionsforen stellen. Entweder ich oder ein anderer Student werden dir helfen. 6. Erste Schritte mit Figma: Wir tauchen in das Design ein und richten zunächst Figma ein. Es wird ein kurzer Überblick sein. Ich werde Ihnen nur ein allgemeines Verständnis der Funktionsweise des Tools und aller wichtigen Funktionen vermitteln der Funktionsweise des Tools und , die wir für die Gestaltung von Websites in FIGMA benötigen Gestaltung von Websites in FIGMA benötigen Ich werde sie Ihnen beibringen und Ihnen zeigen, während wir uns durch das Material bewegen und wie Sie sie benötigen. Nein sofort. Also als Erstes, lass uns FigMA herunterladen, richtig? Wir haben zwei Optionen: Mac und Windows. Ich bin auf einem Mac, aber die Windows-App funktioniert und sieht genauso aus. So können Sie auch unter Windows meinen Tutorials perfekt folgen. Sie sich keine Sorgen, wenn Sie Linux oder ein anderes Betriebssystem verwenden. Sie können FigMA direkt in Ihrem Browser verwenden. Es ist großartig, aber ich empfehle dringend , die Desktop-App zu verwenden, wenn Sie die Möglichkeit haben Lassen Sie uns es jetzt installieren. Auf einem MAC muss es nur in den Anwendungsordner verschoben werden , und das ist alles. Ich weiß nicht, wie die Installation unter Windows funktioniert, aber ich bin mir sicher, dass Sie nicht zum ersten Mal eine Anwendung installieren. Fahren Sie also einfach mit dem üblichen Installationsvorgang fort. Dies ist der erste Registrierungsbildschirm. Melden Sie sich bei Google an, wenn Sie es einfacher machen möchten , oder melden Sie sich mit einer E-Mail an. Sie werden aufgefordert, Ihre E-Mail-Adresse zu verifizieren. Dein Name Waco. Welche Art von Arbeit entwirfst du? Die kostenlose Version von Figma hat einige Einschränkungen, aber nichts Entscheidendes für einen freiberuflichen Designer Sie können es ganz einfach für immer kostenlos nutzen. Und wir werden auf unserer Homepage ankommen, die unser Dateibrowser ist. Alle Ihre Figma-Dateien werden hier angezeigt. Figma ist cloudbasiert, sodass Sie Internet benötigen, wenn Sie damit arbeiten Sie können offline arbeiten, aber nur, wenn Sie die Datei laden, bevor Sie offline gehen Dann können Sie mit einer Datei arbeiten Sobald Sie wieder online sind, wird diese Datei synchronisiert und aktualisiert. Es ist okay, aber ich würde das nicht empfehlen. Sie möchten nicht riskieren, Ihre harte Arbeit zu verlieren. Beginnen wir mit der Erstellung einer neuen Datei. Das können wir von hier oder hier aus machen. Jetzt sind wir im Figma-Editor. Hier passiert alles. Nichts, wovor man Angst haben müsste, es ist ganz einfach. Geöffnete Dateien werden ähnlich wie in Ihrem Browser als Tab angezeigt. Und wenn Sie zur Startseite zurückkehren möchten, um eine andere Datei zu öffnen, können Sie das über dieses Symbol hier tun. Oder wenn Sie vom Browser aus arbeiten, können Sie entweder hier auf den übergeordneten Ordner der Datei klicken . In den meisten Fällen heißt es Entwürfe . Wenn Sie jedoch im Rahmen eines Teamplans arbeiten, steht dort möglicherweise der Name des Teams oder des Projekts Oder Sie können in dieser Dropdownliste die Option Zurück zu Dateien auswählen Um zur Datei zurückzukehren, müssen Sie nur die Registerkarte Öffnen auswählen, wenn die Datei noch geöffnet ist Wenn sie jedoch nicht geöffnet ist, werden alle Ihre Dateien hier auf der Registerkarte RSNS angezeigt Genauere Speicherorte für diese Dateien sind entweder der Entwurfsordner oder einer der Teamordner Das Team ist jedoch eine kostenpflichtige Funktion und der kostenlose Tarif erlaubt nur drei Dateien Falls Sie also jemals eine Nachricht erhalten , dass Sie das Dateilimit erreicht haben, geht es nur um die Teamdateien. Im Entwurfsordner können Sie unbegrenzt viele kostenlose Dateien haben. Und als Freelancer wird der Entwurfsordner für Sie einwandfrei funktionieren Lassen Sie uns hier eine Werkzeugleiste durchgehen. Wie Sie sehen können, gibt es nur eine Handvoll Tools, nichts wie das, was Sie in Photoshop bekommen würden. erste ist ein Verschiebewerkzeug, das Standardwerkzeug, das meistens ausgewählt ist. Es macht genau das, was es sagt. Es bewegt Objekte und interagiert mit ihnen. Das nächste ist das Frame-Tool. Es ähnelt der Zeichenfläche , die Sie in anderen Designtools verwenden Alle unsere Designs beginnen mit einem Rahmen. Je nachdem, wofür wir entwerfen, müssen wir eine bestimmte Größe wählen, den Bildschirm, für den wir entwerfen. Entweder entwerfen wir einen Bildschirm für einen Desktop-Computer, einen Laptop, ein iPhone usw. Handelt es sich um einen Webdesign-Kurs, werden wir für Desktop- und Laptop-Computer entwerfen. Sie können es zeichnen, aber die bessere Option ist es, eine der voreingestellten Größen zu wählen. Und wählen Sie den Bildschirm aus diesem Drop-down-Menü aus. Es gibt iPhones, Androids, Tablets und sogar Facebook-Cover Wir werden natürlich eine der Desktop-Bildschirmgrößen wählen der Desktop-Bildschirmgrößen Sie sind nicht an diese Abmessungen gebunden. Wenn Sie möchten, können Sie die Größe so ändern. Übrigens, dieses Verschieben der Leinwand, das ich gemacht habe, der Fachausdruck dafür ist Panning Ich mache das, indem ich mit zwei Finger auf meinem Touchpad wische mit zwei Finger auf meinem Wenn Sie einen Laptop verwenden, sollten Sie dasselbe tun können Wenn Sie eine Maus verwenden, können Sie das Scrollrad verwenden, um nach oben oder unten zu schwenken, oder Sie halten die Umschalttaste gedrückt, links oder rechts zu schwenken. Eine bessere Option mit der Maus könnte jedoch darin bestehen, die Leertaste gedrückt zu halten , wodurch ein Handwerkzeug aktiviert wird Anschließend können Sie auf die Leinwand klicken und sie nach Belieben ausrichten. Es gibt auch Zoomen, das Sie von Zeit zu Zeit auf einem Touchpad durchführen müssen von Zeit zu Zeit auf einem Touchpad Auch das ist einfach. Sie müssen nur mit zwei Finger genau so kneifen, wie Sie es auf Ihrem Telefon tun würden. Und mit einer Maus musst du auf dem Mac eine Strg- oder Befehlszeile gedrückt halten , während du scrollst. In Ordnung, als Nächstes kommt ein Formwerkzeug. Wenn Sie auf einen winzigen Pfeil klicken, können Sie damit eine der folgenden Formen wie Rechteck, Linie usw. auswählen . Lassen Sie uns ein Rechteck zeichnen. Es ist das Erste, was standardmäßig ausgewählt ist, und auf dem Rahmen zeichnen Sie ein Rechteck wie dieses. Klicken und ziehen. Gleiche Logik für andere Formen. Dann haben wir ein Stiftwerkzeug. Mach dir darüber vorerst keine Sorgen. Wir werden es nicht so oft benutzen. Daneben befindet sich ein Textwerkzeug. Ziemlich einfach. Das Kommentar-Tool, das ist für die Zusammenarbeit Wenn Sie es an Ihre Kunden oder Teammitglieder zur Überprüfung senden , können sie jedes Element direkt kommentieren , ein sehr praktisches Tool Hier haben wir das Aktionsmenü, in dem viele verschiedene Funktionen sowie alle Figma-Einstellungen und -Optionen zu finden sind, die Sie hier finden können, zum Beispiel Zoom oder Dunkelmodus Ich bevorzuge eigentlich den hellen Modus. Sie können das Menü mit der Tastenkombination Strg K oder Befehl K auf dem Mac öffnen . Sie können tatsächlich alle Tastenkombinationen sehen, wenn Sie den Mauszeiger über jedes dieser Elemente in der Werkzeugleiste Im Aktionsmenü finden Sie Registerkarten für Assets und Plug-ins Assets sind im Grunde kleine Komponenten , die wir in unserer Datei erstellen. Dazu später mehr. Und Plugins und Widgets, die von der Community erstellt werden, sind wie Mini-Apps , die unsere Arbeit in Figma effizienter und produktiver machen können in Figma effizienter und produktiver Manchmal werden sie bezahlt, manchmal sind sie kostenlos. Dann haben wir einen Dev-Modus, das ist eine weitere kostenpflichtige Funktion , die weder für diesen Kurs noch für freiberufliches Webdesign benötigt wird . Es ist eine Funktion für Entwickler. Es erleichtert den Prozess der Designübergabe, wenn der Designer die Designs Entwickler weitergibt, um eine App oder ein Webinterface zu erstellen Die Entwickler werden in der Lage sein , alle notwendigen Elemente und Informationen in einem Format und einer Sprache zu finden und Informationen in einem Format und einer , die für sie nützlicher Das ist alles, was Sie vorerst über die Toolbar wissen müssen. Auf der anderen Seite haben wir das Eigenschaftenfenster. Das Lustige am Eigenschaftenfenster ist, dass es sich je nach dem von Ihnen ausgewählten Objekt ändert. Wir wählen ein Rechteck aus und erhalten alle Eigenschaften für dieses bestimmte Rechteck. Wenn wir Text auswählen, erhalten wir leicht unterschiedliche Eigenschaften. Schrift, Textgröße usw. Wir werden jede dieser Eigenschaften später untersuchen , wenn wir sie tatsächlich benötigen. Sie müssen sich im Moment keine Sorgen um sie machen. Schließlich haben wir auf der linken Seite das Navigationsfenster, das einige verschiedene Abschnitte enthält. Da ist das Hauptmenü. Sie werden hier wieder alle FicMA-Einstellungen und -Optionen sehen. Dateiname und einige Aktionen der Datei. Datei im Vergleich zu Asset Stab. Das sind dieselben Assets , die Sie im Menü unter den Seiten finden , da unsere Datei mehrere Seiten haben kann. Und der Ebenenbereich. Jedes neue Element, das wir erstellen wird hier unter Ebenen angezeigt. Nun, warum heißt es Ebenen? Und warum nicht Objekte oder Elemente oder so? Weil sie übereinander liegen. Sie existieren im geschichteten Raum. Wenn wir zum Beispiel möchten, dass das lila Feld nach unten zeigt, müssen wir nur diese Ebene ziehen und sie unter das graue Rechteck verschieben. All diese Objekte sind untergeordnete Objekte unseres Frames namens Desktop. Dort leben sie. Und wenn wir eines dieser Objekte außerhalb dieses Rahmens verschieben , werden Sie sehen, wie das Ebenenbedienfeld aktualisiert wird und das Objekt außerhalb des Rahmens auf die allgemeine Leinwand verschoben wird. Das ist alles, was Sie vorerst über Figma wissen müssen. In allen Übungsübungen, die wir machen werden , werden weitere Funktionen auftauchen Wenn Sie noch nicht mitgemacht haben, beenden Sie die Pause und machen Sie gleich weiter. Fahren Sie dann mit der nächsten Lektion fort. Wenn Sie zu irgendeinem Zeitpunkt in diesem Kurs nicht weiterkommen, sind es neue Tools, sie werden manchmal aktualisiert und verschiedene Dinge ändern sich, und ich bin vielleicht nicht so schnell dabei, die Bildschirme und alles zu aktualisieren. Natürlich werde ich das tun, aber sie bewegen sich sehr schnell, haben diese Tools in der Hand und aktualisieren Bildschirme und Benutzeroberflächen sehr schnell. Also werde ich dir vielleicht etwas zeigen und es könnte plötzlich weg sein. Lass es mich wissen. Ich repariere das. Aber wenn du nicht weiterkommst, kannst du mir jederzeit eine Nachricht schreiben oder eine Frage in den Diskussionsforen stellen. Entweder ich oder ein anderer Student werden dir helfen. 7. Layout ist König: Werfen Sie einen Blick auf diese Helden-Sektion Design. Dieses Design ist überhaupt nicht schlecht, aber eine Sache stimmt damit nicht. Sehen Sie, ob Sie einzelne bemerken können. Jedes Element ist variabler Entwurf, aber Komposition zusammen sehen etwas aus, bevor Linien an den Kanten von jedem Element zu zeichnen waren , werden Sie sehen, dass Elemente nicht wirklich aufgereiht sind. Das zu beheben ist ziemlich einfach. Wir lügen nur. Die Dinge sind so viel wie wir können. Ein einfacher Trick. Ändern Sie das gleiche Design, Blick von ungeschickt, Zehe, ordentlich und poliert. Wenn ich Linien an den Rändern zeichnen würde,würde man eine einfache Sorte mit zwei vertikalen Hauptzugängen sehen. Wenn ich Linien an den Rändern zeichnen würde, Warum lässt das Ausrichten von Objekten eine Komposition besser aussehen? Es ist genau der gleiche Grund, warum dieses Zimmer besser aussieht als dieses Zimmer. Es ist der Befehl. Wir vermeiden Chaos und suchen Ordnung, und alles, was geordnet, symmetrisch und organisiert ist , wird als schöner wahrgenommen als alles, was chaotisch und unordentlich ist . Einige der wichtigsten Entwurfsregeln betreffen das Layout. Es ist eine Frage, wo man Dinge hinstellt, wie man sie arrangiert, was nach dem kommt und kommende Lektionen über alle Designtechniken und Regeln im Zusammenhang mit dem Layout sprechen . Hier geht es um die Ausrichtung, wahrscheinlich eine der einfachsten, grundlegendsten, aber eines der mächtigsten Designregeln da draußen. Nur eine einfache Ausrichtung kann etwas entworfen aussehen lassen. Auf der anderen Seite, Fehlausrichtung wird es schlampig und Amateurarbeit aussehen lassen. Wie viele Webentwickler, die keinen Hintergrund im Design haben, werden Elemente der Seite einfach nach dem Zufallsprinzip ablegen , wo sie passen. Dies macht eine Seite unordentlich und überhaupt nicht attraktiv aussehen, aber wir nutzen jede Chance, Objekte miteinander auszurichten. Dann schaffen wir etwas, das statisch, attraktiver aussieht . Es gibt sechs Möglichkeiten, Objekte linksbündig auszurichten. Das ist die natürlichste Art und Weise, die Dinge zu füttern. Denn so wie wir westliche Sprachen von links nach rechts lesen, fühlt es sich für unsere Augen am natürlichsten an, nach Objekten von oben links zu scannen. Dann haben Sie die Mittelausrichtung. Dies wird häufig in Waffen auf zuletzt in Print-Design gesehen. Wenn Sie für ein Kaninchen entwerfen, Hebräisch und andere Recht lassen Sprachen als die meisten natürlichen Ausrichtung wäre richtige Ausrichtung Kerben für die Steuer. Aber für andere Objekte und es gibt drei ähnliche Wege die Linienobjekte auf der horizontalen Achse. Oben lineman zentriert die Ausrichtung wieder, aber horizontale Achsen und die untere Ausrichtung. Fast alte Design-Software wird Ausrichtung Aktionstasten haben, und sie werden diese genauen Symbole verwenden, um ege Feed meine Anwendungen drei Zyklen darzustellen, und ich werde Ihnen zeigen, wo sie sind. In diesem Beispiel sehen Sie, dass mit einer Linie Objekte an ihren linken Kanten. Ausrichtung ist das erste Notensystem für eine gute Ebene. Wenn Sie anfangen, Dinge aufzurichten, werden Sie sehen, dass das Layout beginnt, eine Art Struktur zu bilden. Das nennt man den Großen. Es ist die Art, Elemente auf der Seite zu organisieren, um sie in eine erkennbare Struktur zu setzen. Aber welches Design mag wirklich die Gier, die in gleiche Größe unterteilt ist? Wenn wir also acht gleich mit Spalten zeichnen würden, die gleichmäßig verteilt sind und wir alle unsere Objekte nehmen und sie mit diesen Spalten ausrichten, dann würden wir ein Layout bekommen, das sich so viel mehr Balance anfühlt und gestaltet. Und der letzte Schritt in diesem Prozess besteht darin, die gleichen Werte so weit wie möglich wiederzuverwenden. Das vertikale Gas zwischen Objekten beträgt alle 30 Pixel, aber die horizontale Lücke beträgt 60 Pixel. Der richtige Schritt hier wäre, auch diese horizontale Lücke 30 zu machen. Jetzt haben wir ein wirklich ausgewogenes Layout. Warum die Gier so wichtig bleiben? Es gibt dem Publikum das Gefühl der Klarheit. Die Vereinbarungen sind nicht richtig, weißt du, sie sind impliziert. Und da das und Publikum fühlt es irgendwie. Und wenn Ah, etwas vorhersehbar und vertraut aussieht und wegen des sich wiederholenden Glaubensbekenntnisses, werden das Publikum und der Zuschauer der Website mehr vertrauen und sie werden es verstehen. Und sie wissen, dass dies die Website ist, die sie ihre Zeit nicht verschwenden wird. Die Gruppenregel ist flexibel auf immer Design innerhalb der großen Manchmal mache ich manchmal. Manchmal ignoriere ich acht. Manchmal habe ich zugestimmt. Und dann, weißt du, ich lasse die Dinge manchmal aus den Beschränkungen gehen, dass der Kerl viele Designer genau dasselbe kennt , was heißt, du weißt schon, sie könnten es nicht benutzen, grüßen vollständig oder sie könnten es irgendwie haben. Aber, wissen Sie, mehr in einer flexiblen Art und Weise zu verwenden. Aber für Sie, am Anfang, Ich möchte, dass Sie die Gier verwenden, weil für die Anfänge und wenn Sie lernen, wie man es einfach wirklich erstaunliche Art und Weise zu entwerfen, wie man diese große Design-Gewohnheit im Inneren Sie, und dann später können und können Sie es ein wenig flexibler Weg machen. Wir werden eine Übungsübung nach dieser Lektion machen, und ich werde Ihnen zeigen, wie Sie ganz einfach vereinbarte Inside Sigma erstellen und wie Teoh im Raster entwerfen können. Die meisten Design-Regeln, die wir in diesem Kurs sprechen werden, können gebrochen werden, obwohl, wenn wir eine Design-Regel brechen, müssen wir mit einer Absicht zu tun, denn wenn wir es nicht mit einer Aufmerksamkeit tun, in der wir nicht wirklich darüber nachzudenken, es, wahrscheinlich waren schlampig. Ein sehr gebräuchliches Design Lee aus, um im Web-Design zu verwenden ist ein Zentrum lee aus, das nicht wirklich unter ein richtiges Raster fällt. Werfen wir einen Blick auf dieses Beispiel. Es gibt kein prominentes Raster in diesem Abschnitt, das Künstler frei fließen, und die Elemente in der Mitte schaffen keine Art von Raster. jedoch Es siehtjedochimmer noch gut aus und sieht überhaupt nicht schlampig aus, weil es zumindest eine Ausrichtung gibt. Sie können Gier brechen, aber es kann wirklich in der Ausrichtung brechen. Wir können spüren, dass die imaginären vertikalen Linien These Elemente mit dem Imprint-Design ausgerichtet sind, die selten verwendete Mittelausrichtung. jedoch Im Gegensatz zu Druck kann die Websitejedochauf Hunderten von verschiedenen Bildschirmgrößen überall von einer winzigen Smartphone-Zehe betrachtet werden. Ein großer TV-Bildschirm. Aufgrund dieser sind die Oberteile sind reagiert worden. Der Inhalt kann verkleinern oder erweitern, je nachdem, ob der Bildschirm beim Aufdruck angezeigt wird. Der Designer würde die Elemente zu seinem absoluten formen. Ware Was auch immer gedruckt wird, würde nicht die Form oder Größe ändern. Sie wissen also, dass er ein optimales Ergebnis erzielen würde. Deshalb sehen Sie verrücktes Layout in Zeitschriften, aber nicht im Web. Also, das ist Ausrichtung und Gier in der Theorie. Als Nächstes werden wir die Ausrichtung in Great üben, damit Sie sie als Teil Ihres Entwurfsprozesses erstellen können. 9. Zuordnung: Ausrichtung und Raster: In diesem Video wirst du die Ausrichtung üben. Sie werden ein sehr einfaches Design in Figma erstellen und es in einer Aufgabe einreichen Danach ist es ein Folgevideo, also starte deine Figma Okay, wir werden also nichts Nützliches entwerfen. Der Zweck dieser Übung ist es, die Ausrichtung zu üben und praktische Erfahrungen mit Figma zu sammeln Wir skizzieren einen Heldenbereich einer Webseite, der manchmal auch als Header oder Above-the-Fold bezeichnet wird Wir werden nichts Ausgefallenes machen, keine Bilder, keinen Text, nur ein paar Rechtecke, quasi wie ein Doodle Also, was ist das Erste, was wir einfügen, wenn wir mit einem Design beginnen ? Das ist richtig. Rahmen. Wie im Figma-Tutorial gezeigt, können wir einen Rahmen hinzufügen, indem wir das Rahmenwerkzeug und dann eine der Voreinstellungen aus dem Eigenschaftenfenster auswählen Wählen wir den Desktop-Rahmen aus. Als Nächstes definieren wir unser Raster für diesen Frame. Warum? Weil wir unsere Website so strukturieren wollen, dass sie ordentlich und organisiert aussieht. Das Einrichten eines Grids in Figma ist sehr einfach. Raster gelten für jeden Rahmen einzeln, daher müssen wir den Rahmen auswählen Im Eigenschaftenfenster erhalten wir die Option, ein neues Layoutraster hinzuzufügen Vergessen Sie nicht, den Rahmen auszuwählen, da er sonst nicht angezeigt Standardmäßig erhalten wir dieses zweidimensionale Raster, das einen Rahmen in kleine Quadrate mit einer Größe von zehn Pixeln unterteilt , aber das ist nicht das Raster, das wir wollen Was wir wollen, ist ein vertikales Raster , das die Seite in mehrere Spalten unterteilt Das im Webdesign am häufigsten verwendete Layoutraster ist ein 12-Spalten-Raster Warum 12 Spalten, weil es wirklich gut unterteilt ist. 12 ist ein Vielfaches von Drei und Vier, also können 12 Spalten mit sechs Spalten auf jeder Seite in zwei Hälften geteilt werden mit sechs Spalten auf jeder Seite in zwei Hälften geteilt Es kann in drei Teile aufgeteilt werden wobei jeder Teil vier Spalten breit ist, oder es kann in vier Teile aufgeteilt werden, wobei jeder Teil drei Spalten breit ist. Andere Layoutraster bieten weniger Optionen. Raster mit zehn oder acht Spalten kann beispielsweise in drei gleiche Größen aufgeteilt werden , was sehr einschränkend ist Wenden Sie ein 12-Punkt-Raster aus der Drop-down-Liste an, wählen Sie Spalten in der Zählung aus und geben Sie Pin 12 Lassen Sie uns nun einige Abstände in unserem Raster anpassen. Der Inhalt der Website ist normalerweise nicht an den Rändern angeordnet . An den Rändern jeder Website befinden sich Ränder , und der Inhalt ist in der Mitte angeordnet. Wir können diese Ränder genau hier auf unser Raster anwenden. Etwas wie 140 Pixel sollten in Ordnung sein. Wenn wir den Rand vergrößern, können Sie sehen, wie die Spalten zu schrumpfen beginnen Eine weitere Sache, die ich hier gerne anpasse ist der Abstand zwischen den Spalten Das wird Dachrinne genannt. es 20 Pixel, aber für mich ist es nicht genug Ich möchte einen etwas genaueren Abstand zwischen den Objekten um 30 oder 40 Pixel herstellen den Objekten um 30 oder 40 Pixel In Ordnung, das ist unser Grid. Ich möchte, dass Sie genau dasselbe Raster mit den gleichen Werten erstellen genau dasselbe Raster mit den gleichen Werten Hier werden wir den Inhalt unserer Website gestalten. Das Raster ist ein Overlay. Sie können es nicht mit der Maus auswählen, und wir können das Raster direkt von hier aus ein- oder ausblenden Daneben befindet sich eine Abkürzung. Es wird für Mac angezeigt, das ist Control G. Unter Windows ist es wahrscheinlich etwas anderes, aber Sie können es sehen, wenn Sie Windows verwenden. Und genau da wird unser Design hinführen. Als Nächstes möchte ich diesem Rahmen ohne besonderen Grund eine Hintergrundfarbe geben , nur zum Spaß. Wie machen wir das? Denken Sie daran, dass Sie für jedes Objekt, das Sie bearbeiten möchten , zuerst dieses Objekt auswählen müssen. Das Eigenschaftenfenster wird sofort aktualisiert, wenn Sie es auswählen, und jetzt haben wir hier die Option , die Hintergrundfarbe zu ändern. Dies ist ein sehr standardmäßiger Farbwähler, den Sie in fast jeder anderen Design - oder Nicht-Designanwendung sehen würden fast jeder anderen Design - oder Nicht-Designanwendung Später werden wir uns eingehender mit Farben befassen, und ich werde Ihnen auch zeigen, wie Sie und ich werde Ihnen auch zeigen, wie Sie diesen Farbwähler wie ein Sie können jede Farbe wählen, die Sie bevorzugen oder sie weiß lassen, wenn Sie möchten Wenn Sie die Hintergrundfarbe gewählt haben und das Raster keinen guten Kontrast hat, können Sie die Farbe des Rasters jederzeit anpassen. Siehst du, das ist viel besser. Lassen Sie uns nun einige allgemeine Elemente darlegen , die wir auf einer Standard-Website haben würden. Denken Sie daran, dass wir nur ein supereinfaches Wireframe machen, also werden wir nur Rechtecke verwenden Was haben wir auf jeder Website? Eine Navigationsleiste, die normalerweise ein Logo und einige Links zu verschiedenen Seiten an der Seite enthält . Lassen Sie uns ein Rechteck zeichnen. Das wird unsere Navbar sein. Sie werden hören, dass ich manchmal das Wort Navbar als Abkürzung für Navigationsleiste verwende das Wort Navbar als Abkürzung für Navigationsleiste Okay. Ich mag es, präzise zu sein, also werde ich die Höhe dieses Rechtecks von hier aus auf 70 Pixel ändern . H ist ein Wert für die Höhe und W ist der Wert für die Breite. Hier ist ein kurzer Tipp. Wenn Sie die Pfeiltasten auf der Tastatur nach oben und unten drücken, während Sie sich in diesem Feld befinden, können Sie Werte einfach so erhöhen oder verringern. Und wenn Sie gleichzeitig die Umschalttaste gedrückt halten, der Wert nicht um ein Pixel erhöht, sondern wird der Wert nicht um ein Pixel erhöht, sondern um zehn Pixel. Okay, geben wir dieser Navigationsleiste eine etwas dunklere Farbe. Also noch einmal, wenn wir ein Objekt hinzufügen möchten, wählen wir es aus und wir haben alle Eigenschaften im Panel genau hier, und wir können die Feldfarbe dieses Rechtecks von hier aus ändern . Ich mache es schwarz, aber wir machen es transparent. Dieser Schieberegler hier ändert die Transparenz der Farbe. Dies wird allgemein als Opazität bezeichnet. Sie haben diesen Begriff wahrscheinlich schon einmal gehört. In diesem Prozentfeld können Sie auch die Deckkraft einstellen. Stellen wir es auf 20% ein. Dies ist ein kleiner Designtrick , um dieselbe Farbpalette beizubehalten. Sie können schwarze oder weiße Überlagerungen verwenden , die halbtransparent sind Dadurch verteilt sich die Hintergrundfarbe darin und Sie erhalten eine Farbe , die Teil derselben Farbpalette ist Als Nächstes zeichnen wir ein Logo auf der linken Seite. Wir werden ein Rechteck als Platzhalter für das Logo zeichnen. Hier kommt das Raster ins Spiel. Wenn wir anfangen, Objekte zu zeichnen, werden wir sie innerhalb dieser Rasterspalten platzieren. Unsere Optionen sind entweder , es in eine Spalte, zwei Spalten, drei usw. einzupassen . Für unser Logo haben wir die Möglichkeit, uns für eine oder zwei Spalten zu entscheiden. Lass uns mit zwei gehen. Das Grid macht unseren Entscheidungsprozess viel einfacher. Wir müssen uns nur zwischen zwei Größen entscheiden anstatt uns zwischen Hunderten von verschiedenen Pixelgrößen zu entscheiden . Sie die Größe von Objekten ändern, werden Sie die intelligenten Hilfslinien sehen, die erscheinen, wenn Ihr Objekt am Rand der Rasterspalte ausgerichtet am Rand der Rasterspalte wird. Sie helfen Ihnen dabei , die Größe der Objekte genau zu bestimmen Und lassen Sie uns die Farbe ändern. Die Farbe liegt bei dir. Eine andere Sache, ich tun möchte, ist dieses abgerundete Rechteck zu machen. Dazu müssen wir den sogenannten Eckenradius ändern. Ich möchte es komplett abgerundet haben. Dieser Wert hängt von den Abmessungen des Rechtecks ab. Erhöhen Sie ihn also einfach, bis er vollständig abgerundet ist. Es spielt keine Rolle, ob Sie einen sehr seltsamen Wert erhalten. Das ist unser Platzhalter für das Logo. Jetzt brauchen wir Navigationslinks. Ich werde diese Box einfach duplizieren. Es gibt ein paar Möglichkeiten, das zu tun. Die naheliegendsten Möglichkeiten , Control C, Control V oder Command C, Command V auf dem Mac zu verwenden. Dadurch wird es direkt oben eingefügt, und dann können Sie es von dort ziehen. Aber meine Lieblingsmethode, etwas zu duplizieren, besteht darin, auf dem Mac die Aus-Taste oder die Wahltaste zu drücken und das Objekt dann zu ziehen. Dadurch wird das ursprüngliche Objekt dupliziert. Lassen Sie uns dieses hellbraune Pixel kleiner machen und es nur in eine Spalte einfügen , damit es ein bisschen mehr wie ein Link aussieht. Lassen Sie uns nun noch ein paar davon ziehen und sie an den Spalten ausrichten. Rote Kurzanleitungen helfen Ihnen bei der Ausrichtung. Figma kann das Ausrichten jedoch auch für Sie übernehmen. Zuerst müssen wir die Objekte auswählen, die wir ausrichten möchten. Sie können einfach einen Cursor um Ihre Objekte ziehen. Jetzt können wir diese Objekte mit einer dieser Optionen ausrichten. Sie können wahrscheinlich die Formen aus der vorherigen Lektion wiedererkennen . der ersten Option werden Objekte linksbündig ausgerichtet, aber das ist nicht das, was wir wollen. Wir möchten, dass diese Option Objekte horizontal zentriert. Und richtig, das ist unsere Navbar. Nun zum Rest des Inhalts. Okay, was haben wir in unserer Heldenabteilung? Eine Schlagzeile, richtig. Lassen Sie uns dieses Rechteck erneut duplizieren und es eher wie eine Überschrift aussehen lassen. Nach der Überschrift haben wir normalerweise einen Absatz, in dem das Unternehmen oder das Produkt erklärt wird. Lassen Sie uns etwas zeichnen , das wie ein Absatz aussieht. Ordnung. Das ist unser Absatz-Platzhalter Und nach dem Absatz haben wir normalerweise Schaltflächen, in denen wir aufgefordert , uns anzumelden, mehr zu erfahren usw. Und das ist unser Heldenbereich. Mal sehen, wie es ohne das Gitter aussieht. Das ist es, eine sehr einfache Übung um Ihnen den Einstieg Figma zu erleichtern und die ersten Schritte des Webdesigns zu üben Wir haben nichts Nützliches geschaffen, aber wir haben einen sehr wichtigen Schritt getan Jeff Pesos, der CEO von Amazon, liebt dieses lateinische Sprichwort „ Schritt für Schritt“ sehr. So werden wir diesen Kurs angehen . Wir werden einen Schritt nach dem anderen machen und uns wild zum Endziel führen 10. Layout: Bedeutung der visuellen Hierarchie: treffen Links Autos dot com eine der erschreckendsten Websites, die ich je gesehen habe. Was macht das einige Websites so urkomisch schrecklich? Und was macht andere sieht gut gestaltet bereits abgedeckt? Der erste große Grund, dass die Ausrichtung dieser Seite hasst Ausrichtung seiner Anti Verbündeten. Der zweite große Grund ist eine visuelle Hierarchie. Jedes Objekt auf dieser gottverlassenen Seite verlangt unsere Aufmerksamkeit gleichzeitig. Wir wissen nicht, wo wir uns ansehen sollen, wo wir unsere Reise beginnen sollen, und das kann so überwältigend sein, dass wir die Seite lieber schließen würden. Jetzt auf dieser Seite gibt es eine sehr starke visuelle Hierarchie. Was ist das erste, was du angeschaut hast? Wahrscheinlich entweder die flippige, bunte Kunst auf der Fahrt oder die Schlagzeile. Dann kommt der Rest der Elemente, eins nach Wunsch. Diese Zusammensetzung nahm uns an der Hand und führte uns Schritt für Schritt auf, was war die wichtigste Information Erste und zweite und so weiter. Schauen Sie sich die beiden Tasten an. Es gibt eine klare Hierarchie, sogar zwischen ihnen. Offensichtlich ist der volle Knopf der Alfa Doc. Dies wird als visueller High Rock bezeichnet, und es ist ein grundlegendes Prinzip von gutem Design. Visuelle Hierarchie hat viel zu tun. Die Art und Weise, wie unsere Aufmerksamkeit funktioniert. Wir können uns einfach nicht auf mehr als eine Sache konzentrieren. Dies gilt vor allem für unsere Vision. Der einzige sehr kleine Bruchteil dessen, was wir sehen, ist eine High Definition. Der Rest ist eine niedrige Auflösung periphere, äh , periphere Unschärfe. Tun Sie dies, machen Sie ein Daumen nach oben Schild, legen Sie Ihre Hand vor sich und schauen Sie sich direkt auf Ihr Thumbnail an. Und das kleine einige Nagel ist die High Definition ist die einzige High-Definition, die Sie den Rest aus sehen . Es ist niedrig rez und ziemlich verschwommen. Die Hierarchie im Entwurf beginnt mit einem Brennpunkt. Tom Hanks sitzt auf der Bank ist das unbestreitbare visuelle Ziel dieses Plakats. Das ist der interessanteste Hank. Betrachten Sie einen Brennpunkt als Rampenlicht auf einer Bühne. Sie sehen, wie diese Phase nicht wirklich zu spät ist. Es ist dunkel und älteste, aber Linien scheinen auf Michael Jackson, was ihn in diesem Stadium zum offensichtlichen Mittelpunkt macht. Wenn sie die Bühne komplett belogen hätten, dann wäre alles andere sichtbar. Aber das ist nicht ihr Ziel. Unser visuelles Interesse liegt offensichtlich auf Michael, und die Bühnendesigner haben dafür gesorgt, dem Publikum genau zu geben, dass wir dieses Design dieser Grafik Jungs den Schwerpunkt dieser Komposition? Er ist der Hauptheld darin. Genau deshalb sind wir für zwei als Hauptgrafik auf den Seiten. Der Held Schuss war Do ein wenig Selbstkritik von einem meiner frühen Arbeiten diese die Leihseite , die für eine Immobilienagentur gebaut. Ich klappere ein wenig, wenn ich ein Design Fehler in Süd meine frühe Arbeit sehe. Aber was wirst du tun? Es ist der Lernprozess. Der klare Bösewicht aus dieser Arbeit ist definitiv ein Mangel an der richtigen visuellen Hierarchie. Die Formen dieser Art erfolglos versuchen, der Schwerpunkt zu sein. Aber es sollte nicht oben auf dem Irak sein. Es ist nicht die Hauptbotschaft dieser Seite. Wie kommt es, dass versucht, so viel Aufmerksamkeit zu stehlen, wenn es ein großes Hintergrundbild wie dieses gibt? Normalerweise liegt es daran, dass wir der Held für das Publikum sein wollten, um dort anzufangen, aber das passiert hier nicht. Es ist dunkel, niedrige Qualität, und es ist nicht klar, was zur Hölle auf dem Bild passiert. Ganz zu schweigen davon, wie die riesige Form und die Steuern, die so viel abdecken, es Picks und Wunder. Was macht dieses Bild? Schrecklich zusammen? Es hat keinen Wert. Es fügt der Komposition nur mehr Rauschen hinzu. Hintergründe zu spielen wäre eine enorme Verbesserung dafür. Gleiche mit der Kopie. Es gibt keine klare Hierarchie. Es ist schwer zu sagen, wo Überschrift und wo Absatz beginnt, denn sie sind so ähnlich und Stil, wenn wir gutes Design sehen, oft ist es eine visuelle Hierarchie, die zu seiner Schönheit beiträgt. Was da ist, entwarf eine Website oder einen erfundenen Anwalt namens Vinson Schwartz. Was ist das Wichtigste auf dieser Seite? Einfach. Die Tatsache, dass er ein Bostoner Anwalt ist, oder ist es seine eigene Akte? Oder ist sein Foto, das wir nicht kennen? Weil es keine Hierarchie gibt. Alles sieht so aus, nun, wir können der Erzählung nicht wirklich folgen. Das ist eine ganz andere Geschichte. Es ist 100% Verbesserung, und ich habe nicht viel getan. Ich habe ein paar Design-Tricks verwendet, um eine klare Hierarchie zwischen den Objekten zu erstellen, und ich werde Ihnen später in diesem Teil des Kurses alles über diese Tricks beibringen, so dass Sie etwas nehmen können, das wie ein Amateur aussieht, indem Sie Elemente auf die Seite zufällig und verwandeln Sie es in gut polierten Krieg, dass Sie wirklich gut bezahlt werden können. Lassen Sie uns das hohe Ranking hier aufschlüsseln. Haben wir einen Schwerpunkt? Offensichtlich ist es das Foto von Vincent und wie ist der Rest der High reguliert? Die zweite und Wichtigkeit? Ich würde sagen, das Namensschild, weil wie nah es am Brennpunkt ist. Es ist ein Teil davon. So wird der Betrachter auf das Bild und den Namen in einem schnellen oh als die Bold All Caps Schlagzeile schauen. Viertens ist eigentlich der Knopf vor der Steuer, weil es ah ist, größeres Objekt mit etwas Leerraum um ihn herum. Und schließlich hatte das oben einen Text. Was genau habe ich hier getan, um diese visuelle Hierarchie zu erstellen? Wie kommt es das? Und fast keine Hierarchie? Aber dies hat einen sehr ausgeprägten Stimmpunkt und eine klar definierte visuelle Hierarchie unter den Elementen glauben, dass dies mit Größen und Gewichten oder Elementen zu tun hat. Größe und Gewicht ist, was normalerweise die Hierarchie definiert. Es gibt auch andere Möglichkeiten, wie Kragenkontrast oder Bilder, die viel Aufmerksamkeit auf sich ziehen und so weiter. Aber Designer verlassen sich in erster Linie auf Größe und Gewicht. Was ich tat, war, die Größe des Fotos zu vergrößern. Ich habe es zum größten Element gemacht. Das war's. Was auch immer das größte auf dem Bildschirm ist, wird die meiste Aufmerksamkeit auf sich ziehen. So einfach ist es. Das violette Rechteck hinter dem Bild bringt auch mehr Aufmerksamkeit auf das Foto. Ohne sie müsste ich das Foto viel größer machen. Dann habe ich die Hierarchie zwischen dem Überschriftenabsatz und der Schaltfläche definiert. Ich habe die Überschrift Big, Bold und alle Mützen gemacht. Nicht nur Up machte die lustige Größe viel größer als das Original, sondern machte es auch extrem Ball thes. Kühnheit ist, was ich als ein Gewicht oft Element bezeichne. In den Telefonfamilien sieht es schwer aus. Sie werden sogar den Stil „Gewohnheit“ sehen. Der Absatz unter der Überschrift ist deutlich kleiner als die Überschrift. Es ist wie David und der Go Hyah! Es ist ein normales Telefon warten, kleine Kappen und kleine Telefongröße und die Taste habe ich transparent mit nur den Rändern gemacht . Dies wird allgemein als Geister-Button bezeichnet. Sie möchten dies normalerweise nicht als primäre Schaltfläche verwenden, sondern für sekundäre Aktionen und in Fällen, in denen Sie die Bedeutung verringern möchten. Es ist ein großartiger Nutzen. Und zu guter Letzt habe ich eine Teigausrichtung für den Inhalt verwendet, bevor alles nur in der Mitte zentriert war . Ich öffne Ihre Mitte Ausrichtung, aber oft macht es keinen guten Job und machen das Design aussehen polieren und organisiert die linke Ausrichtung mit vereinbarten definitiv einen besseren Job als eine lustige Übung. Ich möchte, dass Sie auf die Entwürfe um Sie herum achten. Achten Sie auf die Plakate und Plakate, Flyer, die Menschen geben Ihnen und natürlich die Websites. Und schauen Sie, wenn der Designer eine gute visuelle Hierarchie verwendet hat oder nicht, und als nächstes werden wir die Hierarchie üben, bleiben Sie herum. 11. Zuordnung: Visuelle Hierarchie: In diesem Video werden wir visuelle Hierarchie üben. Wir werden den Inhalt von dieser Anwaltswebsite nehmen und alles anwenden, was wir bereits über visuelle Hierarchie und Ausrichtung gelernt haben bereits über visuelle Hierarchie und Ausrichtung gelernt , und es üben und auf unser Beispiel anwenden. Es ist ein Follow-Along-Video, also starte deine Figma Gehe zu der Figma-Datei, die ich in den Ressourcen verlinkt habe. Die verknüpften Dateien sollten automatisch eine Kopie in Ihrem Konto erstellen, sobald Sie sich anmelden Wenn neben dem Dateinamen Nur anzeigen“ oder „Gesperrt“ steht. Das heißt, es wurde nicht dupliziert. Sie müssen eine Kopie der Datei erstellen , bevor Sie sie bearbeiten können. Klicken Sie neben dem Dateinamen auf den Pfeil und wählen Sie „In Ihren Entwürfen duplizieren“ aus Dadurch wird eine Kopie der Datei in Ihrem Figma-Konto erstellt , und Sie können die Datei nach Ihren Wünschen bearbeiten Lassen Sie uns dieses Design nun noch einmal wiederholen. Wir müssen nur anwenden, was wir bisher gelernt haben. Sie werden sehen, dass das Nachdenken über Hierarchie und Ausrichtung den Großteil der Gestaltung für uns übernehmen wird . Fangen wir mit unserem Grid an. Erinnerst du dich, wie man das hinzufügt? Wir müssen zuerst den Rahmen auswählen, und dann erscheint die Option Layoutraster im Eigenschaftenfenster. Genau wie beim letzten Mal haben die Spalten 12 einen Abstand von 30 Pixeln, aber dieses Mal einen Rand von 60 Pixeln, weil wir einen kleineren MacBook-Rahmen anstelle des Desktops verwenden Die Navigationsleiste passt perfekt an die Ränder dieses Rasters weil ich genau das verwendet habe, als ich die Navigationsleiste entworfen Aus diesem Grund können wir die Navigationsleiste an ihrer Position belassen die Navigationsleiste an ihrer Sie werden sehen, dass die Links in der Navigationsleiste nicht mit den Rasterspalten übereinstimmen, aber das ist in Ordnung Wie ich bereits sagte, ist das Raster eine Richtlinie, keine verbindliche Regel. Wir müssen es nicht immer wörtlich nehmen. Wenn wir die Schaltfläche und die Links an den Spalten ausrichten würden, würden wir in diesem Fall nicht die besten Ergebnisse erzielen. Zum Beispiel ist eine Spalte zu klein für die Schaltfläche und zwei Spalten sind zu groß. Lassen Sie uns über die visuelle Hierarchie nachdenken. Denken Sie daran, wie das visuell interessanteste Objekt heißt , der Mittelpunkt. Es ist eine gute Idee, das Foto als Mittelpunkt zu verwenden. Wenn Sie Fotos haben, insbesondere von Menschen, ist es normalerweise eine gute Idee, sie in den Mittelpunkt zu stellen. Wie machen wir das also? Beim letzten Mal habe ich einige Tricks benutzt, um mehr Aufmerksamkeit darauf zu lenken, aber wir können es einfacher machen. Es sehr groß zu machen, funktioniert immer. Wenn du willst, dass etwas auffällt, mach es groß, Baby. So einfach ist das. Da es sich, wie Sie sehen, um ein vertikales Foto handelt, eignet es sich nicht als Hintergrundfoto. Stattdessen können wir es auf der Hälfte des Bildschirms verwenden. Okay, dieses Foto verdeckt also die Navigationsleiste. Denken Sie an das Ebenenbedienfeld. Da es sich um eine höhere Ebene handelt, verdeckt sie alles darunter liegende. Wir müssen es unter die aktuelle Leiste verschieben. Wir können das tun, indem wir es entweder in das Ebenenbedienfeld ziehen, aber es ist einfacher, eine Option zu verwenden, die das für uns erledigt Klicken Sie mit der rechten Maustaste auf das Foto und wählen Sie „An zurück senden“. Dadurch wird das Foto ganz nach hinten gesendet. Jetzt ist die Navbar oben. Aber weil die Navbar Tax dunkel ist, können wir nichts sehen. Lassen Sie uns das beheben Ich werde das Rasterlayout deaktivieren damit ich besser sehen kann, was vor sich geht Wir können das von hier aus für das gesamte Dokument ausschalten, aber Sie werden sehen, dass ich oft eine Tastenkombination verwende. Lassen Sie uns jetzt die Links in der Navigationsleiste weiß machen. Gut. Lass uns etwas Ähnliches mit dem Button machen. Es ist nicht sehr sichtbar. Ich könnte natürlich die Farben umdrehen, die Schaltfläche weiß und den Text dunkel machen. In diesem Fall ist es jedoch besser, entweder eine Ghost-Schaltfläche oder eine halbtransparente zu verwenden . Ändern Sie die Hintergrundfüllung auf Weiß und verringern die Deckkraft der Farbfüllung auf etwa zehn bis 20% Ich mag diese halbtransparenten Knöpfe sehr. Sie sehen sehr schick aus. Sie können sehen, wie unser Design mit sehr einfachen Änderungen allmählich eine viel bessere Form annimmt Wir haben einen unbestreitbaren Schwerpunkt dieser Komposition. Lassen Sie uns nun unsere Inhalte besser organisieren und eine visuelle Hierarchie zwischen ihnen erstellen Lassen Sie uns sie zunächst nach links ausrichten und in ein Raster einfügen . Jetzt müssen wir entscheiden, was unsere Hauptbotschaft sein soll. Hier müssen wir anfangen, etwas tiefer über unsere Ziele für die Website und die Besucher nachzudenken . Designer zu sein bedeutet nicht nur, Dinge hübsch aussehen zu lassen. Oft geht es darum, über die Ziele Ihres Designs nachzudenken und darüber, wie Sie diese Ziele am effektivsten erreichen können. Ein Heldenbereich fast jeder Website muss dem Benutzer drei Fragen beantworten. Worum geht es auf dieser Website? Was werde ich aus dieser Website herausholen und wie erhalte ich sie? Die erste Frage ist, worum geht es auf dieser Website? Nun, es geht um Vincent Schwartz , einen Scheidungsanwalt in Boston Nun, welche dieser beiden Informationen, sein Name und sein Scheidungsanwalt in Boston , ist wichtiger Das kann von einigen anderen Faktoren abhängen. Wenn er zum Beispiel ein bekannter Anwalt ist, wäre es wichtiger, zuerst seinen Namen anzugeben. Wenn er nicht bekannt ist, es wichtiger zu zeigen, dass es auf dieser Seite um den Scheidungsanwalt in Boston geht. Nehmen wir an, wir wissen vom Kunden, dass sein Name eine wichtige Information ist und als Hauptinformation angezeigt werden muss . Case, wir werden den Namen groß und fett machen. Ich werde es jetzt viel größer machen weil der Schwerpunkt, das Foto, so viel auffälliger ist , dass ich mir einen größeren Text leisten kann. In meinem vorherigen Beispiel konnte ich es nicht zu groß machen, weil das Foto kleiner war. Für die Schriftart für die Überschrift habe ich Play for Display Font gewählt und den schwarzen Stil verwendet, die schwerste Form darstellt Ein ganzer Abschnitt dieses Kurses ist der Typografie gewidmet Es ist ein großes Thema im Design, und Sie lernen viel darüber, wie Sie Schriften so auswählen können, dass Ihre Designs großartig aussehen In dieser Übung können Sie die Schriftart wählen, die Ihnen gefällt, achten Sie jedoch darauf, wie Sie die Schriftstärke und -größe wählen. Die Schriftstärke kann hier ausgewählt werden. Wie viele Optionen Sie hier erhalten, hängt von der Schriftfamilie ab und davon, mit wie vielen Schriftstärken sie geliefert wird. Okay, da ich einen großen und schweren Stil für den Namen gewählt habe , werde ich für den Text des Scheidungsanwalts in Boston das Gegenteil tun . Ich werde die Schrift behalten , die es war und einen hellen Stil wählen und ihn noch kleiner machen. Der Untertitel konkurriert definitiv nicht um die Aufmerksamkeit Der Name steht im Rampenlicht , und genau das wollen wir Die Hierarchie zwischen den beiden ist klar. Als Nächstes passen wir den Absatztext an. Ich werde die Textgröße etwas weiter verringern , und das war's. Mit dem Button werde ich so leben, wie er ist. Ich werde es einfach kleiner machen, und das wird reichen, um seine Bedeutung zu verringern. Das ist alles. Das sieht ziemlich gut aus. Wie stehts mit der Hierarchie? Haben wir einen Mittelpunkt? Darauf können wir wetten. Wie wäre es mit den restlichen Elementen? Wir haben unsere Überschrift, die visuell am auffälligsten ist, und dann die restlichen Elemente mit unterschiedlichem Grad an visueller Bedeutung. Und das ist alles. Wenn Sie dem nicht gefolgt sind, sind Sie jetzt dran. Sie können gerne von unserer Version abweichen, wenn Sie es bevorzugen. Das Wichtigste ist, zwei Ziele zu erreichen, nämlich A, einen Schwerpunkt zu haben und B, unterschiedliche Ebenen der visuellen Bedeutung zwischen anderen Elementen zu unterschiedliche Ebenen der visuellen Bedeutung zwischen anderen Elementen Es liegt an Ihnen, ob Sie verschiedene Farben verwenden möchten , kein Problem, verschiedene Schriftarten, eine andere Anordnung, oder Sie können meine Version Pixel für Pixel neu erstellen Spielt keine Rolle. Das Wichtigste ist, dass du anfängst, wie ein Designer zu denken und anfängst, es zu bemerken und jederzeit visuelle Hierarchien im Kopf zu haben 12. Layout: Bewährte optische Illusionen: zwischen diesen beiden horizontalen Lügen, nur die Löwen, nicht zählen ihre eigenen Köpfe, die man von dieser Linie ist länger, Genau wie 8% der Menschen. Sie gingen wahrscheinlich mit dem Endergebnis, aber die Wahrheit ist, dass ihre exakt gleiche Länge diese Art von optischen Täuschungen die ganze Zeit passieren . Im Design nehmen Sie zwei Objekte, messen Sie sie und sehen, dass sie oft exakte Größe haben. Aber unsere Augen sagen, ist, dass der Kreis etwas kleiner ist als das Quadrat. Also, was machen wir in solchen Fällen? Gehen wir? Was sind Herrscher sagt, Oder vertrauen wir unseren Augen? Die meiste Zeit werden wir unseren Augen vertrauen. Das heißt, wenn ein Objekt etwas kleiner erscheint als sein Gegenstück, müssen wir die optische Täuschung kompensieren und die Größe leicht erhöhen, bis beide gleich groß erscheinen. Dann werden wir zu Objekten, die die gleiche Größe erscheinen müssen. Dies ist wichtiger als die tatsächlichen Pixelgrößen, da das Publikum nicht aus den Linealen herauskommt und mit der Messung beginnt. Aber wenn etwas kleiner aussieht, finden sie es sollte. Illustrationen sind allgemeine grafische Elemente, die Sie in Ihren Webdesigns verwenden. Oft werden diese Illustrationen, oder Aikens, oder Aikens,sehr, äh, Formen haben äh, . Es wird gleich groß sein. Illustrationen sehen sehr unterschiedlich aus. In diesem Beispiel sieht der Umschlag auf dem Lached größer aus. Es überwältigt das Symbol auf der rechten Seite, wenn sie gleich Hierarchie haben sollen. Obwohl ihre Größen identisch sind, haben sie sowohl die gleiche Höhe als auch die gleiche mit, aber der Umschlag hat viel volleren Körper im Vergleich zu diesem Zelt. Dies ist, was Designer in der Regel als die Wege aus dem Objekt bezeichnet, und schwerere Objekte werden größer aussehen. Sie werden breiter oder größer aussehen, daher müssen wir den angespannten, leichteren Körper manuell kompensieren, indem wir seine tatsächlichen Pixelabmessungen erhöhen. Es gibt keine Regel darüber, wie viel zu erhöhen ist. Dies muss getan werden, indem ich es vergrößere, bis sie sich wie gleiche Größe fühlen. Dann erhalten Sie eine ausgewogene Komposition, die sich mit passenden Größen ausgerichtet fühlt. Diese winzigen kleinen sagen uns ist, was die Seite so aussehen lässt, als ob sie von einem Amateur oder einem Profi entworfen wurde . Die meisten Web-Designer und Entwickler, die keinen Hintergrund in Grafik-Design oder irgendetwas entwickelt verwandt haben. Sie messen die Dinge an einem Lineal. Und was passiert, ist, dass die Ergebnisse inkonsistent und ziemlich ungeschickt sind, abgelehnt oder der Benutzer wird nicht bemerken, was genau falsch mit einer Seite ist. Sie werden es bemerken, aber sie werden nicht wissen, was genau damit los ist, aber sie werden scheitern, dass die Seite nicht Zitat unquote entworfen ist. Hier ist eine weitere sehr häufige optische Täuschung. Diese waas, einer der ersten, ist es sei denn, dass ich von meinem Design-Mentor erhalten. Wann immer wir etwas tun müssen, zum Beispiel Steuern in den Kasten, was macht man normalerweise? Finden Sie die genaue Mitte vom Container an Ort und Stelle, Element direkt in der Mitte. Das Problem dabei ist, dass Text sich anfühlt, als würde er sinken. Es fühlt sich sogar wie Raum über dem Texas größer an als der Raum darunter, sinkende Gefühl ist kein guter Eindruck für jedes Design. Stattdessen wollen wir die Steuer ein wenig nach oben richten, so dass es sich anfühlt, als ob es schwebt, um sich leicht zu erinnern. Betrachten Sie es als ein Schiff, das sinkt. Kein gutes schwimmendes Schiff. Großartig. Das bedeutet nicht, dass Sie es immer nach oben schieben sollten, anstatt genau in der Mitte auszurichten. Manchmal wird es nicht nötig sein. Es hängt von der Typografie, Abstand und so weiter ab, genau wie alle optischen Täuschungen. Entweder erscheint es, oder es braucht nicht, eine Illusion zu beheben, wenn sie nicht existiert. Aber wenn du das Sinken siehst, die Tatsache, dann repariere es. In der Tat werden schwerere aussehende Objekte das Gefühl haben, dass sie Mawr sinken, und leichtere Objekte neigen dazu, das Gefühl zu haben, dass sie schweben. Es ist verrückt, wie genau das für eine reale Welt ist. 13. Layout: Nähe: Eine Sache. Anfänger Designer neigen dazu, einen Raum aus Elementen gleichmäßig auf der Seite zu tun. Hauptsächlich tun sie diese, um sie in den Weltraum zu füllen, weil alle Anfänger Designer Angst vor leerem Raum haben . Mehr dazu in der späteren Lektion. Aber was Design eigentlich mag, ist, Elemente näher beieinander zu gruppieren, wenn sie etwas gemeinsam haben . Dies ist ein Designkonzept namens Nähe. Die Grundidee der Nähe ist, dass denkt, die verwandt sind, sollten eng beieinander sein, und Dinge, die nicht verwandt sind, sollten weiter auseinander sein. In diesem Beispiel habe ich alle Navigationslinks näher zueinander verschoben, weil sie verwandt sind. Sie haben einen gleichen Kontext. Nun ist die Überschrift näher an den Text darunter, weil sie verwandt sind. Die Tasten sind ein wenig weiter von der Steuer, aber zwei von ihnen sind nahe beieinander, weil sie ähnliche Aktion Schlagstöcke sind. Sie bieten beide an, was als nächstes zu tun ist, und schließlich die kleine Steuer unter dem grünen Knopf. Ich habe mich viel näher an den Boden bewegt, weil es eine Art Beschreibung von den Tasten so dass es sogar ohne sie existieren kann. Was passiert, wenn Sie nicht verwandte Elemente gut nahe beieinander legen, bedeutet dies eine Beziehung, die tatsächlich nicht existiert. Zum Beispiel, wenn wir einen Slogan direkt neben den Navigationslinks setzen, weil aus seiner Nähe Benutzer den Slogan leicht mit einem Menüpunkt verwechseln und denken, dass es sich um einen Clip klickbaren Link handelt, besonders wenn diese -Elemente haben einen ähnlichen Stil. Proximity ist eine sehr nützliche Designrichtlinie. Es macht Inhalte nicht nur leicht zu verstehen und zu verdauen für den Benutzer, sondern es macht es auch schön und Design. Und ich denke, Sie wissen, Dinge, die einfach und leicht zu verstehen sind, ist ziemlich schön für die Benutzer. 14. Wie du Typografie wunderbar verwendest: jede Website da draußen hat Text darauf, und viel Design hängt davon ab, wie wir diese besteuerten Stile auswählen. Dies wird Typografie genannt. Typografie ist nicht nur die Wahl der richtigen Telefonate. Es geht um die Auswahl der Kombination aus diesen Handys, die verschiedenen Stile wie dünn und fett und regelmäßig und warten, Wahl der richtigen Schriftarten und Telefone für die richtigen Anlässe und helle Kontakte. Topographie kann Website-Grade und mit hervorragender Lesbarkeit machen. Oder es kann es kindisch aussehen, oder vielleicht aus Kontakten oder aussehen verwirrend und sehr schwer zu befreien. Sie können ganz einfach eine Website haben, die nur Typografie ist und trotzdem gut aussieht und ohne grafische Elemente gestaltet. In der Tat die beliebteste Website der Welt in erster Linie nur Text. Wenn Steuern dies wichtig im Design, dann muss es einige Regeln und Richtlinien, wie die wählen und sie verwenden, oder? Sie wetten, dass es gibt, und Sie werden alles über sie in den nächsten paar weniger Zoll lernen. Wenn Sie die einfachen Richtlinien befolgen, werden Ihre Entwürfe großartig aussehen. Sie werden hören, wie ich die Begriffe Schriftart und fallen austauschbar Art von kurz für Schrift, und der Unterschied zwischen Schriftart und Schriftart ist dies in diesem Fall. Hallo, Vatikai za Schriftfamilie, die viele verschiedene Telefonstile in ihm hat, wie Licht, fett und so weiter. spielt keine Rolle, welchen Begriff wir verwenden, nicht wirklich, aber es ist immer noch gut, den Unterschied zu kennen und nicht verwirrt zu werden. Ich erinnere mich, dass ich am Anfang verwirrt war, weil jeder benutzte, was er wollte , und er hatte Telefone, Typen und Schriften , und ich dachte Verwende ich das Richtige für meine Designs? 15. Typografie: Typeface kommt: jedes Mal. Das Gesicht hat eine Persönlichkeit. Einige sind lustig und verspielt, Sommer gestreift und blond, und manche fühlen sich akademisch und schick. Die Persönlichkeit einer Schrift ist ebenso wichtig wie die Wahl des richtigen Outfits für den richtigen Anlass. Du willst bei einem Date keine Cargo-Shorts tragen. Im offensiven Restaurant zum Beispiel wäre eine Schriftart namens Proxima Soft sehr geeignet für einen Winterurlaub Seite, wäre aber völlig fehl am Platz auf einer Seite, die luxuriöse Büroräume verkauft. Warum ist das der Fall? Denn Proxima Soft hat eine lässige und freundliche Persönlichkeit, genau wie der Name Heene's. Die Leitern sind weich und abgerundet. Sie sehen aus, als wären sie aus Schnee gemacht worden. Es wäre geeignet für Websites, die mit heiligen Tagen oder Kindern verwandt sind. Lässiges Essen, vielleicht für Websites, die sich freundlich und ansprechbar fühlen möchten. Warum funktioniert nicht für den Luxus der Immobilien Website? Für den Anfang sagt uns das Foto viel. Sie sehen, dass Streifen rechteckige Architektur er, Das ist schon diktiert die Stimmung aus dieser Komposition. Es fragt nach etwas gestreift und geradlinig, aber noch wichtiger ist, isst den Kontext. Luxus ist die Schlüsselstation, und es gibt nichts Luxus an Proxima Nova Soft. Auf der anderen Seite wäre eine Schriftart namens Adoni hervorragend für diese Seite geeignet. Es ist eine klassisch aussehende Schrift. Es sieht ernst, gerade und schick aus, aber modern. Genau die Worte, die Sie verwenden würden, um luxuriöse Büroräume zu beschreiben. Aber wie können wir sagen, was ist die Persönlichkeit der Schrift? Eigentlich ist es nicht so schwierig. Es gibt bestimmte Klassifizierungen, unter die jede Schriftart fällt. erzählen bereits viel Geschichte über die Zeit Lasst uns sie in unserer nächsten Lektion durchgehen. Und danach machen wir eine kleine Übung, um tiefste Prototyp-Phasen-Persönlichkeiten zu üben. 16. Typografie: Schriftkategorien: Wenn Sie die Schriftkategorien kennen, fällt es Ihnen leichter, die richtige Schrift und die richtige Schriftart für Ihr Projekt auszuwählen, da viel Persönlichkeit irgendwie von der Kategorie abhängt, der allgemeinen Kategorie , zu der Zuallererst fallen die meisten Schriften in diese beiden Kategorien, Serif oder Sans Serif Der Unterschied ist sehr einfach. Die Schwänze auf dem Brief werden Serifen genannt. Auf Französisch bedeutet Sans ohne. Sans Serif heißt also ohne Serif, so einfach ist das. Neben diesen beiden großen Kategorien gibt es noch zwei weitere Display, manchmal auch dekorativ und schriftlich genannt. Lassen Sie uns jeden einzelnen durchgehen. Serve-Schriften haben drei unterschiedliche Stile. Diese sind im alten Stil. Der alte Stil ist der beliebteste Stil in Serafons. Es ist eine klassische, traditionelle Schrift, die weit zurückreicht. Dies ist der am häufigsten verwendete Stil im Druck, und die meisten Bücher werden in dieser Schrift erscheinen Im Webdesign tauchen jedoch allmählich Serifen im alten Stil auf, tauchen jedoch allmählich Serifen im alten Stil nur Printmaterial hat im Allgemeinen eine höhere Auflösung als Siebdruck Kleine Serifen und Buchstaben sind auf dem Bildschirm aufgrund niedrigerer Auflösungen und flackerndem Bildschirmflackern schwerer zu erkennen aufgrund niedrigerer Auflösungen und flackerndem Bildschirmflackern schwerer zu Dies war der Hauptgrund, warum San Serif-Schriften zum dominierenden Stil im digitalen Design wurden dominierenden Stil im digitalen Obwohl heutzutage die Bildschirmauflösung immer höher wird, Serifenschriften ein Comeback, insbesondere in Blogs und Schrift im alten Stil hat, wie der Name schon sagt, eine sehr Sie können für Websites verwendet werden, die ein raffiniertes und klassisches Aussehen zeigen möchten , z. B. für gehobene Restaurants, Musikinstrumente, Anwaltskanzleien usw. Es kann aber auch ziemlich neutral sein und für nicht klassische Websites verwendet werden, insbesondere für Absatztext, insbesondere für Absatztext da es eine hervorragende Lesbarkeit bietet Moderne Serifenschriften können dem alten Stil sehr ähnlich sein Ob die Schrift modern ist, lässt sich am besten anhand der flachen Serife erkennen modern ist, lässt sich am besten anhand der flachen Wie Sie sehen können, hat Oldstyle eine schräge Serife, aber Ein weiteres sehr charakteristisches Merkmal ist der dramatische Kontrast zwischen Beachten Sie, dass das erste Bein auf der A dünn wie ein Haar ist. Aber der zweite ist dick wie eine Stange. Moderne Typen werden häufig für Mode und Luxusgüter verwendet. Sie sind zwar nicht darauf beschränkt, können aber für alles verwendet werden, wo Sie eine seriöse, moderne und raffinierte Persönlichkeit darstellen möchten moderne und raffinierte Persönlichkeit Im vorherigen Beispiel habe ich genau den modernen Serifentyp Bedni verwendet . Ich würde moderne Schriften jedoch nur für Schlagzeilen und Big Tech reservieren moderne Schriften jedoch nur für Schlagzeilen und Das ist normalerweise der Hauptzweck, für den sie gemacht sind, und sie sind für lange Texte nicht gut lesbar Sie würden nicht einen ganzen Blogbeitrag lesen wollen , der in Onyx geschrieben wurde Plattenoberflächen sind Schachteln, Portionen sind flach und sie haben keine dicken und dünnen Kontraste wie die Slap-Phones eignen sich für alles, was sich mechanisch oder stark anfühlt Genau wie der moderne Stil eignet er sich nicht für Absätze Reservieren Sie ihn nur für Überschriften sensorische Familie wird der Haupttyp sein , den Sie in den meisten Projekten verwenden werden. Es ist das vielseitigste. Es passt zu einem Design mit einer Vielzahl von Persönlichkeiten. Es ist die sicherste Fledermaus aller Stilrichtungen. Es kann sowohl für kleinen Absatztext als auch für großen Anzeigetext wie Überschriften perfekt funktionieren . Es gibt ein paar verschiedene Stile innerhalb der Sensor-Familie, wie grotesk, geometrisch und humanistisch. Ich werde sie nicht im Detail besprechen, Ich werde sie nicht im Detail besprechen weil es keinen signifikanten Unterschied zwischen ihnen gibt, signifikanten Unterschied zwischen ihnen ich jedem Stil eine dominante Persönlichkeit zuordnen könnte Sie haben bereits eine Menge Informationen auf Ihrem Teller, also lassen Sie uns Ihre Gehirnleistung für die wichtigsten Dinge aufsparen Wenn es um San-Sari-Schriften geht, müssen sie individuell beurteilt werden , da sie eine große Bandbreite an Persönlichkeiten abdecken können , von verspielt und sanft bis hin zu ernst und Ich habe die Stile aufgeschlüsselt , weil sie sich viel leichter in einer sinnvollen Kategorie zusammenfassen lassen , so wie fast jede Serifenschrift im alten Stil dieselbe klassische , traditionelle Persönlichkeit haben wird dieselbe klassische , traditionelle Persönlichkeit haben Wenn ich die Persönlichkeit von San-Serif-Schriften wirklich verallgemeinern müsste , dann würde ich sagen, dass sie sich überwiegend modern, ernst und Display- oder Dekorationsschriften sind normalerweise diejenigen, die die stärkste Persönlichkeit haben, aber das heißt nicht, dass sie eine gute Sache Im Gegenteil, sie haben das Potenzial, ziemlich albern zu sein. Ihre Persönlichkeit kann vielfältig sein, von der Art , die wie eine Schrift auf einer Tafel aussieht, bis hin , die wie eine Schrift auf einer Tafel aussieht zu etwas , das sehr elegant sein kann In den meisten Fällen sollten Sie sich wegen ihrer unversöhnlichen Persönlichkeit von solchen Gesichtern fernhalten wegen ihrer unversöhnlichen Persönlichkeit von solchen Gesichtern ihrer unversöhnlichen Aber manchmal gibt es sie in neutraleren und eleganteren Stilen, und sie können ziemlich gut aussehen. Egal wie neutral es aussieht, Sie möchten es jedoch niemals für Absatztext verwenden , sondern nur für große Überschriften Skriptschriften basieren auf Handschrift. Genau wie bei der Anzeige werden Sie nur sehr selten den Skriptstil verwenden Obwohl sie manchmal sehr praktisch sein können , wenn Sie beispielsweise eine Website für eine Kinderbetreuung entwerfen, kann eine verspielte handgeschriebene Schrift der Website eine nette Persönlichkeit verleihen, aber nur für Überschriften. Wie bei der Anzeige, verwenden Sie keinen Skriptstil für Absatztext. Die meisten Schriften wurden mit einer bestimmten Absicht entworfen Der Designer hatte eine Absicht und ein Ziel für diese Schrift, und normalerweise fügen sie sie in die Beschreibung oder Schrift ein, unabhängig von dem Handbuch, das sie enthält, je nachdem, wo Sie die Schrift erhalten, und Sie werden eine Art von Beschreibung haben , wo Sie sie verwenden können Hier ist ein Profi-Tipp. Wenn die Beschreibung der Schrift besagt, dass sie für den allgemeinen Gebrauch bestimmt war, bedeutet das, dass sie sicher für Absätze und langen Text verwendet Absätze und langen Text Aber wenn dort steht, dass es sich um eine Anzeige handelt, richtig, sie war zur Anzeige bestimmt, dann heißt das, auch wenn sie nicht unter die Kategorie „ Anzeige“ fällt, bedeutet das, dass der Designer beabsichtigt hatte, sie für große Schlagzeilen zu verwenden Verwenden Sie es also niemals für so etwas wie Absätze oder großen langen Text, weil sie dafür einfach nicht geeignet sind. Dies ist zum Beispiel ein Google-Telefon namens Railway. Es ist sehr beliebt. In einem Abschnitt heißt es, dass die Schrift für Anzeigetexte wie Überschriften und großen Text vorgesehen ist , aber viele Webdesigner haben sie für Absatztext verwendet und Tausende von Websites, Themen und Vorlagen mit schlechter Lesbarkeit von Absätzen erstellt Dies hätte vermieden werden können, wenn sie nur das Handbuch gelesen hätten So viele Webdesigner hatten überhaupt keine Designausbildung. diese Richtlinien lernen und sie befolgen , erhalten Sie auf jeden Fall eine Überdosis Vorsprung, auch wenn sie über jahrelange Erfahrung verfügen. 17. Aufgabe: Schriftpersönlichkeit: Hier ist eine lustige Übung zum Thema Schriftpersönlichkeiten. Ich habe sieben verschiedene Sätze in diese Figma-Datei geschrieben. Ich möchte, dass Sie die Schriftart für jede Phrase auswählen , die Ihrer Meinung nach dafür geeignet ist Sie können entweder Schriftarten verwenden, die auf Ihrem Computer installiert sind, auf Ihrem Computer installiert oder Google-Schriftarten, die mit Figma geliefert werden Google Fonts ist ein großartiges Repository mit vielen kostenlosen und dennoch wunderschön gestalteten Schriftarten Wenn Sie in Figma auf die Schriftauswahl klicken, können Sie sowohl die auf Ihrem Computer installierten Schriftarten als auch die Google-Schriftarten auswählen sowohl die auf Ihrem Computer installierten Schriftarten als auch die Google-Schriftarten Es ist sehr nützlich, Gelder direkt aus diesem Drop-down-Menü zu verwenden. Stattdessen können wir auf die Google Fonts-Website gehen und dort die richtige Schrift finden Aber bevor wir das tun, müssen wir zuerst verstehen, wonach wir eigentlich suchen Stellen Sie sich vor, wir erstellen für jedes dieser Unternehmen eine Website müssen die passenden Schriften auswählen Wir müssen uns ein Bild davon machen, was für jede dieser Branchen funktionieren, gut aussehen und geeignet sein würde für jede dieser Branchen funktionieren, gut aussehen und geeignet sein Hier ist ein einfacher Prozess , wie Sie das erreichen können. Ich werde den Fitnesstrainer für die Demonstration benutzen. Ich übernehme die wichtigen Stichwörter von hier. Das wären Fitness oder Fitness Coach und Google Images, damit ich Beispiele dafür finden kann, welche Schriftarten für Fitness-Themen verwendet werden. Aber nur Fitness oder Fitnesstrainer reichen nicht aus. Das wird uns keine Designbeispiele geben. Um Beispiele für echtes Design und Typografie zu erhalten, müssen wir Stichwörter wie Magazin, Poster, Marke, Logo, Website und Werbung hinzufügen . Jetzt können wir uns ein gutes Bild davon machen, . Jetzt können wir uns ein gutes Bild davon machen welche Art von Typografie von anderen Designern verwendet wird Wir können viele große und fett gedruckte Telefone in Großbuchstaben sehen , was sehr sinnvoll ist, da Fitness mit Kraft, voluminösen Muskeln und symmetrischen Formen assoziiert voluminösen Muskeln Kombinieren Sie das mit dem, was Sie bereits über Schriftkategorien gelernt haben , und fertig Für den Fitnesstrainer suche ich also nach einer Schrift, die symmetrisch ist und voluminös aussieht, etwas, das in Großbuchstaben gut aussieht Zuerst tippe ich meinen Satz in Großbuchstaben ab meinen Satz in Großbuchstaben weil das der Stil ist, den ich überprüfen möchte Wenn Sie unseren eigentlichen Text für die Vorschau verwenden ist die Suche nach der richtigen Schrift viel einfacher. Jetzt werde ich meine Suchergebnisse filtern. Wir haben hier verschiedene Filter, die den Kategorien sehr ähnlich sind, die wir bereits besprochen haben. Wir haben Serif, das eine klassische, raffinierte und luxuriöse Persönlichkeit hat raffinierte und luxuriöse Persönlichkeit offensichtlich nicht sehr gut für Fitness geeignet ist Slab Serif könnte möglicherweise für Fitnesszwecke geeignet sein. Es hat eine mechanische und starke Persönlichkeit. Sanseri Modern Minimal Neutral funktioniert mit Fitness, weil es mit allem funktioniert Aus diesen Kategorien für das Thema Fitness ist Sans Serif der beste Ort, aus dem Sie wählen können Leider kann ich die fett gedruckten Versionen dieser Schriften von hier aus nicht direkt sehen die fett gedruckten Versionen dieser Schriften von hier aus nicht direkt Das wäre eine Idee gewesen. Stattdessen muss ich die fettgedruckte Version einzeln auf der Titelseite überprüfen . Montserrat ist eine hervorragende Option. Es ist schwer, stark und voluminös, genau wie Muskeln. Mir gefällt, wie ausgewogen und symmetrisch jeder Buchstabe ist. Aber bevor wir uns dafür entscheiden, denken Sie daran, was wir zuerst tun müssen. Wir müssen das Handbuch lesen. Stellen wir sicher, dass der Designer diese Schrift nicht für etwas , das nicht für Fitness geeignet ist Es heißt, sie sei von urbaner Typografie inspiriert worden , das ist für uns geeignet Es werden sogar Schlüsselwörter wie Arbeit und Hingabe erwähnt. Nun, ist das nicht einfach großartig? Arbeit und Hingabe stehen in direktem Zusammenhang mit Fitness, erledigt. Das ist unsere Schrift. Gehen Sie als Nächstes zur Aufgabendatei und wenden Sie die Schriftart auf den Text an. Beachten Sie, dass die Aufgabendateien , die ich mit Ihnen geteilt habe, automatisch dupliziert werden sollten , wenn Sie darauf klicken. Auf diese Weise erhalten Sie die Kopie der Datei in Ihr Figma-Konto Wenn Sie jedoch feststellen, dass die Datei in diesem Fall nicht bearbeitet werden kann, konnte sie wahrscheinlich Ein Grund wäre, dass Sie in Ihrem Browser nicht bei Figma angemeldet Sie müssen sich anmelden und dann erneut versuchen, auf den Link zu klicken. Wenn es immer noch nicht gelingt, eine Kopie zu erstellen, gehen Sie zu myfile und duplizieren Sie sie aus diesem kleinen Drop-down-Menü Das ist jetzt deine eigene Figma-Datei und du kannst sie nach Belieben bearbeiten All diese Duplikate werden automatisch in Ihrem Figma-Konto unter Entwürfe gespeichert Also wähle ich in der Schriftauswahl Montserrat aus. Standardmäßig wird es im normalen Stil sein, aber ich möchte, dass es dick Ich werde den kühnsten Stil wählen , der in diesem Fall Schwarz heißt Außerdem möchte ich, dass es in Großbuchstaben geschrieben wird. Natürlich kann ich es noch einmal mit aktivierter Feststelltaste eingeben , aber es gibt einen einfacheren Weg, dies zu tun Dieser Link hier öffnet zusätzliche Einstellungen, und dort können wir Großbuchstaben auswählen Auf diese Weise wird es unabhängig davon, wie ich meine Großbuchstaben eingebe oder nicht, in Großbuchstaben angezeigt und Sie können die Großbuchstaben entfernen, indem Sie auf diese Option klicken Hier haben Sie auch die Option Unterstreichen , falls Sie sie benötigen In diesem Feld möchte ich, dass Sie Ihren Denkprozess dazu erläutern , warum Sie sich für die Schriftart entschieden haben In meinem Fall würde ich also schreiben, was ich bereits beschrieben habe. Überspringen Sie diesen letzten Schritt nicht. Um Designer zu werden, müssen Sie anfangen, wie ein Designer zu denken , um tatsächlich verstehen jeden Schritt und jede Entscheidung , die Sie treffen, besser zu verstehen. Und tatsächlich Kunden, Ihre Kunden werden das auf jeden Fall zu schätzen wissen. Ich erinnere mich, dass sie es immer getan haben. Ich würde diese E-Mail mit, wissen Sie, Schritt für Schritt mit wichtigen Designentscheidungen schicken, die ich in Bezug auf Schriften oder Schriften und solche Dinge treffen würde Bezug auf Schriften oder Schriften und solche Dinge treffen Und am Anfang mache ich das gerne, aber dann wurde ich irgendwie faul Und als ich diese Beschreibungen meines dahinterstehenden Denkprozesses nicht aufschrieb , nahmen die Überarbeitungen zu, weil sie jetzt nicht mehr trauten, was ich für eine Entscheidung getroffen hatte Und sie wollten Schriften überprüfen und, weißt du, ändern oder Farben ändern oder so , weil sie dachten, ich hätte sie einfach aus dem Nichts ausgesucht Also übe das auf jeden Fall. Und wenn Sie dann mit Ihren Kunden arbeiten, zeigen Sie ihnen, wie viel Denkprozess hinter den Kulissen stattgefunden hat. 18. Typografie: Typ: Dies ist der Eröffnungstitel aus dem Film Gravity. Achten Sie darauf, wie der Typ eingestellt ist. Hier ist noch ein von der Dark Knight steigt oder dieser von interstelllar. Merkst du die Ähnlichkeit? Alle drei haben einen sehr breiten Buchstabenabstand. Andere Abstände sind eins von den Attributen, die sich über das Telefon ändern und es an Ihre Bedürfnisse anpassen können. Sie können es sehr eng und eng machen, oder Sie können es schön und luftig machen. Diese Art von extra weißen Abstand wird Panorama genannt. Es ist ein wirklich cooles Design-Trick, und es schafft Art ist schön, fertig und raffiniert. Schauen Sie und fügt der Steuer eine zusätzliche Bedeutung hinzu und macht es das Gefühl, dass es etwas sehr Wichtiges sagt . Wenn Sie jemals mit einem sehr langweiligen und fade Design stecken, können Sie Ihren Typ in Panorama einstellen und sofort gehen Teoh. Geben Sie ihm ein schönes und raffiniertes Aussehen. Zum Beispiel, wenn ich einen zusätzlichen Titel zu einer Blockoff-Steuer hinzufügen muss, die bereits einen Titel hat, kann ich diesen sekundären Titel nehmen und ihn in Panorama setzen. Ihr Zweittitel ist jetzt sehr interessant im Vergleich zu dem, was wir zuvor hatten. Dies fühlt sich bewusster an, es sind sekundäre Hände, die nicht mit der ursprünglichen Schlagzeile konkurrieren. Es hat seinen eigenen spezifischen Stil, also werde ich in der Lage sein, diese auf anderen ähnlichen Steuerblöcken zu wiederholen und sehr identifizierbar zu sein. Ein großer Vorteil aus dem Panorama-Satz besteht darin, dass Sie Ihr Telefon auf sehr kleine Größen verkleinern können , ohne die Lesbarkeit zu verlieren. Ich habe den Panoramaeffekt hier entfernt, und die Steuer ist viel weniger lesbar geworden. Dies bedeutet, dass ich die Größe der Front erhöhen müsste, aber das konkurriert jetzt zu sehr mit der Hauptüberschrift. Ich wollte die sekundäre Information sein, aber es ist fast der primäre Titel geworden. Eine Sache zu beachten. Wenn Sie den Typ meistens auf diese Weise einstellen, sollten Sie Großbuchstaben verwenden. Dieser Effekt funktioniert in Kleinbuchstaben nicht wirklich. Okay, also geht es um Leerraum. Aber wie wäre es mit engeren Abständen? Wann würden wir das benutzen wollen? Eins? Solche Fälle, wenn es um großen, schweren Text auf großen Textabständen zwischen Buchstaben geht, sind proportional groß. Zum Beispiel arbeitete ich auf einer Website für einen Roller Sharing-Unternehmen, Wie Sie sehen können, amüsant eine enorme Spaß Größe, die ziemlich fett und glücklich ist. Der Standard-Buchstabenabstand für diese fühlte sich für mich ein wenig zu weit auseinander, also habe ich einen negativen Buchstaben basic hinzugefügt. Wenn ich eine sehr mutige und große Überschrift verwende, möchte ich eine Steuer erstellen, die fett, schwer und konzentriert auf einem engen Raum aussieht . Ein refree letter spacing ist das Gegenteil von dem, was ich erreichen möchte, also habe ich die Dinge verschärft. In diesem Fall. Meistens möchten Sie den standardmäßigen Leiterabstand für Ihre besteuerten beibehalten. Aber in bestimmten Fällen haben Sie nicht die Möglichkeit, das Telefon an Ihre Bedürfnisse an die Faustregel anzupassen. Wenn Sie jemals den Buchstaben anpassen, wird der Abstand, der erhöhte Abstand als angerufen wird kleiner oder leichter und verringert Basing, gewinnen größer und kühner. Vergleichen wir diese beiden identischen Steuerblöcke. Es hat die gleiche Telefongröße, und der Text ist genau der gleiche. Ihr Unterschied besteht in ihrem Zeilenabstand oder der Zeilenhöhe. Der Typ ist in der Antenne 25 Pixel groß. Der linke Absatz hat eine Standardzeile hoch, aber auf der rechten Seite wurde sie vergrößert. Die Standardlinie mit hohem Wert außerhalb des Bereichs ist sehr eng. Dies macht die Steuer schwieriger zu lesen und den erhöhten Zeilenabstand auf den zweiten Blöcken zu folgen . Gemischter Text mawr Airy. Es fühlt sich weniger schwer an, leichter zu lesen. Und obwohl es länger ist, fühlt es sich immer noch weniger einschüchternd an als das Original. Einschüchternde Steuern etwas für Wolcott eigentlich. Benutzer lesen normalerweise keinen Text auf Websites. Sie scannen. Sie scannen verzweifelt nach Schlüsselwörtern und Phrasen, um zu finden, wonach sie suchen, oder um zu entscheiden, ob die Website für sie insgesamt relevant ist. Der Text auf der Fahrt wird ihnen helfen, Steuern leichter zu scannen und zu finden, was sie suchen. Sie können es selbst versuchen Positivität und versuchen, jede Steuer so schnell zu lesen, wie Sie nicht können. Sie werden feststellen, dass Sie viel haben, ist Ihre und schnellere Geschwindigkeit auf dem Text auf der rechten Seite, Der ursprüngliche Zeilenabstand fühlt sich wie auf einer sandigen Hündin laufen, ein wenig schleppig und langsam. Dieses Problem wird extrem offensichtlich, wenn wir mit breiten Textblöcken umgehen. Wenn Sie in diesem Block eine Steuerzeile gelesen haben, ist es eine Herausforderung, links in die folgende Zeile zu springen. Es ist sehr einfach, sich zu verlieren, und Sie müssen sich darauf verlassen, Verbindungen mit Kontext oder ah, Finger oder Lineal zu verbinden. Alte Telefone kommen mit ihren eigenen Standardleitungen und es ändert sich je nach Größe des Telefons . Einige Telefone, die sehr gut gemacht und gut ausbalanciert sind, haben einen besseren Zeilenabstand als andere. Dies zum Beispiel ist zum Beispieleine meiner Lieblingsschriftarten, genannt Avenir. Die Standardzeile Heidi 34 Pixel auf der spezifischen Telefongröße. Wie Sie sehen können, unterscheidet es sich nicht sehr von der Einstellung, die ich für die Antenne gemacht habe. In diesem Fall könnte ich sogar den Zeilenabstand als Standardwert belassen. Jetzt gibt es Zeiten, in denen Sie die Linien verkleinern müssen, anstatt sie zu erhöhen. Und das ist in der Regel, wenn es um große und sehr fett Steuern geht, vor allem in Großbuchstaben die Standardzeile. Versteck dich auf diesen Steuern ein kleines Gebiet für mich. Ich wählte alle Hauptstädte und schweres Telefon, um die Schlagzeilen violett schwer und stark, konzentriert an einem Ort zu machen. Also in diesem Fall werde ich die Linie hoch nur ein wenig verringern. Jetzt. Diese Version ist genau das, wonach ich gesucht habe. Wir können dies als eine Schwerkraft vorstellen, haben Ihre Objekte eine stärkere Schwerkraft, so dass sie die Mühe schieben näher und leichtere Objekte? Nicht so viel, so dass sie im Weltraum schweben und Fillmore Airy, spricht von Telefonpunkten, liegen regelmäßig, halb fett, fett extra Bolzen mit schwarzem dünnem Haaransatz und so weiter. Dies, das Telefon-Gewichte oder Stile oder Dicke genannt wurde. Jede Schrift hat ihre eigenen Gewichte, einige mehr als andere. Dinge, zum Beispiel, sind Telefon-Gewichte aus. Ein sehr beliebtes Google-Telefon namens Open Sense hat fünf verschiedene Gewichte. Bereich, auf der anderen Seite, hat nur zwei regelmäßige und fett. Die Schrift, die diese kleinen Gewichte hat, ist sehr schwer zu verarbeiten. Auf einer modernen Website haben Sie so viele verschiedene Orte, die Sie auf Absätzen auf Schaltflächen, Navigationsleiste, Dropdown-Menüs, Überschriften, sekundäre Überschriften schützen Navigationsleiste, Dropdown-Menüs, Überschriften, Überschriften, müssen, Fußzeilenlinks und mehr. Wenn Sie ein hohes Gesicht auswählen, das nur zwei Gewichte regelmäßig hat und ziehen, werden Sie viel kämpfen, wenn Sie eine Hierarchie und einen Kontrast zwischen einer Überschrift erstellen müssen , ein ESOP hatte Sie im Grunde mit der Steuergröße verlassen, um die schwere Heben regelmäßige weiße Steuer auf dunklem Hintergrund sieht manchmal Felsbrocken Um diese optische Täuschung zu kompensieren, möchten Sie vielleicht das leichtere Gewicht verwenden. Die Steuer auf diese beiden Autos sieht jetzt wie ihr gleiches Gewicht aus, aber am vorherigen Beispiel sah die Rechte besteuert schwerer aus. Lassen Sie mich Ihnen zeigen, dass ein weiteres Mal, leicht und regelmäßig, leicht und regelmäßig,eine andere Situation, in der wir möglicherweise das Gewicht aus dem Telefon anpassen müssen, auf großen Text hat die Größe aus dem Telefon erhöht. Es wird schwerer, beide dieses unregelmäßige Gewicht in diesem Fall. Aber weil der erste viel größer ist, ist er Körper dicker und schwerer. Manchmal wollten wir ähnliches Gewicht aussehen, nur verschiedene Größen. In einem solchen Szenario müssen wir das Licht und die regulären Stile koppeln. Jetzt fühlen sich die große Steuer und der kleinere Text eher an, als wären sie nicht gleich gewichtig. Sie können dies in die andere Richtung tun, indem Sie die kleineren Angriffe ein wenig mutiger, Sie werden etwas wie halb kahl brauchen. In diesem Fall, wenn Sie Schriftart nicht genug Gewichte hat, dann sind Ihre Hände eng und Sie werden nicht in der Lage, optimale Ergebnisse zu erzielen. Wählen Sie Schriftarten aus, die vielseitig sind und eine ausreichende Anzahl von Gewichten haben. Die meisten motorischen und allgemein verwendeten Krawattengesichter haben heute mindestens vier Möglichkeiten, was anständig genug ist. Einige komplette Krawattenflächen haben neun verschiedene Gewichte, wie diese Schriftart namens Montserrat. Sie werden nicht abwarten, hier sind Sie also haben wir Buchstabenabstände, Zeilenverbergen und Telefonwartungen. Diese Attribute helfen uns mit zwei Dingen vor allem wollen, ist es, Steuern leicht zu lesen, vor allem auf den Körper und große Steuer. Und zweitens, um eine wirklich gute visuelle Hierarchie zwischen verschiedenen Elementen, Textelementen, offensichtlich auf der Seite und in der kommenden Lektion zu erreichen, werden wir diese genaue Typeinstellung zwischen Zeile Höhen, wo du all das Zeug schickst, bleib rum. 19. Aufgabe: Einstellungstyp: Die Topographie ist für das Webdesign von großer Bedeutung, und wenn Sie lernen, wie man den Typ richtig einstellt, werden Sie zu einem überlegenen Webdesigner In diesem Video werden wir eine kleine unterhaltsame Übung zum Einstellen von Schrifttypen machen , was im Grunde bedeutet, dass es einfach darum geht, die richtige Schriftgröße, die richtige Zeilenhöhe, die richtige Schriftstärke und den richtigen Buchstabenabstand auszuwählen richtige Zeilenhöhe, die richtige Schriftstärke und den richtigen Buchstabenabstand Das ist alles. Es kombiniert einfach all diese vier verschiedenen Elemente, um etwas bewusst aussehen zu lassen. Wie üblich findest du diese Figma-Datei unter den Ressourcen, entweder auf der Seite, die ich verlinkt habe , oder unter den Ressourcen dieses Videos Und in dieser Figma-Datei habe ich fünf Textblöcke angeordnet Jeder hat eine Überschrift und einen Absatz. Jeder dieser Blöcke in einer anderen Schriftart angeordnet, und zwar derselben Schriftart für die Überschrift und das Absatzpaar. Der Name des Textes steht genau hier an der Ecke. Mach dir keine Gedanken über den Inhalt. Es ist ein Scheintext, den ich zufällig generiert habe. Ich möchte, dass du jeden dieser Blöcke durchgehst und die Typeinstellung für jedes Paar verbesserst Ihr Ziel ist es, zwei Dinge zu erreichen. Erstens, gute Lesbarkeit des Textes. Dies kann erreicht werden, indem hauptsächlich Telefongrößen und Leitungshöhen angepasst Alle Textblöcke sind auf ihre Standardzeilenhöhen für einige dieser Telefone eingestellt . Ihre Standardzeilenhöhe ist vielleicht ziemlich gut lesbar, Ihre Standardzeilenhöhe ist vielleicht wie Crimson Tax hier, aber für andere ist sie möglicherweise etwas Es gibt keine spezifischen Regeln für Zeilenhöhen. Messen Sie es einfach anhand Ihres Auges und vergrößern Sie es nach oben und unten und sehen Sie, was sich für Sie beim Lesen am angenehmsten anfühlt. Das Gleiche gilt für die Schriftgröße. Sie sind alle in 16 Pixeln festgelegt, aber wie Sie sehen können, unterscheiden sich 16 Pixel erheblich voneinander. Zum Beispiel sind 16 auf Crimson Tax viel zu klein. Zweitens ist es Ihr Ziel, eine gute Hierarchie zwischen Überschrift und Absatz zu erreichen gute Hierarchie zwischen Überschrift und Absatz Denken Sie an unsere Lektion zur Hierarchie Die visuelle Hierarchie macht es einfacher, dem Design zu folgen und für das Auge angenehmer. Sie können diese Hierarchie zwischen der Überschrift und den Texten erreichen , indem Sie die Überschrift sehr groß oder sehr schwer oder beides machen. diese beiden Ziele zu erreichen, dürfen Sie bei einem die Schriftgröße anpassen. Zweitens die Schriftstärke. Und die Zeilenhöhen. Sie müssen sich keine Gedanken über den Buchstabenabstand machen. Behalte sie einfach so wie sie sind. Ändern Sie auch nicht den Typ, das Gesicht oder die Farbe, lassen Sie sie so, wie sie sind. Es steht Ihnen frei, die Position der einzelnen Textfelder anzupassen. In der Tat werden Sie es höchstwahrscheinlich anpassen müssen , denn wenn Sie mit der Einstellung Ihres Typs beginnen, müssen die Dinge entsprechend verschoben werden Aber ich möchte, dass Sie die Breite der einzelnen Textfelder unverändert lassen Sie sind momentan alle 500 Pixel breit. Ich möchte, dass Sie innerhalb dieser Einschränkungen arbeiten und Ihren Typ innerhalb dieser Dimensionen bestmöglich einstellen. Die Höhe der Box wird automatisch angepasst. Lassen Sie mich den ersten demonstrieren. zunächst sicher, dass Sie Ihre Leinwand auf 100% gezoomt haben Ihre Leinwand auf 100% gezoomt Andernfalls wird die realistische Größe nicht angezeigt. Es gibt viele verschiedene Möglichkeiten , in Figma hinein- und herauszuzoomen Zwei der gängigsten Methoden sind entweder das Drücken Ihres Mauspads auf Dies funktioniert wahrscheinlich auf neueren Laptops, die Multitouch-Kneifen oder eine andere Methode unterstützen , nämlich mit dem Mausrad und während Sie die Strg - oder Befehlstaste , nämlich mit dem Mausrad und während Sie die Strg auf dem Mac gedrückt halten Und nun, mit der Maus, scrolle einfach nach oben und unten, und während du die Strg- oder Befehlstaste gedrückt hältst, wird sie vergrößert oder verkleinert Oder meine Lieblingsmethode, die darin besteht, das Tastenkürzel Shift auf Null zu erhöhen, und schon wird sofort auf 100% gezoomt. Sie können die Tastenkombination sehen, wenn Sie zu den wenigen Optionen gehen und dann unter dem Drop-down-Menü sehen, dass Zoom to 100% diese Tastenkombination hat Der Großteil Ihrer Entwurfsarbeit sollte in diesem normalen Zustand ausgeführt werden Andernfalls erhalten Sie kein realistisches Bild von Größen und Proportionen. Es ist jedoch in Ordnung, die Ansicht zu vergrößern und zu verkleinern, wenn Sie dies aus irgendeinem Grund benötigen. Sobald wir sichergestellt haben, dass wir in einem normalen Zoom-Status arbeiten, werde ich zunächst die Überschrift anpassen. Ich möchte, dass es dünn ist. Unter dem Schriftnamen können Sie die Schriftstärke auswählen. Wie bereits erwähnt, hängen die verfügbaren Optionen hier von der Schriftfamilie selbst ab und davon, ob Sie alle verfügbaren Stile auf Ihrem Computer installiert haben alle verfügbaren Stile auf oder ob sie im Lieferumfang von Figma enthalten Ich wähle dünn. Um nun eine gute visuelle Hierarchie zwischen der Überschrift und dem Pyrographen zu erreichen, sollte ich die Größe der Überschrift erhöhen Da ich mich für eine dünne Überschrift entschieden habe, sollte ich sie noch größer machen, als ich es für ein schwereres Textil tun würde Ich drücke hier einen Aufwärtspfeil, wodurch das Telefon um ein Pixel vergrößert wird. ich meinen Text vergrößere, achte Wenn ich meinen Text vergrößere, achte ich auch darauf , wo meine Steuervergünstigungen liegen Da die Breite meines Textfeldes festgelegt ist, kann ich die Steuer nur aufgrund ihrer Größe oder ihres Gewichts senken Die Aufteilung der Steuer ist wichtig, weil Sie nicht möchten, dass die Steuer an einer seltsamen Stelle gesenkt wird, wie zum Beispiel bei einem Artikel A und dem Wort, das in die zweite Zeile springt . Das sorgt nicht für eine gute Lesbarkeit. In diesem Satz ist der beste Zeilenumbruch, wenn sich ein Teleskop in der zweiten Zeile befindet oder wenn der Kauf eines Teleskops in der zweiten Zeile steht Ich bevorzuge sogar die zweite Version , weil der Satz einen Logikbruch enthält Was sind die Grundlagen? Ein Teleskop kaufen. Mir gefällt sehr, wie die Überschrift aussieht. Jetzt werde ich den Absatztext anpassen. In den meisten Fällen würde ich die Absatzstärke nicht anfassen und sie regelmäßig halten. Regulär ist normalerweise die beste Option für Absatztext, aber weil ich die Überschrift ziemlich dünn gestaltet habe, fühlt sich der Absatz im Vergleich schwer an und stiehlt der Überschrift viel Aufmerksamkeit Denken Sie daran, dass wir in der visuellen Hierarchie klar definieren, was das auffälligste Element, dann das zweitauffälligste usw. sein sollte dann das zweitauffälligste usw. Jetzt werde ich die Zeilenhöhe dieses Absatzes erhöhen . Die Standardzeilenhöhe dieser Schriftart ist Roboto Roboto Ich bin mir nicht sicher, wie man das ausspricht . Es ist sehr eng. Sorgt nicht für ein gutes Lesbarkeitserlebnis. Ich werde es von diesem Zeilenhöhenfeld aus erhöhen. Ordnung. Das sieht toll aus. Die Überschrift ist dünn und glatt, erregt aber dennoch die meiste Aufmerksamkeit , und Absatz t ist leicht zu lesen, was für eine Verbesserung gegenüber dem, was er zuvor war Lassen Sie mich Ihnen zeigen, was ich ändern würde wenn ich stattdessen eine schwere Überschrift In diesem Fall würde ich die Zeilenhöhe des Überschriftentextes tatsächlich verringern . Denken Sie daran, dass wir, wie ich in der Lektion erklärt habe , bei großen und sehr fett gedruckten Texten , bei großen und sehr fett gedruckten Texten möglicherweise die Zeilenhöhe verringern müssen liegt daran, dass die Buchstaben eine Anziehungskraft haben und schwerere Objekte sich gegenseitig zusammenziehen In diesem Fall werde ich den Absatztext wieder auf das normale Gewicht zurücksetzen Generell vermeide ich es, dünne Gewichte für einen Absatztext zu verwenden . Auf Desktop-Bildschirmen, die keine sehr hohe Pixeldichte haben, können sie schwer lesbar sein. Ordnung, das ist es. Sehr einfache und unterhaltsame Übung , um das Einstellen des Typs und das Herumspielen mit verschiedenen Höhenwerten und Telefongrößen und so weiter Und in der nächsten Aufgabe werde ich mir Ihre Einreichung ansehen 20. Typografie: Zwei Schriftarten: Hier ist eine wichtige Regel, die Sie beachten sollten, wenn Sie Schriften für Ihre Projekte auswählen. Verwenden Sie maximal zwei Schriftarten für jedes Projekt und stellen Sie sicher, dass sie anders aussehen. Lassen Sie uns diskutieren, dass die erste Hälfte dieser Rolle nur zwei liegt, da die Entschlüsselung zu vieler Schriftstile überwältigend ist. Und zwei geben Ihnen genug Platz für jede bestimmte Persönlichkeit, die Sie darstellen möchten. Sagen Sie durch eine Displayschrift und haben Sie etwas Neutraleres für den Absatz und andere Texte. Was die zweite Hälfte dieser Regel betrifft, haben Sie, wenn Sie zwei zu ähnliche Schriften verwenden, das Gefühl, dass wenn Sie zwei zu ähnliche Schriften verwenden, das Gefühl, dass Sie geklickt haben und versehentlich das falsche Telefon für eines von ihnen ausgewählt haben. Die Überschrift ist ein Open Sans in ihrem Absatz wird in Roboto gesetzt. Der einzige Kontrast, der entsteht, besteht ihrer Größe und dem Gewicht der Überschrift. Wenn wir sie in die gleichen Gewichte und Größen legen, werden Sie sehen, dass sie viel zu ähnlich sind, aber nicht gleich. Wenn du mit zwei sehr ähnlichen Typen als einem gehst, gehe ich einfach mit einem von ihnen. Das ist eine absolut vernünftige Sache. In diesem Beispiel ersetze ich Open Sans durch Playfair Display. Das sieht deutlich besser aus. Kontraste zwischen diesen beiden Schriften sind also sehr hoch. erste ist eine moderne Serif, und die zweite ist eine neutrale Sans-Serie , die eine hohe Lesbarkeit für kleineren Text aufweist. Jetzt sieht das absichtlich und absichtlich aus. Du willst nicht die besten Möglichkeiten, diese zu machen und gut auszusehen. Lassen Sie es sich absichtlich anfühlen. Manchmal kann man gegen die Regeln brechen und die Richtlinien ignorieren und etwas tun , das völlig aus der Reihe ist. Aber wenn Sie, wenn es sich absichtlich anfühlt, wird es wahrscheinlich darauf achten, warum Sie diese Designregeln und -richtlinien lernen und praktizieren , die Sie zu einem sehr guten Webdesigner machen werden einem sehr guten Webdesigner weil Ihre Gemeinde wird sich absichtlich fühlen und aussehen. Es wird sich anfühlen, als hätten Sie etwas Arbeit gesteckt und den Prozess hinter sich gelassen. Und du hast nicht nur Dinge herumgeworfen und genug Open Sans gefunden , und Roboto wird sehr häufig Pairing verwendet. Dies deutet nur darauf hin, dass es eine Menge Webdesigner gibt, die kein Verständnis für gute Designprinzipien haben . Und wenn Sie diese einfachen typografischen Richtlinien befolgen, werden Ihre Entwürfe viel überlegener. Dies bedeutet nicht, dass Sie zwei serifenlose Schriften miteinander koppeln können. Wenn du das tust, muss es einfach Sinn ergeben. Wenn zum Beispiel ein Paar zu sensorischen Typen ist, es normalerweise daran, dass ich etwas mit einer Persönlichkeit für die Überschriftentexte und dann etwas Neutrales mit ausgezeichneter Lesbarkeit für den Körpertext haben möchte etwas mit einer Persönlichkeit für die Überschriftentexte und dann etwas , für den Hauptteil verwende ich oft die gleichen Schriften für alle Projekte. Je nachdem, was meine Besessenheit für einen bestimmten Zeitraum ist, wähle ich etwas, das neutral ist und viele Schriftgewichte wie Open Sans Roboto oder neu auf diese Weise hat Open Sans Roboto oder , dann habe ich viel Freiheit bei Fluggesellschaften. Ich kann Schriftarten mit begrenzten Gewichten verwenden, aber ein bisschen mehr Persönlichkeit. Und ich werde etwas wählen, das am besten zur Persönlichkeit dieses bestimmten Projekts und der Marke passt . 21. Typografie: Wo finden Sie Schriftarten?: Es ist ganz einfach, Telefone online zu schalten, und Sie haben wahrscheinlich bereits Erfahrung damit , einige Telefone herunterzuladen und online danach zu suchen Es gibt viele verschiedene kostenpflichtige und kostenlose Optionen Lassen Sie uns einige dieser Optionen durchgehen. Websites wie defont.com bieten eine große Auswahl an kostenlosen Geldern. Das Problem mit kostenlosen Schriften ist, dass sie von Amateurdesignern entworfen werden können , die sie zum Spaß oder um Erfahrung im Schriftdesign zu sammeln, entworfen haben Sie könnten am Ende alles haben, von einer Schrift mit schlechtem Abstand bis hin zu einer Kitty-Schrift Vermeiden Sie diese Art von Rückerstattungen, bis Sie gute Erfahrungen Und selbst dann ist es am besten, sich fernzuhalten und sich von kostenlosen Geldern fernzuhalten Oft werden sie überbeansprucht, was bedeutet, dass es viele verschiedene Designs oder Websites gibt verschiedene Designs oder Websites , auf denen sie verwendet wurden, und sie haben sie falsch verwendet, und es hat einfach einen wirklich schlechten Ruf Bezahlte Telefone sind offensichtlich die bessere Option. Ein Vorteil eines Premiumfonds besteht darin, dass er Ihnen ein einzigartiges Gefühl verleiht , da sie nicht so beliebt sind und nicht so häufig genutzt werden Bei einzelnen kostenpflichtigen Telefonen zahlen Sie für jeden Stil, normalerweise etwa 20 bis 50 Dollar Wenn Sie also eine ganze Familie mit allen Gewichten wollen, kann das teuer werden. Außerdem müssen Sie für jedes Projekt separat eine Lizenz erwerben . Bei einzelnen kostenpflichtigen Telefonen wäre es daher am besten , ein oder zwei Stile für einen Überschriftentext zu kaufen. Und als Haupttext, bei dem Sie viele verschiedene Gewichte benötigen , wie Boote und zusätzliche Boote und all das Zeug, dann können Sie Dinge wie Google Phones und einige andere Optionen verwenden , die ich erwähnt habe. Es gibt eine günstigere Möglichkeit, viele Premium-Telefone in die Hände zu bekommen , und zwar über Abonnementseiten. Am beliebtesten sind Adobe-Telefone. Der alte Name ist Type Kit. Adobe-Telefone sind in ihrem Creative Cloud-Abonnement enthalten . Dies sind Abonnements für Photoshop, Illustrator und andere Adobe-Software Wenn Sie das abonnieren, erhalten Sie damit mehr als 7.000 Adobe-Telefone Der günstigste Tarif kostet meiner Meinung nach etwa 10$ pro Monat, also ist es ein ziemlich gutes Angebot Mein persönlicher Lieblingsplatz ist Google Phones. Es ist kostenlos. Keine Sorgen um die Lizenzierung. Sie sind gut gestaltet. Es wurde von Google kuratiert und sowohl Figma als auch Webflow sind bereits Das erspart mir einfach so viel Installation und all Mein Rat für Sie am Anfang ist, bei Google Phones oder Adobe-Telefonen zu bleiben. Zwei zusammen bieten mehr als genug Telefone , die Sie für jedes Projekt benötigen. Ein wichtiger Hinweis zu Schriften im Allgemeinen ist , dass es sich bei Schriften eigentlich um normale Computerdateien handelt. Das bedeutet, dass sie unzählige Male kopiert und weitergegeben werden können unzählige Male kopiert und weitergegeben Wenn Sie also eine Datei für dieses bestimmte Telefon haben, heißt das nicht, dass Sie sie tatsächlich verwenden können Um eine Schriftart für eine Website in Ihrem Projekt verwenden zu können, benötigen Sie entweder eine Lizenz, für die Sie bezahlt haben, oder die Schriftart selbst muss mit einer kommerziellen Lizenz für die kommerzielle Nutzung geliefert werden. Hier ist eine coole Browsererweiterung , die ich häufig verwende. Es heißt Font Phase Ninja und zeigt Ihnen die Schriftart , die jede Website verwendet Ich bin ein Typfreak. Ich liebe das Aussehen einer attraktiven Schrift Wenn ich also eine Website sehe, die eine wunderschöne Schrift und Typografie verwendet , möchte ich wissen, was das ist, und sie als Inspiration für meine zukünftigen Projekte speichern , was im Grunde bedeutet, dass ich sie stehlen und später für meine Projekte verwenden kann sie stehlen und später für meine Projekte verwenden Link in den Ressourcen. Installieren Sie diese Erweiterung und entdecken Sie verschiedene Schriftarten auf Websites, die Sie besuchen Neugierig zu werden ist der beste Lehrer eines Designers. Designs um dich herum wahrzunehmen und sie genau zu untersuchen , wird dir viel beibringen und deine Designfähigkeiten sogar verbessern 22. Aufgabe: Schriftartkopplung: Ordnung, feuern Sie Ihre Figma an, Zeit für Wir werden alles, was Sie bisher über Schriften gelernt haben, in die Praxis umsetzen bisher über Schriften Genau wie in der vorherigen Aufgabe habe ich drei Textblöcke angeordnet Diesmal sind sie alle in einer einzigen Schrift. Ihre Aufgabe ist es, zwei Schriftpaare für jeden Textblock auszuwählen zwei Schriftpaare für jeden Textblock Sie außerdem, genau wie in der vorherigen Übung, Stellen Sie außerdem, genau wie in der vorherigen Übung, den Typ für jeden Text so ein, dass eine gute Hierarchie und zweitens eine gute Lesbarkeit erreicht werden, genau wie beim letzten Sie wählen insgesamt sechs verschiedene Schriftarten, drei, vier Überschriften und Text mit 34 Absätzen , dass Sie bei der Auswahl Ihrer Schrifttypen Ich möchte, dass Sie bei der Auswahl Ihrer Schrifttypen das verwenden, was Sie über die Schriftpersönlichkeit gelernt haben . Bei Bedarf schauen wir uns das Video über Persönlichkeiten an. Ich möchte, dass du über den Kontext nachdenkst , für den du dich entscheidest, und eine der Schriften auswählst, die die Persönlichkeit zeigt, die für diesen Kontext geeignet ist Wenn Sie die Schlagzeilen lesen, werden Sie feststellen, dass der erste Text von Reisen und Hawaii handelt von Reisen und Hawaii der zweiten geht es um Kochen und Grillen, und in der dritten geht es um Technologie. Nun, hier ist ein Hinweis. Der Typ mit der Persönlichkeit sollte für die Überschrift sein. Für den Absatz sollten Sie etwas Neutraleres mit hoher Lesbarkeit wählen Neutraleres mit hoher Lesbarkeit Übrigens, falls du dich fragst, warum der Text nicht richtig endet, ich habe dort einfach nicht den ganzen Artikel reingesteckt Es war nur ein Auszug aus einigen zufälligen Blogartikeln, die ich ausgewählt habe Lassen Sie mich eine Demo für den ersten machen. In dem Text geht es also um Reisen zu den Inseln von Hawaii. Jetzt werde ich darüber nachdenken, welche Art von Schrift das Gefühl vermitteln kann , an wunderschöne Sandstrände zu reisen Um ein besseres Gefühl für den Stil solcher Bilder zu bekommen, werde ich einige Bilder von Hawaii googeln und schauen, ob es einen Typografie-Stil gibt , der lokal auf Hawaii verwendet wird Mit einer Schnellsuche kann ich feststellen, dass es tatsächlich bestimmte Schriften gibt, die im hawaiianischen Design verwendet werden Ich suche auch nach Dingen wie Postkarten und Schildern auf Hawaii . Schau dir das an. Jetzt habe ich authentische Beispiele für Topographie, die tatsächlich auf den Inseln verwendet wird und die die Menschen an Hawaii erinnern werden Es scheint, als ob die handgeschriebene Schrift des Skripts der richtige Weg ist Mal sehen, was ich bei Google Fonts finden kann , das zu diesem Thema passt Ich werde nur handschriftliche Schriften filtern und unseren Text einfügen, um mir die genaue Demonstration zu geben Ich kann sehen , dass es mehrere Schriftarten gibt , die durchaus geeignet sein können Achte auf den Namen der Schrift. Oft geben sie dir einen Hinweis darauf , was das Thema der Schrift ist. Weil ich ein paar Bilder und echte Beispiele gegoogelt habe. Vorher konnte ich das richtige Gefühl für Hawaii bekommen. Jetzt ist es viel einfacher, die Schrift auszuwählen, weil ich Ähnlichkeiten in den Postkarten und Schildern erkennen kann . Beim Durchstöbern von Schriften suche ich auch nach solchen, die eine hohe Lesbarkeit aufweisen Es spielt keine Rolle , dass es sich um eine Überschrift handelt. Ich möchte immer noch, dass es lesbar ist. Schwer lesbare Schriften wie diese werden eine schlechte Wahl sein, egal wie gut sie aussehen. Okay, ich glaube, ich habe genug zur Auswahl. Jetzt werde ich das Handbuch dieser Telefone lesen, die ich ausgewählt habe , um zu sehen, wofür sie bestimmt waren. Ich sehe bereits ein Problem mit diesem. Bei großgeschriebenen Sätzen, wie in meiner Überschrift, war die Lesbarkeit besser, aber bei Wörtern in Kleinbuchstaben nahm die Lesbarkeit deutlich die Lesbarkeit Ja, ich werde Großbuchstaben für meine Überschrift verwenden, aber was ist, wenn ich meine aber was ist, wenn Das schränkt meine Möglichkeiten sehr ein. Das zweite ist das Kashan-Skript, Cashan Noure. Die Beschreibung des Telefons ist ziemlich neutral. Es sieht nicht so aus, als wäre es für ein sehr begrenztes Thema gedacht . Es sieht ziemlich lustig und entspannt aus, genau so, wie ich es mir auf Hawaii vorstellen würde , also werde ich es machen. Eine Sache, die Ihnen hier auffallen wird , ist , dass die Überschrift nicht wirklich mit dem Absatz übereinstimmt. Das passiert häufig bei großen Displaytexten. Sie haben zusätzlichen Speicherplatz und Sie müssen dies manuell beheben. Andernfalls sieht das Design nicht ausgerichtet aus. Denken Sie an unsere Lektion über optische Täuschungen Design kommt es nicht auf das Lineal an, sondern auf das Auge Wenn etwas nicht ausgerichtet aussieht, dann ist es auch nicht ausgerichtet. Jetzt sieht es punktgenau aus. Für den Absatz werde ich mich für etwas Neutrales entscheiden. Die naheliegende Wahl wäre eine Sans-Sera-Schrift. Eine offene SAS ist eine naheliegende Wahl Es ist eine sehr beliebte und hervorragende Schrift. Roboto ist eine weitere sehr beliebte Schriftart. Ich mag Lato sehr. Es ist eine sehr gute Schrift , die ich häufig verwende. Es hat einen sehr schönen Stil, wenn es Schlagzeilen geht. Und sieh dir das an. Lato bedeutet Sommer auf Polnisch. Das ist sicherlich eine perfekte Schriftart für unser Hawaii-Thema. Das war ein Glücksfall. Ein neutraler Absatztext, Sie müssen sich nicht auf eine verrückte Suche nach der richtigen Schrift begeben , die mit genau dem gleichen Gefühl entworfen wurde . Ich werde den Absatz eher dunkelgrau als schwarz mit vollem Kontrast gestalten . Dies ist eine hervorragende Möglichkeit , dem Absatztext Luftigkeit zu verleihen , ohne eine dünnere Schriftstärke zu verwenden Vermeiden Sie dünne Schriftstärken für Absatztext, da diese auf Bildschirmen mit niedrigerer Auflösung schlecht lesbar sind Da haben wir zwei Telefonpaare für einen Hawaii-Textblock Es sieht aufregend aus, ist aber stilvoll und leicht zu lesen. Jetzt sind Sie dran. Eins noch. , dass Sie zu jedem Textblock Ich möchte, dass Sie zu jedem Textblock Ihre Gründe für Ihre Telefonauswahl aufschreiben , wie Sie es bereits in der Aufgabe Typ Persönlichkeit getan haben der Aufgabe Typ Persönlichkeit Denken Sie daran, dass Sie sich daran gewöhnen werden, wie ein Designer zu denken, wenn Sie Ihren Denkprozess aufschreiben gewöhnen werden, wie ein Designer zu denken, wenn Sie Ihren Denkprozess Sie werden beginnen, die Dinge in einem tieferen und detaillierteren Dialog zu sehen . Außerdem werden Sie oft feststellen, dass Sie sich für ein Telefon entschieden haben , ohne darüber nachzudenken weil es vielleicht einfach hübsch aussah. 23. Die Kunst der Farbe: Ist eines meiner Website-Projekte. Es ist eine Website für eine Scooter-Sharing-App. Als ich diese Website entworfen habe, habe ich eine sehr lebendige grüne Farbe gewählt. Der Name der App ist Go Green. Die Roller sind elektrisch und umweltfreundlich. Dieses besondere Grün passt also sehr gut zum Konzept. Es ist der richtige Grünton. Aber meine Kunden hatten einen anderen Plan, und sie ließen mich ihn auf dieses Grün umstellen. Das ist waldgrün und passt nicht gut zu diesem Produkt. Waldgrün eignet sich gut für Outdoor-Unternehmen wie Camping, Wandern, Outdoor-Bekleidung, Angeln usw. Aber nicht etwas , das elektrische und moderne grüne Technologie ist. Aber manchmal musst du tun, was dein Kunde sagt. Farben können jedes Design verbessern oder zerstören. Wir fühlen uns von den Farben angezogen, die wir mögen, und von denen, die wir nicht mögen, ziemlich abgestoßen , sei es Webdesign oder andere Produkte wie Autos, Kleidung, Ketchup-Flaschen, Wir sehen vielleicht das beste Designprodukt, aber wenn uns die Farbe nicht gefällt, kaufen wir es nicht In den nächsten Lektionen werde ich dir beibringen, wie du Farben auswählst und wie ein Profi damit arbeitest , damit deine Designs großartig aussehen. Bleib. 24. Farben: Sampling Farben: gut, wir wissen, dass die Auswahl guter Farben eine sehr wichtige Sache ist, in Designs zu tun. Aber woher wissen wir, was eine gute Farbe ist? Und was ist ein schlechter Kragen? Vielleicht denkst du darüber nach? Oh nein, ich habe schrecklichen Geschmack in Farben. Keine Sorge, und ich habe auch einen guten Geschmack. Aber es gibt einen Trick, um Halsbänder zu wählen, und der Trick ist, nicht die Farben von Ihrem Hut oder direkt in Sigma zu wählen, sondern um immer noch Farben von irgendeiner Art von Inspiration. Dies kann andere Design-Arbeit sein, wie Websites oder Illustrationen oder Plakate, was auch immer, oder sogar von Wieder Auszeichnung wie Fotos. In dieser Lektion werde ich Ihnen beibringen, wie Sie die Welt um uns herum als Inspiration für unsere Farben einfach Farben aus der realen Welt nutzen können. Wie Menschen, Natur, Tiere gut, fast immer geben Sie Ergebnisse zu schaffen. Warum? Weil die meisten von uns bereits einig sind, dass eine Orchidee schön aussieht, aber eine Kakerlake, nicht so viel. Gute Coloristen zu pflücken ist nur die Hälfte von der Arbeit. Die zweite Hälfte passt tatsächlich die richtigen Farben zusammen. Verwendung der realen Welt ist unsere Inspiration löst dieses Problem auch, auch, weil die meiste Zeit natürliche Welt bietet tolle Farbkombinationen. Dieses Foto der Linie sieht schön aus. Wenn wir eine Farbpalette finden, die bereits auf diesem Bild ist, können wir sicher sein, dass diese Farben die meiste Zeit wirklich zusammenpassen. Andernfalls würden wir ein Foto dieser Linie nicht als attraktiv finden. Einfach schwächen. Ein paar dominante Farben aus dem Bild. Und jetzt haben wir eine Farbpalette, die natürlich und harmonisch ist. Hier wird es interessant. Nehmen wir an, wir entwerfen einen Abschnitt, der in etwa so aussieht. Wenn wir dieses Foto bekommen und es in unserem Design zusammen mit unserer neuen Farbpalette verwenden, werden wir einige wirklich gut aussehende Ergebnisse erhalten, weil wir nicht nur Autos zusammen passen , sondern wir sind tatsächlich Farben mit unserem Bild. Wir können dann herumspielen und diese Farben für Text oder Hintergründe verwenden, oder sehr interessante Farbkombinationen erstellen. Sieh dir das an. Es ist wie eine Magie. Und ich war in derjenige, der diese Farben einfällt hat. Mutter Natur hat 25. Aufgabe: Farbproben: Lassen Sie uns eine unterhaltsame Übung zum Sampling von Farben aus Bildern machen. Ich habe eine Figma-Datei für diese Aufgabe vorbereitet. Es hat drei Frames mit demselben Layout. Dies ist ein sehr verbreitetes Web-Layout mit einer Art geteiltem Bildschirm. 50% des Bildschirms sind das Bild und dann 50 sind für den Inhalt vorgesehen. Es ist ein sehr einfach zu erstellendes Layout und kann sehr effektiv und schön sein. Es wird gut für Sie sein, dieses Layout zu üben , während wir unsere Farbauswahl üben. Sind drei Frames in dieser Datei. Bei zwei davon habe ich Bilder für Sie vorbereitet und eines ist leer. Ich möchte, dass du für jeden Rahmen Farben aus diesen Bildern ausprobierst und die linke Seite des Rahmens mit einer Farbpalette bemalst . Auf dem leeren Bild möchte ich, dass du dein eigenes Foto auswählst. Möglicherweise stellen Sie fest , dass nicht alle Fotos für die Farbpalette geeignet sind. Außerdem möchte ich, dass Sie das, was Sie bisher gelernt haben , anwenden und es auf die linke Seite des Rahmens, die Hierarchie und alles, was mit der Typografie zu tun hat, Lassen Sie mich einen zur Demonstration machen. Ich werde einen leeren Rahmen verwenden. Gehen wir zuerst zu unsplash.com und suchen uns ein gutes Foto. Unsplash ist eine großartige Quelle für kostenlose Fotos. Sie sind kostenlos für den kommerziellen Gebrauch, nicht nur für den persönlichen Gebrauch, und sie haben, weißt du, eine große Auswahl an verschiedenen Fotos Sie sind nicht sehr, sie sehen nicht wie Archivmaterial aus, also sind sie ziemlich natürlich und sehen gut aus, obwohl sie frei gestaltet werden, werden sie oft verwendet, aber zur Fotografie später mehr. Okay, ich liebe Berge, also werde ich ein schönes Foto mit Blick auf die Berge auswählen. Dieser ist eine gute Wahl. Es hat viele Farben, es wird also Spaß machen, damit zu arbeiten. Zuerst erstelle ich einen Platzhalter für das Bild. Ich werde ein Rechteck zeichnen , sodass es genau die Hälfte des Rahmens ausmacht Lassen Sie uns die Größe unseres Rahmens überprüfen. Es sind 1.152 Pixel. Und jetzt mache ich das Rechteck auf die Hälfte dieser Größe. Hier ist ein cooler Figma-Trick. Ich gebe 1152/2 und drücke dann die Eingabetaste, und Figma rechnet Es ist genau die Hälfte des Frames. Jetzt werde ich mein Bild platzieren. Sie können Ihr Bild direkt in Figma ziehen oder Formwerkzeug die Option Bild platzieren wählen Hier sind einige Dinge , auf die Sie bei der Arbeit mit Bildern und Figma achten bei der Arbeit mit Bildern und Figma Die Fotos, die Sie von Osplash oder anderen Stockschildern erhalten , werden ziemlich groß Geben Sie Figma also etwas Zeit zum Nachdenken, denn es lädt das Bild auf seine Server hoch, bevor Sie es platzieren können Das Bild wird in seinen ursprünglichen Abmessungen platziert. Da dieses Bild sehr groß ist, sieht es so super vergrößert Aber weil es Teil des Rahmens ist, ist nur das sichtbar. Da es riesig ist, müssen wir es verkleinern. Wenn Sie ein Bild auswählen , das den gesamten Bereich des Rahmens ausfüllt, wird statt der Bildebene der gesamte Rahmen ausgewählt Ich finde das ein bisschen nervig, aber es ist keine große Sache. Um eine Fotoebene auszuwählen, ist es naheliegend, sie im Ebenenbedienfeld auszuwählen. Die bessere Methode besteht jedoch darin, auf das Bild zu klicken und dabei die Strg - oder Befehlstaste gedrückt Das ist ein sehr praktischer Trick. Behalte es im Hinterkopf. Um die Größe des Fotos auf einige nützliche Abmessungen zu ändern, vergrößern wir die Ansicht, sodass wir die Bildränder sehen können Sie sehen diese blauen Linien, das sind die Ränder des Bildes Das Bild ist im Vergleich zum Rahmen wirklich groß. Deshalb sind die Ränder so weit vom Rahmen entfernt. Wir können nach den Griffen greifen und die Größe unseres Bildes ändern. Halten Sie dabei die Umschalttaste gedrückt , um die Proportionen des Bildes beizubehalten Ein Bildelement in Figma ist im Grunde ein Rechteck mit einem Bild als Hintergrundfüllung Du musst die Schicht nicht halten. Das Bild wird dadurch nicht verzerrt, aber in diesem Fall möchte ich das Originalbild sehen, damit ich genau auswählen kann , welcher Teil des Bildes angezeigt werden soll Wenn Sie ein Bild auf einem Rechteck platzieren, wird es zu einer Füllung dieses Rechtecks, anstatt ein eigenständiges Bild zu sein Eine letzte Sache, auf die Sie achten sollten. Wenn Sie ein Bild oder etwas anderes platzieren, stellen Sie sicher, dass sich die Ebene auf dem Frame befindet , an dem Sie gerade arbeiten, da sie neben diesem Frame möglicherweise versehentlich auf anderen Frames in der Nähe platziert wird. Oder es kann unabhängig von allen Frames auf der Leinwand platziert werden . Wenn es nicht auf Ihrem Rahmen ist, wird es sich nicht so verhalten, wie Sie es erwarten. Es könnte dich verrückt machen, bis du das herausfindest. diesem Grund möchte ich alle möglichen Möglichkeiten behandeln, wie etwas schief gehen und sich nicht so verhalten könnte , wie Sie es erwarten. Das ist normalerweise der Grund für die größte Frustration , wenn man etwas Neues lernt und nicht versteht, warum sich etwas nicht so verhält, wie es sollte Wenn es sich also komisch verhält, schauen Sie sich das Flares-Panel an und stellen Sie sicher, dass es sich auf Um es auf den Rahmen zu ziehen, Ihr Cursor und die Maus auf dem Rahmen befinden und den Rahmen überlappen Dann wird es nach innen gezogen, und wenn es irgendwie aus dem Rahmen herauskommt , dann wird es es aus dem Rahmen herausziehen und auf die Leinwand oder woanders platzieren Eine letzte Möglichkeit, ein Bild in Figma zu importieren , besteht darin, es als Bildfüllung zu importieren Wählen Sie das Rechteck aus, klicken Sie auf die Einstellungen für die Farbfüllung und wählen Sie aus dieser Option das Bild aus Sie erhalten dieses karierte Platzhalterbild. Klicken Sie dann auf Bild auswählen und wählen Sie einfach Ihre Bilddatei aus. Es wird deine Ebene mit diesem Bild füllen. Das Lustige an dieser Option ist, dass Sie dies mit fast jeder Ebene tun können, auch mit einer Textebene. Dies eröffnet viele kreative Möglichkeiten , die Sie in Ihren Designs verwenden können. Nun, welche dieser Optionen Sie verwenden um Ihr Bild zu importieren, spielt eigentlich keine Rolle. Das Ergebnis ist immer eine Bildfüllung. Das passiert immer. Selbst wenn Sie das Bild einfach auf der Leinwand platzieren, erstellt Figma einfach ein Rechteck und fügt das Bild als Füllung hinzu In diesem speziellen Fall ist es meine bevorzugte Methode, das Bild direkt in unsere Rechteck-Füllung hochzuladen , da dies in diesem speziellen Fall die kontrollierteste Methode ist. Wir wissen, dass dieses Bild die Hälfte dieses Rahmens sein soll und wir haben bereits ein Platzhalterrechteck dafür erstellt Könnte genauso gut das Bild einfach hineinlegen. Nun besteht die Möglichkeit, dass Ihr Bild und die Platzhalterform Sie dafür erstellt haben, nicht exakt dieselben Proportionen haben Wenn Sie Ihre Form mit dem Bild füllen, wird das Bild an bestimmten Stellen zugeschnitten Möglicherweise gefällt Ihnen dieser Zuschnitt nicht, daher müssen Sie ihn anpassen, um die ideale Position zu erhalten Zum Glück können wir das tun, indem wir von hier aus eine Zuschneideoption auswählen und dann unser Bild einfach bewegen, um es genau so zu positionieren, wie wir es möchten Dieses Zuschneidewerkzeug funktioniert so ziemlich genauso , wie Sie ein Bild auf Ihrem Telefon zuschneiden würden Sie können das Bild verschieben und an der gewünschten Stelle positionieren Wenn Sie es vergrößern oder verkleinern müssen, können Sie das auch tun Nur ein wichtiger Hinweis: Wenn Sie die Bildgröße im Zuschneidewerkzeug ändern, die Größenänderung das Seitenverhältnis nicht sofort festgelegt. Sie können ein verzerrtes Bild erhalten, wenn Sie nicht vorsichtig sind Eine einfache Lösung hierfür besteht darin, beim Ändern der Größe die Umschalttaste gedrückt zu halten Dadurch wird das Seitenverhältnis beim Ändern der Größe Am Ende erhalten Sie die ursprünglichen Proportionen und keine Pfannkuchenversion davon Hervorragend. Unser Bild ist fertig. Jetzt werde ich meinen Text ein wenig stylen. Sie können Ihren eigenen Text in die Überschrift einfügen, wenn Sie Ihr Bild auswählen. Sie müssen sich keine Gedanken über den Absatz machen. Ich habe den Scheintext verwendet, den berüchtigten Loren Ich habe die Schriften schon im Kopf. Ich wähle sie nicht anhand von Bildern aus, aber du kannst, wenn du möchtest. Das Playfair Display ist eine wunderschöne Schrift im modernen Servicestil, der Seite viel Klasse verleiht Und Lato ist eine hervorragende sensorische Krawatte für jeden allgemeinen Gebrauch. Lassen Sie uns nun unsere Elemente am Raster ausrichten. Erinnerst du dich, wie man das Raster auf den Rahmen aufträgt? Wählen Sie zunächst den Rahmen im Eigenschaftenfenster unter dem Layoutraster aus und klicken Sie auf das Plussymbol. Standardmäßig ist es ein zweidimensionales Raster. Wir wollen Spalten. Geben Sie 12 Spalten ein. Der Dachrinnenraum ist flexibel. Normalerweise können Sie alles zwischen 20 und 40 angeben. Ich bevorzuge 30 Pixel. Lassen Sie uns auch die Ränder anwenden. Ränder sind notwendig , da der Inhalt der Website nicht an den Rändern beginnt. Jede Website hat einen gewissen Inhaltsrand an den Seiten. Was die besten Ränder sind hängt von der Breite des Rahmens ab. Wenn wir auf dem großen Desktop-Bildschirm entwerfen, sind unsere Ränder viel größer als bei der Gestaltung für das Telefon. Für diese Rahmengröße sind 60 Pixel ziemlich gut. Y Eine Sache, die Ihnen vielleicht auffallen wird, ist, dass mein Platzhalter für das Bild nicht am Raster ausgerichtet ist. Vielleicht denken Sie, Moment mal, ist das Raster nicht wichtig und richten wir unsere Elemente nicht auf der Grundlage unseres Rasters aus? Ja, das stimmt, aber in diesem Fall ist unser Bild Teil der Leinwand. Unsere Leinwand ist die Hintergrundfarbe und die Hintergrundbilder der Seite. Sie haben ihr eigenes Raumgefüge und halten sich nicht an die Regeln unseres Netzes. Das Raster ist normalerweise für den Inhalt und für Dinge vorgesehen , die über der Hintergrundleinwand Ihrer Hintergrundseite liegen . Eine Sache, die ich an Text nicht mag, sind sogenannte verwaiste Wörter. Eine Sache, die ich an Text nicht mag, sind sogenannte verwaiste Wörter Sie sehen dieses einzelne Wort in der letzten Zeile, das als verwaistes Wort bezeichnet wird Ich entwerfe, wir versuchen, solche Waisen zu vermeiden. Sie lassen den Absatz etwas ungeschickt aussehen. Es ist kein großes Verbrechen, sie drin zu lassen, aber es ist ein nettes zusätzliches Detail, um Ihre Arbeit aufzupolieren In einem solchen Fall werde ich die Ausrichtung auf das Raster unterbrechen. Es ist sowieso nicht so stark auf der rechten Seite des Textes, weil der Text bereits gezackt ist. Es ist in Ordnung, das Raster ein wenig zu durchbrechen, um ein verwaistes Wort zu korrigieren Sie müssen nur das Textfeld verkleinern, bis mindestens ein oder mehrere Wörter in der letzten Zeile auftauchen, um diesem Wort einen Freund zu geben Dieser Absatz sieht jetzt ausgewogener aus. Das ist es, wofür Sie sich in der Regel entscheiden sollten, einen eher gebündelten und rechteckigen Textblock bei dem die Textzeilen einheitlicher sind, soweit es möglich ist Nachdem wir unseren Rahmen vorbereitet haben, können wir mit der Bemusterung unserer Farbpalette beginnen Um eine Farbe aus unserem Bild zu testen, müssen wir zunächst unser Bild verwischen Dadurch wird der Durchschnitt der benachbarten Pixel berechnet und Sie erhalten eine genauere Farbpalette, die dem entspricht, was unsere Augen wahrnehmen da wir diese unabhängigen Pixel nicht wirklich sehen Im wirklichen Leben sehen wir einen Durchschnitt mit seinen Schatten und Farbverläufen und all Das Farbauswahl-Tool auf einem Computer ist extrem präzise, sodass es die Farbe einzelner Pixel erfasst Und einzelne Pixel sind nicht die genaueste Darstellung des Gesamtbildes Wählen Sie das Bild im Eigenschaftenfenster Option Effekte wird angezeigt. Fügen Sie einen neuen Effekt hinzu, indem Sie auf das Plus-Symbol klicken. Standardmäßig wird dadurch ein Schlagschatten hinzugefügt. Klicken Sie auf das Drop-down-Menü, um andere Effekttypen anzuzeigen, und wählen Sie „Ebenenunschärfe Standardmäßig reicht das normalerweise nicht für Unschärfe aus. Wir brauchen etwas schwereres. Um die Unschärfe zu erhöhen, klicken Sie auf das Symbol und beginnen Sie dann mit der Vergrößerung und hören Sie auf, bevor sich die Farben zu stark vermischen 24 ist in diesem Fall ziemlich gut. Das ist zwar kein genaues Zeichen, manchmal brauchst du viel weniger Unschärfe, manchmal mehr, vor allem, wenn du eine Farbe von etwas Kleinem wie blauen Augen oder rotem Lippenstift ausprobieren willst von etwas Kleinem wie blauen Augen , dann brauchst du einen kleineren Unschärfewert, sonst vermischt sich die Farbe zu stark Beachten Sie, dass die Farbpalette sehr auffällig ist. Wir haben das Blau, diese hellbraunen Farben und das Dunkelbraun. Figma kann diese Farben mit einer Pipette für uns heraussuchen . Zeichne ein Rechteck. Klicken Sie dann auf dieses Feld, um die Farbe des Rechtecks zu ändern, und wählen Sie dann die Pipette aus. Wenn Sie mit der Maus über das Bild fahren, wählen wir die Farbe aus genau diesem Pixel aus und malen das Rechteck Wiederholen Sie den Vorgang für alle anderen Farben. Wie viele Farben Sie auswählen hängt vom Bild und von Ihnen ab. Sie möchten die dominierenden Farben auswählen, die unbestreitbar sichtbar sind und den größten Teil des Bildes ausmachen, und alle kleineren Farben, die sehr auffällig sind, enthalten auch einige neutrale Töne wie Grau Jetzt, wo wir unsere Farbpalette haben, deaktivieren Sie den Unschärfeeffekt auf dem Bild und beginnen Sie, den Inhalt der linken Seite in diesen Farben zu malen Inhalt der linken Seite in und zu sehen, was funktioniert und was Fügen wir auf der linken Seite ein weiteres Rechteck als Hintergrundfüllung Denken Sie daran, warum dies unsere Elemente bedeckt , da die Ebene in der Liste weiter oben steht. Verschiebe sie einfach nach unten, sodass sie als Hintergrund angeordnet ist . Sie können auch mit der rechten Maustaste klicken und „An zurück senden“ auswählen. Das wird ganz nach hinten geschickt. Lassen Sie uns jetzt einige Hintergrundfarben ausprobieren. Lassen Sie uns diese neutralen Farben trocknen. Schauen wir uns die Farbe an, die am besten zu diesem Dunkelbraun passt Ups, ich habe vergessen, das Bild l aus dem Text zu entfernen , als ich damit herumgespielt habe Das Blau bildet einen sehr guten Kontrast und kann für ein aufregendes Design nützlich sein Diese helle Sendefarbe ist auch nicht schlecht. Da denke ich, dass dieser der beste ist. Wirklich schlecht im Umgang mit Farbnamen, deshalb suche ich sie normalerweise auf Farbseiten. Dieser heißt Tumbleweed. Was einen Absatz betrifft, kann ich die weiße Farbe wählen. Obwohl es zu stark auffällt und mit der Überschrift um die Aufmerksamkeit konkurriert, reduziere ich in solchen Fällen die Opazität des weißen Textes auf etwa 80% Dadurch wird die Intensität der weißen Farbe verringert, und auch die Hintergrundfarbe wird ein wenig durchdringen, da sie eine gewisse Transparenz hat, und das passt gut zum Hintergrund Wir können es auch mit der Steuer versuchen, was überhaupt kein schlechtes Ergebnis ist Ich würde so etwas zwar nie tun, das erzeugt einfach eine Masse aus Farben statt aus gewollten und natürlich aussehenden Farbkombinationen Wenn es um Absätze geht, Sie niemals eine Option mit lebendigen Farben Das sieht einfach super amateurhaft aus. Farben für Absatztext Es ist sehr schwierig, Farben für Absatztext korrekt darzustellen. Bei Überschriften eignen sich Farben hervorragend, weil sie groß sind und die Farbe richtig zur Geltung kommt Aber bei Text mit kleinen Absätzen sehen intensive Farben einfach komisch aus Oft sind sie schwer zu lesen und sehen aus wie ein Vertriebsleiter, der eine PowerPoint-Präsentation macht. Um auf Nummer sicher zu gehen, verwenden Sie einfach Weiß oder Schwarz und spielen Sie mit der Opazität müssen nicht einmal eine dieser Optionen aus den Farben, die Sie probiert haben, abtrocknen dieser Optionen aus den Farben, die Sie probiert Für Anfänger ist es ein bisschen riskant. Es ist leicht, etwas falsch zu machen. Diese Tumblewod-Option funktioniert , ist aber ein Glücksfall, da es sich um eine gedämpfte Farbe handelt und genau in derselben Palette wie der Hintergrund Es ist auch die Farbe der Überschrift. Unter all diesen Bedingungen funktioniert es. Wenn Sie eine dieser Bedingungen entfernen, funktioniert sie möglicherweise nicht. Dieser Opazitäts-Track ist eine perfekte und sichere Option. Designer aller Qualifikationsstufen lieben es einfach, dies häufig zu verwenden Bleiben Sie vorerst dabei und sobald Sie etwas mehr Erfahrung gesammelt haben, können Sie anfangen, mehr zu experimentieren In diesem Fall habe ich Weiß verwendet, aber auf einem sehr hellen Hintergrund beginnt man mit einem schwarzen Absatz und verringert von dort aus die Deckkraft Schauen wir uns andere farbige Hintergründe an. Oh ja, das sieht auch wunderschön aus. Okay, dieser fühlt sich für mich am organischsten an und lässt die Schönheit der Landschaft wirklich hervorstechen. Außerdem eignet sich die Farbe sehr gut für Outdoor-Themen. Ordnung, sehr unterhaltsame Übung um Ihnen den Einstieg in Farben zu erleichtern und mit ihnen herumzuspielen Nachdem Sie Ihre Arbeit in den nachfolgenden Aufgaben eingereicht haben, finden Sie den Link zu einer Datei , die eine Lösung dafür enthält Machen Sie sich keine Sorgen, wenn die Lösung nicht genau mit Ihrer übereinstimmt. Für diese Übung gibt es nicht nur eine Lösung. 26. Farben: Fine-tuning: Lass uns eine Kerbe nehmen und eine Farbe stolz auf dich machen. Sie haben bereits gelernt, wie man einfache Farben aus der Welt um Sie herum. Lasst uns nun lernen, wie man diese Kragenproben fein abstimmt. Die Fähigkeit, Grabfarben zu finden, ist eine sehr praktische Fähigkeit, und wir lassen Sie diese Designs nageln. Ein gutes Stück Designmagie ist in Farbe, daher möchten wir sicherstellen, dass Sie alle Geheimnisse lernen und sehr zuversichtlich werden, wenn mit Halsbändern arbeiten. Lassen Sie mich Ihnen zeigen, wie und warum wir Grabhalsbänder finden. Dies ist ein wunderschönes Foto. Ich mag den Farbkontrast zwischen dem Vogel und dem Hintergrund. Ich sage Vogel, weil ich keine Ahnung habe, welche Geburt das ist. Ist es ein Falke und Adler? Ein Falke? Keine Ahnung. Lasst uns einfach diese beiden Halsbänder. Aber bemerkst du, wie die Halsbänder, besonders das Braun, nicht wirklich die Marke treffen? Diese Farben sehen im Vergleich zum Bild stumpf aus. Die Sache ist, dass Federn keine einheitliche Farbe haben. Einige Teile sind gelogen. Einige Teile Stern. Das Licht reflektiert auch unterschiedlich auf verschiedenen Teilen. All dies gibt also eine andere Wahrnehmung als das Abtasten einer Farbe von einem einzigen Punkt. Aber die Farben auf dem Vogel sind heller, lebendiger und insgesamt sehen aufregender aus. Dies ist, was wir tun können, um das Beste aus unserer Farbe in vig Ma oder jeder anderen gestalteten selbst fair zu machen. Für diese Angelegenheit haben wir diese Farbwähler-Tool Warnungen lernen, wie man dieses Ding wirklich schnell zu arbeiten. Dieses Jahr ist ein Farbspektrum auf diesem gepackten Raum, wir Gipfel fragt Sie. Ein Farbton ist der Hauptbestandteil, der den Kragen macht. Wie Sie sehen können, ist der Farbton für diesen Kragen genau hier, wo sich der Schiebergriff auf dem Spektrum befindet. Zwei weitere Zutaten, aus denen unsere Farbe besteht, sind die Helligkeit in der Sättigung. Helligkeit ist die vertikale Achse. Auf dieser Karte. Es ist genau das, was es sagt. Wie hell die Cholera ist, entfernen Sie vertikal auf der Karte. Heller, die Farbe wird. Und wenn wir nach unten gehen, desto dunkler wird die Farbe. Sie können sich das so vorstellen, wie viel Licht auf die Farbe fällt. Während eines sonnigen Sommertages, können Sie einen Kragen ein bestimmtes Sie vollständig sehen, da es eine Menge Licht fällt auf sie. Aber in der Nacht, in Ihrem Zimmer mit den Lichtern, alles, wenn es hellschwarz ist und Sie nichts sehen, als alles schwarz ist, selbst die hellste rote Farbe. Deshalb ist der untere Kreis komplett schwarz. Auf dieser Skala bedeutet 0% Licht, dass wir nicht sehen. Nicht die Sättigung ist die horizontale Achse auf dieser Karte. Es ist diese Intensität von diesem speziellen Hugh in der Farbe. Wenn Sie sich nach rechts bewegen, erhöht sich die Sättigung und der Kragen wird intensiver. Und wenn Sie sich nach links bewegen, nennen wir dies de Sättigung, als der Farbton beginnt zu verblassen, bis er vollständig von unserem Kragen entfernt ist. Dann haben wir eine Graustufen in Schwarz und Weiß bekommen. Foto ist ein voll gesättigtes Foto auf diesem Farbwähler. Es gibt Drop-down-Liste, mit dem Sie standardmäßig zwischen verschiedenen Farbmanagementsystemen wechseln können . Es sind Hacks, was Hexi-Dezimalcode bedeutet. Ändern Sie dies in HSB. HSB bedeutet genau das, was ich gerade über Farbton, Sättigung und Helligkeit gesprochen habe. Alle drei Werte sind hier zu sehen. 1. Ausgabe zweite Sättigung in den dreißiger Jahren. Helligkeit. Der letzte Prozentsatz gibt die Deckkraft an. Gehen wir zurück nach Burt, um die Farbe zu verfeinern. Wir halten die qs heute und spielen mit Sättigung und Helligkeit. Andernfalls ist es wichtig, den gleichen Farbton beizubehalten, um eine völlig andere Farbe zu erhalten, die nicht mehr mit dem Originalbild übereinstimmt. Zuerst werde ich die Helligkeit erhöhen, weil es zu dunkel ist. Der Helligkeitswert vorher war 78. Am Ende hat es erhöht. Es ist 95 die Skala sowohl auf Helligkeit und Sättigung und geht von Null nach Hause, 100 wie Prozentsatz. Und jetzt verringern Sie die Sättigung nur ein wenig. Und wir werden ein Ergebnis wie dieses bekommen. Das ist eher so. Es fühlt sich näher am Halsband des Vogels an als das Original. Das Gleiche können wir mit dem Blau machen. Es ist etwas dunkel. Ich werde nur die Helligkeit ein wenig erhöhen, und das war's. Auf diese Weise. Beide Farben sind lebendig und hell. Eine solche Verbesserung dessen, was wir zuvor hatten Dies ist besser geeignet für das heutige Web-Design. Schauen Sie, sind aufregende Farben, die sehr gut miteinander kontrastieren und insgesamt sieht frisch und modern 27. Aufgabe: Farben fein abstimmen: In dieser Aufgabe möchte ich, dass Sie zur Figma-Datei aus der vorherigen Aufgabe zurückkehren Figma-Datei aus der vorherigen Gehen Sie jeden von Ihnen entworfenen Rahmen durch und passen Sie die endgültigen Farbkombinationen an, die Sie in Ihrem Design verwendet haben Lassen Sie mich Ihnen das anhand desselben Beispiels zeigen , das ich selbst gemacht habe. Dies war das Endergebnis , mit dem ich mich zufrieden gegeben habe. Ich denke, es kann etwas Feinabstimmung gebrauchen, besonders bei einem dunkelbraunen Hintergrund. Es ist etwas zu dunkel und der Übergang zwischen dem Bild und der Hintergrundfüllung ist nicht so offensichtlich. Es kann sicherlich etwas Aufhellung gebrauchen. Hier ist ein Protest. Duplizieren Sie Ihre Frames , wenn Sie an einer neuen Variante arbeiten Design erfordert viele Erkundungen und Überarbeitungen. Gewöhnen Sie sich an, viele Versionen desselben Bildschirms zu haben viele Versionen desselben Bildschirms Ich habe das am Anfang nicht für eine neue Variante gemacht, ich werde einfach den Originalrahmen weiter bearbeiten Manchmal habe ich nach 20 Minuten des Optimierens und Änderns des Optimierens und Änderns eine Option, die nicht besser war als die Originalversion, aber ich hatte keine Möglichkeit, sie zu vergleichen Und den ganzen Weg zurückzugehen war zu mühsam. Wenn Sie Ihre Varianten nicht beibehalten, wird es schwierig, Ihre Meinung zu ändern, und Sie werden sich oft mit einer geringeren Option zufrieden geben . Um einen Rahmen zu duplizieren, gehen Sie vor, wie Sie es von jedem anderen Element in Figma erwarten würden jedem anderen Element in Figma erwarten Wählen Sie entweder den Rahmen aus und drücken Sie Strg C und Strg V oder ziehen Sie, während Sie Out oder Option drücken Okay, wähle die Hintergrundebene aus. Klicken Sie auf Fehlgeschlagen. Vergewissern Sie sich, dass Sie HSB-Farbmanagement ausgewählt haben und nicht HX oder etwas anderes Um mir die Feinabstimmung zu erleichtern, habe ich eine persönliche Regel Ich erhöhe oder verringere die Werte in Zehnerschritten. Dies dient nur dazu, meine Optionen einzuschränken. Andernfalls könnte ich weniger Zeit damit verbringen, die Helligkeit von 32 mit 33 zu vergleichen. Halten Sie die Umschalttaste gedrückt und drücken Sie die Aufwärts- und Abwärtspfeiltasten , um die Werte in Zehnerschritten zu erhöhen oder zu verringern Da hast du's. Das ist viel besser. Mal sehen, ob die Feinabstimmung der Titelfarbe gute Ergebnisse bringt. Meistens habe ich keine Ahnung, was funktionieren wird und was nicht. Design bedeutet viel Herumspielen und Vergleichen von Optionen. Die Helligkeit ist wirklich gut, also spiele ich einfach mit der Sättigung. Oh, das ist wunderschön. Schauen wir uns das Vorher und Nachher an. Schau dir das an. Das Original war nicht schlecht, aber ich habe ein noch besseres Ergebnis. Der Text ist in der neuen Version einfacher zu lesen. Der Übergang zum Bild ist viel offensichtlicher und Überschrift und Hintergrund sehen aus, als wären sie füreinander geschaffen. So viel Spaß. Ich liebe es, mit Farben zu spielen. Design soll Spaß machen. Werde verrückt. Viel Spaß damit. Wenn du mit etwas zu kämpfen hast, poste deine Fragen in Q&A und ich helfe dir 28. 31 Farbsuche NEUE Benutzeroberfläche: Hier sind zwei weitere Methoden , um Farben zu finden. Der erste, und mein Favorit, das Stehlen. Es ist nichts falsch daran, Farben zu stehlen. Im Gegensatz zu anderen kreativen Arbeiten können Farben wirklich jedem gehören Designer leihen sich also ständig Farben voneinander. Das ist im Grunde genommen eine Farbprobe von Farben aus der Arbeit anderer Leute statt aus der Fotografie Es ist auch einfacher, Farben zu finden, als Farben anhand der Fotos abzutasten, wie wir es getan haben. Es ist eher eine sofort einsatzbereite Option, die Sie sofort auf Ihre Arbeit anwenden können. Es gibt viele Websites, die Designarbeiten und Inspiration bieten. Ich habe diesem Thema eine spezielle Lektion gewidmet. Später werden wir uns eingehender mit dem Thema Inspiration und seiner Bedeutung für Ihren Arbeitsablauf befassen. Schauen wir uns zunächst einen Ort an, um Farbinspirationen zu finden: dribble.com Hier findest du hervorragende Inspiration. Die meiste Arbeit hier ist nicht einmal für echte Projekte bestimmt. Es ist Designer-Schau und Tell, viel Erkundung, Ideen und Praxis von anderen Designern. Nehmen wir an, wir arbeiten an einer Website zum Thema Finanzen. Wir werden nach dem Schlüsselwort Finanzen suchen und viel Inspiration für unsere Arbeit holen. Wenn wir Farben finden, die uns gefallen, können wir die Farbe entweder genauso ausprobieren, wie wir es bei Fotos getan haben. Speichern Sie einfach das Bild und platzieren Sie es in Figma. Verwenden Sie dann die Pipette oder verwenden Sie eine separate Pipette , mit der Sie Farben von überall auf Ihrem Bildschirm abtasten können Wenn Sie einen Mac verwenden, verfügt dieser bereits über eine Pipette. Es befindet sich in Hilfsprogrammen, die als digitales Farbmessgerät bezeichnet werden. Wenn Sie auf einem PC sind, können Sie Browsererweiterungen verwenden. ColorZ zum Beispiel ist dafür eine ziemlich gute Chrome-Erweiterung Die zweite Möglichkeit, Farben zu finden, sind Websites mit Farbgeneratoren wie coolers.co Sie können entweder Paletten von Grund auf neu erstellen oder Sie können eine oder zwei Farben, die Sie verwenden möchten, einfügen eine oder zwei Farben, die Sie verwenden möchten und einige andere Treffer generieren , die mit dieser Farbe funktionieren Hier ist ein Profi-Tape. Vermeiden Sie rohe Farben. Rohfarben sind Farben Sättigung von 100% und einer Helligkeit von 100%. Dies ist ein Fehler, den viele Nicht-Designer machen, wenn sie beispielsweise Präsentationen für die Schule oder die Arbeit oder Facebook-Cover und so weiter entwerfen Arbeit oder Facebook-Cover und so weiter Sie verwenden oft solche Zeilenfarben. Im Allgemeinen mögen wir Farben, die in der Natur vorkommen. Und selten bekommt man solche Farben in der Natur. Selbst die extremsten Beispiele wie Nemo hier enthalten keine rohen Farben. Das heißt jedoch nicht, dass Sie sie niemals verwenden können. Es kann Zeiten geben, in denen Trends im Trend liegen, oder vielleicht möchten Sie bewusst und absichtlich etwas wie ein sehr helles fluoreszierendes Grün verwenden etwas wie ein sehr helles fluoreszierendes , kein Problem. Wie immer beim Design gilt: Wenn es beabsichtigt ist, wird es wahrscheinlich funktionieren, und wenn nicht, könnte es schlecht sein. 29. Farben: Markenfarben: Ich liebe es, wenn ich an einem Projekt arbeite, das noch nicht mit Markenfarben kommt. Das bedeutet, dass ich die perfekte Farbpalette für das Projekt in meinen Händen finden kann, wird nicht mit bestehenden Markenfarben gebunden sein , und ich habe mehr Freiheit zu erkunden. Aber oft können wir unsere eigenen Farben nicht wählen. Das ist eine gute Nachricht, wenn das Projekt mit guten Markenfarben kommt, aber nicht so monetär. Wenn die Farbe so schön klingt. Woher wissen Sie, ob Sie Markenfarben auf der Website Projekt verwenden müssen, sind nicht einfach. Wenn das Projekt bereits ein Logo hat, bedeutet das, dass Sie die Marke verwenden müssen. Farben waren, um die Farben vom Regisseur aus dem Logo zu bekommen. Aber das Beste ist, Ihre Kunden nach dem Stil Gott oder den Markenrichtlinien zu fragen, die mit dem Logo geliefert wurden. Du siehst so etwas aus. Dies ist ein Leitfaden, den ein Logo-Designer in der Regel bietet, um abzulehnen, wenn sie endgültige Logo-Designs liefern . Es wird primäre, sekundäre und neutrale Farben enthalten . Es könnte auch einige Richtlinien für Topographie und andere Markenelemente enthalten. Wenn ein solches Dokument existiert, dass Sie mit ihren Koloristen und Typografie hier zur Verfügung gestellt bleiben müssen. Die Existenz dieses Kerls hängt davon ab, wie viel der Kunde bereit war zu zahlen und wie gut aus einem Designer sie angeheuert. Wenn sie billig gingen und ein Logo auf Fiverr erhielten, dann haben sie vielleicht überhaupt keinen Styleguide. Oder wenn das Logo vor 10 Jahren vom Neffen des Besitzers entworfen wurde, wusste er, wie man auf ein paar Knöpfe im Fotoshop klickt. Dann haben sie definitiv keins. Hässliche Farben sind sehr schwer zu verarbeiten. Und wenn der Kunde Geld auf Logo-Design gespart, dass ich fast immer Fledermaus, dass die Farben auf dem Logo werden schrecklich sein. Schlechte Logo-Designer haben eine einzigartige Fähigkeit, Zeit in die Vergangenheit zu reisen und Farben aus den neunziger Jahren zu leihen . In Zeiten wie diesem, Ich schlage manchmal Kunden ah, Marke aktualisieren die Farbe eines frischen aus ihrer Marke. Sie können das Logo in der Form vom Logo halten, und sobald ich die Website entworfen und wir uns auf der neuen Farbpalette niederlassen, dann können sie weitergehen und das vorhandene Logo mit den neuen Farben aktualisieren. Wenn das nicht möglich ist und die Farben vollständig sind, Müll. Dann werde ich die Verwendung von ihren Farben auf der Website begrenzen, und ich werde MAWR neutrale Farben wie Weiß, Grau und, uh, Schwarz verwenden, weil sie mit jeder Farbpalette verwendet werden können und dann ah wenig begrenzte Optionen und limitierte Versionen aus ihren Markenfarben. Dies ist ein guter Mittelweg zwischen der Notwendigkeit, mit der Marke Farbe bleiben ist über nicht mit ihnen so viel, so dass sie nicht die ganze Website aussehen schrecklich. 30. Wie du Fotos erstellst: Fotos sind etwas, das Sie viel tun werden. Als Webdesigner ist es ein wichtiger Bestandteil, um schöne Designs zu erstellen. Wenn viele attraktive Websites werden Sie die Schönheit vor allem aus dem gut gewählten Foto zu sehen . Mit dem richtigen Foto und der gut platzierten Topographie können Sie wirklich beeindruckende Ergebnisse in den kommenden Lektionen erzielen. Ich werde Ihnen ein paar Design-Tricks beim Umgang mit Fotos beibringen, um köstliche Designs zu erstellen . 31. Fotos: Bildüberlagerungen: Ein gutes Foto kann Wunder für ein Design bewirken. Ich liebe dieses Foto. Es ist wunderschön. Die Farben sind unglaublich. Es ist einfach und doch sieht es aus wie ein Märchen, aber wir haben ein Problem mit dieser Komposition. Kontrast zwischen dem Hintergrund und allen darüber liegenden Objekten ist nicht ausreichend . Der Kontrast ist so gering, dass die meisten Steuern völlig unlesbar Ein solches Design als Endergebnis zu produzieren , ist eine schreckliche Arbeit, obwohl alles andere genau stimmt und das Bild so wunderschön ist genau stimmt und das Bild so wunderschön Wie beheben wir das, indem wir Overlays verwenden. Im Grunde genommen werden Farbfüllungen über das Bild gelegt. Am gebräuchlichsten ist es, ein dunkles Overlay darauf zu legen. In Figma bedeutet das, eine schwarze Farbfüllung über das Bild zu legen und diesem Feld Transparenz zu verleihen , bis Sie einen guten Kontrast haben, aber bevor es zu dunkel wird Eine andere Methode wird als Abtönung bezeichnet. Es nimmt das Foto auf und gibt ihm einen anderen Farbton Dazu nehmen Sie das Bild auf und entsättigen es, um daraus ein Schwarzweißfoto Und dann fügen wir wieder eine Farbfüllung hinzu, aber diesmal wählen Sie statt Schwarz eine andere Dadurch erhält das Bild einen Farbton dieser Farbe. Dies ist besonders nützlich , wenn Sie Markenfarben im Design verwenden möchten Das ist ein sehr praktischer Trick. Sie können das Update auch auf bestimmte Stellen statt auf die gesamte Seite anwenden . Zum Beispiel habe ich hier ein dunkles transparentes Feld hinter dem Inhalt platziert, und ich habe auch einen dunklen transparenten Farbverlauf hinter der Navigationsleiste hinzugefügt . Merken Sie, dass es ein- und ausgeschaltet und wieder eingeschaltet wird? Allerdings, nur als Randnotiz, ich bin kein großer Fan dieser schwarzen Rechtecke nur zufällig hinter dem Inhalt Also vermeide ich es, sie zu benutzen, wenn ich wirklich weiß, wie das geht. Die Verwendung großer Hintergrundbilder ist eine sehr einfache Gestaltung. Es ist eigentlich nicht viel Design erforderlich. Sie finden ein beeindruckendes Foto und legen Ihren Inhalt in weißer Farbe darüber. Erzeugt ohne großen Aufwand ein sehr attraktiv aussehendes Design . Und meiner Erfahrung nach lieben Kunden. 32. Aufgabe: Bild-Overlays: In diesem Video werden wir üben, Overlays auf unsere Bilder anzuwenden Also schmeiß deine Figma an und lass uns loslegen. In dieser Figma-Datei habe ich drei Frames vorbereitet. Der Inhalt ist fertig gestaltet und fertig. Ihre Aufgabe ist es, Fotos für jeden Rahmen zu finden und Bildüberlagerungen anzubringen, damit der Inhalt gut sichtbar ist Lassen Sie mich den ersten demonstrieren. Wir haben also diesen Heldenbereich für eine Meditations-App oder etwas Ähnliches. Ich bin mir nicht genau sicher. Ich hole mir diesen Inhalt von zufälligen Websites. Zuerst müssen wir ein Foto finden. Gehen Sie also zu Splash.com und versuchen wir, nach Meditationsfotos zu suchen Es muss nicht die exakte Meditation sein . Sie können nach allem suchen, was Sie für geeignet halten, also vielleicht ruhige Seen, Gewässer, Natur, Himmel, im Grunde beruhigende und beruhigende Bilder Bei der Suche nach Fotos müssen wir nicht zu wörtlich gehen und das Bild alles in Aktion beschreiben Was ist mit Techniken, um später Fotos zu finden? Dieses Foto funktioniert gut für mich. Sie können das Gleiche oder etwas anderes verwenden Ihnen überlassen ist. Laden Sie es von hier herunter. Jetzt platzieren wir das Bild in Figma. Sie können das Bild direkt in Figma ziehen, wenn Sie möchten, oder Sie können von hier aus die Option Bild platzieren verwenden Wählen Sie Ihre Datei aus. Sobald Sie diesen Daumennagel am Cursor haben, klicken Sie auf eine beliebige Stelle im Rahmen , um das Bild zu platzieren Das Bild wurde in seinen ursprünglichen Abmessungen eingefügt, es wurde also stark vergrößert. Lassen Sie es uns verkleinern Verkleinern Sie die Ansicht, sodass wir die Ziehpunkte des Bilds sehen können , und nehmen Sie dann einfach die Griffe, um das Foto zu korrigieren Sie werden sehen, dass FIMA das Foto nicht verzerrt , wenn Sie es seltsam verkleinern Das bekommen Sie normalerweise nicht in anderen Design-Softwares oder vielen anderen Programmen. Dies bedeutet jedoch, dass einige Teile beschnitten werden. Wenn Sie nicht möchten, dass Teile beschnitten werden, halten Sie die Umschalttaste gedrückt, während Sie das Bild verkleinern Dadurch wird das Seitenverhältnis gesperrt . Jetzt müssen wir die Bildebene zurückschicken , sodass sie sich hinter dem Inhalt befindet. Es gibt zwei Optionen: entweder verwenden Sie eine Tastatur, eine kurze Kontrollkarte oder einen Befehl plus eine eckige Klammer. Eine Kleinigkeit, bei der Sie vielleicht nicht weiterkommen Wenn Sie auf das Bild klicken, wählt Pigma den gesamten Rahmen statt des Bildes Verwenden Sie also die Strg- oder Befehlstaste , um das Foto direkt auszuwählen linke eckige Klammer sendet es rückwärts und die rechte Klammer bringt es nach vorne Und zweite Option: Klicken Sie mit der rechten Maustaste auf das Bild, wählen Sie es aus, schicken Sie es nach hinten, und das wird es mit einem einzigen Zug hinter sich lassen. Das Gleiche gilt hier. Sie müssen zuerst das Bild mit der Strg-Taste auswählen und dann mit der rechten Maustaste klicken. Strg plus Rechtsklick, und es wird nicht funktionieren. Ich hatte wirklich Glück mit dem Bild, sieht toll aus. Aber wie Sie sehen können, ist der Inhalt sehr schwer zu lesen, also wenden wir unser Overlay Wählen Sie die Bildebene aus und fügen Sie unter Fülloptionen eine weitere Füllung hinzu, indem Sie auf das Plussymbol klicken Stellen Sie sicher, dass Sie die Bildebene ausgewählt haben und nicht den Rahmen , da er sonst nicht funktioniert. Und dann fange an, mit der Opazitätssteuerung zu spielen. Wie viel Transparenz wir benötigen , hängt vom Bild selbst Im Idealfall wollen wir so transparent wie möglich , bis der Inhalt schwer lesbar wird. Ich denke, ungefähr 30% funktionieren mit diesem Foto einwandfrei, und das ist alles, was Sie für jedes Bild tun müssen. Jetzt zeige ich Ihnen die Option zum Abtönen damit Sie sie auf einem der Rahmen verwenden können Im ersten Schritt beim Abtönen müssen wir das Foto schwarz-weiß machen In Figma ist das ganz einfach Klicken Sie auf die Bildfüllung und verringern Sie die Sättigung ganz nach unten Denken Sie aus den Farbkursen daran, Sättigung die Menge des Farbtons in der Farbe ist 0% bedeutet, dass der Farbton vollständig verschwunden ist, also keine Farben mehr vorhanden sind. Das ist es, was hier passiert. Der nächste Schritt ist das Hinzufügen eines Farbtons. Das wird zu dieser Overlay-Füllung hinzugefügt . Wir werden die schwarze Farbe durch etwas anderes ersetzen. Sie können auch mit der Deckkraft spielen, um das beste Ergebnis Sie können auch andere Inhalte auf der Seite anpassen , wenn sie nicht gut funktionieren Zum Beispiel ist die Anmeldeschaltfläche oben zu blass, also würde ich die Deckkraft etwas erhöhen Auch bei solchen getönten Overlays ist es üblich, Markenfarben zu verwenden Hier kommt das Abtönen wirklich ins Spiel. Ansonsten macht es wirklich keinen Sinn, und es ist besser, das Originalfoto mit lebendigen Farben zu verwenden das Originalfoto mit lebendigen Farben Was auch immer die Markenfarben sind, wir würden sie zum Beispiel als Farbton und vielleicht als Button-Farbe verwenden Wenn Sie den Inhalt auf der Seite in diesen Frames verschieben müssen , können Sie das tun, weil manchmal etwas auf dem Hintergrundbild erscheint , das mit dem Inhalt interagiert Wenn Sie, sagen wir , den Inhalt nehmen und ihn mittig ausrichten müssen, können Sie das tun, wenn Sie eine Überschrift verkleinern oder vergrößern oder verkleinern müssen, können Sie das tun Es liegt definitiv an dir. Beenden Sie nun den Job mit den anderen beiden Frames und reichen Sie anschließend Ihre Ergebnisse für alle drei Frames in der Aufgabe 33. Fotos: Extreme Crop: Ich bin ein großer Fan von Filmplakat-Design. Die meisten von ihnen haben eine große Designarbeit. Es ist faszinierend, aufregend und oft geheimnisvoll. Ich habe nicht diese Angewohnheit, auf Filmplakate in den Straßen zu starren und dann meine Freundin mit Details zu langweilig , welche Art von Typografie verwendet wurden. Und was haben sie mit dem Foto gemacht und mit einer Art Design-Trick, den sie darauf verwendet haben. Wenn Sie die Grundlagen des guten Designs lernen, werden Sie die Filmplakate nie wieder auf die gleiche Weise betrachten. Hier auf diesen beiden Plakaten möchte ich, dass Sie die Ähnlichkeit in der Verwendung der Fotos bemerken. Merkst du, wie sie voll Hut ist unsichtbar und es zoomte ing sehr eng zu ihrem Gesicht. Dies wird Extreme Crop genannt. In dieser und folgenden Lektion werde ich Ihnen verschiedene Möglichkeiten beibringen, wie man ein Bild zuschneidet. Wie cool wurde entworfen. Es gibt sogar Tricks, wie man ein Foto zuschneidet. Fangen wir mit extremer Ernte an. Erinnern Sie sich an dieses Beispiel aus der Farblektion Das Originalfoto aus der Linie ist eigentlich dieses, aber dieses Layout ist nicht so beeindruckend wie das vorherige, trotz der Tatsache, dass wir Seymour des Löwen im Vergleich zu der vollen Ansicht. Ihr Blick ist jetzt viel intensiver und ein wenig beunruhigend geworden. Es fügt dem Bild mehr Emotion und Drama hinzu. Es gibt zwei Dinge, die hier passieren. Erstens gibt es mehr Fokus auf den wichtigsten Teil eines jeden sein Gesicht und vor allem die Augen. Das macht einen Schuss intimer. Die Augen reden irgendwie mit uns, als ob sie versuchen, uns eine Nachricht zu geben oder eine Art von Emotionen zu demonstrieren , macht uns neugieriger und interessiert für das zweite Versteck. Teile des Subjekts lesen Mystery. Die Geschichte, die auf dem Plakat steht, endet jetzt noch nicht. Gleich neben dem Poster fühlt es sich an, als gäbe es noch viel mehr zu lesen, was wir sehen, was bedeutet, dass wir es herausfinden wollen. Und wir wollen das Rätsel von diesem Geheimnis lösen. So machen Sie interessantes Design. Extreme Ernte wird nicht nur bei Menschen und Tieren verwendet. Es kann auf Objekten verwendet werden. Dazu ein großartiges Beispiel für extreme Beschneidung. Ich stieß auf einer Website Ausschneiden Teile des Fahrrades macht den Abschnitt interessanter . Der Schlüssel zum Nageln extremer Ernte ist, nicht zum Feuer zu gehen und das Objekt unkenntlich zu machen. Das Publikum muss verstehen, was beginnt. Überprüfen Sie sofort, ohne zu schielen oder pausieren, auch für eine Sekunde, bis das Objekt offensichtlich bleibt. Dann hast du die Freiheit, ziemlich extrem zu gehen. Angenommen, Sie entwerfen eine Website für einen Gitarrenladen. Anstatt die volle Form von der Gitarre zu verwenden, können Sie zoomen und auf den Kopf von der Gitarre zuschneiden. Wir können deutlich sehen, dass es eine Gitarre ist. Absolut unbestreitbar. Aber das ist auf diese Weise nicht mehr interessant. Wir necken ein wenig ein Publikum. Wir baumeln ein wenig Informationen vor ihnen, aber keine enthüllt das ganze Bild. Wir bringen sie dazu, das Puzzle nach Ihren Inhalten zu beenden. Einfach der Farbe von der Gitarre. Machen Sie den Text so groß leichter, damit er nicht mit der Überschrift und Bam konkurriert! Sie haben einen hervorragenden Abschnitt. Es ist interessant und faszinierend. Denken Sie daran, das Letzte über Typografie und wie Sie die Persönlichkeit und Stimmung des Typs Pace mit dem Kontext abgleichen. Werfen Sie einen Blick auf die Schlagzeile mit klassischen Gitarren, ohne etwas über Gitarren zu wissen . Der Gemeindeklassiker diktiert bereits, welche Wahl wir mit einer Typografie mit einem modernen geometrischen Krawattengesicht wie Futura treffen sollten , wäre hier so fehl am Platz. Aber eine Skriptschrift wie Apple Chancery, ist eine großartige Übereinstimmung. Oft müssen Sie für eine sehr enge Räume zu entwerfen, zum Beispiel, Ah, Ah, horizontale Banner für Newsletter-Anmeldungen in einem engen Raum wie diese, wenn wir ein Bild, das Drama und Macht innerhalb der Bilder verringern denn wie klein es ist nicht einverstanden Bild mit viel Emotion in ihm, Aber es ist verloren. Dafür gibt es eine großartige Lösung. Wir können einen Rahmen finden, der die Geschichte erzählt. In diesem Fall ist es die Gesichter und Zoom in diesen Rahmen dieser Rahmen noch porträtiert die Geschichte des Bildes. Das Gesicht des Kindes ist im Fokus, und die Teile des Gesichts der Mutter reichen aus, um die Bewegung des Fotos wie Liebe und glückliche Vibes am Inhalt zu demonstrieren . Und das war's. Jetzt erhalten wir ein effektiveres Banner als Motion noch da ist, und wir müssen keinen Bildschirm sehen, um zu verstehen, was bei Schäden vor sich geht. Dieser Trick ist sehr praktisch für Blawg Hatters und Artikelseiten finden einen Rahmen, der die Geschichte auf seinem eigenen Zuschneiden erzählt , dass und Jetzt haben Sie einen sehr interessanten Händer für eine blockierte Seite. Ein Grafikdesign-Professor nannte diese Technik, die durch die Jalousien späht. Betrachten Sie es nicht als abgeschnittenes Foto, sondern eher wie die Teile des Sehens, die Sie sehen, wenn Sie es durch die Jalousien betrachten . 34. 38 Weiche Ernte NEU: Eine andere Art des Anbaus wird als Weichpflanze bezeichnet. Weiches Getreide hat keine harte Kante. Das Bild verblasst allmählich. Dies geschieht in der Regel durch Hinzufügen einer verblassenden Überlagerung über dem Bild Wenn es dieselbe Farbe wie die Leinwand hat, insbesondere Weiß, sieht es so aus, als würde das Bild einfach verblassen Es fühlt sich natürlich an. Jetzt haben wir auf der linken Seite einen ausgezeichneten Bereich , in dem wir unsere Inhalte hinzufügen können. Das Ergebnis sieht fantastisch aus. Der Inhalt ist auf den großen Teil der Komposition verteilt. Dies gibt ihm eine gesunde Menge an Atempause. Der Inhalt ist luftig und frei, er ist natürlich und verschmilzt mit einem Hintergrundbild, ohne es zu blockieren und zusätzliches Rauschen zu erzeugen Verwenden wir die Designkonzepte , die wir bisher gelernt haben Darauf können Sie wetten, dass wir das tun. Es gibt einen klaren Mittelpunkt, das ist der Berggipfel, der aus den Wolken herausragt. Der Rest des Inhalts ist einer ordentlichen visuellen Hierarchie angeordnet, beginnend mit einer großen und fett gedruckten Überschrift, und es gibt eine klare Einstufung und Ausrichtung. Das ist ein sehr einfacher, aber sehr mächtiger Trick. Es ist eine meiner Lieblingstechniken, bei denen ich jetzt mit Bildern arbeite. Desktop- und Laptop-Bildschirme sind ziemlich breit. Manchmal findet man jedoch das perfekte Bild, aber es ist vertikal. Keine gute Lösung, um es als Hintergrund für einen Breitbildbereich wie diesen zu verwenden . Der größte Teil des Bildes ist seltsam beschnitten und verliert seine Bedeutung. Es ist zu verwirrend und einfach anzusehen, und es gibt praktisch keinen Platz, um unsere Inhalte zu gestalten Fast nie möchten Sie ein vertikales Bild als Hintergrund für einen Abschnitt in voller Breite platzieren . Mit einem weichen Schnitt erzielen wir ein völlig anderes Ergebnis. Das Foto behält alle wichtigen Aspekte und wir haben den perfekten Platz , um den Inhalt zu platzieren. Dieses Layout hat einen klaren Schwerpunkt, und das ist natürlich der Typ. Der Inhalt ist hervorragend lesbar, da er auf einem weißen Hintergrund Wenn ich ein vertikales Bild als Hintergrund in voller Breite verwende, erhalte ich ein sehr chaotisches Ergebnis Der Inhalt verschmilzt mit einem Schwerpunkt des Bildes. Der Text ist nicht sichtbar genug. Es ist schwer zu lesen und das Ganze ist einfach sehr laut. Bei einem weichen Schnitt hingegen geben wir jedem Teil dieser Komposition seinen eigenen Raum, geben wir jedem Teil dieser Komposition was uns ein schönes, sauberes Aussehen mit hoher Verwendbarkeit verleiht . Fotos, bei denen ich einen einheitlichen schwarzen Hintergrund habe sich noch einfacher bearbeiten Probieren Sie einfach die Farbe ab dem allerletzten Pixel am Bildrand ab. Füllen Sie den Raum mit dieser Farbe. Ordnen Sie das Bild an der Position die am besten geeignet ist, und Sie erhalten ein einfaches Layout mit viel Platz, um Ihre Inhalte wunderschön zu platzieren. den Rand dieses Bilds auf diese Weise erweitern , kann das auch mit anderen Farben als Schwarz funktionieren, aber es ist eine zusätzliche Korrektur erforderlich. Okay. Wenn wir bei einem Bild wie diesem den Raum mit dieser Methode füllen, erhalten wir ein Ergebnis wie dieses. Es gibt eine strikte Trennung zwischen dem Bild und dem Hintergrund, was ein offensichtlicher Fehler ist, und wir wollen niemals ein Design mit offensichtlichen Fehlern wie diesem haben mit offensichtlichen Fehlern wie diesem Hoffentlich können Sie die harte Kante zwischen dem Sand und der Hintergrundfarbe Vielleicht ist diese harte Kante auf Ihrem Computer aufgrund der Videokomprimierung unscharf Aber das ist so, weil Objekte im wirklichen Leben niemals einfarbig sind, nicht einmal einheitliche Objekte wie Sand Wenn wir also eine einzelne Farbe von einem Objekt abtasten, ist es nur diese eine einzige Farbe. Eine Möglichkeit, dies zu beheben, besteht darin , dieselbe Farbverlaufsüberblendung anzuwenden. Und in diesem Spiel verwenden wir nicht Weiß, sondern genau diese Farbe aus dem Bild. Heute verschmilzt der Sand sanft und natürlich mit dieser Hintergrundfarbe Auf der grünen Seite gibt es jedoch viel Textur und mehr Farbmischung, sodass das Ergebnis nicht so natürlich aussieht Es ist überhaupt nicht schlecht. Es kann gut benutzt werden. Im Gegensatz zu den anderen drei Beispielen hier erscheint das Grün jedoch als Verlaufsüberlagerung über dem Bild Es ist eher wie ein verblassender Vorhang über dem Bild. ist völlig in Ordnung, und Sie können es definitiv gebrauchen Es gibt jedoch einen Trick , den ich in solchen Fällen verwende , der uns ein angenehmeres Aussehen verleiht. Lass es mich dir zeigen. Wenn unser Bild nicht breit genug ist, um den gesamten Rahmen auszufüllen, können wir den Teil des Bildes, der einfach und ohne komplizierte Formen ist, nehmen und es so dehnen, dass ohne komplizierte Formen ist, nehmen und der verbleibende Raum ertastet wird. Es ist wichtig, nur diesen Teil des Bildes zu dehnen, anstatt das Ganze zu dehnen. Ein Teil, der einfach ist, nicht viele Details enthält und nicht scharf ist. Auf diese Weise bleibt der wichtige Teil des Bildes seinen ursprünglichen Proportionen scharf Sie können dies nicht nur bei allen Fotos tun, wenn das Foto bereits einen verschwommenen Hintergrund hat , der zusätzliche Dehnung bieten kann Bei der Kopie haben wir einen sehr gut aussehenden Abschnitt, der sich natürlich anfühlt und der Inhalt leicht zu lesen ist und der Abschnitt mit der Pose wirklich ausgewogen ist So einfach und unterhaltsam können kleine Tricks sein, mit denen Sie großartige Ergebnisse erzielen können. Das Wissen um die Tricks ist es wofür Designer gutes Geld bekommen. Meine Kunden bezeichnen das normalerweise als Magie und sie werden mir sagen: Oh Vaca, wir brauchen ein neues Design für diese Seite Kannst du zaubern? Aber es ist keine Magie. Es ist Wissenschaft. 35. Aufgabe: Foto-Zuschneiden: In dieser Aufgabe üben Sie die Zuschneidetechniken , die Sie bisher gelernt haben In der Aufgabendatei werden Sie drei Frames sehen Jeder hat seinen eigenen Inhalt und ein Bild. Ich möchte, dass Sie für jeden Frame einen anderen Zuschnitt anwenden. Ich werde gleich zeigen, wie man diese Bildzuschnitte anwendet diese Bildzuschnitte anwendet Beim ersten Bild mit dem Namen Extreme Crop möchte ich, dass Sie genau diesen extremen Zuschnitt auf das Bild des Jungen anwenden auf das Bild des Jungen das Layout angeht, können Sie dies in einem geteilten Bildschirmlayout tun genau wie Sie es in früheren Aufgaben getan haben. den Inhalt wie gewohnt entsprechend, wählen Sie Ihre Telefone, Größen Farben aus und richten Sie die Elemente am Raster aus. Ich möchte, dass du auf das zweite Bild einen weißen, weichen Schnitt aufträgst. Ich erkläre, wie das gemacht wird. Ich möchte, dass du auf das letzte Bild einen weichen Farbschnitt aufträgst. Entspricht der weißen Version, verwendet jedoch die Farbe aus dem Bild, um einen reibungslosen Übergang zu erzielen. Ich zeige dir auch , wie das geht. Ordnung. Fangen wir mit einer extremen Ernte an. Extreme Crop ist sehr einfach. Sie können sich ziemlich gut vorstellen, wie das funktionieren wird. Ich werde einen geteilten Bildschirm erstellen und dieses Bild direkt darin zuschneiden. Lassen Sie uns nun dieses Rechteck genau zur Hälfte des Bildschirms machen . Wir können Figma für uns rechnen lassen. Der Rahmen ist 1.152 Pixel weiß. Geben Sie 1152/2 ein und wir erhalten genau die Hälfte. Richten Sie es so an der rechten Kante aus. Öffnen Sie das Zuschneidewerkzeug. Suchen Sie nun nach den Griffen des Bilds und ändern Sie die Größe, um einen extremen Zuschneideeffekt zu erzielen , und ziehen Sie das Bild hin und her , um Ihre Stelle zu finden Hier sind ein paar Tipps für diesen Zuschnitt. Sie müssen nicht unbedingt alle Seiten hervorragend beschneiden. Sie können nur eine Seite des Gesichts oder eines Objekts ausblenden. Das Ziel des extremen Zuschneidens besteht darin, ein Mysterium zu erzeugen , indem Teile des Motivs versteckt oder ein kleiner Ausschnitt des gesamten Bildes ausgewählt und die Geschichte nur durch diesen Ausschnitt erzählt wird. In diesem Fall bevorzuge ich es, die Linienphase zu zentrieren. Das funktioniert besser mit Layouts mit geteiltem Bildschirm wie diesem. Wenn ich ein Layout mit voller Breite verwenden würde, würde Side Crop vielleicht besser passen. Noch ein Tipp: Wenn Sie eine Person oder ein Bild ausschneiden, muss dies an den Rändern des Rahmens geschehen Wenn du ein Bild zuschneidest und es von den Rändern entfernt platzierst, dann funktioniert dieser Trick nicht Sie erhalten tatsächlich ein sehr seltsames Ergebnis. Dies ist nur ein seltsam zugeschnittenes Bild , das auf der Leinwand platziert wird Denken Sie daran, was ich zuvor gesagt habe, ein Publikum muss sich fragen, was hinter den Grenzen liegt Die Tatsache, nach der wir streben, ist eigentlich so, als würde man durch ein Fenster schauen. Es ist also nicht so, dass das Bild ausgeschnitten ist, sondern das ist alles, was wir durch das Fenster sehen können Wenn das Bild an den Rändern beschnitten wird, kann das Publikum spüren , dass das Bild seine Grenzen überschreitet Und genau das ist die visuelle Neugier, die Sie hier erzeugen. Okay. Nun zu den weichen Früchten, auch das ist ganz einfach. Was wir tun müssen, ist ein weißes, verblassendes Rechteck am Bildrand anzubringen , sodass der linke Rand des Fotos am letzten Rand geglättet wird Dies geschieht mit einer Verlaufsfüllung. Zeichne ein Rechteck. Gehe zur Füllung dieses Rechtecks. unter diesen winzigen Feldern Wählen Sie unter diesen winzigen Feldern das Feld mit der Aufschrift Gradient aus. Linear, radial, eckig, und Diamant. Dies sind alles Gradientenfüllungen. Sie werden feststellen, dass die Füllung des Rechtecks oben mit einer Farbe beginnt und unten zu einer anderen Farbe übergeht Wir möchten, dass es weiß ist. Im Farbwähler haben wir zwei Farben, haben wir zwei Farben, Start- und die Endfarbe. Das zeigt dasselbe Wir wollen, dass die Startfarbe weiß mit einer Opazität von 100 und das Ende wieder weiß ist, aber mit einer Opazität von 0%, also transparent Dadurch wird dann dieser Verblassungseffekt erzeugt. Das hier ist eine Startfarbe. Ziehen Sie auf der Farbkarte den Punkt in die obere linke Ecke , da sich dort das Weiß befindet. Wenn Sie versehentlich auf diese Verlaufslinie klicken, ändert sich die Position, an der die Farben beginnen und enden Ziehen Sie sie einfach zurück zu ihren Ecken. Der zusätzliche Stopp kann von hier entfernt werden. Mach dasselbe mit der Endfarbe. S. Ändern Sie die Deckkraft für die Endfarbe auf 0%. Jetzt haben wir eine Farbverlaufsfüllung mit verblassendem Weiß. Aber das ist eine falsche Richtung. Wir wollen, dass es von links beginnt und rechts verblasst. Um die Richtung zu ändern, kehren Sie zum Verlaufswerkzeug zurück und klicken Sie auf das kleine Symbol mit der Aufschrift Farbverlauf drehen. Klicken Sie ein paar Mal darauf bis Sie die gewünschte Richtung erhalten. Wir brauchen 100% Weiß, damit es am linken Rand beginnt und dann nach rechts auf 0% abnimmt. Jetzt haben wir die richtige Richtung der Farbverläufe. Jetzt positionieren wir diese Füllung genau am Bildrand , wo sie auf einen weißen Hintergrund trifft Und da haben wir unsere weiche Ernte. Sie können diese Farbverlaufsfüllung auch dehnen , um das Schicksal flüssiger zu gestalten. Wie Sie sehen können, ist der Übergang hier etwas scharf. Wenn Sie die Verlaufsfüllung vergrößern, verteilt sie sich gleichmäßiger und macht Übergang glatter und natürlicher Je nach Bild reicht das manchmal aus, reicht das manchmal aus, aber manchmal kommt es immer noch zu einem etwas abrupten Übergang wie diesem In solchen Fällen dupliziere ich die Verlaufsfüllung noch zweimal, sodass ich insgesamt drei Felder habe Sie können sehen, wie es sich bereits verbessert hat, aber wir können noch ein bisschen mehr tun. Sie können jedes Rechteck nehmen und es verkleinern oder erweitern, sodass im Grunde drei Felder mit drei verschiedenen Breiten erstellen mit drei verschiedenen Breiten Auf diese Weise haben Sie etwas mehr Kontrolle über das Korrigieren scharfer Übergänge Hier gibt es keine genaue Rolle. Sie spielen im Grunde mit ihrer Positionierung und Größe, bis Sie den idealen Punkt für den Übergang gefunden haben. Die Wahl eines Bildes ist ebenfalls wichtig, einige Bilder funktionieren besser als andere. Bei weißem Softcrop sollten Sie sich für ein Bild mit hellerem Hintergrund entscheiden . Ein Tageslichthimmel im Hintergrund ist beispielsweise ein guter Übergang. Auf dunklen Hintergründen ist der Weißübergang nicht so effektiv. Sie sehen hier, dass es sich unnatürlich anfühlt. Ein schwarzer Hintergrund und Black Fade machen hier viel bessere Arbeit, wie Sie sehen können Die ideale Lösung für einen Hintergrund wie diesen wäre jedoch, eine Farbe am Bildrand auszuwählen Bildrand und diese als Hintergrund für diese Überblendung zu verwenden. Lassen Sie uns das an diesem Beispiel machen. Hier ist ein cooler Figma-Trick, in Zukunft als nützlich erweisen kann Klicken Sie mit der rechten Maustaste auf das Bild und klicken Sie auf Horizontal spiegeln. Es spiegelt im Grunde das Bild wider. Das ist oft sehr praktisch. Wenn ich zum Beispiel einen Inhalt auf der linken Seite platzieren möchte , das Bild aber ein Modell auf der linken Seite und einen leeren Bereich auf der rechten Seite hat , kann ich es rückgängig machen und fertig. Zuerst müssen wir eine Farbe aus dem Sand nehmen und sie als unsere Farbe für den Hintergrund und den Farbverlauf verwenden unsere Farbe für den Hintergrund und den . Wählen Sie den Rahmen aus. Klicken Sie auf den Hintergrund und probieren Sie dann das allerletzte Farbpixel des Bildes aus. Zoomen Sie ganz nah heran, um einen besseren Überblick zu erhalten , und achten Sie hier auf den Pixelzoom. Dies zeigt, welches Pixel genau abgetastet wird. Der Grund, warum wir das letzte Pixel auswählen, besteht darin, einen möglichst glatten Übergang zwischen dem Bild und dem Hintergrund ohne die Verlaufsfüllung Jetzt verwenden wir genau dieselbe Farbe, um eine Verlaufsfüllung zu erstellen. Kopieren Sie den Hex-Code der Farbe aus dem Hintergrund und fügen Sie ihn als Start- und Endfarbe in die Verlaufsfüllung ein. Ändern Sie die Deckkraft für die Handfarbe auf 0%. Nun wenden Sie diese Zuschnitte entsprechend auf jedes der Frames an und reichen Sie dann Ihre Ergebnisse in der nachfolgenden Aufgabe ein, und ich werde sie mir ansehen Wie Sie feststellen, habe ich das Tutorial zum Strecken von Zuschneiden und Stretchen von Fotos wahrscheinlich nicht in dieses Video aufgenommen , aber ich habe im fortgeschrittenen Teil dieses Abschnitts ein Photoshop-Tutorial eingerichtet, das Sie lernen und üben können , wenn Sie diesen Kurs abgeschlossen haben, da Sie es im Moment nicht wirklich benötigen. Es ist nicht unbedingt notwendig, es zu wissen, aber wenn Sie den Kurs abgeschlossen und dieses Hauptmaterial durchgehen können, dann schauen Sie haben und dieses Hauptmaterial durchgehen können, dann schauen Sie es sich auf jeden Fall an und geben Sie ihm eine. 36. Fotos: Regel der drittEL: Haben Sie schon einmal bemerkt, wie in Filmen Schauspieler oft abseits der Mitte im Rahmen positioniert sind? Nachdem Sie diese gelernt haben, werden Sie nie in der Lage sein, nicht zu bemerken, und Sie werden davon besessen sein Jedes Mal, wenn Sie einen Film sehen, verwenden Filmemacher und Fotografen eine Technik namens Rule of Thirds, um etwas visuelles Interesse hinzuzufügen auf den Schuss. Es geht so. Wenn Sie einen Bildschirm in drei gleiche Teile teilen, sowohl vertikal als auch horizontal, wird der Schnittpunkt dieser Linien die visuelle in interessantesten Stellen, um Ihr Motiv zu platzieren . Wenn das Objekt groß ist, wie Angelina Jolie hier, als Sie sie über die gesamte vertikale Linie platzieren würden, und wenn es sich um ein Bild außerhalb der Landschaft handelt, dann positionieren Sie den Horizont auf einer der horizontalen Linien. Ein Thema in die Schuldenstelle zu stellen, ist etwas, das erwartet wird. Es ist symmetrisch hat den gleichen Raum um ihn herum. Es ist sicher und komfortabel. Das ist auch, was ein Nicht-Fotograf normalerweise tun würde oder ein Nicht-Designer. Sie würden eine Kamera greifen und direkt auf das Motiv zeigen, und das ist in der Regel langweilig. Aber wenn Sie Ihr Motiv aus der Mitte setzen, entsteht Spannung. Es ist unerwartet, sieht aber absichtlich aus, als gäbe es einen bestimmten verborgenen Grund, und wir wollen wissen, was es ist. Eine Kamera-App auf Ihrem Handy hat wahrscheinlich diese Option. Ich weiß es. Ich habe uns gefunden. Schalten Sie es ein und probieren Sie es aus. Ihre Fotos werden dadurch deutlich verbessern, um diesen Punkt zu demonstrieren, lassen Sie uns einen Blick auf dieses einfache Beispiel werfen. Wir haben eine Schachtel, die in der toten Mitte von der Leinwand platziert wird. Der Abstand zwischen der Adresse der Kameras und der Box ist auf allen Seiten identisch. Das Ergebnis ist symmetrisches Briefpapier und box es in Ruhe. Es bewegt sich nicht. Wenn wir die Box ein wenig aus der Mitte bewegen, fügt sie sofort Spannung hinzu. Aber das ist keine gute Art von Spannung, denn es sieht so aus, als ob die Box in der Mitte sein soll. Aber das ist es nicht. Das sieht aus wie eine jemals, die ein Designer Miskell aß oder nicht bemerkt hat. Aber wenn wir die Box ziemlich weit weg von der Mitte bewegen, als das Ergebnis absichtlich aussieht, es nicht so aus, als wäre es gedacht, um in der Mitte zu sein, sondern dass es absichtlich außerhalb der Eltern ist. Dies erzeugt eine gute Art von Spannung, die als visuelles Interesse gibt. Die Regel von Dritteln ist in einem Gesetz, es ist eher eine weiche Richtlinie. Sie können manchmal ziemlich weit von diesen Schnittpunkten gehen. Diese Regel ist super praktisch, wenn Sie mit Gesichtern arbeiten. Werfen Sie einen Blick auf dieses Beispiel. Das Gesicht von diesem Modell ist in der Mitte, außerhalb des Rahmens, und so scheint es, als wäre er zu tief im Rahmen. Der leere Raum über seiner Hand drückt ihn irgendwie nach unten. Um dies zu beheben, haben wir das Modell auf einen von den oberen Schnittpunkten verschoben. Verwenden Sie Immer die Augen, da Ihr Führungseis der Mittelpunkt eines menschlichen Gesichts ist. Da schauen wir uns immer zuerst an. Jetzt ist das viel besseres Aussehen, und der Raum über ihm ist klein genug, so dass es nicht auf ihn drückt. Und noch eine tolle Nachricht. Dies funktioniert unabhängig von der Größe des Gesichts. Die Person kann weit im Rahmen oder in extremer Nahaufnahme sein. Solange wir diese Augen an diesem Schnittpunkt ausgerichtet halten, wird es immer korrekt aussehen. Sehen Sie, was passiert, wenn wir hineinzoomen. Sieht immer noch toll aus. Lassen Sie uns hineinzoomen mehr gut aussehen. Kein Zweifel, ein letztes Mal sieht immer noch gut aus. Egal, wie weit wieder in. Dies ist die Schönheit der Herrschaft von Dritteln. Es ist eine super einfache Richtlinie, kann aber Fotos viel besser aussehen lassen. Jetzt. Die Regel von Dritteln ist eine weiche Richtlinie, und sie hat Ausnahmen. Es gibt viele Fälle, in denen Sie bessere Ergebnisse haben werden. Wenn Sie diese Regel für ein Bild wie dieses nicht befolgen, ist die Mitte die beste Position, und Sie sollten nicht die Regel von Dritteln verwenden. Warum? Denn der zentrale Gesichtspunkt ist hier die Absicht. Das Foto ist in der Perspektive der ersten Person. Wir sehen den Blick aus den Augen des Kerls und aus seiner Perspektive. Offensichtlich ist die natürlichste Platzierung Zentrum, weil es für ihn keinen Sinn machen würde, die Dinge seitwärts zu sehen . Es gibt weitere Beispiele dafür, dass die zentrale Position die richtige Wahl ist. beispielsweise Wennbeispielsweisedie Platzierung des Motivs und andere Elemente im Bild tatsächlich das visuelle Interesse in der Mitte erzeugen , wird die Straße an der gelben Straßenmarkierung in der Mitte der Lücke zwischen den Palmen gekürzt. Alles, was visuelles Interesse in der Mitte schafft. diesen herrschenden Geist beibehalten, können Sie gute, bessere Fotos aussuchen , wenn Sie nach ihnen auf Fotoseiten suchen, zum Beispiel, wenn Sie nach einem Foto für einen geteilten Bildschirm suchen, wie in unserer Übung, dann in diese Fälle, ein Foto mit dem Modell, das in der Mitte ist, ist eine bessere Wahl, weil in Fällen eines geteilten Bildschirms, erhalten Sie diese schmale porträtierten Modus aus dem Foto und in den schmalen Fotos. Es ist nicht die beste Option, um die Regel der Drittel zu verwenden. Aber wenn Sie nach einem Hintergrundfoto suchen, besonders einem, auf dem Sie einen Inhalt platzieren möchten, dann ist die Ausrichtung außerhalb der Mitte die beste Wette. Auf diese Weise werden Sie durch die Fotos schauen und Sie werden eine Weile finden, wo es genug Platz für Sie gibt , um ein Thema in Abteilungen eines der Linien von der Regel der Drittel zu bewegen. 37. Fotos: Unbox sie!: Fotos kommen immer in einer Box. Das ist das Originalformat, wenn Sie von Ihrer Kamera exportiert oder auch wenn Sie von unserer Website heruntergeladen haben. Wenn Sie ein Box-Bild aufnehmen, legen Sie es direkt auf die Leinwand, es ist oft nicht sehr beeindruckend. Es ist ein separates Objekt, das nicht mit dem Raum zusammenführt, und es erstellt zusätzliche Boxen um ihn herum. Sie bemerken dies nicht bewusst über unsere Augen tun, und sie müssen diese zusätzlichen Boxen verarbeiten, die zwischen dem Bild und der Adresse aus der Leinwand erstellt wurden . Lassen Sie uns ein echtes Beispiel aus einem meiner Zielseiten-Projekte verwenden, die für eine Zahnklinik getan haben . Ich habe dieses genaue Bild für dieses Projekt verwendet, und hier habe ich angefangen. Wie können wir also einen Abschnitt mit einem Bild wie diesem verbessern? Wir müssen außerhalb der Box denken, das Bild buchstäblich entpacken, indem wir den Hintergrund vollständig entfernen, sie auf den unteren rechten Rand legen, und jetzt, anstatt es ein langweiliges Foto auf der Seite zu sein, Dieses Modell kommt irgendwie aus der Seite. Der weiße Hintergrund funktioniert nicht wirklich mit diesem Bild. Kannst du raten, warum? Weil das Modell ein weißes Oberteil trägt. Es macht einen schrecklichen Kontrast, und wenn nicht für ihre roten Haare, würde sie verblassen. Da das Bild keinen Hintergrund mehr hat, haben wir mehr Freiheit, unsere eigene Hintergrundfarbe auf die gesamte Leinwand zu setzen. Dies gibt uns mehr Freiheit zu experimentieren und interessante Farbkombinationen zu wählen und das Design spannender zu machen . Diese Farbe ergänzt ihr rotes Haar, den Kontrast gut, und machen eine sehr gute Kombination. Auch diese bläuliche Farbe ist eine richtige Wahl für das Thema Zahnmedizin. Blaue Farben, Fillmore Sauber und Sanitär. Gutes Gefühl für die Zahnmedizin und viele andere Farben zu schaffen wäre eine rote Flagge für eine Zahnklinik wie rot und rosa. Das würde uns an Blut erinnern, kein gutes Gefühl. Oft füge ich gerne einen Schatten hinter dem Motto hinzu. Das lässt sie so aussehen, als würde sie vor einer Wand stehen. Er würde dem Raum mehr Dimension verleihen. Es gibt jetzt zwei separate Ebenen. Da ist eine Wand, und dann steht ein Modell davor. Sie müssen nicht unbedingt einen Schatten auftragen. Ohne sie können Sie immer noch gute Ergebnisse erzielen. Manchmal wird es diesmal nicht mal Borg. Es funktioniert und macht ein sehr gutes Ergebnis, weil es ein direkter Schuss aus dem Modell ist und sie kann leicht vor der Wand stehen. Es ist die Schlagzeile. Siehst du, was ich mit dem Typ gemacht habe? Es ist schwer, breit und Großbuchstaben. Das ist, um ihren Kontext von dieser Seite zu entsprechen. Breite gerade Zähne am schwarzen Skinny Telefon wäre hier nicht so effektiv, oder? Wir sollten immer das Thema im Auge behalten, wenn alles, was wir auf der Seite tun, schafft Assoziationen mit Menschen. Die Anrufe wurden verwendet Formen, die wir wählen alle, die bestimmte Gefühle in Menschen zu schaffen , genau wie das, was wir in der Typographie Lektion über Taipeh Persönlichkeiten diskutiert. Dies ist entworfen Denken, und es ist eine sehr wichtige Skala in der Designer-Fähigkeiten. Okay, jetzt fügen Sie den Rest der Kopie in der Navigationsleiste hinzu, und wir haben einen schönen Heldenbereich für eine Zahnklinik. Merkst du, warum ich den Knopf orange gemacht habe? Weil ich es aus den Haaren des Mädchens probiert habe. Es ist nicht die genaue Farbe. Wie Sie sehen können, habe ich auf diese Weise Feinabstimmung gemacht. Es ist lebendiger und geeignet für moderne Website-Unboxing. Das Bild hat uns mehr Freiheit und Kontrolle über unsere Komposition gegeben, es hat die Tiefe hinzugefügt. Jedes Objekt scheint in einem gemeinsamen Raum zu existieren, aber auf verschiedenen Ebenen, genau wie in der realen Welt. Diese hat als eine sehr gut aussehende und interessante Helden-Sektion gegeben. Sie müssen nicht unbedingt ein ganzes Bild entpacken. Sie können ein spannendes Ergebnis erzielen, indem Sie einen kleinen Teil des Objekts aus dem Rahmen nehmen. Zum Beispiel, das ist, was ich für diese Website getan habe. Auf einem anderen Projekt für eine Dachfirma. Ich wollte das Dach irgendwie betonen. Aber das Layout ist nicht wirklich schneiden den Senf. Das Dach ist im Design verloren, also nahm ich die Spitze vom Dach und führe es außerhalb des Rahmens. Jetzt hat das Dach einen Rampenlicht gewonnen. Es ist ein Punkt von Interesse, plus die Bilder und als separate Sache mehr. Es interagiert mit der Leinwand und anderen Elementen darauf. Das ist alles, was man braucht, um von seinem Rahmen zu befreien und abzubilden und es zum Leben zu erwecken. Diesen Effekt können wir im Fig MMA nicht wirklich erzeugen. Wir werden definitiv einen Fotoshop für diese im fortgeschrittenen Teil der Partituren benötigen. Ich habe ein Fotoshop-Tutorial und eine Aufgabe, wie man diesen Effekt erreicht und wie man ein Motiv oder ein Modell aus dem Bild ausschneidet und den Hintergrund daraus entfernt. Es ist kein wesentlicher Effekt, aber zu wissen, wie dieser Effekt funktioniert, öffnet Ihre Optionen im Design auf einmal. Sie entfernen den Hintergrund aus dem Betreff. Es eröffnet viele verschiedene Gestaltungsmöglichkeiten, genau wie das, was hier passiert ist, denn jetzt können wir den Hintergrund ändern. Wir können uns bewegen, sagen wir Schlagzeilen und Steuern hinter Objekten, und wir können ein bisschen mehr dreidimensionale Schichten in unseren Designs erstellen. Also, wenn Sie den fortgeschrittenen Teil von diesem Kurs erreichen, verpassen Sie auf jeden Fall nicht dieses Tutorial und üben Sie es, weil es wirklich nützlich sein wird wenn Sie anfangen zu entwerfen. 38. Fotos: Fotos wie ein Profi auswählen: Diese Fototechniken sind nutzlos, wenn Sie nicht wissen, wie Sie die richtigen Fotos für Ihre Designs auswählen sollen . In dieser Lektion werde ich dir beibringen, wie man Fotos wie Pro auswählt. Die Fotos, die du für deine Projekte verwenden wirst, werden Stock-Fotos genannt Du lädst sie von kostenlosen Stock-Websites wie Osplash und kostenpflichtigen Websites wie I Stock herunter Osplash und kostenpflichtigen Websites wie I Stock Nun, der große Teil der Stock-Fotos ist einfach schrecklich. Ich bin sicher, dass Sie Websites besucht haben , die solche Fotos verwenden Was genau ist das Problem mit diesem Foto? Die Flaschen sehen gut aus. Sie sind gut angezogen, sie lächeln. Das Foto ist von guter Qualität und wurde in einer professionellen Umgebung aufgenommen. Alles auf dem Papier scheint korrekt zu sein, aber das Foto ist immer noch schwach. Warum ist das so? Weil es eindeutig falsch ist. Es ist klar, dass dies keine echten Geschäftsleute sind. Es sind Models, die eine dumme Pose mit einem falschen Lächeln machen. Jetzt werden alle professionellen Fotos so gemacht, ein Model, das auf dem Foto eine bestimmte Rolle spielt, Kleidung trägt, die nicht ihnen gehört, ein bestimmtes Gefühl porträtiert und dafür bezahlt wird Und das ist in Ordnung. Aber wenn das Foto gut gemacht ist, sollten wir nicht erkennen können, was in der Realität passiert. Stell es dir wie Filme vor. Wir wissen, dass dies Schauspieler sind. Wir wissen, dass sie 1912 nicht wirklich auf einem Schiff standen. Sie tragen Kostüme und spielen eine Szene. Wann ein Film gedreht wird, nun ja, wir können es nicht sagen. Wir vergessen, dass es tatsächlich falsch ist und dass diese Leute nur so tun, als ob. Das Gleiche passiert hier. Sie tragen Kostüme und tun so, als ob. Aber im Gegensatz zu guten Schauspielern sind diese Typen schlecht darin. Wissen Sie, was passiert, wenn Sie ein Foto verwenden, das falsch aussieht Sie senden eine sehr schlechte Botschaft an Ihr Publikum. Wenn das Foto falsch und vorgetäuscht ist, wird sich die Website falsch und vorgetäuscht anfühlen Keine echten Menschen hinter dieser Website. Wenn ich sie anrufe oder eine E-Mail sende, erhalte ich keine Antwort von echten Menschen oder schlimmer noch, es könnte sich sogar um von echten Menschen oder schlimmer noch, eine Betrugswebsite handeln. Es erfordert ein wenig Übung, gute von schlechten Archivfotos zu unterscheiden, aber hier sind drei Fragen sich stellen sollten, wenn Sie sich Fotos ansehen. Ist die Szene echt? Würde so etwas in einem realen Szenario passieren? Würden also Leute, die im Büro arbeiten, vor einer Kamera stehen und sich so an den Händen halten? Wenn Sie jemals in der Unternehmenszentrale gearbeitet haben, wissen Sie, dass das Letzte, was Sie tun möchten, darin besteht, mit Ihren Kollegen die Hände zu halten und vor einer Kamera zu stehen Die Antwort lautet also eindeutig nein. Fälschung oder dieses Foto zum Beispiel, was denkst du? Ist diese Szene echt? Offensichtlich nicht. Zunächst einmal ist das Gekritzel auf dem Glas ein kompletter Es sind zufällige Diagramme und Pfeile. Es ergibt keinen Sinn. Was ist mit der Zwischenablage Es ist so eine klischeehafte Art, eine Büroszene zu beschreiben. Dieses Foto ist dagegen eine andere Geschichte. Es sieht aus wie ein realistisches Treffen und die Leute tragen Kleidung, die man heute tatsächlich in modernen Büros sehen würde. Sie reden miteinander, was in Besprechungen der Fall ist, was in Besprechungen der Fall ist halten sich nicht an den Händen und starren auf eine Glastafel mit unsinnigen Kritzeleien Falsch Die zweite Methode, ein schlechtes Stockfoto zu erkennen, sind kitschige falsche Emotionen Das sieht nicht nach einem echten menschlichen Gefühl der Aufregung aus Die Szene auf diesem Foto ist auch nicht annähernd der realen Welt ähnlich. Haben Sie jemals falsches Geld in einer Hand und eine Lupe in der anderen Hand gehalten einer Hand und eine Lupe in der anderen Oder dieser Typ, der sich einfach so über falsche gute Nachrichten auf seinem gefälschten Laptop freut . Schön trocken, Kumpel. echte menschliche Gefühle Es ist schwierig, echte menschliche Gefühle vor einer Kamera in einem Fotostudio darzustellen. Deshalb machen so viele dieser Models einen schrecklichen Job. Belohnen Sie ihre schlechte Arbeit nicht indem Sie ihre Fotos in Ihrem Projekt verwenden. Und ruinieren Sie Ihre Designs auch nicht mit solchen Fotos. Es ist nicht schwer zu sagen, ob die Schauspielerei echt aussieht. So sieht echte Aufregung aus. Das nicht. Selbst subtile Emotionen wie ein normales Lächeln können sehr unnatürlich und falsch aussehen, und wenn es richtig gemacht wird, sieht es echt und einladend Fragen Sie sich, ob sich die Emotionen real anfühlen, Sie werden es wahrscheinlich leicht erkennen können Abgesehen davon, was Models auf dem Foto machen, kannst du auch leicht ein schlechtes Stockfoto von einem guten unterscheiden, indem du auf das Set-Design achtest. Mit Set meine ich alles außer dem Model, von dem das Foto aufgenommen wurde, Objekten auf der Aufnahme und sogar der Kleidung, die das Model trägt. Viele Stock-Fotos sind oft ziemlich alt. Sie wurden vor langer Zeit aufgenommen, werden aber immer noch verkauft und auf Websites verwendet. Sie möchten wirklich kein zehn Jahre altes Foto für eine moderne Technologie-Startup-Website verwenden zehn Jahre altes Foto für eine . auf Kleidung achten, können Sie veraltete Fotos leicht identifizieren. Dafür musst du kein Fashionista sein. Benutze deinen gesunden Menschenverstand. Es ist nicht schwer zu sagen, dass kein Mädchen ihrem Alter heute so etwas tragen würde. Das heißt nicht wirklich, dass das Foto vor langer Zeit aufgenommen wurde. Manchmal sind Fotos neu, aber Fotografen verwenden dieselbe Garderobe wieder. Fotostudios retten ihr Kostüm aus den Dreharbeiten und verwenden es Jahre später für andere Modelle und neue Szenarien wieder. Kleidung, die nicht passt ein klarer Hinweis darauf, dass die Szene falsch ist, auch wenn sie modern war. Wie dieses arme Mädchen hier. Fotostudios werden auch versuchen , neutrale Kleidung zu verwenden, die nach Jahren wiederverwendet werden kann die nach Jahren wiederverwendet werden damit sie nicht jedes Jahr eine neue Garderobe kaufen müssen Sie werden also diese sehr gemischte Kleidung ohne jegliche Persönlichkeit sehen Kleidung ohne jegliche Persönlichkeit Das ist auch ein weiterer Indikator. Aber ich glaube, dieses Foto hat noch einen anderen klaren Rand Computerbildschirms. In gut gestalteten Sets wie hier werden Sie Menschen sehen, die moderne Kleidung tragen und oft sehr gut zu ihrer Persönlichkeit passen. Sie sehen aus wie echte Menschen, nicht wie eine Computersimulation. Achte auf die Objekte im Set. Fragen Sie sich, ob sie realistisch aussehen. Wie diese Lupe und Falschgeld, nichts sagt besser über Fake Das falsche Geld und halte dich von allem Abstrakten fern. Zum Beispiel Glühbirnen. Gott, ich hasse Glühbirnen. Die Leute lieben es, eine verdammte Glühbirne zu benutzen, um Dinge wie Ideen und Kreativität oder Denken darzustellen Wenn sie überbeansprucht wird, wird mir übel, wenn ich sie sehe. Als ich einmal an einer sehr hochwertigen Website gearbeitet habe, , mir mein Kunde als Vorschlag eine Glühbirne geschickt als Hintergrund für eine Website verwenden Ich hätte fast auf dem Computerbildschirm gebellt. Abstrakte Objekte sind generell eine schlechte Idee. Die meisten von ihnen sehen genau so aus. Abstrakt, verwirrend und oft klischeehaft, da sie zu oft benutzt werden. Ihr Design sollte dem Publikum ein Gefühl von Verständnis und Alles Abstrakte wird das Gegenteil bewirken. Klischeehafte Puzzleteile und Wolken über den Köpfen der Menschen. 39. Fotos: Wo Sie Fotos finden können: In Ordnung, also wo finde ich gute Fotos? Es gibt kostenlose und kostenpflichtige Quellen. Meine bevorzugte kostenlose Aktienseite ist unsplash.com. Sie haben das bereits in den Aufgaben verwendet. Es gibt viele Websites , die kostenlose Fotos anbieten, aber sie sind nicht vollständig kostenlos. Sie enthalten einige Urheberrechtsregeln, z. B. müssen Sie den Autor angeben oder nur für den persönlichen Gebrauch, aber nicht für kommerzielle Zwecke. Unsplash ist wirklich kostenlos. Du kannst mit den Fotos machen, was du willst, und du musst den Autor nicht Fotos auf unsplash.com sehen sehr realistisch aus. Oft werden sie von einzelnen Fotografen auf der ganzen Welt eingereicht einzelnen Fotografen auf der ganzen Welt und nicht von Stock-Fotostudios Aus diesem Grund erhalten Sie sehr realistische Szenarien und Menschen, die echt und real aussehen. Nun, zumindest die meiste Zeit. Eine weitere anständige kostenlose Website , die ich benutze, ist packsals.com. Pack Sales ist ebenfalls völlig kostenlos , ohne Einschränkungen. Das Konzept und die Fotos sind Osplash sehr ähnlich, aber du bekommst hier etwas mehr Abwechslung Kostenlose Fotoseiten haben jedoch einen Nachteil. Jeder benutzt sie. Und ein besonders gut aussehendes Foto wird von vielen Menschen auf der ganzen Welt verwendet werden. Die Fotos, die Sie in Ihren Webdesigns verwenden, können also problemlos von vielen anderen Webdesignern für ihre Websites verwendet werden . Irgendwann, wenn Sie sich viele dieser kostenlosen Fotos von dieser kostenlosen Fotos von Onslash oder Pack Seles und anderen Orten ansehen, Sie sie auf vielen verschiedenen Websites wiedererkennen Und wenn das Publikum sieht dieses Foto auch auf anderen Websites verwendet wird, verbilligt das die Website irgendwie . Es ist nicht mehr so einzigartig. Das Gleiche gilt zwar auch für kostenpflichtige Stock-Websites, aber weil sie bezahlt werden, deutlich weniger Designer werden deutlich weniger Designer diese Fotos für ihre Websites verwenden. Außerdem bieten die Stock-Websites eine viel größere Auswahl an Fotos als die kostenlosen Websites. Aus diesem Grund würde ich Ihnen bei gut bezahlten Projekten auf jeden Fall empfehlen, kostenpflichtige Quellen anstelle von kostenlosen Fotos zu verwenden. Mein Favorit unter den bezahlten Aktienseiten ist eStock. Sie haben eines der hochwertigsten Fotos mit realistisch aussehenden Modellen und Szenen Aber natürlich bekommt man auch hier falsch aussehende Fotos. Das ist unvermeidlich, solange die Leute diesen Mist kaufen. Ich kann nicht wirklich eine genaue Zahl angeben wie viel ein Foto auf einer Archivseite kostet, weil alles davon abhängt, wie viele Sie kaufen, Abonnementplänen und manchmal vom Bild selbst EyeStoc ist etwas teurer. Ein Bild hier kostet 9-24 $. Aber mit Paketen und monatlichen Abonnements können Sie ziemlich gute Rabatte erhalten Eine weitere gut bezahlte Quelle ist Shutter Stock, und es ist viel billiger als ETOC Mit den Prepaid-Tarifen erhalten Sie ein Bild für maximal 10 US-Dollar Prepaid bedeutet, ein Paket wie 50$ für fünf Bilder zu kaufen. Für Vielnutzer können Sie ein monatliches Abonnement abschließen. Sie erhalten eine bestimmte Anzahl kostenloser Bilder pro Monat. Und das Ganze auf 3$ pro Bild und weniger. Eine der günstigsten, aber anständigsten Optionen ist bigstok.com. Hier sollte das Maximum bei etwa 3$ pro Bild Im Gegensatz zu anderen bietet Big Stock eine kostenlose 7-Tage-Testversion an, mit der Sie während dieser Testphase 35 Bilder kostenlos erhalten Sie während dieser Testphase 35 Bilder kostenlos Sie jedoch daran, dass sie nach Kreditkartendaten fragen und Sie diese vor dem letzten Tag stornieren müssen , sonst wird Ihnen eine Gebühr berechnet. Genießen Sie all diese Preisinformationen mit Vorsicht, da es sich um unabhängige Websites handelt unabhängige Websites und deren Preise sich sehr oft ändern können. Und es hängt auch von dem Land ab, aus dem Sie kommen oder in dem Sie die Preise aufgrund der Steuern und der Mehrwertsteuer überprüfen. Aber im Großen und Ganzen funktioniert die Preisgestaltung für diese drei Websites und viele andere kostenpflichtige Aktienseiten auf Ich habe die Links zu diesen Websites, sowohl kostenlos als auch kostenpflichtig und ein bisschen mehr, auf der Ressourcenseite platziert, sodass Sie sie sich gerne ansehen können 40. Aufgabe: Suchen von Fotos: Lass uns jetzt eine lustige Übung machen , bei der du nach Stock-Fotos suchst. In dieser Figma-Datei habe ich drei Frames mit Überschriften und Beschreibungen von drei Unternehmen vorbereitet drei Frames mit Überschriften und Beschreibungen von drei Unternehmen Ich habe tatsächlich Text von echten Unternehmen und ihren Ich möchte, dass du für jeden Frame ein passendes Foto findest. Stell dir vor, du gestaltest ihre Homepage und benötigst ein Foto für den Heldenbereich Sie entwerfen in dieser Aufgabe nicht, also keine Gedanken über das Format Es spielt keine Rolle, ob das Bild als geteilter Bildschirm oder auf andere Weise im Hintergrund angezeigt wird. Das Ziel ist nur, ein Bild mit Bedacht auszuwählen. Sie können Fotos von jeder dieser kostenlosen oder kostenpflichtigen Fotoseiten auswählen , sei es Splash, Paxl, I Stock oder eine andere Das richtige Foto für dein Projekt zu finden, nimmt tatsächlich Zeit in Anspruch, und manchmal musst du auf mehreren Websites nachschauen , um es wirklich zu Manchmal kann ich ein paar Stunden damit verbringen nur für einen Heldenbereich nach dem richtigen Foto zu suchen. Sie können auch kostenpflichtige Websites verwenden und dort einfach Beispiele abrufen, ohne dafür zu bezahlen. Sie können ein Bild mit Wasserzeichen scannen oder herunterladen. Big Stock hat zum Beispiel einen Download-Vorschau-Link und Sie können dieses Beispielbild verwenden Sie sich keine Gedanken über die Qualität, das Format oder die Größe des Bildes, aber ich möchte, dass Sie nur Stock-Foto-Websites verwenden und nicht Google oder andere Orte, an denen strenge Urheberrechtsregeln für ihre Bilder z. B. Flimmern oder das Abrufen von Fotos von jemandem von Facebook Und ich möchte , dass du für jedes Foto, das du auswählst, erklärst, warum du das Foto ausgewählt hast So gewöhnen Sie sich an Design Thinking. Sie werden einen viel besseren Job machen und Ihre Arbeitgeber glücklicher haben , wenn Sie jede Ihrer Entscheidungen sorgfältig durchdenken. Ich führe hier ein Beispiel an. Der erste Schritt besteht darin, zu verstehen, worum es in dem Geschäft geht und was sie anbieten. Überlegen Sie sich dann, welche Art von Szene wir auf der Website platzieren möchten, wenn man das Geschäft und den Text berücksichtigt. Dieses Unternehmen hilft also anderen Unternehmen, die Zufriedenheit ihrer Mitarbeiter zu messen. Das gibt mir eine Vorstellung davon, dass es für diesen Rahmen gut funktionieren würde, zufriedene Mitarbeiter zu zeigen . Gehen wir zu unseren Websites und suchen wir zunächst buchstäblich nach glücklichen Mitarbeitern. Alle drei lieferten sehr unterschiedliche Ergebnisse. Und wie Sie sehen können, hat Shutterstock als kostenpflichtiges Unternehmen deutlich mehr Ergebnisse erzielt als Splash und Pixel Wenn Sie die Suche durchführen, experimentieren mit verschiedenen Keywords Manchmal funktionieren wörtliche Schlüsselausdrücke wie zufriedene Mitarbeiter, aber oft ist es besser, einzelne Keywords zu verwenden und zu kombinieren In diesem Fall möchte ich zum Beispiel, dass die Szene in einer Büroumgebung spielt Das ist ein schwieriges Schlüsselwort , das in der Szene vorhanden sein muss. Also kann ich einfach Office und dann einige sekundäre Stichwörter wie Lächeln, glücklich und so weiter verwenden dann einige sekundäre Stichwörter wie Lächeln, . Hier ist ein Pro Tepe. Wenn du ein Foto siehst, das die Qualität hat, die du magst, aber es ist immer noch nicht genau die richtige Szene oder das Model, finde heraus, wer der Mitwirkende ist und suche in seinen Unter dem Urheberrecht befindet sich ein Link des Mitwirkenden, also eines Fotografen oder also eines Fotografen oder Fotostudios, der dieses Foto auf die Website hochgeladen hat Wenn du auf diesen Link klickst, siehst du alle anderen Fotos von diesem Mitwirkenden Alle Stockseiten haben ihre eigenen Möglichkeiten, Fotos von Mitwirkenden anzuzeigen und zu erfahren, wo der Link zu finden ist, aber die meisten von ihnen tun Und ihre eigenen Möglichkeiten, die Bilder eines Mitwirkenden zu durchsuchen die Bilder eines Mitwirkenden zu durchsuchen Geben Sie einfach Ihr Schlüsselwort ein und das verfeinert die Ergebnisse auf den Fotos des Mitwirkenden Ohne diesen Trick müsste ich Tausende schrecklicher Fotos durchgehen Tausende schrecklicher Fotos durchgehen Dies ist eine ziemlich gute Option für glückliche Mitarbeiter. Laden Sie die Vorschau herunter und platzieren Sie sie dann einfach in der Figma-Datei Sie können einen Screenshot machen oder eine Download-Option verwenden , die auf der Website bereitgestellt wird. Das ist alles. Sie müssen nichts entwerfen. Lass es so wie es ist. Es zeigt glückliche Mitarbeiter, was das Ziel dieses Unternehmens ist. Das Foto ist modern, die Atmosphäre fühlt sich entspannt an, Lächeln wirkt echt und insgesamt, die Fotofilme warm und einladend Und fertig. Das ist deine Aufgabe. Es ist kein Design involviert. Hab Spaß. 41. 6 Design: Design ist wie magische Show. Es gibt Tricks, die eine Arbeit schön und aufregend aussehen lassen und etwas, wofür die Leute zahlen wollen , genau wie ein Zaubertrick. Gutes Design können Sie sich erstaunt fühlen. Aber sobald der Trick enthüllt ist , verstehen Sie, es ist eigentlich ziemlich einfach, und Sie beginnen zu erkennen, dass alte Designer die gleichen Tricks in den kommenden Videos verwenden . Ich werde Ihnen einige Design-Tricks beibringen, die Ihnen helfen, schöne und sehr interessante Wünsche wie Magie zu schaffen . 42. Design Kontrast: Werfen Sie einen Blick auf diese Seite. Dies ist ein sehr einfaches Design, aber sehr effektiv. Der Abstieg Trick, der stark in dieser Komposition verwendet wird, wird als Kontrast bezeichnet. Es ist dieser Kontrast zwischen der gigantischen Überschrift und dem kleineren Absatztext. Auch Contras. Zwischen der Schwere, aus der Überschrift und der Leichtigkeit aus dem Absatz Kontrast zwischen schwarzem Teil aus der Überschrift mit Blau und Kontrast zwischen dem Lebenshintergrund und dem großen blauen Knopf. Ich muss sagen, es ist ein wenig schlampig auf der Ausrichtung, obwohl der Kontrast sehr weit verbreitete Design-Trick ist. Es hilft uns auch, visuelle Hierarchie zwischen den Elementen zu schaffen, und es kann hauptsächlich auf drei Arten ausgedrückt werden. Kontrast in der Farbe Kontrast in der Größe groß gegen klein und dann Kontrast in Gewicht wie schwer vs Licht. Werfen wir einen Blick auf eine andere Website. Haben Sie bemerken, den Kontrast in der Farbe über Sie tun breit angerufen und Buch auf einer Braut roten Hintergrund, um ihn. Das ist ein Bulls, im Gegensatz dazu, sehen den Kontrast in Größe und Gewicht zwischen der Überschrift und dem Text. Oben und unten. Es Kontrast im Design erreicht zwei Dinge, Normalerweise zuerst, Normalerweise zuerst, es hilft uns, visuelle Hierarchie auf der Seite und zweitens schafft es Interesse. Setzen Sie zwei identische Quadrate zusammen, und es sagt nichts. Es ist langweilig, aber blasen Sie einen von ihnen auf extreme Größe im Vergleich, in diesem großen Kontrast zwischen ihnen schafft Interesse. Jetzt scheint es, als ob es eine Geschichte dahinter gibt oder einen Kontrast im Kragen schafft, und es wird sofort interessanter. Kontrast in der Farbe wird durch die Verwendung komplementärer Farben erzeugt. Violett und gelb. Hier sind komplementäre Farben, und nicht zuletzt können Sie Kontrast mit Gewicht erstellen. Also, wie würden Sie Gewicht Contras zwischen diesen Boxen erstellen, indem Sie das Gefühl auf einem von ihnen entfernen und leben es mit Kontur Strich Full Box fühlt sich schwerer und leere Box sieht leichter aus. Mal sehen, wie es in der Praxis funktioniert. Angenommen, wir arbeiten an einer Website für Fahrräder und wir entwerfen einen der Abschnitte. Der Kunde gab uns eine Überschrift, einen Textabsatz und ein Foto für eines ihrer Fahrräder. Sagen wir, wir wissen nicht, wo wir anfangen sollen, aber wir erinnern uns an diesen Kontrasttrick. Mal sehen, wie wir es benutzen können. Beginnen wir mit einem Kontrast des Gewichts. Was können wir suchen und was können wir Licht machen? Warum nicht die Überschrift gegen Absatz. Lassen Sie uns einen schönen Kontrast zwischen ihnen schaffen. Wir können die Überschrift extra fett und alle Großbuchstaben machen. Wir müssen hier nicht aufhören. Wir können tatsächlich erwarten Kontrast hinzufügen, sogar innerhalb der Überschrift. Ausgezeichnet. Dies hat es noch interessanter gemacht, da wir Kontraste auf die Elemente anwenden. Ihre bemerken, wie visuelle Hierarchie beginnt, Gestalt anzunehmen. Ok, als Nächstes. Lassen Sie uns den Größenkontrast machen. Lassen Sie uns den ersten Teil der Überschrift überdimensionieren und sehen, was passiert. Geh groß oder geh nach Hause. Richtig die Elemente ausgerichtet, in Ordnung. Es fängt an, Gestalt anzunehmen. Wir können es extreme Ernte verwenden, die wir bereits gelernt haben und einige Teile des Fahrrades ausschneiden . Es sieht gestern Abend ziemlich gut aus, aber am wenigsten haben wir Farbkontrast. Es gibt natürlich schon einen Farbkontrast, da der Hintergrund weiß ist, dunkle Steuer als dunkles Fahrrad. Kontrastieren Sie sehr gut damit, aber wir müssen dort nicht aufhören. Wir können eine zusätzliche Farbe in einem Teil der Überschrift hinzufügen, etwas, das gut mit dem dunklen Text schwächen wird einfach kontrastieren. Die Orange vom Fahrrad sitzen auf diese Weise werden zwei Vögel mit einem Stein töten, eine große Farbe Länder zwischen orange und dunkle Schlagzeile. Und natürlich wissen Sie bereits, dass sie die Farbe vom Fahrrad abtasten, hilft uns, das Design miteinander zu binden . Das ist alles, indem Sie eine einfache Kontrastrate anwenden, plus eine Foto-Propping-Technik. Wir gingen von hier zu diesem. Sie brauchen nicht einmal eine Design-Software dafür veranlassen dies in Power Point. Das ist mein Favorit. Gehen Sie zu Tricks im Design. Wenn Sie jemals Lager auf kämpfen mit Design aussehen interessant auf einige Kontrast, Star Beat Farbe Wade Größe, und ich garantiere Ihnen, es wird sofort Ihre Designs zu verbessern. 43. Design-Trick: Weißraum: Ist ein Poster aus der Werbekampagne für BMW-Ersatzteile. Da steht, BW statt BMW. Auf der Unterseite steht, Originalteile verwenden. Du verstehst den Witz, oder? Es ist eine sehr clevere Anzeige. Aber das ist nicht der Grund, warum ich es dir zeige. Ich möchte ein riesiges Designkonzept namens Whitespace demonstrieren Designkonzept namens Whitespace Whitespace ist leerer Raum um Elemente herum. In diesem Fall rund um den BM-, BW-Titel. Whitespace lenkt die Aufmerksamkeit auf das Objekt. Es ist nicht nur einfacher, das Objekt zu sehen, sondern es wird auch viel interessanter und wichtiger Das ist die Homepage von Yahoo. Hier gibt es nicht viel Leerraum. Es ist schwer zu sagen, was auf dieser Seite wichtig ist. Diese hingegen ist eine ganz andere Geschichte. Die Bedeutung von Leerraum liegt nicht nur in der Aufmerksamkeit und Einfachheit. Es geht auch darum, dass Ihr Design sein primäres Ziel erreicht. Wenn das Hauptziel Ihrer Website darin besteht, dass Nutzer suchen, sollten Sie sicherstellen dass die gesamte Aufmerksamkeit darauf gerichtet ist. Wenn wir bei Google ankommen, wissen wir sofort, wo wir klicken müssen und wohin wir unsere Aufmerksamkeit richten müssen . Es ist viel weniger anspruchsvoll, bei Google zu suchen als bei Yahoo. Und es ist viel wahrscheinlicher, dass wir unser Ziel bei Google erreichen, als Yahoo ablenken zu lassen und zu vergessen, wofür wir überhaupt gekommen Leerraum muss nicht weiß sein. Es kann eine beliebige Farbe haben. Es ist jeder ungenutzte Raum , der sich zwischen den Elementen befindet. Das Wort Weiß ist ein Überbleibsel aus der Zeit, als Grafikdesign nur in gedruckter Form und auf einem weißen Blatt Papier stattfand Schauen wir uns dieses Beispiel an. Angenommen, Sie arbeiten an einer Taxi-App-Website, Sie könnten ein Foto als Hintergrund verwenden und daran ist überhaupt nichts auszusetzen. Oder Sie können Leerraum verwenden, um der Nachricht und der Schaltfläche mehr Aufmerksamkeit zu schenken. Denken Sie übrigens an das Abtönen mit Bildüberlagerungen Manchmal müssen Sie das Foto nicht schwarz-weiß machen Sie können das Bild farbenfroh halten und trotzdem einen Farbton hinzufügen, wie in Wissen Sie, vor langer Zeit, bevor ich etwas über Grafikdesign wusste, habe ich als Marketingmanager gearbeitet, und als Marketingfachmann müssen Sie eine Menge grafisches Material erstellen, Designmaterialien wie Flyer, Broschüren, Magazine oder Poster, Werbung auf Facebook oder Google Adwords oder Facebook-Cover oder Und ich habe früher mit diesem ausgezeichneten Grafikdesigner zusammengearbeitet, der später im Grunde mein Design-Mentor wurde Und wenn wir uns hinsetzten und mir seine Design-Iterationen ansahen, hatte ich immer die Bemerkung, dass ich mir seine Komposition ansehen würde , egal welche Komposition wir machten Manchmal war es wie eine Broschüre für unser Unternehmen. Und ich würde sagen: Oh, weißt du, warum füllst du diesen Raum nicht Es gibt einfach zu viel zu viel leerer Raum, und ich mochte den leeren Raum nie , wenn er die Designs machte, und ich habe ihn immer dazu gedrängt, zu versuchen, diesen leeren Raum mit etwas zu füllen , weil ich das Gefühl hatte, dass er leer ist. Oh Mann, ich hatte damals keine Ahnung. Das ist eine ziemlich häufige Reaktion bei Anfängern oder Kunden die keine Designausbildung haben, Anfängern oder Kunden, die keine Designausbildung haben, die Arbeit aber aus einer Art Designerhut oder aus der Perspektive eines Designers betrachten. Sie haben diese Unsicherheit, was den leeren Raum angeht, und sie versuchen immer, ihn mit etwas zu füllen Für sie fühlt es sich an, als ob es leeren Raum handelt, der nicht ausreichend gestaltet ist Denken Sie daran, dass sich kein Benutzer jemals über zu viel leeren Speicherplatz beschweren wird . Sie werden sich jedoch über zu viel Unordnung auf der Seite ärgern zu viel Unordnung auf der Meine persönliche Portfolio-Seite verwendet viel Leerraum. Ich wollte zuerst die ganze Aufmerksamkeit auf mich lenken, auf eine Person, die hinter der Arbeit steht. Also entfernte ich alle Ablenkungen und richtete den gesamten Fokus auf mich Apple macht das immer meisterhaft. Die Verwendung von viel Leerraum ist ein sehr sperriges Design. Das MacBook sieht super wichtig und viel wertvoller aus, wenn es so angezeigt wird Leerraum verbessert fast alles, auch in Absätzen. Erinnerst du dich, was wir über den Zeilenabstand gelernt haben? Erhöhen des Zeilenabstands wird im Grunde mehr Leerraum zwischen den Zeilen hinzugefügt. Und rate mal was? Das Entwerfen mit viel Leerraum ist tatsächlich einfacher als das Entwerfen ohne. Dier Rams ist dieser Industriedesigner, vor allem für seine Arbeit für Brown bekannt ist. Er hat diese beliebten zehn Prinzipien für gutes Design geprägt Prinzipien für gutes Design Das abschließende zehnte Prinzip lautet Gutes Design ist so wenig Design wie möglich Hab also keine Angst davor, Leerraum zu haben und weniger zu tun. Das ist einfach gutes Design. Es gibt eine Ausnahme mit Leerraum für Elemente, die miteinander verwandt sind und Teil desselben Kontextes sind und näher beieinander liegen sollten. Leerraum dazwischen setzen, werden sie voneinander getrennt und es fühlt sich an wie separate Objekte, die nichts miteinander zu tun haben, genau wie wir in der Lektion über Nähe gelernt haben Zum Beispiel werden die Überschrift und der Absatz auf dieser Seite Leerzeichen voneinander getrennt Dadurch wird der Absatz zwar stärker in den Fokus gerückt, aber jetzt handelt es sich um ein eigenständiges Objekt , was die Anzahl der Elemente erhöht, die der Betrachter verarbeiten muss In der Originalversion scheinen Überschrift und Absatz aufgrund der Nähe miteinander verbunden zu sein und werden als eine einzige Gruppe wahrgenommen. Ähnlich wie die Links in der Navigationsleiste aufgrund ihrer Nähe und Gruppierung werden sie aufgrund ihrer Nähe und Gruppierung sofort als einzelne Gruppe identifiziert Diese Art der Gruppierung erleichtert es Betrachter, die Elemente auf der Seite zu verarbeiten, und sie ist übersichtlicher und 44. Design Wiederholung: Das ist Andy Warhols Arbeit, weil nicht wirklich ein Webdesigner, aber er ist ein sehr einflussreicher Pop-Künstler. In diesen Warrick. Er verwendet einen beliebten Design-Trick namens Wiederholung. Es ist, wenn Sie einen Gegenstand nehmen, der nicht alleine interessant ist, aber mehrmals wiederholt wird. Und jetzt haben wir etwas, das interessanteres ist. Dies ist eine Seite von Zendesk Website. Sie können hier sehen, wie die Wiederholung von quadratischen Profilen im gleichen Stil ein sehr interessantes Layout geschaffen hat . Der Wiederholungstrick gilt nicht nur für identische Gegenstände. Sie können auf fast alles angewendet werden, wie zum Beispiel Farbstil-Abstand-Layout. Ihre Petition off Farbe ist eine, die es oft verwendet wird und kann wirklich binden das Design zusammen. Sie sehen, wie sich die Farben aus der Überschrift als Hintergrundfarben aus Profilbildern wiederholen . Wenn wir uns unter die Bilder bewegen, sehen Sie, dass diese Farben auch in diesem Absatz wiederholt werden. Diese Seite würde viel weniger ansprechend und interessant aussehen, wenn diese Kleidung nirgendwo anders wiederholt würde . Wissen Sie, dass es eine weitere Wiederholung ist, die auf dieser Seite passiert? Es ist im Layout. Off-Profil-Aufnahmen, die Position von einer Person, wie sie in Richtung der Fahrt und ihre Namen in der oberen linken Ecke. Das ist eine Wiederholung des Layouts. Ich bin eigentlich ein wenig enttäuscht, dass Esta und tiefe Asche auf der rechten Seite nicht korrupt . Wie der Rest, sie stören die Wiederholung ein wenig Aufgrund dieses Details, lassen Sie uns einen Blick auf ein anderes Layout werfen. Wiederholung. Dies ist sehr häufig im Web, und Sie werden es auf so vielen Websites sehen. Sie sehen, wie das Layout wiederholt wird. Eine Abbildung auf der einen Seite hatte Linie und Absatz die Zeile auf der anderen Seite in wie genau aus. Das ist genau auf die Wiederholung. Lassen Sie uns Wiederholung in die Praxis anwenden. Sagen wir, wir haben diesen Inhalt von unserem Kunden. Es sind die Vorteile ihrer Dienste, weil jeder Absatz mit seinen Schlagzeilen Teil derselben Kontakte ist. Wir können eine Wiederholung in ihrem Layout erstellen. Wir können ein geteiltes Bildschirm-Layout verwenden, das den Bildschirm und die genaue Hälfte teilt. Also auf der 1/2 Platzierung der Kopie und auf der anderen, Platzieren Sie ein vollständiges Bild auf einige Bilder und sich wiederholende Farben und es kann ziemlich gut aussehen wie diese haben mehrere Elemente hier sie Layout wiederholt, offensichtlich, die Wiederholung von Kragen. Ich sammele Farben aus den Fotos und wiederhole sie, wie man Schlagzeilen und endgültige die Wiederholung vom Fotografen Stil. Alte Fotos sind im gleichen Stil, die Aufnahme von der Spitze eines Artikels, das flach auf einem farbigen Hintergrund liegt. Wie wäre es mit anderen Designkonzepten? Kannst du sie bemerken? Der Kontrast. Habe ich mich hier dagegen bewerben? Auf jeden Fall. Sie sehen den Kontrast zwischen der Überschrift und dem Absatz in Größe, Gewicht und Farbe. Offensichtlich ein riesiger Contras zwischen linken und rechten Plaids, einer ist weiß, ein anderer ist helle Farbe. Wie wär's mit Leerraum? Es gibt überall weißen Raum, jeder weiße Block, wo die Kopie Seitz hat eine gesunde Menge an weißen Raum um sie herum, um ihre Spannung und den Inhalt zu bringen. Es gibt sogar weißen Raum in diesen Fotos. Wer auch immer diese Fotos gemacht hat, sie haben dort einen tollen Job gemacht. Ich kann eine gute Quelle, die die Ressourcen verbindet, sate. Aber der Grund, warum Wiederholung so mächtig im Design ist, weil wir die Welt als Menschen betrachten , wir versuchten, Muster auf allem zu erkennen, was wir betrachten, und wenn wir ein Muster erkennen, geht unser Gehirn ein wenig aufgeregt. Luke Luke. Es ist die gleiche Grippe, die ich vorhin gesehen habe. Ja, das bin ich. Intelligentes Design ist stark mit der menschlichen Psychologie verbunden. Es ist nicht so, dass es einige Gesetze der Physik gibt, die Design regeln. Es ist völlig menschlich zentriert in der Realität, immer unsere Designer. Wir sind diejenigen, die diese Wiederholung und den Weißraum und Kontrast und all diese Gestaltungsansätze verlangen , weil wir sie bereits mögen. Sie wissen bereits, was gut aussieht und worum es aussieht. Es ist irgendwie wie Essen. Sie wissen bereits, was gut schmeckt und was schlecht schmeckt. Du musst nicht auf eine Kochschule gehen, Teoh. Was lernen? Was schmeckt gut und was nicht. Und wenn Sie für Ihre Rezepte lernen und sie praktizieren, wenn Sie etwas Gutes kochen, werden Sie es bemerken, und auch alle anderen. 45. Designtrick: Konsistenz: Was ist der einfachste Weg, gutes Design von schlechtem zu unterscheiden. Es ist durch Konsistenz möglich. sich die Website anschaut und feststellt, wie einheitlich das Layout, Typografie, die Farben und all das Inkonsistenzen sind sehr leicht zu erkennen. Wir sind darauf ausgelegt, Muster in allem, was wir betrachten, zu erkennen , und es ist für uns sehr einfach, Brüche in diesen Mustern zu Das Muster zu durchbrechen ist wie ein Fehler in der Matrix. Manchmal ist es schwierig, genau zu sagen , was das Muster durchbricht, aber es ist immer leicht zu erkennen Oft ist es besser, schlechtes Design zu verwenden und konsequent zu sein, als ein schönes Design zu haben und nicht konsistent zu sein. Konsistenz ist nicht wirklich ein Trick, sondern eher ein Gestaltungsprinzip. Also betrüge ich hier ein bisschen indem ich das als einen der Design-Tricks aufnehme Konsistenz gilt für alles, aber ich habe es zum besseren Verständnis in mehrere Kategorien unterteilt Die erste und offensichtlichste ist die Konsistenz des Layouts. Genau das ist ein Zweck des Grids. Das Raster ist eine hervorragende Möglichkeit, ein einheitliches Layout zu gewährleisten. Wenn sich die Ausrichtung auf der Seite wiederholt, bemerken die Benutzer dies und erwarten , dass die Dinge auf eine bestimmte Weise angeordnet Wenn diese Erwartung erfüllt wird, haben die Benutzer eine erfreuliche Erfahrung mit der Website und sie vertrauen der Website mehr. Ich sehe zum Beispiel, dass Webdesigner häufig Layoutkonsistenzen durchbrechen , indem sie verschiedene Textausrichtungen miteinander vermischen verschiedene Textausrichtungen Alle drei Elemente in diesem Rahmen sind in der Mitte zueinander ausgerichtet, oder zumindest enthalten sie Felder, aber der Absatztext ist linksbündig Dadurch wird die Konsistenz des Layouts beeinträchtigt und das Design wirkt schlampig Wir müssen einen Ausrichtungsstil wählen und dabei bleiben. Entweder richten wir alles mittig aus oder wir richten es links aus. Jede dieser Optionen ist in Ordnung, solange wir bei einer Ausrichtung bleiben. Dies ist ein offensichtliches Beispiel. subtileres und nicht offensichtlicheres Beispiel ist, wenn wir Inkonsistenzen zwischen verschiedenen Abschnitten der Seite haben Inkonsistenzen zwischen verschiedenen Abschnitten der Seite Zum Beispiel ist der Inhalt im mittleren Bereich linksbündig ausgerichtet, anderen Abschnitten jedoch in der Mitte Das wäre völlig in Ordnung, wenn es sich um eine andere Art von Text, eine sekundäre Überschrift oder etwas anderes handeln würde, aber es ist dieselbe Überschrift, aber mit einer anderen Ausrichtung. Das ist ziemlich subtil, da es sich auf verschiedene Abschnitte verteilt. wir durch eine Seite blättern, sehen wir jeweils nur einen Abschnitt, sodass eine solch subtile Inkonsistenz kein allzu großes Verbrechen darstellt Es ist jedoch eine gute Angewohnheit, sich in verschiedenen Abschnitten und sogar auf verschiedenen Seiten einer Website an einen Stil zu halten verschiedenen Abschnitten und sogar auf verschiedenen Seiten einer Website an einen Stil zu Es ist ganz einfach, Konsistenz in der Typografie zu schaffen. Wir müssen nur für jeden Anlass spezifische Schriftstile erstellen und uns dann daran halten Eine Website hat verschiedene Arten von Texten. Es gibt Hauptschlagzeilen. Das sind normalerweise die größten. Dann haben Sie Schlagzeilen auf kleinerer Ebene wie Titel und Untertitel. Sie haben offensichtlich einen Absatztext und Sie haben Schaltflächen. Sie können mehr haben, z. B. kleine Bildunterschriften und Fußnotentexte, Menülinks usw. Der Schlüssel liegt darin, für jeden Anlass einen einzigen Stil zu definieren und dabei zu bleiben Zum Beispiel, einen Absatzstil zu haben und ihn für alle Abschnitte, Seiten und überall an der Seite beizubehalten . In Fig Mine und Webflow gehört diese Textgestaltung tatsächlich zur Zukunft. Deshalb werden wir die Erstellung von Textstilen in unseren realen Projekten üben Textstilen in unseren realen Projekten Die Farbkonsistenz bedarf fast keiner Erklärung. Es ist am offensichtlichsten und am einfachsten zu erkennen. Die meiste Zeit arbeiten wir mit der bestehenden Marke und einem Logo. Das bedeutet, dass Farben für das Unternehmen definiert wurden und dass diese Farben nicht nur innerhalb der Website, sondern in der gesamten Darstellung, in Flyern, Visitenkarten, PDF-Dateien, im Frontoffice usw. einheitlich sein müssen nicht nur innerhalb der Website, sondern in der gesamten Darstellung, in Flyern, Visitenkarten, PDF-Dateien, im Frontoffice usw. einheitlich sondern in der gesamten Darstellung, in Flyern, Visitenkarten, PDF-Dateien, im Frontoffice usw. einheitlich In Zeiten, in denen wir keine definierten Markenfarben haben, machen wir das selbst Normalerweise wählen wir eine oder zwei Grundfarben wie in diesem Beispiel Blau und Grün, und die restlichen Farben sind monoton, Schwarz, Grau und Weiß Eine Möglichkeit, Konsistenzen zu umgehen, besteht verschiedene Formen auf der Seite zu mischen Auf einer Seite wie dieser, die diese glatte, abgerundete, gewellte Kante hat , Einführung einer solchen eckigen Form würde die Einführung einer solchen eckigen Form die Konsistenz sie sehr seltsam aussehen lassen, aber die Beibehaltung der gleichen glatten Formen würde die Konsistenz auf der gesamten Seite gewährleisten Es muss nicht exakt dieselbe Form haben, solange die Form ähnliche Eigenschaften aufweist Diese Inkonsistenz mit Formen kann tatsächlich an sehr unerwarteten Stellen auftreten Wenn wir beispielsweise solche Ausschnitte verwenden, erzeugen sie glatte Kanten auf der Seite Sie sind nicht offensichtlich, aber sie sind da. Wenn wir im nächsten Abschnitt ein nicht ausgeschnittenes normales Kastenfoto platzieren , führen wir eine neue widersprüchliche Form Plötzlich wurden aus glatten, natürlichen Kanten sehr strenge, gerade, harte Linien, und es entstand sogar diese neue Form, die es vorher nicht gab Wie ich in der Lektion zur optischen Täuschung erwähnt habe, Platzieren von Objekten und Formen auf wirkt sich das Platzieren von Objekten und Formen auf einer schwarzen Leinwand auf diese Leinwand aus und es entstehen neue Dies gilt insbesondere für gerade Linien und Rechtecke. Aber wenn wir wieder Ausschneiden verwenden, verschwinden diese harten Linien und fremden Formen und der Abschnitt wird mit dem obigen Heldenabschnitt konsistent mit dem obigen Heldenabschnitt Wenn es um Fotos geht, müssen wir uns auch an den Stil der Fotos halten. Mit Stil meine ich einen fotografischen Stil, wie Farben, Filter, die Art und Weise, wie Modelle aussehen, und so weiter. In diesem Beispiel habe ich bei der Auswahl von Fotos desselben Stils zum Beispiel keine gute Arbeit geleistet. Das linke sieht polierter aus, während das zweite natürlicher aussieht. Die Kameraführung scheint auch ganz anders zu sein. Ich bin kein Fotograf, aber ich kann feststellen, dass dies weder im selben Studio noch von demselben Fotografen aufgenommen wurde. Die meisten dieser Fotos werden einen sehr unterschiedlichen Stil haben , da sie von verschiedenen Fotografen und in unterschiedlichen Szenarien aufgenommen wurden . Es kann ziemlich schwierig sein, die Konsistenz aufrechtzuerhalten, aber es gibt einen Weg. Eine Möglichkeit besteht darin, Bilder von demselben Mitwirkenden auszuwählen . Ich habe das schon einmal erwähnt Viele Stock-Websites bieten diese Option , um Fotos von demselben Mitwirkenden zu sehen, also von demselben Fotostudio, Fotografen Wenn wir Fotos von demselben Mitwirkenden auswählen, werden wir mehr oder weniger dieselben Ergebnisse erzielen da derselbe Fotograf denselben Stil, dieselbe Kamera und dieselben Aufnahmegewohnheiten hat dieselbe Kamera und dieselben Aufnahmegewohnheiten Wenn auch nicht zu 100%, ist es dasselbe, denn manchmal haben sie einfach nur unterschiedliche Aufnahmen und unterschiedliche Aufnahmemöglichkeiten in unterschiedlichen Szenarien Auch ihr Stil kann sich von Jahr zu Jahr ändern. Dies ist eine sehr einfache und hervorragende Möglichkeit, Ihr Design einheitlich zu gestalten und zeigen, dass es sich um ein qualitativ hochwertiges Design handelt. Ich weiß, das klingt nach einem verrückten Detail, auf das man achten muss, aber wenn es um Design geht, steckt der Teufel im Detail Aufmerksamkeit für diese winzigen Details unterscheidet einen mittelmäßigen Designer von einem erstklassigen Ein letzter Punkt, an dem ich über Konsistenz sprechen möchte, Konsistenz Das Internet ist voller Symbole und Illustrationen. Sie sind eine hervorragende Möglichkeit, verschiedene Aktionen zu zeigen, ein kompliziertes Konzept zu demonstrieren oder einem Design einfach ein einzigartiges Aussehen zu verleihen. Genau wie bei der Fotografie entsteht durch die Kombination von Symbolen mit unterschiedlichen Stilen Symbolen mit unterschiedlichen Stilen ein sehr inkonsistentes und ungeschliffenes Aussehen Kein Spaß. Tatsächlich sind Icons und Illustrationen noch gnadenloser als normale Fotos In diesem Beispiel hat das dritte Symbol einen anderen Stil als die ersten beiden Es ist dieselbe Farbpalette, die Farben sind ähnlich, aber sie sieht immer noch fehl am Platz aus. Der Unterschied besteht in der Tat nur in einem kleinen Detail. Die ersten beiden Symbole sind mit einem Konturstrich versehen. Es ist diese schwarze Linie, die jedes Objekt in der Zeichnung umreißt. Aber der dritte hat es nicht und es erzeugt ein völlig anderes Aussehen. In diesem Beispiel stammen alle drei Symbole aus derselben Packung und haben exakt denselben Stil. Obwohl sie dieselbe Größe haben, hat die erste Linie dünnere Linien während die letzte etwas dicker ist. Das dritte Symbol sticht mir in die Augen. Ein Kunde, der kein Designer ist, wird nicht genau merken, was daran falsch ist Sie sind vielleicht nicht in der Lage, einen Finger darauf zu legen, aber sie werden solche Inkonsistenzen aufspüren und werden nicht das Gefühl haben, dass das Design sehr gut ist Um solche Inkonsistenzen bei Symbolen und Illustrationen zu vermeiden , genau wie bei Stock-Fotos, wählen Sie sie aus derselben Quelle aus Mein Lieblingsplatz, um Icons zu kaufen, ist flat icon.com. Icons hier und anderswo sind normalerweise nach Paketen organisiert. Alle Symbole innerhalb desselben Pakets werden den gleichen Stil, die gleiche Größe, die gleiche Linienstärke und all das haben . bei der Auswahl von Symbolen für Ihre Projekte Achten Sie bei der Auswahl von Symbolen für Ihre Projekte eher auf Pakete als einzelne Symbole aus verschiedenen Paketen. Auf diese Weise erhalten Sie ein einheitliches und ausgefeiltes Erscheinungsbild , mit dem Sie wie ein Profi entwerfen können. 46. Design Überlappen: hier ist ein wenig fortgeschrittener, aber sehr cooler Design-Trick. Dieser Trick wird Ihre Entwürfe tatsächlich sehr solide aussehen lassen. Anfänger Designer, die in der Regel Angst davor haben und sehr, sehr Sie werden Amateurarbeit mit diesem Trick sehen. Wenn Sie das verwenden, wird Ihre Arbeit sicherlich wie ein Pro-Design erscheinen, der Trick besteht darin, verschiedene Elemente zu nehmen und sie zu überlappen. Siehst du, wie die Hand von der Statue National Geographic Titel überlappt und auch der gelbe Rahmen? Es macht das Design interessanter und fügt der Komposition eine zusätzliche Dimension hinzu. Die Ausführung dieses Tricks ist ziemlich einfach. Du nimmst zwei separate Elemente und überlappst sie. Es verbindet sich mit ansonsten getrennten Elementen, und es schafft auch Drama im Design. Etwas Interessantes geht in unseren Augen jetzt daran interessiert, das Puzzle zu lösen, ein altes Design zu machen und zusammengebunden, anstatt nur zufällig auf der Seite platziert. Der Trick ist sehr häufig. Im Gefängnisdesign. Sie werden Schlagzeilen sehen, die sich mit Personen überschneiden, Bilder miteinander, Angriffe mit Tags, Sie nennen es im Webdesign. Es ist ein bisschen mehr gemessen und weniger extrem, wie Sie es im Druck sehen. Wie Sie Überlappungen in sehen können Diese Beispiele sind subtiler auf der Fahrt. Sie haben Bilder, die sich überlappen, aber sie erzeugen keine komplexen Überlappungen mit Textblöcken und auf der linken Seite Textüberlappungen für das Hintergrundbild. Ziemlich einfach. Ein Grund, warum ich diese Technik liebe, ist, weil Sie zu einem ansonsten fadenlosen Design hinzufügen können und schönes Flair der Aufregung wurde vor kurzem an seinem Preisabschnitt gearbeitet. In der Regel haben Produkte mehrere Preise Pflanzen richtig, und das hat einige wackeln zu spielen und erstellen Sie ein interessantes Design. Aber dieser hatte nur einen. Mein ursprüngliches Design war so etwas, das sehr fad und langweilig aussah. Heute gab es keine Aufregung. Send fühlte sich an, als ob es nur zufällig dort angelegt wurde. Ich habe eine neue Form erstellt und hinter der Box überlappt. Sofortige Verbesserung. Jetzt ist dies eine nicht traditionelle Form. Wenn Sie so etwas auf der Seite einführen, müssen Sie es erneut wiederholen. Erinnern Sie sich an die Wiederholungstechnik. Also habe ich die gleiche Form und den überlappenden Trick an den anderen Stellen auf der Seite verwendet, was zu einem ziemlich guten Ergebnis führte. Mal sehen, wie wir dies in die Praxis umsetzen können. Angenommen, wir haben einen Abschnitt auf der Seite, wo wir einige Bilder zeigen möchten. Wir könnten diese Bilder zu so etwas arrangieren, was vernünftig, aber ein wenig langweilig ist. Oder wir können sie überlappen und Amore erschaffen. Interessantes visuelles Bild. Sie haben diese kränklichen 1.000.000 bis sich selbst mal mit Fotocollagen gesehen. Nun, okay, wir haben hier etwas, was wir tun müssen, wenn wir nur ein Foto benutzen wollen . Einfach. Lassen Sie uns Box zeichnen und überlappen Sie es mit dem Bild. Und jetzt haben wir ein interessantes Design. Plus Foto sieht nicht so aus, als würde es nur zufällig drinnen hängen, aber fühlt sich an, als wäre es dort gelegt, wo es hingehört. Die Farbe der Box ist wichtig. In diesem Fall. Ich habe einfach die Farbe aus dem Bild. Aber in anderen Fällen ist dies eine gute Gelegenheit, Marke Coloristen oder Wiederholungstechnik zu verwenden, um die Farben auf der Seite zu wiederholen . Eine Sache zu beachten. Überlappender Trick. Viele Male bricht das Gitter. Diese Hintergrundbox ist nicht auf die große Überlappung ausgerichtet und die erstellen unser Schwert sind entgegengesetzte Konzepte. Überlappender Trick versucht absichtlich, die Ausrichtung zu brechen und etwas Finanzierung zu bringen. Die Komposition Breaking the Great absichtlich ist kein Verbrechen, wie ich bereits erwähnt habe, das beabsichtigte ist die Tastatur. Jede Designentscheidung muss absichtlich sein, und wenn sie dann die Regeln bricht und verbiegt, ist ein wenig willkommen. In diesem Fall sind wir eigentlich nicht so viel mit vereinbart. Die Boxen im Hintergrund. Es ist eine Art Teil des Hintergrunds canvass die Bild-Steuer und andere Elemente sitzen auf dieser Leinwand, die an sich keine große hat Es sind die Elemente, die darauf sind, die auf dem Gitter verlassen . Dasselbe gilt für voll mit Hintergrundbildern. Sie sind Teil von den Kameras und sitzen auf der Hintergrundebene, so dass sie nicht mit dem großen ausgerichtet werden müssen . Lassen Sie uns eine Übung machen, damit Sie diese überlappende Technik üben können. 47. Zuordnung: Überlappend: In dieser Aufgabe übst du sowohl das Überlappen als auch ein bisschen Wiederholung In der Figma-Datei habe ich einen Rahmen mit drei Textblöcken vorbereitet einen Rahmen mit drei Textblöcken Du wirst einen Bereich mit Zusatzleistungen für eine Reise-App entwerfen. Aufgrund der Art und Weise, wie ich den Text gestaltet habe, können Sie sich vorstellen, dass ich möchte, dass Sie dieses wechselnde Layout erstellen. Text auf der einen Seite und Bild auf der anderen Seite. Aber anstelle von Illustrationen mit normaler Fotografie möchte ich, dass Sie Fotos für jeden Textblock finden. Auf diese Weise übst du auch, Fotos zu finden. Für den überlappenden Stil möchte ich, dass du einen Stil auswählst und diesen für alle drei Blöcke verwendest Sie können entweder eine Fotocollage oder eine Überlappung verwenden. Dazu müssen Sie für jeden Block mehrere Fotos finden für jeden Block mehrere Fotos Oder Sie können ein Foto verwenden und ein Hintergrundfeld hinter dem Foto verwenden. Verwenden Sie wie üblich andere Konzepte, die Sie bereits gelernt haben, verwenden Sie das Raster, wählen Sie die Telefone aus, erstellen Sie eine Hierarchie und so weiter. Ich werde dieses Mal keine Beispieldemonstration machen , weil Sie bereits wissen, wie das alles funktioniert. Viel Spaß. 48. Design Spannung: Design teilt viele Ähnlichkeiten mit Musik. Genau wie Designer. Musiker verwenden auch Kontrasttrick , der Kontrast zwischen hohen Tönen und niedrigen Noten zwischen Schnell und langsam sein kann. Sie verwenden auch Wiederholung, was der Rhythmus von der Versenkung ist. Sie nutzen sogar Leerräume, die Pausen und leise Teile von der Musik sind. Noch eine Technik. Diese beiden Feldanteile heißt „Spannung in der Musik“. Dann fängt die Melodie an zu holen. Ah, und es ist irgendwie fügt dem Schwung hinzu und wird dann ein bisschen dramatischer und irgendwann explodiert in dieser Kill me Nation zum Beispiel, und Techno-Musik. Es ist irgendwie zu diesem sehr schweren Rhythmus zu gehen. Aufmerksamkeit ist etwas, das jede kreative Arbeit interessant macht, und es wird in anderen Bereichen außer Design und Musik verwendet. Zum Beispiel wird in der Fiktion als Spannung bezeichnet. Wie entsteht also Spannung im Design? Dies ist ein Quadrat flach auf der Oberfläche gelegt, in völliger Balance und in zentraler Ausrichtung? Hier gibt es überhaupt keine Spannung. Es passiert nichts. Kein Drama. Es ist solide und geerdet. Wie wär's jetzt? Das ist eine andere Geschichte, nicht wahr? Das Quadrat liegt nicht mehr flach. es steht auf seiner Ecke, was scheint, entweder wird es umkippen oder voll auf der flachen Seite mit einer einfachen Neigung, wir haben eine Menge Spannung erzeugt. Kippelemente sind eine Möglichkeit, Aufmerksamkeit zu schaffen. Da ist noch mehr. Sie können Elemente an den Rand des Rahmens verschieben oder Elemente aus dem Gleichgewicht oder hohe Teile des Objekts verschieben. Dies ist etwas, mit dem wir bereits als Teil der extremen Beschneidung gespielt haben. Die Spannung ist einer der Gründe, warum extreme Beschneidung so ein interessanter Trick ist . Und wenn die extreme Ernte ungleichmäßig ist, wie dieses Filmplakat, erhöht es die Spannung noch mehr. Denken Sie daran, die Regel der Drittel Spannung ist genau der Grund, warum diese Regel wirklich gut funktioniert. Wenn Objekte im Schuldenzentrum fühlen sich stabil und ein wenig langweilig. Off-Balance-Platzierung kann visuell interessanteres Aussehen erstellen. Überlappung ist eine weitere Möglichkeit, Spannungen zu erzeugen. Überlappung hat andere Vorzüge, wie das Hinzufügen zusätzlicher Bemaßungen, weil Objekte übereinander geschichtet werden oder weil ineinandergreifende Elemente das Design miteinander verbinden. Aber es fügt auch Spannung hinzu, weil zwei Objekte jetzt sehr interessant miteinander interagieren . Eine Möglichkeit, Spannung und Bewegung im Design zu erzeugen, ist die Verwendung von diagonalen oder abgewinkelten Formen. Diese Art von Spannung ist sehr nützlich, wenn Sie Geschwindigkeit und Bewegung in Ihrem Design darstellen möchten . Warum erzeugen diagonale Formen Spannung und Bewegung ist sehr einfach zu demonstrieren? Das ist immer noch Bild, aber wir können spüren, dass der Kreis kurz davor ist, herunterzurollen. So winkt das Gefühl von Bewegung im Design. 49. Aufgabe: Spannung: In dieser Aufgabe wirst du Spannung üben. Die Methode zum Festnageln der Spannung erfordert etwas Übung. Ich möchte, dass du dich entspannst und einfach herumspielst. Mach dir keine Sorgen, wenn du mit dem Ergebnis nicht allzu zufrieden bist, hab einfach Spaß damit. So entstehen normalerweise Spannungen. Man spielt eine Weile herum und irgendwann sieht eine der Versionen ganz in Ordnung aus. In dieser Figma-Datei gibt es einen Frame. Ich möchte, dass Sie den Abschnitt so gestalten , dass Sie eine gewisse Spannung im Design erzeugen Wie wir bereits besprochen haben, gibt es mehrere Möglichkeiten, wie Sie Spannungen erzeugen können, zum Beispiel durch die Verwendung von Winkeln. Wie benutzt man Winkel? Denken Sie an das klassische Split-Screen-Layout , das wir normalerweise für solche Abschnitte verwenden. Anstatt es gerade und aufrechte Winkel zu haben, können wir sie schräg stellen Um eine Form in Figma zu bearbeiten, doppelklicken Sie einfach darauf oder klicken Sie in der Werkzeugleiste auf Objekt bearbeiten Jetzt erhalten Sie diese Art von Ansicht. Die Punkte an den Ecken des Rechtecks können verschoben werden. Ziehen Sie sie nach Ihren Wünschen, um ein schräges Rechteck zu erhalten. Wenn dein Dunk Heat eindringt, vergiss das nicht, denn der Bildschirm ist jetzt in diesem Bearbeitungsmodus der Form gesperrt und du wirst nicht mehr in der Lage sein, auf ein anderes Element zu klicken und etwas anderes auf der Seite zu tun Manchmal doppelklicke ich versehentlich auf Formen wie diese, wodurch ich in den Bearbeitungsmodus gehe und ich nicht in der Lage bin, auf etwas anderes zu klicken, und ich frage mich, was zur Hölle vor sich geht, und es ist in Vikma nicht sehr offensichtlich, dass Sie sich im Bearbeitungsmodus befinden. Denken Sie daran, wenn Sie ein Element nicht auswählen können, bedeutet das, dass Sie sich wahrscheinlich im Bearbeitungsmodus einer der Formen Jetzt können wir die Form verwenden , um unser Bild zuzuschneiden. Wir können die Form entweder auf die übliche Weise mit einem Bild füllen, indem wir das Bild einfach als Füllung darin platzieren. Oder da wir das Bild bereits auf der Seite haben, können wir einfach die Form dieses Bildes bearbeiten. Denken Sie daran, dass das Bild in Figma nur eine normale Form mit einer Bildfüllung im Inneren Alles, was Sie mit einem Rechteck oder einer anderen Form machen können, können Sie mit Bild zwei machen Wir können einfach das Bild auswählen, auf Objekt bearbeiten klicken und die Punkte der Form ändern, und die Punkte der Form ändern um eine abgewinkelte Form zu erstellen Wenn Sie die Position des Bilds im Inneren oder die Größe ändern müssen , können Sie dies mit dem Zuschneidewerkzeug tun Die Verwendung solcher Formen zum kreativen Zuschneiden von Bildern im Design wird übrigens als Maskierung bezeichnet Diese Form, die wir gerade erstellt haben, wird Maske genannt. Vergrössern Sie das Bild nun so, wie Sie es möchten, innerhalb der Maske. Und da haben wir mit ein paar Klicks schon ein Layout mit viel Spannung. Sie können dann die Farbe des Hintergrunds ändern , wenn Sie möchten. Oder ändern Sie den Winkel und die Position Ihrer Maske. Eine andere Möglichkeit, Spannung zu erzeugen , besteht darin , ein Objekt an der Kante auszurichten. Das kannst du nur mit bestimmten Objekten machen. Sie könnten dies beispielsweise mit einer Überschrift oder einem Text tun , wenn dieser groß genug ist. dies mit einem Absatztext tun Sie dies mit einem Absatztext tun, sieht es so aus, als wäre es ein Fehler. Manchmal verwende ich diese Art der Kantenausrichtung , wenn ich Schritte nummeriere oder etwas Ähnliches Sie können auch Spannungen erzeugen, indem Sie ein unausgewogenes Layout verwenden oder einige Elemente überlappen Zum Beispiel, indem Sie die Überschrift mit dem Foto überlappen oder einige Elemente ins Gleichgewicht bringen . In Ordnung. Jetzt bist du dran, du hast schon genug Ideen, wie du Spannung erzeugen und vergiss nicht, die Überschrift und den Text und den Button zu stylen . Am wichtigsten ist, dass Sie Spaß an dieser Übung haben, denn wenn es um Spannung und sich überschneidende Tricks geht, funktioniert das Beste, wenn Sie Spaß haben und damit spielen Also viel Spaß beim Herumspielen und schauen, ob es klappt. Wenn nicht, fühle dich nicht so schlecht deswegen. Es wird mit ein bisschen Übung einhergehen. 50. TEIL 2: PRACTICE DESIGN: Sie Teil eins dieses Kurses abgeschlossen haben, geben Sie sich einen Klaps auf die Tasche. Dieser Teil war eine Handvoll. Tolle Arbeit. Sie haben die Geheimnisse des guten Designs gelernt und wie Sie Ihre Arbeit in diesem Teil schön aussehen lassen können. Wir werden ein bisschen ernster werden. Ain Designer-Startseite von Anfang bis Ende, Los geht's. 51. Die Mimic Methode: Ich möchte mit Ihnen ein dreckiges kleines Geheimnis von allen kreativen Leuten teilen. Jeder Designer, jeder Künstler, jeder Erfinder. Jeder Musiker, der jemals gelebt hat, hat diese Methode verwendet, um seine Fähigkeiten zu beherrschen. Diese Methode wird als mimische Methode bezeichnet. Sie sehen die Anfangsschritte ab. Jedes neue Handwerk zu lernen, imitieren die Experten auf diesem Gebiet. Wenn Sie also lernen wollen, wie man kocht, greifen Sie Gordon Ramses oder John Olivers Kochbuch, und Sie beginnen, einige Rezepte zu üben. Du fängst nicht damit an, Nahrung von Grund auf neu zu erfinden. Du fängst an, diese Rezepte nachzuahmen und sie dann zu praktizieren. Und wenn Sie ein wenig Erfahrung und ein wenig mehr Vertrauen in die Rezepte gesammelt haben, dann fangen Sie an, sie ein wenig zu optimieren. Und irgendwann fängst du an, deine neuen Rezepte zu erfinden und zu erstellen. Wenn Sie lernen, Gitarre zu spielen, Sie nicht mit dem Schreiben neuer Songs, noch beginnen Sie mit dem Nachahmen anderer Musiker, was bedeutet, dass Sie beginnen, ihre Songs zu spielen. Und wie jeder andere Anfänger Gitarrenspieler fängt man damit an, wunderbar zu lernen. Viele Anfänger-Designer werden gefangen, weil sie denken, sobald sie anfangen entwerfen, zu entwerfen, sie müssen anfangen, neue oder originelle Werke zu schaffen, und sie werden entmutigt, wenn dies nicht geschieht. Sie denken, dass sie kein Talent dafür haben, aber sie überspringen den wichtigsten Stich und imitieren die Experten, indem sie Experten nachahmen. Nicht nur Sie bekommen Erfahrung und Selbstvertrauen, sondern Sie üben auch sehr gute Gewohnheiten, denn jede gute Designarbeit ist voll. Mit all den guten Gestaltungsgewohnheiten, die wir in diesem ah Kurs diskutieren, Typografie und Layout-Konsistenz und all die Tricks der weißen Raum und Spannung und überlappend all das Ding ist in gut. Ich gute Design-Arbeit, und Sie praktizieren im Grunde all das, während Sie jemanden in Art Kopieren und Replizieren ihrer Arbeit nachahmen und inspirieren, ihre Arbeit zu verwenden, ist eine Inspiration. Und sobald Sie anfangen, Ihr eigenes Originalwerk zu kreieren, haben Sie bereits sehr gute Gestaltungsgewohnheiten, die in Ihnen verwurzelt sind. Nachahmen hat drei Stufen. erste Stufe kommt zurecht. Es braucht jemand anderes, der arbeitet, nur kopiert. Holen Sie sich Pixel für Pixel es sortieren, wie jemand anderes Lied zu spielen oder Sie Lasagne mit einem Rezept kochen . Dies geschieht eher für die Praxis als für echte Projekte. Wenn Sie lernen, indem Sie Ihr Lernen eine Menge menschlicher Designentscheidungen kopieren, die von einem Profi getroffen wurden . Hier beginnt jeder schöpferische Mensch. Lassen Sie sich McCartney oder Picasso in Stufe zwei ziehen, Sie remixen. Es braucht jemand anderes Arbeit, um es eigene Twist zu geben. Genau wie Essensrezepte. Du fängst an, Zutaten zu optimieren. Nach und nach. Sie ändern, dass Telefone, Sie verwenden Ihre Farben, optimieren die Formen ein wenig. Jetzt hast du etwas anderes erschaffen. jedoch Wenn Siejedochzwei Werke zusammenstellen, ist die Inspiration deutlich sichtbar. In dieser Phase können Sie bereits in der letzten Phase drei die Arbeit mit realen Projekten üben. Jetzt ziehen Sie Inspiration nicht von einer bestimmten Arbeit, sondern eher wie mehrere verschiedene Werke oder verschiedene Stile und vielleicht sogar Trends. Und hier fügen Sie noch persönlichere Note hinzu. Das Endergebnis ähnelt also keiner bestimmten Arbeit mehr. Und Sie wollen nicht sagen, dass es ein Remix von dieser bestimmten Website oder diesem speziellen Design ist, obwohl manchmal man sagen könnte, dass es eindeutig einen Einfluss oder einen bestimmten Stil oder einen bestimmten Trend im Design, gibt es kein Niveau darüber hinaus. Es gibt so etwas wie wirklich originelle Arbeit, denn wenn die Dinge nicht wirklich auf Realität und Einfluss durch Realität und bestehende Stile basieren , dann wird es einfach irrelevant und ziemlich verwirrend für das normale Publikum. So wie die bizarren High-End-Modeartikel. Zu viel Originalität führt zu Produkten, die Menschen nicht verstehen und nicht verwenden wollen . Das bedeutet nicht, dass die Leute keine neuen Dinge mögen. Sie dio. Die Leute tun wenig genießen Ihre Websites, die frisch aussehen und Ihre Modestylistin technischen Absturz. Aber sie genießen diese Dinge, weil sie die meiste Zeit etwas aus der Vergangenheit und etwas Bestehendes ähneln , aber sie betrachten es aus einer ganz neuen Perspektive und einer neuen Perspektive. So ist es erfrischt Blick von etwas Vertrautes. So ist der Geschmack des Publikums wirklich wichtig, dass eine bestimmte Arbeit geschätzt oder abgelehnt wird . Diese seltsam aussehende Jacken, Pullover oder Schwammball Spannweiten ist und Ihnen und mir bekannt. Aber es könnte sein, Inspiration von einem anderen Warrick und einem bestimmten Publikum zu ziehen. Diese Show könnte mit dieser Inspiration vertraut sein, so dass sie sie leicht verstehen und schätzen können. Du fängst heute an, das mit einem geraden Gesicht zu sagen. Außerdem sind die Stufen wie ein Lautstärkeregler, nicht klarer Schnittübergang von einem zum anderen, sondern eher wie glatte Erhöhung der Intensität, mit unterschiedlichen Ebenen in jeder Stufe. Wir werden all diese drei Stufen üben. Aber bevor wir das zuerst tun, müssen wir lernen, wie wir die richtige Inspiration finden und unsere Arbeit darauf stützen können. Und machen Sie das stattdessen einmal aus Trecia. Also lasst uns das als Nächstes tun. 52. Das größte Geheimnis von Designern – Inspiration: Pablo Picasso war auf der Suche nach einer Inspiration für seine nächste Arbeit. Er war fasziniert von afrikanischer Kunst. Er nutzte die Dogon Tribe-Maske als Inspiration und begann mit dem Kubi-Stil, für den er am meisten berühmt ist Wie Sie sehen können, ist die Ähnlichkeit unglaublich. Seine Arbeit war vor dieser Zeit eigentlich ganz anders. Gute Inspiration kann für Ihre Arbeit ebenso transformativ Nehmen wir an, Sie arbeiten an einem Projekt zur Gestaltung einer Website für ein Finanzunternehmen Ihr erster Instinkt könnte darin bestehen, in Google Beispielen für andere Finanzwebsites zu suchen Aber was Sie hier bekommen, sind Datenvorlagen, die gleich aussehen, und das ist nicht inspirierend Warum ist Google ein schlechter Ort, um nach Designinspirationen zu suchen? Weil Google keine Website ist , die gute Designarbeit kuratiert Es hat einen ganz anderen Zweck und es durchsucht und bewertet Websites so , dass Inhalte angezeigt werden, die dort waren und über Autorität verfügen, die schon seit Ewigkeiten da sind und von vielen Menschen besucht wurden Und das ist genau das Gegenteil von dem , was Sie sich von Designinspiration wünschen. Eine Stichwortsuche nach Inspiration für Finanzwebsites führte mich zu einem Artikel, in dem Websites wie diese vorgestellt wurden, und der Artikel nannte es innovative und inspirierende Website-Designs Kein Wunder, dass der Artikel solche Datendesigns enthält , obwohl der Artikel aus dem Jahr 2016 stammt Das ist viel zu alt für Webdesign-Inspiration. Hinzu kommt, dass die genannten Websites wahrscheinlich einige Jahre vor dem Artikel erstellt wurden. Hinzu kommt die Tatsache, dass der Autor möglicherweise überhaupt kein Designer und Sie schreckliche Beispiele für Websites erhalten. So viele Anfängerdesigner machen diesen Fehler, sie suchen an falschen Stellen nach Inspiration für das Webdesign und fangen an, sehr veraltete oder hässliche Webdesign-Arbeiten nachzuahmen sehr veraltete oder hässliche Webdesign-Arbeiten hochwertige Inspiration für Ihre Projekte verwenden , werden Sie großartige Designergebnisse erzielen Und ich werde Ihnen meine Lieblingsorte beibringen, an denen Sie großartiges und schönes Webdesign oder eine andere Designinspiration finden großartiges und schönes Webdesign können. Eines davon ist dribble.com, das ist Dribble mit drei Bs Lassen Sie uns hier dieselbe Suche auf der Finanzwebsite durchführen. Hier sind einige der Ergebnisse aus nächster Nähe. Das ist meilenweit vor dem , was wir bei Google gesehen haben. Das Layout im Designstil und die Carls sehen hier frisch und modern aus, nicht aus den 90ern Dribble ist im Grunde Designer-Show-and-Tell. Um einen Beitrag zu leisten, musst du von einem bestehenden Mitglied eingeladen werden. Dadurch wird ein gewisser Checkpoint geschaffen, Dadurch wird ein gewisser Checkpoint geschaffen um schlechte Arbeit Der Suchalgorithmus unterscheidet sich von Google Two. Hier ist einer der Sortierparameter die Anzahl der Likes, d. h., wie vielen Designern die Arbeit gefallen hat. Das ist eine bessere Methode, gute Arbeit zu vermitteln, als ein zufälliger Finanz-Blogger, der Websites nach seinem Geschmack auswählt . Bei vielen dieser Arbeiten spielen Designer nur herum. Das bedeutet, dass sie noch nicht einmal in echte Websites umgewandelt wurden. Das ist eine Inspiration, die ihrer Zeit voraus ist. Nach einer Weile fängst du an, Designern zu folgen , die du magst, und baust dir eine sehr gute persönliche Inspiration auf. Sie wählen Designer aus, die einen Stammstil haben , den Sie mögen, und die über Design verfügen. Ich verwende diese beiden Websites auch , um mich inspirieren zu lassen. Diese Websites kuratieren Live-Websites und Landingpages. Wenn Sie nicht wissen, was eine Landingpage ist, handelt es sich um eine Seite auf einer Website, auf der ein Besucher landet Dies kann eine Startseite unserer Website oder spezielle Seiten sein, die für Marketing verwendet werden. Ich mag diese Seiten sehr , weil sie wirklich gut kuratiert sind Die Screenshots werden gut angezeigt, und ich kann mir die Live-Website ansehen und sie mir genauer Dort kann ich sogar Telefone sehen, die sie verwenden, Größen, Animationen und Interaktionen und sogar andere Seiten der Website sehen. Wirklich ein ausgezeichneter Ort , um Inspiration zu finden. Mein drittliebster Ort, um nach Inspiration zu suchen , ist eigentlich Pinterest. Bei Pinters muss man allerdings etwas vorsichtiger sein, es handelt sich nicht um kuratierte Inhalte von Genau wie bei Google kann man also ziemlich viele faule Äpfel bekommen Aber ich suche aus einem Grund nach Inspiration auf Pinterest. Sie haben einen fantastischen Suchalgorithmus , mit dem sie, egal nach welchem Bild Sie suchen, ähnliche Stile mit erstaunlicher Genauigkeit finden können. Wenn Sie beispielsweise einen Designstil finden, der Ihnen gefällt, klicken Sie auf dieses Symbol. Und sieh dir das an. Ohne dass ich etwas spezifiziere, handelt es sich um Oberflächendesigns, die sich im Stil sehr ähnlich sind. Sie sehen, dass die Beispiele auf der rechten Seite wellenförmige, glatte, abgerundete Formen und Kanten aufweisen, insbesondere bei diesem speziellen Design Es hat einen so ähnlichen Stil, es ist unheimlich. Hier noch ein Beispiel für einen ganz anderen Stil. Diesmal keine lebendigen Farben oder abgerundeten Formen, sondern eher fotografielastige Designs. Dies ist ein sehr mächtiges Tool für Designer. Oft finde ich einen bestimmten Stil, den ich möchte, aber ich kann keine anderen Beispiele desselben Stils sehen , weil ich sie nicht richtig in Worte fassen kann. Wenn ich mir Pinras ansehe, kann ich viele Beispiele desselben Stils finden und verschiedene Beispiele sammeln, um mich inspirieren zu Einfach so, weil eine großartige aber etwas fortgeschrittene Art, nach Inspiration zu suchen , darin besteht, außerhalb des Webdesign-Bereichs Ich habe zum Beispiel an diesem Projekt gearbeitet, das eine Website für wohltätige Zwecke war, und ich wollte etwas erstellen und gestalten, das erstklassig und etwas anders ist und nicht wie andere Websites für wohltätige Zwecke aussieht. Wo auch immer ich nach Inspiration suchte, alles, was ich fand, war dieses sehr verbreitete Thema traurig aussehender afrikanischer Kinder. Das sieht einfach sehr klischeehaft aus. Das tut mir leid, Kinder Stattdessen habe ich nach Filmplakaten gesucht, weil Filmplakate unglaublich gestaltet sind Sie zeigten viel Drama und Spannung. Ich habe dieses Poster von Sicario gefunden und der Stil hat mir sehr gut gefallen Ich habe das auf Pinters gemacht, was mir mehr Vorschläge gegeben hat, die ähnlich aussehen , und dann, bumm, dieses Poster ist aufgetaucht Das gab mir konkretere Ideen, wie ich ein Foto einer Person mit etwas anderem zusammenfügen könnte, so wie Peter Dinklags Gesicht mit der Hintergrundszene verschmilzt Dies führte mich dazu, einen Heldenbereich zu erstellen, überhaupt nicht wie eine Vorlage für eine Wohltätigkeitswebsite aussieht 53. Aufgabe: Mood-Board: Wenn Designer verschiedene Arbeiten zu ihrer Inspiration sammeln , arrangieren sie ein sogenanntes Moodboard Es geht im Grunde darum, alle Inspirationen zusammenzustellen, von denen Sie glauben, dass für Ihr Projekt nützlich sein Dies ist zum Beispiel ein Moodboard aus einem meiner Kundenprojekte Es gibt Bildschirme mit verschiedenen Homepages, die ich auf den Seiten gefunden habe , die ich zuvor erwähnt habe Sie können sich sogar von Ihrer eigenen Arbeit inspirieren lassen . Zum Beispiel ist eine dieser Aufnahmen, die ich hier gepostet habe, meine eigene Arbeit. Inspiration muss kein Website-Design sein. Sie könnten Illustrationen sammeln, die Ihnen gefallen, App-Bildschirme, Kunst, Architektur, Fotografie, Filmplakate oder, Sie wissen schon, Do Gun Tribe Mask genau wie Picasso. Es gibt keine Regeln. Es bestimmt im Grunde die Stimmung für Ihr Projekt, genau wie der Name schon sagt. In dieser Übung werden wir Erstellen eines Moodboards üben Ihr Ziel ist es, auf den bereits erwähnten Inspirationswebsites Inspiration für eine Website für eine Uber Kin R-Sharing-App zu sammeln für eine Website für eine Uber Kin R-Sharing-App Die App selbst ist nicht dein Projekt. Das Projekt ist im Grunde eine Website, wie eine Homepage für die Right Sharing App. Lassen Sie mich ein Beispiel demonstrieren. Ich mache ein Moodboard für eine Website zur Teamzusammenarbeit oder eine Landingpage Du weißt schon, wie Slack und Trello, falls du damit vertraut bist Ich habe meine Inspirationsseiten hier geöffnet. Aber zuerst werde ich anfangen, mir Websites anzusehen , ich weiß es bereits. Ich werde in Trello nachschauen, ob es sich bei Slack Asana um ein anderes Programm handelt , das ich kenne , und schauen, was sie tun Wenn dir eine Website, ein Abschnitt oder Teile der Seite gefällt , einfach einen Screenshot Wir werden alle Screenshots und Bilder später organisieren. Okay. Schauen wir uns jetzt andere Inspirationswebsites an. Dribble-Suche mit Schlüsselwörtern ist nicht so gut. Versuchen Sie also, so wenig Keywords wie möglich und S in verschiedenen Wörtern zu verwenden möglich und S in verschiedenen Wörtern Dieser ist nicht schlecht. Oft posten Designer auf Dribble den Bildschirm der ganzen Seite , den Sie im Anhang hier sehen können Auf diese Weise können Sie die gesamte Seite detaillierter sehen. Ich werde einfach die gesamte Seite speichern. Hier mag ich diese überlappenden Benutzeroberflächenelemente. Das ist nett, weil es mehr Vorstellung vom Produkt gibt. Schauen wir uns andere Inspirationsseiten an. Normalerweise verbringe ich ungefähr eine Stunde damit, Inspiration zu sammeln. Es ist ein wichtiger Teil des Designprozesses, und wenn ich diesen Teil gewissenhaft mache, fällt es mir leichter, fällt es mir leichter Ich nicht, ich muss oft zurückkommen und mehr Inspiration finden Antwort: Auf Pinterest speichere ich zufällige Inspirationen außerhalb von Projekten Wenn ich zum Beispiel zufällig im Internet surfe und auf ein interessantes Design stoße, werde ich es auf Pinterest speichern, damit ich später darauf zurückgreifen kann. Es ist ein großartiger Ort, um Ihre eigene persönliche Sammlung zu haben. Du kannst dein persönliches Board auf Pinterest erstellen , dann die Browsererweiterung installieren und Screenshots und Bilder aus dem Internet in deiner privaten Sammlung speichern Screenshots und Bilder aus . Dann kannst du später zu den Pints zurückkehren, wenn du nach Inspiration für dein Projekt suchst Jetzt werde ich vom Thema abschweifen, nicht unbedingt nach Websites zur Teamzusammenarbeit Das ist nicht schlecht. Dieser Abschnitt ist sehr reizend. Ich mag es, wenn sich Fotos mit diesen Grafiken überschneiden. La Paninja oder Landbook sind hervorragend, weil wir Live-Websites sehen können, die uns Ideen für Animationen und Interaktionen und all das geben können Animationen und Interaktionen und Ich denke, wir haben genug, und jetzt werden wir ein Moodboard in Figma erstellen und all diese Aufnahmen dort platzieren Zeichne einen einfachen Rahmen in Figma und ziehe all deine Ich verwende einen dunklen Hintergrund, weil die meisten Websites weiß sind, sodass sie auf einem dunklen Rahmen besser sichtbar Es ist eigentlich egal, wie du sie hier anordnest. Sie können sie streuen, wie Sie möchten. Ich. Und das ist alles, was dazu gehört Das ist unser Moodboard. Später werden wir lernen, wie wir uns tatsächlich von all diesen gesammelten Dingen inspirieren lassen und wie wir sie in Projekten verwenden können, während wir es entwerfen Jetzt sind Sie dran. Machen Sie weiter und sammeln Sie Inspiration für unsere Website, die für die R-Sharing-App gedacht ist. 54. Auftrag: Figma Homepage Design: Wissen Sie, wie Sie Inspiration für unsere Projekte sammeln können, und jetzt werden wir lernen, wie wir diese Inspiration für unsere Designs verwenden können diese Inspiration für unsere Designs Wie ich bereits erwähnt habe, besteht die Methode der Nachahmung aus drei Phasen Kopieren, Remix und in der letzten Phase Erstellen In dieser Lektion werden wir die erste Übung, das Kopieren, Sie werden eine der Produktseiten von Apple erstellen. Ihr Ziel ist es, ihrem Design so genau wie möglich zu entsprechen , Pixel für Pixel. Auf diese Weise werden Sie wertvolle praktische Erfahrungen sammeln. Sie werden üben, sehr verbreitete Website-Elemente wie Navigationsleisten und verschiedene Komponenten und Schuhe und all das zu entwerfen wie Navigationsleisten und , während Sie sich keine Gedanken über Farben und Schriften und Schriftarten und Layouts und all das Designkram machen müssen sich keine Gedanken über Farben und Schriften und Schriftarten und Layouts und Schriftarten und Layouts und , weil Sie nur das kopieren, was bereits da ist Ein kleiner Schritt nach dem anderen, genau wie Kochen oder Gitarre spielen zu lernen Öffnen Sie die Figma-Datei, die mit diesem Video verknüpft ist. Hier findest du den Screenshot der Seite. Es ist nicht die ganze Seite. Ich habe einige Abschnitte entfernt, um die Dinge einfach zu halten, und es ist vielleicht nicht die aktuelle Version, aber das ist okay. Das ist uns egal. Es ist ein ziemlich einfaches und zeitloses Design, also ist es perfekt für diese Aufgabe. Auf der rechten Seite befindet sich ein leerer Rahmen , in dem Sie genau diese Seite erstellen werden. , dass Sie bei der Arbeit an dieser Aufgabe Ich möchte, dass Sie bei der Arbeit an dieser Aufgabe all die Gestaltungsprinzipien beachten , die Sie bisher gelernt haben. Wie verwenden sie die visuelle Hierarchie? Welche Kontrastmethoden verwenden sie? Wie richten sie Elemente aus und so weiter. Mit dem, was Sie bereits in Figma geübt haben, wissen Sie genug, um diese Aufgabe zu erledigen Ich werde allerdings die Dinge in Angriff nehmen und einige Teile vorführen In diesem Frame habe ich den Screenshot der Homepage eingefügt . Es ist jetzt versteckt. Wenn Sie es aktivieren, sehen Sie die schwache Version des Screenshots Ich habe die Deckkraft verringert, weshalb ich diese 30% hier auswähle Es ist also nicht im Weg, also kannst du am Design arbeiten und Dinge darauf legen , ohne dass der Screenshot im Weg Lassen Sie uns zunächst das Raster zum Rahmen hinzufügen , um uns bei der Ausrichtung zu helfen. Wählen Sie Ihren Rahmen aus und fügen Sie unter der Layoutanleitung ein neues Raster hinzu, nicht dieses karierte Raster, sondern was wir wollen, sind Spalten, 12 wie üblich Und wenn wir diesen Abschnitt genau hier verwenden, diesen Abschnitt mit drei Spalten, können wir das Raster kalibrieren, weil dadurch die Ränder und die Rinne, die sie verwenden, sichtbar werden Rinne, die sie verwenden, Also, fangen Sie zum Beispiel mit den Rändern an und vergrößern Sie sie, bis Sie den Rand dieser kleinen weißen Karte erreichen dieser kleinen weißen Karte wenn Sie sie tatsächlich sehen können, weil Videoaufnahmen die Datei komprimieren und Sie das vielleicht nicht können, aber Sie können es genau hier sehen, Und die Dachrinne scheint tatsächlich 20 Pixel groß zu sein, also funktioniert sie einfach einwandfrei dieses Raster auf dieser Seite platzieren, erfahren wir, wie Apple mit dem Layout und der Verteilung von Elementen Dies ist eine sehr wertvolle Information in Ihrem Lernprozess. Sie erhalten Einblick in die Funktionsweise anderer Designs. Wir können zum Beispiel sehen, dass die Navigation hier, die Navigationsleiste, in der Fußzeile, genau hier, nicht wirklich den Rändern des Rasters oder den Rändern des Hauptinhalts folgt Rasters oder den Rändern des Hauptinhalts Der Hauptinhalt an einer anderen Stelle. In der Industrie ist es üblich, alles Kante zu Kante am Hauptbehälter auszurichten. Es sieht einheitlicher und ordentlicher aus, aber Apple wird seine Gründe dafür haben. Vielleicht Konsistenz mit ihrer Einkaufsseite oder ihrem Code-Stack oder etwas anderem. Erwarten Sie also keine strikte Übereinstimmung mit unserem 12-Punkte-Raster. Ja, obwohl es bei Designern zum Industriestandard gehört, ein 12-Punkt-Raster zu verwenden, handelt es sich dabei eher um eine lockere Richtlinie als um eine strenge Regel. Außerdem verwenden wir Grids Figma, weil es uns bei der Entwurfserkundung hilft Aber auf Produktionsseiten folgen wir nicht mehr dem Raster, weil wir responsive Websites erstellen , die sich wie Ziehharmonika verkleinern und dehnen, und wir verwenden sehr unterschiedliche Größenregeln um eine solche Reaktionsfähigkeit zu erreichen , wie Sie im Abschnitt Webflow sehen werden Fügen wir das Heldenbild ein. Ich habe alle Bildelemente in dieser Datei gespeichert , damit Sie sie problemlos in Ihr Design einfügen können. Sie befinden sich in diesem Asset-Sap unter dieser Komponentenbibliothek, die Sie von hier aus zugreifen können. Komponenten in Figma sind Elemente, die wir erstellen und später wiederverwenden können Dies ist eine coole Funktion, und wir werden in einer neuesten Lektion ausführlicher darauf eingehen in einer neuesten Lektion ausführlicher Im Moment benötigen Sie jedoch nur die Komponenten, um die Bildelemente abzurufen. Sie finden diese Bilder auch auf der Komponentenseite, die wir hier haben. Dies ist tatsächlich der Ort, an dem Figma sich alles schnappt, all diese Komponenten Wenn Sie etwas von hier löschen, wird es auch von der Asset-Seite verschwinden Suchen Sie also den Hero Shot im Assets-Bedienfeld und ziehen Sie ihn dann einfach so auf die Leinwand. Und dann richten Sie es einfach so aus, dass es zum Design passt. Wie Sie sehen können, hat dieser Heldenbereich einen Hintergrund mit Farbverlauf. Sie haben bereits mit Gradient gearbeitet, daher werde ich das hier nicht demonstrieren. Es ist okay, wenn du nicht weiterkommst. So lernt man. Sie können sich das Übungsvideo zu Soft Crop noch einmal ansehen, um Ihr Gedächtnis aufzufrischen, falls Sie möchten. Aber ich gebe dir einen kurzen Überblick über die Schritte. Um diesen Farbverlauf zu erstellen, benötigen Sie also ein Rechteck Richtig? Anstelle des aktuell ausgewählten Vollfeldes benötigen Sie die Gradientenfüllung. Und der Farbverlauf hat hier aufgehört. erste Station ist hier, zweite Station ist hier, und von dort steigt es ab Offensichtlich ist die Richtung nicht das, was Sie hier wollen. Sie wollen die vertikale Richtung, die Sie einfach ändern können, indem Sie diese drehen. So wie das. Also alles, was Sie jetzt tun müssen, ist die Farbe von diesem oberen Blau zu probieren, und dann muss das Ende und dann muss das Ende weiß sein, weil es, wie Sie sehen können, verbindet und verblasst und verbindet sich mit dem Rest der Seite, der weiß ist Das ist genau das, was wir mit einer Übung für weiche Pflanzen gemacht haben . Du weißt also, wie es geht. Vielleicht bleibst du stecken, aber das ist okay. Ich werde dein Gedächtnis auffrischen, aber ich möchte nicht alle Details demonstrieren. Sobald Sie das getan haben, müssen Sie natürlich dieses Rechteck hinter dem Euro-Bild platzieren , was Sie tun können, indem Sie die Ebenen anordnen, genau jetzt, das ist oben Und um es dahinter anzuordnen, kannst du die Ebene einfach nach unten ziehen und dadurch wird das Rechteck hinter deinem Bild rechts angezeigt. Außerdem gibt es Tastenkombinationen, die du verwenden kannst, zum Beispiel „Nach vorne bringen“, wodurch das Rechteck entsteht Es wird auch rückwärts gesendet. Und wie Sie sehen können, befindet sich daneben eine Verknüpfung, die Sie verwenden können Das wird für Sie insgesamt sehr nützlich sein. Merken Sie sich diese Idee also irgendwie, denn Figma, alles funktioniert in Schichten und Dinge gehen vor und hinter etwas, und so ist das Ebenen-Panel angeordnet, oder? Senden Sie also rückwärts und rückwärts, wir senden es eine Ebene Senden Sie es zurück, wir schicken es ganz nach hinten. Wenn ich also zurück schicke, brauchen wir das nicht, weil es ganz hinter dem Screenshot zurückbleibt . Wir wollen es eins nach dem anderen, was du wieder verwenden kannst, Steuerklammer, Befehlshalterung auf dem Mac und rauf und runter gehen. Die Schriftart, die sie verwenden, ist Apples Standardschrift , San Francisco Pro ab P. Wenn Sie einen Mac verwenden, ist sie standardmäßig dort, sodass Sie sie in Figma auswählen können Aber wenn Sie Windows verwenden, wird sie standardmäßig nicht dort sein Sie haben die Möglichkeit, es herunterzuladen. Apple hat Ressourcen. Ich verlinke, dass Sie es herunterladen und auf Ihrem Computer installieren können. Aber in Wirklichkeit müssen Sie das nicht, weil Inter quasi eine Kopie von San Francisco Phone ist Sie können also einfach Inter benutzen und sind einfach sehr nah am Telefon. Du musst San Francisco nicht benutzen. Aber wenn Sie auf einem Mac sind, tun Sie es, verwenden Sie ein San Francisco-Telefon, das SF Pro ist, und versuchen dann , die Größen und Gewichte anzupassen. Sie können mit Schriftgrößen und Schriftstärken spielen , um die genaue Übereinstimmung zu finden. Sie müssen hier nicht besonders präzise sein. Es ist in Ordnung, wenn die Buchstaben nicht exakt übereinstimmen, aber wenn Sie sich ins Zeug legen und versuchen, die genaue Übereinstimmung zu finden, ist das ein guter Lernmoment. Hier erfahren Sie, wie die Designer von Apple diesen Typ festgelegt haben. Wie schwer haben sie den Text gemacht, ob sie den Buchstabenabstand angepasst haben, welche Unterschiede in der Schriftgröße haben sie gewählt , um eine visuelle Hierarchie zu erstellen. Solche Informationen werden von Ihrem Gehirn aufgenommen und setzen sich dort ab, wenn Sie das nächste Mal an einem Projekt arbeiten. Sie verwenden hier eine Farbverlaufsfüllung für ihren Text, was genau wie jeder andere Farbverlauf funktioniert. Es befindet sich direkt unter der Füllung, und statt der Volltonfarbe wählen Sie einfach die Verlaufsfarbe. Und wieder hört es hier auf, das ist der Anfang, Anfang, der Anfang, das Ende, und Sie müssen nur eine Farbe von hier aus probieren, zum Beispiel eine andere Farbe von hier aus und dann das Ende oder den Anfang ausprobieren. Ja, das ist das Ende. Und dann was auch immer der Anfang ist und das war's. Eine Sache, die wir noch nicht behandelt haben, ist Schlaganfall. diese Schaltfläche zu erstellen, können Sie beispielsweise ein Rechteck zeichnen, den Eckenradius auf einen sehr hohen Wert erhöhen, sodass er vollständig abgerundet ist, und Sie können von hier aus eine Kontur hinzufügen und dann können Sie die Füllung entfernen oder sie weiß machen, und so erhalten Sie den Strich. Dieser Wert steuert hier die Stärke des Strichs. Diese Art von Linien hier sind nur die zweite Linie, die Sie hier auswählen oder L drücken können . Und während Sie diese Linie zeichnen, halten Sie einfach die Umschalttaste gedrückt, und ich schätze, dadurch wird die Achse gesperrt , und Sie erhalten eine perfekt vertikale Linie. Aber wenn du es nicht hältst, dann wird es so sein. Damit kannst du dich bewegen und du bekommst vielleicht keine genaue Linie und es wird ungefähr so aussehen. Um also eine perfekte Linie zu erhalten, halten Sie die Umschalttaste gedrückt, und sie wird perfekt vertikal sein. Das Gewicht wird auf diese Weise gesteuert, genau wie der Strich, Line verwendet tatsächlich auch die Stricheigenschaft. Und um die Farbe zu testen, gibt es tatsächlich eine nette Abkürzung, die Sie verwenden können. Sie können einfach I drücken. Es öffnet sich ein Farbmuster , wie Sie sehen können, und welches Element auch immer Sie ausgewählt haben, es füllt die Primärfarbe dieses Elements Für die Linie wird es also ein Strich sein, für etwas anderes wird es eine Füllung sein Um die Farbe hier zu ändern, mich nicht erinnern, dass wir das bereits mit 55% abgedeckt haben. Lassen Sie uns nun das Telefon ein wenig reduzieren. Recyceln Sie das Material nach Gewicht Um einen Teil des Textes einfach anders gestalten zu können, müssen Sie nur ziehen und auf diese Weise auswählen Also öffnest du das und probierst die Farbe aus. Das ist es. Und wenn Sie sogar eine andere Schriftstärke oder etwas anderes ändern müssen , ist dies von hier aus so möglich Und das ist so ziemlich alles, was du hier brauchst. Alles andere, was Sie hier sehen, sind nur Rechtecke. Und das heißt, wenn Sie zum Beispiel einen Abschnitt benötigen, diese Fußzeile und der untere Abschnitt eine andere Farbe, was nur ein Rechteck ist Auch hier: Lege einfach das Rechteck auf, probiere die Farbe aus, die du brauchst, und schiebe das Rechteck einfach irgendwo ganz nach hinten, richtig Nun, das ist eine Quelle, also irgendwo hier, richtig. Das ist alles, was du damit tun musst. Das sind auch Rechtecke. Und eine letzte Sache, nämlich den Inhalt, habe ich aufgenommen, weil ein Teil des Textes hier sehr viel Text ist, sodass Sie das nicht alles eingeben müssen Ich habe Text für diese Blöcke eingegeben, sodass Sie sie einfach von hier kopieren können. Und das war's. Hab Spaß. 55. Entwurf der Startseite für Chat-Anwendungen: Teil 1: diesen und den kommenden Videos wird das Remixen geübt, und dies wird unser erstes vollständiges Projekt vom Design bis zur Entwicklung Zuerst entwerfen wir eine Homepage und dann nehmen wir diese Homepage und bauen sie und entwickeln sie in Webflow Wir lassen uns inspirieren und anstatt sie zu kopieren, wie wir es mit Figma's Hmepage gemacht haben, werden wir sie neu mischen und wir werden unsere eigenen Inhalte, unsere eigenen Fotos und unsere eigenen Farben verwenden und einige Dinge ändern, wenn wir wollen und wenn wir Ich habe dieses wirklich schöne Design von Philip Stich und Balcom Brothers auf Triple gefunden Philip Stich Wir werden uns von Philips Designs inspirieren lassen, sie ein wenig remixen und darauf basierend eine neue Homepage entwerfen Dieses Mal werde ich den gesamten Prozess demonstrieren, damit ich Ihnen neue Dinge zeigen kann , die Sie in Figma lernen müssen Es wird interessant werden. Diese Demonstration ist lang und besteht aus vier Teilen. Am besten folgen Sie uns, also starten Sie Ihre Figma Wie immer befindet sich die Figma-Datei in den Ressourcen. Lassen Sie uns zunächst unseren Rahmen einrichten. Sie werden sehen, dass die Breite des Screenshots 14 und 40 Pixel beträgt. Dies hat die gleiche Größe wie ein Desktop-Rahmen in Figma. Fügen wir nun unser Raster zum Rahmen hinzu. Ich bin mir nicht sicher, welches genaue Raster sie dafür verwenden, aber wir werden unser eigenes 12-Punkte-Raster mit unseren üblichen Einstellungen verwenden, obwohl wir ihre Ränder an den Rändern anpassen sollten. Nicht der Rand in der oberen Navigationsleiste, sondern der Rand am Inhalt Um etwas in Figma zu messen, zeichnen Sie einfach ein Rechteck und überprüfen Sie dann die Abmessungen dieses Rechtecks Es ist 140 Pixel breit, also werden wir es als Rand für das Raster verwenden Da. Jetzt passt es sehr gut zu ihrem Layout. Es gibt einige Unterschiede in ihrem Layout, Beispiel befindet sich die Navigationsleiste außerhalb des Rasters, und einige andere Elemente scheinen auch eine andere Logik zu haben Aber was uns betrifft, werden wir uns so weit wie möglich an unser Raster halten Gut. Wir werden anfangen , den Helden zu entwerfen, zuerst den Hintergrund. Die Verwendung unserer eigenen benutzerdefinierten Farben ist eine großartige Möglichkeit, die Arbeit neu zu mischen Lassen Sie uns auf Dribble etwas Farbinspiration suchen. Für deine Designs möchte ich, dass du deine eigenen Farben verwendest, genau wie ich es gleich tun werde Ich werde mir ein paar Optionen schnappen. einfach einen Screenshot Ihrer Inspiration oder speichern Sie die Bilder, indem Sie mit der rechten Maustaste klicken und speichern unter. Wir werden sie später in Figma platzieren. gefällt mir wirklich. Kombinationen aus Blau, Gelb oder Blauorange sind spannende Farbpaare. Platzieren Sie jetzt einfach Ihre Screenshots in Figma, damit wir von dort aus Farben ausprobieren können Was ich gerne mache, ist , eine Farbe als Hintergrund und eine andere als Schaltfläche darauf zu legen und dann zu sehen, wie die Kombination zusammenpasst Einige Farben funktionieren vielleicht gut nebeneinander, aber wenn Sie eine Farbe übereinander legen, haben sie möglicherweise einen sehr geringen Kontrast. A a Sie sind beide ganz nett, aber ich werde mich für die blaue Option entscheiden . Sie können die Hintergrundebene über das Ebenenbedienfeld sperren , sodass sie nicht stört, wenn Sie andere Objekte darauf entwerfen . Lassen Sie uns nun den Inhalt hinzufügen. Zuerst müssen wir unsere Schriftarten auswählen. Die Schriftarten sind wie Farben ein guter Ort, um einen einfachen Remix vorzunehmen Aber manchmal gefällt uns die Typografie, die sie verwenden, wirklich die Typografie, die sie verwenden und wir möchten vielleicht dieselben oder ähnliche Schriftarten verwenden Wenn wir wissen, welche Schriftart sie verwenden, großartig, aber wenn wir sie nicht kennen oder wenn es kostenpflichtiges Telefon ist und wir nicht zahlen wollen, dann müssen wir eine ähnliche Alternative finden Das werde ich hier tun , damit Sie lernen können , wie Sie nach Schriftalternativen suchen können. Ich weiß nicht genau, was sie in ihren Designs verwenden, aber lass uns zu Google Fonts gehen und schauen, ob wir etwas Ähnliches finden können. Also werde ich die Ergebnisse eingrenzen. Es ist eindeutig eine Sounds Seri-Schrift. Ich werde denselben Text als Beispiel verwenden , weil es dadurch einfacher wird, ähnliche Schriften zu finden Beachten Sie, wie symmetrisch die Buchstaben sind. Der Buchstabe O ist ein perfekter Kreis statt eines gewöhnlichen Ovals, und das ist ein guter Hinweis Das größte Merkmal ist der Buchstabe A. Es ist nicht das übliche A, das man in den meisten Schriften findet. Es ist ein handgeschriebener Stil. Das sind genug Hinweise , um ähnliche Schriften zu finden. Schau, Montserrat ist ziemlich ähnlich. Das O ist auch ein Kreis, aber die A's sind anders Ich kann das benutzen, wenn ich nichts Näheres finde. Aber da passen Pop-Ins wirklich eng zusammen. Das O ist ein Kreis, und das A hat auch den gleichen Stil. Es gibt einige Unterschiede, aber das ist gut genug. In Ihrem Fall können Sie entweder dasselbe Telefon verwenden, Ihr eigenes auswählen oder das Telefon von einer anderen Inspiration beziehen, die Ihnen überlassen ist. Passen wir den Stil an. Es scheint, als ob das Gewicht etwas halbwegs fett ist. Die Zeilenhöhe ist enger als ein Standardwert, und das ist eine großartige Designentscheidung Bei großen Schlagzeilen wie dieser benötigen Sie eine engere Zeilenhöhe Denken Sie daran, was wir über die Schwerkraft von Schriftstärken gelernt haben die Schwerkraft von Schriftstärken Wenn Sie genauer hinschauen, werden Sie außerdem feststellen, dass die Buchstaben näher beieinander stehen. Dies mag der Standardwert für die jeweilige Schriftart sein , aber es ist sehr wahrscheinlich, dass sie den Buchstabenabstand verringern Auch das ist eine gute Idee. Eine große Schrift wie diese sieht mit einem engeren Abstand am besten aus Von hier aus können wir den Buchstabenabstand verringern. Was den Haupttext anbelangt, werden Sie beim Vergrößern feststellen, dass nicht dieselbe Schriftart wie die Überschrift verwendet wird. Das ist wahrscheinlich eine gute Idee, da dasselbe Telefon möglicherweise nicht die beste Wahl für Absatztext Es ist zu symmetrisch. Der Absatztext sieht neutraler und generischer aus , so als ob Roboto sogar derselbe sein könnte, also können wir ihn verwenden 56. Entwurf der Startseite für Chat-Anwendungen: Teil 2: Und wir sind zurück. Ich werde auch abgerundete Knöpfe verwenden. Sie können hier gerne einen Remix vornehmen, wenn Sie möchten, und rechteckige Schaltflächen verwenden Um die Knöpfe rund zu machen, vergrößern Sie einfach Eckenradius, bis sie vollständig rund sind Bei der Schrift sieht es so aus, als ob sie kleineren Absatztext verwenden , dafür aber einen dickeren Stil. Okay, das sieht ungefähr richtig aus. Der zweite Knopf ist ein sogenannter Ghost-Button. Diese Art von Tastenkombination ist ein großartiger Ansatz denn denken Sie daran, worüber wir bei der visuellen Hierarchie gesprochen haben , worüber wir bei der visuellen Hierarchie Sie möchten Ihr Publikum visuell von einem Element zum anderen führen . Wenn Sie zwei Schaltflächen nebeneinander haben und denselben Stil für sie verwenden, kann das Publikum nicht erkennen, welcher der Hauptbutton ist, der zur primären Aktion auf dieser Website führt . Um diese Ghost-Schaltfläche zu erstellen, müssen wir die Farbfüllung entfernen und der Form einen Strich hinzufügen. Ändern Sie dann die Farbe des Strichs. Lass uns das Raster überprüfen. Die Schaltflächen sind nicht am Raster ausgerichtet, aber das ist keine große Sache. Schaltflächen und Steuerelemente sind flexibel und sie werden je nach der darin enthaltenen Steuer kleiner und größer, sodass wir sie nicht in einem Raster zusammenpressen müssen Und manchmal ist es besser, es nicht zu tun. Aber in diesem Fall ist es ziemlich nah und kleine Knöpfe zu verkleinern schadet nicht, also werde ich diese bösen Jungs in ein Netz stellen Gehen wir zu unserem Hero Shot über. Es ist eine ziemlich interessante Collage. Ist dir einer der Designtricks aufgefallen, bei denen du den überlappenden Trick behandelt hast Lass uns eine ähnliche Kunst kreieren. Wir müssen ein paar ähnliche Fotos wie diese finden und hinzufügen ein paar ähnliche Fotos wie diese In Ordnung, das sollte reichen. Einige dieser Bilder funktionieren, aber kombiniert man keine Bilder. Denken Sie immer an die Lektion über Konsistenz Kombinieren Sie also Bilder, die sich vom Stil her sehr ähnlich sind. Diese beiden sind sich zum Beispiel ähnlich. Sie schauen nicht in die Kamera oder schauen nicht in sie und sie sind proportional zueinander, was bedeutet, dass die Fotos aus einer ähnlichen Entfernung aufgenommen wurden. Sie möchten diese beiden nicht zusammenbringen. Sieht aus, als hätten sie nichts miteinander zu tun. Die rechte schaut in die Kamera, schaut geradeaus und sie ist viel näher an der Kamera, wodurch ihr Gesicht größer wird. In Ordnung, die beiden sehen gut aus. kostenlosen Fotooptionen sind im Allgemeinen recht begrenzt, und es ist etwas schwieriger, den passenden Stil zu finden . Denken Sie also daran A nun Lassen Sie uns nun diese gepunktete Hintergrundform erstellen Zeichnen Sie einfach einen Kreis, wählen Sie Ellipse aus den Formen oder drücken Sie einfach auf O. Wenn Sie eine Ellipse zeichnen, halten Sie Schaft gedrückt, um einen perfekten Kreis zu zeichnen Fangen Sie dann einfach an, die Kreise horizontal und vertikal zu duplizieren , um so ein gepunktetes Raster zu erstellen A Wähle sie alle aus. Klicken Sie mit der rechten Maustaste, um eine Gruppe auszuwählen, oder verwenden Sie die Tastenkombination Strg oder Befehl G. Sie bei der Positionierung der Punkte hinter dem Bild darauf, Achten Sie bei der Positionierung der Punkte hinter dem Bild darauf, dass sie sich nicht merkwürdig mit einem Bild überschneiden. Achten Sie darauf, wie die Punkte rund um das Bild angeordnet sind , und versuchen Sie, gleiche Abstände zu verwenden Du willst keine unnötige Spannung erzeugen , indem du so etwas tust Lassen Sie uns nun einige Modellbildschirme für unser Produkt finden, genau wie sie es hier haben und auch etwas , das wir später hier unten verwenden können Was wir tun werden, ist ein kostenloses Design in der Figmas Community zu finden Du kannst das von HignasHmePage aus, dem Dashboard, tun , und es gibt einen Link, einen Tab für die Community. Und ich denke darüber nach, eine Art Chat oder eine Anwendung für die Teamzusammenarbeit als unser Produkt zu verwenden oder eine Anwendung für die Teamzusammenarbeit als unser Produkt . Ist nicht wirklich wichtig. Alles, was zu unseren Designs passt, ist ausreichend. Sie können nach Schlüsselwörtern wie Chat oder einer Chat-App suchen. Danke. Kann auch Team-Chat oder Chat-Dashboard oder Webchat oder Desktop-Chat sein, etwas, um mehr webbezogene Ergebnisse zu erzielen und nicht nur mobile Apps Und dann können Sie hier einfach die verschiedenen Optionen und die verschiedenen Community-Dateien durchgehen . Sie können kostenlos verwendet werden. Sie können sie verwenden, um zu sehen, was sich in der eigentlichen Datei befindet. Sie können bis zur Vorschau scrollen, und sie haben diese Seiten genau hier und Sie können zu wird tatsächlich die tatsächliche Seite in der FicMas-Datei angezeigt, wechseln, und Sie können in diesem Fall zu, sagen wir, einer Design-Seite wechseln, dann können Sie die tatsächlich richtige Ansicht des Designs überprüfen Ich habe diesen schon einmal gefunden , den werde ich verwenden Sie können dasselbe oder ein anderes verwenden. Ich habe das tatsächlich in die Aufgabendatei auf einer Hut-App-Bildschirmseite hier aufgenommen in die Aufgabendatei . Sie können es also von dort abrufen , wenn Sie dasselbe verwenden möchten. Um Community-Dateien zu verwenden, müssen Sie nur auf diese sich öffnende Figma-Schaltfläche klicken Dadurch wird die Datei in Ihrem Figma-Konto dupliziert und es ist Ihre Sie können es nach Belieben bearbeiten. Um dieses Modell in unserem Website-Design zu verwenden, müssen wir die Farbpalette übernehmen Es wäre nicht sinnvoll, wenn die Marke der Website blau wäre, aber das Produkt selbst grün wäre Da es sich um eine bearbeitbare Datei handelt, ist es einfach, die Farben zu ändern Nehmen Sie einfach den Farbcode aus Ihrem Design wählen Sie den übergeordneten Rahmen Erweitern Sie dann diesen Abschnitt mit den Auswahlfarben. Dadurch wird jede einzelne einzigartige Farbe enthüllt , die in diesem Design vorhanden ist. Finde das Grün und füge deinen Farbcode darüber ein. Drücken Sie die Eingabetaste, und dadurch wird jede einzelne Stelle aktualisiert , an der das Grün verwendet wurde. Dieser Header hier verwendet einen dunkleren Grünton, was bedeutet, dass wir einen dunkleren Blauton erzeugen müssen, was ganz einfach ist. Wir können hier wieder Farbe einfügen. Und mit dem HSB-Farbmodell können wir die Helligkeit einfach verringern Und wie Sie sehen können, ist es derselbe Farbton, aber es ist dunkler und es sieht aus wie Effekt , den das ursprüngliche Design anstrebte Jetzt können wir den gesamten Rahmen in unsere Projektdatei kopieren und von dort aus weiterverarbeiten. Sie können Designs ganz einfach zwischen verschiedenen Dateien kopieren, den Rahmen auswählen und zum Einfügen eine ganz normale Tastenkombination zum Kopieren und Einfügen von Strg C und Strg V verwenden eine ganz normale Tastenkombination zum Kopieren und Einfügen von Strg C . Gehen Sie zu Ihrer Datei und fügen Sie das Design ein. Ich denke, diese Chat-Blasen lassen sich wunderbar in unserem Hero Shot verwenden. Kopieren wir es in unser Dokument und sehen wir, wie wir sie verwenden werden. Ich denke, ich nehme ein paar kleinere und streue sie herum, um eine Art Chat-Erlebnis zwischen diesen Mädchen zu schaffen . Ich werde hier Gelb verwenden , weil ich es direkt auf den blauen Hintergrund setzen werde , also würde Blau nicht funktionieren. Und ändere auch die Profilfotos für die Mädchen. A Ich bin eigentlich ganz nett rausgekommen. Ich werde diese gestrichelte Linie hinzufügen. Es reicht so Zu viele Elemente können den Lärm verstärken. Eine Sache, die ich allerdings nicht mag, ist der gelbe Knopf. Früher war er nett und auffällig, aber jetzt, wo die Heldenkunst gelb ist, kämpft der Button um Aufmerksamkeit und versucht irgendwie, sich visuell mit der Kunst zu verbinden. Die Form hilft auch nicht. Die Schaltfläche ist abgerundet, und diese Nachrichtenfelder sind auch abgerundet, also viel zu viel Ähnlichkeit. Das Ändern der Farbe auf Weiß sollte dieses Problem beheben. Das ist viel besser. Jetzt sieht die Grafik eigenständig und der Inhalt auf der linken Seite wirkt wie ein eigenständiges Ding. Vorher war es irgendwie verschmolzen. 57. Chat-App-Startseite-Design: Teil 3: Wir sind zurück. Schließlich fügen wir die Na Bar und wir sind fertig mit unserer Helden-Action. Lassen Sie uns ein Logo für unsere gefälschte Chat-Anwendung erstellen und ihr einen originellen Namen geben, so etwas wie eine Chat-App. Wir können Poppins als Gesprächsfläche verwenden und einen ähnlichen Kontrast zwischen dünn und dick erzeugen, genau wie sie es auf ihrem Logo haben Erinnern Sie sich an diesen Trick aus der Kontraststunde, kombiniert dick und dünn und bam Sie haben ein interessantes Element. Fügen wir einige Navigationslinks und die Schaltfläche am Ende hinzu. Hier ist ein weiterer cooler Pigma-Ausflug. Wählen Sie alle Links aus und klicken Sie im Ausrichtungsfenster auf Aufräumen Dadurch werden Objekte normalerweise gleichmäßig zwischen ihnen Aber wir können noch einen Schritt weiter gehen und von hier aus den exakten Abstand zwischen den Elementen festlegen . Verwenden wir 30 Pixel , da dies unser Standardrand des Rasters ist. Wir brauchen einen Button. Lassen Sie uns aus einem dieser Links einen Button erstellen. Wenn wir eine Schaltfläche in die Navbar einfügen, ist es normalerweise am besten, dieselbe Kachel wie den Nag-Link zu verwenden . Sieht besser aus Verwenden wir denselben Abstand von 30 Pixeln von oben. Ich drücke hier die OUT- oder Wahltaste, um die Entfernungen zwischen Objekten zu sehen. Und wir werden alles in der Navigationsleiste horizontal in der Mitte ausrichten . Überprüfe deine Designs immer zu 100%, da es sich dabei um die tatsächlichen Größen und Abmessungen handelt , die auf die tatsächliche Seite passen. Nun zum mittleren Abschnitt, ich werde es etwas einfacher machen, nur mit einer Überschrift und nur einem Bildschirm unserer Chat-App, die wir bereits haben. Ich werde genau ihre Schriftfarbe verwenden. Es ist das, was man Schwarz nennen würde, schwarz, aber nicht so gesättigt und scharf wie normales Schwarz. Ich werde dieses Schwarz zu unserer Palette hinzufügen. Es ist auch eine gute Wahl für unsere Palette, da es innen etwas Blau hat, wie ein Blauton. Das können Sie in der Farbkarte sehen. Lassen Sie uns den Buchstabenabstand entfernen weil diese Überschrift nicht mehr so groß und schwer ist, wir also nicht mehr so viel engen Abstand benötigen. Machen wir dasselbe für den Absatztext. Ich glaube, sie verwenden hier die Light-Version, aber ich bin kein Fan von Telefonen mit dünnerem Absatz, weil sie auf Bildschirmen mit niedrigerer Auflösung manchmal schwieriger zu lesen sind. Auf Telefonen, Tablets und Laptops mit Retina-Display ist das in Ordnung, aber auf Desktop-Bildschirmen mit geringerer Pixeldichte werden sie nicht so scharf sein Ist Ihnen die visuelle Hierarchie aufgefallen , die sie hier geschaffen haben Der Absatz ist kleiner, dünner und heller. Ich mache dasselbe mit der Farbe. Wir können einfach die Opazität unseres Tes verringern. Und das ist genug. 70% sind gut. Ich werde mir nicht die Mühe machen, diesen mit echtem Text auszufüllen. Gehen wir zu Google und generieren wir einen Dummy-Text. Es gibt Websites, die das für uns tun können. Dies ist zum Beispiel eine Website. Wir können die gewünschte Textmenge angeben und sie kann sie für uns generieren und dann den Text kopieren und in unsere Designs einfügen. Zentrieren Sie es und fügen wir es in unser Raster ein. Es ist ein kleines T. Geben wir ihm etwas mehr Zeilenabstand. Das ist ungefähr richtig. Ich überspringe die Schaltfläche und füge das Modell unserer imaginären Chat-App Anstatt das Ganze in unser Dokument zu kopieren, werde ich es tatsächlich als Bild exportieren und stattdessen dieses Bild platzieren Wir werden die Arbeit damit vereinfachen und unsere Seite nicht mit unnötigen Elementen überladen. Um etwas aus Figma zu exportieren, wählen Sie es aus und gehen Sie im Eigenschaftenfenster zu Exportieren und klicken Sie auf Plus. Sie können für vieles eine andere Datei auswählen JPG ist gut für uns. In diesem Jahr heißt es ein X, sodass Sie die Größe des Exports ändern können. Wenn dort ein X steht, wird es in seinen exakten Abmessungen exportiert. Wenn es zwei x ist, dann verdoppelt es sich. Wenn Ihre Designs 200 x 300 Pixel groß sind, wird der Export 400 mal 600 Pixel groß sein. Das dient dazu , dass unsere Inhalte auf HD-Bildschirmen schön und gestochen scharf aussehen Mehr dazu später. Lassen Sie uns unseren Zellen nicht zuvorkommen, denn jetzt reicht ein x völlig aus. Platzieren wir unser Modell in unseren Designs. Wie Sie hier sehen können, verwenden sie diese Browserleiste darauf und auch einen Schatten dahinter. Lassen Sie uns die Browserleiste übergeben, aber unserem Bild einen ähnlichen Schatten hinzufügen. Schatten sind wirksam. Klicken Sie auf das Plus-Symbol. Das Erste ist normalerweise der Schatten. Es hat diesen kleinen Schatten hinzugefügt. Das sieht nicht sehr nett aus. Klicken Sie auf das Symbol, um die Schatteneigenschaften zu bearbeiten. Verwenden wir unser Schwarz als Basis für unseren Schatten. Es enthält dieses kleine Blau , wodurch es eher wie ein Teil unserer Designs aussieht. Wenn Sie Farbe mit 100% Opazität hinzufügen, erhalten Sie diesen seltsamen Schatten Tu das niemals. Das ist nicht wirklich ein Schatten. Die Standardeinstellung von Fig ist im Allgemeinen die maximale Deckkraft, die Sie für Ihre Schatten verwenden möchten Bei Unschärfe geht es im Grunde darum, wie der Schatten ausbreitet, wie er nach außen springt. Spielen Sie damit, damit Sie verstehen, wie es funktioniert. Sie verwenden eine starke Unschärfe und eine geringe Deckkraft für ihren Schatten Das gefällt mir sehr gut und wir werden etwas Ähnliches machen. X und y sind der Offset des Schattens, das heißt, in welche Richtung der Schatten fällt. X für den horizontalen Versatz und y für den vertikalen Abstand. Wenn sie auf Null liegen, fällt sie gleichmäßig auf alle vier Seiten. Wenn wir einen horizontalen Versatz hinzufügen, beachten Sie, wie sich der Schatten nach rechts bewegt. Wenn wir einen vertikalen Versatz hinzufügen, bewegt er sich nach unten. Oder wenn Sie negative Werte angeben, bewegt es sich nach oben. Eine gute Entwurfspraxis besteht darin, einen positiven vertikalen Y-Versatz hinzuzufügen , da Licht die meiste Zeit von oben kommt, sei es draußen in der Sonne oder drinnen durch die Deckenbeleuchtung, und wenn das Licht von oben kommt, wirft es Schatten, der nach unten zeigt Das sieht einfach komisch aus. Es sieht nicht einmal aus wie ein Schatten. Oft sehe ich, dass Websites überhaupt keinen Offset verwenden, und das ist nicht sehr natürlich. Das bedeutet, dass die Lichtquelle direkt von vorne kommt , als ob jemand ein Blitzlicht auf ein Objekt richtet, nicht sehr häufig vorkommt. Das Hinzufügen eines horizontalen Versatzes ist nicht sehr verbreitet. Manche Designer tun das, aber es ist nicht mein Ding, und ich denke nicht, dass es falsch ist, es zu tun, sondern für Elemente, die Teil der Benutzeroberfläche sind, wie dieses Bild, die Schaltflächen, Karten und so weiter. Ein Schatten, bei dem nur der vertikale Versatz vorhanden ist, sieht am besten aus. Halten Sie x auf Null und fügen Sie nur einen gewissen vertikalen Versatz hinzu. Das sieht ungefähr richtig aus. Ich schaue mir das an und verwende keine bestimmten Richtlinien für Schatten, sondern suche nur nach dem, was am besten, natürlichsten und fast unmerklich aussieht natürlichsten und fast unmerklich Das ist normalerweise das Beste für Schatten, dass es sich nicht so anfühlt, als ob sie da wären Andernfalls entstehen zusätzliche Formen , die unsere Augen verdauen müssen Sie verwenden abgerundete Formen in ihrem Modell. Es ist ziemlich nett Abgerundete Formen sind normalerweise die schönste Sünde im Webdesign. Sie fühlen sich eher wie ein fertiges Objekt als wie ein unvollendetes Objekt an. Natürlich haben strenge Kanten auch ihre Vorteile. Auch hier gibt es keine Regeln für das Abrunden der Ecken, aber wenn wir es an die Rundheit der Formen im Modell selbst anpassen , erzielen wir ein Und das ist ganz nett. Fügen wir die gepunkteten Muster dahinter hinzu. zu verwenden Es ist eine gute Idee, Formen wie diese Punkte oder andere Formen Sie fügen eine zusätzliche Dimension hinzu. All diese anderen Vorteile haben wir aus dem Trick der Überschneidung gelernt , denn genau das ist es, was sich überschneidet Es müssen nicht die Punkte sein. Es können Kreise, Rechtecke, Dreiecke oder jede andere Form Aber natürlich muss es Sinn machen. Wenn wir diese Punkte dann auf unseren Seiten wiederholen, profitieren wir von den Vorteilen des Wiederholungstricks Es erzeugt diesen Rhythmus des Designs genau wie ein Beat in einem Song und verbindet das gesamte Design A. Okay, ich werde die Boxen hier weitergeben. Ich werde sie nicht machen und zum nächsten Abschnitt übergehen. 58. Entwurf der Startseite für Chat-Apps: Teil 4: Und wir sind zurück mit dem letzten Teil vier. Dies hier ist ein Abschnitt mit Handlungsaufforderungen. Hier sagen Sie dem Publikum direkt, dass es Maßnahmen ergreifen soll, und fassen quasi die gesamte Seite Normalerweise befinden sich dort Schaltflächen oder direkt im Anmeldeformular Sie verwenden dasselbe Violett, aber mit geringerer Deckkraft, machen wir dasselbe mit unserem Blau. Es ist ganz nett 10% sehen ziemlich gut aus. Sperren Sie die Ebene , damit sie nicht im Weg ist. Ich werde diese Überschrift hier tatsächlich verkleinern, sodass das Wort klein in die nächste Zeile übergeht sodass das Wort klein in die nächste Zeile übergeht . Es wird besser aussehen Sie benutzen hier einen weißen Knopf, aber ich bleibe beim Geisterknopf. Ich drücke hier eine Out- oder Optionstaste , um die Entfernungen zwischen Objekten zu sehen. Mir gefällt ihre Sternebewertung und ein kleines Exemplar hier. Das nennt man Social Proof. Tolle Idee, so etwas in die Abschnitte mit Handlungsaufforderungen aufzunehmen . Erleichtert den Benutzern die Entscheidung. Okay, wir brauchen ein Sternsymbol. Gehen wir zu flaticon.com und suchen wir nach einem Sternsymbol. Wir können es von dort kostenlos herunterladen. Icons hier sind für den persönlichen Gebrauch kostenlos, aber wenn du sie irgendwo verwenden willst , musst du den Autor erwähnen oder sein Abonnement kaufen. Wir benötigen das SVG-Format, das in Figma bearbeitet Wir werden in der Lage sein, die Farbe zu ändern, wenn wir wollen. Auf Websites wie Flat ICN haben wir normalerweise zwei Dateiformate, in denen wir ein Symbol herunterladen können : PNG und SVG Wann immer möglich, sollten Sie das SVG-Dateiformat für Elemente wie Symbole und Illustrationen verwenden das SVG-Dateiformat für Elemente wie Symbole und Illustrationen Warum? Aus zwei Gründen. Erstens ist SVG ein vektorbasiertes Bild. Das bedeutet im Wesentlichen, dass Sie das Bild unendlich skalieren können das Bild unendlich skalieren Sie können es 1.000 Mal vergrößern und es wird nicht an Qualität verlieren Es bleibt perfekt knusprig. Die Dateigröße wird auch bei einem größeren Bild nicht zunehmen. Es ist also das ideale Dateiformat für Webdesign, sowohl für das Laden von Bildern als auch für die Qualität. PNG hingegen ist ein pixelbasiertes Format, sodass Sie es nicht vergrößern können. Was auch immer die ursprüngliche Bildgröße ist, Sie bleiben dabei hängen. Aus diesem Grund bietet die PNG-Download-Option hier verschiedene Größen, während SVG dies nicht muss. Der zweite Grund, warum SVG so schwer ist , liegt in seinen Bearbeitungsmöglichkeiten Ein SBG-Symbol kann in Figma wie eine normale Form bearbeitet werden in Figma wie eine normale Form bearbeitet Dies ist nützlich, da wir häufig Farben ändern möchten, um unsere benutzerdefinierte Farbpalette für das Projekt zu verwenden unsere benutzerdefinierte Farbpalette für das PNG kann nicht bearbeitet werden, Sie bleiben also bei der Farbe, mit der es geliefert wurde, hängen In diesem Fall möchte ich die Farbe des Sterns ändern und die gelbe Farbe aus unserem Projekt verwenden Leider ist sVIGI Download eine Premium-Funktion auf Flat Icon Dies ist normalerweise bei Websites mit großen Symbolanbietern wie dieser der Fall Websites mit großen Symbolanbietern wie dieser Wir haben jedoch die Möglichkeit, die Farbe direkt auf der Website zu bearbeiten und sie mit unserer benutzerdefinierten Farbe als PNG herunterzuladen. Sie müssen sich nur für ein kostenloses Konto registrieren. Sobald Sie sich angemeldet haben, können Sie die Farbe bearbeiten und den Hex-Code unserer benutzerdefinierten Farbe einfügen. Und laden Sie das Symbol kostenlos in PNG herunter. Neben Flat Con haben wir noch weitere Optionen, mit denen wir kostenlose Symbole herunterladen können. Manchmal sind sogar kostenlose SPG-Formate verfügbar. Ich habe solche Seiten auf der Ressourcenseite verlinkt , sodass Sie sie dort finden können Eine solche Option sind die Materialsymbole von Google. Ausschau nach dem Stern. Aktiviere diesen Schalter, um ihn zu füllen Ändern Sie den Stil auf abgerundet und laden Sie ihn im SVG-Format herunter. Wir können die Größe und Farbe und Figma ändern , das müssen wir hier nicht tun. Sie können es auch einfach von hier kopieren und dann mit Control V auf dem PC und Command V auf dem Mac in Figma einfügen mit Control V auf dem PC und Command V auf dem Mac Erinnerst du dich an den Aufräumtrick? Nein, ich kann den Abstand von hier aus anpassen. In Ordnung, sieht scharf aus. Statt eines Schreibtisches mit Computern werde ich hier tatsächlich ein Foto verwenden. Vielleicht ein Foto eines Teams, Büros oder eines Kleinunternehmers, um darzustellen, was in der Überschrift steht. Dieses Foto sieht ziemlich gut aus , so wie ein Startup mit einem Team, das an verschiedenen Orten arbeitet, also brauchen sie eine gute Kommunikationsplattform. Ich spiele hier nur herum, um zu sehen, was funktioniert. Wir könnten dieses Bild wie einen Hintergrund mit geteilten Abschnitten platzieren wie wir es in anderen Aufgaben getan haben, aber ich kann auch beim gleichen Stil bleiben , weil Beständigkeit belohnt wird und so etwas und an den Punkten hinter dem Bild gemacht wird. A Das sieht eigentlich ziemlich gut aus. Die Fußzeile und das war's. Wir sind kurz vor der Ziellinie. Lassen Sie uns das Logo kopieren und ihm einen blauen Kragen geben. befindet sich eine Mikrokopie Unter dem Logo befindet sich eine Mikrokopie. Wir können das Gleiche tun Ihre Fußzeile ist in vier Spalten unterteilt. einrichten Mit unserem eigenen Layoutraster können wir ganz einfach ein ähnliches Layout für uns Wir haben 12 Spalten in unserem Raster. Wenn wir es in vier teilen, erhalten wir drei Punktblöcke. Angesichts der kleinen Links könnten drei Spalten zu viel sein, also verwenden wir zwei Spalten für jeden Block. Wenn Sie es in sechs Blöcke aufteilen , passen sogar mehr in eine Zeile Das ist das Schöne an der Verwendung eines 12-Punkte-Rasters. Es lässt sich in viele flexible Varianten unterteilen. Ich werde diese beiden Spalten leer lassen, da diese Lücke zwischen Fußzeilenlinks und Logo oft sehr gut aussieht Dadurch entsteht diese visuelle Trennung zwischen den beiden, was Sinn macht, da sich das Logo von den Fußzeilenlinks unterscheidet Ordnung, jetzt füllen wir diese Links mit zufälligem Text An Stellen wie diesen ist es immer am besten, realistischen Beispieltext anstelle von Loren Epsom-Dummytext zu verwenden realistischen Beispieltext anstelle , da Sie je nach Textlänge das Layout möglicherweise ein wenig neu anordnen müssen neu anordnen Außerdem sieht es einfach hässlich aus, denselben Text zu wiederholen. Holen wir uns die sozialen Symbole und andere Links in die Fußzeile. Wir haben schon viel getan. Fügen wir einfach die Urheberrechtssteuer hinzu und das ist alles. H. Nun, lassen Sie uns einfach diese leeren Lücken schließen. Ich verwende 180 Pixel als Rand. Dabei gibt es keine Regel , es hängt davon ab, wie es aussieht, aber der wichtige Teil ist, konsistent zu sein, wenn Sie können. Ich verwende zum Beispiel einen Rand von 90 Pixeln im mittleren Bereich, also werde ich versuchen, denselben Wert für andere Ränder wiederzuverwenden . Aber manchmal ist es zu viel oder nicht genug. In solchen Fällen versuche ich, Vielfache desselben Werts zu verwenden, entweder die Hälfte oder das Doppelte, daher die 180 Pixel Wenn das nicht stimmt, verwende ich einen neuen Rand. Manchmal müssen wir vielleicht etwas inkonsistent sein , solange es sich richtig anfühlt Lassen Sie uns nun den überschüssigen Platz auf der Unterseite abschneiden. Vergessen Sie nicht, dabei die Strg - oder Befehlstaste gedrückt zu halten , da sonst der Inhalt im Inneren verzerrt werden könnte Wenn Sie fertig sind, wählen Sie den Rahmen aus und drücken Sie auf das Play-Symbol Wir können jetzt die Präsentation unseres Designs sehen. Sieht toll aus. Eine kurze Anmerkung zum Vorschaumodus Manchmal sieht Ihre Vorschau vielleicht so aus , dass Sie nicht den ganzen Frame sehen. Wenn Ihnen das passiert, bedeutet das, dass Ihr Bildschirm auf Ihrem Computer nicht so breit wie der Frame ist und unsere Framegröße 144 Pixel beträgt, oder? Wenn Ihr Bildschirm also kürzer oder kleiner ist , passiert das normalerweise bei Laptops. Dann wird nicht alles auf dem Bildschirm angezeigt. Aber es gibt eine Lösung dafür, einfach hier mit der Maus nach oben zeigen, die Leiste wird angezeigt und Sie gehen zu den Optionen und ändern Sie dann von hier aus, was jetzt 100% ist, und passen Sie es an Und sobald Sie das getan haben, passt es , der Rahmen passt zu Ihrem Bildschirm, unabhängig von der Größe Ihres Bildschirms In seltenen Fällen kann jetzt ein anderes Problem auftreten, das möglicherweise nicht hilft. Und das ist der Fall, wenn Sie etwas anderes als die Prototyp-Einstellungen ausgewählt haben . Um also zu den Prototyp-Einstellungen zu gelangen, müssen Sie weder einen Rahmen noch eine Ebene ausgewählt haben. Klicken Sie auf die Leinwand, sodass alles abgewählt ist , und gehen Sie dann zum Prototyp Und stellen Sie beim Prototyp sicher, dass in der Geräte-Dropdown-Liste nichts ausgewählt ist der Geräte-Dropdown-Liste nichts ausgewählt Wenn es ein iPhone oder eine Maßanfertigung oder etwas Ähnliches gibt, wird es einen seltsamen iPhone-Bildschirm haben oder etwas Seltsames wird hier im Vorschaumodus angezeigt. Stellen Sie also sicher, dass keine ausgewählt ist. Und wenn Sie zur Vorschau gehen und wenn Sie hier einige andere Ebenen haben, habe ich einige andere Ebenen und Rahmen auf der Seite. Es könnte also versuchen, eine Vorschau eines anderen Frames anzuzeigen. Stellen Sie sicher, dass Sie Ihren Desktop-Rahmen auswählen und dann auf die Vorschau klicken Dann wird eine Vorschau des richtigen Frames angezeigt. Und das ist alles. Indem wir uns für eine hervorragende Inspiration entschieden haben, haben wir eine fabelhaft aussehende Homepage entworfen und erstellt. Das ist die Macht guter Inspiration. Ich hoffe, Ihnen hat der Prozess gefallen. Ich bin sehr gespannt auf Ihre Einreichung. Im kommenden Teil dieses Kurses werden wir genau diese Seite in Webflow erstellen . Bleib hier. 59. TEIL 3: WEBENTWICKLUNG (WEBFLOW): wir werden eine Pause von entworfen machen. Für jetzt. Es gibt mehr Lektionen über Design und ein komplettes Kundenprojekt von Anfang bis Ende. Aber dazu kommen wir. Jetzt. Lassen Sie uns etwas Spaß haben zu lernen, wie man tatsächlich Websites in diesem Teil des Kurses erstellt. Du wirst lernen, wie man Websites mit Wrack Flow entwickelt, und wir werden das tun, indem wir die Homepage, die wir gerade entworfen haben, nehmen und sie innerhalb des Nassflusses bauen , also lasst uns gehen. 60. Webgrundlagen: Webflow-Designer: Sie haben das schon einmal gesehen, aber lassen Sie uns kurz zusammenfassen , was in iFlow ist Wenn sich dies auf Ihrem Startbildschirm befindet, befinden Sie sich möglicherweise auf anderen Seiten Klicken Sie also einfach zurück zum Dashboard. Ich werde auch an dem kostenlosen Konto arbeiten , um sicherzustellen, dass Sie die gleiche Erfahrung machen. Es gibt eine ganze Reihe von kostenlosen und kostenpflichtigen Vorlagen, aber wir sind nicht im Geschäft mit diesen, also wählen wir eine leere Seite aus. Das nennt man den Designer. Hier passiert die ganze Magie in Webflow. Während wir unsere Seite entwerfen, wird sie auf dieser weißen Leinwand angezeigt, und wir werden mit Elementen direkt auf dieser Leinwand interagieren können mit Elementen direkt auf dieser Leinwand In der linken Werkzeugleiste haben wir unsere Steuerelemente, mit denen Sie zum Dashboard, zu den Projekteinstellungen oder zum Editor zurückkehren können. Darunter befinden sich drei wichtige Panels. Das erste ist das Elemente-Panel. So fügen wir der Seite neue Elemente hinzu. Dann haben wir das Seiten-Panel. Dadurch werden alle Seiten unserer Website angezeigt. Von hier aus können wir neue Seiten hinzufügen und deren Einstellungen verwalten und so weiter. Bei einem kostenlosen Tarif erhalten wir nur zwei statische Seiten, aber wir bekommen ein bisschen mehr CMS-Seiten. Und dann haben wir das Navigator-Panel, das dem Ebenen-Panel in Figma ähnelt, aber nicht genau dasselbe ist , weil das Web ein bisschen anders funktioniert als die Design-Interface-Tools wie Sie müssen sich vorerst keine Gedanken über andere Dinge der linken Werkzeugleiste Wir werden uns um sie kümmern , wenn wir müssen. In der Mitte haben Sie diese verschiedenen Geräteansichten. Hier machen wir unsere Website responsiv und optimieren sie für verschiedene Geräte, um eine moderne Website zu haben , die auf jedem Bildschirm und jedem Gerät gut aussieht . Wir sind auch in der Lage, die Bildschirmgröße für jedes Gerät, z. B. für Mobilgeräte, zu ändern und zu optimieren, um sicherzustellen, dass er auf allen Arten von Mobilgeräten gut aussieht , nicht nur auf einem Wenn Sie die Größe ändern, können Sie sehen , dass in verschiedenen Breiten angezeigt wird, welche gängigen Geräte diese bestimmte Breite verwenden Und um die Seite auf Webflow zu veröffentlichen, können wir das von hier aus tun Sie können sie kostenlos auf der Domain von Webflow veröffentlichen. Für eine benutzerdefinierte Domain müssen wir einen Hosting-Plan hinzufügen. Und auf der rechten Seite haben wir unser Stil-Panel. Hier manipulieren und gestalten wir jedes einzelne Element auf der Seite. Das kannst du erkennen. Es ist dem FigmaSperties-Panel auf derselben Seite ähnlich FigmaSperties-Panel auf derselben Genau wie bei Figma wird hinzugefügt, was gerade ausgewählt ist . Es gibt viele ähnliche Eigenschaften wie Größe, Topographie, Schriftname, Schriftgröße usw. sowie Effekte wie Unschärfe und Es gibt mehr Tabs auf der Website, aber darüber müssen wir uns vorerst keine Gedanken machen Wir werden es durchgehen, wenn wir es tatsächlich müssen. Und das war's. Das ist eine kurze Einführung in das Webflow-Design 61. Web-Grundlagen: HTML und CSS: A Als 1991 die erste Webseite online ging, sah sie so aus. Sie ist immer noch live, falls du sie dir ansehen willst. Diese erste Webseite wurde vom Erfinder des Worldwide Web, Tim Berners Lee, in Cern erstellt, einem Kernforschungslabor in der Schweiz, das einem Kernforschungslabor in der Schweiz, überraschenderweise nichts mit Computern zu tun hat Ich war tatsächlich am CERN. Ich war zeitweise von meinem Job auf Geschäftsreise und wurde in genau den Raum gebracht, in dem das Worldwide Worldwide Web von Tim Berners Lee eingerichtet wurde, und der Raum ist völlig bescheiden Man würde nicht wirklich glauben , dass etwas Kreatives dabei herauskam Es sieht einfach aus wie ein normales Chemie- oder Physiklabor einer normalen High School. Und mir wurde diese Geschichte erzählt. Als Tim seinen Artikel über Worldwide Web einreichte, sagte sein Vorgesetzter, der das Papier bei der Überprüfung aufgeschrieben hatte, offenbar seinen Artikel über Worldwide Web einreichte, sein Vorgesetzter, der das Papier bei der Überprüfung aufgeschrieben vage, aber interessant Ich bin mir sicher, dass zu dem Zeitpunkt keiner von ihnen eine Ahnung hatte, wie die Websites und das Internet am Ende aussehen würden Heute wurde die allererste Webseite mit HTML erstellt, und bis heute ist es immer noch das, woraus jede Website besteht. Wenn wir Webflow lernen, müssen wir tatsächlich lernen, wie HTML und CSS funktionieren Wir werden nicht lernen, wie man programmiert, aber wir werden die Logik dahinter lernen weil alles in Webflow irgendwie auf dieser Logik basiert HTML ist einfach der Inhalt der Webseite, wie eine Überschrift, ein Textabschnitt oder ein Bild Und jeder Teil dieses Inhalts hat eine Bezeichnung, die dem Browser mitteilt, ob es sich um die Überschrift, einen Absatz, einen Link oder etwas anderes handelt. Sie nennen das ein Tag. HTML allein ist nicht sehr hübsch. Es hat ein vertikales Layout. Alles ist nacheinander gestapelt. Sie können Elemente nicht wirklich überlappen oder Raster und Spaltenlayouts erstellen Es ist wie ein Textdokument, in dem der gesamte Inhalt nacheinander in vertikaler Richtung fließt nacheinander in vertikaler Richtung Webdesign gab es damals nicht wirklich. Es war nicht viel Design involviert, aber dann kam CSS und die Website wurde ganz anders. CSS ist der Stil der Website. Hier definieren wir, wie jedes dieser HTM-Elemente aussehen soll Welche Größe sie haben sollten, welche Schriftart, welche Farbe, wie sie auf der Seite angeordnet sein sollen, ob sie irgendwelche Interaktionen mit der Maus haben sollen und so weiter Eine Webseite, die nur HTML enthält, sieht aus wie ein Skelett, und nachdem Sie CSS darauf angewendet haben, ist sie wie eine ganze Person In Webflow fügen wir HTM-Elemente aus dem Elemente-Panel hinzu. Und wenn wir uns das Codex-Board ansehen, werden wir feststellen, dass auch dort zwei HTML-Elemente hinzugefügt wurden, H ein Tag für die Überschrift und P-Tag für den Dies sind standardmäßige HTML-Elemente ohne Stil. Wenn Sie den CSS-Tab überprüfen, werden Sie feststellen, dass er leer ist. Wir haben unseren Elementen noch keinen Stil hinzugefügt. Der Stil wird im Bedienfeld „Stile“ von rechts hinzugefügt. Wir haben selbst keinen Code geschrieben oder CSS geschrieben, aber Webflow hat das für uns erledigt Jetzt enthält der CSS-Tab einige Stilinformationen. Es ist im Grunde eine Anweisung, die besagt: Wenn ein Element eine Namensüberschrift hat, mache es rot und 58 Pixel groß. Das ist einfach. 62. Web-Grundlagen: Das Box-Modell: Bevor wir mit dem Aufbau unserer Seite beginnen, möchte ich zunächst die Struktur einer Webseite erklären. Jede Webseite ist in einem sogenannten Box-Modell für das HTM strukturiert , jedes Element ist in Wirklichkeit eine Box Unabhängig von ihrer endgültigen Form und ihrem Inhalt beginnen sie alle als Box Und all diese Boxen sitzen tatsächlich in anderen großen Boxen, bis hin zur letzten großen Kiste, in der alles andere Platz findet. Und das ist unsere Webseite. Als wir unsere Navigationsleiste in Figma entwarfen, haben wir unsere Links einfach genau dorthin gezogen , wo wir sie platzieren wollten Figma und andere Designtools verwenden jedoch ein anderes Modell. Das Ebenenmodell kann man sich in Figma als Papierregale vorstellen in Figma als Papierregale Jedes neue Objekt befindet sich auf einem vorhandenen Objekt, nicht darüber, sondern direkt darüber Es schafft im Grunde eine neue Raumebene und ist der König und einzige Bürger dieses Raums. Wenn sich etwas anderes direkt darunter befindet, ist der untere Teil überhaupt nicht sichtbar bis wir ihn im Ebenenfenster nach oben schieben. Genau das, was passiert, wenn man Papiere übereinander legt. Heutzutage sind Webseiten eher wie Schubladenorganisatoren. Wenn eine Schublade in Boxen unterteilt ist, die für sich genommen in noch kleinere Boxen in Schubladen unterteilt werden können , die Dinge normalerweise nicht übereinander. Sie liegen entweder unter - oder nebeneinander. Wenn wir unsere Nap-Bar mit HTML erstellen, nehmen wir zuerst ein leeres Feld und fügen unser Logo und unsere Linkfelder hinein. Die größere Box wird als übergeordnetes Feld bezeichnet und kleineren Boxen darin werden als Kinder bezeichnet. Und diese Boxen für Kinder sind die Geschwister des jeweils anderen, genau so, wie man es erwarten würde. Standardmäßig kommen sie nacheinander, weil jedes Tier so ohne CSS funktioniert. Dann werden wir einen CSS-Stil anwenden. Also sind all diese Boxen horizontal angeordnet. Mithilfe anderer CSS-Eigenschaften und einiger weiterer Boxen können wir sie dann genau so verteilen, wie wir es möchten. Keine Sorge, Sie werden in kürzester Zeit den Dreh raus haben. Wenn Sie jemals nicht weiterkommen, um herauszufinden , wie etwas funktioniert, ist die Lösung höchstwahrscheinlich eine andere Box. Webflow ist so freundlich, uns die Grenzen unserer Boxen aufzuzeigen Wenn Sie auf ein Element klicken, wird Ihnen das gesamte Feld angezeigt , das dieses Element einnimmt Wie Sie sehen, erstreckt sich das Feld über die gesamte Seite, obwohl unsere Überschrift kurz ist . Das ist das Standardverhalten der meisten HTML-Boxen, auf die kein CSS angewendet wird. Und standardmäßig kommen all diese Boxen nacheinander, es sei denn, Sie legen sie in eine andere Box. 63. Webflow: Elementhierarchie: Wenn wir unsere Seite in Webflow erstellen, werden wir viele Boxen haben Viele der kleineren Boxen werden in anderen größeren Boxen Platz finden, und diese größeren Boxen werden in noch größeren Boxen sitzen Verirrt euch nicht in diesem Dschungel von Boxen. Webflow hat ein Navigator-Panel, das Sie hier finden. Dieser Navigator ähnelt dem Ebenenbedienfeld von Figma. Alles, was wir zu unserer Seite hinzufügen, finden wir hier. Selbst unsichtbare Objekte, Elemente in diesem Panel, sind nach der Logik des Box-Modells angeordnet . Die erste Box auf oberster Ebene, in der sich alles befindet, wird Körper genannt. Nichts geht neben oder außerhalb davon, alles geht hinein. Es ist der Ur-Ur-Ur-Urgroßvater aller Kinderboxen. Deshalb gibt es diesen leichten Einzug der die Hierarchie der Elemente darstellt und zeigt, was sich in dem Kästchen befindet , das wir dieses Verschachteln nennen Die Überschrift und der Absatz sind innerhalb des Textkörpers verschachtelt. Reflow zeigt uns diese Hierarchie mit den Zeilen zwei. Wenn wir ein leeres Feld nehmen und unsere Überschrift hineinlegen , erscheint die Zeile Diese Zeile ist eine hilfreiche Anleitung, um die Hierarchie der Elemente leicht zu identifizieren. Hierarchie ist hier ein großes Thema, viele der Eigenschaften werden von den Eltern an die Kinder weitergegeben . Das nennt man Vererbung. Das Kind erbt die Eigenschaften vom Elternteil, genau wie im echten Leben Wenn ich zum Beispiel die Schriftfarbe des übergeordneten Elements auf Rot ändere , jedes Textelement, das ich wird jedes Textelement, das ich in das übergeordnete Element lege, ebenfalls gelesen , und zwar alle Unabhängig von der Art des Textes lasse ich ihn fallen, Überschrift und Absatz, Aufzählungspunkt oder was auch immer. Das ist so, bis ich es überschreibe. Wir müssen keine exakten Kopien unserer Eltern sein. Richtig. Wenn wir uns dafür entscheiden, anders zu sein, können wir den Textstil des untergeordneten Elements direkt ändern . Das nennt man Überschreiben. Nicht alle Eigenschaften können vererbt werden. Dies gilt hauptsächlich für Textilien. Webflow kann uns zeigen, ob bei einem Element eine Vererbung stattfindet Siehst du, wie einige der Stile orange hervorgehoben sind Das bedeutet, dass der Stil vererbt wird . Wenn Sie darauf klicken, wird Ihnen angezeigt, woher er übernommen wurde. Bei der Farbe steht es zum Beispiel als de-Block bezieht sich auf das übergeordnete Feld, das wir gerade bearbeitet haben. Später erkläre ich , was ein Deblock ist. Der Stil ist stattdessen blau hervorgehoben . Das heißt, wir haben diese Eigenschaft direkt formatiert und sie überschreibt alle Stile der übergeordneten Sie müssen das vorerst nicht vollständig verstehen . Sie werden den Dreh raus bekommen, während wir geübt und unsere Seite erstellt haben. Die zweite visuelle Darstellung der Hierarchie der Elemente ist der unteren Navigatorleiste sichtbar. Es zeigt, dass sich die Überschrift innerhalb des Blocks befindet , der sich im Hauptteil befindet. Diese sind anklickbar und Sie können jedes der übergeordneten Elemente auswählen Aber es werden weder Kinder noch Geschwister angezeigt, sondern nur die Eltern bis hin zum Körper Für ein vollständiges Bild ist das Navigator-Panel besser geeignet. Das Gleiche gilt natürlich für das Navigator-Panel. Wenn wir genau wie Figma ein Element im Panel auswählen, bearbeiten wir genau das Element in Figma Wenn wir Elemente im Ebenenbedienfeld nach oben und unten verschieben, ändert sich die Position des Elements nicht, es wird einfach hinter oder vor ein anderes Wenn sie sich überlappen, wenn sie sich nicht überlappen, dann passiert visuell nichts wirklich Aber in Webflow ändert sich die Position. Verschieben eines Absatzelements im Navigator ändert sich die Reihenfolge der auf der Leinwand angezeigten hohen Gewichte Wir können dies auch tun, indem wir uns auf der Leinwand nach rechts bewegen. Sie werden feststellen, dass das Navigator-Bedienfeld entsprechend aktualisiert wird. Wir können auch Elemente in Felder im Navigator-Bedienfeld und ziehen und die gesamten Boxen verschieben , wodurch alle drei untergeordneten Elemente mitverschoben werden alle drei untergeordneten Elemente mitverschoben Okay, diese Webstruktur mag sich am Anfang etwas verwirrend anfühlen, aber machen Sie sich nicht schnell Sorgen, Sie werden sich daran gewöhnen 64. Webflow: Abschnitt, Container, Div-Block: Okay, in diesem Abschnitt werden wir lernen, indem wir Webflow nicht Feature für Feature lernen, sondern wir werden es tatsächlich lernen, indem wir unsere Homepage, die wir bereits entworfen haben, erstellen , und zwar Stück für Stück, Schritt für Schritt, Schritt für Schritt wild Denken Sie daran, dass wir alle Vor- und Nachteile von Webflow nur dann lernen alle Vor- und Nachteile von Webflow Ich werde keine Funktion behandeln, bis wir tatsächlich an einem Punkt angelangt sind, an dem wir sie tatsächlich benötigen, um sie zu verwenden wir sie tatsächlich benötigen, um sie zu verwenden, während wir unsere Homepage erstellen und Wir werden also das Design nehmen, das wir erstellt haben, und dann jeden Abschnitt für Abschnitt durchgehen und es in Webflow neu erstellen und neu erstellen Und fangen wir einfach mit unseren Inhalten auf der linken Seite im Heldenbereich an Bevor Sie anfangen, etwas in Webflow zu erstellen, müssen Sie zunächst in Ihrem Kopf planen welche Art von Layout benötigt wird Also, was haben wir hier? Wir haben einen blauen Hintergrund. In Figma verwenden wir dafür ein Rechteck. In Webflow haben wir solche Dinge wie Rechtecke nicht. Wir haben stattdessen Boxen. In Webflow gibt es drei Arten von leeren Boxen. Sie finden sie direkt hier im Elements-Bedienfeld. Elements-Bereich speichert Webflow alle neuen Elemente, die wir benötigen Es ist in Bedarfskategorien wie Typografie unterteilt, wo Sie eine Überschrift, einen Absatz und alle textrelevanten Elemente haben und alle textrelevanten Wir haben also drei leere Boxen für unseren allgemeinen Gebrauch, Container und einen Tauchblock Ein Abschnitt ist genau das , was er sagt. Es ist ein leeres Feld, in dem wir einen Abschnitt unserer Seite organisieren können , in dem wir einen Abschnitt unserer Seite organisieren Genau so haben wir unsere Designs organisiert, nicht wahr? Wir haben einen Heldenbereich, dann mehrere Abschnitte weiter unten. Endlich der Fußzeilenbereich. Das sind alles Abschnitte, und so werden wir sie auch in Webflow organisieren In den Container legen wir den Inhalt unserer Seite. In unseren Designs ist es alles, was wir in die Grenzen unseres Grids gesteckt haben . Die beliebteste Box in HTML ist ein DV-Block, kurz für Division Block Es ist ein leeres Feld und die nützlichsten Grundbausteine einer Webseite Es gehört zur Kategorie Basic. Welches davon brauchen wir zuerst? Offensichtlich ein Abschnitt. Fügen wir unserer Seite also einen neuen Abschnitt hinzu. Abschnitt und DE-Block sind identische Elemente. Sie funktionieren genau auf die gleiche Weise. Also alles, was ich gerade für einen Abschnitt beschreibe , gilt auch für den DL-Block. Ein Abschnitt oder ein D-Block ist also eine leere Box. Da ist nichts drin. Diese Kiste hat eigentlich keine Höhe, bis wir ihr eine gewisse Höhe geben. Webflow zeigt uns vorübergehend ein bisschen Höhe an damit wir sie erkennen können und uns nicht verrückt machen, wenn wir danach suchen Es ist auch eine Sprachbox. Wenn Sie andere Elemente darin platzieren, wächst es so, dass es der Höhe seines untergeordneten Elements entspricht. Geben wir ihm eine Farbe, damit wir besser verstehen können , was damit passiert. Das können wir im Hintergrund machen. Die grundlegenden Dinge im Inneren, das Snile-Bedienfeld ist dem Eigenschaftenfenster von Figma sehr ähnlich, sodass Sie sehr einfach damit arbeiten können Wenn wir jetzt die Vorschau aufrufen, verschwindet der Abschnitt. Warum ist das so? Weil es leer ist und keine Pixelhöhe hat. Es ist unsichtbar. Webflow gibt ihm nur eine temporäre Höhe direkt im Netzdesigner, damit wir es sehen können Wenn wir ein Bildelement hineinziehen, erstreckt es sich von null Pixeln bis zur exakten Höhe des Bildelements , das wir gerade hineingelegt Jetzt ist das Ganze auch im Vorschaumodus sichtbar , da es nicht mehr eine Pixelhöhe von Null hat. Wenn du etwas Kleineres hineinlegst, wie ein kleines Etikett, dann wird es kleiner. Aber es ist nicht wirklich geschrumpft. Es waren null Pixel. Es schrumpfte einfach nur innerhalb des Designers, weil es diese temporäre Höhe hatte Ich hoffe, du hast den Dreh raus. Ich erinnere mich, dass dieses seltsame Verhalten für mich am Anfang etwas verwirrend war . Deshalb wollte ich von Anfang an klarstellen , dass Sie die grundlegende Logik verstehen und verstehen, wie die Struktur auf der Website gebildet wird. Probieren Sie es jetzt selbst aus, und dann werden wir unseren Bereich weiter gestalten. 65. Webflow: Größeneinstellungen: Wir sind zurück. Geben wir diesem Div-Block nun dieselbe blaue Farbe wie in unseren Designs. Um die genaue blaue Farbe von Figma zu erhalten, wählen Sie das Farbfeld oder ein Hintergrundrechteck aus und kopieren Sie dann den Code aus der Feldfarbe Wenn Sie das Hintergrundrechteck nicht auswählen können, vergessen Sie nicht, dies zu überprüfen Vielleicht hast du die Ebene gesperrt , weil ich weiß, dass ich das im Tutorial gemacht habe , also hast du sie vielleicht auch gesperrt. Das ist ein Hex-Code, den wir kopieren und in Webflow verwenden können , und er wird auch dort genau dieselbe identische Farbe bringen auch dort genau dieselbe identische Farbe Gehen Sie in Webflow zum Bedienfeld „Stile“ und scrollen Sie nach unten, um eine Eigenschaft namens Hintergründe zu finden Es gibt dasselbe Feld für den Hex-Code, also fügen Sie einfach Ihren Code dort Jetzt müssen wir unserem Div-Block eine ähnliche Größe wie unserem rechteckigen Figma geben , und hier funktionieren die Dinge etwas anders als bei Figma Der Grund dafür ist, dass Websites responsiv sind. Sie können je nach Bildschirmgröße wachsen und schrumpfen. In Figma hat alles eine feste Position und eine feste Größe, unabhängig vom Bildschirm oder Inhalt Zunächst haben wir ähnliche Steuerelemente wie in Figma Sie haben Breite und Höhe, in die Sie exakte Werte eingeben können, wie Sie es in Figma tun würden Wir können ein Rechteck nicht von der Leinwand ziehen und seine Größe ändern , wie wir es in Figma tun Wir müssen Werte in diese Felder eingeben. Wir können exakte Pixelwerte eingeben indem wir sie direkt von Figma Für einige Elemente mag das eine gute Sache sein, aber für das Hintergrundfeld ist es nicht so, weil es nicht reagiert Wenn mein Bildschirm breiter als dieser Wert ist, diese weiße Lücke, weil ich das blaue Feld nur 1.400 Pixel breit gemacht habe, während mein Bildschirm breiter ist Und wenn der Bildschirm kleiner ist, ist das immer noch nicht gut, weil dann die Box überläuft Sie sehen diese blauen Linien, das sind die Grenzen des blauen Felds, und sie gehen von der Seite weg So oft sind exakte Pixelwerte im Arbeitsablauf nicht gut. Okay, was ist dann eine gute Option? Wenn Sie hier auf diesen Px-Wert drücken , werden Ihnen alle Einheiten angezeigt, die Sie in diese Felder eingeben können. Nach Pixeln haben wir einen Prozentsatz. Mit Prozentwerten geben wir jetzt Responsive Web ein. Es ist ein responsiver Wert und Reaktion auf die Größe des Elternteils Wenn wir 50% der Breite unserer Box angeben, nimmt sie 50% des übergeordneten Elements ein. Und was ist das übergeordnete Element dieses Elements? Wenn wir das im Navigator überprüfen, können wir sehen, dass der Körper das Elternteil ist. Der Hauptteil jeder Website ist responsiv und seine Größe richtet sich nach der Breite des Browsers. Das bedeutet, dass 50% des Körpers zu 50% aus dem Browser bestehen. Wenn wir also die Browserbreite verkleinern, können wir das von hier aus durch Ziehen tun Wir können sehen, dass unser blaues Feld automatisch schrumpft der Körper schrumpft und es kein horizontales Scrollen gibt VH und VW sind wichtige und sehr nützliche Einheiten. Sie stehen für Viewport-Höhe und Viewport-Breite. Der Viewport entspricht der Browsergröße. wir zum Beispiel diesen Ziehpunkt hierher ziehen, können wir die Änderung der Breite des Darstellungsfensters oder der Browserbreite direkt in Pixeln sehen Breite des Darstellungsfensters oder der Browserbreite direkt in Pixeln Das wäre also die Breite des Viewports. In ähnlicher Weise ist dies die Höhe des Viewports. Diese Einheiten werden in Prozent angegeben, sodass 100 VW 100% der Breite des Darstellungsfensters und 50 VH 50% der Höhe des Lassen Sie uns ein weiteres Feld hineinlegen, damit wir das in der Praxis besser sehen können Die gelbe Kiste befindet sich in der blauen Kiste. gelbe Kiste befindet sich in der blauen Kiste. Wenn wir Prozentwerte verwenden, ändert die Größe des gelben Felds im Verhältnis zum blauen Feld, da es das übergeordnete Feld ist Also 50% und 100%. Höhe von 100% deckt also 100% der Höhe der blauen Box ab, die ihren eigenen Wert von 600 Pixeln hat. Schauen Sie sich jetzt an, was passiert, wenn wir stattdessen 100 VH eingeben. Es deckt den gesamten sichtbaren Bildschirm ab. Es geht sogar über die Grenzen der Eltern hinaus. Das Gleiche gilt für VW. Bei 100% wird es bis zu den Kanten des übergeordneten Elements gestreckt . Bei 100 VW dehnt es sich jedoch bis zur gesamten Breite des sichtbaren Bildschirms aus. Beachten Sie, dass wir diese Werte normalerweise für das entsprechende Feld verwenden , also VW im Breitenfeld und VH für das Höhenfeld Das heißt aber nicht, dass Sie sie nicht austauschen können. Normalerweise ist das nicht nötig, aber es gibt einige seltene Fälle, in denen Sie das vielleicht tun möchten. Die letzte Einheit ist „Auto“, was bedeutet, dass die Größe automatisch angepasst wird. Dies ist der Standardwert sowie Breite und Höhe. Wenn die Seite in der Höhe automatisch eingestellt ist, ändert sich die Größe des Elements je nachdem , wie viel Inhalt sich darin befindet. Stellen wir zum Beispiel die Höhe unserer blauen Box auf automatisch ein. Es ist verschwunden , weil es leer ist , und wenn es leer ist und es automatisch ist, bedeutet das, dass es keine Pixelhöhe hat. Lassen Sie uns einige Elemente hineinlegen. Um einem vorhandenen Element etwas Neues hinzuzufügen, wählen Sie dieses Element aus und Webflow legt es darin ab , wenn Sie im Bereich „Neue Elemente“ auf etwas klicken , wenn Sie im Bereich „Neue Elemente“ Wenn ich einen Abschnitt ausgewählt habe, wird er nach innen verschoben. Wenn Sie ihn jedoch nicht in einem anderen Element haben möchten, wählen Sie den Hauptteil aus, sodass er auf der allgemeinen Leinwand nach außen verschoben wird auf der allgemeinen Leinwand nach außen Wenn Sie Elemente auch direkt aus dem Ebenenfenster auf die Leinwand ziehen können , nicht aus dem Ebenenfenster, sondern aus dem Elemente-Bedienfeld. Aber das mache ich normalerweise nicht. Ich mag den anderen Weg, aber es liegt an dir, welchen du bevorzugst, wenn du ziehen willst, ziehst du, wenn du einfach klicken willst, klickst. Wenn du also mehr Elemente innerhalb des Div-Blocks hinzufügst , dehnt er sich aus. Wenn wir eine bestimmte Pixelhöhe festlegen, hält sich der Div-Block an diese Höhe, egal wie viele Dinge Sie hineinstecken Die Elemente werden einfach überlaufen, genau wie aus deiner Mülltonne wenn du zu faul bist, sie rauszuholen Was das Punkt auf der Breite angeht, dehnt sich das Feld bis zu den Rändern seines übergeordneten Feldes aus In diesem Fall die ganze Seite, weil das übergeordnete Element der Hauptteil ist. Schließlich haben wir Mindest- und Höchstwerte. Diese Regeln gelten in Verbindung mit der normalen Breite und Höhe Es ist eine zusätzliche Regel, Fußböden und Decken auf unseren Elementen festzulegen . Wenn wir zum Beispiel die Höhe auf Auto setzen, dehnt sich das blaue Feld entsprechend dem darin enthaltenen Inhalt aus. Wenn wir jedoch eine maximale Höhe festlegen, dehnt es sich nur bis zu diesem Punkt. Mindest- und Höchstwerte sind in vielen verschiedenen Szenarien sehr nützlich Wenn wir zum Beispiel ein Kartenelement wie dieses haben, in das wir einige Inhalte einfügen möchten, können das Informationen, Formulare, Preise oder was auch immer sein Wir könnten darauf eine genaue Höhe festlegen, die zu unserem Inhalt passt, genau wie wir es in Figma tun würden Aber weil das Web responsiv ist, kann sich die Größe des Inhalts von Bildschirm zu Bildschirm ändern, und dann bekommen wir so etwas In diesem Fall ist es besser, die Mindesthöhe anstelle der exakten Höhe zu verwenden . Wenn wir mindestens 400 Pixel angeben, stellen wir sicher, dass die Box nicht schrumpft, weil nicht genug Inhalt drin ist, und wir sorgen auch dafür, dass sie wächst, wenn der Inhalt mitwächst Das Gleiche gilt für die Breite. Einstellung von 400 Pixeln sieht hier gut aus, aber wenn wir sie verkleinern, bekommen wir einen Überlauf und sie wird hartnäckig bei 400 Pixeln bleiben Eine bessere Option ist es, die maximale Breite von 400 festzulegen. Das bedeutet, dass es sich nicht um mehr als 400 Pixel dehnt , egal was passiert, aber es wird unter diesen Wert schrumpfen, wenn es notwendig ist Lassen Sie uns nun sehen, welchen Wert und welche Einheiten wir eingeben müssen, damit das Feld wie unser Design aussieht? Was die Breite angeht, ist es offensichtlich, oder? Wir werden uns für Auto entscheiden , weil wir wollen, dass es sich von Kante zu Kante erstreckt. Die hundertprozentige Breite würde uns in diesem Fall das gleiche Ergebnis bringen. Im Webdesign gibt es oft mehrere Möglichkeiten, die beabsichtigten Ergebnisse zu erzielen. Manchmal sind sie gleich gut, aber manchmal ist eine etwas besser. Mit etwas Übung und einigen Misserfolgen wirst du bald lernen , was besser ist. In diesem Fall ist Auto besser, weil es die Standardeinstellung ist und keinen zusätzlichen Code bedeutet. Hier ist ein Webflow-Tipp, um eine Eigenschaft auf ihren Standardwert zurückzusetzen, Optionstaste gedrückt und auf die Eigenschaft zu klicken Es löscht alle von Ihnen vorgenommenen Änderungen und kehrt zu den Standardwerten Das ist eine sehr praktische Abkürzung. Noch ein Tipp: Wenn die Eigenschaft blau ist, bedeutet das, dass Sie sie geändert haben. Wenn Sie vor einem großen Problem stehen und versuchen herauszufinden, warum etwas nicht so funktioniert, wie es sollte, können Sie dies einfach scannen, um festzustellen welche Eigenschaften angewendet wurden und was zu dem Problem beitragen könnte. Wenn es so orange ist, bedeutet das, dass wir die Entwicklungswerte geändert haben, allerdings nicht direkt für dieses Element, sondern für eines der übergeordneten Elemente. In diesem Fall auf dem Körperelement. Mit anderen Worten, es wird vom Körperelement vererbt. Auch dies ist eine hervorragende Möglichkeit, um herauszufinden, woher einige Stile stammen. Okay, was nun die Höhe angeht. Basierend auf dem, was wir gelernt haben, wissen wir, dass wir keinen exakten Wert wie Figma verwenden können, denn wenn der Bildschirm auf einem Figma verwenden können, denn wenn der Bildschirm Handy vergrößert oder verkleinert wird, wird er nicht übernommen Wie können wir es also anpassungsfähig machen? Wir haben zwei solide Optionen. Erstens können wir es automatisch lassen und den Inhalt seine Größe bestimmen lassen. Und zweitens können wir VH, die Höhe des Viewports, verwenden. Da wir unseren Inhalt noch nicht eingefügt haben, versuchen wir es mit der zweiten Option, 100 VH, was 100% eines sichtbaren Bildschirms bedeutet Das heißt, egal wie stark wir unseren Browser verkleinern oder erweitern, die Box passt sich sofort an den sichtbaren Bildschirm Wenn unser Browser jedoch zu klein ist, blaue Box manchmal reicht die blaue Box manchmal für unseren Inhalt möglicherweise nicht aus, und es kommt zu vielen Inhalten aus der Warum passiert das also? Weil die blaue Box eine definierte Höhe hat. Es dehnt sich nicht mit dem Inhalt aus, und diese definierte Höhe ist nur so hoch wie das Browserfenster. Wie können wir das also beheben? Wir wissen, dass die automatische Größenanpassung verwenden müssen, um die übergeordnete Box an ihren Inhalt anzupassen wir die automatische Größenanpassung verwenden müssen, um die übergeordnete Box an ihren Inhalt anzupassen, oder? Auf diese Weise stellen wir sicher, dass das blaue Feld mit dem Inhalt wächst und wir den Wert von 100 VH als Mindesthöhe festlegen können Jetzt hat das blaue Feld mindestens die gleiche Höhe wie der Browser, aber nicht kleiner als sein Inhalt Das ist ein perfektes Arrangement für uns. Um es noch einmal zusammenzufassen: Wir haben Pixelwerte zur Eingabe exakter fester Abmessungen Wir haben prozentuale Werte für Größe und Element im Verhältnis zum übergeordneten Wir verwenden VH und VW, um Größe von Elementen im Verhältnis zur Browsergröße festzulegen, und wir haben Mindest- und Höchstwerte , um Stockwerke und Decken für Elemente festzulegen 66. Webflow: Füllung und Ränder: Lassen Sie uns mit unserem Design fortfahren und den Inhalt zum Heldenbereich hinzufügen Wir brauchen eine Überschrift, einen Absatz und Schaltflächen. All dies können wir über das Elements-Bedienfeld hinzufügen. Stellen Sie sicher, dass sie sich in diesem blauen Bereich befinden. Erinnerst du dich, warum wir sie reingesteckt haben, oder? Weil das Web auf dem Box-Modell funktioniert. Alles wird in irgendwas reingehen. Okay, jetzt legen wir unseren Text in diese Textelemente. Doppelklicken Sie einfach auf das Element auf der Leinwand und beginnen Sie mit der Eingabe oder dem Kopieren und Einfügen aus der Designdatei. Ich werde gleich erklären , warum es diese neue weiße Lücke über dem blauen Feld gibt. Neue Elemente in Webflow werden normalerweise nacheinander blockiert und an den Rändern ihrer sichtbaren Elemente festgeklebt So verhält sich HTML standardmäßig. Aber so wollen wir die Dinge nicht. Wir wollen sie bewegen und einen Abstand zwischen ihnen schaffen. Also, wie machen wir das? In Figma ist das einfach Sie ziehen das Element einfach dorthin, wo Sie es haben möchten. Aber auf Webseiten ist das nicht möglich. Diese Elemente können tatsächlich verschoben oder an eine beliebige Stelle auf der Seite gezogen Aber CSS hat dafür einen speziellen Trick. Es heißt Padding and Margins. Das finden wir unter Kategorie Abstände im Eigenschaftenbereich Durch das Auffüllen wird Platz innerhalb des Elements hinzugefügt, und der Rand fügt Platz außerhalb des Elements hinzu Nehmen wir zum Beispiel unseren Button. Standardmäßig hat Webflow ein gewisses Maß an Polsterung angewendet . Wenn Sie mit der Maus über die Eigenschaft „Abstände“ fahren, wird der Bereich unten hervorgehoben, sodass Sie ihn visuell sehen können Werte werden in diesem Fall in Pixeln angegeben, neun Pixel oben und unten und 15 Pixel an Sie können sie erhöhen oder verringern, indem Sie entweder die Ziehpunkte ziehen oder den Wert direkt eingeben, z. B. 100 Pixel Hier ist ein Protein. Wenn Sie die Optionstaste gedrückt halten , während Sie den Griff ziehen, wird automatisch derselbe Wert auf der anderen Seite angewendet . Also oben und unten zusammen oder links und rechts zusammen. Und wenn Sie die Umschalttaste gedrückt halten, wird derselbe Wert auf alle vier Seiten gleichzeitig angewendet . Ähnlich verhält es sich mit dem Rand, einzige Unterschied besteht darin, dass auf der Außenseite Platz angelegt wird, sodass wir unsere Elemente dorthin ziehen können, wo wir sie haben wollen. Auf diese Weise können wir auf jeder der vier Seiten dieses Elements zusätzlichen Platz hinzufügen , wodurch sie dann quasi von ihrem ursprünglichen Platz verdrängt werden. Genau wie bei Größen haben wir alle anderen Einheiten außer Pixeln, obwohl wir selten andere Einheiten für Abstand und Rand verwenden würden andere Einheiten für Abstand und Rand verwenden Pixeleinheiten sind normalerweise der richtige Weg. Dieser weiße Bereich über dem blauen Feld ist also eigentlich der Rand unserer Überschrift. Genau wie unten fügt Webflow bei vielen Elementen Standardränder Wenn sich etwas merkwürdig verhält, suchen Sie im Stilbereich nach In der Regel enthalten sie die Hinweise. In unserem Fall sollten wir Ränder und Polsterungen so anbringen, dass sie zu unseren Designs passen Wir kennen diese Werte bereits. In Abb müssen Sie das Objekt auswählen und Wahltaste gedrückt halten und Maus bewegen, um die Entfernungen zwischen dem Selectan und anderen Objekten zu sehen Entfernungen zwischen dem Selectan und anderen Objekten Zum Beispiel können wir sehen, dass der Inhalt 140 Pixel vom linken Rand des Rahmens entfernt ist 140 Pixel vom linken Rand des Rahmens und dass wir 209 Pixel oben haben Wie verwenden Sie diese Informationen? Wir können dieselbe Polsterung auf unsere blaue Box auftragen. Je nach Browserhöhe oder Bildschirm funktionieren diese 290 Pixel nun möglicherweise überhaupt nicht Bei einer kleineren Browserhöhe sind diese 290 Pixel zu viel. Das Web ist nicht statisch wie Figma, und wir müssen uns Werte überlegen , die responsiv sind Was wollen wir hier also erreichen? Wir wollen, dass dieser Inhalt mehr oder weniger in der Mitte erscheint , nicht wahr? Unabhängig von der Bildschirmgröße, genau wie wir es bei unseren Designs getan haben. Wenn wir exakte Pixelwerte verwenden, wird es von Bildschirm zu Bildschirm sehr unterschiedlich aussehen. Bei kürzeren Browsern sieht der Inhalt unten so aus, als ob er synchronisiert würde, aber bei größeren Browsern ist sieht der Inhalt unten so aus, als ob er synchronisiert würde, er möglicherweise zu klein und der Inhalt sieht oben vielleicht so aus, er möglicherweise zu klein als wäre er zu umfangreich Stattdessen können wir also die Höheneinheit VH Viewport verwenden. Dadurch wird der Abstand automatisch berechnet, und wenn die Bildschirmgröße schrumpft oder zunimmt, wird der Abstand kleiner und Manchmal braucht es 20 VH, manchmal aber auch etwas anderes. Es hängt vom Inhalt ab, den wir haben, aber in diesem Fall so etwas Wenn wir den Bildschirm jetzt etwas zu stark verkleinern, können Sie sehen, dass der Inhalt auf der Unterseite zusammengedrückt wird Das liegt daran, dass wir die untere Polsterung nicht hinzugefügt haben. Wenn der Bildschirm groß ist, schwebt er oben und unten ist Platz, weil wir unserem blauen Feld den Wert 100 VH gegeben haben und es so gestreckt haben, dass es den gesamten sichtbaren Bildschirm ausfüllt Aber wenn der sichtbare Bildschirm wirklich kurz ist, dann ist unten kein Platz mehr übrig Das Gleiche können wir hier tun, damit wir den gleichen exakten VH-Wert zur unteren Polsterung hinzufügen können den gleichen exakten VH-Wert zur unteren Polsterung Dadurch wird sichergestellt, dass wir sowohl oben als auch unten einen guten Abstand haben , unabhängig davon, wie wir den Browser verkleinern oder vergrößern Okay, jetzt fügen wir Ränder zwischen den Objekten hinzu. Und lassen Sie uns den zusätzlichen Rand von 20 Pixeln entfernen , der sich über der Überschrift befindet, weil er den bereits vorhandenen im Heldenbereich vergrößert Diese Layoutanordnung scheint , als ob wir auf dem richtigen Weg Wir überprüfen die vertikale Reaktionsfähigkeit, aber was passiert, wenn wir das auf verschiedenen Breiten überprüfen Diese linke Polsterung mit 140 Pixeln scheint keine gute Idee mehr zu Es verschiebt den Inhalt zu sehr nach rechts. Wir könnten das beheben und für jede Bildschirmgröße individuelle Abstände festlegen oder vielleicht sogar eine responsive Einheit für die Polsterung verwenden , wie VW für die Breite des Viewports Aber der gängigste Weg und der beste Weg und die beste Lösung dafür ist die Verwendung eines Containers In unseren Designs befinden sich die meisten Elemente innerhalb der Grenzen unseres Rasters. Dadurch erhalten wir einen unsichtbaren Behälter, der in der Mitte zentriert ist und all diese Elemente befinden. So sind auch die meisten Websites angelegt. Es hat ein zentrales Layout und sie platzieren alles in diesem Layout, es sei denn, es handelt Hintergrundbilder oder einzigartige Elemente. Das können wir ganz einfach erreichen, indem wir einen Container aus dem Elemente-Panel hinzufügen. Wir werden den Container innerhalb des Abschnitts platzieren und die restlichen Elemente innerhalb dieses Containers verschieben. Wir tun das, indem wir sie nacheinander hineinziehen. Sie können dies entweder im Navigator-Panel oder auf der Leinwand Gleiches Ergebnis, beide funktionieren. Ich bevorzuge es normalerweise, es im Navigator zu tun , weil ich besser sehen kann, was vor sich geht. Wir brauchen die linke Polsterung von der Sektion nicht mehr, also können wir sie loswerden Wenn Sie dies auf verschiedenen Bildschirmen überprüfen, werden Sie feststellen, dass unser Inhalt genau in der Mitte übersichtlich zentriert ist genau in der Mitte übersichtlich zentriert Sogar auf größeren Bildschirmen, und das liegt alles am Container Lassen Sie mich Ihnen eine Vorstellung davon geben, was ohne den Container passiert. Ich gebe dem Container einfach eine andere Hintergrundfarbe, damit Sie seine Grenzen deutlich erkennen können. Wenn Sie eine Reihe von Absätzen außerhalb des Containers platzieren , werden Sie feststellen, dass sie sich von Rand zu Rand erstrecken. Selbst auf größeren Bildschirmen ergibt das kein gutes Layout. Der Text ist zu breit gestreckt , was zu einem schlechten Leseerlebnis führt. Wenn Sie die Absätze jedoch innerhalb des Containers verschieben, werden sie sauber zentriert Das ist die Stärke eines Containers und der grundlegendste Baustein jeder Website Weblos-Standardcontainer ist in der Tat ein guter alter Deblock, genau wie ein Abschnitt, aber er hat zwei vordefinierte Stile , sodass er wie ein Container funktioniert Erstens automatische Ränder an den Seiten. Dadurch wird der Container lediglich in der Mitte der Seite zentriert . Automatische Seitenränder funktionieren wie eine Feder, die das Element von den Seiten drückt , sodass es zentriert bleibt Aus technischer Sicht berechnet es die Menge an leerem Raum, den das Element hinterlässt , und füllt diesen leeren Raum mit Wenn Sie einen dieser automatischen Ränder entfernen, verliert der Behälter Zentrierfähigkeit und er schmiegt sich an eine der Kanten je nachdem, welchen automatischen Rand Dieser Trick zum Anwenden von automatischen Rändern ist eine gute Methode, wenn Sie etwas zentrieren müssen Webflow hat hier sogar eine kleine Abkürzung für die Zentrierung, die genau dafür sorgt, dass automatische Ränder auf Seiten angewendet Automatische Ränder reichen jedoch nicht aus, um etwas zu zentrieren. Das Element muss eine Breite haben, und das ist die zweite Eigenschaft , die der Container hat. Maximale Breite in diesem Fall. Dadurch wird die DV-Sperre angewiesen, sich nicht über diese Breite hinaus auszudehnen, aber sie ermöglicht es, sie zu verkleinern, sodass sie schön und Ohne diese Breite verlieren wir sofort die Qualität des Containers und jetzt dehnt sich dieses Element wie die meisten anderen Elemente von Kante zu Kante Es hat immer noch automatische Ränder an den Seiten, aber jetzt sind sie nutzlos, weil automatische Ränder den leeren Bereich ausfüllen, der vom Element übrig geblieben ist. Wenn es keinen leeren Raum gibt, dann gibt es auch keinen Platz, den sie einnehmen können. Diese Containerbreite kann bearbeitet werden. Je nach Website möchten wir sie vielleicht schmaler oder Übrigens funktioniert der Figma-Trick, Werte in Zehnerschritten zu erhöhen , in funktioniert der Figma-Trick, Werte in Zehnerschritten Halten Sie die Umschalttaste gedrückt und drücken Sie gleichzeitig die Aufwärts- oder Abwärtspfeile , um diese Werte in Zehnerschritten zu erhöhen oder zu verringern , um diese Werte in In unserem Fall ist unsere Containerbreite tatsächlich anders, weil unser Container unser Raster ist, das in Figma eine festgelegte Breite hat und wir die genaue Breite unseres Rasters messen können , indem wir ein Rechteck darüber zeichnen und die endgültige Breite dieses Rechtecks überprüfen Es sind 1.160 Pixel. Wir können diese Breite auf den Container in Webflow anwenden. Je nachdem, auf welchem Bildschirm wir uns das ansehen, wird der Container entweder zentriert sein oder sich an den Rändern anschmiegen In meinem Fall ist es Letzteres. Warum? Weil 1.160 mehr als die aktuelle Leinwandbreite ist, die 992 Pixel beträgt Es ist kein Platz übrig, in den keine Ränder eindringen könnten. Auf breiteren Bildschirmen ist das Layout in der Mitte jedoch ist das Layout in der Mitte das Problem auf Bildschirmen zu beheben, die schmaler als unser Container sind , müssen wir manuell etwas Platz an den Seiten hinzufügen Da wir bereits automatische Ränder für unsere Container-Box verwenden , können wir keine zusätzlichen Randwerte mehr hinzufügen , aber wir können etwas anderes tun Wir können entweder im Container oder im übergeordneten Bereich eine Polsterung hinzufügen Container oder im übergeordneten Bereich Dadurch wird der Inhalt von den Rändern weggeschoben. Ob Sie dem Container oder dem übergeordneten Bereich eine Polsterung hinzufügen , spielt keine große Rolle Beide Optionen sind gleich gut. Ich persönlich habe die Angewohnheit, dem Elternteil Polsterung hinzuzufügen, also lass uns das tun Dadurch erhalten wir ein zentriertes Layout, das ansprechend ist und sich gut an alle Bildschirme anpasst Außer vielleicht auf dem kleinsten mobilen Bildschirm ist der von uns eingestellte Abstandswert zu hoch, also würden wir hier etwas kleineres anpassen und verwenden Aber das werden wir jetzt nicht tun. Ich habe einen ganzen Abschnitt über responsives Design, und wir werden unsere Webseite auf all diesen kleineren Bildschirmen und Geräten reparieren . Lass sie vorerst so, wie sie sind, auch wenn sie kaputt aussehen. Arbeite einfach am Basisdesktop-Breakpoint. Es ist der mit dem Sternsymbol drauf. Tatsächlich sollten Sie diese größeren Breakpoints auch nicht berühren. Wir brauchen es nicht und wenn Sie es hinzufügen, können Sie es danach nicht mehr entfernen Wir haben uns mit Leerzeichen im Internet befasst. Wir haben eine Polsterung, die den Abstand innerhalb des Elements erhöht, einen Rand, der den Abstand außerhalb des Elements erhöht, und wir haben uns mit einem Container befasst, der ein Grundbaustein einer Webseite ist Dadurch wird der Inhalt unserer Seite auf größeren Displays übersichtlich zentriert unserer Seite auf größeren Displays 67. Webflow: Webtypografie: Lassen Sie uns nun den Text stylen. Von hier aus werden Schriftstile angewendet, mit denen Sie durchaus vertraut sind. Als erstes müssen wir die Schriftart auswählen. Aber im Gegensatz zu Figma haben wir hier eine begrenzte Auswahl an Schriftarten Unsere Schriften, Pop-Ins und Roboto sind nicht aufgeführt. Das bedeutet, dass wir diese Schriften aus den Projekteinstellungen hinzufügen müssen diese Schriften aus den Projekteinstellungen Projekteinstellungen sind ein anderer Ort als der Designer, und wir können über diesen Link auf die Schrifteinstellungen dieses Projekts zugreifen . Oder gehen Sie im Hamburger-Menü zu den Projekteinstellungen und dann zur Registerkarte „Schrift“ Webflow bietet uns drei Optionen zum Hinzufügen von Telefonen. Zunächst Google Phones, in dem alle Google-Telefone aufgelistet sind. Um sie hinzuzufügen, müssen wir sie einzeln auswählen und dann hinzufügen Wir können nicht alle gleichzeitig hinzufügen. Auch Adobe-Telefone oder Typekit auf ähnliche Weise. Wie ich in der Typografie-Lektion erwähnt habe, ist dafür ein Abonnement für die Creative Cloud von Adobe erforderlich Sobald Sie dieses Abonnement haben, können Sie es mit Ihrem Konto bei Webflow verbinden und dann Schriften von dort abrufen Da wir benutzerdefinierte Telefone manuell hinzufügen können , indem wir sie einfach hochladen In unserem Fall benötigen wir Google-Telefone, also werden wir nur Pop-Ins finden Und wenn Sie sie gefunden haben, wählen Sie sie und Sie werden gefragt, welche Varianten Sie einbeziehen möchten. Diese Zahlen sind Schriftstärken. CSS verwendet numerische Werte, um verschiedene Schriftstärken darzustellen, anstatt sie zu benennen. Und so wird es üblicherweise abgebildet. Sie müssen jede Schriftstärke manuell mit einer dieser Zahlen abgleichen jede Schriftstärke manuell mit einer dieser Zahlen Um dieses Diagramm zu finden, können Sie einfach die CSS-Schriftstärken googeln. Sie können auch Ihre spezifische Schriftart in Google Fonts überprüfen und sehen, wie die Zahlen und Namen zueinander passen. Lassen Sie uns überprüfen, welche anderen Telefongewichte wir verwenden. Wir haben also 600, 500 und Normal für Pop-Ins, und wir haben Normal und 500 für Roboto Wir könnten natürlich alle Gewichtsvariationen hinzufügen, aber es ist eine gute Praxis, sie nicht hinzuzufügen , weil Webflow sie dann laden und diese Schriften quasi auf die Website hochladen muss sie dann laden und diese Schriften quasi , was das Laden der Seite zusätzlich verzögert Kursivschrift ist eine separate Version für jede Schriftgröße. Wie du siehst, haben wir in unserem Design keine Kursivschrift verwendet, aber wir sollten sie trotzdem für normale und fette Schriftstärken bearbeiten Und dann wird hier angezeigt, welche Schriftarten und Schriftstile wir zu unserem Projekt hinzugefügt haben Jetzt das Gleiche für Roboto. Lassen Sie uns auch fett gedruckte 700 hinzufügen. Es ist ein wichtiges Gewicht für Absatztext, auch wenn wir es noch nicht verwendet haben. Falls der Designer noch geöffnet war, werden die neuen Telefone nicht sofort angezeigt. Aktualisieren Sie also den Designer. Und da sind jetzt Pop-Ins und Roboto drin. Sie werden sehen, dass die Gewichte, die wir hinzugefügt haben , darin enthalten sind und aktiviert sind, aber diejenigen, die wir nicht hinzugefügt haben, sind deaktiviert Okay, lassen Sie uns unseren Text formatieren. Sema Build war unsere Überschrift, normal für den Absatz und Medium für den Button Nun zu den Größen und Zeilenhöhen. Die Telefongröße für unsere Überschrift beträgt 75 Pixel. Webflow passt die Zeilenhöhe nicht automatisch an die Standardeinstellungen an Es erbt Werte von den übergeordneten Elementen, sodass wir es manuell beenden müssen Und jetzt können wir dasselbe für den Absatz und den Schaltflächentext tun für den Absatz und den Schaltflächentext Wenn die Zeilenhöhe auf Auto eingestellt ist, können Sie den tatsächlichen Pixelwert ermitteln , indem Sie in das Feld Dadurch wird die aktuelle Zeilenhöhe angezeigt. Oder Sie können den Wert nur geringfügig bearbeiten, indem Sie mit der Pfeiltaste nach oben oder unten drücken . Dadurch werden die Pixelwerte angezeigt. Lass uns die Farben ändern. Das ist ziemlich einfach. Achten Sie nur darauf, diese beiden Farben nicht zu verwechseln. Eine ist die Telefonfarbe und unten ist eine Hintergrundfarbe. Wir möchten die Farbe im Bereich Typografie ändern, aber die Hintergrundfarbe für die Schaltfläche Webflow verwendet keine Prozenteinheit für den Buchstabenabstand, aber raten Sie mal, was? Wir können einfach rechnen Der Prozentsatz ist relativ zur Schriftgröße. Es ist also negativ auf den Prozentsatz der Schriftgröße, die 75 Pixel beträgt, sodass der Buchstabenabstand negativ ist, 1,5 Pixel. Das Gleiche gilt übrigens für die Zeilenhöhe. Der Prozentwert ist relativ zur Schriftgröße. Eine Zeilenhöhe von 100% entspricht exakt der Schriftgröße, und 200% entspricht der doppelten Schriftgröße Sie können auch umgekehrt rechnen und die Zeilenhöhe von Pixeln in Prozent umrechnen Ich hoffe, du hast in deinem Matheunterricht aufgepasst. Und das sind unsere Typografie-Steuerelemente. Es gibt noch andere Dinge, die wir mit Typografie machen können, aber das werden wir für später belassen Um es noch einmal zusammenzufassen: Das Hinzufügen von Schriften zu Webflow-Projekten erfolgt über die Projekteinstellungen Wir können Google-Telefone ganz einfach direkt aus dem Drop-down-Menü hinzufügen Google-Telefone ganz einfach direkt aus dem Drop-down-Menü Wir müssen bestimmte Schriftstärken auswählen, die wir benötigen. Diese Schriftstärken werden in Zahlen dargestellt , die wir entweder online nachschlagen oder in Figma unter dem Code Tab finden Dann haben wir Zeilenhöhen, mit denen wir den genauen Wert der Zeilenhöhen wieder auf der Registerkarte Code abrufen können den genauen Wert der Zeilenhöhen wieder auf der Registerkarte Code 68. Webflow: Schaltflächen und Links: In diesem Video werden wir uns mit Schaltflächen und Links befassen. Im Bedienfeld „Elemente“ finden Sie zwei Arten von Schaltflächen. Außerdem finden Sie zwei Arten von Links. Diese Dualität hat mich am Anfang etwas verwirrt und ich hatte Schwierigkeiten zu verstehen, welche ich wo verwenden sollte. Lassen Sie uns klarstellen, warum es zwei Links und zwei Schaltflächen gibt Fangen wir mit den Links an. Link-Block ist ein normaler Tagesblock, außer dass er verlinkt werden kann. Sie können alles in den Linkblock einfügen und das Ganze wird anklickbar sein Der Textlink hingegen ist genau das, ein Textlink. Du kannst nichts hineinlegen. Um die Links zu verknüpfen, wählen wir den Link aus und klicken auf die Registerkarte Einstellungen. Hier können wir die Linkeinstellungen aktualisieren. Die erste ist die URL, in die wir das genaue Ziel eingeben können. Als Nächstes haben wir Seiten. Hier können wir auf andere Seiten unserer Website verlinken, und das ist genau die Option, die wir verwenden würden, wenn diese Links nicht gefälscht wären und wir tatsächlich andere Seiten hätten. Im Moment wird nur eine Seite angezeigt , Home , dort sind wir. Als Nächstes haben wir einen Seitenbereich. In diesem Fall verlinken Sie auf einen bestimmten Abschnitt auf derselben Seite oder sogar auf einer anderen Seite. Im Moment ist es leer. Es gibt noch eine zusätzliche Sache, die wir tun müssen , um auf einen Abschnitt verlinken zu können. Wir werden irgendwann darauf zurückkommen. Und die letzten beiden sind E-Mail- und Telefon-Links für E-Mail-Adressen und Telefonnummern. E-Mail-Link öffnet einen Standard-E-Mail-Client, den der Benutzer auf seinem Computer eingerichtet hat, z. B. Outlook oder Gmail, und er öffnet das neue E-Mail-Fenster mit E-Mail-Adresse und Betreffzeile die mit den dort eingegebenen Werten vorausgefüllt sind In meinem Fall wurde ein GML-Fenster geöffnet, weil ich das als Standard-E-Mail-Client auf meinem Computer festgelegt habe Standard-E-Mail-Client auf meinem Die Telefonnummer ist für Mobilgeräte vorgesehen, sodass die Person, die sich die Website auf ihrem Mobilgerät ansieht , direkt auf einen Link klicken kann , um anzurufen , ohne die Ziffern kopieren und eingeben zu müssen Auf einem Computer ist das meistens nutzlos. Manchmal bekommst du die Fehlermeldung. Nun zu den Schaltflächen gibt es zwei Typen eine normale Schaltfläche und eine Formularschaltfläche. Die Formularschaltfläche kann genauso gestaltet werden wie eine normale Schaltfläche, sie ist jedoch nur mit dem Formular verknüpft und sendet das Formular ab, wenn sie angeklickt wird Die normale Schaltfläche funktioniert dagegen genauso wie ein Textlink Es hat dieselben Linkeinstellungen, und genau wie bei einem Textlink können wir keine anderen Elemente darin platzieren. Das bedeutet, dass Sie Schaltflächen aus Textlinks erstellen können. Sie können Schaltflächen auch aus Link-Blöcken erstellen. Wenn Sie eine Schaltfläche mit einem Symbol oder einer zusätzlichen Textzeile erstellen möchten , dann sind Link-Blöcke genau das, was Sie verwenden müssen. Wenn Sie einmal nicht mehr wissen, was die einzelnen Elemente bewirken, verwenden Sie ein Popup-Fenster mit weiteren Informationen aus dem Elemente-Bedienfeld. Jedes Element hat oben ein kleines Fragezeichen. Klicken Sie darauf, um eine kurze Erklärung zu erhalten , was dieses Element macht. Also zurück zu unserer Schaltfläche, lassen Sie uns die Form der Schaltfläche bearbeiten. Unser Button in Figma hat eine bestimmte Größe. Es ist 168 Pixel breit und 50 Pixel hoch. Wir können diese exakten Werte verwenden, aber Sie werden feststellen, dass es keine gute Idee ist, die exakte Breite zu verwenden. Versuchen wir zunächst, den Text in unserer Schaltfläche zu zentrieren. Wie machen wir das? Die vertikale Ausrichtung ist ziemlich einfach. Wir können einfach die Option zur Textausrichtung verwenden und sie zentrieren. Für die horizontale Ausrichtung müssen wir jedoch Innenabstände verwenden, damit wir den Text verschieben können , bis er zentriert aussieht Nun, hier ist ein Grund, warum es eine schlechte Idee ist, eine exakte Breite festzulegen eine schlechte Idee ist, eine exakte Breite Wenn wir irgendwann beschließen, den Text zu ändern und es etwas länger ist, passt sich diese Schaltfläche nicht an und der Text muss überlaufen Eine bessere Methode ist es, den Pedding-Wert erneut zu verwenden. Wir können diesen Polsterwert direkt aus unseren Designs herausholen. Der Abstand links und rechts beträgt 48 Pixel. Wir können diese Werte für unsere Tastenbetätigung verwenden. Entfernen Sie die Breite und fügen Sie auf beiden Seiten eine Polsterung von 48 Pixeln hinzu. Dadurch wird unsere Schaltfläche nicht mehr korrekt angezeigt und sie passt sich der Textgröße an Und zu guter Letzt die abgerundeten Ecken. Dies kann im Grenzbereich unter der Option Radios geändert werden Grenzbereich unter der Option Radios Genau wie in Figma können wir diesen Wert einfach erhöhen, bis der Knopf vollständig abgerundet ist Um es noch einmal zusammenzufassen: Wir haben zwei Schaltflächen, reguläre Schaltfläche und die Formularschaltfläche Formularschaltfläche kann nur innerhalb eines Formulars verwendet werden, und die normale Schaltfläche wird für Links zu anderen Seiten, Aktionen auf der Seite, E-Mails, Links, Telefonlinks usw. verwendet Aktionen auf der Seite, E-Mails, Links, Telefonlinks usw. Wir haben zwei Arten von Links Textlinks und Linkblöcke Linkblöcke sind genau wie DIV-Blöcke, leere Boxen, in denen viele andere Elemente, sogar andere DVBlogs, untergebracht werden können , aber sie können sich genauso verhalten wie ein normaler Link Was die Textlinks angeht, können sie nichts darin verschachteln und sie funktionieren genauso wie normaler Text 69. Webflow: CSS-Klassen: Fügen wir jetzt unseren zweiten Button hinzu. Um Zeit beim Styling zu sparen, können wir unseren vorhandenen weißen Button duplizieren. Sie können mit der rechten Maustaste klicken und dann duplizieren oder eine Steuerung C, Steuerung V, eine normale Tastenkombination oder Befehl C, Befehl V für den Mac verwenden Steuerung V, eine normale Tastenkombination oder Befehl C, . Wenn du das tust, werden zwei lustige Dinge passieren, die du nicht erwartest. Erstens, anstatt es darunter einzufügen , wie sich die meisten anderen Elemente verhalten, wird es daneben platziert Dieses Verhalten ist auf einen Standardanzeigestil zurückzuführen , der auf Schaltflächen angewendet wird Wir werden das in der nächsten Lektion behandeln. In dieser Lektion werden wir uns dem zweiten lustigen Verhalten befassen. Wenn wir versuchen, Änderungen an unserer zweiten Schaltfläche vorzunehmen, wird alles auf die ursprüngliche Schaltfläche angewendet . Das ist kein Bug Im Gegenteil, es ist wahrscheinlich das mächtigste Feature von CSS und einer der Gründe, warum CSS überhaupt geschaffen wurde. Diese Funktion wird Klasse genannt. Wir können diese Schaltfläche an 100 verschiedenen Stellen auf unserer Website haben , und wenn wir eine Instanz ändern, können wir jede Schaltfläche mit derselben Klasse ändern. In Webflow wird diese Klasse von hier aus verwaltet, einem Ort namens Selector Selector bedeutet, was es sagt. Es wählt eine bestimmte Klasse aus. Es gibt noch andere Dinge, die wir neben Klassen auswählen können , wie z. B. ein Tag, aber dazu später mehr, wenn wir es brauchen. Der blaue quadratische Button mit der Aufschrift ist unsere Klasse. Wenn du die ursprüngliche Schaltfläche auswählst, wirst du sehen, dass sie dieselbe Klasse hat. Aus diesem Grund gelten für beide dieselben CSS-Eigenschaften. Wenn wir diese Klasse jedoch aus der Schaltfläche entfernen, verlieren wir alle Änderungen, die wir daran vorgenommen haben, und kehren zu den Standardeinstellungen oder Standardeigenschaften zurück. Aber keine Sorge, wir können die Klasse wieder auswählen und sofort werden alle Eigenschaften zurückgesetzt. Wenn Sie nach einer vorhandenen Klasse suchen, beginnen Sie einfach mit der Eingabe und Webflow filtert die Suchergebnisse Wenn die Klasse bereits existiert, siehst du sie hier und du kannst sie auswählen Wenn sie nicht existiert, kannst du selbst eine neue Klasse erstellen und ihr einen beliebigen Namen geben. Das Anwenden einer neu erstellten Klasse hat keine Auswirkungen auf unsere Schaltfläche, da auf diese Klasse unsere Schaltfläche, da auf diese Klasse keine CSS-Eigenschaften angewendet wurden. Auf eine neu erstellte Klasse können wir neue Stile anwenden, ohne sich dies auf die ursprüngliche Schaltfläche auswirkt. Klassen sind entfernbar und können auf alles angewendet werden. Zum Beispiel nehmen wir die Klasse „ Meine hübsche Schaltfläche“ und wenden sie auf die ursprüngliche Schaltfläche an. Klassen können auch dupliziert oder umbenannt werden. Sie können das über dieses winzige Drop-down-Menü tun. Einfach umbenennen und Enter drücken. Das Duplizieren einer Klasse ist eine gute Möglichkeit, Zeit zu sparen. Unsere Ghost-Schaltfläche hat viele gleiche Eigenschaften wie unsere primäre Schaltfläche, sodass wir diese Eigenschaften duplizieren und daraus eine neue Klasse erstellen können diese Eigenschaften duplizieren und daraus eine neue Klasse erstellen Und jetzt können wir es nennen, wie wir wollen. Wir haben zwei Schaltflächen mit denselben Eigenschaften, aber unterschiedlichen Klassen. Wenn wir also einen bearbeiten, wirken sich die Änderungen nicht auf den anderen aus. Oder jeder Änderung, die wir an dem Element vornehmen müssen, müssen wir ihm eine Klasse geben. Wir haben das bisher nicht gemacht, weil Webflow es tatsächlich automatisch für uns erledigt Wenn Sie ein Element auswählen , das wir bereits bearbeitet haben, werden Sie sehen, dass darauf eine Art Klasse angewendet wurde Wenn du ein neues Element löschst, tun sie es nicht. Der Selektor ist leer. Sobald Sie ein Element stylen, generiert Webflow automatisch einen Klassennamen für uns Sie können ein Element nicht stylen , ohne dass eine Klasse darauf angewendet wird Wenn Sie sich den Navigator ansehen, werden Sie feststellen, dass Elemente nach ihren Klassen benannt sind . Lassen Sie uns den Namen unseres Div-Blocks ändern , der all unsere Inhalte enthält. Unsere blaue Box ist in Wirklichkeit ein Heldenbereich, der alles enthält, was sich in diesem Bereich befindet. Lassen Sie uns ihr also etwas Respekt entgegenbringen und ihr einen passenderen Namen wie Heldenbereich geben. In Ordnung, zurück zu unserem Ghost-Button. Jetzt, wo wir eine andere Klasse haben, können wir sie nach Belieben gestalten Ghost-Schaltfläche besteht aus demselben Material, aber die Hintergrundfüllung ist transparent und hat stattdessen Ränder. Sie können dies auch tun, indem Sie den Schieberegler für die Deckkraft verringern . Das Ergebnis ist dasselbe Ist komplett aus der Seite verschwunden, aber der Text ist immer noch Es ist unsichtbar, weil es dieselbe Farbe wie unser Hintergrund Lassen Sie uns den Text in Weiß ändern. Und jetzt fügen wir Rahmen hinzu. Das können wir direkt im Grenzbereich machen. Es heißt Null Pixel. Wenn wir es auf ein Pixel erhöhen, wird der Rand angezeigt, und dann können wir die Farbe auf Weiß ändern. sieht es kompliziert aus Am Anfang sieht es kompliziert aus, ist aber ziemlich einfach. Stil gibt an, welche Art von Rahmen wir verwenden möchten, durchgezogene Linie, Striche oder Punkte Und diese Quadrate zeigen , auf welcher Seite wir den Rand hinzufügen Im Moment ist das mittlere Quadrat ausgewählt, was bedeutet, dass wir alle vier Seiten hinzufügen. Wenn wir das oberste Quadrat auswählen, können wir nur den oberen Rand bearbeiten. Schließlich müssen wir etwas Platz zwischen zwei Schaltflächen hinzufügen. Was sollten wir Ihrer Meinung nach Ränder oder Polsterungen verwenden ? Trickfrage Wir können keine Polsterung verwenden. Durch die Polsterung wird nur Platz in der Box hinzugefügt Messen Sie den Raum in Figma. Wir verwenden 30 Pixel Platz, also müssen wir 30 Pixel linker Rand auf der Ghost-Schaltfläche oder 30 Pixel rechter Rand auf der ersten Schaltfläche hinzufügen linker Rand auf der Ghost-Schaltfläche oder 30 Pixel rechter Rand auf der ersten Schaltfläche In Ordnung, die Dinge sehen gut aus. Um es in dieser Lektion noch einmal zusammenzufassen: Wir haben gelernt, wie man CSS-Klassen verwendet, die in Webflow über das Bedienfeld „Stile“ verwaltet werden Wir lernen, wie man neue Klassen erstellt, wie Webflow automatisch Klassen für uns erstellt und wie man Klassen dupliziert, sodass wir bestehende Elemente auf unserer Seite wiederverwenden können 70. Webflow: Bilder: In diesem Video werden wir unser Heldenbild zu unserer Seite hinzufügen unser Heldenbild zu unserer Seite Wir werden lernen, wie man Bilder aus Figma exportiert , wie man sie in Webflow importiert und wie man mit Bildern in Webflow arbeitet Lassen Sie uns zunächst unseren Hero Shot aus Figma exportieren. In Figma haben wir diese Heldengrafik mit verschiedenen Elementen erstellt diese Heldengrafik mit verschiedenen Elementen Wir könnten sie als unabhängige Bilder exportieren, aber das wäre unnötige Arbeit und es wäre ziemlich mühsam, sie in Webflow neu zu erstellen Stattdessen werden wir es als einzelnes Bild exportieren. Auf diese Weise sparen Sie Zeit und stellen sicher, dass es genau so aussieht, wie wir es entworfen haben. Um etwas aus Figma zu exportieren, wählen Sie das Element und klicken Sie im Eigenschaftenfenster im Abschnitt Exportieren auf das Plus-Symbol Und um mehrere verschiedene Elemente als ein Bild zu exportieren, müssen Sie sie zuerst gruppieren Wählen Sie alles aus, klicken Sie mit der rechten Maustaste und drücken Sie die Gruppenauswahl oder verwenden Sie die Tastenkombination. Wählen Sie dann die neu erstellte Gruppe und klicken Sie unter den Exporteinstellungen auf das Plus-Symbol. Lassen Sie uns diese verschiedenen Exporteinstellungen durchgehen. Bildschirmauflösungen haben sich im Laufe der Jahre erheblich verbessert . Tablets, Smartphones und neueste Premium-Laptops wie das MacBook verwenden Bildschirme mit hoher DPI-Auflösung, auch Retina-Display genannt Hohe DPI bedeutet hohe Punkte pro Zoll und sie haben normalerweise die doppelte Pixeldichte als herkömmliche Laptop - und Desktop-Bildschirme Dadurch wirken die Bilder viel schärfer und knackiger, sodass Sie diese pixeligen Kanten bei kleinerem Text oder an den Bildrändern nicht haben kleinerem Text oder an den Bildrändern Um unsere Bilder für solche Bildschirme zu optimieren, wird dies allgemein Wir müssen unsere tatsächliche Bildgröße verdoppeln. Aus dieser Drop-down-Option würden wir also zwei X auswählen. Und wir haben mehrere Dateiformate. ideale Bildformat für das Internet ist SVG, da sie vektorbasiert sind, kleinere Dateigrößen haben und unendlich vergrößert werden können , ohne an Qualität zu verlieren Leider funktionieren sie nicht bei Bildern, die Fotografie enthalten. Im Grunde alles, was pixelbasiert ist. Ich werde nicht näher darauf eingehen, was der Unterschied zwischen pixelbasierten und vektorbasierten Bildern ist. Kurz gesagt, die Dateiformate PNG und JPG basieren auf Pixeln und SVGs auf Vektoren Da wir Fotografie verwenden, müssen wir entweder PNG oder JPG exportieren PNG und JPG oder JPAC weisen zwei Hauptunterschiede auf . Erstens ist es die Größe JPEG-Bilder sind normalerweise kleiner als PNG-Bilder oder aufgrund der höheren Komprimierung, JAC-Bilder können jedoch transparente Hintergründe haben . PNGs In unserem Fall müssen wir also entweder ein PNG oder ein JPAC exportieren und den blauen Hintergrund darin einfügen Wenn wir diesen blauen Hintergrund nicht einbeziehen, füllt er den Raum automatisch mit Weiß, und das funktioniert bei unserem Bild nicht Idealerweise würden wir uns für JPAC entscheiden , weil die Dateigröße kleiner ist und das wirklich wichtig Warum? Weil niemand eine langsame Website mag. Und Bilder mit großen Dateigrößen sind eine Möglichkeit, die Ladezeit einer Website zu verlangsamen. Wenn wir uns jedoch für JPAC entscheiden müssen wir einen blauen Hintergrund verwenden, und das kann einige Probleme haben Manchmal stimmen die Farben auf exportierten Bildern nicht zu 100% mit den Webfarben überein Und wir benötigen, dass der blaue Hintergrund zu 100% mit dem Blau im Abschnitt in Webflow übereinstimmt 100% mit dem Blau im Abschnitt in Webflow Wenn sie keinen reibungslosen Übergang haben, werden die Ränder des Bildes sichtbar sein Ich habe das bereits auf diesem Bild getestet und leider hat es nicht gepasst. Weiße und schwarze Farben sind einfach. Sie passen immer zusammen, aber andere Farben nicht so gut. bleibt uns also nur eine Option, nämlich PNG. Lass uns exportieren. In Ordnung, lassen Sie uns unser PNG in Webflow importieren. Wie bei allem in Webflow fügen wir neue Elemente aus dem Elements-Bedienfeld Lege das Bild vorerst an einer beliebigen Stelle ab. Wir werden das Layout später strukturieren. Um ein Bild hochzuladen, doppelklicken Sie auf das Bild oder klicken Sie hier auf das Einstellungen-Zahnrad. Dadurch wird das Assets-Bedienfeld geöffnet. Assets-Bereich speichert Webflow Im Assets-Bereich speichert Webflow alle Bilder und Dokumente , die Sie auf Ihre Website hochladen Erinnerst du dich, wie wir dieses Bild als zweifache Größe exportiert haben? Wir können Webflow mitteilen , dass dieses Bild doppelt so groß und für hohe DPI-Werte ausgelegt ist Dadurch wird es um die Hälfte verkleinert, genau wie wir es in unseren Designs haben Immer wenn Sie eine sehr große Bilddatei hochladen, gibt Ihnen Webflow hier ein Warnzeichen, da große Bilddateien das Laden Ihrer Website verlangsamen. Bilddatei ist derzeit über 1 Megabyte groß, und das ist Für Benutzer mit langsamerem Internet kann es sogar ein paar Sekunden dauern, bis das Bild geladen ist, und bis dahin starren sie auf einen leeren Bildschirm Zum Glück können wir diese Dateigröße mit dem Bildkomprimierungstool von WebFlow erheblich reduzieren. Gehen Sie zum Access Panel, bewegen Sie den Mauszeiger über das Bild und klicken Sie auf das Drop-down-Menü Klicken Sie dann auf Komprimieren. Holen Sie sich ein paar Dateiformate, in die Sie konvertieren können. AVF wird in den meisten Fällen einen ziemlich guten Job machen , und Sie können es dabei belassen Es reduziert die Dateigröße besser als das Web P. Je nach Bild kann AVF jedoch in seltenen Fällen die Qualität beeinträchtigen Wenn Sie also feststellen, dass die Qualität ziemlich schlecht ist, versuchen Sie es mit der Option Web P. Sie müssen den Vorgang jedoch wiederholen , das Bild löschen, erneut hochladen und dann das neue Dateiformat auswählen . Klicken Sie erneut auf Komprimieren. Es wird einige Zeit dauern Sie die Benachrichtigung erhalten, dass das Bild komprimiert und in ein neues Dateiformat konvertiert wurde . Sie können sehen, um wie viel die Dateigröße reduziert wurde. Sie stieg von über 1 Megabyte auf weniger als 70 Kilobyte. Diesen Komprimierungsprozess werden Sie mit jedem einzelnen Bild durchführen, es sei denn, es ist bereits sehr klein, etwa weniger als Aber Sie müssen es nicht einzeln tun. Sobald Sie alle Ihre Bilder darin haben, können Sie das Bedienfeld „Elemente“ erweitern und mehrere Bilder auswählen, können Sie das Bedienfeld „Elemente“ erweitern und um sie alle auf einmal zu komprimieren Bei anderen Bildern warten wir also einfach, bis wir mit der Site fertig sind und komprimieren sie alle, bevor wir die Site veröffentlichen. Das war's vorerst. Wir werden das Bild in der nächsten Lektion anordnen. Lassen Sie uns das noch einmal zusammenfassen. Um Bilder zu Webflow hinzuzufügen, müssen wir sie zuerst mithilfe der Exporteinstellungen aus Figma Bilder, die aus mehreren verschiedenen Objekten bestehen , müssen zuerst gruppiert werden Das Hinzufügen von Bildern in Webflow erfolgt, indem zuerst das Bildelement zur Leinwand hinzugefügt und dann ein Bild über das Assets-Bedienfeld hochgeladen Um unsere Website schnell zu halten, müssen wir auf die Größe unserer Bilddatei achten 71. Webflow: Eigenschaft anzeigen: Okay, wie bringen wir das Bild auf die rechte Seite? Wir können es nicht einfach ziehen, wie wir es in Figma tun. Wir können es auch nicht nach rechts ausrichten. Denken Sie daran, was ich Ihnen zuvor gesagt habe Wenn Sie nicht weiterkommen und herausfinden möchten , wie Sie die Dinge in Webflow zum Laufen bringen können, ist der Hinweis wahrscheinlich ein anderes Feld Schauen wir uns unser Layout an. Wir haben eine Heldenabteilung. Im Inneren haben wir einen Behälter, der den gesamten Inhalt enthält. In diesem Container haben wir Elemente, die wir links anordnen möchten , und ein Bild, das wir rechts anordnen möchten. Also müssen wir diesen Container irgendwie in zwei Hälften teilen, linke Hälfte und rechte Hälfte und sie nebeneinander sitzen lassen Wir können das mit dem Div-Block machen. Wir können zwei Div-Blocks in diesen Container legen und dann den Inhalt entsprechend einfügen. Beachten Sie, dass Webflow neue Elemente in Ihre Auswahl Nachdem ich einen neuen Div-Block hinzugefügt hatte , wurde dieser neue ausgewählt und der zweite Div-Block wurde darin gelöscht Ziehen Sie es einfach aus diesem Navigator-Panel heraus. Ziehen Sie nun das Bild in einen Div-Block und alles andere in den anderen Div-Block. Und lassen Sie uns diese Tagesblöcke entsprechend benennen , links und rechts. Dort. Jetzt ist die Struktur auf dem richtigen Weg. Jetzt müssen wir herausfinden, wie wir sie dazu bringen können, nebeneinander statt übereinander zu sitzen. Es gibt mehrere Möglichkeiten, dies auf die beste Weise zu tun. Die beste und am meisten akzeptierte Methode, dies zu arrangieren , wäre die CSS-Funktion namens Flexbox, die Sie unter den Anzeigeeinstellungen anwenden können Lassen Sie uns jede dieser Anzeigeeinstellungen durchgehen und sehen, wie sie sich verhalten Standardmäßig sind die Anzeigeeinstellungen für die meisten Elemente auf Blockieren eingestellt. Blockelemente erstrecken sich von Kante zu Kante, und nichts kann neben ihnen platziert werden. Sie werden das nächste Element in die zweite Zeile verschieben. Sie werden dies auch tun, wenn wir eine kleinere Breite festlegen und derselben Zeile Platz für andere Elemente ist. Als nächstes haben wir den Inline-Block. Inline-Blockelemente sind so breit wie der Inhalt im Inneren. Sie geben übrig gebliebenen Speicherplatz frei , der von anderen Elementen belegt werden kann Denken Sie an das Verhalten, als wir die Schaltfläche in einer früheren Lektion dupliziert Schaltflächen in Webflow sind standardmäßig auf Inline-Block gesetzt Sie nehmen nur Platz in ihrem Inhalt ein. Wenn Sie also zwei Inline-Blöcke zusammenfügen und Platz vorhanden ist, werden sie nebeneinander liegen. Wenn wir hier die Anzeige auf Inline-Block setzen, passiert nichts, weil der Inhalt in diesem Fall ein frei fließender Text ist, ein frei fließender Text ist der die Box so breit wie möglich macht. Aber wenn wir einige dieser Texte löschen, werden wir sehen, dass das Begrenzungsfeld mitschrumpft Bei einem darunter liegenden Blockelement passiert das jedoch nicht Selbst wenn wir den Text löschen, das Begrenzungsfeld immer noch nimmt das Begrenzungsfeld immer noch die gesamte Breite seines übergeordneten Nun habe ich gesagt, dass Inline-Blockelemente Platz für andere angrenzende Elemente schaffen Wie kommt es also, dass der zweite Absatz nicht nach oben gesprungen ist? Weil der zweite Absatz so eingestellt ist, dass er blockiert, und Blockelemente gierig sind und eine ganze Etage nur für sich alleine einnehmen wollen eine ganze Etage nur für sich alleine einnehmen Aber wenn wir auch den zweiten Absatz auf Inline-Block setzen , wird er immer noch nicht nach oben verschoben Warum? Sie wollen, aber es gibt nicht genug Platz für beide. Wenn wir den Text auf einem von ihnen kürzen, ist genug Platz vorhanden, und der zweite Block wird in das Stockwerk darüber verschoben. Dies passiert auch, wenn Sie die Breite eines von ihnen manuell verkleinern , indem Sie eine feste Breite anwenden Die dritte Anzeigeeinstellung ist „Inline“, kein Block. Inline gibt an, wie sich Text innerhalb eines Elements verhält. Es fließt genau wie Texte nebeneinander. Es hat keine Werte für Breite und Größe. Es wird sie ignorieren, selbst wenn Sie sie angeben. Die Inline-Anzeige außerhalb des Textes hat nicht viel Sinn, also ist das Inline-Display. Dann haben wir Display None, wodurch das Element ausgeblendet wird Es ist nicht nur unsichtbar, sondern hat auch keinen Einfluss auf das Layout Es ist nicht transparent. Wir sagen dem Browser nur er es nicht rendern und komplett ignorieren soll. Obwohl es nicht vollständig von unserer Website verschwindet , befindet es sich immer noch im Navigationsbereich. Wenn es transparent wäre, würde es immer noch den Raum einnehmen. Sie fragen sich vielleicht, welchen Nutzen es haben könnte, nichts anzuzeigen, aber es gibt viele, und wir werden uns mit ihnen befassen. Das ist Display None. Dann haben wir Display Grid. CSS Grid macht etwas, was vorher nicht möglich war. Eine tabellenartige Anordnung zu haben , in der Sie Elemente nach Belieben verschieben können mit viel Flexibilität und der Möglichkeit , zwischen verschiedenen Geräten ein völlig anderes Layout zu haben . Wir werden im Moment nicht durch das Netz gehen müssen, weil wir es nicht so sehr benötigen werden Stattdessen werden wir das Flex-Layout verwenden, das wir im nächsten Video behandeln werden 72. Webflow: Flexbox: setzen dort fort, wo wir in diesem Video aufgehört haben, und werden uns mit Flexbox befassen und darüber, wie wir es auf unser Layout im Heldenbereich anwenden Flexbox ist eine Möglichkeit, Inhalte innerhalb dieser Box anzuordnen und zu verteilen Die Flex-Einstellungen wirken sich nur auf die untergeordneten Elemente dieses D-Blocks aus und nicht auf den Deblock selbst In unserem Fall, diesen Absätzen, ist der Container selbst also nicht betroffen Sobald Sie das Flex-Layout auswählen, werden die neuen Optionen angezeigt So verteilen wir Kinder in der Flexbox. Lassen Sie mich zeigen, wie Flexbox sein untergeordnetes Element verteilen kann . Ausrichtungsbox können wir die Elemente in Mit dieser Ausrichtungsbox können wir die Elemente in der Flexbox ausrichten Die Steuerung ist sehr intuitiv. Es ist ein Raster von drei mal drei, das die Flexbox darstellt. Wir haben drei Optionen für die obere Ausrichtung: links, mittig und rechts Wir haben drei Optionen für die Ausrichtung von unten, links, mittig und rechts, und wir haben drei Optionen für die Ausrichtung in der Mitte. Die grundlegenden Ausrichtungen sind sehr einfach, weil sie intuitiv sind Das Linienfeld gibt Ihnen eine visuelle Darstellung dessen, was passieren wird Drop-down-Menüs verstecken sich nicht so intuitive Optionen Unter diesen beiden Drop-down-Menüs verstecken sich nicht so intuitive Optionen. Für die Ausrichtung der Y-Achse stehen uns zwei weitere Optionen zur Verfügung: Dehnen und Grundlinie. Die Dehnung ist genau das, was sie sagt. Dehnt die Flex-Kinder so, dass sie den gesamten vertikalen Raum der Flexbox ausfüllen den gesamten vertikalen Raum der Flexbox Wenn Sie die Höhe der Flexbox erhöhen oder verringern, werden die Boxen kleiner und wachsen Dies ist eigentlich die Standardausrichtungseinstellung von Flexbox. Sie können dies sehen, wenn ich die ausgerichteten Einstellungen von hier aus zurücksetze Es ist auf „Links“ und „Dehnen “ eingestellt. Wenn Sie auf eine beliebige Stelle in diesem Ausrichtungsfeld klicken , wird die Streckungseinstellung entfernt die Streckungseinstellung sodass Sie Objekte ohne Dehnung ausrichten können. Die Grundlinienausrichtung hat mit einem Text zu tun. Es ist eine unsichtbare Linie , auf der die Zeichen angeordnet sind. Ich glaube nicht, dass ich jemals eine solche Ausrichtung benötigt habe, sodass Sie sie größtenteils ignorieren können. Unter dem Drop-down-Menü für die X-Achse haben wir zwei weitere Optionen Abstand dazwischen und Abstand um die Achse herum. Dies sind Vertriebsoptionen in Figma. Es verteilt Kinder gleichmäßig. ersten Option passen Leerzeichen dazwischen das erste und das letzte untergeordnete Element bündig an den Rändern der Flexbox an Nun, in meinem Fall ist es nicht gerade bündig, weil ich den Elementen Polsterung und Rand zugewiesen habe . Wenn ich sie loswerde, wird es bündig sein Die zweite Option Space around ist etwas anders. Dabei werden die Kinder immer noch gleichmäßig verteilt, aber dafür wird ein gleichmäßiger Abstand an den Seiten jedes Kindes hinzugefügt , auch beim ersten und letzten Kind Die erste Option ist viel nützlicher und praktischer. Dieser, nicht so sehr. Ich brauche es selten, also können Sie sich darauf konzentrieren , den Abstand zwischen den Optionen zu verstehen. Diese X- und Y-Dropdowns sind übrigens die eigentlichen Steuerelemente der Flexbox Die Linienbox ist nur eine visuelle Anleitung. X-Dropdown-Liste können Sie steuern, wie Sie die untergeordneten Objekte auf der X-Achse ausrichten und verteilen möchten Das ist eine horizontale Achse und dasselbe gilt für die Y-Achse, die die vertikale Achse ist Das Ausrichtungsfeld wird in einen anderen Modus gesperrt, wenn Sie die Optionen Dehnen oder Abstand zwischen den Optionen auswählen , wie es jetzt der Fall ist, weil ich die Option „ Abstand um“ ausgewählt habe. Mit dem Ausrichtungsfeld kann ich nur die Ausrichtung auf der Y-Achse ändern. Um es wieder normal zu machen, können Sie die X-Ausrichtung einfach wieder auf eine der Standardausrichtungen zurücksetzen. Das Gleiche gilt für die Dehnung. Ihnen nur horizontale In diesem Fall stehen Ihnen nur horizontale Ausrichtungsoptionen zur Verfügung. Entfernen Sie einfach die Dehnung, indem Sie zu einer anderen Standardausrichtung zurückkehren , und das Ausrichtungsfeld funktioniert wieder normal. Standardmäßig werden Kinder in horizontaler Richtung von links nach rechts verteilt , aber wir haben die Möglichkeit, die Richtung erwartungsgemäß in die vertikale Richtung umzuschalten . Sie funktionieren auf die gleiche Weise, nur in eine andere Richtung. Sie werden jedoch feststellen, dass sich die Ausrichtung auf der Y-Achse nicht ändert. Oben, Mitte und Unten ergeben uns alle das gleiche Ergebnis. Das liegt daran, dass in der Flexbox kein zusätzlicher Platz ist. Die Kinder füllen die gesamte verfügbare Höhe aus. Die Mindesthöhe , die ich der Flexbox gegeben habe , lässt keinen zusätzlichen Platz Die Größe der Kinder zusammengenommen ist mehr als das. Am Ende dehnt sich die Flexbox mit den Kindern aus Aber wenn ich die Höhe der Flexbox so erhöhe , dass mehr Leerraum übrig bleibt, dann werden Sie feststellen, dass die Ausrichtungsbox genauso funktioniert wie erwartet Was ich am Webdesign liebe, ist, dass es wie ein Puzzle ist. Dinge verhalten sich oft seltsam und Sie versuchen herauszufinden, warum, und eine Lösung für Ihr Problem zu finden Ziemlich befriedigend, wenn Sie das Rätsel lösen, aber ein großer Kopfkratzer wenn Sie auf den Bildschirm starren und versuchen herauszufinden, was zur Hölle vor sich geht In Ordnung, achten Sie auf eine Sache. Bei vertikaler Ausrichtung die Optionen „Abstand zwischen“ und haben die Optionen „Abstand zwischen“ und „ Dehnen“ jetzt ihre Position getauscht. Die Streckung befindet sich jetzt unter der X-Ausrichtung und der Abstand dazwischen unter der Y-Ausrichtung. Übrigens, falls Sie sich nicht sicher sind, was die einzelnen Optionen bedeuten, fahren Sie einfach mit der Maus darüber und lesen Sie den Erläuterungstext darunter Das wird dir eine Vorstellung geben. Eine weitere Option besteht darin, Erklärungen in der Webflows-Dokumentation zu finden Normalerweise mache ich Google Webflow-Hilfe im Namen einer Einstellung In der Regel ist das erste Ergebnis die Seite mit dieser Einstellung oder eine Seite , die irgendwo tief unten eine Erklärung zu dieser Einstellung enthält. Sie können diese Seite einfach finden , indem Sie mit Strg F innerhalb der Seite suchen. Standardmäßig versuchen Flax-Kinder, in eine einzige Zeile zu passen, die das übergeordnete die Seite mit dieser Einstellung oder eine Seite , die irgendwo tief unten eine Erklärung zu dieser Einstellung enthält . Sie können diese Seite einfach finden , indem Sie mit Strg F innerhalb der Seite suchen . Standardmäßig versuchen Flax-Kinder, in eine einzige Zeile zu passen Flex-Objekt überfüllt Zum Glück verfügt Flexbox über eine weitere Einstellung , die uns bei der Verwaltung solcher Szenarien hilft Es heißt Wrap und du findest es in diesem Drop-down-Menü. Wrapping weist Kinder grundsätzlich an , zur nächsten Zeile zu springen, wenn nicht genügend Platz vorhanden ist Wir haben hier viele verschiedene Optionen, aber es gibt normalerweise nur eine, die Sie je nach Ihrer Anweisung benötigen. Da wir eine horizontale Richtung verwenden und die Elemente von links nach rechts verteilt sind, müssten wir eine der Optionen aus der Gruppe von links nach rechts auswählen . Und der beste Weg, um herauszufinden , welche Sie benötigen, besteht darin eher auf das Symbol als auf den Namen zu schauen. Das Pfeilsymbol gibt Ihnen eine bessere Darstellung dessen was mit den Kindern passieren wird. Im ersten Fall beginnen die Kinder von oben, beginnen die Kinder von oben links und folgen einem Z-Muster, das sich nach unten und rechts verteilt. Sie können diese Aktion sehen, wenn ich weitere Elemente hinzufüge. Bei der zweiten Option beginnen sie von unten und verteilen sich nach oben und rechts, wie bei einem umgekehrten Z. Die erste Option wird natürlich häufiger verwendet, aber in bestimmten Fällen müssen Sie möglicherweise die Richtung umkehren. Wenn wir nun eine vertikale Richtung haben, dann schauen wir uns die Umhüllung von oben nach unten an. Aber nichts passiert. Warum ist das so? Weil das Verpacken nicht notwendig ist. Das Umschließen funktioniert nur, wenn Elemente in die nächste Spalte oder Zeile verschoben werden müssen. Da unsere Flexbox keine feste Höhe hat, dehnt sie sich einfach ständig in der Höhe aus, sodass die Notwendigkeit, sie zu wickeln, nie entsteht Aber wenn wir ihr eine Höhe geben , über die sie nicht wachsen darf, dann fangen die Kinder an zu wickeln Ohne Verpackung würde das passieren. Außerhalb der Flexbox laufen sie einfach über. Um ehrlich zu sein, können diese Verpackungsoptionen sehr verwirrend sein. Fühlen Sie sich also nicht schlecht, wenn Sie es nicht verstehen können Der beste Weg, um das gewünschte Ergebnis zu finden , besteht darin, einfach herumzuspielen alle auszuwählen, und eine der Optionen sollte es sein. Das mache ich normalerweise. In der Dropdownliste mit allen Optionen für den Zeilenumbruch findest du zwei Optionen ohne Zeilenumbruch: einzelne Zeile und einzelne Spalte Diese beiden Optionen kehren einfach die Richtung unserer flexiblen Kinder Anstatt von links nach rechts zu wechseln, können wir von rechts nach links wechseln. Und die zweite Option gibt uns die Möglichkeit, die Richtung vertikal umzukehren. Wenn Sie auf eines der Felder klicken, werden im Eigenschaftenbereich spezielle Optionen für das Flex Child angezeigt . Dies gibt uns eine noch genauere Kontrolle über einzelne Elemente in der Flexbox Aber machen wir uns vorerst keine Gedanken über die Flexhild-Optionen. Es kann eine kleine Handvoll sein, Flexbox auf einmal zu verstehen. Machen Sie sich also keine Sorgen, wenn Sie sich etwas verwirrt fühlen oder nicht genau verstehen oder nicht jede einzelne Layoutoption befolgen , die ich gerade behandelt habe Sobald Sie anfangen, es einzubauen und damit herumzuspielen , werden Sie den Dreh raus haben. In einer der Aufgaben habe ich danach ein Flexbox-Spiel eingebaut, eine Art Puzzlespiel, das vom Webflow-Team in Webflow entwickelt wurde. Es ist eine großartige Flexbox-Übung und eine großartige Möglichkeit, Flexbox und verschiedene Ausrichtungsoptionen zu üben Flexbox Gehen wir zurück zu unserem Heldenbereich und schauen wir uns an, wie In unserem Fall ist es eigentlich ziemlich einfach. Wir haben nur zwei Blöcke, links und rechts. Wir können das Flex-Layout auf den Container anwenden. Denken Sie jedoch daran, dass wir diesen Container auf unserer gesamten Seite zu einem Standardcontainer machen diesen Container auf unserer gesamten Seite zu einem Standardcontainer , auch für nicht flexible Elemente, sodass wir uns nicht damit anlegen wollen. Wir können einfach, ja, du hast es erraten, eine weitere Box hinzufügen du hast es erraten, eine weitere Lege die linken und rechten Blöcke hinein und wende das Flex-Layout darauf an Es ist in eine entgegengesetzte Richtung. Wir können dies natürlich mit der Flexbox-Option rückgängig machen, aber wir sollten sie stattdessen im Navigator korrekt anordnen sie stattdessen im Navigator korrekt Ziehen Sie einfach einen über den anderen. Jetzt haben wir unsere Flex-Option, damit wir diese Blöcke nach Belieben ausrichten können. horizontale Ausrichtung ist genau das, was wir wollen, also behalten wir sie dort, und dann die Ausrichtung mittig auszurichten und sie an die Kanten zu schieben , wird genau richtig aussehen. In Figma haben wir Inhalte, die etwas höher sitzen. Das können wir erreichen, indem linken Block einen unteren Rand Dadurch wird der Inhalt nach oben verschoben. Lassen Sie uns das auf einem kleineren Bildschirm überprüfen. Es gibt zwei Dinge , die etwas Styling benötigen. Erstens ist der linke Inhalt etwas chaotisch. Die Knöpfe sind alle vermasselt. Das liegt daran, dass in einer Zeile nicht genug Platz ist und die zweite Taste nach unten springt Wir können das leicht beheben, indem dem linken Block eine Mindestbreite Dann wird es nicht bis zu einem Punkt schrumpfen , an dem das passieren muss 400 Pixel sehen nach einer guten Idee aus. Jetzt schrumpft der linke Block nicht über diesen Punkt hinaus. Und wenn nicht genug Platz vorhanden ist, wird das Bild beschädigt. Der zweite Punkt ist, dass sie etwas zu nahe beieinander liegen. Wir können dem linken Block einen zusätzlichen Rand hinzufügen , damit das Bild weggeschoben wird Das sieht ziemlich gut aus. Die Bildschirme von Tablets und Mobiltelefonen sind etwas unordentlicher, aber wir werden uns in den Lektionen zur mobilen Optimierung darum kümmern in den Lektionen zur mobilen Optimierung In Ordnung, das sieht genauso aus, wie wir es uns wünschen. Ja, das Bild hat im Vergleich zum Figma-Design etwas andere Abmessungen , aber das ist zu erwarten Wir machen die Dinge responsiv, sodass sie kleiner werden und sich an die Bildschirmgrößen anpassen Um es noch einmal zusammenzufassen: Flexbox ist das, was es bedeutet, flexible Box. Es kann untergeordnete Elemente entweder in vertikaler oder horizontaler Richtung verteilen entweder in vertikaler oder horizontaler Richtung Sobald Sie den Display-Flex für ein Element festgelegt haben, Optionen für Ausrichtung und Ausrichtung angezeigt. die richtigen Optionen festzulegen Von hier aus die richtigen Optionen festzulegen, ist eine Frage von Versuch und Irrtum Spielen Sie einfach mit allen Optionen herum , bis Sie das richtige Layout für Sie gefunden 73. Webflow im Vergleich zu Figma-Größen: Viele Schüler hatten Fragen zu den Unterschieden zwischen den Größen in Webflow Figma und zu der Beziehung zwischen der Leinwandgröße in Webflow und der Das ist eigentlich ein sehr gutes Thema und ich habe beschlossen, eine vollständige Lektion darüber zu machen Hier gibt es mehrere Nuancen, mit denen Sie sich beim Übergang von Figma zu Beginnen wir mit einem Konzept namens Responsive Design. Ein Abschnitt später in diesem Kurs ist dem responsiven Design gewidmet, und wir werden uns eingehender mit diesem Thema befassen. Aber lassen Sie uns ein wenig darüber nachdenken, denn ohne es könnten Sie sich beim Erstellen Ihrer Website etwas verwirrt fühlen. Jede Website, die wir erstellen, wird von Benutzern auf vielen verschiedenen Geräten und Bildschirmen angezeigt . Besuchen Sie Ihre Website also auf einem MacBook Air, einige auf Lenovo ThinkPad, einige auf einem benutzerdefinierten Desktop-PC, einige auf einem iPhone und auf Hunderten anderer verschiedener Geräte Alle diese Geräte haben ihre eigenen Bildschirmgrößen und Auflösungen Eine gute Website muss das Gerät des Benutzers berücksichtigen und dieses Gerät und seine jeweilige Bildschirmgröße anpassen und darauf reagieren , um die bestmögliche Version der Website bereitzustellen. Das nennt man responsives Design, und genau so werden wir unsere Website erstellen. Webflow macht es einfach, weil es über eine integrierte Responsive-Design-Technologie verfügt Das Design, das wir in Figma erstellt haben , reagiert jedoch überhaupt nicht Bevor wir unsere Seite und Figma entworfen haben, haben wir eine bestimmte Rahmengröße mit 1.440 Pixeln und Breite ausgewählt 1.440 Pixeln Dieser Rahmen steht stellvertretend eine einzelne Bildschirmauflösung, einen Bildschirm mit genau dieser Größe, die schätzungsweise etwa 6% aller weltweit verwendeten Desktop-Bildschirmauflösungen ausmacht Höhe spielt hier keine Rolle, da die Höhe im Gegensatz zur Breite nicht festgelegt ist. Wir erhöhen sie, wenn der Inhalt der Webseite wächst und zwar auf einer echten Website, die als Scrollen dargestellt wird. Möglicherweise haben Sie zwei gültige Fragen. Wie können wir diese spezielle Rahmengröße wählen, die nicht einmal so beliebt ist? zweite Frage, die Sie vielleicht stellen, ist, warum wir in FIGMA kein responsives Design erstellt Lassen Sie mich zuerst die zweite Frage beantworten. Figma hat zwar ein responsives Tag wie das automatische Layout, aber dieses Tag ist bei weitem nicht an die tatsächlichen responsiven Fähigkeiten heranzukommen , die das Web bietet Da wir die Entwickler auf unserer Seite sind, könnten wir genauso gut die volle Leistung des responsiven Designs nutzen und uns direkt in Webflow darum kümmern direkt in Webflow darum Wir müssten das immer noch in Webflow machen unabhängig davon, ob wir Figma machen würden oder nicht, wir könnten genauso gut Beantworten wir nun die erste Frage, warum 1.440 Pixel. Desktop- und Laptop-Auflösungen liegen zwischen 1000 und 4.000 Pixeln in der Breite Das ist ein ziemlich großer Bereich. In diesem Bild können Sie sehen, wie die Bildschirmgrößen tatsächlich miteinander verglichen werden. Sie können buchstäblich neun HD-Bildschirme in einer Auflösung von vier K unterbringen. Wenn Sie beispielsweise an einem Bildschirm mit zwei K arbeiten und sich dafür entscheiden Figma mit einer passenden K-Framegröße zu verwenden, haben Sie viel Platz auf dem Bildschirm, auf dem Sie Ihr Design erstellen können Sie können viel mehr Inhalte auf Ihrem Bildschirm unterbringen als jemand auf einem winzigen Netbook c. Ein kleines Netbook deckt im Grunde nur einen kleinen Teil Ihres Zwei-K-Frames Am Ende fügen Sie schnell viel zu viele Elemente oder Details in Ihr Design ein, die einfach nicht auf einen kleineren Bildschirm passen Dies wird Ihnen später Kopfschmerzen bereiten, wenn Sie die Reaktionsfähigkeit in Webflow anpassen Was ist dann die gute Rahmengröße? Die meisten Bildschirme sind besser als Laptop oder Desktop und liegen irgendwo zwischen diesem Bereich. Zwei K- und Vier-K-Bildschirme sind ziemlich selten, und Benutzer auf diesen Bildschirmen verwenden den Browser normalerweise nicht im Vollbildmodus , da dies der Zweck eines sehr großen Displays wäre eines sehr großen Displays dem Sie viele Dinge auf Ihrem Bildschirm unterbringen können. Dann entwerfen wir für einen Bereich von etwa 1.000 bis 2000 Pixeln Wahl eines Bildschirms in der Mitte dieses Bereichs ist der beste Ansatz, da sich die durchschnittliche Größe für größere Displays am einfachsten nach oben und für kleinere Displays am einfachsten nach unten anpassen lässt am einfachsten nach oben und für . Bildgröße von Figma mit 1.400 Pixeln ist ein guter Kandidat für diesen Zweck, da sie sich ziemlich in der Mitte Ihr Komfort als Designer ist ebenfalls wichtig. Vielleicht möchten Sie also eine Rahmengröße wählen , die Ihrer Bildschirmauflösung entspricht. Auf diese Weise können Sie bei der Arbeit mit Figma eine Vorschau Ihrer Website so anzeigen, wie sie auf Ihrem Bildschirm aussehen würde Wenn Ihre Bildschirmauflösung also einem Durchschnitt von 1280-1600 entspricht, Sie diese gerne für die Bildgröße bei Ihrem nächsten Projekt verwenden die Bildgröße bei Ihrem Du kannst deine Bildschirmauflösung herausfinden indem du einfach googelst, was meine Bildschirmauflösung ist und auf einer der ersten Websites nachschaust Oder du kannst deine Bildschirmbreite auch sehen, indem du den Vorschaumodus in Webflow aufrufst und diese Zahl hier überprüfst Dies ist eine Breite der sichtbaren Leinwand. Wenn Ihr Browser die volle Breite hat, entspricht dies Ihrer tatsächlichen Bildschirmauflösung. Mein Bildschirm ist zum Beispiel tatsächlich 14 x 40 Pixel breit. Das ist nur ein glücklicher Zufall. Es ist jedoch nicht unbedingt erforderlich, die Rahmengröße in Figma an die Webflow-Leinwandgröße anzupassen die Rahmengröße in Figma an die Webflow-Leinwandgröße Was auch immer wir in Figma gemacht haben, ist ein Modell eines einzelnen Bildschirms. In Webflow erstellen wir eine flüssig reagierende Website, die schrumpft und wächst Zusammen mit dieser 14-40-Pixel-Version erstellen wir auch eine Version mit 12, 80, 1920, 320 Pixeln und allem, Es ist eine Website, die wie ein Akkordeon schrumpft und wächst Versuchen Sie nicht, Ihr Figma-Modell mit 100-prozentiger Genauigkeit abzugleichen. Nur die identische Leinwandgröße kann 100% wie Ihre Designs aussehen Alles andere müssen wir uns an die Realität eines bestimmten Bildschirms anpassen. Wie Sie feststellen können, ändert sich die Leinwand oder die sichtbare Bildschirmbreite zwischen dem Vorschaumodus und dem Designer. Im Designer sind meine 14 40 jetzt nur noch 992 Pixel groß. Das ist ganz natürlich, weil der Designermodus über Seitenwände verfügt , sodass sie den verfügbaren Bildschirmbereich einnehmen Webflow bietet die Möglichkeit, diese Breite zu ändern sie sogar in meine ursprüngliche Bildschirmbreite umzuwandeln, wenn ich berücksichtigen möchte , dass Erhöhung der Leinwandbreite keine vollständig realistische Ansicht bietet Webflow kann meinem Laptop nicht mehr Pixel hinzufügen Stattdessen zoomt es heraus und ändert den Maßstab, um den Eindruck eines größeren Bildschirms Dadurch entspricht jedes Element nicht seiner tatsächlichen Größe. Es ist zwar immer noch eine nützliche Vorschau , da Sie sehen können, wie Elemente miteinander interagieren , und Probleme erkennen und Layoutprobleme erkennen. Es ist, als ob Sie auf einen Bildschirm mit 1.400 Pixeln schauen , aber ein bisschen weit davon entfernt stehen, alles andere entspricht im Grunde der Realität Beim Verkleinern hingegen werden die tatsächlichen Größen ermittelt, da die Skalierung bei 100% bleibt Diese Symbole stehen hier für sogenannte Geräte-Breakpoints Sie sind eigentlich nicht nur zur Schau gedacht. Sie können benutzerdefinierte Regeln verwenden, Regeln, die für jeden Geräte-Breakpoint spezifisch sind Aber darüber müssen Sie sich vorerst keine Gedanken machen. Wir werden uns später im Bereich Responsive eingehender damit befassen. Vorerst müssen Sie nur wissen, dass Sie an dem Basis-Breakpoint auf dem Desktop arbeiten, also an dem, auf dem ein Sternsymbol steht Basis-Breakpoint auf dem Desktop arbeiten, also an dem, auf dem ein Sternsymbol Hier müssen Sie während dieser Phase bleiben und Ihre Designs innerhalb des Desktop-Haltepunktbereichs überprüfen , der 992 Pixel und mehr beträgt Im Vorschaumodus können Sie die Größe der Leinwand auf 992 Pixel und bis zu 1.900 Pixel reduzieren , um zu sehen, wie sie innerhalb dieses Bereichs aussieht, und um sicherzustellen, dass keine All das ist unser einziger Desktop-Breakpoint und jede Änderung, die wir an 992 oder 1.900 vornehmen , Unser Design muss für beide gut funktionieren. müssen Sie die Seite nicht überprüfen kleineren Geräten müssen Sie die Seite nicht überprüfen, da wir dies im nächsten Abschnitt tun werden. Zuerst werden wir alles im Desktop-Breakpoint erstellen und dafür sorgen, dass es für all die verschiedenen Desktop-Bildschirmgrößen gut aussieht die verschiedenen Desktop-Bildschirmgrößen Im Bereich Responsive Design werden wir unsere Seite noch einmal durchgehen und Änderungen und Anpassungen vornehmen, damit alles für alle kleineren Bildschirmgrößen gut aussieht für alle kleineren Bildschirmgrößen gut Fügen Sie diese größeren Breakpoints auch nicht hinzu. Wir brauchen sie nicht wirklich. Das von uns erstellte Design verwendet einen Container mit einer maximalen Breite von 1.160 Pixeln Keiner unserer Inhalte überschreitet diese Grenze, mit Ausnahme der Hintergrundfarben in Abschnitten Die tatsächlichen Elementgrößen zwischen Figma und Webflow Solange Sie in Figma den Zoom-Status von 100% haben, durch Anwenden derselben Größe in Webflow sollten Sie durch Anwenden derselben Größe in Webflow mehr oder weniger dieselbe Größe erhalten Beispielsweise sollte eine Telefongröße von 75 Pixeln in Figma genauso aussehen, wenn sie in Webflow angewendet wird Auch hier gilt, wenn der Zoom-Status von 100% angezeigt wird, und das unabhängig von der Framegröße in Figma oder Webflow, solange die Skalierung in beiden Fällen 100% beträgt Der Webflow ist die Leinwandgröße, die alle anderen Dinge verändert. Erwarten Sie nicht, dass das Heldenbild auf einem Bildschirm mit 992 Pixeln dieselbe Größe wie bei Figma hat, da diese Leinwand nicht genug Platz bietet, um das Bild in seinen ursprünglichen Abmessungen unterzubringen Das Bild klingelt, weil dem Bild eine spezielle Eigenschaft zugewiesen wurde , die es verkleinert , wenn nicht genügend Platz vorhanden ist Schriftgröße wird beispielsweise nicht verkleinert, aber die Länge des Textes wird stattdessen verkleinert , wenn kein Leerzeichen vorhanden ist . Das ist alles. Das sind die wichtigen Nuancen der Bildschirmgrößen zwischen Figma und Webflow Wenn Sie immer noch Zweifel haben, lassen Sie es mich in den Fragen und Antworten wissen. 74. Webflow: Navbar (Chat-App): In diesem Video werden wir unserer Seite eine Navigationsleiste hinzufügen unserer Seite eine Navigationsleiste hinzufügen Webflow hat ein Standard-Navigationsleistenelement namens Navbar, das wir über das Elemente-Bedienfeld hinzufügen können. Ziehen Sie es nach oben, um es im Heldenbereich an den Anfang zu bringen Heldenbereich an den Anfang Die Navbar enthält bereits Elemente . Schauen wir uns genau an, woraus diese Navbar besteht. Innerhalb des übergeordneten Navbar-Elements haben wir also einen Container. Dieser Container ähnelt dem , was wir mit unserem Hero-Inhalt gemacht haben , der in der Mitte zentriert ist und eine maximale Breite hat, sodass die Elemente gut darin verpackt sind Darin befinden sich dann drei weitere Elemente, bei denen es sich wiederum um Boxen handelt. Erstens befindet sich die Marke auf der linken Seite. Dort haben wir das Logo platziert. In der Navigation befinden sich diese drei Navigationslecks. Wie bei den meisten anderen Dingen ist es nur ein normaler Div-Block, den jedoch bereits einige Standardstile angewendet wurden. Wir können diese Dils ändern, wenn wir wollen. Und drittens haben wir eine Menütaste, aber sie ist unsichtbar. Sie können hier sehen, dass dieses Element keine Anzeige angewendet wird, sodass es ausgeblendet wird Die Menüschaltfläche ist nur auf dem Desktop unsichtbar. Auf anderen Geräten ist sie sichtbar, und Sie können sehen, warum. Es ist ein Hamburger-Symbol, das die versteckten Navigationslinks auflistet, mit denen Sie wahrscheinlich vertraut , da sie auf den meisten Websites verfügbar sind Das Anpassen von Navigationslinks auf Mobilgeräten ist schwierig. Wir verwenden dieses versteckte Navigationsmenü und das Hamburger-Symbol, das diese Links enthält Navbar verhält sich wie jedes andere HTML-Element in Webflow, bietet jedoch auch einige zusätzliche Optionen Es gibt eine Option zum Öffnen und Schließen des Menüs. Das Menü ist im Grunde das, was in Mobilgeräten versteckt ist. In der Desktop-Version macht dies nichts, da das Menü jederzeit sichtbar ist. Hier gibt es drei Arten von Menüs: das Drop-down-Menü, das Standardmenü, das rechten Seite und das Menü auf der linken Seite. Ich verwende hauptsächlich die Standard-Drop-down-Option. Darunter befinden sich Optionen zur Lockerung. Das bezieht sich auf die Animation. Easing ist eine Animation, die langsam beginnt und sich dann beschleunigt So sind die meisten Animationen im Web eingestellt. Aber dazu später mehr in einem ganzen Abschnitt, der Interaktionen und Animationen gewidmet ist. Ich belasse all diese Einstellungen standardmäßig. Das einzige, was ich hier verwende, ist das offene und das geschlossene Menü, damit ich das Menü visuell gestalten kann. Eine weitere nützliche Einstellung können hier die Anzeigeoptionen für das Menü sein. Mit diesem Slider können wir genau wie bei der Desktop-Version einstellen, auf welchen Geräten es ein Drop-down-Menü geben soll und auf welchen Geräten reguläre Navigationslinks hinterlassen Geräten es ein Drop-down-Menü geben soll und auf welchen Geräten reguläre Navigationslinks hinterlassen werden sollen. Wenn Sie den Slider beispielsweise nach rechts bewegen, wird er auf den Tablets deaktiviert. heißt, auf Tablets sehen wir die regulären Links und auf allem, was kleiner ist, sehen wir das Hamburger-Menü Lassen Sie uns nun die Navigationsleiste so wählen, dass sie zu unserem Design passt. Zuerst der Hintergrund. Das ist ziemlich einfach. Stellen Sie es einfach in der Hintergrundeigenschaft auf Blau ein. Sie werden feststellen, dass sich der Inhalt der Navigationsleiste nur bis zu einem bestimmten Punkt erstreckt Das liegt daran, dass sich der Inhalt im Container befindet und dies nicht der Container ist, den wir erstellt haben Es ist ein Standardcontainer von Webflow, der nicht so breit ist wie unserer. Wir wollen diesen Container nicht. Stattdessen wollen wir den Container verwenden , den wir bereits erstellt haben, wie den, in dem sich unser Heldeninhalt befindet. Wie können wir stattdessen unseren Container verwenden? Genau wie wir jedes andere Element wiederverwenden , indem wir dieselbe Klasse anwenden. Und Sie werden sehen, wie der Container sofort die Breite ändert. Dies ist die Klasse, die wir erstellt haben, und wir haben sie diesem Container gegeben , den wir zuvor gestylt haben Und wenn wir das auf diesen Navbar-Container anwenden, werden all diese Stile und Eigenschaften in diesen Navbar-Container übertragen Genau wie bei den Schaltflächen wird, wenn wir uns entscheiden, die Breite unseres Standardcontainers an einer Stelle zu ändern , er an jeder anderen Stelle sofort wie von Zauberhand aktualisiert jeder anderen Stelle sofort wie Als Nächstes müssen wir unser Logo einfügen. Genau wie beim Hero-Bild werden wir das Logo exportieren und als Bildelement ablegen. Im Gegensatz zu unserem Hero-Bild wählen wir dieses Mal SVG aus. Warum? Weil wir unser Logo selbst in Figma erstellt Es ist momentan eine reguläre Steuer. Wenn wir es in SPG exportieren, behalten wir seine vektorbasierten Eigenschaften Es wird sofort für die Netzhaut optimiert. Es wird sich unendlich dehnen, ohne an Qualität zu verlieren, und die Dateigröße wird sehr klein sein In den meisten Fällen werden SVGs kleiner sein als PNGs und JPEGs. Ordnung, sobald Sie das Bild exportiert haben, fügen Sie ein neues Bildelement hinzu und laden Sie das Logo hoch, wie wir es beim letzten Ich habe Markenelemente ausgewählt Wenn ich also auf das Bild klicke, wird es automatisch in der Markenbox angezeigt. Aber das Logo ist oben aufgeklebt. Wie beheben wir das? Es gibt viele Möglichkeiten, daraus eine Linie in der Mitte zu machen. Am einfachsten ist es wahrscheinlich, dem Bild selbst einen oberen Rand hinzuzufügen. Lassen Sie uns nun die Navigationslinks gestalten. Wir werden das genauso machen wie alles andere. Aber zuerst werden wir alle anderen Nab-Links löschen und einfach einen behalten Wir werden einen bestimmten Stil darauf anwenden, sodass Webflow automatisch eine Klasse erstellt Jetzt können wir diesen Nab-Link beliebig oft duplizieren Nab-Link beliebig oft Und wenn wir eine Änderung an einem von ihnen vornehmen, werden alle sofort aktualisiert. Lang lebe CSS. Also werden wir die entsprechenden Textilien auftragen , ziemlich einfach. Und fügen Sie Abstände hinzu, die zu unseren Designs passen. Wir können den Abstand Figma messen und auch hier die exakten Abstände eintragen Der Abstand oben auf Figma beträgt 42 Pixel und auf der Seite 30 In Webflow werden wir dafür Padding verwenden. Wir könnten Schnäppchen verwenden, aber standardmäßig hat es bereits Polsterung und so ist es ganz nett Nebenbei werden wir 15 Pixel für jede Seite verwenden. Auf diese Weise ergibt das Auffüllen von zwei benachbarten Links insgesamt 30 Pixel Durch die Verwendung von Padding wird der gesamte Link vergrößert, sodass Benutzer nicht nur auf den Text, sondern auf das gesamte Feld klicken können nur auf den Text, sondern auf das gesamte Sie werden sehen, dass der Link auch im leeren Bereich anklickbar ist , weil es kein leeres Feld ist, das Ganze ist der Link Lassen Sie uns zum Schluss diese Schaltfläche hinzufügen. Anstatt ein Button-Element zu verwenden, werde ich jedoch einfach eine Schaltfläche aus einem dieser Navigationslinks erstellen . Duplizieren Sie die Klasse, damit wir neue Änderungen vornehmen können , ohne andere Navigationslinks zu beeinflussen. Lassen Sie uns nun sehen, welche Eigenschaften unsere Schaltfläche in Figma hat. Das Textil entspricht den Navigationslinks. Der Hintergrund ist weiß, aber mit einer Deckkraft von 20% und einer Polsterung rund um die Steuern, 12 Pixel oben und unten und 24 Pixel an den Seiten Lassen Sie uns das alles in Webflow neu erstellen. In Webflow Color Picker können Sie in diesem Feld mit dem Namen A für Alpha-Wert eine Deckkraft von 20% anwenden diesem Feld mit dem Namen Ich bin mir nicht sicher, warum Alpha und warum nicht O für Opazität. Es hat etwas mit unserem RGBA-Farbsystem zu tun , aber wen Wir haben eine andere Polsterung als unsere Nav-Links. Und wir haben abgerundete Ecken, die wir im Grenzbereich festlegen können Hier gibt es keinen genauen Wert. Erhöhen Sie ihn, bis er nicht mehr rundet Kein Problem, wenn du darüber nachdenkst. Ordnung. In Figma können wir sehen, dass es oben einen Rand von 30 Pixeln hat Und für den linken Rand werden wir 15 verwenden, da dies zu einem vorhandenen Rand von 15 gegenüber dem Navigationslink daneben addiert einem vorhandenen Rand von 15 gegenüber dem Navigationslink daneben Aufgrund der neuen Abstände ist das Logo, wie Sie sehen können, aus der Reihe gerissen. Wir müssen das Logo in der Mitte am Navigationsmenü ausrichten . Wir müssen es mit dem Auge ausrichten. Lassen Sie uns abschließend die Fließfähigkeit und Reaktionsfähigkeit unserer Navbar überprüfen und Reaktionsfähigkeit unserer Navbar Wie Sie sehen können, werden sie an den Rändern zusammengedrückt, aber das liegt daran, dass wir keinen zusätzlichen Abstand haben Der Heldenbereich ist in Ordnung, weil er an den Seiten gepolstert Wenn also das Browserfenster schrumpft und der Container mitschrumpft, verhindert die Polsterung, dass es bis zu den Rändern zusammengedrückt wird zu den Rändern zusammengedrückt wird Wir können die gleiche Polsterung auch auf unsere Navigationsleiste anwenden. Und da sieht es jetzt gut aus. Es ist fast fertig. Es gibt eine kleine, aber wichtige Sache, die Hover-Effekte fehlen Keiner der Links oder Buttons reagiert, wenn ich mit der Maus über sie fahre. lernen wir, wie man In der nächsten Lektion lernen wir, wie man Hover-Effekte hinzufügt Richtig, um es noch einmal zusammenzufassen: Wir lernen, wie man eine Navigationsleiste hinzufügt, die Navigationsleiste ist und woraus sie besteht, Einstellungen eine Out-Leiste hat und wie sie auf kleineren Geräten funktioniert Wir lernen, wie man ein Logo in eine Out-Bar einfügt und wie man Links im Navigationsmenü gestaltet 75. Webflow: Checkliste zum Debuggen: Ordnung, was passiert also, wenn Sie in Webflow auf ein Problem stoßen? Darum geht es in diesem Video. Du musst dir dieses Video nicht wirklich richtig ansehen. Jetzt ist es ein Tutorial für den Fall, dass Sie auf ein Problem stoßen. Manchmal schicke ich dich zu diesem Video. Wenn Sie Ihre Probleme in Fragen und Antworten posten, schicke ich Ihnen dieses Video oder fordere Sie auf, zu dieser Webflow-Debugging-Checkliste zurückzukehren dieser Webflow-Debugging-Checkliste um die Schritte durchzugehen, da sie dabei hilft viele der Probleme zu lösen, mit denen Sie möglicherweise beim Erstellen Ihrer Website konfrontiert sind Nein, du musst es dir nicht ansehen. Sie können es sich jetzt ansehen, wenn Sie möchten, oder Sie können später darauf zurückkommen , wenn Sie tatsächlich auf ein Problem stoßen, das Sie nicht lösen können. Also ich habe diese Checkliste hier. Es besteht aus ein paar Schritten, und ich habe hier einige Probleme erstellt, denen es sich um häufig auftretende Probleme handelt, mit denen meine Schüler hier und da konfrontiert sind, und es handelt sich nicht um erfundene Probleme Sie sind sehr häufig. Es passiert. Also werde ich sie durchgehen und Ihnen zeigen, wie man mit dieser Debugging-Checkliste arbeitet und wie man verschiedene Schritte durchläuft und wie sehr, sehr hilfreich das eigentlich ist Also hier ist dieser komische Space-Absatz, der wirklich sehr, sehr groß ist und nicht in der Lage ist, herauszufinden, was hier vor sich geht? Woher kommt dieser Raum? Wir klicken darauf, da passiert nichts. Also, was machen wir in diesem Fall? Mal sehen, was uns unsere Checkliste sagt. Schritt eins: Entferne die Klasse vom Verdächtigen, um zu sehen, ob das Problem behoben ist. Wenn ja, fahren Sie mit Schritt fünf fort. Okay. Also verdächtig ist in diesem Fall wahrscheinlich ein Absatz. Es ist mit einem Absatz. Es passiert wahrscheinlich etwas mit dem Absatz. Und wir haben hier einen Kurs. Jetzt können wir die Rücktaste auf Ihrer Tastatur entfernen, die Klasse daraus entfernen und Hmm, das Problem ist verschwunden, richtig Machen Sie nun den Vorgang rückgängig, um den Absatz wieder zum Element zurückzubringen. Strg Z auf dem PC, Befehl C auf dem Mac. Das ist rückgängig gemacht. Der Kurs ist also zurück. Und jetzt Schritt fünf, fahren Sie mit Schritt fünf fort. Mal sehen, was uns Schritt fünf sagt. Sobald Sie die Klasse identifiziert haben , die das Problem verursacht, fügen Sie die Klasse wieder dem Element hinzu. Das haben wir bereits getan und angefangen jeden Stil zurückzusetzen , der in blauer Farbe ist Sie sollten in der Lage sein, einen bestimmten Stil zu finden der das Problem verursacht. In Ordnung, lass uns sehen Wählen Sie den richtigen Absatz und die richtige Klasse aus, und dann beginnen wir mit dem Zurücksetzen der blau hervorgehobenen Klassen Nun, die Art und Weise, wie HTML, CSS und einfach Webseiten und Websites funktionieren , ist , dass alles in einer Klasse zusammengefasst ist All die Veränderungen, die wir vornehmen, leben in einer Klasse. Deshalb haben wir hier einen Kurs. Sobald du sie löschst und diese Klasse aus diesem Absatz entfernt hast, sind all diese Änderungen weg. Aus diesem Grund ist das Entfernen einer Klasse eine gute Möglichkeit, um zu testen, ob etwas ein Problem verursacht. Wir können also damit beginnen, den Reset zurückzusetzen. Hier gibt es eine Abkürzung In meinem Fall klicke ich auf die Option, ich klicke auf dem PC Das hat es nicht getan. Das hat es nicht getan. Wenn etwas nicht funktioniert, mache ich es rückgängig, damit ich es nicht vermassle und alles wieder normal mache. Mal sehen, klicken Sie auf Nein, das hat es nicht getan. Optionsklick, nein, das hat es nicht getan. Bing. Schau dir das an. Bingo. Das haben wir. Also, was haben wir hier? Höhe. Das ist Typografie, das heißt Zeilenhöhe 160 Pixel. Oh, ich weiß, wir meinten 160%. da hast du's. Problem behoben. Schau dir das an. Meine Checkliste funktioniert Jetzt haben wir hier ein weiteres Problem. Das ist linksbündig. Das ist F Align. Die Tasten sind mittig ausgerichtet. Das ist kein gutes Design. Sie wollen eine konsistente Ausrichtung. Entweder ist alles mittig ausgerichtet oder alles ist linksbündig ausgerichtet. Wir möchten also, dass diese Schaltflächen linksbündig ausgerichtet sind. Aber das ist nicht Figma. Wir können das hier auf die linke Seite ziehen. Was machen wir? Auch hier beginnen wir mit dem ersten Schritt, der besagt , dass Button ein Verdächtiger ist. Lassen Sie uns die Klasse daraus entfernen , die nichts getan hat. Okay. Mal sehen, was unsere Checkliste dazu sagt Entferne die Klasse von dem Verdächtigen , um zu sehen, ob das Problem behoben ist. Nein, es ist nicht verschwunden. Okay, lass uns zu Schritt zwei übergehen. Da das Entfernen der Klasse das verdächtige Element nicht geholfen hat, bedeutet das, dass das Problem von einem anderen Element herrührt Entfernen Sie zunächst die Klassen aus dem direkt übergeordneten dann von den übergeordneten Klassen bis hin zum eigentlichen Element, bis Sie die Klasse entfernen, durch die das Problem behoben wurde. Ordnung, lass uns sehen. Also, was ist der Hauptteil des Buttons Wir können das überprüfen und es im Navigator finden. Wir haben eine Schaltfläche und das übergeordnete Objekt wird als Blockkopie zurückgelassen. Okay, das ist unser Elternteil. Eine andere Möglichkeit, Eltern zu finden, ist die Pfeiltaste nach oben. Klicken Sie auf O. Dadurch wird sofort das übergeordnete Element ausgewählt. Wir können die Klasse jetzt entfernen. Nein, das hat es nicht getan. Also werde ich es zurückgeben Nochmals, Schlüssel, und jetzt wählen wir einen Großelternteil aus, den Elternteil der Eltern. Das ist also der Elternteil Der nächste Elternteil ist Zero Flax, richtig? Hoch, ich hoch. Da hast du's. Das ist ausgewählt. Jetzt entfernen wir es daraus. Nein, das hat es nicht getan. Schade. Noch eins Vielleicht schafft es dieser. Lass uns sehen. Bam. Hab ich getan Was ist mit dem Kerl los? Okay. Wenn du den Buggy-Kurs gefunden hast, haben wir gleich zu Schritt fünf Schritt fünf war genau das Gleiche, was wir bereits getan haben, angefangen, blaue Styles zurückzusetzen und zu entfernen Nein, das hat nichts gebracht. Oh, das habe ich getan. Was ist passiert? Lass uns sehen. Ein Linienmittelpunkt. In diesem Fall wirken sich also Einstellungen für die Textausrichtung des die Einstellungen für die Textausrichtung des Elternteils tatsächlich auf die Kinder aus. Macht Sinn. Eine Linie ist übrig. In Ordnung, das ist ein Problem Groß. Geil. Das sind einfache. Gehen wir jetzt zu einem etwas schwierigeren über. Ein weiteres häufiges Problem, das ich bei meinen Schülern sehe, das Heldenbild, und es ist einfach winzig, winzig, winzig. Es ist in eine sehr, sehr enge Ecke gequetscht. Also, was machen wir in diesem Fall? Nochmals, wir gehen den ersten Schritt durch, entfernen die Klasse vom Verdächtigen. Diese hat nicht einmal eine Klasse, also können wir sie nicht entfernen. Also kommt es wahrscheinlich nicht vom Bild. Dann würden wir vom Elternteil gehen, es entfernen, vom Elternteil entfernen, es entfernen und so weiter. Und wenn wir das einmal durchgemacht haben, werden wir herausfinden, dass es in diesem Fall auch nicht funktioniert. Also haben wir den zweiten Schritt gemacht, nichts passiert. Dann gehen wir zu Schritt drei. Wenn das Problem von keinem der Eltern herrührt, liegt es möglicherweise an Kindern oder Geschwistern. Also müssen wir den Vorgang aus Schritt zwei wiederholen, aber das müssen wir bei den Kindern oder bei den Geschwisterelementen machen den Kindern oder bei den Geschwisterelementen Nun, die Art und Weise, wie das Internet funktioniert, und das ist seltsam Es ist nicht intuitiv, aber so funktioniert es. Das Web funktioniert wie ein Dokument. Haben Sie jemals mit dem Word-Dokument gearbeitet? Wissen Sie, wenn Sie etwas in dem Word-Dokument verschieben , zum Beispiel versuchen, das Bild ein wenig zu vergrößern, und die gesamten etwa 20 Seiten Ihres Dokuments werden einfach völlig durcheinander gebracht Ja. Das sind Webseiten. Der ursprüngliche Typ in der Schweiz , der Websites erfunden hat , hat ein Dokument benutzt daraus eine Webseite erstellt. Es funktioniert also grundsätzlich. HTML funktioniert wie ein Dokument. Alles nimmt Raum ein. Alles schiebt es herum. Es ist nicht wie Figma. Figma ist friedlich Es funktioniert in Schichten. Jeder versteht sich. Niemand legt sich miteinander an. Aber Dokumente, Dokumente sind gierig und alles verdrängt sich gegenseitig Sie sind wie Länder, die um ihr Territorium kämpfen. Also müssten wir hier nachschauen , was mit den Geschwistern los ist. Um die Geschwister herauszufinden, haben wir jetzt keine nette kleine Abkürzung, also müssen wir die Navigation durchgehen. Damit wir das alles hier zusammenklappen können, klicken Sie erneut auf das Heldenbild. Ein Heldenbild hat kein Geschwisterchen, okay. Wenn das Heldenbild kein Geschwisterkind hat, dann stellen wir das Elternteil nach oben und beginnen mit dem Geschwisterkind der Eltern Also Onkel, Tanten, das ist es, womit wir arbeiten. Wenn das nicht funktioniert, dann entscheiden wir uns für Großeltern, Großeltern und Geschwister und so weiter. Wir machen einfach weiter Und wenn das Eltern-Geschwister nicht funktioniert und wir das allein mit den Eltern machen und sich nichts ändert, dann müssen wir es bei den Kindern machen Also Nichten und Neffen, nein, Cousins. Wir machen es bei den Cousins. Was sagt uns der Schritt Also wiederhole diesen Vorgang bei den Kindern und Geschwistern. Also derselbe Vorgang beim Entfernen von Klassen. Das ist also das Geschwisterelement des übergeordneten Elements. Linker Block. Wir entfernen es. Bam, es hat das Problem behoben. Also, seit es das Problem behoben hat, rückgängig gemacht, wissen wir, dass etwas aus dem linken Block kommt und diesen Typen in die Ecke zwingt Jetzt beginnen wir mit unserem üblichen Vorgang, bei dem wir alle blauen Styles zurücksetzen Reset, das hat es irgendwie geschafft, aber nicht wirklich. Reset, nein. Zurücksetzen. Bam, das ist es. Okay. Mindestbreite 800 Pixel. Oh, wow. Unsere Leinwand hat 992 Pixel und dieser Typ will 800 davon belegen Das sind fast 90% davon. Das ist supergierig. Wenn wir das auf 400 reduzieren, hat das Bild jetzt Platz zum Wachsen Nett. Und noch eine letzte Option Keiner dieser Schritte wird funktionieren. Da kommt dieser seltsame Raum von oben. Dieses Ding hat nicht einmal einen Verdächtigen , weil ich es anklicke und nichts ausgewählt wird. Das ist es nicht, keines der Elemente ist da. Wenn ich hier also etwas ausgewählt habe, klicke ich darauf, es passiert nichts. Woher kommt das? Denken Sie also nochmal an ein Word-Dokument, oder? In einem Word-Dokument drängen sich alles gegenseitig und die Einstellungen beeinflussen sich gegenseitig. Sie spielen miteinander herum. So funktioniert es Nein, nicht die Schuld von Webflow, die Schuld von HTML. Damit muss sich Webflow auseinandersetzen. Figma, Perücken, Framer, all diese Dinge. Es sind Ebenen der Abstraktion. Sie erstellen zusätzlich zu diesem HTML und CSS, ignorieren das und bauen eine neue Abstraktionsebene auf , die Sie intuitiv verstehen können, sodass Sie sich nicht mit den chaotischen Teilen von echtem HTML und CSS auseinandersetzen müssen mit den chaotischen Teilen Also ja, in Webflow müssen Sie diese seltsame Lernbarriere überwinden, aber es ist eine grundlegende, unveränderliche Technologie . HTML und CSS werden niemals irgendwohin führen. Webseiten werden immer die Dokumentstruktur haben, die sich nie ändern wird Wenn Sie also jemals Programmieren lernen oder programmieren werden, was auch immer, Ihr Wissen aus Webflow wird Ihr Wissen aus Webflow auf andere Plattformen übertragen An Orten wie Wix, Framer, Figma ist all dieses Wissen nur ein Teil Du trägst dieses Wissen nirgendwohin mit dir . Ordnung. Also, was passiert hier? Wenn wir nicht wissen, was vor sich geht, dann fangen wir an, die angrenzenden Elemente zu entfernen und gehen die einzelnen Schritte durch die angrenzenden Elemente zu entfernen und gehen die einzelnen Schritte weil es ein Dokument ist, oder? Alles wirkt sich aus, und normalerweise wird es etwas Ähnliches sein. Also, was ist zum Beispiel das nahegelegene Element dieses weißen Raums? Wird dieser Abschnitt, der Demo-Bereich. Entferne die Klasse. Nun, ich habe gerade den Hintergrund entfernt, aber wie Sie anhand dieses kleinen Randes sehen können , hat sich nichts geändert. Dieser Leerraum ist immer noch unabhängig. Das hat den Job also nicht gemacht. Okay, leg das wieder rein. Also, was ist ein anderes angrenzendes Element? Es ist diese Überschrift. Lass uns das Wort auf der Überschrift entfernen. Nun, das hat es auch nicht getan. Hmm. Also gehen uns irgendwie alle angrenzenden Elemente aus Was machen wir jetzt? Lass uns sehen. Also, als wir alle Schritte durchgegangen sind, ist nichts passiert. Wenn das Entfernen von Klassen oder das Zurücksetzen von blauen Stilen nicht geholfen hat oder auch wenn es keine Klassen oder blauen Stile gibt , fangen Sie an, die Stile in oranger Farbe zurückzusetzen. Äh, huh. Also machen wir es wieder mit benachbarten Elementen. Wir machen eine Demosektion durch. Haben wir irgendwelche orangen Farben? Gehen wir nicht zur Überschrift? Hast du irgendwelche orangen Farben? Haben wir. Und sieh dir das an. Wenn ich die Klasse von hier entferne, die orangefarbene Einstellung nicht verschwindet die orangefarbene Einstellung nicht, weil sie nicht Teil der Klasse ist Was auch immer blau, blau, blau ist, sie sind miteinander verbunden. Sie gehören derselben Klasse an. Aber orangefarbene Einstellungen und Stile, sie kommen von einem anderen Ort , an dem Stile vererbt wurden, ein Thema, das wir in den kommenden Vorlesungen behandeln werden. Wenn Sie darauf klicken, wird es Ihnen sagen, dass der Wert von bla, bla, bla kommt Es wird dir tatsächlich sagen , woher er kommt. Und dieser Wert kann nicht zurückgesetzt werden. Du kannst nicht darauf klicken. Es gibt keine Reset-Option, da sie nicht Teil dieser Klasse ist. Es ist nicht Teil dieses Elements oder dieser Klasse. Wir können es von hier aus nicht zurücksetzen. Wir müssten es nur von dem ursprünglichen Element aus zurücksetzen , von dem es stammt. Aber was wir tun können, und es heißt, anfangen, die Stile zurückzusetzen, bedeutet in dieser Hinsicht auch, sie auf ihre Standardwerte zurückzusetzen Was ist also der Standardwert eines oberen Randes? Webflow sagt uns tatsächlich , dass es sich bei allem, was graviert ist, Standardwerte handelt Breite, Standardwert ist Auto, Höhe, Standardwert ist Und Sie können darauf klicken und Sie werden sehen, dass es Automatisch ausgewählt ist. Aber die minimale Breite ist null Pixel, aber die maximale Breite ist keine. Dies ist der Standardwert dieser Elemente oder das Standardverhalten wie Anzeige, Standard ist Block. In diesem Fall wissen wir also, dass der Standardwert für Ränder und Innenabstände Null ist . Also können wir hier Null machen. Manuell können wir zurücksetzen. Und, Ma'am, es hat funktioniert. Das war es also, was das Problem verursachte. Das ist es. Das sind alle Debugging-Schritte. In 80% der Fälle wird das sehr, sehr hilfreich sein. anderen Fällen kontaktieren Sie mich in Fragen und Antworten. Lassen Sie es mich wissen. Ich helfe dir. 76. Webflow: Zustand des Hovers: Unsere Helden-Sektion sieht momentan toll aus, aber es ist nicht sehr aufregend, mit ihr zu interagieren Wenn wir mit der Maus über die Elemente fahren, reagieren sie nicht wirklich darauf. Diese werden Mouse-Over- oder Hover-Effekte genannt. Denken Sie beim Webdesign an dieses Gesetz. Es heißt Jacobs Gesetz der Benutzererfahrung. Das Gesetz besagt, dass Benutzer die meiste Zeit auf anderen Websites verbringen . Was bedeutet das? Das bedeutet, dass sie erwarten, dass Ihre Seite genauso funktioniert wie alle anderen Websites, die sie bereits kennen. Wenn Sie versuchen, sehr originell zu sein und dafür zu sorgen, dass Ihre Website anders funktioniert, als es die Benutzer gewohnt sind, werden Sie am Ende eine sehr originelle Ghost-Website haben , die jeder sofort verlassen möchte. Die Leute erwarten also, dass Links und Schaltflächen reagieren, wenn sie die Maus darüber bewegen. Das Hinzufügen von Hover-Effekten und Webflow ist recht einfach und macht sehr Dies wird in diesem Drop-down-Menü namens States verwaltet. Nachdem Sie den Hover-Status aus der Drop-down-Liste ausgewählt haben, alle Änderungen, die Sie an den Stilen vornehmen gelten alle Änderungen, die Sie an den Stilen vornehmen, für den Hover-Status dieser Klasse Und einfach so ändert die Schaltfläche die Deckkraft, wenn Sie mit der Maus darüber fahren Staaten zeigen jetzt einen blauen Punkt, der darauf hinweist, dass der Hover-Status geändert wurde Es gibt auch andere Zustände wie „Presse“ und „Fokus“, aber auf diese werde ich erst eingehen, wenn wir sie brauchen Wir haben in Figma keine Schwebezustände entworfen. Ich mache das auch nicht in echten Kundenprojekten. Es ist zu viel zusätzliche Arbeit , die nicht wirklich notwendig ist. Ich habe unterwegs beim Erstellen von Webflow einen Hover-Effekt unterwegs beim Erstellen von Webflow Auf diese Weise kann ich mir auch vorstellen, wie es sich verhält. Wir können fast jede Eigenschaft ändern, wenn wir mit der Maus darüber fahren. Allein daraus können viele lustige Animationen erstellt werden. Webflow bietet zwar eine andere Möglichkeit , Animationen und Interaktionen zu erstellen, und das ist unglaublich Aber dazu später mehr. Bei Schaltflächen ist das Ändern der Hintergrunddatei eine gute und einfache Möglichkeit, einen einfachen Hover-Effekt hinzuzufügen , und das Ändern der Deckkraft des Hintergrundgefühls ist eine einfache Möglichkeit, dies zu tun Sie können das als Ihre bevorzugte Technik verwenden, um einen schnellen und einfachen Das ist einfacher, als eine andere Farbe zu verwenden. Eine andere einfache Möglichkeit wäre , beim Schweben einen Schatten hinzuzufügen. Das ist eine übliche und unterhaltsame Animation, eine zusätzliche Dimension verleiht Jetzt, wo wir unseren Ghost-Button hier haben, können wir die Deckkraft nicht verringern Es ist bereits durchsichtig. Aber was wir tun können, ist eine dünne Schicht aus transparentem Weiß hinzuzufügen . Ähnlich wie die Schaltfläche in der Navigationsleiste, die weißen Hintergrund mit einer Deckkraft von zehn, 20% hinzufügt Mit der Schaltfläche in der Navigationsleiste können wir entweder wieder mit der Deckkraft spielen oder sie mit 100% Weiß füllen Wenn du es mit Weiß füllst, müssen wir auch die Steuerfarbe ändern, weil der Text weiß ist und nicht angezeigt wird Zum Glück können wir jeden Stil ändern, wenn wir mit der Maus darüber fahren, sodass wir den Text problemlos in Blau umwandeln können Bei Navigationslinks können wir etwas Ähnliches tun, z. B. die Deckkraft verringern, die Farbe auf etwas anderes ändern oder etwas noch Interessanteres tun Wir können darunter einen Rand hinzufügen. Ich meine nicht unterstreichen, das ist schwach. Ich meine einen Rand unter der gesamten Linkbox. Wir können das unter den Randeinstellungen tun. Wählen Sie das Feld aus, das den unteren Rand angibt. Dadurch sollte automatisch eine durchgezogene Linie als Stil ausgewählt werden, wenn nicht sichergestellt wird, dass Sie sie ausgewählt haben und sie nicht auf X gesetzt ist , und die Farbe sollte auf Weiß geändert werden. Das ist ein netter Übereffekt und für uns geeignet, weil wir einen Link als ganzes Feld verwenden, nicht nur als Text. Es zeigt also, dass das Ganze anklickbar ist. Wir könnten diesen Rand näher an den Text bringen , indem wir den Tastenabstand verringern, aber ich mag es eigentlich, wenn er so angeordnet Beim Schweben passiert etwas Seltsames. Achte darauf, dass sich der Inhalt darunter jedes Mal, wenn wir mit der Maus über Links fahren, leicht verändert Das ist bestimmt nicht nett. Der Grund dafür ist, dass der Tupixel-Rahmen den verfügbaren Speicherplatz für die Nav-Links vergrößert Es verschiebt also den gesamten Inhalt nach unten. Also, wie beheben wir dieses Verhalten? Wir müssen irgendwie sicherstellen, dass sich die Höhe des Nab-Links aufgrund des Randes nicht ändert , wenn der Mauszeiger darüber bewegt Und eine Möglichkeit, das zu tun, besteht darin, auch im regulären Zustand einen Tupixel-Rahmen hinzuzufügen auch im regulären Zustand einen Tupixel-Rahmen Wir können es transparent machen, damit es nicht angezeigt wird. Auf diese Weise hat die Nav-Linkbox in beiden Fällen einen Rahmen von zwei Pixeln, sodass sich die Größe nicht ändert, wenn der Mauszeiger darüber bewegt Das einzige, was sich ändert, ist die Farbe. Das ist eine gute Lösung. Die Hover-Effekte gehen momentan ziemlich abrupt von einem Aufenthalt Es ist ein sehr sofortiger ruckartiger Sprung. Dieser sofortige Sprung ist vielleicht nicht viel, aber er ist zu schnell, als dass wir die Änderung registrieren könnten, sodass er sich nicht sehr natürlich und glatt anfühlt Webdesigner fügen in solchen Fällen einen kleinen Übergangseffekt hinzu, sodass es zu einer leichten Zeitverzögerung beim Übergang kommt. Von hier aus können wir den Übergangsstil hinzufügen. Unter einem Drop-down-Menü sehen Sie, dass es viele Übergangstypen gibt Es listet alles auf, was einen Übergangseffekt haben kann z. B. die Opazität eines Elements oder eine Hintergrundfarbe Nicht jeder Stil kann übergehen. Sie sehen z. B., dass der Schriftname nicht aufgeführt ist, weil Schriftänderungen nicht animiert werden können, viele andere Typografieeinstellungen jedoch In unserem Fall möchten wir eine Rahmenfarbe ändern, was eine verfügbare Option ist Es gibt zwei weitere Werte: Duration und Easing. Dauer ist genau das, was es sagt. Wie lange dauert der Übergang in Millisekunden? Der Standardwert von 200 Millisekunden ist für die meisten Hover-Effekte ziemlich gut, Sie können ihn also so belassen also so Was die Lockerung angeht, mag sie etwas kompliziert aussehen, aber In Wirklichkeit sind das irgendwie unterschiedliche Formeln dafür, wie schnell sie gehen oder beschleunigen und wie schnell oder langsam sie sich irgendwie verlangsamen, wenn der Übergang zu wenn der Übergang Lassen wir das einfach bei der Standardeinstellung. In den meisten Fällen funktioniert es einwandfrei. Wenn Sie jetzt über die Null-Links gehen, werden Sie feststellen, dass der Rand glatt erscheint und verschwindet, und das ist einfach viel schöner als ruckartige Übergang , Beachten Sie noch, dass der Übergangseffekt auf regulären Status angewendet werden muss, nicht auf den Hover-Status So funktioniert CSS einfach. Das Gleiche können wir für Schaltflächen und ihre Hintergrundübergänge tun . Anstatt einen bestimmten Übergangstyp auszuwählen, wähle ich oft lieber alle Eigenschaften aus. Dadurch werden dieselben Übergangseinstellungen auf jeden Hover-Effekt angewendet auf jeden Hover-Effekt Es ist einfach einfacher, es zu tun. Anstatt nach einem Übergangstyp zu suchen, möchten wir jedes Mal eine andere Hover-Änderung vornehmen Wenn ein Element mehrere Eigenschaften hat , die sich ändern, wenn der Mauszeiger darüber , wie Schriftfarbe, Hintergrundfarbe, Schatten, , anstatt drei verschiedene Übergangstypen hinzuzufügen, können Sie, anstatt drei verschiedene Übergangstypen hinzuzufügen, einfach einen hinzufügen, der für alle gilt es sei denn, wir möchten verschiedene Effekte mit unterschiedlichen Geschwindigkeiten übergehen, aber das wird sehr selten vorkommen Derselbe Übergangseffekt auf den anderen Schaltflächen, und da haben wir ihn Alle Schaltflächen und Links wechseln schön und reibungslos. In Ordnung, lassen Sie uns zusammenfassen, was wir in diesem Video gemacht haben. Wir haben den Links und Buttons in unserem Heldenbereich Hover-Effekte hinzugefügt Links und Buttons in unserem Heldenbereich Der Status des Hovers wurde im Vergleich zu den Status im Bedienfeld „Stile“ geändert den Status im Bedienfeld „Stile Wir können fast jeden Stil innerhalb des Hover-Status ändern. Und damit die Statusänderungen von Normal“ zu „Hover“ schön und geschmeidig aussehen, können wir Übergänge aus den Effekteinstellungen hinzufügen 77. Webflow: Mittlerer Abschnitt (Chat-App): Die Desktop-Version des Heldenbereichs ist komplett fertig. Wir haben es noch nicht für mobile Geräte und Tablets optimiert . Aber was wir tun werden, ist, dass wir zuerst die gesamte Seite fertigstellen und dann die Reaktionsfähigkeit und die mobile Optimierung vornehmen werden die Reaktionsfähigkeit und die mobile Optimierung Das ist quasi meine Angewohnheit, das zu tun. Manche Webdesigner werden jeden Abschnitt für Abschnitt, jeden einzelnen Block, den sie erstellen , machen gleichzeitig auch die Optimierung für Mobilgeräte. Ich möchte zuerst die gesamte Seite fertigstellen und dann zur Optimierung und Reaktionsfähigkeit für Mobilgeräte übergehen Optimierung und Reaktionsfähigkeit für Mobilgeräte Warum? Denn was mir oft passiert, ist, dass ich Desktop-Versionen oder was auch immer die Seite ist, die ich im Grunde entwerfe, ich schicke sie an den Kunden zur Überprüfung und sie kommen mit Überarbeitungen zurück Also was passiert, sie werden so sein, obwohl wir uns auf das Design geeinigt haben, manchmal, weißt du, sind Animationen involviert, oder? Es sind Interaktionen involviert, einige Horroreffekte. Es sind also verschiedene Dinge involviert , die noch nicht Teil der Entwurfsphase waren, oder sie könnten einfach ihre Meinung ändern , wenn sie die Seite in der Realität sehen. Was passiert , ist, dass sie vielleicht mit einigen anderen Änderungen zurückkommen , die ich vornehmen muss, und ich könnte einen Teil des Abschnitts komplett entfernen oder die Art und Weise, wie er angelegt ist, komplett ändern und so weiter. Und jetzt gehen all die Reaktionsfähigkeit und die Optimierung für Mobilgeräte, die ich da reingesteckt habe , ständig verloren Auf diese Weise weiß ich, dass ich keine zusätzliche Zeit mit mobilen Versionen verbringen muss keine zusätzliche Zeit mit mobilen Versionen verbringen bis wir uns sicher sind und bis mein Kunde genehmigt hat die Designs genehmigt hat und wir wissen, dass es einsatzbereit ist In der letzten Phase repariere ich dann das Handy und stelle dann die Reaktionsfähigkeit der Seite her Und wir werden diesen Prozess verwenden, zuerst die Seite fertig stellen und dann alles durchgehen und die gesamten Tablets und Mobilversionen durchgehen und all das Jetzt ist es an der Zeit, diesen Mittelteil aufzubauen. Wir werden es einfach viel einfacher machen. Also, was brauchen wir zuerst? Wir können uns unsere Heldenstruktur ansehen, um einen Hinweis zu bekommen Es sieht also so aus, als hätten wir zwei Div-Blocks, einen mit dem Namen Heldenbereich und einen weiteren Container, der sich in diesem Heldenbereich befindet Wenn Sie sich erinnern, haben wir einen Container als generischen Block erstellt, um unseren Inhalt zu zentrieren. Wir verwenden das sogar in der Navigationsleiste wieder. Es ist eine großartige Idee, diesen Container überall auf unserer Website wiederzuverwenden . Auf diese Weise haben wir ein einheitliches Layout. Und sollten wir uns jemals dazu entschließen, die maximale Breite zu ändern, sie breiter oder schmaler zu machen, können wir dies mit ein paar Klicks auf einer ganzen Website Für den Heldenbereich haben wir so etwas Standardisiertes noch nicht gemacht Andernfalls würden wir es auch hier wiederverwenden , aber das ist okay. Wir können jetzt einen generischen Abschnitt erstellen , den wir später wiederverwenden können, wie wir es mit dem Container getan haben. Also werden wir einen neuen Abschnitt hinzufügen. Wir stellen einen weiteren Behälter hinein. Wir werden die Containerklasse auf diesen Container anwenden. Und wir werden eine neue Klasse namens section für diesen Abschnittsblock erstellen . Und jetzt fügen wir dieser neu erstellten Abschnittsklasse etwas Stil hinzu. Eine Sache, die wir uns aus dem Heldenbereich ausleihen können , ist die Seitenpolsterung Denken Sie an diese Seitenpolsterung, wir auf den Heldenbereich anwenden, damit der Inhalt nicht an den Rändern endet Wir wissen, dass dies auf unserer gesamten Website und zwischen den Seiten einheitlich sein wird , genau wie bei unserem generischen Container Also werden wir die gleiche Polsterung auf unseren generischen Bereich anwenden die gleiche Polsterung auf unseren generischen Bereich Sollten wir uns später einmal dazu entschließen, dieses Padding zu ändern, können wir dies auf der gesamten Website tun indem wir einfach eine Instanz dieses Abschnitts ändern Wir können auch ein oberes und ein unteres Pedding hinzufügen. Diese Informationen finden wir in Figma. Wir haben ein Figma-Bild mit einem Abstand von 19 Pixeln verwendet, um diese Überschrift vom Hero-Abschnitt oben zu trennen, sodass wir denselben Wert hier wiederverwenden können und ihn sowohl für das obere als auch für das untere Pedding verwenden können Da haben wir jetzt ein generisches Abschnittslayout mit einem generischen Container darin Wir werden genau dieselbe Struktur in anderen ähnlichen Abschnitten auf unserer Seite wiederverwenden . Jetzt können wir unsere Elemente hineinlegen und sie so gestalten, dass sie wie unsere Designs aussehen. Das machen wir im nächsten Video. 78. Webflow: HTML-Tags: Beginnen wir mit der Gestaltung unserer Überschrift. Jeder neue Text, den wir unserer Seite standardmäßig hinzufügen , ist in der Aerial-Schrift eingestellt. Wäre es nicht schön, wenn du ihnen irgendwie einen Standardstil geben könntest , z. B. alle Überschriften als Pop-Ins und alle Absatztexte roboto formatieren, damit wir sie nicht jedes Mal neu formatieren müssen , wenn wir eine neue Überschrift hinzufügen Auf einer kleinen Seite wie dieser ist das in Ordnung. Nicht viel Arbeit. Aber was passiert auf einer großen Website mit 20 verschiedenen Seiten und noch mehr Blogbeiträgen. Wir könnten natürlich CSS-Klassen verwenden, aber es gibt einen noch besseren Weg, dies zu tun. Denken Sie an das Auswahlfeld, Sie kennen es bereits Von hier aus haben wir CSS-Klassen auf unsere Elemente angewendet. Indem wir eine Klasse auf ein Objekt anwenden, speichern wir im Grunde die Informationen zu Stilen und Eigenschaften. Später können wir dieselbe Klasse auf ein anderes ähnliches Objekt anwenden . Wählen Sie im Auswahlfeld, dem OC , eine Klasse oder ein Tag aus Mit diesem Tag können wir Standardstile für unseren Text festlegen Also, was zur Hölle ist ein Tag? Ein Tag ist Teil von HTML, wohingegen Klasse Teil von CSS ist Die Tags sind genau das, was wir unserer Seite hinzugefügt haben. Der Div-Block ist ein Tag mit dem Namen DIV und eine Überschrift ist ein Tag mit dem Namen H One, und ein Absatz ist ein Tag mit dem Namen P. Innerhalb von HTML werden auf diese Weise neue Elemente hinzugefügt, Tags. Es beginnt damit, dass der Typ des Elements angegeben wird, es ist DV , H one, P usw., und gleich danach, wenn CSS-Klasse darauf angewendet wurde, dann der Name dieser CSS-Klasse Du siehst, wie dort steht, dass Klasse gleich Held ist. Das ist genau die Klasse, die wir manuell erstellt haben und sie so benannt Wie helfen uns Tags also beim Festlegen von Standardstilen? Nun, genau wie wir eine Reihe von Eigenschaften und Stilen einer Klasse definieren , können wir genau dasselbe für ein generisches HTML-Tag tun. Zum Beispiel können wir für die Überschrift, anstatt ihr eine Klasse zuzuweisen und sie dann zu stylen, anstatt ihr eine Klasse zuzuweisen und sie dann zu stylen, von hier aus alle H eine Überschrift auswählen und sie dann wie gewohnt formatieren. Jetzt wird jedes Mal, wenn wir eine neue Überschrift hinzufügen, der Standardstil darauf angewendet, ohne dass Klassen verwendet werden müssen Und genau wie bei Klassen können wir an jeder einzelnen Instanz gleichzeitig eine Änderung vornehmen Neben H One haben wir noch mehr Überschriften-Tags. Klicke einfach auf die Einstellungen der Überschrift und du wirst sehen. Wir haben den ganzen Weg runter bis H sechs. Die Verwendung dieser verschiedenen Überschriften-Tags ist im Grunde genommen die Ebene. H one sollte unser Überschriftenstil auf höchster Ebene sein. Für eine sekundäre Überschrift können wir H zwei usw. verwenden. Wenn Sie sich unsere Designs und Figma ansehen, könnten wir von dort aus definitiv verschiedene Ebenen von Überschriften definieren aus definitiv verschiedene Ebenen von Überschriften Die Überschrift in der Helden-Sektion ist die größte, das kann also die H-Überschrift sein Die Überschrift im Abschnitt danach kann H zwei sein und vielleicht können diese Fußzeilenüberschriften H drei oder H vier sein Wenn wir also ein H-Two-Tag definieren wollten, würden wir es von hier aus auswählen und erneut zum Selektor gehen Diesmal zeigt uns der Selektor alle zwei H-Überschriften anstelle von einer H-Überschrift an, weil wir genau das Und wir können alle H-Tags auf unserer Website stylen. Wenn wir nun das H-Two-Tag auf einer Überschrift auswählen, wird dieser Stern automatisch hinzugefügt. Als Randnotiz: Im Gegensatz zu Klassen Tags nicht ständig ausgewählt. Sobald Sie mit der Bearbeitung fertig sind und das Element verlassen, wird dieser Tag-Selektor verschwinden. Wenn du das also tust und zur Überschrift zurückkehrst , um etwas mehr zu bearbeiten, wird jetzt bei jeder neuen Bearbeitung eine neue Klasse erstellt , die nicht auf das Tag angewendet wird Stellen Sie also jedes Mal, wenn Sie eine neue Änderung am Tag vornehmen, sicher, dass Sie es jedes Mal auswählen Bis heute vergesse ich das immer wieder. Um das Tag auswählen zu können, muss das Klassenfeld leer sein Andernfalls wird, wie Sie sehen, die Option zum Bearbeiten des H-Two-Tags nicht mehr angezeigt . Es gibt jedoch eine andere Möglichkeit, das Tag selbst auszuwählen und zu bearbeiten, selbst wenn Sie eine Klasse auf das Element angewendet haben. Das können Sie von hier aus tun. In diesem Drop-down-Menü werden alle Klassen und Tags auf höherer Ebene angezeigt alle Klassen und Tags auf höherer Ebene , die Sie direkt auswählen und bearbeiten können. Blau steht für Klasse und Rosa für Tags. Nehmen wir zum Beispiel unsere Überschrift und machen sie rot, aber nicht das Tag, sondern nur diese bestimmte Instanz der Überschrift. Wie Sie sehen können, bleibt die Standardüberschrift H unverändert da wir die rote Farbe mit einer Klasse und nicht mit einem Tag anwenden . Wenn wir nun unseren Standardstil H one bearbeiten möchten , können wir das natürlich auf die Überschrift unten tun, aber wir können das auch auf der roten Überschrift tun , indem wir in der Auswahl ein Tag auf höherer Ebene auswählen. Alle Änderungen, die wir jetzt vornehmen, werden auch auf den Standardstil H One angewendet, und Sie können sehen, wie das live passiert Eine weitere Sache, auf die Sie hinweisen Sie werden feststellen, dass der Farbstil durchgestrichen ist . Warum ist es zerkratzt Es ist im Grunde Webflow, der uns mitteilt, dass die Farbeigenschaft durch einen spezifischeren Selektor außer Kraft gesetzt wird durch einen spezifischeren Selektor außer Kraft gesetzt Klassen sind also spezifischer, quasi wie untergeordnete Elemente, und Tags sind eher Klassen überschreiben also Tags, ähnlich wie Kinder Stile vom übergeordneten Element erben , bis wir einen bestimmten Stil für das untergeordnete Element festlegen . Das Gleiche gilt hier. H one Tag ist ein Selektor auf höherer Ebene, und er fungiert als Standardstil, bis eine spezifischere Klasse diesen Stil überschreibt Ein gutes Beispiel für diese Hierarchie ist ein Body-Tag. Wenn Sie in den Navigator schauen, können Sie sehen, dass der Körper die größte Box ist , in die alles andere hineinpasst. Nichts geht neben oder über den Körper. Wenn Sie den Hauptteil ausgewählt haben, gehen Sie zum Selektor und klicken Sie auf Body O-Seiten Jetzt können Sie für dieses Body-Tag bestimmte Stile festlegen , die an alle untergeordneten Elemente weitergegeben werden an alle untergeordneten Elemente weitergegeben Allerdings werden nur für vererbbare Eigenschaften wie Textilien andere Eigenschaften wie Größen, Darstellung und Rahmen nicht vererbt Sie können sehen, dass Webflow bereits einige Standardschriftstile angewendet Wir können das sehen, weil es blau hervorgehoben ist. Welche Standardstile können wir hier festlegen? Wir wissen zum Beispiel, dass Roboto unsere Hauptschrift für Absätze und alles andere außer Überschriften ist unsere Hauptschrift Absätze und alles andere außer Überschriften Warum also nicht Roboto hier platzieren? Außerdem können wir eine Standardschriftgröße, -farbe und -zeilenhöhe Auf diese Weise beginnt jeder neue Text, den wir zu unserer Website hinzufügen , mit diesen Einstellungen und es ist viel weniger Styling erforderlich. Natürlich halten wir uns nicht an diese Werte. Tags H-Zone und Absatz handelt es sich um spezifischere Selektoren, sodass sie diese Einstellungen überschreiben Aus diesem Grund hat sich der Absatz bei der Bearbeitung geändert , die Überschrift jedoch nicht, und Klassen sind noch spezifischere Selektoren, die alle anderen Texte überschreiben, egal ob Überschrift oder Body-Tag Jetzt wird jedes neue Textelement , das wir der Seite hinzufügen, in Roboto und in grauer Farbe angezeigt Roboto und in grauer Farbe sofern es keine spezifischeren Stile hat Es gibt noch andere Tags, die wir gestalten können, aber Überschriften und Body-Tags am gebräuchlichsten und nützlichsten In unserem Fall haben wir also ein H-Tag, das wir genau wie unsere Designs gestalten, und wir haben das Body-Tag entsprechend unseren Absatzentwürfen gestaltet Nachdem Sie das Body-Tag gestaltet haben, werden Sie feststellen, dass sich einige Tags manchmal ändern, wo Sie es nicht erwarten. Zum Beispiel stimmen unsere Navigationslinks in der Größe so überein, dass sie den 18 Pixeln entspricht , die wir für das Body-Tag festgelegt haben. Und wenn wir auf den Schriftstil klicken, können wir sehen, dass dieser Wert vom Hauptteil übernommen wird . Obwohl wir eine Aktivierungsklasse darauf angewendet haben. Warum passiert das? Denn ursprünglich mussten wir bei der Gestaltung von Navigationslinks die Telefongröße und die Zeilenhöhe nicht ändern. Was auch immer auf dem Hauptteil standardmäßig eingestellt war , entsprach der Telefongröße, die wir zu dem Zeitpunkt benötigten. Aber jetzt, da wir die Handygröße auf dem Body-Tag geändert haben , haben wir das verstanden. Lassen Sie uns diese Navigationslinks gestalten, dass sie eine beliebige Größe haben sollen : 14 Pixel für die Telefongröße und 16 Pixel für die Zeilenhöhe. Und das ist viel besser. Um es noch einmal zusammenzufassen: Wir haben CSS-Klassen und HTML-Texte. HTML-Tags sind selbst Elemente wie Absätze, Überschriften, Bilder usw. Genau wie Klassen können viele HTML-Tags formatiert werden, um einen allgemeinen Standardstil für diese Art von Elementen zu erstellen, z. B. für alle H-Ein-Überschriften oder alle H-Ein-Überschriften oder alle Absätze. Das Styling-Tag ist eine professionelle Das spart später viel Zeit, ist effizient und erzeugt einen saubereren Code. Das Body-Tag auf der höchsten Ebene, das wir stylen können. Wenn wir einen Schriftstil für das Body-Tag festlegen, erbt jedes andere Steuerelement auf der Website, nicht nur eine Seite, diese Schrift vom Body-Tag, bis wir sie durch andere, spezifischere Tags oder Klassen überschreiben andere, spezifischere Tags oder Klassen 79. Webflow: Kombinationsklassen: Der mittlere Bereich besteht also nur aus drei Elementen, Überschrift, Absatz und einem Bild Wir benötigen also die Cording-Elemente in Webflow. Lassen Sie uns nun unseren Inhalt hineinlegen und sehen, wohin uns das führt Als Nächstes exportieren wir das Bild. Dieses Mal können wir JPEG statt PNG exportieren, da der Hintergrund weiß ist, sodass wir keine Farbabweichungen bekommen. Wir werden zwei X für die Retain-Optimierung verwenden. Da wir zwei X exportiert haben, müssen wir die hohe DPI-Option aktivieren. Okay, es sieht fast wie unser Design aus. Wir müssen alles irgendwie zentrieren. Wir könnten die Textausrichtung so einstellen auf dem Container-Div-Block zentriert ist, aber das können wir bei unserem generischen Container nicht tun aber das können wir bei unserem generischen Container nicht tun, weil dadurch Elemente überall zentriert werden und unser Inhalt an anderer Stelle durcheinander gebracht wird, wie in unserem Heldenbereich. Wir könnten diese Containerklasse natürlich duplizieren und eine neue mit zentralem Layout erstellen, aber das übertrifft gewissermaßen den Zweck dieses generischen Standardcontainers, wir auf der gesamten Website verwenden werden. Zum Glück hat CSS dafür eine superintelligente Lösung , die Kombinationsklassen. Lassen Sie mich das demonstrieren. Wir haben hier einen generischen Button. Lassen Sie uns unsere bestehende Button-Klasse aus dem Hero-Bereich anwenden . Sobald wir diesen Bereich vom Design aus erreicht haben, müssen wir statt Weiß die blaue Version verwenden. Aber anstatt die Button-Klasse zu duplizieren, behalten wir dieselbe Basisklasse und fügen ihr eine Kombinationsklasse hinzu Die Auswahlschaltfläche enthält jetzt zwei Klassen die Basisklasse und die blaue Klasse, die Kombinationsklasse Alle Änderungen, die wir ab diesem Zeitpunkt an dieser neuen Schaltfläche vornehmen , wirken sich nicht auf die ursprüngliche weiße Schaltfläche Das Schöne an der Combo-Klasse ist jedoch , dass jede andere Eigenschaft, die wir nicht berührt haben, immer noch von der Button-Basisklasse übernommen wird . Das heißt, wenn wir irgendwann beschließen, den Stil unserer Schaltflächen zu ändern, sie zum Beispiel quadratisch zu machen , den Abstand zu verringern oder den Schriftstil zu ändern All diese Änderungen werden sich auch auf der blauen Schaltfläche widerspiegeln Und , werden davon jedoch all die Eigenschaften, die wir auf die Kombiklasse Blau angewendet haben überhaupt nicht betroffen sein. In diesem Fall die Hintergrund- und Textfarben. Es ist nicht wirklich ein Verbrechen, wenn Sie keine Kombinationsklassen verwenden. Normale Leute, die Ihre Website besuchen, werden keinen Unterschied feststellen, ob Sie Kombi-Kurse verwenden oder nicht. Und ehrlich gesagt ist es ihnen egal. Aber genau das tun Profis, um Zeit zu sparen, einen saubereren Code zu erstellen und eine bessere Kontrolle über die Website zu haben Und natürlich möchte ich, dass Sie ein Profi werden, Websites effizient erstellen und mehr Geld verdienen, indem Sie Zeit bei der Entwicklung sparen. Diese Kombinationsklassen passen den Vererbungsbaum am Ende der Hierarchie. Sie erben Stile von der Basisklasse , die wiederum Stile vom zugehörigen Tag erben Verwandt ist hier ein wichtiges Wort , weil ein Absatz keine Sterne von H einem Tag oder Überschriften-Tag erbt, sondern nur vom Absatz-Tag sondern nur vom Und all diese Tags erben einige Stile vom Body-Tag Und wenn wir Stile überschreiben, überschreiben wir sie von unten Ein spezifischerer Stil gewinnt. Die Kombinationsklasse kann also alles überschreiben, was über ihr die Basisklasse, das zugehörige Tag und das Body-Tag. In ähnlicher Weise kann eine Basisklasse alles überschreiben, was sich über ihr befindet, aber das hat keinen Einfluss auf die Kombinationsklasse, wenn diese Kombinationsklasse für diesen bestimmten Stil zuständig ist , z. B. für die Telefonfarbe oder die Hintergrundfarbe usw. Genau dafür steht CSN, Cascading Style Sheets, falls Sie es unbedingt Die Stile kaskadieren also von oben nach unten, quasi wie Sie können sehen, wie die Kombinationsklasse zum Vererbungsmenü hinzugefügt wurde zum Vererbungsmenü hinzugefügt wurde Und dieses Menü gibt uns die Möglichkeit, eine beliebige Stufe dieser Hierarchie auszuwählen beliebige Stufe dieser Hierarchie und ihr genau diese Stufe hinzuzufügen, zum Beispiel die Basisklasse Übrigens kann dieses Vererbungsmenü auch zeigen, mit welchem spezifischen Tag Ihr Element gesteuert werden kann In der zweiten rosafarbenen Box stehen Links. Warum? Weil Buttons normale Links sind. Wir ordnen sie einfach so an, dass sie wie Schaltflächen aussehen. Wenn wir also einige Stile für Link-Tags festlegen, werden Sie diese Stile auf Ihren Schaltflächen bemerken , bis Sie sie überschreiben. Okay, zurück zu unserem Container. Wir können eine Kombinationsklasse namens Center hinzufügen und dann die Textausrichtung der Schrift ändern. Dies sollte unseren gesamten Inhalt so zentrieren, wie wir es möchten. Ab diesem Zeitpunkt können wir, falls wir jemals einen anderen Container mit zentrierter Ausrichtung benötigen , diese Kombinationsklasse genauso anwenden, wie wir eine reguläre Basisklasse anwenden würden. Webflow zeigt sogar Kombinationsklassen an , die mit dieser Basisklasse verknüpft sind, sodass Sie eine vorhandene Kombinationsklasse auswählen können In Voila erhalten wir einen zentrierten Container. Ein paar Dinge , die wir in unserem Abschnitt gestalten müssen, die Breite des Absatzes und den Abstand Wir können den Abstand von unserem Design 30 Pixel oben und 60 Pixel unten übernehmen. Und natürlich können wir die Breite des zweiten Absatzes ermitteln, die 566 Pixel beträgt Aber Hoppla, das passiert. Ich weiß, du denkst hier vielleicht, warum es nicht zentriert ist wir nicht die Ausrichtung in der Mitte unseres Containers festgelegt , aber genauer hingeschaut? Der Text selbst ist innerhalb des Felds zentriert, aber das Feld ist nicht, warum ist das Feld nicht in der Mitte? Weil der Absatztext so eingestellt ist, dass er Block anzeigt, und die Textausrichtungsoption sich nicht auf Elemente auf Blockebene auswirkt. Sie wirkt sich nur auf tatsächlichen Text, Inline-Block und Inline-Elemente aus. Eine Möglichkeit, den gesamten Absatzblock zu zentrieren, besteht also darin, die Anzeige auf einen Inline-Block umzustellen. Das mag ein bisschen seltsam erscheinen. Es funktioniert auf einem Inline-Block, aber nicht auf einem normalen Block, aber das ist okay. Du wirst den Dreh raus haben. Eine andere Möglichkeit, es zu zentrieren, besteht darin automatische Ränder festzulegen, wie wir es beim Container getan haben. Denken Sie daran, was automatische Ränder bewirken Sie wirken wie Federn, die den verbleibenden Raum ausfüllen und das Feld in die Mitte schieben. Beides sind gültige Lösungen, automatischer Rand oder Inline-Block, aber ich tendiere dazu, automatische Seitenränder zu verwenden, denn wenn ich auf automatische Seitenränder zu verwenden, denn wenn ich einen Fehler stoße und versuche, etwas zu beheben und dabei vergesse, was ich hier getan habe, gehe ich eher davon aus, dass der Absatz auf den Standardblock als auf den Inline-Block gesetzt ist . Und das ist alles Wir sehen gut aus. Um es noch einmal zusammenzufassen Wir haben etwas über Kombikurse gelernt und wie sie uns viel Zeit sparen können Kombinationsklassen befinden sich am unteren Rand des Hierarchiebaums, sie erben also Stile von allem, was über ihnen Sie können jedoch jeden dieser geerbten Stile überschreiben, und ihre Änderungen wirken sich nicht auf etwas aus, das über ihrer Ebene liegt 80. Webflow: CTA-Abschnitt (Chat-App): Ordnung. In diesem Video werden wir unseren Abschnitt „Aufruf zum Handeln“ erstellen. Was brauchen wir hier? Lassen Sie uns eine schnelle Planung in unserem Kopf durchführen. Also haben wir das Bild auf der linken Seite, Inhalt auf der Seite, so ziemlich genauso wie in unserer Helden-Sektion. Fangen wir mit den Grundlagen an. Wir werden einen neuen Abschnitt hinzufügen und ihm einen Klassenbereich geben , den wir erstellt haben. Dann werden wir einen Container hineinlegen und ihm einen Klassencontainer geben und dann werden wir es von dort aus übernehmen. Wir benötigen eine Hintergrundfarbe für diesen Abschnitt. Es ist eigentlich dasselbe Blau, aber wir haben es mit einer Opazität von 10% Wir werden dasselbe in Weblo tun, aber die Frage ist, wie werden wir den Hintergrund unserer Abschnitte bearbeiten, ohne dieselben Abschnitte auf unserer Seite zu Hintergrund unserer Abschnitte bearbeiten, ohne dieselben Abschnitte auf unserer ändern Nun, wenn Sie der vorherigen Lektion Aufmerksamkeit geschenkt haben, dann wissen Sie, dass wir eine Kombinationsklasse auf den Abschnitt anwenden können , ohne ihn duplizieren zu müssen. Dort. Jetzt spiegelt sich die Änderung nur in diesem neuen Abschnitt wider. Da wir ein ähnliches Layout wie der Heldenbereich haben, können wir vielleicht dasselbe tun. Lass uns einen Blick darauf werfen. Wir haben eine Flexbox in einem Container, und diese Flexbox hat links und rechts zwei Blöcke , die nebeneinander liegen Lassen Sie uns das auf ähnliche Weise aufbauen. Also haben wir einen Div-Block hinzugefügt und die Flexbox-Klasse darauf angewendet und weitere Boxen hineingelegt , die an den Rändern angeklebt sind. Warum? Denn wenn Sie die Eigenschaften der Flexbox überprüfen, werden Sie feststellen, dass Leerzeichen dazwischen angewendet wurden Dadurch werden die Boxen für Kinder zur Seite geschoben. Also, was auch immer wir hineinlegen, wird auch geschoben. Okay, auf der linken Seite platzieren wir das Bild. Wir müssen es zuerst exportieren. Wir müssen einen Weg finden, wie wir dieses Bild am linken Rand kleben lassen Bild am linken Rand kleben so wie wir es in unseren Designs haben. Aber lassen Sie uns zuerst einige Inhalte in den rechten Block einfügen. Okay, was passiert hier? Die linken und rechten Boxen sind flexibel, sie können also flexibel verkleinert und vergrößert werden, um Platz füreinander zu schaffen In diesem Fall verschiebt der Absatz also die Dinge und lässt den linken Block schrumpfen Was wir hier tun können, ist, dem rechten Block eine maximale Breite zuzuweisen, damit er nicht wild Wir können die Breite Figma überprüfen und diese als maximale Breite angeben, die 467 Pixel beträgt Fragst du dich jetzt, warum nicht feste Breite statt maximaler Breite Weil wir wollen, dass sie auf kleineren Bildschirmen schrumpft. Wir wollen responsiv gestalten. Ist das ein Wort, das dort responsiv ist. Nun ja, beide wollen wir verantwortungsbewusst und responsiv gestalten und responsiv Überlegen Sie sich also in erster Linie, Maximal- und Durchschnittsgrößen anstelle von exakten Ich muss hier darauf hinweisen, dass dieser Block ein flexibles Kind ist. Er würde immer noch schrumpfen, selbst wenn wir ihm eine exakte Breite Das passiert , weil Flexbox genau das tut. Es beherrscht ihre Kinder, wie es will. Sie haben nicht viel Mitspracherecht. Geben wir diesem Block einen gewissen Rand auf der linken Seite, damit er nicht so nah am Bild ist. Okay, was machen wir jetzt mit unserem Bild? Wie schieben wir es zur Seite? Ich weiß, dass wir dem Parentif-Block einen negativen Rand hinzufügen können Parentif-Block einen negativen Rand Ja, das ist die Sache. Negative Margen. Und da hast du's. Aber das hat ein kleines Problem. Auf einem breiteren Bildschirm wird der negative Rand , den wir hinzugefügt haben, nicht ausreichen. Um dieses Problem zu beheben, können wir zwei Dinge tun. Erstens können wir VW-Einheiten anstelle von Pixeleinheiten verwenden. Erinnerst du dich, wofür VW steht ? Stimmt. Volkswagen, aber es steht auch für Viewport Width. Wenn wir also etwa zehn VW angeben, bedeutet das, dass der Rand 10% der Breite des Browsers Wenn also der Browser zunimmt, wird auch dieser Wert zunehmen. Es ist immer noch nicht genug. Wir könnten ein paar zusätzliche Punkte hinzufügen und das Bild auf kleineren Bildschirmen zuschneiden. Aber wir können noch etwas tun: Wir können das Bild selbst vergrößern, was bedeutet, dass wir einen größeren Teil des Bildes exportieren können Als wir diese Grafik erstellt haben, haben wir das Bild tatsächlich zugeschnitten So können wir mehr davon enthüllen und die breitere Version exportieren. Auf diese Weise werden wir mehr Flexibilität haben. Verschiebe das Bild in die Mitte, sodass das Ganze sichtbar ist und der Rahmen es umgibt. Andernfalls, wenn Sie es exportieren, wird der Inhalt auf der Grundlage des Frames abgeschnitten Und vergrößern Sie das Bild oder zeigen Sie im Grunde mehr davon. Andererseits machen wir denselben Export durch. Überprüfen Sie diese Option mit hohem DPI-Wert und überprüfen Sie sie erneut. Andernfalls wird der alte Breitenwert beibehalten und die Breite Ihres Bildes wird dadurch nicht aktualisiert. Und jetzt haben wir mehr Flexibilität, was den Teil des Bilds angeht, den wir von der Seite ausschneiden können. Das ist übrigens kein Hack. Dies ist eine gültige Art, Dinge im Webdesign zu tun. Was am Ende des Tages zählt ist nicht die Methode, sondern das Ergebnis. In Ordnung, lassen Sie uns den Inhalt beenden . Denkt daran, was wir mit einem Button gemacht haben , als wir mit den Kombi-Klassen gespielt Wir geben diesem Button eine blaue Kombiklasse und stylen ihn. Das Gleiche können wir mit einem Ghost-Button machen. A Lassen Sie uns unseren Absatz verwenden , um Abstände hinzuzufügen. 30 Pixel oben und 60 Pixel unten. Und tatsächlich spielt es keine Rolle, wo Sie Ihren Abstand hinzufügen. Du könntest sogar Überschrift und Buttons verwenden, aber dafür müsste ich zwei Elemente bearbeiten. Indem ich einen Mittelsmann verwende, kann ich oben und unten Platz hinzufügen. Das bedeutet weniger Arbeit und weniger Unterricht. Also, was haben wir hier? Da ist eine Linie, und dann ist da noch ein Bild von Sternen und Text daneben. Aufgrund dieses Side-by-Side-Layouts wissen wir, dass wir nur für diese beiden einen zusätzlichen Div-Block benötigen werden. Dieses Mal werden wir Sterne im SVG-Format exportieren , weil sie keine Fotos enthalten. Sie sind vektorbasiert und eignen sich daher perfekt für SVG. Wie ich bereits erwähnt habe, müssen SVGs normalerweise nicht komprimiert werden Sie sind schon ziemlich klein. Außerdem muss bei Spigs die Option für hohe DPI-Werte nicht aktiviert sein, da sie aus Figma in einer einzigen Größe exportieren, sodass sie nicht verkleinert werden müssen Sie werden in ihrer ursprünglichen Größe X absolut verrückt aussehen in ihrer ursprünglichen Und selbst wenn Sie sie so weit vergrößern, wie Sie möchten. A Okay, also wie platzieren wir die Sterne und Tags nebeneinander? Jedes Mal , wenn Sie etwas nebeneinander stellen möchten , beginnen Sie mit Flexbox Es gibt auch andere Optionen, aber Flexbox bietet Ihnen die meiste Zeit die größte Flexibilität Diese Flexbox, die wir im Heldenbereich erstellt haben , ist mittig ausgerichtet In unserem Fall möchten wir, dass sie wie unser Design nach oben ausgerichtet ist, aber wir können sie hier nicht ändern, weil dadurch die ursprüngliche Flexbox und alle anderen Instanzen derselben Flexbox durcheinander gebracht werden alle anderen Instanzen derselben Okay, wir können also eine Kombinationsklasse erstellen und ihr einen beliebigen Namen geben und dann die Ausrichtung nach oben ändern Zwei Dinge müssen noch repariert werden, der Abstand zwischen ihnen und auch Ausrichtung auf der Oberseite ist immer noch nicht richtig. Der Text sitzt etwas zu tief, also nehmen wir den Absatz und gestalten ihn ein wenig. 20 Pixel Rand an der Seite, genau wie wir ihn im Design haben und ein negativer Rand ihn nach oben zu bewegen und ihn gut an den Sternen auszurichten. Und geben wir ihm auch eine maximale Breite damit der Text springt und schneidet, wo wir wollen Hoppla, was ist hier passiert ? Überprüfe die Flexbox Natürlich hat es eine Notlage gerechtfertigt , die sie zu groß macht Einfach auf die linke Leitung umschalten und fertig. Okay, jetzt fügen wir den horizontalen Teiler hinzu. Oh, warte, so etwas wie einen Linien-Webflow gibt es nicht. Zeilen im Web bestehen wie üblich aus Div-Blöcken. Line ist nur ein Div einer Höhe von einem Pixel oder so etwas Kleinem. Füge einen schwarzen Hintergrund mit einer Deckkraft von 15% hinzu. Geben Sie ihm eine Breite. Und lassen Sie uns obere und untere Ränder hinzufügen, um den Inhalt abzugrenzen. Kinderleicht. Eine Sache Ihnen vielleicht aufgefallen ist, ist , dass ich manchmal Klassen selbst benenne und manchmal lasse ich Webflow einfach automatisch eine Klasse für mich erstellen Die Sache ist, dass wir immer unsere eigenen Klassen benennen sollten. Aber am Anfang ist das okay. Im Moment üben wir nur und lernen Webflow, also wollen wir uns nicht mit neuen zusätzlichen Entscheidungen quälen , die wir treffen müssen , wie wir Klassen benennen und all das Im Moment werden wir nur wichtige Klassen wie Flexbox, Container oder Section benennen , etwas, das wir auf jeden Fall verwenden werden, und wir müssen wissen, wie wir sie benennen Und alles andere, wie diese kleinen Absätze oder was auch immer, können wir Webflow einfach automatisch für uns entscheiden lassen Okay, um es noch einmal zusammenzufassen, es gibt eigentlich nichts zu rekapitulieren, da wir in diesem Video kein neues Konzept gelernt haben, aber wir haben gelernt, wie wir das, was wir bereits wissen , auf verschiedene Arten verwenden können, z. B. indem wir dem Bild einen negativen Rand hinzufügen , um es zur Seite zu schieben, oder einen Div-Block mit einer Höhe von einem Pixel verwenden , um eine Linie zu erstellen und ein bisschen mehr Übung mit Flexbox. 81. Webflow: Fußzeile (Chat-App): Im allerletzten Abschnitt dieser Seite, der Fußzeile, ist das Layout Wir haben unser 12-Punkte-Raster verwendet, um die Fußzeile in sechs gleiche Blöcke zu unterteilen Jeder Block besteht aus zwei Spalten und ein Block ist für den Raum zwischen dem Logo und den Fußzeilenlinks reserviert den Raum zwischen dem Logo und den Fußzeilenlinks Die naheliegendste Option ist hier die Verwendung von Flexbox. Fügen wir wie üblich den Abschnitt und einen Container hinzu. Fügen Sie einen weiteren Block hinzu und wenden Sie unsere übliche Flexbox-Klasse darauf an Fügen wir nun einen weiteren Div-Block hinzu , den wir als Footer-Spalte bezeichnen Ich werde ihm einen temporären Hintergrund und eine temporäre Höhe geben , nur um zu sehen, was wir tun Und genau wie in unseren Designs werden wir sechs Spalten verwenden. Dies werden Spalten mit gleicher Breite sein, sodass die gesamte Flexbox in sechs gleiche Teile aufgeteilt wird Wir können das mit Prozentpunkten tun, 100% geteilt durch sechs, was uns 16,666 ergibt, und so weiter Anstatt die Mathematik selbst zu machen, können wir Webflow die Mathematik für uns erledigen lassen, genau wie Geben Sie in der Breitenfüllung 100% geteilt durch sechs ein. Wenn wir das sechsmal duplizieren, können Sie sehen, wie es den gesamten Raum ausfüllt. Fügen wir die Ränder an der Seite hinzu, genau wie wir es in unseren Designs getan haben. Sie sind durch einen Abstand von 30 Pixeln voneinander getrennt. Hier sollten wir also die Hälfte davon auf jeder Seite hinzufügen, 15 Pixel am linken und rechten Rand. Auf diese Weise summieren sich die Ränder benachbarter Spalten auf bis zu 30 Pixel. Wir sollten jedoch keine Ränder in der ersten und letzten Spalte haben , da diese Ränder dem bereits vorhandenen Abstand, der Teil des Abschnitts div ist, zusätzlichen Platz hinzufügen Das ist vielleicht keine große Sache, aber es ist eine gute Angewohnheit, konsequent zu sein Wir können das einfach tun, indem wir Kombinationsklassen verwenden. Erstellen Sie einfach zuerst eine Kombinationsklasse und entfernen Sie den linken Rand und dasselbe in der letzten Spalte. Ordnung. Nun fügen wir den Inhalt in die entsprechenden Spalten ein. Oh, anstatt den Absatz für normalen Text zu verwenden, haben wir eine weitere Option für Text namens Textblock, die wir für diesen Slogan unter dem Logo verwenden Textblock ist im Grunde ein reguläres Div mit Text darin Es funktioniert genauso wie ein Absatzelement, aber sie haben unterschiedliche Zwecke. Sie sollten den Absatz für mehrzeiligen längeren Text und den Hauptinhalt der Seite und Textblöcke für alles andere verwenden mehrzeiligen längeren Text und den Hauptinhalt der Seite und , was keine Überschrift, kein Absatz oder ein Link ist . Sie können diese beiden Begriffe synonym verwenden. Das Ergebnis ist dasselbe, aber es ist eine gute Angewohnheit sie gezielt zu verwenden, da Suchmaschinen und Screenreader erkennen können , wie Ihre Inhalte auf der Seite strukturiert sind Eine andere Möglichkeit, einen Textblock zu erstellen, besteht darin, einfach in einen normalen Div-Block zu doppelklicken und mit der Eingabe zu beginnen Dadurch wird daraus ein Textblock. Für die Fußzeilenlinks werden wir reguläre Linkelemente hinzufügen Wählen wir den Link, bevor wir duplizieren , damit Duplikate die Klasse übernehmen Die Schaumfarbe zeigt bereits die graue Farbe, aber aus irgendeinem Grund ist sie auf der Leinwand immer noch blau Dies ist ein etwas seltsames Verhalten , das wie ein Fehler auf der Webflow-Seite aussieht Es ist richtig, dass es blau ist, weil die graue Farbe des Body-Tags durch ein spezifischeres Link-Tag überschrieben wird , das standardmäßig eine blaue Farbe hat In Wirklichkeit sollte das Eigenschaftenfenster also blau und nicht grau sein, aber es könnte einen Grund geben, warum das nicht passiert, worauf ich jetzt nicht eingehen werde weil es dieser Lektion keinen wirklichen Mehrwert bietet Um das Problem zu beheben, wählen Sie einfach andere Farbe und dann erneut Grau aus. Es muss nicht unterstrichen werden, damit wir es entfernen können, indem wir unter Textdekoration die Option Nicht auswählen Wir benötigen einen Hover-Effekt für diesen Link, sonst werden sie nicht wie Links aussehen Wir können es einfach in Blue Collar im Schwebezustand umwandeln Das ist eine einfache und effektive Option. Wir könnten hier einen Hard-Transition-Effekt hinzufügen , genau wie wir es mit den Buttons gemacht haben, aber das ist nicht wirklich notwendig. Es ist nicht viel Veränderung, also lassen wir es ohne Übergang. Lassen Sie uns jetzt duplizieren. Aber Hoppla, es stellt sie Seite an Seite Warum ist das so? Kannst du es erraten? Weil die Anzeige für Links auf Inline eingestellt ist. Das heißt, es fließt wie Text, was es auch ist. Also werden sie nebeneinander gehen. Wenn wir stattdessen den Display-Block anwenden, wissen wir, was passieren wird. Es wird eine gesamte Breite einnehmen und übereinander gestapelt werden. Aber diese Methode hat ein kleines Problem, kein wirkliches Problem, eher keine ideale Benutzererfahrung. Da es sich um einen Link handelt und er eine volle Breite hat, bedeutet das, dass er auch im leeren Bereich angeklickt werden kann Im Gegensatz zu unserer Navigationsleiste, in der Ähnliches passiert, interagieren die Links auch im leeren Bereich Aber hier ist der Rand unten ein gutes Beispiel dafür, dass das Ganze ein Link ist Wenn wir den Text nur hervorheben würden, wäre er auch in der Navigationsleiste seltsam Wie können wir sie also übereinander stapeln, ohne dass sie sich von Kante zu Kante dehnen Durch die Verwendung von Flexbox. Wir können dem übergeordneten Flex-Layout die vertikale statt der horizontalen Richtung geben Dann linke Zeile, achten Sie darauf, dass Sie diese linke Linie angeben. Andernfalls wird es standardmäßig genau wie ein Block von Kante zu Kante gestreckt . Und da ist es jetzt übereinander gestapelt und leerer Raum ist nicht Teil des Links. Okay, lass uns unsere Überschrift gestalten. Anstatt diesen Fußzeilenüberschriften eine Klasse zuzuweisen, formatieren wir eines der Überschriften-Tags, S H drei, vielleicht Es könnte die richtige Stufe sein, H zwei, die wir für etwas Größeres verwenden könnten Eine Schlagzeile auf mittlerer Ebene. Erinnerst du dich , wie man die Tags stylt? Wir müssen ein Tag aus dem Selektor auswählen, und jetzt können wir alle drei H-Tags stylen Lassen Sie uns den oberen Rand entfernen und einen unteren Rand von 20 Pixeln hinzufügen einen unteren Rand von 20 Pixeln genau wie wir es in den Designs haben Und da haben wir es. Jetzt haben alle drei H-Tags standardmäßig einen solchen Stil. Sie werden feststellen, dass die Spalten nicht wie im Design oben angeordnet sind. Schauen wir uns unsere Flexbox-Überschriften an Sie sehen, da steht ein Linienmittelpunkt. Was wir wollen, ist stattdessen eine Linie nach oben oder eine Stretchlinie. Wie üblich fügen wir dieser Flexbox eine Kombinationsklasse hinzu, bevor wir Änderungen vornehmen, um andere Instanzen nicht durcheinander zu bringen Dehnen ist besser , weil leere Spalten sich ebenfalls dehnen und sichtbar sind Lass uns die Links fertigstellen. Entferne den Hintergrund. Und das ist alles. In diesem Übungsprojekt werden wir diese Seiten nicht verlinken, werden wir diese Seiten nicht verlinken weil wir keine anderen Seiten haben, aber wir könnten den Kontakt-Link verbinden, um beispielsweise die E-Mail-Adresse zu verlinken, sodass ein neues E-Mail-Fenster geöffnet wird und der Benutzer darauf klickt. Wir müssen nur die E-Mail-Adresse in dieses Feld eingeben. Wir können die Betreffzeile überspringen. Und wir können das Gleiche für die Telefonverbindung tun. Und auch für die Büroadresse könnten wir eine Google Maps-URL verlinken. Kontrollkästchen Neues Fenster öffnen , damit Google Maps nicht direkt in diesem Fenster geöffnet direkt in diesem Fenster geöffnet die Nutzer gezwungen werden, die Website zu verlassen. Und zum Schluss fügen wir den Copyright-Text unten hinzu. Wir werden wieder den Textblock anstelle des Absatzelements verwenden . Ich habe den Textblock innerhalb des Containers, aber außerhalb der Flexbox hinzugefügt innerhalb des Containers, aber außerhalb der Flexbox Und wir können oben einen Rand von 180 Pixeln hinzufügen, genau wie bei unseren Designs In unseren Designs befindet sich der Copyright-Text ziemlich nahe am unteren Rand der Seite, 30 Pixel vom unteren Rand entfernt. In Webflow ist er jedoch viel höher, da unser Abschnittsblock einen Abstand von 90 Pixeln hat Wir müssen den Abstand von 90 auf 30 Pixel ändern. Aber bevor wir das tun, müssen wir eine Kombiklasse hinzufügen. Und da hast du's. Wir sind mit unserer Desktop-Version unserer Seite fertig. Gehen wir in den Vorschaumodus und sehen uns an, wie alles aussieht. Um es noch einmal zusammenzufassen: Wir haben die Fußzeile mit einem Flexbox-Layout erstellt die Fußzeile mit einem Flexbox-Layout Wir haben den Fußzeilenspalten eine prozentuale Breite zugewiesen, sodass sie sich gleichmäßig verkleinern und erweitern, und wir haben eine der Spalten leer gelassen, um Platz zwischen dem Logo und den Fußzeilenlinks zu schaffen Wir haben von einem neuen Element-Textblock erfahren, wie er eher allgemein für Text verwendet wird , der kein Absatz Damit ist der aktuelle Abschnitt abgeschlossen. Im nächsten Abschnitt werden wir lernen, wie wir unsere Seite responsiv gestalten können, damit sie auf jedem Gerät schön und benutzerfreundlich aussieht. 82. Einführung in Responsive Webdesign: In Zeiten des responsiven Designs wurden die Websites auf Mobilgeräten verkleinert Viele Websites werden bis heute auf diese Weise erstellt. Erst vor Kurzem habe ich nach Informationen über das Zahlungssystem von Piers gesucht und bin auf deren Hilfeartikel 0R Seite mit den Support-Artikeln, die so aussieht Es ist eine verkleinerte Version ihrer Desktop-Seite. Die Nutzung dieser Art von Website auf einem Handy ist einfach super nervig Sie müssen hineinzoomen und sich bewegen und schon wissen Sie, wie es läuft. Zum Glück können wir mit Webflow das Potenzial des responsiven Designs nutzen und unseren Benutzern verschiedene Layouts und sehr spezifische responsive Layouts für ihre spezifischen Telefone und spezifischen Geräte, die sie sich ansehen, Auf diese Weise wird jeder ein optimales Erlebnis mit unserer Website haben ein optimales Erlebnis mit unserer Website In diesem Abschnitt werden wir genau das tun, unsere Homepage responsiv gestalten und sie für verschiedene Bildschirmgrößen optimieren. Lassen Sie uns zunächst verstehen, wie Webflow mit Reaktionsfähigkeit funktioniert Im Designer können wir die Schalter für verschiedene Geräte sehen die Schalter für verschiedene Der erste ist der Desktop. Dort sind wir. Dann sind es Tablet, mobile Landschaft und mobiles Porträt. In technischen Worten nennen wir diese Breakpoints oder Media Queries Sie funktionieren wie Checkpoints, die den Browser anweisen, den Stil von Elementen zu ändern , wenn Breite eines Browsers eine bestimmte Größe Wenn wir beispielsweise in einer Tablet-Ansicht eine Änderung des Stils vornehmen, diese Änderung auf einem Desktop keine Auswirkungen Dabei wird im Grunde eine zusätzliche CSS-Regel hinzugefügt, die besagt, dass Browserfenster eine bestimmte Größe dann stattdessen schwarzen Hintergrund anzeigen. Und wenn wir uns entscheiden, die Hintergrundfarbe in der Desktop-Version zu ändern , wird diese Änderung in der Tablet-Ansicht nicht vorgenommen, da wir die Hintergrundfarbe überschreiben Dabei wird dieselbe Vererbungsregel wie alles andere verwendet. Denken Sie daran, dass Kombinationsklassen alle Stilinformationen aus der Basisklasse enthalten. Aber sobald wir einen bestimmten Stil in der Kombinationsklasse ändern , überschreiben wir ihn dauerhaft Künftige Änderungen an der Basisklasse werden sich also nicht auf den jeweiligen Stil auswirken Ich sage bestimmter Stil , weil das hier ein wichtiges Schlüsselwort ist. Genau wie bei Klassen, genau wie bei Breakpoints, haben wir außer der Hintergrundfarbe keinen anderen Stil berührt außer der Hintergrundfarbe Alles andere wird also jedes Mal, wenn wir die Änderung vornehmen, von der Desktop-Version übernommen , wie zum Beispiel dieser Rahmen Die Änderungen, die wir an verschiedenen Ansichten vornehmen , gelten nur für Stile. Wenn Sie die Struktur der Seite ändern oder neue Elemente hinzufügen, wird dies überall widergespiegelt. Warum? Weil diese Breakpoints ein CSS-Feature sind und nicht Teil von HTML In CSS stylen wir Dinge. Wir können das Grundgerüst der Seite nicht ändern. Wir können nur das Aussehen ändern, obwohl wir Elemente mithilfe von CSS ein - und ausblenden können. Wenn wir also etwas auf dem Tablet haben wollen , es aber nicht auf dem Desktop haben wollen, können wir es einfach verstecken. Dieses Bild ist in der Desktop-Version versteckt, aber es ist immer noch Teil von HTML und befindet sich immer noch im Navigator, wie Sie sehen können. Eine weitere Sache, die Sie bei Stiländerungen beachten Wenn Sie eine Änderung auf einem Tablet vornehmen, werden alle Änderungen automatisch auf den kleinsten Bildschirm übertragen Mit anderen Worten: Das mobile Querformat und mobile Hochformat übernehmen die Änderungen vom Tablet und das mobile Hochformat erben die Änderungen aus dem Sie können Stile auf kleineren Geräten überschreiben, Änderungen auf kleineren Geräten wirken sich jedoch nicht auf größere Geräte wirken sich jedoch nicht auf größere Dabei wird dieselbe Vererbungshierarchie wie bei Klassen verwendet. mobile Portrait erbt die Stile von der mobilen Landschaft, die wiederum ihre Stile vom Tablet erbt, das wiederum die Stile vom Desktop erbt Jeder Geräte-Breakpoint hat einen bestimmten Bereich. Wir können diesen Bereich mit diesem Canvas-Recisor sehen. Das Tablet wird auf maximal 991 Pixel erweitert und auf 768 Pixel geschrumpft Das bedeutet, dass der Desktop mit 992 Pixeln beginnt und bei 767 Pixeln der mobile Computer wird Die Änderungen, die wir an jedem Breakpoint vornehmen, gelten für den Bereich Aus diesem Grund müssen wir jede Ansicht überprüfen, indem wir die Größe der Leinwand ändern, um sicherzustellen, dass sie gut reagiert Standardmäßig zeigt Webflow in jeder Ansicht die gängigsten Größen an Wenn Sie die Größe dieses Schiebereglers ändern, werden Sie feststellen, dass Webflow gängige Geräte für diese bestimmte Pixelbreite anzeigt gängige Geräte für diese bestimmte diese Weise können wir sehen, wie viele Geräte von unseren Änderungen betroffen sind, und sicherstellen, dass wir optimale Designs und optimale Versionen für die beliebtesten Geräte erzielen und optimale Versionen für die beliebtesten Zu beachten ist, dass wir nicht in der Lage sind, bestimmte Stilrichtungen oder unabhängige Geräte zu verwenden. Wenn wir Stile auf das mobile Portrait anwenden, wird dieser Stil für den gesamten Bereich aller Breiten und Geräte festgelegt aller Breiten und Geräte , deren Bildschirmauflösung in diesen Bereich fällt Es gibt noch eine Sache, die ich Ihnen zeigen möchte, bevor wir mit der Optimierung fortfahren Wir können alle Stiländerungen, die wir vornehmen, zurücksetzen, indem wir auf den blauen Stil und dann auf Zurücksetzen klicken, genau wie wir es mit Klassen tun würden. Durch das Zurücksetzen werden Überschreibungen entfernt und Wert von der Größe der ersten höheren Ebene übernommen Hier steht sogar, wo der Stil nach dem Zurücksetzen vererbt wird ? In diesem Fall Hero Section Class für eine Tablet-Version. Das Symbol auf der Vorderseite zeigt , dass es sich um eine Tablet-Version handelt. als Abkürzung die Taste oder gedrückt, wenn Sie darauf klicken, und es wird sofort zurückgesetzt. Und für das Tablet wird angezeigt, dass es zur Desktop-Version zurückkehrt , und das können Sie an einem kleinen Laptopsymbol sehen Um es noch einmal zusammenzufassen: Wir können den Stil unserer Elemente für vier verschiedene Größen ändern : Desktop, Tablet, mobiles Querformat und mobiles Hochformat Für jeden dieser Gerätetypen haben wir auch die Möglichkeit, den Browser zu verkleinern und zu erweitern So können wir deutlich sehen, wie unsere Webseite für eine beliebige Anzahl von Geräten aussehen wird, z. B. für das iPhone sechs oder sieben Stile werden von oben nach unten vererbt, von größeren Geräten auf kleinere, und nicht in entgegengesetzter Richtung. Die Änderungen auf Mobilgeräten werden sich also nicht auf Tablets oder Desktops auswirken. Änderungen auf dem Tablet wirken sich jedoch auf das Handy aus. Ordnung, als Nächstes gehen wir runter und optimieren unsere Seite für diese Geräte, beginnend mit dem Heldenbereich. 83. Reaktionsschnell: Heldenbereich – Tablet: Okay, fangen wir also mit der Helden-Sektion an. Wir gehen eins nach dem anderen für jedes Gerät vor und optimieren den Stil Zuerst das Tablet für dich. Welche Probleme können wir hier identifizieren? Wir haben das Bild , das zu stark schrumpft , weil nicht genug Platz vorhanden , hat der Inhalt auf der linken Seite eine Mindestbreite Wenn Sie sich erinnern, hat der Inhalt auf der linken Seite eine Mindestbreite. Das bedeutet, dass Bilder betroffen sind Dann haben wir eine Navbar , die repariert werden muss. Wir müssen sehen, ob wir hier tatsächlich unsere regulären Links reinpassen können hier tatsächlich unsere regulären Links reinpassen Wenn nicht, behalten wir das Hamburger-Menü und gestalten es. Der Heldenbereich ist aus zwei Gründen viel zu umfangreich. Erstens wegen der 100 VH-Polsterung, die wir auf diesen Abschnitt angewendet haben, und zweitens wegen der ähnlichen 20-VH-Polsterung Mal sehen, ob wir die Navigationslinks anpassen können. Wie deaktivieren wir also das Hamburger-Symbol und zeigen die Navigationslinks Das können wir über die Navbar-Einstellungen tun. Klicken Sie auf eine beliebige Stelle in der Navigationsleiste und gehen Sie zu SETI. Wie Sie sehen können, steht dort das Menüsymbol für das Tablet und darunter. Wenn wir den Schieberegler in Richtung Smartphones bewegen , wird dies in der Tablet-Ansicht deaktiviert. In der Regel ist das Anzeigen von Links aus Gründen der Benutzererfahrung ein viel besserer Ansatz, als sie nicht anzuzeigen. Aus offensichtlichen Gründen ist es einfacher, sie zu finden und zu navigieren. Immobilien auf Tablets und Mobilgeräten sind sehr wichtig. Die Abstände auf diesen Geräten müssen viel kleiner sein als auf einem Desktop. Lassen Sie uns also die große Polsterung entfernen , die auf den Abschnitt angewendet Anstelle von VH werden wir dieses Mal normale Pixel verwenden, da wir dadurch vorhersehbareres Aussehen erhalten, sagen wir neun Okay, der Gesamtabstand für den Helden ist ziemlich gut und wir haben keinen aufgeblähten Das ist gut. Was hat das mit einem Heldenbild zu tun? Es ist im Vergleich immer noch ziemlich klein. Der linke Inhalt ist zu groß und das Bild wird dadurch überlagert. Auf dem Desktop hatten wir genug Platz, um eine so große Überschrift verwenden zu können, aber hier ist das nicht der Fall, wir können anfangen die Größen im linken Block zu verkleinern A Also haben wir den Inhalt verkleinert, aber das Bild wächst nicht Warum ist das so? Weil wir für den linken Block eine Mindestbreite festgelegt haben und der Inhalt zwar schrumpft, die Box selbst jedoch nicht Lassen Sie uns also diese Mindestbreite ändern. In Ordnung, das sieht ziemlich gut aus. Lassen Sie uns die Fließfähigkeit dieses Layouts testen , indem wir die Größe unserer Leinwand Großartig. Es fließt sehr gut auf der gesamten Seite. Das Tablet-Layout für den Heldenbereich ist also fertig. Alle Änderungen, die wir vorgenommen haben, wurden nicht auf unseren Desktop übertragen. Es ist immer noch so, wie wir es verlassen haben. Gehen wir nun zu den mobilen Ansichten über. 84. Reaktionsschnell: Heldenbereich – Mobilgeräte 1: Wie ich in einem früheren Video erwähnt habe, fallen die Stiländerungen auch auf kleinere Bildschirme an Alle Änderungen, die wir am Tablet vorgenommen haben, spiegeln sich also auch in den mobilen Ansichten wider Normalerweise ist dies ein guter Anfang und kann manchmal sogar zu guten Ergebnissen für Mobiltelefone führen. Aber oft reicht das nicht aus, und wir müssen auch an Handys zusätzliche Optimierungen Ich verwende gerne dasselbe Layout für das mobile Querformat und das mobile Porträt Ich verwende das mobile Portrait als Leitfaden, wenn ich im Kopf plane, und versuche , Lösungen für die Queransicht zu verwenden , die auch im Hochformat funktionieren. Es ist einfach eine gute Möglichkeit, Zeit zu sparen und die Dinge effizienter zu gestalten. Aufgrund der Portraitansicht auf Mobilgeräten weiß ich also , dass fast alles vertikal angeordnet sein wird. Nicht viel Platz für Spalten und nebeneinander liegende Layouts. Wir passen das Bild und den Inhalt des Helden auf keinen Fall nebeneinander an. Wir müssen eine Lösung für die vertikale Ausrichtung finden. Zum Glück haben wir Flexbox , die uns dabei hilft. Die Standardrichtung der Flexbox ist horizontal, aber wir können diese Richtung jederzeit in die Vertikale ändern Und die Ausrichtungsoptionen werden ebenfalls aktualisiert , wenn wir die Richtung ändern Und diese Richtungsänderung wird nicht für die Desktop-Version gelten. Dort ist es immer noch horizontal eingestellt . So großartig ist die Flexbox. Wir können das Layout ändern, ohne die HTML-Struktur zu ändern und die Stile auf bestimmten Geräten festzulegen die Stile auf bestimmten Aber bevor wir diese Änderungen vornehmen, geben wir unserer Flexbox eine Kombinationsklasse da wir diese Standard-Flexbox an anderer Stelle verwenden, zum Beispiel in der Fußzeile, und wir wollen nicht all diese Änderungen an allen Flexbox-Instanzen vornehmen all diese Änderungen an allen Und richten wir den Inhalt in der Mitte aus. Die echte Landschaftsansicht ist eigentlich nicht so hoch. Denken Sie daran, wenn Sie Ihr Telefon im Querformat halten. So hoch wirst du den sichtbaren Bildschirm nicht bekommen. Es wird eher so sein. Das bedeutet, dass vertikale Immobilien für uns sehr wichtig sind. Versuchen wir also, die Leerzeichen zu verkleinern und versuchen, so viel wie möglich unterzubringen Zum Beispiel diese Polsterung für diesen Abschnitt. Wir haben dies bereits in der Tablet-Ansicht verkleinert, aber wir sollten es etwas weiter verkleinern Das Gleiche gilt hier für den Absatzrand. 40 Pixel sehen anständig aus. Das Foto ist etwas zu groß und das meiste davon ist auf dem einzelnen Bildschirm nicht sichtbar, und der Benutzer muss es durchblättern. Stellen wir also die maximale Breite für dieses Bild ein. Ich stelle die maximale Breite und nicht die Höhe denn wenn Sie einen Höhenwert angeben, wird dies passieren. Höhe ändern, bleibt das Seitenverhältnis nicht erhalten, Breitenwert jedoch. Verwenden Sie bei Bildern also am besten die Breite, um ihre Größe zu ändern. In Ordnung, hier ist etwas Interessantes passiert. Das Bild wird auf einem kleineren Bildschirm nicht mehr kleiner und es verschwindet von der Seite Dies wird als Überlauf bezeichnet, wenn Elemente ihr übergeordnetes Feld verlassen Sie werden häufig auf Überlaufobjekte stoßen, insbesondere auf kleineren Dieser Überlauf kann aus vielen Gründen auftreten und betrifft die gesamte Seite Aus irgendeinem Grund lässt sich das Bild nicht verkleinern, sodass auf der gesamten Seite zusätzlicher Platz entsteht Warum schrumpft das Bild also nicht mehr? Denn als wir einem Bild die maximale Breite von 500 Pixeln gegeben haben, haben wir ihm die Erlaubnis bis auf 500 Pixel zu wachsen, also tut es das, wobei die Abmessungen des übergeordneten Elements ignoriert die Abmessungen des übergeordneten Elements Dieses Verhalten ist bei Bildern üblich. Bei einigen anderen Elementen, zum Beispiel einem Absatz, ist das nicht möglich, sondern bei Bildern, weil sie als Teil der Datei eine exakte Breite haben . O hat eine Breite, die in den Einstellungen angegeben ist. Standardmäßig versucht das Bild also immer, auf die ursprüngliche Dateigröße anzuwachsen. Und wenn wir die maximale Breite auf 500 setzen, hört es bei 500 auf, schrumpft aber nicht darüber hinaus , solange es zulässig ist solches Verhalten zu vermeiden, hat Webflow einen zusätzlichen Standardwert für jedes Bild , das Sie in einer maximalen Breite von 100% ablegen Das bedeutet, dass das Bild maximal 100% seines übergeordneten Elements einnimmt maximal 100% seines übergeordneten Elements Aus diesem Grund ist es am besten, diesen Wert unverändert zu lassen. Dieses Ding hat mir immer viel Verwirrung und ahnungslose Fehler auf meinem Anstatt also das Bild selbst zu stylen, bevorzuge ich es, das übergeordnete Bild zu stylen Auf diese Weise können wir später eine Menge seltsames Verhalten vermeiden . Ordnung, also geben wir dem übergeordneten Element stattdessen eine maximale Breite von 500 Pixeln. Jetzt verhält sich das genau so, wie wir es wollten. Es wächst nicht über 500 und schrumpft, wenn es nötig ist In Ordnung, wir können die Landschaftsansicht hier abschließen. Wir haben immer noch diesen horizontalen Überlauf, aber das ist von einem anderen Teil der Seite, und wir werden uns darum kümmern, wenn wir dazu kommen Wir müssen das Hamburger-Menü gestalten, aber das werden wir am Ende tun, wenn wir mit allen Ansichten des Heldenbereichs fertig sind mit allen Ansichten des Heldenbereichs Als Nächstes machen wir die mobile Portraitansicht. Bleib hier. 85. Reaktionsschnell: Heldenbereich – Mobile 2: Lassen Sie uns mit der Portraitansicht abschließen. Hier ist fast alles überfüllt, aber wir können all diese Probleme mit ähnlichen Maßnahmen beheben , die wir bei früheren Ansichten verwendet haben Lassen Sie uns zunächst mehr Platz schaffen, indem wir den Abstand noch weiter auf 30 Pixel verkleinern . Das Gleiche gilt für die Navigationsleiste. In der Navigationsleiste ist auf den Markenblock eine Standardpolsterung angewendet Auf Desktop-PCs und Tablets gibt es das nicht, auf Mobilgeräten schon , also entfernen wir diese Ich habe tatsächlich vergessen, das in der Landschaftsansicht zu bemerken . Es ist auch da, also lass uns das von dort entfernen. Jetzt müssen wir nur noch die Größe des Inhalts verkleinern. Wenn Sie sich zunächst den linken Block ansehen, werden Sie feststellen, dass er eine Mindestbreite von 300 Pixeln hat, sodass er sich weigert, über diesen Punkt hinaus zu verkleinern Lassen Sie uns dieses Minimum entfernen und es auf Auto setzen. Und lassen Sie uns die Schriftgröße der Überschrift verringern. Die Sache mit der Überschrift ist, dass auf dem schmalsten Bildschirm wir sie auf dem schmalsten Bildschirm sehr klein machen müssen Andernfalls erhalten wir ein Wort pro Zeile, was keine Idee ist. Dieser superschmale Bildschirm ist für alte Telefone. Die Internetnutzung dieser Bildschirmgrößen ist sehr gering. Ich habe die Statistiken überprüft und sie scheinen nicht einmal 1% zu machen. Deshalb gebe ich mir die meiste Zeit keine Mühe es perfekt für diese Bildschirmgrößen zu machen und gängigere Bildschirmgrößen zu verzichten. Aber es gibt eine Möglichkeit, es für diesen gesamten Bereich nahezu perfekt zu machen . Anstelle von Pixeln können wir responsive Einheiten für die Schrift verwenden. In diesem Fall VW für die Breite des Viewports. Wenn wir dem Fonds etwa 14 VW geben, sollte das mit der Bildschirmbreite schrumpfen und gut wachsen Nun zu den Knöpfen. Mit den Tasten können wir die Anzeigeeinstellung ändern. Anstatt dass sie also nebeneinander sitzen, können sie übereinander liegen. Denken Sie daran, welche Anzeigeeinstellung das Display blockiert, wodurch sie von Kante zu Kante gestreckt werden. Entfernen Sie dann den linken Rand und fügen Sie einen oberen Rand hinzu, um eine Trennung zu erzeugen, und fertig. Unser Heldenbereich ist irgendwie fertig. Wir werden die Navigationsleiste im nächsten Video beibehalten. 86. Reaktionsschnell: Navigationsmenü (Chat-App): Bisher rocken wir unsere responsiven Versionen. In diesem Video werden wir Menüschaltfläche in der Navigationsleiste oder, wie Schulkinder es nennen, das Hamburger-Menü gestalten, weißt du, weil das Symbol irgendwie wie ein Hamburger aussieht Im Moment sieht es ziemlich schrecklich aus, keine Sorge. Das zu stylen ist keine große Sache. Lassen Sie uns zunächst den Button selbst stylen. Das Menüsymbol im Inneren kann geändert werden. Wir sind nicht dabei festgefahren. Wenn wir unser eigenes Symbol haben und dieses stattdessen hinzufügen möchten, können wir einfach das Symbol löschen und ein Bildelement innerhalb der Menüschaltfläche hinzufügen, bei dem es sich um und dieses stattdessen hinzufügen möchten, können wir einfach das Symbol löschen und ein Bildelement innerhalb der ein einfaches Div handelt, und Ihr eigenes Symbol im SVG- oder PNG-Format hochladen . Es hat zwar einen Vorteil, dieses Standardsymbol beizubehalten , da die Farbe den Schrifteinstellungen bearbeitet werden kann, und das macht es einfacher, Farben zu ändern Wir könnten auch unser eigenes Menüsymbol aus dem Div-Block erstellen. Manchmal mache ich das , wenn ich eine superschicke Animation für meinen Kunden erstelle eine superschicke Animation für meinen Bleiben wir vorerst bei einem Standardsymbol. Zuerst die Farbe. Wir werden das in Weiß brauchen. Wir können die Telefonfarbe auf Weiß ändern, und das wird den Job machen. Halten Sie sich beim Stylen dieses Elements an das Menüschaltflächenelement anstelle des Symbols. Als Nächstes erhöhen wir die Größe. Es ist viel zu klein. Wir können das wieder über die Telefoneinstellungen machen, und 30 Pixel sollten gut sein. Und lassen Sie uns die Polsterung ein wenig verkleinern. Die Polsterung bestimmt, wie viel davon anklickbar und im Drop-down-Menü sichtbar ist Und zum Schluss richten wir es am Logo aus. Wir wollen, dass es zentriert ist und nicht wie jetzt in der Luft schwebt. Können wir es zentrieren? Wir könnten weitermachen und das Navbar-Display auf Flexbox umstellen und all das machen Eine einfachere Option besteht jedoch darin, der Schaltfläche einfach einen oberen Rand hinzuzufügen und ihn dann nach unten zu ziehen Wir müssen das mit dem Auge bestimmen. Man kann es besser im Hochformat sehen, und 27 oder so ähnlich scheint mir eine gute Wahl zu sein. Wir müssen hier keine Hover-Animation hinzufügen, da sie nur auf Mobiltelefonen angezeigt wird, auf denen wir keine Maus verwenden. Daher ist es sinnlos, den Mauszeiger sinnlos, den Mauszeiger Lassen Sie uns nun das Innere des Menüs gestalten. ist nicht nett, blind zu stylen, also können wir das Menü öffnen und es stylen, während es geöffnet Wir können das in den Einstellungen tun, beliebiges Navbar-Element auswählen und zu den Einstellungen gehen und dann neben der Menüoption auf Anzeigen klicken Dadurch bleibt das Menü geöffnet, bis wir es stylen. Es gibt zwei weitere Menüoptionen, von denen ich jedoch kein großer Fan bin. Ich mag diese Standard-Drop-down-Version. Es ist einfacher zu handhaben und benötigt weniger Styling. Lassen Sie uns nun die Struktur des gesamten Menüs verstehen. Dieser Knopfmenüblock ist genau derselbe Block, alle unsere Links in der Desktop-Ansicht enthält Auf dem Desktop hat er keinen Hintergrund und ist horizontal angeordnet Wenn wir jedoch auf dem Desktop Änderungen daran vornehmen, werden diese Änderungen auch in der mobilen Ansicht übernommen. Das Gleiche gilt für alle Layoutänderungen. Wenn Sie also eines Tages mobile Links sehen, die seltsam angeordnet sind, überprüfen Sie, ob Sie Änderungen an der Desktop-Version vorgenommen haben Änderungen an der Desktop-Version Und in diesem Knob-Menüblock haben wir alle Links, einschließlich der Schaltfläche Um also zuerst das gesamte Menü zu gestalten, werden wir zuerst das Navigationsmenü und dann die darin enthaltenen Links gestalten Geben wir dem eine andere Hintergrundfarbe. Unsere schwarze Farbe aus dem Design sieht ziemlich gut aus. Fügen wir an den Seiten die gleiche Polsterung hinzu wie in unserem Heldenbereich Auf diese Weise werden wir mit unserem Raster konsistent bleiben. Im Moment sind die Links ein wenig eingekerbt, weil sie ihre eigene Polsterung haben, die wir entfernen werden, sobald wir die Links formatiert Fügen wir auch eine obere und untere Polsterung hinzu, aber machen wir sie zu 30 Pixeln statt zu 60 Pixeln Im Moment haben wir Sterne, die vom Desktop übernommen werden, wie zum Beispiel die Unterstreichungen beim Hover und die Innenabstände Lassen Sie uns zuerst die Polsterung korrigieren. Wir brauchen keine Seitenpolster. Und lassen Sie uns eine gleiche Ober- und Unterseite wählen , um die schöne Trennung zwischen den Gliedern beizubehalten 20 Pixel sehen gut aus. Wir benötigen keinen Hover-Effekt da er für mobile Geräte gedacht ist Wie entfernen wir das aus dem Hover-Status , den wir hier unter Staaten finden. Klicken Sie unter dem Rahmenstil auf X , um den Butto-Rahmen zu deaktivieren Wenn Sie dies testen, werden Sie feststellen, dass der Rahmen immer noch angezeigt wird. Das liegt daran, dass wir diese Grenze nicht nur aktiviert haben , wenn Sie mit der Maus darüber fahren, sondern auch in einem normalen Zustand Also müssen wir sie auch aus einem normalen Zustand entfernen , um dieses lustige Verhalten zu vermeiden Und da haben wir jetzt keinen Schwebeflug mehr. Okay, jetzt der Button, lass uns zuerst den linken Rand loswerden Als Nächstes ändern wir die Anzeige auf Inline-Block. Im Moment ist es auf Blockieren eingestellt. Deshalb dehnt es sich so aus. Aus irgendeinem Grund ist der Button in der Mitte ausgerichtet. Das bedeutet, dass eine Art Eigenschaft des übergeordneten Elements dies tut Es gibt zwei Eigenschaften, die es an der Mitte ausrichten könnten. Erstens das Flexbox-Layout, aber unser Nahmenü ist nicht Flexbox, das ist es also nicht Und zweitens ist es eine normale Textausrichtung, und das wäre sinnvoll, weil Inline-Blockelemente mithilfe der Textausrichtung ausgerichtet werden können mithilfe der Textausrichtung ausgerichtet werden Wenn wir jedoch die Textausrichtung des Nav-Menüs überprüfen , wird sie auf links gesetzt. Und das ist trügerisch, denn in Wirklichkeit ist es nicht auf links eingestellt Wenn Sie die Eigenschaft auf etwas anderes ändern und sie dann wieder links ausrichten, wird sie diesmal tun, was sie sagt Das sieht nach einem Problem von Webflow aus. Ich könnte mich irren, aber es sieht so aus, als ob es Nav-Menü-Block eine standardmäßige zentrale Ausrichtung gibt, und Webflow spiegelt dies aus irgendeinem Grund nicht in den Stilen wider Wann immer Sie auf so etwas stoßen , folgen Sie einfach Ihrer Logik, und wenn das, was Sie sehen, keinen Sinn ergibt, spielen Sie mit den Stilen, und manchmal werden Sie feststellen, dass sie nur vorgetäuscht sind Eines sollten Sie beachten: Sie müssen die Ausrichtung auf das übergeordnete Element anwenden, nicht auf die Schaltfläche selbst der Textausrichtung der Schaltfläche wird lediglich der Text innerhalb der Schaltfläche ausgerichtet. Okay, lassen Sie uns den Rand dieser Schaltfläche verkleinern , damit er dem Rest entspricht Der Abstand, den wir zwischen Links verwenden, beträgt 20 Pixel oben plus 20 unten, insgesamt 40. Lassen Sie uns das hier auf 40 zusammenzählen. 20 vom letzten Link und 20 für den oberen Rand. Und das Gleiche gilt für den unteren Rand. Der tatsächliche Abstand oben beträgt 30 Pixel vom Menüabstand und 20 Pixel vom Nav-Link-Abstand, um diesen insgesamt 50 Pixeln zu entsprechen. Fügen wir die unteren 20 Pixel zur Schaltfläche hinzu Pixel vom Nav-Link-Abstand diesen insgesamt 50 Pixeln zu entsprechen. Fügen wir die unteren 20 Pixel zur Da drin sieht das gut aus. Wir können den Hover-Effekt hier beibehalten. Wir brauchen es nicht, aber es schadet auch nicht. Und manchmal ist es bei Tasten ganz nett, wenn man sie drückt und es ändert quasi den Zustand. Lassen Sie uns zum Schluss die gleiche Hintergrundfarbe auf dem Hamburger hinzufügen Hintergrundfarbe auf dem Hamburger Dafür ist es wichtig, dass wir Hintergrundfarbe im geöffneten Zustand hinzufügen, denn wenn wir einen Hintergrund in einem generischen Zustand hinzufügen, erhalten wir den Hintergrund, wenn das Menü sogar geschlossen ist Ändern von Stilen für den geöffneten Zustand ist quasi wie das Ändern von Stilen für den Hover-Status Dieses grüne Etikett muss angezeigt werden, aber der Status „Öffnen“ ist nicht in der Dropdownliste des Status aufgeführt Stattdessen muss der offene Status in den Einstellungen aktiviert werden , indem Sie unser Menü öffnen Es reicht nicht aus, nur das Menü zu öffnen. Stellen Sie sicher, dass das grüne Etikett da ist. Möglicherweise haben Sie das Navigationsmenü geöffnet, aber diese Bezeichnung für den geöffneten Status wird nicht angezeigt, was bedeutet, dass alles, was Sie bearbeiten, im geöffneten Zustand nicht bearbeitet wird. Sie müssen noch einmal auf die Menüschaltfläche klicken , damit das Badge aktualisiert wird. Jetzt können Sie sehen, dass das geöffnete Etikett angezeigt wird. Das bedeutet , dass Änderungen, die wir jetzt vornehmen , nur im geöffneten Zustand berücksichtigt werden Jetzt können wir die Hintergrundfarbe ändern und die obere Ecke abrunden , und die obere Ecke abrunden damit sie ausgefeilter aussieht Aber anstatt alle vier Ecken abzurunden, runden wir einfach die oberen beiden ab und machen die unteren beiden flach Auf diese Weise stellen sie quasi eine Verbindung zum Menü her. Dazu müssen wir die Option „ Einzelne Ecken“ innerhalb der Ränder auswählen und dann die oberen beiden auswählen und sie dann etwa sechs Pixel platzieren. Lassen Sie uns unsere Ergebnisse in der Vorschau testen. Und dort sieht alles großartig aus. Es sieht auch in der Portraitansicht großartig aus. Wir müssen nichts ändern, außer einem kleinen Detail. Beim Hochformat haben wir unterschiedliche Seitenabstände. Im Querformat haben wir 60, aber im Hochformat verwenden wir 30. Dafür müssen wir nicht einmal das Menü öffnen, Navigator das Nab-Menü auswählen und das Padding 60-30 ändern und Deshalb haben wir das Hamburger-Menü erfolgreich für mobile Geräte gestaltet Hamburger-Menü erfolgreich für mobile Wir haben die Farbe und Größe des Symbols einfach anhand der Schriftstile geändert Symbols einfach anhand der Schriftstile Wir haben mit den Abständen und Rändern der Menüschaltfläche gespielt , um sie in der Navigationsleiste gut auszurichten Dann haben wir in den Einstellungen das Menü geöffnet und den Menüpunkt gestaltet, dir den gewünschten Hintergrund gegeben und den Abstand angepasst Wir haben kleine Änderungen an den Nav-Links und auch an einer Nav-Schaltfläche vorgenommen, den Mauszeiger von den Links entfernt und die Abstände angepasst. Und wir haben gelernt, den Stil des Menüs nur zu ändern , wenn es Der Heldenbereich ist hier für alle Geräteansichten fertig. In den nächsten Videos fahren wir mit dem Rest der Seite fort. 87. Reaktionsschnell: Überlauf: Jetzt gehen wir nach unten und optimieren den nächsten Abschnitt dieser Seite. Und während wir das tun, lernen wir ein neues Konzept namens Overflow Dieser Abschnitt sieht auf dem Tablet ziemlich gut aus und muss nicht viel bearbeitet Nur eine Sache, die ich hier ändern werde, ist die obere und untere Polsterung des Abschnitts Wie ich bereits erwähnt habe, benötigen wir auf kleineren Geräten einen etwas engeren Abstand, also sollten 60 Pixel gut sein Im Querformat haben wir einen Überlauf. Wenn Sie einen solchen Überlauf auf der Seite haben, suchen Sie nach dem Element, das die übergeordneten Ränder überschreitet Das wird die Ursache des Problems sein Hier ist es offensichtlich, dass der Absatz dafür verantwortlich ist, weil er außerhalb der Grenzen des Containers und sogar des Abschnitts Der Grund, warum es nicht schrumpft ist, dass es eine feste Breite hat Wir haben auf dem Desktop einen Fehler gemacht, und anstatt einen responsiven Wert wie die maximale Breite festzulegen , haben wir ihm eine feste Breite gegeben Nun, da dies auch auf dem Desktop keine optimale Einstellung ist , sollten wir dies einfach auf der Desktop-Version stylen und die Stile dann ganz nach unten kaskadieren lassen Und bevor wir weitermachen, wollen wir eigentlich verstehen, was Überlauf ist? Ist es ein Bug oder ist es ein Feature? Eigentlich ist Overflow eine sehr praktische Funktion. Es hat seinen eigenen speziellen Rahmen in den Stilen. Lassen Sie mich zeigen, wie das funktioniert. Wir haben hier einen Div-Block. Ich habe diesem Div die exakte Breite und Höhe hinzugefügt. Es ist 900 mal 300 Pixel groß. Wenn wir mehr Inhalt in diesen Div-Block einfügen, wird der Inhalt überlaufen Warum? Weil es eine definierte Höhe hat, 300. Es wird also nicht über diese Größe hinaus wachsen. Wenn wir diesen Höhenwert entfernen, werden Sie sehen, dass die Box mit dem Inhalt wächst. Aber manchmal ist das nicht das, was wir wollen, und wir möchten, dass die Box die exakten Abmessungen hat. Wenn du die Overflow-Einstellungen dieses Div-Blocks überprüfst, wirst du feststellen, dass er auf sichtbar gesetzt ist Das bedeutet, dass überlaufender Inhalt weiterhin angezeigt wird. Wenn wir es auf versteckt setzen, wird der Inhalt abgeschnitten und er wird nicht angezeigt, egal was wir tun, selbst wenn wir versuchen, darin zu scrollen In solchen Fällen haben wir jedoch eine andere Option, um den Inhalt im Inneren scrollen zu lassen Diese Option ist jedoch nicht sehr gut, da immer eine horizontale und vertikale Bildlaufleiste angezeigt wird, auch wenn nicht genügend Inhalt zum Scrollen vorhanden ist. Dafür haben wir eine bessere Option, das letzte Auto. Dadurch wird die Bildlaufleiste nur angezeigt , wenn etwas zum Scrollen vorhanden ist. horizontale Leiste ist weg, und wenn der Inhalt vertikal überläuft, wird die Bildlaufleiste angezeigt Dies ist immer eine bessere Option, wenn Sie einen scrollbaren Inhalt erstellen Nur um auf Ihrem Computer zu vermerken, Sie diesen Unterschied möglicherweise sehen oder auch nicht Dies hängt von den Einstellungen ab, die Sie in Ihrem Betriebssystem, in Mac oder Windows ausgewählt haben in Ihrem Betriebssystem, in Mac oder Windows ausgewählt . Beachten Sie auch, dass die Overflow-Einstellungen für das übergeordnete Element festgelegt werden , nicht für die untergeordneten In diesem Fall setzen wir es also auf diesen weißen Div-Block. Wenn wir es auf den Absatz setzen , wird das nichts bewirken. Neben dem Scrollen von Inhalten wird die Einstellung „ Überlauf“ auch häufig verwendet , wenn wir Inhalte ausschneiden wollen, und das ist normalerweise bei Bildern der Fall Wir wollen wahrscheinlich nie Text ausschneiden. Wenn wir zum Beispiel einen Abschnitt mit einem Bild haben und den überschüssigen Teil des Bilds ausschneiden möchten, können wir den Überlauf auf dem übergeordneten Element ausblenden, wodurch das Bild abgeschnitten wird In Ordnung, lassen Sie uns unsere mobilen Ansichten fertigstellen. Wir haben immer noch diese Lücke auf der Seite, aber das wird durch ein anderes Element in einem anderen Abschnitt verursacht . Also kümmern wir uns darum, sobald wir dort sind. Lassen Sie uns also etwas gegen diesen sehr engen Blick unternehmen. Im Hero-Bereich haben wir den Abstand auf 30 Pixel geändert, aber das haben wir für diesen Abschnitt nie getan Also lass uns das machen. Und lassen Sie uns die vertikale Polsterung verringern auch die vertikale Polsterung verringern, um die Abstände zu sparen Ich werde das auch im Querformat verringern weil der vertikale Raum in der Landschaft noch wichtiger ist der Landschaft noch wichtiger Und setzen Sie den Wert auf Hochformat Wenn Sie sie zu irgendeinem Zeitpunkt geändert haben, ist es besser, Werte erneut zu übernehmen, als die Stile zu wiederholen , weil dadurch nur zusätzlicher Code hinzugefügt wird, den wir nicht benötigen Und zum Schluss sollten wir etwas gegen die Schlagzeilen tun, die zu groß für das Denken Sie daran, dass es sich bei der Überschrift nicht um eine Klasse handelt. Wir gestalten das Etikett. So werden wir das also stylen. Wählen Sie alle H-One-Überschriften aus der Auswahlliste aus und ändern Sie dann Dadurch werden alle H-One-Überschriften für mobile Portraits geändert, andere Geräte jedoch nicht betroffen In Ordnung, 35 Pixel funktionieren ganz gut. Endlich, was mit dem Bild zu tun ist. Es ist zu klein, um irgendwas zu sein. Es gibt eine Sache, die wir tun können. Wir können das Bild von der Seite nehmen und den Überlauf mit dem , was wir gerade gelernt Zuerst müssen wir das Bild vergrößern. , wenn es darum geht , die Bildgröße in Antwortinterviews Verwenden Sie diese Einstellungen niemals, wenn es darum geht, die Bildgröße in Antwortinterviews zu ändern. Dadurch werden die HTML-Einstellungen des Bildes geändert, und dadurch wird die Größe überall auf allen Geräten geändert . Sie können das Bild auch ziehen, um die Größe zu ändern, aber verwenden Sie das auch nicht Es ändert dieselbe Breite, die in den Einstellungen angegeben ist. Was wir stattdessen ändern möchten, ist der CSS-Stil des Bildes, da der CSS-Stil uns die Flexibilität gibt , unterschiedliche Größen auf verschiedenen Geräten zu haben. Wählen Sie dazu das Bild aus. Sie sehen diese maximale Breite von 100%. Dadurch wird das Bild angewiesen, nicht größer als sein übergeordneter Container zu werden. Deshalb schrumpft es. Da dies ein seltenes Szenario ist, in dem wir möchten, dass das Bild tatsächlich über den Container und sogar über die Seite hinauswächst , bearbeiten wir genau diese Einstellung und setzen sie auf etwa 170% Und jetzt verschwindet es von der Seite und ist größer, jetzt können wir ein bisschen mehr Details des Bildes sehen Aber wir haben ein Bild, das so überfüllt ist. Also, was machen wir? Wir müssen den Überlauf auf dem übergeordneten Element ausblenden , um das Bild zu beschneiden Aber wir können das nicht auf das direkte übergeordnete Objekt setzen, das ist der Container, weil der Container nicht bis zum Rand reicht Der Abschnitt tut es. Also müssen wir diesen Überlaufstern auf den Abschnitt setzen, aber fügen wir ihm die Kombiklasse hinzu, damit sie nicht alle Abschnitte betrifft Und da sind wir jetzt, das Bild wird genau am Rand des Abschnitts abgeschnitten Wir haben also ein wichtiges Konzept des Überlaufs gelernt und wissen, wie wir es zu unserem Vorteil nutzen können Overflow visible ist eine Standardeinstellung, sodass alle Inhalte angezeigt werden, die außerhalb der Grenzen des übergeordneten Elements Oflow hidden wird den Inhalt verdunkeln , genau wie wir es hier getan haben Overflow Scroll und Auto lassen den Inhalt innerhalb des Containers scrollen Die Scroll-Option zeigt jedoch persistente Bildlaufleiste an, auch wenn nichts zum Scrollen vorhanden ist 88. Reaktionsschnell: CTA-Abschnitt (Chat-App): Der Action-Bereich sieht auf Anhieb nicht schlecht aus. Wir können ein paar Zweige machen, um das Bild ein wenig zu vergrößern Erstens denke ich, dass die Überschrift etwas zu groß ist. Im obigen Abschnitt , in dem es mehr Platz und kleinere Tags gab, war das kein Problem . Aber hier wird es schwierig , mehr als ein Wort pro Zeile unterzubringen. Das ist eine gute Faustregel. Wenn Sie mindestens zwei Wörter pro Zeile einfügen können, die Schriftgröße möglicherweise zu groß. Wenn wir eine vollständige Website erstellen würden, würden wir bei dieser Überschriftengröße auf mehr Einschränkungen stoßen, also würde ich sie lieber in den Hintern reißen Denken Sie daran, dass diese Überschrift keine Klasse ist. Es ist ein Standard-H-One-Tag, also werden wir genau das gestalten. Standardmäßig ist das Tag nicht ausgewählt. Das müssen wir jedes Mal tun, wenn wir stylen. Also werde ich einfach die 35-Pixel-Telefongröße , die wir auf dem mobilen Bildschirm verwendet haben und das als Standard-H-Einheitsgröße für alle responsiven Bildschirme vom Tablet bis zum Handy festlegen Standard-H-Einheitsgröße für alle responsiven Bildschirme . Die Überschrift wird jedoch immer noch genau auf die gleiche Weise in drei Zeilen aufgeteilt. Die Sache ist, wenn wir die Telefongröße verkleinern, verschiebt das Bild den Inhaltsblock und verkleinert den Platz, der für die Überschrift zur Verfügung steht Das macht unsere Bemühungen zunichte , die Überschrift in zwei Also werde ich eine Mindestbreite angeben. 340 scheint gut zu sein. Lassen Sie uns die Fließfähigkeit überprüfen. Nett Weitermachen. Hier machen wir das, was wir mit einer Heldenabteilung gemacht haben. Ändere die Richtung der Flexbox auf vertikal und die Linie auf links Vergessen Sie nicht, zuerst eine neue Kombinationsklasse zu erstellen, da sonst die gesamte Flexbox auf der Seite verändert wird Der Inhaltsblock wurde nicht ausgerichtet , da er einen Rand auf der linken Seite hat Lassen Sie uns diesen Rand entfernen. Lass uns sehen. Das Bild ist auf einer breiteren Version viel zu groß. Lassen Sie uns die maximale Breite auf dem Bild festlegen, aber noch besser auf dem linken Block selbst, wie ich bereits erwähnt habe, versuche ich, wann immer ich kann, den Container des Bildes und nicht das Bild selbst zu stylen , mit Ausnahme des Falls im vorherigen Video, in dem wir das Bild direkt stylen mussten . Mach dir keine Sorgen. Sie müssen sich nicht jede einzelne Regel und Empfehlung, die ich Ihnen gebe, auswendig lernen und Empfehlung, die ich Ihnen gebe Sie lernen, indem Sie diese Fehler machen und Ihre eigenen Regeln und Gewohnheiten annehmen, und Webflow ist eine große Hilfe bei diesem Lernverfahren Sie können alles visuell sehen und Sie können sehen , welche Stile aktiviert sind und die möglicherweise das Problem verursachen ohne die Codezeilen lesen zu müssen Selbst den Leuten, die lernen möchten, wie man programmiert, würde ich trotzdem empfehlen, zuerst mit Webflow zu lernen , weil es einfach eine unglaubliche Hilfe und Anleitung ist und alles in Webflow genau so funktioniert wie der normale Dieses linksbündige Layout funktioniert auf dieser Seite nicht mehr wirklich, denn wie Sie sehen können, haben wir auf dem größten Teil der Seite ziemlich mittig ausgerichtet, und plötzlich haben wir diese linksbündige Ausrichtung , das konsistente Layout dieser Seite zerstört. Ein besserer Ansatz wäre also , auch hier ein mittiges Layout zu haben. Und vor allem auf mobilen Geräten ist das Layout in der Mitte ziemlich vertraut und weit verbreitet , um diese Layouts zu verwenden. Nun, das Bild selbst kann so belassen werden , wie es in der linken Zeile ist denn so wie wir dieses Bild entworfen haben, wird es einfach nicht gut funktionieren und nicht gut aussehen, wenn wir es einfach in die Mitte der Seite legen, aber zumindest können wir den Inhalt so gestalten, dass er die Mittellinie darstellt Und dadurch wird es viel konsistenter mit dem Rest der Seite aussehen , auch wenn das Bild immer noch eine Linie hinterlässt, weil das Bild ist , dann ist das die Idee von dem Bild, das irgendwie aus Clips besteht und von der Seite verschwindet. Also, wie können wir das machen? Wie können wir eine Mittelausrichtung durchführen? Nun, wir haben ein paar Optionen, aber eine Möglichkeit, dies zu tun, besteht darin, dass es sich um einen Div-Block handelt und es sich um eine Blockebene handelt. Normalerweise dehnen wir uns also von Kante zu Kante. Und der Grund, warum es sich nicht vollständig dehnt , ist, dass darauf eine maximale Breite angewendet wurde. Was wir also tun können, ist einfach diese maximale Breite hier zu entfernen, und sie wird sich von Kante zu Kante erstrecken. Und dann können wir den Text auch zentriert ausrichten. Und alles, was Text ist, und alles , was sich in einem Zeilenblock befindet, wie diese Schaltflächen, werden alle in der Mitte ausgerichtet. Was wir für diesen Teiler ändern können, ist jetzt, dass dieser Teiler kein Inline-Block ist Deshalb zentriert es sich nicht, weil es sich um eine Blockebene handelt. Und in Wirklichkeit sehen der Browser und der HTML-Code diesen Div-Block so wie er sich bereits von Rand zu Rand befindet Es gibt nichts, was in der Mitte ausgerichtet werden könnte, da es sich um eine Blockebene handelt. So verhält sich die Blockebene. Aber die Option, die wir hier haben ist, dass wir diese Zentrierungsoption verwenden können Dadurch werden automatische Ränder an den Seiten angebracht Und diese automatischen Ränder füllen den verbleibenden leeren Raum aus, er füllt sich mit Rändern. Und dasselbe hier, derselbe Rand hier, derselbe Rand hier, wird das Ganze natürlich in die Mitte des Blocks verschieben. Genau so funktionieren unsere Container. Sie haben automatische Seitenränder, weshalb sie in der Mitte bleiben, obwohl sie sich nicht im Zeilenblock befinden. Dieser Typ hier streckt sich schon von Kante zu Kante, aber es ist eine Flexbox Wir können es einfach auf eine vertikale Ausrichtung umstellen und einfach sicherstellen, dass Sie eine Art Kampfklasse oder eine einzigartige Klasse darauf anwenden, und es ist nicht diese generische Flexbox-Klasse die wir überall verwenden Und dann wechsle zur Vertikalen und ändere dann einfach die Ausrichtung in der Mitte Und wir können hier eine Lücke schaffen. Wir können diese Lückenfunktion verwenden , mit der wir natürlich auch einen Rand oben oder unten an den Sternen hinzufügen können , das funktioniert auch gut, aber das ist eine sehr praktische kleine Funktion. Wir können es verwenden und eine Lücke dazwischen geben , und das sieht gut aus. Wir können diesen Raum möglicherweise ein wenig verkleinern. Etwas wie 60. Und dann vergrößern Sie den Abstand zwischen diesen Inhalten ein wenig , und es ist sehr eng. Geben wir also 30 oben, 30 unten. Es sieht also etwas besser und räumlicher aus. In Ordnung, ich denke, das sieht jetzt viel besser aus. Lassen Sie uns die Reaktionsfähigkeit testen. Ziemlich gut Und eine Sache, die wir jetzt tun können, ist, wie Sie sehen können, dass unser Bild von außen viel zu stark abschneidet. Was wir nicht tun müssen. Wir mussten das machen , als wir es auf diesem Desktop gemacht haben , weil wir versuchen , es irgendwie auch für die sehr großen Bildschirme zu machen. Aber hier haben wir mehr Spielraum. Ich denke, damit wir sehen können, dass das das Maximum ist. Das ist das Maximum, das es geben wird. Auf der Grundlage dieser Größe können wir also diese negative Marge verringern. Bis hier. Es ist also mehr vom Bild sichtbar, und das füllt einen etwas größeren Raum aus und sieht mit dem Gesamtlayout ein bisschen besser aus. Endlich die Hochformatversion. Okay, hier müssen wir die Mindestbreite entfernen , die im rechten Block festgelegt ist. Gut. Die Gesamtsteuer ist ziemlich hoch für das Porträt, also lassen Sie uns auch das reduzieren. 27 Pixel sehen richtig aus. Das ist es. Das sieht alles schick aus. Wir haben gerade die Fußzeile links und wir sind fertig. 89. Reaktionsfähig: Fußzeile (Chat-App): Also, was haben wir hier? Das ist eine Flexbox, in der sich Spalten befinden. Auf die Spalten wird diese prozentuale Breite angewendet. Lassen Sie uns bei der Erstellung einer Lösung an dieser Stelle die mobilen Ansichten berücksichtigen. Wir werden eine Art vertikale Ausrichtung benötigen. Wir könnten uns für die vertikale Option der Flexbox entscheiden, aber dadurch wird alles vertikal eingestellt, auch wenn an den Seiten Platz ist Eine bessere Option ist die Verwendung einer Wrap-Funktion. Wir haben diese Option im Flexbox-Video besprochen, aber lassen Sie mich Ihr Gedächtnis auffrischen Standardmäßig versucht Flexbox, alle Kinder in einer einzigen Zeile unterzubringen, sei es eine horizontale oder eine vertikale Linie Wenn wir jedoch die Option „Zeilenumbruch“ aktivieren, springen die Kinder je nach Bedarf nacheinander zur nächsten Zeile oder brechen nacheinander Lassen Sie uns die Einstellungen für die Rechtfertigung so ändern dass es diese leere Spalte gibt, was auf dem Desktop nett war, aber für die Ansicht auf Tablets und Mobilgeräten nicht benötigt wurde. Wir möchten, dass die Spalten ohne zusätzlichen Abstand nach links ausgerichtet werden. Wir können diese leere Spalte entfernen, weil sie auch vom Desktop entfernt wird. Aber was wir tun können, ist, uns mithilfe von Stilen zu verstecken. Geben wir ihr eine Kombinationsklasse, damit wir nicht mit anderen Spalten herumspielen , und wählen Sie dann in den Anzeigeoptionen die Option Ausblenden aus. Bei der Anzeige ohne Eigenschaft wird das Element ausgeblendet und der Platz, den es belegt hat, wieder freigegeben Was sonst? Die Spalten haben den linken und rechten Rand. Wenn sie also zur nächsten Zeile springen, wird dieser zusätzliche Platz geschaffen. Lassen Sie uns den linken Rand entfernen und nur den rechten Rand verwenden, aber achten Sie darauf, die Spalte zu bearbeiten , die nur eine globale Klasse hat. die erste und letzte Spalte wurde eine Kombinationsklasse angewendet. Wir haben es verwendet, um einige Ränder auf dem Desktop zu korrigieren. Das ist ziemlich gut. Und lassen Sie uns einen unteren Rand hinzufügen, damit sich die Spalten in der zweiten Zeile nicht in der ersten Zeile verklemmen. Bei kleineren Größen werden Sie feststellen, dass sie sich nicht richtig umschließen und sich die Spalten stattdessen sehr eng zusammendrücken. Das liegt daran, dass ihnen die prozentuale Breite zugewiesen wird, was auf dem Desktop in Ordnung ist, bei dieser Art von Layout aber unnötig wird. Also lass uns es loswerden. Jetzt ist diese Spaltenbreite automatisch, sie wächst mit dem Inhalt, und das macht die erste Spalte zu breit. Wir müssen ihr eine maximale Breite geben, damit sie nicht so stark wächst . Und das ist besser. Und das Ganze passt gut zu allen Ansichten. Eine letzte Sache, die wir anpassen sollten, ist der Abstand zwischen dem Copyright und den Links Ich denke, 60 Pixel wären viel besser. Lassen Sie uns einen letzten Blick auf die ganze Sache werfen. A Und damit ist unsere gesamte Seitenentwicklung abgeschlossen. Im nächsten Abschnitt werden wir uns Fertigstellung unserer Seite befassen, mit Dingen wie Veröffentlichung, Suchmaschinenoptimierung und so weiter Das bedeutet nicht, dass wir mit dem Webflow-Designer und dem Entwicklungsprozess vollständig fertig Webflow-Designer und dem Entwicklungsprozess Es gibt noch mehr zu lernen, Dinge wie CMS und Formulare sowie Interaktionen und Animationen, die jede Website so fantastisch und frisch und so modern und professionell aussehen lassen können und frisch und so modern und professionell aussehen Aber all diese Konzepte werden wir in anderen Teilen dieses Kurses lernen. einen werden wir sie in diesem großen Kundenprojekt erlernen, das wir von Anfang bis Ende durchführen werden , sodass Sie praktische Erfahrung sammeln , wie Sie alles mit einem Kunden beginnen können, mit Dingen wie Projekt-Briefing und Wireframing und Designs und dann zu Webflow wechseln und CMS und Blog innerhalb von Webflow entwickeln und dann Interaktionen und dann schließlich alles liefern. Veröffentlichen mit einer benutzerdefinierten Domain, all das Zeug. Und wir haben auch einige Teile, die ich in den fortgeschrittenen Teil dieses Kurses aufnehmen werde den fortgeschrittenen Teil dieses Kurses aufnehmen , weil man nicht alles braucht. Sie müssen nicht alles auf einmal lernen. Deshalb lege ich alles, was nicht unbedingt erforderlich ist, zu beginnen, als Freiberufler zu beginnen, in den fortgeschrittenen Teil ein. Sobald Sie also den letzten Teil dieses Kurses erreicht haben , der fortgeschritten ist, wissen Sie bereits alles , was wichtig ist und was Ihnen den Einstieg in die freiberufliche Tätigkeit erleichtern kann Und während Sie freiberuflich tätig sind, während Sie nach Jobs suchen, können Sie auch mit fortgeschrittenen Teilen weitermachen und Ihre Fähigkeiten verbessern und besser werden 90. Live-Zugang: SEO (Chat-App): Das Design und der Aufbau der Webseite sind vollständig abgeschlossen. Jetzt müssen wir die letzten Teile fertigstellen und dann veröffentlichen. Zuerst müssen wir die SEO-Einstellungen festlegen. SEO steht für Suchmaschinenoptimierung und ihre Methoden, wie eine Seite Suchmaschinen wie Google, Pink und Do Dot Go attraktiver gestaltet werden kann. SEO ist ein ganz anderes Feld, und wir werden in diesem Kurs nicht auf die Details eingehen. Es gibt jedoch einige Dinge , um die wir uns unbedingt kümmern müssen. Bei Stars sind dies der Titel und die Metabeschreibung der Seite. Diese werden normalerweise angezeigt wenn Ihre Seite bei Google erscheint. Das ist der Titel und das ist die Meta-Beschreibung. Wenn Sie dies nicht einrichten, ruft Google einen zufälligen Text von Ihrer Seite ab Nun, nicht ganz zufällig. Es hat seine eigenen Regeln, aber wir wollen die Kontrolle darüber haben und entscheiden was genau wir anzeigen möchten. Diese können wir in den Seiteneinstellungen ändern, die wir im Seiten-Panel finden. Gehe zu der Seite, die du bearbeiten möchtest. In diesem Fall die Homepage. Alle anderen Seiten, die wir für unsere Seite haben, werden hier angezeigt, und jede dieser Seiten hat ihre eigenen individuellen Einstellungen, die über dieses Zahnradsymbol zugegriffen werden kann. Lassen Sie mich diese Einstellungen reduzieren , damit wir sie durchgehen können. Unter Allgemein oder Gruppe haben wir nur einen Seitennamen. Dieser Seitenname wird in Webflow angezeigt. Es ist ein interner Name, sodass Sie hier alles benennen können, was Sie möchten. Unter Zugriffskontrolle können wir festlegen , wer diese Seite aufrufen kann und wer nicht. Dies ist nützlich, wenn Sie Ihre Seite mit einem Passwort schützen müssen . Zum Beispiel, wenn es sich um eine interne Unternehmensseite mit sensiblen Daten handelt und nur bestimmte Personen Zugriff darauf haben. In den SEO-Einstellungen haben wir zwei Werte: Titel-Tag und Meta-Beschreibung. Wenn wir diesen Titel leer lassen, verwendet Webflow standardmäßig den Seitennamen Während du in diese Felder tippst, siehst du eine Vorschau der Suchergebnisse. Das ist eine gute Möglichkeit , den tollen Titel und die Beschreibung zu tollen Titel und die Beschreibung Es gibt viele verschiedene Möglichkeiten, Ihre Seiten zu benennen. Auf Homepages ist es üblich, den Namen Ihres Unternehmens oder eines Produkts zuerst anzugeben, gefolgt von einer Art Slogan Zum Beispiel Chat App, einfache Team-Chat-Anwendung Und in der Beschreibung werden wir die Seite beschreiben. Da es sich also um eine Homepage handelt, werden wir das Produkt selbst beschreiben. Google und andere Suchmaschinen kürzen die Beschreibung ab einer bestimmten Anzahl von Zeichen, normalerweise bis zu 155 Zeichen Die Einstellungen für offene Grafiken ähneln denen von SEO, es handelt sich jedoch um Informationen , die beim Teilen von Inhalten in sozialen Netzwerken wie Facebook, Twitter, Link DIN und Pinterest angezeigt Teilen von Inhalten in sozialen Netzwerken wie Facebook, Twitter, Link DIN und Pinterest Wenn Sie beispielsweise einen Link zu einem Auto teilen, das Sie gerade gekauft haben, kann Facebook den Titel, die Beschreibung und sogar ein Foto aus den Open-Graph-Einstellungen dieser Seite abrufen . Wenn diese Einstellungen leer sind, ruft Facebook zufällige Informationen oder manchmal gar keine Informationen ab. Wir können einen benutzerdefinierten Titel und eine Beschreibung angeben, aber wir können diese Optionen auch aktivieren , damit sie denen von SEO entsprechen. Für das Open-Graph-Bild müssen wir dafür einen Link zum Bild einfügen, was bedeutet, dass wir das Bild irgendwo hochladen und dann den Link abrufen müssen . Wir können das Bild direkt auf Webflow in unseren Assets hochladen und dann die URL von dort abrufen oder einfach ein bereits hochgeladenes Bild verwenden und den Link dafür abrufen Dies ist eine URL dieses Bildes , das auf Webflow-Server hochgeladen wird Kopieren Sie diese URL und fügen Sie sie in das Bildfeld ein. Jetzt können Sie eine Vorschau sehen, wie es aussehen könnte wenn der Link zu dieser Seite in sozialen Netzwerken geteilt wird. Zwei weitere Einstellungen beziehen sich nicht auf SEO. Die Sucheinstellungen der Website, die so aussehen mögen, als ob sie SEO und der Google-Suche zu tun haben, aber das sind sie nicht. Es geht eigentlich um die Suchfunktion auf unserer Website. Sie sehen, wir können unserer Website eine Suchkomponente hinzufügen . Wo Benutzer die Inhalte unserer Website durchsuchen können. Dies ist nützlich, wenn wir eine inhaltsbasierte Website wie Blog oder E-Commerce haben , bei denen die Suche sinnvoll ist. Auf kleinen Websites wie einer Unternehmenswebsite oder einer Portfolioseite ist dies nicht wirklich erforderlich. Die letzte Option ist benutzerdefinierter Code. Im Moment wird nichts angezeigt, da Sie einen Hosting-Plan hinzufügen müssen , um diese Funktion freizuschalten. Es sieht ungefähr so aus. Benutzerdefinierter Code gibt uns die Möglichkeit , der Seite unseren eigenen externen Code hinzuzufügen. Normalerweise möchten wir für Anwendungen von Drittanbietern eine Verbindung zu unserer Webseite oder irgendwelchen JavaScript-Plugins oder allem, was normalerweise extern ist, Dinge wie Tracker, Analysen und all diese Dinge herstellen, normalerweise alles, was außerhalb von Webflow liegt , und wir können den benutzerdefinierten Code einfach hier einfügen Ordnung, es gibt also noch eine Sache, die wir tun müssen , bevor wir das Schild veröffentlichen Wir müssen all unsere Bilder komprimieren. Gehen Sie also zum Assets-Bedienfeld, erweitern Sie das Bedienfeld, wählen Sie dann alle Bilder aus und klicken Sie auf Komprimieren. Und führen Sie die Komprimierung für alle Bilder auf einmal durch. Es wird einige Zeit dauern, vor allem, weil es mehrere Bilder gibt. Sie müssen also entweder warten, bevor Sie veröffentlichen, oder Sie können es jetzt veröffentlichen Sobald die Komprimierung abgeschlossen ist, veröffentlichen Sie die Site erneut Ordnung, alle unsere Bilder wurden jetzt komprimiert und in das AV-Format konvertiert Sie können das noch einmal überprüfen. Sie können in den Dateieinstellungen eines Bilds sehen, wie es in das AV-Format konvertiert wurde und wie die Dateigröße verringert wurde. Und stellen Sie sicher, dass Sie Ihre Bilder durchgehen. Und nur um zu überprüfen, ob es keine Probleme mit der Komprimierung gibt. Ich habe bereits erwähnt, dass AVV eine ziemlich große Komprimierung durchführt Die Dateigröße wird sehr stark auf eine wirklich kleine Größe reduziert , was großartig ist, aber manchmal kann es zu Artefakten und einigen Problemen mit Bildern kommen Hängt wirklich vom Bild ab, um welche Art von Bild es sich handelt. Nur um sicherzugehen, dass es solche Dinge nicht gibt. Und wenn du bei einigen Bildern feststellst , dass es Probleme mit einem Bild gibt, dann kannst du es mit einer Web-P-Konvertierung versuchen und dann die Konvertierung für dieses spezielle Bild noch einmal in Web P durchführen die Konvertierung für dieses spezielle Bild noch einmal . Und das war's. Jetzt ist unsere Website bereit für die Veröffentlichung, was wir in der nächsten Lektion tun werden. Um es noch einmal zusammenzufassen: Jede Seite unserer Website hat SEO - und andere Einstellungen Wir verwenden Titel und Metabeschreibung, um zu steuern, wie unsere Seite in den Suchergebnissen auf Websites wie Google angezeigt Darüber hinaus können wir Open-Graph-Einstellungen festlegen, was eine Art Suchmaschinenoptimierung ist, aber soziale Netzwerke wie Facebook, Twitter und so weiter. 91. Live-Schalten: Veröffentlichen (Chat-App): Also lasst uns endlich unsere Seite veröffentlichen. Das ist eine ziemlich einfache Aufgabe. Gehen Sie zur Veröffentlichung und klicken Sie auf Veröffentlichen, um eine Domain auszuwählen. Gib ihm einen Moment. Und da. Unsere Pixel Perfect-Webseite ist live und betriebsbereit wie ein Damm. Alle von uns durchgeführten responsiven Optimierungen können getestet werden , indem die Größe des Browserfensters geändert und verkleinert Die Schaltflächen und Links funktionieren derzeit nicht , da wir sie mit nichts verknüpft haben Wir werden das bei diesem Praxisprojekt nicht tun, aber wir werden es mit diesem großen Kundenprojekt tun , an dem wir arbeiten werden. Zunächst wird Ihre Website auf der Webflow-Subdomain veröffentlicht Um unsere Website auf einer benutzerdefinierten Domain zu veröffentlichen, müssen wir einen kostenpflichtigen Hosting-Plan hinzufügen Anschließend können wir unsere Website auf unserer eigenen Domain veröffentlichen Die Hosting-Pläne von WebFlow sind sehr günstig. Diese Website würde nur den Basisplan benötigen. Eine CMS-basierte Website enthält einen Blog oder eine andere Art von dynamischem Inhalt , der über CMS, ein Content-Management-System , verwaltet werden muss . werden wir eine CMS-basierte Im kommenden Projekt werden wir eine CMS-basierte Website erstellen. Ich werde nicht zeigen, wie man das auf einer benutzerdefinierten Domain für dieses Projekt veröffentlicht , aber ich werde es für das nächste Projekt zeigen. Bei einem kostenlosen Tarif können wir die Subdomain unserer Website ändern, zur Veröffentlichung übergehen und dieses Feld nach Belieben bearbeiten, solange es nicht belegt ist Denken Sie nach, klicken Sie auf Speichern. Und wie Sie an der Schaltfläche „ Veröffentlicht“ sehen können, ist dies jetzt Ihre neue URL. Eine letzte Sache, die wir ändern müssen, ist dieses kleine Symbol. Das nennt man Fabrican. Im Moment wird ein Webflow-Standard-Favicu angezeigt, aber wir können das in den Projekteinstellungen ändern Hier gibt es zwei Symbole. Erstens dieser Hersteller , der auf einem Browser-Tab angezeigt wird, und der zweite ist Webclip Der Webclip ist ein Symbol, das auf dem iPhone angezeigt wird, wenn Sie Ihre Website auf einem Homescreen speichern Wenn Sie nicht wissen, wovon ich spreche, verfügt Safari über diese Funktion, mit der Sie eine Website mit einem Lesezeichen versehen Sie können es zu einem Startbildschirm hinzufügen und es wird neben all Ihren Apps gespeichert sieht genauso aus wie jede andere App Ich verwende diese Funktion nie, aber da wir eine Option haben, sollten wir dieses Symbol hier ändern. Wir müssen ein Symbol in Figma erstellen, das nur eine normale Bilddatei ist, und wir müssen aus unserem Logo eine Art Symbol erstellen Fügen Sie einfach einen neuen Rahmen mit der Größe 256 mal 256 hinzu. Blau gestrichen und vielleicht mit abgerundeten Ecken versehen. Kopieren Sie dann das Logo, löschen Sie alles bis auf den Buchstaben C. Vergrößern Sie es , wenn Sie es in PNG exportieren, und das wird unser Webclip sein. Was den Hersteller betrifft, müssen wir ihn nur auf mal 32 verkleinern Eine normale Größenänderung reicht nicht aus. skaliert Sowohl das Rechteck als auch der Text werden nicht proportional Stattdessen müssen wir das Skalierungswerkzeug verwenden, das wir unter dem Verschieben-Tool finden Das Skalierungswerkzeug ändert die Größe gruppierter Objekte proportional. Wenn es also rechteckige Textbilder gibt, werden die Proportionen aller Ebenen im Inneren beibehalten und dann die Größe aller Ebenen zusammen geändert . Es ist ein sehr praktisches kleines Tool. Und wieder PNG exportieren. Und laden Sie dann jeden an seinen dafür vorgesehenen Ort hoch. Die Abmessungen dieser Symbole müssen genau 32 und 256 x 256 entsprechen. Wepplo lässt dich keine andere Größe hochladen. Veröffentlichen Sie jetzt erneut, um zu sehen, wie die Änderungen wirksam werden. Nur eine kleine Randnotiz für Safari-Benutzer Safari aktualisiert das Favicon nicht sofort, auch wenn Sie es mehrmals aktualisieren, wird das alte Favicon beibehalten Es tut das, weil es das Favicon im Cache speichert und es von dort abruft, anstatt es neu zu laden und es ständig aus der Quelle zu holen Wenn Sie also den Hersteller aktualisieren und in Safari die neueste Version sehen müssen , müssen Sie entweder den Browserverlauf löschen oder den Cache leeren, und Sie können das von hier aus dem Verlauf tun, den Verlauf löschen oder ich verwende gerne, löschen oder ich wenn Sie diesen entwickelten Tab haben, dann ist es einfacher, weil es nur den Cache löscht, anstatt den Browserverlauf, wo noch ein paar andere Sachen drin sind. Leerer Cache, und wenn du ihn jetzt neu lädst , sollte er aktualisiert Dort gehst du zum neuesten Favican Das ist alles, was unsere Webseite live ist. Es sieht toll aus und es ist scharf und es funktioniert gut, es ist schnell und es reagiert schnell und es ist einfach unglaublich. Beachten Sie, wie schnell und mühelos die Seite geladen wird. Das ist Webflow, das ist einer der erstaunlichen Vorteile, da ihre Server blitzschnell sind und sie einfach sehr gut organisiert und für die in Webflow erstellten Seiten und Websites optimiert sind Und wir haben auch gute Arbeit geleistet , weil wir sie mit einem sehr schönen, sauberen Code erstellt und die Website einfach gut funktioniert und ziemlich schnell geladen wird Also gute Arbeit für uns. Als Nächstes werden wir mehr über Webflows oder eine Funktion namens Editor erfahren . Bleib hier. 92. Inbetriebnahme: Editor: Habe ich jemals erwähnt, wie toll Webflow ist? So toll ist es. Neben dem Designer gibt es noch eine weitere Ansicht namens Editor, die Sie von hier aus zugreifen können. Der Editor ist ein Ort , an dem Kunden und Mitarbeiter den Inhalt der Website bearbeiten Sie können dies direkt auf der Live-Site tun, buchstäblich auf der Live-Seite Keine hässlichen Inhaltsverwaltungs - und Texteditoren. Sie können einfach auf den Inhalt klicken und mit der Bearbeitung beginnen. Das ist für Kunden so unglaublich nützlich , dass ich es nicht einmal in Worte fassen kann. Ihre Kunden sind normalerweise nicht technisch versiert, und das Letzte, was sie tun möchten, ist herauszufinden , ob Content-Management-Systeme funktionieren Und das Letzte, was Sie wollen, ist Ihr Kunde Ihnen jedes Mal eine E-Mail sendet, wenn er eine kleine Änderung in der Überschrift benötigt , um ein Koma zu entfernen oder ein neues Wort hinzuzufügen Diese Art von Anfragen wird sich bei Ihnen einschleichen, nachdem Sie Ihr Projekt abgeschlossen und an Kunden versendet haben Nun, wenn Sie stundenweise bezahlt werden, ist das in Ordnung, aber wenn Sie pro Projekt bezahlt werden, dann arbeiten Sie umsonst Wir können keine Stile oder Layouts im Editor ändern , der sich im Designer befindet. Hier sind es nur Inhalte, seien es Text, Bilder oder Links. Du kannst ein Bild ändern, indem du einfach darauf klickst und ein anderes hochlädst Sie können auch die Ziel-URL eines Links oder den Text ändern. Die Änderungen werden erst auf der Live-Site angezeigt , wenn Sie auf die Schaltfläche Veröffentlichen klicken. Danach werden alle Änderungen sofort live geschaltet und so einfach ist das. Und natürlich werden sich diese Änderungen auch im Designer widerspiegeln, zu dem wir von hier aus wechseln können. Falls wir den Zugriff auf einige Teile des Inhalts vom Editor aus einschränken möchten , können wir innerhalb des Designers zum Einstellungsfenster für Elemente gehen und überprüfen, können wir innerhalb des Designers zum Einstellungsfenster für Elemente gehen und ob Mitarbeiter dieses Element bearbeiten können Und jetzt kann die Überschrift im Editor nicht bearbeitet werden. In den Projekteinstellungen können wir zusätzliche Mitarbeiter hinzufügen Dies ist unabhängig vom Hauptkonto und ermöglicht den Zugriff auf die Inhaltsverwaltung der Website. Dadurch erhält der Editor Zugriff auf Formulareinreichungen, Seiteneinstellungen, das Erstellen neuer CMS-Elemente wie Blogbeiträge usw. Das ist also der Editor, ziemlich einfach und doch leistungsstark. Es gibt nichts, was wir wirklich dagegen tun müssen. Ich wollte Sie nur herumführen, weil ich normalerweise nicht mit einem Redakteur zusammenarbeite, weil ich durch den Designer arbeite, aber das ist normalerweise etwas, das Sie Ihren Kunden quasi beibringen und ihnen sagen: Okay, das ist die Option und so machen Sie das. So bearbeitet man die Seiten und so weiter. Webflow hat tatsächlich Tutorials im Editor Manchmal können Sie das Video-Tutorial einfach so senden das Video-Tutorial oder Ihr eigenes Video-Tutorial aufnehmen, ganz nach Ihren Wünschen Und damit ist der dritte und große Teil dieses Kurses abgeschlossen, dem es um Webflow und Entwicklung ging Im nächsten Teil werden wir ein komplettes Clanprojekt machen , bleiben Sie dabei. 93. TEIL 4: KUNDENPROJEKT VON Anfang BIS ENDE DES ENDE AUFGRUND DES ENDE: in diesem Teil des Kurses werden wir ein vollständiges Projekt entwerfen und bauen, wie wir es für den Kunden getan haben. Ich werde Sie genau durch den gleichen Prozess führen, den ich selbst gehe. Wir haben jetzt ein neues Projekt. Sie üben genau das, was an dem Rial-Projekt beteiligt ist, und machen jeden Schritt von Project Brave Schleppen, Drahtrahmen, sammeln Inspiration, Design und dann bauen und liefern die komplette Enchilada an den Kunden. Wir werden alles nutzen, was wir bisher gelernt haben. Außerdem werden wir viel mehr Konzept lernen, das wir noch nicht behandelt haben, besonders im Nassstrom. Zum Beispiel, CMS, das steht für Content-Management-System in seinem grundsätzlich weint, fließt Kraftpaket auf, wie dynamische Website und dynamische Inhalte zu machen. Zum Beispiel blawg, wo wir Informationen aus der Datenbank abrufen können, anstatt nur eine statische Seite für jeden einzelnen Artikel zu erstellen . Wir können einfach die Datenbank mit Inhalt in dieser Datenbank wie eine Überschrift haben, die Sub-ihr, den Namen aus, den Autor und alles und dann einfach eine Vorlage für die Artikelseite entwerfen und erstellen und dann die Datenbank ziehen Sie den Inhalt für verschiedene Seiten, wie wir als die schlechte Seite lädt und wie der Benutzer mit einer Website interagiert, das zweite große Thema, das wir gehen, um seine Interaktionen zu decken. So erstellen Sie interaktive Elemente und Objekte im Workflow, die animieren, bewegen, bewegen, Dinge wie Pop-Art-Formulare verschwinden, Tom's animierte Schaltflächen fallen lassen oder Animationen scrollen, die etwas passiert, versteckt, zeigt oder einfach nur ändert Form auf einem Scroll und viel Markierung. In Ordnung, also lasst uns direkt eintauchen. 94. Kundenprojekt: Normalerweise beginnt mein Website-Projekt mit dem Client eine E-Mail an mich einen Absatz der Beschreibung was sie wollen. Und normalerweise geht es wie: Oh, Oh, hey, Vacco. Wir möchten Website für unsere App auf, aber wir haben keine Bildschirme oder Inhalte oder irgendetwas anderes. Dennoch ist es sehr schwierig, eine ganze Website aus zu erstellen. Keine Inhalte, keine Projektbeschreibung und keine App-Bildschirme oder kein brio, wertvolle Informationen, die ich für die neu ausrichtete Website verwenden kann. So funktionieren die Dinge normalerweise, und Sie erhalten kein perfektes Projekt mit allen Inhalten und Fotos und App-Bildschirmen oder was auch immer bereit für Sie zu entwerfen. Am Anfanghatte ich nicht ah, hatte ich nicht ah, Prozess auf meinem Plan war es, es einfach zu Flügel und einfach mit dem Projekt zu gehen und zu sehen, wo es geht. Das war aus drei Gründen eine schreckliche Idee. Zuerst würde ich stecken bleiben. Ich würde auf den Bildschirm starren, ohne eine Ahnung zu haben, was zu tun ist und was zu entwerfen und denken. Ich hatte gerade einen kreativen Block oder so etwas. Aber kein Wunder. Wie kann man etwas entwerfen, wenn nichts zu entwerfen ist? Das zweite Problem war für mich groß, weil ich viel Zeit damit verbringen würde, etwas zu entwerfen und zumindest eine Seite zu erstellen und zumindest eine Seite zu mögen oder vielleicht eine Seite zu haben. Und ich würde dieses Ergebnis an meinen Kunden senden, um sich auf die kreative Richtung zu einigen und zu schauen und zu fühlen, dass ich in Richtung gehen würde. Und dann würde ich oft eine vollständige Ablehnung bekommen und dass es so geben würde, wissen Sie, nein, wir mögen diesen Stil nicht. Wir wollen so etwas mehr. Das war sehr frustrierend für mich am Anfang, denn ich bekomme eine kleine Art aufgeregt Ted und ich werde anfangen, mir selbst zu sagen, alle diese Jungs wissen nicht, wovon sie reden. Sie haben keinen guten Designgeschmack und machen mich einfach selbst. Sag einfach OK, gut. Und geh einfach wieder an die Arbeit. Und Crumpley Bork auf einem neuen Look. Das dritte Problem war das. Beginnen Sie meine Arbeit und kommen Sie zu irgendwelchen Endergebnissen mit, Sie wissen schon, verschiedenen Iterationen durchlaufen und sich schließlich auf Design einigen. Aber oft der Dummy. Der Inhalt war Dummy-Inhalt im Inneren, so dass die Steuer Dummy-Inhalt war. Keine Fotos waren manchmal wirklich, weil ich vielleicht ein Foto brauchte. Bisher, Benutzer für Zeugnisse oder Bewertungen oder Foto selbst Teammitglieder oder so etwas. Und sie sollen meinem Klienten nicht auch Hausaufgaben geben, wissen Sie, wissen Sie mir zur Verfügung stellen und schreiben und sammeln all die Inhalte, die ich brauche. Aber oft würde der Kunde mit einer anderen Struktur für ihren Inhalt zurückkommen. Wenn ich zum Beispieleinen Abschnitt mit drei Spalten entwarf,würde der Client mit einer Kopie für zwei oder vielleicht fünf Spalten zurückkommen. zum Beispiel Wenn ich zum Beispieleinen Abschnitt mit drei Spalten entwarf, Aber diese Art von Inhalt ist optimal. Wenn wir drei oder vier Spalten für zwei haben, ist es einfach nicht sehr schön. Und für fünf ist es einfach zu viel Inhalt, um in eine Reihe zu passen. Das war absolut nicht meine Klientin schuld. Es war meins, weil ich einen Prozess haben werde. Ich hatte jetzt keinen richtigen Design- oder Projektprozess zu durchlaufen, was ihn überwältigt. Aber in dem Moment, in dem ich das herausgefunden und einen richtigen Designprozess und im Projektprozess für mich geschaffen habe, haben sich die Dinge dramatisch verändert. Es ist das Projekt gerade geschmeidiger und schöner. Ah, schneller, letzte Situationen zu durchlaufen und das ist lustig. Aber das Gestalten wurde in der Vergangenheit einfacher. Ich habe nur versucht, das ganze Projekt auf einmal aufzunehmen, genauso wie mich mit einem verdammten Brito in einem Durchgang zu stopfen, und es war zu viel zu handhaben. Ich war dabei, meine Kunden durch verschiedene Schritte zu führen, die wir in meinem Plan durchmachen mussten war nur, wissen Sie, den Raum gehen, mich gesperrt und dann eine Woche später mit dieser brillant gut gestalteten Website und dann nur hoffen und beten, dass die Kunden es geliebt haben. Hier ist also ein dreistufiger Prozess, den große Designer durchlaufen, bevor sie sogar das erste Pixel schmerzen . Der erste Schritt besteht darin, eine Projektbeschreibung zu definieren. Es ist eine kurze Beschreibung der Ziele und Details des Projekts. Das Projekt Brave stellt wichtige Fragen wie Was ist das Ziel der Website und für wen ist sie? Eine Antwort auf diese Fragen wird sowohl Sie als auch Ihren Kunden auf der gleichen Seite ausrichten, um sicherzustellen, dass jeder es in die gleiche Richtung hatte. Der zweite Schritt besteht darin, ein Moodboard zu erstellen und Ihre Kunden Feedback dazu zu erhalten. Das ist etwas, was wir bereits wissen, und wir haben es getan, um Inspiration für uns selbst zu sammeln. Aber wenn wir diesen Boot teilen gelangweilt mit unseren Kunden, als wir mehr davon profitieren können, indem ein Moodboard mit Ihrem Kunden teilen, können Sie einen Geschmack und einen Blick und fühlen sich von Ihrem Projekt, weil es viele verschiedene Stile dass Sie mit gehen können, richtig, Sie können ein bisschen mehr Fotografie mit für Ihre Website, die Sie kaufen können, aber gehen Sie ein bisschen mehr. Illustration schwer, ein bisschen bunter, weniger Farbe für rechts. So gibt es viele verschiedene Wege, die Sie mit Ihrem Projekt und Ihren Entwürfen nehmen können. Und oft haben Kunden sehr spezifische Geschmäcker. Sie wollen also keine Informationen herausfinden, weil es ihnen schwer fällt, sich selbst zu erklären , und sie wissen nicht, dass Sie der Designer sind und Sie Zugang zu all den Inspirationen der Welt haben . Wissen Sie, diese Websites wie Krüppel unsere Interessen und Runde leihe ich Buch und Sie gehen dorthin und Sie finden Inspiration. Sie sammeln das und Sie arbeiten daran, so dass Sie Zugang zu dieser Art von Inspiration haben. Aber sie wissen nicht, dass Websites, die sie nicht sehen, die vielleicht nicht so viel sind. Sie sind damit beschäftigt, andere Dinge richtig zu machen, und indem Sie diese Informationen an sie teilen, können Sie auf der gleichen Seite von Aussehen und Gefühl nageln und Art von Fleisch, denn wenn Sie nicht, dass, was Sie tun, ist, müssen Sie Wiederholungen, bis Sie zu ihrer Art von Geschmack bekommen und dass einfach so viel mehr Arbeit zu tun, oder? Warum sollte ich verschiedene Iterationen durchlaufen, um endlich den Geschmack in Nur allgemein zu nageln , schauen und fühlen Sie sich von der Seite, wo wir einfach Beispiele von anderen Websites und anderen Inspirationen greifen und ihnen OK zeigen können , Welches gefällt dir das dafür? Der dritte Schritt dieses Prozesses besteht darin, Drahtrahmen zu erstellen. Drahtrahmen sind eine grobe Skizze außerhalb der Baustelle. Ein Skelett. Wir machen uns keine Sorgen um Coloristen oder Typografie oder brauchen ein gieriges Design. Dies ist zum Beispiel, oder Drahtrahmen von YouTube. Es zeigt, was wohin geht und was der Inhalt ist. Sehr einfach. Nicht viel Design geht auf, dass es aussieht wie ein Kind schrieb, aber Weinrahmung hat einen großen Vorteil, weil Sie in der Lage sind, mit Ihrem Kunden zu diskutieren. Ein sehr wichtiger Teil dieser Website möchte den Inhalt, weil Design immer den Inhalt aufnehmen muss , weil das Design von unserem kleinen, zeilenreichen Absatz wird sich sehr von einem Design aus einem 5000 Gemeindedokument unterscheiden, oder? So müssen Sie den Inhalt nageln. Was Fotos für Software aussortiert, gehen die Tasten und alles, Und dies während des Entwurfsprozesses durch die Situationen während des Entwurfsprozesses zu tun , ist nur viel mehr Arbeit und verschwenderischer, weil Sie sich um jeden kümmern müssen einzelnes Pixel auf Anrufer und schattiert verschiedene Farben und Schatten und all das Zeug, was absolut unwichtig ist, wenn der Inhalt diskutiert wird und wenn sich der Inhalt ändert und eine Struktur ändert, dann müssen Sie alles, was Sie entworfen bereits Ihre Zeit verschwenden und dann von vorne anfangen. Aber während des Drahtrahmens ist es sehr einfach, weil es nicht viel zu entwerfen gibt. Sie müssen sich keine Sorgen machen, alles ausgerichtet oder Pixel perfekt, richtig, richtig, und Sie werden nicht frustriert, wenn Climb entscheidet, dass sie den gesamten Inhalt von der Seite neu strukturieren möchten , hält alle glücklich und auf der gleichen Richtung zum endgültigen Ziel. Also die drei Phasen des guten Entwurfsprozesses unsere Projektbeschreibung würde einsteigen und wir sind am Ende jeder Phase Framing. Sie müssen die Ergebnisse mit Ihrem Kunden teilen und ihnen zustimmen und das abmelden, denn wenn Sie das nicht tun, dann gibt es irgendwie den Zweck, den Sie brauchen, um das Feedback vom Client zu bekommen, um sicherzustellen, dass Sie nicht zu einem falschen Richtung, wenn Sie Ihre Kunden im Klo halten. Zunächst einmal fühlen sie sich, als hätten sie die Kontrolle über das Projekt und sie lieben diese Idee. Sie wollen wissen, wie die Dinge laufen. Zweitens zeigt Ihnen immer, dass Sie ein Profi sind, dass Sie einen Projektprozess haben, und sie wissen, dass sie verstehen, dass sie es sind. Sie sind in den großen Hüten. Und wenn Sie alle diese drei Schritte abgeschlossen haben , dann gehen Sie zu dem Designprozess und Design-Ergebnisse, die Sie produzieren werden viel mehr geschätzt und wie von unseren Kunden, weil sie Teil des Prozesses waren. Und genau das werden wir in den kommenden Lektionen tun. Bleiben Sie herum 95. Kundenprojekt: Projektübersicht: Das Projekt sollte mit einer Projektbeschreibung beginnen, es aber oft nicht. Ein Projekt-Briefing oder ein Design-Briefing ist eine Art Plan für das Projekt. Es ist eine Art Leitfaden und eine Vereinbarung zwischen zwei Parteien, dass Sie sich in eine bestimmte Richtung bewegen und das bestimmte Ergebnis erzielen werden. Es gibt verschiedene Möglichkeiten, Projektbeschreibungen durchzugehen und zu erstellen, aber ich habe meinen eigenen Weg weil ich finde, dass offizielle und branchenübliche Methoden nicht aber ich habe meinen eigenen Weg, weil ich finde, dass offizielle und branchenübliche Methoden nicht sehr nützlich sind, weil sie sehr umfangreich sind, zu viele Informationen enthalten und relevant für alltägliche Unternehmen und alltägliche Szenarien wie freiberufliche Tätigkeiten sind. Ich arbeite und schicke Informationen an jemanden auf dem ganzen Kontinent, was für kleine Projekte nicht sehr nützlich ist Vielleicht nützlich für riesige Unternehmen, und so definieren sie den Projektauftrag, weil er bei solchen Dingen durch Ausschüsse und Vorstände gehen muss durch Ausschüsse und Vorstände solchen Dingen durch Ausschüsse und Vorstände Aber wenn ich hauptsächlich mit kleinen Startups und Interpreneuren und kleineren Unternehmen zusammenarbeite , brauchen sie das alles nicht Ihr Hauptanliegen sind Zeit und Geld und sie wollen zu diesem Projekt kommen und es so schnell wie möglich abschließen Für mich sind Projektbeschreibungen also im Grunde genommen Antworten auf bestimmte Fragen , die ich wissen muss. Und das sind Fragen, die ich beim Kickoff-Meeting stelle, also habe ich ein erstes Treffen mit meinen Kunden, und wir besprechen dort etwas, und ich habe einige Für sie stelle ich ihnen diese Fragen, und sie geben mir Antworten, und am Ende des Treffens ziehe ich sozusagen ein Projekt-Briefing aus diesem Treffen heraus, beantworte im Grunde dieselben Fragen auf dem Papier und schicke es ihnen, damit sie zustimmen können, dass ich nichts falsch verstanden habe, oder vielleicht hatten wir ein Missverständnis. Die zwei wichtigsten Fragen, die ich stelle, sind: Was ist das Ziel der Website und für wen ist sie gedacht Sie können nicht wirklich eine Lösung für ein Problem entwerfen bevor Sie nicht wissen, welches Problem damit gelöst werden soll. Ich muss die Zielgruppe kennen und wissen, wer diese Website nutzen wird. Eine Website für ein junges Publikum in Zwanzigern wird etwas anders aussehen als eine Website für Unternehmensleiter in den Vierzigern und Fünfzigern Für unser Projekt habe ich bereits ein Design-Briefing vorbereitet, und es ist eine Vorlage, die ich anhand meines eigenen Design-Briefings erstellt habe, das ich verwende, und Sie können es für Ihre Projekte verwenden Nimm es und speichere es. Folgendes können Sie damit machen. Wenn Sie zu einer Besprechung, einem Chat oder einer E-Mail-Konversation mit Ihrem Kunden oder einem Arbeitgeber kommen, behalten Sie dieses Dokument bei sich und stellen Sie ihnen diese Fragen. Sie werden diese Fragen später verfeinern und weitere hinzufügen oder einige entfernen , damit sie für Sie funktionieren. Wenn Sie mit einer Besprechung fertig sind, füllen Sie dies aus Sie können dies während der Besprechung oder später tun , ohne Unterschied. Exportieren Sie es dann als PDF. Und senden Sie es an Ihren Kunden, um zu überprüfen, ob er damit einverstanden ist. Das wird zwei Dinge bewirken. Erstens wird das tatsächlich eine große Hilfe für Ihren Kunden sein , denn was oft passiert, ist dass meine Kunden nicht wissen, was sie wollen. Und das ist etwas , das Sie nicht erwarten würden, aber sie wissen, dass sie eine Website wollen. Aber oft wissen sie nicht, warum genau sie die Website wollen, welche Art von Website sie wollen, und sie haben viele verschiedene Ideen, und das ist bei Terprenern sehr üblich, weil viele Terprener in ihrem Kopf sind und es einfach Millionen verschiedene Ideen gibt, die ihnen einfach im Kopf herumschwirren und sie Und sie haben Schwierigkeiten, ihre Idee und ihren Geist richtig zu strukturieren Indem Sie diese Fragen und Antworten durchgehen und sie dann später im Design-Briefing-Format lesen , geben Sie ihnen die Möglichkeit, Klarheit in ihren Gedanken zu schaffen. Sie sind also beide auf derselben Seite. Die zweite Sache, die passieren wird , ist , dass Sie professioneller erscheinen werden. Das zeigt, dass Sie wissen, was Sie tun und ich habe ein bestimmtes System eingerichtet. Aus diesem Grund werden Kunden Ihnen und Ihren Entwürfen mehr vertrauen . Sie werden am Ende des Tages bessere Erfahrungen machen , weil sie bekommen werden , was sie eigentlich wollten weil sie Ihren Entwürfen jetzt vertrauen. Und sie werden mit den Ergebnissen zufriedener sein, das heißt, sie werden sie mit ihren Freunden teilen , die oft selbst Dolmetscher sind, was Ihnen mehr Kunden und mehr Arbeit bringt In Ordnung, also ich habe diesen Brief bereits ausgefüllt. Stellen wir uns vor, wir hatten bereits ein Treffen mit unserem Kunden und wir haben uns auf diesen Auftrag geeinigt. Unser Kunde ist ein Start-up, das eine Plattform für die Zusammenarbeit im Team aufbaut. Das Ziel der Seite ist es, Benutzer für den Early-Access anzumelden . Das bedeutet, dass die Plattform noch nicht fertig ist, aber das Unternehmen möchte bereits vermarkten und Interesse wecken. Dies ist bei Start-ups üblich , während ihres Entwicklungsprozesses oder wann immer sie ihr Produkt entwickeln, eine Website zu haben während ihres Entwicklungsprozesses , weil sie auf diese Weise Interesse wecken können , weil sie nach Investoren suchen oder versuchen, PR und Medienpräsenz zu erlangen, sodass sie immer eine Website benötigen , oft bevor sie überhaupt ein Produkt haben. Die Zielgruppe dieser Website sind andere Start-ups und Teams, deren Mitarbeiter von verschiedenen Standorten aus arbeiten. Der Kunde möchte eine moderne Website, die Fotografie anstelle von Illustrationen verwendet und ein sauberes, minimalistisches Aussehen Die Website wird einen Blog haben. Das bedeutet, dass wir ein CMS erstellen werden, das Formulareinsendungen sammeln muss. Das ist es. So einfach sollte das Projekt-Briefing sein. Es heißt kurz, nicht wahr, also mach es kurz und bündig. 96. Kundenprojekt: Moodboard: Board habe ich schon immer gemacht, aber ich würde es nicht mit einem Kunden teilen Ich habe es als halbinternen Designprozess beibehalten. Am Anfang habe ich Design als einen künstlerischen Prozess betrachtet, bei dem man sich im Raum einsperrt und eine Woche später tolle Designs entwickelt, die Ihre Kunden völlig begeistern Aber das ist weit von der Realität entfernt. Oft haben Ihre Kunden bestimmte Websites und einen bestimmten Stil im Kopf. Und wenn Sie einfach gehen, ohne sich auf diese Gemeinsamkeiten zu einigen, und sich aus dem Nichts etwas einfallen lassen, besteht die Möglichkeit, dass Sie ihre Erwartungen verfehlen Und du könntest dir etwas Besseres einfallen lassen. Aber wenn Sie ihre Erwartungen nicht erfüllen, enttäuschen Sie sie. Wenn Sie sich auf ein Moodboard einigen, dann werden die Designs, die Sie erstellen, wahrscheinlich so aussehen, wie Ihre Damit sie glücklich sind und mehr wollen. Sie haben bereits geübt, ein Moodboard zu erstellen, also überspringen wir den Teil, in dem Sie sich Stattdessen verwenden wir ein Moodboard, das ich bereits für das Produkt zur Teamzusammenarbeit erstellt habe bereits für das Produkt zur Teamzusammenarbeit erstellt Ich habe gerade ein paar weitere Aufnahmen entfernt und hinzugefügt. In der Figma-Datei findest du dieses Moodboard Wenn Sie eine etwas größere Herausforderung suchen, können Sie das Moodboard verwenden, das Sie in derselben Aufgabe erstellt haben. Ich würde jedoch empfehlen, dieses zu verwenden dieses Stellen wir uns vor, dass wir dieses Moodboard bereits mit dem Kunden vereinbart haben dieses Moodboard bereits mit dem Kunden vereinbart Schauen wir uns diese Beispiele an und wir können anfangen, Abschnitte und Elemente zu erkennen, die Das werden wir als Heldenbereich verwenden. Mir gefällt, wie sich das Grün vom Bild im Hintergrund abhebt Ich mag auch diese Kartenlayouts, ähnlich wie diese. Von hier aus gefällt mir dieser Abschnitt sehr gut, ähnlich dem, was wir bereits in der Remix-Übung gemacht haben Mir gefallen diese Testimonial-Karten auch sehr gut und ich liebe die blaue Farbe, also werden wir vielleicht diese verwenden Es ist ein schönes, leuchtendes Blau und sieht auf einem Bild großartig aus. Außerdem passt es wirklich zum Thema Teamzusammenarbeit. Unternehmen, insbesondere größere wie Blue. Blau ist eine hervorragende Farbe , weil es für Sauberkeit, Transparenz und gutes Verhalten steht . Aber natürlich müssen sie gute Blautöne haben, weil es einige gibt, die schlecht sind Hier gefallen mir die geteilten Bereiche und mir gefällt auch, wie Benutzeroberflächenelemente in die Fotografie integriert sind , um den Fotos mehr Leben einzuhauchen Ich habe auch diese Fußzeile hinzugefügt. Ich mag diesen dunklen Stil, also werde ich einen dunklen Footer wie diesen machen Ein Moodboard mit Figma zu teilen ist sehr einfach. Figma ist ein großartiges Tool für die Zusammenarbeit, im Gegensatz zu anderen Tools wie Sketch oder Photoshop die die Verwendung von Apps von Drittanbietern erfordern Die Zusammenarbeit mit Figma ist integriert. Hier erfahren Sie, wie. In der oberen rechten Ecke befindet sich die Schaltfläche „Teilen“. Stellen Sie sicher, dass der Zugriff über öffentliche Links aktiviert ist, da sie die Datei sonst nicht sehen können, und klicken Sie dann auf Kopieren. Dann teilen Sie diese Datei einfach mit Ihren Kunden. Sie werden nichts bearbeiten oder damit anfangen können , außer zu kommentieren Dies ist jedoch eine gute Möglichkeit, das Moodboard, das Sie ihnen zeigen wollten, mit anderen zu teilen das Moodboard, das Sie ihnen zeigen wollten, mit anderen zu Sie können sie bitten, bestimmte Dinge zu kommentieren , die sie mögen und bestimmte Dinge, die sie nicht mögen Hier ist ein kleiner Trick. Öffnen Sie ein Inkognito-Fenster im Browser und fügen Sie Ihre Links dort ein. Sie können sicherstellen, dass sie auf die Datei zugreifen können, und sehen, was sie damit machen können Ich hasse es, wenn ich etwas mit jemandem teile und er mir sagt, dass er es nicht sehen kann Das ist einfach eine schlechte Benutzererfahrung und ich schäme mich, wenn das passiert Als Webdesigner muss eine gute Benutzererfahrung zu unserem Lebensstil werden. Wir sollten unser Bestes geben, um sicherzustellen , dass Kunden, Teamkollegen und natürlich Benutzer mit allem, und natürlich Benutzer was wir teilen oder erstellen, eine gute Erfahrung was wir teilen oder erstellen, Denn wenn nicht gefragt, wer dann? es im Inkognito-Browser überprüfen, können Sie es genau so sehen, wie sie es sehen würden Denn wenn Sie es einfach in Ihren normalen Browser einfügen , in dem Sie in Figma angemeldet sind, sehen Sie nur Ihre eigene Okay, sie können das Board sehen und von diesem Menü aus auf andere Seiten in der Datei zugreifen Sie können jedoch keine Kommentare abgeben es sei denn, sie melden sich an oder registrieren sich. Und wenn sie angemeldet sind, erhalten sie diese Art von Ansicht. Das sieht genauso aus wie eine normale Ansicht. Sie können alle Seiten und Ebenen auf der linken Seite sehen. Die Kommentarfunktion ist sehr praktisch, wenn Sie mit Projekten arbeiten Um einen Kommentar abzugeben, müssen wir auf diese Option zum Anzeigen von Kommentaren klicken diese Option zum Anzeigen von Kommentaren Sie werden sehen, dass sich der Mauszeiger in diesen kleinen Ballon verwandelt. Wir können an einer beliebigen Stelle auf einer Seite einen Kommentar hinterlassen. Wenn Sie also ein Moodboard mit Ihren Kunden teilen, weisen Sie sie an, wie sie Kommentare abgeben können, und holen Sie sich ihr Feedback zu den Sie können dir sagen, welche Sterne sie mögen. Kommentieren bestimmter Teile anstelle der gesamten Screenshots In Ihrer Ansicht werden Sie sehen, diese Kommentare sofort widerspiegeln Aktiviere einfach die Kommentaroption, sie werden sogar auf der rechten Seite angezeigt. Nach diesem Video gibt es keine Aufgabe da Sie genau dasselbe Moodboard verwenden werden Sie finden dies in derselben Datei, in der sich die Projektbeschreibung befand Es ist nur auf einer anderen Seite. Als Nächstes werden wir Drahtgitter erstellen. Bleib hier. 97. Kundenprojekt: bevor ich meinen Designprozess heruntergefahren haben könnte. Ich hatte oft mit Designs zu kämpfen. Das Problem war, ich hatte keinen Inhalt zu entwerfen. Sie können nicht wirklich eine richtige Schriftart wählen. Wenn Sie die Steuer nicht kennen, mit der sie gehen wird, können Sie einen Leistungsabschnitt entwerfen. Wenn Sie nicht wissen, was die Vorteile sind, können Sie das richtige Foto auswählen. Wenn Sie nicht wissen, was die Steuer daneben ist. Sie können eine Teamseite entwerfen, wenn Sie nicht wissen, wie viele Teammitglieder es gibt. Eine Teamseite mit 55 Teammitgliedern wird sehr anders aussehen als eine Seite, die nur drei Teammitglieder mit wirklich langer Biografie hat . Es ist an einem Punkt, an dem ich mit dieser erstaunlichen Agentur aus Australien zusammengearbeitet habe. Im Gegensatz zu mir hatten sie einen richtigen Designprozess. Die erste App bestand darin, den Inhalt von einer Seite aufzuschreiben, bevor er irgendwelche Entwürfe machte. Arbeit mit ihnen brachte mich in die Gewohnheit, den Inhalt zuerst zu schreiben, und ich erkannte, wie sehr ich mich selbst folterte, indem ich versuchte, ein leeres Stück Seite zu entwerfen. Sobald Sie den Inhalt haben, werden Designentscheidungen offensichtlich und sie kommen leicht zu Ihnen. Jetzt. Abrufen von Inhalten vom Client ist nicht sehr unkompliziert. Die meiste Zeit haben sie keine Erfahrung, die Kopie von der Seite direkt dort zu schreiben. Keine Texter. Sie sind keine Designer. Sie hatten nicht viel Erfahrung damit, so dass sie nicht richtig wissen. Und was ist der beste Weg, um eine Seite oder eine Website zu strukturieren, und sie brauchen unsere Hilfe dafür. Viele Designer tun dies nicht, und sie geben die heiße Kartoffel an den Kunden weiter, und offensichtlich wird der Kunde kommen. Wer wird mit einem Inhalt zurückkommen, der nicht sehr optimal für eine Seite ist, und Endergebnis aus dem Design wird nicht so gut sein, was bedeutet. Der Kunde wird nicht die besten Ergebnisse erzielen, und sie werden nicht für mehr Geschäft an den Designer zurückkehren. Verlieren Sie Situation für beide Seiten verlieren. Also schlage ich vor, dass wir Inhalte für unsere Kunden schreiben sollten? Na ja, irgendwie. Aber nicht wirklich. Hier kommen Drahtrahmen ins Spiel. Generieren von Inhalten für mich ist Teil der Drahtrahmen-Phase. Hier ist, was ich tue, ist, dass ich anfangen, Drahtrahmen zu erstellen. Ich fange an, über die Struktur des Inhalts nachzudenken und zu versuchen, die Seite in der bestmöglichen Weise zu entwurzeln , basierend auf dem Ziel, dass bestimmte Seite schlagen Homepage oder eine andere Ausleihseite oder was auch immer es jetzt ist, dass Text Blöcke auf der Seite, beginne ich, diese Steuerblöcke mit Beispieltext mit etwas auszufüllen, das meiner Meinung nach für diesen bestimmten Abschnitt nützlich sein könnte . Ich bin nicht wirklich ein Kooperator, und Englisch ist nicht einmal meine erste Sprache, aber ich schreibe immer noch Inhalte so weit wie möglich auf. Wenn du Englisch bist, ist nicht sehr gut, mach dir keine Sorgen darüber. Das ist kein Problem, weil du nicht hart für deine Englischkenntnisse warst. Du bist für Design angeheuert. Sei einfach im Vordergrund mit deinem Kunden und erkläre ihn. Was auch immer Sie setzen, es gibt Ihr Beispiel und Vorschläge, um ihnen zu helfen, und sie sollten ihre eigenen Inhalte schreiben. Und was es auch tun kann, ist, dass Sie diese Kopie nicht schreiben müssen. Sie können sie von anderen Websites ausleihen und kopieren. Also während Ihrer Inspirationsphase, Sie ging wahrscheinlich durch verschiedene Websites und fand einige Beispiele, die von einem ähnlichen Start-ups oder ähnlichen Unternehmen sind , richtig, so dass Sie die Steuer von dort greifen und kopieren und einfügen Sie sie, dass. Aber stellen Sie immer sicher, zu erklären, dass Sie keine Inhalte für sie schreiben, so dass Sie nicht für diesen Inhalt urteilen, dass Sie dieses Beispiel von anderen Websites und vielleicht sogar Konkurrenten sammeln . Und wenn Sie ein wenig Recht haben und erwägen, ein Copyright in Kurs zu nehmen, so können Sie das zu Ihren Diensten hinzufügen. Kunden werden Sie lieben, wenn Sie diesen Teil von ihren Händen nehmen. Du wirst mehr Geld verdienen, gewinnen. Und nachdem ich mit Drahtrahmen fertig bin, teilte ich mich mit meinem Kunden und bat sie, den Inhalt neu zu schreiben und alles zu entfernen, wenn sie wollen, und füllte ihn in ihren eigenen Stationen aus. Ein Layout bereits mit Vorfeld-Inhalt macht es ihnen einfacher. Teoh, Recht auf diese Kopie. Denn sonst ist es dann sehr schwierig für ihn zu verstehen, was ich dort gemeint habe und was der Zweck der Zerstörung sein würde, vielleicht, und diese Spalten und was sie darin schreiben sollten. Aber wenn ich ihnen Beispiele gebe, dann bekommen sie die Idee und sie können leicht mit etwas von ihrem eigenen herauskommen. Ich vermeide es, Lauren Gibson und Dummy Text so viel wie möglich zu verwenden Aber manchmal müssen wir , und wir können es nicht vermeiden, weil manchmal muss ich eine Seite für oder eine Website für eine komplizierte Finanzdienstleistungen erstellen dass ich keine Ahnung habe, wie ich beschreiben soll. Also in diesem Fall werde ich Dummy-Steuer verwenden oder vielleicht jemandes Biographien oder Zeugnisse oder so etwas. Es hat keinen Sinn, dass ich mit irgendetwas ausfülle und meine Zeit auf seiner rechten Seite verschwende. Wir werden Dummy-Text verwenden. Ein weiterer großer Grund, warum Drahtrahmen zu verwenden, ist aufgrund von Bestimmungen, da Revisionen Teil eines jeden Entwurfsprozesses sind. Und wenn die Revisionen direkt in der während des Designgesichts stattfinden, dann werden Sie viel mehr Zeit in Anspruch nehmen, denn dann denken Sie über Farben nach und machen alles Pixel perfekt und verschwenden viel Zeit für etwas, das Sie haben irgendwie schon entworfen und irgendwie Ihr ah, Ego daran befestigt. Denn These, was oft mit Designern passiert, weil was auch immer Arbeit, die wir produzieren, wir fühlen uns irgendwie verbunden mit dieser Arbeit. Aber wenn Sie Drahtrahmen machen, sind Sie nicht daran befestigt. Sie sind nur hässliche Skelett aussehende Doodles, und wir können sie einfach wechseln. hässliche Skelett aussehende Doodles, Revisionen sind einfacher ist da und Sie wissen, dass niemand Gefühle verletzt werden. Dies ist ein Drahtrahmen von einem meiner Kundenprojekte. Wie Sie sehen können, ist es frei von Designhalsbändern und ist sehr rau. Hat keine Bilder oder Symbole. Ich machte diese Website für einen Roller Sharing-App. Lass uns das schnell durchgehen, damit du verstehen kannst, warum ich es getan habe. Und was war mein Denkprozess. Die Navigationsleiste ist ziemlich einfach. Ich habe nicht mal ein Tief dahin gelegt. Nur eine Besteuerung. Es ist ein Logo. Anstelle eines Heldenbildes gibt es einen Bildplatzhalter, und das ist alles. In diesem Stadium. Ich habe nicht entschieden, was der Held sein würde, und das ist auch nicht relevant. Obwohl ich mich für das Layout entschieden habe, wollte ich einen Helden auf der rechten Seite und Inhalt auf der linken Seite haben. Wenn ich wollte ein Held einen Hintergrund, dass ich es als Hintergrund Stretching Kante zum Schraffieren auf dem nächsten Abschnitt setzen würde , Ich entschied mich, drei Spalten Inhalt zu haben, um zu beschreiben, wie das Produkt funktioniert in drei Schritten nicht viel entworfen, aber Layout ist klar, und ich habe auch die Entscheidung getroffen, dass, wie es funktioniert ein wichtiger Abschnitt war, direkt nach dem Helden zu haben . Ich habe den Inhalt selbst ausgefüllt manchmal die Steuern von den Konkurrenten wiederverwendet. Ein wichtiger Teil ist es, Beispielsteuer an den Kunden zu geben, so dass sie klicken und beginnen sofort zu schreiben, ohne viel Nachforschungen. Als nächstes erstellt einen Abschnitt mit einer kleinen Demonstration aus der APP mit etwas Vorteil. Aber lassen Sie uns auf der Seite auf diesem Abschnitt tatsächlich hatte bereits eine ziemlich gute Vorstellung davon, wie würde der Abschnitt entwerfen. Ich wollte die App präsentieren und ihnen die App in Aktion zeigen. Also plane ich, ein Video-Geschenk-Animation von der App verwendet ein wenig mehr Präsentation und Vorteile des Produkts, wie kostenlose Parkversicherung und so weiter. Dann hatte ich eine Preisgestaltung und Zeugnis Abschnitte ziemlich unkompliziert, und schließlich haben wir Aufruf zu Action Abschnitt, und das Essen oder Schließen Seiten, vor allem Homepages mit kalt zu Aktion Abschnitt, ist eine gute Idee. Sie möchten Benutzer auffordern, etwas zu tun, nachdem sie ein Produkt oder eine Dienstleistung kennen gelernt haben, die Sie nicht hängen lassen möchten. Ihr Hinweis ist nicht zu wissen, was als nächstes zu tun ist. Sie könnten sie verlieren, also Nachdem ich mit ihren Feuerrahmen fertig war, teilte ich es mit einem Kunden und gab ihnen Erklärung aus jedem Abschnitt und den Denkprozess hinter meinen Entscheidungen. Und so sah das endgültige Design aus. Sie können sehen, wie das Layout und der Inhalt identisch sind, aber es ist irgendwie so, als ob es eingefärbt wurde. Das sind also die Gründe für die Verwendung von Drahtrahmen in Ihrem Konstruktionsprozess. Verwenden Sie sie, bevor Sie zu entwerfen Thank me später. 98. Figma-Stile: Wir erstellen Wireframes. Ich werde Ihnen zwei Funktionen von Figma beibringen , die wir noch nicht behandelt haben Wir werden sie benötigen, um unsere Wireframes zu erstellen. Dies sind Stile und Komponenten. In diesem Video werden wir uns mit Stilen befassen. Du weißt, wie wir in WPL Klassen und Tags stylen können. Ähnliches können wir auch in Figma machen. Nehmen wir zum Beispiel eine Überschrift und gestalten sie. Unter diesen Punkten haben wir die Option für Textilien. Wenn wir auf das Plus-Symbol klicken, wird aus dem aktuell ausgewählten Text ein neues Textil erstellt . Wir können es H one nennen, ähnlich wie wir es im Webflow tun , wenn wir O H-One-Texte stylen. Jetzt können wir jeden anderen Text nehmen und H One Style darauf anwenden. In der Eigenschaften-Deaktivierung werden Sie feststellen, dass viele Bearbeitungsoptionen deaktiviert sind, wie z. B. die Telefongröße, die Zeilenhöhe und andere, die nicht mehr verfügbar sind Aber wir haben immer noch Dinge wie Füllfarbe und Textausrichtung Sie werden nicht Teil des Textils und können daher jederzeit bearbeitet werden. Das Textil selbst wird dadurch nicht beeinträchtigt. Es wird nur auf diesen Fall angewendet. Wenn das Webflow wäre, könnten wir das nicht tun. Alles wäre editierbar und würde sich auf allen Instanzen mit demselben Tag oder derselben Klasse widerspiegeln allen Instanzen mit demselben Tag oder derselben Klasse Bei Interface-Designern wie Figma ist dieses Verhalten sinnvoller Um einen Stil zu bearbeiten, klicken Sie darauf und gehen Sie dann zum Bearbeitungsstil Wir haben die Möglichkeit, den Stil von hier aus zu bearbeiten. Sie können ändern, was Sie möchten, und Sie werden die Änderungen am Stil sehen, die sich sofort auf alle Instanzen auswirken. Das scheint nicht viel zu sein, aber wenn Sie mehrere Seiten mit mehreren Überschriften auf jeder Seite haben , dann werden Sie feststellen, wie umfangreich das ist. Wir haben auch die Möglichkeit , den Stil zu trennen. diese Weise können Sie alle Texteigenschaften und alle zukünftigen Änderungen am Originaltextil bearbeiten zukünftigen Änderungen am Originaltextil Das wird sich nicht auf die zweite Überschrift auswirken , da sie jetzt losgelöst von diesem Textil ist. Wenn Sie den Stil löschen möchten, ist das nicht sehr offensichtlich, aber wenn Sie mit der rechten Maustaste darauf klicken, erhalten Sie eine Option zum Löschen. Textilien sind nicht das einzige, was wir in FiCma haben. Fast jede andere Eigenschaft im Panel kann diese globalen Stile haben Füllung, Kontur, Effekte und sogar das Raster. Am zweitnützlichsten sind immer die Farbstile. Von derselben Stelle aus können Sie einen neuen Farbstil hinzufügen. Genau wie Textilien kann es auf alle anderen Elemente mit Farbeigenschaften angewendet werden . Es spielt keine Rolle, ob es sich um Text oder Rechteck handelt. Genau wie bei Textilien sind Farbstile groß. ändere ich oft mehrmals die Farbe Beim Entwerfen einer Website ändere ich oft mehrmals die Farbe. Ich bin sehr wählerisch mit Farben und kann meine Meinung leicht ändern. Gott segne die Farbstile. Das sind die Stile in Figma. Gilt für fast alles, f, co, Text, Layout, g. Als Nächstes werden wir uns mit Komponenten befassen. Bleib hier. 99. Figma-Komponenten: Lass uns einen Button erstellen. Wenn wir nun diese Schaltfläche auswählen und auf diese Komponente in der Werkzeugleiste klicken, wird diese Schaltfläche zu einer Komponente. Diese können wir in unserer gesamten Datei wiederverwenden und sie jederzeit aus dem Asset-Tab ziehen. Die Komponenten in Figma sind die Gruppe von Elementen. Mit Stilen schaffen wir diese globale Verbindung für einen bestimmten Stil Aber mit Komponenten können wir eine globale Verbindung für mehrere Stile und für jedes einzelne Objekt innerhalb dieser Komponente herstellen mehrere Stile und für . Die ursprüngliche Schaltfläche wird als Master-Komponente bezeichnet, und die Schaltfläche, die wir gerade gezogen haben, wird als Instanz bezeichnet Die Änderungen, die wir am Master vornehmen, wirken sich auf jede einzelne Instanz aus Aber jede Instanz kann die Stile für sich selbst überschreiben. Die Änderungen werden sich jedoch nicht auf den Master oder eine andere Instanz auswirken. Sie kennen Kombi-Klassen in Weblo. Genau wie bei Kombi-Klassen wirken sich neue Änderungen am Master nur auf die Stile aus, die nicht überschrieben wurden Bei der ersten Instanz wurde die Farbe genau wie beim Master auf Grün geändert , den anderen beiden unten jedoch nicht Warum? Weil wir bei den beiden unten die Hintergrundfüllung der Schaltfläche überschrieben haben, aber bei der ersten haben wir sie nicht berührt Sie erbt immer noch von der Master-Komponente, bis wir sie überschreiben In genau den Combo-Klassen in We Low werden andere Stile, die wir nicht berührt und nicht überschrieben haben, trotzdem vom Master vererbt Zum Beispiel, wenn wir die Ecken der Schaltfläche abrunden. Ein großer Unterschied zwischen Klassen in Waffle und Komponenten in Figma besteht darin, dass Klassen keine anderen Elemente enthalten Wenn du zum Beispiel eine Klasse für einen Heldenbereich erstellst und darin Überschriften, Buttons und Bilder einfügst, sind diese Elemente nicht Teil der In Figma-Komponenten sind sie es jedoch. Wenn ich ein Objekt aus der Master-Komponente lösche, wird es von überall gelöscht Wenn ich ein neues Objekt im Master hätte, würde das jede andere Instanz widerspiegeln. Es gibt Dinge, die Sie in der Instanz nicht überschreiben können. Zum Beispiel, woraus auch immer die Komponente besteht. Sie können innerhalb der Instanz neue Ebenen entfernen oder hinzufügen. Ich kann dieses Rechteck in die Instanz ziehen , das lässt mich nicht. Entweder kann ich eine vorhandene Ebene aus der Komponente entfernen. Wenn ich bei einer der Zutaten auf Löschen drücke, verschwindet sie zwar, aber sie ist eigentlich nur ausgeblendet, und das können Sie im Ebenenbedienfeld sehen. Die Ebene ist immer noch da, sie ist nur versteckt. Wenn ich will, kann ich es von hier aus zeigen. Eine weitere Sache, die wir nicht außer Kraft setzen können, sind strukturelle Veränderungen wie Größen oder die Position der Schichten innerhalb des Bauteils. Wie Sie sehen können, gibt es bei der Auswahl des Rechtecks keine Ziehpunkte zur Größenänderung. Das kann ich nicht ändern. Wir sind jedoch in der Lage, die Größe der gesamten Komponente zu ändern. Die Größenänderung des Rechtecks ist nicht möglich, aber die Größenänderung der gesamten Komponente können wir tun. Wenn ich die Größe der Master-Komponente ändere, wird sie nicht automatisch auf die blaue Schaltfläche übertragen, da sie dadurch überschrieben wird. Aber das gilt nur für die volle Komponentengröße. Wenn ich die Größe des Rechtecks selbst ändere, ist dieser blaue Knopf jetzt hilflos und wir müssen ihm gehorchen Ich kann auch nicht die Position des Textes innerhalb der Instanz ändern des Textes innerhalb der Instanz Es gibt keine Möglichkeit für mich, es zu bewegen. nun Dinge angeht, die wir überschreiben können, können wir die Stile jedes Elements überschreiben , was auch immer sie sein mögen. Wir können die Größe der gesamten Komponente überschreiben, wie ich bereits erwähnt habe, und wir können den Inhalt überschreiben. Auch hier gilt: Wenn wir es überschreiben, alle Änderungen, die wir an der Masterkomponente vornehmen nicht übernommen. Wie Sie sehen können, haben die anderen beiden Schaltflächen ihren Text sofort aktualisiert, die blaue Schaltfläche jedoch nicht. Wir sind auch in der Lage, Instanzen von ihrer Komponente zu trennen. Das können Sie von hier aus tun. Sobald es gelöst ist, ist es kein Bestandteil mehr und es handelt sich um völlig freie und unabhängige Schichten. Eine weitere Möglichkeit, Instanzen zu verwenden , ist, die Änderungen, die wir an ihnen vorgenommen haben, zurückzusetzen. Diese Option setzt jede einzelne Änderung, die wir an der Instanz vorgenommen haben , zurück und erbt alles vom Master Wir haben auch die Möglichkeit, nur bestimmte Eigenschaften zurückzusetzen Wenn wir das Rechteck auswählen und erneut zur Option „Zurücksetzen“ wechseln, der Dropdownliste alle Stile hervorgehoben, die überschrieben wurden, und wir können sie unabhängig voneinander zurücksetzen Zum Beispiel können wir die Hintergrundfüllung zurücksetzen oder wir können alle Überschreibungen auf dem Rechteck zurücksetzen, oder wir können alle Überschreibungen auf dem Rechteck zurücksetzen ohne Änderungen zu berühren, die am Text in der Schaltfläche vorgenommen wurden zu berühren, die am Text in der Schaltfläche vorgenommen wurden Wenn Sie sich das Player-Bedienfeld genauer ansehen, werden Sie feststellen, dass die Master-Komponente dieses Diamantsymbol mit vier Quadraten und die Instanz dieses einzelne Diamantsymbol hat. Um die Master-Komponente zu finden, können Sie eine beliebige Instanz auswählen und im Eigenschaftenfenster auf Gehe zur Hauptkomponente klicken . Dies funktioniert auch, wenn sich die Komponente auf einer anderen Seite befindet, aber nicht, wenn sie sich in einer anderen Datei befindet. Eine Komponente ist Teil einzelner Dateien. Um eine Komponente hinzuzufügen, können Sie sie entweder aus einem Asset-Panel ziehen oder einfach entweder einen Master oder eine Instanz kopieren und einfügen. Wenn Sie beispielsweise eine neue Komponente erstellen möchten, z. B. eine primäre Schaltfläche und eine sekundäre Schaltfläche. Trennen Sie zunächst die Instanz und klicken Sie dann auf Neue Komponente erstellen Wenn Sie stattdessen in einer Live-Instanz auf Komponente erstellen klicken, wird lediglich eine neue Komponente innerhalb der Instanz als Teil der Instanz erstellt eine neue Komponente innerhalb der Instanz als Teil der Instanz Das wird komisch, also stellen Sie sicher, dass Sie es zuerst trennen. Das ist alles für den Moment. Mit etwas Übung werden Sie mit den Komponenten abhängen, und wir werden diese Übung in den kommenden Videos mit dem Drahtrahmen beginnen in den kommenden Videos mit dem Drahtrahmen 100. Wireframe-Kit: Es gibt verschiedene Möglichkeiten, Wireframes zu erstellen. Es gibt Anwendungen von Drittanbietern, die Wireframes wie Balsamico-Mockups und Whimsical erstellen Wireframes wie Balsamico-Mockups und Whimsical Manche Designer verwenden einfach Stift und Papier und skizzieren die Wireframes auf diese Weise. Ich mache das, aber nur für meinen Brainstorming-Prozess, ich teile ihn nicht mit Das beste Tool für uns ist immer noch Figma. Das benutze ich heutzutage. Es ist einfach einfacher, dort Drahtrahmen zu erstellen und sie mit dem Kunden zu teilen Der Teil der Zusammenarbeit und das Kommentieren machen es ihnen leicht , Kommentare abzugeben Außerdem können sie den Zugriff auf die Datei mit unseren Kunden teilen , und sie können den Inhalt direkt in Figma ausfüllen Der beste Weg, Wireframes in Figma zu erstellen , ist die Verwendung von Wireframe-Kits, die vorgefertigte, gebrauchsfertige Komponentenbibliotheken sind gebrauchsfertige Komponentenbibliotheken Wir können sie direkt aus dem Komponentenfenster ziehen und dann auf die Seite legen und quasi damit beginnen, die gesamte Seite wie eine Lego-Struktur zu erstellen . Es gibt viele Wireframe-Kits, die online oft kostenlos erhältlich sind. Aber ich war nicht sehr zufrieden mit dem, was ich gefunden habe. Deshalb habe ich beschlossen, eines für Sie zu erstellen, ein einfaches und benutzerfreundliches Kit, das auf dem basiert, was ich selbst verwende. Und Sie können dieses Wireframe-Kit zu Ihrem eigenen machen und es in Ihren zukünftigen Projekten für sich selbst verwenden So funktioniert dieses Kit. Aus dem Asset-Panel ziehen wir vorgefertigte Komponenten , die wir benötigen. Sie sind im Asset-Panel so organisiert . Wir haben Knöpfe. Wir haben Eingaben wie verschiedene Arten von Formularfeldern, und wir haben Platzhalter wie einen Avatar, und wir werden unseren Drahtrahmen mit diesen Komponenten erstellen Neben diesen Elementen habe ich auch Symbole hinzugefügt. Dies sind kostenlose Materialdesign-Symbole von Google. Sie sind auch Figma-Komponenten. Sie können sie ziehen, Farben ändern und so weiter. Das Assets-Bedienfeld verfügt über die Suchoption, was sehr praktisch ist. Dadurch werden alle Komponenten in der Datei durchsucht , einschließlich der Symbole, da es sich auch um reguläre Komponenten handelt. Ich habe auch Text - und Farbstile erstellt. Wenn wir zum Beispiel eine Überschrift für unseren Heldenbereich benötigen eine Überschrift für unseren Heldenbereich , fügen wir wie gewohnt eine neue hinzu und wählen aus den Textilien den einen oder anderen Überschriftenstil aus. Wenn wir einen Absatz benötigen, fügen wir erneut einen neuen Text und wählen stattdessen einen Absatzstil. Ich habe auch einen Farbstil hinzugefügt, sodass wir etwas sofort farbig gestalten können sodass wir etwas sofort farbig gestalten können, ohne dass wir uns Gedanken darüber machen müssen, es auszuprobieren und uns verschiedene Farbversionen einfallen zu lassen. In erster Linie werden wir dieses schwarze S und die Phrase verwenden. Das ist eine schöne neutrale Farbpalette , die sich hervorragend für Wireframes Ich mag Drahtrahmen , die verblasst aussehen und bewusst so aussehen, als ob ihnen Farbe fehlt, wie ein Malbuch Damit die Kunden verstehen , dass dies kein Design ist. Apropos, wenn Sie Wireframes mit Ihren Kunden teilen, stellen Sie sicher, dass Sie Ihren Prozess erklären und erklären, was Wireframes Oft wissen sie nicht, was Drahtgitter sind. Ich hatte einmal einen Moment, in dem einer meiner Kunden dachte, dass es sich bei diesen Drahtgittern um endgültige Designs handelte, und er war damit nicht sehr zufrieden, wenn Sie sich das vorstellen können. Die Hauptkomponenten und Stile, die ich erstellt habe, können Sie auf der Wireframe-Kit-Seite sehen Wenn Sie Bearbeitungen und Änderungen vornehmen möchten, können Sie diese Master-Instanzen von hier Sie können auch weitere Komponenten erstellen und hinzufügen, wenn Sie möchten Machen Sie sich dieses Wireframe-Kit zu eigen und nutzen Sie es als Vorlage für Ihre zukünftigen Projekte Es wird Ihre Wire-Framing-Phase reibungslos und schnell machen. Eine Anmerkung zu Symbolen. Wenn die Suche über das Assets-Bedienfeld keine Ergebnisse liefert, schauen Sie hier nach, was verfügbar ist. Die Namen dieser Symbole sind möglicherweise nicht so intuitiv. Dieses Papierkorbsymbol heißt beispielsweise Löschen, und die Suche nach dem Papierkorb bringt keine Ergebnisse Öffnen Sie diese Wireframe-Kit-Datei und stellen Sie sicher , dass Sie die Kopie einer Datei in Ihrem Konto haben Jetzt sind wir bereit, mit dem Wireframing zu beginnen. Wir werden im kommenden Video darauf eingehen. Bleib hier. 101. Wireframes – Startseite Teil 1: In diesem Video werden wir damit beginnen, Wireframes für unsere Tam-Kollaborationshomepage zu erstellen Wireframes für unsere in der Wireframe-Kit-Datei eine neue Seite, Erstellen Sie in der Wireframe-Kit-Datei eine neue Seite, indem Sie auf das Plus-Symbol klicken und sie das Plus-Symbol Wir werden auf die übliche Weise einen Rahmen und das Raster hinzufügen übliche Weise Desktop-Rahmen und unser übliches 12-Punkte-Raster. wir nun wissen, wie man Stile erstellt, speichern wir diesen großartigen Stil für spätere Verwendung in diesem Projekt, weil wir das können Warum also jetzt, wir sparen uns später Zeit. Damit wir uns ein paar Ideen einfallen lassen welchen Inhalt und welches Layout wir haben sollten. Schauen wir uns unsere Projektbeschreibung und das Moodboard an. Projektbeschreibung geht es um das Ziel und die wichtigsten Details des Projekts, und bei und die wichtigsten Details des Projekts, Moodboard haben wir ein Erscheinungsbild, das wir bereits mit unserem imaginären Kunden vereinbart Die Website wird also dem Beutestandard entsprechen, aber das Hauptziel ist es, Early-Access-Anmeldungen zu erhalten Das wird unser Aufruf zum Handeln sein. Wir wissen, dass es eine Sperrung geben wird , und wir brauchen auch einen Ort die Leute einen Newsletter abonnieren können. Schauen wir uns jetzt das Moodboard an. S. Aus dem Briefing wissen wir, dass der Kunde eine Website wünscht, die mehr auf Fotografie als auf Illustrationen basiert Ich denke also, dass dieser Ansatz mit Hintergrundfotos ihnen gefallen wird und für unsere Zielgruppe ein guter Ansatz ist ihnen gefallen wird und . Wir könnten ein Foto finden, mit dem sich das Publikum identifizieren kann, sodass es sich selbst darin wiedererkennen kann , und das wird uns helfen, mit dem Publikum in Kontakt zu treten. Lassen Sie uns auf dieser Grundlage die Helden-Sektion in einem Wireframe zusammenfassen. Wir brauchen ein Hintergrundfoto, kein echtes Foto, sondern nur einen Suchen Sie ein Bildelement und ziehen Sie es auf die Leinwand. Und ändern Sie dann die Größe, um es an den Vollbildmodus anzupassen. Nehmen Sie eine Höhe von etwa 800 Pixeln an, das ist normalerweise eine ordentliche Größe für den Heldenbereich Jetzt brauchen wir eine Navigationsleiste, ein Logo auf der linken Seite und die Links auf der rechten Seite. Ziemlich einfach. Lassen Sie uns den Stil der vierten Überschrift für das Logo verwenden. Der Linkstil für die Links und sekundäre Schaltfläche für den Aufruf zum Handeln in der Na-Leiste. Ich werde die Größe der Schaltfläche ändern, um sie zu verkleinern , da wir für normale Schaltflächen eine normale Größe verwenden werden Mm. So weit, so gut. Nun zur Überschrift und zur Zwischenüberschrift. Wir wählen eine Überschrift mit einem Stil und wählen die schwarze Farbe aus dem Wireframe-Kit Es ist eine gute Idee, sich bei der Erstellung von Wireframes an diese neutrale graue Farbpalette zu halten Erstellung von Wireframes an diese neutrale graue Farbpalette Ich mag diese Palette wirklich, ich habe sie sogar aus einem Drahtgitterwerkzeug gestohlen , das ich in der Vergangenheit verwendet habe Sie sich zusätzlich zu Schwarz und Grau Halten Sie sich zusätzlich zu Schwarz und Grau an eine Grundfarbe aus diesen Optionen, oder wählen Sie Ihre eigene Primärfarbe wenn Sie möchten, aber bleiben Wenn Sie die Primärfarbe von Schaltflächen ändern möchten, das Ändern der Feldfarbe die gesamte Komponente nicht funktioniert das Ändern der Feldfarbe für die gesamte Komponente nicht, da sie gemischten Inhalt hat Das Rechteck ist blau, aber der Text ist weiß, sodass Sie nur das Rechteck ändern müssen. Die Batter-Option besteht jedoch darin, den Master zu ändern. Deshalb verwenden wir Komponenten. Wählen Sie eine Instanz aus, klicken Sie dann, um zur Hauptkomponente zu gelangen, und wählen Sie dort einfach eine andere Farbe für den Hintergrund dieses Rechtecks. Das Gleiche gilt für die sekundäre Schaltfläche Ändern Sie zwei Farben, eine für den Rand und eine für den Text. In meinem Fall bleibe ich bei dieser ursprünglichen Primärfarbe. In Ordnung, ich habe bereits Inhalte im Kopf. Ich werde die Schlagzeile von diesem Thema stehlen Sofortige Zusammenarbeit für Remote-Teams. Wie ich bereits erwähnt habe, sind wir keine Texter, also müssen wir den Inhalt nicht perfekt gestalten Einfach alles, von dem wir denken, dass es funktioniert und unseren Kunden eine Idee gibt , so wenig Scheintext wie möglich Oder bitten Sie Cad GPT einfach, Inhalte für Sie zu schreiben. Das ist heutzutage eine legitime Sache. Ich mache mir hier nicht allzu viele Gedanken über Entfernungen, aber ich stelle trotzdem sicher, dass es sich um Luftlinien handelt. Jetzt müssen wir die Benutzer dazu drängen, etwas zu tun Unser primäres Ziel ist es, ihre E-Mails für den Early-Access zu erhalten. Dies wird allgemein als Call to Action oder kurz CTA CTA ist entweder ein Formular oder nur eine Schaltfläche. Mal sehen, was unsere Inspirationen in diesem Fall bewirken. Viele von ihnen verwenden ein Formular mit einem einzigen E-Mail-Feld. Ich denke, das sollten wir auch tun. Wir könnten ein Popup-Formular haben, aber wenn es sich um ein kleines Formular handelt, insbesondere mit einem einzelnen Feld, ist es besser, weil es weniger bedrohlich ist Es ist genau da, kein Trigger, sehr transparent, fragt den Benutzer einfach nach einer E-Mail und er sieht, was vor sich geht Da haben Sie es ganz einfach und schnell, wir haben ein Wireframe für unseren Dank dieser Wireframe-Taste nicht so aufwändig und wir mussten keine Zeit mit der Auswahl von Telefonen und Farben verschwenden Auswahl So sollten Sie mit Wireframes arbeiten, über das Layout und den Inhalt nachdenken und sich keine Gedanken über das in Ihren echten Projekten Wenn Sie das Wireframe in Ihren echten Projekten mit Ihren Kunden teilen, können Sie Kommentare zu verschiedenen Abschnitten und verschiedenen Elementen auf Ihrer Seite hinzufügen , um ihnen Ihren Denkprozess zu zeigen Wechseln Sie dazu in den Kommentarmodus, und indem Sie auf eine beliebige Stelle im Frame klicken , können Sie neue Kommentare hinzufügen Kunden lieben es, den Denkprozess zu sehen , den Sie hinter Ihren Entwürfen stecken Denn wenn Sie eine Website erstellen und eine Website für ein Unternehmen entwerfen, geben Sie ihnen nicht nur etwas Schönes zum Spielen, Sie geben ihnen auch eine Lösung für ihr Problem. Oft bieten Sie Lösungen für verschiedene Probleme wie die Generierung von Umsatz oder Traffic, die Schaffung einer Online-Präsenz, Schaffung einer Online-Präsenz guten Marke und eines gewissen Rufs. Eine Website, die schick und modern aussieht schafft ein ganz bestimmtes Image und einen ganz bestimmten Ruf für dieses Unternehmen schafft. Und Sie müssen zeigen, dass Sie ein tiefes Verständnis für ihre Probleme haben und dass Sie einige mögliche Lösungen gefunden haben. Mit anderen Worten, Sie müssen sie auf Grundlage Ihrer Designs verkaufen. Sie haben den ersten Verkauf getätigt, indem sie davon überzeugt haben, Sie für Ihre Dienste einzustellen. Jetzt tätigen Sie einen weiteren Verkauf. Du bist da noch nicht fertig. Sie machen einen weiteren Verkauf, um ihnen zu zeigen , dass diese Designs , die Sie entworfen haben, großartige Lösungen für die Probleme sind , mit denen sie als Unternehmen konfrontiert sind. Ich möchte nicht irgendein schäbiges Verkaufsargument oder Techniken verwenden Verkaufsargument oder , wenn du deine Designs erklärst Erkläre einfach dich selbst wie ein Designer und wie du über diese Elemente, die du kreiert hast , gedacht hast Zum Beispiel das einzelne E-Mail-Feld , das ich in die Wireframes eingefügt habe, würde ich dem Kunden erklären, ungefähr so Ich schlage vor, ein einziges E-Mail-Feld für den Call to Action und das Abonnement zu verwenden den Call to Action und das Abonnement , anstatt nach Vorname, Nachname usw. zu fragen , weil ein einzelnes E-Mail-Feld Low Commitment für den Benutzer ist Low Commitment für den Benutzer , es ist weniger bedrohlich, und weil es auch sichtbar können wir es anpassen, denn wenn wir nach , es ist weniger bedrohlich, und weil es auch sichtbar ist, können wir es anpassen, denn wenn wir nach verschiedenen Dingen fragen, müssten wir wahrscheinlich ein Popup-Formular einfügen, weil wir dann zu viel Platz beanspruchen würden. Aber indem wir das Feld anzeigen, ist ein E-Mail-Feld sichtbar, wir zeigen, dass wir transparent sind. Das ist das einzige, worum wir in diesem Schritt momentan bitten, und dieser Austausch mit geringen Verpflichtungen wird die allgemeine Abonnementrate erhöhen. Und das ist alles. Nun, wenn wir das nicht getan und unseren Denkprozess nicht erklärt hätten, stehen die Chancen gut, dass sie die Gründe für eine Füllung nicht kennen, weil sie keine Designer sind Sie haben keine Websites erstellt und denken aus der Sicht des Geschäftsinhabers und nicht aus der Sicht des Benutzers, oder? Sie werden also denken, warte, ich hätte gerne mehr Informationen über die Nutzer. Ich würde gerne ihre E-Mail-Adresse, Telefonnummer, Sozialversicherungsnummer, Kreditkartendaten usw. wissen . Nun, da Sie nicht all diese Felder eingegeben haben, sondern nur die E-Mail-Adresse eingegeben haben, haben sie das Gefühl, dass Sie fahrlässig handeln, oder vielleicht haben Sie einfach nicht verstanden, oder vielleicht haben Sie einfach nicht verstanden geschäftlichen Herausforderungen sie haben und was sie von dem Unternehmen erwarten Sie werden also das Gefühl haben, dass Sie sie einfach nicht verstehen und keine guten Lösungen für ihr Geschäft anbieten Es ist also unsere Aufgabe als Designer, unsere Kunden über solche Themen aufzuklären Aber Sie können Ihre Kunden nicht informieren wenn Sie sich nicht zuerst selbst weiterbilden. Als externe Lektüre würde ich Ihnen empfehlen, Blogs und Newsletter zu abonnieren , in denen Informationen und neueste Forschungsergebnisse und alles Neue veröffentlicht werden, hauptsächlich zu Themen wie Design oder Benutzererfahrung und solche Dinge. Die Nielsen Norman Group ist ein solcher Ort, Nielsen Norman Group ist den Sie abonnieren könnten. Sie veröffentlichen häufig Artikel zu Themen wie Design oder Benutzererfahrung und solche Dinge. Die Nielsen Norman Group ist ein solcher Ort, den Sie abonnieren könnten. Sie veröffentlichen häufig Artikel und Recherchen über Benutzer Themen erleben Auch der Prototyper Dot IO, diesen Newsletter hat , der es beinhaltet, ist nicht so ihr Hauptaugenmerk, aber er beinhaltet auch die Top-Beiträge, Blogbeiträge, in der Regel zu Themen Design und Benutzererfahrung und allem, was mit dem Internet zu tun Wenn Sie Bücher mögen, würde ich empfehlen Don't make me think von Steve Crook zu lesen , ein großartiges Buch über Benutzererfahrungen und Benutzerfreundlichkeit im Internet und auf Mobilgeräten Und noch eines, das Design alltäglicher Dinge von Don Norman Das ist derselbe normannische Typ von der Nielsen Norman Group. Und es geht nicht wirklich um Webdesign, sondern eher um Gegenstände und alltägliche Dinge, die wir im wirklichen Leben verwenden Aber es ist eine gute Einführung in die Reise der Benutzererfahrung und des Verständnisses. Wonach man suchen muss und im Grunde eine Art Philosophie hinter dem Entwerfen von Dingen, Objekten und Gegenständen, das Internet gehört, weil die Leute damit interagieren, und vor allem das Web, weil es normalerweise etwas komplizierter und schwieriger für Menschen zu bedienen ist als normale Gegenstände, die wir in der realen Welt verwenden, wie Fork. Okay. Also zurück zu unseren Wireframes, aber das werden wir im nächsten Video fortsetzen 102. Wireframes – Startseite Teil 2: Wir sind wieder da und machen mit unserem Wireframe Below the Fold weiter. Mal sehen, welche der Inspirationen für unseren nächsten Abschnitt funktionieren könnte Es wäre eine gute Idee, das Produkt anhand einiger Bildschirme zu demonstrieren das Produkt anhand einiger Bildschirme Ein Abschnitt wie dieser könnte funktionieren, wenn sich die Bildschirme auf einer Seite und der Text daneben befinden. Wir könnten einige Inhalte von Slack stehlen. Die Verwendung von Inhalten von Wettbewerbern ist eine gültige Option. So werden Ihre Kunden sowieso versuchen, Ideen zu bekommen. Aber stellen Sie sicher, dass Sie einen Kommentar dazu abgeben und angeben, woher Sie den Inhalt genommen Du willst nicht, dass sie denken, dass du dir diesen Inhalt ausgedacht hast und dann irgendwann herausfinden, dass er, du weißt schon, vom Konkurrenten gestohlen wurde, weil sie einfach denken werden , dass du ihn gestohlen Hier können wir den anderen potenziellen Seiten einen Link mit weiteren Informationen hinzufügen , der die spezifischen Funktionen genauer erklärt , so wie sie es hier getan haben Dies ist eine gute Möglichkeit, Besucher auf verschiedene Seiten der Website zu leiten , und es verleiht dem Textblock auch etwas mehr Details . Wir haben bereits einen stilvollen Link. Ändern Sie einfach die Farbe in Ihre Primärfarbe. Wir können diesem Link auch einen kleinen Pfeil hinzufügen. In den Komponenten können wir nach einem Symbol suchen , dieses nehmen und es daneben platzieren. Das ist alles für den Abschnitt. Lassen Sie uns nun die restlichen Abschnitte im Hauptteil erstellen. Ich dachte an einen solchen geteilten Abschnitt. Inhalt hat den gleichen Stil wie das, was wir gerade gemacht haben, also können wir ihn einfach kopieren. Für die Grafik setzen wir vorerst nur den Bildhalter ein. Für unsere Kunden werden wir unsere Vision zu diesen Bildern erläutern. Wir werden eine Augmented-Reality-Ansicht erstellen, indem wir Anzeigen von der Plattform zu echten Fotos hinzufügen. Lassen Sie uns einige Inhalte für die einfache Aufgabenverwaltung sagen. Ich werde das selbst schreiben. Beurteile mich nicht. Mm. Lass uns noch einmal das gleiche Layout mit dem Foto haben. Lass uns das einfach duplizieren. Ich halte hier die Optionstaste gedrückt, damit es dupliziert wird, wenn ich das Ganze ziehe, aber das solltest du inzwischen wissen Ich möchte eine Fi-Metrik sehen , um das Layout dieses Abschnitts umzukehren Gruppieren Sie zuerst den Inhalt. Wählen Sie dann alles aus, und diese beiden rosa Kreise sollten in der Mitte erscheinen. Halte es einfach und verschiebe den Inhalt auf die andere Seite. So einfach, ein Baby könnte es schaffen. Lassen Sie uns jetzt einen Abschnitt mit Testimonials hinzufügen. Ich mag diesen hier wirklich. Ich werde es fast so nachbauen, wie es ist. Aus Sicht des Marketings ist es eine großartige Idee, Testimonials auf Produkt- oder Dienstleistungswebsites zu haben Produkt- oder Dienstleistungswebsites Es erhöht das Vertrauen in die Marke und das Publikum bekommt ein besseres Gefühl für das Produkt, wenn es echte Erfahrungen von Menschen liest Eine gute Möglichkeit, Testimonials zu gestalten, besteht darin fünf Sterne hinzuzufügen, genau wie hier. Die Leute lieben es zu sehen, wie jemand das Produkt bewertet hat. Es ist aussagekräftiger und einfach fünf Sterne auf der Seite zu sagen , weckt sofort positive Gefühle gegenüber dem Produkt, da im Gehirn der Menschen eine starke Assoziation mit diesen fünf Symbolen besteht im Gehirn der Menschen eine starke Assoziation . Es ist eine kleine psychologische Technik. Arbeitgeber werden Ihr Verständnis für solche Dinge zu schätzen wissen . Und. Also habe ich einfach versucht, es grob an die Inspiration anzupassen und keine bestimmten Farben oder so zu verwenden. In echten Designs verwenden wir goldene Sterne und das weiße Auto, aber hier müssen wir das graue Auto behalten, also wollen wir uns keine Gedanken über die Schatten machen, um das weiße Auto auf weißem Hintergrund sichtbar zu machen. Gruppieren Sie jetzt einfach das Ganze und duplizieren Sie es auf ähnliche Weise wie unsere Inspiration. Und der letzte, der aus dem Rahmen geht. Eines ist hier zu beachten: Wir wollen nicht, dass die ganze Karte sichtbar ist. Wir wollen, dass es abgeschnitten wird, als ob es in der Inspiration steht. Also, wie machen wir das? Der Grund, warum es nicht ausgeschnitten wird, ist, dass es nicht mehr Teil des Rahmens Das können Sie im Ebenenbedienfeld sehen. Wenn Sie etwas ein wenig vom Rahmen wegbewegen, schaut Figma auf Ihren Cursor und entscheidet anhand dessen, ob Sie es auf dem Rahmen oder außerhalb des Rahmens haben möchten Sie sehen, wie diese Gruppe abgeschnitten wird , wenn sich der Cursor innerhalb des Rahmens bewegt , oder dass sie vollständig sichtbar wird , wenn Sie sich außerhalb des Um sie zurück zu verschieben, stellen Sie einfach sicher Cursor innerhalb des Rahmens befindet Positionieren Sie dann mit den Pfeiltasten oder so, dass Sie den Cursor nicht nach außen bewegen. Fantastisch. Wir können die Staudammsteuer in den Zeugnissen behalten Diese müssten unsere Kunden ihre Nutzer fragen und sie auf diese Weise erstellen Fügen wir diese schwächeren Pfeile hinzu, genau wie im Design. F. Lassen Sie uns abschließend eine Fußzeile hinzufügen und damit fertig sein Wie so oft in meinen Projekten kopiere ich den Inhalt der Fußzeile aus der vorherigen Übung, da wir dasselbe 12-Punkte-Raster verwenden und die Spalten genau richtig passen Die Wiederverwendung verschiedener Komponenten zwischen verschiedenen Projekten ist ein bisschen aus Faulheit entstanden, funktioniert aber am Ende des Tages wirklich gut Sie beginnen, diese gemeinsamen Elemente zu beherrschen wenn Sie sie in verschiedenen Projekten verwenden , und beginnen, die Vor- und Nachteile des Layouts zu verstehen , und irgendwann verfeinern Sie es bis Sie eine nahezu perfekte persönliche Vorlage haben Lassen Sie uns nun die Farben und Textilien aktualisieren. M. M. Später in der Entwurfsphase denke ich darüber nach, eine dunkle Fußzeile wie diese zu verwenden Da wir aus unserer Projektbeschreibung wissen , dass wir ein Newsletter-Anmeldeformular benötigen, können wir hier in der Fußzeile ein ähnliches E-Mail-Formular hinzufügen hier in der Fußzeile Mm hmm. Mm hm Mm. Mm hm. M. M. H. M. M. M. M. Und da ist unsere Fußzeile Ordnung. Drahtgestelle für die Homepages fertig Als Nächstes werden wir die Artikelseite für den Blog mit einem Drahtrahmen versehen 103. Wireframes – Beitragsseite: In diesem Video werden wir uns Wireframes für die Blockpost-Seite einfallen lassen Wireframes für die Blockpost-Seite Sobald die Startseite fertig ist, sind Wireframes für den Blockbeitrag tatsächlich Wireframes für den Blockbeitrag viel einfacher, weil die Navigationsleiste bereits fertig ist, die Fußzeile ist fertig, wir müssen nur noch mit der Mitte herauskommen Wir haben nicht nach der Inspiration für den Block und den Blockbeitrag recherchiert der Inspiration für den Block und den Blockbeitrag Lassen Sie uns einige Beispiele finden und sehen, was wir tun können. Wir müssen dafür kein Moodboard erstellen. Schauen wir uns schnell einige Beispiele an. Sie werden sehen, dass das meiste davon sowieso ein normales Layout ist sowieso ein normales Layout Wie Sie sehen können, haben die meisten modernen Beispiele eine ähnliche Struktur, die Überschrift und die Beitragsdetails oben, dann das Titelbild und der Haupttext Wir können auch das gleiche Layout erstellen. Lassen Sie uns zunächst die Na Bar kopieren. In den meisten Fällen möchten Sie dasselbe auf der gesamten Site haben Nun, die Überschrift, es ist üblich, eine schmale Breite für den Inhalt von Beiträgen zu verwenden Wir haben das im Teil „Gutes Design“ angesprochen. Die Sache ist , dass Absätze, die zu breit sind sehr schwer zu lesen sind, weil Sie anfangen, die Leitungsbremsen zu verlieren. Eine übliche maximale Breite für den Haupttext liegt bei etwa 700 bis 800 Pixeln. Lassen Sie uns also den Inhalt mit einem Frame auf 700 einstellen. Dazu gehört auch die Überschrift. Nicht diese Überschrift hat ein Problem mit der Zuchtfähigkeit, aber da wir diesen Inhalt erstellen, wollen wir die Dinge behalten. Lassen Sie uns auch die Überschrift mit einbeziehen. Lassen Sie uns unter der Überschrift den Autor des Beitrags und das Datum angeben, genau wie bei anderen Beispielen. In vielen dieser Beispiele gefällt mir, dass das Titelbild über den Inhalt hinausgeht, über diesen Rahmen , den wir erstellt haben. Wir können also dasselbe tun und vielleicht 900 Pixel für das Titelbild erstellen . Fügen Sie für den Hauptteil einfach etwas Dummy-Text ein. Es ist schön, den Beitrag mit dem Autor und den Details zu beenden Autor und den Details Wir haben es bereits oben, aber es ist üblich, den Autor auch unten zu platzieren und in dieser Zeit etwas größer zu sein. M. M. M. Nach der Beitragsseite gibt es in der Regel am Ende eine Kommentarfunktion Die meisten dieser Websites verwenden Plug-ins von Drittanbietern, um das Kommentieren zu verwalten, wie Facebook und Diskutieren wie Facebook und Die Verwendung von Kommentar-Plug-ins von Drittanbietern ist eine großartige Idee. Die meisten Benutzer haben bereits entweder Facebook oder Diskutieren, und sie können mit dem Kommentieren beginnen ohne sich anzumelden und all das Zeug Das mache ich auch auf Websites. Ich verwende das Diskussions-Plug-In, das etwas besser ist als Facebook, weil es dem Seitenmanager mehr Kontrolle über das Kommentieren und Moderieren gibt dem Seitenmanager mehr Kontrolle über das Kommentieren und Moderieren Wir werden auch lernen, wie dieses Diskussions-Plug-In installiert wird. Das wird im fortgeschrittenen Teil dieses Kurses behandelt, aber im Moment müssen wir nur einen Drahtrahmen einbauen, der wie eine Kommentarfunktion aussieht Mm hmm. Mm. Lassen Sie uns zum Schluss das kopieren. M Das ist alles. Schauen wir uns den Drahtrahmen aus dem Präsentationsmodus an. Wählen Sie einen Frame aus und klicken Sie auf die Play-Schaltfläche. Sieht toll aus, jetzt können wir das mit einem Kunden teilen , und das war's. Sie können den Präsentationsmodus auch selbst über die Datei aufrufen , die Sie mit ihnen geteilt haben. Als weitere Option können Sie den Prototyp aber auch direkt teilen. Wenn Sie Figma-Links mit Ihren Kunden teilen, ist es eine gute Idee, zu erklären, wie die Dinge funktionieren und wie Sie die Kommentare sehen können Sie haben angegeben, wie Sie ihre eigenen Kommentare hinzufügen, wie Sie in den Präsentationsmodus wechseln und so weiter Wann immer Sie den Kunden etwas mitteilen, seien es Figma-Links oder Webflow oder so, führen Sie sie immer durch den Prozess und erklären und erklären Sie ihnen, wie die Dinge funktionieren können Erwarte nicht, dass sie alles selbst herausfinden, all diese Drahtgestelle Figma und Moodboards und Webflows und Prototypen könnten für sie überwältigend sein Und wenn sie sich nicht mit einem solchen Designprozess befasst haben , dann wird alles neu sein, all diese neuen Tools, und es könnte ihnen schwer fallen, es selbst herauszufinden Führe sie also durch jeden Schritt des Prozesses, gib ihnen kleine Erklärungen , wie man etwas macht, vielleicht Screenshots, manchmal sogar kleine Video-Tutorials, die du machen könntest Und dafür werden sie dich lieben. 104. Wireframes – Blog-Raster: Jeder Blog benötigt eine Seite, auf der Benutzer alle Blockbeiträge an einem Ort durchsuchen können Das werden wir in diesem Video tun. Erstellen Sie Drahtgitter für die Startseite des Blocks. Mein Lieblingsdesign für den Blog ist ein einfaches Layout, wie in diesem Beispiel, aber in unserem Fall werden wir es etwas einfacher machen. Wir müssen nicht nach Inspiration suchen. Wir haben tatsächlich etwas in unserem Moodboard, das wir verwenden können Diese Art von Kartenlayout wäre perfekt für unsere Blockseite Jede Blockkarte hätte ein Titelbild, eine Überschrift, ein paar Zeilen aus dem Beitrag und Angaben zum Autor. Lassen Sie uns also zuerst die Seite vorbereiten. Lassen Sie uns die Beitragsseite duplizieren und von dort aus bearbeiten. Wir können die Navigationsleiste und die Fußzeile beibehalten. Den Rest können wir loswerden. Und lassen Sie uns das Grid aktivieren. Zunächst können wir eine Überschrift in eine Zwischenüberschrift einfügen. Wir können es einen Blog oder neueste Beiträge oder etwas Ähnliches nennen neueste Beiträge oder etwas Ähnliches Lassen Sie uns nun eine Blockpostkarte erstellen. Drei Karten in einer Reihe, also das beste Layout, denke ich. Mm hmm. Geben wir ihm eine Farbe aus unserer Drahtgitter-Farbpalette Als Nächstes benötigen wir ein Vorschaubild , das wir aus der Registerkarte „Assets“ ziehen können Dann eine Überschrift und ein paar Zeilen aus dem Blockbeitrag selbst Der Stil von Überschrift drei sollte gut für die Überschrift sein. M. Und für den Text werde ich mich für die Bildunterschrift entscheiden. Der Absatz scheint zu groß zu sein. Ein Ratschlag: Halten Sie sich an die Stile von Wireframe-Kits, Sie möchten Ihre Designentscheidungen in dieser Phase so weit wie möglich einschränken in dieser Phase so weit wie möglich Ziel ist es, sich auf die Struktur und den Inhalt zu konzentrieren. Das sieht anständig genug aus. Fügen wir nun den Autor und Datum hinzu, genau wie auf der Beitragsseite. M. M. M. Nun, gut. Nur eine letzte Sache. Lassen Sie uns um die Ecke gehen, wie wir es mit Zeugniskarten gemacht haben Eigentlich sollten wir uns keine Gedanken darüber machen , die Ecken abzurunden Das sollte für die Entwurfsphase übrig bleiben. Aber was sie haben, wir haben es schon auf Testimonialkarten gemacht, also könnten wir es genauso gut hier machen Das rundet das Rechteck im Hintergrund ab. Nun, wie runden wir den Platzhalter für das Bild ab? Wenn wir es auf die normale Art machen, dann werden alle vier Ecken abgerundet, aber wir wollen nicht, dass die unteren Ecken abgerundet werden. Es sieht seltsam aus. Wir haben hier die Möglichkeit, unabhängige Ecken abzurunden. Acht an den oberen Ecken und null an den unteren. Lassen Sie uns nun das Ganze gruppieren und dann duplizieren , um ein Raster zu erstellen. Und da haben wir es. Ich gebe nicht für jede Karte individuelle Inhaltsbeispiele an, jetzigen Zeitpunkt nicht wirklich notwendig ist. Bei den Designs werden wir das jedoch tun, denn bei der Präsentation von Designs ist es wichtig, dass die Arbeit beeindruckend und so realitätsnah wie möglich aussieht beeindruckend und so realitätsnah wie , damit sich die Kunden das Endergebnis viel besser vorstellen können Eine letzte Sache, die wir hinzufügen müssen, ist die Seitennummerierung. Sie kennen diese Seitenzahlen am Ende des Rasters, sodass Benutzer zur nächsten Seite wechseln können Mit Webflow können Sie die Seitennummerierung am besten mit den Schaltflächen „Weiter“ und „Zurück“ erstellen Seitennummerierung am besten mit den Schaltflächen „Weiter“ und „Zurück Also ziehen wir eine der Schaltflächen aus dem Assets-Ordner Ändern Sie die Farbe in etwas Subtileres. Denken Sie daran, die Farbe der gesamten Komponente selbst zu ändern , es wird nicht funktionieren. Sie müssen das Hintergrundrechteck auswählen und dort die Farbe ändern. Mama, hm. Verkleinern Sie die Höhe des Knopfes und das war's. Bringen Sie die Fußzeile nach oben und schneiden Sie den zusätzlichen Platz im Rahmen ab. Mm. Übrigens, wenn Sie den gesamten Rahmen verkleinern, kann es manchmal vorkommen, dass die Größe Das hat mit den eingeschränkten Einstellungen der einzelnen Elemente im Rahmen zu tun der einzelnen Elemente im Rahmen zu Ich möchte jetzt auf Details eingehen, aber wenn das passiert, halten Sie einfach die Strg - oder Befehlstaste gedrückt, während Sie die Größe des Rahmens ändern, und das funktioniert nicht. In Ordnung. Alle Drahtrahmen sind fertig. Wir können dies auf zwei Arten mit unserem Kunden teilen. Entweder wir können es in einem Präsentationsmodus teilen, dem jede Seite einzeln geöffnet wird, und um durch die Seiten zu blättern, können wir einfach auf den Links- und Rechtspfeil klicken. Eine andere Möglichkeit zum Teilen besteht darin, die Datei selbst zu teilen. Bei Wireframes bevorzuge ich es, die Datei mit anderen zu teilen, weil es sich um Wireframes handelt, Skizzen zum Arbeitsfortschritt, also fühlt es sich Die Designs teile ich gerne in einem Präsentationsmodus, damit sie dem Enderlebnis einer Website näher kommen Das war's für Wireframes. Als Nächstes werden wir mit Designs beginnen . Bleib hier. 105. TeamApp Homepage-Design: Teil 1: Das Moodboard, wir haben das Wireframe. Wir sind bereit, unsere Homepage zu gestalten. Lass uns eine neue Seite erstellen und sie Design nennen und das Wireframe hier hineinkopieren weil es für uns einfacher sein wird, dem Wireframe zu folgen , anstatt zwischen den und her zu gehen Als Nächstes fügen wir einen neuen Rahmen und unser übliches Okay, lass uns das Hintergrundfoto für unseren Heldenbereich finden . Ich mag dieses Foto sehr, weil es nicht auf Lager ist, ein bisschen realistischer aussieht, zeigt, dass sie von zu Hause aus arbeitet, und sie ist glücklich, weil unsere Plattform für Teamzusammenarbeit einfach so gut ist. Das einzige Problem ist, dass sie zentriert ist und wir wollen ein Layout haben , bei dem wir Inhalte auf der linken Seite platzieren können, ohne dass sie sich mit ihrem Gesicht überschneiden Wenn das Foto eine gute Qualität hat, können wir sie bewegen und sie auf der rechten Seite positionieren Ich habe alle Fotos und Assets in die Projektdatei aufgenommen . Wenn Sie also dieselben Fotos wiederverwenden möchten, können Sie das tun, und das finden Sie auf der Asset-Seite. Aber wenn Sie Ihre eigene Interpretation vornehmen möchten, und ich werde Ihnen auf jeden Fall empfehlen, das zu tun, suchen Sie sich Ihre eigenen Fotos und verwenden Sie stattdessen dieses. Mm. Mm. Sieht ziemlich gut aus. Es gibt viel Platz, sodass wir unseren Inhalt auf der linken Seite platzieren können. Lassen Sie uns nun Typografie wählen. Lassen Sie uns dieses Mal versuchen, eine Schrift zu finden die sowohl für Überschriften als auch für Absätze geeignet ist, und zwar nicht aus einem bestimmten Grund, sondern nur zum Dafür müssen wir etwas finden, das neutral ist, weil wir sie für einen Absatz verwenden werden und etwas, das viele Gewichtsvariationen aufweist Wir können das in Google anhand der Anzahl von Stilen eingrenzen. Sechs Stile bedeuten in Wirklichkeit drei verschiedene Gewichte, da jede Gewichtung eine kursive Version enthält. Das ist also nicht wirklich genug. Ich werde mich für mindestens acht Stile entscheiden. Dieser heißt eigentlich Work Sans könnte eine gute Option sein. Die Kabine ist auch nicht schlecht. Nur eine kurze Überprüfung des Schrifthandbuches. Denken Sie daran, dass wir immer das Schrifthandbuch lesen oder peinliche Entscheidungen vermeiden Hervorragend. In dieser Beschreibung ist alles sicher. Und jetzt wenden wir diese Schriftart auf unsere Seite an. Anstatt es von Grund auf neu zu erstellen, werde ich es aus dem Wireframe hier kopieren Sie müssen das Rad nicht jedes Mal neu erfinden. Ich spiele hier nur gedankenlos herum, um zu sehen, was am besten funktioniert. Ich denke, das wird reichen Da wir kein schwereres Gewicht verwenden, muss die Linienhöhe nicht näher kommen. Letzte Masse bedeutet weniger Gravitation im vollen Umfang. Ich hoffe, du hast auf deinen Physikunterricht in der Schule und den Absatztext geachtet in der Schule und den Absatztext Wir müssen dem Bild eine dunkle Überlagerung hinzufügen, da der Inhalt sonst kaum sichtbar ist Nun zum Formular zum Aufruf zum Handeln. Ich werde das Blau von diesem Design verwenden. Aber ich werde es tatsächlich ein wenig aufhellen, um es noch lebendiger zu machen Sie haben auch dieses Gelb auf ihrer Seite, also lasst uns das auch kopieren Vielleicht finden wir eine Verwendung dafür. Es steht Ihnen frei, verschiedene Farben zu wählen wenn Sie möchten, es liegt ganz bei Ihnen, wie genau Sie mir folgen möchten, Pixel für Pixel oder vielleicht ein wenig remixen Es ist so oder so in Ordnung. In beiden Ansätzen steckt ein Lernwert. Äh, huh. Ich betrachte hier nur die Ränder und Entfernungen und nicht wirklich an das Raster, wie Sie sehen können Vertraue immer deinen Augen um Designrichtlinien und -regeln geht Sie ihnen manchmal blind folgen, werden Sie alles andere als optimale Ergebnisse erzielen Mm. Ich versuche auch , diese Ecke der Möbel zu vermeiden. Die Objekte auf dem Foto und unsere Oberflächenelemente können manchmal miteinander interagieren. Das kann eine gute Interaktion sein, aber manchmal kann es zu unnötigen Spannungen führen. In Ordnung, sieht soweit süß aus. Lass uns eine Navigationsleiste platzieren. Ein U h. Machen wir Ränder 12 oben und unten und 20 an den Seiten. Wenn du hier einen Ghost-Button machen willst, kannst du das auch tun oder sogar so gestalten . Fühlen Sie sich frei zu remixen Lassen Sie uns auch ein Logo hinzufügen. Hier ist eine weitere einfache und schnelle Möglichkeit, ein Logo zu erstellen. Schreiben Sie einfach den Namen in kleinen Großbuchstaben und fügen Sie am Ende einen Punkt mit einer kontrastierenden Farbe hinzu. Und da hast du ein brandneues Logo. Mama, hm. Sieht soweit gut aus. Eine Sache, die ich jedoch korrigieren möchte, ist die dunkle Überlagerung auf dem Bild Im Moment verwenden wir ein vollständiges Overlay, aber das Model muss nicht wirklich unter einem dunklen Overlay sitzen , weil wir keinen Inhalt vor ihr haben Nun, wie können wir sie aufhellen, aber andere Bereiche dunkel halten Wir verwenden eine Farbverlaufsfüllung anstelle einer Volltonfüllung, gehen zu der Füllung, die wir erstellt haben, und ändern sie in einen radialen Verlauf Diesmal nicht linear. Warum? Weil wir sie mit dem Radio gewissermaßen ins Rampenlicht rücken können. Jetzt können wir das Scheinwerferlicht genau dort positionieren , wo wir es haben wollen. Dieser Griff auf der linken Seite verringert den Radius dieses Kreises. Sie können auch mit anderen Griffen spielen , um genau das gewünschte Ergebnis zu erzielen. Okay, jetzt zurück zu 40% Opazität. Und da hast du's. Ihr Gesicht ist nicht mehr dunkel und sieht insgesamt besser aus. Dies ist eine großartige Möglichkeit, Bilder zu verwenden, die zu viele Details enthalten und in denen zu viel passiert. Sie können Spotlichter auf Ihre Brennpunkte setzen und dann den Rest des Bildes abdunkeln Ordnung, lassen Sie uns hier eine Pause einlegen und den Rest im nächsten Video fortsetzen 106. TeamApp Homepage-Design: Teil 2: Und wir sind zurück. Wir werden diesen Abschnitt jetzt entwerfen. Wir müssen einige Modelle für das Produkt finden , damit wir es präsentieren können Wie beim letzten Mal werde ich nach Ressourcen suchen und sie dann in Figma importieren Ich werde verschiedene Keywords wie Projekt, Aufgabe oder Dashboard ausprobieren wie Projekt, Aufgabe oder Dashboard Ich habe dieses Modell bereits gefunden, das ich in Figma importieren und dann verwenden werde Wenn Sie dasselbe verwenden möchten, können Sie auf der Asset-Seite nachsehen Ich habe es dort abgelegt. Aber auch wenn Sie etwas Eigenes finden möchten , können Sie das tun, und Sie können auf die Seite Ressourcen gehen, wo Sie verschiedene kostenlose Modelle und Vorlagen oder ähnliches finden verschiedene kostenlose Modelle und Vorlagen oder , die Sie als Produktpräsentation hinzufügen könnten als Produktpräsentation hinzufügen Dieser Besprechungsbildschirm scheint ziemlich gut zu sein. Das können wir reinbringen und unser eigenes Blau benutzen. A Um den Inhalt einer Gruppe auszuwählen, halten Sie die Strg- oder Befehlstaste gedrückt und wählen Sie mit der Maus aus. Es wird eine ähnliche Tiefenauswahl durchgeführt, Es wird eine ähnliche Tiefenauswahl durchgeführt wie Sie es tun, wenn Sie dieselbe Taste klicken und gedrückt halten. Drücken Sie die Umschalttaste, falls Sie eines der Elemente abwählen möchten Äh, da dieser Bildschirm ziemlich breit ist, können wir ihn vom Rand wegbewegen Das ist auch ein ziemlich guter Trick. Ich werde ihm einen Schatten hinzufügen, um ihn sichtbarer zu machen. Hier ist ein Band mit ihren Schatten. Machen Sie sie subtil , als würden sie dadurch keine Aufmerksamkeit auf sich ziehen. Wenn es Aufmerksamkeit erregt, dann ist es zu viel. Die Ränder des Bildschirms haben keinen guten Kontrast zum weißen Hintergrund. In diesem Fall gibt es einen schönen Streifen, den Designer verwenden. Wir können einen cremefarbenen Hintergrund anstelle eines rein weißen So wie das, was sie hier benutzen. Wir können diese exo-weiße Farbe nehmen und Hintergrundfüllung auf den gesamten Rahmen auftragen Also, das ist eine enorme Verbesserung. Die Ränder des Bildschirms sind jetzt viel klarer. Ein h. Äh , huh. , huh Lass uns jetzt um die Ecken gehen. Es ist immer eine bessere Idee , bei solchen Benutzeroberflächenelementen um die Ecke zu gehen. Es fühlt sich fertiger an. Spitz zulaufende Ecken fühlen sich an , als hätte jemand auf halbem Weg aufgegeben Weißt du, es wäre nett, so etwas zu machen, einige Elemente aus dem Modell herauszunehmen Es wird mehr Dimension hinzufügen und die ganze Sache viel interessanter machen Mm hier ist eine coole Figma Sie können Eigenschaften kopieren und von einem Objekt auf ein anderes verschieben von einem Objekt auf ein anderes wie bei dem Schatten, den wir gerade erstellt Wählen Sie wie bei dem Schatten, den wir gerade erstellt haben, eine Eigenschaft im Bedienfeld klicken Sie hier auf den Rand , um sie richtig auszuwählen. Drücken Sie dann C, um es zu kopieren und dann in das gewünschte Element einzufügen. Oder Sie können den Stil auch daraus erstellen und diesen Stil speichern und ihn dann für andere Elemente wiederverwenden. A Sieht soweit gut aus. Lassen Sie uns den Inhalt hinzufügen. Und alles sieht gut aus. Lassen Sie uns nun einen Abschnitt wie diesen erstellen. Normalerweise haben wir, so wie wir es in anderen Übungen gemacht haben, das Foto am Rand, aber diese Typen haben es ein bisschen anders. Sie haben eine Lücke am Rand und auch zwischen den Abschnitten, sodass wir es ähnlich machen können. Wir möchten Fotos finden, die etwas Freiraum haben, damit wir die Elemente der Benutzeroberfläche wie in der Inspiration platzieren können. Ein Bild mit vielen Bildern wird nicht funktionieren. Außerdem suche ich oft gerne nach Fotos desselben Autors. Wenn Sie Fotos mit einem anderen Stil verwenden, entsteht ein inkonsistentes Aussehen Es ist offensichtlich, dass es sich bei den Fotos um Archivfotos handelt und nicht im Rahmen eines Fotoshootings für diese Website gemacht Fotos von demselben Mitwirkenden sehen oft sehr ähnlich Es wird denselben Stil, dieselbe Filterung und insgesamt eine ähnliche Füllung Die Verwendung solcher Fotos sorgt für eine erstaunliche Konsistenz auf der Seite. In unserem Fall haben wir Glück, der Mitwirkende unseres Heldenfotos andere Fotos hat , die wir möglicherweise verwenden könnten Ich denke darüber nach, diese beiden zu verwenden, weil sie in derselben Szene auf der Ledercouch aufgenommen wurden Das ist also eine noch größere Konsistenz. Es wird sich anfühlen, als hätten wir unser eigenes Fotoshooting für diese Website gemacht . Und ich werde einige Elemente aus dem Modell des Produkts selbst nehmen aus dem Modell des Produkts selbst nehmen und sie wie in der Inspiration platzieren Platziere sie einfach irgendwo über dem Foto. H. Es sieht ziemlich gut aus. Wir hatten Glück mit diesen Fotos. Sie haben nicht nur denselben Stil und dieselbe Szene, sondern beide Models lächeln auch und schauen sich gegenseitig in die Richtung 107. TeamApp-Homepage-Design: Teil 3: nun zum Abschnitt mit den Testimonials Lassen Sie uns nun zum Abschnitt mit den Testimonials die Karte aus dem Wireframe kopieren und Änderungen daran vornehmen Das sollte uns theoretisch Zeit sparen . Lassen Sie uns einige Profilfotos für Testimonials finden. Mm. Eine Sache, die Sie niemals tun sollten, ist, Designs mit Ihrem Kunden zu teilen , der wiederholt solche Dummy-Fotos hat Das sieht nicht sehr gut aus und ruiniert gewissermaßen die Wirkung, die Ihr Design kann, wenn Sie es mit einem Kunden teilen Selbst bei den Namen nimmt es nicht wirklich viel Zeit in Anspruch, einige zufällige Namen zu finden, aber das Bild ist beeindruckend, sieht echt aus und kann besser gewürdigt werden. M. M. Es gibt einige Plugins , die Sie für Figma verwenden könnten und die Dummy-Inhalte erstellen können Dieses, das ich gerade ausprobiere , heißt Content real und kann tatsächlich ziemlich gute Arbeit beim Erstellen von Dummy-Namen leisten ziemlich gute Arbeit beim Erstellen von Dummy-Namen Auf dieser Ressourcenseite habe ich einen Link eingefügt, über den Sie alle verfügbaren Figma-Plugins finden können alle verfügbaren Figma-Plugins Sie können das durchgehen und verschiedene Stecker finden , mit denen Sie Ihren Arbeitsablauf beschleunigen können In ähnlicher Weise verwende ich bei Dummy-Absätzen gerne verwende ich bei Dummy-Absätzen unterschiedlichen Text, anstatt einfach genau das Gleiche zu wiederholen Siehst du, die Wireframes haben wir uns nicht darum gekümmert, weil es Sie sollen gemischt aussehen. Aber es designt, wir wollen die Dinge so real wie möglich aussehen. Mama, hm. M. Ordnung, sieht toll aus. Ich mache dasselbe mit einer Kopie vom Drahtrahmen und stylen es genau dort Mm hmm. Mm. Wie ich bereits erwähnt habe, möchte ich diesen dunklen Stil verwenden. Versuchen wir es mit unserem Dunkelblau. Es ist okay, aber ich werde es ein wenig entsättigen, damit es weniger Blau enthält Ich hätte es gern etwas subtiler, eher schwarz oder grau Zum Glück wissen wir, wie man Farben fein abstimmt, nicht wahr? Sie können Ihr Gedächtnis auffrischen, indem Sie sich die Lektion zur Feinabstimmung im Bereich Farbe noch einmal ansehen . Ich habe Ihnen in diesem Kurs viele Konzepte beigebracht, daher ist es ganz natürlich, dass sie Ihnen aus dem Kopf gehen. Wenn Sie zu diesen Lektionen zurückkehren, wenn Sie sie benötigen , ist das eine hervorragende Möglichkeit, Ihr Wissen zu festigen Wir können einen Teil des Blaus aus der Farbe entfernen , indem wir die Sättigung verringern Ändern Sie das Rack auf H S B, was für Farbton, Sättigung und Helligkeit steht, wodurch das zweite Feld zur Sättigung wird, und beim Prozentwert verringern Sie ihn einfach. Es ist immer noch derselbe Farbton und diese neue Farbe passt immer noch gut in unsere Palette. Ich spiele hier nur mit Farben und Größen herum. Ich mag es, wenn Fußzeilenlinks verblasst und klein sind. Und das ist alles. Schauen wir es uns im Präsentationsmodus an. Unsere Homepage ist also fertig und sieht ziemlich schick aus. Wir haben noch zwei weitere Seiten übrig, das Blockraster und die Blogpost-Seite, und darauf werden wir in den kommenden Videos zurückkommen 108. Blogbeitragsentwurf: Unser Homepage-Design ist ausgefallen. Lassen Sie uns jetzt die Blogpost-Seite erstellen. Das haben wir von den Wireframes. Kopieren wir diesen Frame in die Designseite, damit wir ihm leicht folgen können Unsere Homepage hat einen cremefarbenen Hintergrund, aber auf dem Blog bevorzuge ich es, ihn weiß zu haben. Das ist besser für die Lesbarkeit des Textes, was bei Blogbeiträgen sehr wichtig ist Kopieren wir also Paste und Navbar direkt aus dem Homepage-Design Alles was wir tun müssen, ist nur die Farben zu ändern. Für die Links ist Dunkelblau gut, und für die Schaltfläche können wir den gleichen Stil beibehalten. Aber statt weißer Farben für Text und Hintergrund können wir unsere primäre blaue Farbe verwenden. Für den Autoren-Blog haben wir noch keinen speziellen Stil wie Bildunterschriften. Wir können einfach zuerst den Absatzstil anwenden , ihn dann abtrennen und dann bearbeiten 15 Pixel sehen gut aus und vergiss die Farbe nicht. Grau wäre hier in Ordnung, das aus den lokalen Stilen. Wir sollten daraus ein Textil machen. Ich hätte das schon auf der Homepage erstellen sollen. Es gab einige kleine Textelemente wie dieses, und wenn ich es dort gemacht hätte, müssten wir hier weniger Designentscheidungen treffen und alle wären verlinkt und in Zukunft leicht editierbar und verwaltbar Stellen Sie sich vor, der Kunde kommt zurück und sagt, dass er den Telefonstil nicht mag, dann werden Sie den wahren Vorteil der Verwendung von Stilen erkennen Da haben wir jetzt den Untertitelstil, und wir wenden ihn auch auf die Daten an. A Für das Bild nehmen wir ein Foto von Splash oder Pexels Da ist dieser Kreis drin, also können wir das Bild als Füllung dieses Kreises festlegen das Bild als Füllung dieses Kreises A entferne einfach das Symbol von seinem Gesicht. Lassen Sie uns für das Titelbild etwas suchen und dann einfach das Aor-Bild liken als Bildfüllung bearbeiten Hervorragend. Für den Hauptteil wählen wir den Absatzstil und geben ihm eine dunkelblaue Farbe. Ich entscheide mich nicht für die graue Farbe wie auf der Startseite , weil Grau nicht so gut lesbar wäre. Auf der Homepage war es okay, weil der Text nicht so umfangreich war Aber hier ist es ein Blogbeitrag, und die Leute müssen eine sehr gute, unterhaltsame Erfahrung machen, wenn sie ihn lesen. Und wenn sie blinzeln oder wenn der Bildschirm flackert oder wenn sie die Textschrift nicht richtig sehen, dann werden sie einfach nicht so viel Text lesen Und für diesen Autoren-Blog gilt dasselbe: Ersetze das Bild und ändere dann die Schriftstile H. Mm hm. Ein Kommentarfeld, lass es so wie es ist. Sie müssen das nicht stylen, da wir ein Plugin verwenden werden, das seinen eigenen Stil hat. Es macht auch keinen Sinn, diesen Stil hier neu zu erstellen, aber manchmal mache ich einen Screenshot von einem Plugin und füge ihn stattdessen ein Wenn es für meinen Kunden wichtig ist zu wissen, wie es schon aussieht Und die Fußzeile ist PZ. Wir können kopieren und einfügen, aber es gibt eine bessere Option Wir können daraus eine Komponente erstellen, weil wir diese Fußzeile auf drei verschiedenen Seiten haben Fußzeile auf drei verschiedenen Seiten Und wenn wir entscheiden, dass wir einige Designs ändern müssen, können wir auf diese Weise ganz einfach eine Instanz ändern, und dann werden alle drei gleichzeitig aktualisiert gleichzeitig Das ist es. Unsere Blogpost-Seite ist fertig. Wir haben noch eine Seite übrig, nämlich die Blockrate, und das werden wir im nächsten Video tun. Bleib hier. 109. Blog-Grid-Design: In diesem Video werden wir die Homepage des Blogs gestalten. Es wird ziemlich einfach sein, da viel davon erledigt ist. Wir haben bereits Wireframes und eine BlogPost-Seite. Wir können Elemente von diesen beiden Seiten wiederverwenden. Beginnen wir mit dem Duplizieren der Blogpost-Seite. Löschen Sie alles neben der Überschrift steht, und lassen Sie uns das Raster aktivieren Ordnen Sie jetzt einfach die Überschrift und die Zwischenüberschrift an. Nun zu den Karten. Ich kopiere eine von den Wireframes und übernehme sie Wenn Sie sich an unsere Inspiration erinnern, sind die Karten weiß auf grauem Hintergrund Auf diese Weise ist die Karte sichtbar. Das möchte ich auch hier tun, also werden wir den Hintergrund grau streichen , genau wie unsere Homepage. Jetzt können wir die Kartenfarbe auf Weiß ändern. Als Nächstes fügen wir unser Beitragsbild als Vorschaubild ein. Alles, was wir tun müssen, ist das Bild als Füllung eines Rechtecks einzufügen. Das Symbol aus dem Bildplatzhalter können wir einfach ausblenden oder löschen Wir werden es nicht wieder verarschen. Wir brauchen eine andere Ebene des Überschriftenstils , die wir in dieser Karte verwenden können. 22 groß und halb fett, ich finde, sie sieht gut aus. Außerdem können wir die Großschreibung des Textes aktivieren. Dadurch wird die Überschrift dem Titel ähnlicher. Lassen Sie uns das als Überschrift drei verwenden, falls wir es in Zukunft anpassen müssen Nun zum Absatztext. Für den Autor- und Datumsblock. Ich möchte, dass es kleiner ist als das, was es gerade ist. Es ist eine sekundäre Information und sollte nicht die gleiche Bedeutung haben wie der Absatz. Also werde ich das Textil abnehmen und es auf 12 Pixel ändern A Für diesen kleinen Separator werde ich ein Lichtgrab verwenden Bei solchen Trennwänden bevorzuge ich es immer, heller zu sein als der Text daneben Lassen Sie uns den Avatar des Autors von der Komponente trennen. Und lass es uns zehn Pixel kleiner machen. A Wir können diese Elemente mithilfe der Ausrichtungsfunktion von Figma aufräumen , sie auswählen und dann horizontal zentrieren Oder wie Figma es nennt, vertikale Mittelpunkte ausrichten. Stellen Sie nur sicher, dass Sie die Ebenengruppe nicht haben , sonst funktioniert sie nicht Wir können auch diese Funktion zum Aufräumen oder Verteilen verwenden , um sie gleichmäßig zu verteilen Und sobald Sie das getan haben, öffnet sich das neue Feld. Das ist eine Entfernung zwischen den Objekten. Wir können es auf etwa zehn ändern und Figma verteilt die Objekte mit einem Abstand von zehn Pixeln. Das ist sehr praktisch Ich lasse diesen leeren Raum zwischen dem Absatz und dem Autorenblock aus einem bestimmten Grund. Ich berücksichtige die Fälle, in denen sich eine Überschrift über drei Zeilen erstreckt. Auf diese Weise stellen wir sicher, dass sich die Karten nicht dehnen müssen und dass sie alle dieselbe Höhe haben. Großartig. Die Blockkarte ist fertig. Jetzt können wir sie duplizieren, um das Grid zu erstellen. Wir sollten einzelne Dummy-Inhalte in diese Karten einfügen. Es ist nicht cool , es dem Kunden so zu präsentieren. Was wir tun können, um uns Zeit zu sparen, ist, auf einen Blog zu gehen und dort Inhalte mit Bildern, Absätzen und all dem abzurufen. Zum Beispiel können wir auf medium.com gehen und dort Inhalte finden Um Bilder herunterzuladen, können Sie sie entweder als Screenshot ansehen oder diesen Chrome-Erweiterungslink in den Ressourcen verwenden Es durchsucht die Seite nach Bildern und ermöglicht es Ihnen, diese einfach herunterzuladen. Okay mit ihren Namen, ich werde das Content Real Plugin verwenden. Ich kann alle Namensebenen auswählen. Und wenn Sie auf die Option Namen klicken , werden automatisch zufällige Namen angezeigt. Okay, lass uns etwas Ähnliches mit Aors machen. wir einfach sicher, dass das Geschlecht der Namen korrekt mit den Fotos übereinstimmt Wir wollen kein Mädchen namens Arthur. Bin da. Die ganze Sache ist jetzt so viel besser. Sieht echt aus und ist viel beeindruckender als nur wiederholte Inhalte. Aber wir müssen die Abstände in unseren Blogs korrigieren. Jetzt haben Namen zu unterschiedlichen Lücken geführt. allerletzte Schritt, der nächste Button , den wir einfach aus Wireframes duplizieren und die Farbe ändern können aus Wireframes duplizieren und die Farbe ändern U. Genau wie bei sekundären Tasten können wir die graue Farbe verwenden und die Deckkraft verringern Das ist ein einfacher Trick, um Farben aus derselben Palette zu erstellen Wir haben das nicht in Wireframes gemacht, aber es wäre schön, dieser Schaltfläche einen Pfeil hinzuzufügen, um die nächste Aktion darzustellen Ich ziehe das Symbol direkt aus dem Wireframe-Kit. H. Da. Das sieht nett aus. Verschiebe die Fußzeile nach oben und fertig mit einer Blog-Seite. A Alle Designs für drei Seiten sind jetzt fertig Wir würden dies mit dem Kunden teilen und sein Feedback einholen und alle erforderlichen Änderungen vornehmen Designs, die ich im Präsentationsmodus teilen möchte, klicken Sie auf Prototyp teilen und senden Sie den Link an den Kunden Es öffnet sich direkt im Präsentationsmodus und erklärt ihnen, wie sie zwischen den Seiten navigieren können. Etwas, das für uns offensichtlich sein mag die Kunden oft nicht sehr offensichtlich. Und damit ist der Abschnitt abgeschlossen. Wir haben viel getan. Wir haben eine sehr wichtige Fähigkeit gelernt , nämlich den Designprozess. Wir sind von der Projektbeschreibung dann zu Moodboard und dann zum Wireframing übergegangen Moodboard und dann Und dann haben wir endlich die Designs gemacht, was aufgrund all der kleinen Schritte, die wir davor gemacht haben, nicht sehr schwierig war all der kleinen Schritte, die wir davor gemacht haben, Ohne diese Schritte wäre das Entwerfen viel schwieriger gewesen. Ihre Kunden werden nicht wissen wie der Webdesign-Prozess funktioniert, und sie erwarten vielleicht, und das tun sie oft, dass Sie sich einfach hinsetzen und sofort mit dem Aufbau der Website beginnen . Und oft bevorzugen sie das sogar, weil sie Zeit und Geld sparen und ihre Website so schnell wie möglich betriebsbereit haben . Aber Websites ohne Designs zu erstellen, wird schreckliche Ergebnisse bringen, und normalerweise wird es mehr Zeit und Geld kosten , weil Überarbeitungen auf Live-Websites einfach mehr Zeit in Anspruch nehmen als Überarbeitungen an den Designs oder sogar Überarbeitungen im Vergleich zu Wireframes, was einfach so einfach zu bewerkstelligen ist, oder? Man verschiebt einfach Dinge. Du denkst an nichts. Stellen Sie sich jetzt alles vor , was wir in Webflow tun, bauen alles auf, all die Strukturen, und dann müssen wir plötzlich etwas komplett neu gestalten und eine neue Interaktion oder ein neues Layout erstellen eine neue Interaktion oder ein neues Layout Und das Gleiche gilt für die Designphase selbst, denn wenn Sie entwerfen, können Sie natürlich ohne Wireframes und ohne Inhalt entwerfen Aber wenn Sie Wireframes haben, wenn Sie dieses Grundgerüst haben und wenn Sie Inhalte haben, die Sie entwerfen, sind die Dinge einfach viel einfacher Und jede Iteration, die Sie während der Phase der Strukturierung Ihrer Seite und der Strukturierung der Website vornehmen der Phase der Strukturierung Ihrer Seite und der Strukturierung der müssen, ist für die Wireframes viel einfacher Warum tun Sie das in der Entwurfsphase? Stellen Sie also sicher, dass Sie Ihre Kunden über Ihren Designprozess informieren Ihre Kunden über Ihren Designprozess Sie werden Sie für Ihre Professionalität und für Ihr Vertrauen in Ihren Prozess lieben , auch wenn sie sich am Anfang dagegen gewehrt haben Ordnung, im nächsten Abschnitt geht es darum, das Ganze in Webflow zu erstellen . Bleib hier 110. Webflow Entwicklung: Alles klar, Dies ist mein Lieblingsteil Gebäude Entwürfe innerhalb Wetklo in diesem Abschnitt. Wir werden dieses Homepage-Design erstellen, und wir werden dies tun, indem wir bereits alles verwenden, was wir in weap Low gelernt haben, aber auch einige neue Konzepte, die wir noch nicht behandelt haben. Im nächsten Abschnitt werden wir Interaktionen lernen, Werkzeug innerhalb weinte Fluss, und wir werden es verwenden, um einige Interaktionen und Animationen zu erstellen, um die gesamte Seite zum Leben Interaktionen zu bringen . Machen Sie Website spannender und beeindruckender wird Spaß machen. Und im Abschnitt danach werden wir Log aufbauen, wo wir CMS Content Management-System durch Nassfluss lernen und wie man jede Seite in eine dynamische Seite verwandeln, um Informationen aus der Datenbank zu ziehen und wie man tatsächlich eine Datenbank innerhalb bauen, ah weinte Fluss und wie man es strukturiert, so können wir die schöne blawg mit verschiedenen dynamischen Feldern wie Name des Autors, Schlagzeilen, Fotos zu decken Fotos und all das erstellen Feldern wie Name des Autors, Schlagzeilen, . Also, ohne weitere Umschweife, lasst uns eintauchen, bleiben 111. Webflow 2: Hintergrundstile: In diesem Video werden wir einen kleinen Teil der Helden-Sektion erstellen, nur das Hintergrundbild Und dazu lernen wir ein Konzept kennen, das wir noch nicht ausführlich behandelt haben, nämlich die Hintergrundstile. Lassen Sie uns zunächst ein neues Projekt erstellen. Webflow-Plan erlaubt nur zwei nicht gehostete Projekte Wenn Sie Ihr Limit bereits erreicht haben, was Sie wahrscheinlich getan haben, können Sie eines dieser vorherigen Projekte löschen . Bevorzugen das erste, das einfache Wir werden dieser Team-App einen Namen und eine leere Vorlage auswählen Wie immer beginnen wir mit dem Abschnitt. Wir verwenden bereits Hintergrundstile, um unseren DVBlocks eine einfarbige Hintergrundfüllung zu Aber das ist nur ein kleiner Teil dessen, was wir mit Hintergrundstilen machen können Genau wie bei Figma können wir auch Hintergrundfüllungen mit Farbverläufen, Bildfüllungen und Farbüberlagerungen angeben Bildfüllungen und Farbüberlagerungen All das ist zugänglich, indem Sie auf dieses Plus-Symbol unter Das erste ist das Hintergrundbild. Das werden wir in diesem Fall verwenden. Darauf kommen wir später zurück. Als nächstes haben wir einen linearen Gradienten , der ähnlich wie figmasGradient funktioniert ändern Doppelklicken Sie auf diese Markierungen, um die Start - und Endfarben zu Sie können auch den Winkel des Verlaufs festlegen. In Figma verwenden wir diesen Stick , der manuell bewegt werden kann Aber hier müssen wir den Winkel einstellen, indem wir dieses Einstellrad drehen oder einfach auf diese Drehregler klicken oder den genauen Grad in dieses Feld eingeben Als nächstes haben wir einen radialen Gradienten. In Figma können wir die Positionierung manuell verschieben, indem wir den Griff dieses Sticks ziehen, aber in Webflow können wir das tun, indem wir die Positionierung auf dieser Map ändern Auf ähnliche Weise können wir die Größe des Verlaufs über diese Schaltflächen ändern Größe des Verlaufs über diese Schaltflächen Sie haben eine Erklärung, wie Größe bestimmt wird, aber wen interessiert das? Wechsle sie einfach um, um zu sehen, was für dich funktioniert. Die letzte Option ist Farbüberlagerung. Dies wird hauptsächlich verwendet, um eine halbtransparente Farbe auf Bilder zu legen , wie wir es in Figma getan haben, aber statt eines Farbverlaufs nur eine feste Füllung Damit das funktioniert, müssen wir ein Bild als zusätzliche Ebene hinzufügen und es unter dem Overlay platzieren Es funktioniert genauso, wie Sie es erwarten würden. Ausblenden, einblenden, herumziehen, löschen. In Ordnung, in unserem Fall müssen wir ein Hintergrundbild hinzufügen. Wir müssen das Bild aus unserer Figma-Datei exportieren und es dann hier hochladen Oh, wir haben drei Größenoptionen Die erste ist benutzerdefiniert, sodass wir unserem Bild benutzerdefinierte Werte geben können . Tiling ist standardmäßig aktiviert. Wir müssen das von hier entfernen. Wir wollen, dass sich das Bild ausbreitet und den gesamten Raum der Box ausfüllt. Dafür müssen wir das Cover auswählen. Bei der Option Titelbild wird die Größe und es wird so zugeschnitten, dass es den gesamten Bereich Mit anderen Worten, es wird den gesamten Raum abdecken. Bei einem Container wird die Größe des Bilds geändert, um sicherzustellen , dass alle Teile des Bildes sichtbar sind Egal, wie Sie die Bildschirmabmessungen oder die Größe des Div-Blocks ändern , das gesamte Bild ist immer sichtbar Das bedeutet, dass es oft leere Lücken gibt. In unserem Fall ist Deckung also am besten. Wie Sie sehen können, ist die Cover-Einstellung jetzt sehr flüssig. Es passt sowohl die Größe als auch den Zuschnitt an, sodass das Bild das gesamte Objekt abdeckt Falls erforderlich, wird das gesamte Bild über seine Originalgröße hinaus gestreckt gesamte Bild über seine Originalgröße hinaus gestreckt Wenn es um das Zuschneiden geht, haben wir den Positionierungsoptionen die Kontrolle darüber, auf welcher Seite unter den Positionierungsoptionen die Kontrolle darüber, auf welcher Seite zugeschnitten wird Diese Positionierungskarte ist eine hervorragende visuelle Möglichkeit, Anpassungen vorzunehmen und zu sehen, welche am besten funktioniert Die Standardpositionierung, die oben links ist, ist nicht sehr gut. Der Laptop, auf den sie schaut , ist tatsächlich wichtig für die Geschichte. Ohne den Laptop im Rahmen wissen wir nicht, was sie tut. Das Bild wird verwirrend. Angesichts dieser Tatsache müssen wir also eine Position wählen, an der der Laptop jederzeit angezeigt wird. Die Zentrierung könnte besser sein. Dadurch wird das Bild in der Mitte verankert und überschüssiges Material wird an allen vier Seiten abgeschnitten. Im Moment ist es gut. Wenn wir den Inhalt einfügen, müssen wir ihn möglicherweise anpassen. Aber wir vergessen eine weitere Größe, die breiteste. Wir müssen auch dort nachsehen. Das ist für Sie vielleicht nicht sichtbar, aber das Foto ist hier etwas verschwommen. Warum? Weil das Bild, das wir exportiert haben, 1.440 Pixel groß ist. Das ist die Größe unseres Designrahmens in Figma. Bei größeren Bildschirmen dehnt es sich also aus und das Foto verliert an Qualität Im Moment hat die Vorschau in voller Breite, die ich mir ansehe, 1.920 Pixel Dies ist deutlich größer als die 1.440, sodass das Foto über seine Originalgröße hinausgeht Um dieses Problem zu beheben, müssen wir größeres Bild aus Figma exportieren, und wir müssen etwas exportieren, das groß genug ist, um die meisten Bildschirmgrößen abzudecken Und das sind normalerweise 1.920 Pixel. sind natürlich höhere Auflösungen als das, aber wir müssen nicht zu verrückt werden, denn das ist eine sehr kleine Minderheit Und selbst in diesen Fällen nutzen Leute, die sehr große Bildschirmgrößen verwenden, ihren Browser nicht voller Breite auf ihrer Bildschirmgröße. So oft verkleinern sie es immer noch und sehen es sich vielleicht immer noch auf einer Größe von 1920 Pixeln an Okay, um eine größere Größe für unser Bild zu exportieren, können wir einfach die gewünschte Breite in diese Größeneinstellung eingeben gewünschte Breite in diese Größeneinstellung Geben Sie 1920 gefolgt von W für die Breite ein. Auf diese Weise exportieren wir das Foto in 1.920 Pixel Y. Achten Sie dabei darauf, dass das Originalbild, das Sie hier einfügen, mindestens 1.920 Pixel breit ist Andernfalls dehnen Sie das Bild einfach wie Spandex, und das ist dasselbe, was in Webflow passiert , Das Originalbild, das ich in Figma platziert habe, war groß. Ich habe es einfach verkleinert , um es perfekt im Rahmen zu positionieren Jetzt können wir zurückgehen und es für unseren Heldenbereich hochladen. Und das ist alles. Wir haben gelernt, wie man Hintergrundstile in Webflow verwendet, vor allem die Bildeinstellungen und wie man es perfekt positioniert, um sicherzustellen, dass es sich auf vielen verschiedenen Bildschirmgrößen sehr gut dehnt und verkleinert auf vielen verschiedenen Bildschirmgrößen sehr gut dehnt und verkleinert Ich habe einige andere selten verwendete Einstellungen in den Hintergrundstilen übersprungen , aber inzwischen kennst du meinen Unterrichtsstil bereits Ich mag es nicht, dein Gehirn mit Dingen zu überladen , bis wir sie wirklich brauchen Wir werden im nächsten Video mit unserer Helden-Sektion weitermachen , also bleib dabei. 112. Webflow 2: Navbar (Team-App): In diesem Video werden wir die Navbar erstellen. Wenn du dich erinnerst, ist die Navigationsleiste eine vorgefertigte Komponente in Webflow, die wir von hier aus direkt auf die Leinwand ziehen und sie so gestalten können, wie wir es Hier ist ein versteckter Webflow-Trick. Drücken Sie die Befehlstaste oder E. Sie erhalten diese Schnellsuchleiste Hier können wir alle Elemente durchsuchen und Ressourcen und vieles mehr finden. Sie können die Navigationsleiste durchsuchen und sie direkt auf die Seite ziehen oder einfach die Eingabetaste drücken und wir fügen sie automatisch Okay, was müssen wir also mit einer Navbar machen? Das Erste, was mir aufgefallen ist, ist die Größe des Containers. Navbar verwendet eine Standard-Containerbreite von 950 Pixeln oder so ähnlich Wenn Sie sich erinnern, haben wir beim letzten Mal einen anderen Container verwendet, aber welche Containergröße möchten wir verwenden Das ist ziemlich einfach herauszufinden. Wir müssen nur den Behälter Figma messen , der genau der vollen Breite unseres Gitters Zeichne ein Rechteck darüber und sieh, wie breit dieses Rechteck ist Das sind 1.160 Pixel. Was müssen wir jetzt in Webflow tun? Wir müssen nur den Container nehmen und ihm eine neue maximale Breite geben. Warum geben wir ihm die maximale Breite und nicht die reguläre Breite? Weil die normale Breite nicht reagiert. Wir möchten, dass es schrumpft, wenn der Bildschirm schrumpft, und bei einer normalen Breite bleibt es unabhängig von der Bildschirmgröße bei 1.160 Pixeln geklebt Wenn wir den Bildschirm verkleinern, wird die Navigationsleiste an die Ränder Deshalb müssen wir sie etwas auffüllen. Und da haben wir es. Als Nächstes müssen wir den Hintergrund ändern. Unsere Navbar im Design ist transparent. Das lässt sich leicht ändern. Wählen Sie die gesamte Navigationsleiste aus, nicht nur den Container, und ändern Sie die Farbe auf transparent Okay, jetzt fügen wir das Logo hinzu. Wir müssen es zuerst aus Figma exportieren. Wir werden es als SVG-Datei exportieren , weil es für vektorbasierte Bilder das beste Dateiformat Es hat eine kleine Dateigröße und verliert nie an Qualität, und verliert nie an Qualität egal wie stark Sie es dehnen. Um das Logo in die Markenbox einzufügen, müssen wir zuerst das Bildelement löschen. Hast du gesehen, was ich hier gemacht habe? Schnell, gut, dann suche nach Bild. Und weil ich das Markenelement ausgewählt hatte, wurde es sofort angezeigt, als ich die Eingabetaste drückte. Lassen Sie uns als Nächstes die Links formatieren. Aber zuerst müssen wir die Schrift zu unserem Projekt hinzufügen. Wir benutzen ein Google-Telefon namens Kavin. Es ist hier nicht in der Liste der Schriftarten enthalten, daher müssen wir die Schrift aus den Projekteinstellungen hinzufügen Wir können über diesen Link hier auf diese Seite zugreifen. Ich bringe dich genau an den richtigen Ort. Ich denke, wir verwenden den Großteil des Telefonstils, also fügen wir alles hinzu. Und fertig, jetzt können wir zum Designer zurückkehren und mit dem Bauen oder Entwerfen beginnen. Wenn Sie den Designer-Tab geöffnet gelassen haben, stellen Sie sicher, dass Sie ihn aktualisieren, nachdem Sie die Schrift hinzugefügt haben, sodass die Schrift im Drop-down-Menü angezeigt wird Die naheliegendste Methode, ein Telefon auf etwas anzuwenden, besteht darin, das Element auszuwählen und die Schriftart zu ändern Dabei wird jedoch nicht die volle Leistungsfähigkeit von HTML und CSS genutzt. Wenn wir einen Schriftstil auf hohem Niveau anwenden, wird er von allen Kindern vererbt. Das höchste Element in der Hierarchie ist der Körper. Wir können vom Navigator aus auf den Körper zugreifen. Sobald Sie den Körper ausgewählt haben, gehen Sie zum Auswahlfeld und wählen Sie im Drop-down-Menü den Körper aus Wenn Sie das Body-Tag auswählen, werden Sie sehen, dass einige der Telefonstile blau sind Das bedeutet, dass einige Stile bereits standardmäßig darauf angewendet wurden. Wir können hier das Telefon auf Kabine umstellen. Jetzt werden alle neuen Elemente, Überschriften und Absatz-Tags standardmäßig in der Zwischenablage abgelegt, bis wir sie überschreiben Warum ist dieser Ansatz dem direkten Ändern der Schriftarten für jedes Element überlegen direkten Ändern der Schriftarten für jedes Nun, das spart zunächst Zeit. Aber zweitens indem wir einfach das Body-Tag ändern , können wir, indem wir einfach das Body-Tag ändern , die Schriftart auf der gesamten Website mit ein paar Klicks bearbeiten . Das ist es. Jetzt erben Navinks die Schrift vom Body-Tag. Du kannst sogar auf diesen orangefarbenen Link klicken und er wird dir sagen, dass er den Stil vom Body-Tag erbt Lassen Sie uns nun die restlichen Eigenschaften der Links formatieren. Ändern Sie von hier aus die Farbe auf Weiß. Die anderen Links waren modern, woran liegt das? Weil wir standardmäßig keine Style-Klasse auf sie angewendet haben. Durch die Änderung des Autos in der ersten Version Webflow automatisch eine neue Stilklasse erstellt und sie als Navigationslink bezeichnet Jetzt können wir diese Klasse nehmen und sie auf die anderen beiden anwenden, sodass alle Änderungen für alle gelten. Wir haben fünf Nab-Links im Design und einer davon ist ein Button Lassen Sie uns die Größe der Links an die Größe der Schaltfläche anpassen Wenn wir einen von ihnen auswählen und die Abstandseigenschaften überprüfen, werden Sie feststellen, dass ihre Größe durch den Abstand bestimmt wird. Wenn wir diese Abstandswerte so ändern , dass sie mit der Schaltfläche in unseren Designs übereinstimmen, erhalten wir die passende Größe Die Polsterung der Schaltfläche in den Designs beträgt 12 vertikal und 20 Lassen Sie uns den letzten Link so gestalten, dass er zu einer Schaltfläche wird. Wir müssen nur einen Hintergrund hinzufügen und die Ecken abrunden. Aber wir können es nicht einfach auf Anhieb stylen, oder? Es hat dieselbe Klasse wie andere, also wird es alle Links bearbeiten. Was machen wir? Diese Kombiklasse natürlich. Gehen Sie zum Auswahlfeld und geben Sie einen neuen Namen neben dem Nab-Link Das wird ihm eine Kombinationsklasse geben. CSS unterscheidet zwischen Groß- und Kleinschreibung, es spielt also keine Rolle, ob Sie Groß- oder Kleinbuchstaben verwenden Ich bevorzuge Kleinbuchstaben, um Zeit zu sparen. Webflow schreibt automatisch Großbuchstaben . Ich schlage vor, Kleinbuchstaben zu verwenden. Das Tippen ist schneller und Sie werden auch einen Unterschied zwischen Stilen feststellen , die automatisch von Webflow erstellt wurden, und denen, die Sie manuell erstellt haben In Ordnung, was sind also die Eigenschaften unserer Schaltfläche? Es hatte einen weißen Hintergrund mit 20% Opazität und vier abgerundete Ecken mit vier Pixeln Mit diesem A für Alpha können Sie die Transparenz der Farbe einstellen Geben Sie 20 ein und los geht's. Die abgerundeten Ecken müssen von hier aus unter dem Randradius aufgetragen werden . Hervorragend, lassen Sie uns jetzt den Abstand korrigieren. Links in unseren Designs sind 30 Pixel vom oberen Rand entfernt. Wir können dies in Webflow auf zwei Arten erstellen, indem wir entweder einen Rand von 30 Pixeln über dem Container hinzufügen oder der Navigationsleiste selbst einen Abstand von 30 Pixeln hinzufügen Das Ergebnis ist dasselbe, aber das zweite ist besser Da Container eine Klasse sind , die wir an anderer Stelle wiederverwenden werden, ist es am besten, sie intakt zu lassen. Die Navbar-Klasse wird dagegen nur in der Navbar verwendet, sodass wir sie sicher nach Belieben gestalten können Wie Sie sehen können, ist das Logo nicht zentriert. Es ist kaum wahrnehmbar, wenn Sie die Grenzen des Containers nicht sehen, aber wir können solche Details nicht ignorieren. Wir möchten, dass unsere Website makellos aussieht, ein Kunstwerk. Wie zentrieren wir das Logo also in der Mitte? Wann immer Sie etwas verschieben oder positionieren müssen, denken Sie immer zuerst an Ränder und Polsterungen Diese Eigenschaften werden die meisten Fälle abdecken. Wir können einfach einen oberen Rand über dem Logo hinzufügen und fertig. Ich messe hier nur mit einem Auge. Unsere Navigationslinks haben momentan keine Hover-Effekte auf sie Dadurch ist die Navbar tot und es macht nicht viel Spaß, mit ihr zu interagieren Beim letzten Mal haben wir den Links einen zugrunde liegenden Rahmen hinzugefügt. Dieses Mal können wir etwas anderes machen, etwas Einfacheres wie einen Farbwechsel. Hier ist einer der einfachsten, schnellsten und effektivsten Hover-Effekte , den Sie für viele verschiedene interaktive Elemente verwenden können viele verschiedene interaktive Ändern Sie die Deckkraft beim Hover. Wie wenden wir den Hover-Effekt Elemente aus dem Hover-Status an , auf den Sie hier zugreifen können Lassen Sie uns die Opazität auf 80% ändern. Und da funktioniert dieser einfache Effekt auch auf der Unterseite. Fügen wir einen Übergangseffekt hinzu, damit der Hover-Wechsel angenehm und reibungslos abläuft Dies muss für einen regulären Status hinzugefügt werden, nicht für den Hover-Status, aber es wird sich auf den Hover-Status auswirken Sie würden erwarten, dass es innerhalb des Hover-Effekts bearbeitet werden kann, ist es aber nicht So funktioniert CSS in diesem Fall. Es steckt wahrscheinlich Logik dahinter. Lassen Sie uns die Reaktionsfähigkeit des Desktops testen, nicht die der Handys. werden wir am Ende tun. Und das ist es. Navbar sieht gut aus. Wir werden den Heldenbereich im nächsten Video beenden . Bleib hier. 113. Webflow 2: Inhalt von Helden: Und wir sind wieder dabei, den Inhalt des Heldenbereichs zu erstellen. Für Stars brauchen wir einen Container, oder? Und gib ihm eine Containerklasse, die wir bereits beim letzten Mal in der Napbar erstellt In Ordnung, lassen Sie uns unseren Inhalt in den Container legen. Wir haben eine Überschrift, einen Absatz und ein Formular. Wir werden die Überschrift und den Absatz in diesem Video gestalten, aber im nächsten Video werden wir das Formular erstellen, damit wir Formulare eingehender behandeln können , da wir sie noch nicht bearbeitet haben. Wir brauchen etwas Platz an den Seiten, genau wie bei der Napbar Wir können die Polsterung zur Heldenbox hinzufügen. Aber warte eine Sekunde. Das sieht nicht richtig aus. Die Nab-Bar ist jetzt noch enger geworden. Das liegt daran, dass wir eine Polsterung an der Nab-Bar haben. Und die Navigationsleiste befindet sich innerhalb des Hero-Blocks, sodass der Abstand doppelt so groß ist, was insgesamt 120 Pixeln entspricht Lassen Sie uns also die Polsterung aus der Navigationsleiste entfernen , weil wir sie nicht mehr benötigen Der vom Helden wird sich darum kümmern. Sie können jeden Stern ganz einfach zurücksetzen, indem Sie hier klicken. Normalerweise verwende ich die Tastenkombination , also Option plus Klick. Ich denke, es sollte Aclick für Windows sein. Lassen Sie uns die Überschrift gestalten. Größe ist 55 und das Gewicht ist normal. Das Gleiche gilt für andere Beispiele einer Überschrift überall in unserem Design. Es wird also eine gute Idee sein, diese Überschrift als H-One-Tag zu gestalten und nicht nur als Klasse. Erinnerst du dich, was der Unterschied zwischen einer Klasse und einem Tag ist? Das Tag ist ein grundlegendes HTML-Element. So teilen Sie dem Browser mit , dass etwas eine Überschrift, ein Absatz oder ein DO-Block ist. Wenn wir ein H-One-Tag direkt formatieren, können wir alle H-One-Tags auf unserer Website steuern , ohne Klassen darauf anwenden zu müssen. Style Tech, achte darauf, dass keine Klasse ausgewählt ist. Das Auswahlfeld muss also leer sein. Manchmal vergisst du es und wir stylen direkt eine Überschrift Dadurch wird automatisch eine neue Klasse erstellt. Alle Änderungen gelten also nur für diese Klasse. Um dies zu beheben, entfernen Sie einfach die Klasse und beginnen Sie von vorne. Und wählen Sie alle H-One-Überschriften aus der Drop-down-Liste aus. Jetzt gestaltest du das H-One-Tag. Das ist genau das, was wir wollen. Wir benötigen den Wert für die Zeilenhöhe. Und da wir die Standardzeilenhöhe dieser Überschrift nie ändern , steht im Feld momentan Auto. WAP akzeptiert das nicht als Wert, also wird es für uns nicht funktionieren. Wenn Sie jedoch in das Feld klicken, zeigen Ihnen die Platzhalter-Tags die Standardzeilenhöhe in Pixeln an, was etwa 67 Pixeln entspricht Wenn Sie weiterhin Prozenteinheiten anstelle von Pixeleinheiten für die Zeilenhöhe verwenden möchten, können Sie einfach nachrechnen Der Prozentwert ist relativ zur Telefongröße. Beispielsweise bedeutet eine Zeilenhöhe von 100%, dass sie der Telefongröße entspricht. Bei einem 50-Pixel-Telefon das einer Zeilenhöhe von 50 Pixeln 200% der Zeilenhöhe wären 100 Pixel, also im Grunde das Doppelte der In unserem Fall können wir 67 nehmen und es durch 55 teilen oder die Telefongröße mit 100 multiplizieren, sodass wir den Prozentwert erhalten , der ungefähr 122% entspricht Ich bevorzuge generell Prozentsätze , weil das einen großen Vorteil hat Wenn Sie Ihre Telefongröße auf kleineren Bildschirmen ändern, müssen Sie die Zeilenhöhe nicht ändern, da es sich um einen Prozentwert handelt, der auf der Grundlage der neuen Telefongröße berechnet wird der auf der Grundlage der neuen Telefongröße berechnet Bei der Pixeleinheit wird diese Höhe jedoch beibehalten, wenn Sie die Telefongröße ändern. Sie werden also mit einigen seltsamen Situationen mit der Zeilenhöhe enden . Beachten Sie, dass das Begrenzungsfeld unverändert bleibt. Das liegt daran, dass die Zeilenhöhe ein fester Pixelwert ist. Während der prozentualen Höhe wächst und schrumpft die Begrenzungsbox dagegen konstant mit der Telefongröße Ordnung, ich werde das nicht auf Weiß setzen , wissen Sie warum? Weil die meisten unserer Schlagzeilen nicht weiß sein werden. Sie werden diese dunkelblaue Farbe haben. Lassen Sie uns stattdessen die dunkelblaue Farbe hier einstellen, und dann werden wir einen anderen Weg finden , diese spezielle Farbe in Weiß zu ändern. Ich gehe in den Bearbeitungsmodus für Farbstile damit ich den Farbcode kopieren kann. Andernfalls wird es nicht auf Anhieb angezeigt, da wir diese Farbe als Stil festgelegt haben. Ich möchte diese blaue Farbe auch irgendwie speichern, damit ich nicht jedes Mal nach dem Hex-Code suchen muss , wenn ich ihn brauche. Geben Sie Variablen ein. Wahrscheinlich ist Ihnen dieser kleine lila Punkt aufgefallen, der jedes Mal erscheint, wenn Sie mit der Maus auf einige Stile zeigen diesem Ding können Sie verschiedene Werte speichern, die Sie wiederverwenden und von einem Ort aus steuern können Klicken Sie beispielsweise auf diesen Punkt und dann auf das Plus-Symbol, um eine neue Variable zu erstellen , und nennen Sie diese Variable einfach dunkelblau oder marineblau oder was auch immer Sie möchten. Diese Farbe ist jetzt zu einer Variablen geworden, die wir an anderer Stelle wiederverwenden können, beispielsweise auf einer Schaltfläche. Sie müssen nur noch einmal auf diesen Punkt klicken, und jetzt können Sie sehen, dass die dunkelblaue Variable in der Dropdownliste verfügbar ist, die wir auf den Hintergrund dieser Schaltfläche anwenden können Wenn Sie der Meinung sind, dass dies genauso funktioniert wie Styles Infigma, haben Sie Recht Es ist genau das gleiche Konzept mit einem anderen Namen und einigen anderen kleinen Unterschieden, aber die Idee dahinter ist dieselbe Wenn Sie beispielsweise Ihre Variable bearbeiten , werden alle Instanzen auf Ihrer Seite aktualisiert. Das ist das gleiche Verhalten wie bei Figma. Sie können auch die Verknüpfung des Werts mit der Variablen aufheben und dann die Farbe unabhängig bearbeiten Figma zeigt hier alle Stile im Panel an , wenn kein Element ausgewählt ist. Webflow hat jedoch ein spezielles Panel für Variablen, in dem Sie alle Variablen an einem Ort verwalten können Bearbeiten Sie sie, löschen Sie sie, fügen Sie neue hinzu. Dies zeigt all die verschiedenen Variablentypen , die Sie hinzufügen können. Wenn Sie eine Variable an Stellen löschen, an denen sie verwendet wurde, erhalten Sie diese Meldung. Von hier aus können Sie die Variable entweder wiederherstellen oder die Verknüpfung aufheben Und das war es auch schon. Es ist eine einfache, aber nützliche Funktion. In Ordnung, weitermachen. Das H-One-Tag ist fertig. Wenn wir eine neue Überschrift hinzufügen, übernehmen wir jetzt die Überschriften-Stile. Wie wäre es also mit der weißen Farbe für die Heldenüberschrift? Dem können wir einfach eine neue Klasse hinzufügen und ihn dann weiß stylen. Ich füge in diesem Fall gerne einen Klassennamen weiß hinzu, wenn ich nur die Farbe ändere. Auf diese Weise ist der Klasse klar, was sie tut, und ich kann diese Klasse jedes Mal wiederverwenden, wenn ich eine weiße Überschrift oder einen anderen weißen Text benötige . Immer wenn Sie versuchen, eine neue Farbe auf etwas anzuwenden , auf das bereits eine Variable angewendet wurde, müssen Sie zuerst die Verknüpfung der Farbe der Variablen aufheben und dann können Sie die benutzerdefinierte Farbe eingeben Diese Option wird angezeigt , wenn Sie darauf klicken, nicht über dieses Stiftsymbol Übrigens funktionieren in dieser Füllung viele gebräuchliche Farbnamen, sodass Sie sie einfach eingeben können, z. B. Weiß oder Schwarz , Rosa usw. Eine weitere Sache, die ich ändern möchte, ist der obere Rand. Bei H-One-Tags gibt es standardmäßig einen oberen Rand von 20 Pixeln. Dadurch wird unser Abstand zwischen den Abschnitten um zusätzlichen Platz erweitert. Also lass uns es einfach loswerden. Wenn wir es jemals brauchen, können wir es jederzeit zu der jeweiligen Überschrift hinzufügen. Was den Absatz angeht, wir werden das Tag nicht stylen. werden wir die Klasse formatieren Stattdessen werden wir die Klasse formatieren, weil der Absatz im Heldenbereich anders ist als der Absatz oder an anderer Stelle auf der Seite. Lassen Sie uns abschließend den Heldeninhalt richtig in der Mitte positionieren den Heldeninhalt richtig in der Mitte Das ist so einfach wie das Hinzufügen eines Randes oben, aber wir möchten keinen Rand auf dem Container hinzufügen Wir werden diese Containerklasse auf unserer Seite wiederverwenden , und wir haben sie bereits in der Navbar Wenn Sie also oben einen Rand hinzufügen , werden alle Instanzen dieses Containers Es gibt zwei Möglichkeiten, dies zu tun. Wir könnten dem Container und dann am Rand eine Kombinationsklasse hinzufügen . Auf diese Weise bleibt unser Basiscontainer intakt, aber eine etwas bessere Option besteht darin, eine zusätzliche Box hinzuzufügen und den Inhalt hineinzulegen. Dann können wir diese Box so gestalten, wie wir wollen. Ich bevorzuge diese Option , weil sie etwas sauberer ist und später mehr Flexibilität bietet. Füge einen neuen D-Block hinzu und ziehe die Elemente einfach hinein. Möglicherweise ist es einfacher, dies vom Navigator aus zu tun. Nennen wir diesen Dip-Block etwas wie Hero-Content und fügen einen ähnlichen Spielraum hinzu, den wir in den Designs haben. Geben wir ihm eine maximale Breite, damit er gut in unseren Designs enthalten ist . Siehst du, die Verwendung des separaten Dibblocks hat uns bereits mehr Flexibilität gegeben, was wir damit machen können Hervorragend. Lassen Sie uns die Reaktionsfähigkeit überprüfen Perfekt. Jetzt sieht alles scharf aus. haben wir nur noch ein Formular übrig, das wir als Nächstes ausfüllen werden. 114. Webflow 2: Formulare: Und wir sind zurück in diesem Video, wir werden die Grundlagen von Formularen im Weblog lernen Im Elements-Bedienfeld gibt es einen speziellen Abschnitt, der den Formularen und Formularelementen gewidmet der den Formularen und Formularelementen gewidmet Der erste Schritt besteht immer darin, einen Formularblock hinzuzufügen , der bereits einige Elemente enthält. Wir können alles davon entfernen, wie wir möchten, und wir können weitere Elemente innerhalb des Formularblocks hinzufügen. Lass uns einen Blick darauf werfen. Woraus besteht dieser Formularblock? Es gibt drei Gruppen innerhalb von Form, die alles enthält , was wir gerade sehen. Wie das Feld und die Schaltfläche „ Senden“ haben wir eine Erfolgsmeldung, die zunächst ausgeblendet ist und erst angezeigt wird, wenn das Formular erfolgreich gesendet wurde. Und die Fehlermeldung, die nur angezeigt wird, wenn beim Fehler Versuch, das Formular abzusenden, irgendwelche Fehler aufgetreten sind. Wenn wir dem Formular neue Elemente hinzufügen möchten, können wir Dinge wie Dropdowns und Chatboxen in das Formular ziehen und Chatboxen in das Jedes Formularfeld hat seine eigenen Einstellungen. Wenn Sie auf dieses Zahnradsymbol klicken oder auf das Formularfeld doppelklicken, wird die Einstellung für dieses Eingabefeld angezeigt. Das erste Element in den Einstellungen ist der Name des Feldes. Dieser Name ist intern. Es ist genau das, was wir in der Datenbank sehen. Benutzer werden den Namen nicht sehen. Die Bezeichnung des Feldes befindet sich draußen. Es ist nicht in den Einstellungen. Es ist nur ein normaler Textblock, der sich über dem Feld selbst befindet der sich über dem Feld selbst und den wir wie jeden anderen Textblock bearbeiten und gestalten können . Wenn wir jedoch einen minimalistischeren Look wünschen, bei dem sich das Etikett innerhalb und nicht außerhalb des Felds befindet, wie wir es in unseren Designs haben, können wir dies unter einem Platzhalterfeld hinzufügen Und dann können wir das Etikett loswerden. Die nächste Einstellung ist der Texttyp. Das bedeutet, welche Art von Text in diesem Feld akzeptiert wird. Im Moment ist es auf E-Mail eingestellt, sodass nur E-Mails zugelassen werden und alles andere zu einem Fehler führt. Wenn Sie Namen und normalen Text sammeln möchten, setzen wir dies auf Flugzeug, dann akzeptiert es alle Arten von Informationen. Sie haben auch Optionen für Passwort, Telefon und Nummer. Darunter haben wir eine Option, mit der Sie das Feld als Pflichtfeld und möglicherweise den Autofokus festlegen Autofokus bedeutet, dass das Feld beim Laden der Seite sofort ausgewählt bei einem Drop-down-Auswahlfeld auf Einstellungen, Klicken Sie bei einem Drop-down-Auswahlfeld auf Einstellungen, um die Auswahlliste in der Dropdownliste zu bearbeiten die Auswahlliste in der Sie können die Auswahlmöglichkeiten bearbeiten, löschen, weitere hinzufügen, sie neu anordnen, im Grunde alles, was Sie erwarten würden Wir brauchen kein Drop-down-Menü für unser Formular, damit wir es loswerden können In Ordnung, lassen Sie uns unser Formular stylen. In unseren Designs haben wir das Formular horizontal gestaltet, sodass das Feld und die Schaltfläche nebeneinander liegen. Hier sind sie übereinander angeordnet. Wie können wir sie also nebeneinander ausrichten? Nun, der Formularblock unterscheidet sich nicht von allen anderen Elementen auf dieser Seite. Wir können ihm Klassen geben und sie über das Bedienfeld „Stile“ gestalten. Die Flexbox ist eine naheliegende Wahl , wenn es um die horizontale Ausrichtung geht Stellen Sie sicher, dass Sie das Formularelement anstelle eines Formularblockelements auswählen , da wir versuchen, das Feld und die Schaltfläche auszurichten Der Formularblock enthält Formular-, Erfolgs- und Fehlermeldungen. Es wird also diese drei Elemente aufeinander abstimmen. Das wird passieren. Wählen Sie also noch einmal das Element mit dem Namen form aus und geben Sie ihm dann einen Display-Flex. Jetzt können wir das Feld und die Schaltfläche unabhängig voneinander gestalten. Unser Feld ist 56 Pixel hoch, hat abgerundete Ecken und enthält einen Text mit 16 Pixeln und grauer Farbe. Und jetzt, um dem Platzhaltertext innerhalb des Feldes eine andere Farbe zu geben, werden Sie feststellen, dass das Ändern der Farbe nichts daran Das liegt daran, dass diese Textfarbe die Farbe des Textes ändert , den der Benutzer tatsächlich eingibt. Sie können dies im Vorschaumodus überprüfen. Aber das wollen wir nicht ändern. Das war in Ordnung so wie es war. Um das Platzhalterfeld zu formatieren, gehen Sie zu den Status des Felds und wählen Sie Platzhalter Jetzt können wir die Farbe des Platzhaltertextes ändern. Hervorragend. Nun zum Button. Geben wir ihm einen Klassennamen-Button. Der Text in der Formularschaltfläche kann wie andere Formularelemente über die Einstellungen bearbeitet werden . Dies unterscheidet sich ein wenig von anderen Schaltflächen, bei denen wir Text direkt bearbeiten können, indem wir ihn durchklicken. A Ich möchte , dass du hier auf etwas achtest. Sie sehen, dass der Button etwas höher als ein Feld ist. Aber die Schaltfläche hat eigentlich keine Höhe und hat einen Abstand von nur neun Pixeln Warum ist sie dann so groß? Das liegt an den Einstellungen, die der übergeordneten Flexbox zugewiesen wurden. Sie sehen hier, dass Stretch steht. Das bedeutet, dass die Flex-Kinder die Höhe der Flexbox spüren , bis sie anders angewiesen Wenn Sie das ändern, ändert sich auch die Höhe. Aber du fragst dich vielleicht, warum das Feld eine andere Höhe hat. Das hat mit einem Standardrand zu tun , der auf das Feld angewendet wird. Dieser zusätzliche Rand von zehn Pixeln dehnt die Flexbox aus. Die Schaltfläche hat jetzt also mehr Platz zum Ausfüllen. Wenn wir diesen Rand aus dem Feld entfernen, wird die Schaltfläche verkleinert und entspricht der Größe des Felds Aber lassen Sie uns diesen Spielraum vorerst beibehalten. Manchmal, wenn wir mehrere Felder haben, benötigen wir diesen Rand. Wir können dieses Problem beheben, indem der Schaltfläche einfach eine feste Höhe geben. Ich möchte, dass Sie sich dieses Verhalten genauer ansehen , da Sie häufig auf solche Unregelmäßigkeiten innerhalb von Webflow stoßen werden oder generell, wenn Sie eine Website entwerfen und entwickeln, weil alle Elemente und alle Einstellungen irgendwie miteinander interagieren und die Struktur der Website verändern Ein Spielraum könnte also darin bestehen, ein anderes Verhalten bei einem ganz anderen Element zu ändern , richtig, genau wie in diesem Wenn mir am Anfang so etwas passiert ist, dachte ich immer: Oh, ist das ein Bug? Warum funktioniert das nicht so? Ich dachte immer, es wäre etwas mit Weblo. Dann würde ich im Forum herumlaufen und mit einer Schaltfläche oder einem Formular oder so nach diesem Fehler suchen mit einer Schaltfläche oder einem Formular oder so nach diesem Fehler Und dann komme ich irgendwann zur Antwort, und dann wäre die Antwort ganz einfach. Deshalb möchte ich, dass du lernst , nach Hinweisen zu suchen, wenn du bei etwas nicht weiterkommst und es als Rätsel betrachtest Du denkst immer, dass es eine Lösung gibt. Die Antwort ist irgendwo da. Es ist nicht so, dass das Tool kaputt ist oder es ein Fehler ist oder etwas nicht richtig funktioniert, aber es gibt ein Rätsel, das gelöst werden muss. Soweit ich mich erinnere, und es ist immer oft frustrierend, wenn Sie es mit einem Tool zu tun haben und versuchen, etwas zu bauen und einfach nicht Ihren Weg gehen und es nicht funktioniert, und Sie könnten frustriert sein und Sie könnten entmutigt werden und Sie könnten den Prozess nicht mehr genießen Ich möchte, dass du kurz Luft holst und es so betrachtest , dass es ein Rätsel ist und es einen Hinweis gibt, und du musst nur zur Antwort kommen. Also überprüfe jedes Element und finde heraus, welcher Stil mit etwas anderem interagieren kann Und du wirst die Antwort finden, und du wirst dich sehr gut dabei fühlen. Okay, schauen wir uns das Formular im Vorschaumodus an Alles sieht gut aus, aber die Schaltfläche könnte einen Hover-Effekt gebrauchen. Ich bin mir nicht sicher, warum dieser Text hier so leicht ist. Könnte daran liegen, dass wir mit dem Platzhaltertext herumgespielt und die Deckkraft etwas heller gemacht haben Egal, trage einfach diese graue Farbe hier erneut auf und ich werde das Problem beheben Ein einfacher Haarzustand wird eine kleine Änderung der Farbe bewirken. Und das war's. Eine andere Sache, die wir ändern können, sind die Erfolgs- und Fehlermeldungen. Dazu müssen wir zunächst die Bundesstaaten anzeigen , was wir in den Formulareinstellungen tun können. Wählen Sie den Formularblock aus und gehen Sie zum Einstellungsfenster. Hier können wir zwischen normalen Erfolgs- und Fehlerzuständen wechseln . Sobald Sie den Erfolgsstatus aktiviert haben, können Sie damit interagieren und ihn nach Belieben ändern. Wir können sogar andere Elemente hineinziehen oder den Hintergrund ändern, den Text gestalten oder so weiter. Anstelle dieser Erfolgsmeldung können wir die Benutzer auch auf eine andere Dankesseite weiterleiten . Dies können wir tun , indem wir in diesem Feld eine Weiterleitungs-URL hinzufügen In unserem Fall behalten wir die Erfolgsmeldung jedoch bei. Gleiche gilt für die Fehlermeldung. Ändern Sie den Status, um sie anzuzeigen , und gestalten Sie sie dann nach Ihren Wünschen. Ich bin mit dieser Standardfehlermeldung und ihrem Stil ziemlich einverstanden , also lassen wir sie so, wie sie ist. Und das war's vorerst für das Formular. Sobald wir unsere Website veröffentlicht haben, werden wir das Formular auf der Live-Website testen und sehen, wie wir die Formulareinreichungen verwalten können. 115. Webflow 2: Mockup-Abschnitt 1: Und wir sind zurück in diesem Video, wir werden einen kleinen Teil des folgenden Abschnitts machen , nur den Denken Sie daran, was wir auf der vorherigen Website getan Wir haben einen generischen Abschnittsblock erstellt. Wir haben ihm einige Standardabstände gegeben und das war's. Genau wie beim Container-Element gibt uns ein solcher generischer Abschnitt eine gute Kontrolle über das Layout der Website Lassen Sie uns also einen neuen Abschnitt löschen und ihm eine Klasse geben. Geben Sie ihm sowohl vertikal als auch horizontal etwas Polsterung. Wir benötigen 60 Pixel an den Seiten der Now-Leiste, also wiederholen wir das häufig einen Abstand von 160 Pixeln Verwenden wir für den vertikalen Abstand 80, da wir in unseren Designs zwischen den Abschnitten verwenden und 80 Pixel oben und unten zusammen 160 ergeben Ich habe keine strikte Regel welche Art von Polsterung verwendet werden soll Je nach Website kann sich das ändern, und meistens schaue ich mir das Ding nur an Und jetzt legen wir einen weiteren Container hinein und wenden den vorhandenen Klassencontainer In den Designs haben wir eine cremefarbene , etwas blaue, graue Hintergrundfarbe auf der Seite haben wir getan, auf weißen Karten, die wir auf die Seite legen , einen besseren Kontrast zu erzielen Lassen Sie uns diesen Hintergrund auf den generischen Abschnitt anwenden. Die Überschrift hat bereits den richtigen Stil, da wir das H-One-Tag zuvor gestaltet haben das H-One-Tag zuvor gestaltet Das haben wir für den Absatz nicht gemacht, also machen wir dasselbe, also lassen Sie uns ein Absatz-Tag formatieren Alle unsere generischen Absatztexte sind also stilistisch, ohne dass ihnen Klassen hinzugefügt werden. Wählen Sie dazu zuerst den Absatz aus, gehen Sie dann zum Auswahlfeld und wählen Sie alle Absätze Ordnung, jetzt wählen wir es einfach wie gewohnt, In Ordnung, jetzt wählen wir es einfach wie gewohnt, 18 Pixel groß, 26 Pixel Zeilenhöhe, und holen uns den Farbcode von dort Hervorragend. Nun zum Link Weitere Informationen Hier gibt es zwei Elemente, Text und das Pfeilsymbol. Es gibt eine Möglichkeit , einen Pfeil als Text wie ein Symbol einzufügen , aber ich habe vor, diesen Pfeil in Zukunft zu animieren, und in diesem Fall benötigen wir einen Pfeil als eigenständiges Objekt Wir haben also ein Text- und ein Bildelement. Gehen wir zu einem Textlink. Genau wie bei Überschrift und Absatz können wir auch das Link-Tag gestalten. Anstatt dieses generischen Blau werden wir es also in unser eigenes Blau ändern. Und alle Links werden jetzt diese bestimmte Farbe haben. Wenn wir nun Text an einer anderen Stelle verlinken, erbt er die Farbe von diesem Link-Tag Wir können jedoch nicht zu viel am Link-Tag ändern , z. B. an der Textgröße, da sich Links an anderen Stellen befinden, z. B. in Absätzen, Schaltflächen usw. Wenn wir es also formatieren und allen Links eine Größe von 16 Pixeln zuweisen allen Links eine Größe von 16 Pixeln wenn wir dann etwas innerhalb der Überschrift oder in einer Überschrift oder einer anderen Art von Text verlinken , dann werden alle Links zu 16, zum Beispiel so. Also alles andere, was wir brauchen, um mit einem Link zu stylen, lassen Sie uns die Klasse stylen und nicht das Tag. Um die Unterstreichung aus dem Link zu entfernen, gehe einfach zur Textdeklaration und drücke auf Keine Okay, jetzt brauchen wir einen Pfeil , der nur ein Bildelement ist Lassen Sie uns das Pfeilbild aus Figma exportieren und hier einfügen. Als SVG exportieren, das ist am besten für solche Bilder. Manchmal landen Exporte aus Figma in einem ZIP-komprimierten Ordner Sie müssen es zuerst extrahieren. Auf meinem Mac doppelklicke ich einfach und schon wird es extrahiert. Ich denke, unter Windows ist es ein Rechtsklick und dann das Extrahieren hier. Vor dem Pfeil gibt es einen Abstand von vier Pixeln. Es entspricht nicht genau der Steuer, also fügen wir noch eine negative Marge hinzu. Minus zwei Pixel scheint genug zu sein. Okay, das ist alles gut, aber es gibt ein Problem. Wenn Sie sich die Vorschau ansehen, werden Sie sehen, dass der Text ein Link ist. Sie können sehen, wie sich dieser Cursor von einem Zeigerpfeil in eine Hand verwandelt, aber das Pfeilsymbol ist nicht Teil dieses Links. Es ist ein separates Objekt. Das ist nicht das beste Arrangement. Im Idealfall möchten wir, dass der Pfeil anklickbar ist und Teil des zweiten Links Dafür gibt es eine sehr einfache Lösung. Wir müssen nur diese beiden Elemente in einem Linkblock platzieren . Um Ihren Speicher aufzufrischen, haben wir zwei Link-Elemente im Panel. Einer ist ein normaler Textlink und ein anderer ist ein Linkblock. Ein Linkblock ist wie ein Div-Block, aber es ist ein Link. Also alles, was wir hineinlegen, wird Teil dieses einen Links sein. Also fügen wir den Link-Block hinzu und ziehen diese Elemente dann in diesen Block. Aber wir können das Link-Element tatsächlich hineinziehen , weil das nicht erlaubt ist. Stattdessen müssen wir einen regulären Textblock hinzufügen. Wie Sie sehen können, wird der Text in dem Moment, in dem wir Text in den Linkblock einfügen , blau. Das liegt daran, dass dieser Linkblock Teil des alten Link-Tags ist , das wir gerade gestaltet Fügen wir diese Klasse zu diesem Text hinzu. Die Unterstreichung sollte verschwinden, tut es aber nicht. Wir müssen die Unterstreichung aus dem Linkblock selbst entfernen aus dem Linkblock Ich habe einen sehr seltsamen Weg eingeschlagen, um diese Implementierung des Links zu demonstrieren Aber der Grund, warum ich das so gemacht habe, ist wäre , dass es für Sie eine natürliche Denkweise gewesen und dass es für Sie eine natürliche Art und Weise sein wird, diesen Prozess zu durchlaufen , denn wenn Sie einen neuen Link hinzufügen möchten, werden Sie sagen: Okay, lassen Sie mich einen Textlink hinzufügen, richtig? Und dann musst du vielleicht ein Symbol zu der Schaltfläche hinzufügen oder was auch immer es ist, und du wirst denken: A, wie mache ich das? Jetzt ist dieses Symbol nicht anklickbar. Und Sie könnten stecken bleiben , weil Sie wissen, dass Sie es herausfinden müssen Deshalb wollte ich diesen falschen Weg einschlagen, damit falschen Weg genau verstehen, wie wir zurückkommen und alles so wiederholen können zurückkommen und , wie wir es eigentlich wollen, denn Sie werden auf diese Art von Szenarien stoßen , wenn Sie etwas bauen wollen, Sie gehen auf natürliche Weise vor, dass Sie davon ausgehen, dass es funktionieren wird und dann nicht und Sie stecken bleiben und du gehst irgendwie zurück und reduzierst dann einige Dinge ein Diese Art von Versuch und Irrtum und das Erlernen der holprigen Wege wird für Sie der beste Weg sein , dieses Konzept zu verstehen Egal, ob Sie das auf eigene Faust machen und selbst eine Website erstellen, es gibt einen Ort, an den Sie immer gehen und Antworten finden können, es gibt einen Ort, an den Sie immer gehen und Antworten finden können, und das ist WebForum in ihrer Community Sie sind eine hervorragende Community, die Leute reagieren darauf. Sogar Weblo hat Leute , die für diese Community und für das Forum arbeiten, und sie geben auch dort Antworten Aber auch andere Webflow-Designer wie ich und alle anderen, sie leisten Beiträge und beantworten Wenn Sie also irgendwo nicht weiterkommen, googeln Sie es und schauen Sie in Webflow-Formularen nach, denn oft hatten andere Leute und andere Webdesigner die gleiche Frage wie Sie, sodass Sie dort vielleicht schon Antworten finden Falls nicht, frag dich selbst und du wirst bestimmt jemanden finden, der dir hilft dich durch die Sache führt und dir Antworten Und den Link zum Webflow-Forum finden Sie auf der Ressourcenseite. Also schau es dir an. In Ordnung. Schließlich müssen wir diese beiden Elemente nebeneinander platzieren . Wir haben zwei Möglichkeiten. Eine besteht darin, eine Flexbox zu verwenden, aber die zweite und einfachere Option besteht darin, die Anzeigeeigenschaften des Textes zu ändern Im Moment ist es Block. Block bedeutet, dass es sich dehnt und die gesamte Linie des übergeordneten Elements einnimmt. Deshalb ist ARR gezwungen, zur zweiten Zeile zu springen. Aber wenn wir es auf Inline-Block oder Inline ändern, wird der Pfeil wieder angezeigt. Der Pfeil ist ein Bildelement, und Bildelemente sind standardmäßig bereits auf Inline-Block eingestellt, weshalb wir ihn nicht ändern müssen. Fügen wir das Leerzeichen über diesem Link „Weitere Informationen“ hinzu . Okay, wenn wir den Geheimmodus überprüfen, wird der Pfeil Teil des zweiten Links sein Und genau das brauchen wir. Schließlich müssen wir diesem Inhalt eine maximale Breite geben , damit er sich nicht durch den gesamten Container erstreckt. Wir werden den Container natürlich nicht berühren, wir werden einen weiteren Div-Block fallen lassen und den gesamten Inhalt darin verschieben. Geben wir ihm eine maximale Breite von 464 Pixeln, was genau wie in unseren Designs ist. Und da hast du es. Das ist viel besser. Das ist alles für heute. Wir werden das Bild im nächsten Video hinzufügen. Bleib hier. 116. Webflow 2: Mockup-Abschnitt 2: Und wir sind zurück. In diesem Video werden wir das Bild zu diesem Abschnitt hinzufügen. Wie üblich müssen wir das Bild exportieren, das Ganze zuerst gruppieren und ihm einen Namen geben. Wir können diese Aufsätze nicht direkt exportieren. Wenn wir das tun, exportiert Figma das zugeschnittene Bild. Das kannst du in der Vorschau sehen, aber wir wollen kein bereits zugeschnittenes Wir möchten, dass es an den Seitenrändern selbst abgeschnitten wird, also eher wie ein Teil, der versteckt ist Ziehen Sie eine Kopie der gesamten Gruppe an eine andere Stelle auf der Seite. Dadurch wird die gesamte Grafik angezeigt. Und jetzt können wir es exportieren. Wir benötigen PNG und zwei X für Tina-Auflösungen. Fügen wir diesem Container ein Bildelement hinzu und laden dann unser Bild hoch. A Wählen Sie einen hohen DPI-Wert da wir zwei x verwenden. Ordnung. Was machen wir jetzt? Wir haben auf der vorherigen Website bereits eine sehr ähnliche Sache gemacht , also werden viele Dinge ziemlich gleich sein. Wir brauchen das Bild auf der rechten Seite. Wie immer ist Flexbox dafür eine großartige Option. Das haben wir auch beim letzten Mal benutzt. Um eine Flexbox zu erstellen, benötigen wir einen zusätzlichen Dao-Block, in dem wir Inhalt und Bild platzieren werden. Lass uns eine neue Klasse erstellen. Und ändere das Display auf Flex. Stellen wir die Ausrichtung auf die Mitte ein. Und wenn wir schon dabei sind, setzen wir das Gerechtfertigte auf ein Leerzeichen dazwischen. Warum? Weil wir wollen, dass der Inhalt auf der linken Seite und das Bild auf den rechten Rand geklebt wird. Zu diesem Zeitpunkt wird sich daran nichts ändern, da in der Flexbox wirklich kein Platz ist Und die Art und Weise, wie der Abstand zwischen den Einstellungen funktioniert, ist wie eine Quelle Es fügt eine Feder dazwischen ein, die Elemente zur Seite drückt Aber ohne Platz gibt es nichts, was verschoben werden könnte. Wenn wir das Bild klein machen, dann wird es funktionieren. Es wird gegen den Rand der Flexbox gedrückt. Wenn Sie sich erinnern, haben wir beim letzten Mal einen speziellen Trick angewendet, um Bild an den Rand zu bewegen, und darüber hinaus verwenden wir einen negativen Rand Also werden wir hier dasselbe tun. Nun werden Sie sehen, dass am Anfang der negative Rand das Bild nicht bewegt, aber irgendwann beginnt es sich zu bewegen. Um ehrlich zu sein, bin ich mir nicht hundertprozentig sicher, warum das passiert. Es hat definitiv damit zu tun, dass das Bild so groß ist und die Grenzen des Elternteils überschreitet. diesem Grund rate ich immer Bilder niemals direkt zu stylen. Füge sie in einen Div-Blog ein und gestalte ihn stattdessen. Sie werden ein vorhersehbareres und richtigeres Verhalten bekommen weil Flaxbox seltsame Dinge mit Bildern macht, und es ist einfach am besten, sie in ihrem eigenen Dvlock zu haben und dann wird es sich richtig verhalten und Sie werden verstehen was passiert, und Sie müssen sich nicht mit einem seltsamen Verhalten auseinandersetzen wenn sich der Rand nicht bewegt, und dann irgendwann fängt er an, sich zu bewegen , und Aber dieses Mal habe ich nur das Bild verwendet, damit wir aus unseren Fehlern lernen können. Eine letzte Sache, die wir hier beheben müssen, ist dieses überflüssige Problem Um dieses Problem zu beheben, müssen wir dem Abschnitt mitteilen, dass Elemente abgeschnitten werden sollen, wenn sie über die Grenzen hinaus laufen Es ist ganz einfach. Wir müssen Overflow nur auf Hidden setzen Vergessen Sie nicht, dass die Überlaufeinstellung für das übergeordnete Bild festgelegt ist, nicht für das Bild selbst Lassen Sie uns eine Kombinationsklasse mit dem Namen overflow hidden erstellen. Wir wollen nicht mit unserem Standardabschnitt herumspielen und dann diese Overflow-Einstellung anwenden Hervorragend. Lassen Sie uns die Vorschau und die Reaktionsfähigkeit noch einmal überprüfen die Vorschau und die Reaktionsfähigkeit Und wir sind mit diesem Abschnitt fertig? 117. Webflow 2: Fotoausschnitte: In diesem Video werden wir diesen Abschnitt erstellen. Das Layout ist dem vorherigen Abschnitt, den wir bereits erstellt haben, sehr ähnlich vorherigen Abschnitt, den wir bereits erstellt haben, . Warum also nicht einfach duplizieren und von dort aus weitermachen Wählen Sie den gesamten Abschnitt aus und kopieren Sie einfach Strg C, Strg V. Ich lasse einen nach dem anderen fallen. Die Reihenfolge der Inhalte ist umgekehrt. Wir können das ändern, indem wir das Bildelement nach oben ziehen Dadurch wird das Bild an erster Stelle platziert Auf dieses Bild wird ein negativer Rand angewendet, aber dieses Mal brauchen wir ihn nicht Um das zu entfernen, müssen wir die Klasse entfernen da wir den Rand selbst nicht bearbeiten können, das wird sich auf das vorherige Bild auswirken. Und jetzt ersetzen wir es durch unser eigenes Bild. Dieses Mal werden wir das JPAG untersuchen, weil wir keinen transparenten Hintergrund haben und JPAG in Bezug auf die Dateigröße immer die bessere Option als PNG ist in Bezug auf die Dateigröße immer die bessere Option als PNG Aber wir werden es trotzdem in unserem Bildkomprimierer komprimieren es trotzdem in unserem Bildkomprimierer Lassen Sie uns den Inhalt ersetzen. Oh, da haben wir's. Entferne die Overflow-Kombinationsklasse aus dem Abschnitt. Das brauchen wir nicht mehr. Okay, wir brauchen etwas Abstand zwischen den beiden. Fügen wir dem Bild den Rand hinzu. Okay, also was ist hier los? Der Inhalt wurde nach rechts und von der Seite verschoben. Das Bild soll schrumpfen, aber das ist kein weiterer Grund, warum es am besten ist, Bilder in einem Dibblog abzulegen, insbesondere wenn es sich um eine Flexbox handelt Ich denke, wir haben unsere Lektion inzwischen gelernt, also packen wir sie in Dibblock Wenn ich sage, etwas in den DivLog packen, dann bedeutet das im Grunde, es in einem Diblog zu platzieren Erstelle eine neue Klasse und gib ihr dort einen Abstand von 60 Pixeln. Diesmal wird das Bild richtig verkleinert. Eigentlich ist es nicht das Bild, sondern der Bild-Wrapper wird richtig verkleinert, und das Bildelement hält sich an die Grenzen seines übergeordneten Elements. Der nächste Abschnitt ist sehr einfach. Duplizieren Sie diesen neuen Abschnitt und ändern Sie die Reihenfolge im Flaggenfeld. Obwohl wir in diesem Fall den Rand auf der anderen Seite benötigen , erstellen wir eine Compa-Klasse für das Image-Wrapper-Element Wenden Sie rechts Null und links 60 an und ersetzen Sie den Inhalt Hervorragend. Diese Abschnitte sehen toll aus. Im nächsten Video werden wir Abschnitt mit den Testimonials erstellen Das wird Spaß machen. Bleib hier. 118. Webflow 2: Schieberegler Komponente: Ordnung, jetzt müssen wir den Testimonial-Bereich erstellen Wir haben uns für diese Art von Slider entschieden, manchmal auch Karussell oder Slider oder Karussell-Slider genannt Um das in Webflow zu erstellen, müssen wir eine sehr praktische Komponente verwenden, die logischerweise Slider müssen wir eine sehr praktische Komponente verwenden, die logischerweise Slider genannt wird. In diesem Video werden wir uns mit der Slider-Komponente vertraut machen und dann werden wir den Abschnitt mit den Testimonials in einem späteren Video beenden in einem Beginnen wir mit dem üblichen Abschnitt, Container usw. Dann bei einer Überschrift. Fügen wir nun einen Slider hinzu , den wir finden können, indem wir einfach in einem Schnellfinder suchen Oder im Elemente-Panel im Bereich „ Erweitert“. Dies ist ein Slider, eine vorgefertigte Komponente , die viele Möglichkeiten bietet, angepasst zu werden, aber manchmal hat sie auch ihre Grenzen Wie bei fast allem in Webflow sind vorgefertigte Komponenten nicht die einzige Möglichkeit, solche Layouts oder Komponenten zu erstellen Wir könnten unseren eigenen Slider von Grund auf neu erstellen, aber es ist ein bisschen mehr Arbeit, und dieser vorgefertigte Slider macht meiste Zeit verdammt gute Arbeit Der Slider nimmt die gesamte Breite seines übergeordneten Containers ein. Wenn wir ihn also direkt am Körper außerhalb unseres Containers und des Abschnitts bewegen , dehnt er sich von Kante zu Kante aus. Mal sehen, woraus es gemacht ist. Im Inneren befinden sich vier Elemente. Die erste ist Maske. Hier befinden sich unsere Folien. Im Moment befinden sich zwei Standardfolien darin. Natürlich sind wir nicht auf zwei beschränkt. Dann haben wir die Pfeile nach links und rechts, bei denen es sich um Linkblöcke mit Pfeilsymbolen im Inneren handelt. Und als letztes haben wir die Slider-Navigation. Dies sind die weißen Punkte , die Sie in der Mitte sehen. Sie sind anklickbar und führen Sie zur entsprechenden Folie Die Folie selbst ist nur ein guter alter Dvbloc. Nichts besonderes an ihnen. Sie können wie jede andere Entwicklung gestaltet werden und wir können jedes andere Element darin platzieren Lassen Sie uns den Hintergrund jeder Folie ändern , damit wir besser sehen können, was vor sich geht Lassen Sie uns das im Vorschaumodus überprüfen. Zwei Folien, rote und blaue Pfeile und die Navigationspunkte wechseln zwischen diesen Folien. Im Grunde genommen sind es zwei DV-Blöcke, die horizontal nebeneinander liegen und die Steuerelemente bewegen sich zwischen diesen Tauchblöcken mit einer gewissen Animation hin und zwischen diesen Tauchblöcken mit einer gewissen Animation Das ist alles. Es gibt mehrere Möglichkeiten zwischen den Folien innerhalb des Designers zu wechseln mithilfe der Steuerelemente zwischen den Folien innerhalb des Designers zu wechseln. Oder über die Slider-Einstellungen, die über eigene Pfeile verfügen oder über dieses Drop-down-Menü, in dem wir genau die gewünschte Folie auswählen können. So wechseln wir zwischen den Folien, damit wir sie einzeln bearbeiten können. Wir haben zwei Möglichkeiten , Folien hinzuzufügen. Zunächst können wir im Einstellungsfenster eine neue Folie hinzufügen , indem wir Ed Slide drücken. Um die Slider-Einstellungen sehen zu können, müssen Sie ein Element des Sliders ausgewählt haben. Wie Sie sehen können, haben wir jetzt drei Folien. Dadurch wurde auch ein neuer Folien-DV-Block im Navigator hinzugefügt. Die zweite Möglichkeit besteht darin, das Folienelement zu duplizieren, entweder mit der rechten Maustaste und Duplizieren oder mit der üblichen Steuerung C und Steuerung V. Das Löschen von Folien erfolgt auf ähnliche Weise Wählen Sie eine Folie entweder auf der Leinwand oder im Navigator aus und drücken Sie die Löschtaste. Da es sich bei der Folie nur um ein normales DVLock handelt, können wir weitere Elemente wie Text, Bilder, Schaltflächen usw. hinzufügen , Bilder, Schaltflächen usw. Wir haben das gerade zur ersten Folie hinzugefügt. Die zweite blaue Folie wird leer sein. Wir können der blauen Folie auch ähnliche oder unterschiedliche Inhalte hinzufügen . Das ist also der Slider. Im nächsten Video werden wir diesen hässlichen Slider in ein hübsches Karussell aus Testimonial-Karten verwandeln hübsches Karussell aus Testimonial-Karten 119. Webflow 2: Slider für Kundenbewertungen: Das ist also die Slider-Komponente, aber dieser Flow-Slider sieht ganz anders aus als unsere Designs Pfeile sind unterschiedlich, ihre Platzierung ist unterschiedlich. Es gibt keine Navigationspunkte und wir sehen mehrere Karten gleichzeitig. Bei diesem Slider-Element sehen wir jeweils nur eine Folie. Aber keine Sorge, wir können den Slider tatsächlich so gestalten, dass er genauso aussieht wie unsere Designs. Fügen wir zunächst ein Leerzeichen zwischen dem Slider und der Überschrift hinzu. Wie bei allem anderen können wir das gesamte Slider-Element stylen, was wiederum ein guter alter Dv-Block mit einer Reihe anderer Elemente ist. Wählen Sie das Slider-Element aus, geben Sie ihm eine Klasse und den oberen Rand von 120 Pixeln Lassen Sie uns diesen grauen Hintergrund loswerden. Es ist auch Teil des Slider-Elements. Gehen Sie zu den Hintergrundeinstellungen und ändern Sie sie auf transparent. Und lassen Sie uns die Farbe des Pfeils ändern , damit wir sie sehen können. Die Symbole hier sind Textbasis. Wenn wir also die Textfarbe ändern, wird die Farbe der Symbole aktualisiert. Und wir brauchen diese Navigationspunkte nicht , also lasst uns sie loswerden. Aber das Löschen funktioniert nicht. Weblo denkt, dass wir den Slider nicht brauchen und löscht das Ganze damit Es gibt also eine andere Möglichkeit, etwas zu entfernen. Wählen Sie „Keine anzeigen“, und es ist aus dem Raum-Zeit-Kontinuum verschwunden Schwebt irgendwo in einer anderen Dimension. Als Nächstes müssen wir eine Testimonial-Karte erstellen. Das sollte ziemlich einfach sein. Wir werden einen neuen DV-Block in eine der Folien legen und alle notwendigen Teile zusammenbauen Geben Sie ihm eine erstklassige Testimonialkarte, einen weißen Hintergrund und die gleichen Abmessungen wie in unseren Designs Und um die Ecken. Jetzt fügen wir einen Boxschatten hinzu, genau wie in Figma. Um die Einstellungen des Schattens zu sehen, stellen Sie sicher, dass Sie das richtige Objekt auswählen , auf das ein Schatten angewendet wurde Wenn Sie einen Schattenstil wie ich hier verwenden, können Sie ihn vom Stil sodass Sie genau sehen können, was im Inneren vor sich geht Das sind alle Werte. Wir müssen den Schatten in Webflow neu erstellen Weblo gibt es einen zusätzlichen Wert für die Größe, den Sie jedoch ignorieren können Wie du siehst, ist die Karte nicht vollständig sichtbar, der Slider schneidet Das liegt daran, dass der Slider eine gewisse Standardhöhe hat. Ja, es heißt Height Auto, was bedeutet, dass es je nach Inhalt erweitert werden sollte, aber es gibt keinen weiteren Fall , in dem Standardwerte nicht wahr sind Geben Sie Auto noch einmal von Hand ein und drücken Sie die Eingabetaste. Okay, jetzt zum Inhalt der Karte, wir haben Sterne und den Absatz. Wir müssen die Sternsymbole aus Figma exportieren, alle fünf Sterne als einen exportieren, sie gruppieren, wenn es sich nicht um eine einzige Gruppe für Sie handelt, und als SVG exportieren Wir müssen die Karte mit einer Polsterung versehen. Wir haben 40 Pixel auf allen Seiten, außer auf der Oberseite, die 60 Pixel hat Wir brauchen eine Entfernung von den Sternen, die 30 Pixel beträgt. Ein kleiner negativer Rand , um die Sterne besser auszurichten. Und wir brauchen den Autorenblock. Exportiere diese Avatare als zwei X, P und G. Lass uns einen neuen Dive-Block hinzufügen und die Autorendetails darin organisieren Zuerst das Bild, dann die beiden Textblöcke. Geben Sie dem Textblock etwas Klasse und Stil, genauso wie Figma Jetzt müssen wir den Text an die Seite des Avatars verschieben . Wie können wir das machen? Natürlich könnten wir den üblichen Weg der Verwendung einer Flexbox einschlagen , aber dafür bräuchten wir eine zusätzliche Box, und das erfordert mehr Klicks Eine einfachere Option ist die Verwendung von Float. Unter Position haben wir ein Drop-down-Menü für Float und Clear. Öffne das. Es gibt drei Optionen: keine, links und rechts schweben. Die Symbole zeigen irgendwie, was es tut. Wählen Sie Left Float. Dadurch wird das Bild links vom Text positioniert. Und das ist alles. Wir müssen jetzt den Abstand neben dem Bild anpassen. Dann zwischen Bild und Absatz , der 70 Pixel beträgt. Und schließlich müssen wir einen kleinen Rand über dem Autorennamen hinzufügen , um den Text mit dem Avatar zu zentrieren. Lassen Sie uns nun diese erste Folie duplizieren und sehen, wo wir stehen. Wie Sie sehen können, sehen wir jeweils nur eine Folie, aber wir möchten, dass sie alle nebeneinander angezeigt werden, so dass sie passen, und zwischen sichtbaren und unsichtbaren Teilen hin - und hergleiten. Der Grund, warum wir jeweils eine Folie sehen mit den Breiteneinstellungen des Folienelements zu tun. Es ist auf Auto eingestellt, was bedeutet, dass es seinen übergeordneten Container zu 100% ausdehnt. Wenn wir ihm eine feste Breite geben, schrumpft er entsprechend Geben wir ihr also die gleiche Breite wie unsere Testimonialkarte. Wenn Sie feststellen, dass das Folienfach jetzt kleiner geworden ist, ist es so breit wie die Karte Und jetzt duplizieren wir es. Lösche die anderen und dupliziere die mit der richtigen Breite. Und da hast du es. Jetzt richten sie sich so aus, wie wir es wollen Fügen wir rechts einen Rand hinzu , um die Trennung zu erstellen. Okay, schauen wir uns den Vorschaumodus an, um zu sehen, wo wir stehen. haben vier Folien und sie werden genau so verschoben, wie wir es uns wünschen, bis auf eine Sache. In unserem Design werden auf der Seite so viele Karten wie möglich angezeigt und der Rest verschwindet von der Seite. Aber hier tun sie das nicht. Sie werden nur innerhalb der Slider-Komponente angezeigt. Wie können wir das also ändern? Wenn Sie ein Maskenelement auswählen, anderen D-Block, in dem alle Folien verschachtelt sind, werden Sie feststellen, dass es in den Overflow-Einstellungen auf „Versteckt “ gesetzt ist Das bedeutet, dass alle Folien, die über die Grenzen der Maske hinausgehen, abgeschnitten werden Eigentlich wird alles, was darüber hinausgeht, abgeschnitten. Sogar die Schatten auf den Karten, wenn man genauer hinschaut. Um sie zu zeigen, müssen wir das nur auf sichtbar ändern, und los geht's. Jetzt sind alle Karten sichtbar. Aber es gibt ein Problem. Sie werden nicht abgeschnitten, wenn die Seite endet, sondern sie erweitern die Grenzen der Seite. Aber wir wissen bereits, wie wir das beheben können, nicht wahr? Wir müssen nur den gleichen Stil für versteckte Überläufe auf den Abschnitt anwenden , genau wie wir es beim Bild des Dashboards getan haben Dafür haben wir sogar einen Kurs. Wir müssen nichts ändern, sondern dieselbe Klasse anwenden, die wir bereits in einem der Abschnitte angewendet haben. Hervorragend. Füllen wir die Karten mit unseren Inhalten und dann müssen wir uns nur noch um die Pfeile kümmern, und das war's A Es gibt nur eine Sache, wir mit den Karten reparieren müssen Im Moment haben wir Inhalte , die alle gleich hoch sind. Aber was ist, wenn wir Zeugnisse mit unterschiedlicher Länge haben? Die Karte dehnt sich nicht aus , da sie eine feste Höhe hat. Lassen Sie uns die Höhe also wieder auf Auto ändern. Es wird also je nach Inhalt erweitert. In einem echten Projekt sollten Sie versuchen, die Länge der Testimonials zu kontrollieren Dieser ist in Ordnung, aber wenn der Unterschied zwischen langem und kurzem Schnitt wirklich groß ist, dann sieht er nicht besonders gut aus Testimonials können gekürzt werden, was bedeutet, dass Sie sie kürzen können Wenn Ihr Kunde jedoch nicht möchte, dass sie gekürzt werden, möglicherweise ein anderes Layout erforderlich Etwas, das sich vertikal stapeln lässt. Eine solche Option könnte ein Mauerwerksgitter sein. Eine Sache, die mir nicht gefällt, ist die Art und Weise, wie sich Folien bewegen. Einige von ihnen werden bei jedem Klick verschoben, aber ich würde es vorziehen, wenn beim Verschieben eine Folie nach der anderen verschoben würde. Das ist einfach zu beheben. Der Grad der Verschiebung wird durch die Breite des Maskenelements gesteuert. Wenn wir die Breite der Maske so ändern sie der Breite der einzelnen Folien entspricht, , dass sie der Breite der einzelnen Folien entspricht, erhalten wir eine Bewegung , die jeweils eine Folie nach der anderen erfolgt. Okay, sieht immer gut aus. Das Letzte, um das wir uns kümmern müssen , sind die Pfeile. Dafür müssen wir ein neues Konzept lernen, was wir im nächsten Video tun werden. Bleib hier. 120. Webflow 2: Positionierung: Willkommen zurück. In diesem Video werden wir uns um die Pfeile auf unserem Slider kümmern. Um sie in der unteren rechten Ecke unseres Sliders zu platzieren , wie wir es in den Designs getan haben, müssen wir ein neues Konzept erlernen. Dieses Konzept wird Position genannt. Position ist ein CSS-Stil, der uns eine enorme Kontrolle über unsere Objekte gibt . Dieser Stil kann von hier aus geändert werden. Wir haben fünf verschiedene Positionswerte: statisch, relativ, absolut, fest und permanent. Lassen Sie uns jeden einzelnen durchgehen. Ich habe hier fünf Karten organisiert, und eine nach der anderen werden wir verschiedene Positionseinstellungen auf sie anwenden, werden wir verschiedene Positionseinstellungen auf sie anwenden um zu sehen, was mit ihnen passiert. Statisch oder auch automatisch genannt, ist eine Standardposition für fast alle Objekte. Statische Elemente verhalten sich so, wie wir es bereits kennen, wie ein Word-Dokument, das von einem nach dem anderen fließt. Bei einem Verwandten wird es etwas interessanter. Relatives Objekt ist eine Position relativ zu sich selbst. Ich weiß, dass dir das nichts sagt. Lassen Sie mich das demonstrieren. Ich werde mich für dieses Feld bewerben und nichts passiert. Sehr ereignislos Aber eines ist passiert, die Positionseinstellungen haben jetzt ein paar mehr Wir haben diese ähnlichen Steuerelemente wie bei den Abständen. Wir können diese Werte anpassen und die Box bewegt sich. Wir geben dem oberen Rand der Box grundsätzlich 100 Pixel. Es funktioniert ganz ähnlich, mit einer Ausnahme, und Sie werden diese Ausnahme sehen wenn ich Ihnen zeige, was passiert, wenn Sie den Rand anstelle dieser relativen Positionierung bearbeiten. Sie sehen, dass der Rand den Seitenfluss verändert hat. Die Höhe des übergeordneten Containers wurde erhöht, da dieser Rand in diesen Bereich passen muss. Wenn Sie jedoch die relative Positionierung verwenden, wird der Dokumentenfluss überhaupt nicht beeinträchtigt. Sie können das Objekt an eine beliebige Stelle verschieben, aber im Verlauf des Dokuments nimmt es nur den Platz ein, an dem es ursprünglich vorgesehen war. Das ist eine Macht der relativen Position. Wir haben es komplett von seinem eigenen Platz entfernt, aber die Karten, die in einer Flexbox verschachtelt sind , haben sich überhaupt nicht bewegt Sie tun so, als ob die Karte immer noch da wäre. Was nun die absolute Position anbelangt, wird das Objekt Absolut Position aus dem Dokumentenfluss entfernt und es befindet sich auf einer neuen Ebene, quasi wie Objekte in Figma In Figma sind alle Elemente quasi absolut positioniert. Sie existieren alle auf ihrer eigenen Ebene. Absolute Positionierung verwenden wir oft, wenn wir Elemente überlappen oder übereinander legen müssen . Nun, hier ist ein wichtiger Begriff für die absolute Positionierung Es sagt uns, zu welchem Objekt das Objekt relativ positioniert ist . Wir haben dasselbe Feld für das relative Element, aber das sagt sich immer von selbst, denn das ist es, was relativ tut Es ist immer eine relative Position zu sich selbst, und das kann geändert werden. Aber das absolute Element kann relativ zu jedem seiner übergeordneten Elemente sein. Am Anfang werden Sie feststellen, dass es normalerweise relativ zum Body-Element ist, was bedeutet, dass es relativ zur gesamten Seite ist. Wenn wir beispielsweise den Wert für die linke Position auf Null setzen, wird die Position null Pixel vom linken Rand des Hauptteils entfernt sein. Im Moment ist es nicht genau an der Kante, weil sie an den Seiten einen Rand hat. Wenn wir ihm eine Position von 100 Pixeln nach links geben, bewegt er sich 100 Pixel vom Rand weg. Und wenn wir ihm einen oberen Rand von null Pixeln geben, dann bewegt er sich bis zum Seitenanfang. Und dieser rosafarbene Behälter wird so aussehen, als ob die Kiste nicht wirklich da wäre. Aber wenn wir im Navigator nachschauen, werden wir sehen, dass die absolute Box immer noch Teil des Containers ist. Wie gesagt, ein Upsold-Element kann relativ zu jedem seiner übergeordneten Elemente sein, wenn wir uns dafür entscheiden Um nun das übergeordnete Element auszuwählen, müssen wir einen kleinen Trick anwenden Wir müssen die Position dieses Elternteils so ändern , dass sie nicht statisch ist. Wenn wir zum Beispiel möchten, dass das R relativ zum rosafarbenen Container positioniert wird, müssen wir die Position des Containers auf etwas anderes als statisch ändern . Normalerweise ändern wir es in relativ, weil das der einfachste Weg ist, ohne den Dokumentenfluss zu verändern. Sie die Position der übergeordneten Elemente ändern, springt das Feld für die veraltete Position zurück zum rosafarbenen Container und positioniert sich um diesen Container herum Wenn Sie jetzt die Einstellungen überprüfen, werden Sie feststellen, dass dort „ Relativ zum übergeordneten Container“ steht Da wir null Pixel von oben haben, befindet es sich in der oberen linken Ecke. Und wenn wir diesen Wert ändern, bewegt er sich relativ zum übergeordneten Container. Wenn wir nun stattdessen möchten, dass er relativ zu einem anderen übergeordneten Container positioniert wird relativ zu einem anderen übergeordneten Container positioniert , beispielsweise dem übergeordneten Container, müssen wir die Position auf diesem übergeordneten Container von statisch auf etwas anderes ändern die Position auf diesem übergeordneten Container von statisch auf etwas anderes Aber es gibt eine wichtige Regel. Es wird sich relativ zum allerersten übergeordneten Element positionieren allerersten übergeordneten Element , das keine statische Position hat. Im Moment ist also nichts passiert, als wir die Position des übergeordneten Containers geändert haben die Position des übergeordneten Containers weil der rosafarbene übergeordnete Container immer noch eine nicht statische Position hat, sodass die Box weiterhin relativ zu dem in Und wenn wir die Position der übergeordneten Container auf statisch ändern , dann wird das passieren Wie hier gezeigt wird, ist dies relativ zum übergeordneten Container Webflow hat hier einige nützliche Positionsvoreinstellungen für ein absolutes Dies ist eine sehr praktische und schnelle Methode, um die Positionen zu ändern. Linke obere Ecke, rechte obere Ecke , obere vier, untere vier usw. Sie können sehen, dass es einfacher ist, die Dinge visuell so auszurichten, wenn Sie die Werte unten ändern und entsprechend aktualisieren einfacher ist, die Dinge visuell so auszurichten , anstatt berechnen zu müssen , wie viele Pixel Sie auf allen vier Seiten platzieren sollten Als Nächstes folgt die feste Position. Feste Elemente werden relativ zum Viewport positioniert, d. h. zum sichtbaren Teil der Seite an einem bestimmten Punkt Wenn wir eine der Voreinstellungen wählen, wird sie entsprechend korrigiert Wie Sie sehen können, ist das feste Element genau das, fest. Es ist quasi wie ein absolutes Objekt das aus dem Dokumentenfluss herausgerissen wird, andere Elemente nicht beeinflusst , sich auf einer ganz neuen Ebene und im Gegensatz zu einem absoluten Objekt relativ zum sichtbaren Bildschirm fixiert ist Egal, wo Sie es verschieben, es bleibt unverändert. Diese Position wird häufig für Navigationsleisten verwendet. Sie wissen, wie viele Websites über eine Navbar verfügen, die beim Scrollen immer oben auf der Seite angezeigt wird Das bedeutet, dass eine feste Position verwendet wird. Endlich haben wir eine klebrige Position, was etwas schwierig ist. Sticky fungiert quasi als festes Element, aber nur innerhalb seines übergeordneten Containers, was fungiert quasi als festes Element, aber nur innerhalb seines übergeordneten Containers, leichter zu zeigen als zu erklären ist. Im Moment passiert also nichts. Es verhält sich einfach wie ein normales statisches Element , da zwei Bedingungen erfüllt sein müssen, damit es funktioniert. Erstens muss das übergeordnete Element groß genug sein damit es darin blättern kann. Andernfalls hat es keinen Sinn. Also lasst uns den Container etwas größer machen. Zweite Bedingung: Wir müssen einen benutzerdefinierten Wert normalerweise an die oberste Position setzen benutzerdefinierten Wert normalerweise an die oberste Position Zum Beispiel können wir Null setzen. Und jetzt wirst du sehen , dass es funktioniert. Was passiert ist, dass es auf dem Bildschirm behoben während wir durch den übergeordneten Container scrollen Sobald das Sticky-Element den unteren Rand des übergeordneten Containers erreicht , scrollt es nicht mehr daran vorbei Der oberste Wert gibt an, ab welchem Punkt es bleiben soll. In diesem Fall bleibt es in dem Moment haften, klebrige Element keine Pixel vom Viewport entfernt ist Wenn wir etwa 30 Pixel eingeben, es in dem Moment haften, in dem es 30 Pixel vom oberen Bildschirmrand Für Dinge, die horizontal wachsen und horizontal bleiben müssen, würden wir anstelle der oberen Position den Wert für die linke oder rechte Position verwenden. Ich werde diesen Wert nicht demonstrieren, weil wir ihn sehr, sehr selten benötigen würden. Das sind alles Positionen, statisch, was die Standardeinstellung für fast alle Elemente ist, und sie fließen ganz natürlich mit einem Dokument zusammen, relativ, was quasi statisch ist, aber es kann von seinem Platz verschoben werden, ohne den Dokumentenfluss zu verändern und alle Elemente in der Nähe zu verschieben , absolut, was die wilde Positionierung der Gruppe ist, sie wird aus dem Dokumentenfluss gerissen und ist relativ zum ersten übergeordneten Element positioniert , das keine statische Position hat Fixed, was genau wie das Absolute ist, aber es ist relativ zum Viewport wird auf den sichtbaren Bildschirm fixiert wird hauptsächlich für Navigationsleisten und Sticky verwendet, was quasi fest ist, aber auf Stero fixiert es sich nur innerhalb der Grenzen des übergeordneten Containers nur innerhalb der Grenzen des übergeordneten Containers Okay, das ist die allgemeine Idee der Positionierung. Im nächsten Video werden wir dieses Wissen auf die Pfeile auf unserem Testimonial-Slider anwenden . Bleib hier. 121. Webflow 2: Schieberegler: Ordnung. Willkommen zurück. In diesem Video werden wir uns endlich um die Pfeile auf dem Slider kümmern. Im vorherigen Video haben wir eine wichtige Technik gelernt, die nützlich sein wird, um diese Pfeile richtig zu positionieren. Zunächst werden wir die Pfeilsymbole durch unsere eigenen Symbole ersetzen Pfeilsymbole durch unsere eigenen Symbole ersetzen Wir können das einfach tun, indem wir das vorhandene Symbol löschen und stattdessen ein Bildelement einfügen. Ziehen Sie einfach ein Bildelement in den Pfeilblock und fügen Sie das Pfeilbild , das wir aus Pigma exportieren möchten Und das Gleiche gilt für den Rechtspfeil. A Jetzt benötigen wir eine Positionsfunktion , um diese Pfeile unten zu platzieren. Wenn Sie sich die Positionseinstellungen ansehen, ist sie im Gegensatz zur üblichen statischen Position bereits standardmäßig auf veraltet eingestellt, und das erklärt, warum die Pfeile oben auf dem Schieberegler befinden Genau das macht die veraltete Positionierung aus. Es entfernt das Element aus dem Seitenfluss. Sie leben in einer anderen Dimension wie Schichten und Figuren. Das ist genau das, was wir brauchen Obsolete Position mit einer Platzierung unten rechts Sobald Sie auf die untere rechte Position drücken, wird der Pfeil in der unteren rechten Ecke des Slider-Elements platziert der unteren rechten Ecke des Slider-Elements Nun, warum das Slider-Element? Weil es das erste Elternteil , das keine statische Position hat. Denken Sie daran, dass das absolute Element relativ zum ersten nicht statischen Elternteil ist. Wenn es kein solches Elternteil gibt, dann ist es relativ zum Körper. In diesem Fall würde es am Ende der Seite auftauchen. Wenn Sie also feststellen, dass es nicht so funktioniert, wie Sie es erwarten, überprüfen Sie das übergeordnete Objekt und stellen Sie sicher, dass es auf relativ eingestellt ist. Schauen wir uns das Design an, um die Entfernungen zu sehen. Die Pfeile befinden sich 60 Pixel unter dem Slider. Nun, hier ist ein interessanter Teil. Wir müssen 60 Pixel zu einem dieser Positionswerte hinzufügen , aber welcher? Lassen Sie uns alle ausprobieren und sehen, was passiert. Keines davon funktioniert tatsächlich. Warum? Der Pfeil ist unten rechts so positioniert. Das bedeutet, dass Null Pixel von rechts und Null Pixel von unten kommen. Die Positionswerte sagen uns genau das. Wenn wir unten 60 Pixel hinzufügen, bewegt es sich vom unteren Rand aus um 60 Pixel nach oben. Damit es sich außerhalb des Sliders bewegt, müssen wir negative Werte wählen. Eigentlich funktioniert es eher so. Es berechnet den Abstand zwischen der Unterseite des Sliders und der Unterseite des Pfeilblocks So oft müssen wir die Höhe des Elements ausgleichen die Höhe des Elements Stellen Sie übrigens sicher, dass Sie PX neben 60 eingeben. Wie Sie sehen können, heißt es standardmäßig Prozent. Das Feld ist also auf den Prozentwert eingestellt. Und wenn Sie einfach 60 eingeben, wird es denken, dass Sie 60% meinen. Wenden wir nun dieselbe Klasse auf den zweiten Pfeil an, damit wir all diese Änderungen nicht erneut vornehmen müssen. Bewegen wir den Linkspfeil nach links. können wir tun, indem wir einen Wert an der richtigen Position platzieren. Aber bevor wir das tun, geben wir dem Linkspfeil eine Kombinationsklasse. Andernfalls werden die Änderungen auf beide angewendet. Auch hier legen wir Wert auf die rechte Kante, weil wir euch sagen , dass ihr diesen Betrag vom rechten Rand wegbewegen sollt. Hervorragend. Schauen wir uns die Vorschau an und sehen, wie sie funktioniert. Es gibt nur ein Problem. Wenn Sie sich die Pfeilblöcke genauer ansehen, werden Sie feststellen, dass sie sich irgendwie überlappen Die Felder sind etwas zu breit und in der Vorschau ist das gesamte Feld anklickbar So kann der Benutzer auch mit dem leeren Bereich interagieren. Ein bisschen Interaktion mit leerem Raum ist gut, sodass der Benutzer beim Zielen mit dem Pfeil nicht so präzise sein muss , aber zu viel macht ihn seltsam. Überlappungen können außerdem zu Problemen führen , da es sich um Links handelt Um das zu beheben, müssen wir die Breite der Pfeilblöcke ändern Geben wir ihm etwas Größe. Ich denke, 40 Pixel sind gut. Ich habe den Rechtspfeil gestaltet, der die Basisklasse hat Auf diese Weise wurden beide Pfeile gleichzeitig aktualisiert aufgrund der verknüpften Basisklasse Es gibt noch eine weitere Sache, die wir mit Pfeilen machen können. Wir können sie an jedem Ende verstecken. Das können wir über die Slider-Einstellungen machen. Das ist tatsächlich eine bessere Benutzererfahrung. Auf diese Weise weiß der Benutzer, in welche Richtung er rutschen kann , und sehen, wann die Testimonials abgeschlossen sind Und wir haben nur noch einen letzten Abschnitt übrig. Die Fußzeile. Das machen wir als Nächstes. Bleib hier. 122. Webflow 2: Fußzeile (Team-App): Auf der Rückseite. In diesem Video werden wir den letzten Abschnitt der Homepage erstellen , nämlich die Fußzeile Wir werden es nicht von Grund auf neu erstellen. Wir werden die erstaunliche Copy-Paste-Funktion von Weblo verwenden. Im Grunde werden wir die gesamte Fußzeile aus unserem vorherigen Chat-App-Projekt kopieren unserem vorherigen Chat-App-Projekt und in das aktuelle Projekt einfügen Das ist eine praktische Funktion. Sie können damit Komponenten in Ihren Projekten wiederverwenden und verschiedene Elemente oder Komponenten aus den Webflow-Projekten anderer Personen kopieren verschiedene Elemente oder Komponenten aus den Webflow-Projekten anderer Personen Webflow verfügt beispielsweise über eine Bibliothek mit Vorzeigeprojekten, in der andere Weblo-Designer Projekte präsentieren können Wenn der Autor es zulässt, können Sie das Projekt oft klonen und alle Komponenten von dort kopieren Sie können entweder die gesamte Seite oder Teile davon kopieren. Sie werden hier Leute finden, die Dinge wie UI-Kits oder Wireframe-Kits teilen wie UI-Kits oder Wireframe-Kits Weißt du, das Wireframe-Kit, das wir in Figma verwendet haben, ja, Schnittstellen wie diese finden Sie auch hier Sie müssen Ihre eigenen Kits erstellen und dann alle Elemente und Komponenten nach Belieben kopieren und einfügen In Ordnung, schauen wir uns an, wie das Kopieren und Einfügen funktioniert. Sobald Sie ein Projekt in Ihrem Konto haben, öffnen Sie beide Projekte im Designer und wählen Sie das Element aus, das Sie kopieren möchten. In unserem Fall, Fußzeilenbereich mit allem, was sich darin befindet, drücken Sie Strg C oder Befehl C, gehen Sie dann zum aktuellen Projekt und wählen Sie aus, wo Sie es einfügen möchten In unserem Fall müssen wir den Hauptteil auswählen, sodass er direkt dort eingefügt wird und nicht in einen anderen Abschnitt Drücken Sie dann Strg B und los geht's. Jetzt wurde die gesamte Fußzeile in unserem aktuellen Projekt dupliziert Wir können alles an dieser Fußzeile bearbeiten, ohne das vorherige Originalprojekt zu beeinträchtigen Die Stile wurden mitgenommen, und es wurden neue Klassen geschaffen Wenn Sie Klassen kopieren , die denselben Namen haben, wird Weblo diese widersprüchliche Klasse umbenennen, genau wie es in dieser Nachricht steht Zum Beispiel der Abschnitt mit den Klassennamen, den wir bereits in unserem aktuellen Projekt haben Also gab Webflow unserem doppelten Abschnitt einen anderen Namen unserem doppelten Abschnitt Außerdem werden Sie feststellen, dass die Fußzeile nach dem Einfügen nicht mehr so aussieht wie das Original, nicht mehr so aussieht wie das da einige der Stile vererbt werden Zum Beispiel wurde das Texttelefon nicht mitgeführt. Es zeigt die Schriftart unserer Website für dieses Projekt, nämlich Cabin. Das Telefon wurde nicht mitgenommen, weil es vom Körper vererbt wird vom Körper vererbt In Wirklichkeit ist es genau das, was wir wollen. Wir wollen nicht, dass das Projekt von vorne runtergeht. Wir wollen, dass die Schrift das ist, was in unserem Projekt enthalten ist. Ordnung, lassen Sie uns jetzt diese Fußzeile stylen und sie wie unsere Designs aussehen lassen Lassen Sie uns mit den doppelten Klassen Abschnitt und Container beginnen und sie auf unsere vorhandenen Klassen umstellen Alle zusätzlichen Klassen , die wir nicht benötigen, können wir tatsächlich auf unserer Website entfernen und aufräumen . Das können wir von hier aus machen. Klicken Sie auf Aufräumen und Webflow zeigt uns alle Klassen, die wir derzeit nicht auf unserer Seite verwenden, und entfernt sie einfach alle Und wenn wir sie nicht verwenden, bedeutet das, dass wir sie nicht benötigen. Als Nächstes erstellen wir eine Kombinationsklasse für den Fußzeilenbereich und ändern die Hintergrundfarbe Lassen Sie uns auch den Abstand im Fußzeilenbereich ändern , da er sich ein wenig vom üblichen Abschnitt unterscheidet I Lassen Sie uns jetzt die Potter-Links bearbeiten. Die Farbe ist weiß mit einer Opazität von 60%. Und wir müssen auch ihre Farbe in ein anderes Blau ändern ihre Farbe in ein anderes Blau Und ausgezeichnet. Jetzt das Logo, was ziemlich einfach ist. Schlagzeilen in der nächsten Fußzeile. Dieser ist etwas interessanter. Es hat keine Klasse wie Footer Links. Das liegt daran, dass wir im vorherigen Projekt keine Klasse für diese Fußzeilenüberschriften Wir haben stattdessen das H-Three-Tag verwendet. Als wir also die Fußzeile kopiert haben, Webflow einfach das H-Three-Tag aus dem aktuellen Projekt übernommen H-Three-Tag aus dem aktuellen Projekt Wir werden den gleichen Stil wie das H-Tree-Tag verwenden. Wir können natürlich eine neue Klasse erstellen oder den Kurs in etwas wie h2h4 oder was auch immer ändern , aber das Styling von H drei scheint ein zusätzliches Leerzeichen Wie Sie sehen können, befindet sich über der Überschrift Lassen Sie uns dieses Leerzeichen loswerden. In Ordnung, so weit, so gut. Wir müssen die Marge im Bereich mit den Testimonials festlegen. Sie sehen, dass der Pfeil zu nahe an der Fußzeile ist. Das liegt daran, dass der Pfeil ein absolutes Element ist. Der Rand von Atypil , der sich auf dem Abschnitt befindet und darüber liegt, wurde ignoriert , der sich auf dem Abschnitt befindet und darüber Vergiss nicht, eine neue Kombinationsklasse zu erstellen, sonst änderst du auch alle anderen Abschnitte. Es gibt bereits eine Kombinationsklasse, aber das ist okay. Wir können mehrere Kombinationsklassen haben. Lassen Sie uns diese zusätzliche Polsterung kompensieren. Und zum Schluss aktualisieren Sie einfach den Inhalt. Das ist alles erledigt, und wir haben noch eine Sache übrig: das E-Mail-Formular. Das werden wir im nächsten Video machen. 123. Webflow 2: Formular in der Fußzeile: In diesem Video müssen wir noch eine letzte Sache tun, um die Fußzeile fertigzustellen, und zwar das E-Mail-Formular Dieser Titel hier, der unseren Newsletter abonniert hat, ist kein Link, er ist nur eine Überschrift, aber er hat gleichen Stil wie andere Fußzeilen oder Wir müssen das in einen normalen Text umwandeln und diesen Hor-Effekt entfernen So werden wir das machen. Fügen Sie einen regulären Textblock und weisen Sie ihm dieselbe Fuß- oder Linkklasse zu. Jetzt ist es kein Link mehr, aber der Hover-Effekt ist immer noch da Um das loszuwerden, duplizieren wir eine Klasse und nennen sie so etwas wie Abonnentext Jetzt können wir zum Hover-Effekt gehen und ihn loswerden. Ausgezeichnet. Lassen Sie uns nun das Newsletter-Formular erstellen. Lassen Sie uns damit beginnen, das E-Mail-Formular zu kopieren , das wir bereits oben haben, und von dort aus weitermachen. Und natürlich wird der Abstand hier ein Problem sein, besonders wenn wir verkleinern, also müssen wir einige Layoutanpassungen vornehmen Der Inhalt hier ist eine Flexbox, die in Spalten organisiert ist. Für den Anfang können wir die Breite entfernen, die wir auf die Fußzeilenspalten angewendet haben bedeutet, dass sie unabhängig vom Inhalt gleich breit sind, was in diesem Fall nicht wirklich funktionieren wird Es gibt auch eine zusätzliche leere Spalte, in der wir zuvor den gleichen Abstand zwischen dem Logo und den Links hatten . Dieses Mal werden wir es verlieren müssen. Und das ist eine zusätzliche Verbesserung. Lassen Sie uns nun die Breite der ersten Spalte mit dem Logo darin ändern . Es dehnt sich viel zu sehr aus. Hervorragend. Das könnte reichen. Jetzt wählen wir das Formular. Nun, dieses Formular verwendet Klassen aus dem obigen Formular im Heldenbereich, also müssen wir jedes Mal duplizieren, wenn wir etwas darin ändern, also vergiss das nicht. Fangen wir mit der Hintergrundfarbe des Feldes an. Es scheint einen Standardstil für den Feldrand zu geben, also ändern wir den Rand auf transparent oder null Pixel. Denken Sie daran, dass es sich bei dem Text innerhalb des Felds um den Platzhaltertext handelt, dessen Stil aus dem Drop-down-Menü für den Status ausgewählt werden kann Ich weiß weiß der Button ein bisschen lustiger ist Wir haben uns für eine Pfeiltaste entschieden , die sich über dem Spielfeld befindet, nicht außerhalb, also müssen wir für unsere Kreativität bezahlen. Zum Glück haben wir bereits gelernt, wie man die Position benutzt, sodass wir eine solche Regelung treffen können. Wir müssen ein paar Dinge tun, damit das funktioniert. Lassen Sie uns zuerst unseren Knopf in einen Pfeil verwandeln. Das ist ziemlich einfach. Wir werden den Pfeil als Hintergrundbild der Schaltfläche verwenden. Bei normalen Schaltflächen könnten wir den Pfeil direkt einfügen, aber wenn es um Formularschaltflächen geht, funktionieren sie etwas anders. Folgendes müssen wir tun. Entfernen Sie den Text und die Gewichtungsnachricht, die in den Einstellungen der Schaltfläche befinden, aber geben Sie so etwas wie einen einzelnen Buchstaben Es kann nicht komplett leer gelassen werden, da Webflow andernfalls einen Standardtext einfügt Entfernen Sie nun die vorhandene Klasse und erstellen Sie eine neue Klasse, etwa eine Pfeiltaste Wir können den Buchstaben leicht verschwinden lassen, indem wir den Text in eine transparente Farbe umwandeln. Das ist alles. Jetzt wird es nicht sichtbar sein. Problem gelöst. Exportieren Sie als Nächstes den Pfeil aus FcMA und fügen Sie ihn als Hintergrundbild der Schaltfläche Wir müssen hier ein paar Einstellungen ändern. Entfernen Sie die Kacheln und positionieren Sie das Bild genau in der Mitte. Entfernen Sie als Nächstes den blauen Hintergrund indem Sie ihn in transparent ändern Wir müssen die Höhe der Schaltfläche an die Höhe des Feldes anpassen . Es stimmt momentan nicht überein, da das Feld standardmäßig einen zusätzlichen Rand am unteren Rand hat . Ändern Sie diesen Wert auf Null, und die Schaltfläche sollte genau der Höhe entsprechen. Wenn nicht, überprüfen Sie die Einstellungen des Formulars. Es ist eine Flexbox und vielleicht ist da etwas drin, oder Sie ändern einfach die Höhe der Schaltfläche manuell, genau wie das Feld , das die Aufgabe erledigen sollte. Als Nächstes setzen wir die Taste auf die absolute Position. Und richten Sie es nach rechts aus. Sobald Sie das tun, verschwindet die Schaltfläche möglicherweise. Nun, warum ist das so? Weil die Position relativ zum Körper ist. Die Position muss relativ zu ihrem direkten übergeordneten Element, dem Formular, sein. Denken Sie an den Trick: Wenn wir die Position des übergeordneten Elements auf relativ oder etwas anderes ändern , positioniert sich die Schaltfläche relativ zum übergeordneten Element. Und das wird unser Problem lösen. Lassen Sie uns es jetzt in der Vorschau testen. Funktioniert immer gut, bis auf eine Sache bei einer sehr langen E-Mail Der Text wird sich mit dem Pfeil vermischen. Das zu beheben ist sehr einfach. Wir müssen dem Feldelement nur zusätzliche Polsterung hinzufügen. Auf diese Weise wird der Text nicht mehr unter dem Pfeil angezeigt. Nein, es ist perfekt. wir Außerdem müssen wir die Erfolgsmeldung ändern um den Erfolgsstatus zu aktivieren, Formularblock auswählen und in den Einstellungen auf die Registerkarte Erfolg klicken. Stellen Sie sicher, dass Sie den Formularblock und nicht das Feld ausgewählt haben . Wenn Sie nur das Feld auswählen, werden verschiedene Optionen in den Einstellungen angezeigt. Jetzt wird das Feld im Vergleich zum Formularfeld breiter und verändert die gesamte Struktur der Fußzeile Keine gute Idee. Um dies zu beheben, können wir unserem gesamten Formularblock eine feste Breite geben, dieselbe Größe wie bei Designs, nämlich 267 Pixeln. Dadurch bleiben das Feld, die Erfolgs- und Fehlermeldungen alle gleich groß. Lassen Sie uns jetzt den Rest wählen. Die Textgröße ist im Vergleich zu anderen Fußzeileninhalten zu groß im Vergleich zu anderen Fußzeileninhalten Wir sollten die Schriftgröße anpassen. Und vielleicht die letzte Polsterung. Und wir müssen auch den Inhalt aktualisieren. Was die Fehlermeldung angeht, so scheint es in Ordnung zu sein. Ordnung, überprüfen Sie die Reaktionsfähigkeit und sehen Sie, wie alles im Vorschaumodus aussieht Unsere Homepage ist fertig und im nächsten Abschnitt werden wir lernen, wie man das WFlow-Interaktionstool benutzt, damit wir einige Animationen für unsere Seite erstellen und sie zum Leben erwecken können . Bleib hier. 124. Interaktionen: Leben in Ihre Website einhauchen: Auf der rechten Seite, wo sich alle Panels befinden, befindet sich eines, das den Interaktionen gewidmet ist. Was sind also Interaktionen? Einfach ausgedrückt, wenn ein Benutzer mit einem Objekt auf unserer Seite interagiert und dadurch etwas anderes diesem oder einem anderen Objekt passiert Durch Interaktionen können wir die Maus mit einem Element interagieren Dies wird als Auslöser bezeichnet und animiert ein anderes Objekt, auch wenn es überhaupt nichts miteinander zu tun hat. Dies wird als Aktion bezeichnet. Jede Interaktion beginnt mit dem Auslöser. Zuerst müssen wir ein Element auswählen, mit dem wir interagieren möchten, und dann den Typ des Triggers auswählen. Zum Beispiel kann die Interaktion durch Mausklick oder Mauszeiger und andere Optionen ausgelöst Mausklick oder Mauszeiger und andere Optionen Es gibt auch Seitenauslöser, was bedeutet, dass wir nicht mit einem bestimmten Element interagieren müssen , aber eine Animation kann durch seitenbezogene Aktionen ausgelöst werden durch seitenbezogene Aktionen ausgelöst Wenn beispielsweise eine Seite geladen wird, hat jeder Triggertyp seine eigenen Optionen. Beispielsweise kann der Mauszeiger entweder ausgelöst werden, wenn der Mauszeiger darüber bewegt wird oder wenn der Mauszeiger Eine ist, wenn sich die Maus auf dem Objekt bewegt , und eine andere, wenn sie sich von diesem entfernt. Und schließlich haben Sie Aktionen oder mit anderen Worten Animationen. In der Drop-down-Liste sehen Sie, dass es mehrere Voreinstellungen wie Fade, Light usw. Und die erste Option ist die Kostümanimation, und hier passiert die Magie Hier können wir angeben, welches Element animiert wird, und wir können eine ganze Reihe von Aktionen erstellen, die zeitlich festgelegt sind Und wir erhalten diese Animationszeitleiste mit einer detaillierten Kontrolle über jede Aktion Das ist also ein schneller und grober Überblick über Interaktionen. Seien Sie nicht beunruhigt, wenn Sie nicht alles verstanden haben. Wir werden das langsam lernen, und im nächsten Video werden wir mit einigen einfachen Interaktionen beginnen . Bleib hier. 125. Interaktionen: Karteninteraktion 1: In diesem Video werden wir diese Karten genau hier animieren Es würde wirklich cool aussehen, wenn wir diese Karten animieren würden, anstatt nur statisch und nur auf dem Foto fixiert zu Ich denke so etwas wie von unten reinzurutschen. Um diese Karten zu animieren, müssen wir unser bestehendes Layout ein wenig ändern Die Karten sind momentan Teil des Hintergrundbilds, und so wie es derzeit der Fall ist , können sie animiert werden Wir werden diese Karten als unabhängige Bilder benötigen, also gehen wir zu Figma und exportieren sie. Auf diesen Karten liegt ein Schatten. Sie machen nicht wirklich viel, also lassen wir sie einfach los. Wenn wir wirklich einen Schatten wollen, können wir ihn jederzeit in Webflow bearbeiten Wir werden sie in PNG exportieren. Ich habe das mit SVG Export getestet, aber es hat sich herausgestellt, dass es sich um eine größere Datei als PNG handelt. Manchmal kann das passieren, sodass Sie am Ende ein SVG haben, das groß ist Achten Sie also einfach darauf. Außerdem müssen wir das Hintergrundfoto unabhängig exportieren . A Schauen wir uns also welche Art von Layout wir haben und wie wir dieses Layout ändern können. Da ist also unsere Flexbox, die zwei Div-Blöcke enthält, Bild- und einen Inhalts-Wrapper Im Image-Wrapper haben wir unser aktuelles Bild. Folgendes könnten wir tun Wir können alle drei Bilder in den Bild-Wrapper legen oder Karten mit absoluter Positionierung versehen Auf diese Weise werden sie über dem Hintergrundbild gestapelt gestapelt Ich lass uns das aktuelle Foto ersetzen Ordnung. Nun geben wir diesem Bild dieselbe Klasse und wenden dann die absolute Positionierung an und machen von dort aus weiter. Denken Sie an die wichtige Anpassung bei absoluten Elementen Sie benötigen ein übergeordnetes Element mit einer relativen Position. Wie Sie hier sehen können, heißt es gerade, dass es relativ zum Körper ist. Wir müssen relativ zum Bild-Wrapper sein. Auf diese Weise positionieren wir sie genau dort, wo wir wollen. Lassen Sie uns also die Position der Bild-Wrapper auf relativ ändern. Die zweite Karte ist übrigens nicht verschwunden. Sie ist unter der ersten. Sie befinden sich genau an derselben Position , weil wir dieselbe Klasse verwenden. Jetzt können wir Karten in der oberen rechten Ecke positionieren und sie dann von dort aus verschieben. Wir können einfach die Werte in Figma nachschlagen. Wie weit sind sie von den Kanten getrennt und verwenden genau diese Werte bei der Eingabe dieser Werte nicht, Vergessen Sie bei der Eingabe dieser Werte nicht, am Ende PX hinzuzufügen Andernfalls wird der Prozentwert verwendet und die Karten werden woanders hin geschickt Aber aus irgendeinem Grund funktionieren unsere Werte von Figma in Webflow einfach nicht. Warum ist das so? Der Unterschied besteht darin, dass ich in Webflow an einer kleineren Leinwandgröße arbeite, die 992 Pixel breit ist , 992 Pixel breit ist , wohingegen meine Framegröße in Figma 1.440 Pixel beträgt Um dieses Problem mit der Reaktionsfähigkeit zu lösen, müssen wir responsive Einheiten wie Prozent verwenden, beiden Positionieren wir die zweite Karte an dafür vorgesehenen Stelle, damit wir besser sehen können , womit wir arbeiten Fügen Sie dazu zunächst eine Kombinationsklasse hinzu und ändern Sie dann nur den Wert für die oberste Position. Der richtige Positionswert sollte besser von der Basisklasse verwaltet werden, da sich diese beiden Karten immer im gleichen Abstand von der rechten befinden. Jetzt ist die Position der zweiten Karte Bildschirmen nicht sehr einheitlich. Warum ist das so? Weil die Karten keine passende Größe haben. Sie haben unabhängig vom Bildschirm eine feste Größe. Auf einem kleineren Bildschirm deckt die oberste Karte fast die gesamte Hälfte des Hintergrundbilds ab, auf dem größeren Bildschirm deckt sie jedoch nur einen Bruchteil davon ab. Deshalb müssen wir auch dafür sorgen, dass die Kartengrößen anpassungsfähig sind. Wir können das ganz einfach tun, indem wir den Karten eine prozentuale Breite geben. Prozentwerte beziehen sich auf das übergeordnete Element , in diesem Fall die Bildspalte. Die Größe des Hauptbilds ist relativ zur zweiten Bildspalte. Wenn also die Bildspalte schrumpft, werden auch alle Bilder darin schrumpfen Um unseren Designs möglichst nahe zu kommen, werde ich das Hauptbild vorübergehend wieder auf das Bild umstellen , das wir zuvor mit Karten darauf hatten, und ich werde es als Leitfaden für die genaue Größe der Karten und ihrer Positionen verwenden der Karten und ihrer Positionen müssen Sie nicht tun, aber für mich ist es gerade praktisch. Lassen Sie uns die Reaktionsfähigkeit überprüfen. Nett. Jetzt klingeln alle Karten proportional zum Hauptbild Und jetzt machen wir dasselbe mit der zweiten Grafik. Sie die Kartenklasse duplizieren anstatt eine weitere Kombinationsklasse zu erstellen, Wenn Sie die Kartenklasse duplizieren, anstatt eine weitere Kombinationsklasse zu erstellen, wird sie sowieso eine andere Position auf der linken Seite haben sowieso eine andere Position auf der linken Seite Diesmal müssen wir die relative Position nicht ändern, da der Bild-Wrapper derselben Klasse wie oben entspricht und dieselbe relative Positionierung erbt Hervorragend. Die Layouts sind fertig. Lassen Sie uns nun Interaktionen erstellen. 126. Interaktionen: Karteninteraktion 2: Ordnung, unsere Karten sind alle eingerichtet und bereit, animiert zu werden Fangen wir eigentlich mit diesem an. Die Kalenderkarte könnte einfacher sein. Im ersten Schritt wählen Sie also zuerst die Kalenderkarte und gehen dann zum Interaktionsfenster. Stellen Sie sicher, dass dies ausgewählt ist. Andernfalls werden wir die Interaktionen auf der Karte nicht einrichten, und Sie richten möglicherweise etwas anderes ein. Hier hat Webflow zwei Versionen des Interaktionsfensters. Es gibt eine mit GSAP und eine mit klassischen Interaktionen. In diesem Fall möchten Sie SAP-Interaktionen auswählen. In den Auslösern müssen wir jetzt auf Hover, Scrollen usw. klicken In diesem Fall werden wir diese Karte so animieren , dass, wenn der Benutzer auf der Seite scrollt, diese Karte animiert wird dass, wenn der Benutzer auf der Seite scrollt, und quasi hineingleitet und erscheint Das ist ein Scroll-Trigger. Wählen wir Scrollen und geben dieser Folie einen Namen. Und was wir für diese Karte tun können , ist, sie von links einzuschieben . Nennen wir das also Slide in links. Also hier ist, was wir jetzt haben. Wir haben Auslöser und wir haben Aktionen. Zeigt genau, was passiert. Trigger-Scroll-Kalenderkarte. Das ist unser Auslöser. Und jetzt haben wir Action. In diesem Dropdown werden wir eine Reihe verschiedener Voreinstellungen haben, die Webflow gerade erstellt hat und auf die bereits einige Werte angewendet wurden, einige verschiedene Animationen mit Lotti Und eine, das ist die erste, eine benutzerdefinierte Animation, die Animation von Grund auf gelöscht wird, und das werden wir auswählen, damit wir leicht lernen können, wie man damit wir leicht lernen können Wählen Sie also die erste aus. Und jetzt kommen wir zu dieser Animationsansicht mit einer Zeitleiste und einigen Eigenschaften, die wir ändern können. Das erste, was wir durchgehen wollen, sind die Eigenschaften. In unserem Fall wollen wir also, dass es auf der linken Seite ist und von links nach rechts reinkommt. Dies wird durch diese beiden verschiedenen Spalten und zwei definiert. Jede Animation hat immer einen Startpunkt. Was ist ihr ursprünglicher Zustand? Und wo endet es dann? Wächst es? Fangen Sie unsichtbar an, dann erscheint es ab zwei. Das ist es, wofür das steht. In unserem Fall wollen wir, dass das hier genau so endet, wie wir es entworfen haben. Wir wollen also eigentlich nichts an den beiden ändern. Wir wollen etwas am Formular ändern. Wählen Sie also aus und klicken Sie erneut darauf. Dadurch werden zwei deaktiviert. Wenn Sie an den beiden nichts ändern, Webflow davon aus, dass Sie am Ende Ihren ursprünglichen Zustand haben , in dem Sie ihn entworfen haben Was wollen wir hier also ändern? Wir haben ein paar Optionen , die es bereits gibt. Wir können weitere Eigenschaften hinzufügen , die wir ändern und animieren können In diesem Fall möchten wir die Opazität ändern, weil wir möchten, dass sie angezeigt wird Opazität ändern, weil wir möchten Wir möchten, dass dies unsichtbar ist und dann erscheint. Eine weitere Eigenschaft, die wir ändern möchten, ist ihre Position auf der X-Achse. Wir wollen, dass es sich von links nach rechts bewegt , und das ist die X-Achse. Wir brauchen kein Y und wir brauchen keine Skalierung. Positive Werte bedeuten also, dass wir uns von rechts bewegen. Wir brauchen grundsätzlich negative Werte. Negativ sagen wir 50 Pixel. Sie möchten nicht zu weit gehen, es beginnt den negativen 50 Pixeln und kehrt dann zu seiner ursprünglichen Null-Pixel-Position zurück. Und was die Opazität angeht, wollen wir, dass sie zunächst zu 0% unsichtbar ist und dann zu 100% ansteigt, was sie natürlich von alleine tun Das müssen wir nicht spezifizieren. Nun, das ist eine Scroll-Interaktion, die wir nicht anstreben, weil das Scrollen bei der Bewegung ist und es nicht so ist, als würde es auf einmal erscheinen Und wie Sie sehen können, bewegt sich auch diese Timeline-Position Bei der Interaktion mit dem Scrollen gibt es zwei Arten von Interaktionen. Eine davon ist, dass sie auslöst. Sobald du in etwas scrollst, wird es ausgelöst und es wird ein anderes abgespielt, das es scrubbt Und was wir tun müssen, ist, zu unserem Auslöser zurückzukehren . Das ist unser Auslöser. Wir waren gerade hier. Das waren Aktionen. Hier waren wir Custom Animation. Und wir gehen zurück zum Scroll-Trigger, klicken darauf und wir werden hier einige Optionen haben, und wir werden hier einige Optionen um die Einstellungen des Triggers zu ändern. Jeder Trigger hat unterschiedliche Optionen , die wir ändern können. Zum Beispiel hat das Klicken seine eigenen Optionen, Mauszeiger darüber, der Mauszeiger hat seine eigenen Optionen und so weiter Scroll hat hier verschiedene Optionen. Die Schriftrolle hat zwei Arten von Steuerelementen. Eine davon ist Scrub on Scroll, und diese Option ist standardmäßig ausgewählt Das ist Scrub beim Scrollen. Scrub bedeutet, die Timeline zu schrubben Dies ist eine Jargonsprache , die aus der Animation stammt. Die Zeitleiste schrubbt also. Diese Sache, die so ist, als würde man die Zeitleiste durchgehen, das nennt man Schrubben Deshalb heißt es Scrub on Scroll. Das ist es also, was passiert. Es ist also animiert, zu scrollen. Das ist nicht das, was wir wollen Was wir wollen, ist die zweite, nämlich Aktionen auslösen. Und sobald der Auslöser erreicht ist, wird die Animation in einem Rutsch abgespielt. Und sobald Sie dies auf den Auslöser ändern, erhalten Sie hier diesen Play-Button. Und wie Sie sehen können, ist das genau die Animation , die wir wollen. Nun, eine weitere Option, lassen Sie uns zu den Trigger-Einstellungen zurückkehren . Eine weitere Option, die wir ändern müssen, ist, wo fängt sie eigentlich an? Das ist der Anfang. Wo wird das Scrollen ausgelöst? Wird sie ausgelöst, wenn diese Karte hier erscheint? Wird es ausgelöst, wenn es in der Mitte erscheint? Wird es ausgelöst, wenn es irgendwo hier erscheint? Und hier können wir definieren , wo genau der Auslöser passiert. Wir haben hier zwei Optionen, nämlich Element und Viewport Und wenn diese beiden aufeinander abgestimmt sind , passiert der Auslöser In diesem Fall der obere Rand des Elements genau hier auf den trifft der obere Rand des Elements genau hier auf den unteren Rand des Viewports Viewport entspricht dem Bildschirm, sichtbarer Bildschirm der Seite, unterer Rand des Sobald sich diese beiden treffen, lösen Sie die Scroll-Animation aus Wie Sie sehen können, haben wir mit diesen Markierungen geschlossen. Normalerweise habe ich es deaktiviert, aber für dieses Video ist es eigentlich ganz nett. Ich kann genau zeigen, wo dieser Auslöser passiert. Und dieser Auslöser wird genau hier passieren , ganz am Anfang, wenn wir tatsächlich gehen und ihn mir auf der echten Seite zeigen lassen können tatsächlich gehen und ihn mir auf der echten Seite zeigen lassen . Wir scrollen rein, richtig, und passen gerade auf, es ist unsichtbar Und in dem Moment, in dem sie emittieren, erscheint es. So wollen wir es nicht, oder? Wir wollen, dass es irgendwo erscheint , wenn wir die Hälfte des Bildschirms Was wir hier also ändern werden, ist zum Beispiel, wenn Sie von oben nach unten wechseln, wie Sie sehen können, wechselt der Auslöser jetzt nach unten, also in die Mitte Ich werde zur Mitte wechseln, aber lassen wir das Oberteil behalten. Und jetzt ändern wir den Viewport. Wenn wir es nach oben ändern, wird es hier ausgelöst. Wenn sich das hier trifft, ist das zu weit weg, ein guter Ort wäre das Zentrum. Also genau hier, wenn Karte irgendwo genau hier auf der Seite ist, wird sie ausgelöst. Diese Felder können auch Werte wie 20% bis 80% des Bildschirms einnehmen , und diese einfachen Wörter wie oben, Mitte, unten. In Ordnung, das ist die perfekte Platzierung. Lass es uns testen. Sie beim Testen Ihrer Scroll-Animationen aus dem Bereich heraus und gehen Sie dann in die Vorschau und beginnen Sie dann von vorne. Du kannst aufpassen. Hier ist der Start, hier ist der Scroller-Start Sobald sich diese beiden treffen , passiert der Auslöser. Das ist ziemlich gut. Wenn du das noch einmal spielen möchtest, musst du den Vorschaumodus noch einmal zurücksetzen, zurückkommen und wir spielen wieder. In Ordnung, das ist ziemlich gut. Eigentlich werde ich diese Markierungen deaktivieren . Es lenkt ab. Nun, eine andere Sache, die Animation ist nicht sehr flüssig. Und um etwas an der Animation zu ändern, kehren wir zu den Aktionen zurück, und das ist unsere Animation, benutzerdefinierte Animation, wir gehen hier hin. Nun, wie ändern wir diese Animation und machen sie ein bisschen flüssiger? Und das geschieht durch Lockerung und Dauer. Im Moment ist die Beschleunigung auf linear eingestellt, und wir haben hier ein paar verschiedene Optionen, aber was ich tun werde, ist dass wir auf diese klicken, und ich werde dir hier besser zeigen , wie diese Beschleunigungsanimation Jede Animation hat Zeit und Fortschritt. Das ist Zeit. Das ist Fortschritt. Zeit warum Fortschritt. Linear bedeutet, dass im Laufe der Zeit die gleiche Menge an Fortschritt in der Animation vergeht gleiche Menge an Fortschritt in der Animation vergeht Also Bam Bam bum, bum, bum, bum, bum, bum bum bum mit der gleichen Deshalb ist Linear keine besonders schöne und interessante Animation. Von hier aus können Sie sich eine Vorschau davon ansehen Die Box bewegt sich mit einer konstanten Geschwindigkeit. Das wollen wir nicht. Wir haben eine andere Option, nämlich Lockerung. Lockerung bedeutet, dass es langsam anfängt. Lassen Sie uns das auf Extrem umstellen , damit Sie es besser sehen können. Fängt sehr langsam an. Es ist also Zeit, oder? Am Anfang wurden nur sehr geringe Fortschritte erzielt. Es ist nein, nein, kein Fortschritt, und nach der Hälfte dreht es sich um und beschleunigt sich dann, dreht es sich um und beschleunigt sich dann, und danach sind alle Fortschritte gemacht Kann eine Vorschau davon anzeigen. Siehst du, langsam und beschleunigt dann. Das ist lockernd. Dann müssen wir uns entspannen. Dann wechseln wir zu Extrem, um es etwas stärker herauszustellen. Was mit Leichtigkeit passiert , ist, dass es superschnell anfängt. Viele Fortschritte geschehen also sehr, sehr schnell, und dann werden sie langsamer und Landung verläuft sehr reibungslos. Lass uns sehen. Fängt also sehr schnell und hat dann eine sehr schöne sanfte Landung. Bei Animationen, die erscheinen und bleiben und einfach an einer Stelle landen, ist normalerweise Entspannung das, was wir wollen. Also lassen wir es locker und extrem oder wir machen es auch mit anderen Optionen. Was auch aus diesem Drop-down-Menü ausgewählt werden kann , ist leistungsstark Teller. Jetzt ist es ein bisschen zu schnell. Die Standarddauer von Webflow macht es also etwas zu schnell Diese Angabe erfolgt in Sekunden und kann auf Millisekunden, 1 Sekunde, zwei Sekunden oder eine halbe Sekunde oder eine beliebige beliebige Dezimalstelle umgestellt auf Millisekunden, 1 Sekunde, zwei Sekunden oder eine halbe Sekunde oder eine beliebige beliebige Dezimalstelle Versuchen wir es mit 1 Sekunde. Da hast du's. Das ist jetzt glatt. Hervorragend. Lass es uns versuchen. Perfekt. Genau das wollen wir. Ordnung. Nun, das Gleiche gilt für die Event-Karten. Lass uns das von hier aus beenden. Auch hier wählen wir eine der Ereigniskarten und klicken erneut auf Scroll-Trigger. Und dieses Mal lassen wir das Ganze von unten einziehen. Löse das Scroll-Event-Auto aus. Das wollen wir. Lassen Sie uns die Einstellungen der Scroll-Einstellungen ändern. Nun, hier ist ein wichtiger Teil und ich möchte, dass du sicherstellst, dass du dasselbe hast wie ich, nämlich ein Ziel für jedes Ziel . Jedes Ziel der Interaktion innerhalb von Webflow wird unterschiedliche Möglichkeiten haben, wie du es anvisieren kannst Sie können auf die Klasse abzielen, Sie können das Element direkt als Ziel Sie können eine Seite und einige andere Optionen als Ziel festlegen. In diesem Fall wird automatisch eine Klasse ausgewählt, weil auf unsere Karte eine Klasse angewendet wurde Standardmäßig wird das Targeting automatisch ausgewählt. Und hier können wir auswählen, welche Klasse wir wollen. Und wenn Sie das deaktivieren, können Sie sehen, dass Sie alle Klassen auswählen können, die Sie bereits auf Ihrer Site erstellt haben. Und jetzt, wenn ich das zum Beispiel auf Pfeil ändere, spielt es keine Rolle, ob das ausgewählt ist. Jetzt animieren wir den Pfeil. Wir animieren die Karte nicht mehr. Nun, worauf du hier achten musst, sobald du eine Event-Karte hast, musst du sicherstellen, dass diese Klasse und diese Klasse sich die Basisklasse teilen, denn wenn du den Auslöser für diesen Typen setzt , lass uns sehen, scrolle Du wirst sehen, dass Webflow sowohl die Basisklasse als auch die Kombinationsklasse hinzugefügt hat, was bedeutet, dass nur diese Karte animiert wird Wir möchten, dass diese Animation und Interaktion auf beide angewendet werden Hier müssen Sie sich also vergewissern. Klassen, wenn auf deine Karten unterschiedliche Klassen angewendet wurden unterschiedliche Klassen angewendet oder wenn sie eine Kombiklasse haben, dann achte darauf, dass du die Basisklasse auswählst. Und wenn du versehentlich eine der Karten ausgewählt hast, auf die eine Kombinationsklasse angewendet wurde , entferne diese einfach von. Und drücken Sie die Eingabetaste oder beenden Sie es einfach. Und das ist jetzt der richtige Auslöser ausgewählt. Aber lass mich zurückgehen, weil ich hier alles durcheinander bringe. Ordnung. Also haben wir den richtigen Trigger, Scroll, Event Car. Das ist es, was du willst. Wenn Sie noch andere Basisklassen haben , müssen Sie diese entfernen. Auch in den Einstellungen wollen wir, dass der obere Teil des Elements auf die Mitte des Viewports trifft, und dann wird es ausgelöst, und wir wollen nicht, dass beim Scrollen scrubben Wir wollen Aktionen auslösen. Schließen, und jetzt fügen wir eine Aktion hinzu. Animieren. Ich werde diese Markierungen tatsächlich deaktivieren Ich weiß, dass sie einfach reinkommen. Und was wollen wir in diesem Fall animieren, oder? Wir wollen die Opazität wieder animieren. Wir wollen nicht deaktivieren, also wähle ich aus „Zwei deaktivieren Zwei ist bereits definiert. Dies ist die endgültige Position. Wir wollen die Opazität animieren und wir wollen die X-Achse nicht mehr animieren Wir wollen YxS animieren. Wir brauchen keine Skalierung Also wollen wir, dass es sich vertikal bewegt. Das macht YxS. Also von unten, und lassen Sie uns sehen dass es entweder positive oder negative Werte Es sind also positive Werte. Also 50 Pixel vom Boden entfernt, 0% Opazität, was bedeutet, dass es unsichtbar ist, und dann erscheint es Das ist genau das, was wir wollen. Jetzt, Dauer, 1 Sekunde, versuche, deine Dauer und Lockerung überall anzupassen Es ist schöner, wenn dieselbe Art von Animationen mit der gleichen Geschwindigkeit animiert wird. Und wir hatten die Möglichkeit, die Stromversorgung für einige auszuschalten . Lass es uns testen. Nett. Das funktioniert alles gut. Manchmal ist nur eine Sache zu beachten, manchmal passiert es, dass Ihre Animation irgendwo in der Mitte beginnt. Wenn Sie mit einem Animator mit einem Interaktionsfenster herumspielen , kann es bei 0,5 Sekunden oder so beginnen und dann in der Mitte oder irgendwo später Das willst du nicht. Also nur den Fall, dass Sie hier einen Wert haben, setzen Sie ihn einfach zurück oder setzen Sie ihn auf Null. Und richtig, lass uns in den Vorschaumodus gehen und es testen. Perfekt. Noch einmal. Hervorragend. Hervorragend. Und das sind unsere Animationen. Diese Interaktionen waren so einfach einzurichten, aber sie haben der Seite viel Leben eingehaucht. Jetzt fühlt sich die Seite ein bisschen lebendiger, ein bisschen freundlicher und interaktiver an. 127. Wechselwirkungen: Pfeilinteraktion: In diesem Video werden wir dieses Pfeilsymbol animieren, wenn der Mauszeiger darüber bewegt wird Wenn wir also mit der Maus auf den Link-Block zeigen, bewegt sich das Pfeilsymbol leicht nach Sehr einfache Animation. Zuallererst brauchen wir die richtigen Klassen. Also lasst uns das in etwas einprägsameres umbenennen , wie das Pfeilsymbol. Das ist unser Pfeilsymbol, und das übergeordnete Symbol ist unser Tintenblock. Wir können das als Linkblock belassen. Das funktioniert bei uns. Was ist also unser Auslöseelement? Unser Triggerelement ist der gesamte Linkblock. Immer wenn ich den Mauszeiger hier oder hier bewege, muss der Pfeil animiert werden Also ist die ganze Sache der Auslöser. Wenn Sie also Link-Block ausgewählt haben, gehen Sie zum Interaktionen-Menü und wir wählen Trigger bei welchem Hover Nennen wir diesen Link Hover. Und standardmäßig wird der richtige Trigger ausgewählt, nämlich Linkblock, die Klasse Es wird der richtige ausgewählt, weil wir den Tintenblock ausgewählt hatten , bevor wir einen neuen Trigger hinzugefügt haben Aber wenn Sie das nicht tun, können Sie das Ziel natürlich einfach von hier aus ändern Wenn Sie ein Element oder etwas anderes ausgewählt haben , ändern Sie es in die Klasse, und von hier aus können Sie einfach Ihren Klassen-Link-Block finden und ihn darauf anwenden. Wenn Sie das tun, stellen Sie sicher, dass Sie einen Klassenlink-Block als Basisklasse haben und dass es sich dabei um dieselbe Klasse handelt, die auf alle anderen Linkblöcke angewendet wird , da wir diese Interaktion überall wiederverwenden möchten . Wenn Sie hier also eine Basisklasse oder eine andere doppelte Klasse oder etwas anderes haben , überprüfen Sie das einfach, stellen Sie sicher, dass andere Elemente, andere Linkblöcke dasselbe haben. Und wenn Sie versehentlich eine mit diesen Kombinationsklassen ausgewählt haben, entfernen Sie einfach diese zusätzliche Kombinationsklasse. Ordnung. Also, was ist der Typ hier? Typ ist Maus, Enter. Ordnung. Das wollen wir in diesem Fall. Und jetzt müssen wir eine Aktion einrichten. Ich mag die erste, die benutzerdefinierte Animation. Hier definieren wir, was unser Ziel unserer Animation ist. Wir hatten das Ziel eines Triggers, mit dem interagiert wird Nun, was wird beeinflusst und was wird animiert. Im Moment heißt es, dass Target das auslösende Element ist. In diesem Fall Link-Block. Das wollen wir nicht animieren. Wir wollen das Pfeilsymbol animieren. Wählen Sie dies aus und gehen Sie zum Drop-down-Menü, damit wir das Ziel unserer Animation ändern können Wir haben mehrere verschiedene Optionen und zwei Hauptoptionen, die wir normalerweise verwenden werden, um auf bestimmte Elemente abzuzielen Eine besteht darin, das Element ins Visier zu nehmen. Element bedeutet, dass Sie auf ein sehr, sehr einzigartiges bestimmtes Element abzielen . In diesem Fall nur dieser Pfeil und nicht die anderen Pfeile unten. Da wir diese Interaktion wiederverwenden möchten, ist es besser, eine Klasse zu verwenden , da sie auch eine gemeinsame Pfeilsymbolklasse haben. Auf diese Weise können wir eine Interaktion haben, die alle Linkblöcke steuert. Also werden wir die Klasse auswählen. Also, in diesem Fall wollen wir das nicht. Wir wollen den Link-Block nicht. Wir zielen nicht darauf ab, also entferne es und verwende das Pfeilsymbol oder die Klasse, die du deinem Symbol gegeben hast. Das ist gut. Also überprüfe einfach das Ziel, das Pfeilsymbol. Immer wenn ihr ein.in-Front vorangestellt wird, bedeutet das, dass es sich um eine CSS-Klasse So schreibt man CSS-Klassen innerhalb von Code. Punkt etwas. In Ordnung. Also, was animieren wir? Wir wollen, dass es sich bewegt, wenn es schwebt, oder? In diesem Fall wollen wir also nicht, dass von definiert wird, weil von so ist, wie es ist Wir wollen zwei definieren. Das passiert in der Animation. Wenn Sie also von ausgewählt haben, klicken Sie einfach auf Abgewählt, damit es irgendwie herauskommt und wir es nicht berühren Und wenn du zwei ausgewählt hast, kannst du das auf diese Weise anwenden Jetzt können wir einige der Eigenschaften bearbeiten. So können wir den Pfeil animieren. Opazität, das brauchen wir nicht, bewegen Sie Y, wir brauchen das nicht, skalieren, das brauchen wir nicht Was wir brauchen, ist Bewegung auf der X-Achse. Sagen wir also etwa acht Pixel. Es verschiebt acht Pixel, und positive Werte bedeuten , dass sie sich nach rechts bewegen. Negative Werte würden bedeuten, dass sie sich nach links bewegen. In diesem Fall brauchen wir Positives. Mal sehen, wie Sie sehen können, bewegt es sich und animiert Lassen Sie uns das jetzt in der Vorschau testen. Ziemlich gut. Es animiert etwas zu langsam, obwohl wir die Dauer ändern können. Versuchen wir es mit 0.2 Das ist ziemlich gut. Aber wie Sie sehen können, bleibt es offensichtlich hängen, oder? Es bleibt an einem Ort. Wir möchten, dass es sich beim Schweben nach rechts bewegt und beim Verlassen des Mauszeigers damit es an seine ursprüngliche Position zurückkehrt Gehen wir also zurück. Wir werden jetzt einen neuen Trigger einrichten. Dieser Trigger wurde im Grunde genommen mit der Maus angehalten, und wir können einen neuen Auslöser, einen weiteren Hover, wieder auf den Link-Block setzen weiteren Hover, wieder auf den Link-Block Wenn Sie in Ihrem Fall versehentlich etwas auf der Leinwand ausgewählt haben und es Ihre Klasse ändert, wählen Sie einfach Ihre richtige Klasse wählen Sie einfach Ihre richtige Und in diesem Fall ändern wir den Typ von Mouse Enter auf Mouse Leave. Löse jedes Mausblatt aus. Das ist genau das, was wir wollen. Und von der Steuerung aus können wir das tatsächlich ändern und ihm sagen, dass er umgekehrt werden soll, wodurch die Animation von ihrer aktuellen Position aus rückwärts platziert von ihrer aktuellen Position aus rückwärts Und umgekehrt bedeutet die Umkehrung dieser Aktionen. Was auch immer wir einrichten, wir haben hier offensichtlich nur eine Aktion. Diese Aktion wird also einfach rückwärts rückgängig gemacht. Lass es uns testen. Nett. Alles funktioniert gut. Sehen wir uns jetzt andere an. Und wie Sie sofort sehen können, funktionieren die anderen auch, und sie funktionieren und wir mussten die Interaktion nicht auf die anderen anwenden , weil wir Klassen verwenden. Um stattdessen eine Fehlerbehebung durchzuführen, falls Sie einige Fehler haben und es für Sie nicht funktioniert , falls die anderen Links für Sie nicht funktionieren, überprüfen Sie dies zunächst, überprüfen Sie dies zunächst, aktivieren Sie Ihr Stylus-Bedienfeld und überprüfen Sie, ob hier das Pfeilsymbol, Pfeil kann ich hier angewendet haben , oder? Das ist SAM. Das ist genauso. Und das ist auch hier so. Dieses kleine Bolzensymbol zeigt dir , dass dieses Ding Teil einer Interaktion ist, entweder ein Auslöser oder von einer Interaktion beeinflusst wird. Unser Panel zeigt uns das auch. Wenn Sie also ein bisschen scrollen , werden alle Elemente angezeigt, die entweder ausgelöst werden oder Teil einer Interaktion sind. Außerdem haben wir hier ein Panel , das Ihnen alle Interaktionen zeigt , die wir auf dieser Seite haben. Stellen Sie also sicher, dass dies ein Pfeilsymbol ist. Alle haben dieselbe Klasse, und alle Links Link Block haben dieselbe Klasse. Ist Link-Block auch für mich. Linkblock auch hier. Deshalb funktioniert es. Und dann musst du innerhalb der Interaktionen sicherstellen, dass Hover anzeigt, dass die Klassen ausgewählt sind, Link-Blog, Klasse, Link-Blog, Hover Leave, Klasse, Link-Block Hover Leave, Klasse, Link-Block Und in der Animation wieder das Ziel, das Klassenpfeilsymbol. Das ist es, was wir wollen. Jetzt gibt es ein kleines Problem , das wir beheben müssen, da Sie es auf kleineren Bildschirmen nicht sehen können. Wenn Sie aufpassen, animiert sich auch der andere, wenn ich mit der Maus darüber Das liegt daran, dass wir eine Klasse ins Visier nehmen. Wir sagen also, dass jedes Mal, wenn ich mit der Maus auf „Weitere Informationen“ fahre, Klasse mit dem Namen Oicon animieren und das ist eine Klasse namens No Das ist ein Klassenname mit dem Namen Hero Icon und dieser auch. Also animieren alle drei. Aber das wollen wir nicht Wir wollen nur den animieren, der sich innerhalb des Triggerelements befindet Und wir haben diese Option. Es ist also in den Aktionen enthalten. Jetzt im Auslöser , weil das ein Problem mit dem Arocon ist ein Problem mit dem Arocon Also ist es das, was animiert wird. Also innerhalb der Aktionen. Pfeilsymbol. Hier haben wir eine Option zum Filtern. Und wir haben hier nur wenige Optionen innerhalb von Direct Hob, beides würde innerhalb funktionieren. Und von diesem Dropdown wollen wir innerhalb des Trigger-Elements Möglicherweise wurde standardmäßig Klasse oder etwas anderes ausgewählt, aber wir benötigen ein Trigger-Element Jetzt sagt uns das animierte Pfeilsymbol, das sich im Triggerelement befindet, nicht jedes einzelne Pfeilsymbol Lassen Sie uns das jetzt noch einmal spielen und den Bildschirm vergrößern, sodass wir ein paar davon zusammen sehen können ein paar davon zusammen sehen Und wie Sie jetzt sehen können , wenn ich mit der Maus auf dieses Bild fahre, wird das andere nicht animiert Und alles erledigt. Alles klar, das sind also die Grundlagen von Interaktionen. Es gibt unendlich viele Möglichkeiten was mit Interaktionen in Webflow gemacht werden kann Du kannst gehen und ich rate dir, das zu tun, um zum Showcase zu gehen und du wirst sehen, wie einige Leute sehr verrückte Animationen und Interaktionen machen , und wir werden dir gute Ideen geben was in Webflow gemacht werden kann, und dir eine Art Inspiration für zukünftige Projekte geben Interaktionen mögen am Anfang etwas entmutigend aussehen, aber in Wirklichkeit werden Sie, sobald Sie diese kleine Hürde überwunden haben, sehen, wie einfach sie sein können und wie viel Spaß und wie viele verschiedene Optionen Sie haben, um etwas sehr Interaktives, etwas sehr Schönes und Lustiges zu schaffen . Und Sie werden in der Lage sein, komplexe Interaktionen mit nur wenigen Cliquen zu erstellen , etwas, wofür Sie wahrscheinlich Monate Javascript-Übung benötigen würden , um das ohne Web mehr Videos über Interaktionen im fortgeschrittenen Teil dieses Kurses zu erreichen , etwas, mit dem Sie Ihr Wissen vertiefen und ein bisschen mehr Übung sammeln können. Obwohl das, was wir bereits gelernt haben, völlig ausreichend ist , um mit der Arbeit an echten Projekten zu beginnen Im nächsten Abschnitt werden wir uns in diesem Fall um die mobile Version unserer Website-Homepage kümmern die mobile Version unserer Website-Homepage kümmern. Und dann, im nächsten Abschnitt, werden wir alles über CMS lernen und wie man einen Blog zu unserer Website hinzufügt. 128. Responsive: Navbar (Team-App): Ordnung. In diesem Video beginnen wir mit der Optimierung der mobilen Version unserer Homepage, beginnend mit der Navigationsleiste. Im vorherigen Projekt haben wir die Nickerchenleiste auf dem Tablet vollständig sichtbar gemacht . Mal sehen, ob wir hier dasselbe tun können. Um die Nablns auf dem Tablet anzuzeigen, wählen Sie die Tab-Leiste und gehen Sie zum Einstellungsfenster Hier finden Sie Optionen für das Menüsymbol. Wenn sich der Schieberegler auf dem Tablet befindet, bedeutet dies, dass das Hamburger-Menü auf dem Tablet und allen kleineren Geräten angezeigt wird auf dem Tablet und allen kleineren Geräten angezeigt Wenn wir es nach unten bewegen, wird das Tablet deaktiviert. Das ist ausgezeichnet. Sie müssen nichts ändern. Alles passt sehr gut. Ich liebe es , wenn Dinge einfach so einfach klappen. Mal sehen, was für die Na-Bar in der mobilen Landschaft getan werden muss . Es sind nur Farben und etwas Abstand. Im vorherigen Projekt erstreckte sich das Drop-down-Menü von Kante zu Kante, aber hier ist es nicht so. liegt daran, dass wir eine etwas andere Anordnung für die N-Bar haben. Es befindet sich in dem Heldenbereich, der gepolstert ist, und der Dropdown erstreckt sich nur bis zur Nap-Bar selbst Wenn wir das wollten, könnten wir möglicherweise etwas ausdehnen , indem wir vielleicht negative Ränder verwenden Aber ich persönlich finde es ganz okay, es sich nicht von Kante zu Kante dehnt. Lassen wir es also so wie es ist. Um die Farbe der Menüschaltfläche zu ändern, müssen wir nur die Textfarbe des Blocks ändern. Es sind Symbole zum Einfügen von Schriftarten, sodass die Schriftfarbe sie ändert. Das Gleiche gilt für die Größe. Wir müssen nur die Schriftgröße erhöhen und sie wird wachsen. Ich glaube, wir haben zuvor 30 Pixel verwendet. Und lassen Sie uns den Abstand für die gesamte anklickbare Schaltfläche anpassen für die gesamte anklickbare Schaltfläche Es ist ein bisschen zu groß, idealerweise würde es die gleiche Größe haben wie die Schaltflächen und Links auf der Leiste, die meiner Meinung nach 44 Pixel hoch sind Wenn der Text also etwa 30 Pixel groß ist, dann sollte ein Abstand von sieben Pixeln ihn 44 ergeben Lassen Sie uns nun den geöffneten Status des Menüs so gestalten, dass das Menü während des Stylings angezeigt Wählen Sie ein beliebiges Element in der NAB-Leiste aus und klicken Sie dann auf der Registerkarte Einstellungen auf Menü öffnen Jetzt sind Menüelemente anklickbar und wir können sie auswählen und gestalten Die Hintergrundfarbe stammt aus diesem NAV-Menüblock. Wählen wir es aus und ändern wir den Hintergrund auf, ich würde sagen, auf unsere dunkelblaue Farbe, die wir in der Fußzeile verwenden Und das Gleiche gilt für den Hintergrund auf der Menüschaltfläche. Wenn Sie Änderungen am Öffnungsstatus der Menüschaltfläche vornehmen, stellen Sie sicher, dass im Auswahlfeld diese grüne offene Klasse angezeigt wird So gestalten wir den offenen Zustand. Manchmal ist das Menü zwar geöffnet, aber diese Open-State-Klasse ist nicht vorhanden, sodass alle Änderungen nicht so übernommen werden, wie Sie es möchten. Aktualisieren Sie einfach die Leinwand und öffnen Sie das Menü erneut. Geben wir ihm eine ordentliche Polsterung. Kannst du erkennen, warum sich der Knopf bis zu den Rändern erstreckt? Das liegt daran, dass die Anzeige auf Blockierung eingestellt ist und Blockelemente die gesamte verfügbare Breite einnehmen . Wir müssen es so ändern, dass ein Inline-Block angezeigt wird, genau wie bei Standardschaltflächen. Das ist jetzt ungefähr richtig. Aber wir müssen es links ausrichten. Wir hatten diese ähnliche Herausforderung im vorherigen Projekt. Inline-Blöcke verhalten sich quasi wie Text. Wenn der übergeordnete Container also links mittig oder rechts ausgerichtet ist, wird er diese Ausrichtung beibehalten In diesem Fall ist das übergeordnete Element kein Menü, aber es heißt, dass es in Wirklichkeit linksbündig ausgerichtet ist, ist es nicht Das passiert manchmal. Gehen Sie also einfach hin und her und wenden Sie die linke Ausrichtung manuell an, damit die Änderung widergespiegelt wird. Fügen wir außerdem einige linke und obere Ränder , um die Schaltfläche richtig auszurichten. In Ordnung, das ist besser. Schließlich werde ich die Ecken der Hintergründe abrunden. Es wird ein bisschen schöner aussehen. Wir brauchen es nicht auf allen vier Seiten. Für die Menütaste brauchen wir sie in den oberen Ecken. Klicken Sie auf diese Option, um einzelne Ecken hinzuzufügen. Für das NaF-Menü wollen wir alle Ecken außer der oberen rechten Ecke haben Auf diese Weise lassen sich Button und Menü gut miteinander verbinden, wie ein einzelnes Objekt Das ist perfekt. Schauen wir uns jetzt an, wie es im Vorschaumodus aussieht. Eine letzte Sache: Sie sehen, dass das Logo hier ein wenig gepolstert Diese Polsterung ist bei Tablet- und Desktop-Versionen nicht vorhanden. Webflow fügt es in mobile Versionen ein. Wir brauchen diese Polsterung nicht, weil wir unsere eigene haben, also entfernen Sie sie einfach Ordnung. Weiter zur Portrait-Version. Es gibt eigentlich nichts, was für die Bar angepasst werden muss . Die Polsterungen müssen repariert werden, aber das ist Teil der Helden-Sektion Also werden wir das im nächsten Video machen. 129. Responsive: Helden-Abschnitt: Und wir sind zurück in diesem Video, wir werden den Heldenbereich an die verschiedenen Geräte anpassen . Es muss nicht viel getan werden , also sollte es schnell gehen. Verkleinern wir die Höhe des Heldenbereichs auf dem Tablet In diesem Fall ist es zu groß. Etwas wie 680 Pixel sollten gut sein. Und wir müssen den Rand des Inhalts so anpassen , dass er wieder zentriert ist. Hundertunddreißig Pixel sehen gut aus. Weiter zur mobilen Landschaft. Auf den ersten Blick sieht es so aus, hier nichts repariert werden müsste, aber wir können vergessen , dass wir hier nicht die wahre mobile Landschaft sehen . Das ist zu groß. Um dies richtig zu visualisieren, ist es am besten, es auf einem echten Handy zu überprüfen Wir können jedoch die Höhe des Browsers verringern, um eine ungefähre Vorstellung davon zu bekommen, womit wir arbeiten So wird es aussehen . Hier ist nichts sichtbar. Vertikale Abstände sind in der mobilen Landschaft von entscheidender Bedeutung, daher müssen wir unsere Inhalte enger und enger gestalten Lassen Sie uns zunächst den Abstand zwischen den Abschnitten reduzieren. Und entferne die feste Höhe des Heldenbereichs. Wir wollen, dass es in diesem Fall automatisch ist, also nur so groß wie der Inhalt ist. Okay. Lassen Sie uns in ähnlicher Weise die horizontale Polsterung reduzieren Auf kleineren Geräten ist der Platz knapp. Ich würde 30 statt 60 Pixeln Polsterung an den Seiten sagen. Als Nächstes sollten wir die Telefongröße ein wenig verkleinern oder die Standardgröße H ist 55. Das kann für Handys etwas zu groß sein. Ich würde 35 oder 40 nehmen. Denken Sie daran, dass der Stil der Überschrift vom H-One-Tag stammt. Um der gesamten mobilen Landschaft ein H-Tag hinzuzufügen, entfernen Sie zunächst die zugewiesene Klasse und wählen Sie dann aus der Drop-down-Liste alle H-One-Überschriften wählen Sie dann aus der Drop-down-Liste alle H-One-Überschriften Du solltest dasselbe Landschaftssymbol auf der linken Seite sehen. Das ist wichtig. Auf diese Weise wissen wir, dass wir alle H One für mobile Landscape und Down-Version beeinflussen und nicht für Tablets oder Desktops. Sobald wir unten sind, können wir die weiße Klasse wieder zurückbringen. Eine letzte Sache für den Blick auf die Landschaft. Der Inhalt und das Hintergrundbild interagieren jetzt viel stärker. In den obigen Versionen befindet sich der Inhalt auf einer verschwommenen Fläche, aber hier bedeckt er das Gesicht des Modells Das macht es schwierig, Text zu lesen. Lassen Sie uns dieses Wort zunächst in die nächste Zeile verschieben . Aber das ist nicht genug. Also werden wir dem Hintergrundbild eine dunkle Überlagerung hinzufügen Hintergrundbild eine dunkle Überlagerung 30% scheinen genug zu sein. Und das ist für eine Landschaftsansicht getan. Das Porträt braucht also noch ein paar Dinge. Lassen Sie uns zunächst die Richtung des Formulars auf vertikal ändern des Formulars auf vertikal , sodass sich das Feld über der Schaltfläche befindet. Das ist ziemlich einfach , weil wir dieses Formular als Flexbox eingerichtet haben . Wir müssen also nur die Richtung ändern. Stellen Sie sicher, dass Sie das richtige Element auswählen. Es gibt Formular und Formularblock. Zweitens müssen wir den Heldenhintergrund korrigieren. Hier bietet sich diese benutzerdefinierte Positionierung an da keine der voreingestellten Ausrichtungen für uns funktioniert. Ich denke, 55% machen einen besseren Job. Okay, lassen Sie uns die Fließfähigkeit überprüfen. Hoppla, das Feld dehnt sich nicht ganz aus, weil es eine maximale Breite hat Also entfernen wir es in diesem Fall und setzen es auf „Keine“. Dadurch wird es so breit wie das übergeordnete Objekt. Denken Sie daran, dass alle Stiländerungen, die wir an diesen Versionen vornehmen, sich nur auf die Hierarchie nach unten und nicht nach oben auswirken Hierarchie nach unten und nicht nach oben Dieses Feld wird also nur im Hochformat des Mobiltelefons wiedergegeben und nicht im Querformat, Tablet oder Desktop Für den Heldenbereich ist alles erledigt . Versuchen wir es im Vorschaumodus, um sicherzustellen, dass alles gut aussieht und ordnungsgemäß funktioniert. Hervorragend. In den kommenden Videos werden wir mit den folgenden Abschnitten fortfahren. 130. Responsive: Mockup-Abschnitt: Und weiter mit dem nächsten Abschnitt. Für das Tablet ist es ziemlich einfach. Wir müssen das Bild nur mehr nach links bewegen. Wenn Sie darauf klicken, werden Sie feststellen , dass es einen negativen Rand hat. Das ist es, was dazu führt, dass es sich so sehr von der Seite entfernt. Lassen Sie uns die negative Marge verringern. Ich finde, das sieht ziemlich gut aus. -350 Pixel. Überprüfe die Fließfähigkeit und das war's. Was nun die mobile Landschaft angeht, beginnen wir mit der Abschnittspolsterung Wir haben die horizontale Polsterung im Heldenbereich kleiner gemacht Heldenbereich kleiner Es sind 30 Pixel. Wir haben das nie mit den anderen Abschnitten abgeglichen. Wir können die Änderung in diesem Abschnitt nicht direkt vornehmen, da auf ihn eine Coboklasse angewendet wurde Wenn wir den Speicherplatz verkleinern, gilt das nur diese Compo-Klasse und für keinen der Wir können also entweder einen anderen Abschnitt auswählen , der keine Compo-Klasse wie die nächste hat, oder wir können die Compo-Klasse für einen , oder wir können die Compo-Klasse für Moment loswerden Gestalte diesen Abschnitt und füge dann die Coo-Klasse wieder ein. Aber das ist komplizierter. Lassen Sie uns diesen Abschnitt unten einfach gestalten. Und das hat natürlich auch die Polsterung für den obigen Abschnitt übernommen . In ähnlicher Weise können wir den geeigneteren Wert ändern und ihn auf etwa -260 Pixel verringern auf etwa -260 Überprüfen Sie erneut die Fließfähigkeit. Eine weitere Sache, die ich hier korrigieren möchte, ist die vertikale Polsterung des Abschnitts Im Querformat ist der vertikale Raum sehr begrenzt. Wenn Sie sich vorstellen können, dass Sie dies in einer realen mobilen Landschaft sehen , werden Sie verstehen, dass Sie einige Lücken haben werden werden Sie verstehen, dass Sie einige Lücken haben werden, sodass Sie nicht wirklich viel Inhalt sehen. Eine Sache, die Sie bei der mobilen Ansicht im Querformat beachten sollten, ist, dass es sich nicht nur um mobile Landschaften handelt, sondern auch um einige Tablets in Flotten oder wie auch immer sie heißen, weil Sie im Viewer sehen werden, dass verschiedene Größen für verschiedene Geräte angezeigt In Wirklichkeit ist es also nicht nur mobile Landschaft, sondern wir nennen es mobile Landschaft, nur um die Dinge einfacher zu machen Okay, wir haben also in unseren Standardabschnitten einen vertikalen Abstand von 80 Pixeln unseren Standardabschnitten Ich werde das auf etwa 60 Pixel verkleinern, genau wie wir zuvor einen Abschnitt ausgewählt haben , der keine Convo-Klasse hat, und diesen formatieren Okay, weiter zum mobilen Portrait. Das Bild in diesem Abschnitt ist nicht einmal sichtbar. Wir werden also die Richtung der Flexbox in die Vertikale ändern . Es gibt noch eine andere Richtung, die wir ändern können. Wir können die Reihenfolge innerhalb der Flexbox umkehren, und es ist sinnvoller, zuerst das Bild zu haben. Und jetzt können wir das Bild stylen. Ein Problem ist, dass das Bild zu klein ist, also sollten wir es vergrößern. Das Erhöhen der Bildgröße hat einige Vor- und Nachteile. Wir können die Breite in den Bildeinstellungen nicht ändern. Dies sind globale Bildeinstellungen. Wenn wir hier also die Größe ändern, wirkt sich das auf jede einzelne Bildschirmgröße aus. Sehen Sie jetzt, dass das Bild vom Desktop verschwunden ist. Der ideale Ort ist es also, es über das Stil-Panel zu stylen. Hier drin gibt es noch einen anderen Punkt, den man nicht tun sollte. Stylen Sie nicht die Höhe. Wenn Sie die Höhe anpassen, wird das Seitenverhältnis nicht beibehalten und Sie erhalten ein Spaghettibild Die Breitenwerte sind die beste Option, aber auch hier werden sich einige Dinge merkwürdig verhalten Je nach Situation funktioniert entweder eine feste Breite oder eine Mindestbreite am besten Ein regulärer Breitenwert ändert beispielsweise nichts an der Größe. Aber die Mindestbreite macht einen ziemlich guten Job. Nicht dass das ein Bug oder irgendein Fehler wäre, es gibt normalerweise eine Antwort auf solch mysteriöse Verhaltensweisen In diesem Fall macht die Breite nicht viel aus, da es eine maximale Breite von 100% gibt, was bedeutet, dass sie nur so breit sein darf wie der übergeordnete Container Es überschreibt im Grunde die Breite, aber die minimale Breite ignoriert dies, da sie vor der maximalen Mach dir keine Sorgen, wenn du das alles nicht erwischst. Normalerweise mache ich mir nicht allzu viele Gedanken über die Argumentation. Ich spiele einfach mit Werten und schaue , welche funktionieren. In Ordnung. Ich würde sagen, 380 Pixel sehen gut aus. Jetzt müssen wir den negativen Rand korrigieren, vielleicht den Rand des Bildes am Inhalt ausrichten. Okay. Etwas wie -90 Pixel Und lassen Sie uns unten etwas Rand hinzufügen. Perfekt. Lassen Sie uns die Fließfähigkeit überprüfen und schon kann es losgehen Ich mache mir nicht allzu viele Gedanken über die Bildschirmgrößen, weniger als 320 Pixel breit Das ist gerade für unsere Zielgruppe, bei der es sich um moderne Teams handelt, ein seltenes gerade für unsere Zielgruppe, bei der es sich um moderne Teams handelt, Ich glaube nicht, dass einer von ihnen Nokia im Jahr 95 besitzt. Außerdem sieht Fluidität großartig aus. Mit dem Rest werden wir im nächsten Video weitermachen . Bleib hier. 131. 124 Responsive Body NEUE Benutzeroberfläche: machen dort weiter, wo wir aufgehört haben, und werden uns mit den responsiven Versionen dieser beiden Abschnitte aus dem Hauptteil befassen . Wir müssen in diesem Abschnitt etwas Platz schaffen. Es ist nicht genug Platz vorhanden, damit alles passt. Zunächst können wir den Abstand zwischen dem Bild und dem Inhalt verkleinern , beispielsweise um 60-30 Als Nächstes können wir diese Bilder von der Seite verschwinden lassen. In Wirklichkeit, genau wie das Modell oben. Es gibt keinen Grund, warum wir das nicht tun können. Wir müssen nur eine negative Marge festlegen. Das sieht eigentlich ziemlich cool aus. Okay, das ist immer noch nicht genug. Das Bild ist zu klein, und das liegt daran, dass der Inhalt viel zu viel Platz beansprucht und das Bild schrumpft Was wir hier tun können, ist die maximale Breite des Inhalts festzulegen maximale Breite des Inhalts damit er nicht über einen bestimmten Punkt hinaus wächst Lassen Sie uns diese Klasse zunächst in einen Inhalts-Wrapper umbenennen , damit wir wissen, womit wir arbeiten Diese Klasse wird von allen drei Inhaltsblöcken gemeinsam genutzt. Jetzt können wir dem Inhalts-Wrapper eine maximale Breite von etwa 50% geben eine maximale Breite von etwa . Das sollte für ein ausgewogeneres Aussehen sorgen Tatsächlich wird der Inhalt in der Desktop-Version auch etwas größer. Mir ist das noch nie aufgefallen, aber dieses Bild ist auf den schmalen Desktop-Bildschirmen etwas zu klein. Auf den größeren Bildschirmen ist es in Ordnung, aber es wäre schön, wenn wir auf den schmaleren Desktop-Bildschirmen, wie meiner 992-Pixel-Leinwand hier, die Größe vergrößern wie meiner 992-Pixel-Leinwand Jetzt können wir die maximale Breite auf dem Desktop auf 50% festlegen, da bei größeren Bildschirmen breiter sein wird als das, was wir derzeit haben Ich werde einfach die aktuelle maximale Breite in Pixeln auf etwa 410 Pixel erhöhen . Das gibt dem Bild jetzt etwas mehr Raum zum Wachsen. Maximal 50% mit sind in diesem Fall eindeutig nicht genug. Erhöhen wir es ein wenig, damit wir den Inhalt richtig anpassen können. Ich würde das Bild einfach ein wenig nach rechts verschieben , damit mehr von dem Mädchen sichtbar ist. Kommen wir nun zum mobilen Porträt. Das Layout hier ist bereits vertikal. Warum? Weil wir denselben Flexbox-Container wie oben verwenden. Und als wir es oben stylen, wurde dasselbe vertikale Layout darauf angewendet. Wir müssen nur die Reihenfolge umkehren. Wir müssen auch die maximale Breite von Inhaltswrappern abschaffen die maximale Breite von Inhaltswrappern Da wir möchten, dass der Inhalt die gesamte Breite ausfüllt, wählen Sie dieses Mal keinen aus der Dropdownliste aus, wir müssen nur das Bild anpassen Hier reduziere ich den negativen Rand auf etwa -30 Pixel und füge etwas Platz darunter hinzu, damit er nicht an der Überschrift klebt und keine Pixel auf der rechten Seite davon Das ist alles, was die Fluidität ausmacht , sie sieht ziemlich gut aus. Lassen Sie uns nun ähnliche Anpassungen auf den zweiten Abschnitt anwenden , beginnend mit dem Tablet, da wir nichts davon berührt haben Zuerst den Bild-Wrapper, wir benötigen dieselben Ränder wie oben, aber entgegengesetzte Richtungen Wie Sie sehen können, gibt es diesen Überlauf , weil das Bild von der Seite verschwindet Wir müssen also die Combo-Klasse anwenden, die wir bereits für den Overflow-Bereich haben Das ist alles, was die mobile Landschaft alleine großartig macht. Für das mobile Porträt benötigen wir nun genau den gleichen Abstand wie im obigen Bild. Derselbe Stil wurde bei diesem Bild nicht verwendet, da auf diesen Bild-Wrapper eine Kombinationsklasse angewendet wurde Und der linke rechte Rand durch diese Kombinationsklasse überschrieben Aber nicht der untere Rand, dieser wurde auch auf dieses Element übertragen Da hast du's. Das Handyporträt sieht toll aus. Überprüfen Sie die Reaktionsfähigkeit. Überprüfen Sie den Vorschaumodus für Animationen und all das. Stellen Sie sicher, dass alles gut aussieht und gut funktioniert. Im nächsten Video gehen wir Abschnitt mit den Testimonials 132. Reaktionsschnell: Erfahrungsbericht und Fußzeile: Der Abschnitt mit den Testimonials ist relativ einfach. Für das Tablet ist es gut so wie es ist. Trinke einfach das Leerzeichen zwischen der Überschrift und der Folie. Die Hälfte davon sollte gut sein. Die mobile Landschaft ist auch ziemlich gut. Jetzt müssen wir im Hochformat die Breite der Testimonialkarten ändern Natürlich können wir jeweils nur eine Karte hineinlegen. Die Breite wird durch das Folienelement festgelegt. Wenn wir diesen Wert von einem Pixelwert auf 100% ändern, ist er so breit wie der übergeordnete Container. Also im Grunde genommen von Kante zu Kante dehnen. Aber was nett wäre, wäre, dem Benutzer zu zeigen, dass es mehr Testimonials gibt, und es ist nicht nur ein einsames Testimonial, das hier steht Wenn wir also die Breite auf 90% ändern, dann sollte ein kleiner Teil der nächsten Karte auf dem sichtbaren Bildschirm erscheinen Das ist toll, aber der Inhalt ist etwas zu eng. Lassen Sie uns also etwas mehr Platz dafür schaffen, Lassen Sie uns also etwas mehr Platz dafür schaffen indem wir die Ränder und Abstände verkleinern Zunächst können wir den Rand auf der rechten Seite halbieren, sodass ab der nächsten Karte mehr von der Karte angezeigt wird, was bedeutet, dass wir die Breite der Folie um mehr als 90% bis vielleicht 95% erhöhen können der Folie um mehr als 90% bis Nun zur Polsterung Und das ist alles. Als nächstes die Fußzeile Die Fußzeile, wenn Sie sich erinnern, haben wir nicht von Grund auf neu erstellt Wir haben es aus unserem vorherigen Projekt kopiert. Das Beste an der Wiederverwendung Ihrer Komponenten in verschiedenen Projekten ist folgender Sie sind bereits optimiert. All diese responsiven Änderungen die wir am ersten Projekt vorgenommen haben, werden zusammen mit der Komponente übernommen, wenn Sie sie in ein anderes Projekt kopieren. Sie müssen es nicht noch einmal tun. So eine Zeitersparnis Wir müssen zwar ein paar Anpassungen vornehmen weil wir das Layout der Fußzeile geändert haben Wie bei diesem Abstandsproblem zum Beispiel wahrscheinlich in einem früheren Projekt hatten wir wahrscheinlich in einem früheren Projekt einen etwas anderen Plan dafür, aber hier, wenn Sie die Desktop-Version überprüfen, werden die Spalten gleichmäßig von Rand zu Rand verteilt Das ist auch ein ziemlich gutes Layout für das Tablet. Lassen Sie uns also den Stil so zurücksetzen dass er von der Desktop-Version In der mobilen Landschaft könnten wir die Rechtfertigung vielleicht wieder auf links ändern Die Säulen sind etwas zu verstreut. Wir können noch einen Schritt weiter gehen und versuchen, die Unternehmensspalte an die unten stehende Abonnement-Spalte anzupassen . Wir müssen nur die Breite der Logo-Spalte verkleinern. Und diese Ausrichtung lässt es schöner aussehen. im mobilen Portrait Lassen Sie uns im mobilen Portrait die Breite der ersten Spalte auf die Originalgröße zurücksetzen , da dort Platz ist und Slogan in zwei Zeilen besser aussieht Die Abonnentenspalte befindet sich jetzt unten in der Fußzeile Das ist nicht wirklich das beste Arrangement. Es wäre besser, wenn wir es nach oben bringen würden, weil sich niemand die Mühe machen wird, dafür ganz nach unten zu scrollen Nun, hier ist, wie großartig Flexbox ist. Flexhil hat seine eigenen Einstellungen. Es gibt einige Größeneinstellungen, mit denen jedes Kind die allgemeinen Flexbox-Größeneinstellungen überschreiben kann , und wir können auch Ausrichtung und Reihenfolge überschreiben Wenn wir also die Reihenfolge unserer letzten Spalte ändern, können wir sie tatsächlich zuerst erstellen Aber wir wollen es nicht genau zuerst haben. Wir würden es vorziehen, wenn es nach der Logo-Spalte käme. Aber keine Sorge, das können wir auch tun. Wir müssen der Logo-Spalte nur den gleichen Ordnungsstil geben , und sie wird wieder ganz oben angezeigt. Wenn Sie dies tun, stellen Sie sicher, dass Sie eine Kombinationsklasse angewendet haben. Andernfalls gilt diese Änderung für jeden einzelnen Fuß oder jede einzelne Spalte, und das führt nicht zu den erwarteten Ergebnissen. Ich habe nichts angewendet , da wir bereits Kombinationsklassen für diese erste und letzte Spalte hatten. In Ordnung, lassen Sie uns die Reaktionsfähigkeit überprüfen. Okay, wir haben dieses Überlaufproblem mit dem E-Mail-Feld. Die feste Breite von 267 Pixeln ist auf diesem winzigen Bildschirm zu viel Anstatt eine feste Breite zu verwenden, können wir die maximale Breite 267 ändern und den festen Wert auf 100% ändern, sodass sie sich dehnt, wenn Platz ist. Ein ausgezeichneter. Oh, sieht jetzt gut aus. Oh, das ist es. Die Homepage ist fertig und sie wird großartig aussehen, unabhängig vom Gerät oder der Bildschirmgröße. Im nächsten Abschnitt werden wir einen Blog erstellen , der von einem superleistungsstarken Web-Low-CMS erstellt wird, und wir werden alles darüber erfahren. Es wird Spaß machen. Bleib hier. 133. 126 CMS: Bisher haben wir eine statische Website im Gegensatz zu einer dynamischen Website erstellt. Das sagt dir wahrscheinlich nicht wirklich viel. Lass es mich erklären. Nehmen wir an, wir haben eine Artikelseite für unseren Blog. Wenn wir einen neuen Blogbeitrag benötigen, können wir diese Seite einfach duplizieren und den Inhalt ändern, kein Problem. Was ist nun, wenn wir irgendwann beschließen, einige Layoutänderungen an dieser Artikelseitenvorlage vorzunehmen ? Nun, kein Problem. Wir können diese Änderungen auf die zweite Artikelseite kopieren. Und wenn Sie 100 Artikelseiten haben, sind Sie bereit, Ihre Webdesign-Karriere aufzugeben. Das ist statischer Inhalt. Jede Seite ist unabhängig voneinander und der Inhalt dieses Blogposts existiert nur auf dieser bestimmten Seite. Geben Sie dynamischen Inhalt ein. Diesmal befinden sich die Inhalte nicht auf jeder Seite, sondern in der Datenbank, übersichtlich organisiert, quasi wie in einer Tabelle Und dann können wir an einer beliebigen Stelle auf der Website auf jedes dieser Datenbankelemente verweisen und abrufen, dass es auf der Seite angezeigt Diese Datenbank heißt CMS, kurz für Content Management System. Ich kenne einen sehr sexy Namen mit dynamischem Inhalt. Wir haben nur eine Artikelseitenvorlage, eine Masterseite. Auf dieser Masterseite können wir jedes Mal, wenn eine Artikelseite geladen wird, auf diese Datenbankelemente verweisen . Webflow ruft für jedes Element den entsprechenden Inhalt ab. Wenn wir nun Änderungen an dieser Masterseite vornehmen, werden sie sofort auf allen anderen Seiten übernommen, auch wenn wir 5.000 davon haben Das ist die Stärke von Webflow, CMS und dynamischen Inhalten In diesem Abschnitt werden wir alles darüber erfahren. Wie man CMS-Elemente erstellt, wie man Masterseiten erstellt, wie man auf das CMS verweist und so weiter. Bleib hier. 134. Blog und CMS: Webflow CMS: Bevor wir mit dem Entwerfen und Erstellen unserer Master-Blog-Beitragsseite beginnen , müssen wir zunächst eine Datenbank für unseren Blog erstellen Das passiert über Webflow CMS, das wir hier zugreifen können Es gibt einen Link zu Video-Tutorials von Webflow. Sie haben diesen Ort auf der Website namens Webflow University Dort gibt es großartige Inhalte, jeden Aspekt von Webflow abdecken Ich werde auf jeden Fall empfehlen , sich damit vertraut zu machen. Sie haben sowohl Videos als auch geschriebene Artikel. Das CMS oder die Inhaltsdatenbank unserer Website ist also in sogenannte Sammlungen unterteilt. Stellen Sie sich eine Sammlung als unabhängige Tabelle vor. Nehmen wir an, wir hätten eine sehr große Website wie EU Demi, hätten wir eine Tabelle für alle Kurse, eine Tabelle für alle Blogbeiträge, eine Tabelle für alle Hilfe- und Supportseiten und Lassen Sie uns unsere erste Sammlung erstellen und sehen, was passiert. In unserem Projekt benötigen wir eine Sammlung für Blogbeiträge. Dort werden wir unsere Blogbeiträge mit den Schlagzeilen, Bildern, Tags usw. aufbewahren unsere Blogbeiträge mit den Schlagzeilen, . Hier haben wir einige Optionen zum Benennen der Sammlung, einige Einstellungen und einen wichtigen Teil zum Erstellen von Feldern, die Teil dieser Sammlung sein werden Stellen Sie sich das auch hier als Tabelle vor. Wenn Sie eine neue erstellen, ist sie leer, Sie müssen also neue Spalten hinzufügen, oder? Und du benennst diese Spalten wie Überschrift, Body-Tags, Ral zum Bild usw. Das ist im Grunde das, was das ist, und jede Zeile ist Teil einer Gruppe, die einen bestimmten Blogbeitrag verfasst Webflow hat hier Sammlungsvorlagen. Es soll uns den Einstieg einige gängige Sammlungen erleichtern , die wir möglicherweise erstellen Es erübrigt sich zu erwähnen, dass der erste der Blogbeitrag ist, wahrscheinlich die häufigste Sammlung für alle Sobald Sie darauf klicken, erstellt Webflow eine neue Sammlung mit einigen benötigten Artikeln, um uns den Einstieg zu erleichtern Lassen Sie uns jeden einzelnen durchgehen und sie nach Bedarf für unseren Blog bearbeiten Zuerst haben wir den Namen der Sammlung. Was du nennst, ist keine große Sache. Das ist intern und für die Öffentlichkeit nicht sichtbar. Webflow hat es Blogbeitrag genannt, den wir behalten können. Als nächstes folgt die Sammlungs-URL. So wird die URL jedes Blockposts strukturiert, genau wie im Beispiel unten gezeigt. Es ist das Wort, das direkt nach der Domain steht. Hier verwende ich lieber das Wort Blog. Es ist viel spezifischer als das Wort Post. Es ist etwas üblicher, einen Blog als einen Beitrag zu verwenden. Und jetzt die wichtigen Dinge. Daraus besteht jeder unserer Blogbeiträge. Jedes Feld ist eine Art von Inhalt. Es gibt viele verschiedene Arten von Inhalten. Zum Beispiel gibt es Klartext, es gibt Rich-Text, darüber sollten Sie sich später Gedanken machen. Es gibt ein Bild, es gibt eine Farbe, es gibt einen Schalter, um etwas ein- oder auszuschalten. Schauen wir uns tatsächlich unseren Blogpost an und schauen, welche Art von Füllungen wir brauchen Also zuerst haben wir eine Überschrift, oder? Das in Webflow entspricht dem Namen des Blogposts. Nun, es ist nicht genau dasselbe, aber wir können daraus eine Überschrift machen und den Namen und die Überschrift identisch Hilfetext darunter ist für uns und für die Teammitglieder, die neue Blockbeiträge erstellen werden . Sie müssen hier nichts eintragen. Die Titelüberschrift sagt alles. Dann haben wir einen Autor und ein Datum. Wir werden uns später um den Autor kümmern. Für das Datum müssen wir eigentlich kein zusätzliches Feld hinzufügen. Jeder neue Blockbeitrag, den wir erstellen, wird mit einem Erstellungsdatum versehen. Aus diesem Grund ist es nicht in dieser Feldliste enthalten. Wenn wir zum nächsten übergehen, haben wir ein Hauptbild eines Blockpostens. Webflow hat ein solches Feld bereits aufgenommen. Wir können es nach der Überschrift nach oben verschieben , um der Reihenfolge zu folgen Die Reihenfolge spielt eigentlich keine Rolle. Es ist nur für uns. Als Nächstes haben wir in unserem Blog den Hauptteil des Beitrags. Grablo hat auch dafür ein Feld hinzugefügt. Dieses Feld enthält echte Zusatzoptionen, Mindest- und Höchstzahl an Zeichen Das ist der Fall , wenn wir den Inhalt unseres Blogs einschränken müssen den Inhalt unseres . Ich würde sagen, es ist nicht nötig. Und schließlich haben wir wieder einen Autor , der diesmal etwas mehr Informationen dazu hat. Wir werden uns später um den Autor kümmern. Wir werden eine separate Sammlung für Autoren erstellen. Die Zusammenfassung der Beiträge befindet sich nicht wirklich auf unserer Blog-Seite, aber wir werden sie auf unserer Blog-Homepage benötigen wo wir alle unsere Blogbeiträge in Karten anzeigen. Bei der Beitragszusammenfassung ist es eine gute Idee , die Anzahl der Zeichen zu begrenzen. Karten haben ein sehr strenges Layout, daher möchten wir nicht, dass eine Zusammenfassung viel zu lang ist. In unseren Designs haben wir eine Zusammenfassung verwendet , die maximal drei Zeilen umfasst. Das ist ungefähr 140 Zeichen lang. Was nun das Vorschaubild angeht, das ist etwas, das auf der Blockkarte Wir können das als eigenständiges Feld verwenden oder wir können einfach dasselbe Hauptbild wiederverwenden Wir werden es einfacher machen, neue Blogbeiträge zu erstellen und weniger Dinge hochzuladen. Funktion und Farbe, wir brauchen sie in diesem Fall nicht wirklich , also lasst uns sie loswerden. Und da hast du's. Wir haben vier Felder, aus denen sich jeder unserer Blockposts zusammensetzen wird. Auf der rechten Seite haben wir eine Editor-Vorschau, all diese vier Felder angezeigt , die wir in unserer Sammlung haben. Dieses Formular füllen wir jedes Mal aus , wenn wir einen neuen Blogbeitrag erstellen möchten. Okay, klicken Sie auf Sammlung erstellen, um diesen Schritt abzuschließen . Und das ist alles. Unsere Blog-Beitrags-Datenbank ist jetzt fertig. Um es noch einmal zusammenzufassen: Wir haben die Möglichkeit , unserer Website eine Datenbank hinzuzufügen Mit anderen Worten, ein CMS, ein Content-Management-System In dieser Datenbank können wir viele verschiedene Sammlungen erstellen. Sammlungen sind eine Art von Tabellenkalkulationen, die den gesamten Inhalt enthalten , der Teil davon ist Zum Beispiel ein Blogbeitrag. Das ist eine Sammlung und alle Blogposts werden in einer Tabelle zusammengefasst Jeder Blogbeitrag besteht aus bestimmten Inhalten wie Überschrift, Hauptbild und Hauptteil des Diese werden als Sammlungsfelder bezeichnet, und wir haben die volle Kontrolle darüber, was wir hinzufügen und was wir entfernen. Im nächsten Video werden wir unserem CMS neue Blockbeiträge hinzufügen . Tick dich um. 135. Blog und CMS: CMS-Elemente: Unsere Datenbank für Blockpost ist fertig. Jetzt können wir mit dem Erstellen und Hinzufügen neuer Blogposts beginnen. Um zur Block Post-Sammlung zurückzukehren, klicken Sie auf das CMS und dann auf Block Post Stellen Sie sicher, dass Sie nicht auf das Zahnradsymbol klicken Dadurch gelangen Sie zu dem Ort, an dem Sie die Einstellungen bearbeiten können. Dies ist ein Ort, um neue Blogposts hinzuzufügen, aber das kann auch vom Editor aus getan werden Über diese blaue Schaltfläche können wir neue Blockbeiträge hinzufügen. Webflow hat tatsächlich diese Option , um einige Dummy-Inhalte für uns zu generieren Gib ihm ein paar Sekunden und du wirst das bekommen. Wenn du auf eines davon klickst, öffnest du den Blogbeitrag. Hier können wir all die Felder sehen, die wir zuvor erstellt haben. Diesmal sind sie alle mit Dummy-Inhalten gefüllt , die Webflow für uns generiert Es gibt eine Überschrift und es gibt ein Hauptbild. Wir haben einen Hauptteil des Beitrags und die Zusammenfassung des Beitrags. All das kann bearbeitet werden, auch nachdem wir unseren Beitrag veröffentlicht und veröffentlicht haben. Lassen Sie uns einen neuen Blogpost von Grund auf neu erstellen damit wir verstehen, wie jedes dieser Felder funktioniert Wir können Inhalte aus unseren Designs verwenden. Lassen Sie uns also weitermachen und jedes dieser Felder ausfüllen. Wenn Sie die Überschrift eingeben, wird sie automatisch als URL verwendet. Wenn Sie etwas anderes für die URL haben möchten , kein Problem. Sie können diese URL hier bearbeiten. Ich lasse Überschriften und URLs immer gleich. So macht es einfach mehr Sinn. Dann haben wir das Hauptbild. Und ich werde dieses Bild gleich hier hochladen. Nun, The Post Body ist eine besondere Art von Film. Es heißt Rich-Text. Wir können Überschriften in den Text einfügen, Unterüberschriften, Bilder, Videos, Zitate, Aufzählungszeichen und dergleichen Wir haben verschiedene Arten von Schlagzeilen. Wir haben Bilder. Wir brauchen keine einzelnen Dateien für all das Zeug Eine Rich-Text-Datei kann sich so um den gesamten Inhalt kümmern Und in diesem Rich-Text-Feld haben wir viel Freiheit, Text auf unterschiedliche Weise zu gestalten oder YouTube-Videos direkt zwischen dem Text hinzuzufügen Diese Veranstaltung verfügt über einige Layoutsteuerungen, mit das Video an vielen verschiedenen Positionen angezeigt werden kann. Das Endergebnis wird zwar nicht wirklich so aussehen, das Endergebnis hängt davon ab, wie wir diesen Block gestalten, und dazu später mehr. Schließlich haben wir noch ein Feld für die Zusammenfassung des Beitrags, nämlich dieses. Klicken Sie auf Erstellen und es wird der Datenbank hinzugefügt. Der Status sieht vor, dass diese Nachricht zur Veröffentlichung bereitgestellt wurde. Das heißt, wenn wir das nächste Mal unsere Website veröffentlichen, all die Blogbeiträge, die noch ausstehen, online gestellt Aber in unserem Fall werden sie tatsächlich nirgendwohin gehen , weil wir nur eine Datenbank erstellt haben. Wir haben keine Blog-Seite erstellt , die diesen Inhalt aus der Datenbank abrufen wird. Das werden wir im nächsten Video machen. 136. Blog und CMS: Sammlungsseite: Also haben wir eine Datenbank für unseren Blog erstellt , und das ist alles cool. Aber wo auf unserer Website ist das sichtbar? Wo sind diese Blogbeiträge, abgesehen davon , dass sie irgendwo in Webflow versteckt Nun, momentan, nirgends, aber in kommenden Videos werden wir sie ans Licht bringen Sobald wir eine neue Sammlung im CMS erstellen, wird automatisch eine neue Seite im Seiten-Panel erstellt. Oben befinden sich statische Seiten. Dort befinden sich unsere Homepages und alle anderen Seiten, die wir erstellen und die nicht Teil des CMS Unten haben wir diese Seite namens CMS-Sammlungsseiten Dies sind Masterseiten, die mit dynamischen Inhalten aus der Datenbank gefüllt werden können . Im Moment haben wir eine Vorlage für einen Blogbeitrag auf einer Seite. Ich nenne es MasterPage, Webflow nennt es eine Vorlage. Ich bevorzuge es irgendwie, dass Master Page sinnvoller ist. Jede CMS-Sammlung erhält eine solche Seite. Im Moment ist sie komplett leer, genau wie jede andere neue Seite, die wir erstellen. Aber diese Seite wird aus unseren Designs zu unserer Blogpost-Seite werden. Es funktioniert genauso wie jede andere statische Seite mit nur einem Unterschied. Wir können Elemente an die Datenbankelemente binden. Lassen Sie mich das demonstrieren. Wir haben zum Beispiel eine Überschrift in unserem Blogbeitrag, oder? Lassen Sie uns eine Überschrift hinzufügen. Wenn wir selbst Text in diese Überschrift schreiben, dann wird dieser Inhalt statisch sein, genau wie jede andere Seite. Da es sich jedoch um eine CMS-Seite handelt, haben wir unter den Einstellungen dieser Überschrift eine zusätzliche Option , einen lila Punkt neben dem Textfeld. Wenn Sie darauf klicken, werden Sie etwas Bekanntes sehen. Einige Felder aus den Sammlungseinstellungen. Schlagzeile nach dem Sommer an einigen Tagen. Da es sich um eine Überschrift handelt, können wir die Überschrift auswählen. Voilà. Jetzt ist dieses Überschriftenelement nicht mehr statisch , sondern dynamisch und bezieht Inhalte aus der Datenbank Lassen Sie mich die anderen beiden Felder hinzufügen, das Bild und den Hauptteil des Beitrags. Genau wie bei der Überschrift müssen wir für das Bild ein Bildelement hinzufügen. Wir können ein Überschriftenelement nicht mit einem Bild oder einen DVBlog mit einer Überschrift füllen mit einem Bild oder einen DVBlog mit einer Die Feldtypen und Elementtypen müssen übereinstimmen. Nun, nicht genau übereinstimmen, aber kompatibel sein. Zum Beispiel ist das Überschriftenfeld in unserem CMS Klartext , der mit jeder Art von Textelement kompatibel ist, sei es Überschrift, Textblock oder Absatz. Okay, also das Gleiche, was wir mit dem Bild machen werden, klicken Sie auf Bildeinstellungen und dann auf den lila Punkt. Hier haben wir nur eine Option, Hauptbild, weil das das einzige Feld in unserer Datenbank ist , das mit dem Bildelement kompatibel ist , was Sinn macht. Sobald ich das Hauptbildfeld auswähle, wird der Inhalt gebunden und aus der Datenbank abgerufen. Lass mich das nur ein bisschen verkleinern. Lassen Sie uns das letzte CMS-Element hinzufügen, den Hauptteil des Beitrags. Dieses Feld in CMS ist ein Rich-Text-Feld. Bisher mussten wir noch nie Rich-Text-Elemente verwenden, und jetzt kann ich dieses Rich-Text-Element an das Post-Body-Feld in unserer Datenbank binden dieses Rich-Text-Element an . Und da hast du's. Es wird sofort mit dem Inhalt gefüllt , der sich im CMS befindet. Dieses Bild und der Text der Überschrift sind nun Teil desselben Blogposts. Welches hier gezeigt wird , ist eigentlich egal. Sobald wir diese Seite veröffentlicht haben, werden all diese Logposts online gehen und jeder von ihnen erhält seine eigene Überschrift, sein eigenes Bild und seinen eigenen Text der oberen Werkzeugleiste haben wir die Möglichkeit, In der oberen Werkzeugleiste haben wir die Möglichkeit, verschiedene Blogposts durchzugehen und zu sehen, wie sie aussehen Im Moment ist das alles ziemlich hässlich, aber wir werden unsere Seite wie gewohnt gestalten und erstellen Dynamischer Inhalt hat keinen Einfluss auf die Art und Weise, wie wir die Seite gestalten. Um es noch einmal zusammenzufassen: Für jede Sammlung , die wir in der CMS-Datenbank erstellen, erstellt Webflow automatisch eine Seite dafür Diese Seite ist im Gegensatz zu anderen Seiten eine dynamische Seite. Sie hat die Fähigkeit, sich mit Feldern in der Datenbank zu verbinden und Inhalte von dort abzurufen. Nur kompatible Dateien und Elemente können miteinander verknüpft werden, z. B. Bildfelder mit Bildelementen oder Klartextfelder mit beliebigen Textelementen Klartextfelder mit wie Überschrift, Textblog, Link usw. Im nächsten Video werden wir damit beginnen, diese Blogpost-Seite zu erstellen und 137. Blog und CMS: Navigationsleiste und Überschrift: A In diesem Video werden wir mit dem Aufbau unserer Blogpost-Seite beginnen Um auf diese Seite zuzugreifen, gehen Sie zum Seitenmenü . Unten befindet sich diese Seite mit einem lila Symbol. Das ist der eine. Ich habe diesen ganzen Inhalt bereits hier hinzugefügt, aber ich werde ihn komplett entfernen und von vorne anfangen. Basierend auf unseren Designs benötigen wir also als Erstes eine Navigationsleiste. Wir werden es natürlich nicht von Grund auf neu bauen. Wir werden es von unserer Homepage kopieren und von dort übernehmen. Wechseln Sie also zurück zur Startseite wählen Sie das gesamte Navbar-Element Stellen Sie sicher, dass Sie das Ganze und nicht nur den Container auswählen das Ganze und nicht nur den Container Klicken Sie auf Control C, kehren Sie dann zur Blockseite zurück und fügen Sie es dort Wenn Sie ein Objekt einfügen, klicken Sie zuerst auf die Leinwand oder Sie erhalten diese Fehlermeldung. Webflow muss wissen, wo genau Sie Ihr Element einfügen Da haben wir's. Nun, im Moment ist nichts sichtbar, weil unsere Navbar weiß ist Lassen Sie uns also einfach die Elemente in unserer Navbar genauso gestalten wie in unseren Designs Fangen wir mit den Links an. Im Moment sind sie weiß, also müssen sie dunkel Dazu müssen wir zuerst eine Kombiklasse anwenden und sie dann stylen. Andernfalls werden die beiden Originale auf der Homepage geändert . Und dann wende die Combo-Klasse auf die restlichen Links an. Gleiche gilt für die Nav-Schaltfläche, wir benötigen eine zusätzliche Kombinationsklasse. Der Hintergrund der Schaltfläche ist unser primäres Blau mit einer Opazität von 15% Schließlich das Logo, das wir aus FIGMA exportieren müssen. Es ist an den Rändern festgeklebt. Auf unserer Homepage befindet sich Navbar im Heldenbereich, der über eine Polsterung verfügt Deshalb ist es dort nicht an den Rändern verklebt. Aber hier ist es außerhalb dieses Abschnitts. Wir könnten es auch hier in den Abschnitt einfügen, aber eine bessere Option ist es, einfach eine Kombinationsklasse für die Nabbar zu erstellen eine Kombinationsklasse für die Nabbar und ihr direkt Padding hinzuzufügen Und das ist alles, die Navigationsleiste ist fertig. Wenn wir zum Rest der Blockseite übergehen, haben wir eine Überschrift, ein Bild und den Inhalt. Wie üblich beginnen wir mit einem Abschnitt und einem Container. Der Abschnitt ist grau. Das verwenden wir auf der Homepage. Aber für den Blockpost haben wir uns schlichtes Weiß entschieden. Die Sache mit Blockpost ist, dass Sie maximale Lesbarkeit wollen Es ist ein langer Inhalt, und wenn der Kontrast nicht ausreicht oder die Lesbarkeit aus einem anderen Grund ist, wird uns das wirklich schaden Einen weißen Bereich zu erstellen ist einfach, nur eine neue Kampfklasse und das ist alles Achte darauf, einen anderen Namen zu verwenden , am besten etwas, das für die Basisklasse spezifisch ist, wie z. B. einen weißen Abschnitt. Das sagt viel mehr aus als nur Weiß, und wir stellen sicher, dass es nicht Konflikten mit anderen Klassen kommt. Mir geht es gut. Lassen Sie uns jetzt eine Überschrift hinzufügen. Wir wissen bereits, was wir mit dieser Überschrift anfangen sollen, oder? Wir werden es an das CMS-Element binden. Hervorragend. Die Grenzen unseres Blockpostens in den Designs sind etwas anders. Wir verwenden ein schmaleres Layout mit einer maximalen Breite von 700 Pixeln. Und die maximale Breite unseres generischen Containers beträgt hier 1160 Pixel Das bedeutet, dass wir einen anderen Container für unseren Blogbeitrag erstellen müssen einen anderen Container für unseren Blogbeitrag Geben wir ihm also eine Kombinationsklasse oder duplizieren wir die Klasse vielleicht sogar und geben ihr eine maximale Breite von 700 Pixeln. In Ordnung, das sieht gut aus. Als Nächstes haben wir ein Autor - und Datumssegment, aber das werden wir im nächsten Video tun 138. Blog und CMS: Autorensperre: In diesem Video werden wir die Autoren- und Datumszeile unter der Überschrift erstellen . Ich denke, der einfachste Ansatz wäre, dafür eine Flexbox zu verwenden Fügen wir einen neuen MTD-Block hinzu und geben ihm einen Klassenautor und ein Dann fügen wir ein Bild hinzu. Als Nächstes benötigen wir einen Namen für den Autor. Fügen Sie einen regulären Textblog hinzu. Gib ihm eine neue Klasse. Style es genau wie Figma. I Wir müssen die Flexbox-Ausrichtungseigenschaft auf so etwas wie Center ändern auf so etwas wie Als Nächstes haben wir diesen Teiler. Wir könnten dafür eine Linienklammer verwenden oder einfach einen Diblock mit Breite und Hintergrundfarbe stylen mit Breite und Hintergrundfarbe Aber ich denke, Linienklammern sind einfacher. Ich denke, das machen wir sowieso in Side Fix M. Wir brauchen nur eine andere Farbe dafür. Und dann das Datum, lass uns einfach denselben Autoren-Textblog wiederverwenden und sogar dieselbe Klasse beibehalten Das Datum ist das Veröffentlichungsdatum dieses bestimmten Blogbeitrags Wir können dies bereits an das CMS binden. Wir mussten das Datumsfeld nicht erstellen , da jedes CMS-Element damit geliefert wird. Wir haben hier sogar drei verschiedene Datumsoptionen. In diesem Fall benötigen wir die Veröffentlichung am, aber wie Sie sehen können, verschwindet es. Das liegt daran, dass wir unsere Website oder einen der Blogbeiträge noch nicht veröffentlicht haben, sodass das Datumsfeld leer ist. Verwenden wir ein anderes Datumsfeld, das vielleicht am erstellt oder aktualisiert wurde, und später können wir es wieder auf „Veröffentlichen“ umstellen. Oder lassen Sie es so. Update ist auch ein ziemlich guter Datumsindikator. Bei Datumsangaben haben wir sogar die Möglichkeit, das Datumsformat zu ändern. Dies wird je nachdem, wo unsere Zielgruppe lebt, von Bedeutung sein. Und zum Schluss fügen wir dem Ganzen noch einen Rand hinzu, um es von der Überschrift zu trennen. Ordnung, das alles sieht toll aus. Also, hier ist die Sache. Dieser Autor, den wir gerade erstellt haben, das ist ein statischer Inhalt. Wenn wir unsere Blogbeiträge veröffentlichen, werden sie alle denselben Autor haben, aber das ist nicht richtig, oder? Für einen unabhängigen Blogger ist es natürlich immer derselbe Autor, aber auf einer Unternehmenswebsite wird es immer mehr als eine Person geben, wird es immer mehr als eine Person geben die Blogs für die Website erstellt. Diese Autoreninformationen müssen ebenfalls dynamisch sein, aber wir haben dafür keine CMS-Felder erstellt, sodass wir sie noch nicht an die Datenbank binden können. werden wir im nächsten Video machen. 139. Blog und CMS: Referenzfeld: Wie wir bereits besprochen haben, sind Autorenelemente derzeit statisch, dasselbe Autorenbild und denselben Namen für jeden einzelnen Blogbeitrag, auch wenn es 5.000 Blockbeiträge gab. Wir müssen Autoren in dynamische Inhalte umwandeln. Auf diese Weise haben wir mehrere Autoren und wählen für jeden Blockbeitrag einen aus. Es gibt zwei Möglichkeiten, wie wir Autoren in dynamischen Inhalt umwandeln können . Eine Möglichkeit besteht darin, einen Avatar und einen Autorennamen als Felder zu unserer bestehenden Sammlung von Blogbeiträgen hinzuzufügen Felder zu unserer bestehenden Sammlung von Blogbeiträgen , etwa so. Jedes Mal, wenn wir einen neuen Blogbeitrag erstellen, könnten wir dann das Bild, den Namen oder andere Informationen zum Autor hochladen . Dann würden wir diese Felder auf unserer Seite binden und fertig. Dies bedeutet jedoch, dass wir für neue Blogbeiträge Autoreninformationen eingeben, ein Bild hochladen und ihren Namen eingeben müssen. Wenn Sie ihre Biografie oder andere Informationen wünschen , dann all das auch und wiederholen Sie den gleichen Vorgang für den nächsten Beitrag, auch wenn der Autor derselbe ist. Zum Glück gibt es eine andere Option. Wir können eine separate Sammlung für Aors erstellen. Genau wie beim Blogbeitrag können wir eine CMS-Datenbank für ars erstellen, können wir eine CMS-Datenbank für ars erstellen in der wir alle Aors mit ihrem Profil, ihren Fotos, Namen, Biografien, Kontaktinformationen und anderen Informationen speichern Fotos, Namen, Biografien, Kontaktinformationen und anderen Und dann können wir all diese Informationen aus der Datenbank in unsere Blogbeiträge übernehmen Ordnung, also lasst uns eine neue Sammlung für die Autoren erstellen eine neue Sammlung für die Autoren Klicken Sie hier, um eine neue Sammlung zu erstellen. Webflow hat tatsächlich auch eine Vorlage für Autoren, aber wir werden die Vorlage dieses Mal nicht verwenden, und wir werden Felder von Grund auf neu hinzufügen damit Sie besser verstehen, wie das funktioniert Für den Anfang brauchen wir also einen Namen. Alles funktioniert hier, das ist intern. wird zwar automatisch mit demselben Namen vorausgefüllt Die URL wird zwar automatisch mit demselben Namen vorausgefüllt, aber wir können dies ändern Die URL ist öffentlich und es spielt keine Rolle, was wir dort eingeben. Ich verwende gerne eine Singularform für die URL, weil sie dann ungefähr so lauten würde wie Autoren John Smith, und das macht mehr Sinn als Autoren im Plural Was brauchen wir für die Felder? Offensichtlich der Name , der schon da ist. Dann haben wir einen Avatar oder mit anderen Worten, ein Profilfoto. Und auch am Ende unseres Blogposts das Autorensegment auch eine kleine Biographie Lassen Sie uns diese Felder hinzufügen. Wenn wir ein neues Feld hinzufügen, müssen wir auswählen, um welchen Feldtyp es sich handelt Das Feld und die Informationen werden davon beeinflusst. In diesem Fall werden wir ein Feld für den Avatar erstellen, also wird das natürlich ein Bildtyp sein. Wir können dieses Feld als Pflichtfeld angeben. Jedes Mal, wenn wir einen neuen Autor hinzufügen, stellen wir sicher, dass immer ein Profilfoto hochgeladen wird . Als Nächstes die Biografie des Autors, ziemlich einfach. Wieder ein einfacher Text. Wir haben eine Option für ein - oder mehrzeiliges Feld. Sie können sehen, wie sich das Feld im Vorschaumodus mit mehreren Zeilen ändert , und das hängt vom Unternehmen ab, aber wir könnten die maximale Zeichenanzahl für die Biografie festlegen. Das ist eine gute Idee. Auf diese Weise werden wir keinen Autor mit einer Biographie haben Autor mit einer Biographie , die zwei Seiten lang ist, und einer anderen, die aus einem Satz besteht. Und eine Sammlung erstellen. Das ist es. Wenn wir weitere Felder bearbeiten oder zu dieser Sammlung hinzufügen müssen , ist das kein Problem. Das können wir später immer noch machen. Lassen Sie uns abschließend Webflow dieser Sammlung einige Dummy-Artikel hinzufügen dieser Sammlung einige Dummy-Artikel hinzufügen Manchmal muss sie möglicherweise ein wenig aktualisiert werden, bis sie angezeigt wird. In Ordnung, unsere Sammlung ist fertig. Lassen Sie uns es mit unseren Elementen auf unserer Seite verbinden. Außer dass wir das jetzt tun können. Es gibt keine Option für Avatar und Autorennamen. Warum? Weil dies eine völlig unabhängige Sammlung ist, die noch nichts mit Blockbeiträgen zu tun hat. Wir müssen also eine Art Verbindung zwischen diesen beiden Sammlungen herstellen , und das geschieht über Referenzfelder. Es ist nur eine andere Art von Feld innerhalb der Sammlung. Gehen wir zurück zur Sammlung der Blogbeiträge. Klicken Sie auf das Einstellungssymbol und wir werden ein neues Feld hinzufügen. Und wählen Sie einen Referenztyp. Mit dieser Art von Element können wir nun Informationen aus einer anderen Datenbank abrufen, in unserem Fall aus der Autorensammlung. Und wählen Sie aus einem Drop-down-Menü eine passende Sammlung aus, nämlich Autoren Machen Sie es erforderlich und speichern und speichern Sie auch die Sammlung. Gehen wir nun zu einem der Blogbeiträge und Sie werden sehen, dass wir ein neues Feld haben , bei dem es sich um ein Autoren-Drop-down-Menü handelt Und dieses Dropdown untersucht die AORS-Datenbank und ruft Informationen aus dieser Datenbank ab Wir müssen also nicht jedes Mal Autoreninformationen hochladen , wenn wir einen neuen Blogbeitrag erstellen Lassen Sie uns alle Blogbeiträge durchgehen und für jeden einen Autor auswählen. Wenn wir jetzt zu unserer Masterseite für den Blogbeitrag zurückkehren, haben wir mehr Optionen in den Bindungseinstellungen. Es gibt einen ganz neuen Abschnitt mit Dateien aus der Autorensammlung Auch hier werden diese Felder nur für kompatible Elemente angezeigt nur für kompatible Elemente Avatar ist nicht hier, aber Avatar ist definitiv für das Bildelement verfügbar. Wählen Sie hier den Namen des Autors und den Avatar für das Bild aus. wir jetzt zwischen verschiedenen Blogbeiträgen wechseln, aktualisieren die Autoren sie entsprechend. Es gibt allerdings ein Problem mit dem Avatar, aber wir werden uns im nächsten Video darum kümmern . 140. Blog und CMS: Objektanpassung: Wir haben hier aufgehört, wo der Avatar nicht von seiner besten Seite aussieht. Das liegt daran, dass wir das Bild nicht so gestaltet haben, dass es gleich aussieht, egal welche Art von Foto wir hochladen Im Moment ändert es die Form basierend auf dem Bild selbst Das Bild, das wir zuvor von Figma hatten , war bereits oval und hatte die richtige Größe Deshalb war kein Styling erforderlich. Ohne das richtige Styling müssten wir dann bereits zugeschnittene und ovale Bilder hochladen Und das den Erstellern und Kunden von Inhalten zu überlassen , ist eine schlechte Idee Erstens fügt es zusätzliche Arbeit hinzu. Zweitens müssten wir ihnen beibringen, wie man eine ovale Ernte macht, was einfach viel Spielraum für Fehler lässt. Das Beste ist, unseren Bildplatzhalter so zu gestalten , dass er gut aussieht, unabhängig davon, in welches Bild eingefügt wird Lassen Sie uns ihn zunächst oval machen. Wir machen das, indem wir Ecken der Grenze abrunden. Dann muss es die gleiche Breite und Höhe haben. Wir können diesen Wert entweder in den Bildeinstellungen oder im Stilbedienfeld anwenden . Ordnung, die Form ist gut, aber wenn Sie feststellen, dass das Bild im Inneren gestreckt ist, und das ist bei allen Bildern der Fall , die nicht die gleichen Abmessungen haben. Das heißt, wenn die Breite und Höhe der Originalbilddatei nicht dieselbe Größe haben. Also, wie beheben wir das? CSS und Webflow haben dafür eine praktische Eigenschaft namens Object Fit In Webflow wird das Wort einfach so gekürzt , dass es passt. Alles, was wir hier tun müssen, ist, den Versicherungsschutz unter dieser passenden Immobilie zu beantragen Versicherungsschutz unter dieser passenden Immobilie Diese Einstellungen sind denen, die Sie in den Hintergrundstilen sehen, ziemlich ähnlich . Cover hier funktioniert genau so , wie es in Hintergrundbildern funktioniert. Das Bild deckt den gesamten Bereich dieses Elements ab und die überschüssige Menge wird einfach abgeschnitten Dies hat sogar dieselben Positionseinstellungen wie Hintergrundstile, falls Sie die Position ändern müssen Aber in unserem Fall brauchen wir es zentriert. Jetzt haben wir die beste Lösung, die mit allen Bildformen und -formen funktioniert. Den Erstellern von Inhalten steht es frei, alles hochzuladen, was sie wollen. Und das alles ist mit einem Header unseres Blogposts erledigt . Bleib für den Rest hier. 141. Blog und CMS: Hauptbild: In diesem Video werden wir das Hauptbild hinzufügen und es erneut mit einem CMS-Feld verknüpfen. Dieses Bild ist in unseren Designs zwar breiter, aber breiter als der Container für den Inhalt. Es ist 900 Pixel statt 700. Das bedeutet, dass wir dieses Bild nicht in denselben Container wie eine Überschrift legen können. Wir brauchen dafür einen anderen Container. Also werden wir einen neuen Container hinzufügen, ihm eine neue Klasse geben und das Bild dorthin verschieben. Ich weiß, das ist ungefähr richtig. In unseren Designs hat das Bild eine bestimmte Höhe, wodurch es ansprechender aussieht. Und im Moment wächst und schrumpft es einfach , basierend auf dem Originalbild Dadurch entsteht ein Layout, das nicht einheitlich ist und in einigen Fällen sehr seltsam aussieht Wenn wir zum Beispiel ein großes vertikales Bild hochladen, füllt das zu viel von der Seite aus, wenn der Text nach unten gedrückt wird . Das ist wieder das gleiche Problem, mit dem wir beim Autoren-Avatar konfrontiert waren. Genau wie beim letzten Mal können wir dieses Problem mithilfe der Object-Fit-Eigenschaft lösen. Zunächst müssen wir diesem Bild die gewünschte Breite und Höhe geben . Bei der Höhe sind es 450 Pixel. A, aber was machen wir für die Breite? Wir können ihr nicht 900 Pixel geben , weil es nicht immer 900 sind. Wenn der Bildschirm schrumpft, müssen wir ihn verkleinern. Technisch gesehen können wir das tun, weil das Bild bereits eine Standardeinstellung von 100% maximaler Breite hat , sodass es immer noch verkleinert wird Aber ich bevorzuge es, einen relativen Wert zu verwenden und ihm eine Breite von 100% zuzuweisen Dadurch wird das Bild so breit wie das übergeordnete Bild, das in diesem Fall unser modifizierter Blockcontainer ist. Wie bei Avataren erhalten wir dieses verformte Bild, weil wir Seitenverhältnis des Originalbilds ändern. Das können wir leicht korrigieren , indem wir es an das Titelbild anpassen Perfekt. Das ist jetzt einheitlich für jeden Typ, unabhängig von der Form oder Form des Bildes oder der Größe, und es wird dieselbe Position und dieselben Abmessungen und es wird einfach großartig aussehen. Zum Schluss fügen Sie dem Bild einfach einen oberen Rand hinzu, der dem Design entspricht. Das ist es. Als Nächstes werden wir an der Leiche arbeiten. Bleib hier. 142. Blog und CMS: Rich-Text: Als Nächstes müssen wir den Hauptteil des Beitrags hinzufügen. Das Hinzufügen ist relativ einfach. Wir müssen nur ein Rich-Text-Element ziehen. Warum Rich-Text? Weil das der Feldtyp in CMS ist. Wir müssen das in einem anderen Container hinzufügen. Der Bildcontainer ist breiter als der Rest, also benötigen wir denselben Container, den wir oben für den Header erstellt haben , und fügen darin Rich-Text ein. Ordnung, das ist besser. Und lassen Sie uns einen unteren Rand dem Bildelement einen unteren Rand hinzufügen, um eine Trennung zu erzeugen. Binden Sie das CMS-Feld wie mit allem anderen. Nun, hier ist ein lustiger Teil. Wir müssen einige Stiländerungen an unserem Rich-Text-Element vornehmen. Passen Sie beispielsweise die Textfarbe an die Farbe an, die wir in Designs haben. Wir haben uns für eine dunklere Farbe im Design entschieden und benötigen außerdem einen gewissen Abstand zwischen verschiedenen Absätzen und verschiedenen Textilien. Fangen wir mit der Farbe an. Der naheliegende Weg wäre, ihm eine Klasse zu geben und die Schriftfarbe zu ändern. Dadurch wird ein Teil des Textes formatiert, aber nicht der gesamte Text, insbesondere nicht der Haupttext, der Absatz. Der Absatz hat seinen eigenen Stil, und er wird durch das HTML-Tag des Absatzes überschrieben, etwas, das wir schon früh auf unserer Homepage gestaltet haben Da Rich-Text nur ein übergeordnetes Element ist, kann ein Absatz , der ein untergeordnetes Element ist, alle Stile aus dem Rich-Text überschreiben Das bedeutet, dass wir den Absatz direkt formatieren müssen, aber im Moment haben wir keinen Zugriff darauf Sobald es mit dem CMS verbunden ist, können wir einzelne Elemente darin auswählen. Wir können es von hier aus vom CMS trennen, aber dadurch werden dann alle Dummy-Inhalte gelöscht , die darin enthalten waren Also werden wir diesen Link einfach in Verbindung halten und einen weiteren statischen Rich-Text hinzufügen , damit wir ihn nach Belieben gestalten können Das Erste, was wir tun müssen, wenn wir einen Rich-Text formatieren, ist, dass wir eine Klasse darauf anwenden müssen. Das ist wichtig und Sie werden gleich sehen, warum. Fangen wir mit einem Absatz an. Wenn wir einen Absatz so gestalten, wie wir es normalerweise tun, werden Sie feststellen, dass dadurch nur die rote Farbe auf diesen bestimmten Absatz angewendet wird. Und kein anderer Absatz in diesem Brücken-Textblock. Damit wir alle Absätze innerhalb des Ridge-Textblocks formatieren können, müssen wir so vorgehen, wie wir es normalerweise tun, wenn wir alle Absätze auf der Seite mithilfe von Text formatieren müssen . Klicken Sie auf eine Stelle außerhalb des Felds, damit Sie einzelne Elemente erneut auswählen können. Wählen Sie dann einen der Absätze aus, entfernen Sie alle Klassen, falls vorhanden, und wählen Sie im Selektor alle markierten Absätze Unter dem Selektor erhalten Sie diese kleine Nachricht mit einem Plus-Symbol, Netzselektor darin und dem Namen Ihrer Rich-Text-Klasse, wie auch immer Sie sie Wenn Sie diese Meldung nicht erhalten, bedeutet das, dass Sie keine Klasse auf den Rich-Text-Block selbst angewendet haben auf den Rich-Text-Block selbst angewendet Ohne den Kurs im übergeordneten Rich-Text-Blog erhalten Sie stattdessen diese Nachricht. Stellen Sie also sicher, dass Sie zuerst die Rich-Text-Summenklasse angeben. Jede eindeutige Klasse spielt keine Rolle, wie Sie sie nennen. Sobald die Klasse vorhanden ist, haben Sie durch Auswahl eines Tags die Möglichkeit , das Tag innerhalb Ihrer Rich-Text-Klasse zu verschachteln. Dies gilt nicht nur für Absätze, sondern für alle Arten von Elementen innerhalb des Rich-Text-Bits, für Überschriften, Zitate, Listeneinträge usw. Sie können sich an dieser Stelle eine Notiz zu diesem Video machen , wenn Sie später darauf zurückkommen möchten Also hier sind die Schritte. Stellen Sie zunächst sicher, dass der Rich-Text eine Klasse hat. Zweitens wählen Sie einen Absatz in Ihrem Rich-Text aus. Sie können einen Absatz auswählen während Sie sich in dem Feld wie folgt befinden. Klicken Sie aus dem Rich-Text heraus und wählen Sie dann einen Absatz wie diesen aus, oder wählen Sie ihn einfach im Navigator aus . Jeder Absatz reicht aus. drittens in der Auswahl das Wählen Sie drittens in der Auswahl das rosafarbene Tag „ Alle Absätze Wenn Sie dieses Feld nicht auswählen, werden Sie nur einen einzelnen Absatz löschen Klicken Sie abschließend auf dieses Plussymbol, um dieses Tag innerhalb der übergeordneten Rich-Text-Klasse zu verschachteln . So sollte es aussehen. Mit einem Pfeil, der anzeigt, dass Sie, wenn Sie innerhalb von oder in Ihrem Klassennamen verschachtelt sind, ohne Verschachtelung, anstelle aller Absätze innerhalb des Rich-Texts, anstelle aller Absätze innerhalb des Rich-Texts, alle Absätze an der Seite formatieren. Das ist nicht das, was wir wollen Dieser Schritt ist leicht zu vergessen. Es passiert mir bis heute. Und jetzt kannst du dich stylen. Jetzt kann jeder einzelne Absatztyp auf einmal gestaltet werden. Sogar andere Textarten erben den Absatzstil sofern Sie ihnen keinen spezifischeren Stil zugewiesen haben Ich weiß, dass Rich-Text etwas verwirrend ist, aber nach ein paar Malen werden Sie den Dreh raus Wenn Sie die Klasse aus dem Rich-Text entfernen, können Sie feststellen, dass alle neuen Stile verschwinden. Im Grunde funktioniert das also genauso wie ein reguläres Klassenstyling, aber mit einer zusätzlichen detaillierten Steuerung für einzelne Inhaltstypen darin Die restliche rote Farbe für andere Texte stammt von der Hauptklasse im Rich-Text, sodass wir sie dort bearbeiten können Sie können jetzt sehen, dass all diese Änderungen auch auf unseren dynamischen Rich-Text angewendet werden , da er dieselbe Klasse enthält. Wenn es nicht dieselbe Klasse hätte, würde es davon unberührt bleiben Falls Ihr verbundener Rich-Text also nicht mit den neuen Stilen aktualisiert wird, überprüfen Sie, ob möglicherweise keine Klasse vorhanden ist oder dass eine andere Klasse darauf angewendet wurde Es gibt mehr Arten von Textinhalten , die wir formatieren müssen. Um sie zu stylen, müssen wir den gleichen Vorgang wiederholen. Dies ist beispielsweise ein Text vom Typ Zitat. Es ist ein nettes Element innerhalb von Blöcken, wenn Sie jemanden zitieren möchten. So können wir sie unterschiedlich formatieren, kursiv machen, was sich besser für Zitate eignet. Größere Zeilenhöhe, etwas mehr Platz in der Umgebung. Wir können nicht einmal die Grenze stylen. Wir können auch Bilder stylen. Zum Beispiel ist der Abstand zwischen Bildern etwas zu eng. Behalte nur eines im Hinterkopf. Das Bild befindet sich in einem anderen Ding namens Figur. Da ist es besser, Abstand hinzuzufügen. Es enthält auch eine Bildunterschrift. Wir können auch Aufzählungspunkte gestalten. Sie sind momentan wirklich klein. Ich werde die gleiche Größe wie den Absatztext beibehalten. A Wir müssen H mit drei Überschriften gestalten, weil sie momentan weiß sind Ich glaube, wir haben sie irgendwo auf der Homepage weiß gestaltet irgendwo auf der Homepage weiß In Ordnung, wir müssen nicht alles ändern. Mal sehen, wie der echte Inhalt aussieht. Fügen Sie vielleicht etwas mehr Abstand für die beiden Überschriften hinzu. Hast du gesehen, was ich hier gemacht habe? Ich habe einen Fehler gemacht und vergessen, das Tag in der Rich-Text-Klasse zu verschachteln . Als ich die Formatänderungen vorgenommen habe, habe ich tatsächlich alle H-Überschriften auf der anderen Seite formatiert . Das ist nicht das, was ich will Also werde ich den Stil zurücksetzen, das Tag verschachteln, indem ich auf dieses Plus-Symbol klicke, und dann von Grund auf neu gestalten. Den statischen Rich-Text loswerden und fertig. Wenn Sie zurückkommen und den Stil ändern müssen, fügen Sie einfach einen neuen Rich-Text hinzu und wenden Sie Ihre Klasse darauf an. Das ist also Rich-Text. Am Anfang vielleicht etwas schwierig zu verstehen, aber mit ein bisschen Übung werden Sie den Dreh raus bekommen. Im Gegensatz zu normalen Absätzen, Überschriften oder Lehrbüchern kann Rich-Text viele Arten von Inhalten enthalten Natürlich können wir all die verschiedenen Überschriften, die wir haben, darin platzieren Wir können Bilder einfügen, wir haben Videos. Wir können zitieren, wir können Aufzählungspunkte und Zahlen und all das Zeug setzen . Und in Webflow gibt es für die Gestaltung von Rich-Text-Elementen ihre eigenen spezifischen Anweisungen, die wir gerade durchgegangen sind Im Grunde genommen besteht der erste Schritt darin , dass Sie dem Rich-Text eine Klasse geben müssen Es hat also eine sehr spezifische Klasse, oder? Sie müssen diesen speziellen Rich-Text zuerst stylen, oder? Sie können also nicht grundsätzlich sagen, dass jeder einzelne Rich-Text auf dieser Seite in Absatz innerhalb all dieser Rich-Text-Füllblöcke diesen spezifischen Stil haben wird. Stattdessen sagen Sie, dass ein Rich-Text, der diesen speziellen Stil hat, sagen wir, super netter Rich-Text ist. Die Absätze in diesen Klassen werden immer so aussehen. Das machst du in der Realität. Und im zweiten Schritt wählen Sie das entsprechende Tag aus. Wenn Sie also beispielsweise einen Absatz formatieren möchten, Absatz formatieren möchten, wählen Sie alle Absätze aus, oder? Und dann wählen Sie in Schritt drei diese Verschachtelungsoption Im Grunde sagen Sie, dass ich nicht alle Absätze auf der Website gestalte Ich gestalte Absätze, die in dieser Klasse verschachtelt sind, oder? Du sagst, okay, das ist der Kurs. Und wenn ich diese Klasse auf einen Rich-Text anwende, jedes Mal, wenn das passiert, werden jedes Mal, wenn das passiert, alle Absätze darin so aussehen. Das sind also die Rich-Text-Felder, wie man sie formatiert und wie man mit ihnen arbeitet. Das Beispiel, das ich gegeben habe, war im CMS und im Blogbeitrag. Normalerweise ist dies ein Ort, an dem wir Rich-Text in einem Blog oder Artikel verwenden. Die meiste Zeit verwenden wir es also innerhalb des CMS. bedeutet jedoch nicht, dass wir es nicht auf anderen regulären statischen Seiten verwenden können. Das gesamte Styling, alles funktioniert genauso, und Sie können das zu einer normalen Seite hinzufügen und sie mit genau derselben Anweisung gestalten. Die Anweisungen zum Stylen von Rich-Text haben also nichts mit einem CMS zu tun. So funktioniert Rich Text einfach. 143. Blog und CMS: Autorenblock unten: Und da weitermachen, wo wir aufgehört haben, müssen wir jetzt den unteren Autorenblock hinzufügen. Das ist ziemlich einfach. Beginnen wir mit dem neuen DV-Block , den wir in eine Flexbox umwandeln und oben etwas Abstand hinzufügen Nun zum Profilbild des Autors. Kopieren wir einfach das Bild von oben, Kopieren wir einfach das Bild von damit wir weniger Änderungen vornehmen müssen Jetzt benötigen wir einige Textblöcke, aber wir werden sie in einen anderen Tagesblock einfügen sodass sie auf der rechten Seite des Fotos übersichtlich gruppiert sind auf der rechten Seite des Fotos Verbinde den Text mit CMS. Und dann stylen Sie einfach jeden einzeln. Und wir werden alle Stile so zusammenbringen , wie wir es in den Designs haben. Und da hast du alles schön und stilvoll. Wir können überprüfen, wie es für verschiedene Blockbeiträge aussieht , indem den Blockbeitrag oben ändern. Und das war's für diesen Blog. 144. Webflow-Komponenten: In diesem Video werden wir der Seite eine Fußzeile hinzufügen. Nichts ist einfacher als das. Wir können die Fußzeile von der Homepage kopieren und hier einfügen Es ist fertig, es gibt nichts zu ändern und es reagiert bereits Aber es gibt noch einen besseren Weg, dies zu tun. Stellen Sie sich nun vor, wir haben eine Website mit vielen Seiten, insbesondere vielen statischen Seiten. Auf jeder dieser Seiten haben wir normalerweise dieselbe Navigationsleiste und dieselbe Fußzeile, oder Und manchmal haben wir einige Abschnitte, wie zum Beispiel einen Abschnitt mit dem Aufruf zum Handeln, der sich vielleicht auch wiederholt Wir werden also, sagen wir, 20 oder zehn Seiten auf all diesen Seiten haben , wobei dieselbe Komponente wie die Fußzeile immer wieder wiederholt Nun, wenn wir das bearbeiten wollen, richtig? Wir wollen die Fußzeile bearbeiten, wir müssten eine der Fußzeilen bearbeiten, richtig, dann diese Fußzeile nehmen, sie kopieren und dann auf jeder anderen Seite ersetzen Wenn es um Stile geht, können wir uns ganz einfach darum kümmern, oder? Wir haben bereits gelernt, dass wir CSS-Stile haben, wir haben HTML-Tags. Wir können einfach an einer Stelle eine Instanz ändern, und auf der gesamten Seite wird alles aktualisiert. Aber wie steht es mit Inhalten? Wie wäre es mit dem gesamten Skelett und der Struktur der Fußzeile? Nehmen wir an, wir entscheiden, dass eine Spalte gelöscht werden muss, oder wir müssen den Text einer vielleicht nur kleinen Überschrift ersetzen einer vielleicht nur kleinen Überschrift , die repariert und etwas ändert In Figma haben wir etwas, das dieses Problem löst, die Komponenten Wir können eine Komponente erstellen, und dann kann jede andere Instanz dieser Komponente überall aktualisiert werden, richtig, bis sie offensichtlich überschrieben Wir haben auch etwas Ähnliches in Webflow. Neben der Registerkarte Elemente befindet sich eine Registerkarte für Komponenten Webflow-Komponenten funktionieren wie Komponenten in FigMA. Erinnerst du dich an Wie jede Änderung an der Master-Komponente, auch am Inhalt, jede andere Instanz dieser Komponente aktualisiert. Komponenten in Webflow funktionieren auf ähnliche Weise. Wir können aus allem eine Komponente erstellen und sie dann auf der gesamten Website wiederverwenden Wir werden eine Komponente aus der Fußzeile erstellen. Ich werde diese löschen und eine Komponente aus der Komponente auf der Homepage erstellen eine Komponente aus der Komponente auf der Homepage Um eine Komponente zu erstellen, klicken Sie einfach mit der rechten Maustaste auf das Element. In diesem Fall der gesamte Abschnitt, der die gesamte Fußzeile enthält, und klicken Sie auf Komponente erstellen Geben Sie ihm einen Namen und erstellen Sie. Es wird grün werden. Das heißt, es ist jetzt eine Komponente. Sie werden auch im Navigator einen anderen Indikator mit dem Namen dieser Komponente sehen. Gehen wir jetzt zurück zum Blockpost. Wenn Sie zum Bedienfeld „Komponenten“ gehen, werden Sie sehen, dass sich dort eine Fußzeilenkomponente befindet Sie können diese Komponente auf der Seite oder im Navigator verfolgen . Achten Sie darauf, sie im Hauptteil abzulegen Und da ist die gesamte Fußzeile hier. Wir haben zwei Möglichkeiten, Änderungen an Komponenten vorzunehmen. Erstens können wir die Master-Komponente bearbeiten. Das bedeutet, dass jede Änderung auf alle Instanzen dieser Komponente auf der gesamten Site angewendet wird . Lassen Sie mich eine weitere Instanz hierher ziehen damit wir die Änderungen in Echtzeit sehen können. Um die ausgewählte Master-Komponente zu bearbeiten , klicken Sie auf Komponente bearbeiten. Sie können auch mit der rechten Maustaste klicken und dasselbe tun. Alle Änderungen, die Sie hier vornehmen, werden überall angewendet. Es spielt keine Rolle, auf welcher Seite Sie die Komponente bearbeiten. Wenn Sie auf Komponente bearbeiten klicken, wirkt sich das immer auf die Master-Komponente aus. Sie können Elemente verschieben und darauf achten , was mit der obigen Datei passiert , da Sie sehen können, dass die Änderungen auch dort vorgenommen wurden, oder Sie können den Text ändern. Alle Änderungen wurden auch in anderen Instanzen aktualisiert . Es spielt keine Rolle, auf welcher Seite Sie die Komponente bearbeiten. Wenn Sie auf Komponente bearbeiten klicken, wirkt sich das immer auf den Master aus. Um den Bearbeitungsmodus zu verlassen, klicken Sie oben auf Zurück. Oder klicken Sie auf eine andere Stelle auf der Leinwand oder drücken Sie die Esc-Taste. Sehen wir uns jetzt die Homepage an. Da. Die Änderung wurde sofort auch in dieser Instanz widergespiegelt. Um es erneut zu bearbeiten, wiederholen Sie einfach den Vorgang. Nehmen wir nun an, wir möchten auf bestimmten Seiten unterschiedliche Inhalte, aber wir möchten nicht die Hauptkomponente ändern, nur unterschiedliche Inhalte auf der Blockseite. Wir können solche Änderungen mithilfe der Komponenteneigenschaften vornehmen. Rufen Sie den Bearbeitungsmodus der Komponente auf und wählen Sie dann das Element aus, das Sie wie folgt bearbeiten möchten . Und klicken Sie im Einstellungsfenster neben dem Text auf dieses kleine Symbol und erstellen Sie eine Eigenschaft. I Jetzt können wir den Standardtext dieser Überschrift überschreiben Um den Text zu überschreiben, müssen Sie zunächst den Bearbeitungsmodus für Komponenten verlassen Denken Sie daran, dass Sie immer, wenn Sie sich im Bearbeitungsmodus befinden, die Master-Komponente bearbeiten. Wenn Sie auf Zurück zur Instanz klicken und normalerweise die Komponente auswählen, arbeiten Sie mit der Instanz. Ist es verwirrend? Ja, aber nach etwas Übung werden Sie es verstehen. Wie Sie sehen, ist das Textelement jetzt auswählbar. Und wenn wir darauf doppelklicken, können wir den Text bearbeiten Stellen Sie sicher, dass Sie auf diese Überschrift des Textelements doppelklicken und nicht versehentlich auf die Komponente selbst doppelklicken, da Sie dann in den Bearbeitungsmodus wechseln Doppelklicken Sie also auf dieses Element. Jetzt können wir den Standardtext umschreiben und überschreiben. Die Master-Komponente wird dadurch nicht berührt . Es wird nur diese bestimmte Instanz ändern. Sie können den gleichen Vorgang für jeden anderen Text wiederholen. Komponente und Kopfeigenschaft bearbeiten. Kehren Sie zur Instanz zurück und beginnen Sie mit der Eingabe. Oder vielleicht möchten Sie dieses E-Mail-Formular auf bestimmten Seiten verstecken . Das Drücken der Löschtaste wird nicht funktionieren. Sie müssen lediglich das Element auswählen, in diesem Fall die gesamte Fußzeilenspalte, und dann zu den Einstellungen dieses Elements wechseln Hier sehen Sie eine Option für die Sichtbarkeit. Klicken Sie auf Erstellen. Dadurch wird eine Option geöffnet, mit der Sie dieses Element in dieser bestimmten Instanz ein- oder ausblenden können. Wenn wir „Versteckt“ auswählen, werden Sie sehen, dass es aus dieser Instanz verschwunden ist, aber auf der anderen Instanz immer noch da ist. Diese werden als Komponenteneigenschaften bezeichnet. Je nachdem, welches Element Sie auswählen, stehen Ihnen unterschiedliche Optionen zur Verfügung. Nehmen wir jedoch an, dass diese Elemente zur ursprünglichen Form zurückkehren und wieder Werte aus der Masterkomponente abrufen sollen ursprünglichen Form zurückkehren und wieder . Wir können dies tun, indem wir diese Eigenschaften von diesem Panel aus zurücksetzen diese Eigenschaften von diesem Panel aus Wenn Sie eine Komponenteninstanz ausgewählt haben und sich nicht im Bearbeitungsmodus befinden, werden in diesem Bereich alle Eigenschaften angezeigt , die Teil dieser Komponente sind, und Eigenschaften, die wir verwenden und überschreiben, werden blau angezeigt, ähnlich wie im Sternenfenster Klicken Sie auf den blauen Text und Sie erhalten eine Option, mit der Sie ihn auf den Standard-Eigenschaftswert zurücksetzen Und wenn Sie die Sichtbarkeit des E-Mail-Formulars zurücksetzen , wird diese versteckte Spalte wieder angezeigt Eine Sache, die Sie im Einstellungsbereich feststellen werden, ist, dass all die Eigenschaften, die wir erstellt haben, immer noch vorhanden sind Und wenn Sie versuchen, Text auf Ihrer Master-Komponente zu bearbeiten, werden Sie feststellen, dass dies nicht möglich ist. liegt daran, dass die Eigenschaften, die wir erstellt haben, immer noch existieren und immer noch miteinander verbunden sind. Solange die Eigenschaft vorhanden ist, erfolgt die Bearbeitung der Eigenschaft die Eigenschafteneinstellungen an derselben Stelle, an der Sie die Eigenschaft erstellt haben. Wenn Sie also den Inhalt der Standardeigenschaft ändern müssen , können Sie dies hier tun. Sie entfernen diese Eigenschaften im Bearbeitungsmodus, gehen zu den Einstellungen der Eigenschaft und klicken Sie auf Trennen. Jetzt haben wir keine Eigenschaften mehr und alle Instanzen können nicht mehr bearbeitet werden und sind identisch mit der Master-Komponente Manchmal möchten wir große Änderungen an einer der Instanzen vornehmen , z. B. die Reihenfolge der Spalten ändern In diesem Fall müssen wir die Verbindung zwischen der Instanz und der Komponente vollständig Verbindung zwischen der Instanz und der Komponente Dies kann getan werden, indem Sie mit der rechten Maustaste auf die Instanz klicken und dann die Verknüpfung mit der Instanz aufheben Dies ist jetzt völlig unabhängig von der Komponente. Um es noch einmal zusammenzufassen: Komponenten sind wiederverwendbar und miteinander verbunden , was sich hervorragend für wiederholte Abschnitte und Blöcke wie Navigationsleisten und Fußzeilen Sie können aus allem eine Komponente erstellen. Sie haben die Möglichkeit, bestimmte Änderungen vorzunehmen, z. B. den Text zu aktualisieren oder bestimmte Elemente auszublenden. Und für unsere Seite ist es fast fertig. Wir müssen nur die responsiven Versionen optimieren, aber diesmal ist es ganz einfach. Das meiste davon ist fertig. Bleib hier. 145. Blog und CMS: Responsive Beitrag: Und wir sind zurück für ein responsives Design. Es muss nur sehr wenig getan werden, sodass wir uns in einem Video darum kümmern können. Die Navigationsleiste muss für den Querformatmodus etwas bearbeitet werden. Lassen Sie uns zunächst die Ränder korrigieren. Unser Standardbereich hat einen Seitenabstand von 30 Pixeln, aber die Navigationsleiste hat in diesem Fall einen Abstand von 60 Pixeln Das liegt daran, dass sich die Navigationsleiste ein wenig von unserer Homepage unterscheidet Also reduziere einfach die Polsterung auf 30 Pixel und schon bist du fertig. Das Menüsymbol benötigt eine andere Farbe. Es ist weiß, also können wir es im Moment nicht sehen. Bevor wir die Farbe ändern, müssen wir sicherstellen, dass wir eine Kombinationsklasse auf die Menüschaltfläche anwenden , sonst wirkt sich dies auf die Schaltfläche auf der Startseite aus. Das sieht gut aus. Schauen wir uns den Vorschaumodus an. Hier haben wir also einen kleinen Konflikt zwischen den Hintergrund- und Linkfarben und der Farbe der Menüschaltflächen. Die Links sind hier. Die sind nicht verschwunden. Sie sind nur aus dem gleichen Grund dunkel gefärbt wie die Menütaste. Wir haben sie gerade zuvor geändert, als wir unsere Navigationsleiste entworfen haben. Und da sie dunkel bleiben müssen, können wir in diesem Fall nur den Hintergrund dieses Drop-down-Menüs ändern. Es ist also in Ordnung, es in ein sehr helles Grau zu ändern . In Ordnung, NABA sieht auf allen Bildschirmen gut aus. Lassen Sie uns nun den Header mit dem Hauptbild überprüfen. Das Tablet ist ganz in Ordnung. Der Querformatmodus sieht auf den ersten Blick gut aus, aber denken Sie noch einmal darüber nach, er wird eng sein. Das Bild, das so groß ist , wird also zu viel sichtbaren Bildschirm einnehmen. Dieses Bild funktioniert am besten, wenn es auch im Querformat ist, vor allem, weil die Ersteller von Inhalten genau das hochladen. Höhe von etwa 250 Pixeln sollte es auf die richtigen Abmessungen bringen. In ähnlicher Weise müssen wir ihn für den Porträtmodus etwas weiter verkleinern 150 Pixel sehen gut aus. Ich werde auch den Abstand um das Bild herum verkleinern, sowohl im Querformat als auch im Hochformat Wir können mit dem Hauptbild etwas Lustiges machen. Auf dem Desktop haben wir dieses ungewöhnliche Layout, bei dem das Hauptbild aus dem Hauptcontainer herausragt, aber auf kleineren Bildschirmen passiert das nicht, weil die Abschnittsauffüllung alles an einen Ort verschiebt Aber es gibt einen Weg, das zu umgehen. Wenn wir dem Hauptbild einen gewissen negativen Rand geben, wird die Polsterung im Abschnitt aufgehoben Der Tablet-Bereich hat also einen Abstand von 60 Pixeln. Wir können dem Bild also einen negativen Rand von 60 Pixeln geben Dadurch wird der Abstand aufgehoben und es wird von Rand zu Rand verschoben, sodass es interessanter aussieht Aber anstatt den negativen Rand direkt auf das Hauptbild anzuwenden , werden wir das Bild in einen Div-Block einwickeln und negative Ränder darauf anwenden Das wird sich auch auf das Handy übertragen, aber wir müssen uns anpassen Im mobilen Bereich beträgt der Abstand 30 Pixel, also müssen wir ihn auch auf negative 30 Pixel anpassen Und das wird genau von Kante zu Kante sein. Schauen wir uns jetzt den Rest der Seite an. Rich-Text benötigt keine Anpassungen. Es reagiert bereits und sieht auf allen Bildschirmen gut aus. Auf dem Porträt können wir sogar den Platz auf der rechten Seite ein wenig kürzen und den Inhalt näher an ihn heranbringen. Das ist alles, die Fußzeile braucht nichts. Es ist dieselbe Fußzeile wie auf der Homepage und sie ist bereits optimiert Diese Seite ist jetzt vollständig fertig und sieht umwerfend aus. In den kommenden Videos werden wir die Blog-Homepage erstellen. 146. Blog und CMS: Blog-Startseite: Nun, eine letzte Seite, die unser Blog benötigt, ist diese Blog-Homepage, das Raster, das wir entworfen haben. Blog-Homepage wird eine Kombination aus statischer Seite und dynamischem Inhalt sein , im Gegensatz zur Blogpost-Seite, bei der sich um eine vollständig dynamische Seite handelt. Wir werden eine reguläre statische Seite erstellen und dann CMS-Elemente einfügen. Erstellen Sie also zunächst eine neue Seite. Wir werden es Blog nennen und sicherstellen, dass der URL-Slug Blog ist. Beginnend mit Navbar ist es genau das Gleiche wie auf unserer Blogpost-Seite, also können wir es kopieren Aber anstatt zu kopieren, ist es besser, eine Komponente daraus zu erstellen Klicken Sie mit der rechten Maustaste auf die Navigationsleiste und wählen Sie Komponente erstellen. Nennen Sie es Navbar und wir sind gut. Jetzt können wir das nach rechts auf unsere Blockseite ziehen. Als nächstes benötigen wir den üblichen Abschnitt und den Container. Wir haben hier ein kleines Problem mit der Hintergrundfarbe der Navbar , weil sie grau sein muss Wir könnten es in einen Abschnitt ziehen, aber dann müssten wir Polsterung und all das Zeug ändern Wir könnten eine Kombinationsklasse erstellen und ihr einen grauen Hintergrund geben, aber das bedeutet, dass wir sie von der Komponente trennen müssen , was kein Problem ist, aber es ist nett, wenn sie verknüpft was kein Problem ist, aber es ist nett, wenn sie Die beste Option ist , die Navbar in einen anderen Div-Block einzubinden und diesem Div-Block eine Hintergrundfarbe zu geben Alle diese Optionen sind angemessen und gültig, aber diese war die beste, weil ich keines der Standardelemente oder Symbole ändern Lassen Sie uns nun eine Überschrift und eine Unterüberschrift hinzufügen , ziemlich einfach Und in diesem Fall muss nichts optimiert werden. Nun zum unterhaltsamen Teil: Zuerst entwerfen wir eine statische Karte und dann werden wir herausfinden, wie wir sie in ein dynamisches Element umwandeln können, das Inhalte aus dem CMS bezieht Lassen Sie uns einen neuen DO-Block hinzufügen und ihm eine Klasse von Blockraster geben Dort behalten wir alle Blockkarten mit einem oberen Rand von 60 Pixeln. Als Nächstes benötigen wir einen neuen Deblock namens Block Card. Lass uns diesen weißen Hintergrund machen. Geben Sie den abgerundeten Ecken und etwas Breite. Geben wir dieser Karte vorerst eine feste Breite. Am Ende werden wir keine feste Breite verwenden, weil wir das in einem dreispaltigen Layout anordnen werden. Aber lassen Sie uns das vorerst tun, damit wir richtig sehen können, was wir entwerfen. Es verschwindet, wenn wir ihm eine Breite geben, es ist leer. Das ist der Grund. Keine Sorge. Als Nächstes benötigen wir ein Vorschaubild. Das braucht eine Höhe. Die genaue Höhe aus den Entwürfen reicht aus. Wir können vorerst ein zufälliges Bild hinzufügen , damit wir sehen können, was vor sich geht. Und wir werden die Einstellung „Anpassen“ auf „ Titelbild“ ändern , damit das Bild nicht verzerrt aussieht Es gibt nur eine Sache: Die Blockkarte hat abgerundete Ecken, dieses Vorschaubild jedoch nicht Es geht mit seinen spitzen Kanten über die Ecken hinaus. Das passiert, weil der Überlauf standardmäßig in jedem Div-Block sichtbar ist Aber wenn wir Overflow auf der Blockkarte auf versteckt setzen, wird alles, wird alles was außerhalb der Grenzen liegt , abgeschnitten, wodurch die Ecken auf dem Vorschaubild abgerundet Als Nächstes benötigen wir Inhalt , den wir in einen Div-Block packen werden Geben Sie ihm eine Polsterung von 20 Pixeln. Gestalten wir die Überschrift in einem Absatz. Für die Überschrift können wir eines der Tags erstellen, vielleicht H zwei oder H drei. Denken Sie daran, wie Sie Überschriften-Tags stylen , ändern Sie das Tag in den Einstellungen , gehen Sie dann zur Auswahl und beim Nachbearbeiten erhalten Sie die Möglichkeit, dieses bestimmte Tag auszuwählen und alle Aufnahmestile aus den Designs anzuwenden, 22 Pixel und halbfett und so weiter Und noch eine letzte Sache: Entferne den oberen Rand davon. Für den Autoren - und Datumsblock benötigen wir dafür einen neuen Do-Block. Wir haben bereits genau den gleichen Block auf der Beitragsseite, also werde ich versuchen, dieselbe Klasse hier wiederzuverwenden. Es muss jedoch optimiert werden. Schauen wir uns die Klassen an , die wir dort verwendet haben. Wenn wir diese Klassen anwenden, sollten wir dieselben Ergebnisse erzielen. Kopieren wäre eine einfachere Option, aber es funktioniert nicht mit dynamischen Elementen, da sie verknüpft sind. Ordnung, jetzt optimieren wir das indem wir Kombinationsklassen verwenden Avatar ist 30 Pixel groß statt 40. Der Text ist 12 Pixel groß. Und es hat unterschiedliche Abstände an der Seite, also passen wir das auch an. Und schließlich der obere Rand. Eine Sache, die ich dieser Karte hinzufügen möchte, ist ein Hover-Effekt. Eine Sache, die wir tun können, ist Hover einen Hintergrundschatten darauf hinzuzufügen Das wäre eine nette Interaktion. Wir wissen schon, wie man den Schatten erzeugt, oder? Bei den Karten haben wir es bei den Testimonial-Karten gemacht, und wir können hier genau dasselbe tun und wir können einfach dieselben Werte für den Schatten wiederverwenden Fügen wir einen Übergangseffekt hinzu, damit es nicht so abrupt und Es gibt noch einen Hover-Effekt, den wir hinzufügen können. Wir könnten die Karte ein wenig bewegen lassen. Dies mit einem Schatten erzeugt Effekt, dass die Karte in die Luft gehoben wird. Das ist im Schwebezustand sehr einfach und hat einen Transformationseffekt Und bewegen Sie sich auf der vertikalen Achse um etwa zwei Pixel Wir benötigen negative zwei Pixel, um es anzuheben. Positive Werte werden es nach unten verschieben. Wir müssen den Übergangseffekt nicht hinzufügen da wir einen für alle Eigenschaften hinzugefügt haben, sodass auch der Übergang für die Verschiebung berücksichtigt wird. Aus diesem Grund verwende ich lieber alle Eigenschaftenübergänge anstelle eines individuellen Übergangs für jedes Attribut. Hervorragend. Die Karte ist fertig, aber wir werden sie noch nicht mit dem CMS verbinden. Das machen wir im nächsten Video. Lass uns jetzt einfach die Seite fertig stellen. Wir müssen die Fußzeile hinzufügen, was einfach ist, da wir nur eine Fußzeilenkomponente auf die Seite ziehen müssen eine Fußzeilenkomponente auf die Seite ziehen Und fertig, super einfach. Lassen Sie uns nun auf diese Blockseite verlinken, damit Benutzer über die Navigationsleiste oder über die Fußzeile auf diese Blockseite zugreifen können über die Navigationsleiste oder über die Fußzeile auf diese Blockseite zugreifen die Navigationsleiste oder über die Fußzeile Wählen Sie dann den Link aus und gehen Sie zu den Einstellungen von Panel. Verbunden mit der Blockseite, die jetzt in einer Dropdownliste angezeigt Und das Gleiche in der Fußzeile. Und vergessen wir nicht die Homepage-Navigationsleiste, da die Navigationsleiste dort nicht mit der Komponente verbunden Und das ist alles. Jetzt kann auf die Blockseite von überall auf der Site zugegriffen werden. Ordnung, als Nächstes verbinden wir das Grid mit dem CMS. Bleib hier 147. Sammlungsliste: Es gibt zwei Möglichkeiten, Elemente aus dem CMS abzurufen. Eine Möglichkeit besteht darin, Sammlungsseiten zu verwenden. Das haben wir mit dem Blogbeitrag gemacht. jede neue Sammlung, die wir erstellen, wird automatisch eine Sammlungsseite für sie erstellt, die wir von hier aus zugreifen können. Aber was ist, wenn wir CMS-Inhalte woanders abrufen wollen? Zum Beispiel auf statischen Seiten wie der Homepage oder auf der Blog-Seite, auf der wir all diese Blockkarten haben. Geben Sie die Sammlungsliste ein. Sammlungsliste ist ein Element , das aus dem Elemente-Bedienfeld auf eine beliebige Seite und an eine beliebige Stelle auf der Seite gezogen werden kann dem Elemente-Bedienfeld auf eine beliebige Seite und an eine beliebige Stelle auf der Seite Wenn Sie eine Sammlungsliste auf die Seite ziehen, erhalten Sie eine Reihe leerer lila Felder Hier gibt es noch nichts zu sehen. Zuerst müssen wir es mit einer bestimmten Sammlung verbinden. In unserem Fall Blogbeiträge. Jetzt verstehen wir das. Die Boxen sind immer noch leer, aber jedes Feld entspricht dem Blockpost in unserer Datenbank. der Sammlungsliste werden standardmäßig alle Elemente in dieser bestimmten Datenbank angezeigt . Wir haben die Kontrolle darüber, wie viele gleichzeitig angezeigt werden sollen, aber das besprechen wir später. Wir haben auch diese Layout-Steuerelemente. Unser Blockraster hat drei Spalten, sodass wir es einfach darauf umstellen können. Jetzt werden unsere Blockkarten genau wie beabsichtigt in einem dreispaltigen Raster angezeigt . Nun, noch nicht. Sie sind immer noch leer. Wenn Sie den Vorschaumodus überprüfen, verschwinden sie. Um Elemente an das CMS zu binden, müssen wir zunächst Elemente in eines dieser lila Felder ziehen . Sobald wir das getan haben, erhält jedes Element darin dynamische Eigenschaften und wir haben Möglichkeit, eine Verbindung zu einem bestimmten CMS-Feld herzustellen. In diesem Fall müssen wir die gesamte Blockcard in eines der Felder ziehen die gesamte Blockcard in eines der Felder Es ist egal welcher. Es gibt keine Möglichkeit, die gesamte Blockcard auf der Leinwand auszuwählen. Stellen Sie also sicher, dass Sie sie im Navigator auswählen Wenn sie dann ausgewählt ist, klicken Sie darauf und ziehen Sie sie in eines der lila Felder Wenn das schwierig ist, können Sie das Ganze vom Navigatorfenster aus tun Navigatorfenster aus tun und es in das Sammlungselement ziehen. Okay, ich bin mir sicher, dass du Fragen dazu hast , was gerade passiert ist, warum sich die Blockkarten vervielfacht haben Die Sache ist, die Sammlungsliste funktioniert wie eine Sammlungsseite Das heißt, dass sich alle wie ein Organismus verhalten , wie eine Art Schwarmgeist Sobald wir Elemente mit den CMS-Feldern verknüpft haben , werden die entsprechenden Inhalte abgerufen Lassen Sie uns also Elemente mit ihren entsprechenden Feldern verbinden. In dem Moment, in dem Sie eine Verbindung zum CMS-Feld hergestellt haben, die Überschrift jeder Karte sofort aktualisiert je nachdem, mit welchem bestimmten Blockbeitrag sie verbunden ist. Bis wir diese Verbindungen herstellen, sind alle Elemente normale, statische Elemente, und jedes Element wird genau dasselbe sein. So weit, so gut. Und lassen Sie uns das Datum in ein kürzeres Format ändern. Wir müssen einige Änderungen am Abstand vornehmen. Lassen Sie uns zunächst diese feste Breite von der Blockkarte entfernen. Es wird im Weg stehen und alles durcheinander bringen. Wir wollen keine feste Karte, wir wollen, dass sie sich je nach Seitenbreite fließend dehnt und schrumpft das Sammlungselement bereits ein gewisser Abstand Standardmäßig wird auf das Sammlungselement bereits ein gewisser Abstand angewendet Wir können es dort hinzufügen, anstatt der Blockkarte neue Abstandseigenschaften hinzuzufügen . Es hat eine Polsterung von zehn Pixeln an den Seiten. In unseren Designs beträgt der Abstand zwischen den einzelnen Karten 30 Pixel, also 15 Pixel an den Seiten Und auch der untere Rand oder die Polsterung. Spielt eigentlich keine Rolle, beides funktioniert. Kümmern wir uns jetzt die seltsame Verteilung der Karten. Das passiert, wenn die Höhen der einzelnen Gegenstände unterschiedlich sind, sie also chaotisch angeordnet sind und unser aufgeräumtes Raster durchbrechen Wir können das ganz einfach mit einer Flexbox beheben. Also müssen wir Flexbox auf das erste übergeordnete Objekt anwenden , das diese Sammlungselemente enthält Das ist eine Sammlungsliste. Stellen Sie sicher, dass Sie keinen Sammlungslisten-Wrapper auswählen. Das ist ein Großelternteil mit all dem Zeug drin. Zuerst werden alle Gegenstände in einer einzigen Reihe zusammengequetscht. Alles, was wir hier tun müssen, ist das Verpacken zu aktivieren. Dann erhalten wir genau das Layout , das wir anstreben. Es gibt nur eine Sache. Diese Karten sind eigentlich nicht anklickbar. Wie greifen wir tatsächlich auf die Blockseiten zu, die sie repräsentieren Dafür benötigen wir ein Linkelement , das eine Verbindung zur Blockseite herstellt. Im Moment ist keines der Elemente Links, daher bietet keine der Einstellungen die Option URL an den CMS-Link zu binden. Also müssen wir eines davon in ein Link-Element umwandeln. Dies kann zum Beispiel eine Überschrift sein, die ein Link oder ein Vorschaubild oder beides sein kann , oder wir können die gesamte Karte in einen Link umwandeln Wie machen wir das, indem wir das Link-Block-Element verwenden? Wir müssten also die gesamte Karte in den Link-Block legen . All dies sind sehr gültige Optionen. Verschiedene Websites gehen unterschiedlich damit um. In diesem aktuellen Layout, das wir haben, möchte ich, dass die gesamte Karte anklickbar Wenn wir verschiedene Links zu verschiedenen Orten hätten, zum Beispiel der Name des Autors, der zu einer Autorenseite führt, oder wenn es einen Link zu einer Kategorie gäbe, dann könnten wir das Ganze nicht in den Link-Block aufnehmen , weil man Links nicht in anderen Links verschachteln kann in anderen Links verschachteln Aber in diesem Fall können wir das. Also lass uns damit weitermachen. Fügen Sie einfach ein Link-Block-Element in das Sammlungselement ein. Wenn Sie die Einstellungen erhalten, sehen Sie dieses lila Seitensymbol. Dies ermöglicht das Verlinken auf eine Sammlungsseite. Wählen Sie das und wählen Sie den aktuellen Blogbeitrag aus. Jetzt führt dieser Link zu dieser Blockpost-Seite. Lassen Sie uns zum Schluss die gesamte Karte in diesen Tintenblock verschieben. Wir brauchen diesen zusätzlichen Diveblog eigentlich nicht. Wir können die Blockkartenklasse auf den Link-Block selbst anwenden und den zusätzlichen Div-Block entfernen Da es sich jetzt um einen Link-Block handelt, ist der gesamte Text auf der Karte unterstrichen Das ist nur ein normales Verhalten von Links. Wir können diese Unterstreichung aus den Einstellungen für die Textdekoration entfernen aus den Einstellungen für die Textdekoration Wählen Sie keine aus. Schauen wir uns Vorschau an und testen den Link. Es gibt eine Sache, die mich stört ein bisschen unterschiedliche Höhen der Karten. Um ehrlich zu sein, ist das in Ordnung, aber gleiche Höhen würden es schöner aussehen lassen Das haben wir an Designs, nicht wahr? Alle Karten haben unabhängig von ihrem Inhalt die gleiche Höhe , und das macht das Raster etwas übersichtlicher. Um das Gleiche zu tun, müssen wir die Karten nur dehnen, um den leeren Raum zu füllen. Das Sammelobjekt dehnt sich bereits, da es sich um ein flexibles Kind handelt, aber die Blockkarte wird nicht wenn wir einer Blockcard eine Höhe von 100% geben, gestreckt, wenn wir einer Blockcard eine Höhe von 100% geben, füllt das leere Feld Denken Sie daran, dass Sie nur eine der Blockkarten stylen müssen und alle Karten haben den gleichen Stil Das sieht alles gut aus, bis auf eine Sache. Der Autor und der Datumsblock befinden sich überall an unterschiedlichen Positionen. In unseren Designs haben wir sie auf die Unterseite geklebt, wodurch das Layout viel schöner Wie können wir das erreichen? Wenn Sie sich zunächst das übergeordnete Element ansehen, bei dem es sich um den Karteninhalt handelt, werden Sie feststellen, dass es sich nicht bis ganz nach unten erstreckt. Also zuerst müssen wir diese Dehnung definitiv schaffen. Diesmal wird eine Körpergröße von 100% nicht funktionieren, weil das bedeutet, dass sie 100% der Körpergröße des Elternteils entspricht. Blockkarte handelt es sich um das übergeordnete Element, das größer ist, weil sich auch das Bild darin befindet Wenn wir es also zu 100% geben, füllt es nicht nur den leeren Raum aus, sondern es wird auch die Grenzen überschreiten Wie können wir also sonst dafür sorgen, dass es den Raum ausfüllt? Hier ist eine Möglichkeit, das Elternteil zur Blockkarte zu machen, einer Flexbox mit vertikaler Ausrichtung Und dann können wir unter „Flex Child“ -Einstellungen die Größe für den Karteninhalt auf Stretch ändern Nun zum zweiten Schritt müssen wir den Autorenblock irgendwie auf die Unterseite kleben. Eine naheliegende Option besteht darin, den Inhaltsblock erneut in eine Flexbox mit vertikaler Ausrichtung umzuwandeln Und ändern Sie die Einstellungen für die Ausrichtung auf Leerzeichen dazwischen. Dadurch werden die Objekte an die Kanten gedrückt. Jetzt ist der Autorenblock auf jeder Karte unten angeklebt, was nett ist, aber dadurch wird auch die Beitragszusammenfassung gleichmäßig verteilt Das wollen wir nicht. Wir möchten die Zusammenfassung des Beitrags zusammen mit einer Überschrift gruppiert wird. Das ist einfach zu beheben. Wir müssen nur die Überschrift und die Zusammenfassung des Beitrags in einen Div-Block packen, und das ist alles. Wenn ich sage, etwas einpacken, bedeutet das, einen neuen Div-Block hinzuzufügen und die Elemente darin zu platzieren. Wickeln Sie wie eine Geschenkbox. Und das ist alles. Schauen wir uns die Vorschau an. Alles funktioniert super. Es gibt noch eine Sache, die wir erledigen müssen. Wir müssen eine Seitennummerierung hinzufügen. Paginierung bedeutet, diese Blockkarten auf verschiedene Seiten zu verteilen diese Blockkarten auf verschiedene Wir wollen nicht, dass jede einzelne Karte auf dieser Seite geladen wird. Wenn wir mehr als 20, 30 Blockkarten haben, wird die Seite langsamer. Deshalb brauchen wir eine Seitennummerierung. Das machen wir in der nächsten Lektion. Bleib hier. 148. Blog und CMS: Pagination: In diesem Video werden wir die Paginierung hinzufügen. Ohne Blockkarten auf verschiedene Seiten aufzuteilen, jede einzelne Blockkarte Und wenn wir viele Logposts haben, würde das dazu führen, dass die Seite sehr langsam geladen wird und das wäre nicht optimal Für 20 Karten stimmt das. Aber bei 50, 60 und mehr wird das die Seite erheblich verlangsamen. Das Erstellen einer Seitennummerierung auf der Sammlungsliste ist so einfach wie das Ankreuzen eines Kästchens im Einstellungsfeld Hier entscheiden wir also, wie viele Artikel pro angezeigt werden sollen Wir wollen eine Zahl , die für unser dreispaltiges Raster geeignet ist , etwas, das durch drei teilbar ist, wie neun, 12 usw. Zehn ist nicht gut, denn dann hast du leere Plätze. Die ideale Zahl kann sowohl in drei- als auch in zweispaltige Layouts unterteilt werden . 12 ist die beste Option. Neben der Paginierung gibt es also einige andere Einstellungen für Sammlungslisten Schauen wir sie uns schnell an. Filter sind cool und sehr praktisch. Zum Beispiel könnten wir Beiträge nach Autor oder Beitrag filtern , der in diesem Monat erstellt wurde. Oder wir könnten unseren Sammlungsfeldern zusätzliche Felder für eine solche Filterung hinzufügen . Dann werden diese Felder hier angezeigt und wir könnten Artikel anhand dieser Felder filtern. Eine Möglichkeit, dies zu tun, ist beispielsweise der Kategoriefilter. Jedes Mal, wenn wir einen Blogbeitrag erstellen, würden wir also eine Kategorie des Blogs auswählen, oder? Also würden wir sagen, vielleicht geht es hier ums Kochen, vielleicht ist es spanische Küche, italienische Küche, französische Küche, was auch immer. Und dann hätten wir für jede Kategorie eigene Seiten , oder? Also alle Blogbeiträge über französische Küche, alle Blogbeiträge über chinesisches Essen. Und auf jeder dieser Seiten würden wir dann diesen Filter erstellen. Zeige also nur diejenigen, die kategorisiert sind und eine Kategorie von Französisch haben , und solche, die eine Kategorie für chinesisches Essen haben und so weiter. Ähnliche Optionen gelten für die Sortierung. Wir können die Reihenfolge der Beiträge nach vielen verschiedenen Kriterien und Regeln sortieren . Und auch hier können wir separate Seiten für verschiedene Sortierreihenfolgen erstellen für verschiedene Sortierreihenfolgen und diese Links dann oben einfügen , damit die Benutzer dorthin navigieren können. Es gibt eine letzte Einstellung, Anzahl der angezeigten Artikel begrenzt. Dies ähnelt der Seitennummerierung, begrenzt jedoch die Anzahl der Elemente insgesamt und fügt keine zusätzlichen Seiten , um andere Elemente anzuzeigen Ein praktisches Beispiel hierfür wären ähnliche Vorschläge für Blockbeiträge unter einem tatsächlichen Blockbeitrag Dazu würden wir darunter eine weitere dynamische Liste hinzufügen. Wir würden sie mit Blogbeiträgen füllen und dann die Artikel auf zwei oder drei beschränken Es werden also nur einige Vorschläge für Beiträge angezeigt. So einfach und leistungsstark können diese Einstellungen für Sammlungslisten sein. Sobald Sie die Seitennummerierung aktiviert haben, stehen Ihnen diese Schaltflächen „Weiter“ und „Zurück zur Verfügung, mit denen Sie zwischen den Seiten wechseln können Das Styling ist also ganz einfach. Wählen Sie einfach die Schaltfläche. Gib ihm eine Hintergrundfarbe. Ändern Sie die Steuerfarbe. Fügen Sie etwas mehr Abstand hinzu. Fügen Sie einen Hover-Effekt hinzu. Fügen Sie Schaltflächen und Links immer Hover-Effekte hinzu. Es ist wichtig, dass Benutzer verstehen, was ein interaktives Objekt ist und was nicht, und der Hover-Effekt ist der beste Weg, dies zu tun Ich habe vor Kurzem eine Biographie von Steve Jobs gelesen, und ich habe diese Zeile gelesen, in der er sagte, dass Technologie einem das Gefühl geben muss , dass man sie dominieren kann Und das ist so verdammt wahr. Deshalb sind einfache, minimalistische Technologien und Produkte immer besser als komplizierte Produkte einer Reihe von Knöpfen und Wählscheiben Wenn Sie also Ihre Websites erstellen und Ihre Websites entwerfen, vergessen Sie niemals die Benutzerfreundlichkeit und vergessen Sie nie , wie der Benutzer damit interagieren wird Stellen Sie also sicher, dass es eine Schaltfläche gibt, stellen Sie sicher, dass die Schaltfläche einen Hover-Effekt oder eine Art Interaktion mit ihr hat , damit wir verstehen können , dass dieses Ding anklickbar ist Stimmt das? Oder wenn es einen Link gibt, ändert der Link die Farbe? Gibt es irgendein Anzeichen dafür , dass das der Link ist und du kannst darauf klicken und es wird uns irgendwohin führen und so weiter. Es ist nicht so schwierig, aber es erfordert etwas Aufmerksamkeit und keine Faulheit, weil viele Webdesigner ziemlich faul sind denn wenn sie es nicht wären, hätten wir nicht so viele schlechte Websites, was uns manchmal verrückt macht. Wie auch immer, zurück zur Paginierung. Also zurück zum Styling unseres Buttons. Wir können dieselbe Klasse auf die vorherige Schaltfläche anwenden. Der Klassenname ergibt keinen Sinn. Vielleicht sollte ich die Paginierungsschaltfläche verwenden. Das ist ein bisschen besser. Wenn Sie ein Element der Paginierung auswählen, erhalten Sie diese zusätzliche Option in den Einstellungen Dadurch wird die Seitenanzahl angezeigt, was manchmal nützlich ist, um sie anzuzeigen Wir könnten das auch stylen, wenn du es willst, aber ich denke, das ist genug. Das ist es. Unsere Blockanzeige ist fertig. Wir müssen es nur responsiv machen und das werden wir im nächsten Video tun. Bleib hier. 149. Blog und CMS: Reaktionsfähige Blogseite: Lassen Sie uns nun unsere Blockseite responsiv machen. Dem Desktop geht es gut. Die Karten schrumpfen auf eine vernünftige Größe, sodass wir immer noch drei Spalten behalten können Auf den Tablets ist das eine andere Geschichte. Das ist zu viel für drei, also müssen wir uns für zwei Spalten entscheiden. Wir können das Layout von diesen Einstellungen aus ändern. Das wird sich auf Desktop-Version zwei auswirken. Es ist global, nicht gerätespezifisch. Aber es ist ziemlich einfach. Diese Artikel befinden sich in einer Flexbox mit aktivierter Verpackung Das bedeutet, dass Karten in die nächste Zeile springen , wenn kein Leerzeichen mehr vorhanden ist Wenn wir dem Sammelobjekt eine Breite von 50% geben , wird alles sofort in zwei Spalten angeordnet. So einfach ist das, sie lassen sich dehnen und schrumpfen, um den entsprechenden Platz einzunehmen Nun, was die Landschaft angeht, ist es ein bisschen knifflig. Bei größeren Größen ist es perfekt. Aber wenn Sie auf die kleinere Größe verkleinern, zwei Spalten zu viel Eine Möglichkeit besteht darin, ein einspaltiges Layout zu erstellen, sodass wir die Breite auf 100% setzen müssten Eine Spalte ist in diesem Fall nicht schlecht, aber wissen Sie, was das perfekte Layout wäre? Wenn wir ein zweispaltiges Layout und dann eine bestimmte Breite haben könnten dann eine bestimmte Breite , damit daraus eine einzige Spalte wird. Wenn wir beispielsweise die Mindestbreite des Sammlungselements auf 300 Pixel festlegen , werden die Karten auf 300 Pixel verkleinert und dann bis zur zweiten Zeile umgebrochen, wodurch ein Spaltenlayout Aber das ist eine Idee. Auf der großen Leinwand sehen wir diese Lücke. Im Idealfall möchten wir, dass sie in dem Moment, in dem sie einspaltig sind, auf 100% Breite umgestellt wird. Zum Glück gibt es dafür einen fortgeschrittenen Trick. Wir können solche spezifischen Regeln Flex-Child-Einstellungen unter den weiteren Optionen festlegen. Entfernen Sie die Einstellungen für die Mindestbreite bevor Sie mit der Bearbeitung dieses Teils beginnen. Es gibt drei Felder mit dem Wert „Vergrößern“, Verkleinern“ und „Basiswert Die Kombination dieser drei Werte führt unterschiedlichen Ergebnissen Ich werde nicht tief in die Logik eintauchen, wie sie alle funktionieren, aber ich werde die eine Variante erklären, die wir gerade brauchen Innerhalb der Basis können wir einen Wert wie 300 Pixel festlegen. Dann können wir im Feld Verkleinern angeben, dass nicht über diesen Wert hinaus geschrumpft Der Wert dafür muss Null sein. Wenn es eins und höher ist, bedeutet das, dass es über diesen Wert hinaus schrumpfen kann Shrink also auf Null gesetzt ist, schrumpft es nicht über diesen Wert hinaus, und die Karten werden zur nächsten Zeile weitergereicht Es ist, als würde man ein Minimum festlegen. Da die Größe nun auf Null gesetzt ist, wächst sie weder über 300 Pixel hinaus, noch schrumpft 00 bedeutet im Grunde, nicht zu wachsen, nicht zu schrumpfen. Behalte es einfach bei 300 Pixeln. Wenn wir jedoch die Größe auf eins setzen, lassen wir es über 300 Pixel wachsen , um jeden verfügbaren Platz einzunehmen. Und das gibt uns ein absolut perfektes Layout mit zwei vollen Spalten, und wenn es zu klein wird, wird es zu einer einzigen Spalte mit voller Breite. Wenn Sie das nicht vollständig verstanden haben , machen Sie sich keine Sorgen. Es ist ein kniffliges Konzept. Seien Sie sich bewusst, dass eine solche detaillierte Steuerung eine Option ist, wenn Sie sie benötigen Dann können Sie nach dem Zufallsprinzip mit verschiedenen Werten spielen , bis Sie das gewünschte Ergebnis erzielen Das mache ich sowieso die meiste Zeit. Schauen wir uns zum Schluss den Portrait-Modus an. Aufgrund der Flex-Child-Einstellungen , die wir im Querformat festgelegt haben, befindet sich das Hochformat automatisch in einem einspaltigen Modus, allerdings mit einem Problem. Da wir nicht zulassen, dass es unter 300 Pixel schrumpft, geht es über die Seitenränder hinaus Da wir jetzt Flex-Child-Einstellungen verwenden, können wir hier keine Einstellungen verwenden, da die untergeordneten Flex-Settings diese Werte ignorieren Also setzen wir das Flex-Kind wieder auf seinen Standardwert zurück , der bei Bedarf das Verkleinern ist, und dann können wir die Breite um 100% ändern Es gibt noch eine letzte Sache, die wir reparieren können. Durch die Polsterung an den Seiten entsteht diese kleine Fehlausrichtung an den Rändern unserer Sie wissen, wo all unsere Inhalte angeordnet sind. Das ist ein bisschen pingelig, aber ich mag es, wenn alles so exakt wie möglich Du solltest dein Bestes geben, um auch diese Gewohnheit zu entwickeln. Besessenheit von Details ist eine gute Eigenschaft für einen Webdesigner Wie beheben wir also diese kleine Fehlausrichtung? Wir können keine spezielle Kombiklasse für Karten haben , die an Kanten liegen Sie sind eins, denk dran, Hive Mind. Aber es ist ziemlich einfach Wir können dem übergeordneten Element, das all diese Artikel enthält, eine negative Marge hinzufügen . -15 Pixel auf beiden Seiten und fertig. Du bekommst Karten jetzt exakt an den Kanten ausgerichtet . Und das ist alles. Wirklich, das ist es. Unsere Website ist vollständig fertig. Sie ist responsiv. Es sieht wunderschön aus. Es ist schnell und leistungsstark. Die Leute zahlen gutes Geld dafür. Im nächsten Abschnitt werden wir den letzten Schliff geben und die Website veröffentlichen. 150. Inbetriebnahme: SEO und Veröffentlichung: Fangen wir mit SCO und einigen anderen Feinarbeiten an. Wir müssen die SEO-Details für alle unsere Seiten ausfüllen , beginnend mit der Homepage. Wir haben das schon einmal gemacht, also sollte es ziemlich einfach sein, mit Ausnahme der dynamischen Blogpost-Seite. Das ist ein bisschen anders. Vergiss nicht die Einstellungen für das Öffnen des Diagramms. Das ist für all diese sozialen Netzwerke, Facebook, Twitter und so. Oder das Bild, es braucht eine URL. Wir können ein Bild aus dem Assets-Bedienfeld auswählen und daraus eine URL abrufen. Ich werde mich für dieses Bild entscheiden. Dann schnappen Sie sich einfach die URL und fügen Sie sie dann in das Feld ein. Das Gleiche gilt für die Blog-Seite. Ich habe keine spezifischen Regeln dafür, was Sie auf SEO setzen sollten, solange es nicht leer ist. Der Rest hängt vom Geschäft ab und welche Botschaft die Kunden senden möchten. Jetzt ein lustiger Teil, SEO für die dynamische Seite. Sie werden auf einer dynamischen Seite einen zusätzlichen Link bemerken, diese lila Links zum Hinzufügen eines Felds. Der Name des Blogposts kann also statisch sein, oder? Der Name muss mit der Überschrift der Blogpost-Seite übereinstimmen. Wir können diese Überschrift so hinzufügen. Da hast du es. Der Name der Blog-Seite. Und wenn Sie auf diese Pfeile klicken, können Sie ganz einfach verschiedene Beiträge durchgehen. Wir können vor oder nach diesem dynamischen Feld alles andere hinzufügen . Und innerhalb der Meta-Beschreibung können wir einen Text mit der Zusammenfassung des Beitrags hinzufügen. Das ist ein weiterer Grund, warum Zusammenfassung von Beiträgen ein so praktisches Feld ist. Und für das Open-Graph-Bild können wir das Bild direkt aus dem CMS auswählen. Wie toll ist das? Jeder Beitrag wird also sein eigenes Hauptbild enthalten. Das ist alles für die Suchmaschinenoptimierung. Es gibt einige Links, die wir in der Navbar und in der Fußzeile verbinden müssen in der Navbar und in der Fußzeile verbinden Zum Beispiel das Logo. Es hat sich bewährt, es mit der Homepage zu verlinken Es ist das, was die Leute erwarten. Was andere Links betrifft, haben wir keine Seiten für sie, also müssen wir sie so lassen, wie sie sind, mit Ausnahme des Blogs, den wir bereits verlinkt haben. Vergessen wir nicht die Fußzeile. Wir müssen dieses Logo auch mit der Startseite verknüpfen. Wenn Sie die Linkeinstellungen nicht sehen, haben Sie vielleicht nur ein Logo ohne Linkblock. Nur Linkelemente können mit anderen Seiten verbunden werden. Wenn es dir also fehlt, füge einfach einen neuen Link-Blog hinzu und lege dein Bild einfach hinein. müssen dem Link nicht einmal eine Klasse hinzufügen, sondern bearbeiten Sie die Einstellungen direkt. Hervorragend. Dies ist ein guter Zeitpunkt , um alle Links in einem Vorschaumodus zu überprüfen und zu sehen, wie das alles auf verschiedenen Bildschirmen aussieht. Ich liebe das Ergebnis. Es ist eine schöne, schnelle und solide Website Kümmern wir uns jetzt um die Bildkomprimierung. Dies ist ein wichtiger Schritt, da alle unsere Bilder eine ziemlich große Dateigröße und dadurch die Websites kleiner werden. Gehen Sie zu Assets, erweitern Sie das Panel, wählen Sie alle Assets aus und klicken Sie auf Komprimieren. Einige der Bilder werden nicht für die Komprimierung ausgewählt, und das ist in Ordnung, da einige von ihnen im SVG-Format vorliegen und nicht komprimiert werden müssen. Wir wollen sie in SIG behalten. Nehmen Sie sich etwas Zeit und Sie erhalten eine Benachrichtigung, wenn alle Bilder komprimiert wurden. Nun, das waren Bilder auf unseren statischen Seiten, aber wir haben auch eine ganze Reihe von Bildern im CMS. Es gibt Bilder sowohl in der Sammlung der Autoren als auch in der Sammlung von Blogbeiträgen. Wir können die Komprimierung direkt von hier aus durchführen Dadurch werden alle Bilder auf einmal im gesamten CMS in diesen beiden Sammlungen komprimiert . Dies wird etwas länger dauern da es viel mehr Bilder gibt, aber wir müssen hier nicht warten. Wir können einfach mit den verbleibenden Schritten fortfahren. Okay, bevor wir auf Veröffentlichen klicken, gehen wir zu den Projekteinstellungen Wir müssen einen Favican hochladen genau wie beim letzten Mal Denken Sie daran, wie wir das gemacht haben. Wir mussten in Figma einen Favican und Webclip-Symbole erstellen in Figma einen Favican und Webclip-Symbole Das Favicon und der Webclip müssen in genauen Größen erstellt werden, 32 x 32 für das Favicon und 256 x 256 Lassen Sie uns also einen Rahmen zeichnen, der genau 256 mal 256 groß ist. Dann gib ihm etwas Farbe. Also Eckenradius. Erstellen Sie ein kleines Symbol aus dem Logo, und das reicht. O für den Hersteller brauchen wir genau 32 mal 32, aber wir können die Größe des Rahmens nicht einfach so ändern, wie er ist weil der Text darin nicht richtig skaliert Das Skalierungswerkzeug ist jedoch genau für solche Größenänderungszwecke Wir können unsere gewünschten Abmessungen eingeben und alles wird proportional verkleinert Das ist es. Exportieren Sie sie jetzt in einem X als PNG und laden Sie sie unter Seiteneinstellungen hoch. Stellen Sie sicher, dass die Abmessungen korrekt sind, da sonst ein Fehler ausgegeben wird. Und das ist alles erledigt. Jetzt können wir auf der Webflow-Domain auf Veröffentlichen klicken Und das ist unsere schicke kleine Website . Lassen Sie uns alles überprüfen und sicherstellen, dass es richtig funktioniert Als Nächstes werden wir Formulare testen und sehen, wie Formulareinreichungen auf weblo verwaltet werden. Bleib hier 151. Live-Zugang: Formularübermittlung: Y. Lassen Sie uns nun unsere Formulare testen. haben wir ein ziemlich einfaches Formular Diesmal haben wir ein ziemlich einfaches Formular erstellt, nur eine E-Mail-Adresse Wir können mit Formularen auf Webflow ziemlich verrückt werden, aber egal, ob es sich um ein einzelnes ausgefülltes Formular oder ein mehrstufiges T-ausgefülltes Formular handelt, sie funktionieren alle gleich Die Einreichung verlief ganz gut. Dies ist ein Standardverhalten. Die Einreichung erfolgt direkt auf der Seite. Wenn Sie die Seite aktualisieren, ist diese Nachricht weg und wir können das Formular erneut abschicken. Wir sind nicht auf diese Version beschränkt. Wir können Benutzer nach der Einreichung auch auf eine andere Seite weiterleiten , z. B. auf eine Dankesseite oder eine Bestätigungsseite, was auch immer. Alles, was wir dafür tun müssen, ist diese Seite auf Webflow zu erstellen und die URL in den Formulareinstellungen hinzuzufügen Wir können Einsendungen automatisch per E-Mail versenden. Wir können die E-Mail-Adresse einer Person angeben , die Beiträge erhalten wird . Normalerweise die E-Mail-Adresse Ihres Kunden, und er wird eine E-Mail wie diese erhalten. Ich finde es toll, dass Webflow sich auch darum kümmert, und ich muss mir kein Plugin besorgen oder eine Drittanbieteranwendung installieren , um die Benachrichtigungen und all das zu verwalten . Wir können diese E-Mail-Benachrichtigungen auch anpassen, wenn unsere Website einen Hosting-Plan hat Okay, lassen Sie uns nun sehen, was mit unserer Formularübermittlung passiert ist. Gehen Sie zu den Projekteinstellungen und klicken Sie auf die Registerkarte Formular. Dort werden Sie die Einreichung sehen. Mit diesen Einsendungen können wir viel anfangen. Wir können löschen. Wir können es in CSV exportieren. Eine andere Sache, die wir tun können, ist Integration von Formulareinreichungen in andere Apps. Bei E-Mail-Marketing-Tools wie Mailchimp können beispielsweise neue Beiträge an diese E-Mail-Marketing-Plattformen gesendet werden, können beispielsweise neue Beiträge an diese E-Mail-Marketing-Plattformen gesendet werden wo Ihre Kunden ihr Ding damit machen und neue E-Mail-Newsletter und Werbematerial und all das Zeug veröffentlichen können ihr Ding damit machen und neue E-Mail-Newsletter und Werbematerial und all das Und das ist alles, was Sie tun müssen, um Beiträge zu formulieren. 152. Intro zum Freiberufler: Habe bisher viel gelernt. Tolle Arbeit. Inzwischen haben Sie ziemlich gute praktische Erfahrungen mit Figma und Webflow Sie können ein echtes Projekt übernehmen und vom Drahtrahmen zum Entwerfen und dann zum Erstellen der gesamten Enchilata in Webflow übergehen Entwerfen und dann zum Erstellen der gesamten Enchilata Das heißt nicht, dass du weißt, wie man alles macht. Ich weiß auch nicht, wie man alles macht, besonders wenn sich die Webtechnologien ständig ändern. Du lernst weiter. Wenn ein Kunde mich bittet , etwas zu tun, was ich noch nie gemacht habe, gehe ich online und suche normalerweise nach Video-Tutorials, falls es solche gibt. Wenn nicht, dann frage ich in Foren. Und manchmal, meistens, hat schon jemand etwas Ähnliches gefragt und ich kann bereits eine Antwort in einem anderen Forum oder auf WebflowSFM finden anderen Forum oder auf , was eine großartige Community ist Ich habe das bereits erwähnt, melden Sie sich an und gehen Sie auf Webflos und jedes Mal, wenn Sie Zweifel haben, gehen Sie immer zur Webflos Community und finden Sie dort Antworten , denn jedes Mal, wenn Sie nicht weiterkommen, gibt es Sie Ich gehe und baue eine Lösung für den Kunden. Das ist der tägliche Arbeitsablauf eines Webdesigners. Man hört nie auf zu lernen. Aber das Wichtigste ist, dass Sie über genügend Grundlagen verfügen , um echte Projekte in Angriff zu nehmen. Und darauf werden wir uns in diesem Teil des Kurses konzentrieren . Arbeit bekommen. Konzepte, die du erlernst, können auch auf Vollzeitarbeit angewendet werden, aber hauptsächlich werden wir uns auf freiberufliche Tätigkeiten konzentrieren Sie werden mehr über Preisstrategien, Angebote, Freelancer-Plattformen und andere Orte und Möglichkeiten, Arbeit zu finden Und wir werden Ihnen eine großartige Portfolio-Website anbieten. Also lass uns gehen. 153. Portfolio-Website: Habe eine Firma mit zwei meiner Freunde, und wir haben damals viele Leute eingestellt. Und was die meisten Kandidaten tun würden, ist, sich selbst zu unterschätzen Sie würden kommen und sagen : Weißt du was? Oh, ich bin nur ein Anfänger. Ich habe nicht viel Erfahrung, ja dah, aber weißt du, ich lerne schnell. Aber meine Schlussfolgerung als Ihr potenzieller Arbeitgeber ist, dass Sie schlecht sind. Woher weiß ich das? Das hast du mir gerade gesagt. Einstieg in einen neuen Beruf ist schwierig, weil die Leute Profis einstellen wollen. Sie wollen keine Anfänger, sie wollen Profis. Das ist die Wahrheit. Aber hier ist ein großer Fehler, den viele Leute machen. Sie denken, ein Profi zu sein, ist jemand mit jahrelanger Erfahrung, ganz und gar nicht. Ein Profi ist jemand, der seine Arbeit ernst nimmt, jemand, der aussieht, als ob schaffen kann und jemand , der seinen Kunden oder Arbeitgebern einen großartigen Service bieten möchte . Wie lässt du dich also wie ein Profi aussehen? Für den Anfang musst du zeigen, was du kannst. Und im Webdesign wird das mit einem Portfolio gemacht Sie haben in diesem Kurs bereits zwei Projekte entworfen und gebaut , und das ist schon etwas, was man vorweisen kann. Aber ich würde empfehlen, noch ein weiteres Projekt vom Entwurf außerhalb dieses Kurses noch ein weiteres Projekt vom Entwurf bis zum Bau durchzuführen. Damit erhalten Sie drei Portfolioteile, und das ist genug für Sie, um rauszugehen und sich für Jobs zu bewerben. Und was noch wichtiger ist: Wenn Sie ein weiteres unabhängiges Projekt durchführen ist: Wenn Sie ein weiteres unabhängiges Projekt , erhalten Sie auch außerhalb dieses geführten Kurses Praxis und Erfahrung . Aber Portfolioteile reichen nicht aus, um wie ein echter Profi auszusehen. Wir brauchen eine Portfolio-Website , denn was denkst du? Hätte ein professioneller Webdesigner nicht seine eigene persönliche Website? Aber Sie wären überrascht, dass ein großer Teil der Webdesigner ihr Portfolio tatsächlich nicht auf Plattformen wie B Hands oder Dribble hat , und das teilen sie mit ihren potenziellen Kunden, indem sie den Link zu ihrem Profil senden, auf dem alle Portfolio-Arbeiten mache ich nie. Erstens sehe ich dadurch nicht wie ein Profi aus. Als freiberuflicher Webdesigner sind Sie im Grunde ein Unternehmen , das Ihren Kunden einen Service anbietet, oder? Und kein gutes Unternehmen würde jemals so etwas tun. Es ist, als wäre man ein professioneller Fotograf mit Portfolio nur auf Instagram. Ich möchte ein professioneller Fotograf sein , der sein eigenes Fotostudio hat, nicht nur ein Instagram-Profil. Und zweitens schicke ich sie an einen Ort mit anderen guten Designern. Das ist einfach eine schlechte Idee. Ich helfe ihnen, jemand anderen zu finden. Ich stelle meine Arbeit neben den weltbesten Designarbeiten aus. Und selbst wenn ich der beste Kandidat für sie wäre, sehe ich nicht mehr so gut Meine Arbeit sieht neben den weltbesten Arbeiten nicht so beeindruckend aus. Und drittens verliere ich die Gelegenheit, sie mit meiner Website zu überzeugen, oder? Ich kann ihnen meinen Designprozess vorstellen. Ich kann einen sehr überzeugenden und überzeugenden Inhalt und ein Urheberrecht schreiben , um sie davon zu überzeugen , dass sie mich einstellen sollten Ich könnte sie mit meiner Website selbst beeindrucken und sie dazu veranlassen, Maßnahmen zu ergreifen, damit sie sich mit mir in Verbindung setzen oder, Sie wissen schon, ein Formular einreichen oder Das heißt nicht, dass Sie keine Profile auf diesen Plattformen haben sollten . Manchmal können Sie dort sogar Arbeit finden, aber es ist nicht der richtige Ort, um Ihre potenziellen Kunden weiterzuleiten . Außerdem bist du ein Webdesigner. Sie haben nie daran gedacht, eine Website für sich selbst zu erstellen. Das sieht einfach nicht ernst aus. Das ist wie ein Automechaniker zu sein , der nie ein Auto besessen hat. Portfolio-Website kann viel für Sie verkaufen und werben Und ich hatte Kunden mich eingestellt haben, nur weil ihnen meine Website gefällt denken nicht einmal an mein Portfolio oder schauen sich das Portfolio an, sie mögen einfach die Website selbst wirklich. Da ich aus eigener Erfahrung weiß, wie sehr eine gute Portfolio-Website helfen kann, habe ich eine großartige Portfolio-Website für Sie entworfen und erstellt . Diese Portfolio-Vorlage hat einen Vorbehalt. Heutzutage arbeiten viele meiner Studenten freiberuflich auf Plattformen wie Upwork Viele dieser Studierenden werden in den Kursprojekten dieselbe Portfolio-Seite verwenden in den Kursprojekten dieselbe Portfolio-Seite Wenn Sie vorhaben, auch auf solchen Plattformen freiberuflich tätig zu sein, würde ich die Verwendung dieser Portfolio-Vorlage nicht empfehlen Es besteht eine hohe Wahrscheinlichkeit, dass derselbe Kunde Angebote von zwei meiner Studenten erhält , die dieselbe Arbeit in ihrem Profil verwenden Das gilt auch für Kursprojekte. Außerhalb freiberuflicher Marktplätze ist das in Ordnung. Die Welt ist groß, aber Marktplätze sind eher wie In diesem Fall wäre es besser , eine eigene Portfolio-Website und einige unabhängige Konzeptprojekte zu erstellen eigene Portfolio-Website und einige unabhängige Konzeptprojekte Das wird auch eine gute Praxis für Sie sein. Oder Sie können eine kostenpflichtige Portfolio-Site-Vorlage auf dem Webflos Marketplace kaufen auf dem Webflos Es gibt auch kostenlose Vorlagen, aber kostenpflichtige Vorlagen haben natürlich bessere Designs, mehr Optionen und weniger Chancen als viele andere Freelancer auf dem Markt, und weniger Chancen als viele andere Freelancer die dieselbe Vorlage verwenden Okay, also wenn diese Bedingungen für dich funktionieren, werde ich dir im nächsten Video zeigen, wie du diese Website für dich selbst installierst werde ich dir im nächsten Video zeigen, wie du , wie du deine eigenen Inhalte hinzufügst und wie du einige Anpassungen vornimmst, um sie persönlicher zu gestalten 154. Portfolio-Website-Tour: Ich zeige Ihnen, wie Sie eine Website installieren und in Ihr Webflow-Konto verschieben Lassen Sie mich Ihnen einen Rundgang durch die Website geben und Ihnen zeigen , was das Design Thinking hinter all dem ist Ein Teil des Inhalts, den Sie auf einer Seite sehen, ist ein Platzhaltertext wie diese Überschrift Und im nächsten Video, in dem ich Ihnen zeige , wie Sie diese Website in Ihrem Webflow-Symbol installieren, werden Sie den allgemeinen Inhalt durch Ihre persönlichen Daten ersetzen Inhalt durch Ihre persönlichen Daten Die Website ist ziemlich einfach, so wie Portfolio-Websites sein sollten Wir haben nur zwei Seiten, eine Homepage und CMS-Seiten für jedes Projekt. Der Inhalt der Website ist eine Erzählung aus der ersten Person. Das ist ein Stil, den ich für Portfolio-Websites liebe. Wenn ich mir das Portfolio von jemandem ansehe, bin ich an der Person interessiert, die dahinter steht Deshalb möchte ich eine freundliche Interaktion sehen damit ich die Persönlichkeit der Person spüren kann. Sie möchten auch klare Informationen darüber erhalten, was Sie tun, was Ihr Spezialgebiet ist? Worum geht es auf dieser Website? Klare direkte Sprache. Kann ich mit dir arbeiten? Bist du für die Arbeit verfügbar? Wie kann ich mit dir arbeiten? Was sind die Schritte und so weiter? Außerdem eine sehr direkte Präsentation des Portfolios. Einige Portfolio-Websites haben es auf einer separaten Seite, und das ist einfach zu viel Arbeit. Ich muss einen Link finden, auf diesen Link klicken und warten, bis die Seite erneut geladen ist, um endlich deine Arbeit zu sehen. Deshalb zeige ich gerne Portfolio-Teile direkt nach dem Heldenbereich auf der Homepage. Ich sehe dir nicht direkt ins Gesicht. Es ist auch wichtig, wie Sie Ihre Portfolioteile präsentieren. Viele Portfolio-Websites , die ich gesehen habe, bieten eine sehr verwirrende, kreative, aber oft verwirrende Art , vergangene Arbeiten zu präsentieren Oft verwenden sie nur Vorschaubilder, keine Titel, keine Beschreibung. Sie müssen selbst zu einem Ergebnis kommen. Nicht cool, mich zum Arbeiten zu bringen. Wie Sie sehen können, ist hier alles super klar. Wir haben einen Titel. Falls wir uns nicht sicher sind, was das ist, gibt es einen kleineren Titel mit der Aufschrift „Neuestes Werk“, sodass wir uns darüber nicht verwirren lassen sollten. Eine Beschreibung des Projekts, was sehr wichtig ist, weil viele Designer das auf der Homepage nicht tun. Kunden besuchen möglicherweise nicht einmal die Projektseite. Sie möchten direkt von hier aus Informationen erhalten. Und es ist wichtig, ihnen zu sagen, um was für ein Projekt es sich handelt. Hast du es entworfen? War es Einzelarbeit, Teamarbeit? Was war deine Rolle? Wofür ist die Website und so weiter? Sie wollen diese wichtigen Informationen wissen , um zu verstehen, was zur Hölle sie sich ansehen Ich habe auch einige Tags hinzugefügt, um scannbare Informationen über die Art von Projekten wie Webflow-Entwicklung Konzeptprojekt bereitzustellen. Zu sagen, dass es sich um ein Konzept in einem Tag handelt, ist eine subtile Art, ehrlich zu sein , wenn es sich um ein Konzeptprojekt bedeutet, dass es sich nicht wirklich bezahltes Projekt handelte , das Sie für ein bestehendes Unternehmen oder ein Produkt durchgeführt haben bestehendes Unternehmen oder ein Aber du hast es entweder zum Üben oder für diesen Kurs oder aus einem anderen Grund gemacht. Sie möchten später unangenehme Enttäuschungen vermeiden , wenn Ihr Kunde Sie nach etwas über das Chat-App-Unternehmen fragt, für das Sie gearbeitet haben Und natürlich hübsche Modelle des Projekts. zeigen Es ist auch wichtig, wie Sie die Bildschirme des Projekts Der Abschnitt „Was ich mache“ ist genau das, was dort steht. Hier können Sie die von Ihnen angebotenen Dienstleistungen detaillierter beschreiben und etwas mehr anbieten. Hier ist ein professioneller Copywriting-Tipp. Wenn Sie einen überzeugenden Text schreiben möchten, sollten Sie es um sie handeln. Sprechen Sie darüber, wie Sie ihre Probleme lösen und ihr Leben verbessern werden , und nicht darüber, wie sehr Ihr Webdesign und die Chicken-Case-Ideen Ihre Leidenschaft sind Zum Schluss noch ein sehr offensichtlicher Abschnitt. Was ist ihr nächster Schritt, wenn sie mit dir zusammenarbeiten wollen? Schauen wir uns jetzt die Projektseite an. Projektseiten sind recht einfach , mit einer Beschreibung des Projekts und einem großen Screenshot. Es gibt viele verschiedene Möglichkeiten Arbeit Ihres Portfolios zu demonstrieren, aber das ist ein Stil, den ich auf meiner eigenen Website verwende, und er gefällt mir am besten. Manche Designer führen gerne eine Fallstudie durch, sodass sie das Projekt ausführlich vorstellen und den Prozess, die Ziele und die Herausforderungen ausführlich erläutern . Im Grunde eine Kurzgeschichte darüber wie das Projekt verwirklicht Dies ist ein ausgezeichneter Ansatz der all die Arbeit zeigt, die Sie investiert haben, und zeigt Ihren potenziellen Kunden hinter die Kulissen Ihres Prozesses Der Grund, warum ich diese Fallstudie nicht mache, ist einfach. Es ist eine Menge Arbeit. Der Vorteil ist nicht so groß, hauptsächlich, weil es sich um unsere Zielgruppe handelt. Als freiberufliche Webdesigner sind unsere Kunden zu 90% keine Designer-Unternehmer. Ein gutes Seitenportfolio mit einfachen Screenshots Ihres Passworts ist ausreichend Information für sie. Sie werden sowieso nicht tief in die Fallstudie eintauchen sowieso nicht tief in die Fallstudie Sie werden es zu schätzen wissen , dass es da ist, und sie werden noch mehr von Ihnen halten, aber der Arbeitsaufwand, den wir in die Erstellung der Fallstudie für jedes Portfolio investieren müssen , ist zu viel Vielleicht haben wir am Anfang genug Enthusiasten, aber später nicht mehr, und wir werden unsere Website aus diesem Grund einfach nicht auf dem neuesten Stand halten. Das ist der Punkt, an dem wir uns in Zukunft selbst verarschen werden, denn die Aktualisierung des Portfolios wird so viel Arbeit bedeuten, dass wir es einfach nicht tun werden und am Ende alte Portfolioteile haben werden, und das ist das schlechteste Ergebnis. Ihre Designs werden sich im professionellen Bereich und generell im Webdesign ändern, sodass Ihre älteren Designs veraltet und nicht modern aussehen werden. Wenn es jedoch sehr einfach zu aktualisieren ist, werden Sie eher dazu ermutigt, es auf dem neuesten Stand zu halten. Das Projekt Prey benötigt also nur einen Absatz mit Beschreibung und einen Screenshot , den Sie direkt aus Figma exportieren können, es ist so einfach Die Verlinkung zur Live-Website ist optional. Es ist sehr hilfreich für Kunden , die sich das Projekt ansehen. Sie können die Website in Aktion sehen und damit spielen und all die Arbeit sehen, die Sie geleistet haben, nicht nur Screenshots, sondern Interaktionen und all das. Allerdings habe ich dazu eine Regel, die nur auf Live-Websites verlinkt ist , auf die du stolz bist. Echte Kunden-Websites sind lebende Organismen, und wenn Sie mit einem Projekt fertig sind, kann der Kunde Dinge auf der Website ändern. Sie könnten einen neuen Abschnitt hinzufügen, Dinge selbst ändern, jemand anderen für neue Updates einstellen und so weiter. Irgendwann könnten Ihre wertvollen Designs also schrecklich aussehen, und Sie möchten keine Website präsentieren, die offen abgeschlachtet wurde Auch wenn Sie derjenige sind, der schlachtet. Nun, das ist es. Minimalistische, schöne und starke persönliche Website, um Ihre Arbeit zu demonstrieren und potenziellen Kunden Ihre Professionalität und Webdesign-Fähigkeiten zu zeigen Ihre Professionalität und Webdesign-Fähigkeiten 155. Portfolio-Website installieren: In diesem Video zeige ich Ihnen, wie Sie die Portfolio-Website in Ihrem eigenen Webflow-Konto installieren die Portfolio-Website in Ihrem eigenen Webflow-Konto So können Sie es sich zu eigen machen, Dinge ändern, Inhalte bearbeiten, sogar den Stil anpassen und als Ihre persönliche Website veröffentlichen Ich habe hier ein Schaufenster für dieses Projekt erstellt. Dies ist ein Ort, an dem Webflow-Designer ihre Projekte mit anderen teilen können Gehen Sie zu diesem Link, um auf die Seite und die Links in den Ressourcen dieses Videos zuzugreifen die Links in den Ressourcen dieses Videos Sobald Sie auf dieser Seite sind, sehen Sie diese Schaltfläche zum Klonen , mit der Sie das gesamte Projekt in Ihr eigenes Konto klonen können . Klicken Sie darauf. Es wird eine Warnmeldung angezeigt , die besagt, dass wir ein neues Projekt in unserem Konto erstellen können , da wir das Limit erreicht haben. Im Rahmen des kostenlosen Tarifs können Sie nur zwei nicht gehostete Websites in Webflow haben zwei nicht gehostete Websites in Webflow Da Sie also bereits zwei Projekte erstellt haben, die Chat-App und die TeamMP-Websites, werden Sie Sie haben drei Möglichkeiten. Führen Sie ein Upgrade auf einen kostenpflichtigen Tarif durch , erstellen Sie ein separates Konto oder löschen Sie eines der vorhandenen Projekte. Ordnung, sobald Sie das Problem mit dem Limit gelöst haben, können Sie eine neue Website erstellen. Das ist es. Jetzt haben Sie Ihre Version dieser Website. Sie wissen bereits, wie Sie hier alles tun können, was Sie tun müssen, aber lassen Sie mich Ihnen Dinge zeigen , die Sie bearbeiten sollten. Zuerst der Name. Das Logo ist nur das Etikett, also geben Sie einfach Ihren Namen ein, wie Sie möchten, ob Sie Vor- und Nachnamen oder nur Vor - oder Nachnamen möchten , was auch immer Sie bevorzugen. Es gibt auch den Namen in der Überschrift. Vergiss nicht, das zu ändern. Der Name steht sowohl in der Fußzeile als auch im Copyright-Text Geben Sie dort Ihren Vor- und Nachnamen Schließlich gibt es Namen in den SEO-Feldern. Zwei Orte: Homepage und Projektvorlage. Dann gibt es an zwei Stellen E-Mail-Links. Es gibt einen in der Navbar und einen in der Fußzeile. Sowohl die Navigationsleiste als auch die Fußzeile sind erwartungsgemäß Komponenten, sodass sie auch auf der Projektseite synchronisiert werden Da es sich um E-Mail-Links handelt, müssen Sie Ihre E-Mail-Adresse in den Link eingeben Wenn Leute darauf klicken, wird die neue E-Mail mit Ihrer Adresse vorausgefüllt. A Vergessen Sie nicht, sowohl den Text als auch die Linkeinstellung zu ändern. Das war's mit den persönlichen Daten. Der Rest ist Inhalt, den Sie nach Belieben aktualisieren können. Oder zögern Sie nicht, es so zu lassen, wie es ist, aber es wäre eine bessere Idee, ihm eine persönlichere Note zu geben. Sie können dieser Website Ihre eigenen persönlichen Farben geben , wenn Sie möchten. Die Aktualisierung ist sehr einfach. Alle Farben sind global. Das bedeutet, dass Sie die globale Farbe aktualisieren können, und alle Instanzen dieser Farbe werden sofort aktualisiert. Klicken Sie auf Bearbeiten und wählen Sie einfach eine andere Farbe auf der Karte aus oder fügen Sie den Farbcode ein. Das Gleiche können Sie mit der Highlight-Farbe tun. Das Gleiche Sie können Sie mit der Highlight-Farbe tun. Unabhängig von der Farbe, die Sie für die Hintergründe verwenden, vergessen Sie nicht, die Projektminiaturansichten entsprechend zu aktualisieren es sich um unabhängige Bilder handelt, Da es sich um unabhängige Bilder handelt, werden sie nicht automatisch mit einer globalen Farbe aktualisiert Ich habe eine Figma-Datei für diese Miniaturansichten vorbereitet, damit Sie später problemlos neue aktualisieren und exportieren können später problemlos neue aktualisieren und exportieren Lassen Sie mich Ihnen zeigen, wie ich diesen Highlight-Effekt erzeugt habe , damit Sie wissen, wie Sie ihn wiederverwenden können, wenn Sie sich dazu entschließen Der hervorgehobene Text befindet sich in einem DV-Block , der ein Überschriftenelement und einen normalen DV-Block als Highlight Highlight hat eine absolute Positionierung. Deshalb ist es hinter dem Text gestapelt. Wenn Sie ein anderes Textelement hervorheben möchten, kopieren Sie einfach das gesamte Markierungsfeld und bearbeiten Sie den darin enthaltenen Text Aufgrund dieser Hervorhebungen handelt es dieser Überschrift nicht um einen flüssigen Text. Es ist ein Haufen unabhängiger Inline-Elemente, die nebeneinander sitzen. Um die Reihenfolge zu verschieben, müssen Sie also Elemente verschieben oder die Reihenfolge im Navigator ändern. Beachten Sie, dass sich hervorgehobener Text über zwei Zeilen erstrecken kann. Versuchen Sie also, maximal zwei aufeinanderfolgende Wörter wie Webdesigner hervorzuheben, oder stellen Sie mehrere Markierungsfelder maximal zwei aufeinanderfolgende Wörter wie Webdesigner nebeneinander auf, wenn Sie wirklich eine längere Markierung benötigen. Die Link-Highlights funktionieren etwas anders. Eigentlich viel einfacher als Schlagzeilen. Es ist nur ein Box-Shadow. Und wenn Sie diesen Stil irgendwo anders anwenden müssen, wählen Sie einfach eine Klasse mit dem Namen Yellow Link aus. Und der hervorgehobene Text wird mit seinem Hover-Effekt hinzugefügt Wie Sie wahrscheinlich bemerkt haben, bietet die Seite wirklich coole Interaktionen wie diese Highlights beim Laden der Seite und diese Scrolllinie, die sich wie eine Schlange auf und ab bewegt Lass mich dir zeigen, wo diese Dinge sind. Wenn du zum Interaktionen-Menü gehst, wirst du sehen, dass es beim Laden der Seite drei Interaktionen gibt. Es gibt ziemlich einfache Interaktionen. Zuerst steuert man diese Highlights. zweite ist für das Verschieben von Inhalten und die dritte für die Scrolllinie in der Schleife. Wahrscheinlich müssen Sie nichts davon bearbeiten, außer einer Markierung, denn wenn Sie Highlight-Elemente hinzufügen, müssen Sie sie auch zur Interaktion hinzufügen. Beispielsweise wird dieses neue hervorgehobene Feld nicht animiert. Am besten fügen Sie einfach Text in die vorhandenen Markierungsfelder ein Aber wenn Sie wirklich neue hinzufügen müssen, müssen Sie Folgendes tun, damit der neue Text auch animiert wird Die Highlight-Animation ist sehr einfach. Die Box skaliert nur von 0% bis 100%. Das ist alles. Der Anfangszustand ist auf eine vertikale Skala von Null gesetzt. Und dann ändert es sich auf eins, was 100% bedeutet. Es wächst also einfach um 0-100% in seiner ursprünglichen Größe. Und das Gleiche wird für jedes Highlight unabhängig voneinander gemacht für jedes Highlight unabhängig voneinander Deshalb läuft zuerst einer und dann der zweite. Um also den dritten zu animieren, wählen Sie ihn auf der Leinwand und unter Anfangsstatus Wenn dieses Plus-Symbol erscheint, klicken Sie darauf und wählen Sie Skalierung und setzen Sie Null unter den X-Wert Aber bevor Sie das tun, deaktivieren Sie diese Sperre weil dadurch das Seitenverhältnis erhalten bleibt und das wollen wir nicht Wir wollen, dass es nur horizontal schrumpft und wächst. Jetzt müssen wir einen Endzustand hinzufügen, d. h. ihn wieder auf einen Status vergrößern, und den werden wir am Ende hinzufügen Warum? Weil wir wollen, dass es nacheinander animiert wird, nicht gleichzeitig. Deaktivieren Sie erneut die Sperre und setzen Sie eins unter den X-Wert. Spielen Sie die Animation ab, um zu sehen, wie sie funktioniert. Funktioniert gut, wir müssen nur die Lockerung an andere anpassen. Ich verwende Quad und 0,6 Sekunden. Also schau dir die Vorschau an. Ich bin perfekt. Was andere Interaktionen betrifft, müssen Sie wahrscheinlich nichts ändern, aber wenn Sie dies tun, sind alle Einstellungen sichtbar, sodass Sie sehen wie sie eingerichtet sind und was geändert werden muss Um diese Interaktionen zu finden, müssen Sie ein korrektes Element auswählen Die Interaktion erscheint also im Panel. Interaktionen, die durch das Laden der Seite ausgelöst werden , erscheinen ständig, unabhängig davon, welches Element Sie ausgewählt haben jedoch einen Element-Trigger haben, müssen Sie das genaue Triggerelement auswählen. Um diese Interaktionen zu finden, können Sie sie im Navigator sehen. allen Triggerelementen befindet sich Neben allen Triggerelementen befindet sich dieses Blitzsymbol. Das bedeutet, dass es eine Interaktion mit diesem Element gibt. Zum Beispiel Button-Wrapper. Dort wird die Hover-Interaktion für die Schaltfläche eingerichtet Ordnung, die letzte wichtige Sache, die Sie wissen müssen, ist, wie man Projekte verwaltet Es handelt sich um CMS-Elemente, sodass Sie sie problemlos im CMS verwalten können. Ich füge ein neues Projekt hinzu, damit Sie sehen können, was was ist. Name, Beschreibung, ziemlich einfach. Es gibt zwei Bilder, die Sie für neue Projekte generieren müssen , ein Vorschaubild für die Homepage und den Vollbildmodus des Projekts Der Vollbildmodus ist einfach. Gehen Sie in Figma zum Design Ihrer Seite und exportieren Sie den gesamten Frame Laden Sie es dann einfach in das entsprechende Feld hoch, aber achten Sie darauf, das Bild zu komprimieren sonst wird es eine sehr große Datei Was das Vorschaubild angeht, gehen Sie zu dieser Figma-Datei, die ich mit Ihnen geteilt habe , und verlinken Sie sie in den Ressourcen Es gibt eine Seite namens Assets, der Sie Ihre Miniaturansichten erstellen können Übrigens, Sie werden hier sehen es einen Favican und einen Webclip Verwenden Sie dies, um Ihre eigenen zu generieren und sie in den Einstellungen Ihres Projekts zu aktualisieren Ziehen Sie das Bild hinein. Und positionieren Sie es so, wie Sie möchten. Und das Gleiche gilt für die hintere Gruppe. Exportieren Sie dann das Vorschaubild und laden Sie es in CMS hoch. Dann haben Sie eine Live-Site-URL. Wenn Sie dieses Feld leer lassen, wird der Link nicht angezeigt, sodass Sie es problemlos leer lassen können. Stellen Sie sicher, dass dieser Schalter aktiviert ist. Dies dient dazu, dass das Projekt auf der Homepage angezeigt wird. Ich habe das hinzugefügt, damit Sie die Möglichkeit haben, jedes Projekt auf der Homepage zu deaktivieren oder zu aktivieren. Falls du dich fragst, wie ich das gemacht habe, es sind Filter. Also habe ich diesen Schalter erstellt und auf der Homepage dann den Filter für die Sammlungsliste erstellt, der besagt, dass diejenigen angezeigt werden, für die der Umschalter aktiviert Ziemlich einfach. Dann haben Sie diese drei Tags, die unter dem Titel angezeigt werden. Und das ist es. Sobald Sie gespeichert haben, gehen Sie zur Startseite. Sie können sehen, dass das neue Projekt über den anderen angezeigt wird. Und es verlinkt auf die Projektseite, die ebenfalls fertig ist. Das ist alles, was Sie tun müssen, um weitere Projekte hinzuzufügen. Diese Projekte auf der Homepage sind übrigens eine Sammlungsliste. Erinnerst du dich an die? Der Inhalt ist mit den CMS-Feldern verknüpft. Außerdem wurde auf die Sammlungsliste eine Sortierreihenfolge angewendet. Ich habe es auf der Grundlage der letzten Aktualisierung des CMS-Elements vom neuesten zum ältesten ausgewählt. Wenn Sie diese Sortierreihenfolge in eine andere Reihenfolge ändern möchten, können Sie dies hier tun, z. B. vom ältesten zum neuesten. Nun, das sind alle wichtigen Dinge, die Sie über diese Seite wissen müssen. Wenn Sie nicht weiterkommen, lassen Sie es mich wissen und ich helfe Ihnen weiter. 156. Online Arbeit finden: Zur Arbeit und wo man sie findet. Es gibt viele Möglichkeiten für einen freiberuflichen Webdesigner, Arbeit zu finden Die allererste und naheliegende Option Online-Plattformen wie freelancer.com und natürlich org.com oder lokal in der Stadt, in der Sie leben, und sich mit Leuten aus der Branche vernetzen, sich mit den Startups vernetzen, zu den Tech-Konferenzen gehen, zu den Tech-Konferenzen gehen, Freundschaften mit anderen erfolgreichen Webdesignern die Ihnen Arbeit schicken können, denn was oft sind Online-Plattformen wie freelancer.com und natürlich org.com oder lokal in der Stadt, in der Sie leben, und sich mit Leuten aus der Branche vernetzen, sich mit den Startups vernetzen, zu den Tech-Konferenzen gehen, Freundschaften mit anderen erfolgreichen Webdesignern schließen, die Ihnen Arbeit schicken können, denn was oft passiert Bei Webdesignern ist es so, dass sie ausgebucht sind, weil, weißt du, ein Designer nur eine Website gleichzeitig erstellen kann, oder? Sie können nicht zehn, 20 Websites gleichzeitig erstellen. Gute Designer bekommen also sehr leicht ein Buch, und was passiert dann, wenn sie Arbeiten an ihre Freunde oder andere Leute schicken , die sie ihren Kunden empfehlen würden und so weiter. Auch LinkedIn und reguläre Jobbörsen wie Supercruter bieten mehr als genug Möglichkeiten, Arbeit zu finden Und wenn Sie das googeln, werden Sie immer mehr Optionen finden Die Frage ist, welche dieser Optionen ist der perfekte Ort, um nach Arbeit zu suchen? Dinge wie deine aktuellen Fähigkeiten, deine Persönlichkeit oder deine Erfahrung, wo du lebst, die Stadt , in der du lebst. All diese Dinge werden bestimmen, welche dieser Optionen zu diesem Zeitpunkt perfekt zu Ihnen passt. Ich kann Ihnen sagen, welche für Sie am besten geeignet ist . Niemand kann das, aber der beste Ansatz ist, einfach einen nach dem anderen auszuwählen und einfach die Liste durchzugehen. In diesem Video werde ich über Online-Plattformen und die Suche nach Arbeit auf Online-Plattformen sprechen Online-Plattformen und die . Ich gebe dir einen allgemeinen Überblick über die größten. Davon gibt es viele. Es gibt Upwork, es gibt Glasfaser, es gibt freelancer.com. Leute pro Stunde, oberste Kachel und so weiter. Die Liste ist endlos. Und wenn Sie es googeln, werden Sie immer mehr finden. Und jedes Jahr werden natürlich immer mehr dieser Plattformen auftauchen. Der Wettbewerb ändert sich, da einige von ihnen ihren Spitzenplatz verlieren und andere sie ersetzen werden oder neue auftauchen. Zuerst Upwork. Hier habe ich meinen Erfolg gefunden Ich habe genug Arbeit bei Upwork gefunden, um Vollzeit beschäftigt zu sein. Upwork ist riesig. Es ist eine Aktiengesellschaft, das heißt, sie wird an der Börse gehandelt Ich denke, es ist die erste Freelancer-Plattform, die an die Börse geht. Arbeitsplätze gibt es hier in Hülle und Fülle, was bedeutet, dass der Wettbewerb Ich habe ein spezielles Video über Upwork und darüber, wie man damit erfolgreich sein kann, also werden wir es dort ausführlich behandeln Ich werde dir einige Strategien beibringen, wie du erfolgreich sein kannst, und einige häufige Fehler, die du vermeiden solltest Dann haben wir Fiber, was bei Upwork etwas anders ist , wenn Kunden Jobs posten und Freelancer bieten, aber bei Fiber posten Freelancer Dienstleistungen und Kunden kaufen Zum Beispiel sagt dieser Freelancer hier, dass er eine responsive Webflow-Website für 200$ entwerfen wird eine responsive Webflow-Website für 200$ entwerfen Und er bietet drei verschiedene Pakete an: Basic, Standard und Premium Mir gefällt dieser serviceorientierte Glasfaseransatz sehr gut. Ich habe tatsächlich zum ersten Mal freiberuflich auf Glasfaser gearbeitet. Das ist schon eine Weile her. Ich habe Lebenslauf-Designs für fünf Dollar gemacht. Damals konnte man bei Glasfaser für diesen Preis nur fünf Dollar verlangen und einige Upgrades anbieten. Aber als Grundpreis für jeden Service, der aufgeführt war, gab es fünf Dollar, daher der Name Glasfaser. Seitdem haben sie ihren Ansatz geändert und jetzt können Sie Ihre Dienstleistungen so festlegen, wie Sie möchten. Ich habe oft Freelancer auf Glasfaser engagiert , um schnelle und kleine Übersetzungsaufträge, Videobearbeitung und ähnliches zu erledigen Videobearbeitung und ähnliches Als Kunde ist es großartig, einfach eine Dienstleistung zu kaufen , die wie ein komplettes fertiges Produkt ist Keine Verhandlungen und all das. Per, Details schicken, ein paar Tage auf Ergebnisse warten und fertig. Sie legen sogar bestimmte Liefertermine fest, die Sie einhalten müssen , nachdem Sie alle Informationen und Unterlagen des Kunden erhalten haben. Wenn ich hier also einen Webdesign-Service erstellen würde, würde ich wahrscheinlich Folgendes persönlich tun. Ich würde sagen, ich werde eine Website für eine bestimmte Art von Unternehmen erstellen . Zum Beispiel eine Website für Freiberufler oder eine Portfolio-Website für Buchhalter usw. Ich werde viele solcher Auftritte veranstalten. heißt es hier, dann erstelle ich ein paar Vorlagen oder verwende einfach Vorlagen vom Webflow-Marktplatz Es gibt viele schöne Vorlagen, die auf Webflow verkauft werden, und es gibt sogar ziemlich tolle kostenlose Ich würde die Kosten für Vorlagen in den Gesamtpreis einrechnen, vielleicht kostenlose Vorlagen für die Grundpreise verwenden und dann kostenpflichtige Vorlagen zu Premium-Preisen anbieten Und wenn die Leute dann meinen Auftritt kauften, ließ ich sie wählen welche Vorlage sie wollen, und bot Farbe, Typ oder andere Anpassungen an, die auf ihrer Marke basieren Auf diese Weise wissen die Kunden im Voraus, was sie bekommen. Keine Diskussion über Designs, und ich muss nicht eine ganze Website von Grund auf neu entwerfen und erstellen Ich vereinfache den Prozess hier natürlich stark. Ich könnte einen ganzen Kurs nur darüber machen. Denken Sie daran, dass Sie einen kompletten, vorgefertigten Service für Ihre Kunden erstellen würden . Sie müssen viel darüber nachdenken , um ein wirklich schönes Paket zu erstellen, und wir werden einige Versuche und Irrtümer unternehmen , bis Sie es richtig gemacht haben. In der Tat ist es genau das, was ich mit der Gestaltung von Lebensläufen gemacht habe. Ich habe ihnen ungefähr fünf Lebenslaufvorlagen zur Auswahl gegeben. Sie würden es wählen, dann würde ich ihre Daten eingeben und fertig. Niemand hatte sich jemals über das Design beschwert , weil sie im Voraus wussten , was sie bekommen würden Dann haben wir LinkedIn. Dies ist keine typische Freelancer-Plattform wie Upwork oder Es funktioniert ganz anders. Auf LinkedIn veröffentlichen Kunden normalerweise keine kleinen freiberuflichen Jobs und warten auf Angebote. Stattdessen geht es eher darum, sich zu positionieren und entdeckt zu werden oder Menschen direkt zu erreichen Es gibt verschiedene Möglichkeiten, hier zu arbeiten. Zunächst können Sie den Jobbereich verwenden und nach Rollen wie Webdesigner suchen oder LinkedIn selbst Jobs auf der Grundlage Ihres Profils empfehlen lassen. Bei einigen davon handelt es sich um freiberufliche oder vertraglich vereinbarte Stellen, aber bei vielen handelt es sich um Vollzeitstellen . Ich würde Anfängern definitiv empfehlen, dies in Betracht zu ziehen. Als Anfänger möchten Sie Ihre Optionen so weit wie möglich erweitern und sich nicht auf freiberufliche Tätigkeiten beschränken Wenn Sie in einer großen entwickelten Stadt leben, werden Ihre Möglichkeiten besser sein, da sich die Jobs hier eher auf lokale Mitarbeiter konzentrieren. Aber es gibt auch abgelegene Optionen, und Sie können sie Land für Land erkunden Beachten Sie jedoch, dass selbst abgelegene Standorte häufig einen Mitarbeiter vor Ort benötigen, der im selben Land ansässig ist. Wenn Sie also in einem Industrieland ansässig sind, wird dies Ihre Optionen etwas einschränken. Aber es ist immer noch nicht zu rabattieren. Viele meiner Schüler fanden Jobs im Ausland Der Vorteil der Suche nach einer festeren Stelle im Vergleich zu freiberuflichen Tätigkeiten ist, dass Sie nur einmal Glück haben müssen Selbst die Strategie der Nadel im Heuhaufen ist also einen Versuch wert. Wenn Sie in U ansässig sind, begrenzt dies landesweit die Kosten für Sie Für europäische Unternehmen ist es einfach und üblich, Verträge in der gesamten EU Bei so vielen Stellen werden Bewerber aus der gesamten EU zugelassen . Dies ist jedoch nicht der Hauptvorteil von LinkedTI. Die wahre Chance liegt in der Öffentlichkeitsarbeit. Viele Freelancer auf LinkedIn suchen nach Geschäftsinhabern, Gründern, Startups oder bestimmten Nischen wie Zahnärzten, Salons oder Agenturen und wenden sich mit ihren Dienstleistungen an sie. Oder sie suchen nach Beiträgen von anderen, die nach einem Webdesigner oder einer Website-Entwicklung suchen , und senden diesen Leuten dann direkt eine und senden diesen Leuten dann direkt Viele meiner Schüler nennen LinkedIn als ihre Arbeitsquelle, lohnt sich also auf jeden Fall, es zu erkunden. Wenn ich heute anfangen würde, würde ich LinkedIn auf jeden Fall zusammen mit mindestens einer freiberuflichen Plattform nutzen zusammen mit mindestens einer freiberuflichen Plattform Diese drei bieten definitiv die meisten Möglichkeiten und sollten für Sie die erste Anlaufstelle sein, aber es gibt noch einige andere Plattformen, die es wert sind, erwähnt zu People per hour ist quasi eine Mischung aus Fiber und Upwork Kunden können Freelancer direkt finden, indem sie nach bestimmten Fähigkeiten suchen , dann Profile von Freelancern überprüfen und sich direkt mit ihnen in Verbindung setzen Außerdem können sie genau wie Upwork und Freelancer Projekte posten und Vorschläge von Freelancern einholen Und genau wie bei Fiber können Sie hier Dienste posten. Sie nennen es Angebote auf Glasfaser, es heißt Gig. Ich habe PeoplePerHour sowohl als Freelancer als auch als Kunde genutzt als Freelancer als auch als Kunde Ich habe hier damals einige Lebensläufe entworfen, und ich habe hier mehrmals Webdesigner und Webentwickler engagiert mehrmals Webdesigner und Webentwickler Top Tell ist eine Website für Freiberufler, die einen ganz anderen Ansatz verfolgt als andere Diese Seite wird für dich noch ein bisschen früh in deiner Karriere sein , aber ich werde sie trotzdem hier reinwerfen , damit du weißt, was da draußen ist Top Tell hat ein sehr strenges Auswahlverfahren für Freelancer Sie führen Interviews, Challenges und Portfolio-Reviews durch, bevor sie dich auf der Plattform akzeptieren Sie wollen ein Top-Talent dabei haben, daher der Name Top Ten. Wie sie behaupten, werden nur 3% der Bewerber ausgewählt. Ziehen Sie Toptal also in Betracht, wenn Sie sich in Ihren Fähigkeiten hervorgetan haben. Dies bedeutet natürlich, dass Kunden, die auf dieser Website nach Freelancern suchen, nach einem Premium-Service suchen einem Premium-Service suchen und sich nicht scheuen, entsprechend zu bezahlen Wie Sie sehen, gibt es auch auf Online-Plattformen Orte, an denen Sie hochbezahlte Arbeit finden Insgesamt sind die Möglichkeiten online endlos, aber auch der Wettbewerb ist hart, da es viele Webdesigner gibt Es ist die ganze Welt, die um die Dienste konkurriert. Aber lassen Sie sich nicht entmutigen. In Wirklichkeit sind die meisten Webdesigner und die meisten Talente , die sich auf diesen Plattformen bewerben , schrecklich Sind nicht einmal mittelmäßig. Sie sind unter mittelmäßig. Kunden haben tatsächlich auch Schwierigkeiten, gute Talente Oft fragen mich meine Kunden, wenn sie zu mir kommen und ich beschäftigt bin und ich vielleicht ausgebucht bin und ich nicht in der Lage und ich beschäftigt bin und ich vielleicht ausgebucht bin und ich nicht in der Lage bin, neue Projekte anzunehmen: Okay, kennen Sie dann noch jemanden, den Sie empfehlen könnten , weil wir auf diese Seite gegangen und niemanden finden konnten, weil es einfach so viel Konkurrenz gibt und da draußen einfach so viel Lärm passiert. Dass es ein bisschen schwierig ist, das Talent für sie zu finden. Und die Sache mit dieser Plattform ist, dass, weil jeder mitmachen kann und sie offen die Welt ist und die Welt verdammt groß ist, dass so viele Leute mitmachen, ohne auch nur über irgendwelche Fähigkeiten zu verfügen ohne auch nur über irgendwelche Fähigkeiten Die Leute werden zum Beispiel behaupten , dass sie Webdesigner sind und alles tun würden , noch bevor sie einen Webdesign-Kurs besucht haben, oder? Wenn du dir vorstellen kannst, kommt irgendein Kind oder irgendjemand hierher und denkt, weißt du, ich werde online eine Menge Geld verdienen, und sie fangen an, naja, Webdesign zu machen. Ich habe gerade eine Square Space-Site für jemanden installiert oder ich habe gerade gelernt , wie man ein WordPress-Theme installiert. Und jetzt bin ich ein Webdesigner oder ein Webentwickler, oder? Und für jemanden wie Sie, der so viel Arbeit hineingesteckt hat , und seien wir ehrlich, war dieser Kurs ziemlich umfangreich. Wenn Sie also Arbeit investieren und wenn Sie daran arbeiten , wenn Sie das ernst nehmen, dann werden Sie nicht mehr aufzuhalten sein Und wenn Sie guten Service bieten und guten Service bieten und mit dem Feinschliff und dem Prozess , den Sie bereits festgelegt haben , eine großartige Website , Portfolios zeigen und einige andere Tipps und Tricks, die ich Ihnen später in diesem Teil des Kurses beibringen werde, werden Sie der Konkurrenz meilenweit voraus sein , die dort nur herumalbern, nicht Sie wissen, was sie in Wirklichkeit tun, und das sind nur zufällige Leute auf der ganzen Welt 157. 151 Arbeitsstudios finden: Online Arbeit zu finden ist nicht der einzige Ort. Wir haben auch vor Ort viele Jobs zur Verfügung. An einem solchen Ort wären Studios. Das wären also Marketingagenturen, Digitalagenturen, Kreativagenturen, Designstudios. Ich weiß es nicht. Es gibt viele verschiedene Namen, die sie haben. Im Grunde sind dies Unternehmen, die Webdesign und digitale Arbeit für ihre Kunden erledigen. Wer auch immer Privat - oder Firmenkunden sein kann, oder? Wenn es sich also um Werbeagenturen handelt, z. B. die Marketingagenturen, werden sie von einem großen Unternehmen beauftragt , dass sie eine Landingpage oder Website benötigen . Also diese Art von Studios , die sie einstellen, sie haben internes Personal, oder? Offensichtlich haben sie interne Designer und interne Entwickler und all das. Aber was passiert, sind viele mittelgroße , mittelgroße Agenturen wie diese und Studios. Sie haben eine kleine Anzahl von Mitarbeitern im Haus und sie haben quasi eine Armee von Freelancern in Florida Sie machen den größten Teil ihrer Arbeit. So funktionieren sie also. Mein größtes Engagement war tatsächlich in einem solchen Studio und wir haben lange gearbeitet und sie haben eine Menge Arbeit für mich geschickt und ich habe viel von ihnen gelernt. Und das bedeutet nicht , dass es lokale Studios sein müssen , die aus verschiedenen Ländern, verschiedenen Städten und sogar verschiedenen Kontinenten stammen können . Ich selbst arbeite mit dem Studio , das in Australien war und wirklich, sehr weit von meinem Wohnort entfernt war, nämlich in Europa und Portugal. Wie Sie sich nun an die Studios wenden können , hängt von Fall zu Fall ab, aber hier sind einige Strategien , wie Sie sie ansprechen können Ich habe einen Freund, der Illustrator ist und er hat diesen Ansatz Aber als ich ihn einmal gefragt habe , weißt du, wie bekommst du deine Kunden? Weil er nicht auf Freelancing-Plattformen in Florida arbeitet. Und er sagte mir, dass er sie nur spammt. Er hat also diese E-Mail-Liste verschiedenen potenziellen Kunden wie Agenturen, Unternehmen, Werbeagenturen , die Bücher oder Zeitschriften veröffentlichen , weil das die Art von Kunden sind, mit denen er zusammenarbeitet. Und jedes Mal, wenn er Arbeit braucht, sendet er ab und zu E-Mails mit einer E-Mail-Software. Und im Grunde wird er nach Arbeit fragen und sagen, Oh, braucht ihr einen Illustrator oder so etwas? Und ich bin mir nicht sicher, was genau die Steuerzahler sind und wie er vorgeht, aber ich weiß, dass er sich erkundigt und fragt, ob sie einen Illustrator brauchen Und was passiert, ist manchmal eher genau zu der Zeit, benötigt für die eines dieser Unternehmen genau zu diesem Zeitpunkt einen Illustrator Also kommen sie zu ihm zurück und sagen, oh ja, wir brauchen tatsächlich einen Illustrator Er wird angestellt. Und es ist ein großartiger Ansatz, weil das dem anderen, dem anderen, Zeit spart . Sie müssen also keinen Job auf Freelancing-Plattformen oder wo auch immer veröffentlichen , sondern Portfolios verschiedener Leute durchgehen und sie besser interviewen als all das Es ist wirklich einfach, wenn schon jemand genau zur richtigen Zeit zu dir gekommen ist. Jedes Designstudio wird seinen eigenen Designstil haben , den es auf Websites verwendet . Dort werden wir spezifische Herangehensweisen mit den Designs haben . Sie könnten ein bisschen mehr auf Illustrationen basieren vielleicht mehr Fotografie, vielleicht mehr Schriftbasis und layoutbasiertes Design sein. Also, wenn Sie sich dem nähern, wo Sie sich dafür entscheiden, das zu sich die Designstudios ihre Arbeitsbeispiele an und die meisten von ihnen werden offensichtlich ihr Portfolio auf ihrer Website haben, sie durchgehen und verstehen und irgendwie festmachen , welche Art von Stil sie in ihrem Ansatz verwenden, welche Sie dem Stil anpassen oder Ihr Portfolio so verfeinern, dass Sie Ihr Portfolio so verfeinern überbrücken diese Lücke zwischen Ihrer Arbeit und ihrem Portfolio, damit es so gut wie möglich zusammenpasst Weil wir wussten, dass das für die Studios gilt. Sie werden sehen, ob sie weniger als Dutzende und Hunderte verschiedener Kandidaten haben Dutzende und Hunderte verschiedener , nach denen sie suchen. Offensichtlich werden sie sich zu jemandem neigen und ihn auswählen, der wirklich zu ihrem Stil passt Weil sie wissen , dass sie es tun werden, Sie es einfach in ihr Design und in ihren Arbeitsablauf integrieren. Sie müssen dich also nicht schulen, wenn du wie ein Illustrator bist, und sie mögen eher Websites, die auf Fotografie basieren Jetzt müssten sie dich umschulen, wie man fotografiert, oder sie müssen deinen Designstil komplett ändern und modifizieren also diese Lücke zwischen Ihrem Portfolio und Ihrem Portfolio erhöhen Sie Ihre Chancen von ihnen eingestellt zu werden. Als ich das Unternehmen leitete, hatten wir das online veröffentlicht und wir hatten eine ganze Reihe von Kandidaten, die sich offensichtlich dafür bewarben. Aber einer dieser Typen, einer der Kandidaten, tauchte vor unserer Haustür auf Es ist gerade in unserem Büro aufgetaucht und ich hatte einen gedruckten Lebenslauf und einen Lebenslauf von ihm. Und das hat er gerade gegeben. Er sagte, ich werde Ohio mögen. Ich habe mich für diese Stellenanzeige beworben und wollte sie nur persönlich in meinen Lebenslauf aufnehmen. Und ich war so, ich war sehr überrascht, aber auch sehr beeindruckt zu sehen, wie diese Leute irgendwie selbstbewusst und dreist waren, um zu kommen und sich persönlich für die Stelle zu bewerben Und als ich 200 verschiedene Bewerbungen durchgehen musste , fiel eine Person offensichtlich wirklich auf , weil Sie gekommen sind. Niemand sonst hat es getan und niemand sonst hat etwas anders gemacht. Und komischerweise würde ich seine Bewerbung wahrscheinlich wegwerfen , wenn er nicht gekommen wäre, weil Lebenslauf und seine Bewerbung nicht aussagekräftig genug waren und seine Erfahrung nicht gut genug für das war , was wir suchen Aber weil du aufgetaucht bist, dein Amino unvergesslich ist und ich dieses Selbstvertrauen irgendwie mag und er eine proaktive Einstellung hat und er das Interview bekommen hat, hat er den Interviewteil übersprungen und ist in die letzte Phase gekommen, letzte Auswahlphase für die drei anderen Finalisten Und das hat er nur verstanden, weil er aufgetaucht ist. Manchmal reicht es aus, einfach aufzutauchen und Ihr gedrucktes Portfolio abzugeben, weil das nicht viele Leute tun. Leute, die Mitarbeiter einstellen, sind beschäftigt und schätzen jeden zusätzlichen Schritt , den der Kandidat unternimmt. Niemand kann Sie der Stellenausschreibung näher bringen. Die Leute in diesen Studios LinkedIn und Facebook nutzen, du kannst definitiv Leute finden in diesen Studios arbeiten, und dann direkt mit ihnen in Kontakt treten oder andere soziale Netzwerke nutzen, wahrscheinlich wie Facebook, Instagram, Twitter, und ihnen Direktnachrichten schicken. Ich selbst habe das noch nie gemacht, aber ich kenne viele Freelancer, sie machen solche Dinge Sie verbinden sich mit Menschen in dir, sogar mit denen, die tatsächlich die Manager oder Gründer der Studios einstellen . Wenn Sie diese Art von Person sind und wenn Sie leicht mit Fremden in Kontakt treten können , probieren Sie es aus. Ich bin nicht so ein Mensch und es funktioniert nicht für mich, aber vielleicht ist es gut für dich. Also wirf es einfach als Idee raus 158. Arbeitssuche: Netzwerken: andere naheliegende, aber oft übersehene Möglichkeit Arbeit zu finden, ist das Netzwerken. In jeder Großstadt gibt es Schwärme von Unternehmern und Startups, die sich und versuchen , ihr Geschäft zum Laufen zu bringen, und sie alle Sie befinden sich in einem sehr guten Markt. Jedes Unternehmen, ob klein oder groß, international oder lokal, auch einzelne Profis wie Sie und ich, Fotografen, Trainer, CMI-Organisatoren, sie alle benötigen eine Website Wo vernetzt ihr euch? Fangen Sie mit dem Treffen an. Wenn Sie es noch nie benutzt haben, ist Met Up ein Ort, an dem Menschen verschiedene Veranstaltungen zu einem bestimmten Thema oder Thema organisieren . Diese Gruppe, Lisbon UX, organisiert zum Beispiel verschiedene Treffen und Veranstaltungen zum Thema Design in meiner Stadt Dolmetscher, Startups und andere Designer sind sehr wertvolle Verbindungen für Sie, und sie gehen oft zu solchen Meetups weil sie ihre eigenen Meetups veranstalten und ihre eigenen Vorträge und Workshops und verschiedene Arten von Veranstaltungen organisieren Workshops und verschiedene , um die richtige Zielgruppe anzuziehen, die für Sie als Ansprechpartner nützlich sein könnten Ich habe mal bei einer solchen Veranstaltung einen Auftritt bekommen. Ich habe einmal an einem Workshop teilgenommen dem es darum ging, meine Website mit einem Wireframe zu Wirklich, ich habe tatsächlich einen Workshop zu diesem Thema besucht. Nicht dass ich lernen müsste, aber ich dachte, weißt du was? Es wird Spaß machen. Und was weißt du? Ich habe einen Auftritt daraus gemacht. Selbst wenn Sie bei Mitaps auf die richtige Crowd treffen, werden Sie feststellen, dass viele von ihnen nicht über ein ausreichendes Budget verfügen , um Sie für Website-Projekte gut zu bezahlen Es ist gut, wenn Sie anfangen und etwas Geld für die Erfahrung und das Netzwerk opfern, aber in einer späteren Phase ist das nicht die beste Option Ein besserer Ort, um größere Fische zu finden, sind Konferenzen, Tech- oder andere Startup-Konferenzen Startups gehen oft an solche Orte, um ihr Produkt auszustellen oder Investoren oder Kunden für ihr Unternehmen zu finden. Diese Konferenzen sind kostenpflichtig, sodass sie zu einem späteren Zeitpunkt besser geeignet sind, sobald Sie Ihre freiberufliche Tätigkeit aufgenommen haben und sich ein wenig für das Marketing leisten können In vielen Städten gibt es Gründerzentren, und du kannst überprüfen, ob deine Stadt solche Inkubatoren hat, denn an diesen Orten viele Startups zusammengebracht, werden viele Startups zusammengebracht, und dann organisieren sie immer verschiedene Veranstaltungen und Demonstrationen und ähnliches, und in diesem Ökosystem und dieser Umgebung gibt es viele Jobs und freiberufliche Arbeit . Und viele Leute, die Webdesigner, Designer oder Entwickler sind , das sind Menschenmassen und gute Verbindungen, sind Menschenmassen und damit Sie sich weiterentwickeln und wachsen können. Und wenn du Netzwerke hasst, dann tu es nicht. Investieren Sie Ihre Zeit und Mühe in etwas, das besser zu Ihnen und Ihrer Persönlichkeit passt. Ich selbst, ich vernetze mich nicht gern. Ich kaue lieber auf Glas, als mit Leuten zu reden. Es ist immer am besten, sich auf etwas zu konzentrieren , das bei Ihnen ankommt Ich habe eine Regel für dich. Tun Sie nichts, was Sie dazu bringt, Webdesign zu hassen. mögen und Spaß daran Es ist entscheidend für Ihren Erfolg, dass Sie Webdesign Ein besserer Faktor, um Sie profitabel und erfolgreich zu machen als jedes Talent oder jede schicke Hochschulausbildung Und Ihre Freude am Webdesign hängt von vielen damit verbundenen Dingen ab, denn wie bei jedem anderen Job geht es um viel mehr, als sich nur hinzusetzen und zu entwerfen, oder? Es geht darum, Kunden zu suchen und zu verhandeln, Vorschläge zu schicken und all die Treffen und all diese Dinge. Machen Sie also möglichst viele dieser Dinge auch unterhaltsam. 159. 153 Arbeitsschlussfolgerung finden: Dies sind einige der vielen Möglichkeiten, die Ihnen zur Verfügung stehen, um eine freiberufliche Arbeit zu finden. Ich wollte dir all diese Optionen zeigen weil Freelancer manchmal vergessen, dass es mehr Orte gibt, Arbeit finden können als nur Upwork Ich habe nicht alle behandelt und könnte ich unmöglich tun. Jobs kommen oft von unerwarteten Orten, aber hier ist, was Sie tun sollten. Setzen Sie sich so vielen Möglichkeiten wie möglich aus. Klopf an so viele Türen wie möglich, wie bei allem anderen im Leben, du musst dein Glück so oft wie möglich versuchen, wie Wayne Gretzky es ausdrückte, du verfehlst 100% der Schüsse, die du nicht Okay, als nächstes tauchen wir tief in Upwork ein, 160. Upwork im Überblick: In den Jahren, in denen ich als Freelancer an Upwork gearbeitet und andere Freelancer eingestellt habe, habe ich einige interessante Tipps und Tricks gesammelt, die ich für mich selbst verwendet habe, um bei Upwork erfolgreich zu sein, und ich möchte diese Tipps mit dir teilen damit du nicht jahrelanges Ausprobieren verschwenden musst , um herauszufinden , wie Also habe ich all diese Tipps in verschiedene Videos gesteckt und sie irgendwie zu verschiedenen zusammengestellt Aber bevor wir zu diesen Tipps kommen, möchte ich Ihnen einen kurzen Überblick über Upwork geben So funktioniert Upwork. Ein Kunde veröffentlicht einen Job, den er erledigen möchte, z. B. das Entwerfen und Erstellen einer Website für ein Startup Sie geben Details, manchmal ein vordefiniertes Budget und manchmal ohne ein definiertes Budget, als Stundensatz an. Die Freelancer bieten auf den Job senden Vorschläge mit Preisen Dann reagiert der Kunde auf Vorschläge und beginnt ein Gespräch mit Freelancern, die ihnen gefallen Oft führen sie Interviews während des Telefonats. Schließlich treffen sie ihre Wahl und vergeben den Job an eine Person. Der Vertrag und die Abrechnung werden alle über die Plattform verwaltet. Wenn Sie mit einem Stundensatz arbeiten, werden Sie die Zeit über deren Anwendung verfolgen . gesamte Zeit wird automatisch protokolliert und dem Kunden automatisch in Rechnung gestellt, und die Zahlungsmethode des Kunden wird automatisch belastet Das ist großartig, weil Sie sich keine Gedanken über Abrechnung, Geldüberweisungen und all das Nutzung von Upwork ist kostenlos, es werden jedoch Provisionen von dem, was Sie verdienen, erhoben Nehmen wir zum Beispiel an, Sie stellen einem Kunden insgesamt 5.000$ in Rechnung. Upwork behält 10%. Die Suche nach Jobs ist ziemlich einfach. Sie können Jobs nach Schlüsselwörtern, Fähigkeiten oder anderen Filtern suchen. Die richtige Suche wird wichtig sein, um die richtigen Jobs zu finden. Zu den Schlüsselwörtern für Sie gehören Webdesign, Webdesign, Webflow, Ausleihseite, Webseite, responsive Website und so weiter. Vergiss nicht, Seiten auszuleihen. Diese sind sehr gefragt und einfacher als Websites. In Bezug auf Design und Entwicklung sind Leihseiten alle dieselben Webseiten , die wir bisher gemacht haben. Es ist nur eine einzelne Seite statt einer ganzen Website. Schlüsselwörter sind nicht die einzige Art der Suche. Oft sind sie nicht die beste Methode, da sie alles zurückgibt , was Ihr Keyword irgendwo in der Stellenausschreibung erwähnt . Die Suche nach Fähigkeiten kann in solchen Fällen etwas zielgerichteter sein. Sie können das über die erweiterte Suche tun. Wählen Sie eine Fähigkeit aus der Drop-down-Liste und suchen Sie, aber eine Fähigkeit der anderen. Andernfalls wird nach Jobs gesucht , die allen von Ihnen ausgewählten Fähigkeiten entsprechen. Dabei handelt es sich um Fähigkeiten , die bei der Erstellung des Jobs ausgewählt wurden. Daher kann es sein, dass sie etwas genauer als nur Stichwörter in der Beschreibung. So sieht die übliche Stellenausschreibung aus. Bei diesem Projekt handelt es sich um ein Projekt mit Stundensatz. Es zeigt sich genau hier. Die Stellenbeschreibungen bei Upwork sind meistens ziemlich schlecht Oft werden nicht viele detaillierte Informationen über das Projekt bereitgestellt Mitarbeiter könnten einige Schulungen zur Veröffentlichung geeigneter Stellenbeschreibungen gebrauchen , um die richtige Zielgruppe anzusprechen. Um sich für die Stelle zu bewerben, müssen Sie einen Vorschlag einreichen. So sieht das Formular zur Einreichung von Vorschlägen aus. Sie wählen Ihre Tarife aus, die Sie für diesen Job vorschlagen. Die Abrechnungsart wird vom Kunden selbst festgelegt. Wenn es sich also um eine stündliche Abrechnung handelt, können Sie nur Stundensätze vorschlagen. Bei Pauschalpreisen müssen Sie nur Pauschalpreise vorschlagen. Ein Anschreiben ist eine Nachricht , die Sie an den Kunden schreiben. Hier versuchen Sie, diesen Pitch zu machen und sie davon zu überzeugen, Sie im Grunde genommen einzustellen. Den Rest, wie Ihr Portfolio, Ihre Bewertungen und all das, können sie direkt in Ihrem Profil überprüfen. Ich habe Erfahrung mit der Veröffentlichung von Stellenanzeigen auf Upwork, und das verschaffte mir einen Vorteil , den andere Freelancer nicht hatten Ich wusste etwas, das sie nicht wussten. Und das wirst du auch tun. Das sagt ein Kunde, nachdem er einen Job ausgeschrieben hat. Eine Liste mit Vorschlägen von Freelancern. Dies ist die wichtigste Seite, auf der die Entscheidungsfindung durch den Kunden stattfindet Hier filtern sie Freelancer heraus, mit denen sie nicht zusammenarbeiten möchten, und wählen diejenigen aus, die sie tun Ich habe einige großartige Tipps, wie Sie auf dieser Seite erfolgreich sein und sich von der Masse abheben können, aber später Der Kunde kann hier Ihren vorgeschlagenen Tarif sehen, in diesem Fall stündlich, da ich diesen als Projektabrechnung festgelegt habe. Er kann dein lebenslanges Einkommen auf Upwork, deine Berufsbezeichnungen und Badges, worauf wir noch näher eingehen werden, sowie einige Zeilen aus dem Anschreiben sehen auf Upwork, deine Berufsbezeichnungen und Badges, worauf wir noch näher eingehen werden, sowie einige Zeilen aus dem Anschreiben Wenn der Kunde auf eines davon klickt, gelangt er zu einer Angebotsansicht, die im Grunde dem Profil des Freelancers plus dem Anschreiben entspricht Profil des Freelancers plus dem Jetzt sind alle anderen Details Ihres Profils und des Anschreibens wichtig Der Kunde kann die Rezensionen und Bewertungen des vergangenen Jobs überprüfen und herausfinden, wie viel Sie mit diesen Jobs verdient haben. Sie können Ihr Portfolio sehen. Dies sind Screenshots, die Sie in Ihrem Portfolio-Bereich hochladen können . Sie können deine Fähigkeiten sehen. Sorgen Sie dafür, dass diese Fähigkeiten authentisch sind, und konzentrieren Sie sich auf Ihr Fachgebiet. Verwenden Sie keine Dinge wie Microsoft Word. Es lässt dich nicht wie ein besserer Webdesigner aussehen, und sie können deinen beruflichen Werdegang auch außerhalb von Upwork einsehen , wenn du welche hinzufügst Wenn Sie bereits einen beruflichen Werdegang haben, ist es eine gute Idee , diese hier hinzuzufügen Frühere Erfahrungen zählen ebenfalls und können dazu beitragen, Ihre Glaubwürdigkeit zu stärken. Aber was auch immer Sie angeben, es muss gut aussehen. Ihr Sommerjob bei KFC wird nichts hinzufügen. Und das war's. Das ist ein allgemeiner Überblick über Upwork 161. Tipps 1-3: Profilgenehmigung erhalten: Du kannst Arbeit an Upwork bekommen, zuerst musst du dafür eine Genehmigung einholen Am Anfang sind das schlechte Nachrichten, aber sobald du eine Genehmigung erhalten hast, dann ist es eine gute Nachricht, denn das bedeutet, dass Upwork versucht, den Marktplatz schön und eng zu halten Es ist also nicht überfüllt, überfüllt mit Freelancern, denn wenn es dann zu viele Freelancer gibt, ist die Konkurrenz zu groß und die Preise Und im Grunde wird es weder für Freelancer, die an Upwork arbeiten, noch für die Kunden ein großer Vorteil sein arbeiten, noch für die Kunden ein großer Vorteil weder für Freelancer, die an Upwork , weil sie sich dann einfach durch so viele verschiedene Freelancer und zu viel Konkurrenz auseinandersetzen müssen durch so viele verschiedene . Wenn du ein Konto als Freelancer bei Upwork eröffnest, reichst du deine Bewerbung ein und sie müssen sie innerhalb weniger Tage prüfen und entweder genehmigen oder ablehnen Wenn du abgelehnt wirst, flippe nicht aus, denn du kannst dich erneut bewerben und es gibt keine Begrenzung wie oft du dich erneut bei Upwork bewerben kannst. Du verbesserst einfach dein Profil und bewirbst dich dann dein Profil Und wenn es nicht funktioniert und dann immer wieder Erfahrungen mit diesem Bewerbungsprozess machen, ist nicht viel Ich hab's geschafft. Es wurde akzeptiert, Ende der Geschichte. Aber es gibt diesen Artikel, den ich in den Ressourcen verlinken werde , und ich möchte, dass du diesen Artikel liest weil er tolle Tipps enthält, und ich möchte, dass du diesen Artikel liest bevor du dich bei Apwork bewirbst Und hier sind einige Tipps, die ich schamlos aus diesem Artikel stehle Upwork möchte auf dem Markt ein Gleichgewicht zwischen der Anzahl der ausgeschriebenen Stellen und der Anzahl der freien Mitarbeiter, die dann auf diese Stelle bieten, schaffen zwischen der Anzahl der ausgeschriebenen Stellen und der Anzahl der . Wenn dieses Gleichgewicht also irgendwie gestört wird und sagen wir, jemand veröffentlicht ein Logo-Design und Sie haben 1.000 Freelancer, die auf diesen Job bieten, dann laufen die Dinge Wann immer dieses Gleichgewicht gestört ist, schließt der Upwork die Tür Bewerben sich für diese spezielle Fähigkeit. Wenn es zum Beispiel heißt, Logodesigner, richtig, und Pork hat viel zu viele Logo-Designer, aber nicht genug Jobs die in dieser Kategorie ausgeschrieben werden, dann werden sie quasi vorübergehend das Tor für neue Bewerbungen und neue Freelancer, die in diese Kategorie kommen, schließen das Tor für neue Bewerbungen und neue Freelancer, die in diese Kategorie kommen, Also bis diese Art von Gleichgewicht wieder hergestellt ist. Eine Möglichkeit, zu verhindern, dass Ihnen dies während Ihres Bewerbungsprozesses passiert , besteht darin, Upwork zu zeigen , dass sich Ihre Fähigkeiten zwischen vielen verschiedenen Kategorien erstrecken Als Webdesigner fallen Sie automatisch in mehrere Kategorien Erstens haben Sie unter Entwicklungsfamilie die Kategorien Web- und Mobildesign plus Webentwicklung, und unter der Familie Design und Kreativität haben Sie die Kategorie Grafik und Design. Und vielleicht sogar andere für Dinge wie Benutzererfahrung und Benutzeroberflächendesign da sie dort nicht aufgeführt sind. Falls Sie andere Fähigkeiten haben und planen, andere Jobs zu machen, vielleicht wie Logo- oder Markendesign, dann können Sie diese auch mit einbeziehen. Aber überfordern Sie sich nicht künstlich, denn von Zeit zu Zeit überprüfen sie das Qualifikationsniveau, also führen sie vielleicht einige Interviews, in denen sie überprüfen können, ob Sie sich mit diesen Kategorien auskennen und ob Sie in diesen Kategorien fähig sind Neben der Auswahl von Kategorien fragt Upwork dich auch nach bestimmten Fähigkeiten, über die du Listen Sie so viele Fähigkeiten wie möglich auf, und Upwork hat diese riesige Datenbank Fähigkeiten, in der Sie suchen, und sie füllt sie dann automatisch aus und gibt Ihnen die Option, die Sie auswählen müssen In Bezug auf Webdesign sind dies beispielsweise Fähigkeiten, für die Sie sich leicht entscheiden könnten Dinge wie Webdesign, Responsive Design, Figma, Webflow, Ausleihseiten und so weiter Ich entscheide mich nur für echte Fähigkeiten , die für den Job relevant sind Sie nicht Microsoft Word , da das für Ihre Arbeitskategorie nicht relevant ist. Ich lasse Sie den Rest der Kassetten aus diesem Artikel selbst lesen . Es gibt vier, also schau sie dir an. Okay, zurück zu meinen eigenen Inhalten und nicht die Ratschläge anderer Leute zu stehlen Laden Sie keine Portfolioarbeiten aus diesem Kurs hoch. Hier erfahren Sie, warum. Da an diesem Kurs viele Studenten teilnehmen und viele von Ihnen sich wahrscheinlich bei Upwork bewerben werden, Sie sich am Ende mit den gleichen Portfoliostücken bewerben , wenn Sie diejenigen verwenden , die wir bereits in diesem Kurs erstellt und entworfen haben diesem Kurs erstellt und entworfen Und für den Fall, dass dieselbe Person Ihre Bewerbung bei Upwork überprüft, und dass sie dann zwei verschiedene Bewerber mit genau demselben Portfolio sieht, wird das für beide Alarmglocken schrillen dieselbe Person Ihre Bewerbung bei Upwork überprüft, sie dann zwei verschiedene Bewerber mit genau demselben Portfolio sieht zwei verschiedene Bewerber , . 162. Tipps 1-3: Profilgenehmigung erhalten: Was sagt Ihr Kunde als Erstes zu Ihrem Profil oder Ihrem Vorschlag? Ihr Profilfoto. Sie werden eine wichtige Entscheidung treffen, wenn sie sich nur Ihr Profilfoto ansehen. machen wir alle. Lass uns ein Spiel spielen. Lesen Sie 1-10, wie kompetent dieser Typ aussieht. nicht nötig, nur ein erstes Gefühl von 1 bis 10 zu analysieren, wie wahrscheinlich es ist, dass er die Arbeit erledigt Ich gebe ihm auf jeden Fall eine Zehn. Er lächelt, er ist gut angezogen, der Hintergrund ist angenehm. Das Foto sieht professionell aus. Also, wie stehts mit diesem Typen? Ich sage drei. Ich habe nichts anderes in seinem Profil überprüft, aber Blood sieht schon so aus , als würde er mir mein Geld absuchen wollen. So mächtig können Fotos sein. Du musst nicht gutaussehend oder hübsch aussehen , weil es kein Schönheitswettbewerb ist, aber du musst vertrauenswürdig und kompetent aussehen Machen Sie ein wirklich schönes Foto und versuchen Sie nicht, Zeit zu sparen und gehen Sie auf Facebook-Profil und holen Sie sich etwas von dort, denn auf Ihrem Facebook-Profil haben Sie höchstwahrscheinlich Fotos, auf denen Sie entweder cool, gutaussehend oder hübsch aussehen Und das sind nicht die Kriterien, die man verwenden sollte, wenn man ein schönes Hutfoto oder ein nettes Profilfoto auf Upwork bekommt ein nettes Profilfoto auf Upwork verwenden sollte, wenn man ein schönes Hutfoto oder ein nettes Profilfoto auf Upwork bekommt, weil die Kunden nicht wollen, dass du, weißt du, gutaussehend oder hübsch bist oder wie ein cooler Typ aussiehst. Das ist nicht das, wonach sie suchen. Sie suchen eine kompetente Person. Sie müssen also ein Foto finden, auf dem Sie vertrauenswürdig und kompetent aussehen, also etwas, auf dem Sie direkt in die Kamera schauen , dem Sie lächeln und am besten auf einem schlichten Hintergrund. Nun, es muss nicht im Studio nachgeholt werden, Sie können sich natürlich auch auf einem Himmelshintergrund befinden, oder? Sie können sich vor einem Hintergrund mit etwas Einfachem befinden, etwas, das keine Aufmerksamkeit erregt und Aufmerksamkeit von Ihrem Gesicht ablenkt Wenn du nur 1 Stunde Zeit hattest, um dein Profil auf Apwork zu erstellen, verbringe 45 Minuten mit dem Profilfoto und 15 Minuten mit dem Rest So wichtig ist das Profilfoto. Und komm schon, es ist so einfach. Wir haben heute Telefone. Ja, Sie haben wahrscheinlich ein wirklich gutes Smartphone , das tolle Fotos macht. Suchen Sie sich einfach einen wirklich schönen Ort, ziehen Sie sich gut an, lassen Sie sich die Haare schneiden, schneiden Sie vielleicht Ihren Bart und machen Sie ein schönes Foto. Upwork hat ein Verfahren zur Identitätsprüfung. Es ist ganz einfach Sie müssen Ihren Regierungsausweis hochladen und einen Videoanruf mit ihnen abschließen. Nach der Bestätigung erhalten Sie dieses blaue Abzeichen. Dies ist eine hervorragende Möglichkeit, das Vertrauen in Ihr Profil mit sehr geringem Aufwand zu erhöhen . Titel ist das, was unter Ihrem Namen angezeigt wird. Webdesigner ist ein widersprüchlicher Titel, aber er ist ein bisschen langweilig Das ist es, was die meisten Leute tun, also nichts, womit Sie sich zurückhalten werden Etwas mehr Schlagkraft hinzuzufügen, wird viel bewirken, zum Beispiel ein erfahrener Webdesigner oder Webdesign P, schneller und effizienter Webdesigner. Es erzählt ein bisschen mehr über dich, obwohl es ein selbsternannter Titel ist, sticht er dennoch heraus. Stellen Sie sich vor, es gibt zwei Vorschläge. Einer sagt Webdesigner und der andere sagt Experten-Webdesigner. Sie würden sich ein bisschen mehr zum Experten hingezogen fühlen. noch besserer Ansatz besteht darin, die Endergebnisse zu erwähnen, z. B. atemberaubendes Design und Aufbau von Websites, erstklassige Websites und problemloses Webdesign Um noch einen Schritt weiter zu gehen, könnten Sie diese Stile sogar kombinieren , z. B. als professioneller Webdesigner, atemberaubende leistungsstarke Websites oder Webdesign-Profi, erstklassiger Dies sind Vorschläge für einen der Jobs, die ich ausgeschrieben habe, und es war ein Job auf der Ausleihseite Nun, wie viele dieser Berufsbezeichnungen stimmen mit dem überein, was ich gepostet habe? Nur eine. Und selbst er hat das wichtigste Schlüsselwort tief im Titel versteckt. Ich suche jemanden, der Leihseiten erstellt. Wie kann ich feststellen, ob Sie die richtige Person sind wenn in Ihrem Titel nicht erwähnt wird, dass Seiten ausgeliehen werden? Ja, Web-, Wordpress- und PHP-Entwickler können alle Ausleihseiten erstellen. Aber woher weiß ich das? Ich habe nach einer Ausleihseite gefragt. Du gibst mir Wordpress als Antwort. Was zur Hölle ist Wordpress überhaupt? Ich bin kein Entwickler oder Webdesigner. Wenn ich es wäre, würde ich meine eigene Ausleihseite erstellen. Ich kenne mich mit Ihrer Technologie und Ihrem Jargon nicht aus. Ich bin wahrscheinlich ein Dolmetscher , der für etwas eine Seite braucht Und selbst wenn ich mit der Technologie vertraut wäre und den ganzen Jargon wüsste, würde ich immer noch jemanden finden wollen , der sich auf genau das spezialisiert hat, was ich frage Wenn ich also frage, ob ich die Ausleihseite fertig stellen muss, dann würde ich mich auf jeden Fall für jemanden entscheiden wollen, der Experte für Ausleihen von Seiten ist Experte für Ausleihen von Seiten oder sich nur auf das Ausleihen von Seiten spezialisiert hat Wenn ich Facebook-Marketing will, richtig, vielleicht Facebook-Werbung, dann möchte ich jemanden, der Facebook-Werbevermarkter ist, kein allgemeiner digitaler Vermarkter. Worüber denken sie nach? Es ist zu einfach, mit den meisten Freelancern von Samson Upward zu konkurrieren Du kannst der beste Webdesigner da draußen sein, aber wenn es Socket Selling ist, werde ich nie in dein Portfolio kommen Upwork hat diese Funktion, die als Spezialprofile bezeichnet wird. Sie haben also ein allgemeines Profil wie ein Webdesigner, und dann können Sie ein spezialisiertes Profil wie Webflow-Designer oder LandiPage-Designer haben Webflow-Designer oder LandiPage-Designer Wenn Sie sich für Stellen bewerben, bei denen Webflow-Designer gesucht werden, können Sie dieses spezielle Profil verwenden und sich damit Profil verwenden und Das ist viel effektiver als sich nur als Webdesigner zu bewerben und dann im Anschreiben erklären zu müssen, dass Sie in Webflow arbeiten Sie werden vielleicht nie dazu kommen, dein Anschreiben zu lesen. Eine weitere Information, die sich wirklich von den Profilen abhebt, ist das Abzeichen mit der Punktzahl für den beruflichen Erfolg. Um dieses Abzeichen bei Upwork zu erhalten, müssen Sie mit mindestens drei verschiedenen Kunden zusammenarbeiten Es gibt also nicht viel, was du dagegen tun kannst. Du musst nur warten. Aber du könntest etwas tun. Du könntest externe Projekte zu Upwork bringen , um diese Mindestanforderungen so schnell wie möglich Du kannst Personen oder Unternehmen in deinem Netzwerk finden , die eine Website benötigen, und ein Projekt für sie durchführen Und du könntest ihnen einen großen Rabatt geben oder vielleicht sogar die Website für sie zu einem sehr kleinen symbolischen Preis Gegenleistung dafür, dass sie es auf Upwork machen, den gesamten Prozess auf Upwork erledigen und dir am Ende dann Feedback geben Eine Art Win-Win-Situation für beide am Anfang funktioniert für dich Sie werden etwas Zugkraft bekommen und Sie werden diese Mindestanforderungen bei Upwork erfüllen, und außerdem bekommen sie eine Website zu einem sehr günstigen Preis Batch kann deine Einstellungsquote erheblich verbessern, sodass es sich lohnen kann, diesen gesamten Prozess zu durchlaufen , wenn du am Anfang Schwierigkeiten hast, Kunden zu gewinnen Falls Sie erwägen, diesen gesamten Prozess zu durchlaufen, habe ich in den Ressourcen eine Seite von Upwork verlinkt , auf der beschrieben wird, wie sie diesen Joberfolgswert berechnen Lesen Sie das zuerst, damit Sie verstehen, wie es funktioniert. Die Formel wird nicht vollständig weitergegeben , da sie streng geheim ist Es ist also nicht garantiert, wann Sie sie erhalten werden Aber sie geben einen guten Leitfaden, wie es funktioniert, sodass Sie verstehen können, wann Sie mit dem Erhalt dieses Badges rechnen 163. Tipps 10-12: Holen Sie sich das Abzeichen "Best Match": Jede Stellenausschreibung kann eine riesige Menge an Vorschlägen beinhalten. Hier sind es 15. Das ist schon viel, oder? Aber es ist eigentlich kleiner. Kunden können mehr als das erhalten, normalerweise 20 bis 50 und manchmal sogar mehr als 50 Vorschläge. Wird der Kunde jeden einzelnen durchgehen? Nicht wirklich. Sie werden ihre Augen ganz oben behalten. Was heißt das? Musst du Wege finden, an der Spitze zu landen? Work bringt die besten Spiele an die Spitze und fügt ihrem Vorschlag sogar dieses glänzende Bestspiel-Abzeichen hinzu. Damit sind diese Freelancer allen unten meilenweit voraus Als Freelancer sehen Sie nicht, ob Sie dieses Abzeichen erhalten haben oder nicht, aber potenzielle Kunden schon, und Sie sollten immer danach streben Also, wie bekommst du dieses Abzeichen? Niemand weiß wirklich, welcher Algorithmus dahinter steckt. Upwork gibt diese Informationen nicht wirklich weiter, aber nach der Analyse von Vorschlägen , die ich normalerweise erhalte, habe ich mehrere wichtige Zutaten Wenn du dein Profil erstellst, wirst du von Upwork aufgefordert, dein Erfahrungsniveau auszuwählen Dieselbe Frage wird Kunden gestellt , wenn sie den Job veröffentlichen Sie können leicht das Erfahrungsniveau erkennen , das der Kunde für den jeweiligen Job ausgewählt hat. Bewerben Sie sich auf das entsprechende Erfahrungsniveau. Dies ist wahrscheinlich der wichtigste Faktor bei der Bestimmung dieser Charge. die Stelle, die ich ausgeschrieben hatte, habe ich nach einem Expertenlevel gefragt, und die meisten Vorschläge stammten von Freelancern für und die meisten Vorschläge stammten von Fortgeschrittene und Berufseinsteiger Worüber denken sie nach? Es ist Zeitverschwendung für alle. In jedem Level gibt es genug Jobs, also bewirb dich auf passende. Wenn dir Jobs in deinem Erfahrungslevel nicht gefallen, dann ändere dein Level im Profil. So einfach ist das. Das zweitwichtigste Kriterium scheinen die Fähigkeiten zu sein. Wenn Kunden die Stelle ausschreiben, werden sie gebeten, bestimmte Fähigkeiten auszuwählen, nach denen sie bei einem Freelancer suchen Sie erhalten dieselbe Datenbank Fähigkeiten, die Sie in Ihrem Profil verwendet haben, und Sie können diese Informationen auch in der Stellenanzeige sehen Bewerben Sie sich auf Stellen mit passenden Fähigkeiten. Ich habe zum Beispiel keine dieser Fähigkeiten in meinem Profil ausgewählt. Wenn ich mich also für diese Stelle bewerben würde, würde ich kein gutes Spielergebnis erzielen. Überprüfen Sie also immer die Fähigkeiten , die der Kunde für die Stelle ausgewählt hat , und stellen Sie sicher, dass Sie diese Fähigkeiten auch in Ihrem Profil haben und dass sie übereinstimmen, denn das erhöht definitiv Ihre Chancen , am besten zu Ihnen zu passen. Jetzt können Sie mit Upwork nur noch maximal zehn Fähigkeiten auswählen Es wird also einige verwandte Fähigkeiten , die Sie möglicherweise weglassen müssen Aber manchmal wirst du einen Job finden, genau die Fähigkeiten nutzt , die du weglassen musstest. Was Sie in diesem Fall tun könnten, ist, einige Fähigkeiten zu entfernen und die fehlenden Fähigkeiten aus dem Job hinzuzufügen und eine Übereinstimmung herzustellen. Dies könnte ein kleiner Hack sein , von dem Upwork möglicherweise Kenntnis hat, sodass der Algorithmus Profiländerungen in letzter Minute ignorieren könnte Profiländerungen in letzter Minute ignorieren Aber es ist trotzdem einen Versuch wert. Zumindest wird der Kunde sehen, dass Sie über die Fähigkeiten verfügen, nach denen er gesucht hat. Wenn der Kunde das gewünschte Erfahrungsniveau eines Freelancers auswählt , zeigt er die ungefähre Preisspanne, die zu erwarten ist Sie möchten Ihr Gebot an die von Upwork vorgeschlagene Preisspanne anpassen. Wenn der Kunde Expert ausgewählt hat und damit einverstanden war , mehr als 50$ pro Stunde zu zahlen, wird es Upwork nicht gefallen, wenn du 30 Sie sorgen dafür, dass sowohl Sie als auch Upwork durch höhere Einnahmen verlieren. Um herauszufinden, was die aktuelle Preisspanne für dein Level ist, kannst du fast eine Stellenanzeige aufgeben, um zur nächsten Stufe zu gelangen und dir werden die aktuellsten Preisklassen angezeigt Dazu braucht es nichts. Du musst den Job am Ende nicht veröffentlichen. Das ist nur einer der Schritte im Assistenten für Stellenausschreibungen. Und Sie können dies von Zeit zu Zeit tun , um die neuesten Werte zu haben. 164. Tipps 13-14: Schlagen Sie den richtigen Preis vor: Hier sind einige Tipps zur Preisgestaltung. Viele Freelancer glauben, dass Kunden niedrigere Preise wählen Und wenn sie niedrig bieten, denken sie, dass sie für die Kunden attraktiver aussehen werden , quasi wie ein Schnäppchen Freelancer mit einer solchen Einstellung, sie haben einen negativen Geschmack und eine negative Einstellung gegenüber Upwork und diesen Freelancer-Plattformen. Sie denken, weil jetzt jeder um den Preis konkurriert, und es gibt eine Menge Preise, viele Leute konkurrieren mit dem Preis, also senkt jeder Aber sie konnten sich nicht irren. Wenn das wahr wäre, würden Sie nicht einige Freelancer bei Upwork 500$ pro Stunde verdienen Websites sind hochwertige Produkte. Sie sind nicht wie Toilettenpapier , bei dem das Billigste die meisten Verkäufe erzielt. Unternehmen werden die Website für ihr eigenes Geschäft nutzen , um mehr Umsatz zu erzielen, oder? Es wird ihr Unternehmen, ihr Geschäft und ihre Marke repräsentieren, damit sie nicht billig wollen. Sie wollen Standard, sie wollen Qualität. Und oft sind sie mehr als glücklich, dafür zu bezahlen. Genau wie viele von uns, die gerne 1.000 Dollar für das iPhone zahlen, anstatt 100 Dollar für Alcatel zu zahlen Sie niedrig bieten, verdienen Sie nicht nur weniger Geld, sondern gewinnen auch weniger Jobs Es klingt kontraintuitiv, aber die Kunden bevorzugen tatsächlich höhere Preise Warum? Weil die Preisgestaltung eine Möglichkeit ist, festzustellen, ob etwas qualitativ hochwertig ist oder nicht. Wir wissen, dass das nicht immer stimmt, und das ist uns auch bewusst, aber oft können wir uns selbst helfen, oder? Deshalb verwenden wir die Preisgestaltung als einen der Indikatoren, um zu beurteilen, ob etwas von hoher Qualität sein wird oder nicht. niedrig bieten, flüstern Sie Ihren Kunden leise zu , dass Sie von geringerer Qualität sind Schauen Sie sich diese Liste mit Vorschlägen an. Wenn Sie tiefer scrollen, sieht die Situation deprimierender aus. Weniger qualifizierte Mitarbeiter, keine Bewertung, keine früheren Jobs, schlechtere Präsentation, und Sie erhalten auch niedrigere Preise Ganz unten zu stehen, sieht also überhaupt nicht attraktiv aus. Die weniger erfahrenen Talente sind unten sortiert. Niedrigere Preise sind also mit geringerer Qualität verbunden , wenn man sich nur diese Liste ansieht. Diese Liste ist ein klarer Indikator für den Kunden, dass er mit niedrigen Preisen vorsichtig sein sollte. In diesem Fall wirken niedrigere Preise wie ein Warnsignal, kein Schnäppchen Als Kunde hasse ich die Frage, wie hoch Ihr Budget ist, wenn ich Freelancer anheuere hasse ich die Frage, wie hoch Ihr Budget ist, wenn ich Freelancer , weil ich meistens nicht weiß, wie hoch mein Budget ist Ich weiß, dass ich etwas erledigen möchte, aber oft weiß ich nicht, wie viel es kosten wird Ich weiß nicht, was das gute Preis-Leistungs-Verhältnis ist. ich diese Frage stelle, gerate ich irgendwie in einen verwirrten Zustand , in dem ich nicht weiß, wie ich antworten soll. Aber wenn Sie als Kunde einen Job bei Upwork ausschreiben und sich für eine Flatrate entscheiden, wird Upwork Sie fragen, wie hoch Ihr Budget ist? Und für jemanden wie mich, der nicht genau weiß , wie hoch sein Budget ist und die Frage nicht gerne beantworten möchte, versuchen wir die niedrigste Zahl auszuwählen, die uns in den Sinn kommt Das Letzte, was Sie tun möchten, ist , für etwas zu viel zu bezahlen. Wenn ich also nicht weiß, was etwas kostet, werde ich bei meinen Schätzungen weit, viel niedriger gehen , als es tatsächlich kosten wird, weil ich wirklich nicht zu viel bezahlen möchte Also ich will es nicht sagen, weißt du was? Ich zahle 2000 für diesen Job. Und was ist, wenn es nur 300 Dollar kostet? Dann gehe ich davon aus, dass Freelancer mich dafür missbrauchen werden , dass ich dieses hohe Budget aufsetze Jetzt wird jeder versuchen , das auszunutzen, und sie werden sagen: Oh, wir machen das für 2000, wir machen es vielleicht 1.500 und so weiter, wo der Job in Wirklichkeit nur 300 $ gekostet also zu viel zu bezahlen, werden Sie feststellen, dass Kunden oft ein viel niedrigeres Budget zahlen , als sie tatsächlich bereit sind zu Und am Ende des Tages wird es ihnen gut gehen, 203-mal mehr von dem zu zahlen , was sie als Budget vorschlagen Wenn Sie also eine Zahl auf dem Budget sehen, nehmen Sie das nicht als hundertprozentige Wahrheit an, dass das genau der Betrag ist , den sie zur Verfügung haben. Manchmal ist es wahr, oder? Unternehmen werden also genau diesen Geldbetrag für dieses Projekt zur Verfügung haben. Aber oft ist es nicht wahr. Es sind nur Kunden, die Zahlen aus ihren Köpfen ziehen. Und wenn Sie dieses Budget sehen, ignorieren Sie es einfach und schlagen Sie vor, was Ihnen das Projekt wert ist? Es sei denn, Sie sehen in der Stellenbeschreibung, dass sie ausdrücklich meinen, dass das ihr oberstes Budget ist und dass sie genau das zahlen werden. 165. Tipps 15-16: Seien Sie der Freelancer dem sie nicht widerstehen können: erfolgreichen Freelance-Center geht es oft nicht um die Fähigkeiten, sondern eher um den Service, den Sie Ihren Kunden bieten Sie können dann der beste Webdesigner sein, aber wenn Kunden nicht gerne mit Ihnen zusammenarbeiten, wenn Sie keinen qualitativ hochwertigen Service bieten, werden sie nicht für mehr zurückkommen. Denn was mit zufriedenen Kunden passiert , ist, dass sie nicht nur zurückkommen, um mehr zu bekommen und Ihnen mehr Arbeit zu bieten, sondern sie bringen auch andere Menschen mit. Sie empfehlen ihre Freunde, die normalerweise Geschäftsleute und Dolmetscher sind Ihre Freunde sind normalerweise andere Geschäftsleute und andere Geschäftsleute und Sie haben also einen wirklich guten Zugang , um Ihnen mehr Arbeit zu bieten. Ein großer Teil meiner Kunden sind tatsächlich Empfehlungen. Ich arbeite quasi mit einem Kunden zusammen. Sie sind super zufrieden, weil ich wirklich hochwertigen Service biete, und dann empfehlen sie mich gerne ihren Freunden. Aber wenn ich keinen guten Service geboten habe, auch wenn ich eine gute Website erstellt habe, aber sie waren, weißt du, vielleicht war ich nachlässig, vielleicht wusste ich es nicht, ich denke im Grunde an einen Vielleicht war ich einfach nicht sehr nett. Vielleicht war ich einfach unhöflich oder vielleicht habe ich nicht auf ihre E-Mails oder ihre Anrufe reagiert oder so Dann werden sie sich nicht trauen, mich ihren Freunden zu empfehlen denn wann immer du deinem Freund etwas empfiehlst, willst du sichergehen, dass du sie nicht, weißt du, verarschst, richtig, dass, was auch immer du ihnen empfehlen wirst , es gut und nützlich für sie sein wird Sie müssen also zu 100% sicher sein , dass alles, was sie bekommen, was auch immer sie empfehlen, gut für ihre Freunde ist Hier sind einige Tipps, wie Sie der Freelancer werden können , zu dem Kunden immer wieder zurückkehren , um mehr zu Wissen Sie, welches die einzigen Kriterien , die Kunden niemals übersehen werden Sie können Dinge wie Ihr Portfolio, Ihre bisherigen Erfahrungen, vielleicht sogar Jobbeurteilungen übersehen Ihr Portfolio, Ihre bisherigen Erfahrungen, vielleicht sogar Jobbeurteilungen , aber es gibt eine Sache, die sie niemals, niemals ignorieren werden , und das ist Vertrauen Vertraue ich dieser Person? Wenn die Antwort nicht zu 100% höllisch ja lautet, dann bekommst du den Job nicht. Egal wie toll alles andere auf deinem Profil aussieht. Wenn ich dir nicht vertraue, dann kann alles eine Lüge sein. Alles, was du sagst, kann eine Lüge sein. Alles, was ich auf dem Profil sehe, kann eine Lüge sein. Alles, was du versprichst, kann eine Lüge sein, und ich werde dir niemals mein Geld und mein Geschäft anvertrauen. Der beste Weg, mein Vertrauen als Kunde zu verlieren , ist, mir etwas zu verkaufen. Wenn Sie versuchen, mir etwas zu verkaufen, dann haben Sie eine Agenda, oder? Sie haben die geheime Agenda , die Sie verkaufen wollen. Und wenn ich erkenne, dass Sie diese Agenda verfolgen, woher weiß ich dann, dass alles, was Sie sagen, wahr ist, woher weiß ich, dass alles, was Sie versuchen, mir zu helfen, aber nicht nur Ihnen selbst nützt ? Die Lösung ist sehr einfach. Ändere deine persönliche Agenda vom Verkaufen zum Helfen. Sie könnten sagen, warten Sie eine Sekunde, aber meine Absicht ist es, meine Dienstleistungen zu verkaufen, richtig? Ich mache Geschäfte. Ich versuche Geld zu verdienen. Ich bin nicht hier, um wohltätige Zwecke oder Freiwilligenarbeit zu leisten. Wie ändere ich meine Agenda dahingehend, nur zu helfen, wenn ich verkaufen muss? Ich weiß, dass das stimmt, aber in der Realität ändert sich nichts. An der Oberfläche ändert sich nichts. Du wirst trotzdem bezahlt werden. Du wirst immer noch Geld verdienen. Aber tief im Inneren ändert sich alles. Die Art und Weise, wie Sie sprechen, wie Sie auf Ihre Kunden zugehen, die Art und Weise, wie Sie mit ihnen in Kontakt treten, all diese kleinen Tausend Mikroentscheidungen und Mikrointeraktionen ändern sich, wenn Ihre Agenda vom Verkaufen zum Helfen ändert. Und das wird nicht unbemerkt bleiben. Ihre Kunden werden Ihnen sofort vertrauen, und das ist oft wichtiger als Ihr Portfolio Eine tolle und hilfreiche Sache, Sie Ihren Kunden bieten können, ist die Linderung der Schmerzen, die sie in diesem Bereich erleben. Stellen Sie sich für eine Minute vor, Sie sind ein Geschäftsinhaber, der eine Website benötigt , und Sie sind in Designstudios gegangen und haben herausgefunden, dass Sie sich deren astronomische Preise für Webdesign-Projekte nicht leisten können für Webdesign-Projekte Was Sie also tun, Sie gehen auf Freelancer-Plattformen wie Upwork zu, Sie wissen schon, einzelnen Freelancern die etwas weniger verlangen werden Denken Sie jetzt darüber nach, mit wie viel Verwirrung und Unsicherheit Sie zu kämpfen haben, wenn Sie kein Dolmetscher sind, der aus diesem Bereich kommt, aus dieser Art von Webdesign-Branche Wenn Sie nur reguläre Geschäfte machen, dann kennen Sie sich wahrscheinlich mit dieser Technologie nicht aus Sie wissen nicht, wo Sie es bauen sollen. Sie wissen nicht, was Wordpress oder was Webflow oder HTML oder CMS Sie wissen nicht genau, wie Sie beurteilen sollen , wer ein guter Freelancer, wer ein guter Webdesigner und wer ein schlechter Webdesigner ist Sie haben es also mit einer Menge Ungewissheit zu tun, und je mehr Sie recherchieren, werden Sie herausfinden, anstatt Klarheit zu erlangen, dass Sie tatsächlich etwas verwirrter werden Wie Sie sehen, müssen sich die Kunden über so viele seltsame Details Gedanken machen über so viele seltsame Details und ihr Geld riskieren. Wie können Sie ihnen also helfen? Es gibt mehrere Möglichkeiten, wie wir ihnen helfen können, und eine Möglichkeit besteht definitiv darin, ihnen zu sagen und ihnen zu zeigen, dass wir den Prozess verstanden haben, oder? All die Dinge, um die wir uns für sie kümmern werden und sie müssen sich keine Gedanken über Dinge wie die Technologie machen, oder? Wo werden wir dieses Ding bauen? Wo werden wir dieses Ding wie Webflow auf den Markt bringen , oder? Sie müssen sich keine Sorgen machen, dass wir uns darum gekümmert haben Wir können ihnen auch den Prozess erklären , genau wie unseren Designprozess, den wir haben Wir werden von der Projektbeschreibung über das Wireframing und dann zum Design übergehen das Wireframing und dann zum und dann das Ganze schließlich in Webflow erstellen in Webflow Wir können also erklären, dass, wissen Sie, sie involviert sein werden und die Kontrolle über jeden Schritt des Prozesses haben über jeden Schritt des , sodass sie wissen, was vor sich geht, und sie müssen nicht einfach eine Menge Geld investieren und dann hoffen, dass alles gut läuft weil sie in den gesamten Prozess einbezogen werden und der Lage sein werden, etwas zu optimieren die Art und Weise zu ändern, um sicherzustellen , dass wir in die richtige Richtung gehen Auf diese Weise können sie sich jetzt in unserer Partnerschaft entspannen, weil sie sehen, dass wir uns darum gekümmert haben und dass wir den Prozess kennen und diesen Prozess steuern können Auf diese Weise können sie sich jetzt entspannen und müssen nicht viel riskieren, wenn sie mit uns zusammenarbeiten. Wenn Sie das tun, werden sie Ihnen die Hände abfressen , weil andere Freelancer das höchstwahrscheinlich nicht tun, oder? nehmen sie nicht mit zu diesem angeleiteten Prozess, aber Sie schon diesem angeleiteten Prozess, aber Sie Andere Freelancer sind da, um ihr Geld zu nehmen, aber du nicht. Du hältst ihnen den Rücken frei 166. Tipps 17-22: Schreibe verdammt gute Anschreiben: Jobs, normalerweise musst du Anschreiben mit deinen Vorschlägen schicken Anschreiben mit deinen Vorschlägen Dies sind nur eine kleine E-Mail oder eine Nachricht, die Sie an einen Kunden senden, wenn Sie ihm ein Angebot schicken. Auf Apwork- und Freelancing-Plattformen gibt es normalerweise ein Feld, das du ausfüllst und das du sendest Außerhalb der Plattformen ist das normalerweise eine E-Mail, ist das normalerweise eine E-Mail die du ihnen mit deinem Vorschlag geschickt hast Das ist es. Freelancing hat mir nicht beigebracht, wie man gute Anschreiben schreibt Die Einstellung von Freelancern hat es getan. Ich hatte als Kunde Erfahrung damit, Anschreiben zu erhalten, die großartig waren, weil sie gut zu mir als Kunden passten, und ich erhielt eine Menge Mist, der viele Freelancer völlig unmietbar machte. Hier sind einige Tipps zum Schreiben verdammt guter Anschreiben. einem Anschreiben, das mich sofort einschlafen , spricht der Freelancer über sich selbst Ich poste den Job, beschreibe mein Problem und die Lösung , nach der ich suche, und du antwortest, wie toll du bist Fast alle dieser Freelancer sprechen über sich selbst Ich bin das und ich habe das. Ich habe so viel Erfahrung, und ich habe das in der Vergangenheit gemacht. Ehrlich gesagt, mein Lieber, ist mir das egal. Sag mir, wie du mein Problem lösen wirst . Erzählen Sie mir von dem Projekt. Wie kannst du mir helfen? Zeig mir , dass du unglaublich bist. Prahlen Sie nicht damit Okay, wenn du über dich selbst sprechen kannst, was sagst du dann? Sehr einfach. Fangen Sie an, Ideen zu geben. Stellen Sie sich vor, sie haben Sie bereits engagiert und beginnen mit dem Brainstorming ihres Projekts Wie wirst du es entwerfen? Was wären lustige Dinge, die man tun könnte? Senden Sie Links zu Beispiel-Websites und sagen Sie, Sie könnten diese Art von Interaktionen oder diese Art von Helden-Sektion durchführen. Niemand macht das. Wenn ich einen Vorschlag mit Ideen und Beispielen sehen würde, würde ich sagen: Danke. Das sind großartige Ideen. Du verstehst mich. Das will ich. Fertig, du bist angestellt. Welche echten Beispiele? Hier ist ein aktuelles Anschreiben, das ich auf Appwor geschickt habe und das mir ohne Vorstellungsgespräch sofort einen Job verschafft hat ohne Vorstellungsgespräch sofort einen Job verschafft Ich beginne damit, Beispielseiten zu verlinken. Ich habe ausgeliehene Seitenvorlagen genommen, nicht einmal meine Arbeit, und ihm als Beispiele gezeigt. Ich habe ihm gezeigt, was ich tun würde. Jetzt kann er mit eigenen Augen sehen und ich habe ihm das Leben leichter gemacht. Dann gebe ich ihm einen kurzen Überblick über den Prozess, wie ich das alles machen würde, habe ihm gesagt, dass es gut aussehen und effektiv konvertieren wird Das ist sein Ziel, nicht wahr? Jetzt weiß er, dass ich sein Ziel verstehe. Dann stelle ich einige aussagekräftige Fragen, die zeigen, dass ich das Bild nicht rosarot male, und dass ich die Einzelheiten des Projekts berücksichtigt habe Beachten Sie, dass ich erst nach all dem anfange, über mich selbst zu sprechen , und zwar genau dort, wo es über mich aussagt Es gibt ein bisschen mehr Blabla über mich, aber ich habe es herausgeschnitten, weil ich das heute nicht einmal tun würde Ich würde es einfach ohne diesen Absatz behalten. Hier ist ein weiteres Beispiel für ein gutes Anschreiben, das ich in einer meiner Stellenanzeigen erhalten habe. Diese Person hat mehr als 50.000 Einnahmen bei Upwork erzielt, und das zeigt, warum Er bringt es direkt auf den Punkt. Er ist hilfreich. Er wird mir sogar zeigen, wie ich Besucher für meine Seite gewinnen kann. Er versteht meine Ziele und stellt mir wichtige Fragen. Die Botschaft ist kurz und bündig, ich verschwende meine Zeit nicht mit einem Haufen Dosenfluff Versuchen Sie nicht, Zeit zu sparen, indem Sie Muster-Anschreiben und Dosen-Anschreiben senden Muster-Anschreiben und Dosen-Anschreiben Ich hasse Dosenbriefe. Ich scheiß auf sie und auf Leute, die sie mir schicken. Du sparst deine Zeit, vergeudest aber meine? Nein, danke Gute Kunden bemerken, dass Briefe kilometerweit entfernt sind, und sie werden sich nicht einmal die Mühe machen, sie zu lesen. Manchmal möchten Sie in Anschreiben Beispiele aus Ihrer bisherigen Arbeit nennen, oder? Bei vielen Freelancern werden sie auf ihre Portfolio-Arbeit verweisen und diese innerhalb von Apwork verlinken Aber was du tun kannst und weil du eine Website hast, kannst du ihnen Links zu deiner Website schicken Seien es Portfoliostücke auf AP Work , sie werden nicht auf die schmeichelhafteste Weise angezeigt Auf der Website sehen sie jedoch sehr attraktiv aus, weil es Ihre Website ist, es sind Ihre Sachen, oder? Alles ist irgendwie nett organisiert. Und du hast ein bisschen mehr Inhalt und das ist deine Gelegenheit, sie zu nutzen, weißt du, um zu zeigen, dass du nicht nur Upwork machst , sondern dass du auch ziemlich professionell bist, deine eigene Website hast und sie irgendwie deine eigene Website hast und sie irgendwie mit deiner ganzen Präsentation beeindrucken kannst Aber nur, wenn Sie diese Website auf Ihrer persönlichen benutzerdefinierten Domain veröffentlichen , weil mein Portfolio-Slash 123 Punkt Webflo Punkt IO nicht sehr professionell aussieht, amateurhaft und ich niemanden ernst nehme, mir sein Portfolio schickt, das auf Punkt Webflow oder so oder Punkt wiggly oder wix.com ist , weil das nicht so aussieht Sie nehmen Ihren Beruf ernst. Sie also 15 Dollar pro Monat für den ersten Monat des Weblo-Abonnements aufbringen , werden Sie anderen Freelancern, die auf Upwork sind , meilenweit voraus sein Und du musst nur für den ersten Monat bezahlen. Sobald Sie anfangen, Geld zu verdienen, wird es sich von selbst amortisieren. Auf der Seite, auf der ein Kunde alle Vorschläge erhält, kann er bereits einige Anfangszeilen eines Anschreibens des Freelancers sehen eines Anschreibens des Freelancers Viele Freelancer beginnen mit so etwas wie „Sehr geehrter Herr Madam“. Verbinden sich Menschen so? Sehr geehrter Herr Madame? Klingt so unpersönlich und einfach komisch. Das sage ich oft Sehr geehrter Personalchef. Was zur Hölle? Personalchef, wer? Hey, warum nennst du mich willkürlich? Und wer redet so? Das ist eigentlich Schuld von Upwork, weil sie in einem ihrer Blogbeiträge empfehlen, diesen Hiring Manager zu verwenden , der wahrscheinlich von einem ihrer Mitarbeiter geschrieben wurde , der noch nie ein Freelancer oder Kunde war , ein Freelancer oder Kunde weil das der dümmste Rat ist, den ich Seien Sie also vorsichtig, wenn Sie Ratschläge von Upwork selbst lesen. Also, wenn du das sagen kannst, was sagst du dann? Also, lassen Sie mich ein großes Rätsel lösen. Was sagst du, wenn du jemanden in deiner Arbeitsumgebung begrüsst jemanden in deiner Arbeitsumgebung Sagen Sie lieber Herr Madam oder sagen Sie Hallo. Hallo. Guten Morgen. Hallo zusammen. So einfach ist das. Warum das komplizieren All diese sind auch professionell und höflich. Sei nicht komisch. Sei einfach natürlich und freundlich. Das ist alles. Nun, einige von Ihnen kommen wahrscheinlich aus Ländern und Kulturen, in denen der Gebrauch von Wörtern, Sir, gewissermaßen höflich sein muss Das ist zum Beispiel ein Fall in Indien. Und wenn ich mit Freelancern aus Indien zusammenarbeite , rufen sie mich immer an, Sir Sie sagen: Hi, Sir, ja, Sir. Danke, Sir. Ich werde ein bisschen komisch, wenn sie das tun Verwenden Sie Sir nicht bei jedem auf der ganzen Welt, weil es nicht Teil der Kultur aller ist In Nordamerika, Großbritannien und Australien wird das Wort Sir beispielsweise Großbritannien und Australien wird das Wort in sehr unpersönlichen Situationen verwendet Zum Beispiel, wenn Sie die Aufmerksamkeit eines Fremden erregen wollen, wie: Oh, entschuldigen Sie, Sir, Sie haben etwas fallen lassen Aber das Arbeitsumfeld in diesen Ländern ist freundlicher. einen Ehrenstatus Aufgrund ihres Alters oder ihrer beruflichen Position gibt es keinen Unterschied zwischen Menschen, die Also würde niemals ein Mitarbeiter seinen Chef anrufen. Sir, selbst wenn dieser Chef Bill Gates wäre, würden sie wahrscheinlich so etwas wie Bill oder Mr. Gates sagen , aber nicht, Sir. Sie werden also etwas seltsam und unpersönlich wirken , wenn Sie das mit Leuten benutzen, die diese Art von Höflichkeit nicht gewohnt sind diese Art von Höflichkeit nicht gewohnt Prüfen Sie, wo sie herkommen, und verwenden Sie es, Sir, nur, wenn es in dem Land erwartet wird 167. Tipps 23-25: Lassen Sie sich nicht suspendieren: Manchmal werden Freelancer suspendiert oder von der Arbeit ausgeschlossen wenn sie etwas tun, das gegen ihre Allgemeinen Geschäftsbedingungen Ich werde Ihnen einige Tipps geben , um sicherzustellen, dass Sie sich nicht in einer sehr schwierigen Situation mit ihnen befinden Der Versuch, außerhalb von AppOrg bezahlt zu werden, verstößt gegen deren Nutzungsbedingungen Und wenn sie vermuten, dass du das versucht hast, werden sie dein Konto höchstwahrscheinlich sperren Dieser Grund ist schlicht und einfach. APOC verdient Geld mit Transaktionen und Zahlungsvorgängen , die zwischen Ihnen und dem Kunden stattfinden Und wenn Sie versuchen, diese Zahlungen außerhalb der Plattform abzuwickeln, bringen sie kein Geld ein und Sie verärgern sie Weitere Informationen dazu findest du in ihren Allgemeinen Geschäftsbedingungen, und die Klausel heißt Umgehung, nicht Beschneidung, und du kannst mehr darüber erfahren Dies gilt nicht nur für aktuelle Projekte, die Sie vom Kunden erhalten, sondern auch für alle nachfolgenden Projekte, die demselben Kunden stammen Sie haben eine 24-monatige Umgehungsfrist. Sobald Sie also anfangen, mit den Kunden zu arbeiten, gibt es einen Zeitraum von 24 Stunden, in dem Sie die Beziehung zu diesem Kunden auf Upwork aufrechterhalten und für Upwork bezahlt werden Es gibt also gewisse Auslöser in Ihrer Kommunikation, die die Alarmglocken schrillen lassen können Also, weil die Nachrichtenübermittlung über die Aforce-Messaging-Plattform erfolgt, oder? In dieser Nachricht sprechen Sie also über Dinge wie Pioneer Das wären die Worte, die die Alarmglocken läuten, und diese Sperre quasi automatisch auslösen. Wenn du Dinge wie Payoneer, PayPal, Banküberweisungen, IBANs erwähnt hast , kann alles, was irgendwie ist, irgendwie Verbindung gebracht werden , dass du versuchst, draußen bezahlt zu werden Und es spielt keine Rolle, ob der Kunde die Diskussion initiiert und möchte, dass Sie draußen bezahlt werden, wenn Sie dem zugestimmt haben oder ob Sie derjenige sind, wenn Sie etwas wie Ja oder was auch immer erwähnen, dann werden Sie suspendiert, auch wenn er Sie danach fragt. Stellen Sie also sicher, dass, wenn der Kunde Sie darum bittet, wissen Sie, lassen Sie uns das nach draußen bringen und nein sagen, Sie möchten, dass die Dinge auf Upwork bleiben Jetzt werden die meisten Sperren automatisch vorgenommen . Es ist nur so, wenn du etwas erwähnst, dann wird KI, du weißt schon, ausgelöst und all das Zeug Aber manchmal erwähnen Sie PayPal vielleicht nicht, weil Sie draußen bezahlt werden wollten, sondern vielleicht geben Sie ein Beispiel eine PayPal-Website. Vielleicht versuchen Sie, eine Website für das Bankwesen zu entwerfen , oder vielleicht entwerfen Sie eine E-Wallet oder etwas, das mit Finanzierung zu tun hat. Aber dann ist es okay denn wenn Sie automatisch gesperrt werden, können Sie Berufung einlegen, und dann wird sich ein Mensch Ihre Kommunikation ansehen. Und wenn sie davon überzeugt sind, dass du nicht versucht hast, draußen bezahlt zu werden, sondern du hast das irgendwie besprochen das Teil des Projekts war, dann wird es okay sein. Und sie werden das Verbot aufheben. Nun, natürlich, wenn Sie dies in einem Skype-Anruf oder einem Videoanruf besprechen Skype-Anruf oder einem Videoanruf , der nicht Teil von Upwork ist, oder? Weißt du, es ist unmöglich für Upwork, das herauszufinden, aber ich habe einige gute Gründe, warum du bei bleiben solltest Letzten Endes ist Upwork eine gute Sache. Es ermöglicht so vielen Freelancern, Arbeit zu finden. Wir alle wollen, dass Upwork Geld verdient und nicht aus dem Geschäft geht Und wenn die meisten von uns die Beziehung aus Upwork herausnehmen, werden sie eines Tages einfach ihr Geschäft einstellen Upwork, 10% sind nicht so viel. UDumi nimmt zum Beispiel mindestens 50% von dem, was ich Upwork ist also nicht so schlecht. Schließlich ist es großartig, sich nicht um die Abrechnung kümmern zu müssen. Ihre Kunden werden automatisch belastet. Sie müssen sich nie mit der Rechnungsstellung und der Verfolgung von Zahlungen befassen Rechnungsstellung und der Verfolgung von Zahlungen Das spart viel Zeit und Mühe. Als Freelancer gibt es manchmal Fälle, in denen Sie die Kunden verfolgen müssen, um Sie pünktlich zu bezahlen Aber bei Upwork ist es nett, weil die Kreditkarte automatisch belastet wird Und wenn ihre Kreditkarte nicht einwandfrei funktioniert, wird der Kunde bei Upwork gesperrt, sodass auch du darüber Bescheid weißt Das spart eine Menge Zeit und Mühe. Tragen Sie keine Fähigkeiten in Ihr Profil ein, die Sie nicht haben. Upwork führt manchmal stichprobenartig eine Überprüfung der Fähigkeiten von Freelancern durch, und sie führen mündliche Tests durch und führen ein Interview mit einem Freelancer, um sicherzustellen was sie unter ihre Fähigkeiten setzen Als mein Konto aufgrund dieses Skillchecks gesperrt wurde , haben sie quasi den Skillcheck für mein Konto eingeleitet, und ich hatte ein Interview mit einem Kundenservice-Mitarbeiter, und sie haben mich quasi zu HTML und CSS befragt Und es war seltsam, weil ich HTML und CSS nie zu meinen Fähigkeiten zählte, aber ich schätze, weil ich in der Kategorie Webdesign war , gehen sie davon aus, dass ich HTML und CSS kennen sollte, obwohl ich nie behauptet habe, das zu wissen. Zum Glück konnte ich appellieren und ihnen erklären, dass ich kein HTML und CSS benötige, um und ihnen erklären, dass ich kein HTML und CSS benötige meine Arbeit zu erledigen , von der ich nie behauptet habe, dass ich es wüsste, und sie haben es verstanden, und sie haben meinen Account entsperrt. Aber wenn ich sie in meinen Fähigkeiten gehabt hätte, wäre ich total am Ende gewesen Die Sache ist so, weil Upwork eine so große Plattform ist und es so viele Leute gibt und so viel Geld dorthin fließt, zieht das irgendwie auch schlechte Schauspieler an, die versuchen, das System zu manipulieren und betrügerische Konten zu eröffnen und sich an verschiedenen Betrugsaktivitäten zu beteiligen Upwork geht also sehr gewissenhaft vor und geht in vielen verschiedenen Konten um sicherzustellen, dass die Leute, die dort sind, behaupten, wer sie sind, und sie behaupten oder dass sie Fähigkeiten kennen und dass sie das tun können was sie den Kunden versprochen haben. Stellen Sie also sicher, dass alles, was Sie auf Apork setzen , wahr und authentisch ist und dass Sie nicht versuchen, das System zu manipulieren, weil es keine große Toleranz hat Also, selbst wenn etwas, du weißt schon, wackelig ist, entferne einfach alles , was nicht zu 100% wahr ist 168. Tipps 26-28: Lassen Sie sich nicht betrügen: Die Arbeit ist groß, sehr umfangreich, und es gibt eine Menge Geld, das herumfließt , und viel Geld, das verdient werden kann Wenn es also Geld gibt, gibt es immer schlechte Schauspieler, die versuchen, die Leute abzuzocken. Hier sind einige Tipps, wie Sie sich bei Upwork nicht betrügen lassen können. Mache niemals kostenlose oder Testversionen von Upwork. Es gibt diesen Betrug , bei dem einige ********* dich bitten, eine Probearbeit zu machen , bei der du etwas kostenlose Arbeit verrichten musst , bevor sie dir einen Job zuweisen können, also müssen sie dich auf deine Fähigkeiten testen oder Und was sie tun, ist, dass sie viele verschiedene Freelancer bitten , diese kostenlose Arbeit zu machen , und dann nutzen sie diese kostenlose Arbeit für anderen Kunden und werden irgendwie dafür bezahlt, ohne selbst einen Job zu machen. Hier ist ein Video von einem der Upwork-Freelancer, der einen solchen Betrug aufgenommen hat Der Link befindet sich in den Ressourcen, falls Sie interessiert sind. Das ist ein wiederholter Tipp, aber diesmal aus einem anderen Grund denn nicht nur, weil du von Upwork gebannt werden kannst, sondern du könntest auch betrogen werden wenn du Dinge außerhalb von Upwork machst Wenn ein neuer Kunde, der Sie noch nicht bezahlt und Sie noch kein Arbeitsverhältnis hatten , Sie bittet, Dinge außerhalb der Plattform zu erledigen, um Geld zu sparen oder, Sie wissen schon, die Provision irgendwie loszuwerden, dann sollten Ihnen sofort Warnglocken in Ihrem Offensichtlich ist es für die Kunden sicherer, die Dinge am Laufen zu halten, weil sie vom Upwork einige Garantien haben, oder? Wenn etwas schief geht, kann zumindest die Arbeit irgendwie eingreifen und die Situation abmildern. Wenn sie dich also bitten, Dinge von draußen anzunehmen, ist es vielleicht schlecht, und wenn etwas aussieht, dann ist es das 169. Preisgestaltung: Wie viel berechnen Sie?: Willkommen zum gruseligen Thema für die meisten Freelancer. Preisgestaltung. Wie viel verlangen Sie? Am Anfang verwirrt über die Preisgestaltung zu sein, ist richtig. Ich war auch ziemlich verwirrt, als ich anfing. Ich erinnere mich an mein allererstes Lending-Page-Projekt , bei dem ich 200$ berechnet habe Und es war eigentlich ziemlich viel Arbeit. Ich habe Seitendesign und Seitenaufbau geliehen. Ich habe den Text und den Inhalt für die Ausleihseite geschrieben. Es war die Vermarktung von Projekt zwei. Ich habe Facebook-Werbung gemacht und gebaut, ich habe auch Facebook-Banner und Werbung entworfen Facebook-Banner und Werbung und alles für 200$ gemacht Dann habe ich auf einen Stundensatz umgestellt, und das waren 20$ pro Stunde, und das war schon ein ordentliches Upgrade für mich, denn bei diesem Tarif konnte ich mich voll und ganz selbst ernähren, indem ich quasi in Vollzeit freiberuflich tätig war indem ich quasi in Vollzeit freiberuflich tätig Dann habe ich auf 30$ pro Stunde umgestellt, was für eine ganze Weile mein Tarif war Dann habe ich mich auf 60$ pro Stunde verdoppelt. Und jetzt berechne ich hauptsächlich eine Pauschale und im Durchschnitt etwa 5.000$ für das Design und den Aufbau einer Website Das Upgrade von 30 bis 60$ pro Stunde war für mich eine der emotional schwierigsten Aufgaben Ich fühlte mich so schuldig, besonders als ich meinen bestehenden Kunden sagen musste, dass ich den Tarif verdoppeln würde , weil sie schon seit einiger Zeit mit mir zusammenarbeiten Rational gesehen wusste ich, dass es Sinn machte, aber emotional schwitzte ich vor Angst Später wurde mir klar, dass ich zwei falsche Glaubenssätze in meinem Kopf Zuerst habe ich meine eigenen Geldprobleme auf Kunden projiziert. Anstatt es aus ihrer Perspektive zu betrachten, betrachtete ich es aus meiner eigenen Perspektive, verglich es mit meinen eigenen Gewohnheiten beim Geldausgeben und fühlte mich schuldig, weil ich selbst Schwierigkeiten hätte , dafür 60$ pro Stunde zu zahlen Zweitens denke ich, dass der Preis, den ich berechne, in direktem Zusammenhang mit dem Niveau meiner Fähigkeiten Wenn ich also den doppelten Betrag verlange, müsste ich jetzt doppelt so qualifiziert sein. Und du denkst vielleicht, aber ist das nicht wahr? Sollte ein höherer Preis nicht bessere Fähigkeiten bedeuten? Eigentlich gar nicht. Hier ist die wichtigste Wahrheit über die Preisgestaltung. Wie viel Sie verlangen, hängt davon ab, wer kauft. Es gibt diesen großartigen Business-Coach für kreative Menschen. Sein Name ist Chris Doug, und ich habe mir einmal seinen Vortrag über Preisgestaltung angesehen, und er hat mich einfach umgehauen Mir wurde klar, wie viel ich über meine eigene Preisgestaltung nicht wusste. Stellen Sie sich ein Szenario vor, in dem zwei potenzielle Kunden auf Sie zukommen. Beide wollen eine sehr ähnliche Website, dieselbe Anzahl von Seiten, dieselbe Funktionalität, etwas, dessen Gestaltung und Entwicklung die gleiche Zeit in Anspruch nehmen werden. Sie geben ihnen also natürlich den gleichen Tarif, aber diese Kunden könnten unterschiedlicher nicht sein. Der erste ist ein unabhängiger Buchhalter, ein kleiner Mann. Die zweite ist eine große Anwaltskanzlei , die Millionen von Dollar pro Jahr verdient Was denkst du? Ist eine Website für sie das Gleiche wert? Absolut nicht. Eine neue Website könnte für diese beiden Mandanten mehr Umsatz bringen , aber mehr Umsatz für die buchhalterischen könnte zusätzliche 100 Dollar pro Monat bedeuten, und für die Anwaltskanzlei könnte das zusätzliche 100.000 Dollar pro Monat bedeuten. Gleiche Website, gleicher Aufwand von Ihnen, aber je nach Kunde ein großer Unterschied im Wert. Welchen Tarif Sie diesen beiden Mandanten auch geben, er ist wahrscheinlich zu teuer für den Buchhalter und lächerlich billig für die Anwaltskanzlei Am Ende werden Sie beide Interessenten verlieren. Sie denken vielleicht: Nun, zumindest die Anwaltskanzlei wird sich über einen so günstigen Preis freuen, aber das wird sie nicht sein. 5.000$ für eine Website zu zahlen , die ihnen zusätzliche 1 Million pro Jahr einbringen könnte , scheint unrealistisch Das ist eine zu kleine Zahl. Sie werden deiner Arbeit nicht trauen. Aber wenn Sie Ihre Preise darauf ausrichten würden, wer abnimmt, sagen wir, hypothetisch 2.000 für den Buchhalter und 20.000 für die Anwaltskanzlei anbieten , könnten Sie am Ende beide Jobs verleihen weil die Preise für beide angemessen klingen würden Steve Jobs zahlte 100.000$ für das nächste Logo. Sind Logos 100.000 wert? Für ihn war es das. Für ein kleines Startup wäre es nicht so, wie viel eine Website kostet hängt von zwei Dingen ab. Erstens, wer zahlt? Und zweitens, welchen Wert erwarten sie daraus zu ziehen? Der erwartete Wert ist ebenfalls ein wichtiger Faktor , den es zu berücksichtigen gilt. Stellen Sie sich dasselbe Szenario mit einer großen Anwaltskanzlei vor, aber dieses Mal benötigen sie keine Website, um neue Geschäfte für sich selbst zu generieren. Sie benötigen lediglich eine Website mit ein paar Seiten und Kontaktinformationen. Das ist eine andere Geschichte. Sie haben nicht vor, viel Wert daraus zu ziehen, also klingen 20.000 vielleicht zu viel, um sie zu bezahlen. Sie werden wahrscheinlich mehr zahlen als der unabhängige Buchhalter, aber nicht so viel wie die 20 K. Um den richtigen Preis für die Website zu ermitteln , müssen Sie also zuerst verstehen, wer Ihr Kunde ist, und dann verstehen, welchen Wert sie daraus ziehen wollen Der Wert hängt von jedem Projekt ab, und Sie können dies herausfinden, indem Sie mehrere Fragen stellen, z. B. , was das Ziel der Website ist und was sie sich davon erhoffen. Was die Kunden betrifft, können wir sie in vier Kategorien einteilen. Ein Privatkunde ist jemand, der das Projekt aus eigener Tasche bezahlt. Das können also unabhängige Fachleute wie wir, Freelancer, Berater oder Startups sein, die keine Finanzierung haben Ich würde sagen, diese Leute haben ein Maximum von 2.000$, aber wenn die Website einen großen Mehrwert bietet , können sie noch höher gehen Wenn es um Stundensätze geht, ist es für die Kunden etwas verwirrender zu verstehen, ob etwas billig oder teuer ist, denn wenn Sie nicht wissen, wie viel etwas kosten wird, wissen Sie nicht, ob beispielsweise 50$ pro Stunde teuer oder Es dauert zwei, 3 Stunden, ziemlich billig, aber wenn es 100 und 200 Stunden dauert, ist es ziemlich teuer Was bei Stundensätzen passiert, ist, dass Kunden in der Regel ihre eigenen Erfahrungen und ihre eigenen Vorstellungen darüber nutzen , ob etwas billig oder teuer ist , je nachdem, wie viel es pro Stunde kostet Und sie verwenden ihre eigene kulturelle Referenz, wo auch immer sie leben, wie viele verschiedene Dienstleistungen sie bezahlen , und vergleichen sie mit ihnen Und meine Regel bei Stundensätzen ist, dass sie niemals unter 20$ pro Stunde fallen, weil die meisten Ihrer Kunden aus Industrieländern und Industrieländern kommen , alles unter 20$ pro Stunde kommt dem Mindestlohn sehr nahe Und der Mindestlohn ist etwas, das, wissen Sie, ein Hausmeister bezahlt bekommen wird Sie bieten hochqualifizierte Dienstleistungen an und sollten nicht mit einem Mindestlohn bezahlt werden Und wenn Sie sich selbst wie ein Hausmeister bewerten, dann werden Sie wie ein Hausmeister aussehen und Sie werden alle anständigen Kunden abschrecken, und Sie werden alle anständigen Kunden abschrecken weil niemand möchte, dass seine Website von einem Hausmeister erstellt wird Haben Sie Studios und Agenturen wie Kreativstudios, Designagenturen, IT-Unternehmen In der Regel handelt es sich dabei um kleine und mittlere Agenturen und Studios, denn große haben meistens ihre eigenen Vollzeitmitarbeiter und engagieren sich nicht und müssen auch keine Freelancer einstellen Bei der Zusammenarbeit mit Agenturen ist der Stundensatz in der Regel aus zwei Gründen der beste Weg Erstens ist es einfach einfacher. Sie müssen nicht jedes Mal bei jedem neuen Projekt neu verhandeln jedes Mal bei jedem Und zweitens, weil die Überarbeitungen und Projekte einen gewissen Umfang haben, werden die Projekte im Grunde immer größer, und Sie müssen ein bisschen mehr Arbeit leisten, denn was passiert, ist, wenn Sie etwas entwerfen und etwas bauen, werden Sie Mitarbeiter innerhalb der Agentur haben , die Dann müssten Sie die Überarbeitungen vornehmen, und sie werden es an den Kunden senden, und dann haben die Kunden ihre eigenen Kommentare und ihre eigenen Änderungen, die sie vornehmen möchten, und dann müssen Sie dann eine weitere Überarbeitungsrunde durchführen. Bei einem festen Tarif muss sich das Studio selbst keine Gedanken über diese Änderungen machen, also werden sie alles aufhäufen , wenn sie Ihnen pro Stunde bezahlen Jetzt müssen sie etwas achtsamer und vorsichtiger sein achtsamer und vorsichtiger wie viele Überarbeitungen Sie machen, weil das von der Bezahlung abhängt, die sie von ihrem Endkunden erhalten. Und wenn sie mit den Endkunden arbeiten, arbeiten sie normalerweise nicht auf Stundenbasis. Unternehmen arbeiten normalerweise nicht auf Stundenbasis, sondern pro Projekt. Sie werden dem Endkunden also einen Pauschalpreis in Rechnung stellen und müssen sicherstellen, dass die Kosten nicht zu sehr aus dem Ruder laufen. Und wenn sie dir einen Pauschalpreis zahlen , dann ist es ihnen egal, und du kannst einfach, du weißt schon, so viel daran arbeiten, so viel sie wollen. den Stundensatz angeht, hängt es wirklich davon ab mit welcher Art von Kunden sie selbst zusammenarbeiten. Normalerweise würde ich sagen, dass sie zwischen 20 und 17 US-Dollar pro , sie werden nie über 17$ pro Stunde gehen Ich glaube, sie werden nie über 17$ pro Stunde gehen, dann wird es für sie Sinn machen, einen Vollzeitangestellten einzustellen und so viel wie möglich von ihnen herauszuholen Und das hängt auch davon ab , in welchem Land sie sich befinden, oder vielleicht sogar von der Stadt, in der sie ansässig sind, und davon, ob sie mit lokalen Kunden oder Online-Kunden selbst zusammenarbeiten oder Online-Kunden selbst Denn wenn sie mit lokalen Kunden zusammenarbeiten und Sie das wahrscheinlich leicht herausfinden können, dann bedeutet das, dass Sie mehr verlangen werden, oder? Denn bei den lokalen Kunden sind die Preise normalerweise höher, sind die Preise normalerweise höher weil Sie eine sehr begrenzte Anzahl von Agenturen und Studios in der Stadt haben von Agenturen und Studios in und Sie Ihre Kunden treffen, und die Dinge sind eher auf einer höheren Ebene als online, weil, Sie wissen schon, große Unternehmen werden keine Online-Agentur beauftragen. Sie werden jemanden einstellen, der vor Ort ist, jemanden, den sie treffen können, und jemanden, den sie verklagen können , wenn etwas schief geht. Wenn Sie mit Studios verhandeln, scheuen Sie sich nicht, Ihren üblichen Tarif zu senken , denn der ständige Arbeitsfluss und die Reduzierung der nicht abzurechnenden Stunden rechtfertigen den Rabatt, den Sie ihnen gewähren werden, absolut rechtfertigen den Rabatt, den Sie ihnen gewähren werden Wenn Sie mit direkten Endkunden arbeiten, müssen Sie tatsächlich Vorschläge machen, oder? Sie müssen Vorschläge oder Verträge einreichen und Verhandlungen führen, Interviews führen und solche Dinge. Aber wenn du mit Studio arbeitest, machst du das nur einmal, oder? Und dann müssen Sie bei jedem neuen Projekt, das Ihnen in den Weg kommt , nicht diesen ganzen Prozess der Verhandlungen und Interviews oder all diese Dinge durchlaufen Verhandlungen und Interviews oder , weil die Agentur im Studio das mit dem Endkunden selbst macht Sie erhalten also das Projekt , das bereits startklar und baubereit Dann haben Sie kleine und mittlere Unternehmen. In der Regel handelt es sich dabei um mittelgroße Unternehmen, die Geld verdienen, oder um Startups , die über Finanzmittel verfügen. Normalerweise würden diese Leute wahrscheinlich ab 2000 und höher arbeiten, bis sie vielleicht 1015000 Und schließlich haben Sie große Unternehmen mit Mitarbeitern, die viel Geld verdienen, und diese Leute beginnen wahrscheinlich bei 15.000 Aber um diese Leute musst du dir keine Sorgen machen weil sie nicht wirklich mit Freelancern zusammenarbeiten Sie beauftragen gerne Unternehmen und Studios, insbesondere lokale. Jetzt brauchen Sie sich keine Sorgen mehr um sie zu machen, weil ich noch nie mit ihnen zusammengearbeitet habe und ich kenne keine Freelancer, die am Ende mit großen Unternehmen zusammenarbeiten. Lassen Sie uns noch einmal zusammenfassen Deshalb richten wir unseren Preis danach , wer unser Kunde ist Je wertvoller die Website für ihn ist, desto mehr berechnen wir dafür Um zu verstehen, wer unsere Kunden sind, müssen wir mehr über sie herausfinden. Wo werden sie bezahlt? Was erhoffen sie sich von der Website? Benötigen sie eine Website für sich selbst oder sind sie eine Agentur? Und schlagen Sie dann den Preis entsprechend vor. 170. Preisgestaltung: Stündlich vs. Festpreis: Lassen Sie uns Stundentarife mit Festpreisen vergleichen. Beide haben ihre eigenen Vor- und Nachteile. Das Gute an der Berechnung eines Stundensatzes ist, dass es sehr einfach ist Sie müssen sich nicht wirklich den Kopf zerbrechen, um zu berechnen, wie viel Sie für ein bestimmtes Projekt kosten sollten. Geben Sie einfach einen Preis an und fertig. Sie müssen nicht jedes Mal verhandeln wenn Sie mehr Aufträge von demselben Kunden haben. Sie müssen sich keine Sorgen machen, dass Überarbeitungen außer Kontrolle geraten. Mehr Überarbeitungen bedeuten mehr Geld. Besprechungen und Kommunikation können viel Zeit in Anspruch nehmen. Einige Kunden möchten vielleicht regelmäßig Skype-Besprechungen, aber wenn Sie ihnen auch das in Rechnung stellen, und das sollten Sie, dann werden sie sicherstellen, dass Ihre Zeit nicht verschwendet wird. Und wenn sie das tun, werden Sie zumindest dafür bezahlt. Der Nachteil des Stundensatzes ist , dass er für die meisten Kunden nichts aussagt Zum Beispiel 100$ pro Stunde. Ist das teuer oder ist das billig? Wer weiß? Wenn du in 3 Stunden fertig bist, dann ist es billig, aber wenn du 80 Stunden brauchst, dann ist es teuer. Auch Kunden reagieren emotional auf bestimmte Stundensätze. Sie werden bestimmte Tarife als zu teuer empfinden, auch wenn der Endpreis derselbe ist. Es könnte ihnen gut gehen, 5.000 Dollar für die Website zu zahlen, aber wenn Sie ihnen 100 Dollar pro Stunde sagen , könnten sie ausflippen Für Kunden ist es schwieriger , sich zu entscheiden, da aufgrund Stundensatzes ungewiss ist wie hoch die endgültige Rechnung sein wird Je effizienter und schneller Sie Ihre Arbeit erledigen, desto weniger verdienen Sie pro Projekt. Der Vorteil eines Festzinses besteht darin , dass er einfacher zu verkaufen ist. Kunden sehen eine klare Zahl und fühlen sich damit sicherer. Je effizienter Sie werden, desto mehr Geld verdienen Sie. So haben Sie die Möglichkeit, viel mehr Geld pro Stunde zu verdienen , ohne zu teuer auszusehen. Es gibt keine Begrenzung, wie viel Sie verlangen können, wohingegen bei einem Stundensatz mentale Grenzen gesetzt sind. Zum Beispiel werden 300 Dollar pro Stunde für die meisten Kunden eine mentale Grenze sein. Das Schlechte an festen Zinssätzen ist, dass Änderungen außer Kontrolle geraten können, wenn sie nicht klar definiert sind Zum Beispiel zwei kostenlose Überarbeitungen und danach die Anwendung eines bestimmten Stundensatzes Und wenn Ihr Kunde nach einer dritten Revision fragt, werden Sie anfangen, ihm eine Gebühr zu berechnen. Es kann manchmal unangenehm sein, darüber zu sprechen. Es ist ziemlich unangenehm für mich, aber ich habe meine Lektion gelernt, als ich aufgrund endloser Überarbeitungen für eines der Projekte einen Mindestlohn verdient einen Mindestlohn aufgrund endloser Überarbeitungen für eines der Projekte Ein weiterer Nachteil ist, dass das Rechnen mühsam ist. Sie müssen zusätzliche Arbeit in die Berechnung investieren , um genau zu definieren, wie lange Sie brauchen werden, um das Projekt abzuschließen , und um sicherzustellen , dass Sie einen profitablen Preis dafür festlegen. Es beinhaltet viel Rätselraten, und bis Sie all Ihre Lektionen auf die harte Tour gelernt haben, verlieren Sie am Ende etwas Geld Also welches solltest du wählen? Genau wie bei Beträgen ist es eine gute Idee, von Fall zu Fall und von Kunde zu Fall zu gehen. Bei Studios und Agenturen wäre es zum Beispiel wahrscheinlich am besten, wäre es zum Beispiel wahrscheinlich am besten, Stundensätze zu Und wenn es um endgültige Pfandrechte geht, dann wahrscheinlich feste Tarife und Pauschalpreise Da feste Tarife am Anfang etwas schwieriger zu handhaben sind , ist es in Ordnung, Stundensätze für alle zu Ich selbst habe eine gemischte Mischung aus Burritos. Ich habe mit einem Pauschalpreis angefangen, aber bald darauf habe ich gemerkt, dass ich Geld verloren habe , weil ich die Schätzungen nicht richtig gesetzt habe, und ich habe Geld durch Überarbeitungen verloren Dann habe ich auf Stundensatz umgestellt, was großartig war, und ich habe lange Zeit den Stundensatz beibehalten , weil es für mich einfach war Ich liebe die Einfachheit von und jetzt habe ich irgendwie beides. Bei meinen langjährigen Kunden mache ich einen Stundentarif und bei neuen Festsatz. Aber bei langjährigen Kunden arbeite ich stundenweise, weil ich viele verschiedene Arbeiten mache , wie z. B. das Design von Benutzeroberflächen, zum Beispiel für mobile Apps, und diese Sportprojekte können ungeheuer groß werden und sie sind seltsam und es ist unmöglich , einen Pauschalpreis Ich verwende also einfach stündlich, weil es einfach ist und es leicht macht ein letztes Kriterium zu berücksichtigen, nämlich, das auszuwählen, womit Sie sich wohl fühlen Denn letzten Endes ist es Ihre Arbeit und Sie müssen das jeden Tag tun, und es ist wichtig, jeden Aspekt Ihrer Arbeit so angenehm wie möglich zu gestalten . Und wenn dir etwas Angst macht, so wie es bei mir der Fall war, dann ist es okay, etwas Geld für Seelenfrieden und Komfort zu opfern . 171. Angebotsvorlage: Festpreis: Bei Freelancer-Plattformen liegt es ganz bei Ihnen, wie Sie Vorschläge senden Du kannst ihnen eine E-Mail schicken, ihnen eine Nachricht schicken, es ihnen am Telefon mitteilen oder ihnen einen Raven schicken Es liegt ganz bei dir. Du bist der Boss. Manche Optionen sind besser als die anderen. Wenn Sie seriös aussehen und Ihre Kunden beeindrucken möchten, ist das Senden eines gut gestalteten Angebotsdokuments der richtige Ansatz. Das ist es, was professionelle Freelancer tun. Um Ihnen zu helfen, mehr Geschäfte abzuschließen, habe ich eine sehr solide Angebotsvorlage für Sie erstellt Es ist eine Figma-Datei, den Link finden Sie in den Ressourcen Wie Sie feststellen können, ist es im gleichen Thema wie die Portfolio-Website gestaltet gleichen Thema wie die Portfolio-Website Es wird Ihnen helfen, Ihre persönliche Marke zu etablieren und Sie professioneller aussehen zu lassen, Sie professioneller aussehen zu lassen, wie jemand, der über die kleinsten Details nachgedacht hat. Sie werden sich sofort von der Konkurrenz abheben, und sich abzuheben ist das, was Sie brauchen, wenn Ihre Kunden mehrere Freelancer zur Auswahl haben Lassen Sie mich Sie durch den Inhalt und erklären, warum ich das, was ich eingegeben habe , eingegeben habe und welche Dinge Sie bearbeiten müssen , wenn Sie ein Angebot erstellen Der Header ist ziemlich einfach. Bearbeiten Sie das Logo und fügen Sie in die Überschrift ein, was Sie wollen. Sie können sogar ihren Firmennamen erwähnen, z. B. den Vorschlag für eine Google-Website. Es ist eine nette persönliche Note und Ihre Daten und die Daten Ihres Kunden. Der Überblick ist ein Ort, an dem Sie zeigen , dass Sie das Projekt verstehen und wissen, was Sie tun werden. Sie teilen ihnen Ihr Ziel und erklären, was das Endergebnis ist. habe ein kleines Detail darüber eingefügt, wie ihre Website auf fantastischen Webflow-Servern gehostet wird, wodurch sie sicher und Dies ist ein guter Ort, um ein wenig darzulegen, wie gut das Endergebnis sein wird, um für Begeisterung zu sorgen Nein, du verkaufst nicht, wie toll du bist. Sie wollen eine Website, nicht um sich mit dir zu verabreden. Dann haben wir eine Preisaufschlüsselung. Dies ist ein Pauschalpreis. Ich habe auch eine Vorlage für Projekte mit Stundensatz erstellt. Es hat eine andere Preistabelle und einige andere Inhalte sind auch anders, was ich später erläutern werde. Die Preisaufschlüsselung zeigt verschiedene Teile Ihres Jobs. Wenn Sie mehr Artikel haben, können Sie die Zeilen einfach duplizieren und nach Belieben weitere hinzufügen oder entfernen. Ich mag es, Design und Entwicklung in separate Elemente zu unterteilen . Es gibt zwei verschiedene Phasen, und bei manchen Projekten kann man sogar nur eine davon durchführen. Wenn sie beispielsweise bereits Designs haben, können Sie einfach die Webflow-Entwicklung durchführen Ich habe auch einige zusätzliche Dinge hinzugefügt , die im Preis enthalten sind Es erhöht den Wert, den sie aus dem Preis ziehen, wie z. B. reaktionsschnelle Entwicklungs - und Schulungseinheiten. Auf diese Weise sieht die Preisliste viel wertvoller und voller Vorteile aus als nur ein einziger Wert von 2.500$ Es fühlt sich an, als ob sie noch viel mehr bekommen. Was diese speziellen Werte angeht, so gebe ich hier nur Zahlen an, das heißt nicht, dass Sie dafür Gebühren erheben sollten. Sie können weniger oder deutlich mehr als diesen Wert verlangen. Das hängt alles von der Kundenkategorie ab, mit der Sie zusammenarbeiten werden, wie wir in der Preisklasse besprochen haben. Ich gebe Ihnen nur einen Rat zu Werten. Verwenden Sie runde Werte. Tun Sie nicht 999. Das wird einfach dämlich aussehen. Ihre Kunden sind sich der Tatsache bewusst, dass Sie derjenige sind, der diese Preise festlegt, dass es keine komplexe Preisgleichung gibt , die Sie verwenden, also runden Sie sie auf oder Sie werden albern aussehen Unter der Preistabelle befindet sich eine Zeile, die besagt, dass Webflow-Hosting nicht enthalten ist Transparenz ist in solchen Beziehungen von entscheidender Bedeutung. Vergessen Sie nicht, in Anführungszeichen wichtige Dinge zu erwähnen, insbesondere Kosten. Als Nächstes haben wir einen Zeitplan. Das wollen Kunden wirklich wissen. Wenn Sie also so viel wie möglich aufschlüsseln, gehen Kunden mit ihrem Geld und ihrer Zeit ein großes Risiko ein. Sie wollen die Kontrolle über ihr Projekt haben. Sie wollen also genau wissen wie sich die Dinge entwickeln werden, damit sie sich in Frieden fühlen und sie werden dir mehr vertrauen. Dies sind grobe Schätzungen. Projekte entsprechen nie genau dem vorhergesagten Zeitplan. Es hängt nicht nur von Ihnen Wie schnell Kunden Ihnen ihr Feedback zu jeder Phase geben, wie viele Iterationen Sie durchlaufen und wie schnell sie die erforderlichen Inhalte bereitstellen, und wie schnell sie die erforderlichen Inhalte bereitstellen wird sich erheblich auf den Projektzeitplan auswirken Oft tauchen während des Projekts einige andere Aufgaben auf. Sie fragen dich vielleicht nach kleinen Dingen , die sich am Ende summieren werden Wenn Sie nach einem Stundensatz arbeiten, ist das kein Problem. Aber bei einem Flatrate-Projekt werden Sie bald Geld verlieren, wenn Sie nicht klarstellen was passieren wird, wenn zusätzliche Arbeit anfällt, die außerhalb des Hauptumfangs liegt, auch wenn es sich nur um zusätzliche Arbeit anfällt, die außerhalb des Hauptumfangs liegt, zusätzliche Besprechungen handelt , die Ihre Zeit in Anspruch nehmen. Ich selbst musste das auf die harte Tour lernen . Ich hatte einen Kunden, der sich fast jeden Tag treffen wollte. Ich glaube, er hatte einfach Spaß daran reden und zu brainstormen Aber für mich hat es einfach zu viel Zeit in Anspruch genommen und ich wurde nicht dafür bezahlt Wenn du einen Stundensatz für zusätzliche Arbeit festlegst, dann ist das für alle klar. Der letzte Teil sind Begriffe. Ich habe einige wichtige Punkte aufgelistet, um Klarheit darüber zu haben wie die Dinge funktionieren werden, und um zukünftige Meinungsverschiedenheiten zu vermeiden Diese Bedingungen sind wahrscheinlich nicht rechtsverbindlich. Ihr Zweck ist Klarheit, damit alle auf derselben Wellenlänge sind. Zum Beispiel hat es eine Zahlungsstruktur. Wenn Sie mit Fremden außerhalb der Plattform zusammenarbeiten, sollten Sie eine Vorauszahlung vornehmen Ein Wert von 25% ist normalerweise eine gute Idee. Das ist meine Struktur, aber Sie können sie jederzeit ändern, wie Sie möchten. Und natürlich können Sie jede dieser Bedingungen ändern oder Ihre eigenen hinzufügen. Das endgültige Format kann als PDF vorliegen oder Sie können sogar einen Link zur Prototyp-Ansicht teilen, wie ich es gerade zeige, aber ich denke, PDF ist eine bessere Option. Sie wissen bereits, wie man exportiert. Gehen Sie einfach zum Eigenschaftenfenster, Exportieren, wählen Sie PDF und das ist alles. Ich möchte Ihnen eine Regel geben, wenn es darum geht, Vorschläge außerhalb von Plattformen zu senden. Überrasche sie nicht. Wenn Sie also einen Vorschlag schicken und sie den Wert bekommen, und dieser Wert, wenn das vielleicht zu viel für sie ist oder es teuer ist, wird es sie überraschen und ein wenig schockieren und, Sie wissen schon, sie irgendwie enttäuschen Und weil Sie es in das Dokument aufgenommen haben und es sozusagen schon als etwas Schriftliches und als etwas Bestimmtes geschickt haben, dann haben sie keine Möglichkeit, sich zu widersetzen oder zu verhandeln, und Sie selbst haben keine Möglichkeit, Argumente und Preisvorteile vorzubringen und ihnen zu Argumente und Preisvorteile vorzubringen und sagen und ihnen zu erklären , warum es gut ist , dass sie mit Ihnen gehen und so weiter, oder? Sie sind auch nicht in der Lage, vielleicht zu verhandeln und ihnen vielleicht einen Rabatt zu geben , weil Sie das vielleicht manchmal als Puffer in den Preis einrechnen müssen, oder? Sie legen also ein bisschen als Puffer fest, um sicherzustellen, dass Sie es herunterhandeln können , wenn sie wollen, wenn sie Sie um den Rabatt bitten, oder manchmal können Sie sogar den Preis senken, indem Sie vielleicht Anzahl der Überarbeitungen streichen oder etwas weniger tun , oder, Sie wissen schon, es gibt viele verschiedene Möglichkeiten Dinge zu verschieben, um den Preis zu senken, wenn Sie können sich den Wert, den Sie ihnen gegeben haben , wirklich nicht leisten Der richtige Ansatz besteht also darin, den Preis während des Treffens zu besprechen. Sie müssen sich also nicht endgültig darauf einigen, aber was Sie tun können, eine wichtige Sache ist gewisse Reichweite zu geben Sie sind also nicht überrascht , wenn Sie ihnen einen endgültigen Wert geben Und was Sie während des Treffens tun können , ist das, was ich zum Beispiel mache. Ich habe ein Meeting wie ein Skype-Meeting oder ein persönliches Treffen. Und wenn wir zu dem Treffen gehen, stelle ich viele Fragen über das Projekt, und ich habe bereits eine Art von Voreingenommenheit im Kopf, auf die ich mich einlassen möchte. Ich habe quasi diese Bandbreite, das ist quasi ein Minimum, für das ich bereit bin zu arbeiten , und ich mag einen idealen Preis , den ich daraus herausholen möchte. Sobald ich die Fragen gestellt habe, verstehe ich, ob die Website nur ein oder zwei Seiten ist oder ob die Website vielleicht eine große Website mit, du weißt schon, 25 verschiedenen Seiten oder einem Blog oder so etwas ist. Und ich denke mir eine Spanne aus, die vielleicht mindestens 4000-6.000 $ beträgt, und dann gebe ich ihnen diese Und wenn sie irgendwelche Einwände dagegen haben , besprechen wir das, und ich kann Leistungen anbieten und ihnen sagen, wissen Sie, warum das eine gute Option für sie ist und warum der Preis es und ich kann Leistungen anbieten und ihnen sagen, wissen Sie, warum das eine gute Option für sie ist wirklich wert ist Und wenn sie es zum Beispiel nicht tun, kann es manchmal sein, dass ich ihnen einen Wert gebe, und sie haben etwas weniger als 1.000 erwartet Jetzt weiß ich, dass wir einfach schlecht zusammenpassten und, weißt du, ich werde eine Website nicht für eine große Website, weniger als 1.000, funktionieren lassen. Ich muss mir also nicht die Mühe machen, den Vorschlag zu erstellen und E-Mails zu versenden, einfach alles. Wir verstehen sofort, dass wir uns hier wirklich in einem anderen Spiel und dass wir nicht gut zusammenpassen, also spare ich viel Zeit. Aber wenn wir uns immer noch in der richtigen Phase befinden, können wir bei Bedarf verhandeln. Aber wenn der Preis auch gut klingt, dann bereite ich, sobald ich mit dem Treffen fertig bin , den Vorschlag vor, und wahrscheinlich würde ich etwa 5.000$ für die Website ausgeben, und jetzt erwarten sie diesen Preis und sie sind nicht überrascht, und wir haben einen Deal 172. Angebotsvorlage: Festpreis: Was den Vorschlag für einen Stundensatz anbelangt, spielten dieselben zehn die meiste Rolle. Der erste Unterschied besteht in der Preistabelle, natürlich viel einfacher ist, nur ein Tarif. Manchmal möchten Sie vielleicht unterschiedliche Tarife für verschiedene Aufgaben haben . Dann können Sie einen zusätzlichen Rohtarif hinzufügen und einen anderen Tarif für diesen Service festlegen. Ich habe das einmal mit meinem ersten Webflow-Client gemacht. Zu der Zeit hatte ich nicht viel Erfahrung mit der Entwicklung und Webflow Ich hatte gerade zwei Übungsprojekte gemacht, aber ich hatte solide Designerfahrung und wusste, dass ich in Webflow nicht sehr schnell sein würde Deshalb habe ich einen ermäßigten Preis für die Entwicklungsphase angeboten, um meinem Kunden gegenüber fair zu sein Ich habe hier einen Absatz hinzugefügt, um zu erklären, wie die Dinge funktionieren werden, zum Beispiel , dass Sie ihnen alle zwei Wochen die in diesem Zeitraum protokollierte Zeit in Rechnung stellen werden alle zwei Wochen die in diesem Zeitraum protokollierte Zeit Es liegt an Ihnen und Ihrem Kunden, wie Sie das arrangieren. Wenn Sie möchten, können Sie einmal pro Woche oder einmal im Monat abrechnen. Ich habe auch einige Änderungen an den Bedingungen vorgenommen, z. B. an der Zahlungsstruktur und den Stornierungsbedingungen. Verwenden Sie diese Bedingungen nicht als Rechtsberatung. Ich bin kein Anwalt und habe diese Bedingungen auch nicht auf der Grundlage eines rechtlichen Rahmens erstellt . Es liegt an Ihnen und Ihrem Mandanten, ein klares Verständnis für einige wichtige Dinge zu haben . Wir werden im späteren Video über Verträge sprechen. Wenn Sie mit Stundensätzen und außerhalb von Plattformen arbeiten, müssen Sie ein Zeiterfassungstool verwenden. Das, das ich verwende, ist Top Tracker. Ich habe viele ausprobiert, und dieser scheint der beste zu sein, zumal er völlig kostenlos ist . Zumindest vorerst ist es das. Es hat eine Desktop-App. Sobald ich es öffne, sind alle meine laufenden Projekte da, dann wähle ich das Projekt aus und beginne mit der Nachverfolgung. So einfach ist das. Ich verfolge alles über das Projekt. müssen nicht nur Design und Entwicklung, Besprechungen, Kommunikation usw. sein. Das ist alles Teil des Projekts. Ich habe den Link zu Top Tracker in den Bereich Ressourcen unter Produktivität eingefügt Dort finden Sie weitere Tools für Freelancer Zum Beispiel WAV, das ich für die Rechnungsstellung verwende, sind ebenfalls Online-Angebotstools Bonsai hat hier zum Beispiel eine Angebotsfunktion. Ich verwende diese Online-Angebotstools nicht, weil Figma, ich mein Angebot nach meinen Wünschen gestalten kann, sodass es zu meiner Marke passt und insgesamt flexibler Aber bei diesen Tools muss ich mich an ihre Vorlagen halten. Falls Sie sie ausprobieren möchten, hier sind sie. Und das ist Ihre Angebotsvorlage. Benutze sie, nimm sie an, wie du willst. Ich habe hier Dinge zusammengestellt, die ich selbst benutze und was ich im Laufe der Jahre gelernt habe , als ich einige Fehler mit Kunden gemacht habe und in einige Missverständnisse geraten Sie können meine Erfahrung als Startrunde nutzen. 173. Freiberufler-Vertrag: ist überraschend, aber ich mache eigentlich keine Verträge mit meinen Kunden. Ich kann mich nicht darum kümmern. Das macht die Dinge zu ernst. Und selbst wenn etwas schief geht, werde ich wahrscheinlich nie rechtliche Schritte einleiten. Es hat also wirklich keinen Sinn für mich. Aus diesem Grund stelle ich sicher, dass nichts schief geht. Hier sind einige Vorsichtsmaßnahmen, die ich treffe, um sicherzustellen, dass das Projekt reibungslos verläuft und ich am Ende bezahlt werde. Dies gilt hauptsächlich für die Arbeit außerhalb der Plattform. Auf Plattformen wie Upwork wird der Vertrag dort abgewickelt Es liegt in ihrem Interesse , dass du bezahlt wirst. Und wenn etwas schief geht, dann werden sie vermitteln und entscheiden, wer Recht oder Unrecht Unabhängig davon, ob Sie mit einem Vertrag arbeiten oder nicht, finden Sie hier einige Vorsichtsmaßnahmen um sicherzustellen, dass nichts schief geht Zunächst müssen Sie sicherstellen, dass Sie sich mit Ihrem Kunden im Klaren sind im Projekt zu keiner Zeit zu Überraschungen kommt. Dafür verwende ich mein Angebotsdokument und stelle sicher , dass dort alles steht möglicherweise in Zukunft auftauchen könnte. Und wenn es zu Meinungsverschiedenheiten kommt, können wir jederzeit zu dem Vorschlag zurückkehren und nachschauen, was dort steht Bei der Zusammenarbeit mit Kunden auf dem ganzen Kontinent ist es oft einfacher, einen Vertrag zu brechen, aber es ist nicht so einfach, eine Beziehung zwischen Menschen zu brechen und zu ruinieren Wenn ich also mit Kunden zusammenarbeite, und normalerweise arbeite ich mit Kunden im Ausland und auf verschiedenen Kontinenten, versuche ich, persönlich über Skype zu kommunizieren, hauptsächlich weil die persönliche Interaktion mit Menschen und dieser persönlichen Beziehung eine andere Art von Bindung zwischen Kunden und mir schaffen . Und diese Beziehung zu beenden ist viel schwieriger, wenn sie mich bereits gesehen haben und wenn wir während des Anrufs etwas Interaktion hatten , als wenn ich nur ein Typ mit einem Profilbild und einem Benutzernamen oder nur einer E-Mail-Adresse wäre. Außerdem kann ich viele Informationen über meine Kunden gewinnen Informationen über meine Kunden sie besuche und mit ihnen spreche. Ich benutze meine beschissenen Sensoren , die Mutter Natur mir gegeben hat, und ich kann spüren, ob an ihnen etwas zwielichtiges und faul ist etwas zwielichtiges und faul Bei Neukunden stelle ich ihnen während des gesamten Projekts immer Schritt für Schritt eine Rechnung ihnen während des gesamten Projekts immer Schritt für Schritt Ich warte nicht, bis das gesamte Projekt abgeschlossen schicke dann endlich den gesamten Wert und hoffe dann, dass sie zahlen. Wenn ich mit völlig Fremden zusammenarbeite, mit denen ich noch nicht zusammengearbeitet habe und es außerhalb der Plattform ist, dann werde ich eine Vorauszahlung von 25% verlangen Auf diese Weise kann ich das Risiko zwischen mir und dem Kunden ausgleichen , denn wenn ich von ihm eine 100-prozentige Vorauszahlung verlange, trägt er das volle Risiko Und ich möchte meine Kunden nicht in diese Situation bringen, sie werden auch nicht dazu bereit sein, oder wenn ich am Ende des Projekts zu 100% abrechne, dann gehe ich das volle Risiko Ja, wenn sie nur 25% im Voraus fragen, gehen sie selbst ein geringes Risiko ein, aber ich habe noch mindestens 75% Restzahlungen übrig mich zu motivieren, den Rest der Arbeit zu erledigen Bei bestehenden Kunden, mit denen ich bereits zusammengearbeitet habe und denen ich vertraue, und sie haben mich bereits für frühere Projekte bezahlt und ich habe immer pünktlich bezahlt, dann kann ich mich entspannen und ihnen am Ende des Projekts problemlos eine Rechnung stellen, und zwar zu 100% Aber genau das mache ich. Das heißt nicht , dass Sie das auch tun sollten, selbst urteilen und die Beziehung sehen sollten, die Sie zu Ihren Kunden haben. Außerdem vertraue ich meinen Kunden oft gerne, und wenn ich sehe, dass wir eine gute Beziehung haben, zeige ich ihnen gerne, dass ich ihnen vertraue und dass ich ihnen gegenüber nicht misstrauisch bin, denn wenn ich ihnen vertraue, dann wissen sie, dass sie mir vertrauen können Irgendwie ist es eine gemeinsame Sache. Wenn du ihnen vertraust, dann fühlen sie sich verpflichtet, dir wieder zu vertrauen , und das schafft einfach eine sehr gute Beziehung. Aber wenn ich ihnen gegenüber immer misstrauisch bin, dann, weißt du wird die Beziehung etwas kalter sein. Wenn Sie schlechte Erfahrungen gemacht haben, passen Sie Ihre Strategie an. Wenn jemand Ihr Vertrauen missbraucht und Sie nicht pünktlich bezahlt, dann stellen Sie sicher, dass Sie Ihre Strategie ändern, keine Ausreden, keine zweiten Chancen und bitten Sie um Vorauszahlungen Ich hatte nur einmal ein Zahlungsproblem. Ich habe mit dem Startup gearbeitet. Ich habe die Website für sie erstellt und sie haben auf eine Investition gewartet auf eine Investition und konnten mich nicht pünktlich bezahlen, und ich musste ihnen hinterherlaufen, und es war unklar, wann sie mich bezahlen würden. Ich musste sie anrufen und ihnen all das Zeug mailen. Am Ende haben sie mich bezahlt und Verzögerung war nicht so groß, aber nach diesem Moment, sie mein Vertrauen missbraucht haben, war's das für mich. Und dann, nach dem Moment, habe ich ihnen alles , was ich mit der Website zu tun hatte, einfach im Voraus in Rechnung Sie sagten, weißt du, oh, kannst du das bearbeiten? Ich meinte, klar, hier ist die Vorauszahlung. Du bezahlst mich, ich mache den Job. Wenn du mich nicht bezahlst, fasse ich es überhaupt nicht an. Wenn dir jemand zeigt, dass er nicht vertrauenswürdig ist, glaube ihm und ergreife entsprechende Maßnahmen. Wenn Sie sich sicherer fühlen würden, Verträge zu unterzeichnen oder wenn Ihr Kunde direkt danach fragt, können Sie einen Vertrag auf Bonsai Bonsai ist diese Freelancer-Lösung , die Rechnungsvorschläge und ähnliches bietet, und sie haben auch diesen Vertrag, den Sie für bestimmte Design- oder Webdesign-Arbeiten erstellen können für bestimmte Design- oder Webdesign-Arbeiten erstellen Es ist ein wirklich netter, anpassbarer Vertrag. Alle hervorgehobenen Teile sind das, was Sie bearbeiten und in die Sie Ihre Informationen eingeben. Den Rest können Sie intakt lassen , da er von ihren Anwälten erstellt wurde. Die Bearbeitung hervorgehobener Teile ist sehr einfach und bietet Ihnen die Möglichkeit, einfache Fragen zu stellen. So können Sie diese Fragen beantworten und das automatische Ausfüllen in einer Sprache, die für Verträge geeignet ist, ist ganz einfach die für Verträge geeignet ist, ist Sie haben großartige Arbeit geleistet. Wenn Sie es also brauchen, melden Sie sich einfach bei Bonsai an und schließen Sie dort einen Vertrag ab 174. Webflow an Kunden verkaufen: Ihre Kunden werden Erfahrung mit Webflow haben und möchten, dass die Website direkt darin integriert ist, und sie werden speziell nach Webflow-Designern suchen Webflow-Designern Aber andere sind vielleicht nicht einmal mit Webflow vertraut, sodass Sie sie irgendwie davon überzeugen müssen , Webflow als Plattform zu verwenden Diese Clients können in zwei Typen aufgeteilt werden. Diejenigen, die keine Anforderungen haben , wo Sie die Website erstellen werden. Und zweitens diejenigen, die eine Art Präferenz für eine bestimmte Plattform haben , normalerweise ist das WordPress. Webflow an diejenigen zu verkaufen, die keine bestimmten Anforderungen oder Vorlieben haben , wo Sie es entwickeln werden , braucht wirklich nicht viel Überzeugungsarbeit Die meisten meiner Kunden sind so, und sie vertrauen normalerweise einfach meinem Fachwissen, wo ich die Website erstellen werde Das einzige, was vielleicht ein bisschen überzeugt werden muss , sind die Hosting-Kosten von Webflow Eines ist jedoch wichtig zu beachten, dass das Hosting auch bei anderen Optionen Geld kostet Auch wenn es Board Press ist, ist WordPress selbst kostenlos, aber das Hosting ist kostenpflichtig. Die Website muss also irgendwo leben. Normalerweise werden es mindestens 5$ pro Monat sein. Nun, wo die Preise privates Hosting wirklich sinken und es pro Website wirklich billig machen , ist, wenn Sie mehrere Websites hosten , weil reguläre private Hosting-Anbieter Ihnen auch den Preis geben, den ich Ihnen gerade gegeben habe, war nur für ein Website-Hosting, aber mit einer sehr geringen Preiserhöhung, glaube ich, zwei, 3$ pro Monat erhöhen, jetzt bieten sie Ihnen einen anderen Plan , mit dem Sie eine unbegrenzte Anzahl von Websites hosten können Und hier sinken die Preise pro Website wirklich. Aber das Problem ist, dass Stammkunden diesen Vorteil nicht wirklich nutzen können , weil Stammkunden normalerweise ein Unternehmen haben und eine Website benötigen, oder? Sie werden also niemals davon profitieren, 100 verschiedene Websites auf einem einzigen Plan zu hosten 100 verschiedene Websites auf , da sie nicht 100 verschiedene Websites benötigen. Sie haben nur eine Website, oder? Und ich meine Website, weil wir natürlich auch bei Webflow eine Website haben können Wir zahlen nur einen Tarif, aber wir haben, er kann tausend Seiten haben . Das ist eine andere Geschichte. Ich spreche von verschiedenen Websites unterschiedlichen Webadressen und ähnlichen Dingen, oder? Das ist also die große Art von Geldersparnis beim privaten Hosting. Wenn ich zum Beispiel ein WordPress-Entwickler wäre, könnte ich mein eigenes Konto haben, direkt mit einem Hosting-Paket, und dann würde ich jede Website, die ich für all meine Kunden erstelle, ich für all meine Kunden erstelle, dort hosten, richtig Also pro Website, weißt du, wäre der Preis sehr, sehr billig, richtig, weil ich nur ein Konto habe, einen Hosting-Plan, und dann geht jede Website dort hin. Und was ich dann tun kann, ist, meinen Kunden jährliche Hosting-Kosten oder Verwaltungsgebühren für jede Website in Rechnung zu meinen Kunden jährliche Hosting-Kosten stellen, und dann würde ich die Differenz einstecken. Und genau das tun offensichtlich viele Webentwickler. Aber das ist dann am Ende des Tages ein ähnlicher Preis wie für den Kunden. Für den Kunden haben sie also nicht wirklich viele Optionen, weil kein Webentwickler diese sehr gute Gelegenheit verpassen wird , zusätzliches Geld zu verdienen und völlig kostenloses Hosting anzubieten, richtig, weil er immer noch dafür und all das bezahlen müsste . Warum sollten sie es also kostenlos anbieten? Für weitere wichtige Vorteile von Webflow erhalten Sie nun ein sogenanntes Managed Hosting Managed Hosting bedeutet, dass sie im Hintergrund viel für Sie erledigen, Dinge, über die Sie oder Ihr Kunde sich nie Gedanken machen müssen, wie automatische Backups, Sicherheit, Malware-Scannen und -Entfernung, Server-Site, Softwareupdates , Leistungsverbesserungen und vieles mehr, das ich nicht verstehe und das mir auch egal ist, solange es erledigt ist Die Wartung der Sicherheit ist ein großes Problem bei Servern. Ich hatte einmal eine Wordpress-Seite, die ich selbst auf einem Chip-Server gehostet habe. Eines Tages kam etwas Schadsoftware rein und hat meine Seite auf den Kopf gestellt Die Seite wurde ständig ein- und ausgeschaltet. Die Malware nutzte meine gesamte Serverbandbreite. Ich konnte nicht herausfinden, wie ich das verdammte Ding entfernen sollte. Es war meine persönliche Seite, also habe ich einfach beschlossen, das Ganze herunterzunehmen und das Hosting zu kündigen. Und wenn das für den Unterschied nicht genug ist, dann ist es das. Ein typisches günstiges Hosting-Angebot bietet Ihnen normalerweise einen Serverplatz an einem einzigen Standort, einem Computer, der als Server bezeichnet wird und auf dem sich Ihre Website befindet. Wenn ich in Australien bin und der Server in den USA steht, muss der Inhalt einer Website über Kabel von den USA nach Australien übertragen werden. Dadurch entsteht eine Nebenlast wie bei einer Schnecke, aber Webflow-Hosting verfügt über sogenanntes CDN Content Mit Webflow wird Ihre Website vom Server geladen, der dem Benutzer am nächsten ist Wenn sich ein Benutzer also in Japan befindet, wird die Website von einem Server in der Nähe in Tokio geladen , nicht von Kalifornien Natürlich ist Webflow nicht das einzige Hosting, das dies anbietet, aber sobald Sie die CDN-Funktion auf regulären Servern hinzufügen, steigen die Preise und kommen den Webflow-Preisen ziemlich nahe Und wenn das nicht genug ist, hat Webflow noch einen Trick Dies ist ein Vorteil, den reguläre verwaltete Server nicht bieten Sie sehen, reguläre Server müssen auf alles vorbereitet sein. Benutzer können WordPress, Juma, Drupal oder sogar alle drei dieser Systeme installieren oder sogar alle drei dieser und sie alle gleichzeitig ausführen Dies stellt für den Server keine Probleme dar, bedeutet aber, dass er nicht vollständig optimiert werden kann , um nur ein bestimmtes System wirklich gut laufen zu lassen Auf Webflow-Servern muss nur ein System ausgeführt werden, Webflow. Es ist also sehr fein abgestimmt, um nur Webflow auszuführen. Jetzt gibt es natürlich vergleichbare Hosting-Anbieter, die alle Vorteile von Webflow bieten, die sich auf eine einzige Plattform spezialisieren , verwaltet werden und Cdian-Funktionen beinhalten, aber am Ende sind sie teurer als Zum Beispiel beginnt WP Engine, ein beliebter Anbieter von spezialisiertem WordPress-Hosting, , ein beliebter Anbieter von spezialisiertem WordPress-Hosting, der dieselben ähnlichen Funktionen bietet wie Webflow Da hast du es also. Im Vergleich zu einer Website im Vergleich zu einem Website-Hosting sind die Preise auf der anderen Seite sehr ähnlich oder manchmal sogar teurer. Wenn Sie dieselben Funktionen verwenden , die diese Art von Webflow bietet Und am Ende des Tages, wenn eine Website Ihrem Kunden nicht mehr Wert als 20$ pro Monat bieten kann, was ist dann der Sinn dieser Website Die zweite Art von Kunden wird eine bestimmte Plattform bevorzugen, normalerweise Bevor Sie nun die Argumente vorbringen und versuchen, sie davon zu überzeugen, Webflow zu verwenden, müssen Sie verstehen, welche Gründe dahinter stehen Wie sind sie zu dem Schluss gekommen, dass sie WordPress als Plattform verwenden müssen? Denn manchmal gibt es eine bestimmte Funktion oder Anforderung, die Ihre Kunden möglicherweise haben und die Webflow nicht erfüllen kann Zum Beispiel, wenn das Team in der Vergangenheit ein WordPress-Plugin für die vorherige Website verwendet hat in der Vergangenheit ein WordPress-Plugin für , wahrscheinlich weil es eine Website auf Wordpress hatte und ein bestimmtes Plugin verwendet Nehmen wir an, Sie arbeiten mit einer Zahnklinik und sie verwenden ein bestimmtes WordPress-Plugin für ihre Termine, , Termine buchen, Sie wissen schon, wie Kalender, und dann, Sie wissen schon, gehen die Benutzer auf die Website. Es gibt einen Kalender, und dann buchen sie einen Termin, so etwas, oder? Und sie haben dieses spezielle Plugin verwendet, und vielleicht wollen sie dieses Plugin wirklich , weil die Mitarbeiter vielleicht daran gewöhnt sind, oder vielleicht ist es irgendwie in ihre Art von Geschäftsprozess integriert oder andere Anwendungen integriert es ist in andere Anwendungen integriert, die sie selbst verwenden, vielleicht ein anderes CRM oder etwas Ähnliches In diesem Fall, richtig, müssen sie mit diesem Plugin wirklich, du weißt schon, hundertprozentig Trinkgeld geben kannst du nicht, denn wenn dieses Plugin Webflow ist, WordPress-spezifisch, dann kannst du nichts dagegen tun Jetzt gibt es natürlich viele Alternativen und Terminbuchungsanwendungen sowie Anwendungen von und Terminbuchungsanwendungen sowie Anwendungen Drittanbietern, die nicht plattformspezifisch sind Und die meisten der wirklich guten und die meisten großartigen Anwendungen von Drittanbietern sind so. Sie sind nicht plattformspezifisch. sind Codes, die Sie auf jeder Website installieren können. Und du könntest die Alternative finden, aber wenn sie aus irgendeinem Grund wirklich bei genau diesem Plugin bleiben wollen , dann kannst du nichts dagegen tun. Und die einzige Option ist, sich für die WordPress-Plattform zu entscheiden, und das war's. Sie müssen also herausfinden, ob es eine Anforderung gibt , die erfüllt werden muss, die sie erfüllen müssen, und wenn Sie sie mit Webflow nicht erfüllen können, müssen Sie diesen Client weitergeben Und wenn Sie keine Anforderung gefunden haben, die Webflow nicht erfüllen kann, dann sagen Sie ihnen, dass Sie eine bessere Lösung für sie haben als WordPress und geben Sie ihnen drei große Vorteile von Webflow Erstens das schmerzlose und leistungsstarke Webflow-Hosting. All diese Punkte, die ich bereits erwähnt habe, das CDN, bessere Sicherheit, schneller, weniger Aufwand, billiger Zweitens, wie schnell Sie ihre Website erstellen, iterieren und bereitstellen können iterieren und bereitstellen Der Webflow-Designer, das Codieren einer Website von Grund auf nimmt viel mehr Und dritter Vorteil, der Webflow-Editor. Das ist ein großes Problem für Kunden. Wordpress und andere CMS sind für die meisten Menschen verwirrend. Sie sind hässlich, klobig und langsam, sie sind nicht sehr angenehm zu benutzen Sie müssen ins Backoffice gehen und von dort aus Inhalte bearbeiten Aber der Editor von WebFlow befindet sich direkt auf der Live-Site. Kunden können einfach auf die Live-Website gehen und sofort mit der Bearbeitung von Inhalten beginnen. Und so setzen Sie sich bei Ihren Kunden tatsächlich für Webflow Eigentlich gibt es nicht viel zu verkaufen. Es ist ziemlich einfach und unkompliziert. Ich selbst muss dafür eigentlich selten Argumente vorbringen , weil die meisten meiner Kunden meinem Fachwissen vertrauen. Sie machen sich keine großen Gedanken darüber , wo ich bauen werde, weil es Geschäftsleute und Unternehmer Und oft arbeite sogar ich mit Teams zusammen , die technisch versiert sind, Entwicklungsteams, und selbst ihnen ist es egal wo ich es baue solange es für mich effizient ist, und ich produziere es und ich kann es wirklich gut wiederholen, weil ich in Wirklichkeit derjenige bin, der eine Website erstellt, und ich bin derjenige, der diese Website und all das Zeug bearbeiten wird . Es muss also schnell und effizient für sie sein, damit ich es wirklich einfach machen kann, und sie fragen mich, wie viel es kosten wird und sagen ihnen den Preis, und sie sagen: Okay, gut. Aber in den Fällen, in denen Webflow definitiv die beste Option für sie zu sein scheint und es keine Einschränkungen gibt. Aber aus irgendeinem Grund stoßen Sie vielleicht immer noch auf Widerstand Ihrer Kunden, vielleicht in Bezug auf den Preis oder etwas anderes Dann reichen all diese Vorteile, die ich beschrieben habe, aus, um den Deal zu besiegeln 175. Intro zu Advanced: Herzlichen Glückwunsch. Sie haben den Hauptteil dieses Kurses durchlaufen. Alle kommenden Videos sind fortgeschritten, sodass Sie nicht sofort Ihre Karriere als freiberuflicher Webdesigner beginnen müssen . Ich hoffe wirklich, dass dir die Fahrt gefallen hat. Mir wurde klar, dass dieser Kurs eine Handvoll war und Sie alles gelernt haben, von gutem Design Webflow-Entwicklung bis hin zu erfolgreichem Freelancing Fühlen Sie sich frei, einige der Lektionen von Zeit zu Zeit erneut einige der Lektionen von Zeit zu Zeit Sie werden besser haften bleiben und du wirst noch mehr Übung bekommen Meine Empfehlung für Ihre nächsten Schritte wäre, außerhalb dieses Kurses selbständig zu üben. Sie können ein Thema oder ein Produkt auswählen , das Sie inspiriert, und eine Website dafür erstellen Oder noch besser wäre es echte Projekte zu übernehmen Sie können nach Projekten in Ihrem Netzwerk zwischen Ihren Freunden, Ihrer Familie, Ihren Arbeitskollegen usw. suchen Ihrem Netzwerk zwischen Ihren Freunden, Ihrer Familie, Ihren Arbeitskollegen usw. und kostenpflichtige oder kostenlose Projekte übernehmen. Oder du kannst sofort anfangen, auf Upwork und anderen Freelancer-Plattformen nach echten Projekten und echten Jobs zu suchen . Die Tutorials in diesem Abschnitt beziehen sich sowohl auf Design als auch auf Webflow Zum Beispiel das Photoshop-Tutorial zum Ausschneiden eines Objekts aus dem Hintergrund, etwas, das wir im Designteil dieses Kurses besprochen haben, aber wir haben es nie als Übung durchgemacht, weil es ein Photoshop-Tutorial war und etwas fortgeschrittener Deshalb habe ich es in diesen erweiterten Teil des Abschnitts oder zum Einbetten von benutzerdefiniertem Code eingefügt, der für Webflow bestimmt ist, um einige Anwendungen von Drittanbietern wie das Kommentar-Plugin einzubetten , was wir tun werden , und einige weitere Video-Tutorials im Abschnitt für Fortgeschrittene. Viel Spaß. 176. Webflow: Benutzerdefinierter Modal (Popup-Fenster): In diesem Video zeige ich Ihnen, wie Sie ein benutzerdefiniertes Modell oder mit anderen Worten, ein Pop-up, so etwas wie dieses erstellen ein Pop-up, so etwas wie dieses Wenn der Benutzer auf die Schaltfläche klickt, öffnet sich ein Modell mit einem Formular. Modelle sind weit verbreitet und sehr praktisch. Das Einlegen von Formularen ist eine Verwendung. Eine sehr verhasste Option ist , es als Pop-up zu verwenden. Wissen Sie, wovon ich spreche Wenn Sie eine Seite durchsuchen und nervige Marketingnachricht auftaucht Nichts eine nervige Marketingnachricht auftaucht, obwohl wir auf nichts geklickt Bei dieser Option werden wir uns für eine weniger umstrittene Option entscheiden , ein Formular, das geöffnet wird, wenn der Benutzer auf unserer TeamApp-Website auf die Schaltfläche Zugriff erhalten klickt das geöffnet wird, wenn der Benutzer auf unserer TeamApp-Website auf die Schaltfläche Zugriff erhalten Dies in Webflow zu erstellen ist nicht so einfach, wie Sie denken würden Es gibt keine vorgefertigte modale Komponente , die wir der Seite einfach hinzufügen können Es gibt eine, die Lightbox heißt, aber sie ist hauptsächlich für Bilder und Videos gedacht Aber Formen oder ähnliches, es gibt keine. Das war etwas, das mich am Anfang überraschte und als ich mir das Tutorial ansah, wie man dieses Modell mit einem Formular darin erstellt. habe ich irgendwie verstanden, was für eine Art von Webdesign-Plattform Webflow ein professionelles Tool ist von Webdesign-Plattform Webflow , mit dem man Dinge wie ein Entwickler von Grund auf neu erstellt und nicht einfach fertige Komponenten fallen lässt Es mag also auch für Sie überraschend sein, aber genau das macht Webflow Also lass uns anfangen. Was passiert, wenn Modal geöffnet wird? Es gibt eine Hintergrundfarbe, die sich über der gesamten Seite befindet, und da ist dieses Formular drin, oder? Dann, am Ende, verschwindet alles. Lassen Sie uns das zuerst erstellen und dann kümmern wir uns um die Interaktionen. Ich werde einen Div-Block hinzufügen und ihn oben auf der Seite platzieren. Und nenne es Modal Wrapper. Dort wird alles hingehen. Jetzt müssen wir das auf dem gesamten Bildschirm überlagern. Wir können das tun, indem wir die Position fixieren und die Option „Voll“ auswählen. Geben wir ihm eine Farbe, damit wir sehen können, was vor sich geht. Es überlagert also den Helden , aber nicht den Abschnitt danach. Und es ist auch hinter der Navigationsleiste, aber wir wollen, dass es über allem Um es über allem zu platzieren, müssen wir eine Funktion verwenden, die wir noch nicht besprochen haben, den Z-Index Was wir unter Positionseinstellungen finden können. Es wird auf allen Positionen außer automatisch oder statisch angezeigt. Z steht für die Z-Achse, die Tiefe. Im Grunde können wir damit das Stapeln von Elementen übereinander steuern Stapeln von Elementen übereinander Standardmäßig sind die meisten Elemente auf den Wert Null gesetzt. Wenn wir zwei Elemente haben, die sich überlappen, wird eines mit einem höheren Z-Wert darüber gestapelt Ich habe auch das Webflow-Video-Tutorial zum Z-Index verlinkt , falls Sie etwas mehr darüber erfahren möchten Wenn ich also den Z-Index auf eins ändere, wird er über allen Nullwerten gestapelt Großartig, aber es befindet sich immer noch hinter der Navigationsleiste. Wie kommt Die Navigationsleiste zeigt nicht, dass sie einen Z-Wert enthält, aber da Navbar eine vorgefertigte Komponente ist, hat sie wahrscheinlich einen Standard-Z-Index von Webflow, was Sinn macht, weil Navbar mobilen Ansichten ein Drop-down-Menü hat, das über allem stehen muss, wenn wir das Menü auf Mobilgeräten oder Tablet-Geräten öffnen Wenn wir unserem Modell einen höheren Z-Indexwert geben, wird es zuerst gestapelt Wir können sehen, was der Wert für die Navbar ist, aber ich sage es dir gleich, es ist 1.000 Wenn wir also das Modell auf 1001 setzen, dann wird es funktionieren. Wenn das bei dir nicht der Fall ist, ist der Wert vielleicht anders. Geh einfach höher und höher, bis es funktioniert. Es gibt kein Limit, wie du gehen kannst. Gib 10.000, wenn du willst. Okay, lassen Sie uns den Modal-Wrapper endlich etwas transparent machen den Modal-Wrapper endlich etwas , etwa 80% Als Nächstes benötigen wir ein Modell in der Mitte. Bevor wir das hinzufügen, verwandeln wir den Wrapper in Flexbox, damit wir den Inhalt in der Mitte ausrichten können Der neue Div-Block wird genau in der Mitte platziert. Nennen Sie es modal und stylen Sie es. Hals, füge einfach einen Inhalt, eine Überschrift, einen Absatz und einen Formularblock hinzu. Wir haben dafür keine Designs. Ich führe es nur zur Demonstration durch. Wir haben bereits Klassen für das Formularelement, also lassen Sie uns einfach die Klassen „ Button“ und „Filled“ wiederverwenden Ich gebe dem Modal die maximale Breite, damit der Inhalt gut hineinpasst. Die Felder haben eine maximale Breite. Deshalb schneiden sie so kurz ab. Hervorragend. Wir brauchen noch eine Sache am Modell, einen geschlossenen Knopf. Woher wissen Benutzer sonst, wo sie klicken müssen, um das Modell zu schließen? Wir können etwas wie Abbrechen oder Schließen unter einer Schaltfläche oder einem X-Symbol an der Ecke des Modells platzieren einer Schaltfläche oder einem X-Symbol an der Ecke des Modells Lassen Sie uns ein geschlossenes Symbol verwenden, da es etwas schwieriger ist. Sie werden also mehr darüber erfahren In Wirklichkeit weißt du bereits alles, was du brauchst, um das zu bauen. Wir brauchen nur ein geschlossenes Symbol, das wir von einem flachen Symbol bekommen können. Und positionieren Sie es dann in der oberen rechten Ecke, indem Sie die absolute Positionierung verwenden. Aber wenn Sie das tun, springt es in die obere Ecke der Seite, nicht zum Modell. Erinnerst du dich , was wir tun müssen? Wir müssen das Modal auf eine relative Position setzen , sodass das Symbol relativ zum Modell positioniert wird. Dort. Jetzt können wir das Symbol gut positionieren, indem wir einige Ränder angeben. Nur damit Sie es wissen, SVG-Farben können in Figma bearbeitet werden. Wenn wir wollten, könnten wir dieses SPG in Figma öffnen und die Farbe so ändern dass sie zu unserer Palette aus dem Projekt passt, aber das müssen wir jetzt nicht tun Stattdessen können wir die Deckkraft auf etwa 30% verringern , um sie grau erscheinen zu lassen Okay, schauen wir uns die Vorschau an. Der Cursor verwandelt sich nicht in eine Hand. Ich hätte einen Link-Block anstelle eines normalen Div-Blocks verwenden sollen, aber das ist okay. Wir können den Cursortyp im Bedienfeld „Stile“ manuell ändern . I So einfach ist das. Und wir können den anklickbaren Bereich vergrößern, sodass Benutzer nicht so genau darauf achten müssen, auf das Symbol zu zeigen Das können Sie einfach tun, indem Sie den Abstand auf dem Bild erhöhen. Aber jetzt sollten wir die Ränder verkleinern oder es ist zu weit vom Rand entfernt, vielleicht sogar die Ränder entfernen Ein Hover-Effekt wäre nett. Wir können einfach die Deckkraft beim Hover erhöhen und ihm natürlich einen Übergangseffekt geben, damit er schön glatt ist Und das ist alles. Das Modell ist fertig. Was jetzt? Wir brauchen Interaktionen, enge und offene Interaktionen. Fangen wir mit „Schließen“ an, da es bereits geöffnet ist. Unser Auslöseelement ist natürlich das ausgewählte Schließen-Symbol. Gehen Sie zum Interaktionen-Menü. Stellen Sie sicher, dass hier die Interaktionsversion mit GSAP ausgewählt ist und nicht die klassischen Interaktionen, und wählen Sie den Auslöser aus, bei dem es sich um einen Klick handelt Und füge eine neue Aktion hinzu. Animieren. Also, was animieren wir hier Wir wollen die gesamte Form, das gesamte Modell, einschließlich des Hintergrunds, alles animieren gesamte Modell, einschließlich des Hintergrunds, , richtig? Im Moment ist das Ziel das Element, das der Klickauslöser ist Das wollen wir nicht. Wir wollen das Ziel ändern. Wählen Sie die Klasse aus, entfernen Sie diese und wählen Sie Model Wrapper. Das ist der Name, der Klassenname unseres Model-Wrappers hier Deshalb taucht Model Wrapper auf. Standardmäßig wird unter Sofort filtern innerhalb des Trigger-Elements gefiltert, aber der Model-Wrapper befindet sich nicht im geschlossenen Symbol, also wollen wir das nicht Wir wollen diese Art von Filterung nicht, also setzen Sie das einfach zurück Also ist es auf „Keine“ gesetzt. Also, was wollen wir jetzt animieren Wir wollen, dass es einfach auf 0% geht, auf 100% sichtbar, um auf 0% Opazität zu verschwinden Spielen Sie es ab und es verschwindet. Kann es schneller machen. Der Wandel lässt zu etwas Mächtigerem nach. Mm hmm. Das ist besser Wenn Sie jetzt mit der Maus über die Leinwand fahren, werden Sie sehen, dass all diese Elemente auf der Leinwand auswählbar sind Und das wird auch in der Vorschau passieren. Es verschwindet, aber ich kann keines dieser Elemente hier auswählen. Ich kann nicht auf die Füllung klicken. Ich kann nicht auf die Schaltfläche klicken, keine der hier, und wie Sie sehen können, ändert sich mein Cursor, weil Mauszeiger über Feldern und der Schaltfläche hier Der Modal-Wrapper ist also immer noch geöffnet. Ich habe nur die Opazität verringert. Es ist also einfach transparent, aber es ist immer noch da. Um das zu ändern, müssen wir es komplett entfernen und wir müssen die Sichtbarkeit auf Keine und Anzeige auf Keine ändern . Nein. Wir haben hier unter Sichtbarkeit keine Anzeigeeigenschaften , da sie nicht animiert werden können Das sind Eigenschaften, die animiert werden, und das ist die Aktion, weil wir „Aktion animieren “ ausgewählt haben Wir erhalten diese Eigenschaft also nicht. Wir haben eine andere Option. GSP hat diese Option, nämlich Alpha, und Alpha steuert sowohl die Deckkraft als auch die Sichtbarkeit gleichzeitig, aber wir werden sie diesmal nicht verwenden , weil wir das auch im Originalzustand komplett auf der Leinwand verstecken wollen verstecken Originalzustand komplett auf der Leinwand Also werden wir diese Version dieses Mal überspringen. Kehren wir nun zu unserer Interaktion zurück. Und lassen Sie uns eine neue Aktion hinzufügen. Und dieses Mal wählen wir Set aus. Bei dieser Art von Aktion gibt es keine animierenden Eigenschaften, und sie werden auch nicht animiert, aber Sie können sie festlegen, wodurch sie sofort festgelegt werden sofort zu einem neuen Stil dieser Eigenschaft wechseln Fügen Sie eine neue Sichtbarkeit hinzu und wählen Sie „Anzeige“. Öffnen Sie auf dem Bildschirm das Drop-down-Menü, und wie Sie sehen können, haben wir die bekannten Display-Einstellungen Block, Inline, Flachs Grade No. Wir wählen N aus. Das brauchen wir nicht. Wir brauchen keinen Unterricht. Das ist eine weitere Eigenschaft , die festgelegt werden kann. Eine bestimmte Klasse kann auf ein Element angewendet oder daraus entfernt werden. Und wie Sie sehen können, wurde diese Aktion direkt nach der Animation, der ersten Animation, hinzugefügt , was bedeutet, dass wir diese modale Animation tatsächlich benennen können . Ich habe es leicht erkannt. Wie Sie sehen können, modale Animation abgespielt, was in diesem Fall nur eine Änderung der Deckkraft ist Es könnten auch andere Dinge wie Skalierung sein, zum Beispiel, sie klein ist oder an Größe oder Bewegung abnimmt. Sobald die Animation fertig ist, geht sie etwas unter und die Anzeige wird dann auf „Keine“ gesetzt Und wir müssen sicherstellen, dass es hier passiert und nicht irgendwo in der Mitte. Wenn Sie also Ihre Animationsdauer aktualisieren, beachten Sie, dass diese Aktion nicht darauf folgt. Wenn Sie sie bereits eingestellt haben und wenn Sie diese bereits erreicht haben, daran, dass diese festgelegte Aktion am Ende beginnen muss, was genau hier ist, und es wird angezeigt, dass sie bei 0,2 beginnt, genau der Dauer, die wir für die ursprüngliche Animation festgelegt hatten. Sie kann zum Beispiel auf 0,5 geändert werden, und sie wird hier irgendwo hingehören falls Sie eine längere Animation haben. Jetzt. Im Moment ist das Ziel wieder als Auslöser gesetzt, nämlich das geschlossene Symbol. Das ist nicht das, was wir wollen. Wir wollen wieder, dass der Modal-Wrapper das Ziel Ändern Sie das also, um diesen Modell-Wrapper zu entfernen. Noch einmal. Vergiss nicht, Filter N zu verwenden. In Ordnung, also überprüfe alles nochmal. Aktion festlegen. Wir können dieses Display None nennen. Keine anzeigen, Zielmodell-Wrapper. Das ist richtig Beginnt direkt am Ende der ersten Animation. Achte darauf, dass es nicht irgendwo am Anfang oder in der Mitte ist. Ich werde die Animation unterbrechen. Und die Eigenschaft ist , dass kein Display angezeigt wird. Das ist genau das, was wir wollen. Und lass mich zurückgehen. Und wenn du das jetzt auf der Leinwand abspielst , wie du siehst sind die Elemente nicht mehr auswählbar Wir können das auch hier testen. Schließen und Text ist auswählbar, Feld das auswählbare Feld. All das funktioniert jetzt, weil der gesamte Model-Wrapper verschwunden ist gesamte Model-Wrapper verschwunden Großartig. Außerdem wäre es schön, wenn wir das Schließen auslösen könnten, indem wir auf den Bereich außerhalb des Modells klicken. Also im Grunde das Schließen, wenn der Benutzer auf den Hintergrundbereich klickt. Jetzt könnte Ihr erster Instinkt sein , das zum Model Wrapper hinzuzufügen, aber das wird nicht funktionieren Denn obwohl es funktioniert, wird es auch ausgelöst, wenn Sie beliebige Stelle auf das zweite Modal klicken, sogar innerhalb der Felder, weil all das innerhalb des Modal-Wrappers verschachtelt ist Das Klicken auf das Formular wird also als dasselbe angesehen wie das Klicken auf den modalen Wir benötigen also ein neues Element , das sich hinter dem Modal befindet, und wir werden den Auslöser für dieses Element setzen Geben Sie ihm einen ähnlichen Stil wie dem modalen Wrapper, fixe Position und Voll, ohne dass die Hintergrundfarbe benötigt wird, halten Sie es transparent Wenn Sie nun diesen geschlossenen Bereich nach dem Modell hinzufügen, wird er über dem Modell gestapelt Wenn Sie ihn jedoch vor das Modell verschieben, wird Modal darauf gestapelt. Normalerweise ändert sich diese Reihenfolge ausreichend, aber wenn dies aus irgendeinem Grund nicht der Fall ist, können Sie Z-Indexwerte verwenden. Geben Sie Model Hire einen Z-Index, zum Beispiel zwei, und einen für den geschlossenen Bereich, und das erledigt die Aufgabe. A Fügen Sie dieselbe enge Wechselwirkung diesem geschlossenen Bereich dieselbe enge Wechselwirkung hinzu, und das war's. Wenn wir jetzt auf das Modal selbst klicken, passiert nichts, aber wenn wir auf den Hintergrund klicken, wird es geschlossen. Jetzt müssen wir eine Animation mit offenem Modell erstellen. Wir werden damit beginnen, den gesamten Model-Wrapper auf unserer Leinwand zu verstecken den gesamten Model-Wrapper auf , weil er im Weg ist, und wenn wir entwerfen wollen, wird er im Weg sein, also können wir einfach Model Wrapper auswählen Und wählen Sie in der Anzeigeeinstellung „Keine“ aus. Jetzt ist es komplett weg. Wir können alles andere auf der Leinwand auswählen. Und wenn Sie darauf zurückkommen und das Design bearbeiten und ändern möchten, wählen Sie den Model-Wrapper aus und wählen Sie Display-Flex aus, da es sich um ein Flex-Layout Und die Flex-Einstellungen werden gespeichert sodass Sie sie nicht jedes Mal bearbeiten müssen Okay, unser Auslöser ist in diesem Fall der Button. Wählen Sie die Schaltfläche „Zugriff abrufen“, gehen Sie zum Interaktionsfenster, klicken Sie auf Trigger und nennen Sie dieses Modell „Öffnen“. Und stellen Sie sicher, dass Sie auf Trigger klicken, diese Schaltfläche jetzt klicken und eine neue Aktion hinzufügen. Also zuerst die Aktion hier, wir werden nicht animieren. Warum? Weil die Anzeige für den Model Wrapper auf versteckt eingestellt ist allererste, was passieren muss, ist, dass wir die Anzeige aktivieren müssen Sonst ist es nicht da. Und wenn wir die Opazität animieren, wird sie nur die Opazität animieren, solange sie noch unsichtbar Es wird also nicht funktionieren. Also stellen wir zuerst die Anzeige ein und ändern das Ziel. Klasse. Und worauf stellen wir das Display auf der Modellverpackung Achten Sie darauf, diesen Filter zu entfernen. Wir brauchen keine Filterung, da der Model-Wrapper nicht in der Schaltfläche befindet Welche Anzeigeeinstellung möchten wir ändern? Wir gehen zum Hinzufügen einer neuen Eigenschaft und wählen Anzeige. Und in der Drop-down-Liste wählen wir Flex aus, weil das die Anzeigeeinstellung ist, die wir auf dem Model Wrapper haben möchten Diese Dinge brauchen wir nicht. Wie Sie sehen können, heißt es jetzt, bei 0,2 Sekunden beginnen. Das wollen wir nicht. Das ist also eine Sache, die Sie sicherstellen müssen. Wie Sie hier auf der Timeline sehen können, werde ich sagen, dass sie bei 0,01 und 0,2 Sekunden beginnt. Das wollen wir nicht, also kannst du es entweder einfach ganz bis zum Anfang auf der Leinwand auf der Timeline ziehen ganz bis zum oder einfach zurücksetzen und alles auf Null gehen. Das wollen wir. Also überprüfe es noch einmal. Lassen Sie uns das ändern, um Flex anzuzeigen. Wir haben also ein Ziel. Ziel ist der Model Wrapper, richtig, beginnt bei null Sekunde, und das Display ändert sich zu Flachs. Das ist es, was wir hier wollen Jetzt brauchen wir die Animation. Wir müssen bei einer neuen Eigenschaft, einer neuen Aktion erscheinen und dieses Mal Animieren auswählen und den Auslöser wieder auf Model-Wrapper umstellen Keine Filterung. Lassen Sie uns dieses Modell erscheinen lassen. Und was wollen wir von den animierten Eigenschaften ? Wir wollen die Opazität Das ist es. Und wir wollen, dass es von 0 auf 100% steigt. Und dieses Mal werden wir am Anfang tatsächlich 0% festlegen , weil wir die Standardeinstellung auf der Leinwand standardmäßig nicht auf 0% geändert haben. Wenn also die Seite auf den Model Wrapper geladen wird, wird sie auf 100% eingestellt sein, ja, sie ist unsichtbar, weil wir den Wert „Ausgeblendet“ eingestellt haben aber die Deckkraft selbst liegt bei In diesem Fall müssen wir hier also entweder hier in der Animation oder auf der Leinwand unter Styles angeben der Animation oder auf der Leinwand unter Aber es ist besser, es hier zu tun. Wenn wir also auf der Leinwand damit arbeiten, müssen wir nicht auch die Deckkraft ändern, und wenn wir einfach zu Flex wechseln, wird sie sofort angezeigt Setzen Sie die Deckkraft hier also auf Null , weil wir wollen, dass sie dort von 0% aus animiert wird, und wir wollen, dass sie auf 100% animiert wird, also 0—100 Wie Sie sehen können, wird es jetzt angezeigt und es ist langsam. Passen wir die Lockerung und die Dauer an das an, Passen wir die Lockerung und die Dauer an das an Macht drei. Und lass uns sehen. Überprüfe alles noch einmal. Also haben wir Target, Model Wrapper, Dauer, 0,2 Sekunden, Easing, Typ von 0 bis 100 % Opazität Das ist alles gut. Und jetzt machen wir einen Test. Es erscheint, verschwindet, wenn Sie wegklicken. Erscheint verschwindet, gut. Erscheint, verschwindet auf dem geschlossenen Symbol. Gut. Erscheint. Lass es uns testen. Es erscheint nicht, wenn wir in die Felder klicken. Gut. In Ordnung. Alles funktioniert gut. Perfekt. Und so erstellen Sie ein benutzerdefiniertes Modell in Webflow Man würde nicht erwarten, dass ein so weit verbreitetes Ding so viele Schritte benötigt, aber so sind sie alle aufgebaut Entwickler müssen das Ganze sogar von Hand programmieren. 177. Google Analyse: Nachdem Sie Ihre Website für den Kunden versendet haben, das allererste, was Sie normalerweise einrichten möchten oder der Kunde möchte, dass Sie es einrichten , eine Art Analysetool. Nun, das ist nicht gerade eine Webdesigner-Domain zur Analyse der Webseitendaten. Normalerweise sind es die Vermarkter, die das tun, oder der Geschäftsinhaber selbst, wenn er es versteht die Einrichtung ist jedoch normalerweise die Installation eines benutzerdefinierten Codeskripts oder eines Tags erforderlich benutzerdefinierten Codeskripts oder eines , das auf der Webflow-Seite installiert wird Und dieser Teil liegt oft Ihrer Verantwortung Als Webdesigner ist es also ein wirklich gutes Wissen Sie auf Anhieb haben sollten. Und in diesem Video zeige ich Ihnen, wie Sie das beliebteste Analytics-Tool installieren, nämlich Google Analytics. Gehe zu analytics.google.com. Wenn Sie es noch nie eingerichtet haben und angemeldet sind, werden Sie wahrscheinlich auf diese Seite gelangen Wenn Sie nicht angemeldet sind, werden Sie von Google aufgefordert sich in Ihr Google-Konto einzuloggen. Klicken Sie auf dieser Seite einfach auf Messung starten. Aber wenn Sie es in der Vergangenheit eingerichtet haben, werden Sie wahrscheinlich sofort auf dem Armaturenbrett landen , ungefähr so. Von hier aus können Sie einfach auf Erstellen gehen und auf Neues Konto erstellen oder einfach auf Konto klicken. Und dann werden Sie in beiden Fällen auf dieser Seite ankommen . Nennen Sie etwas Ihr Konto, sagen wir in unserem Fall Team App, und wir werden das für TeamApp einrichten. Klicken Sie auf Weiter Sie den Eigenschaftsnamen so etwas wie TeamApp-Website Wir wissen es also, wählen Sie Ihre Zeitzone, Währung und Ihre Branche aus Es ist auch nicht wirklich relevant. An der Analytik wird sich nicht viel ändern. Wählen Sie auch hier Ziele aus. Auch hier können Sie einige davon auswählen, um Web- oder App-Verkehr zu verstehen. Und auch hier ändert sich nicht wirklich viel an den Analysen. Ich werde dir nur Google verschiedene Dinge empfehlen. Klicken Sie auf Erstellen und akzeptieren Sie dann die Allgemeinen Geschäftsbedingungen. Und von hier aus werden wir jetzt die Plattform auswählen. Woher sammeln wir die Daten? Weißt du, okay, es ist ein Web, also wähle Web. Und hier geben Sie die Adresse an, die die Haupt-URL Ihrer Website ist. Um diese URL zu erhalten, können Sie zu Ihrem Projekt zurückkehren. Oh, und dies wird Ihre Haupt-URL der Website sein , wenn sie auf einer Staging-Domain auf der Webflow-Subdomain veröffentlicht Aber wenn Sie für den Kunden auf der eigentlichen benutzerdefinierten Domain des Kunden veröffentlichen , werden Sie angeben, was auch immer die benutzerdefinierte Aber natürlich werden wir das mit einer Subdomain machen , weil für eine benutzerdefinierte Domain ein Hosting-Paket erforderlich ist Also wählst du einfach diese Domain aus und kopierst sie und fügst sie hier hinein. Du musst nicht hinzufügen, dass HTTPS schon da ist, also füge nicht noch einmal HTTPS und Streamnamen hinzu, nenne es einfach Website Du musst nicht hinzufügen, dass HTTPS schon da ist, also füge nicht noch einmal HTTPS und Streamnamen hinzu, nenne es einfach Die Messungen sind also bereits ausgewählt, das Lesen kann fortgesetzt Erledigt. Jetzt haben wir ein Google Analytics-Konto, aber wir müssen noch ein paar Dinge auf der Webflow-Seite einrichten Was wir also für Webflow benötigen, ist diese Mess-ID. Wenn Sie also versehentlich darauf klicken, wenn Sie hier sind, können Sie einfach erneut darauf klicken, Mess-ID zu gelangen Klicken Sie von hier aus einfach darauf und Sie finden die Mess-ID genau hier. Kopieren Sie diese Mess-ID und kehren Sie dann zu Webflow und Webflow zurück . Gehen Sie zu den Site-Einstellungen Und die internen Einstellungen gehen auf fehlende Integration zurück. Und hier verfolgen wir verschiedene Ideen, die Google uns gibt. Dies kann Google Analytics oder auch Google Tag Manager sein. In diesem Fall ist dies Google Analytics. Wir werden dieses Google Analytics benötigen. Und wie Sie sehen können, sagt Ihnen Webflow, dass es mit G beginnen muss, oder? Fügen Sie Ihr Tag hier ein, stellen Sie sicher, dass es mit G beginnt, und stellen Sie sicher, dass es genau hier übereinstimmt und Sie diese ID korrekt kopieren Sobald Sie das ausgefüllt haben, klicken Sie auf Speichern und stellen Sie dann sicher, dass Sie es veröffentlichen möchten. Denn bis Sie es veröffentlichen, wird dieses Tag nicht auf Ihrer Live-Site installiert. Es ist gerade in den Einstellungen , damit es auf die Live-Site wird. Es muss veröffentlicht werden. Sobald es da ist, können Sie Ihre Website besuchen. Und dann können wir zu Analytics zurückkehren und das beenden und zum Nächsten übergehen und dann zur Startseite weitermachen. In diesem Moment heißt es, keine Daten von Ihrer Website empfangen wurden. Manchmal dauert es normalerweise einige Zeit, bis die Daten wiedergegeben und Ihnen alle Informationen zur Verfügung gestellt werden. Aber oft gibt es zumindest eine Art von Daten, die sofort vollständig live geschaltet werden. Und wie Sie sehen können, gibt es einen aktiven Benutzer, weil ich bereits in diesem Browser geöffnet habe und es wurde bereits festgestellt, dass es einen aktiven Benutzer gibt. Und aus den Berichten können wir eine Echtzeitübersicht auswählen, und wir werden hier weitere Informationen über Benutzer sehen. Und ich werde nicht ins Detail gehen. Google Analytics ist nur ein weiteres großes Thema und erfordert einen eigenen Kurs. Aber so richten Sie es wenn Ihr Kunde es benötigt, und oft tun sie es, und sie werden Sie bitten, es einzurichten Sobald Sie es für ihn eingerichtet haben, liegt die Analyse der Analysen beim Kunden und seinem Marketingteam. 178. Installation der Cookie-Zustimmung: In diesem und einigen kommenden Videos werde ich Ihnen zeigen, wie Sie die Funktionalität Ihrer Website mithilfe von benutzerdefiniertem Code erweitern können. Dies ist eine sehr wichtige Fähigkeit jeder Webdesigner in seiner Karriere benötigen wird , da die meisten Websites nicht bei der Webflow-Entwicklung enden In der Regel gibt es externe Tools , die ein Geschäftsinhaber benötigt, z. B. Chat-Widgets, Tools zur Terminbuchung, Marketing-Tools und vieles mehr In den meisten Fällen geschieht dies durch Implementierung von benutzerdefiniertem Code. Aber mach dir keine Sorgen. Darin ist keine eigentliche Codierung involviert. Es ist nur ein Kopieren und Einfügen von Code von einem Ort zum anderen. Und es braucht nur ein bisschen Wissen in diesem Code zurechtzufinden Allein dieses Verständnis erweitert Ihre Webdesign-Fähigkeiten und ermöglicht es Ihnen, bequem zu implementieren zusätzliche Tools und Lösungen auf Ihren Jetzt sind benutzerdefinierte Code-Funktionen in Webflow kostenpflichtig. Um diesem Tutorial folgen zu können, benötigen Sie entweder einen Webflow-Workspace-Plan oder eine gehostete Site Wenn Sie das nicht haben und zu diesem Zeitpunkt nicht in es investieren möchten, können Sie diese Tutorials mit benutzerdefiniertem Code vorerst überspringen und zu ihnen zurückkehren , wenn Sie einen kostenpflichtigen Tarif haben oder an einem Kundenprojekt arbeiten Sobald Sie das Analytics-Tool auf einer Website installiert haben, müssen Sie in der Regel ein Cookie-Banner wie dieses installieren . Wenn Sie in der Europäischen Union leben, sind Sie damit wahrscheinlich in einigen Staaten, den Vereinigten Staaten, Kanada, Australien und Großbritannien sehr vertraut . Sie werden damit vertraut sein, weil wir diese Banner erhalten wir ständig aufgefordert werden, Cookies von diesen Websites zu akzeptieren oder abzulehnen. Wenn Sie nicht in einem dieser regulierten Länder leben, Sie mit diesen Bannern möglicherweise nicht vertraut. Für jede Website gilt jedoch, wenn Sie den Markt bedienen wollen, wenn Sie eine Website für einen Kunden erstellen und Benutzer entweder in den Vereinigten Staaten oder an bestimmten Orten in den Vereinigten Staaten bedienen werden . Wenn Sie Nutzer in der Europäischen Union, Kanada und vielen dieser Orte bedienen , an denen strenge Datenschutzgesetze gelten, müssen Sie ein Cookie-Zustimmungsbanner installieren und die Nutzer um Erlaubnis bitten , damit Sie sie quasi verfolgen und Cookies auf ihrem Gerät installieren können . Zu diesem Zeitpunkt haben wir zum Beispiel in der letzten Lektion ein Analysetool installiert, nämlich Google Analytics. Das haben wir installiert. Und das ist zum Beispiel meine Website, meine persönliche Website, und Sie werden sehen, dass ich hier einige Benutzerstatistiken in Ländern erhalte einige Benutzerstatistiken in , aus denen die Leute sie besuchen, und das geschieht über Cookies. Nun, wenn Sie das tun und aus diesen Ländern kommen, müssen Sie die Zustimmung einholen. Andernfalls können Sie dies nicht durch die Installation von Cookies tun. Wenn Sie also Tracking betreiben, muss es sich um einen ganz anderen Tracking-Modus handeln. Bis Sie das Tracking tatsächlich installiert haben, müssen Sie das überhaupt nicht tun. Sie müssen kein Cookie-Banner oder eine Einwilligung installieren , wenn Sie die Website nur starten. Bis wir diese Analyse durchgeführt haben, mussten Sie das nicht tun weil mich meine Schüler manchmal fragen, ich ein Cookie-Banner auf meiner Website installieren muss . Wie mache ich das? Nun, verfolgst du sie tatsächlich? Verwenden Sie Tools wie Google Analytics, und verwenden diese Tools gezielt Cookies oder verarbeiten sie personenbezogene Benutzerdaten Nutzer zu verfolgen und das Nutzerverhalten zu verstehen In diesem Fall müssen wir das ja installieren. Wenn du das nicht tust, dann ist es absolut nicht nötig, das zu tun. Ihre Website wird keine gesetzlich vorgeschriebenen Marketing- oder Analyse-Cookies verwenden . Ihre Website verwendet zum Beispiel nur ein Sitzungscookie, das ein notwendiger Cookie ist, das ein notwendiger Cookie ist damit die Seite die Sitzung laden und verstehen kann, und das ist etwas, das nicht wirklich Teil dieses Gesetzes ist, und das ist auch nicht, was diese Europäische Union und diese Gesetze tatsächlich regeln Für dieses Tutorial müssen wir nun ein Drittanbieter-Tool verwenden, bei dem es sich um eine Cookie-Zustimmungsanwendung , ein Banner, eine Plattform zur Verwaltung von Einwilligungen handelt Banner, eine Plattform zur Verwaltung von Einwilligungen . Manchmal wird sie aufgerufen. Und das muss über eine dieser Plattformen geschehen. Sie können dies nicht nur über ein benutzerdefiniertes Banner tun , das auf Weblo angezeigt wird. Sie könnten es möglicherweise tun, aber es steckt viel mehr Logik dahinter. Und zwar, weil die Cookie-Zustimmungsbanner, die wir erhalten, und damit sie den Vorschriften entsprechen , bedeuten, dass sie alle Skripte blockieren müssen, die Cookies ausführen und Cookies installieren, und diese Cookies nur ausführen und diese Cookies installieren nachdem der Benutzer auf sie klickt. Und wenn der Benutzer auf Alle ablehnen klickt, müssen diese Cookies und Skripte blockiert werden. Aus diesem Grund verwendet fast jede Website eine Drittanbieterlösung wie Cookie Hub. Es gibt noch einen wie Cookie Boot und einen anderen namens Consent Pro , der direkt über den Webflow-Marktplatz installiert werden kann direkt über den Webflow-Marktplatz Und der Grund, warum ich mich in diesem Fall für Cookie Hub entscheide, dass es sich als das beste Angebot herausstellt , weil Constant Pro sofort bezahlt wird Wenn du es auf der benutzerdefinierten Domain haben willst. Es ist kostenlos auf der Webflow-Subdomain, aber es wird sofort bezahlt. Sie müssen es sofort bezahlen. Und ich verwende diesen Cookie Hub weil ich viele verschiedene ausprobiert habe und ich festgestellt habe, dass dieser eine der einfachsten Implementierungen hat eine der einfachsten Implementierungen Die Preise sind gut und ihr kostenloses Kontingent ist tatsächlich nutzbar Und ja, es gibt eine Einschränkung. Was Sie tun können und wie viele Sitzungen pro Monat Sie haben können und wie viele Besucher Sie haben können, aber es ist immer noch nutzbar. Der erste Schritt besteht also darin, sich für Cookie Hub anzumelden, zu cookie hub.com zu gehen und sich anzumelden Es heißt 14-Tage-Testversion, aber die 14-Tage-Testversion bietet Ihnen diese Premium-Funktionen Es ist keine Kreditkarte erforderlich, und nach der 14-Tage-Testversion wird es einfach wieder auf das kostenlose Kontingent zurückgesetzt, und das ist kostenlos und auch nutzbar In der Domain hier werde ich meine persönliche Website-Domain angeben meine persönliche Website-Domain , weil ich dort den kostenpflichtigen Tarif habe Wenn Sie in Ihrem Fall einen Webflow-Workplace-Tarif haben und einen benutzerdefinierten Code verwenden können, können Sie beispielsweise die Chat-Tap-Anwendung und ihre Domain sowie die Domain, die Sie dafür verwendet haben, angeben beispielsweise die Chat-Tap-Anwendung und ihre Domain sowie die Domain, , die genau hier angezeigt wird Das ist die Domain, und das ist die, die Sie hier beantragen können. Und Sie kommen auf diese Seite, so etwas, das Ihre Domain anzeigt , die Sie gerade hinzugefügt haben, und sie zeigt als Basiswert 30.000 Besucher pro Monat an, aber dann ist das die Testversion, und dann wird es wieder weniger sein, ich glaube, es sind tausend Besucher pro Monat, die im kostenlosen Tarif erlaubt sind. Jetzt müssen wir die Dinge einrichten und auf die Details klicken und zur Setup-Installation gehen. Und auf diesen Seiten auf der Registerkarte „ Übersicht“ haben wir einige Möglichkeiten zur Einrichtung Wählen Sie „Manuelles Einfügen von Code“. Und du wirst diesen Code bekommen. Dies ist eine sehr verbreitete Methode und genau so, wie fast jede einzelne Anwendung oder Tool-Implementierung eines Drittanbieters erfolgt. Sie geben dir einen Code. Irgendwo gibt es eine Implementierungs - und Installationsanleitung. Sie geben dir diesen Code und sagen dir, füge ihn irgendwo auf deiner Website ein. Und sie werden dir sagen, in diesem Fall sagt es uns, füge das in den Kopfbereich über allen anderen Skripten ein. Es muss also das erste Skript sein, das ausgeführt wird, und dann muss alles andere ausgeführt werden, jedes andere Skript muss danach ausgeführt werden. In Webflow haben wir drei verschiedene Stellen, an denen wir benutzerdefinierten Code einfügen oder installieren können Der erste Teil des Designers ist das Einbetten von Code. Sobald Sie es zur Leinwand hinzugefügt haben, wird dieses Feld geöffnet, und das ist ein HTML-Feld, Code eingefügt werden kann. Es muss ein HTML-Code sein. Und dieses Ding, das wird inline angezeigt, und du kannst es zwischen den Inhalten einfügen. Sie können hier eine Überschrift haben, hier benutzerdefinierten Code und dann anderen Inhalt hier, und dann wird der benutzerdefinierte Code ausgeführt. Und wenn es etwas ist , das angezeigt wird, dann wird es genau hier auf der Seite angezeigt. Und normalerweise werden sie möglicherweise nicht genau auf der Seite angezeigt, aber sie werden im Vorschaumodus angezeigt. Und deshalb gibt es hier diesen aktivierten benutzerdefinierten Code Toggle. Und dann wird der benutzerdefinierte Code in der Vorschau ausgeführt. Manchmal, wenn es sich nur um einfaches HTML und CSS handelt und es kein Javascript gibt, wird es auch direkt im Designer angezeigt . Das ist also ein Ort. anderer Ort, an dem wir den benutzerdefinierten Code installieren und einfügen können , ist in den Einstellungen einer Seite. Und wenn Sie ganz nach unten scrollen , haben Sie diese beiden Felder, natürlich, tut mir leid, nicht dieses, dieses Feld. Nun, das ist offensichtlich, dass ich bereits den kostenpflichtigen Tarif habe, und deshalb sind sie aktiviert. Wenn Sie den kostenlosen Tarif nutzen , werden sie natürlich gesperrt. Und hier gibt es zwei Felder. einem steht die Kopfmarke auf der Innenseite, der anderen steht es vor der Körpermarke. Und das ist, ich werde nicht tief in das Thema eintauchen. Was ist der Unterschied zwischen den beiden. Und bei jeder benutzerdefinierten Codelösung werden sie Ihnen normalerweise sagen, ob Sie sie in das Head-Tag oder am Ende vor dem Body-Tag platzieren sollten . Und das bedeutet in der Regel vor dem Bodytech, also direkt vor dem allerletzten Ding auf der Seite. Body-Tag ist, das ist das Body-Tag. also etwas vor das Body-Tag setzen , bedeutet das, dass alles, was wir auf der Seite haben, dann ganz unten steht. Also in diesem Fall nur eine Sache. Nach der Überschrift wird es genau hier eingefügt und es wird unten angezeigt Normalerweise bedeutet das, dass es nicht gerendert wird. Es ist nur einmal, wir wollen nicht, dass es irgendetwas auf der Seite unterbricht Deshalb haben wir es an die letzte Stelle gesetzt. Das sind also zwei Orte, und das ist Seite. Also nur auf dieser Seite, was auch immer diese Seite ist, auf der Cookie-Zustimmungsseite , hier wird das installiert, und es wird auf keiner anderen Seite unserer Website laufen . Und der dritte Platz ist die weiße Seite. Wenn wir also zu den Seiteneinstellungen gehen, haben wir hier diesen Tab mit benutzerdefiniertem Code, und hier haben wir diese beiden exakt ähnlichen Felder: Head-Tag im Body-Tag vor dem Body-Tag, manchmal auch als Footer-Code bezeichnet Und das gilt jetzt für die gesamte Website. Auf jeder einzelnen Seite Ihrer Website wird dieser Code ausgeführt. In unserem Fall möchten wir für die Zustimmung zu Cookies und für viele solche Anwendungen, zum Beispiel ein Chat-Widget oder ein anderes Marketing-Tool, normalerweise, die Zustimmung zu Cookies und für viele solche Anwendungen, zum Beispiel ein Chat-Widget oder ein anderes Marketing-Tool, normalerweise, dass es weiß ist, weil wir möchten, dass es auf jeder einzelnen Seite unserer Website läuft. Und hier werden wir unseren Cookie-Zustimmungscode einfügen . Und das ist unser Code, und dann speicherst du ihn einfach. Sobald Sie Ihren Code eingefügt und gespeichert haben, der nächste Schritt darin, ihn zu veröffentlichen, denn bis Sie ihn veröffentlichen, ist dieser Code nicht live. Er wird einfach hier direkt im Einstellungsfenster gespeichert Sobald Sie ihn veröffentlicht haben, wird er auf die Live-Site übertragen. Sobald die Veröffentlichung abgeschlossen ist, können wir auf unsere Seite gehen und sie aktualisieren Der Cookie-Hinweis sollte jetzt auf unserer Seite erscheinen Dieser Cookie-Hinweis kann jetzt angepasst werden, und das werden wir in den Cookie Hub-Portaleinstellungen tun den Cookie Hub-Portaleinstellungen Es müssen jedoch noch einige weitere Schritte unternommen werden , damit dies tatsächlich vollständig abgeschlossen ist und funktioniert Wenn Sie nun hier sind, wenn Sie hier auf dem Dashboard sind, können Sie zu den Details zurückkehren oder einfach hier klicken. Gehe zu „Anpassen“. Und jetzt können wir ein paar Dinge daran ändern, wie es angezeigt wird. Beispiel eines der Dinge, die gerade passiert sind, wie Sie sehen können, ich kann nicht wegklicken. Ich kann mich nicht bewegen. Dies ist eine sehr aufdringliche Cookie-Richtlinie und ein Banner zur Cookie-Zustimmung Es lässt mich nirgendwohin gehen. Das ist es, was standardmäßig hier passiert. Deshalb möchten wir die Option „Benutzeroberfläche blockieren“ deaktivieren. Diese Blockierung erfolgt auf Websites wie Facebook oder Google oder auf Nachrichtenseiten wie New York Times, Tribune, Sie möchten wirklich, dass Sie zuerst definieren, Sie die Cookies akzeptieren oder nicht, und entscheiden, und manchmal erlauben sie Ihnen nicht einmal, auf eine Website zu gehen, wenn Sie keine Cookies akzeptieren und deren Website nutzen Und manchmal erlauben sie es dir, aber sie wollen die Entscheidung sofort und sie lassen sie nicht zu, und sie wollen tatsächlich die Bestätigung erhalten. Denn wenn du die Bestätigung nicht erzwingst, scrollen die Leute normalerweise einfach und genießen die Seite, ohne jemals auf das Banner zu klicken. In diesem Fall werde ich es also entfernen. Und wir können auch ändern, wo es angezeigt wird. Zum Beispiel ist ein Balken, der zum Beispiel unten platziert werden kann, ein sehr komischer Stil, um es auszudrücken . Und es gibt eine übliche unaufdringliche Methode , mit der Sie den Leuten immer noch erlauben, Ihre Website zu nutzen, und Sie zwingen sie einfach nicht, Cookies zu akzeptieren oder abzulehnen, weil Sie vielleicht nicht so wichtig sind Cookies zu akzeptieren oder abzulehnen, weil Sie , dass Sie sie verfolgen oder ihre Daten verwenden Von hier aus können wir auch die Farbpalette ändern. In meinem Fall würde ich mich zum Beispiel vielleicht für Schwarz und Weiß entscheiden. Und dann können Schaltflächen neu angeordnet werden , Cookies, Ablehnungs-Cookies. Und das ist normalerweise eine ziemlich gute Einstellung, so wie es ist. Aber je nachdem, wo Sie sich befinden, müssen Sie möglicherweise die Position der Schaltflächen ändern , je , was die Leute in Ihrer Region vielleicht gewohnt sind. Ein weiteres Präferenzcenter, das wir hier haben , ist, wenn sie auf Cookie-Einstellungen klicken. Es öffnet sich und Sie können ändern, was hier sichtbar ist und was nicht. Normalerweise müssen Sie sich damit nicht anlegen. Dies ist das Symbol, das auf der Seite verbleibt. Nicht etwas, das ich generell mag. Es gibt eine Vorschrift , dass Sie irgendwo eine Stelle haben müssen, an der sie die Zustimmung verweigern können, dass Benutzer die Zustimmung zurückziehen können, und das könnte als Link irgendwo in der Fußzeile für die Cookie-Einstellungen Anstatt eines solchen Banners kann ich jederzeit einfach auf der Website herumschweben Also werde ich das alles einfach speichern. Und für jede benutzerdefinierte Anpassung der Telefone oder was auch immer, für jede Website, die ein wirklich individuelles Aussehen für diese Schaltflächen benötigt , kann das benutzerdefinierte CSS verwendet werden. Wenn Sie fertig sind, speichern und schließen Sie, und dann müssen Sie ausstehende Änderungen veröffentlichen. Und dann können Sie zur Site zurückkehren und aktualisieren. Geben Sie ihr etwas Zeit. Und ich habe ein paar Versuche gebraucht, und dann hat es endlich funktioniert. Und jetzt können Sie sehen, dass das Banner anders ist. Jetzt funktioniert das Banner, es scheint aber immer noch nicht konform zu sein. Es macht eigentlich nicht das, was es tun soll. Damit es das tut, was es tun soll, und Cookie Hop kann uns dabei helfen, muss es nach Cookies suchen und anfangen, diese Cookies zu blockieren. Also von der Scan-Seite aus es bereits einen Scan für mich gemacht, und wenn es das nicht für Sie getan hat, können Sie einen Scan anfordern, und es wird Ihre Seiten durchgehen und es wird nach Skripten und benutzerdefiniertem Code suchen , die Sie haben, die Sie auf Ihrer Website ausführen, und herausfinden , was blockiert werden muss und ob es blockiert werden kann. nun anhand der Art und Weise, wie wir den Google Analytics-Code eingerichtet haben, Lassen Sie uns nun anhand der Art und Weise, wie wir den Google Analytics-Code eingerichtet haben, sehen, ob das Action Center bereits ausgeführt wurde. In den Action Centern werden wir normalerweise Probleme bekommen. Und dann können wir diese verschiedenen Probleme durchgehen und sie so angehen, wie sie sind. Also eines der Probleme, die Sie bekommen werden, und wenn Sie die Implementierung von Google Analytics von hier aus durchgeführt haben , werden Sie ein Problem mit Cookie Hub bekommen, weil Cookie Hub das Skript nicht wirklich blockieren kann , weil Webflow diesen Code und das Google Analytics-Skript lange zuvor injiziert und das Google Analytics-Skript lange zuvor dann dieses Skript Was wir hier also tun müssen, ist, dass wir das tatsächlich von hier entfernen müssen von hier entfernen , weil das Löschen nicht erlaubt , sofort zu löschen Ich hatte ein neues Tag und lösche gespeichert, und wir werden eine manuelle Installation aus einem benutzerdefinierten Code ohne Webflow-Installation aus diesem Feld durchführen einem benutzerdefinierten Code ohne Webflow-Installation aus diesem Feld Dafür müssen wir zu Analytics gehen. Analytics.google.com, noch einmal. Von hier aus werden Sie aufgefordert, sich bei dem richtigen Google-Konto anzumelden, sobald Sie sich angemeldet haben können Sie dies tun Wenn Sie nur ein Konto und eine Immobilie haben, wird diese sofort ausgewählt Wenn Sie jedoch mehrere haben, müssen Sie von hier aus auswählen. Sobald Sie hier sind, suchen Sie nach Datenströmen. Das haben wir beim letzten Mal eingerichtet. Und wenn Sie sich erinnern, das haben wir für meine Website getan, für die TeamApp-Website und ich habe hier Ähnliches, klicken Sie darauf Und beim letzten Mal haben wir einfach diese Mess-ID abgerufen, aber dieses Mal werden wir tatsächlich das gesamte Skript abrufen, das wir in den Anweisungen zum Tag anzeigen finden können Und wählen Sie Manuell installieren und wir werden diesen Code bekommen und wir werden diesen Code verwenden. Dies ist ein ähnlicher Code , den Webflow injiziert. Es wird nur viel früher injiziert. Und wir können uns diesen Code von hier holen. Es hat unsere ID bereits an einem Ort hier, einem anderen Ort genau hier. Da braucht es. Wenn Sie diesen Code in Ihrem Google Analytics-Dashboard nicht finden können, können Sie Gemini oder einen anderen LLM fragen und sagen, geben Sie mir das neueste Google Analytics-Skript Und es wird genau dasselbe Skript bereitstellen. Es wird nur dieses Gxxxx haben und hier müssen Sie diese Mess-ID ersetzen , und dann ist das Skript genau dasselbe Und die Mess-ID war schon da, als wir sie löschen Sobald Sie diesen Code haben und die Mess-IDs korrekt eingegeben haben, werden Sie dieses Google Analytics-Skript nach dem Cookie b-Skript genau hier einfügen . Problem, das ganze Problem bestand darin, dass dieses ganze Skript, das Webflow vorher einfügt und dann den Cookie Hub ausführt, und jetzt ist CookieHub nicht in der Lage, dieses Skript tatsächlich abzufangen und zu und blockieren, bevor der Benutzer ihm die Erlaubnis geben Für alle anderen Tools, die Anwendungen oder Tools von Drittanbietern , die Sie auf Ihrer Website installieren, die Tracker oder vielleicht einen Chat-Bot oder eine Terminbuchung, alles, was Cookies verwendet, werden Sie sie immer unter dem Cookie Hubs-Code installieren. Cookie Hub ist also in der Lage, diese Skripte zu kontrollieren. Sobald Sie es richtig gemacht haben, klicken Sie auf Speichern. Veröffentlichen Sie dann erneut, um die Domains auszuwählen, und geben Sie sich etwas Zeit. Und sobald es veröffentlicht ist, können wir jetzt zum Cookie Hub zurückkehren und es bitten, es erneut zu scannen Und dieses Mal sollte es, sobald es gescannt ist, in der Lage sein, die Cookies korrekt abzufangen, und es sollte uns hier keine Probleme bereiten, und das dauert normalerweise ein paar Minuten, sodass Sie weggehen, eine Pause einlegen und später wiederkommen können eine Pause einlegen und später wiederkommen Sobald Sie fertig sind, werden Sie bekommen, dass keine Probleme gefunden wurden, und das bedeutet, dass alles in der Übersicht korrekt eingerichtet ist, Sie werden alles in Ordnung bekommen, ohne dass Probleme erkannt wurden. Nebenbei, wenn Nutzer tatsächlich auf Cookies zulassen klicken, werden die Cookies und Google Analytics geladen, und dann tatsächlich auf Cookies zulassen klicken, werden alle anderen Skripte, die Cookies benötigen, geladen und ausgeführt. Es gibt noch andere Einstellungen und Anpassungen, die möglicherweise vorgenommen werden müssen, aber das hängt von der tatsächlichen Website, verwendeten Tracking-Skripten und der Zielgruppe ab, für die sie bestimmt ist Deshalb werde ich hier nicht darauf eingehen Aber wenn du ein echtes Projekt hast und Hilfe benötigst, poste es einfach in den Fragen und Antworten und ich 179. Code-Einbettung + KI: In diesem Video werden wir in der Praxis ein weiteres Tutorial zu benutzerdefiniertem Code durchführen. Auch hier handelt es sich um eine kostenpflichtige Funktion in Webflow benötigen also entweder . Sie benötigen also entweder ein kostenpflichtiges Webflow-Konto, Workspace-Konto oder einen Hosting-Plan auf einer der Beim letzten Mal haben wir diesen benutzerdefinierten Code über die Seiteneinstellungen installiert , und dieses Mal werden wir dieses Code-Embed-Element verwenden dieses Code-Embed-Element In diesem Szenario werden wir uns die Installation einiger Codekomponenten aus externen Quellen innerhalb von Webflow ansehen. Das wird dir zeigen, wie sehr du deine Fähigkeiten und deine Fähigkeit, Webflow zu entwerfen, erweitern kannst und nicht nur auf die native Funktionalität von Webflow verlassen kannst, sondern auch Funktionalität und Design aus externen Quellen einbringen und Design aus Und wir werden auch KI einsetzen. Ich werde Ihnen zeigen, wie leistungsfähig KI in diesem Fall sein kann, um Ihnen zu helfen, den Code zu ändern und ihn für die Webflow-Implementierung nützlich zu machen In freier Wildbahn gibt es viele Websites und Orte, die Open-Source-UI-Komponenten gemeinsam nutzen Einer der beliebtesten ist CodePen. Hier kreieren Entwickler etwas. Sie teilen ihre Code-Implementierung, und andere Entwickler können sich den Code schnappen, ihn verwenden und ihn in ihren Designs und auf ihren Websites implementieren . Eine weitere Option, die UIRs ist ähnelt ebenfalls CodePen, ist nicht genau dieselbe, aber sie ist etwas einfacher, und wir werden mit UIWors beginnen und ich werde anhand eines Beispiels erklären, wie das Lassen Sie mich Ihnen zunächst einen kleinen Leitfaden geben, wie UI Verse Gehen Sie also zu Ivers Dot IO. Ich werde den Link auch in die Ressourcen einfügen. Und was wir hier haben sind einige Komponenten, die erstellt werden, wie Schaltflächen, die animieren, Dinge, die wie eigenständige , einfache Komponenten sind, die gebaut werden, wie Schaltflächen, die animieren, Dinge, die wie eigenständige, einfache Komponenten sind, die gebaut werden, und sie haben normalerweise lustige, nicht lustige, aber lustige Animationen und Interaktionen die Designer oder Entwickler, die erstellt wurden, kreativ hielten Und du kannst zu Elementen gehen, auf Alle klicken und hier werden wir sehen, dass es animierte Dinge, Gradienten, Flüsse und Interaktionen mit denen du sofort interagieren kannst. Und wenn Sie mit der Maus darüber fahren, werden Sie verschoben, um Code abzurufen Und dann bietet es HTML ein CSS, das Sie abrufen und implementieren können, wo immer Sie wollen Und die Art und Weise, wie man den UI-Vers benutzt, ist, ich gebe dir hier einen kleinen Tipp. Du wirst das als Rückenwind und CSS sehen. Tailwind ist ein Framework und eine Bibliothek, die auf CSS basieren, und das in Webflow zu verwenden, ist etwas kompliziert, weil das bedeutet, dass wir die Web-Tailwind-Datenbank oder -Bibliothek abrufen und in unsere Website importieren müssen , und das verkompliziert die Dinge, und es kann zu Konflikten mit den CSS-Klassen und der Bibliothek führen, die wir im Web , und das verkompliziert die Dinge, und es kann zu Konflikten mit den CSS-Klassen und der Bibliothek führen, es kann zu Konflikten mit den CSS-Klassen und haben, die wir nicht wollen Wir wollen saubereres CSS. Das ist einfach, sie nennen es Vanilla-CSS. Und wenn du das durchgehst, ohne diesen Filter auszuwählen, wirst du feststellen, dass auf einigen von ihnen dieses Rückenwindsymbol steht. Wenn es nicht vorhanden ist, bedeutet das, dass es nicht auf Rückenwind basiert, und Sie können es als solches verwenden, indem Sie die Vanilla-Implementierung von CSS Wenn Sie sich das ansehen, stellen Sie manchmal sicher , dass Sie CSS auswählen. Dadurch manchmal sicher , dass Sie CSS auswählen erhalten Sie nur eine einfache Vanilla-Implementierung ohne Abhängigkeit von einer externen Bibliothek wie Healing Also habe ich diese Karten hier gefunden. Dieses Ding hier, und ich mag diesen Effekt wirklich , egal welcher Effekt. Und natürlich könnten wir das möglicherweise mithilfe von Webflow-Interaktionen selbst in Webflow aufbauen mithilfe von Webflow-Interaktionen selbst in Webflow Aber manchmal möchte man nicht versuchen, alles herauszufinden, und man sieht eine sehr nützliche, einfache Komponente Sie können sie einfach kopieren und in Webflow einfügen Wenn Sie etwas finden , das Ihnen gefällt, klicken Sie hier, Code abrufen. Und hier werden wir HTML und CSS bekommen. Also nichts Kompliziertes hier. Genau so arbeiten wir auch in Webflow. Wir haben HTML-Elemente oder -Tags, und genau das fügen wir hier hinzu. Zum Beispiel DIV Block. Das ist der DO-Block. So wird der D-Block geschrieben. Und wenn es heißt, dass Klasse gleich Kartenstapel ist, fügen wir hier genau das hinzu. Wenn wir diesen Kartenkartenstapel einfach benennen würden, wäre das genau dieselbe Implementierung in Webflow, die Sie hier sehen, DV-Klasse, Das ist es. Und dann, welche Stile wir auch ändern, welche Stile auch immer sich hier ändern, sie werden Zeile für Zeile hinzugefügt, sie werden unter dieser Kartenstapelklasse hinzugefügt. Das ist es, was hier passiert. Das ist uns ziemlich bekannt. Und das ist eine sehr gute Einführung für Sie und eine gute Möglichkeit, sich Hände schmutzig oder einem kleinen Code die Hände schmutzig oder nass zu machen. Es ist eine wirklich gute Idee für Sie, nicht davor zurückzuschrecken, hier und da ein bisschen Code zu implementieren, denn das erweitert Ihre Fähigkeiten in Bezug darauf, was Sie mit Webflow oder einfach generell mit Webdesign machen können , was Sie mit Webflow oder einfach generell mit Webdesign machen , auch wenn es kein Webflow ist Was wir hier also tun müssen, ist einfach diesen ersten HTML-Code zu kopieren und einen einfachen Abschnitt-, Container- und Überschriftenabsatz zu erstellen Container- und Überschriftenabsatz Nennen wir das benutzerdefinierten Code. Tutorial. Lassen Sie uns das etwas aufpolstern C zentriert es. In Ordnung. Und im Inneren können wir jetzt Code einbetten Sobald Sie darauf klicken, öffnet sich dieses Feld, in das wir den Code einfügen können. Also hier werden wir alles einfügen, was wir kopiert haben, und es wird diesen Kommentar beibehalten. Sie können diesen Kommentar entfernen oder nicht. So schreiben Sie Kommentare in HTML. Und dieses Feld ist ein HTML-Feld. Nur HTML geht hinein. Sie können Ihr CSS oder reines JavaScript nicht hineinlegen. Sie müssen sie in HTML-Tags einschließen. Also zum Beispiel, und das zweite, was wir von hier kopieren müssen, ist dieses CSS Aber das ist reines CSS. Wenn wir es also einfach so einfügen, erhalten Sie diesen weißen Text. Das bedeutet, dass es die Sprache nicht erkennt, wie sie geschrieben ist. Es ist HTML und all das ist so geschrieben, wie das CSS geschrieben ist, es erkennt es nicht , deshalb wird es weiß Also werden wir das nicht tun. Und um CSS in HTML einzufügen, müssen Sie es in das Style-Tag einschließen Und so sieht es aus, wenn Sie etwas in ein HTML-Tag einschließen. Stil mit runden Klammern, Stil mit runden Klammern, aber das abschließende Tag muss einen Schrägstrich haben wir zum Beispiel sehr oft tun, ist H ein Tag, richtig Und dann fügt man sie H eins bei, und das ist eine Überschrift So sieht es aus eine Überschrift in ein Weblog einzufügen Immer wenn wir eine Überschrift einfügen, ist das die Realität im Hintergrund, genau das passiert Nur ein H-Tag, das öffnende Tag sieht so aus, das schließende Tag sieht so aus. Alles innerhalb von HTML muss mit einem schließenden Tag abgeschlossen werden. Wenn Sie es nicht tun, wird es häufig einen Fehler ausgeben und Probleme verursachen , um sicherzustellen , dass es geschlossen ist. Also das Gleiche mit CSS. Sobald wir diese Anlage haben, können wir reines CSS hineinlegen und Ihr CSS einfach hier einfügen und Sie können sicherstellen, dass alles, sobald alles farbcodiert ist, es jetzt richtig können sicherstellen, dass alles, sobald alles farbcodiert ist, gelesen Es begann zu verstehen, dass wir dem Browser von nun an sagen, das als CSS zu lesen, weil wir es Stil nannten Und dann heißt es: Oh, wir haben es. Und dann nochmal Kommentare hier. Das sind Kommentare. Sie können sie entfernen, wenn Sie sie möchten, aber es ist ein guter Leitfaden für Sie oder wenn Sie nicht möchten, dass erwähnt wird, wer sie erstellt hat, denke ich nicht, dass Sie sie aufgrund der von ihnen bereitgestellten Lizenz referenzieren müssen . Ich denke, es ist kostenlos, und Sie müssen den Autor dieser Komponenten nicht angeben und ihn als Urheber angeben. Also hier, so schreibt man Kommentare innerhalb von CSS. So schreiben Sie Kommentare in HTO. Sobald das erledigt ist, klicken Sie auf Speichern und schließen. Und wenn es sich um reines HTML-CSS handelt, führt Webflow es normalerweise sofort im Design Wenn es auch JavaScript enthält, wird es das nicht sofort innerhalb der Vorschau tun, und es funktioniert entweder nur in der Vorschau, und wenn Sie sich in der Vorschau befinden, stellen Sie sicher, dass Sie benutzerdefinierten Code aktivieren Und wenn Sie dann JavaScript drin haben, werden Sie in der Regel auch wenn Sie dann JavaScript drin haben, hier JavaScript ausführen. Und in seltenen Fällen wird es manchmal nicht einmal in der Vorschau ausgeführt, und es wird nur auf einer veröffentlichten Seite ausgeführt , je nachdem , welchen Code Sie implementieren. Viele und die meisten von ihnen werden hier ausgeführt, aber bei einigen muss es verschiedene Abhängigkeiten importieren, dann werden sie hier nicht ausgeführt, weil sie wahrscheinlich mit der Flow-Erfahrung kollidieren werden . Wie Sie sehen können, funktioniert das bereits recht gut. Wir können zum Beispiel einige Anpassungen daran vornehmen Lassen Sie uns hier etwas Abstand geben. Und jetzt nehmen wir an, wir wollen, dass es zentriert wird, oder? Das sind also Code und Bd, und das ist nur ein normaler generischer Div-Block, und Sie behandeln ihn wie einen Div-Block. Da es sich also standardmäßig um einen Div-Block handelt, Anzeige auf Block eingestellt, was bedeutet, dass er sich von Kante zu Kante erstreckt. Eine Möglichkeit, ihn nicht von Kante zu Kante zu dehnen, besteht darin, ihm entweder eine feste Breite zu geben und ihn dann diese Weise zu zentrieren, oder wir können ihm einfach einen Inline-Block geben. Und die Breite wird durch den Inhalt bestimmt, der sich darin befindet. Und in einem breiten Block wird das genau in der Mitte platziert. Ordnung, das funktioniert alles gut, aber was ist das, richtig Hier gibt es keinen Inhalt. Wie arbeiten wir damit? Wie ändern wir den Text? Wie ändern wir? Wie ändern wir die Größe oder die Farben? Nun, alles hier, weil das ein Code ist und schlecht, all die Stile, jeder Inhalt darin, das passiert nur durch den Code darin. Alles, was geändert werden muss , muss von hier aus geändert werden. Wir können nur das Äußere kontrollieren. Wrapper, das ist dieser Code und schlecht, und wir können verschiedene Änderungen daran vornehmen , wie eine Platzierung oder eine Größe, aber alles andere muss durch den Code geändert werden Nehmen wir zum Beispiel an, wir wollen diese Bilder wie einen Fotosack machen Wie machen wir das? Nun, hier kommt die KI-Anpassung her. Wir können KI darum bitten. Also können wir diesen Code nehmen. Wir können zu einem der Almosen gehen. Alle drei CloudGemni HachBT. Sie werden das alle ziemlich gut machen. Ich verwende Cloud in diesem Fall weil Cloud normalerweise am besten mit Code umgehen kann, aber das ist ein sehr einfacher Code , und alle drei werden darin hervorragende Arbeit leisten. Was wir also tun können, ist diesen Code zu aktualisieren, damit die oberste Karte mit dem Bild gefüllt wird. Drücken Sie die Eingabetaste, damit Sie eine neue Zeile hinzufügen können , ohne die Aufforderung zu senden. Also fügen Sie den Code hier ein, und jetzt pinnen wir jgiptClotImage Um ihm ein Bild zu geben, laden Sie Ihre Bilder Assets-Menü von hier aus in Webflow hoch, suchen Sie ein Bild auf Splash oder paxels.com oder wo auch immer wir normalerweise unsere Stock-Fotos finden paxels.com über das Assets-Menü von hier aus in Webflow hoch, suchen Sie ein Bild auf Splash oder paxels.com oder wo auch immer wir normalerweise unsere Stock-Fotos finden. Und sobald du sie hochgeladen hast, und ich habe schon ein paar Bilder hier und drüber, hol dir den Link zum Kopieren Und dieser Link wird ein produktionsreifer Link auf unserer Webflow-Seite sein , und dies ist ein guter Ort, um Ihre Bilder zu laden und wir können unsere Bilder von hier aus steuern Wir können sie komprimieren, und das ist ein guter Weg, und wir wissen, dass unsere Bilder nicht verschwinden werden Verwenden Sie also keine URL, die nicht Teil unserer Website ist. Wenn es wie die Splash-URL pexels.com, URL oder eine andere URL ist, könnte sie irgendwann verschwinden und wir haben keine Kontrolle darüber Aber wenn es unsere Bilder sind, haben wir die Kontrolle darüber und wir wissen, dass die URL funktioniert und immer live ist, wenn sie hier ist URL funktioniert und immer Sobald Sie also die URL haben, ist das Einfügen auch irgendwo. Jetzt haben wir also Anweisungen, wir haben den ganzen Code, den wir bereits haben, hineingelegt und wir haben ihm ein Bild gegeben, und es wird verstehen, dass dies das Bild ist, das wir meinen, und dass das der Code ist, der aktualisiert werden muss. Und lassen Sie uns sehen, wie es funktioniert. Das kannst du ignorieren. Das verstehe ich. Heute weiß ich es nicht. Es gibt vielleicht irgendein Problem mit der Cloud, aber sie funktioniert immer noch. Es ist ein Tool-Aufruf , auf den es nicht zugreifen kann. Ordnung. Also jetzt erkläre ich dir, was hier passiert und was Clot getan hat Jedes LLM zeigt den resultierenden Code auf unterschiedliche Weise an, und so funktioniert Cloud Normalerweise wird hier eine Vorschau geöffnet. Wenn es geschlossen ist und dir gerade Code wie diesen gegeben hat, kann er heruntergeladen werden, aber wir müssen ihn nicht herunterladen. Du klickst einfach darauf. Ich werde diesen Vorschaumodus trotzdem öffnen. Und das ist eine Vorschau, funktioniert aber normalerweise möglicherweise nicht und in diesem Fall funktioniert es nicht. Es zeigt die Dinge nicht richtig. Sie können diesen Teil also ignorieren und zum Code wechseln, und das ist der Code , den wir kopieren können. Wir haben ihn. Und ich zeige es dir in Gemini Ich habe das bereits mit Gemini und HachPT gemacht, also kann ich dir zeigen, ob du das verwenden wirst und ob du möglicherweise Abonnement für Gemini oder HAHPT hast HAHPT Auch kein Problem. So funktioniert es in Gemini Gemini gibt in diesem Fall keine Vorschau, sondern aktualisiert den Code und kopiert den Code von hier Das funktioniert. Und in HAGPT, ein bisschen ähnlich wie zwischen der GPT-Mischung aus Clot und Gemini, bekommst du den Code, der von hier kopiert werden kann Und von diesem Switcher aus können Sie eine Vorschau anzeigen, und er gibt Ihnen die In diesem Fall funktioniert es sofort auf JaJupt. Aber gleiche Implementierung. Sobald Sie diesen Code haben, kehren Sie zur Einbettung zurück, löschen alles, was Sie hatten, fügen diesen neuen Code ein und Sie werden feststellen , dass die meisten Dinge genau dieselben sind. Der Stil ist immer noch da. Sie können auf Pretty FIT klicken und die Formatierung anpassen. Und Sie werden sehen, dass die Hauptkarte einer Karte aktualisiert wurde und das Hintergrundbild jetzt eine URL hat, die URL oder Quelle unseres Bildes ist. Und diese Dinge hier, Karte ist eine Klasse und Main daneben ist eine Kombiklasse. Damit machen wir normalerweise, oder? Wir haben eine Karte, das ist die Basisklasse. Das ist also ein gemeinsamer Stil, der von allen anderen geteilt wird. Und dann werden bei den Kombinationsklassen, Karte eins, Karte zwei, Hauptkarte, die Änderungen an den anderen Klassen vorgenommen, in der Nähe gespeichert und los geht's. Das Bild wurde gefüllt und Vorschau wurde vergessen, also funktioniert alles einwandfrei. Und jetzt können wir ihm möglicherweise mehr Bilder geben und die anderen durch mehr Bilder ersetzen. Nehmen wir an, kopieren Sie den Link, gehen Sie zurück zur Cloud und aktualisieren Sie die beiden anderen Karten mit diesen Bildern. Das ist einer. Und das ist es auch. Und dann haben wir den Job gemacht, klicken Sie darauf, damit wir kopieren können. Auch hier funktioniert es nicht. Wechseln Sie zum Code, kopieren Sie ihn, öffnen Sie ihn, löschen Sie alles wieder, fügen Sie neuen Code ein. Sie können hier noch einmal nachsehen, wie Sie sehen können, Karte eins hat jetzt Bildhintergrund , Bildhintergrund, Bildhintergrund für alle drei, Speichern und Schließen und alles , was aktualisiert wurde. Und jetzt haben wir Bilder auf allen dreien. Und wenn wir noch etwas ändern wollen, zum Beispiel wenn Sie die Größe ändern möchten, müssen wir jetzt die Größen ändern. die KI auch hier über den Code, Bitten Sie die KI auch hier über den Code, etwas daran zu ändern. Aber Größen lassen sich eigentlich ganz einfach ändern, weil Sie sehen werden, dass sie hier irgendwo angewendet werden. Sie können sehen, dass der Kartenstapel eine Größe hat, und das ist es , was die Größe der einzelnen Karten bestimmt, denn dann haben die restlichen Karten eine Breite von 100% und eine Höhe von 100%, also basieren sie auf dem übergeordneten Element, das hier die Größe hat. Wenn wir es also größer machen, wird es größer. Erledigt. Wenn wir wollen, dass sie etwas mehr herauskommen, damit wir mehr Bilder sehen können, dann machen wir wieder etwas anderes, mit KI, erklären es ihr, bringen es rein. Ich werde gut arbeiten. Und das ist es. Sehr leistungsstarke Methode, um Ihre Fähigkeiten und Ihr Wissen über Arbeit mit Webflow und Erweiterung Ihrer Webdesign-Fähigkeiten zu erweitern Im nächsten Video werden wir eine etwas komplexere Implementierung von etwas Ähnlichem von CodePen durchführen eine etwas komplexere Implementierung von etwas Ähnlichem von CodePen 180. CodePen + KI: A: In diesem Video werden wir eine weitere Implementierung von benutzerdefiniertem Code durchführen Das ist etwas komplizierter und komplexer. Und wir werden auch KI verwenden, und wir werden uns Hilfe von KI holen , um den Code zu modifizieren , den wir erhalten werden. Also habe ich diese wirklich coole Akkordeon-Komponente gefunden. Auf CodePen sieht es wirklich gut aus. Ich liebe die Animation, und das wäre eine wirklich gute Komponente auf wahrscheinlich jeder Art von Website Sie könnten zum Beispiel als Testimonials verwendet werden, oder? Dies könnte der Avatar einer Person sein, ihr Name, ihr Titel und ihr Testimonial, die wir möglicherweise hier als Zitat hinzufügen , oder dies könnte das Zitat sein Und dann haben Sie andere Fotos von Personen, und der Hintergrund kann durch etwas anderes ersetzt werden . Das ist eine Möglichkeit, es zu tun. Das kann auch wie Features sein, weißt du, Feature eins, Feature zwei, Beschreibung und so weiter. Diese Kategorien können auf viele verschiedene Arten verwendet werden. Es ist einfach eine wirklich nette Komponente und kann auf jeder Site verwendet werden. Nein, wir können das definitiv auch in Webflow neu erstellen Aber natürlich werden wir uns etwas mehr Zeit nehmen, um uns das anzusehen, neu zu erstellen und einen Weg zu finden, wie das geht Wenn wir dagegen Rapid Prototyping betreiben , testen wir Ideen vielleicht mit einem Kunden Manchmal sagen wir, okay, lass mich sehen. Lass mich das fallen lassen. Du arbeitest mit einem Kunden und du wirst sagen, wie wäre es damit? Wird das funktionieren? Sie müssen also nicht viel Zeit damit verschwenden, alles zu erstellen, und die Art Frankenstein-Erstellung einer Website ist auch eine wirklich gültige Methode, dies zu tun Sie holen sich verschiedene Komponenten von verschiedenen Websites. Finden Sie Open-Source-Komponenten an Orten wie CodePen und implementieren Sie sie dann Stück für Stück Das ist auch eine Möglichkeit, das zu tun. Also werde ich dir zeigen, wie ich das auf CodePen gefunden habe, damit du verstehst, wie das funktioniert Gehen Sie also zu Codepen Dot IO. Und ich bin bereits bei CodePen angemeldet, um eine Suche durchzuführen. Sie werden aufgefordert, sich anzumelden Und sobald Sie sich angemeldet haben, können Sie suchen. Ich habe nach Karten gesucht. Und der Unterschied zwischen CodePen und UIers besteht darin, dass der UI-Vers etwas einfachere Elemente enthält , bei denen es sich nur um CSS und HTML handelt nur um CSS Das ist es. Das Tolle an UIVs ist , dass sie einfach zu implementieren sind, weil sie sauber sind Sie sind reines Javascript, tut mir leid, reines HTML, reines CSS, und sie werden sofort funktionieren, wenn wir das implementieren und es in den Code einfügen, der in Webflow eingebettet CodePen funktioniert ein bisschen anders. CodePen hat HTML, CSS, JavaScript und sie können auch verschiedene Bibliotheken und Frameworks und Abhängigkeiten enthalten und Sie können also leistungsfähiger sein. Deshalb kann man ein bisschen mehr sehen. Manche Leute lassen hier sogar ganze Designs für Ausleihseiten und Website-Designs fallen . Wie Sie sehen können, werden hier ganze Seiten geteilt. Offensichtlich ist es nicht das, was wir wollen. Wir möchten nicht, dass die gesamte Seite implementiert wird. Manchmal haben Spiele, komisches Zeug, du weißt schon, interessante Animationen und Komponenten. So kannst du auf gute Ideen kommen, dass wir natürlich nicht die gesamte Landingpage umsetzen würden. Wir würden einige kleine Komponenten finden, wirklich nützliche Dinge wie diese, die Karten, auch diese, die eine gute Animation haben. Sobald Sie also etwas gefunden haben, das Ihnen gefällt, gehen Sie hinein und Sie erhalten diese Ansicht mit HTML, CSS und JavaScript. Und so wird jeder Codestift aussehen. Sie können die Größe ändern, und das ist der Code, und das ist der Spielplatz, nicht der Spielplatz, sondern die Ansicht der Komponente selbst Und manchmal haben Sie vielleicht nur HTML und CSS und kein Javascript und manchmal haben Sie alle drei Sprachen, abhängig vom Stift selbst Eine weitere Sache, die hier berücksichtigt werden muss, ist, dass der Code in CodePen möglicherweise kein reines CSS oder JavaScript ist, und das ist in diesem Beispiel auch nicht der Dieser verwendet einen Präprozessor namens SCSS, und dieser verwendet die jQuery-Bibliothek, die kein reines Javascript ist, und es ist eine Abhängigkeit , und es ist eine Abhängigkeit KI wird das verstehen, weil sie verstehen wird, wie es geschrieben ist, und sie werden verstehen , dass sie diese Abhängigkeiten nutzt, aber wir können ihr sagen, dass sie sie nicht verwenden soll Was wir also tun werden, ist, wie üblich, einfach diesen Code zu schnappen und dann gehen wir zu einem der LLMs und wir werden Ihnen sagen, dass Sie ihn an unsere Bedürfnisse anpassen sollen Also werde ich dieses Mal Gemini verwenden, weil ich bei Cloud auf die Grenzen gestoßen bin , und es ist eine gute Demonstration, um zu sehen, wie es auf einem anderen LLM funktioniert Also hier ist es und der Prozess wird auf allen drei LLMs gleich sein Nun, was wir hier tun werden, wir werden es anweisen, diese Komponente wiederzuverwenden, und ich werde ein paar Schlüsselwörter verwenden , die Sie in solchen Fällen verwenden müssten Und das Schlüsselwort stammt in diesem Fall von Code Pen Weil CodePen einige Nuancen haben wird und es ein guter Kontext ist, um den Chatbot zu füttern Sie verstehen also, dass, okay, wir uns diesen Code von CodePen holen, und wenn es da einige Nuancen gibt, das irgendwie beinhalten und er wird es von Und dann noch etwas, das wir ihm für Webflow, Code und Bad sagen für Webflow, Und das ist eine weitere Nuance, die wir erläutern müssen, denn wenn es sich um einen Webflow-Code mit schlechtem Potenzial handelt, wird er hoffentlich verstehen , dass es sich um einen Code für die HTML-Ausgabe handelt, den wir einfügen können, und wir bauen nicht wirklich eine unabhängige Umgebung auf, wenn verschiedene Dateien miteinander kommunizieren Und dann werden wir es zählen, um es zu einer Vanilla-Implementierung zu machen einer Vanilla-Implementierung zu machen Und das ist ein anderes Co-Wort. Das ist im Grunde ein Fachbegriff für Vanilla-Implementierung oder Vanilla. Das heißt, keine J-Abfrage, kein React, kein CSS, wir wollen, dass es reines normales, gutes altes JavaScript und CSS ist. Auf diese Weise funktioniert es sofort in jedem Browser und innerhalb von Webflow, und wir müssen keine Abhängigkeiten abrufen, die möglicherweise zu Konflikten mit der Webflow-Umgebung führen könnten Also wollen wir das nicht. Wir wollen nur reines JavaScript und CSS. Es funktioniert also sofort. Ein weiteres Schlüsselwort, das wir ihm sagen wollen. Ein weiterer Kontext, den wir der KI zur Verfügung stellen müssen , ist, dass wir dies auf einer bestehenden Website tun. Wir müssen also sicherstellen, dass sie diesen Kontext versteht, dass es sich nur um eine kleine Komponente handelt , die wir in unsere bestehende Website einfügen werden. Also werden wir es erzählen. Es muss auf einer bestehenden Website funktionieren. Und es hat diese Referenzen hier. Es gibt einen Link zum Autor. gibt es auch etwas vom Hier gibt es auch etwas vom Autor, also können wir das loswerden. Wir brauchen keinen Kredit. Das ist Open Source und wir können es verwenden. Wir müssen die Autoren des Codes nicht nennen, also können wir ihn einfach loswerden Entfernen Sie also alle Verweise auf Autoren. Und jetzt fangen wir an , den Code einzufügen, nehmen HTML, fügen es ein, Shift Enter, CSS, Shift Enter, Wrap, JavaScript Umschalten. Nun, es ist schon da. Ich habe es erlebt. Und wenn Sie kostenpflichtige Pläne haben, ist das etwas komplexer. Aus diesem Grund werden bezahlte Tarife und kostenpflichtige Modelle der höheren Stufe hier viel bessere Arbeit leisten. Und bei allen drei Modellen kannst du normalerweise sogar mit dem kostenlosen Tarif mit intelligenteren Modellen spielen, wie Thinking und P. Und in diesem Fall werde ich wahrscheinlich versuchen, darüber nachzudenken, weil P sehr schnell an das Limit stößt und falls wir mit ihm kommunizieren wollen. Ähm, Denken könnte schon einen guten Job machen. Also werde ich das Denken benutzen. Du willst es nicht schnell machen. Sie werden wahrscheinlich auch den guten Job machen, aber ich möchte es zum Nachdenken anregen, also fängt es an, Dinge zu berücksichtigen, von denen ich ihm erzählt habe, dass es sich um eine Webflow-Code-Einbettung handelt, dass wir es einfach wollen, dass es einfach auf der bestehenden Website ist, damit es einfach nicht sofort ausspuckt Denken Sie also über diese Dinge nach. Gemini on Cloud würden Sie also höhere Modelle wie Opus wählen, und dasselbe gilt für Chacha PT, Modelle mit höherem Mal sehen, dass es diesmal etwas länger dauern wird, da wir ihm auch sagen, dass er etwas tiefer darüber nachdenken und ihm etwas Zeit geben soll, und schauen wir uns an, was das Ergebnis Ordnung. Also hat es es beendet. Also lass uns sehen, was ist. Das ist das Plug & Play. Das ist gut. Wir wollen, dass es Plug-and-Play ist. Ich habe S CSS nach Vena konvertiert. Da hast du's. Das habe ich verstanden. JQuery wurde durch Vanila-Javascript ersetzt Vanila-Javascript Großartig, großartig, großartig. Das ist es, was wir wollen. Und alle Autorennachweise wurden entfernt. Um den Webflow zu verwenden. Fügen Sie in Webflow einfach den gesamten Block unten in ein Code-Embed-Element ein Großartig. Okay. Also gab es uns auf einmal einen vollständigen Code. Es gab uns nicht wie HTML separat, CSS separat, sondern gab uns einfach alles auf einmal. Das ist genau das, was wir wollen. Und wir können einfach das Ganze von hier kopieren und schauen, wie es funktionieren wird. Und in Webflow werden wir wieder Code und Bad hinzufügen und alles hier einfügen Und lassen Sie uns einen kurzen Blick darauf werfen. Lass uns sehen. Also das Drehbuch ist da, gut. Das ist HTML, all das. Das ist CSS, das gut in die Style-Tags eingepackt ist. Und es zieht, was die Schrift genial macht. Okay, es verwendet also eine Abhängigkeit , die dieser Code bereits enthält, nämlich die Symbole. Und jetzt könnten wir diese Abhängigkeit möglicherweise nicht nutzen, sie von oben loswerden und das LLM mit unseren eigenen Symbolen füttern Also können wir geben, dass wir hochladen würden, wie wir es mit Bildern gemacht haben, wir würden SPG-Symbole hochladen und wir würden euch auch sagen, Icons durch diese und diese und diese SPG-Symbole von diesen Links ersetzen SPG-Symbole von diesen Aber das ist momentan in Ordnung. Wir können das definitiv gebrauchen. Es ist ein kostenloser Font Awesome ist wie ein kostenloses Icon-Set, das wie eine Schrift funktioniert, sodass Sie nicht jedes einzelne Symbol mit einem Bild anwenden müssen jedes einzelne Symbol mit einem Bild ist ein sehr praktisches Tool , bei dem Sie die gesamte Schrift hierher ziehen und dann im Code darauf verweisen können. Speichern und schließen Sie und lassen Sie uns sehen, wie es funktioniert. Ordnung, ich finde, es sieht ziemlich gut aus. Lass es uns testen Funktioniert wirklich gut. Nett. Wie Sie sehen können, gibt es hier einige Probleme Der Text ist etwas wackelig und mittig ausgerichtet, aber ansonsten funktioniert alles einwandfrei Nun, wenn Sie das alleine machen und andere Probleme haben, könnten Sie darauf stoßen, könnten Sie darauf stoßen weil die KI nicht vorhersehbar ist Man muss sie irgendwie richtig anleiten. Und je nachdem, welches Modell Sie verwenden, können Sie, wenn es schnell ist, einige Fehler machen. Wenn es ein Modell ist, das besser denkt, wird es normalerweise den besten Job machen. Wenn Sie also Probleme haben, ein Screenshot. Also würdest du im Grunde einen Screenshot wie diesen machen und ihm sagen: Okay, das ist falsch ausgerichtet oder so, und wie repariere ich das Und dann wirst du dir normalerweise eine Antwort geben, und dann wirst du sie anwenden können Solange das Problem nicht im Webflow liegt oder etwas vom Webflow kommt, was in diesem Fall tatsächlich der Fall ist, und jetzt werde ich Ihnen zeigen, woher das kommt Nun, da wir dieses Zentrum ausgerichtet haben, wird es auf den Container angewendet, wie Sie sehen können, die Mittellinie, die nach unten fällt, und alle darin enthaltenen Elemente Wie Sie sehen können, erben das Code- und Bettelement dies von Container sechs Ordnung? Es ist also mittig ausgerichtet, was bedeutet, wenn Code Embed erbt, bedeutet das, dass alles darin, die darin enthaltenen Schriftstile, dies als Gegenleistung vom Code und dem Bett erben, es sei denn, sie sind innen explizit linksbündig ausgerichtet, was Also, was wir hier tun werden, ist, einfach Code und Bett auszuwählen und das auf linksbündig zu ändern , und das war's, und das sollte funktionieren Und da hast du's, das hat funktioniert. Und ein weiterer Teil, wir hier testen können , ist, dass, wie Sie sehen, hier eine kleine Lücke besteht, wohingegen dort, wo unser ursprüngliches Original ist , diese Lücke nicht hatte. Es ist gut zentriert. Also, was wir hier tun können, ist, ich könnte es scannen, aber ich denke, es wird es verstehen, wenn ich es erzähle. Normalerweise wäre es nett, wenn du wüsstest, wie man es sagt. Wenn nicht, könnten Sie auch den C-Code durchblättern und ihn vielleicht anhand dessen, was Sie wollen, tatsächlich verstehen, weil es sich um Klassen handelt, die von Menschen benannt wurden, oder um Klassen, die von Menschen benannt wurden Damit Sie Shadow verstehen, wurde es als Option Active bezeichnet. Du verstehst das, oder? Option aktives Etikett, wahrscheinlich eines der Labels darunter, Info, okay? Und wenn wir das Symbol beschriften. Okay, wir verstehen. Also das ist das Labelsymbol. Wir wissen, wo sich das Symbol befindet, und beschriften die Informationen in der Farbe Weiß. Also das ist wahrscheinlich Text, Info Main fett, Ifosab und auch leichter zu erkennen, weil man einfach nach dem Text suchen kann, dem eigentlichen Text, der hier in der Vorschau enthalten war Also diese blonde Schlüsselschwester, ich weiß nicht, was das ist, aber wie Sie sehen können, können wir den Text im Code finden Und dann können wir sehen, dass die Klasse hier die Hauptklassen Sub ist, also sind es Info Main und Sub. Also können wir darauf verweisen und dem Labeltext sagen, dass die Info Main und Sub eine kleine weiße Lücke haben. Sie sind nicht so eng wie in der Mginal-Komponente Und richtig, mal sehen, was es uns sagt. Die Lücke wird wahrscheinlich dadurch verursacht, dass der Leerraum vor der Eigenschaft die Zeilenumbrüche beibehält, bla, bla, bla. Ersetzen Sie die Labelinformationen Okay, es hat also nicht das Ganze aktualisiert. Wir können Ihnen sagen, dass Sie aktualisieren sollen, oder wir können sehen, ob wir den Label-Infosection in Ihrem CSA einfach durch diese Titan-Version ersetzen können , Label-Info, all das, Damit wir genau dieses Ding finden können. Ich könnte es auch sagen, regeneriert es einfach nochmal für mich. Google hat es darauf trainiert, nicht den gesamten Code von Grund auf neu zu generieren , da dies mehr Rechenleistung kosten wird Es ist also faul und sagt uns, wir sollen es einfach selbst machen, was wir tun können und wir können sagen: Okay, es sagt uns, wir sollen das Label Infosection in Ihrem CSS durch diese Titan-Version ersetzen Label Infosection in Ihrem CSS durch diese Titan-Version Ordnung, wir werden Label-Info, Info Main Info SAP finden . Informationen zum Etikett Wir haben Label-Info, Info Mean hier und Info Sub hier gefunden . Das bedeutet also, dass wir sie nicht auf einmal haben müssen, also müssen wir sie hier ersetzen. Und jetzt, Infomin, das haben wir schon. Also lass uns das von hier entfernen. Und Info Sub, es ist überflüssig. Das ist die alte Version. Dies ist die neue Version, die wir eingefügt haben, also entfernen wir sie Und mal sehen, wir drücken die Daumen. Bei der KI weiß man nie. Nicht schlecht. Funktioniert gut. Engere Abstände Ziemlich gut. Eine weitere Änderung und Korrektur, die wir möglicherweise vornehmen müssen, ist responsiv. Mal sehen, wie sie in verschiedenen Größen aussehen. Das sieht gut aus hier, und hier wird es schon ein bisschen eng. Es könnte hier funktionieren. Mal sehen, ob es auf dem Handy funktioniert. Und auf dem Handy haben wir nur einen, und wir wissen nicht einmal, was hier vor sich geht. In Ordnung. Also gehen wir zurück zu Gemini und sagen, dass es reaktionsschnell ist Und hoffentlich haben Sie eine Vorstellung davon, was Sie mit dem Responsive machen sollen Möglicherweise könnte es eine vertikale statt einer horizontalen Stapelung durchführen eine vertikale statt einer horizontalen Stapelung Offensichtlich kann man es auf dem Handy nicht horizontal machen , oder? Es gibt also kein Leerzeichen. Also lass uns sehen, ob er sie, wer auch immer der Zwilling ist, versteht, wie man das responsiv macht , damit diese Reaktion funktioniert. Wir werden das Layout vom horizontalen zum vertikalen Stapel umstellen vom horizontalen zum vertikalen Stapel Nett. Ich habe auch den Titan-Space gut gehalten, Block in deinem Webflow ersetzt und eingebettet aber momentan echt faul. Es gibt mir nicht das ganze Ding. Jetzt sagt es mir, ersetze einfach den Stil. Könnte mir genauso gut den gesamten HTML-Code geben, Mann. Was stimmt nicht mit dir? In Ordnung. Lass uns zurückgehen Jetzt sagt es uns also, dass wir den Stil ersetzen sollen, oder? Es hat uns gesagt, dass wir den Style-Tag-Block in Ihrer Webflow-Einbettung durch diesen ersetzen sollen Das ist also unsere Style-Technologie. Hier fängt es an, und da haben wir es ausgewählt, vielleicht heben wir hervor, wo es endet. Hebt nicht hervor. Hier endet es also , wie Sie sehen können, im Schlussstil. Also, was wir tun werden, ist all das auszuwählen , zu löschen und einzufügen. Wenn Sie das nicht möchten, bitten Sie es einfach, das Ganze neu zu generieren und geben Sie mir den gesamten HTML-Code noch einmal Und lass uns sehen. Speichern und schließen. Mal sehen, ob nichts kaputt war. Es ist nicht gut. Und da hast du's. Es funktioniert vertikal. Hier macht es Sinn. Es passt. Hier passt es nicht mehr und es ist gut. Ich habe verstanden, dass wir uns hier nicht ändern müssen, aber auf dem Handy müssen wir uns ändern und wir können es austauschen. Und natürlich ist das jetzt meine Seite nicht stylisch. Ich brauche die Polsterung hier. Deshalb ist es nicht möglich, dass wir zum Beispiel den Abschnitt mit der Überschrift versehen, damit er hier nicht gequetscht wird Und jetzt hocken sie nicht mehr mit der Kante, und das funktioniert ganz gut. Es ist ziemlich gut Bei allen anderen Änderungen, die Sie möchten, würden Sie ihm sagen, dass er es tun soll. Bilder ersetzen, würden Sie es bitten, Bilder zu ersetzen, oder Sie können das auch über den Code tun. Sie können die URL des Bildes leicht finden. HTPS dieses Ding und du würdest es von hier kopieren. Eines der Bilder, du würdest das kopieren, den Link kopieren und dann würdest du das einfach im Code ersetzen oder KI bitten, es zu tun Das ist alles und ich hoffe, es hat Spaß gemacht und war nicht zu kompliziert. Und wenn Sie auf Probleme stoßen, lassen Sie es mich einfach in den Fragen und Antworten wissen und ich helfe Ihnen weiter Es ist definitiv nicht etwas , das zu 100% funktionieren wird Jeder Codestift hat seine eigenen Macken. Sie verwenden unterschiedliche Abhängigkeiten. Sie verwenden unterschiedliche Eigenschaften , die möglicherweise überall unterstützt werden. Und jedes LLM und KI werden es auch ein bisschen anders verarbeiten Und manchmal wird derselbe LLM und dieselbe KI am Dienstag das tun, und am Mittwoch wird sie entscheiden, dir eine völlig andere Lösung zu bieten , oder Es ist nicht zu 100% garantiert , dass jede Lösung gleich ist Aber es lohnt sich immer noch, es zu versuchen, lohnt sich, damit zu experimentieren, besonders heute KI macht es so viel einfacher, Ihre Fähigkeiten zu erweitern und Ihre Webdesign- und Webflow-Fähigkeiten zu erweitern Ihre Webdesign- und Webflow-Fähigkeiten Dies ist auch eine übertragbare Fähigkeit. Es spielt keine Rolle, ob Sie dies in Webflow oder einem anderen Webdesign-Tool tun oder ob Sie es von Hand codieren, das heißt, dass dies nichts mit Weblog zu tun hat Der Code, den wir hier bekommen, ist HTML - und CSS-Code, den jeder einzelne Builder, jeder einzelne KI-Builder oder Nicht-KI-Builder, was WordPress jeder verwendet, genau das Gleiche Also HTML und CSS überall. Es ist also eine gute Sache , für dich zu lernen. Und wenn Sie Zeit haben, würde ich Ihnen dringend empfehlen, einen sehr grundlegenden Kurs über HTML seit CSS und JavaScript zu belegen, grundlegenden Kurs über HTML seit CSS der super, super grundlegend ist, nichts Kompliziertes für Sie, um sich einfach darüber zu informieren, wie diese Dinge miteinander verbunden sind Nicht dass du jede einzelne Eigenschaft und alles verstehen müsstest , wie man es macht, sondern den Text zu verstehen, zu verstehen, wie HTML mit CSS kommuniziert und wie CSS mit HTML kommuniziert und wie JavaScript in all dem gespielt wird und wie es einer HTML-Datei gemacht im Gegensatz zu drei verschiedenen HTML-Dateien, separaten Dateien, CSS, separate Datei, JavaScript, separate Datei, so werden Websites normalerweise kompiliert und erstellt Es wäre also ein wirklich gutes Grundlagenwissen für Sie, und es wird Ihnen auf jeden Fall helfen und Ihre Fähigkeiten verbessern und Sie dazu bringen , sowohl Webflow als auch jedes andere Webdesign-Tool 181. Photoshop: So erstellst du einen Stretch-Crop: In Ordnung, Zeit für etwas Photoshop. Tutorial für die meisten Designs ist ausreichend, Figma ist ausreichend, aber in einigen Szenarien können wir auf Photoshop nicht verzichten . Das ist einer von ihnen. Wenn Sie Photoshop noch nicht haben, können Sie eine kostenlose 7-Tage-Testversion erhalten. Und wenn Sie es kaufen möchten, kostet es etwa 10 US-Dollar pro Monat. Darin enthalten sind Photoshop, Light Room und alle Adobe-Telefone sowie 20 Gigabyte Cloud-Speicherplatz. Sie können die Testversion von Adobe.com-Slash-Downloads oder einfach Google Photoshop-Download herunterladen falls Sie Ihre siebentägige Photoshop-Testversion in der Vergangenheit bereits aufgebraucht haben Ihre siebentägige Photoshop-Testversion in der Vergangenheit Dann können Sie stattdessen Affinity Photo ausprobieren Es ist eine sehr gute Alternative zu Photoshop und der Großteil der Benutzeroberfläche, und wie alles funktioniert, ist Photoshop ziemlich ähnlich Ich habe die Link-Ressourcen beigefügt, es gibt eine zehntägige kostenlose Testversion, obwohl ich nicht zeigen werde wie man das in Affinity macht, aber da es zwei sehr ähnliche gibt, werden Sie wahrscheinlich herausfinden wie Sie es auch in Affinity zum Laufen bringen Okay, zurück zu Photoshop. Nachdem Sie den Installationsvorgang abgeschlossen haben, ist dies Ihr Startbildschirm. Klicken Sie auf Öffnen und wählen Sie die Fotodatei aus. Ich habe dieses Bild in die Ressourcen dieser Lektion aufgenommen, sodass Sie an demselben Foto arbeiten können, wenn Sie schnell ein lebensrettendes Band in Photoshop benötigen Als ich anfing, Photoshop zu verwenden, gingen mir einige Werkzeuge und Optionen verloren Oft schaute ich mir YouTube-Tutorial an, um etwas zu lernen, aber dann konnte ich kein Tool finden, das sie im Video verwendeten. Photoshop hat viele Tastenkombinationen und kleine Optionen, mit denen Sie ganz einfach einen Tab schließen oder ein Werkzeug entfernen können und so weiter. Am Ende hätte ich eine Werkzeugkiste, kein Ebenen-Panel und keine Ahnung , wie man sie zurücksetzt. Ich wäre also nicht mehr in der Lage, einem Tutorial zu folgen , weil das Tool nicht da Albtraum für jeden Anfänger, wenn Sie versuchen, sich mit dieser neuen Software vertraut zu machen und Ein Albtraum für jeden Anfänger, wenn Sie versuchen, sich mit dieser neuen Software vertraut zu machen und viele Dinge gleichzeitig zu lernen. Ich würde viel Zeit damit verlieren, Ich würde viel Zeit damit verlieren herauszufinden, wie man sie zurücksetzt Hier ist der Trick, wie Sie alles wieder normal machen können Falls Sie etwas vermasseln, gehen Sie zu diesem Symbol hier und wählen Sie Essentials. Wenn Sie das bereits ausgewählt haben, klicken Sie auf Essentials zurücksetzen. Dadurch wird der Arbeitsbereich auf den Standard zurückgesetzt , so wie er bei der ersten Installation sofort einsatzbereit war . Dies wird zwei zusätzliche Tabs beinhalten. Dies ist ein Leitfaden für Photoshops mit einigen wichtigen Dingen Ich empfehle, es später durchzugehen wenn Sie zum ersten Mal mit Photoshop arbeiten Okay, ich brauche diese beiden Tabs hier nicht, also werde ich sie schließen. Wenn mit dieser Methode immer noch nicht alles wieder normal ist, bedeutet das, dass Sie etwas in den Einstellungen geändert haben . Gehen Sie in diesem Fall zu Einstellungen in Windows, Menü Bearbeiten befindet, und wählen Sie Allgemein. Und klicken Sie unter Beenden auf Einstellungen zurücksetzen , Photoshop neu starten, und alles wird wieder normal sein. Denken Sie an alle Einstellungen, die Sie in der Vergangenheit absichtlich geändert haben und die übernommen werden. In Ordnung, zurück zu unserem Foto. Oft finden Sie das richtige Bild Ihres Projekts, aber es hat nicht die richtige Größe. Dieses Bild eignet sich zum Beispiel hervorragend als Hintergrundfoto. Es ist sauber, es ist einfach. Es hat einen großartigen Farbkontrast, aber es gibt ein Problem. Die Trennung zwischen Strand und Wasser verläuft genau in der Mitte des Bildes. Keine Seite ist breit genug, um unsere Inhalte zu hosten, aber wenn wir eine der Seiten etwas weiter dehnen könnten, hätten wir eine perfekte Anordnung. Zum Glück können wir das in Photoshop machen. Im Ebenenfenster sehen Sie dieses Schloss auf der Ebene. Das bedeutet, dass die Ebene teilweise gesperrt ist und in vielerlei Hinsicht nicht wie erwartet bearbeitet werden kann Klicken Sie einfach auf dieses Schloss , um die Ebene zu entsperren. Wählen Sie nun dieses Zuschneidewerkzeug aus. Sie werden diese Griffe rund um das Bild haben. Ziehen Sie die Seite, auf der Sie den Streckzuschnitt erstellen möchten. Das erweitert nur die Grenzen unserer Zeichenfläche. Klicken Sie auf das Häkchen Sobald Sie fertig sind, wird die Änderung übernommen. Wählen Sie nun dieses rechteckige Auswahlwerkzeug falls Sie hier etwas anderes sehen, klicken Sie mit der rechten Maustaste darauf Dadurch werden alle anderen Tools geöffnet , die Teil dieser Gruppe sind Ziehen Sie nun den Teil , den Sie dehnen möchten, und wählen Sie ihn aus. Achten Sie darauf , Teile auszuwählen , die keine Details aufweisen, also Bereiche, die bereits verschwommen oder einheitlich Bei Personen oder Objekten ist das nicht möglich. Dies ist nur bei Hintergründen und verschwommenen Bereichen usw. möglich und verschwommenen Bereichen usw. Ich wähle Extra auf der linken Seite um sicherzugehen, dass die gesamte Kante ausgewählt ist Sobald es ausgewählt ist, gehe zu Bearbeiten und transformiere es kostenlos. Sie können auch die Strg- oder Befehlstaste drücken, so wie es hier gezeigt wird. Ziehen Sie jetzt einfach den linken Griff und dehnen Sie das Bild so weit, wie Sie es für richtig halten. Klicken Sie dann erneut auf das Häkchen. Dadurch wird die Änderung, die Sie an der Auswahl vornehmen, übernommen Wenn Sie hier zusätzlichen Speicherplatz haben, wählen Sie Kroptolgain aus und Jetzt haben wir ein Bild mit ausreichend Speicherplatz, sodass wir unseren Inhalt zum Speichern dieses Bildes einfügen können Klicken Sie einfach auf Datei, Speichern unter und wählen Sie J. Das ist alles. 182. Photoshop: Tutorial schneiden: Zählen Sie ein Objekt aus seinem Hintergrund ist am besten nach unten in Fotoshow oder Affinität Foto. eine andere ähnliche Software, die für die Foto-Manipulation ist? Fangen wir an. Der wichtigste Teil eines erfolgreichen Ausschneidens eines Themas ist die Auswahl des richtigen Fotos für Dinge, auf die wir achten müssen. Sind der Hintergrund und die Position außerhalb des Themas? Idealerweise wollen wir einen Hintergrund, dass es schlicht ist und wirklich gut mit dem Thema kontrastiert. Ausschneiden von Themen aus schwierigen Hintergründen kann mühsame Arbeit sein, und das letzte, was Sie wollen, ist, einen halben Knauer zu verbringen, um ein Modell Notlage in Ihre Wünsche auszuschneiden und zu erkennen, dass das Modell nicht gut passt. Gutes Design ist in der Regel ein Ergebnis aus vielen Richtungen. Stellen Sie sich vor, zwischen drei ausgeschnittenen Themen zu iterieren, senden Sie die endgültige Version an Ihren Kunden zur Überprüfung und klettern dann zurück, sagen, dass das Modell nicht wirklich ihre Zielgruppe ist, und sie wollen jemanden ein wenig älter und Kleid ein wenig schicker. Das wird dich verrückt machen. Wenn das Ausschneiden des Themas keine schnelle und unkomplizierte Aufgabe ist. Das zweite wichtige in der Tat ist in der Tatdie Position vom Thema auf dem Foto, ein Modell ausschneidet, das Stimmung sitzt und viel Sinn macht. Wir müssten die gleiche Position nachbilden, die Sie entworfen haben, also müssten wir, wissen Sie, dass das Modell sich auf etwas setzt, das in unseren Designs sehr ähnlich groß und geformt ist , und dass ist zu viel. Benötigen Sie weniger Arbeit. Stehende, nach vorne gerichtete Positionen sind die besten für Ausschnitte und alle Kamerawinkel wie diese verlangen nur nach einer Menge Ärger während des Entwurfsprozesses. Weil die Kamera ihr von seitlich von oben dünn zugewandt ist. Der Raum, in den du sie setzen wirst, muss das auch widerspiegeln . Es ist machbar, aber Sie stoßen in Hindernisse und Einschränkungen für Ihre Designs. Dieses Foto, obwohl es in einem einfachen Hintergrund immer noch eine schlechte Wahl ist, ignoriert den Teil, wenn sie ist, wissen Sie, weg von der Kamera, weil sie trägt ein weißes Oberteil und vor einem weißen Hintergrund Fotoshop wird es schwer haben, die Kanten zwischen dem Hintergrund und dem Pullover auf Splash zu erkennen , ist in der Regel nicht der großartige Ort, um solche Fotos zu finden. Die meisten Fotos hier werden in realen Szenarien außerhalb des Studios aufgenommen, was keine schlechte Sache ist. Es bietet eine gute Auswahl an Stockfotos, die nicht wie Lager aussehen. Aber für isolierte Bilder, der beste Ort sind bezahlte Aktienseiten, Zum Beispiel, Big Stock dot com. Wenn Sie ein Schlüsselwort hinzufügen, isoliert Schlepptau, was Sie suchen, wird es Ihnen vor allem Studioaufnahmen auf einfachen Hintergründen geben. Diese Fotos funktionieren am besten zum Ausschneiden der Fotoshow Prozess wird super einfach sein , und der Kamerawinkel und die Position des Motivs wird hervorragend für Ihre Arbeit sein. Dies ist ein weiterer bezahlter Stock Seite Fotos Punkt Symbol ST dot com. Sie bieten eine Auswahl von Fotos, vor allem auf schlichten Hintergründen. Es ist kostenlos für den persönlichen Gebrauch, also werde ich ein Foto von hier auswählen. Dies ist eine ausgezeichnete Fotoarbeit mit für vollständige Motivausschnitte. Der Hintergrund spielt in einfarbig, und es gibt eine klare Trennung zwischen dem Motiv und dem Hintergrund. Es ist eine einfache Arbeit. Sie können dieses genaue Foto auswählen, um mitzuverfolgen oder etwas anderes auswählen. Ich werde das Bild und die Ressourcen verknüpfen. Ich werde keine Hintergrundentfernung auf schwierigen Fotos demonstrieren. Ich will nicht einmal, dass du lernst, wie man mit schwierigen Hintergründen arbeitet. Auf diese Weise stellen wir sicher, dass Sie sich in die Gewohnheit geraten, nach den richtigen Fotos zu suchen. Wenn es darum geht, das Motiv für schwierige Fotos zu isolieren, mache ich etwas anderes. Ich schneide nur einen kleinen Teil des Bildes aus. Ich werde das später demonstrieren. Okay, also lass uns unser Bild öffnen. Entsperren Sie die Ebene, indem Sie auf dieses Schlosssymbol in der Werkzeugbox auf den linken Schuhen klicken. Schnelle Auswahl Zehe, die über ein Werkzeug schwebt, wird Ihnen sagen, was für ein Tag das ist. Die Tour wird verwendet, um das Modell auszuwählen und sie aus dem Hintergrund zu isolieren. Wählen Sie nun die Pinseloptionen durch die Größe, die nicht zu groß oder nicht zu klein ist, so können wir leicht Tomate auswählen und die Härte auf 100% einstellen. Beginnen Sie nun mit der Auswahl des Modells aus der Mitte und decken Sie langsam ihre gesamte Form ab. Stellen Sie sicher, dass diese animierten Linien sind um ihre Kanten und nichts anderes, um genauer zu wählen , Zoomen sehr eng durch Einklemmen Ihrer Berührung Fett oder halten Sie auf oder Wahltaste, während Sie Ihr Mausrad. Um eine bessere Kontrolle über Ihre Auswahl zu erhalten, erhöhen oder verringern Sie die Pinselgröße. Es gibt eine Verknüpfung dazu, sodass Sie nicht ständig zum Pinseleinstellungsfenster wechseln . Klicken Sie einfach auf eckige Klammern. Schlüssel links. Man verkleinert die Pinselgröße und die rechte vergrößert sie. Wenn Sie Lust auf etwas Extra haben, halten Sie die Wahltaste gedrückt und Sie werden sehen, dass Ihr Auswahlwerkzeug jetzt ein Minus hat. Wenn Sie loslassen, geht es zurück zu plus so plus fügt zur Auswahl hinzu und minus subtrahiert. Halten Sie heraus und fangen Sie an, Bereiche zu entfernen, die Sie über wählen Sie es, wenn Sie einen Fehler machen und Sie wieder unter Auktion gehen und Foto-Shop tatsächlich funktioniert ein wenig seltsam. Ich erinnere mich, dass es für mich am Anfang sehr ärgerlich war. Es ist immer noch, weil es nicht so funktioniert, wie Sie es erwarten würden. Also die regelmäßige Steuerung Z oder Befehle ein junger Mac geht hin und her auf Ihre letzte Aktion. Also, wenn Sie unter der letzten Aktion wollen, dass es funktioniert, wie Sie es erwarten würden. Aber wenn Sie erneut darauf drücken, wird es die letzte Aktion wiederholen. Also drauf eine Menge Zeit geht einfach hin und her, fuhr mich nicht zum ersten Mal, dass ich im Fotoshop rumschelte. Die eigentliche auf Sehen Sie hier in den Bearbeitungsoptionen wird Step Back Board genannt und hat eine Verknüpfung mit einer Out-Option darin. Dies ist Ihre übliche unter und verhält sich so, wie Sie erwarten würden, dass es sich in Windows verhält, was wahrscheinlich kontrolliert werden sollte. Ich werde sehen, aber nur für den Fall, doppelte Prüfungen und gehen Sie einfach in die Bearbeitung und gehen Sie dann zurück und sehen Sie, was die Verknüpfung daneben ist. Überprüfen Sie Ihre Adresse und stellen Sie sicher, dass Sie keine Plätze verpasst haben. Mach dir keine Sorgen um das lose Haar. Wählen Sie einfach die Hauptlinie und dann werden wir die Haare später beheben, nachdem Sie fertig sind, klicken Sie, Auswählen und Maske rechts hier. Dies ist tatsächlich auf den neueren Photoshopped Releases verfügbar. Wenn Ihre Version dies nicht hat, dann suchen Sie nach verfeinern ach! Es funktioniert fast auf die gleiche Weise, aber diese neue Select and Mask Zukunft ist hier überlegen. Wir werden unsere Auswahl aufräumen, damit wir das perfekte Ergebnis erzielen können. Hier ist ein weiterer wichtiger Photoshopped Tipp. Stellen Sie sicher, dass Sie eine korrekte Ebene ausgewählt haben. Dies ist die Schichten Panel, genau wie Fig MMA. Wenn Sie mehr als einen Layer haben. Stellen Sie sicher, dass Sie den mit dem Foto darauf zitieren. Okay, hier drin standardmäßig ist standardmäßig die Transparenz verringert. Es ist eine Transparenz von unserem Hintergrund und alles, was wir nicht gewählt haben, gleitend. Dies hat keinen Einfluss darauf, wie unser Ausschnitt aussehen wird, als wäre es ein Leitfaden für uns. 0% zeigt das Originalbild und volle und 100% Höhen. Alles, was wir nicht ausgewählt haben. Es ist hilfreich, mit Herrn alle Details zu erhalten. Erhöhen wir es auf 100%. Wie Sie sehen können, gibt es einige Unvollkommenheiten an ihren Haaren. Der rosa Hintergrund geht durch ihre Haare. Lassen Sie uns sie von hier auf einen weißen Hintergrund setzen, um besser zu sehen, dass Essen Haus ihre Passage zu 100% ändern . Hier ist gut, dieses Mal sagt es Rapazität statt Transparenz, weil der weiße Hintergrund oben auf dem ursprünglichen Hintergrund ist , also 100% Deckkraft bedeutet, dass es 100% sichtbar ist. Mach dir deswegen keine Sorgen. Das Haar muss etwas fixiert werden. Auch wenn wir auf ihre Haut hineinzoomen, sind die Kanten gezackt und unnatürlich. Es gibt keinen guten Standard in jedem Design zu verwenden. Gutes Design sieht perfekt aus, wenn es um kleine Details wie diese wissen alle Verfärbungen kommt , und die Katze aus sollte glatt und natürlich aussehen, wie das ist genau der Hintergrund, auf dem sie genommen wurde. Die Hässlichkeit der meisten Ausschnitte kommt von den Rändern heraus, wenn ein einfach nicht gut verfeinert ist. Es ist auffällig, es sieht so aus, als hätte jemand tatsächlich ein wirklich Papiermagazin genommen und dann mit einer Schere ausgeschnitten. Das Modell aus ihrem glücklicherweise Fotoshop ist absolut unglaublich. Und das Fixieren, um die Kanten zu fixieren, sind ausgeschnitten. Wir müssen ein Verfeinerungs- und Pinselwerkzeug von hier aus auswählen. Es ist die 2. 1 Halten Sie Ihren Mund für eine Sekunde darüber, und es wird Ihnen sagen, welche es ISS, weil diese drei sieht ziemlich ähnlich, genau wie wir es mit der anderen Pinselgröße, dem Pinsel aus dem Optionsfeld oder mit quadratischen Klammern und langsam beginnen Bürsten über die Ränder von ihrem Haar. Und sieh dir das an. Was hier tatsächlich passiert ist, ist, dass wir Photoshopped sagen, über die Ränder unserer ursprünglichen Auswahl hinaus zu schauen und zu sehen, ob es Teile gibt, die so aussehen, als ob sie zu unserer Auswahl gehören , und gleichzeitig Pixel entfernen, die wie sie aussehen sind Teil des Hintergrunds. Deshalb ist dieser Ping verschwunden. Verwenden Sie den Deckkraft Schieberegler, überprüfen Sie andere Teile, die verpasst wurden, falls Sie ein wenig mehr entfernen, genau wie andere Werkzeugpreis auf out oder Option. Sie werden sehen, dass es ein Minuszeichen ist. Dadurch wird die ursprüngliche Kante wieder hergestellt und dann wieder gebürstet, während Sie die Taste nach außen halten . Keine Sorge, es wird nicht von der ursprünglichen Auswahl subtrahieren. Es geht im Grunde darum, das aufzuheben, was wir gerade hinzugefügt haben. Ihr Haar sieht anständig aus, aber es gibt immer noch einen rosa Kragen, der an ihren Rändern fällt. Lassen Sie uns jetzt den Rest ihrer Ränder überprüfen. Wir können natürlich natürlich mit diesem Verfeinerungswerkzeug an ihrem ganzen Körper herumlaufen. Aber es gibt einen schnelleren Weg, dies auf Haut und Teilen zu tun, die ziemlich einfach und einheitlich sind. Im Gegensatz zu Haaren, die hier durchgemacht sind. Kantenerkennung Es ist das gleiche Konzept wie die refinanzierte Zehe. Damit können wir Photoshopped sagen, über unsere Auswahl hinaus zu schauen und zu sehen, ob wir irgendwelche Teile verpasst haben. Es ist in Pixel, so dass ein Pixel bedeutet, dass ein Pixel nach der Auswahl aussehen und fehlende Teile hinzufügen. Achten Sie darauf, wie sich die Kanten bewegen, wenn wir zwei Pixel vergrößern. Dieselbe Dissens in diesem Fall bedeutet Smart Radios, anstatt überall eine Uniform zu Pixel-Radios zu verwenden, es wird benutzerdefinierten Wert abhängig von der Kante verwendet. Es ist nützlich, wenn Sie große Werte verwenden, aber ich mag es seltsam zu beheben. Manuelles Anpassen mit dem Werkzeug „Kante verfeinern“ Manchmal werden Sie feststellen, dass Sie einige zusätzliche Patches wie diese haben, wenn Sie die Auswahl getroffen haben , oder Sie haben tatsächlich einige Flecken verpasst, die zurück gehen und die Auswahl reparieren, nachdem Sie so viel Arbeit gesetzt haben, wird herzzerreißend sein . Zum Glück können wir die Flecken direkt hier mit einer Pinselspitze hinzufügen oder entfernen. Wie üblich Pluszeichen wird in jedem Pixel C klicken Sie auf Sie fühlen, dies funktioniert ein wenig anders als die vorherigen Werkzeuge, die wir andere zwei Werkzeuge verwendet. Sie machen Berechnungen an Orten, wo Sie diese drücken, nicht basieren Sie nicht auf, was Sie drücken, und ein letzter Schritt, den wir machen müssen, ist, diese rosa Blendung aus ihren Haaren zu entfernen, die automatisch von hier aus durchgeführt werden kann . Wählen Sie Dekontaminate Halsbänder. Gib ihm einen Moment und Walla. Jetzt ist der größte Teil des Pings aus ihren Haaren weg. Was für eine erstaunliche Arbeit es getan hat. Dieser Schritt ist sehr zuletzt, denn wenn Sie die Auswahl nach jedem Klick, den Sie machen, wird dies wieder und wieder neu berechnet wird, wird die Dinge viel niedriger machen. Obwohl hier etwas Lustiges passiert ist, mal sehen, ob wir es mit verfeinern Kantenwerkzeug reparieren können. Ok, Gott, eigentlich hat sich immer noch ein kleines kniffliges Foto entschieden. im Idealfall Wählen Sieim Idealfallein Foto, das einen weißen oder grauen Hintergrund hat. Kalte Hintergründe mischen sich am Ende mit den Rändern. Alles klar, jetzt, lassen Sie uns die Ausgabe ausschneiden. Wir haben ein paar Möglichkeiten hier, die Bastarde neue Ebene mit einer Ebenenmaske zu wählen. Aber das tut es. Anstatt das Ganze auszuschneiden, wird es das Originalfoto kopieren und eine Maske darauf auftragen. Diese Masse wird den Hintergrund und alles, was wir getan haben, verbergen. Dies ist die beste Option, denn wenn wir etwas anderes bemerken und Änderungen vornehmen möchten, werden wir in der Lage sein. Mit der neuen Ebenenoption, die wir wollen, wird der Hintergrund für immer verschwunden sein. Innerhalb der Ebenen werden Sie sehen. Außerdem ist das Originalfoto immer noch in seiner Unterseite vorhanden, aber deaktiviert, so dass es nicht sichtbar ist. Es stört unsere Kopie mit der Maske. Wenden Sie es an, dass schwarz-weiß Sylar Es ist die Maske oder bekommt Der letzte Schritt ist, unsere Datei zu speichern . zuerst Lassen Sie unszuerstspeichern Dies ist eine Fotoshop-Datei für zukünftige Süchtige. Der Rest des Designs wird in Fig MMA tun. Die Photoshop-Datei kann in Sigma nicht wichtig sein, daher müssen wir PNG-Datei verwenden. PNG ist derjenige, der die Transparenz unserer Katze draußen halten wird. J pack wird nicht funktionieren, weil es den Hintergrund mit weißem Kragen füllen wird. Wenn wir dies in PNG exportieren, wird jede Ebene, die er nicht ist, nicht in den Export aufgenommen. Sie müssen diese Layer also nicht löschen. Verstecken Sie es einfach. Außerdem möchte ich den zusätzlichen Speicherplatz zuschneiden, den Zuschnitt auswählen und die Adresse ziehen, zum Dateiexport und schnellen Exportern gehen. PNG. Jetzt können wir dieses Bild in Abb ma platzieren und wählen Sie einen beliebigen Hintergrund, den wir wollen. Und das ist, wie Sie Ausschnitte im Fotoshop 183. Photoshop: Anleitungen: Jetzt werde ich zeigen, wie man Lee ausschneidet. Ein kleiner Teil eines Bildes ist immer der wichtige Teil ist die Auswahl des richtigen Bildes. Sie können dies mit jedem Foto tun, das Sie herausragen können, endet vom Objekt wie Tischecken. Hände, Beine hatten Äste. Und so jedes Objekt, das einen prominenten Tipp zuerst in diesem Prozess hat, um den Container des Bildes zu definieren . Der Rahmen, in dem es sitzt, weil du etwas aus dem Rahmen herausklebst. Wenn Sie vorhaben, das Foto als vollständiges Hintergrundfoto als Adresse aus Ihrem Rahmen zu verwenden, sind tatsächlich nicht sichtbar. Du kannst nichts rauskriegen. Ich werde an diesem Bild arbeiten. In diesem Tutorial. Ich habe das gleiche Bild verknüpft, damit Sie mitverfolgen können. diesem Jahr können wir uns leicht vom Dock abhalten. Das bedeutet, dass unser Rahmen einen oberen Rand haben muss, wenn er sich von oben nach unten vom Bildschirm erstreckt , als dieses Bild überhaupt nicht funktioniert. Aber wenn ich zum Beispiel einen Rahmen wie einen Kreis verwende , dann kann ich das Jahr problemlos auskleben. Also lasst uns zuerst das Foto einrahmen, genau wie wir Feige machen. Jetzt werden wir eine Maske erstellen. Wir werden die gleiche Anfrage verwenden, wie wir es zuvor in der Ausschnitt-Methode getan haben. Aber dieses Mal, anstatt die Dunkelheit aus dem Hintergrund zu wählen, werden wir einen Kreis Teil dieses Hundes auf dem Markt auswählen. Alles klar, klicken Sie darauf und wählen Sie die elliptische Markthalle. Das ist ein anderes Wort. Wählen Sie aus. Oh, ich weiß nicht mal, was Marquis bedeutet. Nicht durch Ziehen. Wählen Sie die Fläche vom Dock aus. Halten Sie Shift, während Sie dies tun, damit Sie einen perfekten Kreis zeichnen können, um einen besseren Griff zu erhalten. Sie können die Leertaste drücken, um die Auswahl zu verschieben. Du brauchst das jetzt nicht perfekt zu bekommen. Wir können immer die Größe ändern und das Bild vom Hund neu positionieren. Später, wie wir es letztes Mal getan haben. Klicken, wählen und maskieren Sie hier oben. Sie sind bereits mit diesem Maskeneditor vertraut, aber wir werden nicht ein Hören etwas hinzufügen. Eigentlich, weil wir eine perfekte Kreismaske brauchen. Also sofort gehen Sie zu Ausgabeoptionen und wählen Sie neue Ebene mit einer Ebenenmaske, wie wir es letztes Mal getan haben . Jetzt haben wir die gleiche Anordnung wie bei der Ausschnittsmethode. Wenn Sie das Bild im Inneren neu positionieren oder neu skalieren müssen. Wir können das ähnlich machen, wie wir es in Fig MMA tun. Wählen Sie zuerst das Verschiebungswerkzeug aus. Standardmäßig ist die Massengruppe gesperrt, sodass Sie das Bild separat verschieben können. Es bewegt eine ganze Gruppe, um nur das Bild oder nur eine Masse schnell auf diesen Link zu verschieben. Ich kann es hören, anders als das Bild aus der Maske, und jetzt können Sie sie separat verschieben, indem Sie entweder das Bild oder die Maske aus der Ebenenliste auswählen. Sie werden feststellen, dass Maske in Photoshop ein definierter Raum ist, wie er ursprünglich definiert wurde. Deshalb haben wir diese zusätzlichen Bits hier gezeigt. Wenn Sie mit diesen zusätzlichen Bits enden, nachdem Sie Ihr Bild bewegt haben, können Sie dies einfach mit einem Crop Toe beschneiden. Übrigens, Photoshopped hat diese sehr händige Zehe namens History Panel. Anstatt auf und weiter rückgängig zu machen, können Sie direkt zu den Mitarbeitern gehen, die Sie unterziehen möchten. Ich liebe dieses Verlaufswerkzeug, und Photoshopped macht das Rückgängigmachen viel einfacher. Okay, also ist es einfach, das Bild im Inneren neu zu positionieren. Verfolgen Sie einfach Schäden herum, sondern um das Bild so wie die Bild-Ebene neu zu skalieren und dann gehen Sie zu adit und frei zu transformieren. Jetzt können Sie die Griffe greifen und die Größe ändern, wie Sie möchten. Halt, Shift, Zehensperre das Verhältnis hier in meinem Kopf. Ich stelle mir vor, welchen Teil ich herausstechen werde, damit ich das Bild richtig positionieren kann. Nun, da wir unseren Mainframe vorbereitet haben, in dem unser Bild sitzt, können wir nun dieses Jahr drauskleben. Um dies zu tun, werden wir im Grunde ein Stück von den Hunden hier als separate Schicht ausschneiden und es oben auf diese bestehende Schicht legen . Klicken Sie also mit der rechten Maustaste auf diese Massengruppe und duplizieren Sie die Ebene. Jetzt rechts, klicken Sie auf die Maske selbst. Nicht die gesamte Ebene, sondern nur eine Maske und klicken Sie auf Ebenenmaske erweitern. Jetzt haben wir das vollständige Bild drauf. Wenn wir ein Stück aus dem Jahr von diesem vollen Bild ausschneiden und den Rest entfernen, werden wir den genauen Stick Out Effekt bekommen würde. Um dies zu tun, wir die übliche Ausschnittsmethode, genau wie wir es in der vorherigen Lektion getan haben. Schnappen Sie sich ein Schnellauswahlwerkzeug. Stellen Sie den richtigen Pinsel aus den Optionen von hier aus ein, stellen Sie sicher, dass Sie den Pinsel mit dem Pluszeichen und nicht mit dem Minus ausgewählt haben . Stellen Sie die Härte auf 100% ein und stellen Sie die rechte Seite ein, damit Sie das Jahr einfach auswählen können. Sie werden es nach unten übergeben, um die Kante des Rahmens zu sehen und entsprechend auszuwählen. Sie können mehr aus dem Bild auf der Unterseite auswählen, weil es uns nicht schaden wird. Es wird einfach auf dem vorhandenen Foto sitzen. Jedenfalls. Das sieht gut aus. Klicken Sie nun auf, wählen Sie und maskieren. Wir sehen beide Ebenen. Hier sind Frame-Layer, und nur ein Jahr später, lassen Sie uns die Hintergrundspitze weiß für jetzt ändern, damit wir den Rand des Jahres verfeinern können. Denken Sie daran, wie Sie Abzeichen verfeinern, Wählen Sie die Kante verfeinern, und gehen Sie über die Adresse. Oder es fügt hinzu, in jedem fehlenden Haar oder anderen fehlenden Pixeln. Wie ich bereits in dieser Geschichte erwähnt habe, sagen wir Photoshopped, über unsere Auswahl hinauszuschauen und fehlende Pixel zu erkennen. Du musst die Basis nicht verfeinern. Es wird perfekt mit dem Hintergrundbild verschmelzen, Jetzt gehen Sie zu den Ausgabeeinstellungen und wählen Sie neue Ebene mit einer Ebenenmaske und drücken Sie OK, dort. Das ist unser Jahr, das draussteht. Lassen Sie uns einen weißen Hintergrund darauf setzen, damit wir die Ergebnisse besser sehen können. Erstellen Sie eine neue Ebene, und klicken Sie auf das neue Gefühl. Ich kann hören, wählen Sie einfarbig und wählen Sie weiß. Ziehen Sie nun die Ebene unter alles. Wenn Sie einen anderen Kragen in Ihren eigentlichen Designs verwenden möchten, können Sie schnell auf dem Feld verdoppeln und den Anrufer ändern, damit Sie dies direkt hier in einer Fotoshow visualisieren können , bevor Sie das Endergebnis exportieren. Zum Beispiel, wenn ich das auf eine dunkle Farbe setze, können wir feststellen, dass es etwas mehr Blendung hinter dem Ohr gibt. Schade, dass ich diese nicht überprüft habe, um die Auswahl zu verfeinern, aber wir können immer noch etwas daran arbeiten. Auch nachdem die Maske aufgetragen wurde, ist die Maske immer noch pflanzliche bearbeiten. Wenn wir das Maskenversteck vergrößern, sehen Sie, dass wir schwarze und weiße Teile haben. Die weißen Teile sind sichtbarer Teil der Maske, und schwarze Teile sind verdeckter Teil. Deshalb hat der weiße Teil eine Form aus der Luft. Wenn wir breit auf diese Masse malen, werden wir mehr vom Bild zeigen. Lassen Sie mich zeigen, ob ich ein normales Pinselwerkzeug auswähle und mit weißer Farbe darauf zeichne. Es wird mehr von dem Bild zeigen, und wenn ich mit einer schwarzen Farbe darauf fuhr, wird es verbergen, was bereits sichtbar ist, um zwischen weißem und schwarzem Pinsel zu wechseln. Klicken Sie auf dieses Pfeilsymbol oben auf diesen schwarzen und weißen Kästen. Was auch immer oben ist, ist die aktuelle Farbe des Pinsels. Es gibt auch eine Abkürzung. Sie können X auf Ihrer Tastatur drücken, und dann wechseln wir zwischen den beiden. Okay, jetzt können wir die zusätzliche Blendung hinter dem Ohr entfernen. Ich werde den Pinsel anpassen, um ihn glatt und gefiedert zu machen, so dass ich keine harten Kanten erstellen. In diesem Fall werde ich die Härte vollständig verringern und sogar ihren Durchgang auf 50% verringern. Auf diese Weise werde ich die Teile glatt und kontrolliert überbürsten, und das ist ein besseres Ergebnis. Es ist vielleicht nicht ideal auf einem schwarzen Hintergrund, aber funktioniert ziemlich gut schnell, um dies während der Maskierung Gesicht zu verfeinern. Und vergessen Sie nicht, die Ansicht auf dem schwarzen Hintergrund zu überprüfen. Wenn Sie planen, es auf dunklen Hintergründen zu verwenden, ist der letzte Schritt, um Schäden zu exportieren, die wir in PNG mit dem transparenten Hintergrund exportieren werden, wo Sie mehr Freiheit haben, Hintergründe direkt in Fig mongering tatsächlichen Design-Prozess. Blenden Sie den Hintergrund aus, beschneiden Sie zusätzlichen Platz aus und klicken Sie unter Dateiexport auf Schnellexporter PNG. Und da hast du es. Dies kann jetzt in Sigma wichtig sein und auf verschiedenen Hintergründen verwendet werden.