Framer-Crashkurs: Veröffentliche deine Portfolio-Website

1. Einführung: Hallo, willkommen zu meinem Frame of Crash-Kurs. Mein Name ist Jeremy Mia und ich entwerfe seit zehn Jahren Marken und Websites. Ich möchte Ihnen zeigen, wie Sie damit Ihre eigene Portfolio-Website erstellen können. Und wenn Sie ein Designer sind, der mit der Entwicklung beginnen möchte , dann ist dies ein großartiger Kurs für Sie, denn ich werde Ihnen alle Grundlagen und Grundlagen zeigen und Ihnen zeigen, wie Sie Animationen hinzufügen und Typografie-Stile verwenden Im Grunde alles, was Sie wissen müssen, um Websites nicht nur für sich selbst, sondern auch für Kunden zu erstellen sondern auch für Kunden In diesem speziellen Kurs wird es sich um einen kurzen Kurs handeln, in dem Sie eine Portfolio-Website erstellen , die Sie beispielsweise an Kunden weitergeben können beispielsweise an Kunden weitergeben wir Ihre Portfolioteile haben werden. Es wird eine einfache einseitige Landingpage sein, und dann haben wir eine Projektseite, die wir erstellen werden. Und ich werde die gesamten Schritte aufschlüsseln. Ich werde dir meine Abkürzungen geben, meine Plugins, die ich gerne verwende, und dir einige andere Ressourcen und Websites geben , auf denen ich mich gerne inspirieren lasse. Ich werde dir zeigen, wie du die Website responsiv machen kannst, damit sie auch auf Mobilgeräten funktioniert. Also ja, wenn Sie ein Designer oder Entwickler sind und die Framer - oder Neo-Plattform lernen möchten, ohne Code zu kennen, dann ist dies ein großartiger Fall für Sie Melden Sie sich noch heute für den Kurs an und lassen Sie uns damit beginnen, eine großartige Website zu erstellen 2. Grundlagen von Framer: der ersten Lektion möchte ich Ihnen die Grundlagen und Grundlagen von Framer vorstellen und erläutern, wie Sie damit beginnen können Also verwende ich Framer auf meinem Desktop. Wenn Sie Mac OS verwenden, können Sie es dort herunterladen oder im Browser verwenden Ich habe es gerne in meinem Dokument, also verwende ich es auf meinem Desktop. Und hier ist der Backend-Workspace, so nennen sie ihn. Es hat also alle Ihre Projekte in diesem Arbeitsbereich. können Ihren Arbeitsbereich umbenennen, wenn Sie nach oben gehen , können Sie sehen, dass Sie sich in meinen Arbeitsbereichen Du kannst also auch einen Workspace hinzufügen. Vielleicht ist es ein separater Arbeitsbereich für Kunden oder vielleicht haben Sie ein Teammitglied, das einen separaten Arbeitsbereich verwendet . Sie können einen Arbeitsbereich hinzufügen. Sie können auch einen Ordner erstellen. Vielleicht haben Sie also bestimmte Projekte. Also habe ich zum Beispiel Kunden 2024 hierher gebracht, und ich habe hier einige Kunden-Websites, die ich erstellt habe. Ich habe noch einen Ordner für kostenlose Vorlagen, die ich von Websites oder dem Framer Store herunterlade , und dann hast du auch das Archiv Wenn du also etwas löschst, wird es hier angezeigt. Auf der linken Seite hast du auch dein Konto, sodass du dein Profil ändern kannst. Du hast die Sitzung mit den Workspace-Einstellungen. Wenn du auf Einstellungen klickst, kannst du Mitglieder einladen. Sie können sich auch Ihre Pläne ansehen. Wie du siehst, hast du Berechtigungen und Schriften, und du kannst den Namen des Workspace sehen. Du kannst das direkt dort ändern, du kannst sogar ein Bild hochladen. Also werde ich in die obere rechte Ecke gehen. Klicken Sie auf Neues Projekt. Wenn Sie das jetzt tun, können Sie oben sehen, dass Sie Tabs haben. Es ist also Figma oder sagen wir Illustrator sehr ähnlich, Sie haben verschiedene Tabs, und Sie können einfach durch sie blättern Nun, das ist Ihre Hauptleinwand oder Ihr Hauptarbeitsblock, Ihr wisst schon, Auf der linken Seite haben Sie Menüs. Sie haben also Seiten, Abschnitte. Sie haben auch die CMS-Sammlungen. Sie haben auch andere Elemente wie Countdowns, Ticker und Betten, Formulare, Symbole interaktive Dinge, was cool ist Und wenn Sie dann nach links oben gehen, haben Sie das Menü, Sie wissen schon, das Ansichtstool Datei bearbeiten Weißt du, geh das durch und sieh dir die Dinge an. Sie haben auch Lay, also haben Sie Rahmen, Zeilen, Spalten, Raster, Bilder, Videos, Sie haben auch Texte, Sie haben auch CMS und Sie haben Plug-ins in Framer eingebaut Ganz oben hast du deinen Seitennamen. Also kann ich dieses Portfolio eins nennen und es wird den Namen ändern und Sie können sehen, dass ich den kostenlosen Plan habe. Wenn du darauf klickst, gehe ich zu den Plänen über. Und dann sehen Sie auf der rechten Seite, wer es sich ansieht. Ich sehe es mir also an, Sie können jemanden einladen und ihm Zugriff auf bestimmte, Sie wissen schon, Dinge geben, wie zum Beispiel Sammlungen oder einfach nur das Design. Vielleicht möchtest du einschränken, was der Kunde sieht. Du kannst zum Beispiel den Projektlink kopieren und an einen Freund oder Kunden schicken, und er kann das genaue Design kopieren und es wird in seinem Arbeitsbereich platziert, was cool ist. Und das ist eine großartige Möglichkeit , Websites zu übertragen. Das mache ich, wenn ich Kundenprojekte übergebe. Da haben Sie eine Lokalisierung. Wenn du auf dieses Weltsymbol klickst, hast du mehr Seiteneinstellungen, also mehr von der Art von SEO, wie du hier sehen kannst. Und nur das Allgemeine: Sie haben die Favicons und den Passwortschutz sowie benutzerdefinierten Code, Sie für diese spezielle Website eingeben können Sie haben auch die Analytik oder die obere rechte Seite. Offensichtlich haben wir auf dieser Seite nichts als Analytik gemacht. Sie haben auch die Vorschau-Schaltfläche, damit Sie Dinge abspielen können, und dann haben Sie auch die Schaltfläche „Veröffentlicht“ , wenn wir mit dem Design fertig sind. Wenn wir jetzt hier auf das Design unserer Hauptseite klicken, die Hauptseite, die Startseite. Wir haben Seiten, Ebenen und Assets. Wenn du Alt eins, zwei und drei drückst , wechselt es, wie du sehen kannst, zwischen diesen Menüs hin und her. Wir haben Seiten, Ebenen und Elemente. Wenn Sie eine neue Seite erstellen möchten, klicken Sie einfach auf die Plus-Schaltfläche. Sie können eine neue Seite, eine CMS-Seite, erstellen, die eine automatische Sammlung für Sie hinzufügt, nur als Platzhalter , den Sie bearbeiten können Sie können auch einen Ordner hinzufügen und Seiten in Ordnern ablegen, was eine nette Funktion ist Wenn Sie zu Ebenen gehen, können Sie alle Ihre Ebenen sehen. Also deine Stapel, deine Formen, deine Elemente, was auch immer du auf dem Seitendesign hast, es wird im Ebenen-Menü angezeigt Dann haben Sie in Assets Komponenten, Stile und Code. Die Stile sind ähnlich wie in Figma, da Sie Textilien, Farbstile usw. haben , genau wie in Adobe Es ist, als hätte man Farbfelder oder Grafikstile . Es ist ähnlich Es ist nur, das meiste davon sind Farben, Typografie und solche Sachen . Dann hast du auch Komponenten Sie können also Komponenten erstellen, bei denen es sich lediglich um festgelegte Elemente handelt, die Sie erstellen Wenn es sich beispielsweise um eine Navbar handelt, wird sie auf jeder Seite angezeigt Es macht es einfach viel einfacher, macht es nahtloser, denn wenn Sie eine Änderung vornehmen, wirkt sich das darauf aus, wo sich die ganze Komponente befindet Wenn ich auf die Seite klicke, siehst du außerdem dein Design oder deine Style-Tools auf der rechten Seite. Sie haben also das Layout, Sie haben Effekte, Stil, also können wir die Farbe ändern, wie Sie sehen, wir haben Code-Overrides und auch Export, sodass Sie PNGs und JPEGs exportieren können, Dann haben wir auch die Breakpoints. Das sind also alle Grundlagen für diese Lektion. In der nächsten Lektion werden wir dieses Design erstellen, das ich in Illustrator erstellt habe Ich werde Ihnen zeigen, wie Sie diese und diese einfache Landing Page auch für ein Projektportfolio 3. Erstellen von Stilen: In dieser Lektion beginnen wir mit der Arbeit an der Portfolio-Homepage und der Erstellung des Hauptbereichs für Helden. Zuallererst habe ich mein Design in Adobe Illustrator, also das habe ich erstellt, und ich habe ein 1920-Pixel-Design erstellt Und für all den Text und die Dinge, die ich in Framer bearbeiten kann, brauche ich kein perfektes Design Und das Coole an Framer ist, dass es sich anfühlt, als würdest du in einem Design-Tool wie Figma oder Illustrator arbeiten einem Design-Tool wie Figma oder , weil die Designtools sehr ähnlich sind und es nur eine einfache Benutzeroberfläche hat Also werde ich auf diese obere Leiste klicken und Sie können sehen, dass dort Desktop 1.200 steht Das ist der Desktop-Haltepunkt. Bei Breakpoints handelt es sich im Grunde genommen darum, dass sich das Design ändert, wenn die Browsergröße eine bestimmte Auflösung erreicht die Browsergröße eine bestimmte Auflösung Wenn Sie also den Breakpoint auf beispielsweise 450 Pixel für ein Mobiltelefon verkleinern , ändert sich das Design wahrscheinlich in ein einspaltiges Sie können also mehrere Haltepunkte haben. Sie können sehen, dass Sie die Plus-Taste drücken und, wie Sie sehen, einen Telefon- oder Tablet-Haltepunkt erstellen können Aber vorerst werde ich das einfach löschen, weil ich es nicht brauche Ich werde darauf klicken und nach oben rechts gehen, und wir können zum Breakpoint-Bereich gelangen Ich ändere die Peitsche auf 19, 20 Pixel und dann auf die Höhe, wir können mich vielleicht 1080 einstellen, weil ich glaube , das war die Höhe Jetzt haben wir diesen Desktop. Natürlich klicken Sie und Sie können die Höhe auch herausziehen. Eines der ersten Dinge, die ich tun werde, ist Stile zu erstellen, nur um mir etwas Zeit zu sparen. Das, was ich dafür verwende, ist Fig Tree, und ich habe auch einige Ressourcen. Ich habe ein Logo und einige dieser Bilder, die ich bereits heruntergeladen habe. Und dann haben wir diese Farbe hier. Ich kopiere die Farbe, gehe zu meinen Assets und gehe zu Stilen. Jetzt können Sie innerhalb von Stilen bestimmte Stile für Überschriften und Absätze hinzufügen Sie haben Linkstile, Blockzitate, Farben und CMS Ich werde einen neuen Farbstil verwenden und den Hex-Code aus Illustrator kopieren, und wir werden das B schwarz oder so nennen und erstellen, und es wird automatisch ein Ordner erstellt, was cool ist Und dann werde ich einfach weitermachen und die Hex-Codes von hier kopieren und diese anderen Farben erstellen Also habe ich weitergemacht und Sie können sehen, dass ich jede einzelne Farbe erstellt habe . Sie können jederzeit zu diesen Stilen zurückkehren und sie ändern und das wird die globalen Stile für alles ändern. Ich habe also mehrere Designs auf meiner Website mit dieser grünen Farbe und ändere die grüne Farbe in die rote. Es wird sich auf all die Objekte auswirken , auf die dieser Stil angewendet wurde. Wir werden dasselbe für Text tun. Ich werde Text schreiben und ich werde mich für Überschrift eins entscheiden. Und für Überschrift eins werde ich das tun. Also feigenbaum fett. Also habe ich mich auf den Weg gemacht und lass uns den Feigenbaum sehen. Sie haben es wunderschön. Also werde ich das auswählen und wir wollen das Gewicht auf fett ändern. Sie können zu Kursiv wechseln. Du hast Farbe, verwandle sie. Normalerweise mag ich es, Großbuchstaben zu schreiben. Du hast Dekorationen, Ausrichtungswerkzeuge, Striche , Balance und Variablen mit offener Schrift Sie haben diese Tools wahrscheinlich gesehen, wie in Figma, also sollten Sie sie kennen Wir haben das H, und dann werde ich mit einem Absatz weitermachen und mit diesem, Feigenbaum Medium für Körper und wir wollen Medium Sie können auch schreiben, auf die Stile klicken und sie duplizieren oder umbenennen. Das Gleiche wie bei den Farben. Sie können dies auch für die Farben tun , nur um etwas Zeit zu sparen. Wir haben also den Haupttext 23. Also gehen wir runter zur Größe und wir wollen sie auf 23 ändern . Und was die Größe der Überschrift angeht, war das etwa das Doppelte. Ändern Sie also Ihre Größe auf 80. Oh, ich mache noch eine Körperkopie. Wir können es Liste nennen. Also für diese Liste denke ich, dass sie die gleiche Größe hat. Okay, wir verwenden dasselbe. Dieser, fett gedruckte 20. Nein, für diese Mutigen. Also werden wir uns für Zwischenüberschriften entscheiden. Feigenbaum, wir werden halbwegs mutig sein. Und du kannst sogar die Farbe hinzufügen, Grün, und dieses Mal können wir etwa 26 haben, und ich kann sie Grün, und dieses Mal können wir etwa 26 haben, und ich kann per Drag-and-Drop nach oben verschieben, um es sauberer zu machen. Ich habe also meine Styles da, das sollte mir etwas Zeit sparen. Die andere Sache, die ich gerne mache, ist, alle meine Bilder aus meinen Ordnern zu ziehen und sie in Framer zu bringen In Illustrator exportiere ich sie normalerweise einfach. Ich drücke Strg+Shift OT E , um zu den Assets zu gelangen, wie Sie sehen können, und Sie können alle Assets auf einmal exportieren alle Assets auf einmal Ich kann das Logo auswählen, rechten Maustaste klicken und auf Cc klicken, um als einzelnes Asset zu exportieren, und Sie können sehen, dass ich es hier einfügen und dann als JP, PNG, PDF oder SVG oder sogar als Web-P exportieren kann, was cool ist. Illustrator hat also eine gute Funktion in Figma. Sie können etwas Ähnliches tun. Sie exportieren einfach, wenn Sie ein Bild auswählen. Klicken Sie mit der linken Maustaste auf die Bilder und ziehen Sie sie einfach per Drag & Drop hinein. Denken Sie daran, wie Sie sehen können, ist der Upload auf 5 Megabyte begrenzt Sie müssen also Ihre Website aktualisieren oder die Bildgrößen reduzieren Normalerweise verwende ich etwas wie Topas-Labore , um die Größe zu reduzieren Sie können also sehen, dass ich diese Bilder habe. Ein schnelles Plug-In, das ich gerne verwende, heißt Tidy. Du kannst also Tidyup sehen. Ich werde darauf klicken Und wenn Sie viele Symbole oder viele Objekte oder Formen oder so etwas haben Objekte oder Formen oder , können Sie es aufräumen Du kannst diesen Stecker also hier sehen. Sie können es in ein horizontales Raster ändern. Sie ändern die Position, machen den Abstand, vielleicht habe ich nicht 25 oder so, und dann klicken Sie auf Aufräumen, und Sie können sehen, dass all diese Bilder in eine schöne horizontale Form gebracht werden , oder wenn Sie nicht horizontal wollen, können Sie ein Raster erstellen, wie Sie sehen können, und das wird einfach geändert Es macht es also nur ein bisschen übersichtlicher. Das ist ein cooles Plugin, das du verwenden kannst, nämlich 4. Entwerfen der Startseite: Nun, also werde ich weitermachen und mit der Erstellung des Designs beginnen , das wir hier haben. Klicken Sie darauf, das Hauptdesign, gehen Sie zu meinem Füllstil und klicken Sie auf die Farben, da Sie das sehen können. Ich gehe zum Layout. Und ich möchte einen Rahmen erstellen, wie Sie sehen können. Also komprimiere ich F und ziehe es dann einfach und wir können sehen, dass wir einen Rahmen haben. Und dann oben rechts habe ich mein Ausrichtungswerkzeug, damit ich zentrieren kann, um sicherzugehen, dass es zentriert ist. Und dann kannst du die Ecke abrunden wie du siehst, da ist ein kleines weißes Ding. Das Gleiche gilt für eine illustrierte Figur. Du kannst es einfach so abrunden. Oder wenn du in deinen Styles auf die rechte Seite gehst, wo Radius steht. Sie können sehen, dass ich es dort ändern kann, oder ich kann nur bestimmte Ecken abrunden, wenn ich will. Einfach abrunden oder vielleicht um die 30 Pixel. Und dann werde ich die Farbe dort auf diese Farbe ändern . Wir haben hier also die Grundlage unseres Designs. Jetzt gehe ich zu meinem Ebenen-Panel. Sie können sehen, Sie haben den Desktop und dann haben wir den Rahmen. Was wir tun können, ist einen Stapel hinzuzufügen. Sie können also mit der rechten Maustaste klicken oder wir können die Tastenkombination Control Enter verwenden die Tastenkombination Control Enter um einen Stapel hinzuzufügen, oder Sie können einen Rahmen hinzufügen. Ein Stapel ist also im Grunde wie eine Flexbox. Sie können ihn manipulieren, um Spalten zu erstellen, und es ist besser für einen Liter. Es ist dasselbe wie beim automatischen Layout, aber in Bezug auf das Internet verwendet es dafür offensichtlich HML und Flexbox Also werde ich einen Stapel innerhalb des Frames hinzufügen. Wie Sie sehen können, können Sie Rahmen und Stapel auch per Drag-and-Drop ineinander Und innerhalb dieses Stapels werde ich daraus ein Raster machen Sie können ein Raster mit zwei Spalten und nur einer Zeile erstellen. Gehen Sie also auf der rechten Seite zur Layoutseite und Sie können einfach zwischen den Rastern wechseln, wie Sie sehen können. Und dann werde ich mein Hauptbild hierher ziehen. Ich werde es einfach so in diesen Stapel ziehen, und es wurde bereits in diese Spalte hinzugefügt , was wir tun werden, ich werde das Logo hinzufügen. Ich werde das Logo ziehen. Wie Sie sehen können, können wir es verkleinern indem wir es so ziehen Die Hauptsache ist , dass Sie die Dinge in einen Stapel legen möchten , damit es übersichtlich ist . Deshalb drücke ich die Eingabetaste, um einen Stapel hinzuzufügen Dieses Logo befindet sich in einem Stapel, jetzt können wir die Position ändern. Also oben rechts können wir die Position anpassen. Welches Objekt sich auch immer in diesem Stapel befindet, es wird in diese Kiste verschoben. In diesem Fall haben wir zwei Spalten. Also innerhalb dieser Spalte an der Seite wird es sich innerhalb dieser bewegen. Also werde ich den Stapel verschieben, wie Sie sehen können, wir können ihn in die Mitte legen oder wir können ihn auf die Seite legen, und wir wollen sicherstellen, dass er sich auf Relativem befindet. Es bezieht sich also auf das übergeordnete Grid. Welche Anpassungen wir auch immer am äußeren Raster vornehmen, es wird das Logo und die Bilder in dieser Spalte oder im Stapel anpassen . Habe das Logo. Nun, was ich tun möchte, ich möchte dieses kleine Schlüsselelement E hinzufügen. Also ich gehe zu Sie können T für den vollen Text drücken , um etwas Text hinzuzufügen. Du drückst T und klickst dann mit der linken Maustaste und tippst, sollte es dort eingefügt werden. Und ich werde den Text weiß machen , weil du ihn gerade nicht sehen kannst. Ich werde es einfach in den Stapel ziehen. Stellen Sie sicher, dass es sich in Ihren Ebenen, die Sie sehen, innerhalb des Stapels befindet, wie wir sehen können, und Sie möchten das Logo auf der linken Seite dort platzieren. Ich bin bereit zu tun, dass wir den Text auch duplizieren können, also werden wir diesen Text bekommen. Ich gehe zu Illustrator und kopiere das und füge es ein, weil der ganze Text in einem Stapel ist Ähnlich wie bei Figma, wo es ein Ordnungslayout ist, kann ich buchstäblich einfach den Abstand anpassen und sehen, ich kann ihn einfach ziehen, und schon wird dieser Abstand angepasst Ich mag Größe 80. Ich doppelklicke auf das Logo, um es zu verkleinern. Und ich werde etwas Polsterung hinzufügen. Gehen Sie also auf die rechte Seite, klicken Sie auf Layout und wir haben Polsterung Ich werde oben eine Polsterung hinzufügen, also möchte ich auf das klicken, was Sie neben den beiden Quadraten sehen können Mit einem können wir nur die Größe von oben, unten links oder rechts anpassen In diesem Fall werde ich also die oberen 50 Pixel verwenden. Es ist ein bisschen zu viel. Vielleicht mache ich 25, was toll ist. Jetzt haben wir also diesen Stapel, was cool ist, Verteilung der einzelnen Texte. Wenn Sie also anfangen, wird es nach links verschoben, wenn Sie es zentrieren oder zentrieren, oder wir können den Abstand dazwischen oder den Abstand um oder den Abstand gleichmäßig machen . Das Herumspielen, wie Sie es machen möchten, in diesem Fall werde ich es einfach in der Mitte belassen, und dann werde ich mit dieser Lücke wie dieser herumspielen . So kannst du den Abstand sehen. Doppelklicken Sie in den Text, um ihn zu bearbeiten. Stellen Sie also sicher, dass Sie den Text bearbeiten. In Ordnung. Und wie Sie sehen können, gehe ich runter zu den Stilen, den Textilien, und ich habe meine gespeicherte Überschrift. Ich habe die Überschrift, die Unterüberschrift und den Haupttext, wie Sie sehen können Dafür mache ich den Hauptteil und muss den Zeilenabstand anpassen Damit ich den Stil tatsächlich anpassen kann. Wenn du als Nächstes in den Textilien gehst, bewege deine Maus darüber und du wirst dort den Bearbeiten-Button sehen. Ich werde darauf klicken und wir können den Buchstaben anpassen. Also mache ich den Buchstaben Null, damit die Unterschneidung nicht angepasst wird. Dann der Zeilenabstand oder Zeilenabstand, wenn Sie ein Grafikdesigner sind, können Sie sehen, dass wir die Linie so anpassen können Ich habe diesen Text bekommen, aber er sieht nicht genau so aus, wie wir es wollen. Ich muss also weitermachen. Ich werde zu den Stilen zurückkehren und die Farbe ändern, also haben wir hier die richtige Farbe. Und was wäre , wenn ich diesen Text hier einfach anpassen, ihn etwas kleiner machen wollte ? Was wir also tun können, ist, im Handumdrehen einen anderen Stil zu erstellen, indem ich Handumdrehen einen anderen Stil zu erstellen, indem in den Textilen auf der rechten Seite auf „Neuer Stil Textilen auf der rechten Seite auf können wir „Absatz und „Textkörper klein“ sagen und auf Bearbeiten klicken Wenn Sie doppelklicken, sollten Sie es umbenennen können , wie wir sehen können Ich nenne es BoliSmall, klicke auf Bearbeiten und dann werden wir es verkleinern Vielleicht 18 und statt Medium wir regulär, vielleicht machen wir es so 16. Wir haben diesen speziellen Text mit Body Small und diesen Text mit Body. In demselben Textfeld funktionieren also zwei verschiedene Stile. Es ist also wirklich einfach, diesen Boom zu machen, wie Sie sehen können. Also, sobald wir unseren Hauptteil hier haben, werde ich noch drei weitere Stapel hinzufügen Also, im Hauptstapel hier haben wir das Logo. Wir haben das Projekt und lassen Sie uns eine Verbindung herstellen. In diesem Fall gehe ich also zu Ebenen und drücke die Eingabetaste. Um einen weiteren Stapel zu erstellen, möchte ich dasselbe auch für die anderen beiden Textblöcke tun. Jetzt werde ich in diesem Stapel einfach weitermachen und hier etwas Text einfügen. Und was ich tun möchte, ist, diesen Stapel in eine vertikale Richtung zu bringen . Und ich werde das ganz nach oben bringen, einfach so. Cool. Jetzt können wir sehen, dass wir auch mit der Lücke herumspielen können. Aber zuerst müssen wir diesen Stapel hier ändern. Also, was die Höhe angeht, werde ich sie so ändern, dass sie füllt, und sie sollte den ganzen Raum auf dieser Seite des Hauptstapels ausfüllen . Also, was ich jetzt auch tun werde, ich werde diesen Stapel auswählen. Tut mir leid, ich möchte es nach oben ausrichten, und ich werde auch nur etwas Abstand von den oberen 50 Pixeln hinzufügen , und von links werden wir einfach 50 Pixel Ich werde jetzt, wenn ich eine Lücke hinzufüge, wie Sie sehen, einfach von der kleinen violetten Trennlinie dorthin ziehen Jetzt können wir sehen, dass dieser Text nach unten geht und wir haben hier diese nette Spalte Ich werde links ausrichten, sodass Sie auf der rechten Seite des Layoutfensters auf „Links ausrichten“ klicken können. Dieser Text sollte also links von der Box oder links vom Stapel stehen. Jetzt werde ich den Stil dieses Textes auf die Unterüberschrift ändern dieses Textes auf die Unterüberschrift Eines der coolen Dinge ist, dass Sie im Ebenenbedienfeld auf einen Stapel klicken und den Stil auch kopieren können Sie können das CSS, die Effekte usw. kopieren. Sie können also alles kopieren und in einen anderen Stapel einfügen Wenn ich es also hier einfüge, kannst du sehen, dass es derselbe Effekt dupliziert wurde , den ich bereits in diesem anderen Stapel gestaltet habe , und ich mache das auch für den anderen Das Einfügen wird also zum Einfügen-Stil. Es gibt ein Shortcakey-Steuerelement OV. Und lassen Sie mich einfach weitermachen und den Text dort einfügen. Und jetzt können Sie sehen, dass wir diesen Effekt haben. Sie können auch auf diese Weise ziehen und sehen, dass Sie das nicht im Ebenenfenster tun müssen . Tun Sie das. Also, cool. Jetzt haben wir die drei Spalten und alles sollte ausgerichtet sein. Offensichtlich ist da das Logo drin, also wird die Ausrichtung etwas abweichen. Wir können also einen weiteren Stapel oder eine andere Box erstellen , und wir können definieren, und ich werde das einfach an der Box ausrichten. Es sollte jetzt eine Linie sein. Was ich jetzt für die Projekte tun möchte, ist, dass es ein Pop-up gibt , in dem, wenn Sie mit der Maus darüber fahren, ein Teil des Projekts angezeigt wird, und wenn Sie es als Link anklicken, werden Sie zum Projekt P Also werde ich hier einen weiteren Stapel daraus machen. Also kontrolliere es Enter. Und Sie können sehen, dass die Ausrichtung es in die Mitte bringt. Gehen Sie einfach zu verteilen und verteilen, ändern Sie es auf Start, sodass es am Anfang des Stapels beginnt. Lass mich das einfach kopieren. Und entschuldigen Sie sich, machen Sie es vertikal, und dann können wir das nach links ausrichten. Und diesen Text, ich werde ihn auf den normalen Körperstil umstellen . Und für diesen werde ich es als eines meiner Projekte Sensorseiten nennen . Nun, was ich tatsächlich tun kann, ist in den Ebenen, Sie sehen können, es ist nur ein Text. Aber was wir jetzt tun können, ist , einen Link daraus zu machen. Also gehe ich in die obere rechte Ecke und klicke auf den Plus-Link, und wir können ihn in eine Seite einfügen. Weil du diese Seite nicht hast, werde ich gehen 5. Interaktionen und Effekte: Auf dieser Folie werde ich Ihnen schnell zeigen, wie Sie der Site einige Hover-Interaktionen und Animationen hinzufügen einige Hover-Interaktionen und Animationen können, damit sie glatt aussieht Aber das haben wir. Jetzt möchte ich einen Overlay-Effekt hinzufügen Also gehe ich zu Overlays und klicke auf Relativ, du siehst, es ist ein Popover. Ich werde darauf klicken Und was Sie auf diesem Overlay tun können, ist , auf die rechte Seite zu gehen und daraus ein Bild zu machen Also werde ich auf die Schaltfläche zum Füllen klicken, statt auf die Füllung, Sie können natürlich Farbverläufe machen Du kannst dort ein paar coole Sachen machen, aber ich werde auf das Bild klicken Und dann werde ich herausfinden , dass mein Projektbild so aussieht, was cool ist. Wir haben da die abgerundeten Ecken drauf und was wir eigentlich machen können. Wenn ich es jetzt schnell teste, können Sie diesen Text sehen, wenn ich mit der Maus darüber fahre. Es wird das Bild auftauchen, was cool ist. Und dieser Text, weil der Textlink keinen Stil hat, werde ich auf den Link klicken. Gehen Sie im Link-Bereich nach oben, klicken Sie auf Bearbeiten, den Link-Stil und wir können dies ändern. Also ich möchte gehen, wir könnten es grün machen. Ich werde auch einfach bei der hellen Farbe bleiben , weil das die gewünschte Textfarbe ist. Wir wollen keinen Unterstrich weil ich finde, dass er kitschig aussieht Aber auf Hova können wir es grün machen und ich denke, und ich denke Wenn ich auf Play drücke, kannst du sehen , dass es so aussieht. Cool. Der Text ist geändert, und dann kann ich jederzeit zurückgehen und ihn bearbeiten und dann übergehen, das Ein- und Auslesen vereinfachen. Gehen wir zurück. Sehr glatt. Bum. Geil. Wir können auch einen Hover-Effekt hinzufügen Wenn Sie in das Effektfenster gehen, klicken Sie mit der linken Maustaste darauf. Sie werden Hover sehen Ich kann auf Hover klicken, und was wir tatsächlich tun können , ist, dass Sie den Maßstab die Deckkraft ändern können Es liegt wirklich an Ihnen, was Sie tun möchten. Du kannst es drehen, du kannst es auch schräg stellen Wenn du willst. Also kannst du mit jedem von denen herumspielen. Sie können es ausgleichen. Sie können einen Schatten hinzufügen, und Sie können auch die Beschleunigung ändern. Also statt Frühling habe ich es lieber auf Leichtigkeit, und dann kannst du mit diesen Balken herumspielen , um es etwas glatter zu machen Du kannst die Verzögerung ändern, was auch immer du willst. Ich mache vielleicht eine Rotation von, sagen wir, minus zwei. Und wenn ich jetzt die Vorschautaste drücke und meine Maus hier drüber halte, können Sie sehen, dass es sich ein wenig dreht. Es macht den Ha-Glow-Effekt und dann erscheint auch das Bild Wenn ich dann darauf klicke, wird es zu meiner Portfolio-Seite weitergeleitet, wie Sie sehen können Natürlich habe ich es noch nicht gestylt, aber so wirst du das machen Und jetzt müssen wir das nur noch duplizieren, damit wir das, du weißt schon, Keystone Scalable nennen können Sie können also einige andere Projekte haben , die ich in das CMS übernehmen muss Das Coole an Framer ist, dass Sie Effekte tatsächlich übereinander stapeln können , sodass ich einen weiteren Effekt hinzufügen kann Sie können Loops hinzufügen, ziehen und drücken. Du weißt schon, du kannst eine ganze Menge Dinge tun. Ich gehe zurück zum Overlay und ich möchte auf das Overlay klicken, und Sie können sehen, dass wir die Position tatsächlich ändern können die Position tatsächlich ändern Ich kann es also bewegen und auch drehen. Wenn ich die Maus auf die Ecke setze , können wir es drehen, sodass Sie vielleicht möchten, dass es so aussieht Wenn ich eine Vorschau ansehe und jetzt meine Maus darüber bewege, kannst du sehen, es sieht anders aus als zuvor. Es kommt an der Seite heraus, während diese einfach unten herauskommen. So passen Sie das Aussehen des Pop-Ins an. Und dann hat das Overlay natürlich tatsächlich einen Erscheinungseffekt, sodass Sie sehen können, wie der Effekt erscheint, wenn es verblasst, oder es kann skaliert werden, Sie wissen schon, wir können die Deckkraft ändern, Ich möchte den Federweg auf Easing umstellen und wir können ihn anpassen, Easing-In und Out Aber ich lasse mich einfach ein - und ausziehen, das ist in Ordnung. L Es ist glatt und es funktioniert. Einfach rein und raus. Cool. Also lass mich einfach wieder spielen. Du kannst es sehen. Sie können sehen, wie es langsam ein bisschen heranzoomt, als hätte es diesen Skalierungseffekt Sieht aus, es ist ein bisschen langsam für mich. Was wir also tun können, ist die Zeit zum Nullpunkt zu machen. Gehen wir 2 Sekunden, und dann mache ich dasselbe auch für den Ausgang. Okay, der ist also auch 0,2. Also lass uns zurückgehen. Also ist es ein bisschen schneller. Super cool. Ich liebe das. Du kannst also ein anderes Schicksal haben als alle anderen. Hey, alles was du tun musst, ist einfach in jedes dieser Overlays zu gehen und einfach das Bild zu ändern Und dann können Sie den Effekt immer einfach kopieren. Wenn ich also Effekte kopieren gehe, klicke ich mit der rechten Maustaste auf den anderen und dann gehe ich zum anderen Overlay, klicke mit der rechten Maustaste darauf, und wir wollen Effekte einfügen Es werden also dieselben Effekte kopiert, sodass ich die Lockerung nicht noch einmal machen muss . Also, Bum, Bum und Bum. Also du kannst sehen, dass es ein bisschen fehlerhaft ist. Offensichtlich wäre es auf der veröffentlichten Website nicht so fehlerhaft Bum, bum. Diese haben keinen Hover Das muss Ha hinzufügen. Das ist cool. Und so fügt man diesen kleinen Effekt hinzu. Es fügt Ihrer Website nur diese kleinen Details hinzu. Das Hinzufügen von Animationen und kleinen Interaktionen kann einen großen, großen Unterschied machen. Jetzt müssen Sie nur noch diesen Text oder diese Stapel in die anderen Spalten kopieren , und dann können Sie ihn einfach nach Ihren Wünschen anpassen Also haben wir ein paar kleine Interaktionen gemacht. Wie wäre es mit dem Hinzufügen einiger Animationen zum Gesamtrahmen? Was wir tatsächlich tun können, ich werde den Hauptrahmen auswählen. Und ich werde mich mit Effekten befassen und ich möchte PR machen. Auf einem P können Sie also auf einem P beim Scrollen, auf einer Ebene in der Ansicht oder auf einem Abschnitt in der Ansicht arbeiten. Wenn du also durch das Bild scrollst und es angezeigt wird, passiert etwas und es findet eine Aktion oder ein Auslöser statt Wir möchten, dass du siehst, dass es verblassen kann. Ich kann rutschen. Ich werde von unten gleiten, nur um dir den Effekt zu zeigen. Und ich möchte etwas lockern, aber lassen Sie uns diese Kurve vielleicht etwas stärker betonen Kurve vielleicht etwas stärker Und die Zeit wird vielleicht 3 Sekunden dauern. Und dann drücke ich Play. Jetzt können Sie sehen, dass es geladen wird, es ist ein bisschen schnell, also lassen Sie uns es einfach ein bisschen verlangsamen Wir kehren zur Lockerung zurück und machen 0,5 Sekunden Sie können auch eine kleine Verzögerung hinzufügen, also wenn ich eine Verzögerung von 1 Sekunde hinzufüge Die Zeit gibt also an, wie lange die Animation läuft, wie lange es dauert, bis die Animation abgeschlossen ist. Und dann ist Verzögerung eine Verzögerung bevor die Animation oder der Effekt beginnt. Wenn wir jetzt zur Vorschau zurückkehren, können Sie sehen, dass sie viel langsamer ist, aber das Ganze gleitet von unten nach oben. Ein ziemlich einfacher Effekt, aber er macht ihn einfach viel cooler. Und dann können wir weitermachen und jedem der Stapel Effekte hinzufügen jedem der Stapel Effekte Also kann ich den Stapel auswählen, zum Effekt wechseln und wir können wieder ein P machen Und ich werde den Frame-Effekt kopieren. Denken Sie also daran, mit der rechten Maustaste auf Effekte kopieren und kopieren zu klicken. Und dann füge ich sie einfach zu den Stapeln hinzu, damit wir Effekte einfügen können Ich gehe jetzt Effekte einfügen und Effekte einfügen. Wenn wir jetzt spielen, bumm, kannst du sehen, wie sie alle auftauchen. Aber was ich tun möchte, ist eine kleine Verzögerung bei den Stacks hinzuzufügen , also dann etwas langsamer fahren Also werde ich zum Übergang übergehen. Dieser kann eine Verzögerung von zwei Sekunden haben, dieser vielleicht 3 Sekunden, wie Sie sehen können, es ist anders und dieser vielleicht 4 Sekunden. Ich werde auf Beute klicken. Und einfach so, es ist wirklich einfach Bum, Bum und Bum. Cool. Ich liebe das. Das sieht toll aus. Es geht ihnen gut. Also können wir dem Bild auch etwas hinzufügen, und wir werden das alles anpassen. Also werde ich den ganzen Text aktualisieren und dann werden wir daran arbeiten, das Portfolio fertigzustellen 6. CMS-Kollektion: Die Seiten und klicken Sie auf Plus. Und wir wollen eine neue CMS-Seite erstellen. Ich werde auf Beispiel hinzufügen klicken und es sollte mit der Erstellung des CMS beginnen. Und hier werden wir all unsere Portfolioprojekte platzieren . Wenn wir also einfach die Daten zum CMS hinzufügen, füllen wir automatisch eine Seite mit dem neuen Projekt. Also werde ich auf dieses klicken und wir können alle Details auf der rechten Seite sehen. Sie haben den Titel, den Slug , der Teil der URL ist, das Datum, das Bild, die Kategorien und den Inhalt Wir können diese CMS-Sammlung natürlich bearbeiten. Bearbeiten Sie die Felder, indem Sie nach oben gehen. Da ist eine Schaltfläche, ein kleiner Pfeil. Klicken Sie darauf und wir können diese Felder tatsächlich ändern, wie Sie sehen, sodass sie erforderlich sind. Sie können den Platzhalter ändern. Sie können daraus einen Textbereich machen. So können Sie all diese verschiedenen Kategorien anpassen. Sie können auch oben auf diese kleine Plus-Schaltfläche klicken und Felder hinzufügen. Es kann also einfacher Text sein, es könnte eine Galerie, ein Schalter, eine Zahl, eine Datei sein Sie können auch auf andere Artikel verweisen. Aber ich möchte nicht zu tief gehen. Im Moment klicke ich auf Erste Schritte und wir nennen das Sense Pay. Ich werde hier auf dieses Bild klicken und wir werden das Bild ändern. Ändert auch Texte. Ich werde diesen Text loswerden und ihn dann auf die Website bringen. Also habe ich auf der rechten Seite einen Klick auf Veröffentlichen , das ist in Ordnung Und jetzt haben wir ein CMS, und ich doppelklicke auf die linke Sammlung und nenne sie Portfolio Kategorie auch. Darüber müssen wir uns keine Sorgen machen. Ich kann das einfach löschen. Da es in einigen Fällen verwendet wird, wird es vorerst nicht gelöscht, aber das können wir einfach belassen. Wenn ich jetzt einfach zurückgehe, können Sie sehen wie die Portfolio-Blogseite tatsächlich aussieht. Wir können es also Portfolio nennen. Richtig? Das ist also eine CMS-Seite. Und wie Sie sehen können, wenn Sie auf die Seite klicken , möchte sie genau das, was sie möchte. Also müssen wir das Design anpassen und es so aussehen lassen. Aber ich gehe zurück zur Startseite. Nun, was wir tun wollen, ich gehe zurück zum Link und wir können den Link zum Portfolio und zum Slug setzen Ich gehe zum CenSAP Wie Sie sehen können, klicken Sie auf diesen Slug und er wird zu allen Portfoliostücken weitergeleitet , die Sie in dieser Sammlung erstellt haben Also kann ich auf das von Censap klicken, was cool ist. Was ich tun möchte, ist, naja, Sie können sehen, dass der Text abgeschnitten ist Was wir tun können, ist eine Mindesthöhe hinzuzufügen. Also gehe ich zu Min Max. Es steht hier. Klicken Sie auf diesen Button. Wir werden auf die Mindesthöhe klicken. Die Mindesthöhe sollte mindestens 25 Pixel betragen. Das ist also das Minimum, das dieses Textfeld aufnehmen kann, und so verhindern Sie Probleme, wenn Dinge skalieren. Wenn Sie beispielsweise auf Mobilgeräte wechseln, stellen Sie sicher, dass es lesbar ist , damit es bei dieser Größe, der Mindestgröße, bleibt Wenn Sie die Maximalgröße angeben, gibt es eine Grenze dafür, wie groß der Text oder das Bild in dieser Statistik skaliert werden kann 7. Portfolio-Seitendesign: In dieser Lektion werden wir unsere Projekt-Landingpage mithilfe der CMS-Funktionen in Framer erstellen unsere Projekt-Landingpage mithilfe der CMS-Funktionen in Framer Wir haben also unsere Startseite, genau so, wie sie aussieht. Jetzt gehen wir zum Portfolio. Wenn Sie also auf die Hauptportfolio-Seite klicken, ist dies die CMS-Sammlung. Sie können den Text also hier sehen. Es ist nur der normale Blog, aber wir versuchen nicht, einen Blog zu erstellen, wir wollen nur Portfolio-Seiten. Also werde ich auf Portfolio zwei klicken. Siehst du, das Symbol wird so aussehen wie ein Stapel Münzen. Das ist die CMS-Sammlung. Aber diese Seite ist Sensei Pay, und oben links können Sie im Seitenbereich sehen, oben können Sie sehen, dass dort CenSep steht. Wenn ich auf diesen Link und dann auf Keystone klicke, wird zur anderen CMS-Sammlung gewechselt Um also auf das CMS zuzugreifen, möchten Sie zum Hauptmenü neben Text gehen und einloggen, Sie möchten auf Text gehen und einloggen, Sie möchten Und wir haben hier zwei Einträge. Wir haben das Sensei Pay-Projekt und dann das Keystone-Projekt. Und wir können noch mehr hinzufügen. Fw, wir behalten einfach die beiden Projekte. Ich gehe zurück, und sobald wir eine Änderung am Design der Seite im CMS vorgenommen haben, gilt sie für dasselbe Design und dieselbe Ebene für alle anderen neuen Projekte, die wir hinzufügen Ich werde hier reingehen und mit dem Entwerfen beginnen. Also muss ich vielleicht ein paar neue Stile machen. Ich werde einen neuen Stil kreieren. Dieses H ist dunkel, also nehme ich ein H, aber ich nenne es H eins weiß. Und dann ändere ich für diesen die Farbe so. Die anderen, wir können die anderen Stile verwenden. Aber wir müssen das Design so gestalten. Ich gehe auf die Startseite und ich kann den Frame tatsächlich kopieren. Ich gehe also zu meinen Layern. Ich werde diesen Frame kopieren. Also werde ich mir einfach diesen Stapel schnappen und ihn in den Rahmen bringen. Wir haben also diese Grundrahmenebene, wie Sie sehen können. Wenn Sie also den Text bearbeiten möchten , bevor wir das Layout aktualisieren, können Sie darauf doppelklicken und Sie gelangen zur CMS-Sammlung, die in der rechten Seitenleiste geöffnet ist, und wir können den Text hier anpassen. Ähm, und wenn Sie auf Inside drücken, können Sie sehen, dass das aktualisiert wird. Die Hauptsache ist natürlich, dass es am besten ist, einfach im CMS zu aktualisieren , anstatt es direkt auf der Seite zu tun, und dann wirkt sich das auf diese Änderungen aus, sodass Sie die Bilder usw. ändern können. Ich werde diesen Stapel einfach anpassen und ihn einfach mithilfe der Boxen ziehen, um es wirklich einfach zu halten Und jetzt haben wir das Bild dort oben im Design, und wir wollen nicht, dass die Unterseite abgerundet wird. Für dieses Bild gehe ich also zum Radius und klicke auf die vier kleinen Linien und runde nur die obere linke und die obere rechte Ecke ab. Ich glaube, es sind ungefähr 25. Da es sich also bereits im Rahmen befindet, müssen wir es nicht einmal abrunden. Das kann man sehen und dieser Unterteil ist ein bisschen flach, was toll ist. Was ich jetzt tun werde, ist, dass wir diesen Text nicht einmal brauchen. Ich kann das einfach löschen, wie Sie sehen können. Und jetzt ist dieser Absatz zu lang, also muss ich einen neuen Stil wählen, Body Body Medium, und wir wählen einfach die helle Farbe. Ich werde die Größe erhöhen. Gehen wir von 20 Buchstaben Null und Zeilenabstand aus. Wir gehen vielleicht auf Null, 1,4. Paragraph, das können wir lassen. Und jetzt kann ich auch dieses Portfolio löschen. Ich will das nicht da drin haben. Und jetzt wollen wir diesen Inhalt hier in diesen Stapel legen. Und dann diesen Stapel, wir wollen den Stapel und die Zeile auf der linken Seite auswählen. Wir werden auch den Text auf dem Titel und dann auch das Datum ausrichten . Also gehen wir den Text runter und klicken auf eine Zeile, und das sollte alles dort links ausrichten. Wir können sehen, dass sich hier unten ein Stapel befindet , wenn Sie möchten Wenn wir zum Beispiel hier auf diese Schaltfläche klicken, leiten wir Sie zum nächsten Projekt weiter, wie Sie sehen können. Das haben sie uns also schon gegeben. Im Moment gehe ich einfach zu Ähm, ich möchte nur die Deckkraft dafür verringern, sie vorerst dort belassen, oder wir könnten sie einfach löschen Jetzt möchte ich einfach dieses Feld ziehen und jetzt haben wir das Ding an der Seite Wir müssen einen neuen Stapel für den Titel und das Datum erstellen. Und wir werden zum Leerzeichen dazwischen wechseln. Es wird also diese Lücke zwischen diesem und dem Datum entstehen . Und wir werden dieses Layout nach unten ausrichten. Und jetzt kannst du sehen, dass das hier unten ist, und dann wollen wir den Anbau ändern. Anstatt der automatischen Höhe können wir es auf automatische Breite ändern, und es befindet sich jetzt auf der rechten Seite der Box oder des Stapels, tut mir leid. Also haben wir das Datum. Ich glaube, das Datum war groß, also illustrieren Sie, ich sehe, dass die Größe 44 ist. Ich werde einfach die Stile dort loswerden und dann passen wir es an. Lass uns einfach 40 nehmen und helle Farbe haben. Ich gehe zum zweiten Abschnitt unserer Portfolio-Seite über. Als Erstes wähle ich den Heldenstapel aus, dann Control C und füge ihn in Control Vita ein. Dann werde ich einen neuen Stapel erstellen, indem Shift, Strg, Alt und Enter drücke. Und ich werde diesen Abschnitt auch hier in den Stapel ziehen . Und dieser Stapel, wir werden sicherstellen, dass er vertikal ist, und dann können wir für den Abstand 25 Pixel machen , sodass ein Leerzeichen dazwischen ist. Und natürlich können Sie den Abstand anpassen, um ihn zu vergrößern. Ich werde den zweiten Stapel in Galerie umbenennen, und ich werde einfach den Text hier loswerden , weil wir nicht brauchen, was ich tun muss, ist, zu meinem CMS zu gehen und Felder bearbeiten zu gehen. Was ich hier getan habe, ist, dass ich zwei Galerien hinzugefügt habe, sodass Sie die Plus-Schaltfläche drücken können und Sie können eine Galerie oder einfach nur einfache Bilder hinzufügen . Der Grund, warum ich zwei Galerien hinzufüge, ist dass Sie, wenn Sie eine Galerie hinzufügen, die beiden Spalten nicht verwenden können. Sie können das Bild nicht über zwei Spalten verteilen. Deshalb mache ich zwei Galerien. Alles, was du tun wirst, ist einfach deine Bilder hochzuladen. Also wählst du einfach das Bild aus und lädst und so habe ich diese beiden hier, und dann wird Galerie zwei hier sein. Aber wenn Sie das Feld umbenennen möchten, gehen Sie einfach zu den Feldern und benennen Sie es hier um. Schau mal, was die zweite Galerie sagt: Zwei Kohlen für zwei Spalten. Und dann gehe ich zurück zu unserem Stapel hier. Und ich gehe nach oben rechts und klicke auf Inhalt hinzufügen. Also alle Felder, die Sie in diesem CMS erstellt haben, haben wir die Bildergalerie eins und Galerie zwei, wie Sie sehen können, und dann die anderen Abschnitte. Also werde ich weitermachen und die Galerie in diesen Stapel ziehen . Und Sie können sehen, dass diese Bilder bereits aus unserem CMS aufgerufen werden, weil wir sie hier bereits in unsere Sammlung hochgeladen haben . Es werden also nur die Bilder aus dieser Sammlung extrahiert. Wir haben das. Jetzt können Sie auf der rechten Seite sehen, dass es sich um zwei Spalten handelt. Sie können sehen, dass ich es in eine oder zwei Spalten wie diese ändern kann, aber Sie können nicht mehrere Zeilen haben. Im Moment funktioniert es einfach nicht. Wie Sie sehen können, können Sie automatische Korrekturen durchführen. Sie können auch eine feste Breite für das erweiterte Layout festlegen, das erweiterte Layout festlegen, aber diese Option steht Ihnen einfach nicht zur Verfügung. Also, was ich normalerweise mache ist, dass ich die zwei Spalten dafür habe. Und weil unser Design zwei Spalten hat und sich dann eine Spalte über die beiden erstreckt müssen die beiden Galerien Aber in Zukunft werden sie es wahrscheinlich aktualisieren. Ich gehe wieder zu Inhalt hinzufügen und ziehe die zweite Spalte direkt unter die andere , wie Sie sehen können, und sie nach unten verschieben. Ich werde es einfach hineinlegen. wähle den obersten Stapel aus und mache ihn vertikal. Ich werde einfach den Hauptrahmen erweitern, wie Sie sehen können, und dann haben wir das Design. Und natürlich kann ich in die Galerie gehen und Sie können sehen, Sie können sehen, dass wir eine Spalte haben. Und dann kann ich zu dem Bild gehen und es so ändern, dass es passt, gedehnt oder gekachelt wird. Natürlich funktioniert das Ausfüllen normalerweise, und ich muss nur die Höhe ändern , bis ich es entsperren muss, und wir möchten sicherstellen, dass Sie sehen können , dass es sich bei der Höhe um eine benutzerdefinierte Höhe handelt. Also ich möchte das einfach ändern , wie Sie sehen können. Ich wollte nur bis etwa da auffüllen. Nun, was wir tun können, wenn wir zum CMS gehen und sagen, du weißt schon, wir aktualisieren andere Bilder, zum Beispiel, wenn du diese Bilder änderst, dann werden sie neu geladen und hier hochgeladen, wie du sehen kannst Ich werde auch den Abstand hier auf 25 Pixel verringern und auch den Abstand auf dem Hauptrahmen, sodass dann der gesamte Raum so sodass dann der gesamte Raum aussieht, das CMS Wenn wir jetzt zu einer anderen Seite wie Keystone gehen, können Sie auch etwas Ähnliches sehen Und wenn Sie auf eine andere Seite gehen, können Sie sehen, ob Sie nichts im CMS haben, es wird nicht richtig geladen Wenn ich also zurück zu CMS gehe, zu skalierbar, denke nur daran, sicherzustellen , dass du deine Bilder hochlädst. Wenn wir zum Beispiel nur ein Bild zu dieser Galerie hinzufügen und ich zurückgehe, können Sie sehen, dass es nur diesen einen Bereich, diese eine Spalte füllt , weil wir die anderen Bilder nicht haben. Stellen Sie also sicher, dass Sie, wenn Sie ein bestimmtes Limit festlegen, die richtige Menge hochladen, damit sie in den Bereich passt, für den Sie entwerfen. Wenn ich jetzt einfach zurückgehe, können Sie sehen, dass es diesen Bereich jetzt füllt Und so erstellen Sie diesen Galeriebereich mit dem CMS 8. Fußzeile: Und ich kann diesen Stapel buchstäblich einfach kopieren und er sollte unten eingefügt werden Cool. Habe mein Logo hier drin. Süß. Ich möchte eine Schaltfläche hinzufügen, also werde ich einfach einen neuen Stapel erstellen, und es ist besser, einfach eine Schaltfläche mit einem Stapel zu erstellen. Sie können den vorgefertigten Button-Bereich verwenden, aber er ist nicht der beste, wenn Sie etwas anpassen möchten. Deshalb werde ich dieses Tastenbuch in meinem Ebenenbedienfeld „Kern“ nennen . Und dann können wir zum Füllen gehen und es in einen Farbverlauf umwandeln. Und dann klicke ich dafür auf den Punkt und dann kann dieser das Licht treffen. Und dann wird es so sein. Und diese Schaltfläche, die Breite, wir werden sie auf etwa 200 Pixel festlegen, und dann werden 100, wie dieser Radius für das Abrunden der Ecken, 20 sein Drücken Sie das Textwerkzeug, buchen Sie einen Anruf und wir wollen, wir können einfach 25 Pixel machen Ändere es auf die dunkle Farbe und ändere es auf Feigenbaum und dann auf Medium. Vielleicht lassen wir es halbfett angehen und es abrunden, und so sieht es dann aus. Hoppla. Passen Sie eine Taste wie diese Cool. Also habe ich diesen Knopf und jetzt möchte ich die Richtung auf horizontal ändern. Ich möchte es hier in diesen Stapel bringen. Also dieser horizontal. Der Hauptstapel kann vertikal sein. Dieser wird horizontal sein. Den Stapel loswerden. Da waren einige Elemente drin, die es durcheinander gebracht haben. Ich werde deine Ebenen überprüfen, weil einige Dinge durcheinander geraten werden Von hier aus, Linie nach unten , vielleicht 50 Pixel nach unten, links, wir haben 50. Und richtig, wir werden 50 haben. Also haben wir diesem Stapel gerade Polsterung hinzugefügt. Wie Sie sehen können, kann ich das vielleicht etwas kleiner machen . Cool. Also haben wir diesen Teil hier erstellt. Offensichtlich ist die Polsterung nicht exakt, aber das ist in Ordnung. Und dann können wir einfach hinzufügen, ich staple. Also gehe ich einfach zurück zur Startseite, und ich kann einfach einen dieser Stapel hierher kopieren ihn so in den Hauptstapel einfügen Super cool. Und ich möchte sichergehen, dass ich auch die gleiche Polsterung habe Also ich glaube, es waren 50. Wir können das herunterskalieren. Wir können auch anpassen, dass die Breite festgelegt wird. Also werden wir darüber reden. Dann lege ich das in einen anderen Stapel. Dieser Stapel wird horizontal sein. Dann können wir einige Rahmen einfügen, diese drei Stapel einfügen und dann den Hauptstapel auswählen, in den ich gerade diese drei Stapel gelegt habe, und wir wollen die Verteilung auf den Anfang ändern , um ihn nach links zu bringen Und jetzt haben wir das. Und ja, wir haben also die Fußzeile. Jetzt möchte ich Play drücken. Ich habe einen Teil des Textes vollgestopft. Das ist in Ordnung Aber wir haben jetzt unsere Seite und dann die Schaltfläche, was wir tun wollen, ist auf den Link oben zu klicken, und dann, weißt du, das kann zum Macaw-Link oder zur Homepage oder was auch immer gehen So kann es zum Beispiel auf die Homepage gehen. Und wir können Animationen hinzufügen, wie wir es zuvor getan haben. Sie können die hinzugefügten Links hier sehen. Dieser geht zu Instagram und dieser geht zu meiner Kuh, und dieser geht zu meiner Kuh wenn ich auf diese kleinen Textlinks klicke. Sie können also buchstäblich einen Link aus Text machen , wirklich aus allem. Nachdem Sie Ihre Fußzeile fertiggestellt haben, zeige ich Ihnen , wie Sie eine Komponente erstellen Eine Komponente ist eine schnelle Methode, um wiederkehrende Objekte, Schaltflächen und Dinge zu erstellen , die Sie mehrmals verwenden mehrmals So können Sie Dinge als Vorlagen verwenden. Dann sollten Sie eine Komponente erstellen. Also werde ich zum Beispiel meinen Hauptfußzeilenstapel auswählen. Sie können mit der rechten Maustaste darauf klicken und eine Komponente erstellen. Das Tastenkürzel ist auch Control Old K. Aber wir wollen auf Komponente erstellen klicken und einfach Main Footer oder etwas Einfaches aufrufen , als das Sie sich merken können Und jetzt haben wir hier eine Komponente. Wir haben auch diese Variante, die Telefonvariante, wie Sie sehen können, und eine Variante ist nur eine sekundäre Komponente der Sie wechseln können, falls es sich beispielsweise um ein Beispiel auf einem Telefon handelt, es wird eine andere Größe haben. Vielleicht möchtest du also eine andere Version erstellen, oder vielleicht möchtest du einen Dunkelmodus haben. Wenn ich also auf diese Komponente klicke, kann ich hier runter gehen. Und ich kann eine Ha Ha oder eine gepresste Version erstellen. Sie können also auf dem Namen sehen, dass Ha steht, und vielleicht haben einige eine geringe Deckkraft oder so Und wir können auch weitere Varianten anpassen und erstellen. Wenn Sie also nach rechts gehen, können Sie sehen, dass Sie eine weitere Variante erstellen können. Also diese Variante kann vielleicht einfach das Logo für sich haben. Und wir können diese Variante drei nennen oder wir könnten sie in etwas anderes umbenennen. Wir können es Variante drei nennen, Logo. Die Telefonvariante, das wäre großartig für ein Telefon. Was wir tun wollen, ist, es zu verkleinern. Sagen wir vielleicht 450 Pixel. Es ist offensichtlich klein, nehmen Sie vorerst nur 550, nur um ein Beispiel zu zeigen. Was wir tun wollen, wir wollen einfach alles verkleinern und wir müssen vielleicht den Stapel auf vertikal umstellen, die Ausrichtung ändern und dann den Abstand erstellen, den Abstand ein wenig ändern. Und wir sollten so etwas haben. Ich kann auch die Polsterung ändern. Ich kann die Größe verringern. Ich glaube, wir richten die Mitte so aus. Und dann für diese, weil es sich um drei separate Stapel handelt, wollen wir votical werden und dann wollen wir das erhöhen, aber lassen Sie uns einfach die Gesamtgröße erhöhen Also werden wir das machen. Dann werden wir das runterholen. Und dann, wenn du merkst, dass Dinge kaputt sind , zum Beispiel sollte dieser Stapel ausgerichtet sein. Also werde ich nur sicherstellen , dass dieser Stapel eine Linie ist. Also werde ich es ändern, um es zu füllen. Die Größe füllt also den Breitenraum aus, wie Sie so sehen können. Und ich möchte auch sichergehen , dass ich in dieser Variante einen Stapel auswähle und dann den Abstand einfach so vergrößere. Geil. Und jetzt haben wir diese Telefonvariante. Wir haben ein Duplikat. Ich werde das einfach löschen. Also werde ich auf den Titel doppelklicken und ihn Telefon nennen. Jetzt haben wir den Desktop-Primärmodus, wir haben das Telefon und dann haben wir diesen anderen. Wenn ich jetzt auf die Portfolio-Seite gehe und wir hier zum Telefonbereich gehen, können Sie sehen, dass dieser die Desktop-Variante verwendet. Wenn Sie auf die rechte Seite gehen, können Sie sehen eine Komponente lila hervorgehoben wird, und Sie können sehen, dass ich hier die Telefonvariante auswählen kann und sie diese verwenden sollte. Sie haben also diese Variante. Wenn ich zum Beispiel auf den Desktop gehe und diese Variante auswähle, wird es diese mit nur dem Logo machen, und wenn ich die Telefonvariante mache, wird es die Telefonvariante machen. Und offensichtlich skaliert es momentan nicht richtig. Also muss ich nur sicherstellen , dass das richtig funktioniert. So kann ich jederzeit zurückkehren , um die Variante zu bearbeiten und sicherzustellen, dass Sie sehen können, dass alles auf behoben eingestellt ist. Also werde ich einfach alles zusammenfügen. Das sollte relativ, relativ, relativ sein, und dann sollte dieser auch füllen und füllen sein. Okay, cool. Also, wenn ich jetzt einfach zurückgehe, ja, es sollte richtig funktionieren. Und ich verkleinere einfach das Logo und Sie können sehen, wie es aktualisiert wird. Überall, wo sich diese Komponente befindet, wird sie aktualisiert. Es ist einfacher, Varianten zu ändern, und ich empfehle, Varianten zu erstellen. Wenn du dann auf sie zugreifen willst, gehst du zu Assets, dann hast du hier die Komponenten, wie du zum Beispiel die Hauptfußzeile sehen kannst , und hier gibt es auch einen Download-Button , den Freema automatisch hat, und du ziehst ihn einfach so hinein, du kannst ihn überall platzieren, sogar auf der Homepage oder wo immer du Wenn Sie es irgendwo reinwerfen wollen, können wir das auch tun 9. Responsive Design für Mobilgeräte: X. Kurze Lektion, ich werde Ihnen zeigen, wie Sie Ihre Website responsiv gestalten können. Wir haben unsere Homepage. Jetzt. Was wir tun können, ich füge einen Breakpoint hinzu und wir machen einfach das Basis-Telefon 390 Sie können jetzt sehen, dass es nicht so ist , wie wir es gerne hätten Der Text verschwindet von der Seite. Wir müssen also die Richtung des Stapels auf vertikal ändern, also wird die Richtung des Stapels auf vertikal ändern, er nacheinander gestapelt , statt horizontal zu stapeln Ich gehe zu den Ebenen und denke daran, dass jede Änderung, die Sie am Breakpoint des Smartphones oder Tablets vornehmen, keinen Einfluss auf den Breakpoint auf dem Desktop keinen Einfluss Deshalb fange ich immer mit dem Desktop an und telefoniere dann später Weil es verschiedene Änderungen geben wird. Und wenn Sie eine Änderung auf dem Desktop vornehmen, wird diese normalerweise automatisch auf das Tablet und das Telefon übertragen Ich wähle den Hauptstapel und wir ändern ihn auf Vertikal Sie können also sehen, dass alles umgedreht ist. Sie können das Telefon auch bewegen. Du kannst es an der Seite nach unten bewegen, damit wir es bewegen können. Du kannst auch Alt und Shift gedrückt halten und es wird dupliziert, was ein weiterer cooler Trick ist. Passen Sie den Rahmen an und bringen Sie ihn ein, wie Sie sehen können. Dann muss ich auch die anderen Stapel wechseln. Also muss dieser Stapel vertikal sein. Äh, da sind die schon vertikal und dieser, Textumbruch ist vertikal, und ich werde sie nur vergrößern Den Gesamtrahmen, ich werde diesen Rahmen verwenden müssen, ich werde ihn so vergrößern müssen Das ganze Bild passt zu diesem Abschnitt. Wenn du das Telefon anpassen willst, nehme ich vielleicht 450, mache es ein bisschen größer, ändere 10. Veröffentlichen: In diesem Abschnitt werde ich Ihnen nun zeigen, wie Sie die Suchmaschinenoptimierung durchführen und Ihre Website veröffentlichen, damit Sie sie weltweit zum Laufen bringen können. Sobald Sie damit fertig sind, können Sie zur Homepage oder Portfolio-Seite gehen und auf Einstellungen klicken. Und in den Einstellungen können Sie sehen, dass Sie dies vor der Veröffentlichung anpassen möchten, nur damit die Suchmaschinenoptimierung in Google und dem Browser, die Leute verwenden, die SEO-Titel und -Details korrekt sind. Wir können also sagen, Mirrors Portfolio und die URL, wir können das belassen , weil es mit dem CMS verbunden ist. Wenn wir Seiten in Suchmaschinen anzeigen möchten, kreuzen wir das an. Dies ist die Vorschau darauf, wie es in jeder Suchmaschine aussehen wird , die Nutzer verwenden. Dann möchten Sie eine Vorschau für soziale Netzwerke. 1.200 mal 30 Pixel. Normalerweise gehe ich einfach in Illustrator und erstelle eine Zeichenfläche, zum Beispiel 1.200 mal 630, ich kann das wie bei einem Bild überprüfen Was auch immer ich will, wirklich. Du kannst jede Art von Bild machen. Ich speichere das einfach, damit du die Einstellungen sehen kannst. Ich speichere es zu 100% als JPEG. Die Qualität von 90% ist in Ordnung. Spar dir das einfach. Und da hast du's. Mach das einfach in 2 Sekunden. Also, wann immer du diesen Link in sozialen Netzwerken teilst, wird dieses Bild geladen Du weißt also, wie die Leute an das Bild kommen, wenn du es hochlädst. Und das ist es im Grunde. Dann klicke ich auf Speichern. Und dann stellen Sie einfach sicher, dass Sie das für jede Seite tun. Also auch Homepage. Sie möchten Ihr OL ändern. Sobald das erledigt ist, können Sie Framer Ihnen eine kostenlose Domain geben Wie Sie sehen können, ist dies die URL, was wäre. Natürlich können Sie es ändern. Hier, sagen wir einfach Jeremy Mirror, designe für den Moment und drücke Enter, und dann wird die Website so aussehen. Also die benutzerdefinierte Domain, wenn Sie eine Domain aktualisieren möchten, müssen Sie natürlich eine kaufen. Normalerweise benutze ich Go Daddy. Oder nenne billig. Also hast du einen billigen Namen. Cheap Domains sind wahrscheinlich zwei großartige Websites. Also ja, du hast hier einen billigen Namen. Habe billige Namen, die du suchen kannst, und Go Daddy auch. Ich habe Domains, die du für etwa 20 Dollar kaufen kannst , je nach Name. Ich gehe einfach nach oben rechts und klicke auf Veröffentlichen, und du kannst sehen, dass wir es vor 23 Stunden aktualisiert haben und es sechs Änderungen gegeben hat. Ich kann die Änderungen also hier sehen. Wie Sie sehen können, gebe ich Ihnen nur eine grobe Aufschlüsselung, gebe Ihnen all das. Was du vor der Veröffentlichung tun kannst, wenn du auf die 23 Stunden klickst, werde ich dich auf diese Staging-Seite weiterleiten Sie können sehen, bevor Sie es live veröffentlichen Sie möchten einfach alles überprüfen bevor es vollständig live geht Sie können also sehen, dass es dort optimiert bereitgestellt wurde. Und das ist die neueste Version. Natürlich müssen Sie ein Upgrade auf den tatsächlich kostenpflichtigen Seitenplan durchführen, bevor Sie dies tun können. Veröffentlichen Sie ClickUpdate und die Website wurde aktualisiert. Ich kann auf Link öffnen klicken, und wie Sie sehen können, ist hier die Website, die wir erstellt haben, was super cool ist Also werde ich auf Sense Pay klicken, es sollte sich die Projektseite öffnen. Cool. Und da haben wir es, und so macht man es. Natürlich können wir das reparieren und was auch immer, aber das werden wir tun. Dann erhalten Sie natürlich das Framer-Badge unten auf der Website, wie Sie sehen können. So veröffentlichen Sie Ihre Website 11. Mit Plugins gestalten: Wenn Sie nach links oben gehen, können Sie sehen, dass es ein Plugins-Menü gibt. Du willst darauf klicken. Und Sie haben bereits einige aktuelle , die Sie hier verwendet haben. Sie haben hier einige der vorgestellten, einige der beliebtesten. Sie können auch auf Bows klicken , um zur Framer-Website zu gelangen Ich zeige Ihnen dann alle aktuellen Plugins Sie haben tatsächlich 130, was verrückt ist. Sie haben Ikonen Sie haben, du weißt schon, KI-Sachen, Bilder, viele verschiedene Plugins, was ich wirklich toll finde. Sie können sogar E-Commerce-Dinge wie Frameship einfügen. Und ich gehe zum Plugin und ich möchte nach Lumi suchen . Und sobald du einen Stecker hast, wirst du wie ein Du kannst es auf deiner Leinwand bewegen. Und für dieses es im Grunde kostenlose Bilder, aber sie haben einen Profi-Tarif. Aber ich kann zum Beispiel mit der linken Maustaste auf ein Bild klicken. Also habe ich in meinen Ebenen dieses Würfelbild ausgewählt, und vielleicht möchte ich ein anderes. Ich kann auf Lumi klicken und es sollte das Bild genau dort einfügen Natürlich gibt es eine Wortmarke, weil ich die Pro-Version nicht habe, aber es ist eine wirklich einfache Möglichkeit, Bilder in deine Leinwand einzufügen Bilder in deine Leinwand einzufügen Einfach so. Damit du meine Bilder sehen kannst, ist das Bild da drin. Loom ist großartig, weil es Illustrationen hat. Es hat drei D, es hat eine Menge cooler Sachen. Wir können sogar Werkzeuge und Effekte auswählen und dann zu Duotone gehen und wir können unser eigenes Farbthema ( Duotones) auswählen, wie Vielleicht wollen wir dieses Blau mit diesem Flamingo oder so Das sieht ziemlich cool aus. Das ist also ein Plug-In, das ich gerne benutze. Sie haben auch andere, mit denen Sie herumspielen können. Ich empfehle Ihnen also, einige der Plug-ins anzusehen, mit denen Sie spielen möchten. Sie haben zum Beispiel diesen einen DIA, der sehr viel Spaß macht. Also vielleicht habe ich mein Profilbild und ich möchte den unterschiedlichen Effekt hinzufügen. Ich klicke auf DIA und erstelle diesen einzigartigen Mustereffekt, der das Bild unterscheidet, sodass wir ein Bild einfügen können. Und dann haben wir es. Wir haben so einen Pixelverzerrungs- und Dithering-Effekt , der wirklich cool ist Und wir können die Pixelierung natürlich anpassen. Es sind also im Grunde verschiedene Pixeleffekte. Ich kann die Helligkeit ändern. Sie können mit Quantisierung und Auflösung herumspielen. Wir werden es ein bisschen aufstocken. Also das ist auch ein lustiges kleines Plug-In, mit dem ich gerne herumspiele, wenn ich einen seltsamen Effekt haben will einen seltsamen Effekt Phosphi ist auch ein wirklich toller. Wenn du also ein paar wirklich tolle Icons haben willst, verwende ich gerne Phosphid, nur um schnell ein paar Icons reinzubringen Sie können also einfach mit der linken Maustaste klicken und es wird eingeblendet, oder Sie können klicken und ziehen, und dann können Sie es auswählen, zu Ihrer Füllung gehen und die Farbe ändern, wie Sie sehen können Also vielleicht möchtest du, du weißt schon, grüne Farbe oder was auch immer. Sie haben jede Menge Sie haben Füllungen, sie haben Duotone, wie Sie sehen können, und dann haben wir einfach die Farbe geändert Es ist also völlig kostenlos. Also, es ist einfach genial, hol dir ein paar schnelle Ideen Sie haben auch eine Light-Version. Und du kannst sie skalieren und drehen. Spielen Sie mit einigen der Plug-ins herum. Ich sage dir, ob es kostenlos oder kostenpflichtig ist. Also behalte das im Hinterkopf. Hier gibt es viele kostenlose Plug-ins. Probieren Sie es aus und fangen Sie an, lustige Dinge zu kreieren. 12. Outro: Viel dafür, dass ich an dem Kurs teilgenommen habe. Ich weiß das wirklich zu schätzen. Ich hoffe, du hast alles gelernt, was du brauchst , um mit der Erstellung von Framer-Websites zu beginnen und es gibt dir hoffentlich etwas mehr Selbstvertrauen , einfach loszulegen und Dinge zu erstellen, weißt du? Ich habe zum Beispiel nicht allzu viele Projekte erstellt, aber je mehr Sie erstellen, auch wenn Sie nur mit Vorlagen herumspielen, ist das eine großartige Möglichkeit, zu üben und sich einfach an das Erstellen zu gewöhnen Für das Klassenprojekt möchte ich, dass du etwas Ähnliches erstellst, wie wir es für das Portfolio gemacht haben. Du kannst genau verfolgen, wie ich es gemacht habe, oder etwas Ähnliches mit deiner Atmosphäre kreieren, es zu deinem eigenen persönlichen Stil machen Das Hauptziel besteht also darin, einfach eine einseitige Landingpage mit einigen Teilen Ihres Portfolios zu erstellen eine einseitige Landingpage mit einigen Teilen Ihres Portfolios zu Es könnten nur Studentenarbeiten oder gefälschte Projekte sein . Das ist völlig in Ordnung. Und dann lade das in den Skillshare-Kurs hoch und ich gebe dir so schnell wie möglich Feedback Und wenn du noch andere Portfolioteile hast und Feedback möchtest, würde ich dir gerne Feedback dazu geben Füge einfach deinen Link in die Diskussionen oder den Chat ein. Wenn du andere Dinge wie Markenidentität oder Logodesign lernen möchtest, habe ich über 30 Kurse auf Skillshare Ich habe 30 weitere Kurse auf Skillshare, an denen du teilnehmen kannst Und wenn du weitere Ressourcen benötigst, kannst du auf meine Website jeremymor.com gehen oder dir einige meiner Tutorials auf YouTube ansehen , Vielen Dank und wir sehen uns beim nächsten Mal.