Erstellen und Entwerfen interaktiver Websites mit Webflow

1. Einführung: Holy Gus, sind Sie daran interessiert, eine interaktive TreeD-Website mit Webflow zu erstellen und zu gestalten Wenn die Antwort ja ist, dann könnte der Kurs für Sie sein. Also werden wir zunächst unser Tree D-Modell von Spline beziehen Dann werden wir das Tree D-Modell in die Website integrieren das Tree D-Modell in die Website Dann werden wir auch das Tree D-Modell animieren. Seht euch das an, Leute. Sehr cool, oder? Im ersten Projekt werden wir also eine professionelle Portfolio-Website erstellen . Also sieh dir das an. Im zweiten Projekt werden wir eine Produkt-Landingpage erstellen. Schau dir das an. Und im dritten Projekt werden wir eine Website für ein Restaurant erstellen. Schau dir das an. Darüber hinaus werden wir mit Typeform ein Online-Reservierungsformular für unsere Restaurant-Website erstellen ein Online-Reservierungsformular Typeform ein Online-Reservierungsformular für unsere Restaurant-Website Wenn Sie also auf diese Schaltfläche klicken und eine Bestellung aufgeben, werden Sie zum Online-Reservierungsformular weitergeleitet . Okay. Sobald wir die Website erstellt haben, werden wir auch SEO-Audit mit SEOptimer und Zambras durchführen und mit Webflow AI Site Builder Unternehmensprofil erstellen eine Website mit Sie müssen nur einen einfachen Abschlussball schreiben und auf Generieren klicken. In weniger als einer Minute generiert AI Ihnen eine wunderschöne Website wie diese. Schau dir das an. 2. Suchen eines 3D-Modells auf Spline: Heiliger Gast, willkommen zurück zum Kurs. In diesem Video werden wir Tre-Modelle mit Spline bauen Tre-Modelle mit Spline Okay, also lass uns jetzt anfangen. Zunächst müssen Sie Ihr Konto erstellen. Also werde ich mich einfach mit meinem E-Mail-Konto anmelden , Leute. Okay, wie ihr jetzt sehen könnt, werden wir zum Dashboard weitergeleitet. Okay, also wenn du nach unten scrollst, gibt es mehrere Tutorial-Videos. Wenn Sie also Freizeit haben, empfehle ich Ihnen wirklich, sich diese Videos anzusehen. Sie sind sehr hilfreich. Und hier unten haben wir auch mehrere coole Projekte , bei denen wir beide Spline verwenden Wenn ihr also neugierig seid, könnt ihr auf eines dieser Projekte klicken, Leute Okay, jetzt fangen wir an. Eigentlich hast du zwei Möglichkeiten. Die erste Option besteht also darin, das Trendmodell von Grund auf neu zu erstellen. Und die zweite Option besteht darin, eines der Triny-Modelle in den Bibliotheksabschnitten zu verwenden, und dann können Sie es nach Ihren Wünschen anpassen Sie können die Farbe ändern, Sie können den Stil ändern. Sie können die Größe ändern. Du kannst tun, was du willst, oder? Klicken Sie also einfach auf Neue Datei und Sie werden zur Bearbeitungsseite weitergeleitet. Wenn Sie von vorne beginnen möchten, klicken Sie einfach auf dieses Symbol Es gibt verschiedene Formen , mit denen Sie beginnen können. Zum Beispiel Rechteck, Ellipse, Dreieck, Fünfeckstern Sie können die gewünschte Form auswählen. Aber wenn Sie noch keine Erfahrung mit der Erstellung von TreeD-Modellen haben , empfehle ich Ihnen wirklich, die Bibliothek zu verwenden, Klicken Sie also einfach auf Bibliothek. Wie ihr sehen könnt, gibt es viele TD-Modelle , die ihr verwenden könnt. Okay, jetzt werden wir untersuchen, welches TD-Modell wir für unser Projekt verwenden möchten, oder? Nun, Sie können die Bibliothek auch hier öffnen, also klicken Sie einfach auf Bibliothek. Und ich werde es auf der anderen Registerkarte öffnen. Wie ihr sehen könnt, gibt es zwei Hauptbereiche. Der erste Abschnitt ist also Sünde und der zweite Abschnitt ist Objekt. Also wähle ich einfach Objekt aus, Leute, und es gibt viele verschiedene Kategorien. Zum Beispiel Trey-Symbole, Rücken, Flaschen, Schachteln, Gebäude, Charaktere, Weihnachtsputz, Kleidung, Kosmetik, Becher, Emoji, Umwelt und noch viele Okay, in diesem Beispiel werde ich Charaktere auswählen Und scrollt einfach nach unten, Leute. Es gibt viele drei D-Modelle, Leute. Schau dir das an. Sehr coole rote Modelle. Okay, also werde ich die drei Modelle auswählen. Sie können gerne ein beliebiges TD-Modell auswählen. Okay, klicken Sie einfach auf das Tree D-Modell, dann werden Sie zur Bearbeitungsseite weitergeleitet. Okay? Der Vorgang kann ein paar Sekunden dauern, also warte einfach In Ordnung, das ist also die Bearbeitungsseite, Leute. Jetzt werden wir dieses Tren D-Modell ein wenig umstrukturieren Das erste , was Sie tun müssen, ist also all diese Komponenten zu gruppieren Wie ihr sehen könnt, besteht dieses T D-Modell aus mehreren Komponenten wie Schuhen, Kopfhörern, Stuhl, Computer, Bein, Körper, Zylinder und Heizung. Wir werden also all diese Komponenten blockieren und einfach Strg+G drücken, wenn Sie Windows verwenden. Wenn Sie jedoch ein MacBook verwenden, drücken Sie einfach Command G. Okay. werden wir Als Nächstes werden wir dieses Drei-D-Modell anpassen. In den U-Bahn-Abschnitten gibt es also mehrere Komponenten wie Skins, Stifte und Schuhe Ich möchte zum Beispiel die Farbe der Schuhe ändern, also klicken Sie einfach auf Shouse und dann auf Dev, klicken Sie einfach auf Color Okay, also nehmen wir an, ich möchte die Farbe in Blau ändern Okay, es wird also so aussehen, Leute. Okay, Sie können es also jederzeit anpassen, wie Sie möchten. Sie können die Farbe ändern. Und wenn Sie fertig sind, können Sie auf Exportieren und dann einfach auf Integrated Ambit klicken Also werden wir diesen Code kopieren und einfügen, oder? Wenn Sie also dieses Drei-D-Modell in Ihre Webflow-Website integrieren möchten, benötigen Sie diesen Code, oder? Stellen Sie einfach sicher, dass Sie sich daran erinnern. Okay, Leute, ich glaube, das ist es. Das ist alles was du wissen musst. Wir sehen uns im nächsten Video. Tschüss. 3. Erkunden der Webflow-Funktionen: Heiliger Gast, willkommen zurück zum Kurs. In diesem Video werden wir alle Funktionen auf der Webflow-Bearbeitungsseite untersuchen alle Funktionen auf der Webflow-Bearbeitungsseite Sie werden also lernen, Inhalte hinzuzufügen, Bilder hochzuladen, Farbe zu ändern, Stil, Design und Verhalten zu ändern, oder? Du wirst also viel lernen. Stellen Sie also sicher, dass Sie diesem Video sehr genau Aufmerksamkeit schenken. Okay, das erste, was Sie tun müssen, ist sich anzumelden, also klicken Sie einfach auf Erste Schritte. Okay, Sie haben also die Möglichkeit, sich mit einem GML-Konto anzumelden Also werde ich auf Bei Google anmelden klicken, richtig? Also melde ich mich mit meinem GML-Konto an. Okay, los geht's Wie ihr jetzt sehen könnt, werden wir zum Dashboard weitergeleitet. Okay. Okay, das ist also euer Arbeitsplatz, Leute Wie ihr sehen könnt, habe ich hier ein Projekt. Das ist also eine Website, die ich wie letztes Jahr erstellt habe. Okay, um eine neue Website zu erstellen, können Sie auf Neue Website klicken und Sie werden auf diese Seite weitergeleitet. Und klicken Sie einfach auf Marketplace und Templates. Es gibt also viele Vorlagen , die ihr verwenden könnt. Es gibt viele Möglichkeiten, Leute. Einige von ihnen sind kostenlos, andere sind nicht kostenlos. Stellen Sie also sicher, dass Ihnen die kostenlose Vorlage gefällt, oder? Weil Sie kein Geld für diese Vorlage ausgeben möchten. In diesem Projekt werden wir also ein professionelles Portfolio aufbauen. Also werde ich einfach ein Portfolio wie dieses eingeben. Und nur Zertifikate. Es gibt viele Möglichkeiten, Leute. Also werde ich die kostenlose auswählen. Also tippe einfach so kostenlos und wir werden die kostenlose Vorlage finden, richtig? Okay, ich bin also an dieser Vorlage interessiert, also werde ich einfach auf die Vorlage klicken Wenn du dich hinsetzen willst, wie es aussieht, klicke einfach auf Vorschau im Browser, oder Diese Vorlage wird auf der anderen Registerkarte geöffnet. Okay, es sieht also sehr cool aus, oder? Schau dir das an. Okay, jetzt klicke ich auf „Kostenlos verwenden“. Okay, klicken Sie einfach auf Seite erstellen. Du kannst es benennen. Ich nenne es professionelles Portfolio wie dieses und klicke einfach auf Seite erstellen. Und du wirst zur Bearbeitungsseite weitergeleitet, oder? Der Vorgang kann ein paar Sekunden dauern , also warte einfach. Hoffentlich dauert es nicht zu lange. Okay, los geht's. Okay, also jetzt werden wir alle Fesseln ausloten , die bei dieser Diät bei Kindern zur Verfügung stehen, richtig Du musst nicht jeden einzelnen von ihnen wissen, weil es zu viele sind und du vielleicht überfordert Also werde ich dir nur Fesseln beibringen, die wir in den Projekten verwenden werden, richtig? Fesseln beibringen, die wir in den Projekten verwenden werden, richtig Also, stellen Sie sicher, dass Sie sehr genau aufpassen. Okay, also der erste ist der Navigator, richtig? Also, wie ihr hier sehen könnt, habt ihr Körper, ihr habt Navbar, ihr habt Slider Sie haben vier Abschnitte. Das sind der erste, zweite Abschnitt, dritte Abschnitt und die vier Abschnitte, richtig? Das wird es Ihnen also leichter machen , durch diese Website zu navigieren. Wenn Sie zum Beispiel die ersten Abschnitte bearbeiten möchten, klicken Sie einfach rechts auf die ersten Abschnitte und Sie werden auf diese Seite weitergeleitet. Okay, wenn Sie also auf die ersten Abschnitte klicken , gibt es Unterkomponenten Zum Beispiel Container. Wenn du auf Container klickst, sind das die Container Guys, und innerhalb des Containers haben wir Spalten. Wir haben zwei Spalten wie Spalte eins und Spalte zwei. In Spalte eins haben wir eine Überschrift, oder? Das ist also wie die Unterkomponente von Spalte eins. Und in der zweiten Spalte haben wir das Br-Diagramm und auch die Skillgruppe Okay, das ist also die Fähigkeitsgruppe, Leute. Wenn Sie also einen dieser Abschnitte bearbeiten möchten, können Sie Wiport auswählen , den Sie bearbeiten möchten In diesem Fall möchte ich zum Beispiel den Absatz bearbeiten, also klicken Sie einfach auf Absatz, oder? Und doppelklicken Sie einfach und Sie können den Text bearbeiten. Okay, jetzt klickst du auf Element. Es gibt also viele Elemente, Leute. Zum Beispiel Artikelschaltfläche, Typografie, welche Medien sonst noch? Das ist der wichtigste Teil, Guy. Wenn du ein Bild oder vielleicht ein Video oder vielleicht ein YouTube-Video hochladen möchtest, kannst du diesen Filter verwenden. Wenn du nicht scrollst, gibt es Formulare. Was sonst? Eingabe. Nächstes Feld, Checkbox, Aufnahme. Du kannst hier auch gerne Code einbetten. Okay, jetzt werde ich dir beibringen , ein Bild hochzuladen, oder? Gehen Sie also einfach zu den Medienbereichen, scrollen Sie ein wenig nach unten und klicken Sie einfach auf Bild. Okay, also genau hier kannst du auf Just Image klicken. Und Sie haben zwei Möglichkeiten. Sie können entweder Ihr eigenes Bild hochladen, oder? Klicken Sie also einfach auf dieses Symbol. Und in diesem Beispiel werde ich ein zufälliges Bild hochladen, Leute. Vielleicht dieses Bild, oder? Klicken Sie also einfach auf Öffnen. Oder die zweite Option ist, das Bild aus der Bibliothek zu verwenden, oder? Es liegt also ganz bei dir. Okay, wie ihr sehen könnt, haben wir das Bild erfolgreich hochgeladen. Okay, jetzt werden wir lernen, die Hintergrundfarben zu ändern. Wir werden lernen, den Telefontyp und auch den Stil zu ändern . Okay, fangen wir jetzt mit dem Telefontyp an. Wie ihr sehen könnt, ist der Telefontyp Roboto. Wenn Sie es ändern möchten, klicken Sie einfach darauf, und es gibt viele Optionen Ich möchte es zum Beispiel so ändern, dass es Auswirkungen hat. Klicken Sie also einfach auf Impact. Oder vielleicht möchtest du es auf Bitter ändern. Klicken Sie also einfach auf Bitter, oder? Okay, das ist also die Schriftart. Okay, nehmen wir an, Sie möchten auch die Schriftgröße ändern. Wie ihr sehen könnt, ist die Schriftgröße momentan 14. Nehmen wir an, ich möchte es ein bisschen größer machen, ich werde es auf 16 ändern, oder? Los geht's. Es sieht ein bisschen größer aus, oder? Okay, wenn Sie also die Schriftfarbe ändern möchten , klicken Sie einfach darauf. In diesem Beispiel werde ich die Schriftfarbe von Grau auf Dunkelblau ändern , also klicken Sie einfach auf Dunkelblau. Okay, los geht's. Wie ihr sehen könnt, haben wir jetzt erfolgreich die Telefonfarbe auf Dunkelblau geändert , oder? Okay, wenn Sie jetzt auch die Positionen des Textes ändern möchten, befindet sich der Text auf der linken Seite. Wenn Sie es in der Mitte platzieren möchten, schlagen Sie vor, darauf zu klicken. Wenn du es auf der rechten Seite machen willst, schlage vor, darauf zu klicken. Okay, also werde ich den Text einfach links platzieren, Leute. Und hier unten kannst du auch den Stil anpassen. Okay, also scrolle einfach ein bisschen nach unten. Jetzt werden wir die Hintergrundfarben ändern, oder? Okay, klicken Sie einfach darauf und Sie haben viele Möglichkeiten. Nehmen wir an, ich möchte die Farbe auf hellgrün ändern , oder? Schau dir das an. Sehr cool, oder? Oder vielleicht möchte ich es auf hellblau ändern. Also wird es so aussehen, Leute. Okay, also wenn Sie den Rahmen anpassen möchten, klicken Sie einfach auf Rahmen, und dann können Sie ihn anpassen. Mit können Sie auch die Farbe anpassen. Im Moment ist es schwarz. Fühlen Sie sich frei , es zu ändern, wenn Sie möchten. Okay, zu guter Letzt können Sie die Effekte anpassen. Im Moment ist der Effekt normal, aber Sie können mit diesen Effekten experimentieren. Zum Beispiel abgedunkelt, mehrfach eingefärbt, verbrannt, aufgehellt, einfarbig ausgebreitet . Ihr habt viele Möglichkeiten, Leute, oder? Ich werde einfach den normalen Effekt verwenden, oder? Sie können auch Übergänge hinzufügen. Wenn Sie also daran interessiert sind, die Website zu animieren, können Sie diese Übergänge verwenden. Mach dir keine Sorgen Ich werde das in den nächsten Videos erklären, oder? Okay, also wenn ihr diese Websites veröffentlichen wollt, Leute, klickt einfach auf Pablis, richtig Im Moment wurde die Website noch nicht veröffentlicht, aber wenn Sie sie veröffentlichen möchten, klicken Sie einfach auf Auf ausgewählter Domain veröffentlichen, Sie können auch eine benutzerdefinierte Domain hinzufügen , wenn Sie eine eigene Domain haben. Okay, so veröffentlichst du die Seite. Aber in diesem Fall werden wir diese Websites natürlich nicht veröffentlichen, richtig, weil wir noch nicht mit der Bearbeitung dieser Website fertig sind. Okay, ich denke, das war's, Leute. Das ist alles, was du wissen musst. Ich werde Gas im nächsten Video sehen, in dem wir mit dem eigentlichen Projekt beginnen werden , oder? Also werden wir professionelle Portfolio-Websites erstellen. Ich werde dort Benzin sehen. 4. Integration von 3D-Modellen in professionelle Portfolio-Website: Hallo Leute. Willkommen zurück zum Kurs. Im ersten Projekt werden wir eine professionelle Portfolio-Website erstellen , und ich möchte nicht bei Null anfangen, Leute weil es sehr zeitaufwändig sein wird, oder? Also werden wir einfach eine Vorlage auswählen und diese Vorlage klonen, richtig? Wie ihr sehen könnt, haben wir quasi viele verschiedene Vorlagen. Also werde ich einfach diese Vorlage auswählen, Leute. Der Schöpfer dieser Vorlage ist Zack Kendall. Sehr coole Vorlage, Leute. Nur weil ich diese Vorlage verwende, heißt das nicht unbedingt , dass Sie mir mit dieser Vorlage folgen müssen. Sie haben so viele Möglichkeiten, also zögern Sie nicht, jede Vorlage auszuwählen , die Sie möchten, oder? Okay, diese Vorlage zu klonen, ist sehr einfach. Alles was Sie tun müssen, ist in Webflow auf Klonen zu klicken. Aber bevor Sie das tun, ist es besser, wenn Sie diese Websites zuerst auf der anderen Registerkarte öffnen , um sicherzustellen, dass Ihnen diese Website wirklich gefällt, oder? Okay, also los geht's. Seht euch das an, Leute. Es ist sehr cool, oder? Es ist ein bisschen minimalistisch, aber ich mag den Stil wirklich, um ehrlich zu sein Okay, jetzt werden wir die Vorlage klonen. Klicken Sie also einfach in Webflow auf Klonen. Okay, los geht's. Also jetzt. Klicken Sie einfach auf Seite erstellen. Und mach dir keine Sorgen, Leute, das ist völlig kostenlos, und du musst dieser Website einen Namen geben. Ich werde nur ein professionelles Portfolio-Projekt eingeben , oder? Das wird also der Name sein. Also klicken Sie einfach auf Seite erstellen. Okay, warten Sie einfach der Vorgang kann ein paar Sekunden dauern. Hoffentlich dauert es nicht zu lange. Okay. Jetzt werden wir zur Webflow-Bearbeitungsseite weitergeleitet , oder? Das erste , was wir hier tun werden , ist , die drei D-Modelle, die wir mit Spline erstellt haben, in diese Website zu integrieren die drei D-Modelle, die wir mit Spline erstellt haben, in diese Website zu Und mach dir keine Sorgen. Der Vorgang ist sehr einfach. Okay, also werde ich auf Element hinzufügen klicken und einfach weiterscrollen. Okay, also klicken Sie in den Medienbereichen einfach auf Spline-Szenen, richtig? Also klicken Sie einfach darauf Wie ihr sehen könnt, haben wir gerade einen Spline sind erstellt. Okay, also lass uns jetzt zu deinem Spline-Konto gehen. Wenn Sie sich erinnern, haben wir dieses Baummodell erstellt, oder? Also klicken Sie einfach darauf Und jetzt werden wir den Code kopieren und einfügen, richtig? Wir werden den Code einbetten. Genau hier. Okay, also wartet einfach, Leute. Es wird immer noch bearbeitet. Okay, sehr cool. Jetzt klicken wir einfach auf Exportieren und kopieren und einfügen. Dieser Code. Okay, wir werden also auf Copy Embed klicken und ich werde den Code hier einfügen, richtig? Und ich werde diesen Teil kopieren und einfügen. Und gehen wir zurück zur Webflow-Bearbeitungsseite. Und genau hier in den URL-Abschnitten, seitere einfach den Code. Okay. Also, klicken Sie jetzt einfach auf Liefern und senden. Wie ihr sehen könnt, haben wir diese drei D-Modelle erfolgreich in die Website integriert. Okay, als Nächstes werden wir Klasse einen Namen geben, also klicken Sie einfach auf Neue Klasse. Der Name wird Spline sein. Das D-Modell. Du kannst es nennen, wie du willst. Es liegt ganz bei dir. Dann drücke ich einfach Enter, Leute. Okay, wir haben diese Klasse also erfolgreich erstellt. Das nächste, was wir tun werden, ist , das etwas größer zu machen. Wie ihr sehen könnt, ist dieses Drei-D-Modell zu klein. Also werde ich einfach die Höhen ändern. Ich werde 100 g eingeben, etwa so. Okay, als Nächstes werden wir das nach oben lenken. Okay. Und als Nächstes werden wir die Position ändern. Im Moment ist es also statisch, also werde ich es auf Sticky umstellen, oder? Wir haben dieses Modell erfolgreich in die Website integriert . Ich werde euch im nächsten Video sehen, in dem wir diese Website animieren werden , und wir werden weitere Änderungen vornehmen Wir werden diese Website schöner machen. Okay, also wir sehen uns dort. Tschüss. 5. Animieren von 3D-Modellen auf der Professional Portfolio-Website: Hallo Leute, willkommen zurück zum Kurs. In diesem Video werden wir diesem Drei-D-Modell Animationen hinzufügen. Aber bevor wir die Animationen hinzufügen, werden wir zuerst einige Änderungen vornehmen. Wie ihr sehen könnt, befindet sich dieses Drei-D-Modell zu nahe am oberen Rand. Also werden wir das Drei-D-Modell in die Mitte verlagern Okay? Also scrolle einfach ein bisschen nach unten. in diesen Positionsabschnitten Klicken Sie in diesen Positionsabschnitten einfach auf Auto und ich wähle 50. Oder vielleicht 100, oder? Wie ihr sehen könnt, ist dieses Drei-D-Modell jetzt in der Mitte, oder? Okay, das ist also besser. Und lass uns auf diesen Clay Button klicken. Es wird Ihnen eine Vorschau der Website geben. Okay, es wird also immer noch geladen. Wie ihr sehen könnt, wurde dieses Drei-D-Modell in diese Website integriert , und wenn ihr nach unten scrollt, bleibt dieses Drei-D-Modell im Hintergrund, oder? Das ist also sehr cool. Das einzige Problem, das wir haben, ist die Farbe des Textes. Es ist schwarz, aber der Hintergrund ist auch schwarz, sodass Sie diesen Text nicht wirklich lesen können, oder? Also werden wir das im nächsten Video beheben , Leute. Mach dir keine Sorgen. Okay, jetzt gehen wir zurück zur Bearbeitungsseite. Okay, jetzt werden wir diese drei D-Modelle animieren Klicken Sie also einfach auf Spline Three D-Modell und dann auf Interaktionen. Und bei Piterzation klicken Sie einfach darauf und klicken Sie Die meisten bewegen sich im Viewport. Okay, als Nächstes klicken Sie einfach auf „Aktionen auswählen“ und dann auf „Die meisten Animationen abspielen“, richtig Okay, klicken Sie einfach auf Animationen hinzufügen. Und jetzt müssen Sie die Animationen benennen. Du kannst es benennen, wie du willst. Es liegt ganz bei dir. In diesem Fall nenne ich es drei D-Model-Animationen. Okay, also drücke einfach die Eingabetaste und jetzt klicke ich darauf und klicke einfach auf Spline weil wir dieses Drei-D-Modell von Spline haben, richtig Okay, jetzt kannst du ein bisschen nach unten scrollen. Als Nächstes wählen wir das Objekt aus, das wir animieren möchten In diesem Fall möchten wir die Gruppe animieren , also klicken Sie einfach auf Gruppe Okay, also werde ich dieses Drei-D-Modell um die weiße Achse drehen, richtig Also werde ich das ein bisschen nach rechts lenken. Ich werde es auf 1,5 setzen. Okay, jetzt klicken Sie einfach auf die zweite Ebene. Und wir werden das Gleiche tun. Also für das Objekt klicken Sie einfach auf Gruppe. Und wir werden das Gegenteil tun, Leute. Also wollen wir diese drei Modelle in die entgegengesetzten Richtungen drehen , oder? Also werde ich das nach links lenken. Also werde ich den Wert auf minus 1,5 setzen. Okay, wir sind also fertig. Klicken Sie jetzt einfach auf Live-Vorschau, oder? Wie ihr also sehen könnt, wenn ich meine Maus nach rechts grabe, dann bewegen sich diese drei D-Modelle nach rechts. Und das Gleiche, wenn ich am meisten nach links lenke, bewegen sich diese Drei-D-Modelle nach links, oder? Schau dir das an. Sehr cool, oder? Okay, vergiss jetzt nicht, es zu speichern. Klicken Sie also einfach auf Speichern. Okay, wir haben diese Animationen erfolgreich gespeichert. Okay, als Nächstes klicken Sie einfach auf die Display-Schaltfläche und wir werden sehen, wie die Animation auf der Website aussieht, oder? Okay, sehr cool. Schau dir das an. Okay, wenn ihr also nach unten scrollen wollt, wird es so aussehen, Leute. Kostenlose coole Animationen, oder? In Ordnung, Leute, ich denke, das war's für dieses Video. Ich sehe euch im nächsten Video, in dem wir Inhalte zur Website hinzufügen werden Inhalte zur Website hinzufügen Wir werden Bilder auf die Website hochladen und sie schöner machen. Okay, also wir sehen uns dort. Tschüss. 6. Hinzufügen von Inhalten zur Professional Portfolio-Website: Heilige Leute. Willkommen zurück zum Kurs. In diesem Video werden wir Inhalte zu dieser Website hinzufügen und auch neue Bilder auf diese Website hochladen . Okay. Zuerst werden wir einige Änderungen vornehmen, also klicken Sie einfach auf NAP. Und ich werde die Farbe des Containers ändern, also klicken Sie einfach auf Container und scrollen Sie ein wenig durch sie. Also werde ich die Farbe von Weiß auf Hellblau ändern , oder? Okay, sehr cool. Wie ihr sehen könnt, haben wir die Farbe erfolgreich auf hellblau umgestellt. Okay, als Nächstes werde ich die Farbe dieser Box ändern , richtig? Also klicken Sie einfach auf die Schaltfläche. Und wie ihr sehen könnt, ist die Farbe im Moment lila, also werde ich sie auf Schwarz ändern. Also scrolle es einfach ein bisschen hinein und klicke darauf und ich wähle Schwarz, richtig? Also, wie ihr sehen könnt, ist die Farbe dieser Blöcke schwarz. Okay, jetzt gehen wir zurück. Und als Nächstes werden wir dieser Website Inhalte hinzufügen, richtig? Klicken Sie also einfach auf Intro. Klicken Sie einfach auf Continuer und Intro Parent, richtig? Klicken Sie also einfach auf Okay Wenn Sie diesen Text ändern möchten , doppelklicken Sie einfach darauf Okay, also in diesem Beispiel werde ich eintippen. Willkommen in meinem Portfolio, oder? Nun, es scheint, als ob das zu groß ist, also werde ich es kleiner machen. Also werde ich die Schriftgröße ändern, also scrolle einfach ein bisschen nach unten. Okay, das ist also kleiner. Okay, jetzt werden wir dieses Bild hier unten durch mein eigenes Bild ersetzen, richtig? Ordnung, jetzt klicken Sie einfach auf Intro Image und wir werden dieses Bild durch mein eigenes Bild ersetzen Also scrolle einfach ein bisschen nach unten. Und klicken Sie einfach auf Bild entfernen und klicken Sie auf Bild und dann auf Nur Bild. Okay, also werde ich dieses Bild verwenden. Ich habe dieses Bild mit KI-Mitarbeitern generiert, klicken Sie darauf und klicken Sie einfach auf Nur Bild. Und klicken Sie einfach auf Cover. Okay, jetzt gehen wir zurück Okay, es sieht sehr cool aus, oder? Okay, jetzt werden wir Inhalte zu dieser Website hinzufügen. Zunächst werden wir dieser Einführungssitzung Inhalte hinzufügen. Okay, also ich habe mein Dokument hier. Ich habe diesen Einführungsabsatz mit Chat GPT generiert. Okay, ich werde das einfach kopieren und einfügen. Okay, gehen wir zurück zur Bearbeitungsseite. Doppelklicken Sie einfach und ich werde das durch meine Einführungen ersetzen . Okay, sehr cool Okay, als Nächstes werden wir diese Abschnitte bearbeiten. Okay, also zuerst werde ich dieses Bild durch mein eigenes Bild ersetzen. Also klicken Sie einfach darauf und klicken Sie einfach auf Bild entfernen und dann auf Bild hinzufügen und klicken Sie einfach auf Bild auswählen. Und ich werde mein eigenes Bild hochladen, Leute. Okay, also werde ich dieses Bild auswählen. Also klicken Sie einfach auf Öffnen und ich habe dieses Bild mit KI Two Guys generiert. Okay, also wartet einfach, Leute. Jetzt wird das Bild immer noch hochgeladen. Der Vorgang kann einige Sekunden dauern. Hoffentlich dauert es nicht zu lange. Okay, also los geht's. Okay, jetzt klicke ich auf Cover. Okay, sehr cool. Schau dir das an, oder? Okay, jetzt werden wir den Inhalt bearbeiten. Okay, also in den Abschnitten werde ich meine Fähigkeiten und mein Fachwissen hervorheben, richtig? In diesem Beispiel habe ich also drei Hauptkompetenzen. Die erste ist Webdesign. Die zweite ist Webentwicklung und die dritte ist Datenwissenschaft. Okay, lassen Sie uns jetzt diesen Inhalt bearbeiten. Ich werde das einfach kopieren und einfügen, oder? Doppelklicken Sie einfach darauf, blockieren Sie es und kopieren Sie es und fügen Sie es ein. Okay, sehr cool. Als Nächstes bearbeiten wir die zweite Fähigkeit. Klicken Sie also einfach auf das zweite übergeordnete Projekt. Okay, also zuerst werde ich dieses Bild durch mein eigenes Bild ersetzen. Okay? Also werde ich einfach darauf doppelklicken. Und ich werde auf Bild entfernen klicken, und ich werde auf Bild klicken, auf Joe Image klicken, und jetzt werde ich das Bild hochladen. Okay, dieses Mal werde ich dieses coole Bild hochladen, ich habe das Bild mithilfe von KI generiert. Zu Ihrer Information: Das Tool, das ich verwende, war Leonardo AI. Es ist Mid Journey sehr ähnlich. Okay, vergiss also nicht , auf Cover zu klicken. Okay, lassen Sie uns jetzt den Inhalt bearbeiten. Okay, klicken Sie einfach auf Projekttext. Los geht's. Okay, also werde ich das kopieren und einfügen, richtig? Das ist meine zweite Fähigkeit, Webentwicklung. Also doppelklicken Sie einfach darauf und fügen Sie es hier ein, richtig? Okay, jetzt machen wir dasselbe mit der dritten Fähigkeit. Also klicken Sie einfach auf Project Parent und dann auf Project Child. Also werde ich dieses Bild durch mein eigenes Bild ersetzen, klicken Sie einfach darauf. In Ordnung. Und ich werde auf Bild entfernen klicken und einfach auf Adimage klicken Okay, jetzt klicken wir einfach auf Jose Image und ich werde mein eigenes Bild hochladen Okay, dieses Mal werde ich dieses Bild hochladen, indem ich einfach auf Öffnen klicke. Okay, jetzt wird das Bild hochgeladen, Leute. Also warte einfach Der Vorgang kann ein paar Sekunden dauern. Hoffentlich dauert es nicht zu lange, oder? Und vergiss nicht, auf Cover zu klicken. Okay, sehr cool. Okay, jetzt werden wir den Inhalt bearbeiten. Meine dritte Fähigkeit ist nicht die Fotografie. Es ist Datenwissenschaft. Geben Sie Data Science ein, richtig? Los geht's. Und jetzt werden wir das kopieren und einfügen und einfach dasselbe tun. Also blockiere das einfach und füge es ein. Okay, sehr cool. Okay, wir sind also fertig. Jetzt klicke ich auf Vorschau. Ordnung, Leute, das ist also unser Tre-Modell . Wenn du nach unten scrollst Wir haben die Einführungssitzung. Ich bin Chris Raharja, großer Profi mit Fachkenntnissen in Webdesign, Webentwicklung und Datenwissenschaft Neben meinen technischen Fähigkeiten stellen meine sozialen Fähigkeiten, einschließlich Liebe zum Detail, kreative Problemlösung und effektive Kommunikation, sicher, dass jedes Projekt Lassen Sie uns zusammenarbeiten , um Ideen in wirkungsvolle digitale Lösungen umzusetzen , Und hier stelle ich meine Fähigkeiten heraus. Der erste ist Webdesign. Die zweite ist Webentwicklung und die dritte ist Datenwissenschaft. Sehr cool, oder? Okay, jetzt gehen wir zurück zur Webflow-Bearbeitungsseite. Okay, Leute, zum Schluss werde ich die Positionen des Bildes korrigieren Ich werde es schöner machen, also klicken Sie einfach auf „Enthalten“, oder? Also wird es so aussehen. Okay, jetzt klicken wir auf die Display-Schaltfläche. Und wenn Sie dieses Bild sehen, sieht es viel besser als das vorherige, oder? Schau dir das an. Sehr cool. Akka, wir sind also mit dem ersten Projekt fertig Also frag im nächsten Video, wo wir das zweite Projekt starten werden Im nächsten Video werden wir also eine Produkt-Landingpage erstellen Also werde ich euch dort sehen. Tschüss. 7. Integration von 3D-Modell in Produktzielseiten: Heiliger Gastgeber, willkommen zurück zum Kurs. In diesem Video werden wir ein TD-Modell mit Spline erstellen TD-Modell mit Spline und das TD-Modell in die Webflow-Website integrieren das TD-Modell in die Webflow-Website Zu Ihrer Information: Im zweiten Projekt werden wir eine Produkt-Landingpage für Sneaker oder S erstellen . Okay, also klicken Sie zunächst einfach auf Bibliotheken Wählen Sie Objekte aus und klicken Sie auf Kleidung. Okay, also in diesem Fall suche ich nach einem Drei-D-Modell für. Ich werde dieses auswählen. Wenn Sie weitere drei D-Modelle auswählen möchten , können Sie das gerne tun. Okay, jetzt öffnet es dieses Drei-D-Modell auf der Editor-Seite. Also warte einfach, denn der Vorgang kann ein paar Sekunden dauern. Hoffentlich dauert es nicht zu lange. Ordnung, wie ihr sehen könnt, ist das TriT-Modell Ren Jetzt werden wir die Farbe anpassen. Okay, klicken Sie einfach auf dieses TRine-Modell und ich werde die Grundfarbe von Weiß auf Hellblau ändern , richtig Gehen Sie also einfach zu Google und geben Sie einfach den Farbcode für Hellblau Okay, also kopiere das einfach und füge es ein Okay, los geht's. Sehr cool. Jetzt werden wir den roten Teil in Schwarz ändern. Geben Sie also einfach die Fellfarbe für Schwarz ein. Ihr könnt es in jede Farbe ändern, Leute, es liegt also ganz bei euch, oder? Okay, also kopiere das einfach und füge es ein Okay, es sieht so aus. Sehr cool. Und jetzt werden wir als Nächstes diese drei D-Modelle exportieren. Klicken Sie also einfach auf Exportieren. Klicken Sie einfach auf FEWR, da wir diesen Einbettungscode benötigen Okay, also wartet einfach, Leute, jetzt wird es immer noch bearbeitet, und jetzt klickt einfach auf Copy Embed, richtig Und ich werde es wie bei Google Docs öffnen. Okay, wir sind also fertig. Als Nächstes werden wir die richtigen Vorlagen für die Produkt-Landingpage finden. Okay, gehen Sie einfach zum Webflow-Marktplatz und geben Sie einfach Schuhe oder Sneaker ein, richtig Sie werden viele Vorlagen finden, einige davon sind kostenlos, andere sind nicht kostenlos. Stellen Sie also sicher, dass Sie die kostenlose auswählen Okay, also werde ich diese Vorlage auswählen . Ich mag es, Leute. Und wenn Sie nach unten scrollen und einfach auf Copyright-Informationen klicken, stellen Sie sicher, dass diese Vorlage über eine Creative Common Public Domain-Lizenz verfügt, oder? Das bedeutet, dass diese Vorlage für persönliche und auch kommerzielle Arbeiten verwendet werden kann . Okay, also klicken Sie einfach. Ich hab's. Wenn Sie diese Vorlage also klonen möchten, klicken Sie einfach in Webflow auf Klonen Okay, also klickt einfach darauf, Leute. Okay, klicken Sie jetzt einfach auf Create Site und genau hier müssen Sie der Site einen Namen geben. Ich werde es Produkt-Landingpage nennen. Sie können es nennen, wie Sie wollen. Es liegt ganz bei euch. Okay, klicken Sie einfach auf Create Site. Jetzt werden wir zur Webflow-Bearbeitungsseite weitergeleitet, oder? Okay, als Nächstes werden wir das Drei-D-Modell in diese Website integrieren Okay, falls Sie sich erinnern, haben wir den Amplet-Code bereits zuvor aus Spline kopiert und eingefügt Also, wir werden den Sport kopieren Okay, also werden wir das Gleiche machen , was wir vor euch gemacht haben Also klicken Sie einfach auf dieses Symbol und scrollen Sie es ein bisschen. Und in den Medienbereichen werden wir auf Spline-Szene klicken, oder? Und wir müssen den Code kopieren und einfügen. Okay, klicken Sie einfach auf Reload, Spline-Szene. Okay, wie ihr sehen könnt, haben wir das Drei-D-Modell erfolgreich in die Website integriert Also werde ich das jetzt bis zum Rand graben. Ich werde das unter die NafBar stellen. Wenn Sie also nach oben scrollen, sehen Sie oben das Drei-D-Modell Als Nächstes werden wir dieses Drei-D-Modell ein wenig modifizieren. Scrollen Sie also nach unten. Und wie ihr jetzt sehen könnt, ist die Position statisch, also werden wir sie auf „Sticky“ ändern, oder? Das ist genau das Gleiche wie das, was wir zuvor gemacht haben. Und klicken Sie einfach auf Auto und ich wähle 5.100 aus. Okay, los geht's Okay, wir sind fertig, Leute. Wir haben dieses Drei-D-Modell erfolgreich in die Website integriert . Ich werde Gus im nächsten Video sehen, dem wir dieses Drei-D-Modell animieren Ich werde euch dort sehen. Tschüss. 8. Animieren von 3D-Modell auf der Produkt-Landingpage: Heilige Leute. Willkommen zurück zum Kurs. In diesem Video werden wir diese drei D-Modelle animieren Okay, also lass uns jetzt anfangen. Klicken Sie zunächst einfach auf Spline-Szene. Klicken Sie dann auf Interaktionen. in den Bittreer-Abschnitten einfach darauf und klicken Sie dann auf Im Viewport mit der Maus bewegen Okay, klicken Sie einfach auf „Aktionen auswählen“ und dann auf „Mausanimationen abspielen“ Als Nächstes klicken Sie einfach auf Animationen. Okay, genau hier müssen Sie den Animationen einen Namen geben. Du kannst es nennen, wie du willst. Es liegt ganz bei dir. In diesem Fall nenne ich es House Animations. Und drücken Sie einfach die Eingabetaste. Okay, als Nächstes klicken Sie einfach darauf. Und wir werden Spline wählen, weil wir diese drei Modelle von Spline bekommen haben Also klicken Sie einfach darauf. Okay, als Nächstes werden wir angeben, welches Objekt wir animieren möchten Also klicken Sie einfach auf „Auswählen“ und ich wähle den laufenden Farbton aus. Okay, hier unten haben Sie also viele Optionen Sie können dieses Modell mit drei D auf der X-Achse drehen. Sie können dieses Modell mit drei D auf der Y-Achse drehen. Sie können diese drei D-Modelle auch auf der Z-Achse drehen. Es liegt also ganz bei euch. Okay, also in diesem Fall werde ich dieses S um die Y-Achse drehen, richtig? Also werde ich das nach rechts lenken. Ich werde es auf drei setzen. Und lass uns zur zweiten Schicht gehen. Wir machen das Gleiche, also wählst du einfach das Objekt aus , das du animieren möchtest In diesem Fall werden es also fließende Farben sein und die Drehrichtungen werden umgekehrt sein, richtig? Also richte ich das nach links und setze es auf minus drei Okay, klicken Sie jetzt einfach auf Live-Vorschau. Also wird es so aussehen, Leute. Sehr cool, oder? Vergiss nicht es zu speichern, klicke einfach auf Speichern. Okay, jetzt werden wir diese Animationen testen. Okay, jetzt klicken wir auf Display-Buttons. Wie ihr sehen könnt, wurde das Ganze durch das Modell animiert, oder? Seht euch das an. Schau dir die Rotationen an. Sehr cool, oder? Okay, lass uns sie jetzt ein bisschen durchblättern. Okay, im nächsten Video werden wir dieser Website mehr Inhalte hinzufügen und diese Bilder auch durch unsere eigenen Bilder ersetzen, richtig? Und in diesem Projekt erstellen wir eine Landingpage. Wie ihr wisst, ist die Landing Page sehr einfach. Sie zeigen Ihr Produkt und auch die Produktbeschreibungen an, und das war's. Wir werden also unnötige Teile von dieser Website entfernen , oder? Das werden wir also im nächsten Video tun. Okay, Leute, ich glaube, das ist es. Das ist alles was du wissen musst. Wir sehen uns im nächsten Video. Tschüss. 9. Hinzufügen von Inhalten zur Produkt-Landingpage: Heiliges Gas, willkommen zurück zum Kurs. In diesem Video werden wir Inhalte zur Produktseite hinzufügen und die Produktbilder durch unsere eigenen Bilder ersetzen . Okay, lass uns jetzt anfangen. Das erste, was wir hier tun werden, ist , den Namen des Produkts durch unseren eigenen Produktnamen zu ersetzen. Okay, in diesem Fall heißt mein Produkt Comfy Sneaker Also ersetze es einfach durch Comfy Sneakers. Okay, los geht's. Und ich werde das entfernen. Ordnung, Leute. Als Nächstes werden wir also das Produktbild durch unser eigenes Bild ersetzen Klicken Sie also einfach auf Hero Sections und dann auf Hero Photos, oder? Okay, scrolle es einfach ein bisschen und klicke auf Bild entfernen und dann Bild hinzufügen und dann auf OS Image. Okay, also werde ich das Produktbild durch mein eigenes Bild ersetzen. Zu Ihrer Information: Ich habe dieses Bild mit Hilfe von KI Guys generiert. Okay, also werde ich Cover oder vielleicht Inhalt auswählen , richtig? Also klicken Sie einfach auf „Enthalten“. Okay, als Nächstes werden wir den Lichteffekt dieser Drei-D-Modelle ändern. Klicken Sie also einfach auf Spline-Szene und scrollen Sie ganz nach unten Und was das Mischen angeht, werden wir es von Normal auf Color BOM umstellen, Okay, jetzt werden wir als Nächstes den Inhalt bearbeiten Um es einfacher zu machen, werden wir zuerst das Drei-D-Modell verstecken. Okay, also klicken Sie einfach auf Spline Send und scrollen Sie nach oben und wir werden auf Alle Einstellungen anzeigen klicken und dann einfach auf Versteckt klicken, oder? Okay, macht euch keine Sorgen, Leute. Am Ende werden wir es wieder sichtbar machen, aber jetzt werden wir den Inhalt bearbeiten, also verstecken Sie ihn einfach zuerst, oder? Okay, jetzt klickst du einfach auf Heldenbereiche und Heldeninhalte. Klicken Sie einfach auf die oberste Überschrift drei. Okay, also du kannst das ändern. Ich werde nichts ändern, Leute, aber ich werde den Namen des Produkts ändern, oder? Denn in diesem Fall lautet der Name meiner Marke Comfy Sneakers, nicht Nike oder Jordan, oder? Doppelklicken Sie also einfach darauf und ich werde es in Comfy Snikers ändern Okay, Sie können also gerne die Telefonfarbe ändern. Sie können die Telefongröße jederzeit ändern . Es liegt ganz bei dir. Okay, also hier unten werden wir die Produktbeschreibungen schreiben. Also habe ich mit JA JPT Produktbeschreibungen generiert. Sie können also dasselbe tun, also werde ich das einfach kopieren und einfügen und hier einfügen, oder? Okay, los geht's. Und hier unten haben wir Buttons für die C-Sammlung. Wenn Sie also den Text ändern möchten, klicken Sie einfach auf die Schaltfläche und doppelklicken Sie einfach. Und ihr könnt diesen Text ändern, aber ich werde nichts ändern, Leute. Ordnung, wir sind mit diesen Abschnitten fertig und fahren jetzt mit den nächsten Abschnitten Okay, jetzt klicken wir auf „ Über Abschnitte“. Klicken Sie einfach auf Über uns. Titel des Abschnitts. Okay, also werde ich diesen Text ändern. Also offensichtlich verkaufen wir in diesem Fall Eri Jordan nicht. Wir verkaufen Kaffeeturnschuhe, oder? Also ersetze das einfach durch Kaffee-Sneaker-Kollektionen. Okay, du kannst diesen Text also auch ändern. Ich tippe hier einfach zufälliges Zeug ein, Leute. Cup in Sneakers hat es sich zur Aufgabe gemacht, hochwertige und wandelbare Sneaker herzustellen. Okay. Vielleicht kannst du deinen Produktslogan oder so etwas hinzufügen. Okay, wir sind also mit den Abschnitten fertig. Gehen wir nun zu den nächsten Abschnitten über. Klicken Sie also einfach auf horizontale Abschnitte, klicken Sie auf Rahmen. Wie ihr sehen könnt, gibt es viele Artikel. Jeder Artikel steht also für das Produkt, das sie verkaufen. In diesem Fall werden wir also nur etwa zwei Produkte auf dieser Landing Page auflisten, also werden wir die meisten dieser Artikel löschen, oder? Also lösche das einfach. Ich werde es eins nach dem anderen löschen, Leute. Also werden wir einfach etwa zwei Gegenstände zurücklassen, oder? Okay, klicken Sie einfach darauf und als Erstes ersetzen wir das Bild durch unser Produktbild. Okay, gut. Also lösche einfach Hover Div Image six und Image Eight Okay, als Nächstes klicken Sie einfach auf das Element und scrollen Sie einfach ein bisschen Wir klicken rechts auf Bild und stellen sicher, dass Sie das Bild über dem Inhaltsbereich platzieren . Okay, also genau hier. Und doppelklicken Sie einfach auf das Bild und klicken Sie einfach auf das Bild, und ich werde dieses Produktbild verwenden, richtig? Zu deiner Information. Ich habe dieses Produktbild mit KI generiert. Okay, wenn Sie also die Größe dieses Bildes ändern möchten, können Sie die Größe hier eingeben. Okay, wir sind damit fertig. Jetzt werden wir das zweite Produktbild durch unser eigenes Produktbild ersetzen das zweite Produktbild , richtig? Also werden wir dasselbe tun. Also klicken Sie einfach auf das zweite Element und wir werden das Hover-DIF löschen Wir werden Bild neun und Bild sechs löschen. Okay, also macht einfach dasselbe, Leute. Klicken Sie einfach auf Elemente und scrollen Sie sie ein wenig, und wir klicken auf das Bild, richtig Und stellen Sie sicher, dass Sie das Bild über dem Inhaltsbereich platzieren . Also zieh das einfach nach oben. Okay, los geht's. Und doppelklicken Sie einfach auf das Bild und klicken Sie einfach auf das Bild. Und jetzt lade ich mein Produktbild hoch. Also klicken Sie einfach darauf und ich werde dieses Bild hochladen, richtig? Sehr schöne Sneaker. Okay, jetzt wird das Sneaker-Bild hochgeladen . Also wartet einfach, Leute. Hoffentlich dauert es nicht zu lange. Okay, los geht's. Du bist fast fertig. Okay, sehr cool. Sie können auch die Größe des Bildes ändern, wenn Sie möchten Sie können die Größe hier eingeben. Es liegt ganz bei euch. Okay, als Nächstes werde ich den Inhalt bearbeiten. Ich werde den Namen des Produkts ändern. In diesem Fall ist es also nicht Eric Jordan W. Also werde ich einfach einen zufälligen Namen eingeben , Leute. Lego-Sneaker, richtig? Weil das Muster wie Ego aussieht. Und der Preis wird in US-Dollar sein. Dieser Snicker wird also für 120$ verkauft, oder? Okay, also ich werde das auch ändern. Also der Name des Produkts ist Puzzle Sneaker, ein zufälliger Name, Leute Und der Preis wird auch in US-Dollar angegeben. Der Preis für diesen Puzzle-Sneaker beträgt also 85,99$. Okay, jetzt werde ich die Farbe dieses Hintergrunds ändern, also scrolle einfach ein bisschen nach unten Ich werde darauf klicken und es von dunkelblau auf hellblau ändern , richtig? Los geht's. Okay, sehr cool. Okay, wir sind also fertig mit diesem Sport. Sache, die wir tun werden, ist, die klebrigen Pern - und Videoabschnitte zu entfernen die klebrigen Pern - und Videoabschnitte weil wir sie nicht brauchen, oder? Weil wir einfach eine Landingpage erstellen und ich möchte, dass es einfach ist. Also werde ich das einfach löschen und auch die Videoabschnitte löschen, okay? Okay, also vergesst nicht, Leute. Bisher haben wir das T-D-Modell ausgeblendet, jetzt machen wir es wieder sichtbar. Klicken Sie also einfach auf Spline-Szene. Und klicken Sie einfach auf das Einstellungssymbol und dann auf Alle Einstellungen anzeigen Wie ihr gerade sehen könnt, ist das T D-Modell versteckt, also klicken wir jetzt auf sichtbar, oder? Wir werden es wieder sichtbar machen. Okay, jetzt sind wir fertig, klicken Sie einfach auf diese Play-Schaltfläche, damit wir sehen, wie die Website aussieht. Also klicken Sie einfach darauf. Und lass uns ganz nach oben scrollen. Okay, wie ihr sehen könnt, ist das TD-Modell. Es wurde vollständig animiert. Und wenn Sie ein bisschen weiterblättern, ist dies unser Produktbild und auch die Produktbeschreibungen. Cf Sneakers stellt einen sportlichen und stylischen Sneaker , der mit seinem schlanken Design, der lebendigen Farbpalette und der fortschrittlichen Komforttechnologie Leistung und Mode nahtlos miteinander verbindet mit seinem schlanken Design, der lebendigen Farbpalette und der fortschrittlichen Komforttechnologie Leistung und lebendigen Farbpalette Diese Sneaker sind Ihr perfekter Begleiter sowohl für aktive Aktivitäten als auch für trendige Und hier unten haben wir die Abschnitte „Über uns“. Wie ihr sehen könnt, ist das der Slogan meiner Marke. CofiSnker hat es sich zur Aufgabe gemacht, hochwertige und konvertierbare Sneaker herzustellen , sehr cool sind und Wir haben den Produktkatalog, also das sind zwei Produkte, für die ich Logo-Sneaker und Puzzle-Sneaker verkaufe Der Preis beträgt 120,80$ 5,99$ . Okay, Leute Also haben wir diese Landing Page erfolgreich mit Webflow gekauft . Sehr cool, oder? Okay, ich denke, das war's, Leute. Ich sehe euch in der nächsten. 10. Integration und Animation von Pizza 3D-Modell: Heiliges Gas, willkommen zurück zum Kurs. In diesem Video werden wir das dritte Projekt starten. Im dritten Projekt werden wir also eine Website für ein Restaurant erstellen. Also werden wir dasselbe tun, Gas. Wir werden uns das Modell TD von Spline holen. Dann werden wir das TD-Modell in die Website integrieren das TD-Modell in die Website und das TD-Modell animieren Okay, also lass uns jetzt anfangen. Also, in diesem Fall ist das Essen, das ich verkaufen werde , Pizza, richtig? Also hol dir zuerst das T D-Modell für Pizza. Klicken Sie einfach auf Bibliothek und wählen Sie Objekte aus, und ich gebe Pizza ein. Okay, los geht's. Wie ihr sehen könnt, haben wir drei Möglichkeiten. Also werde ich diesen auswählen. Pizza Pizza, klicken Sie einfach darauf und Sie werden zur Spline-Bearbeitungsseite weitergeleitet Okay, wir werden also einige Änderungen vornehmen dann über das Modell exportieren, richtig? über das Modell exportieren, richtig Wir werden den Einbettungscode bekommen. Okay, also wartet einfach, Leute, der Vorgang könnte ein paar Sekunden dauern. Okay, los geht's. Also das ist unsere Pizza. Also werde ich all diese blockieren. Und wenn Sie Windows verwenden, können Sie Strg G drücken . Aber wenn Sie Macbook Clock Me verwenden, können Sie Command G drücken, oder? Okay, jetzt haben wir alle Komponenten gruppiert. Als Nächstes werden wir die Farbe ein wenig modifizieren, okay? Also, wie ihr sehen könnt, ist die Hauptfarbe Gelb. Vielleicht gibt es viel Käse. Ich bin nicht wirklich hier, Leute. Okay, wenn Sie also die Farbe ändern möchten , ist das sehr einfach. Klicken Sie einfach auf die Pizza und klicken Sie einfach darauf. Klicken Sie einfach auf Farbe und Sie können die Farbe ändern. Schau dir das an. Okay, also ich werde es hellgelb machen, weil ich will, dass der Käse irgendwie geschmolzen aussieht, oder? Es sieht aus wie Marella-Käse, schätze ich. Okay, als Nächstes ändern wir die Hintergrundfarbe von dunkelgrau auf transparent, richtig Klicken Sie also einfach auf die Farbe Bkgroen und richten Sie diese einfach nach links Okay, wie ihr sehen könnt, ist der Hintergrund jetzt Okay, als Nächstes klicken Sie einfach auf Exportieren und dann auf Play-Einstellungen, und wir werden den Hintergrund ausblenden. Klicken Sie also einfach auf Ausblenden und dann auf Öffentliche URL aktualisieren, richtig? Okay, jetzt klicken wir auf Übersicht und holen uns den Einbettungscode. Okay, also los geht's. Klicken Sie also einfach auf FEWR , denn wir werden diesen Code verwenden, um das Drei-D-Modell in die Webflow-Website zu integrieren , oder Klicken Sie also einfach auf Copy Embit. Okay, jetzt sind wir fertig. Öffnen Sie einfach Google Docs. Fügen Sie einfach den Code hier ein. Okay, also als Nächstes werden wir die nassen vollen Vorlagen finden. Okay, wie ihr sehen könnt, gibt es viele kostenlose Vorlagen für ein Restaurant oder Café. Also werde ich diese Vorlage auswählen. Leute, fühlt euch frei, jede Vorlage auszuwählen, die ihr wollt. Beachten Sie nur, dass es einige Vorlagen gibt, die kostenlos sind. Es gibt andere , die nicht kostenlos sind. Wenn Sie also kein Geld ausgeben möchten, einfach sicher, dass Sie die kostenlose Vorlage auswählen, oder? Okay, also werden wir diese Vorlage verwenden. Wenn ihr nach unten scrollt und einfach auf Copyright-Informationen klickt, wie ihr hier nachlesen könnt , können wir sie frei für persönliche oder kommerzielle Zwecke verwenden . Okay, also klicken Sie einfach auf Verstanden. Okay, jetzt klonen wir diese Vorlage. Klicken Sie also einfach in Webflow auf Klonen. Dann werden wir auf diese Seite weitergeleitet. Als Nächstes klicken wir auf RID-Site und müssen der Site einen Namen geben. In diesem Fall nenne ich sie also Bits-Website, oder? Weil das das Essen ist , das ich verkaufen werde. Okay, klicken Sie einfach auf RED Site. Dann werden wir zur Webflow-Bearbeitungsseite weitergeleitet. Okay, was wir als Nächstes tun werden, ist die Integration der drei Modelle, richtig Der Prozess wird genau derselbe sein wie der , den wir zuvor gemacht haben. Also werden wir diesen Einbettungscode bekommen. Also werde ich das einfach kopieren und einfügen, richtig? Das ist der einzige Teil, den wir brauchen, also kopiere ihn einfach. Okay, gehen wir zur Webflow-Bearbeitungsseite und wir werden eine Spline-Szene erstellen, richtig und wir werden eine Spline-Szene erstellen, richtig? Also los geht's Okay, klicken Sie jetzt einfach auf Element hinzufügen und scrollen Sie einfach ein bisschen nach unten. Und in den Medienbereichen klicken Sie einfach auf Spline-Szene. Los geht's Okay, jetzt werden wir den Einbettungscode kopieren und einfügen und einfach auf Spline-Szene neu laden klicken Okay, wir sind also fertig. Wie ihr sehen könnt, haben wir dieses Drei-D-Modell erfolgreich in die Website integriert. Okay, was wir als Nächstes tun werden, ist, das nach oben zu lenken, oder? Okay, los geht's. Sehr cool. Okay, also als Nächstes. Wir werden dieses Drei-D-Modell modifizieren, also scrolle einfach ein bisschen nach unten. Okay, also in den Positionsabschnitten werden wir es von statisch auf klebrig ändern, richtig? Und klicken Sie einfach auf Auto. Ich wähle 50 und 60. Okay, los geht's. Jetzt werden wir dieses Drei-D-Modell animieren. Okay, klicken Sie einfach auf diese Spline-Szene und dann auf Interaktionen Und wir werden darauf klicken und einfach im Viewport auf Mouse Move klicken, richtig Und klicken Sie einfach auf Aktionen auswählen dann auf Mausanimationen abspielen Okay, jetzt klicken Sie einfach auf Animationen hinzufügen. Und Sie müssen die Animationen in diesem Fall benennen. Ich werde es einfach Pizza Animations nennen, oder? Du kannst es nennen, wie du willst. Es liegt ganz bei dir. Und drücken Sie einfach die Eingabetaste, und ich werde darauf klicken und Spline auswählen, weil wir dieses Trini-Modell von Spline haben Okay, also scrolle jetzt einfach nach unten. Okay, wir müssen also das Objekt auswählen, das wir animieren möchten In diesem Fall wollen wir also dieses Pizzabaum-Modell animieren, oder? Also klicken Sie einfach auf Slec und ich wähle die Gruppe aus, richtig? Okay, es gibt also viele Möglichkeiten, Leute. Sie können diese Pizza um die X-Achse drehen. Sie können sie auf der Y-Achse drehen. Sie können es auch um die Z-Achse drehen. Es liegt also ganz bei euch. In diesem Fall werde ich die Pizza um die Y-Achse drehen , richtig? Also wird es so sein. Ich werde das nach rechts lenken. Ich setze es auf fünf und lass uns auf die zweite Ebene klicken. Wir werden die gleichen Leute machen. Wählen Sie also einfach das Objekt aus , das wir animieren möchten. In diesem Fall wird das also eine Gruppe sein. Und was die Richtungen der Rotationen angeht, wird es das Gegenteil sein, oder? Also werde ich das nach links lenken . Und es wird minus fünf sein, oder? Okay, cool. Also jetzt einfach klicken. Live-Vorschau. Also wird es so aussehen, Leute. Sehr cool, oder? So kannst du die Pizza umdrehen. Sehr cool. Schau dir das an. Okay, also werde ich auf Speichern klicken. Jetzt werden wir diese Animationen testen, oder? Klicken Sie also einfach auf Schaltflächen anzeigen. Okay, wie ihr sehen könnt, funktionieren diese Animationen. Sehr cool. Okay, Leute, ich glaube, das ist es. Das ist alles was du wissen musst. Wie im nächsten Video, in dem wir Inhalte zu dieser Website hinzufügen werden , und wir werden auch unsere eigenen Bilder auf diese Website hochladen, oder? Okay, also Asi ist da. Tschüss. 11. Hinzufügen von Inhalten zur Restaurant-Website: Heilige Leute. Willkommen zurück zum Kurs. In diesem Video werden wir Inhalte zu dieser Restaurant-Website hinzufügen und die Bilder auch durch unsere eigenen Bilder ersetzen. Okay, jetzt lass uns anfangen. Als erstes werden wir die Farbe der Snap Bar ändern. Also klickt einfach zweimal auf Nath Bar, und wie ihr sehen könnt, ist die Farbe blau, also werden wir sie in gelb ändern , Jungs Okay, klicken Sie einfach darauf und ich werde die Farbe auf Dunkelgelb ändern Okay, jetzt werden wir den Inhalt dieser Website bearbeiten. Um es einfacher zu machen, werden wir das im Modell verstecken . Okay, klicken Sie einfach auf Spline-Szenen und dann auf die Einstellungssymbole und dann auf Alle Einstellungen anzeigen Okay, also vorerst werden wir es verstecken. Also klicken Sie einfach auf Hiddent und am Ende werden wir es wieder sichtbar machen, oder Okay, also lasst uns jetzt anfangen, Leute. Okay, also ich doppelklicke auf diesen Teil und ersetze ihn durch meinen Restaurantslogan, richtig? Es wird also eine Pizza im Raum sein. Für jeden. Okay, das wird mein Slogan sein, oder? Und ich werde dieses Bild entfernen. Okay, ich mache es einfach wie in Großbuchstaben, Leute. Okay, also los geht's Okay, wir sind also mit diesen Abschnitten fertig. Lasst uns jetzt zu den nächsten Abschnitten übergehen, Leute. Jetzt werden wir dieses Bild durch unser eigenes Bild ersetzen , oder? Okay, also werde ich diesen Text entfernen, weil ich glaube, dass wir ihn nicht brauchen. Also werde ich es einfach entfernen. Ich. Okay, also was wir als Nächstes tun werden , ist dieses Bild durch unser eigenes Bild zu ersetzen, richtig? Also klicken Sie einfach darauf. Und wir werden auf Bild ersetzen klicken. Und jetzt lade ich mein eigenes Bild hoch, oder? Also klicken Sie einfach darauf und ich öffne meinen Projektordner. Klicken Sie also einfach auf die Pizza-Website. Zu Ihrer Information, ich habe diese Bilder mit Hilfe von KI generiert. Also klicken Sie einfach auf Öffnen, oder? Jetzt lädt es das Bild hoch. Wartet einfach, Leute. Der Vorgang könnte ein paar Sekunden dauern. Hoffentlich dauert es nicht zu lange. Okay, los geht's. Okay, sehr cool. Schau dir das an. Sag euch Pizza, Leute. Okay, lass uns jetzt mit den nächsten Abschnitten weitermachen. Okay, also genau hier werde ich den Text ein wenig modifizieren. Ich werde es für alle auf DLC Spizzo ändern. Okay, lass uns zu diesen Abschnitten gehen. Und Sie können diese Steuer jederzeit ändern, wenn Sie möchten, aber in diesem Fall werde ich sie einfach so lassen, wie sie ist. Okay, lassen Sie uns jetzt zu den nächsten Abschnitten übergehen. Nun, ich glaube nicht, dass wir diese Abschnitte wirklich brauchen, also werde ich diese Abschnitte einfach entfernen, Leute. Also werde ich einfach auf Löschen klicken. Und lass uns zu den nächsten Abschnitten gehen. Okay, jetzt werden wir die Pizza-Bilder hochladen, richtig? Okay, also ich werde diesen Teil einfach Gus vorlesen , weil ich nicht denke, dass das nötig ist. Das Gleiche gilt für diesen Teil. Ich werde dieses Board auch entfernen. Okay, jetzt werden wir diese Abschnitte ein wenig modifizieren. Okay, Leute, also klickt einfach darauf. Klicken Sie einfach auf Petting Global und klicken Sie hier auf das Favoritenmenü Okay, und klicken Sie einfach auf dieses Bild, richtig? Und klicken Sie einfach auf dieses Einstellungssymbol. Und deaktiviere einfach dieses Kästchen, Leute. Okay, jetzt klicken wir auf Jo's Image. Ich werde mein eigenes Bild hochladen. Das erste Menü ist also eine Pizza mit Spinat-Toppings. Okay, also klicken Sie einfach auf Öffnen. Jetzt wird das Bild hochgeladen. Also wartet einfach, Leute. Der Vorgang könnte ein paar Sekunden dauern. Hoffentlich dauert es nicht zu lange, oder? Also werden wir hier etwa vier Menüs anzeigen. Okay, sehr cool. Schau dir das an. Okay, jetzt werden wir dasselbe mit dem zweiten machen . Also deaktiviere einfach dieses Kästchen und klicke einfach auf J Image, und ich werde das zweite Menü hochladen Also wird es die Pizza sein. Käsepizza mit Meeresfrüchte-Topping. Okay, klicken Sie einfach auf Öffnen. Jetzt laden wir das Bild hoch. Wartet einfach, Leute. Okay, das zweite Bild wurde erfolgreich hochgeladen. Jetzt werden wir dasselbe mit dem dritten Bild machen. Klicken Sie einfach darauf und klicken Sie einfach auf das Einstellungssymbol Deaktivieren Sie einfach dieses Kästchen und klicken Sie einfach auf „Nur Bild Jetzt werden wir das dritte Bild hochladen. Das dritte Menü ist also Pizza Guys, eine Käsepizza mit Tomatenbelag Also klicken Sie einfach auf Upend. Okay, jetzt laden wir dieses Bild hoch Also wartet einfach, Leute. Der Vorgang könnte ein paar Sekunden dauern. Hoffentlich dauert es nicht zu lange. Okay, los geht's. Das dritte Bild wurde erfolgreich hochgeladen, und zuletzt werden wir dasselbe mit dem vierten Bild machen. Also klicken Sie einfach auf dieses Bild, klicken Sie auf dieses Einstellungssymbol und deaktivieren Sie einfach dieses Kästchen und klicken Sie einfach auf dieses Bild, und wir werden das Bild hochladen Das vierte Menü ist also Käsepizza mit Peperoni-Topping Es sieht also sehr lecker aus, oder? Also klickt einfach auf Öffnen, Leute. Okay, jetzt laden wir das Bild hoch. Wartet einfach, Leute. Der Vorgang könnte ein paar Sekunden dauern. Hoffentlich dauert es nicht zu lange. Okay, los geht's. Wie ihr sehen könnt, haben wir diese Bilder erfolgreich hochgeladen. Okay, als Nächstes werden wir diese Lehrbücher modifizieren, richtig Also doppelklicken Sie einfach darauf und wir werden den Namen in Spina Pizza ändern, richtig Und ich werde auch den Preis ändern, also entferne einfach dieses Kästchen Okay, der Preis wird also 15$ betragen, oder? Und du kannst auch die Beschreibungen für die Spinatpizza hinzufügen die Beschreibungen für die Spinatpizza Also entferne einfach das Häkchen und doppelklicke einfach auf diese Lehrbücher Also werde ich einfach etwas Zufälliges eintippen , Diese Spinatpizza besteht aus Käse und Spinat. Okay, wir werden das Gleiche mit dem zweiten Menü machen , oder? Also klicken Sie einfach darauf. Klicken Sie einfach auf diese Einstellungssymbole, Sie dieses Kästchen und doppelklicken Sie einfach auf das Textfeld Okay, wie ihr sehen könnt, ist das eine Pizza mit Meeresfrüchten, also gebt einfach Pizza mit Meeresfrüchten ein. So wie das hier. Ich werde auch den Preis ändern, also entferne das Häkchen. Und der Preis wird in US-Dollar angegeben. Die Pizza mit Meeresfrüchten kostet also 15$ oder vielleicht 20$, richtig, weil Meeresfrüchte ein bisschen teurer sind, schätze ich Okay, jetzt werden wir die Lebensmittelbeschreibung ändern. Doppelklicken Sie also einfach darauf und deaktivieren Sie dieses Kästchen Lassen Sie uns den Text bearbeiten Also gebe ich einfach zufällig zehn Typen ein, die Pizza mit Meeresfrüchten besteht aus Käse, Butter und Meeresfrüchten Okay, jetzt werden wir das dritte Menü modifizieren. Klicken Sie also einfach auf die Einstellungssymbole und aktivieren Sie dieses Kästchen. Doppelklicken Sie auf dieses Textfeld. Und wie ihr sehen könnt, ist das Tomatenpizza. Okay, jetzt werden wir den Preis ändern, auf die Einstellungssymbole klicken und dieses Kästchen deaktivieren Und der Preis wird in US-Dollar angegeben. Tomatenpizza wird ein bisschen billiger sein, also werde ich sie für 8$ verkaufen, oder? Okay, jetzt werden wir die Lebensmittelbeschreibungen ändern Also deaktiviere einfach dieses Kästchen und doppelklicke auf die Lehrbücher Also werde ich einfach eine zufällige Anzeige eingeben . Diese Pizza besteht aus Knoblauch und Tomaten. Okay, jetzt ändern wir das vierte Menü, doppelklicken darauf, deaktivieren Sie dieses Kästchen, doppelklicken Sie auf das Textfeld Wie ihr sehen könnt, ist das Peperoni-Pizza. Ich werde den Preis ein wenig ändern. Also entferne einfach die Häkchen bei diesen Büchern. Und der Preis wird in US-Dollar sein, und ich werde diese Pizza für 12$ verkaufen, richtig Und zu guter Letzt werde ich die Lebensmittelbeschreibungen ändern. Also entferne einfach die Häkchen in diesen Büchern. Doppelklicken Sie auf diese Lehrbücher. Ich tippe einfach zufällige Dinge ein, Leute. Also diese Pizza besteht aus Käse, Butter und Peperoni. Okay. Okay, das Letzte, was wir tun werden , ist, das TD-Modell sichtbar zu machen. Wenn Sie sich erinnern, verstecken wir das TD-Modell, oder? Klicken wir also auf Spline-Szene und klicken Sie einfach auf die Einstellungssymbole und klicken Sie einfach auf Einstellungen anzeigen, und wir werden die Sichtbarkeit von versteckt auf sichtbar umstellen, oder? Okay, jetzt klicken wir auf diese Play-Schaltfläche. Okay, also lass uns jetzt nach oben scrollen. Okay, sehr cool. Seht euch das an, Leute. Die Animationen funktionieren also. Scrollen wir jetzt ein bisschen nach unten. Eine besondere Pizza für alle, oder? Das ist also eine sehr leckere Pizza, Leute. Schau dir das an. Okay, also lass uns jetzt nach unten scrollen. Okay, leckere Pizza für alle. Und das ist unsere Speisekarte, Leute. Sehr cool. Schau dir das an. Wir haben Spinatpizza, Pizza Meeresfrüchten, Tomatenpizza und Peperoni-Pizza Sehr cool. Okay, wir sind also fertig. Ich sehe euch im nächsten Video. Junge. Es tut mir so leid, Leute. Es gibt eine Sache , die ich vergessen habe, Leute. Also, wenn die Kunden eine Bestellung aufgeben wollen, werden Sie auf diese Schaltfläche klicken, oder? Und klicken Sie einfach auf die Einstellungssymbole und Sie haben mehrere Möglichkeiten, oder? Sie können diese Schaltfläche mit Google Form verbinden. Sie können auch Ihre E-Mail-Adresse eingeben. Wenn also jemand deine Pizza bestellen möchte, wird er oder sie dir eine E-Mail schicken, oder du kannst hier auch deine Telefonnummer hinzufügen. Wenn also jemand die Pizza bestellen möchte, kann er oder sie Sie über diese Telefonnummer kontaktieren. Okay, Leute, ich glaube, das ist es. Das ist alles was du wissen musst. Wir sehen uns im nächsten Video. Tschüss. 12. Erstellen eines Online-Reservierungsformulars für Restaurant-Website: Hallo, Leute. Willkommen zurück zum Kurs. In diesem Video werden wir ein Online-Reservierungsformular für unsere Restaurant-Website erstellen . Okay, also lass uns jetzt anfangen. Klicken Sie zunächst einfach auf Marketplace. Klicken Sie dann auf Übersicht. Klicken Sie dann auf Apps. Sie werden auf diese Seite weitergeleitet. Scrollen Sie einfach ein bisschen nach unten. Klicken Sie dann auf Kundenservice und Community Engagement. Klicken Sie dann auf Forms and Surface. Okay, wir werden also Typeform verwenden. Klicken Sie einfach darauf und dann auf die FE-Website. Okay, also mach dir keine Sorgen, Leute. Typeform ist völlig kostenlos Ts. Okay, klicken Sie einfach auf Erste Schritte. Sie haben also die Möglichkeit, sich mit Ihrem Gmail-Konto anzumelden Sie können sich auch mit Ihrem Microsoft-Konto anmelden. Es liegt also subtil an Ihnen. In diesem Fall werde ich mich mit meinem GML.com anmelden Klicken Sie also einfach auf Bei Google anmelden. Okay, los geht's. Wie ihr sehen könnt, wurde ich zu meinem Dashboard weitergeleitet. Okay, also werde ich einfach auf ein paar Pläne klicken. Wie ihr sehen könnt, bietet Type Form einen kostenlosen Plan an. Offensichtlich gibt es einige Einschränkungen. Wenn es zum Beispiel um den kostenlosen Tarif geht, können Sie nur bis zu zehn Antworten haben, das ist also Ihr Höchstlimit. Leute, stellt sicher, dass ihr euch dieser Einschränkungen voll bewusst seid . Okay, jetzt gehen wir zurück zum Dashboard. Okay, jetzt klicken Sie einfach auf Neues Formular erstellen. Sie haben drei Möglichkeiten. Die erste Option besteht darin, von vorne anzufangen. Die zweite Option besteht darin , Fragen zu importieren. Wenn Sie beispielsweise bereits über ein Google-Formular verfügen, können Sie dieses verwenden. Die dritte Option besteht darin, das Formular mithilfe von KI zu erstellen. Okay, in diesem Fall werde ich die dritte Option auswählen. Ich werde das Formular mit KI erstellen. Und mach dir keine Sorgen Leute, der Prozess ist sehr einfach. Zunächst müssen Sie also den Abschlussball schreiben, in dem beschrieben wird , welche Art von Formular Sie erstellen möchten. In diesem Fall möchte ich also ein Online-Reservierungsformular für ein Pizzarestaurant erstellen ein Online-Reservierungsformular für ein Pizzarestaurant Online-Reservierungsformular für ein Pizzarestaurant Okay. Also werde ich jetzt weitermachen. Okay, jetzt müssen Sie in Ihrem Formular Fragen oder Themen angeben , die Sie stellen müssen. Okay, denn in diesem Fall erstellen wir ein Online-Reservierungsformular für ein Pizzarestaurant, also müssen wir natürlich nach ihrem Namen und ihrer E-Mail-Adresse fragen . Telefonnummer, weil wir sie kontaktieren müssen. Was sonst? Pizza-Typ. Weil wir wissen wollen, welche Art von Pizza Sie bestellen möchten. Schließlich wollen wir auch wissen , wann sie ankommen werden, oder? Okay, jetzt klicke ich auf Vier generieren. Okay, also klicken Sie einfach darauf. Der Vorgang könnte ein paar Sekunden dauern, Leute. Hoffentlich dauert es nicht zu lange. Also warte einfach. Okay, jetzt generiert Typeform das Formular für uns. Okay, das ist also das Formular, Leute. Das ist wie die erste Seite. Wie ist dein Name? Das ist die zweite Seite. Was ist deine E-Mail-Adresse? Das ist die dritte Seite. Was ist deine Telefonnummer? Und das ist die dritte Seite. Welche Art von Pizza möchten Sie reservieren, und das ist die fünfte Seite. Wann kommen Sie im Restaurant an? Okay, jetzt werden wir einige Änderungen an diesem Formular vornehmen. Also klicken Sie einfach darauf. Wie ihr jetzt sehen könnt, ist dies immer noch optional, und ich möchte, dass es erforderlich Also aktiviere das einfach. Okay, also werden wir dasselbe für die E-Mail tun. Also mach es erforderlich. Und dasselbe werden wir auch für die Telefonnummer tun . Machen Sie es auch erforderlich. Und für die Art der Pizza werde ich den Datentyp von Dropdown auf Multiple-Choice ändern . Okay, wir werden also etwa vier Optionen haben, oder? Wenn du dich erinnerst, wir haben ungefähr vier Menüs, oder? Also die erste ist SinuchPizza. Also tippt einfach Spina-Pizza ein, Leute. Die zweite Option ist Pizza mit Meeresfrüchten. Geben Sie also einfach Pizza mit Meeresfrüchten ein. Die dritte Option ist Tomatenpizza Geben Sie einfach Tomatenpizza ein. Und die dritte Option ist Peperoni-Pizza, richtig? Also tippe einfach Peperoni-Pizza hinein. Los geht's. Okay, wenn Sie also weitere Optionen hinzufügen möchten, klicken Sie einfach auf Auswahl hinzufügen. Okay, jetzt klicken wir einfach darauf. Und zum Schluss werde ich den Datentyp von Calently auf Date ändern . Klicken Sie also einfach auf Datum In diesem Fall gibt der Kunde also das Datum ein, an dem er im Restaurant ankommen wird, oder? Okay, ich denke, wir sind fertig. Klicken Sie jetzt einfach auf Veröffentlichen. Okay, wie ihr sehen könnt, haben wir dieses Formular erfolgreich veröffentlicht, oder? Also jetzt einfach hier klicken. Ihr habt zwei Möglichkeiten, Leute. Die erste Option besteht also darin, den Code in Ihre Webflow-Website zu integrieren Klicken Sie also einfach auf In eine Webseite einbetten und dann auf Einbetten starten Und in diesem Fall erstellen wir die Website mit Webflow, sodass Sie einfach auf Webflow klicken Sie können diesen Code also kopieren und ihn dann einfach in die Abschnitte mit dem Einbettungscode einfügen, oder? Also klicken Sie einfach darauf und scrollen Sie einfach ein wenig nach unten und klicken Sie einfach auf Code einbetten. Dieser Filter ist jedoch nicht für Benutzer des kostenlosen Plans verfügbar. Wenn Sie also den kostenlosen Tarif nutzen, können Sie diesen Filter leider nicht verwenden, oder? Aber macht euch keine Sorgen, Leute. Es gibt noch eine Alternative, oder? Das sind also die ersten Optionen. Sie benötigen einen Basisplan, oder? Und es wird dich ungefähr 14$ pro Monat kosten. Machen Sie sich jedoch keine Sorgen, wenn Sie den kostenlosen Tarif nutzen. Es gibt noch andere Optionen. Okay, ihr klickt einfach auf Link teilen und kopiert einfach diesen Link, Leute. Ordnung? Kopiere einfach diesen Link. Und gehen wir zurück zur Webflow-Bearbeitungsseite. Und scrolle einfach nach unten. Und klickt einfach auf diesen Button, Leute, richtig? Klicken Sie einfach auf diese Schaltfläche und dann auf diese Einstellungssymbole. Und was Sie tun müssen, ist den Link hier zu kopieren und einzufügen. Okay, also wenn der Kunde auf diese Schaltfläche klickt, wird er oder sie zum Formular weitergeleitet, oder? Lassen Sie uns das also testen. Ich werde diese Website veröffentlichen, also klicken Sie einfach auf In ausgewählter Domain veröffentlichen . Okay, es könnte also ein paar Sekunden dauern diese Website zu veröffentlichen, Leute. Also warte einfach. Okay, wie ihr sehen könnt, wurde diese Website veröffentlicht. Also klicken Sie jetzt einfach darauf. Okay, das ist also die Website, Leute. Okay, das ist also das T-D-Modell. Und wie ihr sehen könnt, funktioniert die Animation immer noch. Okay, sehr cool. Wenn Sie jetzt auf diese Schaltfläche klicken, geben Sie eine Bestellung auf. Klicken Sie einfach darauf, dann werden Sie zum Online-Reservierungsformular weitergeleitet. Okay, also wie ist dein Name? Ich tippe meinen Namen ein, Chris. Wie lautet deine E-Mail-Adresse? Also werde ich einfach meine E-Mail-Adresse eingeben . Los geht's. Wie lautet deine Telefonnummer? Nur eine zufällige Telefonnummer, Leute. Okay, also welche Art von Pizza, was möchtest du reservieren? Okay, also ich möchte mich gesund ernähren, also wähle ich eine Spinatpizza. Okay, also wann du im Restaurant ankommen wirst. Okay, also diesen Monat den 25. oder vielleicht den 27., 2024 dieses Jahr Okay, klicken Sie einfach auf Absenden. Okay, so wie ihr gelesen habt, danke, dass ihr dieses Typeform ausgefüllt Und ich habe die Benachrichtigungen von meinen E-Mail-Leuten bekommen. Sehr cool, oder? Okay, so erstellt ihr also ein Online-Reservierungsformular, Leute. Okay, gehen wir jetzt zurück zum Type Form-Dashboard und klicken einfach auf Ergebnis. Wie ihr sehen könnt, haben wir hier eine Antwort erhalten. Das ist für mich, oder? Okay, Leute, ich glaube, das ist es. Das ist alles, was du wissen musst. Ich werde euch im nächsten Video sehen, in dem wir die Suchmaschinenoptimierung optimieren werden. Also werde ich euch dort sehen. Tschüss. 13. Durchführung eines SEO-Audits mit SEOptimer und SEMrush: Heiliges Gas, willkommen zurück zum Kurs. In diesem Video werden wir SEO-Audit auf unserer Website durchführen. Die Tools, die wir verwenden werden, sind SEO-Optimierer und Sie fragen sich vielleicht, was das Ziel der Durchführung eines SEO-Audits ist? Ziel der Durchführung eines Nun, das Ziel besteht darin, die Leistung der Website zu bewerten und Bereiche zu identifizieren, in denen Verbesserungen bei der Suchmaschinenoptimierung möglich sind. Dieser Prozess hilft Unternehmen dabei, die Sichtbarkeit, Benutzererlebnis und die allgemeine Online-Präsenz zu verbessern. Okay, nein, lasst uns anfangen, Leute. Und mach dir keine Sorgen. Der Prozess ist sehr einfach. Sie müssen lediglich Ihre Webflow-Website veröffentlichen. Klicken Sie also einfach auf Veröffentlichen. In diesem Fall habe ich diese Website bereits veröffentlicht, kopiere die URL und füge sie ein, kopiere den Link zu dieser Website und füge ihn einfach hier ein, richtig? Und klicken Sie es einfach aus. Okay, Leute, der Vorgang könnte ein paar Sekunden dauern. Hoffentlich dauert es nicht zu lange. Ich werde diesen Teil überspringen und zurückkehren, sobald der Vorgang abgeschlossen ist. Ordnung, Leute. Also hier ist das Ergebnis. Die Gesamtpunktzahl ist C. Und hier unten haben wir die Aufschlüsselung. Für die unbezahlte Suchmaschinenoptimierung ist die Punktzahl also C minus für den Link Die Punktzahl ist ein Plus für die Benutzerfreundlichkeit. Die Punktzahl ist C für die Leistung, die Punktzahl ist A plus und für soziale Netzwerke ist die Punktzahl F. Sie fragen sich vielleicht, warum? Nun, weil wir der Website keinen Social-Media-Kontext hinzugefügt haben , Leute. Das ist der Grund, warum wir F bekommen haben. Okay, es gibt 23 Empfehlungen zur Verbesserung der Suchmaschinenoptimierung, also klicken Sie einfach hier. Wie ihr hier sehen könnt, haben wir viele Empfehlungen. Die erste besteht also darin, einen Text zur Methodenbeschreibung hinzuzufügen. Das hat hohe Priorität. Und die zweite ist die Implementierung einer Roboter-TXT-Datei. Dies hat bei Canonical Tech mittlere Priorität. Ebenfalls mittlere Priorität. Was sonst? Doppelten H-One-Text mit mittlerer Priorität entfernen. Und wir haben auch andere Empfehlungen, zum Beispiel, Bildern alle Attribute hinzuzufügen, aber das hat niedrige Priorität, oder? Erstelle und verlinke deine Facebook-Seite, erstelle und verlinke dein Twitter-Profil. Und diese beiden haben auch niedrige Prioritäten, Leute. Okay, lassen Sie uns jetzt SMRs verwenden, um ein SEO-Audit durchzuführen. Okay, also geht einfach auf diese Website, sembrs.com Slash Site Audit, und wir werden dasselbe tun Also kopiere einfach die URL und füge sie in deine Website ein, richtig? Und fügen Sie einfach den Link hier ein und klicken Sie einfach auf Audit starten. Und mach dir keine Sorgen, es ist völlig kostenlos. Okay, jetzt klicken Sie einfach auf Site Audit starten. Okay, der Vorgang könnte also ein paar Minuten dauern, Leute. Hoffentlich dauert es nicht zu lange, also warte einfach. In Ordnung, Leute, hier ist das Ergebnis. Der Zustand der Website liegt bei 89%, was meiner Meinung nach ziemlich gut ist. Es gibt keine Fehler, 24 Warnungen, 100% ige Leistungsfähigkeit. Bei den Werbe-DTPS sind es 99%. Okay, was die Nebenleistung angeht, sind es 98%, was sehr gut ist Für die interne Verlinkung sind es 100%. Für die Markups wurde es noch nicht implementiert. Und das Gleiche gilt für die wichtigsten Web-Geigen. Es wurde auch noch nicht implementiert, Leute. Okay, das ist also das Ergebnis? Ich glaube, das ist es, Leute. Das ist alles was du wissen musst. Wir sehen uns im nächsten Video. 14. Erstellen einer Website mit Firmenprofil mit Webflow AI Site Builder: Heilige Leute. Willkommen zurück zum Kurs. In diesem Video werden wir mit AI Site Builder eine Website mit Unternehmensprofilen erstellen. Dies ist einer der neuesten Feeder von Webflow. Okay, lass uns anfangen. Zuerst musst du dich anmelden und lass uns den Abschlussball schreiben. Erstellen Sie eine Unternehmensprofil-Website für den Wat Management Service. Dieses Unternehmen bietet drei Hauptdienstleistungen an. Der erste ist Way Set, der dreimal pro Woche eingerichtet wird. Die zweite Fläche ist Recycling von Abfällen und die Entsorgung von medizinischen Abfällen. Sie das Design der Benutzeroberfläche modern, stilvoll und professionell Okay, das ist also mein Abschlussball, ein sehr einfacher Und lassen Sie uns auf Generieren klicken Okay, jetzt generiert KI die Website. Und hier ist Ihre Webseitenstruktur. Und lass uns auf Website generieren klicken. Okay, jetzt erstellt KI die Website. Es wird ein paar Minuten dauern, vielleicht zwei oder 3 Minuten. Also wartet, Leute. Hoffentlich dauert es nicht zu lange und ich freue mich riesig auf das Ergebnis. Nun, es hat nicht allzu lange gedauert, Leute. Es dauerte nur eine Minute oder sogar weniger als eine Minute. Okay, also hier ist die Website. Okay, seht euch das an, Leute. Also hier ist die Bearbeitungsseite. Sie können die Website bearbeiten. Sie können den Text bearbeiten. Sie können das Bild ändern. Sie können die B-Grundfarbe ändern. Du kannst tun, was du willst. Es liegt ganz bei dir. Und du kannst auch die Teams wechseln, oder? Sie können es nach Belieben anpassen. Okay, lass uns jetzt ein bisschen nach unten scrollen. Hier finden Sie also die Website, Abfallmanagement, Compliance-Garantie, professionelle Müllabfuhr , Recycling und medizinische Entsorgung für Unternehmen — zuverlässige, gesetzeskonforme und umweltfreundliche Lösungen, die auf Ihren Betrieb zugeschnitten sind. Okay, sehr cool. Also haben wir hier zwei Schaltflächen: Angebot anfordern und einige Dienstleistungen. Ich mag diesen Stil wirklich. Schau dir das an. Modernes Abfallmanagement vereinfacht sich. Es hebt also alle Dienstleistungen hervor, die dieses Unternehmen zu bieten hat. Zum Beispiel geplante Abfallsammlungen, fortschrittliche Recyclingdienstleistungen, Entsorgung medizinischer Abfälle. Okay, sehr cool. Und es zeigt hier auch einige Statistiken, was sehr wichtig ist. Scrollen wir nach unten. Und unten haben wir auch die Abschnitte Q und Acht. Okay, sehr cool, Leute. Ich glaube, das ist es. Das ist alles, was du wissen musst. Wir sehen uns im nächsten Video. Junge. 15. Schlussbemerkung und Zusammenfassung: Holi Leute, willkommen zurück zum Kurs. In diesem Video werde ich alles zusammenfassen, was wir in diesem Kurs gelernt haben, und ich werde mir auch unsere V-Tipps und Tricks ansehen wie Sie die Qualität Ihrer Website verbessern Okay, fangen wir mit dem ersten Thema an, SEO oder Suchmaschinenoptimierung Sie müssen also SEO-freundliche Praktiken implementieren, einschließlich der richtigen Verwendung von Metatexten, beschreibenden URLs und semantischem Dies hilft der Suchmaschine, den Inhalt effektiv zu verstehen und zu indexieren Wenn Sie also den Traffic auf Ihrer Website erhöhen möchten, müssen Sie sicherstellen dass Ihre Website leicht zu entdecken ist. Eine der effektivsten Methoden ist die Optimierung des Keywords. Verwenden Sie das richtige Schlüsselwort. Sie können beispielsweise Tools wie eTRF verwenden und einfach das Schlüsselwort eingeben Zum Beispiel Abfallmanagement, und klicken Sie einfach auf Suchbegriffe suchen Und AdSrf zeigt alle optimierten Keywords für Okay, hier ist die Liste der Keywords, und Sie können den Schwierigkeitsgrad der Keywords sehen Es gibt Ihnen also Hinweise darauf, wie schwierig es ist, in den zehn besten organischen Suchergebnissen zu landen. Und Sie können auch die Lautstärke sehen. Das ist also wie das Suchvolumen. Wenn Sie also das richtige Keyword verwenden, haben Sie eine höhere Wahrscheinlichkeit der Google-Suche zu ranken. Okay, jetzt gehen wir zurück zur Mindmap und lassen Sie uns über das zweite Thema sprechen Drei Integrationen des D-Modells. Sie müssen sicherstellen, dass die drei D-Modelle reagieren und sich gut an unterschiedliche Bildschirmgrößen anpassen Testen Sie das Modell auf verschiedenen Geräten, um eine einheitliche und optisch ansprechende Präsentation zu gewährleisten . Für Einbettungstechniken stehen Ihnen zwei Optionen zur Verfügung. Sie können benutzerdefinierten Webflow-Code verwenden oder die Integration mit Viewern von Drittanbietern durchführen. Insbesondere, wenn Sie Ihrem 3D-Modell auf diese Weise Animationen hinzufügen , müssen Sie sicherstellen, dass die Animation vollständig funktioniert Und wenn Sie Spline verwenden, um Ihr Three-D-Modell zu erstellen, ist es sehr wichtig, dass Sie das Dateiformat überprüfen da nicht alle Dateiformate mit Webflow kompatibel sind Okay, jetzt kommen wir zum dritten Thema. Typografie, bewährte Methoden. Okay, Sie müssen genau auf die Auswahl der Typografie achten , einschließlich des lustigen Stils, der Größen und Konsistenter und lesbarer Text verbessert die Lesbarkeit und trägt zu einem Darüber hinaus müssen Sie auch den Farbkontrast sicherstellen. Wenn der Hintergrund beispielsweise schwarz ist, verwenden Sie keine dunkle Farbe für den Text. Verwenden Sie nicht Braun oder Grau, da es für die Leute schwierig sein wird, Ihren Text zu lesen. Achten Sie darauf, helle Farben wie Weiß, Gelb oder Orange zu verwenden . Und Sie müssen auch die dekorative Überlastung vermeiden. Fügen Sie Ihrer Website nicht zu viele Dinge , da dies möglicherweise zu Verwirrung führen kann. Okay, das ist also das Ende des Kurses. Vielen Dank und ich wünsche Ihnen alles Gute. Tschüss.