Entwirf, erstelle und veröffentliche dein Portfolio mit Figma und Framer

1. 1: Wenn Sie Designer sind oder im kreativen Bereich arbeiten , benötigen Sie ein Portfolio. Es gibt keine Ausreden, ja, Sie können in sozialen Medien veröffentlichen, aber Ihre Arbeit auf Ihrer eigenen Domain, auf einer Website, die Sie entworfen und erstellt haben, zu haben, wird immer professioneller sein Aber wie erstellt man eine Website, die viel Arbeit und Zeit erfordert. Ich kann keinen Code lesen. Es ist super teuer. Und welche Plattform sollte ich verwenden? Keine Sorge, wir machen das zusammen in diesem Kurs. Sie werden Ihr eigenes Portfolio erstellen sodass Sie es mit jedem teilen können, auch mit Unternehmen, Kunden oder Familie und Freunden, wenn Sie möchten. Und Sie müssen keine einzige Codezeile schreiben . Hallo, ich heiße No Keto. Ich bin ein erfahrener brillanter Designer mit Sitz in Barcelona. Um Kunden und Projekte zu finden, muss ich mein Portfolio so oft durchgehen Ich weiß, dass es eine entmutigende Erfahrung sein kann, aber das muss es nicht sein, vor allem, wenn Sie die richtigen Tools verwenden Und das werden wir hier tun. Wir werden Figma und Framer verwenden, um unsere eigene Website zu erstellen Wir werden unser Design auf Figma durchgehen. Und mach dir keine Sorgen, wenn du kein Design hast. Ich habe speziell für diesen Kurs eines vorbereitet , mit dem Sie weitermachen können, und dann bringen wir unsere Designs in Framer Framer ist ein Tool, mit dem wir eine voll funktionsfähige Website erstellen können, ohne eine einzige Codezeile schreiben zu müssen eine einzige Codezeile schreiben Am wichtigsten für diesen Kurs ist, Framer völlig kostenlos ist Sobald wir unsere Designs auf Framer haben, werden wir die Interaktionen so aufbauen , dass wir unsere Seiten verlinken können, Content-Management-Systeme erstellen, damit wir unsere Inhalte dynamisch verwalten können, Animationen und Übergänge hinzufügen und sicherstellen, dass unsere Website auf allen Geräten gut aussieht Und schließlich veröffentlichen Sie unsere Website auf unserer eigenen Domain. Das Endergebnis ist eine Website, die Sie mit jedem teilen und sich auf die Suche nach dem Traumjob machen können. Aber nicht nur das, wenn Sie an diesem Kurs teilnehmen, erwerben Sie die notwendigen Fähigkeiten, um nicht nur diese, sondern jede andere Website zu erstellen . Lass uns anfangen. 2. Kursprojekt: Das Projekt für diesen Kurs ist ziemlich selbsterklärend. Sie werden mit Framer Ihr eigenes Portfolio erstellen. Sie haben die Flexibilität, diesem Kurs zu folgen , indem Sie Ihre eigenen Designs verwenden, die Sie in Figma erstellen , oder die Designs verwenden , die ich auf der Registerkarte Ressourcen bereitstelle . Sie haben die Wahl. Sie können an diesem Kurs teilnehmen unabhängig davon, wofür Sie sich entscheiden, und dies sind die Schritte , denen wir folgen werden. Zunächst werden wir unsere Figma-Dateien vorbereiten. Wenn Sie Ihr eigenes Design verwenden möchten, gebe ich Ihnen wertvolle Tipps zur Benennung von Ebenen und zur Organisation Ihres Designs für einen reibungslosen Übergang Der zweite Schritt besteht darin, Framer zu erkunden, um sich mit der Plattform vertraut zu machen, damit Sie das volle Potenzial kennen , das sie bietet Der dritte Schritt besteht darin, den Stecker zwischen Figma und Framer zu installieren Wir werden lernen, wie man es installiert und benutzt. Der erste Schritt besteht darin, Ihre Designs von Figma in Framer Dies ist der magische Moment, in dem Sie mit nur einem Kopieren und Einfügen all Ihre Designs in Wir passen alles an und ändern es so, dass es genau so aussieht, wie Sie bevor wir Animationen und Übergänge oder andere Feinheiten hatten Übergänge oder andere Feinheiten Die endgültige Ausgabe dieses Kurses wird eine La-URL sein, die Sie mit jedem teilen können Und am wichtigsten ist, dass Sie sie mit dem Rest der Klasse teilen können. Wenn Sie möchten, können Sie auch gerne Ihr Figma-Design teilen , damit wir Ihren gesamten Designprozess sehen können Beginnen wir diesen Kurs mit einem Blick auf Framer. 3. Einführung in Framer: Wir haben viel über Framer gesprochen. Aber was ist Framer? Framer ist ein kostenloser Website-Builder ohne Code. Das bedeutet, dass Sie echte Websites mit Designs erstellen können , die Sie in wenigen Stunden oder sogar Minuten erstellt haben wenigen Stunden oder sogar Minuten Sie müssen nicht programmieren, Sie müssen nur Ihre Designs nehmen, dort ablegen, veröffentlichen und schon haben Sie eine Live-Website, mit der Sie beginnen können, natürlich ohne vorheriges Design. Und erledigen Sie die Arbeit direkt auf Framer, da es unzählige Komponenten und Vorlagen enthält , mit denen Sie beginnen können Selbst bei einem sehr einfachen Design können Sie Animationen und Übergänge hinzufügen und, wenn Sie das Gefühl haben noch ein bisschen mehr Code hinzufügen, um es komplexer zu machen Nun, nichts davon ist notwendig, um eine einfache Website zu erstellen. Wie gesagt, Sie haben auch viele Vorlagen, mit denen Sie beginnen können. Es gibt einige, die kostenlos sind, andere, die kostenpflichtig sind, aber sie sind alle großartige Ausgangspunkte für Ihre Projekte. Es gibt auch viele Dokumentationen, Videos, Tutorials und sogar einen vollständigen Kurs , mit dem Sie mit der Plattform beginnen Wir werden keine Zeit haben, diese in diesem Kurs zu behandeln , aber falls Sie interessiert sind, werde ich im Folgenden einige Ressourcen hinterlassen , damit Sie sie sich ansehen können Und zögern Sie auch nicht, Fragen dazu zu stellen. Aber schauen wir uns den eigentlichen Editor an. Wenn Sie Framer zum ersten Mal öffnen, müssen Sie sich anmelden, bevor Sie ihn verwenden können Ich schlage wirklich vor, dass Sie es mit Google verwenden, damit Sie sich nicht an Ihr Logging, Ihr Passwort usw. erinnern müssen können jedoch gerne mit Ihrer E-Mail fortfahren wenn Sie sie von Ihrem Google-Konto trennen möchten Wenn wir jetzt auf Start klicken, wird uns unsere Projektseite oder unser Dashboard angezeigt. Wenn Sie hier zum ersten Mal landen, ist es vielleicht leer oder es sieht aus wie ein Demo-Projekt. Aber hier oben gibt es vier Möglichkeiten, um loszulegen. Sie können mit einem interaktiven Tutorial beginnen. Sie können mit einer Vorlage beginnen. Sie können mit dem Einfügen von Figma beginnen oder sich ein Tutorial ansehen, um Ihre Fähigkeiten zu verbessern Auf der linken Seite findest du dein Team. In meinem Fall habe ich also einen Spielplatz, dem ich Designs testen kann. Ich habe mein Portfolio-Team, in dem ich verschiedene Optionen für mein Portfolio habe. Und dann habe ich zwei Projekte , an denen ich mit anderen Leuten arbeite. Aber lass uns ein neues Projekt erstellen, damit ich dir den eigentlichen Editor zeigen kann. Wenn Sie nun mit Figma oder anderen Editoren vertraut sind, wird sich das sehr danach anfühlen Oben haben wir verschiedene Optionen, um loszulegen. Wir können damit beginnen, eine vollständig überarbeitete Seite, nur einen Abschnitt, einige Navigationsoptionen oder einige Menüs sowie einige CMS-Sammlungen und andere Elemente einzufügen , sowie einige CMS-Sammlungen die für unsere Seite interessant sein könnten, wie Links zu sozialen Medien oder Wir können auch mit einem Layout wie einem Rahmen, verschiedenen Zeilen, Spalten oder Rastern beginnen , die Wir können einfachen Text hinzufügen. Die Option, mit CMS zu beginnen, aber keine Sorge, wir werden eine Lektion haben, die sich nur darauf konzentriert, eine Sammlung auf Framer hinzuzufügen Und dann haben wir verschiedene Aktionen, was wie ein Schnellmenü ist , um bestimmte Aktionen auszuführen Jedes Projekt wird natürlich unterschiedliche Seiten haben. Zum Beispiel haben wir eine Startseite, aber wir können eine Info-Seite hinzufügen, oder wir können so viele Seiten hinzufügen, wie wir möchten, sie dann wie eine echte Website miteinander verknüpfen. Wenn wir unserer Seite etwas hinzufügen, wird dies im Ebenenmenü angezeigt. Da es mit Figma oder anderen Tools funktioniert, können wir jedes einzelne Element auswählen Für jedes von ihnen haben wir unterschiedliche Eigenschaften wie die Position, die Größeneffekte, also die Animationen und Übergänge , die wir dem Element hinzufügen können Aber machen Sie sich auch hier keine Sorgen, wir werden uns in einer anderen Lektion darauf konzentrieren. Da es sich um ein Textelement handelt, haben wir so viele Textilien , die wir modifizieren können. Hier oben haben wir die verschiedenen Seiteneinstellungen. Wir haben unser Profil, wir haben die Lokalisierungseinstellung, sodass Sie die Standardsprachoptionen festlegen können um sie in eine andere Sprache zu ändern. Wir haben auch die Seiteneinstellungen und die Seiteneinstellungen. Wir haben einige SEO-Eigenschaften , die wir hier definieren können. Wir haben die verschiedenen Domains. Wir haben eine Weiterleitung, sodass wir von einer anderen Seite weiterleiten können. Wir haben Staging und Version, was sehr nützlich ist, wenn Sie zu einer früheren Version zurückkehren möchten , die auf Framer gespeichert ist Wir haben einige Analysen, die bei der Veröffentlichung unserer Website sehr nützlich sind , und wir haben verschiedene Pläne für ein Upgrade Wir haben auch die SEO-Einstellungen für jede einzelne Seite auf unserer Seite. Jetzt werden wir das viel detaillierter durchgehen , wenn wir bereit sind, unsere Website zu veröffentlichen. Machen Sie sich keine Sorgen, wenn Sie nicht verstehen, was das alles bewirkt. Schließlich haben wir hier die Möglichkeit, eine Vorschau unserer Seite anzuzeigen, um sicherzustellen, dass wir damit zufrieden sind und sie schließlich zu veröffentlichen. Offensichtlich ist dies ein superschneller Überblick über Framer. Mach dir keine Sorgen. Im weiteren Verlauf dieses Kurses werde ich noch viel detaillierter auf einige dieser Bereiche eingehen , z. B. auf das CMS, Hinzufügen von Animationen oder das Erstellen einer responsiven Version für Mobilgeräte. Mach dir keine Sorgen, wenn sich das frisch anfühlt, wir nehmen uns Zeit. Aber lassen Sie uns vorerst die Stecker installieren, mit denen wir unser Design von Figma in Framer integrieren 4. Installation des Figma to Framer-Plugins: Es gibt so viele Möglichkeiten, das Framer-Projekt zu starten. In der vorherigen Lektion haben wir gesehen, dass Sie bereits erstellte Abschnitte per Drag-and-Drop verschieben können bereits erstellte Abschnitte per Drag-and-Drop verschieben Sie können mit einem Layout beginnen und ihm Ihre Komponenten hinzufügen. Sie können mit einer Vorlage oder mit einem Figma-Design beginnen Das werden wir tun. Dafür brauchen wir einen Stecker. Gehen wir zurück zu unserem Dashboard oder unserer Projektseite. Oben sollten wir Paste from Figma auswählen. Wenn Sie es aus irgendeinem Grund nicht sehen, gehen Sie zu Framer.com Da haben wir's. Wenn Sie auf diesen Link klicken sollten Sie auf dieselbe Seite gelangen. Es spielt keine Rolle , welche Option Sie wählen. Klicken Sie auf Get the Figma Plug In Dadurch wird die Figma-Seite für dieses Plug-In geöffnet In meinem Fall bin ich jetzt nicht eingesperrt. Ich werde es schnell machen. Wenn Sie sich im Browser noch nicht bei Figma angemeldet haben, schlage ich vor, dass Sie dies ebenfalls tun Sobald Sie bei Figma angemeldet sind, klicken Sie auf Probieren Sie es aus Dies sollte eine neue Figma-Datei mit dem Plugin-Bildschirm öffnen. Öffnen. Dieser Bildschirm gibt uns einige Informationen darüber, wie wir es verwenden, wie wir unsere Ebenen benennen wie wir sicherstellen können, dass unsere Gruppen vollständig erhalten bleiben. Und Sie haben auch einen Link zu einem Tutorial. Das ist jetzt eine leere Datei. Wenn wir auf Ausführen klicken, wird wirklich nichts passieren. Als ob es hier nichts zum Kopieren gäbe. Lassen Sie uns schnell ein Design erstellen, damit wir es testen können. Jetzt erstelle ich einen Rahmen mit 120 oder 50 Pixeln. Ich gebe ihm ein paar runde Ecken und ich gebe ihm etwas Farbe. Ich werde den Text hinzufügen. Es hat funktioniert. Ich wähle den Rahmen aus und er sollte so angeordnet sein, dass der Abstand stimmt. Jetzt, wo das erledigt ist, wähle ich den Rahmen von hier aus. Sie können ihn auch im Ebenenfenster auswählen. Gehen Sie zu unserem Figma-Menü, klicken Sie auf Plugins und dann auf Figma to HTML Und das sollte uns sagen, dass etwas kopiert wird. Nun, vielleicht wird Ihnen dieses Pop-up hier angezeigt. Sie müssen nur In die Zwischenablage kopieren auswählen. Es heißt „In Ebenen kopieren“, die auf Framer basieren. Lass uns das machen. Wir werden Framer öffnen Ich werde die Site öffnen , die wir zuvor gestartet haben. Ich gehe zur Info-Seite und drücke einfach den Befehl V. Hier ist unsere Schaltfläche. Ich werde es etwas mehr zentrieren. Das ist dasselbe, was wir auf Figma entworfen haben. Wenn Sie hier das Ebenenfenster öffnen, werden Sie sehen, dass wir einen Rahmen und etwas Text haben Und der Text ist tatsächlich editierbar. So können wir es löschen und durch etwas anderes ersetzen, wenn wir wollen Es ist nicht nur so einfach, unsere Designs von Figma in Framer zu kopieren, sondern alles ist editierbar und alles wird beibehalten, was Sie auf Figma entworfen haben Wenn das nicht funktioniert hat, wenn es dir nicht gelungen ist, das Plug-In zu installieren und das Design von Figma in den Framer zu kopieren, schlage ich vor, dass du den Vorgang noch Design von Figma in den Framer zu kopieren, schlage ich vor, dass du Sie fahren mit dem Schrägstrich Figma auf Framer.com fort . Sie den Figma-Stecker ein und stellen Sie sicher, dass Sie mit Figma verbunden sind , wenn Und stellen Sie beim Öffnen von Figma sicher, dass Figma to Tema with Framer auf dieser Liste erscheint, wenn Sie aufrufen das Plugins-Menü Wenn das bei dir immer noch nicht funktioniert und du das Plug-In nicht installieren konntest, lass es mich unten wissen und ich werde mein Bestes geben, um dir bei der Einrichtung zu helfen , damit du diesen Kurs korrekt fortsetzen kannst Wenn dies jedoch für Sie funktioniert hat und das Muster jetzt auf Framer kopiert wurde, sind Sie bereit für die nächste Lektion, in der Plattform gebracht unsere Designs von Figma auf die 5. Überprüfe die Figma-Designs: Bevor wir alles vollständig kopieren, schauen wir uns das Design an , das ich für Sie vorbereitet habe Denken Sie jetzt daran, Sie können Ihre eigenen Designs verwenden oder Sie können die Designs verwenden, von denen ich unter dem Reiter Ressourcen lebe. Diese Technik funktioniert in beide Richtungen. Hier habe ich eine sehr einfache Portfolio-Seite. Wir haben eine Homepage, sie hat oben ein Navigationsmenü mit drei Tabs. Wir haben Arbeit, wir haben ungefähr und wir haben eine Kontaktseite. Wir haben hier oben eine kleine Kopfzeile mit meinem eigenen Namen, meinem Titel, meinem Standort und meiner aktuellen Verfügbarkeit. Dann haben wir hier einige Projekte. Ich habe keinen Titel hinzugefügt, aber beachten Sie, dass jeder von ihnen das gleiche Layout haben wird. Wir haben ein paar CTAs, wir setzen uns mit Ihnen in Verbindung und dann eine Fußzeile mit Links zu sozialen Medien Ich habe auch die mobile Version entworfen, und obwohl wir diese Version nicht in Framer kopieren werden , ist sie gut, weil sie mir eine Vorstellung davon gibt, wie mein Design auf einem mobilen Gerät aussehen soll Wir haben dann dasselbe für die Projektseite. Wir haben das Projekt hier oben , wir haben ein Hauptbild, kurze Beschreibung, die Rolle Kunde, einige Daten zu diesem Projekt. Dann haben wir ein paar Bilder, Absätze und dasselbe mit einem anderen Layout. Dann derselbe CTA hier unten. Schließlich haben wir eine Info-Pit mit einer Kopfzeile mit ein paar Informationen über meine Erfahrung, wie man Kontakt aufnimmt und den gleichen CTA Dies ist ein sehr einfaches Design, aber es enthält einige Elemente, die uns das Leben erleichtern werden, wenn wir an Framer arbeiten Leben erleichtern werden, wenn wir Dinge, die wir wiederverwenden können. Dinge, die wir einmal entwerfen und einfach so oft duplizieren können , wie wir wollen. Wir werden versuchen, dies auf effiziente Weise aufzubauen. Zu beachten ist auch, dass ich versucht habe, jede Ebene und jede Gruppe zu benennen jede Ebene und jede Gruppe , damit es nach dem Kopieren in Framer viel einfacher ist zu verstehen, was kopiert wird und welchen Teil wir bearbeiten Ich schlage vor, dass Sie dasselbe tun, wenn Sie Ihre eigenen Designs verwenden dasselbe tun, wenn Sie Ihre eigenen Designs Stellen Sie sicher, dass jeder Abschnitt richtig gruppiert und jede Ebene entsprechend benannt ist. Wenn Sie dieses Design anstelle Ihres eigenen verwenden möchten, gehen Sie zu den Ressourcen, klicken Sie darauf und laden Sie es erneut von dort herunter. Wenn Sie Probleme damit haben, lassen Sie es mich wissen und ich werde mein Bestes geben, um Ihnen dabei zu helfen. 6. Die Designs in Framer kopieren: Sie sollten bereit sein. Wenn Sie bis jetzt zugesehen haben, sollten Sie ein Konto bei Framer haben Sie haben das Plug-In installiert, um unsere Figma-Designs in Framer zu integrieren, und jetzt können Sie loslegen Denken Sie daran, dass Sie Ihre eigenen Designs verwenden können, aber ich werde das Projekt, das ich in der vorherigen Lektion vorgestellt habe, für den gesamten Kurs verwenden vorherigen Lektion vorgestellt habe, für den gesamten Kurs Gehen wir, um die Dinge zu vereinfachen, kopieren wir einfach die Desktop-Version. Und wir werden mit der Homepage beginnen. Ich gehe zurück zu Framer und zu meinem Dashboard, damit ich ein neues Projekt erstellen kann Ich werde neu anfangen und mir sollte eine leere Seite angezeigt Ich gehe zurück zu Figma. Ich werde ein bisschen brutal sein. Ich werde alles auf meiner Startseite auswählen. Es ist alles unter einem Rahmen, aber ich werde die verschiedenen Bereiche meiner Startseite auswählen . Ich gehe zu den Figma-Menü-Plug-ins und drücke Figma to HTML with Beachten Sie hier unten, dass dort steht , dass meine Ebenen kopiert Ich sage in die Zwischenablage kopieren und es sagt mir, dass 51 Ebenen kopiert wurden , die ich in Framer einfügen kann Ich gehe zurück zu Framer, wähle den Desktop aus und sage einfach Befehl Sie denken vielleicht, okay, hier ist alles kopiert, aber ich kann nichts sehen Nun, die Hintergrundfarbe ist etwas anders. Ich werde sicherstellen , dass die Hintergrundfarbe , die ich auf Figma habe, dieselbe ist, die ich auf Framer habe. Da haben wir's Jetzt ist alles kopiert. Aber ich kann nicht über diesen Punkt hinaus sehen. Das liegt daran, dass dieser Desktop nicht die richtige Höhe hat. Anstatt 1.000 Feigen zu sagen, werde ich einfach sagen, dass der Inhalt passt. Und los geht's, das ist perfekt. Aber auch hier stoße ich auf ein anderes Problem. Jetzt ist die Breite, die ich auf Framer habe etwas kleiner als die Breite, die ich auf Figma Es gibt zwei Möglichkeiten, das zu lösen. Entweder ändern wir den Desktop mit Framer so, dass er dem auf Figma entspricht, oder wir ändern die verschiedenen Elemente, die sich hinter diesem Punkt befinden, sodass sie in diese neue Breite passen Du kannst tun, was du willst. In diesem Fall liegt es definitiv an dir. Aber weil ich sehe, ist es hier nur dieses Element, während der Rest korrekt funktioniert. Ich werde das einfach reparieren. Anstatt zu sagen, dass die Breite fest ist, werde ich sagen, dass die Breite gefüllt ist, die Breite den Behälter füllt dass die Breite den Behälter füllt, in dem sich dieses Element befindet. Wir können dasselbe mit diesen anderen Elementen machen. Das ist unser Design, das wir auf Figma haben, und jetzt ist es auf Framer Das Gute dabei ist, dass wir auf Figma alles mit automatischem Layout erstellt haben, was bedeutet, dass die unterschiedlichen Abstände zwischen den Elementen beibehalten unterschiedlichen Abstände zwischen den Elementen Es behält die verschiedenen Layouts bei. Und so schnell wie die Breite korrigieren. Und die Höhe eines Elements ist sehr einfach, weil es Stapel als automatisches Layout auf Figma erstellt Wenn Sie mit dem automatischen Layout auf Figma nicht vertraut sind, schlage ich vor, dass Sie sich Tutorials ansehen und sich damit vertraut machen da es eines der nützlichsten Tools , die die Plattform bietet Weil es etwas so Alltägliches ist. Framer hat zwar einen anderen Namen und heißt es Stack, bietet aber dieselben Eigenschaften wie Figma, sodass wir unser Design genau anpassen können Lassen Sie uns jetzt auch schnell unsere Info-Seite erstellen. Wir gehen zu Seiten und erstellen eine neue Seite , über die wir anrufen werden. Lass uns dasselbe tun. Wir gehen zu unserer Figma-Datei Ich gehe auf die Info-Seite. Ich wähle die verschiedenen Ebenen aus, die ich hier habe. Gehe in das Figma-Menü. Stecken Sie Figma in HTML ein und stellen Sie sicher, dass es kopiert Kopieren Sie in die Zwischenablage, gehen Sie zu Framer und drücken Sie den Befehl V. Jetzt haben wir das gleiche Problem. Wir wissen, wie man es repariert Jetzt werden wir das Hoch so einstellen, dass es zum Inhalt passt. In diesem Teil werden wir Feel sagen. Das Einzige hier ist, dass, weil diese Desktop-Version etwas schmaler ist als die, die wir auf Figma haben, gibt Framer-Version nicht so viel Platz zwischen diesen beiden Elementen Jetzt können wir es so lassen, wie es ist, oder wir können es ändern, wenn Ich sage Start, und ich werde dieses Bild etwas verkleinern. Es hat ungefähr die gleiche Höhe wie das Textelement. Da haben wir's. Wir haben unsere Info-Seite komplett kopiert. Ich habe bereits gesagt, dass wir effizient sein können , indem wir Dinge entwerfen , die auf verschiedenen Seiten gleich aussehen und gleich funktionieren, in wiederverwendbare Komponenten umgewandelt werden können. Wenn wir zu unserer Startseite zurückkehren, haben wir hier diesen Projektlink und er wird einige Male wiederholt. Jetzt ist jedes Projekt dasselbe Element mit denselben Informationen. Es wird unterschiedliche Titel haben, aber es sind dieselben Daten. Wir haben einen Titel, wir haben einen Typ und wir haben ein Jahr. Das wird dann auf eine andere Seite verlinken. Wir können dieses Element in eine Komponente verwandeln. Was ist nun eine Komponente? Es ist genau das Gleiche wie auf Figma. Komponenten sind im Grunde Elemente, die Sie in Ihrem gesamten Projekt oder in Ihrem gesamten Design wiederverwenden können . Wir helfen Ihnen dabei, konsistente Designs auf verschiedenen Seiten zu verwalten konsistente Designs auf verschiedenen Seiten Wir können weitermachen und den vollständigen Link auswählen. Stellen Sie also sicher, dass Sie den Projektlink auswählen. Wir klicken mit der rechten Maustaste und sagen Komponente erstellen. Ich nenne es Project Link. Dadurch wird eine separate Seite erstellt , auf der wir diese Master-Komponente bearbeiten können. Ich werde das alles entfernen, wenn wir es wollen, wir können das duplizieren, haben genau das Gleiche. Aber wenn wir sie jetzt alle auf einmal bearbeiten wollen, können wir einfach hier hingehen. Ich werde die Telefonseite wechseln, sage 64, ich werde 24 sagen. Wenn wir auf unsere Startseite gehen, ändert sie all ihre Instanzen. Es ist eine sehr gute Möglichkeit, effizient zu arbeiten und sicherzustellen, dass alle Elemente, die auf Ihrer Seite gleich aussehen , korrekt aktualisiert werden. Vorerst werden wir es so belassen. Wir haben die Designs für unsere Homepage und für unsere About-Seite von Figma in Framer kopiert für unsere About-Seite von Figma in Framer Sie denken vielleicht, okay, was ist mit der Projektseite Wir haben hier eine Projektseite , die wir auch kopieren sollten, oder? Okay. Wir werden es jetzt nicht kopieren, weil Sie dafür etwas über Sammlungen und CMS wissen müssen, was zufällig die nächste Lektion ist 7. Das CMS verstehen: Jetzt haben wir das Hauptgerüst unserer Site. Wir haben unsere Homepage und wir haben eine About-Seite. Und jetzt müssen wir über unsere Projekte nachdenken, aber vorher müssen wir über das CMS oder die Sammlungen sprechen . Stellen wir uns Folgendes vor. Jedes Projekt ist ein Block. Jeder Block enthält unterschiedliche Informationen, da zwei Projekte nicht denselben Titel haben werden. Vielleicht haben sie dasselbe Jahr, vielleicht haben sie denselben Kunden, aber die Felder werden dieselben sein. Sie haben einen Titel, Sie haben einen Projekttyp, Sie haben ein Jahr, Sie haben einen Kunden und vielleicht haben Sie einige Absätze und einige Bilder. Jede Seite wird grundsätzlich einen anderen Inhalt haben, aber wir werden dieselbe Struktur haben. Wir können dynamisch darüber nachdenken. Wir erstellen die Seite oder diese Komponente und verwenden sie für jedes Projekt mit unterschiedlichen Daten. Dafür benötigen wir Sammlungen. Wenn Sie dem nicht folgen, lassen Sie uns das auf praktische Weise betrachten. Wir gehen zum CMS Stab und klicken hier oben auf die Plus-Schaltfläche. Das ist die Erstellung einer Sammlung für uns, und wir werden sie Projects Perfect nennen. Nun, das hat hier kein Element, es hat hier nur zwei Felder. Wir haben Titel und wir haben Slug, das sind die Basisdaten, die wir benötigen Wir werden hier „Felder bearbeiten“ sagen. Sie können hinzufügen, was Sie wollen. Wir haben bereits einige erwähnt. Fügen wir Klartext hinzu und sagen wir Jahr, weil es Klartext sein wird. Wir werden einen Kunden hinzufügen. Wir werden auch den Projekttyp hinzufügen und wir werden vorerst eine Rolle hinzufügen. Das ist es. Sehen Sie, dass Sie vorerst verschiedene Feldtypen hinzufügen können. Wir werden es einfach als Klartext behalten , damit wir es schnell bearbeiten können. Aber zögern Sie nicht, all das zu erkunden. Jetzt haben wir all diese Felder, aber wir haben keinen Inhalt. Lassen Sie uns hier ein neues Testelement erstellen Wir können die verschiedenen Felder ausfüllen, die wir für den Titel erstellt haben. Ich werde Nike-Store-Website sagen, was ein imaginäres Projekt ist, das ich noch nie gemacht habe, aber es wäre ein wirklich gutes Jahr Ich werde natürlich Kunde von 2019 sagen. Nick, Projekttyp. Ich sage Website-Design, melde dich an. Ich werde UX-Designer sagen. Ich werde vorerst keine Inhalte hinzufügen. Und ich sage einfach sicher, cool. Das hat unserem CMS eine Zeile hinzugefügt. Ich werde das mit ein paar gefälschten Projekten füllen, damit wir die CMS-Optionen erkunden können Okay, lassen Sie uns mit diesen fünf arbeiten , jetzt haben wir diese Informationen hier. Wenn wir zu unserer Seite zurückkehren, werden Sie feststellen, dass wir das CMS und unsere Projekte hier haben. Aber jetzt müssen wir diese Informationen aus dem CMS in unser eigentliches Design übernehmen. Denn obwohl ich meinem CMS fünf Projekte hinzugefügt habe, werden diese nirgends angezeigt. Wie sollte ich das machen? Jetzt gibt es zwei Möglichkeiten, wie wir diese Informationen verwenden können. Wir können sie als Sammlungsliste oder als bestimmte Seiten verwenden. In Sammlungslisten sind jetzt alle Artikel aus unserer Sammlung an einem Ort zusammengefasst. Stellen Sie sich eine Liste aller Artikel vor, die wir in unserem CMS haben. Fügen Sie einfach eine Seite ein, genau das, was wir für unsere Homepage benötigen. Seiten sind Seiten für jedes Element in unserem CMS, eine Seite für jedes unserer Projekte. Sie können dies nun einfügen, indem Sie unter Einfügen klicken. Und im CMS-Bereich haben wir hier die Sammlungsliste. Und wir können alle Projekte hierher ziehen und dort ablegen, oder wir können Inhaltsfelder per Drag & Drop auf unsere spezielle Seite ziehen. Jetzt haben wir unser CMS mit fünf Projekten und den verschiedenen Feldern, die wir benötigen, hinzugefügt . Wir wissen, dass wir all diese Projekte als Liste auf unserer Homepage benötigen . Und wir wissen, dass wir für jedes Projekt eine bestimmte Seite benötigen , auf der wir all diese Informationen abrufen. Weil das etwas mehr Arbeit erfordert und wir unser Design fertigstellen müssen. Konzentrieren wir uns darauf in unserem nächsten Video, in dem wir eine Projektliste auf der Startseite und eine Projektseite für jedes unserer Projekte haben werden. 8. Eine CMS-Sammlung erstellen: Cool, konzentrieren wir uns also zuerst auf die Startseite. Als Erstes benötigen wir eine Liste unserer Projekte. Ich werde das alles entfernen und nur eine Instanz unserer Projektkomponente übrig lassen. Denken Sie daran, dass wir eine Komponente für diesen Projekttitel erstellt haben , und ich werde es so belassen. Du wirst sehen warum. Wir werden im CMS-Bereich zum Einfügen gehen, wir werden Sammlungsliste sagen. Ich werde das hierher ziehen. So werden unsere Projekte als Liste präsentiert. Es ist richtig, weil es alle Informationen abruft, aber es sieht nicht nach unseren Entwürfen aus. Aber zum Glück für uns gibt es eine schnelle Möglichkeit, es unter Schichten zu reparieren. Sie können zunächst sehen, dass wir es auf der falschen Seite hinzugefügt haben. Es sollte nicht unter CTA stehen. Diese Sammlungsliste sollte sich im Projektbereich befinden. Lassen Sie uns das zunächst ändern. Jetzt. Ich werde den Inhalt aus dieser Sammlungsliste entfernen, wo Post steht Ich werde ihn entfernen. Diese Sammlungsliste ist im Grunde mit unserem CMS verbunden, und sie überträgt die Informationen aus unserem CMS in den Inhalt, den sie darunter hat. Wir können also unsere Komponente nehmen und sie in die Sammlungsliste ziehen. Jetzt werden fünf Instanzen derselben Sache erstellt, weil wir fünf Projekte haben. Aber jetzt haben wir zwei Probleme. Zuallererst hat sich unser Design geändert. Das liegt daran, dass die Sammlungsliste nicht die richtige Breite hat. Anstatt also zu sagen, behoben, werde ich sagen, fühle mich cool. Das Erste wurde behoben. Die zweite Sache ist, dass die Daten nicht aus jedem Projekt abgerufen werden, aus unserem CMS. Warum ist das so? Nun, das hat eine sehr einfache Antwort. Das ist eine Komponente. Die Grundidee einer Komponente ist, dass alles, was sie hier sagt, hier steht, sofern wir sie nicht ändern. Aber wir haben hier nur ein Element und dieses können wir hier nicht bearbeiten. Wie bearbeiten wir dieses? Es zeigt die Informationen für jedes unserer Projekte. Was wir jetzt tun müssen, ist Variablen zu erstellen. Haben Sie Geduld mit mir, das ist nicht so komplex, wie es sich anhört. Das Einzige, was wir tun müssen, ist sicherzustellen, dass sich diese drei Felder mit den Informationen ändern wir aus dem CMS abrufen. Es gibt einen sehr einfachen Weg, das zu tun. Unser Projekttitel hier unter dem Textbereich, da steht Inhalt gegen Inhalt, da steht Projekttitel. Wenn wir das ändern, wird sich auch der Text hier ändern. Wenn wir zu unserer Startseite zurückkehren, wird der Text hier für alle unsere Instanzen geändert . Okay, cool. Wir müssen sicherstellen, dass das variabel ist. Anstatt hier zu schreiben, was wir wollen, werden wir eine Variable erstellen. Wir tun das, indem wir auf dieses Plus neben Inhalt klicken und sagen Variable erstellen und Klartext sagen. Wir werden es genauso nennen, wie wir es hatten. Und wir werden sagen, die Standardeinstellung ist Projekttitel und auf diese Weise wird es wieder zu dem geändert, was wir haben. Cool, ich werde weitermachen und dasselbe für die beiden tun. Wir gehen unter Text und sagen „ Inhalt, Variable erstellen“, Klartext“, „Projekttyp und dann sagen wir „Jahr“. Und das Gleiche. Inhalt erstellen variabel, Klartext, Jahr. Da haben wir's. Jetzt ist es verbunden. Dieser Text sollte jetzt dynamisch sein, da wir ihn hier nicht ändern können Wir kehren zu unserer Startseite zurück. Das hat sich nicht geändert, aber wir können jetzt Informationen abrufen, weil wir diese drei Variablen erstellt haben. Hier auf der rechten Seite werden wir etwas mit der Aufschrift Project Link sagen, was der Name unserer Komponente und der drei Variablen ist , die wir definiert haben. Was wir hier tun könnten, ist es manuell zu ändern. Aber auch hier wird es sich für jedes Projekt ändern, und das wollen wir nicht. Beachten Sie diese Plus-Schaltfläche hier. Wir können es jetzt mit Variablen verbinden , die wir aus unserem CMS haben. Wir können sagen, dass der Projekttitel unser Titel sein wird. Der Projekttyp wird sein, der Projekttyp wird das Jahr sein. So ändern Sie es dynamisch. Jetzt haben wir alle Informationen aus unserem CMS in diese Projektliste übernommen, und das ist perfekt. Aber jetzt brauchen wir für jedes dieser Projekte eine Seite. Wir gehen zum Tab Seite unter CMS. Wir gehen zu den P-Projekten und sagen Detailseite. Dadurch wird hier ein Tippen mit der Aufschrift Projektseiten angezeigt. 55 ist die Anzahl der Projekte , die wir in unserem CMS haben. Hier oben können wir all die verschiedenen Projekte sehen, die wir haben. Das Gute daran ist , dass Sie es nur einmal entwerfen müssen. Wenn wir diese Apple-Kampagne entwerfen, passt sie sich an jede unserer Projektseiten an. Löschen Sie zunächst alles. Dann kehren wir zu unserem Figma-Design zurück und machen dasselbe, was wir für unsere Homepage und für die Info-Seite getan haben , bei der alles mit unserem Plug-In kopiert wird Denken Sie daran, dass wir zum Figma-Menü gehen und Figma mit Framer in HTM einbinden Du weißt, wie es funktioniert. Es sollte sehr schnell gehen. Und wir wählen das aus und fügen Heatpaste hinzu. Perfekt. Wir haben jetzt unsere Seite. Sieht gut aus. Wir haben hier ein paar Probleme mit einem Bild, aber wir wissen, wie wir es nach Belieben anpassen können Denken Sie daran, dass wir jetzt den Apple bearbeiten, die Apple-Projekte, genau das, was wir zuvor gemacht haben Wir können verschiedene Daten aus unserem CMS verschiedenen Feldern zuordnen , unserer Site. Ich wähle den Projekttyp aus , der eigentlich den Projekttitel festlegen sollte , tut mir leid. Aber wir wählen den Projekttitel aus, wir gehen zum Text Inhalt setzen variabel und sagen Titel unter Jahr. Wir können genau das Gleiche tun. Ich werde das auch ändern , nur damit du siehst, wie es sich für all die verschiedenen Seiten ändert . Ich bin mir nicht sicher, ob ich eine für die Rolle erstellt habe. Ja, habe ich. Perfekt. Ich werde das für den Projekttyp machen. Wir haben den Projekttyp. Okay. Wir sind jetzt auf der Apple-Kampagnenseite, aber wenn ich zum Lego One gehe, sollte es mit allen Informationen aktualisiert werden, die wir in unserem CMS haben. Das ist perfekt. Das ist genau das, was wir wollen. Wir haben es einmal erstellt, wir waren effizient damit und wir müssen nicht für jedes unserer Projekte eine Seite erstellen . Wichtiger ist, dass wir, wenn wir das jetzt bearbeiten wollen, weil uns unser Design auf Figma nicht wirklich gefällt, etwas ändern wollen, was auch immer wir wollen Alles, was wir hier ändern, in Bezug auf das Layout, in Bezug auf die Mittel, in Bezug auf alles, wird für jede Seite angepasst Sie werden alle genau gleich aussehen. Sie haben gesehen, wie einfach es ist, mit dem CMS zu arbeiten. Sie fügen hier alle Daten hinzu. Darüber hinaus können Sie hier weitere Elemente hinzufügen und die Felder nach Ihren Wünschen bearbeiten, und Sie können diese Informationen in die Designs übernehmen. Aber was jetzt gut ist, ist, dass wir jetzt alle Seiten unserer Website haben. Wir haben unsere Homepage mit allen Projekten hier als Liste. Wir haben die Info-Seite. Wir haben die Projektseiten für jedes unserer Projekte. Jetzt haben wir das Design eingerichtet und die Sammlung hinzugefügt. Wir sind also bereit für den nächsten Schritt, der darin besteht , all diese Seiten miteinander zu verbinden , sodass Sie zu jeder einzelnen von ihnen navigieren können. 9. Verlinken der Seiten: Es gibt mehrere Dinge, die wir auf unserer Seite verbinden müssen. Wir müssen die Navigation mit jeder einzelnen Seite auf unserer Seite verbinden, wir müssen jeden Projektlink mit jeder Projektseite verbinden. Schließlich müssen wir diese Kontaktadresse vielleicht mit einer E-Mail-Adresse verbinden . Und diese drei Social-Media-Links zu den Social-Media-Plattformen oder -Profilen, die wir wollen. Lassen Sie uns zunächst mit den Projekten beginnen, weil ich denke, dass dies das wichtigste ist. Jetzt müssen wir zu unserer Komponente zurückkehren. Denn denken Sie daran , dass wir, was auch immer dieser Projektliste bearbeiten möchten, wir in dieser Projektliste bearbeiten möchten, zu der Komponente gehen müssen, um sicherzustellen, dass sie für jede einzelne von ihnen gilt . Doppelklicken Sie, um darauf zuzugreifen. Jetzt werden wir der ganzen Sache einen Link hinzufügen. Was wir tun können, ist hier einfach einen Link hinzuzufügen. Anstatt hier eine bestimmte Seite oder URL zu taggen, werden wir eine Variable erstellen Wir können es auf unserer Homepage bearbeiten, die Variable erstellen, das ist in Ordnung Jetzt gehen wir zurück zur Startseite. Denken Sie daran, dass wir über den Abschnitt hier unter dem Link zum Komponentenprojekt auf die Variablen zugreifen , da wir im CMS nichts haben , das ein Link oder etwas Ähnliches ist. Dieses Plus-Muster haben wir hier nicht. Aber wenn du hier auf A klickst, sehen wir das Projekt Colon Slack Was Sluck bedeutet, ist die eigentliche Seite des Projekts, der spezifische Link für jedes Projekt, wie es im CMS definiert Wenn ich jetzt Slc drücke, los geht's. Es wird auf die entsprechende Projektseite verlinkt. Es gibt eine Möglichkeit, es zu testen, und dafür müssen wir eine Vorschau unserer Seite anzeigen, die sich hier oben befindet. Wir können hier klicken. Wir können zu unserer Projektliste nach unten scrollen und eines der perfekten Projekte auswählen. Und vielleicht das Bein von einem, das perfekt ist. Unglaublich. Jetzt sind die Projekte auf unserer Projektliste jeder spezifischen Projektseite verknüpft. Das zweite, was wir tun werden, ist die Navigation. Jetzt können wir effizient mit der Navigation umgehen, da es ein Element handelt, das für alle Seiten auf unserer Seite wiederholt wird . Warum sollten wir es auf jeder Seite bearbeiten? Wir sollten dafür eigentlich eine Komponente haben. Das werden wir tun. Wir werden schreiben, klicken und sagen, eine Komponentennavigation erstellen, die perfekt ist , die eine Komponente für unsere Navigation erstellt , die wir einfach kopieren und auf alle Seiten unserer Seite einfügen und sie nur einmal bearbeiten können . Bevor ich das mache, werde ich jeden dieser Links verlinken. Dies sollte Sie zur Startseite führen, sollte Sie auch zur Startseite führen da wir keine spezielle Seite für die Arbeit haben Über uns sollte Sie zur Kontaktseite weiterleiten. Vorerst werden wir es mit einer E-Mail-Adresse verknüpfen , nur weil wir keine bestimmte Kontaktseite haben. Lass uns hierher gehen. Ich wähle das Symbol aus. Ich werde hierher gehen , wo Link steht. Ich werde auf die Startseite verlinken. Da haben wir's. Jetzt ist es verlinkt. Jetzt wählen wir Arbeit aus. Mach das Gleiche. Link zur Startseite, der Link zur Info-Seite. Und wir werden auf die Info-Seite verlinken. Beachten Sie hier, wo Link steht. Das liegt daran, dass es einen Standardstil verwendet , den wir ändern können, wenn Sie möchten, wir können ändern, wie er aussieht. Standardmäßig hat jeder Link diese Farbe. Und ich mag es nicht wirklich, ich mag einfach meine weiße Farbe. Aber bei Hover werden wir es vielleicht dunkler blau machen. Lass es uns testen Denken Sie daran, dass Sie alles in der Vorschau ansehen können. Sie können sich hier eine Vorschau dieser Komponente ansehen. Ja, es ist ein bisschen hart anzusehen , aber ja , wir lassen es so. Dann die Kontaktseite, zu der wir eine E-Mail hinzufügen werden, ich sage meine E-Mail. Und das öffnet Ihre Standard-Mail-App, um eine E-Mail zu schreiben. Also werden wir es so lassen und uns nicht zu viele Sorgen machen. Jetzt haben wir unseren Navigationslink zur Info-Seite. Die Arbeitsseite. Gehen wir zurück zur Startseite. Wir kopieren einfach diese Navigation, sodass Sie einen Befehl ausführen können, oder sagen Sie einfach Kopieren. Wir gehen zur Info-Seite. Klicken Sie auf Desktop, sagen Sie Befehl V, ziehen Sie ihn nach oben, Perfect, und entfernen Sie die Navigation, die keine Komponente ist. Seien Sie vorsichtig, welche Sie entfernen. Dieser ist eine Komponente mit diesem Diamantsymbol hier. Dieser ist nicht. Also werden wir es entfernen. Wir werden auf unsere Projektseiten gehen. Denken Sie daran, dass Sie es nur einmal tun müssen. Und hier wähle ich Desktop aus, sage Befehl V, ziehe ihn nach oben und entferne die Navigation , die keine Komponente ist. Hier haben wir oben etwas Platz, und ich werde dafür sorgen, dass es oben ist. Da haben wir's. Jetzt müssen wir nur noch überprüfen, ob es für alle unsere Seiten funktioniert. Das ist perfekt. Das ist genau das, was wir wollten. Machen wir jetzt dasselbe mit unserer Fußzeile, was viel einfacher sein sollte , weil wir bereits wissen, wie das geht Denken Sie daran, mit der rechten Maustaste zu klicken, eine Komponente zu erstellen , dann Fußzeile zu sagen und sie mit jedem Ihrer bevorzugten sozialen Medien zu verknüpfen zu sagen und sie mit jedem Ihrer bevorzugten sozialen Medien Cool, da haben wir's. Gehen wir jetzt zurück zu unserer Homepage. Ich werde C befehlen, meinen Fuß zu kopieren. Gehe zurück zur Info-Seite. Kopieren Sie die Fußzeile und stellen Sie sicher, dass sie sich an der richtigen Position befindet. Und entferne diesen. Stellen Sie sicher, dass die Breite gefüllt ist, nur wir wollen den gesamten Raum einnehmen. Dann gehen wir zu den Projektseiten, wählen Desktop und entfernen die Fußzeile Das ist keine Komponente. Das ist es. Wir haben unsere Fußzeile verbunden, unsere Navigation hat die Projektlinks verbunden, die mit jeder spezifischen Projektseite Aber wegen der Navigation, wegen der Fußzeile, weil alles nicht nur auf dem Desktop, sondern auch auf Mobilgeräten und anderen Haltepunkten miteinander verbunden sein nicht nur auf dem Desktop, sondern auch auf Mobilgeräten und anderen Haltepunkten miteinander verbunden muss, müssen wir über Reaktionsfähigkeit sprechen Und das wird ein großes Thema sein. Mach dich bereit für die nächste Lektion. 10. Für mobile Geräte entwerfen: Startseite: Ich denke, es ist ziemlich offensichtlich , dass in der heutigen Zeit alle Websites auf allen Geräten gut aussehen müssen. Und wir können davon ausgehen, dass jeder unsere Website von unserem gewünschten Gerät, in diesem Fall einem Laptop, aus betrachtet unsere Website von unserem gewünschten Gerät, . Die meisten Menschen greifen von ihrem Telefon aus auf Websites zu, und wir müssen uns darum kümmern Eigentlich haben wir es schon getan. An unseren Designs können Sie sehen, dass wir für den Desktop entworfen haben, und wir haben auch über das Layout nachgedacht , das wir für Mobilgeräte haben wollen. Das ist in Ordnung, aber wie wenden wir diese Designs tatsächlich in Framer Nun, Framer, wenn Sie diese Site auf Mobilgeräten öffnen, wird standardmäßig wenn Sie diese Site auf Mobilgeräten öffnen, alles skaliert Alles wird sehr klein aussehen. Und das wollen wir nicht, wir wollen nur sicherstellen, dass es gut und zugänglich aussieht. Das Gute ist, dass wir das Design mit automatischem Layout oder Stack entworfen haben Design mit automatischem Layout oder Stack entworfen Anpassung an Mobilgeräte sollte nicht so lange dauern, obwohl es ein wenig Feinarbeit erfordert. Wir werden einen Breakpoint für Mobilgeräte hinzufügen und Sie können sehen , dass alles falsch aussieht Das ist in Ordnung. Das werden wir anpassen Das erste ist, dass wir unsere Navigation anpassen werden unsere Navigation anpassen Wir werden vorerst kein ausgefallenes Menü machen. Ich werde das für eine Bonusstunde belassen , die Sie sich später ansehen können. Aber wir werden nur sicherstellen, dass Sie auf jeden dieser Links zugreifen können . Wir werden hier eine Variante erstellen und ich werde ihr eine Größe geben. Ich werde sagen, dass diese Variante 390 ist , weil das die Größe ist , die unser Gerät hier hat. Ich werde das einfach kopieren. Anstatt diese drei Links nebeneinander zu haben, werde ich sie als vertikalen Stapel platzieren. Und ich werde etwas mehr Platz lassen. Ich werde 35 sagen. Und ich werde nur sichergehen, dass alles mittig ausgerichtet ist. Damit werden wir hier weitermachen. Anstatt diese Variante eins zu haben, werde ich Variante zwei sagen und sicherstellen , dass sie gut aussieht. Perfekt. Die zweite Sache ist der Header. Das Erste, was mir hier auffällt , ist, dass mein Name riesig ist und ich ihn nicht so groß haben möchte. Lassen Sie uns die Telefongröße reduzieren. Cool. Sie werden sehen, dass sich alles dupliziert hat Jetzt haben wir also Ebenen für den Desktop und Ebenen für das Telefon. Sie können schnell auf jedes Element auf unserem Telefongerät zugreifen. Ich werde 42 sagen. Wir haben hier auch diesen Stapel , der nebeneinander steht. Anstatt horizontal werde ich vertikal sagen. Ich würde sagen, eine Zeile links. Das funktioniert schon. Aber kannst du es sehen? Es ist viel gepolstert. So viel brauchen wir nicht. Ich werde den ganzen Stapel auswählen , anstatt ihn hier zu haben. Wir können die 200 für oben und unten belassen, aber wir sagen hier 20, hier 20. Das ist schon viel besser. Ich gebe ihm einfach etwas mehr Platz statt Platz dazwischen, ich sage Start, so viel brauche ich nicht. Ich werde einfach 15 hinzufügen. Das sieht schon viel besser aus. Das ist perfekt. Lassen Sie uns mit diesen Abschnitten weitermachen. Wir werden hier clever sein müssen. Zuallererst werde ich für diesen ganzen Abschnitt die gleiche Polsterung ändern, die wir für den obigen hatten, statt 80 für rechts und links, ich werde sagen links, und das ist schon ein bisschen besser Ich werde den Fonds hier ändern. Ich werde 24 sagen. Aber jetzt muss ich auf jede Komponente eingehen, genauso wie wir es für unsere Navigation getan haben, und sie hier ändern, damit sie sich an jedes unserer Projekte anpassen kann . Gehen wir in unsere Projektkomponente ein. Nochmals, dasselbe, was wir mit der Navigation gemacht haben. Wir werden eine Variante mit einer Breite von 390 erstellen. Das Erste, was mir auffällt, ist, dass dieser Projekttitel riesig ist Lassen Sie uns auch diese Schriftgröße ändern. Es wird 42 sein. Der Projekttyp wird 24 sein, was schon gut ist. 24 für das Jahr, was perfekt ist. Bei unserem Telefondesign wählen wir nun die Komponente und stellen sicher, dass dort Variante zwei steht. Es sieht in Bezug auf die Größe okay aus, aber es macht komische Dinge, weil es hinausgeht, was wir sein mussten. Wir werden zur Komponente und diesem Projekttitel zurückkehren . Wir werden dafür sorgen, dass dort „Füllen“ steht. Wir werden es als Leerzeichen zwischen und unter den Projektdetails belassen . Wir werden sagen, mit Füllung, nur um sicherzugehen , dass dieser Projekttitel so viel Platz wie möglich einnimmt , ohne das erste Jahr zu überschreiten. Wenn wir zu unserer Startseite zurückkehren, sollte das behoben sein. Beachten Sie nun, dass zwischen dem Titel und dem Jahr nicht viel Abstand besteht, wenn der Titel lang ist. Und wir können das beheben, indem statt Leerzeichen zwischen wir statt Leerzeichen zwischen Start sagen und die Lücke von 50 hinzufügen, was das Problem beheben sollte. Ja, das ist perfekt. Genau so wollen wir, dass es aussieht. Lassen Sie uns jetzt weitermachen und Schriftgrößen optimieren, die für meinen Geschmack etwas zu groß aussehen, um 38 zu sagen Und wir werden diese Fußzeile genauso korrigieren , wie wir es mit unserer Navigation gemacht haben Wir werden eine weitere Variante erstellen. Wir werden ihr eine 319 geben. Wir stellen sicher, dass es sich um einen vertikalen Stapel handelt. Wir werden ihm nicht so viel Pudding geben. Und lassen Sie uns es zentrieren. Jetzt wählen wir die Fußzeile aus und sagen, dass die Variante perfekt ist Genau so wollen wir, dass unsere mobile Version aussieht. Alles wird auf die gleiche Weise verbunden sein. Es ist nur das Layout , das wir geändert haben, nur um es an unsere Designs anzupassen. Welches ist perfekt. Cool, lassen Sie uns weitermachen und auch die Projektseiten und die Info-Seite optimieren 11. Entwerfen für Mobilgeräte: Über und Projektseiten: Wir wissen also bereits, wie man einen auf Mobilgeräte reagierenden Breakpoint erstellt einen auf Mobilgeräte reagierenden Breakpoint wie wir es für die Startseite getan haben Machen wir dasselbe für die Info-Seite und das sollte ziemlich schneller sein Wir werden einen Breakpoint für das Telefon erstellen . Zunächst wählen wir die richtige Variante für die Navigation und für die Fußzeile Ich werde die Telefone wechseln, weil ich bereits weiß, welche Telefongröße sie haben Auch für diesen müssen wir uns hier mit den mittleren Abschnitten befassen. Und es sollte ziemlich einfach sein, denn auch hier verwenden wir Stack und alles ist bereits so eingerichtet, dass es in gewisser Weise reagiert. Das erste, was wir tun werden , ist den Header in Angriff zu nehmen. Wir haben hier einen horizontalen Stapel , der in einen vertikalen umgewandelt wird, und das löst das Problem bereits. Wir werden die Polsterung genauso ändern, wie wir es für die Homepage getan haben , die schon besser aussieht Wir werden die Telefongröße auf 64 ändern. Um zu sagen, Phil, ich werde diesen Text hier ändern , um den Raum zu füllen. Cool, ich denke, das löst schon eine Menge für dieses Bild hier. Es ist etwas kleiner, sodass es den Raum ausfüllen könnte. Wir werden sagen, Phil, perfekt, ich habe schon viel gelöst. Wir haben den Header. Lassen Sie uns nun diese Erfahrung hier angehen. Auch hier sollte es ziemlich einfach sein. Zuallererst werden wir erneut die Polsterung ändern, von der wir bereits wissen, wie man das macht Die horizontalen Stapel werden wir hier auf vertikale umstellen Dann haben wir hier einige Stapel für jede der Rollen. Dies sind wiederum horizontale Stapel, die wir als vertikale Stapel ändern können Sie haben eine große Lücke dazwischen Lassen Sie uns das schnell für jeden einzelnen ändern, ich sage zehn Anstatt das Leerzeichen dazwischen zu haben, sage ich Start und gebe ihm ein Leerzeichen von 50. Perfekt, wir können das Gleiche damit machen. Sie Kontakt mit uns auf, wir haben hier diese Beschreibung , die als horizontaler Stapel sitzt , der sich als vertikaler Stapel verändert. Für den Abstand dazwischen ändern wir den Anfang und geben ihm 50 wie oben. Wir haben hier die Rahmen und die Kontaktdetails sind horizontal gestapelt, wodurch sich die Vertikale ändert. Bei diesem Rahmen werden wir sagen, füllen statt fixieren. Nur um sicherzugehen, dass er zu unserem Raum passt, wir sicherstellen, dass sie alle einen schönen Abstand dazwischen haben. Perfekt, das ist es. Das ist unsere Info-Seite, sofort einsatzbereit. Und das Letzte, was wir ändern müssen, sind die Projektseiten. Denken Sie auch hier daran, dass Sie dies nur für eine der Seiten tun müssen. Es wird sich an die anderen anpassen. Lass uns das schnell machen. Du solltest damit ziemlich schnell sein. Jetzt haben wir es zweimal gemacht. Aber auch hier gilt: Wenn Sie den Prozess nicht verstehen oder ich für Ihren Geschmack zu schnell bin, lassen Sie es mich wissen und wir können ein Tutorial erstellen, in dem erklärt wird , wie Sie , wie den verschiedenen Breiten- und Höhenoptionen umgehen, was jede von ihnen bedeutet, wie man mit Layouts oder Stapel-, Raster - oder Auto-Layouts arbeitet . Wenn Sie sich mit diesen Begriffen nicht auskennen, lassen Sie es mich einfach wissen und ich werde sicherstellen, dass ich sie viel weiter unten erkläre. Wir wissen, wie es läuft. Ein bisschen Abwechslung hier mit diesem Bild hier, weil ich etwas größer sein wollte Ich werde ihm einen festen Wert geben. Ich werde das entsperren und sicherstellen, dass es gefüllt ist. Es wird etwas mehr Platz beanspruchen, es ist nicht so klein für diesen Abschnitt hier, es ist einfach dasselbe. Du hast gemerkt , dass es nicht so schwierig ist, wenn du es einmal gemacht hast. Sobald Sie wissen, wonach Sie suchen. Grundsätzlich können Sie die Richtung des Schafts von horizontal nach vertikal ändern . Sie ändern den Text. Anstatt fest, ändern Sie ihn in Feel. Und das Gleiche gilt für die Titel. Stellen Sie sicher, dass es gut aussieht. Ändern Sie den Abstand, sodass etwas mehr Platz für die Bilder benötigt etwas mehr Platz für die Bilder Möglicherweise müssen Sie ein bisschen unartig sein und ihm eine feste Höhe oder Breite geben, und das ist Es ist deine Website, du musst dich damit wohlfühlen. Stellen Sie einfach sicher, dass alles den Behälter füllt , in dem es sich befindet. Wenn du es einmal gemacht hast, weißt du genau, wie du es ändern kannst, weil ich dieses reaktionsschnelle Ding kenne. Es ist nicht für jeden einfach. Ich werde einige Richtlinien hinterlassen, die Sie verwenden können. zunächst sicher, dass der Text als Füllung festgelegt ist. Es füllt also den Behälter, in dem es sich befindet. dann für jeden Behälter oder für jeden Stapel, den Sie haben, sicher, dass die Polsterung richtig angeordnet ist Es nimmt nicht viel Platz von links und rechts, von oben und unten Sie außerdem sicher, dass der Stapel, den Sie haben Stellen Sie außerdem sicher, dass der Stapel, den Sie haben, vertikal statt horizontal angeordnet ist. Auf diese Weise wird nicht die Breite der Seite berücksichtigt, sondern es wird mehr Platz benötigt , um alles richtig zu lesen. Da haben wir's. Jetzt haben wir alle unsere Seiten für Desktop und Handy entworfen. Bevor wir weitermachen , lassen Sie uns kurz zusammenfassen, was wir getan haben Zunächst haben wir unser Figma-Design überprüft. Wir haben gesehen, wie alles organisiert ist und wie alles benannt ist Wir haben das Plug-In installiert, um unsere Designs von Figma in Framer Und wir haben es tatsächlich ausgeführt. Wir haben im Grunde die Desktop-Version von unserer Homepage und der Info-Seite auf Framer kopiert von unserer Homepage und der Info-Seite auf Wir haben auch die Navigation und die Fußzeile als Komponenten erstellt , sodass wir sie für alle unsere Seiten wiederverwenden können Wir haben eine Sammlungsliste mit all unseren Projekten erstellt, Daten aus unserem CMS Wir haben auch individuelle Projektseiten für jedes unserer Projekte erstellt . Wir haben alles miteinander verbunden, indem jedes Projekt mit jeder Projektseite verknüpft haben. Die Navigation zu jeder spezifischen Seite und die Fußzeile zu den verschiedenen Social-Media-Plattformen Und schließlich haben wir eine responsive Version erstellt. Unsere Designs sehen also auf Mobilgeräten gut aus. Bevor wir fortfahren, stellen Sie sicher, dass auf dem Desktop alles für Sie gut aussieht. Auf Mobilgeräten ist alles miteinander verbunden. Das CMS funktioniert. Wenn Sie an einem dieser Punkte nicht weiterkommen, lassen Sie es mich unten wissen, damit ich Ihnen helfen und Ihnen weiterhelfen kann. Denn als Nächstes fügen wir Animationen und Übergänge hinzu. Sie möchten also sicherstellen, dass Ihre Designs gut aussehen, bevor Sie damit fortfahren. 12. Bewegung hinzufügen: Animierte Übergänge: Das Einzige, was wir jetzt noch tun müssen, ist , unserer Seite diese zusätzliche Raffinesse hinzuzufügen , unserer Seite diese zusätzliche Raffinesse hinzuzufügen Um das zu tun, werden wir heute etwas Bewegung hinzufügen. Eine statische Website zu haben ist sehr seltsam und sie beinhalten alle ein gewisses Maß an Bewegung oder Animation. Und das werden wir jetzt tun. Erstellen von Animationen auf Framer ist jetzt extrem einfach, da es viele Voreinstellungen gibt , die Sie nach Belieben verwenden können Sie befinden sich alle im Effektbereich hier auf der rechten Seite Und wir können bei verschiedenen Interaktionen, die wir durchführen, Animationen auf einem Peer hinzufügen , wenn er mit dem Mauszeiger Wir können die Geschwindigkeit definieren. Wir können Übergänge definieren. Wir können definieren, welches Element wir ändern möchten, wie Größe, Opazität, Farbe, alles, was wir wollen In dieser Lektion werden wir uns drei verschiedenen Arten von Interaktionsanimationen befassen , die Sie sehr einfach replizieren können Obwohl wir das gerade erst machen, schlage ich vor, dass Sie damit experimentieren und verrückt Weil es wirklich cool ist zu sehen, was Framer in diesem Bereich tun kann Die drei Arten von Animationen , die wir machen werden, sind : sie erscheinen als Element, erscheinen auf der Seite, beim Scrollen, Scrollen durch diese Seite und weiter, wenn wir den Mauszeiger über ein bestimmtes Fangen wir mit der Kopfzeile, der Animation, an. Wenn wir die erste Zeile auf der Seite haben, wenn dieses Element auf der Seite erscheint, werden wir genau das erstellen. Wenn die Seite geladen wird , erscheint dieses Element. Bei einem verblassenden Übergang müssen wir nur die Elemente auswählen und sicherstellen, dass der gesamte Header ausgewählt ist Wir gehen zu Effekten, wählen einen Peer aus und verwenden eine dieser Voreinstellungen Standardmäßig wird das Fading-Preset verwendet, was mir bereits gefällt, weil es sehr subtil ist und nicht wie eine riesige Bewegung aussieht Wir können auch definieren , wie die Animation dargestellt wird. Standardmäßig sieht es wie ein Frühlingsübergang aus. Es geht zwischen 0 und 100, das wäre die Animation. Es ist keine Skalierung, die Skala ist auf eins festgelegt. Es rotiert nicht, also ist es auf Null gesetzt. Und es gibt keinen Offset. wir können auch den Übergang zum Frühling wählen, Ich würde sagen, wir können auch den Übergang zum Frühling wählen, weil er sehr subtil ist und der Frühling vielleicht zu viel ist, und der Frühling vielleicht zu auch weil ich schon damit gespielt habe und ich weiß, dass ich genau das mag. Aber auch hier gilt: Spiel damit und experimentiere rechtzeitig. Ich sage nein, 0,5 Ich werde ein bisschen Verzögerung hinzufügen, nicht viel, nur damit wir Zeit haben, uns die Animation anzusehen. Gut, ich glaube, ich bin damit zufrieden. Ich werde es ausprobieren und auf Vorschau klicken. Und da haben wir es. Das ist unsere Animation. Das ist sehr subtil. Es muss nicht so stark sein. Ja, ich bin glücklich damit. Perfekt. Die zweite Animation wird eine Scroll-Animation sein Beim Scrollen erscheinen diese Elemente nacheinander. Da wir eine Sammlungsliste und eine Komponente verwenden, müssen wir sie nur erstellen. Wir werden erneut sicherstellen , dass wir den Projektlink auswählen. Wir werden Effekt, wir werden Scroll-Animation sagen. Jetzt wollen wir, dass der Auslöser ist, wenn diese Ebene beim Scrollen sichtbar ist und diese Ebene zu erscheinen beginnt Diese Animation wird nicht vorher aktiviert, sonst würden wir sie verpassen Wir werden es in der Mitte dieser Ebene starten. Wir werden keine Wiederholung hinzufügen. Das heißt, wenn wir scrollen, erscheint dieses Element, dieses Element bleibt dort, anstatt Scrollen auf der Seite ein- und auszuschalten Aber auch hier schlage ich vor, dass Sie diese Animationen ausprobieren und dann mit ihnen herumspielen und sehen, wie sich das anfühlt und was sich für Sie richtig anfühlt. Weil du vielleicht ein Fan von Wiederholungseffekten bist , werde ich nein sagen Anstatt Fade-In zu verwenden, werde ich Slide In Bottom sagen Sie können die Eingabe erneut definieren. Ich werde den Wert erneut ändern, damit der Offset bedeutet, wie viel bewegt wird. Es bewegt sich auf der Y-Achse, 150 Pixel. Und vielleicht ist das ein bisschen zu viel, aber okay, lass uns sehen, wie das funktioniert. Wir haben diese erste Animation, wir haben diese, die hineingleitet. Ich finde, es sieht gut aus. Und wenn wir nach oben scrollen, wird es nicht wieder abgespielt. Ich werde das noch ein bisschen optimieren . Ich werde es auf 25 ändern. Ich bin. Ja, lass es so. Siehst du, wie es sich anfühlt? Großartig. Ich finde, das sieht wirklich nett aus. Perfekt. Nun, für den dritten Animationstyp werden wir etwas machen, das sehr schick aussieht, aber sehr einfach zu replizieren ist Wir werden diesen Hover-Effekt machen. Wenn Sie mit der Maus auf dieses Element zeigen, wird eine andere Art von Um dies zu erstellen, müssen wir uns nun mit der Komponente „ Projektlecks“ befassen Wir müssen aus dieser Komponente eine Komponente erstellen. Andernfalls können wir es frei bewegen, da es sich in einem Stapel befindet. Hab einfach Geduld mit mir. Lassen Sie uns daraus eine Komponente erstellen. Ich werde sagen, dass der Projekttyp in Ordnung ist. Wir werden diesen duplizieren und ihn außerhalb des Frames nach unten verschieben. Es muss direkt draußen stehen. Wenn das der Rahmen ist, muss er direkt draußen positioniert werden, damit wir ihn nicht sehen. Ich sage Kunde und wir richten es als Client-Variable ein. Cool. Jetzt werden wir einen Hover-Status einstellen Das heißt, wenn wir den Mauszeiger über dieses Element bewegen, passiert dies Lass es uns erstellen. Es könnte sein, dass sich die Farbe ändert, anstatt sich zu bewegen oder etwas zu tun. Wenn das der Fall wäre, würde ich die Farbe im Hover-Zustand ändern Sehen wir uns eine Vorschau auf Hover an. Es ändert die Farbe Okay? Das ist nicht das, was wir wollen. Aber wir können sehen, dass wir einen Schwebezustand definieren können. Gehen wir zurück zur ursprünglichen Farbe. Wir wollen, dass dieser sich dorthin bewegt, wo er ist. Ich werde dafür sorgen, dass es mittig ist und dass es genau darüber sitzt. Lass uns eine Vorschau ansehen. Perfekt. Sie ziehen beide um, aber okay, ich möchte den Kunden nicht im ersten Status sehen und ich möchte den Projekttyp nicht im zweiten Status sehen . Wir müssen den Überlauf als versteckt definieren. Und lassen Sie uns eine Vorschau anzeigen. Jetzt ist es soweit, das ist unser Effekt. Ich fasse den Übergang nicht einmal , weil er Frühling verwendet. Und ich denke, das funktioniert. Mir gefällt es, ich lasse es so wie es ist. Aber wisse, dass du hier auch die Voreinstellung oder den Effekt für den Übergang ändern kannst. Kehren wir zu unserer Hauptkomponente zurück und schauen uns eine Vorschau an. Ich liebe es. Mir gefällt wirklich, wie es aussieht. wir sicher, dass wir eine Verbindung zur richtigen Variablen herstellen. Wir werden hier eine Variable erstellen , wie wir es schon mehrmals getan haben. Gehen wir zurück zu unserer Homepage. Hier unter Client werden wir diese Variable setzen. Wir können es jetzt sehen. Aber wenn wir eine Vorschau davon sehen, haben wir unsere schönen Übergänge. Und wir schweben. Wir haben unseren Kunden hier. Ich finde, das sieht perfekt aus. Das ist genau das, was wir wollten. Dies sind nur drei Arten von Animationen oder Übergängen, die Sie zu Framer hinzufügen können Wir haben es gerade auf der Startseite gemacht. Fühlen Sie sich frei, Animationen auf der Projektseite oder auf der Info-Seite hinzuzufügen . Werde verrückt damit. Experimentieren Sie mit lustigen Übergängen und Animationen. Aber ich würde dir einen Rat geben. Eine Sache, die mir jedes Mal aufgefallen ist, wenn ich etwas entworfen habe , ist, dass weniger mehr ist. Und wenn wir es übertreiben, die Animationen irgendwie Platz ein und die Leute nehmen den Inhalt nicht wahr oder sie fühlen sich sogar überfordert Also ja, ein bisschen Bewegung reicht weit. Ich denke, wir sind jetzt an dem Punkt angelangt, an dem wir bereit sind, unsere Website zu veröffentlichen. Wir haben all unsere Inhalte, wir haben ein paar nette Übergänge. Wir haben den Telefon-Breakpoint einsatzbereit. Also ja, ich denke, es ist Zeit. Und genau das werden wir der nächsten Lektion tun. 13. Veröffentlichung unserer Website: Lassen Sie uns also unsere Website veröffentlichen. Und aus offensichtlichen Gründen wird dies das kürzeste Video sein. Weil das Veröffentlichen einer Website auf Framer so einfach ist. Im wahrsten Sinne des Wortes müssen wir nur hierher gehen und auf Veröffentlichen klicken. Ja, das war's, deine Website ist jetzt live. Cool. Okay, tschüss jetzt. Lass uns eine Sekunde warten. Ich verstehe gerade, ich bin mir sicher, dass Sie nicht Ihre professionelle Arbeit präsentieren und Ihr Portfolio an Kunden schicken wollen Ihre professionelle Arbeit präsentieren und Ihr Portfolio an Kunden schicken Ihr Portfolio an Kunden wie ein kleines Zuhause 9036 an einen Einrahmer, Als ob du das machen könntest, aber das ist nicht die professionellste Art Zuallererst, weil es nicht so erkennbar ist und niemand wissen wird, dass das Ihr Portfolio ist. Zweitens, weil Sie vielleicht nicht möchten, dass sie wissen , dass Sie das mit Framer erstellt haben , und Sie wollen nicht zeigen , dass es sich um eine Framer-App handelt, sondern Sie Aber ich würde vorschlagen, dass Sie eine benutzerdefinierte Domain hinzufügen. Um nun eine benutzerdefinierte Domain , die Ihnen gehört, zu verbinden und diese Framer-Seite auszublenden , müssen Sie ein Upgrade durchführen. Dies bedeutet , dass Sie Framer eine monatliche Gebühr zahlen und einen Hosting-Service hinzufügen müssen Aber wenn Sie das jetzt nicht tun möchten, wenn Sie immer noch nicht bereit sind zu zahlen, können Sie sich eine kostenlose Framer-Subdomain Für mich wäre es also mein Name, Framer Dot Website Oder wir können Framer hinzufügen. Ich lasse es so und speichere es als deine neue benutzerdefinierte Domain Sobald Sie bereit sind, Ihre eigene ohne diese Framer-Site hinzuzufügen , können Sie die Domain entfernen und Ihre eigene hinzufügen. So einfach ist das Es ist sehr schnell zu ändern. Ich lasse es so, nur um dir zu zeigen, wie es funktioniert. Aber da wir schon hier sind, lassen Sie uns einige Einstellungen durchgehen , um Ihre Website zu verbessern. Wenn Sie sich an das erste Video zu diesem Kurs erinnern, habe ich all diese Einstellungen sehr schnell durchgesehen, aber jetzt, wo unsere Website fertig ist, können wir etwas langsamer vorgehen und alle Dinge hinzufügen um unsere Suchmaschinenoptimierung und die Website im Allgemeinen zu verbessern. Das Erste ist, dass ich den Seitentitel hinzufügen werde. Die Sprache ist Englisch und ich weiß, dass Sie mehrere Sprachen hinzufügen können. Das ist jetzt wirklich praktisch. Ich füge meine Beschreibung hinzu, wenn du willst. Sie können auch einen Fabcon hinzufügen, das ist das kleine Logo, das hier im Browser angezeigt Sie können ein soziales Bild hinzufügen Jedes Mal, wenn Sie Ihren Link, Ihre Website, auf einer Social-Media-Plattform teilen , wird dieses Bild angezeigt Das stört mich jetzt nicht mehr, und das kann ich später tun Ich lasse es so stehen. jedoch gerne alles hinzufügen diesem Bild jedoch gerne alles hinzufügen, was Sie möchten. Stellen Sie einfach sicher, dass es sich um etwas handelt, das für Ihre Website relevant ist und dass es schnell als etwas erkennbar ist, das Sie selbst erstellt haben. Einige andere Einstellungen, die Sie hinzufügen können, wenn Sie ein Upgrade durchführen. Sie können auch einen Passwortschutz einrichten, um Ihrer Website diese Sicherheitsstufe zu verleihen diese Sicherheitsstufe zu , auch ohne sie hochzuladen Sie können hier Ihre Google Analytics-ID hinzufügen , um eine Verbindung zur Google Analytic-Website herzustellen. Dies ist sehr nützlich, obwohl Framer hier einen eigenen Analytics-Reiter hat. Sobald Sie Ihre Website veröffentlicht und mit dem Teilen beginnen, können Sie einige Daten zu den Besuchern in der kostenpflichtigen Ansicht sehen und sehen, aus welchen Quellen die Nutzer am häufigsten kommen und welche Seiten auf Ihrer Website am häufigsten besucht Schließlich habe ich noch erwähnt, dass Sie auswählen können, welche Version live ist. Zu diesem Zeitpunkt ist das Staging deaktiviert, was bedeutet, dass die neueste Version, die Sie erstellt haben , für alle Domains gilt Wenn Sie das Staging aktivieren, können Sie auswählen, welche der von Ihnen erstellten Versionen der Live-Version enthalten Da wir das erst heute gemacht haben, gibt es nur eine Version Wenn Sie jedoch Änderungen und Inhalte hinzufügen, können Sie auswählen, welche Version live ist und an welcher Sie gerade arbeiten Schließlich, und Sie haben gesehen , dass es nicht benötigt wird, können Sie auf eine kostenpflichtige Version von Framer upgraden Sie können mehr Dinge hinzufügen. Sie können unbegrenzt viele Seiten haben. Viele weitere Funktionen. Wir haben diese Website jedoch völlig kostenlos erstellt und Sie können sie völlig kostenlos unter einer Live-URL veröffentlichen. Als Ratschlag können Sie Ihre Website in einer kostenlosen Version erstellen. Und sobald Sie bereit sind, auf einer benutzerdefinierten Domain zu veröffentlichen und dieser weitere Funktionen hinzuzufügen, können Sie mit der Zahlung beginnen. Aber auch dies ist nur ein Ratschlag. Sie tun, womit Sie sich wohler fühlen. Sie sind jetzt, haben Sie jetzt ein Portfolio? Und es ist Zeit, es zu teilen. Egal, ob Sie Ihre benutzerdefinierte Domain verbunden haben oder nur die Framer-Domain verwenden, was völlig in Ordnung ist Oder wenn Sie Ihr eigenes Design oder das von mir bereitgestellte verwendet haben oder das von mir bereitgestellte verwendet haben Stellen Sie sicher, dass Sie Ihr Portfolio einreichen, indem den Link auf der Registerkarte „Projekt“ teilen , damit jeder es sehen kann. Wenn Sie irgendwelche Fragen zu den Lektionen haben irgendwelche Fragen zu , die wir bisher gemacht haben, lassen Sie es mich in der Diskussionsunterbrechung wissen und ich werde antworten. Denken Sie auch daran, dass es einige zusätzliche Lektionen geben wird. In der ersten geht es darum, wie man eine ansprechende Navigationsleiste mit einem schönen Hamburger-Menü erstellt eine ansprechende Navigationsleiste mit einem schönen Hamburger-Menü Dies ist jedoch völlig optional und Sie benötigen es nicht , um Ihre Website zu veröffentlichen vorerst keinen Stress, Machen Sie sich vorerst keinen Stress, stellen Sie sicher, dass Sie Ihr Portfolio einreichen, denn ich kann es kaum erwarten zu sehen, was Sie mit Framer erstellt haben 14. Schlussbemerkung: Herzlichen Glückwunsch zum Abschluss dieses Kurses. Stellen Sie sicher, dass Sie, bevor Sie gehen, Ihre Lebenswebsite teilen , indem Sie die URL in der Projektleiste hinzufügen. Und denken Sie daran, dass dies nicht das Ende der Straße ist. hat sich eine ganze Welt von Möglichkeiten Jetzt, wo Sie wissen, wie man Framer benutzt, hat sich eine ganze Welt von Möglichkeiten eröffnet Und nur für den Anfang, hier sind ein paar Dinge, die Sie auf der Website, die Sie gerade erstellt haben , verbessern können auf der Website, die Sie gerade erstellt haben , verbessern Zuallererst können Sie einen weiteren Haltepunkt für ein Tablet oder ein anderes Gerät hinzufügen , wie wir es mit dem Telefon getan haben Als Nächstes können Sie dem CMS weitere Felder hinzufügen , um Absätze mit Text, Bildern, Videos oder Links zu verwalten Bildern, Videos oder Links zu Und dann können Sie verrückt werden, indem Sie Animationen und Übergänge auf der Über uns- und Projektseite hinzufügen, wie wir es auf der Startseite getan haben. Das sind nur Untervorschläge, aber Sie können sich gerne die restlichen Funktionen ansehen , die Famer bietet Wenn du etwas anspruchsvolleres willst, denke daran, dass es zu diesem Kurs einige Bonuslektionen geben wird zu diesem Kurs einige Bonuslektionen Die erste davon, wie man mit dem Hamburger-Menü eine ansprechende Navigation erstellt mit dem Hamburger-Menü eine ansprechende Navigation Bleib dran. Aber vorerst muss ich nur noch einmal gratulieren und Ihnen vielmals dafür danken, dass Sie sich diesen Kurs angesehen haben.