Framer: Lerne, wie du in wenigen Minuten mit KI schöne Websites erstellst

1. Einführung: Willkommen zu einer außergewöhnlichen Reise in die Zukunft des Designs. Willkommen bei Framer heute. Ich bin hier, um die Innovation vorzustellen , die Framer von den anderen unterscheidet Und alles läuft auf ein bahnbrechendes Feature hinaus, die KI-Leistung Hallo, ich bin Ellis und arbeite seit über zwei Jahren im Bereich Webdesign . Ich habe einen Abschluss in digitalen Medien Ich habe viele verschiedene Plattformen verwendet, von Wakes und Square Space bis hin zu Webflow Und Framer hebt sich wirklich von anderen ab, eine Plattform, die Ihre Vision mit einer einfachen Requisite versteht Ihre Vision mit einer Innerhalb weniger Augenblicke haben Sie eine voll funktionsfähige, einzigartig zugeschnittene Website zur Hand Das ist die Magie der KI von Framer. Aber lass uns nicht aufhören Lassen Sie mich Sie auf eine kurze Reise durch das mitnehmen, was Sie bei der Erstellung personalisierter Websites lernen werden. Dabei nutzen Sie mühelos die Leistungsfähigkeit von KI für das Content-Management, nutzen Sie mühelos die Leistungsfähigkeit von KI für das um erweiterte Anpassungen zu meistern Dies ist Ihr Plan, um ein Design-Guru zu werden. Wir decken alles ab, von der Erstellung von Blöcken mit Hilfe von Chat-GPT-Hilfe bis hin zur nahtlosen Anpassung der Elemente Ihrer Website Für eine wirklich einzigartige Note tauchen Sie tief in das Wesentliche ein, tauchen Sie tief in das Design verbessert die Navigation, die Perfektionierung von Abschnitten und sogar die Beherrschung der Medienintegration. Sind Sie also bereit, die Macht von Framer zu nutzen und auf der Welle der KI-gestützten Designinnovationen zu reiten? Diese Reise wird die Art und Weise, wie Sie Websites erstellen Es ist Zeit, deiner Kreativität freien Lauf zu lassen. 2. Geschichte des UI-UX-Designs: In diesem Video machen wir also eine Reise in die Vergangenheit, wo wir in die coole Geschichte eintauchen werden, wie sich das UI UX-Design im Laufe der Zeit weiterentwickelt hat. Es ist eine Reise von den Anfängen der Technologie bis hin zu den eleganten und benutzerfreundlichen Benutzeroberflächen, die wir heute genießen Dies ist die Geschichte des Benutzeroberflächen- und Benutzererlebnisdesigns In Ordnung, lassen Sie uns die Dinge beginnen. In den 1960er Jahren, damals, legten Leute wie Douglas Engelbart den Grundstein für das, was unsere modernen Benutzeroberflächen werden sollte unsere modernen Benutzeroberflächen werden Es war die Ära der klobigen Maschinen und einfacher Grafiken. Weit entfernt von dem, was wir jetzt gewohnt sind. Schnell vorwärts, in den 80ern, machten Äpfel auf dem Macintosh Müll Zu diesem Zeitpunkt wurden diese anklickbaren Symbole und Windows zu einer Sache. Plötzlich wurde Computer viel visueller, als wir zu den 2000 Mobiltelefonen kommen, die im Mittelpunkt stehen Erinnern Sie sich an diese guten Telefone von Nokia Sie waren die Vorreiter im Bereich der mobilen Benutzerschnittstelle Die Zeiten des SMS-Schreibens im Neun-Stil. Ein bisschen skurril, aber ach so nostalgisch. Aber Moment mal, es ist 2007 und Apple lässt die iPhone-Bombe fallen , Touchscreens und Pinch-to-Zoom sind voll im Trend Es ist, als wären wir in die Zukunft gesprungen, oder? Mobilgeräte beginnen, das gesamte UI-Spiel zu verändern . Und rate mal was? Hier sind wir heute mit sozialen Medien und Geräten von Abscalore, die mit uns sprechen Ein UX-Designer arbeitet hart daran, unser digitales Leben reibungslos und angenehm zu gestalten Es geht darum, dass sich die App genau richtig anfühlt, wenn Sie auf den Bildschirm tippen. Mit Blick auf die Zukunft kommen einige verrückte Dinge auf uns zu. Augmented Reality und Virtual Reality stehen bald vor der Tür Es wird nicht nur ums Tippen und Wischen gehen. Möglicherweise winken Sie Ihren Geräten zu, um Dinge geschehen zu lassen Bei all dem waren es die Designer, die die wahren MVPs waren, sie haben entworfen, wie wir mit Technologie umgehen, und dafür gesorgt, dass sie nicht nur funktional ist, sondern auch gut aussieht Da hast du es also. Die Geschichte des Benutzeroberflächen- und Benutzererlebnisdesigns. Ich wünsche dir viel Spaß beim Bummeln mit mir durch die Tech-Timeline und wir sehen uns im nächsten Video 3. Warum Framer?: In diesem Video tauchen wir tief in die Welt der Website-Erstellung Wir werden beliebte Optionen wie Quick Square, Space, Webflow und einen Neuling mit einem KI-Twist-Framer untersuchen Space, Webflow und einen Neuling mit einem KI-Twist-Framer Am Ende dieses Videos wirst du eine klarere Vorstellung davon haben, was jede Plattform bietet und warum Framer vielleicht Lassen Sie uns also gleich loslegen. Wenn es um das Erstellen von Websites geht, haben Sie eine Fülle von Optionen Wick und Square Space sind benutzerfreundliche Optionen, perfekt für Benutzer ohne umfangreiche Programmierkenntnisse Sie bieten Dragon-Drop-Benutzeroberflächen, vordefinierte Vorlagen und benutzerfreundliche Tools, mit denen Sie Ihre Website schnell zum Laufen bringen können Dann gibt es noch Webflow, ein leistungsstarkes Tool für diejenigen Mit Webflow arbeiten Sie in einer visuellen Oberfläche haben gleichzeitig Zugriff auf Anpassungen auf Codeebene Es ist wie eine Brücke zwischen Design und Entwicklung und bietet Flexibilität und kreative Freiheit Hier wird es interessant. Framer, der traditionell für seine Fähigkeiten im Prototypenbau bekannt ist, hat Stellen Sie sich vor, Sie geben eine einfache Aufforderung ein und voila, und die KI generiert eine Es ist ein Konzept, das das Spiel verändert. Warum könntest du Framer den anderen vorziehen? Nun, stellen Sie sich die Möglichkeiten mit Framers KI vor, Sie wählen nicht nur Vorlagen Sie generieren benutzerdefinierte Layouts auf der Grundlage Ihrer Ideen. Sie sind nicht an voreingestellte Stile gebunden. Sie haben einen Ausgangspunkt , der einzigartig für Sie ist. Wicks, Square Space und Webflow haben zwar ihre Stärken, und Webflow haben zwar ihre Stärken, KI-gestützte Ansatz von Framer bietet eine erfrischende Herangehensweise Sie können mit KI-generierten Layouts beginnen und diese dann bis zur Perfektion verfeinern. Es ist, als ob Sie einen persönlichen Designassistenten haben immer bereit ist, zu experimentieren und zu iterieren. Aber es gibt noch mehr Framer macht nicht nur beim Design halt. Es überbrückt die Lücke zwischen Design und Entwicklung mit der Möglichkeit , echte Websites zu veröffentlichen Es ist, als hätten Sie eine zentrale Anlaufstelle für die Erstellung und Markteinführung. Die Bequemlichkeit ist am Ende unbestreitbar. Welche Plattform Sie wählen, hängt von Ihren Bedürfnissen ab. Wenn Sie auf der Suche nach einer schnellen Einrichtung und Einfachheit sind, Dochte und quadratischer Raum vielleicht genau das Richtige für Sie. Webflow ist genau das Richtige für alle, die auf der Suche nach fortschrittlicher Steuerung Nun, es ist die avantgardistische Wahl für diejenigen , die KI-gestützte, editierbare Website-Magie wollen Sie sich also zu Beginn Ihrer Website-Erstellung, was Überlegen Sie sich also zu Beginn Ihrer Website-Erstellung, was zu Ihrem Stil und Ihren Zielen passt Vielen Dank, dass Sie mich auf dieser Entdeckungsreise durch Website-Builder begleitet haben. Das werde ich im nächsten Video sehen 4. Framer-Preise: Wie viel kostet es also, Framer tatsächlich zu nutzen? Also, ich habe gute Neuigkeiten. Sie können Ihre eigene Website völlig kostenlos veröffentlichen. Dann kostet der nächste Plan nur 5$ pro Monat. Es fügt eine Startseite und 44-Seitenvorlagen sowie eine benutzerdefinierte Domain hinzu. Als nächstes haben wir den Basisplan , der für persönliche Websites empfohlen wird. Sie können eine unbegrenzte Anzahl von Seiten erstellen. Sie können Ihre Website auch mit einem Passwort schützen und haben eine höhere Besucherobergrenze für 30 USD pro Monat. Sie erhalten den Pro-Plan Es wird für größere Websites empfohlen und bietet detaillierte Analysen der Website sowie zehn Sammlungen von Content-Management-Systemen. Sie haben auch ein Suchlimit von 300 Seiten und eine sehr hohe Besucherobergrenze. Wenn Sie weiter unten hinuntergehen, haben wir tatsächlich Teampreise für 20$ pro Monat Sie können bis zu fünf Redakteure auf Ihrer Website haben und Sie haben einen siebentägigen Versionsverlauf Sie können für 40$ pro Monat auch live mit allen Mitgliedern Ihres Teams gleichzeitig zusammenarbeiten für 40$ pro Monat auch live mit allen Mitgliedern Ihres Teams gleichzeitig Sie erhalten alles , was im Team-Basisplan enthalten ist , für 20$ und Sie können die Projektberechtigungen verwalten Und Sie können auch zehn Editoren haben und Sie haben einen viel, viel größeren Dateispeicher Es gibt auch einen 30-tägigen Versionsverlauf, was für ein großes Projekt sehr hilfreich ist. Wenn Sie wirklich einen Schritt zurücktreten möchten , finden Sie hier einen kleinen Tipp. All diese Preise sind eigentlich die Preise, die Sie pro Monat erhalten, wenn Sie ein Jahr lang alles in großen Mengen bezahlen. Wenn Sie also die Preise ändern und sehen möchten, die monatlichen Preise ohne weitere Bedingungen, wenn Sie nach einem Monat kündigen möchten, finden Sie hier die Preise, die Sie tatsächlich zahlen. Sie sind also etwas teurer. Für das Team Basic ist es etwa 5$ teurer. Und für das Team Pro sind es 50$, also 10$ teurer. Und auch hier können Sie es wieder ein- und ausschalten, und Sie können sehen, dass der Mini nur 5$ kostet. Der Basic ist auch wie fünf und der Pro Und das Gratisangebot bleibt zum Glück kostenlos. Und hier ist noch ein Tipp , den ich wirklich empfehlen kann, sich anzusehen Wenn Sie also nach unten scrollen, können Sie die Beschreibung jedes Tarifs in der detaillierten Beschreibung dessen, was alles bietet, auf wirklich, wirklich benutzerfreundliche Weise haben der detaillierten Beschreibung was alles bietet, auf wirklich, wirklich . Sie können eine visuelle Darstellung der Arten von Diensten sehen, Sie können eine visuelle Darstellung der Arten von Diensten sehen die in jedem Paket angeboten werden. Also, hier ist das , worauf Sie achten sollten. Im Basisplan steht zum Beispiel eine Content-Management-System-Sammlung, oder? Wenn du dir das nur auf dieser Seite ansiehst und noch nicht nach unten gescrollt hast, würdest du denken, oh, enthalten andere Tarife wie das nicht schon, also muss ich den Basic kaufen? Und du klickst auf und holst dir den Plan? Aber wenn Sie eine CMS-Sammlung bevorzugen, können Sie nach unten scrollen und sehen, dass die kostenlose und die Mini-Sammlung bereits diese CMS-Sammlung enthalten. Und Sie können viel weniger bezahlen, oder Sie müssen sogar nichts bezahlen, um diese Sammlung zu haben. Also das ist meiner Meinung nach irgendwie, weißt du, irreführend, ein bisschen, ein bisschen Fehlinformation Und dann können Sie eine detaillierte Beschreibung der CMS-Elemente sehen , und Sie können die detaillierte Beschreibung aller Dienstleistungen sehen , die für die Unternehmen angeboten Ehrlich gesagt glaube ich nicht, dass du das brauchen würdest, aber weißt du, man weiß nie. Und es ist immer gut , deine Möglichkeiten zu kennen. Also ja, pass auf jeden Fall darauf auf. Und wenn Sie etwas weiter nach unten scrollen, gibt es einen FAQ-Bereich für alles rund um Finanzen und Preise. Und diese könnten tatsächlich einige Ihrer Fragen beantworten Schauen Sie sich ihn also auf jeden Fall auch an bevor Sie wichtige Entscheidungen über den Plan Also ja, der kostenlose Service ist großartig, um den Service auszuprobieren und zu sehen, was er zu bieten hat. Und wenn Sie dann tatsächlich Ihre eigene Website oder Ihre Website für ein Unternehmen veröffentlichen möchten , können Sie sich meiner Meinung nach für den Mini entscheiden , nur um diese benutzerdefinierte Domain zu haben. Aber erkunden Sie natürlich Ihre Optionen und Ihre Bedürfnisse, schreiben Sie beispielsweise die gewünschten Funktionen auf, z. B. was Ihre Bedürfnisse sind, und vergleichen Sie sie dann in dieser detaillierten Tabelle. Und passen Sie das einfach an und wählen Sie die günstigste Option. Ich denke, das wäre auch die bequemste Art , Geld zu sparen. Also ja, danke, dass du dir dieses Video angesehen hast und wir sehen uns im nächsten. 5. Erste Schritte: Um mit der Erstellung Ihrer eigenen Website auf Framer zu beginnen , müssen Sie zunächst wissen, wo Sie Dinge auf Framer finden , und sich mit der Benutzeroberfläche vertraut machen Beginnen wir mit der Website selbst und dem, was sie hier auf der Hauptseite zu bieten hat hier auf der Hauptseite zu bieten Sie können tatsächlich sofort mit der Aufforderung beginnen, aber dann müssen Sie ins Detail gehen und die Benutzeroberfläche tatsächlich kennen , um die KI-Eingabeaufforderung und das, was sie produziert hat, anzupassen . Schauen wir uns an, was unten steht. Hier ist ein bisschen Werbung, aber darauf wollte ich mich eigentlich nicht konzentrieren. Hier haben wir wieder die KI-Eingabeaufforderung, aber wenn Sie tatsächlich nach unten scrollen, können Sie auch die Vorlagen erkunden , mit denen Sie beginnen können. Schauen wir uns hier die neuen und die kostenlosen an. Sie können viele Vorlagen haben , die mit Framer erstellt wurden Einige von ihnen wurden möglicherweise mit KI unterstützt, andere wurden vollständig von Designern erstellt Sie haben die kostenpflichtigen und Sie haben auch viele kostenlose Optionen. Hier auf der kostenlosen Registerkarte haben Sie nur die drei Optionen zum Erkunden. Jetzt, wo das geklärt ist, wollte ich Ihnen auch die KI-Website-Vorlagen zeigen, und hier können wir einige Beispiele sehen. Es gibt auch Empfehlungen von Mitarbeitern und Empfehlungen nur von Designern. Wie auch immer, für deine Ressourcen. Abgesehen von diesem Kurs gibt es natürlich viele Ressourcen, die Sie lernen können Wenn du irgendwelche Fragen hast, möchtest du auf ein Thema eingehen , das dich interessiert, um tatsächlich loszulegen und die Oberfläche kennenzulernen, in die wir uns einloggen möchten. Sobald Sie sich in Ihrem Konto befinden , Sie erstellt und das Dashboard befindet sich in der Mitte. Sie müssen die Schaltflächen „Erste Schritte und können mit einem I beginnen und im Handumdrehen Ihre eigene Website erstellen. Sie können Ihr Design auch aus Figma einfügen, oder Sie können sich natürlich auch andere Tutorials als dieses Tutorial ansehen natürlich auch andere Tutorials als dieses Tutorial und Framer mit Framer lernen Darunter findest du dein eigenes aktuelles Projekt. Ich habe bereits ein paar, das ist eine leere Leinwand und etwas , das ich gerade ausprobiert habe. Sie können auch sehen, wann es das letzte Mal angesehen wurde, wann es zuletzt bearbeitet wurde. Sie können es auch auflisten, oder ich habe die Symbole und die Vorschau. Sie haben auch die Suchleiste , um nach Ihrem eigenen Projekt zu suchen. Sie können es nach zuletzt von mir angesehen, zuletzt bearbeitet und alphabetisch sortieren, um Ihr eigenes Projekt zu erstellen . Das können Sie auch tun Hier auf der linken Seite haben wir unser persönliches Konto und unsere persönliche Pause archiviert. Wenn Sie hier klicken, haben Sie die Kontoeinstellungen, den Nacht- und den Tagesmodus, zwischen denen Sie wechseln können Sie haben die Desktop-App , die Sie herunterladen können. Sie können die App auch starten, um aus Figma zu importieren und Ihre eigenen Prototypen zu skizzieren Du kannst diesen Abschnitt „Erste Schritte“ auch ausblenden , indem du hier klickst Sie können auch auf die Startseite gehen und die Support-Community anfragen Hier können Sie sich auch anmelden. Wenn Sie zum Archiv wechseln, können Sie Ihre Archivprojekte sehen , die nicht mehr verwendet werden. Hier. Sie haben auch den Tab Mein Team. Wenn Sie auf die drei Punkte klicken, haben Sie die Teameinstellungen. Du kannst Mitglieder einladen, kopieren, einladen, verlinken und einen neuen Ordner erstellen, um den Überblick zu behalten. Wenn du zu „Alle“ gehst, haben wir eigentlich dasselbe Dashboard , weil ich hier ganz alleine bin. Leider arbeite ich mit niemand anderem zusammen. Wir können zu Vorlagen gehen, Sie können Ihre Vorlagen hier sehen oder Sie können Ihre eigenen Vorlagen erstellen, die Sie mit Ihren Teammitgliedern teilen können. Wenn wir auf archiviert gehen, haben wir das Archivprojekt des Teams. Gehen wir zu Pausen und gehen wir hier zu einer leeren Leinwand, lassen Sie uns das löschen. Wir haben tatsächlich noch eine Menge zu entdecken. Lass uns eins nach dem anderen gehen. Oben links haben wir das Framer-Logo und wir haben die Möglichkeit, zum Dashboard zu gehen Wir haben die schnellen Aktionen. Wir haben auch eine Reihe verschiedener Optionen. Hier können Sie eine neue Datei und alle Optionen mit der Datei erstellen . Sie können auch bearbeiten, z. B. kopieren, einfügen, auswählen. All diese haben ihre eigenen Tastenkombinationen , bei denen es sich um herkömmliche Tastenkombinationen handelt. Auf keinem Laptop werde ich ins Detail gehen. Dann hast du die Aussicht. Wir können die Modi hier ändern. Auch hier können wir hinein- und herauszoomen Sie können dies auch mit Ihrem Mauspad, Ihrer Maus tun , was auch immer Sie möchten. Sie können Ihren Text hier stilisieren, was auch auf der rechten Seite möglich ist Praktischer, das zeige ich dir später. Dann haben wir die Gruppen. Gruppen. Wir können Dinge umdrehen, wir können Komponenten erstellen und wir können Komponenten aus Code erstellen. Wir können eine Vorschau anzeigen, wir können auch Codekomponenten erstellen. Hier haben wir einige Einstellungen für die Seiteneinstellungen. Wir haben erweiterte Seiteneinstellungen wie benutzerdefinierte Domains, Weiterleitungen und Analysen sowie Ihre Pläne und die Version des Verlaufs Ihrer Website für alle Fragen, an die Sie sich wenden können, um Hilfe zu erhalten. Sie können auch zu Ihrem Konto zurückkehren. Nun, da wir das oben untersuchen, haben wir den Namen des Projekts und den Plan , auf dem sich die Website befindet. Auf der rechten Seite haben wir das Kontologo. Wir haben Seiteneinstellungen. Wir haben auch die Live-Vorschau-Schaltfläche, die Ihnen die Version der Website anzeigt , wenn sie veröffentlicht wird. Sie können hier auch Mitarbeiter einladen. Sie können Ihre Website hier veröffentlichen und online stellen. Wenn wir nach links gehen, haben Sie Ihre Seiten, Ihre Ebenen und Ihre Inhalte, was im Grunde einem Baum von breit zu schmaler ist . Zuerst haben Sie Ihre Seiten. Wir haben jetzt nur noch eine Seite, unsere Homepage Sie hätten auch Ihr CMS hier, und Sie können eine Leinwand erstellen wenn Sie einen Prototyp erstellen möchten. Lass uns das löschen. Wenn Sie Ihre Website tatsächlich erstellen, werden Sie hier mit Ebenen arbeiten. Wir haben tatsächlich ein paar Texte, die wir nicht brauchen. Sie können sehen, dass Sie mit KI beginnen können. Und wir werden eine Reihe verschiedener Ebenen erstellen die wir in den späteren Videos eingehen werden. Hier werden all Ihre Ressourcen wie Bilder und Code sowie verschiedene Stilisierungen hier behandelt. Oben können Sie Ihre Elemente einfügen. Sie können mit KI beginnen, Abschnitte und Überschriften einfügen Sie erstellen hier Ihr CMS und importieren alle Ihre Elemente wie Medienformulare und Symbole hier hinein. Als nächstes haben wir das Layout. Sie können das Layout der Webseite anpassen. Sie können auch Text erstellen , der den Cursor verändert. Sie können eingeben, was Sie wollen. Eigentlich öffnet sich auf der linken Seite das Fenster, das wir hier sehen können Dies sind alle Ausrichtungsoptionen hier. Sie können auch auf etwas verlinken. Sie können die Position des Textes auch so anpassen . Sie können es auch anklicken und hierher ziehen, und wir ändern die Zahlen hier automatisch. Sie haben auch die Art der Positionierung, die fortgeschritten ist und im Grunde davon abhängt, wie der Text entsprechend den Inhalten auf der Website positioniert wird . Wir haben auch die Größe des Textes. Wir können Effekte hinzufügen, wenn der Mauszeiger bewegt oder gedrückt wird. Du kannst einen Loop haben Kann verschiedene Stile haben, wir können es verstecken, die Kapazität ändern. Als nächstes haben wir die Schriftfarbe, die eigentliche Schrift. Sie können es in alles ändern. Sie können auch die Schriftgröße, die Ausrichtung der Schrift und einige Barrierefreiheitsoptionen ändern Ausrichtung der Schrift . Hier unten haben Sie Ihre Cursoroptionen. Dieser zieht einfach auf der Leinwand herum. Dieser ist nur dein normaler Cursor zum Auswählen und Ziehen von Dingen Das ist zum Kommentieren. Hier können Sie auch den Modus ändern. Ganz oben, nach dem Text, kommt zum Beispiel CMS. Sie können Ihren eigenen Blog hinzufügen oder Ihre eigene CSV importieren, oder Ihre eigene CSV importieren um Ihre eigene CMS-Sammlung zu importieren. Sie können hier auch Ihre eigenen Aktionen haben, bei denen es sich lediglich um Verknüpfungen zu einigen Aktionen auf der Website handelt. Erstellen Sie beispielsweise mit KI oder starten Sie eine Webseite, erstellen Sie eine Komponente usw. Dies war eine Einführung in Ihre Benutzeroberfläche , nur um Sie mit Ihrem Arbeitsbereich vertraut Und ich werde dich im nächsten Video sehen. 6. Übung: Erstelle ein Konto: Ihre allererste Framer-Aufgabe besteht also darin, ein Konto zu erstellen und an den Punkt zu gelangen, an dem Sie Ihre Website erstellen können Auf der Hauptseite klicken Sie also auf Anmelden Sie wählen Ihre Anmeldemethode und klicken auf Ihre Option, entweder melden Sie sich bei Google an oder melden Sie sich mit E-Mail an. Nach der Bestätigung und Aktivierung über die E-Mail, die Sie erhalten, und Ihren Posteingang können Sie loslegen. Und wenn du es üben möchtest, kannst du es alleine machen oder du kannst diesem Video folgen und es zusammen mit mir machen. Also wir sehen uns im nächsten Video. 7. Kapitelübersicht: In diesem Kapitel haben wir also begonnen, Framer, die Geschichte des Benutzeroberflächen - und Benutzererlebnisdesigns, zu untersuchen die Geschichte des Benutzeroberflächen - und Benutzererlebnisdesigns Was es ist, warum es so wichtig ist, UX-Designer für Benutzeroberflächen dort zu haben , wo alles begann Wo alles begann und wo wir uns gerade befinden und was die Zukunft in Bezug auf das UI UX-Design für uns bereithält . Wir haben uns auch mit der Oberfläche von Framer befasst, wo Dinge, was Sie tun können, eine kleine Anpassung des Textes sind eine kleine Anpassung des Textes Wir haben uns ein wenig mit der Umgebung von Framer befasst. Wir haben uns auch die Vorlagen angesehen. Framer könnte die Wahl für Sie sein, warum Sie einen KI-gestützten Website-Builder verwenden möchten Warum würden Sie zum Beispiel nicht Wicks Square Space oder Webflow verwenden , die alle an der Spitze stehen Aber Framer ist so ein Neuling und kreiert so viele Innovationen gleichzeitig , dass ich ehrlich gesagt nicht glaube, warum du es nicht versuchen solltest, zumindest sowieso. In der Kapitelzusammenfassung haben wir uns diese Dinge angesehen, wir haben auch gelernt, wie man ein zumindest sowieso. In der Kapitelzusammenfassung haben wir uns diese Dinge angesehen, wir haben auch gelernt, wie diese Dinge angesehen, wir haben auch gelernt, eigenes Konto erstellt und wie man eigenes Konto erstellt und Im nächsten Kapitel werden wir tatsächlich Ihre eigene Website erstellen Und es wird nicht irgendeine Website sein, sondern es wird eine KI-gestützte sein. Das heißt, Sie werden lernen , Ihre eigene Aufforderung zu schreiben. Und wie man so detailliert wie möglich ist. Was sind einige Tipps, um das bestmögliche Ergebnis mit der KI zu erzielen. Wir werden auch lernen, wie man Dinge anpasst, wie man die Schriftart ändert, wie man mit den Farben und dem Layout der Seite herumspielt . Wir werden auch einige externe Tools untersuchen, über die ich im nächsten Kapitel sprechen werde . Wir sehen uns dort. 8. Kapitel-Einführung (Deine erste Website): Willkommen zum nächsten Kapitel. Ich habe dir schon einen kleinen Vorgeschmack gegeben. Im zusammenfassenden Video des letzten Kapitels habe ich dir auch einen Hinweis darauf gegeben, habe ich dir auch einen Hinweis darauf gegeben was wir sonst noch mit Framer verwenden werden Tatsächlich handelt es sich dabei um einen Farbwähler und einen Farbpaletten-Assistenten , der Ihnen hilft, die besten Farbentscheidungen für Wenn Sie mit den KI-generierten nicht zufrieden sind, können Sie diese auch als Leitfaden verwenden Wie ich bereits in diesem Kapitel erwähnt habe, werden wir uns mit Ihrer eigenen ersten Aufforderung zur Erstellung einer Website befassen. Wir werden das üben, indem wir später gemeinsam eine Aufgabe erledigen. Ich werde Ihnen auch einige Tipps und Details geben, wie Sie mit KI eine detaillierte Aufforderung schreiben können, um die besten Ergebnisse zu erzielen. Wir sehen uns im nächsten Video. 9. Deine erste Aufforderung schreiben: Lassen Sie uns tatsächlich lernen , wie Sie KI einsetzen und die effektivsten Ergebnisse für Ihre eigene benutzerdefinierte Website erzielen die effektivsten Ergebnisse für können. Ein paar Tipps zum Schreiben einer detaillierten Aufforderung für Ihre Website sind also der erste, der spezifisch ist. Geben Sie klare Anweisungen zu der Art der Website, die Sie erstellen möchten. Geben Sie Details zum Zweck, Zielgruppe und zu allen gewünschten spezifischen Funktionen an. Als nächstes kommen die Designelemente. Beschreiben Sie die visuellen Elemente, die Sie im Sinn haben. Erwähnen Sie die Farbe, die Palette, Typografie, die Vorlieben und alle Branding-Elemente Als nächstes kommt die Benutzererfahrung. Erläutern Sie die Benutzererfahrung, die Sie anstreben. Suchen Sie ein klares und minimalistisches Design oder etwas Lebendigeres und Dynamischeres vor diesem Hintergrund Lassen Sie uns vor diesem Hintergrund eine Beispielaufforderung schreiben Also lass uns schreiben, ich möchte eine Portfolio-Website erstellen. Hier sind wir und geben an, was wir eigentlich kreieren wollen und was wir uns für mein Fotogeschäft wünschen. Auch hier ist es gut, so detailliert wie möglich zu beschreiben, welche Art von Geschäft ich gründen möchte, meine Website. Es ist eine wirklich gute Aufforderung. Wenn man zeigt, um welche Art von Geschäft es sich handelt und wofür es eigentlich gedacht ist, ist es wirklich toll, wenn die KI Sie versteht Lassen Sie uns als Nächstes schreiben. Ich möchte ein sauberes Design, das meinen kreativen Stil widerspiegelt Hier gehen wir zur Stilisierung über. Wir haben erwähnt, dass wir ein sauberes und modernes Design wollen und ich möchte auch meinen kreativen Stil widerspiegeln Und wir werden unseren kreativen Stil in den nächsten Sätzen beschreiben . Schreiben wir, die Farbpalette sollte eine Mischung aus gedämpften Pastellfarben Hier beschreiben wir bereits unsere persönlichen Vorlieben, unsere kreativen Stile, wie bereits erwähnt Und wir geben ihm auch eine Farbpalette, mit der er arbeiten kann. Und diese Beschreibung sollte uns für den Anfang gut sein. Und hier können wir die Leiste sehen, die gefüllt wurde und beschreibt, wie detailliert Ihre Beschreibung ist. Und ob es gut genug , damit die KI es gut ausführen kann . Wenn wir also auf Start klicken, wird tatsächlich mit der Erstellung Ihrer Website begonnen. Dafür ist das nächste Video gedacht. Ich möchte also nicht, dass du dich mit einem Cliffhanger zurücklässt, aber ich werde dich im nächsten Video sehen 10. Nach dem Prompt: Das vorherige Video. Wir haben es hier unterbrochen, indem eine ziemlich detaillierte und achtfache Beschreibung geschrieben haben. Lassen Sie uns also tatsächlich auf Start klicken und sehen, was es generiert Du kannst den Fortschritt der Schöpfung sehen, oder? Während der Erstellung können Sie sehen, dass sofort die optimierten Versionen der Website für Tablets und Telefone erstellt die optimierten Versionen der Website für Tablets und Hier werden Sie aufgefordert, Ihre kostenlose Domain mit der Framer-Punktendung auszuwählen , und wir werden auf Das Tolle daran ist, dass die KI auch Text für Sie und alle Header generiert Selbst wenn Sie sich nicht sicher sind, was Sie auf Ihrer Fotografie-Website schreiben werden, hat Judas bereits einen Vorschlag gemacht, womit Sie sich befassen können Hier haben wir also einige Platzhalterfotos, einige Beschreibungen der Und es wurden verschiedene Elemente verwendet , um die Website optisch ansprechender zu gestalten die Website optisch ansprechender Und Sie haben die Bewertungen ganz unten, wie bei jeder klassischen, Sie wissen schon, service-basierten Website. Ganz unten haben wir eine kleine Fußzeile mit den Social-Media-Symbolen und dem Urheberrecht Also ich mag diese Aufforderung irgendwie und ich habe das Gefühl, dass wir uns daran halten Und Sie können sehen, dass die optimierten Versionen wirklich gut optimiert sind und Sie nicht wirklich viel tun möchten. Wenn Sie mit dem Design zufrieden sind, können Sie sofort Ihre Bilder anstelle der Platzhalter einfügen und den Text vielleicht ein wenig ändern Und es wäre natürlich ziemlich gut, die Links hier anzuhängen Also ja, das ist wirklich unglaublich, und ich werde im nächsten Video sehen, wie wir all diese Elemente anpassen können. 11. Deine erste Website anpassen: Jetzt, wo Sie Ihre eigene, fertige Website haben , die von KI generiert wurde, versucht sie tatsächlich noch besser zuzuschneiden und alles genau richtig zu machen Um Ihre Website anzupassen, klicken Sie einfach auf das Element, das Sie bearbeiten möchten. Und Sie können entweder KI verwenden, um es zu ändern oder Sie können nach rechts gehen und es ändern. Lassen Sie uns zum Beispiel die Farbe der Textur, Rot, ändern , indem wir nach rechts gehen. Und du kannst hier klicken, Farbe, du kannst die Farbe hier ändern. Sie können das Element auch bewegen , um die Position der Elemente zu ändern. Ich möchte zum Beispiel hier sein und das sieht aus wie ein Tagebuchcover und es ist meiner Meinung nach perfekt für eine Fotografie-Website hier, zum Beispiel. Ich kann auch etwas anderes schreiben, zum Beispiel könnte Space and Explore Now so bleiben. Und wir könnten dieses Datum aktualisieren, wenn wir wollen. Und es ist derzeit auf dem neuesten Stand. Für dieses ändern wir also die Position des Bildes. Und wenn wir runter gehen, kannst du hier oben tatsächlich alles ändern. Sie können die Position des Absatzes in der, der Überschrift hier wieder ändern des Absatzes in der, der Überschrift hier wieder . Wenn Sie beispielsweise doppelklicken, gelangen Sie zu dem Bild, auf das ein Effekt angewendet wird. So können Sie beispielsweise verschiedene Mischmodi auswählen. Im Moment ist es bei Helligkeit und Grauskala, deshalb ist es so Aber wenn Sie darauf doppelklicken, sieht das Bild tatsächlich so aus Wenn Sie zum Normalmodus wechseln und die Graustufen verringern, haben wir das normale Bild. Sie können anstelle eines Bildes auch verschiedene Füllungen auswählen . Und Sie können Ihr eigenes Bild ersetzen und auswählen , indem Sie hier klicken. Sie können auch die Auflösung und die Größe ändern und aus Gründen der Barrierefreiheit Alternativtext hinzufügen. Außerdem finden Sie hier Archivfotos und -bilder, die Sie verwenden könnten, und Sie könnten die Suche verwenden. Sie können das Bild auch zuschneiden , wenn Sie möchten. Also lass uns weitermachen. Geh runter und es ist so ziemlich dasselbe. Wir haben noch ein paar Elemente , die wir verschieben können. Und hier können wir den Text ändern, die Symbole. Das alles ist anpassbar und Sie können es jederzeit ändern. Und hier kannst du auch das für uns erstellte Theme sehen. Und wir können es mischen und wir können die Elemente auswählen, die wir mischen möchten, und es wird entsprechend der Farbpalette gemischt Das war's für dieses Video und wir sehen uns im nächsten 12. Farbpaletten-Picker: In dieser Lektion wollte ich Ihnen ein externes Tool zeigen , das ich verwende, wenn ich meine eigenen Websites erstelle und wenn ich Farben und eine Farbpalette auswählen muss, insbesondere, wenn ich die Barrierefreiheit berücksichtigen muss Barrierefreiheit berücksichtigen Im Allgemeinen ist es ein wirklich gutes Tool, das Ihnen hilft, die richtigen Farbentscheidungen zu treffen und es trotzdem auf Sie und Ihre tatsächlichen Bedürfnisse zugeschnitten zu haben . ersten Blick mag das für einen einfachen Farbwähler überwältigend erscheinen , aber tatsächlich steckt eine ganze Farbtheorie hinter der Auswahl der richtigen Farben für Ihre Website oder für irgendetwas anderes, jedes Grafikdesign, das Sie machen Schauen wir uns zunächst die Hauptseite an. Nur um das klarzustellen, das ist Adobe Color, ein externes Tool, mit dem ich meine Farben auswähle. Ich habe nur mein Adobe-Konto verwendet, um dieses Tool zu verwenden. Hier finden wir eine Beispiel-Farbpalette, nur um Ihnen den Einstieg zu erleichtern. Hier können Sie sehen, dass wir das Farbrad haben. Wir haben Tools für Extrahieren, Theme , Extrahieren, Gradient und Barrierefreiheit. Fangen wir mit dem Farbrad an. Sie kennen das wahrscheinlich. Das ist ein Farbrad. Und sieh dir an, was passiert, wenn ich mir einen dieser Knoten schnappe und ihn einfach herumführe . Er ändert die Farben , die mit dieser Farbpalette verknüpft sind. Der Grund, warum das passiert, diese Veränderung passiert, liegt eigentlich auf der linken Seite, die Harmonie regiert. Es gibt viele verschiedene Harmonieregeln, und die Erklärung finden Sie hier. Die Farbregeln sorgen für ein harmonisches Gleichgewicht der Farben auf der Grundlage der Farbe, die Sie als Grundfarbe festgelegt haben Im Moment ist dies zum Beispiel unsere Grundfarbe Wir können die Grundfarbe auswählen, indem wir einfach darauf klicken, und Ihre Entscheidung wird auf dieser Farbe basieren. Es gibt unterschiedliche Regeln. Monochromatisch bedeutet zum Beispiel, dieselben Farben im gleichen Bereich zu wählen dieselben Farben im gleichen , nur unterschiedliche Und Sie können hier auch Knoten hinzufügen. Sie können eine Triade haben, Sie können Komplementärfarben haben, oder? Das ist wirklich nett. Geteilt komplementär, doppelt geteilt, komplementär. Und all diese verhalten sich auf unterschiedliche Weise. Es ist alles nur für Sie erledigt, damit Sie es automatisch zusammenfügen können. Also ja, es gibt verschiedene Arten von Regeln und du kannst auch deine eigenen benutzerdefinierten Regeln festlegen, einfach Knoten hinzufügst und herumspielst. Und das basiert nicht wirklich auf irgendwelchen Regeln, also solltest du vielleicht vorsichtig damit sein. Ich würde empfehlen, zunächst bei diesen zu bleiben, bei den voreingestellten, zum Beispiel, ich mag diese, und ich kann diese Farbpalette in meiner Bibliothek speichern . Ich kann es auch zum Beispiel mein Grün nennen . Und ich kann auch einige Tags hinzufügen, damit es leichter zu finden ist. Ich kann es speichern und ich veröffentliche es auch damit die Leute meine Farbpalette sehen und ausprobieren können. In der Mitte siehst du die Farben und kannst die Hauptfarbe auswählen. Sie können auch den Modus wählen, in dem Sie sich befinden, genau hier. Und Sie können hier auch die Werte ändern, wodurch sich auch die Farbpalette vollständig ändert. Sie können mit den Argu-Werten und der Helligkeit herumspielen Argu-Werten und der Helligkeit Im Grunde ist alles anpassbar. Sie haben auch ein Farbauswahl-Tool. Sie können eine entsprechende Palette erstellen. Hier können Sie ein Thema aus einem von Ihnen bereitgestellten Foto extrahieren . Es kann Ihnen hier eine Farbpalette geben. Sie können hier dasselbe tun und einen Farbverlauf erstellen. Sie können Ihre Farbpalette tatsächlich auf Kontrast und Barrierefreiheit überprüfen . Erinnern Sie sich an meine Farbpalette , die ein wenig durcheinander geraten ist. Sie können, Sie können die Farbpalette tatsächlich nach diesen Regeln wählen . Sehen Sie zum Beispiel, C und D stehen in Konflikt. Diese beiden bewegen die Farbfelder auf dem Farbrad, sodass die Farben deutlich erkennbar und farbenblind sind. Eine farbenblinde Person ist möglicherweise nicht Lage, diese beiden Farben zu unterscheiden Das müssen wir ändern, es gibt keine Konflikte. Wenn wir es so ändern, haben wir den Farbenblindsimulator und wir können tatsächlich sehen, wie diese Farben aus der Perspektive einer farbenblinden Person aussehen würden . Wir haben den Tresor für Farbenblinde und wir haben den Kontrastprüfer Sie können das überprüfen, Sie haben die verschiedenen Stufen der Barrierefreiheit Aa ist leichter zu qualifizieren als AAA. Lass uns mit AA gehen. Und wir können hier die Farbe wählen und sie dunkler und heller machen. Und wir können sehen, dass dieses Kontrastverhältnis in Ordnung ist. Aber wenn wir das abnehmen und es dunkler machen, schlägt alles fehl und das Kontrastverhältnis ist nicht gemeint. Du siehst hier, du kannst das vielleicht so ändern. Aber nein, selbst wenn du das heller machst, wird es hier nicht funktionieren. Zum Beispiel schlägt es in der kleineren Schrift fehl, aber in den höheren Schriften ist es in Ordnung. Hier können Sie tatsächlich Kontrastvorschläge haben , die sich ändern werden. Zum Beispiel können wir ein Kontrastverhältnis festlegen. Es wird uns Vorschläge geben. Zum Beispiel schlechter Kontrast, das wird es dir auch geben. Wir können es in Bibliotheken speichern. Hier oben haben wir noch ein paar lustige Dinge, um uns umzuschauen. Möglicherweise gibt es die Explore-Seite , auf der Sie die Farbpaletten verschiedener Benutzer erkunden und sehen können , wo sie verwendet wurden und wo sie extrahiert wurden Als Nächstes haben wir Trends. Auf diese Weise können Sie sich umschauen und die Farbtrends der Welt in Mode, Illustration und Grafikdesign sehen. Auf diese Weise können Sie über die beliebte Farbpalette auf dem Laufenden bleiben . Als Nächstes haben wir Bibliotheken, in denen Sie Ihre eigene Farbpalette haben , die Sie erstellt haben. Als Nächstes haben Sie den Theme Switcher. Sie können auch ein kleines Farbspiel spielen, und Sie müssen sich die Reihenfolge merken, in der es gespielt wurde, zum Beispiel hier, hier. Und du hast auch einen Timer. Es macht einfach Spaß, damit herumzuspielen, zu erkunden, vielleicht ein paar neue Farben zu sehen, die dir gefallen, und sich das zu notieren. Es wird zunehmend schwieriger und schwieriger. Lass uns das letzte machen. Oh, ich weiß nicht, ob ich mich an diesen erinnere. Und das Spiel ist vorbei. Siehst du, du kannst auch deinen Highscore twittern. Hier hast du nur ein paar weitere Hilfsschaltflächen, wie Feedback im Hilfeforum, dein eigenes Konto, verschiedene Adobe-Apps und Adobe Cloud. Das ist alles, was ich dir für den Farbwähler zeigen wollte. Ich hoffe es hat dir gefallen und wir sehen uns im nächsten Video. 13. Praxis: Erstelle deine erste Website: In dieser Praxis werden wir unsere eigene erste Website von Grund auf neu erstellen . Wenn Sie möchten, können Sie es alleine ausprobieren, oder wenn Sie möchten, können Sie mir folgen. Und wir können das zusammen machen. Ich werde auf Start klicken. Mit KI. Zu Beginn werde ich eine Aufforderung für uns schreiben. In meinem Fall werden wir eine Website für Yeti Learn entwerfen Aber es kann alles sein, was Sie für Ihre persönliche Website wollen , oder es kann eine Portfolio-Website sein Es kann alles sein, was du willst. Ich werde anfangen, meine Aufforderung zu schreiben, eine Website für Yet Learn. Eine Lernplattform , die Kurse anbietet, die in unterschiedlichen Lehr- und Kursplattformen verfügbar sind . In den Kursen geht es um Creative Coding, Spline, Unity, Unity, Do Firefly, Adores Express und Journey Versuchen wir es mit dieser Aufforderung. Sie können es sehen, den Titel und unseren Namen genau in die Mitte setzen . Es gibt Preise auf einer FAQ-Seite. Ich habe tatsächlich einen Text darüber geschrieben , was Sie in unseren Kursen gelernt haben Ich möchte diese Farben erwähnen. Die Farbpalette ist, lassen Sie uns angeben, dass dies die Primärfarbe ist. Mal sehen, was es kläglich erzeugt. Wir können sehen, was es für uns generiert hat. Wir können nur deine innere Einheit sehen. Ich habe hier einen Text. Modernste Kurse für verschiedene Qualifikationsstufen. Hier haben wir einige Kurse wie den Sublime-Kurs, den Firefly-Kurs und den Unity-Kurs der Preisangaben wird dieser Abschnitt entfernt , da wir keine Kurse auf dieser Website verkaufen Das ist nur informativ. Das gefällt mir zum Beispiel nicht. Ich kann das regenerieren. Ich mag eigentlich nichts davon, also können wir stattdessen einfach FAQ eingeben Wir haben einige Fragen, die sich die Leute vielleicht stellen. Jetzt, wo wir das grundlegende Layout hier haben. Wir sollten auch die Preisgestaltung von hier entfernen. Kurse würden hier stattfinden, häufig gestellte Fragen könnten uns dorthin führen. Und ich denke, ich bin ziemlich zufrieden mit den Farben. Und jetzt können wir dies tatsächlich als Ausgangspunkt für die vollständige Anpassung unserer Website verwenden Ausgangspunkt für die vollständige Anpassung unserer Website Zum Beispiel Kurse hier. Ja, ich bin eigentlich ziemlich zufrieden mit dieser Seite. Wir werden uns eingehender Anpassung und dem Hinzufügen von Abschnitten und dem Entfernen von Abschnitten, der Navigation und dem Erstellen mehrerer Seiten in den Videos befassen , die im nächsten Kapitel erscheinen 14. Kapitel-Zusammenfassung (Deine erste Website): In diesem Kapitel haben wir also tatsächlich Ihre eigene erste Website erstellt. Wir haben zunächst damit begonnen, eine Aufforderung zu schreiben, wie man eine Aufforderung schreibt, und einigen Tipps und Tricks, wie man die detaillierteste Aufforderung schreibt und welche Einschränkungen , Sie wissen schon, die Framer-KI hat Nichtsdestotrotz finde ich es ziemlich gut, es ist immer noch KI und es erstellt tatsächlich aus einer einzigen Aufforderung heraus eine funktionierende Website für Sie Ich habe Ihnen auch ein Farbauswahl-Tool gezeigt , mit dem Sie Ihre Farben für Ihre Website für so ziemlich alles auswählen Ihre Farben für Ihre Website für können, was Sie in der digitalen Welt wollen Sie können es im Grafikdesign verwenden. Sie können es im Webdesign verwenden. Und ich wollte dir nur ein wirklich nützliches Tool zeigen , das deinen Arbeitsablauf hoffentlich ein bisschen einfacher macht. Dann habe ich Ihnen einige Anpassungen von Schriftarten gezeigt, wie man die Farben von Elementen ändert und wie man ein Bild ändert. Wie ändere ich den Text? Wie man sich mit KI tatsächlich regeneriert. Wenn Sie mit dem Ergebnis nicht zufrieden sind, es aber tatsächlich noch einmal versuchen möchten Ja, wir haben tatsächlich Ihre allererste Website erstellt , die ebenfalls voll funktionsfähig ist. Im nächsten Kapitel werden wir uns tatsächlich mit CMS, einem Content-Management-System, befassen. Ich werde in der nächsten Einführungsstunde detailliert darauf eingehen, was es ist, aber ich hoffe, wir sehen uns im nächsten Video 15. Kapitel-Einführung (CMS): In diesem Kapitel dreht sich also alles um CMS. Sie werden mich fragen, was CMS ist? Nun, es steht für Content Management System, was im Grunde ein System ist, Sie Ihre Inhaltserstellung verwalten können, z. B. von Blogs über Stellenausschreibungen bis hin zu Marketingseiten. All das wird von Content-Management-Systemen verwaltet. In CMS und Framer gibt es Sammlungen, mit denen Sie Inhalte auf anzeigen und Inhalte auf Ihrer Website einfach verwalten Eine Sammlung in Framer funktioniert wie eine einfache Datenbank, in Sie eine Reihe verschiedener Felder mit jeweils einem bestimmten Typ verwenden, um eine Liste von Elementen zu sammeln, die auf der gesamten Website gespeichert und referenziert werden können der gesamten Website gespeichert und referenziert werden Dies ermöglicht eine größere Flexibilität und Kontrolle über den Inhalt Ihrer Website Machen Sie es einfach, mit aktuellen und relevanten Informationen Schritt zu halten und relevanten Informationen ohne das Design Ihrer Website zu beeinträchtigen. CMS-Seiten können Sie Inhalte wie Blogbeiträge, Hilfeartikel und aktuelle Stellenangebote anzeigen , die auf CMS-Elementen basieren. Deshalb werden wir detailliert auf alle CMS-Funktionen eingehen. Deshalb werden wir in diesem Kapitel detailliert auf das Content-Management-System eingehen und Sie werden im Laufe der Zeit mehr erfahren. Ich verspreche, es ist nicht so kompliziert, es ist einfach einfacher, es zu tun, als es zu erklären und es durch Handeln zu lernen Lassen Sie uns gleich eintauchen und wir sehen uns im nächsten Video 16. Eine Blog-Website erstellen: In diesem Video werden wir sehen, wie Sie Ihr eigenes CMS erstellen. Das bedeutet, dass Sie Ihren ersten eigenen Blog erstellen müssen , der in einem Content-Management-System gespeichert wird . Kehren wir zu unserer Website zurück , die wir im vorherigen Kapitel erstellt haben, nur als Beispiel, das wir verwendet haben. Hier ist unsere Website und wir möchten auf CMS klicken. Wir können entweder eine CSV-Datei importieren, um eine CMS-Sammlung zu haben, oder wir können einen Blog hinzufügen. Hier haben wir verschiedene Themen. Als Beispiel haben wir hier fünf verschiedene Blogs. Hier auf der linken Seite haben wir die Sammlungen selbst, über die ich im vorherigen Video gesprochen habe. In der Einführung können wir weitere CMS-Sammlungen hinzufügen. Wenn Sie einen höheren Tarif haben, können Sie weitere hinzufügen. Sie können zum Beispiel auch Stellenangebote usw. haben . Sie können das CMS in allen möglichen Situationen Wir bleiben einfach bei dem Blog, den wir wollen. Obendrein haben wir hier den Indikator, dass es sich tatsächlich um ein CMS handelt. Dann können wir dem Blog einen neuen Artikel hinzufügen. Wir können die Felder bearbeiten oder importieren. Lassen Sie uns versuchen, einen neuen Artikel hinzuzufügen. Hier gibst du deinen Titel ein, zum Beispiel Weltraumforschung. Es generiert automatisch einen Slug für dich, den du natürlich ändern kannst, wenn du willst Ich habe es zum Beispiel in nur Leerzeichen geändert. Dann können wir zum Beispiel den heutigen 31. August datieren zum Beispiel den heutigen 31. August Wir können ein Bild auswählen, das unseren Blogbeitrag darstellt. Wir können die Auflösung festlegen und einen alternativen Text für Barrierefreiheit und Suchmaschinenoptimierung hinzufügen . Oder wir können eines aus Archivbildern auswählen. Ich möchte zum Beispiel nach Speicherplatz suchen, wir können zum Beispiel diesen auswählen . Los geht's. Jetzt ist es in den Blog importiert. Als Nächstes möchten Sie den Blog tatsächlich schreiben oder einfügen. Wenn du es woanders geschrieben hast, kannst du es stilisieren Ich gebe ihm zum Beispiel die Überschrift Weltraumforschung. Ich kann die Größe der Überschrift genau wie bei einem normalen Markdown ändern genau wie bei einem normalen Markdown Lass uns das hier wählen, dein eigentlicher Block-Beitrag würde gehen Du kannst auch etwas mit dem Text verlinken. Sie können es fett oder kursiv formatieren. Sie können es auch zu einem Codeausschnitt machen und eine Aufzählung hinzufügen. Sie können es nummerieren. Sie können Bilder hinzufügen, Sie können Videos hinzufügen. Sie können auch HTML-Code einbetten. Wenn Sie beispielsweise ein YouTube-Video einbetten möchten, können Sie das hier tun. Ja. Wenn Sie fertig sind, klicken Sie zum Beispiel in Ihrem Blogbeitrag direkt hier auf Sicher . Vielleicht möchten wir hier reingehen und schauen, welche Beispiele sie haben. Jetzt können Sie auch die Felder bearbeiten, den Titel ändern einen Platzhalter-Textbereich einrichten Sie können auch den Namen des Datums ändern. Folgendes ändern wir. Ich möchte zum Beispiel nicht, dass das ein Date ist. Ich möchte, dass das zum Beispiel ein Datum ist. Oder wie das Veröffentlichungsdatum, so etwas in der Art. Es liegt ganz bei dir. Der Inhalt kann geändert werden. Zum Beispiel Blog-Beiträge , wenn Sie gerade über das CMS verfügen. Und wir werden diese Beispiele vorerst hier belassen. Wir wollen zurück und haben eine separate Seite namens Blog, und alle unsere Blogbeiträge sind hier. Hier ist sogar die, die wir erstellt haben, obwohl sie vom CMS gesteuert wird. Sie können auf eines davon doppelklicken und die Eigenschaften ändern. Es wird dich direkt dorthin bringen. Sie können es hier sogar stilisieren. Wenn Sie eines der Elemente im CMS ändern, werden alle geändert. In dem Blogbeitrag, den wir zu Hause haben, haben wir zum Beispiel einen Blog. Ich möchte das zum Beispiel verlinken. Ich möchte einen Blogbeitrag schreiben. Ich lasse es vorerst einfach so. Aber wir würden es tatsächlich modifizieren. Dann möchte ich das mit dem Blog verlinken. Wenn ich eine Vorschau davon sehe, scrolle ich nach unten. Ich klicke hier und das führt uns zu Blogs. Wir werden die Bilder hochladen. Sie können in jedes dieser Bilder klicken und sich den Inhalt ansehen, der uns vollständig zurückgebracht hat. Ich wollte nur zurück. Du kannst auf deinen Blockbeitrag klicken und ihn lesen, genau hier. Ja, so erstellen Sie Ihre eigene erste CMS-Sammlung. Es gibt viele, viele Möglichkeiten, was Sie damit machen können. Habe einen höheren Plan, aber es ist alles so ziemlich dasselbe. Es ist dieselbe Idee wenn Sie einen Blog oder zum Beispiel eine Stellenanzeige erstellen. Und du gibst einfach deine Werte und schreibst den Inhalt hier rein. Ich werde es im nächsten Video sehen. 17. Content schreiben leicht gemacht: Jetzt, wo wir wissen, wie Sie Ihre eigene Blog-Sammlung erstellen können, möchten wir sie mit, Sie wissen schon, nicht mit vorgefertigten Schriften füllen , sondern mit etwas Originellem und etwas, das uns gehört. Stimmt das? Also werden wir all diese Vorlagen und vorgefertigten Blogbeiträge schreiben, anklicken und löschen . In Ordnung, wir gehen zu Chat PT. Ich werde dir Tipps geben, wie du mit Hilfe von Chat PT deine eigenen Blogs schreiben kannst. Sie möchten sich anmelden, wenn Sie noch kein Konto haben, oder Sie möchten sich anmelden, wie ich es in meinem Fall tun werde, Sie möchten sich anmelden und können Ihre E-Mail-Adresse verwenden. Sie können mit Google, Ihrem Microsoft-Konto oder Apple fortfahren . Ich werde mit Google weitermachen. Schauen wir uns an, was eigentlich ein GPT ist. Es ist ein großes, auf einem Sprachmodell basierendes Chappot, von Open II entwickelt und am 30. November 2022 auf den Markt gebracht wurde Es gibt dir so ziemlich die Antwort auf alles, was du fragst Natürlich hat es einige Filter und Bugs und es kann verzögert werden und halluzinieren Open AI sagt sich selbst, es ist wichtig zu beachten, dass sie möglicherweise nicht immer sachlich korrekt ist, weil es sich um abgeschnittenes Wissen handelt Schauen wir gemeinsam auf September 2021. Es könnte veraltet sein, es weiß nicht einmal davon. Es kennt Framer als Prototyping-Tool wie Figma, aber es weiß nichts über Ich, wir werden ihm helfen und wir werden uns davon helfen lassen Ich habe einen Blog, fünf Log-Beiträge über Weltraumforschung. Einer davon sollte den Namen Weltraumforschung tragen. Wir müssen so genau wie möglich sein, wenn Tschad GPT beschreiben, was wir wollen Denn im vorherigen Video haben wir die Erforschung des Weltraums ins Leben gerufen Ich wollte es nur auch ausfüllen, den einen Namen für Weltraumforschung. Der Text wird hier reinkommen. Mal sehen, was es uns gibt. Es tippt ziemlich schnell, sodass wir nicht so lange warten müssen. Lass uns sehen. Es gibt eigentlich keinen, der nur Weltraumforschung heißt. Ich schätze, sie spezifiziert nur genauer, worüber sie sprechen wird, zum Beispiel über die Enthüllung des Kosmos dahinter Diese sind kurz, aber ich möchte sie etwas länger machen, nur damit sie vielleicht drei bis vier Minuten gelesen werden können, anstatt einen Absatz. Die Blogbeiträge werden drei bis vier Minuten gelesen, es wird nur mehr Wir können sehen, dass es der Aufforderung nicht wirklich gefolgt ist und dass es das, was es geschrieben hat, neu schreibt Weil ich mir wirklich nicht sicher bin, ob dieser Abschnitt drei Minuten lang gelesen werden könnte Lassen Sie es uns anders ausdrücken. Ich meinte, mach jeden Blogbeitrag. Los geht's. Wir können sehen, dass es länger und spezifischer ist. Mir gefällt die Länge dieser Beiträge, aber jetzt wurde nur über einen Blockbeitrag geschrieben, falls Sie möchten, dass ich ihn sehe, und uns gefragt, ob wir die Fortsetzung mit dem Rest des Blockposts wollen , sagen wir mal. Ja, tue ich. Manchmal kann es ein bisschen einfrieren. Lass es einfach ein bisschen nachdenken und wir machen uns auf den Weg. Wir können uns das noch für zwei weitere ansehen. Und ich möchte sagen, dass es mich wieder fragt. Ich werde nur klarstellen, dass, ja, jeden der Blog-Beiträge erweitert werden. Wir können tatsächlich sehen, dass jeder der Blog-Beiträge jetzt 400.500 Wörter umfasst. Vielleicht ist dieser ein bisschen länger, nur 400 Wörter. Jetzt, wo wir das haben, schauen wir uns den Inhalt an , über den es hier geschrieben wurde. Es geht darum, den Kosmos dahinter zu enthüllen. Anstatt jeden einzelnen durchzusehen, können wir sogar nach einer Zusammenfassung fragen Geben Sie mir eine kurze Zusammenfassung der einzelnen Blogbeiträge. Schauen wir uns die Rezensionen des Blogbeitrags an. Zunächst geht es um die tiefgreifenden Auswirkungen der Weltraumforschung, ihre Geschichte nachzuzeichnen und ihre Bedeutung hervorzuheben Ja, das gefällt mir und ich werde als Nächstes damit weitermachen. Wir haben Ikonen menschlichen Einfallsreichtums, die die Visionäre feiern, die die Reise der Menschheit in den Weltraum vereint haben Reise der Menschheit in den Weltraum Dieser Beitrag würdigt Persönlichkeiten wie Udi Ga Guiden und Neil Armstrong. Das gefällt mir. Dann haben wir das Thema der Suche nach bewohnbaren Welten, dem Verständnis des Universums und dem Potenzial für außerirdisches Leben und die Suche nach bewohnbaren Exoplaneten Suche nach bewohnbaren Der nächste ist eigentlich ein bisschen umstritten. Oder nicht umstritten , darüber wird gerade viel gesprochen, Reisen und Besiedelung von Weltraummissionen zum Mars Es geht eigentlich ehrgeizige Projekte der Geschlechter im Weltraum Aber weil es veraltet ist, glaube ich nicht, dass es sich tatsächlich um aktuelle Beispiele handelt, sondern vielleicht um solche, die vor 2021 passiert Bei der letzten Frage geht es um Weltraumforschung und ethische Überlegungen. Herbeiführen eines empfindlichen Gleichgewichts , bei dem es um den Schutz der Planeten und die Erhaltung der Kultur geht , die Wahrung der Integrität der himmlischen Umwelt Ich mag all diese Blogbeiträge wirklich. Jetzt, wo wir alle Inhalte haben , die wir für unseren Blog benötigen, können wir tatsächlich damit beginnen, ihn zu veröffentlichen. Das werden wir im nächsten Video tun. 18. Deinen Blog ausfüllen: Jetzt, wo wir unsere Blogbeiträge und unsere Inhalte haben, ist es an der Zeit, sie auf unsere Website zu stellen, die Weltraumforschung heißt. Gehen wir einfach los und nehmen den allerersten Blogbeitrag. Stellen wir sicher, dass wir uns die richtige Version schnappen, nämlich die erweiterte Version Wir nehmen das, legen das hier hin , wir werden das kopieren Stell das hier rein. Wir haben unseren Header. Vielleicht möchten wir zum Beispiel mit PT chatten, sagen wir für den ersten Blogbeitrag. Da es so lange in Abschnitte unterteilt ist, möchte ich dir nur einige Formatierungen zeigen, die du mit Chat PT und Framer machen könntest Lass es warten und denke ein bisschen nach. Los geht's. Wir haben jetzt unsere Abschnitte des Blogs , es wäre einfacher zu verdauen Ich habe das Gefühl, dass ich selbst im aktuellen Klima mit Tiktok und allem einfach den Namen des Abschnitts eingefügt habe Ich wähle es aus und wähle Heading, um zum Beispiel die kosmische Reise zu beginnen Wir werden das tatsächlich löschen. Wir haben alles sauber und keine Wiederholungen. Wir werden die Überschrift auswählen , um sie einzufügen. Du gehst einfach rein und klopfst, naja, eigentlich kannst du es noch einfacher und schneller machen. Wir haben also schon zwei Abschnitte. Wir werden die anderen einfügen. Wir werden den Abschnittsteil löschen. Wir haben einen zusätzlichen Brief. Wir wählen nur jedes der Abschnittswörter aus, stellen sicher, dass es keine Leerzeichen gibt. Und dann könnte ich es entweder fett formatieren, indem den Kurzbefehl auf dem Mac oder die Steuerung auf Windows verwende, oder ich gehe einfach rein und wähle für jedes Wort die Überschrift zwei aus. Los geht's. Wir haben unseren ersten Blogbeitrag. Wir haben bereits unsere Fotos. Wir haben das Datum veröffentlicht. Lassen Sie uns die Schnecke etwas spezifischer ändern. Das wollten wir nicht tun. Das fügen wir hier ein. Aber wir werden hier Weltraumforschung betreiben. Die Schnecke ist kürzer, sie ist bereits gespeichert. Das ist alles was wir tun müssen. Wenn du jetzt reingehst, ist da dein Blogbeitrag. Sie möchten dies für jeden einzelnen Blogbeitrag tun , den wir erstellt haben und den Sie erstellt haben. Und lass es uns tatsächlich tun. Also füge einen neuen Artikel hinzu. Lassen Sie uns Chachi Pet bitten, jeden der Blogbeiträge in Abschnitte zu unterteilen, jeden der Blogbeiträge in Abschnitte zu unterteilen wie Sie es in diesem Fall getan haben Sie müssen mich nicht bitten, fortzufahren. Ich möchte das für jeden Blogbeitrag, den wir haben. Also versuche ich, so spezifisch wie möglich zu sein, damit es nicht ins Stocken gerät und nicht darauf wartet, dass ich antworte. Aber geht alles auf einmal? Ich habe es eigentlich nicht verstanden und nur für unseren zweiten Blogbeitrag geschrieben, aufgeteilt in Abschnitte, Blogbeitrag Nummer 345. Warten wir einfach, bis es die Ergebnisse liefert, hoffentlich die, die wir wollen. Lassen Sie uns also bei jedem Blogbeitrag sehen, ob es tatsächlich funktioniert hat. Und ja, wir können 543 sehen und wir haben zwei hier. Den ersten haben wir schon eingebaut. Was wir tun möchten, ist auf Neuen Artikel erstellen zu klicken. Kopiere den Titel. Datum der Veröffentlichung. Lass uns dasselbe tun. Lass uns das Foto ändern. Etwas, das mit dem Weltraum zu tun hat. Lass uns diesen Blog hier kopieren. Löschen. Löschen Sie den Nichts zurücklassen, was nicht Grund „ Nichts zurücklassen, was nicht ausgewählt wurde“. Hier, los geht's. Lassen Sie uns den letzten Abschnitt dieses Blogs hervorheben und wir möchten die Änderungen sehen. Und wir haben noch einen Blog den Sie für jeden einzelnen Blog, den Sie erstellt haben, tun möchten . Um das Video kurz zu halten, ich mache es nur zu zweit, aber hoffentlich habt ihr jetzt die Idee, wie das geht und habt es hoffentlich umgesetzt. Und wir sehen uns im nächsten Video. 19. Praxis: Erstelle deinen eigenen Blog: Willkommen zu einem neuen Übungsvideo. Wir wollen eigentlich alles zusammenstellen , was Sie in diesem Kapitel gelernt haben, der Website, die wir im vorherigen Kapitel entwickelt haben , mit dem wir begonnen haben. Lass es mich dir ganz schnell zeigen, lerne. Ich möchte einen Blog haben , der die Kurse beschreibt, die wir anbieten. Ich werde mich an Chad GPT wenden, um Hilfe zu erhalten. Sobald wir im Tschad GPT sind, möchten wir um Wir haben einen Unity-Kurs, einen Kurs zum kreativen Programmieren und einen Programmierkurs, über den ich schreiben möchte In dem Blog, den ich schreiben möchte, erstelle ich einen Blog über die Kurse, die von unserem Unternehmen angeboten werden Wir heißen Unity Learned. Wir bieten Online-Kurse an, die lehrreich sind und sich ausschließlich mit Innovation befassen. Also werden wir für Fate of Coding und Unity schreiben, wir wollen drei Blockbeiträge. Ich möchte drei Blockbeiträge zu den Themen. Es macht drei Blockbeiträge aus. Es Spline, manchmal vermischt es es mit dem mathematischen Begriff, Spline der drei D, Spline der drei D, Animations- und Modellierungssoftware und kreatives Programmieren Diese Blockbeiträge bieten eine Einführung in den Kurs und beschreiben, was Das Lernergebnis ist spezifiziert, machen Sie es nicht zu lang und schauen Sie, was dabei herauskommt. Los geht's. Hier sind unsere Blogbeiträge. Diese müssen entsprechend unseren aktuellen Kursen geändert werden , aber das ist ein guter Ausgangspunkt. Ich möchte dies zu unserer Blog-Sammlung hinzufügen. Lassen Sie uns diesen löschen und hinzufügen, wir löschen die Vorlagen. Lassen Sie uns einen neuen Artikel hinzufügen. Unser Titel lautet Creativity with Unity Game Development Course. Als Nächstes werden wir das hier behandeln. Die sind bereits fett gedruckt. So hat es es kopiert. Lass uns, lass uns ein Bild wählen. Also wählen wir dieses Foto als Titelbild. Jetzt, wo wir unseren ersten Blogbeitrag haben, importieren wir den Rest. Geben Sie den Titel Datum, Suche nach einem Bild ein. Dann willst du das einfügen. Siehst du dir dieses Mal an. Aus irgendeinem Grund wurden die Absätze nicht eingefügt. Was seltsam ist, weil es in diesem Fall der Fall war, oder? Das war komisch. Ich weiß nicht, warum das hier passiert ist. Und wir schreiben in kreativer Programmierung, vielleicht tippen wir einfach Codierung ein, weil es nicht wirklich weit verbreitet ist. Nun, der gefällt mir besser. Los geht's. Jetzt wollen wir das zu unserer Seite hinzufügen. Hier haben wir den Blog. Lass das einfach reinladen. Ich weiß, warum das nicht aktualisiert wurde. Das ist nicht das, was wir wollen, also müssen wir das hinzufügen. Der Grund, warum es hier nicht auftaucht, ist, dass wir eine neue Seite hinzufügen müssen Entschuldigung, jetzt nicht hier. Es wurde aktualisiert. Da haben wir's. Das ist entsetzlich. Nichts ist wirklich lesbar Also lasst uns diese Farbe in Weiß ändern , damit es ein bisschen schöner wird, ein bisschen weißer. Tut mir leid. Lass uns das auch weiß machen. Das ist viel besser. Die andere Version war wirklich, wirklich schlecht. Bleiben wir bei den Blockseiten , die wir hier nicht verwenden. Wir müssen uns auch ändern, mal sehen. Okay, wir haben das, wir gehen hierher, wir passen das an. Ändere das zu Weiß, ändere das zu etwas mehr Weiß. Der Text ist tatsächlich da, aber er ist so schwer zu lesen. Ich habe es nicht wirklich bemerkt. Deshalb ist es wichtig , gute Farben zu wählen. Ich klicke auf Inhalt klicken, wo, los geht's. Ich gehe zu Body. Ich gehe zu Edit. Auf diese Weise wird der gesamte Haupttext in den Blogs geändert , ohne dass Sie auf jeder Seite die Schriftart oder die Farbe ändern müssen . Stattdessen möchte ich nur einen haben, auf dem Blog steht, und wir werden unsere Kurse machen. Lass uns das mit dem Blog verlinken. Der Grund, warum ich das nur überprüfen wollte, ist der Hauptteil dieser Artikel. Wenn wir das verlinken, verlinken all diese Elemente in diesem Feld auch auf diese Blog-Seite. Wenn wir nun tatsächlich eine Vorschau dieses Scroll-down-Videos ansehen, klicken Sie auf Blog. Hier haben wir unseren Blog, der vollständig ansprechend perfekt für Ihr Tablet und Ihr iPhone sowie Ihren Computer eignet. Los geht's. Das war unsere Blog-Kreation. Hoffentlich musst du alleine üben. Wenn nicht, hast du unser Übungstutorial befolgt. Und das ist auch absolut in Ordnung. Und wir sehen uns im nächsten Video. 20. Kapitelübersicht (CMS): In diesem Kapitel haben wir also alles über CMS gelernt, was für Content Management System steht. Wie Sie sich sicher schon erinnern, haben wir uns mit der Erstellung von Blogs befasst, wie Sie einen Blog hinzufügen und Ihren Blog in Ihre zuvor erstellte Website integrieren können. Und wir haben uns auch die Hilfe von ChatChPT angesehen und wie wir mit Hilfe von ChachPT Blogs erstellen können Und wir haben uns angesehen, wie man diese wieder in Framer importiert diese wieder in Framer importiert Und wir haben auch geübt, indem wir unseren eigenen Blog erstellt haben, und das haben wir ein bisschen geübt Und wir haben den Text und die Schriftarten angepasst und sind tatsächlich auf ein paar Probleme gestoßen , die wirklich verwirrend waren. Aber am Ende haben wir es geschafft, sie zu lösen. Und hoffentlich hast du auch aus diesen kleinen Schluckauf gelernt diesen kleinen Schluckauf Und wir sehen uns im nächsten Kapitel, wo wir uns mit den Fortgeschrittenen befassen, und wir sehen uns im nächsten Kapitel, wo wir uns mit der erweiterten Anpassung befassen , was im Grunde Effekte, verschiedene Abschnitte, Überschriften, all das ist , worauf Sie gewartet haben Alles, was anpassbar ist, dreht sich um Framer Sobald Sie Ihre KI-Website bereits erstellt haben, sind dies die Dinge, die wirklich verfeinern und Ihre Website einzigartig machen werden verfeinern und Ihre Website einzigartig machen Natürlich wird dies nicht von KI unterstützt, aber es ist gut zu wissen wie man diese Dinge macht, damit Sie Ihre Website selbst anpassen können , nachdem Sie Ihre Basisvorlage von KI erstellt haben Wir sehen uns also im nächsten Kapitel. 21. Kapitel-Einführung (Fortgeschrittene Cutomizationen): Willkommen zum nächsten Kapitel, in dem es um erweiterte Anpassungen geht Wir werden uns mit der Erstellung von Anpassungen mit Effektabschnitten und Überschriften und dem Hinzufügen eigener Formulare und Medien sowie mit all guten Dingen befassen, die wir in diesem Kapitel behandeln werden Dies wird Ihnen wirklich dabei helfen, eine wirklich einzigartige Website zu erstellen und sie wirklich auf Ihre eigenen Bedürfnisse und die Art und Weise zuzuschneiden, wie Sie Ihre Website erstellen möchten. Und wir werden uns nicht nur damit befassen, jedes Element einzeln zu verwenden, sondern auch alles miteinander zu kombinieren , um eine zusammenhängende Sache zu schaffen Und wir werden das auch üben und es unserer Website hinzufügen , die wir im Laufe des Kurses entwickelt haben im Laufe des Kurses entwickelt 22. Warum Anpassung wichtig ist: Deshalb möchte ich ein wenig näher darauf eingehen, warum Anpassung tatsächlich wichtig und warum es wichtig ist, dass Ihre Website angepasst und Sie Ihre Elemente an Ihre Bedürfnisse anpassen Anpassen von Abschnitten und das Anpassen von Abschnitten können Sie die Informationen so anzeigen , dass sie Ihren Zielen entsprechen. Wenn Sie beispielsweise Ihre Navigation verbessern, passen Sie Ihre Kopfzeile Dies vereinfacht die Navigation auf der Website für Ihren Besucher verbessert so die Benutzererfahrung Als nächstes spiegelt es das Branding wider. Wenn Sie alle Ihre Elemente auf ähnliche Weise und ähnlich gestaltet haben , spiegelt dies Ihre Markenbotschaft und stärkt Ihr Markenimage Benutzerdefinierte Medienformen und Interaktivität machen es für den Besucher sogar noch attraktiver Es optimiert auch die Funktionalität, was zu Benutzerfreundlichkeit, Konsistenz und Professionalität beiträgt, das Vertrauen der Benutzer stärkt und schließlich die Interaktion fördert Benutzerdefinierte Symbole, Muster und soziale Integration fördern das Engagement Dies sind also nur einige Gründe warum Anpassungen auf Ihrer Website wichtig sind. Und hoffentlich bleiben Sie dabei, um sich unser Kapitel anzusehen und zu erfahren, wie Sie Ihre Website wirklich an Ihre Bedürfnisse anpassen können. Wir sehen uns also im nächsten Video. 23. Abschnitte: In diesem Video geht es um die erste Anpassung, mit der wir uns befassen werden, nämlich Abschnitte. Gehen wir zu unserer Beispielwebsite , mit der wir bereits zuvor gearbeitet haben. Was wir tun wollen, ist zu Insert zu gehen. Hier haben wir unseren Abschnitt unter Grundlagen. Hier haben wir eine Reihe von Abschnittsoptionen, aus denen wir wählen können. All dies ist natürlich auch Klicken und Ziehen möglich. Du kannst das von diesem oder dem hier bekommen. Es ist eigentlich egal , wofür du dich entscheidest. Sie können es auch von Grund auf neu erstellen. Schauen wir von oben und arbeiten uns nach unten vor. Ganz oben haben wir unsere erste Option. Mal sehen, es wird ganz unten eingefügt. Wir können die Position auch ändern , indem wir einfach klicken und ziehen Zum Beispiel habe ich es hier eingestellt, es ist alles anklickbar und anpassbar Hier haben wir zwei Schaltflächen, wir haben etwas Text Dies ist einer der Abschnitte, die wir haben. Dies ist ein sehr einfaches Beispiel, wir können einfach weitermachen. Als Nächstes haben wir den gleichen Abschnitt, aber nur für den Hintergrund können Sie tatsächlich ein Bild hinzufügen. Lassen Sie uns etwas von Unsplash hinzufügen. Zum Beispiel dieses hier haben wir dasselbe, nur mit einem Bildhintergrund Wenn wir weiter gehen, haben wir ein paar, die ein Bild auf der rechten Seite und einige Texte auf der linken Seite sind, wir haben das genaue Gegenteil Das Bild ist links, der Text ist rechts. Eine weitere, die wir haben, ist diese hier. Wir haben zwei Bilder, wir haben Text hier und wir haben hier etwas Text. Es bewirbt tatsächlich das Figma-Plug-In, dem wir uns später befassen werden Zum Beispiel können wir uns das schnappen und wir können es tatsächlich in diesem Textfeld verschieben Sie können tatsächlich tun, was Sie wollen, aber es ist einfacher, von hier aus einen Abschnitt auszuwählen , der Ihnen gefällt. Schauen wir uns noch ein paar an. Bei diesem Beispiel handelt es sich um zwei horizontale Bilder. Hier haben wir eine Option für 46 Bilder. Entschuldigung, hier wird tatsächlich für das geworben , was wir auf Framer haben. Als nächstes haben wir einige unregelmäßige Formen, doppelt angeklickte, importierte Spielzeuge Lass uns Z befehlen und den Vorgang abbrechen. Da haben wir's. Hier haben wir vier Platzhalter für die Bilder und vier Textfelder Sie können hineinklicken und Ebenen erweitern und all dies anpassen Das kannst du tatsächlich auch. Schauen wir uns als Nächstes mehr an. Wir haben einige, die wie Karten wie diese aussehen. Wir könnten das auch zum Beispiel für unsere Kurse verwenden, die wir in einer unserer Praxen beworben unserer Praxen Wir können hier viele Bewertungen haben. Wir können die Breite jeder Spalte anpassen. Wir können den Ort von diesem und jenem ändern und wir können so herumspielen. Als Nächstes haben wir einige Bewertungen. Als nächstes haben wir eine Rezension in einem großen Abschnitt. Wir haben auch unser Kontaktformular, das für unsere Kontaktseite unerlässlich ist, zweimal importiert. Auch hier haben Sie nur Namen, E-Mail und Nachricht, Sie können uns direkt kontaktieren, wie auf der Website. Als nächstes haben wir einige Preise. Wir haben einen FAQ-Bereich, den Sie auch anpassen können. Sie können hier auch den FAQ-Bereich anpassen. Du hast diesen Tisch. Sie können die Frage und die Antwort hier finden. Sie können Ihre Frage ändern. Als Nächstes haben wir unseren Abschnitt Vertrauenswürdig gemacht. Sie können diese einfach durch ein Logo ersetzen, Unternehmen, die Ihnen vertrauen und ihre Unterstützung zeigen. Endlich haben wir heute eine Anmeldung, die der allerersten , die wir uns angesehen haben, sehr ähnlich ist allerersten , die wir uns angesehen haben, sehr ähnlich die sich genau hier befindet. Eigentlich denke ich, dass es genau dasselbe ist. Nur ohne den Text. Ja, es sind so ziemlich alles grundlegende kleine Anpassungen. Sie sind sich alle ähnlich. Sie verwenden und nutzen alle dieselben Elemente. Aber es ist schön, etwas Abwechslung zu sehen und zu sehen, dass alles schon vorbereitet ist. Ich werde es im nächsten Video sehen 24. Navigation: Wir werden uns die Navigation ansehen, bei der es sich im Grunde um Kopf- und Fußzeilen handelt In diesem Fall werden sie als obere Lassen Sie uns einige Abschnitte löschen, die aus der vorherigen Lektion übrig geblieben sind aus der vorherigen Lektion Es ist etwas weniger chaotisch. Es geht los Wir verlassen den Blog. Ich werde diesen hier lassen. Mir gefällt das Bild. Wir gehen zum Einfügen und wir gehen in die Navigation. Wir wählen eine obere Leiste aus , die wir verwenden möchten , hat sie tatsächlich ganz unten platziert, also wollen wir sie nach oben ziehen und ganz oben platzieren. Auf der linken Seite haben wir das Logo und auf der rechten Seite haben wir den Bereich Über Kontakt und Anmeldung. Es ist eigentlich eine Vorschau davon. Hier tut es das. Ganz oben können Sie diese Schaltflächen im Logo sehen. Natürlich können Sie es wieder anpassen. Sie können hineinklicken, Sie können sehen, dass es mehrere Optionen für verschiedene Anwendungsfälle gibt mehrere Optionen für verschiedene Anwendungsfälle die wir hier klicken möchten. Hier können wir tatsächlich alles ändern, ohne dass es veraltet ist, und hier auf dem Laufenden bleiben. Statt Text könnten wir hier unser Logo platzieren. Wir können dieses Zeug tatsächlich verlinken, zum Beispiel Gefällt mir“ und „Kontakt“, aber diese Seiten haben wir momentan nicht. Gehen wir zurück zur Navigation. Wir haben uns hier tatsächlich die schwarze Version angesehen. Es gibt auch eine weiße Version. Es gibt auch eine Logo-Version. Wenn du ganz unten drauf klickst. Lass es uns nach oben bringen. Lösche den ersten, klicke hinein. Los geht's. Wir können das Bild hier ändern. Wir können tatsächlich mehr Komponenten hinzufügen, so viele wir wollen. Der Grund, warum ich sage, dass Sie mit jeder Vorlage alles erreichen können , ist, dass wir nach rechts gehen, wenn wir auf Desktop klicken . Sie wissen, dass es zwei Versionen von Schwarz und Weiß gibt. Sie können tatsächlich hier reingehen und von hier aus die Farbe ändern und das gleiche Ergebnis wie beim letzten erzielen. Wenn wir hier klicken und es abgleichen, los geht's. Wir müssten diesen Text hier draußen ändern, er ist lesbar, sogar das tun. Lass uns hier klicken. Wähle die Farbe. Wir werden es für jeden einzelnen tun müssen. Ich werde wechseln, alle auswählen und die Farbe insgesamt ändern. Ich würde dieses Schwarz natürlich verwenden, wenn mein Logo weiß oder bunt wäre. In diesem Fall würden wir tatsächlich ein weißes oder ein helleres verwenden ein weißes oder ein helleres , das den Kontrastanforderungen entspricht. Schauen wir uns nun die Fußzeile an. Lass uns hier klicken. Mal sehen, wo importiert wurde. Los geht's. Ich schleppe es sogar hierher. Nein, das möchte ich nicht tun. Das ist so. Und klicken Sie auf Einfügen. Los geht's. Auf diese Weise wird die Desktop-Version primär sein und dann werden wir für den Rest optimieren. Hier können wir all die verschiedenen Seiten sehen Sie möchten oder erstellen könnten, und keine davon ist momentan verlinkt Aber wenn Sie hineinklicken, klicken Sie erneut hinein und Sie können all diese Seiten hier verlinken. Ähnlich wie bei der weißen Fußzeile besteht der einzige Unterschied in der Farbe und nicht in der tatsächlichen Funktionalität der Vorlage wir nun die Schlagzeile und die Fußzeilen unten geklärt haben , ist es nun an der Zeit, zu den Seiten überzugehen 25. Seiten: Habe mir die Navigation angesehen. Lassen Sie uns tatsächlich zu ganzen Seiten übergehen. So können Sie buchstäblich eine Seite mit nur einem Klick erstellen. Ich habe auf den allerersten geklickt, ohne es zu erklären. Das weiß ich. Aber hier haben wir die Landingpage. Schnell und einfach, Sie haben alles, was Sie für die meisten Websites benötigen würden. Wir haben den Bildplatzhalter in der Mitte. Wir haben einen Button, etwas Text. Wir haben die vertrauenswürdigen Logos. Wir haben einige Abschnitte, die Sie tiefer in die Website führen würden . Wir haben unseren FAQ-Bereich , in dem Sie die Elemente austauschen können. Wir haben die Möglichkeit, uns heute mit unserer einfachen Fußzeile anzumelden heute mit unserer einfachen Fußzeile Was mir hier auffällt, ist, dass es keine Kopfzeile gibt , die ein Minus ist, weshalb ich empfehlen würde, einen hinzuzufügen Nachdem Sie die Seiten erkundet haben, fügen Sie dieser Seite einfach eine Kopfzeile hinzu. Wenn Sie sich entscheiden, diese Seite zu verwenden, ist alles optimiert und das Design ist responsiv. Schauen wir uns noch ein paar Seiten an. Es gibt eine ganze Reihe von Optionen, die wir uns ansehen können. Ich werde nicht auf jedes einzelne Detail eingehen, weil ich möchte, dass Sie es auch auf eigene Faust erkunden und damit herumspielen. Und du weißt bereits, dass wir alles anpassen können , die Schriftarten, die Logos, die Farben ändern und die Bilder ehrlich ändern können. Das ist so ziemlich alles, was du wissen musst. Hier haben wir eine Portfolio-Seite , auf der Sie Ihr Projekt anzeigen können. Sie können sehen , dass sich die Seiten, die wir hinzufügen, alle hier im Bereich Seiten befinden . Schauen wir uns als Nächstes den Teaser an. Das ist wie eine Werbeaktion, ein bisschen bleib dran und melde dich an, du gibst deine E-Mail Und hier ist ein kleiner Teaser. Es könnte ein Video oder ein Foto sein. Es könnte alles sein. Du willst einen Blog. Wir kennen uns bereits mit Blogs aus. Sie können hier auch einen hinzufügen. Sie können einen separaten Blogartikel ohne die Blogsammlung hinzufügen . Wenn Sie möchten, können wir eine Seitenleiste hinzufügen , bei der es sich im Grunde um eine Seitenleistenüberschrift Wir haben hier verschiedene Arten von Projekten, was uns dazu veranlasst, uns mehr anzusehen Nach der Seitenleiste haben wir unsere Projektseite, die den anderen, die wir uns bereits angesehen haben, ziemlich ähnlich ist die wir uns bereits angesehen haben, Wir haben auch eine leere Seite. Mal sehen, ob es richtig geladen wird. Leere Seite nur für deine Kreationen. Sehen wir uns eine Vorschau an. Hier haben wir ein langes Karussell , mit dem Sie herumspielen können Wir haben hier auch einen Image-Blog , der einem Image-Dokumentartagebuch ziemlich ähnlich ist Wir haben einen vierseitigen Klassiker. Nur um einen defekten Link zu haben, wenn Sie einen Ort haben, an dem der Besucher nicht weitergeleitet werden möchte, fügen Sie ihn einfach ein. Als Nächstes haben wir einige Portfolios. Wir haben eine Coming Soon-Teaser-Seite. Wir haben wieder eine Einführung. Die meisten davon sind für den persönlichen Gebrauch, für Blogs, aber Sie können es auch jederzeit eine Arbeitssache umwandeln und hier professioneller als lässig sein . Aber es liegt ganz bei dir. Sie können sogar Ihre Seiten nach Belieben ändern. Sie können das hierher ziehen, es herumziehen und sehen, was passiert. Ich weiß, dass es nicht so flexibel ist, aber in gewisser Weise ist es so, wenn du es dir wirklich ansiehst, herumprobierst, mit Dingen herumspielst und siehst, ob es dir gefällt und du es einfach versuchst, weil es zu so guten Ergebnissen führen kann. Ich würde ihm einfach ein wenig Zeit geben und sehen, was passiert, und Framer in der Zwischenzeit einfach weiter verwenden Framer in der Zwischenzeit weil man nie weiß, was passieren wird und welche Aufgabe man haben wird Ja, das waren Pages. Fühlen Sie sich frei, es anzupassen und sich umzuschauen. Ich werde dich im nächsten Video sehen. 26. Medien: Jetzt schauen wir uns hier die Medien an. Ich weiß, es kann ein bisschen überwältigend sein, aber alle sind sich ziemlich ähnlich. Schauen wir uns zunächst diese Unterkategorien in den Medien an. Sie können ein Bild, ein Video in Animation oder Audio importieren ein Video in Animation oder Audio Fangen wir mit einem einfachen Bild an. Wir klicken auf Iff und ziehen es in unseren Bereich. Und du kannst sehen, dass es sich selbst zu dem Abschnitt hinzugefügt hat , in den wir in Surge Gif klicken möchten Nachdem du das GIF als Medium importiert hast, kannst du darauf klicken und schon siehst du hier eine Surge-Schaltfläche. Sie können einfach eingeben , was Sie wollen. Es wird genau so aussehen, wie süß das ist. Jedes Mal, wenn du es suchst, wird es anders sein. Ich habe es gelöscht. Ich tippe wieder Katze ein. Es wird ein ganz anderes Bild sein. Es tut mir leid, das ist zu süß, um nicht abgelenkt zu werden. Wir lassen es dort. Gehen wir und schauen uns das nächste Formular an. Wir haben Videos. Wir können entweder ein Video direkt von unserem Laptop importieren oder ein Video mit einem Frame von Youtube importieren oder von Vimeo importieren Lass uns auf Youtube klicken , weil niemand Vimeo benutzt. Hier haben wir den Player. Wir mussten hier einen Beispiel-Link haben. Wir können das Autoplay ein- und ausschalten. Ich habe es zum Beispiel wiederholt. Wir können entweder stummschalten oder die Stummschaltung aufheben und die Farbe des Spielers entscheiden Wir können auch einige Grenzen haben. Klicken wir auf Veröffentlichen. Wählen wir alle diese Befehle aus. Also schneide. Ich werde das alles hier auf der Seite veröffentlichen. Wir haben nur ein Beispiel, das ich eingefügt habe. Und jetzt können wir eine Vorschau davon anzeigen. Ganz unten auf der Seite können Sie sehen, dass der Jeff sofort spielt. Wir können die Mayo-Integration spielen. Ich bin mir nicht sicher , was hier mit Instagram passiert ist, weil es ein bisschen wichtig ist. Es wird immer überprüft, ob das WLAN funktioniert und alles geladen wird. Schauen wir uns als Nächstes die Animationen an. Lass uns auf Lotti klicken. Lotti sind im Grunde schnelle Animationen , die wirklich kostengünstig sind Sie verbrauchen wirklich fast keine der Optimierungen vom Laptop oder Desktop, und es ist tatsächlich sehr leicht Nachdem wir das Los importiert haben, können wir den Link auswählen, von dem wir das Los beziehen. Wir haben die Spielanleitung, die Quelle. Laden Sie es hoch und Sie können sehen, dass Lottie gut spielt . Wir haben die Richtung Schauen wir uns als Nächstes das Audio an. Hier haben Sie eine Reihe verschiedener Optionen, aus denen Sie wählen können, von Spotify über Apple Music bis hin zu Apple Podcast, Sound Cloud, Simple Cast und Simple P Three, die Sie von Ihrem Laptop importieren können. Dies sind alle Medienoptionen dafür für Framer, ich werde im nächsten Video sehen 27. Formulare: Sehen wir uns in diesem Video Formen als Elemente an. Schauen wir uns zunächst die Eingaben an. Wir können eine Eingabe hinzufügen. Auf diese Weise kann ein Besucher der Website Ihre E-Mail eingeben . Klicken Sie beispielsweise auf Abonnieren. Jetzt haben wir ihre Informationen, wir können doppelklicken. Wir können einen anderen Dienst für die Eingabe von Loops, Form Spark Mail, Chimp verwenden und Gewicht reduzieren. Wir können den Besucher auch weiterleiten , sobald er auf Abonnieren geklickt hat Wir können auch das Wort dafür ändern. Schauen wir uns die restlichen Formulare an. Dies sind alles dieselben Formulare nur für verschiedene Dienste. Schauen wir uns zum Beispiel die Typen form und calendly an. In Calendly können Sie Ihr Calendly-Konto verbinden und einen Termin über das Formular buchen Sie können ein Typformular direkt auf Ihrer Website ausfüllen. Das war's für Formulare und wir sehen uns im nächsten Video. 28. Symbole: Schauen wir uns als Nächstes die Symbole an. Hier haben wir eine Reihe verschiedener Symbole, mit denen Sie Ihre Website anpassen und einige benutzerdefinierte Illustrationen hinzufügen können Ihre Website anpassen und einige benutzerdefinierte Illustrationen hinzufügen , um ein wenig Flair zu verleihen Schauen wir uns zum Beispiel Menschen an. wird ein wenig dauern Import wird ein wenig dauern, und wenn wir darauf doppelklicken, können wir es hier tatsächlich anpassen, was ziemlich erstaunlich ist. Du kannst die Haltung ändern, du kannst den Körper ändern, es ist absolut großartig. Du kannst hier die Richtung ändern, du kannst hier die Hautfarbe ändern. Es ist alles sehr anpassbar nur wenn Sie nach einer schnellen menschlichen Ikone suchen. Lassen Sie uns als Nächstes zu Twinmoi gehen und Emoji-Symbole an einem Ort haben Wir können hier nach einem Emoji suchen, wir können es einfach so p machen Lass uns danach suchen und es wird uns das entsprechende Symbol für Emoji geben Als nächstes gehen wir weiter zu Mogi. Sie haben verschiedene, eigentlich alle Varianten von Mogi, Sie können es komplett anpassen Und du kannst weiter durchschauen und wirklich genau das finden, wonach du suchst Sie können den Radius des Kreises ändern. Sie können das Gesicht drehen. Sie können den Charakter und die Hintergrundfarbe ändern. Als nächstes gehen wir zu Feather. Wenn wir in diesem darauf klicken, haben wir eine große, große Liste von Symbolen, die wir verwenden können. Zum Beispiel Wi-Fi und es wird zu Wi-Fi. Du kannst es spiegeln. Nichts wird passieren , weil es hier nicht wie ein spiegelbares Symbol Wenn wir es tatsächlich spiegeln möchten, können Sie auch die Farbe Ihres Symbols ändern Schauen wir uns als Nächstes Hero an. Hier haben wir nur eine andere Liste mit vielen verschiedenen Symbolen. hier haben wir das Wi-Fi-Symbol, das Auch hier haben wir das Wi-Fi-Symbol, das nur ein bisschen anders ist. Sie können wählen , was Sie möchten Sie möchten, ob sie sich überschneiden und dasselbe haben Zum Beispiel hat dieser auch ein Haus, das sich von diesem unterscheidet Sie müssen sich wirklich nur den gewünschten Stil ansehen und entscheiden, welche Art von Symbol Sie tatsächlich für Ihre Website verwenden möchten. Schauen wir uns die letzten beiden an. Ich werde es eigentlich nicht ändern, damit wir den Unterschied sehen können. Hier haben wir wieder die Liste, nur verschiedene Arten von Symbolen. Der letzte Phosphor, dieser ist wieder etwas runder, wir haben unsere Liste genau hier. Dies war unsere Erkundung vieler verschiedener Ikonen. Es gibt wirklich ein paar flippige, du weißt schon, lustige. Und du kannst es anpassen, wie du willst. Sie können es einfach durch Ziehen zu Ihrer Website hinzufügen, und es wird hier auf magische Weise hinzugefügt Du kannst es anklicken, ziehen und an eine beliebige Stelle auf der Seite positionieren , die ich im nächsten Video sehen werde 29. Interaktive Elemente: Auf Interaktiv. Schauen wir uns zum Beispiel die Suchleiste an. Wir klicken es einfach an und ziehen es an eine beliebige Stelle auf der Website. Um es hier hinzuzufügen , haben wir die Suchschaltfläche. Es ist eigentlich klein. Bringen wir es irgendwohin, wo es etwas sichtbarer ist. Bringen wir es nach oben. Lass es uns zuerst hier oben besprechen. Fügen wir es zum Beispiel hier ein. Und reduzieren Sie die Polsterung, damit sie etwas besser integriert ist. Wenn wir nach unten scrollen, klicken wir auf die Suche. Sie können Ihre Website auf diese Weise durchsuchen. Schauen wir uns den Ticker an. Wir ziehen es einfach an eine beliebige Stelle auf unserer Website, wir klicken hinein, klicken zweimal hinein und wir können unsere Kinder hier auswählen Es wird einfach zwischen all diesen rotieren. Ich habe zum Beispiel Material für Feather und Hero ausgewählt. Schauen wir uns mal an, was das bewirkt, denn zwischen all diesen Symbolen gibt es unendlich viele Schleifen zwischen all diesen Symbolen gibt es unendlich viele Und es ist ein wirklich schönes Pad, es sieht also natürlich aus Gehen wir zurück und ich zeige Ihnen, wie Sie das anpassen können. Wir doppelklicken hier rein. Wir können die Geschwindigkeit der Rotation ändern. Wir können die Richtung ändern. Wir können es nach links in der Mitte oder nach rechts ausrichten. Wir können das hier breiter machen, es deckt die gesamte Seite ab. Wir können eine größere Lücke hinzufügen. Ändern Sie hier tatsächlich die Richtung, richten Sie sie zur Mitte aus. Sie können die Polsterung ändern, was ich nicht tun möchte. Wir können die Größe der Objekte wählen. Wir können es verlängern oder wir können es auf Automatisch belassen. Wir können auch den Ausschnitt wählen. Das ist das nette Pad , das hinzugefügt wird. Und ich möchte es zum Beispiel so auf dem Hover belassen. Ich möchte es verlangsamen. Mal sehen, was das macht. Wie Sie auf Hover sehen können, Ihre Symbole langsamer Es ist wirklich cool, deine Logos zu präsentieren , nur um etwas zu präsentieren, das du willst Es wird sich unendlich wiederholen. Ich finde, es sieht wirklich gut aus. Lass uns weitermachen. Schauen wir uns die Diashow hier an. Es funktioniert auf die gleiche Weise. Wir wählen den Inhalt aus. Zum Beispiel Phosphor beim Menschen. Wählen wir einen dritten, Feather. Schauen wir uns an, was es macht. Wenn du hier klickst, werden wir tatsächlich zwischen all diesen wechseln mit einer schönen Animation tatsächlich zwischen all diesen wechseln. Lassen Sie mich Ihnen zeigen , wie Sie das anpassen können. Wir können die Richtung wählen, wir können Autoplay wählen, das Autoplay-Intervall ändern, wie oft es sich ändert Wir können wählen, ob das Bild gezogen werden kann. Wenn es wie ein JPEG oder ein PNG ist, manchmal auf einer Website, zieht sich Ihr Bild in die Länge Wenn es wie ein JPEG oder ein PNG ist, manchmal auf einer Website, manchmal auf einer Website, und ich finde es nervig Ich werde nein sagen. Sie können auch die Kapazität, den Maßstab und die Perspektive ändern und es drehen. Sie können die Ausrichtung nach oben, in der Mitte und nach unten vornehmen. Sie können die Anzahl der gleichzeitig angezeigten Elemente auswählen. Sie können die Lücke auswählen Wenn es beispielsweise zwei gibt, können Sie die Lücke auswählen. Sie können Polsterung hinzufügen oder entfernen, Sie können den Radius ändern, Sie können den Übergang ändern an dem sie übergehen Sie können es vollständig anpassen. Und Sie können sich hier eine Vorschau der Animation ansehen, was meiner Meinung nach ziemlich erstaunlich ist. Sie können einen großen Unterschied sehen. Sie können die Steifigkeit und die Dämpfung wählen und Sie können die Kurve sehen. Sie können die Animation hier tatsächlich sehen, was sehr praktisch ist, wenn Sie mit Animationen überhaupt nicht vertraut sind. Sie können eine Verzögerung hinzufügen, aber das werden wir nicht tun. Mal sehen, was unsere Animation bewirkt hat. Es sieht schrecklich aus, aber das war nur zu Demonstrationszwecken. Schauen wir uns als Nächstes Carol an, was ehrlich gesagt ähnlich ist Lass es uns hier importieren. Daraufhin wird auf Inhalt auswählen geklickt. Los geht's. Sind wir sicher , dass das ein Sol ist? Ich bin mir nicht sicher, ob das ein Sol ist. Los geht's, das ist ein Sol. Lass uns das löschen. Lass uns eine Vorschau davon sehen. Hier ist die Sol, weil sie nicht voll ist. Es tut nicht wirklich etwas , um ein paar weitere Objekte hinzuzufügen. Wir können also die Funktionalität sehen, hier klicken, wir können die Animation und alles andere sehen. Also los geht's. Das waren unsere Interaktionen. Wirklich lustiges Zeug zum Herumspielen. Und wenn Sie wissen, was Sie tun möchten, ist es wirklich nett und einfach, Dinge nur mit diesen Tools zu erreichen. Und wir sehen uns im nächsten Video. 30. Sozial: Schauen wir uns die sozialen Netzwerke an. Hier haben wir alle Arten von sozialen Medien, Instagram, Facebook, Twitter, Google Maps, Trustpilot und Tag and Bed Fangen wir mit Instagram an. Mal sehen, Sie können einen Link zu einem Instagram-Beitrag hinzufügen, und hier haben Sie den Instagram-Beitrag auf Ihrer Website. So einfach ist das. Schauen wir uns als Nächstes Facebook an. Dieser funktioniert auf die gleiche Weise. Leider ist der Link hier nicht verfügbar. Aber hier importierst du einfach den Link und er würde deinen Facebook-Beitrag anzeigen. Schauen wir uns als Nächstes Twitter an, was dasselbe sein wird. Wird nur den Tweet anzeigen. Es ist zwar nicht mehr Twitter, sondern X, aber der Link funktioniert immer noch. Aber lassen Sie uns trotzdem zu Google Maps übergehen. Dies könnte tatsächlich nützlicher sein als die, die wir uns zuvor angesehen haben. Sie können einfach Ihre Koordinaten importieren. Es wird dieser Standort angezeigt. Im Moment zeigt es einen Ort in Amsterdam. Sie können es vergrößern, es wird die Karte für Sie einfach so weit erweitern, wie Sie möchten. Links oben haben Sie die Koordinaten. Ja, das ist meiner Meinung nach ziemlich beeindruckend. Dann machen wir weiter. Gehen wir zu Trustpilot. Sie benötigen ein Konto bei Trustpilot und eine Unternehmens-ID, damit es funktioniert Letzt Schauen wir uns zu guter Letzt Tag und Bett an Schauen wir uns gemeinsam an , was Tag and Bet ist. Damit können Sie Feeds wie von Instagram und Facebook und allen anderen sozialen Medien ganz einfach importieren Facebook und allen . Hier haben wir alle Integrationen. Wir haben Framer nicht einmal auf dieser Liste, weil Framer anscheinend nicht so beliebt ist Ja, das war der soziale Schritt, und das werde ich im nächsten Video sehen 31. Versorgungseinrichtungen: Schauen wir uns den Nutzen an. Hier haben wir eine Reihe verschiedener Optionen und Dienstprogramme, die wir unserer Website hinzufügen können. Fangen wir mit Zitronenpressen an. Importiere es überall, wo wir unseren „Bis jetzt“ -Button haben, wir können sogar einen Link zu Lemon Squeeze Und wir ändern den Stil des Buttons. Wir können, wir können die Schriftart wählen und wir können einen Effekt wählen, wenn wir mit der Maus darüber fahren Schauen wir uns als Nächstes Gum Road an. Road ist ein großartiger Marktplatz, wenn Sie nach Vorlagen suchen Wenn Sie nach verschiedenen Schriftarten, Effekten und Overlays suchen , können Sie Ihr Produkt hier tatsächlich verlinken Wir können einen Codeblock direkt auf Ihrer Website hinzufügen. Wir geben den Code hier ein. Wir können die Sprache wählen, in der es formatiert werden soll. Wir können wählen, ob Sie statisch oder dynamisch möchten, wir können ein Thema auswählen, wir können die Schriftart erneut auswählen und die Schriftfarbe, die Ränder und die Polsterung Wir können Inhalte auch mit der Einbettungsoption einbetten. Sie können es hier mit einer Uro hinzufügen, oder Sie können Ihren HTML-Code direkt hier hinzufügen. Sie möchten zum Beispiel nicht mit YouTube-Videoeinbettung , sondern mit E-Frame einbetten . Wenn Sie beispielsweise eine kurze Röhre importieren möchten, ist dies möglicherweise die bessere Option, damit sie funktioniert. Dies ist die Option, die Sie verwenden. Als Nächstes haben wir unsere Schaltflächen zum Kopieren der Zwischenablage und zum Herunterladen. Wir können schreiben, welche Inhalte kopiert werden, wenn Sie auf die Schaltfläche klicken, was ehrlich gesagt ziemlich cool ist Wenn du zum Beispiel einen Haufen Code hast, den die Leute nicht auswählen sollen, kannst du ihn einfach unten haben. Sie können diesen Code in diese Schaltfläche einfügen. Wenn Sie darauf klicken, wird genau dieses Ding kopiert, was ziemlich erstaunlich ist. Schauen wir uns als Nächstes den Download-Button an. Sie können eine Datei auswählen, die hier heruntergeladen werden soll, oder Sie können eine URL einfügen, z. B. PDF. Sie können in jeder dieser Optionen auch Ihre Schriftart, Ihr Symbol und Ihren Stil anpassen. Gehen wir weiter zu Tabelle öffnen. Ich habe kein Open-Table-Konto, aber Sie können damit Reservierungen tätigen lassen. Als nächstes haben wir Product Hunt, das Fork-Event, all das. Wenn Sie sie verwenden, könnten sie sehr nützlich sein. Aber weil ich das nicht tue, finde ich sie nicht wirklich nützlich. Aber beim Produkt können Sie ein Produkt auswählen, das hier angezeigt wird. Schauen wir uns kurz die Gabel und das Ereignis an. Mit der Gabel können Sie einen Tisch reservieren. Lassen Sie die Kunden mit Ihrem Fork-Konto einen Tisch reservieren . Sie können auch Tickets bei Event Bright kaufen , wenn Sie Tickets verkaufen. Schauen wir uns endlich Sticky und Logo an. Klebrig. Sie können Haftnotizen und ein Logo haben. Sie können Ihr Logo einfügen und es ist ehrlich gesagt nur ein Bild, aber es ist ein Logo. Und Sie können den Firmennamen und den Radius auf Haftnotizen wählen . Wenn Sie live gehen, können die Leute hier tatsächlich ihre Notizen schreiben. Es funktioniert momentan nicht, ich bin mir nicht sicher warum. Vielleicht, wenn wir es auf eine richtige Seite stellen. Mal sehen, jetzt lass uns live gehen. Hm, ich bin mir nicht sicher, warum das nicht funktioniert. Äh, du kannst es einfach, du weißt schon, als Haftnotiz, als Dekoration zu deiner Website hinzufügen , egal. Entschuldigung, dass ich Sie fast falsch informiert habe. Ich entschuldige mich. Ja. Das waren alles Hilfsprogramme und jetzt ist es an der Zeit, dass wir mit all diesen Elementen der Anpassung experimentieren . 32. Alles zusammenfügen: Zeit, sie tatsächlich alle zusammenzustellen. Gehen wir zurück zum Dashboard und beginnen damit, eine schnelle neue Website zu erstellen. Zum Beispiel wird es um eine Marketingfirma gehen. Es ist Extorial Design. Lassen Sie uns einen Surfshop machen, alle Arten von verschiedenen Surfsportarten spezialisiert hat , von Wellen- über Windsurfen bis hin zu Cite Surf und Win Foil. Machen Sie es farbenfroh und lebendig, aber behalten Sie einen Mal sehen, was sich da alles einfallen lässt. Es ist auch eine nette Auffrischung für uns. Jetzt, wo die Generierung abgeschlossen ist, schauen wir uns das an Als Erstes sehe ich, dass es ein zufälliges Hintergrundbild ist, ich glaube, dass es nicht generiert werden könnte Das ist komisch, dass es das getan hat. Hier können wir sehen, dass es beim Kitesurfen tatsächlich Kits gibt, tatsächlich Kits die nichts mit Kitesurfen zu tun Beim Windsurfen wurde das Wakeboarden zum normalen Surfen hinzugefügt, wahrscheinlich weil es weiter verbreitet ist als alles andere, aber darum geht es nicht wirklich Schauen wir uns Elemente an , die wir hinzufügen könnten , um die Seite anzupassen. Zunächst möchte ich ganz oben eine Navigationsleiste einfügen. Ich glaube, ich möchte diesen hinzufügen. Lass es uns einfach hochziehen. Lass es uns hier reinklicken. Ich möchte Home on hinzufügen. Ich gehe zu Icons, ich gehe zu Hero. Hier haben wir ein kleines Symbol, machen wir es blau, es passt zur Stimmung Lass es uns ein bisschen kleiner machen, lass es uns auf die linke Seite legen Lass das Logo, wir haben kein Logo und wir wollen verlinken, ich glaube nicht, dass wir dieses Symbol wirklich so mit unserer Homepage verknüpfen können, wie ich es möchte. Lass uns das streichen, aber wir haben jetzt unseren Header , lass uns zurückgehen Setzen wir unser Logo ein, entfernen wir unser Symbol. Gehen wir zurück zu unserer Homepage. Lassen Sie uns zum Beispiel ein Youtube-Video über das Surfen einfügen . Ich möchte es einfügen, um es so zu machen, dass es die ganze Seite breit ist. Lass uns auf Youtube gehen. Gehen wir auf Youtube und suchen nach Videos. Lass uns einfach diesen Link kopieren und ihn einfach hier importieren. Lass uns die automatische Wiedergabe einschalten. Wenn wir es jetzt in der Vorschau ansehen, haben wir unseren Header hier. Wir haben unser Video gerade hier. Lass uns zurückgehen. Lass uns noch etwas hinzufügen. Fügen wir zum Beispiel ein Kontaktformular hinzu. Lassen Sie uns ein Formular hinzufügen. Ich möchte ein Typformular hinzufügen. Nun, jetzt möchte ich Calendly hinzufügen. Wenn der Shop zum Beispiel Veranstaltungen anbietet , die er veranstaltet, dann kann er sie hier zeigen Sie können ein Calendly-Konto auswählen, um eine Verbindung herzustellen. Aber lass uns auch auf unsere Seiten gehen. Gehen wir zu unseren Abschnitten. Scrollen Sie nach unten und fügen Sie hier das Kontaktformular hinzu. Der Kunde kann in Kontakt bleiben, wenn er möchte. Sie können dies anpassen und die verschiedenen Farben so auswählen , dass sie zu Ihrer Farbpalette passen. Ja, hier haben wir nur ein paar Elemente gemischt , um Ihre Website aufzupeppen. Sie können natürlich Elemente hinzufügen Ihren Bedürfnissen und der Art und Weise entsprechen, wie Sie sie anpassen möchten, aber das war nur ein kleines Beispiel um Ihnen den Einstieg zu erleichtern. Wir sehen uns im nächsten Video. 33. Praxis: Jedes Element verwenden: In dieser Übung werden wir zwei Elemente verwenden, um unsere Website, die wir im Laufe des Kurses erstellt haben, zu verbessern . Gehen wir auf unsere Website. Lass uns sehen. Die Hauptsache , die mit Sicherheit fehlt, ist ein Header. Ich nenne es immer Header, aber hier heißt es eigentlich eine obere Leiste. Ich gehe rein und importiere zum Beispiel diesen, indem ich ihn einfach anklicke und hineinziehe Doppelklicken wir, um hineinzugehen. Geben wir hier Get Learn ein. Und wir haben nicht wirklich andere Seiten. Ich entferne das einfach oder ich kann es lassen. Ich glaube, ich habe zum Beispiel vergessen, dass wir einen Blog haben. Ich werde diese einfach entfernen und den Blog hier lassen. Ich werde das mit dem Blog verlinken. Lass es uns nicht blau machen. Es ist schon klar , dass es ein Knopf ist. Hier ist unser erstes Element. Wenn wir eine Vorschau davon sehen, können Sie auf Blog klicken und unser Blog wird angezeigt. Also nicht zufrieden mit dem, was passiert, wenn Sie darauf klicken. Klicken Sie auf Lass uns auf Link klicken und dann auf Hover. Wir könnten es ein bisschen grau machen, nicht weniger, keine Unterstreichung wollen wir nicht. Lass uns jetzt eine Vorschau davon sehen. Sie können sehen, dass es grau wird. Los geht's. Gehen wir zurück. Das ist unser erstes Element. Was passiert? Ich habe keine Ahnung, was gerade passiert. Geh zurück nach Hause. Ich glaube, wir stecken fest. Also lass uns nachladen. Es hat unsere obere Leiste gerettet. Was das zweite Element angeht, lass uns sehen, ich möchte tatsächlich unser Youtube-Video hinzufügen. Lass es uns einfach hier hinzufügen. Wir fügen es dem Abschnitt hinzu. Lass uns das schneiden und hier hinstellen. Eigentlich ist es ein kleineres bisschen. Also das können wir, lassen Sie uns das entfernen. Eigentlich möchte ich diese Seite machen. Lass uns reinklicken. Wir haben unser Youtube-Video. Lassen Sie uns das tatsächlich für andere Plattformen optimieren . Das kleiner, mach das kleiner, mach das weiß. Und mach das auch weiß. Es ändert sich hier, mach es kleiner, es passt horizontal. Und leg es so hin. Und los geht's. Ich möchte mich momentan hauptsächlich auf die Dextop-Version konzentrieren. Wenn wir eine Vorschau davon sehen, haben wir unser Video hier. Ein paar Dinge, die ich ändern möchte, sind, dass ich unser Video einfügen möchte. Lass uns das eintippen, kopieren, hier verlinken. Schalten Sie Autoplay ein. Perfekt. Hier schneidet es ein bisschen ab. Wir möchten das vielleicht anpassen, aber Sie wissen, dass das Details sind und Sie es später korrigieren könnten. Aber der wichtigste Punkt war, dass ich meiner Webseite ein Video und einen Header hinzufügen wollte , und das haben wir erfolgreich gemacht. Das war unsere Praxis. Hoffentlich hat Ihnen dieses Kapitel gefallen und Sie haben es selbst ausprobiert, oder Sie haben diese Praxis befolgt. Und hoffentlich hast du etwas gelernt. Wir sehen uns im nächsten Video. 34. Kapitelübersicht (Fortgeschrittene Cutomizationen): In diesem Kapitel haben wir uns mit der erweiterten Anpassung und der Verwendung von Elementen befasst , denen Sie Ihre Website an Ihre Bedürfnisse anpassen können Wir haben uns mit Kopfzeilen befasst, wir haben uns Fußzeilen angesehen und uns eine Reihe verschiedener Integrationen mit Formularen, Google Maps, dem Hinzufügen von Symbolen, dem Hinzufügen Flügeln und kleinen Animationen zu Ihrer Website kleinen Animationen Und ich denke, es hat wirklich Spaß gemacht und du kannst deine Website wirklich anpassen Zum Beispiel ist das Scrollen mit dem Logo-Scrollen eines meiner Lieblingssachen. Es ist einfach so einfach, aber wenn ich mir verschiedene Websites ansehe, wenn ich im Internet surfe und es sehe und ich denke, wie haben sie das gemacht? Aber mit Framer ist es eigentlich so einfach Und es ist vielleicht nicht so einfach , weißt du, mit verschiedenen Plattformen wie dem, was fließt, Dochten oder quadratischem Raum Und solche Animationen zu machen ist irgendwie schwieriger oder wie die Animationskurve Und das Animationsbeispiel wie sich Ihre Animation genau mit Elementen verhalten wird. Und nur um Ihnen eine allgemeine Vorstellung von der Animation zu geben, ist wirklich erstaunlich. Und ich habe es noch nie wirklich irgendwo anders gesehen, zumindest nicht bei Webdesignern. Und ich finde es wirklich, wirklich nützlich, wenn man versucht, die Animation abzumildern. Aber du weißt nicht, was nicht stimmt. Und du versuchst immer wieder, die Zahlen zu ändern , aber es funktioniert nicht. Auf diese Weise ist es tatsächlich sichtbar und Sie können den richtigen Effekt erzielen, indem Sie einfach hinschauen und es anpassen. Jetzt war dieses Kapitel, und wir haben unserer Website einige Elemente hinzugefügt, die wir im Laufe des Kurses entwickelt haben Kurses entwickelt Und ich weiß nicht, ob Sie dasselbe tun, ob Sie eine Website entwickeln oder ob Sie, Sie wissen schon, für jede Praxis eine Reihe verschiedener Websites erstellen . Aber hoffentlich war es nützlich und hat dir Spaß gemacht und dass du etwas Neues lernst und es vereinfacht den Prozess für dich sogar ein bisschen Wir sehen uns also im nächsten Kapitel, wo wir uns mit den grundlegenden Dingen der Framer-ähnlichen Tonhöheneinstellungen befassen werden Dingen der Framer-ähnlichen Tonhöheneinstellungen Weißt du, es könnte langweilig sein. Du könntest sagen, dass alles irgendwie langweilig ist. Aber weißt du, es sind die Dinge , die wir tatsächlich wissen müssen , um das volle Potenzial der Website auszuschöpfen. Und wissen Sie, einige Einstellungen sind wichtig , wenn Sie Ihre eigene Website erstellen. Also werden wir uns das im nächsten Kapitel ansehen . Wir sehen uns dort. 35. Kapitel-Einführung (Nitty Gritty): Also willkommen zu unserem nächsten Kapitel, in dem es um das Wesentliche von Framer geht, das im Grunde nur für , Sie wissen schon, Details von Framer steht, die Sie sich vielleicht es um das Wesentliche von Framer geht, das im Grunde nur für , Sie wissen schon, Details von Framer steht, die Sie sich vielleicht zuerst nicht ansehen möchten. Weil du einfach sagst, oh, da ist KI. Es gibt quasi, du weißt schon, eine KI, die meine Website erstellt , weißt du, oh, warum brauche ich Seiteneinstellungen? Aber es ist wirklich wichtig, sie sich anzusehen. Und wir werden einfach detailliert darauf eingehen, was Sie dort tun können, welche Funktionen darin enthalten sind und auch einige verschiedene Dinge, indem wir Aktionen verwenden , um den Entwicklungsprozess zu vereinfachen und zu beschleunigen Und wir werden uns auch das Figma-Plug-In für Framer ansehen. Es ist wirklich nützlich und weil Framer früher ein Prototyping-Tool war, ist es wirklich interessant, sich die Integration anzusehen Also schauen wir uns das an, wir wählen einen Prototyp in Figma und versuchen, ihn auf Framer zu importieren Also wir sehen uns im nächsten Video. 36. Seiten- und Websiteeinstellungen erkunden: Schauen wir uns nun die Seiten- und Seiteneinstellungen an, die Sie hier finden. Hier können Sie eine Reihe verschiedener Dinge sehen. Auf der linken Seite haben wir zuerst Seiteneinstellungen und dann Seiteneinstellungen. Fangen wir mit den Seiteneinstellungen an. Wir können allgemein sagen wo wir den Seitentitel ändern und die Sprache der Website festlegen können . Wir können auch eine Seitenbeschreibung hinzufügen , die unsere Suchmaschinenoptimierung unterstützt. Wir können Transformations - und Layoutanimationen deaktivieren , wenn der Benutzer aus Gründen der Barrierefreiheit die Bewegung reduzieren möchte. Hier können wir auch die Veröffentlichung unserer Website für alle Domains rückgängig unserer Website für alle Domains Da wir dies nicht veröffentlicht haben, gibt es nichts, was wir rückgängig machen könnten Hier fügst du auch ein Favicon hinzu. Dieses kleine Ding heißt Favicon. Sie können sehen, dass es gerade Framers One ist. Auch wenn du zum Beispiel einen Link zu einer Website teilst, würde dieses Bild beispielsweise auf Discord erscheinen , so wie das Bild erscheint, wenn du einen Link von der Website sendest. Sie können es also hier benutzerdefiniert einrichten. Sie möchten, können Sie Ihrer Website einen Passwortschutz hinzufügen Wenn Sie möchten, können Sie Ihrer Website einen Passwortschutz hinzufügen , der in einem höheren Tarif enthalten ist. Wir haben auch einige erweiterte Einstellungen wie Canonical Ural. Sie können Ihre Google Analytics-ID verbinden, um Ihre, die Leistung Ihrer Website zu verfolgen Sie können Ihrer Website auch benutzerdefinierten Code und Skripte hinzufügen. Sie können einen Start- oder Head-Tag hinzufügen. Ende des vorherigen Head-Tags. Am Anfang des Body-Tags. Am Ende des Body-Tags. Das heißt, wenn Sie mit Framer in fortgeschrittene Dinge einsteigen möchten , können Sie Ihren eigenen Code hinzufügen Schauen wir uns als Nächstes die Domains an. Unsere derzeitige Basisdomäne wären Creative Coding-Kurse. Framer, ich meine, ich könnte es so ändern wie Yeti Learn Framer Und wir könnten es dabei veröffentlichen. Lass es uns tatsächlich tun. Wir können sehen, dass es jetzt live bei Yetiarnframi ist Sie können sehen, dass die Website veröffentlicht und optimiert wurde. Wir können auch eine benutzerdefinierte Domain hinzufügen. Wenn wir ein Upgrade durchführen, können wir tatsächlich eine benutzerdefinierte Domain hinzufügen. Wir können auch Weiterleitungen hinzufügen. Anstatt eine neue Seite zu erstellen, wenn du einfach weiterleiten möchtest, anstatt eine neue Seite zu erstellen und zu sagen, okay, das ist die neue Seite, kannst du deine alte URL auf eine neue URL umleiten. Wir haben auch Staging und Versionen. So behalten Sie den Überblick über Backups. Wenn Sie beispielsweise Staging aktivieren, können Sie tatsächlich eine Version für Ihre Website auswählen , die Sie veröffentlichen möchten Hier haben wir verschiedene Versionen. Im Moment haben wir nur eine, nämlich Bühne und Live. Als Nächstes können wir uns mit der Analyse der Website befassen und Sie können die Anzahl der einzelnen Besucher und Gesamtzahl der Seitenaufrufe sowie die Dauer sehen. Wenn wir Zuschauer hätten, wäre dies normalerweise wie ein Auf- und Abwärtsdiagramm. Aber im Moment haben wir keine, weil wir es gerade veröffentlicht haben. Wir können auch die wichtigsten Besucherquellen von Google, Twitter, Facebook, Linton oder Framer sehen Twitter, Facebook, Linton oder Framer Diese werden je nachdem, woher die Besucher kommen, aktualisiert je nachdem, woher die Besucher kommen Wir können auch unsere Top-Seiten sehen , die gut abschneiden. Wenn wir auf Pläne eingehen, können Sie hier Ihre Website aktualisieren und Ihre persönliche Website aktualisieren oder daraus einen Team-Tarif machen. Wenn wir als Nächstes zu den Homepage-Einstellungen gehen, kannst du den Titel der Startseite, den Slug, die URL ändern den Slug, die URL Aber es ist die Startseite, also änderst du sie nicht Sie können eine Seitenbeschreibung hinzufügen. Sie können auch eine Suche in Suchmaschinen hinzufügen. Dies wird angezeigt, wenn Sie danach suchen, oder Sie können das hier wieder deaktivieren Sie können ein Seitenbild anstelle des Seitenbilds hinzufügen und auch benutzerdefinierten Code hinzufügen. Die Einstellungen sind für alle Ihre Seiten so ziemlich gleich. Ja, das waren die Seiten- und Seiteneinstellungen. Hoffentlich haben Sie ein bisschen ein klares Verständnis davon. Wir sehen uns im nächsten Video. 37. Aktionen verwenden: In Aktionen, um Ihren Erstellungsprozess zu vereinfachen. Wie du siehst, sind das nur Abkürzungen, um Dinge für dich zu erledigen. Sie können beispielsweise tippen, um Seiten zu durchsuchen oder zu suchen. Zum Beispiel können wir einen Abschnitt erstellen. Einige der Aktionen, die Sie tatsächlich ergreifen können , sind das Erstellen einer Webseite, Erstellen mit KI, das Erstellen einer Komponente Veröffentlichen Ihrer Website. Von hier aus können Sie die Website öffnen, Version des Verlaufs einsehen oder Mitarbeiter einladen Oder Sie können die Teambibliothek durchsuchen. Ich möchte unsere Blog-Seite besuchen. Wenn ich einen Schrägstrich einfüge, können wir zum Beispiel die Blogseiten sehen Wenn ich auf Blogseiten gehe , komme ich zu diesem Blog Wenn ich etwas einfüge, komme ich zu Blogs. Alle Blogs, die wir zuvor geschrieben haben. Ehrlich gesagt denke ich nicht, dass das sehr funktionell oder beliebt ist. Ich wollte es dir nur zeigen, weil es da ist und es benutzt werden kann, wenn du willst. Ehrlich gesagt ist alles so benutzerfreundlich gestaltet so benutzerfreundlich dass ich nicht wirklich daran gedacht habe, es zu verwenden, bis ich mit der Erstellung dieses Kurses angefangen habe. Und als etwas, worüber ich sprechen sollte. Ja, hier ist zum Beispiel der Versionsverlauf. Das könnte nützlich sein, weil ich nicht sicher bin, wo ich das finden kann. Ich kann zum Beispiel alle Änderungen sehen , die am Blog vorgenommen wurden. Vor 3 Stunden war die Blog-Seite noch nicht da, jetzt ist sie hier. Wir haben Dinge von hier zu dem geändert. Sie können die Änderungen tatsächlich sehen, was ziemlich erstaunlich ist. Sie können tatsächlich zu dieser Version zurückkehren, aber indem Sie Ebenen auswählen, kopieren und sie hier einfügen Ja, das war ein kurzes Video über Aktionen. Lass es mich bitte wissen, wenn du das nützlich findest. Ich bin wirklich gespannt, Ich bin wirklich gespannt wie du vielleicht Anwendungsfälle dafür findest. Aber ehrlich gesagt würde ich lieber in die Einstellungen gehen oder Einfügen gehen und alles selbst machen , weil es buchstäblich nur zwei Klicks entfernt ist. Ja, das werde ich im nächsten Video sehen. 38. Figma-Plugin: In diesem Tutorial werden wir uns mit der Figma-Integration mit Framer befassen Figma-Integration mit Klicken wir auf Holen Sie sich das Figma-Plug-in. Klicken wir auf Try it Out. Loggen wir uns mit Framer ein. Klicken wir erneut auf Try it Out. Suchen wir nach einer Beispiel-Website , die wir vielleicht importieren möchten. Lass es uns einschalten. Wählen wir eine Ebene zum Kopieren aus. Wir haben eine Ebene ausgewählt, jetzt kopieren wir sie in die Zwischenablage Jetzt erstellen wir einfach eine neue Design-Website. Wir fügen ein, hier ist es, so einfach ist das. Sie können unten sehen , dass es von Figma hochgeladen wird und Sie können sehen, dass unsere Ebene gerade hier ist Lass uns tatsächlich eine andere Seite auswählen. Wählen wir die Startseite aus. Lassen Sie uns diese Kopie in die Zwischenablage kopieren. Jetzt fügen wir es einfach ein. Sie können sehen, dass all diese Elemente vollständig anpassbar sind. Sie importieren ihn einfach, einen Prototyp, in nur 10 Sekunden in eine voll funktionsfähige Website . Es ist alles anklickbar. Sie können ein Bild auswählen, Ihren Text ändern und Ihre Elemente anpassen Alle diese Elemente sind getrennt. Genau wie bei Figma können Sie die Formen ändern. Keines davon ist wie Bilder, aber das sind tatsächlich Elemente, die Sie ändern können Ja, das ist ziemlich beeindruckend. Und dann kannst du auf Veröffentlichen klicken. Sehen wir uns eine Vorschau an. Hier hast du eine vollständige, ich weiß, warum ich nicht scrollen kann. Gehen wir für eine Sekunde zurück. Es kann ein paar Änderungen erfordern , bis es fantastisch ist. Dies ist zum Beispiel kein Formular, also müssten wir es auf ein echtes Formular umstellen Gehen Sie zum Einfügen von Formularen und fügen eines der Formulare hier hinzu, fügen Sie hier einen Abschnitt hinzu. Aber ja, das ist meiner Meinung nach wirklich unglaublich. Lass uns auf die Website gehen und es uns ansehen. Der Desktop ist da. Wir wollen das nehmen und es hierher ziehen. 1 Sekunde. Wir sind fast da , um es ein bisschen mehr auszuprobieren , damit es auf unsere gesamte Seite passt. Mal sehen, ich finde das gut. Wenn wir jetzt auf die Website gehen, müssen wir sie zuerst aktualisieren und dann zur Seite gehen. Jetzt haben wir unser Figma-Design. Diese sind in unserem Framer ein bisschen durcheinander geraten und es ist eine voll funktionsfähige Ja, das ist ziemlich beeindruckend. Hier hast du's. Ja. Einfach ausgestreckt. Es ist keine große Sache. Kann es kleiner machen. Leg es hier hin. Los geht's. So integrieren Sie Ihr Figma in Framer Wir sehen uns im nächsten Video. 39. Framer-Vorlagen verkaufen Teil 1: Machen Sie sich mit Framer vertraut. Und wie man Dinge in Framer macht. So erstellen Sie Ihre eigene Website. So importieren Sie sogar Ihren Prototyp aus Figma. So passen Sie Ihre Website auf fortgeschrittene Weise an. Wie man wirklich zum Beispiel ein Bild, ein Video, ein Karussell und all diese Dinge hinzufügt ein Bild, ein Video, ein Karussell und all diese Wie animiert man Dateien und fügt sie hinzu. Sie haben gelernt, was eine Lotdatei ist und wie Sie Ihr eigenes Blog erstellen können All das Wissen , das du jetzt hast. Ja, du fragst dich vielleicht, was ich jetzt mit all dem Wissen mache? Wie kann ich es anwenden? Webdesign ist momentan wirklich groß und es wird von Tag zu Tag größer. Viele Leute entwerfen Vorlagen. Hier möchte ich dir zuerst den Vorlagenbereich zeigen. Hier haben wir viele Suchschaltflächen für die Vorlage oder Sie können nach unten scrollen und hier haben wir verschiedene Kategorien von Vorlagen. Es gibt einen kostenlosen Service für künstliche Intelligenz, Richtlinien für Blog-Marken, Geschäftsänderungsprotokolle, E-Commerce usw. Es gibt viele verschiedene. Schauen wir uns einige Vorlagen für Pre-Websites an. Lassen Sie uns zum Beispiel einige in verschiedenen Genres öffnen. Das ist also wie Game Three D Modeling. Das ist ein sehr korporativer Stil. Lassen Sie uns auch eines für ein Fotografie-Portfolio öffnen . Lassen Sie uns nach unten scrollen. Hier sind ein paar von Pad und wir werden uns diese etwas später ansehen. Schauen wir uns den allerersten an, wie ein Spiel. Schauen wir mal, es ist sehr modern. Vielleicht ein Tablet. Freundliches Design. Oder auch iPhone. Wie jedes Telefon, ehrlich. Hier haben wir verschiedene Konfigurationen der Website. Lassen Sie uns, wir haben nur drei verschiedene Charaktere des D-Modells. Lassen Sie uns sehen, es ist eine Website der NFT Collection. Wir können es uns in der Vorschau ansehen. Lass uns eigentlich auf die Website gehen. Mal sehen, wir haben eine Nachrichtenschaltfläche, eine Twitter-Schaltfläche. Wir haben das Menü, und das führt uns hierher. Hier haben wir eine nette kleine Animation. Wir haben ihr Instagram und wir haben E-Mail-Vorteile für Inhaber, ein paar Textblöcke, einige Attribute. Der FAQ-Bereich mit Straßenkarten mit einer kleinen Animation, ich mag diese Schrift wirklich. Lernen Sie das Team kennen. Wir haben die Fußzeile. Das ist sehr schön gemacht. Alle diese Links funktionieren und führen uns zu den verschiedenen Bereichen der Website. Hier haben wir eine kleine Beschreibung der Website. Wir haben die tatsächlich verwendeten Funktionen, Scroll-Effekte, Textilien, Breakpoints und Scroll-Targets Sie können sich hier über jeden einzelnen informieren, es gibt kein Gatekeeping im Rahmen der Gemeinschaft Das ist offiziell bestätigt. Wenn Sie in die Vorlage gehen, sagen sie Ihnen buchstäblich, was sie verwenden. Sie können also tatsächlich versuchen diesen Effekt für Ihre eigene Website nachzubilden Sie können tatsächlich auch lernen und sich nicht nur fragen, wie sie das gemacht haben Du kannst sogar den Ersteller der Vorlage kontaktieren, ich habe zu einer neuen gewechselt, als ob wir genug davon haben. Wir haben hier die Liste der Seiten, wieder die Beschreibung. Wir können diese Vorlage melden. Wir können uns ansehen, wie Vorlagen funktionieren. Es ist ein Anfängerstart für jedermann. Wir können unsere Vorlage tatsächlich verkaufen. Das ist es, was wir uns gerade ansehen. Schauen wir uns das an. Wir können es uns auch in der Vorschau ansehen. Nur eine kleine Inspiration für das, was ich gleich erklären werde. Ich weiß, dass ich nicht viel gesagt habe, aber hier kannst du nach unten scrollen. Hier sind ein paar Animationen. Das ist sehr nett. Wir können darauf klicken, es gibt auch eine kleine Animation. Die sind wirklich nett. Hier haben wir eher ein paar Icons, eine Warteliste. Gehen wir nach oben, können nach unten zu den Vorteilen scrollen. Schauen wir uns die letzte an, eine Portfolio-Website in Fotoportfolio-Qualität für eine Agentur oder wenn Sie eine kreative Person oder ein Profi sind. Anstatt uns die Fotos anzusehen, wir uns noch einmal eine Vorschau an. Ich kann sehen, dass es wirklich schöne Fotos sind, einige wirklich unterschiedliche Arbeitsfälle die die Vielfalt der Fotos zeigen. Wenn wir sie anklicken, kommen wir tatsächlich zu dem Foto. Und ein detailliertes Foto, eine detaillierte Information über das Foto, als es aufgenommen wurde. Zeitplan, die Rolle, in der wir die Website besuchen können, das ist ziemlich beeindruckend. Wir können noch ein paar Aufnahmen sehen, einige Detailaufnahmen des Fotos. Wir können es hier sehen, wir können zur Startseite zurückkehren. Wir können zu diesen Links gehen. Das ist ziemlich erstaunlich. Sie können jedes davon sehen. Beachten Sie, wie detailliert diese Vorlage ist, als sie diesen Text geschrieben haben. Aber das ist nur eine Vorlage. Es ist wahrscheinlich von KI generiert. Aber es ist immer noch so, als ob der Aufwand da ist. Es ist nicht wie irgendein Lom Ipsen-Text. Es ist tatsächlich eine Geschichte für die Vorlage erfunden, die der Vorlage selbst ein wenig Leben einhaucht Ich bin wirklich neugierig auf diese. Eine Popcorn-Firma hier. Schau dir das an. Ein nettes Foto. Warum erzähle ich es dir und zeige dir all diese Vorlagen? Nun, weil du mit Framer tatsächlich deine eigenen Vorlagen erstellen und verkaufen kannst. Sie könnten sie auch kostenlos herausgeben. Sie können tatsächlich immer noch Geld verdienen , indem Sie Ihre Vorlagen kostenlos erstellen. Sie erhalten einen Affiliate-Link und Sie bekommen etwas Geld davon. Aber Sie können sehen, dass die Vorlagen auch hier zum Verkauf stehen. Und sie reichen von 40 bis 20$ bis 100$. Wenn Sie sich ansehen möchten , was es für 100$ zu bieten hat, lassen Sie uns Sie können hier klicken und es führt uns zu einem Blog, von dem wir tatsächlich wissen, wie man Lass uns zurückgehen. Lass uns sehen, es gibt einige Unterlagen. Führt uns nirgendwohin, Fangen Sie an, bringt uns zur Preisgestaltung. Und wenn wir hier klicken, gibt es einige sehr schöne Animationen. Sie können das sehen, wir haben buchstäblich gelernt. Und das ist buchstäblich nur klicken und ziehen, oder? Sie wissen genau, wie man das erstellt. Mal sehen, was sonst noch. Dies sind einige Drop-down-Menüs. Das ist wirklich nett Die Pfeilanimationen tauchen hier auf und einige Symbole. Aber das ist sehr einfach hinzuzufügen. Sie können sich das ansehen und sagen, okay, okay, das ist vielleicht ein bisschen schwierig, aber es ist machbar, und das sind 100$. Wir können das mit dem, ist machbar, und das sind 100$. Wir können das mit dem, was Sie gelernt haben, neu erstellen gelernt haben, Und du kannst damit experimentieren, lass uns reingehen. Und Sie können tatsächlich immer noch nach unten scrollen und sehen, was sie verwendet haben , und selbst lernen, was sie verwendet haben, und diese Vorlage neu erstellen Ich versuche damit zu sagen, dass Sie Geld verdienen können , indem Sie Vorlagen erstellen Wie erstellt man eigentlich eine Vorlage? Wir schauen uns den gesamten Kurs an. Sie lernen, wie man Websites gestaltet und einrahmt. Jetzt gehst du zu Vorlagen. Du scrollst nach unten, das war ein bisschen zu viel. Oh mein Gott. Es gibt einen Become Template Creator. Sie können hier auf Vorlage einreichen klicken. Zuerst benötigst du einen Kauflink von Lemon Squeeze oder Gum Road. Schauen wir uns zuerst Lemon Squeeze an. Beides sind Plattformen , auf denen Sie Ihre Sachen verkaufen können. Lass uns auf Kostenlos loslegen klicken Du meldest dich einfach hier an. Lass uns anmelden. Nachdem Sie sich angemeldet haben, erhalten Sie eine Bestätigungs-E-Mail. Danach führt Sie der Link dort auf diese Seite. Da steht: Willkommen als Vorstandspartner. Erstelle jetzt deinen Shop. Geben wir unserem Geschäft einen Namen. Zum Beispiel Crafts. Ich möchte, dass unser Geschäft L Es Crafts ist. Handwerk. Das kann ich dir nicht sagen. Warum nicht? Wählen wir „Unser Land Türkei und klicken Sie auf „Meinen Shop erstellen“. Das Geschäft Ul wurde eingenommen. Ich werde tun, was alle tun, und einen weiteren Buchstaben hinzufügen. Du bist jetzt in deinem Laden. Sie müssen ein paar Schritte ausführen, um Ihr Geschäft zum Laufen zu bringen. Wir müssen eine Kontakt-E-Mail-Adresse mit Logo hinzufügen und Live-Zahlungen und alle Funktionen aktivieren. Das können Sie in Ihrer Freizeit tun. Ich wollte dir nur zeigen, wie man sich anmeldet und wie man sich tatsächlich anmeldet. Sie müssen Ihr Logo hinzufügen, Sie müssen einige Dinge ändern, aber Sie sollten nicht so lange brauchen. 40. Framer-Vorlagen verkaufen Teil 2: Jetzt, wo wir uns ein bisschen mit Zitronenpresse beschäftigt haben, möchte ich Ihnen eigentlich Gum Road zeigen Ich selbst liebe Com Road. Es gibt viele, viele nützliche Ressourcen. Und wir haben uns Gum Road ein wenig angesehen, als wir uns mit Insource und erweiterter Anpassung befassten Insource und erweiterter Anpassung Und ich denke, es ist ein großartiger Marktplatz. Zuerst klicke ich auf Verkauf starten. Und sobald Sie dabei sind, haben Sie Ihr Konto. Und ich liebe das Webdesign von Gum Road. Und hier habe ich ein paar Sachen , die ich schon einmal heruntergeladen habe. Mal sehen, ich kann tatsächlich meine eigenen Produkte haben. Wir schauen uns das Design hier an. Die Farbe ist einfach toll. Hat auch einige ermutigende Texte. Ich liebe Gum Road. Ich verspreche, das ist keine Werbung, aber Ihr erstes Produkt muss nicht perfekt sein. Stell es einfach raus und schau, ob es klebt. Also wollen wir auf ein neues Produkt klicken und das wäre ein digitales Produkt, weil wir unsere Vorlage verkaufen werden. Wir benötigen den Namen des Produkts. Dies wird eine Vorlage sein, einige Auswahlen treffen, einige Felder ausfüllen und in wenigen Minuten live gehen Mein erstes digitales Vorlagenprodukt. Lassen Sie uns den Preis auswählen. Es ist meine erste Servervorlage, also machen wir neun Dollar draus Ich finde das nicht so schlimm. Lass uns auf Weiter klicken. Hier haben wir noch ein paar Sachen zum Ausfüllen. Der Name ist immer noch editierbar. Sie können eine Beschreibung hinzufügen. Hier ist meine erste Cramer-Vorlage. Sehen Sie auf der rechten Seite, dass sie live aktualisiert wird, während ich tippe. Genieß es. Wir können zum Beispiel schreiben, es ist unsere Vorlage für digitale Produktdienstleistungen, nicht wie Gum Road, aber wir verkaufen zum Beispiel Online-Kurse. In dieser Vorlage dreht sich alles um Online-Kurse und deren Einführung. Sie verkaufen also keine digitalen Waren, indem sie für sie werben. Diese Vorlage bietet Ihnen Bekanntheit und Aufmerksamkeit für Ihr Unternehmen im Cyberraum. Sie können schreiben, was Sie wollen, es ist Zahnfleisch. Schreiben Sie die gesamte Beschreibung mithilfe des Chats neu. Sie können es auch würzig machen, indem Sie ein Bild hinzufügen. einen Button einfügst, kannst du einen Text beantworten, weißt du, hallo Welt, weißt du Geben wir YouTube.com ein. Sie können eine Schaltfläche hinzufügen. Also hier klickst du auf einen sehr hübschen Button. Dadurch gelangst du zu YouTube.com und hier können wir die URL anpassen Meine erste Vorlage, das ist die Geschäftsnummer, glaube ich. Ich bin mir nicht sicher, ob Sie es ändern können, aber Sie können es noch einmal überprüfen. Sie können das Cover ändern. Das wird hier reinkommen. Dies wird zum Beispiel der Vorlagen-Screenshot sein. Sie wissen schon, die Hauptseite, die Startseite und die oberste Startseite. Das wäre dein Deckmantel. Meine Empfehlung in dieser Thumbnail. Vielleicht könnte es ein Framer-Logo sein oder was auch immer Sie möchten, Produktinformationen. Aufruf zum Handeln. Sie können verschiedene Handlungsaufforderungen haben. Ich würde es behalten. Ich will diese Zusammenfassung. Du wirst hier einen sehr schönen Platz bekommen. Wir haben zusätzliche Details, in denen Sie Attribute und Werte hinzufügen können. Weißt du, das kann zum Beispiel sogar diese Beschreibung von Dingen sein, kann zum Beispiel sogar diese Beschreibung von Dingen sein die er in Framer verwendet hat Wie in der Vorlage war Ihr Scroll-Effekt einer davon. Du kannst Al Ah hinzufügen, das siehst du auf der rechten Seite. Auf der rechten Seite können Sie den Scroll-Effekt sehen und ihm einen beliebigen Wert hinzufügen, MA, Popup-Effekt, Wahnsinn und so. Weißt du, meiner Meinung nach kann man eine Form davon haben. Du kannst deine Kunden in die Circle-Community oder auf einen Discord-Server einladen Circle-Community oder auf einen Discord-Server Wir haben keine Circle-Community mehr, das ist nicht möglich, oder sie können zahlen, was sie wollen Wir können einen vorgeschlagenen Betrag und einen Mindestbetrag hinzufügen , den wir ändern können. Auf der vorherigen Seite können wir Variationen des Produkts anbieten. Wenn Sie beispielsweise eine Vorlage in verschiedenen Farbschemata haben , könnten Sie das vielleicht tun. Aber sie können es in den Framer nehmen und es trotzdem ändern. Aber das liegt ganz bei Ihnen in Ihrer Vorstellung und wir können die Menge ändern, aber es ist vielleicht ein digitales Produkt Tu das nicht. Und zusätzlicher Betrag, wie viel es kostet, dieses Add-On oder eine andere Version zu haben. Hier haben wir einige Einstellungen, mit denen wir den Produktverkauf einschränken, Kunden die Möglichkeit geben können , eine Menge auszuwählen, die Anzahl der Verkäufe, eine eindeutige Lizenz, einen Schlüssel und ein Produkt pro Verkauf als Veröffentlichung anzuzeigen . Für Zwecke, die eine steuerlich festgelegte Rückerstattungspolitik bedeuten , können Sie, wenn Sie möchten, eine feine Pause einlegen. Alles klar hier, T da drüben, du kannst es genau hier sehen. Filmpolitik. Filmpolitik genau da. Und wenn Sie mit der Maus drüber fahren, sehen Sie genau hier diesen schönen Text Kann den Inhalt eingeben, den wir nicht verkaufen wollen, und wir können den folgenden hier hochladen Wir können das ändern. Es gibt zwei verschiedene Inhaltseditoren. Wir teilen es auch, nachdem Sie Ihr Produkt veröffentlicht haben , sich um Kaugummi und Zitronenpresse handelte. Nachdem Sie Ihr Produkt auf Lemon Squeeze oder Gum Bro veröffentlicht haben , erhalten Sie einen Link zum Teilen , den Sie in diesem Formular verwenden können. Um Ihre Vorlage bei Framer einzureichen. Sie würden Ihren Namen und Ihre E-Mail-Adresse eingeben. Sie benötigen kein Tarter-Profil, wenn Sie möchten, können Sie das tun. Ihre veröffentlichte URL erscheint genau hier und dann reichen Sie sie ein Dann gibt es einige Anforderungen für die Vorlage und Sie können abgelehnt werden. Aber hier in der Liste gibt es Gründe, warum sie abgelehnt werden könnte. Wenn es akzeptiert wird, was Sie bekommen, die Vorteile sind hier, verdienen Sie Geld mit kostenlosen Vorlagen, wie erklärt wird. Damit Sie detaillierte Informationen zu all dem auf Framern sehen können , reichen Sie eine Vorlagenseite ein Hoffentlich war das nützlich und wir sehen uns bald. 41. Kapitelübersicht (Nitty Gritty): In diesem Kapitel haben wir also alle Details zu Framer, einige Seiteneinstellungen und einige Seiteneinstellungen untersucht einige Seiteneinstellungen und einige Seiteneinstellungen Wir haben uns auch mit dem fantastischen Figma-Plug-In befasst, mit dem Sie jedes Design aus Figma in Framer importieren jedes Design aus Figma Und es wird tatsächlich, wissen Sie, zu einer vollständig geschichteten Website, einer funktionierenden Website Und es unterscheidet, wissen Sie, den Text vom Bild bis zu Elementen, und Sie können tatsächlich alles anpassen Wir haben uns auch ein bisschen mit Aktionen befasst , die ich nicht wirklich benutze nicht live sein werden, aber wie man vielleicht den Prozess vereinfachen kann , Dinge in Framer zu erledigen Und das sind quasi nur Abkürzungen und wie man mithilfe von Aktionen nach Seiten sucht Das war's für dieses Kapitel und wir sehen uns bald. 42. Kursprojekt: In dieser Praxis ist es also unser Ziel, eine Website zu erstellen und nur eine der fortschrittlichen Anpassungstechniken zu verwenden der fortschrittlichen Anpassungstechniken , die uns im Premium-Chop-Spiel fehlen es gerne selbst ausprobieren und es selbst erreichen oder kommen Sie mit uns, aber versuchen Sie, Sie wissen schon, es unterwegs ein wenig zu ändern Also fangen wir mit I an, also werden wir eine neue Website erstellen und wir werden auf Kramer klicken Also werden wir unser Rom einfach hier drin aufschreiben. Und lass uns nachdenken. Ich werde das für eine Hundepflegemarke schreiben. Unser Produkt beinhaltet die Pflege. Zeigen Sie das Produkt. Okay, lass uns das versuchen. Okay, also nachdem es unsere Website generiert hat, schauen wir mal. Wir müssen nur ein Element hinzufügen, eines für Fortgeschrittene. Lassen Sie uns das Tutorial um ein fortgeschrittenes Element überspringen. Und wir werden bereit sein. Ich möchte Carousel hinzufügen. Lassen Sie uns die Elemente zum Karussell hinzufügen. Nehmen wir sie aus Canvvast, nehmen wir das Karussell auf Los geht's. Lassen Sie uns das ein bisschen ausdehnen. Lass uns eine Vorschau davon sehen. Los geht's. Hier haben wir unser Karussell, das in unserem Kurs für Fortgeschrittene entwickelt wurde Schließlich möchte ich es einfach veröffentlichen und es zum Beispiel nach Po Care benennen und es zum Beispiel nach Po Care benennen. Warum nicht? Jetzt ist unsere Website veröffentlicht und live und jeder kann darauf zugreifen und sehen, wie wir uns darum kümmern. Schauen Sie sich einfach an, was KI über unsere Marke generiert hat. Ja, das war's für dieses Video.