Webflow para iniciantes: crie seu próprio site de portfolio

1. Einführung: Hey, mein Name Jeremy und ich sind Markendesigner aus Sydney, Australien und ich entwerfe seit über acht Jahren Websites. Ich habe alles von Wix, Squarespace und sogar WordPress benutzt, aber jetzt habe ich die Kraft von Webflow genutzt. Ich entwerfe jetzt seit rund drei Jahren in Webflow und möchte Ihnen all mein Wissen mitteilen , das ich gelernt habe wie man Websites für mich selbst, aber auch für Kunden erstellt aber auch für Kunden und Ihnen alles geben kann praktische Tools und Tipps, die ich gelernt habe, um Ihnen beim Aufbau Ihrer Website zu helfen. Wenn Sie lernen möchten, wie man erstaunliche Designs erstellt, insbesondere wenn es um Typografie, Layout und Benutzeroberfläche geht , werde ich einige Tipps zum Website-Design teilen. Ich werde dir ein paar Websites geben, auf denen ich meine persönliche Inspiration finde. Ich zeige Ihnen den Workflow und die Preise für die Verwendung der Bausteine, die Verwendung des Box-Modells und die Erstellung einer einfachen Website, die funktional ist und auch einige Interaktionen hat. Ich werde dir ein bisschen von der Animation zeigen, ich werde auch aufschlüsseln, wie du dort etwas Code importieren kannst. Ich zeige Ihnen alle Einstellungen und alle Grundlagen zur Verwendung von Webflow, wie alles funktioniert und Ihnen ehrlich meine persönlichen Erfahrungen zur Verwendung geben . Für Ihr Klassenprojekt erstellen und entwerfen Sie Ihre eigene Website von Grund auf neu, egal ob Sie Designer, Künstler oder Fotograf sind und Ihr Portfolio aufbauen möchten. dann wird diese Klasse wahrscheinlich großartig für Sie sein, weil Sie sich selbst herausfordern können , eine Website von Grund auf neu zu erstellen und das Coole ist, dass Sie keinen Code für Webflow kennen müssen, es ist ein No-Code Visual Builder. Wenn Sie lernen möchten, ein leistungsfähiger Webdesigner zu sein oder einfach nur Websites als Hobby zu erstellen , dann schauen Sie sich diese Klasse definitiv an, sie ist ideal für Anfänger, Grafikdesigner oder Menschen wer will einfach nur ein neues Hobby lernen. Melden Sie sich noch heute an und wir sehen uns in der Klasse und hoffe, dass Sie erstaunliche Websites erstellen. 2. Was ist Webflow?: Was ist Webflow? Webflow ist ein Aufbau einer visuellen Website ohne Code. Jetzt habe ich alles von Squarespace, Wix, WordPress und sogar Shopify verwendet , und ich kann Ihnen sagen, dass Webflow von all diesen der beste ist, weil es einfach, funktional ist und so viele Funktionen hat, und es ist einfach insgesamt erstaunlich. Es ist wirklich cool, weil Sie tatsächlich voll funktionsfähige Websites erstellen können , von Blogs bis zum E-Commerce, also nur einfache normale Websites, auch wenn es für Ihr Portfolio ist. Deshalb habe ich die Vielseitigkeit von Webflow geliebt , und genau das ist es. Es geht darum, eine Website so zu erstellen und zu gestalten, wie Sie sie möchten , ohne all diesen Code und all diese anderen Jargon kennen zu müssen all diesen Code und all diese anderen Jargon Sie können Websites wirklich ganz einfach erstellen. Es ist einfach und alles visuell und macht es viel einfacher, alle Blöcke zusammen zu bauen. Was sind einige der Vorteile oder die Profis von Webflow? Einige von ihnen sind, es ist eine All-in-One-Lösung, es ist einfach für Kunden, sie tatsächlich zu aktualisieren und zu bearbeiten, wenn Sie schließlich unsere Kundenwebsite übergeben, Sie benötigen auch keine Plug-Ins, es ist auch hat viele Funktionen wie HTML Embed, Sie können auch Code exportieren, was cool ist, wenn Sie ein Entwickler sind, und ich möchte tiefer mit dem Code eingehen. Es wird alles an einem Ort gehostet, also muss ich es nicht herausfinden und Bluehost oder einen anderen Hosting-Service mieten , alles ist integriert. Es enthält auch ein CDN, ein Cloud-Netzwerk, das es Ihrer Site ermöglicht, viel schneller zu sein , da sie Server auf der ganzen Welt nutzt , und darüber hinaus hat sie die Academy X, die voll ist von Tutorials, die Ihnen zeigen, wie Sie Webflow und die großartige Community lernen können, jede Menge Unterstützung in den Foren, und die Leute sind nur bereit zu helfen und Ihnen Ratschläge zu geben. Das sind die Vorteile und die Vorteile davon. Die Nachteile, ich kann mir nur drei vorstellen. Der wichtigste ist die Kosten, die, weil Sie für das Konto und das Hosting bezahlen werden , ein bisschen teuer sein können, aber Sie müssen nur bezahlen, nachdem Sie zwei oder mehr Websites genutzt haben , nachdem Sie zwei oder mehr Websites genutzt Darunter ist es also kostenlos, also ist es ein ziemlich anständiger Deal. Dann ist schließlich die Lernkurve. Es ist viel höher, weil man verstehen muss , wie die Dinge funktionieren. Sie müssen ein bisschen HTML und CSS verstehen, aber Sie brauchen keine Programmiererfahrung. Sie müssen nur die Tools verstehen und lernen, dass es nicht so einfach ist wie Drag & Drop. Das wirst du herausfinden. 3. Box-Modell: [MUSIK] Jetzt möchte ich das Box-Modell erwähnen. Dies basiert auf CSS. Es dreht sich alles um die Bausteine und die Kernfunktionen wie eine Website funktioniert, wenn Sie sie erstellen. Es gibt vier wichtige Bausteine. Nummer 1 ist der Inhalt. Nummer 2 ist die Polsterung. Nummer 3 ist Marge, und Nummer 4 ist Grenze. Dies sind die vier Bausteine, die wir verstehen müssen , bevor wir anfangen, die Größe und das Layout und all das Zeug auszutauschen . Ich zeige hier ganz schnell ein Bild. Du siehst hier, dass es darum geht, Kisten zu haben. Ich weiß nicht, ob du von einer russischen Puppe weißt, wie du sie öffnest und sie hat ein kleines und ein kleines und du öffnest sie immer wieder. Es hat all diese Blöcke drin. Denken Sie an Container in Containern oder Kisten in Kartons. Darum dreht sich alles. Wenn Sie einen Block haben, mit dem Sie Bilder oder Text darin werfen, beginnen Sie mit dem Hauptinhalt. Dann hast du die Polsterung auf der Außenseite. Dann haben Sie den Rahmen, der der Umriss oder die Außenseite der Polsterung ist . Dann hast du den Rand, der ganz am Rand und außerhalb des Tellerrandes ist . Wenn Sie den Abstand zwischen zwei Objekten anpassen möchten, müssen Sie manchmal den Abstand zwischen zwei Objekten anpassen möchten, nur die Polsterung anpassen. Vielleicht möchten Sie Ihrer Box eine Gliederung hinzufügen. Dann würdest du den Rahmen anpassen und einen Strich hinzufügen. Das ist im Grunde das CSS-Box-Modell. Versuche es sehr einfach zu halten, aber es ist gut, das Verständnis zu haben . Wenn du also die Blöcke baust, erinnerst du dich, okay, das sind alles Teile und Bausteine zusammen. 4. Inspiration und Tools: [MUSIK] Ich zeige Ihnen einige erstaunliche Websites, auf denen ich Inspiration finde und einige Tools, die Sie tatsächlich für Ihre Websites verwenden können. Nummer 1 wird Dribble sein, ich gehe immer hier weiter, um die Inspiration für das UI-Design zu erhalten. Wenn ich also UI-Design tippe, können Sie sehen, dass Sie eine ganze Reihe von Designs und Websites erhalten, und alles ist einfach optisch schön. Denken Sie daran, dass nicht alle diese Websites funktional sind oder in einem Webflow oder in einer Website entworfen und gebaut sind, sie können schön aussehen, aber es ist nicht immer praktisch, machen sicher, dass du darüber nachdenkst, aber es hat ein tolles Design hier und ich denke, es ist eine wirklich großartige Website. Als nächstes haben wir Behance, eine weitere großartige Seite, besonders wenn Sie ein Designer sind. Sie haben erstaunliche Websites, sie haben Branding, den ganzen Shebang hier drauf. Sie können hier durchblättern und sich all diese interessanten Websites ansehen all diese interessanten Websites ansehen hier haben Sie hier eine Menge Inhalte erhalten. Als nächstes kommt eigentlich Webflow's Schaufenster. Wenn Sie auf die Webflow-Website gehen und in der oberen Ecke auf „Showcase“ klicken, können Sie sehen, dass Ihnen alle diese Websites angezeigt werden, die mit Webflow erstellt wurden. Ich kann hier eine ganze Reihe neuer sehen, sie sehen wirklich cool aus und das Coole an Webflow ist, dass Sie einige dieser Websites tatsächlich klonen können , ich zeige Ihnen in einem anderen Modul, wie es geht aber sie haben so viele coole Designs wie auch wenn ich auf dieses klicke. Das sieht wunderschön aus, sieh dir an haben ein paar Interaktionen drin und ja ich denke das ist großartig. Ich kann in Webflow auf „Öffnen“ klicken, wenn ich schnell sehen möchte, wie es gebaut wurde und Sie hier sehen können, kann ich alle Elemente sehen und es ist einfach erstaunlich, wie wir das machen können. Ich sehe alle Blackboxen richtig cool. Das ist Webflow-Schaufenster. Als nächstes kommen einige Vorlagen, es heißt flowbase.com. Wenn Sie diese Website besuchen, können Sie tatsächlich einige kostenlose Vorlagen herunterladen , aber sie haben auch kaufbare Vorlagen. Vielleicht bauen Sie eine Mitgliederseite auf oder benötigen eine bestimmte Art von Layout, Design oder Komponente Sie können sie tatsächlich von diesen Websites abrufen, zum Beispiel können Sie sehen, dass sie tatsächlich nur normale Website-Vorlagen haben . aber sie haben auch nur grundlegende Komponenten, die Sie bekommen können. Mit diesen 150 Dollar können Sie vorübergehend für den Bau erhalten . Vielleicht können Sie für einen Kunden Zeit sparen und einfach eine Vorlage herunterladen und sie dann so können Sie für einen Kunden Zeit sparen und einfach eine Vorlage herunterladen gestalten, wie Sie es möchten, mit den Farben, der Marke usw. und den Schriftarten. Dies ist eine wirklich coole Website, ich gehe gerne zu Vorlagen. Wenn ich zu Vorlagen gehe und im Menü dort auf „Kostenlose Vorlagen“ klicke , sind diese alle herunterladbar und du kopierst sie buchstäblich einfach und fügst sie in ein Website-Projekt ein. Macht es super einfach und es wird Ihnen viel Zeit sparen. Als nächstes kommt Awwwards mit drei Ws, frag mich nicht, warum sie das gemacht haben. In der Regel führen sie jedoch Wettbewerbe durch bei denen jedes Jahr mehrere Designer ihre Website einreichen und nur für grundlegende Inspiration eingestuft werden ihre Website einreichen und nur für grundlegende Inspiration eingestuft , eigentlich auch wirklich gut. Sie sind kreativer, sie sind mehr außerhalb des Tellerrandes als auf einer standardmäßigen kundenbasierten Website, manchmal ist es nur mehr zum Abstrahieren und Gewinnen. kannst du dir ansehen. Sie haben hier ein Menü, damit Sie sich die Sammlungen oder Gewinner ansehen können, zum Beispiel in Sammlungen haben sie E-Commerce, sie haben Schwebe und Cursor, eine ganze Reihe von Sachen. Vielleicht möchte ich mir Bildergalerien und Diashows ansehen , ich klicke darauf und es wird auftauchen und mir eine ganze Reihe von Beispielen einer Galerie zeigen , zum Beispiel klicke ich auf diese und das sieht hübsch aus cool. Ich könnte mich dazu inspirieren lassen, keine Ahnung davon oder ähnliches . Ich denke, es ist großartig. Als nächstes kommt, land-book.com. Dies ist eine erstaunliche Seite, ich bin schon eine Weile dabei. Wenn ich einfach nach oben scrolle, kannst du sehen dass es sich im Grunde genommen um Website- Sie haben Landungsportfolios, also oben links können Sie sehen, vielleicht möchte ich nach Portfolios filtern und einige Beispiele dafür sehen und all diese erstaunlichen Sehenswürdigkeiten zur Inspiration ansehen , super erstaunlich. Vielleicht wollte ich nur auf einen von ihnen klicken und zum Beispiel hier klicken. Sie können auf der rechten Seite sehen, dass es mir tatsächlich die Website zeigt , damit ich darauf klicken und es mir ansehen kann. Ich kann durchblättern und das Hauptdesign hier sehen, das Farbschema hier nur einfaches Schwarz und die gräuliche Farbe sehr gut gefallen hat . Hab ein bisschen Interaktion, die ziemlich dope ist. Dies ist eine großartige Seite, um sich inspirieren zu lassen und sie sich anzusehen. Jetzt ist mobbin.design noch eins, Mobbin oder Mobbin, ich weiß es nicht. Grundsätzlich erhalten sie eine ganze Bibliothek voller verschiedener Tech-Startups und tatsächlichen echten Unternehmen und schauen auf den Bildschirm, also ist es hauptsächlich für mobile UI-Designs gedacht. Sie können sehen, dass Sie eine ganze Reihe haben, zum Beispiel ist Klarna eine Zahlungs-App wie Zip Pay. Sie können alle Bildschirme sehen, Sie können sie sogar herunterladen, was verrückt ist und Design kopieren oder sich inspirieren lassen, sodass Sie alle Bildschirme der eigentlichen App selbst sehen können und dies erspart Ihnen einen Ton von Zeit insbesondere wenn Sie eine Website erstellen, die mobil reagieren muss, ist dies die Website, die Sie auschecken müssen. Wenn Sie jemand sind, der Illustrationen liebt, können Sie sich eine Reihe von Websites ansehen, von denen man blush.design heißt , Sie können sich das ansehen. Sie können jetzt verschiedene Bilder kombinieren und selbst einige Illustrationen erstellen. Sie haben auch verschiedene Sammlungen, wenn ich die Beep Beep-Sammlung gehe, können Sie sehen, dass Sie all diese Assets herunterladen können, was wirklich cool ist. Sie haben einige kostenlos, aber sie haben auch andere Pläne , Sie können es sich ansehen. Sie haben den kostenlosen Plan und sie haben 12 US-Dollar, es ist eine coole Seite für einige Illustrationen Es gibt viele andere Seiten wie Envato Elements , die ich verwende, aber ich zeige Ihnen nur ein paar speziell für Abbildungen. Sie haben auch schwarze Illustrationen, vielleicht möchten Sie einige Bilder im afrikanischen Stil, diese sind wirklich großartig. Wie Sie sehen können, sind einige der Packs bezahlt, ich denke, die meisten von ihnen sind, aber es gibt die wenigen kostenlosen Packs, aber das ist wirklich schöne Seite, wenn Sie auch hier verschiedene Illustrationen hinzufügen möchten . Vielleicht möchte ich etwas wie Geschäfte, die Sie sich ansehen können, sie haben dieses coole Pack und das wäre wirklich großartig. Wenn Sie nun ein paar 3D-Icons, 3dicons.co, möchten, ist dies ein kostenloses Paket von einem meiner Kumpels entworfen wurde, sein Name ist Vijay. Du kannst sie alle als PNGs oder sogar Figma herunterladen. Wenn du Figma entwirfst, kannst du tatsächlich all diese Dateien bekommen und du kannst hier eine ganze Reihe von Icons sehen, was meiner Meinung nach wirklich cool ist, wirklich [unhörbar] Wenn du auf diesen 3D-Stil stehst, Denk definitiv darüber nach, ein paar davon zu bekommen. Ich denke, es ist wirklich großartig. Wenn Sie jetzt mehr 3D-Symbole, Illustrationen und eine ganze Reihe von Sachen wünschen , können Sie sich iconscout.com ansehen. Sie haben einige Preispläne. Es ist ziemlich erschwinglich, es ist nur was? 12-13 Dollar, Sie erhalten Zugriff und Sie können eine ganze Reihe von Bildern bekommen. Vielleicht will ich sogar Animationen für den Webplayer, ich kann zur Lottie-Animation gehen und du kannst sehen dass es eine ganz andere Menge von ihnen gibt, die ich für eine Website verwenden kann, wie du siehst, super dope, also das ist ein weiterer großartiger Seite empfehle ich. Wenn Sie nur Icons wünschen, ist flaticon.com wirklich großartig, sie haben wirklich günstige Pläne, sie haben auch einen kostenlosen Plan, ganze Reihe verschiedener Symbole, also schauen Sie sich auf jeden Fall an Flaticon. Es ist ziemlich einfach, sie haben nur verschiedene Packungen und solche Sachen. Der nächste wäre auch thenounproject.com. Sie haben über drei Millionen Icons, tippen wir eine Pyramide ein oder so , wir werden sehen, was auftaucht. Sie können sehen, dass all diese Symbole eine ganze Reihe verschiedener Stile auftauchen , einige sind dünne Striche, einige sind dick, aber Sie können diese buchstäblich herunterladen und für Ihre Projekte verwenden. Sie können sagen, holen Sie sich dieses Symbol und Sie benötigen natürlich ein kostenloses Konto, um diese Symbole zu erhalten. Wo bekommst du ein paar Google-Schriften? Gehen Sie einfach zu fonts.google.com und Sie können tatsächlich eine ganze Reihe dieser Schriftarten herunterladen, für den kommerziellen Gebrauch kostenlos sind. Ich benutze Envato-Elemente, um meine Schriftarten zu erhalten , und ich benutze auch andere Websites. Schließlich haben wir gerade eine Facebook-Gruppe. Dieser Schlüssel heißt Webflow-Designer global. Es ist im Grunde eine Gruppe, in der sich eine ganze Reihe von Workflow-Designern aus der ganzen Welt gegenseitig helfen zu sagen: Wenn Sie Fragen stellen möchten oder Hilfe bei etwas benötigen, ist dies eine großartige Gruppe sein und die Leute posten Inspiration und eine ganze Reihe verschiedener Sachen. Es ist also eine kostenlose Gruppe, 20.000 Mitglieder, schließen Sie sich ihr einfach an. Ich habe keine Zugehörigkeit dazu, also schau es dir an. Wir haben nur ein paar YouTube-Kanäle, die ich liebe, sich speziell auf Webflow konzentrieren. Einer heißt Timothy Ricks. Er hat tolle Tutorials, wirklich erstaunlich, und du hast gerade gesehen, dass es Design und so gibt. Das ist wirklich großartig für Webflow und dann auch noch einen anderen Kerl, Caler Edwards, er hat auch ein paar coole Designs speziell in Webflow, schau dir diese Kanäle an und hoffentlich all diese Ressourcen und Tools helfen Ihnen dabei. Ich weiß, dass es viel aussehen mag, aber sie werden Ihnen wirklich helfen, diesen Vorsprung bei der Gestaltung Ihrer Website zu bekommen . 5. Grundsätze zum Website-Design: Ich möchte Ihnen fünf Tipps zum Website-Design geben , die mir wirklich geholfen haben und ich glaube, dass Sie es bei der Gestaltung Ihrer Website implementieren müssen . Die Nummer eins sind Heldenbilder. Wenn es um Heldenbilder geht, müssen sie mutig, atemberaubend und schön sein, weil Sie Aufmerksamkeit von jemandem auf sich ziehen müssen. Wenn jemand auf diese Website springt, haben Sie buchstäblich fünf Sekunden Zeit um ihn zu beeindrucken, und deshalb sehen Sie all diese Tech-Startups und diese großen Unternehmen, sie haben erstaunlich aussehende Modelle und Designs auf der Titelseite, auf dem sehr Heldenbild, das oben auf der Homepage das Hauptheldenbild ist. Darum geht es Aufmerksamkeit erregen, visuell sein, mutig sein, kreativ sein, aber es hervorstechen und auch funktional sein. Wenn Sie an Heldenbilder denken, denken Sie daran, Illustrationen, kühne Bilder zu verwenden , denken Sie an Farbe und denken Sie darüber nach, wie Sie es interessant machen können. Mein zweiter Tipp ist Einfachheit. es einfach, wenn es darum geht, eine Website zu entwerfen? Ist es einfach zu verstehen? Dies ist ein Button, das ist die Überschrift, das ist ein Bild. Ist es einfach, die Website zu durchsuchen und zu verstehen, wie sie funktioniert? Weil wir unsere Kernbotschaft deutlich machen müssen. Ist unsere Kernbotschaft und unser Marketing und unsere Titel sinnvoll? Ist es einfach zu lesen? Dies sind die Dinge, die Teil der Einfachheit sind, die ich sicherstellen möchte, dass ich sie auf meiner Website implementiere. Stellen Sie sicher, dass es einfach ist, stellen Sie sicher, dass es klar ist, und stellen Sie sicher, dass es auch funktional ist, dass jemand es tatsächlich benutzen kann, ohne frustriert zu werden. Der dritte Tipp ist der CTA, der für Call to Action steht. Haben Sie einen einfachen, mutigen Aufruf zum Handeln? Denk an einen Knopf. Hat es einen hohen Kontrast? Hat es Farbe? Ist es einfacher, darauf zu klicken? Hat es einen Hover-Status darüber? Weil Sie sicherstellen müssen, dass eine Schaltfläche auf der gesamten Website konsistent ist der gesamten Website konsistent damit jemand weiß, wenn ich meine Maus hier setze, wird es eine Schaltfläche sein, die zu einem Link oder einer Seite oder so führt wie das. Machen Sie den Aufruf zum Handeln immer auf dem Button klar. Manchmal können Sie einen geplanten Anruf haben oder jetzt buchen oder jetzt kontaktieren oder heute zitieren. Was auch immer es ist, denken Sie an eine mutige, klare Schlagzeile, wenn es um einen Aufruf zum Handeln geht , weil Sie möchten, dass jemand handelt, Maßnahmen ergreift und die nächsten Schritte unternimmt. Ob es darum geht, Sie für eine E-Mail oder einen Anruf zu buchen, ob Sie Kunde sind oder was auch immer es ist. Stellen Sie sicher, dass Ihr Aufruf zu Aktionen wirklich auffällt. Ich benutze immer Farbe und normalerweise habe ich das getan, um sie hervorzuheben. Ich verwende eine kontrastreiche Farbe , die wirklich das Gegenteil des Hintergrunds ist, und so mache ich normalerweise meinen Aufruf zu Aktionen. Tipp Nummer 4 ist Struktur; die Art und Weise, wie Sie Ihre Website strukturieren, ist wichtig. Wie ich bereits erwähnt habe, haben wir das Heldenbild oben auf der Seite. Dann musst du darüber nachdenken, okay, was kommt als Nächstes? meiste Zeit ist der soziale Beweis wirklich gut und zeigt frühere Kundenlogos oder Marken, mit denen Sie zusammengearbeitet haben, Ruf und das Vertrauen stärkt. Sie können darüber nachdenken, dass ich Arbeit oder Projekte oder Dienstleistungen einsetzen muss . Ich muss Testimonials oder Bewertungen hinzufügen , wenn es sich um eine Produktseite handelt, muss ich unten eine Fußzeile haben. Vielleicht brauche ich irgendwo einen Blog oder habe eine E-Mail-Marketing-Einbettung , die ich brauche, damit ich dafür mehr Opt-Ins bekommen kann. Denken Sie über die Struktur der Website und das Layout nach. Es ist sehr wichtig, dass Sie es vorher erstellen und so gestalten , dass Sie beim Erstellen der Website eine klare Struktur haben, die einfach zu navigieren ist. Planen Sie Ihre Website, denken Sie logisch und denken Sie an Hierarchie. Was sind die wichtigsten Informationen, die ein Kunde oder ein Kunde sehen muss? Leg das an die Spitze. Die Dinge unten sollten am wenigsten wichtig sein , aber alles andere klar halten. Mein letzter Tipp ist die Navigation. Wenn es um die Navigation geht, ist die Benutzererfahrung alles. Alles muss einfach zu befolgen und alles muss sinnvoll sein. Sind die Seitennamen sinnvoll? Ergeben die Knöpfe Sinn? Denn wenn es eine schlechte Navigation ist, wird jemand frustriert sein und von der Seite springen. Denken Sie darüber nach, wie die Tasten interagieren, denken Sie darüber nach, ob jemand auf einem Mobiltelefon ist, reagiert das Hamburgermenü beim Klicken sehr schnell? Oder ist es zu weit auf der rechten Seite oder was auch immer? Denk an die Navigation, wie alles zusammenfließt. Denken Sie daran, was ist die nächste Seite von der ersten Seite? Welcher Button geht auf welche Seite? Denken Sie über die logischen Schritte nach , die jemand unternehmen möchte, oder die Schritte, die er unternehmen soll, indem Sie ihn durch das Design der Website führen. Das sind meine fünf Tipps, wenn es um das Website-Design geht. Es gibt noch viel mehr, aber hoffentlich werden dir diese etwas Inspiration geben. 6. Interface-Grundlagen in Webflow: Jetzt kommen wir zum lustigen Teil. Wir werden dieses Design in Webflow erstellen. In Adobe XD bin ich gerade gegangen und habe hier zwei Seiten erstellt, wie Sie sehen können. Es sind 1920 Pixel mal 1080, und Sie können sehen, dass Sie gerade eine wirklich einfache, ein bisschen Arbeit hinzugefügt haben, einige Dienste, Testimonial-Abschnitt, Schlüsselschaltfläche mit einer Überschrift. Dann haben wir eine Seite für ein Portfoliostück oder ein Kunstwerk. Vielleicht bist du ein Fotograf, vielleicht bist du ein Logo-Designer, was auch immer du bist, es kann für dich funktionieren. Im Rahmen des Aufbaus Ihres Klassenprojekts müssen Sie Ihre Website aufbauen und Sie können weiterverfolgen oder versuchen, und Sie können weiterverfolgen oder Ihr eigenes Ding zu machen. Sie können hier sehen, dass ich bereits einige der Vermögenswerte exportiert habe. Wenn ich hier zu meinem Vermögen gehe, habe ich den Stern, den Pfeil und dann auch nur die anderen Formen. Ich kann das in Webflow importieren. Ich gehe zu Webflow. Ich gehe in die obere rechte Ecke und klicke auf „Neues Projekt“, und dies befindet sich in Ihrem Dashboard, damit Sie ein neues Projekt starten können. Ich werde den ersten auswählen, in dem Blank steht, wie Sie dort sehen können. Ich klicke auf „Auswählen“, dann sage ich Skillshare Class Project klicke auf „Website erstellen“. Sie können es so nennen, wie Sie möchten, geben Sie wahrscheinlich Ihren Vornamen an. Jetzt sind wir in Webflow. Bevor wir mit dem Entwerfen beginnen, möchte ich die Grundlagen der Webflow-Schnittstelle durchgehen . Oben sehen Sie diese Leiste, und diese werden Haltepunkte genannt. Im Moment können Sie sehen, dass ich diesen automatischen Haltepunkt habe, der der Desktop-Breakpoint ist. Wenn ich die Maus darüber bewege, siehst du den Base-Haltepunkt , der den Desktop ist, und du solltest immer mit dem Entwerfen auf dem Desktop beginnen. Dieser Grund ist, dass beim Entwerfen vom Desktop aus jede Änderung, die Sie in die iPad-Ansicht und dann auf das Handy vornehmen , die Designs nach unten kaskadieren, also ist es wie ein Wasserfall. Wenn Sie Änderungen am Desktop vornehmen, sollte sich dies auf die anderen auswirken. Wenn Sie jedoch von Mobilgeräten aus entwerfen, wirken sich die von Ihnen vorgenommenen Änderungen nicht auf die Desktop-Version aus. Behalte das einfach im Hinterkopf. Was ich eigentlich tun kann, ist, dass ich hier klicken kann. Ich kann die Breite auf 1080 ändern. Sie haben hier auch einige andere Optionen, aber ich drücke „Enter“. Jetzt können Sie sehen, dass es sich geändert hat, und das ist unser Haltepunkt. Ich kann auf den anderen Haltepunkt klicken, um zur Tablet-Ansicht zu wechseln , die iPad-Ansicht ist. Sie haben eine mobile Landschaft, ich selten dafür entwerfe weil Leute solche Videos nicht ansehen, es sei denn, sie sind in einem Zug oder so. Dann hast du auch den mobilen Haltepunkt. Das Coole ist, dass du diesen Tab tatsächlich ziehen kannst. Wenn Sie wissen, dass Sie für ein bestimmtes Telefon oder Mobiltelefon entwerfen , können Sie es ziehen, und wenn Sie beim Ziehen auf den Boden achten, es auf den verschiedenen Telefongrößen angezeigt, wird es auf den verschiedenen Telefongrößen angezeigt, so dass 360 Pixel ein Galaxy S8, S9 usw. sind. Sie können sehen, dass das iPhone 12 etwas breiter ist. Ich klicke zurück zu den Haltepunkten. Sie können an den Haltepunkten sehen, dass es die Pixel speichern sollte. Sie können sehen, ob ich zurückgehe, es speichert nicht den 1080, auf den ich ihn eingestellt habe , und das liegt daran, dass wir einen neuen Haltepunkt erstellen müssen. Auf der linken Seite sehen Sie diese drei Punkte, ich kann darauf klicken und Sie sehen, dass ich einen bestimmten Haltepunkt hinzufügen kann. Vielleicht will ich den 1920, ich klicke darauf und klicke auf „Erstellen“. Jetzt können Sie sehen, dass es diesen Haltepunkt hat, 60 Prozent dort, und dieser Haltepunkt liegt bei 100 Prozent, was cool ist. Grundsätzlich benutzt man so die Haltepunkte, sehr einfach, sehr einfach. Jetzt gehen wir zum Navigator. Auf der linken Seite haben wir unseren Navigator. Sie können „Z“ drücken, um das ein- und auszuschalten , und das bringt es heraus. Hier haben wir alle unsere Elemente und unsere Schicht. Stellen Sie sich das wie Photoshop-Ebenen vor, dort befinden sich alle unsere Boxen, alle unsere Ebenen und all die Dinge, die wir verwenden, um alles zu stapeln. Ihre Abschnitte, Ihre Boxen, Ihr Navigationsgerät usw. oben links, zum Plus-Button können Sie Elemente hinzufügen. Sie können auch Layouts hinzufügen. Wenn ich auf „Layouts“ klicke, kann ich ein vorgefertigtes Layout ziehen , vielleicht möchte ich eine Navigationsleiste, Sticky Nav, ich kann das ziehen und es wird die Navigationsleiste oben hinzufügen , super einfach. In meinem Navigator wirst du sehen, dass es auftaucht, jetzt habe ich das Sticky Nav da, ich habe einen Container. Darin habe ich das Nav Grid und die Listenelemente usw. Sie haben hier viele Möglichkeiten, spielen Sie mit ihnen herum, haben Sie Spaß damit, experimentieren Sie. Wir haben Abschnitte, Container und Gitter, die wir auf jeden Fall verwenden werden. Der Div-Block ist der grundlegende Block, den wir bauen, und das werden wir immer verwenden. Sie haben Typografie, Überschriften, Absätze, Zitate usw. Sie haben die CMS-Elemente. Sie können YouTube-Videos, Lottie-Animationen, Formulare und Komponenten hinzufügen . Wenn Sie HTML-Code hinzufügen möchten, können Sie hinzufügen und einbetten, damit ich dort einen Einbettungscode löschen kann, den Code löschen und dann den Code dort hinzufügen kann, offensichtlich haben wir ihn gerade nicht. Der nächste ist Symbole. Ein Symbol ist im Grunde wie in Photoshop oder in Illustrator ein Symbol Wenn Sie ein Symbol speichern, können Sie es im Grunde genommen als Objekt oder Symbol und es wird ein -Instanz, damit Sie sie über die Website wiederverwenden können, und sie hat die gleiche Funktionalität. Super nützlich, spart Zeit. Der dritte ist dein Navigator dort. Dann haben wir Pages im vierten Tab. Wir haben Utility-Seiten, Sie haben E-Commerce und CMS, diese erscheinen natürlich nur, wenn sie aktiviert sind. Mit Pages können Sie sehen, dass ich auf den Clog klicken kann, ich kann den Seitennamen umbenennen, ich kann andere Seiten als Homepage festlegen. Sie haben auch Ihre SEO-Einstellungen hier drin, die wir später etwas besprechen können. Wenn Sie eine Seite hinzufügen möchten, können Sie links oben gehen und auf „Seite hinzufügen“ klicken. Ich füge die Seiten hinzu, die ich möchte. Ich mache meine About-Seite, ich gehe zu Kontaktseite, dann gehen wir zurück und gehen zur Arbeit, oder du kannst Portfolio erstellen, was immer du willst. Sie haben diese Seiten, also kann ich diese ziehen, und Sie können die Umstrukturierung sehen, super einfach zu machen. Die fünfte Registerkarte, die Sie sehen können , ist CMS Collections, das werden wir nicht verwenden. Sie haben auch den Kartenbereich, Sie müssen für den E-Commerce bezahlen, also werden wir das nicht verwenden. Dann haben Sie Ihren Vermögensverwalter, hier nehmen wir unser Vermögen ab. Ich gehe hier zurück zu meinen Vermögenswerten, ziehe diese Dateien per Drag & Drop. Bevor Sie Dateien hochladen, möchten Sie zu TinyPNG gehen und die Dateien komprimieren, da Sie möchten, dass die Site schneller geladen werden soll. Je größer die Dateien sind, müssen sie komprimiert werden, also komprimiert TinyPNG die Bilder. Zum Beispiel ist diese Datei zu groß, ich kann sie hierher ziehen, es wird das PNG komprimieren und tatsächlich können Sie sehen, dass sie es um 60 Prozent reduziert hat, ich kann das herunterladen. Das ist ein weiterer schneller Tipp, an den Sie sich auch erinnern mussten. Hoffentlich hätten die Vermögenswerte dort hochgeladen werden sollen. Normalerweise können Sie den Button ziehen, aber in diesem Fall klicke ich dort einfach auf „Hochladen“. Ich suche die Assets und klicke auf „Öffnen“. Jetzt werden sie hochgeladen, damit Sie Schaltfläche drücken können, um Dateien hochzuladen. Sie können auch Ordner hinzufügen. Du siehst, dass ich alle Bilder da habe, echt cool. Dann haben wir dieses kleine Zahnrad hier, um Ihre Backups zu speichern, super einfach. Dann unten hast du noch andere Kleinigkeiten wie Video-Tutorials. Wenn Sie stecken bleiben, können Sie immer darauf klicken und sich buchstäblich ein Tutorial ansehen. Wenn ich nichts unterrichte, kannst du immer zurückgehen und das lernen. Das ist die ganze linke Seitenwand. Auf der rechten Seite haben wir unser Styling-Panel. Wenn wir ein Objekt haben, können wir Dinge tatsächlich stylen. In der oberen rechten Ecke haben wir Unterricht. Eine Klasse ist wie ein Stil in Illustrator, Photoshop , InDesign, wenn Sie einen Grafikstil erstellen , ist es so, so versuche ich darüber nachzudenken. Eine Klasse legt jedoch im Grunde einen bestimmten Stil für ein bestimmtes Objekt fest. Wenn es sich um einen Container oder einen bestimmten Header usw. handelt, haben wir auch ein Layout, also haben Sie Ihre statische, Ihre Flexbox, Ihr Raster usw. hier. Sie haben Abstand, damit wir unsere Ränder anpassen können, und wir können auch die Polsterung anpassen , die wir durchgehen werden. Sie haben die Größe, also alles, die Breite, die Höhe. Sie haben den Überlauf Wenn das Bild also außerhalb der Grenzen einer Div-Box oder eines Containers liegt , können Sie das anpassen. Du hast auch eine Position, die wir das durchmachen werden. Sie haben auch Typografie, also haben wir alle Schriftarten hier, super nützlich. Sie haben Gewicht, Größe, Farbe, Ausrichtung, Stil, sehr ähnliche Werkzeuge, wenn Sie ein Designer sind und solche Dinge zuvor verwendet haben. Sie haben auch Hintergründe, also können wir Bilder hinzufügen, Hintergründe Farbverläufe hinzufügen, wir können Clipping hinzufügen, wie eine Clipping-Maske, was ebenfalls interessant ist. Wir haben auch einen Rahmen, sodass wir einem Objekt einen Rahmen hinzufügen können. Wir können auch einen Strich hinzufügen. Dann hast du hier Auswirkungen auf den Boden. Wir haben Deckkraft, Schatten, Übergänge, Filter usw. In der oberen rechten Ecke haben Sie Einstellungen. Manchmal, wenn wir ein Menü haben, zum Beispiel, wenn ich ein Navi mache, stelle ich einfach ein Nav hier ein. Sie können die Einstellungen sehen, es heißt Header, und dann haben wir eine ID, und Sie bekommen dort ein paar Dinge. Wenn ich auf den Button klicke, siehst du, dass er die Link-Einstellungen hat. Ich kann dies wählen, um zu einer Seite zu gehen, zum Beispiel eine Seite auszuwählen, Sie können zu einer Webseite gehen oder was auch immer. Das nächste ist der Style-Manager. Hier sind alle deine Stile. Wenn Sie Klassen oder Stile erstellen, die Sie nicht verwenden, wird es Ihnen im Grunde genommen angezeigt, und Sie klicken auf „Bereinigen“, und es werden alle nicht verwendeten gelöscht . Manchmal haben Sie vielleicht ein Element und dann stylen Sie es vielleicht, aber dann haben Sie sich entschieden , eine neue Schaltfläche auf einer anderen Seite zu erstellen, und wenn Sie es nicht möchten, brauchen Sie es nicht mehr, löschen Sie die stil. Dann ist die letzte Option das Interaktionsmenü mit einem kleinen Thunderbolt, was ein cooles Symbol ist, und hier können Sie Trigger und Animationen usw. hinzufügen . Grundsätzlich ist dies die grundlegende Schnittstelle von Webflow. Dann bleiben wir stecken, wir fangen an zu entwerfen. Eine letzte Sache ist oben links, Sie können auf die Schaltfläche Webflow klicken und auf „Dashboard“ oder „Projekteinstellungen“ klicken. Es wird dich zurückbringen. Sie können sehen, ob Sie Schriftarten hochladen müssen, gehen Sie einfach direkt zu den Schriftarten. Wenn Sie zurückkommen möchten, klicken Sie mit einem kleinen Pinsel auf die Schaltfläche „Designer“ und gelangen Sie zurück zum Webflow-Designer. 7. Kontoeinstellungen: [MUSIK] Ich zeige Ihnen, wie Sie die grundlegenden Kontoeinstellungen in Webflow verwenden . Sobald Sie im Dashboard sind, können Sie sehen, dass ich hier eine ganze Reihe von Websites habe, dies sind meine aktuellen Websites und Dinge, die ich ebenfalls archiviert habe. Um nun auf die Kontoeinstellungen zuzugreifen, müssen Sie in die obere rechte Ecke gehen „Konto“ klicken. Klicken Sie auf „Kontoeinstellungen“. Sobald Sie hier sind, werden Sie alle diese Registerkarten oben links oben sehen, damit Sie all diese Registerkarten sehen können. Ich werde sie einfach schnell durchgehen und dir zeigen, worum es bei ihnen geht . Zuerst hast du ein Profil. Sie müssen sich keine Sorgen um diese Registerkarte machen, es handelt sich im Grunde genommen nur um Ihre grundlegenden Kontoinformationen. Das ist im Grunde nicht notwendig. Sie können auch ein Bild hochladen. Ich empfehle, ein kleines Bild hochzuladen, damit Sie sehen können, ob Ihr Konto bei Visuals hilft. Klicken Sie auf „Pläne“. Ich erkläre die Kontopläne. Es gibt einen Unterschied zwischen Kontoplänen und Hosting-Plänen. Hosting ist der Ort, an dem Sie tatsächlich eine bestimmte Website mit allen Hosting-Funktionen hosten, und dann ist das Konto ein echtes Konto, um Websites mit Webflow zu erstellen. Ich empfehle, mit dem kostenlosen Konto zu beginnen , da es kostenlos ist. Du bekommst zwei Websites. Sie können auch Kundenabrechnung und kostenloses Kommissionieren durchführen. Jetzt ist kostenloses Staging, wenn Sie eine Vorschau der Website live anzeigen können, nicht auf Ihrer eigenen Domain, obwohl es webflow.io sein wird. Ich bin gerade im Lite-Plan. Das empfehle ich, es sei denn, Sie sind ein verrückter Vollzeit-Webdesigner und möchten Kundenprojekte machen, dann gehen Sie zum Pro-Plan. Ich denke, der Lite-Planet reicht aus. Sie können bis zu 10 Websites haben. Sie nennen sie Projekte. Sie können sehen, dass 10 Projekte hier stehen. Wir haben auch Kundenabrechnung, verbessertes Staging und Codeexport. Ich verwende den Codeexport nicht, weil ich mich nicht unbedingt außerhalb von Webflow entwickle. Dies sind die Kontopläne. Sie können in der rechten Ecke nach jährlich filtern oder auf „Monatlich“ klicken und Sie können sehen, „Monatlich“ klicken und Sie können sehen der Preis auf 24 USD pro Monat ändern würde. Sie können oben auf den nächsten Tab klicken , wo eine Abrechnung erfolgt, Sie haben Ihre Nummer, Sie haben Ihre Karte, und Sie können Ihre Kreditkarte jederzeit ändern oder verschieben , wie Sie dort sehen können. Sie können auch den Abonnementbetrag sehen , den ich pro Jahr bezahle und dann offensichtlich den gesamten Lageplan , den ich über ein grundlegendes Hosting habe. Sie können sehen, dass ich zwei Websites mit grundlegendem Hosting habe, 15 Dollar pro Monat. Die Rechnungen und Sie haben dort auch Änderungen in früheren Rechnungen. Als nächstes kommen die Integrationen. Integrationen sind, wenn Sie einen API-Schlüssel eingeben möchten. Vielleicht hast du eine Vorlage von Drittanbietern, die du brauchst. Ich bin mir ziemlich sicher, dass Sie Zapier tatsächlich mit Webflow verwenden können und einige andere Tools, die Verbindungen ermöglichen haben derzeit keine Integrationen, also habe ich mich nicht darum gekümmert. nächste sind die Abrechnungstools. Dies ist der Zeitpunkt, an dem Sie Ihrem Kunden über Webflow in Rechnung stellen möchten. Vielleicht möchten Sie einen Wartungsplan haben , in dem Sie die Website monatlich aktualisieren. Hier ist die Abrechnung von Kunden wirklich cool. Sie können es einrichten, hier loslegen und einrichten, wie diese Abrechnung funktioniert. Höchstwahrscheinlich funktioniert es über Stripe oder PayPal. Der nächste ist „Purchase Template“. Wenn Sie Vorlage über Webflow kaufen, wird es hier angezeigt. Sie haben auch hier einen ThemeForest. Wenn ich mit der rechten Maustaste auf Vorlagen durchsuchen klicke, können Sie sehen, dass sie viele Vorlagen haben , die wie eine ganze Reihe von Dingen sind , und Sie können sehen, dass sie immer mit neuen Vorlagen aktualisiert werden. Hier ist jemand, der nicht von Grund auf neu abrechnen möchte, Zeit sparen und dann in eine Vorlage investieren möchte. Es wird in dieser Sekunde hier im Abschnitt „Kaufvorlage“ angezeigt . Das nächste sind die E-Mail-Einstellungen. Wenn Sie auf Ihrer Website einen Stand im Webflow-Formular setzen, ist dies die E-Mail, an die der Formale die E-Mails sendet. Sie müssen sicherstellen, dass dies die Haupt-E-Mail ist , die Sie verwenden. Dann können Sie die E-Mail-Benachrichtigungen auswählen. Das ist ziemlich einfach. Sie können auswählen, was Sie im Newsletter ausfüllen möchten usw. Das sind die E-Mail-Einstellungen. Sie haben auch Sicherheit. Hier können Sie die Zwei-Faktor-Authentifizierung für mehr Sicherheit aktivieren und Ihr Passwort ändern, und im Grunde ist es das. Es zeigt Ihnen die Anmeldedaten, die Aktivität, wenn es eine verdächtige Aktivität gibt , aber ich kann Ihr Webflow-Konto in absehbarer Zeit nicht hacken. Eine letzte Sache, wenn ich in die obere rechte Ecke gehe, können Sie sehen, dass Sie zum öffentlichen Profil gehen. Was in Webflow passiert, ist, dass Sie tatsächlich ein öffentliches Profil haben , in dem Sie Ihre tatsächlichen Websites teilen können. Sie können dies mit der Community teilen. Sie können sehen, dass ich 90 Aufrufe habe , was ziemlich cool ist und jemand meine Seite ansehen und all das überprüfen kann. Sie können auch bearbeiten. Sie können es auch ausschalten wenn Sie nicht möchten, dass es gesehen wird. So verwenden Sie im Grunde die Kontoeinstellungen in Webflow. 8. Website-Einstellungen und Ändern der Schriftarten: Ich zeige Ihnen schnell die Projekteinstellungen wenn Sie das Backend einer Ihrer Websites sehen möchten. Ich verwende mein Beispiel meiner aktuellen Website jeremymura.com. Sobald Sie eine Website ausgewählt haben, können Sie mit der linken Maustaste darauf klicken, und es wird Open Designer angezeigt , der in den Designteil aufgenommen wird, in dem Sie mit dem Erstellen einer Website beginnen können. Aber anstatt darauf zu klicken, klicke ich hier auf die drei Punkte und klicke auf Einstellungen. Sie können sehen, dass Sie andere Einstellungen haben wie das Duplizieren der Website, Sie können in einen Ordner wechseln, den Link freigeben und Sie können auch zum Editor gehen, der die Clientseite der Bearbeitung ist. Jetzt klicke ich auf Einstellungen und zeige Ihnen diesen Abschnitt tatsächlich da er für den Aufbau der Websites tatsächlich wichtig ist . In den allgemeinen Einstellungen sehen Sie, dass Sie Ihren Namen Ihrer Website haben und dann die Sub-Domain haben. Wenn ich die Website inszeniere und eine Vorschau anschaue, wird sie diese Domain dort verwenden. Nun, in Bezug auf das Favicon, möchten Sie auf dieses Favicon achten, da die Upload-Größe 32 mal 32 Pixel beträgt. Wenn Sie ein Symbol in Illustrator oder Photoshop erstellen, speichern Sie für das Web und speichern Sie es als PNG oder JPEG in dieser Größe und stellen Sie sicher, dass alles nett ist. Sie können grundsätzlich auf Hochladen klicken und dann das Bild dort ablegen. Dann hast du ein nettes kleines Symbol oben in deinem Browser, wenn du auf der Registerkarte ein Favicon bist. Jetzt der Webclip, das ist nur für iPhones. Im Grunde brauche ich das nicht, aber ich lege mein Logo trotzdem dort hin. Dasselbe gilt: Sie speichern einfach für das Web und speichern es als PNG oder JPEG, um es hochzuladen. Sie haben Lokalisierungen in den Zeitzonen und Sie können auch Passwörter für die Website eingeben , damit Sie darauf klicken und ein Passwort eingeben können . Falls Sie möchten, dass niemand versehentlich darauf zugreift einen Hacker oder ähnliches, können Sie das aktivieren. Ich benutze es normalerweise nicht , weil meine anderen Tools meinen Browser schützen. Zeigen Sie nun, wie ich im vorherigen Modul erwähnt habe, was Sie sagen können, wenn Sie möchten, dass Ihre Website öffentlich präsentiert wird und die Leute sie im Webflow-Showcase auf der Landing Page ansehen können sie im Webflow-Showcase auf der , dann können Sie das aktivieren. aber Sie können es immer ausschalten, damit Sie einfach Ihr öffentliches Profil erhalten. Sie haben auch die Möglichkeit, das Webflow-Branding aktiviert zu lassen. Wenn Sie am Ende Ihrer Website ein kleines Badge mögen möchten , können Sie das ankreuzen. Sie können sehen, dass ich es ausgeschaltet habe , weil ich es einfach nicht will, aber ich lasse den Workflow im HTML, also wenn jemand die Website überprüfen möchte. Wenn Sie also auf einer Website F12 drücken, können Sie sehen, dass Webflow irgendwo hier auftaucht. Ich könnte suchen, ich könnte Webflow eingeben und es wird hier im HTML-Code auftauchen. Ich klicke einfach auf „Speichern“, und dann hat es immer eine Nebenaktivität am unteren Rand. Cool. Als nächstes ist das Hosting Wenn Sie also eine Website hosten möchten, müssen Sie den richtigen Plan auswählen. jetzt für meine grundlegenden Websites Wenn ich jetzt für meine grundlegenden Websites nur ein Portfolio für mich selbst baue oder es ein kleines Unternehmen ist , das keine verrückten Dinge braucht, dann wählen Sie einfach das Basic aus. Ich gebe dir hier alle Möglichkeiten. Das kannst du in deine eigene Zeit einlesen. Sie haben die Domain-SSL enthalten, also war ich geschützt, Sie haben ein CDN, Bandbreite, 100 Seiten sind reichlich und Sie haben 100 Formulareinreichungen, was cool ist. Wenn Sie CMS wünschen, ist CMS ein Content Management System. Wenn Sie eine Website haben können, die einen großen Blog hat oder mehrere Projekte oder Planungsseiten enthält, dann ist CMS wahrscheinlich das Beste. Sie können die Preise dort sehen. Wenn Sie nun wie ein größeres Geschäft machen möchten, würde ich ein Geschäft wählen. Wenn Sie einen E-Commerce-Shop betreiben möchten, klicken Sie einfach auf E-Commerce und die Preise steigen deutlich, so dass sich das verdoppelt, aber Sie erhalten Funktionen wie Stripe- und PayPal-Integrationen. Sie haben Kunden, die Checkouts, CMS, Steuern, Versand usw. Ich hatte einen Kunden, der dafür den Standard verwendet hat und es hat wirklich gut funktioniert. Wenn Sie sich für ein Jahr entscheiden, sinkt der Preis natürlich . Das ist fürs Hosting. Wenn Sie also bereit sind, Ihre Website zu hosten, müssen Sie nur Basic auswählen und dann bezahlen, und schon können Sie loslegen. Sie müssen nur hosten, wenn Sie möchten, denn das Konto bietet Ihnen zwei kostenlose Websites, Sie so viel gestalten können, wie Sie möchten, was ziemlich cool ist. Jetzt ist der Editor die Editoreinstellung. Wenn Sie also einen Mitarbeiter hinzufügen möchten, können Sie jemanden einladen. Hier sehen Sie, dass meine E-Mail ich bearbeiten und veröffentlichen kann. Um mehr Mitarbeiter zu erstellen, müssen Sie einen CMS- oder Business-Standortplan hinzufügen, also müssen Sie hier nach oben gehen. Um eine weiße Beschriftung zu erhalten, müssen Sie ebenfalls ein Upgrade durchführen, damit Sie darauf zugreifen können. Dies ist großartig, wenn Sie möchten, dass Mitarbeiter Design verwalten oder mehrere Kunden oder Personen im Team des Kunden ihre Website verwalten Dies ist also eine gute Funktion. Sie haben auch hier eine Abrechnung. Wieder einmal kann ich die genaue Abrechnung für diese spezielle Website und dann die Kundenabrechnung sehen , ähnlich den anderen Einstellungen die ich Ihnen im anderen Modul gezeigt habe. Dann haben wir SEO, also Suchmaschinenoptimierung, wie wir die meisten von uns kennen. Sie haben eine Indizierung, also möchte ich nicht, dass mein webflow.io in der Suchmaschine indiziert wird , also stelle ich sicher, dass Sie das ausschalten möchten , damit es deaktiviert ist. Du hast Robots.txt. Wenn Sie diesen Text hochladen müssen, können Sie das tun. Du willst Sitemap automatisch generieren, ich hatte das an, also tick ja dafür. Es spart Ihnen nur Zeit, also erledigt Webflow es automatisch für Sie. Sie können auch die Überprüfung Ihrer Google-Website vornehmen. Wenn Sie Google Analytics verwenden, legen Sie hier Ihren Schlüssel ein und verbinden sich damit, was es wirklich, sehr einfach macht. Dann weiß ich dieses Ding nicht , was das offensichtlich ist. Auf Formulare. Ein Formular ist, wenn Sie nur das grundlegende Webflow-Formular verwenden, Sie nicht von Mail oder ConvertKit einbetten, sondern nur das Formular in Webflow verwenden. Dies sind die Details in der Füllung hier. Der Name, die E-Mail, an die ich gesendet wurde, also möchte ich dies in meine Hallo E-Mail ändern. Betreffzeile, die eine neue Einreichung sein kann, und dann wäre einfach eine Antwort. Wenn jemand es über Ihr Formular legt, obwohl ich auf dieser Website kein Formular habe, aber wenn Sie dies tun, werde ich es an meine E-Mail senden. Sie können auch die E-Mail-Vorlage erstellen, die eine kleine Sache an die Person sendet , die antwortet. Sie haben auch eine Rückeroberungsvalidierung, das verwende ich nicht und dann haben Sie Integrationen. Sie können auch Formularübermittlungen ausblenden, wenn Sie möchten. Beschränken Sie den hochgeladenen Zugriff, ich hatte das gerade an und lassen Sie es einfach so. Eine der wichtigsten ist Schriften. Wenn Sie Ihre eigenen Schriftarten für ein Website-Design hochladen möchten , müssen Sie hierher kommen und dies hier tun. Es ist super einfach, es ist super einfach. Offensichtlich kann ich hier Schriften aus dieser Liste auswählen. Sie haben tatsächlich viel, sie haben tatsächlich ein paar mehr als eine hinzugefügt als die letzte Überprüfung, also müssen Sie dann auf die Google Fonts klicken. Aber Sie möchten auf benutzerdefinierte Schriftarten zurückgreifen. Jetzt können Sie meine Installierten Schriften sehen. Ich habe diese benutzerdefinierten Schriftarten bereits hochgeladen, die meine Montreux-Schriftart ist. Sie können den Stil sehen, so normal, kursiv, fett usw. Dann ist es offensichtlich eine W-O-F-F-F-Datei, die Sie hochladen sollten. Sie können sehen, ich kann nach rechts gehen und die Schriftarten löschen, die ich nicht möchte. Wenn ich einen habe, den ich nicht mag, lösche ich ihn einfach. Sie können sehen, dass es dort nur Backup-Schriften gibt. Es ist super einfach, Sie können auch Adobe Fonts, API, einfügen , aber lassen Sie es einfach, laden Sie einfach die Schriftart herunter. Wenn ich zum Beispiel auf Hochladen klicke, gehe ich zu meinem Schriftbereich. Sie können offensichtlich sehen, dass die Schriftart hochgeladen wird. Es wird es so in dieses Fenster importieren. Du siehst den Namen, damit ich sie einfach 400 abnehmen kann. Stellen Sie sicher, dass Sie das richtige Gewicht auswählen. Was auch immer das Gewicht in Ihren Programmen in InDesign oder Illustrator ist, überprüfen Sie es einfach noch einmal. Normal, und dann kannst du sehen, ich kann es tauschen, ich kann die Bestellung umdrehen usw. Dann klicke ich auf Datei hochladen und es wird hier hochgeladen. Im Moment will ich das nicht machen, also überlasse ich das einfach, aber es ist so einfach und schnell. Als Nächstes haben wir Backups. Backups sind unkompliziert. Die Website speichert automatisch ein Backup für Sie, sodass Sie sich darüber keine Sorgen machen müssen. Super einfach. Sie können eine Vorschau anzeigen oder wiederherstellen. Vielleicht hat es dem Design nicht gefallen, du kannst einfach zurückgehen. Super einfach. Als nächstes kommen Integrationen. Nun, hier für diese spezielle Seite, habe ich mein Google Analytics weil es diese spezifische Website auf meinen anderen Websites verfolgt . Sie können mein Universal Analytics Tracking sehen, das ist mein Code. Wenn ich mich jetzt bei Google Analytics anmelde, wird alles verbunden sein. Du hast auch Facebook-Pixel. Hier ist was ich mache. Anzeigen, es ist hier mit diesem Pixel verbunden, und Sie können einen Code dafür erhalten. Dann ist das letzte Hinzufügen von benutzerdefiniertem HTML und CSS. Sie können hier sehen, im Kopfcode, dass ich diesen Code hier habe. Jetzt stammt dieser Code von Flodesk, meinem E-Mail-Anbieter. Wenn ich zu Flodesk gehe, verwende ich im Grunde eine API aus meinem Konto. Das verwende ich für meine E-Mails. Grundsätzlich sagt es Webflow, dass er die Formulare abholen soll , die ich in meinem Flodesk erstellt habe. Dann gibt es alle Registerkarten in den Party-Einstellungen. Sie haben hier oben einige andere Dinge, wie z. B. transversal. Wenn Sie auf diese Schaltfläche klicken, können Sie eine Website an Ihren Kunden übertragen. Ich kann das in einem ähnlichen Video aufschlüsseln. Sie haben auch den Teilen-Button. Sie haben die Designer-Schaltfläche, die Schaltfläche „Bearbeiten“ und „Veröffentlichen“, und diese sind alle im Designer verfügbar. 9. Nav und Hero: Zuerst werden wir am Nav arbeiten, also gehe ich zu Webflow. Ich gehe auf die linke Seite und gehe zum Layout und normalerweise ich hier einfach beim Sticky Nav, einfach und einfach. Rechtsklick. Ich doppelklicke auf das „ Nav-Logo“ und klicke mit der linken Maustaste und klicke dort auf den Code, wähle Bild aus und ich wähle mein Logo aus, das ich bereits in den Bildern hochgeladen habe. Cool, also ist das Logo drin, jetzt gehe ich nach rechts und gehe zur Größe, damit ich das Pixel ändern kann. Ich gehe runter und mag 150 Pixel. Schön. Das sollte gut aussehen. Jetzt gehe ich zum Nav und auf der rechten Seite können Sie in dieser Box sehen, dass wir einen Container haben und im Inneren haben wir das Raster, das diese Listen dieser anderen Namen enthält. Wir haben ein Listenelement und dazwischen ist nur der Link und diese Links gehen zu einer anderen Seite. Ich muss die Schriftart hochladen, also gehe ich zu den Projekteinstellungen. Ich klicke auf „Schriftarten“ und klicke auf „Hochladen“ und finde meine Schriftarten inter, und ich brauche fett, regulär, und diese, extra hell kursiv, so fett, regelmäßig, extra leicht kursiv klicken Sie auf „Öffnen“ und Sie können dort drin sehen, und dann klicke ich einfach auf „hochladen“, hochladen und hochladen und jetzt habe ich diese Schriftarten schön. Jetzt gehe ich zuerst auf die Website um. Ich muss über Prozess und Kontakt arbeiten. Du hast Arbeit. Jetzt kann ich auch „Control C“, „Control V“ drücken und es sollte es duplizieren. Wenn ich es von links mache, können Sie sehen, das können Sie sehen, Listenelement auswählen und das so duplizieren, wie Sie im Navigator-Menü sehen können. Ich habe Arbeit, über, Prozess und Kontakt. Jetzt kann ich diesen Button hier lassen, wenn ich möchte, ich werde ihn einfach löschen und sicherstellen, dass Sie den Button im Listenelement löschen , damit wir es sehen können. In Ordnung, also habe ich mein Menü hier und was ich tun werde, ist, dass ich es stylen werde. Für dieses Menü sehen Sie, dass ich darauf doppelklicke, es ist 29 fett oben. Ich gehe zur Topographie, ich werde meine Schriftart finden, die ich dafür verwende, ich werde gehen und den Stil auswählen, das Gewicht, das auch der Stil ist. Klicken Sie auf „fett“ und ich werde es 29 machen, was in dieser Größe offensichtlich zu groß ist, aber bei diesem sieht 1.920 nicht so schlecht aus, also werde ich es einfach anpassen und lass uns 19 gehen. Das sieht gut aus und die Farbe, ich werde es vorerst einfach wie ein Schwarz machen, und dann klicken Sie bitte auf „Plus“, und Sie können hier sehen, erstellen. Wenn ich jetzt zurück zu XD gehe, kannst du sehen, dass ich die Farben hier habe, verschiedene Farben, damit ich das hinzufügen kann. Ich doppelklicke, wähle dies aus und dann kann ich den Hex-Code hier einfügen und mit der linken Maustaste darauf klicken und dann auf „Plus“ klicken, und du kannst sehen, dass er ihn hinzufügt und ich kann ihn benennen, wie ich will. Ich kann es ändern, mach es einfach grau, drücke „erstellen“. mache ich auch schnell für diese anderen Farben. Was Sie tun möchten, ist, wenn Sie in der Topographie sind, klicken Sie auf die „Farbe“ und wir können hier reingehen und wir können diese hinzufügen. Nun können Sie dieses sehen, der Kontrast sagt, dass es aus Gründen der Barrierefreiheit fehlschlägt . Es ist wirklich gut, wie Webflow das ermöglicht, aber offensichtlich können wir das College immer noch benutzen, spielt keine Rolle, ob es Triple A sagt, das wirklich gut ist. Es ist nur aus kontrastierenden Gründen, sollte aber in diesem Fall Spaß machen. Ich lösche einfach diese Farbe, füge sie ein und klicke auf „Plus“ und erstelle. Schön. Alles klar, also haben wir alle unsere Farben sind wirklich cool. Ich werde nur sicherstellen, dass ich die schwarze Farbe eingestellt habe, und auch für den Hintergrund gehe ich auf die rechte Seite meines Sterling-Pfunds gehe zu Hintergründen und klicke auf die Farbe und ich bin werde es einfach komplett weiß machen, wie du siehst und jetzt haben wir unsere Navbar. Sie können sehen, dass es voll reagiert wenn ich zur mobilen Ansicht gehe. Schön. Das ist das Tolle an Webflow. Es reagiert einfach automatisch, da wir diese Layoutvorlagen verwendet haben . Erstaunlich. Jetzt fangen wir an, den Rest davon auszubauen. Du hast Sticky Nav hier und jetzt ist ein cooler Trick oder eine coole Abkürzung, dass du „Control K“ drückst und ich kann alles eintippen. Wenn ich div eingeben kann, kann ich den Abschnitt eingeben, ich kann den Container eingeben, was auch immer es ist. Ich tippe einfach den Abschnitt ein und du kannst sehen, dass ich das einfach rausziehen werde. Ich ziehe den Nav in diesen Abschnitt, dann kontrolliere ich K und drücke „Container“. In Ordnung, du kannst auch nach oben links gehen und es von hier aus machen und einen Container wie diesen einfach in die Box ziehen und ablegen, das ist auch in Ordnung. Wir haben das Sticky Nav, wir haben den Container, aber du kannst sehen, dass er sich im Sticky Nav befindet, also ziehe ich das so raus und ziehe es nach unten. Sie können sehen, dass die Layer wichtig sind. Stellen Sie sicher, dass Sie an der richtigen Stelle ziehen. Ich drücke „Control K“ und wähle dann einen Div-Block aus. Ein Div-Block ist im Grunde wie ein normaler Block. Ich sprach über vier Themen um einen Baustein zu bauen, wie einen Logoblock oder einen Container, eine Schachtel. Was wir tun wollen, ist, dass wir ihm eine Klasse oder ein Tag geben wollen. Dafür nennen wir es Wrapper und wir können die Breite ein bestimmtes Pixel machen, also liegt sie bei 940. Ich schaffe es 1.080 wenn ich will. Es wird sich darüber hinaus erstrecken. Ich kann es 500 Pixel machen, wenn ich will, wie du dort sehen kannst, also liegt es wirklich an dir, was du das machen willst. Ich kann es wie Ideen legen, aber sagen wir einfach, du machst 600 Pixel, du kannst zur Abstandsschaltfläche gehen und auf dieses kleine Quadrat klicken, und es wird das Feld zentrieren. Wenn ich zum Beispiel ein Bild in diesem Wrapper ablegen möchte, können Sie sehen, dass es vollständig zentriert ist und es nur 500 Pixel sind. Wenn ich jetzt auf den „Wrapper“ klicke und ihn 1.000 mache, wird es das erweitern, wie Sie so sehen können. Es ist ziemlich einfach. Ich gehe einfach zurück. Ich lasse es einfach bei 940, weil es so eingestellt ist. Jetzt wollte ich einige Elemente hinzufügen, also gehe ich hierher, ich füge einen Header hinzu. Stellen Sie sicher, dass Sie mit der linken Maustaste klicken und innerhalb des Wrapper ziehen. Ich drücke auch auf „Absatz“ und dann brauchen wir auch die beiden Bilder. Ich kopiere einfach und füge es ein. Ich kopiere und füge es dort ein, und dann haben wir auch einen Knopf, also gehe ich weiter, finde den Button und ziehe ihn dann so nach unten, also hast du dort einen Knopf. Cool, ich lasse die Bilder vorerst einfach raus. Cool. Was ich jetzt machen werde, ist , dass ich diese stylen wollte. Dies ist ein fett fett 85 Punkte. Ich gehe zur Topographie, tippe 85. Es könnte groß aussehen, weil ich hier grundsätzlich für diese Größe entworfen habe. Ich schaffe es einfach 45. Das ist cool. Wir gehen Inter, Bold. Exzellent. Das ist Inter , Regular oder Normal. Manchmal zeigt es die Namen nicht richtig an, was in Ordnung ist. Ich fahre 16 Pixel. Normalerweise sind 16 Pixel gut. Für den Button gehe ich auf der rechten Seite zu Hintergründen und klicke dann einfach mit der linken Maustaste auf die Farbe, die ich bereits dort hatte. Button, ich habe die Farbe. Jetzt gehe ich für den Text zur Eingabe und klicke auf das „Menü“, und klicke auf das „Menü“ in dem weitere Typoptionen angezeigt werden. Jetzt gibt es mir die Möglichkeit zu kapitalisieren, damit ich meinen Knopf groß schreiben kann, wie Sie dort sehen können. Ich kann darauf doppelklicken, das einfügen, und ich werde das Kerning ein wenig anpassen, auch als Abstand zwischen den Buchstaben bezeichnet. Ich kann den Buchstabenabstand sehen, wenn ich fünf tippe, du kannst sehen, dass er ihn ausspeichert. Das ist einfach zu viel. Ich möchte vielleicht zwei machen. Oh, ja, vielleicht mache ich einfach zwei, und dann werde ich auch die Schriftart ändern, und das kann normal sein, wie Sie dort sehen können. Es sieht dem ziemlich ähnlich aus. Schön. Was ich jetzt auch tun kann, ist zusätzliche Polsterung hinzuzufügen. Du siehst, dass wir hier Polsterung haben. Ich kann Alt halten und wenn ich Alt halte, wird es beide Seiten hochskalieren, damit ich Alt halten und herausziehen kann. Vielleicht möchte ich etwas mehr Platz hinzufügen und vielleicht möchte ich 12 Pixel machen. Nebenbei möchte ich vielleicht so etwas größer werden. Okay, cool, das ist ein ziemlich solider Knopf. Wir haben unseren Wrapper, wir haben die Überschrift und den Absatz und den Button. Jetzt kann ich dem einen Stern geben. Es heißt Überschrift, also kann ich Überschrift machen und H1 eingeben. Jetzt habe ich eine Kombo-Klasse hinzugefügt. Ich kann diese Klasse entfernen und diese einfach so in H1-Überschrift umbenennen und „Enter“ drücken. Nun, das ist die Überschrift der Klasse H1, das ist nur ein Absatz, und dann ist dies nur eine Schaltfläche. Sie können es immer umbenennen. Denken Sie daran, welche anderen Objekte auf der Website Sie auch dieser Klasse geben, sie wird den gleichen Stil hinzufügen. Okay, cool. Das haben wir. Für diesen Wrapper füge ich eine Combo-Klasse hinzu, ich nenne es Held. Wir haben Wrapper, Helden, und was ich jetzt machen wollte ist, dass ich etwas Polsterung hinzufügen werde und vielleicht viele Pixel, etwas Platz geben, etwas Platz geben, etwas Platz zum und vielleicht viele Pixel, etwas Platz geben, Atmen geben. Cool. Wir haben diesen Abschnitt auch. Zu diesem Abschnitt ich meine Bilder hinzu. Anstatt die Bilder in den Wrapper einzufügen, füge ich sie dem Hintergrund hinzu. Unten rechts sehen Sie Hintergründe, Bilder und Verläufe. Ich klicke das an. Ich gehe auf die rechte Seite. Du kannst Bild wählen sehen und ich wähle hier meinen kleinen Kerl aus. Ich klicke auf „enthalten“ und passe das an. Ich ziehe Fliesen ab. Wir wollen diesen Kerl nicht hier kacheln und gehen wir 90 Prozent. Wir können Brauch gehen. Vielleicht wollte ich einfach nur in Pixel setzen. Ich kann vielleicht 400 Pixel machen. Die Breite und die Höhe. Cool, genial. Wir haben diesen Kerl, jetzt werden wir ein bisschen mehr Polsterung hinzufügen. Die Rubrik, cool. Ich kann auch ein anderes Bild hinzufügen und füge dieses Rechteck hinzu, schalte die Kacheln aus und bringe es dann ungefähr an dieselbe Position. Es ist zu groß, also gehen wir zu 50. Los geht's, und ich ziehe das einfach nach unten, damit du sehen kannst, ich ziehe es unter Jeremy und du kannst sehen, dass ich den Kerl da habe , der ich bin. Ich gehe zu meiner Sektion und füge tatsächlich etwas Polsterung hinzu. Wenn ich die Polsterung verschiebe, können Sie sehen, dass es den unteren Teil bewegt . Wenn ich Rand hinzufüge, können Sie sehen, dass es Platz außerhalb hinzufügt, aber wir möchten einfach die Polsterung entfernen damit Sie sehen können, dass der Nav breit ist deswegen wird der Kopf abgehackt, also wollen wir das runterbringen. Sagen wir einfach 100 Pixel, und wir können diesen Wrapper auch herunterbringen. Ich füge dort noch ein paar Padding hinzu, und ich kann das so aufrufen und auf den „Back-Bereich“ klicken und wenn ich weitermachen will und das vielleicht beheben möchte, vielleicht 250, mach es kleiner, ich kann es Passen Sie dies an und Sie müssen nur mit diesen Einstellungen herumspielen und wenn Sie herumspielen, können Sie das sehen. Ich kontrolliere einfach Z, um zurück zu gehen. Ich kann das 2X ausschalten, aber das ist aus. Sie können auch Farbverläufe und solche Sachen hinzufügen und wie Sie sehen können , werde ich einfach Z kontrollieren und [unhörbar] werden. 10. Leistungen und Services: Cool. Sobald wir damit fertig sind, fangen wir an, den nächsten Abschnitt zu erstellen. Ich klicke auf „Plus“, füge einen Abschnitt hinzu, ziehe ihn per Drag & Drop ein. Wie Sie sehen können, schön, jetzt habe ich die Sektion. Ich fange an, damit zu bauen. Ich bin mir sicher, dass sie hier ein Layout haben könnten. Sie können sehen, dass sie einen Kartenbereich haben. Ich werde das buchstäblich ziehen und das fallen lassen. Sie können sehen, dass der Abschnitt manchmal automatisch hinzugefügt wird, sodass wir diesen Abschnitt einfach löschen können. Ich fange einfach an, diesen Text hier zu kopieren. Um diesen Text genauso zu machen wie diesen, muss ich nur die Überschrift auswählen und h1 eingeben, und ich kann vorhandene Klassen sehen. Jetzt muss ich nur noch mit der linken Maustaste klicken und es wird den gleichen Stil für die Klasse hinzufügen. Es wird die gleiche Schriftart und den gleichen Schriftart und den gleichen Bonusstil extrahieren den gleichen . Das ist super einfach. Fortsetzen Sie hier ein, kopieren Sie den Text, den ich bereits hatte , den ich bereits geschrieben habe, löschen Sie diesen Absatz. Dann habe ich jetzt diese Karten, was echt cool ist. Jetzt kann ich ein Bild auswählen. Ich doppelklicke auf dieses Bild, klicke auf „Bild auswählen“ und füge das dann so hinzu. Ich hab das hier, schön. Ich mache das einfach schnell. Es macht den Prozess sehr einfach. Sie im Absatzstil sicher, dass diese den Stil dieses haben. Ich gehe zum Typ Absatz, füge die Klasse hinzu. Obwohl es den Namen des Absatzes hat, aber Sie müssen die Klasse hinzufügen. Styling an der Seite, und es sollte die Schrift nehmen. Schön. Was ich jetzt mache, ist auf den Kartenbereich zu klicken. Du siehst, dass ich im Bereich „Kartenbereich“ bin. Gehe wieder in den Hintergrund, aber dieses Mal klicken wir auf „Farbe“. Ich wähle dies aus und wähle die schöne Cremefarbe aus. Du kannst sehen, wie es aussieht. Was ich jetzt auch machen werde, gehe ich zum Grid-Container, weil er automatisch ein Raster hinzugefügt hat. Wenn ich das Raster bearbeiten möchte, klicke ich einfach auf die Karte dahinter und klicke dort auf das kleine rote Quadrat. Ich kann die Größe anpassen. Wenn ich keinen Abstand haben will, schaffe ich es einfach so. Ich kann eine Seite verkürzen, wenn ich will, es liegt wirklich an dir und ich kann mit der linken Maustaste auf „Fertig“ klicken, um da rauszukommen. Was ich jetzt machen möchte, ist in dieser Karte, wir haben die Bildmaske und dann haben wir auch einen Div-Block. Der Div-Block, dafür werde ich den Hintergrund weiß machen . Ich werde weiß, klicke auf „Plus“, was großartig ist. Ich kann tippen, ich nenne es Kartenblock. Für die anderen gebe ich ihm den gleichen Stil. Geben Sie erneut die Karte ein, gehen Sie zur vorhandenen Klasse und wenden Sie sie dann an. Im Kartenblock sehen Sie den Text zu weit nach links. Ich kann auf den Kartenblock klicken und ein bisschen Polsterung hinzufügen. Aber du kannst sehen, dass es die Bilder verändern wird. Wie Sie dort sehen können, fügt es rundum alles Polster hinzu. Aber was wir tun wollen, ist, nur die Kopfzeile und den Absatz aufzufüllen. Wir können ein div hinzufügen und diese in dieses Div oder Block legen . Was ich tun kann, gehe ich zu div. Auf der linken Seite ziehe ich die Kopfzeile und den Absatz in dieses Feld. Ich rufe diesen Kartentext an. Dann werde ich auf der linken Seite ein paar Polster anpassen. Jetzt kannst du die Polsterungen dort sehen. Ich mache ungefähr 20 Pixel. Das sieht richtig aus. Ich kann es durchhalten und herausfinden [unhörbar]. Ich werde es einfach sehen. Ich will nicht zu lange dauern. Dann fegen wir. Dann muss ich jetzt nur noch dasselbe für die anderen hier tun . Gehe zum Selektor oben und tippe auf Kartentext, und dort haben wir ihn. Boom, süß. Jetzt sehen diese Karten so aus, wie ich sie entwerfen würde. Wir können ein bisschen Schatten hinzufügen, wenn wir wollen, aber ich lasse ihn für den Moment einfach. Es ist in einem zentrierten Container dort und die Karte ist großartig. Ich füge nur ein bisschen Polsterung hinzu. Lass uns 40 Pixel gehen , um dort etwas Platz zum Atmen zu geben. Schön. Was ich jetzt machen werde, werde ich einen weiteren Abschnitt hinzufügen. Ich ziehe es einfach her. Ich ziehe es unten, stelle sicher, dass es blau und nicht rot ist, wie du siehst. Abschnitte müssen getrennt sein, sie können sich nicht in einer anderen Box befinden usw. In diesem Abschnitt werde ich die gleiche Farbe wie zuvor machen . Ich füge einen Div-Block und nenne ihn den Wrapper. Sie haben den Wrapper dort und wir müssen nur einen Container hinzufügen. Ich hole mir einen Container. Denken Sie daran, dass Sie immer eine Klasse für die Container erstellen können , wenn Sie eine bestimmte Breite wünschen, aber ich werde es einfach so machen. Ich werde auch die Farbe dieses Textes ändern , dies soll nicht schwarz sein. Diese Überschriften sollten h2-Header sein. Mach es schwarz. Ich füge nur einen weiteren Abschnitt hinzu. Control K. Manchmal funktioniert es nicht so, wie Sie es wollten. Ich füge nur einen weiteren Abschnitt hinzu, nur damit ich den Container und den Wrapper sehen kann , den ich habe. Was ich mache, ist ein div hinzuzufügen. Ich könnte auch ein Raster hinzufügen, wenn ich wollte und jeweils eins einlegen. Ich könnte auch eine Spalte hinzufügen. Ich könnte auf „Plus“ klicken , Spalten abrufen und dann ziehen. Ziehen Sie das in den Wrapper, den wir hier haben. Ich drücke „Control K“ und tippe Bild ein. Zieh das her. Dann drücke ich „Control K“, tippe Header ein und ziehe das dann so. Ich kann auch hierher gehen und den Absatz noch einmal ziehen. Ich werde auch alle diese Texte kopieren, einfügen und kopieren. Offensichtlich kann ich eine Liste erstellen und es so machen, aber ich denke, dass dies nur eine schnellere [LACHEN] Art ist , dies zu tun. Noch einmal füge einfach die Stile hinzu, während ich gehe. Jetzt klickst du auf dieses Bild. Ich wähle das Bild aus und dann muss ich das hochladen, das ich wollte. Ich habe dieses Bild von Unsplash, sieht gut aus. Großartig. Ich kann hier die Umschalttaste drücken, um einen Haltepunkt zu machen, Sie können das Ende sehen, nur damit Sie den Text enger machen . Das sieht gut aus. Ich kann Padding hinzufügen, wenn ich möchte, also 20 Pixel, um es mehr am Text auszurichten. Das ist vollkommen in Ordnung. Aber ich denke, es sieht gut aus. Es ist einfach nett zu nennen. Sie können Ihre Abschnitte auch benennen. Offensichtlich heißt es Abschnitt 2, ich kann diese Abschnittsdienste benennen. Ich kann sogar einen Strich machen, manchmal ist es schön, Dash-, Abschnitts-Dash-Dienste hinzuzufügen . Karte dieses hier. Sie können immer zurückgehen und die Abschnitte hinzufügen. Denken Sie daran, dass es andere Teile Ihrer Website mit demselben Stil verändern kann . Stellen Sie also sicher, dass Sie die Dinge von Anfang an so gut wie möglich benennen . Ich gehe zu Container und dann div block, style diesen Wrapper. Dann werden wir einen Header haben. Du siehst es. Sie können auch die verschiedenen Überschriften wählen. Wenn Sie ein globales Tag hinzufügen, wenn ich also mit der linken Maustaste klicke, können Sie sehen, dass das HTML-Tag steht , und wenn es rosa ist, bedeutet das, dass alle Tags mit diesen Einstellungen wie H1, H2, H3 jeweils einen eigenen Stil haben. Es ähnelt dem Hinzufügen einer Klassenbreite, aber dies fügt sie wie ein standardmäßiges globales Tag hinzu. Ich mache einfach gerne einen Kurs, es ist einfach einfacher, den Überblick zu behalten, wie Sie hier sehen können. Wir haben Testimonials Jetzt müssen wir diesen Satz haben, und für diesen werde ich tun, dass ich ihn zu einer Kombo-Klasse mache und ihn einfach Center nenne. Jetzt gehe ich zur Typografie und klicke auf das Center. Es gibt. Jetzt sollte es diesen Text zentrieren, wie Sie dort sehen können. Ganz einfach. Jetzt für diesen Abschnitt muss ich dort ein bisschen Polsterung hinzufügen , nur um es vom anderen Abschnitt damit wir etwas Platz haben. Jetzt besorge ich mir einen Absatz. Entschuldigung, kein Absatz. Wir müssen hier ein Raster hinzufügen. Sehen wir uns das Layout an, schauen Sie, ob sie etwas Ähnliches haben. Sie haben keine Testimonials. Ich könnte wahrscheinlich wieder einen Kartenbereich machen. Aber dafür füge ich ein Raster hinzu. Ich ziehe ein Raster hier in den Wrapper. Auf der rechten Seite füge ich eine weitere Spalte hinzu. Was Sie tun möchten, ist hier auf den kleinen Plus-Button zu klicken und Sie können es auch hier machen. Die Zeilen, ich lösche die Zeile und habe drei Spalten wie diese. Was ich jetzt tun werde, ist Absatz zu gehen und dann haben wir einen kleinen Text dort, damit ich wieder Absatz machen kann, aber ich gehe in die Kopfzeile. Wir können H5 gehen, also alle H5-Überschriften. Ich klicke oben rechts in den Selektor. Alle H5-Einstellungen geben wir ihnen Inter und wir werden genau so extra Licht machen. Dann kann ich den Namen so kopieren und einfach sicherstellen, dass ich ihn hineinziehe, vergewissern Sie sich, dass er im rechten Raster ist. Ich mache einfach einen Div-Block damit ich die Dinge dort hineinziehen kann. Das mache ich in diesem Kreis. Manchmal funktioniert es nicht richtig. Ich ziehe dort hinein und ziehe den Absatz hinein. Jetzt haben wir einen Div-Block. Jetzt ist es immer am besten, zuerst eine Sache zu erstellen. Ich füge unten 100 Polsterungen hinzu. Es ist immer gut, zuerst einen Block zu erstellen und dann können Sie kopieren und einfügen, damit es viel schneller ist. Ich werde die Schrift dort einfach schnell auf die Normalität ändern . Dies wird ein Absatz sein. Stellen Sie sicher, dass es die richtige Namenskonvention hat. Cool. füge es dort ein und da dies zentriert ist, erstelle ich eine Kombo-Klasse damit du dort zwei Klassen sehen kannst. Ich gehe zur Typografie und zentriere das so. Ich gehe auch zu 5 und zentriere das so, boom. Einfach so haben wir ein nettes Element. Was ich hier tun kann, ist, dass ich auch einen Div-Block drücken kann . Dafür füge ich ein Bild hinzu und füge die Sterne hinzu. Es wird besser sein, wenn ich nur die Fünf-Sterne selbst als ein Bild hätte , aber dafür könnte ich einfach C kontrollieren und einfügen. Aber es ist besser, wenn du nur ein Bild hast. Aber jetzt habe ich einen Div-Block mit fünf Bildern der Sterne, wie Sie dort sehen können. Jetzt kann ich es einfach Star als Klasse nennen und dann ein bisschen Polsterung hinzufügen, wie Sie dort sehen können. Vielleicht sechs Pixel. Ich lösche einfach diese anderen und kopiere sie erneut, also hat es die Polsterung dort. Los geht's, und da ist dieser Block, ich nenne es Star Review, und dann werde ich das zentrieren. Ich gehe zu meinem Flexbox-Display. In Layout klicke ich auf Flexbox und dann möchten wir hier auf das Zentrum klicken. Es sollte das an der Mitte ausrichten. Jetzt haben wir unsere Referenzen. Es sieht ziemlich gut aus. Jetzt füge ich hier ein bisschen Polsterung hinzu. Ich hole den Div-Block, ich könnte es Kartenaussagen nennen. Dann kopiere ich dasselbe und füge es ein. Buchstäblich duplizieren wir es einfach so, ganz einfach. Jetzt kopiere ich einfach den ganzen Text hier. Ich habe meine Kundennamen, die ich umbenannt habe. Ich wollte ihren richtigen Namen nicht nennen. Dort haben wir den Testimonial-Bereich. Da sind wir los. Schön. Sieht hübsch aus [unhörbar]. Jetzt fast fertig. Nur ein kleiner Abschnitt mit dem Knopf und der Fußzeile dort. Ich kann zum Navigator gehen. Wenn ich das drücken möchte, wird es angeheftet, so dass es immer da ist, aber ich habe gerne ein unfixiertes damit ich mehr Platz habe, mit dem ich arbeiten kann. Du kannst sehen, ja, so gefällt es mir. Ich füge einen weiteren Abschnitt und ziehe ihn nach unten. Ich mache Abschnitt-CTA, ändere die Farbe. Was ich dann tun kann, ist diesen Header zu kopieren und ihn einfach hier einzufügen. Lassen Sie mich zuerst den Container holen und dann div block. Dann füge ich es darin ein, also ist es im Wrapper. Es ist immer gut sicherzustellen, dass die Kisten, in denen wir alles stapeln , um es so ordentlich und ordentlich wie möglich zu halten . Für diesen Text sollte dies ein H1-Zentrum sein. Da gehst du. Dann möchte ich nur noch diesen Button kopieren, wenn ich will. Wenn ich nun ein Symbol aus diesem Button machen möchte, muss ich nur auf „Symbol erstellen“ klicken. Ich kann auch mit der rechten Maustaste klicken. Es würde mich bitten, hier ein Symbol zu erstellen, wie Sie sehen können. Dann kann ich es Hauptknopf nennen. Erstellen. Jetzt wird es grün. Jetzt dieser Button kann ich ihm Einstellungen geben usw. aber es ist wirklich wirklich nützlich. Jetzt möchte ich zu den Einstellungen gehen, ich kann immer dieselbe Instanz verwenden. Ich kann die Button-Instanz per Drag & Drop ziehen und Sie sehen, dass die Hauptschaltfläche steht. Ich kann immer mit der rechten Maustaste klicken und ich kann auf Instanz aufheben klicken. Dies wird sicherstellen, dass diese Schaltfläche nicht die Hauptbearbeitung ist . Denn wenn ich diesen Button bearbeite, wirkt sich dies auf diesen Button und deshalb möchte ich die Verknüpfung im Grunde aufheben. Ich möchte einen weiteren Div-Block hinzufügen und einfach den Header darin werfen weil Sie diese Dinge zentrieren möchten. Dann klicke ich auf den Flex, klicke auf Vertikal und dann auf Zentrieren. Jetzt wickelt es das Objekt ein und legt es in die Mitte. Es richtet es aus und rechtfertigt es an dem Div-Block, den wir gerade erstellt haben. Wir haben es tatsächlich im Wrapper blockiert. Nennen wir es vorerst Center Align. Machen Sie Ihre Marke hervorstechen. Drücken Sie „Enter“. Jetzt kann ich die Vermietung hier anpassen. Es ist ein bisschen eng. Die Höhen, lass uns 50 gehen. Da sind wir los. Die Buchstabenhöhe, okay, das wird besser sein. Abschnitt CTA, ich füge ein bisschen Polsterung hinzu, also halte ich Alt gedrückt, ziehe heraus. Da haben wir es. Wir haben unsere Seite bereits aufgebaut. Jetzt kann ich für die Schaltfläche auf das Zahnrad klicken, auf eine Seite klicken und sagen wir einfach, es wird zur Kontaktseite gehen und auf neue Registerkarte klicken. Wenn ich jetzt oben links klicke, siehst du eine Vorschau. Jetzt kann ich mir ansehen, wie meine Seite aussehen würde. Es gibt hier ein kleines Problem mit dem Bild. Das muss ich vielleicht reparieren. Es könnte daran liegen, dass mein PNG etwas abseits ist, aber es spielt jedenfalls keine Rolle. Klicken Sie zum Beispiel jetzt auf den Button. Ich kann mit der linken Maustaste darauf klicken und gehe auf die andere Seite. Offensichtlich gibt es nichts auf dieser Seite. In buchstäblich 20, 30 Minuten haben wir diese Seite gebaut. Ich gehe zurück auf meine Homepage und wir können kleine Anpassungen vornehmen. Zum Beispiel dieser Button, und was ich tun kann, ist einen Hover-Status zu machen. Ich gehe zum Selektor oben, klicke auf das Dropdown-Menü und klicke auf Hover. Nun, was ich hier machen möchte, ist zur Farbe zu gehen und ich kann es schwarz oder wie ein dunkelrot machen. Vielleicht möchte ich einfach nur dunkelrot oder so etwas laufen . Wenn ich jetzt auf None klicke, ändere ich die Zustände von Hover. Dies ist also der Hover-Status, und dann gehe ich zurück und klicke auf „Keine“. Wenn ich jetzt auf „Vorschau“ klicke, setze meine Maus, du siehst jetzt, dass sie einen Hover-Status hat, was großartig ist. Es fühlt sich so gut an, wenn du das machst. Jetzt können Sie tun, ist Pressezustände, Sie können fokussiert sein usw., aber ich versuche es einfach zu halten und es so zu belassen. Erstaunlich. Wir haben jetzt unsere Seite gemacht, ich möchte die Portfolio-Seite erstellen. 11. Fußzeile: Ich werde die Fußzeile schnell beenden und dann können wir zur nächsten Seite übergehen. Ich gehe einfach zurück und kopiere diese Links. Wir können es hier sehen. Kopiere diese. Sie können sehen, dass sich die Texte in jeder einzelnen Liste befinden. Sie können sehen, dass es sich um eine Liste handelt, und dann befindet sich in der Liste ein Listenelement. Jeder Text ist im Grunde ein anderer Link. Möglicherweise müssen wir einfach nach Hause tippen, über und Kontakt aufnehmen. Dann löschen wir die anderen Listenelemente, also navigieren wir nach links und lassen diese und dann Ressourcen einfach . Ich kann einfach Tools und Werbegeschenke tippen. Ich gebe euch nur ein paar Ideen einigen Dingen, die du in der Fußzeile haben kannst. Normalerweise sind es nur zusätzliche Links, Leuten helfen , Sie zu finden oder zu kontaktieren, wenn sie verloren gehen. Dann hast du Socials. Nun, es heißt jetzt Meta, also nennen wir es einfach Meta. Instagram, Twitter. Dann hast du diese SMS hier. Jetzt können wir das Bild davon doppelt ändern. Normalerweise schmeiße ich einfach nur das Logo ein, was wirklich cool ist. Vielleicht kannst du das hinzufügen. Dann die Fußzeilenüberschrift. Ich muss das in Inter ändern, und wir werden fett werden. Das ist in Ordnung. Dann dieser Fußzeilen-Link. Dasselbe, ich werde einfach intern gehen, normal. Dann pumpt es bis zu 16 auf. Ich denke, das ist echt cool. Die untere Seite. Ich kann diesen Text kopieren, kopieren und einfügen, so. Wir möchten sicherstellen, dass es ähnlich aussieht wie wir es entworfen haben. Ich bin hier in der Fußzeile und ich habe verschiedene Div-Blöcke. Wenn ich einen weiteren Div-Block kopiere und einfüge, kannst du andere Links sehen. Ich ziehe die Textblöcke darin und lösche einfach die Listenelemente, und die Kopfzeile kann gelöscht werden. Sie können das sehen, und ich drücke einfach die Eingabetaste, und es sollte es so machen. Dann nenne ich es in diesem Div-Block einfach ein Copyright als Klasse, füge ein bisschen Padding hinzu, um es zu Fall zu bringen, wenn ich will, so. Sie können sehen, dass es sich dort irgendwie ausrichtet. Ich benutze nur mein Auge, um es grob genau zu machen. Ich denke, 40 Pixel reichen aus. Dann ändere einfach die Schrift, 60 normal. Da sind wir los. Ich kann das Logo verknüpfen, wenn wir wollen , aber offensichtlich ändert es die Größe und alles. Aber ich denke, das sieht gut aus. Im Grunde das Gleiche. Dort haben wir unsere Hauptseite, sieht gut aus. Nun, ein paar Dinge, die ich machen möchte. Ich möchte die Fußzeile auswählen und möchte mit der rechten Maustaste klicken und sie zu einem Symbol machen. Also erstelle ich ein Symbol und nenne es eine Fußzeile. Wenn wir es jetzt auf der nächsten Seite verwenden, wird es das Gleiche sein. Dann mache ich auch dieses klebrige Navigationsgerät. Erstellen Sie ein Symbol, und ich nenne es einfach nav. Jetzt sind wir bereit zu gehen. Was ich tun werde, ist, dass ich diese Seite für die Arbeitsseite duplizieren kann, oder ich gehe einfach auf die Arbeitsseite. 12. Projektseite: Fangen wir an, das auszubauen. Ich gehe links zu meinem Tab und du siehst, dass ich ein neues Symbol habe, das Nav. Dann kann ich auch die Fußzeile dorthin ziehen. Mit der Fußzeile und dem Nav ich dann drücke ich dann „Control K“, Abschnitt Suchen, und bringe diesen Abschnitt einfach so dorthin und ich fange an, die sekundäre Seite auszubauen, die sollte sei ziemlich einfach. Wir werden hier und dann innerhalb dieses Div-Blocks einen Container hinzufügen . Dann nennen wir den Div-Block, den Wrapper. Dann fügen wir eine Überschrift hinzu, die ein H1 sein wird. Mach das schwarz. Mach es so. Ich rufe diesen Wrapper auf und füge dann eine weitere Klasse namens work hinzu. Ich füge oben und unten etwas Polsterung hinzu , es hat 100 Pixel. Ich füge auch nur einen weiteren Abschnitt hinzu. Darunter ändere ich für den nächsten Teil einfach die Farbe des nächsten Abschnitts. Dafür und dann haben wir auch den Text. Was ich dafür tun kann, kann ich ein Raster hinzufügen. Ich füge nur ein Raster hinzu und wir brauchen keine Zeile, also klicke ich auf den kleinen Bin. Ich werde das benutzen, ich ziehe es auf 1.75. Ich klicke nach unten und ziehe die Überschrift in das Feld auf der linken Seite. Jetzt auf der anderen Box kann ich auf Absatz gehen und es befindet sich jetzt in diesem Raster. Wir haben im Grunde zwei Spalten in diesem Raster und das Coole an einem Raster ist, dass es reaktionsschnell ist. Wir müssen nur sicherstellen, dass es vertikal ist und übereinander stapelt. Aber es verwendet im Grunde Flexbox, was großartig ist. Dann kann ich einfach hier reinkommen, den Text kopieren und einfügen. Ich muss diesen Typ auswählen und du kannst ihn auswählen. Sie können sehen, dass Sie hier einige Optionen haben, damit ich Links einfügen kann. Ich kann tatsächlich mit der Spanne umwickeln. Wenn ich innerhalb dieses Absatzes eine benutzerdefinierte Klasse erstellen muss , kann ich das tun. Wenn ich darauf klicke und dann nenne ich es ist H3, H2 Header, sollte es funktionieren. Ich füge nur den Header hinzu, wir können den H4-Header gehen. Ich ziehe es einfach da hinein. Ich mache es einfach zu einem Div, damit wir die Dinge in diese Box werfen können. Jetzt all diese Dinge in einer eigenen Box und dann kann ich Rolle eingeben, damit ich es hier löschen kann. Tippen Sie einfach Bindestriche ein. Ich kann die Kopfzeile kopieren, ich ziehe ihn unten. Wir fügen einen Absatz hinzu und fügen ihn dann einfach so ein. Dann das Jahr, das gleiche, kopieren Sie Einfügen, ziehen Sie es darunter. Wir haben ein Jahr und setzen einen Absatz, stellen Sie 2020 so ein. Ich muss dies nur mit der Absatzklasse stylen. Absatz. Einfach so. Dann boom, wir haben so etwas. Wir gehen einfach zum Template-Design, ausgezeichnet. Jetzt haben wir unsere Seite hier und sehen gut aus. Es muss nicht genau sein. Wir können es immer einfach so einfach machen. Cool, also was ich jetzt machen werde, füge ich die Bilder hinzu. Ich kann tatsächlich ein anderes Raster hinzufügen, wenn ich wollte halte es einfach, ich werde die Zeilen los und werde die Spalte los. Jetzt habe ich eine Kolumne. Ich sorge nur dafür , dass sich das Raster im Container befindet. Wir sorgen dafür, dass es zentriert ist. Ich könnte es in den Wrapper legen, aber der Container zentriert es bereits. Dann alles was ich tun muss, kann ich das Grid 3 nennen und wir können es einfach arbeiten nennen. Jetzt gehe ich und wähle ein Bild im Medienbereich aus, und ich werde es eintragen. Wähle das Bild und jetzt kann ich im Grunde damit anfangen, es einzufügen. Was wir tun möchten, können Sie sehen, wie dieser Abschnitt überlappt. Ich werde nur die Polsterung dieses Rasters zuerst so anpassen und den oberen Abschnitt, ich kann den Rand aufrufen. Ich kann auch die Polsterung anpassen. Zuerst kopiere ich einfach die Bilder und füge sie ein und dann kann ich einfach durchgehen, es dupliziert nur den Bildblock und dann kann ich einfach durchgehen und die Bilder ändern. Ich doppelklicke, ersetze, ersetze und jetzt kannst du sehen, dass wir diese Bilder einfach so haben, was wir wollten. Um die Abschnitte zu überlappen, müssen wir nur zum Raster gehen und ich könnte es auf dem Container machen. Aber wenn du das machst, wird es alle Container mit diesem Ding ändern. Aber ich gehe zum Raster und ändere die Polsterung und ziehe es nach unten. Ich klicke und ziehe einfach mit der linken Maustaste, um es minus zu machen. Lass uns minus 135 gehen. Ich füge dem oberen Bereich noch ein paar Polsterungen hinzu. Gehen wir 100 Pixel und dann gehen wir zurück zum Raster und bekommen minus wie 150, wie Sie auf der rechten Seite sehen können. Jetzt können Sie sehen, dass wir diesen überlappenden Effekt haben. Wenn wir jetzt auf das Handy gehen, können Sie sehen, dass es sich immer noch überlappt, was cool ist. Schön, zu einfach. werden wir nur noch den letzten Schliff hinzufügen. Ich füge hier unten ein Div hinzu und füge dann einen Header für das nächste Projekt hinzu. Ich nenne es einfach noch einmal, Wrapper. Nächstes Projekt kann dies eine H1-Überschrift sein und was ich dann tun werde ist, dass ich diesen Wrapper als nächstes aufrufe, nenne ihn einfach als nächstes Wrapper. Ich denke, es ist innerhalb des Rasters, also muss ich es nur für eine Sekunde außerhalb des Rasters ziehen. Ich mache einfach einen weiteren Behälter und lege dann die Wrapper in den Behälter. Stellen Sie sicher, dass ich es da rausziehe, lasse es hier rein und stellen Sie sicher, dass es sich im Abschnitt befindet. Sie können die Linien sehen, es sagt Ihnen, wo sie sich befinden, also möchte ich sie einfach darüber ziehen. Normalerweise ziehe ich einfach so runter. Jetzt ist es in diesem Abschnitt. Ich füge diesem Abschnitt etwas Polsterung hinzu. Lass uns 135 Pixel gehen und in diesem Wrapper als nächstes habe ich das und dann brauche ich ein Bild. Ich wähle das Bild aus, ich wähle den Pfeil aus. Um nun den Pfeil daneben zu bekommen, gehe ich zum Wrapper, ich gehe zu Layout klicke auf die Flexbox und du kannst sehen, dass sie jetzt auf Horizontal gewechselt ist. Jetzt kann ich ihm auf diesem Bild eine Pfeilklasse geben und dann etwas Polsterung wie diese hinzufügen. Der Pfeil ist ein bisschen zu groß, also werde ich ihn kleiner machen. Was ich tun werde, ist, dass ich zum Hoch gehe und einfach den Prozentsatz ändere. Sie können sehen, ob Sie hier auf die kleine Schaltfläche klicken, können Sie die Pixel ändern. PX ist Pixel, du hast Prozentsatz, du hast EM, du hast CH, was du hast VW, das ist Ansichtsbreite, VH, die Ansichtshöhe ist, und dann hast du Auto. Normalerweise verwende ich nur Prozentsätze, Pixel und manchmal verwende ich auch die Ansichtshöhe. Aber dafür verwende ich Prozentsatz. Es ist in diesem Wrapper, dieser Wrapper geht ganz rüber. Im Grunde genommen beträgt die Breite im Moment 39 Prozent der Gesamtgröße oder Breite des tatsächlichen Wrappers. Wenn ich Control Z drücke, ändere ich das einfach auf 20 Prozent für die Breite, wir werden 25 Prozent gehen. Dann füge ich etwas Polsterung hinzu, nur um das durchzubringen. Ich lasse auch die Polsterung fallen und da haben wir es, wir haben den Pfeil dort etwas mehr wie die Größe von hier aus ansieht , was wirklich cool, schön ist. Jetzt, da diese Seite funktioniert, gehe ich jetzt einfach zurück zu meinen Seiten, gehe auf die Homepage. Was wir jetzt tun wollen, ist, dass wir diese Karte mit der anderen Seite verknüpfen möchten. Was wir tun müssen, ist, dass wir diesen Kartenblock haben und die Kartenbildmaske haben. Was wir tun müssen, ist, dass Sie einen Linkblock hinzufügen müssen. Ich drücke die Plus-Taste und gehe runter zum Linkblock. Jetzt ist dies im Grunde nur eine Box mit einem Link, damit wir sicherstellen können, dass die Karte, auf die wir klicken, verknüpft wird. Ich bringe einfach den Linkblock in den Kartenblock. Ich bringe die Kartenbildmaske dort in den Linkblock. Ich werde sicherstellen, dass die Breite bei 100 Prozent liegt, damit Sie das sehen können. Jetzt haben wir den Kartenblock, wir haben einen Linkblock, und innerhalb des Linkblocks haben wir die Kartenbildmaske mit den Bildern. Ich klicke mit der linken Maustaste auf den Linkblock und du kannst hier auf das kleine Zahnrad klicken, oder du kannst rechts auf das rechte Zahnrad gehen. Wie Sie sehen können, mache ich es gerne auf der rechten Seite, also klicke ich auf das Zahnrad, klicke auf die Seite und gehe zum Arbeitsbereich. Wenn ich zu einem neuen Tab gehen möchte, kann ich auf diese Schaltfläche klicken, aber wenn nicht, werde ich ihn verlassen. Ich gehe in die obere linke Ecke und schalte die Vorschau um . Wenn ich jetzt über die Maus gehe, klicke ich mit der linken Maustaste und bringe mich zur Webseite, die wir gerade erstellt haben, wie Sie dort sehen können. Was wäre, wenn wir einen Mauszeiger über das Bild hinzufügen wollten? Ich gehe hier zum Linkblock, ich scrolle ganz nach unten. Was wir jetzt tun werden, ist, dass wir die Deckkraft ändern wollen . Ich klicke oben rechts auf den Selektor, klicke auf den Hover-Button und was ich tun werde , ist, dass ich die Deckkraft verringern kann, oder ich kann eine Farbe darüber hinzufügen. Lass uns einen Filter hinzufügen. Ich kann zum Beispiel Sättigung machen. Wenn ich schwarz oder weiß gehen wollte, senke die Sättigung auf null Prozent. Wenn ich jetzt den Mauszeiger darüber fahre, wird es schwarz und weiß, wie du siehst. Zum Beispiel klicke ich auf „Vorschau“, ziehe mit der Maus darüber und jetzt kannst du sehen, dass sich die Maus ändert. Ich klicke drauf, boom, einfach so. Sie können dazu führen, dass es in eine andere Farbe wechselt. Sie können es skalieren lassen, wenn Sie es wollen. Sie können jeden dieser Effekte oder Farben usw. hinzufügen. Es wird buchstäblich die Art und Weise verändern, wie es aussieht. Wenn ich zum Schweben gehe, wenn ich auch gedrückt gehe, kann ich das löschen. dem willen, ändern wir einfach die Skala. Jetzt lass uns zurückgehen. Wenn ich jetzt zur Vorschau gehe und meine Maus ziehe und mit der linken Maustaste klicke, kannst du sehen, dass es skaliert wird. Siehst du das? Wenn ich loslasse, geht es los. Ziemlich cool, du kannst wie kleine Interaktionen und Kleinigkeiten machen , aber wir haben unsere Website gemacht und jetzt zeige ich Ihnen, wie Sie in letzter Minute etwas SEO für die Website machen können. 13. Gestalte die Website ansprechbar: Was ich jetzt mache, ist Ihnen zu zeigen, wie Sie die Website reaktionsschnell machen können. Wir werden vorerst nur die Homepage benutzen. Was ich tun möchte, ist zum oberen Breakpoint zu gehen und auf das Tablet zu klicken. Wie Sie sehen können, fangen wir an, einige Dinge zu sehen, die nicht funktionieren. Denken Sie daran, jede Änderung, die wir auf dem Desktop vornehmen , wirkt sich auf die niedrigeren aus. Welche Änderung Sie auf dem Handy vornehmen, wirkt sich jedoch nicht auf den Desktop oder das iPad aus. Es kaskadiert nach unten. Wenn ich Änderungen am iPad vornehme, sollte sich dies auf die niedrigeren auswirken, und es hat keinen Einfluss auf den Desktop. Wenn ich hier Änderungen vornehme, die Desktop-Ansicht nicht betroffen. Ich klicke darauf. Was ich tatsächlich tun kann, ist, dass ich den Text verkleinern kann, oder ich kann das Hintergrundbild unsichtbar machen, um es fit zu machen. Zum Beispiel klicke ich auf „Abschnitt“ und gehe dann zu Hintergründen und schalte den Augapfel aus. Jetzt können Sie sehen, dass es ausgeschaltet wird. Wenn ich zurück auf den Desktop gehe, kannst du sehen, dass mein Bild von mir da ist, und es ist völlig in Ordnung. Jetzt geh zurück. Es ist aus. Wenn ich auf den Desktop gehe, können wir sehen, dass das Bild ebenfalls verschwunden ist , was super einfach ist. Ich kann die SMS dort lassen. Es ist lesbar. Es funktioniert. Alles passt hier rein, denn das ist wie eine nette Karte hier, die funktioniert. Damit wir dies verschieben können, anstatt die Polsterung und den Rand zu verschieben, weil er in einer bestimmten Box in einer Spalte gesetzt ist, kann ich tatsächlich nach unten gehen und wir wollen zu unserer Positionierung gehen. Es ist gerade auf der Statik. Was ich tun möchte, ist auf „Relativ“ zu klicken. Relativ lässt es basierend auf dem Abschnitt funktionieren, in dem es sich befindet. Was ich eigentlich tun kann, ist, dass ich hier mit der Breite herumspielen kann . Ich kann die Positionierung ziehen und es wird sie dort nach links ziehen, was cool ist. Für den Desktop können Sie sehen, dass nichts passiert. Wenn ich auf das Handy komme und scrolle, sieht man das offensichtlich, dass es wirklich groß ist. Ich muss das vielleicht kleiner machen. Du siehst, ich kann es irgendwann so zurückbringen. Ich gehe zurück zur iPad-Ansicht. relative Positionierung ermöglicht es uns, dieses Bild zu steuern und es außerhalb eines Kastens zu zerlegen und es basierend auf dem Abschnitt zu bringen . Wir können uns Testimonials ansehen. Man sieht, dass der letzte abgeschnitten ist. Was ich tun möchte, ist, dass ich das Raster auswähle. Was wir jetzt tun wollen, ist, dass wir das Raster in zwei Zeilen ändern möchten. Ich klicke auf „Raster bearbeiten“. Jetzt gehe ich auf die rechte Seite, gehe zu diesem kleinen roten Punkt Plus und klicke auf „Plus“. Jetzt lösche ich diese Zeile jetzt einfach , damit ich mit der rechten Maustaste klicken und auf „Spalte löschen“ klicken kann. Dann kann ich mit der rechten Maustaste hier klicken und diese Spalte hier löschen , wie Sie sehen können. Ich werde das einfach mit dieser kleinen Toolbox verkleinern . Ich drücke „Fertig“. Jetzt stehen die Testimonials direkt im Mittelpunkt. Dieses Testimonial muss auch hier zentriert werden. Ich stelle die Polsterung hier ein und pumpe es so in der Mitte. Ich werde es einfach sehen. Cool, einfach. Das sieht gut aus. Dann der Button hier, wir haben den Text und den Button, der ganz vertikal zu sein scheint. Ich bekomme nur den Knopf und dann passe ich einfach die Ränder dort an, um das zu beheben. Schön. Das Foto ist nicht so schlimm. Ich glaube, es ist in Ordnung. Ich könnte einfach die Größe des Textes hier fallen lassen , was großartig ist. Jetzt ist die Textgröße auf dem Desktop immer noch die gleiche wie ursprünglich entworfen wurde. Die iPad-Ansicht wird ein bisschen kleiner sein. Schön. Das sieht gut aus. Das sieht gut aus. Ich denke, ich muss diesem Abschnitt tatsächlich ein bisschen mehr Polsterung hinzufügen. Schön. Dies ist der Querformat. Normalerweise berühre ich das nicht, weil Leute offensichtlich keine solchen Videos ansehen, es sei denn, sie sind eine bestimmte Art von Person. Aber normalerweise überspringe ich das einfach und gehe einfach direkt zum Handy. Mobil ist diese Ansicht. Jetzt siehst du, dass wir das Menü haben. Es ist bereits aktiviert. Sie können dieses Menü natürlich hier anpassen. Ich kann die Farben wechseln. Ich kann die Links ändern. Ich kann das Telefon wechseln usw. Aber weil wir das bereits hatten, zum Beispiel, wenn ich einen Schwebeweg habe, werde ich die Farbe ändern und wir werden wie diese rote Farbe gehen. Wenn ich jetzt mit der Maus darüber fahre, siehst du, dass es eine rote Auswahl gibt. Wenn jemand am Telefon ist, klickt und scrollt sein Daumen offensichtlich klickt und scrollt sein Daumen , damit er das nicht sehen kann. Aber wenn sie irgendwie im Browser sind und klein sind, wird es so aussehen. Ich denke, das ist gut. Was ich dafür tun werde, ist, zu meiner Typografie zu gehen und ich werde die Größe deutlich verringern. Ich werde die Höhe ändern, die der [unhörbare] oder den Abstand zwischen den Zeilen ist. Wird vielleicht etwa 30 gehen. Ändere dies auf 25. Ich breche das auch so auf. Jetzt gehe ich zum Wrapper und gehe zur Polsterung auf der linken Seite und bringe das einfach so rein. Ich drücke hier „Shift-Enter“, um einen Seitenumbruch zu machen. Was ich tatsächlich tun kann, ist dies auch zu verringern , wenn ich wollte, die Polsterung auf der Unterseite. Die Arbeit war schon in einer netten kleinen Kartengruppe. Das ist alles schon ansprechbar. Das hier, ich bringe die Polsterung mit. Was ich tatsächlich tun kann, ist, dass ich die Schriftgröße erhöhen oder verringern kann . Ich möchte nur „Enter“ drücken und wir werden sehen, was dort passiert. Ich denke, das sieht gut aus für dieses Bild. Ich denke, das ist in Ordnung. Ich ändere es einfach in statisch. Es sollte behoben sein. Mal sehen wir hier. Dann die mobile Ansicht. Einfach. Ich denke, das ist in Ordnung. Die Polsterung. Die Bilder. Ich weiß nicht, was damit los ist, es wird immer größer. Jetzt haben wir auch diese, die Testimonials. [NOISE] Es ist in einem Raster. Ich werde nur sicherstellen, dass alles auch zentriert ist. Schnappen Sie sich die Karte und ziehen Sie dann die Polsterung so. Jetzt haben Sie eine Polsterung an den Seiten, wodurch es passt. Das Testimonial, passen Sie einfach die Polsterung dort an, passt so. Schön. Zu einfach. Passen Sie einfach die Polsterung des Div-Blocks an, in dem er sich befindet, wie Sie dort sehen können. Die Fußzeile ist schon gut und startklar. So machen Sie Ihre Website im Grunde reaktionsschnell. Wenn ich jetzt auf „Vorschau“ klicke und meinen Browser einfach kleiner mache. Sie können sehen, dass wenn ich meinen Browser jetzt kleiner mache, er anfängt zu reagieren. Da sind wir los. Offensichtlich ist dies eine bestimmte Größe. Manchmal sieht Ihre Website nicht in jeder einzelnen Größe perfekt aus , aber in den meisten Größen sieht sie gut aus. Du kannst es sehen. Also wird jemand [unhörbar] sehen, wie es aussieht. Aus diesem Grund ist es großartig, Gitter und Flexboxen zu verwenden da es einfach ist, Dinge zu stapeln und es einfach ist, sie zu reagieren. 14. Grundlegende SEO: [MUSIK] Ich zeige dir nur, wie man ein paar grundlegende SEO macht. Sobald Sie Ihre Website fertiggestellt haben und alles, was Sie benötigen, angepasst haben gehen Sie nur zum Seitenbereich oben links. Gehen Sie zu den Hauptseiten, auf denen sich der Inhalt befindet, und klicken Sie auf den kleinen Anruf-Button. Es führt Sie zu den Homepage-Einstellungen hier. Sobald Sie einen Lageplan hinzugefügt haben, können Sie eine bestimmte Lernseite kennwortgeschützt machen. Vielleicht haben Sie einen Privatkunden oder eine Zielgruppe, der Sie ihnen eine bestimmte Sache senden möchten , dann benötigen wir dort ein Passwort. Aber das war's. Dann gehen wir runter und wir haben die SEO-Einstellungen. Dies ist eine Vorschau darauf, wie es auf der Google-Suche aussehen wird. Wenn ich zum Beispiel zu Google gehe und meine Website eintippe, kannst du Jeremy Mura- Home sehen. Das heißt hier und das ist der Titel, den ich dort habe. Wenn Sie verschiedene Websites haben, können Sie Google sehen, es hat die Unterseiten, die angezeigt werden. Was wir tun müssen, ist das Titel-Tag hinzuzufügen. Wann immer Sie dies tun, möchten Sie sicherstellen, dass Sie Schlüsselwörter verwenden , die mit Ihrer Nische, Ihrem Standort und den relevanten Dingen zusammenhängen. Grundsätzlich kann ich Brand Identity Designer in Western Sydney-Jeremy Mura sagen . Ich benutze Sydney, spezifisch für Western Sydney. Ich verwende Brand Identity Designer oder ich könnte sagen Logo-Designer, das könnte funktionieren. Versuchen Sie, Ihre Keywords herauszufinden denen die Leute tatsächlich suchen. Dann haben wir die Meta-Beschreibung. Diese Meta-Beschreibung ist im Grunde nur der zusätzliche Text. Sie können den Text hier unten sehen. Man kann sagen, Jeremy hilft kleinen Unternehmen dabei, eine strategische Marke zu schaffen , um ihr Geschäft online auszubauen. Das ist nur eine Zeile. Normalerweise möchten Sie versuchen, zwei Zeilen zu haben, aber es kann ziemlich kurz sein. Erstellen Sie eine strategische Marke, um ihr Geschäft online auszubauen und ein Publikum aufzubauen, das ihre Produkte liebt. Cool. Ich habe kleine Unternehmen da reingesteckt, aber strategisch. Wahrscheinlich ist es gut, wenn ich eine strategische Markenidentität sage , um ihr Geschäft online auszubauen und ein Publikum aufzubauen, das ihre Produkte liebt. Cool. Man kann die Vorschau dort sehen, wie es auftaucht; das ist ziemlich cool. Großartig. Jetzt haben Sie die Einstellungen für den Open Graph. Normalerweise mache ich das nicht wirklich, weil ich die Dinge auf meiner Website nicht an Twitter teile. Wenn ich auf Instagram oder YouTube bin, teile ich einfach direkt mit meinen anderen sozialen Seiten. Wenn du Blogs und so hast, dann ist das nützlich. Aber noch einmal, Open Graph. Es sagt dir, was du von deiner Website aus auf Facebook, Pinterest, Google teilst . Sie können den Titel, die Beschreibung auch anpassen . Sie können hier eine URL haben. kannst du machen. Aber normalerweise lasse ich das aus. Sie können sehen, dass Google hier ein Konto hat und zu Google Classroom gehen und auch zu Google Drive weiterfahren. Wenn Sie nicht möchten, dass bestimmte Websites angezeigt werden, können Sie einfach auf „Diese Seite aus den Suchergebnissen der Website ausschließen“ klicken . bedeutet im Grunde genommen, dass es es im Grunde vor den Suchbots verbirgt , die diese Seite durchsuchen. Aber wenn Sie es aktivieren möchten, können Sie sehen, dass das, was es als Titel-Tag angezeigt wird, ich kann es genauso wie die Beschreibung aus- oder einschalten . Dann kannst du auch ein Bild haben , aber das ist völlig in Ordnung. Dann hast du auch benutzerdefinierten Code. Normalerweise überlasse ich das, ich fass das nicht an. Im Grunde fügst du das SEO so hinzu. Das musst du für jede einzelne Website tun. Eine letzte Sache, wenn es auch um SEO geht, offensichtlich mit CLI, Titeln mit relevanten Schlüsselwörtern und ähnlichem. Sie können aber auch zu Ihren Bildern gehen. Ich speichere nur Änderungen. Ich gehe zu meinen Bildern. Zum Beispiel gehe ich hier zu diesem Bild. Klicken Sie auf den Anruf. Sie können unten sehen, dass es Alt-Text gibt. Alt Text ist HTML-Texte, die während des Ladens der Website angezeigt werden. Wenn die Website das Bild aus irgendeinem Grund, langsamem Internet usw. nicht laden kann, müssen Sie hier beschreibend sein. Ich sage Image-Person, die nach Haltungsdesign geht. Ich bin beschreibend und erkläre, was die Website ist. Setzen Sie einen vollen Halt. Sie können auch dekorativ verwenden, keine Bedeutung vermitteln und benötigen keinen Alt-Text. Wenn es sich nur um ein Bild wie eine Illustration handelt, klicken Sie auf „Dekorativ“ oder auf ein Symbol. Aber wenn es ein bisschen Beschreibung hat, können Sie es wieder hinzufügen. Offensichtlich bin ich zurückgegangen und es ist jetzt weg. Aber das ist Alt Text, wenn es um SEO geht. Die Website teilt Ihnen normalerweise mit, ob Sie sie anpassen müssen. Wenn Sie hierher kommen, werden Sie normalerweise Dinge sagen, die Sie für die Website anpassen müssen. Abgesehen davon ist die einzige andere Sache, sich bei Google Analytics anzumelden. Wenn ich mein Konto überprüfe, melde ich mich hier einfach schnell an. Sie können hier sehen, dass ich mir einige Details auf meiner Website anschaue. Zweihundert Benutzer, 230 Sitzungen, Absprungrate beträgt 66 Prozent. Dauer der Sitzung. Wie lange ist jemand auf meiner Seite? Ist für eine Minute. Ich kann herausfinden, was direkt ist, was von Social kommt usw. Was ziemlich cool ist. Empfehlungen, verschiedene Websites, YouTube, Webflow. Das ist großartig. Ich kann nach Land schauen, was auch großartig ist. Es gibt mir nur eine ganze Reihe von Details, damit ich sehen kann welche Teile meiner Website am besten abschneiden. Die Homepage hat die meisten Ansichten, der Shop hat die zweithäufigsten Ansichten. Dann ist mein kostenloser Design-Guide der nächste und dann ist die Mura Academy die nächste. Ich kann sehen, kann ich meine Website verbessern? Kann ich die Conversion verbessern usw.? Es ist auch gut, auf Desktop und Handy zu achten. Viele Leute schauen vom Desktop aus zu, etwa 75 Prozent. Mobile liegt derzeit bei 23 Prozent, was cool ist. Richten Sie Google Analytics ein und es wird Ihnen wirklich helfen, die Website zu verwalten und die SEO zu verbessern. Eine letzte Sache ist Google My Business und Sie erhalten eine Website, die auftaucht, auf die Sie klicken möchten. So erhalten Sie eine Seite bei Google. Du kannst dich anmelden. Ich habe bereits einen, damit ich auf „Jetzt verwalten“ klicken kann. Mal sehen, ob es meine Seite hochlädt. Schön. Das ist eine andere gute Sache für SEO. Sie tauchen auf, wenn Leute in der Suchmaschine suchen. Mein Zuhause, ich kann hier die Ansichten sehen , die die Aufführung genannt werden. Ich kann meine Stunden aktualisieren. Ich kann mir meine Bewertungen ansehen. Wenn ich auf „Bewertungen verwalten“ klicke, kannst du alle meine Bewertungen wie diese sehen. Wenn ich jetzt sehr schnell zu Google gehe und Jeremy Mura-Designs eintippe , kannst du sehen, boomen, es erscheint einfach direkt bei Google. Sie können sehen, dass es zertifiziert ist. Es sagt mir, wie viele Aufrufe, ich habe meine Bewertungen auch auf der rechten Seite und es hat auch alle Details. Ich empfehle dies auch für SEO-Zwecke zu tun. Es wird das verstärken. können Sie die Dinge von hier aus verwalten, aber sobald Sie alles aktualisiert und Ihre Website erstellt haben, wird es den Leuten leichter machen, nach Ihnen zu suchen und Sie zu finden. Das sind meine grundlegenden SEO-Tipps. 15. Einbetten von Calendly und E-Mail-Formularen: [MUSIK] Jetzt zeige ich dir, wie man HTML einbetten kann. Vielleicht haben Sie ein Mailchimp-Formular , das Sie dort einlegen möchten, oder vielleicht möchten Sie Ihren Terminplan oder Kalender in etwa so etwas festlegen. Ich zeige dir, wie man das benutzt. Ich habe mein einfaches Layout. Ich habe gerade den Container, einen Wrapper und dann eine Div-Box, und ich nannte es Calendly. Was ich mache, ist zum Plus-Button zu gehen, nach unten zu scrollen und zur Einbettung zu gehen. Ich ziehe das per Drag & Drop in die Box. Es wird dich nach benutzerdefiniertem Code fragen. Was ich tun werde, ist zu meinem Calendly zu gehen, egal welche Seite Sie verwenden. Ich klicke auf „Cog“ und klicke auf „Zur Website hinzufügen“. Was ich tatsächlich tun kann, ist es zu einem Popup-Text oder einer Inline-Einbettung zu machen. Für diese Situation verwende ich das Inline-Einbetten und klicke auf „Weiter“. Was passieren wird, wird hier diesen Code erzeugen, wie Sie sehen können, was im Grunde HTML ist. Was wir tun werden, ist „Control C“ oder wir klicken auf den kleinen Button „Code kopieren“. Ich füge es in dieses Feld und drücke dann auf „Speichern und schließen“. Immer wenn Sie eine HTML-Einbettung durchführen, wird es nicht live angezeigt. Selbst wenn Sie es in der Vorschau anzeigen, wird es nicht angezeigt. Es wird nur angezeigt, wenn Sie die Website tatsächlich veröffentlichen. Ich gehe in die obere Ecke und dann werde ich veröffentlichen. Offensichtlich habe ich dafür keine Domain eingerichtet, weil es nur ein Build ist , den wir jetzt für den Kurs machen, aber ich kann auf dem webflow.io veröffentlichen. Ich klicke auf „Veröffentlichen“. Sobald das erledigt ist, wird es veröffentlicht sagen. Großartig. Erfolgreich. kann ich einfach so mit der linken Maustaste auf diesen kleinen Pfeil klicken , und er bringt mich zur eigentlichen Website mit der webflow.io-Website. Ich kann nach unten scrollen, und es hat tatsächlich mein eingebettetes Calendly-Formular , in dem Leute hereinkommen und einen Kurs buchen können. Sie kommen hierher, vielleicht möchten sie eine Beratung buchen, sie können hier klicken und sie werden einfach so in den Kalender bringen. Was ist, wenn ich ein E-Mail-Formular hinzufügen möchte? Ich gehe zu meinen E-Mails und klicke auf eines meiner Formulare, damit du sehen kannst, dass ich meinen Leitfaden zur Markenidentität habe. Ich kann auf diese drei Punkte klicken, und was ich tatsächlich tun kann, ist einbetten. Es sollte mir einen Code geben, damit ich den Kopfzeilencode sehen kann . Was ich tatsächlich tun werde, ist das in den Header-Code einzufügen, und dann ist dies der Inline-Code für das Einbetten. Ich kopiere das. Ich doppelklicke und füge es hier ein und klicke auf „Speichern“ und schließe. Wir sind immer noch im Bereich Calendly, aber ich tausche es aus. Dann drücke ich für diesen Code hier „Kopieren“. Grundsätzlich muss es eine Nachricht an den Server von Flodesk senden , damit es die Informationen von dort abrufen kann. Was ich tatsächlich tun kann, klicke auf die Seite „Kontakt“, scrolle ganz nach unten und du kannst sehen, dass ich in den Kopfcode einfügen kann. Dies funktioniert nur für diese bestimmte Seite, aber wenn Sie es in den tatsächlichen Back-End-Einstellungen in den Kopfcode eingeben , funktioniert es für jede Seite. Ich lege es dort hin. Ich klicke auf „Speichern“, klicke dann auf „Veröffentlichen“ und wir werden sehen, was passiert. Hoffentlich sollte es meine kleine Form haben. Aber im Grunde geht es so, wenn Sie ein E-Mail-Formular erstellen. Genau so kannst du sehen, wir haben unser Formular. Ich kann hier reingehen und meinen Namen und meine E-Mail-Adresse eingeben, und es wird eine E-Mail gesendet, und das bekomme ich und dann kann ich auf „Herunterladen“ klicken, wie Sie dort sehen können. Offensichtlich hat es einen schwarzen Hintergrund , denn das ist das Design, das ich für dieses Formular entworfen habe. Wenn ich das Format bearbeiten möchte, muss ich zurückgehen und es hier ändern. Welche Markenfarben Sie auch immer auf Ihrer Website verwenden, stellen Sie sicher, dass es dieselbe Hintergrundfarbe damit es so aussieht, als würde sie sich mischen. 16. Einfache Interaktionen: Jetzt zeige ich dir, wie man scharfe Interaktionen macht. Ich werde es sehr einfach halten. Ich bin vielleicht weiter fortgeschritten, vielleicht später auf der Strecke, wenn ich den Kurs aktualisiere. Aber dafür denke ich sehr einfach. Jetzt wähle ich den Header oder das Objekt oder den Boden aus, was auch immer es ist, die Sache, die ich zuerst animiert haben möchte. Ich wähle den „H1-Header“ aus. Es hat den Stil der H1-Überschrift, was großartig ist. Ich gehe in die obere rechte Ecke klicke auf den kleinen Thunderbolt. Es wird mich zu den Interaktionen führen. Was ich tun möchte, ist, anstatt einen Element-Trigger zu machen, möchte ich einen Seitenauslöser machen. Wenn die Seite geladen wird, möchte ich, dass der Text kommt und verblasst. Ich klicke hier auf den kleinen Plus-Button und stelle fest, wann die Interaktion aktiviert werden soll. Möchte ich, dass es beim Laden der Seite oder beim Scrollen der Seite aktiviert wird? Ich werde die Seite laden. Was ich mache, ist zur Aktion zu gehen und ich wähle „Animation starten“. Es sagt mir, wann die Seite geladen wird, dies ist die Aktion, die sie ergreifen wird. Ich fange mit der Animation an. drücke hier den „Plus“ -Button, und jetzt bringe ich zum Aktionsmenü. Was ich tun muss, ist die „Plus“ -Taste erneut zu drücken. Dafür möchte ich Opazität machen. Was ich tun werde, ist die Deckkraft es auf Null bringt. Dies ist die Anfangsphase. Ich bringe das auf Null. Sie können sehen, die H1-Überschrift ist weg. Was ich tun wollte, ist, dass ich das Ende der Animation plus machen möchte, und ich möchte die Deckkraft wieder aufstellen. Dafür bringe ich die Deckkraft auf 100 Prozent. Wenn ich auf „Play“ drücke, kannst du sehen, was hier passiert. Es beginnt bei Null und es geht sehr leicht auf 100 Prozent. Wenn ich eines dieser Dinge auswähle, muss ich das erste auswählen und auf „Als Ausgangszustand festlegen“ klicken, damit es bei einer Deckkraft von null Prozent beginnt. Stellen Sie sicher, dass ich die Elemente ausgewählt habe. Jetzt können Sie hier sehen, dass es sich auf das ausgewählte H1-Element auswirken wird. Sie können sehen, es ist eine H1-Überschrift. Sie können es auch in der Klasse schaffen. Das bedeutet, dass es sich auf jeden einzelnen Titel oder jede Überschrift mit der H1-Überschrift auswirken wird. Ich mache das lieber, also beeinflusst es alles auf der Seite. Wenn ich auf „Play“ drücke, kannst du dir eine Vorschau ansehen wie es ausfallen wird. Was ich auch tun kann, ist, dass ich das letzte Stück auswähle. Sie können sehen, ich kann es nach vorherigen Aktionen starten, also wird es nach dem ersten Abschnitt beginnen. Ich kann es einfach machen, also macht es eine Leichtigkeit grundsätzlich reibungsloser. Ich kann es einfach machen. Das ist echt cool. Was ich tun möchte, ist, dass ich eine Verzögerung von vielleicht zwei Sekunden hinzufügen wollte , damit wir sehen können, wie es aussieht. Die Leichtigkeit kann die ersten 0,5 Sekunden betragen. Das war in Ordnung und ich denke, das ist in Ordnung. Ich klicke auf „Speichern“. Das kann ich auch umbenennen. Kurz bevor ich es speichern werde, sage ich verblassen. Dann klicke ich auf den Button „Speichern“. In diesem Teil sieht man, dass es das Fade hat. Wenn ich darauf klicke, bringe ich zurück und ich kann es bearbeiten. Ich kann die Dinge löschen und alles ändern, was ich will. Was ich tun kann, kann ich auf „Vorschau“ klicken und Sie können das Fade einfach so sehen. Offensichtlich sind die zwei Sekunden etwas lang, also gehe ich zurück, ändere die Verzögerung und mache es eine Sekunde. Klicken Sie auf „Speichern“. Ich klicke erneut auf „Vorschau“. Man sieht dort, es verblasst sehr gut. Großartig. Dann beginnt die Seite zu laden. Ich kann auch eine separate Animation hinzufügen wenn das Spiel geladen wird, aber das muss ich nicht tun. Wenn ich auf „Vorschau“ klicke, siehst du, dass die Animation funktioniert. Wir werden wieder gehen. Schau dir den Text an, er verblasst gut und einfach. Was wäre, wenn wir ein paar Texte hinzufügen wollten , die hineinfliegen oder den Button einfliegt? Ich klicke auf meinen „Absatz“ -Text. Ich klicke auf „Page Trigger“. Beim Laden der Seite möchten wir eine weitere Aktion ausführen. Anstatt hier das „Einblenden“ -Ding auszuwählen, möchten wir ein neues erstellen. Dafür werde ich mich bewegen. Ich klicke auf „Ausgangszustand festlegen“. Was wir tun wollen, ist die x-Achse der Seite so zu verschieben der Seite so von links hereinzukommen. Ich gehe zu Plus und bewege mich wieder. Dafür sorge ich dafür, dass es bei Null ist. Wir möchten es auswählen und die „Klasse“ auswählen. Statt dieses einzigen Elements wollen wir es zur ganzen Klasse machen. Die Verzögerung, ich schaffe es auch eine Sekunde. Ich klicke auf „Speichern“. Ich klicke auf „Vorschau“ und achte einfach auf die Absatztexte. Es sollte reinfliegen. Es passiert sehr schnell. Wir müssen es etwas langsamer machen. Ich gehe zurück. Wir haben das und wir haben die Leichtigkeit. Wir müssen uns tatsächlich entspannen. Wir können jede dieser benutzerdefinierten machen. Es ist echt cool. Wir werden es in Quart machen. Ich werde zwei Sekunden verzögern, einfach rein oder mache das eine Sekunde. Der Film wird null Pixel haben, also beginnt er wieder in dieser Position. Ich denke, dass es gut wird. Ich gehe zurück. Ich sollte es umbenennen und es move nennen. Speichern Sie und klicken wir auf „Vorschau“. Mal sehen, was passiert. Man bekommt das Fade und den Text einfach so herein. Schön. Dann können wir jetzt eine andere Animation auswählen. Wenn Sie das Fade in sehen möchten, können Sie sehen, dass es für diese Klasse funktioniert, und das ist wirklich einfach. Im Grunde fügst du so Interaktionen hinzu. Was ist, wenn ich einen Element-Trigger hinzufügen möchte? Ich buche über den Hauptknopf. Ich kann einen Elementauslöser machen. Ich klicke einfach darauf. Ich klicke auf den „Element-Trigger“. Was passiert, wenn wir den Mauszeiger über die Maus bewegen? Wir können eine ganze Reihe von Sachen hinzufügen. Wir können wachsen oder schrumpfen, eine Drehung, eine Fliege, was auch immer wir tun wollen, weil es sogar springt, aber wir können eine ganze Reihe von Sachen machen. Was ich tun kann, ist dass wir einen Pop machen und sehen, was dort passiert. Ich werde die Verzögerung vielleicht eine Sekunde machen. Beim Mauszeiger machen wir vielleicht wieder Pop und klicken dann auf „Vorschau“. Du siehst jetzt, wenn ich mit der Maus über den Knopf lege , schau was es tut. Es springt auf. Wenn ich es loslasse, springt es wieder. Super genial. Lass mich das einfach bearbeiten. Ich kann sicherstellen , dass Sie es auf dem Hauptknopf dort machen, wie in der Button-Instanz. Ich klicke hier wieder auf den Schwebeweg und vielleicht wollen wir etwas anderes machen. Vielleicht wollen wir eine Wirbelsäule machen oder so. Wir können Spin machen. Verzögerung im Uhrzeigersinn, wir machen vielleicht 0,5 Sekunden, 0,05. In diesem Fall machen wir die Spin-Outs, 0,5 Sekunden. Wir klicken auf „Vorschau“, wie Sie dies sehen können. Wenn ich gehe, klicke auf die Schaltfläche „Vorschau“, schau dir das an. Das ist ziemlich cool. Wollen wir, dass es sich dreht? Gehen wir gegen den Uhrzeigersinn. Verzögerung wäre einfach Null. Es ist auf Schweben. Cool. Ich kann es in die Klasse legen. Hier unten steht „Element“. Ich kann die Klasse wechseln. Testen wir das jetzt. Der Knopf, wenn ich die Maus darüber lege, sieht man das und es dreht sich weg. Das ist ziemlich cool. Wenn du unsichtbare Elemente platzierst und weil ich es in die Klasse geändert habe, wird es auch hier an diesem Button funktionieren. [NOISE] Das ist ziemlich dope. So macht man einen Seitenauslöser und einen Elementauslöser, zwei sehr einfache Möglichkeiten, nur Dinge zu machen. Sie können damit herumspielen, als ob Sie eine Maus oben machen oder mit der Maus über die Maus fahren können . Vielleicht hast du Schaltflächen oder du hast Illustrationen oder Icons und du willst, dass sie sich bewegen, du kannst das tun. Wenn Sie eher einen einfachen Seitenauslöser wünschen bei dem Sie scrollen, können Sie auch die Dinge bewegen. Das ist eine andere Möglichkeit, es zu tun. Hoffentlich habe ich Ihnen geholfen zu verstehen, wie Sie grundlegende Interaktionen verwenden können. 17. Einfaches Designsystem: Was ist ein Designsystem? Grundsätzlich kombiniert ein Designsystem alle Stile, Elemente und Komponenten einer Marke für eine Website. Es ist wie wenn Sie eine Markenidentität entwerfen und die Marke gedruckte Visitenkarten verwendet und ein Logo und all diese anderen Funktionen hat . Es ist im Grunde ein Styleguide, aber für Digital, im Grunde für das Web. Es ist buchstäblich ein System, bei dem Sie als Designer oder wenn Sie ein Team von Designern haben oder das Unternehmen, wenn Sie das Projekt übergeben, ein System haben, um sicherzustellen, dass alle diese Elemente zusammen als Teil von die gesamte Website, also haben sie globale Funktionen. Jetzt zeige ich Ihnen hier auf Dribbble einige Beispiele für einige Designsysteme. Zum Beispiel können Sie hier sehen, wenn ich auf einen dieser klicke, sehen Sie hier ein einfaches Designsystem. Es hat die Farben, die Markenfarben, das Typografiesystem, die Überschriften, die Absatzstile, alle Anführungszeichen. Sie haben auch einige UI-Komponenten. Wenn ich runtergehe, findest du hier noch ein paar. Zum Beispiel hat dieser eine ganze Reihe von Schaltflächen, UI, Modulen, Karten, eine ganze Reihe verschiedener Dinge, sogar Eingaben für Formulare und Dinge. Es kann sehr komplex werden, wenn Sie eine große Website haben, aber wenn es sich um eine einfache Kundenwebsite handelt oder für sich selbst, brauchen Sie nichts Verrücktes. Es könnte nur ein einfacher Styleguide oder ein Designsystem sein. Jetzt kannst du auf Dribbble gehen und oben Styleguide eingeben und du bekommst eine ganze Reihe von Sachen. Sie können hier auch Designsystem eingeben, und wenn ich „Enter“ drücke, erhalten Sie hier eine ganze Reihe verschiedener Dinge, verschiedene Komponenten, verschiedene Elemente. Sie können sehen, dass es die Farben, die Typografie, die Tabbalken, Schaltflächen, Avatare, Symbole, Textfelder hat die Typografie, die Tabbalken, Schaltflächen, . Wenn Sie einen dieser Stile aktualisiert haben, wird dies grundsätzlich den gesamten Stil über alles auf der Website ändern . Es ist ein globaler Wandel. Deshalb ist es gut, eines davon zu haben , denn alles mit derselben Klasse auf Webflow oder auf der Website wird sich tatsächlich auf alles auswirken, und deshalb ist es klug, so zu entwerfen. Jetzt können Sie zu Webflow gehen. Wenn Sie zu Showcase gehen, möchten Sie in die Leiste gehen und den Styleguide eingeben. Sie können auch Designsystem eintippen und wir können tatsächlich ein Projekt finden und klonen. Es gibt ein paar hier. Ich tippe das Designsystem weil ich vorher eines gefunden habe, das wirklich nützlich war. Ich habe das gefunden, dieser war ziemlich cool. Es hat schon 400 Klone, das ist echt cool. Sie können auf „Projekt anzeigen“ klicken. Was hier passiert, ist, dass Sie das eigentliche Seitendesign in Webflow anzeigen können . Ich kann auf „In Webflow öffnen“ klicken und das wird geöffnet. Sie können dieses Beispiel sehen. Ich schaue mir die Seite an. Es ist nur eine Seite. Ich kann auf „Vorschau“ klicken, und Sie können sehen, ob ich auf diese Registerkarten klicke, wird es im Grunde zu diesen Bereichen scrollen. Der Header ist da. Es hat Typografie, Absätze. Es hat Rich-Text-Dinge, Farben, Knöpfe, eine ganze Reihe verschiedener Dinge. Wenn ich in die obere rechte Ecke gehe, siehst du, dass der Lesemodus steht. Was ich tun möchte, ist auf „Projekt klonen“ zu klicken. Sobald du das getan hast, gehe ich zu diesem, weil ich es bereits geklont habe, ich sehe hier alle Wrapper, die Dibs, den ganzen Inhalt. Die Sache ist, dass ich das tatsächlich bearbeiten kann. Zum Beispiel möchte ich diesen Header vielleicht keine Inter-Schriftart, ich kann sie in Merriweather-Schriftart ändern, und jetzt wird sie in jeder Hinsicht geändert. Wenn ich jetzt eine Website erstelle, mache ich die normalen Seiten, es wird sich auf alles auswirken, solange die Klassen gleich sind. Dies ist eine Überschrift H1. Das ist echt cool. Es hat eine ganze Reihe von Sachen hier. Ich empfehle, ein grundlegendes Designsystem für Ihre Website zu verwenden ein grundlegendes Designsystem , es wird Ihnen helfen. Raster auch. Wie Sie hier sehen können, Leerzeichen. Es wird Ihnen Zeit sparen, aber es würde eine kleine Lernkurve brauchen , nur um sich daran zu gewöhnen und solche Sachen zu verwenden. Aber insgesamt habe ich das Gefühl, es eine wirklich großartige Praxis ist, in die man sich einlassen kann. Aber wenn Sie Ihre ersten paar Websites erstellen, betonen Sie sich nicht zu viel, spielen Sie einfach herum und verwenden Sie es. Aber wenn Sie darauf eingehen möchten, klonen Sie einfach ein Designsystem damit Sie es nicht von Grund auf neu machen müssen, und ich bin mir sicher, dass es Ihnen eine Menge helfen wird. 18. Hinzufügen von Lottie-Dateien: Jetzt zeige ich ein erstaunliches Tool, mit dem Sie Animationen nahtlos in Webflow integrieren können. Es heißt LottieFiles. Sie können einfach auf lottiefiles.com gehen und kostenlose Animationen herunterladen. So sieht die Website aus. Es wird von erstaunlichen Unternehmen unterstützt und es ist einfach wirklich cool. Sie können LottieFiles sehen. Einer der Vorteile ist, dass diese kleiner als PNGs und GIFs sind als PNGs und GIFs und auch schneller geladen werden als MP4s, so dass Sie hier ein Beispiel dafür sehen können. Es ist viel komprimierter und Sie können sehen, dass Leute immer neue LottieFiles, Animatoren usw. hochladen . Sie können das Plug-In auch für After Effects herunterladen, damit Sie sich das ansehen können. Sie haben die Download-Dateien hier. Gehe einfach zum Design oben und klicke auf „Mit After Effects erstellen“. Sie können auch den Editor verwenden, dem Sie online bearbeiten können, wenn Sie kein Animator sind. Sie können diese Tools einfach von Adobe Cloud oder dem Plug-In dort herunterladen . Sie können sehen, dass Sie es direkt aus After Effects in eine LottieFile exportieren können . Das ist LottieFiles. Es ist wirklich nützlich. Was Sie tun möchten, ist, dass Sie zu Discover gehen und oben links auf „Kostenlose Animationen“ klicken , und Sie werden zu diesem Abschnitt hier gelangen, wo ich buchstäblich jede Animation herunterladen kann und Sie können oben Filter verwenden, nach Popular. Was sie jetzt haben, heißt eigentlich Kategorien, also kann ich nach bestimmten suchen, die ich möchte. Wenn ich nach unten scrolle, kannst du sehen, dass sie eine ganze Reihe verschiedener Sachen haben : Motion Graphics, UI, ein ganz anderes Zeug, sogar Bieranimationen, was cool ist. Lasst uns das anklicken. Fühlen Sie sich frei herunterzuladen, was auch immer Sie wollen, was auch immer Ihr Boot schwimmt. Dieser sieht ziemlich cool aus, Neujahrsparty, aber es gibt einfach so viele verschiedene Animationen. Ich habe ein paar heruntergeladen. Wenn Sie beispielsweise eine Animation herunterladen möchten, wenn Sie diese hier haben möchten, klicke ich einfach darauf. Sie möchten nach oben gehen und auf „Herunterladen“ klicken, und was Sie herunterladen möchten, ist eine Lottie JSON-Datei. Sie können die GIFs und MP4 herunterladen, aber das ist das, was wir wollen, also klicken Sie darauf und es sollte auf Ihren Computer heruntergeladen werden. Was ich mache, ist zu Webflow zu springen . Jetzt bin ich weitergegangen. Ich habe schon ein paar heruntergeladen, und was wir tun möchten, ist das hinzuzufügen, also scrolle ich einfach nach unten und möchte es diesem Abschnitt hinzufügen. Ich hab ein bisschen Chat eins. Was ich tun werde, ist auf die linke Seite, auf die Assets zu klicken , und Sie können sehen, dass ich das bereits hineingezogen habe, aber ich werde diese anderen beiden einfach so hineinziehen, wie Sie es normalerweise als normales Bild tun würden. Jetzt können Sie sehen, dass wir diese JSON-Dateien haben, die die Animation sind. Ich kann die Maus darüber legen, und das wird mir das zeigen , wie du dort siehst. Was ich jetzt machen werde, ist dass ich einfach klicke und ihn hier in meinen Container ziehe . Ich hab's kapiert. Ich kann die Größe ändern. Vielleicht möchte ich nur die Pixel ablegen, vielleicht 300 Pixel, so. Wenn ich jetzt auf „Vorschau“ klicke, können Sie sehen, dass die Animation automatisch ausgeführt wird. Super einfach. Ich musste wirklich nichts tun, weil es automatisch integriert ist. Sie können sehen, wie die Animation tatsächlich gestoppt wurde. Was ist, wenn du es tatsächlich schleifen wolltest? Ich kann aus dem Vorschaumodus zurückkehren. Ich doppelklicke, wenn ich runtergehe, siehst du, dass „Loop“ steht. Ich möchte das übernehmen. Ich kann auch rückwärts spielen, und ich kann auch die eingebaute Dauer ändern , wenn ich nicht schleife. Ich klicke einfach wieder auf „Vorschau“, und jetzt sollte es automatisch und immer wieder ohne anzuhalten. Da haben wir es. So einfach, so einfach. Jetzt zeige ich Ihnen eine Möglichkeit, eine Animation mit dem LottieFile zu erstellen. Ich bin auf meine andere Seite gegangen, und Sie können hier sehen, dass ich meine gesamte Prozessseite habe. Ich habe drei Schritte, wie ich arbeite. Was ich mache, ist mit Schritt 2 fortzufahren. Ich zeige Ihnen, wie Sie eine Scroll-Animation mit LottieFile erstellen , also klicke ich auf das Asset. Ich ziehe dieses Grafikdesign ein und ziehe es einfach unter den Absatzabschnitt hier. Du siehst dieses nette, große Icon. Was ich jetzt tun kann, ist, dass ich die Pixel davon ändern kann. Lass uns 600 gehen. Sobald wir unsere Animation haben, möchten wir sicherstellen, dass wir sie auswählen, also klicke ich darauf und Sie können sehen, dass sie im Navigator ausgewählt ist. Ich gehe in die obere rechte Ecke und stelle sicher, dass meine Interaktionen hier ausgewählt sind. Gehen Sie zu Element-Trigger und klicken Sie auf die Schaltfläche „Plus“. Was ich jetzt tun möchte, ist zu „Während des Scrollens in Sicht“ zu gehen . Dies wird es uns ermöglichen, während wir nach unten scrollen, dass die Animation nicht mehr abgespielt wird . Jetzt klicke ich darauf. Ich klicke auf „Aktion auswählen“ und klicke auf „Scroll-Animation abspielen“. Sie haben hier ein paar Einstellungen den Animationsgrenzen. Sie können damit herumspielen, aber ich werde das für den Moment einfach belassen, und Sie können sehen, dass Sie eine Scroll-Animation haben, und sie heißt New Scroll-Animation. Ich klicke darauf und klicke auf das „Zahnrad“. Sie können auf der rechten Seite sehen, Sie sehen, dass Sie ein gelbes Ausrufe-Etikett haben, also funktioniert es offensichtlich nicht, also werde ich nur sicherstellen, dass wir unsere Lottie-Animation auswählen. Ich klicke auf „Plus“ und klicke auf „Lottie“. Sie können sehen, dass die Integration auftauchen sollte, und Sie können dort auf „Lottie“ klicken. Stellen Sie sicher, dass es ausgewählt und plus ist, und dann werden wir die Lottie dort haben , wie Sie sehen können. Cool. Wie Sie sehen können, wird die Animation bei null Prozent auf Null-Frames sein, also wird sie am Stopp sein, und wenn wir bei hundert Prozent sind, möchten wir die Animation voranbringen. Sie können sehen, dass die Animation in der Vorschau angezeigt wird. Wir wollen, dass es bei hundert Prozent liegt, dann werde ich eine Keyframe-Leichtigkeit hinzufügen. Ich werde das erleichtern und dann die 100-prozentige beruhigt, also hast du dort eine reibungslose Animation. Ich klicke auf „Speichern“. Während ich nach unten scrolle, kannst du sehen, wie die Animation abgespielt wird. Das siehst du. Es sieht vielleicht ein bisschen zackig weil ich den Bildschirm aufnehme, aber du kannst sehen, wie er sich bewegt, was wirklich cool ist. Wir können es mit jeder anderen Animation machen. Probieren wir das Bier hier drüben. Ich ziehe das runter. Ich nehme einfach die Vorschau an. Wir haben das Haus eins, tut uns leid. Wir haben das Haus eins, das ist cool. Ich kann zurückgehen und den Element-Trigger „Beim Scrollen der blauen Ansicht“ hinzufügen . Ich kann auch auf die Schriftrolle klicken, und das sollte auch funktionieren. Ich geh wieder hoch. durchblättern, können Sie sehen, dass es animiert, und während ich nach unten scrolle, können Sie sehen, dass es so durchkommt. Sie können immer zurückgehen, und wir können gehen und die Scroll-Animation bearbeiten. Wir können die Lockerung ändern, wenn Sie die lockernde Live-Vorschau nicht aktivieren möchten . Sie können unten rechts eine Live-Vorschau erstellen, und Sie können sehen, wie es aussieht. Das sieht ziemlich cool aus. So fügst du eine Scroll-Animation hinzu. 19. Verbinden zum Domain: Sobald Sie mit Ihrer Website zufrieden sind, zeige ich Ihnen, wie Sie Ihre Domain verbinden können. Jetzt musst du nur noch in die rechte obere Ecke gehen. Wenn Sie auf „Veröffentlichen“ klicken und es in einer benutzerdefinierten Domain veröffentlichen möchten , sehen Sie hier eine Schaltfläche Aufschrift „Klicken Sie hier“. Jetzt klicke ich darauf und es gehe zu den Kontoeinstellungen im Backend des Projekts. Sie werden sehen, dass Sie sofort zum Abrechnungsbereich gelangen, und das liegt daran, dass Sie für ein Konto bezahlen müssen, um die Website zu hosten. Sobald Sie das getan haben, können Sie Ihre Domain verbinden. Wenn Sie die Domain nicht verbinden, müssen Sie Jeremymura.webflow.ai oder wie auch immer Ihr Name ist. Sobald Sie das getan haben, können Sie nach unten scrollen und Sie gelangen zum Abschnitt „Benutzerdefinierte Domäne“. Jetzt haben Sie hier die Möglichkeit, die Domain zu verbinden , weil ich auf der Website bin, die ich nicht habe, ich gehe in einer Sekunde auf die andere Seite. Aber Sie können hier auf diese Schaltfläche klicken und es zeigt Ihnen , wie Sie Ihre Domain verbinden können. Jetzt benutze ich persönlich GoDaddy dafür. Ich denke, GoDaddy ist eine großartige Website für den Kauf von Domains. Es ist billig, erschwinglich und es ist wirklich einfach zu bedienen. Sie haben eine wirklich saubere Benutzeroberfläche. Jetzt gehe ich einfach zurück zu einer meiner anderen Seiten, die ich habe. Sobald Sie sich in den benutzerdefinierten Domain-Einstellungen befinden, können Sie hier sehen, dass meine veröffentlicht wurde, alles grün ist und alles verbunden ist. Jetzt können Sie auch eine benutzerdefinierte Domain hinzufügen, damit Sie sehen können, dass Sie dort eine Domain platzieren oder eine neue über GoDaddy oder Google kaufen können . Sie können sehen, ob Sie auf „GoDaddy“ klicken , gelangen Sie dorthin. Was Sie jetzt tun müssen, um es zu verbinden, ist, dass Sie sich mit dem DNS verbinden müssen. Ich gehe zu meinen Produkten und du musst die Domainnummer von Webflow zu deiner Domain hinzufügen . Ich klicke auf die Domain, klicke auf die drei Punkte und klicke auf „ DNS verwalten“, und klicke auf „ DNS verwalten was für Domainnamensystem steht. Ich scrolle nach unten. Im Moment kannst du sehen, dass ich einen CNAME-Datensatz und den proxy-ssl.webflow.com habe. Es ist ziemlich einfach, dies hinzuzufügen. Du kannst es bearbeiten. Sie können grundsätzlich oben rechts auf „Hinzufügen“ klicken. Sie können auf CNAME klicken und dann WWW eingeben, und in diesem kopieren Sie es einfach von der Website, fügen es ein, und dies kann eine fügen es ein, und halbe Stunde dauern oder was auch immer es ist. Dann fügst du den Datensatz hinzu und wartest dann im Grunde einfach, manchmal dauert es 30 Minuten, eine Stunde, was auch immer. Sobald Sie es gespeichert haben, sollte es automatisch grün werden und dann können Sie loslegen. 20. Vielen Dank: Ich wollte mich bedanken, dass du an dieser Klasse teilgenommen hast. Hoffentlich haben Sie alle Tools und Techniken gelernt, die Sie benötigen, um erstaunlichen No-Code von Websites zu erstellen. Denken Sie daran, daran teilzunehmen und das Klassenprojekt tatsächlich zu machen. Ich werde jedes Projekt überprüfen und Feedback geben wo ich kann, und nur um sicherzustellen, dass Sie sich verbessern und immer besser werden. Wenn Sie nun eine Sache tun können und einfach auf die Schaltfläche „Folgen“ in meinem Konto klicken, um Updates zu neuen Klassen zu erhalten , weil ich 2022 eine ganze Reihe neuer Kurse bekommen habe . Das willst du dir nicht entgehen lassen. Wenn Sie Fragen haben oder Unterstützung benötigen, posten Sie bitte einfach eine Diskussion im Diskussionsforum unten und ich beantworte Ihre Fragen so schnell ich kann. In Zukunft werde ich in einem Teil des Kurses kleine zusätzliche Teile aktualisieren . Wenn Sie andere Vorschläge oder Dinge haben , die Sie lernen möchten und das Gefühl haben, dass ich es verpasst habe, schreiben Sie dies definitiv als Vorschlag in eine E-Mail oder nur einen Vorschlag in das folgende Feld. Vielen Dank. Wir freuen uns darauf, neue Kurse zu machen, und wir sehen uns im nächsten.