Figma-Sites: Erstellen von Websites ohne Code

1. 0 Anhänger: Hallo, mein Name ist Jeremy und willkommen zu meinem Figma-Sites-Kurs, in dem du eine No-Code-Website in Figma ohne Code erstellen wirst eine No-Code-Website in Figma ohne Code erstellen Ich werde dir alles zeigen , was es gerade zu bieten hat und wie du deine eigene Portfolio-Website oder sogar eine einfache Kundenwebsite erstellen kannst oder sogar eine einfache Kundenwebsite Ich zeige Ihnen den gesamten Prozess des gesamten Arbeitsbereichs und lerne, wie Sie die Benutzeroberfläche verwenden. Ich werde erklären, wie man Abschnitte hinzufügt und Vorlagen im FIGMA-Arbeitsbereich verwendet Ich werde auch meinen Prozess der Gestaltung einer einseitigen Website zeigen , auf der wir einige Bilder hinzufügen Spielen Sie mit der Topographie herum, erstellen Sie Komponenten und lernen Sie, wie Sie die Website responsiv gestalten und dann die Website fertigstellen und live auf einer Domain Ihrer Wahl veröffentlichen können lernen Sie, wie Sie die Website responsiv gestalten und dann die Website fertigstellen und live auf einer Domain Ihrer Wahl veröffentlichen Das klingt also nach Spaß. Melden Sie sich noch heute für den Kurs an und beginnen Sie im Handumdrehen, Websites in Figma 2. 1 Figma-Einführung in Arbeitsbereich und Benutzeroberfläche: Das Wichtigste zuerst: Wenn Sie einmal mit Figma angefangen haben, werden Ihnen diejenigen, die Sigma Four haben, ziemlich vertraut sein Sie können jetzt sehen, dass Sie eine Website haben und da steht Beta. Wir können darauf klicken und es wird ein Site-Workspace generiert. Figma hat im Moment also ein paar Vorlagen, später wird es wahrscheinlich noch viel mehr geben. Die Leute werden wahrscheinlich Vorlagen erstellen. Aber wenn du dich vorerst auf dem Tab Erkunden befindest, kannst du hier einfache Vorlagen sehen hier erstellt wurden, nichts allzu ausgefallenes. Sie können also mit so etwas beginnen , wenn Sie nicht von Grund auf neu erstellen möchten. Ich möchte von Grund auf neu erstellen. Sie können die Grundlagen der Erstellung einer Figma-Site erlernen die Grundlagen der Erstellung einer Figma-Site Sie können auch links klicken , wenn Sie eine Landingpage, eine persönliche Seite oder ein Portfolio wünschen persönliche Seite oder ein Portfolio Im Moment gehe ich einfach auf Entdeckungsreise und klicke auf Blank Site. Sobald du im Workspace bist, findest du deine Tools unten. Du hast deine Werkzeugleiste mit allem, was du brauchst. Auf der rechten Seite haben Sie die Stile, Export, Grafiken und alles andere, was mit Topographie zu tun hat, fühlt sich wie gewohnt an, und auf der linken Seite haben Sie Ihre Ebenen Sie werden gleich sehen, Sie die Startseite haben, und Sie können sehen, dass sie einen grauen Rahmen hat und dass Sie darin Ihren Desktop und Ihr Handy haben Jetzt haben Sie auf der linken Seite Ihre Webseiten. Unsere Homepage ist also die aktuelle Seite, die wir verwenden. Wenn wir eine Seite hinzufügen möchten, gehst du einfach nach oben links und klickst auf das Plus neben dem Webseitenbereich. habe derzeit eine Homepage, also kann ich hier mit der linken Maustaste klicken und eine sekundäre Seite hinzufügen. Ich kann darauf doppelklicken und Info-Seite oder eine Kontaktseite oder was auch immer es ist, erstellen. Wenn Sie diese Seite nicht möchten, können Sie einfach auf Löschen klicken, sobald Sie sie ausgewählt haben, und ich werde sie entfernen. Du hast auch deine Seiteneinstellungen mit einem kleinen Zahnrad. Wenn Sie mit der Maus über den Homepage-Bereich fahren, klicke ich darauf und wir haben hier einige grundlegende SEO-Details wie Metainformationen, den Seitentitel, der der Haupttitel ist, den Sie bei Google sehen Sie haben hier die Sprache und auch das soziale Image hier. Wenn Sie einen Link teilen, sagen wir auf LinkedIn, wird er mit dem Vorschaubild angezeigt , sodass Sie dort ein Bild hochladen können. Sie haben hier auch Domains , sodass wir die Domain später verbinden können, und dann haben Sie hier allgemeine Informationen zur Website. Also Favicon, und du hast benutzerdefinierten Code, wenn du Widgets oder bestimmte codierte Dinge einbetten möchtest Und das war's im Grunde für die Seitendetails. Ich drücke einen kleinen Pfeil, um zurückzugehen, und jetzt sind wir wieder hier. Also, was ich jetzt machen werde , ich werde einfach die mobile Ansicht loswerden und bei der Desktop-Ansicht bleiben. Was wir tatsächlich tun können, ist, einige Abschnitte und Elemente per Drag & Drop hineinzuziehen. Ich möchte also auf die linke Seite gehen und du willst zum Einfügen gehen. Sie haben bereits einige vorgefertigte Seitenvorlagen, was ziemlich cool ist. Sie haben hier also einige Vorlagen. Sie haben auch eine Navigation. Also haben wir einen NavBA. Wir haben auch Heldenbereiche, Funktionen und Einbettungen, sodass du ein YouTube-Video oder einen URL-Link einbetten kannst , was ziemlich cool ist Du kannst dort auch Iris hinzufügen. Sie können auch nach Dingen suchen, wenn Sie Komponenten haben , bestimmte Dinge. Sie haben auch ein neues Ding namens M entwickelt, das KI-Codierung verwendet. Sie müssen also keinen Code schreiben, aber es erzeugt tatsächlich Effekte für Sie, was cool ist. Wenn Sie die Hintergrundfarbe unserer Website ändern möchten , können wir einfach in das Feld gehen und es so ändern dass Schwarz oder eine andere Farbe angezeigt wird. Sobald Sie darauf geklickt haben, können Sie auch darauf doppelklicken und es Homepage nennen, richtig. Aber es ist wahrscheinlich gut, es auf dem Desktop zu lassen und es auf der Homepage zu behalten. Untere Werkzeugleiste, du hast deine Werkzeuge. Sie haben eine Webseite, das ist W-Frame für F, Abschnitt ist Shift S. Sie haben auch die M - und die Einbettungswerkzeuge, die ich Ihnen später zeigen werde, und dann haben Sie Ihre grundlegenden Formwerkzeuge, das Bildwerkzeug und den Text. Dann haben Sie einige andere Tools, nach denen Sie suchen können. Das ist die Einführung in den Arbeitsbereich mit Pilzen. Ich werde Ihnen zeigen, wie Sie einige Abschnitte erstellen und das erste Layout und die Struktur von entwerfen 3. 2 Desktop-Version Automatisches Layout: Antwort: Zuerst möchte ich auf das kleine Plus-Häkchen auf der linken Seite klicken und dann gehe ich zur Navigation. Und ich mache weiter und lege diese nette kleine Navbar hier ab , und ich werde sie gleich da einfügen Es sollte automatisch einrasten. Wenn wir jetzt zum Ebenenfenster gehen, können wir sehen, dass sich die Ebene, wie wir sehen können, auf dem Desktop befindet . Wir haben die Kopfzeile, wir haben das Menü und dann haben Sie all diese Bestelllayouts. Sie haben also das Logo da und Sie haben die Schaltflächen in der Reihenfolge des Layouts, wir zoomen, also wäre es gut, diese Ebenen selbst durchzugehen und herauszuschneiden, was da drin ist. Wir haben hier also zwei Schaltflächen und dann haben wir hier ein Logo, das wir ändern können. Ich werde weitermachen und einen Heldenbereich hinzufügen. Lass uns das vielleicht hier machen. Ziehen Sie das per Drag-and-Drop rein. Und bumm, wir haben diese coole Helden-Sektion. Wir hätten es tun können, es hätte ein Armaturenbrett sein können oder etwas Lustiges. Wir haben Buttons und eine Überschrift. Lassen Sie uns jetzt auch einen Feature-Bereich hinzufügen. Lass uns vielleicht gehen, sollten wir uns für ein Bento-Grid entscheiden? Mit einem Bento kann man nichts falsch machen. Also wirf das da rein. Wir können vielleicht auch einen weiteren Abschnitt hinzufügen. Lassen Sie uns mit Testimonials beginnen. Vielleicht schreiben wir da etwas Text rein. Welche anderen Funktionen können wir hinzufügen. Wir können auch ein paar Karten hinzufügen. Wir können auch einfach einen Abschnitt löschen, wir können mit der linken Maustaste klicken und löschen. Wenn wir keinen Vibing haben oder nicht brauchen, können wir ihn jederzeit ändern Das ist völlig in Ordnung. Nun, eine Sache ist mir aufgefallen, dass es keinen Fuda-Tab gibt, aber sie haben die Foota im Navigationsbereich, also gehen Sie hier runter und sagen wir, wir können die einfache Fußzeile mit, sagen wir, den drei Lassen Sie mich das einfach wieder hineinziehen, stellen Sie sicher, dass Sie die blauen Linien sehen oder dass sie eingerastet sind. Cool. Also haben wir das verstanden. Ich denke, ich muss auch einen Aufruf zum Handeln hinzufügen. Also lass mich nicht wissen, ob sie hier einen CTA haben. Aber wir können immer einfach unsere eigenen hinzufügen. Ich könnte das einfach da hinzufügen. Das könnte ein Button sein. Wir haben also das grundlegende Layout unserer Desktop-Landingpage und werden das Design anpassen. Ich habe einige Markenbilder und ein Logo und eine Marke, die ich kreiert habe und die wir in das Design integrieren werden . Ich empfehle daher, Ihr eigenes Briefing zu erstellen oder das von mir bereitgestellte Briefing verwenden und daraus einige Modelle zu erstellen , einige Bilder zu generieren Sie können KI verwenden, das ist völlig in Ordnung. Verwenden Sie, womit Sie sich wohl fühlen, und generieren Sie einige schöne Bilder und Dinge, in die Sie alle Informationen und Inhalte auf der Website eingeben können in die Sie alle Informationen und Inhalte auf der Website eingeben . Sie müssen nicht genau wie ich kopieren, sondern herumspielen, die gewünschten Funktionen und Abschnitte hinzufügen, und wir werden sie anpassen. 4. 3 4 Design und Bilder Pt: Im Rahmen der Lektion werden wir unsere Bilder und unser Design hinzufügen, damit wir damit beginnen können, das visuelle Gesamtbild unserer Website fertigzustellen visuelle Gesamtbild unserer weitergemacht und mein Ass hinzugefügt. Ich habe einige Texte, die ich erstellt habe, und habe dieses Produkt namens Neuroshot kreiert Es ist ein Energieschub , wenn man es trinken kann. Es enthält Koffein und Magnesium und eine ganze Reihe von Dingen , die einfach geschaffen wurden, und ich habe hier ein paar Illustrationen. Ich habe einen Hintergrund, ein paar Ikonen und einige Portraits von Testimonials. Ich möchte sie hier hinzufügen Zuerst fügen wir unsere Farben und unseren Text hinzu. Wenn wir mit der Erstellung der Website beginnen, können wir das gesamte Design aktualisieren. Ich habe einige unserer Farben kreiert. Du hast hier die Pfirsichfarbe und das Lila , das ich kreiert habe. Und wenn du darauf klickst, ist es nur eine Form mit der Farbe darin, du kannst auf der rechten Seite zu Feel gehen und auf diese vier Kreise klicken, und du kannst auf den kleinen Plus-Button klicken und wenn du eine neue Farbe hast, kannst du hier reinkommen und du weißt schon, Pfirsich nennen oder eingeben, was auch immer du willst und eine Sammlung erstellen, damit ich diese Variable erstellen kann. Und jetzt siehst du , dass diese Farbe in unsere Variablen aufgenommen wurde. Wenn ich jetzt oben rechts zu Variablen gehe , kannst du dort darauf klicken. Sie können jetzt sehen, dass unsere Farbe hier hinzugefügt wurde und Sie können sehen, dass es Pfirsich ist. Ich kann hier reinkommen und rechten Maustaste auf Variablen klicken und sie duplizieren. Ich kann löschen oder löschen, was immer ich will. Ich möchte das nur löschen, weil ich sie hier bereits hinzugefügt habe. Wenn du besonders aufgeräumt sein möchtest, kannst du zu den drei Punkten gehen und eine Kollektion erstellen und diese Markenfarben nennen Und jetzt haben Sie hier mehrere Kollektionen. Also ich möchte dieser Sammlung Farbe hinzufügen, das können wir tun, oder Sie können sie einfach in der Standardkollektion dort belassen. Jetzt gehe ich zum Heldenbereich und drücke die Strg-Taste und klicke mit der linken Maustaste. Das hilft mir, mich durch etwas zu und klicke mit der linken Maustaste. Das hilft mir, klicken , das sich innerhalb einer Gruppe befindet. Sie können im Ebenenbedienfeld sehen , dass, wenn ich hier in den allgemeinen Bereich klicke, wenn ich hier auf diesen Abschnitt klicke, Sie sehen können, dass wir einen Text im automatischen Layout haben. Und Sie können sehen, dass es sich ein vertikales Layout handelt und wir haben Text und dann Schaltflächen. Und wenn Sie schnell auf etwas klicken möchten , ohne es ausgewählt zu haben, drücken Sie einfach die Strg-Taste und bewegen Sie den Mauszeiger über das Element. Sie werden es finden und mit der linken Maustaste darauf klicken um in diese Gruppe zu gelangen und es auszuwählen Ist nur ein bisschen schneller. Jetzt möchte ich hier zum Bereich Typografie gehen und BN eingeben. Ich werde die Schrift in B nectar ändern Ich glaube, das ist die Schriftart, die ich für die Marke verwendet habe, also gefällt mir diese sehr gut Und ich werde einfach den Buchstabenabstand anpassen. Gehen wir vielleicht auf 2%. Ja, das ist cool. Und was wir jetzt tun können, ist, dass ich das als Textstil hinzufügen werde. Ich gehe nach oben rechts sehe mir die vier Kreise wieder an. Da steht „Stil anwenden“. Ich werde darauf klicken und ich werde auf die kleine Plus-Schaltfläche klicken. Und ich werde das H eins nennen, und wir können einfach H eine Überschrift machen. Sie können einen kleinen Strich hinzufügen, wenn Sie es einfach lesbarer machen wollen , was auch immer Sie wollen, und wir können tatsächlich mehr Optionen anzeigen und Sie können die Größe und die Salatpaste und all das Zeug anpassen die Salatpaste und all das Zeug Wenn Sie andere Grenzwerte für Mobilgeräte haben möchten, wenn Sie eine separate Größe wünschen, würden Sie einen Textil für Mobilgeräte erstellen Wenn Sie es dann verkleinern, die Größe nicht durcheinander gebracht Im Moment lasse ich diesen Stil einfach hier und erstelle. Wenn ich jetzt zu meinen Schriften gehe, sagen wir, ich möchte diese Schrift hier auswählen, kann ich wieder zu den vier Punkten gehen und mein Stil ist genau da Also werde ich auch einen Stil für Absatztext erstellen. Also für den Absatztext verwende ich Fig Tree. Ups. Feigenbaum, und wir verwenden Medium Wir können uns wahrscheinlich auch für normale 16 entscheiden, vielleicht nehmen wir Größe 20. Buchstabenabstand könnte 0% und die Zeilenhöhe bei 1:50 liegen, vielleicht wollen wir ihn vergrößern oder verhärten Ich denke, wir könnten es etwas verdunkeln. Wir gehen 145. Also werde ich das speichern und wir werden es Body and Create Style nennen , also habe ich jetzt diesen Stil. Aber ich möchte auch die Farbe anpassen. Also werde ich die dunkelviolette Farbe zu 50% verwenden. Gehen wir zu 75%. Wir haben also diese lila Farbe, die gut aussieht, und jetzt sollte sie aktualisiert werden. Wenn ich jetzt gehe, lass es uns schnell testen, und da haben wir es, es sieht wunderschön aus. 5. 4 Design und Bilder Pt: Ich habe die wichtigsten Stile und jetzt arbeiten wir an der Navbar bevor wir eines der anderen Designs hochladen Ich verwende die Navbar, und ich möchte, dass die Navbar beim Scrollen an Ort und Stelle bleibt Wenn ich also scrolle, können Sie derzeit sehen, dass die Navbar nicht im Lieferumfang Ich werde daraus eine feste Navbar machen. Sie möchten also die Navbar auswählen, nach oben rechts gehen und auf Position klicken, und wir möchten sie auf fest ändern Jetzt, behoben, bedeutet das nur, dass es an einem bestimmten Teil auf der Leinwand oder im Browser repariert einem bestimmten Teil auf der Leinwand oder im Browser Wenn ich das jetzt repariere, können Sie sehen, dass der hintere Container entfernt wurde. Und wenn ich jetzt auf unserer Schriftrolle auf Play drücke, können Sie sehen, dass es oben auf der Leinwand klebt. Ich werde einen Teil der Farbe aktualisieren , also doppelklicke ich, stelle sicher, dass wir im Menü ausgewählt sind , und ändere die Füllung in die lila Farbe. Und dann werde ich weitermachen und mein Logo einfügen. Aber ich werde einfach schnell eine weiße Version machen. Und ich doppelklicke einfach hier drinnen in die Firma. Also füge ich das Logo ein und verkleinere es, dann stelle ich sicher, dass es innerhalb des Blocks zentriert ist. Und ich füge das Logo einfach in die Reihenfolge des Layouts ein und stelle sicher, dass alles funktioniert. Fegen. Dann werde ich tun, dass wir hier einen Link haben können Wir können vielleicht sagen, vielleicht Bewertungen, und wir können jetzt sagen, gut. Und ich werde den Button vielleicht so machen. Und ich möchte daraus einen Farbverlauf machen, genau wie eine Spitzenfarbe. Also hast du dort zwei an den Haltestellen. Du kannst es anpassen, wenn du willst. Ich denke , im Moment sieht das gut aus. Und ich möchte die Schrift tatsächlich so ändern, dass sie ein Nektar ist. Ich wähle den Hintergrund aus, gehe runter zu, klicke auf Bild und klicke auf Vom Computer hochladen, und ich suche einfach meine Dateien und doppelklicke und das sollte geladen werden, was super cool ist Ich werde meinen Text ändern, meine Überschrift. Ich möchte den sekundären Button loswerden. Jetzt möchte ich mein Bild hierher ziehen und es einfach hineinlegen. Ich drücke Control Set und wähle in der Kopfzeile aus und füge das Bild hier ein. Wir können es richtig groß machen. Ich werde die Positionierung auf absolut ändern, sodass wir sie an eine beliebige Stelle in diesem Feld ziehen können. also im Hero-Order-Layout etwas Absolutes angeben, Wenn Sie also im Hero-Order-Layout etwas Absolutes angeben, bedeutet das, dass es sich an eine beliebige Stelle innerhalb dieses übergeordneten Containers oder dieses übergeordneten Layouts bewegen kann . Wenn ich also auf Play drücke, kannst du sehen, dass es in dem Bild sein sollte, was cool ist. Und vielleicht möchte ich, dass es den Text ein wenig überlappt Ich weiß nicht, so etwas. Und lassen Sie uns diese Schlagzeile richtig groß machen. Du kannst Strg+Shift und die volle Stopptaste verwenden , um es richtig groß zu machen. Und ich mache einfach weiter und drücke Einfügen. Ups. Und dieser wird lila sein Cool. Und ich werde es auswählen und jetzt werde ich das Feld erweitern, so dass es eng ist, also ist es wie ein Textfeld Also machen wir die Breite einfach auf etwa 1056. Das ist in Ordnung. Wir können es immer anpassen. Und vielleicht können wir mehrere Flaschen haben. Vielleicht haben wir hier einen anderen Geschmack. Ich werde den Text kopieren und einfügen, und ich muss ein paar neue Stile erstellen, also werde ich diesen Stil H zwei machen. Sie können auch die Strg-Taste drücken , um auszuwählen, und dann die Umschalttaste Sie können mehrere Objekte auswählen. Ich wähle die Überschriften aus. Und ich wähle die Karte und ändere einfach die Farbe dieser Füllung, und ich werde hier wahrscheinlich diese helle Farbe verwenden . Lass ein Werkzeug fallen. Sie können mehrere Objekte auswählen und I drücken, um die Pipette zu aktivieren . Ich probiere einfach diese Farbe aus, und das macht es ziemlich einfach Sie möchten mehrere Farben haben . Einer könnte Pfirsich sein, einer könnte 25% sein. Ich weiß nicht, so etwas wäre cool. Ich werde einfach hier reingehen und diese Bilder hier hochladen . Ich werde das einfach da reinziehen. Ich ziehe das andere Bild hierher und lösche einfach das andere. Ich gehe hier rein und gehe zu dem Bild im Ebenenbedienfeld und klicke einfach auf den Sprung, und ich ziehe das andere Bild hierher. Und wir können es vergrößern, und Sie können sehen, dass es den Inhalt bereits ausschneidet, was gut hineinpasst Bei den anderen muss ich sicherstellen, dass es etwas besser passt Also können wir das ein bisschen skalieren. Ich werde auf das Bild klicken und es zuschneiden, sodass wir diesen oberen Bereich entfernen . Drücken Sie die Eingabetaste. Und ich wähle die erste Karte und ich werde sie vielleicht vergrößern. Und ich werde einfach den ganzen Container auch vergrößern , damit wir dieses Bild hier sehen können. Also wählen wir den Grid-Container aus. Wir können also sehen, dass es hier den Bereich mit der Feature-Karte und dann das Raster gibt. Wir wollen das nur ein bisschen vergrößern. Ich wähle die Rückseite aus und wir können den Abstand anpassen. Aber lassen Sie uns die Gesamtgröße dieses Abschnitts erhöhen , damit wir mehr Spielraum haben. Diesen können wir einfach vergrößern. 6. 5 4 Design und Bilder Pt: Habt jetzt einen Sieg. Und für diesen werde ich Victory nutzen. Sieg. Victory Bowl 24. Violett. Ich werde die Überschrift H drei erstellen und dann mache ich diese H drei, mache diese lila. Ich werde das Bild da reinwerfen und die anderen löschen. Wir haben dieses Bild. Ich drücke Shift A , um es in einen Rahmen einzufügen, und ich werde diesen Frame zentrieren. Ich werde das einfach so vergrößern. Eine coole Sache mit Figma-Seiten ist, Sie KI tatsächlich verwenden können, um Bilder zu bearbeiten Also werde ich auf das Bild klicken, um zu fühlen. Ich werde auf Bild bearbeiten klicken und es wird angezeigt. Jetzt sage ich, weißen Hintergrund entfernen. Sie können sehen, dass es sich offensichtlich um KI Beta handelt, aber ich werde Strg+Enter drücken und schauen, ob es den Hintergrund entfernen kann. Ich habe es entfernt, aber es hat diesen grauen Hintergrund, also werde ich sagen, ich möchte sagen, dass ich Hintergrund entfernen möchte, und ich werde diese Bilder hier löschen. Ich werde meine Bilder hierher ziehen und dann skalieren, genau das Gleiche. Du kannst einfach auf die kleinen AR-Symbole unten klicken und dann auf Hintergrund verschieben klicken. Jetzt kopiere ich das Hauptbild und füge es hier ein und füge es in den Kartenbereich ein. Ich gehe nach oben und mache es absolut. Und jetzt können Sie sehen, dass es keine der Karten aus dem Weg schiebt , weil Absolut alle Elemente in diesem Feld ignoriert alle Elemente in diesem Feld und Sie es verschieben können Dann kann ich es hinter mir lassen und ich kann sagen, Zutaten Dann ziehen wir es einfach ein bisschen so hin. Und dann ist das eine lustige Art, dieses Element zu erstellen, und dann kann ich vielleicht Ups machen Ich wähle den Text aus und ändere das Feld vielleicht auf 75%. Jetzt gehe ich zum nächsten Abschnitt über die Grundlagen über. Ich werde einige davon löschen. Ich doppelklicke hier hinein und wähle einfach die Karten aus und kann sie löschen. Mit den Testimonials kann ich kopieren und einfach auswählen und schon kann es losgehen , um Strg+Shift R zu ersetzen. Also werde ich alle Dimensionen dieser Bilder verkleinern Dimensionen dieser Bilder Sie können also mit der rechten Maustaste auf das Seitenverhältnis sperren klicken auf das Seitenverhältnis sperren und ich gebe dann 50 für die Ich mache Feigenbaum. Ich mache das regulär. Ich mache 15, ich nehme 16170. 16 und Füllfarbe, 75%. Ich ändere den Feigenbaum und setze ihn halbfett, und die Farbe könnte dort dunkelviolett sein . Und da haben wir es. Wir haben ein paar nette. Was ist, wenn ich die Rahmenfarbe ändern möchte? Ich drücke einfach Taste und halte die Umschalttaste gedrückt, klicke und wähle die Karte aus, und du kannst sehen, dass der Strich nur ein schwarzer Strich ist, aber wir können ihn in Violett ändern oder so eine orange Lichtfarbe verwenden. Ich nehme die pfirsichfarbene Farbe. Ich finde, es sieht gut aus. Drücken Sie den Knopf und fügen Sie ihn ein. Ich füge das ein. Inzwischen Button im Shop vergrößern. Klappen Sie den Fuß hoch, wir können hier mit verschiedenen Dingen herumspielen . Sie können die Farbauswahl einfach unten ändern . Da haben wir's. Da unten ist etwas anderes. Ich möchte das Logo einfügen, also wähle ich den Abschnitt hier unten im Fuß nach oben aus. Aber ich möchte es außerhalb des Containers haben, und ich werde es auch auf absolut ändern. Und wir können es so aussehen lassen. Ich ziehe einfach die Symbole hierher und dann klicke ich mit der linken Maustaste und lege sie einfach zur Seite. Ich kontrolliere und wähle dann hier drinnen aus und füge das ein. Und ich werde sicherstellen, dass dieser Text ist, ich werde ihn in ein anderes Layout bringen und die Reihenfolge auf horizontal ändern , dann wird es so. Shift A und dann stellt einfach sicher, dass die Lücke dieselbe ist wie die andere. Ändern Sie das Layout. Verkleinern Sie das. Wenn das Design fertig ist. In der nächsten Lektion werden wir lediglich einige Interaktionen und lustige Hover-Effekte hinzufügen 7. 6 Hinzufügen von Interaktionen (Logo-Slider und Hover-Effekte): Deshalb werde ich Ihnen zeigen, wie Sie reibungslose Interaktionen und Hover-Effekte hinzufügen können, um reibungslose Interaktionen und Hover-Effekte hinzufügen Ihre Website zum Leben zu erwecken Zunächst beginne ich mit der Navbar und gehe dann zur Schaltfläche Ich gehe nach oben und klicke neben dem Link auf Plus Dadurch wird ein Link hinzugefügt, und wir können Link hinzufügen. Wir können eine URL eingeben. Wenn es also eine andere Seite gibt, können wir sie mit einer anderen Seite verknüpfen. Wenn ich also nach links oben gehe, auf die Plus-Schaltfläche klicke und sagen wir einfach, ich möchte daraus eine Produktseite machen. Ich kann zu meiner Schaltfläche zurückkehren. Drücken Sie das Drop-down-Menü und holen Sie sich ein Produkt. Wenn ich jetzt mit der Maus darüber fahre und darauf klicke, gehe ich zur Produktseite und oben links können Sie sehen, wie es aussieht. Um es interessanter zu machen, klicken Sie unten auf dieses Ende, laufen Sie nach oben und klicken Sie neben dem Design-Tab auf Interaktion . Wir können hier Interaktionen sehen. Es hat bereits einen Schwebeeffekt. Wir können mehrere Hover-Effekte hinzufügen, wenn Sie möchten. Aber ich kann eine weitere Interaktion hinzufügen. Also klicke ich auf Plus und dann auf Scroll Two und ich werde den Auslöser ändern. Im Moment ist es eingeschaltet, wenn Sie den Mauszeiger bewegen. Sie können dies tun, während Sie die Maustaste drücken, die Maus verlassen und die Maus gedrückt halten. Außer beim Drücken klicken. Ich möchte zum Beispiel zum Abschnitt mit Zitaten oder Testimonials scrollen Beispiel zum Abschnitt mit Zitaten oder Testimonials Und jetzt können Sie diese kleinen Interaktionslinien sehen , die Ihnen zeigen, wohin es geht Also wird es hier runter gehen. Also, wenn ich zurückgehe und die Interaktion mache, wird es das sein. Klicken Sie hier auf Text, und eine der coolen Funktionen ist, dass Sie Dinge tatsächlich mit Code aktualisieren können . Und was wir tun können, ist in der oberen rechten Ecke Mit Code interaktiv machen zu klicken. Und jetzt kann ich der KI sagen, dass sie sich etwas Interessantes einfallen lassen soll. Ich kann also sagen, dass der Text auf HVA wackeln soll. KI wird nachdenken Die Sache ist mit einer netten kleinen Animation versehen. Wenn wir jetzt mit der Maus darüber fahren, kann man sehen, wie es wackelt, was ziemlich cool ist Wenn ich es jetzt schnell testen möchte, ziehen Sie meine Maus und Sie können sehen, dass es Jetzt ist der Text vollgestopft, weil es Beta ist. Sie unterstützen keine benutzerdefinierten Schriftarten. Bearbeiten Sie auch den Code. Und sagen wir einfach, wir wollen diesen Effekt nicht, wir können zu den drei Punkten gehen und oben rechts „Originaldesign wiederherstellen“ sagen , und ich werde diesen Effekt entfernen. Jetzt wird es diesen Effekt also nicht mehr haben. Da die Schriften also nicht registriert werden, können wir den Text tatsächlich skizzieren. Ich doppelklicke darauf, klicke mit der rechten und klicke dann auf Outline Stroke. Wenn Sie also jetzt eine Vorschau anzeigen, ob Sie eine benutzerdefinierte Schriftart verwenden, können Sie sehen, dass sie umrissen wird und dass sie funktionieren sollte. Möglicherweise müssen Sie das für alles tun, aber lassen Sie uns weitermachen und einige weitere Interaktionen hinzufügen. Ich drücke die Plus-Taste und du hast viele verschiedene Effekte. Nehmen wir an, wir möchten einen Enthüllungseffekt erzielen, wir können einen Einblendeffekt machen und wir verlassen den Ausgang oder keinen. Wir können skalieren, einblenden, was auch immer Sie wollen. Lass uns vielleicht von unten reinrutschen. Sobald das Bezahlte geladen ist, wird es eingeblendet und es gibt dir eine kleine Vorschau , was mir sehr gut gefällt. Auch für diese werden wir dasselbe tun. Du kannst auch mit der rechten Maustaste klicken und Interaktionen entfernen , wenn dir das nicht gefällt Also gehe ich hier rein, Interaktionen, Enthüllen, und wir gehen dann auf Slide in den unteren Bereich Laden Sie die Seite und schauen wir uns eine Vorschau an, und Sie können sehen, wie die Designs auftauchen, was super cool ist. Im Grunde ist es am besten , einfach herumzuspielen. Also, weißt du, vielleicht möchte ich eine dieser Karten oder dieses Raster auswählen, wir können interagieren und wir können eine Scroll-Parallaxe machen Das ist vielleicht eine Geschwindigkeit von 50% und du kannst scrollen und du kannst dort den Parallax-Effekt sehen, aber ich will diesen Effekt natürlich nicht Mache auch lustige Dinge wie Hinzufügen einer anklickbaren spielerischen Interaktion Wenn ich zum Beispiel dieses Bild hier haben möchte, kann ich Interaktion verwenden und ich kann es abspielen und es ziehen lassen Und ich kann es mir schnappen und wir wollen nur sichergehen, dass wir es einfach in den übergeordneten Container ziehen können , das ist diese Karte Also werde ich Play drücken, um es zu testen. Wenn ich also mit der Maus darüber ziehe, kann ich es jetzt so herumziehen, was cool ist. Es ist also in dem Container. Aber nehmen wir an, wir wollten es einfach irgendwohin ziehen. Ich kann zum Effekt zurückkehren. Ich kann es aktualisieren, Vorschau anzeigen. Und jetzt sollte es überall hingezogen werden können. Und weil es sich in diesem Container befindet, bewegt es sich nicht, was ziemlich cool ist. Sie können jetzt all diese Symbole sehen, die Sie ziehen können , was einfach ein bisschen Spaß macht. Sie können so viele Interaktionen hinzufügen, wie Sie möchten, um die Seite viel schöner zu gestalten Ich würde vorschlagen, einfache Einblendungen hinzuzufügen. Für diesen können wir also einen Hover-Effekt machen und sagen wir einfach, wir wollen ihn etwas größer skalieren lassen . Wie eins auf vier Wir können den Übergang auf einfaches Ein- und Aussteigen ändern oder Sie können ihn federnd oder schnell machen oder was auch immer Sie wollen Das kannst du dir also ansehen. Wenn ich jetzt auf Play drücke und mit dem Mauszeiger darüber fahre, kannst du sehen, dass es einen coolen Hover-Effekt hat, was Spaß macht Also spiel damit herum. Klasse. Ich werde die Website für Mobilgeräte responsiv , damit alles richtig funktioniert. 8. 7 Mobilgeräte reaktionsfähig machen: Wir werden die Website vollständig responsiv machen , damit sie auf Tablets und Mobilgeräten funktioniert . Sobald Sie also mit Ihrem Design fertig sind, Interaktionen haben und alles einsatzbereit ist, was wir tun können, um diese Seite zu löschen, werde ich auf die Plus-Schaltfläche klicken und einen neuen Breakpoint hinzufügen Egal, welche Änderung Sie auf dem Desktop vornehmen, es wird diese Änderungen auf das Tablet übertragen und dann schäumen Damit wir zum Tablet wechseln und auch ein Handy hinzufügen möchten, empfehle ich immer, zuerst das Design des Desktops zu erstellen, damit es nach unten übergeht . Sie können jetzt sehen, ich bereits erwähnt habe, ob Sie für die kleineren Breakpoints eine andere Größe wählen können für die kleineren Breakpoints eine andere Größe wählen . Deshalb ist es immer gut, zu unseren Topografiestilen zurückzukehren Ich werde das auswählen. Und wenn Sie zur Typografie wechseln, können wir auf Stil bearbeiten klicken und Sie möchten einige Haltepunkte hinzufügen der Tablet-Ansicht können Sie also sehen, dass wir vielleicht auf 35 gehen wollen, und für Mobilgeräte wollen wir vielleicht sogar noch weiter gehen Wir werden etwa 20 gehen. Und das sollte es anpassen. Also, wenn wir hier klicken und es anpassen, aber ich denke, weil es Beta ist, sie das wahrscheinlich immer noch nicht aktualisiert. Also werde ich die Größe einfach selbst ändern und diesen Abschnitt anpassen. Und ich werde diese Flaschen einfach anpassen. Ich werde ein Bestelllayout erstellen und es so anpassen . Eigentlich werde ich weitermachen. Ich werde das einfach anpassen und bei den anderen Flaschen werde ich es tatsächlich verstecken, also lasse ich die Opazität fallen, sodass wir das nirgends sehen können Und natürlich wird es nicht angezeigt, aber wir wollen diese Flasche hier sehen. Geh einfach durch. Wir überprüfen alle Größen, und wenn Sie etwas mehr Polsterung hinzufügen möchten, können Sie das tun Ich denke, es ist vorerst in Ordnung. Für diese Zutaten verschieben wir das einfach in die Mitte. Ich möchte das anpassen und nach unten verschieben. Und alles andere sieht gut aus. Es geht also nur darum, die Abstände und die Größe zu verwalten und sicherzustellen, dass alles in verschiedenen Größen funktioniert. Sobald die Beta-Phase abgeschlossen ist, bin ich mir sicher, dass all diese Korrekturen behoben sein werden. Bring das mit, das hier. Du kannst es rausbringen. Sie können die Größe auch an der Seite anpassen. Okay, Sie können die Änderungen dort sehen. Je weiter es runtergeht, desto anders skaliert es. Für diesen, was wir tun wollen. Wir werden nur das Textfeld neu gestalten. M. Ich werde die Größe anpassen Und ich finde, bis auf diese Zeugnisse sieht alles gut Ich weiß nicht, was ich tun muss, um das zu reparieren. Also habe ich die Bilder einfach erneut gespeichert , weil ich Schnittmasken hatte weil ich sie in Illustrator erstellt habe, diese Probleme Also habe ich es einfach als neu exportiert . Wenn wir jetzt die Skala ziehen, können wir sehen, was sie macht Wenn wir es also verkleinern, können Sie sehen, was bei verschiedenen Größen passiert. Und müsste es reparieren. Sie sehen, wie das Navi und der Text unterschiedlich groß sein sollten. Ich mache also gerne, wenn ich eine bestimmte Größe beibehalten möchte, können wir zur rechten Seite gehen und eine Mindestbreite hinzufügen. Und diese Mindestbreite sollte 612 sein. Wenn ich jetzt auf Play drücke, können Sie sehen, dass es beibehalten und immer zur Mitte ausgerichtet sein sollte . Also los geht's Aber sobald es ankommt, ist es in der mobilen Ansicht immer zentriert und wir können eine Männerbreite von 300 hinzufügen, also sollte es dort zentriert sein, damit Sie es dort sehen können. Das ist also eine Möglichkeit , das Problem zu beheben. Und sobald Sie bereit sind, zeige ich Ihnen in der nächsten Lektion, wie Sie Ihre Website veröffentlichen. 9. 8 Site veröffentlichen Zeigen Sie, wie Sie eine Domäne verbinden: Sobald Sie damit zufrieden sind und alles in Ordnung ist, können Sie links oben auf Veröffentlichen klicken. Und Figmae wird dir eine Staging-Seite geben. Wenn Sie die Domain also nicht verbinden, ist das in Ordnung. Ich kann buchstäblich einfach auf Veröffentlichen klicken und ich werde mit dieser URL verbunden. Wenn du andere Probleme hast, wird es dir sagen, du Masken oder was auch immer hast. Und es gibt Barrierefreiheit und so, aber darauf werde ich wahrscheinlich nicht zu detailliert eingehen. Sobald sie einsatzbereit ist, klicken Sie buchstäblich einfach auf die Website und ich kann sie durchblättern. In der Desktop-Ansicht scheint alles zu funktionieren. Und es ist buchstäblich live im Browser. So veröffentlichen Sie Ihre Website buchstäblich. Wenn Sie nun eine Domain verbinden möchten, klicken Sie auf Verbinden und dann Verbinden. Sie möchten eine Website verbinden. Normalerweise kaufe ich meine Domains bei Go Daddy oder du hast Namecheap, und du folgst einfach den Anweisungen hier. Es ist ziemlich einfach 10. 9 Sonstiges: Für die Teilnahme an diesem kurzen Videokurs zum schnellen Einrichten einer Website Infigma Now Sie müssen kein anderes Tool von Drittanbietern erlernen. Sie können alles machen, von Design über Logos hin zum Entwerfen und Erstellen von Websites, Infigma, was ziemlich cool ist Ich bin mir sicher, dass Sie in den Bereich Diskussion und Klassenprojekte gehen , dass Sie in den Bereich Diskussion und Klassenprojekte Ich werde einige zusätzliche Links einfügen, um einige Dinge zu erklären, weitere Informationen zu geben, einige nützliche Ressourcen sowie einen Wenn Sie kein Briefing zu erstellen haben , können Sie eine ähnliche Marke oder ein ähnliches Produkt erstellen und einfach eine einseitige Landingpage erstellen. Die Klasse, bitte hinterlasse auch eine Bewertung, wenn du das hilfreich findest, damit andere Schüler an dem Kurs teilnehmen können.